bigdata_WX/pages/disease/cmb.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative; top: 44px">
			<view style="position: fixed; z-index: 100; width: 100%">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="设备详情"></uni-nav-bar>
			</view>
			<view class="info">
				<view class="info_item">
					<image :src="$imageURL+'/bigdata_app/image/cb/onBg.png'" mode="" class="bgi"></image>
					<p style="font-size: 32rpx" @click="copy(eqinfo.device_id)">
						设备 ID：{{ eqinfo.device_id || eqinfo.id || "无"}}
						<image :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'" mode=""
							class="tishi"></image>
					</p>
					<p>设备名称：{{ eqinfo.device_name || eqinfo.name || eqinfo.equip_name || "无" }}</p>
					<p>
						最近上报时间：<span v-if="eqinfo.uptime">{{ eqinfo.uptime == 0 ? '无' : eqinfo.uptime | timeFormat()
            }}</span><span v-else>{{eqinfo.uptime == 0 ? '无' : eqinfo.uptime | timeFormat() }}</span>
					</p>
					<p>地址：{{ eqinfo.location || eqinfo.address || "暂无地址" }}</p>
				</view>
			</view>
			<view class="control">
				<view class="control_item" v-if="kongtf" @click="control">
					<image :src="
              $imageURL+'/bigdata_app' +
              '/image/environment/forecastResult.png'
            " mode=""></image>
					<p>预测结果</p>
				</view>
			</view>
			<view class="his_box" v-if="datatf">
				<view class="selecttimes" @click="tiemshow = !tiemshow">
					<view class="timesbox">
						<image
							:src="$imageURL+'/bigdata_app/image/prevention/1acfe2751c01d3786cdc49b83d7e505.png'"
							mode=""></image>
						<p>{{ timetab(begintime) }}</p>
						<p class="or">~</p>
						<p>{{ timetab(end) }}</p>
						<u-icon name="rili" custom-prefix="custom-icon" class="icon"></u-icon>
					</view>
					<u-calendar v-model="tiemshow" mode="range" @change="tiemchange" range-color="#999"
						btn-type="success"
						active-bg-color="#0BBC58"
						range-bg-color="rgba(11,188,88,0.13)"></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-show="!tiemshow" canvas-id="canvasColumnA" id="canvasColumnA" 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>
					<canvas v-show="!tiemshow" 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">
						<view class="table">
							<view class="tr" style="width:6000rpx">
								<view class="th" v-for="(item, index) in tableHead" :key="'a' + index">
									{{ item }}
								</view>
							</view>
							<view class="tr" style="width:6000rpx" v-for="(items, indexs) in historylistdata"
								:key="'b' + indexs">
								<view class="td">{{ items.uploadTime | timeFormat() }}</view>
								<view class="td">{{ items.dianChiDianYa }}</view>
								<view class="td">{{ items.fiftyTuRangHanShuiLiang }}</view>
								<view class="td">{{ items.fiftyTuRangWenDu }}</view>
								<view class="td">{{ items.fiveTuRangHanShuiLiang }}</view>
								<view class="td">{{ items.fiveTuRangWenDu }}</view>
								<view class="td">{{ items.kongQiWenDu }}</view>
								<view class="td">{{ items.luDianWenDu }}</view>
								<view class="td">{{ items.riZhaoShiShu }}</view>
								<view class="td">{{ items.shiRunShiJian }}</view>
								<view class="td">{{ items.tenTuRangHanShuiLiang }}</view>
								<view class="td">{{ items.tenTuRangWenDu }}</view>
								<view class="td">{{ items.tianJiangYuLiang }}</view>
								<view class="td">{{ items.tuRangDaoDianLv }}</view>
								<view class="td">{{ items.twentyFiveTuRangHanShuiLiang }}</view>
								<view class="td">{{ items.twentyFiveTuRangWenDu }}</view>
								<view class="td">{{ items.twentyTuRangHanShuiLiang }}</view>
								<view class="td">{{ items.twentyTuRangWenDu }}</view>
								<view class="td">{{ items.xiangDuiShiDu }}</view>
								<view class="td">{{ items.xiaoShiJiangYuLiang }}</view>
							</view>
							<view class="tr" style="width:6000rpx" v-if="historylistdata.length == 0">
								<view class="td" v-for="item in 13">暂无数据</view>
							</view>
						</view>
					</scroll-view>
					<view class="pagenumber">
						<button @click="prev">上一页</button>
						<view class="pagenumber_page"> 第 {{ page }} 页 </view>
						<view class="pagenumber_page"> 共 {{ pagesum }} 页 </view>
						<button @click="next">下一页</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from "../../components/js_sdk/u-charts/u-charts/u-charts.js";
	var canvaColumnA = null;
	var canvaColumnB = null;
	export default {
		data() {
			return {
				basetype: "",
				kongtf: false,
				datatf: false,
				eqinfo: {},
				city: "河南省",
				tiemshow: false, //时间筛选弹框
				begintime: "", //开始时间
				end: "", //结束时间
				dataloadingtf: true,
				canvastishiTF: false,
				device_id: "", //设备ID
				tableHead: [
					"上报时间",
					"电池电压",
					"50cm土壤含水量",
					"50cm土壤温度",
					"5cm土壤含水量",
					"5cm土壤温度",
					"空气温度",
					"露点温度",
					"日照时数",
					"叶面湿润时间",
					"10cm土壤含水量",
					"10cm土壤温度",
					"天降雨量",
					"土壤导电率",
					"25cm土壤含水量",
					"25cm土壤温度",
					"20cm土壤含水量",
					"20cm土壤温度",
					"相对湿度",
					"时降雨量",
				], //表格抬头
				forbidden: false,
				historylistdata: [], //历史数据
				pagesum: 1,
				page: 1,
				cWidth: "",
				cHeight: "",
				pixelRatio: 1,
				param: {
					dianChiDianYa: "电池电压",
					fiftyTuRangHanShuiLiang: "50cm土壤含水量",
					fiftyTuRangWenDu: "50cm土壤温度",
					fiveTuRangHanShuiLiang: "5cm土壤含水量",
					fiveTuRangWenDu: "5cm土壤温度",
					kongQiWenDu: "空气温度",
					luDianWenDu: "露点温度",
					riZhaoShiShu: "日照时数",
					shiRunShiJian: "叶面湿润时间",
					tenTuRangHanShuiLiang: "10cm土壤含水量",
					tenTuRangWenDu: "10cm土壤温度",
					tianJiangYuLiang: "天降雨量",
					tuRangDaoDianLv: "土壤导电率",
					twentyFiveTuRangHanShuiLiang: "25cm土壤含水量",
					twentyFiveTuRangWenDu: "25cm土壤温度",
					twentyTuRangHanShuiLiang: "20cm土壤含水量",
					twentyTuRangWenDu: "20cm土壤温度",
					xiangDuiShiDu: "相对湿度",
					xiaoShiJiangYuLiang: "小时降雨量",
				},
				color: [
					"#ff7b30",
					"#f93948",
					"#fb2ea4",
					"#bc59db",
					"#7457ec",
					"#307dfd",
					"#31bfff",
					"#46e9b1",
					"#19cd48",
					"#b2e409",
					"#f0f254",
					"#fed000",
					"#f06f14",
					"#a74040",
					"#90bb71",
					"#a07635",
					"#6502bd",
					"#048bbb",
					"#9ebb01",
					"#cc9202",
					"#ff8fa0",
					"#a3d55f",
					"#d9bedd",
					"#00a6b6",
					"#236093",
					"#009fff",
					"#ddc0a6",
					"#c4a6dd",
					"#dda6a6",
					"#779e33",
					"#a6ddb0",
				],
			};
		},
		methods: {
			copy(item) {
				uni.setClipboardData({
					data: item,
					success: function() {
						console.log("success");
					},
				});
			},
			control() {
				//设备控制
				uni.navigateTo({
					url: "./forecastResult?id=" + this.eqinfo.device_id,
				});
			},
			tiemchange(e) {
				console.log(e);
				//切换时间
				// this.begintime = parseInt(+new Date(e.startDate) / 1000);
				this.begintime = parseInt(+new Date(`${e.startDate} 00:00:00`) / 1000);
				this.end = parseInt(+new Date(`${e.endDate} 00:00:00`) / 1000);
				this.histprydatas();
				this.getChartLine();
			},
			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;
			},
			// 表格数据
			async histprydatas() {
				//表格历史数据
				const res = await this.$myRequest({
					url: "/api/api_gateway?method=wheat.wheat.wheat_data_list",
					data: {
						device_id: this.eqinfo.device_id,
						page: this.page,
						begin: this.begintime,
						end: this.end,
					},
				});
				this.pagesum = Math.ceil(res.nums / 10) || 1;
				if (this.pagesum > 0) {
					this.forbidden = false;
					var dat = res.sta;
					this.historylistdata = [];
					for (var i = 0; i < dat.length; i++) {
						dat[i] = dat[i].replace(/'/g, '"')
						// console.log(dat[i])
						var item = JSON.parse(`${dat[i]}`);
						var obj = {};
						for (var i1 in item) {
							// if (i1 == "uploadTime") {
							//   obj[i1] = this.formatTime(item[i1] * 1000);
							// } else {
							obj[i1] = item[i1];
							// }
						}
						this.historylistdata.push(obj);
					}
				} else {
					this.forbidden = true;
					this.historylistdata = [];
				}
			},
			//获取折线图数据
			async getChartLine() {
				const res = await this.$myRequest({
					method: "POST",
					url: "/api/api_gateway?method=wheat.wheat.wheat_data",
					data: {
						device_id: this.eqinfo.device_id,
						begin: this.begintime,
						end: this.end,
					},
				});
				this.dataloadingtf = false;
				var dat = res;
				if (dat.length) {
					var regroupData = []; //重组数据
					var kindArr = []; //通道数组
					var time = [];
					var xtitle = [];
					for (var i = 0; i < dat.length; i++) {
						// console.log(dat[i])
						dat[i] = dat[i].replace(/'/g, '"')
						var item = JSON.parse(`${dat[i]}`);
						var tim = parseInt(item["uploadTime"]) * 1000;
						var times = new Date(tim);
						xtitle.unshift(
							times.getMonth() +
							1 +
							"/" +
							times.getDate() +
							"-" +
							times.getHours() +
							":" +
							times.getMinutes()
						);
						time.unshift(tim);
						for (var j in item) {
							var arr = "";
							if (j == "id" || j == "uploadTime") {
								continue;
							} else if (kindArr.indexOf(j) == "-1") {
								kindArr.push(j);
								regroupData.push({
									name: this.param[j],
									color: this.color[kindArr.length - 1],
									data: [],
								});
								// arr.push(tim);
								arr = parseFloat(item[j]);
								regroupData[kindArr.indexOf(j)].data.unshift(arr);
							} else {
								// arr.push(tim);
								// arr.push(parseFloat(item[j]));
								arr = parseFloat(item[j]);
								regroupData[kindArr.indexOf(j)].data.unshift(arr);
							}
						}
					}
					console.log(regroupData);
					// 分割折线图
					const regroupDataNum = Math.ceil(regroupData.length / 2);
					const options1 = regroupData.filter((v, i) => {
						return i < regroupDataNum;
					});
					const options2 = regroupData.filter((v, i) => {
						return i >= regroupDataNum;
					});
					console.log(options1, options1);

					this.showColumn("canvasColumnA", xtitle, options1);
					this.showColumn("canvasColumnB", xtitle, options2);
					this.canvastishiTF = true;
				} else {
					this.canvastishiTF = false;
					this.showColumn("canvasColumnA", xtitle, []);
					this.showColumn("canvasColumnB", xtitle, []);
				}
			},
			prev() {
				//上一页
				if (this.page > 1) {
					this.page--;
					this.histprydatas();
				}
			},
			next() {
				//下一页
				if (this.page < this.pagesum) {
					this.page++;
					this.histprydatas();
				}
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1,
				});
			},
			showColumn(id, xtitle, xinfo) {
				console.log(id);
				var _self = this;
				const ctx = uni.createCanvasContext(id, this);
				if (id === "canvasColumnA") {
					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",
							},
						},
					});
				} else if (id === "canvasColumnB") {
					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.eqinfo = JSON.parse(option.shebei);
			this.basetype = this.eqinfo.type
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);
			this.device_id = option.id;
			this.end = parseInt(+new Date() / 1000);
			this.begintime = parseInt(this.end - 24 * 60 * 60);
			this.histprydatas();
			this.getChartLine();
			if (this.basetype == 11) {
				this.kongtf = this.$QueryPermission(251)
				this.datatf = this.$QueryPermission(221)
			} else if (this.basetype == 19) {
				this.kongtf = this.$QueryPermission(252)
				this.datatf = this.$QueryPermission(222)
			} else if (this.basetype == 20) {
				this.kongtf = this.$QueryPermission(253)
				this.datatf = this.$QueryPermission(223)
			} else if (this.basetype == 21) {
				this.kongtf = this.$QueryPermission(280)
				this.datatf = this.$QueryPermission(279)
			} else if (this.basetype == 26) {
				this.kongtf = this.$QueryPermission(344)
				this.datatf = this.$QueryPermission(343)
			}
		},
	};
</script>

<style lang="scss">
	.info {
		width: 100%;
		position: absolute;
		top: 44px;

		.info_item {
			width: 90%;
			margin: 0 auto;
			height: 240rpx;
			padding: 40rpx 50rpx;
			position: relative;
			box-sizing: border-box;

			.bgi {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			p {
				font-size: 24rpx;
				color: #ffffff;
				margin-bottom: 10rpx;

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

	.control {
		width: 90%;
		position: absolute;
		top: 360rpx;
		left: 5%;
		display: flex;
		text-align: center;
		// padding: 0 30rpx;
		box-sizing: border-box;

		.control_item {
			width: 128rpx;
			height: 120rpx;
			width: 20%;

			image {
				width: 70rpx;
				height: 70rpx;
			}

			p {
				font-size: 24rpx;
			}
		}
	}

	.his_box {
		width: 100%;
		top: 270px;
		position: relative;
	}

	.selecttimes {
		width: 90%;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin: 0 auto;
		font-size: 28rpx;

		.timesbox {
			display: flex;
			justify-content: space-around;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 6rpx;
			}

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

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

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

	.shuju_one {
		width: 90%;
		margin: 20px auto;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding-top: 20rpx;
		height: 1000rpx;

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

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

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

			.tr {
				display: flex;
				overflow: hidden;

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

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