1

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

@@ -2,14 +2,39 @@ 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,
+  titleSize: 17,
+  iconColor: '#00E5FF',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  paddingX: 40,
+  paddingY: -19,
+  letterSpacing: 2,
+  isShowButton: false,
   linkColor: '#00E5FF',
-  linkText: '查看更多>>',
+  linkText: '',
   sceneNameColor: '#ffffff',
   sceneNameSize: 18,
   labelColor: '#B0E0E6',

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,50 @@
 <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-icon-container">
-                <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label }}</span>
+            <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">
+            <template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
+              <div class="metric">
+                <div class="metric-label">
+                  <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 class="separator" v-if="mIndex < scene.metrics.length - 1"></div>
+          </div>
-          </template>
         </div>
       </div>
     </div>
-  </div>
+  </SmallBorder>
 </template>
 
 <script setup lang="ts">
@@ -42,6 +52,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 +68,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;
+  margin-top: 5px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -69,18 +82,18 @@ const option = computed(() => props.chartConfig.option)
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #1A385A;
+    margin-bottom: 3px;
-    padding: 5px 15px;
-    border-radius: 5px;
-    margin-bottom: 20px;
 
     .title {
       display: flex;
       align-items: center;
-      .title-icon {
+      margin-top: -5px;
-        font-size: 24px;
+
-        margin-right: 10px;
+      .title-text {
-        color: #00E5FF;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        padding: 0 20px 0 20px;
       }
     }
 
@@ -113,7 +126,7 @@ const option = computed(() => props.chartConfig.option)
         margin-right: 0;
         margin-left: 20px;
       }
-      
+
       .metrics-container {
         margin-right: auto;
         margin-left: 0;
@@ -169,11 +182,12 @@ const option = computed(() => props.chartConfig.option)
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    
+
     .metric-label {
       display: flex;
       align-items: center;
       margin-bottom: 5px;
+
       .point {
         width: 8px;
         height: 8px;
@@ -181,6 +195,7 @@ const option = computed(() => props.chartConfig.option)
         margin-right: 8px;
       }
     }
+
     .metric-value {
       font-weight: bold;
       margin-left: 16px;