463 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			463 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
| 	<view class="index">
 | |
| 		<view>
 | |
| 			<view
 | |
| 				style="height: 290rpx;background-image: url('../../static/home/index-top-img.png');background-position: center bottom;background-size: 100%;">
 | |
| 			</view>
 | |
| 			<view class="navigate-title">
 | |
| 				<view @click="goIntoTargetPage('daiban')"
 | |
| 					style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
 | |
| 					<text class="text">{{ticketCount}}</text>
 | |
| 					<view class="status">待办工单</view>
 | |
| 				</view>
 | |
| 				<view @click="goIntoTargetPage('warning')"
 | |
| 					style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
 | |
| 					<text class="text">{{eventCount}}</text>
 | |
| 					<view class="status">事件提醒</view>
 | |
| 				</view>
 | |
| 			</view>
 | |
| 			<view class="daiban">
 | |
| 				<view class="daiban01">
 | |
| 					<view class="title">
 | |
| 						<view class="left-content">
 | |
| 							<view class="img-view">
 | |
| 								<image src="../../static/home/daiban.png" mode="" class="img"></image>
 | |
| 							</view>
 | |
| 							<text class="title-text-left">待审批</text>
 | |
| 						</view>
 | |
| 						<view class="" @click="goIntoTargetPage('daiban')">
 | |
| 							<text class="title-text-right">查看更多</text>
 | |
| 							<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
 | |
| 						</view>
 | |
| 					</view>
 | |
| 					<view class="line"></view>
 | |
| 					<view class="listWrap" v-if="ticketList.length>0">
 | |
| 						<view v-for="item in ticketList" :key="item.id">
 | |
| 							<view class="itemTitle">{{item.title}}</view>
 | |
| 							<view class="itemCenter">
 | |
| 								<view class="info-details">所属工作流:{{item.workflow_.name}}</view>
 | |
| 								<view class="info-details">工单状态:{{item.state_.name}}</view>
 | |
| 								<view class="info-details">提交时间:{{item.create_time}} </view>
 | |
| 								<view class="info-details">更新时间:{{item.update_time}} </view>
 | |
| 							</view>
 | |
| 							<view class="bottom-btns">
 | |
| 								<view class="shenhezhong bottom-btn" @click="ticketHandle(item,'handle')"
 | |
| 									v-if="(item.act_state===1||item.act_state===3)&&item.state_.type===0">
 | |
| 									<image src="../../static/my/my_apply/blue-time.png" mode=""></image>
 | |
| 									处理
 | |
| 								</view>
 | |
| 								<view class="shenhejieshu bottom-btn" @click="ticketHandle(item,'show')">
 | |
| 									<image src="../../static/my/my_apply/tongguo.png" mode=""></image>
 | |
| 									查看
 | |
| 								</view>
 | |
| 							</view>
 | |
| 						</view>
 | |
| 					</view>
 | |
| 					<view class="listWrap" v-else>
 | |
| 						<view class="emptyList">暂无待办工单</view>
 | |
| 					</view>
 | |
| 				</view>
 | |
| 			</view>
 | |
| 			<view class="tongzhi">
 | |
| 				<view class="title">
 | |
| 					<view class="left-content">
 | |
| 						<view class="img-view">
 | |
| 							<image src="../../static/home/tongzhi.png" mode="" class="img"></image>
 | |
| 						</view>
 | |
| 						<text class="title-text-left">最近发生</text>
 | |
| 					</view>
 | |
| 					<view class="" @click="goIntoTargetPage('warning')">
 | |
| 						<text class="title-text-right">查看更多</text>
 | |
| 						<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
 | |
| 					</view>
 | |
| 				</view>
 | |
| 				<view class="line"></view>
 | |
| 				<view class="listWrap" v-if="eventList.length>0">
 | |
| 					<view v-for="event in eventList" :key="event.id">
 | |
| 						<view class="itemTitle" v-if="event.cates_">事件类型:
 | |
| 							<text v-for="cate in event.cates_">{{cate.name}}</text>
 | |
| 						</view>
 | |
| 						<view class="itemCenter">
 | |
| 							<view class="info-details">触发时间:{{event.create_time}}</view>
 | |
| 							<view class="info-details">事件信息:{{event.voice_msg}}</view>
 | |
| 						</view>
 | |
| 						<view class="bottom-btns">
 | |
| 							<view class="shenhezhong bottom-btn" @click="eventHandle(event)">
 | |
| 								<image src="../../static/my/my_apply/blue-time.png" mode=""></image>
 | |
| 								处理
 | |
| 							</view>
 | |
| 						</view>
 | |
| 					</view>
 | |
| 				</view>
 | |
| 				<view class="listWrap" v-else>
 | |
| 					<view class="emptyList">今日暂无事件</view>
 | |
| 				</view>
 | |
| 			</view>
 | |
| 		</view>
 | |
| 	</view>
 | |
| 
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| 	export default {
 | |
| 		data() {
 | |
| 			return {
 | |
| 				cateAggForm: {
 | |
| 					start_create: '',
 | |
| 					is_handled: false,
 | |
| 					completed: true
 | |
| 				},
 | |
| 				limitedOperation:false,
 | |
| 				limitedRpj:false,
 | |
| 				limitedVisit:false,
 | |
| 				ticketList: [],
 | |
| 				eventList: [],
 | |
| 				eventCount: 0,
 | |
| 				ticketCount: 0,
 | |
| 				// 2022年2月18日
 | |
| 				mytopimg: require("@/static/home/bgimg-top.jpg"),
 | |
| 			}
 | |
| 		},
 | |
| 		onLoad() {
 | |
| 				// #ifdef APP-PLUS
 | |
| 						this.showHeader = false;
 | |
| 						this.statusHeight = plus.device.uuid; 	//uniapp打包安卓调用设备唯一标识方法
 | |
| 				// #endif
 | |
| 			},
 | |
| 		onShow() {
 | |
| 			debugger;
 | |
| 			console.log(this.vuex_perm)
 | |
| 			if(this.vuex_user.type==='visitor'){
 | |
| 				this.limitedVisit = true;
 | |
| 			}else{
 | |
| 				let date = new Date();
 | |
| 				this.cateAggForm.start_create = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
 | |
| 				this.getTicketAgg();
 | |
| 				this.getTicket();
 | |
| 				this.getEventAgg();
 | |
| 				this.getEvent();
 | |
| 			}
 | |
| 
 | |
| 		},
 | |
| 		methods: {
 | |
| 			getTicket() {
 | |
| 				let that = this;
 | |
| 				that.ticketList = []
 | |
| 				let params = {
 | |
| 					category: 'duty'
 | |
| 				};
 | |
| 				that.$u.api.getTickets(params).then(res => {
 | |
| 					that.ticketList = res.results.splice(0, 2);
 | |
| 				})
 | |
| 			},
 | |
| 			getEvent() {
 | |
| 				let that = this;
 | |
| 				let params = {
 | |
| 					page: 1,
 | |
| 					page_size: 2,
 | |
| 					ordering: '-create_time' 
 | |
| 				};
 | |
| 				that.$u.api.eventList(params).then(res => {
 | |
| 					let eventList = res.results.filter(item => {
 | |
| 						return item.handle_user === null;
 | |
| 					});
 | |
| 					that.eventList = eventList.splice(0, 2);
 | |
| 
 | |
| 				})
 | |
| 			},
 | |
| 			getTicketAgg() {
 | |
| 				this.$u.api.ticketDutyAgg().then(res => {
 | |
| 					if (res.err_msg) {} else {
 | |
| 						this.ticketCount = res.total_count;
 | |
| 					}
 | |
| 				})
 | |
| 			},
 | |
| 			getEventAgg() {
 | |
| 				this.$u.api.eventCateAgg(this.cateAggForm).then(res => {
 | |
| 					if (res.err_msg) {} else {
 | |
| 						this.eventCount = res.total_count;
 | |
| 					}
 | |
| 				})
 | |
| 			},
 | |
| 			goIntoTargetPage(type) {
 | |
| 				debugger;
 | |
| 				if(this.limitedVisit==true){
 | |
| 				}else{
 | |
| 					if (type == "daiban") {
 | |
| 						uni.navigateTo({
 | |
| 							url: "./list/ticket"
 | |
| 						})
 | |
| 					}
 | |
| 					if (type == "warning") {
 | |
| 						uni.navigateTo({
 | |
| 							url: "./list/event"
 | |
| 						})
 | |
| 					}
 | |
| 				}
 | |
| 				
 | |
| 			},
 | |
| 			ticketHandle(row, type) {
 | |
| 				let projectId = null;
 | |
| 				let cateType = row.workflow_.key;
 | |
| 				if (cateType === 'visit') {
 | |
| 					projectId = row.ticket_data.visit;
 | |
| 				} else if (cateType === 'rpj') {
 | |
| 					projectId = row.ticket_data.rpj;
 | |
| 				} else if(cateType.indexOf('opl_')!=-1){
 | |
| 					projectId = row.ticket_data.opl;
 | |
| 					cateType = 'opl'
 | |
| 				}
 | |
| 				const params = `?ticketId=${row.id}&projectId=${projectId}&cateType=${cateType}&type=${type}`;
 | |
| 				uni.navigateTo({
 | |
| 					url: './detail/ticketHandle' + params,
 | |
| 				})
 | |
| 			},
 | |
| 			eventHandle(val){
 | |
| 				let params = `?eventId=${val.id}`;
 | |
| 				uni.navigateTo({
 | |
| 					url: './detail/eventHandle' + params,
 | |
| 				})
 | |
| 			},
 | |
| 		}
 | |
| 	}
 | |
| </script>
 | |
| 
 | |
| <style scoped>
 | |
| 	.index {
 | |
| 		background-color: #edf8ff;
 | |
| 		padding-bottom: 45rpx;
 | |
| 		position: relative;
 | |
| 	}
 | |
| 
 | |
| 	.nav-bar {
 | |
| 		height: 401rpx;
 | |
| 		background-color: #2cade8;
 | |
| 		background-size: cover;
 | |
| 		color: #FFFFFF;
 | |
| 		padding-top: 26rpx;
 | |
| 		padding-left: 18rpx;
 | |
| 	}
 | |
| 
 | |
| 	.nav-bar-text {
 | |
| 		font-size: 38rpx;
 | |
| 		color: #ffffff;
 | |
| 		font-weight: 400;
 | |
| 
 | |
| 	}
 | |
| 
 | |
| 	.navigate-title {
 | |
| 		width: 720rpx;
 | |
| 		height: 160rpx;
 | |
| 		background-color: #ffffff;
 | |
| 		box-shadow: 0px 2px 24px 0px rgba(213, 237, 255, 0.53);
 | |
| 		border-radius: 10px;
 | |
| 		display: flex;
 | |
| 		justify-content: space-around;
 | |
| 		align-items: center;
 | |
| 		text-align: center;
 | |
| 		position: absolute;
 | |
| 		left: 50%;
 | |
| 		top: 196rpx;
 | |
| 		transform: translateX(-50%);
 | |
| 		z-index: 1;
 | |
| 	}
 | |
| 
 | |
| 	.navigate-title .text+.status {
 | |
| 		font-weight: normal;
 | |
| 		font-stretch: normal;
 | |
| 		letter-spacing: 0rpx;
 | |
| 	}
 | |
| 
 | |
| 	.navigate-title .text {
 | |
| 		font-family: PingFang-SC-Bold;
 | |
| 		font-size: 48rpx;
 | |
| 		font-weight: 600;
 | |
| 		color: #2c6fd9;
 | |
| 	}
 | |
| 
 | |
| 	.navigate-title .status {
 | |
| 		font-family: PingFang-SC-Medium;
 | |
| 		font-size: 26rpx;
 | |
| 		color: #383838;
 | |
| 	}
 | |
| 
 | |
| 	.daiban01 {
 | |
| 		width: 720rpx;
 | |
| 		background-color: #ffffff;
 | |
| 		border-radius: 10rpx;
 | |
| 		margin: 0 auto;
 | |
| 		margin-top: 88rpx;
 | |
| 	}
 | |
| 
 | |
| 	.title {
 | |
| 		display: flex;
 | |
| 		justify-content: space-between;
 | |
| 		padding: 20rpx 20rpx;
 | |
| 		height: 79rpx;
 | |
| 		align-items: center;
 | |
| 	}
 | |
| 
 | |
| 	.left-content {
 | |
| 		display: flex;
 | |
| 		align-items: center;
 | |
| 	}
 | |
| 
 | |
| 	.img-view {
 | |
| 		width: 30rpx;
 | |
| 		height: 30rpx;
 | |
| 	}
 | |
| 
 | |
| 	.img-view .img {
 | |
| 		width: 100%;
 | |
| 		height: 100%;
 | |
| 	}
 | |
| 
 | |
| 	.title-text-left {
 | |
| 		font-size: 34rpx;
 | |
| 		color: #383838;
 | |
| 		padding-left: 10rpx;
 | |
| 	}
 | |
| 
 | |
| 	.title-text-right {
 | |
| 		font-family: PingFang-SC-Medium;
 | |
| 		font-size: 24rpx;
 | |
| 		font-weight: normal;
 | |
| 		font-stretch: normal;
 | |
| 		line-height: 72rpx;
 | |
| 		color: #ababab;
 | |
| 	}
 | |
| 
 | |
| 	.line {
 | |
| 		width: 660rpx;
 | |
| 		height: 1rpx;
 | |
| 		background-color: #eeeeee;
 | |
| 		margin: 0 auto;
 | |
| 	}
 | |
| 
 | |
| 	.daiban02 {
 | |
| 		width: 720rpx;
 | |
| 		background-color: #ffffff;
 | |
| 		border-radius: 10rpx;
 | |
| 		margin: 0 auto;
 | |
| 		margin-top: 18rpx;
 | |
| 	}
 | |
| 
 | |
| 	/* 通知样式 */
 | |
| 	.tongzhi {
 | |
| 		width: 720rpx;
 | |
| 		background-color: #ffffff;
 | |
| 		border-radius: 10rpx;
 | |
| 		margin: 0 auto;
 | |
| 		margin-top: 20rpx;
 | |
| 		padding-bottom: 20rpx;
 | |
| 	}
 | |
| 
 | |
| 	.tongzhi .content {
 | |
| 		display: flex;
 | |
| 		padding: 0 20rpx;
 | |
| 		margin-top: 41rpx;
 | |
| 	}
 | |
| 
 | |
| 
 | |
| 	.tongzhi-img image {
 | |
| 		width: 55rpx;
 | |
| 		height: 55rpx;
 | |
| 		border-radius: 50%;
 | |
| 	}
 | |
| 
 | |
| 	.tongzhi .tongzhi-info {
 | |
| 		margin-left: 15rpx;
 | |
| 		flex: 1;
 | |
| 	}
 | |
| 
 | |
| 	.tongzhi-info .tongzhi-title {
 | |
| 		font-size: 30rpx;
 | |
| 		color: #3d3d3d;
 | |
| 	}
 | |
| 
 | |
| 	.tongzhi-info .tongzhi-content {
 | |
| 		font-family: PingFang-SC-Medium;
 | |
| 		font-size: 28rpx;
 | |
| 		line-height: 50rpx;
 | |
| 		color: #5b5b5b;
 | |
| 		overflow: hidden;
 | |
| 		text-overflow: ellipsis;
 | |
| 		display: flex;
 | |
| 		display: -webkit-box;
 | |
| 		line-clamp: 2;
 | |
| 		-webkit-line-clamp: 2;
 | |
| 		-webkit-box-orient: vertical;
 | |
| 		word-break: break-all;
 | |
| 	}
 | |
| 
 | |
| 	.tongzhi .bottom-content {
 | |
| 		font-family: PingFang-SC-Regular;
 | |
| 		font-size: 24rpx;
 | |
| 		line-height: 72rpx;
 | |
| 		letter-spacing: 0rpx;
 | |
| 		color: #ababab;
 | |
| 		text-align: right;
 | |
| 		padding: 0 20rpx;
 | |
| 	}
 | |
| 
 | |
| 	.bottom-content .liulan {
 | |
| 		margin-right: 40rpx;
 | |
| 	}
 | |
| 
 | |
| 	.listWrap {
 | |
| 		padding: 20upx 50upx;
 | |
| 	}
 | |
| 
 | |
| 	.itemTitle {
 | |
| 		font-family: PingFang-SC-Medium;
 | |
| 		font-size: 30upx;
 | |
| 		line-height: 72upx;
 | |
| 		color: #3d3d3d;
 | |
| 		flex: 1;
 | |
| 	}
 | |
| 
 | |
| 	.itemCenter {
 | |
| 		padding-bottom: 10rpx;
 | |
| 
 | |
| 	}
 | |
| 
 | |
| 	.info-details {
 | |
| 		font-size: 26upx;
 | |
| 		line-height: 40rpx;
 | |
| 		color: #5b5b5b;
 | |
| 	}
 | |
| 
 | |
| 	/* btns */
 | |
| 	.bottom-btns {
 | |
| 		text-align: center;
 | |
| 		font-family: PingFang-SC-Medium;
 | |
| 		font-size: 28rpx;
 | |
| 		line-height: 60rpx;
 | |
| 		display: flex;
 | |
| 		border-bottom: 1rpx solid #eeeeee;
 | |
| 	}
 | |
| 
 | |
| 	.bottom-btn {
 | |
| 		flex: 1;
 | |
| 		/* border-right: 1upx solid #eeeeee; */
 | |
| 	}
 | |
| 
 | |
| 	/* .bottom-btns>.bottom-btn:last-child{
 | |
| 		border-right: none;
 | |
| 	} */
 | |
| 	.shenhezhong {
 | |
| 		color: #2c6fd9;
 | |
| 	}
 | |
| 
 | |
| 	.shenhejieshu {
 | |
| 		color: #15a306;
 | |
| 	}
 | |
| 
 | |
| 	.bottom-btn image {
 | |
| 		width: 26rpx;
 | |
| 		height: 26rpx;
 | |
| 		margin-right: 10rpx;
 | |
| 		vertical-align: middle;
 | |
| 	}
 | |
| </style>
 |