优化设备状态配置，添加字体样式和新设置项

src/packages/components/Charts/MyComponents/DeviceStatus/config.ts

@@ -2,6 +2,27 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { DeviceStatusConfig } from './index'
 import dataJson from './data.json'
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗',
+}
+
+export enum FontStyleEnum {
+  NORMAL = '常规',
+  ITALIC = '斜体',
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold',
+}
+
+export const FontStyleObject = {
+  [FontStyleEnum.NORMAL]: 'normal',
+  [FontStyleEnum.ITALIC]: 'italic',
+}
+
 export const option = {
   dataset: dataJson.source,
   header: ['所属企业', '设备类型', '设备名称'],
@@ -20,15 +41,16 @@ export const option = {
   onlineRate: 75,
   onlineDevice: 23,
   totalDevice: 100,
-  headerBgColor1: '#0059c9',
-  headerBgColor2: '#003a8c',
-  legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
   progressColor: '#00E5FF',
   progressBgColor: 'rgba(0, 0, 0, 0.1)',
   progressTextColor: '#DDE3E9',
   paddingX: 60,
   paddingY: -4,
-  letterSpacing: 1
+  letterSpacing: 1,
+  // new properties from AlarmList
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  isShowButton: false
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Charts/MyComponents/DeviceStatus/config.vue

@@ -1,40 +1,102 @@
 <template>
-  <div class="go-device-status-config">
+  <collapse-item name="信息" :expanded="true">
-    <n-form-item label="标题">
+    <setting-item-box name="标题" :alone="true">
-      <n-input v-model:value="option.title" />
+      <setting-item>
-    </n-form-item>
+        <n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
-    <n-form-item label="标题大小">
+      </setting-item>
-      <n-input-number v-model:value="option.titleSize" />
+    </setting-item-box>
-    </n-form-item>
+  </collapse-item>
-    <n-form-item label="字体大小">
+
-      <n-input-number v-model:value="option.fontSize" />
+  <collapse-item name="样式" :expanded="true">
-    </n-form-item>
+    <setting-item-box name="标题">
-    <n-form-item label="表头高度">
+      <setting-item name="颜色">
-      <n-input-number v-model:value="option.headerHeight" />
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker>
-    </n-form-item>
+      </setting-item>
-    <n-form-item label="行高度">
+      <setting-item name="字体大小">
-      <n-input-number v-model:value="option.itemHeight" />
+        <n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
-    </n-form-item>
+      </setting-item>
-    <n-form-item label="在线率">
+      <setting-item name="字体粗细">
-      <n-input-number v-model:value="option.onlineRate" />
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
-    </n-form-item>
+      </setting-item>
-    <n-form-item label="在线设备">
+      <setting-item name="字体风格">
-      <n-input-number v-model:value="option.onlineDevice" />
+        <n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" />
-    </n-form-item>
+      </setting-item>
-    <n-form-item label="总设备">
+      <setting-item name="X轴内边距">
-      <n-input-number v-model:value="option.totalDevice" />
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
-    </n-form-item>
+      </setting-item>
-  </div>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="内容" :expanded="true">
+    <setting-item-box name="字体大小">
+      <setting-item>
+        <n-input-number v-model:value="optionData.fontSize" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="表头高度">
+      <setting-item>
+        <n-input-number v-model:value="optionData.headerHeight" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="行高度">
+      <setting-item>
+        <n-input-number v-model:value="optionData.itemHeight" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="在线率">
+      <setting-item>
+        <n-input-number v-model:value="optionData.onlineRate" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="在线设备">
+      <setting-item>
+        <n-input-number v-model:value="optionData.onlineDevice" size="small" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="总设备">
+      <setting-item>
+        <n-input-number v-model:value="optionData.totalDevice" size="small" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option } from './config'
+import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
-defineProps({
+const props = defineProps({
-  option: {
+  optionData: {
     type: Object as PropType<typeof option>,
     required: true
   }
 })
+
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+const fontStyleOptions = [
+  {
+    label: FontStyleEnum.NORMAL,
+    value: FontStyleObject[FontStyleEnum.NORMAL]
+  },
+  {
+    label: FontStyleEnum.ITALIC,
+    value: FontStyleObject[FontStyleEnum.ITALIC]
+  }
+]
 </script>

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

@@ -119,12 +119,11 @@ SmallBorder {
 
   .header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
     margin-bottom: 5px;
 
 
-    .header-right {
+    .header-right-squares {
       display: flex;
       align-items: center;
 

src/packages/components/Charts/MyComponents/WorkshopScene/config.ts

@@ -38,9 +38,9 @@ export const option = {
   sceneNameColor: '#ffffff',
   sceneNameSize: 20,
   labelColor: '#B0E0E6',
-  labelSize: 16,
+  labelSize: 14,
   valueColor: '#ffffff',
-  valueSize: 28,
+  valueSize: 22,
   pointColor1: '#00E5FF',
   pointColor2: '#FFD700'
 }

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

@@ -18,22 +18,45 @@
         <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"
+        <div class="scene-row" :style="{ backgroundImage: `url(${backgrounds[0]})` }">
-          :class="{ reverse: index % 2 !== 0 }" :style="{ backgroundImage: `url(${backgrounds[index]})` }">
+          <div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">
-            <div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{
+            危化品库</div>
-                      scene.name }}</div>
           <div class="metrics-container">
-            <template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
+            <div class="metric-top-1">
-              <div class="metric">
               <div class="metric-label">
-                  <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label
+                <span
-                  }}</span>
+                  :style="{ color: option.labelColor, fontSize: option.labelSize + 'px', marginLeft: 8 + 'px' }">场景总数</span>
+              </div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
+              </div>
+            </div>
+            <div class="metric-top-2">
+              <div class="metric-label">
+                <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
+              </div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="scene-row reverse" :style="{ backgroundImage: `url(${backgrounds[1]})` }">
+          <div class="scene-name-2" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">
+            危废品库</div>
+          <div class="metrics-container">
+            <div class="metric-bottom-1">
+              <div class="metric-label">
+                <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
+              </div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
+              </div>
+            </div>
+            <div class="metric-bottom-2">
+              <div class="metric-label">
+                <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
+              </div>
+              <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
               </div>
-                <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{
-                  metric.value }}</div>
             </div>
-           
-            </template>
           </div>
         </div>
       </div>
@@ -64,6 +87,7 @@ const option = computed(() => props.chartConfig.option)
 .go-workshop-scene {
   position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   padding: 12px;
@@ -111,16 +135,16 @@ const option = computed(() => props.chartConfig.option)
   .scene-row {
     display: flex;
     align-items: center;
-    padding: 0 25px;
+    padding: 0 8px;
-    height: 120px; // Taller rows
+    height: 95px; // Taller rows
     background-size: 100% 100%;
     background-repeat: no-repeat;
 
     &.reverse {
       flex-direction: row-reverse;
 
-      .scene-name {
+      .scene-name-2 {
-        margin-right: 0;
+        margin-right: 95px;
         margin-left: 25px;
       }
 
@@ -158,9 +182,13 @@ const option = computed(() => props.chartConfig.option)
     }
   }
 
-  .scene-name {
+  .scene-name-1,
+  .scene-name-2 {
     font-weight: bold;
-    margin-left: 105px;
+  }
+
+  .scene-name-1 {
+    margin-left: 95px;
   }
 
   .metrics-container {
@@ -175,7 +203,8 @@ const option = computed(() => props.chartConfig.option)
       margin: 0 30px;
       position: relative;
 
-      &::before, &::after {
+      &::before,
+      &::after {
         content: '';
         position: absolute;
         left: -2px;
@@ -184,35 +213,68 @@ const option = computed(() => props.chartConfig.option)
         background-color: #00E5FF;
         border-radius: 50%;
       }
+
       &::before {
         top: -1px;
       }
+
       &::after {
         bottom: -1px;
       }
     }
   }
 
-  .metric {
+  .metric-top-1,
+  .metric-top-2,
+  .metric-bottom-1,
+  .metric-bottom-2 {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
 
     .metric-label {
       display: flex;
       align-items: center;
-      margin-bottom: 10px; // More space
+      margin-bottom: 2px;
+
+      span {
+        margin-bottom: -5px;
+        margin-left: 3px;
+      }
+
       .point {
-        width: 0px; // Bigger point
+        width: 8px;
-        height: 0px;
+        height: 8px;
         border-radius: 50%;
         margin-right: 10px;
       }
     }
+
     .metric-value {
-      font-weight: bold;
+      font-weight: normal;
-      margin-left: 40px; // Align with label text
+      position: relative;
+      left: 10px; // Visually center the value under the text
     }
   }
+
+  .metric-top-1 {
+    position: relative;
+    left: -85px;
+  }
+
+  .metric-top-2 {
+    position: relative;
+    left: -30px;
+  }
+
+  .metric-bottom-1 {
+    position: relative;
+    left: 15px;
+  }
+
+  .metric-bottom-2 {
+    position: relative;
+    left: 70px;
+  }
 }
 </style>

src/packages/components/Charts/MyComponents/index.ts

@@ -8,6 +8,8 @@ import { LineDropdownConfig } from './LineDropdown/index'
 import { PieCenterConfig } from './PieCenter/index'
 import { LineGraph01Config } from './LineGraph01/index'
 import { LineGraph02Config } from './LineGraph02/index'
+import { LineGraph01Config } from './LineGraph01/index'
+import { LineGraph02Config } from './LineGraph02/index'
 import { MaxTrimConfig } from './MaxTrim/index'
 import { SmallBorderConfig } from './SmallBorder/index'