修改

src/views/copilot/energy/components/StockMonitor.vue

@@ -1,8 +1,9 @@
-<!-- 
-    filename: StockMonitor.vue
-    author: liubin
-    date: 2024-04-29 16:35:40
-    description: 仓库监控·当前
+<!--
+ * @Author: zhp
+ * @Date: 2024-05-07 10:25:10
+ * @LastEditTime: 2024-05-08 09:39:15
+ * @LastEditors: zhp
+ * @Description:
 -->
 
 <template>
@@ -25,15 +26,15 @@ export default {
   data() {
     return {
       dhgList: [
-        { name: "总库存", value: "1000" },
-        { name: "已用库存", value: "500" },
-        { name: "剩余库存", value: "500" },
+        { name: "总库存", value: 1000 },
+        { name: "已用库存", value: 500 },
+        { name: "剩余库存", value: 500 },
       ],
       otherList: [
-        { name: "分类1", value: "1000" },
-        { name: "分类2", value: "1000" },
-        { name: "分类3", value: "1000" },
-        { name: "分类4", value: "1000" },
+        { name: "分类1", value: 1000 },
+        { name: "分类2", value: 1000 },
+        { name: "分类3", value: 1000 },
+        { name: "分类4", value: 1000 },
       ],
     };
   },

src/views/copilot/energy/components/sub/monitor/MonitorItem.vue

@@ -1,8 +1,8 @@
-<!-- 
+<!--
     filename: ChipRateItem.vue
     author: liubin
     date: 2024-04-29 14:25:18
-    description: 
+    description:
 -->
 
 <template>
@@ -12,9 +12,12 @@
     </div>
     <div class="chart" ref="chart"></div>
     <div class="legend" v-if="1">
-      <div class="legend-item" v-for="lgd in legendList" :key="lgd.name">
-        <span class="legend-item__label">{{ lgd.name }}</span>
-        <span class="legend-item__value">{{ lgd.value }}</span>
+      <div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name">
+        <div >
+          <span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></span>
+          <span :style="'color:' + colors[index%5]" class="legend-item__label">{{ lgd.name }}</span>
+        </div>
+        <div :style="'color:' + colors[index%5]" class="legend-item__value">{{ lgd.value }}</div>
       </div>
     </div>
   </div>
@@ -47,6 +50,7 @@ export default {
   data() {
     return {
       period: "月",
+      colors:['#2760FF', '#5996F7', '#8BC566', '#11FAF0', '#F3C000'],
       valueTuple: [100, 100, 200],
     };
   },
@@ -54,19 +58,23 @@ export default {
     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}年累计产出`;
+      let arr = []
+      this.legendList.forEach(ele => {
+        arr.push(ele.value)
+      });
+      let vt = arr
+      console.log(arr)
+      let titleValue = vt.reduce(function (prev, cur, index, arr) {
+        return prev + cur
+      })
+      let subtitle = `总计/片`;
 
       return getOptions({
         single: true,
         color: this.color == 1 ? "#4CF0E8" : "#1065ff",
         titleValue,
         subtitle,
+        dataList:this.legendList,
         previousSum: this.valueTuple[0],
         currentSum: this.valueTuple[1],
         targetSum: this.valueTuple[2],
@@ -107,27 +115,31 @@ export default {
   .legend {
     height: 80px;
     display: flex;
-    gap: 40px;
+    gap: 20px;
     justify-content: space-around;
   }
 
   .legend-item {
     display: flex;
+    // width: 90px;
     flex-direction: column;
+    // justify-content: space-around;
+    // justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
     gap: 3px;
-
-    &:first-child {
-      .legend-item__value {
-        color: #0e61f5;
-      }
+    .legend-item__chart{
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      background: #2760FF;
+      border-radius: 2px;
+      // margin-right: 8px;
     }
-
-    &:nth-child(2) {
-      .legend-item__value {
-        color: #0fd5d1;
-      }
+   .legend-item__label {
+      margin-left: 8px;
     }
+    // }
   }
 
   .legend-item__value {