<template>
  <div class="scorll">
    <!-- 缩放按钮 -->
    <div class="resizeBox">
      <p >当前宽度:{{ imageWidth }}px</p>
      <i class="el-icon-zoom-out" @click="resizeImage(-1)"></i>
      <i class="el-icon-zoom-in" @click="resizeImage(1)"></i>
    </div>
    <!-- 拖拽移动 -->
    <div class="abutton">
      <div ref="firstDom" v-move class="mode">
        <!-- 点击区域 -->
        <div class="pfdDivBox">
          <!-- 底图 -->
          <img src="../../../assets/pfdImg/indexImg/other.jpg" alt="Responsive image" :style="imageStyle" class="indexImg" ref="indexImg">

          <!-- 菱形点击区域 --展示弹窗 -->
          <div class="rhombus JLQ-rhombus-1" @click="handleDialogVisible('6950')" ref-data="6950">6950</div>
          <div class="rhombus JLQ-rhombus-2" @click="handleDialogVisible('6805')" ref-data="6805">6805</div>
          <div class="rhombus JLQ-rhombus-3" @click="handleDialogVisible('6785')" ref-data="6785">6785</div>
          <div class="rhombus JLQ-rhombus-4" @click="handleDialogVisible('6851')" ref-data="6851">6851</div>
          <div class="rhombus JLQ-rhombus-5" @click="handleDialogVisible('6773')" ref-data="6773">6773</div>
          <div class="rhombus JLQ-rhombus-6" @click="handleDialogVisible('6958')" ref-data="6958">6958</div>
          <div class="rhombus JLQ-rhombus-7" @click="handleDialogVisible('6600')" ref-data="6600">6600</div>
          <div class="rhombus JLQ-rhombus-8" @click="handleDialogVisible('6705')" ref-data="6705">6705</div>
          <div class="rhombus JLQ-rhombus-9" @click="handleDialogVisible('6686')" ref-data="6686">6686</div>
          <div class="rhombus JLQ-rhombus-10" @click="handleDialogVisible('6685')" ref-data="6685">6685</div>
          <div class="rhombus JLQ-rhombus-11" @click="handleDialogVisible('6751')" ref-data="6751">6751</div>
          <div class="rhombus JLQ-rhombus-12" @click="handleDialogVisible('6680')" ref-data="6680">6680</div>
          <div class="rhombus JLQ-rhombus-13" @click="handleDialogVisible('6673')" ref-data="6673">6673</div>

          <div class="rhombus JLQ-rhombus-14" @click="handleDialogVisible('6488')" ref-data="6488">6488</div>
          <div class="rhombus JLQ-rhombus-15" @click="handleDialogVisible('6488')" ref-data="6488">6488</div>
          <div class="rhombus JLQ-rhombus-16" @click="handleDialogVisible('6397')" ref-data="6397">6397</div>
          <div class="rhombus JLQ-rhombus-17" @click="handleDialogVisible('6450')" ref-data="6450">6450</div>
          <div class="rhombus JLQ-rhombus-18" @click="handleDialogVisible('6300')" ref-data="6300">6300</div>
          <div class="rhombus JLQ-rhombus-19" @click="handleDialogVisible('6100')" ref-data="6100">6100</div>
          <div class="rhombus JLQ-rhombus-20" @click="handleDialogVisible('6350')" ref-data="6350">6350</div>
          <div class="rhombus JLQ-rhombus-21" @click="handleDialogVisible('6297')" ref-data="6297">6297</div>
          <div class="rhombus JLQ-rhombus-22" @click="handleDialogVisible('6200')" ref-data="6200">6200</div>
          <div class="rhombus JLQ-rhombus-23" @click="handleDialogVisible('6250')" ref-data="6250">6250</div>
          <div class="rhombus JLQ-rhombus-24" @click="handleDialogVisible('6197')" ref-data="6197">6197</div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="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:"",
            dialogVisible: false,
            // 缩放比例
            scaleNum: 200,
            // 底图初始化宽度
            imageWidth:948,

            // 菱形点击后传递的数据
            rhombusData: 0,

        };
    },
    mounted () {

    },
    computed: {
      imageStyle() {
        return {
          width: `${this.imageWidth}px`, // 动态设置图片宽度
        };
      },
    },
    components: {},
    //在vue自定义指令中添加该指令
    directives: {
      move(el) {

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

        // 防止放大缩小时图片位置问题
        if(dragData.left != "" || dragData.top != ""){
          el.style.left =  dragData.left + "px";
          el.style.top =  dragData.top + "px";
        }else{
          el.style.left =  "50%";
          el.style.top =  "100px";
        }

        el.onmousedown = function (e) {

          // 阻止点击事件冒泡
          e.preventDefault();
          //获取鼠标点击处分别与div左边和div上边的距离：鼠标位置-div位置
          let startX = e.clientX - el.offsetLeft,
            startY = e.clientY - el.offsetTop;

          throttle(
            (document.onmousemove = function (ev) {
              dragging = false;
              // 阻止点击事件冒泡
              ev.preventDefault();
              let event = ev || window.event;
              let moveX = event.clientX - startX,
                moveY = event.clientY - startY;
              // el.style.left = moveX + "px";
              // el.style.top = moveY + "px";
              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() {},
    methods: {
      // 图片缩放函数
      resizeImage(type){

        if(type === -1){ //缩小
          // 底图宽度
          this.imageWidth -= this.scaleNum;

        }else if(type === 1){ //放大
           // 底图宽度
          this.imageWidth += this.scaleNum;

        }
      },
      // 显示弹窗
      handleDialogVisible(num){
        // 防止拖拽时触发点击事件
        if(dragging === true){
          this.rhombusData = num;
          this.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(_ => {});
      }

    },

};
</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%;
}
/* 放大缩小按钮 */
.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;
  width: 2%;
  height: 2%;
}
.JLQ-rhombus-1{
  top: 9.8%;
  left: 19.25%;
}
.JLQ-rhombus-2{
  top: 7%;
  left: 45.7%;
}
.JLQ-rhombus-3{
  top: 10.5%;
  left: 83.5%;
}
.JLQ-rhombus-4{
  top: 17.79%;
  left: 51.85%;
}
.JLQ-rhombus-5{
  top: 16.79%;
  left: 86.1%;
}
.JLQ-rhombus-6{
  top: 20.79%;
  left: 71.45%;
}
.JLQ-rhombus-7{
  top: 24.85%;
  left: 6.65%;
}
.JLQ-rhombus-8{
  top: 29.05%;
  left: 48.8%;
}
.JLQ-rhombus-9{
  top: 32.58%;
  left: 58.5%;
}
.JLQ-rhombus-10{
  top: 32.58%;
  left: 81.1%;
}
.JLQ-rhombus-11{
  top: 39.64%;
  left: 51.9%;
}
.JLQ-rhombus-12{
  top: 38.7%;
  left: 64.3%;
}

.JLQ-rhombus-13{
  top: 38.9%;
  left: 86.2%;
}
.JLQ-rhombus-14{
  top: 63.9%;
  left: 21.2%;
}
.JLQ-rhombus-15{
  top: 57.7%;
  left: 84.8%;
}
.JLQ-rhombus-16{
  top: 63.8%;
  left: 85.49%;
}
.JLQ-rhombus-17{
  top: 65.5%;
  left: 88.9666%;
}
.JLQ-rhombus-18{
  top: 72.56%;
  left: 61%;
}
.JLQ-rhombus-19{
  top: 80.8%;
  left: 14.78%;
}
.JLQ-rhombus-20{
  top: 80.1%;
  left: 72.1%;
}
.JLQ-rhombus-21{
  top: 78%;
  left: 77%;
}
.JLQ-rhombus-22{
  top: 88.96%;
  left: 65.7%;
}
.JLQ-rhombus-23{
  top: 95.66%;
  left: 65.6%;
}
.JLQ-rhombus-24{
  top: 94.1%;
  left: 70.6%;
}

</style>



