<template>
|
<div class="realMonitoring">
|
<van-nav-bar title="实时监控" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder>
|
</van-nav-bar>
|
<div class="detailsCon">
|
<div class="card">
|
<div class="commonTitle cardTitle">
|
<van-field v-model="fieldValue" is-link readonly label="" placeholder="请选择具体站点" @click="showPopup = true" />
|
</div>
|
<div class="commonTitle">
|
<div class="label">电池状态：</div>
|
<div class="text">
|
{{backInputs.battState}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">端电压：</div>
|
<div class="text">
|
{{backInputs.group_online_vol}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">电池电流：</div>
|
<div class="text">
|
{{backInputs.groupCurr}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">更新日期：</div>
|
<div class="text">
|
{{backInputs.recDatetime}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">测试时长：</div>
|
<div class="text">
|
{{backInputs.battTestTlong}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">测试容量：</div>
|
<div class="text">
|
{{backInputs.battTestCap}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">剩余容量：</div>
|
<div class="text">
|
{{backInputs.batt_syrl_cap}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">续航时长：</div>
|
<div class="text">
|
{{backInputs.sysc}}
|
</div>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">电压</div>
|
<div class="chartWarp">
|
<bar-chart ref="vol" id="vol" unit="V" right-menu></bar-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">内阻</div>
|
<div class="chartWarp">
|
<bar-chart ref="res" id="res" unit="mΩ" max-color="red" min-color="green" right-menu></bar-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">温度</div>
|
<div class="chartWarp">
|
<bar-chart ref="temp" id="temp" unit="℃" max-color="red" min-color="green" right-menu></bar-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">电导</div>
|
<div class="chartWarp">
|
<bar-chart ref="conduct" id="conduct" right-menu></bar-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">均衡电流</div>
|
<div class="chartWarp">
|
<bar-chart ref="curr" id="curr" unit="A" right-menu></bar-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">漏液电压</div>
|
<div class="chartWarp">
|
<bar-chart ref="leakVol" id="leakVol" unit="V" right-menu></bar-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">数据表格</div>
|
<div class="listCon">
|
<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>
|
|
</div>
|
<van-popup v-model="showPopup" round position="bottom">
|
<van-cascader v-model="cascaderValue" title="请选择站点电池组" :options="options" active-color="#4b88f9" @change="onChange" @close="showPopup = false" @finish="onFinish" />
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getAllStations,
|
getBattList,
|
getBattGroupInfo,
|
realTimeAlarm,
|
JhStateActionSerchByCondition,
|
} from "@/pages/monitoring/js/api"
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("RealTime");
|
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";
|
import const_61850 from "@/assets/js/const/const_61850";
|
import const_9100 from "@/assets/js/const/const_9100";
|
import const_ld_nine from "@/assets/js/const/const_ld_nine";
|
import { number } from 'echarts/lib/export';
|
let vol, resChart, temp, conduct, currChart, leakVol, monConnRes;
|
export default {
|
mixins: [WSMixin],
|
data() {
|
let pageConfig = this.$store.getters["user/realTabsConfig"];
|
let stateList = const_61850.stateList;
|
let historyStateList = const_61850.historyStateList;
|
let lastCapacityTest = const_61850.lastCapacityTest;
|
return {
|
stateList: stateList,
|
historyStateList: historyStateList,
|
lastCapacityTest: lastCapacityTest,
|
showPopup: false,
|
cascaderValue: '',
|
fieldValue: '请选择站点',
|
// 选项列表，children 代表子选项，支持多级嵌套
|
options: [],
|
/* 电池状态 模块 组端展示 */
|
inputs: {
|
groupVol: 0 /* 端电压-组端电压 */,
|
onlineVol: 0 /* 端电压-在线电压 */,
|
groupCurr: 0 /* 电池电流 */,
|
battTestTlong: "0:00:00" /* 测试时长 */,
|
recDatetime: "1982-01-01 00:00:00" /* 更新日期 */,
|
battTestCap: 0 /* 测试容量 */,
|
battRestCap: 0, // 剩余容量
|
battState: 0 /* 电池状态 */
|
},
|
batt: {},
|
totolTable: [
|
{
|
key: "input_vol_total",
|
name: "总输入电压",
|
value: 0,
|
},
|
{
|
key: "output_vol_total",
|
name: "总输出电压",
|
value: 0,
|
},
|
],
|
volTable: [
|
{
|
key: "output_vol_one",
|
name: "输出电压1",
|
value: 0,
|
},
|
{
|
key: "output_vol_two",
|
name: "输出电压2",
|
value: 0,
|
},
|
{
|
key: "output_vol_three",
|
name: "输出电压3",
|
value: 0,
|
},
|
{
|
key: "output_vol_four",
|
name: "输出电压4",
|
value: 0,
|
},
|
{
|
key: "output_vol_five",
|
name: "输出电压5",
|
value: 0,
|
},
|
{
|
key: "output_vol_six",
|
name: "输出电压6",
|
value: 0,
|
},
|
{
|
key: "output_vol_seven",
|
name: "输出电压7",
|
value: 0,
|
},
|
{
|
key: "output_vol_eight",
|
name: "输出电压8",
|
value: 0,
|
},
|
{
|
key: "output_vol_nine",
|
name: "输出电压9",
|
value: 0,
|
},
|
{
|
key: "output_vol_ten",
|
name: "输出电压10",
|
value: 0,
|
},
|
],
|
eleTable: [
|
{
|
key: "input_curr_total",
|
name: "总输入电流",
|
value: 0,
|
},
|
{
|
key: "output_curr_total",
|
name: "总输出电流",
|
value: 0,
|
},
|
],
|
otherTable: [
|
{
|
key: "dev_version",
|
name: "版本号",
|
value: "???",
|
},
|
{
|
key: "dev_temp",
|
name: "温度",
|
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, // 设备类型
|
},
|
fodHeaders: [],
|
fodData: [],
|
}
|
},
|
components: {
|
BarChart,
|
progressBlockVerticalBar,
|
},
|
computed: {
|
backInputs() {
|
let batt = this.batt;
|
let isLd9 = this.isLd9;
|
const obj = {
|
0: "未知",
|
1: "浮充",
|
2: "充电",
|
3: "放电",
|
4: "均充",
|
5: "内阻测试",
|
},
|
list = {
|
battState: "未知",
|
group_online_vol: "在线:0.00V；组端:0.00V",
|
groupCurr: "0.00A",
|
recDatetime: "1982-01-01 00:00:00",
|
battTestTlong: this.$units.formatSeconds(0),
|
battTestCap: "0Ah",
|
batt_syrl_cap: "---",
|
sysc: "------",
|
};
|
if (this.diagram.type == -1) {
|
return list;
|
}
|
let batt_state_text =
|
this.diagram.powerCut && !isLd9
|
? "停电放电"
|
: obj[this.inputs.battState];
|
list.battState = batt_state_text + this.diagram.desc;
|
if (this.$units.regEquipType(batt.fbsdeviceId, "BTS9605")) {
|
list.group_online_vol = `组端:${this.inputs.groupVol.toFixed(2)}V`;
|
} else {
|
list.group_online_vol = `在线:${this.inputs.onlineVol.toFixed(
|
2
|
)}V；组端:${this.inputs.groupVol.toFixed(2)}V`;
|
}
|
|
list.groupCurr = this.inputs.groupCurr.toFixed(2) + "A";
|
list.recDatetime = this.inputs.recDatetime;
|
list.battTestTlong = this.$units.formatSeconds(this.inputs.battTestTlong);
|
|
list.battTestCap = this.inputs.battTestCap.toFixed(1) + "AH";
|
if (this.inputs.battState === 2) {
|
list.batt_syrl_cap = "---";
|
} else {
|
// 为0是不更新剩余容量
|
if (this.inputs.battRestCap != 0) {
|
list.batt_syrl_cap = this.inputs.battRestCap.toFixed(1);
|
}
|
}
|
if (this.inputs.battState === 3) {
|
// 为0是不更新续航时长
|
if (this.inputs.battRestCap != 0) {
|
list.sysc = this.$units.sethoubeiTime(
|
parseFloat(this.inputs.battRestCap) /
|
parseFloat(this.inputs.groupCurr)
|
);
|
}
|
} else {
|
list.sysc = "------";
|
}
|
|
// 如果当前为锂电池
|
let isLithium = this.$units.regEquipType(batt.fbsdeviceId, [
|
"lithium",
|
"lithiumPack",
|
]);
|
if (isLithium) {
|
list.batt_syrl_cap =
|
this.lithiumParams.analog.restCap.toFixed(1) + "AH";
|
}
|
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: {
|
realTimeLd9Data(res) {
|
if (res) {
|
// res = res.data;
|
if (res.code && res.data) {
|
let data = res.data2;
|
// 判断是否超时
|
let outTime = 2 * 60; //设备超时时间(2分钟)
|
var nowTime = new Date(data.note).getTime(); //当前时间
|
var record = new Date(data.recordDatetime).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:
|
let chargeMon = this.chargeMon;
|
let dischargeMon = this.dischargeMon;
|
// 存在放电和充电单体
|
if (dischargeMon != "" && chargeMon != "") {
|
this.diagram.type = 6;
|
} else if (chargeMon != "") {
|
// 存在充电单体
|
this.diagram.type = 2;
|
} else {
|
this.diagram.type = 1;
|
}
|
break;
|
case 2:
|
this.diagram.type = 0;
|
break;
|
case 3:
|
this.diagram.type = 3;
|
this.diagram.desc = "(内阻测试)";
|
break;
|
}
|
}
|
} else {
|
this.disconnect();
|
}
|
}
|
},
|
disconnect() {
|
// 设备未连接
|
this.diagram.type = -1;
|
this.setStateList("workState", "未连接");
|
this.diagram.temp = 0;
|
// 通讯状态
|
this.setStateList("connect", "异常", "table-row-error");
|
// 温度
|
this.setStateList("devTemp", "未知", "table-row-warn");
|
// 干接点
|
this.setStateList("contact", "未知", "table-row-warn");
|
// 核容终止原因
|
// this.setStateList("stopReason", "未知");
|
// 操作失败原因
|
this.setStateList("failReason", "未知");
|
// 预估续航时长
|
//this.setStateList("xuHang", "???");
|
|
// 显示遮罩层
|
this.maskShow = true;
|
|
},
|
// BTS设备信息
|
setEquipBTS(data) {
|
let batt = this.batt;
|
// 关闭遮罩层
|
this.maskShow = false;
|
// 电路图类型
|
let workstatus = parseInt(data.devWorkstate); //[0:'在线监测',1:'放电测试',2:'充电测试',3:'内阻测试',4:'未知'];
|
this.diagram.desc = "";
|
let battstate = this.inputs.battState;
|
let alarmstatus = data.devAlarmstate;
|
|
// 是否为锂电池
|
let isLithium = this.$units.regEquipType(batt.fbsdeviceId, "lithium");
|
|
// 设置停电放电状态
|
if (data.devOnlinevollow) {
|
this.inputs.battState = 5;
|
this.diagram.type = 5;
|
this.diagram.desc = "(开关闭合)";
|
this.diagram.powerCut = 1;
|
// 当前设备是BTS设备
|
if (workstatus === 0 && data.devResTestState !== 0) {
|
this.diagram.desc += "(内阻测试)";
|
}
|
|
// 锂电池详细描述为空
|
if (isLithium) {
|
this.diagram.desc = "";
|
}
|
|
return;
|
}
|
// 判断workstatus
|
switch (workstatus) {
|
case 0:
|
this.diagram.type = 0;
|
this.diagram.desc = "(开关闭合)";
|
// 当前设备是BTS设备
|
if (data.devResTestState !== 0) {
|
this.diagram.desc += "(内阻测试)";
|
}
|
break;
|
case 1:
|
if (
|
data.devTestgroupnum > 0 &&
|
data.devTestgroupnum === batt.groupIndexInFBSDevice + 1
|
) {
|
this.diagram.type = 1;
|
this.diagram.desc = "(开关断开)";
|
} else {
|
if (battstate === 3) {
|
this.diagram.type = 1;
|
this.diagram.desc = "(开关断开)";
|
} else {
|
this.diagram.type = 0;
|
this.diagram.desc = "(开关闭合)";
|
}
|
}
|
|
// 当前设备是BTS设备
|
if (data.devTesttype == 209) {
|
this.diagram.desc += "(KD测试)";
|
this.diagram.type = 3;
|
}
|
break;
|
case 2:
|
//辨别当前电池组是否在充电
|
if (
|
this.diagram.type == 2 ||
|
(data.devTestgroupnum > 0 &&
|
data.devTestgroupnum === batt.groupIndexInFBSDevice + 1)
|
) {
|
//充电
|
if (
|
alarmstatus === 1 ||
|
alarmstatus === 2 ||
|
alarmstatus === 3 ||
|
alarmstatus === 4 ||
|
alarmstatus === 6
|
) {
|
//限流充电 -->常闭接触器断开
|
this.diagram.type = 2;
|
this.diagram.desc = "(开关断开)";
|
} else {
|
//直流充电 -->常闭接触器闭合
|
this.diagram.type = 2;
|
this.diagram.desc = "(开关闭合)";
|
}
|
} else {
|
this.diagram.type = 0;
|
this.diagram.desc = "(开关闭合)";
|
}
|
break;
|
default:
|
this.diagram.type = -1;
|
this.maskShow = true;
|
break;
|
}
|
|
// 锂电池详细描述为空
|
if (isLithium) {
|
this.diagram.desc = "";
|
}
|
},
|
// 61850设备信息
|
setEquip61850(data) {
|
// 电路图类型
|
let workstatus = parseInt(data.devWorkstate); //[0:'在线监测',1:'放电测试',2:'充电测试',3:'内阻测试',4:'未知'];
|
this.diagram.desc = "";
|
// 关闭遮罩层
|
this.maskShow = false;
|
// 设置停电放电状态
|
if (data.devOnlinevollow) {
|
this.inputs.battState = 5;
|
this.diagram.type = 5;
|
this.diagram.desc = "(开关闭合)";
|
this.diagram.powerCut = 1;
|
// 当前设备是BTS设备
|
if (workstatus === 0 && data.devResTestState !== 0) {
|
this.diagram.desc += "(内阻测试)";
|
}
|
return;
|
}
|
|
switch (workstatus) {
|
case 0: //浮充状态拓扑图
|
this.diagram.type = 0;
|
this.diagram.desc = "(开关闭合)";
|
break;
|
case 4: //浮充状态(内阻测试)拓扑图
|
this.diagram.type = 0;
|
// 当前设备是否是内阻测试
|
this.diagram.desc = "(开关闭合)";
|
this.diagram.desc += "(内阻测试)";
|
break;
|
case 1: //充电状态拓扑图
|
this.diagram.type = 2;
|
this.diagram.desc = "(开关断开)";
|
break;
|
case 2: //放电状态拓扑图
|
this.diagram.type = 1;
|
this.diagram.desc = "(开关断开)";
|
break;
|
case 3: //放电状态拓扑图
|
this.diagram.type = 5;
|
break;
|
case 5: //放电状态(KD测试)拓扑图
|
this.diagram.type = 3;
|
this.diagram.desc = "(开关断开)";
|
this.diagram.desc += "(KD测试)";
|
break;
|
case 6: // 离线养护测试
|
this.diagram.type = 4;
|
this.diagram.desc = "离线养护测试";
|
break;
|
default:
|
//未知
|
this.diagram.type = -1;
|
this.diagram.desc = "(未知)";
|
this.maskShow = true;
|
break;
|
}
|
|
// 设备工作状态
|
let workStates = const_61850.workstates;
|
this.setStateList("workState", workStates[data.devWorkstate]);
|
// 核容终止原因
|
// let stopReasons = const_61850.stopreasons;
|
// if (data.devWorkstate == 2) {
|
// this.setStateList("stopReason", "未知");
|
// } else {
|
// this.setStateList(
|
// "stopReason",
|
// stopReasons[data.dev_last_captest_stop_type]
|
// );
|
// }
|
|
// 操作失败原因
|
let failReasons = const_61850.failreasons;
|
this.setStateList("failReason", failReasons[data.devAlarmstate]);
|
|
// 告警信息
|
let alarms = data.dev61850alarms.split(",");
|
// alarms = ['false', 'false', 'true', 'false', 'true'];
|
// 通讯状态
|
if (alarms[1] == "true") {
|
this.setStateList("connect", "异常", "table-row-error");
|
} else {
|
this.setStateList("connect", "正常", "");
|
}
|
|
// 温度
|
if (alarms[2] == "true") {
|
this.setStateList("devTemp", "异常", "table-row-error");
|
} else {
|
this.setStateList("devTemp", "正常", "");
|
}
|
|
// 干接点
|
if (alarms[4] == "true") {
|
this.setStateList("contact", "异常", "table-row-error");
|
} else {
|
this.setStateList("contact", "正常", "");
|
}
|
},
|
// 9605设备
|
setEquip9605(data) {
|
let batt = this.batt;
|
// 关闭遮罩层
|
this.maskShow = false;
|
// 电路图类型
|
let workstatus = parseInt(data.devWorkstate); //[0:'在线监测',1:'放电测试',2:'充电测试',3:'内阻测试',4:'未知'];
|
this.diagram.desc = "";
|
let battstate = this.inputs.battState;
|
let alarmstatus = data.devAlarmstate;
|
|
// 设置停电放电状态
|
if (data.devOnlinevollow) {
|
this.inputs.battState = 5;
|
this.diagram.type = 5;
|
this.diagram.desc = "(开关闭合)";
|
this.diagram.powerCut = 1;
|
// 当前设备是BTS设备
|
if (workstatus === 0 && data.devResTestState !== 0) {
|
this.diagram.desc += "(内阻测试)";
|
}
|
return;
|
}
|
// 判断workstatus
|
switch (workstatus) {
|
case 0:
|
this.diagram.type = 0;
|
//this.diagram.desc = '(开关闭合)';
|
// 当前设备是BTS设备
|
if (data.devResTestState !== 0) {
|
this.diagram.type = 6;
|
this.diagram.desc += "(内阻测试)";
|
}
|
break;
|
case 1:
|
this.diagram.type = 1;
|
//this.diagram.desc = '(开关断开)';
|
break;
|
case 2:
|
this.diagram.type = 2;
|
//this.diagram.desc = '(开关断开)';
|
break;
|
default:
|
this.diagram.type = -1;
|
this.maskShow = true;
|
break;
|
}
|
},
|
/* echars图表 */
|
realTimeSearch(res) {
|
if (res) {
|
let diagramType = this.diagram.type;
|
// res = res.data;
|
let data = [];
|
let chargeMon = "";
|
let dischargeMon = "";
|
if (res.code && res.data && diagramType != -1) {
|
data = res.data2.list.map((item) => {
|
if (item.monState == 1) {
|
dischargeMon += (dischargeMon == "" ? "#" : ",#") + item.monNum;
|
} else if (item.monState == 2) {
|
chargeMon += (chargeMon == "" ? "#" : ",#") + item.monNum;
|
}
|
return {
|
num1: "#" + item.monNum,
|
vol1: item.monVol,
|
res1: item.monRes,
|
temp1: item.monTmp,
|
conduct1: item.monRes ? ((1 / item.monRes) * 1000).toFixed(0) : 0,
|
curr1: item.monJhCurr,
|
leakVol1: item.monLyVol,
|
monConnRes: item.monConnRes,
|
monCap: item.mon_cap,
|
monTestCap:
|
diagramType == 1 || diagramType == 2 || diagramType == 6
|
? item.monTestCap
|
: "---",
|
monResCap:
|
diagramType == 1 || diagramType == 2 || diagramType == 6
|
? item.monRestCap
|
: "---",
|
monDisTimeLong:
|
diagramType == 1 || diagramType == 2 || diagramType == 6
|
? Math.floor(item.monDisTimeLong / 60) +
|
"时" +
|
(item.monDisTimeLong % 60) +
|
"分"
|
: "---",
|
monState: item.monState,
|
};
|
});
|
}
|
|
// 添加正在测试的单体
|
this.chargeMon = chargeMon;
|
this.dischargeMon = dischargeMon;
|
// 更新表格
|
this.table.datas = data;
|
this.table.show = true;
|
// 电压值
|
let volTempVol = [];
|
if (res.code && res.data) {
|
volTempVol = res.data2.list.map((item) => {
|
let value = diagramType == -1 ? 0 : item.monVol.toFixed(3);
|
return ["#" + item.monNum, value];
|
});
|
}
|
|
// 设置电压值
|
this.monVols = volTempVol.map((item) => {
|
return item[1];
|
});
|
|
let volBarNum = this.$units.getBarNum(volTempVol);
|
vol.title.text =
|
"最大值=" +
|
volBarNum.max.toFixed(2) +
|
"V;最小值=" +
|
volBarNum.min.toFixed(2) +
|
"V;平均值=" +
|
volBarNum.avg.toFixed(2) +
|
"V";
|
vol.series[0].data = volTempVol;
|
|
// 内阻
|
let volTempres = [];
|
if (res.code && res.data) {
|
volTempres = res.data2.list.map((item) => {
|
let value = diagramType == -1 ? 0 : item.monRes;
|
return ["#" + item.monNum, value];
|
});
|
}
|
let resBarNum = this.$units.getBarNum(volTempres);
|
resChart.title.text =
|
"最大值=" +
|
resBarNum.max.toFixed(2) +
|
"mΩ;最小值=" +
|
resBarNum.min.toFixed(2) +
|
"mΩ;平均值=" +
|
resBarNum.avg.toFixed(2) +
|
"mΩ";
|
resChart.series[0].data = volTempres;
|
|
// 温度
|
let volTempte = [];
|
if (res.code && res.data) {
|
volTempte = res.data2.list.map((item) => {
|
let value = diagramType == -1 ? 0 : item.monTmp;
|
return ["#" + item.monNum, value];
|
});
|
}
|
|
this.monTemps = volTempte.map((item) => {
|
return item[1];
|
});
|
|
let tempBarNum = this.$units.getBarNum(volTempte);
|
temp.title.text =
|
"最大值=" +
|
tempBarNum.max.toFixed(1) +
|
"℃;最小值=" +
|
tempBarNum.min.toFixed(1) +
|
"℃;平均值=" +
|
tempBarNum.avg.toFixed(1) +
|
"℃";
|
temp.series[0].data = volTempte;
|
|
// 电导
|
let conductTemp = [];
|
if (res.code && res.data) {
|
conductTemp = res.data2.list.map((item) => {
|
let value =
|
diagramType == -1 ? 0 : this.$units.getConduct(item.monRes, item.monVol);
|
return ["#" + item.monNum, value];
|
});
|
}
|
let conductBarNum = this.$units.getBarNum(conductTemp);
|
conduct.title.text =
|
"最大值=" +
|
conductBarNum.max.toFixed(0) +
|
";最小值=" +
|
conductBarNum.min.toFixed(0) +
|
";平均值=" +
|
conductBarNum.avg.toFixed(0);
|
conduct.series[0].data = conductTemp;
|
// 均衡电流
|
let currTemp = [];
|
if (res.code && res.data) {
|
currTemp = res.data2.list.map((item) => {
|
let value = diagramType == -1 ? 0 : item.monJhCurr;
|
return ["#" + item.monNum, value];
|
});
|
}
|
let currBarNum = this.$units.getBarNum(currTemp);
|
currChart.title.text =
|
"最大值=" +
|
currBarNum.max.toFixed(1) +
|
"mA;最小值=" +
|
currBarNum.min.toFixed(1) +
|
"mA;平均值=" +
|
currBarNum.avg.toFixed(1) +
|
"mA";
|
currChart.series[0].data = currTemp;
|
// 漏液电压
|
let leakVolTemp = [];
|
if (res.code && res.data) {
|
leakVolTemp = res.data2.list.map((item) => {
|
let value = diagramType == -1 ? 0 : item.monLyVol;
|
return ["#" + item.monNum, value];
|
});
|
}
|
let leakVolNum = this.$units.getBarNum(leakVolTemp);
|
leakVol.title.text =
|
"最大值=" +
|
leakVolNum.max.toFixed(1) +
|
"V;最小值=" +
|
leakVolNum.min.toFixed(1) +
|
"V;平均值=" +
|
leakVolNum.avg.toFixed(1) +
|
"V";
|
leakVol.series[0].data = leakVolTemp;
|
|
// 链接条阻值
|
let monConnResData = [];
|
if (res.code && res.data) {
|
monConnResData = res.data2.list.map((item) => {
|
let value = diagramType == -1 ? 0 : item.monConnRes;
|
return ["#" + item.monNum, value];
|
});
|
}
|
let connResBarNum = this.$units.getBarNum(monConnResData);
|
monConnRes.title.text =
|
"最大值=" +
|
connResBarNum.max.toFixed(1) +
|
"mΩ;最小值=" +
|
connResBarNum.min.toFixed(1) +
|
"mΩ;平均值=" +
|
connResBarNum.avg.toFixed(1) +
|
"mΩ";
|
monConnRes.series[0].data = monConnResData;
|
// 更新电压图表
|
this.setChart();
|
}
|
},
|
onWSOpen() {
|
this.sendMessage();
|
},
|
sendMessage() {
|
let batt = this.batt;
|
if (!batt.battGroupId) {
|
return false;
|
}
|
let params = {
|
battGroupId: batt.battGroupId,
|
devId: batt.fbsdeviceId,
|
powerDeviceId: 0,
|
groupNum: batt.groupIndexInFBSDevice,
|
pageType: "standard",
|
};
|
// console.log("====", params, JSON.stringify(params));
|
this.SOCKET.send(JSON.stringify(params));
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
let data = res.data.data;
|
// console.log(data, "=====data");
|
this.realTimeLd9Data(data.ld9);
|
this.realTimePowerOffs(data.f9100state);
|
this.realTimeSearch(data.rtdata);
|
this.realTimeGroupss(data.rtstate);
|
this.realTimeStateList(data.fod);
|
this.loadDevAla(data.rtalarm, data.rsalarm);
|
this.getLithiumAnalog(data.li9130); // 锂电池模拟量
|
this.inversionData(data.fbs9100sBuscoupleState);
|
this.dataChangeFlag = Math.random(); // 数据更新
|
},
|
search() {
|
JhStateActionSerchByCondition({
|
dev_id: this.batt.fbsdeviceId,
|
})
|
.then((res) => {
|
let resData = res.data;
|
if (resData.code == 1) {
|
let dataObj = resData.data[0];
|
for (let key in dataObj) {
|
this.totolTable.map((item) => {
|
if (item.key == key) {
|
item.value = dataObj[key];
|
}
|
});
|
this.volTable.map((item) => {
|
if (item.key == key) {
|
item.value = dataObj[key];
|
}
|
});
|
this.eleTable.map((item) => {
|
if (item.key == key) {
|
item.value = dataObj[key];
|
}
|
});
|
this.otherTable.map((item) => {
|
if (item.key == key) {
|
item.value = dataObj[key];
|
}
|
});
|
}
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
//查询电池组信息
|
getBattGroupInfo(battGroupId) {
|
getBattGroupInfo(battGroupId).then(res => {
|
let rs = res.data;
|
if (rs.code == 1) {
|
this.leafClick(rs.data[0]);
|
} else {
|
this.$toast('未获取到电池组的信息');
|
}
|
}).catch(error => {
|
console.log(error);
|
});
|
},
|
leafClick(data) {
|
this.batt = data;
|
this.realTimeAlarmss();
|
this.table.headers = getTblHeader(data.fbsdeviceId);
|
this.table.show = false;
|
// 开启循环请求
|
// this.startTimer();
|
this.$nextTick(() => {
|
// 开启循环请求
|
this.sendMessage();
|
});
|
},
|
/* 查询电路图开关状态和信息 */
|
realTimePowerOffs(res) {
|
let batt = this.batt;
|
// 设备为61850显示右侧的面板
|
if (this.$units.regEquipType(batt.fbsdeviceId, ["equip61850"])) {
|
this.stateListShow = true;
|
} else {
|
this.stateListShow = false;
|
}
|
// 查询后台数据
|
if (res) {
|
// res = res.data;
|
let outTime = 2 * 60; //设备超时时间(2分钟)
|
if (res.code && res.data) {
|
let data = res.data2;
|
// 设置版本号
|
this.devVersion = data.devVersion;
|
// 基础信息
|
this.setEquipBase(data);
|
|
// 判断是否超时
|
var nowTime = new Date(data.note).getTime(); //当前时间
|
var record = new Date(data.recordDatetime).getTime();
|
if (Math.abs(nowTime - record) / 1000 > outTime) {
|
this.disconnect();
|
} else {
|
// 未超时执行逻辑
|
let devId = batt.fbsdeviceId;
|
this.diagram.powerCut = 0;
|
// 设备为61850
|
if (this.$units.regEquipType(devId, "equip61850")) {
|
this.setEquip61850(data);
|
} else if (
|
this.$units.regEquipType(devId, [
|
"BTS",
|
"BTS9110",
|
"BTS9120",
|
"lithium",
|
"LD9",
|
"lithiumPack",
|
])
|
) {
|
this.setEquipBTS(data);
|
} else if (this.$units.regEquipType(devId, ["BTS9605", "BTS9611"])) {
|
this.setEquip9605(data);
|
} else {
|
this.disconnect();
|
}
|
}
|
} else {
|
// 设置版本号
|
this.devVersion = "";
|
// 设备处于未连接
|
this.disconnect();
|
}
|
}
|
},
|
// 设置stateList的值
|
setStateList(name, value, type) {
|
let stateList = this.stateList;
|
for (let i = 0; i < stateList.length; i++) {
|
let state = stateList[i];
|
if (state.name == name) {
|
state.value = value;
|
state.type = type ? type : "";
|
}
|
}
|
|
let historyStateList = this.historyStateList;
|
for (let i = 0; i < historyStateList.length; i++) {
|
let state = historyStateList[i];
|
if (state.name == name) {
|
state.value = value;
|
state.type = type ? type : "";
|
}
|
}
|
|
for (let i = 0, list = this.lastCapacityTest, j = list.length; i < j; i++) {
|
let state = list[i];
|
if (state.name == name) {
|
state.value = value;
|
state.type = type || "";
|
}
|
}
|
},
|
|
|
|
// 基础信息
|
setEquipBase(data) {
|
let groupIndex = this.batt.groupIndexInFBSDevice;
|
// 设备的温度
|
this.diagram.temp = data.devTemp;
|
let contactRes = (
|
groupIndex != 0 ? data.devConresist1 : data.devConresist
|
).toHold(2);
|
let dropVol = (
|
groupIndex != 0 ? data.devCondvoldp1 : data.devCondvoldp
|
).toHold(2);
|
let alarms = data.dev61850alarms.split(",");
|
if (alarms.length) {
|
this.diagram.contactRes = alarms[0] == "true" ? "k1异常" : contactRes;
|
this.diagram.dropVol = alarms[3] == "true" ? "D1异常" : dropVol;
|
} else {
|
this.diagram.contactRes = contactRes;
|
this.diagram.dropVol = dropVol;
|
}
|
},
|
|
|
/* 查询电池告警参数 */
|
realTimeAlarmss() {
|
var batt = this.batt;
|
realTimeAlarm({
|
devId: batt.fbsdeviceId,
|
}).then((res) => {
|
res = res.data;
|
if (res.code) {
|
let list = res.data.list;
|
// 单体电压
|
this.setChartMarkLine(vol, "Voltage", "Batt_Alarm_Type_MonVol", list);
|
// 单体温度
|
this.setChartMarkLine(
|
temp,
|
"Temperature",
|
"Batt_Alarm_Type_MonTmp",
|
list
|
);
|
// 单体内阻
|
this.setChartMarkLine(
|
resChart,
|
"Resistance",
|
"Batt_Alarm_Type_MonRes",
|
list
|
);
|
// 单体电导
|
this.setChartMarkLine(
|
conduct,
|
"Conductance",
|
"Batt_Alarm_Type_MonRes",
|
list
|
);
|
|
// 漏液电压
|
this.setChartMarkLine(
|
leakVol,
|
"leakVol",
|
"Batt_Alarm_Type_MonLYVol",
|
list
|
);
|
}
|
});
|
},
|
setChartMarkLine(chartData, name, almName, list) {
|
let batt = this.batt;
|
// 遍历list
|
for (let i = 0; i < list.length; i++) {
|
let item = list[i];
|
if (item.almName == almName) {
|
let high = 0;
|
let low = 0;
|
switch (name) {
|
case "Voltage": // 电压告警
|
//单体电压
|
let std_mon_vol = batt.monVolStd;
|
high = parseFloat(std_mon_vol * item.almHighCoe).toHold(3);
|
low = parseFloat(std_mon_vol * item.almLowCoe).toHold(3);
|
break;
|
case "Temperature":
|
//单体温度
|
let std_mon_tmp = 25;
|
high = parseFloat(std_mon_tmp * item.almHighCoe).toHold(1);
|
low = parseFloat(std_mon_tmp * item.almLowCoe).toHold(1);
|
break;
|
case "Resistance":
|
let std_mon_res =
|
(1 * (batt.monVolStd / 2)) / (batt.monCapStd / 100);
|
high = parseFloat(std_mon_res * item.almHighCoe).toHold(3);
|
low = parseFloat(std_mon_res * item.almLowCoe).toHold(3);
|
break;
|
case "Conductance":
|
let std_mon_ser = batt.monSerStd;
|
high = parseFloat(std_mon_ser * item.almHighCoe).toHold(0);
|
low = parseFloat(std_mon_ser * item.almLowCoe).toHold(0);
|
break;
|
case "leakVol":
|
high = parseFloat(item.almHighCoe);
|
low = parseFloat(item.almLowCoe);
|
break;
|
}
|
// 低告警
|
chartData.series[0].markLine.data[0].yAxis = low;
|
// 高告警
|
chartData.series[0].markLine.data[1].yAxis = high;
|
break;
|
}
|
}
|
},
|
|
initChart() {
|
// 电压
|
vol = {
|
title: {
|
show: true,
|
text: "最大值=0V;最小值=0V;平均值=0V",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "电压",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
},
|
],
|
};
|
// 漏液电压
|
leakVol = {
|
title: {
|
show: true,
|
text: "最大值=0V;最小值=0V;平均值=0V",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "漏液电压",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
},
|
],
|
};
|
|
// 内阻
|
resChart = {
|
title: {
|
show: true,
|
text: "最大值=0mΩ;最小值=mΩ;平均值=0mΩ",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "内阻",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
},
|
],
|
};
|
|
// 温度
|
temp = {
|
title: {
|
show: true,
|
text: "最大值=0℃;最小值=0℃;平均值=0℃",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "温度",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
},
|
],
|
};
|
|
// 电导
|
conduct = {
|
title: {
|
show: true,
|
text: "最大值=0;最小值=0;平均值=0",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "电导",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
},
|
],
|
};
|
// 均衡电流
|
currChart = {
|
title: {
|
show: true,
|
text: "最大值=0mA;最小值=0mA;平均值=0mA",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "均衡电流",
|
type: "bar",
|
data: [],
|
},
|
],
|
};
|
|
// 链接条阻值
|
monConnRes = {
|
title: {
|
show: true,
|
text: "最大值=0mΩ;最小值=0mΩ;平均值=0mΩ",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "链接条阻值",
|
type: "bar",
|
data: [],
|
},
|
],
|
};
|
// 设置配置项
|
this.setChart();
|
},
|
setChart() {
|
this.$refs.vol.setOption(vol);
|
this.$refs.res.setOption(resChart);
|
this.$refs.temp.setOption(temp);
|
this.$refs.conduct.setOption(conduct);
|
this.$refs.curr.setOption(currChart);
|
this.$refs.leakVol.setOption(leakVol);
|
},
|
/* 实时组端信息 */
|
realTimeGroupss(res) {
|
if (res) {
|
// res = res.data;
|
if (res.code && res.data) {
|
this.inputs = res.data2;
|
}
|
}
|
},
|
realTimeStateList(res) {
|
// 获取剩余天数，工作模式，组端电压，峰值电压
|
// let batt = this.batt;
|
// 仅有编号不做任何操作
|
if (this.fodHeaders.length == 1) {
|
return;
|
}
|
if (res) {
|
// res = res.data;
|
let data = [];
|
if (res.code && res.data) {
|
let rsData = res.data2;
|
let workModels = ["停止", "养护", "除硫"];
|
let list = ["One", "Two", "Three", "Four", "Five"];
|
let fodHeaders = this.fodHeaders;
|
data = list.map((item, index) => {
|
let workModel = rsData["workstate" + item];
|
return fodHeaders.map((fod) => {
|
if (fod.prop == "num") {
|
return index + 1;
|
} else if (fod.prop == "workstate") {
|
return workModels[workModel];
|
} else {
|
return rsData[fod.prop + item];
|
}
|
});
|
//return [index+1, rsData['RestTime_'+item], workModels[workModel], rsData['vgroupvol'+item], rsData['vpeakvol'+item]]
|
});
|
this.fodData = data;
|
}
|
}
|
},
|
loadDevAla(rtalarm, rsalarm) {
|
if (rtalarm) {
|
let res = rtalarm;
|
let list = [];
|
if (res.code && res.data) {
|
list = res.data2.list;
|
}
|
// this.table2.datas = list;
|
}
|
if (rsalarm) {
|
let res = rsalarm;
|
let list = [];
|
if (res.code && res.data) {
|
list = res.data2.list;
|
}
|
// this.table1.datas = list;
|
}
|
},
|
/**
|
* 读取锂电池信息 暂定读取组一的
|
*/
|
getLithiumAnalog(res) {
|
if (res) {
|
// res = res.data;
|
if (res.code && res.data) {
|
// 剩余容量进行累加
|
let restCap = 0;
|
let packVols = [];
|
let packCurrs = [];
|
res.data2.map((item) => {
|
restCap += item.restCap;
|
packVols.push(item.sumVol);
|
packCurrs.push(item.current);
|
});
|
this.packVols = packVols;
|
this.packCurrs = packCurrs;
|
let data = res.data2[0];
|
data.restCap = restCap;
|
this.lithiumParams.analog = data;
|
} else {
|
this.lithiumParams.analog = lithiumInfo.analog().params;
|
}
|
}
|
},
|
inversionData(res) {
|
// 是逆变的设备
|
if (res && this.$units.regEquipType(this.batt.fbsdeviceId, "BTS9120")) {
|
// res = res.data;
|
let data = {
|
commustate: -1, // 通讯状态
|
fanglei_state: -1, // 防雷状态
|
rlayworkmode: -1, // 空开状态
|
};
|
if (res.code) {
|
data = res.data;
|
}
|
|
if (data.rlayworkmode == 1 || data.rlayworkmode == 3) {
|
this.buscoupleSwitch = 1;
|
} else {
|
this.buscoupleSwitch = 0;
|
}
|
} else {
|
this.buscoupleSwitch = 0;
|
}
|
},
|
// 全部选项选择完毕后，会触发 finish 事件
|
onFinish({ selectedOptions }) {
|
this.showPopup = false;
|
this.fieldValue = selectedOptions.map((option) => option.text).join('-');
|
this.getBattGroupInfo(this.cascaderValue)
|
},
|
//选择站点时触发查询站点下电池组
|
onChange(select) {
|
if (select.tabIndex == 3) {
|
let objs = select.selectedOptions[select.selectedOptions.length - 1];
|
getBattList(objs.data.stationId).then((res) => {
|
let rs = res.data;
|
if (rs.code == 1) {
|
let data = rs.data;
|
data.map(item => {
|
item.text = item.stationName4 + '-' + item.battGroupName
|
item.value = item.battGroupId
|
})
|
this.options.map(item => {
|
item?.children.map(jtem => {
|
jtem?.children.map(etem => {
|
etem?.children.map(gtem => {
|
if (gtem.value == select.value) {
|
gtem.children = data
|
}
|
})
|
})
|
})
|
})
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
}
|
},
|
//查询站点信息
|
getAllStations() {
|
getAllStations({
|
stationName1: "",
|
stationName2: "",
|
stationName5: "",
|
}).then((res) => {
|
let rs = res.data;
|
let data = [];
|
if (rs.code == 1) {
|
data = rs.data;
|
}
|
// 格式化数据
|
this.formatData(data);
|
}).catch(err => {
|
console.log(err)
|
});
|
},
|
//整理数据格式
|
formatData(data) {
|
let result = [];
|
// 遍历数据构造树状
|
data.forEach(item => {
|
// 省
|
let provice = this.addData(result, item.stationName1);
|
// 市
|
let city = this.addData(provice.children, item.stationName2, provice);
|
// 区县
|
let county = this.addData(city.children, item.stationName5, city);
|
// 机房
|
let home = this.addData(county.children, item.stationName3, county, item);
|
});
|
// 设置树状列表
|
this.options = result;
|
},
|
addData(list, val, parent, data, leaf) {
|
let item;
|
let index = this.checkValIsIn(val, list);
|
let parentId = parent ? parent.text + '-' : "";
|
if (index == -1) {
|
if (leaf) {
|
item = {
|
value: parentId + val + Math.random(),
|
text: val,
|
data: data,
|
};
|
} else {
|
item = {
|
value: parentId + val + Math.random(),
|
text: val,
|
children: [],
|
data: data,
|
};
|
}
|
list.push(item);
|
} else {
|
item = list[index];
|
}
|
return item;
|
},
|
checkValIsIn(val, arr) {
|
for (let i = 0; i < arr.length; i++) {
|
if (arr[i].text == val) {
|
return i;
|
}
|
}
|
return -1;
|
},
|
setTableRowClass({ row }) {
|
if (row.monState == 1) {
|
return "red-row";
|
} else if (row.monState == 2) {
|
return "green-row";
|
}
|
return "";
|
},
|
},
|
mounted() {
|
// 初始化图表
|
this.initChart();
|
this.getAllStations();
|
|
},
|
destroyed() {
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.realMonitoring {
|
width: 100%;
|
min-height: 100%;
|
background: #f5f5f5;
|
}
|
.detailsCon {
|
padding: 24px;
|
}
|
|
.card {
|
background-color: #ffffff;
|
border-radius: 16px;
|
margin: 0 auto 24px;
|
width: 702px;
|
padding: 24px;
|
box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
|
}
|
|
.commonTitle {
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
line-height: 40px;
|
padding-bottom: 24px;
|
border-bottom: 1px solid #eeeeee;
|
margin-bottom: 22px;
|
display: flex;
|
}
|
|
.cardTitle {
|
font-weight: bold;
|
}
|
|
.cardTitle .van-cell {
|
padding: 0;
|
}
|
|
.commonTitle .label {
|
line-height: 40px;
|
display: inline-block;
|
width: 170px;
|
}
|
|
.commonTitle .text {
|
flex: 1;
|
}
|
|
.chartWarp {
|
width: 100%;
|
height: 500px;
|
}
|
|
.listCon {
|
width: 100%;
|
height: 500px;
|
border-bottom: 2px solid #eeeeee;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
position: relative;
|
margin-bottom: 22px;
|
}
|
|
.listCon .item {
|
font-size: 36px;
|
font-family: DINAlternate-Bold, DINAlternate;
|
font-weight: bold;
|
color: #4b88f9;
|
line-height: 56px;
|
text-align: center;
|
}
|
|
.listCon .item .title {
|
font-size: 28px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
line-height: 40px;
|
margin-top: 8px;
|
}
|
</style>
|
