pfd页面基础图展示，缩放功能开发

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

@@ -1,26 +1,151 @@
 <template>
-   <div>
-      pfd
+  <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="pfdDivBox" >
+      <!-- 底图 -->
+      <img src="../../../assets/pfdImg/indexImg/index.jpg" alt="Responsive image" :style="imageStyle" class="indexImg" ref="indexImg">
+
+      <!-- 裂解炉 -->
+      <div class="area-LJL" :style="LJLStyle">
+
+      </div>
+      <!-- 急冷区 -->
+      <div class="area-JLQ" >
+      </div>
+      <!-- 中间区域 -->
+      <div class="area-ZJQ">
+          <!-- 压缩 -->
+          <div class="area-YS">压缩</div>
+          <!-- 脱丙烷 -->
+          <div class="area-TBP">脱丙烷</div>
+          <!-- 热区 -->
+          <div class="area-RQ">热区</div>
+      </div>
+      <!-- 冷区 -->
+      <div class="area-LQ">冷区</div>
+
    </div>
-    <!-- </div> -->
+  </div>
+
 </template>
 
 <script>
 export default {
     data() {
         return {
-            dialogVisible: false
+            dialogVisible: false,
+            // 缩放比例
+            scaleNum: 200,
+            // 区域缩放比例
+            areaLJLScaleNum: 0,
+            // 底图初始化宽度
+            imageWidth:15548,
+            // 裂解炉初始化宽度
+            areaLJLWidth: 1898,
+
         };
     },
-    computed: {},
+    mounted () {
+        this.$nextTick(() => {
+              this.areaLJLScaleNum = parseFloat(this.scaleNum * (this.areaLJLWidth / this.imageWidth)).toFixed()
+        });
+    },
+    computed: {
+      imageStyle() {
+        return {
+          width: `${this.imageWidth}px`, // 动态设置图片宽度
+        };
+      },
+      LJLStyle(){
+        return {
+          width: `${this.areaLJLWidth}px`, // 动态设置裂解炉宽度
+        };
+      }
+    },
     components: {},
     //在vue自定义指令中添加该指令
     directives: {},
     created() {},
+    methods: {
+      resizeImage(type){
+        if(type === -1){ //缩小
+          // 底图宽度
+          this.imageWidth -= this.scaleNum;
+          // 裂解炉宽度
+          this.areaLJLWidth -= this.areaLJLScaleNum;
+          console.log(1,this.areaLJLWidth)
+        }else if(type === 1){ //放大
+           // 底图宽度
+          this.imageWidth += this.scaleNum;
+          // 裂解炉宽度
+          this.areaLJLWidth = +this.areaLJLWidth + +this.areaLJLScaleNum;
+        }
+      },
+    },
 
 };
 </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;
+}
+.indexImg{
+  width: 100%;
+  height: 100%;
+}
+.area-LJL{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1898px;
+    height: 100%;
+    z-index: 20;
+    /* border: 1px solid red; */
+}
+.area-JLQ{
+  position: absolute;
+  top: 0;
+  left: 3793px;
+}
+.resizeBox{
+  position: fixed;
+  bottom: 4%;
+  right: 3%;
+  z-index: 999;
+  font-size: 35px;
+}
+.resizeBox p{
+  margin: 0;
+  font-size: 12px;
+  color: #409eff;
+  opacity: 0.6;
+}
+
+.resizeBox .el-icon-zoom-out,
+.resizeBox .el-icon-zoom-in{
+  cursor: pointer;
+  color: #409eff;
+}
+</style>