<template>
|
<div class="camera-info">
|
<el-form ref="addForm" :model="form" :rules="rules" label-width="88px">
|
<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-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-col>
|
<el-col :span="11" :offset="2">
|
<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-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-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="9">
|
<el-form-item label="处理分辨率" style="width: 100%">
|
<el-select
|
v-model="form.resolution"
|
placeholder="本机分辨率"
|
style="position: absolute; left: 0"
|
size="small"
|
>
|
<el-option
|
v-for="item in resolutionList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="9" :offset="1">
|
<el-form-item label="事件声音">
|
<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"
|
@change="selSound"
|
>
|
<el-option
|
v-for="item in soundList"
|
:key="item.id"
|
:label="item.name"
|
:value="item"
|
></el-option>
|
</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>
|
<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-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>
|
</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>
|
</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-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
|
:cameraName="videoItem.name"
|
:cameraID="videoItem.id"
|
:isGb="videoItem.cameraType === 1"
|
:rtspUrl="videoItem.rtsp"
|
: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>
|
|
<!-- 系统运行信息 -->
|
<el-col :span="11" :offset="1">
|
<div class="sysinfo-box">
|
<div style="width: 70%">
|
<ul>
|
<li style="width: 100%">
|
<info-card
|
style="width: 100%; min-width: 440px"
|
:realtime="PollData.RealTimeValidCount"
|
:polling="PollData.PollValidCount"
|
:dataStack="PollData.stackChannelCount"
|
></info-card>
|
</li>
|
</ul>
|
</div>
|
<div
|
:style="`width:80%;height:174px;position: relative;left: -12px;`"
|
v-if="PollData.barCharts && PollData.barCharts.length !== 0"
|
>
|
<eChartsBar
|
ref="cpuMeneryCharts"
|
:xAxisData="PollData.barCharts"
|
></eChartsBar>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
import {
|
createCamera,
|
updateCameraInfo,
|
getCameraInfo,
|
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 InfoCard from "./infoCard";
|
import CameraInfoEditor from "./CameraInfoEditor";
|
|
export default {
|
name: "CameraInfo",
|
components: {
|
// CameraPlayer,
|
WasmPlayer,
|
InfoCard,
|
eChartsBar,
|
CameraInfoEditor,
|
},
|
props: {
|
cameraList: {
|
default: () => {
|
return [];
|
},
|
type: Array,
|
},
|
},
|
data() {
|
return {
|
videoItem: null,
|
visibilityState: true,
|
soundList: [],
|
togglePlay: true,
|
eventAudio: new Audio(),
|
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" },
|
],
|
},
|
resolutionList: [],
|
//传感器列表
|
sensors: [],
|
voice: null,
|
};
|
},
|
computed: {
|
isSelected() {
|
return this.TreeDataPool.selectedNode.type !== "4";
|
},
|
isGb28182() {
|
return this.TreeDataPool.selectedNode.cameraType === 1;
|
},
|
isDisabled() {
|
if (this.isGb28182) {
|
return true;
|
}
|
|
return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
|
},
|
conDisabled() {
|
return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
|
},
|
},
|
mounted() {
|
this.initFormData();
|
document.addEventListener("visibilitychange", () => {
|
this.visibilitychange();
|
});
|
this.getSounds();
|
|
this.eventAudio.addEventListener("ended", () => {
|
this.togglePlay = true;
|
});
|
},
|
methods: {
|
getSounds() {
|
getSoundList()
|
.then((res) => {
|
if (res.success) {
|
this.soundList = res.data;
|
}
|
})
|
.catch((e) => console.log(e));
|
},
|
selSound(sound) {
|
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;
|
}
|
this.eventAudio.src = this.soundPath;
|
if (this.togglePlay) {
|
this.eventAudio.play();
|
this.togglePlay = false;
|
} else {
|
this.eventAudio.pause();
|
this.togglePlay = true;
|
}
|
// this.togglePlay = !this.togglePlay
|
},
|
visibilitychange() {
|
switch (document.visibilityState) {
|
case "hidden":
|
this.visibilityState = false;
|
break;
|
case "visible":
|
this.visibilityState = true;
|
break;
|
}
|
},
|
selectCamera(node) {
|
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;
|
console.log(list);
|
}
|
|
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();
|
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]
|
);
|
let _this = this;
|
// 更新
|
if (this.form.id !== "") {
|
this.form.areaid = this.TreeDataPool.getParent(
|
this.form.id,
|
this.isGb28182
|
);
|
console.log(this.TreeDataPool.selectedNode);
|
updateCameraInfo(this.form)
|
.then((rsp) => {
|
if (rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "摄像机信息修改成功！",
|
});
|
this.TreeDataPool.fetchTreeData();
|
console.log(this.TreeDataPool.selectedNode);
|
//_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: 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.$notify({
|
type: "error",
|
message: "摄像机添加失败！",
|
});
|
}
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "error",
|
message: err.msg,
|
});
|
});
|
}
|
}
|
});
|
},
|
// 连接测试
|
cameraConnet() {
|
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,
|
};
|
});
|
},
|
// * 验证必选项
|
verifyRequrie() {
|
if (this.isGb28182) {
|
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
|
|
if (this.form.rtsp === "") {
|
this.$notify({
|
type: "warning",
|
message: "请输入正确的rtsp地址",
|
});
|
return false;
|
}
|
return true;
|
},
|
// 删除摄像机
|
deleteCamera() {
|
this.$confirm("是否删除此摄像机？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure",
|
}).then(() => {
|
delCamera(this.form.id).then((res) => {
|
if (res.success) {
|
this.initFormData();
|
this.$notify({
|
type: "success",
|
message: "删除成功！",
|
});
|
this.TreeDataPool.fetchTreeData();
|
this.TreeDataPool.selectedNode = {};
|
} else {
|
this.$notify({
|
type: "error",
|
message: "删除失败！",
|
});
|
}
|
});
|
});
|
},
|
// 清空输入框
|
initFormData() {
|
this.form = {
|
latitude: 0,
|
rtsp: "",
|
longitude: 0,
|
name: "",
|
addr: "",
|
alias: "",
|
areaid: "",
|
brand: "",
|
id: "",
|
ip: "",
|
reserved: "",
|
run_type: -1,
|
isAI: false,
|
username: "",
|
password: "",
|
resolution: "",
|
voiceId: "",
|
voiceEnable: false,
|
};
|
},
|
// 添加设备
|
addDevice(node) {
|
console.log("1111");
|
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">
|
.camera-info {
|
width: 100%;
|
|
margin: 20px 0 20px 20px;
|
|
.ai-select {
|
text-align: left;
|
}
|
.el-form-item__label {
|
text-align: left;
|
}
|
.label {
|
color: #606266;
|
font-size: 14px;
|
}
|
.flex-wrap {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.el-select {
|
width: 70%;
|
}
|
}
|
.sysinfo-box {
|
.card-box {
|
float: left;
|
}
|
.chart-box {
|
float: left;
|
width: 50%;
|
margin-top: 20px;
|
margin-left: 20px;
|
}
|
ul {
|
list-style: none;
|
display: table;
|
width: 100%;
|
li {
|
display: table-cell;
|
text-align: center;
|
}
|
}
|
}
|
|
.video-player {
|
height: 450px;
|
}
|
}
|
</style>
|
