每日面料使用率报表接入接口

src/view/store-out-manage/daily-report/daily-report.vue

@@ -1,4 +1,4 @@
-<!-- 供应商价格维护 -->
+<!-- 每日面料使用率报表 -->
 <template>
   <div class="container">
     <div class="tab-nav">
@@ -15,9 +15,14 @@
         <i-col span="8" style="display: flex">
           <div style="min-width: 40px; line-height: 32px; text-align: center">直喷:</div>
           <div class="row">
-            <Button :type="btnIndex === index ? 'primary' : 'default'" @click="userClick(item.jobNo, index)" v-for="(item, index) in userList" :key="index">
-              <span>{{ item.userName }}（</span>
-              <span style="color: red">{{ item.sum }}</span>
+            <Button
+              :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
+              @click="userClick(item)"
+              v-for="(item, index) in typeList['0']"
+              :key="index"
+            >
+              <span>{{ item.realName }}（</span>
+              <span style="color: red">{{ item.useRate }}%</span>
               <span>）</span>
             </Button>
           </div>
@@ -25,9 +30,14 @@
         <i-col span="8" style="display: flex">
           <div style="min-width: 40px; line-height: 32px; text-align: center">打纸:</div>
           <div class="row">
-            <Button :type="btnIndex === index ? 'primary' : 'default'" @click="userClick(item.jobNo, index)" v-for="(item, index) in userList" :key="index">
-              <span>{{ item.userName }}（</span>
-              <span style="color: red">{{ item.sum }}</span>
+            <Button
+              :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
+              @click="userClick(item)"
+              v-for="(item, index) in typeList['2']"
+              :key="index"
+            >
+              <span>{{ item.realName }}（</span>
+              <span style="color: red">{{ item.useRate }}%</span>
               <span>）</span>
             </Button>
           </div>
@@ -35,76 +45,80 @@
         <i-col span="8" style="display: flex">
           <div style="min-width: 40px; line-height: 32px; text-align: center">热转:</div>
           <div class="row">
-            <Button :type="btnIndex === index ? 'primary' : 'default'" @click="userClick(item.jobNo, index)" v-for="(item, index) in userList" :key="index">
-              <span>{{ item.userName }}（</span>
-              <span style="color: red">{{ item.sum }}</span>
+            <Button
+              :type="btnIndex === item.userId + '_' + item.technologyType ? 'primary' : 'default'"
+              @click="userClick(item)"
+              v-for="(item, index) in typeList['1']"
+              :key="index"
+            >
+              <span>{{ item.realName }}（</span>
+              <span style="color: red">{{ item.useRate }}%</span>
               <span>）</span>
             </Button>
           </div>
-
         </i-col>
       </Row>
     </div>
     <div class="border"></div>
     <div class="table-filter">
-      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 13%" @click="fabricAndInkClick(5)">
+      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 13%">
         <div class="label" style="border-right: 2px solid #dcdcdc">
           <span>排班</span>
         </div>
         <ul>
           <li>
             面积
-            <span>{{ getData(5, 'num') }}</span>
+            <span>{{ statisticsDetails.scheduleArea }}</span>
           </li>
         </ul>
       </div>
-      <div class="fabric" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 26%" @click="fabricAndInkClick(5)">
+      <div class="fabric" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 28%">
         <div class="label" style="border-right: 2px solid #dcdcdc">
           <span>领料</span>
         </div>
         <ul>
           <li>
             金额
-            <span>{{ getData(5, 'num') }}</span>
+            <span>{{ statisticsDetails.pickingMoney }}</span>
           </li>
           <li>
             卷数
-            <span>{{ getData(5, 'num') }}</span>
+            <span>{{ statisticsDetails.pickingNum }}</span>
           </li>
           <li>
             米数
-            <span>{{ getData(5, 'purchaseQty') }}</span>
+            <span>{{ statisticsDetails.pickingMeters }}</span>
           </li>
           <li>
             面积
-            <span>{{ getData(5, 'area') }}</span>
+            <span>{{ statisticsDetails.pickingArea }}</span>
           </li>
         </ul>
       </div>
-      <div class="fabric" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 26%" @click="fabricAndInkClick(5)">
+      <div class="fabric" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 28%">
         <div class="label" style="border-right: 2px solid #dcdcdc">
           <span>退料</span>
         </div>
         <ul>
           <li>
             金额
-            <span>{{ getData(5, 'num') }}</span>
+            <span>{{ statisticsDetails.backMoney }}</span>
           </li>
           <li>
             卷数
-            <span>{{ getData(5, 'num') }}</span>
+            <span>{{ statisticsDetails.backNum }}</span>
           </li>
           <li>
             米数
-            <span>{{ getData(5, 'purchaseQty') }}</span>
+            <span>{{ statisticsDetails.backMeters }}</span>
           </li>
           <li>
             面积
-            <span>{{ getData(5, 'area') }}</span>
+            <span>{{ statisticsDetails.backArea }}</span>
           </li>
         </ul>
       </div>
-      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 13%" @click="fabricAndInkClick(5)">
+      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 13%">
         <div class="labelOne" style="border-right: 2px solid #dcdcdc">
           <span>实际</span><br />
           <span>使用</span>
@@ -112,11 +126,11 @@
         <ul>
           <li>
             面积
-            <span>{{ getData(5, 'num') }}</span>
+            <span>{{ statisticsDetails.actualUse }}</span>
           </li>
         </ul>
       </div>
-      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 13%" @click="fabricAndInkClick(5)">
+      <div class="fabricOne" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 13%">
         <div class="labelOne" style="border-right: 2px solid #dcdcdc">
           <span>面料</span><br />
           <span>使用率</span>
@@ -124,19 +138,13 @@
         <ul>
           <li>
             使用率
-            <span>{{ getData(5, 'num') }}</span>
+            <span>{{ statisticsDetails.useRate }}%</span>
           </li>
         </ul>
       </div>
     </div>
     <div class="main">
-      <my-table
-        ref="table"
-        :data="data"
-        :columns="columns"
-        :table-page="params"
-        @on-change="changePage"
-      ></my-table>
+      <my-table ref="table" :data="data" :columns="columns" :table-page="params" @on-change="changePage"></my-table>
     </div>
   </div>
 </template>
@@ -163,49 +171,56 @@ export default {
         },
         {
           title: '人员',
-          key: 'materialCode',
+          key: 'userName',
           minWidth: 100,
-          align: 'center',
+          align: 'center'
         },
         {
           title: '排版面积',
-          key: 'materialName',
+          key: 'scheduleArea',
           minWidth: 100,
-          align: 'center',
+          align: 'center'
         },
         {
           title: '面料名称',
-          key: 'spec',
+          key: 'materialName',
           minWidth: 400,
-          align: 'center',
+          align: 'center'
         },
         {
           title: '领料面积',
-          key: 'spec',
+          key: 'pickingArea',
           minWidth: 100,
-          align: 'center',
+          align: 'center'
         },
         {
           title: '退仓面积',
-          key: 'spec',
+          key: 'backArea',
           minWidth: 100,
-          align: 'center',
+          align: 'center'
         },
         {
           title: '实际使用面积',
-          key: 'spec',
+          key: 'actualUse',
           minWidth: 100,
           align: 'center',
           className: 'add-color',
+          render: (h, params) => {
+            if (params.row.actualUse !== void 0) {
+              return h('div', {}, parseFloat(Number(params.row.actualUse)).toFixed(2))
+            } else {
+              return h('div', [h('span', '----')])
+            }
+          }
         },
         {
           title: '面料使用率',
-          key: 'spec',
+          key: 'useRate',
           minWidth: 150,
           align: 'center',
           className: 'add-color',
           render: (h, params) => {
-            if (params.row.spec !== void 0) {
+            if (params.row.useRate !== void 0) {
               return h(
                 'div',
                 {
@@ -213,15 +228,14 @@ export default {
                     color: 'red'
                   }
                 },
-                parseFloat(Number(params.row.spec) * 100).toFixed(2) + '%'
+                params.row.useRate + '%'
               )
             } else {
               return h('div', [h('span', '----')])
             }
           }
-        },
+        }
       ],
-      userList: [],
       btnIndex: '',
       params: {
         pageNum: 1,
@@ -229,71 +243,89 @@ export default {
         type: '3',
         beginTime: null,
         endTime: null,
-        total: 0
+        total: 0,
+        technologyType: '',
+        jobNo: '',
+        userId: ''
+      },
+      statisticsDetails: {
+        scheduleArea: '',
+        pickingMoney: '',
+        pickingNum: '',
+        pickingMeters: '',
+        pickingArea: '',
+        backMoney: '',
+        backNum: '',
+        backMeters: '',
+        backArea: '',
+        useRate: '',
+        actualUse: ''
       }
     }
   },
   mounted() {
-    this.$Message.error('服务器异常')
-    // this.getAllList()
+    this.getAllList()
   },
   methods: {
     selectTime() {
       this.getAllList()
     },
     getAllList() {
-      // this.getTypeList()
-      // this.$nextTick(() => {
-      //   this.getList()
-      // })
-    },
-    getTypeList() {
-      // this.technologyType = ''
-      // axios
-      //   .post('/cloudApi/applyPurchase/technologyTypeStatistics', {
-      //     type: this.params.type,
-      //     beginTime: this.params.beginTime,
-      //     endTime: this.params.endTime,
-      //     keyword: this.keyword
-      //   })
-      //   .then(res => {
-      //     this.typeList = res.data.data
-      //   })
-    },
-    fabricAndInkClick(index) {
-      this.technologyType = index
-      this.$nextTick(() => {
-        this.getList()
-      })
+      axios
+        .post('/cloudApi/stockBack/userStatistics', {
+          beginTime: this.params.beginTime,
+          endTime: this.params.endTime
+        })
+        .then(res => {
+          this.typeList = res.data.data
+          this.getList()
+        })
     },
-    getData(num, name) {
-      if (this.typeList[num] && this.typeList[num][name]) {
-        return this.typeList[num][name]
+    userClick(item) {
+      if (this.btnIndex === item.userId + '_' + item.technologyType) {
+        this.params.userId = ''
+        this.params.jobNo = ''
+        this.params.technologyType = ''
+        this.btnIndex = item.userId + '_' + ''
       } else {
-        return '0'
+        this.params.userId = item.userId
+        this.params.jobNo = item.jobNo
+        this.params.technologyType = item.technologyType
+        this.btnIndex = item.userId + '_' + item.technologyType
       }
+      this.getList()
     },
     changePage(pageNum) {
       this.params.pageNum = pageNum
       this.getList()
     },
     getList() {
-      // this.$Spin.show()
-      // axios
-      //   .post('/cloudApi/applyPurchase/page', {
-      //     ...this.params,
-      //     type: this.params.type,
-      //     beginTime: this.params.beginTime,
-      //     endTime: this.params.endTime,
-      //     keyword: this.keyword,
-      //     technologyType: String(this.technologyType)
-      //   })
-      //   .then(res => {
-      //     this.data = res.data.data.records
-      //     this.params.total = res.data.data.total
-      //     this.$Spin.hide()
-      //   })
-    },
+      axios
+        .post('/cloudApi/stockBack/statisticsDetails', {
+          beginTime: this.params.beginTime,
+          endTime: this.params.endTime,
+          technologyType: this.params.technologyType,
+          jobNo: this.params.jobNo,
+          userId: this.params.userId
+        })
+        .then(res => {
+          this.statisticsDetails = res.data.data
+        })
+      axios
+        .post('/cloudApi/stockBack/statisticsPage', {
+          pageNum: this.params.pageNum,
+          pageSize: this.params.pageSize,
+          beginTime: this.params.beginTime,
+          endTime: this.params.endTime,
+          technologyType: this.params.technologyType,
+          jobNo: this.params.jobNo,
+          userId: this.params.userId
+        })
+        .then(res => {
+          this.data = res.data.data.records
+          this.params.total = res.data.data.total
+        })
+    }
   }
 }
 </script>
@@ -450,35 +482,41 @@ export default {
   .fabric {
     display: flex;
     .label {
-      width: 20%;
+      width: 14%;
       text-align: center;
     }
     ul {
-      width: 80%;
+      width: 86%;
       li {
         width: 25%;
         text-align: center;
         line-height: 24px;
+        span {
+          font-size: 16px !important;
+        }
       }
     }
   }
   .fabricOne {
     display: flex;
     .label {
-      width: 50%;
+      width: 40%;
       text-align: center;
     }
     .labelOne {
-      width: 50%;
+      width: 40%;
       line-height: 30px;
       text-align: center;
     }
     ul {
-      width: 50%;
+      width: 60%;
       li {
         width: 100%;
         text-align: center;
         line-height: 24px;
+        span {
+          font-size: 16px !important;
+        }
       }
     }
   }