mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
奔跑的面条 2022-06-25 15:51:38 +08:00
parent 3eac0d1592
commit 012eed6f67
3 changed files with 84 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/packages/components/Charts/Mores/Process/config.ts
View File

@ -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)
}

54
src/packages/components/Charts/Mores/Process/config.vue
View File

@ -1,29 +1,49 @@
<template>
<!-- 默认展开 -->
<CollapseItem
name="进度条" :expanded="true">
<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>
<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
size="small"
:modes="['hex']"
v-model:value="optionData.color"
></n-color-picker>
<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 {
CollapseItem,
SettingItemBox,
SettingItem,
} from '@/components/Pages/ChartItemSetting'
import { 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: {

36
src/packages/components/Charts/Mores/Process/index.vue
View File

@ -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>