update chip yield chart

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>

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>

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;

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;

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: {

src/views/index.vue

@@ -13,11 +13,9 @@
             </db-container>
           </div>
           <div class="db-right">
-            <db-container
+            <db-container side="right" icon="chip" title="芯片产出">
-              side="right"
+              <chip-yield-chart />
-              icon="chip"
+            </db-container>
-              title="芯片产出"
-            ></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() {