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

历史图片优化加载

Browse Source
menu1.0
fanluyan 9 months ago
parent dd95854e88
commit 75a7740ab4
4 changed files with 80 additions and 83 deletions
Show Stats Download Patch File Download Diff File

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

@ -22,7 +22,7 @@
<el-button type="primary" @click="setbtn">设置</el-button> <el-button type="primary" @click="setbtn">设置</el-button>
</div> </div>
</div> </div>
<div class="imageCenter" v-loading="loading" v-cloak> <div class="imageCenter" v-loading="loading">
<el-row <el-row
v-for="i in rowNum" v-for="i in rowNum"
:key="'row-' + i" :key="'row-' + i"
@ -31,7 +31,7 @@
<el-col <el-col
:span="24 / colNum" :span="24 / colNum"
v-for="(item, index) in picList" v-for="(item, index) in picList"
v-if="index < colNum * i && index >= colNum * (i - 1)" v-show="index < colNum * i && index >= colNum * (i - 1)"
:key="'col-' + index" :key="'col-' + index"
> >
<div class="imgList" @click="handleShowHistory(item)"> <div class="imgList" @click="handleShowHistory(item)">
@ -39,7 +39,7 @@
v-if="item.path !== null && item.path.indexOf('videos') == -1" v-if="item.path !== null && item.path.indexOf('videos') == -1"
class="bigpic" class="bigpic"
> >
<img :src="item.path + '!1366x768'" @error="setDefaultImage" /> <img :src="item.path" @error="setDefaultImage" />
</div> </div>
<div <div
class="bigpic" class="bigpic"
@ -93,15 +93,18 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="画面布局" class="layoutBox"> <el-form-item label="选择通道">
<!-- <el-select v-model="selLayout" placeholder="s请选择"> <el-select v-model="channelVal" placeholder="请选择">
<el-option <el-option
v-for="item in layoutOptions" v-for="item in channelOption"
:key="item.value" :key="item.value"
:label="item.label" :label="item.name"
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> --> </el-select>
</el-form-item>
<el-form-item label="画面布局" class="layoutBox">
<div class="selectGroup"> <div class="selectGroup">
<div class="rowbox"> <div class="rowbox">
<el-radio-group v-model="rowradio" class="radio1"> <el-radio-group v-model="rowradio" class="radio1">
@ -134,27 +137,6 @@
</div> </div>
</el-dialog> </el-dialog>
<morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw> <morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
<!-- <el-dialog
title="历史图片"
:visible.sync="historyPicdialog"
width="1366px"
:close-on-click-modal="false"
class="showDialogHistoryPic"
>
<div class="title">
{{ picInfoData.linename }}-{{ picInfoData.towername }}-（{{
picInfoData.alias !== null && picInfoData.alias !== ""
? picInfoData.alias
: picInfoData.channnelname
}}） {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
</div>
<carouselChart
ref="carouselpic"
:terminalPhoto="terminalPhoto"
v-if="terminalPhoto.length > 0"
v-loading="historyPicLoading"
></carouselChart>
</el-dialog> -->
</div> </div>
</template> </template>
<script> <script>
@ -223,6 +205,12 @@ export default {
rowradio: "4", rowradio: "4",
colradio: "4", colradio: "4",
selLayout: 1, selLayout: 1,
channelVal: -1, //默认全部
channelOption: [
{ name: "全部", value: -1 },
{ name: "通道一", value: 1 },
{ name: "通道二", value: 2 },
],
options: [ options: [
{ {
value: "选项1", value: "选项1",
@ -242,6 +230,7 @@ export default {
nopicPath: require("@/assets/img/nopic.jpg"), nopicPath: require("@/assets/img/nopic.jpg"),
}; };
}, },
methods: { methods: {
setDefaultImage(e) { setDefaultImage(e) {
e.target.src = defaultImage; e.target.src = defaultImage;
@ -305,17 +294,25 @@ export default {
this.colradio = parseInt(localStorage.getItem("col")) this.colradio = parseInt(localStorage.getItem("col"))
? parseInt(localStorage.getItem("col")) ? parseInt(localStorage.getItem("col"))
: 4; : 4;
this.channelVal = parseInt(localStorage.getItem("channelNum"))
? parseInt(localStorage.getItem("channelNum"))
: -1;
}, },
submitForm() { submitForm() {
localStorage.setItem("totalTime", this.selSpeed); localStorage.setItem("totalTime", this.selSpeed);
localStorage.setItem("row", this.rowradio); localStorage.setItem("row", this.rowradio);
localStorage.setItem("col", this.colradio); localStorage.setItem("col", this.colradio);
localStorage.setItem("channelNum", this.channelVal);
this.rowNum = parseInt(localStorage.getItem("row")) this.rowNum = parseInt(localStorage.getItem("row"))
? parseInt(localStorage.getItem("row")) ? parseInt(localStorage.getItem("row"))
: 4; : 4;
this.colNum = parseInt(localStorage.getItem("col")) this.colNum = parseInt(localStorage.getItem("col"))
? parseInt(localStorage.getItem("col")) ? parseInt(localStorage.getItem("col"))
: 4; : 4;
this.channelVal = parseInt(localStorage.getItem("channelNum"))
? parseInt(localStorage.getItem("channelNum"))
: -1;
this.page = 1;
this.pageSize = this.rowradio * this.colradio; this.pageSize = this.rowradio * this.colradio;
this.setdialog = false; this.setdialog = false;
this.$message.success("设置成功"); this.$message.success("设置成功");
@ -330,12 +327,17 @@ export default {
}, },
//请求数据接口方法 //请求数据接口方法
getPicData() { getPicData() {
this.loading = true; //this.loading = true;
this.picList = []; console.log(this.picList);
getPictureList({ //this.picList = [];
const params = {
pageindex: this.page, pageindex: this.page,
pagesize: this.rowNum * this.colNum, pagesize: this.rowNum * this.colNum,
}) };
if (this.channelVal !== -1) {
params.channelid = this.channelVal;
}
getPictureList(params)
.then((res) => { .then((res) => {
this.picList = res.data.list; this.picList = res.data.list;
this.totalPage = res.data.totalpage; this.totalPage = res.data.totalpage;
@ -402,6 +404,11 @@ export default {
? parseInt(localStorage.getItem("col")) ? parseInt(localStorage.getItem("col"))
: 4; : 4;
this.pageSize = this.rowradio * this.colradio; this.pageSize = this.rowradio * this.colradio;
this.channelVal = parseInt(localStorage.getItem("channelNum"))
? parseInt(localStorage.getItem("channelNum"))
: -1;
console.log("我是第一次进来", this.channelVal);
//this.toggleCountdown(); //this.toggleCountdown();
this.getPicData(); this.getPicData();
}, },

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

@ -23,8 +23,14 @@
v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath" v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
> >
<el-image :src="currentPicPath"> <el-image :src="currentPicPath">
<div slot="placeholder" class="image-slot"> <div
加载中<span class="dot">...</span> slot="placeholder"
class="image-slot"
:style="{
backgroundImage: 'url(' + currentPicPath + '!160x60' + ')',
}"
>
<!-- <i class="el-icon-loading"></i> -->
</div> </div>
</el-image> </el-image>
</div> </div>
@ -47,7 +53,7 @@
backgroundImage: 'url(' + currentPicPath + '!160x60' + ')', backgroundImage: 'url(' + currentPicPath + '!160x60' + ')',
}" }"
> >
<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" />
@ -109,7 +115,6 @@
item.path.indexOf('videos') == -1 item.path.indexOf('videos') == -1
" "
> >
<!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
<img v-lazy="item.path + '!160x60'" /> <img v-lazy="item.path + '!160x60'" />
<!-- <img :src="item.path + '!260x160'" />--> <!-- <img :src="item.path + '!260x160'" />-->
<!-- :class="{ alarmSpan: item.isAlarm === 1 }" --> <!-- :class="{ alarmSpan: item.isAlarm === 1 }" -->
@ -416,11 +421,6 @@ export default {
}, },
//获取第一张大图 //获取第一张大图
changeBigPic(data, i) { changeBigPic(data, i) {
// //console.log("鼠标222222222", this.currentPage, this.activeSmall);
this.picShowFlag = true;
if (this.currentPicPath == "static/img/nopic.0e9cfc7c.jpg") {
this.picShowFlag = false;
}
this.picDataAlarm = data; this.picDataAlarm = data;
this.srcList = []; this.srcList = [];
this.localPoints = []; this.localPoints = [];
@ -476,12 +476,10 @@ export default {
console.log("loading"); console.log("loading");
this.picLoading = false; this.picLoading = false;
this.drawlineBig(this.picDataAlarm); this.drawlineBig(this.picDataAlarm);
this.picShowFlag = false;
}, },
setDefaultImage(e) { setDefaultImage(e) {
e.target.src = defaultImage; e.target.src = defaultImage;
this.picLoading = false; this.picLoading = false;
this.picShowFlag = false;
}, },
//鼠标滚动 //鼠标滚动
handleScroll(e) { handleScroll(e) {
@ -754,8 +752,8 @@ export default {
height: 100%; height: 100%;
background-size: 100% 100%; background-size: 100% 100%;
i { i {
font-size: 40px; font-size: 20px;
color: #128071; color: #169e8c;
} }
} }
img { img {
@ -911,7 +909,8 @@ export default {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background: url(../../../assets/img/nopicbg.png) no-repeat; background: url(../../../assets/img/nopicbg.png) no-repeat;
background-size: 100% 100%; background-size: 20% 20%;
background-color: #eee;
} }
} }
.smallPic { .smallPic {
@ -925,8 +924,9 @@ export default {
.picBox { .picBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url(../../../assets/img/nopicbg.png) no-repeat; background: url(../../../assets/img/nopicbg.png) no-repeat center;
background-size: 100% 100%; background-size: 30% 24%;
background-color: #eee;
} }
img { img {
width: 100%; width: 100%;

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

@ -1,5 +1,5 @@
<template> <template>
<div class="morePicBox" v-if="isShow"> <div class="morePicBox" v-show="isShow">
<div class="headTitle"> <div class="headTitle">
<div class="info"> <div class="info">
<p> <p>
@ -24,7 +24,6 @@
ref="carouselpic" ref="carouselpic"
:terminalPhoto="terminalPhoto" :terminalPhoto="terminalPhoto"
:photoNum="photoNum" :photoNum="photoNum"
v-if="terminalPhoto.length > 0"
></carouselChart> ></carouselChart>
</div> </div>
</div> </div>
@ -64,7 +63,7 @@ export default {
}, },
//获取图片 //获取图片
getTerminalPhotoList(channelid, date, termId) { getTerminalPhotoList(channelid, date, termId) {
this.terminalPhoto = []; //this.terminalPhoto = [];
this.picLoading = true; this.picLoading = true;
getTerminalPhotoListJoggle({ getTerminalPhotoListJoggle({
channelid: channelid, channelid: channelid,
@ -86,23 +85,6 @@ export default {
this.terminalPhoto = res.data.list; this.terminalPhoto = res.data.list;
} }
this.carouselKey++; // 更新key以强制重新渲染 this.carouselKey++; // 更新key以强制重新渲染
// 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];
}) })
.catch((err) => { .catch((err) => {
console.log(err); //代码错误、请求失败捕获 console.log(err); //代码错误、请求失败捕获
@ -154,6 +136,9 @@ export default {
.picmain { .picmain {
width: 100%; width: 100%;
height: calc(100% - 10px); height: calc(100% - 10px);
.el-loading-mask {
background-color: rgba(255, 255, 255, 0.2);
}
} }
} }
</style> </style>

33
src/views/realTimeSearch/index.vue
Unescape Escape View File

@ -108,22 +108,14 @@
</el-form> </el-form>
</div> </div>
<div class="pictureBox" v-loading="loading"> <div class="pictureBox" v-loading="loading">
<div <div class="picShowBox" v-if="picList.length !== 0" style="width: 100%">
v-if="picList.length !== 0"
style="width: 100%"
v-loading="loading"
>
<el-card <el-card
class="box-card imgList" class="box-card imgList"
v-for="(item, index) in picList" v-for="(item, index) in picList"
:key="index" :key="index"
> >
<div class="bigpic" v-if="item.path.indexOf('videos') == -1"> <div class="bigpic" v-if="item.path.indexOf('videos') == -1">
<el-image <el-image lazy :src="item.path" :preview-src-list="[item.path]">
lazy
:src="item.path + '!800x600'"
:preview-src-list="[item.path]"
>
<template slot="error"> <template slot="error">
<img src="../../assets/img/nodatapic2.jpg" /> <img src="../../assets/img/nodatapic2.jpg" />
</template> </template>
@ -395,7 +387,7 @@ export default {
console.log(this.formdata); console.log(this.formdata);
getRealtimePhoto(this.formdata) getRealtimePhoto(this.formdata)
.then((res) => { .then((res) => {
this.picList = []; // this.picList = [];
this.picList = res.data.list; this.picList = res.data.list;
this.total = res.data.total; this.total = res.data.total;
this.tdTermid = res.data.list[0].termid; this.tdTermid = res.data.list[0].termid;
@ -425,7 +417,7 @@ export default {
//点击分页 //点击分页
handleCurrentChange(val) { handleCurrentChange(val) {
this.page = val; this.page = val;
this.picList = []; //this.picList = [];
this.getPicData(); this.getPicData();
}, },
//每页条数 //每页条数
@ -488,8 +480,12 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
height: calc(100% - 135px); height: calc(100% - 135px);
max-height: calc(100% - 135px); max-height: calc(100% - 135px);
overflow: auto;
border: 1px solid #eee; border: 1px solid #eee;
.picShowBox {
height: 100%;
overflow: auto;
}
.imgList { .imgList {
width: calc((100% - 104px) / 4); width: calc((100% - 104px) / 4);
@ -509,11 +505,17 @@ export default {
.bigpic { .bigpic {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size: 100% 100%; //background-size: 100% 100%;
position: relative; position: relative;
.el-image { .el-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
.el-image__placeholder {
background: url(../../assets/img/nopicbg.png) no-repeat center;
background-size: 20% 20%;
}
img { img {
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
@ -572,6 +574,9 @@ export default {
} }
} }
} }
.el-loading-mask {
background-color: rgba(255, 255, 255, 0.4);
}
.noPicBox { .noPicBox {
display: flex; display: flex;
width: 100%; width: 100%;

Write Preview
Loading…
Cancel
Save