bigDataApp/pages/cb/xylps/detail.vue

<template>
	<view class="bigBox">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#14A478"></u-tabs>
		<view class="infoBox" v-if="current == 0">
			<view :class="['info',equipInfo.is_online==1?'on':'off']">
				<p @click="copy(equipInfo.imei)">设备ID：{{equipInfo.imei}}
					<image src="http://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode=""
						class="tishi">
					</image>
				</p>
				<p>设备名称：{{equipInfo.device_name==""?"无":equipInfo.device_name}}</p>
				<p>最新上报时间：{{equipInfo.addtime | timeFormat}}</p>
				<p>最新地址：{{equipInfo.address}}</p>
				<p class="fillin">诱芯名称：{{equipInfo.decoy}}</p>
				<!-- <p @click="glass_show=true">诱芯更换时间：<span style="margin:0 20rpx;">{{yxchangetime}}</span><u-icon
						name="edit-pen" color="#f0ad4e" size="28"></u-icon></p> -->
				<p>诱芯到期时间：{{equipInfo.xy_expire}}</p>
				<!-- <u-calendar v-model="glass_show" mode="date" :max-date="date" @change="timeChange"></u-calendar>
				<u-calendar v-model="glass_showtwo" mode="date" :max-date="date" @change="timeChangetwo"></u-calendar> -->
			</view>
			<view class="cardInfo">
				<text class="title">设备控制</text>
				<view class="controlCard">
					<view class="preBtn" v-for="btn in btnList" :key="btn.class">
						<view :class="`btnBox ${btn.class}`" @click="btnFun(btn.code)">
							<text :class="btn.icon"></text>
						</view>
						<view>{{btn.text}}</view>
					</view>
				</view>
			</view>
			<view class="cardInfo">
				<text class="title">监测数据</text>
				<view class="controlCard noBg">
					<u-row gutter="30" justify="between">
						<u-col span="5.8" class="preInfo" v-for="btn in dataList" :key="btn.icon">
							<view class="btnBox">
								<text :class="btn.icon"></text>
							</view>
							<view class="textBox">
								<view>
									{{newDataObj[btn.unit]}}
								</view>
								<view class="name">{{btn.text}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="cardInfo" v-if="JSON.stringify(deviceObj) != '{}'">
				<text class="title">设备信息</text>
				<view class="controlCard noBg">
					<u-cell-group>
						<u-cell-item v-for="btn in deviceDataList" :key="btn.text" :title="btn.text"
							:value="deviceObj[btn.key]" :arrow="false" :border-bottom="true"></u-cell-item>
					</u-cell-group>
				</view>
			</view>
		</view>
		<!-- 数据统计 -->
		<view class="infoBox" v-if="current == 1">
			<view class="cardInfo">
				<text class="title">统计数据</text>
				<view class="chartBox">
					<view class="timeBox">
						<u-icon name="calendar" size="30" class="iconBox"></u-icon>
						<view class="text" @click="showRangeTime = true">{{photoTimeRangeText}}</view>
						<u-icon name="arrow-right" v-if="photoTimeRangeText == '请选择日期'"></u-icon>
						<u-icon name="close" v-else @click="clearTimeFun('chart')"></u-icon>
					</view>
					<u-calendar v-model="showRangeTime" mode="range" @change="(e) => changePhotoTime(e, 'chart')"></u-calendar>
					<canvas v-if="showCanvas" 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>
					<view class="noEmpty" v-else>
						暂无数据
					</view>
				</view>
			</view>
			<view class="cardInfo">
				<text class="title">虫情分析</text>
				<view class="chartBox">
					<view class="pestInfo">
						<view class="pest">
							<text>害虫种类</text>
							<text class="name">{{analyInfo.decoy}}</text>
						</view>
						<view class="pest">
							<text>日杀虫数量</text>
							<text class="name">{{analyInfo.count}}头</text>
						</view>
						<view class="pest">
							<text>处理意见</text>
							<text class="name">{{analyInfo.advice}}</text>
						</view>
					</view>
					<view class="pestStatus">
						<view :class="['block', analyInfo.count < 30 ? 'active' : '']">
							<view class="iconBox green">
								<text class="yficonfont icon-small"></text>
							</view>
							<view class="blueText">
								<view>平静期</view>
								<view>0-30</view>
							</view>
						</view>
						<view :class="['block', analyInfo.count >= 30 &&  analyInfo.count < 60? 'active' : '']">
							<view class="iconBox yellow">
								<text class="yficonfont icon-middle"></text>
							</view>
							<view class="yellowText">
								<view>始发期</view>
								<view>30-60</view>
							</view>
						</view>
						<view :class="['block', analyInfo.count >= 60 ? 'active' : '']">
							<view class="iconBox danger">
								<text class="yficonfont icon-most"></text>
							</view>
							<view class="redText">
								<view>爆发期</view>
								<view>≥60</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 图片列表 -->
		<view class="infoBox" v-if="current == 2">
			<view class="imgList">
				<view class="preImg" v-for="(img, index) in photoList" :key="img.addtime">
					<text class="text">{{img.addtime}}</text>
					<u-image width="100%" height="226rpx" :src="img.addr" @click="examine(index)"></u-image>
				</view>
				<u-loadmore class="loadBox" :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadMore"/>
			</view>
			<view class="timeBox">
				<u-icon name="calendar" size="30" class="iconBox"></u-icon>
				<view class="text" @click="showRangeTime = true">{{photoTimeRangeText}}</view>
				<u-icon name="arrow-right" v-if="photoTimeRangeText == '请选择日期'"></u-icon>
				<u-icon name="close" v-else @click="clearTimeFun('photo')"></u-icon>
			</view>
			<u-calendar v-model="showRangeTime" mode="range" @change="(e)=> changePhotoTime(e, 'photo')"></u-calendar>
		</view>
		<!-- 设备控制 -->
		<view class="bgColor" v-if="current == 3">
			<u-form :model="equipContrlForm1" :label-width="180">
				<view class="" v-if="myuser_type">
					<u-divider>管理员操作</u-divider>
					<u-form-item label="升级文件地址" :label-width="220">
						<u-input v-model="ota_url" />
					</u-form-item>
					<u-button size="mini" type="primary" @click="equipBtnControl('reboot')">重启</u-button>
					<u-button size="mini" class="btn" type="primary" @click="equipBtnControl('update')">升级</u-button>
					<u-divider>设备控制</u-divider>
				</view>
				<u-form-item label="设备名称"><u-input v-model="equipContrlForm1.devname" /></u-form-item>
				<u-form-item label="高压包开关状态" :label-width="240">
					<u-radio-group v-model="equipContrlForm1.dev_work_onoff">
						<u-radio :name="1">开</u-radio>
						<u-radio :name="0">关</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="工作模式" :label-width="240">
					<u-radio-group v-model="equipContrlForm1.dev_work_mode">
						<u-radio :name="1">自动</u-radio>
						<u-radio :name="2">手动</u-radio>
						<u-radio :name="3">定时</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="定时时长" :label-width="240">
					<text @click="equipContrlForm1.show_st= true">{{equipContrlForm1.st}}</text>-
					<text @click="equipContrlForm1.show_et= true">{{equipContrlForm1.et}}</text>
					<u-picker mode="time" v-model="equipContrlForm1.show_st" :default-time="equipContrlForm1.st"
						:params="params" @confirm="(e) => changeControlTime(e, 'st')"></u-picker>
					<u-picker mode="time" v-model="equipContrlForm1.show_et" :default-time="equipContrlForm1.et"
						:params="params" @confirm="(e) => changeControlTime(e, 'et')"></u-picker>
				</u-form-item>
				<u-form-item label="SIM卡号" :label-width="200">
					<u-input v-model="equipContrlForm1.sim" />
				</u-form-item>
				<u-form-item label="心跳间隔(S)" :label-width="200">
					<u-input v-model="equipContrlForm1.heart_time" type="number"/>
				</u-form-item>
				<u-form-item label="太阳能电压阈值(V)" :label-width="280">
					<u-input v-model="equipContrlForm1.solar_threshold" type="number"/>
				</u-form-item>
				<u-form-item label="太阳能电压最大值(V)" :label-width="300">
					<u-input v-model="equipContrlForm1.solarmax" type="number"/>
				</u-form-item>
				<u-form-item label="数据上传频率(min)" :label-width="300">
					<u-input v-model="equipContrlForm1.upload_time" type="number"/>
				</u-form-item>
				<u-button size="medium " type="primary" @click="equipControlSubm">保存</u-button>
			</u-form>
		</view>
		<!-- 拍照定时 -->
		<u-modal v-model="photoTimeLayer" width="90%" :async-close="true" :show-cancel-button="true"
			@confirm="devicePhotoTime">
			<view class="slot-content">
				<view class="expireBox">
					<u-form>
						<u-form-item :label="`时间${index + 1}`" :label-width="180"
							v-for="(time, index) in photoTimeArray" :key="time.key">
							<text @click="time.show = true">{{time.value}}</text> <u-button size="mini" type="error"
								@click="removeTime(index)">删除</u-button>
							<u-picker mode="time" v-model="time.show" :default-time="time.value" :params="params"
								@confirm="(e) => changeSnapTime(e, time.key, index)"></u-picker>
						</u-form-item>
						<u-button size="mini" type="primary" @click="addTime(photoTimeArray.length)">添加</u-button>
					</u-form>
				</view>
			</view>
		</u-modal>
		<!-- 信息素弹框 -->
		<u-modal v-model="expireInfoLayer" width="90%" :async-close="true" :show-cancel-button="true"
			@confirm="changeExpireFun">
			<view class="slot-content">
				<view class="expireBox">
					<u-form ref="uForm">
						<u-form-item label="信息素名称" :label-width="180">
							<u-input v-model="decoy" type="text" :border="true" placeholder="请输入信息素名称" />
						</u-form-item>
						<u-form-item label="新信息素可使用时间" :label-width="280">
							<u-radio-group v-model="xy_expire_time">
								<u-radio v-for="(item, index) in expireTimeList" :key="index" :name="item.value">
									{{item.label}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
	var canvaColumnA = null;
	export default {
		data() {
			return {
				myuser_type: '',
				equipInfoImei: '',
				equipInfo_d_id: '',
				btnList: [{
						text: '更换信息素',
						icon: 'yficonfont icon-weimingming-34',
						class: 'green',
						code: 'changeInfo'
					}],
				list: [{
					name: '基本信息'
				}],
				current: 0,
				equipInfo: {},
				dataList: [{
						text: '空气温度', // 中文
						unit: 'air_temp', // 对应字段
						data: '',
						icon: 'yficonfont icon-kongqiwendu', // iconclass名称
					},
					{
						text: '空气湿度',
						unit: 'air_humi',
						data: '',
						icon: 'yficonfont icon-shuizhi',
					},
					{
						text: '风力',
						unit: 'wind_force',
						isSmall: true,
						data: '',
						icon: 'yficonfont icon-fengli',
					},
					{
						text: '风向',
						unit: 'wind_dir',
						isSmall: true,
						data: '',
						icon: 'yficonfont icon-fengxiang',
					},
					{
						text: '害虫数量',
						unit: 'bugcnt',
						data: '',
						icon: 'yficonfont icon-chouchongbug',
					},
					{
						text: '光照强度',
						unit: 'light',
						data: '',
						isSmall: true,
						icon: 'yficonfont icon-qingtian',
					},
					{
						text: '降雨',
						unit: 'rain_status',
						data: '',
						icon: 'yficonfont icon-yu',
					},
					{
						text: '电池电量',
						unit: 'bat_level',
						data: '',
						icon: 'yficonfont icon-80dianliang',
					},
					{
						text: '信号强度',
						unit: 'gprs',
						data: '',
						icon: 'yficonfont icon-wifi',
					},
					{
						text: '定位信噪比',
						unit: 'cn0',
						data: '',
						isSmall: true,
						icon: 'yficonfont icon-dingwei1',
					},
					{
						text: '太阳能电压',
						unit: 'solar_voltage',
						data: '',
						icon: 'yficonfont icon-guangfuzujianshuliang',
					},
					{
						text: '蓄电池电压',
						unit: 'bat_val',
						data: '',
						icon: 'yficonfont icon-xudianchi',
					},
				],
				dataLoading: true,
				newDataObj: {},
				deviceDataList: [{
						text: '设备名',
						key: 'devname',
					},
					{
						text: '设备版本号',
						key: 'version',
					},
					{
						text: '心跳间隔',
						key: 'heart_time',
					},
					{
						text: '太阳能电压阀值',
						key: 'solar_threshold',
					},
					{
						text: '太阳能电压最大值',
						key: 'solarmax',
					},
					{
						text: '数据上传频率',
						key: 'upload_time',
					},
					{
						text: '工作模式',
						key: 'dev_work_mode',
					},
					{
						text: '定时模式时间',
						key: 'dev_work_time',
					},
					{
						text: '高压包开关状态',
						key: 'dev_work_onoff',
					},
					{
						text: 'SIM卡号',
						key: 'sim',
					},
				],
				deviceLoading: true,
				deviceObj: {},
				photoTimeArray: [],
				photoTimeLayer: false,
				expireInfoLayer: false,
				xy_expire_time: 2, // 时间
				decoy: '', // 诱芯名称
				expireTimeList: [{
						label: '1个月',
						value: 1,
					},
					{
						label: '2个月',
						value: 2,
					},
					{
						label: '3个月',
						value: 3,
					},
					{
						label: '4个月',
						value: 4,
					},
				],
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				//设备控制
				equipContrlForm1: {
					devname: '',
					heart_time: '',
					solar_threshold: '',
					solarmax: '',
					upload_time: 0,
					dev_work_mode: '',
					dev_work_timeArray: '',
					dev_work_onoff: '',
					sim: '',
					et: '',
					st: '',
					show_st: false,
					show_et: false,
					// st: '', //时控开始时间
					// et: '', //时控结束时间
					// dat_f: null ,//数据上传时间间隔
					// ds:''//开关，1开机，0关机
				},
				ota_url: '',
				photoList: [],
				photoLoading:true,
				showRangeTime: false,
				photoTimeRange: '',
				photoTimeRangeText: '请选择日期',
				page: 1,
				total: 0,
				loadStatus:'',
				iconType: 'flower',
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多啦~'
				},
				cWidth: '400',
				cHeight: '400',
				pixelRatio: 1,
				showCanvas: false,
				analyInfo:{
					decoy:'',
					count:''
				}
			};
		},
		onLoad(option) {
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);
			uni.getStorage({
				key:"jurisdiction",
				success:(res)=>{
					let items = JSON.parse(res.data).filter((item) => {
						return item.pur_id == 36
					})
					var arr = items[0].children
					for (var i = 0; i < arr.length; i++) {
						switch (arr[i].pur_id) {
							case 338:
							let newChildren = arr[i].children;
							let hasImg = newChildren.some((item) => {
								return item.pur_id == 341
							})
							let hasControl = newChildren.some((item) => {
								return item.pur_id == 340
							})
							if(hasImg) {
								this.list.push({
									name: '数据分析'
								}, {
									name: '图片列表'
								})
								this.btnList.push(
								{
									text: '拍照定时',
									icon: 'yficonfont icon-dingshi',
									class: 'blue',
									code: 'photoTime'
								},
								{
									text: '一键拍照',
									icon: 'yficonfont icon-paizhao-xianxing',
									class: 'yellow',
									code: 'tackPhoto'
								})
							}
							if(hasControl) {
								this.list.push({
									name: '设备控制'
								});
								this.btnList.push({
									text: '设备清虫',
									icon: 'yficonfont icon-chouchongbug',
									class: 'danger',
									code: 'clear'
								})
							}
							break
						}
					}
				}
			})
			this.equipInfoImei = JSON.parse(option.detail).imei;
			this.equipInfo_d_id = JSON.parse(option.detail).d_id;
			this.getEquipInfo();
			// console.log(this.equipInfo);
			this.getData();
			this.getDeviceData();
			uni.getStorage({
				key:"myuser_type",
				success:(res)=>{
					if(Number(res.data) == 1){
						this.myuser_type = true
					}
				}
			})
		},
		methods: {
			showColumn(id, xtitle, xinfo) {
				var _self = this;
				console.log(_self.cWidth, '_self.cWidth');
				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: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						// scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					width: _self.cWidth * 1,
					height: _self.cHeight * 1,
					yAxis: {},
					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 lineChartPest(type) {
				let {
					photoTimeRange
				} = this;
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.pest_count',
					data: {
						d_id: this.equipInfo_d_id,
						start: photoTimeRange ? (photoTimeRange[0] / 1000) : '',
						end: photoTimeRange ? (photoTimeRange[1] / 1000) : '',
					},
				})
				if (res.length > 0) {
					this.showCanvas = true;
					let name = [];
					let ydata = [];
					res.forEach(item => {
						name.push(item.date);
						ydata.push(item.total);
					});
					var obj = [{
						name: '诱虫数量',
						data: ydata,
						color: '#FF3F3F'
					}]
					if (type == 'search') {
						// 当前是搜索
						this.showColumn("canvasColumnA", name, obj)
					} else {
						this.showColumn("canvasColumnA", name, obj)
					}
				} else {
					this.showCanvas = false;
				}
			},
			examine(index) {
				var imgarr = []
				for (var i = 0; i < this.photoList.length; i++) {
					imgarr.push(this.photoList[i].addr)
				}
				// console.log(imgarr)
				uni.previewImage({
					urls: imgarr,
					current: index
				});
			},
			async getEquipInfo() {
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data: {
						device_id: this.equipInfoImei,
						page: 1,
						page_size: 10,
						device_model: 0,
						device_type_id: 25
					},
				})
				console.log(res);
				// console.log(res.data.data);
				this.equipInfo = res.data[0];
			},
			
			async getAnsyInfo() {
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.pest_info',
					data: {
						d_id: this.equipInfo_d_id,
					},
				})
				console.log(res);
				// console.log(res.data.data);
				this.analyInfo = res;
			},
			btnFun(code) {
				switch (code) {
					case 'clear':
						this.takePhoto(3);
						break;
					case 'tackPhoto':
						this.takePhoto(1);
						break;
					case 'photoTime':
						this.getPhotoTime();
						this.photoTimeLayer = true;
						break;
					case 'changeInfo':
						this.decoy = '';
						this.xy_expire_time = 2;
						this.expireInfoLayer = true;
						break;
					default:
						break;
				}
				// if(code == 'clear') {
				// 	this.takePhoto(3)
				// } 
			},
			async getData() {
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.monitor_data',
					data: {
						device_id: this.equipInfoImei,
					},
				})
				console.log(res);
				// console.log(res.data.data);
				this.newDataObj = res;
			},
			async getDeviceData() {
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.device_config',
					data: {
						d_id: this.equipInfo_d_id,
					},
				})
				console.log(res);
				this.deviceObj = res;
				console.log(this.deviceObj);
			},
			// 获取当前拍照时间控制
			async getPhotoTime() {
				this.photoTimeLayer = true;
				this.photoTimeArray = [];
				let res = await this.$myRequest({
					method: 'POST',
					url: '/api/api_gateway?method=lpsxy.views.device_config',
					data: {
						d_id: this.equipInfo_d_id,
						config_type: 1
					},
				})
				if (res && Object.keys(res).length > 0) {
					let data = res;
					for (const key in data) {
						if (key.includes('snaptime')) {
							let text = (data[key] + '').padStart(4, '0');
							// console.log(`${text.substring(0, 2)}${text.substring(2, 4)}`);
							this.photoTimeArray.push({
								value: `${text.substring(0, 2)}:${text.substring(2, 4)}`,
								key,
								show: false,
							});
						}
					}
					// console.log(this.photoTimeArray);
				}
			},
			removeTime(index) {
				this.photoTimeArray.splice(index, 1);
			},
			addTime(index) {
				this.photoTimeArray.push({
					value: `00:00`,
					key: `snaptime${index}`,
					show: false,
				});
			},
			changeSnapTime(e, key, index) {
				this.photoTimeArray[index].value = `${e.hour}:${e.minute}`
			},
			changeControlTime(e, type) {
				this.equipContrlForm1[type] = `${e.hour}:${e.minute}`
			},
			async devicePhotoTime() {
				// console.log(this.photoTimeArray);
				let obj = {};
				this.photoTimeArray.forEach((item, index) => {
					if (item.value) {
						obj[`snaptime${index + 1}`] = (item.value.replace(/:/g, "")) * 1;
					}
				});
				// console.log(obj);
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.device_control',
					data: {
						device_id: this.equipInfoImei,
						...obj,
					},
				})
				if (res) {
					uni.showToast({
						title: '指令下发成功',
						duration: 1000,
						icon: "none"
					});
					// this.$message.success('指令下发成功');
					this.photoTimeLayer = false;
				} else {
					uni.showToast({
						title: '指令下发失败',
						icon: "none",
						duration: 1000
					});
					// this.$message.error(res.data.message);
				}
			},
			async takePhoto(order_type) {
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.send_control',
					data: {
						device_id: this.equipInfoImei,
						order_type,
					},
				})
				if (res) {
					uni.showToast({
						title: '指令下发成功',
						duration: 1000,
						icon: "none"
					});
					// this.$message.success('指令下发成功');
				} else {
					uni.showToast({
						title: '指令下发失败',
						icon: "none",
						duration: 1000
					});
					// this.$message.error(res.data.message);
				}
			},
			async changeExpireFun() {
				if (this.decoy == '') {
					uni.showToast({
						title: '请输入信息素名称',
						duration: 1000,
						icon: "none"
					});
					// this.$message.error('请输入信息素名称');
					return;
				}
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.update_xy_expire_time',
					data: {
						device_id: this.equipInfoImei,
						xy_expire_time: this.xy_expire_time,
						decoy: this.decoy,
					},
				})
				if (res) {
					uni.showToast({
						title: '操作成功',
						icon: "none",
						duration: 1000
					});
					// this.$message.success('操作成功');
					this.expireInfoLayer = false;
					this.getEquipInfo();
				} else {
					uni.showToast({
						title: '操作失败',
						icon: "none",
						duration: 1000
					});
					// this.$message.error(res.data.message);
				}
			},
			async getPhotoList(search) {
			  let { photoTimeRange } = this;
			  // console.log(photoTimeRange);
			 //  if(photoTimeRange) {
				// this.page = 1;
			 //  }
			 // 当筛选的时候 清空图片列表
			 if(search) {
				this.page = 1;
				this.photoList = [];
			 }
			  let res = await this.$myRequest({
				method: 'post',
				url: '/api/api_gateway?method=lpsxy.views.photo_list',
				data: {
				  d_id: this.equipInfo_d_id,
				  page: this.page,
				  start: photoTimeRange ? (photoTimeRange[0]/1000) : '',
				  end: photoTimeRange ? (photoTimeRange[1]/1000) : '',
				},
			  })
			  this.photoLoading = false;
			  if (res) {
			    this.photoList = [...this.photoList ,...res.data];
			    this.total = res.count;
				if(this.total > this.page * 10) {
					this.loadStatus = 'loadmore'
				} else if(this.total <= this.page * 10) {
					this.loadStatus = 'nomore'
				}
			  } else {
			   uni.showToast({
			   	title: '请求失败',
			   	icon: "none",
			   	duration: 1000
			   });;
			  }
			},
			changePhotoTime(dateObj, type) {
				console.log(dateObj);
				this.photoTimeRangeText = `${dateObj.startDate}~${dateObj.endDate}`;
				this.photoTimeRange = [new Date(dateObj.startDate).getTime(),new Date(dateObj.endDate).getTime()];
				if(type == 'photo') {
					this.getPhotoList('search')
				} else {
					this.lineChartPest('search')
				}
			},
			clearTimeFun(type) {
				this.photoTimeRangeText = '请选择日期';
				this.photoTimeRange = '';
				if(type == 'photo') {
					this.getPhotoList('search');
				} else {
					this.lineChartPest('search')
				}
			},
			loadMore() {
				this.page ++;
				this.getPhotoList()
			},
			change(index) {
				this.current = index;
				if(index == 3) {
					this.getControlInfo();
				}else if(index == 2) {
					this.photoList = [];
					this.page = 1;
					this.photoTimeRangeText = '请选择日期';
					this.photoTimeRange = '';
					this.getPhotoList();
				} else if(index == 1) {
					this.photoTimeRangeText = '请选择日期';
					this.photoTimeRange = '';
					this.lineChartPest();
					this.getAnsyInfo();
				}
			},
			copy(item) {
				console.log(item)
				uni.setClipboardData({
					data: item,
					success: function() {
						console.log('success');
					}
				});
			},
			async getControlInfo() {
				let res = await this.$myRequest({
					method: "POST",
					url: "/api/api_gateway?method=lpsxy.views.device_config",
					data: {
						d_id: this.equipInfo_d_id,
						config_type: 1
					},
				})
				if (res && Object.keys(res).length > 0) {
					let data = res;
					console.log(data);
					let newObj = {
						...data,
						show_st: false,
						show_et: false,
					};
					newObj.dev_work_time = data.dev_work_time + '';
					newObj.dev_work_time = newObj.dev_work_time.length > 7 ? newObj.dev_work_time : newObj
						.dev_work_time.padStart(8, '0');
					newObj.st = `${newObj.dev_work_time.substring(0, 2)}:${newObj.dev_work_time.substring(2, 4)}`;
					newObj.et = `${newObj.dev_work_time.substring(4, 6)}:${newObj.dev_work_time.substring(6, 8)}`;
					// console.log(newObj);
					this.equipContrlForm1 = newObj;
				}
			},
			async equipControlSubm() {
			  let newForm = Object.assign({}, this.equipContrlForm1); //深拷贝
			  newForm.dev_work_time = (newForm.st + newForm.et).replace(/:/g, "") * 1;
			  console.log(newForm);
			  // console.log(obj);
			  let res = await this.$myRequest({
				method: "POST",
				url: "/api/api_gateway?method=lpsxy.views.device_control",
				data: {
				  device_id: this.equipInfoImei,
				  ...newForm
				},
			  })
			  if (res) {
			  	uni.showToast({
			  		title: '指令下发成功',
			  		duration: 1000,
			  		icon: "none"
			  	});
			  	// this.$message.success('指令下发成功');
			  } else {
			  	uni.showToast({
			  		title: '指令下发失败',
			  		icon: "none",
			  		duration: 1000
			  	});
			  	// this.$message.error(res.data.message);
			  }
			},
			async equipBtnControl(cmd) {
				if (this.ota_url == '') {
					uni.showToast({
						title: '请输入地址',
						duration: 1000,
						icon: "none"
					});
					return
				}
				let op_type = '';
				if (cmd == "reboot") {
					var name = "重启";
					op_type = 1;
				} else if (cmd == "update") {
					var name = "升级";
					op_type = 2;
				}
				let res = await this.$myRequest({
					method: "POST",
					url: "/api/api_gateway?method=lpsxy.views.device_root_control",
					data: {
						op_type,
						d_id: this.equipInfo_d_id,
						ota_url: this.ota_url
					},
				});
				if (res) {
					uni.showToast({
						title: '指令下发成功',
						duration: 1000,
						icon: "none"
					});
					// this.$message.success('指令下发成功');
				} else {
					uni.showToast({
						title: '指令下发失败',
						icon: "none",
						duration: 1000
					});
					// this.$message.error(res.data.message);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .u-calendar__action{
		display: flex;
		justify-content: space-between;
	}
	.green {
		background: #14a478;
	}
	
	.yellow {
		background: #f4a72f;
	}
	
	.danger {
		background: #ff5951;
	}
	
	.blue {
		background: #1890FF;
	}
	.bigBox {
		position: relative;
		width: 100vw;
		height: calc(100vh);
		background: #f7f7f7;
		overflow: hidden;
	}

	.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%;
		border-radius: 5rpx;
		margin: 0 auto;

		p:first-child {
			font-size: 32rpx;
		}

		.expiretishi {
			font-size: 24rpx;
			color: #FF0000;
		}

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

		.fillin {
			display: flex;

			input {
				width: 200rpx;
				font-size: 24rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-indent: 1em;
			}
		}
	}

	.on {
		background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/onBg.png')
	}

	.off {
		background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/offBg.png')
	}

	.infoBox {
		width: 100%;
		padding: 10rpx 24rpx;
		height: calc(100vh - 80rpx);
		box-sizing: border-box;
		overflow: auto;
		.timeBox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 32rpx;
			border: 1rpx #E5EBE9 solid;
			background: #fff;
			color: #666;
			font-size: 30rpx;
			height: 100rpx;
			box-sizing: border-box;
			.iconBox{
				display: flex;
				align-items: center;
				margin-top: 4rpx
			}
			.text{
				width: 80vw;
				margin-left: 16rpx;
			}
		}
	}

	.cardInfo {
		margin-top: 24rpx;
		width: 100%;
		.title {
			font-size: 28rpx;
			color: #999;
		}

		.controlCard {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-top: 30rpx;
			background: #fff;
			box-sizing: border-box;

			.preBtn {
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				width: 22%;
				padding: 20rpx;
				height: 80px;
				font-size: 24rpx;
			}

			.btnBox {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 48px;
				width: 48px;
				border-radius: 48px;
				color: #fff;

				.text {
					display: inline-block;
					width: 80vw;
					font-size: 20px;
				}
			}

			.preInfo {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 32rpx !important;
				background: #fff;
				margin-bottom: 32rpx;

				.btnBox {
					width: 72rpx;
					height: 72rpx;
					background: #14a478;
				}

				.textBox {
					margin-left: 40rpx;
					font-size: 32rpx;

					.name {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}

		.noBg {
			background: none;
		}

		.u-border-bottom:after,
		.u-border-left:after,
		.u-border-right:after,
		.u-border-top-bottom:after,
		.u-border-top:after,
		.u-border:after {
			content: " ";
			position: absolute;
			left: 0;
			top: 0;
			pointer-events: none;
			box-sizing: border-box;
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			width: 199.8%;
			height: 199.7%;
			-webkit-transform: scale(.5);
			transform: scale(.5);
			border: .5px solid #E5EBE9;
			z-index: 2;

		}
	}

	.expireBox {
		padding: 20rpx;
		box-sizing: border-box;
		max-height: 60vh;
		overflow: auto;
	}

	.bgColor {
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		padding: 0 20rpx;
		.u-form{
			height: calc(100vh - 68rpx);
			overflow: auto;
			box-sizing: border-box;
			padding: 20rpx 0;
		}
		.btn {
			margin-left: 20rpx;
		}
	}
	.chartBox{
		min-height: 400rpx;
		background: #fff;
		margin: 20rpx 0;
		padding: 32rpx;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
		.noEmpty{
			height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;		
		}
		.pestInfo{
			padding: 32rpx 0;
			box-sizing: border-box;
			.pest{
				font-size: 24rpx;
				color: #666;
				margin-bottom: 16rpx;
				.name{
					margin-left: 10rpx;
					color: #333;
					font-weight: 600;
				}
			}
		}
		.pestStatus{
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			height: 284rpx;
			.block{
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: space-around;
				width: 33%;
				height: 100%;
				text-align: center;
			}
			.active{
				background: #f7f7f7;
			}
			.iconBox{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 128rpx;
				height: 128rpx;
				border-radius: 128rpx;
				color: #fff;
				.yficonfont{
					font-size: 80rpx;
				}
			}
			.blueText{
				color: #14a478;
			}
			.yellowText{
				color: #f4a72f;
			}
			.redText{
				color: #FF0000;
			}
		}
	}
	.imgList{
		height: calc(100vh - 220rpx);
		overflow: auto;
		box-sizing: border-box;
		padding: 20rpx 0;
		.preImg{
			position: relative;
			float: left;
			width: 49%;
			margin-right: 2%;
			margin-bottom: 20rpx;
			.text{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #fff;
				background: rgba(0, 0, 0, .4);
				font-size: 24rpx;
				z-index: 2;
			}
		}
		.preImg:nth-child(2n) {
		    margin-right: 0; /* 每个第 3 个元素的右边距为 0 */
		}
		.loadBox{
			width: 100%;
		}
		/deep/ .u-calendar__action{
			display: flex;
			justify-content: space-between;
		}
	}
</style>