<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.batt_state}}
|
</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.group_curr}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">更新日期：</div>
|
<div class="text">
|
{{backInputs.rec_datetime}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">测试时长：</div>
|
<div class="text">
|
{{backInputs.batt_test_tlong}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">测试容量：</div>
|
<div class="text">
|
{{backInputs.batt_test_cap}}
|
</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">
|
<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>
|
</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 {
|
searchStation,
|
searchBattInfo,
|
getBattGroupInfo,
|
realTimeAlarm,
|
realTimeSearch,
|
realTimeGroup,
|
JhStateActionSerchByCondition,
|
} 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";
|
let vol, resChart, temp, conduct, currChart, leakVol;
|
let tblData = [];
|
export default {
|
data() {
|
return {
|
showPopup: false,
|
cascaderValue: '',
|
fieldValue: '请选择站点',
|
// 选项列表，children 代表子选项，支持多级嵌套
|
options: [],
|
/* 电池状态 模块 组端展示 */
|
inputs: {
|
group_vol: 0 /* 端电压-组端电压 */,
|
online_vol: 0 /* 端电压-在线电压 */,
|
group_curr: 0 /* 电池电流 */,
|
batt_test_tlong: "0:00:00" /* 测试时长 */,
|
rec_datetime: "1982-01-01 00:00:00" /* 更新日期 */,
|
batt_test_cap: 0 /* 测试容量 */,
|
batt_rest_cap: 0, // 剩余容量
|
batt_state: 0 /* 电池状态 */
|
},
|
batt: {},
|
timer: new this.$units.Timeout(),
|
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: "???",
|
},
|
],
|
}
|
},
|
components: {
|
BarChart,
|
progressBlockVerticalBar,
|
},
|
computed: {
|
backInputs() {
|
let obj = {
|
0: "未知",
|
1: "浮充",
|
2: "充电",
|
3: "放电",
|
4: "均充",
|
};
|
let list = {
|
batt_state: "未知",
|
group_online_vol: "在线:0.00V；组端:0.00V",
|
group_curr: "0.00A",
|
rec_datetime: "1982-01-01 00:00:00",
|
batt_test_tlong: this.$units.formatSeconds(0),
|
batt_test_cap: "0Ah",
|
batt_syrl_cap: "---",
|
sysc: "------"
|
};
|
list.batt_state = obj[this.inputs.batt_state];
|
list.group_online_vol =
|
`在线:${this.inputs.online_vol.toFixed(
|
2
|
)}V；组端:${this.inputs.group_vol.toFixed(2)}V`;
|
list.group_curr = this.inputs.group_curr.toFixed(2) + "A";
|
list.rec_datetime = this.inputs.rec_datetime;
|
list.batt_test_tlong = this.$units.formatSeconds(this.inputs.batt_test_tlong);
|
|
list.batt_test_cap = this.inputs.batt_test_cap.toFixed(1) + "AH";
|
if (this.inputs.batt_state === 2) {
|
list.batt_syrl_cap = "---";
|
} else {
|
list.batt_syrl_cap = this.inputs.batt_rest_cap.toFixed(1) + "AH";
|
}
|
if (this.inputs.batt_state === 3) {
|
list.sysc = this.$units.sethoubeiTime(
|
parseFloat(this.inputs.batt_rest_cap) /
|
parseFloat(this.inputs.group_curr)
|
);
|
} else {
|
list.sysc = "------";
|
}
|
return list;
|
},
|
},
|
methods: {
|
//定时器
|
startTimer() {
|
this.timer.start(() => {
|
this.$axios
|
.all([
|
this.realTimeSearch(),
|
this.realTimeGroupss(),
|
this.search(),
|
])
|
.then(() => {
|
this.timer.open();
|
})
|
.catch(() => {
|
this.timer.open();
|
});
|
}, 3000);
|
},
|
search() {
|
JhStateActionSerchByCondition({
|
dev_id: this.batt.FBSDeviceId,
|
})
|
.then((res) => {
|
let resData = JSON.parse(res.data.result);
|
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];
|
}
|
});
|
}
|
}
|
// 设置输出电压柱状图
|
this.$refs.outputVolList.setData({
|
title: {
|
show: true,
|
text: "输出电压",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
color: '#323233'
|
}
|
},
|
name: "输出电压",
|
list: this.volTable,
|
});
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
//查询电池组信息
|
getBattGroupInfo(BattGroupId) {
|
getBattGroupInfo(BattGroupId).then(res => {
|
let rs = JSON.parse(res.data.result);
|
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.startTimer();
|
},
|
/* 查询电池告警参数 */
|
realTimeAlarmss() {
|
var batt = this.batt;
|
realTimeAlarm({
|
dev_id: batt.FBSDeviceId
|
}).then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let list = rs.data;
|
// 单体电压
|
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);
|
}
|
});
|
},
|
setChartMarkLine(chartData, name, alm_name, list) {
|
let batt = this.batt;
|
// 遍历list
|
for (let i = 0; i < list.length; i++) {
|
let item = list[i];
|
if (item.alm_name == alm_name) {
|
let high = 0;
|
let low = 0;
|
switch (name) {
|
case "Voltage": // 电压告警
|
//单体电压
|
let std_mon_vol = batt.MonVolStd;
|
high = parseFloat(std_mon_vol * item.alm_high_coe).toHold(3);
|
low = parseFloat(std_mon_vol * item.alm_low_coe).toHold(3);
|
break;
|
case "Temperature":
|
//单体温度
|
let std_mon_tmp = 25;
|
high = parseFloat(std_mon_tmp * item.alm_high_coe).toHold(1);
|
low = parseFloat(std_mon_tmp * item.alm_low_coe).toHold(1);
|
break;
|
case "Resistance":
|
let std_mon_res = (1 * (batt.MonVolStd / 2)) / (batt.MonCapStd / 100);
|
high = parseFloat(std_mon_res * item.alm_high_coe).toHold(3);
|
low = parseFloat(std_mon_res * item.alm_low_coe).toHold(3);
|
break;
|
case "Conductance":
|
let std_mon_ser = batt.MonSerStd;
|
high = parseFloat(std_mon_ser * item.alm_high_coe).toHold(0);
|
low = parseFloat(std_mon_ser * item.alm_low_coe).toHold(0);
|
break;
|
}
|
// 低告警
|
chartData.series[0].markLine.data[0].yAxis = low;
|
// 高告警
|
chartData.series[0].markLine.data[1].yAxis = high;
|
break;
|
}
|
}
|
},
|
/* echars图表 */
|
realTimeSearch() {
|
var batt = this.batt;
|
realTimeSearch({
|
BattGroupId: batt.BattGroupId
|
}).then(res => {
|
let rs = JSON.parse(res.data.result);
|
let data = [];
|
if (rs.code == 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,
|
curr1: item.mon_JH_curr,
|
leakVol1: item.mon_LY_vol
|
};
|
});
|
}
|
// 更新表格
|
if (this.acTabs == 'tblData') {
|
this.table.datas = data;
|
} else {
|
tblData = data;
|
}
|
// 电压值
|
let volTempVol = [];
|
if (rs.code == 1) {
|
volTempVol = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_vol];
|
});
|
}
|
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 (rs.code == 1) {
|
volTempres = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_res];
|
});
|
}
|
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 (rs.code == 1) {
|
volTempte = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_tmp];
|
});
|
}
|
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 (rs.code == 1) {
|
conductTemp = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_res ? (1 / item.mon_res * 1000).toFixed(0) : 0];
|
});
|
}
|
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 (rs.code == 1) {
|
currTemp = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_JH_curr];
|
});
|
}
|
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 (rs.code == 1) {
|
leakVolTemp = rs.data.map(item => {
|
return ["#" + item.mon_num, item.mon_LY_vol];
|
});
|
}
|
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;
|
// 更新电压图表
|
this.setChart();
|
});
|
},
|
initChart() {
|
// 电压
|
vol = {
|
title: {
|
show: true,
|
text: "最大值=0V;最小值=0V;平均值=0V",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
color: '#323233'
|
}
|
},
|
series: [{
|
name: "电压",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
}]
|
};
|
// 漏液电压
|
leakVol = {
|
title: {
|
show: true,
|
text: "最大值=0V;最小值=0V;平均值=0V",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
color: '#323233'
|
}
|
},
|
series: [{
|
name: "漏液电压",
|
type: "bar",
|
data: [],
|
}]
|
};
|
|
// 内阻
|
resChart = {
|
title: {
|
show: true,
|
text: "最大值=0mΩ;最小值=mΩ;平均值=0mΩ",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
color: '#323233'
|
}
|
},
|
series: [{
|
name: "内阻",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
}]
|
};
|
|
// 温度
|
temp = {
|
title: {
|
show: true,
|
text: "最大值=0℃;最小值=0℃;平均值=0℃",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
color: '#323233'
|
}
|
},
|
series: [{
|
name: "温度",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
}]
|
};
|
// 电导
|
conduct = {
|
title: {
|
show: true,
|
text: "最大值=0;最小值=0;平均值=0",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
color: '#323233'
|
}
|
},
|
series: [{
|
name: "电导",
|
type: "bar",
|
data: [],
|
markLine: {
|
data: getMarkLineData(),
|
},
|
}]
|
};
|
// 均衡电流
|
currChart = {
|
title: {
|
show: true,
|
text: "最大值=0mA;最小值=0mA;平均值=0mA",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
color: '#323233'
|
}
|
},
|
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() {
|
var batt = this.batt;
|
realTimeGroup(batt.BattGroupId).then(res => {
|
let rsa = JSON.parse(res.data.result);
|
if (rsa.code == 1) {
|
this.inputs = rsa.data[0];
|
}
|
}).catch(err => {
|
console.log(err)
|
});
|
},
|
// 全部选项选择完毕后，会触发 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];
|
searchBattInfo({
|
StationName1: objs.data.StationName1,
|
StationName2: objs.data.StationName2,
|
StationName5: objs.data.StationName5,
|
StationName3: objs.data.StationName3
|
}).then((res) => {
|
let rs = JSON.parse(res.data.result);
|
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)
|
});
|
}
|
},
|
//查询站点信息
|
searchStation() {
|
searchStation({
|
StationName1: "",
|
StationName2: "",
|
StationName5: "",
|
}).then((res) => {
|
let rs = JSON.parse(res.data.result);
|
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;
|
},
|
},
|
mounted() {
|
this.searchStation();
|
// 初始化图表
|
this.initChart();
|
},
|
destroyed() {
|
this.timer.stop();
|
}
|
}
|
</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: 178px;
|
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>
|
