merge master

zhangzengfei

2021-07-07 0b737708e696c45720499759b5c31aced87fdbb6

 src/pages/gb28181/index/App.vue

@@ -10,6 +10,7 @@
        @tab-click="hanleTabClick"
      >
        <el-tab-pane label="国标ID" name="gb28181">
          <div style="width: 775px">
          <!-- GB28181设置 -->
          <el-form
            :model="gb28181"
@@ -98,18 +99,24 @@
              <el-input v-model.number="gb28181.GbServerPort" placeholder="请输入" size="small"></el-input>
            </el-form-item>

            <el-form-item label="开启鉴权">
              <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 label="鉴权密码">
                <el-input
                  v-model="gb28181.Password"
                  placeholder="请输入"
                  size="small"
                  :disabled="!gb28181.IsAuth"
                ></el-input>
            </el-form-item>

            <el-form-item>
              <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">
@@ -173,7 +190,6 @@
  saveGB28181Config,
  getGb28181AreaList,
  newGb28181ID,
  getLocalCameraTree,
  getAllSubServer,
  saveGb28181CamTree
} from './api'
@@ -256,6 +272,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 +296,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 +528,17 @@
      color: #3d68e1;
    }
  }

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

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