新增Naive UI 进度条

Merge pull request !11 from alex/chart

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

@@ -0,0 +1,18 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ProcessConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: 0,
+  type: "circle",
+  percentage: 0,
+  color: '#F8B10AFF',
+  indicatorPlacement:"outside"
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = ProcessConfig.key
+  public chartConfig = cloneDeep(ProcessConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,76 @@
+<template>
+  <!-- 默认展开 -->
+  <CollapseItem
+      name="进度条" :expanded="true">
+    <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>
+      </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'
+
+// eslint-disable-next-line no-unused-vars
+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/circle.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,73 @@
+<template>
+  <n-progress :type="type" :percentage="option.percentage"
+              :indicator-placement="indicatorPlacement"
+              :color="color"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, reactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  }
+})
+
+// 取配置数据
+const { type, color, indicatorPlacement } = toRefs(props.chartConfig.option)
+
+// 应用到图表的 option
+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/index.ts

@@ -4,4 +4,4 @@ import Lines from './Lines'
 import Mores from './Mores'
 import Maps from './Maps'
 
-export const ChartList = [...Bars, ...Pies, ...Lines, ...Maps , ...Mores]
+export const ChartList = [...Bars, ...Pies, ...Lines, ...Maps, ...Mores]