|
|
<template>
|
|
|
<div class="thumb-example">
|
|
|
<div class="radioBox" v-if="roleUser == 8 || roleUser == 0">
|
|
|
{{ radioPx }} <span v-if="fileSize">({{ fileSize }})</span>
|
|
|
<span v-if="protocolInfo == '65280'"> 国网I1 </span>
|
|
|
<span v-if="protocolInfo == '65296'"> 陕西 </span>
|
|
|
<span v-if="protocolInfo == '65281'"> 安徽 </span>
|
|
|
<span v-if="protocolInfo == '65282'"> 江苏</span>
|
|
|
<span v-if="protocolInfo == '65283'"> 湖南 </span>
|
|
|
<span v-if="protocolInfo == '65284'"> 浙江 </span>
|
|
|
<span v-if="protocolInfo == '65285'"> 河南全景</span>
|
|
|
<span v-if="protocolInfo == '65286'"> 河南郑州 </span>
|
|
|
<span v-if="protocolInfo == '65290'"> 河南统一视频v2020 </span>
|
|
|
<span v-if="protocolInfo == '65298'"> 宁夏 </span>
|
|
|
<span v-if="protocolInfo == '2'"> 南网 </span>
|
|
|
<span>{{ protocolInfo }}</span>
|
|
|
<!-- <span>(共{{ terminalPhoto.length }}张)</span> -->
|
|
|
</div>
|
|
|
<div class="topPic">
|
|
|
<div
|
|
|
class="bigPic"
|
|
|
v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
|
|
|
>
|
|
|
<el-image :src="currentPicPath"></el-image>
|
|
|
</div>
|
|
|
<div
|
|
|
class="bigPic"
|
|
|
v-else-if="currentPicPath && mediaType == 0"
|
|
|
v-loading="picLoading"
|
|
|
>
|
|
|
<!-- :preview-src-list="srcList" @click="handleBigPicbox(currentPicPath)" -->
|
|
|
<el-image
|
|
|
:src="currentPicPath + '!1366x768'"
|
|
|
@load="loadImage"
|
|
|
@error="setDefaultImage"
|
|
|
ref="picJpg"
|
|
|
id="alarmPic"
|
|
|
width="100%"
|
|
|
height="100%"
|
|
|
:preview-src-list="srcList"
|
|
|
>
|
|
|
<template slot="error">
|
|
|
<img src="../../../assets/img/nodatapic2.jpg" />
|
|
|
</template>
|
|
|
</el-image>
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
|
|
|
<canvas id="alarmCanvas" class="alarmCanvas" ref="alarmCanvas"></canvas>
|
|
|
<!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
|
|
|
</div>
|
|
|
<div class="bigPic" v-else-if="currentPicPath && mediaType == 1">
|
|
|
<video
|
|
|
width="100%"
|
|
|
height="100%"
|
|
|
:src="currentPicPath"
|
|
|
controls="controls"
|
|
|
autoplay
|
|
|
></video>
|
|
|
</div>
|
|
|
<div class="arrow leftArrow" @click="leftClick" v-if="activeSmall > 0">
|
|
|
<i class="el-icon-arrow-left"></i>
|
|
|
</div>
|
|
|
<el-button
|
|
|
v-if="mediaType !== 1"
|
|
|
class="downBtn"
|
|
|
@click.stop="downLoadPic(currentPicPath, currentPicPath)"
|
|
|
>下载图片</el-button
|
|
|
>
|
|
|
<div
|
|
|
class="arrow rightArrow"
|
|
|
@click="rightClick"
|
|
|
v-if="activeSmall !== terminalPhoto.length - 1"
|
|
|
>
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- -->
|
|
|
<div class="bottomPic">
|
|
|
<div class="scrollPicContain">
|
|
|
<div
|
|
|
class="el-car-item"
|
|
|
ref="scrollBox"
|
|
|
v-on:wheel="handleScroll"
|
|
|
:class="terminalPhoto.length < photoNum ? 'littlePic' : ''"
|
|
|
>
|
|
|
<div
|
|
|
class="smallPic"
|
|
|
v-for="(item, index2) in terminalPhoto"
|
|
|
:key="index2"
|
|
|
@click="changeBigPic(item, index2)"
|
|
|
:class="`${activeSmall === index2 ? 'borderActive ' : ''}${
|
|
|
photoNum === 10 ? 'moreSmallPic' : ''
|
|
|
}`"
|
|
|
>
|
|
|
<div
|
|
|
class="picBox"
|
|
|
v-if="
|
|
|
item.path.indexOf('nopic') == -1 &&
|
|
|
item.path.indexOf('videos') == -1
|
|
|
"
|
|
|
>
|
|
|
<!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
|
|
|
<img v-lazy="item.path + '!260x160'" />
|
|
|
<!-- <img :src="item.path + '!260x160'" />-->
|
|
|
<!-- :class="{ alarmSpan: item.isAlarm === 1 }" -->
|
|
|
<p class="timeInfo">
|
|
|
<el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
|
content="拍照时间"
|
|
|
placement="top-start"
|
|
|
>
|
|
|
<span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
|
|
|
</el-tooltip>
|
|
|
|
|
|
(
|
|
|
<el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
|
content="图片上传时间"
|
|
|
placement="top-start"
|
|
|
>
|
|
|
<span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
|
|
|
</el-tooltip>
|
|
|
)
|
|
|
<span
|
|
|
>--{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.channelName
|
|
|
}}</span
|
|
|
>
|
|
|
<span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="picBox" v-else-if="item.mediaType == 1">
|
|
|
<!-- <el-image :src="item.thumb + '!260x160'"></el-image> -->
|
|
|
<img v-lazy="item.thumb + '!260x160'" />
|
|
|
<p class="timeInfo">
|
|
|
<i class="el-icon-video-camera"></i>
|
|
|
<el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
|
content="拍照时间"
|
|
|
placement="top-start"
|
|
|
>
|
|
|
<span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
|
|
|
</el-tooltip>
|
|
|
|
|
|
(
|
|
|
<el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
|
content="图片上传时间"
|
|
|
placement="top-start"
|
|
|
>
|
|
|
<span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
|
|
|
</el-tooltip>
|
|
|
)
|
|
|
<span
|
|
|
>--{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.channelName
|
|
|
}}</span
|
|
|
>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="picBox" v-else>
|
|
|
<!-- <el-image :src="item.path"></el-image> -->
|
|
|
<img v-lazy="item.path" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="arrow leftArrow" @click.stop="smallLeftClick" ref="leftRef">
|
|
|
<i class="el-icon-arrow-left"></i>
|
|
|
</div>
|
|
|
<div class="arrow rightArrow" ref="rightRef">
|
|
|
<i class="el-icon-arrow-right" @click.stop="smallRightClick"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 点击出现大图 -->
|
|
|
<!-- <div v-if="showBigpic" class="showPic" @click="closePic($event)">
|
|
|
<div class="picboxI">
|
|
|
<img
|
|
|
id="bigimg2"
|
|
|
ref="bigimgref"
|
|
|
class="maskPic img"
|
|
|
:src="bigImgPath"
|
|
|
width="100%"
|
|
|
height="100%"
|
|
|
/>
|
|
|
|
|
|
<canvas id="bigCanvas2" class="mybigCanvas" ref="myCanvasbig"></canvas>
|
|
|
</div>
|
|
|
<div class="viewClose" @click="closePic($event)">
|
|
|
<i class="el-icon-close"></i>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import defaultImage from "../../../assets/img/nodatapic2.jpg";
|
|
|
import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
|
|
|
export default {
|
|
|
components: {},
|
|
|
props: {
|
|
|
terminalPhoto: {
|
|
|
type: Array,
|
|
|
default: () => [],
|
|
|
},
|
|
|
photoNum: {
|
|
|
type: Number,
|
|
|
default: () => [],
|
|
|
},
|
|
|
protocolInfo: {
|
|
|
type: Number,
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
picLoading: true,
|
|
|
currentPicPath: "", //大图
|
|
|
mediaType: "", //判断图片类型是视频还是图片
|
|
|
activeSmall: 0, //索引选中小图,
|
|
|
currentPage: 0,
|
|
|
srcList: [],
|
|
|
radioPx: "",
|
|
|
fileSize: "",
|
|
|
roleUser: "",
|
|
|
localPoints: [], //线缆坐标
|
|
|
flagLine: true, //线缆标识
|
|
|
canvas: null,
|
|
|
ctx: null,
|
|
|
imgpic: null,
|
|
|
color: "", //线颜色
|
|
|
borderwidth: "", //线宽
|
|
|
markEnable: "", //是否显示
|
|
|
recArrs: [],
|
|
|
picDataAlarm: [],
|
|
|
labelMarkArrs: [],
|
|
|
|
|
|
//大图
|
|
|
showBigpic: false,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
////console.log(this.terminalPhoto);
|
|
|
this.changeBigPic(this.terminalPhoto[0], 0);
|
|
|
},
|
|
|
watch: {
|
|
|
terminalPhoto: {
|
|
|
handler(newVal, oldVal) {
|
|
|
this.terminalPhoto = newVal;
|
|
|
},
|
|
|
immediate: true,
|
|
|
deep: true, //deep，默认值是 false，代表是否深度监听。
|
|
|
},
|
|
|
},
|
|
|
computed: {},
|
|
|
created() {
|
|
|
this.roleUser = localStorage.getItem("role");
|
|
|
////console.log(this.roleUser);
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
//下载图片
|
|
|
async downLoadPic(path, name) {
|
|
|
const imgUrl = path;
|
|
|
const response = await fetch(imgUrl);
|
|
|
const blob = await response.blob();
|
|
|
// 创建下载链接
|
|
|
const url = window.URL.createObjectURL(blob);
|
|
|
const link = document.createElement("a");
|
|
|
link.href = url;
|
|
|
console.log(name);
|
|
|
link.download = name.split("/").pop();
|
|
|
|
|
|
document.body.appendChild(link);
|
|
|
link.click();
|
|
|
document.body.removeChild(link);
|
|
|
// 释放 Blob URL
|
|
|
window.URL.revokeObjectURL(url);
|
|
|
},
|
|
|
|
|
|
//获取线缆绘制显示
|
|
|
getPointList(data) {
|
|
|
console.log("woshi 线缆绘制", data);
|
|
|
getCoordinate({
|
|
|
channelId: data.channelId,
|
|
|
needPic: "1",
|
|
|
termId: data.termId,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
//console.log(res);
|
|
|
this.localPoints = res.data.list;
|
|
|
this.color = res.data.color;
|
|
|
this.borderwidth = res.data.boderWidth;
|
|
|
this.markEnable = res.data.markEnable;
|
|
|
if (this.markEnable === 1) {
|
|
|
this.drawline();
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {});
|
|
|
},
|
|
|
//开启绘制线缆
|
|
|
openLine() {
|
|
|
this.flagLine = true;
|
|
|
|
|
|
//开启传1
|
|
|
updateMarkEnableStatus({
|
|
|
status: 1,
|
|
|
}).then((res) => {
|
|
|
//console.log(res);
|
|
|
});
|
|
|
this.drawline();
|
|
|
},
|
|
|
//关闭绘制线缆
|
|
|
closeLine() {
|
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
this.flagLine = false;
|
|
|
|
|
|
//关闭传0
|
|
|
updateMarkEnableStatus({
|
|
|
status: 0,
|
|
|
}).then((res) => {
|
|
|
//console.log(res);
|
|
|
});
|
|
|
},
|
|
|
//绘制线缆方法
|
|
|
drawline() {
|
|
|
this.canvas = this.$refs.myCanvas;
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
this.canvas.width = this.imgpic.imageWidth; //设置画布大小
|
|
|
this.canvas.height = this.imgpic.imageHeight; //设置画布大小
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
|
|
if (this.flagLine == true) {
|
|
|
this.localPoints = this.localPoints;
|
|
|
} else {
|
|
|
this.localPoints = [];
|
|
|
}
|
|
|
|
|
|
this.ctx.beginPath();
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
this.ctx.strokeStyle = this.color;
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
this.ctx.lineWidth = this.borderwidth;
|
|
|
|
|
|
if (this.localPoints == null) {
|
|
|
return;
|
|
|
} else {
|
|
|
for (var i = 0; i < this.localPoints.length; i++) {
|
|
|
this.ctx.moveTo(
|
|
|
this.localPoints[i].x1 * this.imgpic.imageWidth,
|
|
|
this.localPoints[i].y1 * this.imgpic.imageHeight
|
|
|
);
|
|
|
this.ctx.lineTo(
|
|
|
this.localPoints[i].x2 * this.imgpic.imageWidth,
|
|
|
this.localPoints[i].y2 * this.imgpic.imageHeight
|
|
|
);
|
|
|
}
|
|
|
this.ctx.closePath();
|
|
|
this.ctx.stroke();
|
|
|
}
|
|
|
|
|
|
// this.ctx.beginPath(); //开始路径
|
|
|
// this.ctx.moveTo(100, 100); //三角形，左顶点
|
|
|
// this.ctx.lineTo(300, 100); //右顶点
|
|
|
// this.ctx.lineTo(300, 300); //底部的点
|
|
|
// this.ctx.closePath(); //结束路径
|
|
|
// this.ctx.stroke(); //描边路径
|
|
|
},
|
|
|
//点击大图左右按钮
|
|
|
leftClick() {
|
|
|
console.log(this.photoNum);
|
|
|
this.activeSmall--;
|
|
|
this.$refs.scrollBox.scrollLeft -=
|
|
|
this.$refs.scrollBox.offsetWidth / this.photoNum;
|
|
|
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
|
|
|
},
|
|
|
rightClick() {
|
|
|
console.log(this.photoNum);
|
|
|
this.activeSmall++;
|
|
|
this.$refs.scrollBox.scrollLeft +=
|
|
|
this.$refs.scrollBox.offsetWidth / this.photoNum;
|
|
|
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
|
|
|
},
|
|
|
//获取第一张大图
|
|
|
changeBigPic(data, i) {
|
|
|
// //console.log("鼠标222222222", this.currentPage, this.activeSmall);
|
|
|
this.picDataAlarm = data;
|
|
|
this.srcList = [];
|
|
|
this.localPoints = [];
|
|
|
this.activeSmall = i;
|
|
|
this.mediaType = data.mediaType;
|
|
|
this.currentPicPath = data.path;
|
|
|
this.srcList.push(data.path);
|
|
|
if (data.width != undefined) {
|
|
|
this.radioPx = data.width + "x" + data.height;
|
|
|
} else {
|
|
|
this.radioPx = "";
|
|
|
}
|
|
|
if (data.fileSize !== undefined) {
|
|
|
const sizeInBytes = data.fileSize;
|
|
|
const sizeInMB = sizeInBytes / (1024 * 1024);
|
|
|
const sizeInKB = sizeInBytes / 1024;
|
|
|
|
|
|
if (sizeInMB >= 1) {
|
|
|
this.fileSize = `${sizeInMB.toFixed(2)}M`; // 大于等于1MB，以MB为单位，保留两位小数
|
|
|
} else {
|
|
|
this.fileSize = `${sizeInKB.toFixed(0)}K`; // 小于1MB，以KB为单位，保留两位小数
|
|
|
}
|
|
|
} else {
|
|
|
this.fileSize = ""; // 如果data.fileSize未定义，则设置为空字符串
|
|
|
}
|
|
|
|
|
|
// console.log(data.channelId);
|
|
|
if (data.channelId) {
|
|
|
this.getPointList(data);
|
|
|
}
|
|
|
const items = this.$refs.scrollBox.querySelectorAll(".smallPic");
|
|
|
const selectedItem = items[i];
|
|
|
const selectedItemLeft = selectedItem.offsetLeft;
|
|
|
const scrollContainer = this.$refs.scrollBox;
|
|
|
const scrollContainerWidth = scrollContainer.offsetWidth;
|
|
|
const selectedItemWidth = selectedItem.offsetWidth;
|
|
|
|
|
|
// 计算滚动距离，确保选中的元素在滚动容器内完整显示
|
|
|
let scrollDistance =
|
|
|
selectedItemLeft - (scrollContainerWidth - selectedItemWidth) / 2;
|
|
|
if (scrollDistance < 0) {
|
|
|
scrollDistance = 0;
|
|
|
} else if (
|
|
|
scrollDistance + scrollContainerWidth >
|
|
|
scrollContainer.scrollWidth
|
|
|
) {
|
|
|
scrollDistance = scrollContainer.scrollWidth - scrollContainerWidth;
|
|
|
}
|
|
|
// 调整滚动容器的scrollLeft
|
|
|
scrollContainer.scrollLeft = scrollDistance;
|
|
|
},
|
|
|
loadImage() {
|
|
|
console.log("loading");
|
|
|
this.picLoading = false;
|
|
|
this.drawlineBig(this.picDataAlarm);
|
|
|
},
|
|
|
setDefaultImage(e) {
|
|
|
e.target.src = defaultImage;
|
|
|
this.picLoading = false;
|
|
|
},
|
|
|
//鼠标滚动
|
|
|
handleScroll(e) {
|
|
|
let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
|
|
|
if (direction == "down") {
|
|
|
this.$refs.scrollBox.scrollLeft +=
|
|
|
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 2;
|
|
|
}
|
|
|
if (direction == "up") {
|
|
|
this.$refs.scrollBox.scrollLeft -=
|
|
|
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 2;
|
|
|
}
|
|
|
},
|
|
|
//缩略图的左右箭头
|
|
|
smallLeftClick() {
|
|
|
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth;
|
|
|
this.$forceUpdate(); // 强制 Vue 重新渲染
|
|
|
},
|
|
|
smallRightClick() {
|
|
|
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth;
|
|
|
this.$forceUpdate(); // 强制 Vue 重新渲染
|
|
|
},
|
|
|
|
|
|
//绘制大图告警区域
|
|
|
//绘制大图告警区域
|
|
|
drawlineBig(data) {
|
|
|
console.log(data);
|
|
|
this.canvas = document.getElementById("alarmCanvas");
|
|
|
this.imgpic = document.getElementById("alarmPic");
|
|
|
console.log(document.getElementById("alarmCanvas"));
|
|
|
console.log(document.getElementById("alarmPic"));
|
|
|
console.log(this.canvas);
|
|
|
console.log(this.imgpic);
|
|
|
this.textInfo = data.enname;
|
|
|
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
|
|
|
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
|
|
|
|
|
|
console.log(this.canvas.width, this.canvas.height);
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
this.ctx.beginPath();
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
this.ctx.strokeStyle = "#ff0000";
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
this.ctx.lineWidth = 2;
|
|
|
this.labelMarkArrs = data.alarmlist;
|
|
|
this.recArrs = [];
|
|
|
for (var i = 0; i < this.labelMarkArrs.length; i++) {
|
|
|
console.log(this.labelMarkArrs[i]);
|
|
|
//获取的数据转化一下
|
|
|
this.recArrs.push({
|
|
|
x:
|
|
|
this.labelMarkArrs[i].x * this.canvas.width -
|
|
|
(this.labelMarkArrs[i].width * this.canvas.width) / 2,
|
|
|
y:
|
|
|
this.labelMarkArrs[i].y * this.canvas.height -
|
|
|
(this.labelMarkArrs[i].height * this.canvas.height) / 2,
|
|
|
w: this.labelMarkArrs[i].width * this.canvas.width,
|
|
|
h: this.labelMarkArrs[i].height * this.canvas.height,
|
|
|
text: this.labelMarkArrs[i].enname + this.labelMarkArrs[i].prob + "%",
|
|
|
type: this.labelMarkArrs[i].label,
|
|
|
});
|
|
|
}
|
|
|
console.log(this.recArrs);
|
|
|
if (!this.recArrs.length) return;
|
|
|
for (var i = 0; i < this.recArrs.length; i++) {
|
|
|
// >2的判断是为了防止误触画出来的数据
|
|
|
if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.lineWidth = 2; // 矩形框的线条宽度
|
|
|
this.ctx.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色
|
|
|
// 设置填充样式
|
|
|
// this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
|
|
|
this.ctx.strokeRect(
|
|
|
this.recArrs[i].x,
|
|
|
this.recArrs[i].y,
|
|
|
this.recArrs[i].w,
|
|
|
this.recArrs[i].h
|
|
|
); // 矩形框
|
|
|
// this.ctx.fillRect(
|
|
|
// this.recArrs[i].x,
|
|
|
// this.recArrs[i].y,
|
|
|
// this.recArrs[i].w,
|
|
|
// this.recArrs[i].h
|
|
|
// ); // 填充矩形
|
|
|
// 如果有文本信息，填充文本信息
|
|
|
if (this.recArrs[i].text) {
|
|
|
this.ctx.font = "100 18px 微软雅黑";
|
|
|
this.ctx.lineWidth = 1;
|
|
|
this.ctx.strokeStyle = "rgb(255,255,0)";
|
|
|
this.ctx.strokeText(
|
|
|
this.recArrs[i].text,
|
|
|
this.recArrs[i].x +
|
|
|
this.recArrs[i].w / 2 -
|
|
|
(this.recArrs[i].text.length / 2) * 16,
|
|
|
this.recArrs[i].y - 20 < 0
|
|
|
? this.recArrs[i].y + this.recArrs[i].h + 20
|
|
|
: this.recArrs[i].y - 10
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
this.ctx.closePath();
|
|
|
this.ctx.stroke();
|
|
|
},
|
|
|
//绘制大图告警区域
|
|
|
drawlineBig2(data) {
|
|
|
console.log(data);
|
|
|
this.canvas = document.getElementById("bigCanvas2");
|
|
|
this.imgpic = document.getElementById("bigimg2");
|
|
|
console.log(document.getElementById("alarmCanvas"));
|
|
|
console.log(document.getElementById("bigimg2"));
|
|
|
console.log(this.canvas);
|
|
|
console.log(this.imgpic);
|
|
|
this.textInfo = data.enname;
|
|
|
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
|
|
|
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
|
|
|
|
|
|
console.log(this.canvas.width, this.canvas.height);
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
this.ctx.beginPath();
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
this.ctx.strokeStyle = "#ff0000";
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
this.ctx.lineWidth = 2;
|
|
|
this.labelMarkArrs = data.alarmlist;
|
|
|
this.recArrs = [];
|
|
|
for (var i = 0; i < this.labelMarkArrs.length; i++) {
|
|
|
console.log(this.labelMarkArrs[i]);
|
|
|
//获取的数据转化一下
|
|
|
this.recArrs.push({
|
|
|
x:
|
|
|
this.labelMarkArrs[i].x * this.canvas.width -
|
|
|
(this.labelMarkArrs[i].width * this.canvas.width) / 2,
|
|
|
y:
|
|
|
this.labelMarkArrs[i].y * this.canvas.height -
|
|
|
(this.labelMarkArrs[i].height * this.canvas.height) / 2,
|
|
|
w: this.labelMarkArrs[i].width * this.canvas.width,
|
|
|
h: this.labelMarkArrs[i].height * this.canvas.height,
|
|
|
text: this.labelMarkArrs[i].enname + this.labelMarkArrs[i].prob + "%",
|
|
|
type: this.labelMarkArrs[i].label,
|
|
|
});
|
|
|
}
|
|
|
console.log(this.recArrs);
|
|
|
if (!this.recArrs.length) return;
|
|
|
for (var i = 0; i < this.recArrs.length; i++) {
|
|
|
// >2的判断是为了防止误触画出来的数据
|
|
|
if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
|
|
|
this.ctx.beginPath();
|
|
|
this.ctx.lineWidth = 2; // 矩形框的线条宽度
|
|
|
this.ctx.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色
|
|
|
// 设置填充样式
|
|
|
// this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
|
|
|
this.ctx.strokeRect(
|
|
|
this.recArrs[i].x,
|
|
|
this.recArrs[i].y,
|
|
|
this.recArrs[i].w,
|
|
|
this.recArrs[i].h
|
|
|
); // 矩形框
|
|
|
// this.ctx.fillRect(
|
|
|
// this.recArrs[i].x,
|
|
|
// this.recArrs[i].y,
|
|
|
// this.recArrs[i].w,
|
|
|
// this.recArrs[i].h
|
|
|
// ); // 填充矩形
|
|
|
// 如果有文本信息，填充文本信息
|
|
|
if (this.recArrs[i].text) {
|
|
|
this.ctx.font = "100 16px 微软雅黑";
|
|
|
this.ctx.lineWidth = 2;
|
|
|
this.ctx.strokeStyle = "rgb(255,255,0)";
|
|
|
this.ctx.strokeText(
|
|
|
this.recArrs[i].text,
|
|
|
this.recArrs[i].x +
|
|
|
this.recArrs[i].w / 2 -
|
|
|
(this.recArrs[i].text.length / 2) * 16,
|
|
|
this.recArrs[i].y - 20 < 0
|
|
|
? this.recArrs[i].y + this.recArrs[i].h + 20
|
|
|
: this.recArrs[i].y - 10
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
this.ctx.closePath();
|
|
|
this.ctx.stroke();
|
|
|
},
|
|
|
//放大图
|
|
|
handleBigPicbox(val) {
|
|
|
console.log(val);
|
|
|
this.showBigpic = true;
|
|
|
this.bigImgPath = val;
|
|
|
setTimeout(() => {
|
|
|
this.$nextTick(() => {
|
|
|
this.drawlineBig2(this.picDataAlarm);
|
|
|
});
|
|
|
}, 100);
|
|
|
},
|
|
|
closePic(e) {
|
|
|
console.log(e);
|
|
|
var btn = this.$refs.bigimgref;
|
|
|
console.log(btn);
|
|
|
if (btn) {
|
|
|
if (!btn.contains(event.target)) {
|
|
|
//按钮.app-download以外的区域
|
|
|
this.zoomD = 1;
|
|
|
this.showBigpic = false;
|
|
|
}
|
|
|
}
|
|
|
//
|
|
|
// this.showBigpic = false;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.thumb-example {
|
|
|
width: 100%;
|
|
|
// display: flex;
|
|
|
// flex-direction: column;
|
|
|
height: calc(100% - 32px);
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.radioBox {
|
|
|
position: absolute;
|
|
|
top: 8px;
|
|
|
right: 24px;
|
|
|
color: #fff;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.topPic {
|
|
|
width: 100%;
|
|
|
height: 80%;
|
|
|
margin-bottom: 4px;
|
|
|
position: relative;
|
|
|
.bigPic {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
cursor: pointer;
|
|
|
.el-image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.myCanvas {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
cursor: pointer;
|
|
|
z-index: 3;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
#alarmCanvas {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0 auto;
|
|
|
cursor: pointer;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
&:hover {
|
|
|
.arrow {
|
|
|
opacity: 1;
|
|
|
transition: all 0.5s ease-in;
|
|
|
}
|
|
|
.downBtn {
|
|
|
opacity: 1;
|
|
|
transition: all 0.5s ease-in;
|
|
|
}
|
|
|
}
|
|
|
.arrow {
|
|
|
opacity: 0;
|
|
|
position: absolute;
|
|
|
cursor: pointer;
|
|
|
font-size: 16px;
|
|
|
border-radius: 30px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
color: #4cdbc8;
|
|
|
font-weight: bold;
|
|
|
background-color: rgba(31, 45, 61, 0.8);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
|
line-height: 60px;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
z-index: 4;
|
|
|
&:hover {
|
|
|
background-color: rgba(31, 45, 61, 1);
|
|
|
}
|
|
|
}
|
|
|
.leftArrow {
|
|
|
left: 16px;
|
|
|
}
|
|
|
.rightArrow {
|
|
|
right: 16px;
|
|
|
}
|
|
|
.downBtn {
|
|
|
position: absolute;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
border: none;
|
|
|
right: 24px;
|
|
|
bottom: 24px;
|
|
|
color: #fff;
|
|
|
z-index: 5;
|
|
|
opacity: 0;
|
|
|
&:hover {
|
|
|
background: rgba(0, 0, 0, 0.9);
|
|
|
color: #169e8c;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.bottomPic {
|
|
|
width: 100%;
|
|
|
height: 20%;
|
|
|
margin-bottom: 6px;
|
|
|
.scrollPicContain {
|
|
|
// width: 1380px;
|
|
|
display: flex;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
.arrow {
|
|
|
opacity: 0;
|
|
|
position: absolute;
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
border-radius: 30px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
color: #4cdbc8;
|
|
|
font-weight: bold;
|
|
|
background-color: rgba(31, 45, 61, 0.8);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
text-align: center;
|
|
|
line-height: 60px;
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
z-index: 4;
|
|
|
&:hover {
|
|
|
background-color: rgba(31, 45, 61, 1);
|
|
|
}
|
|
|
}
|
|
|
.leftArrow {
|
|
|
left: 16px;
|
|
|
}
|
|
|
.rightArrow {
|
|
|
right: 16px;
|
|
|
}
|
|
|
&:hover {
|
|
|
.arrow {
|
|
|
opacity: 1;
|
|
|
transition: all 0.5s ease-in;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-car-item {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: hidden;
|
|
|
scroll-behavior: smooth;
|
|
|
.smallPic {
|
|
|
width: 19.2%;
|
|
|
border: 3px solid transparent;
|
|
|
box-sizing: border-box;
|
|
|
flex-shrink: 0;
|
|
|
white-space: nowrap;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
.picBox {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.timeInfo {
|
|
|
position: absolute;
|
|
|
bottom: 0px;
|
|
|
width: 100%;
|
|
|
background: #f0f0f0;
|
|
|
padding: 6px 0;
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
color: #333;
|
|
|
.el-icon-video-camera {
|
|
|
font-size: 20px;
|
|
|
margin-right: 8px;
|
|
|
align-items: center;
|
|
|
vertical-align: sub;
|
|
|
color: #169e8c;
|
|
|
}
|
|
|
}
|
|
|
.alarmSpan {
|
|
|
color: #f00;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
.moreSmallPic {
|
|
|
width: 9.8%;
|
|
|
}
|
|
|
.borderActive {
|
|
|
.timeInfo {
|
|
|
color: #fff;
|
|
|
background: linear-gradient(180deg, #4cdbc8 10%, #128071);
|
|
|
}
|
|
|
.alarmSpan {
|
|
|
color: #f00;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.littlePic {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
.showPic {
|
|
|
position: fixed;
|
|
|
background-color: rgba(0, 0, 0, 50%);
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
overflow: hidden;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
z-index: 9999;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
cursor: pointer;
|
|
|
.picboxI {
|
|
|
position: relative;
|
|
|
width: 90%;
|
|
|
height: 90%;
|
|
|
margin: auto;
|
|
|
animation-name: scaleDraw;
|
|
|
/*关键帧名称*/
|
|
|
animation-timing-function: ease;
|
|
|
/*动画的速度曲线*/
|
|
|
animation-iteration-count: 1;
|
|
|
/*动画播放的次数*/
|
|
|
animation-duration: 0.65s;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
img {
|
|
|
max-width: 100%;
|
|
|
max-height: 100%;
|
|
|
margin: auto;
|
|
|
position: absolute;
|
|
|
cursor: grab;
|
|
|
}
|
|
|
.mybigCanvas {
|
|
|
position: absolute;
|
|
|
// top: 0;
|
|
|
// left: 0;
|
|
|
max-width: 100%;
|
|
|
max-height: 100%;
|
|
|
margin: 0 auto;
|
|
|
cursor: pointer;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
}
|
|
|
.viewClose {
|
|
|
-webkit-app-region: no-drag;
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 50%;
|
|
|
cursor: pointer;
|
|
|
height: 80px;
|
|
|
overflow: hidden;
|
|
|
position: absolute;
|
|
|
right: -40px;
|
|
|
top: -40px;
|
|
|
transition: background-color 0.15s;
|
|
|
width: 80px;
|
|
|
.el-icon-close {
|
|
|
bottom: 16px;
|
|
|
left: 16px;
|
|
|
position: absolute;
|
|
|
color: #fff;
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|