<template>
<div
class="info-container-1"
:class="theme ? 'info-container-1' : 'info-container-2'"
>
<el-row class="row">
<!-- 左侧视频 -->
<div>
<el-col :span="18" class="left-wrapper">
<el-card
body-style="margin: 0 auto"
class="card img-container image-polygon-mark"
shadow="hover"
>
<!-- vue鼠标右击事件@contextmenu.prevent需求:阻止浏览器默认事件,添加自定义事件 -->
<div class="image-mark">
<div class="inner" @contextmenu.prevent="mouseEnd">
<!-- 视频 -->
<div class="home-center-bg" style="width: 1300px; height: 100%">
<video
id="videoElement"
controls
autoplay
muted
style="width: 1300px; height: 100%"
></video>
</div>
<!-- 右击实现标注闭合和清楚 -->
<div
class="end-handler"
ref="endHandler"
@mouseleave="$refs.endHandler.style.display = 'none'"
>
<span @click="closeLine">闭合</span>
<span @click="clearLine">清除</span>
<!--添加新标点存在问题,无法确定新增点位与连接位置-->
<!--<span @click="addPoint">添加</span>-->
</div>
<!-- :width="w" :height="h"-->
<div class="float">
<!-- canvas -->
<canvas
ref="cvs"
height="650"
width="1200"
@click="clickCvs"
/>
</div>
</div>
</div>
</el-card>
</el-col>
<!-- 右侧 -->
<el-col :span="6" class="right">
<!-- 监控区域标定 -->
<el-card class="card handle-wrapper" shadow="hover">
<div class="right-conter-title">监控区域标定</div>
<el-form :model="formData" class="demo-form-inline">
<el-form-item label="选择场景" label-width="80px" prop="">
<el-select
v-model="formData.modelId"
placeholder="请选择算法场景"
disabled
>
<el-option
v-for="dict in equipmentChannelList"
:key="dict.id"
:label="dict.modelInfo"
:value="dict.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="right-conter-button">
<el-button @click="add" type="primary" size="mini" class="add"
>添加</el-button
>
<el-button @click="save" type="success" size="mini" class="save"
>保存</el-button
>
</div>
<!-- 标定表格编辑部分 -->
<div class="table-top">
<el-table
:data="tableData"
height="24vh"
:row-class-name="TableRowClassName"
style="width: 100%; margin-top: 15px"
>
<el-table-column prop="type" label="类型" align="center">
</el-table-column>
<el-table-column label="标注区域" align="center">
<template slot-scope="scope">
<div
:title="JSON.stringify(scope.row.drawDetail)"
style="
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ JSON.stringify(scope.row.drawDetail) }}
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180px">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</div>
</el-row>
</div>
</template>
watch: {
pointsList(n) {
const cvs = this.$refs.cvs;
const ctx = cvs.getContext("2d");
ctx.clearRect(0, 0, this.w, this.h); //清空指定矩形区域内的绘图
const length = this.pointsList.length;
if (n.length > 0) {
this.pointsList.forEach((item, index) => {
if (index < length && index > 0) {
let startPoint = {
x: this.pointsList[index - 1].x,
y: this.pointsList[index - 1].y,
};
this.drawLineBetweenPoints(startPoint, { x: item.x, y: item.y });
}
this.drawPoints(item.x, item.y);
});
}
},
},
mounted() {
this.w = this.$refs.cvs.offsetWidth;
this.h = this.$refs.cvs.offsetHeight;
getConfigKey("liveNVR").then((res) => {
this.liveUrl = res.msg;
});
this.handleGetCameraInfo();
},
methods: {
// 播放视频流
play() {
this.flvPlayer.play();
},
arrCamera(row, col) {
return this.cameraArray[
(parseInt(row) - 1) * this.rowLength + parseInt(col)
];
},
//查询摄像仪信息接口部分
handleGetCameraInfo() {
getCameraInfo(this.$route.query.cameraId)
.then((response) => {
this.tableData = [];
this.formData = response.data;
if (this.formData.drawDetail !== null) {
this.tableData.push({ drawDetail: this.formData.drawDetail });
}
listEquipmentChannel({ equipmentId: this.formData.equipmentId }).then(
(response) => {
this.equipmentChannelList = response.rows;
}
);
})
.finally(() => {
if (flvjs.isSupported()) {
let videoElement = document.getElementById("videoElement");
this.flvPlayer = flvjs.createPlayer({
type: "flv",
isLive: true,
hasAudio: false,
// url: 'http://192.168.10.197:8081/live/video.flv' // 自己的flv视频流
url: this.liveUrl + this.formData.channelNo + ".flv", // 自己的flv视频流
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load();
this.flvPlayer.play();
}
});
},
// 添加
add() {
this.tableData.push({ index: this.tableData.length + 1, drawDetail: [] });
// 建议添加后,返回data更新列表数据
},
// 提交请求保存
save() {
if (this.currentArea !== undefined) {
// 此处请求保存标注区域(在清除缓存前操作保存数据请求)
this.tableData[this.currentArea].drawDetail = JSON.stringify(
this.pointsList
);
this.clearLine();
this.currentArea = undefined;
this.formData.drawDetail = this.tableData[0].drawDetail;
updateCameraInfo(this.formData).then((response) => {
this.msgSuccess("操作成功");
this.handleGetCameraInfo();
});
} else {
this.$notify({
title: "警告",
message: "请选择标注区域进行修改",
type: "error",
});
}
},
/** 修改按钮操作 */
handleUpdate() {
const cameraId = parseInt(this.$route.query.cameraId);
getPushInfoByCameraId(cameraId).then((response) => {
this.picPath = process.env.VUE_APP_BASE_API + response.data.picPath;
this.formData = response.data;
this.tableData = this.formData.sealDrawDetailList;
console.dir(this.$refs.cvs);
this.$refs.cvs.onload = () => {
this.w = this.$refs.cvs.offsetWidth;
this.h = this.$refs.cvs.offsetHeight;
};
});
},
// 删除
handleDelete(e) {
this.clearLine();
this.tableData.splice(e, 1);
updateCameraInfoDrawDetail(this.formData.id).then((response) => {
this.msgSuccess("操作成功");
this.handleGetCameraInfo();
});
},
// 编辑进行视频标注
handleEdit(e) {
this.currentArea = e;
this.clearLine();
this.pointsList = this.tableData[e].drawDetail;
window.sessionStorage.setItem("pointsList", this.pointsList);
this.initStorage();
},
pointActive(point, color = "rgba(255,6,44,0.86)") {
// this.drawPoints(point.x,point.y,color,6,4)
this.drawPoints(point.x, point.y, color, 4, 5);
},
pointUnActive(point) {
this.drawPoints(point.x, point.y);
},
// 绘制点线图
drawLineBetweenPoints(startPoint, endPoint) {
const cvs = this.$refs.cvs; //获取实列
const ctx = cvs.getContext("2d");
ctx.beginPath(); //开始当前路径
ctx.moveTo(startPoint.x, startPoint.y); //路径移动到画布中的指定点,不创建线条
ctx.lineTo(endPoint.x, endPoint.y); //添加一个新点
ctx.strokeStyle = "#0096ff"; //线条的颜色
ctx.stroke(); //绘制
this.drawPoints(startPoint.x, startPoint.y);
},
// 绘制弧形图形
drawPoints(x, y, color = "#0096ff", lineWidth = 2, r = 6) {
const cvs = this.$refs.cvs;
const ctx = cvs.getContext("2d");
ctx.beginPath(); //开始当前路径
ctx.arc(x, y, r, 0, 2 * Math.PI); //绘制圆弧
ctx.fillStyle = "white"; //颜色填充
ctx.fill(); //填充当前绘图
ctx.lineWidth = lineWidth; //线条的宽度
ctx.strokeStyle = color; //线条的颜色
ctx.stroke(); //绘制完成
},
// 储存绘制路径
initStorage() {
const storage = window.sessionStorage;
if (storage.getItem("pointsList") === null) {
storage.setItem("pointsList", []);
} else {
this.pointsList = JSON.parse(storage.getItem("pointsList"));
}
},
// canvas点击事件
clickCvs(e) {
if (this.currentArea !== undefined) {
const { offsetX, offsetY } = e;
this.pointsList.push({ x: offsetX, y: offsetY });
this.setThisPointListStorage();
} else {
this.$notify({
title: "警告",
message: "请选择对应区域进行编辑",
type: "error",
});
}
},
setThisPointListStorage() {
const storage = window.sessionStorage;
storage.setItem("pointsList", JSON.stringify(this.pointsList));
},
deletePoint(i) {
this.pointsList.splice(i, 1);
this.setThisPointListStorage();
},
// 鼠标右击事件 闭合、清除
mouseEnd(e) {
let endHandler = this.$refs.endHandler;
endHandler.style.display = "block";
endHandler.style.top = `${e.offsetY - 4}px`;
endHandler.style.left = `${e.offsetX - 4}px`;
},
// 鼠标右击视频标定右键闭合
closeLine() {
if (this.pointsList.length > 0) {
this.pointsList.push(this.pointsList[0]);
this.setThisPointListStorage();
this.$refs.endHandler.style.display = "none";
}
},
// 鼠标右击视频标定右键清除
clearLine() {
this.pointsList = [];
this.setThisPointListStorage();
this.$refs.endHandler.style.display = "none";
},
},