拖拽功能

ui/src/main.js

@@ -41,6 +41,10 @@ import '@/assets/iconfont/iconfont.js'
 // 适配flex
 import { UTable, UTableColumn } from 'umy-ui';
 
+// 函数节流
+import throttle from "@/utils/throttle";
+Vue.prototype.$throttle = throttle;
+
 
 // 全局注册图标
 Vue.component('icon', Icon);

ui/src/utils/throttle.js

@@ -0,0 +1,23 @@
+// 节流函数: 连续不断地触发某事件（如点击），只在单位时间内只触发一次
+// throttle和debounce均是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。
+
+export default function throttle(fun, delay=2000) {
+  let last, deferTimer
+  return function (args) {
+      let that = this;
+      let _args = arguments;
+
+      let now = +new Date();
+
+      if(last && now < last + delay) {
+          clearTimeout(deferTimer);
+          deferTimer = setTimeout(function () {
+              last = now;
+              fun.apply(that, _args);
+          },delay)
+      } else {
+          last = now;
+          fun.apply(that,_args);
+      }
+  }
+}

ui/src/views/monitor/pfd/index.vue

@@ -7,45 +7,56 @@
       <i class="el-icon-zoom-in" @click="resizeImage(1)"></i>
     </div>
 
-    <!-- 点击区域 -->
-    <div class="pfdDivBox" >
-      <!-- 底图 -->
-      <img src="../../../assets/pfdImg/indexImg/index.jpg" alt="Responsive image" :style="imageStyle" class="indexImg" ref="indexImg">
+    <div class="abutton">
+      <div ref="firstDom" v-move class="mode">
+        <!-- 点击区域 -->
+        <div class="pfdDivBox">
+          <!-- 底图 -->
+          <img src="../../../assets/pfdImg/indexImg/index.jpg" alt="Responsive image" :style="imageStyle" class="indexImg" ref="indexImg">
 
-      <!-- 裂解炉 -->
-      <div class="area-LJL" :style="LJLStyle">
+          <!-- 裂解炉 -->
+          <div class="area-LJL" :style="LJLStyle">
 
-      </div>
-      <!-- 急冷区 -->
-      <div class="area-JLQ" :style="JLQStyle">
-      </div>
-      <!-- 中间区域 -->
-      <div class="area-ZJQ" :style="ZJQStyle">
-          <!-- 压缩 -->
-          <div class="area-YS">压缩</div>
-          <!-- 脱丙烷 -->
-          <div class="area-TBP">脱丙烷</div>
-          <!-- 热区 -->
-          <div class="area-RQ">热区-1</div>
-      </div>
-      <!-- 冷区+热区-2 -->
-      <div class="area-LQ_RQ" :style="LQ_RQStyle">
-          <!-- 冷区 -->
-          <div class="area-LQ-1">冷区</div>
-          <!-- 热区-2 -->
-          <div class="area-RQ-2">热区-2</div>
-      </div>
+          </div>
+          <!-- 急冷区 -->
+          <div class="area-JLQ" :style="JLQStyle">
+          </div>
+          <!-- 中间区域 -->
+          <div class="area-ZJQ" :style="ZJQStyle">
+              <!-- 压缩 -->
+              <div class="area-YS">压缩</div>
+              <!-- 脱丙烷 -->
+              <div class="area-TBP">脱丙烷</div>
+              <!-- 热区 -->
+              <div class="area-RQ">热区-1</div>
+          </div>
+          <!-- 冷区+热区-2 -->
+          <div class="area-LQ_RQ" :style="LQ_RQStyle">
+              <!-- 冷区 -->
+              <div class="area-LQ-1">冷区</div>
+              <!-- 热区-2 -->
+              <div class="area-RQ-2">热区-2</div>
+          </div>
 
-   </div>
+        </div>
+      </div>
+    </div>
   </div>
 
 </template>
 
 <script>
+import throttle from "@/utils/throttle";
 export default {
     data() {
         return {
             dialogVisible: false,
+            // 拖拽移动相关
+            dragging: false,
+            mouseX: 0,
+            mouseY: 0,
+            offsetX: 0,
+            offsetY: 0,
             // 缩放比例
             scaleNum: 200,
             // 底图初始化宽度
@@ -82,6 +93,13 @@ export default {
         });
     },
     computed: {
+      styleObject() {
+          return {
+            position: 'absolute',
+            left: this.mouseX + 'px',
+            top: this.mouseY + 'px'
+          };
+      },
       imageStyle() {
         return {
           width: `${this.imageWidth}px`, // 动态设置图片宽度
@@ -114,9 +132,37 @@ export default {
     },
     components: {},
     //在vue自定义指令中添加该指令
-    directives: {},
+    directives: {
+      move(el) {
+        console.log(el)
+        console.dir(el)
+        el.onmousedown = function (e) {
+
+          //获取鼠标点击处分别与div左边和div上边的距离：鼠标位置-div位置
+          let startX = e.clientX - el.offsetLeft,
+            startY = e.clientY - el.offsetTop;
+
+          throttle(
+            (document.onmousemove = function (ev) {
+              let event = ev || window.event;
+              let moveX = event.clientX - startX,
+                moveY = event.clientY - startY;
+              el.style.left = moveX + "px";
+              el.style.top = moveY + "px";
+            }),
+            500
+          );
+
+          // 鼠标弹起时不再移动
+          document.onmouseup = function () {
+            document.onmousemove = null;
+          };
+        };
+      },
+    },
     created() {},
     methods: {
+      // 图片缩放函数
       resizeImage(type){
         if(type === -1){ //缩小
           // 底图宽度
@@ -142,6 +188,21 @@ export default {
           this.areaLQ_RQWidth = +this.areaLQ_RQWidth + +this.areaLQ_RQScaleNum;
         }
       },
+      // 拖拽相关函数
+      startDrag(event) {
+        this.dragging = true;
+        this.mouseX = event.clientX - this.offsetX;
+        this.mouseY = event.clientY - this.offsetY;
+      },
+      endDrag() {
+        this.dragging = false;
+      },
+      doDrag(event) {
+        if (this.dragging) {
+          this.mouseX = event.clientX - this.offsetX;
+          this.mouseY = event.clientY - this.offsetY;
+        }
+      }
     },
 
 };
@@ -161,6 +222,7 @@ body{
     height: 100%;
     position: relative;
     overflow: scroll;
+    cursor: move;
 }
 .indexImg{
   width: 100%;
@@ -221,6 +283,14 @@ body{
   cursor: pointer;
   color: #409eff;
 }
+
+/* 拖拽 */
+.mode{
+  position: fixed;
+  left: "calc(100% - 1300px)";
+  bottom: "calc(100% - 500px)";
+  z-index: 99;
+}
 </style>