Merge pull request 'projects/mescc/zhp' (#15) from projects/mescc/zhp into projects/mescc/develop

Reviewed-on: #15

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-05-10 08:42:44
+ # @LastEditTime: 2024-05-11 08:52:30
  # @LastEditors: zhp
  # @Description:
 ###

src/mixins/chart.js

@@ -1,20 +1,19 @@
 import * as echarts from "echarts";
 
 function __resizeHandler(entries) {
-  console.log(entries);
   for (const entry of entries) {
     if (entry.contentBoxSize) {
       // manipulate contentBoxSize
-      const contentBoxSize = Array.isArray(entry.contentBoxSize)
+      // const contentBoxSize = Array.isArray(entry.contentBoxSize)
-        ? entry.contentBoxSize[0]
+      //   ? entry.contentBoxSize[0]
-        : entry.contentBoxSize;
+      //   : entry.contentBoxSize;
-      this.chart_mixin_chartInstance.resize({
+      // this.chart_mixin_chartInstance.resize({
-        width:
+      //   width:
-          contentBoxSize.inlineSize < this.MIN_WIDTH
+      //     contentBoxSize.inlineSize < this.MIN_WIDTH
-            ? this.MIN_WIDTH
+      //       ? this.MIN_WIDTH
-            : contentBoxSize.inlineSize,
+      //       : contentBoxSize.inlineSize,
-        height: contentBoxSize.blockSize,
+      //   height: contentBoxSize.blockSize,
-      });
+      // });
     } else {
       // manipulate contentRect
       this.chart_mixin_chartInstance.resize({

src/store/modules/home.js

@@ -29,10 +29,12 @@ const state = {
         target: [],
         current: [],
         previous: [],
+        outputNumber:[],
       },
       stdRate: {
         target: [],
         current: [],
+        outputNumber:[]
       },
     },
   },
@@ -112,11 +114,8 @@ const actions = {
       targetList = data
     }
     let factoryData = factoryList.prodOutputResultDO ? factoryList.prodOutputResultDO : factoryList.prodOutputRateDO
-    let targetData = targetList.ProdTargetDO ? targetList.ProdTargetDO : targetList.ProdTargetDO
+    let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
-    console.log(factoryList.ProdOutputDO)
-    console.log('ryf',factoryList)
     const payload = handler(factoryData, targetData)
-    console.log(payload)
     commit("SET_COPILOT_INFO", { type, payload });
   },
 };
@@ -129,7 +128,7 @@ export default {
 };
 
 function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
-  console.log('工厂',factoryListResponse);
+  console.log('工厂',targetListResponse);
   // console.log('工厂',factoryListResponse);
 
   // 初始数据
@@ -186,9 +185,6 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
   // ];
   if (factoryListResponse) {
     for (const factory of factoryListResponse) {
-        if (factory.glassType === 1) {
-        console.log(factory.yieldRate)
-      }
       const fId = getFactoryId(factory);
       // 获取目标值
       if (targetListResponse) {
@@ -197,23 +193,25 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
           componentYieldRate,
           chipOee,
           componentConversionEfficiency,
+          componentYield
         } = getFactoryTargetValueA(targetListResponse, fId);
-        stdRate.target[fId] = chipYieldRate;
+        stdRate.target[fId] =  componentYieldRate
-        chipRate.target[fId] = componentYieldRate;
+        chipRate.target[fId] = chipYieldRate
       }
       // 芯片OEE
-      chipOee.current[fId] = factory.oee * 100 || random_default();
+      chipOee.current[fId] = factory.oee * 100 ;
-      chipOee.previous[fId] = factory.previousYearOee * 100 || random_default();
+      chipOee.previous[fId] = factory.previousYearOee * 100 ;
       // 转化效率
       transformRate.current[fId] =
-        factory.componentConversionEfficiency * 100 || random_default();
+        factory.componentConversionEfficiency * 100 ;
       transformRate.previous[fId] =
-        factory.previousYearComponentConversionEfficiency * 100 || random_default();
+        factory.previousYearComponentConversionEfficiency * 100 ;
       // 芯片良率 与 标准组件良率
       if (![0, 1].includes(factory.glassType)) continue;
-      const _t = [chipRate, stdRate][factory.glassType];
+      const _t = [chipRate, stdRate][factory.glassType]
-      _t.current[fId] = factory.yieldRate || random_default();
+      console.log('_t',_t);
-      _t.previous[fId] = factory.previousYearYieldRate || random_default();
+      _t.current[fId] = factory.yieldRate ;
+      _t.previous[fId] = factory.previousYearYieldRate ;
     }
 
     return {
@@ -295,16 +293,18 @@ function getFactoryTargetValue(targetList, factoryId) {
  * @returns
  */
 function getFactoryTargetValueA(targetList, factoryId) {
-  const target = targetList.find((item) => item.factory === factoryId);
+  const target = targetList.find((item) => item.factory === factoryId)
   if (target) {
     return {
       chipYieldRate: target.chipYieldRate ?? random_default(),
       componentYieldRate: target.componentYieldRate ?? random_default(),
+      componentYield: target.componentYield ?? random_default(),
     };
   }
   return {
-    chipYieldRate: random_default(),
+    chipYieldRate:0,
-    componentYieldRate: random_default(),
+    componentYieldRate:0,
+    componentYield:0 ,
   };
 }
 

src/views/copilot/components/LineChartBase.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: LineChartBase.vue
     author: liubin
     date: 2024-04-30 08:59:28
-    description: 
+    description:
 -->
 
 <template>
@@ -10,7 +10,7 @@
     <div class="legend">
       <span
         v-for="item in legend"
-        :key="item.label" 
+        :key="item.label"
         class="legend-item"
         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
         >{{ item.label }}</span
@@ -28,7 +28,7 @@
 import screenfull from "screenfull";
 import ChartContainer from "./ChartContainer.vue";
 import chartMixin from "@/mixins/chart.js";
-
+import * as echarts from "echarts";
 export default {
   name: "LineChartBase",
   components: {
@@ -38,7 +38,7 @@ export default {
   props: {
     vHeight: {
       type: Number,
-      default: 34,
+      default: 38,
     },
     legend: {
       type: Array,
@@ -69,116 +69,300 @@ export default {
           top: "15%",
           containLabel: true,
         },
-        tooltip: {},
+        // title: {
-        xAxis: {
+        //   text: 'Stacked Area Chart'
-          axisTick: {
+        // },
-            show: false,
+        tooltip: {
-          },
+          trigger: 'axis',
-          axisLine: {
+          axisPointer: {
-            lineStyle: {
+            type: 'cross',
-              color: "#4561AE",
+            label: {
-            },
+              backgroundColor: '#6a7985'
-          },
+            }
-          axisLabel: {
+          }
-            color: "#fff",
-            fontSize: 12,
-          },
-          data: this.xAxis,
         },
-        yAxis: {
+        // legend: {
-          name: "单位/片",
+        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
-          nameTextStyle: {
+        // },
-            color: "#fff",
+        toolbox: {
-            fontSize: 12,
+          feature: {
-          },
+            saveAsImage: {}
-          axisTick: {
+          }
-            show: false,
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
-          splitLine: {
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
         },
-        series: [
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
           {
-            name: "", // this.series[0].name,
+            type: 'category',
-            type: "bar",
+            boundaryGap: false,
-            barWidth: 12,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-            itemStyle: {
+          }
-              borderRadius: [10, 10, 0, 0],
+        ],
-              color: {
+        yAxis: [
-                type: "linear",
+          {
-                x: 0,
+            min: function () { // 取最小值向下取整为最小刻度
-                y: 0,
+              return 0
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#12f7f1", // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.35,
-                    color: "#12f7f177", // 100% 处的颜色
-                  },
-                  {
-                    offset: 0.75,
-                    color: "#12f7f133", // 100% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "transparent", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
             },
-            data: [], // this.series[0].data,
+            max: function (value) { // 取最大值向上取整为最大刻度
-          },
+            },
-          {
+            scale: true,
-            name: "", // this.series[1].name,
+            type: 'value',
-            type: "bar",
+            name: 'kw/h',
-            barWidth: 12,
+            // max: 100,//最大值
-            // tooltip: {
+            // min: 0,//最小值
-            //   valueFormatter: function (value) {
+            // interval: 20,//间隔
-            //     return value + " ml";
+            nameTextStyle: {// y轴上方单位的颜色
-            //   },
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              align: "right",
+              padding: [0, 0, 0, 2]
+            },
+            // position: 'left',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                // type: 'solid',
+                color: '#25528f',
+                // width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              fontSize: 12,
+              // formatter: '{value}'
+              formatter: '{value}'
+              // }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#25528f'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[0]
+            //   }
             // },
-            itemStyle: {
-              borderRadius: [10, 10, 0, 0],
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#57abf8", // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "#364BFE66", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
-            data: [], // this.series[1].data,
           },
         ],
+        series: [
+          {
+            name: '瑞昌',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8167F6'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8167F6', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8167F6' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '邯郸',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#2760FF'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#2760FF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#2760FF' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '株洲',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#5996F7'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#5996F7', //改变折线点的颜色
+                lineStyle: {
+                  color: '#5996F7' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '佳木斯',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8BC566'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8BC566', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8BC566' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '成都',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#11FAF0'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#11FAF0', //改变折线点的颜色
+                lineStyle: {
+                  color: '#11FAF0' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '凯盛',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F3C000'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F3C000', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F3C000' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '蚌埠',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F38600'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F38600', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F38600' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+        ]
       },
     };
   },
@@ -233,7 +417,7 @@ export default {
   .legend-item {
     position: relative;
     // font-size: 12px;
-    margin-right: 0.67vw;
+    margin-right: 2vw;
 
     &::before {
       content: "";
@@ -260,37 +444,37 @@ export default {
 
   .legend-item:nth-child(1):after,
   .legend-item:nth-child(1):before {
-    background-color: #fad162;
+    background-color: #8167F6;
   }
 
   .legend-item:nth-child(2):after,
   .legend-item:nth-child(2):before {
-    background-color: #2160f3;
+    background-color: #2760FF;
   }
 
   .legend-item:nth-child(3):after,
   .legend-item:nth-child(3):before {
-    background-color: #13dbf3;
+    background-color: #5996F7;
   }
 
   .legend-item:nth-child(4):after,
   .legend-item:nth-child(4):before {
-    background-color: #88ca67;
+    background-color: #8BC566;
   }
 
   .legend-item:nth-child(5):after,
   .legend-item:nth-child(5):before {
-    background-color: #5c97fc;
+    background-color: #11FAF0;
   }
 
   .legend-item:nth-child(6):after,
   .legend-item:nth-child(6):before {
-    background-color: #f48900;
+    background-color: #F3C000;
   }
 
   .legend-item:nth-child(7):after,
   .legend-item:nth-child(7):before {
-    background-color: #776bf0;
+    background-color: #F38600;
   }
 }
 </style>

src/views/copilot/components/LineChartWater.vue

@@ -0,0 +1,481 @@
+
+<!--
+    filename: LineChartBase.vue
+    author: liubin
+    date: 2024-04-30 08:59:28
+    description:
+-->
+
+<template>
+  <chart-container class="line-chart-base">
+    <div class="legend">
+      <span
+        v-for="item in legend"
+        :key="item.label"
+        class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
+        >{{ item.label }}</span
+      >
+    </div>
+    <div
+      ref="chart"
+      style="max-width: 50vw"
+      :style="{ height: vHeight + 'vh' }"
+    ></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "./ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
+export default {
+  name: "LineChartBase",
+  components: {
+    ChartContainer,
+  },
+  mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 38,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    in: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "3%",
+          top: "15%",
+          containLabel: true,
+        },
+        // title: {
+        //   text: 'Stacked Area Chart'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        // legend: {
+        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        // },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            min: function () { // 取最小值向下取整为最小刻度
+              return 0
+            },
+            max: function (value) { // 取最大值向上取整为最大刻度
+            },
+            scale: true,
+            type: 'value',
+            name: 'kw/h',
+            // max: 100,//最大值
+            // min: 0,//最小值
+            // interval: 20,//间隔
+            nameTextStyle: {// y轴上方单位的颜色
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              align: "right",
+              padding: [0, 0, 0, 2]
+            },
+            // position: 'left',
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                // type: 'solid',
+                color: '#25528f',
+                // width: '1' // 坐标线的宽度
+              }
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
+              fontSize: 12,
+              // formatter: '{value}'
+              formatter: '{value}'
+              // }
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#25528f'
+              }
+            }
+            // type: 'value'
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: colors[0]
+            //   }
+            // },
+          },
+        ],
+        series: [
+          {
+            name: '瑞昌',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8167F6'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8167F6', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8167F6' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '邯郸',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#2760FF'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#2760FF', //改变折线点的颜色
+                lineStyle: {
+                  color: '#2760FF' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '株洲',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#5996F7'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#5996F7', //改变折线点的颜色
+                lineStyle: {
+                  color: '#5996F7' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '佳木斯',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#8BC566'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#8BC566', //改变折线点的颜色
+                lineStyle: {
+                  color: '#8BC566' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '成都',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#11FAF0'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#11FAF0', //改变折线点的颜色
+                lineStyle: {
+                  color: '#11FAF0' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '凯盛',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F3C000'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F3C000', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F3C000' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '蚌埠',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#F38600'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(255, 234, 153, 0)'
+                }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                color: '#F38600', //改变折线点的颜色
+                lineStyle: {
+                  color: '#F38600' //改变折线颜色
+                }
+              }
+            },
+            // emphasis: {
+            //   focus: 'series'
+            // },
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+        ]
+      },
+    };
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      this.actualOptions.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.initOptions(this.actualOptions);
+    },
+    series(val) {
+      if (!val) {
+        this.initOptions(this.options);
+        return;
+      }
+      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 || "";
+      this.actualOptions = actualOptions;
+      this.initOptions(actualOptions);
+    },
+  },
+  mounted() {
+    this.actualOptions = this.options;
+    this.initOptions(this.options);
+
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 1vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 2vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0.432vw;
+      height: 0.432vw;
+      border-radius: 100%;
+      margin-right: 0.4vw;
+    }
+
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 1vw;
+      height: 0.125vw;
+      position: absolute;
+      top: 54%;
+      left: -15%;
+      transform: translateY(-50%);
+      border-radius: 100;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):after,
+  .legend-item:nth-child(1):before {
+    background-color: #8167F6;
+  }
+
+  .legend-item:nth-child(2):after,
+  .legend-item:nth-child(2):before {
+    background-color: #2760FF;
+  }
+
+  .legend-item:nth-child(3):after,
+  .legend-item:nth-child(3):before {
+    background-color: #5996F7;
+  }
+
+  .legend-item:nth-child(4):after,
+  .legend-item:nth-child(4):before {
+    background-color: #8BC566;
+  }
+
+  .legend-item:nth-child(5):after,
+  .legend-item:nth-child(5):before {
+    background-color: #11FAF0;
+  }
+
+  .legend-item:nth-child(6):after,
+  .legend-item:nth-child(6):before {
+    background-color: #F3C000;
+  }
+
+  .legend-item:nth-child(7):after,
+  .legend-item:nth-child(7):before {
+    background-color: #F38600;
+  }
+}
+</style>

src/views/copilot/efficiency/components/StdRate.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 08:44:21
+ * @LastEditTime: 2024-05-11 14:51:07
  * @LastEditors: zhp
  * @Description:
 -->
@@ -28,21 +28,68 @@ export default {
       default: "日",
     },
   },
+  computed: {
+    cities() {
+      console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
+      // let getterName = "";
+      // switch (this.dataSource) {
+      //   case "标准组件产出":
+      //     getterName = "stdOutput";
+      //     break;
+      //   case "芯片产出":
+      //     getterName = "chipOutput";
+      //     break;
+      //   case "BIPV产出":
+      //     getterName = "bipvOutput";
+      //     break;
+      // }
+      const _cities = [
+        { name: "瑞昌", target: 0, total: 0, current: 0, componentYield: 0, goodNumber:0,},
+        { name: "邯郸", target: 0, total: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+        { name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
+      ]
+      if (this.$store.getters.copilot?.efficiency.stdRate?.previous) {
+        this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach(
+          (v, idx) => {
+            _cities[idx].previous = v ?? 0;
+          }
+        );
+      }
+      if (this.$store.getters.copilot?.efficiency.stdRate?.target) {
+        this.$store.getters.copilot?.efficiency.stdRate?.target.forEach(
+          (v, idx) => {
+            _cities[idx].target = v ?? 0;
+          }
+        )
+      }
+      if (this.$store.getters.copilot?.efficiency.stdRate?.current) {
+        this.$store.getters.copilot?.efficiency.stdRate?.current.forEach(
+          (v, idx) => {
+            _cities[idx].current = v ?? 0;
+          }
+        );
+      }
+      // 删掉凯盛光伏
+      // _cities.splice(4, 1);
+      return _cities;
+    },
+  },
   data() {
     return {
-      cities: [
+      // cities: [
-        { name: "瑞昌", target: 100, total: 200, thisYear: 20 },
+      //   { name: "瑞昌", target: 100, total: 200, current: 20 },
-        { name: "邯郸", target: 200, total: 300, thisYear: 20 },
+      //   { name: "邯郸", target: 200, total: 300, current: 20 },
-        { name: "株洲", target: 300, total: 400, thisYear: 20 },
+      //   { name: "株洲", target: 300, total: 400, current: 20 },
-        { name: "佳木斯", target: 400, total: 500, thisYear: 20 },
+      //   { name: "佳木斯", target: 400, total: 500, current: 20 },
-        { name: "成都", target: 500, total: 600, thisYear: 20 },
+      //   { name: "成都", target: 500, total: 600, current: 20 },
-        { name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
+      //   { name: "凯盛光伏", target: 400, total: 500, current: 20 },
-        { name: "蚌埠", target: 500, total: 600, thisYear: 20 },
+      //   { name: "蚌埠", target: 500, total: 600, current: 20 },
-      ],
+      // ],
     };
-  },
-  computed: {
-
   },
   methods: {},
 };

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

@@ -59,7 +59,7 @@ export default {
     },
     valueTuple() {
       const getter = this.chipRate;
-      console.log(getter)
+      // console.log(getter)
       if (this.period === "日" || this.period === "周") {
         return [
           getter.previous[this.factoryId],
@@ -111,11 +111,11 @@ export default {
             this.period == "月"
               ? `${year - 1}年${month}月良率`
               : `${year - 1}年良率`,
-          value: (this.valueTuple[0] * 100).toFixed(0) + "%",
+          value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
         },
         {
           label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
-          value:  (this.valueTuple[1] * 100).toFixed(0) + "%",
+          value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
         },
       ];
     },

src/views/copilot/efficiency/components/sub/std/ProgressBar.vue

@@ -6,11 +6,8 @@
 -->
 
 <template>
-  <div class="progress-bar" :data-title="title" :data-rate="dataRate">
+  <div class="progress-bar" :data-title="titleYear" :data-rate="number">
-    <div
+    <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
-      class="progress-bar__rate"
-      :style="{ width: dataRate == '-' ? 0 : dataRate }"
-    ></div>
   </div>
 </template>
 
@@ -23,23 +20,52 @@ export default {
       type: Number,
       default: 0,
     },
-    total: {
+    target: {
       type: Number,
       default: 0,
     },
+    goodNumber: {
+      type: Number,
+      default:0
+    },
+    componentYield: {
+      type: Number,
+      default:0
+    },
+    period: {
+      type: String,
+      default:'日',
+    },
     title: {
       type: String,
       default: "",
     },
+    city: {
+      type: String,
+      default:""
+    }
   },
   data() {
-    return {};
+    return {
+      number: 0,
+      titleYear:'',
+    };
   },
   computed: {
     dataRate() {
-      return this.total == 0
+      if ((this.period === '年' || this.period === '月') && this.target != 0) {
+        // console.log(this.componentYield)
+        this.titleYear = this.title + '  ' + `${(this.target * 100).toFixed(0)}%`
+      } else {
+        this.titleYear = this.title
+      }
+      this.number = this.value == 0
         ? "-"
-        : `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
+        : `${(this.value * 100).toFixed(0)}%`
+      // console.log(this.period)
+      return this.value == 0
+        ? "-"
+        : this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
     },
   },
   methods: {},
@@ -69,7 +95,7 @@ export default {
     color: #fff;
     position: absolute;
     bottom: -200%;
-    right: 0;
+    right: 10px;
     font-size: 12px;
   }
 

src/views/copilot/efficiency/components/sub/std/StdRateItem.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-09 09:04:07
+ * @LastEditTime: 2024-05-11 15:05:17
  * @LastEditors: zhp
  * @Description:
 -->
@@ -10,29 +10,29 @@
   <div v-if="period == '日'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="title" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
       <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
     </div>
   </div>
   <div v-else-if="period == '周'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="title" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="title" :value="city.current" />
       <!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
     </div>
   </div>
   <div v-else-if="period == '月'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
-      <ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
+      <ProgressBar :period="period" :title="title" :value="city.previous" />
     </div>
   </div>
   <div v-else="period == '年'" class="std-rate-item">
     <CityName :value="city.name" />
     <div class="std-rate-item__value">
-      <ProgressBar :title="titleEnd" :total="city.target" :value="city.target" />
+      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
-      <ProgressBar :title="title" :total="city.target" :value="city.thisYear" />
+      <ProgressBar :period="period" :title="title" :value="city.previous" />
     </div>
   </div>
 </template>

src/views/copilot/energy/components/ElecCost.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
     filename: ElecCost.vue
     author: liubin
     date: 2024-04-29 16:37:01
@@ -44,38 +44,47 @@ export default {
     // 城市数组的顺序必须是固定的
     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
     return {
+      legend: [
+        { label: '瑞昌', color: "#8167F6" },
+        { label: '邯郸', color: "#2760FF" },
+        { label: '株洲', color: "#5996F7" },
+        { label: '佳木斯', color: "#8BC566" },
+        { label: '成都', color: "#11FAF0" },
+        { label: '凯盛', color: "#F3C000" },
+        { label: '蚌埠', color: "#F38600" },
+      ],
       xAxis: cities,
     };
   },
   computed: {
-    legend() {
+    // legend() {
-      switch (this.period) {
+    //   switch (this.period) {
-        case "日":
+    //     case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
+    //       return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
+    //     case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
+    //       return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
+    //     case "月": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
+    //       const month = new Date().getMonth() + 1;
-          return [
+    //       return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        case "年": {
+    //     case "年": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        default:
+    //     default:
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-      }
+    //   }
-    },
+    // },
     series() {
       const { ftoInvest } = this.$store.getters.copilot.yield;
       let dataList = null;

src/views/copilot/energy/components/NatGas.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
     filename: NatGas.vue
     author: liubin
     date: 2024-04-29 16:36:27
@@ -7,7 +7,6 @@
 
 <template>
   <BarChartBase
-    :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="nat-gas"
@@ -35,34 +34,34 @@ export default {
     };
   },
   computed: {
-    legend() {
+    // legend() {
-      switch (this.period) {
+    //   switch (this.period) {
-        case "日":
+    //     case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
+    //       return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
+    //     case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
+    //       return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
+    //     case "月": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
+    //       const month = new Date().getMonth() + 1;
-          return [
+    //       return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        case "年": {
+    //     case "年": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        default:
+    //     default:
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-      }
+    //   }
-    },
+    // },
     series() {
       const { ftoInvest } = this.$store.getters.copilot.yield;
       let dataList = null;

src/views/copilot/energy/components/WaterCost.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
     filename: WaterCost.vue
     author: liubin
     date: 2024-04-29 16:37:34
@@ -7,31 +7,30 @@
 
 <template>
   <LineChartBase
-    v-if="0"
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="waterCost"
     class="water-cost"
   />
-  <BarChartBase
+  <!-- <BarChartBase
     v-else
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
     in="waterCost"
     class="water-cost"
-  />
+  /> -->
 </template>
 
 <script>
-import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
-import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
+import LineChartBaseVue from "@/views/copilot/components/LineChartWater.vue";
 
 export default {
   name: "WaterCost",
   components: {
-    BarChartBase: BarChartBaseVue,
+    // BarChartBase: BarChartBaseVue,
     LineChartBase: LineChartBaseVue,
   },
   props: {
@@ -45,37 +44,46 @@ export default {
     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
     return {
       xAxis: cities,
+      legend: [
+        { label: '瑞昌', color: "#8167F6" },
+        { label: '邯郸', color: "#2760FF" },
+        { label: '株洲', color: "#5996F7" },
+        { label: '佳木斯', color: "#8BC566" },
+        { label: '成都', color: "#11FAF0" },
+        { label: '凯盛', color: "#F3C000" },
+        { label: '蚌埠', color: "#F38600" },
+      ],
     };
   },
   computed: {
-    legend() {
+    // legend() {
-      switch (this.period) {
+    //   switch (this.period) {
-        case "日":
+    //     case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
+    //       return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
+    //     case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
+    //       return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
+    //     case "月": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
+    //       const month = new Date().getMonth() + 1;
-          return [
+    //       return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        case "年": {
+    //     case "年": {
-          const year = new Date().getFullYear();
+    //       const year = new Date().getFullYear();
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-        }
+    //     }
-        default:
+    //     default:
-          return [
+    //       return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
+    //         { label: `${year}年`, color: "#58adfa" },
-          ];
+    //       ];
-      }
+    //   }
-    },
+    // },
     series() {
       const { ftoInvest } = this.$store.getters.copilot.yield;
       let dataList = null;

src/views/copilot/energy/options/monitorOptions.js

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-05-07 10:25:10
- * @LastEditTime: 2024-05-08 10:30:06
+ * @LastEditTime: 2024-05-10 16:10:49
  * @LastEditors: zhp
  * @Description:
  */
@@ -51,7 +51,7 @@ export default function ({
       name: 'Access From',
       type: 'pie',
     	// center: ['50%', '40%'],
-			radius: ['60%', '90%'],
+			radius: ['50%', '80%'],
       avoidLabelOverlap: false,
         labelLine: {
         show: false

src/views/copilot/yield/components/sub/city/CityData.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: CityData.vue
     author: liubin
     date: 2024-04-17 09:55:12
-    description: 
+    description:
 -->
 
 <template>
@@ -72,6 +72,7 @@ export default {
       );
     },
     cities() {
+      // console.log('ztl')
       let getterName = "";
       switch (this.dataSource) {
         case "标准组件产出":

src/views/dashboard/components/Header.vue

@@ -1,16 +1,16 @@
-<!-- 
+<!--
     filename: Header.vue
     author: liubin
     date: 2024-04-09 09:04:12
-    description: 
+    description:
 -->
 
 <template>
   <header class="dashboard-header">
     <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
     <h1>发电玻璃智能管控平台地图总览</h1>
-    <span class="side left">晴转多云 14℃</span>
+    <span class="side left">{{ this.weather }}</span>
-    <span class="side right">23:12|星期一|2023.12.13</span>
+    <span class="side right"> {{ times }} </span>
   </header>
 </template>
 
@@ -26,6 +26,8 @@ export default {
   data() {
     return {
       isFullscreen: false,
+      times: null,
+      weather:'',
     };
   },
   computed: {
@@ -37,7 +39,68 @@ export default {
       };
     },
   },
+  mounted () {
+    ;this.getTimes()
+    this.getWeather()
+  },
   methods: {
+    getTimes() {
+      setInterval(this.getTimesInterval, 1000);
+    },
+    getTimesInterval: function () {
+      var now = new Date();
+      var weekDay = now.getDay();
+      var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
+      var week = weeks[weekDay]
+      let _this = this;
+      let year = new Date().getFullYear(); //获取当前时间的年份
+      let month = new Date().getMonth() + 1; //获取当前时间的月份
+      let day = new Date().getDate(); //获取当前时间的天数
+      let hours = new Date().getHours(); //获取当前时间的小时
+      let minutes = new Date().getMinutes(); //获取当前时间的分数
+      // let seconds = new Date().getSeconds(); //获取当前时间的秒数
+      //当小于 10 的是时候，在前面加 0
+      if (hours < 10) {
+        hours = '0' + hours;
+      }
+      if (minutes < 10) {
+        minutes = '0' + minutes;
+      }
+      // if (seconds < 10) {
+      //   seconds = '0' + seconds;
+      // }
+      //拼接格式化当前时间
+      this.times =
+        hours +
+        ':' +
+      minutes +
+      ' | ' +
+      week +
+      ' | ' +
+        year +
+        '.' +
+        month +
+        '.' +
+        day
+    },
+   async getWeather() {
+      setInterval(() => {
+       fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, {
+          method: 'get',
+         extensions: 'base',
+        //  output:'JSON'
+       }).then((response) => {
+         // 注意此处
+         response.json().then((data) => {
+           console.log(data)
+           this.weather = data.lives[0].weather + '   '+ data.lives[0].temperature + '℃'
+         }).catch((err) => {
+          this.weather = '晴  25℃'
+           console.log(err);
+         })
+       })
+      }, 1000)
+    },
     toggleFullscreen() {
       screenfull.toggle();
       this.isFullscreen = !this.isFullscreen;