319 lines
7.8 KiB
Vue
319 lines
7.8 KiB
Vue
<template>
|
|
<div class="e-leakage-detail">
|
|
<div class="e-form-heard">
|
|
<div class="heard-query">
|
|
<div
|
|
@click="
|
|
() => {
|
|
queryParams.timeType = 'day';
|
|
}
|
|
"
|
|
:class="
|
|
queryParams.timeType === 'day'
|
|
? 'data-type data-type-selected'
|
|
: 'data-type'
|
|
"
|
|
>
|
|
日
|
|
</div>
|
|
<div
|
|
@click="
|
|
() => {
|
|
queryParams.timeType = 'month';
|
|
}
|
|
"
|
|
:class="
|
|
queryParams.timeType === 'month'
|
|
? 'data-type data-type-selected'
|
|
: 'data-type'
|
|
"
|
|
class="data-type"
|
|
>
|
|
月
|
|
</div>
|
|
<div class="other-query">
|
|
<span>日期</span>
|
|
<el-date-picker
|
|
v-if="queryParams.timeType === 'day'"
|
|
v-model="time"
|
|
type="date"
|
|
style="width: 150px"
|
|
placeholder="选择日期"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd 00:00:00"
|
|
:clearable="false"
|
|
>
|
|
</el-date-picker>
|
|
<el-date-picker
|
|
v-model="time"
|
|
v-if="queryParams.timeType === 'month'"
|
|
type="month"
|
|
style="width: 150px"
|
|
format="yyyy-MM"
|
|
value-format="yyyy-MM-01 00:00:00"
|
|
:clearable="false"
|
|
placeholder="选择月"
|
|
>
|
|
</el-date-picker>
|
|
<el-button type="primary" @click="handleQuery" size="small">查询</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="e-alarm-echarts">
|
|
<e-echarts-line
|
|
v-loading="loading"
|
|
element-loading-text="拼命加载中"
|
|
element-loading-spinner="el-icon-loading"
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
ref="echartsLineDetail"
|
|
:styles="echartsOption.styles"
|
|
:colorList="echartsOption.colorList"
|
|
:eId="echartsOption.eId"
|
|
:option="resultOption"
|
|
></e-echarts-line>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import EEchartsLine from "@/components/Echarts/EEchartsLine";
|
|
import * as echarts from "echarts";
|
|
import { projectLeakageChart } from "@/api/iot/project_new";
|
|
export default {
|
|
name: "ELeakageDetail",
|
|
props: {
|
|
sourceId: {
|
|
type: [Number, String],
|
|
require: true,
|
|
},
|
|
tempType: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
deviceId: {
|
|
type: [Number, String],
|
|
require: true
|
|
}
|
|
},
|
|
components: {
|
|
EEchartsLine
|
|
},
|
|
data() {
|
|
return {
|
|
time: "",
|
|
queryParams: {
|
|
timeType: "day",
|
|
time: "",
|
|
deviceId: "",
|
|
},
|
|
echartsOption: {
|
|
styles: "width: 100%; height: 100%;",
|
|
colorList: ["#EE6666", "#FFCC00"],
|
|
eId: "ELeakageDetailEchart",
|
|
},
|
|
title: "24小时报警情况",
|
|
typeName: "alarm",
|
|
resultOption: {
|
|
color: ["#EE6666", "#FFC900"],
|
|
title: {
|
|
text: "",
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
bottom: 0,
|
|
data: ["预警", "报警"],
|
|
textStyle: {
|
|
color: "#344567",
|
|
fontSize: 14,
|
|
fontWeight: 400,
|
|
},
|
|
},
|
|
grid: {
|
|
left: "20",
|
|
right: "20",
|
|
bottom: "35",
|
|
top: 30,
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
show: true,
|
|
data: [],
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#606266",
|
|
},
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#606266",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "--",
|
|
type: "line",
|
|
smooth: false,
|
|
symbolSize: 2,
|
|
markPoint: {
|
|
symbolSize: 35,
|
|
data: [
|
|
{ type: "max", name: "Max" },
|
|
{ type: "min", name: "Min" },
|
|
],
|
|
},
|
|
label: {
|
|
show: false,
|
|
formatter: function (params) {
|
|
return echarts.format.formatTime("yyyy-MM-dd", params.value);
|
|
},
|
|
backgroundColor: "#7581BD",
|
|
},
|
|
data: [],
|
|
},
|
|
],
|
|
},
|
|
loading: false
|
|
};
|
|
},
|
|
created() {
|
|
this.time =
|
|
this.queryParams.timeType === "day"
|
|
? this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00")
|
|
: this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
|
|
this.handleQuery();
|
|
},
|
|
methods: {
|
|
handleQuery() {
|
|
this.loading = true
|
|
this.queryParams.deviceId = this.deviceId;
|
|
this.time =
|
|
this.queryParams.timeType === "day"
|
|
? this.parseTime(new Date(this.time), "{y}-{m}-{d} 00:00:00")
|
|
: this.parseTime(new Date(this.time), "{y}-{m}-01 00:00:00");
|
|
this.getDeviceRecordEcharts();
|
|
},
|
|
// 查询 图表 数据
|
|
getDeviceRecordEcharts() {
|
|
projectLeakageChart(
|
|
Object.assign(this.queryParams, {
|
|
projectId: this.sourceId,
|
|
time: this.time,
|
|
typeCode: this.tempType,
|
|
})
|
|
).then((res) => {
|
|
this.resultOption.xAxis.data = res.data["name"];
|
|
this.resultOption.legend.data = Object.keys(res.data).filter((v) => {
|
|
v !== "name";
|
|
});
|
|
var list = Object.keys(res.data).map((v) => {
|
|
if (v !== "name") {
|
|
return {
|
|
name: v,
|
|
type: "line",
|
|
smooth: false,
|
|
symbolSize: 2,
|
|
markPoint: {
|
|
symbolSize: 35,
|
|
data: [
|
|
{ type: "max", name: "Max" },
|
|
{ type: "min", name: "Min" },
|
|
],
|
|
},
|
|
label: {
|
|
show: false,
|
|
formatter: function (params) {
|
|
return echarts.format.formatTime("yyyy-MM-dd", params.value);
|
|
},
|
|
backgroundColor: "#7581BD",
|
|
},
|
|
data: res.data[v],
|
|
};
|
|
}
|
|
});
|
|
this.resultOption.series = [...list];
|
|
this.updateEcharts();
|
|
});
|
|
},
|
|
// 类型发生变化根据新数据刷新 图表信息
|
|
updateEcharts() {
|
|
this.loading = false;
|
|
this.$refs.echartsLineDetail.updateEchart();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.e-leakage-detail {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.e-form-heard {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
.heard-query {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
.data-type {
|
|
width: 42px;
|
|
height: 32px;
|
|
background: #f4f5f7;
|
|
border-radius: 50%;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 300;
|
|
color: #6b778c;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0 5px;
|
|
cursor: default;
|
|
}
|
|
.data-type-selected {
|
|
background: #1890ff;
|
|
color: #f4f5f7;
|
|
}
|
|
.other-query {
|
|
display: flex;
|
|
width: 420px;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
.other-print {
|
|
font-size: 20px;
|
|
}
|
|
.other-print:hover {
|
|
color: #1890ff;
|
|
}
|
|
}
|
|
}
|
|
.e-alarm-echarts {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
}
|
|
</style>
|