src/views/index.vue

@@ -70,7 +70,7 @@ const LOCATIONS = [
   // 蚌埠2
   // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
   // 江西 瑞昌
-  { x: 60, y: 58, tx: 68, ty: 50,lx:61,ly:61.5,ltx:69.5,lty:51.2, path: 'factoryData/factory-data' },
+  { x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
   // 湖南 株洲
   // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
   // 邯郸

src/views/produce/data/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-07-17 08:55:15
+ * @LastEditTime: 2024-07-10 09:58:59
  * @LastEditors: zhp
  * @Description:
 -->
@@ -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="{ firstDayOfWeek: 1 }">
+            start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{  }">
           </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-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
+          <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
             style="width: 180px" @change="onValueChange">
           </el-date-picker>
           至
-          <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy-MM-dd" placeholder="选择周" :picker-options="{ firstDayOfWeek: 1 }"
+          <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
             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, factoryListabbr } from "@/utils/constants";
+import { factoryList, factoryArray } from "@/utils/constants";
 
 export default {
   components: { lineChart, ButtonNav, AddOrUpdate },
@@ -124,7 +124,7 @@ export default {
     return {
       factoryList,
       factoryArray,
-      factoryListabbr,
+      // factoryArray1,
       listQuery: {
         pageSize: 20,
         pageNo: 1,
@@ -253,7 +253,7 @@ export default {
   // },
   created() {
     const today = new Date()
-    const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
+    const sevenDaysAgo = new Date(today.getTime() - (7 * 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,72 +385,115 @@ 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) => {
 
-      // 构造series
+          let i = this.factoryArray.findIndex((item) => item.id == ele)
-      // 玻璃类型 ['chipYield', 'componentYield', 'bipvProductOutput']
+          if (i != -1) {
-      const typeArray = (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) ? [0, 1, 2] : this.listQuery.glass
+            arr.push({
-      // 工厂名称 this.factoryListabbr
+              id: this.factoryArray[i].id,
-      const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
+              name: this.factoryArray[i].name
-      const seriesArray = []
+            })
-      typeArray.forEach((type, typeIndex) => {
+          }
-        factoryNameArray.forEach((fac, facIndex) => {
+        })
-          const series = {
+      }
-            data: Array(xAxisData.length).fill(0),
+
+      // 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),
+                stack: String(fac.id),
+                data: Array(xAxisData.length).fill(0),
                  barWidth: 16,
                 itemStyle: {
-              color: this.colorList[type]
+                  color: this.colorList[i]
                 },
-            name: this.factoryListabbr[fac] + '-' + type
+                label: {
+                  show: i === 2 ? true : false,
+                  position: 'top',
+                  // fontSize:10,
+                  position: position,
+                  formatter(params) {
+                    return fac.name.substring(0, 2)
                   }
-          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
                 }
-
+              }
-      // 添加工厂
+              dataList.forEach(item => {
-      const validSeriesArray = []
+                if (fac.id === item.factory && item.datestr === x) {
-      factoryNameArray.forEach(f => {
+                  series.data[index] = item[index1]
-        const s = {
+                }
-          name: '显示工厂',
+              })
-          data: Array(xAxisData.length).fill(0),
+              this.seriesList.push(series)
+            } else {
+              this.listQuery.glass.forEach(gl => {
+                if (gl === i) {
+                  let series = {
+                    name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
                     type: 'bar',
-          stack: String(f),
+                    stack: String(fac.id),
+                    data: Array(xAxisData.length).fill(0),
                      barWidth: 16,
+                    itemStyle: {
+                      color: this.colorList[i]
+                    },
                     label: {
                       show: true,
                       position: 'top',
-            // position: f > 0 ?  [2, -16] : [-10, -16],
+                      position: position,
                       formatter(params) {
-              return factoryListabbr[f]
+                        if (params.value === 0) {
+                          return ''
+                        } else {
+                          // return ['瑞昌', '邯郸'][params.seriesName.split('-')[1]]
+                          return fac.name.substring(0, 2)
                         }
                       }
                     }
-        validSeriesArray.push(s)
+                  }
+                  dataList.forEach(item => {
+                    if (fac.id === item.factory && item.datestr === x) {
+                      series.data[index] = item[index1]
+                    }
                   })
-      this.seriesList = [...seriesArray, ...validSeriesArray]
+                  this.seriesList.push(series)
-      this.$refs.lineChart.initChart(xAxisData, this.seriesList, factoryNameArray)
+                }
+              })
+            }
+            // 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 ++
+        }
+      })
+      console.log('你好', this.seriesList)
+      this.$refs.lineChart.initChart(xAxisData, this.seriesList,arr)
     },
 		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: DY
+ * @LastEditors: zhp
- * @LastEditTime: 2024-07-16 18:41:27
+ * @LastEditTime: 2024-07-04 09:37:49
  * @Description:
 -->
 <template>
@@ -73,7 +73,7 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart(xAxis, seriesList, facs) {
+    initChart(xAxis, seriesList,arr) {
       if (xAxis.length === 0) {
         this.chart.clear()
       }
@@ -93,9 +93,9 @@ export default {
           itemHeight: 10,
           itemGap: 40,
           formatter(name) {
-            return ['玻璃芯片', '标准组件', 'BIPV'][name.split('-')[1]]
+            return name.split('-')[0]
           },
-          data: ['瑞昌-0', '瑞昌-1', '瑞昌-2']
+          data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
         },
         tooltip: {
           trigger: 'axis',
@@ -103,41 +103,48 @@ export default {
             type: 'shadow',
             color: "rgba(237,237,237,0.5)"
           },
-          formatter(params) {
+          formatter: function (params) {
+            // console.log(params)
             let str = ''
-            facs.forEach(ele => {
+            arr.forEach(ele => {
-              str += `<div style="width: 60px; text-align: right">${ factoryListabbr[ele] }</div>`
+              str += `<div style="width: 60px; text-align: right">${ele.name.substring(0, 2) }</div>`
             })
+            console.log(str);
             let result = `
             <div style="width: 270px; display: flex">
               <div style="width: 150px">${params[0].name}</div>
-              ${ str }
+               ${str}
             </div>`
-            const analyzeArray = params.filter(p => p.seriesName !== '显示工厂').map(item => {
+            const newArray = params.map(p => {
-              const obj = {
+              console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
-                glass: ['玻璃芯片', '标准组件', 'BIPV'][item.seriesName.split('-')[1]], // 玻璃类型
+              return {
-                factoryName: item.seriesName.split('-')[0], // 工厂名称
+                glass: p.seriesName.split('-')[0], // 玻璃类型
-                value: item.value,
+                factoryName: arr[p.seriesName.split('-')[1]], // 工厂名称
-                name: item.name,
+                value: p.value,
-                marker: item.marker,
+                name: p.name,
-                color: item.color
+                marker: p.marker,
+                color: p.color
               }
-              return obj
             })
-            const analyzeList = Object.groupBy(analyzeArray, (member) => member.glass)
+            const analyzeList = Object.groupBy(newArray, (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
+                  }
+                }
                 oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
               }
               result = result + oneData + '</div>'
             }
+            // console.log('result', result);
             return result
           }
         },