更新国标配置

zhangzengfei

2021-05-25 27e9c1b8ae1289721e2385c1ef853ce66b459af5

 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="国际服务器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">
@@ -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>