完善

src/components/LiquidLevel/index.vue

@@ -18,8 +18,24 @@ export default {
     }
   },
   computed: {
+    color () {
+      switch (true) {
+        case this.value.result > this.value.warnFour:
+          return this.value.warnFourColor
+        case this.value.result > this.value.warnThird:
+          return this.value.warnThirdColor
+        case this.value.result > this.value.warnSecond:
+          return '#21fbff'
+        case this.value.result > this.value.warnFirst:
+          return this.value.warnSecondColor
+        case this.value.result > 0:
+          return this.value.warnFirstColor
+        default:
+          return '#21fbff'
+      }
+    },
     chartOption () {
-      console.log(this.value.value)
+      console.log(this.color)
       return {
         grid: {
           // 控制图的大小，调整下面这些值就可以，
@@ -57,7 +73,7 @@ export default {
             type: 'value',
             // axisLabel: { show: false },
             min: 0,
-            max: this.value.max,
+            max: this.value.high,
             splitNumber: 10,
             show: false,
             splitLine: {
@@ -82,17 +98,17 @@ export default {
             itemStyle: {
               normal: {
                 areaStyle: {
-                  color: '#21fbff'
+                  color: this.color
                 },
                 left: 0
               }
             },
             data: [
               {
-                value: this.value.value
+                value: this.value.result
               },
               {
-                value: this.value.value
+                value: this.value.result
               }
             ],
             symbolSize: 1
@@ -102,7 +118,6 @@ export default {
     }
   },
   created () {
-    console.log(this.chartOption, this.value)
   }
 }
 </script>

src/views/opc/Opc.vue

@@ -85,7 +85,7 @@
             <template slot="title">
               {{ item.description }} <br />
             </template>
-            <LiquidLevel :value="{value:34,max:100,label:item.description}" />
+            <LiquidLevel :value="{result:50,high:100}" />
           </a-tooltip>
         </VueDragResize>
       </div>

src/views/opc/OpcInfo.vue

@@ -89,14 +89,13 @@
           :isDraggable="item.isActive"
           :isResizable="item.isActive"
           :stickSize="5"
-          @dragging="handleOpt(item)"
-          @dragstop="resizeImg">
+        >
           <a-tooltip>
             <template slot="title">
               {{ item.description }} <br />
-              液位： 64
+              液位： {{ item.result }}
             </template>
-            <LiquidLevel :value="{value:64,max:100,label:item.description}" />
+            <LiquidLevel :value="item" />
           </a-tooltip>
         </VueDragResize>
       </div>