矩形触发点功能开发

ui/src/router/index.js

@@ -748,6 +748,12 @@ export const constantRoutes = [
         component: (resolve) => require(['@/views/monitor/pfd/index.vue'], resolve),
         name: 'pfd',
         meta: { title: 'pfd流程' }
+      },
+      {
+        path: '/pfd/jlq',
+        component: (resolve) => require(['@/views/monitor/pfd/JLQPage.vue'], resolve),
+        name: 'jlq',
+        meta: { title: '急冷区' }
       }
     ]
   },

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="scorll">
+    <!-- 缩放按钮 -->
+    <div class="resizeBox">
+      <p >当前宽度:{{ imageWidth }}px</p>
+      <i class="el-icon-zoom-out" @click="resizeImage(-1)"></i>
+      <i class="el-icon-zoom-in" @click="resizeImage(1)"></i>
+    </div>
+    <!-- 拖拽移动 -->
+    <div class="abutton">
+      <div ref="firstDom" v-move class="mode">
+        <!-- 点击区域 -->
+        <div class="pfdDivBox">
+          <!-- 底图 -->
+          <img src="../../../assets/pfdImg/indexImg/JLQ.jpg" alt="Responsive image" :style="imageStyle" class="indexImg" ref="indexImg">
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+let dragging = false;
+import throttle from "@/utils/throttle";
+export default {
+    data() {
+        return {
+            // 缩放比例
+            scaleNum: 200,
+            // 底图初始化宽度
+            imageWidth:1200,
+
+        };
+    },
+    mounted () {
+
+    },
+    computed: {
+      imageStyle() {
+        return {
+          width: `${this.imageWidth}px`, // 动态设置图片宽度
+        };
+      },
+
+    },
+    components: {},
+    //在vue自定义指令中添加该指令
+    directives: {
+      move(el) {
+        // 根据不同参数默认展示不同区域
+        const url = window.location.href;
+          let params = {};
+          const reg = /[?&]+([^=&]+)=([^&]*)/gi;
+          let match;
+
+          while ((match = reg.exec(url)) !== null) {
+            const key = match[1];
+            const value = decodeURIComponent(match[2]);
+            params[key] = value;
+          }
+          if(params.id === 'PAN'){
+            el.style.left =  "0px";
+            el.style.top =  "-538px";
+          }else{
+            el.style.left =  "0px";
+            el.style.top =  "0px";
+          }
+
+        el.onmousedown = function (e) {
+          // 阻止点击事件冒泡
+          e.preventDefault();
+          //获取鼠标点击处分别与div左边和div上边的距离：鼠标位置-div位置
+          let startX = e.clientX - el.offsetLeft,
+            startY = e.clientY - el.offsetTop;
+          throttle(
+            (document.onmousemove = function (ev) {
+              dragging = false;
+              // 阻止点击事件冒泡
+              ev.preventDefault();
+              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 () {
+            dragging = true;
+            document.onmousemove = null;
+          };
+        };
+      },
+    },
+    created() {
+      this.$nextTick(() => {
+        // 初始化
+        console.log(this.$route.query.id)
+      });
+    },
+    methods: {
+      // 图片缩放函数
+      resizeImage(type){
+
+        if(type === -1){ //缩小
+          // 底图宽度
+          this.imageWidth -= this.scaleNum;
+
+        }else if(type === 1){ //放大
+           // 底图宽度
+          this.imageWidth += this.scaleNum;
+
+        }
+      },
+
+    },
+
+};
+</script>
+
+<style>
+body{
+    background-image: linear-gradient(to bottom, #ffffff, #d8deea) !important;
+
+}
+.scorll{
+    width: 100%;
+    height: 100%;
+}
+.pfdDivBox {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: scroll;
+    cursor: move;
+    margin-top: -77px;
+
+}
+.indexImg{
+  width: 100%;
+  height: 100%;
+}
+
+/* 放大缩小按钮 */
+.resizeBox{
+  position: fixed;
+  bottom: 4%;
+  right: 3%;
+  z-index: 999;
+  font-size: 35px;
+}
+.resizeBox p{
+  margin: 0;
+  font-size: 12px;
+  color: #409eff;
+  opacity: 0.4;
+}
+
+.resizeBox .el-icon-zoom-out,
+.resizeBox .el-icon-zoom-in{
+  cursor: pointer;
+  color: #409eff;
+}
+
+/* 拖拽 */
+.mode{
+  position: absolute;
+  left: "calc(100% - 1300px)";
+  bottom: "calc(100% - 500px)";
+  z-index: 99;
+}
+
+
+</style>
+
+
+

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

@@ -52,6 +52,9 @@
             <div class="rhombus JLQ-rhombus JLQ-rhombus-27" @click="handleDialogVisible('2521')" ref-data="2521">2521</div>
             <div class="rhombus JLQ-rhombus JLQ-rhombus-28" @click="handleDialogVisible('2520')" ref-data="2520">2520</div>
 
+            <!-- 长方形触发点，跳转页面 -->
+            <div class="JLQ-rectangle-1" @click="handleToPage('PAN')" ref-data="PAN OIL COOLING">PAN OIL COOLING</div>
+            <div class="JLQ-rectangle-2" @click="handleToPage('PRIMARY')" ref-data="PRIMARY QUENCH WATER COOLING">PRIMARY QUENCH WATER COOLING</div>
           </div>
           <!-- 中间区域 -->
           <div class="area-ZJQ" :style="ZJQStyle">
@@ -434,6 +437,11 @@ export default {
             done();
           })
           .catch(_ => {});
+      },
+      // 跳转页面
+      handleToPage(id){
+        //带参数跳转
+        this.$router.push({ path: '/pfd/jlq' , query: { id: id }});
       }
 
     },
@@ -470,7 +478,7 @@ body{
     width: 1898px;
     height: 100%;
     z-index: 20;
-    /* border: 1px solid red; */
+    border: 1px solid red;
 }
 .area-JLQ{
   position: absolute;
@@ -479,7 +487,7 @@ body{
   height: 100%;
   width: 2976px;
   z-index: 20;
-  /* border: 1px solid blue; */
+  border: 1px solid blue;
 }
 .area-ZJQ{
   position: absolute;
@@ -488,7 +496,7 @@ body{
   height: 100%;
   width: 5740px;
   z-index: 20;
-  /* border: 1px solid green; */
+  border: 1px solid green;
 }
 .area-YS{
   position: absolute;
@@ -497,7 +505,7 @@ body{
   width: 520px;
   height:54%;
   z-index: 20;
-  /* border: 1px solid red; */
+  border: 1px solid red;
 
 }
 .area-TBP{
@@ -507,7 +515,7 @@ body{
   width: 342px;
   height:54%;
   z-index: 20;
-  /* border: 1px solid blue; */
+  border: 1px solid blue;
 }
 .area-RQ-1{
   position: absolute;
@@ -516,7 +524,7 @@ body{
   width: 520px;
   height:45%;
   z-index: 20;
-  /* border: 1px solid yellow; */
+  border: 1px solid yellow;
 
 }
 .area-LQ_RQ{
@@ -526,7 +534,7 @@ body{
   height: 100%;
   width: 4931px;
   z-index: 20;
-  /* border: 1px solid darkmagenta; */
+  border: 1px solid darkmagenta;
 }
 .area-LQ-1{
   position: absolute;
@@ -535,7 +543,7 @@ body{
   width: 666px;
   height: 65%;
   z-index: 20;
-  /* border: 1px solid darkorange; */
+  border: 1px solid darkorange;
 }
 .area-LQ-2{
   position: absolute;
@@ -544,7 +552,7 @@ body{
   width: 320px;
   height: 35%;
   z-index: 20;
-  /* border: 1px solid darkred; */
+  border: 1px solid darkred;
 }
 .area-RQ-2{
   position: absolute;
@@ -553,7 +561,7 @@ body{
   width: 320px;
   height: 35%;
   z-index: 20;
-  /* border: 1px solid darkgreen; */
+  border: 1px solid darkgreen;
 }
 /* 放大缩小按钮 */
 .resizeBox{
@@ -1084,6 +1092,26 @@ body{
   top: 40.5%;
   left: 78.9%;
 }
+
+/* 方形区域 */
+.JLQ-rectangle-1{
+  position: absolute;
+  top: 33.3%;
+  left: 19.1%;
+  width: 2%;
+  height: .7%;
+  z-index: 20;
+  font-size: 0;
+}
+.JLQ-rectangle-2{
+  position: absolute;
+  top: 36%;
+  left: 36.7%;
+  width: 3%;
+  height: .9%;
+  z-index: 20;
+  font-size: 0;
+}
 </style>