|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="previewContain">
|
|
|
|
|
<div class="previewContain" v-loading="previewLoading">
|
|
|
|
|
<!-- {{ previewData }} -->
|
|
|
|
|
<!-- {{ previewData.name }}______{{ previewData.id }} -->
|
|
|
|
|
<div class="pictureBox">
|
|
|
|
|
@ -14,24 +14,41 @@
|
|
|
|
|
:key="'col-' + index"
|
|
|
|
|
v-if="index < colNum * i && index >= colNum * (i - 1)"
|
|
|
|
|
>
|
|
|
|
|
<div class="imgcloum">
|
|
|
|
|
<!-- <img
|
|
|
|
|
src="http://180.166.218.222:40080/photos/2023/07/17/03/XYIGQ10C221000003_1_FF_20230717134007.jpg!1366x768"
|
|
|
|
|
/> -->
|
|
|
|
|
<img :src="item.path + '!1366x768'" />
|
|
|
|
|
<div class="imgcloum" @click="handleTowerPic(item)">
|
|
|
|
|
<!-- 首先判断是否是图片mediatype=0,并且path不为空 展示图片 -->
|
|
|
|
|
<img
|
|
|
|
|
:src="item.path + '!1366x768'"
|
|
|
|
|
v-if="item.mediatype == 0 && item.path !== null"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 判断是否是视频mediatype=1,并且path不为空 展示图片 -->
|
|
|
|
|
<img
|
|
|
|
|
v-else-if="item.mediatype == 1 && item.thumb !== null"
|
|
|
|
|
:src="item.thumb + '!1366x768'"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 判断是否是视频mediatype=bull,并且path为空 展示暂无图片 -->
|
|
|
|
|
<img
|
|
|
|
|
v-else-if="item.mediatype == null"
|
|
|
|
|
src="../../assets/img/nodatapic2.jpg"
|
|
|
|
|
/>
|
|
|
|
|
<div class="picInfo">
|
|
|
|
|
<p>
|
|
|
|
|
{{ item.linename }}-{{ item.towername }}-（{{
|
|
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
|
|
? item.alias
|
|
|
|
|
: item.channnelname
|
|
|
|
|
}}）
|
|
|
|
|
</p>
|
|
|
|
|
<p class="timeinfo" v-if="item.mediatype !== null">
|
|
|
|
|
{{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
|
|
|
|
|
</p>
|
|
|
|
|
<p class="timeinfo" v-else>无抓拍</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="pageNation">
|
|
|
|
|
<!-- <el-pagination
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
:current-page="page"
|
|
|
|
|
layout=" prev, pager, next, jumper,total"
|
|
|
|
|
:total="total"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination> -->
|
|
|
|
|
<div class="pageNation" v-if="picList.length !== 0">
|
|
|
|
|
<el-pagination
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
:current-page="page"
|
|
|
|
|
@ -45,6 +62,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { getTowerAndPhotoList } from "@/utils/api/index";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
props: ["previewData"],
|
|
|
|
|
data() {
|
|
|
|
|
@ -58,22 +76,26 @@ export default {
|
|
|
|
|
picList: [], //图片列表数据
|
|
|
|
|
id: "",
|
|
|
|
|
type: "",
|
|
|
|
|
previewLoading: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted: function () {},
|
|
|
|
|
methods: {
|
|
|
|
|
//获取所有杆塔图片列表
|
|
|
|
|
getPicList(id, type) {
|
|
|
|
|
getPicList(id, type, page) {
|
|
|
|
|
this.id = id;
|
|
|
|
|
this.type = type;
|
|
|
|
|
this.page = page;
|
|
|
|
|
console.log(id, type);
|
|
|
|
|
this.previewLoading = true;
|
|
|
|
|
getTowerAndPhotoList({
|
|
|
|
|
id: id,
|
|
|
|
|
type: type,
|
|
|
|
|
pageindex: this.page,
|
|
|
|
|
pageindex: page,
|
|
|
|
|
pagesize: this.rowNum * this.colNum,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
this.previewLoading = false;
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.picList = res.data.list;
|
|
|
|
|
this.totalPage = res.data.totalpage;
|
|
|
|
|
@ -83,11 +105,16 @@ export default {
|
|
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleTowerPic(val) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.$parent.jumpTowerPic(val);
|
|
|
|
|
console.log("调用父组件方法");
|
|
|
|
|
},
|
|
|
|
|
//点击分页
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
this.page = val;
|
|
|
|
|
this.picList = [];
|
|
|
|
|
this.getPicList(this.id, this.type);
|
|
|
|
|
this.getPicList(this.id, this.type, this.page);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
@ -104,19 +131,44 @@ export default {
|
|
|
|
|
//background-color: aquamarine;
|
|
|
|
|
.el-col {
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding-right: 0.1%;
|
|
|
|
|
padding-left: 0.1%;
|
|
|
|
|
padding-top: 0.1%;
|
|
|
|
|
padding-bottom: 0.1%;
|
|
|
|
|
padding-right: 0.3%;
|
|
|
|
|
padding-left: 0.3%;
|
|
|
|
|
padding-top: 0.3%;
|
|
|
|
|
padding-bottom: 0.3%;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.imgcloum {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
// background: #f00;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: relative;
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
&:hover {
|
|
|
|
|
border: 1px solid #169e8c;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.picInfo {
|
|
|
|
|
position: absolute;
|
|
|
|
|
background: #169e8ca1;
|
|
|
|
|
color: #fff;
|
|
|
|
|
height: auto;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.timeinfo {
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
fanluyan
2 years ago
