<template>
<div id="dataScreening">
<div class="form">
<span class="SelectTitle">站点编号:</span>
<el-input v-model="site" placeholder="请输入站点编号"></el-input>
<span class="SelectTitle">时间选择:</span>
<el-date-picker
v-model="TimeValue"
type="datetimerange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
<el-select v-model="value1" placeholder="请选择因子一">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-select v-model="value2" placeholder="请选择因子二">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
</div>
<div id="echart">
<div>
<div style="width:100%;height:400px" ref="chart"></div>
</div>
<div>
<div style="width:100%;height:400px" ref="chart1"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "dataScreening",
data: function() {
return {
flag1: false,
flag2: false,
site: "",
TimeValue: [
this.moment()
.subtract("days", 3)
.format("YYYY-MM-DD HH:mm:ss"),
this.moment().format("YYYY-MM-DD HH:mm:ss")
],
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
]
}, //时间快捷选项
loading: "",
options: [
{
value: "TURB",
label: "SS(mg/L)"
},
{
value: "SBL1",
label: "流量1(m³/h)"
},
{
value: "SBL2",
label: "流量2(m³/h)"
},
{
value: "Z",
label: "水位1(m)"
},
{
value: "ZB",
label: "水位2(m)"
},
{
value: "PD05",
label: "降雨量(mm)"
}
],
value1: "SBL1",
value2: "Z",
name1: "",
name2: ""
};
},
methods: {
getName() {
let obj1 = {};
obj1 = this.options.find(item => {
return item.value === this.value1;
});
this.name1 = obj1.label;
let obj2 = {};
obj2 = this.options.find(item => {
return item.value === this.value2;
});
this.name2 = obj2.label;
},
getData1() {
var url =
this.nozzle.statement +
"?siteNo=" +
this.site +
"&startTime=" +
this.TimeValue[0] +
"&endTime=" +
this.TimeValue[1];
this.$http.get(url).then(res => {
this.flag1 = true;
this.closeLoad();
let data = res.data;
var timeList = [];
var waterList = [];
var totalSS = [];
for (let i in data) {
timeList.push(data[i].tt);
totalSS.push(data[i].totalSS);
waterList.push(data[i].totalWater);
}
this.initCharts1(timeList, totalSS, waterList);
});
},
getData2() {
var url =
this.nozzle.service +
"?siteNo=" +
this.site +
"&startTime=" +
this.TimeValue[0] +
"&endTime=" +
this.TimeValue[1] +
"&property1=" +
this.value1 +
"&property2=" +
this.value2;
this.getName();
this.$http.get(url).then(res => {
this.flag2 = true;
this.closeLoad();
let data = res.data;
var timeList = [];
var sbl1AvgList = []; //流量
var zAvgList = []; //水位
for (let i in data) {
timeList.push(data[i].tt);
sbl1AvgList.push(data[i].value1);
zAvgList.push(data[i].value2);
}
this.initCharts(timeList, sbl1AvgList, zAvgList);
});
},
search() {
if (this.site == "") {
this.$message({
message: "请输入站点编号",
type: "warning"
});
return;
}
this.loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
this.getData1();
this.getData2();
},
closeLoad() {
if (this.flag1 && this.flag2) {
this.loading.close();
}
},
initCharts(...arr) {
let legendData = [];
legendData.push(this.name1, this.name2);
let myChart = this.$echarts.init(this.$refs.chart);
// 绘制图表
var colors = ["#5793f3", "#5793f3"];
var option = {
title: {
bottom: 5,
left: "center"
},
color: colors,
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#333"
}
}
},
grid: {},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: [
{
name: legendData[0]
// icon: "image://" + require("./../../static/images/shixian.png")
},
{
name: legendData[1]
// icon: "image://" + require("./../../static/images/xuxian.png")
}
],
textStyle: {
color: "#ffffff" //字体颜色
}
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true
},
data: arr[0],
axisLabel: {
show: true,
textStyle: {
color: "#999" //这里用参数代替了
}
},
axisLine: {
lineStyle: {
color: "#333" // 颜色
}
}
}
],
yAxis: [
{
type: "value",
name: this.name1,
position: "left",
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: "{value}"
}
},
{
type: "value",
name: this.name2,
position: "right",
axisLine: {
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: "{value}"
}
}
],
series: [
{
name: this.name1,
type: "line",
data: arr[1]
},
{
name: this.name2,
type: "line",
yAxisIndex: 1,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: "dotted"
}
}
},
data: arr[2]
}
]
};
myChart.setOption(option);
},
initCharts1(...arr) {
let myChart = this.$echarts.init(this.$refs.chart1);
// 绘制图表
var colors = ["#5793f3", "#5793f3", "#675bba"];
var option = {
title: {
bottom: 5,
left: "center"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#333"
}
}
},
color: colors,
grid: {},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: [
{
name: "累计排水量"
// icon: "image://" + require("./../../static/images/shixian.png")
},
{
name: "SS负荷量"
// icon: "image://" + require("./../../static/images/xuxian.png")
}
],
textStyle: {
color: "#ffffff" //字体颜色
}
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true
},
data: arr[0],
axisLabel: {
show: true,
textStyle: {
color: "#999" //这里用参数代替了
}
},
axisLine: {
lineStyle: {
color: "#333" // 颜色
}
}
}
],
yAxis: [
{
type: "value",
name: "累计排水量（m³）",
position: "left",
axisLabel: {
formatter: "{value}"
},
axisLine: {
lineStyle: {
color: colors[0]
}
},
textStyle: {
color: "#999" //这里用参数代替了
}
},
{
type: "value",
name: "SS负荷量(g)",
position: "right",
axisLabel: {
formatter: "{value} "
},
axisLine: {
lineStyle: {
color: "#333" // 颜色
}
}
}
],
series: [
{
name: "累计排水量",
type: "line",
data: arr[2]
},
{
name: "SS负荷量",
type: "line",
yAxisIndex: 1,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: "dotted"
}
}
},
data: arr[1]
}
]
};
var option1 = {
title: {
bottom: 5,
left: "center"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#333"
}
}
},
color: colors,
grid: {},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: [
{
name: "累计排水量"
// icon: "image://" + require("./../../static/images/shixian.png")
}
],
textStyle: {
color: "#ffffff" //字体颜色
}
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true
},
data: arr[0],
axisLabel: {
show: true,
textStyle: {
color: "#999" //这里用参数代替了
}
},
axisLine: {
lineStyle: {
color: "#333" // 颜色
}
}
}
],
yAxis: [
{
type: "value",
name: "累计排水量（m³）",
position: "left",
axisLabel: {
formatter: "{value}"
},
axisLine: {
lineStyle: {
color: colors[0]
}
}
}
],
series: [
{
name: "累计排水量",
type: "line",
data: arr[2]
}
]
};
myChart.clear();
if (this.name1 != "SS(mg/L)" && this.name2 != "SS(mg/L)") {
myChart.setOption(option1);
} else {
myChart.setOption(option);
}
}
}
};
</script>
<style scoped>
/* 顶部搜索 */
.form {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
text-align: left;
color: white;
font-size: 14px;
box-sizing: border-box;
padding-left: 10px;
}
.form .el-input {
width: 200px;
margin: 0 10px;
}
.SelectTitle {
display: inline-block;
margin-left: 5px;
text-align: center;
height: 60px;
line-height: 60px;
}
#echart {
height: calc(100% - 55px);
background: rgba(53, 53, 53, 0.5);
}
#echart > div {
width: 100%;
}
</style>
