修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 src/pages/cameraAccess/components/CameraInfo.vue

@@ -8,46 +8,36 @@
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="坐标" style="width:100%;">
          <el-form-item label="坐标" style="width: 100%">
            <label slot="label">坐标</label>
            <el-col :span="11">
              <el-input
                v-model="form.latitude"
                placeholder="经度"
                :disabled="isDisabled"
                size="small"
              ></el-input>
              <el-input v-model="form.latitude" placeholder="经度" :disabled="isDisabled" size="small"></el-input>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input
                v-model="form.longitude"
                placeholder="纬度"
                :disabled="isDisabled"
                size="small"
              ></el-input>
              <el-input v-model="form.longitude" placeholder="纬度" :disabled="isDisabled" size="small"></el-input>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="设备名称" style="width:100%" prop="name">
          <el-form-item label="设备名称" style="width: 100%" prop="name">
            <el-input v-model="form.name" placeholder="请输入设备名称" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="设备地址" style="width:100%" prop="addr">
          <el-form-item label="设备地址" style="width: 100%" prop="addr">
            <el-input v-model="form.addr" placeholder="请输入地址描述" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="处理分辨率" style="width:100%">
          <el-form-item label="处理分辨率" style="width: 100%">
            <el-select
              v-model="form.resolution"
              placeholder="本机分辨率"
              style="position: absolute;left: 0;"
              style="position: absolute; left: 0"
              size="small"
            >
              <el-option
@@ -61,10 +51,11 @@
        </el-col>
        <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>
              <el-select
                v-model="form.voiceId"
            <div class="flex-wrap" style="margin-top: 10px">
              <el-switch v-model="form.voiceEnable" :width="50"></el-switch>
              <!-- 屏蔽声音选择,调整到场景 -->
              <!-- <el-select
                v-model="voice"
                placeholder="选择声音"
                size="small"
                value-key="id"
@@ -79,17 +70,23 @@
              </el-select>
              <span class="player-btn" @click="togglePlayer" style="cursor:pointer;">
                <i
                  v-if="togglePlay"
                  class="el-icon-video-play"
                  style="font-size:26px; vertical-align:middle; color:#409eff"
                ></i>
              </span>
                <i
                  v-else
                  class="el-icon-video-pause"
                  style="font-size:26px; vertical-align:middle; color:#409eff"
                ></i>
              </span>-->
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="isGb28182">
        <el-col :span="9">
          <el-form-item label="设备别名" style="width:100%" prop="alias">
          <el-form-item label="设备别名" style="width: 100%" prop="alias">
            <el-input v-model="form.alias" placeholder="请输入设备别名" size="small"></el-input>
          </el-form-item>
        </el-col>
@@ -101,33 +98,24 @@
      </el-row>

      <el-row style="padding-top: 15px">
        <el-col :span="19" style="text-align: right;">
          <el-button
            size="small"
            type="primary"
            @click="onSubmit('addForm')"
            :disabled="conDisabled"
          >保存</el-button>
          <el-button
            type="danger"
            size="small"
            @click="deleteCamera"
            v-if="!isAdd"
            :disabled="isDisabled"
          >删除摄像机</el-button>
        <el-col :span="19" style="text-align: right">
          <el-button size="small" type="primary" @click="onSubmit('addForm')" :disabled="conDisabled">保存</el-button>
          <el-button type="danger" size="small" @click="deleteCamera" v-if="!isAdd" :disabled="isDisabled"
            >删除摄像机</el-button
          >
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <input v-model="form.id" type="hidden" />
      <input v-model="form.areaid" type="hidden" />
      <el-row>
        <el-col :span="12" style="text-align: right;">
        <el-col :span="12" style="text-align: right">
          <el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">连接测试</el-button>
        </el-col>
      </el-row>
      <el-row style="padding: 15px 0">
        <el-col :span="12">
          <camera-player
          <!-- <camera-player
            :cameraName="videoItem.name"
            :cameraID="videoItem.id"
            :isGb="videoItem.cameraType === 1"
@@ -135,6 +123,16 @@
            :isRunning="false"
            v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
          ></camera-player>
          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video> -->
          <wasm-player
            :cameraName="videoItem.name"
            :cameraID="videoItem.id"
            :isGb="videoItem.cameraType === 1"
            :rtspUrl="videoItem.rtsp"
            :isRunning="false"
            :showArea="false"
            v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
          ></wasm-player>
          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video>
        </el-col>

@@ -143,10 +141,9 @@
          <div class="sysinfo-box">
            <div style="width: 70%">
              <ul>
                <li style="width:100%">
                <li style="width: 100%">
                  <info-card
                    style="width:100%;min-width: 440px"
                   
                    style="width: 100%; min-width: 440px"
                    :realtime="PollData.RealTimeValidCount"
                    :polling="PollData.PollValidCount"
                    :dataStack="PollData.stackChannelCount"
@@ -167,26 +164,21 @@
  </div>
</template>
<script>
import {
  checkCameraConnet,
  createCamera,
  updateCameraInfo,
  getCameraInfo,
  delCamera
} from "@/api/camera";
import { getSoundList } from "@/api/event";
import { changeRunType } from "@/api/pollConfig";
import { createCamera, updateCameraInfo, getCameraInfo, getGB28181CameraInfo, delCamera } from "@/api/camera"
import { getSoundList } from "@/api/event"

import CameraPlayer from "@/components/player";
import eChartsBar from '@/components/subComponents/eChartsBar'
import WasmPlayer from "@/components/wasmPlayer"
import CameraPlayer from "@/components/player"
import eChartsBar from "@/components/subComponents/eChartsBar"

import InfoCard from "./infoCard"
import CameraInfoEditor from './CameraInfoEditor'
import CameraInfoEditor from "./CameraInfoEditor"

export default {
  name: "CameraInfo",
  components: {
    CameraPlayer,
    // CameraPlayer,
    WasmPlayer,
    InfoCard,
    eChartsBar,
    CameraInfoEditor
@@ -194,7 +186,7 @@
  props: {
    cameraList: {
      default: () => {
        return [];
        return []
      },
      type: Array
    }
@@ -206,193 +198,268 @@
      soundList: [],
      togglePlay: true,
      eventAudio: new Audio(),
      soundPath: '',
      form: {
      },
      soundPath: "",
      form: {},
      // 记录添加状态
      isAdd: false,
      addParentId: "",
      rules: {
        name: [
          { required: true, message: "设备名称不能为空", trigger: "blur" }
        ],
        rtsp: [
          { required: true, message: "RTSP地址不能为空", trigger: "blur" }
        ],
        addr: [
          { required: true, message: "设备地址不能为空", trigger: "blur" }
        ]
        name: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
        rtsp: [{ required: true, message: "RTSP地址不能为空", trigger: "blur" }],
        addr: [{ required: true, message: "设备地址不能为空", trigger: "blur" }]
      },
      resolutionList: [],
      //传感器列表
      sensors: []
    };
      sensors: [],
      voice: null
    }
  },
  computed: {
    isSelected() {
      return this.TreeDataPool.selectedNode.type !== "4"
    },
    isGb28182() {
      return this.TreeDataPool.selectedNode.cameraType === 1;
      return this.TreeDataPool.selectedNode.cameraType === 1
    },
    isDisabled() {
      if (this.isGb28182) {
        return true;
        return true
      }

      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4"
    },
    conDisabled() {
      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4"
    }
  },
  mounted() {
    this.initFormData();
    this.initFormData()
    document.addEventListener("visibilitychange", () => {
      this.visibilitychange();
    });
    this.getSounds();
      this.visibilitychange()
    })
    this.getSounds()

    this.eventAudio.addEventListener("ended", () => {
      this.togglePlay = true
    })
  },
  methods: {
    getSounds() {
      getSoundList().then(res => {
        if (res.success) {
          this.soundList = res.data.list
        }
      }).catch(
        e => console.log(e)
      )
      getSoundList()
        .then((res) => {
          if (res.success) {
            this.soundList = res.data
          }
        })
        .catch((e) => console.log(e))
    },
    selSound(sound) {
      this.soundPath = sound.path;
      this.soundPath = sound.path
      this.form.voiceId = sound.id
      this.togglePlay = true
      this.eventAudio.pause()
      // this.eventAudio.
    },
    togglePlayer() {
      if (!this.soundPath) {
        this.$notify({
          type: 'info',
          message: '请先选择一个声音!'
          type: "info",
          message: "请先选择一个声音!"
        })
        return false;
        return false
      }
      this.eventAudio.src = this.soundPath;

      this.eventAudio.src = this.soundPath
      if (this.togglePlay) {
        this.eventAudio.play();
        this.eventAudio.play()
        this.togglePlay = false
      } else {
        this.eventAudio.pause()
        this.togglePlay = true
      }
      this.togglePlay = !this.togglePlay
      // this.togglePlay = !this.togglePlay
    },
    visibilitychange() {
      switch (document.visibilityState) {
        case "hidden":
          this.visibilityState = false;
          break;
          this.visibilityState = false
          break
        case "visible":
          this.visibilityState = true;
          break;
          this.visibilityState = true
          break
      }
    },
    selectCamera(node) {
      this.isAdd = false;
      this.videoItem = null;
      this.$refs.addForm.resetFields();
      this.isAdd = false
      this.videoItem = null
      this.$refs.addForm.resetFields()
      this.voice = null

      // this.initFormData();
      // this.$refs.addForm.clearValidate();
      if (node.type === "4") {
        getCameraInfo(node.id).then(res => {
          if (res.success) {
            // console.log(res, '获取摄像机信息')
            if (res.data.resolutions) {
              let list = res.data.resolutions.map(i => {
                let obj = {}
                if (i.width == 0 && i.height == 0) {
                  obj.label = "本机分辨率"
                  obj.value = "0*0"
                } else {
                  obj.label = i.width + "*" + i.height
                  obj.value = i.width + "*" + i.height
                }
                return obj
              })
              this.resolutionList = list
              this.sensors = res.data.sensors
            }
            this.$nextTick(() => {
              Object.assign(this.form, res.data)
              if (this.form.run_type !== -1) {
                this.form.isAI = true
              } else {
                this.form.isAI = false
        // 国标摄像机
        if (node.cameraType === 1) {
          getGB28181CameraInfo(node.id).then((res) => {
            if (res.success) {
              // console.log(res, '获取摄像机信息')
              if (res.data.resolutions) {
                let list = res.data.resolutions.map((i) => {
                  let obj = {}
                  if (i.width == 0 && i.height == 0) {
                    obj.label = "本机分辨率"
                    obj.value = "0*0"
                  } else {
                    obj.label = i.width + "*" + i.height
                    obj.value = i.width + "*" + i.height
                  }
                  return obj
                })
                this.resolutionList = list
                this.sensors = res.data.sensors
              }
              this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
            })
          }
        });

              this.$nextTick(() => {
                this.initFormData()
                Object.assign(this.form, res.data)

                this.soundList.forEach((element) => {
                  if (this.form.voiceId == element.id) {
                    this.voice = element
                  }
                })

                if (this.form.run_type !== -1) {
                  this.form.isAI = true
                } else {
                  this.form.isAI = false
                }
                this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
              })
            }
          })
        } else {
          getCameraInfo(node.id).then((res) => {
            if (res.success) {
              // console.log(res, '获取摄像机信息')
              if (res.data.resolutions) {
                let list = res.data.resolutions.map((i) => {
                  let obj = {}
                  if (i.width == 0 && i.height == 0) {
                    obj.label = "本机分辨率"
                    obj.value = "0*0"
                  } else {
                    obj.label = i.width + "*" + i.height
                    obj.value = i.width + "*" + i.height
                  }
                  return obj
                })
                this.resolutionList = list
                this.sensors = res.data.sensors
              }

              this.$nextTick(() => {
                this.initFormData()
                Object.assign(this.form, res.data)

                this.soundList.forEach((element) => {
                  if (this.form.voiceId == element.id) {
                    this.voice = element
                  }
                })

                if (this.form.run_type !== -1) {
                  this.form.isAI = true
                } else {
                  this.form.isAI = false
                }
                this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
              })
            }
          })
        }
      }
    },
    // 保存
    onSubmit(formName) {
      let list = this.$refs.cameraEditor.getResult()
      // console.log(list, "sensor")
      // id为空，新增摄像机
      this.$refs[formName].validate(async valid => {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const isRequire = this.verifyRequrie();
          if (!isRequire) return false;
          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.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])

          let _this = this
          // 更新
          if (this.form.id !== "") {
            this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182);
            updateCameraInfo(this.form).then(rsp => {
              if (rsp.success) {
                this.$notify({
                  type: "success",
                  message: "摄像机信息修改成功！"
                });
                this.TreeDataPool.fetchTreeData();
              } else {
                this.selectCamera(this.TreeDataPool.selectedNode);
            this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182)
            updateCameraInfo(this.form)
              .then((rsp) => {
                if (rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "摄像机信息修改成功！"
                  })
                  this.TreeDataPool.fetchTreeData()
                  //_this.$root.$children[0].$refs['leftTree'].$refs.tree.ztreeObj.checkNode(_this.TreeDataPool.selectedNode, true, false, false);
                  //选中修改后的节点
                  // let { evt, treeId } =
                  //   _this.$root.$children[0].$refs["leftTree"].$refs.tree;
                  // console.log(evt, treeId);
                  // this.$nextTick(()=>{
                  //_this.$root.$children[0].$refs['leftTree'].$refs.tree.handleCreated()
                  // })
                } else {
                  this.selectCamera(this.TreeDataPool.selectedNode)
                  this.$notify({
                    type: "error",
                    message: "摄像机信息修改失败！"
                  })
                }
              })
              .catch((err) => {
                this.$notify({
                  type: "error",
                  message: "摄像机信息修改失败！"
                });
              }
            });
                  message: err.msg
                })
              })
          } else {
            this.form.areaid = this.addParentId;
            createCamera(this.form).then(rsp => {
              if (rsp.success) {
                this.$notify({
                  type: "success",
                  message: "摄像机添加成功！"
                });
                this.TreeDataPool.selectedNode = rsp.data;
                this.TreeDataPool.fetchTreeData();
                // 后端返回结果为0，查询后为4
                this.TreeDataPool.selectedNode.type = "4";
                this.selectCamera(this.TreeDataPool.selectedNode);
              } else {
            this.form.areaid = this.addParentId
            createCamera(this.form)
              .then((rsp) => {
                if (rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "摄像机添加成功！"
                  })
                  this.TreeDataPool.selectedNode = rsp.data
                  this.TreeDataPool.fetchTreeData()
                  // 后端返回结果为0，查询后为4
                  this.TreeDataPool.selectedNode.type = "4"
                  this.selectCamera(this.TreeDataPool.selectedNode)
                } else {
                  this.$notify({
                    type: "error",
                    message: "摄像机添加失败！"
                  })
                }
              })
              .catch((err) => {
                this.$notify({
                  type: "error",
                  message: "摄像机添加失败！"
                });
              }
            });
                  message: err.msg
                })
              })
          }
        }
      });
      })
    },
    // 连接测试
    cameraConnet() {
      this.videoItem = null;
      this.videoItem = null
      this.$nextTick(() => {
        this.videoItem = {
          name: this.form.name,
@@ -400,13 +467,13 @@
          id: this.form.id,
          isRunning: this.form.run_enable,
          cameraType: this.form.type
        };
        }
      })
    },
    // * 验证必选项
    verifyRequrie() {
      if (this.isGb28182) {
        return true;
        return true
      }
      // const rtspReg = /^(rtsp:\/\/)([a-zA-Z0-9_]+):([a-zA-Z0-9_]+)@(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?):([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])(\/)([a-zA-Z0-9_/]+)$/;
      // !rtspReg.test(this.form.rtsp
@@ -415,10 +482,10 @@
        this.$notify({
          type: "warning",
          message: "请输入正确的rtsp地址"
        });
        return false;
        })
        return false
      }
      return true;
      return true
    },
    // 删除摄像机
    deleteCamera() {
@@ -427,23 +494,23 @@
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
      }).then(() => {
        delCamera(this.form.id).then(res => {
        delCamera(this.form.id).then((res) => {
          if (res.success) {
            this.initFormData();
            this.initFormData()
            this.$notify({
              type: "success",
              message: "删除成功！"
            });
            this.TreeDataPool.fetchTreeData();
            this.TreeDataPool.selectedNode = {};
            })
            this.TreeDataPool.fetchTreeData()
            this.TreeDataPool.selectedNode = {}
          } else {
            this.$notify({
              type: "error",
              message: "删除失败！"
            });
            })
          }
        });
      });
        })
      })
    },
    // 清空输入框
    initFormData() {
@@ -466,16 +533,30 @@
        resolution: "",
        voiceId: "",
        voiceEnable: false
      };
      }
    },
    // 添加设备
    addDevice(node) {
      this.isAdd = true;
      this.addParentId = node;
      this.initFormData();
      this.isAdd = true
      this.addParentId = node
      this.resolutionList = [
        {
          label: "本机分辨率",
          value: "0*0"
        },
        {
          label: "1920*1080",
          value: "1920*1080"
        },
        {
          label: "2688*1520",
          value: "2688*1520"
        }
      ]
      this.initFormData()
    }
  }
};
}
</script>

<style lang="scss">
@@ -522,5 +603,9 @@
      }
    }
  }

  .video-player {
    height: 450px;
  }
}
</style>
</style>