407 lines
14 KiB
Vue
407 lines
14 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="detailBox">
|
||
<view class="pageTitle">{{ detailObj.title || "" }}</view>
|
||
|
||
<view class="userDetailBox" :style="{ marginTop: pageType === 1 ? '' : '0' }">
|
||
<view class="userDetailBoxTop">
|
||
<view class="userDetailBoxService">{{ detailObj.saName || "" }}</view>
|
||
|
||
<view class="userDetailBoxServiceRight">
|
||
<view class="userDetailBoxStatus" :style="{
|
||
background: detailObj.state === '完成' ? '#ecbd44' : detailObj.state === '处理中' ? '#d3d3d3' : '',
|
||
color: detailObj.state === '完成' ? '#fff' : detailObj.state === '处理中' ? '#fff' : ''
|
||
}">
|
||
{{ detailObj.state }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="eventsItem" style="margin-top: 24rpx;">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||
<view class="eventsHaveLabel">联系人：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ detailObj.userName || detailObj.createUserName || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||
<view class="eventsHaveLabel">联系电话：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ detailObj.phone || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem" style="margin-bottom: 0;">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
|
||
<view class="eventsHaveLabel">{{ pageType === 1 ? '处理用时：' : pageType === 2 ? '创建时间' : '' }}
|
||
</view>
|
||
</view>
|
||
<view class="eventsValue">{{ detailObj.handlingTime || detailObj.createTime || "" }}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pageText" v-if="pageType === 1">应急事件</view>
|
||
<view class="pageText" v-if="pageType === 2">日常问题</view>
|
||
|
||
<view class="detailBox" v-if="pageType === 1">
|
||
<view class="userDetailBox noBoxShow">
|
||
<!-- <view class="eventsItem">
|
||
<view class="eventsLabel">标题：</view>
|
||
<view class="eventsValue">{{ detailObj.title || "" }}</view>
|
||
</view> -->
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件片区：</view>
|
||
<view class="eventsValue">{{ detailObj.belongArea || "" }}</view>
|
||
</view>
|
||
<!-- <view class="eventsItem">
|
||
<view class="eventsLabel">事件服务区：</view>
|
||
<view class="eventsValue">{{ detailObj.service || "" }}</view>
|
||
</view>
|
||
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">死亡人数：</view>
|
||
<view class="eventsValue">{{ detailObj.diePerson || "" }}</view>
|
||
</view> -->
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件概况：</view>
|
||
<view class="eventsValue">{{ detailObj.sceneOverview || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件损失情况：</view>
|
||
<view class="eventsValue">{{ detailObj.lossSituation || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">处理结果：</view>
|
||
<view class="eventsValue">{{ detailObj.handlingResult || "" }}</view>
|
||
</view>
|
||
<view class="eventsItemPic">
|
||
<view class="eventsLabel">事件现场照片：</view>
|
||
<view class="eventsPic" v-if="detailObj.imgUp && detailObj.imgUp.length > 0">
|
||
<view class="eventsPicItem" v-for="(item, index) in detailObj.imgUp" :key="index"
|
||
@click="showImg(detailObj.imgUp, index)">
|
||
<image class="eventsPicImg"
|
||
:src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
|
||
<view class="userDetailBox noBoxShow">
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件片区：</view>
|
||
<view class="eventsValue">{{ detailObj.belongArea || "" }}</view>
|
||
</view>
|
||
<!-- <view class="eventsItem">
|
||
<view class="eventsLabel">事件服务区：</view>
|
||
<view class="eventsValue">{{ detailObj.service || "" }}</view>
|
||
</view> -->
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">类型：</view>
|
||
<view class="eventsValue">{{ detailObj.type || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem" style="margin-bottom: 0;">
|
||
<view class="eventsLabel">问题描述：</view>
|
||
<view class="eventsValue">{{ detailObj.describe || "" }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="pageText" v-if="pageType === 2">协调处理情况</view>
|
||
|
||
<view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">协调处理结果：</view>
|
||
<view class="eventsValue">{{ detailObj.coorResult || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">办理人：</view>
|
||
<view class="eventsValue">{{ detailObj.coorUserName || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem" style="margin-bottom: 0;">
|
||
<view class="eventsLabel">办理完成时间：</view>
|
||
<view class="eventsValue">{{ detailObj.coorEndTime || "" }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pageText" v-if="pageType === 2">经营公司协调处理情况</view>
|
||
|
||
<view class="detailBox" v-if="pageType === 2" style="padding-bottom: 24rpx;">
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">协调处理结果：</view>
|
||
<view class="eventsPic">{{ detailObj.companyResult || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">办理人：</view>
|
||
<view class="eventsValue">{{ detailObj.companyUserName || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">办理完成时间：</view>
|
||
<view class="eventsValue">{{ detailObj.companyEndTime || "" }}</view>
|
||
</view>
|
||
<view class="eventsItemPic" style="margin-bottom: 0;">
|
||
<view class="eventsLabel">事件现场照片：</view>
|
||
<view class="eventsPic" v-if="detailObj.fileUp && detailObj.fileUp.length > 0">
|
||
<view class="eventsPicItem" v-for="(item, index) in detailObj.fileUp" :key="index"
|
||
@click="showImg(detailObj.fileUp, index)">
|
||
<image class="eventsPicImg"
|
||
:src="'https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID" />
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
detailObj: null,
|
||
pageType: 0
|
||
}
|
||
},
|
||
onLoad(query) {
|
||
if (query.detail) {
|
||
this.detailObj = JSON.parse(query.detail)
|
||
}
|
||
console.log('this.detailObjthis.detailObjthis.detailObjthis.detailObj', this.detailObj);
|
||
|
||
if (query.type) {
|
||
this.pageType = Number(query.type)
|
||
}
|
||
|
||
if (this.pageType === 1) {
|
||
uni.setNavigationBarTitle({
|
||
title: '应急事件'
|
||
})
|
||
} else {
|
||
uni.setNavigationBarTitle({
|
||
title: '日常问题'
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
// 图片预览
|
||
showImg(list, index) {
|
||
console.log('list', list);
|
||
console.log('indexindex', index);
|
||
let urls = []
|
||
list.forEach((item) => {
|
||
urls.push('https://fwqznxj.yciccloud.com:9081/fileDownloadApi/bsys/document/docDownloadAction?fileId=' + item.fileID)
|
||
})
|
||
|
||
uni.previewImage({
|
||
urls: urls,
|
||
current: urls[index],
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.main {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #f0f2f3;
|
||
box-sizing: border-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
/* 兼容旧版 iOS */
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
/* 兼容新版 */
|
||
.detailBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 24rpx 48rpx;
|
||
background-color: #fff;
|
||
|
||
.pageTitle {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.userDetailBox {
|
||
width: calc(100% - 32rpx);
|
||
margin-top: 24rpx;
|
||
margin-left: 16rpx;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
box-sizing: border-box;
|
||
padding: 16rpx 24rpx;
|
||
|
||
.userDetailBoxTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.userDetailBoxService {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.userDetailBoxStatus {
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 32rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.eventsItem {
|
||
width: 100%;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.eventsHaveImgLabel {
|
||
display: flex;
|
||
width: 200rpx;
|
||
align-items: center;
|
||
|
||
.eventsHaveImg {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 16rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.eventsHaveLabel {
|
||
width: 154rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.eventsLabel {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.eventsValue {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.eventsItemPic {
|
||
width: 100%;
|
||
|
||
.eventsLabel {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.eventsPic {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
|
||
.eventsPicItem {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-right: 8rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.eventsPicImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.noBoxShow {
|
||
box-shadow: none;
|
||
margin-top: 0;
|
||
padding: 0 24rpx;
|
||
margin-left: 0;
|
||
}
|
||
|
||
|
||
.eventsItem {
|
||
width: 100%;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.eventsHaveImgLabel {
|
||
display: flex;
|
||
width: 200rpx;
|
||
align-items: center;
|
||
|
||
.eventsHaveImg {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 16rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.eventsHaveLabel {
|
||
width: 154rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.eventsLabel {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.eventsValue {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.eventsItemPic {
|
||
width: 100%;
|
||
|
||
.eventsLabel {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.eventsPic {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
|
||
.eventsPicItem {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-right: 8rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.eventsPicImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pageText {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 40rpx;
|
||
font-size: 24rpx;
|
||
color: #8d8e8e;
|
||
}
|
||
}
|
||
</style> |