mes-ocea-before.git

			@@ -1,71 +1,130 @@
			<template>
			<div>
			<div class="header_div">
			<el-select v-model="value" placeholder="请选择">
			<el-option
			v-for="item in options"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			>
			</el-option>
			</el-select>
			</div>
			<el-row>
			<el-col
			v-for="(v, k) in index"
			:key="k"
			style="height: 40vh; padding-top: 0.4em;"
			:span="12"
			><largeAreaChart
			/></el-col>
			</el-row>
			<basic-container>
			<el-form label-width="100px" :inline="true">
			<el-form-item label="设备：" required>
			<el-select
			v-model="deviceId"
			placeholder="请选择"
			@change="getMqttLists"
			>
			<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"
			v-if="largeAreaChartList.length > 0"
			:key="k"
			: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 {
			index: 7,
			options: [
			{
			value: '选项1',
			label: '黄金糕'
			},
			{
			value: '选项2',
			label: '双皮奶'
			},
			{
			value: '选项3',
			label: '蚵仔煎'
			},
			{
			value: '选项4',
			label: '龙须面'
			},
			{
			value: '选项5',
			label: '北京烤鸭'
			}
			],
			value: ''
			largeAreaChartList: [],
			cities: ['1 分钟', '3 分钟', '5 分钟', '10 分钟'],
			checkboxGroup3: '1 分钟',
			options: [],
			deviceId: '',
			timer: ''
			}
			},
			async created() {
			await this.getDeviceIdFun()
			this.getMqttLists()
			},
			mounted() {
			this.destroyTimerAgainStart()
			},
			beforeDestroy() {
			console.log(`output->销毁了定时器`)
			clearInterval(this.timer)
			},
			methods: {
			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]
			})
			this.largeAreaChartList = []
			await mqttList(obj).then((res) => {
			let data = res.data.data
			data.forEach((i) => {
			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
			})
			},
			destroyTimerAgainStart() {
			clearInterval(this.timer)
			this.timer = setInterval(
			this.getMqttLists,
			1000 * 60 * this.checkboxGroup3.split(' ')[0]
			)
			}
			}
			}
			</script>

			<style>
			.header_div {
			height: 5em;
			width: 100%;
			display: flex;
			align-items: center;
			margin-left: 3em;
			}
			</style>
			<style></style>