feat:移动端改版

pages/afterSale/addafter.vue

@@ -139,6 +139,15 @@
 					{
 						text: '天牛监测设备',
 						id:32
+					},{
+						text: '色诱测报设备2.0',
+						id:33
+					},{
+						text: '色诱测报设备1.0',
+						id:34
+					},{
+						text: '虫情测报设备5.0',
+						id:35
 					},
 				],
 				show:false,//选择器的显示

pages/cb/cbd/equip-set/analyse.vue

@@ -436,7 +436,7 @@
 						year: this.yservalue,
 					}
 				})
-				console.log(res)
+				// console.log(res)
 				this.wormlist = res.pest_list
 				this.wormtimelist = res.pest_info
 				this.wormvalue = this.wormlist[0]
@@ -462,7 +462,7 @@
 				this.getwormtime()
 			},
 			confirmFun2(e) {
-				console.log(e)
+				// console.log(e)
 				this.wormindex = e[0]
 				this.wormvalue = this.wormlist[e[0]]
 				this.timeobj = this.wormtimelist[this.wormvalue]
@@ -478,6 +478,7 @@
 						end_time: this.newtime,
 						sp_hour_st: this.sp_hour_st,
 						sp_hour_ed: this.sp_hour_ed,
+						amend:1
 					}
 				})
 				// console.log(res)
@@ -559,22 +560,7 @@
 					let index = xtitle.indexOf(this.formatMonthDay(pest.addtime));
 					pestArr[index] = pest.sum
 				})
-				// console.log(this.wormvalue)
-				// if (this.checkObj(res.char_data)) {
-				// 	for (var key in res.char_data) {
-				// 		if (this.wormvalue == key) {
-				// 			var wormobj = {
-				// 				name: key,
-				// 				data: [],
-				// 			}
-				// 			for (var i = 0; i < res.char_data[key].length; i++) {
-				// 				wormobj.data.push(res.char_data[key][i].ah == "" ? "0" : res.char_data[key][i].sum)
-				// 			}
-				// 			obj.push(wormobj)
-				// 		}
-				// 	}
-
-				// }
+	
 				var atHighobj = {
 					name: '高温',
 					data: atHigharr,
@@ -591,14 +577,15 @@
 					color: '#6CBBFF'
 				}
 				var pestObj = {
-					name: this.wormvalue,
+					name: this.wormvalue||'',
 					data: pestArr,
+					color: '#FA73F5'
 				}
 				obj.push(atHighobj)
 				obj.push(atlowobj)
 				obj.push(ahobj)
 				obj.push(pestObj)
-				console.log(xtitle, 'xtitle')
+				console.log(xtitle, 'xtitle',obj)
 				this.showColumn("canvasColumnA", xtitle, obj)
 			},
 			checkObj(obj) {
@@ -641,9 +628,11 @@
 				// return time
 			},
 			showColumn(id, xtitle, xinfo) {
+				console.log(xinfo,'高温')
 				var _self = this
+				const ctx = uni.createCanvasContext(id, this);
 				canvaColumnA = new uCharts({
-					canvasId: id,
+					context: ctx,
 					type: 'line',
 					legend: {
 						position: "top"
@@ -677,7 +666,7 @@
 				});
 			},
 			touchLineA(e) {
-				console.log(e)
+				// console.log(e)
 				canvaColumnA.scrollStart(e);
 			},
 			moveLineA(e) {
@@ -694,15 +683,16 @@
 			},
 			showRing(data) {
 				var _self = this
+				const ctx = uni.createCanvasContext("canvasRing", this);
 				canvasRing = new uCharts({
-					canvasId: "canvasRing",
+					context: ctx,
 					type: 'ring',
 					fontSize: 11,
 					legend: {
 						show: true,
 					},
 					extra: {
-						pie: {
+						ring: {
 							offsetAngle: -45,
 							ringWidth: 40 * _self.pixelRatio,
 							labelWidth: 15
@@ -882,7 +872,7 @@
 			width: 25%;
 			margin-top: 10px;
 			padding: 10px;
-
+			text-align: center;
 			.img {
 				width: 50px;
 				height: 50px;

pages/cb/cbd/equip-set/equip-set-new.vue

@@ -0,0 +1,643 @@
+<template>
+	<view style="padding: 0 24rpx;">
+		<view class="" v-if="myuser_type">
+			<view class="tit adminTit">
+				联网模块
+			</view>
+			<view class="btns">
+				<button v-for="(item,index) in controlInfo.netControl" type="warn" @click="equipBtnControl(item.cmd)" size="mini">{{item.name}}</button>
+			</view>
+			<view class="tit adminTit">
+				强制操作
+			</view>
+			<view class="btns">
+				<button v-for="(item,index) in controlInfo.forceControl" type="warn" @click="equipBtnControl(item.cmd)" size="mini">{{item.name}}</button>
+		
+			</view>
+			<view class="tit adminTit">
+				设备操作
+			</view>
+			<view class="btns">
+				<button v-for="(item,index) in controlInfo.equipControl" type="warn" @click="equipBtnControl(item.cmd)" size="mini">{{item.name}}</button>
+
+			</view>
+		</view>
+		<view style="margin:40rpx 0 20rpx 0;">
+			<u-line color="#E5EBE9" />
+		</view>
+
+		<view class="uni-list-cell" v-if="device_type==32" @click="modeShow = true">
+			<span class="tit">定时模式</span>
+			<view class="right-data" style="float: right;">
+				<span>{{tsArrLabel}}</span>
+				<u-icon class="arrow" name="arrow-right"></u-icon>
+			</view>
+		</view>
+		<view class="uni-list-cell" v-if="device_type==33||device_type==34" @click="syModeShow = true">
+			<span class="tit">控制模式</span>
+			<view class="right-data" style="float: right;">
+				<span>{{tsArrLabel}}</span>
+				<u-icon class="arrow" name="arrow-right"></u-icon>
+			</view>
+		</view>
+		<view class="uni-list-cell" @click="shikongshow = true" v-if="equipContrlForm.CONTROL==0">
+			<span class="tit">
+				时控时长
+			</span>
+			<view class="right-data" style="float: right;">
+				<span>{{shikongLabel}}</span>
+				<u-icon class="arrow" name="arrow-right"></u-icon>
+			</view>
+			
+		</view>
+		<view class="uni-list-cell" @click="gkongShow = true" v-if="equipContrlForm.CONTROL==1">
+			<span class="tit">
+				光控时长
+			</span>
+			<view class="right-data" style="float: right;">
+				<span>{{gkongLabel}}</span>
+				<u-icon class="arrow" name="arrow-right"></u-icon>
+			</view>
+			
+		</view>
+		
+		<view class="uni-list-cell" @click="photoShow = true" v-if="device_type==33||device_type==34">
+			<span class="tit">
+				拍照时间
+			</span>
+			<view class="right-data" style="float: right;">
+				<span>{{photoLabel}}</span>
+				<u-icon class="arrow" name="arrow-right"></u-icon>
+			</view>
+			
+		</view>
+		<view class="uni-list-cell" v-if="device_type==33||device_type==34"  @click="selectOperate(5,1440,'P_DATT')">
+			<span class="tit">
+				拍照频率(min)
+			</span>
+			<view class="right-data" style="float: right;">
+				<span>{{equipContrlForm.P_DATT}}</span>
+				<u-icon class="arrow" name="arrow-right"></u-icon>
+			</view>
+			
+		</view>
+		<view class="uni-list-cell" @click="selectOperate(5,device_type==32?60:1440,'DATT')">
+			<span class="tit">
+				数据上传频率(min)
+			</span>
+			<view class="right-data" style="float: right;">
+				<span>{{equipContrlForm.DATT}}</span>
+				<u-icon class="arrow" name="arrow-right"></u-icon>
+			</view>
+			
+		</view>
+		<view v-if="device_type==32" class="uni-list-cell" @click="selectOperate(5,180,'PHO_T')">
+			<span class="tit">
+				照片上传频率(min)
+			</span>
+			<view class="right-data" style="float: right;">
+				<span>{{equipContrlForm.PHO_T}}</span>
+				<u-icon class="arrow" name="arrow-right"></u-icon>
+			</view>
+			
+		</view>
+		<view >
+			<u-select v-model="modeShow" :list="tsArr" @confirm="tsArrConfirm"></u-select>
+			<u-select v-model="syModeShow" :list="syArr" @confirm="tsArrConfirm"></u-select>
+			<u-select v-model="shikongshow" mode="mutil-column" :list="shikonglist" @confirm="shikongconfirm"></u-select>
+			<u-select v-model="photoShow" mode="mutil-column" :list="shikonglist" @confirm="photoConfirm"></u-select>
+			<u-select v-model="gkongShow" :list="gkongArr" @confirm="gkArrConfirm"></u-select>
+			<u-select v-model="dataSelectShow"  :list="singleSelectList" @confirm="dataconfirm"></u-select>
+		</view>
+		<view class="submit-box">
+			<u-button :custom-style="customStyle" @click="submit" :disabled="submitBtnDisabled" >确定</u-button>
+		</view>
+		<u-toast ref="toast" />
+		<u-popup v-model="mqttShow">
+			<view class="mqtt-popup">
+				<u-field required v-model="mqttConfig.muid" label="MQTT用户名" label-width="180">
+				</u-field>
+				<u-field required v-model="mqttConfig.mpwd" label="MQTT密码" label-width="180">
+				</u-field>
+				<u-field required v-model="mqttConfig.mpi" label="MQTT地址" label-width="180">
+				</u-field>
+				<u-field required v-model="mqttConfig.mport" label="MQTT端口" label-width="180">
+				</u-field>
+				<u-field required v-model="mqttConfig.mpub" label="上传地址" label-width="180">
+				</u-field>
+				<u-field required v-model="mqttConfig.msub" label="下发地址" label-width="180">
+				</u-field>
+				<u-field v-model="mqttConfig.fuid" label="FTP用户名" label-width="180">
+				</u-field>
+				<u-field v-model="mqttConfig.fpwd" label="FTP密码" label-width="180">
+				</u-field>
+				<u-field required v-model="mqttConfig.fip" label="图片上传地址" label-width="180">
+				</u-field>
+				<u-field required v-model="mqttConfig.fport" label="图片上传接口" label-width="180">
+				</u-field>
+			</view>
+			<view class="mqtt-btn-box">
+				<u-button @click="" size="medium" type="success">确定</u-button>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				d_id: '',
+				device_id:'',
+				device_type:'',
+				dsArr: ['关机', '开机'],
+				dsIndex: 0,
+				wsArr: ['待机', '工作'],
+				wsIndex: 0,
+				tsArr: [ 
+					{ value: 1, label: '时控触发' },
+					{ value: 0, label: '时控模式' },
+				],
+				syArr:[
+					{ value: 1, label: '光控模式' },
+					{ value: 0, label: '时控模式' }
+				  ],
+				tsIndex: 0,
+				imgresArr: ['高', '中', '低'],
+				imgresIndex: "",
+				wsModelShow: false,
+				equipContrlForm: {
+					END_TIME: '',
+					CONTROL: 0,
+					DATT: 5,
+					START_TIME: '',
+					PHO_T: 5,
+					P_DATT:1,
+					TT: '',
+					P_START:'',
+					P_END:''
+				},
+
+				shikongLabel:'00:00-00:00',
+				list: [{
+						value: '00:00',
+						label: '00:00'
+					},
+					{
+						value: '01:00',
+						label: '01:00'
+					},
+					{
+						value: '02:00',
+						label: '02:00'
+					},
+					{
+						value: '03:00',
+						label: '03:00'
+					},
+					{
+						value: '04:00',
+						label: '04:00'
+					},
+					{
+						value: '05:00',
+						label: '05:00'
+					},
+					{
+						value: '06:00',
+						label: '06:00'
+					},
+					{
+						value: '07:00',
+						label: '07:00'
+					}, {
+						value: '08:00',
+						label: '08:00'
+					},
+					{
+						value: '09:00',
+						label: '09:00'
+					},
+					{
+						value: '10:00',
+						label: '10:00'
+					},
+					{
+						value: '11:00',
+						label: '11:00'
+					},
+					{
+						value:'12:00',
+						label: '12:00'
+					},
+					{
+						value: '13:00',
+						label: '13:00'
+					},
+					{
+						value: '14:00',
+						label: '14:00'
+					}, {
+						value: '15:00',
+						label: '15:00'
+					},
+					{
+						value: '16:00',
+						label: '16:00'
+					},
+					{
+						value: '17:00',
+						label: '17:00'
+					},
+					{
+						value: '18:00',
+						label: '18:00'
+					},
+					{
+						value: '19:00',
+						label: '19:00'
+					},
+					{
+						value: '20:00',
+						label: '20:00'
+					},
+					{
+						value: '21:00',
+						label: '21:00'
+					}, {
+						value: '22:00',
+						label: '22:00'
+					},
+					{
+						value: '23:00',
+						label: '23:00'
+					},
+				],
+				mqttShow: false,
+				shikongshow:false,
+				gkongLabel:'0h',
+				gkongShow:false,
+				mqttConfig: {
+					muid: '',
+					mpwd: '',
+					mip: '',
+					mport: '',
+					mpub: '',
+					msub: '',
+					fuid: '',
+					fpwd: '',
+					fip: '',
+					fport: ''
+				},
+				myuser_type: false,
+				singleSelectList:[],
+				dataSelectShow:false,
+				currentFormKey:'',
+				tsArrLabel:'时控模式',
+			
+				modeShow:false,
+				syModeShow:false,
+				submitBtnDisabled:false,
+				photoShow:false,
+				photoLabel:'00:00-00:00'
+				
+			}
+		},
+		
+		computed:{
+			gkongArr(){
+				const list = []
+				      const count = 24
+				      for (let i = 0; i < count; i++) {
+				        list.push({
+				          value: i + 1 + '',
+				          label: i + 1 + 'h'
+				        })
+				      }
+				      return list
+			},
+			customStyle(){
+				return {
+					background: '#14A478',
+					borderRadius:'90rpx',
+					border:'none',
+					color:'#fff'
+				}
+			},
+			shikonglist(){
+				return[
+					[...this.list],
+					[...this.list]
+				] 
+			},
+
+			controlInfo(){
+				const netControl = [{
+					name: '数据单元重启',
+					cmd: 'dtu_reboot'
+				  },
+				  {
+					name: '数据单元升级',
+					cmd: 'dtu_update'
+				  }]
+				const forceControl = [
+				  {
+					name: '控制单元重启',
+					cmd: 'reboot'
+				  },
+				  {
+					name: '控制单元升级',
+					cmd: 'update'
+				  }
+				]
+				const equipControl = [
+				  {
+					name: '开启补光灯',
+					cmd: 'led_on'
+				  },
+				  {
+					name: '关闭补光灯',
+					cmd: 'led_off'
+				  },
+				  {
+					name: '测试拍照',
+					cmd: 'takephoto'
+				  },
+				  {
+					name: '翻版测试',
+					cmd: 'FB_Test'
+				  }
+				]
+			
+				switch (this.device_type){
+					case 32://天牛
+						break;
+					case 33:
+						break;
+					case 34:
+						break;
+					case 35:
+					break;
+					default:
+						break;
+				}
+				return {
+					netControl,forceControl,equipControl
+					
+				}
+			}
+		},
+		onLoad(option) {
+			this.d_id = option.d_id
+			this.device_id = option.device_id
+			this.device_type = option.device_type
+			this.getInfo()
+			uni.getStorage({
+				key: "myuser_type",
+				success: (res) => {
+					if (Number(res.data) == 1) {
+						this.myuser_type = true
+					}
+				}
+			})
+		},
+		methods: {
+			selectOperate(min,max,formKey){
+				this.dataSelectShow = true
+		
+				this.singleSelectList = []
+				for (let i = min; i < max; i+=5) {
+					this.singleSelectList.push({
+						value:i,
+						label:i.toString()
+					})
+				}
+				console.log(this.singleSelectList,'--')
+				this.currentFormKey = formKey
+			},
+			tsArrConfirm(e){
+				this.tsArrLabel = e[0].label
+				this.equipContrlForm.CONTROL = e[0].value
+			},
+			gkArrConfirm(e){
+				this.gkongLabel = e[0].label
+				this.equipContrlForm.TT = e[0].value
+			},
+			dataconfirm(e){
+				this.equipContrlForm[this.currentFormKey] = e[0].value
+			},
+			shikongconfirm(e){
+				console.log(e)
+				this.shikongLabel = e[0].label+'-'+e[1].label
+				this.equipContrlForm.START_TIME = e[0].value
+				this.equipContrlForm.END_TIME = e[1].value
+			},
+			photoConfirm(e){
+				
+				this.photoLabel = e[0].label+'-'+e[1].label
+				this.equipContrlForm.P_START = e[0].value
+				this.equipContrlForm.P_END = e[1].value
+			},
+			turnChange(e, a) {
+				this.equipContrlForm.ts = e.target.value
+
+			},	
+			async getInfo() {
+				let res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.get_device_config',
+					data: {
+						device_type_id:this.device_type,
+						id: this.d_id
+					}
+				})
+				if(res.code==4000){
+					this.submitBtnDisabled = true
+					this.$refs.toast.show({
+						title: res.msg,
+						type: 'warning'
+					})
+					return 
+				}
+				this.equipContrlForm = res
+				this.photoLabel = (res.P_START||'00:00')+' - '+ (res.P_END||'00:00')
+				this.shikongLabel = res.START_TIME + ':00' +  ' - '+res.END_TIME + ':00' 
+				console.log(this.equipContrlForm)
+			},
+			async submit() {
+				console.log(this.equipContrlForm)
+				let res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.update_device_config',
+					data: {
+						device_type_id: this.device_type,
+						id: this.d_id,
+						...this.equipContrlForm
+						
+					}
+				})
+				if(res){
+					this.$refs.toast.show({
+						title: '修改成功!',
+						type: 'success',
+					})
+				}
+				if(res.code==4000){
+					this.$refs.toast.show({
+						title: res.msg+'无法修改',
+						type: 'warning'
+					})
+					
+				}
+			},
+			async equipBtnControl(cmd) {
+				let res = await this.$myRequest({
+					url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
+					data: {
+						cmd,
+						device_type_id: this.device_type,
+						d_id: this.d_id
+					}
+				})
+				if (res) {
+					this.$refs.toast.show({
+						title: '指令下发成功!',
+						type: 'success',
+					})
+				}
+			},
+			async mqttInfo() {
+				let res = await this.$myRequest({
+					url: '/api/api_gateway?method=forecast.send_control.device_control_info',
+					data: {
+						cmd: 'netconf',
+						d_id: this.d_id
+					}
+				})
+				if (res) {
+					let {
+						ftp,
+						mqtt
+					} = res
+					this.mqttConfig = {
+						muid: mqtt.uid,
+						mpwd: mqtt.pwd,
+						mip: mqtt.ip,
+						mport: mqtt.port,
+						mpub: mqtt.pub,
+						msub: mqtt.sub,
+						fuid: ftp.uid,
+						fpwd: ftp.pwd,
+						fip: ftp.ip,
+						fport: ftp.port
+					}
+				}
+				this.mqttShow = true
+			},
+			async mqttSubm() {
+				let obj = {
+					mqtt: {
+						uid: this.mqttConfig.muid,
+						pwd: this.mqttConfig.mpwd,
+						ip: this.mqttConfig.mip,
+						port: this.mqttConfig.mport,
+						pub: this.mqttConfig.mpub,
+						sub: this.mqttConfig.msub,
+						keepalive: 60,
+						lastwill: '/yfkj/cbd/offline/'
+					},
+					ftp: {
+						uid: this.mqttConfig.fuid,
+						pwd: this.mqttConfig.fpwd,
+						ip: this.mqttConfig.fip,
+						port: this.mqttConfig.fport
+					}
+				}
+				let res = await this.$myRequest({
+					url: '/api/api_gateway?method=forecast.send_control.device_control',
+					data: {
+						device_type_id: 3,
+						d_id: this.d_id,
+						cmd: 'setnet',
+						config: JSON.stringify(obj)
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		padding: 20rpx;
+		box-sizing: border-box;
+
+		.tit {
+			line-height: 30rpx;
+			font-size: 28rpx;
+			margin: 30rpx 0;
+			color: #666666;
+		}
+
+		.adminTit {
+			border-left-color: #e64340;
+		}
+
+		.btns {
+			display: flex;
+			justify-content: flex-start;
+			flex-wrap: wrap;
+			gap: 16rpx;
+			button {
+				margin: 0;
+				margin-right: 10rpx;
+				padding: 0 25rpx;
+			}
+		}
+
+		.uni-list-cell {
+			// background: #F7F8FA;
+			// padding: 10rpx 40rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			font-size: 28rpx;
+			box-sizing: border-box;
+			.arrow{
+				margin-left: 30rpx;
+			}
+			.right-data{
+				color: #CCCCCC;
+			}
+		}
+
+		.selectTime {
+			display: flex;
+			float: right;
+			width: 30%;
+			color: #CCCCCC;
+			justify-content: space-between;
+			.time {
+				// width: 350rpx;
+				// display: flex;
+				// justify-content: space-between;
+			}
+
+			.line {
+				width: 50rpx;
+				text-align: center;
+			}
+		}
+
+		.submit-box {
+			margin-top: 60rpx
+		}
+
+		.mqtt-popup {
+			width: 580rpx;
+
+		}
+
+		.mqtt-btn-box {
+			margin-top: 50rpx;
+			text-align: center;
+		}
+	}
+</style>

pages/cb/cbd/equip-set/newhistoryfile.vue

@@ -0,0 +1,532 @@
+<template>
+	<view style="background-color: #f7f7f7; height: 100vh;padding-top: 88rpx;">
+		<!-- <view class="status_bar"></view> -->
+		<view>
+			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="历史数据" backgroundColor="#f7f7f7"></uni-nav-bar>
+		</view>
+		<view style="padding: 0 48rpx;">
+			<u-calendar v-model="dataShow" :mode="mode" @change="tiemchange" :maxDate="maxDate"></u-calendar>
+			<view class="date" @click="dataShow = true">
+				<span>选择日期 </span>
+				<span style="color: #cccccc;">
+					{{start_time}} <span style="margin: 0 10rpx;"> /</span> {{end_time}}
+					<u-icon style="margin-left: 20rpx;" name="arrow-right" size="28"></u-icon>
+				</span>
+			</view>
+			<view class="title">温湿度数据</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="canvastishiTF" 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>
+			<pest-line 
+			:device_type_id='device_type' 
+			:d_id="d_id"
+			:start_time="start_time"
+			:end_time="end_time"
+			:notify="notify"
+			>
+				
+			</pest-line>
+			<view class="title">监测数据
+
+				<u-button size="mini" :loading='refreshLoading' class="refresh" throttle-time="500" @click="refresh"
+					:customStyle="customStyle">刷 新</u-button>
+			</view>
+
+			<view class="condition">
+				<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
+					<u-table class="table">
+						<u-tr>
+							<u-th class="th" v-for="(value,key) in thdata" :key="key">{{value}}</u-th>
+						</u-tr>
+						<tr class="tr" v-for="(items,indexs) in historylistdata" :key="'b'+indexs" v-if="!forbidden">
+							<u-td class="td" v-for="(value,key) in thdata">{{items[key]}}</u-td>
+						</tr>
+						<tr class="tr" v-if="forbidden">
+							<u-td class="td" v-for="item in Object.keys(thdata)">暂无数据</u-td>
+						</tr>
+					</u-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>
+	</view>
+</template>
+
+<script>
+	import uCharts from '../../../../components/js_sdk/u-charts/u-charts/u-charts.js';
+	import pestLine from './pestLine.vue';
+	let canvaColumnA = null;
+	export default {
+		data() {
+			return {
+				maxDate: '2050-12-31',
+				styles: {
+					// width: "650rpx",
+					height: "400rpx"
+				},
+				d_id: '',
+				start_time: "",
+				end_time: "",
+				historydatas: [],
+				titletext: ["24小时", "近一个月", "近半年", "近一年"],
+				titleidnex: 0,
+				device_id: '',
+				page: 1,
+				historylistdata: [],
+				thdata: {},
+
+				forbidden: false,
+				cWidth: '400',
+				cHeight: '400',
+				pixelRatio: 1,
+				canvastishiTF: false, //暂无数据提示
+				dataloadingtf: true, //加载中提示
+				pagesum: 1,
+				device_type: "",
+				dataShow: false,
+				mode: 'range',
+				refreshLoading: false,
+				notify:0
+			}
+		},
+		computed: {
+			customStyle() {
+				return {
+					background: '#018B3F',
+					fontSize: '12px',
+					border: 'none',
+					color: '#fff'
+				}
+			},
+		},
+		components:{pestLine},
+		methods: {
+			tiemchange(e) {
+				console.log(e)
+
+				this.start_time = e.startDate
+				this.end_time = e.endDate
+
+				this.history()
+				this.historylist()
+				this.notify++
+
+			},
+			async history() { //历史数据列表折线图
+				this.dataloadingtf = true
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.data_info.temp_hum',
+					data: {
+						device_type_id: this.device_type,
+						id: this.d_id,
+						start: +new Date(this.start_time + ' 00:00:00') / 1000,
+						end: +new Date(this.end_time + ' 23:59:59') / 1000
+					}
+				})
+				this.dataloadingtf = false
+				this.historydatas = res || []
+				console.log(this.historydatas)
+				if (this.historydatas.length == 0) {
+					this.canvastishiTF = false
+				} else {
+					this.canvastishiTF = true
+
+					let arr1 = []
+					let arr2 = []
+					let arr3 = []
+					let xtitle = []
+					for (let i = 0; i < res.length; i++) {
+						// let times = new Date(res[i].addtime * 1000)
+						xtitle.push(res[i].addtime.split(' ')[0])
+						arr1.push(res[i].tem)
+						arr2.push(res[i].hum)
+						if ('lux' in res[i]) {
+							arr3.push(res[i].lux)
+						}
+					}
+					// console.log(arr1)
+					let obj = [{
+
+						name: '温度',
+						data: arr1,
+						color: '#00E29D'
+					}, {
+						name: '湿度',
+						data: arr2,
+						color: '#6CBBFF'
+					}]
+					if (arr3.length > 0) {
+						obj.push({
+							index: 1,
+							name: '光照',
+							data: arr3,
+							color: '#E67B3E'
+						})
+					}
+					let yAxis = {
+						data: [{
+							position: 'left'
+						}, {
+							position: 'right'
+						}]
+
+					}
+					console.log('----温度:',obj)
+					this.showColumn("canvasColumnA", xtitle, obj, yAxis)
+				}
+			},
+			//历史数据列表
+			async historylist() {
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.data_info.history_data',
+					data: {
+						device_type_id: this.device_type,
+						id: this.d_id,
+						start: +new Date(this.start_time + ' 00:00:00') / 1000,
+						end: +new Date(this.end_time + ' 23:59:59') / 1000,
+						page: this.page
+					}
+				})
+				this.refreshLoading = false
+				// this.thdata = Object.values(res.title) 
+				Object.keys(res.title).forEach(item => {
+					this.$set(this.thdata, item, res.title[item])
+				})
+
+				this.historylistdata = res.data
+				this.pagesum = Math.ceil(res.total / 10) || 1
+				if (res.data.length == 0) {
+					this.forbidden = true
+					console.log(res.data.length)
+				} else {
+					this.forbidden = false
+					console.log(res.data.length)
+				}
+
+				console.log(this.historylistdata)
+			},
+			// forecast.send_control.get_device_config 获取当前时间的数据
+			async newdata() {
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=forecast.send_control.get_device_config',
+					data: {
+						device_type_id: 3,
+						d_id: this.d_id,
+						control_type: "data"
+					}
+				})
+				if (res) {
+					uni.showToast({
+						title: '刷新成功',
+						duration: 2000,
+						icon: "none"
+					});
+
+					this.historylist()
+				} else {
+					uni.showToast({
+						title: '刷新失败',
+						duration: 2000,
+						icon: "none"
+					});
+				}
+			},
+			refresh() { //获取当前时间的数据
+				this.refreshLoading = true
+				this.historylist()
+			},
+
+			prev() { //上一页
+				if (this.page > 1) {
+					this.page--
+					this.historylist()
+				}
+			},
+			next() { //下一页
+				if (this.page < this.pagesum) {
+					this.page++
+					this.historylist()
+				}
+			},
+			clickLeft() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
+			showColumn(id, xtitle, xinfo, yAxis) {
+				let _self = this
+				// const canvas = this.$refs[id];
+				// const canvas = document.getElementById(id);
+				// console.log(canvas,'pppppp')
+				// const ctx = canvas.getContext("2d");
+				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: 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
+					}
+				});
+			},
+		},
+		onLoad(option) {
+			this.d_id = option.d_id
+			this.device_id = option.device_id
+			this.device_type = option.device_type
+			this.cWidth = uni.upx2px(650);
+			this.cHeight = uni.upx2px(500);
+			let endTime = +new Date() / 1000
+			let startTime = endTime - 60 * 60 * 24
+
+			this.end_time = this.formatTime(endTime * 1000, 'yyyy-MM-dd')
+			console.log(this.end_time)
+			this.start_time = this.formatTime(startTime * 1000, 'yyyy-MM-dd')
+			setTimeout(() => {
+				this.history()
+				this.historylist()
+			}, 1000)
+		},
+		onShow() {
+			// this.end_time = +new  Date()/1000
+			// this.start_time = this.end_time - 24 * 60 * 60
+			// // this.formatTime(date, 'yyyy-MM-dd')
+			// setTimeout(()=>{
+			// 	this.history()
+			// 	this.historylist()
+			// },1000)
+		},
+		onPullDownRefresh() {
+			this.history()
+			this.historylist()
+			setTimeout(() => {
+				uni.stopPullDownRefresh()
+			}, 1000)
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	/deep/.u-calendar__action {
+		display: flex;
+		justify-content: space-around;
+	
+		.u-calendar__action__text {
+			line-height: 25px;
+		}
+	}
+	page {
+		background: #f7f7f7;
+	}
+
+	.title {
+		color: #999999;
+		margin: 32rpx 0;
+	}
+
+	.date {
+		height: 92rpx;
+		line-height: 92rpx;
+		border-radius: 92rpx;
+		background: #fff;
+		display: flex;
+		justify-content: space-between;
+		margin-top: 16rpx;
+		padding: 0 48rpx;
+		position: relative;
+
+		
+	}
+
+	.shuju_one,
+	.shuju_two {
+		// position: absolute;
+		// top: 54px;
+		width: 100%;
+		// left: 5%;
+		// box-shadow: 0 0 10rpx #bcb9ca;
+		padding-top: 20rpx;
+		height: 550rpx;
+		background-color: #fff;
+		border-radius: 24rpx;
+
+		.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;
+				}
+			}
+		}
+
+
+	}
+
+	.refresh {
+		// position: absolute;
+		// top: 700rpx;
+		// left: 5%;
+		font-size: 12px;
+		float: right;
+		padding: 0 10rpx;
+		height: 40rpx;
+		border-radius: 8rpx;
+		background-color: #018B3F;
+		color: #FFFFFF;
+		line-height: 40rpx;
+		text-align: center;
+	}
+
+	.condition {
+		// position: absolute;
+		// top: 770rpx;
+		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+		// left: 5%;
+		// box-shadow: 0 0 10rpx #bcb9ca;
+		margin-bottom: 30rpx;
+
+		.scroll-X {
+			width: 100%;
+			margin: 20rpx auto;
+
+			.table {
+				width: 1672px;
+			}
+
+			.tr {
+				display: flex;
+				overflow: hidden;
+
+				.th,
+				.td {
+					display: inline-block;
+					padding: 4rpx;
+					width: 286rpx;
+					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: #17BB89;
+				color: #FFFFFF;
+			}
+
+			.pagenumber_page {
+				width: 100rpx;
+				height: 50rpx;
+				line-height: 50rpx;
+				font-size: 26rpx;
+				text-align: center;
+			}
+		}
+	}
+</style>

pages/cb/cbd/equip-set/pestLine.vue

@@ -0,0 +1,467 @@
+<template>
+	<view>
+		<view class="title">虫情趋势矩阵图</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="canvastishiTF" canvas-id="canvasColumnB" id="canvasColumnB" 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>
+		<view class="title">害虫排名</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="canvastishiTF" canvas-id="canvasColumnC" id="canvasColumnC" class="charts"
+				:style="{'width':cWidth*pixelRatio+'px','height':pestHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
+		</view>
+
+	</view>
+
+</template>
+
+<script>
+	import uCharts from '../../../../components/js_sdk/u-charts/u-charts/u-charts.js';
+	let canvaColumnA = null;
+	let canvaColumnB = null;
+	const myColor = ['#FF5951', '#66EDED', '#E67B3E', '#6DE28B', '#FFC97A', '#E7EB4B', '#1561F3', '#FA73F5', '#159AFF',
+		'#FA73F5'
+	]
+	const temColor = ['#A2845E', '#018B3F', '#00C7BE']
+
+	export default {
+		data() {
+			return {
+
+				cWidth: '400',
+				cHeight: '400',
+				pixelRatio: 1,
+				canvastishiTF: false, //暂无数据提示
+				dataloadingtf: true, //加载中提示
+				pestHeight: '400',
+			}
+		},
+		props: {
+			start_time: {
+				type: String,
+				default: ''
+			},
+			end_time: {
+				type: String,
+				default: ''
+			},
+			device_type_id: {
+				type: String,
+				default: '35'
+			},
+			d_id: {
+				type: String,
+				default: 0
+			},
+			notify: {
+				type: Number,
+				default: 0
+			}
+		},
+		watch: {
+			notify: {
+				handler() {
+					this.pestLine()
+				}
+			}
+		},
+		computed: {
+
+		},
+		methods: {
+
+			async pestLine() { //害虫趋势折线图
+				this.dataloadingtf = true
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.photo_info.pest_order_and_char',
+					data: {
+						device_type_id: this.device_type_id,
+						id: this.d_id,
+						// device_type_id: 35,
+						// id: '11630161',
+						start: +new Date(this.start_time + ' 00:00:00') / 1000,
+						end: +new Date(this.end_time + ' 23:59:59') / 1000,
+						hour_st: '00',
+						hour_ed: '00'
+					}
+				})
+				this.dataloadingtf = false
+				const {
+					char_data,
+					pest_total,
+					at_ah_info: atah
+				} = res
+				console.log(res, '---------')
+				if (Object.keys(char_data).length == 0) {
+					this.canvastishiTF = false
+				} else {
+					this.canvastishiTF = true
+					
+					let arr1 = []
+					let arr2 = []
+					let arr3 = []
+					let xtitle = []
+					for (let i = 0; i < atah.length; i++) {
+						xtitle.push(this.formatTime(atah[i].addtime * 1000, 'yyyy-MM-dd'))
+						arr1.push(atah[i].height ? atah[i].height : 0)
+						arr2.push(atah[i].low ? atah[i].low : 0)
+						arr3.push(atah[i].ah ? atah[i].ah : 0)
+
+					}
+					// console.log(arr1)
+					let objList = [{
+						name: '高温',
+						data: arr1
+
+					}, {
+						name: '低温',
+						data: arr2
+					}, {
+						name: '湿度',
+						data: arr3
+					}]
+					Object.keys(char_data).forEach((item, index) => {
+						let countData = []
+						char_data[item].forEach((item1, index1) => {
+							countData.push(item1.sum)
+						})
+						let obj = {
+							name: item,
+
+							data: countData
+						}
+						objList.push(obj)
+					})
+
+					const pestName = Object.keys(pest_total)
+					const dataList = Object.values(pest_total).reverse().map((value, index) => {
+						let i = index % pestName.length
+						return {
+							value,
+							color: myColor[i]
+						}
+					})
+					const pestTotal = [{
+						name: '排名',
+						data: dataList
+					}]
+
+					this.showColumn("canvasColumnB", xtitle, objList)
+					this.showColumnBar("canvasColumnC", pestName.reverse(), pestTotal)
+				}
+			},
+
+
+			showColumn(id, xtitle, xinfo, yAxis) {
+				console.log(xinfo)
+				let _self = this
+				if (xinfo.length > 12) {
+					this.cHeight = xinfo.length * 15
+				}
+				// const canvas = document.getElementById(id);
+				// const ctx = canvas.getContext("2d");
+				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,
+					color: [...temColor, ...myColor],
+					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: yAxis || {},
+					width: _self.cWidth * 1,
+					height: _self.cHeight * 1,
+					extra: {
+						line: {
+							type: 'curve'
+						}
+					}
+				});
+			},
+			showColumnBar(id, xtitle, xinfo) {
+				console.log(xtitle, xinfo)
+				let _self = this
+				if (xtitle.length > 12) {
+					this.pestHeight = xtitle.length * 20
+				}
+
+				const ctx = uni.createCanvasContext(id, this);
+				canvaColumnB = new uCharts({
+					context: ctx,
+					type: 'bar',
+
+					legend: {
+						show: false
+					},
+					padding: [5, 25, 5, 0],
+					fontSize: 11,
+					background: '#FFFFFF',
+					pixelRatio: 1,
+					animation: true,
+					// dataLabel: false,
+					categories: xtitle,
+					series: xinfo,
+					// enableScroll: true, //开启图表拖拽功能
+					xAxis: {
+						boundaryGap: "justify",
+						disableGrid: false,
+						axisLine: false
+					},
+					yAxis: {
+
+					},
+					width: _self.cWidth * 1,
+					height: _self.pestHeight * 1,
+					extra: {
+						bar: {
+							type: "group",
+							width: 30,
+
+							barBorderCircle: true,
+							seriesGap: 4,
+							categoryGap: 4
+						}
+					}
+				});
+			},
+			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);
+
+			},
+		},
+		mounted() {
+			this.cWidth = uni.upx2px(650);
+			this.cHeight = uni.upx2px(500);
+			this.pestLine()
+			console.log('mounted')
+		},
+		onLoad() {
+			console.log('load')
+
+		},
+		onShow() {
+			console.log('show')
+		},
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background: #f7f7f7;
+	}
+
+	.title {
+		color: #999999;
+		margin: 32rpx 0;
+	}
+
+	.date {
+		height: 92rpx;
+		line-height: 92rpx;
+		border-radius: 92rpx;
+		background: #fff;
+		display: flex;
+		justify-content: space-between;
+		margin-top: 16rpx;
+		padding: 0 48rpx;
+		position: relative;
+
+		/deep/.u-calendar__action {
+			display: flex;
+			justify-content: space-around;
+
+			.u-calendar__action__text {
+				line-height: 25px;
+			}
+		}
+	}
+
+	.shuju_one,
+	.shuju_two {
+		// position: absolute;
+		// top: 54px;
+		width: 100%;
+		// left: 5%;
+		// box-shadow: 0 0 10rpx #bcb9ca;
+		padding-top: 20rpx;
+		height: 550rpx;
+		background-color: #fff;
+		border-radius: 24rpx;
+		overflow: scroll;
+		position: relative;
+		.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;
+				}
+			}
+		}
+
+
+	}
+
+	.refresh {
+		// position: absolute;
+		// top: 700rpx;
+		// left: 5%;
+		font-size: 12px;
+		float: right;
+		padding: 0 10rpx;
+		height: 40rpx;
+		border-radius: 8rpx;
+		background-color: #018B3F;
+		color: #FFFFFF;
+		line-height: 40rpx;
+		text-align: center;
+	}
+
+	.condition {
+		// position: absolute;
+		// top: 770rpx;
+		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+		// left: 5%;
+		// box-shadow: 0 0 10rpx #bcb9ca;
+		margin-bottom: 30rpx;
+
+		.scroll-X {
+			width: 100%;
+			margin: 20rpx auto;
+
+			.table {
+				width: 1672px;
+			}
+
+			.tr {
+				display: flex;
+				overflow: hidden;
+
+				.th,
+				.td {
+					display: inline-block;
+					padding: 4rpx;
+					width: 286rpx;
+					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: #17BB89;
+				color: #FFFFFF;
+			}
+
+			.pagenumber_page {
+				width: 100rpx;
+				height: 50rpx;
+				line-height: 50rpx;
+				font-size: 26rpx;
+				text-align: center;
+			}
+		}
+	}
+</style>

pages/cb/cbd/equip-set/photo.vue

@@ -0,0 +1,344 @@
+<template>
+	<view style="background-color: #f7f7f7;padding-top: 88rpx;height: calc(100vh - 88rpx);">
+		<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="查看图片" backgroundColor="#F7F7F7"></uni-nav-bar>
+		<view class="search-item">
+			<u-dropdown >
+				<u-dropdown-item @change="dropDownChange" v-model="searchObj.is_pest" title="害虫筛选" :options="pestOptions"></u-dropdown-item>
+			</u-dropdown>
+			<span v-if="!delShow" class="right" @click="imgOperate">
+				管理
+			</span>
+			<span v-else class="right"  @click="delShow = false">
+				完成
+			</span>
+			
+		</view>
+		<view style="padding: 0 48rpx;" v-if="searchObj.is_pest!='2'">
+			<u-search bg-color="#fff" height="92" shape="square"  placeholder="请输入害虫名称" v-model="searchObj.pest_name" @search="dropDownChange" :show-action='false'></u-search>
+		</view>
+		<u-calendar v-model="calendarShow" mode="range" @maxDate="maxDate" @change="change"></u-calendar>
+		<view class="tile-item">
+			
+			<view @click="calendarShow = true" class="calendar">{{start_time}} <span style="margin: 0 40rpx;"> -</span> {{end_time}}</view>
+			
+			<u-icon name="camera" color="#018B3F" size="52" @click="takephoto"></u-icon>
+		</view>
+		<view class="imglist" v-if="imglists.length>0">
+			<view class="imglist_box" v-for="(item,index) in imglists" :key="index" >
+				<view class="top">识别:{{item.indentify_count}} 
+					<span class="yficonfont icon-shanchu float-right" v-if="delShow" @click="delImage(item)"></span>
+					<!-- <u-icon v-if="delShow" @click="delImage(item)" class="float-right" name="trash-fill" color="#FF5951" size="28"></u-icon> -->
+				</view>
+				<!-- <image class="img-flex" v-if="showPlaceholder" src="/static/images/image.png"></image> -->
+				<image class="img-flex" @error="handleImgErr($event,index)" :src="item.addr+'?x-oss-process=image/resize,w_130/quality,q_50'" mode="" @click="imageDetail(item)"></image>
+				<view class="bottom">{{item.addtime}}</view>
+			</view>
+		</view>
+		<view v-else class="notip">
+			暂无数据
+		</view>
+	
+	</view>
+</template>
+
+<script>
+	import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
+	export default {
+		data() {
+			return {
+				maxDate:'2050-12-31',
+				value1:'',
+				value2:'',
+				searchObj:{
+					is_pest:'',
+					pest_name:''
+				},
+				pestOptions:[
+					{label: '全部',value: ''},
+					{label: '有虫',value: '1'},
+					{label: '无虫',value: '2'},
+				],
+				timeend:'',
+				timestart:'',
+				imglists:[],
+				page:1,
+				device_type:'',
+				device_id:'',
+				d_id:'',
+				calendarShow:false,
+				start_time:'',
+				end_time:'',
+				delShow:false,
+				loadMore:true,
+				noImage:'/static/images/image.png'
+			}
+		},
+		methods: {
+			handleImgErr(e,index){
+				console.log(e,'图片加载出错了')
+				this.imglists[index].addr = this.noImage
+				// this.showPlaceholder = true
+			},
+			imageDetail(item){
+				console.log(item)
+				if(this.delShow){
+					return
+				}
+				uni.navigateTo({
+					url: '/pages/cb/cbd/equip-set/photoResults'  + '?d_id=' + this.d_id + "&device_id=" + this.device_id + "&device_type=" + this.device_type + "&time=" + item.addtime
+				});
+			},
+			imgOperate(){
+				this.delShow = true
+			},
+			clickLeft() {
+				uni.navigateBack()
+			},
+			dropDownChange(){
+				this.loadMore = true
+				this.page = 1
+				this.imglists = []
+				this.getImgData()
+			},
+			change(e){
+				this.loadMore = true
+				console.log(e)
+				this.start_time = e.startDate 
+				this.end_time = e.endDate 
+				this.page = 1
+				this.imglists = []
+				this.getImgData()
+			},
+			async getImgData(){
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.photo_info.photo_list',
+					data: {
+						id: this.d_id,
+						device_type_id:this.device_type,
+						page: this.page,
+						page_number: 12,
+						start: +new Date(this.start_time+' 00:00:00') / 1000,
+						end: +new Date(this.end_time+' 23:59:59') / 1000, 
+						...this.searchObj
+					}
+				})
+				if(res.data.length==0){
+					// 加载完了
+					this.loadMore = false
+					return
+				}
+				this.imglists = this.imglists.concat(res.data)
+				
+		
+			},
+			// 删除
+			delImage(item){
+				uni.showModal({
+				    title: '提示',
+				    content: '确认删除？',
+				    success:  async (res)=> {
+				        if (res.confirm) {
+				            const res = await this.$myRequest({
+				            	url: '/api/api_gateway?method=new_gateway.photo_info.delete_photo',
+				            	data: {
+				            		device_type_id: this.device_type,
+				            		ids: item.id
+				            	}
+				            })
+				            this.delShow = false
+				            
+				            uni.showToast({
+				            	title: res.msg,
+				            	duration: 2000
+				            });
+				            this.imglists = []
+				            this.getImgData()
+				        } else if (res.cancel) {
+				            
+				        }
+				    }
+				});
+				
+			},
+	
+			onReachBottom() {
+				if(this.loadMore){
+					this.page++
+					this.getImgData()
+				}
+				
+			},
+			anew() {
+				this.discern("again")
+				this.imgbg = true
+			},
+			examine(url) {
+				console.log(url)
+				var imgarr = []
+				imgarr.push(url.image)
+				console.log(imgarr)
+				uni.previewImage({
+					urls: imgarr
+				});
+			},
+			async takephoto() { //拍照
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.send_control',
+					data: {
+						device_type_id: this.device_type,
+						id: this.device_id,
+						cmd: "0004"
+					}
+				})
+				console.log(res)
+	
+				if (res == true) {
+					uni.showToast({
+						title: '指令下发成功！',
+						duration: 2000
+					});
+		
+				} else {
+					uni.showToast({
+						title: '指令下发失败！',
+						duration: 2000,
+						icon: "none"
+					});
+				}
+			
+			},
+		},
+		onLoad(option) {
+
+			console.log('图片详情',option)
+			this.device_id = option.device_id
+			this.d_id = option.d_id
+			this.device_type = option.device_type
+			let endTime = +new Date()/1000
+			let startTime = endTime - 60 * 60 * 24
+			
+			this.end_time = this.formatTime(endTime*1000,'yyyy-MM-dd')
+			this.start_time = this.formatTime(startTime*1000,'yyyy-MM-dd')
+			// this.imglists = []
+			
+			this.getImgData()
+		
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	/deep/.u-calendar__action {
+		display: flex;
+		justify-content: space-around;
+	
+		.u-calendar__action__text {
+			line-height: 25px;
+		}
+	}
+	/deep/.u-flex{
+		display: flex;
+	}
+	page {
+		background: #F7F7F7;
+		.notip{
+			text-align: center;
+			color: #666666;
+			margin-top: 100rpx;
+		}
+	.search-item{
+		// padding: 0rpx 48rpx;
+		box-sizing: border-box;
+		background: #F7F7F7;
+		line-height: 80rpx;
+		color: #656C74;
+		position: relative;
+		.right{
+			position: absolute;
+			z-index: 11;
+			right: 48rpx;
+			top: 0;
+		}
+		.right::before{
+			content: '|';
+			color: #C3CBCF;
+			padding-right: 10rpx;
+		}
+	}
+	.tile-item{
+		margin-top: 16rpx;
+		padding: 0rpx 48rpx;
+		box-sizing: border-box;
+		height: 92rpx;
+		line-height: 92rpx;
+		display: flex;
+		justify-content: space-between;
+		background: #F7F7F7;
+		.calendar{
+			width: 83%;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 0 18rpx;
+			color: #5C5C5C;
+			text-align: center;
+		}
+		.camera{
+			
+		}
+	}	
+		.imglist{
+				display: flex;
+				flex-flow: row wrap;
+				padding: 0rpx 48rpx;
+				box-sizing: border-box;
+				background: #F7F7F7;
+				margin-top: 6rpx;
+				// justify-content: space-around;
+				// gap: 16rpx;
+			.imglist_box{
+				box-sizing: border-box;
+				flex: 0 0 33.3333%;
+				height: 224rpx;
+				padding: 6rpx;
+				border-radius: 4rpx;
+				position: relative;
+				.top{
+					position: absolute;
+					top: 6rpx;
+					left: 6rpx;
+					background: rgba(0, 0, 0, 0.6);
+					color: #fff;
+					border-top-left-radius: 4rpx;
+					border-top-right-radius: 4rpx;
+					padding: 0 20rpx;
+					font-size: 10px;
+					z-index: 1;
+					width: 75.5%;
+					.float-right{
+						float: right;
+						color: #FF5951;
+						font-size: 36rpx;
+					}
+				}
+				.bottom{
+					position: absolute;
+					bottom: 6rpx;
+					left: 6rpx;
+					background: rgba(0, 0, 0, 0.6);
+					color: #fff;
+					border-bottom-left-radius: 4rpx;
+					border-bottom-right-radius: 4rpx;
+					text-align: center;
+					font-size: 10px;
+					width: 94.5%;
+					padding: 4rpx 0;
+				}
+				.img-flex{
+					border-radius: 4rpx;
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+}
+</style>

pages/cb/cbd/equip-set/photoResults.vue

@@ -0,0 +1,318 @@
+<template>
+	<view style="background-color: #f7f7f7;padding-top: 88rpx;height: calc(100vh - 88rpx);">
+		
+		<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="识别结果" backgroundColor="#F7F7F7"></uni-nav-bar>
+		<u-calendar v-model="calendarShow" mode="range" @change="change" @maxDate="maxDate"></u-calendar>
+		<view class="img-result">
+			<view class="tile-item">
+				
+				<view @click="calendarShow = true" class="calendar">{{start_time}} <span style="margin: 0 40rpx;"> -</span> {{end_time}}</view>
+				
+			</view>
+
+		<view class="images_box">
+
+			<view class="canvas-bg">
+				<img v-if="photos.length>0" :src="photos[active].addr+'?x-oss-process=image/resize,w_130/quality,q_90'" alt=""  @click="examine()"/>
+			</view>
+			<view class="image-flex" >
+				<view v-for="(item,index) in photos" :key="index">
+					<image class="my-img" :class="active==index?'active':''" :src="item.addr" @click="imgClick(item,index)" mode=""></image>
+				</view>
+			</view>
+		</view>
+		<view class="information">
+			<view class="btn">
+				<p class="title">当前图片识别结果</p>
+				<u-button size="mini" :loading='respetLoading' class="btn_box" throttle-time="500" @click="resetPest" :customStyle="customStyle">重新识别</u-button>
+			</view>
+			<view class="notip" v-if="isObject(pestResult)">
+				暂无识别结果
+			</view>
+			<view v-else class="information_data" v-for="(value,key) in pestResult">
+				<p> <span>{{key}}</span> <span>{{value}}头</span> </p>
+			</view>
+		</view>
+		
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
+	import insect_dict from "../../../../static/data/cbd_pest_library.js"
+	export default {
+		data() {
+			return {
+				maxDate:'2050-12-31',
+				device_type:'',
+				device_id:'',
+				d_id:'',
+				calendarShow:false,
+				start_time:'',
+				end_time:'',
+				photos:[],
+				
+				active:0,
+				respetLoading:false
+			}
+		},
+		computed:{
+			customStyle(){
+				return {
+					background: '#018B3F',
+					fontSize:'12px',
+					border:'none',
+					color:'#fff'
+				}
+			},
+			pestResult(){
+				if(this.photos==0){
+					return {}
+				}
+				let obj = {}
+				let item = this.photos[this.active]
+				console.log('选中',item)
+				if(item.is_mark==0){
+					// 机器识别
+					let aiLabel = []
+					if (item.label) {
+					    aiLabel = JSON.parse(item.label.replace(/'/g, '"'))
+						aiLabel.forEach(label => {
+							const text = Object.keys(label)[0]
+							if (obj[insect_dict[text]]) {
+								obj[insect_dict[text]]++
+							} else {
+								obj[insect_dict[text]] = 1
+							} 
+						})
+					}
+				}else{
+					item.mark.forEach(item => {
+					  if (obj[item.text]) {
+						obj[item.text]++
+					  } else {
+						obj[item.text] = 1
+					  }
+					})
+				}
+				return obj
+			},
+			previewImages(){
+				let list = []
+				if(this.photos.length>0){
+					this.photos.forEach(photo=>{
+						list.push(photo.addr)
+					})
+					return list
+				}else{
+					return []
+				}
+				
+			}
+		},
+		methods: {
+			clickLeft() {
+				uni.navigateBack()
+			},
+			isObject(obj){
+				return Object.keys(obj).length==0
+			},
+			change(e){
+				this.start_time = e.startDate 
+				this.end_time = e.endDate 
+				this.page = 1
+				this.photos = []
+				this.getImgData()
+			},
+			async getImgData(){
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.photo_info.photo_list',
+					data: {
+						id: this.d_id,
+						device_type_id:this.device_type,
+						page: 1,
+						page_number: 99999,
+						start: +new Date(this.start_time+' 00:00:00') / 1000,
+						end: +new Date(this.end_time+' 23:59:59') / 1000
+					}
+				})
+				this.photos = this.photos.concat(res.data)
+				console.log(this.photos,'---')
+				// this.photos = res.data
+			},
+			async resetPest(){
+				this.respetLoading = true
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.photo_info.identify_again',
+					data: {
+						id: this.photos[this.active].id,
+						device_type_id:this.device_type
+					}
+				})
+				this.respetLoading = false
+				if(res.code==2000){
+					uni.showToast({
+						title: '操作成功',
+						duration: 2000
+					})
+				}else{
+					uni.showToast({
+						title: res.msg,
+						duration: 2000
+					})
+				}
+			},
+			examine() {
+				uni.previewImage({
+					urls: this.previewImages
+				});
+			},
+			imgClick(item,index){
+				this.active = index	
+			}
+		},
+		onLoad(option) {
+			console.log('结果页面：',option)
+			this.device_id = option.device_id
+			this.d_id = option.d_id
+			this.device_type = option.device_type
+			let endTime = +new Date(option.time)/1000 + 60 * 60 * 24
+			let startTime = +new Date(option.time)/1000
+			
+			this.end_time = this.formatTime(endTime*1000,'yyyy-MM-dd')
+			this.start_time = this.formatTime(startTime*1000,'yyyy-MM-dd')
+			this.getImgData()
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	/deep/.u-calendar__action {
+		display: flex;
+		justify-content: space-around;
+	
+		.u-calendar__action__text {
+			line-height: 25px;
+		}
+	}
+	page{
+		background: #F7F7F7;
+	}
+	.img-result{
+		padding: 0rpx 48rpx;
+		background-color: #F7F7F7;
+		// height: calc(100vh - 120rpx);
+	}
+	.tile-item{
+		margin-top: 32rpx;
+		// padding: 0rpx 32rpx;
+		box-sizing: border-box;
+		height: 92rpx;
+		line-height: 92rpx;
+		display: flex;
+		justify-content: space-between;
+		background: #F7F7F7;
+		.calendar{
+			width: 100%;
+			background-color: #fff;
+			border-radius: 24rpx;
+			padding: 0 18rpx;
+			color: #5C5C5C;
+			text-align: center;
+		}
+		.camera{
+			
+		}
+	}
+	.images_box {
+		width: 100%;
+		height: 742rpx;
+		padding: 32rpx;
+		margin: 32rpx 0;
+		box-sizing: border-box;
+		background: #fff;
+		border-radius: 24rpx;
+		.canvas-bg{
+			height: 558rpx;
+			position: relative;
+			margin-bottom: 16rpx;
+			img{
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.image-flex {
+			width: 100%;
+			overflow-x: scroll;
+			display: flex;
+			flex-wrap: nowrap;
+			gap: 20rpx;
+			padding: 10rpx 0;
+			box-sizing: border-box;
+			.my-img {
+				width: 96rpx;
+				height: 96rpx;
+				border-radius: 4rpx;
+				opacity: 0.5;
+			}
+			.active{
+				border: 4px solid #ccc;
+				animation: borderAnimation 1s;
+				position: relative;
+				top: -4px;
+				opacity: 1;
+			}
+		}
+	}
+
+	.information {
+		padding-bottom: 2rpx;
+		.btn{
+			overflow: hidden;
+		}
+		.title {
+			float: left;
+			color: #999999;
+		}
+		.notip{
+			text-align: center;
+			color: #999999;
+			margin-top: 100rpx;
+		}
+		.btn_box{
+			float: right;
+			// border-radius: 8rpx;
+			// background: #018B3F;
+			// padding: 2rpx 10rpx;
+			// color: #fff;
+			// font-size: 24rpx;
+		}
+		.information_data {
+			margin: 32rpx 0;
+			display: flex;
+			background-color: #fff;
+			// padding: 20rpx 10rpx;
+			height: 104rpx;
+			line-height: 104rpx;
+			border-radius: 24rpx;
+			padding: 0 32rpx;
+			p {
+				// margin-right: 20rpx;
+				font-size: 24rpx;
+				color: #666666;
+				
+			}
+		}
+	}
+	
+	@keyframes borderAnimation {
+	  0% { 
+		opacity: 0.5;
+	  }
+	  100% { 
+		opacity: 1;
+	  }
+	}
+</style>

pages/cb/cbd/equip-set/results.vue

@@ -5,7 +5,7 @@
 			<view class="images">
 				<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/cb/jiazai.ui.gif'" mode=""
 					class="jiazai"></image>
-				<image :src="resuils.image" mode="" @click="examine(resuils)"></image>
+				<image :src="resuils.image" mode=""  @click="examine(resuils)"></image>
 				<view class="imgbg" v-if="imgbg">
 					<image src="../../../../static/images/cb/6286299.gif" mode="" class="img"></image>
 				</view>
@@ -38,6 +38,7 @@
 			}
 		},
 		methods: {
+	
 			//forecast.forecast_system.equip_photo_discern识别 see again\
 			async discern(ret) { //识别图片
 				var publiukey = `-----BEGIN PUBLIC KEY-----

pages/cb/equip-detail/equip-detail-new.vue

@@ -0,0 +1,661 @@
+<template>
+	<view>
+		<view class="title">基本信息</view>
+		<view class="info">
+			<view class="device-id" @click="copy(equipInfo)">
+				<image class="logo" :src="`http://www.hnyfwlw.com:8006/bigdata_pc/equipdistribute/${equipInfo.type}.png`" mode=""></image>
+				{{equipInfo.imei||equipInfo.device_id}}
+				<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi">
+				</image>
+				<view :class="['float-right','yficonfont',equipInfo.is_online==1?'on icon-zaixian':'off icon-lixian']">
+					{{equipInfo.is_online==1?'在线':'离线'}}
+				</view>
+			</view>
+			<view class="info-list">
+				<span class="float-left">设备名称：</span> <span class="float-right">{{equipInfo.device_name}}</span>
+			</view>
+			<view class="info-list" v-if="equipInfo.type==32">
+				<span class="float-left">诱虫量：</span> <span class="float-right">{{equipInfo.bug_count?equipInfo.bug_count.join('/'):'0/0/0'}}</span>
+			</view>
+			<view class="info-list">
+				<span class="float-left">最新上报时间：</span> <span class="float-right">{{equipInfo.addtime||equipInfo.uptime | timeFormat}}</span>
+			</view>
+			<view class="info-list">
+				<span class="float-left">设备地址：</span> <span class="float-right">{{equipInfo.address?equipInfo.address:"--"}}</span>
+			</view>
+			<view class="info-list" v-if="equipInfo.type==34" @click="operate('jd')">
+				<span class="float-left">卷带到期时间</span>
+				<span>  </span>
+				<span class="float-right"> 
+				<span v-if="equipInfo.jd_expire_time>0">
+					{{ equipInfo.jd_expire_time | timeFormat}}
+				</span>
+				 <span v-else> 暂未设置卷带	</span>
+					<u-icon class="arrow" name="arrow-right" color="#666666" size="26"></u-icon>
+				</span>
+			</view>
+			<view class="info-list" v-if="equipInfo.type==33" @click="operate('sb')">
+				<span class="float-left">色板到期时间</span>
+				<span>  </span>
+				<span class="float-right"> 
+				<span v-if="equipInfo.sban_expire_time>0">
+					{{ equipInfo.sban_expire_time | timeFormat}}
+				</span>
+				 <span v-else> 暂未设置色板	</span>
+					<u-icon class="arrow" name="arrow-right" color="#666666" size="26"></u-icon>
+				</span>
+			</view>
+			<view class="info-list" v-if="equipInfo.type==32||equipInfo.type==33||equipInfo.type==34" @click="operate('yx')">
+				<span class="float-left">诱芯到期时间</span>
+				<span>  </span>
+				<span class="float-right"> 
+				<span v-if="equipInfo.xy_expire_time>0">
+					{{ equipInfo.xy_expire_time | timeFormat}}
+				</span>
+				 <span v-else> 暂未设置诱芯	</span>
+					<u-icon class="arrow" name="arrow-right" color="#666666" size="26"></u-icon>
+				</span>
+			</view>
+
+			<u-calendar v-model="calendar_show" mode="date" :max-date="date" @change="timeChange($event)">
+			</u-calendar>
+			<u-toast ref="toast" />
+		</view>
+		<view class="title">基本操作</view>
+		<view class="newState" >
+			<view class="item" v-for="item in curEquip" @click="partClick(item.path)">
+				<view class="item_info_img">
+					<image :src="'https://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
+				</view>
+				<view class="info-text">
+					{{item.tex}}
+				</view>
+			</view>
+		</view>
+		<view class="title">实时状态</view>
+		<view class="newtishi" v-if="dataloadingtf">
+			<p class="dataloading">加载中</p>
+		</view>
+		<view class="newtishi" v-else-if="newtishitf">
+			暂无数据
+		</view>
+		<view class="newState" v-else>
+			<view class="item" v-for="item in curState">
+				<view class="item_info_img">
+					<image :src="'https://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
+				</view>
+				<view class="info-con">
+					<view class="active">
+						{{item.value | formatValue(item.txt,type)}}
+					</view>
+					<view class="val">
+						{{item.txt}} 
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import equipState from "../../../static/js/equipState_dict.json"
+	import {
+		QueryPermission,getPermissionById,getUserPermission
+	} from "../../../util/QueryPermission.js"
+	export default {
+		data() {
+			return {
+				fieldstyle: {
+					border: "2rpx solid #f6f6f6",
+					"border-radius": "24px",
+					"padding-left": "20rpx",
+					"background-color": "#f6f6f6"
+				},
+				city: "",
+				type: null, //设备类型
+				device_status: null,
+				equipInfo: {},
+				cbd: [
+					
+				],
+				newState: {}, //设备最新状态
+				setTimeShow: false,
+				calendar_show: false,
+				culErr: '',
+
+				decoy: '',
+				newtishitf: false, //暂无数据提示
+				dataloadingtf: true, //加载中提示
+				date: "", //日历最大可选日期
+				operateType:''
+			}
+		},
+		computed: {
+			curEquip(){
+				this.cbd = [{
+						icon: '/image/cb/4.png',
+						tex: '设备控制',
+						path: '/pages/cb/cbd/equip-set/equip-set-new',
+						tf: true
+					}, {
+						icon: '/image/cb/6.png',
+						tex: 'sim卡详情',
+						path: '/pages/prevention/sim',
+						tf: true
+					}, {
+						icon: '/image/environment/7.png',
+						tex: '一键报修',
+						path: '/pages/afterSale/addafter',
+						tf: true
+					}]
+				let permission = getPermissionById(getUserPermission(),this.equipInfo.pur_id)
+				permission.forEach(item=>{
+					
+					if(item.purview_name =='查看图片'){
+						this.cbd.unshift({
+							icon: '/image/cb/1.png',
+							tex: item.purview_name,
+							path: '/pages/cb/cbd/equip-set/photo',
+							tf: true
+						})
+					}else if(item.purview_name =='数据详情'){
+						this.cbd.unshift({
+							icon: '/image/cb/2.png',
+							tex: item.purview_name,
+							path: '/pages/cb/cbd/equip-set/newhistoryfile',
+							tf: true
+						})
+					}else if(item.purview_name =='分析'){
+						this.cbd.unshift({
+							icon: '/image/cb/3.png',
+							tex: item.purview_name,
+							path: '/pages/cb/cbd/equip-set/new-analyse',
+							tf: true
+						})
+					}
+				})
+				return this.cbd
+			},
+			curState() {
+				return [{
+						icon: '/image/cb/icon02.png',
+						txt: '在线状态',
+						value: this.newState.status,
+					},
+					{
+						icon: '/image/cb/icon05.png',
+						txt: '开关状态',
+						value: Number(this.newState.ds) == 1 ? '开机' : '关机'
+					},
+					 {
+						icon: '/image/cb/icon08.png',
+						txt: '环境温度(℃)',
+						value: this.newState.tem
+					}, {
+						icon: '/image/cb/icon07.png',
+						txt: '环境湿度(%)',
+						value: this.newState.hum
+					}, {
+						icon: '/image/prevention/icon16.png',
+						txt: '信号强度',
+						value: this.newState.signal
+					}, {
+						icon: '/image/cb/icon12.png',
+						txt: '设备版本',
+						value: this.newState.dver_num
+					},
+					{
+						icon: '/image/cb/icon17.png',
+						txt: '雨控状态',
+						value: this.newState.rps
+					}, {
+						icon: '/image/cb/icon14.png',
+						txt: '温控状态',
+						value: this.newState.tps
+					}, {
+						icon: '/image/cb/icon06.png',
+						txt: '光控状态',
+						value: this.newState.lps
+					}, {
+						icon: '/image/cb/icon18.png',
+						txt: '控制模式',
+						value: this.newState.control
+					}
+				]
+			},
+			operateOptions(){
+				return{
+					yx:{
+						title:'诱芯',
+						url:'/api/api_gateway?method=new_gateway.device_info.youxin',
+						field:'xy_expire_time'
+					},
+					sb:{
+						title:'色板',
+						url:'/api/api_gateway?method=new_gateway.device_info.sban',
+						field:'sban_expire_time'
+					},
+					jd:{
+						title:'卷带',
+						url:'/api/api_gateway?method=new_gateway.device_info.syone_jd',
+						field:'jd_expire_time'
+					}
+				}
+			}
+				
+		},
+		filters: {
+			equipType(type) {
+				switch (type) {
+					case 3:
+						return "虫情测报灯";
+					case 7:
+						return "孢子仪";
+					case 4:
+						return "性诱测报"
+
+				}
+			},
+			formatValue(val, a1, a2) {
+				if (a2 == 4 && a1 == "电池状态") {
+					switch (Number(val)) {
+						case 0:
+							return '正常';
+							break;
+						case 1:
+							return '欠压';
+							break;
+						case 2:
+							return '过压';
+							break;
+					}
+				} else {
+
+					return val ? val : '无'
+				}
+			}
+		},
+		onLoad(option) {
+			this.equipInfo = JSON.parse(option.info)
+			this.getDeviceStatus()
+			this.type = Number(this.equipInfo.type) || Number(this.equipInfo.equip_type) || Number(this.equipInfo
+				.device_type_id)
+			this.equipInfo.type = this.type
+			this.device_status = this.equipInfo.is_online
+			
+			this.getState()
+		
+			// this.selectaddress(Number(this.equipInfo.lat), Number(this.equipInfo.lng))
+			var times = new Date()
+			this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
+		},
+		methods: {
+			async getDeviceStatus() {
+				
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.devices_list',
+					data: {
+						device_type_id: this.equipInfo.type,
+						id: this.equipInfo.imei|| this.equipInfo.device_id,
+						page:1,
+						size:999
+					}
+				})
+				let newRes = res.device[0]
+				this.equipInfo ={...this.equipInfo,...newRes} 
+				console.log('响应',this.equipInfo)
+			},
+			async getState() {
+				this.dataloadingtf = true
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.device_status',
+					data: {
+						device_type_id: this.equipInfo.type,
+						id: this.equipInfo.d_id
+					}
+				})
+				this.newState = res
+				this.dataloadingtf = false
+				console.log('res',res)
+			},
+	
+			partClick(path) {
+				console.log(path)
+				var device_id = this.equipInfo.device_id || this.equipInfo.imei
+				uni.navigateTo({
+					url: path + '?d_id=' + this.equipInfo.d_id + "&device_id=" + device_id + "&device_type=" + this
+						.type
+				});
+			},
+	
+				
+			operate(type){
+				this.calendar_show = true
+				this.operateType = type
+			},
+			timeChange(e, filed) {
+				// // 根据type_id，执行相应的操作
+				
+				// let typeId = this.equipInfo.type
+				// let postData = {}
+				// if(typeId===32){
+				// 	// 添加诱芯
+				// }else if(typeId === 33){
+				// 	// 添加诱芯，更换色板
+				// 	this.sbSubmit(e.result)
+				// }else if(typeId === 34){
+				// 	// 添加诱芯，更换卷带
+				// 	this.jdSubmit(e.result)
+				// }
+				this.yxSubmit(e.result)
+			},
+		
+			async yxSubmit(time) {
+				let {title,url,field} = this.operateOptions[this.operateType]
+				if (!time) {
+					this.$refs.toast.show({
+						title: '请填写'+title+'到期时间!',
+						type: 'warning',
+					})
+					return false
+				}
+				let postData = {
+					device_type_id: this.equipInfo.type,
+					id: this.equipInfo.device_id	
+				}
+				postData[field] = +new Date(time) / 1000 
+				const res = await this.$myRequest({
+					url: url,
+					data: postData
+				})
+				if (res) {
+					this.$refs.toast.show({
+						title: title+'时间设置成功!',
+						type: 'success',
+					})
+					this.getDeviceStatus()
+					
+				}
+			},
+			// 色板
+			async sbSubmit(time) {
+				if (!time) {
+					this.$refs.toast.show({
+						title: '请填写色板到期时间!',
+						type: 'warning',
+					})
+					return false
+				}
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.sban',
+					data: {
+						device_type_id: this.equipInfo.type,
+						id: this.equipInfo.device_id,
+						sban_expire_time:  +new Date(time) / 1000 
+					}
+				})
+				if (res) {
+					this.$refs.toast.show({
+						title: '设置成功!',
+						type: 'success',
+					})
+					this.getDeviceStatus()
+					
+				}
+			},
+			async jdSubmit(time) {
+				if (!time) {
+					this.$refs.toast.show({
+						title: '请填写卷带到期时间!',
+						type: 'warning',
+					})
+					return false
+				}
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=new_gateway.device_info.syone_jd',
+					data: {
+						device_type_id: this.equipInfo.type,
+						id: this.equipInfo.device_id,
+						jd_expire_time:  +new Date(time) / 1000 
+					}
+				})
+				if (res) {
+					this.$refs.toast.show({
+						title: '设置成功!',
+						type: 'success',
+					})
+					this.getDeviceStatus()
+					
+				}
+			},
+			selectaddress(lat, lng) { //获取分布位置
+				uni.request({
+					type: "GET",
+					url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
+						"&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
+					dataType: "json",
+					complete: res => {
+						console.log(res)
+						this.city = res.data.regeocode.formatted_address
+					}
+				});
+			},
+			copy(item) {
+				console.log(item)
+				uni.setClipboardData({
+					data: item.imei || item.device_id,
+					success: function() {
+						console.log('success');
+					}
+				});
+			}
+		},
+	}
+</script>
+
+<style lang='scss'>
+	page {
+		padding: 0rpx 48rpx;
+		box-sizing: border-box;
+		background: #F7F7F7;
+		.title{
+			color: #999999;
+			margin: 32rpx 0;
+		}
+		.logo{
+			width: 36rpx;
+			height: 36rpx;
+			margin-right: 12rpx;
+			position: relative;
+			top: 8rpx;
+		}
+		.device-id{
+			height: 60rpx;
+			line-height: 60rpx;
+			margin-bottom: 18rpx;
+			color: #5C5C5C;
+			.float-right{
+				float: right;
+				width: 88px;
+				height: 30px;
+				text-align: center;
+				position: absolute;
+				top: 0;
+				right: 0;
+				border-top-right-radius: 24rpx;
+			}
+		}
+		
+		.on {
+			background-image: url('/static/images/cb/online.png');
+			color: #fff;
+		}
+		
+		.off {
+			background-image: url('/static/images/cb/outline.png');
+			color: #999999;
+		}
+		.info {
+			position: relative;
+			padding: 8rpx 32rpx 32rpx 32rpx;
+			
+			line-height: 50rpx;
+			font-size: 26rpx;
+			border-radius: 24rpx;
+			
+			background-color: #fff;
+			
+			box-sizing: border-box;
+			width: 100%;
+			.info-list{
+				overflow: hidden;
+				font-size: 12px;
+				.float-right{
+					float: right;
+					color: #666;
+					.arrow{
+						margin-left: 10rpx;
+					}
+				}
+				.float-left{
+					float: left;
+					color: #999;
+				}
+				
+			}
+			.tishi {
+				width: 28rpx;
+				height: 28rpx;
+				margin: 0rpx 0 0 12rpx;
+				position: relative;
+				top: 6rpx;
+			}
+		}
+
+		
+
+		
+
+		.tit {
+			font-weight: 800;
+			height: 50rpx;
+			font-size: 30rpx;
+			margin-bottom: 20rpx;
+			display: flex;
+			justify-content: space-between;
+
+			.span {
+				color: #6e6c76;
+				font-size: 24rpx;
+				display: flex;
+				justify-content: space-between;
+				/* margin-top: 12rpx; */
+			}
+		}
+
+		.newtishi {
+			width: 90%;
+			margin: 0 auto;
+			text-align: center;
+			padding-top: 40rpx;
+			font-size: 32rpx;
+
+			.dataloading:after {
+				overflow: hidden;
+				display: inline-block;
+				vertical-align: bottom;
+				animation: ellipsis 2s infinite;
+				content: "\2026";
+			}
+
+			@keyframes ellipsis {
+				from {
+					width: 2px;
+				}
+
+				to {
+					width: 15px;
+				}
+			}
+		}
+
+		.newState {
+			display: flex;
+			flex-wrap: wrap;
+			text-align: center;
+			margin: 0 -10rpx;
+
+			.item {
+				display: flex;
+				flex-wrap: nowrap;
+				margin: 10rpx;
+				width: 316rpx;
+				justify-content: flex-start;
+				padding: 20rpx 10rpx;
+				box-sizing: border-box;
+				border-radius: 4px;
+			
+				background-color: #fff;
+				font-size: 24rpx;
+				.info-text{
+					line-height: 76rpx;
+					padding-left: 30rpx;
+					font-size: 14px;
+					color: #666666;
+				}
+				.info-con {
+					padding-left: 30rpx;
+					text-align: left;
+					line-height: 40rpx;
+					color: #666666;
+					.active{
+						font-size: 36rpx;
+					}
+					.val{
+						font-size: 24rpx;
+					}
+				}
+
+				.item_info_img {
+					width: 30%;
+					text-align: center;
+
+					image {
+						width: 64rpx;
+						height: 64rpx;
+						margin-top: 10rpx;
+					}
+				}
+				
+			}
+		}
+
+		.btn-box {
+			text-align: center;
+			padding: 30rpx;
+		}
+
+		.field {
+			/deep/.uni-input-input {
+				border: 2rpx solid #FF0000;
+				border-radius: 24rpx;
+				width: 140px;
+				padding-left: 10rpx;
+				box-sizing: border-box;
+			}
+		}
+	}
+
+	/deep/.u-calendar__action {
+		display: flex;
+		justify-content: space-around;
+
+		.u-calendar__action__text {
+			line-height: 25px;
+		}
+	}
+
+	.red {
+		color: rgb(235, 103, 101);
+	}
+</style>

pages/cb/index/index.vue

@@ -1,44 +1,42 @@
 <template>
 	<view class="">
 		<view class="status_bar"></view>
-		<view class="" style="position: relative;top: 44px;">
+		<view class="" style="position: relative;top: 40px;">
 			<view style="position: fixed;z-index: 100;">
-				<uni-nav-bar @clickRight="clickRight" @clickLeft="clickLeft" left-icon="back" left-text="返回"
-					right-icon="search" title="测报系统"></uni-nav-bar>
-				<view class="inputs" :style="{'width':width+'rpx'}">
-					<input type="text" value="" placeholder="请输入设备ID或设备名称" v-model="imports" @input="searchinp"
-						class="inputbox" :clearable="false" />
-					<u-icon name="search" size="40" class="icon" @click="search"></u-icon>
+				<uni-nav-bar  @clickLeft="clickLeft" left-icon="back" left-text="返回"
+				 ></uni-nav-bar>
+				 <view class="bases_search">
+				 	<view class="bases_search_text" @click="clickRight">
+				 		<u-icon name="search" class="search" @click="search"></u-icon>
+				 		<input type="text" v-model="data.search" placeholder="设备ID搜索" @input="searchinput" disabled/>
+				 	</view>
+				 </view>
+				<view>
+					<image :src="'https://www.hnyfwlw.com:8006/bigdata_app'+'/image/cb/banner.jpg'" mode="widthFix"></image>
 				</view>
-				<view style="width: 100%;">
-					<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/cb/banner.jpg'" mode="widthFix">
-					</image>
-				</view>
-			</view>
-			<view class="tab-box">
-				<view v-for="(item,index) in equipArr" :key="item.type" v-if="item.tf" @click="tabClick(index)"
-					:class="['tab-item',active==index?'active':'']">
-					<text>{{item.name}}</text>
-					<text class="bottom-line"></text>
+				<view class="tab-box">
+					<!-- <view v-for="(item,index) in equipArr" :key="item.type" @click="tabClick(index,item)" :class="['tab-item',active==index?'active':'']">
+						<text>{{item.type_name}}</text>
+						<text class="bottom-line"></text>
+					</view> -->
+					<u-tabs :list="equipArr"  :current="active" active-color="#14A478" @change="tabClick"></u-tabs>
 				</view>
 			</view>
 			<view class="loading" v-if="loadingtf">
 				<image src="../../../static/images/ajax-loader.gif" mode="" class="img"></image>
 			</view>
-			<view class="" style="position: absolute;top: 180px;width: 100%;">
+			<view class="" style="position: absolute;top: 190px;width: 100%;">
 				<view class="content">
-					<template v-for="(item,index) in equipArr[active].list">
+					<template v-for="(item,index) in equipArr[active].list" >
 						<equipItem @click.native="itemClick(item)" v-bind:item="item" :key="index">
 							<view class="date">
-								<p>设备ID：{{item.imei || item.device_id}}</p>
+								<p>设备ID：{{item.imei||item.device_id}}</p>
 								<p>最新上报时间：{{item.uptime|timeFormat}}</p>
-								<view class="" style="display: flex;justify-content: space-between;"
-									v-if="(device_type == 3 || device_type==7) && showLastTime">
+								<view class="" style="display: flex;justify-content: space-between;" v-if="(device_type == 3 || device_type==7) && $QueryPermission(325)">
 									<p>设备到期情况：<span
 											:class="'prevents_item_bot_sapn'+item.device_expire">{{item.device_expiretext}}</span>
 									</p>
-									<p style="color: #3C84FE;" v-if="item.device_expire!=0" @click.stop="examine(item)">
-										查看详情</p>
+									<p style="color: #3C84FE;" v-if="item.device_expire!=0"  @click.stop="examine(item)">查看详情</p>
 								</view>
 							</view>
 						</equipItem>
@@ -46,8 +44,7 @@
 				</view>
 			</view>
 		</view>
-		<u-modal v-model="show" :title="title" :showConfirmButton="false"
-			:title-style="{'text-align':'left','padding-left':'10px','font-weight':700}" :mask-close-able="true">
+		<u-modal v-model="show" :title="title" :showConfirmButton="false" :title-style="{'text-align':'left','padding-left':'10px','font-weight':700}" :mask-close-able="true">
 			<view class="slot-content">
 				<rich-text :nodes="content"></rich-text>
 			</view>
@@ -56,29 +53,28 @@
 			<view class="backtop" @click="top" v-if="isTop">
 				<image src="../../../static/images/1.png" mode="" class="img0"></image>
 			</view>
+			
 			<view class="more">
-				<view class="box" @click="online" v-show="filtrateTF">
+				<view class="box" @click="findSearch(1)" v-show="filtrateTF">
 					<p>在线</p>
 				</view>
-				<view class="box" @click="offline" v-show="filtrateTF">
+				<view class="box" @click="findSearch(0)" v-show="filtrateTF">
 					<p>离线</p>
 				</view>
-				<view class="box" @click="complete" v-show="filtrateTF">
+				<view class="box" @click="findSearch('')" v-show="filtrateTF">
 					<p>全部</p>
 				</view>
 				<view @click="filtrate">
-					<image src="../../../static/images/b0bcdb0e3fe8690520f743aa8303bf2.png" mode="" class="img1">
-					</image>
+					<image src="../../../static/images/b0bcdb0e3fe8690520f743aa8303bf2.png" mode="" class="img1"></image>
 				</view>
 			</view>
+			
+			
 		</view>
 	</view>
 </template>
 
 <script>
-	import {
-		Debounce
-	} from "../../../util/anitthro.js"
 	import equipItem from "../../../components/equip-item/equip-item"
 	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
 	export default {
@@ -86,119 +82,34 @@
 			return {
 				active: 0, //默认选中虫情测报
 				equipArr: [{
-						name: '虫情测报',
-						type: 3, //3虫情测报灯 7孢子仪 4智能性诱
-						list: [],
-						pageIndex: 1,
-						tf: false,
-					}, {
-						name: '孢子仪',
-						type: 7, //3虫情测报灯 7孢子仪 4智能性诱
-						list: [],
-						pageIndex: 1,
-						tf: false,
-					}, {
-						name: '性诱测报',
-						type: 4, //3虫情测报灯 7孢子仪 4智能性诱
-						list: [],
-						pageIndex: 1,
-						device_model: 1,
-						tf: false,
-					},
-					{
-						name: '性诱2.0',
-						type: 10, //3虫情测报灯 7孢子仪 4智能性诱 性诱2.0
-						list: [],
-						pageIndex: 1,
-						tf: false
-					},
-					{
-						name: '性诱3.0',
-						type: 8, //3虫情测报灯 7孢子仪 4智能性诱 性诱2.0
-						list: [],
-						pageIndex: 1,
-						tf: false
-					}, {
-						name: '吸虫塔',
-						type: 12, //3虫情测报灯 7孢子仪 4智能性诱 性诱2.0
-						list: [],
-						pageIndex: 1,
-						tf: false
-					}, {
-						name: '病虫害可视监测',
-						type: 14, //3虫情测报灯 7孢子仪 4智能性诱 性诱2.0
-						list: [],
-						pageIndex: 1,
-						tf: false
-					}
-				],
-				device_type: '3', //筛选的设备id
+					name: ''
+				}],
 				isTop: false,
-				filtrateTF: false,
-				device_status: "",
-				width: 0, //顶部搜索栏宽度
-				imports: "", //搜索id
-				loadingtf: false, //loading
+				filtrateTF:false,
+				device_status:"",
+				loadingtf:false,//设备列表加载中
+				device_type:3,
 				show: false,
 				title: "",
 				content: "",
-				showLastTime: false,
+				searchinput:'',
+				data:{search:''}
 			}
 		},
-		onLoad() {
-			uni.getStorage({
-				key: "jurisdiction",
-				success: (res) => {
-					let list = res.data;
-					this.showLastTime = this.testId(325, JSON.parse(res.data));
-					console.log(this.showLastTime);
-					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 37:
-								this.equipArr[0].tf = true //"虫情测报灯"
-								this.getEquipList(0)
-								break
-							case 38:
-								this.equipArr[2].tf = true //"性诱测报"
-								this.getEquipList(2)
-								break
-							case 39:
-								this.equipArr[1].tf = true //"孢子仪"
-								this.getEquipList(1)
-								break
-							case 161:
-								this.equipArr[3].tf = true //"性诱2.0"
-								this.getxyEquipList(3)
-								break
-							case 198:
-								this.equipArr[4].tf = true //"性诱2.0"
-								this.getthxyEquipList(4)
-								break
-							case 171:
-								this.equipArr[5].tf = true //"性诱3.0"
-								this.getxctEquipList(5)
-								break
-							case 167:
-								this.equipArr[6].tf = true //"性诱3.0"
-								this.getEquipList(6)
-								break
-						}
-					}
-					for (var i = 0; i < this.equipArr.length; i++) {
-						if (this.equipArr[i].tf) {
-							this.active = i
-							this.device_type = this.equipArr[i].type
-							console.log(i)
-							break
-						}
-					}
+		computed:{
+			tabActiveStyle(){
+				return {
+					color: '#303133',
+					fontWeight: 'bold'
 				}
-			})
-
+			}
+		},
+		onLoad() {
+			this.equipArr = [{
+					name: ''
+				}]
+			this.usertype()
+			
 		},
 		onShow() {
 
@@ -212,7 +123,6 @@
 		onPullDownRefresh() {
 			this.equipArr[this.active].pageIndex = 1
 			this.equipArr[this.active].list = []
-
 			if (this.active == 4) {
 				this.getthxyEquipList(4)
 			} else if (this.active == 5) {
@@ -239,7 +149,7 @@
 			} else if (this.active == 3) {
 				this.getxyEquipList(3)
 			} else {
-				this.getEquipList(act)
+				this.getEquipList(this.active)
 			}
 		},
 		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
@@ -257,40 +167,50 @@
 			return true;
 		},
 		methods: {
-			testId(id, list) {
-				for (var i = 0; i < list.length; i++) {
-					if (list[i].children) {
-						var data = list[i].children
-						for (var j = 0; j < data.length; j++) {
-							if (data[j].children) {
-								var item = data[j].children
-								for (var k = 0; k < item.length; k++) {
-									if (item[k].pur_id == id) {
-										return true
-									}
-								}
-							}
-
-						}
+			search(){
+				
+			},
+			//获取用户测报设备列表
+			async usertype() { 
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=home.homes.user_device_type',
+					data:{
+						model:'测报'
 					}
-				};
+				})
+				console.log('设备列表',res)
+				// this.equipArr = res
+				this.equipArr.shift()
+				res.forEach(item=>{
+					item.name=item.type_name
+					item.list = []
+					item.pageIndex = 1
+					this.equipArr.push(item)
+				})
+				if (res.length) {
+					this.device_type =this.equipArr[0].id
+					this.choosePOST()
+				}
 			},
 			async getEquipList(act) {
+				
 				this.loadingtf = true
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
 					data: {
-						device_type_id: this.equipArr[act].type,
+						device_type_id: this.equipArr[act].id,
 						page: this.equipArr[act].pageIndex,
 						page_size: 10,
-						device_status: this.device_status,
-						device_id: this.imports,
-						device_model: this.equipArr[act].device_model ? this.equipArr[act].device_model : 0
+						device_status:this.device_status,
+						device_model: this.equipArr[act].device_model ? this.equipArr[act].device_model:0
 					}
 				})
-				this.loadingtf = false
+				this.loadingtf =false
 				console.log(res)
 				this.equipArr[act].list = [...this.equipArr[act].list, ...res.data]
+				this.equipArr[act].list.forEach(item => {
+					item.uptime = item.addtime;
+				})
 				for (var i = 0; i < this.equipArr[act].list.length; i++) {
 					if (this.equipArr[act].list[i].device_expire == 0) {
 						this.equipArr[act].list[i]['device_expiretext'] = "未到期"
@@ -300,82 +220,99 @@
 						this.equipArr[act].list[i]['device_expiretext'] = "即将到期"
 					}
 				}
-				this.equipArr[act].list.forEach(item => {
-					item.uptime = item.addtime;
-				})
-				console.log(this.equipArr[act].list)
+				console.log('处理后的结果',this.equipArr[act].list)
 			},
+			// 性诱2.0
 			async getxyEquipList(act) {
 				this.loadingtf = true
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
 					data: {
-						device_type_id: this.equipArr[act].type,
+						device_type_id: this.equipArr[act].id,
 						page: this.equipArr[act].pageIndex,
 						page_size: 10,
-						device_status: this.device_status,
-						device_id: this.imports,
+						device_status:this.device_status
 					}
 				})
-				this.loadingtf = false
+				this.loadingtf =false
 				console.log(res)
 				this.equipArr[act].list = [...this.equipArr[act].list, ...res.data]
-				// this.equipArr[act].list.forEach(item => {
-				// 	item.addtime = item.uptime;
-				// })
 				console.log(this.equipArr[act].list)
 			},
+			// 性诱3.0
 			async getthxyEquipList(act) {
 				this.loadingtf = true
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=forecast.worm_lamp.xy_three_list',
 					data: {
-						device_type_id: this.equipArr[act].type,
+						device_type_id: this.equipArr[act].id,
 						page: this.equipArr[act].pageIndex,
 						page_size: 10,
 						device_status: this.device_status,
-						device_id: this.imports,
 					}
 				})
 				this.loadingtf = false
 				console.log(res)
-				this.equipArr[act].list = [...this.equipArr[act].list, ...res.data];
-				// this.equipArr[act].list.forEach(item => {
-				// 	item.addtime = item.uptime;
-				// })
+				this.equipArr[act].list = [...this.equipArr[act].list, ...res.data]
 				console.log(this.equipArr[act].list)
 			},
+			// 吸虫塔
 			async getxctEquipList(act) {
 				this.loadingtf = true
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=forecast.worm_lamp.xct_list',
 					data: {
-						device_type_id: this.equipArr[act].type,
+						device_type_id: this.equipArr[act].id,
 						page: this.equipArr[act].pageIndex,
 						page_size: 10,
 						device_status: this.device_status,
-						device_id: this.imports,
 					}
 				})
 				this.loadingtf = false
 				console.log(res)
-				this.equipArr[act].list = [...this.equipArr[act].list, ...res.data];
-				// this.equipArr[act].list.forEach(item => {
-				// 	item.addtime = item.uptime;
-				// })
+				this.equipArr[act].list = [...this.equipArr[act].list, ...res.data]
+				console.log(this.equipArr[act].list)
 			},
 			tabClick(index) {
-				this.width = 0
-				this.imports = ""
+				
 				this.active = index;
-				this.device_type = this.equipArr[index].type
+				this.device_type = this.equipArr[index].id
+				this.equipArr[this.active].list = []
+				this.equipArr[this.active].pageIndex=1
+				this.choosePOST()
+			},
+			
+			choosePOST(){
+				let index = this.active
+				let typeId = this.device_type
+				if(typeId == 10){
+					// 性诱2.0
+					this.getxyEquipList(index)
+				}else if(typeId == 8){
+					// 性诱3.0
+					this.getthxyEquipList(index)
+				}else if(typeId == 12){
+					// 吸虫塔
+					this.getxctEquipList(index)
+				}
+				else{
+					// 测报接口
+					this.getEquipList(index)
+				}
 			},
 			clickRight() {
-				this.width = 600
+				console.log('点击了搜索')
+				uni.navigateTo({
+					url: "./search?device_type_id=" + this.device_type+'&pur_id=' + this.equipArr[this.active].pur_id
+				})
 			},
-			itemClick(item) {
-				item.type = this.equipArr[this.active].type
+			itemClick(itemOld) {
+				let item = JSON.parse(JSON.stringify(itemOld))
+				item.type= this.equipArr[this.active].id
+				item.pur_id = this.equipArr[this.active].pur_id||0
 				let data = JSON.stringify(item)
+			
+				
 				if (item.type == 10) {
 					uni.navigateTo({
 						url: '/pages/cb/xy2.0/particulars?info=' + data
@@ -393,7 +330,11 @@
 					uni.navigateTo({
 						url: '/pages/cb/sy/detail?detail=' + data
 					});
-				} else {
+				}else if (item.type == 32||item.type == 33||item.type == 34||item.type == 35) {
+					uni.navigateTo({
+						url: '/pages/cb/equip-detail/equip-detail-new?info=' + data
+					});
+				} else{
 					uni.navigateTo({
 						url: '/pages/cb/equip-detail/equip-detail?info=' + data
 					});
@@ -404,7 +345,7 @@
 					url: "../../index/index"
 				})
 			},
-			filtrate() {
+			filtrate(){
 				this.filtrateTF = !this.filtrateTF
 			},
 			top() {
@@ -413,78 +354,19 @@
 					duration: 500
 				})
 			},
-			online() {
-				this.equipArr[this.active].pageIndex = 1
-				this.equipArr[this.active].list = []
-				this.device_status = 1
-				if (this.active == 4) {
-					this.getthxyEquipList(4)
-				} else if (this.active == 5) {
-					this.getxctEquipList(5)
-				} else if (this.active == 3) {
-					this.getxyEquipList(3)
-				} else {
-					this.getEquipList(this.active)
-				}
-				this.filtrateTF = !this.filtrateTF
-			},
-			offline() {
-				this.equipArr[this.active].pageIndex = 1
-				this.equipArr[this.active].list = []
-				this.device_status = 0
-				if (this.active == 4) {
-					this.getthxyEquipList(4)
-				} else if (this.active == 5) {
-					this.getxctEquipList(5)
-				} else if (this.active == 3) {
-					this.getxyEquipList(3)
-				} else {
-					this.getEquipList(this.active)
-				}
-				this.filtrateTF = !this.filtrateTF
-			},
-			complete() {
-				this.equipArr[this.active].pageIndex = 1
-				this.equipArr[this.active].list = []
-				this.device_status = ""
-				if (this.active == 4) {
-					this.getthxyEquipList(4)
-				} else if (this.active == 5) {
-					this.getxctEquipList(5)
-				} else if (this.active == 3) {
-					this.getxyEquipList(3)
-				} else {
-					this.getEquipList(this.active)
-				}
+			findSearch(device_status){
+				
+				this.device_status = device_status	
+				this.equipArr[this.active].pageIndex=1
+				this.equipArr[this.active].list =[]
+				this.choosePOST()
 				this.filtrateTF = !this.filtrateTF
 			},
-			search() { //搜索按钮搜索
-				this.searchinp()
-			},
-			searchinp() { //自动搜索
-				Debounce(() => {
-					this.equipArr[this.active].pageIndex = 1
-					if (this.active == 4) {
-						this.equipArr[this.active].list = []
-						this.getthxyEquipList(this.active)
-					} else if (this.active == 5) {
-						this.equipArr[this.active].list = []
-						this.getxctEquipList(this.active)
-					} else if (this.active == 3) {
-						this.equipArr[this.active].list = []
-						this.getxyEquipList(this.active)
-					} else {
-						this.equipArr[this.active].list = []
-						this.getEquipList(this.active)
-					}
-				}, 1000)()
-			},
 			examine(e) {
 				// console.log(this)
 				this.show = true
 				this.title = e.device_expiretext
-				this.content =
-					`<p style="padding-left:10px;margin:10px 0;font-size:14px;">到期时间  ${this.timezhuan(e.device_expire_time)}
+				this.content = `<p style="padding-left:10px;margin:10px 0;font-size:14px;">到期时间  ${this.timezhuan(e.device_expire_time)}
 				</p><p style="font-size:14px;text-align:right;color:#3C84FE;margin-bottom:10px;padding-right:10px">注：请前往PC端进行充值</p>`
 			},
 			timezhuan(time) {
@@ -515,100 +397,59 @@
 		.content {
 			padding: 0 20rpx 20rpx 20rpx;
 			box-sizing: border-box;
-
-			.prevents_item_bot_sapn0 {
-				color: #00B075;
-			}
-
-			.prevents_item_bot_sapn1 {
-				color: #FF4747;
-			}
-
-			.prevents_item_bot_sapn2 {
-				color: #FFAB00;
-			}
 		}
 	}
 
 	image {
 		width: 100%;
 	}
-
-	.inputs {
-		height: 54rpx;
-		background-color: #E4E4E4;
-		border-radius: 27rpx;
-		position: absolute;
-		right: 20rpx;
-		top: 20rpx;
-		transition: width 0.5s;
-		overflow: hidden;
-		padding-top: 8rpx;
-		box-sizing: border-box;
-
-		.inputbox {
-			width: 85%;
-			text-indent: 1rem;
-			font-size: 26rpx;
-		}
-
-		.icon {
-			position: absolute;
-			top: 8rpx;
-			right: 26rpx;
-		}
-	}
-
-	.loading {
+	.loading{
 		position: fixed;
 		top: 440px;
 		width: 95%;
 		left: 2.5%;
 		text-align: center;
-
-		.img {
+		z-index: 100;
+		.img{
 			width: 300rpx;
 			height: 40rpx;
 		}
 	}
-
+	.bases_search {
+		width: 80%;
+		background-color: #FFFFFF;
+		position: absolute;
+		top: 10rpx;
+		left: 50%;
+		margin-left: -33%;
+		.bases_search_text {
+			width: 90%;
+			margin: 0 auto;
+			background-color: #F8F8F8;
+			height: 60rpx;
+			border-radius: 30rpx;
+			display: flex;
+			line-height: 60rpx;
+	
+			.search {
+				padding: 0 20rpx;
+				font-size: 34rpx;
+			}
+	
+			input {
+				width: 80%;
+				margin-top: 10rpx;
+				font-size: 28rpx;
+			}
+		}
+	}
 	.tab-box {
-		position: fixed;
-		top: 170px;
 		font-size: 30rpx;
 		line-height: 80rpx;
 		background-color: #ffffff;
 		width: 100vw;
 		z-index: 2;
-		overflow-y: hidden;
-		overflow-x: auto;
-		white-space: nowrap;
-
-		.tab-item {
-			cursor: pointer;
-			position: relative;
-			padding: 10rpx 20rpx;
-			text-align: center;
-			display: inline-block;
-
-			span {
-				display: inline-block;
-			}
-		}
-
-		.tab-item.active {
-			.bottom-line {
-				bottom: 0;
-				position: absolute;
-				display: inline-block;
-				width: 90rpx;
-				height: 6rpx;
-				left: 0;
-				right: 0;
-				margin: auto;
-				background: $uni-color-success;
-			}
-		}
+		margin-top: -10rpx;		
 	}
 
 	.top {
@@ -616,26 +457,22 @@
 		right: 10px;
 		bottom: 40px;
 		z-index: 100;
-
 		image {
 			width: 100rpx;
 			height: 100rpx;
 		}
-
-		.backtop {
+		.backtop{
 			display: flex;
 			justify-content: flex-end;
 			margin-bottom: 10rpx;
 		}
-
-		.more {
+		.more{
 			display: flex;
 		}
-
-		.box {
+		.box{
 			width: 80rpx;
 			height: 80rpx;
-			background-color: rgba(161, 161, 161, 0.45);
+			background-color: rgba(161,161,161,0.45);
 			border-radius: 50%;
 			text-align: center;
 			line-height: 80rpx;
@@ -644,4 +481,4 @@
 			color: #fff;
 		}
 	}
-</style>
+</style>

pages/cb/index/search.vue

@@ -44,11 +44,12 @@
 		data() {
 			return {
 				imports: "",
-				device_id: '',
+				device_type_id: '',
 				page: 1,
 				eqlistdata: [],
 				isTop: false,
-				none: false
+				none: false,
+				pur_id:0
 			}
 		},
 		methods: {
@@ -56,7 +57,7 @@
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
 					data: {
-						device_type_id: this.device_id,
+						device_type_id: this.device_type_id,
 						device_id: this.imports,
 						page: this.page
 					}
@@ -73,7 +74,7 @@
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
 					data: {
-						device_type_id: this.device_id,
+						device_type_id: this.device_type_id,
 						page: this.page,
 						page_size: 10,
 						device_id: this.imports,
@@ -134,11 +135,11 @@
 				Debounce(() => {
 					this.eqlistdata = []
 					this.page = 1
-					if (this.device_id == 10) {
+					if (this.device_type_id == 10) {
 						this.getxyEquipList()
-					} else if (this.device_id == 8) {
+					} else if (this.device_type_id == 8) {
 						this.getthxyEquipList()
-					} else if (this.device_id == 12) {
+					} else if (this.device_type_id == 12) {
 						this.getxctEquipList()
 					} else {
 						this.searchEquip()
@@ -148,11 +149,11 @@
 			search() {
 				this.eqlistdata = []
 				this.page = 1
-				if (this.device_id == 10) {
+				if (this.device_type_id == 10) {
 					this.getxyEquipList()
-				} else if (this.device_id == 8) {
+				} else if (this.device_type_id == 8) {
 					this.getthxyEquipList()
-				} else if (this.device_id == 12) {
+				} else if (this.device_type_id == 12) {
 					this.getxctEquipList()
 				} else {
 					this.searchEquip()
@@ -170,7 +171,8 @@
 				})
 			},
 			eqdetails(item) {
-				item.type = Number(this.device_id)
+				item.type = Number(this.device_type_id)
+				item.pur_id = this.pur_id
 				console.log(item)
 				let data = JSON.stringify(item)
 				if (item.type == 10) {
@@ -186,7 +188,11 @@
 					uni.navigateTo({
 						url: '/pages/cb/xctdetail/xctdetail?info=' + data
 					});
-				} else{
+				}else if (item.type == 32||item.type == 33||item.type == 34||item.type == 35) {
+					uni.navigateTo({
+						url: '/pages/cb/equip-detail/equip-detail-new?info=' + data
+					});
+				}else{
 					uni.navigateTo({
 						url: '/pages/cb/equip-detail/equip-detail?info=' + data
 					});
@@ -194,16 +200,17 @@
 			}
 		},
 		onLoad(option) {
-			this.device_id = option.device_id
+			this.device_type_id = option.device_type_id
+			this.pur_id = option.pur_id
 		},
 		onReachBottom() {
 			this.page++
 			console.log(1)
-			if (this.device_id == 10) {
+			if (this.device_type_id == 10) {
 				this.getxyEquipList()
-			} else if (this.device_id == 8) {
+			} else if (this.device_type_id == 8) {
 				this.getthxyEquipList()
-			} else if (this.device_id == 12) {
+			} else if (this.device_type_id == 12) {
 				this.getxctEquipList()
 			} else {
 				this.searchEquip()

pages/equipList/index.vue

@@ -189,7 +189,8 @@ export default {
         var obj = {
           name: res[i].type_name,
           id: res[i].id,
-		  device_model: res[i].device_model
+		  device_model: res[i].device_model,
+		  pur_id:res[i].pur_id
         };
         this.list.push(obj);
       }
@@ -220,6 +221,7 @@ export default {
       } else {
         this.eqlist();
       }
+	  
     },
     clickRight() {
       //搜索
@@ -239,7 +241,8 @@ export default {
     },
     historys(itemOld) {
     	let item = JSON.parse(JSON.stringify(itemOld))
-    	console.log("item", item);
+    	console.log("item", item,this.type_id);
+		item.pur_id = this.list[this.current].pur_id
       switch (this.type_id) {
 		// 水肥新设备
 		case 22:
@@ -305,14 +308,25 @@ export default {
 		uni.navigateTo({
 			url: "../cb/smallPest/smallPest?info=" + JSON.stringify(item),
 		});
-	  break;
+	  break; 
         case 4:
 		item.addtime = item.uptime;
           item.type = this.type_id;
           uni.navigateTo({
             url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item),
-          });
+          }); 
           break;
+		case 32:
+		case 33:
+		case 34:
+		case 35:
+		
+		item.addtime = item.uptime;
+		  item.type = this.type_id;
+		  uni.navigateTo({
+		    url: "../cb/equip-detail/equip-detail-new?info=" + JSON.stringify(item),
+		  }); 
+		  break;  
         case 7:
 		item.addtime = item.uptime;
           item.type = this.type_id;
@@ -514,7 +528,7 @@ export default {
     },
     upper() { },
     lower() {
-      console.log(11);
+      
       this.page++;
       if (this.type_id == 10) {
         this.xyeqlist(true);

pages/login/login.vue

@@ -1,6 +1,6 @@
 <template>
-	<view>
-		<view class="status_bar"></view>
+	<view class="bg-img" >
+		<!-- <view class="status_bar"></view> -->
 		<view class="apptitle" @longpress="logoTime">
 			{{$isneutral?"云飞智控":"智控"}}
 		</view>
@@ -336,10 +336,12 @@
 </script>
 
 <style lang="scss">
-	page{
+	.bg-img{
+		height: 100vh;
 		background-image: url(../../static/images/login/bg.png);
 		background-size: 100% 100%;
-		padding-top: 700rpx;
+		padding-top: 500rpx;
+		box-sizing: border-box;
 	}
 	.apptitle{
 		font-size: 52rpx;

pages/prevention/equipmentdetails.vue

@@ -22,15 +22,15 @@
 				</view>
 			</view>
 			<view class="control">
-				<view class="control_item" v-if="$QueryPermission(75)" @click="control">
+				<view class="control_item" v-if="$QueryPermission(316) || $QueryPermission(75)" @click="control">
 					<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/environment/8.png'" mode=""></image>
 					<p>设备控制</p>
 				</view>
-				<view class="control_item" v-if="$QueryPermission(77)" @click="charts">
+				<view class="control_item" v-if="$QueryPermission(318)|| $QueryPermission(77)" @click="charts">
 					<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/environment/10.png'" mode=""></image>
 					<p>历史数据</p>
 				</view>
-				<view class="control_item" v-if="$QueryPermission(76)" @click="sim">
+				<view class="control_item" v-if="$QueryPermission(317)|| $QueryPermission(76)" @click="sim">
 					<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/environment/9.png'" mode=""></image>
 					<p>SIM卡详情</p>
 				</view>

pages/prevention/sim.vue

@@ -1,6 +1,8 @@
 <template>
-	<view>
+	<view style="background-color: #f7f7f7;padding-top: 2rpx;height: calc(100vh - 90rpx);">
+		
 		<view>
+			
 			<view class="sim_info" v-if="iccidObj.data_iccid">
 				<view class="sim_info_loding" v-if="loding">
 					<image src="../../static/images/cb/6286299.gif" mode="" class="img"></image>
@@ -145,21 +147,25 @@
 				console.log(res);
 			},
 			async simid(data) { //获取sim卡号
+				this.loding2 = true
+			
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=forecast.send_control.device_sim_new',
 					data: {
 						d_id: data
 					}
 				})
+			
 				if(res.data_iccid == '' && res.photo_iccid == '') {
 					if(res.is_editor) {
 						this.isPhotoFault = true;
 						this.iccidObj = res;
-						this.siminfo = {
-							photo: {
-								iccid: ''
-							}
-						}
+						this.siminfo.photo.iccid = ''
+						// this.siminfo = {
+						// 	photo: {
+						// 		iccid: ''
+						// 	}
+						// }
 						this.loding2 = false;
 					} else {
 						uni.showToast({
@@ -179,14 +185,15 @@
 				} else if(res.is_editor) {
 					this.isPhotoFault = true;
 					this.iccidObj = res;
-					this.siminfo = {
-						photo: {
-							iccid: ''
-						}
-					}
+					this.siminfo.photo.iccid = ''
+					// this.siminfo = {
+					// 	photo: {
+					// 		iccid: ''
+					// 	}
+					// }
 					this.loding2 = false;
 				}
-				console.log(res);
+				console.log('sim=====',this.siminfores);
 
 			},
 			async simdata(data, type) { //获取sim信息
@@ -223,7 +230,7 @@
 					this.isPhotoFault = false;
 				}
 				this.siminfo[type] = res;
-				console.log(this.siminfo[type])
+				console.log('sim----',this.siminfo[type])
 			},
 			clickLeft() {
 				uni.navigateBack({
@@ -268,7 +275,8 @@
 		position: relative;
 		width: 90%;
 		margin: 30rpx auto;
-		box-shadow: 0 0 10rpx #bcb9ca;
+		// box-shadow: 0 0 10rpx #bcb9ca;
+		background: #fff;
 		padding: 30rpx 20rpx 50rpx;
 		border-radius: 20rpx;
 		box-sizing: border-box;

static/css/loading.scss

@@ -0,0 +1,76 @@
+/deep/ .el-loading-parent--relative {
+  position: relative !important;
+}
+
+/deep/ .el-loading-mask {
+  position: absolute;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, 0.8);
+  margin: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: opacity 0.3s;
+
+  .el-loading-spinner {
+    top: 50%;
+    margin-top: -21px;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+  }
+
+  .el-loading-spinner .el-loading-text {
+    color: #409eff;
+    margin: 3px 0;
+    font-size: 14px;
+  }
+
+  .el-loading-spinner .circular {
+    height: 42px;
+    width: 42px;
+    animation: loading-rotate 2s linear infinite;
+  }
+
+  .el-loading-spinner .path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke: #409eff;
+    stroke-linecap: round;
+  }
+
+  .el-loading-spinner i {
+    color: #409eff;
+  }
+
+  .el-loading-fade-enter,
+  .el-loading-fade-leave-active {
+    opacity: 0;
+  }
+
+  @keyframes loading-rotate {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  @keyframes loading-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -40px;
+    }
+
+    to {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -120px;
+    }
+  }
+}

util/loading.js

@@ -0,0 +1,52 @@
+import Vue from 'vue';
+/**
+ * 插入loading
+ */
+const insertDom = (el) => {
+  let dom = `<div class="el-loading-mask">
+        <div class="el-loading-spinner">
+          <svg viewBox="25 25 50 50" class="circular">
+            <circle cx="50" cy="50" r="20" fill="none" class="path"> </circle>
+          </svg>
+          <p class="el-loading-text">拼命加载中...</p>
+        </div>
+      </div>`;
+
+  //el添加相对定位
+  el.classList.add('el-loading-parent--relative');
+
+  // 插入到被绑定的元素内部
+  el.insertAdjacentHTML('afterbegin', dom);
+};
+
+/**
+ * 移除loading
+ */
+const removeDom = (el) => {
+  const ds = el.getElementsByClassName('el-loading-mask')[0];
+  if (ds) {
+    el.removeChild(ds);
+    el.classList.remove('el-loading-parent--relative');
+  }
+};
+
+// 更新是否显示
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    insertDom(el);
+  } else {
+    removeDom(el);
+  }
+};
+
+Vue.directive('loading', {
+  bind: function (el, binding, vnode) {
+    toggleLoading(el, binding);
+  },
+  //所在组件的 VNode 更新时调用--比较更新前后的值
+  update: function (el, binding) {
+    if (binding.oldValue !== binding.value) {
+      toggleLoading(el, binding);
+    }
+  }
+});