ldb-safe-hh/pages/my-fillin/detail.vue

<template>
	<view class="my-fillin-container">
		<title-status />
		<h-navbar title="安全事件详情" />
		<view class="head-layout-wrap">
			<view class="head-layout">
				<view class="head-left">
					<view class="head-tag">{{ info.queryThing === 1 ? 'I' : 'II' }}级事件</view>
					<view class="head-title text-one">{{ info.thingTitle || '' }}</view>
					<view class="head-ss">违规所属：{{ info.violationType | violationTypeFormat }}</view>
				</view>
				<view class="head-right" v-if="info.status && info.status > 0">
					<u-image :src="`/static/images/${typeIcon[info.status - 1] || null}`" width="120rpx" height="120rpx" loadingIcon="" lazy-load />
				</view>
			</view>
		</view>
		<view class="info-btn">审核详情</view>
		<view class="content-tag-layout">
			<view :class="['tag-item', currentTag === 1 ? 'tag-item-active' : '']" @click="tagItemClick(1)">
				<view style="z-index: 2;position: relative;padding-bottom: 10rpx;">基本情况</view>
				<view class="tag-item-index-active" v-if="currentTag === 1"></view>
			</view>
			<view :class="['tag-item', currentTag === 2 ? 'tag-item-active' : '']" @click="tagItemClick(2)">
				<view style="z-index: 2;position: relative;padding-bottom: 10rpx;">行为人/单位信息</view>
				<view class="tag-item-index-active" v-if="currentTag === 2"></view>
			</view>
			<view :class="['tag-item', currentTag === 3 ? 'tag-item-active' : '']" @click="tagItemClick(3)">
				<view style="z-index: 2;position: relative;padding-bottom: 10rpx;">处理情况</view>
				<view class="tag-item-index-active" v-if="currentTag === 3"></view>
			</view>
		</view>
		<template v-if="currentTag === 1">
			<view class="content-card" v-if="currentTag11">
				<view class="card-item" v-for="(item, index) in currentTag11" :key="index">
					<view>{{ item.key }}</view>
					<view class="item-right-text">{{ item.value }}</view>
				</view>
			</view>
			<view class="content-card">
				<view class="card-item">
					<view><text style="font-weight: 600;">起因：</text>{{ info.thingCause || '' }}</view>
				</view>
				<view class="card-item">
					<view><text style="font-weight: 600;">后果：</text>{{ info.thingResult || '' }}</view>
				</view>
				<view v-if="info.photoList && info.photoList.length > 0" style="margin-top: 8rpx;display: flex;align-items: center;">
					<template v-for="(item, index) in info.photoList">
						<u-image :style="{marginLeft: index === 0 ? '0px': '24rpx'}" :src="item || null" width="140rpx" height="140rpx" loadingIcon="" lazy-load />
					</template>
				</view>
			</view>
			<view class="content-card">
				<view class="card-item">
					<view style="font-weight: 600;">简要情况：</view>
				</view>
				<view class="card-item">
					<view style="line-height: 44rpx;white-space: pre-wrap;width: 100%;" v-if="info.violationType === 1 || info.violationType === 3">{{ getFriefDetailsFormat() }}</view>
					<view style="line-height: 44rpx;white-space: pre-wrap;width: 100%;" v-if="info.violationType === 2">
						在检查（托运人） {{ info.behaviorDescribeVo.shipper }}  公司，经办人  {{ info.behaviorDescribeVo.operator }}  ，运单号  {{ info.behaviorDescribeVo.waybillNumber }}  ；{{ info.behaviorDescribeVo.beginningPlace }}  至  {{ info.behaviorDescribeVo.destination }}  的货物中，发现有可疑物品，经开包确认为  {{ info.behaviorDescribeVo.suspiciousItems }}  存在  {{ info.behaviorDescribeVo.suspectedIllegalPoints }}  的违法嫌疑，现将报警单、航空货运单（复印件）及查获的上述相关物品等提供公安机关调查处理。
					</view>
				</view>
				<view class="card-item" style="margin-top: 20rpx;">
					<view style="font-weight: 600;">简要经过描述：</view>
				</view>
				<view class="card-item">
					<view style="line-height: 44rpx;white-space: pre-wrap;width: 100%;">{{ info.thingsDesc }}</view>
				</view>
			</view>
		</template>
		<template v-if="currentTag === 2">
			<template v-if="info.violationType === 1 || info.violationType === 3">
				<view class="content-person">
					<view class="person-left">
						<u-image :src="info.behaviorPhoto || null" width="132rpx" height="176rpx" loadingIcon="" lazy-load />
					</view>
					<view class="person-right">
						<view>{{ info.behaviorName || '' }}</view>
						<view>{{ info.behaviorSex || '' }}</view>
						<view>{{ info.behavionPhone || '' }}</view>
						<view>【{{ info.behaviorDocumentType }}】{{ info.behaviorDocumentNumber | idCardFormat }}</view>
					</view>
				</view>
				<view class="content-card" v-if="currentTag21">
					<view class="card-item" v-for="(item, index) in currentTag21" :key="index">
						<view>{{ item.key }}</view>
						<view class="item-right-text">{{ item.value }}</view>
					</view>
				</view>
			</template>
			<template v-if="info.violationType === 2">
				<view class="content-card" v-for="(items, indexs) in currentTag22" :key="indexs">
					<view class="card-item" v-for="(item, index) in items" :key="index">
						<view>{{ item.key }}</view>
						<view class="item-right-text">{{ item.value }}</view>
					</view>
				</view>
			</template>
		</template>
		<template v-if="currentTag === 3">
			<!-- 值班领导、民警处置 -->
			<template v-if="streamInfo.linkId && streamInfo.linkId >= 1 && streamInfo.status > 1">
				<view class="content-card">
					<view class="card-item">
						<view>报警单编号</view>
						<view class="item-right-text">{{ disposeInfo.leaderTestVo.policeNumber }}</view>
					</view>
					<view class="card-item">
						<view>报警时间</view>
						<view class="item-right-text">{{ disposeInfo.leaderTestVo.policeTime | moment(2) }}</view>
					</view>
					<!-- 民警处置/已完成 -->
					<template v-if="streamInfo.linkId && streamInfo.linkId >= 2 && streamInfo.status === 4">
						<view class="card-item">
							<view>移交公安时间</view>
							<view class="item-right-text">{{ disposeInfo.policeTestVo.policeHandleTime | moment(2) }}</view>
						</view>
						<view class="card-item">
							<view>到达现场处置民警</view>
							<view class="item-right-text" style="display: flex;justify-content: flex-end;">
								<u-image :src="disposeInfo.policeTestVo.policeSign || null" mode="scaleToFill" width="228rpx" height="120rpx" loadingIcon="" lazy-load />
							</view>
						</view>
						<view class="card-item">
							<view>是否受案</view>
							<view class="item-right-text">{{ disposeInfo.policeTestVo.policeCheck ? '受案' : '不受案' }}</view>
						</view>
					</template>
				</view>
			</template>
			<!-- 公安局处置/已受案、已完成 -->
			<template v-if="streamInfo.linkId && streamInfo.linkId === 3 && streamInfo.status >= 3">
				<view class="content-card">
					<view class="card-item">
						<view style="font-weight: 600;">接警人：</view>
						<view>{{ disposeInfo.policeDisposeTestVo.policeName }} {{ disposeInfo.policeDisposeTestVo.policePhone }}</view>
					</view>
					<view class="card-item">
						<view style="font-weight: 600;">处警单位：</view>
						<view >{{ disposeInfo.policeDisposeTestVo.handlePolice }}</view>
					</view>
					<view class="card-item">
						<view style="font-weight: 600;">出动警力数：</view>
						<view>出动警力{{ disposeInfo.policeDisposeTestVo.policeNumber }}人</view>
					</view>
					<view class="card-item">
						<view style="font-weight: 600;">处罚情况：</view>
						<view>{{ disposeInfo.policeDisposeTestVo.punish }}</view>
					</view>
				</view>
			</template>
			<!-- 公安局处置/已完成 -->
			<template v-if="streamInfo.linkId && streamInfo.linkId === 3 && streamInfo.status >= 4">
				<view class="content-card">
					<view class="card-item" style="display: block;">
						<view style="font-weight: 600;">案由：</view>
						<view style="padding-left: 10rpx;color: #606266;line-height: 45rpx;">{{ disposeInfo.policeSecurityTestVo.actionReason }}</view>
					</view>
					<view class="card-item" style="display: block;">
						<view style="font-weight: 600;">是否严处：</view>
						<view style="padding-left: 10rpx;color: #606266;line-height: 45rpx;">{{ disposeInfo.policeSecurityTestVo.severely ? '严处' : '不严处' }}</view>
					</view>
					<view class="card-item" style="display: block;">
						<view style="font-weight: 600;">理由：</view>
						<view style="padding-left: 10rpx;color: #606266;line-height: 45rpx;">{{ disposeInfo.policeSecurityTestVo.reason }}</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	import { formatIdCard } from '@/utils/util.js'
	import { getInfoDispose, getInfoStreamList } from '@/network/module/my-fillin.api.js'
	import TitleStatus from '@/components/title-status/title-status'
	import HNavbar from '@/components/h-navbar/h-navbar.vue'
	
	export default {
		components: {
			TitleStatus,
			HNavbar
		},
		data() {
			return {
				typeIcon: ['progress1.png','progress2.png','progress3.png','progress4.png'],
				info: {},
				currentTag: 1,	// 1、基本情况； 2、行为人/单位信息； 3、处理情况
				streamInfo: {},
				disposeInfo: {}
			}
		},
		filters: {
			violationTypeFormat(value) {
				if(!value) {
					return ''
				}
				if(value === 1) {
					return '旅客'
				} else if(value === 2) {
					return '货代'
				} else if(value === 3) {
					return '工作人员'
				}
				return ''
			},
			idCardFormat(value) {
				return formatIdCard(value)
			}
		},
		computed: {
			// 基本情况1
			currentTag11() {
				if(!this.info || Object.keys(this.info) <= 0) {
					return null
				}
				
				const safeThingsPlace = this.info.safeThingsPlace ? JSON.parse(this.info.safeThingsPlace) : null
				let safeThingsPlaceStr = null
				if(safeThingsPlace && safeThingsPlace.length > 0) {
					safeThingsPlaceStr = '验证：'
					for(let i = 0; i < safeThingsPlace.length; i++) {
						safeThingsPlaceStr += `（${ safeThingsPlace[i].checked ? "√" : " " }）${ safeThingsPlace[i].value }${ safeThingsPlace[i].extra || '' } `
					}
				}
				
				let flight = ''
				if(this.info.flightNumber) {
					flight += this.info.flightNumber
				}
				if(this.info.seatNumber) {
					flight += (this.info.flightNumber ? '-' : '') + this.info.seatNumber
				}
				
				const obj = [
					{
						key: '事件类型',
						value: this.info.safeThingsTypeName || ''
					},
					{
						key: '查获时间',
						value: this.info.queryTime || ''
					},
					{
						key: '查获位置',
						value: safeThingsPlaceStr || ''
					},
					{
						key: '查获地点',
						value: this.info.safeThingsAddressName || ''
					},
					{
						key: '航班信息',
						value: flight
					},
					{
						key: '受害对象',
						value: this.info.victims || ''
					}
				]
				return obj
			},
			// 行为人/单位信息
			currentTag21() {
				if(!this.info || Object.keys(this.info) <= 0) {
					return null
				}
				const obj = [
					{
						key: '国籍',
						value: this.info.behaviorNationality || ''
					},
					{
						key: '籍贯',
						value: this.info.behaviorPlace || ''
					},
					{
						key: '民族',
						value: this.info.behaviorNation || ''
					},
					{
						key: '出生日期',
						value: this.info.behavionBirth || ''
					},
					{
						key: '婚姻状况',
						value: this.info.behavionMarriage ? this.getBehavionMarriageFormat(this.info.behavionMarriage) : ''
					},
					{
						key: '学历',
						value: this.info.behavionEducation || ''
					},
					{
						key: '职业',
						value: this.info.behavionWork || ''
					},
					{
						key: '工作单位',
						value: this.info.behavionCompany || ''
					},
					{
						key: '座机号',
						value: this.info.behavionLandline || ''
					},
					{
						key: '住址',
						value: this.info.behavionAddress || ''
					}
				]
				return obj
			},
			currentTag22() {
				if(!this.info || Object.keys(this.info) <= 0) {
					return null
				}
				const obj1 = [
					{
						key: '单位名称',
						value: this.info.goodsCompany || ''
					},
					{
						key: '工商备案号',
						value: this.info.goodsBusinessNumber || ''
					},
					{
						key: '注册地',
						value: this.info.goodsRegistrationPlace || ''
					},
					{
						key: '法人姓名',
						value: this.info.goodsLegalPerson || ''
					},
					{
						key: '法人证件号',
						value: this.info.goodsLegalCard || ''
					},
					{
						key: '货单号',
						value: this.info.goodsNumber || ''
					}
				]
				const obj2 = [
					{
						key: '发货人姓名',
						value: this.info.goodsSendName || ''
					},
					{
						key: '发货人电话',
						value: this.info.goodsSendPhone || ''
					},
					{
						key: '发货人地址',
						value: this.info.goodsSendAddress || ''
					}
				]
				const obj3 = [
					{
						key: '收货人姓名',
						value: this.info.goodsDeliveryName || ''
					},
					{
						key: '收货人电话',
						value: this.info.goodsDeliveryPhone || ''
					},
					{
						key: '收货人地址',
						value: this.info.goodsDeliveryAddress || ''
					}
				]
				return [obj1,obj2,obj3]
			}
		},
		watch: {
			currentType(newVal, oldVal) {
				this.getPageList(true)
			}
		},
		onLoad(options) {
			if(options && options.obj) {
				this.info = JSON.parse(decodeURIComponent(options.obj))
				this.getStreamInfo(this.info.safeThingsId)
			}
			// this.getPageList()
		},
		methods: {
			tagItemClick(index) {
				if(index === this.currentTag) {
					return
				}
				this.currentTag = index
			},
			// 旅客、工作人员的 简要情况
			getFriefDetailsFormat() {
				let json = this.$config.datas.briefDetailsJson
				if(this.info.briefDetailsList && this.info.briefDetailsList.length > 0) {
					json = json.map(item => {
						if(this.info.briefDetailsList.includes(item.key)) {
							item.checked = true
						} else {
							item.checked = false
						}
						return item
					})
				}
				if(this.info.briefDetailsOther) {
					json.find(item => item.hasOwnProperty('extra')).checked = true
				}
				
				let str = '经安全检查，被移交人存在下列第（ '
				const checkeds = json.filter(item => {
					return item.checked
				})
				if(checkeds && checkeds.length > 0) {
					str += checkeds.map(item => item.key).join('，')
				}
				str += '）种疑似违法行为：' + '\n'
				for(let i = 0; i < json.length; i++) {
					str += `${ json[i].value }${ json[i].extra || '' }（${ json[i].checked ? "√" : " " }）\n`
				}
				return str
			},
			// 婚姻状况 1-未婚 2-已婚 3-离异 4-丧偶
			getBehavionMarriageFormat(value) {
				if(value === 1) {
					return '未婚'
				} else if(value === 2) {
					return '已婚'
				} else if(value === 3) {
					return '离异'
				} else if(value === 4) {
					return '丧偶'
				} else {
					return ''
				}
			},
			// 获取安全事件处理流程
			async getStreamInfo(id) {
				if(!id) {
					return
				}
				const result = await getInfoStreamList(id)
				this.streamInfo = {
					// 1-值班领导审核环节 2-民警处置审核环节 3-公安局归档审核环节, 0-已申请，等待值班领导确认
					linkId: 0,
					// 审核状态 1-待确认 2-待受案 3-已受案 4-已完成 0-已申请
					status: 0
				}
				if(result && result.data && result.data.length > 0) {
					const stream = result.data[result.data.length-1]
					this.streamInfo.linkId = stream.linkId
					this.streamInfo.status = stream.status
					if(stream.linkId > 0) {
						this.getInfoDispose(id)
					}
				}
			},
			// 获取安全事件-处理情况
			async getInfoDispose(id) {
				if(!id) {
					return
				}
				const result = await getInfoDispose(id)
				this.disposeInfo = result.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-fillin-container {
		display: flex;
		flex-direction: column;
		.head-layout-wrap {
			width: 100%;
			height: 162rpx;
			position: relative;
			.head-layout {
				width: calc(100% - 80rpx);
				display: flex;
				align-items: center;
				padding: 10rpx 40rpx 16rpx;
				background-color: #3D7CF7;
				position: fixed;
				z-index: 999;
				.head-left {
					flex: auto;
					display: flex;
					flex-direction: column;
					.head-tag {
						width: 144rpx;
						background-color: #fff;
						border-radius: 26rpx;
						height: 42rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #276EFE;
						font-size: 28rpx;
						font-weight: 500;
					}
					.head-title {
						font-weight: 500;
						font-size: 36rpx;
						color: #fff;
						margin-top: 4rpx;
					}
					.head-ss {
						font-weight: 400;
						font-size: 28rpx;
						color: #fff;
						margin-top: 4rpx;
					}
				}
				.head-right {
					width: 128rpx;
					flex: none;
					display: flex;
					align-items: center;
					margin-left: 28rpx;
				}
			}
		}
		.info-btn {
			background-color: #F1F7FF;
			border-radius: 84rpx;
			width: 660rpx;
			height: 84rpx;
			margin-top: 24rpx;
			align-self: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 30rpx;
			color: #5F77B8;
		}
		.content-tag-layout {
			margin-top: 28rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			.tag-item {
				font-size: 32rpx;
				color: #8094C8;
				font-weight: 500;
				position: relative;
				.tag-item-index-active {
					position: relative;
					width: 100%;
					height: 26rpx;
					background-color: #BBD2FD;
					border-radius: 26rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 1;
				}
			}
			.tag-item-active {
				font-size: 36rpx;
				font-weight: 700;
				color: #276EFE;
			}
		}
		.content-card {
			align-self: center;
			width: calc(660rpx - 48rpx);
			background-color: #F6FAFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			padding: 24rpx;
			margin-top: 16rpx;
			&:last-of-type {
				margin-bottom: 24rpx;
			}
			.card-item {
				margin-top: 8rpx;
				display: flex;
				align-items: flex-start;
				font-size: 30rpx;
				color: #333333;
				font-weight: 400;
				view:nth-of-type(1) {
					flex: none;
				}
				view:nth-of-type(2) {
					color: #333333;
					text-align: left;
					padding-left: 0rpx;
				}
				.item-right-text {
					flex: auto;
					color: #5F77B8 !important;
					font-weight: 500;
					padding-left: 70rpx !important;
					text-align: right !important;
					line-height: 40rpx;
				}
			}
		}
		.content-person {
			align-self: center;
			width: calc(660rpx - 48rpx);
			background-color: #F6FAFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 24rpx;
			margin-top: 16rpx;
			.person-left {
				width: 132rpx;
				height: 176rpx;
				flex: none;
				margin-right: 24rpx;
			}
			.person-right {
				flex: auto;
				display: flex;
				flex-direction: column;
				view {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					margin-top: 2rpx;
					&:first-of-type {
						margin-top: 0;
					}
				}
			}
		}
	}
</style>