<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>
|
</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' + k"
|
:key="new Date()"
|
: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: ''
|
}
|
},
|
async created() {
|
await this.getDeviceIdFun()
|
this.getMqttLists()
|
},
|
mounted() {
|
this.destroyTimerAgainStart()
|
},
|
beforeDestroy() {
|
console.log(`output->销毁了定时器`)
|
clearInterval(this.timer)
|
},
|
methods: {
|
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 = Object.assign({
|
deviceId: this.deviceId,
|
collectionTime: this.checkboxGroup3.split(' ')[0]
|
})
|
await mqttList(obj).then( async (res) => {
|
let data = res.data.data
|
await data.forEach((i, k) => {
|
i.listData = []
|
i.yAxisMonth = []
|
if (i.listMqttTableData.length > 0) {
|
i.deviceId = i.listMqttTableData[0].deviceId
|
}
|
i.listMqttTableData.forEach((j) => {
|
i.listData.push(j.value)
|
i.yAxisMonth.push(j.collectionTime)
|
})
|
i.listMqttTableData = []
|
})
|
this.largeAreaChartList = data
|
})
|
await this.largeAreaChartList.forEach((i, k) => {
|
this.$refs['largeAreaChartRef' + k][0].refreshData(i.listData, i.yAxisMonth)
|
})
|
},
|
destroyTimerAgainStart() {
|
this.largeAreaChartList = []
|
clearInterval(this.timer)
|
this.timer = setInterval(
|
this.getMqttLists,
|
1000 * 30
|
)
|
this.getMqttLists()
|
}
|
}
|
}
|
</script>
|
|
<style></style>
|
