update 综合

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

@@ -6,16 +6,36 @@
 -->
 
 <template>
-  <div class="stock-monitor">仓库监控</div>
+  <div class="stock-monitor">
+    <MonitorItem
+      :cities="['成都', '邯郸', '株洲', '瑞昌', '佳木斯']"
+      :legendList="dhgList"
+    />
+    <MonitorItem :cities="['凯盛光伏', '蚌埠兴科']" :legendList="otherList" />
+  </div>
 </template>
 
 <script>
+import MonitorItemVue from "./sub/monitor/MonitorItem.vue";
+
 export default {
   name: "StockMonitor",
-  components: {},
+  components: { MonitorItem: MonitorItemVue },
   props: {},
   data() {
-    return {};
+    return {
+      dhgList: [
+        { 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" },
+      ],
+    };
   },
   computed: {},
   methods: {},
@@ -24,7 +44,20 @@ export default {
 
 <style scoped lang="scss">
 .stock-monitor {
-  background: #fff2;
   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>