|
|
@@ -1,385 +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">
|
|
|
- <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: {},
|
|
|
- baseSet: {},
|
|
|
- message: {},
|
|
|
- marks: {
|
|
|
- 0: '0',
|
|
|
- 1: '1',
|
|
|
- 2: '2',
|
|
|
- 3: '3',
|
|
|
- 4: '4',
|
|
|
- 5: '5',
|
|
|
- 6: '6',
|
|
|
- 7: '7',
|
|
|
- },
|
|
|
- submitFlag: false, //阻止重复提交表单
|
|
|
- logs: [], //mqtt接收日志
|
|
|
- };
|
|
|
- },
|
|
|
- mounted: function() {
|
|
|
- this.initWebSocket("76f7c742428b4720b363d95d8292b357");
|
|
|
- this.getDeviceDetail("76f7c742428b4720b363d95d8292b357");
|
|
|
- this.getDeviceBaseSet("76f7c742428b4720b363d95d8292b357");
|
|
|
- },
|
|
|
- methods: {
|
|
|
+ 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: {
|
|
|
|
|
|
- /** 重复提交锁
|
|
|
- * @param {Object} flag 0 解锁 1 加锁
|
|
|
- */
|
|
|
- lock: function(flag) {
|
|
|
- this.submitFlag = flag === 1 ? true : false;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 查询设备详情
|
|
|
- */
|
|
|
- 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;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询设备详情
|
|
|
+ */
|
|
|
+ getDeviceDetail: function (clientId) {
|
|
|
+ const param = {
|
|
|
+ clientId: clientId,
|
|
|
+ };
|
|
|
+ this.Get(this.Global.getDeviceDetail, param).then(res => {
|
|
|
+ this.device = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 获取设备
|
|
|
- */
|
|
|
- getDeviceBaseSet: function(clientId) {
|
|
|
- const param = {
|
|
|
- deviceId: clientId,
|
|
|
- };
|
|
|
- this.Get(this.Global.getBaseSet, param).then(res => {
|
|
|
- this.baseSet = res.data;
|
|
|
- console.log(res.data)
|
|
|
- })
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 获取设备
|
|
|
+ */
|
|
|
+ getDeviceBaseSet: function (clientId) {
|
|
|
+ const param = {
|
|
|
+ deviceId: clientId,
|
|
|
+ };
|
|
|
+ this.Get(this.Global.getBaseSet, param).then(res => {
|
|
|
+ this.baseSet = res.data;
|
|
|
+ console.log(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);
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 设置音量
|
|
|
+ */
|
|
|
+ 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);
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 定位频率
|
|
|
- */
|
|
|
- setGpsRate: function() {
|
|
|
- const param = {
|
|
|
- deviceId: this.device.clientId,
|
|
|
- gpsRate: this.baseSet.gpsRate
|
|
|
- }
|
|
|
- this.postGeneral(this.Global.setGpsRate, param);
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 定位频率
|
|
|
+ */
|
|
|
+ setGpsRate: function () {
|
|
|
+ const param = {
|
|
|
+ deviceId: this.device.clientId,
|
|
|
+ gpsRate: this.baseSet.gpsRate
|
|
|
+ };
|
|
|
+ this.postGeneral(this.Global.setGpsRate, param);
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 连续定位
|
|
|
- */
|
|
|
- setContinue: function(tag) {
|
|
|
- const param = {
|
|
|
- deviceId: this.device.clientId,
|
|
|
- highFreq: tag
|
|
|
- }
|
|
|
- this.postGeneral(this.Global.setContinue, param);
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 连续定位
|
|
|
+ */
|
|
|
+ setContinue: function (tag) {
|
|
|
+ const param = {
|
|
|
+ deviceId: this.device.clientId,
|
|
|
+ highFreq: tag
|
|
|
+ };
|
|
|
+ this.postGeneral(this.Global.setContinue, 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);
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 紧急呼叫
|
|
|
+ */
|
|
|
+ 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);
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 语音播报
|
|
|
- */
|
|
|
- setNews: function() {
|
|
|
- const param = {
|
|
|
- deviceId: "33f1b050b65b4f208704d9061199a359",
|
|
|
- newsType: this.message.newsType,
|
|
|
- newsTime: this.message.newsTime,
|
|
|
- news: this.message.news,
|
|
|
- }
|
|
|
- console.log(param)
|
|
|
- this.lock(1);
|
|
|
- this.Post(this.Global.setNews, param).then(res => {
|
|
|
- this.message = {};
|
|
|
- }).finally(() => {
|
|
|
- this.lock(0);
|
|
|
- })
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 语音播报
|
|
|
+ */
|
|
|
+ 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);
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
|
|
|
- /**
|
|
|
- * 通用发送设置请求
|
|
|
- * @param {Object} url 请求 地址
|
|
|
- * @param {Object} param 请求参数
|
|
|
- */
|
|
|
- postGeneral(url, param) {
|
|
|
- this.lock(1);
|
|
|
- this.Post(url, param).then(res => {
|
|
|
- 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>
|
