fix: 修复温度计无法动态更新刻度

ww
1 parent 68d9de5f
Showing 2 changed files with 49 additions and 12 deletions
src/views/visual/packages/components/Flowmeter/Thermometer/config.ts
src/views/visual/packages/components/Flowmeter/Thermometer/index.vue
--- a/src/views/visual/packages/components/Flowmeter/Thermometer/config.ts
View file @7bc12e5
+++ b/src/views/visual/packages/components/Flowmeter/Thermometer/config.ts
View file @7bc12e5
@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.FONT_SIZE]: 14,
   [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 120,
 };
 export default class Config extends PublicConfigClass implements CreateComponentType {
--- a/src/views/visual/packages/components/Flowmeter/Thermometer/index.vue
View file @7bc12e5
+++ b/src/views/visual/packages/components/Flowmeter/Thermometer/index.vue
View file @7bc12e5
@@ -18,16 +18,38 @@
   const time = ref<Nullable<number>>(null);
+  const POSITIVE_NUMBER = 6;
+
+  const ALL_PART = 7;
+
+  const DEFAULT_PART_VALUE = 20;
+
+  const partValue = computed(() => {
+    const { config } = props;
+    const { option } = config;
+    const { componentInfo } = option;
+    const { maxNumber = 120 } = componentInfo || {};
+    let value = maxNumber / POSITIVE_NUMBER;
+    return value % 10 > 0 ? Math.floor(value / 10) * 10 + 10 : value + 10;
+  });
+
+  const maxValueScale = computed(() => unref(partValue) / DEFAULT_PART_VALUE);
+
   const getValue = computed(() => {
     const maxHeight = 190;
     const minHeight = 15;
+
     const height = maxHeight - minHeight;
-    const rangeNumber = 7;
-    const itemRange = 20;
-    const itemHeight = height / (rangeNumber * itemRange);
+
+    const itemHeight = height / (ALL_PART * (DEFAULT_PART_VALUE * unref(maxValueScale)));
+
     const value = unref(currentValue);
-    const transformValue =
-      maxHeight - (value >= 0 ? value + 20 : itemRange - Math.abs(value)) * itemHeight;
+    let transformValue =
+      maxHeight -
+      (value >= 0
+        ? value + unref(DEFAULT_PART_VALUE * unref(maxValueScale))
+        : DEFAULT_PART_VALUE * unref(maxValueScale) - Math.abs(value)) *
+        itemHeight;
     return transformValue >= maxHeight
       ? maxHeight
@@ -184,7 +206,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">-20</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * -1 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,165)">
@@ -204,7 +228,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">20</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,115)">
@@ -214,7 +240,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">40</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 2 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,90)">
@@ -224,7 +252,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">60</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 3 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,65)">
@@ -234,7 +264,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">80</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 4 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,40)">
@@ -244,7 +276,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">100</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 5 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,15)">
@@ -254,7 +288,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">120</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 6 }}
+            </div>
           </foreignObject>
         </g>
       </g>