bigdata_WX/pages/cb/cbd/equip-set/pestLine.vue

<template>
	<view>
		<view class="title">虫情趋势矩阵图</view>
		<view class="shuju_one">

			<view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
				暂无数据
			</view>
			<view class="canvastishi" v-if="dataloadingtf">
				<p class="dataloading">加载中</p>
			</view>
			<canvas v-show="canvastishiTF" canvas-id="canvasColumnB" id="canvasColumnB" class="charts"
				@touchstart="touchLineA($event)" @touchmove="moveLineA($event)" @touchend="touchEndLineA($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="title">害虫排名</view>
		<view class="shuju_one">

			<view class="canvastishi" v-if="!canvastishiTF && !dataloadingtf">
				暂无数据
			</view>
			<view class="canvastishi" v-if="dataloadingtf">
				<p class="dataloading">加载中</p>
			</view>
			<canvas v-show="canvastishiTF" canvas-id="canvasColumnC" id="canvasColumnC" class="charts"
				:style="{'width':cWidth*pixelRatio+'px','height':pestHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>

	</view>

</template>

<script>
	import uCharts from '../../../../components/js_sdk/u-charts/u-charts/u-charts.js';
	let canvaColumnA = null;
	let canvaColumnB = null;
	const myColor = ['#FF5951', '#66EDED', '#E67B3E', '#6DE28B', '#FFC97A', '#E7EB4B', '#1561F3', '#FA73F5', '#159AFF',
		'#FA73F5'
	]
	const temColor = ['#A2845E', '#018B3F', '#00C7BE']

	export default {
		data() {
			return {

				cWidth: '400',
				cHeight: '400',
				pixelRatio: 1,
				canvastishiTF: false, //暂无数据提示
				dataloadingtf: true, //加载中提示
				pestHeight: '400',
			}
		},
		props: {
			start_time: {
				type: String,
				default: ''
			},
			end_time: {
				type: String,
				default: ''
			},
			device_type_id: {
				type: String,
				default: '35'
			},
			d_id: {
				type: String,
				default: 0
			},
			notify: {
				type: Number,
				default: 0
			}
		},
		watch: {
			notify: {
				handler() {
					this.pestLine()
				}
			}
		},
		computed: {

		},
		methods: {

			async pestLine() { //害虫趋势折线图
				this.dataloadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.photo_info.pest_order_and_char',
					data: {
						device_type_id: this.device_type_id,
						id: this.d_id,
						// device_type_id: 35,
						// id: '11630161',
						start: +new Date(this.start_time + ' 00:00:00') / 1000,
						end: +new Date(this.end_time + ' 23:59:59') / 1000,
						hour_st: '00',
						hour_ed: '00'
					}
				})
				this.dataloadingtf = false
				const {
					char_data,
					pest_total,
					at_ah_info: atah
				} = res
				
				if (Object.keys(char_data).length == 0) {
					this.canvastishiTF = false
				} else {
					this.canvastishiTF = true
					
					let arr1 = []
					let arr2 = []
					let arr3 = []
					let xtitle = []
					for (let i = 0; i < atah.length; i++) {
						xtitle.push(this.formatTime(atah[i].addtime * 1000, 'yyyy-MM-dd'))
						arr1.push(atah[i].height ? atah[i].height : 0)
						arr2.push(atah[i].low ? atah[i].low : 0)
						arr3.push(atah[i].ah ? atah[i].ah : 0)

					}
					// console.log(arr1)
					let objList = [{
						name: '高温',
						data: arr1

					}, {
						name: '低温',
						data: arr2
					}, {
						name: '湿度',
						data: arr3
					}]
					Object.keys(char_data).forEach((item, index) => {
						let countData = []
						char_data[item].forEach((item1, index1) => {
							countData.push(item1.sum)
						})
						let obj = {
							name: item,

							data: countData
						}
						objList.push(obj)
					})

					const pestName = Object.keys(pest_total)
					const dataList = Object.values(pest_total).reverse().map((value, index) => {
						let i = index % myColor.length
						
						return {
							value,
							color: myColor[i]
						}
					})
					const pestTotal = [{
						name: '排名',
						data: dataList
					}]

					this.showColumn("canvasColumnB", xtitle, objList)
					this.showColumnBar("canvasColumnC", pestName.reverse(), pestTotal)
				}
			},


			showColumn(id, xtitle, xinfo, yAxis) {
				
				let _self = this
				if (xinfo.length > 12) {
					this.cHeight = xinfo.length * 15
				}
				// const canvas = document.getElementById(id);
				// const ctx = canvas.getContext("2d");
				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,
					color: [...temColor, ...myColor],
					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: yAxis || {},
					width: _self.cWidth * 1,
					height: _self.cHeight * 1,
					extra: {
						line: {
							type: 'curve'
						}
					}
				});
			},
			showColumnBar(id, xtitle, xinfo) {
				console.log('bar:',xtitle, xinfo)
				let _self = this
				if (xtitle.length > 12) {
					this.pestHeight = xtitle.length * 20
				}

				const ctx = uni.createCanvasContext(id, this);
				canvaColumnB = new uCharts({
					context: ctx,
					type: 'bar',

					legend: {
						show: false
					},
					padding: [5, 25, 5, 0],
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					// dataLabel: false,
					categories: xtitle,
					series: xinfo,
					// enableScroll: true, //开启图表拖拽功能
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						axisLine: false
					},
					yAxis: {

					},
					width: _self.cWidth * 1,
					height: _self.pestHeight * 1,
					extra: {
						bar: {
							type: "group",
							width: 30,

							barBorderCircle: true,
							seriesGap: 4,
							categoryGap: 4
						}
					}
				});
			},
			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);

			},
		},
		mounted() {
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);
			this.pestLine()
			console.log('mounted')
		},
		onLoad() {
			console.log('load')

		},
		onShow() {
			console.log('show')
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f7f7;
	}

	.title {
		color: #999999;
		margin: 32rpx 0;
	}

	.date {
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 92rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		margin-top: 16rpx;
		padding: 0 48rpx;
		position: relative;

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

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

	.shuju_one,
	.shuju_two {
		// position: absolute;
		// top: 54px;
		width: 100%;
		// left: 5%;
		// box-shadow: 0 0 10rpx #bcb9ca;
		padding-top: 20rpx;
		height: 550rpx;
		background-color: #fff;
		border-radius: 24rpx;
		overflow-y: scroll;
		position: relative;
		.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;
				}
			}
		}


	}

	.refresh {
		// position: absolute;
		// top: 700rpx;
		// left: 5%;
		font-size: 12px;
		float: right;
		padding: 0 10rpx;
		height: 40rpx;
		border-radius: 8rpx;
		background-color: #018B3F;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
	}

	.condition {
		// position: absolute;
		// top: 770rpx;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		// left: 5%;
		// box-shadow: 0 0 10rpx #bcb9ca;
		margin-bottom: 30rpx;

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

			.table {
				width: 1672px;
			}

			.tr {
				display: flex;
				overflow: hidden;

				.th,
				.td {
					display: inline-block;
					padding: 4rpx;
					width: 286rpx;
					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: #17BB89;
				color: #FFFFFF;
			}

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