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

<template>
	<view class="content">
		<div class="bigtitle">
			<h2>
				{{indexTitle}}
			</h2>
		</div>

		<template>
			<cyChartVue>
				
			</cyChartVue>
		</template>
		<u-empty text="暂无数据" icon="../../static/data.png" v-if="!echartsData.length"></u-empty>
	</view>
</template>

<script>
	import {
		nowDate,
		timeToDate,
		getLastMonth,
		getLast3Month
	} from '../../utils/date.js'
	import cyChartVue from '../../components/ecahrts/cyChart.vue';
	export default {
		components: {
			cyChartVue
		},
		data() {
			return {
				indexTitle: '',
				queryParams: {
					page: 1,
					limit: 999
				},
				windowInfo: null,
				viewList: [],
				//图表数据
				echartsData: [],
				value: 3600000,
				startTime: null,
				clear: true,
				choiceTime: 0,
				choiceChildTime: 0,
				isShow: false,
				token: uni.getStorageSync('C_TOKEN'),
				chartHeight: 300,
				chartFirstTop: 120,
				chartMargin: 50
			}
		},
		created() {
			this.loadTitle();
			uni.getSystemInfo({
				success: (res) => {
					this.windowInfo = res;
				}
			});
		},
		onShow() {
			// console.log('onShow')
		},
		mounted() {
			this.initData()
		},

		onHide() {
			//this.clear = false
		},
		onPullDownRefresh() {
			this.loadTitle()
			this.initData()
		},
		onPageScroll() {

		},
		beforeDestroy() {
		
		},
		methods: {
			//获得首页标题
			loadTitle() {
				uni.$http.get('/dict/queryByDictKey?dictKeys=title').then(res => {
					const data = res.data
					if (data.code === 200) {
						this.indexTitle = data.data[0].dictValue;
					}
				})
			},
			initData() {
				uni.removeStorage('sTime')
				this.clear = true
				this.value = null
				this.choiceTime = 0
				this.startTime = timeToDate(new Date().getTime())
				this.temperature()
			},
			//用户图表数据
			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++) {
							let websrc = '',thumbsrc=''
							if (reportTableList[i].chartType === 'line') {
								websrc =
									`/static/webview/line-wv.html?id=${reportTableList[i].id}&token=${this.token}`
								thumbsrc = '../../static/image/icon-action-chartline.png'
							} else if (reportTableList[i].chartType === 'bar') {
								websrc =
									`/static/webview/bar-wv.html?id=${reportTableList[i].id}&token=${this.token}`
								thumbsrc = '../../static/image/icon-action-chartbar.png'
							} else if (reportTableList[i].chartType === 'pie') {
								websrc =
									`/static/webview/pie-wv.html?id=${reportTableList[i].id}&token=${this.token}`
								thumbsrc = '../../static/image/icon-action-chartpie.png'
							} else if (reportTableList[i].chartType === 'table') {
								websrc =
									`/static/webview/table-wv.html?id=${reportTableList[i].id}&token=${this.token}`
								thumbsrc = '../../static/image/icon-action-charttable.png'
							}
							array.push({
								id: reportTableList[i].id,
								chartType: reportTableList[i].chartType,
								chartName: reportTableList[i].chartName,
								src:websrc,
								thumb:thumbsrc
							})
						}
						//console.log(array)
						this.echartsData = array

					}
				})
				uni.stopPullDownRefresh()
			},
		}
	};
</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;
	}
	::v-deep .uni-list-item__content-title {
		font-size: 36rpx;
	}

	.moreTime {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80vw;
		margin: auto
	}

	.bigtitle {
		margin: auto;
		text-align: center;
	}

	.bigtitle h2 {}

	.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>