生产数据管理

src/views/produce/data/lineChart.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
  * @LastEditors: DY
- * @LastEditTime: 2024-05-30 14:52:05
+ * @LastEditTime: 2024-06-19 15:13:23
  * @Description:
 -->
 <template>
@@ -16,6 +16,8 @@
 import * as echarts from 'echarts'
 import 'echarts/theme/macarons' // echarts theme
 import resize from '@/mixins/resize'
+import { factoryListabbr } from "@/utils/constants";
+
 export default {
   name: 'OverviewBar',
   mixins: [resize],
@@ -72,35 +74,68 @@ export default {
   },
   methods: {
     initChart(xAxis, seriesList) {
-      this.chart = echarts.init(document.getElementById(this.id))
-      console.log(this.$parent);
-      this.chart.setOption({
+      console.log('2', xAxis, seriesList)
+      if (xAxis.length === 0) {
+        this.chart.clear()
+      }
+      else {
+        this.chart = echarts.init(document.getElementById(this.id))
+        console.log(this.$parent);
+        this.chart.setOption({
         title: {
           text: '',
           // subtext: 'Fake Data'
         },
-        tooltip: {
-          trigger: 'axis'
-        },
-        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
         legend: {
-          // data: ['工厂1', '工厂2'],
           right: '90px',
           top: '0%',
           icon: 'rect',
           itemWidth: 10,
           itemHeight: 10,
           itemGap: 40,
+          formatter(name) {
+            return name.split('-')[0]
+          },
+          data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
         },
-        // toolbox: {
-        //   show: true,
-        //   feature: {
-        //     dataView: { show: true, readOnly: false },
-        //     magicType: { show: true, type: ['line', 'bar'] },
-        //     restore: { show: true },
-        //     saveAsImage: { show: true }
-        //   }
-        // },
+        tooltip: {
+          trigger: 'axis',
+          formatter: function(params) {
+            let result = `
+            <div style="width: 270px; display: flex">
+              <div style="width: 150px">${params[0].name}</div>
+              <div style="width: 60px">${factoryListabbr[0]}</div>
+              <div style="width: 60px">${factoryListabbr[1]}</div>
+            </div>`
+            const newArray = params.map(p => {
+              return {
+                glass: p.seriesName.split('-')[0], // 玻璃类型
+                factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
+                value: p.value,
+                name: p.name,
+                marker: p.marker
+              }
+            })
+            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">${analyzeList[g][0].marker} ${g}</div>`
+              for (let fac of factoryListabbr) {
+                let goodNum = 0
+                for (let ana of analyzeList[g]) {
+                  if (ana.factoryName === fac && ana.value !== 0) {
+                    goodNum = ana.value
+                  }
+                }
+                oneData += `<div style="width: 60px">${goodNum}</div>`
+              }
+              result = result + oneData + '</div>'
+            }
+            return result
+          }
+        },
+        grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
         calculable: true,
         xAxis: [
           {
@@ -123,12 +158,17 @@ export default {
         },
         series: seriesList
       }, true)
+      }
     }
   }
 }
 </script>
 
 <style scoped>
+.chartTooltipSpan {
+  width: 50px;
+  background: #787878;
+}
 /* .reportChart {
   position: absolute;
   height: 100%;