bigDataApp/pages/waterandfernew/details第一版vue

<template>
	<view class="box">
		<!-- 上面要素值 -->
		<view :class="`bigBox ${show ? 'bigOpen' : ''}`">
			<view class="topInfo">
				<u-row gutter="10">
					<u-col span="3" v-for="item in ElementList">
						<view class="item">
							<view>{{item.value}}</view>
							<view>{{item.unit}}</view>
							<view>{{item.name}}</view>
						</view>
					</u-col>
				</u-row>
				<view class="readmore" v-if="!show" @click="show=true;getHistoryData()">
					查看详情<u-icon name="arrow-down" color="#93FFDE" size="28"></u-icon>
				</view>
			</view>
			<!-- 统计图 -->
			<view class="hisBox" v-show="show">
				<view class="axiosBox">
					<view class="title">
						历史数据
					</view>
					<view class="histimeBox">
						<u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
						<view class="time" @click="calendarshow = true">
							{{historyTime.startDate ? historyTime.startDate : timestampToDateTime(new Date().getTime()/1000)}}
						</view>
						<view class="">至</view>
						<view class="time" @click="calendarshow = true">
							{{historyTime.endDate ? historyTime.endDate : timestampToDateTime(new Date().getTime()/1000)}}
						</view>
						<u-icon name="close-circle" color="#C1C1C1" size="28" @click="historyTime={};getHistoryData()"
							v-if="historyTime.startDate"></u-icon>
					</view>
					<u-calendar v-model="calendarshow" mode="range" @change="changeDate"></u-calendar>
					<view class="chartBox">
						<canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts"
							@touchstart="touchLineA($event)" @touchmove="moveLineA($event)"
							@touchend="touchEndLineA($event)"></canvas>
					</view>
				</view>
				<view class="readmoreHIs" @click="show=false">
					收起详情<u-icon name="arrow-up" color="#14A478" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="" v-if="!show">
			<!-- 历史记录弹框 -->
			<u-tabs :list="list" active-color="#14A478" bar-width="100" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
			<!-- 设备图 -->
			<view class="devicePhoto" v-if="current == 0">
				<view class="titleBox">
					<u-alert-tips type="primary" :title-style="alertTipColor" title="点击按钮可对应控制阀门开关"
						:show-icon="true"></u-alert-tips>
					<view class="btn" @click="statusPanel=true">控制面板</view>
					<u-popup v-model="statusPanel" mode="bottom">
						<view class="consoleBox">
							<view class="swichBox">
								<u-row :gutter="16" justify="space-between">
									<u-col span="6" v-for="(item, index) in buttonList" v-if="(index + 1) % 2 == 1">
										<view class="preSwich">
											<view>肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}</view>
											<u-switch v-model="item.off" active-color="#14A478" inactive-color="#AEB4C2"
												:loading="item.disabled"
												@change="switchchange($event, item.number, item, index, true)"></u-switch>
										</view>
									</u-col>
									<u-col span="6" v-for="(item, index) in facilityvalve"
										v-if="index > buttonList.length - 1">
										<view class="preSwich">
											<view>{{item.name}}</view>
											<u-switch v-model="item.off" active-color="#14A478" inactive-color="#AEB4C2"
												:loading="item.disabled"
												@change="switchchange($event, item.number, item, index)"></u-switch>
										</view>
									</u-col>
								</u-row>
							</view>
							<u-button type="success" @click="statusPanel=false">确定</u-button>
						</view>
					</u-popup>
				</view>
				<view class="main">
					<image class="mainContent" src="../../static/images/waterandfernew/main.png"></image>
					<view class="sourceBox">
						<view class="smallBox">
							水源
						</view>
					</view>
					<!-- 桶 -->
					<view class="colList">
						<view class="preClo" v-for="(fei, index) in Array(feiNum / 2)" :key="`fei${index}`">
							<view>
								肥料{{ index + 1 }}
							</view>
							<image src="../../static/images/waterandfernew/col.png"></image>
						</view>
					</view>
					<!-- 电风扇 -->
					<view class="fengBox">
						<view class="relativeBox">
							<image src="../../static/images/waterandfernew/fengmain.png"></image>
							<image :class="feiBeng ? 'circleAnm' : ''"
								src="../../static/images/waterandfernew/fengleafs.png"></image>
						</view>
					</view>
					<!-- 水管控制阀 -->
					<view class="benList">
						<view class="preBen" v-for="item, index in buttonList" v-if="(index + 1) % 2 == 1"
							@click="switchchange(!item.off, item.number, item, index, true)">
							<image class="daoguan" src="../../static/images/waterandfernew/bottom.png"
								v-if="(index + 1) % 2 < 4"></image>
							<view class="info">
								肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}开关
							</view>
							<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png">
							</image>
							<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
						</view>
						<view class="preBen" v-for="item, index in facilityvalve" v-if="index > buttonList.length - 1"
							@click="switchchange(!item.off, item.number, item, index)">
							<image class="daoguan" src="../../static/images/waterandfernew/bottom.png"
								v-if="(index-buttonList.length + buttonList.length/2) < 4"></image>
							<view class="info">
								{{item.name}}
							</view>
							<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png">
							</image>
							<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 操作记录 -->
			<view class="consoleList" v-else>
				<view class="histimeBox">
					<u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
					<view class="time" @click="consoleshow = true">
						{{consoleTime.startDate ? consoleTime.startDate : '开始'}}
					</view>
					<view class="">至</view>
					<view class="time" @click="consoleshow = true">{{consoleTime.endDate ? consoleTime.endDate : '结束'}}
					</view>
					<u-icon name="close-circle" color="#C1C1C1" size="28" @click="clearContime"
						v-if="consoleTime.startDate"></u-icon>
				</view>
				<u-calendar v-model="consoleshow" mode="range" @change="changeConsoleDate"></u-calendar>
				<view class="tableList tableTitle">
					<view>设备名称</view>
					<view>操作内容</view>
					<view>操作时间</view>
				</view>
				<view class="tableList" v-for="(item, index) in tableData" :key="item.uptime + index">
					<view>{{item.device_name}}</view>
					<view>{{item.operation_content}}</view>
					<view>{{item.uptime}}</view>
				</view>
				<u-loadmore :status="status" />
			</view>

		</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 {
				alertTipColor: {
					color: '#1890FF',
					fontSize: "28rpx"
				},
				device_id: '',
				mainBeng: false,
				feiBeng: false,
				calendarshow: false,
				historyTime: {},
				cWidth: '350',
				cHeight: '350',
				pixelRatio: 1,
				facilityvalve: [],
				feiNum: 0, //肥料桶实际占据通道个数
				buttonList: [], // 肥料开关列表
				colomRoundList: ['j1', 'j2', 'j3', 'j4', 'j5', 'j6', 'j7', 'j8'], // 废料桶的通道
				ElementList: [],
				typename: [
					"-",
					"风机",
					"水泵",
					"增氧机",
					"湿帘",
					"遮阳",
					"开窗",
					"保温",
					"投食机",
				],
				show: false,
				list: [{
					name: '设备控制'
				}, {
					name: '执行结果'
				}, {
					name: '操作记录'
				}],
				statusPanel: false,
				current: 0,
				consoleshow: false,
				consoleTime: {},
				tableData: [],
				page: 1,
				total: 0,
				status: 'loadmore'
			}
		},
		methods: {
			changeTimeStatus(item, changeIndex) {
				this.timer = setTimeout(() => {
					item.disabled = false; // 改变值
					this.facilityvalve[changeIndex].disabled = false;
					this.getEquipstatus()
					this.timer = null; // 清空定时器引用
				}, 15000);
			},
			// 选择日期
			changeDate(e) {
				console.log(e)
				this.historyTime = e;
				this.getHistoryData()
			},
			// 绘制折线图
			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: {
						disabled: true,
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 15, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'right', //滚动条初始位置
						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.touchLegend(e);
				// canvaColumnA.showToolTip(e);
				canvaColumnA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumnA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			// 时间戳转换
			timestampToDateTime(timestamp, isTime) {
				var date = new Date(timestamp * 1000); // 将时间戳转换为毫秒并创建一个日期对象
				var year = date.getFullYear(); // 获取年份
				var month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，并补零
				var day = ('0' + date.getDate()).slice(-2); // 获取日期，并补零
				var hours = ('0' + date.getHours()).slice(-2); // 获取小时，并补零
				var minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并补零
				var seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒数，并补零
				if (isTime) {
					return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				} else {
					return `${year}-${month}-${day}`;
				}
			},
			// 历史数据
			async getHistoryData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					historyTime
				} = this;
				// 获取当前日期
				var currentDate = new Date();
				// 设置时间为 0 点
				currentDate.setHours(0, 0, 0, 0);
				let begin = historyTime.startDate ? (new Date(historyTime.startDate).getTime() / 1000) - 8 * 3600 : (
					Math.floor(currentDate.getTime() / 1000));

				// 设置时间为 24 点
				currentDate.setHours(24, 0, 0, 0);
				let end = historyTime.endDate ? (new Date(historyTime.endDate).getTime() / 1000) - 8 * 3600 : (Math
					.floor(currentDate.getTime() / 1000));
				//折线图数据
				let res = await this.$myRequest({
					url: "/api/api_gateway?method=weather.weather.sf_data_chart",
					data: {
						device_id: this.device_id,
						begin: begin,
						end: end,
					},
				})
				uni.hideLoading();
				var conf = res.conf.eleName;
				var dat = res.dat.reverse();
				//console.log(dat);
				conf = conf.split("/");
				// var arr1 = [];
				var regroupData = []; //重组数据
				let options = [];
				var timeList = [];
				for (var i = 0; i < conf.length; i++) {
					// var arr = [];
					if (conf[i] != "-") {
						var optionobj = {};
						optionobj.value = i;
						optionobj.label = conf[i];
						options.push(optionobj);
						var reddata = [];
						dat.forEach((item, index) => {
							if (timeList.length < dat.length) {
								timeList.push(this.timestampToDateTime(item.uptime, true));
							}
							var status = item.device_status.split(",");
							// //console.log(status);
							var arr = [];
							for (var j = 0; j < status.length; j++) {
								if (status[j].indexOf("e") + 1) {
									arr.push(status[j]);
								}
							}
							// //console.log(arr)
							var dataobj = {};
							for (var k = 0; k < arr.length; k++) {
								var indexs = arr[k].indexOf(":");
								// //console.log(arr[k])
								if (k == 0) {
									dataobj[arr[k].slice(1, indexs).trim()] = arr[k]
										.substr(indexs + 1)
										.trim();
								} else {
									dataobj[arr[k].slice(0, indexs).trim()] = arr[k]
										.substr(indexs + 1)
										.trim();
								}
							}
							// //console.log(dataobj)
							for (var key in dataobj) {
								// //console.log(i)
								var str = "'e" + (i + 1) + "'";
								// //console.log(key,str);
								if (key == str) {
									if (Number(dataobj[key]) == 32767) {
										// reddata.push([]);
									} else {
										reddata.push(Number(dataobj[key]));
									}
								}
							}
						});
						regroupData.push({
							name: conf[i],
							type: "spline",
							fillColor: {
								linearGradient: [0, 0, 0, 300],
							},
							data: reddata,
						});
					}
				}
				// console.log(timeList);
				this.showColumn('canvasColumnA', timeList, regroupData)
			},
			// 切换选项卡
			change(index) {
				this.page = 1;
				this.total = 0;
				this.current = index;
				this.status = 'loadmore';
				this.tableData = [];
				this.getEquipcontroldata();
			},
			// 获取要素实时数据
			async getElmentInfo() {
				uni.showLoading({
					title: '加载中'
				});
				let res = await this.$myRequest({
					url: "/api/api_gateway?method=xphsp.views.device_elements",
					data: {
						device_id: this.device_id,
					},
				})
				uni.hideLoading();
				var conf = res.conf.eleName.split('/');
				var dataList = [res.data.device_data];
				if (dataList.length == 0) return
				this.ElementList = [];
				conf.forEach((item, index) => {
					let obj = {}
					if (item == '-') return
					obj.name = item;
					let valList = dataList[0][`e${index + 1}`].split('#');
					obj.value = valList[0];
					obj.unit = valList[1];
					obj.time = dataList[0].uptime;
					this.ElementList.push(obj)
				})
				// console.log(this.ElementList)
			},
			async getEquipstatus() {
				uni.showLoading({
					title: '加载中'
				});
				this.facilityvalve = [];
				let res = await this.$myRequest({
					url: "/api/api_gateway?method=xphsp.views.device_info",
					data: {
						device_id: this.device_id,
					},
				})
				uni.hideLoading();
				var conf = res.conf.relayName;
				var dataobj = res.device_status;
				var relayNum = res.conf.relayNum;
				var arr = [];

				function numberToArray(number) {
					// 将数字转换为字符串
					let numString = number.toString();

					// 创建一个空数组，用于存储结果
					let result = [];

					// 遍历字符串的每个字符，并将其转换为对应的数字
					for (let i = 0; i < numString.length; i++) {
						result.push(parseInt(numString.charAt(i)));
					}

					return result;
				}
				for (var i = 0; i < dataobj.length; i++) {
					// if (offobj[i].indexOf("j") + 1) {
					arr.push(offobj[i]);
					// }
				}
				conf = conf.split("/");
				relayNum = relayNum.split("/");
				var arr1 = [];
				var reg = /\d/;
				let totalP = Math.ceil((conf.length) / 32); //总圈数
				for (var i = 0; i < conf.length; i++) {
					var obj = {};
					obj.name = conf[i];
					// if (reg.test(conf[i])) {
					//   obj.name2 = conf[i].slice(0, conf[i].length - 1);
					// } else {
					//   obj.name2 = conf[i];
					// }
					obj.name2 = this.typename[relayNum[i]];
					obj.number = i;
					obj.type = `j${i + 1}`;
					obj.disabled = false;
					// "state": 1 继电器打开 ;"state": 0 继电器关闭
					// 处理开关值
					// J开头表示状态，总共只有32长度，超过32则从头赋值 位数多一位 
					// 例：1和33是都在J1里面，返回值是一个二进制数 倒数第一位表示第一个 第二位表示33状态 以此类推
					// 根据总长度 为超过32的j赋值
					// 当前是循环的第几轮
					let baseP = Math.ceil((i + 1) / 32);
					if (i > 31) {
						dataobj[`j${i + 1}`] = dataobj[
							`j${(i + 1) % 32 == 0 ? 32 : (i + 1) % 32}`]; // 当前脚标/32取余 当恰好整除的时候  取32
					}
					dataobj[`j${i + 1}`] = dataobj[`j${i + 1}`].slice(-totalP); // 截取当前圈数的最后几位数字
					let baseOff = numberToArray(dataobj[`j${i + 1}`]); // 把当前值根据位数 转换为数组 
					obj.off = baseOff[baseP - 1] == '0' ? false : true; // 根据当前圈数，取对应的数组的值
					arr1.push(obj);
				}
				for (var i = 0; i < arr1.length; i++) {
					if (arr1[i].name != "-") {
						this.facilityvalve.push(arr1[i]);
					}
				}
				this.facilityvalve.forEach(item => {
					if (item.type == 'j9' && item.off == true) {
						// 判断注水泵是否打开
						this.mainBeng = true;
					}
					if (item.type == 'j10' && item.off == true) {
						// 判断施肥阀是否打开
						this.feiBeng = true;
					}
				})
				let feiNum = 0; // 记录废料桶占据通道个数，两个通道为一个肥料桶
				this.buttonList = [];
				this.facilityvalve.forEach((item, index) => {
					if (this.colomRoundList.indexOf(item.type) > -1) {
						feiNum++;
						this.buttonList.push(item);
					}
					if (item.type == 'j10' && item.off == true) {
						// 判断注水泵是否打开
						this.mainBeng = true;
					}
					if (item.type == 'j9' && item.off == true) {
						// 判断施肥阀是否打开
						this.feiBeng = true;
					}
				})
				this.feiNum = feiNum;
				console.log(this.facilityvalve)
			},
			async getEquipcontrol(num, state, double_order) {
				//设备控制
				uni.showLoading({
					title: '正在下发指令'
				});
				let res = await this.$myRequest({
					url: "/api/api_gateway?method=xphsp.views.control_order",
					data: {
						device_id: this.device_id,
						relayNum: num,
						relayState: state,
						double_order
					},
				})
				uni.hideLoading();
				if (res.controlState) {
					uni.showToast({
						title: '指令下发成功',
						duration: 2000,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: 'none'
					})
				}
			},
			// sf_control_data
			// 操作记录日期
			changeConsoleDate(e) {
				this.consoleTime = e;
				this.tableData = [];
				this.page = 1;
				this.getEquipcontroldata()
			},
			clearContime() {
				this.consoleTime = {};
				this.tableData = [];
				this.page = 1;
				this.getEquipcontroldata()
			},
			//操作记录
			async getEquipcontroldata() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					consoleTime
				} = this;
				let begin = consoleTime.startDate ? new Date(consoleTime.startDate).getTime() / 1000 : '';
				let end = consoleTime.endDate ? new Date(consoleTime.endDate).getTime() / 1000 : '';
				//操作记录
				let res = await this.$myRequest({
					method: "POST",
					url: "/api/api_gateway?method=xphsp.views.control_log",
					data: {
						device_id: this.device_id,
						page_num: this.page,
						page_size: 15,
						start: begin,
						end: end,
						sys_control: this.current - 1
					},
				})
				uni.hideLoading();
				// this.tableData = [];
				var record = res.result;
				this.tableData = [...this.tableData, ...record];
				this.total = res.count;
				if (this.page * 15 > this.total) {
					this.status = 'nomore'
				} else {
					this.status = 'loadmore'
				}
				console.log(this.tableData);
			},
			switchchange(e, state, item, index, isfeiButton) {
				// 是否是肥料开关，是的话 两个合并为一个
				if (isfeiButton) {
					item.off = e;
					item.disabled = true;
					this.changeTimeStatus(item, index);
					// 当前是打开
					if (e) {
						// 打开通道传1，关闭通道传0
						this.getEquipcontrol(state, 1, 1);
						// this.getEquipcontrol(state + 1, 0);
					} else {
						// this.getEquipcontrol(state + 1, 0);
						this.getEquipcontrol(state, 0, 1);
					}
					return
				}
				item.off = e;
				if (item.type == 'j10') {
					// 判断注水泵是否打开
					this.mainBeng = e;
				}
				if (item.type == 'j9') {
					// 判断施肥阀是否打开
					this.feiBeng = e;
				}
				// if (this.colomRoundList.indexOf(item.type) > -1) {
				//   let changeIndex = index;
				//   if ((index + 1) % 2 == 0) {
				//     // 偶数 往前取值
				//     this.facilityvalve[index - 1].disabled = true;
				//     changeIndex = index - 1;
				//   } else if ((index + 1) % 2 == 1) {
				//     // 基数 往后取值
				//     this.facilityvalve[index + 1].disabled = true;
				//     changeIndex = index + 1;
				//   }
				//   item.disabled = true;
				//   this.changeTimeStatus(item, changeIndex);
				//   this.getEquipcontrol(changeIndex, Number(!e));
				// } else {
				// }
				item.disabled = true;
				this.changeTimeStatus(item, index);
				//console.log(Number(e), state);
				this.getEquipcontrol(state, Number(e));
			},
			currentchange(e) {
				//页码
				if (this.type == 0) {
					this.pageDialog = e;
				} else {
					this.page = e;
				}
				this.getEquipcontroldata(this.type);
			},
		},
		onReachBottom() {
			if (this.current != 0 && this.status == 'loadmore') {
				this.page++;
				this.getEquipcontroldata()
			}
		},
		onLoad(option) {
			let deviceItem = JSON.parse(option.shebei)
			this.device_id = deviceItem.device_id;
			this.getEquipstatus();
			this.getElmentInfo();
			this.getEquipcontroldata();
		}
	}
</script>

<style scoped lang="less">
	.box {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: auto;
	}

	.bigBox {
		width: 100%;
	}

	.bigOpen {
		height: 100vh;
	}

	::v-deep  .u-flex {
		display: flex;
		justify-content: center;
	}

	.topInfo {
		background: #14A478;
		color: #fff;
		font-size: 28rpx;
		padding-bottom: 32rpx;
		box-sizing: border-box;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;

		.u-col {
			box-sizing: border-box;
			margin-top: 32rpx;

			.item {
				text-align: center;

				view:first-child {
					font-size: 40rpx;
				}

				view:nth-child(2) {
					font-size: 24rpx;
					line-height: 40rpx;
					opacity: .72;
				}
			}
		}
	}

	.readmore {
		text-align: center;
		font-size: 26rpx;
		line-height: 40rpx;
		margin-top: 32rpx;
		color: #93FFDE;

		.u-icon {
			margin-left: 15rpx;
		}
	}

	.histimeBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 56rpx;
		padding: 6rpx 24rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		margin-top: 54rpx;
		border: 2rpx solid var(--neutral-color-border-light, #E4EDEA);

		.u-icon {
			z-index: 10;
		}

		.time {
			width: 280rpx;
			color: #C1C1C1;
		}

		view {
			color: #333333;
			text-align: center;
		}
	}

	.consoleBox {
		position: relative;
		max-height: 75vh;
		padding-bottom: 80rpx;
		overflow: auto;

		.u-row {
			box-sizing: border-box;

			.u-col {
				box-sizing: border-box;
			}
		}

		.u-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: #14A478;
		}

		.swichBox {
			position: relative;
			padding: 32rpx;
			overflow: hidden;

			.preSwich {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 18rpx;
				border-radius: 8rpx;
				background: #EFF2FA;
				margin-bottom: 32rpx;

				view {
					color: #333333;
					font-size: 28rpx;
				}
			}
		}
	}

	.hisBox {
		position: relative;
		width: 100vw;
		padding-bottom: 100rpx;
		box-sizing: border-box;
		overflow-y: scroll;

		.axiosBox {
			position: relative;
			padding: 48rpx 32rpx;
			.title {
				color: #333333;
				font-size: 28rpx;
				font-weight: 700;
			}

			.chartBox {
				position: relative;
				margin-top: 32rpx;
				height: 800rpx;
				overflow: hidden;

				#canvasColumnA {
					width: 100%;
					height: 800rpx;
				}
			}
		}

		.readmoreHIs {
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			transform: translate(-50%);
			color: #14A478;
			z-index: 5;
		}
	}

	.devicePhoto {
		padding: 32rpx;

		.titleBox {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn {
				padding: 10rpx 14rpx;
				border-radius: 8rpx;
				background: #14A478;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.main {
			position: relative;
			padding-top: 32rpx;

			.mainContent {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 565rpx;
				top: 112rpx;
				height: 242rpx;
				z-index: 1;
			}

			.sourceBox {
				position: absolute;
				left: 20rpx;
				z-index: 2;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 112rpx;
				height: 112rpx;
				background: #E3FDFF;
				border-radius: 112rpx;
				color: #fff;

				view {
					width: 85rpx;
					height: 85rpx;
					background: #1890FF;
					border-radius: 85rpx;
					text-align: center;
					line-height: 85rpx;
					font-size: 28rpx;
				}
			}

			.colList {
				position: absolute;
				z-index: 2;
				top: 24rpx;
				left: 120rpx;
				width: 470rpx;
				display: flex;
				justify-content: space-between;

				.preClo {
					width: 80rpx;
					margin-left: 40rpx;

					view {
						text-align: center;
						color: #333333;
						font-size: 28rpx;
						margin-bottom: 20rpx;
					}

					image {
						width: 80rpx;
						height: 164rpx;
					}
				}
			}

			.benList {
				position: absolute;
				width: 565rpx;
				left: 50%;
				transform: translateX(-50%);
				top: 342rpx;

				.preBen {
					float: left;
					text-align: center;
					width: 25%;

					.daoguan {
						width: 20rpx;
						height: 40rpx;
					}

					.info {
						color: #333333;
						font-size: 12px;
						font-weight: 400;
					}

					.status {
						width: 76rpx;
						height: 100rpx;
						margin-top: 10rpx;
					}
				}
			}

			.fengBox {
				position: absolute;
				right: 12rpx;
				top: 270rpx;
				width: 55rpx;
				height: 44rpx;
				z-index: 2;

				.relativeBox {
					position: relative;
					width: 100%;
					height: 100%;

					image:nth-child(1) {
						width: 16rpx;
						height: 32rpx;
					}

					image:nth-child(2) {
						position: absolute;
						right: 0;
						top: -6rpx;
						width: 44rpx;
						height: 44rpx;
					}
				}

				.circleAnm {
					animation: ancirle 2s linear infinite;
				}

				// 旋转
				@keyframes ancirle {
					0% {
						transform: rotate(0);
					}

					100% {
						transform: rotate(360deg);
					}
				}
			}
		}
	}

	.consoleList {
		padding: 0 32rpx;

		.histimeBox {
			margin: 32rpx 0;
		}

		.tableTitle {
			background: #E8F3F0;
			color: #333;
			font-weight: 600;
		}

		.tableList {
			font-size: 28rpx;
			height: 78rpx;
			color: #666666;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid var(--neutral-color-border-base, #DCE6E3);

			view {
				text-align: center;
			}

			view:nth-child(1) {
				width: 120rpx;
			}

			view:nth-child(2) {
				width: 280rpx;
			}

			view:nth-child(3) {
				width: 280rpx;
			}
		}
	}
</style>