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

优化图片大小

Browse Source
master
fanluyan 2 years ago
parent e3cc4c43a7
commit d034007387
4 changed files with 65 additions and 54 deletions
Show Stats Download Patch File Download Diff File

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

@ -12,12 +12,12 @@
:key="item.id" :key="item.id"
> >
<viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1"> <viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1">
<!-- <img :src="item.path + '!1330x670'" alt="" /> --> <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
<img v-if="index == 0" :src="item.path + '!1330x670'" /> <img v-if="index == 0" :src="item.path + '!1280x720'" />
<img <img
v-else v-else
src="../../assets/img/loading.jpg" src="../../assets/img/loading.jpg"
:data-src="item.path + '!1330x670'" :data-src="item.path + '!1280x720'"
class="swiper-lazy" class="swiper-lazy"
/> />
</viewer> </viewer>
@ -46,7 +46,7 @@
:key="item.id" :key="item.id"
> >
<div class="bigimg" v-if="item.path.indexOf('nopic') == -1"> <div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
<!-- <img :src="item.path + '!1330x670'" alt="" /> --> <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
<img v-if="index == 0" :src="item.path + '!260x160'" /> <img v-if="index == 0" :src="item.path + '!260x160'" />
<img <img
v-else v-else
@ -58,7 +58,7 @@
<div class="bigimg" v-else> <div class="bigimg" v-else>
<img :src="item.path" alt="" /> <img :src="item.path" alt="" />
</div> </div>
<!-- <img v-if="index == 0" :src="item.path + '!1330x670'" /> <!-- <img v-if="index == 0" :src="item.path + '!1280x720'" />
<img <img
src="item.path + '!260x160'" src="item.path + '!260x160'"

11
src/views/devicePhotoSchedule/index.vue
Unescape Escape View File

@ -31,7 +31,11 @@
</el-table-column> </el-table-column>
<el-table-column label="时间表规则" width="600"> <el-table-column label="时间表规则" width="600">
<template slot-scope="scope"> <template slot-scope="scope">
<ul class="rulesBox" v-for="(item,value) in scope.row.list" :key="value"> <ul
class="rulesBox"
v-for="(item, value) in scope.row.list"
:key="value"
>
<li><span>开始时间：</span>{{ item.startTime }}</li> <li><span>开始时间：</span>{{ item.startTime }}</li>
<li><span>结束时间：</span>{{ item.endTime }}</li> <li><span>结束时间：</span>{{ item.endTime }}</li>
<li> <li>
@ -231,6 +235,11 @@ export default {
span { span {
margin-right: 4px; margin-right: 4px;
} }
.el-tag--small {
height: 16px;
padding: 0 8px;
line-height: 16px;
}
} }
} }
} }

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

@ -83,7 +83,7 @@
<el-button type="primary" @click="handleShowGPS" <el-button type="primary" @click="handleShowGPS"
>获取GPS位置</el-button >获取GPS位置</el-button
> >
<el-button type="primary" @click="handleShowInfo"> <el-button type="primary" @click="handleShowErr">
装置信息</el-button 装置信息</el-button
> >
<el-dropdown <el-dropdown
@ -123,7 +123,6 @@
<!-- <deviceUpgrade ref="deviceupgrade_ref"></deviceUpgrade> --> <!-- <deviceUpgrade ref="deviceupgrade_ref"></deviceUpgrade> -->
<!-- 绘制图片 --> <!-- 绘制图片 -->
<pictureTags ref="pictureTags_ref"></pictureTags> <pictureTags ref="pictureTags_ref"></pictureTags>
<info-dialog ref="infodialog_ref"></info-dialog>
</div> </div>
</div> </div>
</template> </template>
@ -141,14 +140,12 @@ import carouselChart from "../components/carouselChart.vue";
import setschedule from "./components/setschedule.vue"; import setschedule from "./components/setschedule.vue";
import deviceUpgrade from "./components/deviceUpgrade.vue"; import deviceUpgrade from "./components/deviceUpgrade.vue";
import pictureTags from "./components/pictureTags.vue"; import pictureTags from "./components/pictureTags.vue";
import infoDialog from "./components/infoDialog.vue";
export default { export default {
components: { components: {
carouselChart, carouselChart,
setschedule, setschedule,
deviceUpgrade, deviceUpgrade,
pictureTags, pictureTags,
infoDialog,
}, },
data() { data() {
return { return {
@ -330,10 +327,6 @@ export default {
this.$refs.setschedule_ref.getSingleAccess(this.channelId); this.$refs.setschedule_ref.getSingleAccess(this.channelId);
this.$refs.setschedule_ref.deviceList(); this.$refs.setschedule_ref.deviceList();
}, },
//
handleShowInfo() {
this.$refs.infodialog_ref.display();
},
handleShowErr() { handleShowErr() {
this.$message({ this.$message({
message: "该功能暂未开发,敬请期待", message: "该功能暂未开发,敬请期待",
@ -409,17 +402,8 @@ export default {
}) })
.then((res) => { .then((res) => {
console.log(res); console.log(res);
this.$message({
message: "手动拍照请求成功",
type: "success",
});
}) })
.catch((err) => { .catch((err) => {
this.$message({
message: "手动拍照请求成失败",
type: "error",
});
console.log(err); //代码错误、请求失败捕获 console.log(err); //代码错误、请求失败捕获
}); });
}, },

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

@ -1,6 +1,6 @@
<template> <template>
<div class="realTimeSearch"> <div class="realTimeSearch">
<div class="searchMain"> <div class="searchMain" v-loading="loadingSearch">
<div class="searchBox"> <div class="searchBox">
<el-form :inline="true" :model="formdata" class="demo-form-inline"> <el-form :inline="true" :model="formdata" class="demo-form-inline">
<el-form-item label="电压名称"> <el-form-item label="电压名称">
@ -57,34 +57,41 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="pictureBox" v-loading="loading" v-if="picList.length !== 0"> <div class="pictureBox" v-loading="loading">
<el-card <div v-if="picList.length !== 0">
class="box-card imgList" <el-card
v-for="(item, index) in picList" class="box-card imgList"
:key="index" v-for="(item, index) in picList"
> :key="index"
<viewer class="bigpic"> >
<img :src="item.path" /> <viewer class="bigpic">
<!-- <el-image :src="item.path" lazy></el-image> --> <img :src="item.path + '!1280x720'" />
<div class="caption">
<p class="infoTop"> <!-- <el-image :src="item.path" lazy></el-image> -->
{{ item.channelId }}-{{ item.termId }}-{{ item.fileSize }}
</p> <div class="caption">
<p class="infoBottom"> <p class="infoTop">
拍照时间：{{ {{ item.linename }};{{ item.displayname }};{{
$moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") item.channnelname
}} }}
上传时间：{{ </p>
$moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss") <p class="infoBottom">
}} 拍照时间：{{
</p> $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss")
</div> }}
</viewer> 上传时间：{{
</el-card> $moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
</div> }}
<div class="pictureBox" v-else> </p>
<el-empty description="暂无图片"></el-empty> </div>
</viewer>
</el-card>
</div>
<div class="noPicBox" v-else>
<el-empty description="暂无图片"></el-empty>
</div>
</div> </div>
<div class="pageNation"> <div class="pageNation">
<el-pagination <el-pagination
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
@ -122,6 +129,7 @@ export default {
pageSize: 10, // 每页数量 pageSize: 10, // 每页数量
total: 0, //总条数 total: 0, //总条数
loading: false, loading: false,
loadingSearch: false,
signtype: 0, //0第一次查询 signtype: 0, //0第一次查询
}; };
}, },
@ -135,6 +143,7 @@ export default {
methods: { methods: {
//获取电压信息 //获取电压信息
getSearchdy() { getSearchdy() {
this.loadingSearch = true;
getSearchInfo({ type: 1 }) getSearchInfo({ type: 1 })
.then((res) => { .then((res) => {
this.dyOptions = res.data.list; this.dyOptions = res.data.list;
@ -175,6 +184,7 @@ export default {
this.getPicData(); this.getPicData();
} }
this.signtype = 1; this.signtype = 1;
this.loadingSearch = false;
}) })
.catch((err) => {}); .catch((err) => {});
}, },
@ -231,9 +241,7 @@ export default {
height: calc(100% - 86px); height: calc(100% - 86px);
overflow: auto; overflow: auto;
border: 1px solid #eee; border: 1px solid #eee;
.el-empty {
margin: auto;
}
.imgList { .imgList {
width: calc((100% - 104px) / 4); width: calc((100% - 104px) / 4);
position: relative; position: relative;
@ -243,6 +251,7 @@ export default {
padding: 4px; padding: 4px;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
height: fit-content;
.el-card__body { .el-card__body {
padding: 0px; padding: 0px;
} }
@ -273,6 +282,15 @@ export default {
} }
} }
} }
.noPicBox {
display: flex;
width: 100%;
height: calc(100% - 86px);
overflow: auto;
.el-empty {
margin: auto;
}
}
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save