Merge branch 'projects/mescc/develop' into projects/mescc/zhp

Reviewed-on: #14

.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:
 ###
@@ -12,8 +12,8 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.1.61:48080'
-# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+# VUE_APP_BASE_API = 'http://192.168.1.61:48080'
+VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@babel/parser": "7.18.4",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "^1.6.8",
     "clipboard": "2.0.8",

src/api/produceData/index.js

@@ -30,3 +30,19 @@ export function getProduceDataDetail(data){
     query: data
   })
 }
+
+// export function cockpitDataMonitor(data) {
+//   return request({
+//     url: '/ip/prod-output/cockpitDataMonitor',
+//     method: 'post',
+//     data: data
+//   })
+// }
+
+export function cockpitDataMonitor(query) {
+  return request({
+    url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=95bdbdc1c387a170105f84cd416c4c9f&city=110108',
+    method: 'get',
+    query: query
+  })
+}

src/assets/styles/login.scss

@@ -133,8 +133,8 @@ $base1px: 0.15vh; // 1px / 1080px;
         width: 100%;
         clear: both;
         position: relative;
-        top: calc(56 * #{$base1px});
-        height: calc(128 * #{$base1px});
+        top: calc(#{$base1px});
+        height: calc(100 * #{$base1px});
         display: flex;
         align-items: center;
         justify-content: center;
@@ -189,7 +189,7 @@ $base1px: 0.15vh; // 1px / 1080px;
         height: calc(16 * 0.12vh);
         line-height: calc(16 * 0.12vh);
         font-size: calc(12 * 0.12vh);
-        color: #8c8c8c;
+        color: #C7C7C7;
 
         a,
         a:hover,

src/main.js

@@ -18,6 +18,7 @@ import store from "./store";
 import router from "./router";
 import directive from "./directive"; // directive
 import plugins from "./plugins"; // plugins
+import { scrollBoard } from '@jiaminghi/data-view'
 
 import "./assets/icons"; // icon
 import "./permission"; // permission control
@@ -69,6 +70,7 @@ Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
 Vue.use(CodeBrickZj);
+Vue.use(scrollBoard)
 // Form Generator 组件需要使用到 tinymce
 import Tinymce from "@/components/tinymce/index.vue";
 Vue.component("tinymce", Tinymce);

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)
-        ? entry.contentBoxSize[0]
-        : entry.contentBoxSize;
-      this.chart_mixin_chartInstance.resize({
-        width:
-          contentBoxSize.inlineSize < this.MIN_WIDTH
-            ? this.MIN_WIDTH
-            : contentBoxSize.inlineSize,
-        height: contentBoxSize.blockSize,
-      });
+      // const contentBoxSize = Array.isArray(entry.contentBoxSize)
+      //   ? entry.contentBoxSize[0]
+      //   : entry.contentBoxSize;
+      // this.chart_mixin_chartInstance.resize({
+      //   width:
+      //     contentBoxSize.inlineSize < this.MIN_WIDTH
+      //       ? this.MIN_WIDTH
+      //       : contentBoxSize.inlineSize,
+      //   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
-    console.log(factoryList.ProdOutputDO)
-    console.log('ryf',factoryList)
+    let targetData = targetList.prodTargetDO ? targetList.prodTargetDO : targetList.prodTargetDO
     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;
-        chipRate.target[fId] = componentYieldRate;
+        stdRate.target[fId] =  componentYieldRate
+        chipRate.target[fId] = chipYieldRate
       }
       // 芯片OEE
-      chipOee.current[fId] = factory.oee * 100 || random_default();
-      chipOee.previous[fId] = factory.previousYearOee * 100 || random_default();
+      chipOee.current[fId] = factory.oee * 100 ;
+      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];
-      _t.current[fId] = factory.yieldRate || random_default();
-      _t.previous[fId] = factory.previousYearYieldRate || random_default();
+      const _t = [chipRate, stdRate][factory.glassType]
+      console.log('_t',_t);
+      _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(),
-    componentYieldRate: random_default(),
+    chipYieldRate:0,
+    componentYieldRate:0,
+    componentYield:0 ,
   };
 }
 

src/views/copilot/components/FactoryDataHeader.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="factory-header">
+    <section class="menu1">
+      <FactorySelect
+        :companyName="companyName"
+        :companyId="companyId"
+        @updateCompany="updateCompany"
+      />
+    </section>
+    <section class="menu2">
+      <CopilotButton
+        v-for="i in ['日', '周', '月', '年']"
+        :key="i"
+        :label="i"
+        :active="i === period"
+        @click="() => $emit('update:period', i)"
+      />
+      <div class="btn-group">
+        <button type="button" class="export-btn" />
+        <button
+          type="button"
+          class="fullscreen-btn"
+          :class="[isFullscreen ? 'exit-fullscreen' : '']"
+          @click="toggleFullScreen"
+        />
+      </div>
+    </section>
+    <div class="page-title">{{ companyName }}</div>
+  </div>
+</template>
+
+<script>
+import CopilotButton from "./button.vue";
+import FactorySelect from "./FactorySelect.vue";
+import screenfull from "screenfull";
+
+export default {
+  name: "FactoryDataHeader",
+  components: { CopilotButton, FactorySelect },
+  props: {
+    companyName: {
+      type: String,
+    },
+    companyId: {
+      type: String,
+    },
+    period: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+    };
+  },
+  computed: {},
+  methods: {
+    toggleFullScreen() {
+      this.isFullscreen = !this.isFullscreen;
+
+      screenfull.toggle(document.querySelector(".factory-layout"));
+      // 矫正宽度
+      // const el = document.querySelector(".factory-layout");
+      // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
+      // el.style.left = this.isFullscreen ? "0" : "54px";
+    },
+    updateCompany(obj) {
+      this.$emit("updateCompany", obj);
+    },
+  },
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 优设标题黑;
+  src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
+}
+
+.factory-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.factory-header > .menu1 {
+  width: 24vw;
+  /* display: flex;
+  align-items: center;
+  gap: 8px; */
+}
+.factory-header > .menu2 {
+  width: 30vw;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.export-btn,
+.fullscreen-btn {
+  width: 32px;
+  height: 32px;
+  margin-left: 24px;
+  cursor: pointer;
+}
+
+.export-btn {
+  background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
+    no-repeat;
+}
+
+.fullscreen-btn {
+  background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100%
+    no-repeat;
+}
+.exit-fullscreen {
+  background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 /
+    100% 100% no-repeat;
+}
+
+.page-title {
+  flex: 1;
+  font-size: 40px;
+  line-height: 70px;
+  letter-spacing: 5px;
+  font-family: 优设标题黑;
+  color: #6db6ff;
+  text-align: right;
+  user-select: none;
+}
+</style>

src/views/copilot/components/FactorySelect.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="factory-select">
+    <div class="label-box" @click="openList">
+      <span>{{ companyName }}</span>
+      <span
+        class="triangle"
+        :style="{ transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)' }"
+      ></span>
+    </div>
+    <div class="option-list" v-show="isOpen">
+      <div
+        v-for="item in company"
+        :key="item.id"
+        @click="chooseCompany(item.id, item.name)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "FactorySelect",
+  props: {
+    companyName: {
+      type: String,
+    },
+    companyId: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+      company: [
+        { id: "1", name: "瑞昌中建材光电材料有限公司" },
+        { id: "2", name: "邯郸中建材光电材料有限公司" },
+        { id: "3", name: "株洲中建材光电材料有限公司" },
+        { id: "4", name: "佳木斯中建材光电材料有限公司" },
+        { id: "5", name: "成都中建材光电材料有限公司" },
+        { id: "6", name: "凯盛中建材光电材料有限公司" },
+        { id: "7", name: "蚌埠中建材光电材料有限公司" },
+      ],
+    };
+  },
+  methods: {
+    openList() {
+      this.isOpen = !this.isOpen;
+    },
+    chooseCompany(id, name) {
+      // this.companyId = id;
+      // this.companyName = name;
+      this.$emit("updateCompany", { companyName: name, companyId: id });
+      this.isOpen = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.factory-select {
+  width: 100%;
+  position: relative;
+  .label-box {
+    flex: 1;
+    position: relative;
+    background: #006acd40;
+    backdrop-filter: blur(3px);
+    padding: 12px;
+    padding-left: 20px;
+    color: #fff;
+    font-size: 22px;
+    cursor: pointer;
+  }
+  .label-box::before,
+  .label-box::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: 0;
+    background: transparent;
+    border-style: solid;
+    border-width: 2px;
+    border-color: transparent;
+    border-top-color: #007be4;
+  }
+
+  .label-box::before {
+    left: 0;
+    border-left-color: #007be4;
+  }
+
+  .label-box::after {
+    right: 0;
+    border-right-color: #007be4;
+  }
+  .triangle {
+    position: absolute;
+    right: 15px;
+    top: 18px;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-top: 12px solid transparent;
+    border-bottom: 12px solid transparent;
+    border-left: 12px solid #1d74d8;
+  }
+  .option-list {
+    width: 100%;
+    position: absolute;
+    z-index: 1000;
+    div {
+      padding-left: 23px;
+      font-size: 20px;
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      background-color: rgba(1, 34, 86, 0.8);
+      cursor: pointer;
+    }
+    div:hover {
+      background-color: rgba(0, 106, 205, 0.61);
+    }
+  }
+  .option-list::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(1, 34, 86, 0.9);
+    filter: blur(2px);
+    z-index: -1;
+  }
+}
+</style>

src/views/copilot/components/LineChartBase.vue

@@ -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: {},
-        xAxis: {
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
-          },
-          data: this.xAxis,
+        // title: {
+        //   text: 'Stacked Area Chart'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
         },
-        yAxis: {
-          name: "单位/片",
-          nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
-          splitLine: {
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
+        // legend: {
+        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        // },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
         },
-        series: [
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
           {
-            name: "", // this.series[0].name,
-            type: "bar",
-            barWidth: 12,
-            itemStyle: {
-              borderRadius: [10, 10, 0, 0],
-              color: {
-                type: "linear",
-                x: 0,
-                y: 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
-              },
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          }
+        ],
+        yAxis: [
+          {
+            min: function () { // 取最小值向下取整为最小刻度
+              return 0
             },
-            data: [], // this.series[0].data,
-          },
-          {
-            name: "", // this.series[1].name,
-            type: "bar",
-            barWidth: 12,
-            // tooltip: {
-            //   valueFormatter: function (value) {
-            //     return value + " ml";
-            //   },
+            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]
+            //   }
             // },
-            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: [
-        { name: "瑞昌", target: 100, total: 200, thisYear: 20 },
-        { name: "邯郸", target: 200, total: 300, thisYear: 20 },
-        { name: "株洲", target: 300, total: 400, thisYear: 20 },
-        { name: "佳木斯", target: 400, total: 500, thisYear: 20 },
-        { name: "成都", target: 500, total: 600, thisYear: 20 },
-        { name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
-        { name: "蚌埠", target: 500, total: 600, thisYear: 20 },
-      ],
+      // cities: [
+      //   { name: "瑞昌", target: 100, total: 200, current: 20 },
+      //   { name: "邯郸", target: 200, total: 300, current: 20 },
+      //   { name: "株洲", target: 300, total: 400, current: 20 },
+      //   { name: "佳木斯", target: 400, total: 500, current: 20 },
+      //   { name: "成都", target: 500, total: 600, current: 20 },
+      //   { name: "凯盛光伏", target: 400, total: 500, current: 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__rate"
-      :style="{ width: dataRate == '-' ? 0 : dataRate }"
-    ></div>
+  <div class="progress-bar" :data-title="titleYear" :data-rate="number">
+    <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 :title="title" :total="city.target" :value="city.thisYear" />
+      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
+      <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 :title="title" :total="city.target" :value="city.thisYear" />
+      <ProgressBar :period="period" :title="titleEnd" :target="city.target" :value="city.current" />
+      <ProgressBar :period="period" :title="title" :value="city.previous" />
     </div>
   </div>
 </template>

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

@@ -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() {
-      switch (this.period) {
-        case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
-          const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
-          return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
-        }
-        case "年": {
-          const year = new Date().getFullYear();
-          return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
-          ];
-        }
-        default:
-          return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
-          ];
-      }
-    },
+    // legend() {
+    //   switch (this.period) {
+    //     case "日":
+    //       return [{ label: "昨日", color: "#12f7f1" }];
+    //     case "周":
+    //       return [{ label: "本周", color: "#12f7f1" }];
+    //     case "月": {
+    //       const year = new Date().getFullYear();
+    //       const month = new Date().getMonth() + 1;
+    //       return [
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
+    //       ];
+    //     }
+    //     case "年": {
+    //       const year = new Date().getFullYear();
+    //       return [
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year}年`, color: "#58adfa" },
+    //       ];
+    //     }
+    //     default:
+    //       return [
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year}年`, color: "#58adfa" },
+    //       ];
+    //   }
+    // },
     series() {
       const { ftoInvest } = this.$store.getters.copilot.yield;
       let dataList = null;

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

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

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

@@ -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 LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
+// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.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() {
-      switch (this.period) {
-        case "日":
-          return [{ label: "昨日", color: "#12f7f1" }];
-        case "周":
-          return [{ label: "本周", color: "#12f7f1" }];
-        case "月": {
-          const year = new Date().getFullYear();
-          const month = new Date().getMonth() + 1;
-          return [
-            { label: `${year - 1}年${month}月`, color: "#12f7f1" },
-            { label: `${year}年${month}月`, color: "#58adfa" },
-          ];
-        }
-        case "年": {
-          const year = new Date().getFullYear();
-          return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
-          ];
-        }
-        default:
-          return [
-            { label: `${year - 1}年`, color: "#12f7f1" },
-            { label: `${year}年`, color: "#58adfa" },
-          ];
-      }
-    },
+    // legend() {
+    //   switch (this.period) {
+    //     case "日":
+    //       return [{ label: "昨日", color: "#12f7f1" }];
+    //     case "周":
+    //       return [{ label: "本周", color: "#12f7f1" }];
+    //     case "月": {
+    //       const year = new Date().getFullYear();
+    //       const month = new Date().getMonth() + 1;
+    //       return [
+    //         { label: `${year - 1}年${month}月`, color: "#12f7f1" },
+    //         { label: `${year}年${month}月`, color: "#58adfa" },
+    //       ];
+    //     }
+    //     case "年": {
+    //       const year = new Date().getFullYear();
+    //       return [
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { label: `${year}年`, color: "#58adfa" },
+    //       ];
+    //     }
+    //     default:
+    //       return [
+    //         { label: `${year - 1}年`, color: "#12f7f1" },
+    //         { 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/factoryData/components/Container.vue

@@ -0,0 +1,232 @@
+<!-- 
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description: 
+-->
+
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button
+      v-if="false"
+      style="
+        appearance: none;
+        outline: none;
+        border: none;
+        background: none;
+        color: #fff;
+        cursor: pointer;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+      "
+      @click="$emit('refresh')"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        style="width: 24px; height: 24px"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+        />
+      </svg>
+    </button>
+    <!-- decoration  -->
+    <div class="corner tl"></div>
+    <div class="corner tr"></div>
+    <div v-if="side == 'left'" class="corner bl"></div>
+    <div v-if="side == 'right'" class="corner br"></div>
+    <!-- content  -->
+    <div
+      class="container-head"
+      :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"
+    >
+      <Icon :icon="icon"></Icon>
+      <h2 class="container-title">{{ title }}</h2>
+    </div>
+    <div
+      class="container-body"
+      :class="[
+        side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
+      ]"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerIconVue from "./ContainerIcon.vue";
+export default {
+  name: "DashboardContainer",
+  components: {
+    Icon: ContainerIconVue,
+  },
+  props: {
+    side: {
+      type: String,
+      default: "left",
+    },
+    icon: {
+      type: String,
+      default: "cube",
+    },
+    title: {
+      type: String,
+      default: "Default Title",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.copilot-container {
+  height: 0;
+  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;
+    display: inline-block;
+    height: 100%;
+    width: 0.11415vw;
+    border-radius: 2px;
+    top: 0%;
+    left: 0;
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 30%,
+      transparent
+    );
+    z-index: 1;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: 60%;
+    height: 0.31415vh;
+    border-radius: 2px;
+    left: 8%;
+    bottom: 0;
+    background: linear-gradient(to right, #024798, transparent);
+    z-index: 0;
+  }
+
+  .container-head {
+    // height: 40px;
+    height: 3.8vh;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .container-title {
+      font-size: 1.18vw;
+      line-height: 1.39vw;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
+  }
+
+  .container-body {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 0;
+  }
+
+  .corner {
+    z-index: 1;
+    position: absolute;
+    // width: 16px;
+    // height: 16px;
+    width: 0.95vw;
+    height: 0.95vw;
+  }
+
+  .corner.tl {
+    border-top: 2px solid #0175dc;
+    border-left: 2px solid #0175dc;
+    top: 0;
+    left: 0;
+  }
+
+  .corner.tr {
+    top: 0;
+    right: 0;
+    border-top: 2px solid #0175dc;
+    border-right: 2px solid #0175dc;
+  }
+
+  .corner.bl {
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    bottom: 0;
+    left: 0;
+    // border-left: 10px solid #0175dc;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid transparent;
+    border-left: 0.532vw solid #0175dc;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid transparent;
+  }
+
+  .corner.br {
+    bottom: 0;
+    right: 0;
+    // width: 20px;
+    // height: 20px;
+    width: 1.064vw;
+    height: 1.064vw;
+    // border-left: 10px solid transparent;
+    // border-bottom: 10px solid #0175dc;
+    // border-top: 10px solid transparent;
+    // border-right: 10px solid #0175dc;
+    border-left: 0.532vw solid transparent;
+    border-bottom: 0.532vw solid #0175dc;
+    border-top: 0.532vw solid transparent;
+    border-right: 0.532vw solid #0175dc;
+  }
+
+  .gradient-to-right {
+    background: linear-gradient(to right, #0c3f68cc, transparent);
+  }
+
+  .gradient-to-left {
+    background: linear-gradient(to left, #0c3f68cc, transparent);
+  }
+
+  .body-gradient-to-right {
+    background: linear-gradient(to right, #0003, transparent);
+  }
+
+  .body-gradient-to-left {
+    background: linear-gradient(to left, #0003, transparent);
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+<!-- 
+    filename: ContainerIcon.vue
+    author: liubin
+    date: 2024-04-09 16:41:36
+    description: 
+-->
+
+<template>
+  <div class="container-icon" :style="bgStyle"></div>
+</template>
+
+<script>
+import prod from "@/assets/images/companyData/prod-minor.png";
+import store from "@/assets/images/companyData/store.png";
+import energy from "@/assets/images/companyData/energy.png";
+import order from "@/assets/images/companyData/order.png";
+
+export default {
+  name: "ContainerIcon",
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: "prod",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    bgStyle() {
+      return {
+        prod:
+          "background: url(" + prod + ") no-repeat center center / 100% 100%",
+        store:
+          "background: url(" + store + ") no-repeat center center / 100% 100%",
+        energy:
+          "background: url(" + energy + ") no-repeat center center / 100% 100%",
+        order:
+          "background: url(" + order + ") no-repeat center center / 100% 100%",
+      }[this.icon];
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.container-icon {
+  //   width: 32px;
+  //   height: 32px;
+  width: 1.701vw;
+  height: 1.701vw;
+  background: #ccc2;
+}
+</style>

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

@@ -0,0 +1,371 @@
+<template>
+  <div class="left-chart-base">
+    <div class="legend">
+      <span
+        v-for="item in legend"
+        :key="item.label"
+        class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
+        >{{ item.label }}</span
+      >
+    </div>
+    <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+<script>
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "Energy",
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      chart: "",
+      options: {
+        color: ["#FFD160", "#2760FF", "#12FFF5"],
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "0",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "KW/h",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+              align: "right",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+          },
+          {
+            type: "value",
+            name: "m³/h",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+              align: "left",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            data: [],
+            type: "line",
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#FFD160" + "80" },
+                { offset: 0.5, color: "#FFD160" + "20" },
+                { offset: 1, color: "#FFD160" + "00" },
+              ]),
+            },
+            lineStyle: {
+              width: 2,
+            },
+            symbol: "circle",
+            symbolSize: 8,
+            emphasis: {
+              focus: "series",
+            },
+          },
+          {
+            name: "",
+            data: [],
+            type: "line",
+            yAxisIndex: 1,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#2760FF" + "80" },
+                { offset: 0.5, color: "#2760FF" + "20" },
+                { offset: 1, color: "#2760FF" + "00" },
+              ]),
+            },
+            lineStyle: {
+              width: 2,
+            },
+            symbol: "circle",
+            symbolSize: 8,
+            emphasis: {
+              focus: "series",
+            },
+          },
+          {
+            name: "",
+            data: [],
+            type: "line",
+            yAxisIndex: 1,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#12FFF5" + "80" },
+                { offset: 0.5, color: "#12FFF5" + "20" },
+                { offset: 1, color: "#12FFF5" + "00" },
+              ]),
+            },
+            lineStyle: {
+              width: 2,
+            },
+            symbol: "circle",
+            symbolSize: 8,
+            emphasis: {
+              focus: "series",
+            },
+          },
+        ],
+      },
+    };
+  },
+  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;
+    //   actualOptions.series[2].data = val[2].data;
+    //   actualOptions.series[2].name = val[2].name;
+    //   this.actualOptions = actualOptions;
+    //   this.initOptions(actualOptions);
+    // },
+  },
+  mounted() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.series[0].name = this.series[0].name;
+      actualOptions.series[1].data = this.series[1].data;
+      actualOptions.series[1].name = this.series[1].name;
+      actualOptions.series[2].data = this.series[2].data;
+      actualOptions.series[2].name = this.series[2].name;
+      this.actualOptions = actualOptions;
+      this.chart.setOption(actualOptions);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.left-chart-base {
+  // position: relative;
+  height: 100%;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 4vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 1.34vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      // width: 10px;
+      // height: 10px;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+  .legend-item:nth-child(1):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #ffd160;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+  .legend-item:nth-child(1):after {
+    background-color: #ffd160;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    // width: 6px;
+    // height: 6px;
+    width: 0.3191vw;
+    height: 0.3191vw;
+    border-radius: 100%;
+    top: 50%;
+    left: -0.851vw;
+    // left: -16px;
+    transform: translateY(-50%) translateX(50%);
+  }
+  .legend-item:nth-child(2):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #2760ff;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+  .legend-item:nth-child(2):after {
+    background-color: #2760ff;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    // width: 6px;
+    // height: 6px;
+    width: 0.3191vw;
+    height: 0.3191vw;
+    border-radius: 100%;
+    top: 50%;
+    left: -0.851vw;
+    // left: -16px;
+    transform: translateY(-50%) translateX(50%);
+  }
+  .legend-item:nth-child(3):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #12fff5;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+  .legend-item:nth-child(3):after {
+    background-color: #12fff5;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    // width: 6px;
+    // height: 6px;
+    width: 0.3191vw;
+    height: 0.3191vw;
+    border-radius: 100%;
+    top: 50%;
+    left: -0.851vw;
+    // left: -16px;
+    transform: translateY(-50%) translateX(50%);
+  }
+}
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+  <dv-scroll-board
+    v-if="aa"
+    :config="config"
+    style="width: 100%; height: 100%"
+  />
+</template>
+<script>
+import { debounce } from "@/utils/debounce";
+export default {
+  name: "Order",
+  data() {
+    return {
+      aa: true,
+      config: {
+        header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
+        headerBGC: "rgba(0, 106, 205, 0.22)",
+        oddRowBGC: "rgba(0, 106, 205, 0.22)",
+        evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
+        data: [],
+        rowNum: 12,
+        waitTime: 3000,
+        columnWidth: [50],
+        align: ["center"],
+        carousel: "page",
+      },
+    };
+  },
+  mounted() {
+    this.getTableList();
+    this.tableReset();
+    window.addEventListener("resize", this.tableReset);
+  },
+  methods: {
+    tableReset() {
+      this.aa = false;
+      debounce(() => {
+        this.initTable();
+      }, 500)();
+    },
+    initTable() {
+      this.aa = true;
+    },
+    getTableList() {
+      let _this = this;
+      setTimeout(
+        (function name() {
+          _this.config.data = [
+            ["1", "行1列1", "行1列2", "行1列3", "50%"],
+            ["2", "行2列1", "行2列2", "行2列3", "50%"],
+            ["3", "行3列1", "行3列2", "行3列3", "50%"],
+            ["4", "行4列1", "行4列2", "行4列3", "50%"],
+            ["5", "行5列1", "行5列2", "行5列3", "50%"],
+            ["6", "行6列1", "行6列2", "行6列3", "50%"],
+            ["7", "行7列1", "行7列2", "行7列3", "50%"],
+            ["8", "行8列1", "行8列2", "行8列3", "50%"],
+            ["9", "行9列1", "行9列2", "行9列3", "50%"],
+            ["10", "行10列1", "行10列2", "行10列3", "50%"],
+            ["11", "行11列1", "行11列2", "行11列3", "50%"],
+            ["12", "行12列1", "行12列2", "行12列3", "50%"],
+            ["13", "行13列1", "行13列2", "行13列3", "50%"],
+            ["14", "行14列1", "行14列2", "行14列3", "50%"],
+            ["15", "行15列1", "行15列2", "行15列3", "50%"],
+            ["16", "行16列1", "行16列2", "行16列3", "50%"],
+            ["17", "行17列1", "行17列2", "行17列3", "50%"],
+            ["18", "行18列1", "行18列2", "行18列3", "50%"],
+            ["19", "行19列1", "行19列2", "行19列3", "50%"],
+            ["20", "行20列1", "行20列2", "行20列3", "50%"],
+          ];
+        })(),
+        2000
+      );
+      this.initTable();
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,272 @@
+<template>
+  <div class="prod-monitor">
+    <div class="fto-box">
+      <div class="icon">
+        <img
+          src="./../assets/images/fto.png"
+          alt=""
+          style="width: 2.1875vw; height: 2.2875vw"
+        />
+      </div>
+      <div class="middle-box">
+        <span class="type">玻璃类型</span>
+        <span class="type-name">FTO投入</span>
+      </div>
+      <div class="right-box">
+        <span class="type">投入数量</span>
+        <span class="num">8391222</span>
+      </div>
+    </div>
+    <div class="std-box">
+      <div class="icon">
+        <img
+          src="./../assets/images/std.png"
+          alt=""
+          style="width: 2.1875vw; height: 2.1875vw"
+        />
+      </div>
+      <div class="middle-box">
+        <div class="separate">
+          <div>
+            <span class="type">玻璃类型</span>
+            <span class="type-name">标准组检产量</span>
+          </div>
+          <div>
+            <span class="type">良品数量</span>
+            <span class="type-name">740</span>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="separate">
+          <div>
+            <span class="type">生产数量</span>
+            <span class="num">783</span>
+          </div>
+          <div>
+            <span class="type1">良品率</span>
+            <span class="num">96%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="chip-box">
+      <div class="icon">
+        <img
+          src="./../assets/images/chip.png"
+          alt=""
+          style="width: 2.1875vw; height: 2.1875vw"
+        />
+      </div>
+      <div class="middle-box">
+        <div class="separate">
+          <div>
+            <span class="type">玻璃类型</span>
+            <span class="type-name">芯片产量</span>
+          </div>
+          <div>
+            <span class="type">良品数量</span>
+            <span class="type-name">740</span>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="separate">
+          <div>
+            <span class="type">生产数量</span>
+            <span class="num">783</span>
+          </div>
+          <div>
+            <span class="type1">良品率</span>
+            <span class="num">96%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bipv-box">
+      <div class="icon">
+        <img
+          src="./../assets/images/bipv.png"
+          alt=""
+          style="width: 2.1875vw; height: 2.1875vw"
+        />
+      </div>
+      <div class="middle-box">
+        <div class="separate">
+          <div>
+            <span class="type">玻璃类型</span>
+            <span class="type-name">BIPV产量</span>
+          </div>
+          <div>
+            <span class="type">良品数量</span>
+            <span class="type-name">740</span>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="separate">
+          <div>
+            <span class="type">生产数量</span>
+            <span class="num">783</span>
+          </div>
+          <div>
+            <span class="type1">良品率</span>
+            <span class="num">96%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ProdMonitor",
+};
+</script>
+<style lang="scss" scoped>
+.prod-monitor {
+  height: 100%;
+  display: flex;
+  gap: 6px;
+  flex-direction: column;
+  .fto-box,
+  .std-box,
+  .chip-box,
+  .bipv-box {
+    box-shadow: inset 0 0 12px 2px #fff3;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    .icon {
+      flex: 1;
+      text-align: center;
+    }
+    .middle-box {
+      flex: 2.086;
+      position: relative;
+    }
+    .right-box {
+      flex: 2.424;
+      position: relative;
+    }
+    .type {
+      display: inline-block;
+      font-size: 0.9375vw;
+      color: #6db6ff;
+      position: relative;
+      text-align: right;
+      padding-right: 0.417vw;
+      letter-spacing: 2px;
+      width: 6.25vw;
+    }
+    .type1 {
+      display: inline-block;
+      font-size: 0.9375vw;
+      color: #6db6ff;
+      position: relative;
+      text-align: right;
+      padding-right: 0.6vw;
+      width: 6.25vw;
+      padding-left: 1.6vw;
+      text-align: justify;
+      text-align-last: justify;
+    }
+    .type-name {
+      font-size: 1.042vw;
+      color: #fff;
+      position: relative;
+      text-align: left;
+      padding-left: 0.573vw;
+    }
+    .type-name::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 1.042vw;
+      border: 1px solid;
+      border-image: linear-gradient(
+          180deg,
+          rgba(0, 176, 243, 0),
+          rgba(31, 143, 255, 1)
+        )
+        2 2;
+      position: absolute;
+      left: 0;
+      top: 4px;
+    }
+    .num {
+      font-size: 1.042vw;
+      color: #fff;
+      position: relative;
+      text-align: left;
+      padding-left: 0.573vw;
+    }
+    .num::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 1.042vw;
+      border: 1px solid;
+      border-image: linear-gradient(
+          180deg,
+          rgba(0, 176, 243, 0),
+          rgba(31, 143, 255, 1)
+        )
+        2 2;
+      position: absolute;
+      left: 0;
+      top: 4px;
+    }
+  }
+  .fto-box {
+    flex: 1;
+    .type::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 1.6146vw;
+      border: 1px solid;
+      border-image: linear-gradient(
+          135deg,
+          rgba(0, 176, 243, 0),
+          rgba(31, 143, 255, 1),
+          rgba(31, 143, 255, 0)
+        )
+        2 2;
+      position: absolute;
+      left: 0;
+      top: -2px;
+    }
+  }
+  .std-box {
+    flex: 1.3;
+  }
+  .chip-box {
+    flex: 1.3;
+  }
+  .bipv-box {
+    flex: 1.3;
+  }
+  .std-box,
+  .chip-box,
+  .bipv-box {
+    .separate::before {
+      content: "";
+      display: inline-block;
+      width: 1px;
+      height: 3.125vw;
+      border: 1px solid;
+      border-image: linear-gradient(
+          135deg,
+          rgba(0, 176, 243, 0),
+          rgba(31, 143, 255, 1),
+          rgba(31, 143, 255, 0)
+        )
+        2 2;
+      position: absolute;
+      left: 0;
+      top: -2px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,170 @@
+<template>
+  <div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import { debounce } from "@/utils/debounce";
+import * as echarts from "echarts";
+export default {
+  name: "Store",
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      chart: "",
+      options: {
+        grid: {
+          left: "3%",
+          right: "1%",
+          bottom: "0",
+          top: "10%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+            align: "right",
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 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,
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    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() {
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+    this.canvasReset();
+    window.addEventListener("resize", this.canvasReset);
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose();
+    }
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.canvasReset);
+  },
+  methods: {
+    canvasReset() {
+      debounce(() => {
+        this.initChart();
+      }, 500)();
+    },
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(document.getElementById("factoryStoreChart"));
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.series[0].name = this.series[0].name;
+      this.actualOptions = actualOptions;
+      this.chart.setOption(actualOptions);
+    },
+  },
+};
+</script>
+<style></style>

src/views/copilot/factoryData/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="factory-layout">
+    <FactoryDataHeader
+      :companyName="companyName"
+      :companyId="companyId"
+      :period="period"
+      @updateCompany="updateCompany"
+      @update:period="period = $event"
+    />
+    <div class="factory-section">
+      <section class="top flex">
+        <db-container title="生产监控" icon="prod">
+          <prod-monitor />
+        </db-container>
+        <db-container title="仓库监控.当前" icon="store">
+          <store :series="series" :xAxis="xAxis" />
+        </db-container>
+      </section>
+      <section class="bottom flex">
+        <db-container title="能源监控" icon="energy">
+          <energy
+            :legend="energyLegend"
+            :series="energySeries"
+            :xAxis="energyxAxis"
+          />
+        </db-container>
+        <db-container title="订单监控" icon="order">
+          <order />
+        </db-container>
+      </section>
+    </div>
+    <div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
+  </div>
+</template>
+<script>
+import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
+import Container from "./components/Container.vue";
+import ProdMonitor from "./components/ProdMonitor.vue";
+import Store from "./components/Store.vue";
+import Energy from "./components/Energy.vue";
+import Order from "./components/Order.vue";
+import { cockpitDataMonitor } from "@/api/produceData";
+export default {
+  name: "FactoryData",
+  components: {
+    FactoryDataHeader,
+    DbContainer: Container,
+    ProdMonitor,
+    Store,
+    Energy,
+    Order,
+  },
+  data() {
+    const year = new Date().getFullYear();
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      companyId: "1",
+      companyName: "瑞昌中建材光电材料有限公司",
+      period: "日",
+
+      energyLegend: [
+        { label: "电", color: "#FFD160" },
+        { label: "水", color: "#2760FF" },
+        { label: "气", color: "#12FFF5" },
+      ],
+      energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],
+
+      legend: [
+        { label: `${year - 1}年`, color: "#12f7f1" },
+        // { label: `${year}年`, color: "#58adfa" },
+      ],
+      xAxis: cities,
+    };
+  },
+  computed: {
+    energySeries() {
+      return [
+        {
+          name: "电",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+        {
+          name: "水",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+        {
+          name: "气",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+      ];
+    },
+    series() {
+      // const ftoInvest = this.$store.getters.home.ftoInvest;
+      // if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
+      return [
+        {
+          name: "2023年",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+      ];
+      // }
+
+      // return [
+      //   {
+      //     name: `${new Date().getFullYear() - 1}年`,
+      //     data: ftoInvest.previous,
+      //   },
+      //   {
+      //     name: `${new Date().getFullYear()}年`,
+      //     data: ftoInvest.current,
+      //   },
+      // ];
+    },
+  },
+  mounted() {
+    this.getMes1();
+  },
+  methods: {
+    updateCompany(obj) {
+      this.companyId = obj.companyId;
+      this.companyName = obj.companyName;
+    },
+    getMes1() {
+      // cockpitDataMonitor({
+      //   factorys: ["1"],
+      //   date: 4,
+      // }).then((res) => {
+      //   console.log(res);
+      // });
+      cockpitDataMonitor().then((res) => {});
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.factory-layout {
+  padding: 16px;
+  background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
+    no-repeat;
+  position: absolute;
+  height: calc(100% + 38px);
+  left: -16px;
+  top: -8px;
+  width: calc(100% + 30px);
+  z-index: 1001;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .factory-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    .flex {
+      display: flex;
+      gap: 16px;
+      flex: 1;
+    }
+    .top > div,
+    .bottom > div {
+      height: 100%;
+    }
+  }
+  .factory-footer {
+    /** position: absolute;
+  bottom: 10px; **/
+    height: 10px;
+    width: 100%;
+    color: rgb(80, 80, 80);
+    user-select: none;
+    font-size: 14px;
+    letter-spacing: 1px;
+    display: grid;
+    place-content: center;
+  }
+}
+</style>

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

@@ -72,6 +72,7 @@ export default {
       );
     },
     cities() {
+      // console.log('ztl')
       let getterName = "";
       switch (this.dataSource) {
         case "标准组件产出":

src/views/dashboard/components/Header.vue

@@ -9,8 +9,8 @@
   <header class="dashboard-header">
     <div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
     <h1>发电玻璃智能管控平台地图总览</h1>
-    <span class="side left">晴转多云 14℃</span>
-    <span class="side right">23:12|星期一|2023.12.13</span>
+    <span class="side left">{{ this.weather }}</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;

src/views/login.vue

@@ -9,7 +9,7 @@
           class="welcome"
           style="
             position: absolute;
-            top: 15%;
+            top: 12%;
             left: 20%;
             user-select: none;
             display: flex;
@@ -51,6 +51,11 @@
             向世界先进水平挑战，为人类社会文明做贡献
           </p>
         </div>
+        <img
+          src="../assets/images/login.png"
+          style="position: absolute; top: 30%; left: 15%; width: 40vw"
+          alt=""
+        />
       </div>
       <!-- 表单 -->
       <div class="field">
@@ -64,7 +69,7 @@
             style=""
             class="cnbm_logo"
           />
-          <h3 class="title" style="margin: 16px 0;">集团工业互联网平台</h3>
+          <h3 class="title" style="margin: 16px 0">发电玻璃智能管控平台</h3>
         </h2>
         <h2 class="pc-title" style="">
           <img
@@ -75,7 +80,9 @@
             style=""
             class="cnbm_logo"
           />
-          <span style="font-weight: bold; letter-spacing: 1px; font-size: 32px;">集团工业互联网平台</span>
+          <span style="font-weight: bold; letter-spacing: 1px; font-size: 32px"
+            >发电玻璃智能管控平台</span
+          >
         </h2>
 
         <!-- 表单 -->
@@ -164,7 +171,7 @@
         </div>
         <!-- footer -->
         <div class="footer">
-          Copyright © 2023 中建材智能自动化研究院有限公司 All Rights Reserved.
+          版权所有：中建材智能自动化研究院有限公司&nbsp;&nbsp;&nbsp;版本：1.0
         </div>
       </div>
     </div>

yarn.lock

@@ -972,6 +972,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.5.5":
+  version "7.24.5"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
+  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.23.9", "@babel/template@^7.24.0":
   version "7.24.0"
   resolved "https://registry.npmmirror.com/@babel/template/-/template-7.24.0.tgz"
@@ -1064,6 +1071,51 @@
     wrap-ansi "^8.1.0"
     wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
 
+"@jiaminghi/bezier-curve@*":
+  version "0.0.9"
+  resolved "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz#5196aca93c8b061a612b4c3eabcedf9490cef6ee"
+  integrity sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
+"@jiaminghi/c-render@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz#982ebd8f71b443bb9507834227834973ebd9b6d8"
+  integrity sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/bezier-curve" "*"
+    "@jiaminghi/color" "*"
+    "@jiaminghi/transition" "*"
+
+"@jiaminghi/charts@*":
+  version "0.2.18"
+  resolved "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz#63ded95200789fc1a1fd04b7fd9e56f58d22d90f"
+  integrity sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/c-render" "^0.4.3"
+
+"@jiaminghi/color@*":
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz#a2336750d1266155ffe80375c58c26fdec495611"
+  integrity sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==
+
+"@jiaminghi/data-view@^2.10.0":
+  version "2.10.0"
+  resolved "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz#2146d8fc71b9f24be808238ca050ddb7a4c8949f"
+  integrity sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/charts" "*"
+
+"@jiaminghi/transition@*":
+  version "1.1.11"
+  resolved "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz#576d8af092434b34201eba5eaecc79dd33c8ad8c"
+  integrity sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.5"
   resolved "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"