Commit db42c0a2517d6f056fdee1685a5b3414f96009de
Merge branch 'fix/DEFECT-1895' into 'main_dev'
fix: 修复自定义Naiveui组件进度条刻度的问题 See merge request yunteng/thingskit-view!181
Showing
2 changed files
with
22 additions
and
8 deletions
... | ... | @@ -15,7 +15,7 @@ |
15 | 15 | <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number> |
16 | 16 | </SettingItem> |
17 | 17 | <setting-item name="最大值"> |
18 | - <n-input-number v-model:value="optionData.value.max" size="small"></n-input-number> | |
18 | + <n-input-number v-model:value="optionData.value.max" size="small" :min="100"></n-input-number> | |
19 | 19 | </setting-item> |
20 | 20 | </SettingItemBox> |
21 | 21 | <SettingItemBox name="轨道"> | ... | ... |
... | ... | @@ -3,7 +3,7 @@ |
3 | 3 | :type="type" |
4 | 4 | :height="h" |
5 | 5 | :processing="processing" |
6 | - :percentage="dataset" | |
6 | + :percentage="percentage" | |
7 | 7 | :indicator-placement="indicatorPlacement" |
8 | 8 | :color="color" |
9 | 9 | :rail-color="railColor" |
... | ... | @@ -21,11 +21,12 @@ |
21 | 21 | </template> |
22 | 22 | |
23 | 23 | <script setup lang="ts"> |
24 | -import { PropType, toRefs, watch } from 'vue' | |
24 | +import { PropType, computed, ref, toRefs, watch } from 'vue' | |
25 | 25 | import { useChartDataFetch } from '@/hooks' |
26 | 26 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
27 | 27 | import config from './config' |
28 | 28 | import { toNumber } from '@/utils' |
29 | +import { unref } from 'vue' | |
29 | 30 | |
30 | 31 | const props = defineProps({ |
31 | 32 | chartConfig: { |
... | ... | @@ -46,25 +47,38 @@ const { |
46 | 47 | indicatorPlacement, |
47 | 48 | indicatorTextSize, |
48 | 49 | offsetDegree, |
49 | - dataset | |
50 | + dataset, | |
50 | 51 | } = toRefs(props.chartConfig.option) |
51 | 52 | |
53 | +const max = computed(()=>{//获取最新的最大值 | |
54 | + const {value:{max}} = props.chartConfig.option | |
55 | + return max | |
56 | +}) | |
57 | +const percentage = ref<number>(unref(dataset) * (100/max.value))//计算当设置的最大值大于100的时候 | |
52 | 58 | // 手动更新 |
53 | 59 | watch( |
54 | - () => props.chartConfig.option.dataset, | |
55 | - (newData: any) => { | |
60 | + () => {props.chartConfig.option.dataset,props.chartConfig.option.value.max}, | |
61 | + () => { | |
56 | 62 | try { |
57 | - dataset.value = toNumber(newData, 2) | |
63 | + if(max.value!==100){ | |
64 | + const newValue = unref(dataset) * (100/max.value)//计算进度条的位置 | |
65 | + percentage.value = toNumber(newValue,2) | |
66 | + dataset.value = toNumber((unref(dataset)), 2) | |
67 | + return | |
68 | + } | |
69 | + percentage.value = toNumber(unref(dataset), 2) | |
70 | + dataset.value = toNumber((unref(dataset)), 2) | |
58 | 71 | } catch (error) { |
59 | 72 | console.log(error) |
60 | 73 | } |
61 | 74 | }, |
62 | 75 | { |
63 | - deep: false | |
76 | + deep: true | |
64 | 77 | } |
65 | 78 | ) |
66 | 79 | // 预览更新 |
67 | 80 | useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => { |
81 | + percentage.value = toNumber(newData*(100/max.value), 2) | |
68 | 82 | dataset.value = toNumber(newData, 2) |
69 | 83 | }) |
70 | 84 | </script> | ... | ... |