东峰设备界面提交

whychdw

2025-04-07 1dd377580ebd4e60fb4a9c9c1e89c9438e877688

东峰设备界面提交

 src/assets/images/bg-info.png

 src/assets/images/szdt-logo.png

 src/assets/js/config.module.js

@@ -2,8 +2,8 @@
  logo: {
    label: "平台logo",
    des: "显示平台logo状态",
    fileName: "gjdw", // gjdw, nfdw, gjdx, qwh, gdnr
    value: true,
    fileName: "szdt", // gjdw, nfdw, gjdx, qwh, gdnr, szdt
    value: false,
  },
  uKey: {
    label: "uKey",
@@ -94,11 +94,11 @@
     * 苏州地铁:  'szdt'
     */
    // name: "",
    name: "sxty", // 请查看alarmPopup是否开启，logo是否开启且为gjdw
    // name: "sxty", // 请查看alarmPopup是否开启，logo是否开启且为gjdw
    // name: "tydc",
    // name: 'szdt',
    // name: 'njck',
    // name: "ynkm",    // 云南昆明定制了设备实时告警和设备历史告警名称 打包时注意设置为isChangeAlarm=true，其他设置为false
    name: "ynkm",    // 云南昆明定制了设备实时告警和设备历史告警名称 打包时注意设置为isChangeAlarm=true，其他设置为false
    //value: false,
    isChangeAlarm: false,
  },
@@ -128,8 +128,8 @@
  alarmPopup: {
    label: "告警弹出框",
    des: "登录平台后，右下方告警弹出框提示",
    // value: false,
    value: true,
    value: false,
    // value: true,
  },
  WHYC: {
    label: "自用",

 src/assets/js/const/const_devType.js

@@ -360,6 +360,10 @@
      value: 618532,
      label: "BTS-2202-2Z"
    },
    {
      value: 6138,
      label: "东峰BMS设备"
    }
  ],
  power: [
    {

 src/assets/js/tools/regEquipType.js

@@ -59,6 +59,7 @@
        intelDev: /^2100/,  // 智能母联
        dyhr: /^6159/,  // 电源核容一体机
        dh: /^1200/,  // 动环设备
        dfBms: /^6138/, // 东峰BMS设备
    };
    let effectPtns = [];
    // 数据类型为字符串

 src/components/FlexBox.vue

@@ -91,8 +91,8 @@
  z-index: 9;
}
.flex-box.flex-box-mini > .flex-box-border {
  width: 8px;
  height: 8px;
  width: 16px;
  height: 16px;
}

.flex-box-border.border-top-left {

 src/components/bigScreenPage/images/title_text1.png

 src/components/bigScreenPage/images/title_text_nfdw.png

 src/layout/components/Navbar.vue

@@ -332,6 +332,7 @@
import gjdx from "@/assets/images/gjdx-log.png";
import qwh from "@/assets/images/qwh-logo.png";
import gdnr from "@/assets/images/gdnr-logo.png";
import szdt from "@/assets/images/szdt-logo.png";
import { Timeout } from "@/assets/js/tools";
import getPageMenu from "@/assets/js/tools/getPageMenu";
import checkMenuIsUse from "@/assets/js/tools/checkMenuIsUse";
@@ -1177,6 +1178,10 @@
        case "gdnr":
          image = gdnr;
          break;
        case "szdt":
          image = szdt;
          break;

      }
      return image;
    },

 src/router/index.js

@@ -887,6 +887,17 @@
            component: () => import("@/views/dataTest/realTime6183.vue"),
          },
          {
            // 东峰BMS设备
            path: "real-time-df-bms/:battGroupId",
            name: "movingRingSystem",
            meta: {
              title: "实时监控",
              icon: "",
              url: "/dataTest/realTimeDfBms",
            },
            component: () => import("@/views/dataTest/realTimeDfBms.vue"),
          },
          {
            // 61850假负载
            path: "real-time6186/:battGroupId",
            name: "movingRingSystem",

 src/views/dataMager/battGroupMager.vue

@@ -604,6 +604,11 @@
          minWidth: 360
        },
        {
          prop: "deviceId",
          label: "东峰BMS设备ID",
          minWidth: 160
        },
        {
          prop: "labelCfgText",
          label: "实时监控标签",
          minWidth: 360

 src/views/dataMager/components/AddBattGroup.vue

@@ -347,6 +347,15 @@
            <el-input v-model="params.commPort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span" v-if="isDfBms">
          <el-form-item label="BMS设备ID">
            <el-select size="mini" v-model="params.deviceId">
              <el-option
                v-for="(item, key) in bmsList" :key="'key'+key"
                :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="交直流监控屏启用">
            <el-switch
@@ -355,7 +364,7 @@
              inactive-color="#aaa"
              active-text="启用"
              inactive-text="关闭"
            >
              size="mini">
            </el-switch>
          </el-form-item>
        </el-col>
@@ -539,7 +548,7 @@
  getExistStations,
} from "@/assets/js/api.js";
import { searchTplAll } from "../js/eletmp";
import { searchBattProducer, add, getMaxIp } from "../js/battGroupMager";
import { searchBattProducer, add, getMaxIp, dfBmsDevicesAPI } from "../js/battGroupMager";
import {
  const_province_city_county,
  const_battGroup,
@@ -575,6 +584,7 @@
      trigger: "change",
    };
    return {
      bmsList: [],
      tabValue: [],
      tabList: [],
      layout: {
@@ -642,6 +652,7 @@
        topologyMapType: 0, // 拓扑图类型
        commPort: 102,    // 连接端口
        labelCfg: '',     // 实时监控的标签，使用,分隔的字符串
        deviceId: '',     // BMS设备ID
      },
      signTypes: const_61850.signTypes,
      tmpList: [],
@@ -1333,10 +1344,16 @@
    },
    // 提交表单设置参数
    submitFrom() {
      // 对于东峰BMS设备提前做校验
      if(this.isDfBms && !this.params.deviceId) {
        this.$layer.msg("请选择BMS设备ID");
        return;
      }

      this.$refs.ruleForm.validate((valid) => {
        // 校验通过
        if (valid) {
          var tmp = {};
          let tmp = {};
          Object.keys(this.params).forEach((key, value) => {
            tmp[key] = this.params[key];
          });
@@ -1457,6 +1474,23 @@
        this.params.tmpId = 0;
      }
    },
    dfBmsDevices() {
      dfBmsDevicesAPI()
        .then((res) => {
          res = res.data;
          console.log(res);
          if (res.code) {
            this.bmsList = res.data.map(item=>{
              return item;
            });
          }else {
            this.bmsList = [];
          }
        }).catch((error) => {
          this.bmsList = [];
          console.log(error);
        });
    },
    autoComputeIp() {
      let loading = this.$layer.loading();
      getMaxIp(this.params.fbsdeviceId)
@@ -1508,6 +1542,11 @@
      let dev_id = this.params.fbsdeviceId;
      return regEquipType(dev_id, ["lithiumPack"]);
    },
    isDfBms() {
      // BMS
      let dev_id = this.params.fbsdeviceId;
      return regEquipType(dev_id, ["dfBms"]);
    },
    monCountText() {
      let isLithiumPack = this.isLithiumPack;
      return isLithiumPack ? "锂电池包单体个数" : "单体个数";
@@ -1529,6 +1568,8 @@
    this.searchTplAll();

    this.handleDevTypeChange();

    this.dfBmsDevices();
  },
};
</script>

 src/views/dataMager/components/EditBattGroup.vue

@@ -328,6 +328,15 @@
            <el-input v-model="params.commPort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span" v-if="isDfBms">
          <el-form-item label="BMS设备ID">
            <el-select size="mini" v-model="params.deviceId">
              <el-option
                v-for="(item, key) in bmsList" :key="'key'+key"
                :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span">
          <el-form-item label="交直流监控屏启用">
            <el-switch
@@ -550,6 +559,7 @@
      trigger: "change",
    };
    return {
      bmsList: [],
      tabValue: [],
      tabList: [],
      reasonVisible: false,
@@ -618,6 +628,7 @@
        topologyMapType: 0, // 拓扑图类型
        commPort: 102,    // 连接端口
        labelCfg: '',     // 实时监控的标签，使用,分隔的字符串
        deviceId: '',     // BMS设备ID
      },
      signTypes: const_61850.signTypes,
      rules: {
@@ -1354,6 +1365,11 @@
      let isLithiumPack = this.isLithiumPack;
      return isLithiumPack ? "锂电池包单体个数" : "单体个数";
    },
    isDfBms() {
      // BMS
      let dev_id = this.params.fbsdeviceId;
      return regEquipType(dev_id, ["dfBms"]);
    },
  },
  mounted() {
    // 设置省市区县的数据

 src/views/dataMager/components/battAssetInfo.vue

@@ -47,9 +47,13 @@
            <td class="asset-head">设备ID：</td>
            <td>{{ batt.fbsdeviceId }}</td>
          </tr>
          <tr>
          <tr v-if="!isDfBms">
            <td class="asset-head">电池组ID：</td>
            <td>{{ batt.battGroupId }}</td>
          </tr>
          <tr v-if="isDfBms">
            <td class="asset-head">东峰BMS设备ID：</td>
            <td>{{ batt.deviceId }}</td>
          </tr>
          <tr>
            <td class="asset-head">变更原因：</td>
@@ -74,6 +78,7 @@

<script>
import FlexBox from "@/components/FlexBox.vue";
import {regEquipType} from "@/assets/js/tools";

export default {
  name: "battAssetInfo",
@@ -98,7 +103,15 @@
  methods: {

  },
  mounted() {}
  computed: {
    isDfBms() {
      let dev_id = this.batt.fbsdeviceId;
      return regEquipType(dev_id, ["dfBms"]);
    },
  },
  mounted() {

  }
}
</script>


 src/views/dataMager/js/battGroupMager.js

@@ -168,3 +168,14 @@
    },
  });
}

/**
 * 查询东峰BMS设备列表
 * @returns {AxiosPromise}
 */
export const dfBmsDevicesAPI = ()=>{
  return axios({
    method: 'GET',
    url: 'dfxtDeviceList/getDeviceList',
  });
}

 src/views/dataTest/js/realTime.js

@@ -1342,4 +1342,64 @@
      battGroupNum,
    },
  });
};
};

/**
 * 启动放电
 * @param devId 设备ID
 * @returns {AxiosPromise}
 */
export const dfBmsStartDischargeApi = (devId)=>{
  return axios({
    method: "POST",
    url: "dfxtBmsParam/startDischarge",
    params: {
      devId
    },
  });
}

/**
 * 停止放电
 * @param devId 设备ID
 * @returns {AxiosPromise}
 */
export const dfBmsStopDischargeApi = (devId)=>{
  return axios({
    method: "POST",
    url: "dfxtBmsParam/stopDischarge",
    params: {
      devId
    },
  });
}

/**
 * 启动充电
 * @param devId 设备ID
 * @returns {AxiosPromise}
 */
export const dfBmsStartChargeApi = (devId)=>{
  return axios({
    method: "POST",
    url: "dfxtBmsParam/startCharge",
    params: {
      devId
    },
  });
}

/**
 * 停止充电
 * @param devId 设备ID
 * @returns {AxiosPromise}
 */
export const dfBmsStopChargeApi = (devId)=>{
  return axios({
    method: "POST",
    url: "dfxtBmsParam/stopCharge",
    params: {
      devId
    },
  });
}

 src/views/dataTest/movingRingSystem/index.vue

@@ -137,7 +137,11 @@
                            this.$router.push({
                                path: "/dataTest/movingRingSystem/real-time6187/" + data.battGroupId,
                            });
                        } else {
                        }else if(regEquipType(dev_id1, "dfBms")) {
              this.$router.push({
                path: "/dataTest/movingRingSystem/real-time-df-bms/" + data.battGroupId,
              });
            } else {
                            this.$router.push({
                                path: "/dataTest/movingRingSystem/real-time/" + data.battGroupId,
                                query: this.$route.query.pageFlag ? this.$route.query : {},

 src/views/dataTest/realTimeDfBms.vue

New file
@@ -0,0 +1,796 @@
<script>
import HomeList from "@/views/dataTest/movingRingSystem/HomeList.vue";
import ContentBox from "@/components/ContentBox.vue";
import {getBattGroupInfo, getBattRecords} from "@/views/dataMager/js/battGroupMager";
import BattAssetInfo from "@/views/dataMager/components/battAssetInfo.vue";
import FlexBox from "@/components/FlexBox.vue";
import const_digit from "@/assets/js/const/const_digit";
import createWs from "@/assets/js/websocket";
import {dfBmsStartDischargeApi, dfBmsStopDischargeApi, dfBmsStartChargeApi, dfBmsStopChargeApi} from "@/views/dataTest/js/realTime";
const WSMixin = createWs("dfxtBmsState");
const {
  cap: CAP,
  vol: VOL,
  curr: CURR,
  res: RES,
  conduct: CONDUCT,
  temp: TEMP,
  hum: HUM,
} = const_digit;

export default {
  name: "realTimeDfBms",
  mixins: [WSMixin],
  components: {FlexBox, BattAssetInfo, ContentBox, HomeList},
  data() {
    return {
      homeListShow: true,
      batt: {},
      acTabs: 'realData',
      battRecords: [],
      stateInfo: {
        acpbv: 86.4,
        adpbv: 60,
        adrbv: 69.6,
        ascpv: 86.4,
        asdpv: 55.2,
        asrbv: 84,
        balanceType: 2,
        batteryType: 1,
        batteryType2: 1,
        batteryV1: 1.605,
        batteryV2: 1.817,
        batteryV3: 1.758,
        batteryV4: 1.822,
        batteryV5: 1.846,
        batteryV6: 1.935,
        batteryV7: 1.964,
        batteryV8: 2.127,
        batteryV9: 2.484,
        batteryV10: 4.971,
        batteryV11: 4.325,
        batteryV12: 3.26,
        batteryV13: 3.255,
        batteryV14: 3.257,
        batteryV15: 0.418,
        batteryV16: 0.66,
        batteryV17: 3.256,
        batteryV18: 3.257,
        batteryV19: 0.327,
        batteryV20: 1.312,
        batteryV21: 2.658,
        batteryV22: 2.321,
        batteryV23: 1.985,
        batteryV24: 1.349,
        batteryV25: 0,
        batteryV26: 0,
        batteryV27: 0,
        batteryV28: 0,
        batteryV29: 0,
        batteryV30: 0,
        batteryV31: 0,
        batteryV32: 0,
        batteryc: 24,
        bcrl: 0,
        bcst: 24,
        betteryvAll: 52.56,
        bmsDatetime: 1717567460000,
        bmsDevDatetime: 1717567958000,
        bmscode: "560_TL_24S_150A_MT",
        boardrated: 150,
        bxhc: 0,
        ccxx: "24-01-09",
        ceilingvoltage: 4.971,
        chon: 1,
        cpbv: 3650,
        cpcount: 1,
        cpowera: 30,
        cpstatus: 0,
        cpsubcooled: 0,
        cpsuperheat: 0,
        cvoltagesub: 4.644,
        devId: 613800011,
        dhon: 1,
        dpbv: 2500,
        dpcount: 3,
        dpowera: 50,
        dpstatus: 2,
        dpsubcooled: 0,
        dpsuperheat: 0,
        drbv: 2900,
        em: 1,
        ems1: 0,
        ems2: 0,
        emst: 1,
        esba: 300,
        esbv: 3300,
        fcc: 0,
        lrlav: 10,
        minimumvoltage: 0.327,
        nchp1: "135,10,30",
        nchp2: "105,30,30",
        nchp3: "75,120,30",
        ndhp1: "225,5,30",
        ndhp2: "187,10,30",
        ndhp3: "165,60,30",
        npcm1: "85,70,-20,-15",
        npcm2: "60,50,-15,-10",
        npcm3: "65,55,-20,-15",
        npcm4: "0,0,0,0",
        npcm5: "0,0,0,0",
        num: 1,
        outchargingHighcount: 0,
        outunchargingHighcount: 0,
        recordTime: "2025-04-02 09:48:51",
        scpcount: 0,
        scprotect: 0,
        singleOverPressure: 1,
        singleUnderVoltage: 3,
        soc: 23,
        srbv: 3500,
        sspv: 1000,
        syla: 0,
        tcB1: 27.1,
        tcB2: 26.3,
        tcT: 28.5,
        wholeOverPressure: 0,
        wholeUnderPressure: 0,
        workstate: 1,
      }
    };
  },
  methods: {
    onWSOpen() {
      this.$nextTick(() => {
        this.sendMessage();
      });
    },
    sendMessage() {
      let batt = this.batt;
      if (!batt.deviceId || !this.isWSOpen) {
        return false;
      }

      this.SOCKET.send(batt.fbsdeviceId);
    },
    onWSMessage(res) {
      res = JSON.parse(res.data);
      const data = res.data;
      console.log(data);
    },
    tabClick(tab) {
      this.acTabs = tab.name;
    },
    toggleChange() {
      this.resize();
    },
    resize() {

    },
    getBattGroupInfo(battGroupId) {
      this.homeListShow = false;
      getBattGroupInfo(battGroupId)
        .then((res) => {
          res = res.data;
          if (res.code) {
            this.leafClick(res.data[0]);
          } else {
            this.$layer.msg("未获取到电池组的信息");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    leafClick(data) {
      this.batt = data;
      this.getBattRecords(data.battGroupId);
      this.$nextTick(() => {
        this.sendMessage();
      });
    },
    getBattRecords(battGroupId) {
      // 查询
      getBattRecords(battGroupId)
        .then((res) => {
          let { code, data, data2 } = res.data;
          let list = [];
          if (code && data) {
            list = data2;
          }
          //console.log(list);
          this.battRecords = list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    dfBmsStartDischarge() {
      const batt = this.batt;
      this.$confirm("确认启动放电", '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(async () => {
        let loading = this.$layer.loading();
        const res = await dfBmsStartDischargeApi(batt.fbsdeviceId);
        this.$layer.close(loading);
        const rs = res.data;
        if(rs.code === 1) {
          this.$layer.msg("启动放电成功");
        }else {
          this.$layer.msg("启动放电失败");
        }
      }).catch(() => {});
    },
    dfBmsStopDischarge() {
      const batt = this.batt;
      this.$confirm("确认停止放电", '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(async () => {
        let loading = this.$layer.loading();
        const res = await dfBmsStopDischargeApi(batt.fbsdeviceId);
        this.$layer.close(loading);
        const rs = res.data;
        if(rs.code === 1) {
          this.$layer.msg("停止放电成功");
        }else {
          this.$layer.msg("停止放电失败");
        }
      }).catch(() => {});
    },
    dfBmsStartCharge() {
      const batt = this.batt;
      this.$confirm("确认启动充电", '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(async () => {
        let loading = this.$layer.loading();
        const res = await dfBmsStartChargeApi(batt.fbsdeviceId);
        this.$layer.close(loading);
        const rs = res.data;
        if(rs.code === 1) {
          this.$layer.msg("启动充电成功");
        }else {
          this.$layer.msg("启动充电失败");
        }
      }).catch(() => {});
    },
    dfBmsStopCharge() {
      const batt = this.batt;
      this.$confirm("确认停止充电", '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(async () => {
        let loading = this.$layer.loading();
        const res = await dfBmsStopChargeApi(batt.fbsdeviceId);
        this.$layer.close(loading);
        const rs = res.data;
        if(rs.code === 1) {
          this.$layer.msg("停止充电成功");
        }else {
          this.$layer.msg("停止充电失败");
        }
      }).catch(() => {});
    }
  },
  computed: {
    battFullName() {
      let batt = this.batt;
      if (batt.stationName && batt.battGroupName) {
        return batt.stationName + "-" + batt.battGroupName;
      }
      return "电池组全称";
    },
    monVols() {
      const stateInfo =  this.stateInfo;
      const batteryc = stateInfo.batteryc;

      let list = [];
      for(let i=0; i<batteryc;i++) {
        list.push(stateInfo['batteryV'+(i+1)]);
      }
      return list;
    },
    backInputs() {
      const {workstate, batteryType,bmscode, recordTime, fcc, syla, soc, bmsDevDatetime} =  this.stateInfo;

      let battState = workstate === 0?"放电中":workstate === 1?"充电中":"闲置";
      let battType = batteryType?"铁锂":"三元";
      let devTime = new Date(bmsDevDatetime).format("yyyy-MM-dd hh:mm:ss");
      return {
        battState,
        battType,
        bmscode,
        recordTime,
        fcc,
        syla,
        soc,
        devTime
      }
    }
  },
  mounted() {
    let battGroupId = this.$route.params.battGroupId;
    if (battGroupId) {
      this.getBattGroupInfo(battGroupId);
    }
  }
}
</script>

<template>
  <flex-layout direction="row" class="page-real-time" :no-bg="true">
    <home-list v-if="homeListShow" slot="header" @toggleChange="toggleChange" @leaf-click="leafClick"></home-list>
    <content-box style="margin-left: 4px; margin-right: 4px" :title="battFullName">
      <flex-layout :no-bg="true">
        <div class="content-header" slot="header">
          <div class="table-layout">
            <div class="table-row">
              <div class="table-cell text-right w80">电池状态:</div>
              <div class="table-cell">
                <el-input :value="backInputs.battState" size="small" :disabled="true"></el-input>
              </div>
              <div class="table-cell text-right w80">电池类型:</div>
              <div class="table-cell">
                <el-input :value="backInputs.battType" size="small" :disabled="true"></el-input>
              </div>
              <div class="table-cell text-right w80">厂商编码:</div>
              <div class="table-cell">
                <el-input :value="backInputs.bmscode" size="small" :disabled="true"></el-input>
              </div>
              <div class="table-cell text-right w80">更新日期:</div>
              <div class="table-cell">
                <el-input :value="backInputs.recordTime" size="small" :disabled="true"></el-input>
              </div>
            </div>
            <div class="table-row">
              <div class="table-cell text-right w80">标称容量:</div>
              <div class="table-cell">
                <el-input :value="backInputs.fcc" size="small" :disabled="true"></el-input>
              </div>
              <div class="table-cell text-right w80">剩余容量:</div>
              <div class="table-cell">
                <el-input :value="backInputs.syla" size="small" :disabled="true"></el-input>
              </div>
              <div class="table-cell text-right w80">容量百分比:</div>
              <div class="table-cell">
                <el-input :value="backInputs.soc" size="small" :disabled="true"></el-input>
              </div>
              <div class="table-cell text-right w80">设备时间:</div>
              <div class="table-cell">
                <el-input :value="backInputs.devTime" size="small" :disabled="true"></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="page-content">
          <el-tabs v-model="acTabs" type="border-card" class="flex-layout noborder" @tab-click="tabClick">
            <el-tab-pane label="实时数据" name="realData">
              <div class="real-time-wrapper">
                <flex-box title="当前状态" size="mini">
                  <div class="state-item-wrapper">
                    <el-row :gutter="8">
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">充电开关</div>
                          <div class="state-box value">{{stateInfo.chon?"开":"关"}}</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">均衡状态</div>
                          <div class="state-box value">
                            {{stateInfo.balanceType===0?"无均衡":stateInfo.balanceType===1?"被动":"主动"}}
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">电池串数</div>
                          <div class="state-box value">{{ stateInfo.bcst }}</div>
                          <div class="state-box unit">串</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">放电开关</div>
                          <div class="state-box value">{{ stateInfo.dhon?"关":"开" }}</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">循环次数</div>
                          <div class="state-box value">{{ stateInfo.bxhc }}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">总电压</div>
                          <div class="state-box value">{{stateInfo.betteryvAll}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">充电保护</div>
                          <div class="state-box value">
                            {{stateInfo.cpstatus===0?"正常":stateInfo.cpstatus===1?"硬控保护":"软控保护"}}
                          </div>
                          <div class="state-box unit"></div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">充电电流</div>
                          <div class="state-box value">{{stateInfo.cpowera}}</div>
                          <div class="state-box unit">A</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">短路保护</div>
                          <div class="state-box value">
                            {{stateInfo.scprotect?"正常":"保护"}}
                          </div>
                          <div class="state-box unit"></div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">放电保护</div>
                          <div class="state-box value">
                            {{stateInfo.dpstatus===0?"正常":stateInfo.dpstatus===1?"硬控保护":"软控保护"}}
                          </div>
                          <div class="state-box unit"></div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">放电电流</div>
                          <div class="state-box value">{{stateInfo.dpowera}}</div>
                          <div class="state-box unit">A</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">保护板温度</div>
                          <div class="state-box value">{{stateInfo.tcT}}</div>
                          <div class="state-box unit">℃</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">电池温度1</div>
                          <div class="state-box value">{{stateInfo.tcB1}}</div>
                          <div class="state-box unit">℃</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">电池温度2</div>
                          <div class="state-box value">{{stateInfo.tcB2}}</div>
                          <div class="state-box unit">℃</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">电池1均衡状态</div>
                          <div class="state-box value">{{stateInfo.ems1?"关":"开"}}</div>
                          <div class="state-box unit"></div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">电池2均衡状态</div>
                          <div class="state-box value">{{stateInfo.ems2?"关":"开"}}</div>
                          <div class="state-box unit"></div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">单体过压次数</div>
                          <div class="state-box value">{{stateInfo.singleOverPressure}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">单体欠压次数</div>
                          <div class="state-box value">{{stateInfo.singleUnderVoltage}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">整体过压次数</div>
                          <div class="state-box value">{{stateInfo.wholeOverPressure}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">整体欠压次数</div>
                          <div class="state-box value">{{stateInfo.wholeUnderPressure}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">充电过流次数</div>
                          <div class="state-box value">{{stateInfo.outchargingHighcount}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">放电过流次数</div>
                          <div class="state-box value">{{stateInfo.outunchargingHighcount}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">充电过温次数</div>
                          <div class="state-box value">{{stateInfo.cpsuperheat}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">充电低温次数</div>
                          <div class="state-box value">{{stateInfo.cpsubcooled}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">放电过温次数</div>
                          <div class="state-box value">{{stateInfo.dpsuperheat}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">放电低温次数</div>
                          <div class="state-box value">{{stateInfo.dpsubcooled}}</div>
                          <div class="state-box unit">次</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </flex-box>
                <flex-box title="电池单体信息" size="mini">
                  <div class="batt-list">
                    <div class="batt-item" v-for="(item, key) in monVols" :key="'key'+key">
                      <span class="batt-num">#{{key+1}}</span>{{item}}V
                    </div>
                  </div>
                </flex-box>
                <flex-box title="电池参数" size="mini">
                  <div class="state-item-wrapper">
                    <el-row :gutter="8">
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">单体充电保护电压</div>
                          <div class="state-box value">{{stateInfo.cpbv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">单体充电恢复电压</div>
                          <div class="state-box value">{{stateInfo.srbv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">单体放电保护电压</div>
                          <div class="state-box value">{{stateInfo.dpbv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">单体放电恢复电压</div>
                          <div class="state-box value">{{stateInfo.drbv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">单节压差保护电压</div>
                          <div class="state-box value">{{stateInfo.sspv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">总充电保护电压</div>
                          <div class="state-box value">{{stateInfo.acpbv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">总充电恢复电压</div>
                          <div class="state-box value">{{stateInfo.asrbv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">总放电保护电压</div>
                          <div class="state-box value">{{stateInfo.adpbv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">总放电恢复电压</div>
                          <div class="state-box value">{{stateInfo.adrbv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">二次充电保护电压</div>
                          <div class="state-box value">{{stateInfo.ascpv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">二次放电保护电压</div>
                          <div class="state-box value">{{stateInfo.asdpv}}</div>
                          <div class="state-box unit">V</div>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="state-item">
                          <div class="state-box label">低容量报警值</div>
                          <div class="state-box value">{{stateInfo.lrlav}}</div>
                          <div class="state-box unit">AH</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </flex-box>
                <flex-box title="控制" size="mini">
                  <div class="control-box">
                    <div class="control-box-item">
                      <el-button type="primary" @click="dfBmsStartDischarge">启动放电</el-button>
                      <el-button type="success" @click="dfBmsStopDischarge">停止放电</el-button>
                    </div>
                    <div class="control-box-item">
                      <el-button type="primary" @click="dfBmsStartCharge">启动充电</el-button>
                      <el-button type="success" @click="dfBmsStopCharge">停止充电</el-button>
                    </div>
                  </div>
                </flex-box>
              </div>
            </el-tab-pane>
            <el-tab-pane label="资产信息" name="asset">
              <div class="center-box">
                <batt-asset-info
                  :batt="batt"
                  title="当前电池资产信息"
                ></batt-asset-info>
                <batt-asset-info
                  v-for="(item, key) in battRecords.slice(0, 2)"
                  :key="'key' + key"
                  :batt="item"
                  :title="item.recordTime + '-变更记录'"
                ></batt-asset-info>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </flex-layout>
    </content-box>
  </flex-layout>
</template>

<style scoped lang="less">
.table-row {
  .table-cell {
    padding-top: 8px;
    &.text-right {
      font-size: 14px;
      .iconfont {
        margin-right: 4px;
      }
    }
  }
}
.page-content {
  position: relative;
  padding-top: 8px;
  padding-bottom: 2px;
  box-sizing: border-box;
  height: 100%;
}
.center-box {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.real-time-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 8px;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
  grid-template-rows: auto 1fr;
}

.batt-list {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, 132px);
  grid-gap: 16px;
  grid-auto-rows: 40px;
  .batt-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(~@/assets/images/bg-info.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .batt-num {
      font-size: 16px;
      margin-right: 8px;
    }
  }
}
.state-item-wrapper {
  padding: 8px 8px;
  .state-item {
    display: flex;
    padding: 4px 8px;
    background-color: #0d4f65;
    white-space: nowrap;
    font-size: 14px;
    color: #00feff;
    margin-bottom: 8px;
    .state-box {
      &.label {
        color: #f0f0f0;
      }
      &.value {
        flex: 1;
        text-align: right;
      }
      &.unit {
        padding-left: 2px;
      }
    }
  }
}
.control-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .control-box-item {
    margin-bottom: 32px;
  }
}
</style>