完善opc

src/components/ChartView/index.vue

@@ -64,7 +64,7 @@ export default {
       required: true
     }
   },
-  data() {
+  data () {
     return {
       chart: null
     }
@@ -72,18 +72,30 @@ export default {
   watch: {
     chartOption: {
       deep: true,
-      handler(newVal) {
+      handler (newVal) {
         this.setOptions(newVal)
       }
+    },
+    width: {
+      deep: true,
+      handler (newVal) {
+        this.resizeHandler()
+      }
+    },
+    height: {
+      deep: true,
+      handler (newVal) {
+        this.resizeHandler()
+      }
     }
   },
-  mounted() {
+  mounted () {
     this.initChart()
     if (this.autoResize) {
       window.addEventListener('resize', this.resizeHandler)
     }
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (!this.chart) {
       return
     }
@@ -94,26 +106,28 @@ export default {
     this.chart = null
   },
   methods: {
-    resizeHandler() {
-      this.chart.resize()
+    resizeHandler () {
+      setTimeout(() => {
+        this.chart.resize()
+      })
     },
-    initChart() {
+    initChart () {
       this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption(this.chartOption, true)
       this.chart.on('click', this.handleClick)
       window.removeEventListener('resize', this.resizeHandler)
     },
-    handleClick(params) {
+    handleClick (params) {
       this.$emit('click', params)
     },
-    setOptions(option) {
+    setOptions (option) {
       this.clearChart()
       this.resizeHandler()
       if (this.chart) {
         this.chart.setOption(option, true)
       }
     },
-    clearChart() {
+    clearChart () {
       this.chart && this.chart.clear()
     }
   }

src/components/LiquidLevel/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <chart-view :chartOption="chartOption" width="40px" height="170px"></chart-view>
+    <chart-view :chartOption="chartOption" :width="width+'px'" :height="height+'px'"></chart-view>
   </div>
 </template>
 
@@ -15,6 +15,14 @@ export default {
     value: {
       type: Object,
       required: true
+    },
+    width: {
+      type: Number,
+      required: true
+    },
+    height: {
+      type: Number,
+      required: true
     }
   },
   computed: {

src/views/opc/Opc.vue

@@ -94,21 +94,24 @@
         <VueDragResize
           v-if="item.type===5"
           :isActive="item.isActive"
-          :w="40"
-          :h="170"
+          :w="item.imgWidth"
+          :h="item.imgHeight"
           :minh="20"
+          :minw="20"
           :x="item.imgXPosition"
           :y="item.imgYPosition"
           :isDraggable="item.isActive"
           :isResizable="item.isActive"
           :stickSize="5"
+          @resizestop="resizeImg"
+          @resizing="handleOpt(item)"
           @dragging="handleOpt(item)"
           @dragstop="resizeImg">
           <a-tooltip>
             <template slot="title">
               {{ item.description }} <br />
             </template>
-            <LiquidLevel :value="{result:50,high:100}" />
+            <LiquidLevel :value="{result:50,high:100}" :width="item.imgWidth" :height="item.imgHeight" />
           </a-tooltip>
         </VueDragResize>
       </div>
@@ -217,7 +220,6 @@ export default {
         xposition: newRect.left,
         yposition: newRect.top
       }
-      console.log('1222222..........................')
       if (params.id != null) {
         updateRemoteOpc(params).then(res => {
           console.log(res)
@@ -229,12 +231,17 @@ export default {
       console.log(newRect)
       const params = {
         ...this.optDot,
+        imgHeight: newRect.height,
+        imgWidth: newRect.width,
         imgXPosition: newRect.left,
         imgYPosition: newRect.top
       }
+      console.log(params)
       if (params.id != null) {
         updateRemoteOpc(params).then(res => {
           console.log(res)
+          this.optDot.imgHeight = newRect.height
+          this.optDot.imgWidth = newRect.width
           this.optDot = null
         })
       }