<template>
|
<div>
|
<basic-container>
|
<el-form label-width="100px" :inline="true">
|
<el-form-item label="设备：" required>
|
<el-select
|
v-model="deviceId"
|
placeholder="请选择"
|
@change="getMqttListsSelect"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.name"
|
:value="item.device_id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间：">
|
<el-radio-group
|
v-model="checkboxGroup3"
|
size="small"
|
@change="destroyTimerAgainStart"
|
>
|
<el-radio-button v-for="city in cities" :label="city" :key="city">{{
|
city
|
}}</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="历史查询：">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="注意：历史时间为空会刷新数据，不为空则不会刷新数据！"
|
placement="top"
|
>
|
<el-date-picker
|
v-model="datePicker"
|
size="small"
|
:picker-options="pickerOptions"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
@change="datePickerHistory"
|
type="datetimerange"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:default-time="['12:00:00']"
|
>
|
</el-date-picker>
|
</el-tooltip>
|
</el-form-item>
|
</el-form>
|
</basic-container>
|
<basic-container>
|
<div
|
v-if="!largeAreaChartList.length > 0"
|
style="height: 75vh; padding-top: 0.4em; display: flex; align-items: center; justify-content: center;"
|
>
|
暂无数据
|
</div>
|
<el-row>
|
<el-col
|
v-for="(v, k) in largeAreaChartList"
|
:key="k"
|
style="height: 40vh; padding-top: 0.4em;"
|
:span="12"
|
><largeAreaChart
|
ref="largeAreaChartRef"
|
:yAxisMonth="v.yAxisMonth"
|
:seriesData="v.listData"
|
:otherData="v"
|
/>
|
</el-col>
|
</el-row>
|
</basic-container>
|
</div>
|
</template>
|
|
<script>
|
import largeAreaChart from './components/largeAreaChart.vue'
|
import { getDeviceId, mqttList } from '@/api/equipment/equipment'
|
|
export default {
|
components: {
|
largeAreaChart: largeAreaChart
|
},
|
data() {
|
return {
|
largeAreaChartList: [],
|
cities: ['10 分钟', '30 分钟', '60 分钟'],
|
checkboxGroup3: '10 分钟',
|
options: [],
|
deviceId: '',
|
timer: '',
|
datePicker: [],
|
choiceDate: null,
|
pickerOptions: {
|
onPick: ({ maxDate, minDate }) => {
|
// 把选择的第一个日期赋值给一个变量。
|
this.choiceDate = minDate.getTime()
|
// 如何你选择了两个日期了，就把那个变量置空
|
if (maxDate) this.choiceDate = ''
|
},
|
disabledDate: (time) => {
|
// 如何选择了一个日期
|
if (this.choiceDate) {
|
// 7天的时间戳
|
const one = 7 * 24 * 3600 * 1000
|
// 当前日期 - one = 7天之前
|
const minTime = this.choiceDate - one
|
// 当前日期 + one = 7天之后
|
const maxTime = this.choiceDate + one
|
return (
|
time.getTime() < minTime ||
|
time.getTime() > maxTime ||
|
// 限制不能选择今天及以后
|
time.getTime() > Date.now()
|
)
|
} else {
|
// 如果没有选择日期，就要限制不能选择今天及以后
|
return time.getTime() > Date.now()
|
}
|
}
|
}
|
}
|
},
|
// 初始化调用 查询设备 折线图数据
|
async created() {
|
await this.getDeviceIdFun()
|
this.destroyTimerAgainStart()
|
},
|
// 关闭页面销毁定时器
|
beforeDestroy() {
|
clearInterval(this.timer)
|
},
|
watch: {
|
datePicker(newVal) {
|
// 存在时间 销毁定时器
|
if (newVal) {
|
clearInterval(this.timer)
|
} else {
|
this.destroyTimerAgainStart()
|
}
|
}
|
},
|
methods: {
|
// 选择时间后调用
|
datePickerHistory() {
|
if (this.datePicker) {
|
this.getMqttLists()
|
}
|
},
|
// 选择设备后调用刷新接口
|
getMqttListsSelect() {
|
this.largeAreaChartList = []
|
this.getMqttLists()
|
},
|
// 获取设备下拉框
|
async getDeviceIdFun() {
|
await getDeviceId().then((res) => {
|
this.options = res.data.data
|
this.deviceId = this.options[0].device_id
|
})
|
},
|
// 获取折线图数据
|
async getMqttLists() {
|
const obj = {
|
deviceId: this.deviceId,
|
collectionTime: this.checkboxGroup3.split(' ')[0]
|
}
|
if (this.datePicker) {
|
obj.startTime = this.datePicker[0]
|
obj.endTime = this.datePicker[1]
|
}
|
// 调用数据接口
|
const res = await mqttList(obj)
|
const data = res.data.data
|
for (const i of data) {
|
i.listData = []
|
i.yAxisMonth = []
|
if (i.listMqttTableData.length > 0) {
|
i.deviceId = i.listMqttTableData[0].deviceId
|
}
|
for (const j of i.listMqttTableData) {
|
i.listData.push(j.value)
|
i.yAxisMonth.push(j.collectionTime)
|
}
|
i.listMqttTableData = []
|
}
|
this.largeAreaChartList = data
|
// 处理数据，适配折线图格式
|
for (const [k, i] of this.largeAreaChartList.entries()) {
|
this.$refs.largeAreaChartRef[k].refreshData(i.listData, i.yAxisMonth)
|
}
|
},
|
// 开启定时器
|
destroyTimerAgainStart() {
|
this.largeAreaChartList = []
|
clearInterval(this.timer)
|
this.timer = setInterval(this.getMqttLists, 1000 * 3)
|
this.getMqttLists()
|
}
|
}
|
}
|
</script>
|
|
<style></style>
|
