opc配置

src/views/opc/Opc copy.vue

@@ -4,27 +4,29 @@
     <div class="icon" style="right:20px">
       <a-button type="primary" icon="appstore" size="large" @click="visibleRight=true" />
     </div>
-    <VueDragResize
-      v-for="item in dotList"
-      :key="item.id"
-      v-show="item.positionFlag"
-      :isActive="item.isActive"
-      :w="item.width"
-      :h="item.height"
-      :minh="20"
-      :x="item.xposition"
-      :y="item.yposition"
-      :isDraggable="item.isActive"
-      :isResizable="item.isActive"
-      :stickSize="5"
-      @dragstop="resize">
-      <a-tooltip>
-        <template slot="title">
-          {{ item.positionNum }}
-        </template>
-        <div class="info"> {{ item.positionNum }}</div>
-      </a-tooltip>
-    </VueDragResize>
+    <div v-if="dotList.length>0">
+      <VueDragResize
+        v-for="item in dotList"
+        :key="item.id"
+        v-show="item.positionFlag"
+        :isActive="item.isActive"
+        :w="item.width"
+        :h="item.height"
+        :minh="20"
+        :x="item.xposition"
+        :y="item.yposition"
+        :isDraggable="item.isActive"
+        :isResizable="item.isActive"
+        :stickSize="5"
+        @dragstop="resize">
+        <a-tooltip>
+          <template slot="title">
+            {{ item.positionNum }}
+          </template>
+          <div class="info" @click="handleInfo(item)"> {{ item.positionNum }}</div>
+        </a-tooltip>
+      </VueDragResize>
+    </div>
     <a-drawer
       title="点位配置"
       placement="right"
@@ -60,6 +62,7 @@
         </span>
       </a-table>
     </a-drawer>
+    <BaseChartInfo ref="baseChartInfo" @ok="handleOk"/>
   </div>
 </template>
 
@@ -67,11 +70,13 @@
 import VueDragResize from 'vue-drag-resize'
 import { getSbPositionTree, fetchSbPosition } from '@/api/sb/position'
 import { queryRemoteOpc, updateRemoteOpc } from '@/api/remote/opc'
-
+import BaseChartInfo from './modules/BaseChartInfo.vue'
 export default {
   name: 'Opc',
   components: {
-    VueDragResize
+    VueDragResize,
+    BaseChartInfo
+
   },
   data () {
     return {
@@ -96,6 +101,7 @@ export default {
     }
   },
   created () {
+    this.positionId = this.$route.query.line
     this.setTree()
     this.getOpcInfo()
   },
@@ -133,6 +139,7 @@ export default {
       })
       queryRemoteOpc({ line: this.positionId })
         .then((res) => {
+          console.log(res.data)
           this.dotList = res.data
           this.dotList.forEach(item => {
             item.isActive = false
@@ -143,8 +150,14 @@ export default {
       getSbPositionTree({ opcFlag: 1 }).then(res => {
         this.treeData = res.data
       })
-    }
+    },
+    handleInfo (remoteOpc) {
+      const model = this.$refs.baseChartInfo
+      model.base(remoteOpc)
+    },
+    handleOk () {
 
+    }
   }
 }
 </script>

src/views/opc/Opc.vue

@@ -23,7 +23,7 @@
           <template slot="title">
             {{ item.positionNum }}
           </template>
-          <div class="info" @click="handleInfo(item)"> {{ item.positionNum }}</div>
+          <div class="info" @click="handleEdit(item)"> {{ item.positionNum }}</div>
         </a-tooltip>
       </VueDragResize>
     </div>
@@ -31,13 +31,13 @@
       title="点位配置"
       placement="right"
       :closable="false"
-      :width="350"
+      :width="400"
       :visible="visibleRight"
       @close="onCloseRight"
     >
       <div>
         <a-tree-select
-          style="width: 60%;margin-right:10px;"
+          style="width: 50%;margin-right:10px;"
           :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
           :treeData="treeData"
           :treeNodeFilterProp="'title'"
@@ -46,7 +46,8 @@
           placeholder="请选择"
         >
         </a-tree-select>
-        <a-button type="primary" @click="getOpcInfo">搜索</a-button>
+        <a-button style="margin-right:10px;" type="primary" @click="getOpcInfo">搜索</a-button>
+        <a-button type="primary" @click="handleAdd">新增</a-button>
       </div>
       <br>
       <a-table
@@ -63,6 +64,8 @@
       </a-table>
     </a-drawer>
     <BaseChartInfo ref="baseChartInfo" @ok="handleOk"/>
+    <BaseForm ref="baseForm" @ok="handleOk"/>
+
   </div>
 </template>
 
@@ -71,11 +74,13 @@ import VueDragResize from 'vue-drag-resize'
 import { getSbPositionTree, fetchSbPosition } from '@/api/sb/position'
 import { queryRemoteOpc, updateRemoteOpc } from '@/api/remote/opc'
 import BaseChartInfo from './modules/BaseChartInfo.vue'
+import BaseForm from '@/views/remote/opc/modules/BaseForm.vue'
 export default {
   name: 'Opc',
   components: {
     VueDragResize,
-    BaseChartInfo
+    BaseChartInfo,
+    BaseForm
 
   },
   data () {
@@ -137,15 +142,12 @@ export default {
         this.imgUrl = res.data.opcImg
         console.log(this.imgUrl)
       })
-      console.log('0:' + new Date())
       queryRemoteOpc({ line: this.positionId })
         .then((res) => {
-          console.log('1:' + new Date())
           this.dotList = res.data
           this.dotList.forEach(item => {
             item.isActive = false
           })
-          console.log('2:' + new Date())
         })
     },
     setTree (record = {}) {
@@ -154,9 +156,20 @@ export default {
       })
     },
     handleInfo (remoteOpc) {
+      if (remoteOpc.isActive) return
       const model = this.$refs.baseChartInfo
       model.base(remoteOpc)
     },
+    handleAdd () {
+      const model = this.$refs.baseForm
+      model.base({
+        line: this.positionId
+      })
+    },
+    handleEdit (val) {
+      const model = this.$refs.baseForm
+      model.base(val)
+    },
     handleOk () {
 
     }

src/views/opc/modules/BaseChartInfo.vue

@@ -167,6 +167,8 @@ export default {
     },
     handleCancel (e) {
       console.log('Clicked cancel button')
+      this.chart1 && this.chart1.destroy()
+      this.queryParam = {}
       this.visible = false
     }
   }

src/views/remote/opc/modules/BaseForm.vue

@@ -7,11 +7,11 @@
     class="ant-modal2"
     @cancel="handleCancel"
   >
-    <a-row :gutter="48" slot="extra">
+    <a-row :gutter="48" slot="footer">
       <a-col :md="48" :sm="48">
         <span class="table-page-search-submitButtons" style="float: right">
+          <a-button style="margin-right: 8px" type="default" @click="handleCancel()">返回</a-button>
           <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
-          <a-button style="margin-left: 8px" type="default" @click="handleCancel()">返回</a-button>
         </span>
       </a-col>
     </a-row>
@@ -58,11 +58,8 @@
             :labelCol="BaseTool.Constant.labelCol"
             :wrapperCol="BaseTool.Constant.wrapperCol"
           >
-            <a-input-number
+            <a-input
               style="width: 100%"
-              :min="0"
-              :formatter="BaseTool.Amount.formatter"
-              :parser="BaseTool.Amount.parser"
               v-decorator="['positionNum', {rules: [{required: true, message: '点位不能为空'}]}]"/>
           </a-form-item>
         </row-item>
@@ -322,13 +319,19 @@ export default {
   methods: {
     base (record) {
       this.visible = true
+      const { form: { setFieldsValue } } = this
+
       // 如果是空标识添加
       if (this.BaseTool.Object.isBlank(record.id)) {
         this.modalTitle = '添加'
+        this.$nextTick(() => {
+          setFieldsValue(Object.assign(pick(record, [
+            'line'
+          ])))
+        })
         return
       }
       this.modalTitle = '编辑'
-      const { form: { setFieldsValue } } = this
       // 日期处理
       this.$nextTick(() => {
         setFieldsValue(Object.assign(pick(record, [