<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="!form.rtsp" 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" style="padding-left: 11px;">
|
<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"
|
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">
|
<i
|
class="el-icon-video-play"
|
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-top: 15px">
|
<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>
|
</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.RealTimeSum"
|
: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 {
|
checkCameraConnet,
|
createCamera,
|
updateCameraInfo,
|
getCameraInfo,
|
delCamera
|
} from "@/api/camera";
|
import { getSoundList } from "@/api/event";
|
import { changeRunType } from "@/api/pollConfig";
|
|
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,
|
InfoCard,
|
eChartsBar,
|
CameraInfoEditor
|
},
|
props: {
|
cameraList: {
|
default: () => {
|
return [];
|
},
|
type: Array
|
}
|
},
|
data() {
|
return {
|
videoItem: null,
|
visibilityState: true,
|
soundList: [],
|
togglePlay: true,
|
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,
|
addParentId: "",
|
rules: {
|
name: [
|
{ required: true, message: "设备名称不能为空", trigger: "blur" }
|
],
|
rtsp: [
|
{ required: true, message: "RTSP地址不能为空", trigger: "blur" }
|
],
|
addr: [
|
{ required: true, message: "设备地址不能为空", trigger: "blur" }
|
]
|
},
|
resolutionList: [],
|
//传感器列表
|
sensors: []
|
};
|
},
|
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();
|
},
|
methods: {
|
getSounds() {
|
getSoundList().then(res => {
|
if (res.success) {
|
this.soundList = res.data.list
|
}
|
}).catch(
|
e => console.log(e)
|
)
|
},
|
selSound(sound) {
|
this.soundPath = sound.path;
|
this.form.voiceId = sound.id
|
},
|
togglePlayer() {
|
if (!this.soundPath) {
|
this.$notify({
|
type: 'info',
|
message: '请先选择一个声音!'
|
})
|
return false;
|
}
|
this.eventAudio.src = this.soundPath;
|
|
if (this.togglePlay) {
|
this.eventAudio.play();
|
} else {
|
this.eventAudio.pause()
|
}
|
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.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
|
}
|
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 => {
|
if (valid) {
|
const isRequire = this.verifyRequrie();
|
if (!isRequire) return false;
|
// 更新
|
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({
|
type: "success",
|
message: "摄像机信息修改成功！"
|
});
|
this.TreeDataPool.fetchTreeData();
|
} else {
|
this.selectCamera(this.TreeDataPool.selectedNode);
|
this.$notify({
|
type: "error",
|
message: "摄像机信息修改失败！"
|
});
|
}
|
});
|
} 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 => {
|
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: "摄像机添加失败！"
|
});
|
}
|
});
|
}
|
}
|
});
|
},
|
// 连接测试
|
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: 0,
|
isAI: false,
|
username: "",
|
password: "",
|
resolution: "",
|
voiceId: "",
|
voiceEnable: true
|
};
|
},
|
// 添加设备
|
addDevice(node) {
|
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();
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.camera-info {
|
width: 100%;
|
height: 100%;
|
margin-left: 20px;
|
overflow: auto;
|
.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;
|
}
|
}
|
}
|
}
|
</style>
|
