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

首页空白bug,添加分辨率，优化下载图片

Browse Source
ds1.0
fanluyan 2 years ago
parent 3e0dc4d2ee
commit 7df734aee2
2 changed files with 75 additions and 56 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,5 +1,13 @@
<template>
<div class="thumb-example">
<div
class="radioBox"
v-if="
bigPicPath.indexOf('nopic') == -1 && bigPicPath.indexOf('videos') == -1
"
>
{{ picRadio }}
</div>
<div class="picTop">
<!-- 判断是否是图片并且不为空 -->
@ -21,6 +29,12 @@
"
>下载图片</el-button
>
<!-- <a
class="downBtn"
:href="bigPicPath.substring(0, bigPicPath.length - 9)"
download
>下载图片</a
> -->
<!-- @click="handleBigPicbox(bigPicPath)" v-viewer="OptionssalseImg"-->
<div
class="nosee"
@ -235,7 +249,6 @@ export default {
page: 1, //当前第几页
pagesize: 5, //每页显示五条
total: 0, //总共又几页
localPoints: [], //画图对象
canvas: null,
ctx: null,
@ -248,13 +261,15 @@ export default {
zoomD: 1,
canvasloading: false,
bigImgPath: "",
picRadio: "", //图片分辨率
};
},
mounted() {
console.log(this.terminalPhoto);
this.mediaType = this.terminalPhoto[0].mediaType;
this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.picRadio =
this.terminalPhoto[0].width + "x" + this.terminalPhoto[0].height;
// this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
@ -292,31 +307,22 @@ export default {
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();
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("!")) {
@ -485,7 +491,10 @@ export default {
this.bigNum--; //执行下一张
this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
this.picRadio =
this.terminalPhoto[this.bigNum].width +
"x" +
this.terminalPhoto[this.bigNum].height;
this.activeSmall--;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
console.log(this.page);
@ -513,7 +522,10 @@ export default {
this.bigNum++; //执行下一张
this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
this.picRadio =
this.terminalPhoto[this.bigNum].width +
"x" +
this.terminalPhoto[this.bigNum].height;
this.activeSmall++;
console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
if (this.activeSmall > 4) {
@ -542,6 +554,7 @@ export default {
this.activeSmall = index;
this.mediaType = row.mediaType;
this.bigPicPath = row.path + "!1366x768";
this.picRadio = row.width + "x" + row.height;
// this.bgbigPath = row.path + "!1366x768";
getCoordinate({
channelId: row.channelId,
@ -621,7 +634,14 @@ export default {
flex-direction: column;
height: calc(100% - 32px);
box-sizing: border-box;
position: relative;
.radioBox {
position: absolute;
right: 24px;
color: #fff;
font-size: 14px;
top: -24px;
}
.picTop {
width: 100%;
height: 80%;

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

@ -549,39 +549,38 @@ export default {
console.log(res);
this.lineTreeData = res.data.list;
console.log(this.lineTreeData);
this.onlineNum = res.data.onlineNum;
this.totalNum = res.data.totalNum;
this.currentData = JSON.parse(localStorage.getItem("currentData"));
console.log(this.currentData);
if (this.lineTreeData[0].list[0].list.length > 0) {
if (
this.currentData !== null &&
Object.keys(this.currentData).length !== 0
) {
console.log("aaa");
this.currentNodekey = this.currentData.id;
this.handleNodeClick(this.currentData);
} else {
console.log("diyici");
if (
this.currentData !== null &&
Object.keys(this.currentData).length !== 0
) {
console.log("aaa");
this.currentNodekey = this.currentData.id;
this.handleNodeClick(this.currentData);
} else {
console.log("diyici");
this.selectData = this.lineTreeData[0]; //第一个选中的数据
this.currentNodekey = this.lineTreeData[0].id; //第一个数据
this.type = 1;
this.newCurrentId = this.lineTreeData[0].id;
this.previewData = this.lineTreeData[0]; //预览图数据
this.channelId = this.currentNodekey;
this.$refs.previewRef.getPicList(
this.currentNodekey,
this.type,
this.page
);
}
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
});
this.selectData = this.lineTreeData[0]; //第一个选中的数据
this.currentNodekey = this.lineTreeData[0].id; //第一个数据
this.type = 1;
this.newCurrentId = this.lineTreeData[0].id;
this.previewData = this.lineTreeData[0]; //预览图数据
this.channelId = this.currentNodekey;
this.$refs.previewRef.getPicList(
this.currentNodekey,
this.type,
this.page
);
}
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
});
// if (this.lineTreeData[0].list[0].list.length > 0) {
// console.log("diyici");
// }
// if (this.zzradio == -1) {
// this.lineTreeData = this.lineTreeData;
// } else if (this.zzradio == 1) {

Write Preview
Loading…
Cancel
Save