| | |
| | | <el-tab-pane label="国标ID" name="gb28181">
|
| | | <div style="width: 775px">
|
| | | <!-- 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="国际服务器IP" prop="ServerIp">
|
| | | <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input>
|
| | | </el-form-item>-->
|
| | |
| | | :value="item.id"
|
| | | ></el-option>
|
| | | </el-select>
|
| | | <el-button
|
| | | type="text"
|
| | | style="position: absolute"
|
| | | v-show="gb28181.idType === 1"
|
| | | @click="newGBID"
|
| | | <el-button type="text" style="position: absolute" v-show="gb28181.idType === 1" @click="newGBID"
|
| | | >生成ID</el-button
|
| | | >
|
| | | </el-form-item>
|
| | |
| | | </el-form-item>
|
| | |
|
| | | <el-form-item label="国标端口" prop="GbServerPort">
|
| | | <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="开启鉴权" style="text-align: left">
|
| | |
| | | </el-form-item>
|
| | |
|
| | | <el-form-item style="float: right">
|
| | | <el-button type="primary" @click="submitGB28281" size="small"
|
| | | >保存</el-button
|
| | | >
|
| | | <el-button type="primary" @click="submitGB28281" size="small">保存</el-button>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | | </div>
|
| | |
| | | :header-cell-style="{
|
| | | background: '#f8f8f8',
|
| | | color: '#222222',
|
| | | height: '30px',
|
| | | 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="publicid"
|
| | | label="ID"
|
| | | align="center"
|
| | | ></el-table-column>
|
| | | <el-table-column
|
| | | prop="ip"
|
| | | label="IP"
|
| | | align="center"
|
| | | ></el-table-column>
|
| | | <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="publicid" 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">
|
| | | <template slot-scope="scope">
|
| | | <span
|
| | | :style="scope.row.alive ? `color:#047d19` : 'color:#f11a1a;'"
|
| | | >{{ scope.row.alive ? "在线" : "离线" }}</span
|
| | | >
|
| | | <span :style="scope.row.alive ? `color:#047d19` : 'color:#f11a1a;'">{{
|
| | | scope.row.alive ? "在线" : "离线"
|
| | | }}</span>
|
| | | </template>
|
| | | </el-table-column>
|
| | | <el-table-column
|
| | | prop="corp"
|
| | | 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="updateCamerasFromVideosvr"
|
| | | >刷新</el-button
|
| | | >
|
| | | <el-button type="primary" size="small" @click="updateCamerasFromVideosvr">刷新</el-button>
|
| | | </div>
|
| | | <div class="camera-title">
|
| | | <b>国标摄像机配置</b>
|
| | |
| | | />
|
| | | <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 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>
|
| | |
| | | / {{ TreeDataPool.gb28181ChildNodeCount }} ) 路
|
| | | </span>
|
| | |
|
| | | <el-button type="primary" size="small" @click="saveChecked"
|
| | | >保存</el-button
|
| | | >
|
| | | <el-button type="primary" size="small" @click="saveChecked">保存</el-button>
|
| | | </el-tab-pane>
|
| | | </el-tabs>
|
| | | </div>
|
| | |
| | | getGb28181AreaList,
|
| | | newGb28181ID,
|
| | | getAllSubServer,
|
| | | saveGb28181CamTree,
|
| | | } from "./api";
|
| | | saveGb28181CamTree
|
| | | } from "./api"
|
| | |
|
| | | import TreeMenu from "@/components/giantTree/index";
|
| | | import { isPort, isIPv4 } from "@/scripts/validate";
|
| | | import bus from "@/plugin/bus";
|
| | | import TreeMenu from "@/components/giantTree/index"
|
| | | import { isPort, isIPv4 } from "@/scripts/validate"
|
| | | import bus from "@/plugin/bus"
|
| | | export default {
|
| | | name: "Gb28181Setting",
|
| | | components: {
|
| | | TreeMenu,
|
| | | TreeMenu
|
| | | },
|
| | | directives: {
|
| | | focus: {
|
| | | inserted: function (el) {
|
| | | el.querySelector("input").focus();
|
| | | },
|
| | | },
|
| | | el.querySelector("input").focus()
|
| | | }
|
| | | }
|
| | | },
|
| | |
|
| | | data() {
|
| | |
| | | idType: 1,
|
| | | treeSettings: {
|
| | | check: {
|
| | | enable: true,
|
| | | },
|
| | | view: {
|
| | | showLine: true,
|
| | | showIcon: true, // default to hide icon
|
| | | },
|
| | | enable: true
|
| | | }
|
| | | },
|
| | | rules: {
|
| | | ip: [
|
| | | {
|
| | | required: true,
|
| | | message: "请输入IP地址",
|
| | | trigger: "change",
|
| | | trigger: "change"
|
| | | },
|
| | | { validator: isIPv4, trigger: "change" },
|
| | | { validator: isIPv4, trigger: "change" }
|
| | | ],
|
| | | ServerIp: [
|
| | | {
|
| | | required: true,
|
| | | message: "请输入IP地址",
|
| | | trigger: "change",
|
| | | trigger: "change"
|
| | | },
|
| | | { validator: isIPv4, trigger: "change" },
|
| | | { validator: isIPv4, trigger: "change" }
|
| | | ],
|
| | | ServerPort: [
|
| | | {
|
| | | required: true,
|
| | | message: "请输入端口",
|
| | | trigger: "change",
|
| | | trigger: "change"
|
| | | },
|
| | | { validator: isPort, trigger: "change" },
|
| | | { validator: isPort, trigger: "change" }
|
| | | ],
|
| | | GbServerPort: [
|
| | | {
|
| | | required: true,
|
| | | message: "请输入端口",
|
| | | trigger: "change",
|
| | | trigger: "change"
|
| | | },
|
| | | { validator: isPort, trigger: "change" },
|
| | | ],
|
| | | { validator: isPort, trigger: "change" }
|
| | | ]
|
| | | },
|
| | | locationCity: {
|
| | | province: "",
|
| | |
| | | county: "",
|
| | | provinceOptions: [],
|
| | | cityOptions: [],
|
| | | countyOptions: [],
|
| | | },
|
| | | };
|
| | | countyOptions: []
|
| | | }
|
| | | }
|
| | | },
|
| | | mounted() {
|
| | | this.TreeDataPool.multiple = true;
|
| | | this.TreeDataPool.multiple = true
|
| | |
|
| | | // 记录目录是否折叠
|
| | | let foldList = localStorage.getItem("ztree_fold_list");
|
| | | let foldList = localStorage.getItem("ztree_fold_list")
|
| | | if (foldList) {
|
| | | this.TreeDataPool.foldNodeList = JSON.parse(foldList);
|
| | | this.TreeDataPool.foldNodeList = JSON.parse(foldList)
|
| | | }
|
| | |
|
| | | this.initGB28181Conf();
|
| | | this.initGB28181Conf()
|
| | | },
|
| | | methods: {
|
| | | hanleTabClick(tab, event) {
|
| | | if (this.activeName == "subordinates") {
|
| | | getAllSubServer().then((rsp) => {
|
| | | if (rsp && rsp.success) {
|
| | | this.subDevTable = rsp.data;
|
| | | this.subDevTable = rsp.data
|
| | | }
|
| | | });
|
| | | })
|
| | | } else if (this.activeName == "cameras") {
|
| | | this.getCamerasFromVideosvr();
|
| | | this.getCamerasFromVideosvr()
|
| | | }
|
| | | },
|
| | | async getCamerasFromVideosvr() {
|
| | | this.loading = true;
|
| | | await this.TreeDataPool.fetchVideosvrCameras(false);
|
| | | this.loading = false;
|
| | | this.loading = true
|
| | | await this.TreeDataPool.fetchVideosvrCameras(false)
|
| | | this.loading = false
|
| | | },
|
| | | async updateCamerasFromVideosvr() {
|
| | | this.loading = true;
|
| | | await this.TreeDataPool.fetchVideosvrCameras(true);
|
| | | this.loading = false;
|
| | | this.loading = true
|
| | | await this.TreeDataPool.fetchVideosvrCameras(true)
|
| | | this.loading = false
|
| | | },
|
| | | saveChecked() {
|
| | | localStorage.setItem(
|
| | | "ztree_fold_list",
|
| | | JSON.stringify(this.TreeDataPool.foldNodeList)
|
| | | );
|
| | | localStorage.setItem("ztree_fold_list", JSON.stringify(this.TreeDataPool.foldNodeList))
|
| | |
|
| | | if (this.TreeDataPool.gb28181CheckedCount > 500) {
|
| | | this.$message({
|
| | | type: "warning",
|
| | | message: "最多仅支持选择500路摄像机. 请重新选择",
|
| | | });
|
| | | message: "最多仅支持选择500路摄像机. 请重新选择"
|
| | | })
|
| | |
|
| | | return;
|
| | | return
|
| | | }
|
| | |
|
| | | this.loading = true;
|
| | | this.loading = true
|
| | |
|
| | | let treeData = this.TreeDataPool.newTreeByChecked(
|
| | | this.TreeDataPool.activeTreeData
|
| | | );
|
| | | let treeData = this.TreeDataPool.newTreeByChecked(this.TreeDataPool.activeTreeData)
|
| | |
|
| | | saveGb28181CamTree({ checkedMenus: treeData })
|
| | | .then((rsp) => {
|
| | | if (rsp && rsp.success) {
|
| | | this.$message({
|
| | | type: "success",
|
| | | message: "保存成功",
|
| | | });
|
| | | message: "保存成功"
|
| | | })
|
| | | }
|
| | | this.loading = false;
|
| | | this.loading = false
|
| | | })
|
| | | .catch((err) => {
|
| | | this.$message({
|
| | | type: "error",
|
| | | message: "保存失败",
|
| | | });
|
| | | this.loading = false;
|
| | | });
|
| | | message: "保存失败"
|
| | | })
|
| | | this.loading = false
|
| | | })
|
| | | },
|
| | | 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.$refs["gb28181"].resetFields();
|
| | | this.$set(this.gb28181, "idType", 0)
|
| | | this.$refs["gb28181"].resetFields()
|
| | | }
|
| | | });
|
| | | })
|
| | | getGb28181AreaList().then((rsp) => {
|
| | | if (rsp && rsp.success) {
|
| | | this.locationCity.provinceOptions = rsp.data;
|
| | | this.locationCity.provinceOptions = rsp.data
|
| | | }
|
| | | });
|
| | | })
|
| | | },
|
| | | submitGB28281() {
|
| | | this.$refs["gb28181"].validate((valid) => {
|
| | |
| | | if (rsp && rsp.success) {
|
| | | this.$notify({
|
| | | type: "success",
|
| | | message: "GB28181设置保存成功",
|
| | | });
|
| | | 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) {
|
| | | let t = e.clientY - this.$el.offsetTop + 30;
|
| | | let l = e.clientX - this.$el.offsetLeft;
|
| | | 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,
|
| | | menuL: l
|
| | | },
|
| | | "*"
|
| | | );
|
| | | return false;
|
| | | },
|
| | | },
|
| | | };
|
| | | )
|
| | | return false
|
| | | }
|
| | | }
|
| | | }
|
| | | </script>
|
| | | <style lang="scss">
|
| | | .s-system-manage {
|