APP基本完成

pages/cb/xylps/detail.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="bigBox">
 		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#14A478"></u-tabs>
-		<view class="infoBox">
+		<view class="infoBox" v-if="current == 0">
 			<view :class="['info',equipInfo.is_online==1?'on':'off']">
 				<p @click="copy(equipInfo.imei)">设备ID：{{equipInfo.imei}}
 					<image src="http://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode=""
@@ -22,7 +22,7 @@
 				<text class="title">设备控制</text>
 				<view class="controlCard">
 					<view class="preBtn" v-for="btn in btnList" :key="btn.class">
-						<view :class="`btnBox ${btn.class}`">
+						<view :class="`btnBox ${btn.class}`" @click="btnFun(btn.code)">
 							<text :class="btn.icon"></text>
 						</view>
 						<view>{{btn.text}}</view>
@@ -51,14 +51,175 @@
 				<text class="title">设备信息</text>
 				<view class="controlCard noBg">
 					<u-cell-group>
-						<u-cell-item v-for="btn in deviceDataList" :key="btn.icon"  :title="btn.text" :value="deviceObj[btn.key]" :arrow="false" :border-bottom="true"></u-cell-item>
+						<u-cell-item v-for="btn in deviceDataList" :key="btn.icon" :title="btn.text"
+							:value="deviceObj[btn.key]" :arrow="false" :border-bottom="true"></u-cell-item>
 					</u-cell-group>
 				</view>
 			</view>
 		</view>
-		<view class="">
-
+		<!-- 数据统计 -->
+		<view class="infoBox" v-if="current == 1">
+			<view class="cardInfo">
+				<text class="title">统计数据</text>
+				<view class="chartBox">
+					
+				</view>
+			</view>
+			<view class="cardInfo">
+				<text class="title">虫情分析</text>
+				<view class="chartBox">
+					<view class="pestInfo">
+						<view class="pest">
+							<text>害虫种类</text>
+							<text class="name">美国白蛾</text>
+						</view>
+						<view class="pest">
+							<text>日杀虫数量</text>
+							<text class="name">23头</text>
+						</view>
+						<view class="pest">
+							<text>处理意见</text>
+							<text class="name">当前害虫情况正常，请继续监测。</text>
+						</view>
+					</view>
+					<view class="pestStatus">
+						<view class="block active">
+							<view class="iconBox green">
+								<text class="yficonfont icon-small"></text>
+							</view>
+							<view class="blueText">
+								<view>平静期</view>
+								<view>0-30</view>
+							</view>
+						</view>
+						<view class="block">
+							<view class="iconBox yellow">
+								<text class="yficonfont icon-middle"></text>
+							</view>
+							<view class="yellowText">
+								<view>始发期</view>
+								<view>30-60</view>
+							</view>
+						</view>
+						<view class="block">
+							<view class="iconBox danger">
+								<text class="yficonfont icon-most"></text>
+							</view>
+							<view class="redText">
+								<view>爆发期</view>
+								<view>≥60</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 图片列表 -->
+		<view class="infoBox" v-if="current == 2">
+			<view class="imgList">
+				<view class="preImg" v-for="img in photoList" :key="img.addtime">
+					<text class="text">{{img.addtime}}</text>
+					<u-image width="100%" height="226rpx" :src="img.addr"></u-image>
+				</view>
+				<u-loadmore class="loadBox" :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadMore"/>
+			</view>
+			<view class="timeBox">
+				<u-cell-group>
+					<u-cell-item icon="calendar" :title="photoTimeRangeText" @click="showRangeTime = true"></u-cell-item>
+				</u-cell-group>
+			</view>
+			<u-calendar v-model="showRangeTime" mode="range" @change="changePhotoTime"></u-calendar>
 		</view>
+		<!-- 设备控制 -->
+		<view class="bgColor" v-if="current == 3">
+			<u-form :model="equipContrlForm1" :label-width="180">
+				<view class="" v-if="myuser_type">
+					<u-divider>管理员操作</u-divider>
+					<u-form-item label="升级文件地址" :label-width="220">
+						<u-input v-model="ota_url" />
+					</u-form-item>
+					<u-button size="mini" type="primary" @click="equipBtnControl('reboot')">重启</u-button>
+					<u-button size="mini" class="btn" type="primary" @click="equipBtnControl('update')">升级</u-button>
+					<u-divider>设备控制</u-divider>
+				</view>
+				<u-form-item label="设备名称"><u-input v-model="equipContrlForm1.devname" /></u-form-item>
+				<u-form-item label="高压包开关状态" :label-width="240">
+					<u-radio-group v-model="equipContrlForm1.dev_work_onoff">
+						<u-radio :name="1">开</u-radio>
+						<u-radio :name="0">关</u-radio>
+					</u-radio-group>
+				</u-form-item>
+				<u-form-item label="工作模式" :label-width="240">
+					<u-radio-group v-model="equipContrlForm1.dev_work_mode">
+						<u-radio :name="1">自动</u-radio>
+						<u-radio :name="2">手动</u-radio>
+						<u-radio :name="3">定时</u-radio>
+					</u-radio-group>
+				</u-form-item>
+				<u-form-item label="定时时长" :label-width="240">
+					<text @click="equipContrlForm1.show_st= true">{{equipContrlForm1.st}}</text>-
+					<text @click="equipContrlForm1.show_et= true">{{equipContrlForm1.et}}</text>
+					<u-picker mode="time" v-model="equipContrlForm1.show_st" :default-time="equipContrlForm1.st"
+						:params="params" @confirm="(e) => changeControlTime(e, 'st')"></u-picker>
+					<u-picker mode="time" v-model="equipContrlForm1.show_et" :default-time="equipContrlForm1.et"
+						:params="params" @confirm="(e) => changeControlTime(e, 'et')"></u-picker>
+				</u-form-item>
+				<u-form-item label="SIM卡号" :label-width="200">
+					<u-input v-model="equipContrlForm1.sim" />
+				</u-form-item>
+				<u-form-item label="心跳间隔(S)" :label-width="200">
+					<u-input v-model="equipContrlForm1.heart_time" type="number"/>
+				</u-form-item>
+				<u-form-item label="太阳能电压阈值(V)" :label-width="280">
+					<u-input v-model="equipContrlForm1.solar_threshold" type="number"/>
+				</u-form-item>
+				<u-form-item label="太阳能电压最大值(V)" :label-width="300">
+					<u-input v-model="equipContrlForm1.solarmax" type="number"/>
+				</u-form-item>
+				<u-form-item label="数据上传频率(min)" :label-width="300">
+					<u-input v-model="equipContrlForm1.upload_time" type="number"/>
+				</u-form-item>
+				<u-button size="medium " type="primary" @click="equipControlSubm">保存</u-button>
+			</u-form>
+		</view>
+		<!-- 拍照定时 -->
+		<u-modal v-model="photoTimeLayer" width="90%" :async-close="true" :show-cancel-button="true"
+			@confirm="devicePhotoTime">
+			<view class="slot-content">
+				<view class="expireBox">
+					<u-form>
+						<u-form-item :label="`时间${index + 1}`" :label-width="180"
+							v-for="(time, index) in photoTimeArray" :key="time.key">
+							<text @click="time.show = true">{{time.value}}</text> <u-button size="mini" type="error"
+								@click="removeTime(index)">删除</u-button>
+							<u-picker mode="time" v-model="time.show" :default-time="time.value" :params="params"
+								@confirm="(e) => changeSnapTime(e, time.key, index)"></u-picker>
+						</u-form-item>
+						<u-button size="mini" type="primary" @click="addTime(photoTimeArray.length)">添加</u-button>
+					</u-form>
+				</view>
+			</view>
+		</u-modal>
+		<!-- 信息素弹框 -->
+		<u-modal v-model="expireInfoLayer" width="90%" :async-close="true" :show-cancel-button="true"
+			@confirm="changeExpireFun">
+			<view class="slot-content">
+				<view class="expireBox">
+					<u-form ref="uForm">
+						<u-form-item label="信息素名称" :label-width="180">
+							<u-input v-model="decoy" type="text" :border="true" placeholder="请输入信息素名称" />
+						</u-form-item>
+						<u-form-item label="新信息素可使用时间" :label-width="280">
+							<u-radio-group v-model="xy_expire_time">
+								<u-radio v-for="(item, index) in expireTimeList" :key="index" :name="item.value">
+									{{item.label}}
+								</u-radio>
+							</u-radio-group>
+						</u-form-item>
+					</u-form>
+				</view>
+			</view>
+		</u-modal>
 	</view>
 </template>
 
@@ -66,26 +227,34 @@
 	export default {
 		data() {
 			return {
-				btnList:[{
-					text:'更换信息素',
-					icon:'yficonfont icon-weimingming-34',
-					class:'green'
-				},
-				{
-					text:'设备清虫',
-					icon:'yficonfont icon-chouchongbug',
-					class:'danger'
-				},
-				{
-					text:'拍照定时',
-					icon:'yficonfont icon-dingshi',
-					class:'blue'
-				},
-				{
-					text:'一键拍照',
-					icon:'yficonfont icon-paizhao-xianxing',
-					class:'yellow'
-				}],
+				myuser_type: '',
+				equipInfoImei: '',
+				equipInfo_d_id: '',
+				btnList: [{
+						text: '更换信息素',
+						icon: 'yficonfont icon-weimingming-34',
+						class: 'green',
+						code: 'changeInfo'
+					},
+					{
+						text: '设备清虫',
+						icon: 'yficonfont icon-chouchongbug',
+						class: 'danger',
+						code: 'clear'
+					},
+					{
+						text: '拍照定时',
+						icon: 'yficonfont icon-dingshi',
+						class: 'blue',
+						code: 'photoTime'
+					},
+					{
+						text: '一键拍照',
+						icon: 'yficonfont icon-paizhao-xianxing',
+						class: 'yellow',
+						code: 'tackPhoto'
+					}
+				],
 				list: [{
 					name: '基本信息'
 				}, {
@@ -95,7 +264,7 @@
 				}, {
 					name: '设备控制',
 				}],
-				current: 0,
+				current: 1,
 				equipInfo: {},
 				dataList: [{
 						text: '空气温度', // 中文
@@ -219,21 +388,136 @@
 				],
 				deviceLoading: true,
 				deviceObj: {},
+				photoTimeArray: [],
+				photoTimeLayer: false,
+				expireInfoLayer: false,
+				xy_expire_time: 2, // 时间
+				decoy: '', // 诱芯名称
+				expireTimeList: [{
+						label: '1个月',
+						value: 1,
+					},
+					{
+						label: '2个月',
+						value: 2,
+					},
+					{
+						label: '3个月',
+						value: 3,
+					},
+					{
+						label: '4个月',
+						value: 4,
+					},
+				],
+				params: {
+					year: false,
+					month: false,
+					day: false,
+					hour: true,
+					minute: true,
+					second: false
+				},
+				//设备控制
+				equipContrlForm1: {
+					devname: '',
+					heart_time: '',
+					solar_threshold: '',
+					solarmax: '',
+					upload_time: 0,
+					dev_work_mode: '',
+					dev_work_timeArray: '',
+					dev_work_onoff: '',
+					sim: '',
+					et: '',
+					st: '',
+					show_st: false,
+					show_et: false,
+					// st: '', //时控开始时间
+					// et: '', //时控结束时间
+					// dat_f: null ,//数据上传时间间隔
+					// ds:''//开关，1开机，0关机
+				},
+				ota_url: '',
+				photoList: [],
+				photoLoading:true,
+				showRangeTime: false,
+				photoTimeRange: '',
+				photoTimeRangeText: '请选择日期',
+				page: 1,
+				total: 0,
+				loadStatus:'',
+				iconType: 'flower',
+				loadText: {
+					loadmore: '点击加载更多',
+					loading: '努力加载中',
+					nomore: '没有更多啦~'
+				}
 			};
 		},
 		onLoad(option) {
-			this.equipInfo = JSON.parse(option.detail);
-			console.log(this.equipInfo);
+			this.equipInfoImei = JSON.parse(option.detail).imei;
+			this.equipInfo_d_id = JSON.parse(option.detail).d_id;
+			this.getEquipInfo();
+			// console.log(this.equipInfo);
 			this.getData();
 			this.getDeviceData();
+			uni.getStorage({
+				key:"myuser_type",
+				success:(res)=>{
+					if(Number(res.data) == 1){
+						this.myuser_type = true
+					}
+				}
+			})
 		},
 		methods: {
+			async getEquipInfo() {
+				let res = await this.$myRequest({
+					method: 'post',
+					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
+					data: {
+						device_id: this.equipInfoImei,
+						page: 1,
+						page_size: 10,
+						device_model: 0,
+						device_type_id: 25
+					},
+				})
+				console.log(res);
+				// console.log(res.data.data);
+				this.equipInfo = res.data[0];
+			},
+			btnFun(code) {
+				switch (code) {
+					case 'clear':
+						this.takePhoto(3);
+						break;
+					case 'tackPhoto':
+						this.takePhoto(1);
+						break;
+					case 'photoTime':
+						this.getPhotoTime();
+						this.photoTimeLayer = true;
+						break;
+					case 'changeInfo':
+						this.decoy = '';
+						this.xy_expire_time = 2;
+						this.expireInfoLayer = true;
+						break;
+					default:
+						break;
+				}
+				// if(code == 'clear') {
+				// 	this.takePhoto(3)
+				// } 
+			},
 			async getData() {
 				let res = await this.$myRequest({
 					method: 'post',
 					url: '/api/api_gateway?method=lpsxy.views.monitor_data',
 					data: {
-						device_id: this.equipInfo.imei,
+						device_id: this.equipInfoImei,
 					},
 				})
 				console.log(res);
@@ -245,15 +529,212 @@
 					method: 'post',
 					url: '/api/api_gateway?method=lpsxy.views.device_config',
 					data: {
-						d_id: this.equipInfo.d_id,
+						d_id: this.equipInfo_d_id,
 					},
 				})
 				console.log(res);
 				// console.log(res.data.data);
 				this.deviceObj = res;
 			},
+			// 获取当前拍照时间控制
+			async getPhotoTime() {
+				this.photoTimeLayer = true;
+				this.photoTimeArray = [];
+				let res = await this.$myRequest({
+					method: 'POST',
+					url: '/api/api_gateway?method=lpsxy.views.device_config',
+					data: {
+						d_id: this.equipInfo_d_id,
+						config_type: 1
+					},
+				})
+				if (res && Object.keys(res).length > 0) {
+					let data = res;
+					for (const key in data) {
+						if (key.includes('snaptime')) {
+							let text = (data[key] + '').padStart(4, '0');
+							// console.log(`${text.substring(0, 2)}${text.substring(2, 4)}`);
+							this.photoTimeArray.push({
+								value: `${text.substring(0, 2)}:${text.substring(2, 4)}`,
+								key,
+								show: false,
+							});
+						}
+					}
+					// console.log(this.photoTimeArray);
+				}
+			},
+			removeTime(index) {
+				this.photoTimeArray.splice(index, 1);
+			},
+			addTime(index) {
+				this.photoTimeArray.push({
+					value: `00:00`,
+					key: `snaptime${index}`,
+					show: false,
+				});
+			},
+			changeSnapTime(e, key, index) {
+				this.photoTimeArray[index].value = `${e.hour}:${e.minute}`
+			},
+			changeControlTime(e, type) {
+				this.equipContrlForm1[type] = `${e.hour}:${e.minute}`
+			},
+			async devicePhotoTime() {
+				// console.log(this.photoTimeArray);
+				let obj = {};
+				this.photoTimeArray.forEach((item, index) => {
+					if (item.value) {
+						obj[`snaptime${index + 1}`] = (item.value.replace(/:/g, "")) * 1;
+					}
+				});
+				// console.log(obj);
+				let res = await this.$myRequest({
+					method: 'post',
+					url: '/api/api_gateway?method=lpsxy.views.device_control',
+					data: {
+						device_id: this.equipInfoImei,
+						...obj,
+					},
+				})
+				if (res) {
+					uni.showToast({
+						title: '指令下发成功',
+						duration: 1000,
+						icon: "none"
+					});
+					// this.$message.success('指令下发成功');
+					this.photoTimeLayer = false;
+				} else {
+					uni.showToast({
+						title: '指令下发失败',
+						icon: "none",
+						duration: 1000
+					});
+					// this.$message.error(res.data.message);
+				}
+			},
+			async takePhoto(order_type) {
+				let res = await this.$myRequest({
+					method: 'post',
+					url: '/api/api_gateway?method=lpsxy.views.send_control',
+					data: {
+						device_id: this.equipInfoImei,
+						order_type,
+					},
+				})
+				if (res) {
+					uni.showToast({
+						title: '指令下发成功',
+						duration: 1000,
+						icon: "none"
+					});
+					// this.$message.success('指令下发成功');
+				} else {
+					uni.showToast({
+						title: '指令下发失败',
+						icon: "none",
+						duration: 1000
+					});
+					// this.$message.error(res.data.message);
+				}
+			},
+			async changeExpireFun() {
+				if (this.decoy == '') {
+					uni.showToast({
+						title: '请输入信息素名称',
+						duration: 1000,
+						icon: "none"
+					});
+					// this.$message.error('请输入信息素名称');
+					return;
+				}
+				let res = await this.$myRequest({
+					method: 'post',
+					url: '/api/api_gateway?method=lpsxy.views.update_xy_expire_time',
+					data: {
+						device_id: this.equipInfoImei,
+						xy_expire_time: this.xy_expire_time,
+						decoy: this.decoy,
+					},
+				})
+				if (res) {
+					uni.showToast({
+						title: '操作成功',
+						icon: "none",
+						duration: 1000
+					});
+					// this.$message.success('操作成功');
+					this.expireInfoLayer = false;
+					this.getEquipInfo();
+				} else {
+					uni.showToast({
+						title: '操作失败',
+						icon: "none",
+						duration: 1000
+					});
+					// this.$message.error(res.data.message);
+				}
+			},
+			async getPhotoList(search) {
+			  let { photoTimeRange } = this;
+			  // console.log(photoTimeRange);
+			 //  if(photoTimeRange) {
+				// this.page = 1;
+			 //  }
+			 // 当筛选的时候 清空图片列表
+			 if(search) {
+				this.page = 1;
+				this.photoList = [];
+			 }
+			  let res = await this.$myRequest({
+				method: 'post',
+				url: '/api/api_gateway?method=lpsxy.views.photo_list',
+				data: {
+				  d_id: this.equipInfo_d_id,
+				  page: this.page,
+				  start: photoTimeRange ? (photoTimeRange[0]/1000) : '',
+				  end: photoTimeRange ? (photoTimeRange[1]/1000) : '',
+				},
+			  })
+			  this.photoLoading = false;
+			  if (res) {
+			    this.photoList = [...this.photoList ,...res.data];
+			    this.total = res.count;
+				if(this.total > this.page * 10) {
+					this.loadStatus = 'loadmore'
+				} else if(this.total <= this.page * 10) {
+					this.loadStatus = 'nomore'
+				}
+			  } else {
+			   uni.showToast({
+			   	title: '请求失败',
+			   	icon: "none",
+			   	duration: 1000
+			   });;
+			  }
+			},
+			changePhotoTime(dateObj) {
+				console.log(dateObj);
+				this.photoTimeRangeText = `${dateObj.startDate}~${dateObj.endDate}`;
+				this.photoTimeRange = [new Date(dateObj.startDate).getTime(),new Date(dateObj.endDate).getTime()];
+				this.getPhotoList('search')
+			},
+			loadMore() {
+				this.page ++;
+				this.getPhotoList()
+			},
 			change(index) {
 				this.current = index;
+				if(index == 3) {
+					this.getControlInfo();
+				}else if(index == 2) {
+					this.photoList = [];
+					this.page = 1;
+					this.photoTimeRangeText = '请选择日期';
+					this.photoTimeRange = '';
+					this.getPhotoList();
+				}
 			},
 			copy(item) {
 				console.log(item)
@@ -264,17 +745,133 @@
 					}
 				});
 			},
+			async getControlInfo() {
+				let res = await this.$myRequest({
+					method: "POST",
+					url: "/api/api_gateway?method=lpsxy.views.device_config",
+					data: {
+						d_id: this.equipInfo_d_id,
+						config_type: 1
+					},
+				})
+				if (res && Object.keys(res).length > 0) {
+					let data = res;
+					console.log(data);
+					let newObj = {
+						...data,
+						show_st: false,
+						show_et: false,
+					};
+					newObj.dev_work_time = data.dev_work_time + '';
+					newObj.dev_work_time = newObj.dev_work_time.length > 7 ? newObj.dev_work_time : newObj
+						.dev_work_time.padStart(8, '0');
+					newObj.st = `${newObj.dev_work_time.substring(0, 2)}:${newObj.dev_work_time.substring(2, 4)}`;
+					newObj.et = `${newObj.dev_work_time.substring(4, 6)}:${newObj.dev_work_time.substring(6, 8)}`;
+					// console.log(newObj);
+					this.equipContrlForm1 = newObj;
+				}
+			},
+			async equipControlSubm() {
+			  let newForm = Object.assign({}, this.equipContrlForm1); //深拷贝
+			  newForm.dev_work_time = (newForm.st + newForm.et).replace(/:/g, "") * 1;
+			  console.log(newForm);
+			  // console.log(obj);
+			  let res = await this.$myRequest({
+				method: "POST",
+				url: "/api/api_gateway?method=lpsxy.views.device_control",
+				data: {
+				  device_id: this.equipInfoImei,
+				  ...newForm
+				},
+			  })
+			  if (res) {
+			  	uni.showToast({
+			  		title: '指令下发成功',
+			  		duration: 1000,
+			  		icon: "none"
+			  	});
+			  	// this.$message.success('指令下发成功');
+			  } else {
+			  	uni.showToast({
+			  		title: '指令下发失败',
+			  		icon: "none",
+			  		duration: 1000
+			  	});
+			  	// this.$message.error(res.data.message);
+			  }
+			},
+			async equipBtnControl(cmd) {
+				if (this.ota_url == '') {
+					uni.showToast({
+						title: '请输入地址',
+						duration: 1000,
+						icon: "none"
+					});
+					return
+				}
+				let op_type = '';
+				if (cmd == "reboot") {
+					var name = "重启";
+					op_type = 1;
+				} else if (cmd == "update") {
+					var name = "升级";
+					op_type = 2;
+				}
+				let res = await this.$myRequest({
+					method: "POST",
+					url: "/api/api_gateway?method=lpsxy.views.device_root_control",
+					data: {
+						op_type,
+						d_id: this.equipInfo_d_id,
+						ota_url: this.ota_url
+					},
+				});
+				if (res) {
+					uni.showToast({
+						title: '指令下发成功',
+						duration: 1000,
+						icon: "none"
+					});
+					// this.$message.success('指令下发成功');
+				} else {
+					uni.showToast({
+						title: '指令下发失败',
+						icon: "none",
+						duration: 1000
+					});
+					// this.$message.error(res.data.message);
+				}
+			}
 		}
 	}
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+	/deep/ .u-calendar__action{
+		display: flex;
+		justify-content: space-between;
+	}
+	.green {
+		background: #14a478;
+	}
+	
+	.yellow {
+		background: #f4a72f;
+	}
+	
+	.danger {
+		background: #ff5951;
+	}
+	
+	.blue {
+		background: #1890FF;
+	}
 	.bigBox {
 		position: relative;
 		width: 100vw;
-		height: 100vh;
+		height: calc(100vh - 88rpx);
 		background: #f7f7f7;
-		overflow: auto;
+		overflow: hidden;
 	}
 
 	.info {
@@ -330,7 +927,9 @@
 	.infoBox {
 		width: 100%;
 		padding: 10rpx 24rpx;
+		height: calc(100vh - 180rpx);
 		box-sizing: border-box;
+		overflow: auto;
 	}
 
 	.cardInfo {
@@ -349,7 +948,8 @@
 			margin-top: 30rpx;
 			background: #fff;
 			box-sizing: border-box;
-			.preBtn{
+
+			.preBtn {
 				display: flex;
 				align-items: center;
 				justify-content: space-around;
@@ -359,6 +959,7 @@
 				height: 80px;
 				font-size: 24rpx;
 			}
+
 			.btnBox {
 				display: flex;
 				align-items: center;
@@ -367,63 +968,185 @@
 				width: 96rpx;
 				border-radius: 96rpx;
 				color: #fff;
-				text{
+
+				text {
 					font-size: 20px;
 				}
 			}
-			.preInfo{
+
+			.preInfo {
 				display: flex;
 				align-items: center;
 				box-sizing: border-box;
 				padding: 32rpx !important;
 				background: #fff;
 				margin-bottom: 32rpx;
-				.btnBox{
+
+				.btnBox {
 					width: 72rpx;
 					height: 72rpx;
 					background: #14a478;
 				}
-				.textBox{
+
+				.textBox {
 					margin-left: 40rpx;
 					font-size: 32rpx;
-					.name{
+
+					.name {
 						font-size: 24rpx;
 						color: #999;
 					}
 				}
 			}
-			.green {
-			  background: #14a478;
+		}
+
+		.noBg {
+			background: none;
+		}
+
+		.u-border-bottom:after,
+		.u-border-left:after,
+		.u-border-right:after,
+		.u-border-top-bottom:after,
+		.u-border-top:after,
+		.u-border:after {
+			content: " ";
+			position: absolute;
+			left: 0;
+			top: 0;
+			pointer-events: none;
+			box-sizing: border-box;
+			-webkit-transform-origin: 0 0;
+			transform-origin: 0 0;
+			width: 199.8%;
+			height: 199.7%;
+			-webkit-transform: scale(.5);
+			transform: scale(.5);
+			border: .5px solid #E5EBE9;
+			z-index: 2;
+
+		}
+	}
+
+	.expireBox {
+		padding: 20rpx;
+		box-sizing: border-box;
+		max-height: 60vh;
+		overflow: auto;
+	}
+
+	.bgColor {
+		width: 100%;
+		box-sizing: border-box;
+		background: #fff;
+		padding: 0 20rpx;
+		.u-form{
+			height: calc(100vh - 168rpx);
+			overflow: auto;
+			box-sizing: border-box;
+			padding: 20rpx 0;
+		}
+		.btn {
+			margin-left: 20rpx;
+		}
+	}
+	.chartBox{
+		min-height: 400rpx;
+		background: #fff;
+		margin: 20rpx;
+		padding: 32rpx;
+		box-sizing: border-box;
+		background: #fff;
+		.pestInfo{
+			padding: 32rpx;
+			box-sizing: border-box;
+			.pest{
+				font-size: 24rpx;
+				color: #666;
+				margin-bottom: 16rpx;
+				.name{
+					margin-left: 10rpx;
+					color: #333;
+					font-weight: 600;
+				}
+			}
+		}
+		.pestStatus{
+			box-sizing: border-box;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background: #fff;
+			height: 284rpx;
+			.block{
+				display: flex;
+				align-items: center;
+				flex-direction: column;
+				justify-content: space-around;
+				width: 33%;
+				height: 100%;
+				text-align: center;
+			}
+			.active{
+				background: #f7f7f7;
+			}
+			.iconBox{
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 128rpx;
+				height: 128rpx;
+				border-radius: 128rpx;
+				color: #fff;
+				.yficonfont{
+					font-size: 80rpx;
+				}
 			}
-			.yellow {
-			  background: #f4a72f;
+			.blueText{
+				color: #14a478;
 			}
-			.danger {
-			  background: #ff5951;
+			.yellowText{
+				color: #f4a72f;
 			}
-			.blue{
-				background: #1890FF;
+			.redText{
+				color: #FF0000;
 			}
 		}
-		.noBg{
-			background: none;
+	}
+	.imgList{
+		height: calc(100vh - 320rpx);
+		overflow: auto;
+		box-sizing: border-box;
+		padding: 20rpx 0;
+		.preImg{
+			position: relative;
+			float: left;
+			width: 49%;
+			margin-right: 2%;
+			margin-bottom: 20rpx;
+			.text{
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 40rpx;
+				line-height: 40rpx;
+				text-align: center;
+				color: #fff;
+				background: rgba(0, 0, 0, .4);
+				font-size: 24rpx;
+				z-index: 2;
+			}
+		}
+		.preImg:nth-child(2n) {
+		    margin-right: 0; /* 每个第 3 个元素的右边距为 0 */
+		}
+		.loadBox{
+			width: 100%;
 		}
-		.u-border-bottom:after, .u-border-left:after, .u-border-right:after, .u-border-top-bottom:after, .u-border-top:after, .u-border:after{
-			    content: " ";
-			    position: absolute;
-			    left: 0;
-			    top: 0;
-			    pointer-events: none;
-			    box-sizing: border-box;
-			    -webkit-transform-origin: 0 0;
-			    transform-origin: 0 0;
-			    width: 199.8%;
-			    height: 199.7%;
-			    -webkit-transform: scale(.5);
-			    transform: scale(.5);
-			    border: .5px solid #E5EBE9;
-			    z-index: 2;
-			
+		/deep/ .u-calendar__action{
+			display: flex;
+			justify-content: space-between;
 		}
 	}
 </style>

util/api.js

@@ -7,7 +7,7 @@ export const myRequest = (options) => {
 		// BASE_URL = 'http://114.55.0.7:8002'//测试
 		// BASE_URL = process.env.NODE_ENV === 'development' ? "http://192.168.0.117:8003" : "http://8.136.98.49:8002"
 		// BASE_URL = process.env.NODE_ENV === 'development' ? "http://114.55.0.7:8002" : "http://8.136.98.49:8002"
-		BASE_URL = process.env.NODE_ENV === 'development' ? "http://192.168.0.117:8003" : "http://8.136.98.49:8002"
+		BASE_URL = process.env.NODE_ENV === 'development' ? "http://114.55.0.7:8002" : "http://8.136.98.49:8002"
 		// BASE_URL = 'http://192.168.1.77:8002'
 	}
 	// BASE_URL = 'http://192.168.1.52:8003'