<script setup>
|
import {nextTick, onMounted, ref} from "vue";
|
import carInfoModule from "@/views/moudle/battShow/carInfo";
|
import FlexBox from "@/components/FlexBox.vue";
|
import ChartBox from "@/components/chartBox.vue";
|
import {dataAnalysisModule, bmsAnalysisTimeModule} from "@/views/analysis/module";
|
import HdwChart from "@/components/echarts/hdwChart.vue";
|
import getNormalLine from "@/components/echarts/options/normalLine";
|
import {ElMessage} from "element-plus";
|
|
const carName = ref("");
|
const timeRange = ref([]);
|
const nowDate = new Date().format("yyyy-MM-dd hh:mm:ss");
|
timeRange.value = [new Date("2020-01-01 00:00:00"), new Date(nowDate)];
|
const {carList, getCarNames} = carInfoModule();
|
|
const {
|
analysisType,
|
searchBmsAnalysis,
|
} = dataAnalysisModule();
|
|
const title1 = ref("图表1");
|
const chart1 = ref(null);
|
let chart1Option = getNormalLine({
|
minRatio: 1,
|
maxRatio: 1,
|
});
|
|
const title2 = ref("图表2");
|
const chart2 = ref(null);
|
let chart2Option = getNormalLine({
|
minRatio: 1,
|
maxRatio: 1,
|
});
|
|
const title3 = ref("图表3");
|
const chart3 = ref(null);
|
let chart3Option = getNormalLine({
|
minRatio: 1,
|
maxRatio: 1,
|
});
|
|
const title4 = ref("图表4");
|
const chart4 = ref(null);
|
let chart4Option = getNormalLine({
|
minRatio: 1,
|
maxRatio: 1,
|
});
|
|
/**
|
* 格式化数据
|
* @param data
|
* @return {{x: [], y: [], mark: []}}
|
*/
|
const formatData = (data)=>{
|
// 初始化lineData
|
const lineData = {
|
x: [],
|
y: [],
|
mark: []
|
};
|
|
// 遍历数据
|
for(let i=0; i<data.length; i++) {
|
let itemData = data[i];
|
lineData.x.push(i);
|
|
itemData.deginData.split(",").map((item, key)=>{
|
if(lineData.y[key] === undefined) {
|
lineData.y[key] = [];
|
}
|
lineData.y[key].push(item);
|
});
|
|
// 阈值
|
lineData.mark.push(itemData.thresholdData)
|
}
|
|
return lineData;
|
}
|
|
const loading = ref(false);
|
const searchData = async ()=>{
|
loading.value = true;
|
const startTime = new Date(timeRange.value[0]).format("yyyy-MM-dd hh:mm:ss");
|
const endTime = new Date(timeRange.value[1]).format("yyyy-MM-dd hh:mm:ss");
|
const rs = await searchBmsAnalysis(carName.value, startTime, endTime);
|
loading.value = false;
|
await nextTick();
|
if(rs.code === 1 && rs.data) {
|
const data = rs.data;
|
// 图表1
|
title1.value = data.y1Name;
|
let chart1Data = formatData(data.bmsAlgorithmVoList1);
|
chart1Option.xAxis.data = chart1Data.x;
|
chart1Option.series = chart1Data.y.map((item, key)=>{
|
return {
|
name: '#'+(key+1),
|
type: 'line',
|
sampling: "lttb",
|
smooth: false,
|
symbolSize: 0,
|
data: item,
|
}
|
});
|
|
chart1Option.series.push({
|
name: '阈值',
|
type: 'line',
|
smooth: false,
|
symbolSize: 0,
|
sampling: "lttb",
|
lineStyle: {
|
color: "#FF0000"
|
},
|
data: chart1Data.mark,
|
});
|
|
// 图表2
|
title2.value = data.y2Name;
|
let chart2Data = formatData(data.bmsAlgorithmVoList2);
|
chart2Option.xAxis.data = chart2Data.x;
|
chart2Option.series = chart2Data.y.map((item, key)=>{
|
return {
|
name: '#'+(key+1),
|
type: 'line',
|
sampling: "lttb",
|
smooth: false,
|
symbolSize: 0,
|
data: item,
|
}
|
});
|
chart2Option.series.push({
|
name: '阈值',
|
type: 'line',
|
smooth: false,
|
sampling: "lttb",
|
symbolSize: 0,
|
lineStyle: {
|
color: "#FF0000"
|
},
|
data: chart2Data.mark,
|
});
|
|
// 图表3
|
title3.value = data.y3Name;
|
let chart3Data = formatData(data.bmsAlgorithmVoList3);
|
chart3Option.xAxis.data = chart3Data.x;
|
chart3Option.series = chart3Data.y.map((item, key)=>{
|
return {
|
name: '#'+(key+1),
|
type: 'line',
|
sampling: "lttb",
|
smooth: false,
|
symbolSize: 0,
|
data: item,
|
}
|
});
|
chart3Option.series.push({
|
name: '阈值',
|
type: 'line',
|
smooth: false,
|
sampling: "lttb",
|
symbolSize: 0,
|
lineStyle: {
|
color: "#FF0000"
|
},
|
data: chart3Data.mark,
|
});
|
|
|
// 图表4
|
title4.value = data.y4Name;
|
let chart4Data = formatData(data.bmsAlgorithmVoList4);
|
chart4Option.xAxis.data = chart4Data.x;
|
chart4Option.series = chart4Data.y.map((item, key)=>{
|
return {
|
name: '#'+(key+1),
|
type: 'line',
|
sampling: "lttb",
|
smooth: false,
|
symbolSize: 0,
|
data: item,
|
}
|
});
|
chart4Option.series.push({
|
name: '阈值',
|
type: 'line',
|
sampling: "lttb",
|
smooth: false,
|
symbolSize: 0,
|
lineStyle: {
|
color: "#FF0000"
|
},
|
data: chart4Data.mark,
|
});
|
|
}else {
|
ElMessage.error("暂无数据!!!");
|
initChart();
|
}
|
|
setChart();
|
}
|
|
const initChart = ()=>{
|
title1.value = "图表1";
|
chart1Option = getNormalLine({
|
minRatio: 1,
|
maxRatio: 1,
|
grid: {
|
left: '1%',
|
right: '4%',
|
bottom: '3%',
|
top: "6%",
|
containLabel: true
|
}
|
});
|
chart1Option.tooltip.show = false;
|
chart1Option.xAxis.axisLabel.show = false;
|
chart1Option.xAxis.axisLine.show = false;
|
|
title2.value = "图表2";
|
chart2Option = getNormalLine({
|
minRatio: 1,
|
maxRatio: 1,
|
grid: {
|
left: '1%',
|
right: '4%',
|
bottom: '3%',
|
top: "6%",
|
containLabel: true
|
}
|
});
|
chart2Option.tooltip.show = false;
|
chart2Option.xAxis.axisLabel.show = false;
|
chart2Option.xAxis.axisLine.show = false;
|
|
title3.value = "图表3";
|
chart3Option = getNormalLine({
|
minRatio: 1,
|
maxRatio: 1,
|
grid: {
|
left: '1%',
|
right: '4%',
|
bottom: '3%',
|
top: "6%",
|
containLabel: true
|
}
|
});
|
chart3Option.tooltip.show = false;
|
chart3Option.xAxis.axisLabel.show = false;
|
chart3Option.xAxis.axisLine.show = false;
|
|
title4.value = "图表4";
|
chart4Option = getNormalLine({
|
minRatio: 1,
|
maxRatio: 1,
|
grid: {
|
left: '1%',
|
right: '4%',
|
bottom: '3%',
|
top: "6%",
|
containLabel: true
|
}
|
});
|
chart4Option.tooltip.show = false;
|
chart4Option.xAxis.axisLabel.show = false;
|
chart4Option.xAxis.axisLine.show = false;
|
}
|
|
const setChart = ()=>{
|
chart1.value.setOption(chart1Option);
|
chart2.value.setOption(chart2Option);
|
chart3.value.setOption(chart3Option);
|
chart4.value.setOption(chart4Option);
|
}
|
const svg = `
|
<path class="path" d="
|
M 30 15
|
L 28 17
|
M 25.61 25.61
|
A 15 15, 0, 0, 1, 15 30
|
A 15 15, 0, 1, 1, 27.99 7.5
|
L 15 15
|
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
`;
|
|
const cascaderValue = ref([]);
|
|
const {
|
usefulTimeRangeList,
|
getBmsAnalysisTime
|
} = bmsAnalysisTimeModule();
|
const cascaderHandleChange = ()=>{
|
carName.value = cascaderValue.value[0];
|
timeRange.value = cascaderValue.value[1].split("~");
|
}
|
onMounted(()=>{
|
analysisType.value = 3;
|
getBmsAnalysisTime(analysisType.value);
|
getCarNames();
|
initChart();
|
setChart();
|
})
|
</script>
|
|
<template>
|
<div
|
v-loading="loading"
|
element-loading-text="查询中..."
|
:element-loading-spinner="svg"
|
element-loading-background="rgba(122, 122, 122, 0.4)"
|
class="flex-page-layout">
|
<div class="flex-page-header">
|
<div class="input-list">
|
<div class="input-item">
|
<div class="input-wrapper">
|
<div class="input-label">数据筛选:</div>
|
<div class="input-content">
|
<el-cascader
|
class="w400"
|
v-model="cascaderValue"
|
:options="usefulTimeRangeList"
|
@change="cascaderHandleChange">
|
<template #default="{ node, data }">
|
<span>{{ data.label }}</span>
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
</template>
|
</el-cascader>
|
</div>
|
</div>
|
</div>
|
<div class="input-item">
|
<el-button :disabled="cascaderValue.length === 0" :loading="loading" type="primary" @click="searchData">查询</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="flex-page-content">
|
<div class="chart-list-wrapper">
|
<div class="chart-list-content">
|
<div class="chart-list top">
|
<div class="chart-item left">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box :title="title1">
|
<hdw-chart ref="chart1"></hdw-chart>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
<div class="chart-item right">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box :title="title2">
|
<hdw-chart ref="chart2"></hdw-chart>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
</div>
|
<div class="chart-list bottom">
|
<div class="chart-item left">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box :title="title3">
|
<hdw-chart ref="chart3"></hdw-chart>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
<div class="chart-item right">
|
<flex-box>
|
<div class="flex-box-content">
|
<chart-box :title="title4">
|
<hdw-chart ref="chart4"></hdw-chart>
|
</chart-box>
|
</div>
|
</flex-box>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<style scoped lang="less">
|
.input-list {
|
.input-item {
|
display: inline-block;
|
margin-left: 8px;
|
vertical-align: middle;
|
.input-wrapper {
|
.input-content {
|
display: inline-block;
|
min-width: 160px;
|
}
|
.input-label {
|
display: inline-block;
|
line-height: 30px;
|
color: #fff;
|
font-size: 14px;
|
margin-right: 8px;
|
}
|
}
|
}
|
}
|
|
.chart-list-wrapper {
|
display: flex;
|
height: 100%;
|
flex-direction: column;
|
.chart-list-content {
|
flex: 1;
|
.chart-list {
|
display: flex;
|
height: 50%;
|
&.top {
|
padding-bottom: 4px;
|
}
|
&.bottom {
|
padding-top: 4px;
|
}
|
.chart-item {
|
flex:1;
|
&.left {
|
padding-right: 4px;
|
}
|
&.right {
|
padding-left: 4px;
|
}
|
}
|
}
|
}
|
.chart-list-footer {
|
padding: 4px 8px;
|
}
|
}
|
.flex-box-content {
|
height: 100%;
|
padding: 8px 0 8px 8px;
|
}
|
/deep/ .el-cascader.w400 {
|
width: 400px;
|
}
|
</style>
|
