<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/index.jpg" alt="Responsive image" :style="imageStyle" class="indexImg" ref="indexImg">

          <!-- 裂解炉 -->
          <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 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">
              <!-- 压缩 -->
              <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" :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>

                <!-- 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">
                <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 class="rhombus RQ1-rhombus RQ1-rhombus-4" @click="handleDialogVisible('5102')" ref-data="5102">5102</div>
              </div>
          </div>
          <!-- 冷区+热区-2 -->
          <div class="area-LQ_RQ" :style="LQ_RQStyle">
              <!-- 冷区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>

                <!-- 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">
                <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="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%">
      <!--<span>{{ rhombusData }}</span>-->
      <div style="margin-bottom: 20px;"><i><u>Description:</u></i> {{ description }}</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="mole" label="Composition, %mole"></el-table-column>
        <el-table-column prop="mw" label="Comp. MW"></el-table-column>
        <el-table-column prop="value" label=""></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">返 回</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
// 拖拽是否开启
let dragging = false;
let dragData = {
  left:"",
  top: "",
};
import throttle from "@/utils/throttle";
import { getPfdmgrByCode } from "@/api/monitor/pfdmgr";

export default {
    data() {
        return {
            description: null,
            tableData: [],

            dialogVisible: false,
            dialogTitle:"",
            // 缩放比例
            scaleNum: 800,
            // 底图初始化宽度
            imageWidth:2148,

            // 裂解炉初始化宽度
            areaLJLWidth: 248,
            // 裂解炉区域缩放比例
            areaLJLScaleNum: 0,

            // 急冷区初始化宽度
            areaJLQWidth: 423,
            // 裂解炉区域缩放比例
            areaJLQScaleNum: 0,

            // 中间区域初始化宽度
            areaZJQWidth: 802,
            // 中间区域缩放比例
            areaZJQScaleNum: 0,

            // 中间区域压缩区域初始化宽度
            areaYSWidth: 520,
            // 中间区域压缩区域缩放比例
            areaYSScaleNum: 0,
            // 中间区域脱丙烷区域初始化宽度
            areaTBPWidth: 282,
            // 中间区域脱丙烷区域缩放比例
            areaTBPScaleNum: 0,
            // 中间区域热区-1初始化宽度
            areaRQ1Width: 520,
            // 中间区域热区-1缩放比例
            areaRQ1ScaleNum: 0,

            // 冷区+热区-2初始化宽度
            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 () {
        this.$nextTick(() => {
          // 获取store中记录的大小
          this.imageWidth = this.$store.state.settings.pfdPageImgeSize.imageWidth;
          this.areaLJLWidth = this.$store.state.settings.pfdPageImgeSize.areaLJLWidth;
          this.areaJLQWidth = this.$store.state.settings.pfdPageImgeSize.areaJLQWidth;
          this.areaZJQWidth = this.$store.state.settings.pfdPageImgeSize.areaZJQWidth;
          this.areaYSWidth = this.$store.state.settings.pfdPageImgeSize.areaYSWidth;
          this.areaTBPWidth = this.$store.state.settings.pfdPageImgeSize.areaTBPWidth;
          this.areaRQ1Width = this.$store.state.settings.pfdPageImgeSize.areaRQ1Width;
          this.areaLQ_RQWidth = this.$store.state.settings.pfdPageImgeSize.areaLQ_RQWidth;
          this.areaLQ_1Width = this.$store.state.settings.pfdPageImgeSize.areaLQ_1Width;
          this.areaLQ_2Width = this.$store.state.settings.pfdPageImgeSize.areaLQ_2Width;
          this.areaRQ2Width = this.$store.state.settings.pfdPageImgeSize.areaRQ2Width;

          console.log("this.imageWidth",this.$store.state.settings.pfdPageImgeSize);

          // 设置不同区域的缩放比例
          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: {
      imageStyle() {
        return {
          width: `${this.imageWidth}px`, // 动态设置图片宽度
        };
      },
      LJLStyle(){
        return {
          width: `${this.areaLJLWidth}px`, // 动态设置裂解炉宽度
          left: 0, // 动态设置裂解炉left
        };
      },
      JLQStyle(){
        return {
          width: `${this.areaJLQWidth}px`, // 动态设置急冷区宽度
          left: `${this.areaLJLWidth}px`, // 动态设置急冷区left
        };
      },
      ZJQStyle(){
        return {
          width: `${this.areaZJQWidth}px`, // 动态设置急冷区宽度
          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) {
        console.log('dragData',dragData);
        // 根据不同参数默认展示不同区域
        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;
          }

          setTimeout(() => {
            // 图片缩小时图片位置问题
            let imgHeight = el.children[0].children[0].offsetHeight;
            if(imgHeight < -dragData.top *2){ // 当位置小于图片高度时，表示图片被缩放到了屏幕外
              el.style.top = "15%";
            }
            console.log("666",el);
          }, 500);

          if(params.pageId === "LJL"){ // 裂解炉
            console.log("裂解炉");
            el.style.left =  "0";
            el.style.top =  "-700px";
          }else if(params.pageId === "JLQ"){ // 急冷区
            el.style.left =  "-740px";
            el.style.top =  "-500px";
          }else if(params.pageId === "YS"){ // 压缩
            el.style.left =  "-1675px";
            el.style.top =  "-300px";
          }else if(params.pageId === "TBP"){ // 脱丙烷
            el.style.left =  "-4000px";
            el.style.top =  "-500px";
          }else if(params.pageId === "LQ"){ // 冷区
            el.style.left =  "-5050px";
            el.style.top =  "-300px";
          } else if(params.pageId === "RQ"){ // 热区
            el.style.left =  "-2900px";
            el.style.top =  "-1000px";
          }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;

                if(dragData.left != "" || dragData.top != ""){
                  el.style.left =  dragData.left + "px";
                  el.style.top =  dragData.top + "px";
                }else{
                  el.style.left = moveX + "px";
                  el.style.top = moveY + "px";
                }
                dragData.left = moveX;
                dragData.top = moveY;
            }),
            500
          );

          // 鼠标弹起时不再移动
          document.onmouseup = function () {
            dragging = true;
            document.onmousemove = null;
          };
        };

        // 解决放大缩小时图片位置问题
        if(dragData.left != "" || dragData.top != ""){
          el.style.left = dragData.left + "px";
          el.style.top =  dragData.top + "px";
        }
      },
    },
    created() {
      let pageId = this.$route.query.pageId; // 页面参数
      console.log("pageId222",pageId);
      if(pageId){
          let imgSizeObj = {};
          if(pageId === "LJL"){ // 裂解炉
            // 记录图片大小
            imgSizeObj =  {
              imageWidth:10948,
              areaLJLWidth: 1265,
              areaJLQWidth: 2156,
              areaZJQWidth: 4089,
              areaYSWidth: 2652,
              areaTBPWidth: 1438,
              areaRQ1Width: 2652,
              areaLQ_RQWidth: 3396,
              areaLQ_1Width: 3396,
              areaLQ_2Width: 1632,
              areaRQ2Width: 1632,
            };

          }else if(pageId === "JLQ"){ // 急冷区
            // 记录图片大小
            imgSizeObj =  {
              imageWidth: 6348,
              areaLJLWidth: 734,
              areaJLQWidth: 1252,
              areaZJQWidth: 2372,
              areaYSWidth: 1539,
              areaTBPWidth: 835,
              areaRQ1Width: 1538,
              areaLQ_RQWidth: 1970,
              areaLQ_1Width: 1970,
              areaLQ_2Width: 948,
              areaRQ2Width: 948,
            };

          }else if(pageId === "YS"){// 压缩
            imgSizeObj =  {
              imageWidth: 5348,
              areaLJLWidth: 619,
              areaJLQWidth: 1056,
              areaZJQWidth: 2000,
              areaYSWidth: 1298,
              areaTBPWidth: 705,
              areaRQ1Width: 1297,
              areaLQ_RQWidth: 1661,
              areaLQ_1Width: 1661,
              areaLQ_2Width: 800,
              areaRQ2Width: 800,
            };
          }else if(pageId === "TBP"){// 脱丙烷
             imgSizeObj =  {
                imageWidth: 7348,
                areaLJLWidth: 851,
                areaJLQWidth: 1452,
                areaZJQWidth: 2749,
                areaYSWidth: 1784,
                areaTBPWidth: 970,
                areaRQ1Width: 1783,
                areaLQ_RQWidth: 2284,
                areaLQ_1Width: 2284,
                areaLQ_2Width: 1101,
                areaRQ2Width: 1101,
              };
          }else if(pageId === "LQ"){// 冷区
              imgSizeObj =  {
                imageWidth: 7348,
                areaLJLWidth: 851,
                areaJLQWidth: 1452,
                areaZJQWidth: 2749,
                areaYSWidth: 1784,
                areaTBPWidth: 970,
                areaRQ1Width: 1783,
                areaLQ_RQWidth: 2284,
                areaLQ_1Width: 2284,
                areaLQ_2Width: 1101,
                areaRQ2Width: 1101,
              };
          } else if(pageId === "RQ"){// 热区
            imgSizeObj =  {
                imageWidth: 6548,
                areaLJLWidth: 759,
                areaJLQWidth: 1295,
                areaZJQWidth: 2451,
                areaYSWidth: 1591,
                areaTBPWidth: 866,
                areaRQ1Width: 1950,
                areaLQ_RQWidth: 2037,
                areaLQ_1Width: 2037,
                areaLQ_2Width: 982,
                areaRQ2Width: 982,
              };
          }

          this.$store.dispatch('settings/changeSetting', {
            key: 'pfdPageImgeSize',
            value: imgSizeObj
          });
      }
    },
    destroyed() {
      dragData = {
        left:"",
        top: "",
      };
    },
    methods: {
      // 图片缩放函数
      resizeImage(type){
        if(type === -1){ //缩小
          // 底图宽度
          this.imageWidth -= this.scaleNum;
          // 裂解炉宽度
          this.areaLJLWidth -= this.areaLJLScaleNum;
          // 急冷区宽度
          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;
          // 裂解炉宽度
          this.areaLJLWidth = +this.areaLJLWidth + +this.areaLJLScaleNum;
          // 急冷区宽度
          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;
        }
      },
      // 显示弹窗
      handleDialogVisible(num){
        // 防止拖拽时触发点击事件
        if(dragging === true){
          this.rhombusData = num;
          this.dialogTitle = num;
          getPfdmgrByCode(num).then(response => {
            let data = response.data;
            this.description = data.description;
            let h2o = data.h2o;
            if (h2o != "" && h2o != null) {
              this.tableData.push({ mole: "H2O", mw: "18.01" , value: h2o });
            }
            let hydrogen = data.hydrogen;
            if (hydrogen != "" && hydrogen != null) {
              this.tableData.push({ mole: "HYDROGEN", mw: "2.02" , value: hydrogen });
            }
            let co = data.co;
            if (co != "" && co != null) {
              this.tableData.push({ mole: "CO", mw: "28.01" , value: co });
            }
            let methane = data.methane;
            if (methane != "" && methane != null) {
              this.tableData.push({ mole: "METHANE", mw: "16.04" , value: methane });
            }
            let acetyln = data.acetyln;
            if (acetyln != "" && acetyln != null) {
              this.tableData.push({ mole: "ACETYLN", mw: "26.04" , value: acetyln });
            }
            let ethylene = data.ethylene;
            if (ethylene != "" && ethylene != null) {
              this.tableData.push({ mole: "ETHYLENE", mw: "28.05" , value: ethylene });
            }
            let ethane = data.ethane;
            if (ethane != "" && ethane != null) {
              this.tableData.push({ mole: "ETHANE", mw: "30.07" , value: ethane });
            }
            let macetyln = data.macetyln;
            if (macetyln != "" && macetyln != null) {
              this.tableData.push({ mole: "MACETYLN", mw: "40.06" , value: macetyln });
            }
            let propdien = data.propdien;
            if (propdien != "" && propdien != null) {
              this.tableData.push({ mole: "PROPDIEN", mw: "40.06" , value: propdien });
            }
            let propylen = data.propylen;
            if (propylen != "" && propylen != null) {
              this.tableData.push({ mole: "PROPYLEN", mw: "42.08" , value: propylen });
            }
            let propane = data.propane;
            if (propane != "" && propane != null) {
              this.tableData.push({ mole: "PROPANE", mw: "44.10" , value: propane });
            }
            let butd13 = data.butd13;
            if (butd13 != "" && butd13 != null) {
              this.tableData.push({ mole: "13BUTD", mw: "54.09" , value: butd13 });
            }
            let butene1 = data.butene1;
            if (butene1 != "" && butene1 != null) {
              this.tableData.push({ mole: "1BUTENE", mw: "56.11" , value: butene1 });
            }
            let ibte = data.ibte;
            if (ibte != "" && ibte != null) {
              this.tableData.push({ mole: "IBTE", mw: "56.11" , value: ibte });
            }
            let c2butene = data.c2butene;
            if (c2butene != "" && c2butene != null) {
              this.tableData.push({ mole: "C2BUTENE", mw: "56.11" , value: c2butene });
            }
            let t2butene = data.t2butene;
            if (t2butene != "" && t2butene != null) {
              this.tableData.push({ mole: "T2BUTENE", mw: "56.11" , value: t2butene });
            }
            let ibutane = data.ibutane;
            if (ibutane != "" && ibutane != null) {
              this.tableData.push({ mole: "IBUTANE", mw: "58.12" , value: ibutane });
            }
            let butane = data.butane;
            if (butane != "" && butane != null) {
              this.tableData.push({ mole: "BUTANE", mw: "56.11" , value: butane });
            }
            let cpd13 = data.cpd13;
            if (cpd13 != "" && cpd13 != null) {
              this.tableData.push({ mole: "13CPD", mw: "66.10" , value: cpd13 });
            }
            let isoprene = data.isoprene;
            if (isoprene != "" && isoprene != null) {
              this.tableData.push({ mole: "ISOPRENE", mw: "68.12" , value: isoprene });
            }
            let c13pnd = data.c13pnd;
            if (c13pnd != "" && c13pnd != null) {
              this.tableData.push({ mole: "C13PND", mw: "68.12" , value: c13pnd });
            }
            let pentene1 = data.pentene1;
            if (pentene1 != "" && pentene1 != null) {
              this.tableData.push({ mole: "1PENTENE", mw: "70.14" , value: pentene1 });
            }
            let ipentane = data.ipentane;
            if (ipentane != "" && ipentane != null) {
              this.tableData.push({ mole: "IPENTANE", mw: "72.15" , value: ipentane });
            }
            let pentane = data.pentane;
            if (pentane != "" && pentane != null) {
              this.tableData.push({ mole: "PENTANE", mw: "72.15" , value: pentane });
            }
            let hexene1 = data.hexene1;
            if (hexene1 != "" && hexene1 != null) {
              this.tableData.push({ mole: "1HEXENE", mw: "84.16" , value: hexene1 });
            }
            let benzene = data.benzene;
            if (benzene != "" && benzene != null) {
              this.tableData.push({ mole: "BENZENE", mw: "78.11" , value: benzene });
            }
            let toluene = data.toluene;
            if (toluene != "" && toluene != null) {
              this.tableData.push({ mole: "TOLUENE", mw: "92.14" , value: toluene });
            }
            let oxylene = data.oxylene;
            if (oxylene != "" && oxylene != null) {
              this.tableData.push({ mole: "OXYLENE", mw: "106.17" , value: oxylene });
            }
            let c9200c = data.c9200c;
            if (c9200c != "" && c9200c != null) {
              this.tableData.push({ mole: "C9-200C", mw: "121.00" , value: c9200c });
            }
            let fuelOil = data.fuelOil;
            if (fuelOil != "" && fuelOil != null) {
              this.tableData.push({ mole: "FUEL OIL", mw: "167.00" , value: fuelOil });
            }
            let co2 = data.co2;
            if (co2 != "" && co2 != null) {
              this.tableData.push({ mole: "CO2", mw: "44.01" , value: co2 });
            }
            let h2s = data.h2s;
            if (h2s != "" && h2s != null) {
              this.tableData.push({ mole: "H2S", mw: "34.08" , value: h2s });
            }
            let nbp25 = data.nbp25;
            if (nbp25 != "" && nbp25 != null) {
              this.tableData.push({ mole: "NBP 25", mw: "67.45" , value: nbp25 });
            }
            let nbp58 = data.nbp58;
            if (nbp58 != "" && nbp58 != null) {
              this.tableData.push({ mole: "NBP 58", mw: "81.66" , value: nbp58 });
            }
            let nbp72 = data.nbp72;
            if (nbp72 != "" && nbp72 != null) {
              this.tableData.push({ mole: "NBP 72", mw: "88.02" , value: nbp72 });
            }
            let nbp86 = data.nbp86;
            if (nbp86 != "" && nbp86 != null) {
              this.tableData.push({ mole: "NBP 86", mw: "94.56" , value: nbp86 });
            }
            let nbp100 = data.nbp100;
            if (nbp100 != "" && nbp100 != null) {
              this.tableData.push({ mole: "NBP 100", mw: "101.65" , value: nbp100 });
            }
            let nbp114 = data.nbp114;
            if (nbp114 != "" && nbp114 != null) {
              this.tableData.push({ mole: "NBP 114", mw: "109.11" , value: nbp114 });
            }
            let nbp128 = data.nbp128;
            if (nbp128 != "" && nbp128 != null) {
              this.tableData.push({ mole: "NBP 128", mw: "116.95" , value: nbp128 });
            }
            let nbp141 = data.nbp141;
            if (nbp141 != "" && nbp141 != null) {
              this.tableData.push({ mole: "NBP 141", mw: "125.27" , value: nbp141 });
            }
            let nbp155 = data.nbp155;
            if (nbp155 != "" && nbp155 != null) {
              this.tableData.push({ mole: "NBP 155", mw: "134.11" , value: nbp155 });
            }
            let nbp169 = data.nbp169;
            if (nbp169 != "" && nbp169 != null) {
              this.tableData.push({ mole: "NBP 169", mw: "143.60" , value: nbp169 });
            }
            let nbp183 = data.nbp183;
            if (nbp183 != "" && nbp183 != null) {
              this.tableData.push({ mole: "NBP 183", mw: "153.71" , value: nbp183 });
            }
            let nbp199 = data.nbp199;
            if (nbp199 != "" && nbp199 != null) {
              this.tableData.push({ mole: "NBP 199", mw: "165.45" , value: nbp199 });
            }
            let nbp207 = data.nbp207;
            if (nbp207 != "" && nbp207 != null) {
              this.tableData.push({ mole: "NBP 207", mw: "172.35" , value: nbp207 });
            }
            let nbp222 = data.nbp222;
            if (nbp222 != "" && nbp222 != null) {
              this.tableData.push({ mole: "NBP 222", mw: "184.49" , value: nbp222 });
            }
            let nbp236 = data.nbp236;
            if (nbp236 != "" && nbp236 != null) {
              this.tableData.push({ mole: "NBP 236", mw: "197.12" , value: nbp236 });
            }
            let nbp249 = data.nbp249;
            if (nbp249 != "" && nbp249 != null) {
              this.tableData.push({ mole: "NBP 249", mw: "209.30" , value: nbp249 });
            }
            let totalMolarFlowrate = data.totalMolarFlowrate;
            if (totalMolarFlowrate != "" && totalMolarFlowrate != null) {
              this.tableData.push({ mole: "Total Molar Flowrate", mw: "kgmol/hr" , value: totalMolarFlowrate });
            }
            let totalMassFlowrate = data.totalMassFlowrate;
            if (totalMassFlowrate != "" && totalMassFlowrate != null) {
              this.tableData.push({ mole: "Total Mass Flowrate", mw: "kg/hr" , value: totalMassFlowrate });
            }
            let totalMolecularWeight = data.totalMolecularWeight;
            if (totalMolecularWeight != "" && totalMolecularWeight != null) {
              this.tableData.push({ mole: "Total Molecular Weight", mw: "" , value: totalMolecularWeight });
            }
            let temperature = data.temperature;
            if (temperature != "" && temperature != null) {
              this.tableData.push({ mole: "Temperature", mw: "ºC" , value: temperature });
            }
            let pressure = data.pressure;
            if (pressure != "" && pressure != null) {
              this.tableData.push({ mole: "Pressure", mw: "kg/cm2 (a)" , value: pressure });
            }
            let vaporMassFlowrate = data.vaporMassFlowrate;
            if (vaporMassFlowrate != "" && vaporMassFlowrate != null) {
              this.tableData.push({ mole: "Vapor Mass Flowrate", mw: "kg/hr" , value: vaporMassFlowrate });
            }
            let vaporMolecularWeight = data.vaporMolecularWeight;
            if (vaporMolecularWeight != "" && vaporMolecularWeight != null) {
              this.tableData.push({ mole: "Vapor Molecular Weight", mw: "" , value: vaporMolecularWeight });
            }
            let vaporDensityAct = data.vaporDensityAct;
            if (vaporDensityAct != "" && vaporDensityAct != null) {
              this.tableData.push({ mole: "Vapor Density, Act", mw: "kg/m³" , value: vaporDensityAct });
            }
            let vaporZ = data.vaporZ;
            if (vaporZ != "" && vaporZ != null) {
              this.tableData.push({ mole: "Vapor Z", mw: "" , value: vaporZ });
            }
            let vaporActVolFlow = data.vaporActVolFlow;
            if (vaporActVolFlow != "" && vaporActVolFlow != null) {
              this.tableData.push({ mole: "Vapor Act Vol Flow", mw: "m³/hr" , value: vaporActVolFlow });
            }
            let vaporHtCapacity = data.vaporHtCapacity;
            if (vaporHtCapacity != "" && vaporHtCapacity != null) {
              this.tableData.push({ mole: "Vapor Ht Capacity", mw: "kcal/kg-ºC" , value: vaporHtCapacity });
            }
            let vaporViscosity = data.vaporViscosity;
            if (vaporViscosity != "" && vaporViscosity != null) {
              this.tableData.push({ mole: "Vapor Viscosity", mw: "Cp" , value: vaporViscosity });
            }
            let liquidMassFlowrate = data.liquidMassFlowrate;
            if (liquidMassFlowrate != "" && liquidMassFlowrate != null) {
              this.tableData.push({ mole: "Liquid Mass Flowrate", mw: "kg/hr" , value: liquidMassFlowrate });
            }
            let liquidMolecularWeight = data.liquidMolecularWeight;
            if (liquidMolecularWeight != "" && liquidMolecularWeight != null) {
              this.tableData.push({ mole: "Liquid Molecular Weight", mw: "" , value: liquidMolecularWeight });
            }
            let liquidDensityAct = data.liquidDensityAct;
            if (liquidDensityAct != "" && liquidDensityAct != null) {
              this.tableData.push({ mole: "Liquid Density, Act", mw: "kg/m³" , value: liquidDensityAct });
            }
            let liquidActVolFlow = data.liquidActVolFlow;
            if (liquidActVolFlow != "" && liquidActVolFlow != null) {
              this.tableData.push({ mole: "Liquid Act Vol Flow", mw: "m³/hr" , value: liquidActVolFlow });
            }
            let liquidHtCapacity = data.liquidHtCapacity;
            if (liquidHtCapacity != "" && liquidHtCapacity != null) {
              this.tableData.push({ mole: "Liquid Ht Capacity", mw: "kcal/kg-ºC" , value: liquidHtCapacity });
            }
            let liquidViscosity = data.liquidViscosity;
            if (liquidViscosity != "" && liquidViscosity != null) {
              this.tableData.push({ mole: "Liquid Viscosity", mw: "Cp" , value: liquidViscosity });
            }
            let liquidSurfTension = data.liquidSurfTension;
            if (liquidSurfTension != "" && liquidSurfTension != null) {
              this.tableData.push({ mole: "Liquid Surf Tension", mw: "dyne/cm" , value: liquidSurfTension });
            }
          });
          this.dialogVisible = true;
        }else{
          this.dialogVisible = false;
        }

      },
      // 弹窗方法
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 跳转页面
      handleToPage(id){
        // 记录图片大小
        let imgSizeObj =  {
              imageWidth:this.imageWidth,
              areaLJLWidth: this.areaLJLWidth,
              areaJLQWidth: this.areaJLQWidth,
              areaZJQWidth: this.areaZJQWidth,
              areaYSWidth: this.areaYSWidth,
              areaTBPWidth: this.areaTBPWidth,
              areaRQ1Width: this.areaRQ1Width,
              areaLQ_RQWidth: this.areaLQ_RQWidth,
              areaLQ_1Width: this.areaLQ_1Width,
              areaLQ_2Width: this.areaLQ_2Width,
              areaRQ2Width: this.areaRQ2Width,
            }

            this.$store.dispatch('settings/changeSetting', {
              key: 'pfdPageImgeSize',
              value: imgSizeObj
            });
        //带参数跳转
        this.$router.push({ path: '/pfd/jlq' });
      },
      // 跳转c2c3页面
      handleToC2C3Page(){
        // 记录图片大小
        let imgSizeObj =  {
              imageWidth:this.imageWidth,
              areaLJLWidth: this.areaLJLWidth,
              areaJLQWidth: this.areaJLQWidth,
              areaZJQWidth: this.areaZJQWidth,
              areaYSWidth: this.areaYSWidth,
              areaTBPWidth: this.areaTBPWidth,
              areaRQ1Width: this.areaRQ1Width,
              areaLQ_RQWidth: this.areaLQ_RQWidth,
              areaLQ_1Width: this.areaLQ_1Width,
              areaLQ_2Width: this.areaLQ_2Width,
              areaRQ2Width: this.areaRQ2Width,
            }

            this.$store.dispatch('settings/changeSetting', {
              key: 'pfdPageImgeSize',
              value: imgSizeObj
            });
        this.$router.push({ path: '/pfd/c2c3' });
      }

    },

};
</script>

<style scoped>
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%;
}
.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: 1898px;
  height: 100%;
  width: 2976px;
  z-index: 20;
  /* border: 1px solid blue; */
}
.area-ZJQ{
  position: absolute;
  top: 0;
  left: 4900px;
  height: 100%;
  width: 5740px;
  z-index: 20;
  /* 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;
  top: 0;
  left: 10610px;
  height: 100%;
  width: 4931px;
  z-index: 20;
  /* 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%;
  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;
  /* transform: translate(-50%, 0); */
}


/* 菱形点击区域 */
.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.9%;
  height: 0.8%;
}
.LJL-rhombus-1{
  top: 63%;
  left: 58.2%;
}
.JLQ-rhombus{
  width: 1.3%;
  height: 0.8%;
}
.JLQ-rhombus-1{
  top: 35%;
  left: 4.3%;
}
.JLQ-rhombus-2{
  top: 35.86%;
  left: 6.56%;
}
.JLQ-rhombus-3{
  top: 39.7%;
  left: 11.35%;
}
.JLQ-rhombus-4{
  top: 39.7%;
  left: 13.2%;
}
.JLQ-rhombus-5{
  top: 39.7%;
  left: 15.16%;
}
.JLQ-rhombus-6{
  top: 39.7%;
  left: 19.4%;
}
.JLQ-rhombus-7{
  top: 28.8%;
  left: 19.4%;
}
.JLQ-rhombus-8{
  top: 32.3%;
  left: 17.3%;
}
.JLQ-rhombus-9{
  top: 52.2%;
  left: 11.35%;
}
.JLQ-rhombus-10{
  top: 52.56%;
  left: 23.78%;
}
.JLQ-rhombus-11{
  top: 57.16%;
  left: 13.1%;
}

.JLQ-rhombus-12{
  top: 33.8%;
  left: 25.7%;
}
.JLQ-rhombus-13{
  top: 29.3%;
  left: 30.7%;
}
.JLQ-rhombus-14{
  top: 31.86%;
  left: 33.7%;
}
.JLQ-rhombus-15{
  top: 33.9%;
  left: 34.3%;
}
.JLQ-rhombus-16{
  top: 34.3%;
  left: 40.7%;
}
.JLQ-rhombus-17{
  top: 29.9%;
  left: 44.2%;
}
.JLQ-rhombus-18{
  top: 35.6%;
  left: 45.9%;
}
.JLQ-rhombus-19{
  top: 39.3%;
  left: 42.9%;
}
.JLQ-rhombus-20{
  top: 39.36%;
  left: 30.7%;
}
.JLQ-rhombus-21{
  top: 34.4%;
  left: 52.7%;
}
.JLQ-rhombus-22{
  top: 39.4%;
  left: 59.2%;
}
.JLQ-rhombus-23{
  top: 55.7%;
  left: 55.38%;
}
.JLQ-rhombus-24{
  top: 53.9%;
  left: 59.2%;
}
.JLQ-rhombus-25{
  top: 63.1%;
  left: 59.2%;
}
.JLQ-rhombus-26{
  top: 67.3%;
  left: 88%;
}
.JLQ-rhombus-27{
  top: 43.6%;
  left: 87.9%;
}
.JLQ-rhombus-28{
  top: 25.4%;
  left: 87.4%;
}

.YS-rhombus{
  width: 1.2%;
  height: 1.6%;
}
.YS-rhombus-1{
  top: 75.4%;
  left: 6.68%;
}
.YS-rhombus-2{
  top: 75.3%;
  left: 15.6%;
}
.YS-rhombus-3{
  top: 86.28%;
  left: 12.36%;
}
.YS-rhombus-4{
  top: 86.4%;
  left: 15.5%;
}
.YS-rhombus-5{
  top: 75.38%;
  left: 24.4%;
}
.YS-rhombus-6{
  top: 75.3%;
  left: 33.3%;
}
.YS-rhombus-7{
  top: 78.3%;
  left: 52.76%;
}
.YS-rhombus-8{
  top: 77.6%;
  left: 61.28%;
}
.YS-rhombus-9{
  top: 86.5%;
  left: 59.7%;
}
.YS-rhombus-10{
  top: 75%;
  left: 84.94%;
}
.YS-rhombus-11{
  top: 76.8%;
  left: 84.94%;
}
.TBP-rhombus{
  width: 1.9%;
  height: 1.5%;
}
.TBP-rhombus-1{
  top: 58.3%;
  left: 4.9%;
}
.TBP-rhombus-2{
  top: 69.8%;
  left: 11%;
}
.TBP-rhombus-3{
  top: 66.48%;
  left: 20%;
}
.TBP-rhombus-4{
  top: 71.3%;
  left: 27.5%
}
.TBP-rhombus-5{
  top: 72.7%;
  left: 31.1%;
}
.TBP-rhombus-6{
  top: 58.4%;
  left: 30.9%;
}
.TBP-rhombus-7{
  top: 86.7%;
  left: 38.5%;
}
.TBP-rhombus-8{
  top: 97.4%;
  left: 49.6%;
}
.TBP-rhombus-9{
  top: 80.1%;
  left: 50.5%;
}
.TBP-rhombus-10{
  top: 84%;
  left: 62.3%;
}
.TBP-rhombus-11{
  top: 79.8%;
  left: 76.5%;
}

.TBP-rhombus-12{
  top: 51.5%;
  left: 65.4%;
}
.RQ1-rhombus{
  width: 1.1%;
  height: 1.9%;
}
.RQ1-rhombus-1{
  top: 17%;
  left: 49.3%;
}
.RQ1-rhombus-2{
  top: 13.68%;
  left: 56.18%;
}
.RQ1-rhombus-3{
  top: 35.4%;
  left: 56.2%;
}
.RQ1-rhombus-4{
  top: 50.15%;
  left: 94.5%;
}
.LQ1-rhombus{
  width: 0.9%;
  height: 1.3%;
}
.LQ1-rhombus-1{
  top: 27%;
  left: 7.17%;
}
.LQ1-rhombus-2{
  top: 29.8%;
  left: 17.88%;
}
.LQ1-rhombus-3{
  top: 35.7%;
  left: 19%;
}
.LQ1-rhombus-4{
  top: 35.7%;
  left: 20.9%;
}
.LQ1-rhombus-5{
  top: 38.1%;
  left: 17.9%;
}
.LQ1-rhombus-6{
  top: 51.4%;
  left: 10.6%;
}
.LQ1-rhombus-7{
  top: 49.5%;
  left: 21.05%;
}
.LQ1-rhombus-8{
  top: 54.6%;
  left: 27.4%;
}
.LQ1-rhombus-9{
  top: 39.1%;
  left: 30%;
}
.LQ1-rhombus-10{
  top: 53.26%;
  left: 37.74%;
}
.LQ1-rhombus-11{
  top: 53.3%;
  left: 40.3%;
}
.LQ1-rhombus-12{
  top: 52.8%;
  left: 41%;
}
.LQ1-rhombus-13{
  top: 53.2%;
  left: 42.9%;
}
.LQ1-rhombus-14{
  top: 52.8%;
  left: 43.5%;
}
.LQ1-rhombus-15{
  top: 55.2%;
  left: 52.89%;
}
.LQ1-rhombus-16{
  top: 38.2%;
  left: 52%;
}
.LQ1-rhombus-17{
  top: 36.56%;
  left: 53%;
}
.LQ1-rhombus-18{
  top: 30.2%;
  left: 29.05%;
}
.LQ1-rhombus-19{
  top: 20.7%;
  left: 46.5%;
}
.LQ1-rhombus-20{
  top: 15.5%;
  left: 50.5%;
}
.LQ1-rhombus-21{
  top: 14.5%;
  left: 51.6%;
}
.LQ1-rhombus-22{
  top: 32.67%;
  left: 59.49%;
}
.LQ1-rhombus-23{
  top: 31.15%;
  left: 59.93%;
}
.LQ1-rhombus-24{
  top: 29.1%;
  left: 65.4%;
}
.LQ1-rhombus-25{
  top: 30.4%;
  left: 72.4%;
}
.LQ1-rhombus-26{
  top: 18.1%;
  left: 76.2%;
}
.LQ1-rhombus-27{
  top: 43.3%;
  left: 65.4%;
}
.LQ1-rhombus-28{
  top: 43.3%;
  left: 70.3%;
}

.LQ1-rhombus-29{
  top: 43.3%;
  left: 79.2%;
}
.LQ1-rhombus-30{
  top: 53.6%;
  left: 71.65%;
}
.LQ1-rhombus-31{
  top: 58.5%;
  left: 83.56%;
}
.LQ1-rhombus-32{
  top: 61.06%;
  left: 80.86%;
}
.LQ1-rhombus-33{
  top: 68.66%;
  left: 65.6%;
}
.LQ1-rhombus-34{
  top: 72.56%;
  left: 68.05%;
}
.LQ1-rhombus-35{
  top: 77.46%;
  left: 60.66%;
}
.LQ1-rhombus-36{
  top: 80.2%;
  left: 60.7%;
}
.LQ1-rhombus-37{
  top: 85.7%;
  left: 68.26%;
}
.LQ1-rhombus-38{
  top: 81.4%;
  left: 75.4%;
}
.LQ1-rhombus-39{
  top: 81.4%;
  left: 78.3%;
}
.LQ1-rhombus-40{
  top: 92.96%;
  left: 68.3%;
}
.LQ1-rhombus-41{
  top: 95.2%;
  left: 65.6%;
}
.LQ1-rhombus-42{
  top: 90%;
  left: 45.5%;
}
.LQ1-rhombus-43{
  top: 90.2%;
  left: 8.5%;
}
.LQ1-rhombus-44{
  top: 67.8%;
  left: 45.5%;
}
.LQ1-rhombus-45{
  top: 76.78%;
  left: 49.86%;
}
.LQ1-rhombus-46{
  top: 76.87%;
  left: 85.2%;
}

.LQ1-rhombus-47{
  top: 80.06%;
  left: 85.16%;
}
.LQ1-rhombus-48{
  top: 78.5%;
  left: 86.36%;
}
.LQ1-rhombus-49{
  top: 74.71%;
  left: 86.4%;
}
.LQ2-rhombus{
  width: 1.8%;
  height: 2.2%;
}
.LQ2-rhombus-1{
  top: 4.8%;
  left: 31.4%;
}
.LQ2-rhombus-2{
  top: 10.7%;
  left: 34%;
}
.RQ2-rhombus{
  width: 1.6%;
  height: 1.9%;
}
.RQ2-rhombus-1{
  top: 18.5%;
  left: 53.2%;
}
.RQ2-rhombus-2{
  top: 33.2%;
  left: 53.1%;
}
.RQ2-rhombus-3{
  top: 75.6%;
  left: 49.46%;
}
.RQ2-rhombus-4{
  top: 82.1%;
  left: 44.4%;
}
.RQ2-rhombus-5{
  top: 18.3%;
  left: 71%;
}
.RQ2-rhombus-6{
  top: 18.3%;
  left: 82%;
}
.RQ2-rhombus-7{
  top: 40.2%;
  left: 78.7%;
}

/* 方形区域 */
.JLQ-rectangle-1{
  position: absolute;
  top: 33.3%;
  left: 19.1%;
  width: 2%;
  height: .7%;
  z-index: 20;
  font-size: 0;
  cursor: pointer;
}
.JLQ-rectangle-2{
  position: absolute;
  top: 36%;
  left: 36.7%;
  width: 3%;
  height: .9%;
  z-index: 20;
  font-size: 0;
  cursor: pointer;
}

/* c3 c2 */
.TBP-c3c2{
  width: 2%;
  height: 1%;
  position: absolute;
  /* border: 1px solid red; */
  font-size: 0;
  cursor: pointer;
}
.TBP-c3c2-1{
  top: 64.3%;
  left: 39.5%;
}
.TBP-c3c2-2{
  top: 64.3%;
  left: 46.5%;
}

.LQ1-c3c2{
  width: 1%;
  height: 1%;
  position: absolute;
  /* border: 1px solid red; */
  font-size: 0;
  cursor: pointer;
}
.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: 88.6%;
  left: 13%;
}
.LQ2-c3c2{
  width: 1.5%;
  height: 1.5%;
  position: absolute;
  /* border: 1px solid red; */
  font-size: 0;
  cursor: pointer;
}
.LQ2-c3c2-1{
  top: 2.56%;
  left: 30%;
}
.LQ2-c3c2-2{
  top: 8.5%;
  left: 30.3%;
}
.LQ2-c3c2-3{
  top: 13%;
  left: 39%;
}
</style>



