bigDataApp/pages/cb/nlNewXy/thxyhisdata.vue

<template>
	<view>
		<view class="timeandtype">
			<view class="timebox">
				<view class="firsttime" @click="timeshow=true">
					<view class="" v-if="start_time!=''">
						{{start_time/1000|timeFormat()}}
					</view>
					<view class="" v-else>
						{{start_time==""?'请选择开始时间':start_time}}
					</view>
				</view>
				<view class="jiange">
					-
				</view>
				<view class="endtime" @click="timeshow=true">
					<view class="" v-if="end_time!=''">
						{{end_time/1000|timeFormat()}}
					</view>
					<view class="" v-else>
						{{end_time==""?'请选择结束时间':end_time}}
					</view>
				</view>
			</view>
		</view>
		<view class="shuju_one">
			<view class="canvastishi" v-if="!canvastishiTF2">
				暂无数据
			</view>
			<view class="canvastishi" v-if="dataloadingtf2">
				<p class="dataloading">加载中</p>
			</view>
			<canvas v-if="canvastishiTF2" canvas-id="canvasColumnB" id="canvasColumnB" class="charts"
				@touchstart="touchLineB($event)" @touchmove="moveLineB($event)" @touchend="touchEndLineB($event)"
				disable-scroll=true
				:style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>
		<view class="condition">
			<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
				<table class="table">
					<tr class="tr">
						<th class="th" v-for="(item,index) in thdata" :key="'a'+index">{{item[0]}}</th>
					</tr>
					<tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs">
						<td class="td" v-for="head in thdata" :key="'head'+ head[1]" >
							<view v-if="head[1] == 'addtime'">{{items.d_h_t.addtime|timeFormat()}}</view>
							<view v-else>
								{{items.d_h_t[head[1]]}}
							</view>
						</td>
					</tr>
					<tr class="tr" v-if="forbidden">
						<td class="td" v-for="item in 7">暂无数据</td>
					</tr>
				</table>
			</scroll-view>
			<view class="pagenumber">
				<button @click="prev">上一页</button>
				<view class="pagenumber_page">
					第 {{page}} 页
				</view>
				<view class="pagenumber_page">
					共 {{pagesum}} 页
				</view>
				<button @click="next" :disabled="forbidden">下一页</button>
			</view>
		</view>
		<u-calendar v-model="timeshow" :mode="mode" @change="timechange"></u-calendar>
	</view>
</template>

<script>
	import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
	import Circulation from "../../../static/js/equipState_dict.json"
	var canvaColumnA = null;
	var canvaColumnB = null
	export default {
		data() {
			return {
				start_time: "",
				end_time: "",
				timeshow: false,
				mode: 'range',
				cWidth: '400',
				cHeight: '400',
				pixelRatio: 1,
				canvastishiTF: false,
				dataloadingtf: false,
				canvastishiTF2: false,
				dataloadingtf2: false,
				equipInfo: {},
				historylistdata: [],
				thdata: [
					['上报时间', 'addtime'],
					['电池功率', 'battery_p'],
					['太阳能板电流', 'solar_c'],
					['太阳能板功率', 'solar_p'],
					['电池电压', 'battery_v'],
					['太阳能板电压', 'solar_v'],
					['电池电流', 'battery_c'],
				],
				page: 1,
				pagesum: "10",
				Circulation: Circulation,
				forbidden: false
			}
		},
		methods: {
			timechange(e) {
				this.start_time = +new Date(e.startDate)
				this.end_time = +new Date(e.endDate)
				this.page = 1;
				this.history()
				this.getworm()
				this.getwind()
			},
			async history() { //历史数据列表折线图
				this.dataloadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_at_ah',
					data: {
						device_type_id: 8,
						d_id: this.equipInfo.d_id,
						start_time: Math.floor(+new Date(this.start_time) / 1000),
						end_time: Math.floor(+new Date(this.end_time) / 1000),
					}
				})
				console.log(res)
				this.dataloadingtf = false
				this.historydatas = res
			},
			async getworm() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xycb_pest_chart_new',
					data: {
						d_id: this.equipInfo.d_id,
						start_time: Math.floor(+new Date(this.start_time) / 1000),
						end_time: Math.floor(+new Date(this.end_time) / 1000),
						device_type_id: 29,
						years: new Date().getFullYear()
					}
				})
				console.log(res)
				this.dataloadingtf2 = false
				var data = res.pest_data
				if (data.length == 0) {
					this.canvastishiTF2 = false
				} else {
					this.canvastishiTF2 = true
					// console.log(arr1)
					var obj = [{
						name: '诱虫次数',
						data: res.pest_data[0],
						color: '#00E29D'
					}]
					this.showColumn2("canvasColumnB", res.md_lst, obj)
				}
			},
			async getwind() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_history_data',
					data: {
						d_id: this.equipInfo.d_id,
						start_time: Math.floor(+new Date(this.start_time) / 1000),
						end_time: Math.floor(+new Date(this.end_time) / 1000),
						device_id: this.equipInfo.device_id,
						page: this.page,
					}
				})
				this.historylistdata = res.data
				this.pagesum = Math.ceil(res.counts / 10)
				if (res.data.length) {
					this.forbidden = false
				} else {
					this.forbidden = true
				}
			},
			prev() { //上一页
				if (this.page > 1) {
					this.page--
					this.getwind()
				}
			},
			next() { //下一页
				if (this.page < this.pagesum) {
					this.page++
					this.getwind()
				}
			},
			showColumn(id, xtitle, xinfo) {
				var _self = this
				const ctx = uni.createCanvasContext(id, this);
				canvaColumnA = new uCharts({
					context: ctx,
					type: 'line',
					legend: {
						position: "top"
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					dataLabel: false,
					categories: xtitle,
					series: xinfo,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						// scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {},
					width: _self.cWidth * 1,
					height: _self.cHeight * 1,
					extra: {
						line: {
							type: 'curve'
						}
					}
				});
			},
			showColumn2(id, xtitle, xinfo) {
				var _self = this
				const ctx = uni.createCanvasContext(id, this);
				canvaColumnB = new uCharts({
					context: ctx,
					type: 'line',
					legend: {
						position: "top"
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					dataLabel: false,
					categories: xtitle,
					series: xinfo,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						// scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {},
					width: _self.cWidth * 1,
					height: _self.cHeight * 1,
					extra: {
						line: {
							type: 'curve'
						}
					}
				});
			},
			touchLineA(e) {
				console.log(e)
				canvaColumnA.scrollStart(e);
			},
			moveLineA(e) {
				canvaColumnA.scroll(e);
			},
			touchEndLineA(e) {
				canvaColumnA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumnA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchLineB(e) {
				console.log(e)
				canvaColumnB.scrollStart(e);
			},
			moveLineB(e) {
				canvaColumnB.scroll(e);
			},
			touchEndLineB(e) {
				canvaColumnB.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumnB.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		},
		onLoad(option) {
			this.equipInfo = option
			console.log(option)
			this.end_time = +new Date()
			this.start_time = +new Date() - 30 * 24 * 60 * 60 * 1000
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);
			this.history()
			this.getworm()
			this.getwind()
		}
	}
</script>

<style lang="less">
	.timeandtype {
		// background-color: #F6F6FB;
		// padding: 20rpx;
		box-sizing: border-box;
		width: 90%;
		margin: 40rpx auto 0;

		.timebox {
			box-shadow: 0 0 10rpx #bcb9ca;
			display: flex;
			background-color: #fff;
			padding: 10px;
			border-top-right-radius: 5px;
			border-top-left-radius: 5px;

			.jiange {
				width: 5%;
				text-align: center;
			}

			.firsttime,
			.endtime {
				width: 45%;
				text-align: center;
			}
		}

		.warntypebox {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding: 10px;
			border-top: 1px solid #F6F6FB;
			border-bottom-right-radius: 5px;
			border-bottom-left-radius: 5px;
		}
	}

	.shuju_one {
		position: relative;
		width: 90%;
		margin: 30rpx auto;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding-top: 20rpx;
		height: 550rpx;

		.canvastishi {
			font-size: 32rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -64rpx;
			margin-top: -21rpx;

			.dataloading:after {
				overflow: hidden;
				display: inline-block;
				vertical-align: bottom;
				animation: ellipsis 2s infinite;
				content: "\2026";
			}

			@keyframes ellipsis {
				from {
					width: 2px;
				}

				to {
					width: 15px;
				}
			}
		}

		.shuju_one_title {
			width: 70%;
			margin: 0 auto;
			display: flex;

			.tltle_text {
				width: 25%;
				border: 2rpx solid #B2B2B2;
				color: #57c878;
				text-align: center;
				font-size: 24rpx;
				height: 50rpx;
				line-height: 50rpx;
			}

			.title_text_color {
				width: 25%;
				border: 2rpx solid #57c878;
				background-color: #57c878;
				color: #fff;
				text-align: center;
				font-size: 24rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}

	/deep/.u-calendar__action {
		display: flex;
		justify-content: space-around;

		.u-calendar__action__text {
			line-height: 25px;
		}
	}

	.condition {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		margin: 30rpx auto;
		box-shadow: 0 0 10rpx #bcb9ca;
		margin-bottom: 30rpx;

		.scroll-X {
			width: 95%;
			margin: 20rpx auto;

			.table {
				// width: 1672px;
			}

			.tr {
				display: flex;
				overflow: hidden;

				.th,
				.td {
					display: inline-block;
					padding: 5rpx;
					width: 240rpx;
					text-align: center;
					height: 52rpx;
					line-height: 52rpx;
					border: 2rpx solid #F1F1F1;
				}

				.th:first-child,
				.td:first-child {
					width: 300rpx;
				}
			}

			.tr:nth-child(2n-1) {
				background-color: #f5fff8;
			}

			.tr:first-child {
				background-color: #57c878;
				color: #fff;
			}
		}

		.pagenumber {
			display: flex;
			margin: 20rpx auto;

			button {
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				text-align: center;
				background-color: #57c878;
				color: #FFFFFF;
			}

			.pagenumber_page {
				// width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				text-align: center;
				margin: 0 20rpx;
			}
		}
	}
</style>