ly.fan
/
xy-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化图片轮播以及左侧树状结构

Browse Source
ds1.0
fanluyan 2 years ago
parent bca647a736
commit 1f9476a5c3
8 changed files with 762 additions and 1055 deletions
Show Stats Download Patch File Download Diff File

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

917
src/views/realTimeMonitor/components/carouselChart copy.vue
Unescape Escape View File

@ -1,917 +0,0 @@
<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(bigPicPath)">
<img
ref="picJpg"
class="animImg"
:src="bigPicPath"
@error="setDefaultImage"
/>
</div>
<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'" @error="setDefaultImage" />
<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-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="bigimg"
ref="bigimgref"
class="maskPic img"
:src="bigImgPath"
/>
<!-- <canvas id="bigCanvas" class="myCanvas" 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";
import defaultImage from "../../../assets/img/nodatapic2.jpg";
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: 5, //每页显示五条
total: 0, //总共又几页
localPoints: [], //画图对象
canvas: null,
ctx: null,
imgpic: null,
color: "",
num: "",
showBigpic: false,
flagline: true,
markEnable: "",
zoomD: 1,
canvasloading: false,
bigImgPath: "",
};
},
mounted() {
console.log(this.terminalPhoto);
this.mediaType = this.terminalPhoto[0].mediaType;
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
// 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);
//获取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;
},
},
created() {},
methods: {
setDefaultImage(e) {
e.target.src = defaultImage;
this.bigPicPath = defaultImage;
},
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();
},
// 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(val) {
console.log(val);
//this.canvasloading = true;
this.showBigpic = true;
this.bigImgPath = val.substring(0, val.length - 9);
},
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.videopath = this.fiveList[this.activeSmall].thumb;
},
//大图点击左侧切换图片
leftClick() {
this.bigNum--; //执行下一张
this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
this.activeSmall--;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
console.log(this.page);
if (this.activeSmall < 0) {
this.activeSmall = 4;
this.smallLeftClick();
}
console.log(this.terminalPhoto[this.bigNum]);
getCoordinate({
channelId: this.terminalPhoto[this.bigNum].channelId,
needPic: "1",
termId: this.terminalPhoto[this.bigNum].termId,
})
.then((res) => {
console.log(res);
this.localPoints = res.data.list;
if (this.markEnable === 1) {
this.drawline();
}
})
.catch((err) => {});
},
//点击右侧切换图片
rightClick() {
this.bigNum++; //执行下一张
this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
this.activeSmall++;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
if (this.activeSmall > 4) {
this.activeSmall = 0;
console.log(this.activeSmall);
this.smallRightClick();
}
getCoordinate({
channelId: this.terminalPhoto[this.bigNum].channelId,
needPic: "1",
termId: this.terminalPhoto[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.mediaType = row.mediaType;
this.bigPicPath = row.path + "!1366x768";
// 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;
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;
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;
&:hover {
background: rgba(0, 0, 0, 0.9);
color: #169e8c;
}
}
&:hover {
.arrow {
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;
}
}
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: #169e8c;
}
}
.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;
}
.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%, #169e8c 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;
}
.myCanvas {
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>

190
src/views/realTimeMonitor/components/carouselChart.vue
Unescape Escape View File

@ -35,7 +35,7 @@
autoplay
></video>
</div>
<div class="arrow leftArrow" @click="leftClick" v-if="currentPage > 0">
<div class="arrow leftArrow" @click="leftClick" v-if="activeSmall > 0">
<i class="el-icon-arrow-left"></i>
</div>
<el-button
@ -46,27 +46,23 @@
<div
class="arrow rightArrow"
@click="rightClick"
v-if="currentPage < terminalPhoto.length - 1"
v-if="activeSmall !== 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
<!-- -->
<div class="bottomPic">
<div class="scrollPicContain">
<div
class="el-car-item"
v-for="(list, index) in terminalPhoto"
:key="index"
ref="scrollBox"
v-on:wheel="handleScroll"
:class="terminalPhoto.length < 5 ? 'littlePic' : ''"
>
<div
class="smallPic"
v-for="(item, index2) in list"
v-for="(item, index2) in terminalPhoto"
:key="index2"
@click="changeBigPic(item, index2)"
:class="activeSmall === index2 ? 'borderActive' : ''"
@ -148,8 +144,14 @@
<img v-lazy="item.path" />
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="arrow leftArrow" @click="smallLeftClick">
<i class="el-icon-arrow-left"></i>
</div>
<div class="arrow rightArrow">
<i class="el-icon-arrow-right" @click="smallRightClick"></i>
</div>
</div>
</div>
</div>
</template>
@ -191,7 +193,7 @@ export default {
},
mounted() {
console.log(this.terminalPhoto);
this.changeBigPic(this.terminalPhoto[0][0], 0);
this.changeBigPic(this.terminalPhoto[0], 0);
},
watch: {
terminalPhoto: {
@ -206,6 +208,7 @@ export default {
this.roleUser = localStorage.getItem("role");
console.log(this.roleUser);
},
methods: {
//下载图片
downLoadPic(url, name) {
@ -326,32 +329,17 @@ export default {
},
//点击大图左右按钮
leftClick() {
console.log("我点击了左侧按钮", this.activeSmall, this.currentPage);
console.log("我点击了左侧按钮", this.activeSmall);
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
);
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5;
this.changeBigPic(this.terminalPhoto[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
);
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5;
this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
},
//获取第一张大图
changeBigPic(data, i) {
@ -373,73 +361,27 @@ export default {
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);
}
console.log(this.$refs.scrollBox.offsetWidth / 5);
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5;
}
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);
}
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5;
}
},
//缩略图的左右箭头
smallLeftClick() {
console.log("缩略图箭头左侧");
this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth;
},
smallRightClick() {
console.log("缩略图箭头右侧");
this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth;
},
},
};
</script>
@ -543,41 +485,68 @@ export default {
width: 100%;
height: 20%;
margin-bottom: 6px;
.el-carousel {
.scrollPicContain {
// width: 1380px;
display: flex;
height: 100%;
.el-carousel__container {
height: 100% !important;
}
.el-carousel__arrow {
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;
justify-content: center;
overflow-x: hidden;
overflow-y: hidden;
scroll-behavior: smooth;
.smallPic {
width: 20%;
width: 18%;
border: 3px solid transparent;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
white-space: nowrap;
position: relative;
cursor: pointer;
.picBox {
width: 100%;
height: 100%;
}
// .el-image {
// width: 100%;
// height: 100%;
// }
img {
width: 100%;
height: 100%;
@ -607,6 +576,9 @@ export default {
}
}
}
.littlePic {
justify-content: center;
}
}
}
</style>

612
src/views/realTimeMonitor/components/carouselChartOld.vue
Unescape Escape View File

@ -0,0 +1,612 @@
<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 + '!1366x768'"
: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>

24
src/views/realTimeMonitor/components/siderBar.vue
Unescape Escape View File

@ -132,10 +132,24 @@ export default {
this.lineTreeData = res.data.list;
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
});
if (this.zzradio == 0) {
console.log("装置为离线");
this.$nextTick(() => {
console.log(this.lineTreeData);
this.currentData = this.lineTreeData[0];
console.log(this.currentData);
this.handleNodeClick(this.currentData);
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
this.scrollView();
});
});
} else {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
this.scrollView();
});
}
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
@ -196,7 +210,7 @@ export default {
handleNodeClick(data) {
console.log(data);
this.currentData = data;
this.scrollView();
// this.scrollView();
this.$store.commit("currentData", this.currentData); //将currentData保存在vuex中
this.$store.commit("termId", this.currentData.id); //将currentData保存在vuex中
this.$store.commit("protocol", this.currentData.protocol); //将currentData保存在vuex中

20
src/views/realTimeMonitor/components/takePicButton.vue
Unescape Escape View File

@ -40,13 +40,20 @@ export default {
},
watch: {
termId: {
handler(newVal, oldVal) {},
handler(newVal, oldVal) {
console.log("我改变了");
clearInterval(this.statusTimer);
this.statusTimer = null;
this.statusNum = 0;
this.picLoading = false;
},
deep: true,
immediate: true,
},
},
mounted() {
console.log(this.channelIdList);
console.log("我是主动拍照");
},
computed: {
termId() {
@ -194,5 +201,16 @@ export default {
this.picLoading = false;
},
},
destroyed() {
console.log("离开了");
clearInterval(this.statusTimer);
this.statusTimer = null;
this.statusNum = 0;
},
beforeRouteLeave(to, from, next) {
// 路由跳转前，清除轮询
next();
console.log("7777777777777777777777777");
},
};
</script>

15
src/views/realTimeMonitor/components/takeVideoButton.vue
Unescape Escape View File

@ -85,11 +85,16 @@ export default {
// deep: true,
// immediate: true,
// },
// termId: {
// handler(newVal, oldVal) {},
// deep: true,
// immediate: true,
// },
termId: {
handler(newVal, oldVal) {
clearInterval(this.statusTimer);
this.statusTimer = null;
this.statusNum = 0;
this.picLoading = false;
},
deep: true,
immediate: true,
},
// channelId: {
// handler(newVal, oldVal) {},
// deep: true,

39
src/views/realTimeMonitor/index.vue
Unescape Escape View File

@ -148,25 +148,28 @@ export default {
} else {
this.terminalPhoto = res.data.list;
}
let newDataList = [];
let current = 0;
if (this.terminalPhoto && this.terminalPhoto.length > 0) {
for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
if (i % this.photoNum !== 0 || i === 0) {
if (!newDataList[current]) {
newDataList.push([this.terminalPhoto[i]]);
} else {
newDataList[current].push(this.terminalPhoto[i]);
}
} else {
current++;
newDataList.push([this.terminalPhoto[i]]);
}
}
}
this.terminalPhoto = [...newDataList];
// let newDataList = [];
// let current = 0;
// if (this.terminalPhoto && this.terminalPhoto.length > 0) {
// for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
// if (i % this.photoNum !== 0 || i === 0) {
// if (!newDataList[current]) {
// newDataList.push([this.terminalPhoto[i]]);
// } else {
// newDataList[current].push(this.terminalPhoto[i]);
// }
// } else {
// current++;
// newDataList.push([this.terminalPhoto[i]]);
// }
// }
// }
// this.terminalPhoto = [...newDataList];
// this.$nextTick(() => {
// this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
// });
this.$nextTick(() => {
this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
});
this.swiperLoading = false;

Write Preview
Loading…
Cancel
Save