完善

package-lock.json

@@ -16982,6 +16982,14 @@
       "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.4.9.tgz",
       "integrity": "sha512-Uf1i/sCh+ZqSM9hb2YTGRENzJFH+mvDuv8N2brGLjK7UBuF7XDP7zbis8g/dcqZiMojAcBDtObFCn4ERFbRMxQ=="
     },
+    "vue-drag-resize": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmmirror.com/vue-drag-resize/-/vue-drag-resize-1.5.4.tgz",
+      "integrity": "sha512-SR3U7n6TAZEBgP7zw7bR9mjtAlYBjqIoaWTDPz5HXN/nYhOxKSA31aD7p71fmq1jtyt9reAnCx62valNL9ZAcg==",
+      "requires": {
+        "vue-drag-resize": "^1.5.0-rc3"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -17192,6 +17200,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-ueditor-wrap": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmmirror.com/vue-ueditor-wrap/-/vue-ueditor-wrap-2.5.6.tgz",
+      "integrity": "sha512-EJkYLyyzgOJTxGreiZ9wrmXthIMVVRSeFTzV6n0OR9w4aeqW79Prvog4jZ4G0kkmW3TTTBbZtHM9VNHEl6LJDA=="
+    },
     "vuex": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "vue-clipboard2": "^0.2.1",
     "vue-cookie": "^1.1.4",
     "vue-cropper": "0.4.9",
+    "vue-drag-resize": "^1.5.4",
     "vue-ls": "^3.2.1",
     "vue-print-nb": "^1.5.0",
     "vue-quill-editor": "^3.0.6",

src/router/generator-platform-routers.js

@@ -443,6 +443,10 @@ export const constantRouterMap = [
     path: '/tree',
     component: () => import('@/views/sb/info/modules/SbTreeModal.vue')
   },
+  {
+    path: '/opc',
+    component: () => import('@/views/opc/Opc.vue')
+  },
   {
     path: '/toWorkplaceBacklog',
     component: () => import('@/views/statisticView/22')

src/views/opc/Opc.vue

@@ -0,0 +1,100 @@
+<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>
+    <div class="icon" style="right:20px">
+      <a-button type="primary" icon="setting" size="large" @click="visibleRight=true" />
+    </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"
+      :visible="visibleRight"
+      @close="onCloseRight"
+    >
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import VueDragResize from 'vue-drag-resize'
+
+export default {
+  name: 'Opc',
+  components: {
+    VueDragResize
+  },
+  data () {
+    return {
+      visibleLeft: false,
+      visibleRight: false,
+      isActive: true
+    }
+  },
+
+  methods: {
+    resize (newRect) {
+      this.isActive = false
+      console.log(newRect)
+    },
+    onCloseLeft () {
+      this.visibleLeft = false
+    },
+    onCloseRight () {
+      this.visibleRight = false
+    }
+
+  }
+}
+</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>