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

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

See merge request yunteng/thingskit-view!181

@@ -15,7 +15,7 @@
         <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number>
         <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number>
       </SettingItem>
       </SettingItem>
       <setting-item name="最大值">
       <setting-item name="最大值">
-        <n-input-number v-model:value="optionData.value.max" size="small"></n-input-number>
+        <n-input-number v-model:value="optionData.value.max" size="small" :min="100"></n-input-number>
       </setting-item>
       </setting-item>
     </SettingItemBox>
     </SettingItemBox>
     <SettingItemBox name="轨道">
     <SettingItemBox name="轨道">

@@ -3,7 +3,7 @@
     :type="type"
     :type="type"
     :height="h"
     :height="h"
     :processing="processing"
     :processing="processing"
-    :percentage="dataset"
+    :percentage="percentage"
     :indicator-placement="indicatorPlacement"
     :indicator-placement="indicatorPlacement"
     :color="color"
     :color="color"
     :rail-color="railColor"
     :rail-color="railColor"
@@ -21,11 +21,12 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs, watch } from 'vue'
+import { PropType, computed, ref, toRefs, watch } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import config from './config'
 import config from './config'
 import { toNumber } from '@/utils'
 import { toNumber } from '@/utils'
+import { unref } from 'vue'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -46,25 +47,38 @@ const {
   indicatorPlacement,
   indicatorPlacement,
   indicatorTextSize,
   indicatorTextSize,
   offsetDegree,
   offsetDegree,
-  dataset
+  dataset,
 } = toRefs(props.chartConfig.option)
 } = toRefs(props.chartConfig.option)
 
 
+const max = computed(()=>{//获取最新的最大值
+  const {value:{max}} = props.chartConfig.option
+  return max
+})
+const percentage = ref<number>(unref(dataset) * (100/max.value))//计算当设置的最大值大于100的时候
 // 手动更新
 // 手动更新
 watch(
 watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
+  () => {props.chartConfig.option.dataset,props.chartConfig.option.value.max},
+  () => {
     try {
     try {
-      dataset.value = toNumber(newData, 2)
+      if(max.value!==100){
+        const newValue = unref(dataset) * (100/max.value)//计算进度条的位置
+        percentage.value = toNumber(newValue,2)
+      dataset.value = toNumber((unref(dataset)), 2)
+        return
+      }
+      percentage.value = toNumber(unref(dataset), 2)
+      dataset.value = toNumber((unref(dataset)), 2)
     } catch (error) {
     } catch (error) {
       console.log(error)
       console.log(error)
     }
     }
   },
   },
   {
   {
-    deep: false
+    deep: true
   }
   }
 )
 )
 // 预览更新
 // 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  percentage.value = toNumber(newData*(100/max.value), 2)
   dataset.value = toNumber(newData, 2)
   dataset.value = toNumber(newData, 2)
 })
 })
 </script>
 </script>