|
|
<template>
|
|
|
<div class="thumb-example">
|
|
|
<div class="topPic">
|
|
|
<div
|
|
|
class="bigPic"
|
|
|
v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
|
|
|
>
|
|
|
<el-image :src="currentPicPath">
|
|
|
<div
|
|
|
slot="placeholder"
|
|
|
class="image-slot"
|
|
|
:style="{
|
|
|
backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
|
|
|
}"
|
|
|
>
|
|
|
<i class="el-icon-loading"></i>
|
|
|
</div>
|
|
|
</el-image>
|
|
|
</div>
|
|
|
<div
|
|
|
class="bigPic"
|
|
|
v-else-if="currentPicPath && mediaType == 0"
|
|
|
@click="handleBigPicbox(currentPicPath)"
|
|
|
>
|
|
|
<!-- :preview-src-list="srcList" @click="handleBigPicbox(currentPicPath)" -->
|
|
|
<el-image
|
|
|
:src="currentPicPath"
|
|
|
@load="loadImage"
|
|
|
@error="setDefaultImage"
|
|
|
ref="picJpg"
|
|
|
id="alarmPic"
|
|
|
width="100%"
|
|
|
height="100%"
|
|
|
>
|
|
|
<div
|
|
|
slot="placeholder"
|
|
|
class="image-slot"
|
|
|
:style="{
|
|
|
backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
|
|
|
}"
|
|
|
>
|
|
|
<i class="el-icon-loading"></i>
|
|
|
</div>
|
|
|
<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 === 8 ? 'moreSmallPic' : ''
|
|
|
}`"
|
|
|
>
|
|
|
<div
|
|
|
class="picBox"
|
|
|
v-if="
|
|
|
item.path.indexOf('nopic') == -1 &&
|
|
|
item.path.indexOf('videos') == -1
|
|
|
"
|
|
|
>
|
|
|
<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"
|
|
|
@mousewheel.prevent="rollImg"
|
|
|
:style="{
|
|
|
transform: 'scale(' + zoomD + ')',
|
|
|
}"
|
|
|
@mousedown="move"
|
|
|
>
|
|
|
<img
|
|
|
id="bigimg2"
|
|
|
ref="bigimgref"
|
|
|
class="maskPic img"
|
|
|
:src="bigImgPath"
|
|
|
/>
|
|
|
<!-- <canvas id="bigCanvas2" class="mybigCanvas" ref="myCanvasbig2"></canvas> -->
|
|
|
<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 {
|
|
|
items: [
|
|
|
"Item 1",
|
|
|
"Item 2",
|
|
|
"Item 3",
|
|
|
"Item 4",
|
|
|
"Item 5",
|
|
|
"Item 6",
|
|
|
"Item 7",
|
|
|
"Item 8",
|
|
|
"Item 9",
|
|
|
"Item 10",
|
|
|
],
|
|
|
picLoading: true,
|
|
|
currentPicPath: "", //大图
|
|
|
mediaType: 0, //判断图片类型是视频还是图片
|
|
|
activeSmall: 0, //索引选中小图,
|
|
|
currentPage: 0,
|
|
|
srcList: [],
|
|
|
radioPx: "",
|
|
|
fileSize: "",
|
|
|
roleUser: "",
|
|
|
localPoints: [], //线缆坐标
|
|
|
flagLine: true, //线缆标识
|
|
|
canvas: null,
|
|
|
ctx: null,
|
|
|
imgpic: null,
|
|
|
color: "", //线颜色
|
|
|
borderwidth: "", //线宽
|
|
|
markEnable: "", //是否显示
|
|
|
recArrs: [],
|
|
|
picDataAlarm: [],
|
|
|
labelMarkArrs: [],
|
|
|
bigArr: "",
|
|
|
//大图
|
|
|
showBigpic: false,
|
|
|
picShowFlag: true,
|
|
|
zoomD: 1,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
console.log("我是图片列表", this.terminalPhoto);
|
|
|
// if (this.terminalPhoto) {
|
|
|
// this.changeBigPic(this.terminalPhoto[0], 0);
|
|
|
// // 进行其他操作
|
|
|
// }
|
|
|
|
|
|
//console.log(this.terminalPhoto[0]);
|
|
|
},
|
|
|
watch: {
|
|
|
terminalPhoto: {
|
|
|
handler(newVal, oldVal) {
|
|
|
this.terminalPhoto = newVal;
|
|
|
console.log("我是图片列表", this.terminalPhoto);
|
|
|
},
|
|
|
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();
|
|
|
},
|
|
|
//关闭绘制线缆
|
|
|
handelClear() {
|
|
|
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) {
|
|
|
if (data) {
|
|
|
console.log("aaaaaaaaaaaaaaaaaaaaa", data.mediaType);
|
|
|
this.mediaType = data.mediaType !== null ? data.mediaType : 0;
|
|
|
|
|
|
this.picDataAlarm = data;
|
|
|
this.srcList = [];
|
|
|
this.localPoints = [];
|
|
|
this.activeSmall = i;
|
|
|
|
|
|
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;
|
|
|
setTimeout(() => {
|
|
|
this.$nextTick(() => {
|
|
|
this.drawlineBig(this.picDataAlarm);
|
|
|
});
|
|
|
}, 100);
|
|
|
}
|
|
|
},
|
|
|
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;
|
|
|
}
|
|
|
},
|
|
|
handleSwipeLeft() {
|
|
|
// 处理向左滑动
|
|
|
this.$refs.scrollBox.scrollLeft -=
|
|
|
(this.$refs.scrollBox.offsetWidth / this.photoNum) * 2;
|
|
|
},
|
|
|
handleSwipeRight() {
|
|
|
// 处理向右滑动
|
|
|
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();
|
|
|
console.log("开始绘制告警信息");
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
this.ctx.strokeStyle = "#ff0000";
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
this.ctx.lineWidth = 1;
|
|
|
this.labelMarkArrs = data.alarmlist[0];
|
|
|
console.log("我是打印出来的数据", this.labelMarkArrs);
|
|
|
|
|
|
// 绘制矩形
|
|
|
var scaleX = this.canvas.width / this.labelMarkArrs.photoWidth, //this.iw图片的宽
|
|
|
scaleY = this.canvas.height / this.labelMarkArrs.photoHeight; //this.ih图片的高
|
|
|
console.log(scaleX, scaleY);
|
|
|
var top = this.labelMarkArrs.x * scaleX,
|
|
|
left = this.labelMarkArrs.y * scaleY,
|
|
|
width = this.labelMarkArrs.width * scaleX,
|
|
|
height = this.labelMarkArrs.height * scaleY;
|
|
|
console.log(top, left, width, height);
|
|
|
// this.ctx.strokeStyle = "red"; //线的颜色
|
|
|
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
|
|
|
//this.ctx.strokeRect(data.x, data.y, data.width, data.height);
|
|
|
this.ctx.font = "14px normal";
|
|
|
this.ctx.fillStyle = "#ff0000";
|
|
|
this.textInfo = this.labelMarkArrs.enname;
|
|
|
//this.ctx.fillText(this.textInfo, top, left + 24);
|
|
|
//距离上面有空间
|
|
|
if (left > 32) {
|
|
|
this.ctx.fillText(this.textInfo, top, left - 4);
|
|
|
} else if (this.canvas.height - left + height > 32) {
|
|
|
this.ctx.fillText(this.textInfo, top, height - 4);
|
|
|
}
|
|
|
|
|
|
this.ctx.closePath();
|
|
|
this.ctx.stroke();
|
|
|
console.log("结束绘制告警信息！！！！！！！！！！！！！！");
|
|
|
},
|
|
|
//绘制大图告警区域
|
|
|
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();
|
|
|
console.log("开始绘制告警信息");
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
this.ctx.strokeStyle = "#ff0000";
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
this.ctx.lineWidth = 1;
|
|
|
this.labelMarkArrs = data.alarmlist[0];
|
|
|
console.log("我是打印出来的数据", this.labelMarkArrs);
|
|
|
|
|
|
// 绘制矩形
|
|
|
var scaleX = this.canvas.width / this.labelMarkArrs.photoWidth, //this.iw图片的宽
|
|
|
scaleY = this.canvas.height / this.labelMarkArrs.photoHeight; //this.ih图片的高
|
|
|
console.log(scaleX, scaleY);
|
|
|
var top = this.labelMarkArrs.x * scaleX,
|
|
|
left = this.labelMarkArrs.y * scaleY,
|
|
|
width = this.labelMarkArrs.width * scaleX,
|
|
|
height = this.labelMarkArrs.height * scaleY;
|
|
|
console.log(top, left, width, height);
|
|
|
// this.ctx.strokeStyle = "red"; //线的颜色
|
|
|
this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
|
|
|
//this.ctx.strokeRect(data.x, data.y, data.width, data.height);
|
|
|
this.ctx.font = "14px normal";
|
|
|
this.ctx.fillStyle = "#ff0000";
|
|
|
this.textInfo = this.labelMarkArrs.enname;
|
|
|
//this.ctx.fillText(this.textInfo, top, left + 24);
|
|
|
//距离上面有空间
|
|
|
if (left > 32) {
|
|
|
this.ctx.fillText(this.textInfo, top, left - 4);
|
|
|
} else if (this.canvas.height - left + height > 32) {
|
|
|
this.ctx.fillText(this.textInfo, top, height - 4);
|
|
|
}
|
|
|
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);
|
|
|
},
|
|
|
//移动demo
|
|
|
move(e) {
|
|
|
console.log(e);
|
|
|
e.preventDefault();
|
|
|
// 获取元素
|
|
|
var personBox = document.querySelector(".picboxI");
|
|
|
var img = document.querySelector(".img");
|
|
|
var x = e.pageX - img.offsetLeft;
|
|
|
var y = e.pageY - img.offsetTop;
|
|
|
// 添加鼠标移动事件
|
|
|
personBox.addEventListener("mousemove", move);
|
|
|
console.log(personBox.addEventListener("mousemove", move));
|
|
|
console.log(personBox.style);
|
|
|
function move(e) {
|
|
|
console.log(personBox.style.left);
|
|
|
personBox.style.left = e.pageX - x + "px";
|
|
|
personBox.style.top = e.pageY - y + "px";
|
|
|
}
|
|
|
// 添加鼠标抬起事件，鼠标抬起，将事件移除
|
|
|
img.addEventListener("mouseup", function () {
|
|
|
personBox.removeEventListener("mousemove", move);
|
|
|
});
|
|
|
// 鼠标离开父级元素，把事件移除
|
|
|
personBox.addEventListener("mouseout", function () {
|
|
|
personBox.removeEventListener("mousemove", move);
|
|
|
});
|
|
|
},
|
|
|
// 缩放图片
|
|
|
rollImg(e) {
|
|
|
let direction = e.deltaY > 0 ? "down" : "up";
|
|
|
if (direction === "up") {
|
|
|
// 滑轮向上滚动
|
|
|
this.large();
|
|
|
} else {
|
|
|
// 滑轮向下滚动
|
|
|
this.Small();
|
|
|
}
|
|
|
},
|
|
|
//大
|
|
|
large() {
|
|
|
this.$nextTick(() => {
|
|
|
if (this.zoomD < 6) {
|
|
|
this.zoomD += 0.1;
|
|
|
}
|
|
|
document.querySelector(
|
|
|
".picboxI"
|
|
|
).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
|
|
|
});
|
|
|
},
|
|
|
// 小
|
|
|
Small() {
|
|
|
this.$nextTick(() => {
|
|
|
if (this.zoomD > 0.3) {
|
|
|
this.zoomD -= 0.1;
|
|
|
}
|
|
|
document.querySelector(
|
|
|
".picboxI"
|
|
|
).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
|
|
|
});
|
|
|
},
|
|
|
imgOnload() {
|
|
|
console.log("加载完成");
|
|
|
this.canvasloading = false;
|
|
|
},
|
|
|
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;
|
|
|
}
|
|
|
.skeletonBox {
|
|
|
width: 100%;
|
|
|
height: 80%;
|
|
|
margin-bottom: 4px;
|
|
|
.el-skeleton,
|
|
|
.elpicBox {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.el-skeleton__image svg {
|
|
|
width: 50%;
|
|
|
height: 50%;
|
|
|
}
|
|
|
}
|
|
|
.topPic {
|
|
|
width: 100%;
|
|
|
height: 80%;
|
|
|
margin-bottom: 4px;
|
|
|
position: relative;
|
|
|
.bigPic {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
cursor: pointer;
|
|
|
|
|
|
.el-image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
|
|
|
.image-slot {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 100%;
|
|
|
background-size: 100% 100%;
|
|
|
i {
|
|
|
font-size: 20px;
|
|
|
color: #169e8c;
|
|
|
}
|
|
|
}
|
|
|
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: auto;
|
|
|
overflow-y: hidden;
|
|
|
scroll-behavior: smooth;
|
|
|
scrollbar-width: none;
|
|
|
//background-color: #4cdbc8;
|
|
|
.noppiclist {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
// align-items: center;
|
|
|
justify-content: center;
|
|
|
li {
|
|
|
list-style: none;
|
|
|
width: 19.2%;
|
|
|
height: 100%;
|
|
|
border: 3px solid transparent;
|
|
|
box-sizing: border-box;
|
|
|
flex-shrink: 0;
|
|
|
white-space: nowrap;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
background: url(../../assets/img/nopicbg.png) no-repeat;
|
|
|
background-size: 20% 20%;
|
|
|
background-color: #eee;
|
|
|
}
|
|
|
}
|
|
|
.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%;
|
|
|
background: url(../../assets/img/nopicbg.png) no-repeat center;
|
|
|
background-size: 30% 24%;
|
|
|
background-color: #eee;
|
|
|
}
|
|
|
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: 85%;
|
|
|
height: 85%;
|
|
|
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>
|