Add - 哨兵设备接口联调

package.json

@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Cloud.git"
   },
   "dependencies": {
+    "@babel/helper-wrap-function": "^7.28.3",
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@supermap/iclient-leaflet": "^10.2.1",

src/api/components/supermap.js

@@ -39,4 +39,5 @@ export function queryMap(deptId) {
 export const iconList = {
   'marker': require('@/assets/icons/supermap/marker.png'),
   'positioning': require('@/assets/icons/supermap/positioning.png'), // 地图选点照片
+  'hzqy': require('@/assets/images/sentinel/hz_qy.png'),
 }

src/api/sentinel.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 查询监测设备列表(所有)
+export function listDeviceAll(params) {
+  return request({
+    url: `/center-monitor/device/listDeviceAll?brand=${params.brand}&pageNum=${params.pageNum}&deviceName=${params.deviceName}&pageSize=${params.pageSize}`,
+    method: 'get'
+  })
+}
+
+// 查询哨兵所有品牌(根据品牌去重)
+export function selectBrandList() {
+  return request({
+    url: `/center-monitor/device/selectBrandList`,
+    method: 'get'
+  })
+}
+
+// 查询哨兵设备统计详情
+export function selectDailyThreshold() {
+  return request({
+    url: `/center-monitor/device/selectDailyThreshold`,
+    method: 'get'
+  })
+}
+
+// 根据设备id查询设备详情
+export function selectByDeviceId({id}) {
+  return request({
+    url: `/center-monitor/device/selectByDeviceId/${id}`,
+    method: 'get'
+  })
+}

src/views/Sentinel.vue

@@ -18,7 +18,7 @@
 		<!--主体-->
 		<div class="con_left">
 			<div class="list_tit">设备列表</div>
-			<el-select v-model="value" placeholder="请选择">
+			<el-select v-model="listParams.brand" placeholder="请选择" @change="brandHasChanged" clearable>
 				<el-option
 						v-for="item in options"
 						:key="item.value"
@@ -29,29 +29,33 @@
 			<el-input
 					placeholder="请输入内容"
 					suffix-icon="el-icon-search"
-					v-model="input1">
+					v-model="listParams.deviceName">
 			</el-input>
 			<dl class="sp_list">
-				<dt><span class="dt1">序号</span><span class="dt2">设备名称</span><span class="dt3">定位</span></dt>
+				<dt>
+					<span class="dt1">序号</span>
+					<span class="dt2">设备名称</span>
+					<span class="dt3">定位</span>
+				</dt>
 				<div class="hei_scroll hei56">
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0101</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0105</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0102</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0103</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
-					<dd><span class="dt1">0104</span><span class="dt2">G068545</span><span class="dt3"><img src="../assets/images/sentinel/hz_list_d.png"/></span></dd>
+					<dd v-for="(e,idx) in deviceListSearch" :key="idx">
+						<span class="dt1">{{ idx + 1 }}</span>
+						<span class="dt2">{{ e.deviceName }}</span>
+						<span class="dt3">
+							<img
+								style="cursor: pointer;"
+								@click="dropLocation(e.latitude,e.longitude)"
+								src="../assets/images/sentinel/hz_list_d.png"
+							/>
+						</span>
+					</dd>
 				</div>
 			</dl>
 			<el-pagination
 					background
 					layout="prev, pager, next"
+					:current-page.sync="listParams.pageNum"
+					@current-change="pageNumHasChanged"
 					:total="100">
 			</el-pagination>
 		</div>
@@ -90,6 +94,12 @@
 	import Cookies from 'js-cookie'
 	import supermap from '@/components/supermap-2.5d' //超图
 	import {getUserProfile} from "@/api/system/user";
+	import {
+		listDeviceAll,
+		selectBrandList,
+		selectByDeviceId,
+		selectDailyThreshold
+	} from "@/api/sentinel"
 
 	import '../assets/styles/hz_body.css';
 
@@ -116,7 +126,30 @@
 			}
 		},
 		created() {
+			this.getListDeviceAll()
+			// 查询品牌
+			selectBrandList().then(res => {
+				if(res.data){
+					let brandoptions = []
+					res.data.forEach(e => {
+						brandoptions.push({
+							value:e,
+							label:e
+						})
+					})
+					this.options = brandoptions
+				}
+			})
+			selectByDeviceId({id:'05cb0481a4e441028f1a219c961176c8'}).then(res => {
+				// 品牌：brand
+				// 工作状态：workingStatusText
+				// 所属区域：address
+				// 设备名称：deviceName
+				// 设备类型：deviceTypeText
 
+			})
+			selectDailyThreshold().then(res => {
+			})
 		},
 		mounted() {
 			// 初始化地图数据
@@ -132,26 +165,83 @@
 				input:'',
 				input1: '',
 				title:'四平市智慧哨兵监管平台',
-				options: [{
-					value: '选项1',
-					label: '华生1'
-				}, {
-					value: '选项2',
-					label: '华生2'
-				}, {
-					value: '选项3',
-					label: '华生3'
-				}, {
-					value: '选项4',
-					label: '华生4'
-				}, {
-					value: '选项5',
-					label: '华生5'
-				}],
+				deviceList:[],       		 	// 设备列表
+				deviceListSearch:[],        	// 设备列表检索
+				listParams:{
+					brand:'',
+					deviceName:'',
+					pageNum: 1,
+        			pageSize: 10,
+				},								// 设备列表条件检索
+				options: [],
 				value: ''
 			}
 		},
 		methods: {
+			dropLocation(lat, lng) {
+				this.$refs.supermap.dropLocation(lat*1, lng*1)
+			},
+			pageNumHasChanged(e){
+				this.getListDeviceAll()
+			},
+			// 查询设备列表
+			getListDeviceAll(){
+				listDeviceAll(this.listParams).then(res => {
+					this.deviceList = res.rows
+					this.deviceListSearch = res.rows
+					let deviceMarkersList = []
+					// hz_qy
+					if (res.rows != null && res.rows.length > 0) {
+						for (let i = 0; i < res.rows.length; i++) {
+							let markersMap = {
+							lng: 124.59,
+							lat: 43.02,
+							icon: "hzqy",
+							bindPopupHtml: "",
+							click: "preview",
+							parameter: "",
+							keepBindPopup: false,
+							isAggregation: false,
+							};
+							markersMap.lng = res.rows[i].longitude*1;
+							markersMap.lat = res.rows[i].latitude*1;
+							markersMap.radius = res.rows[i].cameraRadius || '';
+							deviceMarkersList.push(markersMap);
+						}
+						setTimeout(() => {
+							this.$refs.supermap.clearM();
+							this.$refs.supermap.clearMRadius();
+							this.$refs.supermap.setMarkersRadius(deviceMarkersList);
+						}, 1000);
+					} else {
+						setTimeout(() => {
+							this.$refs.supermap.clearM();
+							this.$refs.supermap.clearMRadius();
+						}, 1000);
+					}
+				})
+			},
+			brandHasChanged(e){
+				this.getListDeviceAll()
+			},
+			/**
+			 * desc： 设备列表条件检索
+			 * @param {string} [val=''] 		// 设备名称
+			 * @param {string} [brandName=''] 	// 品牌
+			 * */
+			searchOptionHasChanged(val='',brandName=''){
+				this.deviceListSearch = [];
+				// 名称检索
+				for (let i in this.deviceList) {
+					if (this.deviceList[i].deviceName.indexOf(val) != -1) {
+						this.deviceListSearch.push(this.deviceList[i]);
+					}
+				}
+				// 品牌检索
+				if(brandName){
+					this.deviceListSearch = this.deviceListSearch.filter(v => v.brand == brandName)
+				}
+			},
 			getSuperMapUrl(){
 				getUserProfile().then(response => {
 					let mapDeptId=response.mapDeptId
@@ -338,6 +428,11 @@
 				myChart.setOption(option);
 			}
 		},
+		watch:{
+			['listParams.deviceName'](){
+				this.getListDeviceAll()
+			}
+		}
 	}
 </script>
 <style rel="stylesheet/scss" lang="scss">