update stdoutput

2024-04-17 11:24:08 +08:00
parent f3e02b01f1
commit 7c479072e0
12 changed files with 466 additions and 186 deletions
--- a/src/mixins/fullscreen.js
+++ b/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;
+      });
+    }
+  },
+};
--- a/src/views/copilot/components/Container.vue
+++ b/src/views/copilot/components/Container.vue
@@ -100,18 +100,31 @@ export default {
  box-shadow: inset 0 0 20px 1px #fff1;
  backdrop-filter: blur(4px);

-  // &::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;
-  // }
+  &::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;
--- a/src/views/copilot/components/CopilotHeader.vue
+++ b/src/views/copilot/components/CopilotHeader.vue
@@ -26,7 +26,11 @@
      />
      <div class="btn-group">
        <button type="button" class="export-btn" />
-        <button type="button" class="fullscreen-btn" />
+        <button
+          type="button"
+          class="fullscreen-btn"
+          @click="toggleFullScreen"
+        />
      </div>
    </section>
    <div class="page-title">{{ active }}驾驶舱</div>
@@ -35,6 +39,8 @@

 <script>
 import CopilotButton from "./button.vue";
+import screenfull from "screenfull";
+
 export default {
  name: "CopilotHeader",
  components: { CopilotButton },
@@ -47,10 +53,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>

--- a/src/views/copilot/components/charts/BipvOutput.vue
+++ b/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>
--- a/src/views/copilot/components/charts/ChipOutput.vue
+++ b/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>
--- a/src/views/copilot/components/charts/StdOutput.vue
+++ b/src/views/copilot/components/charts/StdOutput.vue
@@ -6,56 +6,25 @@
 -->

 <template>
-  <div class="std-output">
-    <copilot-select :options="cityOptions" />
-    <div class="flex-1 stretch">f</div>
-  </div>
+  <DoubleRingWrapperVue />
 </template>

 <script>
-import CopilotSelect from "../select.vue";
-import fetcher from "./std-output-data";
+import DoubleRingWrapperVue from "./base/DoubleRingWrapper.vue";

 export default {
  name: "StdOutput",
-  components: { CopilotSelect },
+  components: { DoubleRingWrapperVue },
  props: {},
  data() {
-    return {
-      cityOptions: [
-        "成都",
-        "邯郸",
-        "株洲",
-        "瑞昌",
-        "佳木斯",
-        "凯盛光伏",
-        "蚌埠兴科",
-      ],
-    };
+    return {};
  },
-  computed: {},
-  mounted() {
-    fetcher.getData().then((res) => {
-      console.log("getData--->", res, fetcher.options);
-    });
-  },
-  methods: {},
 };
 </script>

 <style scoped lang="scss">
-.std-output {
-  height: 100%;
-  padding: 12px 24px;
-  display: flex;
-  gap: 12px;
-  flex-direction: column;
-  align-items: center;
-}
-
 .flex-1 {
  flex: 1;
-  background: #f001;
 }

 .stretch {
--- a/src/views/copilot/components/charts/base/DoubleRingChart.vue
+++ b/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>
--- a/src/views/copilot/components/charts/base/DoubleRingWrapper.vue
+++ b/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>
--- a/src/views/copilot/components/charts/base/double-ring-chart-options.js
+++ b/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 },
+        },
+      ],
+    },
+  ],
+};
--- a/src/views/copilot/components/charts/base/fetcherDoubleRing.js
+++ b/src/views/copilot/components/charts/base/fetcherDoubleRing.js
@@ -1,7 +1,4 @@
-import options from './double-ring-chart-options';
-
 export default {
-  options,
  getData: async function (url) {
    //
    return await new Promise((resolve, reject) => {
--- a/src/views/copilot/components/charts/double-ring-chart-options.js
+++ b/src/views/copilot/components/charts/double-ring-chart-options.js
@@ -1,122 +0,0 @@
-export default {
-  grid: {
-    left: "3%",
-    right: "4%",
-    bottom: "0",
-    top: "15%",
-    containLabel: true,
-  },
-  tooltip: {},
-  xAxis: {
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: "#4561AE",
-      },
-    },
-    axisLabel: {
-      color: "#fff",
-      fontSize: 12,
-    },
-    // data: this.xAxis,
-    data: [],
-  },
-  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: "2023年",
-      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,
-      data: [],
-    },
-    {
-      name: "2024年",
-      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: [],
-      //   data: this.series[1].data,
-    },
-  ],
-};
--- a/src/views/copilot/yield/index.vue
+++ b/src/views/copilot/yield/index.vue
@@ -11,16 +11,12 @@
      <db-container class="std-yield" title="标准组件产出" icon="std">
        <std-output />
      </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="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,10 +32,18 @@
 <script>
 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, StdOutput: StdOutputVue },
+  components: {
+    DbContainer: Container,
+    StdOutput: StdOutputVue,
+    ChipOutput: ChipOutputVue,
+    BipvOutput: BipvOutputVue,
+  },
  props: {},
  data() {
    return {};