From 98a44e94ecc76abd72b9817648ca4b91469b936a Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期六, 08 八月 2020 16:04:16 +0800
Subject: [PATCH] 添加退出登录,布局调整
---
src/pages/gb28181/index/App.vue | 207 +++++++++++++++++++++++++++++++++++++--------------
1 files changed, 150 insertions(+), 57 deletions(-)
diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue
index 10e2b47..3b6935b 100644
--- a/src/pages/gb28181/index/App.vue
+++ b/src/pages/gb28181/index/App.vue
@@ -16,12 +16,18 @@
</template>
<el-menu-item-group class="item-group">
<!-- GB28181璁剧疆 -->
- <el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="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;">
+ <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>
@@ -76,7 +82,8 @@
style="position: absolute"
v-show="gb28181.idType === 1"
@click="newGBID"
- >鐢熸垚ID</el-button>
+ >鐢熸垚ID</el-button
+ >
</el-form-item>
<!-- <el-form-item label="鍥介檯鏈嶅姟鍣ㄧ鍙�" prop="GbServerPort">
@@ -84,11 +91,19 @@
</el-form-item>-->
<el-form-item label="鍥芥爣ID">
- <el-input v-model="gb28181.PublicId" placeholder="璇疯緭鍏�" size="small"></el-input>
+ <el-input
+ v-model="gb28181.PublicId"
+ 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-input
+ v-model.number="gb28181.GbServerPort"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ ></el-input>
</el-form-item>
<el-form-item label="寮�鍚壌鏉�">
@@ -96,13 +111,80 @@
</el-form-item>
<el-form-item label="閴存潈瀵嗙爜" v-show="gb28181.IsAuth">
- <el-input v-model="gb28181.Password" placeholder="璇疯緭鍏�" size="small"></el-input>
+ <el-input
+ v-model="gb28181.Password"
+ placeholder="璇疯緭鍏�"
+ size="small"
+ ></el-input>
</el-form-item>
- <el-form-item >
- <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button>
+ <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>
@@ -115,57 +197,57 @@
saveGB28181Config,
getGb28181AreaList,
newGb28181ID
-} from "./api";
+} from './api'
-import { isPort, isIPv4 } from "@/scripts/validate";
+import { isPort, isIPv4 } from '@/scripts/validate'
export default {
- name: "Gb28181Setting",
+ name: 'Gb28181Setting',
directives: {
focus: {
- inserted: function (el) {
+ inserted: function(el) {
el.querySelector('input').focus()
}
}
},
data() {
return {
- gb28181: {
-
- },
+ 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: {
@@ -175,92 +257,100 @@
provinceOptions: [],
cityOptions: [],
countyOptions: []
- },
- };
+ }
+ }
},
mounted() {
//this.$nextTick(()=>{
- this.initGB28181Conf();
+ this.initGB28181Conf()
//})
},
methods: {
initGB28181Conf() {
getGB28181Config().then(rsp => {
if (rsp && rsp.success) {
- this.gb28181 = rsp.data;
+ this.gb28181 = rsp.data
//this.gb28181.idType = 0;
- this.$set(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(){
+
}
}
-};
+}
</script>
<style lang="scss">
.s-basic-setting {
height: 100%;
- padding: 30px;
+ padding: 20px;
box-sizing: border-box;
+ .item-group {
+ padding: 0 15px;
+ margin-bottom: 15px;
+ }
.el-form {
.el-form-item {
text-align: left;
- &:last-of-type{
+ margin-bottom: 16px;
+ &:last-of-type {
width: 490px;
}
.el-button {
float: right;
}
- .el-select{
- margin-right:10px;
+ .el-select {
+ margin-right: 10px;
}
.el-form-item__content {
text-align: left;
@@ -279,8 +369,11 @@
.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 {
.el-input {
--
Gitblit v1.8.0