<template>
|
<div class="scene">
|
<div class="nav">
|
<!-- <div
|
class="nav-item"
|
v-for="o in list"
|
:key="o.index"
|
@click="changeActive(o.index)"
|
>
|
<div class="outer">
|
<div
|
:class="['inner', active === o.index ? 'inner-active' : '']"
|
></div>
|
</div>
|
<div class="innet-title">{{ o.label }}</div>
|
</div> -->
|
<el-steps>
|
<el-step
|
title="到达现场"
|
@click.native="changeActive(1)"
|
:status="active == 1 ? 'finish' : 'process'"
|
icon="el-icon-place"
|
></el-step>
|
<el-step
|
title="调查取证"
|
@click.native="changeActive(2)"
|
:status="active == 2 ? 'finish' : 'process'"
|
icon="el-icon-camera"
|
></el-step>
|
<el-step
|
title="告知违法"
|
@click.native="changeActive(3)"
|
:status="active == 3 ? 'finish' : 'process'"
|
icon="el-icon-document"
|
></el-step>
|
</el-steps>
|
</div>
|
<div class="scene-item two-clumn" v-if="active === 1">
|
<el-descriptions style="width: 50%" :column="1">
|
<el-descriptions-item label="到达时间">{{
|
arrivalSituation.arrivalTime
|
}}</el-descriptions-item>
|
<el-descriptions-item label="到达地址">{{
|
arrivalSituation.arrivalAddress
|
}}</el-descriptions-item>
|
<el-descriptions-item label="现场情况说明">{{
|
arrivalSituation.situationExplain
|
}}</el-descriptions-item>
|
<el-descriptions-item label="信访回复说明">{{
|
arrivalSituation.replyExplain
|
}}</el-descriptions-item>
|
</el-descriptions>
|
<div class="div-right">
|
<div style="margin-bottom: 20px">现场情况照片:</div>
|
<div class="flex">
|
<template v-for="item in arrivalSituation.situationPic">
|
<img
|
class="img"
|
:src="item"
|
alt=""
|
v-if="investigation.pic"
|
/>
|
</template>
|
</div>
|
</div>
|
</div>
|
<div class="scene-item" v-if="active === 2">
|
<div class="two-clumn">
|
<el-descriptions style="width: 50%" :column="1">
|
<el-descriptions-item label="承办队员">{{
|
investigation.undertaker
|
}}</el-descriptions-item>
|
<el-descriptions-item label="协办队员">{{
|
investigation.assistant
|
}}</el-descriptions-item>
|
<el-descriptions-item label="时间">{{
|
investigation.investigationTime
|
}}</el-descriptions-item>
|
<el-descriptions-item label="地址">{{
|
investigation.address
|
}}</el-descriptions-item>
|
<el-descriptions-item label="案由">{{
|
investigation.caseAction
|
}}</el-descriptions-item>
|
<el-descriptions-item label="处置结果">{{
|
investigation.description
|
}}</el-descriptions-item>
|
</el-descriptions>
|
<div class="div-right">
|
<div style="margin-bottom: 20px">照片附件:</div>
|
<div class="flex">
|
<template v-for="item in investigation.pic">
|
<img
|
class="img"
|
:src="item"
|
alt=""
|
v-if="investigation.pic"
|
/>
|
</template>
|
</div>
|
</div>
|
</div>
|
<div class="inves-item">当事人信息</div>
|
<el-descriptions :column="2">
|
<el-descriptions-item label="姓名">{{
|
partyInfo.name
|
}}</el-descriptions-item>
|
<el-descriptions-item label="手机号码">{{
|
partyInfo.phoneCode
|
}}</el-descriptions-item>
|
<el-descriptions-item label="证件类型">{{
|
partyInfo.certificateTypeText
|
}}</el-descriptions-item>
|
<el-descriptions-item label="证件号码">{{
|
partyInfo.certificateCode
|
}}</el-descriptions-item>
|
<el-descriptions-item label="文化程度">{{
|
partyInfo.educationDegreeText
|
}}</el-descriptions-item>
|
<el-descriptions-item label="职业">{{
|
partyInfo.career
|
}}</el-descriptions-item>
|
<el-descriptions-item label="工作单位及职务">{{
|
partyInfo.work
|
}}</el-descriptions-item>
|
<el-descriptions-item label="民族">{{
|
partyInfo.nationText
|
}}</el-descriptions-item>
|
<el-descriptions-item label="籍贯">{{
|
partyInfo.nativePlace
|
}}</el-descriptions-item>
|
<el-descriptions-item label="现住址">{{
|
partyInfo.liveAddress
|
}}</el-descriptions-item>
|
<el-descriptions-item label="户籍所在地">{{
|
partyInfo.registerAddress
|
}}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div class="scene-item" v-if="active === 3">
|
<el-descriptions :column="2">
|
<el-descriptions-item label="类型">{{
|
type
|
}}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { FILE_ORIGINAL_PATH } from "@/utils";
|
export default {
|
data() {
|
return {
|
active: 1,
|
list: [
|
{
|
index: 1,
|
label: "到达现场情况",
|
},
|
{
|
index: 2,
|
label: "调查取证",
|
},
|
{
|
index: 3,
|
label: "告知违法",
|
},
|
],
|
mybaseCase: {},
|
arrivalSituation: {},
|
investigation: {},
|
writ: {},
|
partyInfo: {},
|
type: null,
|
};
|
},
|
props: ["currentSitVo", "baseCase"],
|
created() {
|
const {
|
currentSitVo: { arrivalSituation: mylist, investigation: invesList },
|
baseCase,
|
} = this;
|
if (invesList) {
|
if (invesList) {
|
this.investigation = invesList;
|
this.investigation.pic = [];
|
if (invesList.pic) {
|
invesList.pic.forEach((o) => {
|
o = o.replace("[", "").replace("]", "");
|
|
this.investigation.pic.push(
|
FILE_ORIGINAL_PATH + o
|
);
|
});
|
}
|
this.partyInfo = invesList.partyInfo;
|
}
|
}
|
if (mylist) {
|
this.arrivalSituation = mylist;
|
if (mylist.situationPic) {
|
if (typeof mylist.situationPic == "string") {
|
let urls = mylist.situationPic.split(",");
|
this.arrivalSituation.situationPic = [];
|
urls.forEach((o) => {
|
o = o.replace("[", "").replace("]", "");
|
this.arrivalSituation.situationPic.push(
|
FILE_ORIGINAL_PATH + o
|
);
|
});
|
}
|
|
} else {
|
this.arrivalSituation.situationPic = [];
|
}
|
}
|
this.mybaseCase = baseCase;
|
if (baseCase.violationsVO) {
|
this.type = baseCase.violationsVO.typeText;
|
} else {
|
this.type = baseCase.illegalBuilding.categoryText;
|
}
|
},
|
methods: {
|
changeActive(idx) {
|
this.active = idx;
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.scene {
|
margin-top: 20px;
|
line-height: 1;
|
.nav {
|
padding: 20px 100px;
|
// display: flex;
|
// justify-content: space-between;
|
|
.nav-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.outer {
|
width: 50px;
|
height: 50px;
|
border-radius: 50%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
// background-color: #0101ff;
|
}
|
|
.inner {
|
background-color: #0101ff;
|
border-radius: 50%;
|
width: 30px;
|
height: 30px;
|
}
|
|
.innet-title {
|
line-height: 20px;
|
padding-top: 20px;
|
}
|
|
.inner-active {
|
background-color: #fff;
|
}
|
}
|
|
.two-clumn {
|
display: flex;
|
}
|
|
.scene-item {
|
padding: 20px 0px;
|
|
::v-deep .el-input__inner {
|
// background-color: #09152f;
|
// border: 1px solid #17324c;
|
}
|
}
|
|
.img {
|
width: 120px;
|
height: 120px;
|
margin-left: 5px;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.inves-item {
|
font-size: 16px;
|
font-weight: 600;
|
margin-bottom: 10px;
|
}
|
.div-right {
|
margin-right: auto;
|
}
|
}
|
</style>
|
