From 98a6297b10a4b97c3022f84d3ba7908c178d9ee0 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 20 十月 2020 10:30:10 +0800
Subject: [PATCH] 应用中心安装提示bug修复
---
src/pages/gb28181/index/App.vue | 398 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 264 insertions(+), 134 deletions(-)
diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue
index ee9ebbc..2bf92c4 100644
--- a/src/pages/gb28181/index/App.vue
+++ b/src/pages/gb28181/index/App.vue
@@ -1,95 +1,195 @@
<template>
- <div class="s-basic-setting">
- <!-- GB28181璁剧疆 -->
- <el-form :model="gb28181" :rules="rules" label-width="140px" class="alarmSetting" ref="gb28181">
- <!-- <el-form-item label="鍥介檯鏈嶅姟鍣↖P" prop="ServerIp">
- <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input>
- </el-form-item>-->
+ <div class="s-basic-setting" @contextmenu.prevent="toOpenMenuList">
+ <el-menu
+ :default-openeds="openeds"
+ background-color="#fff"
+ text-color="#303133"
+ active-text-color="#409EFF"
+ style="height: 100%;"
+ class="menu-css"
+ @open="menuOpen"
+ @close="menuClose"
+ >
+ <el-submenu index="0">
+ <template slot="title">
+ <b class="tree-font">鍥介檯ID</b>
+ </template>
+ <el-menu-item-group class="item-group">
+ <!-- GB28181璁剧疆 -->
+ <el-form
+ :model="gb28181"
+ :rules="rules"
+ label-width="130px"
+ class="alarmSetting"
+ ref="gb28181"
+ >
+ <!-- <el-form-item label="鍥介檯鏈嶅姟鍣↖P" prop="ServerIp">
+ <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input>
+ </el-form-item>-->
- <div style="text-align: left;margin-bottom: 22px;">
- <el-radio-group v-model="gb28181.idType">
- <el-radio :label="0">杈撳叆宸叉湁ID</el-radio>
- <el-radio :label="1">鐢熸垚鏂扮殑ID</el-radio>
- </el-radio-group>
- </div>
+ <div style="text-align: left;margin-bottom: 16px;">
+ <el-radio-group v-model="gb28181.idType">
+ <el-radio :label="0">杈撳叆宸叉湁ID</el-radio>
+ <el-radio :label="1">鐢熸垚鏂扮殑ID</el-radio>
+ </el-radio-group>
+ </div>
- <el-form-item label="鎵�鍦ㄥ湴">
- <el-select
- v-model="locationCity.province"
- @change="changeProvince"
- size="small"
- placeholder="璇烽�夋嫨鐪佷唤"
- >
- <el-option
- v-for="item in locationCity.provinceOptions"
- :key="item.id"
- :label="item.name"
- size="small"
- :value="item.id"
- ></el-option>
- </el-select>
- <el-select
- class="ml10 mr10"
- v-model="locationCity.city"
- :disabled="!locationCity.province"
- @change="changeCity"
- size="small"
- placeholder="璇烽�夋嫨鍩庡競"
- >
- <el-option
- v-for="item in locationCity.cityOptions"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- <el-select
- v-model="locationCity.county"
- :disabled="!locationCity.city"
- size="small"
- placeholder="璇烽�夋嫨鍖哄幙"
- >
- <el-option
- v-for="item in locationCity.countyOptions"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- <el-button
- type="text"
- style="position: absolute"
- v-show="gb28181.idType === 1"
- @click="newGBID"
- >鐢熸垚ID</el-button>
- </el-form-item>
+ <el-form-item label="鎵�鍦ㄥ湴">
+ <el-select
+ v-model="locationCity.province"
+ @change="changeProvince"
+ size="small"
+ placeholder="璇烽�夋嫨鐪佷唤"
+ :disabled="gb28181.idType === 0"
+ >
+ <el-option
+ v-for="item in locationCity.provinceOptions"
+ :key="item.id"
+ :label="item.name"
+ size="small"
+ :value="item.id"
+ ></el-option>
+ </el-select>
+ <el-select
+ class="ml10 mr10"
+ v-model="locationCity.city"
+ :disabled="!locationCity.province"
+ @change="changeCity"
+ size="small"
+ placeholder="璇烽�夋嫨鍩庡競"
+ >
+ <el-option
+ v-for="item in locationCity.cityOptions"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ ></el-option>
+ </el-select>
+ <el-select
+ v-model="locationCity.county"
+ :disabled="!locationCity.city"
+ size="small"
+ placeholder="璇烽�夋嫨鍖哄幙"
+ >
+ <el-option
+ v-for="item in locationCity.countyOptions"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ ></el-option>
+ </el-select>
+ <el-button
+ type="text"
+ style="position: absolute"
+ v-show="gb28181.idType === 1"
+ @click="newGBID"
+ >鐢熸垚ID</el-button
+ >
+ </el-form-item>
- <!-- <el-form-item label="鍥介檯鏈嶅姟鍣ㄧ鍙�" prop="GbServerPort">
- <el-input v-model.number="gb28181.ServerPort" placeholder="璇疯緭鍏�" size="small"></el-input>
- </el-form-item>-->
+ <!-- <el-form-item label="鍥介檯鏈嶅姟鍣ㄧ鍙�" prop="GbServerPort">
+ <el-input v-model.number="gb28181.ServerPort" placeholder="璇疯緭鍏�" size="small"></el-input>
+ </el-form-item>-->
- <el-form-item label="鍥芥爣ID">
- <el-input v-model="gb28181.PublicId" placeholder="璇疯緭鍏�" size="small"></el-input>
- </el-form-item>
+ <el-form-item label="鍥芥爣ID">
+ <el-input
+ v-model="gb28181.PublicId"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ :disabled="gb28181.idType === 1"
+ ></el-input>
+ </el-form-item>
- <el-form-item label="鍥芥爣绔彛" prop="ServerPort">
- <el-input v-model.number="gb28181.GbServerPort" placeholder="璇疯緭鍏�" size="small"></el-input>
- </el-form-item>
+ <el-form-item label="鍥芥爣绔彛" prop="ServerPort">
+ <el-input
+ v-model.number="gb28181.GbServerPort"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ ></el-input>
+ </el-form-item>
- <el-form-item label="寮�鍚壌鏉�">
- <el-switch v-model="gb28181.IsAuth"></el-switch>
- </el-form-item>
+ <el-form-item label="寮�鍚壌鏉�">
+ <el-switch v-model="gb28181.IsAuth"></el-switch>
+ </el-form-item>
- <el-form-item label="閴存潈瀵嗙爜" v-show="gb28181.IsAuth">
- <el-input v-model="gb28181.Password" placeholder="璇疯緭鍏�" size="small"></el-input>
- </el-form-item>
+ <el-form-item label="閴存潈瀵嗙爜" v-show="gb28181.IsAuth">
+ <el-input
+ v-model="gb28181.Password"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ ></el-input>
+ </el-form-item>
- <el-col :span="12">
- <el-form-item>
- <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button>
- </el-form-item>
- </el-col>
- </el-form>
+ <el-form-item>
+ <el-button type="primary" @click="submitGB28281" size="small"
+ >淇濆瓨</el-button
+ >
+ </el-form-item>
+ </el-form>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="1">
+ <template slot="title">
+ <b class="tree-font">鎺ュ叆骞冲彴鍒楄〃</b>
+ </template>
+ <el-menu-item-group class="item-group">
+ <div>
+ <el-table
+ :data="tableList"
+ border
+ fit
+ highlight-current-row
+ style="width: 100%; color:#000"
+ :header-cell-style="{ background: '#f8f8f8', color: '#222222', height:'30px' }"
+ >
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ align="center"
+ width="50"
+ ></el-table-column>
+ <el-table-column
+ prop="name"
+ label="鍚嶇О"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ prop="id"
+ label="ID"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ prop="ip"
+ label="IP"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ prop="status"
+ label="鐘舵��"
+ align="center"
+ ></el-table-column>
+ <el-table-column
+ prop="mark"
+ label="澶囨敞"
+ align="center"
+ ></el-table-column>
+ </el-table>
+ </div>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="2">
+ <template slot="title">
+ <b class="tree-font">鍥介檯鎽勫儚鏈�</b>
+ </template>
+ <el-menu-item-group class="item-group">
+ <div>
+ <div>
+ <el-button type="primary" size="small">鍒锋柊</el-button>
+ </div>
+ </div>
+ </el-menu-item-group>
+ </el-submenu>
+ </el-menu>
</div>
</template>
@@ -99,56 +199,58 @@
saveGB28181Config,
getGb28181AreaList,
newGb28181ID
-} from "./api";
+} from './api'
-import { isPort, isIPv4 } from "@/scripts/validate";
-
+import { isPort, isIPv4 } from '@/scripts/validate'
+import bus from '@/plugin/bus'
export default {
- name: "Gb28181Setting",
-
+ name: 'Gb28181Setting',
directives: {
focus: {
- inserted: function (el) {
+ inserted: function(el) {
el.querySelector('input').focus()
}
}
},
+
data() {
return {
+ openeds: ['0'],
gb28181: {},
-
+ tableList: [],
+ idType: 1,
rules: {
ip: [
{
required: true,
- message: "璇疯緭鍏P鍦板潃",
- trigger: "change"
+ message: '璇疯緭鍏P鍦板潃',
+ trigger: 'change'
},
- { validator: isIPv4, trigger: "change" }
+ { validator: isIPv4, trigger: 'change' }
],
ServerIp: [
{
required: true,
- message: "璇疯緭鍏P鍦板潃",
- trigger: "change"
+ message: '璇疯緭鍏P鍦板潃',
+ trigger: 'change'
},
- { validator: isIPv4, trigger: "change" }
+ { validator: isIPv4, trigger: 'change' }
],
ServerPort: [
{
required: true,
- message: "璇疯緭鍏ョ鍙�",
- trigger: "change"
+ message: '璇疯緭鍏ョ鍙�',
+ trigger: 'change'
},
- { validator: isPort, trigger: "change" }
+ { validator: isPort, trigger: 'change' }
],
GbServerPort: [
{
required: true,
- message: "璇疯緭鍏ョ鍙�",
- trigger: "change"
+ message: '璇疯緭鍏ョ鍙�',
+ trigger: 'change'
},
- { validator: isPort, trigger: "change" }
+ { validator: isPort, trigger: 'change' }
]
},
locationCity: {
@@ -158,89 +260,113 @@
provinceOptions: [],
cityOptions: [],
countyOptions: []
- },
- };
+ }
+ }
},
mounted() {
- this.$nextTick(() => {
- this.initGB28181Conf();
- });
+
+ //this.$nextTick(()=>{
+ this.initGB28181Conf()
+ //})
},
methods: {
initGB28181Conf() {
getGB28181Config().then(rsp => {
if (rsp && rsp.success) {
- this.gb28181 = rsp.data;
- this.gb28181.idType = 0;
+ this.gb28181 = rsp.data
+ //this.gb28181.idType = 0;
+ this.$set(this.gb28181, 'idType', 0)
}
- });
+ })
getGb28181AreaList().then(rsp => {
if (rsp && rsp.success) {
- this.locationCity.provinceOptions = rsp.data;
+ this.locationCity.provinceOptions = rsp.data
}
})
},
submitGB28281() {
- this.$refs["gb28181"].validate(valid => {
+ this.$refs['gb28181'].validate(valid => {
if (valid) {
saveGB28181Config(this.gb28181).then(rsp => {
if (rsp && rsp.success) {
this.$notify({
- type: "success",
- message: "GB28181璁剧疆淇濆瓨鎴愬姛"
- });
+ type: 'success',
+ message: 'GB28181璁剧疆淇濆瓨鎴愬姛'
+ })
}
- });
+ })
} else {
- console.log("error submit!!");
- return false;
+ console.log('error submit!!')
+ return false
}
- });
+ })
},
changeProvince() {
- let pid = this.locationCity.province;
+ let pid = this.locationCity.province
getGb28181AreaList({ parentId: pid }).then(rsp => {
if (rsp && rsp.success) {
- this.locationCity.cityOptions = rsp.data;
- this.locationCity.city = this.locationCity.cityOptions[0].id;
- this.changeCity();
+ this.locationCity.cityOptions = rsp.data
+ this.locationCity.city = this.locationCity.cityOptions[0].id
+ this.changeCity()
}
})
},
changeCity() {
- let pid = this.locationCity.city;
+ let pid = this.locationCity.city
getGb28181AreaList({ parentId: pid }).then(rsp => {
if (rsp && rsp.success) {
- this.locationCity.countyOptions = rsp.data;
- this.locationCity.county = this.locationCity.countyOptions[0].id;
+ this.locationCity.countyOptions = rsp.data
+ this.locationCity.county = this.locationCity.countyOptions[0].id
}
})
},
newGBID() {
- let cCode = this.locationCity.county + "";
+ let cCode = this.locationCity.county + ''
newGb28181ID({ code: cCode }).then(rsp => {
if (rsp && rsp.success) {
- this.gb28181.PublicId = rsp.data;
+ this.gb28181.PublicId = rsp.data
}
})
+ },
+ menuOpen(){
+
+ },
+ menuClose(){
+
+ },
+ toOpenMenuList(e){
+ debugger
+ let t = e.clientY - this.$el.offsetTop+30;
+ let l = e.clientX-this.$el.offsetLeft;
+
+ window.parent.postMessage({source:location.href.split('/')[location.href.split('/').length-1], trigger: 'contextmenu', menuT:t, menuL:l},"*");
+ return false;
}
}
-};
+}
</script>
<style lang="scss">
.s-basic-setting {
- width: 100%;
height: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ .item-group {
+ padding: 0 15px;
+ margin-bottom: 15px;
+ }
.el-form {
- width: 1000px;
- margin-top: 30px;
- // margin-left: -80px;
.el-form-item {
text-align: left;
+ margin-bottom: 16px;
+ &:last-of-type {
+ width: 490px;
+ }
.el-button {
float: right;
}
-
+ .el-select {
+ margin-right: 10px;
+ }
.el-form-item__content {
text-align: left;
input {
@@ -258,6 +384,10 @@
.el-form-item__label {
text-align: left;
}
+ &.el-form-item.is-required:not(.is-no-asterisk)
+ > .el-form-item__label:before {
+ margin-left: -9px;
+ }
}
}
.alarmSetting {
--
Gitblit v1.8.0