read_opc/reado-app/pages/homePage/index.vue

<template>
	<view>
		<uni-section title="选择开始时间" type="line" style="width:80%;margin: auto;">
			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
		</uni-section>
		<view v-for="item in echartsData" :key="item.id">
			<view v-if="item.chartType==='pie'">
				<view class="title" v-if="echartsData.length">
					{{item.chartName}}
				</view>
				<pieEcharts :echartsData="item" @piePolling="piePolling" />
			</view>
			<view v-if="item.chartType==='bar'">
				<view class="title" v-if="echartsData.length">
					{{item.chartName}}
				</view>
				<barEcharts :echartsData="item" @barPolling="barPolling" />
			</view>
			<view v-if="item.chartType==='line'">
				<view class="title" v-if="echartsData.length">
					{{item.chartName}}
				</view>
				<lineEcharts :echartsData="item" @linePolling="linePolling" />
			</view>
		</view>
		<u-empty text="暂无数据" icon="../../static/data.png" v-if="!echartsData.length"></u-empty>
	</view>
</template>

<script>
	import lineEcharts from '../../components/ecahrts/line-echarts.vue'
	import pieEcharts from '../../components/ecahrts/pie-echarts.vue'
	import barEcharts from '../../components/ecahrts/bar-echarts.vue'
	import {
		nowDate,
		timeToDate
	} from '../../utils/date.js'
	export default {
		components: {
			lineEcharts,
			pieEcharts,
			barEcharts
		},
		data() {
			return {
				queryParams: {
					page: 1,
					limit: 999
				},
				//图表数据
				echartsData: [],
				value: null,
				startTime: null,
				range: [{
						value: 3600000,
						text: "近一小时"
					},
					{
						value: 10800000,
						text: "近三小时"
					},
					{
						value: 86400000,
						text: "近一天"
					},
				],
				barTime: null,
				lineTime: null,
				pieTime: null
			}
		},
		onShow() {
			this.startTime = nowDate().split(' ')[0] + " 00:00:00"
			this.temperature()
		},
		methods: {
			//用户图表数据
			temperature() {
				this.echartsData = []
				uni.$http.get('/chart/getAllOkChart', this.queryParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						const {
							reportTableList
						} = data.data
						reportTableList.map(item => {
							this.getChartData(item.id)
						})
					}
				})
			},
			getChartData(id) {
				let chartParams = {
					id: id,
					startTime: this.startTime,
					endTime: nowDate()
				}
				uni.$http.get('/chart/getChartById', chartParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.echartsData.push(data.data)
					}
				})
			},
			change(e) {
				if (e) {
					this.startTime = timeToDate(new Date().getTime() - e)
				} else {
					this.startTime = nowDate().split(' ')[0] + " 00:00:00"
					this.echartsData = []
					clearInterval(this.barTime)
					clearInterval(this.lineTime)
					clearInterval(this.pieTime)
				}
				this.temperature()
			},
			//轮询
			barPolling(time, id) {
				this.barTime = setInterval(() => {
					let chartParams = {
						id: id,
						startTime: this.startTime,
						endTime: nowDate()
					}
					uni.$http.get('/chart/getChartById', chartParams).then(res => {

					})
				}, time)
			},
			linePolling(time, id) {
				this.lineTime = setInterval(() => {
					let chartParams = {
						id: id,
						startTime: this.startTime,
						endTime: nowDate()
					}
					uni.$http.get('/chart/getChartById', chartParams).then(res => {

					})
				}, time)
			},
			piePolling(time, id) {
				this.pieTime = setInterval(() => {
					let chartParams = {
						id: id,
						startTime: this.startTime,
						endTime: nowDate()
					}
					uni.$http.get('/chart/getChartById', chartParams).then(res => {

					})
				}, time)
			}
		}
	};
</script>

<style scoped>
	.title {
		margin-left: 24rpx;
		font-size: 36rpx;
		color: #666666;
	}
</style>