bigdata_WX/pages/cb/xctdetail/xctdetail.vue

<template>
	<view>
		<view :class="['info',equipInfo.is_online==1?'on':'off']">
			<view class="" @click="copy(equipInfo)">
				设备ID：{{equipInfo.imei||equipInfo.device_id}}
				<image :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'" mode="" class="tishi">
				</image>
			</view>
			<view class="">
				设备名称：{{equipInfo.device_name==""?"无":equipInfo.device_name}}
			</view>
			<view class="">
				设备类型：吸虫塔
			</view>
			<view class="">
				最新上报时间：{{equipInfo.uptime||equipInfo.uptime | timeFormat}}
			</view>
			<view class="">
				设备地址：{{equipInfo.address||city}}
			</view>
		</view>
		<view class="caobox">
			<view class="caobox_item" v-if="$QueryPermission(182)" @click="tophoto">
				<image :src="$imageURL+'/bigdata_app/image/cb/1.png'" mode="widthFix"></image>
				<view class="">
					查看图片
				</view>
			</view>
			<view class="caobox_item" v-if="$QueryPermission(172)" @click="toset">
				<image :src="$imageURL+'/bigdata_app/image/cb/4.png'" mode="widthFix"></image>
				<view class="">
					设备控制
				</view>
			</view>
			<view class="caobox_item" v-if="$QueryPermission(238)" @click="toanal">
				<image :src="$imageURL+'/bigdata_app/image/cb/3.png'" mode="widthFix"></image>
				<view class="">
					虫情分析
				</view>
			</view>
			<view class="caobox_item" @click="simRouter">
				<image :src="$imageURL+'/bigdata_app/image/cb/6.png'" mode="widthFix"></image>
				<view class="">
					SIM卡
				</view>
			</view>
		</view>
		<view class="" v-if="$QueryPermission(183)">
			<view class="">
				历史数据
			</view>
			<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>
				<u-calendar v-model="timeshow" :mode="mode" @change="timechange"></u-calendar>
			</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-if="canvastishiTF" canvas-id="canvasColumnA" id="canvasColumnA" class="charts" v-show="!timeshow"
					@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="condition">
				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
					<table class="table" v-if="$QueryPermission(271)">
						<tr class="tr">
							<th class="th" v-for="(item,index) in tableHeadTxt" :key="'a'+index">{{item}}</th>
						</tr>
						<tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs" v-if="!forbidden">
							<td class="td">{{items.d_h_t.addtime|timeFormat()}}</td>
							<td class="td">{{items.d_h_t.at}}</td>
							<td class="td">{{items.d_h_t.ah}}</td>
							<td class="td">{{items.d_h_t.dver}}</td>
							<td class="td">{{items.d_h_t.ws==0?'待机' : '工作'}}</td>
							<td class="td">{{items.d_h_t.current}}</td>
							<td class="td">{{items.d_h_t.vbat}}</td>
							<td class="td">{{items.d_h_t.lng}}</td>
							<td class="td">{{items.d_h_t.lat}}</td>
						</tr>
						<tr class="tr" v-if="forbidden">
							<td class="td" v-for="item in 9">暂无数据</td>
						</tr>
					</table>
					<table class="table" v-else>
						<tr class="tr">
							<th class="th" v-for="(item,index) in tableHeadTxt2" :key="'a'+index">{{item}}</th>
						</tr>
						<tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs" v-if="!forbidden">
							<td class="td">{{items.d_h_t.addtime|timeFormat()}}</td>
							<td class="td">{{items.d_h_t.at}}</td>
							<td class="td">{{items.d_h_t.ah}}</td>
							<td class="td">{{items.d_h_t.dver}}</td>
							<td class="td">{{items.d_h_t.ws==0?'待机' : '工作'}}</td>
							<td class="td">{{items.d_h_t.lng}}</td>
							<td class="td">{{items.d_h_t.lat}}</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>
		</view>
		<view class="" v-else>
			暂无数据
		</view>
	</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;
	export default {
		data() {
			return {
				equipInfo: {},
				canvastishiTF: false,
				dataloadingtf: false,
				cWidth: '400',
				cHeight: '400',
				pixelRatio: 1,
				start_time: "",
				end_time: "",
				timeshow: false,
				mode: 'range',
				historydatas: [],
				tableHeadTxt: [
					"上报时间",
					"环境温度(°C)",
					"环境湿度(%)",
					"版本号",
					"工作状态",
					"电流(mA)",
					"电压(V)",
					"经度",
					"纬度",

				],
				tableHeadTxt2: [
					"上报时间",
					"环境温度(°C)",
					"环境湿度(%)",
					"版本号",
					"工作状态",
					"经度",
					"纬度",

				],
				historylistdata: [],
				pagesum: 10,
				page: 1,
				forbidden: false
			}
		},
		methods: {
			copy(item) {
				console.log(item)
				uni.setClipboardData({
					data: item.imei || item.device_id,
					success: function() {
						console.log('success');
					}
				});
			},
			toset() {
				uni.navigateTo({
					url: "./xctset?device_id=" + this.equipInfo.imei + "&d_id=" + this.equipInfo.d_id + "&dtype=" +
						this.equipInfo.dtype +
						"&device_name=" + this.equipInfo.device_name
				})
			},
			tophoto() {
				uni.navigateTo({
					url: "./photolist?device_id=" + this.equipInfo.imei + "&d_id=" + this.equipInfo.d_id
				})
			},
			toanal() {
				uni.navigateTo({
					url: "./analyse?d_id=" + this.equipInfo.d_id + "&device_id=" + this.equipInfo.imei +
						"&device_type=12&disable=" + this.equipInfo.disable
				})
			},
			simRouter() {
				uni.navigateTo({
					url: "/pages/prevention/sim?id=" + this.equipInfo.d_id
				})
			},
			timechange(e) {
				this.start_time = +new Date(e.startDate)
				this.end_time = +new Date(e.endDate)
				this.history()
				this.getwind()
			},
			async history() { //历史数据列表折线图
				this.dataloadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.device_xct_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),
					}
				})
				console.log(res)
				this.dataloadingtf = false
				this.historydatas = res
				console.log(this.historydatas)
				if (this.historydatas.length == 0) {
					this.canvastishiTF = false
				} else {
					this.canvastishiTF = true

					var arr1 = []
					var arr2 = []
					var arr3 = []
					var xtitle = []
					for (var i = 0; i < res.length; i++) {
						var times = new Date(res[i].addtime * 1000)
						xtitle.push(times.getMonth() + 1 + "/" + times.getDate() + "-" + times.getHours() + ":" + times
							.getMinutes())
						arr1.push(res[i].temperature == "" ? "0" : res[i].temperature)
						arr2.push(res[i].humidity == "" ? "0" : res[i].humidity)
					}
					// console.log(arr1)
					var obj = [{
						name: '温度',
						data: arr1,
						color: '#00E29D'
					}, {
						name: '湿度',
						data: arr2,
						color: '#6CBBFF'
					}]
					this.showColumn("canvasColumnA", xtitle, obj)
				}
			},
			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: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: (val) => {
							return val.toFixed(1)
						}
					},
					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
					}
				});
			},
			async getwind() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xct_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),
						page: this.page,
						page_size: "10"
					}
				})
				console.log(res)
				if (res.data.length) {
					this.historylistdata = res.data
					this.pagesum = Math.ceil(res.counts / 10)
					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()
				}
			},
		},
		onLoad(option) {
			this.equipInfo = JSON.parse(option.info)
			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.getwind()
		},
	}
</script>

<style lang='scss'>
	page {
		padding: 20rpx;
		box-sizing: border-box;

		.info {
			padding: 20rpx 40rpx;
			color: #fff;
			line-height: 50rpx;
			font-size: 26rpx;
			background-size: 100% auto;
			background-repeat: no-repeat;
			background-color: #0DC6B6;
			background-position: top left;
			box-sizing: border-box;
			width: 100%;

			.tishi {
				width: 28rpx;
				height: 28rpx;
				margin: 0rpx 0 0 20rpx;
			}
		}

		.on {
			background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/onBg.png')
		}

		.off {
			background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/cb/offBg.png')
		}

		.caobox {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			line-height: 50rpx;

			image {
				width: 52rpx;
			}

			.caobox_item {
				padding: 20rpx 0;
				box-sizing: border-box;
				flex-basis: 25%;
			}
		}

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

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

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

		.shuju_one {
			position: relative;
			width: 100%;
			margin: 40rpx 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;
				}
			}
		}
	}

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

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

			.table {
				width: 1164px;
			}

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

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

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