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

<template>
	<view>
		<!-- <uni-section title="时间范围" type="line"
			style="width:80%;display: flex;align-items: center;margin:40rpx 0 20rpx 0">
			<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
		</uni-section> -->
		<div class="moreTime">
			<div v-for="(item,index) in range" :key="index" @click="change(1,index,item.value)"
				:class="choiceTime===index?'bod':''">
				{{item.text}}
			</div>
		</div>
		<div class="childTime" v-if="isShow">
			<div v-for="(item,index) in moreTimeList" @click="change(2,index,item.value)"
				:class="choiceMoreTime===index?'box':''">
				{{item.text}}
			</div>
		</div>

		<template v-if="clear">
			<view v-for="item in echartsData" :key="item.id" style="padding-right:20rpx">
				<view v-if="item.chartType==='pie'">
					<view class="title" v-if="echartsData.length">
						{{item.chartName}}
					</view>
					<pieEcharts :echartsData="item" />
				</view>
				<view v-if="item.chartType==='bar'">
					<view class="title" v-if="echartsData.length">
						{{item.chartName}}
					</view>
					<barEcharts :echartsData="item" />
				</view>
				<view v-if="item.chartType==='line'">
					<view class="title" v-if="echartsData.length">
						{{item.chartName}}
					</view>
					<!-- <lineEcharts :echartsData="item" /> -->
					<demo :echartsData="item" />
				</view>
			</view>
		</template>
        <!-- <demo1/> -->
		<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 demo from '../../components/ecahrts/demo.vue'
	import demo1 from '../../components/ecahrts/demo1.vue'
	import {
		nowDate,
		timeToDate,
		getLastWeek,
		getLastMonth,
		getLast3Month
	} from '../../utils/date.js'
	export default {
		components: {
			lineEcharts,
			pieEcharts,
			barEcharts,
			demo,
			demo1
		},
		data() {
			return {
				queryParams: {
					page: 1,
					limit: 999
				},
				//图表数据
				echartsData: [],
				value: 3600000,
				startTime: null,
				range: [{
						value: 3600000,
						text: "分时"
					},
					{
						value: 86400000,
						text: "日"
					},
					{
						value: 1,
						text: "周"
					},
					{
						value: 2,
						text: "月"
					}
				],
				moreTimeList: [{
						value: 7200000,
						text: "120分"
					},
					{
						value: 3600000,
						text: "60分"
					},
					{
						value: 1800000,
						text: "30分"
					},
					{
						value: 900000,
						text: "15分"
					},
					{
						value: 300000,
						text: '5分'
					},
					{
						value: 60000,
						text: '1分'
					}
				],
				clear: true,
				choiceTime: 0,
				choiceMoreTime: 0,
				isShow: false
			}
		},
		onShow() {
			uni.removeStorage('sTime')
			this.clear = true
			this.value = null
			this.choiceTime = 0
			this.startTime = timeToDate(new Date().getTime() - 3600000)
			this.temperature()
		},
		onHide() {
			this.clear = false
		},
		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.setStorage({
					key: 'sTime',
					data: chartParams.endTime
				})
				uni.$http.get('/chart/getChartById', chartParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.echartsData.push(data.data)
					}
				})
			},
			change(type, i, e) {
				if (type === 1) {
					this.choiceTime = i
				} else {
					this.choiceMoreTime = i
				}
				if (e === 'more') {
					this.isShow = !this.isShow
				} else {
					if (typeof(e) !== 'string' && e !== 1 && e !== 2 && e !== 3) {
						this.startTime = timeToDate(new Date().getTime() - e)
					} else if (typeof(e) !== 'string' && e !== null) {
						switch (e) {
							case 1:
								this.startTime = timeToDate(getLastWeek()[0])
								break;
							case 2:
								this.startTime = timeToDate(getLastMonth()[0])
								break;
							case 3:
								this.startTime = timeToDate(getLast3Month()[0])
								break;
						}
					} else if (typeof(e) === 'string') {
						this.startTime = timeToDate(new Date().getTime() - 3600000)
						this.echartsData = []
					}
					this.temperature()
				}
			}
		}
	};
</script>

<style scoped>
	.title {
		margin: 34rpx 0 10rpx 20rpx;
		font-size: 28rpx;
		color: #666666;
	}

	::v-deep .uni-section-content {
		width: 50%;
		margin-bottom: 20rpx;
	}

	.moreTime {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 34rpx
	}

	.bod {
		border-bottom: 3px solid #007AFF;
	}

	.box {
		border: 1px solid #007AFF !important;
	}

	.childTime {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 60rpx 34rpx 0 34rpx;
	}

	.childTime div {
		padding: 10rpx;
		border: 1px solid #e6e6e6;
		border-radius: 16rpx;
		color: #7e7e7e;
		font-size: 26rpx;
		width: 80rpx;
		text-align: center;
	}
</style>