You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1104 lines
31 KiB
Vue
1104 lines
31 KiB
Vue
<template>
|
|
<div class="thumb-example">
|
|
<div class="picTop">
|
|
<!-- 判断是否是图片并且不为空 -->
|
|
|
|
<div
|
|
class="bigimg"
|
|
v-if="
|
|
bigPicPath.indexOf('nopic') == -1 &&
|
|
bigPicPath.indexOf('videos') == -1
|
|
"
|
|
:style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
|
|
>
|
|
<el-button
|
|
class="downBtn"
|
|
@click.stop="
|
|
downLoadPic(
|
|
bigPicPath.substring(0, bigPicPath.length - 9),
|
|
bigPicPath.substring(0, bigPicPath.length - 9)
|
|
)
|
|
"
|
|
>下载图片</el-button
|
|
>
|
|
<!-- @click="handleBigPicbox(bigPicPath)" v-viewer="OptionssalseImg"-->
|
|
<div
|
|
class="nosee"
|
|
:style="'backgroundImage:url(' + bigPicPath + ')'"
|
|
></div>
|
|
<div class="bigimgView" @click="handleBigPicbox(bigArr, bigPicPath)">
|
|
<img
|
|
id="bigimgage"
|
|
ref="picJpg"
|
|
class="animImg"
|
|
:src="bigPicPath"
|
|
@load="imgOnload"
|
|
/>
|
|
</div>
|
|
<canvas
|
|
id="bigCanvas1"
|
|
class="myCanvas2"
|
|
ref="myCanvasbig"
|
|
:width="canvasWidth"
|
|
:height="canvasHeight"
|
|
></canvas>
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
|
|
|
|
<!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
|
|
</div>
|
|
<div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
|
|
<video
|
|
width="100%"
|
|
height="100%"
|
|
:src="bigPicPath.substring(0, bigPicPath.length - 9)"
|
|
controls="controls"
|
|
:poster="videopath"
|
|
autoplay
|
|
></video>
|
|
</div>
|
|
<div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
|
|
<img
|
|
class="animImg"
|
|
:src="bigPicPath.substring(0, bigPicPath.length - 9)"
|
|
/>
|
|
</div>
|
|
|
|
<div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
|
|
<i class="el-icon-arrow-left"></i>
|
|
</div>
|
|
<div
|
|
class="arrow rightArrow"
|
|
v-if="this.bigNum < this.terminalPhoto.length - 1"
|
|
@click="rightClick"
|
|
>
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
<div class="picBottom">
|
|
<ul class="smallPicBox">
|
|
<li
|
|
v-for="(item, index) in fiveList"
|
|
@click="handleBigpic(item, index)"
|
|
:class="activeSmall === index ? 'borderActive' : ''"
|
|
>
|
|
<div
|
|
class="smallhavePic"
|
|
v-if="
|
|
item.path.indexOf('nopic') == -1 &&
|
|
item.path.indexOf('videos') == -1
|
|
"
|
|
>
|
|
<img :src="item.path + '!260x160'" />
|
|
<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="smallnoPic"
|
|
v-else-if="item.path.indexOf('videos') !== -1"
|
|
>
|
|
<img
|
|
src="../../assets/img/loading.jpg"
|
|
style="object-fit: cover"
|
|
v-if="item.thumb == null"
|
|
/>
|
|
<img :src="item.thumb" v-else />
|
|
<p class="videoicon"><i class="el-icon-video-play"></i></p>
|
|
<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
|
|
>
|
|
</p>
|
|
</div>
|
|
<div class="smallnoPic" v-else>
|
|
<img :src="item.path" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
class="arrow leftArrow"
|
|
v-if="this.page != 1"
|
|
@click="smallLeftClick"
|
|
>
|
|
<i class="el-icon-arrow-left"></i>
|
|
</div>
|
|
<div
|
|
class="arrow rightArrow"
|
|
v-if="this.page < this.total"
|
|
@click="smallRightClick"
|
|
>
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 点击出现大图 -->
|
|
<div
|
|
v-if="showBigpic"
|
|
class="showPic"
|
|
v-loading="canvasloading"
|
|
@click="closePic($event)"
|
|
>
|
|
<div
|
|
class="picboxI"
|
|
@mousewheel.prevent="rollImg"
|
|
:style="{
|
|
transform: 'scale(' + zoomD + ')',
|
|
}"
|
|
@mousedown="move"
|
|
>
|
|
<img
|
|
@load="imgOnload"
|
|
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 { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
|
|
export default {
|
|
components: {},
|
|
props: {
|
|
terminalPhoto: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
OptionssalseImg: {
|
|
inline: false,
|
|
button: true,
|
|
navbar: false,
|
|
title: false,
|
|
toolbar: false,
|
|
tooltip: false,
|
|
zoomable: true,
|
|
url: "src",
|
|
},
|
|
isshowArrow: true, //判断是否显示切换按钮
|
|
mediaType: "", //判断图片类型是视频还是图片
|
|
bigPicPath: "", //大图地址
|
|
videopath: "",
|
|
smallPicPath: "", //小图地址
|
|
bigNum: 0, //判断大图是第几张
|
|
fiveList: [], //小图图片list
|
|
activeSmall: 0, //索引选中小图,
|
|
page: 1, //当前第几页
|
|
pagesize: 10, //每页显示五条
|
|
total: 0, //总共又几页
|
|
|
|
localPoints: [], //画图对象
|
|
canvas: null,
|
|
ctx: null,
|
|
imgpic: null,
|
|
color: "",
|
|
num: "",
|
|
showBigpic: false,
|
|
flagline: true,
|
|
markEnable: "",
|
|
zoomD: 1,
|
|
canvasloading: false,
|
|
bigImgPath: "",
|
|
|
|
//告警原因
|
|
alarmMark: true,
|
|
textInfo: "",
|
|
alarmList: [],
|
|
bigArr: "",
|
|
canvasWidth: "",
|
|
canvasHeight: "",
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log(this.terminalPhoto);
|
|
console.log("woshi asdadadadadasdasdasddsads more");
|
|
this.mediaType = this.terminalPhoto[0].mediaType;
|
|
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
|
|
this.bigArr = this.terminalPhoto[0];
|
|
// this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
|
|
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
|
|
this.total = this.terminalPhoto.length / this.pagesize;
|
|
console.log(this.fiveList);
|
|
//this.alarmList = this.fiveList[0].alarmlist;
|
|
this.alarmList = this.fiveList[0].alarmlist;
|
|
console.log(this.alarmList[0]);
|
|
if (this.alarmList !== undefined && this.alarmList.length !== 0) {
|
|
this.$nextTick(() => {
|
|
this.handleBigpic(this.bigArr, 0);
|
|
setTimeout(() => {
|
|
this.$nextTick(() => {
|
|
this.drawlineBig(this.alarmList[0]);
|
|
});
|
|
}, 100);
|
|
console.log("执行绘制");
|
|
});
|
|
}
|
|
|
|
//获取points
|
|
getCoordinate({
|
|
channelId:
|
|
this.fiveList[0].channelId == null ? 1 : this.fiveList[0].channelId,
|
|
needPic: "0",
|
|
termId: this.fiveList[0].termId,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.localPoints = res.data.list;
|
|
this.color = res.data.color;
|
|
this.num = res.data.boderWidth;
|
|
this.markEnable = res.data.markEnable;
|
|
if (this.markEnable === 1) {
|
|
this.drawline();
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
watch: {
|
|
terminalPhoto: function (newVal, oldVal) {
|
|
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
|
|
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
|
|
this.total = this.terminalPhoto.length / this.pagesize;
|
|
//this.drawlineBig(this.terminalPhoto[0].alarmList[0])
|
|
},
|
|
},
|
|
created() {},
|
|
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;
|
|
link.download = name;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
// 释放 Blob URL
|
|
window.URL.revokeObjectURL(url);
|
|
},
|
|
// showbigpicPath(data) {
|
|
// console.log(data);
|
|
// if (data.includes("!")) {
|
|
// this.bigPicPath = data.substring(0, data.length - 9);
|
|
// } else {
|
|
// this.bigPicPath = data;
|
|
// this.bgbigPath = data;
|
|
// }
|
|
|
|
// console.log(this.bigPicPath);
|
|
// },
|
|
// handleBigPicbox() {
|
|
// this.showBigpic = true;
|
|
// },
|
|
//移动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;
|
|
},
|
|
//放大图
|
|
handleBigPicbox(bigArr, val) {
|
|
console.log(val);
|
|
console.log(bigArr);
|
|
//this.canvasloading = true;
|
|
this.showBigpic = true;
|
|
this.bigImgPath = val.substring(0, val.length - 9);
|
|
this.alarmList = bigArr.alarmlist;
|
|
setTimeout(() => {
|
|
this.$nextTick(() => {
|
|
this.drawlineBig2(this.alarmList[0]);
|
|
});
|
|
}, 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;
|
|
},
|
|
openline() {
|
|
this.flagline = true;
|
|
console.log("11111111111111111111111111", this.flagline);
|
|
updateMarkEnableStatus({
|
|
status: 1,
|
|
}).then((res) => {
|
|
console.log(res);
|
|
});
|
|
this.drawline();
|
|
},
|
|
drawline() {
|
|
this.canvas = this.$refs.myCanvas;
|
|
this.imgpic = this.$refs.picJpg;
|
|
console.log(this.canvas);
|
|
console.log(this.imgpic);
|
|
this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
|
|
this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
|
|
this.ctx = this.canvas.getContext("2d");
|
|
console.log(this.localPoints);
|
|
if (this.flagline == true) {
|
|
this.localPoints = this.localPoints;
|
|
} else {
|
|
this.localPoints = [];
|
|
}
|
|
console.log(this.ctx);
|
|
this.ctx.beginPath();
|
|
//设置线条颜色，必须放在绘制之前
|
|
this.ctx.strokeStyle = this.color;
|
|
// 线宽设置，必须放在绘制之前
|
|
this.ctx.lineWidth = this.num;
|
|
for (var i = 0; i < this.localPoints.length; i++) {
|
|
this.ctx.moveTo(
|
|
this.localPoints[i].x1 * this.imgpic.width,
|
|
this.localPoints[i].y1 * this.imgpic.height
|
|
);
|
|
this.ctx.lineTo(
|
|
this.localPoints[i].x2 * this.imgpic.width,
|
|
this.localPoints[i].y2 * this.imgpic.height
|
|
);
|
|
}
|
|
|
|
this.ctx.closePath();
|
|
this.ctx.stroke();
|
|
},
|
|
//不显示绘制线
|
|
handelClear() {
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.flagline = false;
|
|
updateMarkEnableStatus({
|
|
status: 0,
|
|
}).then((res) => {
|
|
console.log(res);
|
|
});
|
|
},
|
|
getphotoList() {
|
|
this.fiveList = this.terminalPhoto.slice(
|
|
(this.page - 1) * this.pagesize,
|
|
this.page * this.pagesize
|
|
);
|
|
this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
|
|
this.bigArr = this.fiveList[this.activeSmall];
|
|
this.videopath = this.fiveList[this.activeSmall].thumb;
|
|
if (this.fiveList[this.activeSmall].isAlarm == 1) {
|
|
console.log("告警");
|
|
this.alarmList = this.fiveList[this.activeSmall].alarmlist;
|
|
this.$nextTick(() => {
|
|
this.drawlineBig(this.alarmList[0]);
|
|
});
|
|
} else {
|
|
// this.canvas = document.getElementById("bigCanvas");
|
|
// this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
},
|
|
//绘制大图告警区域
|
|
drawlineBig(data) {
|
|
console.log(data);
|
|
console.log(document.getElementById("bigCanvas1"));
|
|
console.log(document.getElementById("bigimgage"));
|
|
this.canvas = document.getElementById("bigCanvas1");
|
|
this.imgpic = document.getElementById("bigimgage");
|
|
console.log(this.canvas);
|
|
console.log(this.imgpic);
|
|
this.textInfo = data.enname;
|
|
this.canvas.width = this.imgpic.width; //设置画布大小
|
|
this.canvas.height = this.imgpic.height; //设置画布大小
|
|
this.canvasWidth = this.imgpic.width;
|
|
this.canvasHeight = this.imgpic.height;
|
|
console.log(this.canvas.width, this.canvas.height);
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
this.ctx.beginPath();
|
|
//设置线条颜色，必须放在绘制之前
|
|
this.ctx.strokeStyle = "#ff0000";
|
|
// 线宽设置，必须放在绘制之前
|
|
this.ctx.lineWidth = 1;
|
|
// 绘制矩形
|
|
var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
|
|
scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
|
|
console.log(scaleX, scaleY);
|
|
var top = data.x * scaleX,
|
|
left = data.y * scaleY,
|
|
width = data.width * scaleX,
|
|
height = data.height * scaleY;
|
|
console.log(top, left, width, height);
|
|
// this.ctx.strokeStyle = "red"; //线的颜色
|
|
//this.ctx.strokeRect(20, 100, 200, 400);
|
|
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.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("asdasdadasdadasd绘制了canvans");
|
|
},
|
|
//绘制大图告警区域
|
|
drawlineBig2(data) {
|
|
console.log(data);
|
|
console.log(document.getElementById("bigCanvas2"));
|
|
console.log(document.getElementById("bigimg"));
|
|
this.canvas = document.getElementById("bigCanvas2");
|
|
this.imgpic = 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 = 1;
|
|
|
|
// 绘制矩形
|
|
var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
|
|
scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
|
|
console.log(scaleX, scaleY);
|
|
var top = data.x * scaleX,
|
|
left = data.y * scaleY,
|
|
width = data.width * scaleX,
|
|
height = data.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.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();
|
|
},
|
|
//大图点击左侧切换图片
|
|
leftClick() {
|
|
this.bigNum--; //执行下一张
|
|
this.activeSmall--;
|
|
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
|
|
console.log(this.page);
|
|
if (this.activeSmall < 0) {
|
|
this.activeSmall = 4;
|
|
this.smallLeftClick();
|
|
}
|
|
this.mediaType = this.fiveList[this.bigNum].mediaType;
|
|
this.bigPicPath = this.fiveList[this.bigNum].path + "!1366x768";
|
|
this.bigArr = this.fiveList[this.activeSmall];
|
|
if (this.fiveList[this.bigNum].isAlarm == 1) {
|
|
console.log("告警");
|
|
this.alarmList = this.fiveList[this.bigNum].alarmlist;
|
|
this.$nextTick(() => {
|
|
this.drawlineBig(this.alarmList[0]);
|
|
});
|
|
} else {
|
|
this.canvas = document.getElementById("bigCanvas1");
|
|
this.ctx = this.canvas.getContext("2d");
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
console.log(this.fiveList[this.bigNum]);
|
|
getCoordinate({
|
|
channelId: this.fiveList[this.bigNum].channelId,
|
|
needPic: "1",
|
|
termId: this.fiveList[this.bigNum].termId,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.localPoints = res.data.list;
|
|
if (this.markEnable === 1) {
|
|
this.drawline();
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//点击右侧切换图片
|
|
rightClick() {
|
|
console.log("点击切换分页", this.fiveList);
|
|
this.bigNum++; //执行下一张
|
|
this.activeSmall++;
|
|
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
|
|
if (this.activeSmall > 4) {
|
|
this.activeSmall = 0;
|
|
console.log(this.activeSmall);
|
|
this.smallRightClick();
|
|
}
|
|
this.mediaType = this.fiveList[this.bigNum].mediaType;
|
|
this.bigPicPath = this.fiveList[this.bigNum].path + "!1366x768";
|
|
this.bigArr = this.fiveList[this.activeSmall];
|
|
if (this.fiveList[this.bigNum].isAlarm == 1) {
|
|
console.log("告警");
|
|
this.alarmList = this.fiveList[this.bigNum].alarmlist;
|
|
this.$nextTick(() => {
|
|
this.drawlineBig(this.alarmList[0]);
|
|
});
|
|
} else {
|
|
this.canvas = document.getElementById("bigCanvas1");
|
|
this.ctx = this.canvas.getContext("2d");
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
getCoordinate({
|
|
channelId: this.fiveList[this.bigNum].channelId,
|
|
needPic: "1",
|
|
termId: this.fiveList[this.bigNum].termId,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.localPoints = res.data.list;
|
|
if (this.markEnable === 1) {
|
|
this.drawline();
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//点击小图变成大图
|
|
handleBigpic(row, index) {
|
|
console.log(row);
|
|
console.log();
|
|
this.activeSmall = index;
|
|
this.bigNum = index;
|
|
this.mediaType = row.mediaType;
|
|
this.bigPicPath = row.path + "!1366x768";
|
|
this.bigArr = row;
|
|
if (row.isAlarm == 1) {
|
|
this.alarmList = row.alarmlist;
|
|
this.$nextTick(() => {
|
|
this.drawlineBig(this.alarmList[0]);
|
|
});
|
|
} else {
|
|
this.canvas = document.getElementById("bigCanvas1");
|
|
console.log(this.canvas);
|
|
this.ctx = this.canvas.getContext("2d");
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
|
|
// this.bgbigPath = row.path + "!1366x768";
|
|
getCoordinate({
|
|
channelId: row.channelId,
|
|
needPic: "1",
|
|
termId: row.termId,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.localPoints = res.data.list;
|
|
if (this.markEnable === 1) {
|
|
this.drawline();
|
|
}
|
|
// this.drawline();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//点击小图切换左侧
|
|
smallLeftClick() {
|
|
this.activeSmall = 0;
|
|
this.bigNum = 0;
|
|
console.log("点击了左侧");
|
|
this.page--;
|
|
if (this.page < 1) {
|
|
this.isshowArrow = false;
|
|
} else {
|
|
this.getphotoList();
|
|
}
|
|
console.log(this.page);
|
|
console.log(this.fiveList);
|
|
//获取points
|
|
getCoordinate({
|
|
channelId: this.fiveList[0].channelId,
|
|
needPic: "0",
|
|
termId: this.fiveList[0].termId,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.localPoints = res.data.list;
|
|
if (this.markEnable === 1) {
|
|
this.drawline();
|
|
}
|
|
// this.drawline();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//点击小图切换右侧
|
|
smallRightClick() {
|
|
this.activeSmall = 0;
|
|
this.bigNum = 0;
|
|
console.log("点击了右侧");
|
|
console.log(this.page);
|
|
this.page++;
|
|
this.getphotoList();
|
|
console.log(this.fiveList);
|
|
//获取points
|
|
getCoordinate({
|
|
channelId: this.fiveList[0].channelId,
|
|
needPic: "0",
|
|
termId: this.fiveList[0].termId,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.localPoints = res.data.list;
|
|
if (this.markEnable === 1) {
|
|
this.drawline();
|
|
}
|
|
// this.drawline();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.thumb-example {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100% - 32px);
|
|
box-sizing: border-box;
|
|
|
|
.picTop {
|
|
width: 100%;
|
|
height: 80%;
|
|
overflow: hidden;
|
|
margin-bottom: 4px;
|
|
position: relative;
|
|
.downBtn {
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: none;
|
|
right: 8px;
|
|
bottom: 16px;
|
|
color: #fff;
|
|
z-index: 5;
|
|
opacity: 0;
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
color: #169e8c;
|
|
}
|
|
}
|
|
&:hover {
|
|
.arrow {
|
|
opacity: 1;
|
|
transition: all 0.5s ease-in;
|
|
}
|
|
.downBtn {
|
|
opacity: 1;
|
|
transition: all 0.5s ease-in;
|
|
}
|
|
}
|
|
.bigimg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
background-size: 100% 100%;
|
|
.nosee {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background-size: 100% 100%;
|
|
z-index: 2;
|
|
}
|
|
.bigimgView {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 3;
|
|
opacity: 0;
|
|
.animImg {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.mark {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
color: #fff;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
left: 16px;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
//opacity: 0;
|
|
transition: bottom 2s ease 0s;
|
|
}
|
|
.myCanvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
.myCanvas2 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
cursor: pointer;
|
|
}
|
|
.arrow {
|
|
opacity: 0;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
border-radius: 30px;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 4;
|
|
&:hover {
|
|
color: @color-primary;
|
|
}
|
|
}
|
|
.leftArrow {
|
|
left: 16px;
|
|
}
|
|
.rightArrow {
|
|
right: 16px;
|
|
}
|
|
}
|
|
.picBottom {
|
|
width: 100%;
|
|
height: 20%;
|
|
position: relative;
|
|
.smallPicBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
li {
|
|
width: 20%;
|
|
border: 3px solid transparent;
|
|
// overflow: hidden;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
cursor: pointer;
|
|
}
|
|
.smallhavePic {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.smallnoPic {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.timeInfo {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
background: #f0f0f0;
|
|
padding: 6px 0px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
.alarmSpan {
|
|
color: #f00;
|
|
font-weight: bold;
|
|
}
|
|
.videoicon {
|
|
position: absolute;
|
|
top: 73%;
|
|
left: 10%;
|
|
transform: translate(-50%, -50%);
|
|
i {
|
|
font-size: 28px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.borderActive {
|
|
.timeInfo {
|
|
//background: @color-primary;
|
|
background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
|
|
color: #fff;
|
|
}
|
|
}
|
|
// .borderActive {
|
|
// border: 3px solid @color-primary;
|
|
// &::after {
|
|
// content: "";
|
|
// position: absolute;
|
|
// width: 0;
|
|
// height: 0;
|
|
// left: 50%;
|
|
// top: -16px;
|
|
// margin-left: -8px;
|
|
// border-bottom: 13px solid @color-primary;
|
|
// border-left: 8px solid transparent;
|
|
// border-right: 8px solid transparent;
|
|
// }
|
|
// }
|
|
}
|
|
.arrow {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
border-radius: 30px;
|
|
position: absolute;
|
|
top: 45%;
|
|
transform: translateY(-50%);
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.leftArrow {
|
|
left: 16px;
|
|
}
|
|
.rightArrow {
|
|
right: 16px;
|
|
}
|
|
}
|
|
//放大图
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@keyframes scaleDraw {
|
|
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
|
|
0% {
|
|
transform: scale(0);
|
|
/*开始为原始大小*/
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
// https://v1.github.surmon.me/vue-awesome-swiper/
|
|
</style>
|