c2c3功能开发

ui/src/router/index.js

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

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

@@ -0,0 +1,329 @@
+<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/other.jpg" alt="Responsive image" :style="imageStyle" class="indexImg" ref="indexImg">
+
+          <!-- 菱形点击区域 --展示弹窗 -->
+          <div class="rhombus JLQ-rhombus-1" @click="handleDialogVisible('6950')" ref-data="6950">6950</div>
+          <div class="rhombus JLQ-rhombus-2" @click="handleDialogVisible('6805')" ref-data="6805">6805</div>
+          <div class="rhombus JLQ-rhombus-3" @click="handleDialogVisible('6785')" ref-data="6785">6785</div>
+          <div class="rhombus JLQ-rhombus-4" @click="handleDialogVisible('6851')" ref-data="6851">6851</div>
+          <div class="rhombus JLQ-rhombus-5" @click="handleDialogVisible('6773')" ref-data="6773">6773</div>
+          <div class="rhombus JLQ-rhombus-6" @click="handleDialogVisible('6958')" ref-data="6958">6958</div>
+          <div class="rhombus JLQ-rhombus-7" @click="handleDialogVisible('6600')" ref-data="6600">6600</div>
+          <div class="rhombus JLQ-rhombus-8" @click="handleDialogVisible('6705')" ref-data="6705">6705</div>
+          <div class="rhombus JLQ-rhombus-9" @click="handleDialogVisible('6686')" ref-data="6686">6686</div>
+          <div class="rhombus JLQ-rhombus-10" @click="handleDialogVisible('6685')" ref-data="6685">6685</div>
+          <div class="rhombus JLQ-rhombus-11" @click="handleDialogVisible('6751')" ref-data="6751">6751</div>
+          <div class="rhombus JLQ-rhombus-12" @click="handleDialogVisible('6680')" ref-data="6680">6680</div>
+          <div class="rhombus JLQ-rhombus-13" @click="handleDialogVisible('6673')" ref-data="6673">6673</div>
+
+          <div class="rhombus JLQ-rhombus-14" @click="handleDialogVisible('6488')" ref-data="6488">6488</div>
+          <div class="rhombus JLQ-rhombus-15" @click="handleDialogVisible('6488')" ref-data="6488">6488</div>
+          <div class="rhombus JLQ-rhombus-16" @click="handleDialogVisible('6397')" ref-data="6397">6397</div>
+          <div class="rhombus JLQ-rhombus-17" @click="handleDialogVisible('6450')" ref-data="6450">6450</div>
+          <div class="rhombus JLQ-rhombus-18" @click="handleDialogVisible('6300')" ref-data="6300">6300</div>
+          <div class="rhombus JLQ-rhombus-19" @click="handleDialogVisible('6100')" ref-data="6100">6100</div>
+          <div class="rhombus JLQ-rhombus-20" @click="handleDialogVisible('6350')" ref-data="6350">6350</div>
+          <div class="rhombus JLQ-rhombus-21" @click="handleDialogVisible('6297')" ref-data="6297">6297</div>
+          <div class="rhombus JLQ-rhombus-22" @click="handleDialogVisible('6200')" ref-data="6200">6200</div>
+          <div class="rhombus JLQ-rhombus-23" @click="handleDialogVisible('6250')" ref-data="6250">6250</div>
+          <div class="rhombus JLQ-rhombus-24" @click="handleDialogVisible('6197')" ref-data="6197">6197</div>
+        </div>
+      </div>
+    </div>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose">
+      <span>{{ rhombusData }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+// 拖拽是否开启
+let dragging = false;
+import throttle from "@/utils/throttle";
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            // 缩放比例
+            scaleNum: 200,
+            // 底图初始化宽度
+            imageWidth:948,
+
+            // 菱形点击后传递的数据
+            rhombusData: 0,
+
+        };
+    },
+    mounted () {
+
+    },
+    computed: {
+      imageStyle() {
+        return {
+          width: `${this.imageWidth}px`, // 动态设置图片宽度
+        };
+      },
+    },
+    components: {},
+    //在vue自定义指令中添加该指令
+    directives: {
+      move(el) {
+        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() {},
+    methods: {
+      // 图片缩放函数
+      resizeImage(type){
+
+        if(type === -1){ //缩小
+          // 底图宽度
+          this.imageWidth -= this.scaleNum;
+
+        }else if(type === 1){ //放大
+           // 底图宽度
+          this.imageWidth += this.scaleNum;
+
+        }
+      },
+      // 显示弹窗
+      handleDialogVisible(num){
+        // 防止拖拽时触发点击事件
+        if(dragging === true){
+          this.rhombusData = num;
+          this.dialogVisible = true;
+        }else{
+          this.dialogVisible = false;
+        }
+
+      },
+      // 弹窗方法
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
+
+    },
+
+};
+</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;
+}
+
+
+/* 菱形点击区域 */
+.rhombus{
+  position: absolute;
+  /* border: 1px solid red; */
+  transform: rotate(45deg);
+  /* background-color: red; */
+  z-index: 20;
+  cursor: pointer;
+  font-size: 0;
+  width: 2%;
+  height: 2%;
+}
+.JLQ-rhombus-1{
+  top: 9.8%;
+  left: 19.25%;
+}
+.JLQ-rhombus-2{
+  top: 7%;
+  left: 45.7%;
+}
+.JLQ-rhombus-3{
+  top: 10.5%;
+  left: 83.5%;
+}
+.JLQ-rhombus-4{
+  top: 17.79%;
+  left: 51.85%;
+}
+.JLQ-rhombus-5{
+  top: 16.79%;
+  left: 86.1%;
+}
+.JLQ-rhombus-6{
+  top: 20.79%;
+  left: 71.45%;
+}
+.JLQ-rhombus-7{
+  top: 24.85%;
+  left: 6.65%;
+}
+.JLQ-rhombus-8{
+  top: 29.05%;
+  left: 48.8%;
+}
+.JLQ-rhombus-9{
+  top: 32.58%;
+  left: 58.5%;
+}
+.JLQ-rhombus-10{
+  top: 32.58%;
+  left: 81.1%;
+}
+.JLQ-rhombus-11{
+  top: 39.64%;
+  left: 51.9%;
+}
+.JLQ-rhombus-12{
+  top: 38.7%;
+  left: 64.3%;
+}
+
+.JLQ-rhombus-13{
+  top: 38.9%;
+  left: 86.2%;
+}
+.JLQ-rhombus-14{
+  top: 63.9%;
+  left: 21.2%;
+}
+.JLQ-rhombus-15{
+  top: 57.7%;
+  left: 84.8%;
+}
+.JLQ-rhombus-16{
+  top: 63.8%;
+  left: 85.49%;
+}
+.JLQ-rhombus-17{
+  top: 65.5%;
+  left: 88.9666%;
+}
+.JLQ-rhombus-18{
+  top: 72.56%;
+  left: 61%;
+}
+.JLQ-rhombus-19{
+  top: 80.8%;
+  left: 14.78%;
+}
+.JLQ-rhombus-20{
+  top: 80.1%;
+  left: 72.1%;
+}
+.JLQ-rhombus-21{
+  top: 78%;
+  left: 77%;
+}
+.JLQ-rhombus-22{
+  top: 88.96%;
+  left: 65.7%;
+}
+.JLQ-rhombus-23{
+  top: 95.66%;
+  left: 65.6%;
+}
+.JLQ-rhombus-24{
+  top: 94.1%;
+  left: 70.6%;
+}
+
+</style>
+
+
+

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

@@ -89,6 +89,10 @@
                 <div class="rhombus TBP-rhombus TBP-rhombus-10" @click="handleDialogVisible('3901')" ref-data="3906">3901</div>
                 <div class="rhombus TBP-rhombus TBP-rhombus-11" @click="handleDialogVisible('3913')" ref-data="3913">3913</div>
                 <div class="rhombus TBP-rhombus TBP-rhombus-12" @click="handleDialogVisible('3954')" ref-data="3954">3954</div>
+
+                <!-- c3 c2触发点 -->
+                <div class="TBP-c3c2 TBP-c3c2-1" @click="handleToC2C3Page()">-21.0c C3R</div>
+                <div class="TBP-c3c2 TBP-c3c2-2" @click="handleToC2C3Page()">-4.6c C3R</div>
               </div>
               <!-- 热区 -->
               <div class="area-RQ-1" :style="RQ1Style">
@@ -150,11 +154,38 @@
                 <div class="rhombus LQ1-rhombus LQ1-rhombus-47" @click="handleDialogVisible('7435')" ref-data="7435">7435</div>
                 <div class="rhombus LQ1-rhombus LQ1-rhombus-48" @click="handleDialogVisible('7430')" ref-data="7430">7430</div>
                 <div class="rhombus LQ1-rhombus LQ1-rhombus-49" @click="handleDialogVisible('7422')" ref-data="7422">7422</div>
+
+                <!-- c3 c2触发点 -->
+                <div class="LQ1-c3c2 LQ1-c3c2-1" @click="handleToC2C3Page()">-35c C3R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-2" @click="handleToC2C3Page()">C3R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-3" @click="handleToC2C3Page()">42c C3R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-4" @click="handleToC2C3Page()">C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-5" @click="handleToC2C3Page()">C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-6" @click="handleToC2C3Page()">C3R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-7" @click="handleToC2C3Page()">-67.4c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-8" @click="handleToC2C3Page()">-83c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-9" @click="handleToC2C3Page()">-101c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-10" @click="handleToC2C3Page()">-30c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-11" @click="handleToC2C3Page()">-67c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-12" @click="handleToC2C3Page()">-101c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-13" @click="handleToC2C3Page()">-67.4c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-14" @click="handleToC2C3Page()">-83.8c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-15" @click="handleToC2C3Page()">C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-16" @click="handleToC2C3Page()">-101c C2R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-17" @click="handleToC2C3Page()">-4.6c C3R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-18" @click="handleToC2C3Page()">-35c C3R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-19" @click="handleToC2C3Page()">-35c C3R</div>
+                <div class="LQ1-c3c2 LQ1-c3c2-20" @click="handleToC2C3Page()">C3R</div>
               </div>
               <!-- 冷区2 -->
               <div class="area-LQ-2" :style="LQ2Style">
                 <div class="rhombus LQ2-rhombus LQ2-rhombus-1" @click="handleDialogVisible('7481')" ref-data="7481">7481</div>
                 <div class="rhombus LQ2-rhombus LQ2-rhombus-2" @click="handleDialogVisible('7465')" ref-data="7465">7465</div>
+
+                <!-- c3 c2触发点 -->
+                <div class="LQ2-c3c2 LQ2-c3c2-1" @click="handleToC2C3Page()">-35c C3R</div>
+                <div class="LQ2-c3c2 LQ2-c3c2-2" @click="handleToC2C3Page()">C3R</div>
+                <div class="LQ2-c3c2 LQ2-c3c2-3" @click="handleToC2C3Page()">C3R</div>
               </div>
               <!-- 热区-2 -->
               <div class="area-RQ-2" :style="RQ2Style">
@@ -335,14 +366,32 @@ export default {
     //在vue自定义指令中添加该指令
     directives: {
       move(el) {
-        el.onmousedown = function (e) {
+        // 根据不同参数默认展示不同区域
+        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;
+          }
+          console.log('params',params);
+          if(params.pageId === 'JLQ'){
+            el.style.left =  "0";
+            el.style.top =  "-500px";
+          }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;
-
+           console.log('startX',startX,startY);
           throttle(
             (document.onmousemove = function (ev) {
               dragging = false;
@@ -365,7 +414,16 @@ export default {
         };
       },
     },
-    created() {},
+    created() {
+      let pageId = this.$route.query.pageId; // 页面参数
+      if(pageId){
+          if(pageId === "LJL"){
+              this.imageWidth = 2148;
+          }else if(pageId === "JLQ"){
+              this.imageWidth = 5148;
+          }
+      }
+    },
     methods: {
       // 图片缩放函数
       resizeImage(type){
@@ -442,6 +500,10 @@ export default {
       handleToPage(id){
         //带参数跳转
         this.$router.push({ path: '/pfd/jlq' , query: { id: id }});
+      },
+      // 跳转c2c3页面
+      handleToC2C3Page(){
+        this.$router.push({ path: '/pfd/c2c3' });
       }
 
     },
@@ -1112,6 +1174,130 @@ body{
   z-index: 20;
   font-size: 0;
 }
+
+/* c3 c2 */
+.TBP-c3c2{
+  width: 2%;
+  height: 1%;
+  position: absolute;
+  /* border: 1px solid red; */
+  font-size: 0;
+}
+.TBP-c3c2-1{
+  top: 64.3%;
+  left: 42.5%;
+}
+.TBP-c3c2-2{
+  top: 64.3%;
+  left: 49.5%;
+}
+
+.LQ1-c3c2{
+  width: 1%;
+  height: 1%;
+  position: absolute;
+  /* border: 1px solid red; */
+  font-size: 0;
+}
+.LQ1-c3c2-1{
+  top: 44.5%;
+  left: 4.5%;
+}
+.LQ1-c3c2-2{
+  top: 49.5%;
+  left: 7%;
+}
+.LQ1-c3c2-3{
+  top: 30.2%;
+  left: 7.7%;
+}
+.LQ1-c3c2-4{
+  top: 33.4%;
+  left: 19.2%;
+}
+.LQ1-c3c2-5{
+  top: 34.4%;
+  left: 19.2%;
+}
+.LQ1-c3c2-6{
+  top: 53.6%;
+  left: 30.2%;
+}
+.LQ1-c3c2-7{
+  top: 49.8%;
+  left: 40.5%;
+}
+.LQ1-c3c2-8{
+  top: 50.8%;
+  left: 44%;
+}
+.LQ1-c3c2-9{
+  top: 53.5%;
+  left: 48.8%;
+}
+.LQ1-c3c2-10{
+  top: 33.4%;
+  left: 60.5%;
+}
+.LQ1-c3c2-11{
+  top: 34.8%;
+  left: 62%;
+}
+.LQ1-c3c2-12{
+  top: 34.5%;
+  left: 67%;
+}
+.LQ1-c3c2-13{
+  top: 37.6%;
+  left: 73.1%;
+}
+.LQ1-c3c2-14{
+  top: 38.7%;
+  left: 74.7%;
+}
+.LQ1-c3c2-15{
+  top: 35.9%;
+  left: 82.7%;
+}
+.LQ1-c3c2-16{
+  top: 37.9%;
+  left: 83.7%;
+}
+.LQ1-c3c2-17{
+  top: 56.9%;
+  left: 83.3%;
+}
+.LQ1-c3c2-18{
+  top: 62.8%;
+  left: 76.6%;
+}
+.LQ1-c3c2-19{
+  top: 90.56%;
+  left: 73.6%;
+}
+.LQ1-c3c2-20{
+  top: 89%;
+  left: 13.3%;
+}
+.LQ2-c3c2{
+  width: 1.5%;
+  height: 1.5%;
+  position: absolute;
+  /* border: 1px solid red; */
+  font-size: 0;
+}
+.LQ2-c3c2-1{
+  top: 3%;
+  left: 31%;
+}
+.LQ2-c3c2-2{
+  top: 9%;
+  left: 31.3%;
+}
+.LQ2-c3c2-3{
+  top: 13%;
+  left: 40%;
+}
 </style>