feat: 新增进度条多个配置项

src/packages/components/Charts/Mores/Process/config.ts

@@ -33,15 +33,29 @@ export const indicatorPlacements = [
 
 export const option = {
   dataset: 36,
+  // 默认类型
   type: types[2].value,
+  // 进行时效果
+  processing: true,
+  // 主颜色
   color: '#4992FFFF',
+  // 轨道颜色
+  railColor: '#3e3e3f', 
+  // 指标
+  unit: '%',
+  // 指标大小
+  indicatorTextSize: 34,
   // 指标位置（线条时可用）
-  indicatorPlacement: "outside"
+  indicatorPlacement: 'outside',
+  // 指标颜色
+  indicatorTextColor: '#FFFFFFFF',
+  // 偏移角度
+  offsetDegree: 0
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
   public key = ProcessConfig.key
-  public attr = {...chartInitConfig, h: 500, zIndex: -1}
+  public attr = { ...chartInitConfig, h: 500, zIndex: -1 }
   public chartConfig = cloneDeep(ProcessConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Charts/Mores/Process/config.vue

@@ -1,29 +1,49 @@
 <template>
   <!-- 默认展开 -->
-  <CollapseItem
+  <CollapseItem name="进度条" :expanded="true">
-      name="进度条" :expanded="true">
     <SettingItemBox name="内容">
       <SettingItem name="数值">
         <!-- 与 config.ts 里的 option 对应 --><!-- n-input-number 是 NaiveUI 的控件 -->
-        <n-input-number v-model:value="optionData.dataset" size="small" :min="0"  placeholder="进度值"></n-input-number>
+        <n-input-number v-model:value="optionData.dataset" size="small" :min="0" placeholder="进度值"></n-input-number>
       </SettingItem>
-      <!-- 颜色粗细等等... -->
+      <setting-item name="单位">
+        <n-input v-model:value="optionData.unit" size="small"></n-input>
+      </setting-item>
     </SettingItemBox>
-    <SettingItemBox name="外观">
+
+    <SettingItemBox name="轨道">
       <SettingItem name="形状">
         <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" />
       </SettingItem>
-      <SettingItem name="指标位置" v-if="optionData.type == types[0].value">
+
-        <n-select v-model:value="optionData.indicatorPlacement" :options="indicatorPlacements" placeholder="选择形状" />
-      </SettingItem>
       <!-- 颜色粗细等等... -->
       <SettingItem name="进度条颜色">
-        <n-color-picker
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
-            size="small"
-            :modes="['hex']"
-            v-model:value="optionData.color"
-        ></n-color-picker>
       </SettingItem>
+      <SettingItem name="轨道颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.railColor"></n-color-picker>
+      </SettingItem>
+      <setting-item name="偏移角度" v-if="optionData.type !== types[0].value">
+        <n-input-number v-model:value="optionData.offsetDegree" size="small"></n-input-number>
+      </setting-item>
+      <SettingItem v-if="optionData.type == types[0].value">
+        <n-space>
+          <n-switch v-model:value="optionData.processing" size="small" />
+          <n-text>进行时动画</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="指标">
+      <SettingItem name="位置" v-if="optionData.type == types[0].value">
+        <n-select v-model:value="optionData.indicatorPlacement" :options="indicatorPlacements" placeholder="选择形状" />
+      </SettingItem>
+      <SettingItem name="文本颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker>
+      </SettingItem>
+       <setting-item name="文本大小">
+        <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number>
+      </setting-item>
     </SettingItemBox>
   </CollapseItem>
 </template>
@@ -31,14 +51,10 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 // 以下是封装的设置模块布局组件，具体效果可在官网查看
-import {
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
 
 // 获取 option 的数据，便于使用 typeof 获取类型
-import { option, types, indicatorPlacements} from './config'
+import { option, types, indicatorPlacements } from './config'
 
 const props = defineProps({
   optionData: {
@@ -46,4 +62,4 @@ const props = defineProps({
     required: true
   }
 })
-</script>
+</script>

src/packages/components/Charts/Mores/Process/index.vue

@@ -1,27 +1,53 @@
 <template>
   <n-progress
     :type="type"
+    :height="h"
+    :processing="processing"
     :percentage="dataset"
     :indicator-placement="indicatorPlacement"
     :color="color"
-  />
+    :rail-color="railColor"
+    :offset-degree="offsetDegree"
+  >
+    <n-text
+      :style="{
+        color: indicatorTextColor,
+        fontSize: `${indicatorTextSize}px`
+      }"
+    >
+      {{dataset}} {{unit}}
+    </n-text>
+  </n-progress>
 </template>
 
 <script setup lang="ts">
 import { PropType, toRefs, watch } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import config  from './config'
+import config from './config'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<config>,
-    required: true,
+    required: true
-  },
+  }
 })
 
 // 取配置数据
-const { type, color, indicatorPlacement, dataset } = toRefs(props.chartConfig.option)
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  type,
+  unit,
+  color,
+  fontSize,
+  processing,
+  railColor,
+  indicatorTextColor,
+  indicatorPlacement,
+  indicatorTextSize,
+  offsetDegree,
+  dataset
+} = toRefs(props.chartConfig.option)
 
 useChartDataFetch(props.chartConfig, useChartEditStore)
-</script>
+</script>