各工厂数据

Reviewed-on: #11

.env.dev

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

package.json

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

src/main.js

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

src/store/modules/home.js

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

src/views/copilot/components/Container.vue

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

src/views/copilot/components/CopilotHeader.vue

@@ -9,7 +9,7 @@
   <div class="copilot-header">
     <section class="menu">
       <CopilotButton
-        v-for="i in ['产量', '效率', '综合']"
+        v-for="i in ['产量', '效率', '能源']"
         :key="i"
         :label="i"
         :active="i === active"

src/views/copilot/components/FactoryDataHeader.vue

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

src/views/copilot/components/FactorySelect.vue

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

src/views/copilot/components/LineChartBase.vue

@@ -1,296 +0,0 @@
-<!-- 
-    filename: LineChartBase.vue
-    author: liubin
-    date: 2024-04-30 08:59:28
-    description: 
--->
-
-<template>
-  <chart-container class="line-chart-base">
-    <div class="legend">
-      <span
-        v-for="item in legend"
-        :key="item.label" 
-        class="legend-item"
-        :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
-        >{{ item.label }}</span
-      >
-    </div>
-    <div
-      ref="chart"
-      style="max-width: 50vw"
-      :style="{ height: vHeight + 'vh' }"
-    ></div>
-  </chart-container>
-</template>
-
-<script>
-import screenfull from "screenfull";
-import ChartContainer from "./ChartContainer.vue";
-import chartMixin from "@/mixins/chart.js";
-
-export default {
-  name: "LineChartBase",
-  components: {
-    ChartContainer,
-  },
-  mixins: [chartMixin],
-  props: {
-    vHeight: {
-      type: Number,
-      default: 34,
-    },
-    legend: {
-      type: Array,
-      required: true,
-    },
-    xAxis: {
-      type: Array,
-      required: true,
-    },
-    series: {
-      type: Array,
-      required: true,
-    },
-    in: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      isFullscreen: false,
-      actualOptions: null,
-      options: {
-        grid: {
-          left: "5%",
-          right: "4%",
-          bottom: "3%",
-          top: "15%",
-          containLabel: true,
-        },
-        tooltip: {},
-        xAxis: {
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
-          },
-          data: this.xAxis,
-        },
-        yAxis: {
-          name: "单位/片",
-          nameTextStyle: {
-            color: "#fff",
-            fontSize: 12,
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: 12,
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
-          splitLine: {
-            lineStyle: {
-              color: "#4561AE",
-            },
-          },
-        },
-        series: [
-          {
-            name: "", // this.series[0].name,
-            type: "bar",
-            barWidth: 12,
-            itemStyle: {
-              borderRadius: [10, 10, 0, 0],
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#12f7f1", // 0% 处的颜色
-                  },
-                  {
-                    offset: 0.35,
-                    color: "#12f7f177", // 100% 处的颜色
-                  },
-                  {
-                    offset: 0.75,
-                    color: "#12f7f133", // 100% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "transparent", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
-            data: [], // this.series[0].data,
-          },
-          {
-            name: "", // this.series[1].name,
-            type: "bar",
-            barWidth: 12,
-            // tooltip: {
-            //   valueFormatter: function (value) {
-            //     return value + " ml";
-            //   },
-            // },
-            itemStyle: {
-              borderRadius: [10, 10, 0, 0],
-              color: {
-                type: "linear",
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#57abf8", // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: "#364BFE66", // 100% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
-            data: [], // this.series[1].data,
-          },
-        ],
-      },
-    };
-  },
-  watch: {
-    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
-    isFullscreen(val) {
-      this.actualOptions.series.map((item) => {
-        item.barWidth = val ? 18 : 12;
-      });
-      this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.actualOptions);
-    },
-    series(val) {
-      if (!val) {
-        this.initOptions(this.options);
-        return;
-      }
-      const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.series[0].data = val[0].data;
-      actualOptions.series[0].name = val[0].name;
-      actualOptions.series[1].data = val?.[1]?.data || [];
-      actualOptions.series[1].name = val?.[1]?.name || "";
-      this.actualOptions = actualOptions;
-      this.initOptions(actualOptions);
-    },
-  },
-  mounted() {
-    this.actualOptions = this.options;
-    this.initOptions(this.options);
-
-    if (screenfull.isEnabled) {
-      screenfull.on("change", () => {
-        this.isFullscreen = screenfull.isFullscreen;
-      });
-    }
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.line-chart-base {
-  // position: relative;
-
-  .legend {
-    position: absolute;
-    top: 5.2vh;
-    right: 1vw;
-  }
-
-  .legend-item {
-    position: relative;
-    // font-size: 12px;
-    margin-right: 0.67vw;
-
-    &::before {
-      content: "";
-      display: inline-block;
-      width: 0.432vw;
-      height: 0.432vw;
-      border-radius: 100%;
-      margin-right: 0.4vw;
-    }
-
-    &::after {
-      content: "";
-      display: inline-block;
-      width: 1vw;
-      height: 0.125vw;
-      position: absolute;
-      top: 54%;
-      left: -15%;
-      transform: translateY(-50%);
-      border-radius: 100;
-      margin-right: 0.22vw;
-    }
-  }
-
-  .legend-item:nth-child(1):after,
-  .legend-item:nth-child(1):before {
-    background-color: #fad162;
-  }
-
-  .legend-item:nth-child(2):after,
-  .legend-item:nth-child(2):before {
-    background-color: #2160f3;
-  }
-
-  .legend-item:nth-child(3):after,
-  .legend-item:nth-child(3):before {
-    background-color: #13dbf3;
-  }
-
-  .legend-item:nth-child(4):after,
-  .legend-item:nth-child(4):before {
-    background-color: #88ca67;
-  }
-
-  .legend-item:nth-child(5):after,
-  .legend-item:nth-child(5):before {
-    background-color: #5c97fc;
-  }
-
-  .legend-item:nth-child(6):after,
-  .legend-item:nth-child(6):before {
-    background-color: #f48900;
-  }
-
-  .legend-item:nth-child(7):after,
-  .legend-item:nth-child(7):before {
-    background-color: #776bf0;
-  }
-}
-</style>

src/views/copilot/container.vue

@@ -15,7 +15,7 @@
     />
 
     <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>

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

@@ -1,110 +0,0 @@
-<!-- 
-    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/components/BarChartBase.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() {
-      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"></style>

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

@@ -1,60 +0,0 @@
-<!-- 
-    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>

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

@@ -1,57 +0,0 @@
-<!-- 
-    filename: StdRate.vue
-    author: liubin
-    date: 2024-04-29 08:50:43
-    description: 标准组件良率
--->
-
-<template>
-  <div class="std-rate">
-    <div class="span-2">
-      <StdRateItem :city="cities[5]" />
-    </div>
-    <div
-      v-for="item in cities.filter((val, index) => index != 5)"
-      :key="item.name"
-    >
-      <StdRateItem :city="item" />
-    </div>
-  </div>
-</template>
-
-<script>
-import StdRateItem from "./sub/std/StdRateItem.vue";
-export default {
-  name: "StdRate",
-  components: { StdRateItem },
-  props: {},
-  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(4, 1fr);
-}
-
-.span-2 {
-  grid-column: span 2;
-}
-</style>

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

@@ -1,110 +0,0 @@
-<!-- 
-    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/components/BarChartBase.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 { 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"></style>

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

@@ -1,194 +0,0 @@
-<!-- 
-    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;
-      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>
-l

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

@@ -1,66 +0,0 @@
-<!-- 
-    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>

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

@@ -1,113 +0,0 @@
-<!-- 
-    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>

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

@@ -1,60 +0,0 @@
-<!-- 
-    filename: StdRateItem.vue
-    author: liubin
-    date: 2024-04-29 08:59:33
-    description: 
--->
-
-<template>
-  <div class="std-rate-item">
-    <CityName :value="city.name" />
-    <div class="std-rate-item__value">
-      <ProgressBar title="24年目标" :total="city.target" :value="city.target" />
-      <ProgressBar
-        title="24年累计"
-        :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,
-    },
-  },
-  data() {
-    return {};
-  },
-};
-</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>

src/views/copilot/efficiency/index.vue

@@ -7,37 +7,18 @@
 
 <template>
   <div class="efficiency-copilot">
-    <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>
+    <Container title="芯片良率" icon="chip2"></Container>
+    <Container title="标准组件良率" icon="std"></Container>
+    <Container title="芯片OEE" icon="chip"></Container>
+    <Container title="转化效率" icon="cube"></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,
-    ChipOee: ChipOeeVue,
-    ChipRate: ChipRateVue,
-    StdRate: StdRateVue,
-    TransformRate: TransformRateVue,
-  },
+  components: { Container },
   props: {
     period: {
       type: String,
@@ -58,10 +39,7 @@ export default {
   methods: {
     fetchData(period = "日") {
       console.log(`效率驾驶舱，获取${period}数据`);
-      this.$store.dispatch("copilot/initCopilot", {
-        period,
-        source: "efficiency",
-      });
+      this.$store.dispatch("copilot/initCopilot", { period, source: "efficiency" });
     },
   },
 };

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

@@ -1,163 +0,0 @@
-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 },
-              },
-            ],
-          },
-    ],
-  };
-}

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

@@ -1,128 +0,0 @@
-<!-- 
-    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>

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

@@ -1,115 +0,0 @@
-<!-- 
-    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>

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

@@ -1,63 +0,0 @@
-<!-- 
-    filename: StockMonitor.vue
-    author: liubin
-    date: 2024-04-29 16:35:40
-    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>

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

@@ -1,128 +0,0 @@
-<!-- 
-    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>

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

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

src/views/copilot/energy/index.vue

@@ -2,81 +2,24 @@
     filename: index.vue
     author: liubin
     date: 2024-04-16 14:40:15
-    description: 综合驾驶舱
+    description: 能源驾驶舱
 -->
 
 <template>
-  <div class="energy-copilot">
-    <Container title="仓库监控·当前" icon="chip2">
-      <StockMonitorVue :period="period" />
-    </Container>
-    <Container title="天然气能耗" icon="std">
-      <NatGasVue :period="period" />
-    </Container>
-    <Container title="电能耗" icon="chip">
-      <ElecCostVue :period="period" />
-    </Container>
-    <Container title="水能耗" icon="cube">
-      <WaterCostVue :period="period" />
-    </Container>
-  </div>
+  <div class="energy-copilot">能源驾驶舱</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: {
-    Container,
-    StockMonitorVue,
-    ElecCostVue,
-    NatGasVue,
-    WaterCostVue,
-  },
-  props: {
-    period: {
-      type: String,
-      default: "日",
-    },
-  },
+  components: {},
+  props: {},
   data() {
     return {};
   },
-  watch: {
-    period: {
-      handler(val) {
-        val && this.fetchData(val);
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    fetchData(period = "日") {
-      console.log(`效率驾驶舱，获取${period}数据`);
-      this.$store.dispatch("copilot/initCopilot", {
-        period,
-        source: "comprehensive",
-      });
-    },
-  },
+  computed: {},
+  methods: {},
 };
 </script>
 
-<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>
+<style scoped></style>

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

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

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

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

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

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

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

@@ -0,0 +1,357 @@
+<template>
+  <div class="left-chart-base">
+    <div class="legend">
+      <span
+        v-for="item in legend"
+        :key="item.label"
+        class="legend-item"
+        :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
+        >{{ item.label }}</span
+      >
+    </div>
+    <div
+      ref="chart"
+      style="width: 100%"
+      :style="{ height: vHeight + 'vh' }"
+    ></div>
+  </div>
+</template>
+<script>
+import chartMixin from "@/mixins/chart.js";
+import * as echarts from "echarts";
+export default {
+  name: "Energy",
+  mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        color: ["#FFD160", "#2760FF", "#12FFF5"],
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "0",
+          top: "15%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "KW/h",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+              align: "right",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+          },
+          {
+            type: "value",
+            name: "m³/h",
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+              align: "left",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 0.7)",
+              fontSize: 12,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#4561AE",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            data: [],
+            type: "line",
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#FFD160" + "80" },
+                { offset: 0.5, color: "#FFD160" + "20" },
+                { offset: 1, color: "#FFD160" + "00" },
+              ]),
+            },
+            lineStyle: {
+              width: 2,
+            },
+            symbol: "circle",
+            symbolSize: 8,
+            emphasis: {
+              focus: "series",
+            },
+          },
+          {
+            name: "",
+            data: [],
+            type: "line",
+            yAxisIndex: 1,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#2760FF" + "80" },
+                { offset: 0.5, color: "#2760FF" + "20" },
+                { offset: 1, color: "#2760FF" + "00" },
+              ]),
+            },
+            lineStyle: {
+              width: 2,
+            },
+            symbol: "circle",
+            symbolSize: 8,
+            emphasis: {
+              focus: "series",
+            },
+          },
+          {
+            name: "",
+            data: [],
+            type: "line",
+            yAxisIndex: 1,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#12FFF5" + "80" },
+                { offset: 0.5, color: "#12FFF5" + "20" },
+                { offset: 1, color: "#12FFF5" + "00" },
+              ]),
+            },
+            lineStyle: {
+              width: 2,
+            },
+            symbol: "circle",
+            symbolSize: 8,
+            emphasis: {
+              focus: "series",
+            },
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    // isFullscreen(val) {
+    //   this.actualOptions.series.map((item) => {
+    //     item.barWidth = val ? 18 : 12;
+    //   });
+    //   this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
+    //   this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
+    //   this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+    //   this.initOptions(this.actualOptions);
+    // },
+    series(val) {
+      if (!val) {
+        this.initOptions(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = val[0].data;
+      actualOptions.series[0].name = val[0].name;
+      actualOptions.series[1].data = val[1].data;
+      actualOptions.series[1].name = val[1].name;
+      actualOptions.series[2].data = val[2].data;
+      actualOptions.series[2].name = val[2].name;
+      this.actualOptions = actualOptions;
+      this.initOptions(actualOptions);
+    },
+  },
+  mounted() {
+    console.log("00000000000000000000");
+    const actualOptions = JSON.parse(JSON.stringify(this.options));
+    actualOptions.series[0].data = this.series[0].data;
+    actualOptions.series[0].name = this.series[0].name;
+    actualOptions.series[1].data = this.series[1].data;
+    actualOptions.series[1].name = this.series[1].name;
+    actualOptions.series[2].data = this.series[2].data;
+    actualOptions.series[2].name = this.series[2].name;
+    this.actualOptions = actualOptions;
+    console.log(actualOptions);
+    console.log("1111111111");
+    this.initOptions(actualOptions);
+    // this.actualOptions = this.options;
+    // this.initOptions(this.options);
+
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+  },
+};
+</script>
+<style scoped lang="scss">
+.left-chart-base {
+  // position: relative;
+
+  .legend {
+    position: absolute;
+    top: 5.2vh;
+    right: 4vw;
+  }
+
+  .legend-item {
+    position: relative;
+    // font-size: 12px;
+    margin-right: 1.34vw;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      // width: 10px;
+      // height: 10px;
+      width: 0.531vw;
+      height: 0.531vw;
+      background-color: #ccc;
+      border-radius: 2px;
+      margin-right: 0.22vw;
+    }
+  }
+  .legend-item:nth-child(1):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #ffd160;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+  .legend-item:nth-child(1):after {
+    background-color: #ffd160;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    // width: 6px;
+    // height: 6px;
+    width: 0.3191vw;
+    height: 0.3191vw;
+    border-radius: 100%;
+    top: 50%;
+    left: -0.851vw;
+    // left: -16px;
+    transform: translateY(-50%) translateX(50%);
+  }
+  .legend-item:nth-child(2):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #2760ff;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+  .legend-item:nth-child(2):after {
+    background-color: #2760ff;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    // width: 6px;
+    // height: 6px;
+    width: 0.3191vw;
+    height: 0.3191vw;
+    border-radius: 100%;
+    top: 50%;
+    left: -0.851vw;
+    // left: -16px;
+    transform: translateY(-50%) translateX(50%);
+  }
+  .legend-item:nth-child(3):before {
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #12fff5;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+  .legend-item:nth-child(3):after {
+    background-color: #12fff5;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    // width: 6px;
+    // height: 6px;
+    width: 0.3191vw;
+    height: 0.3191vw;
+    border-radius: 100%;
+    top: 50%;
+    left: -0.851vw;
+    // left: -16px;
+    transform: translateY(-50%) translateX(50%);
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <dv-scroll-board :config="config" style="width: 100%; height: 100%" />
+</template>
+<script>
+export default {
+  name: "Order",
+  data() {
+    return {
+      config: {
+        header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
+        headerBGC: "rgba(0, 106, 205, 0.22)",
+        oddRowBGC: "rgba(0, 106, 205, 0.22)",
+        evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
+        data: [
+          ["1", "行1列1", "行1列2", "行1列3", "50%"],
+          ["2", "行2列1", "行2列2", "行2列3", "50%"],
+          ["3", "行3列1", "行3列2", "行3列3", "50%"],
+          ["4", "行4列1", "行4列2", "行4列3", "50%"],
+          ["5", "行5列1", "行5列2", "行5列3", "50%"],
+          ["6", "行6列1", "行6列2", "行6列3", "50%"],
+          ["7", "行7列1", "行7列2", "行7列3", "50%"],
+          ["8", "行8列1", "行8列2", "行8列3", "50%"],
+          ["9", "行9列1", "行9列2", "行9列3", "50%"],
+          ["10", "行10列1", "行10列2", "行10列3", "50%"],
+          ["11", "行11列1", "行11列2", "行11列3", "50%"],
+          ["12", "行12列1", "行12列2", "行12列3", "50%"],
+          ["13", "行13列1", "行13列2", "行13列3", "50%"],
+          ["14", "行14列1", "行14列2", "行14列3", "50%"],
+          ["15", "行15列1", "行15列2", "行15列3", "50%"],
+          ["16", "行16列1", "行16列2", "行16列3", "50%"],
+          ["17", "行17列1", "行17列2", "行17列3", "50%"],
+          ["18", "行18列1", "行18列2", "行18列3", "50%"],
+          ["19", "行19列1", "行19列2", "行19列3", "50%"],
+          ["20", "行20列1", "行20列2", "行20列3", "50%"],
+        ],
+        rowNum: 12,
+        waitTime: 3000,
+        columnWidth: [50],
+        align: ["center"],
+        carousel: "page",
+      },
+    };
+  },
+};
+</script>

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

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

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

@@ -0,0 +1,152 @@
+<template>
+  <div
+    ref="chart"
+    style="width: 100%"
+    :style="{ height: vHeight + 'vh' }"
+  ></div>
+</template>
+<script>
+import chartMixin from "@/mixins/chart.js";
+export default {
+  name: "Store",
+  mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      actualOptions: null,
+      options: {
+        grid: {
+          left: "3%",
+          right: "1%",
+          bottom: "0",
+          top: "10%",
+          containLabel: true,
+        },
+        tooltip: {},
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+          },
+          data: this.xAxis,
+        },
+        yAxis: {
+          name: "单位/片",
+          nameTextStyle: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+            align: "right",
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#4561AE",
+            },
+          },
+        },
+        series: [
+          {
+            name: "", // this.series[0].name,
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              borderRadius: [10, 10, 0, 0],
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#12f7f1", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.35,
+                    color: "#12f7f177", // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.75,
+                    color: "#12f7f133", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: [], // this.series[0].data,
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    series(val) {
+      if (!val) {
+        this.initOptions(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = val[0].data;
+      actualOptions.series[0].name = val[0].name;
+      actualOptions.series[1].data = val[1].data;
+      actualOptions.series[1].name = val[1].name;
+      this.actualOptions = actualOptions;
+      this.initOptions(actualOptions);
+    },
+  },
+  mounted() {
+    console.log("store");
+    const actualOptions = JSON.parse(JSON.stringify(this.options));
+    actualOptions.series[0].data = this.series[0].data;
+    actualOptions.series[0].name = this.series[0].name;
+    this.actualOptions = actualOptions;
+    this.initOptions(actualOptions);
+
+    // if (screenfull.isEnabled) {
+    //   screenfull.on("change", () => {
+    //     this.isFullscreen = screenfull.isFullscreen;
+    //   });
+    // }
+  },
+};
+</script>
+<style></style>

src/views/copilot/factoryData/index.vue

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

src/views/copilot/yield/components/ChipInvest.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "./sub/bar/BarChartBase.vue";
 
 export default {
   name: "ChipInvest",

src/views/copilot/yield/components/FtoInvest.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
+import BarChartBase from "./sub/bar/BarChartBase.vue";
 
 export default {
   name: "FtoInvest",

src/views/copilot/yield/components/sub/bar/BarChartBase.vue

@@ -26,7 +26,7 @@
 
 <script>
 import screenfull from "screenfull";
-import ChartContainer from "./ChartContainer.vue";
+import ChartContainer from "../../../../components/ChartContainer.vue";
 import chartMixin from "@/mixins/chart.js";
 
 export default {

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

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Icon from "@/views/copilot/assets/icon.png";
+import Icon from "../../../assets/icon.png";
 
 export default {
   name: "CityName",

yarn.lock

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