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

优化图片

Browse Source
hn2.0
fanluyan 8 months ago
parent 1eac491500
commit 87d8afbe95
4 changed files with 53 additions and 60 deletions
Show Stats Download Patch File Download Diff File

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

@ -6,13 +6,7 @@
v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath" v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
> >
<el-image :src="currentPicPath"> <el-image :src="currentPicPath">
<div <div slot="placeholder" class="image-slot">
slot="placeholder"
class="image-slot"
:style="{
backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
}"
>
<i class="el-icon-loading"></i> <i class="el-icon-loading"></i>
</div> </div>
</el-image> </el-image>
@ -23,7 +17,7 @@
@click="handleBigPicbox(currentPicPath)" @click="handleBigPicbox(currentPicPath)"
> >
<!-- :preview-src-list="srcList" @click="handleBigPicbox(currentPicPath)" --> <!-- :preview-src-list="srcList" @click="handleBigPicbox(currentPicPath)" -->
<el-image <!-- <el-image
:src="currentPicPath" :src="currentPicPath"
@load="loadImage" @load="loadImage"
@error="setDefaultImage" @error="setDefaultImage"
@ -32,19 +26,20 @@
width="100%" width="100%"
height="100%" height="100%"
> >
<div <div slot="placeholder" class="image-slot">
slot="placeholder"
class="image-slot"
:style="{
backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
}"
>
<i class="el-icon-loading"></i> <i class="el-icon-loading"></i>
</div> </div>
<template slot="error"> <template slot="error">
<img src="../../assets/img/nodatapic2.jpg" /> <img src="../../assets/img/nodatapic2.jpg" />
</template> </template>
</el-image> </el-image>-->
<img
:src="currentPicPath"
ref="picJpg"
id="alarmPic"
width="100%"
height="100%"
/>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas> <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
<canvas id="alarmCanvas" class="alarmCanvas" ref="alarmCanvas"></canvas> <canvas id="alarmCanvas" class="alarmCanvas" ref="alarmCanvas"></canvas>
<!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> --> <!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
@ -228,6 +223,7 @@ export default {
}, },
data() { data() {
return { return {
piclist: [],
items: [ items: [
"Item 1", "Item 1",
"Item 2", "Item 2",
@ -245,7 +241,7 @@ export default {
mediaType: 0, //判断图片类型是视频还是图片 mediaType: 0, //判断图片类型是视频还是图片
activeSmall: 0, //索引选中小图, activeSmall: 0, //索引选中小图,
currentPage: 0, currentPage: 0,
srcList: [],
radioPx: "", radioPx: "",
fileSize: "", fileSize: "",
roleUser: "", roleUser: "",
@ -420,17 +416,12 @@ export default {
//获取第一张大图 //获取第一张大图
changeBigPic(data, i) { changeBigPic(data, i) {
if (data) { if (data) {
this.currentPicPath = data.path;
console.log("aaaaaaaaaaaaaaaaaaaaa", data.mediaType); console.log("aaaaaaaaaaaaaaaaaaaaa", data.mediaType);
this.mediaType = data.mediaType !== null ? data.mediaType : 0; this.mediaType = data.mediaType !== null ? data.mediaType : 0;
this.picDataAlarm = data; this.picDataAlarm = data;
this.srcList = [];
this.localPoints = []; this.localPoints = [];
this.activeSmall = i; this.activeSmall = i;
this.currentPicPath = data.path;
this.srcList.push(data.path);
if (data.width != undefined) { if (data.width != undefined) {
this.radioPx = data.width + "x" + data.height; this.radioPx = data.width + "x" + data.height;
} else { } else {
@ -482,8 +473,8 @@ export default {
} }
}, },
loadImage() { loadImage() {
console.log("loading"); // console.log("loading");
this.picLoading = false; // this.picLoading = false;
this.drawlineBig(this.picDataAlarm); this.drawlineBig(this.picDataAlarm);
}, },
setDefaultImage(e) { setDefaultImage(e) {
@ -1059,5 +1050,8 @@ export default {
} }
} }
} }
.hideimg {
display: none;
}
} }
</style> </style>

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

@ -6,13 +6,7 @@
v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath" v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
> >
<el-image :src="currentPicPath"> <el-image :src="currentPicPath">
<div <div slot="placeholder" class="image-slot">
slot="placeholder"
class="image-slot"
:style="{
backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
}"
>
<i class="el-icon-loading"></i> <i class="el-icon-loading"></i>
</div> </div>
</el-image> </el-image>
@ -23,7 +17,7 @@
@click="handleBigPicbox(currentPicPath)" @click="handleBigPicbox(currentPicPath)"
> >
<!-- :preview-src-list="srcList" @click="handleBigPicbox(currentPicPath)" --> <!-- :preview-src-list="srcList" @click="handleBigPicbox(currentPicPath)" -->
<el-image <!-- <el-image
:src="currentPicPath" :src="currentPicPath"
@load="loadImage" @load="loadImage"
@error="setDefaultImage" @error="setDefaultImage"
@ -32,19 +26,20 @@
width="100%" width="100%"
height="100%" height="100%"
> >
<div <div slot="placeholder" class="image-slot">
slot="placeholder"
class="image-slot"
:style="{
backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
}"
>
<i class="el-icon-loading"></i> <i class="el-icon-loading"></i>
</div> </div>
<template slot="error"> <template slot="error">
<img src="../../assets/img/nodatapic2.jpg" /> <img src="../../assets/img/nodatapic2.jpg" />
</template> </template>
</el-image> </el-image>-->
<img
:src="currentPicPath"
ref="picJpg"
id="alarmPic"
width="100%"
height="100%"
/>
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas> <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
<canvas id="alarmCanvas" class="alarmCanvas" ref="alarmCanvas"></canvas> <canvas id="alarmCanvas" class="alarmCanvas" ref="alarmCanvas"></canvas>
<!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> --> <!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
@ -228,6 +223,7 @@ export default {
}, },
data() { data() {
return { return {
piclist: [],
items: [ items: [
"Item 1", "Item 1",
"Item 2", "Item 2",
@ -245,7 +241,7 @@ export default {
mediaType: 0, //判断图片类型是视频还是图片 mediaType: 0, //判断图片类型是视频还是图片
activeSmall: 0, //索引选中小图, activeSmall: 0, //索引选中小图,
currentPage: 0, currentPage: 0,
srcList: [],
radioPx: "", radioPx: "",
fileSize: "", fileSize: "",
roleUser: "", roleUser: "",
@ -420,17 +416,12 @@ export default {
//获取第一张大图 //获取第一张大图
changeBigPic(data, i) { changeBigPic(data, i) {
if (data) { if (data) {
this.currentPicPath = data.path;
console.log("aaaaaaaaaaaaaaaaaaaaa", data.mediaType); console.log("aaaaaaaaaaaaaaaaaaaaa", data.mediaType);
this.mediaType = data.mediaType !== null ? data.mediaType : 0; this.mediaType = data.mediaType !== null ? data.mediaType : 0;
this.picDataAlarm = data; this.picDataAlarm = data;
this.srcList = [];
this.localPoints = []; this.localPoints = [];
this.activeSmall = i; this.activeSmall = i;
this.currentPicPath = data.path;
this.srcList.push(data.path);
if (data.width != undefined) { if (data.width != undefined) {
this.radioPx = data.width + "x" + data.height; this.radioPx = data.width + "x" + data.height;
} else { } else {
@ -482,8 +473,8 @@ export default {
} }
}, },
loadImage() { loadImage() {
console.log("loading"); // console.log("loading");
this.picLoading = false; // this.picLoading = false;
this.drawlineBig(this.picDataAlarm); this.drawlineBig(this.picDataAlarm);
}, },
setDefaultImage(e) { setDefaultImage(e) {
@ -1059,5 +1050,8 @@ export default {
} }
} }
} }
.hideimg {
display: none;
}
} }
</style> </style>

7
src/views/pictureRotation/index.vue
Unescape Escape View File

@ -212,6 +212,7 @@
:key="carouselKey" :key="carouselKey"
:terminalPhoto="terminalPhoto" :terminalPhoto="terminalPhoto"
:photoNum="photoNum" :photoNum="photoNum"
v-loading="historyPicLoading"
></carouselChartmore> ></carouselChartmore>
</div> </div>
</div> </div>
@ -328,7 +329,7 @@ export default {
//获取图片 //获取图片
getTerminalPhotoList(channelId, date, termId) { getTerminalPhotoList(channelId, date, termId) {
console.log(channelId, date, termId); console.log(channelId, date, termId);
this.historyPicLoading = true;
console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto); console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto);
//this.terminalPhoto = []; //this.terminalPhoto = [];
getTerminalPhotoListJoggle({ getTerminalPhotoListJoggle({
@ -354,6 +355,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0); this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
}); });
this.historyPicLoading = false;
}) })
.catch((err) => { .catch((err) => {
console.log(err); //代码错误、请求失败捕获 console.log(err); //代码错误、请求失败捕获
@ -789,6 +791,9 @@ export default {
width: 100%; width: 100%;
height: calc(100% - 10px); height: calc(100% - 10px);
} }
.el-loading-mask {
background-color: rgba(0, 0, 0, 0.3);
}
} }
} }
[v-cloak] { [v-cloak] {

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

@ -1039,24 +1039,24 @@ export default {
this.$message({ this.$message({
duration: 1500, duration: 1500,
showClose: true, showClose: true,
message: "下发指令超时，请重试！", message: "拍照指令已下发",
type: "warning", type: "success",
}); });
} else if (res.data.cmaStatus == 1 || res.data.picStatus == true) { } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
this.statusNum = 0;
this.btnpicloading = false; this.btnpicloading = false;
this.btnvideoloading = false; this.btnvideoloading = false;
this.statusNum = 0;
clearInterval(this.statusTimer); clearInterval(this.statusTimer);
this.statusTimer = null; this.statusTimer = null;
this.$message({ this.$message({
duration: 1500, duration: 1500,
showClose: true, showClose: true,
message: "下发指令成功！", message: "拍照指令下发成功！",
type: "success", type: "success",
}); });
// clearInterval(this.timer); clearInterval(this.timer);
// this.timer = null; this.timer = null;
// this.timer = window.setInterval(() => { // this.timer = window.setInterval(() => {
// this.newPicApi(); // this.newPicApi();
// this.i++; // this.i++;
@ -1097,7 +1097,7 @@ export default {
type: "warning", type: "warning",
duration: 60000, duration: 60000,
}); });
// this.newPicApi(); //this.newPicApi();
} }
}, },
//获取最新图片 //获取最新图片

Write Preview
Loading…
Cancel
Save