| | |
| | | <el-select |
| | | v-model="deviceId" |
| | | placeholder="请选择" |
| | | @change="getMqttLists" |
| | | @change="getMqttListsSelect" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | |
| | | style="height: 40vh; padding-top: 0.4em;" |
| | | :span="12" |
| | | ><largeAreaChart |
| | | ref="largeAreaChartRef" |
| | | v-if="largeAreaChartList.length > 0" |
| | | :key="k" |
| | | :ref="'largeAreaChartRef' + k" |
| | | :key="new Date()" |
| | | :yAxisMonth="v.yAxisMonth" |
| | | :seriesData="v.listData" |
| | | :otherData="v" |
| | |
| | | data() { |
| | | return { |
| | | largeAreaChartList: [], |
| | | cities: ['1 分钟', '3 分钟', '5 分钟', '10 分钟'], |
| | | checkboxGroup3: '1 分钟', |
| | | cities: ['10 分钟', '30 分钟', '60 分钟'], |
| | | checkboxGroup3: '10 分钟', |
| | | options: [], |
| | | deviceId: '', |
| | | timer: '' |
| | |
| | | clearInterval(this.timer) |
| | | }, |
| | | methods: { |
| | | getMqttListsSelect() { |
| | | this.largeAreaChartList = [] |
| | | this.getMqttLists() |
| | | }, |
| | | async getDeviceIdFun() { |
| | | await getDeviceId().then((res) => { |
| | | this.options = res.data.data |
| | |
| | | deviceId: this.deviceId, |
| | | collectionTime: this.checkboxGroup3.split(' ')[0] |
| | | }) |
| | | this.largeAreaChartList = [] |
| | | await mqttList(obj).then((res) => { |
| | | await mqttList(obj).then( async (res) => { |
| | | let data = res.data.data |
| | | data.forEach((i) => { |
| | | await data.forEach((i, k) => { |
| | | i.listData = [] |
| | | i.yAxisMonth = [] |
| | | if (i.listMqttTableData.length > 0) { |
| | |
| | | }) |
| | | 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 * 60 * this.checkboxGroup3.split(' ')[0] |
| | | 1000 * 30 |
| | | ) |
| | | this.getMqttLists() |
| | | } |
| | | } |
| | | } |