style: 优化进度条组件

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

@@ -1,18 +1,20 @@
 import { publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { ProcessConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  dataset: 0,
+  dataset: 36,
   type: "circle",
-  percentage: 0,
+  color: '#4992FFFF',
-  color: '#F8B10AFF',
+  // 指标位置（线条时可用）
-  indicatorPlacement:"outside"
+  indicatorPlacement: "outside"
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
   public key = ProcessConfig.key
+  public attr = {...chartInitConfig, h: 500, zIndex: -1}
   public chartConfig = cloneDeep(ProcessConfig)
   public option = cloneDeep(option)
 }

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

@@ -5,7 +5,7 @@
     <SettingItemBox name="内容">
       <SettingItem name="数值">
         <!-- 与 config.ts 里的 option 对应 --><!-- n-input-number 是 NaiveUI 的控件 -->
-        <n-input-number v-model:value="optionData.percentage" size="small" :min="0" :max="100" placeholder="进度值"></n-input-number>
+        <n-input-number v-model:value="optionData.dataset" size="small" :min="0"  placeholder="进度值"></n-input-number>
       </SettingItem>
       <!-- 颜色粗细等等... -->
     </SettingItemBox>
@@ -40,7 +40,6 @@ import {
 // 获取 option 的数据，便于使用 typeof 获取类型
 import { option } from './config'
 
-// eslint-disable-next-line no-unused-vars
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,

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

@@ -1,5 +1,5 @@
 // 展示图片
-import image from '@/assets/images/chart/charts/circle.png'
+import image from '@/assets/images/chart/charts/process.png'
 // 公共类型声明
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 // 当前[信息模块]分类声明
@@ -13,7 +13,7 @@ export const ProcessConfig: ConfigType = {
   // 配置组件渲染 Components 格式: VC + key
   conKey: 'VCProcess',
   // 名称
-  title: '环形进度条',
+  title: '多类进度条',
   // 子分类目录
   category: ChatCategoryEnum.MORE,
   // 子分类目录

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

@@ -1,73 +1,27 @@
 <template>
-  <n-progress :type="type" :percentage="option.percentage"
+  <n-progress
-              :indicator-placement="indicatorPlacement"
+    :type="type"
-              :color="color"
+    :percentage="dataset"
+    :indicator-placement="indicatorPlacement"
+    :color="color"
   />
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, reactive, watch } from 'vue'
+import { PropType, toRefs, watch } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import config  from './config'
 
 const props = defineProps({
   chartConfig: {
-    type: Object as PropType<CreateComponentType>,
+    type: Object as PropType<config>,
     required: true,
-  }
+  },
 })
 
 // 取配置数据
-const { type, color, indicatorPlacement } = toRefs(props.chartConfig.option)
+const { type, color, indicatorPlacement, dataset } = toRefs(props.chartConfig.option)
 
-// 应用到图表的 option
+useChartDataFetch(props.chartConfig, useChartEditStore)
-const option = reactive({
-  percentage: 0,
-  color: '#F8B10AFF',
-})
-
-watch(
-    () => props.chartConfig.option.color,
-    () => {
-      option.color = props.chartConfig.option.color
-    }
-)
-
-watch(
-    () => props.chartConfig.option.percentage,
-    (newColor) => {
-      option.percentage = newColor
-    }
-)
-// 图表回调刷新
-const callback = () => {
-  option.percentage = props.chartConfig.option.dataset.percentage
-}
-callback()
-
-const updateDataset = (newData: string | number) => {
-  let p = parseFloat(`${newData}`)
-  if (p <= 0) { p = 0 }
-  if (p >= 100) { p = 100 }
-  props.chartConfig.option.percentage = p.toFixed(1)
-  option.value = props.chartConfig.option
-}
-
-watch(
-    () => props.chartConfig.option.dataset,
-    newData => updateDataset(newData),
-    {
-      immediate: true,
-    }
-)
-
-useChartDataFetch(props.chartConfig, useChartEditStore, callback)
 </script>
-<style lang="scss" scoped>
-@include go('decorates-number') {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>

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

@@ -1,3 +1,4 @@
+import { ProcessConfig } from './Process/index'
 import { RadarConfig } from './Radar/index'
 import { FunnelConfig } from './Funnel/index'
 import { HeatmapConfig } from './Heatmap/index'
@@ -5,4 +6,4 @@ import { PointConfig } from './Point/index'
 import { WaterPoloConfig } from './WaterPolo/index'
 import { TreeMapConfig } from './TreeMap/index'
 
-export default [RadarConfig, FunnelConfig, HeatmapConfig,PointConfig, WaterPoloConfig, TreeMapConfig]
+export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, PointConfig, WaterPoloConfig, TreeMapConfig]