|
|
<template>
|
|
|
<el-dialog
|
|
|
class="photoDialog"
|
|
|
title="图片历史数据"
|
|
|
:visible.sync="isShow"
|
|
|
:close-on-click-modal="false"
|
|
|
@close="hide"
|
|
|
width="100%"
|
|
|
>
|
|
|
<div class="headInfo">
|
|
|
<span class="zzid">装置编号：{{ rowData.cmdid }}</span>
|
|
|
<span class="pictotal">图片总数：{{ total }}</span>
|
|
|
<el-radio-group v-model="radio" @change="handleRadioChange">
|
|
|
<el-radio :label="-1">全部</el-radio>
|
|
|
<el-radio :label="1">通道1</el-radio>
|
|
|
<el-radio :label="2">通道2</el-radio>
|
|
|
<el-radio :label="3">通道3</el-radio>
|
|
|
<el-radio :label="4">通道4</el-radio>
|
|
|
<el-radio :label="5">通道5</el-radio>
|
|
|
<el-radio :label="6">通道6</el-radio>
|
|
|
<el-radio :label="7">通道7</el-radio>
|
|
|
<el-radio :label="8">通道8</el-radio>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
<div class="ipContain">
|
|
|
<el-table
|
|
|
v-loading="picloading"
|
|
|
ref="multipleTable"
|
|
|
:data="picListData"
|
|
|
stripe
|
|
|
tooltip-effect="dark"
|
|
|
style="width: 100%"
|
|
|
height="calc(100% - 0px)"
|
|
|
border
|
|
|
>
|
|
|
<template slot="empty">
|
|
|
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
|
|
</template>
|
|
|
<el-table-column label="序号" width="50px">
|
|
|
<template slot-scope="scope">
|
|
|
{{ (page - 1) * pageSize + scope.$index + 1 }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<!-- <el-table-column label="照片Id" prop="picid"> </el-table-column> -->
|
|
|
<el-table-column label="通道号" prop="channnelname"> </el-table-column>
|
|
|
<el-table-column label="预置位" prop="presetId"> </el-table-column>
|
|
|
<el-table-column label="收到时间" prop="recvTime"> </el-table-column>
|
|
|
<el-table-column label="拍照时间" prop="photoTime"> </el-table-column>
|
|
|
<el-table-column label="类型" prop="mediaType">
|
|
|
<template slot-scope="scope">
|
|
|
{{ scope.row.mediaType == 0 ? "图片" : "视频" }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="照片" prop="path">
|
|
|
<template slot-scope="scope">
|
|
|
<a :href="scope.row.path" target="_blank">
|
|
|
<el-image
|
|
|
style="width: 120px; height: 80px; cursor: pointer"
|
|
|
:src="scope.row.path"
|
|
|
>
|
|
|
</el-image>
|
|
|
{{ scope.row.picid }}
|
|
|
</a>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="pageNation">
|
|
|
<el-pagination
|
|
|
@current-change="handleCurrentChange"
|
|
|
@size-change="handleSizeChange"
|
|
|
:current-page="page"
|
|
|
:page-size="pageSize"
|
|
|
layout="sizes, prev, pager, next, jumper,total"
|
|
|
:total="total"
|
|
|
background
|
|
|
>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="isShow = false">关 闭</el-button>
|
|
|
</div> -->
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { getphotoApi } from "@/utils/api/reportApi";
|
|
|
|
|
|
export default {
|
|
|
props: {},
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
rowData: "",
|
|
|
paramsData: "",
|
|
|
picListData: [],
|
|
|
picloading: false,
|
|
|
radio: "-1",
|
|
|
page: 1, // 当前页数
|
|
|
pageSize: 20, // 每页数量
|
|
|
total: 0, //总条数
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {
|
|
|
// 保存确定操作
|
|
|
display(row, params) {
|
|
|
this.isShow = true;
|
|
|
this.rowData = row;
|
|
|
this.paramsData = params; //获取开始时间结束时间和通道
|
|
|
this.radio = this.paramsData.channelid;
|
|
|
console.log(this.radio);
|
|
|
console.log(row, params);
|
|
|
//localStorage.setItem("picflag", this.isShow);
|
|
|
this.getPhotoList();
|
|
|
},
|
|
|
hide() {
|
|
|
this.isShow = false;
|
|
|
// console.log(this.isShow);
|
|
|
// localStorage.setItem("picflag", this.isShow);
|
|
|
},
|
|
|
getPhotoList() {
|
|
|
this.picloading = true;
|
|
|
setTimeout(() => {
|
|
|
getphotoApi({
|
|
|
dyid: this.rowData.dyId,
|
|
|
lineid: this.rowData.lineId,
|
|
|
towerid: this.rowData.towerId,
|
|
|
channelid: this.radio,
|
|
|
termid: this.rowData.id,
|
|
|
starttime: this.paramsData.starttime,
|
|
|
endtime: this.paramsData.endtime,
|
|
|
pageindex: this.page,
|
|
|
pagesize: this.pageSize,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.picListData = res.data.list;
|
|
|
this.total = res.data.total;
|
|
|
this.picloading = false;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.picloading = false;
|
|
|
console.log(err);
|
|
|
});
|
|
|
}, 100);
|
|
|
},
|
|
|
//点击分页
|
|
|
handleCurrentChange(val) {
|
|
|
this.page = val;
|
|
|
this.getPhotoList();
|
|
|
},
|
|
|
//每页条数
|
|
|
handleSizeChange(val) {
|
|
|
this.pageSize = val;
|
|
|
this.getPhotoList();
|
|
|
},
|
|
|
handleRadioChange(value) {
|
|
|
// 当选中项改变时，value参数会是新的选中项的label值
|
|
|
console.log("当前选中的label是:", value);
|
|
|
// 在这里你可以根据value做相应的处理
|
|
|
this.radio = value;
|
|
|
this.getPhotoList();
|
|
|
},
|
|
|
},
|
|
|
|
|
|
created() {},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.photoDialog {
|
|
|
.el-dialog {
|
|
|
height: 100%;
|
|
|
margin: 0px;
|
|
|
.el-table {
|
|
|
.cell {
|
|
|
text-align: center;
|
|
|
vertical-align: middle; /* 如果需要垂直居中 */
|
|
|
}
|
|
|
}
|
|
|
.headInfo {
|
|
|
position: absolute;
|
|
|
top: 22px;
|
|
|
left: 154px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
.zzid {
|
|
|
color: #333;
|
|
|
}
|
|
|
.pictotal {
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
.el-radio-group {
|
|
|
margin-top: 4px;
|
|
|
margin-left: 24px;
|
|
|
}
|
|
|
}
|
|
|
.el-dialog__body {
|
|
|
height: calc(100% - 70px);
|
|
|
padding: 8px;
|
|
|
}
|
|
|
.ipContain {
|
|
|
height: calc(100% - 40px);
|
|
|
.el-table {
|
|
|
color: #000;
|
|
|
thead {
|
|
|
color: #000;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
th.el-table__cell {
|
|
|
background: #dcdcdc !important;
|
|
|
}
|
|
|
td.el-table__cell,
|
|
|
th.el-table__cell.is-leaf {
|
|
|
border-bottom: 1px solid #dcdcdc;
|
|
|
}
|
|
|
.el-table__cell {
|
|
|
border-right: 1px solid #dcdcdc;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-dialog__headerbtn {
|
|
|
top: 18px;
|
|
|
.el-dialog__close {
|
|
|
font-size: 26px;
|
|
|
&:hover {
|
|
|
background: #e2e2e2;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|