Commit db42c0a2517d6f056fdee1685a5b3414f96009de

Authored by xp.Huang
2 parents 0f4fd104 230f3e9f

Merge branch 'fix/DEFECT-1895' into 'main_dev'

fix: 修复自定义Naiveui组件进度条刻度的问题

See merge request yunteng/thingskit-view!181
... ... @@ -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>
... ...