修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

修复国标配置的bug

 src/pages/gb28181/index/App.vue

@@ -12,13 +12,7 @@
        <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>-->
@@ -74,12 +68,9 @@
                    :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-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">
@@ -126,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>
@@ -134,9 +125,9 @@
            <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>
@@ -160,21 +151,17 @@
            style="width:600px;min-height:500px"
          />
          <div class="base-image" v-loading="TreeDataPool.baseImageLoading">
            <span>{{TreeDataPool.cameraNameForBaseImage}}</span>
            <span>{{ TreeDataPool.cameraNameForBaseImage }}</span>
            <div class="camera-image" v-show="TreeDataPool.cameraNameForBaseImage.length">
              <img
                :src="'data:image/png;base64,' + TreeDataPool.gb28181CameraBaseImage"
                width="450px"
                alt
              />
              <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>
@@ -192,20 +179,20 @@
  newGb28181ID,
  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()
      }
    }
  },
@@ -216,7 +203,7 @@
      treeHeight: 750,
      loading: false,
      loadingText: "",
      openeds: ['0'],
      openeds: ["0"],
      gb28181: {},
      subDevTable: [],
      idType: 1,
@@ -229,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: []
@@ -270,7 +257,7 @@
    }
  },
  mounted() {
    this.TreeDataPool.multiple = true;
    this.TreeDataPool.multiple = true

    // 记录目录是否折叠
    let foldList = localStorage.getItem("ztree_fold_list")
@@ -278,34 +265,32 @@
      this.TreeDataPool.foldNodeList = JSON.parse(foldList)
    }

    this.initGB28181Conf();
    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(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({
@@ -313,65 +298,67 @@
          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
@@ -381,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
@@ -389,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
    }
  }
}