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