数据表格

whyczyk

2022-02-28 8a239691ae0eb8cf2e61011658deb5c707c1f6e8

 src/pages/monitoring/real-monitoring.vue

@@ -100,35 +100,11 @@
         </div>

         <div class="card">
            <div class="commonTitle cardTitle">均衡供电</div>
            <div class="commonTitle cardTitle">数据表格</div>
            <div class="listCon">
               <div class="item">
                  {{otherTable[0].value}}
                  <div class="title">
                     版本号
                  </div>
               </div>
               <div class="item">
                  {{otherTable[1].value}}℃
                  <div class="title">
                     温度(℃)
                  </div>
               </div>
               <div class="item">
                  {{eleTable[0].value}}A
                  <div class="title">
                     总电流(A)
                  </div>
               </div>
               <div class="item">
                  {{totolTable[0].value}}V
                  <div class="title">
                     总电压(V)
                  </div>
               </div>
            </div>
            <div class="chartWarp">
               <progress-block-vertical-bar ref="outputVolList"></progress-block-vertical-bar>
               <el-table stripe size="small" :data="table.datas" height="100%" :row-class-name="setTableRowClass" v-if="table.show">
                  <el-table-column v-for="header in dataHeaders" :key="header.prop" :prop="header.prop" :label="header.label" :width="header.width" :fixed="header.fixed" align="center"></el-table-column>
               </el-table>
            </div>

         </div>
@@ -149,14 +125,16 @@
   realTimeSearch,
   realTimeGroup,
   JhStateActionSerchByCondition,
   realTimeLd9Data,
} from "@/pages/monitoring/js/api"
import BarChart from "@/components/chart/BarChart";
import progressBlockVerticalBar from "@/components/chart/progress-block-vertical-bar";
import getMarkLineData from "@/components/chart/js/getMarkLineData";
import getTblHeader from "@/pages/monitoring/js/getTblHeader";
let vol, resChart, temp, conduct, currChart, leakVol;
let tblData = [];
export default {
   data() {
      let pageConfig = this.$store.getters["user/realTabsConfig"];
      return {
         showPopup: false,
         cascaderValue: '',
@@ -264,6 +242,82 @@
               value: "???",
            },
         ],
         table: {
            headers: [
               {
                  prop: "num1",
                  label: "单体编号",
                  width: "",
                  key1: "",
                  fixed: true
               },
               {
                  prop: "vol1",
                  label: "电压(V)",
                  width: "",
                  key1: "vol",
               },
               {
                  prop: "res1",
                  label: "内阻(mΩ)",
                  width: "",
                  key1: "res",
               },
               {
                  prop: "temp1",
                  label: "温度(℃)",
                  width: "",
                  key1: "temp",
               },
               {
                  prop: "conduct1",
                  label: "电导",
                  width: "",
                  key1: "conduct",
               },
               {
                  prop: "monConnRes",
                  label: "链接条阻值",
                  width: "",
                  key1: "monConnRes",
               },
               {
                  prop: "curr1",
                  label: "均衡电流(A)",
                  width: "",
                  key1: "curr"
               },
               {
                  prop: "leakVol1",
                  label: "漏液电压(V)",
                  width: "",
                  key1: "leakVol"
               },
            ],
            datas: [
               {
                  num1: 0,
                  vol1: 0,
                  res1: 0,
                  temp1: 0,
                  conduct1: 0,
                  curr1: 0,
                  leakVol1: 0,
               },
            ],
            show: false
         },
         pageConfig: pageConfig,
         diagram: {
            update: true,
            type: -1,
            desc: "",
            powerCut: 1,
            temp: 0, // 设备温度
            contactRes: 0, // 接触器阻抗
            dropVol: 0, // 导通压降
            devType: 0, // 设备类型
         },
      }
   },
   components: {
@@ -314,6 +368,18 @@
         }
         return list;
      },
      dataHeaders() {
         let headers = this.table.headers;
         let tabConfig = this.pageConfig;
         let batt = this.batt;
         return headers.filter(item => {
            let isShow = item.key1 ? tabConfig[item.key1] : true;
            if (item.type) {
               isShow = this.$units.regEquipType(batt.FBSDeviceId, item.type);
            }
            return isShow;
         });
      }
   },
   methods: {
      //定时器
@@ -323,6 +389,7 @@
               .all([
                  this.realTimeSearch(),
                  this.realTimeGroupss(),
                  this.realStateTimeData(),
                  this.search(),
               ])
               .then(() => {
@@ -365,19 +432,19 @@
                  }
               }
               // 设置输出电压柱状图
               this.$refs.outputVolList.setData({
                  title: {
                     show: true,
                     text: "输出电压",
                     x: "center",
                     textStyle: {
                        fontSize: "14",
                        color: '#323233'
                     }
                  },
                  name: "输出电压",
                  list: this.volTable,
               });
               // this.$refs.outputVolList.setData({
               //    title: {
               //       show: true,
               //       text: "输出电压",
               //       x: "center",
               //       textStyle: {
               //          fontSize: "14",
               //          color: '#323233'
               //       }
               //    },
               //    name: "输出电压",
               //    list: this.volTable,
               // });
            })
            .catch((err) => {
               console.log(err);
@@ -399,8 +466,61 @@
      leafClick(data) {
         this.batt = data;
         this.realTimeAlarmss();
         this.table.headers = getTblHeader(data.FBSDeviceId);
         this.table.show = false;
         // 开启循环请求
         this.startTimer();
      },
      realStateTimeData() {
         let batt = this.batt;
         if (this.$units.regEquipType(batt.FBSDeviceId, ["LD9"])) {
            this.realTimeLd9Data();
         }
      },
      realTimeLd9Data() {
         let batt = this.batt;
         realTimeLd9Data({
            dev_id: batt.FBSDeviceId,
         }).then(res => {
            let rs = JSON.parse(res.data.result);
            if (rs.code == 1) {
               let data = rs.data[0];
               // 判断是否超时
               let outTime = 2 * 60; //设备超时时间(2分钟)
               let nowTime = new Date(data.note).getTime(); //当前时间
               let record = new Date(data.record_datetime).getTime();
               if (Math.abs(nowTime - record) / 1000 > outTime) {
                  this.disconnect();
               } else {
                  this.diagram.desc = "";
                  // 0-在线监测，1-核容测试，2-测试状态状态停止，3-内阻测试
                  switch (data.sys_state) {
                     case 0:
                        this.diagram.type = 0;
                        break;
                     case 1:
                        this.diagram.type = 1;
                        break;
                     case 2:
                        this.diagram.type = 2;
                        break;
                     case 3:
                        this.diagram.type = 3;
                        this.diagram.desc = "(内阻测试)";
                        break;
                  }
               }
            } else {
               this.disconnect();
            }
         }).catch(error => {
            console.log(error);
            this.disconnect();
         });
      },
      disconnect() {
         // 设备未连接
         this.diagram.type = -1;
      },
      /* 查询电池告警参数 */
      realTimeAlarmss() {
@@ -465,30 +585,37 @@
      /* echars图表 */
      realTimeSearch() {
         var batt = this.batt;

         realTimeSearch({
            BattGroupId: batt.BattGroupId
         }).then(res => {
            let diagramType = this.diagram.type;
            let rs = JSON.parse(res.data.result);
            let data = [];
            if (rs.code == 1) {
            if (rs.code == 1 && diagramType != -1) {
               data = rs.data.map(item => {
                  return {
                     num1: "#" + item.mon_num,
                     vol1: item.mon_vol,
                     res1: item.mon_res,
                     temp1: item.mon_tmp,
                     conduct1: item.mon_res ? (1 / item.mon_res * 1000).toFixed(0) : 0,
                     conduct1: item.mon_res
                        ? ((1 / item.mon_res) * 1000).toFixed(0)
                        : 0,
                     curr1: item.mon_JH_curr,
                     leakVol1: item.mon_LY_vol
                     leakVol1: item.mon_LY_vol,
                     monConnRes: item.mon_conn_res,
                     monCap: item.mon_cap,
                     monTestCap: diagramType == 1 ? item.monTestCap : "---",
                     monResCap: diagramType == 1 ? item.monRestCap : "---",
                     monDisTimeLong: diagramType == 1 ? Math.floor(item.monDisTimeLong / 60) + "时" + (item.monDisTimeLong % 60) + "分" : "---",
                     monState: item.monState,
                  };
               });
            }
            // 更新表格
            if (this.acTabs == 'tblData') {
               this.table.datas = data;
            } else {
               tblData = data;
            }
            this.table.datas = data;
            this.table.show = true;
            // 电压值
            let volTempVol = [];
            if (rs.code == 1) {
@@ -810,6 +937,14 @@
         }
         return -1;
      },
      setTableRowClass({ row }) {
         if (row.monState == 1) {
            return "red-row";
         } else if (row.monState == 2) {
            return "green-row";
         }
         return "";
      },
   },
   mounted() {
      this.searchStation();
@@ -878,7 +1013,7 @@

.listCon {
   width: 100%;
   height: 178px;
   height: 500px;
   border-bottom: 2px solid #eeeeee;
   display: flex;
   align-items: center;