done home

.env.dev

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

src/mixins/fullscreen.js

@@ -0,0 +1,23 @@
+import screenfull from "screenfull";
+
+export default {
+  data() {
+    return {
+      isFullscreen: false,
+    };
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      // 暴露一个全屏状态改变的回调函数
+      this.fullscreenCallback(val);
+    },
+  },
+  mounted() {
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+  },
+};

src/store/getters.js

@@ -18,6 +18,9 @@ const getters = {
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
   // 数据字典
-  dict_datas: state => state.dict.dictDatas
+  dict_datas: state => state.dict.dictDatas,
+  // 驾驶舱和首页
+  home: state => state.copilot.home,
+  copilot: state => state.copilot.copilot,
 }
 export default getters

src/store/index.js

@@ -6,6 +6,7 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import dict from './modules/dict'
+import copilot from './modules/home'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     tagsView,
     permission,
     settings,
-    dict
+    dict,
+    copilot
   },
   getters
 })

src/store/modules/home.js

@@ -0,0 +1,195 @@
+import axios from "@/utils/request";
+
+function random_default() {
+  return 0;
+  let a = Math.floor(Math.random() * 1000);
+  while (a < 600) {
+    a = Math.floor(Math.random() * 1000);
+  }
+  return a;
+}
+
+/* 接口 */
+async function getHomeInfo() {
+  const { code, data } = await axios.post("/ip/prod-output/query-by-date", {
+    factorys: [],
+    date: 4,
+  });
+  if (code == 0) {
+    return data;
+  }
+  console.warn("getHomeInfo failed, code: ", code);
+  return null;
+}
+
+async function getHomeTarget() {
+  const { code, data } = await axios.post("/ip/prod-target/query-by-date", {
+    factorys: [],
+    date: 4,
+  });
+  if (code == 0) {
+    return data;
+  }
+  console.warn("getHomeTarget failed, code: ", code);
+  return null;
+}
+
+/* 状态 */
+const state = {
+  copilot: {
+    /* 产量驾驶舱 */
+    yield: {},
+    /* 能源驾驶舱 */
+    energy: {},
+    /* 效率驾驶舱 */
+    efficiency: {},
+  },
+  home: {
+    ftoInvest: null,
+    chipInvest: null,
+    chipOutput: null,
+    stdOutput: null,
+    bipvOutput: null,
+  },
+};
+
+const mutations = {
+  SET_HOME_INFO: (state, payload) => {
+    state.home.ftoInvest = payload.ftoInvest;
+    state.home.chipInvest = payload.chipInvest;
+    state.home.chipOutput = payload.chipOutput;
+    state.home.stdOutput = payload.stdOutput;
+    state.home.bipvOutput = payload.bipvOutput;
+  },
+  SET_COPILOT_INFO: (state) => {},
+};
+
+const actions = {
+  /** 初始化首页数据 */
+  async initHome({ commit }) {
+    const dataArr = await getHomeInfo();
+    const targetArr = await getHomeTarget();
+
+    const chipInvest = {
+      current: Array(7).fill(0),
+      previous: Array(7).fill(0),
+    }; // 芯片投入
+    const ftoInvest = {
+      current: Array(7).fill(0),
+      previous: Array(7).fill(0),
+    }; // FTO投入
+    const chipOutput = {
+      current: Array(7).fill(0),
+      previous: Array(7).fill(0),
+      target: Array(7).fill(0),
+    }; // 芯片产出
+    const stdOutput = {
+      current: Array(7).fill(0),
+      previous: Array(7).fill(0),
+      target: Array(7).fill(0),
+    }; // 标准组件产出
+    const bipvOutput = {
+      current: Array(7).fill(0),
+      previous: Array(7).fill(0),
+      target: Array(7).fill(0),
+    }; // BIPV产出
+
+    if (dataArr) {
+      for (const factory of dataArr) {
+        /* 工厂索引 */
+        const factoryId = factory.factory;
+        /* 收集目标数据 */
+        if (targetArr) {
+          const target = targetArr.find((item) => item.factory === factoryId);
+          if (target) {
+            chipOutput.target.splice(factoryId, 1, target.chipYield ?? 0);
+            stdOutput.target.splice(factoryId, 1, target.componentYield ?? 0);
+            bipvOutput.target.splice(factoryId, 1, target.bipvProductOutput ?? 0);
+          }
+        }
+        /* 收集芯片投入数据 */
+        chipInvest.current.splice(
+          factoryId,
+          1,
+          factory.inputNumber ?? random_default()
+        );
+        chipInvest.previous.splice(
+          factoryId,
+          1,
+          factory.previousYearInputNumber ?? random_default()
+        );
+        /* 收集FTO投入数据 */
+        ftoInvest.current.splice(
+          factoryId,
+          1,
+          factory.chipInput ?? random_default()
+        );
+        ftoInvest.previous.splice(
+          factoryId,
+          1,
+          factory.previousYearChipInput ?? random_default()
+        );
+        /* 收集产出数据 */
+        switch (factory.glassType) {
+          case 0:
+            // 玻璃芯片 产出
+            chipOutput.current.splice(
+              factoryId,
+              1,
+              factory.outputNumber ?? random_default()
+            );
+            chipOutput.previous.splice(
+              factoryId,
+              1,
+              factory.previousYearOutputNumber ?? random_default()
+            );
+            break;
+          case 1:
+            // 标准组件 产出
+            stdOutput.current.splice(
+              factoryId,
+              1,
+              factory.outputNumber ?? random_default()
+            );
+            stdOutput.previous.splice(
+              factoryId,
+              1,
+              factory.previousYearOutputNumber ?? random_default()
+            );
+            break;
+          case 2:
+            // BIPV 产出
+            bipvOutput.current.splice(
+              factoryId,
+              1,
+              factory.outputNumber ?? random_default()
+            );
+            bipvOutput.previous.splice(
+              factoryId,
+              1,
+              factory.previousYearOutputNumber ?? random_default()
+            );
+            break;
+        }
+      }
+
+      /* 更新 state */
+      commit("SET_HOME_INFO", {
+        ftoInvest,
+        chipInvest,
+        chipOutput,
+        stdOutput,
+        bipvOutput,
+      });
+    }
+  },
+  /** 初始化驾驶舱数据 */
+  async initCopilot({ commit }) {},
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/components/ChartContainer.vue

@@ -3,7 +3,7 @@
     author: liubin
     date: 2024-04-10 08:54:33
     description: 
-    todo: 实现滑动条 和动态宽高
+    todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
 -->
 
 <template>

src/views/copilot/components/Container.vue

@@ -0,0 +1,226 @@
+<!-- 
+    filename: Container.vue
+    author: liubin
+    date: 2024-04-09 10:44:09
+    description: 
+-->
+
+<template>
+  <div class="copilot-container">
+    <!-- refresh btn  -->
+    <button
+      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/components/ContainerIcon.vue

@@ -0,0 +1,58 @@
+<!-- 
+    filename: ContainerIcon.vue
+    author: liubin
+    date: 2024-04-09 16:41:36
+    description: 
+-->
+
+<template>
+  <div class="container-icon" :style="bgStyle"></div>
+</template>
+
+<script>
+import cube from "@/assets/images/homeindex/fto-icon.png";
+import chip from "@/assets/images/homeindex/chip-icon.png";
+import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
+import bipv from "@/assets/images/homeindex/bipv-icon.png";
+import std from "@/assets/images/homeindex/std-icon.png";
+
+export default {
+  name: "ContainerIcon",
+  components: {},
+  props: {
+    icon: {
+      type: String,
+      default: "cube",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    bgStyle() {
+      return {
+        cube:
+          "background: url(" + cube + ") no-repeat center center / 100% 100%",
+        chip:
+          "background: url(" + chip + ") no-repeat center center / 100% 100%",
+        chip2:
+          "background: url(" + chip2 + ") no-repeat center center / 100% 100%",
+        bipv:
+          "background: url(" + bipv + ") no-repeat center center / 100% 100%",
+        std: "background: url(" + std + ") 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/components/CopilotHeader.vue

@@ -26,7 +26,12 @@
       />
       <div class="btn-group">
         <button type="button" class="export-btn" />
-        <button type="button" class="fullscreen-btn" />
+        <button
+          type="button"
+          class="fullscreen-btn"
+          :class="[isFullscreen ? 'exit-fullscreen' : '']"
+          @click="toggleFullScreen"
+        />
       </div>
     </section>
     <div class="page-title">{{ active }}驾驶舱</div>
@@ -35,6 +40,8 @@
 
 <script>
 import CopilotButton from "./button.vue";
+import screenfull from "screenfull";
+
 export default {
   name: "CopilotHeader",
   components: { CopilotButton },
@@ -47,10 +54,22 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      isFullscreen: false,
+    };
   },
   computed: {},
-  methods: {},
+  methods: {
+    toggleFullScreen() {
+      this.isFullscreen = !this.isFullscreen;
+
+      screenfull.toggle(document.querySelector(".copilot-layout"));
+      // 矫正宽度
+      // const el = document.querySelector(".copilot-layout");
+      // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
+      // el.style.left = this.isFullscreen ? "0" : "54px";
+    },
+  },
 };
 </script>
 
@@ -90,6 +109,10 @@ export default {
   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;

src/views/copilot/components/charts/BipvOutput.vue

@@ -0,0 +1,33 @@
+<!-- 
+    filename: BipvOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+
+export default {
+  name: "BipvOutput",
+  components: { DoubleRingWrapperVue },
+  props: {},
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>

src/views/copilot/components/charts/ChipOutput.vue

@@ -0,0 +1,33 @@
+<!-- 
+    filename: ChipOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+
+export default {
+  name: "ChipOutput",
+  components: { DoubleRingWrapperVue },
+  props: {},
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>

src/views/copilot/components/charts/StdOutput.vue

@@ -0,0 +1,33 @@
+<!-- 
+    filename: StdOutput.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <DoubleRingWrapperVue />
+</template>
+
+<script>
+import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";
+
+export default {
+  name: "StdOutput",
+  components: { DoubleRingWrapperVue },
+  props: {},
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>

src/views/copilot/components/charts/base/DoubleRingChart.vue

@@ -0,0 +1,119 @@
+<!-- 
+    filename: DoubleRingChart.vue
+    author: liubin
+    date: 2024-04-17 11:01:55
+    description: 
+-->
+
+<template>
+  <div class="double-ring-chart">
+    <div ref="chart" class="double-ring-chart__container"></div>
+    <!--   :style="{ height: vHeight + 'vh' }" -->
+    <div class="double-ring-chart__legend">
+      <div v-for="item in legendItems" :key="item.label" class="legend-item">
+        <span class="legend-item__label">{{ item.label }}</span>
+        <span class="legend-item__value">{{
+          item.value.toLocaleString()
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartMixin from "@/mixins/chart.js";
+import fullscreenMixin from "@/mixins/fullscreen.js";
+import options from "./double-ring-chart-options";
+
+export default {
+  name: "DoubleRingChart",
+  mixins: [chartMixin, fullscreenMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 24,
+    },
+    legendItems: {
+      type: Array,
+      default: () => [
+        { label: "2023年累计", value: 88002 },
+        { label: "2024年累计", value: 88002 },
+        { label: "2025年累计", value: 88002 },
+      ],
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  mounted() {
+    this.initOptions(options);
+  },
+  methods: {
+    // fullscreen mixin 需要的回调
+    fullscreenCallback(isFullscreen) {
+      console.log("isFullscreen--->", isFullscreen);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.double-ring-chart {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.double-ring-chart__container {
+  flex: 1;
+  height: 0;
+}
+
+.double-ring-chart__legend {
+  padding: 12px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+}
+
+.legend-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.legend-item__label {
+  position: relative;
+}
+
+.legend-item__label::before {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #ccc;
+  border-radius: 2px;
+  top: 6px;
+  left: -18px;
+}
+
+.legend-item:nth-child(1) .legend-item__label::before {
+  background: #0f65ff;
+}
+.legend-item:nth-child(1) .legend-item__value {
+  color: #0f65ff;
+}
+
+.legend-item:nth-child(2) .legend-item__label::before {
+  background: #12fff5;
+}
+.legend-item:nth-child(2) .legend-item__value {
+  color: #12fff5;
+}
+
+.legend-item:nth-child(3) .legend-item__label::before {
+  background: #003982;
+}
+</style>

src/views/copilot/components/charts/base/DoubleRingWrapper.vue

@@ -0,0 +1,66 @@
+<!-- 
+    filename: DoubleRingWrapper.vue
+    author: liubin
+    date: 2024-04-17 09:55:12
+    description: 
+-->
+
+<template>
+  <div class="double-ring-wrapper">
+    <copilot-select :options="cityOptions" />
+    <div class="flex-1 stretch">
+      <DoubleRingChartVue />
+    </div>
+  </div>
+</template>
+
+<script>
+import CopilotSelect from "../../select.vue";
+import fetcher from "./fetcherDoubleRing";
+import DoubleRingChartVue from "./DoubleRingChart.vue";
+
+export default {
+  name: "DoubleRingWrapper",
+  components: { CopilotSelect, DoubleRingChartVue },
+  props: {},
+  data() {
+    return {
+      cityOptions: [
+        "成都",
+        "邯郸",
+        "株洲",
+        "瑞昌",
+        "佳木斯",
+        "凯盛光伏",
+        "蚌埠兴科",
+      ],
+    };
+  },
+  computed: {},
+  mounted() {
+    fetcher.getData().then((res) => {
+      console.log("getData--->", res);
+    });
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.double-ring-wrapper {
+  height: 100%;
+  padding: 12px 24px;
+  display: flex;
+  gap: 12px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+</style>

src/views/copilot/components/charts/base/double-ring-chart-options.js

@@ -0,0 +1,127 @@
+export default {
+  grid: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    containLabel: true,
+  },
+  tooltip: {},
+  title: {
+    text: "78%",
+    left: "50%",
+    top: "40%",
+    textAlign: "center",
+    textStyle: {
+      fontWeight: 600,
+      fontSize: 32,
+      color: "#fffd",
+    },
+    subtext: "\u200224年累计产出\u2002",
+    subtextStyle: {
+      fontSize: 14,
+      fontWeight: 100,
+      color: "#fffd",
+      align: "right",
+    },
+  },
+  series: [
+    // 背景 series - 2024计划
+    {
+      type: "pie",
+      name: "2024目标",
+      radius: ["70%", "85%"],
+      center: ["50%", "52%"],
+      emptyCircleStyle: {
+        color: "#042c5f33",
+      },
+    },
+    // 数据 series - 2024累计
+    {
+      type: "pie",
+      radius: ["70%", "85%"],
+      center: ["50%", "52%"],
+      avoidLabelOvervlap: false,
+      label: {
+        show: false,
+        // position: "center",
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        {
+          value: 90,
+          name: "2024累计产出",
+          selected: false,
+          itemStyle: {
+            borderJoin: "round",
+            borderCap: "round",
+            borderWidth: 12,
+            borderRadius: "50%",
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#4CF0E811" },
+                { offset: 1, color: "#4CF0E8" },
+              ],
+            },
+          },
+        },
+        {
+          value: 20,
+          name: "-",
+          itemStyle: { color: "transparent" },
+          label: { show: false },
+        },
+      ],
+    },
+    // 数据 series2 - 2023累计
+    {
+      type: "pie",
+      radius: ["55%", "70%"],
+      center: ["50%", "52%"],
+      avoidLabelOvervlap: false,
+      label: {
+        show: false,
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        {
+          value: 90,
+          name: "2023累计产出",
+          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: 20,
+          name: "-",
+          itemStyle: { color: "transparent" },
+          label: { show: false },
+        },
+      ],
+    },
+  ],
+};

src/views/copilot/components/charts/base/fetcherDoubleRing.js

@@ -0,0 +1,10 @@
+export default {
+  getData: async function (url) {
+    //
+    return await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve([90119, 40801, 44028]);
+      }, 1200);
+    });
+  },
+};

src/views/copilot/components/select.vue

@@ -0,0 +1,75 @@
+<!-- 
+    filename: select.vue
+    author: liubin
+    date: 2024-04-17 09:50:03
+    description: 
+-->
+
+<template>
+  <div style="display: inline-block; text-align: center">
+    <div class="copilot-select">
+      <button
+        type="button"
+        v-for="item in options"
+        :key="item"
+        @click="currentActive = item"
+        :class="[item == currentActive ? 'active' : '']"
+      >
+        {{ item }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CopilotSelect",
+  components: {},
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      currentActive: '',
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.copilot-select {
+  display: flex;
+  align-items: center;
+  background: #01306c;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+button {
+  color: #fff;
+  padding: 8px 12px;
+  cursor: pointer;
+  position: relative;
+  transition: all .3s;
+}
+
+button.active,
+button:hover {
+  background: #1d74d8;
+}
+
+button:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 20%;
+  left: -1px;
+  width: 2px;
+  height: 60%;
+  background: #02236d;
+}
+</style>

src/views/copilot/container.vue

@@ -6,7 +6,7 @@
 -->
 
 <template>
-  <div class="copilot-container">
+  <div class="copilot-layout">
     <CopilotHeaderVue
       :active="page"
       :period="period"
@@ -46,7 +46,7 @@ export default {
 </script>
 
 <style>
-.copilot-container {
+.copilot-layout {
   padding: 16px;
   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat;
   position: absolute;

src/views/copilot/yield/index.vue

@@ -8,21 +8,15 @@
 <template>
   <div class="yield-copilot">
     <section class="top flex">
-      <db-container
-        class="std-yield"
-        title="标准组件产出"
-        icon="std"
-      ></db-container>
-      <db-container
-        class="chip-yield"
-        title="芯片产出"
-        icon="chip2"
-      ></db-container>
-      <db-container
-        class="bipv-yield"
-        title="BIPV产出"
-        icon="bipv"
-      ></db-container>
+      <db-container class="std-yield" title="标准组件产出" icon="std">
+        <std-output />
+      </db-container>
+      <db-container class="chip-yield" title="芯片产出" icon="chip2">
+        <chip-output />
+      </db-container>
+      <db-container class="bipv-yield" title="BIPV产出" icon="bipv">
+        <bipv-output />
+      </db-container>
     </section>
     <section class="bottom flex">
       <db-container class="fto-involve" title="FTO投入"></db-container>
@@ -36,11 +30,20 @@
 </template>
 
 <script>
-import Container from "@/views/dashboard/components/Container.vue";
+import Container from "../components/Container.vue";
+import StdOutputVue from "../components/charts/StdOutput.vue";
+import ChipOutputVue from "../components/charts/ChipOutput.vue";
+
+import BipvOutputVue from "../components/charts/BipvOutput.vue";
 
 export default {
   name: "YieldCopilot",
-  components: { DbContainer: Container },
+  components: {
+    DbContainer: Container,
+    StdOutput: StdOutputVue,
+    ChipOutput: ChipOutputVue,
+    BipvOutput: BipvOutputVue,
+  },
   props: {},
   data() {
     return {};

src/views/dashboard/charts/Bipv.vue

@@ -21,41 +21,66 @@ import RightChartBase from "./RightChartBase.vue";
 export default {
   name: "BipvChart",
   components: { RightChartBase },
-  props: {
-    legend: {
-      type: Array,
-      default: () => [
-        { label: "2024年目标值", color: "#f3c000" },
-        { label: "2023年", color: "#12f7f1" },
-        { label: "2024年", color: "#58adfa" },
+  data() {
+    const year = new Date().getFullYear();
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      legend: [
+        { label: `${year}年目标值`, color: "#f3c000" },
+        { label: `${year - 1}年`, color: "#12f7f1" },
+        { label: `${year}年`, color: "#58adfa" },
       ],
-    },
-    xAxis: {
-      type: Array,
-      default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
-    },
-    series: {
-      type: Array,
-      default: () => [
+      xAxis: cities,
+    };
+  },
+  computed: {
+    series() {
+      const bipvOutput = this.$store.getters.home.bipvOutput;
+      // const bipvTarget = this.$store.getters.home.bipvTarget;
+
+      if (
+        !bipvOutput ||
+        !bipvOutput.current ||
+        !bipvOutput.previous ||
+        !bipvOutput.target
+      ) {
+        return [
+          {
+            name: "样例数据--2024年目标值",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+          {
+            name: "样例数据--2023年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+          {
+            name: "样例数据--2024年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+        ];
+      }
+
+      return [
         {
-          name: "2024年目标值",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear()}年目标值`,
+          data: bipvOutput.target,
         },
         {
-          name: "2023年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear() - 1}年`,
+          data: bipvOutput.previous,
         },
         {
-          name: "2024年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear()}年`,
+          data: bipvOutput.current,
         },
-      ],
+      ];
     },
   },
 };

src/views/dashboard/charts/ChipInvest.vue

@@ -20,34 +20,50 @@ import LeftChartBase from "./LeftChartBase.vue";
 export default {
   name: "chip-investChart",
   components: { LeftChartBase },
-  props: {
-    legend: {
-      type: Array,
-      default: () => [
-        { label: "2023年", color: "#12f7f1" },
-        { label: "2024年", color: "#58adfa" },
+  data() {
+    const year = new Date().getFullYear();
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      legend: [
+        { label: `${year - 1}年`, color: "#12f7f1" },
+        { label: `${year}年`, color: "#58adfa" },
       ],
-    },
-    xAxis: {
-      type: Array,
-      default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
-    },
-    series: {
-      type: Array,
-      default: () => [
+      xAxis: cities,
+    };
+  },
+  computed: {
+    series() {
+      const chipInvest = this.$store.getters.home.chipInvest;
+      console.log("FTO ==> ", chipInvest);
+
+      if (!chipInvest || !chipInvest.current || !chipInvest.previous) {
+        return [
+          {
+            name: "样例数据--2023年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+          {
+            name: "样例数据--2024年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+        ];
+      }
+
+      return [
         {
-          name: "2023年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear() - 1}年`,
+          data: chipInvest.previous,
         },
         {
-          name: "2024年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear()}年`,
+          data: chipInvest.current,
         },
-      ],
+      ];
     },
   },
 };

src/views/dashboard/charts/ChipYield.vue

@@ -7,7 +7,7 @@
 
 <template>
   <div class="chip-yield">
-    <chip-yield-chart />
+    <chip-yield-chart :factory="activeLoc" />
     <section class="right-part">
       <div class="yield-location">
         <section class="btn-group">
@@ -61,15 +61,15 @@
       <div class="yield-summary">
         <div class="legend">
           <span class="legend-label">2024年累计</span>
-          <span class="legend-value deep-green">40,100</span>
+          <span class="legend-value deep-green">{{ output.current }}</span>
         </div>
         <div class="legend">
           <span class="legend-label">2024年目标</span>
-          <span class="legend-value">30,100</span>
+          <span class="legend-value">{{ output.target }}</span>
         </div>
         <div class="legend">
           <span class="legend-label">2023年累计</span>
-          <span class="legend-value deep-blue">400</span>
+          <span class="legend-value deep-blue">{{ output.previous }}</span>
         </div>
       </div>
     </section>
@@ -88,6 +88,42 @@ export default {
       activeLoc: "1",
     };
   },
+  computed: {
+    output() {
+      // ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]
+      const chipOutput = this.$store.getters.home.chipOutput;
+      if (
+        !chipOutput ||
+        !chipOutput.target ||
+        !chipOutput.current ||
+        !chipOutput.previous
+      )
+        return {
+          target: 0,
+          current: 0,
+          previous: 0,
+        };
+      const index =
+        this.activeLoc == "1"
+          ? 4
+          : this.activeLoc == "2"
+          ? 1
+          : this.activeLoc == "3"
+          ? 2
+          : this.activeLoc == "4"
+          ? 0
+          : this.activeLoc == "5"
+          ? 3
+          : this.activeLoc == "6"
+          ? 5
+          : 6;
+      return {
+        target: parseInt(chipOutput.target[index]).toLocaleString(),
+        current: parseInt(chipOutput.current[index]).toLocaleString(),
+        previous: parseInt(chipOutput.previous[index]).toLocaleString(),
+      };
+    },
+  },
 };
 </script>
 

src/views/dashboard/charts/ChipYieldChart.vue

@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import ChartContainerVue from "../components/ChartContainer.vue";
-import chartMixin from "../mixins/chart.js";
+import ChartContainerVue from "../../components/ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
 import screenfull from "screenfull";
 
 export default {
@@ -29,8 +29,13 @@ export default {
       type: Number,
       default: 22,
     },
+    factory: {
+      type: String,
+      default: "1",
+    },
   },
   data() {
+    const year = new Date().getFullYear();
     return {
       isFullscreen: false,
       options: {
@@ -43,7 +48,7 @@ export default {
         },
         tooltip: {},
         title: {
-          text: "78%",
+          text: "0%",
           left: "48%",
           top: "40%",
           textAlign: "center",
@@ -52,9 +57,9 @@ export default {
             fontSize: 32,
             color: "#fffd",
           },
-          subtext: "\u200224年累计产出\u2002",
+          subtext: `\u2002${year}年累计产出\u2002`,
           subtextStyle: {
-            fontSize: 14,
+            fontSize: 12,
             fontWeight: 100,
             color: "#fffd",
             align: "right",
@@ -64,7 +69,7 @@ export default {
           // 背景 series - 2024计划
           {
             type: "pie",
-            name: "2024目标",
+            name: `${year}目标`,
             radius: ["70%", "85%"],
             center: ["50%", "52%"],
             emptyCircleStyle: {
@@ -87,7 +92,7 @@ export default {
             data: [
               {
                 value: 90,
-                name: "2024累计产出",
+                name: `${year}累计产出`,
                 selected: false,
                 itemStyle: {
                   borderJoin: "round",
@@ -130,7 +135,7 @@ export default {
             data: [
               {
                 value: 90,
-                name: "2023累计产出",
+                name: `${year - 1}累计产出`,
                 selected: false,
                 itemStyle: {
                   borderJoin: "round",
@@ -151,7 +156,7 @@ export default {
                 },
               },
               {
-                value: 20,
+                value: 0,
                 name: "-",
                 itemStyle: { color: "transparent" },
                 label: { show: false },
@@ -162,19 +167,89 @@ export default {
       },
     };
   },
+  computed: {
+    output() {
+      const chipOutput = this.$store.getters.home.chipOutput;
+      if (
+        !chipOutput ||
+        !chipOutput.target ||
+        !chipOutput.current ||
+        !chipOutput.previous
+      )
+        return {
+          target: 0,
+          current: 0,
+          previous: 0,
+        };
+      const index =
+        this.factory == "1"
+          ? 4
+          : this.factory == "2"
+          ? 1
+          : this.factory == "3"
+          ? 2
+          : this.factory == "4"
+          ? 0
+          : this.factory == "5"
+          ? 3
+          : this.factory == "6"
+          ? 5
+          : 6;
+      return {
+        target: chipOutput.target[index], //  parseInt(chipOutput.target[index]).toLocaleString(),
+        current: chipOutput.current[index], //  parseInt(chipOutput.current[index]).toLocaleString(),
+        previous: chipOutput.previous[index], //  parseInt(chipOutput.previous[index]).toLocaleString(),
+      };
+    },
+    actualOptions() {
+      const options = JSON.parse(JSON.stringify(this.options));
+      // 标题
+      if (!this.output.target) options.title.text = "0%";
+      else
+        options.title.text =
+          (this.output.current / this.output.target) * 100 + "%";
+      // 外环
+      if (
+        this.output.current == this.output.target &&
+        this.output.current == 0
+      ) {
+        options.series[1].data[0].value = 0;
+        options.series[1].data[1].value = 100;
+      } else {
+        options.series[1].data[0].value = this.output.current;
+        options.series[1].data[1].value =
+          this.output.target - this.output.current;
+      }
+      // 内环
+      if (this.output.previous == 0) {
+        options.series[2].data[0].value = 0;
+        options.series[2].data[1].value = 100;
+      } else {
+        options.series[2].data[0].value = this.output.previous;
+        options.series[2].data[1].value = 0;
+      }
+      return options;
+    },
+  },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       // this.options.title.top = val ? "40%" : "37%";
       this.options.title.textStyle.fontSize = val ? 48 : 32;
-      this.options.title.subtextStyle.fontSize = val ? 18 : 14;
-      this.initOptions(this.options);
+      this.options.title.subtextStyle.fontSize = val ? 18 : 12;
+      // this.options.title.subtextStyle.fontSize = val ? 18 : 14;
+      this.initOptions(this.actualOptions);
+    },
+    factory(val) {
+      this.initOptions(this.actualOptions);
     },
   },
   mounted() {
+    console.log("mounted", this.actualOptions);
     /** 清除 MIN_WIDTH, 此处比较特殊, 需要这么一步, 去除 chart mixin 的滚动条功能 */
     this.MIN_WIDTH = 0;
-    this.initOptions(this.options);
+    this.initOptions(this.actualOptions);
+    debugger;
 
     if (screenfull.isEnabled) {
       screenfull.on("change", () => {

src/views/dashboard/charts/Fto.vue

@@ -20,38 +20,49 @@ import LeftChartBase from "./LeftChartBase.vue";
 export default {
   name: "FtoChart",
   components: { LeftChartBase },
-  props: {
-    legend: {
-      type: Array,
-      default: () => [
-        { label: "2023年", color: "#12f7f1" },
-        { label: "2024年", color: "#58adfa" },
+  data() {
+    const year = new Date().getFullYear();
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      legend: [
+        { label: `${year - 1}年`, color: "#12f7f1" },
+        { label: `${year}年`, color: "#58adfa" },
       ],
-    },
-    xAxis: {
-      type: Array,
-      default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
-    },
-    series: {
-      type: Array,
-      default: () => [
-        {
-          name: "2023年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-        {
-          name: "2024年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
-        },
-      ],
-    },
+      xAxis: cities,
+    };
   },
-  mounted() {
-    console.log("FTO created...");
+  computed: {
+    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)
+            ),
+          },
+          {
+            name: "样例数据--2024年",
+            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,
+        },
+      ];
+    },
   },
 };
 </script>

src/views/dashboard/charts/LeftChartBase.vue

@@ -26,8 +26,8 @@
 
 <script>
 import screenfull from "screenfull";
-import ChartContainerVue from "../components/ChartContainer.vue";
-import chartMixin from "../mixins/chart.js";
+import ChartContainerVue from "../../components/ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
 
 export default {
   name: "LeftChartBase",
@@ -56,6 +56,7 @@ export default {
   data() {
     return {
       isFullscreen: false,
+      actualOptions: null,
       options: {
         grid: {
           left: "3%",
@@ -107,7 +108,7 @@ export default {
         },
         series: [
           {
-            name: "2023年",
+            name: '', // this.series[0].name,
             type: "bar",
             barWidth: 12,
             itemStyle: {
@@ -139,10 +140,10 @@ export default {
                 global: false, // 缺省为 false
               },
             },
-            data: this.series[0].data,
+            data: [], // this.series[0].data,
           },
           {
-            name: "2024年",
+            name: '', // this.series[1].name,
             type: "bar",
             barWidth: 12,
             // tooltip: {
@@ -171,7 +172,7 @@ export default {
                 global: false, // 缺省为 false
               },
             },
-            data: this.series[1].data,
+            data: [], // this.series[1].data,
           },
         ],
       },
@@ -180,16 +181,30 @@ export default {
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
-      this.options.series.map((item) => {
+      this.actualOptions.series.map((item) => {
         item.barWidth = val ? 18 : 12;
       });
-      this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.options);
+      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) {

src/views/dashboard/charts/RightChartBase.vue

@@ -26,8 +26,8 @@
 
 <script>
 import screenfull from "screenfull";
-import ChartContainerVue from "../components/ChartContainer.vue";
-import chartMixin from "../mixins/chart.js";
+import ChartContainerVue from "../../components/ChartContainer.vue";
+import chartMixin from "@/mixins/chart.js";
 
 export default {
   name: "RightChartBase",
@@ -107,7 +107,7 @@ export default {
         },
         series: [
           {
-            name: "2024年目标值",
+            name: "", // "2024年目标值",
             type: "line",
             lineStyle: {
               color: "#f3c000",
@@ -139,10 +139,10 @@ export default {
                 global: false, // 缺省为 false
               },
             },
-            data: this.series[0].data,
+            data: [], // this.series[0].data,
           },
           {
-            name: "2023年",
+            name: "", // "2023年",
             type: "bar",
             barWidth: 12,
             itemStyle: {
@@ -174,10 +174,10 @@ export default {
                 global: false, // 缺省为 false
               },
             },
-            data: this.series[1].data,
+            data: [], // this.series[1].data,
           },
           {
-            name: "2024年",
+            name: "", // "2024年",
             type: "bar",
             barWidth: 12,
             // tooltip: {
@@ -206,25 +206,42 @@ export default {
                 global: false, // 缺省为 false
               },
             },
-            data: this.series[2].data,
+            data: [], // this.series[2].data,
           },
         ],
       },
+      actualOptions: null,
     };
   },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
-      this.options.series.map((item) => {
+      this.actualOptions.series.map((item) => {
         item.barWidth = val ? 18 : 12;
       });
-      this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
-      this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
-      this.initOptions(this.options);
+      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() {
+    this.actualOptions = this.options;
     this.initOptions(this.options);
 
     if (screenfull.isEnabled) {

src/views/dashboard/charts/StdChart.vue

@@ -21,41 +21,61 @@ import RightChartBase from "./RightChartBase.vue";
 export default {
   name: "StdChart",
   components: { RightChartBase },
-  props: {
-    legend: {
-      type: Array,
-      default: () => [
-        { label: "2024年目标值", color: "#f3c000" },
-        { label: "2023年", color: "#12f7f1" },
-        { label: "2024年", color: "#58adfa" },
+
+  data() {
+    const year = new Date().getFullYear();
+    // 城市数组的顺序必须是固定的
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
+    return {
+      legend: [
+        { label: `${year}年目标值`, color: "#f3c000" },
+        { label: `${year - 1}年`, color: "#12f7f1" },
+        { label: `${year}年`, color: "#58adfa" },
       ],
-    },
-    xAxis: {
-      type: Array,
-      default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
-    },
-    series: {
-      type: Array,
-      default: () => [
+      xAxis: cities,
+    };
+  },
+  computed: {
+    series() {
+      const stdOutput = this.$store.getters.home.stdOutput;
+
+      if (!stdOutput || !stdOutput.current || !stdOutput.previous) {
+        return [
+          {
+            name: "样例数据--2024年目标值",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+          {
+            name: "样例数据--2023年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+          {
+            name: "样例数据--2024年",
+            data: Array.from({ length: 7 }, () =>
+              Math.floor(Math.random() * 1000)
+            ),
+          },
+        ];
+      }
+
+      return [
         {
-          name: "2024年目标值",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear()}年目标值`,
+          data: stdOutput.target,
         },
         {
-          name: "2023年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear() - 1}年`,
+          data: stdOutput.previous,
         },
         {
-          name: "2024年",
-          data: Array.from({ length: 7 }, () =>
-            Math.floor(Math.random() * 1000)
-          ),
+          name: `${new Date().getFullYear()}年`,
+          data: stdOutput.current,
         },
-      ],
+      ];
     },
   },
 };

src/views/dashboard/components/Container.vue

@@ -9,6 +9,7 @@
   <div class="dashboard-container">
     <!-- refresh btn  -->
     <button
+      v-if="0"
       style="appearance: none; outline: none; border: none; background: none; color:#fff; cursor: pointer; position: absolute; top: 8px; right: 8px"
       @click="$emit('refresh')"
     >

src/views/index.vue

@@ -63,7 +63,6 @@ import store from "@/store";
 import DashboardHeader from "./dashboard/components/Header.vue";
 import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
 import Container from "./dashboard/components/Container.vue";
-import ChartContainer from "./dashboard/components/ChartContainer.vue";
 import FtoChart from "./dashboard/charts/Fto.vue";
 import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
 import BipvChart from "./dashboard/charts/Bipv.vue";
@@ -83,6 +82,8 @@ const LOCATIONS = [
   { x: 60, y: 58 },
   // 湖南 株洲
   { x: 56, y: 60 },
+  // 邯郸
+  { x: 58, y: 45 },
 ];
 
 export default {
@@ -91,7 +92,6 @@ export default {
     CompanyInfo,
     DbHeader: DashboardHeader,
     DbContainer: Container,
-    ChartContainer,
     FtoChart,
     ChipInvestChart,
     ChipYieldChart,
@@ -110,6 +110,8 @@ export default {
     };
   },
   mounted() {
+    this.$store.dispatch("copilot/initHome");
+
     this.$nextTick(() => {
       this.initPins();
 
@@ -143,29 +145,60 @@ export default {
       this.hintPosition = null;
     },
     showHint(position) {
+      const homeStore = this.$store.getters.home;
       this.hintPosition = position;
       const templateInfo = {
         companyName: "",
         items: [
-          { label: "FTO投入", value: Math.floor(Math.random() * 1000000) },
-          { label: "芯片产出", value: Math.floor(Math.random() * 10000000) },
-          { label: "芯片投入", value: Math.floor(Math.random() * 1000000) },
-          { label: "标准组件产出", value: Math.floor(Math.random() * 1000000) },
+          { label: "FTO投入", value: 0 }, // Math.floor(Math.random() * 1000000) },
+          { label: "芯片产出", value: 0 }, // Math.floor(Math.random() * 10000000) },
+          { label: "芯片投入", value: 0 }, // Math.floor(Math.random() * 1000000) },
+          { label: "标准组件产出", value: 0 }, // Math.floor(Math.random() * 1000000) },
         ],
       };
 
       if (position === LOCATIONS[0]) {
         templateInfo.companyName = "佳木斯中建材光电材料有限公司";
+        templateInfo.items[0].value = homeStore.ftoInvest.current[3];
+        templateInfo.items[2].value = homeStore.chipInvest.current[3];
+        templateInfo.items[1].value = homeStore.chipOutput.current[3];
+        templateInfo.items[3].value = homeStore.stdOutput.current[3];
       } else if (position === LOCATIONS[1]) {
         templateInfo.companyName = "成都中建材光电材料有限公司";
+        templateInfo.items[0].value = homeStore.ftoInvest.current[4];
+        templateInfo.items[2].value = homeStore.chipInvest.current[4];
+        templateInfo.items[1].value = homeStore.chipOutput.current[4];
+        templateInfo.items[3].value = homeStore.stdOutput.current[4];
       } else if (position === LOCATIONS[2]) {
         templateInfo.companyName = "蚌埠兴科玻璃有限公司";
+        templateInfo.items[0].value = homeStore.ftoInvest.current[6];
+        templateInfo.items[2].value = homeStore.chipInvest.current[6];
+        templateInfo.items[1].value = homeStore.chipOutput.current[6];
+        templateInfo.items[3].value = homeStore.stdOutput.current[6];
       } else if (position === LOCATIONS[3]) {
         templateInfo.companyName = "凯盛光伏材料有限公司（本部）";
+        templateInfo.items[0].value = homeStore.ftoInvest.current[5];
+        templateInfo.items[2].value = homeStore.chipInvest.current[5];
+        templateInfo.items[1].value = homeStore.chipOutput.current[5];
+        templateInfo.items[3].value = homeStore.stdOutput.current[5];
       } else if (position === LOCATIONS[4]) {
         templateInfo.companyName = "瑞昌中建材光电材料有限公司";
+        templateInfo.items[0].value = homeStore.ftoInvest.current[0];
+        templateInfo.items[2].value = homeStore.chipInvest.current[0];
+        templateInfo.items[1].value = homeStore.chipOutput.current[0];
+        templateInfo.items[3].value = homeStore.stdOutput.current[0];
       } else if (position === LOCATIONS[5]) {
         templateInfo.companyName = "中建材（株洲）光电材料有限公司";
+        templateInfo.items[0].value = homeStore.ftoInvest.current[2];
+        templateInfo.items[2].value = homeStore.chipInvest.current[2];
+        templateInfo.items[1].value = homeStore.chipOutput.current[2];
+        templateInfo.items[3].value = homeStore.stdOutput.current[2];
+      } else if (position === LOCATIONS[6]) {
+        templateInfo.companyName = "中建材（邯郸）光电材料有限公司";
+        templateInfo.items[0].value = homeStore.ftoInvest.current[1];
+        templateInfo.items[2].value = homeStore.chipInvest.current[1];
+        templateInfo.items[1].value = homeStore.chipOutput.current[1];
+        templateInfo.items[3].value = homeStore.stdOutput.current[1];
       }
 
       this.info = templateInfo;