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

@@ -11,7 +11,7 @@ export const option = {
   linkColor: '#00E5FF',
   linkText: '查看更多>>',
   sceneNameColor: '#ccc',
-  sceneNameSize: 16,
+  sceneNameSize: 18,
   labelColor: '#ccc',
   labelSize: 14,
   valueColor: '#DFAB0F',

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

@@ -200,7 +200,7 @@
       <div class="content">
         <div v-for="(scene, index) in option.dataset" :key="index" class="scene-item">
           <div class="scene-header">
-            <span class="dots">···</span>
+            <img src="./assets/dot.png" alt="" class="dots"></img>
             <span class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{
               scene.name }}</span>
           </div>
@@ -255,7 +255,7 @@ const option = computed(() => props.chartConfig.option)
   }
 
   .scene-item:nth-child(n+2) {
-      margin-top: 8px;;
+      margin-top: 7px;;
   }
 
   .scene-header {

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

@@ -2,20 +2,45 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { WorkshopSceneConfig } 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,
   title: '场景分布概况',
   titleColor: '#ffffff',
   titleSize: 20,
+  iconColor: '#00E5FF',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  paddingX: 10,
+  paddingY: -12,
+  letterSpacing: 1,
+  isShowButton: false,
   linkColor: '#00E5FF',
-  linkText: '查看更多>>',
+  linkText: '',
   sceneNameColor: '#ffffff',
-  sceneNameSize: 18,
+  sceneNameSize: 20,
   labelColor: '#B0E0E6',
-  labelSize: 14,
+  labelSize: 16,
   valueColor: '#ffffff',
-  valueSize: 24,
+  valueSize: 28,
   pointColor1: '#00E5FF',
   pointColor2: '#FFD700'
 }

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

@@ -1,31 +1,87 @@
 <template>
-  <div class="go-workshop-scene-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.sceneNameSize" />
+  <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.labelSize" />
+        <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.valueSize" />
+        <n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
-    </n-form-item>
+      </setting-item>
-  </div>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="字体风格">
+        <n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <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 name="名称大小">
+        <n-input-number v-model:value="optionData.sceneNameSize" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="标签">
+      <setting-item name="大小">
+        <n-input-number v-model:value="optionData.labelSize" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="数值">
+      <setting-item name="大小">
+        <n-input-number v-model:value="optionData.valueSize" />
+      </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/WorkshopScene/index.vue

@@ -1,40 +1,44 @@
 <template>
-  <div class="go-workshop-scene">
+  <SmallBorder>
-    <div class="header">
+    <div class="go-workshop-scene">
-      <div class="title">
+      <div class="header">
-        <svg-icon icon-class="rocket" class="title-icon"></svg-icon>
+        <div class="title">
-        <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+          <div class="title-text">
-      </div>
+            <span :style="{
-      <a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a>
+              color: option.titleColor,
-    </div>
+              fontSize: option.titleSize + 'px',
-    <div class="content">
+              fontWeight: option.fontWeight,
-      <div 
+              fontStyle: option.fontStyle,
-        v-for="(scene, index) in option.dataset" 
+              marginLeft: option.paddingX + 'px',
-        :key="index" 
+              marginTop: option.paddingY + 'px',
-        class="scene-row" 
+              letterSpacing: option.letterSpacing + 'px'
-        :class="{ reverse: index % 2 !== 0 }"
+            }">{{ option.title }}</span>
-        :style="{ backgroundImage: `url(${backgrounds[index]})` }"
+          </div>
-      >
-        <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>
+        <a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a>
-        <div class="metrics-container">
+      </div>
-          <template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
+      <div class="content">
-            <div class="metric">
+        <div v-for="(scene, index) in option.dataset" :key="index" class="scene-row"
-              <div class="metric-label">
+          :class="{ reverse: index % 2 !== 0 }" :style="{ backgroundImage: `url(${backgrounds[index]})` }">
-                <span class="point" :style="{ backgroundColor: mIndex === 0 ? option.pointColor1 : option.pointColor2 }"></span>
+            <div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{
-                <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label }}</span>
+                      scene.name }}</div>
+		  <div class="metrics-container">
+            <template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
+              <div class="metric">
+                <div class="metric-label">
+                  <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>
+            </template>
-            <div class="separator" v-if="mIndex < scene.metrics.length - 1"></div>
+          </div>
-          </template>
         </div>
       </div>
     </div>
-  </div>
+  </SmallBorder>
 </template>
 
 <script setup lang="ts">
@@ -42,6 +46,7 @@ import { PropType, computed } from 'vue'
 import { option as configOption } from './config'
 import bg1 from './assets/6.png'
 import bg2 from './assets/04.png'
+import SmallBorder from '../SmallBorder/index.vue'
 
 const backgrounds = [bg1, bg2]
 
@@ -57,10 +62,12 @@ const option = computed(() => props.chartConfig.option)
 
 <style lang="scss" scoped>
 .go-workshop-scene {
+  position: absolute;
+  top: 0;
   width: 100%;
   height: 100%;
-  background-color: #0F1C3D;
+  padding: 12px;
-  padding: 15px;
+  padding-top: 0; // Let the header handle top padding
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -69,24 +76,27 @@ const option = computed(() => props.chartConfig.option)
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #1A385A;
+    margin-bottom: 10px; // More space
-    padding: 5px 15px;
+    margin-top: 5px;
-    border-radius: 5px;
-    margin-bottom: 20px;
 
     .title {
       display: flex;
       align-items: center;
-      .title-icon {
+	   margin-left: 35px;
-        font-size: 24px;
+      margin-top: 5px;
-        margin-right: 10px;
+
-        color: #00E5FF;
+      .title-text {
+        height: 35px;
+        display: flex;
+        align-items: center;
+        padding: 0 20px 0 20px;
       }
     }
 
     .link {
       cursor: pointer;
-      font-size: 14px;
+      font-size: 16px; // Bigger link text
+      margin-right: 20px;
     }
   }
 
@@ -94,15 +104,15 @@ const option = computed(() => props.chartConfig.option)
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: center; // Center the rows vertically
+    gap: 20px; // Space between rows
   }
 
   .scene-row {
     display: flex;
     align-items: center;
-    padding: 0 30px;
+    padding: 0 25px;
-    margin: 10px 0;
+    height: 120px; // Taller rows
-    height: 90px;
     background-size: 100% 100%;
     background-repeat: no-repeat;
 
@@ -111,7 +121,7 @@ const option = computed(() => props.chartConfig.option)
 
       .scene-name {
         margin-right: 0;
-        margin-left: 20px;
+        margin-left: 25px;
       }
       
       .metrics-container {
@@ -123,33 +133,34 @@ const option = computed(() => props.chartConfig.option)
 
   .scene-icon-container {
     position: relative;
-    width: 60px;
+    width: 72px; // Bigger icon container
-    height: 60px;
+    height: 72px;
     border-radius: 50%;
-    background: radial-gradient(circle, #00E5FF 0%, rgba(15, 28, 61, 0) 70%);
+    background: radial-gradient(circle, rgba(0, 229, 255, 0.5) 0%, rgba(15, 28, 61, 0) 70%);
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
 
     .yellow-dot {
       position: absolute;
-      top: 5px;
+      top: 8px;
-      right: 5px;
+      left: 8px; // Positioned differently in 1.png
-      width: 10px;
+      width: 0px;
-      height: 10px;
+      height: 0px;
       background-color: #FFD700;
       border-radius: 50%;
     }
 
     .scene-icon {
-      font-size: 32px;
+      font-size: 36px;
       color: #ffffff;
     }
   }
 
   .scene-name {
     font-weight: bold;
-    margin-left: 20px;
+    margin-left: 105px;
   }
 
   .metrics-container {
@@ -159,9 +170,26 @@ const option = computed(() => props.chartConfig.option)
 
     .separator {
       width: 1px;
-      height: 40px;
+      height: 50px;
       background-color: #00E5FF;
-      margin: 0 20px;
+      margin: 0 30px;
+      position: relative;
+
+      &::before, &::after {
+        content: '';
+        position: absolute;
+        left: -2px;
+        width: 5px;
+        height: 5px;
+        background-color: #00E5FF;
+        border-radius: 50%;
+      }
+      &::before {
+        top: -1px;
+      }
+      &::after {
+        bottom: -1px;
+      }
     }
   }
 
@@ -173,17 +201,17 @@ const option = computed(() => props.chartConfig.option)
     .metric-label {
       display: flex;
       align-items: center;
-      margin-bottom: 5px;
+      margin-bottom: 10px; // More space
       .point {
-        width: 8px;
+        width: 0px; // Bigger point
-        height: 8px;
+        height: 0px;
         border-radius: 50%;
-        margin-right: 8px;
+        margin-right: 10px;
       }
     }
     .metric-value {
       font-weight: bold;
-      margin-left: 16px;
+      margin-left: 40px; // Align with label text
     }
   }
 }