菱形触发点功能开发

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

@@ -6,7 +6,7 @@
       <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">
         <!-- 点击区域 -->
@@ -16,59 +16,194 @@
 
           <!-- 裂解炉 -->
           <div class="area-LJL" :style="LJLStyle">
+            <!-- 菱形点击区域 --展示弹窗 -->
+            <div class="rhombus LJL-rhombus LJL-rhombus-1" @click="handleDialogVisible('2009')" ref-data="2009">2009</div>
 
           </div>
           <!-- 急冷区 -->
           <div class="area-JLQ" :style="JLQStyle">
+            <!-- 菱形点击区域 --展示弹窗 -->
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-1" @click="handleDialogVisible('2017')" ref-data="2017">2017</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-2" @click="handleDialogVisible('2000')" ref-data="2000">2000</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-3" @click="handleDialogVisible('2010')" ref-data="2010">2010</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-4" @click="handleDialogVisible('2018')" ref-data="2018">2018</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-5" @click="handleDialogVisible('2041')" ref-data="2041">2041</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-6" @click="handleDialogVisible('2047')" ref-data="2047">2047</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-7" @click="handleDialogVisible('2011')" ref-data="2011">2011</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-8" @click="handleDialogVisible('2030')" ref-data="2030">2030</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-9" @click="handleDialogVisible('2031')" ref-data="2031">2031</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-10" @click="handleDialogVisible('2037')" ref-data="2037">2037</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-11" @click="handleDialogVisible('2039')" ref-data="2039">2039</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-12" @click="handleDialogVisible('2016')" ref-data="2016">2016</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-13" @click="handleDialogVisible('1110')" ref-data="1110">1110</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-14" @click="handleDialogVisible('2327')" ref-data="2327">2327</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-15" @click="handleDialogVisible('2329')" ref-data="2329">2329</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-16" @click="handleDialogVisible('2920')" ref-data="2920">2920</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-17" @click="handleDialogVisible('2503')" ref-data="2503">2503</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-18" @click="handleDialogVisible('2911')" ref-data="2911">2911</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-19" @click="handleDialogVisible('2940')" ref-data="2940">2940</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-20" @click="handleDialogVisible('2020')" ref-data="2020">2020</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-21" @click="handleDialogVisible('2501')" ref-data="2501">2501</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-22" @click="handleDialogVisible('2504')" ref-data="2504">2504</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-23" @click="handleDialogVisible('2551')" ref-data="2551">2551</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-24" @click="handleDialogVisible('2603')" ref-data="2603">2603</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-25" @click="handleDialogVisible('2554')" ref-data="2554">2554</div>
+            <div class="rhombus JLQ-rhombus JLQ-rhombus-26" @click="handleDialogVisible('2555')" ref-data="2555">2555</div>
+            <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>
           <!-- 中间区域 -->
           <div class="area-ZJQ" :style="ZJQStyle">
               <!-- 压缩 -->
-              <div class="area-YS">压缩</div>
+              <div class="area-YS" :style="YSStyle">
+                <!-- 菱形点击区域 --展示弹窗 -->
+                <div class="rhombus YS-rhombus YS-rhombus-1" @click="handleDialogVisible('3102')" ref-data="3102">3102</div>
+                <div class="rhombus YS-rhombus YS-rhombus-2" @click="handleDialogVisible('3202')" ref-data="3202">3202</div>
+                <div class="rhombus YS-rhombus YS-rhombus-3" @click="handleDialogVisible('3126')" ref-data="3126">3126</div>
+                <div class="rhombus YS-rhombus YS-rhombus-4" @click="handleDialogVisible('3116')" ref-data="3116">3116</div>
+                <div class="rhombus YS-rhombus YS-rhombus-5" @click="handleDialogVisible('3302')" ref-data="3302">3302</div>
+                <div class="rhombus YS-rhombus YS-rhombus-6" @click="handleDialogVisible('3402')" ref-data="3402">3402</div>
+                <div class="rhombus YS-rhombus YS-rhombus-7" @click="handleDialogVisible('3477')" ref-data="3477">3477</div>
+                <div class="rhombus YS-rhombus YS-rhombus-8" @click="handleDialogVisible('3476')" ref-data="3476">3476</div>
+                <div class="rhombus YS-rhombus YS-rhombus-9" @click="handleDialogVisible('3478')" ref-data="3478">3478</div>
+                <div class="rhombus YS-rhombus YS-rhombus-10" @click="handleDialogVisible('3502')" ref-data="3502">3502</div>
+                <div class="rhombus YS-rhombus YS-rhombus-11" @click="handleDialogVisible('3469')" ref-data="3469">3469</div>
+
+              </div>
               <!-- 脱丙烷 -->
-              <div class="area-TBP">脱丙烷</div>
+              <div class="area-TBP" :style="TBPStyle">
+                <!-- 菱形点击区域 --展示弹窗 -->
+                <div class="rhombus TBP-rhombus TBP-rhombus-1" @click="handleDialogVisible('3708')" ref-data="3708">3708</div>
+                <div class="rhombus TBP-rhombus TBP-rhombus-2" @click="handleDialogVisible('3508')" ref-data="3508">3508</div>
+                <div class="rhombus TBP-rhombus TBP-rhombus-3" @click="handleDialogVisible('3700')" ref-data="3700">3700</div>
+                <div class="rhombus TBP-rhombus TBP-rhombus-4" @click="handleDialogVisible('3781')" ref-data="3781">3781</div>
+                <div class="rhombus TBP-rhombus TBP-rhombus-5" @click="handleDialogVisible('3780')" ref-data="3780">3780</div>
+                <div class="rhombus TBP-rhombus TBP-rhombus-6" @click="handleDialogVisible('3790')" ref-data="3790">3790</div>
+                <div class="rhombus TBP-rhombus TBP-rhombus-7" @click="handleDialogVisible('3895')" ref-data="3895">3895</div>
+                <div class="rhombus TBP-rhombus TBP-rhombus-8" @click="handleDialogVisible('3900')" ref-data="3900">3900</div>
+                <div class="rhombus TBP-rhombus TBP-rhombus-9" @click="handleDialogVisible('3901')" ref-data="3901">3901</div>
+                <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>
+              </div>
               <!-- 热区 -->
-              <div class="area-RQ">热区-1</div>
+              <div class="area-RQ-1" :style="RQ1Style">
+                <div class="rhombus RQ1-rhombus RQ1-rhombus-1" @click="handleDialogVisible('5606')" ref-data="5606">5606</div>
+                <div class="rhombus RQ1-rhombus RQ1-rhombus-2" @click="handleDialogVisible('5601')" ref-data="5601">5601</div>
+                <div class="rhombus RQ1-rhombus RQ1-rhombus-3" @click="handleDialogVisible('5600')" ref-data="5600">5600</div>
+              </div>
           </div>
           <!-- 冷区+热区-2 -->
           <div class="area-LQ_RQ" :style="LQ_RQStyle">
-              <!-- 冷区 -->
-              <div class="area-LQ-1">冷区</div>
+              <!-- 冷区1 -->
+              <div class="area-LQ-1" :style="LQ1Style">
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-1" @click="handleDialogVisible('4223')" ref-data="4223">4223</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-2" @click="handleDialogVisible('4013')" ref-data="4013">4013</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-3" @click="handleDialogVisible('4009')" ref-data="4009">4009</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-4" @click="handleDialogVisible('4450')" ref-data="4450">4450</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-5" @click="handleDialogVisible('4014')" ref-data="4014">4014</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-6" @click="handleDialogVisible('4090')" ref-data="4090">4090</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-7" @click="handleDialogVisible('4000')" ref-data="4000">4000</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-8" @click="handleDialogVisible('4020')" ref-data="4020">4020</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-9" @click="handleDialogVisible('4010')" ref-data="4010">4010</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-10" @click="handleDialogVisible('4048')" ref-data="4048">4048</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-11" @click="handleDialogVisible('4451')" ref-data="4451">4451</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-12" @click="handleDialogVisible('4452')" ref-data="4452">4452</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-13" @click="handleDialogVisible('4454')" ref-data="4454">4454</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-14" @click="handleDialogVisible('4455')" ref-data="4455">4455</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-15" @click="handleDialogVisible('4470')" ref-data="4470">4470</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-16" @click="handleDialogVisible('4461')" ref-data="4461">4461</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-17" @click="handleDialogVisible('4462')" ref-data="4462">4462</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-18" @click="handleDialogVisible('4082')" ref-data="4082">4082</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-19" @click="handleDialogVisible('4071')" ref-data="4071">4071</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-20" @click="handleDialogVisible('4429')" ref-data="4429">4429</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-21" @click="handleDialogVisible('4430')" ref-data="4430">4430</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-22" @click="handleDialogVisible('4217')" ref-data="4217">4217</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-23" @click="handleDialogVisible('4362')" ref-data="4362">4362</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-24" @click="handleDialogVisible('4071')" ref-data="4071">4071</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-25" @click="handleDialogVisible('4040')" ref-data="4040">4040</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-26" @click="handleDialogVisible('4121')" ref-data="4121">4121</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-27" @click="handleDialogVisible('4024')" ref-data="4024">4024</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-28" @click="handleDialogVisible('4025')" ref-data="4025">4025</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-29" @click="handleDialogVisible('4056')" ref-data="4056">4056</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-30" @click="handleDialogVisible('4028')" ref-data="4028">4028</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-31" @click="handleDialogVisible('4037')" ref-data="4037">4037</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-32" @click="handleDialogVisible('4050')" ref-data="4050">4050</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-33" @click="handleDialogVisible('7311')" ref-data="7311">7311</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-34" @click="handleDialogVisible('7323')" ref-data="7323">7323</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-35" @click="handleDialogVisible('7210')" ref-data="7210">7210</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-36" @click="handleDialogVisible('7220')" ref-data="7220">7220</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-37" @click="handleDialogVisible('7432')" ref-data="7432">7432</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-38" @click="handleDialogVisible('7321')" ref-data="7321">7321</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-39" @click="handleDialogVisible('7470')" ref-data="7470">7470</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-40" @click="handleDialogVisible('7352')" ref-data="7352">7352</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-41" @click="handleDialogVisible('7360')" ref-data="7360">7360</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-42" @click="handleDialogVisible('7140')" ref-data="7140">7140</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-43" @click="handleDialogVisible('4170')" ref-data="4170">4170</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-44" @click="handleDialogVisible('7170')" ref-data="7170">7170</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-45" @click="handleDialogVisible('7022')" ref-data="7022">7022</div>
+                <div class="rhombus LQ1-rhombus LQ1-rhombus-46" @click="handleDialogVisible('7460')" ref-data="7460">7460</div>
+                <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>
+              </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>
+              </div>
               <!-- 热区-2 -->
-              <div class="area-RQ-2">热区-2</div>
+              <div class="area-RQ-2" :style="RQ2Style">
+                <div class="rhombus RQ2-rhombus RQ2-rhombus-1" @click="handleDialogVisible('5301')" ref-data="5301">5301</div>
+                <div class="rhombus RQ2-rhombus RQ2-rhombus-2" @click="handleDialogVisible('5304')" ref-data="5304">5304</div>
+                <div class="rhombus RQ2-rhombus RQ2-rhombus-3" @click="handleDialogVisible('5250')" ref-data="5250">5250</div>
+                <div class="rhombus RQ2-rhombus RQ2-rhombus-4" @click="handleDialogVisible('5300')" ref-data="5300">5300</div>
+                <div class="rhombus RQ2-rhombus RQ2-rhombus-5" @click="handleDialogVisible('5401')" ref-data="5401">5401</div>
+                <div class="rhombus RQ2-rhombus RQ2-rhombus-6" @click="handleDialogVisible('5406')" ref-data="5406">5406</div>
+                <div class="rhombus RQ2-rhombus RQ2-rhombus-7" @click="handleDialogVisible('5403')" ref-data="5403">5403</div>
+              </div>
           </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,
-            // 拖拽移动相关
-            dragging: false,
-            mouseX: 0,
-            mouseY: 0,
-            offsetX: 0,
-            offsetY: 0,
             // 缩放比例
             scaleNum: 200,
             // 底图初始化宽度
             imageWidth:2148,
 
             // 裂解炉初始化宽度
-            areaLJLWidth: 290,
+            areaLJLWidth: 248,
             // 裂解炉区域缩放比例
             areaLJLScaleNum: 0,
 
             // 急冷区初始化宽度
-            areaJLQWidth: 284,
+            areaJLQWidth: 423,
             // 裂解炉区域缩放比例
             areaJLQScaleNum: 0,
 
@@ -77,11 +212,42 @@ export default {
             // 中间区域缩放比例
             areaZJQScaleNum: 0,
 
+            // 中间区域压缩区域初始化宽度
+            areaYSWidth: 520,
+            // 中间区域压缩区域缩放比例
+            areaYSScaleNum: 0,
+            // 中间区域脱丙烷区域初始化宽度
+            areaTBPWidth: 282,
+            // 中间区域脱丙烷区域缩放比例
+            areaTBPScaleNum: 0,
+            // 中间区域热区-1初始化宽度
+            areaRQ1Width: 520,
+            // 中间区域热区-1缩放比例
+            areaRQ1ScaleNum: 0,
+
             // 冷区+热区-2初始化宽度
-            areaLQ_RQWidth: 699,
+            areaLQ_RQWidth: 666,
             // 冷区+热区-2缩放比例
             areaLQ_RQScaleNum: 0,
 
+            // 冷区1初始化宽度
+            areaLQ_1Width: 666,
+            // 冷区1缩放比例
+            areaLQ_1ScaleNum: 0,
+
+            // 冷区2初始化宽度
+            areaLQ_2Width: 320,
+            // 冷区2缩放比例
+            areaLQ_2ScaleNum: 0,
+
+            // 热区-2初始化宽度
+            areaRQ2Width: 320,
+            // 热区-2缩放比例
+            areaRQ2ScaleNum: 0,
+
+            // 菱形点击后传递的数据
+            rhombusData: 0,
+
         };
     },
     mounted () {
@@ -89,17 +255,17 @@ export default {
               this.areaLJLScaleNum = parseFloat(this.scaleNum * (this.areaLJLWidth / this.imageWidth)).toFixed();
               this.areaJLQScaleNum = parseFloat(this.scaleNum * (this.areaJLQWidth / this.imageWidth)).toFixed();
               this.areaZJQScaleNum = parseFloat(this.scaleNum * (this.areaZJQWidth / this.imageWidth)).toFixed();
+              this.areaYSScaleNum = parseFloat(this.scaleNum * (this.areaYSWidth / this.imageWidth)).toFixed();
+              this.areaTBPScaleNum = parseFloat(this.scaleNum * (this.areaTBPWidth / this.imageWidth)).toFixed();
+              this.areaRQ1ScaleNum = parseFloat(this.scaleNum * (this.areaRQ1Width / this.imageWidth)).toFixed();
               this.areaLQ_RQScaleNum = parseFloat(this.scaleNum * (this.areaLQ_RQWidth / this.imageWidth)).toFixed();
+              this.areaLQ_1ScaleNum = parseFloat(this.scaleNum * (this.areaLQ_1Width / this.imageWidth)).toFixed();
+              this.areaLQ_2ScaleNum = parseFloat(this.scaleNum * (this.areaLQ_2Width / this.imageWidth)).toFixed();
+              this.areaRQ2ScaleNum = parseFloat(this.scaleNum * (this.areaRQ2Width / this.imageWidth)).toFixed();
+
         });
     },
     computed: {
-      styleObject() {
-          return {
-            position: 'absolute',
-            left: this.mouseX + 'px',
-            top: this.mouseY + 'px'
-          };
-      },
       imageStyle() {
         return {
           width: `${this.imageWidth}px`, // 动态设置图片宽度
@@ -123,24 +289,62 @@ export default {
           left: `${this.areaLJLWidth+this.areaJLQWidth}px`, // 动态设置急冷区left
         };
       },
+      YSStyle(){
+        return {
+          width: `${this.areaYSWidth}px`, // 动态设置压缩宽度
+          left: 0, // 动态设置压缩left
+        };
+      },
+      TBPStyle(){
+        return {
+          width: `${this.areaTBPWidth}px`, // 动态设置脱丙烷宽度
+          left: `${this.areaYSWidth}px`, // 动态设置脱丙烷left
+        };
+      },
+      RQ1Style(){
+        return {
+          width: `${this.areaRQ1Width}px`, // 动态设置热区-1宽度
+        };
+      },
       LQ_RQStyle(){
         return {
           width: `${this.areaLQ_RQWidth}px`, // 动态设置冷区+热区-2宽度
           left: `${this.areaLJLWidth+this.areaJLQWidth+this.areaZJQWidth}px`, // 动态设置冷区+热区-2left
         };
       },
+      LQ1Style(){
+        return {
+          width: `${this.areaLQ_1Width}px`, // 动态设置冷区1宽度
+        };
+      },
+      LQ2Style(){
+        return {
+          width: `${this.areaLQ_2Width}px`, // 动态设置冷区2宽度
+        };
+      },
+      RQ2Style(){
+        return {
+          width: `${this.areaRQ2Width}px`, // 动态设置热区-2宽度
+        };
+      },
     },
     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;
@@ -152,6 +356,7 @@ export default {
 
           // 鼠标弹起时不再移动
           document.onmouseup = function () {
+            dragging = true;
             document.onmousemove = null;
           };
         };
@@ -161,6 +366,7 @@ export default {
     methods: {
       // 图片缩放函数
       resizeImage(type){
+
         if(type === -1){ //缩小
           // 底图宽度
           this.imageWidth -= this.scaleNum;
@@ -170,8 +376,20 @@ export default {
           this.areaJLQWidth -= this.areaJLQScaleNum;
           // 中间区域宽度
           this.areaZJQWidth -= this.areaZJQScaleNum;
+          // 中间区域压缩区域宽度
+          this.areaYSWidth -= this.areaYSScaleNum;
+          // 中间区域脱丙烷区域宽度
+          this.areaTBPWidth -= this.areaTBPScaleNum;
+          // 中间区域热区-1宽度
+          this.areaRQ1Width -= this.areaRQ1ScaleNum;
           // 冷区+热区-2宽度
           this.areaLQ_RQWidth -= this.areaLQ_RQScaleNum;
+          // 冷区1宽度
+          this.areaLQ_1Width -= this.areaLQ_1ScaleNum;
+          // 冷区2宽度
+          this.areaLQ_2Width -= this.areaLQ_2ScaleNum;
+          // 热区-2宽度
+          this.areaRQ2Width -= this.areaRQ2ScaleNum;
         }else if(type === 1){ //放大
            // 底图宽度
           this.imageWidth += this.scaleNum;
@@ -181,25 +399,43 @@ export default {
           this.areaJLQWidth = +this.areaJLQWidth + +this.areaJLQScaleNum;
           // 中间区域宽度
           this.areaZJQWidth = +this.areaZJQWidth + +this.areaZJQScaleNum;
+          // 中间区域压缩区域宽度
+          this.areaYSWidth = +this.areaYSWidth + +this.areaYSScaleNum;
+          // 中间区域脱丙烷区域宽度
+          this.areaTBPWidth = +this.areaTBPWidth + +this.areaTBPScaleNum;
+          // 中间区域热区-1宽度
+          this.areaRQ1Width = +this.areaRQ1Width + +this.areaRQ1ScaleNum;
           // 冷区+热区-2宽度
           this.areaLQ_RQWidth = +this.areaLQ_RQWidth + +this.areaLQ_RQScaleNum;
+          // 冷区1宽度
+          this.areaLQ_1Width = +this.areaLQ_1Width + +this.areaLQ_1ScaleNum;
+          // 冷区2宽度
+          this.areaLQ_2Width = +this.areaLQ_2Width + +this.areaLQ_2ScaleNum;
+          // 热区-2宽度
+          this.areaRQ2Width = +this.areaRQ2Width + +this.areaRQ2ScaleNum;
         }
       },
-      // 拖拽相关函数
-      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;
+      // 显示弹窗
+      handleDialogVisible(num){
+        console.log('3333',dragging);
+        // 防止拖拽时触发点击事件
+        if(dragging === true){
+          this.rhombusData = num;
+          this.dialogVisible = true;
+        }else{
+          this.dialogVisible = false;
         }
+
+      },
+      // 弹窗方法
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
       }
+
     },
 
 };
@@ -234,7 +470,7 @@ body{
     width: 1898px;
     height: 100%;
     z-index: 20;
-    border: 1px solid red;
+    /* border: 1px solid red; */
 }
 .area-JLQ{
   position: absolute;
@@ -243,7 +479,7 @@ body{
   height: 100%;
   width: 2976px;
   z-index: 20;
-  border: 1px solid blue;
+  /* border: 1px solid blue; */
 }
 .area-ZJQ{
   position: absolute;
@@ -252,7 +488,36 @@ body{
   height: 100%;
   width: 5740px;
   z-index: 20;
-  border: 1px solid green;
+  /* border: 1px solid green; */
+}
+.area-YS{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 520px;
+  height:54%;
+  z-index: 20;
+  /* border: 1px solid red; */
+
+}
+.area-TBP{
+  position: absolute;
+  top: 0;
+  left: 520px;
+  width: 342px;
+  height:54%;
+  z-index: 20;
+  /* border: 1px solid blue; */
+}
+.area-RQ-1{
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 520px;
+  height:45%;
+  z-index: 20;
+  /* border: 1px solid yellow; */
+
 }
 .area-LQ_RQ{
   position: absolute;
@@ -261,8 +526,36 @@ body{
   height: 100%;
   width: 4931px;
   z-index: 20;
-  border: 1px solid darkmagenta;
+  /* border: 1px solid darkmagenta; */
+}
+.area-LQ-1{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 666px;
+  height: 65%;
+  z-index: 20;
+  /* border: 1px solid darkorange; */
+}
+.area-LQ-2{
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 320px;
+  height: 35%;
+  z-index: 20;
+  /* border: 1px solid darkred; */
+}
+.area-RQ-2{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 320px;
+  height: 35%;
+  z-index: 20;
+  /* border: 1px solid darkgreen; */
 }
+/* 放大缩小按钮 */
 .resizeBox{
   position: fixed;
   bottom: 4%;
@@ -290,6 +583,507 @@ body{
   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;
+}
+.LJL-rhombus{
+  width: 1.5%;
+  height: 0.6%;
+}
+.LJL-rhombus-1{
+  top: 63.2%;
+  left: 58.3%;
+}
+.JLQ-rhombus{
+  width: 1%;
+  height: 0.6%;
+}
+.JLQ-rhombus-1{
+  top: 35.1%;
+  left: 4.45%;
+}
+.JLQ-rhombus-2{
+  top: 35.95%;
+  left: 6.7%;
+}
+.JLQ-rhombus-3{
+  top: 39.79%;
+  left: 11.35%;
+}
+.JLQ-rhombus-4{
+  top: 39.79%;
+  left: 13.35%;
+}
+.JLQ-rhombus-5{
+  top: 39.79%;
+  left: 15.35%;
+}
+.JLQ-rhombus-6{
+  top: 39.79%;
+  left: 19.45%;
+}
+.JLQ-rhombus-7{
+  top: 28.85%;
+  left: 19.45%;
+}
+.JLQ-rhombus-8{
+  top: 32.35%;
+  left: 17.35%;
+}
+.JLQ-rhombus-9{
+  top: 52.18%;
+  left: 11.5%;
+}
+.JLQ-rhombus-10{
+  top: 52.68%;
+  left: 24.1%;
+}
+.JLQ-rhombus-11{
+  top: 57.34%;
+  left: 13.31%;
+}
+
+.JLQ-rhombus-12{
+  top: 33.9%;
+  left: 25.9%;
+}
+.JLQ-rhombus-13{
+  top: 29.4%;
+  left: 31.2%;
+}
+.JLQ-rhombus-14{
+  top: 31.9%;
+  left: 34.2%;
+}
+.JLQ-rhombus-15{
+  top: 33.96%;
+  left: 34.8%;
+}
+.JLQ-rhombus-16{
+  top: 34.4%;
+  left: 41.2%;
+}
+.JLQ-rhombus-17{
+  top: 30%;
+  left: 44.7%;
+}
+.JLQ-rhombus-18{
+  top: 35.69%;
+  left: 46.4%;
+}
+.JLQ-rhombus-19{
+  top: 39.39%;
+  left: 43.4%;
+}
+.JLQ-rhombus-20{
+  top: 39.39%;
+  left: 31.1%;
+}
+.JLQ-rhombus-21{
+  top: 34.5%;
+  left: 53.3%;
+}
+.JLQ-rhombus-22{
+  top: 39.5%;
+  left: 59.8%;
+}
+.JLQ-rhombus-23{
+  top: 55.7%;
+  left: 55.9%;
+}
+.JLQ-rhombus-24{
+  top: 54%;
+  left: 59.9%;
+}
+.JLQ-rhombus-25{
+  top: 63.3%;
+  left: 59.9%;
+}
+.JLQ-rhombus-26{
+  top: 67.5%;
+  left: 88.9%;
+}
+.JLQ-rhombus-27{
+  top: 43.7%;
+  left: 88.9%;
+}
+.JLQ-rhombus-28{
+  top: 25.5%;
+  left: 88.4%;
+}
+
+.YS-rhombus{
+  width: 0.8%;
+  height: 1%;
+}
+.YS-rhombus-1{
+  top: 75.75%;
+  left: 7.7%;
+}
+.YS-rhombus-2{
+  top: 75.75%;
+  left: 16.7%;
+}
+.YS-rhombus-3{
+  top: 86.7%;
+  left: 13.4%;
+}
+.YS-rhombus-4{
+  top: 86.75%;
+  left: 16.6%;
+}
+.YS-rhombus-5{
+  top: 75.75%;
+  left: 25.55%;
+}
+.YS-rhombus-6{
+  top: 75.75%;
+  left: 34.55%;
+}
+.YS-rhombus-7{
+  top: 78.5%;
+  left: 54.1%;
+}
+.YS-rhombus-8{
+  top: 77.86%;
+  left: 62.75%;
+}
+.YS-rhombus-9{
+  top: 86.86%;
+  left: 61.15%;
+}
+.YS-rhombus-10{
+  top: 75.46%;
+  left: 86.65%;
+}
+.YS-rhombus-11{
+  top: 77%;
+  left: 86.65%;
+}
+.TBP-rhombus{
+  width: 1.4%;
+  height: 1.2%;
+}
+.TBP-rhombus-1{
+  top: 58.4%;
+  left: 8%;
+}
+.TBP-rhombus-2{
+  top: 70%;
+  left: 14.4%;
+}
+.TBP-rhombus-3{
+  top: 66.7%;
+  left: 23.4%;
+}
+.TBP-rhombus-4{
+  top: 71.6%;
+  left: 31.1%;
+}
+.TBP-rhombus-5{
+  top: 73%;
+  left: 34.61%;
+}
+.TBP-rhombus-6{
+  top: 58.6123%;
+  left: 33.61%;
+}
+.TBP-rhombus-7{
+  top: 86.96%;
+  left: 42.1%;
+}
+.TBP-rhombus-8{
+  top: 97.6%;
+  left: 53.5%;
+}
+.TBP-rhombus-9{
+  top: 80.3%;
+  left: 54%;
+}
+.TBP-rhombus-10{
+  top: 84.3%;
+  left: 66%;
+}
+.TBP-rhombus-11{
+  top: 80%;
+  left: 80.3%;
+}
+
+.TBP-rhombus-12{
+  top: 51.7%;
+  left: 69.1%;
+}
+.RQ1-rhombus{
+  width: 0.9%;
+  height: 1.3%;
+}
+.RQ1-rhombus-1{
+  top: 17.4%;
+  left: 49.41%;
+}
+.RQ1-rhombus-2{
+  top: 14.2%;
+  left: 56.41%;
+}
+.RQ1-rhombus-3{
+  top: 35.87%;
+  left: 56.251%;
+}
+.LQ1-rhombus{
+  width: 0.7%;
+  height: 1%;
+}
+.LQ1-rhombus-1{
+  top: 27.2%;
+  left: 7.5%;
+}
+.LQ1-rhombus-2{
+  top: 29.92%;
+  left: 18.25%;
+}
+.LQ1-rhombus-3{
+  top: 35.8%;
+  left: 19.35%;
+}
+.LQ1-rhombus-4{
+  top: 35.8%;
+  left: 21.2%;
+}
+.LQ1-rhombus-5{
+  top: 38.2%;
+  left: 18.2%;
+}
+.LQ1-rhombus-6{
+  top: 51.7%;
+  left: 10.9%;
+}
+.LQ1-rhombus-7{
+  top: 49.7%;
+  left: 21.4%;
+}
+.LQ1-rhombus-8{
+  top: 54.8%;
+  left: 27.8%;
+}
+.LQ1-rhombus-9{
+  top: 39.2%;
+  left: 30.2%;
+}
+.LQ1-rhombus-10{
+  top: 53.5%;
+  left: 38.1%;
+}
+.LQ1-rhombus-11{
+  top: 53.5%;
+  left: 40.6%;
+}
+.LQ1-rhombus-12{
+  top: 53.3%;
+  left: 41.3%;
+}
+.LQ1-rhombus-13{
+  top: 53.5%;
+  left: 43.3%;
+}
+.LQ1-rhombus-14{
+  top: 53.05%;
+  left: 44%;
+}
+.LQ1-rhombus-15{
+  top: 55.3%;
+  left: 53.2%;
+}
+.LQ1-rhombus-16{
+  top: 38.3%;
+  left: 52.4%;
+}
+.LQ1-rhombus-17{
+  top: 36.7%;
+  left: 53.4%;
+}
+.LQ1-rhombus-18{
+  top: 30.3%;
+  left: 29.4%;
+}
+.LQ1-rhombus-19{
+  top: 20.7%;
+  left: 46.86%;
+}
+.LQ1-rhombus-20{
+  top: 15.6%;
+  left: 50.86%;
+}
+.LQ1-rhombus-21{
+  top: 14.6%;
+  left: 52.05%;
+}
+.LQ1-rhombus-22{
+  top: 32.75%;
+  left: 59.9%;
+}
+.LQ1-rhombus-23{
+  top: 31.25%;
+  left: 60.35%;
+}
+.LQ1-rhombus-24{
+  top: 29.25%;
+  left: 65.77%;
+}
+.LQ1-rhombus-25{
+  top: 30.5%;
+  left: 72.77%;
+}
+.LQ1-rhombus-26{
+  top: 18.2%;
+  left: 76.57%;
+}
+.LQ1-rhombus-27{
+  top: 43.6%;
+  left: 65.8%;
+}
+.LQ1-rhombus-28{
+  top: 43.4%;
+  left: 70.7%;
+}
+
+.LQ1-rhombus-29{
+  top: 43.4%;
+  left: 79.6%;
+}
+.LQ1-rhombus-30{
+  top: 53.8%;
+  left: 72.1%;
+}
+.LQ1-rhombus-31{
+  top: 58.8%;
+  left: 84%;
+}
+.LQ1-rhombus-32{
+  top: 61.2%;
+  left: 81.25%;
+}
+.LQ1-rhombus-33{
+  top: 68.96%;
+  left: 66%;
+}
+.LQ1-rhombus-34{
+  top: 72.76%;
+  left: 68.45%;
+}
+.LQ1-rhombus-35{
+  top: 77.76%;
+  left: 61.15%;
+}
+.LQ1-rhombus-36{
+  top: 80.5%;
+  left: 61%;
+}
+.LQ1-rhombus-37{
+  top: 86%;
+  left: 68.66%;
+}
+.LQ1-rhombus-38{
+  top: 81.7%;
+  left: 75.84%;
+}
+.LQ1-rhombus-39{
+  top: 81.7%;
+  left: 78.64%;
+}
+.LQ1-rhombus-40{
+  top: 93.3%;
+  left: 68.64%;
+}
+.LQ1-rhombus-41{
+  top: 95.6%;
+  left: 65.96%;
+}
+.LQ1-rhombus-42{
+  top: 90.2%;
+  left: 45.86%;
+}
+.LQ1-rhombus-43{
+  top: 90.5%;
+  left: 8.86%;
+}
+.LQ1-rhombus-44{
+  top: 68.1%;
+  left: 45.96%;
+}
+.LQ1-rhombus-45{
+  top: 77.1%;
+  left: 50.2%;
+}
+.LQ1-rhombus-46{
+  top: 77.1%;
+  left: 85.6%;
+}
+
+.LQ1-rhombus-47{
+  top: 80.31%;
+  left: 85.6%;
+}
+.LQ1-rhombus-48{
+  top: 78.81%;
+  left: 86.8%;
+}
+.LQ1-rhombus-49{
+  top: 74.91%;
+  left: 86.8%;
+}
+.LQ2-rhombus{
+  width: 1.4%;
+  height: 1.7%;
+}
+.LQ2-rhombus-1{
+  top: 5.3%;
+  left: 32.7%;
+}
+.LQ2-rhombus-2{
+  top: 11.3%;
+  left: 35.3%;
+}
+.RQ2-rhombus{
+  width: 1.4%;
+  height: 1.7%;
+}
+.RQ2-rhombus-1{
+  top: 18.8%;
+  left: 53.6%;
+}
+.RQ2-rhombus-2{
+  top: 33.4%;
+  left: 53.3%;
+}
+.RQ2-rhombus-3{
+  top: 76.1%;
+  left: 49.8%;
+}
+.RQ2-rhombus-4{
+  top: 82.7%;
+  left: 44.8%;
+}
+.RQ2-rhombus-5{
+  top: 18.5%;
+  left: 71.1%;
+}
+.RQ2-rhombus-6{
+  top: 18.5%;
+  left: 82.1%;
+}
+.RQ2-rhombus-7{
+  top: 40.5%;
+  left: 78.9%;
+}
 </style>