Browse Source

整理一半

chenyi406 3 years ago
parent
commit
42c532a860
4 changed files with 158 additions and 143 deletions
  1. 3 3
      package.json
  2. 30 30
      src/static/js/axiosCfg.js
  3. 2 2
      src/static/js/global.js
  4. 123 108
      src/views/devices/devices.vue

+ 3 - 3
package.json

@@ -11,7 +11,8 @@
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "qs": "latest",
-    "axios": "latest"
+    "axios": "latest",
+    "element-plus": "latest"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -19,7 +20,6 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "element-plus": "latest"
+    "sass-loader": "^8.0.2"
   }
 }

+ 30 - 30
src/static/js/axiosCfg.js

@@ -1,26 +1,26 @@
 //Http配置
 import Axios from 'axios'
 import {
-	ElMessage
+    ElMessage
 } from 'element-plus'
 import router from "../../router"
 import TokenManager from "./token"
 
 // Axios.defaults.timeout = 10000; // 超时时间
-Axios.defaults.headers['verify'] = 'bms'; // 验证
+Axios.defaults.headers['verify'] = 'omp'; // 验证
 
 /**
  * 拦截http请求
  */
 Axios.interceptors.request.use(config => {
-	// 判断是否存在token,如果存在的话,则每个http header都加上token
-	try {
-		const obj = JSON.parse(TokenManager.getToken());
-		config.headers['token'] = obj.token;
-	} catch {
-		return config;
-	}
-	return config;
+    // 判断是否存在token,如果存在的话,则每个http header都加上token
+    try {
+        const obj = JSON.parse(TokenManager.getToken());
+        config.headers['token'] = obj.token;
+    } catch {
+        return config;
+    }
+    return config;
 });
 
 
@@ -28,27 +28,27 @@ Axios.interceptors.request.use(config => {
  * 拦截http响应
  */
 Axios.interceptors.response.use(res => {
-	switch (res.data.status) { //状态码
-		case 200:
-			return Promise.resolve(res.data);
-		case 300: //警告
-			ElMessage.error(res.data.msg);
-			break;
-		case 401: //权限不足
-			ElMessage.error("请先登录");
-			router.replace("/login");
-			break;
-		case 500: //服务器错误
-			ElMessage.error("服务器开小差了");
-			break;
-		default://无状态码
-			ElMessage.error("请求状态异常");
-			break;
-	}
-	return Promise.reject(res.data);
+    switch (res.data.status) { //状态码
+        case 200:
+            return Promise.resolve(res.data);
+        case 300: //警告
+            ElMessage.error(res.data.msg);
+            break;
+        case 401: //权限不足
+            ElMessage.error("请先登录");
+            router.replace("/login");
+            break;
+        case 500: //服务器错误
+            ElMessage.error("服务器开小差了");
+            break;
+        default://无状态码
+            ElMessage.error("请求状态异常");
+            break;
+    }
+    return Promise.reject(res.data);
 }, error => {
-	ElMessage.error("请求异常");
-	return Promise.reject(res.data);
+    ElMessage.error("请求异常");
+    return Promise.reject(error);
 });
 
 export default Axios

+ 2 - 2
src/static/js/global.js

@@ -1,4 +1,4 @@
-const server = "http://localhost:8080/omp/api/pc/";
+const server = "http://localhost:8081/omp/api/pc/";
 // const server = "https://www.mang406.top/omp/api/pc/";
 
 const URL = {
@@ -9,7 +9,7 @@ const URL = {
 	//获取用户列表
 	getUserList: server + "user/getListPage.do",
 	//获取设备列表
-	getDeviceList: server + "device/getListPage.do",
+	getDeviceList: server + "device/listPage.do",
 
 	//查询mqtt日志
 	getMqttLogs: server + "logs/listPage.do",

+ 123 - 108
src/views/devices/devices.vue

@@ -1,124 +1,139 @@
 <template>
-	<div class="zy-template">
-		<div class="zy-module">
-			<el-form :model="query" label-width="60px">
-				<el-form-item label="设备码" class="zy-search-form-item">
-					<el-input v-model="query.num" size="mini"></el-input>
-				</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="0" />
-					</el-select>
-				</el-form-item>
-				<el-button type="primary" size="mini" @click="submit">查询</el-button>
-			</el-form>
-		</div>
+    <div class="zy-template">
+        <div class="zy-module">
+            <el-form :model="query" label-width="60px">
+                <el-form-item label="设备码" class="zy-search-form-item">
+                    <el-input v-model="query.num" size="mini"></el-input>
+                </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="0"/>
+                    </el-select>
+                </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="zy-table-header-cell" cell-class-name='zy-table-cell'>
-				<el-table-column prop="num" label="设备码" width="180" min-width="10%" />
-				<el-table-column prop="clientId" label="MQTT-clientId" width="300" min-width="10%" />
-				<el-table-column prop="password" label="MQTT-password" width="300" min-width="10%" />
-				<el-table-column prop="groupId" label="设备组" width="100" min-width="10%" />
-				<el-table-column prop="createTime" label="创建时间" width="180" min-width="10%" />
-				<el-table-column label="操作" width="100" min-width="10%">
-					<template slot-scope="scope">
-						<el-button @click="handleSet(scope.row.clientId)" type="text" size="small">设置</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
+        <div class="zy-template_table">
+            <el-table :data="page.records" max-height="800" 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">
+                    <template #default="scope">
+                        {{scope.row.mode ===1?'在线':'离线'}}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="batteryNum" label="电量" width="100"/>
+                <el-table-column prop="signalNum" label="信号" width="100"/>
+                <el-table-column prop="lon" label="经度" width="150"/>
+                <el-table-column prop="lat" label="纬度" width="150"/>
+                <el-table-column prop="num" label="收星颗数" width="100"/>
+                <el-table-column label="定位模式" width="100">
+                    <template #default="scope">
+                        {{scope.row.mode ===1?'北斗定位':(scope.row.mode===2?"基站定位":'GPS定位')}}
+                    </template>
+                </el-table-column>
+                <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>
+                    </template>
+                </el-table-column>
+            </el-table>
 
-			<el-pagination class="pagination" background layout="prev, pager, next" :current-page="page.current"
-				:total="page.total" :page-size="page.size" @current-change="pagination" />
-		</div>
+            <el-pagination class="pagination" background layout="prev, pager, next" :current-page="page.current"
+                           :total="page.total" :page-size="page.size" @current-change="pagination"/>
+        </div>
 
-	</div>
+    </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				query: {
-					num: '',
-					status: ''
-				},
-				page: {
-					current: 1,
-					size: 20,
-				},
-			};
-		},
-		mounted: function() {
-			this.getDeviceList();
-		},
-		methods: {
-			/**
-			 * 提交查询条件
-			 */
-			submit: function() {
-				const params = {
-					num: this.condition.num,
-					status: this.condition.status
-				};
-				this.getDeviceList(params);
-			},
+    export default {
+        data() {
+            return {
+                query: {
+                    num: '',
+                    status: ''
+                },
+                page: {
+                    current: 1,
+                    size: 20,
+                },
+            };
+        },
+        mounted: function () {
+            this.getDeviceList();
+        },
+        methods: {
+            /**
+             * 提交查询条件
+             */
+            submit: function () {
+                const params = {
+                    num: this.condition.num,
+                    status: this.condition.status
+                };
+                this.getDeviceList(params);
+            },
 
-			/**
-			 * 分页点击事件
-			 */
-			pagination: function(current) {
-				const params = {
-					num: this.condition.num,
-					status: this.condition.status,
-					current: current,
-					size: this.page.size,
-				};
-				this.getUserList(params);
-			},
+            /**
+             * 分页点击事件
+             */
+            pagination: function (current) {
+                const params = {
+                    num: this.condition.num,
+                    status: this.condition.status,
+                    current: current,
+                    size: this.page.size,
+                };
+                this.getUserList(params);
+            },
 
-			/**
-			 * 获取设备列表
-			 */
-			getDeviceList: function(params) {
-				const that = this;
-				this.$http.Post(this.$global.getDeviceList, params).then(res => {
-					console.log(res.data);
-					that.page = res.data;
-				})
-			},
+            /**
+             * 获取设备列表
+             */
+            getDeviceList: function (params) {
+                const that = this;
+                this.$http.Post(this.$global.getDeviceList, params).then(res => {
+                    console.log(res.data);
+                    that.page = res.data;
+                })
+            },
 
-			/**
-			 * 跳转至设置页面
-			 */
-			handleSet: function(deviceId) {
-				this.$router.push({
-					name: 'Set',
-					params: {
-						deviceId: deviceId
-					}
-				})
-			}
-		}
-	};
+            /**
+             * 跳转至设置页面
+             */
+            handleSet: function (deviceId) {
+                this.$router.push({
+                    name: 'Set',
+                    params: {
+                        deviceId: deviceId
+                    }
+                })
+            }
+        }
+    };
 </script>
 
 <style lang="scss" scoped>
-	.header-cell {
-		background: #f3f5f9 !important;
-	}
+    .header-cell {
+        background: #f3f5f9 !important;
+    }
 
-	.zy-template {
-		width: 100%;
+    .zy-template {
+        width: 100%;
 
-		&_table {
-			border-radius: 5px;
-			width: 100%;
-			background: white;
-			box-sizing: border-box;
-			padding: 20px;
-		}
-	}
+        &_table {
+            border-radius: 5px;
+            width: 100%;
+            background: white;
+            box-sizing: border-box;
+            padding: 20px;
+        }
+    }
 </style>