yangxiaokun 3 년 전
부모
커밋
f550b3e155
7개의 변경된 파일292개의 추가작업 그리고 13954개의 파일을 삭제
  1. 1 13696
      package-lock.json
  2. 1 1
      public/index.html
  3. 46 41
      src/router/index.js
  4. 3 5
      src/static/js/global.js
  5. 77 27
      src/views/devices/lp.vue
  6. 164 0
      src/views/map/lp.vue
  7. 0 184
      src/views/map/map.vue

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 13696
package-lock.json


+ 1 - 1
public/index.html

@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1.0">
 		<title>BMS</title>
 		<link rel="stylesheet" href="static/css/common.css">
-		<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ddbf8bc912a1c79be34e7d646f8fd726"></script> -->
+		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ddbf8bc912a1c79be34e7d646f8fd726"></script>
 	</head>
 	<body>
 		<div id="app"></div>

+ 46 - 41
src/router/index.js

@@ -1,56 +1,61 @@
 import {
-    createRouter,
-    createWebHashHistory
+	createRouter,
+	createWebHashHistory
 } from 'vue-router'
 import Login from "../views/login/login";
 import Layout from "../views/layout/layout";
 import Logs from "../views/monitor/logs";
 import Item from "../views/system/item";
 import Group from "../views/system/group";
-import Lps from "../views/devices/lp";
+import DevicesLp from "../views/devices/lp";
+import MapLp from "../views/map/lp";
 import Users from "../views/system/users";
 
 const routes = [{
-    path: "/",
-    name: "Layout",
-    component: Layout,
-    children: [
-        {
-            path: "/logs",
-            name: "Logs",
-            component: Logs
-        },
-        {
-            path: "/devices/lp",
-            name: "Lps",
-            component: Lps
-        },
-        {
-            path: "/groups",
-            name: "Group",
-            component: Group
-        },
-        {
-            path: "/users",
-            name: "Users",
-            component: Users
-        },
-        {
-            path: "/items",
-            name: "Item",
-            component: Item
-        }
-    ]
-},
-    {
-        path: "/login",
-        name: "Login",
-        component: Login,
-    }
+		path: "/",
+		name: "Layout",
+		component: Layout,
+		children: [{
+				path: "/logs",
+				name: "Logs",
+				component: Logs
+			},
+			{
+				path: "/devices/lp",
+				name: "DevicesLp",
+				component: DevicesLp
+			},
+			{
+				path: "/map/lp",
+				name: "MapLp",
+				component: MapLp
+			},
+			{
+				path: "/groups",
+				name: "Group",
+				component: Group
+			},
+			{
+				path: "/users",
+				name: "Users",
+				component: Users
+			},
+			{
+				path: "/items",
+				name: "Item",
+				component: Item
+			}
+		]
+	},
+	{
+		path: "/login",
+		name: "Login",
+		component: Login,
+	}
 ];
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes
+	history: createWebHashHistory(),
+	routes
 });
 
 export default router

+ 3 - 5
src/static/js/global.js

@@ -22,7 +22,7 @@ const URL = {
 		//分页列表
 		listPage: server + "device/lp/listPage.do",
 		//分布图-列表
-		list: server + "device/lp/list.do",
+		listAll: server + "device/lp/listAll.do",
 		//设备详情
 		detail: server + "device/lp/detail.do",
 	},
@@ -58,10 +58,8 @@ const URL = {
 		save: server + "group/save.do",
 		//查重
 		isRepeat: server + "group/isRepeat.do",
-		//禁用
-		forbidden: server + "group/forbidden.do",
-		//启用
-		permit: server + "group/permit.do",
+		//查询全部设备组
+		listAll: server + "group/listAll.do",
 		//更新
 		update: server + "group/update.do",
 	},

+ 77 - 27
src/views/devices/lp.vue

@@ -1,19 +1,16 @@
 <template>
 	<div class="zy-template">
-		<div class="zy-main-title">设备列表</div>
+		<div class="zy-main-title">设备列表-路牌</div>
 		<div class="zy-module">
 			<el-form ref="form" :model="query" label-width="60px">
 				<el-form-item label="设备码:" class="zy-search-form-item">
 					<el-input v-model="query.openNum" size="mini" clearable></el-input>
 				</el-form-item>
-
 				<el-form-item label="设备组:" class="zy-search-form-item">
-					<el-select v-model="query.groupId" filterable clearable placeholder="请输入设备号"
-						:filter-method="remoteMethod" size="mini">
+					<el-select v-model="query.groupId" filterable clearable placeholder=" " size="mini">
 						<el-option v-for="item in groups" :key="item" :value="item" />
 					</el-select>
 				</el-form-item>
-
 				<el-button type="primary" size="mini" @click="submit">查询</el-button>
 			</el-form>
 		</div>
@@ -21,22 +18,23 @@
 		<div class="zy-module">
 			<el-table :data="page.records" header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'
 				stripe>
-				<el-table-column prop="openNum" label="设备码" width="180" min-width="10%" />
-				<el-table-column prop="username" label="MQTT用户名" width="180" min-width="10%" />
-				<el-table-column prop="groupId" label="设备组" width="120" min-width="10%" />
-				<el-table-column prop="createTime" label="创建时间" width="180" min-width="10%" />
-				<el-table-column prop="battery" label="电量" width="80" min-width="10%" />
-				<el-table-column prop="s4g" label="信号" width="80" min-width="10%" />
-				<el-table-column label="状态" width="100" min-width="10%">
+				<el-table-column prop="openNum" label="设备码" min-width="180">
+					<template #default="scope">IMEI{{scope.row.openNum}}</template>
+				</el-table-column>
+				<el-table-column prop="groupId" label="设备组" min-width="120" />
+				<el-table-column prop="createTime" label="创建时间" min-width="180" />
+				<el-table-column prop="battery" label="电量" min-width="80" />
+				<el-table-column prop="s4g" label="信号" min-width="80" />
+				<el-table-column label="状态" min-width="100">
 					<template #default="scope">
 						<el-tag type="success" v-if="scope.row.status===1" size="small">在线</el-tag>
 						<el-tag type="danger" v-if="scope.row.status===0" size="small">离线</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column prop="updateTime" label="最近通讯时间" width="180" />
-				<el-table-column label="操作" width="80">
+				<el-table-column prop="updateTime" label="最近通讯时间" min-width="180" />
+				<el-table-column label="操作" min-width="80">
 					<template #default="scope">
-						<el-button @click="setGroups(scope.row.id)" type="text" size="small">详情</el-button>
+						<el-button @click="detailHandler(scope.row.openNum)" type="text" size="small">详情</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -44,6 +42,27 @@
 				:current-page="page.current" :total="page.total" :page-size="page.size" @current-change="pagination" />
 		</div>
 
+		<el-dialog title="设备详情" v-model="detailDialog" width="500px">
+			<el-descriptions :column="2" border>
+				<el-descriptions-item label="设备码:">{{detail.openNum}}</el-descriptions-item>
+				<el-descriptions-item label="唤醒间隔:">{{detail.wakeInt}}</el-descriptions-item>
+				<el-descriptions-item label="阈值:">{{detail.thresh}}</el-descriptions-item>
+				<el-descriptions-item label="温度:">{{detail.temp}}</el-descriptions-item>
+				<el-descriptions-item label="电量:">{{detail.battery}}</el-descriptions-item>
+				<el-descriptions-item label="信号:">{{detail.s4g}}</el-descriptions-item>
+				<el-descriptions-item label="上传类型:">{{detail.dataType}}</el-descriptions-item>
+				<el-descriptions-item label="X:">{{detail.x}}</el-descriptions-item>
+				<el-descriptions-item label="Y:">{{detail.y}}</el-descriptions-item>
+				<el-descriptions-item label="Z:">{{detail.z}}</el-descriptions-item>
+				<el-descriptions-item label="angleX:">{{detail.anglex}}</el-descriptions-item>
+				<el-descriptions-item label="angleY:">{{detail.angley}}</el-descriptions-item>
+				<el-descriptions-item label="angleZ:">{{detail.anglexz}}</el-descriptions-item>
+				<el-descriptions-item label="经度:">{{detail.lon}}</el-descriptions-item>
+				<el-descriptions-item label="纬度:">{{detail.lat}}</el-descriptions-item>
+				<el-descriptions-item label="定位模式:">{{detail.mode==1?'GPS':'基站'}}</el-descriptions-item>
+			</el-descriptions>
+		</el-dialog>
+
 	</div>
 </template>
 
@@ -59,10 +78,14 @@
 					current: 1,
 					size: 20,
 				},
+				groups: [], //设备组
+				detailDialog: false, //详情弹出框
+				detail: {}, //设备详情
 			};
 		},
 		mounted() {
-			this.getList();
+			this.getDevicesList();
+			this.getGroupList();
 		},
 		methods: {
 			/**
@@ -75,34 +98,61 @@
 					groupId: this.query.groupId,
 					openNum: this.query.openNum,
 				};
-				this.getList(param);
+				this.getDevicesList(param);
 			},
 			/**
 			 * 分页点击事件
 			 */
 			pagination: function(current) {
 				const param = {
-					current: current,
+					current: 1,
 					size: this.page.size,
+					groupId: this.query.groupId,
 					openNum: this.query.openNum,
-					type: this.query.type,
-					m: this.query.m,
 				};
-				this.getListPage(param);
+				this.getDevicesList(param);
+			},
+
+			/**
+			 * 查看详情
+			 */
+			detailHandler: function(openNum) {
+				console.log(openNum);
+				this.detailDialog = true;
+				this.getDeviceDetail(openNum);
 			},
 
 			/**
-			 * 获取日志列表
+			 * 获取设备列表
 			 */
-			getList: function(params) {
+			getDevicesList: function(params) {
 				this.$http.Get(this.$global.lp.listPage, params).then(res => {
-					console.log(res.data)
 					this.page = res.data;
 				})
 			},
+
+			/**
+			 * 获取设备详情
+			 */
+			getDeviceDetail: function(openNum) {
+				const params = {
+					openNum: openNum
+				}
+				this.$http.Get(this.$global.lp.detail, params).then(res => {
+					this.detail = res.data;
+				})
+			},
+
+			/**
+			 * 获取设备组
+			 */
+			getGroupList() {
+				this.$http.Get(this.$global.group.listAll, {}).then(res => {
+					this.groups = res.data.map(item => {
+						return item.code;
+					});
+				})
+			}
 		}
 	};
 </script>
-
-<style lang="scss">
-</style>

+ 164 - 0
src/views/map/lp.vue

@@ -0,0 +1,164 @@
+<template>
+	<div class="zy-template">
+		<div class="zy-main-title">设备列表-路牌</div>
+		<div class="zy-module">
+			<el-select v-model="selectedNum" filterable clearable placeholder=" " size="mini">
+				<el-option v-for="item in openNumList" :key="item" :value="item" />
+			</el-select>
+			<el-button type="primary" plain size="mini" style="margin-left: 30px;" @click="searchSubmit()">搜索
+			</el-button>
+		</div>
+
+		<div id="map" class="map">
+			<div class="map__panel" v-if="selectedDevice != null">
+				<p>设 备 号: {{selectedDevice.deviceId}}</p>
+				<p>电 量: {{selectedDevice.batteryNum}}</p>
+				<p>信号强度: {{selectedDevice.signalNum}}</p>
+				<p>定位模式: {{selectedDevice.mode==1?"GPS定位":"基站定位"}}</p>
+				<p>经 度: {{selectedDevice.lon}}</p>
+				<p>纬 度: {{selectedDevice.lat}}</p>
+				<p>移动速度: {{selectedDevice.speed}}</p>
+				<p>卫星颗数: {{selectedDevice.num}}</p>
+				<p>上传时间: {{selectedDevice.dataCreateTime}}</p>
+				<p>位置: {{selectedDevice.site}}</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				map: null, //地图对象
+				markers: [], //地图中已经有的标记
+				icon: '', //地图中的图标
+				selectedNum: '', //搜索选择的设备号
+				openNumList: [], // 选择框匹配的设备号
+				deviceList: [], //全部的设备集合
+				selectedDevice: null, //选中的设备对象
+			}
+		},
+		activated() {
+			this.initMap();
+			this.getDeviceList();
+		},
+		methods: {
+
+			/**
+			 * 初始化地图
+			 */
+			initMap: function() {
+				const option = {
+					zoom: 5
+				};
+				this.map = new AMap.Map('map', option);
+				//默认图标样式
+				this.icon = new AMap.Icon({
+					size: [45, 45],
+					image: "/static/img/point.png",
+					imageSize: [45, 45]
+				})
+			},
+
+			/**
+			 * 提交搜索
+			 */
+			searchSubmit: function() {
+				if (this.selectedNum === "") return;
+				this.deviceList.forEach(item => {
+					if (this.selectedNum === item.deviceId) {
+						this.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
+						this.selectedDevice = item;
+					}
+				})
+			},
+			
+			/**
+			 * 向地图中添加标记
+			 */
+			addMarkers: function(devices) {
+				const that = this;
+				const markers = [];
+				//清空原来的标记点
+				if (this.markers != null && this.markers.length !== 0) {
+					this.map.remove(this.markers);
+				}
+				devices.forEach(item => {
+					if (item.latGcj != null && item.lonGcj != null) {
+						markers.push(that.buildMarker(item))
+					}
+				});
+				var marker = new AMap.Marker({
+				    position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
+				    title: '北京'
+				});
+				this.map.add(marker);
+				this.markers = markers;
+			},
+
+			/**
+			 * 构建 地图标记物
+			 */
+			buildMarker: function(item) {
+				const that = this;
+				return new AMap.Marker({
+					position: [parseFloat(item.lonGcj), parseFloat(item.latGcj)],
+					icon: this.icon, // 添加 Icon 图标 URL
+					// title: item.deviceId,
+					// animation: "AMAP_ANIMATION_DROP"
+				})
+				// .on("click", function() {
+				// 	that.map.setZoomAndCenter(16, [parseFloat(item.lonGcj), parseFloat(item.latGcj)]);
+				// 	that.selectedDevice = item;
+				// })
+			},
+
+			/**
+			 * 获取设备列表
+			 */
+			getDeviceList: function() {
+				this.$http.Get(this.$global.lp.listAll, {}).then(res => {
+					this.deviceList = res.data;
+					console.log(res.data);
+					this.openNumList = res.data.map(item => {
+						return item.openNum;
+					});
+					this.addMarkers(this.deviceList);
+				});
+
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.zy-template {
+		height: 100%;
+
+		.map {
+			width: 100%;
+			height: 100%;
+			position: relative;
+
+			&__panel {
+				color: white;
+				box-sizing: border-box;
+				z-index: 9;
+				position: absolute;
+				right: 10px;
+				top: 10px;
+				width: 350px;
+				padding: 10px;
+				border-radius: 5px;
+				background: rgba(0, 0, 0, .5);
+
+				& p {
+					font-size: 14px;
+					line-height: 20px;
+					margin: 0 0 3px;
+				}
+			}
+		}
+	}
+</style>

+ 0 - 184
src/views/map/map.vue

@@ -1,184 +0,0 @@
-<template>
-    <div class="zy-template">
-        <div class="zy-module search">
-            <el-select v-model="selectedNum" filterable clearable placeholder="请输入设备号" :filter-method="remoteMethod"
-                       size="mini">
-                <el-option v-for="item in options" :key="item" :value="item"/>
-            </el-select>
-            <el-button type="primary" plain size="mini" style="margin-left: 30px;" @click="searchSubmit()">搜索
-            </el-button>
-        </div>
-        <div id="map" class="map">
-            <div class="map__panel" v-if="selectedDevice != null">
-                <p>设 备 号: {{selectedDevice.deviceId}}</p>
-                <p>电 量: {{selectedDevice.batteryNum}}</p>
-                <p>信号强度: {{selectedDevice.signalNum}}</p>
-                <p>定位模式: {{parseMode(selectedDevice.mode)}}</p>
-                <p>经 度: {{selectedDevice.lon}}</p>
-                <p>纬 度: {{selectedDevice.lat}}</p>
-                <p>移动速度: {{selectedDevice.speed}}</p>
-                <p>卫星颗数: {{selectedDevice.num}}</p>
-                <p>上传时间: {{selectedDevice.dataCreateTime}}</p>
-                <p>位置: {{selectedDevice.site}}</p>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                map: null, //地图对象
-                markers: [], //地图中已经有的标记
-                icon: '', //地图中的图标
-                selectedNum: '', //搜索选择的设备号
-                options: [], // 选择框匹配的设备号
-                deviceNumList: [], //全部的设备号集合
-                deviceList: [], //全部的设备集合
-                selectedDevice: null, //选中的设备对象
-            }
-        },
-        activated() {
-            this.initMap();
-            this.getLocationList();
-        },
-        methods: {
-
-            /**
-             * 初始化地图
-             */
-            initMap: function () {
-                const option = {
-                    zoom: 5
-                };
-                this.map = new AMap.Map('map', option);
-                //默认图标样式
-                this.icon = new AMap.Icon({
-                    size: [45, 45],
-                    image: "/static/img/point.png",
-                    imageSize: [45, 45],
-                })
-            },
-
-            /**
-             * 构建 地图标记物
-             */
-            buildMarker: function (item) {
-                const that = this;
-                return new AMap.Marker({
-                    position: [parseFloat(item.lon), parseFloat(item.lat)],
-                    icon: this.icon, // 添加 Icon 图标 URL
-                    title: item.deviceId,
-                    animation: "AMAP_ANIMATION_DROP"
-                }).on("click", function () {
-                    that.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
-                    that.selectedDevice = item;
-                })
-            },
-
-            /**
-             *下拉框模糊匹配方法
-             */
-            remoteMethod: function (query) {
-                if (query !== '') {
-                    this.options = this.deviceNumList.filter(item => {
-                        return item.indexOf(query) > -1;
-                    });
-                } else {
-                    this.options = [];
-                }
-            },
-            /**
-             * 提交搜索
-             */
-            searchSubmit: function () {
-                if (this.selectedNum === "") return;
-                this.deviceList.forEach(item => {
-                    if (this.selectedNum === item.deviceId) {
-                        this.map.setZoomAndCenter(11, [parseFloat(item.lon), parseFloat(item.lat)]);
-                        this.selectedDevice = item;
-                    }
-                })
-            },
-            /**
-             * 向地图中添加标记
-             */
-            addMarkers: function (devices) {
-                const that = this;
-                const markers = [];
-                //清空原来的标记点
-                if (this.markers != null && this.markers.length !== 0) {
-                    this.map.remove(this.markers);
-                }
-                devices.forEach(item => {
-                    markers.push(that.buildMarker(item))
-                });
-                this.map.add(markers);
-                this.markers = markers;
-            },
-            /**
-             * 转换定位模式
-             */
-            parseMode: function (mode) {
-                if (mode === 0) return "无法定位";
-                if (mode === 1) return "北斗定位";
-                if (mode === 2) return "基站定位";
-                if (mode === 3) return "GPS定位";
-            },
-
-            getLocationList: function () {
-                this.$http.Get(this.$global.getLatestLocation, {}).then(res => {
-                    this.deviceList = res.data;
-                    this.deviceNumList = this.deviceList.map(item => {
-                        return item.deviceId;
-                    });
-                    this.addMarkers(this.deviceList);
-                });
-
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    .zy-template {
-        position: relative;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        padding-top: 60px;
-
-        .search {
-            text-align: center;
-            top: 0;
-            padding: 10px 20px;
-            position: absolute;
-        }
-
-        .map {
-            width: 100%;
-            height: 100%;
-            position: relative;
-
-            &__panel {
-                color: white;
-                box-sizing: border-box;
-                z-index: 9;
-                position: absolute;
-                right: 10px;
-                top: 10px;
-                width: 350px;
-                padding: 10px;
-                border-radius: 5px;
-                background: rgba(0, 0, 0, .5);
-
-                & p {
-                    font-size: 14px;
-                    line-height: 20px;
-                    margin: 0 0 3px;
-                }
-            }
-        }
-    }
-</style>

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.