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

@@ -6,22 +6,42 @@
 -->
 
 <template>
-
+  <div class="chip-rate">
+    <ChipRateItem :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
+    <ChipRateItem :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
+  </div>
 </template>
 
 <script>
+import ChipRateItemVue from "./sub/chip/ChipRateItem.vue";
 export default {
-    name: "ChipRate",
-    components: {},
-    props: {},
-    data() {
-        return {}
-    },
-    computed: {},
-    methods: {},
-}
+  name: "ChipRate",
+  components: { ChipRateItem: ChipRateItemVue },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
 </script>
 
 <style scoped lang="scss">
+.chip-rate {
+  flex: 1;
+  display: flex;
+  gap: 5px;
+  position: relative;
 
+  &:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 0;
+    width: 3px;
+    height: 100%;
+    transform: translateX(-50%);
+    background: linear-gradient(to bottom, transparent, #00f2ff, transparent);
+  }
+}
 </style>

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

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import StdRateItem from "./sub/StdRateItem.vue";
+import StdRateItem from "./sub/std/StdRateItem.vue";
 export default {
   name: "StdRate",
   components: { StdRateItem },

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

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

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

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