浏览代码

接入两个外接设备

zhangsijie 2 年之前
父节点
当前提交
48e74732bf

+ 15 - 0
api/traplamp.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request/index.js'
+/**
+ * 外联测报灯
+ */
+
+// 可视监控数据请求父类函数
+const cameraRequest =async (url, data) => {
+	const res = await request.post(url, data);
+	return res?.data;
+}
+// 列表
+export const getList = (data) => cameraRequest(`api/api_gateway?method=device.device_picture.pp_device_list`,data);
+
+// 详情
+export const getDetail = (data) => cameraRequest(`api/api_gateway?method=device.device_picture.pp_cbd_img_list`, data);

+ 13 - 0
api/weatherother.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request/index.js'
+/**
+ * 外联测报灯
+ */
+
+// 可视监控数据请求父类函数
+const cameraRequest =async (url, data) => {
+	const res = await request.post(url, data);
+	return res?.data;
+}
+
+// 详情
+export const getDetail = (data) => cameraRequest(`api/api_gateway?method=device.device_picture.pp_qxz_data_list`, data);

+ 4 - 4
config/config.js

@@ -2,10 +2,10 @@ import cache from '@/utils/cache';
 
 let params = {
   // 请求根目录地址
-  // baseUrl: 'http://106.119.196.18:10006/',
-  baseUrl: 'https://qach.qadsjzx.com/',
-  // 文件地址
-  // fileUrl: 'http://106.119.196.18:10006',
+  // baseUrl: 'http://192.168.1.52:10004/',
+	baseUrl: 'https://qach.qadsjzx.com/',
+  // // 文件地址
+  // fileUrl: 'http://192.168.1.52:10004',
   fileUrl: 'https://qach.qadsjzx.com/',
 };
 // 配置信息

+ 0 - 1
main.js

@@ -9,7 +9,6 @@ App.mpType = 'app'
 import Videojs from 'video.js'
 import 'video.js/dist/video-js.min.css' 
 Vue.prototype.$video = Videojs 
-
 // 注册全局过滤器
 import * as filters from '@/filters' //全局过滤器
 Object.keys(filters).forEach(key => {

+ 37 - 1
pages.json

@@ -64,7 +64,7 @@
 		}, {
 			"path": "pages/camera/index",
 			"style": {
-				"navigationBarTitleText": "监控列表",
+				"navigationBarTitleText": "长势监测",
 				"enablePullDownRefresh": false
 			}
 
@@ -169,6 +169,42 @@
             }
             
         }
+        ,{
+            "path" : "pages/traplamp/traplamp",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "测报灯",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/weatherother/weatherother",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "气象站",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/traplamp/detail/detail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "查看图片",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/weatherother/detail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "数据详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 1 - 1
pages/camera/index.vue

@@ -8,7 +8,7 @@
 					<image class="pic" mode="aspectFill" :src="item.jk_live_img">
 					</image>
 					<view class="row-between p-10">
-						<text class="text">{{item.device_id}}</text>
+						<text class="text">{{item.device_name}}</text>
 						<text class="tips" :calss="item.status?'':'close'"></text>
 					</view>
 				</view>

+ 8 - 0
pages/index/index.vue

@@ -42,6 +42,14 @@
 					{
 						url:'/pages/warn/index',
 						text:'预警列表'
+					},
+					{
+						url:'/pages/traplamp/traplamp',
+						text:'测报灯'
+					},
+					{
+						url:'/pages/weatherother/weatherother',
+						text:'气象站'
 					}
 					
 				]

+ 159 - 0
pages/traplamp/detail/detail.vue

@@ -0,0 +1,159 @@
+<template>
+	<!-- 图片列表 -->
+	<view class="lamp-panel">
+		<!-- 选择时间范围 -->
+		<view class="mb">
+			<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-"
+				@change="changeSearchTime" :clear-icon="false"/>
+		</view>
+		<view class="lamp-list" v-if="lampList.length > 0">
+			<!-- 图片列表 -->
+			<block v-for="(item,index) in lampList" :key="index">
+				<view class="lamp-item" @click="openlampDetails(item.img_url)">
+					<image class="pic" mode="aspectFill" :src="item.thumb_url">
+					</image>
+					<view class="row-between p-10">
+						<text class="text">{{new Date(item.create_time).getTime()/1000 | timeFrom}}</text>
+					</view>
+				</view>
+			</block>
+			<!-- 图片列表end -->
+		</view>
+		<ui-empty v-else></ui-empty>
+		<!-- 图片放大 -->
+		<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,0.8)">
+			<view class="popup-content" style="width: 100vw;">
+				<image class="pic" mode="widthFix" :src="img_url">
+				</image>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		getDetail
+	} from '@/api/traplamp.js';
+	import {
+		timeFormat,
+		timeFrame,
+		timeFrameText
+	} from '@/utils/utils.js';
+	export default {
+		data() {
+			return {
+				params: {
+					start_time: timeFormat(timeFrame('start')), // 开始时间
+					end_time: timeFormat(timeFrame('end')), // 结束时间
+					device_id: '', //设备号
+					page: 1,
+					page_size: 10,
+				},
+				// 图片列表
+				lampList: [],
+				searchTime: [timeFrameText('start'), timeFrameText('end')],
+				total: 0, // 设备总数
+				img_url:'',
+			};
+		},
+		async onLoad(options) {
+			await this.$onLaunched;
+			this.params.device_id = options.id
+			this.getlampList();
+		},
+		onReachBottom(e) {
+			if (this.lampList.length >= this.total) {
+				return;
+			}
+			this.params.page += 1;
+			this.getlampList();
+		},
+		methods: {
+			// 时间选择
+			changeSearchTime(val) {
+				console.log(val)
+				if(val.length == 0) {
+					val = [timeFormat(timeFrame('start')), timeFormat(timeFrame('end'))];
+					this.searchTime = val
+				}
+				this.params.start_time = val[0];
+				this.params.end_time = val[1];
+				this.lampList = [];
+				this.page = 1;
+				this.getlampList()
+			},
+			// 获取图片列表
+			async getlampList() {
+				this.$api.loading('加载中...');
+				const res = await getDetail(this.params);
+				this.$api.hide();
+				if(res) {
+					this.lampList = [...this.lampList, ...res.data];
+					this.total = res.num
+				};
+			},
+			/**
+			 * 打开图片详情
+			 * @param {string} id 设备id
+			 */
+			openlampDetails(url) {
+				this.img_url = url;
+				this.$refs.popup.open()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	// 可视图片面板
+	.lamp-panel {
+
+		padding: 24rpx;
+		margin-top: 24rpx;
+		background-color: #fff;
+	}
+
+	.lamp-list {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	// 可视列表项
+	.lamp-item {
+		width: 336rpx;
+
+		margin-right: 28rpx;
+		margin-bottom: 24rpx;
+
+		border-radius: 12rpx;
+		border: 1rpx solid #F1F1F1;
+
+		&:nth-child(2n) {
+			margin-right: 0;
+		}
+
+		.pic {
+			display: block;
+			width: 336rpx;
+			height: 255rpx;
+
+			border-radius: 4rpx;
+		}
+
+		.text {
+			font-size: 20rpx;
+			color: #666666;
+		}
+
+		.tips {
+			width: 24rpx;
+			height: 24rpx;
+			background: #07F546;
+			border-radius: 100%;
+
+			&.close {
+				background: #e93f27;
+			}
+		}
+	}
+</style>

+ 77 - 0
pages/traplamp/traplamp.vue

@@ -0,0 +1,77 @@
+<template>
+	<!-- 外联测报灯列表 -->
+	<view>
+		<!-- 搜索框 -->
+		<!-- <ui-search placeholder="请输入设备ID" @confirm="searchDevice"></ui-search> -->
+		<!-- 搜索框end -->
+		<!-- 列表 -->
+		<block v-for="(item,index) in deviceList" :key="index">
+			<view class="ui-card forecast-item" @click="openDeviceDetails(item)">
+				<view class="flex-1 info">
+					<view class="font-16  title on">设备名称:{{item.device_name}}</view>
+					<view class="text">设备ID:{{item.device_id}}</view>
+					<!-- <view class="text">最新上报时间:{{item.addtime | timeFrom}}</view> -->
+				</view>
+				<!-- <ui-state :state="item.is_online"></ui-state> -->
+			</view>
+		</block>
+		<!-- 外联测报灯列表end -->
+		<ui-empty v-if="deviceList.length==0"></ui-empty>
+	</view>
+</template>
+
+<script>
+	import {
+		getList
+	} from '@/api/traplamp.js'
+	export default {
+		data() {
+			return {
+				// 列表搜索条件
+				params: {
+					page: 1,
+					page_size: 999,
+					device_type: 3 // 3外联测报灯站
+				},
+				deviceList: [], // 设备列表
+			};
+		},
+		async onLoad(options) {
+			await this.$onLaunched;
+			this.getDeviceList();
+			
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			this.refreshDeviceList();
+			uni.stopPullDownRefresh()
+		},
+		methods: {
+			// 刷新设备列表
+			refreshDeviceList(){
+				this.params.page = 1;
+				this.deviceList=[];
+				this.getDeviceList();
+			},
+			// 获取设备列表
+			async getDeviceList() {
+				this.$api.loading('加载中...');
+				const {
+					data
+				} = await getList(this.params);
+				this.$api.hide();
+				this.deviceList = data;
+			},
+			//详情
+			openDeviceDetails(item) {
+				console.log(item)
+				uni.navigateTo({
+					url:`detail/detail?id=${item.device_id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>

+ 2 - 0
pages/warn/index.vue

@@ -8,6 +8,7 @@
 			<view class="ui-card warn-item" v-if="warnTab==1">
 				<view class="title">{{item.ekey}}</view>
 				<view class="subtitle">设备ID:{{item.device_id}}</view>
+				<view class="subtitle">设备名称:{{item.device_name}}</view>
 				<view class="paragraph">
 					<text v-for="(val,key,i) in item.warning_content" :key="i">
 						{{key+':'+val}},
@@ -19,6 +20,7 @@
 			<view class="ui-card warn-item" v-if="warnTab==2 ||warnTab==3">
 				<view class="title">{{item.ekey}}</view>
 				<view class="subtitle">设备ID:{{item.device_id}}</view>
+				<view class="subtitle">设备名称:{{item.device_name}}</view>
 				<view class="paragraph">{{item.warning_content}}</view>
 				<text class="time">{{item.upltime | timeFrom}}</text>
 			</view>

+ 179 - 0
pages/weatherother/detail.vue

@@ -0,0 +1,179 @@
+<template>
+	<!-- 历史记录 -->
+	<view v-if="loading">
+		<!-- 统计图end -->
+		<!-- 历史数据列表 -->
+		<view class="ui-card history-panel">
+			<!-- 选择时间范围 -->
+			<view class="mb">
+				<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-"
+					@change="changeSearchTime" />
+			</view>
+			<!-- 历史数据表格 -->
+			<uni-table class="table-style" ref="table" :loading="pageLoading" emptyText="暂无更多数据">
+				<uni-tr>
+					<block v-for="(header,index) in historyHeader" :key="index">
+						<uni-th :width="index==0?120:80" align="center">{{header.text}}</uni-th>
+					</block>
+				</uni-tr>
+				<uni-tr v-for="(item, index) in historyList" :key="index">
+					<block v-for="(header) in historyHeader" :key="header.key">
+						<uni-td align="center" v-if="header.key == 'wind_o'">{{fengObj[item[header.key]]}}</uni-td>
+						<uni-td align="center" v-else-if="header.key == 'updateTime'">{{new Date(item.updateTime).getTime()/1000 | timeFrom}}</uni-td>
+						<uni-td align="center" v-else>{{item[header.key]}}</uni-td>
+					</block>
+				</uni-tr>
+			</uni-table>
+			<!-- 页码 -->
+			<uni-pagination :current="params.page" :total="total" title="标题文字" @change="changePagination" />
+			<!-- 页码end -->
+		</view>
+		<!-- 历史数据列表end -->
+	</view>
+</template>
+
+<script>
+	import {
+		getDetail
+	} from '@/api/weatherother.js'
+	import {
+		timeFormat,
+		timeFrame,
+		timeFrameText
+	} from '@/utils/utils.js'
+	export default {
+		data() {
+			return {
+				loading: false, // 页面加载状态
+				pageLoading: false, //分页加载状态
+				deviceId: '', // 设备id
+
+				// 历史记录搜索参数
+				params: {
+					start_time: timeFormat(timeFrame('start')), // 开始时间
+					end_time: timeFormat(timeFrame('end')), // 结束时间
+					device_id: '', //设备号
+					page: 1,
+					page_size: 10,
+				},
+				searchTime: [timeFormat(timeFrameText('start')), timeFormat(timeFrameText('end'))],
+				fengObj:{
+				    "N": "北",
+				    "NE": "东北",
+				    "E": "东",
+				    "SE": "东南",
+				    "S": "南",
+				    "SW": "西南",
+				    "W": "西",
+				    "NW": "西北",
+				    "C": "静风"
+				},
+				historyHeader: [{
+						text: '更新时间',
+						key:'updateTime'
+					},
+					{
+						text: '设备ID',
+						key:'devid'
+					},
+					{
+						text: '空气温度',
+						key:'air_t'
+					},
+					{
+						text: '空气湿度',
+						key:'air_rh'
+					},
+					{
+						text: '土壤温度',
+						key:'earth_t'
+					},
+					{
+						text: '土壤湿度',
+						key:'earth_rh'
+					},
+					{
+						text: '风向',
+						key:'wind_o'
+					},
+					{
+						text: '风速',
+						key:'wind_speed'
+					},
+					{
+						text: '降雨量',
+						key:'rainfull'
+					},
+					{
+						text: '蒸发量',
+						key:'vasp'
+					},
+					{
+						text: '光照强度',
+						key:'sunlight'
+					},
+					{
+						text: '大气压强',
+						key:'pressure'
+					},
+					{
+						text: '土壤EC值',
+						key:'ec'
+					},
+					{
+						text: '露点温度',
+						key:'ludian'
+					}
+				], // 头部列表
+				historyList: [], // 历史数据
+				total: 0, // 数据总数
+			};
+		},
+		components: {},
+		async onLoad(options) {
+			this.deviceId = options.id;
+			this.params.device_id = options.id;
+			this.$api.loading('加载中...');
+			await Promise.all([
+				this.getHistoryList(),
+			])
+			this.loading = true;
+			this.$api.hide();
+		},
+		methods: {
+			// 选择时间
+			changeSearchTime(time) {
+				this.params.start_time = time[0] ? dateToUnix(time[0]) : timeFrame('start');
+				this.params.end_time = time[0] ? dateToUnix(time[1]) : timeFrame('end');
+				this.searchTime = time;
+				this.params.page = 1;
+				this.getHistoryList();
+				this.getWeatherChart();
+			},
+			// 切换页码
+			changePagination(e) {
+				this.params.page = e.current;
+				this.getHistoryList();
+			},
+			// 获取历史数据
+			async getHistoryList() {
+				this.pageLoading = true;
+				const res = await getDetail(this.params);
+				this.historyList = res.data; // 历史数据
+				this.total = res.num;
+				this.pageLoading = false;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.history-chart {
+		padding: 32rpx 24rpx;
+	}
+
+	.history-panel {
+		padding: 24rpx 26rpx;
+		margin-bottom: 100rpx;
+	}
+</style>

+ 77 - 0
pages/weatherother/weatherother.vue

@@ -0,0 +1,77 @@
+<template>
+	<!-- 外联气象站列表 -->
+	<view>
+		<!-- 搜索框 -->
+		<!-- <ui-search placeholder="请输入设备ID" @confirm="searchDevice"></ui-search> -->
+		<!-- 搜索框end -->
+		<!-- 列表 -->
+		<block v-for="(item,index) in deviceList" :key="index">
+			<view class="ui-card forecast-item" @click="openDeviceDetails(item)">
+				<view class="flex-1 info">
+					<view class="font-16  title on">设备名称:{{item.device_name}}</view>
+					<view class="text">设备ID:{{item.device_id}}</view>
+					<!-- <view class="text">最新上报时间:{{item.addtime | timeFrom}}</view> -->
+				</view>
+				<!-- <ui-state :state="item.is_online"></ui-state> -->
+			</view>
+		</block>
+		<!-- 外联气象站列表end -->
+		<ui-empty v-if="deviceList.length==0"></ui-empty>
+	</view>
+</template>
+
+<script>
+	import {
+		getList
+	} from '@/api/traplamp.js'
+	export default {
+		data() {
+			return {
+				// 列表搜索条件
+				params: {
+					page: 1,
+					page_size: 999,
+					device_type: 5 // 5外联气象站站
+				},
+				deviceList: [], // 设备列表
+			};
+		},
+		async onLoad(options) {
+			await this.$onLaunched;
+			this.getDeviceList();
+			
+		},
+		//下拉刷新
+		onPullDownRefresh() {
+			this.refreshDeviceList();
+			uni.stopPullDownRefresh()
+		},
+		methods: {
+			// 刷新设备列表
+			refreshDeviceList(){
+				this.params.page = 1;
+				this.deviceList=[];
+				this.getDeviceList();
+			},
+			// 获取设备列表
+			async getDeviceList() {
+				this.$api.loading('加载中...');
+				const {
+					data
+				} = await getList(this.params);
+				this.$api.hide();
+				this.deviceList = data;
+			},
+			//详情
+			openDeviceDetails(item) {
+				console.log(item)
+				uni.navigateTo({
+					url:`detail?id=${item.device_id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>

+ 1 - 0
pages/worm/index.vue

@@ -11,6 +11,7 @@
 					<view class="font-16  title" :class="item.is_online?'on':'off'">
 						{{item.device_name?item.device_name:'测报灯'}}</view>
 					<view class="text">设备ID:{{item.imei}}</view>
+					<view class="text">设备名称:{{item.device_name}}</view>
 					<view class="text text-ellipsis">地址:{{item.address}}</view>
 					<view class="text">最新上报时间:{{ item.uptime | timeFrom}}</view>
 				</view>