完善

src/components/LiquidLevel/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <chart-view :chartOption="chartOption" width="30px" height="120px"></chart-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LiquidLevel',
+  data () {
+    return {
+    }
+  },
+  props: {
+    value: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    chartOption () {
+      console.log(this.value.value)
+      return {
+        grid: {
+          // 控制图的大小，调整下面这些值就可以，
+          x: 1,
+          y: 4,
+          x2: 60,
+          y2: 1, // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
+          // backgroundColor: '#cdcdcd',
+          show: true,
+          left: '90%',
+          right: '90%',
+          top: '8%',
+          bottom: '10%',
+          borderWidth: 2, // 图标外边框大小
+          borderColor: '#011737' // 图标边框颜色
+        },
+        tooltip: {
+          trigger: 'item',
+          show: true,
+          formatter: '{a}/{b}'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLabel: {
+              show: false
+            },
+            boundaryGap: false,
+            data: ['液位', '液位']
+          }
+        ],
+        yAxis: [
+          {
+            // name:"aaa",
+            type: 'value',
+            // axisLabel: { show: false },
+            min: 0,
+            max: this.value.max,
+            splitNumber: 10,
+            show: false,
+            splitLine: {
+              // 坐标轴内分割线
+              show: true,
+              lineStyle: {
+                color: '#031738'
+              }
+            }, // 坐标轴内背景
+            splitArea: {
+              show: true,
+              areaStyle: {
+                color: ['rgba(2, 23, 56,0.3)', 'rgba(2, 23, 56,0.3)'] // 分隔背景用两种颜色显示
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            type: 'line',
+            // 显示标签数据
+            itemStyle: {
+              normal: {
+                areaStyle: {
+                  color: '#21fbff'
+                },
+                left: 0
+              }
+            },
+            data: [
+              {
+                value: this.value.value.replace('CM', '')
+              },
+              {
+                value: this.value.value.replace('CM', '')
+              }
+            ],
+            symbolSize: 1
+          }
+        ]
+      }
+    }
+  },
+  created () {
+    console.log(this.chartOption, this.value)
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/opc/Opc.vue

@@ -68,6 +68,27 @@
             <img src="@/assets/green.png" alt="" width="35px" height="35px">
           </a-tooltip>
         </VueDragResize>
+        <VueDragResize
+          v-if="item.type===5"
+          :isActive="item.isActive"
+          :w="30"
+          :h="120"
+          :minh="20"
+          :x="item.imgXPosition"
+          :y="item.imgYPosition"
+          :isDraggable="item.isActive"
+          :isResizable="item.isActive"
+          :stickSize="5"
+          @dragging="handleOpt(item)"
+          @dragstop="resizeImg">
+          <a-tooltip>
+            <template slot="title">
+              {{ item.description }} <br />
+              液位： 34
+            </template>
+            <LiquidLevel :value="{value:'34',max:100,label:item.description}" />
+          </a-tooltip>
+        </VueDragResize>
       </div>
     </div>
     <!--    <a-drawer
@@ -119,6 +140,7 @@
 
 <script>
 import VueDragResize from 'vue-drag-resize'
+import LiquidLevel from '@/components/LiquidLevel'
 import { getSbPositionTree, fetchSbPosition, querySbPosition } from '@/api/sb/position'
 import { queryRemoteOpc, updateRemoteOpc } from '@/api/remote/opc'
 import BaseChartInfo from './modules/BaseChartInfo.vue'
@@ -128,6 +150,7 @@ export default {
   components: {
     VueDragResize,
     BaseChartInfo,
+    LiquidLevel,
     BaseForm
   },
   data () {