update chip yield chart

2024-04-11 14:35:15 +08:00 · 2024-04-11 14:35:15 +08:00 · 8bd678cf62
Parent 11626c5142
--- a/src/views/dashboard/charts/ChipYield.vue
+++ b/src/views/dashboard/charts/ChipYield.vue
@ -0,0 +1,196 @@
+<!-- 
+    filename: ChipYield.vue
+    author: liubin
+    date: 2024-04-11 10:46:47
+    description: 
+-->
+
+<template>
+  <div class="chip-yield">
+    <chip-yield-chart />
+    <section class="right-part">
+      <div class="yield-location">
+        <section class="btn-group">
+          <button
+            @click="activeLoc = '1'"
+            :class="activeLoc === '1' ? 'active' : ''"
+          >
+            成都
+          </button>
+          <button
+            @click="activeLoc = '2'"
+            :class="activeLoc === '2' ? 'active' : ''"
+          >
+            邯郸
+          </button>
+          <button
+            @click="activeLoc = '3'"
+            :class="activeLoc === '3' ? 'active' : ''"
+          >
+            株洲
+          </button>
+          <button
+            @click="activeLoc = '4'"
+            :class="activeLoc === '4' ? 'active' : ''"
+          >
+            瑞昌
+          </button>
+        </section>
+        <section class="btn-group">
+          <button
+            @click="activeLoc = '5'"
+            :class="activeLoc === '5' ? 'active' : ''"
+            class="fixwidth"
+          >
+            佳木斯
+          </button>
+          <button
+            @click="activeLoc = '6'"
+            :class="activeLoc === '6' ? 'active' : ''"
+          >
+            凯盛光伏
+          </button>
+          <button
+            @click="activeLoc = '7'"
+            :class="activeLoc === '7' ? 'active' : ''"
+          >
+            蚌埠兴科
+          </button>
+        </section>
+      </div>
+      <div class="yield-summary">
+        <div class="legend">
+          <span class="legend-label">2024年累计</span>
+          <span class="legend-value deep-green">40,100</span>
+        </div>
+        <div class="legend">
+          <span class="legend-label">2024年目标</span>
+          <span class="legend-value">30,100</span>
+        </div>
+        <div class="legend">
+          <span class="legend-label">2023年累计</span>
+          <span class="legend-value deep-blue">400</span>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import ChipYieldChart from "./ChipYieldChart.vue";
+
+export default {
+  name: "ChipYield",
+  components: { ChipYieldChart },
+  props: {},
+  data() {
+    return {
+      activeLoc: "1",
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.chip-yield {
+  height: 0;
+  flex: 1;
+  background: #c0c1;
+  display: flex;
+  gap: 12px;
+
+  .yield-location {
+    margin-top: 2.2vh;
+
+    .btn-group {
+      margin-top: 8px;
+      display: flex;
+      border-radius: 4px;
+      overflow: hidden;
+
+      button {
+        flex: 1;
+        appearance: none;
+        outline: none;
+        border: none;
+        cursor: pointer;
+        background: #01306c;
+        color: #fff;
+        padding: 8px 6px;
+        font-size: 0.63vw;
+        position: relative;
+      }
+
+      button.fixwidth {
+        flex: unset;
+        width: 2.765vw;
+      }
+
+      button:not(:first-child)::before {
+        content: "";
+        display: inline-block;
+        width: 2px;
+        height: 60%;
+        background: #052141;
+        position: absolute;
+        top: 20%;
+        left: -1px;
+      }
+
+      button.active {
+        background: #1d74d8;
+      }
+    }
+  }
+
+  .yield-summary {
+    margin-top: 3vh;
+    display: grid;
+    gap: 0.56vw;
+    grid-auto-rows: 40px;
+    grid-template-columns: 1fr 1fr;
+
+    .legend {
+      border-radius: 4px;
+      padding: 1px;
+      display: flex;
+      flex-direction: column;
+      font-size: 0.725vw;
+      padding-left: 0.88vw;
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 20%;
+        left: 0;
+        width: 0.52vw;
+        height: 0.52vw;
+        border-radius: 2px;
+        background: #ccc;
+        display: inline-block;
+      }
+
+      &:first-child::before {
+        background: #11f0e8;
+      }
+
+      &:nth-child(2)::before {
+        background: #003982;
+      }
+
+      &:last-child::before {
+        background: #0551c7;
+      }
+
+      .deep-blue {
+        color: #0551c7;
+      }
+
+      .deep-green {
+        color: #11f0e8;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/dashboard/charts/ChipYieldChart.vue
+++ b/src/views/dashboard/charts/ChipYieldChart.vue
@ -0,0 +1,194 @@
+<!-- 
+    filename: ChipYield.vue
+    author: liubin
+    date: 2024-04-11 10:46:47
+    description: 
+-->
+
+<template>
+  <chart-container class="chip-yield-chart" :noScroll="true">
+    <div
+      ref="chart"
+      style="width: 10vw"
+      :style="{ height: vHeight + 'vh' }"
+    ></div>
+  </chart-container>
+</template>
+
+<script>
+import ChartContainerVue from "../components/ChartContainer.vue";
+import chartMixin from "../mixins/chart.js";
+import screenfull from "screenfull";
+
+export default {
+  name: "ChipYield",
+  components: { ChartContainer: ChartContainerVue },
+  mixins: [chartMixin],
+  props: {
+    vHeight: {
+      type: Number,
+      default: 22,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+      options: {
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 0,
+          containLabel: true,
+        },
+        tooltip: {},
+        title: {
+          text: "78%",
+          left: "48%",
+          top: "35%",
+          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 },
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
+    isFullscreen(val) {
+      this.options.title.top = val ? "40%" : "35%";
+      this.options.title.textStyle.fontSize = val ? 48 : 32;
+      this.options.title.subtextStyle.fontSize = val ? 18 : 14;
+      this.initOptions(this.options);
+    },
+  },
+  mounted() {
+    /** 清除 MIN_WIDTH, 此处比较特殊, 需要这么一步, 去除 chart mixin 的滚动条功能 */
+    this.MIN_WIDTH = 0;
+    this.initOptions(this.options);
+
+    if (screenfull.isEnabled) {
+      screenfull.on("change", () => {
+        this.isFullscreen = screenfull.isFullscreen;
+      });
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.chip-yield-chart {
+  height: 100%;
+  flex: 1;
+  overflow: visible;
+}
+</style>
--- a/src/views/dashboard/components/ChartContainer.vue
+++ b/src/views/dashboard/components/ChartContainer.vue
@ -7,7 +7,7 @@
 -->

 <template>
-  <div class="chart-container">
+  <div class="chart-container" :class="{ 'no-scroll': noScroll }">
    <slot />
  </div>
 </template>
@ -16,7 +16,12 @@
 export default {
  name: "ChartContainer",
  components: {},
-  props: {},
+  props: {
+    noScroll: {
+      type: Boolean,
+      default: false,
+    },
+  },
  data() {
    return {};
  },
@ -32,6 +37,11 @@ export default {
  overflow-x: scroll;
 }

+.no-scroll::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
 ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
--- a/src/views/dashboard/components/Container.vue
+++ b/src/views/dashboard/components/Container.vue
@ -69,6 +69,19 @@ export default {
  position: relative;
  box-shadow: inset 0 0 20px 1px #fff1;

+  // &::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;
--- a/src/views/dashboard/mixins/chart.js
+++ b/src/views/dashboard/mixins/chart.js
@ -9,18 +9,21 @@ function __resizeHandler(entries) {
        : entry.contentBoxSize;
      this.chart_mixin_chartInstance.resize({
        width:
-          contentBoxSize.inlineSize < 400 ? 400 : contentBoxSize.inlineSize,
+          contentBoxSize.inlineSize < this.MIN_WIDTH
+            ? this.MIN_WIDTH
+            : contentBoxSize.inlineSize,
        height: contentBoxSize.blockSize,
      });
    } else {
      // manipulate contentRect
      this.chart_mixin_chartInstance.resize({
-        width: entry.contentRect.width < 400 ? 400 : entry.contentRect.width,
+        width:
+          entry.contentRect.width < this.MIN_WIDTH
+            ? this.MIN_WIDTH
+            : entry.contentRect.width,
        height: entry.contentRect.height,
      });
    }
-
-    console.log("[resizing.......] ");
  }
 }

@ -29,6 +32,7 @@ export default {
    const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));

    return {
+      MIN_WIDTH: 400,
      chart_mixin_chartInstance: null,
      chart_mixin_observer: resizeObserver,
      chart_mixin_options: {
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -13,11 +13,9 @@
            </db-container>
          </div>
          <div class="db-right">
-            <db-container
-              side="right"
-              icon="chip"
-              title="芯片产出"
-            ></db-container>
+            <db-container side="right" icon="chip" title="芯片产出">
+              <chip-yield-chart />
+            </db-container>
            <db-container
              side="right"
              icon="std"
@ -48,6 +46,7 @@ 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";
+import ChipYieldChart from "./dashboard/charts/ChipYield.vue";

 const LOCATIONS = [
  // 佳木斯
@ -73,6 +72,7 @@ export default {
    ChartContainer,
    FtoChart,
    ChipInvestChart,
+    ChipYieldChart,
    BipvChart,
  },
  data() {