src/views/copilot/components/BarChartBase.vue

@@ -62,7 +62,32 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+          backgroundColor: '#001829',
+          borderColor: '#001829',
+          formatter: params => {
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
+                `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+            }
+            return res;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -188,13 +213,13 @@ export default {
       this.canvasReset()
     },
     isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
+      this.options.series.map((item) => {
         item.barWidth = val ? 18 : 12;
       });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions);
+      this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initChart(this.options);
       // this.actualOptions.series.map((item) => {
       //   item.barWidth = val ? 18 : 12;
       // });
@@ -209,14 +234,14 @@ export default {
         this.initChart(this.options);
         return;
       }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      console.log('actualOptions', this.options)
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data || [];
-      actualOptions.series[1].name = val?.[1]?.name || "";
-      this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      // const actualOptions = JSON.parse(JSON.stringify(this.options));
+      // console.log('actualOptions', this.options)
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val?.[1]?.data || [];
+      this.options.series[1].name = val?.[1]?.name || "";
+      // this.actualOptions = actualOptions;
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -225,7 +250,7 @@ export default {
         this.isFullscreen = screenfull.isFullscreen;
       });
     }
-    this.actualOptions = this.options
+    // this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);
   },
@@ -249,7 +274,7 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.chart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };

src/views/copilot/components/ftoBarChartBase.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-23 15:49:14
- * @LastEditTime: 2024-06-04 08:54:10
+ * @LastEditTime: 2024-07-03 14:08:52
  * @LastEditors: zhp
  * @Description:
 -->
@@ -63,7 +63,32 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+          backgroundColor: '#001829',
+          borderColor: '#001829',
+          formatter: params => {
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
+              `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+            }
+            return res;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -189,13 +214,13 @@ export default {
       this.canvasReset()
     },
     isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
+      this.options.series.map((item) => {
         item.barWidth = val ? 18 : 12;
       });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions);
+      this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
+      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+      this.initChart(this.options);
       // this.actualOptions.series.map((item) => {
       //   item.barWidth = val ? 18 : 12;
       // });
@@ -210,14 +235,14 @@ export default {
         this.initChart(this.options);
         return;
       }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      console.log('actualOptions', this.options)
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val[1].data;
-      actualOptions.series[1].name = val[1].name;
-      this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      // const actualOptions = JSON.parse(JSON.stringify(this.options));
+      // console.log('actualOptions', this.options)
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val[1].data;
+      this.options.series[1].name = val[1].name;
+      // this.actualOptions = actualOptions;
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -226,7 +251,7 @@ export default {
         this.isFullscreen = screenfull.isFullscreen;
       });
     }
-    this.actualOptions = this.options
+    // this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);
   },
@@ -250,7 +275,7 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.ftoChart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };

src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 13:22:43
- * @LastEditTime: 2024-06-17 09:22:17
+ * @LastEditTime: 2024-07-03 14:08:44
  * @LastEditors: zhp
  * @Description:
 -->
@@ -62,7 +62,32 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+          backgroundColor: '#001829',
+          borderColor: '#001829',
+          formatter: params => {
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
+              `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+            }
+            return res;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -241,7 +266,7 @@ export default {
       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions)
+      this.initChart(this.options)
       this.canvasReset()
     },
     series(val) {
@@ -252,14 +277,14 @@ export default {
       // console.log('val', val)
       const actualOptions = JSON.parse(JSON.stringify(this.options))
       console.log(actualOptions)
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data;
-      actualOptions.series[1].name = val?.[1]?.name;
-      actualOptions.series[2].data = val?.[2]?.data || [];
-      actualOptions.series[2].name = val?.[2]?.name || "";
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val?.[1]?.data;
+      this.options.series[1].name = val?.[1]?.name;
+      this.options.series[2].data = val?.[2]?.data || [];
+      this.options.series[2].name = val?.[2]?.name || "";
       this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -273,7 +298,7 @@ export default {
         this.isFullscreen = screenfull.isFullscreen;
       });
     }
-    this.actualOptions = this.options
+    // this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);
   },
@@ -296,7 +321,7 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.oeeChart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };

src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-23 15:50:44
- * @LastEditTime: 2024-06-17 09:23:39
+ * @LastEditTime: 2024-07-03 14:08:12
  * @LastEditors: zhp
  * @Description:
 -->
@@ -62,7 +62,32 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // type: "cross",
+            crossStyle: {
+              color: "rgba(237,237,237,0.5)",
+            },
+          },
+          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+          backgroundColor: '#001829',
+          borderColor: '#001829',
+          formatter: params => {
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
+              `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+            }
+            return res;
+          },
+        },
         xAxis: {
           axisTick: {
             show: false,
@@ -241,7 +266,7 @@ export default {
       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initChart(this.actualOptions)
+      this.initChart(this.options)
       this.canvasReset()
     },
     series(val) {
@@ -250,15 +275,15 @@ export default {
         return;
       }
       console.log(val)
-      const actualOptions = JSON.parse(JSON.stringify(this.options))
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data || [];
-      actualOptions.series[1].name = val?.[1]?.name || "";
-      actualOptions.series[2].data = val?.[2]?.data || [];
-      actualOptions.series[2].name = val?.[2]?.name || "";
-      this.actualOptions = actualOptions;
-      this.initChart(actualOptions);
+      // const actualOptions = JSON.parse(JSON.stringify(this.options))
+      this.options.series[0].data = val[0].data;
+      this.options.series[0].name = val[0].name;
+      this.options.series[1].data = val?.[1]?.data || [];
+      this.options.series[1].name = val?.[1]?.name || "";
+      this.options.series[2].data = val?.[2]?.data || [];
+      this.options.series[2].name = val?.[2]?.name || "";
+      // this.actualOptions = actualOptions;
+      this.initChart(this.options);
     },
   },
   mounted() {
@@ -272,7 +297,7 @@ export default {
         this.isFullscreen = screenfull.isFullscreen;
       });
     }
-    this.actualOptions = this.options
+    // this.actualOptions = this.options
     this.canvasReset();
     window.addEventListener("resize", this.canvasReset);
   },
@@ -295,7 +320,7 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.oeeChart);
-      this.chart.setOption(this.actualOptions);
+      this.chart.setOption(this.options);
     },
   },
 };

src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue

@@ -318,6 +318,8 @@ export default {
   .legend-item {
     margin-left: 15px;
     display: flex;
+    font-size: 16px;
+    // font-weight: 600;
     flex-direction: column;
     // align-items: center;
     align-items: flex-start;
@@ -371,8 +373,6 @@ export default {
   background: #003982;
 }
   .legend-item__value {
-    font-size: 24px;
-    font-weight: 600;
   }
 }
 </style>

src/views/copilot/factoryData/components/BarChartBase.vue

@@ -80,7 +80,7 @@ export default {
               res +=
                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
               `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
-              `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
+              `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
             }
             return res;
           },
@@ -117,6 +117,7 @@ export default {
         yAxis: {
             type: "value",
             name: "单位/片",
+            position: 'left',
             nameTextStyle: {
               color: "rgba(255, 255, 255, 0.7)",
               fontSize: 12,

src/views/copilot/factoryData/components/BarChartChipOEE.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-30 08:58:39
- * @LastEditTime: 2024-07-02 10:53:34
+ * @LastEditTime: 2024-07-03 14:10:06
  * @LastEditors: zhp
  * @Description:
 -->
@@ -110,7 +110,7 @@ export default {
                   "<br/>" +
                   `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
                   `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
-                  `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
+                  `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
               }
               return res;
             },
@@ -132,6 +132,7 @@ export default {
         },
         yAxis: {
           name: "单位/片",
+          position: 'left',
           nameTextStyle: {
             color: "#fff",
             fontSize: 12,
@@ -337,6 +338,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
 .bar-chart-base {
   // position: relative;
 
@@ -350,7 +352,7 @@ export default {
     position: relative;
     // font-size: 12px;
     margin-right:1.2vw;
-
+    color: #DFF1FE;
     &::before {
       content: "";
       display: inline-block;

src/views/copilot/factoryData/components/Order.vue

@@ -40,6 +40,7 @@ export default {
         evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
         data: [],
         rowNum: 12,
+        fontSize:14,
         waitTime: 3000,
         columnWidth: [150],
         align: ["left"],
@@ -113,19 +114,19 @@ export default {
               `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
               }</span>`,
               `<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
-                ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
+                ? this.prodOrder[i].productionProgress.toFixed(0) * 100 + "%"
                 : "0%"
               }</span>
             <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
             <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
               <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
               <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
-                ? this.prodOrder[i].productionProgress.toFixed(0) *
+                ? this.prodOrder[i].productionProgress.toFixed(0) *100 *
                 37.68 *
                 0.01 +
                 "," +
                 (1 -
-                  this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
+                  this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * 100 *
                 37.68
                 : 0 + "," + 37.68
               }"/>

src/views/copilot/factoryData/components/ProdMonitor.vue

@@ -249,7 +249,7 @@ export default {
           // width: 5vw;
           color: #FFFFFF;
           line-height: 24px;
-          text-align: left;
+          // text-align: left;
           font-style: normal;
           display: inline-block;
       }

src/views/copilot/factoryData/components/button.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-06-06 14:22:56
- * @LastEditTime: 2024-06-07 10:53:39
+ * @LastEditTime: 2024-07-02 13:54:08
  * @LastEditors: zhp
  * @Description:
 -->
@@ -62,7 +62,7 @@ button {
   font-size: 16px;
   color: #FFFFFF;
   line-height: 22px;
-  letter-spacing: 5px;
+  /* letter-spacing: 5px; */
   text-align: center;
   font-style: normal;
   letter-spacing: 10px;

src/views/copilot/factoryData/components/leftContainer.vue

@@ -116,7 +116,12 @@ export default {
     border-radius: 2px;
     left: 8%;
     bottom: 0;
-    background: linear-gradient(to right, #024798, transparent);
+     background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 30%,
+      transparent
+    );
     z-index: 0;
   }
 

src/views/copilot/factoryData/components/rightContainer.vue

@@ -79,14 +79,13 @@ export default {
 
 <style scoped lang="scss">
 .copilot-container {
-  height: 0;
+  height: 100%;
   flex: 1;
   display: flex;
   flex-direction: column;
   position: relative;
   box-shadow: inset 0 0 20px 1px #fff1;
   backdrop-filter: blur(4px);
-
   &::before {
     content: "";
     position: absolute;

src/views/copilot/factoryData/index.vue

@@ -196,7 +196,7 @@ export default {
     gap: 16px;
     .flex {
       display: flex;
-      gap: 20px;
+      gap: 16px;
       flex: 1;
     }
     .top > div,

src/views/dashboard/charts/ChipYieldChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-06-14 09:03:26
+ * @LastEditTime: 2024-07-03 15:56:48
  * @LastEditors: zhp
  * @Description:
 -->
@@ -53,7 +53,32 @@ export default {
           top: 0,
           containLabel: true,
         },
-        tooltip: {},
+        tooltip: {
+          trigger: "item",
+          // axisPointer: {
+          //   // type: "cross",
+          //   crossStyle: {
+          //     color: "rgba(237,237,237,0.5)",
+          //   },
+          // },
+          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+          backgroundColor: '#001829',
+          borderColor: '#001829',
+          formatter: params => {
+            console.log('params', params)
+            var res = ``;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                // `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
+                `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+            }
+            console.log('res',res)
+            return res;
+          },
+        },
         title: {
           text: "0%",
           left: "48%",
@@ -223,40 +248,49 @@ export default {
     actualOptions() {
       console.log('this.output.current / this.output.target', this.output.current/this.output.target);
       const year = new Date().getFullYear()
-      const options = JSON.parse(JSON.stringify(this.options));
+      const options = this.options
       // console.log('options', options);
       // 标题
-      if (!this.output.target) options.title.text = "0%";
-      else
-        options.title.text =
+      if (!this.output.target && !this.output.current) options.title.text = "0%";
+      else if (!this.output.target && this.output.current) options.title.text = "100%";
+      else options.title.text =
         ((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
       // 外环
       if (
         this.output.current == this.output.target &&
         this.output.current == 0
       ) {
-        options.series[1].data[0].value = 0;
-        options.series[1].data[1].value = 1;
-        options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
-        options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
+        this.options.series[1].data[0].value = 0;
+        this.options.series[1].data[1].value = 1;
+        this.options.series[1].data[0].tooltip.formatter =
+          `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
+        this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
       } else {
-        options.series[1].data[0].value = this.output.current;
-        options.series[1].data[1].value =
+        this.options.series[1].data[0].value = this.output.current;
+        this.options.series[1].data[1].value =
           this.output.target - this.output.current;
-        options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
-        options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
+        this.options.series[1].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
+        this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
       }
       // 内环
       if (this.output.previous == 0) {
-        options.series[2].data[0].value = 0;
-        options.series[2].data[1].value = 1;
-        options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
-        options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
+        this.options.series[2].data[0].value = 0;
+        this.options.series[2].data[1].value = 1;
+        this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
+        this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
       } else {
-        options.series[2].data[0].value = this.output.previous;
-        options.series[2].data[1].value = 0;
-        options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
-        options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
+        this.options.series[2].data[0].value = this.output.previous;
+        this.options.series[2].data[1].value = 0;
+        this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
+        this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` +
+          `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
       }
       console.log('options', options);
       return options;
@@ -274,6 +308,9 @@ export default {
     factory(val) {
       this.initOptions(this.actualOptions);
     },
+    actualOptions() {
+      this.initOptions(this.actualOptions);
+    }
   },
   mounted() {
     console.log("mounted", this.actualOptions);

src/views/dashboard/charts/LeftChartBase.vue

@@ -73,27 +73,23 @@ export default {
               color: "rgba(237,237,237,0.5)",
             },
           },
-          // backgroundColor: '#000000',
-          // textStyle: {
-          //   color: '#ffff'
-          // }
+          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+          backgroundColor: '#001829',
+          borderColor: '#001829',
           formatter: params => {
-            // console.log(params);
-            // 获取xAxis data中的数据
-            let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
-            params.forEach(item => {
-              let color = item.color.colorStops ? item.color.colorStops[0].color : ''
-              console.log(item.color, color);
-              dataStr += `<div>
-          <div style="margin: 0 8px;">
-            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span>
-            <span>${item.seriesName}</span>
-            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
-          </div>
-        </div>`
-            })
-            return dataStr
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
+                `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
             }
+            return res;
+          },
         },
         xAxis: {
           axisTick: {

src/views/dashboard/charts/RightChartBase.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-06-28 09:28:56
+ * @LastEditTime: 2024-07-03 14:13:59
  * @LastEditors: zhp
  * @Description:
 -->
@@ -79,22 +79,23 @@ export default {
               color: "rgba(237,237,237,0.5)",
             },
           },
+          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+          backgroundColor: '#001829',
+          borderColor: '#001829',
           formatter: params => {
-            // 获取xAxis data中的数据
-            let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
-            params.forEach(item => {
-              let color = Object.prototype.toString.call(item.color) == "[object String]" ? item.color : item.color.colorStops ? item.color.colorStops[0].color : ''
-              console.log(item.color, color);
-              dataStr += `<div>
-          <div style="margin: 0 8px;">
-            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>
-            <span>${item.seriesName}</span>
-            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
-          </div>
-        </div>`
-            })
-            return dataStr
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
+                `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
             }
+            return res;
+          },
         },
         xAxis: {
           axisTick: {

src/views/produce/data/lineChart.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
- * @LastEditors: DY
- * @LastEditTime: 2024-06-24 11:13:48
+ * @LastEditors: zhp
+ * @LastEditTime: 2024-07-03 09:10:05
  * @Description:
 -->
 <template>
@@ -100,7 +100,8 @@ export default {
         },
         tooltip: {
           trigger: 'axis',
-          formatter: function(params) {
+          formatter: function (params) {
+            console.log(params);
             let result = `
             <div style="width: 270px; display: flex">
               <div style="width: 150px">${params[0].name}</div>
@@ -108,6 +109,7 @@ export default {
               <div style="width: 60px">${factoryListabbr[1]}</div>
             </div>`
             const newArray = params.map(p => {
+              console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
               return {
                 glass: p.seriesName.split('-')[0], // 玻璃类型
                 factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
@@ -150,7 +152,7 @@ export default {
         yAxis: [
           {
             type: 'value',
-            name: '单位：个'
+            name: '单位：片'
           }
         ],
         grid: {

src/views/report/components/produceLineYieldBarTarget.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-06-21 09:05:14
- * @LastEditTime: 2024-07-02 08:33:22
+ * @LastEditTime: 2024-07-03 16:07:42
  * @LastEditors: zhp
  * @Description:
 -->
@@ -51,7 +51,7 @@ export default {
             },
           },
           formatter: function (params) {
-            // console.log('params', params)
+            console.log('params', params)
             let arr = []
             var res = ``;
             // for (var i = 0, l = params.length; i < l; i++) {
@@ -64,7 +64,7 @@ export default {
                   ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
                 : params[0].name === "转化效率"
                     ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
-                  : params[0].seriesName.search('总功率') != -1
+                  : params[0].axisValueLabel.search('总功率') != -1
                     ? (params[0].value ? params[0].value : 0) + "MW"
                     : (params[0].value ? params[0].value : 0) + "片"
                 }</span>`;
@@ -78,7 +78,7 @@ export default {
                 ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
                 : params[1].name === "转化效率"
                   ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
-                  : params[1].seriesName.search('总功率') != -1
+                  : params[1].axisValueLabel.search('总功率') != -1
                     ? (params[1].value ? params[1].value : 0) + "MW"
                     : (params[1].value ? params[1].value : 0) + "片"
                 }</span>`;

src/views/report/produceConversion.vue

@@ -215,7 +215,7 @@ export default {
             barWidth: 20,
             label: {
               show: true,
-              position: [-18, -16],
+              position: [0, -16],
               color: "#68C483",
               formatter: function (params) {
                 return params.value
@@ -230,7 +230,7 @@ export default {
             barWidth: 20,
             label: {
               show: true,
-              position: [-18, -16],
+              position: [0, -16],
               color: "#68C483",
               formatter: function (params) {
                 return params.value
@@ -290,7 +290,7 @@ export default {
             barWidth: 20,
             label: {
               show: true,
-              position: [-20, -16],
+              position: [-0, -16],
               color: "#68C483",
               formatter: function (params) {
                 return params.value.toFixed(2)
@@ -305,7 +305,7 @@ export default {
             barWidth: 20,
             label: {
               show: true,
-              position: [10, -16],
+              position: [0, -16],
               color: "#288AFF",
               formatter: function (params) {
                 return params.value.toFixed(2)