feat: 新增进度条组件

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

@@ -0,0 +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: 36,
+  type: "circle",
+  color: '#4992FFFF',
+  // 指标位置（线条时可用）
+  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

@@ -0,0 +1,75 @@
+<template>
+  <!-- 默认展开 -->
+  <CollapseItem
+      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>
+      </SettingItem>
+      <!-- 颜色粗细等等... -->
+    </SettingItemBox>
+    <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
+            size="small"
+            :modes="['hex']"
+            v-model:value="optionData.color"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+// 以下是封装的设置模块布局组件，具体效果可在官网查看
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
+
+// 获取 option 的数据，便于使用 typeof 获取类型
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const types = [
+  {
+    label: '线形',
+    value: 'line'
+  },
+  {
+    label: '圆形',
+    value: 'circle'
+  },
+  {
+    label: '仪表盘',
+    value: 'dashboard'
+  },
+]
+
+const indicatorPlacements = [
+  {
+    label: '里面',
+    value: 'inside'
+  },
+  {
+    label: '外边',
+    value: 'outside'
+  }
+]
+</script>

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

@@ -0,0 +1,25 @@
+// 展示图片
+import image from '@/assets/images/chart/charts/process.png'
+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const ProcessConfig: ConfigType = {
+  // 唯一key
+  key: 'Process',
+  // 图表组件渲染 Components 格式: V + key
+  chartKey: 'VProcess',
+  // 配置组件渲染 Components 格式: VC + key
+  conKey: 'VCProcess',
+  // 名称
+  title: '多类进度条',
+  // 子分类目录
+  category: ChatCategoryEnum.MORE,
+  // 子分类目录
+  categoryName: ChatCategoryEnumName.MORE,
+  // 包分类
+  package: PackagesCategoryEnum.CHARTS,
+  // 图片
+  image: image
+}

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

@@ -0,0 +1,27 @@
+<template>
+  <n-progress
+    :type="type"
+    :percentage="dataset"
+    :indicator-placement="indicatorPlacement"
+    :color="color"
+  />
+</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'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true,
+  },
+})
+
+// 取配置数据
+const { type, color, indicatorPlacement, dataset } = toRefs(props.chartConfig.option)
+
+useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

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]