【染损表】列表+chart 数据渲染

src/api/reportForms/dye-loss-table.js

@@ -7,4 +7,11 @@ const dyeLossList = params => getAction('scas/dyeLoss/list', params)
 // 导出
 const exportXls = params => getAction('/scas/dyeLoss/excel', params)
 
-export { dyeLossList,exportXls }
+// 所有供应商chart数据
+const allLoss = params => getAction('/scas/dyeLoss/cInvName', params)
+
+// 指定供应商chart数据
+const someoneLoss = params => getAction('/scas/dyeLoss/vendor', params)
+
+
+export { dyeLossList, exportXls, allLoss,someoneLoss }

src/api/reportForms/supply-capacity-table.js

@@ -2,6 +2,10 @@
 
 import { getAction } from '@/api/manage'
 
-const supplyCapList = params => getAction('/scas/supplierCapacity/list2', params)
+const supplyCapList = params => getAction('/scas/supplierCapacity/list', params)
 
-export { supplyCapList }
+//月份供应商合计导出
+const monthlySupplyXls = params => getAction('/scas/supplierCapacity/excel3', params)
+
+//
+export { supplyCapList, monthlySupplyXls }

src/utils/request.js

@@ -17,7 +17,7 @@ let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
 const service = axios.create({
   //baseURL: '/jeecg-boot',
   baseURL: apiBaseUrl, // api base_url
-  timeout: 9000 // 请求超时时间
+  timeout: 90000 // 请求超时时间
 })
 
 const err = (error) => {

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

@@ -87,12 +87,11 @@
     <a-card :bordered="false">
       <div class="chart">
         <div class="someoneLossChart" v-if="queryParam.venName">
-          <!-- :fatherList="dyeLossRateData" -->
-          <someoneLossChart />
+          <someoneLossChart ref="someoneLossChart" />
         </div>
 
         <div v-else class="allLossChart">
-          <allLossChart :fatherList="dyeLossRateData" />
+          <allLossChart />
         </div>
       </div>
     </a-card>
@@ -107,7 +106,7 @@ import moment from 'moment'
 import allLossChart from '@views/reportForms/dye-loss-table/allLossChart.vue'
 import someoneLossChart from '@views/reportForms/dye-loss-table/someoneLossChart'
 
-import { dyeLossList } from '@api/reportForms/dye-loss-table.js'
+import { dyeLossList, exportXls } from '@api/reportForms/dye-loss-table.js'
 
 // import FileSaver from 'file-saver'
 // import XLSX from 'xlsx'
@@ -166,24 +165,22 @@ export default {
         // current: '', //当前页
         // pageSize: '' //一页多少
       },
-      cvenNameArr: [], //供应商数组 chart
-      cinvNameArr: [], //物料名称数组chart
-      colorArr: [] //颜色数组chart
+      someoneChartData: {
+        cvenNameArr: [], //供应商数组 chart
+        cinvNameArr: [], //物料名称数组chart
+        colorArr: [] //颜色数组chart
+      }
     }
   },
 
   // html渲染出来后，操作dom
   mounted() {
     this.cancelLoading()
-    this.initEcharts()
+    // this.initEcharts()
   },
 
   created() {
-    // setTimeout(() => {
-    //   this.loading = !this.loading
-    // }, 1000)
-    this.getdyeLossList()
-    //   // console.log('000')
+    this.getdyeLossList() //查询染损列表
   },
 
   methods: {
@@ -192,37 +189,36 @@ export default {
         this.loading = false
       }, 500)
     },
-    // 分页查询 染损列表
+
+    // 查询染损列表
     getdyeLossList() {
       this.$nextTick(() => {
         dyeLossList(this.queryParam).then(res => {
-          // console.log(res.result)
           if (res.success) {
             this.dyeLossRateData = res.result.records
-            console.log('染损列表', this.dyeLossRateData)
             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)
+            // console.log('染损列表', this.dyeLossRateData)
           }
         })
       })
     },
-    // 分页变化时触发
-    handleTableChange(pagination, filters, sorter) {
-      console.log('分页器信息>>>>', pagination)
-      if (Object.keys(sorter).length > 0) {
-        this.isorter.column = sorter.field
-        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
-      }
-      this.queryParam.pageNo = pagination.current
-      // console.log('this.queryParam.pageNo', this.queryParam.pageNo)
-      this.getdyeLossList()
-    },
+
     // 查询按钮
     searchQuery() {
+      if (this.queryParam.venName) {
+        console.log('查询的是该供应商', this.queryParam.venName)
+        console.log('应该调指定供应商接口,渲染chart')
+        // 赋值给子组件作为接口参数
+        this.$refs.someoneLossChart.venName = this.queryParam.venName
+        console.log('[查询的供应商名称]', this.$refs.someoneLossChart.venName)
+        this.$refs.someoneLossChart.getSomeoneLossData()
+
+        console.log('父调子方法成功000')
+      }
       this.getdyeLossList() // 渲染染损列表
     },
     searchReset() {
@@ -230,19 +226,20 @@ export default {
       this.getdyeLossList()
     },
 
-    // 获取导出信息
-    // async getInfoXls(fileName) {},
     // 导出
     handleExportXls(fileName) {
       this.loading = false
       console.log('需导出的fileName:', fileName)
       const params = this.queryParam
       console.log('导出参数', params)
+      exportXls().then(res => {
+        console.log('导出', res.result)
+      })
     },
     // 合计行 TODO: table 单元格合并
     totalFooterShow(data) {
       if (data) {
-        console.log('需合计数据(合计行)data', data)
+        // console.log('需合计数据(合计行)data', data)
         return (
           <a-table
             rowKey={Math.random}
@@ -254,6 +251,18 @@ export default {
           ></a-table>
         )
       }
+    },
+
+    // 分页变化时触发
+    handleTableChange(pagination, filters, sorter) {
+      // console.log('分页器信息>>>>', pagination)
+      if (Object.keys(sorter).length > 0) {
+        this.isorter.column = sorter.field
+        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
+      }
+      this.queryParam.pageNo = pagination.current
+      // console.log('this.queryParam.pageNo', this.queryParam.pageNo)
+      this.getdyeLossList()
     }
   },
   computed: {

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

@@ -1,30 +1,51 @@
 <template>
-  <!-- 染损报表 未筛选供应商ref="chart" -->
-  <div id="allLossChart" :style="{ width: '100%', height: '600px' }" ref="container"></div>
+  <!-- 染损报表 所有供应商染损 -->
+  <div id="allLossChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
 import * as echarts from 'echarts' //必须有
-// import echarts from '@views/reportForms/echarts'; 按需引入
+
+import { allLoss } from '@api/reportForms/dye-loss-table.js'
 export default {
   name: 'AllLossChart', // 所有供应商染损分析图
   data() {
-    return {}
-  },
-  props: {
-    fatherList: {
-      type: Object,
-      default: () => ({})
+    return {
+      // newData: {
+      cvenNameArr: [],
+      dyeLossRateArr: []
+      // }
     }
   },
+
   mounted() {
-    this.initEcharts()
+    this.getAllData()
   },
   methods: {
+    // 1、先获取 chart 数据
+    getAllData() {
+      allLoss().then(res => {
+        if (res.success) {
+          if (res.result) {
+            res.result.forEach(item => {
+              this.cvenNameArr.push(item.cvenName)
+              this.dyeLossRateArr.push(item.dyeLossRate)
+            })
+            console.log('供应商chart数组', this.cvenNameArr)
+            console.log('对应染损chart数组', this.dyeLossRateArr)
+          }
+          // console.log('00')
+        }
+        //2、执行chart
+        this.$nextTick(() => {
+          this.initEcharts()
+          // console.log('111')
+        })
+      })
+    },
+
     initEcharts() {
-      // 初始化 深色 ,'dark'
-       const myChart = echarts.init(this.$refs.container);
-      // const myChart = echarts.init(document.getElementById('allLossChart'))
+      const myChart = echarts.init(document.getElementById('allLossChart')) //dark ,深色主题
       // 配置
       const option = {
         title: {
@@ -35,12 +56,19 @@ export default {
         },
         tooltip: {},
         legend: {
-          data: ['染损']
+          textStyle: {
+            color: '#5470c6'
+          },
+          data: [
+            {
+              name: '染损',
+              icon: 'circle' // 图例的图标样式
+            }
+          ]
         },
         xAxis: {
           type: 'category',
-          // data: this.fatherList.cvenName
-          data: ['FASHIONTEX', 'HARMONY', 'MAO XING YUAN', 'RongSen', 'SLJ', 'TIMBERMET', '国运森']
+          data: this.cvenNameArr
         },
         yAxis: {
           type: 'value',
@@ -51,58 +79,29 @@ export default {
             name: '染损',
             type: 'line',
             smooth: true,
-            data: [5, 20, 36, 10, 10, 20],
-            // data: this.fatherList.dyeLossRate
-            //数据源
-            data:dataSources 
+            data: this.dyeLossRateArr
           }
         ]
       }
       // 渲染
       myChart.setOption(option)
+      //resize方法实现自动缩放
+      window.addEventListener('resize', this.chart.resize)
+    }
+  },
+
+  watch: {
+    // 3、监听数据变化
+    newData: {
+      deep: true,
+      handler() {
+        // 数据变化，执行
+        const { cvenNameArr, dyeLossRateArr } = this.newData
+        this.initEcharts(cvenNameArr, dyeLossRateArr)
+        console.log('333')
+      }
     }
   }
-  // 监视数据变化
-  // watch: {
-  //   fatherList: {
-  //     handler(newData) {
-  //       const myChart = echarts.init(this.$ref.chart)
-  //       this.option = {
-  //         // 工具提示
-  //         title: {
-  //           text: '所供应商物料染损统计图'
-  //         },
-  //         tooltip: {},
-  //         legend: {
-  //           data: ['染损']
-  //         },
-  //         xAxis: {
-  //           type: 'category',
-  //           data: newData.cvenName
-  //           // data: this.fatherList.cvenName
-  //           // data: ['FASHIONTEX', 'HARMONY', 'MAO XING YUAN', 'RongSen', 'SLJ', 'TIMBERMET', '国运森']
-  //         },
-  //         yAxis: {
-  //           type: 'value',
-  //           name: '(%)'
-  //         },
-  //         series: [
-  //           {
-  //             name: '损耗',
-  //             type: 'line',
-  //             smooth: true,
-  //             data: newData.dyeLossRate
-  //             // data: [5, 20, 36, 10, 10, 20]
-  //             // data: this.fatherList.dyeLossRate
-  //           }
-  //         ]
-  //       }
-  //        myChart.setOption(option) // 渲染页面
-  //     },
-  //     immediate: true, // 立即监视
-  //     deep: true
-  //   }
-  // }
 }
 </script>
 

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

@@ -1,31 +1,81 @@
 <template>
-  <!-- 染损报表 中的 指定供应商 -->
+  <!-- 染损报表 指定供应商-->
   <div id="someoneLossChart" :style="{ width: '100%', height: '600px' }"></div>
 </template>
 
 <script>
 import * as echarts from 'echarts' //必须有
+
+import { someoneLoss } from '@api/reportForms/dye-loss-table.js'
 export default {
-  name: 'someoneLossChart', // 未筛选供应商，所有供应商染损分析图
+  name: 'SomeoneLossChart', // 指定供应商染损分析图
   data() {
-    return {}
+    return {
+      venName: '',
+      colorArr: [],
+      cinvNameArr: [],
+      cinvNameColorArr: [],
+      // newData: {
+      // cvenNameArr: [],
+      dyeLossRateArr: []
+      // }
+    }
   },
+
   mounted() {
-    this.initEcharts()
+    this.getSomeoneLossData()
   },
   methods: {
+    // 1、先获取 chart 数据
+    getSomeoneLossData() {
+      someoneLoss({ venName: this.venName }).then(res => {
+        if (res.success) {
+          // console.log('this.venName', this.venName)
+          // console.log('指定供应商返回数据', res.result)
+          res.result.forEach(item => {
+            this.cinvNameColorArr.push(item.cinvNameColor)
+            this.dyeLossRateArr.push(item.dyeLossRate)
+          })
+          //截取指定下标数据
+          this.cinvNameColorArr = this.cinvNameColorArr.slice(0, 10)
+          this.dyeLossRateArr = this.dyeLossRateArr.slice(0, 10)
+
+          console.log('物料+颜色chart数组', this.cinvNameColorArr)
+          console.log('染损chart数组', this.dyeLossRateArr)
+        }
+        //2、执行chart
+        this.$nextTick(() => {
+          this.initEcharts()
+          // console.log('111')
+        })
+      })
+    },
+
     initEcharts() {
+      const myChart = echarts.init(document.getElementById('someoneLossChart')) //dark ,深色主题
+      // 配置
       const option = {
         title: {
-          type: 'category',
-          text: '物料染损分析图(指定供应商)'
+          text: '指定供应商物料染损统计图',
+          textStyle: {
+            color: '#5470c6'
+          }
         },
         tooltip: {},
         legend: {
-          data: ['损耗']
+          textStyle: {
+            color: '#5470c6'
+          },
+          data: [
+            {
+              name: '染损',
+              icon: 'circle' // 图例的图标样式
+            }
+          ]
         },
         xAxis: {
-          data: this.list.oooo
+          type: 'category',
+          data: this.cinvNameColorArr
         },
         yAxis: {
           type: 'value',
@@ -33,21 +83,30 @@ export default {
         },
         series: [
           {
-            name: '损耗',
+            name: '染损',
             type: 'line',
             smooth: true,
-            data: [5, 20, 36, 10, 10, 20]
+            data: this.dyeLossRateArr
           }
         ]
       }
-      //深色 ,'dark'
-      const myChart = echarts.init(document.getElementById('someoneLossChart')) // 图标初始化
-      myChart.setOption(option) // 渲染页面
+      // 渲染
+      myChart.setOption(option)
+      //resize方法实现自动缩放
+      window.addEventListener('resize', this.chart.resize)
+    }
+  },
 
-      //随着屏幕大小调节图表
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
+  watch: {
+    // 3、监听数据变化
+    newData: {
+      deep: true,
+      handler() {
+        // 数据变化，执行
+        const { cvenNameArr, dyeLossRateArr } = this.newData
+        this.initEcharts(cvenNameArr, dyeLossRateArr)
+        console.log('333')
+      }
     }
   }
 }

src/views/reportForms/supply-capacity-table.vue

@@ -102,7 +102,7 @@ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import JEllipsis from '@/components/jeecg/JEllipsis'
 import moment from 'moment'
 
-import { supplyCapList } from '@api/reportForms/supply-capacity-table'
+import { supplyCapList, monthlySupplyXls } from '@api/reportForms/supply-capacity-table'
 
 export default {
   name: 'SupplyCapacityTable', // 供应商产能报表
@@ -198,6 +198,7 @@ export default {
   },
   created() {
     this.getSupplyCapList() // 渲染供应链产能报表
+    console.log('000');
   },
 
   methods: {
@@ -205,7 +206,9 @@ export default {
     getSupplyCapList() {
       this.$nextTick(() => {
         supplyCapList(this.queryParam).then(res => {
+           console.log('111');
           if (res.success) {
+             console.log('222');
             console.log('查询结果:', res.result)
             this.supplyCapacityData = res.result
           }
@@ -213,7 +216,15 @@ export default {
       })
     },
     // 月份供应链合计导出
-    monthlySupplyExport() {},
+    monthlySupplyExport() {
+      monthlySupplyXls().then(res => {
+        console.log('000')
+        if (res.success) {
+          console.log('月份供应链合计导出', res.result)
+          console.log('请求接口成功')
+        }
+      })
+    },
     // 月份部门合计导出
     monthlyDepartExport() {},
 

src/views/shipment-details/addShipDetDrawer.vue

@@ -784,9 +784,10 @@ export default {
 /deep/ .ant-table-tbody {
   text-align: center;
 }
-// /deep/ th.replacecolor {
-//   background-color: #ccc;
-// }
+/deep/ th.replacecolor {
+  // background-color: #ccc;
+  display: none;
+}
 
 // 抽屉里的card样式
 /deep/ .ant-drawer-content {