dai
4 years ago
6 changed files with 522 additions and 109 deletions
@ -0,0 +1,388 @@ |
|||
<template> |
|||
<div class="m-pop"> |
|||
<div class="wrap"> |
|||
<cpt-card> |
|||
<div class="title"> |
|||
<img src="@/assets/img/shuju/title-tip.png" /> |
|||
<span>详情</span> |
|||
</div> |
|||
|
|||
<div class="btn-close" |
|||
@click="handleClose"> |
|||
<img src="@/assets/img/shuju/people/close.png" /> |
|||
</div> |
|||
<div class="m-top"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span>所属网格：</span> |
|||
<span>{{ eventInfo.gridName }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>上报时间：</span> |
|||
<span>{{ eventInfo.reportTime }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span>事件内容：</span> |
|||
<span>{{ eventInfo.eventContent || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>音频：</span> |
|||
<!-- <span>{{ eventInfo.departmentNameList.join("、") }}</span> --> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>反映渠道：</span> |
|||
<span>{{ eventInfo.sourceTypeName || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>地址：</span> |
|||
<span>{{ eventInfo.address || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>报事人：</span> |
|||
<span>{{ eventInfo.reporterName || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>手机号：</span> |
|||
<span>{{ eventInfo.reporterMobile || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span>身份证号：</span> |
|||
<span>{{ eventInfo.reporterIdCard || "--" }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="m-process" |
|||
v-if="eventProcess.length > 0"> |
|||
<div class="process-title">处理进展</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:class="index === 0 ? 'z-on' : ''" |
|||
:key="item.processId" |
|||
v-for="(item, index) in eventProcess"> |
|||
<div class="item-row"> |
|||
<div class="name">{{ item.serviceShowName }}</div> |
|||
<div class="date"> |
|||
{{ item.processTime }} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="detail"> |
|||
<div class="detail-field">处理部门：</div> |
|||
<div class="detail-value">{{ item.wantServiceTime }}</div> |
|||
</div> |
|||
|
|||
<!-- <div class="detail" |
|||
v-if="item.processName != '转项目' && item.wantServiceTime"> |
|||
<div class="detail-field">说 明：</div> |
|||
<div class="detail-value"> |
|||
<fold-text :row="3">{{ item.wantServiceTime }}</fold-text> |
|||
</div> |
|||
</div> --> |
|||
|
|||
<div class="detail" |
|||
v-if="item.processName != '转项目' && item.internalRemark"> |
|||
<div class="detail-field">内部备注：</div> |
|||
<div class="detail-value"> |
|||
<fold-text :row="3">{{ item.internalRemark }}</fold-text> |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="attachement-list"> |
|||
<a :href="att.url" |
|||
target="_blank" |
|||
:key="att.url" |
|||
v-for="att in item.internalFile"> |
|||
<i class="el-icon-folder-opened"></i> |
|||
{{ att.name }} |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tabs"> |
|||
|
|||
<div class="tab" |
|||
:class="groupIndex % groupList.length == index ? 'z-on' : ''" |
|||
:key="'tab' + index" |
|||
@click="groupIndex = index" |
|||
v-for="(item, index) in groupList"> |
|||
{{ item.label }} |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="m-case"> |
|||
<div class="m-yanpan"> |
|||
<div v-if="eventId || true"> |
|||
<screen-loading v-if="!yanPan.loading">加载中</screen-loading> |
|||
<analyse v-else-if="yanPan.singleTitle" |
|||
:singleTitle="yanPan.singleTitle" |
|||
:userList="yanPan.dependents" |
|||
:userName="yanPan.reportorName" |
|||
:userTag="'(报事人)'" |
|||
:singleList="yanPan.singleList" |
|||
:hasEvent="yanPan.hasEvent" |
|||
@user="toUserInfo" /> |
|||
<div v-else |
|||
class="m-hint"> |
|||
<img src="@/assets/img/modules/visual/noData.png" |
|||
class="no-data-img" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</cpt-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptCard from "@/views/modules/visual/cpts/card"; |
|||
import screenLoading from "@/views/modules/visual/cpts/loading"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import cptTb from "@/views/modules/visual/cpts/tb"; |
|||
import lineChart from "@/views/modules/visual/cpts/line-chart"; |
|||
import analyse from "@/views/modules/visual/cpts/analyse"; |
|||
import foldText from "@/views/components/foldText"; |
|||
import dateFormat from "dai-js/tools/dateFormat"; |
|||
|
|||
function iniData () { |
|||
return { |
|||
|
|||
groupList: [{ label: "研判分析" }], |
|||
groupIndex: 0, |
|||
startGroupIndex: 0, |
|||
|
|||
eventProcess: [], |
|||
|
|||
eventInfo: { |
|||
gridId: "", |
|||
gridName: '', |
|||
reportTime: [], |
|||
eventContent: "", |
|||
imageUrls: [], |
|||
voiceUrls: [], |
|||
sourceType: '', |
|||
address: '', |
|||
reportUserId: "", |
|||
reporterName: "", |
|||
reporterMobile: "", |
|||
reporterIdCard: "", |
|||
|
|||
}, |
|||
|
|||
yanPan: { |
|||
loading: false, |
|||
reportorName: "", |
|||
|
|||
dependents: [], |
|||
categoryId: '', |
|||
projectData: [ |
|||
// { |
|||
// firstCategoryCode: '', |
|||
// firstCategoryName: '', |
|||
// projectList: [], |
|||
// } |
|||
], |
|||
hasEvent: false, |
|||
singleTitle: "", |
|||
|
|||
singleList: [], //楼院小组 |
|||
|
|||
}, |
|||
}; |
|||
} |
|||
|
|||
export default { |
|||
name: "demandInfo", |
|||
props: { |
|||
eventId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
|
|||
|
|||
}, |
|||
|
|||
components: { |
|||
cptCard, |
|||
cptTb, |
|||
analyse, |
|||
screenLoading, |
|||
lineChart, |
|||
foldText, |
|||
}, |
|||
|
|||
data: iniData, |
|||
|
|||
computed: {}, |
|||
|
|||
watch: { |
|||
eventId () { |
|||
let data = iniData(); |
|||
Object.keys(data).forEach((k) => { |
|||
this[k] = data[k]; |
|||
}); |
|||
this.getApiData(); |
|||
}, |
|||
// eventId () { |
|||
|
|||
// }, |
|||
}, |
|||
|
|||
mounted () { |
|||
console.log(this.eventId); |
|||
this.getApiData(); |
|||
}, |
|||
|
|||
methods: { |
|||
watchImg (src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
|
|||
handleClose () { |
|||
this.$emit("close"); |
|||
}, |
|||
|
|||
async getApiData () { |
|||
await this.getEventInfo(); |
|||
|
|||
this.getEventProcess(); |
|||
await this.getYanPan(); |
|||
await this.getYanPanList(); |
|||
this.yanPan.loading = true; |
|||
|
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getEventInfo () { |
|||
// const url = "/gov/project/icEvent/processAnalysis/eventDetail/"+ this.eventId; |
|||
const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/eventDetail/" + this.eventId; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
eventId: this.eventId, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.eventInfo = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getEventProcess () { |
|||
// const url = "/gov/project/icEvent/processAnalysis/processes/" + this.eventId; |
|||
const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/processes/" + this.eventId; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
eventId: this.eventId, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.eventProcess = data.map((item) => { |
|||
item.operateTime = dateFormat( |
|||
new Date(item.operateTime * 1000), |
|||
"yyyy-MM-dd hh:mm" |
|||
); |
|||
return item; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async getYanPan () { |
|||
// const url = "/gov/project/icEvent/processAnalysis/analysis/" + this.eventId; |
|||
const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/analysis/" + this.eventId; |
|||
|
|||
let param = {} |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
|
|||
if (code === 0) { |
|||
|
|||
data.dependents.forEach((item) => { |
|||
item.icResiUserId = item.id; |
|||
item.icUserName = item.name; |
|||
}); |
|||
|
|||
|
|||
//楼院小组、居民上报都存在是，研判分析显示两个分支 |
|||
this.yanPan.singleTitle = "楼院小组"; |
|||
this.yanPan.hasEvent = false; |
|||
|
|||
|
|||
this.yanPan = { ...this.yanPan, ...data }; |
|||
console.log(this.yanPan); |
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//加载组织数据 |
|||
async getYanPanList () { |
|||
// const url = "/gov/project/icEvent/processAnalysis/categoryEventList" ; |
|||
const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/categoryEventList"; |
|||
|
|||
let param = { |
|||
|
|||
categoryId: this.yanPan.categoryId, |
|||
pageNo: 0, |
|||
pageSize: 50 |
|||
} |
|||
const { data, code, msg } = await requestPost(url, param); |
|||
|
|||
this.yanPan.loading = true; |
|||
if (code === 0) { |
|||
let oneData = { |
|||
categoryCode: 111, |
|||
categoryName: 111, |
|||
showItem: true, |
|||
addressList: data.list.map((subItem) => { |
|||
return { |
|||
|
|||
address: subItem.address, |
|||
|
|||
}; |
|||
}), |
|||
projectList: [] |
|||
} |
|||
|
|||
let aaa = { |
|||
singleList: [oneData] |
|||
} |
|||
|
|||
|
|||
|
|||
this.yanPan = { ...this.yanPan, ...aaa }; |
|||
console.log(this.yanPan); |
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
toUserInfo (item) { |
|||
console.log(item) |
|||
this.$router.push({ |
|||
path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`, |
|||
}); |
|||
}, |
|||
|
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style |
|||
lang="scss" |
|||
src="@/assets/scss/modules/visual/incident-info.scss" |
|||
scoped |
|||
></style> |
|||
Loading…
Reference in new issue