李扬

ui/src/views/monitor/elec/elecindex.vue

@@ -30,15 +30,20 @@
           <div
             class="react-right ml-4"
             style="width: 3.25rem; text-align: left;background-color: #0f1325;"
+            @click="changeDashboard(1)"
           >
             <span class="react-before"></span>
-            <span class="text"></span>
+            <span class="text">数据监控</span>
           </div>
-          <div class="react-right ml-3" style="background-color: #0f1325;" >
+          <div class="react-right ml-3" style="background-color: #0f1325;"
+               @click="changeDashboard(2)">
             <span class="text colorBlue"></span>
+            <span class="text">蒸汽平衡</span>
           </div>
-          <div class="react-right ml-3" style="background-color: #0f1325;" >
+          <div class="react-right ml-3" style="background-color: #0f1325;"
+               @click="changeDashboard(3)">
             <span class="text colorBlue"></span>
+            <span class="text">全厂在线分析仪表</span>
           </div>
         </div>
         <div style="width: 40%" class="d-flex">
@@ -57,7 +62,7 @@
         </div>
       </div>
 
-      <div class="body-box">
+      <div class="body-box" v-if="dashboard === 1">
         <!-- 第三行数据 -->
         <div class="content-box">
           <div>
@@ -103,6 +108,18 @@
           </div>
         </div>
       </div>
+      <div class="body-box" v-if="dashboard === 2">
+        <div>
+          <front-elec-two></front-elec-two>
+        </div>
+
+      </div>
+      <div class="body-box" v-if="dashboard === 3">
+        <div>
+          <front-elec-three></front-elec-three>
+        </div>
+
+      </div>
     </div>
   </div>
 </template>
@@ -116,6 +133,8 @@ import center from "./center";
 import bottomLeft from "./bottomLeft";
 import bottomRight from "./bottomRight";
 import bottomRight1 from "./echart/bottom/bottomRightChart1"
+import frontElecTwo from "@/views/monitor/elec/frontElecTwo";
+import frontElecThree from "@/views/monitor/elec/frontElecThree";
 import '@/assets/styles/index.scss' // global css
 import '@/common/flexible.js';
 import dayjs from "dayjs";
@@ -140,7 +159,9 @@ export default {
     center,
     bottomLeft,
     bottomRight,
-    bottomRight1
+    bottomRight1,
+    frontElecTwo,
+    frontElecThree
   },
   mounted() {
     this.timer = setInterval(()=>{
@@ -195,6 +216,15 @@ export default {
         }, delays);
       };
     },
+    changeDashboard(val) {
+      if (val === 1) {
+        this.dashboard = 1
+      }else if (val === 2) {
+        this.dashboard = 2
+      }else if (val === 3) {
+        this.dashboard = 3
+      }
+    },
     openNewWindow() {
       let routeData = this.$router.resolve({
         path: "/elecDashboard",

ui/src/views/monitor/elec/frontElecThree.vue

@@ -0,0 +1,592 @@
+<template>
+  <div id="frontTwo">
+    <div class="bg-color-black">
+      <div class="content-box" style="display:flex;flex-direction:row">
+         <div style="width:500px; flex:0.9;margin-right: 20px;">
+           <el-table
+                ref="table"
+                max-height="1000px"
+                :data="tableData"
+                :span-method="objectSpanMethod"
+                border
+                style="  margin-top: 20px">
+                <el-table-column
+                  label="#1GTG"
+                  align="center"
+                >
+                <el-table-column
+                  prop="name"
+                  label="名称"
+                  >
+                </el-table-column>
+                <el-table-column
+                  prop="tNo"
+                  width="120"
+                  label="编号">
+                </el-table-column>
+                <el-table-column
+                  prop="value"
+                  width="120"
+                  label="数值">
+                </el-table-column>
+                </el-table-column>
+              </el-table>
+         </div>
+         <div style="width:500px;  flex:0.9;margin-right: 20px;">
+              <el-table
+                ref="table1"
+                max-height="1000px"
+                :data="tableData1"
+                :span-method="objectSpanMethod1"
+                border
+                style=" margin-top: 20px">
+                <el-table-column
+                  label="BP"
+                  align="center"
+                >
+                  <el-table-column
+                    prop="name"
+                    label="名称"
+                    >
+                  </el-table-column>
+                  <el-table-column
+                    prop="tNo"
+                    width="120"
+                    label="编号">
+                  </el-table-column>
+                  <el-table-column
+                    prop="value"
+                    width="120"
+                    label="数值">
+                  </el-table-column>
+                </el-table-column>
+              </el-table>
+            </div>
+         <div style="width:500px;  flex:0.9;">
+            <el-table
+              ref="table2"
+              max-height="1000px"
+              :data="tableData2"
+              :span-method="objectSpanMethod2"
+              border
+              style=" margin-top: 20px">
+              <el-table-column
+                label="HRSG"
+                align="center"
+              >
+                <el-table-column
+                  prop="group"
+                  label="组"
+                  width="50"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="名称"
+                  >
+                </el-table-column>
+                <el-table-column
+                  prop="tNo"
+                  width="120"
+                  label="编号">
+                </el-table-column>
+                <el-table-column
+                  prop="value"
+                  width="120"
+                  label="数值">
+                </el-table-column>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        spanArr: [], //声明一个数组
+        spanArr1:[],
+        spanArr2:[],
+        tableData: [{
+          name: '1GTG Gas Detector for  Accessory',
+          tNo: '45HA1',
+          value:'123'
+          },{
+            name: '1GTG Gas Detector for  Accessory',
+            tNo: '45HA2',
+            value:'1423'
+          },{
+            name: '1GTG Gas Detector for  Accessory',
+            tNo: '45HA3',
+            value:'234'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA5',
+            value:'123'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA6',
+            value:'75'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA7',
+            value:'123423'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA8',
+            value:'123423'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA9',
+            value:'2431'
+          },{
+            name: '1GTG Gas Detector for  Accessory',
+            tNo: '45HA1',
+            value:'123'
+          },{
+            name: '1GTG Gas Detector for  Accessory',
+            tNo: '45HA2',
+            value:'1423'
+          },{
+            name: '1GTG Gas Detector for  Accessory',
+            tNo: '45HA3',
+            value:'234'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA5',
+            value:'123'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA6',
+            value:'75'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA7',
+            value:'123423'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA8',
+            value:'123423'
+          },{
+            name: '1GTG Gas Detector for  DLN',
+            tNo: '45HA9',
+            value:'2431'
+          },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA7',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA8',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA9',
+          value:'2431'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA7',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA8',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA9',
+          value:'2431'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA7',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA8',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA9',
+          value:'2431'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA7',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA8',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA9',
+          value:'2431'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA7',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA8',
+          value:'123423'
+        },{
+          name: '1GTG Gas Detector for  DLN',
+          tNo: '45HA9',
+          value:'2431'
+        },
+        ],
+        tableData1: [{
+            name: 'CW-H2',
+            tNo: 'QT61001',
+            value:'456'
+            },{
+            name: 'CW-H2',
+            tNo: 'QT61002',
+            value:'4'
+          },{
+          name: 'CW-H2',
+          tNo: 'QT61003',
+          value:'456'
+        },{
+          name: 'CW-H2',
+          tNo: 'QT61004',
+          value:'63'
+        },{
+          name: 'CW-H2',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'CO2 Detector at CCR',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'HVAC Air Intake LEL Monitoring',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: ' CO leakage #1HRSG offgas system',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'NH3 leakage from YPC',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'CO2 Detector at CCR',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'HVAC Air Intake LEL Monitoring',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: ' CO leakage #1HRSG offgas system',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'NH3 leakage from YPC',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'CO2 Detector at CCR',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'HVAC Air Intake LEL Monitoring',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: ' CO leakage #1HRSG offgas system',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'NH3 leakage from YPC',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'CO2 Detector at CCR',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'HVAC Air Intake LEL Monitoring',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: ' CO leakage #1HRSG offgas system',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'NH3 leakage from YPC',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'CO2 Detector at CCR',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'HVAC Air Intake LEL Monitoring',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: ' CO leakage #1HRSG offgas system',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'NH3 leakage from YPC',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'CO2 Detector at CCR',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'HVAC Air Intake LEL Monitoring',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: ' CO leakage #1HRSG offgas system',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'NH3 leakage from YPC',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'CO2 Detector at CCR',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'HVAC Air Intake LEL Monitoring',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: ' CO leakage #1HRSG offgas system',
+          tNo: 'QT61005',
+          value:'234'
+        },{
+          name: 'NH3 leakage from YPC',
+          tNo: 'QT61005',
+          value:'234'
+        }],
+        tableData2: [{
+          group: '#1',
+          name: 'SC @ HRSG#1 HP DRUM BLOWDOWN',
+          tNo: 'AI82201',
+          value:'234'
+        },{
+          group: '#1',
+          name: 'SC @ HRSG#1 HP DRUM BLOWDOWN',
+          tNo: 'AI82201',
+          value:'234'
+        },{
+          group: '#1',
+          name: 'SC @ HRSG#1 HP DRUM BLOWDOWN',
+          tNo: 'AI82201',
+          value:'234'
+        },{
+          group: '#1',
+          name: 'SC @ HRSG#1 HP DRUM BLOWDOWN',
+          tNo: 'AI82201',
+          value:'234'
+        }],
+
+      };
+    },
+    name: "materialBalance",
+    components: {
+    },
+    mounted: function() {
+      this.tableDatas();  //加载数据就调用该方法
+      this.tableDatas1();  //加载数据就调用该方法
+      this.tableDatas2();  //加载数据就调用该方法
+      this.tableAuto();
+      this.tableAuto1();
+      this.tableAuto2();
+    },
+    methods: {
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {   //合并第一列
+          const _row = this.spanArr[rowIndex];
+          const _col = _row > 0 ? 1 : 0;
+          return {
+            rowspan: _row,
+            colspan: _col
+          };
+        }
+      },
+      objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {   //合并第一列
+          const _row = this.spanArr1[rowIndex];
+          const _col = _row > 0 ? 1 : 0;
+          return {
+            rowspan: _row,
+            colspan: _col
+          };
+        }
+      },
+      objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {   //合并第一列
+          const _row = this.spanArr2[rowIndex];
+          const _col = _row > 0 ? 1 : 0;
+          return {
+            rowspan: _row,
+            colspan: _col
+          };
+        }
+      },
+      tableDatas() {
+        let contactDot = 0;
+        this.tableData.forEach((item, index) => {
+          item.index = index;
+          if (index === 0) {
+            this.spanArr.push(1);
+          } else {
+            if (item.name === this.tableData[index - 1].name) {
+              this.spanArr[contactDot] += 1;
+              this.spanArr.push(0);
+            } else {
+              this.spanArr.push(1);
+              contactDot = index;
+            }
+          }
+        });
+      },
+      tableDatas1() {
+        let contactDot = 0;
+        this.tableData1.forEach((item, index) => {
+          item.index = index;
+          if (index === 0) {
+            this.spanArr1.push(1);
+          } else {
+            if (item.name === this.tableData1[index - 1].name) {
+              this.spanArr1[contactDot] += 1;
+              this.spanArr1.push(0);
+            } else {
+              this.spanArr1.push(1);
+              contactDot = index;
+            }
+          }
+        });
+      },
+      tableDatas2() {
+        let contactDot = 0;
+        this.tableData2.forEach((item, index) => {
+          item.index = index;
+          if (index === 0) {
+            this.spanArr2.push(1);
+          } else {
+            if (item.group === this.tableData2[index - 1].group) {
+              this.spanArr2[contactDot] += 1;
+              this.spanArr2.push(0);
+            } else {
+              this.spanArr2.push(1);
+              contactDot = index;
+            }
+          }
+        });
+      },
+      //滚动table
+      tableAuto(){
+        // 拿到表格挂载后的真实DOM
+        const table = this.$refs.table
+        // 拿到表格中承载数据的div元素
+        const divData = table.bodyWrapper
+        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
+        setInterval(() => {
+          // 元素自增距离顶部1像素
+          divData.scrollTop += 1
+          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+            // 重置table距离顶部距离
+            divData.scrollTop = 0
+          }
+        }, 100)
+      },
+      //滚动table1
+      tableAuto1(){
+        // 拿到表格挂载后的真实DOM
+        const table = this.$refs.table1
+        // 拿到表格中承载数据的div元素
+        const divData = table.bodyWrapper
+        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
+        setInterval(() => {
+          // 元素自增距离顶部1像素
+          divData.scrollTop += 1
+          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+            // 重置table距离顶部距离
+            divData.scrollTop = 0
+            // setInterval(() => {
+            //   divData.scrollTop = 0
+            // },3000)
+          }
+        }, 100)
+      },
+      //滚动table1
+      tableAuto2(){
+        // 拿到表格挂载后的真实DOM
+        const table = this.$refs.table2
+        // 拿到表格中承载数据的div元素
+        const divData = table.bodyWrapper
+        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
+        setInterval(() => {
+          // 元素自增距离顶部1像素
+          divData.scrollTop += 1
+          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
+          if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+            // 重置table距离顶部距离
+            divData.scrollTop = 0
+            // setInterval(() => {
+            //   divData.scrollTop = 0
+            // },3000)
+          }
+        }, 100)
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  #frontTwo {
+    padding: 0.2rem;
+    height: 11.7rem;
+    min-width: 3.75rem;
+    border-radius: 0.0625rem;
+    .bg-color-black {
+      height: 11.5rem;
+      border-radius: 0.125rem;
+    }
+    .text {
+      color: #c3cbde;
+    }
+    .chart-box {
+      margin-top: 0.2rem;
+      width: 2.125rem;
+      height: 2.125rem;
+      .active-ring-name {
+        padding-top: 0.125rem;
+      }
+    }
+
+    .bottom-data {
+      .item-box {
+        float: right;
+        position: relative;
+        width: 50%;
+        color: #d3d6dd;
+        // 金币
+        .coin {
+          position: absolute;
+          left: 0.1rem;
+          top: 0.2125rem;
+          font-size: 0.25rem;
+          color: #ffc107;
+        }
+        .colorYellow {
+          color: yellowgreen;
+        }
+      }
+    }
+  }
+</style>

ui/src/views/monitor/elec/frontElecTwo.vue

@@ -0,0 +1,81 @@
+<template>
+  <div id="frontTwo">
+    <div class="bg-color-black">
+      <div class="content-box">
+        <div>
+
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        equipmentType: 1,
+      };
+    },
+    name: "materialBalance",
+    components: {
+    },
+    methods: {
+      changeType(val) {
+        if (val === 1) {
+          this.equipmentType = 1
+        }else if (val === 2) {
+          this.equipmentType = 2
+        }else if (val === 3) {
+          this.equipmentType = 3
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  #frontTwo {
+    padding: 0.2rem;
+    height: 11.7rem;
+    min-width: 3.75rem;
+    border-radius: 0.0625rem;
+    .bg-color-black {
+      height: 11.5rem;
+      border-radius: 0.125rem;
+    }
+    .text {
+      color: #c3cbde;
+    }
+    .chart-box {
+      margin-top: 0.2rem;
+      width: 2.125rem;
+      height: 2.125rem;
+      .active-ring-name {
+        padding-top: 0.125rem;
+      }
+    }
+
+    .bottom-data {
+      .item-box {
+        float: right;
+        position: relative;
+        width: 50%;
+        color: #d3d6dd;
+        // 金币
+        .coin {
+          position: absolute;
+          left: 0.1rem;
+          top: 0.2125rem;
+          font-size: 0.25rem;
+          color: #ffc107;
+        }
+        .colorYellow {
+          color: yellowgreen;
+        }
+      }
+    }
+  }
+</style>