内外部 报表 单证完善

src/api/reportForms/order-statistics.js

@@ -10,4 +10,4 @@ const depChart = params => getAction('/report/soSoDetails/QuerySO_SOMainReportBy
 // 外部 客户 统计图
 const cusChart = params => getAction('/report/soSoDetails/QuerySO_SOMainReportBydepartment', params)
 
-export { externalList, depChart }
+export { externalList, depChart, cusChart }

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

@@ -35,7 +35,7 @@ export default {
   methods: {
     // 1、先获取 chart 数据
     getChartData() {
-      cusChart().then(res => {
+      cusChart(this.queryParam).then(res => {
         if (res.success) {
           if (res.result) {
             res.result.records.forEach(item => {
@@ -43,12 +43,13 @@ export default {
               this.realQuantityArr.push(item.realQuantityArr)
               this.localMoneyArr.push(item.localMoneyArr)
             })
-            console.log('返回的数组', this.customerArr, this.realQuantityArr, this.localMoneyArr)
+            console.log('三数组', this.customerArr, this.realQuantityArr, this.localMoneyArr)
           }
         }
-        //2、执行chart
+        //2、后图
         this.$nextTick(() => {
           this.initEcharts()
+          console.log('部门图渲染')
         })
       })
     },
@@ -177,17 +178,17 @@ export default {
           myChart.resize()
         }
       })
-    }
+    },
 
     // watch: {
-    // 3、监听数据变化
-    // newData: {
+    //   // 3、监听数据变化
+    //   // newData: {
     //   deep: true,
     //   handler() {
-    //      数据变化，执行
-    //      const { cvenNameArr, dyeLossRateArr } = this.newData
-    //      this.initEcharts(cvenNameArr, dyeLossRateArr)
-    //      console.log('333')
+    //     //  数据变化，执行
+    //     const { cvenNameArr, dyeLossRateArr } = this.newData
+    //     this.initEcharts(cvenNameArr, dyeLossRateArr)
+    //     console.log('监听外部客户数据变化')
     //   }
     // }
     // }

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

@@ -30,7 +30,7 @@ export default {
 
   mounted() {
     this.getDepChartData()
-    console.log('部门');
+    console.log('部门')
     // this.initEcharts()
   },
   methods: {
@@ -49,6 +49,7 @@ export default {
         //2、后图
         this.$nextTick(() => {
           this.initEcharts()
+          console.log('部门图渲染')
         })
       })
     },
@@ -175,18 +176,18 @@ export default {
     }
   },
 
-  watch: {
-    // 3、监听数据变化
-    newData: {
-      deep: true,
-      handler() {
-        // 数据变化，执行
-        const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
-        this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
-        // console.log('333')
-      }
-    }
-  }
+  // watch: {
+  //   // 3、监听数据变化
+  //   newData: {
+  //     deep: true,
+  //     handler() {
+  //       // 数据变化，执行
+  //       const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
+  //       this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
+  //       console.log('监听外部部门数据变化')
+  //     }
+  //   }
+  // }
 }
 </script>
 

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

@@ -1,48 +1,57 @@
 <template>
-  <!-- 客户统计图 内部   报表 订单统计 -->
+  <!-- 客户统计图 外部  报表 订单统计  -->
   <div id="cusChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
-
-// import { cusChart } from '@api/reportForms/order-statistics.js'
+import { cusChart } from '@api/reportForms/order-statistics.js'
 
 export default {
   name: 'DepartmentChart', // 部门统计图
   data() {
     return {
+      queryParam: {
+        vendorType: '外部',
+        pageNo: '',
+        startYearMonth: '',
+        endYearMonth: '',
+        department: '',
+        customer: ''
+      },
       // newData: {
-      // departmentArr: [],
-      //realQuantityArr: []
-      // localMoneyArr: []
+      customerArr: [],
+      realQuantityArr: [],
+      localMoneyArr: []
       // }
     }
   },
 
   mounted() {
-    // this.getChartData()
-    this.initEcharts()
+    this.getChartData()
+    console.log('客户')
+    // this.initEcharts()
   },
   methods: {
     // 1、先获取 chart 数据
     getChartData() {
-      // depChart().then(res => {
-      //   if (res.success) {
-      //     if (res.result) {
-      //       res.result.forEach(item => {
-      //         this.departmentArr.push(item.departmentArr)
-      //         this.realQuantityArr.push(item.realQuantityArr)
-      //         this.localMoneyArr.push(item.localMoneyArr)
-      //       })
-      //       console.log('返回的数组', this.departmentArr, this.realQuantityArr, this.localMoneyArr)
-      //     }
-      //   }
-      //   //2、执行chart
-      //   this.$nextTick(() => {
-      //     this.initEcharts()
-      //   })
-      // })
+      cusChart(this.queryParam).then(res => {
+        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)
+          }
+        }
+        //2、后图
+        this.$nextTick(() => {
+          this.initEcharts()
+          console.log('部门图渲染')
+        })
+      })
     },
 
     initEcharts() {
@@ -85,8 +94,8 @@ export default {
         },
         grid: {
           show: true, //是否显示直角坐标系网格。[ default: false ]
-          left: '5%', // 组件离容器左侧的距离。
-          right: '5%',
+          left: '6%', // 组件离容器左侧的距离。
+          right: '6%',
           borderColor: 'none', //网格的边框颜色
           bottom: '20%' //
         },
@@ -101,8 +110,8 @@ export default {
           axisPointer: {
             type: 'shadow'
           },
-          data: ['FD', 'PMK', 'AUCHAN', 'BIOWORLD', 'CB', 'DUNNES', 'EVA-L']
-          // data: this.departmentArr
+          // data: ['FD', 'PMK', 'AUCHAN', 'BIOWORLD', 'CB', 'DUNNES', 'EVA-L']
+          data: this.customerArr
         },
         yAxis: [
           {
@@ -146,8 +155,8 @@ export default {
             //   }
             // },
             barWidth: '30%',
-            data: [90000, 40000, 87666, 65555, 26347, 87687, 26546]
-            // data: this.dyeLossRateArr
+            // data: [90000, 40000, 87666, 65555, 26347, 87687, 26546]
+            data: this.dyeLossRateArr
           },
           {
             name: '本币金额',
@@ -157,7 +166,8 @@ export default {
               //   // return value + ' ml'
               // }
             },
-            data: [22443, 68176, 71276, 50176, 70176, 68976, 38276]
+            // data: [22443, 68176, 71276, 50176, 70176, 68976, 38276]
+            data: this.localMoneyArr
           }
         ]
       }
@@ -168,20 +178,20 @@ export default {
           myChart.resize()
         }
       })
-    }
-  },
+    },
 
-  watch: {
-    // 3、监听数据变化
-    newData: {
-      deep: true,
-      handler() {
-        // 数据变化，执行
-        const { cvenNameArr, dyeLossRateArr } = this.newData
-        this.initEcharts(cvenNameArr, dyeLossRateArr)
-        console.log('333')
-      }
-    }
+    // watch: {
+    //   // 3、监听数据变化
+    //   // newData: {
+    //   deep: true,
+    //   handler() {
+    //     //  数据变化，执行
+    //     const { cvenNameArr, dyeLossRateArr } = this.newData
+    //     this.initEcharts(cvenNameArr, dyeLossRateArr)
+    //     console.log('监听外部客户数据变化')
+    //   }
+    // }
+    // }
   }
 }
 </script>
@@ -209,10 +219,4 @@ export default {
   border: none;
   padding: 0;
 }
-#myChart {
-  h6 {
-    font-size: 16px;
-    font-weight: 700;
-  }
-}
 </style>

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

@@ -1,48 +1,57 @@
 <template>
-  <!--  部门统计图  内部   报表 订单统计  -->
+  <!--  部门统计图  外部 报表 订单统计   -->
   <div id="depChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
 
-// import { depChart } from '@api/reportForms/order-statistics.js'
+import { depChart } from '@api/reportForms/order-statistics.js'
 
 export default {
-  name: 'DepChart', // 客户统计图
+  name: 'CustomerChart', // 部门统计图
   data() {
     return {
+      queryParam: {
+        vendorType: '外部',
+        pageNo: '',
+        startYearMonth: '',
+        endYearMonth: '',
+        department: '',
+        customer: ''
+      },
       // newData: {
-      // departmentArr: [],
-      //realQuantityArr: []
-      // localMoneyArr: []
-      // }
+      departmentArr: [], //部门 数组
+      realQuantityArr: [], //实际数量
+      localMoneyArr: [] //本币金额
     }
   },
+  // },
 
   mounted() {
-    // this.getDepChartData()
-    this.initEcharts()
+    this.getDepChartData()
+    console.log('部门')
+    // this.initEcharts()
   },
   methods: {
     // 1、先获取 chart 数据
     getDepChartData() {
-      // depChart().then(res => {
-      //   if (res.success) {
-      //     if (res.result) {
-      //       res.result.forEach(item => {
-      //         this.departmentArr.push(item.departmentArr)
-      //         this.realQuantityArr.push(item.realQuantityArr)
-      //         this.localMoneyArr.push(item.localMoneyArr)
-      //       })
-      //       console.log('返回的数组', this.departmentArr, this.realQuantityArr, this.localMoneyArr)
-      //     }
-      //   }
-      //   //2、执行chart
-      //   this.$nextTick(() => {
-      //     this.initEcharts()
-      //   })
-      // })
+      depChart(this.queryParam).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('三数组', this.departmentArr, this.realQuantityArr, this.localMoneyArr)
+        }
+
+        //2、后图
+        this.$nextTick(() => {
+          this.initEcharts()
+          console.log('部门图渲染')
+        })
+      })
     },
 
     initEcharts() {
@@ -71,18 +80,18 @@ export default {
         },
 
         legend: {
-          // textStyle: {
-          //   fontSize: 16,
-          //   color: '#5470c6'
-          // },
+          textStyle: {
+            fontSize: 16,
+            color: '#5470c6'
+          },
           data: ['实际数量', '本币金额']
         },
         grid: {
           show: true, //是否显示直角坐标系网格。[ default: false ]
-          left: '5%', // 组件离容器左侧的距离。
-          right: '5%',
+          left: '6%', // 组件离容器左侧的距离。
+          right: '6%',
           borderColor: 'none', //网格的边框颜色
-          bottom: '20%' //
+          bottom: '20%'
         },
 
         xAxis: {
@@ -95,8 +104,8 @@ export default {
           axisPointer: {
             type: 'shadow'
           },
-          data: ['业务一部', '业务二部', '业务三部', '业务四部', '业务五部', '业务六部', '业务七部']
-          // data: this.departmentArr
+          // data: ['业务一部', '业务二部', '业务三部', '业务四部', '业务五部', '业务六部', '业务七部']
+          data: this.departmentArr
         },
         yAxis: [
           {
@@ -140,8 +149,8 @@ export default {
               // }
             },
             barWidth: '30%',
-            data: [5635464, 4230466, 7498980, 6546765, 9222342, 1655143, 5055143]
-            // data: this.dyeLossRateArr
+            // data: [5635464, 4230466, 7498980, 6546765, 9222342, 1655143, 5055143]
+            data: this.realQuantityArr
           },
           {
             name: '本币金额',
@@ -151,7 +160,8 @@ export default {
               //   // return value + ' ml'
               // }
             },
-            data: [7237455, 5158676, 7864656, 6744645, 9543645, 4446511, 6564992]
+            // data: [7237455, 5158676, 7864656, 6744645, 9543645, 4446511, 6564992]
+            data: this.localMoneyArr
           }
         ]
       }
@@ -160,23 +170,24 @@ export default {
       window.addEventListener('resize', () => {
         if (myChart) {
           myChart.resize()
+          console.log('eee')
         }
       })
     }
   },
 
-  watch: {
-    // 3、监听数据变化
-    newData: {
-      deep: true,
-      handler() {
-        // 数据变化，执行
-        const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
-        this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
-        // console.log('333')
-      }
-    }
-  }
+  // watch: {
+  //   // 3、监听数据变化
+  //   newData: {
+  //     deep: true,
+  //     handler() {
+  //       // 数据变化，执行
+  //       const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
+  //       this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
+  //       console.log('监听外部部门数据变化')
+  //     }
+  //   }
+  // }
 }
 </script>
 
@@ -196,17 +207,8 @@ export default {
 //   background-color: #ccc;
 // }
 
-/deep/ .ant-table-footer .ant-table.body {
-  // overflow: hidden !important;
-}
 /deep/ .ant-table.ant-table-bordered .ant-table-footer {
   border: none;
   padding: 0;
 }
-#myChart {
-  h6 {
-    font-size: 16px;
-    font-weight: 700;
-  }
-}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <!-- 订单内部统计表-->
-  <div id="interiorStatistics">
+  <div id="externalStatistics">
     <!-- 查询区域 -->
     <a-card :bordered="false">
       <div class="table-page-search-wrapper">
@@ -10,20 +10,21 @@
               <a-form-item label="起始年月">
                 <a-range-picker
                   style="width: 100%"
-                  placeholder="['开始年月', '结束年月']"
+                  :placeholder="['开始年月', '结束年月']"
                   format="YYYY-MM"
                   :mode="mode2"
                   :value="value"
                   @panelChange="handlePanelChange"
                   @change="monthChange"
+                  required
                 />
               </a-form-item>
             </a-col>
 
             <a-col :md="6" :sm="8">
               <a-form-item label="部门">
-                <a-input placeholder="请输入部门" v-model="queryParam.department"></a-input>
-                <!-- <a-select placeholder="请选择部门" v-model="queryParam.department">
+                <a-input placeholder="请输入部门" v-model="queryParam.department" required></a-input>
+                <!-- <a-select placeholder="请选择部门" v-model="queryParam.">
                   <a-select-option :value="''">请选择</a-select-option>
                   <a-select-option :value="0">业务一部</a-select-option>
                   <a-select-option :value="1">业务二部</a-select-option>
@@ -34,11 +35,12 @@
             <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-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>
 
@@ -63,7 +65,7 @@
     <a-card :bordered="false" style="marginTop:10px;">
       <div class="chart">
         <!-- 部门 "-->
-        <div class="departmentChart" style="background:rgba(255, 165, 0,.08);">
+        <div class="departmentChart" style="background:rgba(255, 165, 0,.09);">
           <departmentChart />
         </div>
         <!-- 客户 -->
@@ -73,13 +75,14 @@
       </div>
     </a-card>
 
-    <!-- table  rowKey="id" :scroll="{ x: 1500 }"-->
+    <!-- table :scroll="{ x: 1500 }"        v-if="data"-->
     <a-card :bordered="false" style="marginTop:10px;">
       <a-table
+        v-if="intdata"
         bordered
-        :row-key="record => record.id"
-        :columns="interiorColumns"
-        :data-source="interiorData"
+        rowKey="index"
+        :columns="intColumns"
+        :data-source="intdata"
         :loading="loading"
         :pagination="pagination"
         @change="handleTableChange"
@@ -94,20 +97,28 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
 
-import departmentChart from '@views/reportForms/order-statistics/chart/interior/departmentChart'
-import customerChart from '@views/reportForms/order-statistics/chart/interior/customerChart.vue'
+import departmentChart from '@views/reportForms/order-statistics/chart/external/departmentChart'
+import customerChart from '@views/reportForms/order-statistics/chart/external/customerChart.vue'
 
-// import { external } from '@api/reportForms/order-statistics.js'
+import { externalList } from '@api/reportForms/order-statistics.js'
 
 export default {
-  name: 'InteriorStatistics', // 订单内部统计表
+  name: 'ExternalStatistics', // 订单外部统计表
   mixins: [JeecgListMixin],
   components: { JEllipsis, moment, departmentChart, customerChart },
 
   data() {
     // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
     return {
-      interiorColumns: [
+      intColumns: [
+        {
+          title: '序号',
+          width: 90,
+          dataIndex: 'index',
+          key: 'index',
+          customRender: (text, record, index) => `${index + 1}`,
+          className: 'replacecolor'
+        },
         {
           title: '部门',
           width: 140,
@@ -158,89 +169,98 @@ export default {
         },
         { title: '本币金额', width: 150, dataIndex: 'inatMoney', className: 'replacecolor' }
       ],
-      interiorData: [
-        {
-          department: '业务八部',
-          supplierType: '成衣厂',
-          supplier: '国云森',
-          planDeliveryMonth: '2021-04',
-          priceInTax: '87.89',
-          realQuantity: '90,120,0000',
-          LocalMoney: '301,929,04'
-        }
-      ],
+      intdata: [],
       loading: false, // 表格加载
 
       // 查询条件
       queryParam: {
         vendorType: '内部',
-        startYearMonth: '',
-        endYearMonth: '',
-        department: '',
-        customer: ''
+        pageNo: ''
+        // startYearMonth: '',
+        // endYearMonth: '',
+        // department: '',
+        // customer: ''
       },
+
       pagination: {
         // total: '', //总条数
         // current: '', //当前页
         // pageSize: '' //一页多少
       },
       mode2: ['month', 'month'],
-      value: [], //起始月份
-      dateFormat: 'YYYY-MM-DD'
+      value: [] //起始月份
+      // dateFormat: 'YYYY-MM-DD'
     }
   },
+
+  // html渲染出来后，操作dom
+  mounted() {
+    this.cancelLoading()
+  },
   created() {
-    this.getInteriorData()
+    this.getIntData() // 查询订单统计
   },
+
   methods: {
-    getInteriorData() {
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 500)
+    },
+
+    // 查询订单内部统计
+    getIntData() {
       this.$nextTick(() => {
-        // external(this.queryParam).then(res => {
-        //   if (res.success) {
-        //     this.interiorData = res.result.records
-        //     console.log('订单外部列表', this.interiorData)
-        //     this.pagination = {
-        //       total: res.result.total,
-        //       current: 1,
-        //       pageSize: res.result.size
-        //     }
-        //     // console.log('分页器赋值:', this.pagination.total, this.pagination.current, this.pagination.pageSize)
-        //   }
-        // })
+        externalList(this.queryParam).then(res => {
+          if (res.success) {
+            console.log('99')
+            this.intData = res.result.records
+            console.log('订单外部列表', this.intData)
+            this.pagination = {
+              total: res.result.total,
+              current: res.result.current,
+              pageSize: res.result.size
+            }
+          }
+        })
       })
     },
 
+    searchQuery() {
+      this.queryParam.pageNo = ''
+      if (this.queryParam) {
+        console.log('指定查询条件,渲染chart', this.queryParam)
+        this.$refs.departmentChart.queryParam = this.queryParam
+        this.$refs.departmentChart.getDepChartData()
+      }
+      this.getIntData()
+    },
     // 日期面板变化时的回调
     handlePanelChange(value, mode) {
       this.value = value
       this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
-      // console.log('this.mode2', this.mode2)
       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)
-      setFieldsValue({
-        timeRange: value
-      })
     },
 
     // 时间发生变化的回调，发生在用户选择时间时
     monthChange(value) {
       this.value = value
-      console.log('what------monthChange')
-    },
-    searchQuery() {
-      this.getInteriorData()
+      // console.log('what------monthChange')
     },
+
     searchReset() {
       this.queryParam = {}
       this.value = [] //起始年月重置
-      this.getInteriorData()
+      this.getIntData()
     },
 
     handleTableChange(pagination, filters, sorter) {
+      console.log('当前页信息>>>>', pagination)
       this.queryParam.pageNo = pagination.current
-      this.getInteriorData()
+      this.getIntData()
     }
   },
   computed: {},
@@ -262,6 +282,14 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+.departmentChart,
+.customerChart {
+  // width: 100%;
+  height: 600px;
+  text-align: center;
+  padding-top: 10px;
+}
 .departmentChart {
   margin-bottom: 20px;
 }