完善设备调试页面

src/static/js/axiosCfg.js

@@ -1,6 +1,8 @@
 //Http配置
 import Axios from 'axios'
-import {Message} from 'element-ui'
+import {
+	Message
+} from 'element-ui'
 import router from "../../router"
 import TokenManager from "./TokenManager"
 
@@ -12,14 +14,14 @@ Axios.defaults.headers['Content-Type'] = `application/x-www-form-urlencoded`;
  * 拦截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;
 });
 
 
@@ -27,31 +29,31 @@ Axios.interceptors.request.use(config => {
  * 拦截http响应
  */
 Axios.interceptors.response.use(res => {
-    const status = res.data.status; //状态码
-    switch (status) {
-        case 300: //警告
-            Message.warning({
-                message: res.data.msg
-            });
-            return;
-        case 401: //权限不足
-            Message.warning({
-                message: "验证信息过期,请重新登录",
-                duration: 5000
-            });
-            router.replace("/login");
-            return;
-        //服务器错误
-        case 500:
-            Message.error({
-                message: "服务器开小差了"
-            });
-            return;
-        default:
-            return res.data;
-    }
+	const status = res.data.status; //状态码
+	switch (status) {
+		case 300: //警告
+			Message.warning({
+				message: res.data.msg
+			});
+			return reject(res);
+		case 401: //权限不足
+			Message.warning({
+				message: "验证信息过期,请重新登录",
+				duration: 5000
+			});
+			router.replace("/login");
+			return reject(res);
+			//服务器错误
+		case 500:
+			Message.error({
+				message: "服务器开小差了"
+			});
+			return reject(res);
+		default:
+			return res.data;
+	}
 }, error => {
-    return Promise.reject(error)
+	Message.error("接口异常");
 });
 
 export default Axios

src/static/js/global.js

@@ -1,4 +1,4 @@
-const server = "http://localhost:8081/zy4g/api/pc/";
+const server = "http://localhost:8081/bms/api/pc/";
 
 const URL = {
     //登录
@@ -24,7 +24,7 @@ const URL = {
     //持续定位
     setContinue: server + "set/continue.do",
     //发送消息
-    setNew: server + "set/news.do",
+    setNews: server + "set/news.do",
     //紧急呼叫
     setSos: server + "set/sos.do",
 

src/static/js/http.js

@@ -1,7 +1,9 @@
 import Vue from "vue";
 import Axios from "./axiosCfg";
 import Qs from "qs";
-import {Loading} from "element-ui";
+import {
+	Loading
+} from "element-ui";
 
 let loading; //加载框
 
@@ -9,86 +11,86 @@ let loading; //加载框
  * 打开加载框
  */
 function openLoad() {
-    //关闭加载框
-    if (loading != null) loading.close();
-    //打开加载框
-    loading = Loading.service({
-        text: "正在加载",
-        target: document.querySelector("#loading-area")
-    });
+	//关闭加载框
+	if (loading != null) loading.close();
+	//打开加载框
+	loading = Loading.service({
+		text: "正在加载",
+		target: document.querySelector("#loading-area")
+	});
 }
 
 /**
  * 关闭加载框
  */
 function closeLoad() {
-    if (loading != null) {
-        loading.close();
-    }
+	if (loading != null) {
+		loading.close();
+	}
 }
 
 /**
  * Post请求
  */
-Vue.prototype.Post = function (url, data) {
-    //打开加载框
-    openLoad();
-    //发送请求
-    return new Promise((resolve, reject) => {
-        Axios.post(url, Qs.stringify(data))
-            .then(res => {
-                resolve(res);
-            })
-            .catch(res => {
-                if (reject != null) {
-                    reject(res);
-                }
-            })
-            .finally(() => {
-                closeLoad();
-            })
-    });
+Vue.prototype.Post = function(url, data) {
+	//打开加载框
+	openLoad();
+	//发送请求
+	return new Promise((resolve, reject) => {
+		Axios.post(url, Qs.stringify(data))
+			.then(res => {
+				resolve(res);
+			})
+			.catch(res => {
+				if (reject != null) {
+					reject(res);
+				}
+			})
+			.finally(() => {
+				closeLoad();
+			})
+	});
 };
 /**
  * Get请求
  */
-Vue.prototype.Get = function (url, data) {
-    //打开加载框
-    openLoad();
-    //请求数据
-    return new Promise((resolve, reject) => {
-        Axios.get(url, {
-            params: data
-        })
-            .then(function (res) {
-                resolve(res);
-            })
-            .catch((res) => {
-                if (reject != null) {
-                    reject(res);
-                }
-            })
-            .finally(() => {
-                //关闭加载框
-                closeLoad();
-            })
-    });
+Vue.prototype.Get = function(url, data) {
+	//打开加载框
+	openLoad();
+	//请求数据
+	return new Promise((resolve, reject) => {
+		Axios.get(url, {
+				params: data
+			})
+			.then(function(res) {
+				resolve(res);
+			})
+			.catch((res) => {
+				if (reject != null) {
+					reject(res);
+				}
+			})
+			.finally(() => {
+				//关闭加载框
+				closeLoad();
+			})
+	});
 };
 
 /**
  * 下载
  */
-Vue.prototype.Download = function (url, data, fileName) {
-    Axios.post(url, Qs.stringify(data), {
-        responseType: "blob"
-    }).then(res => {
-        let link = document.createElement("a");
-        link.style.display = "none";
-        link.href = window.URL.createObjectURL(new Blob([res]));
-        link.setAttribute("download", fileName); // 自定义下载文件名（如exemple.txt）
-        document.body.appendChild(link);
-        link.click();
-        URL.revokeObjectURL(link.href); // 释放URL 对象
-        document.body.removeChild(link);
-    });
+Vue.prototype.Download = function(url, data, fileName) {
+	Axios.post(url, Qs.stringify(data), {
+		responseType: "blob"
+	}).then(res => {
+		let link = document.createElement("a");
+		link.style.display = "none";
+		link.href = window.URL.createObjectURL(new Blob([res]));
+		link.setAttribute("download", fileName); // 自定义下载文件名（如exemple.txt）
+		document.body.appendChild(link);
+		link.click();
+		URL.revokeObjectURL(link.href); // 释放URL 对象
+		document.body.removeChild(link);
+	});
 };

src/views/devices/devices.vue

@@ -1,138 +1,139 @@
 <template>
-    <div class="zy-template">
-        <div class="zy-template_search">
-            <el-form :model="condition" label-width="60px">
-                <el-form-item label="设备码:" class="form-item">
-                    <el-input v-model="condition.num" size="small"></el-input>
-                </el-form-item>
-                <el-form-item class="form-item">
-                    <el-button type="primary" size="small" @click="submit">查询</el-button>
-                </el-form-item>
-            </el-form>
-        </div>
+	<div class="zy-template">
+		<div class="zy-template_search">
+			<el-form :model="condition" label-width="60px">
+				<el-form-item label="设备码:" class="form-item">
+					<el-input v-model="condition.num" size="small"></el-input>
+				</el-form-item>
+				<el-form-item class="form-item">
+					<el-button type="primary" size="small" @click="submit">查询</el-button>
+				</el-form-item>
+			</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%">
-                <el-table-column prop="num" label="设备码" width="180"/>
-                <el-table-column prop="clientId" label="MQTT-clientId" width="300"/>
-                <el-table-column prop="password" label="MQTT-password" width="300"/>
-                <el-table-column prop="groupId" label="设备组" width="100"/>
-                <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>
+		<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="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>
+			<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>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                condition: {
-                    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 {
+				condition: {
+					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.Post(this.Global.getDeviceList, params).then(res => {
-                    that.page = res.data;
-                })
-            },
+			/**
+			 * 获取设备列表
+			 */
+			getDeviceList: function(params) {
+				const that = this;
+				this.Post(this.Global.getDeviceList, params).then(res => {
+					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%;
 
-        &_search {
-            overflow: hidden;
-            border-radius: 5px;
-            width: 100%;
-            background: white;
-            box-sizing: border-box;
-            padding: 20px;
-            margin-bottom: 20px;
+		&_search {
+			overflow: hidden;
+			border-radius: 5px;
+			width: 100%;
+			background: white;
+			box-sizing: border-box;
+			padding: 20px;
+			margin-bottom: 20px;
 
-            & .form-item {
-                margin-bottom: 0;
-                float: left;
-                width: 230px;
-            }
-        }
+			& .form-item {
+				margin-bottom: 0;
+				float: left;
+				width: 230px;
+			}
+		}
 
-        &_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;
+		}
 
-        & .pagination {
-            margin-top: 20px;
-        }
-    }
+		& .pagination {
+			margin-top: 20px;
+		}
+	}
 </style>

src/views/devices/set.vue

@@ -1,392 +1,392 @@
 <template>
-    <div class="zy-template">
-        <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-form-item>
-                    <el-form-item label="设备ID:" class="form-item">
-                        <el-input :value="device.clientId" size="small" disabled/>
-                    </el-form-item>
-                    <el-form-item label="设备状态:" class="form-item">
-                        <el-input :value="device.status===1?'已注册':'未注册'" size="small" disabled/>
-                    </el-form-item>
-                </el-form>
-            </div>
+	<div class="zy-template">
+		<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-form-item>
+					<el-form-item label="设备ID:" class="form-item">
+						<el-input :value="device.clientId" size="small" disabled />
+					</el-form-item>
+					<el-form-item label="设备状态:" class="form-item">
+						<el-input :value="device.status===1?'已注册':'未注册'" size="small" disabled />
+					</el-form-item>
+				</el-form>
+			</div>
 
-            <div class="zy-main-title">设备调试</div>
-            <el-collapse accordion class="left__set zy-module" value="1">
-                <el-collapse-item title="基础设置" name="1">
-                    <el-form label-width="80px">
-                        <el-form-item label="自动接听:">
-                            <el-switch v-model="baseSet.autoAnswer" active-color="#13ce66" inactive-color="#ff4949"
-                                       active-text="开" inactive-text="关" :active-value="1" :inactive-value="0"
-                                       @change="setAutoAnswer">
-                            </el-switch>
-                        </el-form-item>
-                        <el-form-item label="连续定位:">
-                            <el-switch v-model="baseSet.highFreq" active-color="#13ce66" inactive-color="#ff4949"
-                                       active-text="开" inactive-text="关" :active-value="1" :inactive-value="0"
-                                       @change="setContinue">
-                            </el-switch>
-                        </el-form-item>
-                        <el-form-item label="定位频率:">
-                            <el-input v-model="baseSet.gpsRate" size="small" class="input"/>
-                        </el-form-item>
-                        <el-button type="primary" size="small" class="button" @click="setGpsRate"
-                                   :disabled="submitFlag">保存
-                        </el-button>
-                    </el-form>
-                </el-collapse-item>
+			<div class="zy-main-title">设备调试</div>
+			<el-collapse accordion class="left__set zy-module" value="1">
+				<el-collapse-item title="基础设置" name="1">
+					<el-form label-width="80px">
+						<el-form-item label="自动接听:">
+							<el-switch v-model="baseSet.autoAnswer" active-color="#13ce66" inactive-color="#ff4949"
+								active-text="开" inactive-text="关" :active-value="1" :inactive-value="0"
+								@change="setAutoAnswer">
+							</el-switch>
+						</el-form-item>
+						<el-form-item label="连续定位:">
+							<el-switch v-model="baseSet.highFreq" active-color="#13ce66" inactive-color="#ff4949"
+								active-text="开" inactive-text="关" :active-value="1" :inactive-value="0"
+								@change="setContinue">
+							</el-switch>
+						</el-form-item>
+						<el-form-item label="定位频率:">
+							<el-input v-model="baseSet.gpsRate" size="small" class="input" />
+						</el-form-item>
+						<el-button type="primary" size="small" class="button" @click="setGpsRate"
+							:disabled="submitFlag">保存
+						</el-button>
+					</el-form>
+				</el-collapse-item>
 
-                <el-collapse-item title="音量设置" name="2">
-                    <el-form label-width="80px">
-                        <el-form-item label="通话音量:">
-                            <el-slider v-model="baseSet.phoneVol" :max="7" :marks="marks" style="width: 350px;"/>
-                        </el-form-item>
-                        <el-form-item label="系统音量:">
-                            <el-slider v-model="baseSet.msgVol" :max="7" :marks="marks" style="width: 350px;"/>
-                        </el-form-item>
-                        <el-form-item label="铃声音量:">
-                            <el-slider v-model="baseSet.ringVol" :max="7" :marks="marks" style="width: 350px;"/>
-                        </el-form-item>
-                        <el-button type="primary" size="small" class="button" @click="setVolume" :disabled="submitFlag">
-                            保存
-                        </el-button>
-                    </el-form>
-                </el-collapse-item>
+				<el-collapse-item title="音量设置" name="2">
+					<el-form label-width="80px">
+						<el-form-item label="通话音量:">
+							<el-slider v-model="baseSet.phoneVol" :max="7" :marks="marks" style="width: 350px;" />
+						</el-form-item>
+						<el-form-item label="系统音量:">
+							<el-slider v-model="baseSet.msgVol" :max="7" :marks="marks" style="width: 350px;" />
+						</el-form-item>
+						<el-form-item label="铃声音量:">
+							<el-slider v-model="baseSet.ringVol" :max="7" :marks="marks" style="width: 350px;" />
+						</el-form-item>
+						<el-button type="primary" size="small" class="button" @click="setVolume" :disabled="submitFlag">
+							保存
+						</el-button>
+					</el-form>
+				</el-collapse-item>
 
-                <el-collapse-item title="联系人设置" name="3">
-                    <el-form label-width="80px">
-                        <h3>SOS按键</h3>
-                        <el-form-item label="姓名:">
-                            <el-input v-model="baseSet.key0Name" size="small" class="input"/>
-                        </el-form-item>
-                        <el-form-item label="手机号码:">
-                            <el-input v-model="baseSet.key0Phone" size="small" class="input"/>
-                        </el-form-item>
-                        <h3>按键1</h3>
-                        <el-form-item label="姓名:">
-                            <el-input v-model="baseSet.key1Name" size="small" class="input"/>
-                        </el-form-item>
-                        <el-form-item label="手机号码:">
-                            <el-input v-model="baseSet.key1Phone" size="small" class="input"/>
-                        </el-form-item>
-                        <h3>按键2</h3>
-                        <el-form-item label="姓名:">
-                            <el-input v-model="baseSet.key2Name" size="small" class="input"/>
-                        </el-form-item>
-                        <el-form-item label="手机号码:">
-                            <el-input v-model="baseSet.key2Phone" size="small" class="input"/>
-                        </el-form-item>
-                        <el-button type="primary" size="small" class="button" @click="setSos" :disabled="submitFlag">保存
-                        </el-button>
-                    </el-form>
-                </el-collapse-item>
+				<el-collapse-item title="联系人设置" name="3">
+					<el-form label-width="80px">
+						<h3>SOS按键</h3>
+						<el-form-item label="姓名:">
+							<el-input v-model="baseSet.key0Name" size="small" class="input" />
+						</el-form-item>
+						<el-form-item label="手机号码:">
+							<el-input v-model="baseSet.key0Phone" size="small" class="input" />
+						</el-form-item>
+						<h3>按键1</h3>
+						<el-form-item label="姓名:">
+							<el-input v-model="baseSet.key1Name" size="small" class="input" />
+						</el-form-item>
+						<el-form-item label="手机号码:">
+							<el-input v-model="baseSet.key1Phone" size="small" class="input" />
+						</el-form-item>
+						<h3>按键2</h3>
+						<el-form-item label="姓名:">
+							<el-input v-model="baseSet.key2Name" size="small" class="input" />
+						</el-form-item>
+						<el-form-item label="手机号码:">
+							<el-input v-model="baseSet.key2Phone" size="small" class="input" />
+						</el-form-item>
+						<el-button type="primary" size="small" class="button" @click="setSos" :disabled="submitFlag">保存
+						</el-button>
+					</el-form>
+				</el-collapse-item>
 
-                <el-collapse-item title="语音播报" name="5">
-                    <el-form label-width="80px">
-                        <el-form-item label="播报类型:">
-                            <el-select placeholder="请选择" size="small" v-model="message.newsType" value="">
-                                <el-option value="1" label="实时播报"/>
-                                <el-option value="0" label="固定播报"/>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="播报时间:" v-if="message.newsType===0">
-                            <el-input v-model="message.newsTime" size="small" class="input"/>
-                        </el-form-item>
-                        <el-form-item label="播报内容:">
-                            <el-input type="textarea" v-model="message.news" style="width: 250px"/>
-                        </el-form-item>
-                        <el-button type="primary" size="small" class="button" @click="setNews" :disabled="submitFlag">保存
-                        </el-button>
-                    </el-form>
-                </el-collapse-item>
-            </el-collapse>
+				<el-collapse-item title="语音播报" name="5">
+					<el-form label-width="80px">
+						<el-form-item label="播报类型:">
+							<el-select placeholder="请选择" size="small" v-model="message.newsType" value="">
+								<el-option value="1" label="实时播报" />
+								<el-option value="0" label="固定播报" />
+							</el-select>
+						</el-form-item>
+						<el-form-item label="播报时间:" v-if="message.newsType===0">
+							<el-input v-model="message.newsTime" size="small" class="input" />
+						</el-form-item>
+						<el-form-item label="播报内容:">
+							<el-input type="textarea" v-model="message.news" style="width: 250px" />
+						</el-form-item>
+						<el-button type="primary" size="small" class="button" @click="setNews" :disabled="submitFlag">保存
+						</el-button>
+					</el-form>
+				</el-collapse-item>
+			</el-collapse>
 
-        </div>
+		</div>
 
-        <div class="right">
-            <div class="zy-main-title">控制台日志</div>
-            <div class="right__console">
-                <div v-for="log in logs" class="right__console__message">
-                    <p>{{log.time}}</p>
-                    <p>{{log.message}}</p>
-                </div>
-            </div>
-        </div>
-    </div>
+		<div class="right">
+			<div class="zy-main-title">控制台日志</div>
+			<div class="right__console">
+				<div v-for="log in logs" class="right__console__message">
+					<p>{{log.time}}</p>
+					<p>{{log.message}}</p>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                device: {
-                    num:""
-                },
-                baseSet: {},
-                message: {},
-                marks: {
-                    0: '0',
-                    1: '1',
-                    2: '2',
-                    3: '3',
-                    4: '4',
-                    5: '5',
-                    6: '6',
-                    7: '7',
-                },
-                submitFlag: false, //阻止重复提交表单
-                logs: [], //mqtt接收日志
-            };
-        },
-        activated() {
-            const deviceId = this.$route.params.deviceId;
-            if (!deviceId) {
-                this.$router.push({name: "Devices"});
-            }
-            this.initWebSocket(deviceId);
-            this.getDeviceDetail(deviceId);
-            this.getDeviceBaseSet(deviceId);
-        },
-        methods: {
+	export default {
+		data() {
+			return {
+				device: {}, //当前设备信息
+				baseSet: {}, //当前设备设置信息
+				message: {}, //语音播报消息
+				marks: {
+					0: '0',
+					1: '1',
+					2: '2',
+					3: '3',
+					4: '4',
+					5: '5',
+					6: '6',
+					7: '7',
+				},
+				submitFlag: false, //阻止重复提交表单
+				logs: [], //mqtt接收日志
+			};
+		},
+		activated() {
+			const deviceId = this.$route.params.deviceId;
+			if (!deviceId) {
+				this.$router.push({
+					name: "Devices"
+				});
+				return;
+			}
+			this.initWebSocket(deviceId);
+			this.getDeviceDetail(deviceId);
+			this.getDeviceBaseSet(deviceId);
+		},
+		methods: {
 
-            /** 重复提交锁
-             * @param {Object} flag 0 解锁 1 加锁
-             */
-            lock: function (flag) {
-                this.submitFlag = flag === 1;
-            },
-            /**
-             * 查询设备详情
-             */
-            getDeviceDetail: function (clientId) {
-                const param = {
-                    clientId: clientId,
-                };
-                this.Get(this.Global.getDeviceDetail, param).then(res => {
-                    this.device = res.data;
-                })
-            },
+			/** 重复提交锁
+			 * @param {Object} flag 0 解锁 1 加锁
+			 */
+			lock: function(flag) {
+				this.submitFlag = flag === 1;
+			},
 
-            /**
-             * 获取设备
-             */
-            getDeviceBaseSet: function (clientId) {
-                const param = {
-                    deviceId: clientId,
-                };
-                this.Get(this.Global.getBaseSet, param).then(res => {
-                    this.baseSet = res.data;
-                    console.log(res.data)
-                })
-            },
+			/**
+			 * 查询设备详情
+			 */
+			getDeviceDetail: function(clientId) {
+				const param = {
+					clientId: clientId,
+				};
+				this.Get(this.Global.getDeviceDetail, param).then(res => {
+					this.device = res.data;
+				})
+			},
 
-            /**
-             * 设置音量
-             */
-            setVolume: function () {
-                const param = {
-                    deviceId: this.device.clientId,
-                    msgVol: this.baseSet.msgVol,
-                    ringVol: this.baseSet.ringVol,
-                    phoneVol: this.baseSet.phoneVol
-                };
-                this.postGeneral(this.Global.setVolume, param);
-            },
-            /**
-             * 自动接听
-             */
-            setAutoAnswer: function (tag) {
-                const param = {
-                    deviceId: this.device.clientId,
-                    autoAnswer: tag
-                };
-                this.postGeneral(this.Global.setAutoAnswer, param);
-            },
+			/**
+			 * 获取设备
+			 */
+			getDeviceBaseSet: function(clientId) {
+				const param = {
+					deviceId: clientId,
+				};
+				this.Get(this.Global.getBaseSet, param).then(res => {
+					this.baseSet = res.data;
+				})
+			},
 
-            /**
-             * 定位频率
-             */
-            setGpsRate: function () {
-                const param = {
-                    deviceId: this.device.clientId,
-                    gpsRate: this.baseSet.gpsRate
-                };
-                this.postGeneral(this.Global.setGpsRate, param);
-            },
+			/**
+			 * 设置音量
+			 */
+			setVolume: function() {
+				const param = {
+					deviceId: this.device.clientId,
+					msgVol: this.baseSet.msgVol,
+					ringVol: this.baseSet.ringVol,
+					phoneVol: this.baseSet.phoneVol
+				};
+				this.postGeneral(this.Global.setVolume, param);
+			},
+			/**
+			 * 自动接听
+			 */
+			setAutoAnswer: function(tag) {
+				const param = {
+					deviceId: this.device.clientId,
+					autoAnswer: tag
+				};
+				this.postGeneral(this.Global.setAutoAnswer, param);
+			},
 
-            /**
-             * 连续定位
-             */
-            setContinue: function (tag) {
-                const param = {
-                    deviceId: this.device.clientId,
-                    highFreq: tag
-                };
-                this.postGeneral(this.Global.setContinue, param);
-            },
+			/**
+			 * 定位频率
+			 */
+			setGpsRate: function() {
+				const param = {
+					deviceId: this.device.clientId,
+					gpsRate: this.baseSet.gpsRate
+				};
+				this.postGeneral(this.Global.setGpsRate, param);
+			},
 
-            /**
-             * 紧急呼叫
-             */
-            setSos: function () {
-                const param = {
-                    deviceId: "33f1b050b65b4f208704d9061199a359",
-                    key0Name: this.baseSet.key0Name,
-                    key0Phone: this.baseSet.key0Phone,
-                    key1Name: this.baseSet.key1Name,
-                    key1Phone: this.baseSet.key1Phone,
-                    key2Name: this.baseSet.key2Name,
-                    key2Phone: this.baseSet.key2Phone,
-                };
-                this.postGeneral(this.Global.setSos, param);
-            },
+			/**
+			 * 连续定位
+			 */
+			setContinue: function(tag) {
+				const param = {
+					deviceId: this.device.clientId,
+					highFreq: tag
+				};
+				this.postGeneral(this.Global.setContinue, param);
+			},
 
-            /**
-             *  语音播报
-             */
-            setNews: function () {
-                const param = {
-                    deviceId: "33f1b050b65b4f208704d9061199a359",
-                    newsType: this.message.newsType,
-                    newsTime: this.message.newsTime,
-                    news: this.message.news,
-                };
-                this.lock(1);
-                this.Post(this.Global.setNews, param).then(() => {
-                    this.message = {};
-                }).finally(() => {
-                    this.lock(0);
-                })
-            },
+			/**
+			 * 紧急呼叫
+			 */
+			setSos: function() {
+				const param = {
+					deviceId: this.device.clientId,
+					key0Name: this.baseSet.key0Name,
+					key0Phone: this.baseSet.key0Phone,
+					key1Name: this.baseSet.key1Name,
+					key1Phone: this.baseSet.key1Phone,
+					key2Name: this.baseSet.key2Name,
+					key2Phone: this.baseSet.key2Phone,
+				};
+				this.postGeneral(this.Global.setSos, param);
+			},
 
+			/**
+			 *  语音播报
+			 */
+			setNews: function() {
+				const param = {
+					deviceId: this.device.clientId,
+					newsType: this.message.newsType,
+					newsTime: this.message.newsTime,
+					news: this.message.news,
+				};
+				this.lock(1);
+				this.Post(this.Global.setNews, param).then(() => {
+					this.message = {};
+				}).finally(() => {
+					this.lock(0);
+				})
+			},
 
-            /**
-             * 通用发送设置请求
-             * @param {Object} url 请求 地址
-             * @param {Object} param 请求参数
-             */
-            postGeneral(url, param) {
-                this.lock(1);
-                this.Post(url, param).then(() => {
-                    this.getDeviceBaseSet(param.deviceId);
-                }).finally(() => {
-                    this.lock(0);
-                })
-            },
+			/**
+			 * 通用发送设置请求
+			 * @param {Object} url 请求 地址
+			 * @param {Object} param 请求参数
+			 */
+			postGeneral(url, param) {
+				this.lock(1);
+				this.Post(url, param).then(() => {
+					this.getDeviceBaseSet(param.deviceId);
+				}).finally(() => {
+					this.lock(0);
+				})
+			},
 
-            /**
-             * 初始化WebSocket连接
-             */
-            initWebSocket: function (clientId) {
-                const that = this;
-                const socket = new WebSocket(this.Global.webSocket + clientId);
-                socket.onmessage = function (evt) {
-                    const jsonObj = JSON.parse(evt.data);
-                    const message = {
-                        m: jsonObj.m,
-                        r: jsonObj.r,
-                        t: jsonObj.t,
-                        data: jsonObj.data
-                    };
-                    const object = {
-                        time: that.formatDate(new Date()),
-                        message: JSON.stringify(message, null, 4)
-                    };
-                    that.logs.push(object);
-                }
-            },
-            /**
-             * 格式化时间
-             */
-            formatDate: function (date) {
-                const d = new Date(date);
-                const y = d.getFullYear(); // 年份
-                const m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
-                const r = d.getDate().toString().padStart(2, '0');// 日
-                const hh = d.getHours().toString().padStart(2, '0');// 小时
-                const mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
-                const ss = d.getSeconds().toString().padStart(2, '0');// 秒
-                return `${y}-${m}-${r} ${hh}:${mm}:${ss}` // es6 字符串模板
-            }
-        },
+			/**
+			 * 初始化WebSocket连接
+			 */
+			initWebSocket: function(clientId) {
+				const that = this;
+				const socket = new WebSocket(this.Global.webSocket + clientId);
+				socket.onmessage = function(evt) {
+					const jsonObj = JSON.parse(evt.data);
+					const message = {
+						m: jsonObj.m,
+						r: jsonObj.r,
+						t: jsonObj.t,
+						data: jsonObj.data
+					};
+					const object = {
+						time: that.formatDate(new Date()),
+						message: JSON.stringify(message, null, 4)
+					};
+					that.logs.push(object);
+				}
+			},
+			/**
+			 * 格式化时间
+			 */
+			formatDate: function(date) {
+				const d = new Date(date);
+				const y = d.getFullYear(); // 年份
+				const m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
+				const r = d.getDate().toString().padStart(2, '0'); // 日
+				const hh = d.getHours().toString().padStart(2, '0'); // 小时
+				const mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
+				const ss = d.getSeconds().toString().padStart(2, '0'); // 秒
+				return `${y}-${m}-${r} ${hh}:${mm}:${ss}` // es6 字符串模板
+			}
+		},
 
-    }
+	}
 </script>
 
 <style scoped lang="scss">
-    .zy-template {
-        overflow: hidden;
-        height: 100%;
+	.zy-template {
+		overflow: hidden;
+		height: 100%;
 
-        .left {
-            width: 49%;
-            float: left;
-            height: 100%;
-            overflow-y: scroll;
+		.left {
+			width: 49%;
+			float: left;
+			height: 100%;
+			overflow-y: scroll;
 
-            &__baseInfo {
-                & .el-form-item {
-                    margin-bottom: 10px;
-                    width: 300px;
-                }
-            }
+			&__baseInfo {
+				& .el-form-item {
+					margin-bottom: 10px;
+					width: 300px;
+				}
+			}
 
-            &__set {
-                & .input {
-                    width: 230px;
-                }
+			&__set {
+				& .input {
+					width: 230px;
+				}
 
-                & .el-form-item {
-                    margin-bottom: 10px;
-                }
+				& .el-form-item {
+					margin-bottom: 10px;
+				}
 
-                & .el-slider {
-                    margin-left: 10px;
-                }
-            }
+				& .el-slider {
+					margin-left: 10px;
+				}
+			}
 
-            & .button {
-                margin-left: 80px;
-                margin-top: 20px;
-            }
-        }
+			& .button {
+				margin-left: 80px;
+				margin-top: 20px;
+			}
+		}
 
-        .right {
-            width: 49%;
-            float: right;
-            height: 100%;
+		.right {
+			width: 49%;
+			float: right;
+			height: 100%;
 
-            &__console {
-                box-sizing: border-box;
-                padding: 10px;
-                overflow-x: hidden;
-                overflow-y: scroll;
-                word-wrap: break-word;
-                background-color: white;
-                width: 100%;
-                height: 100%;
-                border-radius: 5px;
+			&__console {
+				box-sizing: border-box;
+				padding: 10px;
+				overflow-x: hidden;
+				overflow-y: scroll;
+				word-wrap: break-word;
+				background-color: white;
+				width: 100%;
+				height: 100%;
+				border-radius: 5px;
 
-                &__message {
-                    font-size: 14px;
-                    width: 100%;
-                    margin-bottom: 10px;
+				&__message {
+					font-size: 14px;
+					width: 100%;
+					margin-bottom: 10px;
 
-                    & p {
-                        white-space: pre-wrap;
-                        margin: 5px 0;
-                    }
+					& p {
+						white-space: pre-wrap;
+						margin: 5px 0;
+					}
 
-                    & p:first-child {
-                        color: #39b54a;
-                    }
-                }
-            }
-        }
-    }
+					& p:first-child {
+						color: #39b54a;
+					}
+				}
+			}
+		}
+	}
 </style>

src/views/users/users.vue

@@ -31,7 +31,7 @@
 				<el-table-column prop="nickname" label="昵称" width="120" min-width="10%" />
 				<el-table-column prop="gender" label="性别" width="80" min-width="5%" />
 				<el-table-column prop="area" label="地区" width="250" min-width="20%" />
-				<el-table-column prop="openId" label="微信open-id" width="250" min-width="10%" />
+				<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%" />