sdf

src/packages/components/Charts/MyComponents/WorkshopScene/data.json

@@ -1,7 +1,7 @@
 {
   "source": [
     {
-      "name": "调漆作业室",
+      "name": "危化品库",
       "icon": "warehouse",
       "metrics": [
         { "label": "场景总数", "value": 262 },
@@ -9,7 +9,7 @@
       ]
     },
     {
-      "name": "喷漆作业室",
+      "name": "危废品库",
       "icon": "warehouse",
       "metrics": [
         { "label": "智控场景", "value": 6852 },
@@ -17,4 +17,4 @@
       ]
     }
   ]
-}
+}

src/packages/components/Charts/MyComponents/WorkshopScene/index.vue

@@ -8,19 +8,29 @@
       <a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a>
     </div>
     <div class="content">
-      <div v-for="(scene, index) in option.dataset" :key="index" class="scene-row" :class="{ reverse: index % 2 !== 0 }">
+      <div 
+        v-for="(scene, index) in option.dataset" 
+        :key="index" 
+        class="scene-row" 
+        :class="{ reverse: index % 2 !== 0 }"
+        :style="{ backgroundImage: `url(${backgrounds[index]})` }"
+      >
         <div class="scene-icon-container">
+          <div class="yellow-dot"></div>
           <svg-icon :icon-class="scene.icon" class="scene-icon"></svg-icon>
         </div>
         <div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{ scene.name }}</div>
         <div class="metrics-container">
-          <div v-for="(metric, mIndex) in scene.metrics" :key="mIndex" class="metric">
+          <template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
-            <div class="metric-label">
+            <div class="metric">
-              <span class="point" :style="{ backgroundColor: mIndex === 0 ? option.pointColor1 : option.pointColor2 }"></span>
+              <div class="metric-label">
-              <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label }}</span>
+                <span class="point" :style="{ backgroundColor: mIndex === 0 ? option.pointColor1 : option.pointColor2 }"></span>
+                <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label }}</span>
+              </div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ metric.value }}</div>
             </div>
-            <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ metric.value }}</div>
+            <div class="separator" v-if="mIndex < scene.metrics.length - 1"></div>
-          </div>
+          </template>
         </div>
       </div>
     </div>
@@ -30,6 +40,10 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { option as configOption } from './config'
+import bg1 from '/6.png'
+import bg2 from '/04.png'
+
+const backgrounds = [bg1, bg2]
 
 const props = defineProps({
   chartConfig: {
@@ -86,35 +100,29 @@ const option = computed(() => props.chartConfig.option)
   .scene-row {
     display: flex;
     align-items: center;
-    background-color: rgba(26, 56, 90, 0.5);
+    padding: 0 30px;
-    border-radius: 50px;
-    padding: 10px 20px;
     margin: 10px 0;
+    height: 90px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
 
     &.reverse {
       flex-direction: row-reverse;
 
-      .scene-icon-container {
-        margin-right: 0;
-        margin-left: 15px;
-      }
-
       .scene-name {
         margin-right: 0;
-        margin-left: auto;
+        margin-left: 20px;
       }
-
+      
       .metrics-container {
-        flex-direction: row-reverse;
+        margin-right: auto;
-        .metric {
+        margin-left: 0;
-          margin-left: 0;
-          margin-right: 20px;
-        }
       }
     }
   }
 
   .scene-icon-container {
+    position: relative;
     width: 60px;
     height: 60px;
     border-radius: 50%;
@@ -122,7 +130,16 @@ const option = computed(() => props.chartConfig.option)
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 15px;
+
+    .yellow-dot {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      width: 10px;
+      height: 10px;
+      background-color: #FFD700;
+      border-radius: 50%;
+    }
 
     .scene-icon {
       font-size: 32px;
@@ -132,31 +149,42 @@ const option = computed(() => props.chartConfig.option)
 
   .scene-name {
     font-weight: bold;
-    margin-right: auto;
+    margin-left: 20px;
   }
 
   .metrics-container {
     display: flex;
-    .metric {
+    align-items: center;
+    margin-left: auto;
+
+    .separator {
+      width: 1px;
+      height: 40px;
+      background-color: #00E5FF;
+      margin: 0 20px;
+    }
+  }
+
+  .metric {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .metric-label {
       display: flex;
-      flex-direction: column;
       align-items: center;
-      margin-left: 20px;
+      margin-bottom: 5px;
-      .metric-label {
+      .point {
-        display: flex;
+        width: 8px;
-        align-items: center;
+        height: 8px;
-        margin-bottom: 5px;
+        border-radius: 50%;
-        .point {
+        margin-right: 8px;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          margin-right: 5px;
-        }
-      }
-      .metric-value {
-        font-weight: bold;
       }
     }
+    .metric-value {
+      font-weight: bold;
+      margin-left: 16px;
+    }
   }
 }
 </style>