修改ui

2024-07-03 16:28:41 +08:00
--- a/src/views/copilot/components/BarChartBase.vue
+++ b/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);
    },
  },
 };
--- a/src/views/copilot/components/ftoBarChartBase.vue
+++ b/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);
    },
  },
 };
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
+++ b/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);
    },
  },
 };
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
+++ b/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);
    },
  },
 };
--- a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
+++ b/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>
--- a/src/views/copilot/factoryData/components/BarChartBase.vue
+++ b/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,
--- a/src/views/copilot/factoryData/components/BarChartChipOEE.vue
+++ b/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;
--- a/src/views/copilot/factoryData/components/Order.vue
+++ b/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
              }"/>
--- a/src/views/copilot/factoryData/components/ProdMonitor.vue
+++ b/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;
      }
--- a/src/views/copilot/factoryData/components/button.vue
+++ b/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;
--- a/src/views/copilot/factoryData/components/leftContainer.vue
+++ b/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;
  }

--- a/src/views/copilot/factoryData/components/rightContainer.vue
+++ b/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;
--- a/src/views/copilot/factoryData/index.vue
+++ b/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,
--- a/src/views/dashboard/charts/ChipYieldChart.vue
+++ b/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 =
-          ((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
+      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);
--- a/src/views/dashboard/charts/LeftChartBase.vue
+++ b/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: {
--- a/src/views/dashboard/charts/RightChartBase.vue
+++ b/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: {
--- a/src/views/produce/data/lineChart.vue
+++ b/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: {
--- a/src/views/report/components/produceLineYieldBarTarget.vue
+++ b/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>`;
--- a/src/views/report/produceConversion.vue
+++ b/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)