修复国标摄像机配置相关的bug

zhangzengfei

2022-07-18 61167e460b5273b05a23854742e3e450e656cd08

 src/pages/cameraAccess/components/CameraInfo.vue

@@ -4,32 +4,17 @@
      <el-row>
        <el-col :span="9">
          <el-form-item label="RTSP地址" :span="11" prop="rtsp">
            <el-input
              v-model="form.rtsp"
              placeholder="rtsp://"
              :disabled="isDisabled"
              size="small"
            ></el-input>
            <el-input v-model="form.rtsp" placeholder="rtsp://" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <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>
@@ -37,22 +22,12 @@
      <el-row>
        <el-col :span="9">
          <el-form-item label="设备名称" style="width: 100%" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入设备名称"
              :disabled="isDisabled"
              size="small"
            ></el-input>
            <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-input
              v-model="form.addr"
              placeholder="请输入地址描述"
              :disabled="isDisabled"
              size="small"
            ></el-input>
            <el-input v-model="form.addr" placeholder="请输入地址描述" :disabled="isDisabled" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
@@ -112,39 +87,20 @@
      <el-row v-show="isGb28182">
        <el-col :span="9">
          <el-form-item label="设备别名" style="width: 100%" prop="alias">
            <el-input
              v-model="form.alias"
              placeholder="请输入设备别名"
              size="small"
            ></el-input>
            <el-input v-model="form.alias" placeholder="请输入设备别名" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <!-- 添加传感器 -->
        <CameraInfoEditor
          ref="cameraEditor"
          :Carmeras="form"
          :sensors="sensors"
        ></CameraInfoEditor>
        <CameraInfoEditor ref="cameraEditor" :Carmeras="form" :sensors="sensors"></CameraInfoEditor>
      </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 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>
@@ -154,13 +110,7 @@
      <input v-model="form.areaid" type="hidden" />
      <el-row>
        <el-col :span="12" style="text-align: right">
          <el-button
            size="small"
            type="primary"
            @click="cameraConnet"
            :disabled="conDisabled"
            >连接测试</el-button
          >
          <el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">连接测试</el-button>
        </el-col>
      </el-row>
      <el-row style="padding: 15px 0">
@@ -181,18 +131,9 @@
            :rtspUrl="videoItem.rtsp"
            :isRunning="false"
            :showArea="false"
            v-if="
              videoItem !== '' &&
              videoItem !== undefined &&
              videoItem !== null &&
              visibilityState
            "
            v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
          ></wasm-player>
          <video
            v-else
            poster="/images/cameraAccess/video-poster.png"
            preload="none"
          ></video>
          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video>
        </el-col>

        <!-- 系统运行信息 -->
@@ -214,10 +155,7 @@
              :style="`width:80%;height:174px;position: relative;left: -12px;`"
              v-if="PollData.barCharts && PollData.barCharts.length !== 0"
            >
              <eChartsBar
                ref="cpuMeneryCharts"
                :xAxisData="PollData.barCharts"
              ></eChartsBar>
              <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
            </div>
          </div>
        </el-col>
@@ -226,21 +164,15 @@
  </div>
</template>
<script>
import {
  createCamera,
  updateCameraInfo,
  getCameraInfo,
  getGB28181CameraInfo,
  delCamera,
} from "@/api/camera";
import { getSoundList } from "@/api/event";
import { createCamera, updateCameraInfo, getCameraInfo, getGB28181CameraInfo, delCamera } from "@/api/camera"
import { getSoundList } from "@/api/event"

import WasmPlayer from "@/components/wasmPlayer";
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 InfoCard from "./infoCard"
import CameraInfoEditor from "./CameraInfoEditor"

export default {
  name: "CameraInfo",
@@ -249,15 +181,15 @@
    WasmPlayer,
    InfoCard,
    eChartsBar,
    CameraInfoEditor,
    CameraInfoEditor
  },
  props: {
    cameraList: {
      default: () => {
        return [];
        return []
      },
      type: Array,
    },
      type: Array
    }
  },
  data() {
    return {
@@ -272,103 +204,95 @@
      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: [],
      voice: null,
    };
      voice: null
    }
  },
  computed: {
    isSelected() {
      return this.TreeDataPool.selectedNode.type !== "4";
      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;
    });
      this.togglePlay = true
    })
  },
  methods: {
    getSounds() {
      getSoundList()
        .then((res) => {
          if (res.success) {
            this.soundList = res.data;
            this.soundList = res.data
          }
        })
        .catch((e) => console.log(e));
        .catch((e) => console.log(e))
    },
    selSound(sound) {
      this.soundPath = sound.path;
      this.form.voiceId = sound.id;
      this.togglePlay = true;
      this.eventAudio.pause();
      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: "请先选择一个声音!",
        });
        return false;
          message: "请先选择一个声音!"
        })
        return false
      }
      this.eventAudio.src = this.soundPath;
      this.eventAudio.src = this.soundPath
      if (this.togglePlay) {
        this.eventAudio.play();
        this.togglePlay = false;
        this.eventAudio.play()
        this.togglePlay = false
      } else {
        this.eventAudio.pause();
        this.togglePlay = true;
        this.eventAudio.pause()
        this.togglePlay = true
      }
      // 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.voice = null;

      console.log(node);
      this.isAdd = false
      this.videoItem = null
      this.$refs.addForm.resetFields()
      this.voice = null

      // this.initFormData();
      // this.$refs.addForm.clearValidate();
@@ -380,197 +304,176 @@
              // console.log(res, '获取摄像机信息')
              if (res.data.resolutions) {
                let list = res.data.resolutions.map((i) => {
                  let obj = {};
                  let obj = {}
                  if (i.width == 0 && i.height == 0) {
                    obj.label = "本机分辨率";
                    obj.value = "0*0";
                    obj.label = "本机分辨率"
                    obj.value = "0*0"
                  } else {
                    obj.label = i.width + "*" + i.height;
                    obj.value = i.width + "*" + i.height;
                    obj.label = i.width + "*" + i.height
                    obj.value = i.width + "*" + i.height
                  }
                  return obj;
                });
                this.resolutionList = list;
                this.sensors = res.data.sensors;
                console.log(list);
                  return obj
                })
                this.resolutionList = list
                this.sensors = res.data.sensors
              }

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

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

                if (this.form.run_type !== -1) {
                  this.form.isAI = true;
                  this.form.isAI = true
                } else {
                  this.form.isAI = false;
                  this.form.isAI = false
                }
                this.form.resolution =
                  this.form.resolution_width +
                  "*" +
                  this.form.resolution_height;
              });
                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 = {};
                  let obj = {}
                  if (i.width == 0 && i.height == 0) {
                    obj.label = "本机分辨率";
                    obj.value = "0*0";
                    obj.label = "本机分辨率"
                    obj.value = "0*0"
                  } else {
                    obj.label = i.width + "*" + i.height;
                    obj.value = i.width + "*" + i.height;
                    obj.label = i.width + "*" + i.height
                    obj.value = i.width + "*" + i.height
                  }
                  return obj;
                });
                this.resolutionList = list;
                this.sensors = res.data.sensors;
                console.log(list);
                  return obj
                })
                this.resolutionList = list
                this.sensors = res.data.sensors
              }

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

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

                if (this.form.run_type !== -1) {
                  this.form.isAI = true;
                  this.form.isAI = true
                } else {
                  this.form.isAI = false;
                  this.form.isAI = false
                }
                this.form.resolution =
                  this.form.resolution_width +
                  "*" +
                  this.form.resolution_height;
              });
                this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
              })
            }
          });
          })
        }
      }
    },
    // 保存
    onSubmit(formName) {
      let list = this.$refs.cameraEditor.getResult();
      let list = this.$refs.cameraEditor.getResult()
      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.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;
          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
            );
            console.log(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();
                  console.log(this.TreeDataPool.selectedNode);
                    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);
                  // 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.selectCamera(this.TreeDataPool.selectedNode)
                  this.$notify({
                    type: "error",
                    message: "摄像机信息修改失败！",
                  });
                    message: "摄像机信息修改失败！"
                  })
                }
              })
              .catch((err) => {
                this.$notify({
                  type: "error",
                  message: err.msg,
                });
              });
                  message: err.msg
                })
              })
          } else {
            this.form.areaid = this.addParentId;
            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();
                    message: "摄像机添加成功！"
                  })
                  this.TreeDataPool.selectedNode = rsp.data
                  this.TreeDataPool.fetchTreeData()
                  // 后端返回结果为0，查询后为4
                  this.TreeDataPool.selectedNode.type = "4";
                  this.selectCamera(this.TreeDataPool.selectedNode);
                  this.TreeDataPool.selectedNode.type = "4"
                  this.selectCamera(this.TreeDataPool.selectedNode)
                } else {
                  this.$notify({
                    type: "error",
                    message: "摄像机添加失败！",
                  });
                    message: "摄像机添加失败！"
                  })
                }
              })
              .catch((err) => {
                this.$notify({
                  type: "error",
                  message: err.msg,
                });
              });
                  message: err.msg
                })
              })
          }
        }
      });
      })
    },
    // 连接测试
    cameraConnet() {
      this.videoItem = null;
      this.videoItem = null
      this.$nextTick(() => {
        this.videoItem = {
          name: this.form.name,
          rtsp: this.form.rtsp,
          id: this.form.id,
          isRunning: this.form.run_enable,
          cameraType: this.form.type,
        };
      });
          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
@@ -578,36 +481,36 @@
      if (this.form.rtsp === "") {
        this.$notify({
          type: "warning",
          message: "请输入正确的rtsp地址",
        });
        return false;
          message: "请输入正确的rtsp地址"
        })
        return false
      }
      return true;
      return true
    },
    // 删除摄像机
    deleteCamera() {
      this.$confirm("是否删除此摄像机？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",
        confirmButtonClass: "comfirm-class-sure"
      }).then(() => {
        delCamera(this.form.id).then((res) => {
          if (res.success) {
            this.initFormData();
            this.initFormData()
            this.$notify({
              type: "success",
              message: "删除成功！",
            });
            this.TreeDataPool.fetchTreeData();
            this.TreeDataPool.selectedNode = {};
              message: "删除成功！"
            })
            this.TreeDataPool.fetchTreeData()
            this.TreeDataPool.selectedNode = {}
          } else {
            this.$notify({
              type: "error",
              message: "删除失败！",
            });
              message: "删除失败！"
            })
          }
        });
      });
        })
      })
    },
    // 清空输入框
    initFormData() {
@@ -629,32 +532,31 @@
        password: "",
        resolution: "",
        voiceId: "",
        voiceEnable: false,
      };
        voiceEnable: false
      }
    },
    // 添加设备
    addDevice(node) {
      console.log("1111");
      this.isAdd = true;
      this.addParentId = node;
      this.isAdd = true
      this.addParentId = node
      this.resolutionList = [
        {
          label: "本机分辨率",
          value: "0*0",
          value: "0*0"
        },
        {
          label: "1920*1080",
          value: "1920*1080",
          value: "1920*1080"
        },
        {
          label: "2688*1520",
          value: "2688*1520",
        },
      ];
      this.initFormData();
    },
  },
};
          value: "2688*1520"
        }
      ]
      this.initFormData()
    }
  }
}
</script>

<style lang="scss">
@@ -706,4 +608,4 @@
    height: 450px;
  }
}
</style>
</style>