提交

api/worm.js

@@ -5,39 +5,43 @@ import request from '@/utils/request/index.js'
 
 //  虫情监测模块请求父类函数
 
-const wormRequest  = async (url, data) => {
+const wormRequest = async (url, data) => {
 	const res = await request.post(`api/api_gateway?method=forecast.worm_lamp.${url}`, data);
 	return res?.data;
 }
 
 // 测报灯列表
-export const getWormLampList = (params) => wormRequest('lamp_list',params);
+export const getWormLampList = (params) => wormRequest('lamp_list', params);
+
 
 
 // 测报灯详情
-export const getWormLampDetails = (params) => wormRequest('device_status_data',params);
+export const getWormLampDetails = (params) => wormRequest('device_status_data', params);
 
 // 害虫预警
-export const getPestWarningList = (params) => wormRequest('cbd_pest_warning',params);
+export const getPestWarningList = (params) => wormRequest('cbd_pest_warning', params);
 
 // 图片列表
-export const getWormImageList = (params) => request.post(`api/api_gateway?method=forecast.forecast_system.device_photo_list`, params);
+export const getWormImageList = async (params) => {
+	const res = await request.post(`api/api_gateway?method=forecast.forecast_system.device_photo_list`, params);
+	return res?.data;
+}
 
 // 害虫数据详情
-export const getWormDetails = (params) => wormRequest('worm_list',params);
+export const getWormDetails = (params) => wormRequest('worm_list', params);
 
 // 虫情分析-始见期
-export const getPestRaiseInfo = (params) => wormRequest('pest_raise_info',params);
+export const getPestRaiseInfo = (params) => wormRequest('pest_raise_info', params);
 
 // 虫情分析-折线图
-export const getPestStatisticsChart = (params) => wormRequest('pest_statistics_char_new',params);
+export const getPestStatisticsChart = (params) => wormRequest('pest_statistics_char_new', params);
 
 // 虫情分析-害虫图片溯源
-export const getPestImageSource = (params) => wormRequest('pest_image_source',params);
+export const getPestImageSource = (params) => wormRequest('pest_image_source', params);
 
 // 虫情分析-害虫基础信息溯源
-export const getPestBaseData = (params) => wormRequest('pest_base_data',params);
+export const getPestBaseData = (params) => wormRequest('pest_base_data', params);
 
 
 // 历史数据
-export const getWormLampHistory = (params) => wormRequest('device_history_data',params);
+export const getWormLampHistory = (params) => wormRequest('device_history_data', params);

filters/index.js

@@ -7,6 +7,6 @@ import * as util from '@/utils/utils.js'
  * @param {*} num 
  * @returns 
  */
-export function timeFrom(value, formatStr = 'yyyy-mm-dd') {
+export function timeFrom(value, formatStr = 'yyyy-mm-dd hh:MM:ss') {
   return util.timeFormat(value,formatStr);
 }

pages/weather/components/w-line-charts.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 气象历史数据 折线统计图 -->
-	<view>
-		<ui-charts ref="wLineCharts"  type="line" :ontouch="true" :opts="opts" :chartData="chartData">
+	<view >
+		<ui-charts ref="wLineCharts" type="line" :ontouch="true" :opts="opts" :chartData="chartData">
 		</ui-charts>
 	</view>
 </template>
@@ -16,6 +16,7 @@
 		name: 'w-line-charts',
 		data() {
 			return {
+				loading: true,
 				opts: {
 					loadingType: 0,
 					color: ["#317afd"],
@@ -66,7 +67,6 @@
 						}
 					}
 				},
-
 			}
 		},
 		props: {
@@ -77,24 +77,29 @@
 				}
 			},
 			width: {
-				type: [String],
-				default: 'required'
+				type: [Number],
+				default: 0
 			},
 			height: {
-				type: [String],
-				default: 'required'
+				type: [Number],
+				default: 0
 			},
 		},
 		watch: {
 			chartData: {
 				deep: true, // 深度监听
-				handler(val) {
-				}
+				handler(val) {}
 			}
 		},
-		mounted(){
-			this.opts.width=this.width; 
-			this.opts.height=this.height; 
+		async mounted() {
+			if (!this.width) {
+				return;
+			}
+			// console.log(11);
+			// await null;
+			// this.$refs['wLineCharts'].cWidth = this.width;
+			// this.$refs['wLineCharts'].cHeight = this.height;
+
 		},
 		methods: {}
 	};

pages/weather/details.vue

@@ -7,7 +7,7 @@
 				<view class="font-16 title">设备名称：{{deviceInfo.equip_name}}</view>
 				<view class="text">设备ID：{{deviceInfo.equip_name}}</view>
 				<view class="text text-ellipsis">地址：{{deviceInfo.equip_name}}</view>
-				<view class="text">最新上报时间：{{deviceInfo.uptime | timeFrom('yyyy-mm-dd hh:MM:ss')}}</view>
+				<view class="text">最新上报时间：{{deviceInfo.uptime | timeFrom}}</view>
 			</view>
 			<view class="font-12 state">{{deviceInfo.is_online?'在线':'离线'}}</view>
 		</view>
@@ -21,7 +21,7 @@
 		<!-- 数据列表 -->
 		<view class="latest-list">
 			<block v-for="(item,index) in latestList" :key="index">
-				<view class="ui-card latest-item" @click="openLatestChart(item)">
+				<view class="ui-card latest-item" @click="openLatestChart(item.el,item.text)">
 					<view class="icon"></view>
 					<view class="column-between text-info font-12">
 						<view class="text">{{item.text}}</view>
@@ -32,15 +32,23 @@
 		</view>
 		<!-- 数据列表end -->
 		<!-- 统计图24小时数据 -->
-		<uni-popup ref="chartsPopup" type="dialog" background-color="#fff">
-			<!-- <view class="charts-popup" v-if="chartshow">
-				<lineCharts :chartData="chartShowData"></lineCharts>
-			</view> -->
-			<view class="charts-popup">
+		<uni-popup ref="chartsPopup" type="dialog"  :mask-click="false">
+			
+			<view class="charts-popup" v-if="dayData">
+				<uni-icons type="clear" size="50" color="#999999" class="charts-icon" @click="closeChartsPopup"></uni-icons>
 				<view class="charts-title">
 					24小时数据
 				</view>
-				<lineCharts :chartData="chartShowData"></lineCharts>
+				<view class="charts-box">
+					<lineCharts :chartData="chartShowData" :width="200" :height="200"></lineCharts>
+				</view>
+				
+				<view class="charts-text">
+					当天最大值：{{dayData.max}} {{dayData.maxtime | timeFrom}}
+				</view>
+				<view class="charts-text">
+					当天最小值：{{dayData.min}} {{dayData.mintime | timeFrom}}
+				</view>
 			</view>
 		</uni-popup>
 	</view>
@@ -49,23 +57,26 @@
 <script>
 	import {
 		getWeatherDeviceDetail,
-		getWeatherDayData
+		getWeatherDayData,
+		getWeatherChart
 	} from '@/api/weather.js'
 	import lineCharts from './components/w-line-charts.vue' // 折线图
 	// 设备详情
 	export default {
 		data() {
 			return {
-				deviceId: '', // 设备id
 				deviceInfo: {}, // 设备信息
 				// 实时数据列表 { icon:'图标', text:'标题',valu7e:'值'}
 				latestList: [],
+				dayData: null, //当天24小时数据
+				dayDatas: [], // 24小时数据列表
 				// 统计图24小时数据
 				chartShowData: {
 					categories: [],
 					series: [],
 				},
-
+				// 统计图储存数据 格式 {通道号:数据列表}
+				chartData: null,
 			};
 		},
 		components: {
@@ -73,8 +84,9 @@
 		},
 		onLoad(options) {
 			this.deviceInfo = JSON.parse(options.params);
-			this.getLatestList();
-			this.getWeatherDayData();
+			this.getLatestList(); // 获取实时列表
+			this.getWeatherDayData(); // 获取24小时数据
+			this.getWeatherChart(); // 获取设备24小时折线图数据
 		},
 		methods: {
 			// 获取实时数据列表
@@ -85,13 +97,48 @@
 			},
 			// 获取24小时实时数据
 			async getWeatherDayData() {
-				let res = await getWeatherDayData({
+				const {
+					data
+				} = await getWeatherDayData({
 					device_id: this.deviceInfo.equip_id
 				});
+				this.dayDatas = data ?? [];
 			},
-			// 实时数据折线图信息
-			openLatestChart() {
+			/**
+			 * 根据通道号 字段el 获取实时数据折线图信息
+			 * @param {string} el 通道号
+			 * @param {string} name 标识名称
+			 */
+			openLatestChart(el,name) {
+				if(!this.chartData){
+					return this.$api.msg('数据加载中，请稍后');
+				}
+				this.dayData=this.dayDatas.find(item=>item.ekey==el);
+				this.chartShowData.series = [{
+					name:name,
+					data: this.chartData[el] ?? []
+				}]
 				this.$refs['chartsPopup'].open();
+			},
+			// 关闭弹框
+			closeChartsPopup(){
+				this.dayData=null;
+				this.$refs['chartsPopup'].close();
+			},
+			// 获取气象统计数据
+			async getWeatherChart() {
+				const {
+					times,
+					charts
+				} = await getWeatherChart({
+					device_id: this.deviceInfo.equip_id,
+					begin: this.$util.timeFrame('start'),
+					end: this.$util.timeFrame('end'),
+				});
+				this.chartData = charts; // 统计数据集合
+				console.log(this.chartData);
+				// 统计图显示数据
+				this.chartShowData.categories = times;
 			}
 		}
 
@@ -100,14 +147,33 @@
 
 <style lang="scss">
 	.charts-popup {
-		width: 500rpx;
-		height: 500rpx;
+		position: relative;
+		width: 600rpx;
+		height: 620rpx;
+		padding: 24rpx;
+		background-color: #fff;
+		border-radius: 12rpx;
+	}
+	.charts-icon{
+		position: absolute;
+		right: -20rpx;
+		top: -50rpx;
+	}
+	.charts-box{
+		width: 100%;
+		height: 450rpx;
+		overflow: hidden;
 	}
-
 	.charts-title {
 		font-size: $font-size-title;
 		color: $color-title;
 		line-height: $line-height-title;
 		text-align: center;
 	}
+
+	.charts-text {
+		font-size:24rpx;
+		color: $color-subtitle;
+		line-height: $line-height-subtitle;
+	}
 </style>

pages/worm/image.vue

@@ -2,51 +2,85 @@
 	<!-- 虫情监测查看图片 -->
 	<view class="ui-card px-13">
 		<!-- 选择时间 -->
-		<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" @maskClick="maskClick" />
+		<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-" @change="changeSearchTime" />
 		<!-- 选择时间end -->
 
 		<!-- 图片列表 -->
 		<view class="row wrap">
-			<block v-for="(item,index) in imgList" :key="index">
+			<block v-for="(item,index) in imageList" :key="index">
 				<view class="worm-img" @click="previewImage(index)">
-					<image class="pic" mode="aspectFill" :src="item"></image>
-					<view class="time">2022-9-2 20:12:57</view>
+					<image class="pic" mode="aspectFill" :src="item.indentify_photo"></image>
+					<view class="time">{{item.addtime | timeFrom}}</view>
 				</view>
 			</block>
 		</view>
 		<!-- 图片列表end -->
-
+		<ui-empty v-if="imageList.length==0"></ui-empty>
 	</view>
 </template>
 
 <script>
 	import {
-		getWormLampList
+		getWormImageList
 	} from '@/api/worm.js'
+	import {
+		timeFrame,
+		dateToUnix
+	} from '@/utils/utils.js'
 	// 虫情监测查看图片逻辑
 	export default {
 		data() {
 			return {
-				range: ['2021-02-1', '2021-3-28'],
-				imgList: ['https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
-					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
-					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
-					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
-				]
+				// 搜索条件
+				params: {
+					time_begin: timeFrame('start'), // 开始时间
+					time_end: timeFrame('end'), // 结束时间
+					device_id: '', //设备号
+					page: 1,
+					page_number: 20,
+				},
+				searchTime: ['', ''],
+				imageList: [], // 图片列表
+			}
+		},
+		onLoad(options) {
+			this.params.device_id = options.id;
+			this.getImageList();
+		},
+		// 触底请求
+		onReachBottom(e) {
+			if (this.imageList.length >= this.total) {
+				return;
 			}
+			this.params.page += 1;
+			this.getImageList();
 		},
 		methods: {
-			maskClick(e) {
-				console.log('----maskClick事件:', e);
+			// 加载图片列表
+			async getImageList() {
+				const {
+					data,
+					num
+				} = await getWormImageList(this.params);
+
+				this.imageList = [...this.imageList, ...data];
+				this.total = num ?? 0;
+			},
+			// 选择时间
+			changeSearchTime(time) {
+				this.params.time_begin = time[0] ? dateToUnix(time[0]) : timeFrame('start');
+				this.params.time_end = time[0] ? dateToUnix(time[1]) : timeFrame('end');
+				this.searchTime = time;
+				this.params.page = 1;
+				this.imageList=[];
+				this.getImageList();
 			},
 			// 预览图片
 			previewImage(index) {
+				let imgList = this.imageList.map(item => item.indentify_photo);
 				uni.previewImage({
 					current: index,
-					urls: this.imgList,
-					longPressActions(e) {
-
-					}
+					urls: imgList
 				});
 			},
 		}
@@ -69,6 +103,7 @@
 			display: block;
 			width: 314rpx;
 			height: 236rpx;
+			background-color: #f3f5f9;
 			border-radius: 4rpx;
 		}