Commit dbc182f8401b40be31af0a1edc00ddea047263c9

Authored by fengwotao
1 parent 89225bce

feat(src/packages): 图表更多自定义native-ui新增取值范围

@@ -50,7 +50,11 @@ export const option = { @@ -50,7 +50,11 @@ export const option = {
50 // 指标颜色 50 // 指标颜色
51 indicatorTextColor: '#FFFFFFFF', 51 indicatorTextColor: '#FFFFFFFF',
52 // 偏移角度 52 // 偏移角度
53 - offsetDegree: 0 53 + offsetDegree: 0,
  54 + value:{
  55 + min:0,
  56 + max:1000
  57 + }
54 } 58 }
55 59
56 export default class Config extends PublicConfigClass implements CreateComponentType { 60 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -10,7 +10,14 @@ @@ -10,7 +10,14 @@
10 <n-input v-model:value="optionData.unit" size="small"></n-input> 10 <n-input v-model:value="optionData.unit" size="small"></n-input>
11 </setting-item> 11 </setting-item>
12 </SettingItemBox> 12 </SettingItemBox>
13 - 13 + <SettingItemBox name="范围">
  14 + <SettingItem name="最小值">
  15 + <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number>
  16 + </SettingItem>
  17 + <setting-item name="最大值">
  18 + <n-input-number v-model:value="optionData.value.max" size="small"></n-input-number>
  19 + </setting-item>
  20 + </SettingItemBox>
14 <SettingItemBox name="轨道"> 21 <SettingItemBox name="轨道">
15 <SettingItem name="形状"> 22 <SettingItem name="形状">
16 <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" /> 23 <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" />
@@ -41,7 +48,7 @@ @@ -41,7 +48,7 @@
41 <SettingItem name="文本颜色"> 48 <SettingItem name="文本颜色">
42 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker> 49 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker>
43 </SettingItem> 50 </SettingItem>
44 - <setting-item name="文本大小"> 51 + <setting-item name="文本大小">
45 <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number> 52 <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number>
46 </setting-item> 53 </setting-item>
47 </SettingItemBox> 54 </SettingItemBox>
@@ -49,17 +56,26 @@ @@ -49,17 +56,26 @@
49 </template> 56 </template>
50 57
51 <script setup lang="ts"> 58 <script setup lang="ts">
52 -import { PropType } from 'vue' 59 +import { PropType, watch, ref } from 'vue'
53 // 以下是封装的设置模块布局组件,具体效果可在官网查看 60 // 以下是封装的设置模块布局组件,具体效果可在官网查看
54 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' 61 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
55 62
56 // 获取 option 的数据,便于使用 typeof 获取类型 63 // 获取 option 的数据,便于使用 typeof 获取类型
57 import { option, types, indicatorPlacements } from './config' 64 import { option, types, indicatorPlacements } from './config'
58 65
59 -defineProps({ 66 +const props = defineProps({
60 optionData: { 67 optionData: {
61 type: Object as PropType<typeof option>, 68 type: Object as PropType<typeof option>,
62 required: true 69 required: true
63 } 70 }
64 }) 71 })
  72 +
  73 +watch(
  74 + () => props.optionData.dataset,
  75 + (newData: number) => {
  76 + if (newData < props.optionData.value.min || newData > props.optionData.value.max) {
  77 + window['$message'].error('取值范围在最小值和最大值之间')
  78 + }
  79 + }
  80 +)
65 </script> 81 </script>