修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/gb28181/index/App.vue

@@ -10,106 +10,104 @@
        @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="国际服务器IP" prop="ServerIp">
          <div style="width: 775px">
            <!-- 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>-->
              </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">
@@ -119,7 +117,7 @@
            fit
            highlight-current-row
            style="width: 100%; color:#000"
            :header-cell-style="{ background: '#f8f8f8', color: '#222222', height:'30px'  }"
            :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>
@@ -127,17 +125,17 @@
            <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.active ? `color:#047d19` : 'color:#f11a1a;' "
                >{{scope.row.active ? "在线": "离线"}}</span>
                <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,14 +148,20 @@
            :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">
            已选择 (
            <b>{{TreeDataPool.gb28181CheckedCount}}</b>
            / {{TreeDataPool.gb28181ChildNodeCount}} ) 路
            <b>{{ TreeDataPool.gb28181CheckedCount }}</b>
            / {{ TreeDataPool.gb28181ChildNodeCount }} ) 路
          </span>

          <el-button type="primary" size="small" @click="saveChecked">保存</el-button>
@@ -173,23 +177,22 @@
  saveGB28181Config,
  getGb28181AreaList,
  newGb28181ID,
  getLocalCameraTree,
  getAllSubServer,
  saveGb28181CamTree
} from './api'
} 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',
  name: "Gb28181Setting",
  components: {
    TreeMenu
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      inserted: function(el) {
        el.querySelector("input").focus()
      }
    }
  },
@@ -200,7 +203,7 @@
      treeHeight: 750,
      loading: false,
      loadingText: "",
      openeds: ['0'],
      openeds: ["0"],
      gb28181: {},
      subDevTable: [],
      idType: 1,
@@ -213,40 +216,40 @@
        ip: [
          {
            required: true,
            message: '请输入IP地址',
            trigger: 'change'
            message: "请输入IP地址",
            trigger: "change"
          },
          { validator: isIPv4, trigger: 'change' }
          { validator: isIPv4, trigger: "change" }
        ],
        ServerIp: [
          {
            required: true,
            message: '请输入IP地址',
            trigger: 'change'
            message: "请输入IP地址",
            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: {
        province: '',
        city: '',
        county: '',
        province: "",
        city: "",
        county: "",
        provinceOptions: [],
        cityOptions: [],
        countyOptions: []
@@ -254,95 +257,108 @@
    }
  },
  mounted() {
    this.TreeDataPool.multiple = true;
    this.TreeDataPool.multiple = true

    this.initGB28181Conf();
    // 记录目录是否折叠
    let foldList = localStorage.getItem("ztree_fold_list")
    if (foldList) {
      this.TreeDataPool.foldNodeList = JSON.parse(foldList)
    }

    this.initGB28181Conf()
  },
  methods: {
    hanleTabClick(tab, event) {
      if (this.activeName == "subordinates") {
        getAllSubServer().then(rsp => {
        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();
      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
    },
    saveChecked() {
      localStorage.setItem("ztree_fold_list", JSON.stringify(this.TreeDataPool.foldNodeList))

      if (this.TreeDataPool.gb28181CheckedCount > 500) {
        this.$message({
          type: "warning",
          message: "最多仅支持选择500路摄像机. 请重新选择"
        })

        return;
        return
      }

      this.loading = true;
      this.loading = true

      let treeData = this.TreeDataPool.newTreeByChecked(this.TreeDataPool.activeTreeData)

      saveGb28181CamTree({ checkedMenus: treeData }).then(rsp => {
        if (rsp && rsp.success) {
          this.$message({
            type: "success",
            message: "保存成功"
          })
        }
        this.loading = false;
      }).catch(err => {
        this.$message({
          type: "error",
          message: "保存失败"
      saveGb28181CamTree({ checkedMenus: treeData })
        .then((rsp) => {
          if (rsp && rsp.success) {
            this.$message({
              type: "success",
              message: "保存成功"
            })
          }
          this.loading = false
        })
        this.loading = false;
      })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "保存失败"
          })
          this.loading = false
        })
    },
    initGB28181Conf() {
      getGB28181Config().then(rsp => {
      getGB28181Config().then((rsp) => {
        if (rsp && rsp.success) {
          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 => {
      getGb28181AreaList().then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.provinceOptions = rsp.data
        }
      })
    },
    submitGB28281() {
      this.$refs['gb28181'].validate(valid => {
      this.$refs["gb28181"].validate((valid) => {
        if (valid) {
          saveGB28181Config(this.gb28181).then(rsp => {
          saveGB28181Config(this.gb28181).then((rsp) => {
            if (rsp && rsp.success) {
              this.$notify({
                type: 'success',
                message: 'GB28181设置保存成功'
                type: "success",
                message: "GB28181设置保存成功"
              })
            }
          })
        } else {
          console.log('error submit!!')
          console.log("error submit!!")
          return false
        }
      })
    },
    changeProvince() {
      let pid = this.locationCity.province
      getGb28181AreaList({ parentId: pid }).then(rsp => {
      getGb28181AreaList({ parentId: pid }).then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.cityOptions = rsp.data
          this.locationCity.city = this.locationCity.cityOptions[0].id
@@ -352,7 +368,7 @@
    },
    changeCity() {
      let pid = this.locationCity.city
      getGb28181AreaList({ parentId: pid }).then(rsp => {
      getGb28181AreaList({ parentId: pid }).then((rsp) => {
        if (rsp && rsp.success) {
          this.locationCity.countyOptions = rsp.data
          this.locationCity.county = this.locationCity.countyOptions[0].id
@@ -360,25 +376,29 @@
      })
    },
    newGBID() {
      let cCode = this.locationCity.county + ''
      newGb28181ID({ code: cCode }).then(rsp => {
      let cCode = this.locationCity.county + ""
      newGb28181ID({ code: cCode }).then((rsp) => {
        if (rsp && rsp.success) {
          this.gb28181.PublicId = rsp.data
        }
      })
    },
    menuOpen() {

    },
    menuClose() {

    },
    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 }, "*");
      return false;
      window.parent.postMessage(
        {
          source: location.href.split("/")[location.href.split("/").length - 1],
          trigger: "contextmenu",
          menuT: t,
          menuL: l
        },
        "*"
      )
      return false
    }
  }
}
@@ -499,5 +519,17 @@
      color: #3d68e1;
    }
  }

  .base-image {
    position: absolute;
    top: 18%;
    left: 57%;
    width: 450px;

    .camera-image {
      background-color: black;
      height: 254px;
    }
  }
}
</style>