|
|
@@ -1,57 +1,74 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
- <img src="@/assets/bgView/opcbg.png" width="1920px" alt="">
|
|
|
- <div class="icon" style="left:20px">
|
|
|
- <a-button type="primary" icon="appstore" size="large" @click="visibleLeft=true"/>
|
|
|
- </div>
|
|
|
+ <img :src="imgUrl" width="1920px" alt="">
|
|
|
<div class="icon" style="right:20px">
|
|
|
- <a-button type="primary" icon="setting" size="large" @click="visibleRight=true" />
|
|
|
+ <a-button type="primary" icon="appstore" size="large" @click="visibleRight=true" />
|
|
|
+ </div>
|
|
|
+ <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"> {{ item.positionNum }}</div>
|
|
|
+ </a-tooltip>
|
|
|
+ </VueDragResize>
|
|
|
</div>
|
|
|
- <VueDragResize
|
|
|
- :isActive="isActive"
|
|
|
- :w="60"
|
|
|
- :h="20"
|
|
|
- :minh="20"
|
|
|
- :x="50"
|
|
|
- :y="100"
|
|
|
- :isDraggable="true"
|
|
|
- :isResizable="true"
|
|
|
- :stickSize="5"
|
|
|
- @dragstop="resize">
|
|
|
- <a-tooltip>
|
|
|
- <template slot="title">
|
|
|
- BJ202207151
|
|
|
- </template>
|
|
|
- <div class="info">BJ202207151</div>
|
|
|
- </a-tooltip>
|
|
|
- </VueDragResize>
|
|
|
- <a-drawer
|
|
|
- title="选择车间"
|
|
|
- placement="left"
|
|
|
- :closable="false"
|
|
|
- :visible="visibleLeft"
|
|
|
- @close="onCloseLeft"
|
|
|
- >
|
|
|
- <p>Some contents...</p>
|
|
|
- <p>Some contents...</p>
|
|
|
- <p>Some contents...</p>
|
|
|
- </a-drawer>
|
|
|
<a-drawer
|
|
|
title="点位配置"
|
|
|
placement="right"
|
|
|
:closable="false"
|
|
|
+ :width="350"
|
|
|
:visible="visibleRight"
|
|
|
@close="onCloseRight"
|
|
|
>
|
|
|
- <p>Some contents...</p>
|
|
|
- <p>Some contents...</p>
|
|
|
- <p>Some contents...</p>
|
|
|
+ <div>
|
|
|
+ <a-tree-select
|
|
|
+ style="width: 60%;margin-right:10px;"
|
|
|
+ :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
|
|
+ :treeData="treeData"
|
|
|
+ :treeNodeFilterProp="'title'"
|
|
|
+ :showSearch="true"
|
|
|
+ v-model="positionId"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ </a-tree-select>
|
|
|
+ <a-button type="primary" @click="getOpcInfo">搜索</a-button>
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="dotList"
|
|
|
+ :pagination="{ pageSize: 100 }"
|
|
|
+ :scroll="{ y: 650 }"
|
|
|
+ >
|
|
|
+ <span slot="action" slot-scope="text, record,index">
|
|
|
+ <a @click="disposition(record,index)">配置</a>
|
|
|
+ <a-button style="color:#ccc" v-show="record.positionFlag" type="link" icon="eye-invisible" @click="handleShow(index,0)" />
|
|
|
+ <a-button v-show="!record.positionFlag" type="link" icon="eye" @click="handleShow(index,1)" />
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
</a-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import VueDragResize from 'vue-drag-resize'
|
|
|
+import { getSbPositionTree, fetchSbPosition } from '@/api/sb/position'
|
|
|
+import { queryRemoteOpc, updateRemoteOpc } from '@/api/remote/opc'
|
|
|
|
|
|
export default {
|
|
|
name: 'Opc',
|
|
|
@@ -60,22 +77,74 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- visibleLeft: false,
|
|
|
visibleRight: false,
|
|
|
- isActive: true
|
|
|
+ positionId: '',
|
|
|
+ treeData: [],
|
|
|
+ optDot: null,
|
|
|
+ imgUrl: '',
|
|
|
+ dotList: [],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '位号',
|
|
|
+ dataIndex: 'positionNum',
|
|
|
+ key: 'positionNum'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' }
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ created () {
|
|
|
+ this.setTree()
|
|
|
+ },
|
|
|
methods: {
|
|
|
resize (newRect) {
|
|
|
- this.isActive = false
|
|
|
console.log(newRect)
|
|
|
- },
|
|
|
- onCloseLeft () {
|
|
|
- this.visibleLeft = false
|
|
|
+ const params = {
|
|
|
+ ...this.dotList[this.optDot],
|
|
|
+ height: newRect.height,
|
|
|
+ width: newRect.width,
|
|
|
+ xposition: newRect.left,
|
|
|
+ yposition: newRect.top
|
|
|
+ }
|
|
|
+ updateRemoteOpc(params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.dotList[this.optDot].isActive = false
|
|
|
+ })
|
|
|
},
|
|
|
onCloseRight () {
|
|
|
this.visibleRight = false
|
|
|
+ },
|
|
|
+ disposition (val, i) {
|
|
|
+ val.isActive = true
|
|
|
+ val.positionFlag = 1
|
|
|
+ this.optDot = i
|
|
|
+ this.visibleRight = false
|
|
|
+ },
|
|
|
+ handleShow (val, key) {
|
|
|
+ this.dotList[val].positionFlag = key
|
|
|
+ },
|
|
|
+ getOpcInfo () {
|
|
|
+ fetchSbPosition({ id: this.positionId }).then(res => {
|
|
|
+ this.imgUrl = res.data.opcImg
|
|
|
+ console.log(this.imgUrl)
|
|
|
+ })
|
|
|
+ queryRemoteOpc({ line: this.positionId })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res.data)
|
|
|
+ this.dotList = res.data
|
|
|
+ this.dotList.forEach(item => {
|
|
|
+ item.isActive = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setTree (record = {}) {
|
|
|
+ getSbPositionTree({ opcFlag: 1 }).then(res => {
|
|
|
+ this.treeData = res.data
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
}
|
|
|
@@ -88,7 +157,7 @@ export default {
|
|
|
}
|
|
|
.info{
|
|
|
font-size: 12px;
|
|
|
- transform: scale(0.5);
|
|
|
+ // transform: scale(0.5);
|
|
|
}
|
|
|
.icon{
|
|
|
font-size: 30px;
|
