421 lines
12 KiB
Vue
421 lines
12 KiB
Vue
<!--电位展示图表-->
|
|
<template>
|
|
<el-dialog
|
|
:visible.sync="show"
|
|
:title="pointName"
|
|
:close-on-click-modal="false"
|
|
show-close
|
|
destroy-on-close
|
|
lock-scroll
|
|
append-to-body
|
|
width="1000px"
|
|
class="ems-dialog"
|
|
:before-close="handleClosed"
|
|
>
|
|
<el-card
|
|
shadow="always"
|
|
class="common-card-container common-card-container-body-no-padding time-range-card"
|
|
>
|
|
<div slot="header" class="time-range-header">
|
|
<el-radio-group class="card-title" v-model="dataUnit">
|
|
<el-radio :label="1">分钟</el-radio>
|
|
<el-radio :label="2">小时</el-radio>
|
|
<el-radio :label="3">天</el-radio>
|
|
</el-radio-group>
|
|
<date-time-select
|
|
ref="dateTimeSelect"
|
|
:data-unit="dataUnit"
|
|
@initDate="(e) => (dataRange = e || [])"
|
|
@updateDate="updateDate"
|
|
/>
|
|
</div>
|
|
<div style="height: 350px" id="searchChart"></div>
|
|
</el-card>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import resize from "@/mixins/ems/resize";
|
|
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
|
|
import {getPointValueList} from "@/api/ems/search";
|
|
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
|
|
|
|
export default {
|
|
components: {DateRangeSelect, DateTimeSelect},
|
|
mixins: [resize],
|
|
props: {
|
|
siteId: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
isDtdc() {
|
|
return this.deviceCategory === "BATTERY";
|
|
},
|
|
},
|
|
watch: {
|
|
show(val) {
|
|
if (!val) {
|
|
this.pointName = "";
|
|
this.deviceCategory = "";
|
|
this.deviceId = "";
|
|
this.dataUnit = 1;
|
|
this.child = "";
|
|
if (!this.chart) {
|
|
return;
|
|
}
|
|
this.hideLoading();
|
|
this.chart.dispose();
|
|
this.chart = null;
|
|
}
|
|
},
|
|
dataUnit: {
|
|
handler(newVal, oldVal) {
|
|
if (!this.show) return;
|
|
console.log("wacth到了dataUnit的变化", newVal, oldVal);
|
|
this.$nextTick(() => {
|
|
this.$refs.dateTimeSelect.init();
|
|
this.getDate();
|
|
});
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
chart: null,
|
|
dataUnit: 1,
|
|
dataRange: [],
|
|
child: "", //单体电池需要数据
|
|
pointName: "",
|
|
deviceCategory: "",
|
|
deviceId: "",
|
|
};
|
|
},
|
|
methods: {
|
|
showChart({pointName, deviceCategory, deviceId, child = ""}) {
|
|
//初始化数据
|
|
this.pointName = pointName;
|
|
this.deviceCategory = deviceCategory;
|
|
this.deviceId = deviceId;
|
|
child && (this.child = child);
|
|
this.show = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.dateTimeSelect.init();
|
|
this.initChart();
|
|
this.getDate();
|
|
});
|
|
},
|
|
initChart() {
|
|
this.chart = echarts.init(document.querySelector("#searchChart"));
|
|
},
|
|
showLoading() {
|
|
this.chart && this.chart.showLoading();
|
|
},
|
|
hideLoading() {
|
|
this.chart && this.chart.hideLoading();
|
|
},
|
|
getDate() {
|
|
this.showLoading();
|
|
const {
|
|
siteId,
|
|
dataUnit,
|
|
dataRange: [start = "", end = ""],
|
|
child,
|
|
deviceId,
|
|
deviceCategory,
|
|
pointName,
|
|
} = this;
|
|
let siteDeviceMap = {};
|
|
child && (siteDeviceMap[siteId] = child);
|
|
let startDate, endDate;
|
|
if (start && dataUnit === 3) {
|
|
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
|
startDate = start + " 00:00:00";
|
|
} else {
|
|
startDate = start;
|
|
}
|
|
if (end && dataUnit === 3) {
|
|
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
|
endDate = end + " 00:00:00";
|
|
} else {
|
|
endDate = end;
|
|
}
|
|
|
|
getPointValueList({
|
|
siteIds: [siteId],
|
|
deviceId,
|
|
dataUnit,
|
|
deviceCategory,
|
|
pointName,
|
|
startDate,
|
|
endDate,
|
|
siteDeviceMap,
|
|
})
|
|
.then((response) => {
|
|
this.setOption(response?.data || []);
|
|
})
|
|
.finally(() => {
|
|
this.hideLoading();
|
|
});
|
|
},
|
|
setOption(data) {
|
|
if (!this.chart) return;
|
|
this.chart.clear();
|
|
console.log("返回的数据", data);
|
|
if (!data || data.length <= 0) {
|
|
this.$message.warning("暂无数据");
|
|
}
|
|
console.log('展示的图表类型chartType', data[0].chartType)
|
|
|
|
if (data[0].chartType === 2) {
|
|
// 箱型图
|
|
this.setBoxOption(data)
|
|
} else {
|
|
//折线图
|
|
this.setLineOption(data)
|
|
}
|
|
},
|
|
setLineOption(data) {
|
|
let dataset = [];
|
|
data.forEach((item, index) => {
|
|
item.deviceList.forEach((inner) => {
|
|
dataset.push({
|
|
name: `${
|
|
this.isDtdc
|
|
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
|
|
: `${inner.deviceId}`
|
|
}`,
|
|
type: "line",
|
|
markPoint: {
|
|
symbolSize: 30,
|
|
emphasis: {
|
|
disabled: false//打开 鼠标高亮
|
|
},
|
|
data: [//最大值、最小值
|
|
{
|
|
// type: 'max',
|
|
name: `最大值`,
|
|
coord: [inner.maxDate, inner.maxValue],
|
|
relativeTo: 'coordinate',
|
|
label: {
|
|
position: "top",
|
|
formatter: item.dataType === 2 ? ([
|
|
`最大值:${inner.maxValue}`,
|
|
// `平均值:${inner.avgValue}`,
|
|
`差值:${inner.diffValue}`,
|
|
]).join('\n') : ([
|
|
`最大值:${inner.maxValue}`,
|
|
// `平均值:${inner.avgValue}`,
|
|
]).join('\n'),
|
|
},
|
|
},
|
|
{
|
|
// type: 'min',
|
|
name: `最小值`,
|
|
coord: [inner.minDate, inner.minValue],
|
|
relativeTo: 'coordinate',
|
|
label: {
|
|
position: "top",
|
|
formatter: item.dataType === 2 ? ([
|
|
`最小值:${inner.minValue}`,
|
|
// `平均值:${inner.avgValue}`,
|
|
`差值:${inner.diffValue}`,
|
|
]).join('\n') : ([
|
|
`最小值:${inner.minValue}`,
|
|
// `平均值:${inner.avgValue}`,
|
|
]).join('\n'),
|
|
}
|
|
}
|
|
]
|
|
},
|
|
xdata: [],
|
|
data: [],
|
|
});
|
|
const length = dataset.length;
|
|
inner.pointValueList.forEach((value) => {
|
|
dataset[length - 1].xdata.push(value.valueDate);
|
|
dataset[length - 1].data.push(value.pointValue);
|
|
});
|
|
});
|
|
});
|
|
console.log("折线图图表数据", dataset);
|
|
this.chart.setOption({
|
|
legend: {
|
|
// left: 'center',
|
|
// top: '10',
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: 'cross',
|
|
},
|
|
// axisPointer: {
|
|
// // 坐标轴指示器，坐标轴触发有效
|
|
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
// },
|
|
},
|
|
textStyle: {
|
|
color: "#333333",
|
|
},
|
|
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
{
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
],
|
|
series: dataset,
|
|
});
|
|
},
|
|
setBoxOption(data) {
|
|
let dataset = [];
|
|
data.forEach((item, index) => {
|
|
item.deviceList.forEach((inner) => {
|
|
dataset.push({
|
|
name: `${
|
|
this.isDtdc
|
|
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
|
|
: `${inner.deviceId}`
|
|
}`,
|
|
type: "boxplot",
|
|
// markPoint: {
|
|
// symbolSize: 30,
|
|
// emphasis: {
|
|
// disabled: false//打开 鼠标高亮
|
|
// },
|
|
// data: [//最大值、最小值
|
|
// {
|
|
// // type: 'max',
|
|
// name: `最大值`,
|
|
// coord: [inner.maxDate, inner.maxValue],
|
|
// relativeTo: 'coordinate',
|
|
// label: {
|
|
// position: "top",
|
|
// formatter: item.dataType === 2 ? ([
|
|
// `最大值:${inner.maxValue}`,
|
|
// // `平均值:${inner.avgValue}`,
|
|
// `差值:${inner.diffValue}`,
|
|
// ]).join('\n') : ([
|
|
// `最大值:${inner.maxValue}`,
|
|
// // `平均值:${inner.avgValue}`,
|
|
// ]).join('\n'),
|
|
// },
|
|
// },
|
|
// {
|
|
// // type: 'min',
|
|
// name: `最小值`,
|
|
// coord: [inner.minDate, inner.minValue],
|
|
// relativeTo: 'coordinate',
|
|
// label: {
|
|
// position: "top",
|
|
// formatter: item.dataType === 2 ? ([
|
|
// `最小值:${inner.minValue}`,
|
|
// // `平均值:${inner.avgValue}`,
|
|
// `差值:${inner.diffValue}`,
|
|
// ]).join('\n') : ([
|
|
// `最小值:${inner.minValue}`,
|
|
// // `平均值:${inner.avgValue}`,
|
|
// ]).join('\n'),
|
|
// }
|
|
// }
|
|
// ]
|
|
// },
|
|
xdata: [],
|
|
data: [],
|
|
});
|
|
const length = dataset.length;
|
|
inner.pointValueList.forEach((value) => {
|
|
const {valueDate, min, q1, median, q3, max} = value
|
|
// const mid = (max - min) / 2, minLine = min + Math.abs(median / 2),
|
|
// maxLine = max - Math.abs(median / 2)
|
|
dataset[length - 1].xdata.push(valueDate);
|
|
dataset[length - 1].data.push([min, q1, median, q3, max]);
|
|
});
|
|
});
|
|
});
|
|
console.log("箱型图图表数据", dataset);
|
|
this.chart.setOption({
|
|
legend: {
|
|
// left: 'center',
|
|
// top: '10',
|
|
},
|
|
grid: {
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
let data = params.data;
|
|
let result = params.marker + params.name + ' ' + params.seriesName + '<br/>';
|
|
result += '最小值: ' + data[1] + '<br/>';
|
|
result += '平均值: ' + data[3] + '<br/>';
|
|
result += '最大值: ' + data[5];
|
|
return result;
|
|
}
|
|
// trigger: "axis",
|
|
// axisPointer: {
|
|
// type: 'cross',
|
|
// },
|
|
// axisPointer: {
|
|
// // 坐标轴指示器，坐标轴触发有效
|
|
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
// },
|
|
},
|
|
textStyle: {
|
|
color: "#333333",
|
|
},
|
|
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
{
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
],
|
|
series: dataset,
|
|
});
|
|
},
|
|
|
|
updateDate(val) {
|
|
this.dataRange = val || [];
|
|
this.getDate();
|
|
},
|
|
handleClosed(done) {
|
|
if (!this.chart) {
|
|
return done();
|
|
}
|
|
this.chart.dispose();
|
|
this.chart = null;
|
|
done();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
::v-deep {
|
|
.card-title .el-radio {
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
</style>
|