bigdata_WX/pages/cb/xctdetail/analyse.vue

<template>
	<view class="anabox">
		<view class="timebox">
			<view class="schedulebox">
				<view class="schedule" @click="pickertfone=!pickertfone">
					<p class="schedule_value">{{yservalue}}</p>
					<!-- {{titletext[indexone]}} -->
					<p class="schedule_icon">
						<u-icon name="arrow-down"></u-icon>
					</p>
				</view>
				<u-picker v-model="pickertfone" mode="selector" @confirm="confirmFun" :default-selector="[yserindex]"
					:range="yearlist"></u-picker>
				<view class="schedule" @click="pickertfworm=!pickertfworm">
					<p class="schedule_value">{{wormvalue}}</p>
					<!-- {{titletext[indexone]}} -->
					<p class="schedule_icon">
						<u-icon name="arrow-down"></u-icon>
					</p>
				</view>
				<u-picker v-model="pickertfworm" mode="selector" @confirm="confirmFun2" :default-selector="[wormindex]"
					:range="wormlist"></u-picker>
			</view>
			<view class="wormtime">
				<view class="wormtime_item">
					<image src="../../../../static/images/cb/shijianqi.png" mode="" class="img"></image>
					<p>始见期</p>
					<p>{{timeobj.startTime}}</p>
				</view>
				<view class="wormtime_item">
					<image src="../../../../static/images/cb/gaofengqi.png" mode="" class="img"></image>
					<p>高峰期</p>
					<p>{{timeobj.highTime}}</p>
					<p>数量：{{timeobj.highNum}}头</p>
				</view>
				<view class="wormtime_item">
					<image src="../../../../static/images/cb/zhongjianqi.png" mode="" class="img"></image>
					<p>终见期</p>
					<p>{{timeobj.endTime}}</p>
				</view>
			</view>
			<view class="selecttimes" @click="tiemshow=!tiemshow">
				<view class="" style="line-height: 28px;">
					时间选择器
				</view>
				<view class="timesbox">
					<!-- <image
						:src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
						mode=""></image> -->
					<p>{{timetab(oldtime)}}</p>
					<p class="or">至</p>
					<p>{{timetab(newtime)}}</p>
					<!-- <u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon> -->
				</view>
				<u-calendar v-model="tiemshow" mode="range" @change="tiemchange"></u-calendar>
			</view>
			<view class="tendency">
				<canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts" @touchstart="touchLineA($event)" v-show="chartstf"
					@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="tendency">
				<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing" v-show="chartstf"
					: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="tendency_pro">
				<view class="" v-for="(item,index) in progresslist">
					<span>{{index+1}}、{{item.name}}</span>
					<u-line-progress :active-color="colorlist[index%6]"
						:percent="Number((item.data/pestsum*100).toFixed(2))" :show-percent="false"></u-line-progress>
					<span>{{Number((item.data/pestsum*100).toFixed(2))}}%</span>
				</view>
			</view>
			<view class="tablebox">
				<view class="top_text">
					<view :class="topindex==index?'title_text_color':'tltle_text'" v-for="(item,index) in toptext"
						:key="index" @click="changeindex(index)">
						<span class="title_item">
							{{item}}
						</span>
					</view>
				</view>
				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
					<table class="table" v-if="topindex==0">
						<tr class="tr">
							<th class="th" v-for="(item,index) in thdata" :key="'a'+index">{{item}}</th>
						</tr>
						<tr class="tr" v-for="(items,indexs) in eqlistdata" :key="indexs">
							<td class="td">{{items.deviceId}}</td>
							<td class="td">{{items.deviceName}}</td>
							<td class="td" @click="wormdetails(items.pest_dict)">{{items.pestName}}</td>
							<td class="td">{{items.addtime|timeFormat()}}</td>
							<td class="td">{{items.location}}</td>
							<td class="td" @click="examine(items.indentify_photo)">查看</td>
						</tr>
						<tr class="tr" v-if="forbidden1">
							<td class="td" v-for="item in 6">暂无数据</td>
						</tr>
					</table>
					<table class="table2" v-else>
						<tr class="tr">
							<th class="th" v-for="(item,index) in thdata2" :key="'a'+index">{{item}}</th>
						</tr>
						<tr class="tr" v-for="(items,indexs) in eqlistdata" :key="indexs">
							<td class="td">{{items.pest_name}}</td>
							<td class="td">{{items.pest_num}}</td>
							<td class="td">{{items.addtime|timeFormat()}}</td>
						</tr>
						<tr class="tr" v-if="forbidden2">
							<td class="td" v-for="item in 6">暂无数据</td>
						</tr>
					</table>
				</scroll-view>
				<view class="pagenumber">
					<button @click="prev" :disabled=" page == 1 ">上一页</button>
					<view class="pagenumber_page">
						第{{page}}页
					</view>
					<view class="pagenumber_page">
						共 {{pagesum}} 页
					</view>
					<button @click="next" :disabled=" page == pagesum ">下一页</button>
				</view>
			</view>
			<u-modal v-model="show" :mask-close-able="true" @confirm="modalconfirm" title="24小时数据">
				<view class="modalbox">
					<p v-for="(item,key) in pest_dict">{{key}}--{{pest_dict[key]}}头</p>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
	var canvaColumnA = null;
	var canvasRing = null;
	export default {
		data() {
			return {
				d_id: "",
				oldtime: "",
				newtime: "",
				tiemshow: false,
				cWidth: '350',
				cHeight: '350',
				pixelRatio: 1,
				pickertfone: false,
				yservalue: "",
				yearlist: [],
				yserindex: "",
				pickertfworm: false,
				wormvalue: "",
				wormlist: [],
				wormindex: "",
				timeobj: {
					endTime: "",
					highNum: "",
					highTime: "",
					startTime: "",
				},
				progresslist: [],
				reslist: {
					char_data: {},
					at_ah_info: []
				},
				pestsum: 0,
				colorlist: ["rgb(24, 144, 255)", "rgb(47, 194, 91)", "rgb(250, 204, 20)", "rgb(240, 72, 100)",
					"rgb(133, 67, 224)", "rgb(144, 237, 125)"
				],
				page: 1,
				pagesum: 1,
				eqlistdata: [],
				thdata: [
					"设备ID", "设备名称", "害虫名称", "上报时间", "设备位置", "图像"
				],
				thdata2: [
					"害虫名称", "害虫数量", "上报时间"
				],
				topindex: 0,
				toptext: ["图像溯源", "虫害基础数据"],
				forbidden1: false,
				forbidden2: false,
				show: false,
				pest_dict: {},
				chartstf:true
			}
		},
		watch:{
			pickertfone:function(e){
				console.log(e)
				this.chartstf = !e
			},
			tiemshow:function(e){
				this.chartstf = !e
			},
			pickertfworm:function(e){
				this.chartstf = !e
			},
		},
		methods: {
			getyear() {
				var Year = new Date().getFullYear();
				var num = Year - 2019;
				for (var i = 0; i < num + 1; i++) {
					this.yearlist.push(2019 + i);
				}
				this.yservalue = this.yearlist[this.yearlist.length - 1];
				this.yserindex = this.yearlist.length - 1
				this.getwormtime()
			},
			async getwormtime() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.pest_raise_info',
					data: {
						d_ids: this.d_id,
						identify_model: 'A',
						year: this.yservalue,
					}
				})
				console.log(res)
				this.wormlist = res.pest_list
				this.wormtimelist = res.pest_info
				this.wormvalue = this.wormlist[0]
				this.wormindex = 0
				if (this.wormvalue) {
					this.timeobj = this.wormtimelist[this.wormvalue]
				}
				console.log(this.timeobj)

			},
			confirmFun(e) {
				console.log(e)
				this.yserindex = e[0]
				this.yservalue = this.yearlist[e[0]]
				this.getwormtime()
			},
			confirmFun2(e) {
				console.log(e)
				this.wormindex = e[0]
				this.wormvalue = this.wormlist[e[0]]
				this.timeobj = this.wormtimelist[this.wormvalue]
				this.setlineoption()
			},
			async getwormline() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.pest_statistics_char_new',
					data: {
						d_ids: this.d_id,
						identify_model: 'A',
						start_time: this.oldtime,
						end_time: this.newtime
					}
				})
				// console.log(res)
				this.reslist.char_data = res.char_data
				this.reslist.at_ah_info = res.at_ah_info
				var ringarr = []

				if (this.checkObj(res.pest_total)) {
					for (var key in res.pest_total) {
						var nameobj = {
							name: '',
							data: "",
						}
						// console.log(key)
						nameobj.name = key
						nameobj.data = res.pest_total[key]
						ringarr.push(nameobj)
					}
				}
				this.setlineoption()
				// this.showRing(ringarr)
				var num = 0
				for (var i = 0; i < ringarr.length - 5; i++) {
					console.log(ringarr[i].name)
					num += ringarr[i].data
				}
				this.pestsum = 0
				for (var i = 0; i < ringarr.length; i++) {
					this.pestsum += ringarr[i].data
				}
				var sumobj = {
					name: "其他",
					data: num,
				}
				var ringarr2 = ringarr.slice(ringarr.length - 5)
				ringarr2.unshift(sumobj)
				// console.log(ringarr2)
				this.showRing(ringarr2)
				console.log(ringarr)
				this.progresslist = ringarr
			},
			setlineoption() {
				var res = this.reslist
				var xtitle = []
				var obj = []
				if (res.at_ah_info.length != 0) {
					var aharr = []
					var atarr = []
					for (var i = 0; i < res.at_ah_info.length; i++) {
						var times = new Date(res.at_ah_info[i].addtime * 1000)
						xtitle.push(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" +
							times.getSeconds())
						atarr.push(res.at_ah_info[i].at == "" ? "0" : res.at_ah_info[i].at)
						aharr.push(res.at_ah_info[i].ah == "" ? "0" : res.at_ah_info[i].ah)
					}
					var atobj = {
						name: '温度',
						data: atarr,
						color: '#00E29D'
					}
					var ahobj = {
						name: '湿度',
						data: aharr,
						color: '#6CBBFF'
					}
					obj.push(atobj)
					obj.push(ahobj)
				}
				// console.log(this.wormvalue)
				if (this.checkObj(res.char_data)) {
					for (var key in res.char_data) {
						if (this.wormvalue == key) {
							var wormobj = {
								name: key,
								data: [],
							}
							for (var i = 0; i < res.char_data[key].length; i++) {
								wormobj.data.push(res.char_data[key][i].ah == "" ? "0" : res.char_data[key][i].sum)
							}
							obj.push(wormobj)
						}
					}

				}
				this.showColumn("canvasColumnA", xtitle, obj)
			},
			checkObj(obj) {
				for (let i in obj) {
					return true;
				}
				return false;
			},
			tiemchange(e) {
				console.log(e)
				this.oldtime = +new Date(e.startDate) / 1000 - 8 * 60 * 60
				this.newtime = +new Date(e.endDate) / 1000 + 16 * 60 * 60 - 1
				// newtime: "",
				console.log(this.oldtime, this.newtime)
				this.page = 1
				this.getwormline()
				if (this.topindex == 0) {
					this.gettabledata()
				} else if (this.topindex == 1) {
					this.gettabledata2()
				}
			},
			timetab(e) {
				e = new Date(e * 1000)
				var year = e.getFullYear()
				var month = e.getMonth() + 1 < 10 ? "0" + (e.getMonth() + 1) : e.getMonth() + 1
				var day = e.getDate() < 10 ? "0" + e.getDate() : e.getDate()
				var time = year + "/" + month + "/" + day
				return time
			},
			showColumn(id, xtitle, xinfo) {
				var _self = this
				canvaColumnA = new uCharts({
					canvasId: id,
					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: 5, //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
					}
				});
			},
			showRing(data) {
				var _self = this
				canvasRing = new uCharts({
					canvasId: "canvasRing",
					type: 'ring',
					fontSize: 11,
					legend: {
						show: true,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 40 * _self.pixelRatio,
							labelWidth: 15
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: data,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
			},
			touchRing(e) {
				canvasRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
			tap(e) {
				canvasgroup[e.target.id].touchLegend(e);
				canvasgroup[e.target.id].showToolTip(e);
			},
			async gettabledata() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.pest_image_source',
					data: {
						d_ids: this.d_id,
						identify_model: 'A',
						start_time: this.oldtime,
						end_time: this.newtime,
						page: this.page
					}
				})
				this.pagesum = Math.ceil(res.total_count / 10)
				this.eqlistdata = res.pest_image_data
				if (this.eqlistdata.length == 0) {
					this.forbidden1 = true
				} else {
					this.forbidden1 = false
				}
				console.log(res)
			},
			async gettabledata2() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.pest_base_data',
					data: {
						d_ids: this.d_id,
						identify_model: 'A',
						start_time: this.oldtime,
						end_time: this.newtime,
						page: this.page
					}
				})
				this.pagesum = Math.ceil(res.total_count / 10)
				this.eqlistdata = res.pest_image_data
				if (this.eqlistdata.length == 0) {
					this.forbidden2 = true
				} else {
					this.forbidden2 = false
				}
				console.log(res)
			},
			changeindex(e) {
				this.topindex = e
				this.page = 1
				if (e == 0) {
					this.gettabledata()
				} else if (e == 1) {
					this.gettabledata2()
				}
			},
			prev() {
				this.page--
				if (this.topindex == 0) {
					this.gettabledata()
				} else if (this.topindex == 1) {
					this.gettabledata2()
				}
			},
			next() {
				this.page++
				if (this.topindex == 0) {
					this.gettabledata()
				} else if (this.topindex == 1) {
					this.gettabledata2()
				}
			},
			wormdetails(data) {
				console.log(data)
				this.show = true
				this.pest_dict = data
			},
			modalconfirm(){
				this.pest_dict = {}
			},
			examine(url) {
				var imgarr = [url]
				uni.previewImage({
					urls: imgarr,
					current: 0
				});
			},
		},
		onLoad(option) {
			this.d_id = option.d_id
			var date = +new Date() / 1000
			this.oldtime = Math.floor(date - 24 * 60 * 60)
			this.newtime = Math.floor(date)
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);
			this.getyear()
			this.$nextTick(() => {
				this.getwormline()
				if (this.topindex == 0) {
					this.gettabledata()
				} else if (this.topindex == 1) {
					this.gettabledata2()
				}
			}, 500)
		}
	}
</script>

<style lang="scss">
	.anabox {
		background-color: #f1f4ff;
		padding-top: 10px;
	}

	.selecttimes {
		// box-shadow: 0 0 10rpx #bcb9ca;
		// padding: 10rpx 20rpx;
		padding: 10px;
		box-sizing: border-box;
		margin: 10px auto 0;
		display: flex;
		background-color: #fff;
		width: 95%;
		.timesbox {
			display: flex;
			justify-content: space-around;
			width: 60%;
			margin-left: 10px;
			border: 1px solid #CCCCCC;
			padding: 5px;
			font-size: 12px;
			border-radius: 5px;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 6rpx;
			}

			.icon {
				color: #949494;
				text-align: right;
				margin-left: 30rpx;

			}
		}
	}

	.wormtime {
		width: 95%;
		padding: 10px;
		box-sizing: border-box;
		margin: 0 auto;
		// margin-top: 10px;
		display: flex;
		justify-content: space-around;
		background-color: #fff;

		.wormtime_item {
			width: 25%;
			margin-top: 10px;
			padding: 10px;
			.img {
				width: 50px;
				height: 50px;
			}

			p:nth-child(2) {
				font-size: 16px;
				font-weight: 700;
			}
			p:nth-child(3) {
				font-size: 12px;
				margin-top: 5px;
			}
			p:last-child {
				font-size: 12px;
				margin-top: 5px;
			}
		}

		.wormtime_item:first-child {
			background-color: #F9FAFE;
		}

		.wormtime_item:nth-child(2) {
			background-color: #FFFCF9;
		}

		.wormtime_item:last-child {
			background-color: #FCF8FF;
		}
	}

	.schedulebox {
		display: flex;
		padding: 10px 10px;
		box-sizing: border-box;
		width: 95%;
		// justify-content: space-around;
		margin: 0px auto;
		background-color: #fff;

		.schedule {
			display: flex;
			width: 240rpx;
			height: 50rpx;
			// border: 2rpx solid #F0F0F0;
			margin-right: 20rpx;
			background-color: #F9FAFC;
			border-radius: 25px;

			.schedule_value {
				width: 70%;
				text-align: center;
				line-height: 50rpx;
				font-size: 24rpx;
			}

			.schedule_icon {
				width: 30%;
				// background-color: #F2F2F2;
				text-align: center;
				line-height: 50rpx;
				/deep/.u-icon__icon{
					color: rgba(0,0,0,0.3);
				}
			}
		}
	}

	.tendency {
		width: 95%;
		display: flex;
		justify-content: space-around;
		margin: 0 auto;
		background-color: #fff;
	}

	.tendency_pro {
		width: 95%;
		padding: 0 20px;
		box-sizing: border-box;
		height: 140px;
		overflow-y: auto;
		margin: 0 auto;
		background-color: #fff;
		span:first-child {
			display: inline-block;
			width: 100px;
			overflow: hidden; //溢出隐藏
			white-space: nowrap; //禁止换行
			text-overflow: ellipsis; //...
		}

		/deep/.u-progress {
			width: calc(100% - 150px) !important;
		}

		span:last-child {
			display: inline-block;
			width: 30px;
			margin-left: 10px;
		}
	}

	.tablebox {
		display: flex;
		flex-wrap: wrap;
		width: 95%;
		margin: 10px auto 20px;
		// box-shadow: 0 0 10rpx #bcb9ca;
		background-color: #fff;
		.top_text {
			width: 100%;
			display: flex;
			height: 30px;
			line-height: 30px;
			.tltle_text {
				width: 30%;
				text-align: center;
				// border: 2rpx solid #F0F0F0;
				// text-align: center;
				// background-color: #F0F0F0;
				// color: #000;
			}

			.title_text_color {
				width: 30%;
				text-align: center;
				.title_item{
					border-bottom: 2px solid #64CC82;
					color: #64CC82;
				}
				// width: 50%;
				// border: 2rpx solid #64CC82;
				// background-color: #64CC82;
				// color: #fff;
				// text-align: center;
			}
		}

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

			.table {
				width: 1800rpx;

				.td:nth-child(3),
				.td:last-child {
					color: #37aed8;
				}
			}

			.tr {
				display: flex;
				overflow: hidden;

				.th,
				.td {
					display: inline-block;
					padding: 5rpx;
					text-align: center;
					height: 52rpx;
					line-height: 52rpx;
					width: 320rpx;
				}

			}

			.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: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

	.modalbox {
		width: 100%;
		// display: flex;
		// flex-wrap: wrap;
		height: 120px;
		padding-left: 30px;
		margin-top: 10px;
		overflow-y: auto;

		p {
			// width: 50%;
		}
	}

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

		.u-calendar__action__text {
			line-height: 25px;
		}
	}
</style>