build

src/components/newReport/src/PurchaseBack.vue

@@ -11,7 +11,7 @@
       <el-table-column label="反馈单数" prop="num" />
       <el-table-column label="竞价参与度" prop="participation" width="120px">
         <template slot-scope="scope">
-          {{getParticipation(scope.row.num, total)}}
+          {{getParticipation(scope.row.num)}}
         </template>
       </el-table-column>
     </el-table>
@@ -42,14 +42,14 @@ export default {
         addition(prev, curr.num || 0)
       ),0)
 
-      this.$emit("getZXTotal", total)
       return total
     }
   },
   data() {
     return {
       loading:false,
-      tableData:[]
+      tableData:[],
+      zxTotal:0
     };
   },
   async created() {
@@ -64,12 +64,12 @@ export default {
     this.searchList();
   },
   methods: {
-    getParticipation(num, total){
-      if(Number(num) === 0 && total === 0) {
+    getParticipation(num){
+      if(Number(num) === 0 && Number(this.zxTotal) === 0) {
         return "0%"
       }
 
-      return multiplication(division(num, total), 100).toFixed(2) + "%"
+      return multiplication(division(num, this.zxTotal), 100).toFixed(2) + "%"
     },
     async searchList() {
       this.loading = true;
@@ -80,6 +80,8 @@ export default {
         end:this.date[1] || ""
       });
 
+      console.log(res.data)
+
       if (res.code === 0 && res.data && res.data.length > 0) {
         this.tableData = res.data.reduce((prev,curr = { name:"", result: {}}) => {
           return [
@@ -88,6 +90,13 @@ export default {
               return {  name:curr.name,  ...curr.result[key] }
             })]
         },[])
+
+        console.log()
+
+        const { num } = this.tableData.pop()
+        this.$emit('getZXTotal', num)
+        this.zxTotal = num;
+        // console.log(this.tableData)
       } else {
         this.tableData = [];
       }

src/components/newReport/src/date-picker-title.vue

@@ -0,0 +1,52 @@
+<template>
+  <div  class="picker-title">
+    <p style="margin:0">{{ title }}</p>
+    <div style="display:flex;align-items: center;justify-content: flex-end;margin:10px 0px;">
+      <period-date-picker :start="date[0]" :end="date[1]" size="mini" width="150px" @timeReturned="time($event)" />
+    </div>
+  </div>
+</template>
+
+
+<script>
+import PeriodDatePicker from "@/components/period-date-picker";
+export default {
+  name:'PickerTitle',
+  props:['title'],
+  components:{ PeriodDatePicker },
+  data(){
+    return {
+      date: []
+    }
+  },
+  watch:{
+    date: function(val) {
+      const newVal = val.filter(v => v !== "")
+      if (newVal && newVal.length === 2) {
+        this.$emit("refresh", val);
+      }
+    }
+  },
+  methods:{
+    async time(e) {
+      const { startTime, endTime } = e;
+      this.start = startTime || "";
+      this.end = endTime || "";
+
+      const { start, end } = this;
+      if ((start !== "" && end === "") || (start === "" && end !== "")) {
+        this.$message.warning("时间区间不完整！");
+        this.date = []
+        return;
+      }
+
+      if(this.start && this.end){
+        this.date = [this.start + " 00:00:00", this.end + " 23:59:59"]
+      }else{
+        this.date = [this.start, this.end]
+      }
+
+    }
+  }
+}
+</script>

src/components/newReport/src/purchase.vue

@@ -6,8 +6,8 @@
       <el-table-column label="库存品" prop="tag_1" />
       <el-table-column label="非库存品" prop="tag_2" />
       <el-table-column label="采返" prop="tag_zx"/>
-      <el-table-column label="TOB" prop="tag_b" />
       <el-table-column label="TOC" prop="tag_c" />
+      <el-table-column label="TOB" prop="tag_b" />
     </el-table>
   </div>
 </template>
@@ -67,6 +67,7 @@ export default {
             })]
         },[])
 
+
         const totalItem = {
           cgder:'合计',
           name:'--',

src/pages/newReport.vue

@@ -15,7 +15,7 @@
 
         <el-row>
           <el-col :xs="24">
-            <p class="title">2.竞价反馈统计</p>
+            <p class="title">2.竞价反馈统计, 竞价单总数{{ zxTotal }}</p>
             <purchase-back :date="date" @getZXTotal="getZXTotal" />
           </el-col>
         </el-row>