<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">
|
<van-field v-model="timeFieldValue" is-link readonly label="" placeholder="请选择测试日期" @click="openTimePopup" class="timeInput" />
|
</div>
|
</div>
|
<div class="commonTitle" v-if="!isLD9">
|
<div class="label">显示粒度：</div>
|
<div class="text">
|
<van-field v-model="show_num" is-link readonly label="" placeholder="请选择显示粒度" @click="showPicker=true" class="timeInput" />
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">电池状态：</div>
|
<div class="text">
|
{{formateBattState}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">端电压：</div>
|
<div class="text">
|
{{top.group}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">电池电流：</div>
|
<div class="text">
|
{{top.curr}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">测试时长：</div>
|
<div class="text">
|
{{top.test_long}}
|
</div>
|
</div>
|
<div class="commonTitle">
|
<div class="label">测试容量：</div>
|
<div class="text">
|
{{top.testCap}}
|
</div>
|
</div>
|
<div class="commonTitle" v-if="!isLD9">
|
<div class="label">剩余容量：</div>
|
<div class="text">
|
{{top.re_cap}}
|
</div>
|
</div>
|
<div class="commonTitle" v-if="!isLD9">
|
<div class="label">续航时长：</div>
|
<div class="text">
|
{{top.xuhang}}
|
</div>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">{{groupVolTitle}}</div>
|
<div class="chartWarp">
|
<line-chart ref="groupVol" id="groupVol" unit="V"></line-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">{{monBarTitle}}</div>
|
<div class="chartWarp">
|
<div class="commonTitle select" v-if="!isLD9">
|
<div class="label">数据类型：</div>
|
<div class="text">
|
<van-field v-model="chartTypetext" is-link readonly label="" placeholder="选择数据类型" @click="showTypePicker = true" class="timeInput" />
|
</div>
|
</div>
|
<bar-chart ref="monBar" id="monBar" :show-label="false"></bar-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">{{monCurrTitle}}</div>
|
<div class="chartWarp">
|
<line-chart ref="groupCurr" id="groupCurr" unit="A" start-zero></line-chart>
|
</div>
|
</div>
|
|
<div class="card">
|
<div class="commonTitle cardTitle">{{monInfo.title}}</div>
|
<div class="chartWarp">
|
<line-chart ref="monInfo" id="monInfo" :unit="monInfo.unit"></line-chart>
|
</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>
|
<van-popup v-model="showTimePopup" round position="bottom">
|
<van-cascader v-if="isAio" v-model="timeCascaderValue" title="请选择测试时间" :options="test_record1.list" active-color="#4b88f9" @close="showTimePopup = false" @finish="timeOnFinish" />
|
<van-cascader v-else-if="isLD9" v-model="timeCascaderValue" title="请选择测试时间" :options="test_record2.list" active-color="#4b88f9" @close="showTimePopup = false" @finish="timeOnFinish" />
|
<van-cascader v-else v-model="timeCascaderValue" title="请选择测试时间" :options="test_record.list" active-color="#4b88f9" @close="showTimePopup = false" @finish="timeOnFinish" />
|
</van-popup>
|
<van-popup v-model="showPicker" round position="bottom">
|
<van-picker show-toolbar title="请选择显示粒度" :columns="numColumns" @cancel="showPicker = false" @confirm="pickerConfirm" />
|
</van-popup>
|
<van-popup v-model="showTypePicker" round position="bottom">
|
<van-picker show-toolbar title="请选择数据类型" :columns="chartTypes" value-key="label" @cancel="showTypePicker = false" @confirm="TypeConfirm" />
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import BarChart from "@/components/chart/BarChart.vue";
|
import LineChart from "@/components/chart/LineChart.vue";
|
|
import getSpecialPointIndex from "@/assets/js/tools/getSpecialPointIndex";
|
import const_ld_nine from "@/assets/js/const/const_ld_nine";
|
import {
|
getAllStations,
|
getBattList,
|
getBattGroupInfo,
|
searchAll_lowAction,
|
searchBattresdata,
|
searchBattTestData,
|
getLD9TestList,
|
searchHistory,
|
getLD9Testdata,
|
getLD9GrpTestdata,
|
getLD9MonCaps,
|
} from "@/pages/monitoring/js/api";
|
|
import echarts from "echarts"
|
import ECharts from "echarts/lib/echarts";
|
//引入折线图
|
import "echarts/lib/chart/bar";
|
import "echarts/lib/chart/line"
|
//引入提示框
|
import "echarts/lib/component/tooltip";
|
//引入标题
|
import "echarts/lib/component/title";
|
//引入图例标志
|
import "echarts/lib/component/legend";
|
//区域缩放
|
import "echarts/lib/component/dataZoom";
|
//markeline
|
import "echarts/lib/component/markLine"
|
// 引入自定义主题
|
import "@/components/chart/theme/transparent"
|
|
// 端信息
|
let allData = {
|
groupVol: [],
|
onlineVol: [],
|
testCurr: [],
|
testTimeLong: [],
|
monNumList: [],
|
recordTime: [],
|
testCap: [],
|
dataList: [],
|
endData: {}
|
};
|
// 单体折线信息
|
let monLineData = {
|
vol: [], // 单体电压
|
temp: [], // 单体温度
|
realCap: [], // 单体实际容量
|
resCap: [], // 单体剩余容量
|
preCap: [] // 单体容量百分比
|
};
|
// 单体柱状信息
|
let monBarData = {
|
vol: [], // 单体电压
|
temp: [], // 单体温度
|
realCap: [], // 单体实际容量
|
resCap: [], // 单体剩余容量
|
preCap: [], // 单体容量百分比
|
jh_curr: [], // 单体均衡电流
|
res: [], // 单体内阻
|
};
|
// 4个图表
|
let groupVolLineChart, currLineChart, monLineChart, monBarChart;
|
let allGraph;
|
export default {
|
data() {
|
let baseURL = this.$axios.defaults.baseURL;
|
baseURL = baseURL ? baseURL : "";
|
return {
|
showPopup: false,
|
cascaderValue: '',
|
fieldValue: '请选择站点',
|
// 选项列表，children 代表子选项，支持多级嵌套
|
options: [],
|
|
showTimePopup: false,
|
timeCascaderValue: '',
|
timeFieldValue: '请选择测试时间',
|
// 选项列表，children 代表子选项，支持多级嵌套
|
timeOptions: [],
|
|
showPicker: false,
|
numColumns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
|
HistoryData: [],
|
show_num: 1,
|
loading: false,
|
isNew: true,
|
showComparison: false,
|
dataDiffter: false,
|
volDiffer: [],
|
tempDiffer: [],
|
data: [],
|
batt: {},
|
groupVolTitle: '端电压折线图(V)',
|
groupVolQth: {
|
code: 0,
|
low: 0,
|
lowTime: '00:00:00',
|
high: 0,
|
highTime: '00:00:00',
|
qt: 0,
|
qg: 0,
|
qh: 0,
|
title: '正常'
|
},
|
top: {
|
state: "", // 电池状态
|
group: "", // 端电压
|
curr: "", // 电池电流
|
test_long: "", // 测试时长
|
testCap: "", // 测试容量
|
re_cap: "", // 剩余容量
|
xuhang: "" // 续航时长
|
},
|
test_record: {
|
value: [],
|
subList: [],
|
list: [{
|
value: "herongDischarge",
|
text: "核容放电",
|
children: []
|
},
|
{
|
value: "jianceDischarge",
|
text: "监测放电",
|
children: []
|
},
|
{
|
value: "herongCharge",
|
text: "核容充电",
|
children: []
|
},
|
{
|
value: "jianceCharge",
|
text: "监测充电",
|
children: []
|
}
|
]
|
},
|
test_record1: {
|
value: [],
|
list: [
|
{
|
value: 0,
|
text: "电池组1",
|
children: [
|
{
|
value: "herongDischarge",
|
text: "核容放电",
|
children: []
|
},
|
{
|
value: "jianceDischarge",
|
text: "监测放电",
|
children: []
|
},
|
{
|
value: "herongCharge",
|
text: "核容充电",
|
children: []
|
},
|
{
|
value: "jianceCharge",
|
text: "监测充电",
|
children: []
|
}
|
]
|
},
|
{
|
value: 1,
|
text: "电池组2",
|
children: [
|
{
|
value: "herongDischarge",
|
text: "核容放电",
|
children: []
|
},
|
{
|
value: "jianceDischarge",
|
text: "监测放电",
|
children: []
|
},
|
{
|
value: "herongCharge",
|
text: "核容充电",
|
children: []
|
},
|
{
|
value: "jianceCharge",
|
text: "监测充电",
|
children: []
|
}
|
]
|
},
|
]
|
},
|
test_record2: {
|
value: [],
|
subList: [],
|
list: [
|
{
|
value: "herongDischarge",
|
text: "核容测试",
|
testType: 1,
|
children: []
|
},
|
{
|
value: "jianceDischarge",
|
text: "监测放电",
|
testType: 3,
|
children: []
|
},
|
{
|
value: "jianceCharge",
|
text: "监测充电",
|
testType: 4,
|
children: []
|
},
|
],
|
},
|
slider: 100,
|
testTimeLong: [],
|
battState: {
|
testType: -100,
|
stopReason: ''
|
},
|
monBarTitle: "最大值=0V;最小值=0V;平均值=0V",
|
monCurrTitle: "电池电流折线图(A)",
|
showTypePicker: false,
|
chartTypetext: '单体电压',
|
chartType: 'vol',
|
chartTypes: [{
|
label: '单体电压',
|
value: 'vol',
|
unit: 'V',
|
fixed: 3,
|
},
|
{
|
label: '单体温度',
|
value: 'temp',
|
unit: '℃',
|
fixed: 1,
|
},
|
{
|
label: '单体实际容量',
|
value: 'realCap',
|
unit: 'AH',
|
fixed: 0,
|
},
|
{
|
label: '单体剩余容量',
|
value: 'resCap',
|
unit: 'AH',
|
fixed: 0,
|
},
|
{
|
label: '单体容量百分比',
|
value: 'preCap',
|
unit: '%',
|
fixed: 0
|
}
|
],
|
exportInfo: {
|
action: baseURL + "EchartPictureDowload.servlet",
|
ltop_echart: "", // 组端电压折线图
|
rtop_echart: "", // 单体电压柱状图
|
lbottom_echart: "", // 测试电流
|
rbottom_echart: "", // 单体电压折线图
|
actucap_echart: "", // 实际容量
|
restcap_echart: "", // 剩余容量
|
capperc_echart: "", // 容量百分比
|
tmp_echart: "", // 单体温度折线图
|
mon_res: "", // 单体内阻
|
JH_curr: "", // 单体均衡电流
|
last_vol: "", // 终止电压柱状图
|
last_tmp: "", // 终止温度柱状图
|
restcap_line_echart: "", // 剩余容量
|
obj_bmd: "", //
|
obj_title: "", // 落后单体阀值信息
|
arr_data: [], // 存放单体的起始信息二维数组
|
mon_vol_list: [], // 所有单体电压测试信息
|
mon_tmp_list: [], // 所有单体温度测试信息
|
mon_group_list: [] // 所有单体温度测试信息
|
},
|
low_list: [],
|
monInfo: {
|
title: "单体电压(V)",
|
unit: "V",
|
},
|
// 当前选中的单体编号
|
currMonNum: NaN,
|
}
|
},
|
components: {
|
BarChart,
|
LineChart,
|
},
|
computed: {
|
battFullName() {
|
let batt = this.batt;
|
if (batt.stationName && batt.battGroupName) {
|
return batt.stationName + "-" + batt.battGroupName;
|
}
|
return "电池组全称";
|
},
|
formateBattState() {
|
let battState = this.battState;
|
if (this.isLD9) {
|
let res = "";
|
switch (battState.testType) {
|
case 1:
|
case 3:
|
res = "放电 (终止原因：" + battState.stopReason + ")";
|
break;
|
case 4:
|
res = "充电";
|
break;
|
default:
|
res = "";
|
break;
|
}
|
return res;
|
} else {
|
if (battState.testType == 3) {
|
return "放电(终止原因：" + battState.stopReason + ")";
|
} else if (battState.testType == 2) {
|
return "充电";
|
} else {
|
return "";
|
}
|
}
|
|
},
|
isAio() {
|
// A059设备
|
let batt = this.batt;
|
return this.$units.regEquipType(batt.FBSDeviceId, ["aio"]);
|
},
|
isLD9() {
|
// LD9设备
|
let batt = this.batt;
|
return this.$units.regEquipType(batt.FBSDeviceId, ["LD9"]);
|
}
|
},
|
methods: {
|
leafClick(data) {
|
this.batt = data;
|
// 重置页面内容
|
this.init();
|
if (this.isLD9) {
|
// 获取LD9充放电记录
|
this.searchLD9TestData();
|
} else {
|
// 获取充放电记录
|
this.searchBattTestData();
|
}
|
this.isNew = false;
|
},
|
// 初始化页面数据
|
init() {
|
// 初始化充放电记录
|
this.test_record.value = [];
|
this.test_record.list[0].children = [];
|
this.test_record.list[1].children = [];
|
this.test_record.list[2].children = [];
|
this.test_record.list[3].children = [];
|
|
|
// 初始化A059充放电记录
|
if (this.isAio) {
|
this.test_record1.value = [];
|
this.test_record1.list.map(item => {
|
item.children.map(item1 => {
|
item1.children = [];
|
});
|
});
|
} else if (this.isLD9) {
|
this.test_record2.value = [];
|
this.test_record2.list[0].children = [];
|
this.test_record2.list[1].children = [];
|
this.test_record2.list[2].children = [];
|
}
|
|
this.timeFieldValue = '请选择测试时间'
|
this.timeCascaderValue = ''
|
this.timeOptions = []
|
|
// 初始化顶部文本框内容
|
this.top = {
|
state: "", // 电池状态
|
group: "", // 端电压
|
curr: "", // 电池电流
|
test_long: "", // 测试时长
|
testCap: "", // 测试容量
|
re_cap: "", // 剩余容量
|
xuhang: "---" // 续航时长
|
};
|
|
// 初始化电池状态
|
this.battState.testType = -100;
|
|
// 初始化图表
|
this.initChart();
|
},
|
// 查询测试信息
|
searchBattTestData() {
|
let batt = this.batt;
|
searchBattTestData({
|
// num: batt.fbsdeviceId,
|
battGroupId: batt.battGroupId,
|
})
|
.then(res => {
|
// 解析数据
|
let rs = res.data;
|
let herongDischarge = []; // 核容放电
|
let herongCharge = []; // 核容充电
|
let jianceDischarge = []; // 监测放电
|
let jianceCharge = []; // 监测充电
|
if (rs.code == 1) {
|
rs.data.list.forEach(item => {
|
item.value = item.testStarttime;
|
item.text = item.testStarttime;
|
item.label = item.testStarttime;
|
if (item.testType == 3) {
|
// 测试类型为放电
|
if (item.testStarttype == 3) {
|
// 核容放电
|
herongDischarge.push(item);
|
} else {
|
// 监测放电
|
jianceDischarge.push(item);
|
}
|
} else if (item.testType == 2) {
|
// 测试类型为充电
|
if (item.testStarttype == 3) {
|
// 核容充电
|
herongCharge.push(item);
|
} else {
|
// 监测充电
|
jianceCharge.push(item);
|
}
|
}
|
});
|
} else {
|
this.$toast("未获取到充放电记录");
|
}
|
// 充放电记录
|
if (this.isAio) {
|
this.setAioTestRecord(herongDischarge, 0);
|
this.setAioTestRecord(jianceDischarge, 1);
|
this.setAioTestRecord(herongCharge, 2);
|
this.setAioTestRecord(jianceCharge, 3);
|
} else {
|
this.setNormalTestRecord(herongDischarge, jianceDischarge, herongCharge, jianceCharge);
|
}
|
})
|
.catch(error => {
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
// 查询LD9测试信息
|
searchLD9TestData() {
|
let batt = this.batt;
|
getLD9TestList({
|
battGroupId: batt.battGroupId,
|
})
|
.then(res => {
|
// 解析数据
|
let rs = res.data;
|
let herongDischarge = []; // 核容测试
|
let jianceDischarge = []; // 监测放电
|
let jianceCharge = []; // 监测充电
|
if (rs.code == 1) {
|
rs.data.list.forEach((item) => {
|
item.value = item.testStarttime;
|
item.text = item.testStarttime;
|
let list = item.ld9testdata.map((v) => {
|
v.testType = item.testType;
|
v.recordNum = v.recordNums;
|
return {
|
text: "电池单体#" + v.testMonnum,
|
value: v.testMonnum,
|
value1: v
|
};
|
});
|
|
item.children = list;
|
switch (item.testType) {
|
case 1:
|
herongDischarge.push(item);
|
break;
|
case 3:
|
jianceDischarge.push(item);
|
break;
|
case 4:
|
jianceCharge.push(item);
|
break;
|
}
|
});
|
} else {
|
this.$toast("未获取到充放电记录");
|
}
|
debugger
|
// 充放电记录
|
this.test_record2.list[0].children = herongDischarge;
|
this.test_record2.list[1].children = jianceDischarge;
|
this.test_record2.list[2].children = jianceCharge;
|
})
|
.catch(error => {
|
this.$layer.close(loading);
|
console.log(error);
|
});
|
},
|
// 设置A059充放电数据
|
setAioTestRecord(data, index) {
|
data.map(item => {
|
// 电池组1充放电数据
|
if (item.upload_client_type == 1) {
|
this.test_record1.list[0].children[index].children.push(item);
|
} else {
|
this.test_record1.list[1].children[index].children.push(item);
|
}
|
});
|
},
|
// 设置普通类型充放电数据
|
setNormalTestRecord(herongDischarge, jianceDischarge, herongCharge, jianceCharge) {
|
this.test_record.list[0].children = herongDischarge;
|
this.test_record.list[1].children = jianceDischarge;
|
this.test_record.list[2].children = herongCharge;
|
this.test_record.list[3].children = jianceCharge;
|
},
|
openTimePopup() {
|
if (!!this.cascaderValue) {
|
this.showTimePopup = true;
|
} else {
|
this.$toast('请先选择站点!!!')
|
}
|
},
|
// 全部选项选择完毕后，会触发 finish 事件
|
timeOnFinish({ selectedOptions }) {
|
this.showTimePopup = false;
|
this.timeFieldValue = selectedOptions.map((option) => option.text).join('/');
|
this.test_record1.value = []
|
this.test_record.value = []
|
this.test_record2.value = []
|
selectedOptions?.map(item => {
|
if (this.isAio) {
|
this.test_record1.value.push(item.value)
|
} else if (this.isLD9) {
|
this.test_record2.value.push(item.value)
|
this.test_record2.value1 = item.value1
|
} else {
|
this.test_record.value.push(item.value)
|
}
|
})
|
this.testRecordChange()
|
},
|
pickerConfirm(value) {
|
this.show_num = value
|
this.showPicker = false
|
this.testRecordChange()
|
},
|
TypeConfirm(value) {
|
this.chartTypetext = value.label
|
this.chartType = value.value
|
this.showTypePicker = false
|
this.testRecordChange()
|
},
|
// 切换测试信息
|
testRecordChange() {
|
let testRecord = this.getTestRecord();
|
// 初始化图表
|
this.initChart();
|
// 已选择测试信息
|
if (testRecord != -1) {
|
let num = testRecord.record_num / this.show_num; // 根据粒度查询数据
|
if (this.isLD9) {
|
this.battState.testType = testRecord.testType;
|
this.currMonNum = testRecord.testMonnum;
|
//查询LD9历史数据
|
this.getLD9TestRecord(testRecord)
|
} else {
|
// 查询历史数据
|
this.searchHistory(testRecord.battGroupId, testRecord.testRecordCount, num);
|
}
|
|
}
|
},
|
getLD9TestRecord(data) {
|
this.$axios
|
.all([
|
getLD9Testdata(data),
|
getLD9GrpTestdata(data),
|
getLD9MonCaps(data),
|
])
|
.then(
|
this.$axios.spread((...res) => {
|
let res0 = res[0].data;
|
let res1 = res[1].data;
|
let res2 = res[2].data;
|
this.loading = false;
|
// 放电数据
|
if (res0.code) {
|
this.HistoryData = res0.data.list;
|
// 格式化数据
|
this.formateHisData(res0.data.list);
|
// this.searchBattresdata();
|
}
|
// 组端数据
|
if (res1.code) {
|
let data = res1.data.list[0];
|
this.grpData = data;
|
allData.groupVol = data.groupVol;
|
allData.testCurr = data.testCurr;
|
allData.testCap = data.testCap;
|
allData.testTimelong = data.testTimelong;
|
|
this.setLD9TopData();
|
const obj = const_ld_nine.stopReason;
|
this.battState.testType = data.testType;
|
this.battState.stopReason = obj[data.stopReason] || "未知";
|
}
|
// 所有单体的实际容量数据
|
let monBarVol = [];
|
if (res2.code) {
|
let data = res2.data.list;
|
monBarChart.series[0].data = monBarVol;
|
let batt = this.batt;
|
for (let i = 1, j = batt.MonCount; i <= j; i++) {
|
monBarVol.push(["#" + i, 0]);
|
}
|
data.forEach((v) => {
|
let idx = v.testMonnum - 1;
|
monBarVol[idx][1] = v.testCap.toHold(1);
|
});
|
}
|
this.setLD9BarChart();
|
})
|
)
|
.catch((err) => {
|
this.loading = false;
|
console.error(err);
|
});
|
},
|
// 获取测试的信息
|
getTestRecord() {
|
let value = this.test_record.value;
|
// A059设备
|
if (this.isAio) {
|
value = this.test_record1.value;
|
} else if (this.isLD9) {
|
value = this.test_record2.value;
|
}
|
// 没有选择充放电记录,返回-1
|
if (value.length == 0) {
|
return -1;
|
}
|
let type = value[0];
|
let time = value[1];
|
let list = this.test_record.list;
|
// A059设备
|
if (this.isAio) {
|
value = this.test_record1.value;
|
let index = value[0];
|
type = value[1];
|
time = value[2];
|
list = this.test_record1.list[index].children;
|
}
|
let result = 0;
|
// 遍历list
|
for (let i in list) {
|
let item = list[i];
|
if (item.value == type) {
|
for (let j in item.children) {
|
let child = item.children[j];
|
if (child.value == time) {
|
result = child;
|
break;
|
}
|
}
|
break;
|
}
|
}
|
if (this.isLD9) {
|
result = this.test_record2.value1;
|
}
|
// 设置电池状态
|
this.battState.testType = result.testType;
|
if (!this.isLD9) {
|
this.battState.stopReason = result.test_stoptype_reason || '未知';
|
}
|
// 返回结果集
|
return result;
|
},
|
// 查询历史信息
|
searchHistory(battGroupId, count, num) {
|
this.loading = true;
|
this.$nextTick(() => {
|
searchHistory({
|
battGroupId: battGroupId,
|
testRecordCount: count,
|
}).then(res => {
|
this.loading = false;
|
let rs = res.data;
|
let data = [];
|
// 数据
|
if (rs.code == 1) {
|
data = rs.data.list;
|
}
|
this.HistoryData = data
|
// 格式化数据
|
this.formateHisData(data);
|
this.searchBattresdata();
|
}).catch(error => {
|
this.loading = false;
|
console.log(error);
|
});
|
});
|
|
},
|
// 格式化历史信息数据
|
formateHisData(data) {
|
let filterData = data.filter((item, i) => {
|
if (item.recordNum % this.show_num == 0) {
|
return item;
|
}
|
});
|
let recordTime = -1; // 记录时间
|
let recordNum = -100; // 记录笔数
|
allData.endData = filterData[filterData.length - 1];
|
filterData.forEach((item) => {
|
let monNum = item.monNum;
|
let testTimeLong = this.$units.formatSeconds(item.testTimelong);
|
// 获取组端电压，在线电压,组端电流的信息和开辟一个单体柱状图
|
if (recordNum != item.recordNum) {
|
recordTime = item.recordTime;
|
recordNum = item.recordNum;
|
allData.groupVol.push([testTimeLong, item.groupVol]);
|
allData.onlineVol.push([testTimeLong, item.onlineVol]);
|
allData.testCurr.push([testTimeLong, item.testCurr]);
|
allData.recordTime.push(testTimeLong);
|
allData.testTimeLong.push(item.testTimelong);
|
allData.testCap.push(item.testCap);
|
allData.dataList.push(item);
|
this.testTimeLong.push(item.testTimelong);
|
// 开辟空间
|
monBarData.vol.push([]);
|
monBarData.temp.push([]);
|
monBarData.realCap.push([]);
|
monBarData.resCap.push([]);
|
monBarData.preCap.push([]);
|
}
|
// 单体电压柱状图设置
|
let monNum_text = "#" + monNum;
|
let monBarVol = monBarData.vol[monBarData.vol.length - 1];
|
monBarVol.push([monNum_text, item.monVol]);
|
|
// 单体温度柱状图
|
let monBarTemp = monBarData.temp[monBarData.temp.length - 1];
|
monBarTemp.push([monNum_text, item.monTmp]);
|
|
// 设置单体折线图信息
|
if (typeof monLineData.vol[monNum - 1] != "object") {
|
let index = monNum - 1;
|
// 开辟空间
|
monLineData.vol[index] = [];
|
monLineData.temp[index] = [];
|
monLineData.resCap[index] = [];
|
}
|
// 获取到需要使用的空间
|
let monLineVol = monLineData.vol[monNum - 1];
|
monLineVol.push([testTimeLong, item.monVol]);
|
|
let monLineTemp = monLineData.temp[monNum - 1];
|
monLineTemp.push([testTimeLong, item.monTmp]);
|
});
|
|
// 初始化图表的配置项
|
this.initChartOptions();
|
|
// 设置容量
|
this.setCapList();
|
// 设置折线图表
|
this.setLineChart();
|
// 执行滑动事件
|
this.sliderInput();
|
},
|
setCapList() {
|
let batt = this.batt;
|
let batt_test_data = monBarData.vol;
|
let batt_test_evary_record = allData.dataList;
|
for (let i = 0; i < batt_test_data.length; i++) {
|
let vol_list = batt_test_data[i].map(item => {
|
return item[1];
|
});
|
let max_vol = Math.max.apply(null, vol_list);
|
for (let j = 0; j < vol_list.length; j++) {
|
let avg_curr = batt_test_evary_record[i].testTimelong > 0 ? batt_test_evary_record[i]
|
.testCap * 3600 / batt_test_evary_record[i].testTimelong : batt_test_evary_record[i]
|
.testCurr;
|
let actionvalue = this.$units.GetMonomerCap(batt.MonCapStd, this.$units.GetHourRate(batt.MonCapStd, avg_curr),
|
batt_test_evary_record[i].testCap, max_vol, vol_list[j], batt.MonVolStd, 1);
|
let restvalue = this.$units.GetMonomerCap(batt.MonCapStd, this.$units.GetHourRate(batt.MonCapStd, avg_curr),
|
batt_test_evary_record[i].testCap, max_vol, vol_list[j], batt.MonVolStd, 0);
|
let batt_num_text = "#" + (j + 1);
|
monBarData.realCap[i].push([batt_num_text, actionvalue.toFixed(0)]);
|
monBarData.resCap[i].push([batt_num_text, restvalue.toFixed(0)]);
|
monBarData.preCap[i].push([batt_num_text, (actionvalue * 100 / batt.MonCapStd).toFixed(0)]);
|
}
|
}
|
// 容量
|
monLineData.vol.forEach((item, key) => {
|
item.forEach((volItem, volItemKey) => {
|
let resCapItem = monBarData.resCap[volItemKey];
|
if (resCapItem) {
|
monLineData.resCap[key].push([volItem[0], resCapItem[key][1]]);
|
}
|
});
|
});
|
},
|
// 拖动滑块时触发
|
sliderInput() {
|
|
// 设置头部信息
|
this.setTopData();
|
|
// 设置柱状图
|
this.setBarChart();
|
},
|
setLD9TopData() {
|
// 组端电压和在线电压
|
let groupVol = allData.groupVol;
|
let testCurr = allData.testCurr;
|
let testCap = allData.testCap;
|
|
this.top.group = "组端:" + groupVol.toFixed(2) + "V";
|
this.top.curr = testCurr.toFixed(1) + "A";
|
this.top.testCap = testCap.toFixed(1) + "AH";
|
this.top.test_long = this.$units.formatSeconds(allData.testTimelong);
|
},
|
// 设置顶部文本框的数据
|
setTopData() {
|
let batt = this.batt;
|
// 组端电压和在线电压
|
let groupVol = allData.groupVol;
|
let onlineVol = allData.onlineVol;
|
let testCurr = allData.testCurr;
|
let testCap = allData.testCap;
|
let monVols = monBarData.vol;
|
let dataList = allData.dataList;
|
let index = this.getDataIndex(groupVol.length, this.slider);
|
if (index != -1) {
|
this.top.group =
|
"在线:" +
|
onlineVol[index][1].toFixed(2) +
|
"V；组端:" +
|
groupVol[index][1].toFixed(2) +
|
"V";
|
this.top.curr = testCurr[index][1].toFixed(1) + "A";
|
this.top.testCap = testCap[index].toFixed(1) + "AH";
|
// 剩余容量
|
let monVol = monVols[index];
|
let list = dataList[index];
|
let avg_curr = list.testTimelong > 0 ? list.testCap * 3600 / list.testTimelong : list.testCurr;
|
let batNum = this.$units.getBarNum(monVol);
|
let over_cap = this.$units.GetMonomerCap(
|
batt.monCapStd,
|
this.$units.GetHourRate(batt.monCapStd, avg_curr),
|
list.testCap,
|
batNum.max,
|
batNum.min,
|
batt.monVolStd,
|
0
|
);
|
this.top.re_cap = over_cap.toFixed(1) + "AH";
|
|
}
|
// 设置续航时长
|
let lastIndex = this.getDataIndex(groupVol.length, 100);
|
if (lastIndex != -1) {
|
// 实际容量
|
let monVol = monVols[lastIndex];
|
let list = dataList[lastIndex];
|
let avg_curr =
|
list.testTimelong > 0
|
? (list.testCap * 3600) / list.testTimelong
|
: list.testCurr;
|
let batNum = this.$units.getBarNum(monVol);
|
let real_cap = this.$units.GetMonomerCap(
|
batt.monCapStd,
|
this.$units.GetHourRate(batt.monCapStd, avg_curr),
|
list.testCap,
|
batNum.max,
|
batNum.min,
|
batt.monVolStd,
|
1
|
);
|
let xuhang = batt.loadCurr ? real_cap / batt.loadCurr : 0;
|
this.top.xuhang = xuhang ? this.$units.sethoubeiTime(xuhang) : "---";
|
}
|
|
let testTimeLong = this.testTimeLong;
|
let test_long = this.$units.formatSeconds(0);
|
if (index != -1) {
|
test_long = this.$units.formatSeconds(testTimeLong[index]);
|
}
|
this.top.test_long = test_long;
|
},
|
// 设置内阻信息
|
searchBattresdata() {
|
let batt = this.batt;
|
searchBattresdata(batt.battGroupId).then(res => {
|
let rs = res.data;
|
if (rs.code == 1) {
|
let data = rs.data.list;
|
for (let i = 0; i < data.length; i++) {
|
let item = data[i];
|
let battNumText = "#" + item.monNum;
|
monBarData.jh_curr.push([battNumText, item.monJhCurr]);
|
monBarData.res.push([battNumText, item.monRes]);
|
}
|
}
|
}).catch(error => {
|
console.log(error);
|
});
|
},
|
//查询站点信息
|
searchStation() {
|
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;
|
},
|
// 全部选项选择完毕后，会触发 finish 事件
|
onFinish({ selectedOptions }) {
|
this.showPopup = false;
|
this.fieldValue = selectedOptions.map((option) => option.text).join('-');
|
this.getBattGroupInfo(this.cascaderValue)
|
},
|
//查询电池组信息
|
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);
|
});
|
},
|
//选择站点时触发查询站点下电池组
|
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)
|
});
|
}
|
},
|
// 初始化图表和图表数据
|
initChart() {
|
let batt = this.batt;
|
// 拖动条默认值100
|
this.slider = 100;
|
this.testTimeLong = [];
|
|
// 端信息
|
allData = {
|
groupVol: [],
|
onlineVol: [],
|
testCurr: [],
|
testTimeLong: [],
|
recordTime: [],
|
testCap: [],
|
monNumList: [],
|
dataList: [],
|
};
|
for (let i = 1; i <= batt.MonCount; i++) {
|
allData.monNumList[i - 1] = ("#" + i);
|
}
|
// 单体折线信息
|
monLineData = {
|
vol: [], // 单体电压
|
temp: [], // 单体温度
|
realCap: [], // 单体实际容量
|
resCap: [], // 单体剩余容量
|
preCap: [] // 单体容量百分比
|
};
|
// 单体柱状信息
|
monBarData = {
|
vol: [], // 单体电压
|
temp: [], // 单体温度
|
realCap: [], // 单体实际容量
|
resCap: [], // 单体剩余容量
|
preCap: [], // 单体容量百分比
|
jh_curr: [], // 单体均衡电流
|
res: [], // 单体内阻
|
};
|
|
if (this.isLD9) {
|
// 初始化图表的配置项
|
this.initLD9ChartOptions();
|
// 设置折线图
|
this.setLineChart();
|
// 设置柱状图
|
this.setLD9BarChart();
|
} else {
|
// 初始化图表的配置项
|
this.initChartOptions();
|
// 设置折线图
|
this.setLineChart();
|
// 设置柱状图
|
this.setBarChart();
|
}
|
},
|
initLD9ChartOptions() {
|
this.monBarTitle = "单体实际容量柱状图(AH)";
|
// 端电压折线图
|
groupVolLineChart = {
|
color: ["#0081ff", "#df9d02"],
|
title: {
|
show: false,
|
text: "端电压折线图(V)",
|
x: "left",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
legend: {
|
show: false,
|
data: ["在线电压", "组端电压"],
|
right: 0,
|
orient: "vertical",
|
},
|
series: [
|
{
|
name: "在线电压",
|
data: [],
|
},
|
{
|
name: "组端电压",
|
data: [],
|
},
|
],
|
};
|
|
// 电池电流折线图
|
currLineChart = {
|
title: {
|
show: false,
|
text: "单体电流折线图(A)",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "单体电流",
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: "#00feff",
|
},
|
{
|
offset: 1,
|
color: "transparent",
|
},
|
]),
|
},
|
data: [],
|
},
|
],
|
};
|
|
// 单体信息折线图
|
monLineChart = {
|
title: {
|
show: false,
|
text: "单体电压(V)",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [],
|
};
|
|
// 图表类型
|
// 单体信息柱状图
|
monBarChart = {
|
title: {
|
show: false,
|
text: "单体实际容量柱状图(AH)",
|
x: "center",
|
textStyle: {
|
fontSize: "14",
|
},
|
},
|
series: [
|
{
|
name: "实际容量",
|
// hColor: "#0B388B",
|
data: [],
|
},
|
],
|
};
|
},
|
initChartOptions() {
|
// 端电压折线图
|
groupVolLineChart = {
|
color: ["#0081ff", "#df9d02"],
|
title: {
|
show: false,
|
text: "端电压折线图(V)",
|
x: "left",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
legend: {
|
show: false,
|
data: ["在线电压", "组端电压"],
|
right: 0,
|
orient: "vertical"
|
},
|
series: [{
|
name: "在线电压",
|
data: []
|
},
|
{
|
name: "组端电压",
|
data: []
|
}
|
]
|
};
|
|
// 电池电流折线图
|
currLineChart = {
|
title: {
|
show: false,
|
text: "电池电流折线图(A)",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [{
|
name: "电池电流",
|
areaStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: '#00feff'
|
}, {
|
offset: 1,
|
color: 'transparent'
|
}])
|
},
|
data: []
|
}]
|
};
|
|
// 单体信息折线图
|
monLineChart = {
|
title: {
|
show: false,
|
text: "单体电压(V)",
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: []
|
};
|
|
|
// 图表类型
|
let chartInfo = this.getChartInfo();
|
let unit = chartInfo.unit;
|
let label = chartInfo.label;
|
// 单体信息柱状图
|
this.monBarTitle = "最大值=0" + unit + ";最小值=0" + unit + ";平均值=0" + unit;
|
monBarChart = {
|
title: {
|
show: false,
|
text: "最大值=0" + unit + ";最小值=0" + unit + ";平均值=0" + unit,
|
x: "center",
|
textStyle: {
|
fontSize: "14"
|
}
|
},
|
series: [{
|
name: "初始值",
|
hColor: '#0B388B',
|
data: []
|
},
|
{
|
name: label,
|
barGap: "-100%",
|
data: []
|
},
|
]
|
};
|
},
|
// 设置折线图
|
setLineChart() {
|
if (this.isLD9) {
|
// 设置端电压折线图
|
this.setLD9GroupVolLineChart();
|
// 设置电池电流折线图
|
this.setLD9CurrLineChart();
|
// 设置单体折线图
|
this.setLD9MonLineChart();
|
// 建立联动
|
this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
|
} else {
|
// 设置端电压折线图
|
this.setGroupVolLineChart();
|
// 设置电池电流折线图
|
this.setCurrLineChart();
|
// 设置单体折线图
|
this.setMonLineChart();
|
// 建立联动
|
this.$G.chartManage.connect(["groupVol", "groupCurr", "monInfo"]);
|
}
|
},
|
setLD9GroupVolLineChart() {
|
// 根据allData.groupVol数据设置groupVolLineChart的值
|
groupVolLineChart.series[0].data = allData.onlineVol;
|
groupVolLineChart.series[1].data = allData.groupVol;
|
this.groupVolTitle = "组端电压折线图(V)";
|
// 更新图表
|
this.$refs.groupVol.setOption(groupVolLineChart);
|
},
|
// 设置端电压折线图
|
setGroupVolLineChart() {
|
// 根据allData.groupVol数据设置groupVolLineChart的值
|
groupVolLineChart.series[0].data = allData.onlineVol;
|
groupVolLineChart.series[1].data = allData.groupVol;
|
let specialPoint = this.$units.getSpecialPointIndex(
|
allData.groupVol.map((item) => {
|
return item[1];
|
})
|
);
|
let markLine = {};
|
this.groupVolQth.code = specialPoint.code;
|
if (specialPoint.code && this.test_record.value[0] == "herongDischarge") {
|
let batt = this.batt;
|
let qgth = this.$units.getQgth(specialPoint, batt.monVolStd * batt.monCount);
|
this.groupVolTitle = qgth.title;
|
|
// 设置groupVolQth
|
this.groupVolQth.code = 1;
|
this.groupVolQth.low = specialPoint.minVal;
|
this.groupVolQth.lowTime = allData.groupVol[specialPoint.min][0];
|
this.groupVolQth.high = specialPoint.maxVal;
|
this.groupVolQth.highTime = allData.groupVol[specialPoint.max][0];
|
this.groupVolQth.qg = qgth.qg;
|
this.groupVolQth.qt = qgth.qt;
|
this.groupVolQth.qh = qgth.qh;
|
this.groupVolQth.title = qgth.label;
|
|
markLine = {
|
data: [
|
{
|
label: {
|
show: true,
|
position: "end",
|
formatter: [
|
"{a|" + allData.groupVol[specialPoint.min][0] + "}" + "{c|}",
|
"{b|锅底电压:" +
|
allData.groupVol[specialPoint.min][1] +
|
"V}" +
|
"{c|}",
|
].join("\n"),
|
rich: {
|
a: {},
|
b: {},
|
c: {
|
width: 60,
|
},
|
},
|
},
|
xAxis: allData.groupVol[specialPoint.min][0],
|
},
|
{
|
label: {
|
show: true,
|
position: "end",
|
formatter: [
|
"{c|}" + "{a|" + allData.groupVol[specialPoint.max][0] + "}",
|
"{c|}" +
|
"{b|驼峰电压:" +
|
allData.groupVol[specialPoint.max][1] +
|
"V}",
|
].join("\n"),
|
rich: {
|
a: {},
|
b: {},
|
c: {
|
width: 80,
|
},
|
},
|
},
|
xAxis: allData.groupVol[specialPoint.max][0],
|
},
|
],
|
};
|
} else {
|
this.groupVolTitle = "端电压折线图(V)";
|
}
|
groupVolLineChart.series[1].markLine = markLine;
|
// 更新图表
|
this.$refs.groupVol.setOption(groupVolLineChart);
|
},
|
setLD9CurrLineChart() {
|
const monNum = this.currMonNum ? '#' + this.currMonNum : '';
|
this.monCurrTitle = `单体${monNum}测试电流折线图(A)`;
|
// 根据allData.testCurr数据设置currLineChart的值
|
currLineChart.series[0].name = monNum + '电流';
|
currLineChart.series[0].data = allData.testCurr;
|
// 更新图表
|
this.$refs.groupCurr.setOption(currLineChart);
|
},
|
// 设置电池电流折线图
|
setCurrLineChart() {
|
this.monCurrTitle = "电池电流折线图(A)";
|
// 根据allData.testCurr数据设置currLineChart的值
|
currLineChart.series[0].data = allData.testCurr;
|
|
// 更新图表
|
this.$refs.groupCurr.setOption(currLineChart);
|
},
|
setLD9MonLineChart() {
|
// 根据monLineData的值设置monLineChart
|
let dataList = monLineData.vol;
|
let monNum = this.currMonNum ? '#' + this.currMonNum : '';
|
let title = `单体${monNum}测试电压折线图(V)`;
|
this.monInfo.title = title;
|
monLineChart.title.show = false;
|
monLineChart.series = dataList.map((item, index) => {
|
let monNum = "#" + (index + 1) + '电压';
|
return {
|
name: monNum,
|
data: item,
|
};
|
});
|
this.$nextTick(() => {
|
// 更新图表
|
this.$refs.monInfo.setOption(monLineChart);
|
});
|
},
|
// 设置单体折线图
|
setMonLineChart() {
|
let chartInfo = this.getChartInfo();
|
// 根据monLineData的值设置monLineChart
|
let dataList = monLineData.vol;
|
let title = chartInfo.label + "(" + chartInfo.unit + ")";
|
let unit = chartInfo.unit;
|
let isUpdate = true;
|
switch (chartInfo.value) {
|
case "vol":
|
dataList = monLineData.vol;
|
break;
|
case "temp":
|
dataList = monLineData.temp;
|
break;
|
case "resCap":
|
dataList = monLineData.resCap;
|
break;
|
default:
|
isUpdate = false;
|
break;
|
}
|
// 检测是否更新
|
if (!isUpdate) {
|
return;
|
}
|
this.monInfo.title = title;
|
this.monInfo.unit = unit;
|
monLineChart.title.show = false;
|
monLineChart.series = dataList.map((item, index) => {
|
let monNum = "#" + (index + 1);
|
return {
|
name: monNum,
|
data: item
|
};
|
});
|
|
this.$nextTick(() => {
|
// 更新图表
|
this.$refs.monInfo.setOption(monLineChart);
|
});
|
},
|
// 设置柱状图
|
setLD9BarChart() {
|
this.$refs.monBar.setOption(monBarChart);
|
},
|
// 设置柱状图
|
setBarChart() {
|
let chartInfo = this.getChartInfo();
|
let unit = chartInfo.unit;
|
let fixed = chartInfo.fixed;
|
// 根据monBarData的值设置monBarChart
|
let dataList = this.getBarDataList();
|
let index = this.getDataIndex(dataList.length, this.slider);
|
if (index != -1) {
|
let data = dataList[index];
|
let batNum = this.$units.getBarNum(data);
|
monBarChart.title.show = false;
|
monBarChart.title.text = "最大值=" + batNum.max + unit + ";最小值=" + batNum.min + unit + ";平均值=" + batNum
|
.avg.toFixed(fixed) + unit
|
this.monBarTitle = monBarChart.title.text;
|
monBarChart.series[1].name = chartInfo.label;
|
monBarChart.series[1].data = data;
|
monBarChart.series[0].data = dataList[0];
|
} else {
|
console.log("未获取到值")
|
}
|
// 设置柱状图
|
this.$refs.monBar.setOption(monBarChart);
|
},
|
getBarDataList() {
|
let chartInfo = this.getChartInfo();
|
// 根据monBarData的值设置monBarChart
|
let dataList = monBarData.vol;
|
switch (chartInfo.value) {
|
case 'vol':
|
dataList = monBarData.vol;
|
break;
|
case 'temp':
|
dataList = monBarData.temp;
|
break;
|
case 'realCap':
|
dataList = monBarData.realCap;
|
break;
|
case 'resCap':
|
dataList = monBarData.resCap;
|
break;
|
case 'preCap':
|
dataList = monBarData.preCap;
|
break;
|
default:
|
dataList = monBarData.vol
|
break;
|
}
|
|
return dataList;
|
},
|
getChartInfo() {
|
let chartType = this.chartType;
|
let chartTypes = this.chartTypes;
|
let chartTypeInfo = chartTypes[0];
|
for (let i = 0; i < chartTypes.length; i++) {
|
if (chartType == chartTypes[i].value) {
|
chartTypeInfo = chartTypes[i];
|
break;
|
}
|
}
|
return chartTypeInfo;
|
},
|
// 根据百分比获取显示的数据的笔数
|
getDataIndex(num, percent) {
|
if (percent <= 0) {
|
return 0;
|
}
|
return Math.floor(num * percent / 100) - 1;
|
},
|
searchAll_lowAction() {
|
searchAll_lowAction()
|
.then((res) => {
|
res = res.data;
|
if (res.code) {
|
this.low_list = res.data.list;
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
getLow(lowtype, lownametype) {
|
let low_list = this.low_list;
|
if (lowtype != undefined && low_list != undefined && lownametype != undefined) {
|
for (var i = 0; i < low_list.length; i++) {
|
if (lowtype == low_list[i].low_type && lownametype == low_list[i].low_nametype) {
|
return low_list[i];
|
}
|
}
|
}
|
},
|
},
|
mounted() {
|
// 初始化图表
|
this.initChart();
|
this.searchStation();
|
|
this.searchAll_lowAction();
|
},
|
}
|
</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 {
|
display: inline-flex;
|
align-items: center;
|
width: 170px;
|
}
|
|
.commonTitle .text {
|
flex: 1;
|
}
|
|
.chartWarp {
|
width: 100%;
|
height: 500px;
|
position: relative;
|
}
|
|
.chartWarp .select{
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
z-index: 2000;
|
}
|
|
.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;
|
}
|
.timeInput{
|
padding: 0;
|
}
|
</style>
|
