jiangyy
3 years ago
3 changed files with 495 additions and 87 deletions
@ -0,0 +1,395 @@ |
|||||
|
<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" |
||||
|
:singleList="yanPan.singleList" |
||||
|
:hasEvent="yanPan.hasEvent" |
||||
|
@user="toUserInfo" |
||||
|
@project="toProjectInfo" /> |
||||
|
<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, |
||||
|
projectList: data.list.map((subItem) => { |
||||
|
return { |
||||
|
title: 111, |
||||
|
status: subItem.address, |
||||
|
statusName: subItem.status == "pending" ? "待处理" : "结案", |
||||
|
eventId: '01', |
||||
|
}; |
||||
|
}), |
||||
|
} |
||||
|
|
||||
|
let aaa = { |
||||
|
singleList: [oneData] |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
this.yanPan = { ...this.yanPan, ...aaa }; |
||||
|
console.log(this.yanPan); |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
toUserInfo (item) { |
||||
|
this.$router.push({ |
||||
|
path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`, |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
toProjectInfo (item) { |
||||
|
console.log(item); |
||||
|
this.eventId = item.eventId; |
||||
|
// let data = iniData(); |
||||
|
// Object.keys(data).forEach((k) => { |
||||
|
// this[k] = data[k]; |
||||
|
// }); |
||||
|
this.getApiData(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/incident-info.scss" |
||||
|
scoped |
||||
|
></style> |
||||
Loading…
Reference in new issue