142 lines
3.4 KiB
Vue
142 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-range-picker
|
|
separator="至"
|
|
:placeholder="['开始日期', '结束日期']"
|
|
:defaultValue="datetimeRange"
|
|
@change="dateRangeChange"
|
|
></a-range-picker>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-select
|
|
v-model="device"
|
|
placeholder="请选择"
|
|
@change="onDeviceChange"
|
|
|
|
>
|
|
<a-select-option
|
|
v-for="item in deviceList"
|
|
:key="item._id"
|
|
|
|
:value="item._id"
|
|
> {{item.device_name}} </a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
</a-row>
|
|
<a-spin :spinning="loading">
|
|
<a-row>
|
|
<SZJCChart :dataRow="waterData" :labelMap="labelMap"></SZJCChart>
|
|
</a-row>
|
|
</a-spin>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SZJCChart from "./SZJCChart";
|
|
import { getData, URL_MAP } from "@/utils/http";
|
|
import Moment from 'moment'
|
|
import { processWater } from '@/utils/water'
|
|
export default {
|
|
components: {
|
|
SZJCChart,
|
|
},
|
|
data() {
|
|
return {
|
|
datetimeRange: [Moment('2020-10-01'), Moment('2020-12-31')],
|
|
update: false,
|
|
device: "",
|
|
deviceList: [],
|
|
deviceInstance: {},
|
|
labelMap: {},
|
|
waterData: [],
|
|
loading: false,
|
|
};
|
|
},
|
|
watch: {
|
|
device: function (old, newVal) {
|
|
for (let i = 0; i < this.deviceList.length; i++) {
|
|
if (this.deviceList[i]._id === newVal) {
|
|
this.deviceInstance = this.deviceList[i];
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
async initSeting() {
|
|
let sensors = (await getData(URL_MAP.SENSOR_LIST)).data
|
|
const labelMap = {}
|
|
sensors.forEach(s => labelMap[s.param_key] = s.param_name)
|
|
this.labelMap = labelMap
|
|
},
|
|
|
|
async initDevice() {
|
|
const device_ = (await getData(URL_MAP.DEVICE_LIST)).data;
|
|
try {
|
|
const device = device_.filter((item) => item.state == 1);
|
|
this.deviceList = device;
|
|
device.forEach((item) => {
|
|
Object.keys(this.labelMap).forEach((k) => {
|
|
if (item[k + "_factor"] === undefined) {
|
|
item[k + "_factor"] = 1;
|
|
}
|
|
});
|
|
});
|
|
this.device = device[0]._id
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
},
|
|
|
|
async getData() {
|
|
this.loading = true
|
|
try {
|
|
const params = {
|
|
'data__collect_time__gte':this.datetimeRange[0].toDate().getTime(),
|
|
'data__collect_time__lte':this.datetimeRange[1].toDate().getTime(),
|
|
'device_id':this.device
|
|
}
|
|
let data = await getData(URL_MAP.WATER_LIST, params)
|
|
// console.log(data)
|
|
this.waterData = processWater(data.data, Object.keys(this.labelMap))
|
|
// console.log(this.waterData)
|
|
} catch (e) {
|
|
console.log(e);
|
|
this.waterData = [];
|
|
}
|
|
finally{
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
onDeviceChange(value) {
|
|
this.device = value
|
|
this.getData();
|
|
},
|
|
|
|
dateRangeChange(dates, dateStrings) {
|
|
this.datetimeRange = dates;
|
|
console.log(this.datetimeRange)
|
|
this.getData();
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
await this.initSeting();
|
|
await this.initDevice();
|
|
this.getData();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.el-header,
|
|
.el-footer {
|
|
background-color: #b3c0d1;
|
|
color: #333;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
}
|
|
</style> |