PFD

- 弹框样式优化
- C2C3流程图菱形节点数据查询

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

@@ -45,14 +45,19 @@
     </div>
 
     <el-dialog
-      title="提示"
+      :title="dialogTitle"
       :visible.sync="dialogVisible"
-      width="30%"
+      width="40%"
       :before-close="handleClose">
-      <span>{{ rhombusData }}</span>
+      <!--<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>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        <el-button @click="dialogVisible = false">返 回</el-button>
       </span>
     </el-dialog>
   </div>
@@ -63,9 +68,16 @@
 // 拖拽是否开启
 let dragging = false;
 import throttle from "@/utils/throttle";
+import { getPfdmgrByCode } from "@/api/monitor/pfdmgr";
+
 export default {
-    data() {
-        return {
+  data() {
+    return {
+            description: null,
+            tableData: [],
+
+            dialogVisible: false,
+            dialogTitle:"",
             dialogVisible: false,
             // 缩放比例
             scaleNum: 200,
@@ -141,6 +153,279 @@ export default {
         // 防止拖拽时触发点击事件
         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;

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

@@ -207,8 +207,7 @@
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
-      width="40%"
-      :before-close="handleClose">
+      width="40%">
       <!--<span>{{ rhombusData }}</span>-->
       <div style="margin-bottom: 20px;"><i><u>Description:</u></i> {{ description }}</div>
       <el-table :data="tableData" style="width: 100%">
@@ -217,8 +216,7 @@
         <el-table-column prop="value" label=""></el-table-column>
       </el-table>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        <el-button @click="dialogVisible = false">返 回</el-button>
       </span>
     </el-dialog>
   </div>