整理一半

public/static/css/common.css

@@ -1,90 +1,99 @@
 a {
-	text-decoration: none;
+    text-decoration: none;
 }
 
 ::-webkit-scrollbar {
-	width: 7px;
+    width: 7px;
 }
 
 ::-webkit-scrollbar-thumb {
-	background: #b9b9b9;
-	border-radius: 10px;
+    background: #b9b9b9;
+    border-radius: 10px;
 }
 
 ::-webkit-scrollbar-track-piece {
-	background: transparent;
+    background: transparent;
 }
 
 /*自定义公共样式*/
 html,
 body {
-	margin: 0;
-	padding: 0;
-	height: 100%;
-	width: 100%;
-	overflow: hidden;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }
 
 /* 表格样式 */
 .zy-table-header-cell {
-	height: 55px !important;
-	color: #8A8F99 !important;
-	font-size: 14px !important;
-	font-weight: normal !important;
-	background: #f5f7fa !important;
+    height: 55px !important;
+    color: #8A8F99 !important;
+    font-size: 14px !important;
+    font-weight: normal !important;
+    background: #f5f7fa !important;
 }
 
 .zy-table-cell {
-	font-size: 14px !important;
-	color: #1F2533 !important;
+    font-size: 14px !important;
+    color: #1F2533 !important;
 }
 
 .zy-table-pagination {
-	float: right;
-	margin-top: 30px;
+    float: right;
+    margin-top: 30px;
 }
 
 
 /* 模块通用样式 */
 .zy-module {
-	overflow: hidden;
-	box-sizing: border-box;
-	border-radius: 5px;
-	width: 100%;
-	background: white;
-	padding: 20px;
-	margin-bottom: 20px;
+    overflow: hidden;
+    box-sizing: border-box;
+    border-radius: 5px;
+    width: 100%;
+    background: white;
+    padding: 20px;
+    margin-bottom: 20px;
 }
 
 .zy-template {
-	width: 100%;
+    width: 100%;
 }
 
 /* 小标题 */
 .zy-main-title {
-	width: 100%;
-	height: 20px;
-	font-size: 15px;
-	overflow: hidden;
-	line-height: 20px;
-	margin-bottom: 20px;
-	box-sizing: border-box;
+    width: 100%;
+    height: 20px;
+    font-size: 15px;
+    overflow: hidden;
+    line-height: 20px;
+    margin-bottom: 20px;
+    box-sizing: border-box;
 }
 
 .zy-main-title::after {
-	border-radius: 5px;
-	content: "";
-	width: 4px;
-	height: 100%;
-	background: #0054FE;
-	float: left;
-	margin-right: 10px;
+    border-radius: 5px;
+    content: "";
+    width: 4px;
+    height: 100%;
+    background: #0054FE;
+    float: left;
+    margin-right: 10px;
 }
 
 /* 搜索框中表单样式 */
 .zy-search-form-item {
-	width: 250px;
-	display: inline-block;
-	margin-right: 30px;
-	margin-bottom: 10px !important;
+    width: 250px;
+    display: inline-block;
+    margin-right: 30px;
+    margin-bottom: 10px !important;
 }
+
+/*颜色*/
+.green {
+    color: #39b54a;
+}
+
+.red {
+    color: #e54d42;
+}

src/router/index.js

@@ -8,7 +8,7 @@ import Users from "../views/system/users.vue";
 import Devices from "../views/devices/devices";
 import Map from "../views/map/map";
 import Set from "../views/devices/set";
-import MqttLogs from "../views/devices/devices.vue";
+import MqttLogs from "../views/devices/logs.vue";
 
 const routes = [{
     path: "/",
@@ -36,7 +36,7 @@ const routes = [{
             component: MqttLogs
         },
         {
-            path: "/set",
+            path: "/set/:id",
             name: "Set",
             component: Set
         }

src/static/js/global.js

@@ -7,10 +7,12 @@ const URL = {
 	//验证token信息
 	verify: server + "admin/verify.do",
 	//获取用户列表
-	getUserList: server + "user/getListPage.do",
+	getUserList: server + "user/listPage.do",
 	//获取设备列表
 	getDeviceList: server + "device/listPage.do",
 
+	getLatestLocation: server + "location/getLatestLocation.do",
+
 	//查询mqtt日志
 	getMqttLogs: server + "logs/listPage.do",
 	//查询所有的指令
@@ -35,7 +37,8 @@ const URL = {
 	setSos: server + "set/sos.do",
 
 	//webSocket 地址
-	webSocket: "wss://www.mang406.top/webSocket/",
+	// webSocket: "wss://www.mang406.top/webSocket/",
+	webSocket: "ws://localhost:8081/webSocket/",
 };
 
 export default {

src/views/devices/devices.vue

@@ -7,6 +7,7 @@
                 </el-form-item>
                 <el-form-item label="状态" class="zy-search-form-item">
                     <el-select v-model="query.status" size="mini" placeholder=" ">
+                        <el-option label="全部" value="-1"/>
                         <el-option label="在线" value="1"/>
                         <el-option label="离线" value="0"/>
                     </el-select>
@@ -15,16 +16,17 @@
             </el-form>
         </div>
 
-        <div class="zy-template_table">
-            <el-table :data="page.records" max-height="800" stripe header-cell-class-name="zy-table-header-cell"
+        <div class="zy-module">
+            <el-table :data="page.records" stripe header-cell-class-name="zy-table-header-cell"
                       cell-class-name='zy-table-cell'>
                 <el-table-column prop="deviceNum" label="设备码" width="180" fixed/>
                 <el-table-column prop="deviceId" label="MQTT-clientId" width="300" fixed/>
-                <el-table-column label="状态" width="150">
+                <el-table-column label="状态" width="100">
                     <template #default="scope">
-                        {{scope.row.mode ===1?'在线':'离线'}}
+                        <span :class="scope.row.status===1?'green':'red'">{{scope.row.status ===1?'在线':'离线'}}</span>
                     </template>
                 </el-table-column>
+                <el-table-column prop="lastOnlineTime" label="最后一次在线时间" width="180"/>
                 <el-table-column prop="batteryNum" label="电量" width="100"/>
                 <el-table-column prop="signalNum" label="信号" width="100"/>
                 <el-table-column prop="lon" label="经度" width="150"/>
@@ -38,14 +40,15 @@
                 <el-table-column prop="uploadTime" label="定位时间" width="180"/>
                 <el-table-column prop="site" label="逆地理位置" width="400"/>
                 <el-table-column prop="createTime" label="创建时间" width="180"/>
-                <el-table-column label="操作" width="100">
-                    <template slot-scope="scope">
-                        <el-button @click="handleSet(scope.row.clientId)" type="text" size="small">设置</el-button>
+                <el-table-column label="操作" width="100" fixed="right">
+                    <template #default="scope">
+                        <el-button @click="handleSet(scope.row.deviceId)" type="text" size="small">调试</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
-            <el-pagination class="pagination" background layout="prev, pager, next" :current-page="page.current"
+            <el-pagination class="zy-table-pagination" background layout="prev, pager, next"
+                           :current-page="page.current"
                            :total="page.total" :page-size="page.size" @current-change="pagination"/>
         </div>
 
@@ -66,17 +69,21 @@
                 },
             };
         },
-        mounted: function () {
+
+        mounted() {
             this.getDeviceList();
         },
+
         methods: {
             /**
              * 提交查询条件
              */
             submit: function () {
                 const params = {
-                    num: this.condition.num,
-                    status: this.condition.status
+                    num: this.query.num,
+                    status: this.query.status,
+                    current: 1,
+                    size: this.page.size,
                 };
                 this.getDeviceList(params);
             },
@@ -86,12 +93,12 @@
              */
             pagination: function (current) {
                 const params = {
-                    num: this.condition.num,
-                    status: this.condition.status,
+                    num: this.query.num,
+                    status: this.query.status,
                     current: current,
                     size: this.page.size,
                 };
-                this.getUserList(params);
+                this.getDeviceList(params);
             },
 
             /**
@@ -110,21 +117,14 @@
              */
             handleSet: function (deviceId) {
                 this.$router.push({
-                    name: 'Set',
-                    params: {
-                        deviceId: deviceId
-                    }
-                })
+                    path: "/set/" + deviceId,
+                });
             }
         }
     };
 </script>
 
 <style lang="scss" scoped>
-    .header-cell {
-        background: #f3f5f9 !important;
-    }
-
     .zy-template {
         width: 100%;
 

src/views/devices/logs.vue

@@ -1,33 +1,31 @@
 <template>
     <div class="zy-template">
-        <div class="zy-module zy-template_search">
-            <el-form ref="form" :model="condition" label-width="60px">
-                <el-form-item label="设备ID:" class="form-item">
-                    <el-input v-model="condition.deviceId" size="small"></el-input>
+        <div class="zy-module">
+            <el-form ref="form" :model="query" label-width="60px">
+                <el-form-item label="设备ID:" class="zy-search-form-item">
+                    <el-input v-model="query.deviceId" size="mini" clearable></el-input>
                 </el-form-item>
 
-                <el-form-item label="类型:" class="form-item">
-                    <el-select v-model="condition.tag" size="small" value="">
+                <el-form-item label="类型:" class="zy-search-form-item">
+                    <el-select v-model="query.tag" size="mini" value="" clearable>
                         <el-option value="1" label="发送(服务器)"/>
                         <el-option value="0" label="接收(服务器)"/>
                     </el-select>
                 </el-form-item>
 
-                <el-form-item label="指令:" class="form-item">
-                    <el-select v-model="condition.instruction" size="small" value="">
+                <el-form-item label="指令:" class="zy-search-form-item">
+                    <el-select v-model="query.instruction" size="mini" value="" clearable>
                         <el-option :value="item.id" :label="item.val" v-for="item in instructionList"/>
                     </el-select>
                 </el-form-item>
 
-                <el-form-item class="form-item">
-                    <el-button type="primary" size="small" @click="submit">查询</el-button>
-                </el-form-item>
+                <el-button type="primary" size="mini" @click="submit">查询</el-button>
             </el-form>
         </div>
 
-        <div class="zy-template_table">
-            <el-table :data="page.records" max-height="600" stripe size="small" header-cell-class-name="header-cell"
-                      style="width: 100%;">
+        <div class="zy-module">
+            <el-table :data="page.records" stripe header-cell-class-name="zy-table-header-cell"
+                      cell-class-name='zy-table-cell'>
 
                 <el-table-column prop="deviceId" label="设备ID" width="270" min-width="10%"/>
                 <el-table-column prop="tag" label="类型" width="60" min-width="10%">
@@ -43,7 +41,9 @@
                 <el-table-column prop="content" label="内容" min-width="10%"/>
                 <el-table-column prop="createTime" label="时间" width="150"/>
             </el-table>
-            <el-pagination class="pagination" background layout="prev, pager, next" :current-page="page.current"
+
+            <el-pagination class="zy-table-pagination" background layout="prev, pager, next"
+                           :current-page="page.current"
                            :total="page.total" :page-size="page.size" @current-change="pagination"/>
         </div>
 
@@ -54,8 +54,8 @@
     export default {
         data() {
             return {
-                condition: {
-                    deviceId: null,
+                query: {
+                    deviceId: "",
                     tag: null,
                     instruction: null
                 },
@@ -67,7 +67,7 @@
                 instructionList: [],//指令对应集合
             };
         },
-        mounted: function () {
+        mounted() {
             this.getListPage();
             this.getAllInstruction();
         },
@@ -79,9 +79,9 @@
                 const param = {
                     current: 1,
                     size: this.page.size,
-                    deviceId: this.condition.deviceId,
-                    tag: this.condition.tag,
-                    instruction: this.condition.instruction,
+                    deviceId: this.query.deviceId,
+                    tag: this.query.tag,
+                    instruction: this.query.instruction,
                 };
                 this.getListPage(param);
             },
@@ -92,27 +92,27 @@
                 const param = {
                     current: current,
                     size: this.page.size,
-                    deviceId: this.condition.deviceId,
-                    tag: this.condition.tag,
-                    instruction: this.condition.instruction,
+                    deviceId: this.query.deviceId,
+                    tag: this.query.tag,
+                    instruction: this.query.instruction,
                 };
                 this.getListPage(param);
             },
+
             /**
              * 获取日志列表
              */
             getListPage: function (params) {
-                const that = this;
-                this.Post(this.Global.getMqttLogs, params).then(res => {
+                this.$http.Post(this.$global.getMqttLogs, params).then(res => {
                     console.log(res.data);
-                    that.page = res.data;
+                    this.page = res.data;
                 })
             },
             /**
              * 获取日志列表
              */
             getAllInstruction: function () {
-                this.Get(this.Global.getAllInstruction, {}).then(res => {
+                this.$http.Get(this.$global.getAllInstruction, {}).then(res => {
                     this.instructionMap = res.data;
                     let arr = [];
                     for (let key  in  res.data) {
@@ -132,33 +132,4 @@
 </script>
 
 <style lang="scss">
-    .header-cell {
-        background: #f3f5f9 !important;
-    }
-
-    .zy-template {
-        width: 100%;
-
-        &_search {
-            overflow: hidden;
-
-            & .form-item {
-                margin-bottom: 0;
-                float: left;
-                width: 230px;
-            }
-        }
-
-        &_table {
-            border-radius: 5px;
-            width: 100%;
-            background: white;
-            box-sizing: border-box;
-            padding: 20px;
-        }
-
-        & .pagination {
-            margin-top: 20px;
-        }
-    }
 </style>

src/views/devices/set.vue

@@ -3,15 +3,18 @@
         <div class="left">
             <div class="zy-main-title">基本信息</div>
             <div class="left__baseInfo zy-module">
-                <el-form label-width="80px">
-                    <el-form-item label="设备号:" class="form-item">
-                        <el-input :value="device.num" size="small" disabled></el-input>
+                <el-form label-width="140px">
+                    <el-form-item label="设备号：" class="form-item">
+                        {{device.num}}
                     </el-form-item>
-                    <el-form-item label="设备ID:" class="form-item">
-                        <el-input :value="device.clientId" size="small" disabled/>
+                    <el-form-item label="设备ID：" class="form-item">
+                        {{device.clientId}}
                     </el-form-item>
-                    <el-form-item label="设备状态:" class="form-item">
-                        <el-input :value="device.status===1?'已注册':'未注册'" size="small" disabled/>
+                    <el-form-item label="状态：" class="form-item">
+                        {{device.status===1?'在线':'离线'}}
+                    </el-form-item>
+                    <el-form-item label="上一次在线时间：" class="form-item">
+                        {{device.lastOnlineTime}}
                     </el-form-item>
                 </el-form>
             </div>
@@ -125,7 +128,20 @@
         data() {
             return {
                 device: {}, //当前设备信息
-                baseSet: {}, //当前设备设置信息
+                baseSet: {//当前设备设置信息
+                    autoAnswer: 0,
+                    highFreq: 0,
+                    gpsRate: 0,
+                    phoneVol: 0,
+                    ringVol: 0,
+                    msgVol: 0,
+                    key0Name: "",
+                    key0Phone: "",
+                    key1Name: "",
+                    key1Phone: "",
+                    key2Name: "",
+                    key2Phone: "",
+                },
                 message: {}, //语音播报消息
                 marks: {
                     0: '0',
@@ -142,13 +158,7 @@
             };
         },
         activated() {
-            const deviceId = this.$route.params.deviceId;
-            if (!deviceId) {
-                this.$router.push({
-                    name: "Devices"
-                });
-                return;
-            }
+            const deviceId = this.$route.params.id;
             this.initWebSocket(deviceId);
             this.getDeviceDetail(deviceId);
             this.getDeviceBaseSet(deviceId);
@@ -169,7 +179,7 @@
                 const param = {
                     clientId: clientId,
                 };
-                this.Get(this.Global.getDeviceDetail, param).then(res => {
+                this.$http.Get(this.$global.getDeviceDetail, param).then(res => {
                     this.device = res.data;
                 })
             },
@@ -181,7 +191,8 @@
                 const param = {
                     deviceId: clientId,
                 };
-                this.Get(this.Global.getBaseSet, param).then(res => {
+                this.$http.Get(this.$global.getBaseSet, param).then(res => {
+                    console.log(res.data);
                     this.baseSet = res.data;
                 })
             },
@@ -196,7 +207,7 @@
                     ringVol: this.baseSet.ringVol,
                     phoneVol: this.baseSet.phoneVol
                 };
-                this.postGeneral(this.Global.setVolume, param);
+                this.postGeneral(this.$global.setVolume, param);
             },
             /**
              * 自动接听
@@ -206,7 +217,7 @@
                     deviceId: this.device.clientId,
                     autoAnswer: tag
                 };
-                this.postGeneral(this.Global.setAutoAnswer, param);
+                this.postGeneral(this.$global.setAutoAnswer, param);
             },
 
             /**
@@ -217,7 +228,7 @@
                     deviceId: this.device.clientId,
                     gpsRate: this.baseSet.gpsRate
                 };
-                this.postGeneral(this.Global.setGpsRate, param);
+                this.postGeneral(this.$global.setGpsRate, param);
             },
 
             /**
@@ -228,7 +239,7 @@
                     deviceId: this.device.clientId,
                     highFreq: tag
                 };
-                this.postGeneral(this.Global.setContinue, param);
+                this.postGeneral(this.$global.setContinue, param);
             },
 
             /**
@@ -244,7 +255,7 @@
                     key2Name: this.baseSet.key2Name,
                     key2Phone: this.baseSet.key2Phone,
                 };
-                this.postGeneral(this.Global.setSos, param);
+                this.postGeneral(this.$global.setSos, param);
             },
 
             /**
@@ -258,7 +269,7 @@
                     news: this.message.news,
                 };
                 this.lock(1);
-                this.Post(this.Global.setNews, param).then(() => {
+                this.$http.Post(this.$global.setNews, param).then(() => {
                     this.message = {};
                 }).finally(() => {
                     this.lock(0);
@@ -267,12 +278,10 @@
 
             /**
              * 通用发送设置请求
-             * @param {Object} url 请求 地址
-             * @param {Object} param 请求参数
              */
             postGeneral(url, param) {
                 this.lock(1);
-                this.Post(url, param).then(() => {
+                this.$http.Post(url, param).then(() => {
                     this.getDeviceBaseSet(param.deviceId);
                 }).finally(() => {
                     this.lock(0);
@@ -284,7 +293,7 @@
              */
             initWebSocket: function (clientId) {
                 const that = this;
-                const socket = new WebSocket(this.Global.webSocket + clientId);
+                const socket = new WebSocket(this.$global.webSocket + clientId);
                 socket.onmessage = function (evt) {
                     const jsonObj = JSON.parse(evt.data);
                     const message = {

src/views/layout/layout.vue

@@ -1,134 +1,139 @@
 <template>
-	<el-container class="container">
-		<el-aside width="200px">
-			<div class="logo">
-				<img src="./static/logo.png" alt="logo">
-			</div>
-			<el-menu default-active="1" class="el-menu-vertical-demo" background-color="#141b2e" text-color="#E4ECFF">
-				<el-submenu index="1">
-					<template #title><i class="el-icon-monitor"></i>设备管理</template>
-					<router-link to="/map">
-						<el-menu-item index="1-1">位置分布</el-menu-item>
-					</router-link>
-					<router-link to="/devices">
-						<el-menu-item index="1-2">设备列表</el-menu-item>
-					</router-link>
-					<router-link to="/logs">
-						<el-menu-item index="1-3">消息日志</el-menu-item>
-					</router-link>
-				</el-submenu>
+    <el-container class="container">
+        <el-aside width="200px">
+            <div class="logo">
+                <img src="./static/logo.png" alt="logo">
+            </div>
+            <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#141b2e" text-color="#E4ECFF">
+                <el-submenu index="1">
+                    <template #title><i class="el-icon-monitor"></i>设备管理</template>
+                    <router-link to="/map">
+                        <el-menu-item index="1-1">位置分布</el-menu-item>
+                    </router-link>
+                    <router-link to="/devices">
+                        <el-menu-item index="1-2">设备列表</el-menu-item>
+                    </router-link>
+                    <router-link to="/logs">
+                        <el-menu-item index="1-3">消息日志</el-menu-item>
+                    </router-link>
+                </el-submenu>
 
-				<el-submenu index="2">
-					<template #title><i class="el-icon-setting"></i>系统设置</template>
-					<router-link to="/users">
-						<el-menu-item index="2-1">用户管理</el-menu-item>
-					</router-link>
-				</el-submenu>
-			</el-menu>
-		</el-aside>
-		<el-container>
-			<el-header class='header' style="height: 50px;">
-				<div class="dropdown">
-					<el-dropdown trigger="click">
+                <el-submenu index="2">
+                    <template #title><i class="el-icon-setting"></i>系统设置</template>
+                    <router-link to="/users">
+                        <el-menu-item index="2-1">用户管理</el-menu-item>
+                    </router-link>
+                </el-submenu>
+            </el-menu>
+        </el-aside>
+        <el-container>
+            <el-header class='header' style="height: 50px;">
+                <div class="dropdown">
+                    <el-dropdown trigger="click">
 						<span class="el-dropdown-link">
 							{{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
 						</span>
-						<template #dropdown>
-							<el-dropdown-menu>
-								<el-dropdown-item>退出登录</el-dropdown-item>
-							</el-dropdown-menu>
-						</template>
-					</el-dropdown>
-				</div>
-			</el-header>
-			<el-main>
-				<router-view />
-			</el-main>
-		</el-container>
-	</el-container>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item>退出登录</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </div>
+            </el-header>
+            <el-main>
+                <!-- vue3.0配置 -->
+                <router-view v-slot="{Component}">
+                    <keep-alive>
+                        <component :is="Component"/>
+                    </keep-alive>
+                </router-view>
+            </el-main>
+        </el-container>
+    </el-container>
 </template>
 
 <script>
-	import TokenManager from '../../static/js/token.js'
+    import TokenManager from '../../static/js/token.js'
 
-	export default {
-		data() {
-			return {
-				nickname: '管理员',
-			};
-		},
-		mounted: function() {
-			this.initToken();
-		},
-		methods: {
-			/**
-			 * 查看token信息
-			 */
-			initToken: function() {
-				try {
-					const obj = JSON.parse(TokenManager.getToken());
-					if (TokenManager.getVerify() != null) {
-						this.nickname = obj.nickname;
-						return;
-					}
-					this.$http.Get(this.$global.verify, {}).then(res => {
-						TokenManager.setVerify();
-						this.nickname = obj.nickname;
-					})
-				} catch {
-					this.$router.replace("/login");
-				}
-			}
-		}
-	};
+    export default {
+        data() {
+            return {
+                nickname: '管理员',
+            };
+        },
+        mounted: function () {
+            this.initToken();
+        },
+        methods: {
+            /**
+             * 查看token信息
+             */
+            initToken: function () {
+                try {
+                    const obj = JSON.parse(TokenManager.getToken());
+                    if (TokenManager.getVerify() != null) {
+                        this.nickname = obj.nickname;
+                        return;
+                    }
+                    this.$http.Get(this.$global.verify, {}).then(res => {
+                        TokenManager.setVerify();
+                        this.nickname = obj.nickname;
+                    })
+                } catch {
+                    this.$router.replace("/login");
+                }
+            }
+        }
+    };
 </script>
 
 <style scoped lang="scss">
-	.container {
-		height: 100%;
+    .container {
+        height: 100%;
 
-		& .logo {
-			box-sizing: border-box;
-			padding-top: 10px;
-			padding-left: 20px;
-			width: 100%;
-			height: 60px;
+        & .logo {
+            box-sizing: border-box;
+            padding-top: 10px;
+            padding-left: 20px;
+            width: 100%;
+            height: 60px;
 
-			& img {
-				width: 40px;
-				height: 40px;
-			}
+            & img {
+                width: 40px;
+                height: 40px;
+            }
 
-		}
+        }
 
-		& .header {
-			background: #f3f5f9;
+        & .header {
+            background: #f3f5f9;
 
-			& .dropdown {
-				float: right;
-				margin-right: 30px;
-				cursor: pointer;
-				line-height: 50px;
-			}
-		}
+            & .dropdown {
+                float: right;
+                margin-right: 30px;
+                cursor: pointer;
+                line-height: 50px;
+            }
+        }
 
-		& .el-main {
-			background: #f3f5f9;
-			height: 100%;
-			overflow-x: hidden;
-			overflow-y: scroll;
-			box-sizing: border-box;
-			padding: 0 15px 20px 20px;
+        & .el-main {
+            background: #f3f5f9;
+            height: 100%;
+            overflow-x: hidden;
+            overflow-y: scroll;
+            box-sizing: border-box;
+            padding: 0 15px 20px 20px;
 
-		}
+        }
 
-		& .el-aside {
-			height: 100%;
-			background: #141b2e;
+        & .el-aside {
+            height: 100%;
+            background: #141b2e;
 
-			& .el-menu {
-				border: none;
-			}
-		}
-	}
+            & .el-menu {
+                border: none;
+            }
+        }
+    }
 </style>

src/views/map/map.vue

@@ -1,228 +1,184 @@
 <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>
+    <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: function() {
-			this.initMap();
-			this.getLocationList();
-		},
-		methods: {
+    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],
-				})
-			},
+            /**
+             * 初始化地图
+             */
+            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;
-				})
-			},
+            /**
+             * 构建 地图标记物
+             */
+            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;
-						return;
-					}
-				})
-			},
-			/**
-			 * 向地图中添加标记
-			 */
-			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定位";
-			},
+            /**
+             *下拉框模糊匹配方法
+             */
+            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.deviceList = [{
-					id: '1',
-					deviceId: "qwe",
-					batteryNum: 100,
-					signalNum: 50,
-					mode: 1,
-					lon: "116.4073963",
-					lat: "39.9041999",
-					site: "河北省廊坊市安次区永华道街道安次区永华道办事处社区卫生中心尚华城",
-					speed: 0,
-					num: 7,
-					dataCreateTime: "2021-03-11 12:22:22"
-				}, {
-					id: '2',
-					deviceId: "asd",
-					batteryNum: 90,
-					signalNum: 50,
-					mode: 1,
-					lon: "115.4073963",
-					lat: "41.9041999",
-					site: "河北省廊坊市安次区永华道街道安次区永华道办事处社区卫生中心尚华城",
-					speed: 0,
-					num: 7,
-					dataCreateTime: "2021-03-11 12:22:22"
-				}, {
-					id: '3',
-					deviceId: "zxc",
-					batteryNum: 80,
-					signalNum: 50,
-					mode: 1,
-					lon: "113.4073963",
-					lat: "35.102131",
-					site: "河北省廊坊市安次区永华道街道安次区永华道办事处社区卫生中心尚华城",
-					speed: 0,
-					num: 7,
-					dataCreateTime: "2021-03-11 12:22:22"
-				}, {
-					id: '4',
-					deviceId: "qaz",
-					batteryNum: 70,
-					signalNum: 50,
-					mode: 1,
-					lon: "117.102131",
-					lat: "40.102131",
-					site: "河北省廊坊市安次区永华道街道安次区永华道办事处社区卫生中心尚华城",
-					speed: 0,
-					num: 7,
-					dataCreateTime: "2021-03-11 12:22:22"
-				}];
-				this.deviceNumList = this.deviceList.map(item => {
-					return item.deviceId;
-				});
-				this.addMarkers(this.deviceList);
-			}
-		}
-	}
+            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;
+    .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;
-		}
+        .search {
+            text-align: center;
+            top: 0;
+            padding: 10px 20px;
+            position: absolute;
+        }
 
-		.map {
-			width: 100%;
-			height: 100%;
-			position: relative;
+        .map {
+            width: 100%;
+            height: 100%;
+            position: relative;
 
-			&__panel {
-				color: white;
-				box-sizing: border-box;
-				z-index: 9;
-				position: absolute;
-				right: 10px;
-				top: 10px;
-				width: 220px;
-				padding: 10px;
-				border-radius: 5px;
-				background: rgba(0, 0, 0, .5);
+            &__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;
-				}
-			}
-		}
-	}
+                & p {
+                    font-size: 14px;
+                    line-height: 20px;
+                    margin: 0 0 3px;
+                }
+            }
+        }
+    }
 </style>

src/views/system/users.vue

@@ -1,48 +1,46 @@
 <template>
     <div class="zy-template">
-        <div class="zy-module zy-template_search">
-            <el-form ref="form" :model="condition" label-width="60px">
-                <el-form-item label="关键字:" class="form-item">
-                    <el-input v-model="condition.key" size="small" placeholder="用户名/昵称"></el-input>
+        <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.key" size="mini" placeholder="用户名/昵称"></el-input>
                 </el-form-item>
-                <el-form-item label="性别:" class="form-item">
-                    <el-select v-model="condition.gender" size="small" value="">
+                <el-form-item label="性别:" class="zy-search-form-item">
+                    <el-select v-model="query.gender" size="mini" clearable>
                         <el-option value="1" label="男"/>
                         <el-option value="2" label="女"/>
                     </el-select>
                 </el-form-item>
-                <el-form-item class="form-item">
-                    <el-button type="primary" size="small" @click="submit">查询</el-button>
-                </el-form-item>
+                <el-button type="primary" size="mini" @click="submit">查询</el-button>
             </el-form>
         </div>
 
-        <div class="zy-template_table">
-            <el-table :data="page.records" max-height="800" stripe size="small" header-cell-class-name="header-cell"
-                      style="width: 100%;">
-                <el-table-column prop="avatar" label="头像" width="80" min-width="5%">
+        <div class="zy-module">
+            <el-table :data="page.records" stripe header-cell-class-name="zy-table-header-cell"
+                      cell-class-name='zy-table-cell'>
+
+                <el-table-column prop="avatar" label="头像" width="100">
                     <template #default="scope">
                         <img :src="scope.row.avatar" width="50" height="50" style="border-radius: 100px;" alt="avatar"/>
                     </template>
                 </el-table-column>
-                <el-table-column prop="nickname" label="昵称" width="120" min-width="10%"/>
-                <el-table-column label="性别" width="80" min-width="5%">
+                <el-table-column prop="nickname" label="昵称" width="180"/>
+                <el-table-column label="性别" width="100">
                     <template #default="scope">
                         {{scope.row.gender===1?'男':'女'}}
                     </template>
                 </el-table-column>
-                <el-table-column label="地区" width="250" min-width="20%">
+                <el-table-column prop="openId" label="微信open-id" width="300" min-width="10%"/>
+                <el-table-column prop="createTime" label="注册时间" width="180" min-width="10%"/>
+                <el-table-column label="地区" min-width="20%">
                     <template #default="scope">
                         {{scope.row.country}}{{scope.row.province}}{{scope.row.city}}
                     </template>
                 </el-table-column>
-                <el-table-column prop="openId" label="微信open-id" width="250" min-width="10%"/>
-                <el-table-column prop="username" label="用户名" width="150" min-width="10%"/>
-                <el-table-column prop="phone" label="手机号" width="150" min-width="10%"/>
-                <el-table-column prop="createTime" label="注册时间" width="150" min-width="10%"/>
-                <el-table-column label="操作" min-width="10%"/>
             </el-table>
-            <el-pagination class="pagination" background layout="prev, pager, next" :current-page="page.current"
+
+            <el-pagination class="zy-table-pagination" background layout="prev, pager, next"
+                           :current-page="page.current"
                            :total="page.total" :page-size="page.size" @current-change="pagination"/>
         </div>
 
@@ -53,7 +51,7 @@
     export default {
         data() {
             return {
-                condition: {
+                query: {
                     key: '',
                     gender: ''
                 },
@@ -63,7 +61,7 @@
                 },
             };
         },
-        mounted: function () {
+        mounted() {
             this.getUserList(this.page);
         },
         methods: {
@@ -73,8 +71,8 @@
              */
             submit: function () {
                 const param = {
-                    key: this.condition.key,
-                    gender: this.condition.gender
+                    key: this.query.key,
+                    gender: this.query.gender
                 };
                 this.getUserList(param);
             },
@@ -83,8 +81,8 @@
              */
             pagination: function (current) {
                 const param = {
-                    key: this.condition.key,
-                    gender: this.condition.gender,
+                    key: this.query.key,
+                    gender: this.query.gender,
                     current: current,
                     size: this.page.size,
                 };
@@ -95,42 +93,11 @@
              */
             getUserList: function (params) {
                 const that = this;
-                this.Post(this.Global.getUserList, params).then(res => {
+                this.$http.Post(this.$global.getUserList, params).then(res => {
+                    console.log(res.data)
                     that.page = res.data;
                 })
             }
         }
     };
 </script>
-
-<style lang="scss">
-    .header-cell {
-        background: #f3f5f9 !important;
-    }
-
-    .zy-template {
-        width: 100%;
-
-        &_search {
-            overflow: hidden;
-
-            & .form-item {
-                margin-bottom: 0;
-                float: left;
-                width: 230px;
-            }
-        }
-
-        &_table {
-            border-radius: 5px;
-            width: 100%;
-            background: white;
-            box-sizing: border-box;
-            padding: 20px;
-        }
-
-        & .pagination {
-            margin-top: 20px;
-        }
-    }
-</style>