SzplatformAPP/views/jiashicangshenhe/jiashicangshenhe.vue

<template>
	<view class="indexcontent">
		<u-navbar :leftText="'驾驶舱'+navbarValue+'审核'" :safeAreaInsetTop="false" @rightClick="rightClick" :autoBack="true"
			:placeholder="true" leftIconColor="#ffffff">
		</u-navbar>

		<view class="indexcontent-box">
			<view class="indexcontent-bottom">
				<view class="indexcontentbttom-item">
					<view class="indexcontentbttom-item-top">
						<view class="indexcontentbttom-item-text">
							{{Objitem.title}}
						</view>
						<view class="indexcontentbttom-item-top-icon" v-if="tabscurrentShow || (!tabscurrentShow && Objitem.titleBefore)" @click="biaotishow">
							<u-icon name="edit-pen" size="18" color="#4379D6" class="icon"></u-icon>
							<view class="">
								{{tabscurrentShow ? '修改标题' : '查看原标题' }}
							</view>
						</view>
					</view>
					<view class="indexcontentbttom-item-bottom">
						<view class="indexcontentbttom-item-bottom-left">
							预警时间:
						</view>
						<view class="indexcontentbttom-item-bottom-rigth">
							{{Objitem.eventTime}}
						</view>
					</view>
					<view class="indexcontentbttom-item-bottom">
						<view class="indexcontentbttom-item-bottom-left">
							预警因素:
						</view>
						<view class="indexcontentbttom-item-bottom-rigth">
							{{Objitem.warnFactor}}
						</view>
					</view>
					<view class="indexcontentbttom-item-bottom">
						<view class="indexcontentbttom-item-bottom-left">
							预警类别:
						</view>
						<view class="indexcontentbttom-item-bottom-rigth leibie">
							{{Objitem.msgTypeName}}
						</view>
					</view>
					<view class="" v-show="Objitem.msgTypeName=='紧急事件'">

						<view class="indexcontentbttom-item-bottom">
							<view class="indexcontentbttom-item-bottom-left">
								事件来源:
							</view>
							<view class="indexcontentbttom-item-bottom-rigth ">
								{{Objitem.scenceName}}
							</view>
						</view>
						<view class="indexcontentbttom-item-bottom">
							<view class="indexcontentbttom-item-bottom-left">
								案件类型:
							</view>
							<view class="indexcontentbttom-item-bottom-rigth ">
								{{ObjitemTow.caseType}}
							</view>
						</view>
						<view class="indexcontentbttom-item-bottom">
							<view class="indexcontentbttom-item-bottom-left">
								位置描述:
							</view>
							<view class="indexcontentbttom-item-bottom-rigth ">
								{{ObjitemTow.caseAddress}}
							</view>
						</view>
						<view class="indexcontentbttom-item-bottom">
							<view class="indexcontentbttom-item-bottom-left">
								诉求内容:
							</view>
							<view class="indexcontentbttom-item-bottom-rigth ">
								{{ObjitemTow.caseContent}}
							</view>
						</view>
					</view>

					<view class="" v-show="Objitem.msgTypeName!='紧急事件'">
						<view class="indexcontentbttom-item-bottom">
							<view class="indexcontentbttom-item-bottom-left">
								事件数量:
							</view>
							<view class="indexcontentbttom-item-bottom-rigth">
								{{listtotle}}
							</view>
						</view>
						<view class="indexcontentbttom-item-bottom" v-show="tabscurrentShow ">
							<view class="indexcontentbttom-item-bottom-left">
								审核数量:
							</view>
							<view class="indexcontentbttom-item-bottom-rigth">
								{{$store.state.tijiaoList.shijianList.length}}
							</view>
						</view>
						<!-- <view class="indexcontentbttom-item-bottom-bottom" @click="nextblack">
							事件逐条审核{{"("+listtotle+")"}}条
						</view> -->
					</view>

				</view>
			</view>

		</view>
		<view class="LieBIaoList" :class="!tabscurrentShow ? 'lieBiaoListTwo':''">
			<LieBIaoList ref="LieBIaoListis" ></LieBIaoList>
		</view>
		<view class="dibuaBtn" v-show="tabscurrentShow">
			<view class="dibuaBtn-lanse" @click="Chongxinshangbao(1)">
				重新上报驾驶舱
			</view>
			<view class="dibuaBtn-hongse" @click="Chongxinshangbao(2)">
				退回算法重训练
			</view>
		</view>
		<!-- 修改标题 -->
		<u-modal :show="popupshow" :title="tabscurrentShow?'修改标题':'查看标题'" showCancelButton @cancel="close"
			@confirm="confirm">
			<view class="slot-content">
				<view class="popup-box" v-show="tabscurrentShow">
					<u--textarea v-model="textareavalue2" placeholder="请输入内容" count
						class="popup-box-textarea"></u--textarea>
				</view>
				<view class="lishi-box" v-show="!tabscurrentShow">
					<view class="">
						当前标题：
					</view>
					<view class="lishi-box-jiacu">
						{{Objitem.title}}
					</view>
					<view class="" v-show="Objitem.titleBefore">
						历史标题：
					</view>
					<view class="lishi-box-jiacu" v-show="Objitem.titleBefore">
						{{Objitem.titleBefore}}
					</view>
				</view>
			</view>
		</u-modal>
		<!-- 	<u-popup :show="popupshow" @close="close" @open="open" round="10" :closeable="true" mode="center">
			
		</u-popup> -->
		<!-- 查看标题 -->
	</view>
</template>

<script>
	import {
		massEventsinfo,
		getByInnerEventId,
		massEventsedit,
		eventChangeIsReport
	} from '@/api/system/ApiList.js'
	export default {
		data() {
			return {
				navbarValue: "群体事件",
				tabscurrent: 0,
				popupshow: false,
				textareavalue2: "",
				innerEventId: "",
				Objitem: {},
				ObjitemTow: {},
				listtotle: ""

			}
		},
		computed: {
			tabscurrentShow() {
				return this.tabscurrent == 0
			},
		},
		methods: {
			// 跳转
			nextblack(item) {
				uni.navigateTo({
					url: `/views/yemianxianqging/yemianxianqging?innerEventId=${this.innerEventId}&tabscurrent=${this.tabscurrent}&navbarValue=${this.navbarValue}`
				})
			},
			// 查看修改标题
			biaotishow(item) {
				this.popupshow = true
				this.textareavalue2 = this.Objitem.title
			},
			// 弹出层确定
			confirm() {
				if (this.tabscurrentShow) {
					if (this.textareavalue2 != "" && this.textareavalue2 != this.Objitem.title) {
						this.Objitem.title = this.textareavalue2
						massEventsedit(this.Objitem).then(res => {
							if (res.code == 200) {
								this.getByInnerEventIdmy()
								uni.showToast({
									title: '修改成功',
									icon: 'none',
									duration: 1000
								});
							}
						})

					} else {
						let title = ""
						if (this.textareavalue2 == "") {
							title = "标题不能为空"
						}
						if (this.textareavalue2 == this.Objitem.title) {
							title = "请修改标题后提交"

						}
						uni.showToast({
							title,
							icon: 'none',
							duration: 1000
						});

					}
					this.popupshow = false
				} else {
					//查看
					this.popupshow = false
				}
			},
			// 打开弹窗
			close() {
				this.popupshow = false
				this.textareavalue2 = ""
				// console.log('close');
			},
			// 获取个数
			getList() {
				massEventsinfo(this.innerEventId).then(res => {
					this.listtotle = res.data.total
					this.ObjitemTow = res.data.records[0]
				})
				this.$nextTick(res=>{
					let obj ={
						tabscurrent:this.tabscurrent,
						innerEventId:this.innerEventId
					}
					this.$refs.LieBIaoListis.open(obj)
					// console.log(this.$refs.LieBIaoListis);
				})
				
			},
			// 获取详情
			getByInnerEventIdmy() {
				getByInnerEventId(this.innerEventId).then(res => {
					if (res.code == 200) {
						this.Objitem = res.data
					}
					
				})
			},
			// 退回或者提交
			Chongxinshangbao(isReport) {
				if (this.Objitem.msgTypeName == "紧急事件") {
					let mykey = this.ObjitemTow.caseSerial
					this.$store.state.tijiaoList.shijianList = [mykey]
				}
				if (this.$store.state.tijiaoList.shijianList.length == 0) {
					uni.showToast({
						title: "请选择工单上报!",
						icon: 'none',
						duration: 1000
					});
					return
				}


				let obj = {
					caseSerial: this.$store.state.tijiaoList.shijianList,
					innerEventId: this.innerEventId,
					isReport,
					msgType: this.Objitem.msgType
				}
				eventChangeIsReport(obj).then(res => {
					if (res.code == 200) {
						let title = ""
						if (isReport == 1) {
							title = "重新上报驾驶舱成功"
						}
						if (isReport == 2) {
							title = "退回算法重训练成功"

						}
						uni.showToast({
							title,
							icon: 'none',
							duration: 1000
						});
						this.$store.dispatch("Deletestate")
						setTimeout(function() {
							uni.navigateBack({
								delta: 2
							});
						}, 1000);
					}
				})
			}
		},


		onLoad: function(opcent) {
			//navbarValue 区分事件类型
			//tabscurrent 0已退回 1已提及 2重训练
			this.navbarValue = opcent.navbarValue
			this.tabscurrent = opcent.tabscurrent
			this.innerEventId = opcent.innerEventId
			this.getByInnerEventIdmy()
			this.getList()
			
		},
		onShow() {
			this.getByInnerEventIdmy()
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.indexcontent {
		width: 100%;
		height: 100%;

		.indexcontent-box {
			.indexcontent-bottom {
				width: 100%;
				padding: 20rpx;
				border-radius: 10rpx;

				.indexcontentbttom-item {
					padding: 25rpx;
					width: 100%;
					background: #f7f7f7fa;
					border-radius: 10rpx;
					margin: 20rpx 0;

					.indexcontentbttom-item-top {
						// display: grid;
						// grid-template-columns: 75% 25%;
						display: flex;
						.indexcontentbttom-item-text {
							text-align: left;
							font-weight: 500;
							font-size: 30rpx;
							font-weight: bold;
							color: #35393D;
							overflow: hidden;
							flex: 1;
						}

						.indexcontentbttom-item-top-icon {
							height: 50rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							border-radius: 5rpx;
							color: #4379D6;
							background-color: #e5e3e8;
						}
					}



					.indexcontentbttom-item-bottom {
						margin: 20rpx 0;
						display: grid;
						grid-template-columns: 18% auto;

						view {
							font-size: 25rpx;
							color: #35393D;
							line-height: 30rpx;
						}

						.indexcontentbttom-item-bottom-left {
							color: #595F66;
							text-align: left;
						}

						.indexcontentbttom-item-bottom-rigth {
							font-weight: bold;
						}

						.leibie {
							color: #E72C2C;
						}
					}

					.indexcontentbttom-item-bottom-bottom {
						background: rgba(67, 121, 214, 0.1);
						border-radius: 10rpx;
						width: 100%;
						height: 69rpx;
						text-align: center;
						line-height: 69rpx;
						color: #4379D6;
					}

				}
			}
		}

		.dibuaBtn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			padding: 30rpx;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 20rpx;
			color: #ffffff;
			background-color: #ffffff;

			view {
				text-align: center;
				line-height: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
			}

			.dibuaBtn-lanse {
				background-color: #4379D6;
			}

			.dibuaBtn-hongse {
				background-color: #E72C2C;
			}
		}
	}

	.popup-box {
		width: 600rpx;
	}

	.lishi-box {
		width: 600rpx;
		display: grid;
		grid-template-columns: 25% 70%;
		grid-row-gap: 20rpx;
	}

	.u-nav-slot {
		font-size: 22rpx;
	}

	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.lishi-box-jiacu {
		font-weight: bold;
	}

	.LieBIaoList {
		padding: 10rpx;
		height: 49vh;
		width: 100%;
		background-color: #f7f7f7fa;
	}
	.lieBiaoListTwo {
		height: 64vh;
	}
</style>