提交；补充模板代码
This commit is contained in:
23688nl
parent
0d0315f8bf
commit
fe0bb897ab
|
|
@ -35,6 +35,10 @@ export default {
|
|||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
selectProjectId: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
:result="alarmInfoResult"
|
||||
@eventFullscreen="eventFullscreenMap"
|
||||
:projectList="projectList"
|
||||
:selectProjectId="projectId"
|
||||
></map-wrap>
|
||||
|
||||
<map-wrap-personal
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
style="position: relative;top: -45px;"
|
||||
ref="bigscLocationMap"
|
||||
:projectList="projectList"
|
||||
:selectProjectId="selectProjectId"
|
||||
></amap-wrap>
|
||||
</div>
|
||||
</nav-temp>
|
||||
|
|
@ -39,7 +40,7 @@ export default {
|
|||
amapWrap,
|
||||
NavTemp,
|
||||
},
|
||||
props: ["countResult", "projectList", "fullscreen", 'result'],
|
||||
props: ["countResult", "projectList", "fullscreen", 'result', 'selectProjectId'],
|
||||
data() {
|
||||
return {
|
||||
imgs,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,318 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue