|
|
<template>
|
|
|
<div class="thumb-example">
|
|
|
<div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</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"
|
|
|
>
|
|
|
<el-image
|
|
|
:src="currentPicPath + ''"
|
|
|
:preview-src-list="srcList"
|
|
|
@load="loadImage"
|
|
|
ref="picJpg"
|
|
|
>
|
|
|
<template slot="error">
|
|
|
<img src="../../../assets/img/nodatapic2.jpg" />
|
|
|
</template>
|
|
|
</el-image>
|
|
|
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></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="currentPage > 0">
|
|
|
<i class="el-icon-arrow-left"></i>
|
|
|
</div>
|
|
|
<el-button
|
|
|
class="downBtn"
|
|
|
@click.stop="downLoadPic(currentPicPath, currentPicPath)"
|
|
|
>下载图片</el-button
|
|
|
>
|
|
|
<div
|
|
|
class="arrow rightArrow"
|
|
|
@click="rightClick"
|
|
|
v-if="currentPage < terminalPhoto.length - 1"
|
|
|
>
|
|
|
<i class="el-icon-arrow-right"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottomPic" v-on:wheel="handleScroll">
|
|
|
<el-carousel
|
|
|
:loop="false"
|
|
|
:autoplay="false"
|
|
|
ref="carousel"
|
|
|
indicator-position="none"
|
|
|
@change="changeItem"
|
|
|
>
|
|
|
<el-carousel-item
|
|
|
class="el-car-item"
|
|
|
v-for="(list, index) in terminalPhoto"
|
|
|
:key="index"
|
|
|
>
|
|
|
<div
|
|
|
class="smallPic"
|
|
|
v-for="(item, index2) in list"
|
|
|
:key="index2"
|
|
|
@click="changeBigPic(item, index2)"
|
|
|
:class="activeSmall === index2 ? 'borderActive' : ''"
|
|
|
>
|
|
|
<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'" />
|
|
|
|
|
|
<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="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>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</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: () => [],
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
picLoading: true,
|
|
|
currentPicPath: "", //大图
|
|
|
mediaType: "", //判断图片类型是视频还是图片
|
|
|
activeSmall: 0, //索引选中小图,
|
|
|
currentPage: 0,
|
|
|
srcList: [],
|
|
|
radioPx: "",
|
|
|
roleUser: "",
|
|
|
localPoints: [], //线缆坐标
|
|
|
flagLine: true, //线缆标识
|
|
|
canvas: null,
|
|
|
ctx: null,
|
|
|
imgpic: null,
|
|
|
color: "", //线颜色
|
|
|
borderwidth: "", //线宽
|
|
|
markEnable: "", //是否显示
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
console.log(this.terminalPhoto);
|
|
|
this.changeBigPic(this.terminalPhoto[0][0], 0);
|
|
|
},
|
|
|
watch: {
|
|
|
terminalPhoto: {
|
|
|
handler(newVal, oldVal) {
|
|
|
this.terminalPhoto = newVal;
|
|
|
},
|
|
|
immediate: true,
|
|
|
deep: true, //deep，默认值是 false，代表是否深度监听。
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
this.roleUser = localStorage.getItem("role");
|
|
|
console.log(this.roleUser);
|
|
|
},
|
|
|
methods: {
|
|
|
//下载图片
|
|
|
downLoadPic(url, name) {
|
|
|
const image = new Image();
|
|
|
image.setAttribute("crossOrigin", "anonymous");
|
|
|
image.src = url;
|
|
|
image.onload = () => {
|
|
|
const canvas = document.createElement("canvas");
|
|
|
canvas.width = image.width;
|
|
|
canvas.height = image.height;
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
ctx.drawImage(image, 0, 0, image.width, image.height);
|
|
|
canvas.toBlob((blob) => {
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
this.download(url, name);
|
|
|
// 用完释放URL对象
|
|
|
URL.revokeObjectURL(url);
|
|
|
});
|
|
|
};
|
|
|
},
|
|
|
download(href, name) {
|
|
|
const eleLink = document.createElement("a");
|
|
|
eleLink.download = name;
|
|
|
eleLink.href = href;
|
|
|
eleLink.click();
|
|
|
eleLink.remove();
|
|
|
},
|
|
|
//获取线缆绘制显示
|
|
|
getPointList(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;
|
|
|
console.log("我是绘制线缆");
|
|
|
//开启传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;
|
|
|
console.log("关闭线缆");
|
|
|
//关闭传0
|
|
|
updateMarkEnableStatus({
|
|
|
status: 0,
|
|
|
}).then((res) => {
|
|
|
console.log(res);
|
|
|
});
|
|
|
},
|
|
|
//绘制线缆方法
|
|
|
drawline() {
|
|
|
this.canvas = this.$refs.myCanvas;
|
|
|
this.imgpic = this.$refs.picJpg;
|
|
|
console.log(this.canvas);
|
|
|
console.log(this.imgpic);
|
|
|
this.canvas.width = this.imgpic.imageWidth; //设置画布大小
|
|
|
this.canvas.height = this.imgpic.imageHeight; //设置画布大小
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
console.log(this.localPoints);
|
|
|
if (this.flagLine == true) {
|
|
|
this.localPoints = this.localPoints;
|
|
|
console.log(this.localPoints);
|
|
|
} else {
|
|
|
this.localPoints = [];
|
|
|
}
|
|
|
console.log(this.ctx);
|
|
|
this.ctx.beginPath();
|
|
|
//设置线条颜色，必须放在绘制之前
|
|
|
this.ctx.strokeStyle = this.color;
|
|
|
// 线宽设置，必须放在绘制之前
|
|
|
this.ctx.lineWidth = this.borderwidth;
|
|
|
console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
|
|
|
console.log(this.localPoints);
|
|
|
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.activeSmall, this.currentPage);
|
|
|
this.activeSmall--;
|
|
|
if (this.activeSmall < 0) {
|
|
|
this.currentPage--;
|
|
|
this.$refs.carousel.setActiveItem(this.currentPage);
|
|
|
this.activeSmall =
|
|
|
this.terminalPhoto[this.terminalPhoto.length - 1].length - 1;
|
|
|
}
|
|
|
this.changeBigPic(
|
|
|
this.terminalPhoto[this.currentPage][this.activeSmall],
|
|
|
this.activeSmall
|
|
|
);
|
|
|
},
|
|
|
rightClick() {
|
|
|
console.log(this.activeSmall);
|
|
|
console.log(this.terminalPhoto.length);
|
|
|
this.activeSmall++;
|
|
|
if (this.activeSmall > this.photoNum - 1) {
|
|
|
this.currentPage++;
|
|
|
this.$refs.carousel.setActiveItem(this.currentPage);
|
|
|
this.activeSmall = 0;
|
|
|
}
|
|
|
this.changeBigPic(
|
|
|
this.terminalPhoto[this.currentPage][this.activeSmall],
|
|
|
this.activeSmall
|
|
|
);
|
|
|
},
|
|
|
//获取第一张大图
|
|
|
changeBigPic(data, i) {
|
|
|
console.log(data, i);
|
|
|
console.log("鼠标222222222", this.currentPage, this.activeSmall);
|
|
|
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 = "";
|
|
|
}
|
|
|
// this.getPointList(data);
|
|
|
},
|
|
|
loadImage() {
|
|
|
this.picLoading = false;
|
|
|
},
|
|
|
changeItem(e) {
|
|
|
// console.log(this.currentPage);
|
|
|
// this.currentPage = e;
|
|
|
// if (e === 0) {
|
|
|
// this.activeSmall = 0;
|
|
|
// //this.changeBigPic(this.terminalPhoto[0][0], 0);
|
|
|
// } else {
|
|
|
// this.activeSmall = 0;
|
|
|
// // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0);
|
|
|
// }
|
|
|
//this.active = e; // 将走马灯的 下标 指定为 tab 的下标
|
|
|
},
|
|
|
//鼠标滚动
|
|
|
handleScroll(e) {
|
|
|
let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
|
|
|
console.log(e.deltaY, direction);
|
|
|
if (direction == "down") {
|
|
|
if (
|
|
|
this.currentPage == this.terminalPhoto.length - 1 &&
|
|
|
this.activeSmall ==
|
|
|
this.terminalPhoto[this.terminalPhoto.length - 1].length - 1
|
|
|
) {
|
|
|
this.$message({
|
|
|
message: "已经是最后一张图",
|
|
|
type: "success",
|
|
|
showClose: true,
|
|
|
duration: 500,
|
|
|
});
|
|
|
return;
|
|
|
} else {
|
|
|
// this.rightClick();
|
|
|
this.activeSmall++;
|
|
|
if (this.activeSmall > this.photoNum - 1) {
|
|
|
this.currentPage++;
|
|
|
this.$refs.carousel.setActiveItem(this.currentPage);
|
|
|
this.activeSmall = 0;
|
|
|
}
|
|
|
console.log(this.activeSmall);
|
|
|
}
|
|
|
}
|
|
|
if (direction == "up") {
|
|
|
if (this.currentPage == 0 && this.activeSmall == 0) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
duration: 500,
|
|
|
message: "已经是最新一张图",
|
|
|
type: "success",
|
|
|
});
|
|
|
return;
|
|
|
} else {
|
|
|
// this.leftClick();
|
|
|
console.log(this.activeSmall);
|
|
|
this.activeSmall--;
|
|
|
console.log(this.activeSmall);
|
|
|
if (this.activeSmall < 0) {
|
|
|
this.currentPage--;
|
|
|
console.log("我是页数", this.currentPage);
|
|
|
this.$refs.carousel.setActiveItem(this.currentPage);
|
|
|
this.activeSmall = this.terminalPhoto[this.currentPage].length - 1;
|
|
|
console.log(this.terminalPhoto);
|
|
|
console.log(this.terminalPhoto[this.currentPage].length);
|
|
|
console.log("我是选中的值", this.activeSmall);
|
|
|
}
|
|
|
console.log(this.activeSmall);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</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%;
|
|
|
.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;
|
|
|
}
|
|
|
&: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;
|
|
|
.el-carousel {
|
|
|
height: 100%;
|
|
|
.el-carousel__container {
|
|
|
height: 100% !important;
|
|
|
}
|
|
|
.el-carousel__arrow {
|
|
|
color: #4cdbc8;
|
|
|
font-weight: bold;
|
|
|
background-color: rgba(31, 45, 61, 0.8);
|
|
|
&:hover {
|
|
|
background-color: rgba(31, 45, 61, 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-car-item {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
.smallPic {
|
|
|
width: 20%;
|
|
|
border: 3px solid transparent;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
.picBox {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
// .el-image {
|
|
|
// 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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.borderActive {
|
|
|
.timeInfo {
|
|
|
color: #fff;
|
|
|
background: linear-gradient(180deg, #4cdbc8 10%, #128071);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|