1

src/store/modules/home.js

@@ -15,7 +15,25 @@ const state = {
     /* 能源驾驶舱 */
     energy: {},
     /* 效率驾驶舱 */
-    efficiency: {},
+    efficiency: {
+      chipOee: {
+        current: [],
+        previous: [],
+      },
+      transformRate: {
+        current: [],
+        previous: [],
+      },
+      chipRate: {
+        target: [],
+        current: [],
+        previous: [],
+      },
+      stdRate: {
+        target: [],
+        current: [],
+      },
+    },
   },
   home: {
     /** 主页状态 */
@@ -48,7 +66,10 @@ const mutations = {
         state.copilot.energy = payload.data;
         break;
       case "efficiency":
-        state.copilot.efficiency = payload.data;
+        state.copilot.efficiency.chipOee = payload.chipOee;
+        state.copilot.efficiency.transformRate = payload.transformRate;
+        state.copilot.efficiency.chipRate = payload.chipRate;
+        state.copilot.efficiency.stdRate = payload.stdRate;
         break;
     }
   },
@@ -64,13 +85,18 @@ const actions = {
   },
   /** 初始化驾驶舱数据 */
   async initCopilot({ commit }, { period, source }) {
-    if (source == 'comprehensive') return;
+    if (source == "comprehensive") return;
-    
+
     const fetcher = {
       yield: getCopilotYield,
       comprehensive: getCopilotEnergy,
       efficiency: getCopilotEfficiency,
     }[source];
+    const handler = {
+      yield: splitCurrentAndPrevious,
+      comprehensive: () => null,
+      efficiency: splitCurrentAndPreviousA,
+    }[source];
     // 获取产量数据
     let { data: factoryList, type } = await fetcher(period);
     let targetList = null;
@@ -79,7 +105,7 @@ const actions = {
       let { data } = await fetcher(period, true);
       targetList = data;
     }
-    const payload = splitCurrentAndPrevious(factoryList, targetList);
+    const payload = handler(factoryList, targetList);
     commit("SET_COPILOT_INFO", { type, payload });
   },
 };
@@ -91,8 +117,99 @@ export default {
   actions,
 };
 
+function splitCurrentAndPreviousA(factoryListResponse, targetListResponse) {
+  // 初始数据
+  const { chipOee, transformRate, chipRate, stdRate } = initA();
+  factoryListResponse = [
+    {
+      factory: 0,
+      oee: 0.8,
+      previousYearOee: 0.7,
+      componentConversionEfficiency: 0.8,
+      previousYearComponentConversionEfficiency: 0.7,
+      glassType: 0,
+      yieldRate: 0.8,
+      previousYearYieldRate: 0.7,
+      chipYieldRate: 0.38,
+      componentYieldRate: 0.73,
+    },
+    {
+      factory: 1,
+      oee: 0.8,
+      previousYearOee: 0.7,
+      componentConversionEfficiency: 0.8,
+      previousYearComponentConversionEfficiency: 0.7,
+      glassType: 1,
+      yieldRate: 0.8,
+      previousYearYieldRate: 0.7,
+      chipYieldRate: 0.38,
+      componentYieldRate: 0.73,
+    },
+    {
+      factory: 2,
+      oee: 0.8,
+      previousYearOee: 0.7,
+      componentConversionEfficiency: 0.8,
+      previousYearComponentConversionEfficiency: 0.7,
+      glassType: 1,
+      yieldRate: 0.8,
+      previousYearYieldRate: 0.7,
+      chipYieldRate: 0.38,
+      componentYieldRate: 0.73,
+    },
+    {
+      factory: 3,
+      oee: 0.8,
+      previousYearOee: 0.7,
+      componentConversionEfficiency: 0.8,
+      previousYearComponentConversionEfficiency: 0.7,
+      glassType: 0,
+      yieldRate: 0.8,
+      previousYearYieldRate: 0.7,
+      chipYieldRate: 0.38,
+      componentYieldRate: 0.73,
+    },
+  ];
+  if (factoryListResponse) {
+    for (const factory of factoryListResponse) {
+      const fId = getFactoryId(factory);
+      // 获取目标值
+      if (targetListResponse) {
+        const {
+          chipYieldRate,
+          componentYieldRate,
+          chipOee,
+          componentConversionEfficiency,
+        } = getFactoryTargetValueA(targetListResponse, fId);
+        stdRate.target[fId] = chipYieldRate;
+        chipRate.target[fId] = componentYieldRate;
+      }
+      // 芯片OEE
+      chipOee.current[fId] = factory.oee || random_default();
+      chipOee.previous[fId] = factory.previousYearOee || random_default();
+      // 转化效率
+      transformRate.current[fId] =
+        factory.componentConversionEfficiency || random_default();
+      transformRate.previous[fId] =
+        factory.previousYearComponentConversionEfficiency || random_default();
+      // 芯片良率 与 标准组件良率
+      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();
+    }
+
+    return {
+      chipOee,
+      transformRate,
+      chipRate,
+      stdRate,
+    };
+  }
+}
+
 function splitCurrentAndPrevious(factoryListResponse, targetListResponse) {
-  // 初始数据 
+  // 初始数据
   const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init();
   if (factoryListResponse) {
     for (const factory of factoryListResponse) {
@@ -152,8 +269,57 @@ function getFactoryTargetValue(targetList, factoryId) {
 }
 
 /**
- * 
+ * 获取 芯片良率目标值 和 标准组件良率目标值
- * @returns 初始化状态值
+ * @param {*} targetList 目标值列表
+ * @param {*} factoryId 工厂ID
+ * @returns
+ */
+function getFactoryTargetValueA(targetList, factoryId) {
+  const target = targetList.find((item) => item.factory === factoryId);
+  if (target) {
+    return {
+      chipYieldRate: target.chipYieldRate ?? random_default(),
+      componentYieldRate: target.componentYieldRate ?? random_default(),
+    };
+  }
+  return {
+    chipYieldRate: random_default(),
+    componentYieldRate: random_default(),
+  };
+}
+
+/**
+ *
+ * @returns 初始化 效率模块里 初始状态值
+ */
+function initA() {
+  const t_ = {
+    current: Array(7).fill(0),
+    previous: Array(7).fill(0),
+  };
+  // 芯片OEE
+  const chipOee = deepClone(t_);
+  // 转化效率
+  const transformRate = deepClone(t_);
+  // 标准组件良率
+  const stdRate = {
+    ...deepClone(t_),
+    target: Array(7).fill(0),
+  };
+  // 芯片良率
+  const chipRate = deepClone(stdRate);
+
+  return {
+    chipOee,
+    transformRate,
+    chipRate,
+    stdRate,
+  };
+}
+
+/**
+ *
+ * @returns 初始化 产量模块里 初始状态值
  */
 function init() {
   const t_ = {
@@ -183,11 +349,11 @@ function init() {
   };
 }
 
-function random_default() {
+function random_default(min = 0, max = 1) {
-  return 0;
+  // return 0;
-  let a = Math.floor(Math.random() * 1000);
+  let a = Math.floor(Math.random() * max);
-  while (a < 600) {
+  while (a < min) {
-    a = Math.floor(Math.random() * 1000);
+    a = Math.floor(Math.random() * max);
   }
   return a;
 }
@@ -256,10 +422,10 @@ async function doFetch(copilot_module = "yield", fetch_target, params) {
 }
 
 /**
- * 
+ *
  * @param {*} period 日周月年1,2,3,4
  * @param {*} target 是否获取目标数据
- * @returns 
+ * @returns
  */
 function getCopilotYield(period, target = false) {
   return getCopilotData("yield", period, target);

src/views/copilot/components/Container.vue

@@ -9,6 +9,7 @@
   <div class="copilot-container">
     <!-- refresh btn  -->
     <button
+      v-if="0"
       style="
         appearance: none;
         outline: none;
@@ -109,7 +110,12 @@ export default {
     border-radius: 2px;
     top: 0%;
     left: 0;
-    background: radial-gradient(circle at center , #024798 2%, #024798 30%, transparent);
+    background: radial-gradient(
+      circle at center,
+      #024798 2%,
+      #024798 30%,
+      transparent
+    );
     z-index: 1;
   }
 

src/views/copilot/components/LineChartBase.vue

@@ -0,0 +1,296 @@
+<!-- 
+    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";
+
+export default {
+  name: "LineChartBase",
+  components: {
+    ChartContainer,
+  },
+  mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    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,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        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",
+            },
+          },
+        },
+        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,
+          },
+          {
+            name: "", // this.series[1].name,
+            type: "bar",
+            barWidth: 12,
+            // tooltip: {
+            //   valueFormatter: function (value) {
+            //     return value + " ml";
+            //   },
+            // },
+            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,
+          },
+        ],
+      },
+    };
+  },
+  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: 0.67vw;
+
+    &::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: #fad162;
+  }
+
+  .legend-item:nth-child(2):after,
+  .legend-item:nth-child(2):before {
+    background-color: #2160f3;
+  }
+
+  .legend-item:nth-child(3):after,
+  .legend-item:nth-child(3):before {
+    background-color: #13dbf3;
+  }
+
+  .legend-item:nth-child(4):after,
+  .legend-item:nth-child(4):before {
+    background-color: #88ca67;
+  }
+
+  .legend-item:nth-child(5):after,
+  .legend-item:nth-child(5):before {
+    background-color: #5c97fc;
+  }
+
+  .legend-item:nth-child(6):after,
+  .legend-item:nth-child(6):before {
+    background-color: #f48900;
+  }
+
+  .legend-item:nth-child(7):after,
+  .legend-item:nth-child(7):before {
+    background-color: #776bf0;
+  }
+}
+</style>

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

@@ -7,8 +7,16 @@
 
 <template>
   <div class="chip-rate">
-    <ChipRateItem :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
+    <ChipRateItem
-    <ChipRateItem :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
+      :period="period"
+      :cities="['成都', '邯郸', '株洲', '瑞昌']"
+      :color="1"
+    />
+    <ChipRateItem
+      :period="period"
+      :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']"
+      :color="2"
+    />
   </div>
 </template>
 
@@ -17,7 +25,12 @@ import ChipRateItemVue from "./sub/chip/ChipRateItem.vue";
 export default {
   name: "ChipRate",
   components: { ChipRateItem: ChipRateItemVue },
-  props: {},
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
   data() {
     return {};
   },

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

@@ -11,14 +11,10 @@
       <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
     </div>
     <div class="chart" ref="chart"></div>
-    <div class="legend" v-if="1">
+    <div class="legend" v-if="period == '月' || period == '年'">
-      <div class="legend-item">
+      <div class="legend-item" v-for="lgd in legend" :key="lgd.label">
-        <span class="legend-item__value">20%</span>
+        <span class="legend-item__value">{{ lgd.value }}</span>
-        <span class="legend-item__label">2023年累计</span>
+        <span class="legend-item__label">{{ lgd.label }}</span>
-      </div>
-      <div class="legend-item">
-        <span class="legend-item__value">20%</span>
-        <span class="legend-item__label">2024年累计</span>
       </div>
     </div>
   </div>
@@ -29,6 +25,7 @@ import CopilotButtons from "@/views/copilot/components/select.vue";
 import chartMixin from "@/mixins/chart.js";
 import fullscreenMixin from "@/mixins/fullscreen.js";
 import getOptions from "../../../options/chipOptions.js";
+import { mapGetters } from "vuex";
 
 export default {
   name: "ChipRateItem",
@@ -43,44 +40,102 @@ export default {
       type: Number,
       default: 1,
     },
+    period: {
+      type: String,
+      default: "日",
+    },
   },
   data() {
     return {
-      period: "月",
+      factoryId: 0,
-      valueTuple: [100, 100, 200],
+      count: 1,
     };
   },
   computed: {
+    chipRate() {
+      return this.$store.getters.copilot.efficiency.chipRate;
+    },
+    valueTuple() {
+      const getter = this.chipRate;
+      if (this.period === "日" || this.period === "周") {
+        return [
+          getter.previous[this.factoryId],
+          getter.current[this.factoryId],
+          0,
+        ];
+      }
+      // [100, 200, 200]
+      return [
+        getter.previous[this.factoryId],
+        getter.current[this.factoryId],
+        getter.target[this.factoryId],
+      ];
+    },
     options() {
+      const single = this.period === "日" || this.period === "周";
       const year = new Date().getFullYear();
       const month = new Date().getMonth() + 1;
       const vt = this.valueTuple;
-      let titleValue =
+      let titleValue = single
-          vt[0] != null && vt[2] != null && vt[2] !== 0
+          ? (vt[1] != null && `${vt[1] * 100}%`) || "0%"
-            ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
+          : vt[0] != null && vt[2] != null && vt[2] !== 0
-            : "0%",
+          ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
-        subtitle =
+          : "0%",
-          this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
+        subtitle = {
+          日: "本日良率",
+          周: "本周良率",
+          月: `${month}月良率`,
+          年: `${year}良率`,
+        }[this.period];
 
-      return getOptions({
+      const t = getOptions({
-        single: true,
+        single,
         color: this.color == 1 ? "#4CF0E8" : "#1065ff",
         titleValue,
         subtitle,
-        previousSum: this.valueTuple[0],
+        previousSum: vt[0],
-        currentSum: this.valueTuple[1],
+        currentSum: vt[1],
-        targetSum: this.valueTuple[2],
+        targetSum: vt[2],
       });
+      return t;
+    },
+    legend() {
+      const year = new Date().getFullYear();
+      const month = new Date().getMonth() + 1;
+      return [
+        {
+          label:
+            this.period == "月"
+              ? `${year - 1}年${month}月良率`
+              : `${year - 1}年良率`,
+          value: (this.valueTuple[0] * 100).toFixed(0) + "%",
+        },
+        {
+          label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
+          value:  (this.valueTuple[1] * 100).toFixed(0) + "%",
+        },
+      ];
     },
   },
   mounted() {
     this.initOptions(this.options);
   },
-  methods: {
+  watch: {
-    handleCityUpdate() {},
+    period() {
-    fullscreenCallback(isFullscreen) {
+      this.initOptions(this.options);
-      console.log("isFullscreen--->", isFullscreen);
     },
+    factoryId() {
+      this.initOptions(this.options);
+    },
+    chipRate() {
+      this.initOptions(this.options);
+    },
+  },
+  methods: {
+    handleCityUpdate(id) {
+      this.factoryId = id;
+    },
+    fullscreenCallback(isFullscreen) {},
   },
 };
 </script>

src/views/copilot/efficiency/index.vue

@@ -8,10 +8,10 @@
 <template>
   <div class="efficiency-copilot">
     <Container title="芯片良率" icon="chip2">
-      <ChipRate />
+      <ChipRate :period="period" />
     </Container>
     <Container title="标准组件良率" icon="std">
-      <StdRate />
+      <StdRate :period="period" />
     </Container>
     <Container title="芯片OEE" icon="chip">
       <ChipOee :period="period" />

src/views/copilot/efficiency/options/chipOptions.js

@@ -15,7 +15,11 @@ export default function ({
       top: 0,
       containLabel: true,
     },
-    tooltip: {},
+    tooltip: {
+      // formatter(params) {
+      //   return `${params.name}: ${(params.value * 100).toFixed(0)}%`;
+      // }
+    },
     title: {
       text: titleValue,
       left: "49%",
@@ -60,7 +64,7 @@ export default function ({
         data: [
           {
             value: currentSum,
-            name: "当前累计产出",
+            name: "当前良率",
             selected: false,
             itemStyle: {
               borderJoin: "round",
@@ -93,9 +97,9 @@ export default function ({
                 ? currentSum == 0
                   ? 1
                   : 0
-                : 0,
+                : targetSum,
 
-            name: "未达成累计",
+            name: "未达成",
             itemStyle: { color: "transparent" },
             label: { show: false },
           },
@@ -118,7 +122,7 @@ export default function ({
             data: [
               {
                 value: previousSum,
-                name: "上期累计产出",
+                name: "上期良率",
                 selected: false,
                 itemStyle: {
                   borderJoin: "round",
@@ -146,6 +150,9 @@ export default function ({
                     ? 1
                     : 0,
                 name: "-",
+                formatter: {
+                  show: false
+                },
                 itemStyle: { color: "transparent" },
                 label: { show: false },
               },

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

@@ -6,25 +6,123 @@
 -->
 
 <template>
-  <div class="elec-cost">elec cost</div>
+  <LineChartBase
+    v-if="1"
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="elecCost"
+    class="elec-cost"
+  />
+  <BarChartBase
+    v-else
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="elecCost"
+    class="elec-cost"
+  />
 </template>
 
 <script>
+import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue";
+import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue";
+
 export default {
   name: "ElecCost",
-  components: {},
+  components: {
-  props: {},
+    BarChartBase: BarChartBaseVue,
-  data() {
+    LineChartBase: LineChartBaseVue,
-    return {};
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      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" },
+          ];
+      }
+    },
+    series() {
+      const { ftoInvest } = this.$store.getters.copilot.yield;
+      let dataList = null;
+
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = ftoInvest?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = ftoInvest?.pervious;
+          dataList[1] = ftoInvest?.current;
+      }
+
+      return getTemplate(this.period, dataList);
+    },
   },
-  computed: {},
   methods: {},
 };
+
+function getTemplate(period, dataList) {
+  const year = new Date().getFullYear();
+  const month = new Date().getMonth() + 1;
+  return period == "日" || period == "周"
+    ? [
+        {
+          name: period == "日" ? "昨日" : "本周",
+          data: dataList ?? [],
+        },
+      ]
+    : [
+        {
+          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
+          data: dataList ? dataList[0] : [],
+        },
+        {
+          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+          data: dataList ? dataList[1] : [],
+          // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+        },
+      ];
+}
 </script>
 
 <style scoped lang="scss">
 .elec-cost {
-  background: #cc03;
   flex: 1;
 }
 </style>

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

@@ -6,25 +6,110 @@
 -->
 
 <template>
-  <div class="nat-gas">nat-gas</div>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="nat-gas"
+    class="nat-gas"
+  />
 </template>
 
 <script>
+import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+
 export default {
-  name: "NatGas",
+  name: "NatGasCost",
-  components: {},
+  components: { BarChartBase },
-  props: {},
+  props: {
-  data() {
+    period: {
-    return {};
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      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" },
+          ];
+      }
+    },
+    series() {
+      const { ftoInvest } = this.$store.getters.copilot.yield;
+      let dataList = null;
+
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = ftoInvest?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = ftoInvest?.pervious;
+          dataList[1] = ftoInvest?.current;
+      }
+
+      return getTemplate(this.period, dataList);
+    },
   },
-  computed: {},
   methods: {},
 };
+
+function getTemplate(period, dataList) {
+  const year = new Date().getFullYear();
+  const month = new Date().getMonth() + 1;
+  return period == "日" || period == "周"
+    ? [
+        {
+          name: period == "日" ? "昨日" : "本周",
+          data: dataList ?? [],
+        },
+      ]
+    : [
+        {
+          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
+          data: dataList ? dataList[0] : [],
+        },
+        {
+          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+          data: dataList ? dataList[1] : [],
+          // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+        },
+      ];
+}
 </script>
 
 <style scoped lang="scss">
 .nat-gas {
-  background: #31f2;
   flex: 1;
 }
 </style>

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

@@ -6,16 +6,36 @@
 -->
 
 <template>
-  <div class="stock-monitor">仓库监控</div>
+  <div class="stock-monitor">
+    <MonitorItem
+      :cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']"
+      :legendList="dhgList"
+    />
+    <MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :legendList="otherList" />
+  </div>
 </template>
 
 <script>
+import MonitorItemVue from "./sub/monitor/MonitorItem.vue";
+
 export default {
   name: "StockMonitor",
-  components: {},
+  components: { MonitorItem: MonitorItemVue },
   props: {},
   data() {
-    return {};
+    return {
+      dhgList: [
+        { name: "总库存", value: "1000" },
+        { name: "已用库存", value: "500" },
+        { name: "剩余库存", value: "500" },
+      ],
+      otherList: [
+        { name: "分类1", value: "1000" },
+        { name: "分类2", value: "1000" },
+        { name: "分类3", value: "1000" },
+        { name: "分类4", value: "1000" },
+      ],
+    };
   },
   computed: {},
   methods: {},
@@ -24,7 +44,20 @@ export default {
 
 <style scoped lang="scss">
 .stock-monitor {
-  background: #fff2;
   flex: 1;
+  display: flex;
+  gap: 5px;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0;
+    width: 3px;
+    height: 100%;
+    transform: translateX(-50%);
+    background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
+  }
 }
 </style>

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

@@ -6,25 +6,123 @@
 -->
 
 <template>
-  <div class="water-cost">water cost</div>
+  <LineChartBase
+    v-if="0"
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="waterCost"
+    class="water-cost"
+  />
+  <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";
+
 export default {
   name: "WaterCost",
-  components: {},
+  components: {
-  props: {},
+    BarChartBase: BarChartBaseVue,
-  data() {
+    LineChartBase: LineChartBaseVue,
-    return {};
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      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" },
+          ];
+      }
+    },
+    series() {
+      const { ftoInvest } = this.$store.getters.copilot.yield;
+      let dataList = null;
+
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = ftoInvest?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = ftoInvest?.pervious;
+          dataList[1] = ftoInvest?.current;
+      }
+
+      return getTemplate(this.period, dataList);
+    },
   },
-  computed: {},
   methods: {},
 };
+
+function getTemplate(period, dataList) {
+  const year = new Date().getFullYear();
+  const month = new Date().getMonth() + 1;
+  return period == "日" || period == "周"
+    ? [
+        {
+          name: period == "日" ? "昨日" : "本周",
+          data: dataList ?? [],
+        },
+      ]
+    : [
+        {
+          name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
+          data: dataList ? dataList[0] : [],
+        },
+        {
+          name: period == "年" ? `${year}年` : `${year}年${month}月`,
+          data: dataList ? dataList[1] : [],
+          // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
+        },
+      ];
+}
 </script>
 
 <style scoped lang="scss">
 .water-cost {
-  background: #f002;
   flex: 1;
 }
 </style>

src/views/copilot/energy/components/sub/monitor/MonitorItem.vue

@@ -0,0 +1,139 @@
+<!-- 
+    filename: ChipRateItem.vue
+    author: liubin
+    date: 2024-04-29 14:25:18
+    description: 
+-->
+
+<template>
+  <div class="monitor-item">
+    <div class="cities">
+      <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
+    </div>
+    <div class="chart" ref="chart"></div>
+    <div class="legend" v-if="1">
+      <div class="legend-item" v-for="lgd in legendList" :key="lgd.name">
+        <span class="legend-item__label">{{ lgd.name }}</span>
+        <span class="legend-item__value">{{ lgd.value }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CopilotButtons from "@/views/copilot/components/select.vue";
+import chartMixin from "@/mixins/chart.js";
+import fullscreenMixin from "@/mixins/fullscreen.js";
+import getOptions from "../../../options/monitorOptions.js";
+
+export default {
+  name: "ChipRateItem",
+  components: { CopilotButtons },
+  mixins: [chartMixin, fullscreenMixin],
+  props: {
+    cities: {
+      type: Array,
+      default: () => [],
+    },
+    legendList: {
+      type: Array,
+      default: () => [],
+    },
+    color: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      period: "月",
+      valueTuple: [100, 100, 200],
+    };
+  },
+  computed: {
+    options() {
+      const year = new Date().getFullYear();
+      const month = new Date().getMonth() + 1;
+      const vt = this.valueTuple;
+      let titleValue =
+          vt[0] != null && vt[2] != null && vt[2] !== 0
+            ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
+            : "0%",
+        subtitle =
+          this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
+
+      return getOptions({
+        single: true,
+        color: this.color == 1 ? "#4CF0E8" : "#1065ff",
+        titleValue,
+        subtitle,
+        previousSum: this.valueTuple[0],
+        currentSum: this.valueTuple[1],
+        targetSum: this.valueTuple[2],
+      });
+    },
+  },
+  mounted() {
+    this.initOptions(this.options);
+  },
+  methods: {
+    handleCityUpdate() {},
+    fullscreenCallback(isFullscreen) {
+      console.log("isFullscreen--->", isFullscreen);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.monitor-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  backdrop-filter: blur(24px);
+
+  .cities {
+    height: 40px;
+  }
+
+  .chart {
+    align-self: stretch;
+    height: 280px;
+  }
+
+  .legend {
+    height: 80px;
+    display: flex;
+    gap: 40px;
+    justify-content: space-around;
+  }
+
+  .legend-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+
+    &:first-child {
+      .legend-item__value {
+        color: #0e61f5;
+      }
+    }
+
+    &:nth-child(2) {
+      .legend-item__value {
+        color: #0fd5d1;
+      }
+    }
+  }
+
+  .legend-item__value {
+    font-size: 24px;
+    font-weight: 600;
+  }
+}
+</style>
+l

src/views/copilot/energy/index.vue

@@ -8,10 +8,10 @@
 <template>
   <div class="energy-copilot">
     <Container title="仓库监控·当前" icon="chip2">
-      <StockMonitorVue />
+      <StockMonitorVue :period="period" />
     </Container>
     <Container title="天然气能耗" icon="std">
-      <NatGasVue />
+      <NatGasVue :period="period" />
     </Container>
     <Container title="电能耗" icon="chip">
       <ElecCostVue :period="period" />

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

@@ -0,0 +1,156 @@
+export default function ({
+  single = false,
+  color,
+  titleValue,
+  subtitle,
+  previousSum,
+  currentSum,
+  targetSum,
+}) {
+  return {
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0,
+      containLabel: true,
+    },
+    tooltip: {},
+    title: {
+      text: titleValue,
+      left: "49%",
+      top: "39%",
+      textAlign: "center",
+      textStyle: {
+        fontWeight: 600,
+        fontSize: 32,
+        color: "#fffd",
+      },
+      subtext: `\u2002${subtitle}\u2002`,
+      subtextStyle: {
+        fontSize: 14,
+        fontWeight: 100,
+        color: "#fffd",
+        align: "right",
+      },
+    },
+    series: [
+      // 背景 series
+      {
+        type: "pie",
+        name: "当前目标",
+        radius: ["70%", "85%"],
+        center: ["50%", "52%"],
+        emptyCircleStyle: {
+          color: "#040c5f45",
+        },
+      },
+      // 数据 series
+      {
+        type: "pie",
+        radius: ["70%", "85%"],
+        center: ["50%", "52%"],
+        avoidLabelOvervlap: false,
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          {
+            value: currentSum,
+            name: "当前累计产出",
+            selected: false,
+            itemStyle: {
+              borderJoin: "round",
+              borderCap: "round",
+              borderWidth: 12,
+              borderRadius: "50%",
+              // color: {
+              //   type: "linear",
+              //   x: 1,
+              //   y: 0,
+              //   x2: 0,
+              //   y2: 1,
+              //   colorStops: single
+              //     ? [
+              //         { offset: 0, color: `${color}11` },
+              //         { offset: 1, color: `${color}` },
+              //       ]
+              //     : [
+              //         { offset: 0, color: "#4CF0E811" },
+              //         { offset: 1, color: "#4CF0E8" },
+              //       ],
+              // },
+            },
+          },
+          {
+            value:
+              targetSum > currentSum
+                ? targetSum - currentSum
+                : targetSum == 0
+                ? currentSum == 0
+                  ? 1
+                  : 0
+                : 0,
+
+            name: "未达成累计",
+            itemStyle: { color: "transparent" },
+            label: { show: false },
+          },
+        ],
+      },
+      // 数据 series2 - 2023累计
+      single
+        ? null
+        : {
+            type: "pie",
+            radius: ["55%", "70%"],
+            center: ["50%", "52%"],
+            avoidLabelOvervlap: false,
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              {
+                value: previousSum,
+                name: "上期累计产出",
+                selected: false,
+                itemStyle: {
+                  borderJoin: "round",
+                  borderCap: "round",
+                  borderWidth: 12,
+                  borderRadius: "50%",
+                  // color: {
+                  //   type: "linear",
+                  //   x: 1,
+                  //   y: 0,
+                  //   x2: 0,
+                  //   y2: 1,
+                  //   colorStops: [
+                  //     { offset: 0, color: "#1065ff66" },
+                  //     { offset: 1, color: "#1065ff" },
+                  //   ],
+                  // },
+                },
+              },
+              {
+                value:
+                  targetSum > previousSum
+                    ? targetSum - previousSum
+                    : previousSum == 0
+                    ? 1
+                    : 0,
+                name: "-",
+                itemStyle: { color: "transparent" },
+                label: { show: false },
+              },
+            ],
+          },
+    ],
+  };
+}