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