<template>
|
<div class="sa-ins_rec_detail">
|
<v-header title="查看"></v-header>
|
<div class="add">
|
<span class="back-color" @click="$router.back()">
|
<i class="el-icon-arrow-left"></i>返回上一级
|
</span>
|
</div>
|
|
<div>
|
<h6>
|
<b>{{ details.communityName }}防火防汛安全隐患报告</b>
|
<span class="down" @click="down()">
|
<i class="el-icon-download"></i>
|
</span>
|
<!-- <el-button
|
type="primary"
|
size="small"
|
class="dy-margin"
|
v-print="'#printMe'"
|
>打印</el-button>-->
|
</h6>
|
<div class="head a">
|
<p class="l">巡查类别： {{ details.patrolType }}</p>
|
<p class="f">
|
<span>{{ details.checkTime }}</span>
|
<span>{{ wea }}</span>
|
</p>
|
<p class="r text-overflow-line1" :title="details.address">巡查地址： {{ details.address }}</p>
|
</div>
|
<div class="cont a" id="printMe">
|
<table class="border_default table_bgc_default">
|
<tr>
|
<td>隐患名称</td>
|
<td colspan="7">{{ details.dangerName }}</td>
|
</tr>
|
<tr>
|
<td>排查时间</td>
|
<td colspan="3">{{ details.checkTime }}</td>
|
<td colspan="2">排查人员</td>
|
<td colspan="2">{{ details.ppersonName }}</td>
|
</tr>
|
<tr>
|
<td>填报时间</td>
|
<td colspan="3">{{ details.createAt }}</td>
|
<td colspan="2">填报人员</td>
|
<td colspan="2">{{ details.createName }}</td>
|
</tr>
|
<tr>
|
<td>隐患地点</td>
|
<td colspan="3" :title="details.address">{{ details.address }}</td>
|
<td colspan="2">隐患编号</td>
|
<td colspan="2">{{ details.dangerNo }}</td>
|
</tr>
|
<tr>
|
<td colspan="3">主体部门、单位或个人全称</td>
|
<td colspan="5">{{ details.unitName }}</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="left">隐患简述</p>
|
<p class="left">{{ details.dagerDescription }}</p>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="left">已采取的措施</p>
|
<p class="left">{{ details.takeSteps }}</p>
|
<div class="images">
|
<img
|
:src="item || '../../static/image/noimage.jpg'"
|
alt
|
v-for="(item,index) in details.stepsPhoto"
|
:key="index"
|
@click="onScaleImage(item)"
|
/>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="h5">社区处理意见</p>
|
<p class="left">{{ details.communitySuggestion }}</p>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="h5">承办记录：</p>
|
<p class="left">{{ details.undertakeRecord }}</p>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="h5">街道安全管理人员意见</p>
|
<p class="left">{{ details.streetSuggestion }}</p>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="h5">领导意见</p>
|
<p class="left">{{ details.leaderSuggestion }}</p>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="h5">图文说明：</p>
|
<p class="left-l">
|
<span>{{ details.recordContent }}</span>
|
<span>{{ details.findRecord }}</span>
|
</p>
|
<div class="images">
|
<img
|
:src="item || '../../static/image/noimage.jpg'"
|
alt
|
v-for="(item,index) in details.recordPhoto"
|
:key="index"
|
@click="onScaleImage(item)"
|
/>
|
</div>
|
<p class="h5">备注：{{ details.remark }}</p>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="h1">整改记录</p>
|
</td>
|
</tr>
|
<tr>
|
<td>整改时间</td>
|
<td colspan="3">{{ details.rectifyTime }}</td>
|
<td colspan="2">整改人员</td>
|
<td colspan="2">{{ details.personName }}</td>
|
</tr>
|
<tr>
|
<td colspan="8">
|
<p class="h5">整改措施：</p>
|
<p class="left">{{ details.takeSteps }}</p>
|
<div class="images">
|
<img
|
:src="item || '../../static/image/noimage.jpg'"
|
alt
|
v-for="(item,index) in details.stepsPhoto"
|
:key="index"
|
@click="onScaleImage(item)"
|
/>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="2">填报人员</td>
|
<td colspan="6">
|
<p class="left">{{ details.createName }}</p>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
details: [],
|
weather: {},
|
};
|
},
|
|
computed: {
|
wea() {
|
let wea = this.weather;
|
if (!wea.weather) return "";
|
return (
|
wea.city +
|
'-' +
|
wea.weather +
|
wea.temperature +
|
"℃ " +
|
wea.winddirection +
|
"风" +
|
wea.windpower +
|
"级"
|
);
|
},
|
},
|
|
watch: {},
|
|
mounted() {
|
/**获取城市 天气 */
|
this.$api.mock.getIp((e) => {
|
if (e.adcode) {
|
this.$api.mock.getWeather(510400, (res) => {
|
this.weather = (res.lives || [])[0] || {};
|
});
|
}
|
});
|
|
this.id = this.$route.params.id;
|
this.init()
|
},
|
|
methods: {
|
init() {
|
this.$api.get("patrolRecord/detailDangerReport", { dangerReportId: this.id }, (e) => {
|
e.recordPhoto = !e.recordPhoto || e.recordPhoto == ' ' ? [] : e.recordPhoto.split(',');
|
e.stepsPhoto = !e.stepsPhoto || e.stepsPhoto == ' ' ? [] : e.stepsPhoto.split(',');
|
this.details = e;
|
});
|
},
|
|
// 查看大图
|
onScaleImage(v) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
title: '',
|
pic: v,
|
tool: true,
|
});
|
},
|
|
//下载模板
|
down() {
|
let arr = [];
|
arr.push(this.id)
|
this.$api.post("patrolRecord/export/DangerReport", arr, (e) => {
|
window.location.href = e;
|
});
|
},
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.add {
|
text-align: right;
|
padding-bottom: 20px;
|
.back-color {
|
color: #409eff;
|
cursor: pointer;
|
}
|
}
|
.dy-margin {
|
margin-left: 10px;
|
}
|
.down-icon {
|
cursor: pointer;
|
color: #409eff;
|
}
|
.sa-ins_rec_detail {
|
overflow-y: auto;
|
box-sizing: border-box;
|
padding-right: 50px;
|
.text-overflow-line1 {
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
word-break: break-all;
|
width: 340px;
|
}
|
h6 {
|
text-align: center;
|
margin-bottom: 25px;
|
span {
|
color: rgb(61, 189, 228);
|
font-size: 18px;
|
cursor: pointer;
|
margin-left: 10px;
|
transform: scale(1.2);
|
display: inline-block;
|
}
|
}
|
.a {
|
max-width: 940px;
|
margin: 0 auto 15px;
|
}
|
td {
|
padding: 5px 10px;
|
font-size: 13px;
|
white-space: normal;
|
}
|
.h1 {
|
font-weight: 650;
|
font-size: 18px;
|
}
|
.left {
|
text-align: left;
|
word-break: break-all;
|
white-space: pre-wrap;
|
line-height: 1.2;
|
padding: 5px 0;
|
& + * {
|
margin-top: 8px;
|
}
|
}
|
.left-l {
|
text-align: left;
|
text-indent: 30px;
|
span {
|
display: list-item;
|
line-height: 25px;
|
}
|
}
|
.h5 {
|
text-align: left;
|
font-weight: 650;
|
& + .left {
|
text-indent: 30px;
|
}
|
}
|
.images {
|
display: flex;
|
flex-wrap: wrap;
|
img {
|
display: block;
|
margin: 0 8px 5px 0;
|
width: 120px;
|
height: 90px;
|
max-height: 90px;
|
background-color: #eee;
|
}
|
}
|
.head,
|
.foot {
|
display: flex;
|
font-size: 14px;
|
.l,
|
.r {
|
min-width: 200px;
|
}
|
.r {
|
text-align: right;
|
}
|
.f {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
padding: 0 30px;
|
span {
|
text-align: center;
|
}
|
}
|
}
|
}
|
</style>
|
