Merge pull request '生产数据echarts图重写' (#99) from projects/mescc/dy into projects/mescc/develop

Reviewed-on: #99

src/views/produce/data/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-07-10 09:58:59
- * @LastEditors: zhp
+ * @LastEditTime: 2024-07-16 17:47:40
+ * @LastEditors: DY
  * @Description:
 -->
 <template>
@@ -17,15 +17,15 @@
         </el-form-item>
         <el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
-            start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{  }">
+            start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ firstDayOfWeek: 1 }">
           </el-date-picker>
         </el-form-item>
         <el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
-          <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+          <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
           至
-          <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
+          <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
           <!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
@@ -115,7 +115,7 @@ import moment from 'moment'
 import ButtonNav from '@/components/ButtonNav'
 import basicPage from '@/mixins/basic-page'
 import AddOrUpdate from './add-or-updata'
-import { factoryList, factoryArray } from "@/utils/constants";
+import { factoryList, factoryArray, factoryListabbr } from "@/utils/constants";
 
 export default {
   components: { lineChart, ButtonNav, AddOrUpdate },
@@ -124,7 +124,7 @@ export default {
     return {
       factoryList,
       factoryArray,
-      // factoryArray1,
+      factoryListabbr,
       listQuery: {
         pageSize: 20,
         pageNo: 1,
@@ -253,7 +253,7 @@ export default {
   // },
   created() {
     const today = new Date()
-    const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
+    const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
     this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
     this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
     this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
@@ -385,115 +385,72 @@ export default {
       this.seriesList = []
       // x轴数据
       xAxisData = Object.keys(data)
-      let arr = []
-      if (this.listQuery.factory.length === 0) {
-        arr = this.factoryArray
-      } else {
-        this.listQuery.factory.forEach((ele, index) => {
 
-          let i = this.factoryArray.findIndex((item) => item.id == ele)
-          if (i != -1) {
-            arr.push({
-              id: this.factoryArray[i].id,
-              name: this.factoryArray[i].name
-            })
+      // 构造series
+      // 玻璃类型 ['chipYield', 'componentYield', 'bipvProductOutput']
+      const typeArray = (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) ? [0, 1, 2] : this.listQuery.glass
+      // 工厂名称 this.factoryListabbr
+      const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
+      const seriesArray = []
+      typeArray.forEach((type, typeIndex) => {
+        factoryNameArray.forEach((fac, facIndex) => {
+          const series = {
+            data: Array(xAxisData.length).fill(0),
+            type: 'bar',
+            stack: String(fac),
+            barWidth: 16,
+            itemStyle: {
+              color: this.colorList[type]
+            },
+            name: this.factoryListabbr[fac] + '-' + type
           }
+          seriesArray.push(series)
         })
+      })
+      // 构造series的data
+      const seriesDataArray = []
+      Object.values(data).forEach((item) => {
+        let seriesData = []
+        // item[0].datestr 为日期
+        typeArray.forEach(t => {
+          const zidr = ['chipYield', 'componentYield', 'bipvProductOutput'][t]
+          item.forEach(it => {
+            seriesData.push(it[zidr]) 
+          })
+        })
+        seriesDataArray.push(seriesData)
+      })
+      for (let y = 0; y < seriesArray.length; y ++) {
+        const days = []
+        seriesDataArray.forEach(a => {
+          days.push(a[y])
+        })
+        // 赋值完成
+        seriesArray[y].data = days
       }
 
-      // y轴数据
-      arr.forEach((fac,index) => {
-        console.log('fac',fac);
-        let i = 0
-        let position = fac.id == 1 ? [1, -16,] : [-8, -16,]
-        while ( i < 3) {
-          // 下标
-          const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
-          // let oneChart = {}
-          xAxisData.forEach((x, index) => {
-            if (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) {
-              let series = {
-                name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
-                type: 'bar',
-                stack: String(fac.id),
-                data: Array(xAxisData.length).fill(0),
-                 barWidth: 16,
-                itemStyle: {
-                  color: this.colorList[i]
-                },
-                label: {
-                  show: i === 2 ? true : false,
-                  position: 'top',
-                  // fontSize:10,
-                  position: position,
-                  formatter(params) {
-                    return fac.name.substring(0, 2)
-                  }
-                }
-              }
-              dataList.forEach(item => {
-                if (fac.id === item.factory && item.datestr === x) {
-                  series.data[index] = item[index1]
-                }
-              })
-              this.seriesList.push(series)
-            } else {
-              this.listQuery.glass.forEach(gl => {
-                if (gl === i) {
-                  let series = {
-                    name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
-                    type: 'bar',
-                    stack: String(fac.id),
-                    data: Array(xAxisData.length).fill(0),
-                     barWidth: 16,
-                    itemStyle: {
-                      color: this.colorList[i]
-                    },
-                    label: {
-                      show: true,
-                      position: 'top',
-                      position: position,
-                      formatter(params) {
-                        if (params.value === 0) {
-                          return ''
-                        } else {
-                          // return ['瑞昌', '邯郸'][params.seriesName.split('-')[1]]
-                          return fac.name.substring(0, 2)
-                        }
-                      }
-                    }
-                  }
-                  dataList.forEach(item => {
-                    if (fac.id === item.factory && item.datestr === x) {
-                      series.data[index] = item[index1]
-                    }
-                  })
-                  this.seriesList.push(series)
-                }
-              })
+      // 添加工厂
+      const validSeriesArray = []
+      factoryNameArray.forEach(f => {
+        const s = {
+          name: '显示工厂',
+          data: Array(xAxisData.length).fill(0),
+          type: 'bar',
+          stack: String(f),
+          barWidth: 16,
+          label: {
+            show: true,
+            position: 'top',
+            // position: f > 0 ?  [2, -16] : [-10, -16],
+            formatter(params) {
+              return factoryListabbr[f]
             }
-            // let series = {
-            //   name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
-            //   type: 'bar',
-            //   stack: String(fac.id),
-            //   data: Array(xAxisData.length).fill(0),
-            //    barWidth: 16,
-            //   itemStyle: {
-            //     color: this.colorList[i]
-            //   }
-            // }
-            // dataList.forEach(item => {
-            //   if (fac.id === item.factory && item.datestr === x) {
-            //     series.data[index] = item[index1]
-            //   }
-            // })
-            // this.seriesList.push(series)
-          })
-          i ++
+          }
         }
+        validSeriesArray.push(s)
       })
-      console.log('你好', this.seriesList)
-      this.$refs.lineChart.initChart(xAxisData, this.seriesList,arr)
+      this.seriesList = [...seriesArray, ...validSeriesArray]
+      this.$refs.lineChart.initChart(xAxisData, this.seriesList, factoryNameArray)
     },
 		buttonClick(val) {
 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;

src/views/produce/data/lineChart.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
- * @LastEditors: zhp
- * @LastEditTime: 2024-07-04 09:37:49
+ * @LastEditors: DY
+ * @LastEditTime: 2024-07-16 18:41:27
  * @Description:
 -->
 <template>
@@ -73,7 +73,7 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart(xAxis, seriesList,arr) {
+    initChart(xAxis, seriesList, facs) {
       if (xAxis.length === 0) {
         this.chart.clear()
       }
@@ -93,9 +93,9 @@ export default {
           itemHeight: 10,
           itemGap: 40,
           formatter(name) {
-            return name.split('-')[0]
+            return ['玻璃芯片', '标准组件', 'BIPV'][name.split('-')[1]]
           },
-          data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
+          data: ['瑞昌-0', '瑞昌-1', '瑞昌-2']
         },
         tooltip: {
           trigger: 'axis',
@@ -103,48 +103,41 @@ export default {
             type: 'shadow',
             color: "rgba(237,237,237,0.5)"
           },
-          formatter: function (params) {
-            // console.log(params)
+          formatter(params) {
             let str = ''
-            arr.forEach(ele => {
-              str += `<div style="width: 60px; text-align: right">${ele.name.substring(0, 2) }</div>`
+            facs.forEach(ele => {
+              str += `<div style="width: 60px; text-align: right">${ factoryListabbr[ele] }</div>`
             })
-            console.log(str);
             let result = `
             <div style="width: 270px; display: flex">
               <div style="width: 150px">${params[0].name}</div>
-               ${str}
+              ${ str }
             </div>`
-            const newArray = params.map(p => {
-              console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
-              return {
-                glass: p.seriesName.split('-')[0], // 玻璃类型
-                factoryName: arr[p.seriesName.split('-')[1]], // 工厂名称
-                value: p.value,
-                name: p.name,
-                marker: p.marker,
-                color: p.color
+            const analyzeArray = params.filter(p => p.seriesName !== '显示工厂').map(item => {
+              const obj = {
+                glass: ['玻璃芯片', '标准组件', 'BIPV'][item.seriesName.split('-')[1]], // 玻璃类型
+                factoryName: item.seriesName.split('-')[0], // 工厂名称
+                value: item.value,
+                name: item.name,
+                marker: item.marker,
+                color: item.color
               }
+              return obj
             })
-            const analyzeList = Object.groupBy(newArray, (member) => member.glass)
+            const analyzeList = Object.groupBy(analyzeArray, (member) => member.glass)
             for (let g in analyzeList) {
               // date => 玻璃类型
               let oneData = `<div style="width: 270px; display: flex">
               <div style="width: 150px; display: flex; align-items: center">
               <div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
               <div>${g}</div></div>`
-              for (let fac of arr) {
                 let goodNum = 0
-                for (let ana of analyzeList[g]) {
-                  if (ana.factoryName === fac && ana.value !== 0) {
-                    goodNum = ana.value
-                  }
-                }
+              for (let ana of analyzeList[g]) {
+                goodNum = ana.value
                 oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
               }
               result = result + oneData + '</div>'
             }
-            // console.log('result', result);
             return result
           }
         },