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

<template>
	<view class="container">
		<div class="moreTime">
			<div v-for="(item,index) in range" :key="index" @click="change(index)" :class="choiceTime===index?'bod':''">
				{{item}}
			</div>
		</div>
		<div class="childTime">
			<div v-for="(item,index) in childTime" v-show="choiceTime===index">
				<template>
					<template v-for="(o,i) in item">
						<div @click="getTime(i,o.value)" :class="choiceChildTime===i?'box':''">{{o.text}}</div>
					</template>
				</template>
			</div>
		</div>

		<template v-if="clear">
			<view v-for="(item,index) in echartsData" :key="item.id" style="padding-right:20rpx">
				<web-view :src="item.src" :style="{top:item.top}" style="width:100%;height:800rpx;"></web-view>
				<!-- <view v-if="item.chartType==='line'"> -->
				<!-- <view class="title" v-if="echartsData.length" >
						{{item.chartName}}
					</view> -->
				<!-- </view> -->
				<!-- <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" /> -->
				<!-- <web-view :src="item.src"  style="top:900rpx;width:100%;height:700rpx;"></web-view> -->
				<!-- </view> -->
			</view>
		</template>
		<u-empty text="暂无数据" icon="../../static/data.png" v-if="!echartsData.length"></u-empty>
	</view>
</template>

<script>
	import pieEcharts from '../../components/ecahrts/pie-echarts.vue'
	import barEcharts from '../../components/ecahrts/bar-echarts.vue'
	import {
		nowDate,
		timeToDate,
		getLastWeek,
		getLastMonth,
		getLast3Month
	} from '../../utils/date.js'
	export default {
		components: {
			pieEcharts,
			barEcharts
		},
		data() {
			return {
				queryParams: {
					page: 1,
					limit: 999
				},
				//图表数据
				echartsData: [],
				value: 3600000,
				startTime: null,
				range: ["分", "时", "日", "周"],
				childTime: [
					[{
							value: 900000,
							text: "15分"
						},
						{
							value: 1800000,
							text: "30分"
						},
						{
							value: 2700000,
							text: "45分"
						}
					],
					[{
							value: 3600000,
							text: "1小时"
						},
						{
							value: 21600000,
							text: "6小时"
						},
						{
							value: 43200000,
							text: "12小时"
						},
						{
							value: 64800000,
							text: "18小时"
						}
					],
					[{
							value: 86400000,
							text: "1日"
						},
						{
							value: 259200000,
							text: "3日"
						},
						{
							value: 432000000,
							text: "5日"
						}
					],
					[{
							value: 604800000,
							text: "1周"
						},
						{
							value: 1209600000,
							text: "2周"
						},
						{
							value: 1814400000,
							text: "3周"
						},
						{
							value: 2419200000,
							text: "4周"
						}
					],
				],
				clear: true,
				choiceTime: 0,
				choiceChildTime: 0,
				isShow: false
			}
		},
		onShow() {
			uni.removeStorage('sTime')
			this.clear = true
			this.value = null
			this.choiceTime = 0
			this.startTime = timeToDate(new Date().getTime() - 900000)
			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
						let array = []
						for (let i = 0; i < reportTableList.length; i++) {
							array.push({
								id: reportTableList[i].id,
								chartType: reportTableList[i].chartType
							})
						}
						Promise.all(array).then((res) => {
							res.map((item, index) => {
								if (item.chartType === 'line') {
									item.src =
										`/static/webview/line-wv.html?id=${item.id}&startTime=${this.startTime}`
								} else if (item.chartType === 'bar') {
									item.src =
										`/static/webview/bar-wv.html?id=${item.id}&startTime=${this.startTime}`
								} else if (item.chartType === 'pie') {
									item.src =
										`/static/webview/pie-wv.html?id=${item.id}&startTime=${this.startTime}`
								}
								item.top = (index + 1) * 160 + index * 800 + 'rpx'

								uni.setStorage({
									key: item.id + 'sTime',
									data: nowDate()
								})

								this.echartsData.push(item)
							})
						})
					}
				})
			},
			// getChartData(id) {
			// 	let chartParams = {
			// 		id: id,
			// 		startTime: this.startTime,
			// 		endTime: nowDate()
			// 	}
			// 	uni.setStorage({
			// 		key: id + 'sTime',
			// 		data: chartParams.endTime
			// 	})
			// 	return new Promise((resolve, reject) => {
			// 		uni.$http.get('/chart/getChartById', chartParams).then((res) => {
			// 			const data = res.data
			// 			resolve(data)
			// 		})
			// 	})
			// },
			change(i) {
				this.choiceTime === i ? this.choiceTime = -1 : this.choiceTime = i
				this.choiceChildTime = -1
				// 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()
				// }
			},
			getTime(i, val) {
				this.choiceChildTime = i
				this.startTime = timeToDate(new Date().getTime() - val)
				this.temperature()
			}
		}
	};
</script>

<style scoped>
	.container {
		height: 100vh
	}

	.title {
		margin: 10rpx 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;
		width: 80vw;
		margin: auto
	}

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

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

	.childTime {

		margin: 16rpx 60rpx 0 60rpx;
	}

	.childTime>div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

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