From 27e9c1b8ae1289721e2385c1ef853ce66b459af5 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期二, 25 五月 2021 17:40:36 +0800 Subject: [PATCH] 更新国标配置 --- src/pages/gb28181/index/App.vue | 232 ++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 137 insertions(+), 95 deletions(-) diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue index 4ec547c..3215255 100644 --- a/src/pages/gb28181/index/App.vue +++ b/src/pages/gb28181/index/App.vue @@ -10,106 +10,113 @@ @tab-click="hanleTabClick" > <el-tab-pane label="鍥芥爣ID" name="gb28181"> - <!-- GB28181璁剧疆 --> - <el-form - :model="gb28181" - :rules="rules" - label-width="130px" - class="alarmSetting" - ref="gb28181" - > - <!-- <el-form-item label="鍥介檯鏈嶅姟鍣↖P" prop="ServerIp"> + <div style="width: 775px"> + <!-- 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>--> + </el-form-item>--> - <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> + <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="璇烽�夋嫨鐪佷唤" - :disabled="gb28181.idType === 0" - > - <el-option - v-for="item in locationCity.provinceOptions" - :key="item.id" - :label="item.name" + <el-form-item label="鎵�鍦ㄥ湴"> + <el-select + v-model="locationCity.province" + @change="changeProvince" 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> + 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-form-item label="鍥介檯鏈嶅姟鍣ㄧ鍙�" prop="GbServerPort"> <el-input v-model.number="gb28181.ServerPort" placeholder="璇疯緭鍏�" size="small"></el-input> - </el-form-item>--> + </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="鍥芥爣ID"> + <el-input + v-model="gb28181.PublicId" + placeholder="璇疯緭鍏�" + size="small" + :disabled="gb28181.idType === 1" + ></el-input> + </el-form-item> - <el-form-item label="鍥芥爣绔彛" prop="GbServerPort"> - <el-input v-model.number="gb28181.GbServerPort" placeholder="璇疯緭鍏�" size="small"></el-input> - </el-form-item> + <el-form-item label="鍥芥爣绔彛" prop="GbServerPort"> + <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="寮�鍚壌鏉�" style="text-align: left"> + <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="閴存潈瀵嗙爜"> + <el-input + v-model="gb28181.Password" + placeholder="璇疯緭鍏�" + size="small" + :disabled="!gb28181.IsAuth" + ></el-input> + </el-form-item> - <el-form-item> - <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button> - </el-form-item> - </el-form> + <el-form-item style="float: right"> + <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button> + </el-form-item> + </el-form> + </div> </el-tab-pane> <el-tab-pane label="鎺ュ叆骞冲彴鍒楄〃" name="subordinates"> @@ -128,16 +135,16 @@ <el-table-column prop="status" label="鐘舵��" align="center"> <template slot-scope="scope"> <span - :style="scope.row.active ? `color:#047d19` : 'color:#f11a1a;' " - >{{scope.row.active ? "鍦ㄧ嚎": "绂荤嚎"}}</span> + :style="scope.row.alive ? `color:#047d19` : 'color:#f11a1a;' " + >{{scope.row.alive ? "鍦ㄧ嚎": "绂荤嚎"}}</span> </template> </el-table-column> - <el-table-column prop="mark" label="澶囨敞" align="center"></el-table-column> + <el-table-column prop="corp" label="澶囨敞" align="center"></el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="鍥芥爣鎽勫儚鏈�" name="cameras"> <div style="text-align:left"> - <el-button type="primary" size="small" @click="getCamerasFromVideosvr">鍒锋柊</el-button> + <el-button type="primary" size="small" @click="updateCamerasFromVideosvr">鍒锋柊</el-button> </div> <div class="camera-title"> <b>鍥芥爣鎽勫儚鏈洪厤缃�</b> @@ -150,8 +157,18 @@ :node="TreeDataPool.treeData" :height="treeHeight" :setting="treeSettings" + style="width:600px;min-height:500px" /> - + <div class="base-image" v-loading="TreeDataPool.baseImageLoading"> + <span>{{TreeDataPool.cameraNameForBaseImage}}</span> + <div class="camera-image" v-show="TreeDataPool.cameraNameForBaseImage.length"> + <img + :src="'data:image/png;base64,' + TreeDataPool.gb28181CameraBaseImage" + width="450px" + alt + /> + </div> + </div> <el-divider></el-divider> <span class="camera-seleted-text"> @@ -256,6 +273,12 @@ mounted() { this.TreeDataPool.multiple = true; + // 璁板綍鐩綍鏄惁鎶樺彔 + let foldList = localStorage.getItem("ztree_fold_list") + if (foldList) { + this.TreeDataPool.foldNodeList = JSON.parse(foldList) + } + this.initGB28181Conf(); }, methods: { @@ -274,10 +297,17 @@ }, async getCamerasFromVideosvr() { this.loading = true; - await this.TreeDataPool.fetchVideosvrCameras(); + await this.TreeDataPool.fetchVideosvrCameras(false); + this.loading = false; + }, + async updateCamerasFromVideosvr() { + this.loading = true; + await this.TreeDataPool.fetchVideosvrCameras(true); this.loading = false; }, saveChecked() { + localStorage.setItem('ztree_fold_list', JSON.stringify(this.TreeDataPool.foldNodeList)) + if (this.TreeDataPool.gb28181CheckedCount > 500) { this.$message({ type: "warning", @@ -499,5 +529,17 @@ color: #3d68e1; } } + + .base-image { + position: absolute; + top: 18%; + left: 57%; + width: 450px; + + .camera-image { + background-color: black; + height: 254px; + } + } } </style> -- Gitblit v1.8.0