报表-订单数据统计（内部、外部）charts补充 + 布局变化

src/api/reportForms/order-statistics.js

@@ -0,0 +1,13 @@
+/** 报表 -- 订单数据统计报表 **/
+import { getAction, postAction, deleteAction } from '@/api/manage'
+
+// 分页查询（内部、外部）
+const external = params => getAction('/report/soSoDetails/getSO_SOMainReport', params)
+
+// 外部 部门 统计图
+// const depChart = params => getAction('/report/soSoDetails/getSO_SOMainReport', params)
+
+// 外部 客户 统计图
+// const cusChart= params => getAction('/report/soSoDetails/getSO_SOMainReport', params)
+
+export { external }

src/api/reportForms/order-statistics/external-statistics.js

@@ -1 +0,0 @@
-/** 报表 -- 订单外部统计表 **/

src/api/reportForms/order-statistics/interior-statistics.js

@@ -1 +0,0 @@
-/** 报表 -- 订单内部统计表 **/

src/field/document/order.md

@@ -1,6 +1,7 @@
 #### 单证【订单数据】
 
 ## 查询接口位置：订单主表-分页列表查询
+
 orderNumber, 订单号
 orderDate, 订单日期
 businessTypeValue, 业务类型
@@ -15,7 +16,7 @@ salesDepartment, 销售部门
 salesman, 业务员
 currencyValue, 币种
 brandSide, 品牌方
-dilivery, 发货状态 （0未发货   1已发货）
+dilivery, 发货状态 （0 未发货 1 已发货）
 thirdParty, 第三方
 depositRatio, 定金比例
 deposit, 定金
@@ -28,9 +29,8 @@ orderChangeDescription 订单变更说明
 account 账套
 customerOrderNumber 客户订单号
 
-
-
 #### 详情页 子表字段，主表字段同上
+
 ## 接口位置：订单子表信息-分页列表查询
 
 itemNumber 款号
@@ -55,4 +55,176 @@ taxRate 税率（%）
 remarks 备注
 bankClosedBy 行关闭人
 
+    /**主键id*/  ====== 》ID 销售订单主表标识
+    private java.lang.String id;
+    /**订单号*/  ====== 》cSOCode 销售订单号
+    private java.lang.String orderNumber;
+    /**订单日期*/  ====== 》dDate 单据日期
+    private java.util.Date orderDate;
+    /**业务类型*/  ====== 》cBusType 业务类型
+    private java.lang.String businessTypeValue;
+    /**业务类型文本*/
+    private java.lang.String businessTypeText;
+    /**销售类型*/ =======》cSTCode  销售类型编码
+    private java.lang.String salesTypeValue;
+    /**销售类型文本*/======》cSTName (SaleType 表)销售类型名称
+    private java.lang.String salesTypeText;
+    /**客户简称*/ ====== 》cCusCode   客户编码
+    private java.lang.String customerAbbreviation;
+    /**客户名称*/     ====== 》cCusName   客户名称
+    private java.lang.String customerName;
+    /**汇率*/   ======》iExchRate   汇率
+    private java.math.BigDecimal exchangeRate;
+    /**销售部门*/   ====== 》cDepCode (U861)  部门编码
+    private java.lang.String salesDepartment;
+    /**业务员*/   ====== 》cCrmpersonName  业务员
+    private java.lang.String salesman;
+    /**币种*/   ====== 》cexch_code    币种id(foreigncurrency )
+    private java.lang.String currencyValue;
+    /**币种文本*/  ====== 》cexch_name   币种名称
+    private java.lang.String currencyText;
+    /**品牌方*/
+    private java.lang.String brandSide;
+    /**第三方*/
+    private java.lang.String thirdParty;
+    /**定金比例*/   ====== 》fbookratio (U8100)  定金比例(%)
+    private java.lang.String depositRatio;
+    /**定金*/   ====== 》iMoney 定金
+    private java.math.BigDecimal deposit;
+    /**协同路线*/  ===>chdefine1(SO_SOMain_extradefine)对应订单ID
+    private java.lang.String collaborativeRoute;
+    /**订单备注*/====== 》cMemo
+    private java.lang.Object orderRemarks;
+    /**价格备注*/====》chdefine4(SO_SOMain_extradefine)对应订单ID
+    private java.lang.Object priceRemarks;
+    /**客户订单号*/
+    private java.lang.String customerOrderNumber;
+    /**整单合计*/
+    private java.math.BigDecimal wholeOrderTotal;
+    /**最终客户*/
+    private java.lang.String endCustomer;
+    /**付款条件*/  ==》cPayCode   付款条件编码  （cPayName (PayCondition)  付款条件名称  ）
+    private java.lang.String termOfPayment;
+    /**订单变更说明*/   ===》cDefine14
+    private java.lang.Object orderChangeDescription;
+
+cDefine12 成衣加工商 garment_factory
+
+    /**创建人*/
+    private java.lang.String createBy;
+    /**创建日期*/
+    private java.util.Date createTime;
+    /**更新人*/
+    private java.lang.String updateBy;
+    /**更新日期*/
+    private java.util.Date updateTime;
+
+    /**组织*/
+    private java.lang.String pkOrg;
+    /**删除状态*/
+    private java.lang.String delFlag;
+    /**备注*/   ====== 》cMemo (U861)  备注
+    private java.lang.Object memo;
+    /**供应商*/
+    private java.lang.String supplier;
+    /**账套*/
+    private java.lang.String account;
+    /**发货状态*/
+    private java.lang.String dilivery;
+
+=======================================
+
+    /**主键*/  ===》 AutoID (U861)  销售订单子表标识
+    private java.lang.String id;
+    /**订单数据主表id*/    ===》ID (U861)  销售订单主表标识
+    private java.lang.String syOrderDataId;
+    /**款号*/===》cDefin22
+    private java.lang.String itemNumber;
+    /**预发货日期*/===>dPreDate
+    private java.util.Date preDeliveryDate;
+    /**预完工日期*/===>dPreMoDate
+    private java.util.Date preCompletionDate;
+    /**PackId*/===>cDefine32
+    private java.lang.String packId;
+    /**小po*/===>cDefine28
+    private java.lang.String smallPo;
+    /**分销点*/===>cDefine29
+    private java.lang.String distributionPoint;
+    /**存货编码*/===>cInvCode
+    private java.lang.String inventoryCode;
+    /**存货名称*/====>cInvName
+    private java.lang.String inventoryName;
+    /**规格型号*/
+    private java.lang.String specificationAndModel;
+    /**颜色*/====>cFree1
+    private java.lang.String colour;
+    /**尺码*/====>cFree2
+    private java.lang.String size;
+    /**配码规则*/====>cFree3
+    private java.lang.String codingRules;
+    /**光坯毛门幅CM*/====>cFree4
+    private java.math.BigDecimal guangpeiGateWidth;
+    /**箱数*/====>cDefine35
+    private java.math.BigDecimal boxNumber;
+    /**数量*/===>iQuantity
+    private java.math.BigDecimal quantity;
+    /**主计量*/
+    private java.lang.String masterMetering;
+    /**含税单价*/===>iTaxUnitPrice
+    private java.math.BigDecimal unitPriceIncludingTax;
+    /**价税合计*/===>iSum
+    private java.math.BigDecimal totalPriceAndTax;
+    /**税率*/===>iTaxRate
+    private java.math.BigDecimal taxRate;
+    /**备注*/===>cMemo
+    private java.lang.Object remarks;
+    /**行关闭人*/
+    private java.lang.String bankClosedBy;
+    /**创建人*/
+    private java.lang.String createBy;
+    /**创建日期*/
+    private java.util.Date createTime;
+    /**更新人*/
+    private java.lang.String updateBy;
+    /**更新日期*/
+    private java.util.Date updateTime;
+    /**组织*/
+    private java.lang.String pkOrg;
+    /**删除状态*/
+    private java.lang.String delFlag;
+    /**备注*/
+    private java.lang.Object memo;
+    /**排序*/
+    private java.lang.Integer sort;
+
+========================================
+
+    //供应商编码（收货）
+    private String supplierNumber;
+    //供应商ID
+    private String supplierId;
+    //供应商租户ID
+    private String supplierTenantId;
+    //发票号
+    private String invoiceNum;
 
+//行号（序号）
+private String packingLineNum;
+//缸号
+private String batchNo;
+//颜色特性
+private String itemAttrId;
+//物料编码
+private String itemCode;
+//物料 ID
+private String itemId;
+//项目（辅料品名）====》cItemName 子表
+private String itemDesc;
+//报关品名
+private String declarationName;
+//成分
+private String composition;
+//门幅
+private String width;
+//匹数
+private String rolls;

src/views/order/orderList.vue

@@ -132,11 +132,11 @@ export default {
           },
           className: 'replacecolor'
         },
-        { title: '业务类型', width: 120, dataIndex: 'businessTypeValue', className: 'replacecolor' },
-        { title: '客户订单', width: 120, dataIndex: 'customerOrderNumber', className: 'replacecolor' },
+        { title: '业务类型', width: 100, dataIndex: 'businessTypeValue', className: 'replacecolor' },
+        { title: '客户订单号', width: 120, dataIndex: 'customerOrderNumber;', className: 'replacecolor' },
         {
           title: '销售类型',
-          width: 120,
+          width: 100,
           dataIndex: 'salesTypeValue',
           className: 'replacecolor'
         },
@@ -145,19 +145,19 @@ export default {
         { title: '供应商', width: 120, dataIndex: 'supplier', className: 'replacecolor' },
         { title: '汇率', width: 90, dataIndex: 'exchangeRate', className: 'replacecolor' },
         { title: '整单合计', width: 120, dataIndex: 'wholeOrderTotal', className: 'replacecolor' },
-        { title: '销售部门', width: 120, dataIndex: 'salesDepartment', className: 'replacecolor' },
-        { title: '业务员', width: 120, dataIndex: 'salesman', className: 'replacecolor' },
-        { title: '币种', width: 120, dataIndex: 'currencyValue', className: 'replacecolor' },
+        { title: '销售部门', width: 100, dataIndex: 'salesDepartment', className: 'replacecolor' },
+        { title: '业务员', width: 140, dataIndex: 'salesman', className: 'replacecolor' },
+        { title: '币种', width: 90, dataIndex: 'currencyValue', className: 'replacecolor' },
         { title: '品牌方', width: 120, dataIndex: 'brandSide', className: 'replacecolor' },
         { title: '第三方', width: 120, dataIndex: 'thirdParty', className: 'replacecolor' },
         { title: '定金比例(%)', width: 120, dataIndex: 'depositRatio', className: 'replacecolor' },
-        { title: '定金', width: 120, dataIndex: 'deposit', className: 'replacecolor' },
-        { title: '协同路线', width: 120, dataIndex: 'collaborativeRoute', className: 'replacecolor' },
+        { title: '定金', width: 100, dataIndex: 'deposit', className: 'replacecolor' },
+        { title: '协同路线', width: 160, dataIndex: 'collaborativeRoute', className: 'replacecolor' },
         { title: '付款条件', width: 180, dataIndex: 'termOfPayment', className: 'replacecolor' },
         { title: '最终客户', width: 120, dataIndex: 'endCustomer', className: 'replacecolor' },
         {
           title: '订单备注',
-          width: 180,
+          width: 220,
           dataIndex: 'orderRemarks',
           customRender: t => ellipsis(t),
           className: 'replacecolor',
@@ -213,7 +213,7 @@ export default {
         orderList(this.queryParam).then(res => {
           if (res.success) {
             this.orderListData = res.result.records
-            // console.log('订单数据列表', this.orderListData)s
+            // console.log('订单数据列表', this.orderListData)
             this.pagination = {
               total: res.result.total,
               current: res.result.current,

src/views/reportForms/dye-loss-table.vue

@@ -137,7 +137,7 @@ export default {
           className: 'replacecolor'
         },
         { title: '颜色', width: 160, dataIndex: 'color', customRender: t => ellipsis(t), className: 'replacecolor' },
-        { title: '供应商', width: 160, dataIndex: 'cvenName', className: 'replacecolor' },
+        { title: '供应商', width: 180, dataIndex: 'cvenName', align: 'left', className: 'replacecolor' },
         {
           title: '订单号',
           width: 120,

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

@@ -0,0 +1,215 @@
+<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'
+
+export default {
+  name: 'DepartmentChart', // 部门统计图
+  data() {
+    return {
+      // newData: {
+      // departmentArr: [],
+      //realQuantityArr: []
+      // localMoneyArr: []
+      // }
+    }
+  },
+
+  mounted() {
+    // this.getChartData()
+    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()
+      //   })
+      // })
+    },
+
+    initEcharts() {
+      const myChart = echarts.init(document.getElementById('cusChart')) //dark ,深色主题
+      // 配置
+      const option = {
+        title: {
+          bpttom: '20',
+          text: '客户统计表',
+          textStyle: {
+            fontSize: 18,
+            color: '#5470c6'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+          // textStyle: {
+          //   fontSize: 18
+          // }
+        },
+        legend: {
+          // textStyle: {
+          //   fontSize: 16,
+          //   color: '#5470c6'
+          // },
+          data: [
+            '实际数量',
+            '本币金额'
+            // {
+            //   name: '染损(%)',
+            //   icon: 'circle' // 图例的图标样式
+            // }
+          ]
+        },
+        grid: {
+          show: true, //是否显示直角坐标系网格。[ default: false ]
+          left: '5%', // 组件离容器左侧的距离。
+          right: '5%',
+          borderColor: 'none', //网格的边框颜色
+          bottom: '20%' //
+        },
+
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            interval: 0 //控制X轴刻度全部显示
+            // rotate: 30 //倾斜角度
+          },
+
+          axisPointer: {
+            type: 'shadow'
+          },
+          data: ['FD', 'PMK', 'AUCHAN', 'BIOWORLD', 'CB', 'DUNNES', 'EVA-L']
+          // data: this.departmentArr
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '实际数量',
+            min: 0,
+            max: 100000,
+            interval: 10000,
+            axisLabel: {
+              // formatter: '{value} ml'
+            }
+          },
+          {
+            type: 'value',
+            name: '本币金额',
+            min: 0,
+            max: 1200000,
+            interval: 200000,
+            axisLabel: {
+              // formatter: '{value} °C'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '实际数量',
+            type: 'bar',
+            // tooltip: {
+            //   valueFormatter: function(value) {
+            //     // return value + ' ml';
+            //   }
+            // },
+            // 折现部门渐变色
+            // areaStyle: {
+            //   normal: {
+            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //       { offset: 0, color: 'rgba(216, 61, 65,0.5)' },
+            //       { offset: 0.5, color: 'rgba(216, 61, 65,0.2)' },
+            //       { offset: 1, color: 'rgba(216, 61, 65,0.08)' }
+            //     ])
+            //   }
+            // },
+            barWidth: '30%',
+            data: [90000, 40000, 87666, 65555, 26347, 87687, 26546]
+            // data: this.dyeLossRateArr
+          },
+          {
+            name: '本币金额',
+            type: 'line',
+            tooltip: {
+              // valueFormatter: function(value) {
+              //   // return value + ' ml'
+              // }
+            },
+            data: [22443, 68176, 71276, 50176, 70176, 68976, 38276]
+          }
+        ]
+      }
+      // 渲染
+      myChart.setOption(option)
+      //resize方法实现自动缩放
+      window.addEventListener('resize', this.myChart.resize)
+    }
+  },
+
+  watch: {
+    // 3、监听数据变化
+    newData: {
+      deep: true,
+      handler() {
+        // 数据变化，执行
+        const { cvenNameArr, dyeLossRateArr } = this.newData
+        this.initEcharts(cvenNameArr, dyeLossRateArr)
+        console.log('333')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+
+// /deep/ th.replacecolor {
+//   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/chart/external/departmentChart.vue

@@ -0,0 +1,209 @@
+<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'
+
+export default {
+  name: 'CustomerChart', // 客户统计图
+  data() {
+    return {
+      // newData: {
+      // departmentArr: [],
+      //realQuantityArr: []
+      // localMoneyArr: []
+      // }
+    }
+  },
+
+  mounted() {
+    // this.getDepChartData()
+    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()
+      //   })
+      // })
+    },
+
+    initEcharts() {
+      const myChart = echarts.init(document.getElementById('depChart')) //dark ,深色主题
+      // 配置
+      const option = {
+        title: {
+          bpttom: '20',
+          text: '部门统计表',
+          textStyle: {
+            fontSize: 18,
+            color: '#5470c6'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          },
+          textStyle: {
+            fontSize: 18
+          }
+        },
+
+        legend: {
+          // textStyle: {
+          //   fontSize: 16,
+          //   color: '#5470c6'
+          // },
+          data: ['实际数量', '本币金额']
+        },
+        grid: {
+          show: true, //是否显示直角坐标系网格。[ default: false ]
+          left: '5%', // 组件离容器左侧的距离。
+          right: '5%',
+          borderColor: 'none', //网格的边框颜色
+          bottom: '20%' //
+        },
+
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            interval: 0 //控制X轴刻度全部显示
+            // rotate: 30 //倾斜角度
+          },
+
+          axisPointer: {
+            type: 'shadow'
+          },
+          data: ['业务一部', '业务二部', '业务三部', '业务四部', '业务五部', '业务六部', '业务七部']
+          // data: this.departmentArr
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '实际数量',
+            min: 0,
+            max: 10000000,
+            interval: 1000000,
+            axisLabel: {
+              // formatter: '{value} ml'
+            }
+          },
+          {
+            type: 'value',
+            name: '本币金额',
+            min: 0,
+            max: 10000000,
+            interval: 5000000,
+            axisLabel: {
+              // formatter: '{value} °C'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '实际数量',
+            type: 'bar',
+            // tooltip: {
+            //   valueFormatter: function(value) {
+            //     // return value + ' ml';
+            //   }
+            // },
+            itemStyle: {
+              color: 'orange'
+              // normal:{
+              // 颜色:  function ( params )  {
+              //     	//注意，如果颜色太少，后面的颜色不会自动循环。最好再定义几个颜色
+              //         变量colorList =  [ '#c23531' ,'#2f4554' , '#61a0a8' , '#d48265' ,'#91c7ae' ,'#749f83' , '#ca8622' ]
+              //         返回颜色列表[参数. 数据索引]
+              //     }
+              // }
+            },
+            barWidth: '30%',
+            data: [5635464, 4230466, 7498980, 6546765, 9222342, 1655143, 5055143]
+            // data: this.dyeLossRateArr
+          },
+          {
+            name: '本币金额',
+            type: 'line',
+            tooltip: {
+              // valueFormatter: function(value) {
+              //   // return value + ' ml'
+              // }
+            },
+            data: [7237455, 5158676, 7864656, 6744645, 9543645, 4446511, 6564992]
+          }
+        ]
+      }
+      // 渲染
+      myChart.setOption(option)
+      //resize方法实现自动缩放
+      window.addEventListener('resize', this.myChart.resize)
+    }
+  },
+
+  watch: {
+    // 3、监听数据变化
+    newData: {
+      deep: true,
+      handler() {
+        // 数据变化，执行
+        const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
+        this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
+        // console.log('333')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+
+// /deep/ th.replacecolor {
+//   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/chart/externalChartModal.vue

@@ -1,83 +0,0 @@
-<template>
-  <a-modal
-    title="订单外部分析图"
-    v-model="externalChartModVis"
-    :confirmLoading="confirmLoading"
-    width="70%"
-    style="top:330px;left:100px;"
-    :footer="null"
-  >
-    <a-spin :spinning="confirmLoading">
-      <a-tabs default-active-key="1" @change="tabsCallback">
-        <a-tab-pane key="1" tab="按部门">
-          此处应该是订单外部分析图--按部门
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="按客户" force-render>
-          此处应该是订单外部分析图--按客户
-        </a-tab-pane>
-      </a-tabs>
-    </a-spin>
-  </a-modal>
-</template>
-
-<script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import JEllipsis from '@/components/jeecg/JEllipsis'
-import moment from 'moment'
-
-export default {
-  name: 'ExternalChartModal', // 订单外部分析图
-  mixins: [JeecgListMixin],
-  components: { JEllipsis, moment },
-
-  data() {
-    return {
-      confirmLoading: false,
-      externalChartModVis: false
-    }
-  },
-  // 接收父组件 方法
-  props: {
-    father: {
-      type: Function,
-      default: null
-    }
-  },
-  created() {},
-  methods: {
-    // 切换面板的回调
-    tabsCallback(key) {
-      console.log(key)
-    }
-  },
-  computed: {}
-}
-</script>
-<style lang="less" scoped>
-@import '~@assets/less/common.less';
-/deep/ .ant-table-thead > tr > th {
-  text-align: center;
-  // font-weight: 700;
-}
-/deep/ .ant-table-tbody {
-  text-align: center;
-}
-// th.replacecolor {
-// background-color:  #ccc;
-// }
-
-/deep/ .ant-modal-body {
-  // min-height: 300px;
-  // background-color: orange;
-}
-
-/deep/ .ant-tabs-content,
-.ant-tabs-content-animated,
-.ant-tabs-tabpane,
-.ant-tabs-tabpane-active,
-.ant-tabs-top-content {
-  height: 600px;
-  // border: 1px solid red; //#e8e8e8
-  background-color: #e8e8e8;
-}
-</style>

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

@@ -0,0 +1,215 @@
+<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'
+
+export default {
+  name: 'DepartmentChart', // 部门统计图
+  data() {
+    return {
+      // newData: {
+      // departmentArr: [],
+      //realQuantityArr: []
+      // localMoneyArr: []
+      // }
+    }
+  },
+
+  mounted() {
+    // this.getChartData()
+    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()
+      //   })
+      // })
+    },
+
+    initEcharts() {
+      const myChart = echarts.init(document.getElementById('cusChart')) //dark ,深色主题
+      // 配置
+      const option = {
+        title: {
+          bpttom: '20',
+          text: '客户统计表',
+          textStyle: {
+            fontSize: 18,
+            color: '#5470c6'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+          // textStyle: {
+          //   fontSize: 18
+          // }
+        },
+        legend: {
+          // textStyle: {
+          //   fontSize: 16,
+          //   color: '#5470c6'
+          // },
+          data: [
+            '实际数量',
+            '本币金额'
+            // {
+            //   name: '染损(%)',
+            //   icon: 'circle' // 图例的图标样式
+            // }
+          ]
+        },
+        grid: {
+          show: true, //是否显示直角坐标系网格。[ default: false ]
+          left: '5%', // 组件离容器左侧的距离。
+          right: '5%',
+          borderColor: 'none', //网格的边框颜色
+          bottom: '20%' //
+        },
+
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            interval: 0 //控制X轴刻度全部显示
+            // rotate: 30 //倾斜角度
+          },
+
+          axisPointer: {
+            type: 'shadow'
+          },
+          data: ['FD', 'PMK', 'AUCHAN', 'BIOWORLD', 'CB', 'DUNNES', 'EVA-L']
+          // data: this.departmentArr
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '实际数量',
+            min: 0,
+            max: 100000,
+            interval: 10000,
+            axisLabel: {
+              // formatter: '{value} ml'
+            }
+          },
+          {
+            type: 'value',
+            name: '本币金额',
+            min: 0,
+            max: 1200000,
+            interval: 200000,
+            axisLabel: {
+              // formatter: '{value} °C'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '实际数量',
+            type: 'bar',
+            // tooltip: {
+            //   valueFormatter: function(value) {
+            //     // return value + ' ml';
+            //   }
+            // },
+            // 折现部门渐变色
+            // areaStyle: {
+            //   normal: {
+            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //       { offset: 0, color: 'rgba(216, 61, 65,0.5)' },
+            //       { offset: 0.5, color: 'rgba(216, 61, 65,0.2)' },
+            //       { offset: 1, color: 'rgba(216, 61, 65,0.08)' }
+            //     ])
+            //   }
+            // },
+            barWidth: '30%',
+            data: [90000, 40000, 87666, 65555, 26347, 87687, 26546]
+            // data: this.dyeLossRateArr
+          },
+          {
+            name: '本币金额',
+            type: 'line',
+            tooltip: {
+              // valueFormatter: function(value) {
+              //   // return value + ' ml'
+              // }
+            },
+            data: [22443, 68176, 71276, 50176, 70176, 68976, 38276]
+          }
+        ]
+      }
+      // 渲染
+      myChart.setOption(option)
+      //resize方法实现自动缩放
+      window.addEventListener('resize', this.myChart.resize)
+    }
+  },
+
+  watch: {
+    // 3、监听数据变化
+    newData: {
+      deep: true,
+      handler() {
+        // 数据变化，执行
+        const { cvenNameArr, dyeLossRateArr } = this.newData
+        this.initEcharts(cvenNameArr, dyeLossRateArr)
+        console.log('333')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+
+// /deep/ th.replacecolor {
+//   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/chart/interior/departmentChart.vue

@@ -0,0 +1,209 @@
+<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'
+
+export default {
+  name: 'DepChart', // 客户统计图
+  data() {
+    return {
+      // newData: {
+      // departmentArr: [],
+      //realQuantityArr: []
+      // localMoneyArr: []
+      // }
+    }
+  },
+
+  mounted() {
+    // this.getDepChartData()
+    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()
+      //   })
+      // })
+    },
+
+    initEcharts() {
+      const myChart = echarts.init(document.getElementById('depChart')) //dark ,深色主题
+      // 配置
+      const option = {
+        title: {
+          bpttom: '20',
+          text: '部门统计表',
+          textStyle: {
+            fontSize: 18,
+            color: '#5470c6'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          },
+          textStyle: {
+            fontSize: 18
+          }
+        },
+
+        legend: {
+          // textStyle: {
+          //   fontSize: 16,
+          //   color: '#5470c6'
+          // },
+          data: ['实际数量', '本币金额']
+        },
+        grid: {
+          show: true, //是否显示直角坐标系网格。[ default: false ]
+          left: '5%', // 组件离容器左侧的距离。
+          right: '5%',
+          borderColor: 'none', //网格的边框颜色
+          bottom: '20%' //
+        },
+
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            interval: 0 //控制X轴刻度全部显示
+            // rotate: 30 //倾斜角度
+          },
+
+          axisPointer: {
+            type: 'shadow'
+          },
+          data: ['业务一部', '业务二部', '业务三部', '业务四部', '业务五部', '业务六部', '业务七部']
+          // data: this.departmentArr
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '实际数量',
+            min: 0,
+            max: 10000000,
+            interval: 1000000,
+            axisLabel: {
+              // formatter: '{value} ml'
+            }
+          },
+          {
+            type: 'value',
+            name: '本币金额',
+            min: 0,
+            max: 10000000,
+            interval: 5000000,
+            axisLabel: {
+              // formatter: '{value} °C'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '实际数量',
+            type: 'bar',
+            // tooltip: {
+            //   valueFormatter: function(value) {
+            //     // return value + ' ml';
+            //   }
+            // },
+            itemStyle: {
+              color: 'orange'
+              // normal:{
+              // 颜色:  function ( params )  {
+              //     	//注意，如果颜色太少，后面的颜色不会自动循环。最好再定义几个颜色
+              //         变量colorList =  [ '#c23531' ,'#2f4554' , '#61a0a8' , '#d48265' ,'#91c7ae' ,'#749f83' , '#ca8622' ]
+              //         返回颜色列表[参数. 数据索引]
+              //     }
+              // }
+            },
+            barWidth: '30%',
+            data: [5635464, 4230466, 7498980, 6546765, 9222342, 1655143, 5055143]
+            // data: this.dyeLossRateArr
+          },
+          {
+            name: '本币金额',
+            type: 'line',
+            tooltip: {
+              // valueFormatter: function(value) {
+              //   // return value + ' ml'
+              // }
+            },
+            data: [7237455, 5158676, 7864656, 6744645, 9543645, 4446511, 6564992]
+          }
+        ]
+      }
+      // 渲染
+      myChart.setOption(option)
+      //resize方法实现自动缩放
+      window.addEventListener('resize', this.myChart.resize)
+    }
+  },
+
+  watch: {
+    // 3、监听数据变化
+    newData: {
+      deep: true,
+      handler() {
+        // 数据变化，执行
+        const { departmentArr, realQuantityArr, localMoneyArr } = this.newData
+        this.initEcharts(departmentArr, realQuantityArr, localMoneyArr)
+        // console.log('333')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+
+// /deep/ th.replacecolor {
+//   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/chart/interiorChartModal.vue

@@ -1,83 +0,0 @@
-<template>
-  <a-modal
-    title="订单内部分析图"
-    v-model="interiorChartModVis"
-    :confirmLoading="confirmLoading"
-    :footer="null"
-    width="80%"
-    style="top:330px;left:100px;"
-  >
-    <a-spin :spinning="confirmLoading">
-      <a-tabs default-active-key="1" @change="tabsCallback">
-        <a-tab-pane key="1" tab="按部门">
-          此处应该是订单内部分析图--按部门
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="按客户" force-render>
-          此处应该是订单内部分析图--按客户
-        </a-tab-pane>
-      </a-tabs>
-    </a-spin>
-  </a-modal>
-</template>
-
-<script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import JEllipsis from '@/components/jeecg/JEllipsis'
-import moment from 'moment'
-
-export default {
-  name: 'InteriorChartModal', // 订单内部分析图
-  mixins: [JeecgListMixin],
-  components: { JEllipsis, moment },
-
-  data() {
-    return {
-      confirmLoading: false,
-      interiorChartModVis: false
-    }
-  },
-  // 接收父组件 方法
-  props: {
-    father: {
-      type: Function,
-      default: null
-    }
-  },
-  created() {},
-  methods: {
-    // 切换面板的回调
-    tabsCallback(key) {
-      console.log(key)
-    }
-  },
-  computed: {}
-}
-</script>
-<style lang="less" scoped>
-@import '~@assets/less/common.less';
-/deep/ .ant-table-thead > tr > th {
-  text-align: center;
-  // font-weight: 700;
-}
-/deep/ .ant-table-tbody {
-  text-align: center;
-}
-// th.replacecolor {
-// background-color:  #ccc;
-// }
-
-/deep/ .ant-modal-body {
-  // min-height: 300px;
-  // background-color: orange;
-}
-
-/deep/ .ant-tabs-content,
-.ant-tabs-content-animated,
-.ant-tabs-tabpane,
-.ant-tabs-tabpane-active,
-.ant-tabs-top-content {
-  height: 600px;
-  // border: 1px solid red; //#e8e8e8
-  background-color: #e8e8e8;
-}
-</style>

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

@@ -1,7 +1,6 @@
 <template>
   <!-- 订单外部统计表-->
   <div id="externalStatistics">
-
     <!-- 查询区域 -->
     <a-card :bordered="false">
       <div class="table-page-search-wrapper">
@@ -32,13 +31,14 @@
 
             <a-col :md="6" :sm="8">
               <a-form-item label="部门">
-                <a-select placeholder="请选择部门" v-model="queryParam.department">
+                <a-input placeholder="请输入订单号" v-model="queryParam.department"></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>
                   <a-select-option :value="2">业务三部</a-select-option>
                   <a-select-option :value="2">业务四部</a-select-option>
-                </a-select>
+                </a-select> -->
               </a-form-item>
             </a-col>
 
@@ -71,27 +71,33 @@
       </div>
     </a-card>
 
-    <!-- 操作按钮  订单外部分析图-->
+    <!-- 引入 echarts -->
     <a-card :bordered="false" style="marginTop:10px;">
-      <div class="table-operator">
-        <a-button type="primary" @click="externalChart" icon="area-chart">订单外部分析图</a-button>
+      <div class="chart">
+        <!-- 部门 "-->
+        <div class="departmentChart" style="background:rgba(255, 165, 0,.08);">
+          <departmentChart />
+        </div>
+        <!-- 客户 -->
+        <div class="customerChart" style="background:rgba(134, 151, 201,.08);">
+          <customerChart />
+        </div>
       </div>
+    </a-card>
 
-      <!-- table区域  rowKey="id" :scroll="{ x: 1500 }" -->
+    <!-- table rowKey="id" :scroll="{ x: 1500 }"-->
+    <a-card :bordered="false" style="marginTop:10px;">
       <a-table
         bordered
         :row-key="record => record.id"
         :columns="externalStatisticsColumns"
         :data-source="externalStatisticsData"
         :loading="loading"
-        :pagination="ipagination"
+        :pagination="pagination"
         @change="handleTableChange"
       >
       </a-table>
     </a-card>
-
-    <!-- 查看分析图 弹框 -->
-    <externalChart-modal ref="externalChartModal" :father="aa"></externalChart-modal>
   </div>
 </template>
 
@@ -99,12 +105,16 @@
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
-import externalChartModal from '@views/reportForms/order-statistics/chart/externalChartModal.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'
 
 export default {
   name: 'ExternalStatistics', // 订单外部统计表
   mixins: [JeecgListMixin],
-  components: { JEllipsis, moment, externalChartModal },
+  components: { JEllipsis, moment, departmentChart, customerChart },
 
   data() {
     // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
@@ -159,58 +169,63 @@ export default {
           dataIndex: 'realQuantity',
           className: 'replacecolor'
         },
-        { title: '本币金额', width: 150, dataIndex: 'LocalMoney', className: 'replacecolor' }
-      ],
-      externalStatisticsData: [
-        {
-          department: '业务八部',
-          supplierType: '成衣厂',
-          supplier: '国云森',
-          planDeliveryMonth: '2021-04',
-          priceInTax: '87.89',
-          realQuantity: '90,120,0000',
-          LocalMoney: '301,929,04'
-        }
+        { title: '本币金额', width: 150, dataIndex: 'localMoney', className: 'replacecolor' }
       ],
+      externalStatisticsData: [],
       loading: false, // 表格加载
 
       // 查询条件
       queryParam: {
+        vendorType: '外部',
         startYearMonth: '',
         endYearMonth: '',
         department: '',
         customer: ''
+      },
+
+      pagination: {
+        // total: '', //总条数
+        // current: '', //当前页
+        // pageSize: '' //一页多少
       }
       // dateFormat: 'YYYY-MM-DD'
     }
   },
   created() {
-    // 渲染订单销售列表
+    this.getExternalData()
   },
   methods: {
-    // 查询按钮
+    getExternalData() {
+      this.$nextTick(() => {
+        // external(this.queryParam).then(res => {
+        //   if (res.success) {
+        //     this.ExternalData = res.result.records
+        //     console.log('订单外部列表', this.ExternalData)
+        //     this.pagination = {
+        //       total: res.result.total,
+        //       current: res.result.current,
+        //       pageSize: res.result.size
+        //     }
+        //     // console.log('分页器赋值:', this.pagination.total, this.pagination.current, this.pagination.pageSize)
+        //   }
+        // })
+      })
+    },
+
     searchQuery() {
-      // 渲染订单销售列表
+      this.getExternalData()
     },
     searchReset() {
-      // console.log('>>>>重置')
       this.queryParam = {}
-      // 重新渲染订单销售列表
+      this.getExternalData()
     },
 
-    // 内部分析图 弹框
-    externalChart() {
-      this.$refs.externalChartModal.externalChartModVis = true
-    },
-    // father 抽屉方法
-    aa() {}
-
     // 分页、排序、筛选变化时触发
-    // handleTableChange(pagination, filters, sorter) {
-    //   // console.log('当前页信息>>>>',pagination)
-    //   this.queryParam.pageNo = pagination.current
-    //   // this.getOrderList()
-    // }
+    handleTableChange(pagination, filters, sorter) {
+      // console.log('当前页信息>>>>',pagination)
+      this.queryParam.pageNo = pagination.current
+      this.getExternalData()
+    }
   },
   computed: {},
   mounted() {}
@@ -231,4 +246,15 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+.departmentChart,
+.customerChart {
+  width: 1765px;
+  height: 600px;
+  text-align: center;
+  padding-top: 10px;
+}
+.departmentChart {
+  margin-bottom: 20px;
+}
 </style>

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

@@ -1,7 +1,6 @@
 <template>
   <!-- 订单内部统计表-->
   <div id="interiorStatistics">
-
     <!-- 查询区域 -->
     <a-card :bordered="false">
       <div class="table-page-search-wrapper">
@@ -32,13 +31,15 @@
 
             <a-col :md="6" :sm="8">
               <a-form-item label="部门">
-                <a-select placeholder="请选择部门" v-model="queryParam.department">
+                <a-input placeholder="请输入订单号" v-model="queryParam.department"></a-input>
+
+                <!-- <a-select placeholder="请选择部门" v-model="queryParam.department">
                   <a-select-option :value="''">请选择</a-select-option>
                   <a-select-option :value="0">业务一部</a-select-option>
                   <a-select-option :value="1">业务二部</a-select-option>
                   <a-select-option :value="2">业务三部</a-select-option>
                   <a-select-option :value="2">业务四部</a-select-option>
-                </a-select>
+                </a-select> -->
               </a-form-item>
             </a-col>
 
@@ -71,26 +72,33 @@
       </div>
     </a-card>
 
-    <!-- 操作按钮 订单内部分析图 -->
+    <!-- 引入 echarts -->
     <a-card :bordered="false" style="marginTop:10px;">
-      <div class="table-operator">
-        <a-button type="primary" @click="interiorChart" icon="area-chart">订单内部分析图</a-button>
+      <div class="chart">
+        <!-- 部门 "-->
+        <div class="departmentChart" style="background:rgba(255, 165, 0,.08);">
+          <departmentChart />
+        </div>
+        <!-- 客户 -->
+        <div class="customerChart" style="background:rgba(134, 151, 201,.08);">
+          <customerChart />
+        </div>
       </div>
-      <!-- table区域  rowKey="id" :scroll="{ x: 1500 }" -->
+    </a-card>
+
+    <!-- table  rowKey="id" :scroll="{ x: 1500 }"-->
+    <a-card :bordered="false" style="marginTop:10px;">
       <a-table
         bordered
         :row-key="record => record.id"
-        :columns="interiorStatisticsColumns"
-        :data-source="interiorStatisticsData"
+        :columns="interiorColumns"
+        :data-source="interiorData"
         :loading="loading"
-        :pagination="ipagination"
+        :pagination="pagination"
         @change="handleTableChange"
       >
       </a-table>
     </a-card>
-
-    <!-- 查看分析图 弹框 -->
-    <interiorChart-modal ref="interiorChartModal" :father="aa"></interiorChart-modal>
   </div>
 </template>
 
@@ -98,17 +106,21 @@
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
-import interiorChartModal from '@views/reportForms/order-statistics/chart/interiorChartModal.vue'
+
+import departmentChart from '@views/reportForms/order-statistics/chart/interior/departmentChart'
+import customerChart from '@views/reportForms/order-statistics/chart/interior/customerChart.vue'
+
+// import { external } from '@api/reportForms/order-statistics.js'
 
 export default {
   name: 'InteriorStatistics', // 订单内部统计表
   mixins: [JeecgListMixin],
-  components: { JEllipsis, moment, interiorChartModal },
+  components: { JEllipsis, moment, departmentChart, customerChart },
 
   data() {
     // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
     return {
-      interiorStatisticsColumns: [
+      interiorColumns: [
         {
           title: '部门',
           width: 140,
@@ -161,7 +173,7 @@ export default {
         },
         { title: '本币金额', width: 150, dataIndex: 'LocalMoney', className: 'replacecolor' }
       ],
-      interiorStatisticsData: [
+      interiorData: [
         {
           department: '业务八部',
           supplierType: '成衣厂',
@@ -176,41 +188,52 @@ export default {
 
       // 查询条件
       queryParam: {
+        vendorType: '内部',
         startYearMonth: '',
         endYearMonth: '',
         department: '',
         customer: ''
-      }
-      // dateFormat: 'YYYY-MM-DD'
+      },
+      pagination: {
+        // total: '', //总条数
+        // current: '', //当前页
+        // pageSize: '' //一页多少
+      },
+      dateFormat: 'YYYY-MM-DD'
     }
   },
   created() {
-    // 渲染订单销售列表
+    this.getInteriorData()
   },
   methods: {
-    // 查询按钮
+    getInteriorData() {
+      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: res.result.current,
+        //       pageSize: res.result.size
+        //     }
+        //     // console.log('分页器赋值:', this.pagination.total, this.pagination.current, this.pagination.pageSize)
+        //   }
+        // })
+      })
+    },
     searchQuery() {
-      // 渲染订单销售列表
+      this.getInteriorData()
     },
     searchReset() {
-      // console.log('>>>>重置')
       this.queryParam = {}
-      // 重新渲染订单销售列表
+      this.getInteriorData()
     },
 
-    // 内部分析图 弹框
-    interiorChart() {
-      this.$refs.interiorChartModal.interiorChartModVis = true
-    },
-    // father 抽屉方法
-    aa() {}
-
-    // 分页、排序、筛选变化时触发
-    // handleTableChange(pagination, filters, sorter) {
-    //   // console.log('当前页信息>>>>',pagination)
-    //   this.queryParam.pageNo = pagination.current
-    //   // this.getOrderList()
-    // }
+    handleTableChange(pagination, filters, sorter) {
+      this.queryParam.pageNo = pagination.current
+      this.getInteriorData()
+    }
   },
   computed: {},
   mounted() {}
@@ -231,4 +254,7 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+.departmentChart {
+  margin-bottom: 20px;
+}
 </style>