处理外网端口映射无法跳转的问题

zhangzengfei

2020-09-17 d4cd7df0bd1484c31e37bcb0642e89ecdcf7ab29

 src/pages/cameraAccess/components/CameraInfo.vue

@@ -9,7 +9,7 @@
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="坐标" style="width:100%;">
            <label slot="label">&nbsp;&nbsp;&nbsp;坐标</label>
            <label slot="label">坐标</label>
            <el-col :span="11">
              <el-input
                v-model="form.latitude"
@@ -37,7 +37,7 @@
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="设备地址" style="width:100%" prop="addr">
            <el-input v-model="form.addr" placeholder="请输入地址描述" :disabled="!form.rtsp" size="small"></el-input>
            <el-input v-model="form.addr" placeholder="请输入地址描述" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
@@ -59,7 +59,7 @@
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1" style="padding-left: 11px;">
        <el-col :span="9" :offset="1">
          <el-form-item label="事件声音">
            <div class="flex-wrap" style="margin-left:-10px">
              <el-switch v-model="form.voiceEnable" active-color="#409eff" :width="50"></el-switch>
@@ -77,7 +77,7 @@
                  :value="item"
                ></el-option>
              </el-select>
              <span class="player-btn" @click="togglePlayer">
              <span class="player-btn" @click="togglePlayer" style="cursor:pointer;">
                <i
                  class="el-icon-video-play"
                  style="font-size:26px; vertical-align:middle; color:#409eff"
@@ -125,7 +125,7 @@
          <el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">连接测试</el-button>
        </el-col>
      </el-row>
      <el-row style="padding-top: 15px">
      <el-row style="padding: 15px 0">
        <el-col :span="12">
          <camera-player
            :cameraName="videoItem.name"
@@ -135,7 +135,7 @@
            :isRunning="false"
            v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
          ></camera-player>
          <video v-else poster="../../../assets/baseimg_cameara.png" preload="none"></video>
          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video>
        </el-col>

        <!-- 系统运行信息 -->
@@ -146,7 +146,8 @@
                <li style="width:100%">
                  <info-card
                    style="width:100%;min-width: 440px"
                    :realtime="PollData.RealTimeSum"
                   
                    :realtime="PollData.RealTimeValidCount"
                    :polling="PollData.PollValidCount"
                    :dataStack="PollData.stackChannelCount"
                  ></info-card>
@@ -207,25 +208,6 @@
      eventAudio: new Audio(),
      soundPath: '',
      form: {
        latitude: 0,
        rtsp: "",
        longitude: 0,
        name: "",
        addr: "",
        alias: "",
        areaid: "",
        brand: "",
        id: "",
        ip: "",
        reserved: "",
        run_type: 0,
        isAI: false,
        username: "",
        password: "",
        cameraType: 0,
        resolution: "",
        voiceId: "",
        voiceEnable: true
      },
      // 记录添加状态
      isAdd: false,
@@ -321,7 +303,7 @@
      if (node.type === "4") {
        getCameraInfo(node.id).then(res => {
          if (res.success) {
            console.log(res, '获取摄像机信息')
            // console.log(res, '获取摄像机信息')
            if (res.data.resolutions) {
              let list = res.data.resolutions.map(i => {
                let obj = {}
@@ -353,20 +335,22 @@
    // 保存
    onSubmit(formName) {
      let list = this.$refs.cameraEditor.getResult()
      console.log(list, "sensor")
      // console.log(list, "sensor")
      // id为空，新增摄像机
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const isRequire = this.verifyRequrie();
          if (!isRequire) return false;

          this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude);
          this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude);
          this.form.sensors = list
          this.form.resolution_width = Number(this.form.resolution.split("*")[0])
          this.form.resolution_height = Number(this.form.resolution.split("*")[1])

          // 更新
          if (this.form.id !== "") {
            this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182);
            this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude);
            this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude);
            this.form.sensors = list
            this.form.resolution_width = Number(this.form.resolution.split("*")[0])
            this.form.resolution_height = Number(this.form.resolution.split("*")[1])
            updateCameraInfo(this.form).then(rsp => {
              if (rsp.success) {
                this.$notify({
@@ -384,26 +368,7 @@
            });
          } else {
            this.form.areaid = this.addParentId;
            this.form.sensors = list
            const { ...json } = this.form;
            createCamera({
              latitude: parseFloat(json.latitude),
              rtsp: this.form.rtsp,
              longitude: parseFloat(json.longitude),
              name: this.form.name,
              addr: this.form.addr,
              areaid: this.form.areaid,
              brand: this.form.brand,
              id: this.form.id,
              ip: this.form.ip,
              port: parseFloat(json.port),
              reserved: this.form.reserved,
              run_type: this.form.isAI ? this.form.run_type : -1,
              username: this.form.username,
              password: this.form.password,
              areaId: this.form.areaId,
              sensors: this.form.sensors
            }).then(rsp => {
            createCamera(this.form).then(rsp => {
              if (rsp.success) {
                this.$notify({
                  type: "success",
@@ -494,13 +459,13 @@
        id: "",
        ip: "",
        reserved: "",
        run_type: 0,
        run_type: -1,
        isAI: false,
        username: "",
        password: "",
        resolution: "",
        voiceId: "",
        voiceEnable: true
        voiceEnable: false
      };
    },
    // 添加设备
@@ -508,96 +473,6 @@
      this.isAdd = true;
      this.addParentId = node;
      this.initFormData();
    },
    //实时、轮询切换
    changePoll(row) {
      // console.log(row,'实时、轮询切换',this.form,this.PollData.RealTimeSum)
      //判断是新增还是更新
      if (this.form.id && this.form.id !== undefined) {
        if (this.PollData.RealTimeSum < 16) {
          if (row.value) {
            this.form.run_type = 1
          } else {
            this.form.run_type = 0
          }
          changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
            rsp => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "配置成功"
                });
              } else {
                this.$notify({
                  type: "error",
                  message: "配置失败"
                });
              }
            }
          );
        } else {
          if (this.form.run_type === 1) {
            this.form.run_type = 0
            changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
              rsp => {
                if (rsp && rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "配置成功"
                  });
                } else {
                  this.$notify({
                    type: "error",
                    message: "配置失败"
                  });
                }
              }
            );
          }
          this.$nextTick(() => {
            this.$set(this.form, 'run_type', 0)
          })
          // this.$notify({
          //   type: 'warning',
          //   message: '实时处理路数已达最大处理路数！'
          // })
        }
        this.TreeDataPool.fetchTreeData();
        this.PollData.statisticTaskInfo();
      }
    },
    //是否进行视频分析处理
    pollEnable(row) {
      // console.log(row,'实时、轮询切换')
      if (row) {
        if (this.PollData.RealTimeSum < 16) {
          this.form.run_type = 1
        } else {
          this.form.run_type = 0
        }
      } else {
        this.form.run_type = -1
      }
      if (this.form.id && this.form.id !== undefined) {
        changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
          rsp => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "配置成功"
              });
            } else {
              this.$notify({
                type: "error",
                message: "配置失败"
              });
            }
            this.selectCamera(this.TreeDataPool.selectedNode)
          }
        );
      }
      this.TreeDataPool.fetchTreeData();
      this.PollData.statisticTaskInfo();
    }
  }
};
@@ -606,9 +481,9 @@
<style lang="scss">
.camera-info {
  width: 100%;
  height: 100%;
  margin-left: 20px;
  overflow: auto;

  margin: 20px 0 20px 20px;

  .ai-select {
    text-align: left;
  }