驾驶舱-状态监视-表格修改

src/views/Status/Status.vue

@@ -13,8 +13,12 @@
       <ComTable :data="tableData"></ComTable>
     </div>
     <div class="table-box">
-       <ComTable :data="tableData1"></ComTable>
+      <ComTable1 :data="tableData1"></ComTable1>
     </div>
+     <div class="table-box">
+      <ComTable1 :data="tableData2"></ComTable1>
+    </div>
+ 
   </div>
 </template>
 
@@ -22,6 +26,7 @@
 import StatusPanel from "./components/status-panel.vue";
 import StatusPanelStatic from "./components/static.vue";
 import ComTable from "@com/coms/table/table.vue";
+import ComTable1 from "./table.vue"
 import util from "@/helper/util.js";
 
 import store from "@store/index.js";
@@ -33,6 +38,7 @@ export default {
   components: {
     StatusPanel,
     ComTable,
+    ComTable1,
     StatusPanelStatic,
   },
   // 数据
@@ -41,7 +47,7 @@ export default {
       timmer: null, // 遮罩开关
       sourceMap: {}, // 核心数据
       datas: [],
-      wpId1:"",
+      wpId1: "",
       dwkGzqd: "",
       plGzqd: "",
       zhGzqd: "",
@@ -192,10 +198,10 @@ export default {
         ],
         data: [],
       },
-         tableData1: {
+      tableData1: {
         column: [
           {
-            name: "场站名称",
+            // name: "场站名称",
             field: "wpName",
             unit: "",
             is_num: false,
@@ -209,28 +215,28 @@ export default {
           //   is_light: false,
           // },
           {
-            name: "装机容量",
+            // name: "装机容量",
             field: "zjrl",
             unit: "MW",
             is_num: true,
             is_light: false,
           },
           {
-            name: "发电量",
+            // name: "发电量",
             field: "fdl",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
-            name: "上网电量",
+            // name: "上网电量",
             field: "swdl",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
-            name: "利用小时",
+            // name: "利用小时",
             field: "lyxs",
             unit: "",
             is_num: true,
@@ -238,98 +244,244 @@ export default {
           },
           {
             // name: "风速m/s",
-            name:"光照强度w/m2",
+            // name: "光照强度w/㎡",
             field: "fs",
-            unit: "日照强度w/m2",
+            unit: "日照强度w/㎡",
             is_num: true,
             is_light: false,
           },
           {
-            name: "功率",
+            // name: "功率",
             field: "gl",
             unit: "MW",
             is_num: true,
             is_light: false,
           },
           {
-            name: "出线功率",
+            // name: "出线功率",
             field: "cxgl",
             unit: "MW",
             is_num: true,
             is_light: false,
           },
           {
-            name: "理论功率",
+            // name: "理论功率",
             field: "llgl",
             unit: "MW",
             is_num: true,
             is_light: false,
           },
           {
-            name: "保证功率",
+            // name: "保证功率",
             field: "bzgl",
             unit: "MW",
             is_num: true,
             is_light: false,
           },
           {
-            name: "预测功率",
+            // name: "预测功率",
             field: "ycgl",
             unit: "MW",
             is_num: true,
             is_light: false,
           },
           {
-            name: "AGC指令",
+            // name: "AGC指令",
             field: "agczl",
             unit: "MW",
             is_num: true,
             is_light: false,
           },
           {
-            name: "理论发电量",
+            // name: "理论发电量",
             field: "llfdl",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
-            name: "SCADA发电量",
+            // name: "SCADA发电量",
             field: "scadafdl",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
-            name: "维修损失电量",
+            // name: "维修损失电量",
             field: "whss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
-            name: "故障损失电量",
+            // name: "故障损失电量",
             field: "gzss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
-            name: "受理损失电量",
+            // name: "受理损失电量",
             field: "slss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
-            name: "限电损失电量",
+            // name: "限电损失电量",
             field: "xdss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
-            name: "性能损失电量",
+            // name: "性能损失电量",
+            field: "xnss",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+        ],
+        data: [],
+      },
+            tableData2: {
+        column: [
+          {
+            // name: "场站名称",
+            field: "wpName",
+            unit: "",
+            is_num: false,
+            is_light: false,
+          },
+          // {
+          //   name: "调度名称",
+          //   field: "ddname",
+          //   unit: "",
+          //   is_num: false,
+          //   is_light: false,
+          // },
+          {
+            // name: "装机容量",
+            field: "zjrl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "发电量",
+            field: "fdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "上网电量",
+            field: "swdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "利用小时",
+            field: "lyxs",
+            unit: "",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "风速m/s",
+            // name: "光照强度w/㎡",
+            field: "fs",
+            unit: "日照强度w/㎡",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "功率",
+            field: "gl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "出线功率",
+            field: "cxgl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "理论功率",
+            field: "llgl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "保证功率",
+            field: "bzgl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "预测功率",
+            field: "ycgl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "AGC指令",
+            field: "agczl",
+            unit: "MW",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "理论发电量",
+            field: "llfdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "SCADA发电量",
+            field: "scadafdl",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "维修损失电量",
+            field: "whss",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "故障损失电量",
+            field: "gzss",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "受理损失电量",
+            field: "slss",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "限电损失电量",
+            field: "xdss",
+            unit: "万kwh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            // name: "性能损失电量",
             field: "xnss",
             unit: "万kwh",
             is_num: true,
@@ -356,11 +508,12 @@ export default {
             let datas = [];
             let data = [];
             let data1 = [];
+            let data2 = [];
             sourceMap.maps.forEach((ele) => {
               sourceMap.vos.forEach((vEle) => {});
-              that.wpId1=sourceMap.vos.find((findEle) => {
-                  return findEle.wpName === ele.name;
-                }).wpId
+              that.wpId1 = sourceMap.vos.find((findEle) => {
+                return findEle.wpName === ele.name;
+              }).wpId;
               datas.push({
                 title: ele.name,
                 wpId: sourceMap.vos.find((findEle) => {
@@ -435,19 +588,20 @@ export default {
               });
             });
 
-        //风电场
-               let fdcArr = sourceMap.vos.filter((ele)=>{
-                 return ele.wpId.includes('FDC')      
-               })
-               let fdhj = sourceMap.vos.filter((ele)=>{
-                 return ele.wpId.includes('-1')
-               })
-                  let zj = sourceMap.vos.filter((ele)=>{
-                 return ele.wpId.includes('0')
-               })
-               fdcArr.push(fdhj[0],zj[0])
-              //  console.log(fdcArr)
-                 fdcArr.forEach((ele) => {
+            //风电场
+            let fdcArr = sourceMap.vos.filter((ele) => {
+              return ele.wpId.includes("FDC");
+            });
+            let fdhj = sourceMap.vos.filter((ele) => {
+              return ele.wpId.includes("-1");
+            });
+            let zj = sourceMap.vos.filter((ele) => {
+              return ele.wpId.includes("0");
+            });
+          data2.push(zj[0])
+            fdcArr.push(fdhj[0]);
+            //  console.log(fdcArr)
+            fdcArr.forEach((ele) => {
               // console.log('vos:', sourceMap.vos)
               ele.row_span = [];
               ele.col_span = [];
@@ -456,15 +610,15 @@ export default {
             });
 
             //光电厂
-                 let gdcArr = sourceMap.vos.filter((ele)=>{
-                 return ele.wpId.includes('GDC')      
-               })
-               let gdhj = sourceMap.vos.filter((ele)=>{
-                 return ele.wpId.includes('-2')
-               })
-               gdcArr.push(gdhj[0],zj[0])
-              //  console.log(gdcArr)
-                 gdcArr.forEach((ele) => {
+            let gdcArr = sourceMap.vos.filter((ele) => {
+              return ele.wpId.includes("GDC");
+            });
+            let gdhj = sourceMap.vos.filter((ele) => {
+              return ele.wpId.includes("-2");
+            });
+            gdcArr.push(gdhj[0]);
+            //  console.log(gdcArr)
+            gdcArr.forEach((ele) => {
               // console.log('vos:', sourceMap.vos)
               ele.row_span = [];
               ele.col_span = [];
@@ -473,29 +627,30 @@ export default {
             });
 
             // sourceMap.vos.forEach((ele) => {
-            //   console.log('vos:', sourceMap.vos)
+            //   // console.log('vos:', sourceMap.vos)
             //   ele.row_span = [];
             //   ele.col_span = [];
             //   ele.is_light = false;
             //   data.push(ele);
             // });
 
-          //  for(let i=0;i<sourceMap.vos.length;i++){
-          //     //  console.log('vos:',sourceMap.vos)
-          //      data.push(sourceMap.vos[0],sourceMap.vos[1],sourceMap.vos[2],sourceMap.vos[3],sourceMap.vos[4],sourceMap.vos[5],sourceMap.vos[11])
-          //      data1.push(sourceMap.vos[6],sourceMap.vos[7],sourceMap.vos[8],sourceMap.vos[9],sourceMap.vos[10],sourceMap.vos[11])
-          //  }
-          //  that.unique(data,that.wpId1);
-          // //  that.unique(data1,sourceMap.vos.find((findEle) => {
-          // //         return findEle.wpName === ele.name;
-          // //       }).wpId);
-          //  console.log('vosData:',data);
-          // //  console.log('vosData1:',data1)
+            //  for(let i=0;i<sourceMap.vos.length;i++){
+            //     //  console.log('vos:',sourceMap.vos)
+            //      data.push(sourceMap.vos[0],sourceMap.vos[1],sourceMap.vos[2],sourceMap.vos[3],sourceMap.vos[4],sourceMap.vos[5],sourceMap.vos[11])
+            //      data1.push(sourceMap.vos[6],sourceMap.vos[7],sourceMap.vos[8],sourceMap.vos[9],sourceMap.vos[10],sourceMap.vos[11])
+            //  }
+            //  that.unique(data,that.wpId1);
+            // //  that.unique(data1,sourceMap.vos.find((findEle) => {
+            // //         return findEle.wpName === ele.name;
+            // //       }).wpId);
+            //  console.log('vosData:',data);
+            // //  console.log('vosData1:',data1)
 
             that.sourceMap = sourceMap;
             that.datas = datas;
             that.tableData.data = data;
             that.tableData1.data = data1;
+            that.tableData2.data = data2;
           } else {
             that.sourceMap = {};
             that.datas = [];
@@ -505,7 +660,6 @@ export default {
         },
       });
     },
-
   },
 
   created() {

src/views/Status/table.vue

@@ -0,0 +1,225 @@
+<template>
+  <table class="com-table">
+    <!-- <thead>
+      <tr>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
+          {{ col.name }}
+        </th>
+      </tr>
+    </thead> -->
+    <el-scrollbar>
+      <tbody :style="{ height: height }">
+        <tr v-for="(row, index) of tableData" :key="index">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
+            <component :is="col.type ? col.type : 'span'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
+          </td>
+        </tr>
+      </tbody>
+    </el-scrollbar>
+    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
+  </table>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        type:'div',
+                        width:'', // 宽度
+                        is_num: false, // 是否为数字
+                        is_light: false, // 是否高亮
+                        template:function(){ }
+                        click:function(){} //点击事件
+                        sortable:fasle // 排序
+                        // 新增用于在表格中使用动态三方组件
+                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                    },{
+                        name: "冷却风温度",
+                        field: "lqf",
+                        is_num: true,
+                        is_light: false
+                    }],
+                    data: [{
+                        name: "1E01",
+                        lqf: 15.78,
+                        is_light: false
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    // 列高亮
+    showColHover: {
+      type: Boolean,
+      default: false,
+    },
+    canScroll: {
+      type: Boolean,
+      default: true,
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: String,
+      default: "",
+    },
+    // 新增 支持 pagging 组件
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    clearCheckBox(time){
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          const domArray = document.querySelectorAll(".curCheckBox");
+          for(let i=0;i<domArray.length;i++){
+            domArray[i].checked=false;
+          }
+        },(time || 300));
+      });
+    },
+    onClick(col, data) {
+      if (col.click) col.click(event, data);
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "";
+            break;
+        }
+      }
+    },
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        if (this.showColHover) this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less"></style>