绿普森性诱完成

pages/cb/bzy/equip-set/bzyhistoryile.vue

@@ -257,7 +257,8 @@
 				})
 			},
 			showColumn(id, xtitle, xinfo) {
-				var _self = this
+				var _self = this;
+				console.log(_self.cWidth, '_self.cWidth');
 				canvaColumnA = new uCharts({
 					canvasId: id,
 					type: 'line',

pages/cb/index/index.vue

@@ -31,7 +31,7 @@
 						<equipItem @click.native="itemClick(item)" v-bind:item="item" :key="index">
 							<view class="date">
 								<p>设备ID：{{item.imei || item.device_id}}</p>
-								<p>最新上报时间：{{item.addtime|timeFormat}}</p>
+								<p>最新上报时间：{{item.uptime|timeFormat}}</p>
 								<view class="" style="display: flex;justify-content: space-between;"
 									v-if="(device_type == 3 || device_type==7) && showLastTime">
 									<p>设备到期情况：<span
@@ -300,6 +300,9 @@
 						this.equipArr[act].list[i]['device_expiretext'] = "即将到期"
 					}
 				}
+				this.equipArr[act].list.forEach(item => {
+					item.uptime = item.addtime;
+				})
 				console.log(this.equipArr[act].list)
 			},
 			async getxyEquipList(act) {
@@ -317,6 +320,9 @@
 				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)
 			},
 			async getthxyEquipList(act) {
@@ -333,7 +339,10 @@
 				})
 				this.loadingtf = false
 				console.log(res)
-				this.equipArr[act].list = [...this.equipArr[act].list, ...res.data]
+				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)
 			},
 			async getxctEquipList(act) {
@@ -351,9 +360,9 @@
 				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.forEach(item => {
+				// 	item.addtime = item.uptime;
+				// })
 			},
 			tabClick(index) {
 				this.width = 0

pages/cb/xylps/detail.vue

@@ -47,11 +47,11 @@
 					</u-row>
 				</view>
 			</view>
-			<view class="cardInfo">
+			<view class="cardInfo" v-if="JSON.stringify(deviceObj) != '{}'">
 				<text class="title">设备信息</text>
 				<view class="controlCard noBg">
 					<u-cell-group>
-						<u-cell-item v-for="btn in deviceDataList" :key="btn.icon" :title="btn.text"
+						<u-cell-item v-for="btn in deviceDataList" :key="btn.text" :title="btn.text"
 							:value="deviceObj[btn.key]" :arrow="false" :border-bottom="true"></u-cell-item>
 					</u-cell-group>
 				</view>
@@ -62,7 +62,21 @@
 			<view class="cardInfo">
 				<text class="title">统计数据</text>
 				<view class="chartBox">
-					
+					<view class="timeBox">
+						<u-icon name="calendar" size="30" class="iconBox"></u-icon>
+						<view class="text" @click="showRangeTime = true">{{photoTimeRangeText}}</view>
+						<u-icon name="arrow-right" v-if="photoTimeRangeText == '请选择日期'"></u-icon>
+						<u-icon name="close" v-else @click="clearTimeFun('chart')"></u-icon>
+					</view>
+					<u-calendar v-model="showRangeTime" mode="range" @change="(e) => changePhotoTime(e, 'chart')"></u-calendar>
+					<canvas v-if="showCanvas" canvas-id="canvasColumnA" id="canvasColumnA" class="charts"
+						@touchstart="touchLineA($event)" @touchmove="moveLineA($event)" @touchend="touchEndLineA($event)"
+						disable-scroll=true
+						:style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}">
+					</canvas>
+					<view class="noEmpty" v-else>
+						暂无数据
+					</view>
 				</view>
 			</view>
 			<view class="cardInfo">
@@ -71,11 +85,11 @@
 					<view class="pestInfo">
 						<view class="pest">
 							<text>害虫种类</text>
-							<text class="name">美国白蛾</text>
+							<text class="name">{{analyInfo.decoy}}</text>
 						</view>
 						<view class="pest">
 							<text>日杀虫数量</text>
-							<text class="name">23头</text>
+							<text class="name">{{analyInfo.count}}头</text>
 						</view>
 						<view class="pest">
 							<text>处理意见</text>
@@ -117,18 +131,19 @@
 		<!-- 图片列表 -->
 		<view class="infoBox" v-if="current == 2">
 			<view class="imgList">
-				<view class="preImg" v-for="img in photoList" :key="img.addtime">
+				<view class="preImg" v-for="(img, index) in photoList" :key="img.addtime">
 					<text class="text">{{img.addtime}}</text>
-					<u-image width="100%" height="226rpx" :src="img.addr"></u-image>
+					<u-image width="100%" height="226rpx" :src="img.addr" @click="examine(index)"></u-image>
 				</view>
 				<u-loadmore class="loadBox" :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadMore"/>
 			</view>
 			<view class="timeBox">
-				<u-cell-group>
-					<u-cell-item icon="calendar" :title="photoTimeRangeText" @click="showRangeTime = true"></u-cell-item>
-				</u-cell-group>
+				<u-icon name="calendar" size="30" class="iconBox"></u-icon>
+				<view class="text" @click="showRangeTime = true">{{photoTimeRangeText}}</view>
+				<u-icon name="arrow-right" v-if="photoTimeRangeText == '请选择日期'"></u-icon>
+				<u-icon name="close" v-else @click="clearTimeFun('photo')"></u-icon>
 			</view>
-			<u-calendar v-model="showRangeTime" mode="range" @change="changePhotoTime"></u-calendar>
+			<u-calendar v-model="showRangeTime" mode="range" @change="(e)=> changePhotoTime(e, 'photo')"></u-calendar>
 		</view>
 		<!-- 设备控制 -->
 		<view class="bgColor" v-if="current == 3">
@@ -224,6 +239,8 @@
 </template>
 
 <script>
+	import uCharts from '../../../components/js_sdk/u-charts/u-charts/u-charts.js';
+	var canvaColumnA = null;
 	export default {
 		data() {
 			return {
@@ -235,36 +252,11 @@
 						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: '基本信息'
-				}, {
-					name: '数据分析'
-				}, {
-					name: '图片列表',
-				}, {
-					name: '设备控制',
 				}],
-				current: 1,
+				current: 0,
 				equipInfo: {},
 				dataList: [{
 						text: '空气温度', // 中文
@@ -293,7 +285,7 @@
 						icon: 'yficonfont icon-fengxiang',
 					},
 					{
-						text: '虫数',
+						text: '害虫数量',
 						unit: 'bugcnt',
 						data: '',
 						icon: 'yficonfont icon-chouchongbug',
@@ -452,10 +444,73 @@
 					loadmore: '点击加载更多',
 					loading: '努力加载中',
 					nomore: '没有更多啦~'
+				},
+				cWidth: '400',
+				cHeight: '400',
+				pixelRatio: 1,
+				showCanvas: false,
+				analyInfo:{
+					decoy:'',
+					count:''
 				}
 			};
 		},
 		onLoad(option) {
+			this.cWidth = uni.upx2px(650);
+			this.cHeight = uni.upx2px(500);
+			uni.getStorage({
+				key:"jurisdiction",
+				success:(res)=>{
+					let items = JSON.parse(res.data).filter((item) => {
+						return item.pur_id == 36
+					})
+					var arr = items[0].children
+					for (var i = 0; i < arr.length; i++) {
+						switch (arr[i].pur_id) {
+							case 338:
+							let newChildren = arr[i].children;
+							let hasImg = newChildren.some((item) => {
+								return item.pur_id == 341
+							})
+							let hasControl = newChildren.some((item) => {
+								return item.pur_id == 340
+							})
+							if(hasImg) {
+								this.list.push({
+									name: '数据分析'
+								}, {
+									name: '图片列表'
+								})
+								this.btnList.push(
+								{
+									text: '拍照定时',
+									icon: 'yficonfont icon-dingshi',
+									class: 'blue',
+									code: 'photoTime'
+								},
+								{
+									text: '一键拍照',
+									icon: 'yficonfont icon-paizhao-xianxing',
+									class: 'yellow',
+									code: 'tackPhoto'
+								})
+							}
+							if(hasControl) {
+								this.list.push({
+									name: '设备控制'
+								});
+								this.btnList.push({
+									text: '设备清虫',
+									icon: 'yficonfont icon-chouchongbug',
+									class: 'danger',
+									code: 'clear'
+								})
+							}
+							break
+						}
+					}
+				}
+			})
 			this.equipInfoImei = JSON.parse(option.detail).imei;
 			this.equipInfo_d_id = JSON.parse(option.detail).d_id;
 			this.getEquipInfo();
@@ -472,6 +527,106 @@
 			})
 		},
 		methods: {
+			showColumn(id, xtitle, xinfo) {
+				var _self = this;
+				console.log(_self.cWidth, '_self.cWidth');
+				canvaColumnA = new uCharts({
+					canvasId: id,
+					type: 'line',
+					legend: {
+						position: "top"
+					},
+					fontSize: 11,
+					background: '#FFFFFF',
+					pixelRatio: 1,
+					animation: true,
+					dataLabel: false,
+					categories: xtitle,
+					series: xinfo,
+					enableScroll: true, //开启图表拖拽功能
+					xAxis: {
+						disableGrid: true,
+						type: 'grid',
+						gridType: 'dash',
+						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
+						scrollShow: true, //新增是否显示滚动条，默认false
+						// scrollAlign: 'left', //滚动条初始位置
+						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
+						scrollColor: '#DEE7F7', //默认为 #A6A6A6
+					},
+					width: _self.cWidth * 1,
+					height: _self.cHeight * 1,
+					yAxis: {},
+					extra: {
+						line: {
+							type: 'curve'
+						}
+					}
+				});
+			},
+			touchLineA(e) {
+				console.log(e)
+				canvaColumnA.scrollStart(e);
+			},
+			moveLineA(e) {
+				canvaColumnA.scroll(e);
+			},
+			touchEndLineA(e) {
+				canvaColumnA.scrollEnd(e);
+				//下面是toolTip事件，如果滚动后不需要显示，可不填写
+				canvaColumnA.showToolTip(e, {
+					format: function(item, category) {
+						return category + ' ' + item.name + ':' + item.data
+					}
+				});
+			},
+			async lineChartPest(type) {
+				let {
+					photoTimeRange
+				} = this;
+				let res = await this.$myRequest({
+					method: 'post',
+					url: '/api/api_gateway?method=lpsxy.views.pest_count',
+					data: {
+						d_id: this.equipInfo_d_id,
+						start: photoTimeRange ? (photoTimeRange[0] / 1000) : '',
+						end: photoTimeRange ? (photoTimeRange[1] / 1000) : '',
+					},
+				})
+				if (res.length > 0) {
+					this.showCanvas = true;
+					let name = [];
+					let ydata = [];
+					res.forEach(item => {
+						name.push(item.date);
+						ydata.push(item.total);
+					});
+					var obj = [{
+						name: '诱虫数量',
+						data: ydata,
+						color: '#FF3F3F'
+					}]
+					if (type == 'search') {
+						// 当前是搜索
+						this.showColumn("canvasColumnA", name, obj)
+					} else {
+						this.showColumn("canvasColumnA", name, obj)
+					}
+				} else {
+					this.showCanvas = false;
+				}
+			},
+			examine(index) {
+				var imgarr = []
+				for (var i = 0; i < this.photoList.length; i++) {
+					imgarr.push(this.photoList[i].addr)
+				}
+				// console.log(imgarr)
+				uni.previewImage({
+					urls: imgarr,
+					current: index
+				});
+			},
 			async getEquipInfo() {
 				let res = await this.$myRequest({
 					method: 'post',
@@ -488,6 +643,19 @@
 				// console.log(res.data.data);
 				this.equipInfo = res.data[0];
 			},
+			
+			async getAnsyInfo() {
+				let res = await this.$myRequest({
+					method: 'post',
+					url: '/api/api_gateway?method=lpsxy.views.pest_info',
+					data: {
+						d_id: this.equipInfo_d_id,
+					},
+				})
+				console.log(res);
+				// console.log(res.data.data);
+				this.analyInfo = res;
+			},
 			btnFun(code) {
 				switch (code) {
 					case 'clear':
@@ -533,8 +701,8 @@
 					},
 				})
 				console.log(res);
-				// console.log(res.data.data);
 				this.deviceObj = res;
+				console.log(this.deviceObj);
 			},
 			// 获取当前拍照时间控制
 			async getPhotoTime() {
@@ -714,11 +882,24 @@
 			   });;
 			  }
 			},
-			changePhotoTime(dateObj) {
+			changePhotoTime(dateObj, type) {
 				console.log(dateObj);
 				this.photoTimeRangeText = `${dateObj.startDate}~${dateObj.endDate}`;
 				this.photoTimeRange = [new Date(dateObj.startDate).getTime(),new Date(dateObj.endDate).getTime()];
-				this.getPhotoList('search')
+				if(type == 'photo') {
+					this.getPhotoList('search')
+				} else {
+					this.lineChartPest('search')
+				}
+			},
+			clearTimeFun(type) {
+				this.photoTimeRangeText = '请选择日期';
+				this.photoTimeRange = '';
+				if(type == 'photo') {
+					this.getPhotoList('search');
+				} else {
+					this.lineChartPest('search')
+				}
 			},
 			loadMore() {
 				this.page ++;
@@ -734,6 +915,11 @@
 					this.photoTimeRangeText = '请选择日期';
 					this.photoTimeRange = '';
 					this.getPhotoList();
+				} else if(index == 1) {
+					this.photoTimeRangeText = '请选择日期';
+					this.photoTimeRange = '';
+					this.lineChartPest();
+					this.getAnsyInfo();
 				}
 			},
 			copy(item) {
@@ -869,7 +1055,7 @@
 	.bigBox {
 		position: relative;
 		width: 100vw;
-		height: calc(100vh - 88rpx);
+		height: calc(100vh);
 		background: #f7f7f7;
 		overflow: hidden;
 	}
@@ -927,14 +1113,35 @@
 	.infoBox {
 		width: 100%;
 		padding: 10rpx 24rpx;
-		height: calc(100vh - 180rpx);
+		height: calc(100vh - 80rpx);
 		box-sizing: border-box;
 		overflow: auto;
+		.timeBox{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 30rpx 32rpx;
+			border: 1rpx #E5EBE9 solid;
+			background: #fff;
+			color: #666;
+			font-size: 30rpx;
+			height: 100rpx;
+			box-sizing: border-box;
+			.iconBox{
+				display: flex;
+				align-items: center;
+				margin-top: 4rpx
+			}
+			.text{
+				width: 80vw;
+				margin-left: 16rpx;
+			}
+		}
 	}
 
 	.cardInfo {
 		margin-top: 24rpx;
-
+		width: 100%;
 		.title {
 			font-size: 28rpx;
 			color: #999;
@@ -964,12 +1171,14 @@
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				height: 96rpx;
-				width: 96rpx;
-				border-radius: 96rpx;
+				height: 48px;
+				width: 48px;
+				border-radius: 48px;
 				color: #fff;
 
-				text {
+				.text {
+					display: inline-block;
+					width: 80vw;
 					font-size: 20px;
 				}
 			}
@@ -1041,7 +1250,7 @@
 		background: #fff;
 		padding: 0 20rpx;
 		.u-form{
-			height: calc(100vh - 168rpx);
+			height: calc(100vh - 68rpx);
 			overflow: auto;
 			box-sizing: border-box;
 			padding: 20rpx 0;
@@ -1053,12 +1262,19 @@
 	.chartBox{
 		min-height: 400rpx;
 		background: #fff;
-		margin: 20rpx;
+		margin: 20rpx 0;
 		padding: 32rpx;
 		box-sizing: border-box;
 		background: #fff;
+		width: 100%;
+		.noEmpty{
+			height: 400rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;		
+		}
 		.pestInfo{
-			padding: 32rpx;
+			padding: 32rpx 0;
 			box-sizing: border-box;
 			.pest{
 				font-size: 24rpx;
@@ -1114,7 +1330,7 @@
 		}
 	}
 	.imgList{
-		height: calc(100vh - 320rpx);
+		height: calc(100vh - 220rpx);
 		overflow: auto;
 		box-sizing: border-box;
 		padding: 20rpx 0;

pages/equipList/index.vue

@@ -516,13 +516,14 @@ page {
 
 .textbox {
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 30rpx);
   padding: 20rpx 30rpx;
   box-sizing: border-box;
   border-top-left-radius: 80rpx;
   border-top-right-radius: 80rpx;
   margin-top: 30rpx;
   background-color: #f9f9f9;
+  box-sizing: border-box;
 }
 
 .inputs {
@@ -564,13 +565,13 @@ page {
 .listbox {
   display: flex;
   justify-content: space-around;
-  height: calc(100vh - 84px);
+  height: calc(100vh - 150rpx);
   margin-top: 20rpx;
 
   .listbox_left {
     background-color: #fff;
     padding: 20rpx;
-    width: 140rpx;
+    width: 180rpx;
     overflow: auto;
 
     .listbox_left_item {
@@ -593,7 +594,7 @@ page {
 }
 
 .list {
-  width: 70%;
+  width: calc(100vw - 300rpx);
   background-color: #fdfdfd;
   // margin-bottom: 100rpx;
   overflow-y: auto;
@@ -612,7 +613,7 @@ page {
       justify-content: space-between;
 
       .p1 {
-        width: 87%;
+        width: 86%;
         display: flex;
         justify-content: space-between;
         align-items: center;

static/iconfont/iconfont.css

@@ -6,7 +6,7 @@
 
 .yficonfont {
   font-family: "yficonfont" !important;
-  font-size: 16px;
+  font-size: 32rpx;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

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://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 = 'http://192.168.1.77:8002'
 	}
 	// BASE_URL = 'http://192.168.1.52:8003'