xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

点击查看多图

Browse Source
hn2.0
fanluyan 2 years ago
parent 061b2dee0f
commit 2f6e140501
5 changed files with 1132 additions and 107 deletions
Show Stats Download Patch File Download Diff File

43
src/views/components/carouselChart.vue
Unescape Escape View File

@ -282,30 +282,20 @@ export default {
}, },
created() {}, created() {},
methods: { methods: {
downLoadPic(url, name) { async downLoadPic(path, name) {
const image = new Image(); const imgUrl = path;
image.setAttribute("crossOrigin", "anonymous"); const response = await fetch(imgUrl);
image.src = url; const blob = await response.blob();
image.onload = () => { // 创建下载链接
const canvas = document.createElement("canvas"); const url = window.URL.createObjectURL(blob);
canvas.width = image.width; const link = document.createElement("a");
canvas.height = image.height; link.href = url;
const ctx = canvas.getContext("2d"); link.download = name;
ctx.drawImage(image, 0, 0, image.width, image.height); document.body.appendChild(link);
canvas.toBlob((blob) => { link.click();
const url = URL.createObjectURL(blob); document.body.removeChild(link);
this.download(url, name); // 释放 Blob URL
// 用完释放URL对象 window.URL.revokeObjectURL(url);
URL.revokeObjectURL(url);
});
};
},
download(href, name) {
const eleLink = document.createElement("a");
eleLink.download = name;
eleLink.href = href;
eleLink.click();
eleLink.remove();
}, },
// showbigpicPath(data) { // showbigpicPath(data) {
// console.log(data); // console.log(data);
@ -626,6 +616,7 @@ export default {
bottom: 16px; bottom: 16px;
color: #fff; color: #fff;
z-index: 5; z-index: 5;
opacity: 0;
&:hover { &:hover {
background: rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.9);
color: #169e8c; color: #169e8c;
@ -636,6 +627,10 @@ export default {
opacity: 1; opacity: 1;
transition: all 0.5s ease-in; transition: all 0.5s ease-in;
} }
.downBtn {
opacity: 1;
transition: all 0.5s ease-in;
}
} }
.bigimg { .bigimg {
width: 100%; width: 100%;

902
src/views/components/carouselChartmore.vue
Unescape Escape View File

@ -0,0 +1,902 @@
<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" />
</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'" />
<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";
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, //每页显示10条
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: {
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(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;
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;
}
}
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;
}
.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;
}
.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>

125
src/views/realTimeMonitor/components/morePicPreveiw.vue
Unescape Escape View File

@ -0,0 +1,125 @@
<template>
<div class="morePicBox" v-if="isShow">
<div class="headTitle">
<div class="info">
<p>
{{ deviceData.linename }} - {{ deviceData.towername }} - （{{
deviceData.alias !== null && deviceData.alias !== ""
? deviceData.alias
: deviceData.channnelname
}}）
</p>
<!-- <p class="timeinfo" v-if="item.mediatype !== null">
{{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
</p> -->
</div>
<div class="closeBox" @click="handleclose">
<i class="el-icon-close"></i>
</div>
</div>
<div class="picmain" v-loading="picLoading">
<carouselChartmore
ref="carouselpic"
:terminalPhoto="terminalPhoto"
v-if="terminalPhoto.length > 0"
></carouselChartmore>
</div>
</div>
</template>
<script>
import carouselChartmore from "../../components/carouselChartmore.vue";
import { getTerminalPhotoListJoggle } from "@/utils/api/index";
export default {
components: {
carouselChartmore,
},
props: {
title: String,
},
data() {
return {
isShow: false,
deviceData: "",
terminalPhoto: [], //获取装置当前图片数据
nopicPath: require("@/assets/img/nopic.jpg"),
picLoading: false,
};
},
mounted() {},
methods: {
display(data) {
this.isShow = true;
console.log(data);
this.deviceData = data;
this.getTerminalPhotoList(data.channelid, data.photoTime, data.termid);
},
//获取图片
getTerminalPhotoList(channelid, date, termId) {
this.terminalPhoto = [];
this.picLoading = true;
getTerminalPhotoListJoggle({
channelid: channelid,
time: date,
terminalid: termId,
})
.then((res) => {
console.log(res);
this.picLoading = false;
if (res.data.list.length == 0) {
this.terminalPhoto = [
{
path: this.nopicPath,
termId: termId,
mediatype: 0,
},
];
} else {
this.terminalPhoto = res.data.list;
}
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
});
},
handleclose() {
this.isShow = false;
},
},
};
</script>
<style lang="less">
.morePicBox {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
top: 0px;
left: 0px;
z-index: 99999;
.headTitle {
height: 40px;
padding-left: 18px;
padding-right: 18px;
line-height: 40px;
color: #fff;
font-size: 14px;
background: linear-gradient(180deg, #4cdbc8 10%, #128071);
display: flex;
justify-content: space-between;
align-items: center;
.closeBox {
width: 24px;
height: 24px;
align-items: center;
display: flex;
justify-content: center;
cursor: pointer;
}
}
.picmain {
width: 100%;
height: calc(100% - 10px);
}
}
</style>

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

@ -298,6 +298,7 @@
<setschedule ref="setschedule_ref"></setschedule> <setschedule ref="setschedule_ref"></setschedule>
<info-dialog ref="infodialog_ref"></info-dialog> <info-dialog ref="infodialog_ref"></info-dialog>
<gps-position ref="gpsdialog_ref"></gps-position> <gps-position ref="gpsdialog_ref"></gps-position>
<morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
</div> </div>
</template> </template>
@ -319,6 +320,7 @@ import carouselChart from "../components/carouselChart.vue";
import setschedule from "./components/setschedule.vue"; import setschedule from "./components/setschedule.vue";
import infoDialog from "./components/infoDialog.vue"; import infoDialog from "./components/infoDialog.vue";
import gpsPosition from "./components/gpsPosition.vue"; import gpsPosition from "./components/gpsPosition.vue";
import morePicPreveiw from "./components/morePicPreveiw.vue";
import { number } from "echarts"; import { number } from "echarts";
export default { export default {
components: { components: {
@ -327,6 +329,7 @@ export default {
setschedule, setschedule,
infoDialog, infoDialog,
gpsPosition, gpsPosition,
morePicPreveiw,
}, },
data() { data() {
return { return {
@ -442,6 +445,7 @@ export default {
console.log("电压"); console.log("电压");
this.type = 1; this.type = 1;
//this.getPicList(data.id, this.type); //this.getPicList(data.id, this.type);
this.$refs.previewRef.getPicList(data.id, this.type, this.page); this.$refs.previewRef.getPicList(data.id, this.type, this.page);
} else if (data.bsManufacturer) { } else if (data.bsManufacturer) {
this.LineFlag = true; this.LineFlag = true;
@ -510,7 +514,7 @@ export default {
this.totalNum = res.data.totalNum; this.totalNum = res.data.totalNum;
this.currentData = JSON.parse(localStorage.getItem("currentData")); this.currentData = JSON.parse(localStorage.getItem("currentData"));
console.log(this.currentData); console.log(this.currentData);
if (this.lineTreeData[0].list[0].list.length > 0) { // if (this.lineTreeData[0].list[0].list.length > 0) {
console.log("diyici"); console.log("diyici");
if ( if (
this.currentData !== null && this.currentData !== null &&
@ -537,7 +541,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来 this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
}); });
} // }
// if (this.zzradio == -1) { // if (this.zzradio == -1) {
// this.lineTreeData = this.lineTreeData; // this.lineTreeData = this.lineTreeData;
// } else if (this.zzradio == 1) { // } else if (this.zzradio == 1) {
@ -690,62 +694,61 @@ export default {
jumpTowerPic(data) { jumpTowerPic(data) {
console.log("我是从子组件过来的数据"); console.log("我是从子组件过来的数据");
console.log(data); console.log(data);
this.LineFlag = false; this.$refs.morePicPreveiw_ref.display(data);
this.towerFlag = true; // this.LineFlag = false;
this.zzCmdid = data.cmdid; // this.towerFlag = true;
this.towertitle = data.towername; // this.zzCmdid = data.cmdid;
this.zztermId = data.termid; // this.towertitle = data.towername;
this.selectChannelValue = data.channnelname; // this.zztermId = data.termid;
this.$refs.tree.setCurrentKey(this.zztermId); //一定要加这个选中了否则样式没有出来 // this.selectChannelValue = data.channnelname;
this.selectedRegion(this.zztermId); // this.$refs.tree.setCurrentKey(this.zztermId); //一定要加这个选中了否则样式没有出来
if (data.photoTime == "" || data.photoTime == null) { // this.selectedRegion(this.zztermId);
this.getDateTime(); // if (data.photoTime == "" || data.photoTime == null) {
} else { // this.getDateTime();
this.dateValue = data.photoTime; // } else {
} // this.dateValue = data.photoTime;
console.log(this.selectChannelValue); // }
// this.getChannelList(this.zztermId); // console.log(this.selectChannelValue);
getChannelByTermidJoggle({ termid: this.zztermId }) // getChannelByTermidJoggle({ termid: this.zztermId })
.then((res) => { // .then((res) => {
console.log(res); // console.log(res);
this.channelList = res.data.list; // this.channelList = res.data.list;
console.log(this.channelList); // console.log(this.channelList);
this.channelOption = []; // this.channelOption = [];
this.channelList.forEach((item) => { // this.channelList.forEach((item) => {
this.channelOption.push({ // this.channelOption.push({
label: item.channelname, // label: item.channelname,
value: item.channelid, // value: item.channelid,
termid: item.termId, // termid: item.termId,
alias: item.alias, // alias: item.alias,
}); // });
}); // 选择通道一通道二select框 // }); // 选择通道一通道二select框
console.log(this.channelOption); // console.log(this.channelOption);
this.channelListOption = []; // this.channelListOption = [];
this.channelListOption.push({ // this.channelListOption.push({
label: "全部", // label: "全部",
value: -1, // value: -1,
termid: "", // termid: "",
alias: "", // alias: "",
}); // });
this.channelList.forEach((item) => { // this.channelList.forEach((item) => {
this.channelListOption.push({ // this.channelListOption.push({
label: item.channelname, // label: item.channelname,
value: item.channelid, // value: item.channelid,
termid: item.termId, // termid: item.termId,
alias: item.alias, // alias: item.alias,
}); // });
}); // });
this.selectChannelValue = data.channnelname; // this.selectChannelValue = data.channnelname;
this.getTerminalPhotoList( // this.getTerminalPhotoList(
data.channelid, // data.channelid,
this.dateValue, // this.dateValue,
this.zztermId // this.zztermId
); //获取图片列表是传当前设备的 id 和termid // ); //获取图片列表是传当前设备的 id 和termid
}) // })
.catch((err) => { // .catch((err) => {
console.log(err); //代码错误、请求失败捕获 // console.log(err); //代码错误、请求失败捕获
}); // });
//this.getTerminalPhotoList(data.channelid, this.dateValue, this.zztermId);
}, },
selectedRegion(id) { selectedRegion(id) {
console.log("滚动到选中定位的位置"); console.log("滚动到选中定位的位置");

2
vue.config.js
Unescape Escape View File

@ -30,7 +30,7 @@ module.exports = defineConfig({
"/api": { "/api": {
//表示拦截以/api开头的请求路径 //表示拦截以/api开头的请求路径
target: "http://47.96.238.157:8093", //阿里云服务器环境 target: "http://47.96.238.157:8093", //阿里云服务器环境
// target: "http://180.166.218.222:40080", //dell //target: "http://180.166.218.222:40080", //dell
changOrigin: true, //是否开启跨域 changOrigin: true, //是否开启跨域
pathRewrite: { pathRewrite: {
"^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的

Write Preview
Loading…
Cancel
Save