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

2024-05-09 15:44:59 +08:00
parent 31da2a55a3 9e90449d1a
commit bfa8a73423
70 changed files with 5300 additions and 610 deletions
--- a/src/views/copilot/yield/assets/icon.png
+++ b/src/views/copilot/yield/assets/icon.png
--- a/src/views/copilot/components/BarChartBase.vue
+++ b/src/views/copilot/components/BarChartBase.vue
@@ -0,0 +1,258 @@
+<!--
+    filename: BarChartBase.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description:
+-->
+
+<template>
+  <chart-container class="bar-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: 40vw"
+      :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: "BarChartBase",
+  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));
+      console.log('actualOptions', this.options)
+      actualOptions.series[0].data = val[0].data;
+      actualOptions.series[0].name = val[0].name;
+      actualOptions.series[1].data = val?.[1]?.data || [];
+      actualOptions.series[1].name = val?.[1]?.name || "";
+      this.actualOptions = actualOptions;
+      this.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">
+.bar-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.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>
--- a/src/views/copilot/components/Container.vue
+++ b/src/views/copilot/components/Container.vue
@@ -1,14 +1,15 @@
-<!-- 
+<!--
    filename: Container.vue
    author: liubin
    date: 2024-04-09 10:44:09
-    description: 
+    description:
 -->

 <template>
  <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;
  }

--- a/src/views/copilot/components/ContainerIcon.vue
+++ b/src/views/copilot/components/ContainerIcon.vue
@@ -1,8 +1,9 @@
-<!-- 
-    filename: ContainerIcon.vue
-    author: liubin
-    date: 2024-04-09 16:41:36
-    description: 
+<!--
+ * @Author: zhp
+ * @Date: 2024-04-28 13:42:51
+ * @LastEditTime: 2024-05-07 16:54:54
+ * @LastEditors: zhp
+ * @Description:
 -->

 <template>
@@ -14,8 +15,13 @@ import cube from "@/assets/images/homeindex/fto-icon.png";
 import chip from "@/assets/images/homeindex/chip-icon.png";
 import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
 import bipv from "@/assets/images/homeindex/bipv-icon.png";
+import water from "@/assets/images/homeindex/water-icon.png";
+import gas from "@/assets/images/homeindex/gas-icon.png";
+import ware from "@/assets/images/homeindex/ware-icon.png";
+import flash from "@/assets/images/homeindex/flash-icon.png";
 import std from "@/assets/images/homeindex/std-icon.png";

+
 export default {
  name: "ContainerIcon",
  components: {},
@@ -40,6 +46,10 @@ export default {
        bipv:
          "background: url(" + bipv + ") no-repeat center center / 100% 100%",
        std: "background: url(" + std + ") no-repeat center center / 100% 100%",
+        water: "background: url(" + water + ") no-repeat center center / 100% 100%",
+        gas: "background: url(" + gas + ") no-repeat center center / 100% 100%",
+        flash: "background: url(" + flash + ") no-repeat center center / 100% 100%",
+        ware: "background: url(" + ware + ") no-repeat center center / 100% 100%",
      }[this.icon];
    },
  },
--- a/src/views/copilot/components/CopilotHeader.vue
+++ b/src/views/copilot/components/CopilotHeader.vue
@@ -1,15 +1,15 @@
-<!-- 
+<!--
    filename: CopilotHeader.vue
    author: liubin
    date: 2024-04-16 15:14:01
-    description: 
+    description:
 -->

 <template>
  <div class="copilot-header">
    <section class="menu">
      <CopilotButton
-        v-for="i in ['产量', '效率', '能源']"
+        v-for="i in ['产量', '效率', '综合']"
        :key="i"
        :label="i"
        :active="i === active"
@@ -63,7 +63,7 @@ export default {
    toggleFullScreen() {
      this.isFullscreen = !this.isFullscreen;

-      screenfull.toggle(document.querySelector(".copilot-layout"));
+      screenfull.toggle(document.querySelector(".copilot-layout"))
      // 矫正宽度
      // const el = document.querySelector(".copilot-layout");
      // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
--- a/src/views/copilot/components/LineChartBase.vue
+++ b/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>
--- a/src/views/copilot/container.vue
+++ b/src/views/copilot/container.vue
@@ -1,21 +1,17 @@
-<!-- 
+
+<!--
    filename: container.vue
    author: liubin
    date: 2024-04-16 14:51:25
-    description: 
+    description:
 -->

 <template>
-  <div class="copilot-layout">
-    <CopilotHeaderVue
-      :active="page"
-      :period="period"
-      @update:active="page = $event"
-      @update:period="period = $event"
-    />
+  <div class="copilot-layout" ref="copilot-layout">
+    <CopilotHeaderVue :active="page" :period="period" @update:active="page = $event" @update:period="period = $event" />

    <YieldCopilot v-if="page == '产量'" :period="period" />
-    <EnergyCopilot v-if="page == '能源'" :period="period" />
+    <EnergyCopilot v-if="page == '综合'" :period="period" />
    <EfficiencyCopilot v-if="page == '效率'" :period="period" />

    <div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
@@ -52,8 +48,8 @@ export default {
  // },
 };
 </script>
-
 <style>
+
 .copilot-layout {
  padding: 16px;
  background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
--- a/src/views/copilot/efficiency/assets/icon.png
+++ b/src/views/copilot/efficiency/assets/icon.png
--- a/src/views/copilot/efficiency/components/BipvOutput.vue
+++ b/src/views/copilot/efficiency/components/BipvOutput.vue
@@ -0,0 +1,38 @@
+<!-- 
+    filename: BipvOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue data-source="BIPV产出" :period="period" />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
+
+export default {
+  name: "BipvOutput",
+  components: { DoubleRingWrapperVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>
--- a/src/views/copilot/efficiency/components/ChipInvest.vue
+++ b/src/views/copilot/efficiency/components/ChipInvest.vue
@@ -0,0 +1,106 @@
+<!-- 
+    filename: FtoInvest.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="ChipInvest"
+    class="chip-invest-chart"
+  />
+</template>
+
+<script>
+import BarChartBase from "./sub/bar/BarChartBase.vue";
+
+export default {
+  name: "ChipInvest",
+  components: { BarChartBase },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  props: {
+    period: {
+      type: String,
+      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" },
+          ];
+      }
+    },
+    series() {
+      const { chipInvest } = this.$store.getters.copilot.yield;
+      let dataList = null;
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = chipInvest?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = chipInvest?.pervious;
+          dataList[1] = chipInvest?.current;
+      }
+      return getTemplate(this.period, dataList);
+    },
+  },
+};
+
+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>
--- a/src/views/copilot/efficiency/components/ChipOee.vue
+++ b/src/views/copilot/efficiency/components/ChipOee.vue
@@ -0,0 +1,113 @@
+<!--
+    filename: ChipOee.vue
+    author: liubin
+    date: 2024-04-29 08:51:04
+    description: 芯片OEE
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="chipOEE"
+    class="chip-oee"
+  />
+</template>
+
+<script>
+import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
+export default {
+  name: "ChipOEE",
+  components: { BarChartBase },
+  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() {
+      // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
+      const { chipOee } = this.$store.getters.copilot.efficiency;
+      let dataList = null;
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = chipOee?.current;
+        case "周":
+          dataList = chipOee?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = chipOee?.previous;
+          dataList[1] = chipOee?.current;
+      }
+      // console.log(dataList)
+      return getTemplate(this.period, dataList);
+    },
+  },
+  methods: {},
+};
+
+function getTemplate(period, dataList) {
+  const year = new Date().getFullYear();
+  const month = new Date().getMonth() + 1;
+  console.log('11111', dataList);
+  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"></style>
--- a/src/views/copilot/efficiency/components/ChipOutput.vue
+++ b/src/views/copilot/efficiency/components/ChipOutput.vue
@@ -0,0 +1,38 @@
+<!-- 
+    filename: ChipOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue data-source="芯片产出" :period="period" />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
+
+export default {
+  name: "ChipOutput",
+  components: { DoubleRingWrapperVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>
--- a/src/views/copilot/efficiency/components/ChipRate.vue
+++ b/src/views/copilot/efficiency/components/ChipRate.vue
@@ -0,0 +1,60 @@
+<!-- 
+    filename: ChipRate.vue
+    author: liubin
+    date: 2024-04-29 08:50:54
+    description: 芯片良率
+-->
+
+<template>
+  <div class="chip-rate">
+    <ChipRateItem
+      :period="period"
+      :cities="['成都', '邯郸', '株洲', '瑞昌']"
+      :color="1"
+    />
+    <ChipRateItem
+      :period="period"
+      :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']"
+      :color="2"
+    />
+  </div>
+</template>
+
+<script>
+import ChipRateItemVue from "./sub/chip/ChipRateItem.vue";
+export default {
+  name: "ChipRate",
+  components: { ChipRateItem: ChipRateItemVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chip-rate {
+  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>
--- a/src/views/copilot/efficiency/components/FtoInvest.vue
+++ b/src/views/copilot/efficiency/components/FtoInvest.vue
@@ -0,0 +1,108 @@
+<!-- 
+    filename: FtoInvest.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="ftoInvest"
+    class="fto-chart"
+  />
+</template>
+
+<script>
+import BarChartBase from "./sub/bar/BarChartBase.vue";
+
+export default {
+  name: "FtoInvest",
+  components: { BarChartBase },
+  data() {
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      xAxis: cities,
+    };
+  },
+  props: {
+    period: {
+      type: String,
+      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" },
+          ];
+      }
+    },
+    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);
+    },
+  },
+};
+
+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>
--- a/src/views/copilot/efficiency/components/StdOutput.vue
+++ b/src/views/copilot/efficiency/components/StdOutput.vue
@@ -0,0 +1,38 @@
+<!-- 
+    filename: StdOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue data-source="标准组件产出" :period="period" />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
+
+export default {
+  name: "StdOutput",
+  components: { DoubleRingWrapperVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>
--- a/src/views/copilot/efficiency/components/StdRate.vue
+++ b/src/views/copilot/efficiency/components/StdRate.vue
@@ -0,0 +1,62 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-08 15:55:24
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <div class="std-rate">
+    <div class="span-2">
+      <StdRateItem :period="period" :city="cities[5]" />
+    </div>
+    <div v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
+      <StdRateItem :period="period" :city="item" />
+    </div>
+  </div>
+</template>
+
+<script>
+import StdRateItem from "./sub/std/StdRateItem.vue";
+export default {
+  name: "StdRate",
+  components: { StdRateItem },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  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 },
+      ],
+    };
+  },
+  computed: {
+
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.std-rate {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+}
+
+.span-2 {
+  grid-column: span 2;
+}
+</style>
--- a/src/views/copilot/efficiency/components/TransformRate.vue
+++ b/src/views/copilot/efficiency/components/TransformRate.vue
@@ -0,0 +1,110 @@
+<!--
+    filename: TransformRate.vue
+    author: liubin
+    date: 2024-04-29 08:50:34
+    description: 转化效率
+-->
+
+<template>
+  <BarChartBase
+    :legend="legend"
+    :series="series"
+    :xAxis="xAxis"
+    in="chipOEE"
+    class="chip-oee"
+  />
+</template>
+
+<script>
+import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
+export default {
+  name: "TransformRate",
+  components: { BarChartBase },
+  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 { transformRate } = this.$store.getters.copilot.efficiency;
+      let dataList = null;
+
+      switch (this.period) {
+        case "日":
+        case "周":
+          dataList = transformRate?.current;
+          break;
+        default:
+          dataList = [];
+          dataList[0] = transformRate?.previous;
+          dataList[1] = transformRate?.current;
+      }
+
+      return getTemplate(this.period, dataList);
+    },
+  },
+  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"></style>
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartBase.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartBase.vue
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
@@ -0,0 +1,258 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 13:22:43
+ * @LastEditTime: 2024-05-08 15:52:09
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+  <chart-container class="bar-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: 40vw"
+      :style="{ height: vHeight + 'vh' }"
+    ></div>
+  </chart-container>
+</template>
+
+<script>
+import screenfull from "screenfull";
+import ChartContainer from "../../../../components/ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
+
+export default {
+  name: "BarChartBase",
+  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;
+      }
+      console.log(val)
+      const actualOptions = JSON.parse(JSON.stringify(this.options))
+      actualOptions.series[0].data = val[0].data;
+      actualOptions.series[0].name = val[0].name;
+      actualOptions.series[1].data = val?.[1]?.data || [];
+      actualOptions.series[1].name = val?.[1]?.name || "";
+      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">
+.bar-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.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+
+  .legend-item:nth-child(1):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(2):before {
+    background-color: #58adfa;
+  }
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
+++ b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
@@ -0,0 +1,195 @@
+<!--
+    filename: ChipRateItem.vue
+    author: liubin
+    date: 2024-04-29 14:25:18
+    description:
+-->
+
+<template>
+  <div class="chip-rate-item">
+    <div class="cities">
+      <CopilotButtons :options="cities" @update:active="handleCityUpdate" />
+    </div>
+    <div class="chart" ref="chart"></div>
+    <div class="legend" v-if="period == '月' || period == '年'">
+      <div class="legend-item" v-for="lgd in legend" :key="lgd.label">
+        <span class="legend-item__value">{{ lgd.value }}</span>
+        <span class="legend-item__label">{{ lgd.label }}</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/chipOptions.js";
+import { mapGetters } from "vuex";
+
+export default {
+  name: "ChipRateItem",
+  components: { CopilotButtons },
+  mixins: [chartMixin, fullscreenMixin],
+  props: {
+    cities: {
+      type: Array,
+      default: () => [],
+    },
+    color: {
+      type: Number,
+      default: 1,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {
+      factoryId: 0,
+      count: 1,
+    };
+  },
+  computed: {
+    chipRate() {
+      return this.$store.getters.copilot.efficiency.chipRate;
+    },
+    valueTuple() {
+      const getter = this.chipRate;
+      console.log(getter)
+      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 = single
+          ? (vt[1] != null && `${vt[1] * 100}%`) || "0%"
+          : vt[0] != null && vt[2] != null && vt[2] !== 0
+          ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%`
+          : "0%",
+        subtitle = {
+          日: "本日良率",
+          周: "本周良率",
+          月: `${month}月良率`,
+          年: `${year}良率`,
+        }[this.period];
+
+      const t = getOptions({
+        single,
+        color: this.color == 1 ? "#4CF0E8" : "#1065ff",
+        titleValue,
+        subtitle,
+        previousSum: vt[0],
+        currentSum: vt[1],
+        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);
+  },
+  watch: {
+    period() {
+      this.initOptions(this.options);
+    },
+    factoryId() {
+      this.initOptions(this.options);
+    },
+    chipRate() {
+      this.initOptions(this.options);
+    },
+  },
+  methods: {
+    handleCityUpdate(id) {
+      this.factoryId = id;
+    },
+    fullscreenCallback(isFullscreen) {},
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.chip-rate-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>
+
--- a/src/views/copilot/efficiency/components/sub/city/CityData.vue
+++ b/src/views/copilot/efficiency/components/sub/city/CityData.vue
@@ -0,0 +1,149 @@
+<!-- 
+    filename: CityData.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <div class="city-data">
+    <div class="headquarter">
+      <div class="inner-shadow w-1"></div>
+      <div class="inner-shadow flex-1 flex">
+        <CityName value="凯盛光伏" />
+        <CityValue :value="headquarterValue" horizontal :period="period" />
+      </div>
+      <div class="inner-shadow w-1"></div>
+    </div>
+
+    <div class="city-item-container">
+      <CityItem
+        v-for="city in cities"
+        :key="city.name"
+        :location="city.name"
+        :value="city.value"
+        :period="period"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CityItemVue from "./CityItem.vue";
+import CityNameVue from "./CityName.vue";
+import CityValueVue from "./CityValue.vue";
+
+export default {
+  name: "CityData",
+  components: {
+    CityItem: CityItemVue,
+    CityName: CityNameVue,
+    CityValue: CityValueVue,
+  },
+  props: {
+    dataSource: {
+      type: String,
+      default: null,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    headquarterValue() {
+      let getterName = "";
+      switch (this.dataSource) {
+        case "标准组件产出":
+          getterName = "stdOutput";
+          break;
+        case "芯片产出":
+          getterName = "chipOutput";
+          break;
+        case "BIPV产出":
+          getterName = "bipvOutput";
+          break;
+      }
+      return (
+        "" + (this.$store.getters.copilot.yield[getterName]?.current?.[5] ?? 0)
+      );
+    },
+    cities() {
+      let getterName = "";
+      switch (this.dataSource) {
+        case "标准组件产出":
+          getterName = "stdOutput";
+          break;
+        case "芯片产出":
+          getterName = "chipOutput";
+          break;
+        case "BIPV产出":
+          getterName = "bipvOutput";
+          break;
+      }
+      const _cities = [
+        { name: "瑞昌", value: 0 },
+        { name: "邯郸", value: 0 },
+        { name: "株洲", value: 0 },
+        { name: "佳木斯", value: 0 },
+        { name: "成都", value: 0 },
+        { name: "凯盛光伏", value: 0 },
+        { name: "蚌埠兴科", value: 0 },
+      ];
+      this.$store.getters.copilot.yield[getterName]?.current?.forEach(
+        (v, idx) => {
+          _cities[idx].value = v ?? 0;
+        }
+      );
+      // 删掉凯盛光伏
+      _cities.splice(4, 1);
+      return _cities;
+    },
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.city-data {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.headquarter {
+  flex: 1;
+  display: flex;
+  gap: 8px;
+}
+
+.w-1 {
+  width: 70px;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.inner-shadow {
+  box-shadow: inset 0 0 12px 2px #fff3;
+  border-radius: 4px;
+}
+
+.city-item-container {
+  flex: 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/city/CityItem.vue
+++ b/src/views/copilot/efficiency/components/sub/city/CityItem.vue
@@ -0,0 +1,59 @@
+<!-- 
+    filename: CityItem.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <div class="city-item inner-shadow">
+    <CityName :value="location" />
+    <CityValue :value="value + ''" :period="period" />
+  </div>
+</template>
+
+<script>
+import CityNameVue from "./CityName.vue";
+import CityValueVue from "./CityValue.vue";
+import GradientTextVue from "../gradient/GradientText.vue";
+
+export default {
+  name: "CityItem",
+  components: {
+    GradientTextVue,
+    CityName: CityNameVue,
+    CityValue: CityValueVue,
+  },
+  props: {
+    location: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.city-item {
+  display: flex;
+}
+
+.inner-shadow {
+  box-shadow: inset 0 0 12px 2px #fff3;
+  border-radius: 4px;
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/city/CityName.vue
+++ b/src/views/copilot/efficiency/components/sub/city/CityName.vue
@@ -0,0 +1,55 @@
+<!-- 
+    filename: CityName.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <div class="city-name">
+    <img :src="Icon" alt="city icon" />
+    <span>{{ value }}</span>
+  </div>
+</template>
+
+<script>
+import Icon from "../../../assets/icon.png";
+
+export default {
+  name: "CityName",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return { Icon };
+  },
+};
+</script>
+
+<style scoped>
+.city-name {
+  min-width: 80px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  flex: 1;
+}
+
+img {
+  /* width: 32px; */
+  width: 1.543vw;
+}
+
+span {
+  /* font-size: 12px;   */
+  font-size: 0.77vw;
+  letter-spacing: 2px;
+  text-align: center;
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/city/CityValue.vue
+++ b/src/views/copilot/efficiency/components/sub/city/CityValue.vue
@@ -0,0 +1,127 @@
+<!-- 
+    filename: CityValue.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <div class="city-value" :class="[horizontal ? 'horizontal' : '']">
+    <span class="hint" :class="[horizontal ? 'horizontal' : '']">{{
+      period == "周" ? "本周产出" : "今日产出"
+    }}</span>
+    <span class="value" :class="[horizontal ? 'horizontal' : '']">{{
+      value | numberFilter
+    }}</span>
+    <!-- <GradientTextVue :text="value" :size="horizontal ? 32 : 26" /> -->
+  </div>
+</template>
+
+<script>
+import GradientTextVue from "../gradient/GradientText.vue";
+
+export default {
+  name: "CityValue",
+  components: { GradientTextVue },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    horizontal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  filters: {
+    numberFilter(value) {
+      if (value != null && !isNaN(parseInt(value))) {
+        return parseInt(value).toLocaleString();
+      } else {
+        return value;
+      }
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.city-value {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  flex: 2;
+  position: relative;
+}
+
+.city-value.horizontal {
+  flex-direction: row;
+}
+
+.city-value::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    transparent 20%,
+    #fff 50%,
+    transparent 80%
+  );
+}
+
+span.hint {
+  margin: 0 0.77vw;
+  font-size: 0.77vw;
+  order: 2;
+  /* margin: 0 12px;
+  width: 32px;
+  font-size: 12px; */
+}
+
+span.hint.horizontal {
+  margin: 0 1.235vw;
+  width: 1.543vw;
+  order: 1;
+  font-size: 0.77vw;
+  /* margin: 0 12px;
+  width: 32px;
+  font-size: 12px; */
+}
+
+.value {
+  color: #4dd2fe;
+  text-align: center;
+  font-size: 1.132vw;
+  order: 1;
+}
+.value.horizontal {
+  text-align: left;
+  flex: 1;
+  font-size: 1.543vw;
+  order: 2;
+}
+
+svg,
+.value {
+  width: 100px;
+  order: 1;
+}
+
+.value.horizontal,
+svg.horizontal {
+  order: 2;
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/gradient/GradientText.vue
+++ b/src/views/copilot/efficiency/components/sub/gradient/GradientText.vue
@@ -0,0 +1,64 @@
+<!-- 
+    filename: GradientText.vue
+    author: liubin
+    date: 2024-04-24 16:33:25
+    description: 
+-->
+
+<template>
+  <svg :height="size + 8" width="100%">
+    <defs>
+      <linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
+        <stop offset="0%" style="stop-color: #00fff4; stop-opacity: 1" />
+        <stop offset="100%" style="stop-color: #37bdfe; stop-opacity: 1" />
+      </linearGradient>
+    </defs>
+    <text
+      x="0"
+      :y="size"
+      fill="url(#smoke-text)"
+      :style="{
+        fontSize: `${size}px`,
+        letterSpacing: spacing || '2px',
+        fontFamily: 'Calibri, Verdana, sans-serif',
+      }"
+    >
+      {{ text | numberFilter }}
+    </text>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "GradientText",
+  components: {},
+  props: {
+    text: {
+      type: String,
+      default: "Test",
+    },
+    spacing: {
+      type: String,
+      default: "1px",
+    },
+    size: {
+      type: Number,
+      default: 24,
+    },
+  },
+  filters: {
+    numberFilter(value) {
+      if (value != null && !isNaN(parseInt(value))) {
+        return parseInt(value).toLocaleString();
+      } else {
+        return value;
+      }
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/copilot/efficiency/components/sub/ring/DoubleRingChart.vue
+++ b/src/views/copilot/efficiency/components/sub/ring/DoubleRingChart.vue
@@ -0,0 +1,221 @@
+<!-- 
+    filename: DoubleRingChart.vue
+    author: liubin
+    date: 2024-04-17 11:01:55
+    description: 
+-->
+
+<template>
+  <div class="double-ring-chart">
+    <div ref="chart" class="double-ring-chart__container"></div>
+    <!-- style="{ height: vHeight + 'vh' }" -->
+    <div class="double-ring-chart__legend">
+      <div v-for="item in legendItems" :key="item.label" class="legend-item">
+        <span class="legend-item__label">{{ item.label }}</span>
+        <span class="legend-item__value">{{ item.value | numberFilter }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartMixin from "@/mixins/chart.js";
+import fullscreenMixin from "@/mixins/fullscreen.js";
+import getOptions from "../../../options/double-ring-chart-options";
+
+export default {
+  name: "DoubleRingChart",
+  mixins: [chartMixin, fullscreenMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 24,
+    },
+    factoryId: {
+      type: Number,
+      required: true,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+    dataSource: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {};
+  },
+  filters: {
+    numberFilter(val) {
+      if (!isNaN(val)) {
+        return (+val).toLocaleString();
+      }
+      return 0;
+    },
+  },
+  computed: {
+    dataSourceField() {
+      switch (this.dataSource) {
+        case "标准组件产出":
+          return "stdOutput";
+        case "芯片产出":
+          return "chipOutput";
+        case "BIPV产出":
+          return "bipvOutput";
+      }
+    },
+    valueTuple() {
+      // [previousValue, currentValue, sumValue?]
+      const getter = this.$store.getters.copilot.yield[this.dataSourceField];
+      if (this.period === "日" || this.period === "周") {
+        return [
+          getter.previous[this.factoryId],
+          getter.current[this.factoryId],
+        ];
+      }
+      // [100, 200, 200]
+      return [
+        getter.previous[this.factoryId],
+        getter.current[this.factoryId],
+        getter.target[this.factoryId],
+      ];
+    },
+
+    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]}%`
+            : "0%",
+        subtitle =
+          this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
+
+      return getOptions({
+        titleValue,
+        subtitle,
+        previousSum: this.valueTuple[0],
+        currentSum: this.valueTuple[1],
+        targetSum: this.valueTuple[2],
+      });
+    },
+
+    legendItems() {
+      return calculateItems(this.period, this.valueTuple);
+    },
+  },
+  watch: {
+    legendItems() {
+      this.initOptions(this.options);
+    },
+  },
+  mounted() {
+    this.initOptions(this.options);
+  },
+  methods: {
+    // fullscreen mixin 需要的回调
+    fullscreenCallback(isFullscreen) {
+      console.log("isFullscreen--->", isFullscreen);
+    },
+  },
+};
+
+function calculateItems(period, valueTuple) {
+  let items = [];
+  const today = new Date().getDate();
+  const month = new Date().getMonth() + 1;
+  const year = new Date().getFullYear();
+  switch (period) {
+    case "日":
+      items = [
+        { label: `${month}月${today}日累计`, value: valueTuple[1] },
+        { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
+      ];
+      break;
+    case "周":
+      items = [
+        { label: `本周累计`, value: valueTuple[1] },
+        { label: `去年本周累计`, value: valueTuple[0] },
+      ];
+      break;
+    case "月":
+      items = [
+        { label: `${month}月累计`, value: valueTuple[1] },
+        { label: `去年${month}月累计`, value: valueTuple[0] },
+        { label: `${month}月目标`, value: valueTuple[2] },
+      ];
+      break;
+    case "年":
+      items = [
+        { label: `${year}年累计`, value: valueTuple[1] },
+        { label: `${year - 1}年累计`, value: valueTuple[0] },
+        { label: `${year}年目标`, value: valueTuple[2] },
+      ];
+      break;
+  }
+  return items;
+}
+</script>
+
+<style scoped>
+.double-ring-chart {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.double-ring-chart__container {
+  flex: 1;
+  height: 0;
+}
+
+.double-ring-chart__legend {
+  padding: 12px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+}
+
+.legend-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.legend-item__label {
+  position: relative;
+}
+
+.legend-item__label::before {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #ccc;
+  border-radius: 2px;
+  top: 6px;
+  left: -18px;
+}
+
+.legend-item:nth-child(1) .legend-item__label::before {
+  background: #12fff5;
+}
+.legend-item:nth-child(1) .legend-item__value {
+  color: #12fff5;
+}
+
+.legend-item:nth-child(2) .legend-item__label::before {
+  background: #0f65ff;
+}
+.legend-item:nth-child(2) .legend-item__value {
+  color: #0f65ff;
+}
+
+.legend-item:nth-child(3) .legend-item__label::before {
+  background: #003982;
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/ring/DoubleRingWrapper.vue
+++ b/src/views/copilot/efficiency/components/sub/ring/DoubleRingWrapper.vue
@@ -0,0 +1,86 @@
+<!-- 
+    filename: DoubleRingWrapper.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <div class="double-ring-wrapper">
+    <template v-if="period == '月' || period == '年'">
+      <copilot-select
+        @update:active="handleActiveUpdate"
+        :options="cityOptions"
+      />
+      <div class="flex-1 stretch">
+        <DoubleRingChartVue
+          :data-source="dataSource"
+          :period="period"
+          :factoryId="factoryId"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <CityData :data-source="dataSource" :period="period" />
+    </template>
+  </div>
+</template>
+
+<script>
+import CopilotSelect from "@/views/copilot/components/select.vue";
+import DoubleRingChartVue from "./DoubleRingChart.vue";
+import CityData from "../city/CityData.vue";
+
+export default {
+  name: "DoubleRingWrapper",
+  components: { CopilotSelect, DoubleRingChartVue, CityData },
+  props: {
+    dataSource: {
+      type: String,
+      default: null,
+    },
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
+  data() {
+    return {
+      factoryId: 4, // 默认成都
+      cityOptions: [
+        "成都",
+        "邯郸",
+        "株洲",
+        "瑞昌",
+        "佳木斯",
+        "凯盛光伏",
+        "蚌埠兴科",
+      ],
+    };
+  },
+  methods: {
+    handleActiveUpdate(index) {
+      this.factoryId = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.double-ring-wrapper {
+  height: 100%;
+  padding: 12px 24px;
+  display: flex;
+  gap: 12px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/std/CityName.vue
+++ b/src/views/copilot/efficiency/components/sub/std/CityName.vue
@@ -0,0 +1,66 @@
+<!--
+    filename: CityName.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description:
+-->
+
+<template>
+  <div class="city-name">
+    <img :src="Icon" alt="city icon" />
+    <span>{{ value }}</span>
+  </div>
+</template>
+
+<script>
+import Icon from "@/views/copilot/assets/icon.png";
+
+export default {
+  name: "CityName",
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return { Icon };
+  },
+};
+</script>
+
+<style scoped>
+.city-name {
+  min-width: 80px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  position: relative;
+}
+
+.city-name::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 2px;
+  background: linear-gradient(to top, transparent, #0b5be1ee, transparent);
+  height: 100%;
+  transform: translateY(-50%);
+}
+
+img {
+  /* width: 32px; */
+  width: 1.543vw;
+}
+
+span {
+  /* font-size: 12px;   */
+  font-size: 0.77vw;
+  letter-spacing: 2px;
+  text-align: center;
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/std/ProgressBar.vue
+++ b/src/views/copilot/efficiency/components/sub/std/ProgressBar.vue
@@ -0,0 +1,113 @@
+<!--
+    filename: ProgressBar.vue
+    author: liubin
+    date: 2024-04-29 09:18:30
+    description:
+-->
+
+<template>
+  <div class="progress-bar" :data-title="title" :data-rate="dataRate">
+    <div
+      class="progress-bar__rate"
+      :style="{ width: dataRate == '-' ? 0 : dataRate }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProgressBar",
+  components: {},
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    dataRate() {
+      return this.total == 0
+        ? "-"
+        : `${(parseFloat(this.value / this.total) * 100).toFixed(0)}%`;
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.progress-bar {
+  height: 10px;
+  background-color: #002f6b;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  position: relative;
+
+  &:before {
+    content: attr(data-title);
+    display: inline-block;
+    color: #fff;
+    position: absolute;
+    bottom: -200%;
+    font-size: 12px;
+  }
+
+  &:after {
+    content: attr(data-rate);
+    display: inline-block;
+    color: #fff;
+    position: absolute;
+    bottom: -200%;
+    right: 0;
+    font-size: 12px;
+  }
+
+  &:first-child {
+    &:after {
+      color: #11eae3;
+    }
+  }
+  &:nth-child(2) {
+    &:after {
+      color: #0e65fd;
+    }
+  }
+
+  .progress-bar__rate {
+    position: absolute;
+    display: inline-block;
+    height: 100%;
+    width: 0;
+    border-radius: 4px;
+  }
+
+  &:first-child {
+    .progress-bar__rate {
+      background: linear-gradient(
+        to right,
+        #004c5e11 10%,
+        #004c5e,
+        #0ac0c0,
+        #11eae3
+      );
+    }
+  }
+
+  &:nth-child(2) {
+    .progress-bar__rate {
+      background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd);
+    }
+  }
+}
+</style>
--- a/src/views/copilot/efficiency/components/sub/std/StdRateItem.vue
+++ b/src/views/copilot/efficiency/components/sub/std/StdRateItem.vue
@@ -0,0 +1,124 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-08 14:54:24
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <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 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 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" />
+    </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" />
+    </div>
+  </div>
+</template>
+
+<script>
+import CityName from "./CityName.vue";
+import ProgressBar from "./ProgressBar.vue";
+
+export default {
+  name: "StdRateItem",
+  components: { CityName, ProgressBar },
+  props: {
+    city: {
+      type: Object,
+      required: true,
+    },
+    period: {
+      type: String,
+      default: "日",
+    }
+  },
+  data() {
+    return {
+      showDay:true,
+    };
+  },
+  computed: {
+    title() {
+      switch (this.period) {
+        case "日":
+          return "今日"
+        case "周":
+          return  "本周"
+        case "月":
+          const year = new Date().getFullYear();
+          const month = new Date().getMonth() + 1;
+          return `${year - 1}年${month}月累计`
+        case "年": {
+          const year = new Date().getFullYear();
+          // return [
+           return `${year - 1}年累计`
+          // ];
+        }
+        default:
+         return "今日"
+      }
+    },
+    titleEnd() {
+      switch (this.period) {
+        // case "日":
+        //   return "今日"
+        // case "周":
+        //   return "本周"
+        case "月":
+          const year = new Date().getFullYear();
+          const month = new Date().getMonth() + 1;
+          return  `${year}年${month}月目标`
+        case "年": {
+          const year = new Date().getFullYear();
+          // return [
+          return  `${year}年目标`
+          // ];
+        }
+      }
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.std-rate-item {
+  box-shadow: inset 0 0 12px 2px #fff3;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+}
+
+.std-rate-item__value {
+  flex: 1;
+  margin: 6px;
+  display: flex;
+  gap: 12px;
+  height: 60px;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>
--- a/src/views/copilot/efficiency/index.vue
+++ b/src/views/copilot/efficiency/index.vue
@@ -1,24 +1,44 @@
-<!-- 
-    filename: index.vue
-    author: liubin
-    date: 2024-04-16 14:40:15
-    description: 效率驾驶舱
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:04:53
+ * @LastEditTime: 2024-05-08 15:58:14
+ * @LastEditors: zhp
+ * @Description:
 -->

 <template>
  <div class="efficiency-copilot">
-    <Container title="芯片良率" icon="chip2"></Container>
-    <Container title="标准组件良率" icon="std"></Container>
-    <Container title="芯片OEE" icon="chip"></Container>
-    <Container title="转化效率" icon="cube"></Container>
+    <Container title="芯片良率" icon="chip2">
+      <ChipRate :period="period" />
+    </Container>
+    <Container title="标准组件良率" icon="std">
+      <StdRate :period="period" />
+    </Container>
+    <Container title="芯片OEE" icon="chip">
+      <ChipOee :period="period" />
+    </Container>
+    <Container title="转化效率" icon="cube">
+      <TransformRate :period="period" />
+    </Container>
  </div>
 </template>

 <script>
 import Container from "@/views/copilot/components/Container.vue";
+import ChipOeeVue from "./components/ChipOee.vue";
+import ChipRateVue from "./components/ChipRate.vue";
+import StdRateVue from "./components/StdRate.vue";
+import TransformRateVue from "./components/TransformRate.vue";
+
 export default {
  name: "EfficiencyCopilot",
-  components: { Container },
+  components: {
+    Container,
+    ChipOee: ChipOeeVue,
+    ChipRate: ChipRateVue,
+    StdRate: StdRateVue,
+    TransformRate: TransformRateVue,
+  },
  props: {
    period: {
      type: String,
@@ -39,7 +59,10 @@ export default {
  methods: {
    fetchData(period = "日") {
      console.log(`效率驾驶舱，获取${period}数据`);
-      this.$store.dispatch("copilot/initCopilot", { period, source: "efficiency" });
+      this.$store.dispatch("copilot/initCopilot", {
+        period,
+        source: "efficiency",
+      });
    },
  },
 };
@@ -51,7 +74,7 @@ export default {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows: .5fr .5fr;
 }

 .efficiency-copilot > div {
--- a/src/views/copilot/efficiency/options/chipOptions.js
+++ b/src/views/copilot/efficiency/options/chipOptions.js
@@ -0,0 +1,163 @@
+export default function ({
+  single = false,
+  color,
+  titleValue,
+  subtitle,
+  previousSum,
+  currentSum,
+  targetSum,
+}) {
+  return {
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0,
+      containLabel: true,
+    },
+    tooltip: {
+      // formatter(params) {
+      //   return `${params.name}: ${(params.value * 100).toFixed(0)}%`;
+      // }
+    },
+    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
+                : targetSum,
+
+            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: "-",
+                formatter: {
+                  show: false
+                },
+                itemStyle: { color: "transparent" },
+                label: { show: false },
+              },
+            ],
+          },
+    ],
+  };
+}
--- a/src/views/copilot/efficiency/options/double-ring-chart-options.js
+++ b/src/views/copilot/efficiency/options/double-ring-chart-options.js
@@ -0,0 +1,145 @@
+export default ({
+  titleValue,
+  subtitle,
+  previousSum,
+  currentSum,
+  targetSum,
+}) => ({
+  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: "#042c5f33",
+      },
+    },
+    // 数据 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: [
+                { 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累计
+    {
+      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 },
+        },
+      ],
+    },
+  ],
+});
--- a/src/views/copilot/energy/components/ElecCost.vue
+++ b/src/views/copilot/energy/components/ElecCost.vue
@@ -0,0 +1,128 @@
+<!-- 
+    filename: ElecCost.vue
+    author: liubin
+    date: 2024-04-29 16:37:01
+    description: 电能耗
+-->
+
+<template>
+  <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: {
+    BarChartBase: BarChartBaseVue,
+    LineChartBase: LineChartBaseVue,
+  },
+  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);
+    },
+  },
+  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 {
+  flex: 1;
+}
+</style>
--- a/src/views/copilot/energy/components/NatGas.vue
+++ b/src/views/copilot/energy/components/NatGas.vue
@@ -0,0 +1,115 @@
+<!-- 
+    filename: NatGas.vue
+    author: liubin
+    date: 2024-04-29 16:36:27
+    description: 天然气能耗
+-->
+
+<template>
+  <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: "NatGasCost",
+  components: { BarChartBase },
+  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);
+    },
+  },
+  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 {
+  flex: 1;
+}
+</style>
--- a/src/views/copilot/energy/components/StockMonitor.vue
+++ b/src/views/copilot/energy/components/StockMonitor.vue
@@ -0,0 +1,64 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-08 09:39:15
+ * @LastEditors: zhp
+ * @Description:
+-->
+
+<template>
+  <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: { MonitorItem: MonitorItemVue },
+  props: {},
+  data() {
+    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: {},
+};
+</script>
+
+<style scoped lang="scss">
+.stock-monitor {
+  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>
--- a/src/views/copilot/energy/components/WaterCost.vue
+++ b/src/views/copilot/energy/components/WaterCost.vue
@@ -0,0 +1,128 @@
+<!-- 
+    filename: WaterCost.vue
+    author: liubin
+    date: 2024-04-29 16:37:34
+    description: 水能耗
+-->
+
+<template>
+  <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: {
+    BarChartBase: BarChartBaseVue,
+    LineChartBase: LineChartBaseVue,
+  },
+  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);
+    },
+  },
+  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 {
+  flex: 1;
+}
+</style>
--- a/src/views/copilot/energy/components/sub/monitor/MonitorItem.vue
+++ b/src/views/copilot/energy/components/sub/monitor/MonitorItem.vue
@@ -0,0 +1,151 @@
+<!--
+    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,index) in legendList" :key="lgd.name">
+        <div >
+          <span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></span>
+          <span :style="'color:' + colors[index%5]" class="legend-item__label">{{ lgd.name }}</span>
+        </div>
+        <div :style="'color:' + colors[index%5]" class="legend-item__value">{{ lgd.value }}</div>
+      </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: "月",
+      colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
+      valueTuple: [100, 100, 200],
+    };
+  },
+  computed: {
+    options() {
+      const year = new Date().getFullYear();
+      const month = new Date().getMonth() + 1;
+      let arr = []
+      this.legendList.forEach(ele => {
+        arr.push(ele.value)
+      });
+      let vt = arr
+      console.log(arr)
+      let titleValue = vt.reduce(function (prev, cur, index, arr) {
+        return prev + cur
+      })
+      let subtitle = `总计/片`;
+
+      return getOptions({
+        single: true,
+        color: this.color == 1 ? "#4CF0E8" : "#1065ff",
+        titleValue,
+        subtitle,
+        dataList:this.legendList,
+        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: 20px;
+    justify-content: space-around;
+  }
+
+  .legend-item {
+    display: flex;
+    // width: 90px;
+    flex-direction: column;
+    // justify-content: space-around;
+    // justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 3px;
+    .legend-item__chart{
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      background: #2760FF;
+      border-radius: 2px;
+      // margin-right: 8px;
+    }
+   .legend-item__label {
+      margin-left: 8px;
+    }
+    // }
+  }
+
+  .legend-item__value {
+    font-size: 24px;
+    font-weight: 600;
+  }
+}
+</style>
+l
--- a/src/views/copilot/energy/index.vue
+++ b/src/views/copilot/energy/index.vue
@@ -1,25 +1,83 @@
-<!-- 
-    filename: index.vue
-    author: liubin
-    date: 2024-04-16 14:40:15
-    description: 能源驾驶舱
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-08 15:29:28
+ * @LastEditors: zhp
+ * @Description:
 -->

 <template>
-  <div class="energy-copilot">能源驾驶舱</div>
+  <div class="energy-copilot">
+    <Container title="仓库监控·当前" icon="ware">
+      <StockMonitorVue :period="period" />
+    </Container>
+    <Container title="天然气能耗" icon="gas">
+      <NatGasVue :period="period" />
+    </Container>
+    <Container title="电能耗" icon="flash">
+      <ElecCostVue :period="period" />
+    </Container>
+    <Container title="水能耗" icon="water">
+      <WaterCostVue :period="period" />
+    </Container>
+  </div>
 </template>

 <script>
+import Container from "@/views/copilot/components/Container.vue";
+import StockMonitorVue from "./components/StockMonitor.vue";
+import ElecCostVue from "./components/ElecCost.vue";
+import NatGasVue from "./components/NatGas.vue";
+import WaterCostVue from "./components/WaterCost.vue";
+
 export default {
  name: "EnergyCopilot",
-  components: {},
-  props: {},
+  components: {
+    Container,
+    StockMonitorVue,
+    ElecCostVue,
+    NatGasVue,
+    WaterCostVue,
+  },
+  props: {
+    period: {
+      type: String,
+      default: "日",
+    },
+  },
  data() {
    return {};
  },
-  computed: {},
-  methods: {},
+  watch: {
+    period: {
+      handler(val) {
+        val && this.fetchData(val);
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    fetchData(period = "日") {
+      console.log(`效率驾驶舱，获取${period}数据`);
+      this.$store.dispatch("copilot/initCopilot", {
+        period,
+        source: "comprehensive",
+      });
+    },
+  },
 };
 </script>

-<style scoped></style>
+<style scoped>
+.energy-copilot {
+  flex: 1;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr 1fr;
+  /* grid-template-rows: 1fr 1fr; */
+}
+
+.energy-copilot > div {
+  height: 100%;
+}
+</style>
--- a/src/views/copilot/energy/options/monitorOptions.js
+++ b/src/views/copilot/energy/options/monitorOptions.js
@@ -0,0 +1,84 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-08 10:30:06
+ * @LastEditors: zhp
+ * @Description:
+ */
+export default function ({
+  single = false,
+  colors = ['#2760FF', '#5996F7', '#8BC566', '#11FAF0','#F3C000'],
+  titleValue,
+  subtitle,
+  dataList,
+  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",
+    },
+  },
+  // legend: {
+  //   top: '5%',
+  //   left: 'center'
+  // },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+    	// center: ['50%', '40%'],
+			radius: ['60%', '90%'],
+      avoidLabelOverlap: false,
+        labelLine: {
+        show: false
+      },
+      label: {
+        show: false
+      },
+      data: dataList && dataList.length > 0 && dataList.map((item, index) => ({
+						name:item.name,
+            value: item.value,
+
+						itemStyle:{
+							color:{
+								type: 'linear',
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								global: false,
+								colorStops:[
+									{offset: 0,color:colors[index%5]},
+									{offset: 1,color:colors[index%5]+'33'}
+								]
+							}
+						}
+            }))
+    }
+  ]
+  };
+}
--- a/src/views/copilot/yield/components/ChipInvest.vue
+++ b/src/views/copilot/yield/components/ChipInvest.vue
@@ -1,8 +1,8 @@
-<!-- 
+<!--
    filename: FtoInvest.vue
    author: liubin
    date: 2024-04-10 08:59:28
-    description: 
+    description:
 -->

 <template>
@@ -16,7 +16,7 @@
 </template>

 <script>
-import BarChartBase from "./sub/bar/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/components/BarChartBase.vue";

 export default {
  name: "ChipInvest",
@@ -73,7 +73,7 @@ export default {
          break;
        default:
          dataList = [];
-          dataList[0] = chipInvest?.pervious;
+          dataList[0] = chipInvest?.previous;
          dataList[1] = chipInvest?.current;
      }
      return getTemplate(this.period, dataList);
--- a/src/views/copilot/yield/components/FtoInvest.vue
+++ b/src/views/copilot/yield/components/FtoInvest.vue
@@ -1,8 +1,8 @@
-<!-- 
+<!--
    filename: FtoInvest.vue
    author: liubin
    date: 2024-04-10 08:59:28
-    description: 
+    description:
 -->

 <template>
@@ -16,7 +16,7 @@
 </template>

 <script>
-import BarChartBase from "./sub/bar/BarChartBase.vue";
+import BarChartBase from "@/views/copilot/components/BarChartBase.vue";

 export default {
  name: "FtoInvest",
@@ -74,7 +74,7 @@ export default {
          break;
        default:
          dataList = [];
-          dataList[0] = ftoInvest?.pervious;
+          dataList[0] = ftoInvest?.previous;
          dataList[1] = ftoInvest?.current;
      }

--- a/src/views/copilot/yield/components/sub/city/CityName.vue
+++ b/src/views/copilot/yield/components/sub/city/CityName.vue
@@ -13,7 +13,7 @@
 </template>

 <script>
-import Icon from "../../../assets/icon.png";
+import Icon from "@/views/copilot/assets/icon.png";

 export default {
  name: "CityName",
--- a/src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
+++ b/src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
@@ -1,8 +1,8 @@
-<!-- 
+<!--
    filename: DoubleRingChart.vue
    author: liubin
    date: 2024-04-17 11:01:55
-    description: 
+    description:
 -->

 <template>
@@ -70,6 +70,7 @@ export default {
      // [previousValue, currentValue, sumValue?]
      const getter = this.$store.getters.copilot.yield[this.dataSourceField];
      if (this.period === "日" || this.period === "周") {
+        console.log(this.period)
        return [
          getter.previous[this.factoryId],
          getter.current[this.factoryId],
--- a/src/views/copilot/yield/index.vue
+++ b/src/views/copilot/yield/index.vue
@@ -1,4 +1,4 @@
-<!-- 
+<!--
    filename: index.vue
    author: liubin
    date: 2024-04-16 14:40:15