单证-订单统计表 接口准备

src/views/reportForms/order-statistics/chart/external/customerChart.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 客户统计图 外部  报表 订单统计  -->
-  <div id="cusChart" :style="{ width: '100%', height: '600px' }"></div>
+  <div id="customerChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
@@ -8,58 +8,59 @@ import * as echarts from 'echarts'
 import { cusChart } from '@api/reportForms/order-statistics.js'
 
 export default {
-  name: 'DepartmentChart', // 部门统计图
+  name: 'CustomerChart', // 客户统计图
   data() {
     return {
       queryParam: {
-        vendorType: '外部',
-        startYearMonth: '',
+        department: '',
         endYearMonth: '',
-        customer: ''
+        startYearMonth: '',
+        vendorType: ''
+
+        // cvenAbbName: ''供应商
       },
       // newData: {
-      customerArr: [],
-      realQuantityArr: [],
-      localMoneyArr: []
+      cvenAbbNameArr: [],
+      // departmentArr:[],
+      iquantityArr: [],
+      inatMoneyArr: []
       // }
     }
   },
 
   mounted() {
-    this.getChartData()
-    console.log('客户')
-    // this.initEcharts()
+    this.getCusChartData()
   },
   methods: {
     // 1、先获取 chart 数据
-    getChartData() {
-      // 
+    getCusChartData() {
       cusChart(this.queryParam).then(res => {
+        // this.queryParam.vendorType = ''
+        // console.log('kkk', this.queryParam)
         if (res.success) {
-          if (res.result) {
-            res.result.records.forEach(item => {
-              this.customertArr.push(item.customerArr)
-              this.realQuantityArr.push(item.realQuantityArr)
-              this.localMoneyArr.push(item.localMoneyArr)
-            })
-            console.log('三数组', this.customerArr, this.realQuantityArr, this.localMoneyArr)
-          }
+          // console.log('客户统计图数据', res.result)
+          res.result.forEach(item => {
+            this.cvenAbbNameArr.push(item.cvenAbbName)
+            this.iquantityArr.push(item.iquantity)
+            this.inatMoneyArr.push(item.inatMoney)
+          })
+          // console.log('三数组', this.cvenAbbNameArr, this.iquantityArr, this.inatMoneyArr)
         }
+
         //2、后图
         this.$nextTick(() => {
           this.initEcharts()
-          console.log('部门图渲染')
         })
       })
     },
 
     initEcharts() {
-      const myChart = echarts.init(document.getElementById('cusChart')) //dark ,深色主题
-      // 配置
+      const myChart = echarts.init(document.getElementById('customerChart')) //dark
+
       const option = {
         title: {
           bpttom: '20',
-          text: '客户统计表',
+          text: '供应商统计表',
           textStyle: {
             fontSize: 18,
             color: '#5470c6'
@@ -72,16 +73,16 @@ export default {
             crossStyle: {
               color: '#999'
             }
+          },
+          textStyle: {
+            fontSize: 18
           }
-          // textStyle: {
-          //   fontSize: 18
-          // }
         },
         legend: {
-          // textStyle: {
-          //   fontSize: 16,
-          //   color: '#5470c6'
-          // },
+          textStyle: {
+            fontSize: 16,
+            color: '#5470c6'
+          },
           data: [
             '实际数量',
             '本币金额'
@@ -109,16 +110,15 @@ export default {
           axisPointer: {
             type: 'shadow'
           },
-          // data: ['FD', 'PMK', 'AUCHAN', 'BIOWORLD', 'CB', 'DUNNES', 'EVA-L']
-          data: this.customerArr
+          data: this.cvenAbbNameArr
         },
         yAxis: [
           {
             type: 'value',
             name: '实际数量',
-            min: 0,
-            max: 100000,
-            interval: 10000,
+            // min: 0,
+            // max: 100000,
+            // interval: 10000,
             axisLabel: {
               // formatter: '{value} ml'
             }
@@ -126,9 +126,9 @@ export default {
           {
             type: 'value',
             name: '本币金额',
-            min: 0,
-            max: 1200000,
-            interval: 200000,
+            // min: 0,
+            // max: 1200000,
+            // interval: 200000,
             axisLabel: {
               // formatter: '{value} °C'
             }
@@ -154,8 +154,7 @@ export default {
             //   }
             // },
             barWidth: '30%',
-            // data: [90000, 40000, 87666, 65555, 26347, 87687, 26546]
-            data: this.dyeLossRateArr
+            data: this.iquantityArr
           },
           {
             name: '本币金额',
@@ -165,8 +164,8 @@ export default {
               //   // return value + ' ml'
               // }
             },
-            // data: [22443, 68176, 71276, 50176, 70176, 68976, 38276]
-            data: this.localMoneyArr
+            yAxisIndex: 1,
+            data: this.inatMoneyArr
           }
         ]
       }
@@ -177,20 +176,20 @@ export default {
           myChart.resize()
         }
       })
-    },
+    }
 
     // watch: {
     //   // 3、监听数据变化
-    //   // newData: {
-    //   deep: true,
-    //   handler() {
-    //     //  数据变化，执行
-    //     const { cvenNameArr, dyeLossRateArr } = this.newData
-    //     this.initEcharts(cvenNameArr, dyeLossRateArr)
-    //     console.log('监听外部客户数据变化')
+    //   newData: {
+    //     deep: true,
+    //     handler() {
+    //       //  数据变化，执行
+    //       const { cvenAbbNameArr, iquantityArr, inatMoneyArr } = this.newData
+    //       this.initEcharts(cvenAbbNameArr, iquantityArr, inatMoneyArr)
+    //       console.log('监听 外部客户 数据变化')
+    //     }
     //   }
     // }
-    // }
   }
 }
 </script>

src/views/reportForms/order-statistics/chart/external/departmentChart.vue

@@ -1,6 +1,6 @@
 <template>
   <!--  部门统计图  外部 报表 订单统计   -->
-  <div id="depChart" :style="{ width: '100%', height: '600px' }"></div>
+  <div id="departmentChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
@@ -9,53 +9,53 @@ import * as echarts from 'echarts'
 import { depChart } from '@api/reportForms/order-statistics.js'
 
 export default {
-  name: 'CustomerChart', // 部门统计图
+  name: 'DepartmentChart', // 部门统计图
   data() {
     return {
-      queryParam: {
-        vendorType: '外部',
-        startYearMonth: '',
-        endYearMonth: '',
-        department: '',
+      prop: {
+        // customer: '', //客户
+        // endYearMonth: '',
+        // startYearMonth: '',
+        vendorType: ''
+        // cdepName: ''
       },
+
       // newData: {
-      departmentArr: [], //部门 数组
-      realQuantityArr: [], //实际数量
-      localMoneyArr: [] //本币金额
+      cdepNameArr: [], //部门 数组
+      iquantityArr: [], //实际数量
+      inatMoneyArr: [] //本币金额
+      // }
     }
   },
-  // },
 
   mounted() {
     this.getDepChartData()
-    console.log('部门')
-    // this.initEcharts()
   },
   methods: {
     // 1、先获取 chart 数据
     getDepChartData() {
-      // 
-      depChart(this.queryParam).then(res => {
+      this.prop.vendorType = ''
+      depChart(this.prop).then(res => {
         if (res.result) {
-          res.result.records.forEach(item => {
-            this.departmentArr.push(item.departmentArr)
-            this.realQuantityArr.push(item.realQuantityArr)
-            this.localMoneyArr.push(item.localMoneyArr)
+          // console.log('部门统计图数据', res.result)
+          res.result.forEach(item => {
+            this.cdepNameArr.push(item.cdepName)
+            this.iquantityArr.push(item.iquantity)
+            this.inatMoneyArr.push(item.inatMoney)
           })
-          console.log('三数组', this.departmentArr, this.realQuantityArr, this.localMoneyArr)
+          // console.log('部门三数组', this.cdepNameArr, this.iquantityArr, this.inatMoneyArr)
         }
 
         //2、后图
         this.$nextTick(() => {
           this.initEcharts()
-          console.log('部门图渲染')
         })
       })
     },
 
     initEcharts() {
-      const myChart = echarts.init(document.getElementById('depChart')) //dark ,深色主题
-      // 配置
+      const myChart = echarts.init(document.getElementById('departmentChart')) //dark
+
       const option = {
         title: {
           bpttom: '20',
@@ -103,29 +103,28 @@ export default {
           axisPointer: {
             type: 'shadow'
           },
-          // data: ['业务一部', '业务二部', '业务三部', '业务四部', '业务五部', '业务六部', '业务七部']
-          data: this.departmentArr
+          data: this.cdepNameArr
         },
         yAxis: [
           {
             type: 'value',
-            name: '实际数量',
-            min: 0,
-            max: 10000000,
-            interval: 1000000,
-            axisLabel: {
-              // formatter: '{value} ml'
-            }
+            name: '实际数量'
+            // min: 1000000,
+            // max: 120000000
+            // interval: 10000000,
+            // axisLabel: {
+            //   formatter: '{value} ml'
+            // }
           },
           {
             type: 'value',
-            name: '本币金额',
-            min: 0,
-            max: 10000000,
-            interval: 5000000,
-            axisLabel: {
-              // formatter: '{value} °C'
-            }
+            name: '本币金额'
+            // min: 0,
+            // max: 10000000,
+            // interval: 50000
+            // axisLabel: {
+            //   formatter: '{value} °C'
+            // }
           }
         ],
         series: [
@@ -148,8 +147,7 @@ export default {
               // }
             },
             barWidth: '30%',
-            // data: [5635464, 4230466, 7498980, 6546765, 9222342, 1655143, 5055143]
-            data: this.realQuantityArr
+            data: this.iquantityArr
           },
           {
             name: '本币金额',
@@ -159,8 +157,8 @@ export default {
               //   // return value + ' ml'
               // }
             },
-            // data: [7237455, 5158676, 7864656, 6744645, 9543645, 4446511, 6564992]
-            data: this.localMoneyArr
+            yAxisIndex: 1,
+            data: this.inatMoneyArr
           }
         ]
       }
@@ -169,11 +167,10 @@ export default {
       window.addEventListener('resize', () => {
         if (myChart) {
           myChart.resize()
-          console.log('eee')
         }
       })
     }
-  },
+  }
 
   // watch: {
   //   // 3、监听数据变化
@@ -181,9 +178,9 @@ export default {
   //     deep: true,
   //     handler() {
   //       // 数据变化，执行
-  //       const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
-  //       this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
-  //       console.log('监听外部部门数据变化')
+  //       const { cdepNameArr, iquantityArr, inatMoneyArr } = this.newData
+  //       this.initEcharts(cdepNameArr, iquantityArr, inatMoneyArr)
+  //       console.log('监听 外部部门 数据变化')
   //     }
   //   }
   // }

src/views/reportForms/order-statistics/chart/interior/customerChart.vue

@@ -1,6 +1,6 @@
 <template>
-  <!-- 客户统计图 外部  报表 订单统计  -->
-  <div id="cusChart" :style="{ width: '100%', height: '600px' }"></div>
+  <!-- 客户统计图 内部  报表 订单统计  -->
+  <div id="customerChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
@@ -8,60 +8,58 @@ import * as echarts from 'echarts'
 import { cusChart } from '@api/reportForms/order-statistics.js'
 
 export default {
-  name: 'DepartmentChart', // 部门统计图
+  name: 'CustomerChart', // 客户统计图
   data() {
     return {
       queryParam: {
-        vendorType: '外部',
-        pageNo: '',
-        startYearMonth: '',
-        endYearMonth: '',
         department: '',
-        customer: ''
+        endYearMonth: '',
+        startYearMonth: '',
+        vendorType: ''
+
+        // cvenAbbName: ''供应商
       },
       // newData: {
-      customerArr: [],
-      realQuantityArr: [],
-      localMoneyArr: []
+      cvenAbbNameArr: [],
+      // departmentArr:[],
+      iquantityArr: [],
+      inatMoneyArr: []
       // }
     }
   },
 
   mounted() {
-    this.getChartData()
-    console.log('客户')
-    // this.initEcharts()
+    this.getCusChartData()
   },
   methods: {
     // 1、先获取 chart 数据
-    getChartData() {
-      // 
+    getCusChartData() {
       cusChart(this.queryParam).then(res => {
+        this.queryParam.vendorType = ''
         if (res.success) {
-          if (res.result) {
-            res.result.records.forEach(item => {
-              this.customertArr.push(item.customerArr)
-              this.realQuantityArr.push(item.realQuantityArr)
-              this.localMoneyArr.push(item.localMoneyArr)
-            })
-            console.log('三数组', this.customerArr, this.realQuantityArr, this.localMoneyArr)
-          }
+          // console.log('客户统计图数据', res.result)
+          res.result.forEach(item => {
+            this.cvenAbbNameArr.push(item.cvenAbbName)
+            this.iquantityArr.push(item.iquantity)
+            this.inatMoneyArr.push(item.inatMoney)
+          })
+          // console.log('三数组', this.cvenAbbNameArr, this.iquantityArr, this.inatMoneyArr)
         }
+
         //2、后图
         this.$nextTick(() => {
           this.initEcharts()
-          console.log('部门图渲染')
         })
       })
     },
 
     initEcharts() {
-      const myChart = echarts.init(document.getElementById('cusChart')) //dark ,深色主题
-      // 配置
+      const myChart = echarts.init(document.getElementById('customerChart')) //dark
+
       const option = {
         title: {
           bpttom: '20',
-          text: '客户统计表',
+          text: '供应商统计表',
           textStyle: {
             fontSize: 18,
             color: '#5470c6'
@@ -74,16 +72,16 @@ export default {
             crossStyle: {
               color: '#999'
             }
+          },
+          textStyle: {
+            fontSize: 18
           }
-          // textStyle: {
-          //   fontSize: 18
-          // }
         },
         legend: {
-          // textStyle: {
-          //   fontSize: 16,
-          //   color: '#5470c6'
-          // },
+          textStyle: {
+            fontSize: 16,
+            color: '#5470c6'
+          },
           data: [
             '实际数量',
             '本币金额'
@@ -111,16 +109,15 @@ export default {
           axisPointer: {
             type: 'shadow'
           },
-          // data: ['FD', 'PMK', 'AUCHAN', 'BIOWORLD', 'CB', 'DUNNES', 'EVA-L']
-          data: this.customerArr
+          data: this.cvenAbbNameArr
         },
         yAxis: [
           {
             type: 'value',
             name: '实际数量',
-            min: 0,
-            max: 100000,
-            interval: 10000,
+            // min: 0,
+            // max: 100000,
+            // interval: 10000,
             axisLabel: {
               // formatter: '{value} ml'
             }
@@ -128,9 +125,9 @@ export default {
           {
             type: 'value',
             name: '本币金额',
-            min: 0,
-            max: 1200000,
-            interval: 200000,
+            // min: 0,
+            // max: 1200000,
+            // interval: 200000,
             axisLabel: {
               // formatter: '{value} °C'
             }
@@ -156,8 +153,7 @@ export default {
             //   }
             // },
             barWidth: '30%',
-            // data: [90000, 40000, 87666, 65555, 26347, 87687, 26546]
-            data: this.dyeLossRateArr
+            data: this.iquantityArr
           },
           {
             name: '本币金额',
@@ -167,8 +163,8 @@ export default {
               //   // return value + ' ml'
               // }
             },
-            // data: [22443, 68176, 71276, 50176, 70176, 68976, 38276]
-            data: this.localMoneyArr
+            yAxisIndex: 1,
+            data: this.inatMoneyArr
           }
         ]
       }
@@ -179,20 +175,20 @@ export default {
           myChart.resize()
         }
       })
-    },
+    }
 
     // watch: {
     //   // 3、监听数据变化
-    //   // newData: {
-    //   deep: true,
-    //   handler() {
-    //     //  数据变化，执行
-    //     const { cvenNameArr, dyeLossRateArr } = this.newData
-    //     this.initEcharts(cvenNameArr, dyeLossRateArr)
-    //     console.log('监听外部客户数据变化')
+    //   newData: {
+    //     deep: true,
+    //     handler() {
+    //       //  数据变化，执行
+    //       const { cvenAbbNameArr, iquantityArr, inatMoneyArr } = this.newData
+    //       this.initEcharts(cvenAbbNameArr, iquantityArr, inatMoneyArr)
+    //       console.log('监听 外部客户 数据变化')
+    //     }
     //   }
     // }
-    // }
   }
 }
 </script>

src/views/reportForms/order-statistics/chart/interior/departmentChart.vue

@@ -1,6 +1,6 @@
 <template>
-  <!--  部门统计图  外部 报表 订单统计   -->
-  <div id="depChart" :style="{ width: '100%', height: '600px' }"></div>
+  <!--  部门统计图  内部 报表 订单统计   -->
+  <div id="departmentChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
@@ -9,55 +9,53 @@ import * as echarts from 'echarts'
 import { depChart } from '@api/reportForms/order-statistics.js'
 
 export default {
-  name: 'CustomerChart', // 部门统计图
+  name: 'DepartmentChart', // 部门统计图
   data() {
     return {
       queryParam: {
-        vendorType: '外部',
-        pageNo: '',
-        startYearMonth: '',
+        customer: '', //客户
         endYearMonth: '',
-        department: '',
-        customer: ''
+        startYearMonth: '',
+        vendorType: ''
+        // cdepName: ''部门
       },
+
       // newData: {
-      departmentArr: [], //部门 数组
-      realQuantityArr: [], //实际数量
-      localMoneyArr: [] //本币金额
+      cdepNameArr: [], //部门 数组
+      iquantityArr: [], //实际数量
+      inatMoneyArr: [] //本币金额
+      // }
     }
   },
-  // },
 
   mounted() {
     this.getDepChartData()
-    console.log('部门')
-    // this.initEcharts()
   },
   methods: {
     // 1、先获取 chart 数据
     getDepChartData() {
-      // this.queryParam
-      depChart().then(res => {
+      depChart(this.queryParam).then(res => {
+        this.queryParam.vendorType=''
         if (res.result) {
-          res.result.records.forEach(item => {
-            this.departmentArr.push(item.departmentArr)
-            this.realQuantityArr.push(item.realQuantityArr)
-            this.localMoneyArr.push(item.localMoneyArr)
+          // console.log('部门统计图数据', res.result)
+          res.result.forEach(item => {
+            this.cdepNameArr.push(item.cdepName)
+            this.iquantityArr.push(item.iquantity)
+            this.inatMoneyArr.push(item.inatMoney)
           })
-          console.log('三数组', this.departmentArr, this.realQuantityArr, this.localMoneyArr)
+          // console.log('部门三数组', this.cdepNameArr, this.iquantityArr, this.inatMoneyArr)
         }
 
         //2、后图
         this.$nextTick(() => {
           this.initEcharts()
-          console.log('部门图渲染')
         })
       })
     },
 
     initEcharts() {
-      const myChart = echarts.init(document.getElementById('depChart')) //dark ,深色主题
-      // 配置
+      const myChart = echarts.init(document.getElementById('departmentChart')) //dark
+
       const option = {
         title: {
           bpttom: '20',
@@ -105,29 +103,28 @@ export default {
           axisPointer: {
             type: 'shadow'
           },
-          // data: ['业务一部', '业务二部', '业务三部', '业务四部', '业务五部', '业务六部', '业务七部']
-          data: this.departmentArr
+          data: this.cdepNameArr
         },
         yAxis: [
           {
             type: 'value',
-            name: '实际数量',
-            min: 0,
-            max: 10000000,
-            interval: 1000000,
-            axisLabel: {
-              // formatter: '{value} ml'
-            }
+            name: '实际数量'
+            // min: 1000000,
+            // max: 120000000
+            // interval: 10000000,
+            // axisLabel: {
+            //   formatter: '{value} ml'
+            // }
           },
           {
             type: 'value',
-            name: '本币金额',
-            min: 0,
-            max: 10000000,
-            interval: 5000000,
-            axisLabel: {
-              // formatter: '{value} °C'
-            }
+            name: '本币金额'
+            // min: 0,
+            // max: 10000000,
+            // interval: 50000
+            // axisLabel: {
+            //   formatter: '{value} °C'
+            // }
           }
         ],
         series: [
@@ -150,8 +147,7 @@ export default {
               // }
             },
             barWidth: '30%',
-            // data: [5635464, 4230466, 7498980, 6546765, 9222342, 1655143, 5055143]
-            data: this.realQuantityArr
+            data: this.iquantityArr
           },
           {
             name: '本币金额',
@@ -161,8 +157,8 @@ export default {
               //   // return value + ' ml'
               // }
             },
-            // data: [7237455, 5158676, 7864656, 6744645, 9543645, 4446511, 6564992]
-            data: this.localMoneyArr
+            yAxisIndex: 1,
+            data: this.inatMoneyArr
           }
         ]
       }
@@ -171,11 +167,10 @@ export default {
       window.addEventListener('resize', () => {
         if (myChart) {
           myChart.resize()
-          console.log('eee')
         }
       })
     }
-  },
+  }
 
   // watch: {
   //   // 3、监听数据变化
@@ -183,9 +178,9 @@ export default {
   //     deep: true,
   //     handler() {
   //       // 数据变化，执行
-  //       const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
-  //       this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
-  //       console.log('监听外部部门数据变化')
+  //       const { cdepNameArr, iquantityArr, inatMoneyArr } = this.newData
+  //       this.initEcharts(cdepNameArr, iquantityArr, inatMoneyArr)
+  //       console.log('监听 外部部门 数据变化')
   //     }
   //   }
   // }

src/views/reportForms/order-statistics/external-statistics.vue

@@ -35,12 +35,6 @@
             <a-col :md="6" :sm="8">
               <a-form-item label="客户">
                 <a-input placeholder="请输入客户" v-model="queryParam.customer"></a-input>
-
-                <!-- <a-select placeholder="请选择客户" v-model="queryParam.customer">
-                  <a-select-option :value="''">请选择</a-select-option>
-                  <a-select-option :value="0">FD</a-select-option>
-                  <a-select-option :value="1">PMK</a-select-option>
-                </a-select> -->
               </a-form-item>
             </a-col>
 
@@ -48,8 +42,15 @@
 
             <a-col :md="6" :sm="8">
               <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                <a-button type="primary" @click="searchQuery" :disabled="isDisabled" icon="search">查询</a-button>
+                <a-button
+                  type="primary"
+                  @click="searchReset"
+                  :disabled="isDisabled"
+                  icon="reload"
+                  style="margin-left: 8px"
+                  >重置</a-button
+                >
                 <a @click="handleToggleSearch" style="margin-left: 8px">
                   {{ toggleSearchStatus ? '收起' : '展开' }}
                   <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
@@ -64,18 +65,18 @@
     <!-- 引入 echarts -->
     <a-card :bordered="false" style="marginTop:10px;">
       <div class="chart">
-        <!-- 部门 "-->
-        <div class="departmentChart" style="background:rgba(255, 165, 0,.09);">
-          <departmentChart />
+        <!-- 部门 -->
+        <div class="depChartStyle" style="background:rgba(255, 165, 0,.09);">
+          <departmentChart ref="departmentChart" />
         </div>
         <!-- 客户 -->
-        <div class="customerChart" style="background:rgba(134, 151, 201,.08);">
-          <customerChart />
+        <div class="cusChartStyle" style="background:rgba(134, 151, 201,.08);">
+          <customerChart ref="customerChart" />
         </div>
       </div>
     </a-card>
 
-    <!-- table :scroll="{ x: 1500 }"        v-if="data"-->
+    <!-- table -->
     <a-card :bordered="false" style="marginTop:10px;">
       <a-table
         v-if="extStadata"
@@ -175,8 +176,8 @@ export default {
 
       // 查询条件
       queryParam: {
-        vendorType: '外部',
-        pageNo: ''
+        vendorType: '外部'
+        // pageNo: '',
         // startYearMonth: '',
         // endYearMonth: '',
         // department: '',
@@ -189,7 +190,8 @@ export default {
         // pageSize: '' //一页多少
       },
       mode2: ['month', 'month'],
-      value: [] //起始月份
+      value: [], //起始月份
+      isDisabled: false //按钮禁止
       // dateFormat: 'YYYY-MM-DD'
     }
   },
@@ -199,24 +201,26 @@ export default {
     this.cancelLoading()
   },
   created() {
-    this.getExternalData() // 查询订单统计
+    this.getExternalData()
   },
 
   methods: {
     cancelLoading() {
+      let that = this
       setTimeout(() => {
-        this.loading = false
+        that.loading = false
       }, 500)
     },
 
     // 查询订单统计
     getExternalData() {
       this.$nextTick(() => {
+        this.queryParam.vendorType = '外部'
         externalList(this.queryParam).then(res => {
           if (res.success) {
-            console.log('99')
             this.extStadata = res.result.records
             console.log('订单外部列表', this.extStadata)
+
             this.pagination = {
               total: res.result.total,
               current: res.result.current,
@@ -229,12 +233,65 @@ export default {
 
     searchQuery() {
       this.queryParam.pageNo = ''
-      // if (this.queryParam) {
-      //   console.log('指定查询条件,渲染chart', this.queryParam)
-      //   this.$refs.departmentChart.queryParam = this.queryParam
-      //   this.$refs.departmentChart.getDepChartData()
-      // }
+      if (this.queryParam) {
+        // 清空部门chart数据
+        this.$refs.departmentChart.cdepNameArr = []
+        this.$refs.departmentChart.iquantityArr = []
+        this.$refs.departmentChart.inatMoneyArr = []
+        // 清空客户chart数据
+        this.$refs.customerChart.cvenAbbNameArr = []
+        this.$refs.customerChart.iquantityArr = []
+        this.$refs.customerChart.inatMoneyArr = []
+
+        this.getExternalData()
+
+        //查询条件 传给 部门chart + 渲染
+        this.$refs.departmentChart.prop = this.queryParam
+        console.log('prop', this.$refs.departmentChart.prop)
+        // this.$refs.departmentChart.prop.vendorType = ''
+        this.$refs.departmentChart.getDepChartData()
+
+        //查询条件 传给 客户chart + 渲染
+        this.$refs.customerChart.queryParam = this.queryParam
+        // this.$refs.customerChart.queryParam.vendorType = ''
+        this.$refs.customerChart.getCusChartData()
+      }
+
+      this.isDisabled = true
+      setTimeout(() => {
+        let that = this
+        that.isDisabled = false
+      }, 3000)
+    },
+
+    searchReset() {
+      this.queryParam = {}
+      this.value = [] //起始年月重置
+      this.queryParam.startYearMonth = []
+      this.queryParam.endYearMonth = []
+
+      // 清空部门chart数据 + 查询条件 + 重新渲染
+      this.$refs.departmentChart.cdepNameArr = []
+      this.$refs.departmentChart.iquantityArr = []
+      this.$refs.departmentChart.inatMoneyArr = []
+      this.$refs.departmentChart.queryParam = {}
+      this.$refs.departmentChart.getDepChartData()
+
+      // 清空客户chart数据 + 查询条件 + 重新渲染
+      this.$refs.customerChart.cvenAbbNameArr = []
+      this.$refs.customerChart.iquantityArr = []
+      this.$refs.customerChart.inatMoneyArr = []
+      this.$refs.customerChart.queryParam = {}
+      this.$refs.customerChart.getCusChartData()
+
+      // 重新渲染列表数据
       this.getExternalData()
+
+      this.isDisabled = true
+      setTimeout(() => {
+        let that = this
+        that.isDisabled = false
+      }, 3000)
     },
     // 日期面板变化时的回调
     handlePanelChange(value, mode) {
@@ -242,24 +299,16 @@ export default {
       this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
       this.queryParam.startYearMonth = value[0].format('YYYY-MM')
       this.queryParam.endYearMonth = value[1].format('YYYY-MM')
-      console.log('开始年月:', this.queryParam.startYearMonth)
-      console.log('结束年月:', this.queryParam.endYearMonth)
+      // console.log('开始年月:', this.queryParam.startYearMonth)
+      // console.log('结束年月:', this.queryParam.endYearMonth)
     },
 
     // 时间发生变化的回调，发生在用户选择时间时
     monthChange(value) {
       this.value = value
-      // console.log('what------monthChange')
-    },
-
-    searchReset() {
-      this.queryParam = {}
-      this.value = [] //起始年月重置
-      this.getExternalData()
     },
 
     handleTableChange(pagination, filters, sorter) {
-      console.log('当前页信息>>>>', pagination)
       this.queryParam.pageNo = pagination.current
       this.getExternalData()
     }
@@ -284,14 +333,14 @@ export default {
 //   background-color: #ccc;
 // }
 
-.departmentChart,
-.customerChart {
+.depChartStyle,
+.cusChartStyle {
   // width: 100%;
   height: 600px;
   text-align: center;
   padding-top: 10px;
 }
-.departmentChart {
+.depChartStyle {
   margin-bottom: 20px;
 }
 </style>

src/views/reportForms/order-statistics/interior-statistics.vue

@@ -35,12 +35,6 @@
             <a-col :md="6" :sm="8">
               <a-form-item label="客户">
                 <a-input placeholder="请输入客户" v-model="queryParam.customer"></a-input>
-
-                <!-- <a-select placeholder="请选择客户" v-model="queryParam.customer">
-                  <a-select-option :value="''">请选择</a-select-option>
-                  <a-select-option :value="0">FD</a-select-option>
-                  <a-select-option :value="1">PMK</a-select-option>
-                </a-select> -->
               </a-form-item>
             </a-col>
 
@@ -48,8 +42,15 @@
 
             <a-col :md="6" :sm="8">
               <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                <a-button type="primary" @click="searchQuery" :disabled="isDisabled" icon="search">查询</a-button>
+                <a-button
+                  type="primary"
+                  @click="searchReset"
+                  :disabled="isDisabled"
+                  icon="reload"
+                  style="margin-left: 8px"
+                  >重置</a-button
+                >
                 <a @click="handleToggleSearch" style="margin-left: 8px">
                   {{ toggleSearchStatus ? '收起' : '展开' }}
                   <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
@@ -64,25 +65,25 @@
     <!-- 引入 echarts -->
     <a-card :bordered="false" style="marginTop:10px;">
       <div class="chart">
-        <!-- 部门 "-->
-        <div class="departmentChart" style="background:rgba(255, 165, 0,.09);">
-          <departmentChart />
+        <!-- 部门 -->
+        <div class="depChartStyle" style="background:rgba(255, 165, 0,.09);">
+          <departmentChart ref="departmentChart" />
         </div>
         <!-- 客户 -->
-        <div class="customerChart" style="background:rgba(134, 151, 201,.08);">
-          <customerChart />
+        <div class="cusChartStyle" style="background:rgba(134, 151, 201,.08);">
+          <customerChart ref="customerChart" />
         </div>
       </div>
     </a-card>
 
-    <!-- table :scroll="{ x: 1500 }"        v-if="data"-->
+    <!-- table -->
     <a-card :bordered="false" style="marginTop:10px;">
       <a-table
-        v-if="intdata"
+        v-if="extStadata"
         bordered
         rowKey="index"
-        :columns="intColumns"
-        :data-source="intdata"
+        :columns="extStaColumns"
+        :data-source="extStadata"
         :loading="loading"
         :pagination="pagination"
         @change="handleTableChange"
@@ -110,7 +111,8 @@ export default {
   data() {
     // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
     return {
-      intColumns: [
+      description: '订单外部统计表',
+      extStaColumns: [
         {
           title: '序号',
           width: 90,
@@ -169,17 +171,17 @@ export default {
         },
         { title: '本币金额', width: 150, dataIndex: 'inatMoney', className: 'replacecolor' }
       ],
-      intdata: [],
+      extStadata: [],
       loading: false, // 表格加载
 
       // 查询条件
       queryParam: {
         vendorType: '内部',
-        pageNo: ''
-        // startYearMonth: '',
-        // endYearMonth: '',
-        // department: '',
-        // customer: ''
+        pageNo: '',
+        startYearMonth: '',
+        endYearMonth: '',
+        department: '',
+        customer: ''
       },
 
       pagination: {
@@ -188,34 +190,37 @@ export default {
         // pageSize: '' //一页多少
       },
       mode2: ['month', 'month'],
-      value: [] //起始月份
+      value: [], //起始月份
+      isDisabled: false //按钮禁止
       // dateFormat: 'YYYY-MM-DD'
     }
   },
 
   // html渲染出来后，操作dom
   mounted() {
-    this.cancelLoading()
+    // this.cancelLoading()
   },
   created() {
-    this.getIntData() // 查询订单统计
+    this.getExternalData()
   },
 
   methods: {
-    cancelLoading() {
-      setTimeout(() => {
-        this.loading = false
-      }, 500)
-    },
+    // cancelLoading() {
+    //   setTimeout(() => {
+    // let that = this
+    //     that.loading = false
+    //   }, 500)
+    // },
 
-    // 查询订单内部统计
-    getIntData() {
+    // 查询订单统计
+    getExternalData() {
       this.$nextTick(() => {
+        this.queryParam.vendorType = '内部'
         externalList(this.queryParam).then(res => {
           if (res.success) {
-            console.log('99')
-            this.intData = res.result.records
-            console.log('订单外部列表', this.intData)
+            this.extStadata = res.result.records
+            console.log('订单内部列表', this.extStadata)
+
             this.pagination = {
               total: res.result.total,
               current: res.result.current,
@@ -229,11 +234,65 @@ export default {
     searchQuery() {
       this.queryParam.pageNo = ''
       if (this.queryParam) {
-        console.log('指定查询条件,渲染chart', this.queryParam)
+        // 清空部门chart数据
+        this.$refs.departmentChart.cdepNameArr = []
+        this.$refs.departmentChart.iquantityArr = []
+        this.$refs.departmentChart.inatMoneyArr = []
+        // 清空客户chart数据
+        this.$refs.customerChart.cvenAbbNameArr = []
+        this.$refs.customerChart.iquantityArr = []
+        this.$refs.customerChart.inatMoneyArr = []
+        this.getExternalData()
+
+        //查询条件 传给 部门chart + 渲染
         this.$refs.departmentChart.queryParam = this.queryParam
+        // this.$refs.departmentChart.queryParam.vendorType = ''
         this.$refs.departmentChart.getDepChartData()
+
+        console.log('部门chart是否外部', this.$refs.departmentChart.queryParam.vendorType)
+
+        //查询条件 传给 客户chart + 渲染
+        this.$refs.customerChart.queryParam = this.queryParam
+        // this.$refs.customerChart.queryParam.vendorType = ''
+        this.$refs.customerChart.getCusChartData()
       }
-      this.getIntData()
+
+      this.isDisabled = true
+      setTimeout(() => {
+        let that = this
+        that.isDisabled = false
+      }, 3000)
+    },
+
+    searchReset() {
+      this.queryParam = {}
+      this.value = [] //起始年月重置
+      this.queryParam.startYearMonth = []
+      this.queryParam.endYearMonth = []
+
+      // 清空部门chart数据 + 查询条件 + 重新渲染
+      this.$refs.departmentChart.cdepNameArr = []
+      this.$refs.departmentChart.iquantityArr = []
+      this.$refs.departmentChart.inatMoneyArr = []
+      this.$refs.departmentChart.queryParam = {}
+      this.$refs.departmentChart.getDepChartData()
+
+      // 清空客户chart数据 + 查询条件 + 重新渲染
+      this.$refs.customerChart.cvenAbbNameArr = []
+      this.$refs.customerChart.iquantityArr = []
+      this.$refs.customerChart.inatMoneyArr = []
+      this.$refs.customerChart.queryParam = {}
+      this.$refs.customerChart.getCusChartData()
+
+      // 重新渲染列表数据
+      this.getExternalData()
+
+      // 按钮置灰
+      this.isDisabled = true
+      setTimeout(() => {
+        let that = this
+        that.isDisabled = false
+      }, 3000)
     },
     // 日期面板变化时的回调
     handlePanelChange(value, mode) {
@@ -241,26 +300,18 @@ export default {
       this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
       this.queryParam.startYearMonth = value[0].format('YYYY-MM')
       this.queryParam.endYearMonth = value[1].format('YYYY-MM')
-      console.log('开始年月:', this.queryParam.startYearMonth)
-      console.log('结束年月:', this.queryParam.endYearMonth)
+      // console.log('开始年月:', this.queryParam.startYearMonth)
+      // console.log('结束年月:', this.queryParam.endYearMonth)
     },
 
     // 时间发生变化的回调，发生在用户选择时间时
     monthChange(value) {
       this.value = value
-      // console.log('what------monthChange')
-    },
-
-    searchReset() {
-      this.queryParam = {}
-      this.value = [] //起始年月重置
-      this.getIntData()
     },
 
     handleTableChange(pagination, filters, sorter) {
-      console.log('当前页信息>>>>', pagination)
       this.queryParam.pageNo = pagination.current
-      this.getIntData()
+      this.getExternalData()
     }
   },
   computed: {},
@@ -283,14 +334,14 @@ export default {
 //   background-color: #ccc;
 // }
 
-.departmentChart,
-.customerChart {
+.depChartStyle,
+.cusChartStyle {
   // width: 100%;
   height: 600px;
   text-align: center;
   padding-top: 10px;
 }
-.departmentChart {
+.depChartStyle {
   margin-bottom: 20px;
 }
 </style>