shanxian-work-app/pages/manage/workDetail.vue

<template>
	<!--工单详情-->
	<!--工单详情-->
	<view class="workDetail">
		<view class="con">
			<image src="http://resource.weilaibike.com/yunwei/detail.png" @click="goHome" class="bike"></image>
			<view class="work">
				<view style="font-size:28rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width:80%;">{{detail.reason}}</view>
				<view style="font-size:40rpx;margin-top:15rpx;">
					<text> {{detail.bike_no}}</text>
					<text style="margin-left:10rpx;"> (级别：{{detail.times}}级)</text>
				</view>
			</view>
			<view class="info flex">
				<view>
					<view>创建人</view>
					<view class="msg">{{detail.created_man}}</view>
				</view>
				<view>
					<view>处理人</view>
					<view class="msg">{{detail.received_name ? detail.received_name:'暂无'}}</view>
				</view>
				<view>
					<view>关闭人</view>
					<view class="msg">{{detail.work_over_name ?detail.work_over_name : '暂无'}}</view>
				</view>
			</view>
			<view class="position flex">
				<image src="http://resource.weilaibike.com/yunwei/pos.png"></image>
				<view style="color:#000;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width:80%;">发生位置：{{detail.location}}</view>
			</view>
		</view>
		<view class="loading">工单进程</view>
		<view class="step">
			<view class="flexCC" style="margin-top:20rpx;">
				<image src="http://resource.weilaibike.com/yunwei/circle1.png" class="circle"></image>
				<image src="http://resource.weilaibike.com/yunwei/ellipsis.png" class="line"></image>
				<image src="http://resource.weilaibike.com/yunwei/circle1.png" class="circle"></image>
				<image src="http://resource.weilaibike.com/yunwei/ellipsis.png" class="line"></image>
				<image src="http://resource.weilaibike.com/yunwei/circle1.png" class="circle"></image>
				<image src="http://resource.weilaibike.com/yunwei/ellipsis.png" class="line"></image>
				<image src="http://resource.weilaibike.com/yunwei/circle1.png" class="circle"></image>
			</view>
			<view class="list" style="width:100%;">
				<view class="stepCon flexB" v-if="four">
					<view>
						<view>已完成</view>
						<view style="color:#FF6300;">{{detail.work_over_name}}</view>
					</view>
					<view>{{detail.work_over_time}}</view>
				</view>
				<view class="stepCon flexB" v-if="three">
					<view>
						<view>已处理</view>
						<view style="color:#FF6300;">{{detail.work_over_name}}</view>
					</view>
					<view>{{detail.work_over_time}}</view>
				</view>
				<view class="stepCon flexB" v-if="two">
					<view>
						<view>处理中</view>
						<view style="color:#FF6300;">{{detail.received_name}}</view>
					</view>
					<view>{{detail.received_at}}</view>
				</view>
				<view class="stepCon flexB" v-if="one">
					<view>
						<view>待接单</view>
						<view style="color:#FF6300;">{{detail.created_man}}</view>
					</view>
					<view>{{detail.created_at}}</view>
				</view>
			</view>
		</view>
		<view class="operate">
			<view class="flexC" @click="alarm">查看警报</view>
			<image src="http://resource.weilaibike.com/yunwei/btn.png" @click="openICon"></image>
		</view>
		<!-- 查看警报 -->
		<view class="cover" v-if="alarmShow" @click="closeAlarm"></view>
		<view class="alarmCon " v-if="alarmShow">
			<view class="alarmTitle flexC">
				<text>{{detail.bike_no}}报警列表</text>
			</view>
			<view class="alarmTab flexC">
				<view @click="alarmChoose" v-bind:data-state="0">限制报警类型</view>
				<view @click="alarmChoose" v-bind:data-state="1">不限制报警类型</view>
			</view>
			<scroll-view scroll-y="true" class="scroll">
				<view class="scrollCon">
					<view class="alList" v-for="(item,index2) in alarmList" :key='index2'>
						<view>{{item.type_name}}</view>
						<view class="source flexB">
							<text>来源：{{item.source}}</text>
							<text>时间：{{item.created_at}}</text>
						</view>
					</view>
					<view class="no" v-if="alarmList.length == 0">
						<image src="http://resource.weilaibike.com/none.png"></image>
						<view>暂无相关数据~</view>
					</view>
				</view>
			</scroll-view>
			<view>
			</view>
		</view>
		<!-- 显示操作步骤 -->
		<view class="cover" v-if="iconShow" @click="closeIcon"></view>
		<view class="icon" v-if="iconShow" :style="screenHeight=='xSeries' ? 'bottom:27%' : 'bottom:12%'">
			<view class="button" @click="closeIcon">
				<image src="http://resource.weilaibike.com/common/button.png" :style="screenHeight=='xSeries' ? 'bottom:16%' : 'bottom:-2%'"></image>
			</view>
			<view @click="finish" v-if="detail.planned==2">
				<text>已处理好，正常关闭</text>
				<image src="http://resource.weilaibike.com/common/finish.png"></image>
			</view>
			<view @click="reported" v-if="detail.planned==2">
				<text>可以上线，但有情况需要上报组长处理</text>
				<image src="http://resource.weilaibike.com/common/online.png"></image>
			</view>
			<view @click="reported" v-if="detail.planned==2">
				<text>有故障，报告组长并下线车辆</text>
				<image src="http://resource.weilaibike.com/common/outline.png"></image>
			</view>

			<view @click="getWork" v-if="detail.planned==1">
				<text>领取工单</text>
				<image src="http://resource.weilaibike.com/common/get.png"></image>
			</view>
		</view>
		<!-- 上报组长弹框 -->
		<view class="cover" v-if="commitShow" @click="closeIcon"></view>
		<view class="commit" v-if="commitShow">
			<view v-if="inpShow">
				<view class="title">生成组长工单</view>
				<input placeholder="请输入报告组长内容" bindinput="input"></input>
			</view>
			<view v-else>
				<view class="title">完成并关闭工单</view>
				<view class="detail">已处理好，正常</view>
			</view>
			<view style="text-align:right;">
				<text @click="cancel">取消</text>
				<text style="margin:0 50rpx 0 80rpx;" @click="submit">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				planned: 2,
				iconShow: false, //是否显示图标弹窗
				commitShow: false, //上报组长
				inpShow: true, //显示输入框还是显示完成
				detail: [],
				one: false,
				two: false,
				three: false,
				four: false,
				id: '',
				value: '',
				screenHeight: '', //屏幕可视高度
				alarmShow: false, //是否显示警报弹窗【true 显示  false 不显示】
				topNum: 0, //返回顶部
				alarmState: 0, // 【0 限制警报类型  1  不限制报警类型】
				page: 1, //当前页面
				skipDetail: false,
				alarmList: ""
			}
		},
		onLoad(options) {
			this.id = options.id
			this.status();
		},
		methods: {
			status: function() {
				uni.showLoading({
					title: '加载中...',
				})

				app.request('work_order/workOrderDetail?work_order_id=' + this.id, '', 'GET').then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.statusCode == 200) {
						this.detail = res.data,
							this.skipDetail = true
						if (res.data.planned == 4) {
							this.one = true,
								this.two = true,
								this.three = true,
								this.four = true
						} else if (res.data.planned == 3) {
							this.one = true,
								this.two = true,
								this.three = true
						} else if (res.data.planned == 2) {
							this.one = true,
								this.two = true
						} else if (res.data.planned == 1) {
							this.one = true
						}
					}

				})
			},
			alarm: function() {
				this.alarmShow = true
				this.getAlarm();
			},
			getAlarm: function() {
				uni.showLoading({
					title: '加载中...',
				})
				app.request('work_order/getWarningByWorkOrderId?id=' + this.id + '&is_limit_type=' + this.alarmState, '',
					'GET').then(res => {
					uni.hideLoading();
					if (res.statusCode == 200) {
						this.alarmList = res.data
					}
					console.log(res)
				})
			},
			closeAlarm: function() {
				this.alarmShow = false
			},
			alarmChoose: function(e) {
				let state = e.currentTarget.dataset.state;

				this.alarmState = state,
					this.alarmList = []

				this.getAlarm();
				// sthis.goTop();
			},
			goHome: function() {
				if (this.skipDetail) {
					uni.reLaunch({
						url: '/pages/logs/logs?bike_no=' + this.detail.bike_no,
					})
				} else {
					uni.showToast({
						title: '页面加载完后再试',
						icon: 'none'
					})
				}
			},
			//打开图标弹窗
			openICon: function() {
				if (this.detail.planned == 4) {
					uni.showToast({
						title: '已完成',
						icon: 'none'
					})
				} else {
					this.iconShow = true
				}
			},
			//关闭图标弹窗
			closeIcon: function() {

				this.iconShow = false,
					this.commitShow = false,
					this.inpShow = false

			},
			//领取工单
			getWork: function() {
				uni.showLoading({
					title: '接单中..',
				})
				app.request('work_order/receive?work_order_id=' + this.id, '', 'GET').then(res => {
					uni.hideLoading();
					this.status()
					uni.showToast({
						title: '接单成功',
						icon: 'none'
					})
					this.iconShow = false
				})
			},
			//上报组长
			reported: function() {
				this.commitShow = true,
					this.iconShow = false,
					this.inpShow = true
			},
			//完成
			finish: function() {
				this.iconShow = false,
					this.commitShow = true,
					this.inpShow = false
			},
			//取消按钮
			cancel: function() {
				this.commitShow = false
			},
			//确定按钮
			submit: function() {
				uni.showLoading({
					title: '加载中...',
				})
				let condition = this.inpShow
				if (condition == true) {
					//调上报组长接口
					var data = {
						work_order_id: this.id,
						remark: this.value
					}
					app.request('work_order/upgrade', data, 'POST').then(res => {
						uni.hideLoading();
						console.log(res);
						if (res.statusCode == 200) {
							uni.showToast({
								title: '上报成功',
								icon: 'none'
							})
							this.inpShow = false,
								this.iconShow = false,
								this.commitShow = false
							this.status()
						}
					})
				} else {
					app.request('work_order/over?work_order_id=' + this.id, '', 'GET').then(res => {
						if (res.statusCode == 200) {
							uni.showToast({
								title: '处理完成',
								icon: 'none'
							})
							this.inpShow = false,
								this.iconShow = false,
								this.commitShow = false
							this.status()
						}
					})
				}
			},

		}
	}
</script>

<style>
	@import url("/static/css/base.css");
	/* pages/workDetail/workDetail.wxss */

	.workDetail .con {
		height: 380rpx;
		width: 95%;
		margin: 30rpx auto 0;
		background: url('http://resource.weilaibike.com/yunwei/workbg2.png') no-repeat;
		background-size: cover;
		position: relative;
	}

	/* .con>view {
	  height: 50%;
	} */

	.con view {
		font-size: 26rpx;
		color: #fff;
		/* margin-top: 15rpx; */
		padding-left: 20rpx;
	}

	.con .bike {
		position: absolute;
		top: 0;
		right: 21rpx;
		width: 160rpx;
		height: 50rpx;
	}

	.con .reason {
		font-size: 32rpx;
		padding: 40rpx 0 10rpx 20rpx;
	}

	.con .work {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 68rpx;
		height: 50%;
	}

	.con .iconfont {
		font-size: 100rpx;
		color: #fff;
		position: absolute;
		bottom: 37rpx;
		right: 65rpx;
	}

	.info {
		height: 25%;
	}

	.info>view {
		width: 27.33%;
		text-align: center;
	}

	.info view {
		color: #212121;
		font-size: 24rpx;
	}

	.info .msg {
		font-weight: bold;
		margin-top: 15rpx;
	}

	.position {
		height: 25%;
	}

	.position image {
		width: 24rpx;
		height: 28rpx;
		margin-left: 15rpx;
	}

	.position view {
		font-size: 22rpx;
	}

	.loading {
		width: 90%;
		margin: 0 auto;
		font-size: 34rpx;
		font-weight: bold;
		padding: 35rpx 0 24rpx 0;
	}

	.step {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
	}

	.step .circle {
		height: 28rpx;
		width: 28rpx;
		margin-bottom: 13rpx;
	}

	.step .line {
		height: 125rpx;
		width: 6rpx;
	}

	.stepCon {
		width: 95%;
		height: 114rpx;
		margin: 20rpx 0 0 20rpx;
		box-shadow: 0 0 6rpx 0 rgba(216, 216, 216, 1);
		border-radius: 10rpx;
		padding: 5rpx 40rpx;
		box-sizing: border-box;
	}

	.stepCon view {
		font-size: 24rpx;
		color: #4d4d4d;
		padding: 8rpx 0;
	}

	.icon {
		position: absolute;
		right: 12%;
		z-index: 9999;
		text-align: right;
	}

	.operate image {
		height: 148rpx;
		width: 148rpx;
	}

	.operate {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.operate view {
		font-size: 28rpx;
		width: 200rpx;
		height: 88rpx;
		background: linear-gradient(to right, rgba(253, 142, 111, 1) 0%, rgba(249, 129, 12, 1) 100%);
		box-shadow: 0 12rpx 26rpx 0 rgba(255, 189, 165, 1);
		color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.icon view {
		margin-bottom: 30rpx;
	}

	.icon image {
		height: 60rpx;
		width: 60rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}

	.icon view text {
		font-size: 26rpx;
		padding: 10rpx 40rpx;
		border-radius: 10rpx;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
	}

	.button image {
		width: 200rpx;
		height: 200rpx;
		position: fixed;
		right: 10rpx;
	}

	.commit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		width: 640rpx;
		height: 296rpx;
		z-index: 9999;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.commit input {
		font-size: 28rpx;
		border-bottom: 1px solid #000;
		margin: 40rpx 0;
		padding-bottom: 15rpx;
	}

	.commit .placeholder {
		font-size: 24rpx;
		color: #ADADAD;
	}

	.commit .title {
		font-size: 34rpx;
		color: #282828;
		font-weight: 600;
	}

	.commit .detail {
		margin: 40rpx 0;
		font-size: 26rpx;
	}

	.commit text {
		font-size: 26rpx;
		color: #F9831F;
	}

	/* 警报弹窗 */
	.alarmCon {
		background: #fff;
		position: fixed;
		bottom: 0%;
		left: 0%;
		z-index: 9999;
		width: 100%;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
	}

	.alarmTitle {
		width: 100%;
		padding-top: 20rpx;
	}

	.alarmTab {
		width: 90%;
		margin: 20rpx auto 0rpx;
		background: #fff;
		padding: 15rpx;
	}

	.alarmTitle text {
		font-size: 32rpx;
		font-weight: 600;
	}

	.alarmTab view {
		font-size: 28rpx;
		padding: 15rpx 30rpx;
		color: #F9831F;
		border: 1px solid #F9831F;
	}

	.alarmTab view:first-child {
		border-top-left-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
	}

	.alarmTab view:last-child {
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}

	.alarmTab .cur {
		background: #F9831F;
		color: #fff;
	}

	.alarmCon .alList:first-child {
		margin-top: 20rpx;
	}

	.alList {
		width: 90%;
		margin: 0rpx auto 20rpx;
		box-shadow: 0 0 13rpx 0 rgba(216, 216, 216, 1);
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
	}

	.alList .source {
		font-size: 26rpx;
		margin-top: 15rpx;
		color: #555;
	}

	.no {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		margin-top: 121rpx;
	}

	.no image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.scroll {
		height: 840rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scrollCon {
		padding: 0rpx 0 20rpx 0;
	}
</style>