guarantee-lsq 2 vuotta sitten
vanhempi
commit
839ae2d4bd

+ 167 - 0
src/views/opc/Opc copy.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="main">
+    <img :src="imgUrl" width="1920px" alt="">
+    <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>
+    <a-drawer
+      title="点位配置"
+      placement="right"
+      :closable="false"
+      :width="350"
+      :visible="visibleRight"
+      @close="onCloseRight"
+    >
+      <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',
+  components: {
+    VueDragResize
+  },
+  data () {
+    return {
+      visibleRight: false,
+      positionId: '',
+      treeData: [],
+      optDot: null,
+      imgUrl: '',
+      dotList: [],
+      columns: [
+        {
+          title: '位号',
+          dataIndex: 'positionNum',
+          key: 'positionNum'
+        },
+        {
+          title: '操作',
+          key: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
+    }
+  },
+  created () {
+    this.setTree()
+    this.getOpcInfo()
+  },
+  methods: {
+    resize (newRect) {
+      console.log(newRect)
+      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) => {
+          this.dotList = res.data
+          this.dotList.forEach(item => {
+            item.isActive = false
+          })
+        })
+    },
+    setTree (record = {}) {
+      getSbPositionTree({ opcFlag: 1 }).then(res => {
+        this.treeData = res.data
+      })
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.main{
+  position: relative;
+}
+.info{
+  font-size: 12px;
+  // transform: scale(0.5);
+}
+.icon{
+  font-size: 30px;
+  color: #fff;
+  position: absolute;
+  top:20px;
+
+}
+</style>

+ 114 - 45
src/views/opc/Opc.vue

@@ -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;

+ 0 - 1
src/views/repair/application-form/modules/DetailRepair.vue

@@ -290,7 +290,6 @@
         <a-button style="margin-left: 8px" type="primary" >再次发起审核</a-button>
         <a-button style="margin-left: 8px" type="primary" >维修挂起</a-button>
         <a-button style="margin-left: 8px" type="primary" >转大修</a-button>
-
       </div>
     </div>
     <check-form ref="checkForm" @ok="handleOk" />