<template>
	<view class="content">
		<view class='top_img'>
			<view class="date"><span style="margin-right: 10px;">{{ date }}</span><span>星期{{ weekday }}</span><span
					style="margin-left:10px ;width:72px;display: inline-block;">{{ time }}</span></view>
			<!-- <image src="../../static/logo.png" class="top_logo"></image> -->
			<image src="../../static/login_out.png" class="login_out" @click="toLoginOut"></image>
		</view>
		<view class="center">
			<view class="center1">
				<view class="center1_left">
					<view class="userInfo">
						<!-- <view class="user_info_item"><div class="user_info_item_name">机台：</div>1234567</view> -->
						<view class="user_info_item">
							<div class="user_info_item_name">姓名：</div>{{ userInfo.name }}
						</view>
						<view class="user_info_item">
							<div class="user_info_item_name">部门：</div>{{ userInfo.deptName }}
						</view>
					</view>
					<!-- <view class="photo" style="background-image: url(../../static/photo2.png);"> -->
					<!-- </view> -->
				</view>
				<view class="center1_center" style="border-top-left-radius: 30px;">
					<view class="border_back">工单详情</view>
					<view class="center1_center_headtext">工单号:{{ startWorkingInfo.code }}</view>
					<view class="center1_center_list">
						<view class="hidden">[设备名称]{{ startWorkingInfo.deviceName }}</view>
						<view v-if="startWorkingInfo.isOutsource == 0">[是否委外]否</view>
						<view v-else>[是否委外]是</view>
						<view>[计划完成日期]{{ startWorkingInfo.time }}</view>
						<view>[计划数量]{{ startWorkingInfo.planCount }}</view>
						<view class="hidden">[代码]{{ startWorkingInfo.serialNo }}</view>
						<view class="hidden">[品名]{{ startWorkingInfo.materielName }}</view>
						<view class="hidden">[规格型号]{{ startWorkingInfo.specification }}</view>
						<view>[完工数量]{{ startWorkingInfo.completionCount }}</view>
					</view>
					<view class="center1_center_list_state">{{ startWorkingInfo.processName }}</view>
					<view class="waitCountStyle">
						[待制数量]{{ (startWorkingInfo.planCount - startWorkingInfo.completionCount) ?
							(startWorkingInfo.planCount - startWorkingInfo.completionCount) : '' }}
					</view>
				</view>
				<view class="center1_right" style="border-top-left-radius: 30px;" @click="show_imgs = true">
					<view class="border_back">工艺要求</view>
					<view class="center1_center_right">{{ startWorkingInfo.demand }}
					</view>
				</view>
			</view>
			<view class="center2">
				<view :class="ifShow == false ? 'ddgd' : 'ddgd1'" style="border-top-left-radius: 30px;">
					<view class="border_back">工单列表</view>
					<view class="ddgd_table table">
						<view class="table_head">
							<view style="width:24.5%">工单号</view>
							<view>品名</view>
							<view>规格型号</view>
							<view style="width:12.5%">计划数量</view>
							<view>计划完成日期</view>
							<view style="width:12.5%">状态</view>
						</view>
						<view class="table_body">
							<view :class="chooseItemIndex == index ? 'table_tr table_tr_choose' : 'table_tr'"
								v-for="(item, index) in dispatchList" :key="item.id" @click="chooseItem(index)"
								v-if="!ifShow">
								<view style="width:24.5%">{{ item.code }}</view>
								<view>{{ item.materielName }}</view>
								<view>{{ item.specification }}</view>
								<view style="width:12.5%">{{ item.planCount }}</view>
								<view>{{ item.time }}</view>
								<view style="width:12.5%">{{ item.statusName }}</view>
							</view>
							<view :class="chooseItemIndex == index ? 'table_tr1 table_tr_choose' : 'table_tr1'"
								v-for="(item, index) in dispatchList" :key="item.id" @click="chooseItem(index)"
								v-if="ifShow">
								<view style="width:24.5%">{{ item.code }}</view>
								<view>{{ item.materielName }}</view>
								<view>{{ item.specification }}</view>
								<view style="width:12.5%">{{ item.planCount }}</view>
								<view>{{ item.time }}</view>
								<view style="width:12.5%">{{ item.statusName }}</view>
							</view>
						</view>
						<view class="arrows">
							<image src="../../static/icon_PgDn.png" class="arrows_out" @click="PgDown" v-if="!ifShow">
							</image>
							<image src="../../static/icon_PgUp.png" class="arrows_out" @click="PgUp" v-if="ifShow">
							</image>
						</view>
					</view>
				</view>
				<view class="zdcj" style="border-top-left-radius: 30px;" v-if="!ifShow">
					<view class="border_back">自动采集</view>
					<view class="zdcj_table table">
						<view class="table_head">
							<view>测点名称</view>
							<view>数据类型</view>
							<view>实时数据</view>
						</view>
						<view class="table_body">
							<view class="table_tr" v-for="(item) in pointList" :key="item.id">
								<view>{{ item.pointName }}</view>
								<view>{{ item.rwTypeName }}</view>
								<view>{{ item.value }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="xwgg" style="border-top-left-radius: 30px;" v-if="!ifShow">
					<view class="border_back">新闻公告</view>
					<view class="xwgg_table table">
						<view class="table_body" style="height: 100%;">
							<view class="table_tr " style="height:25%;" @click="lookNews(items)"
								v-for="items in newsList" :key="items.id">
								<view style="overflow:hidden;white-space: nowrap;text-overflow: ellipsis;">
									{{ items.title }}</view>
								<view>{{ items.time }}</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view class="center3">
				<view class="center_btn" v-for="(item, index) in processInfo" :key='index' @click='linkToNews(item)'>
					{{ item.text }}
				</view>
				<!-- <view class="center_btn" @click="workStart"><div>开工</div></view>
				<view class="center_btn" @click="workHangUp">挂起</view>
				<view class="center_btn" @click="toPage('/pages/dispatch/index')">待派计划</view>
				<view class="center_btn" @click="toPage('/pages/processReport/add')">工序汇报</view>
				<view class="center_btn" @click="toPage('/pages/materialCollect/add')">用料采集</view>
				<view class="center_btn" @click="toPage('/pages/processCheck/index')">工序检验</view>
				<view class="center_btn" @click="toPage('/pages/task/index')">异常汇报</view>
				<view class="center_btn" @click="toPage('/pages/repairRecord/add')">维修记录</view> -->
			</view>
		</view>
		<view class="news_out" v-if="show_news">
			<view class="news_container">
				<view class="news_in">
					<uni-icons type="closeempty" size="30" class="news_closeempty"
						@click="show_news = false"></uni-icons>
					<view class="news_title">{{ viewDetail.title }}</view>
					<h5>
						<span style="margin-right: 10px;">发布日期：{{ viewDetail.createttime }}</span>
						<span style="margin-right: 10px;">发布人：{{ viewDetail.createbyname }}</span>
						<span>发布对象：全体员工</span>
					</h5>
					<view class="article_out">
						<article>
							<p v-html="viewDetail.text"></p>
						</article>
					</view>

				</view>
			</view>
		</view>
		<view class="news_out" v-if='show_imgs'>
			<view class="news_container">
				<view class="news_in">
					<uni-icons type="closeempty" size="30" class="news_closeempty"
						@click="show_imgs = false"></uni-icons>
					<view class='process_title'>查看附件</view>
					<view class="article_out article_out_img">
						<img v-for="(item, index) in imgList" :src='item' :key='index' />
					</view>

				</view>
			</view>
		</view>
		<!-- 挂起原因 -->
		<view class="news_out" v-if='show_gua'>
			<view class="news_container">
				<view class="news_in">
					<uni-icons type="closeempty" size="30" class="news_closeempty"
						@click="show_gua = false"></uni-icons>
					<view class='process_title' required>挂起原因</view>
					<view class="article_out article_out_img">
						<textarea class='guaqi' v-model='pendingReason'></textarea>
					</view>
					<view class='submit_gua_qu'>
						<view class='submit_guaqi' @click='submitGuaQi'>提交</view>
						<view class='submit_quxiao' @click='show_gua = false'>取消</view>
					</view>

				</view>
			</view>
		</view>
		<!-- <view :class="isShow ? 'w100' : ''" @click="changeMenuBack()">
			<view class="goGo" v-if="isZx">
				<img src="../../static/在线客服.png" alt="" @click.stop="changeMenu">
			</view>
			<view class="goGo2" v-if="isShow">
				<view style="position:relative">
					<img class="img-right" src="../../static/QQ客服.png" alt="" @click.stop="changeImg(1)">
					<img class="img-right" src="../../static/微信客服.png" alt="" @click.stop="changeImg(2)">
					<img class="img-right" src="../../static/在线课堂.png" alt="" @click.stop="changeImg(3)">
					<img src="../../static/QQ客服号.png" alt="" :class="imgShow == 1 ? 'active-one' : ''"
						v-if="imgShow == 1">
					<img src="../../static/erweima.png" alt="" :class="imgShow == 2 ? 'active-two' : ''"
						class="img-show" v-if="imgShow == 2">
					<img src="../../static/芯软云视频号.png" alt="" :class="imgShow == 3 ? 'active-two' : ''" class="img-show"
						v-if="imgShow == 3">
				</view>
			</view>
		</view> -->
		<!-- <view class="bottom_copy">
			<view class="bottom_copy_in">
				<span style="margin-right: 10px;">Copyright © 无锡芯软智控系统有限公司All Right Reserved</span>
				<span style="margin-right: 10px;">服务热线: 4000-585-787 （0510）81080220 </span>
				<span>网址:<a href="http://www.wxxinsoft.com">www.wxxinsoft.com</a></span>
			</view>
			<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
				<uni-popup-dialog @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view> -->
	</view>
</template>

<script>
	import {
		config
	} from '../../request/js/config.js'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				startWorkBtn: false,
				endWorkBtn: false,
				processInfo: [],
				ifShow: false,
				pendingReason: '', //挂起原因
				show_gua: false,
				show_imgs: false,
				imgList: [], //工序配置里的图片
				title: 'Hello',
				date: "",
				time: "",
				weekday: '',
				userInfo: "",
				token: '',
				newsList: [],
				startWorkingInfo: {},
				dispatchList: [],
				pointList: [],
				websoketData: [],
				chooseItemIndex: -1, //选择的等待工单
				viewDetail: {
					title: "",
					createttime: "",
					createbyname: "",
					text: ""
				},
				show_news: false,
				isShow:false,
				isZx:true,
				imgShow:0
			}
		},

		onShow() {
			let _this = this;
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					// console.log(res.data)
					_this.userInfo = res.data
					_this.token = res.data.token
					_this.getNews();
					// _this.getStartWorking();
					_this.getDetailOfDisptch();
					_this.getRoles()
				},
				fail: function(res) {
					uni.redirectTo({
						url: '../login/login'
					});
				}
			});
			this.getTime();
			let this_ = this;
			setInterval(function() {
				this_.getTime();
			}, 1000)
		},
		mounted() {
			this.getRoles()
			this.openWebsoket();
			this.onmessageWebsoket();
		},
		watch: {
			websoketData: {
				handler: function(newVal, oldVal) {
					if (newVal[0] == '{') {
						if (JSON.parse(newVal).datas && this.pointList.length > 0) {
							this.changeValue();
						}
					}

				},
				deep: true
			},
		},
		methods: {
			// 切换侧边在线客服菜单
			  changeMenu(){
			    this.isShow=true
			    this.isZx=false
			  },
			  changeMenuBack(){
			    this.isZx=true
			    this.isShow=false
				this.imgShow=0
			  },
			  changeImg(num){
			    this.imgShow=num
			  },
			  changeTop(){
			    this.imgShow=0
			  },
			changeValue() {
				if (this.websoketData[0] == "{") {
					let websoketArr = JSON.parse(this.websoketData).datas;
					let pointList = JSON.parse(JSON.stringify(this.pointList))

					for (let i = 0; i < pointList.length; i++) {
						let flag = true;
						for (let j = 0; j < websoketArr.length; j++) {
							if (pointList[i].id == websoketArr[j].pointId) {
								flag = false;
								this.$set(pointList[i], 'value', websoketArr[j].value)
							}
						}
						if (flag) {
							this.$set(pointList[i], 'value', "--")
						}
					}
					for (let i in pointList) {
						this.$set(this.pointList, i, pointList[i])
					}
				}
			},
			//连接成功建立的回调方法
			openWebsoket() {
				if (websocket) {
					websocket.close();
				}
				// let href = window.location.href
				// let wsHref = href.split("//")[1].split(":")[0]
				let wsHref = window.location.hostname
				// let wsHref="192.168.1.83"
				if (this.userInfo == '') {
					return;
				}
				// console.log(this.userInfo)
				// let port = this.userInfo.port
				// let url = JSON.parse(Cookies.get("userInfo")).mqttUrl;
				let url = this.userInfo.mqttUrl;
				let ws = "ws://" + url + "/cusWebSocket/" + this.userInfo.token; //Auth.hasToken();
				// let ws="ws://"+wsHref+":"+port+"/cusWebSocket/"+this.token
				//判断当前浏览器是否支持WebSocket
				if ('WebSocket' in window) {
					//连接WebSocket节点
					// websocket = new WebSocket("ws://192.168.1.50:8888/cusWebSocket/"+Auth.hasToken());
					websocket = new WebSocket(ws)
				} else {
					alert('Not support websocket')
				}
				websocket.onopen = function(event) {}
			},

			//接收到消息的回调方法
			onmessageWebsoket() {
				let _this = this;
				if (websocket) {
					websocket.onmessage = function(event) {
						// console.log(event)
						_this.websoketData = event.data;
					}
				}
			},

			// 获取权限
			getRoles() {
				this.$http.request({
					url: '/apis/sys/getMenus',
					method: 'POST',
					params: {
						terminal: 2
					},
				}).then(res => {
					if (res && res.data && res.data.code == 0) {
						// console.log(res.data.menus)
						this.processInfo = res.data.menus[0].children
					}
				})
			},

			linkToNews(item) {
				if (item.routePath) {
					if (item.routePath == '/pages/materialCollect/add') {
						if (this.startWorkingInfo.dispatchItemId) {
							uni.navigateTo({
								url: item.routePath + "?code=" + this.startWorkingInfo.code + "&dispatchItemId=" + this.startWorkingInfo.dispatchItemId
							});
						} else {
							uni.showToast({
								title: "请先选择工单",
								icon: "none",
								duration: 2000
							});
						}

					} else if (item.routePath == '/pages/processReport/add') {
						if (this.startWorkingInfo.dispatchItemId) {
							uni.navigateTo({
								// url:url,
								url: '/pages/processReport/add?id=' + this.dispatchList[this.chooseItemIndex].dispatchId
							});
						} else {
							uni.showToast({
								title: "没有在制工单",
								icon: "none",
								duration: 2000
							});
						}
					} else {
						uni.navigateTo({
							url: item.routePath
						});
					}
					// uni.navigateTo({
					// 	url: item.routePath?
					// });
				} else {
					if (item.text == '开工') {
						this.workStart()
					} else if (item.text == '挂起') {
						this.workHangUp()
					} else {

					}

				}
			},

			chooseItem(index) {
				this.chooseItemIndex = index;
				this.disptchDetail()

			},
			//开工
			workStart() {
				var _this = this
				if (this.chooseItemIndex == -1) {
					uni.showToast({
						title: '请先选择工单',
						icon: "none",
						duration: 2000
					});
					return
				}
				this.$http.request({
					url: '/apis/mes/dispatch/workStart',
					method: 'POST',
					params: {
						dispatchId: this.dispatchList[this.chooseItemIndex].dispatchId,
					},
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '操作成功',
							icon: "none",
							duration: 2000
						});
						// _this.chooseItemIndex=-1;
						_this.getStartWorking();
						_this.getDetailOfDisptch();
					} else {
						uni.showToast({
							title: res.data.msg ? res.data.msg : '操作失败',
							icon: "none",
							duration: 2000
						});
					}
				});
			},
			submitGuaQi() {
				if (this.pendingReason == '') {
					uni.showToast({
						title: '请填写挂起原因',
						icon: "none",
						duration: 2000
					});
					return
				}

				let _this = this;

				_this.$http.request({
					url: '/apis/mes/dispatch/workHangUp',
					method: 'POST',
					params: {
						dispatchId: _this.startWorkingInfo.dispatchItemId,
						pendingReason: _this.pendingReason
					},
				}).then(res => {
					this.show_gua = false
					_this.pendingReason = ''
					if (res.data.code == 0) {
						uni.showToast({
							title: '操作成功',
							icon: "none",
							duration: 2000
						});
						_this.getStartWorking();
						_this.getDetailOfDisptch();
					} else {
						uni.showToast({
							title: res.data.msg ? res.data.msg : '操作失败',
							icon: "none",
							duration: 2000
						});
					}
				});
			},
			//挂起
			workHangUp() {

				if (this.startWorkingInfo.dispatchItemId == undefined) {
					uni.showToast({
						title: '请先选择工单',
						icon: "none",
						duration: 2000
					});
					return
				}
				this.show_gua = true
				// uni.showModal({
				//     title: '',
				//     content: '确定挂起在制工单吗?',
				//     success: function (res) {
				//         if (res.confirm) {
				//         } else if (res.cancel) {
				//         }
				//     }
				// });

			},
			//新闻公告
			getNews() {
				this.$http.request({
					url: '/apis/news/list',
					method: 'GET',
					params: {
						pageno: 1,
						pagesize: 4
					},
				}).then(res => {
					if (res) {
						if (!res.data.data || res.data.data.datas.length == 0) { //没有数据
							this.newsList = [];
							return;
						}
						if (res.data.code == 0) {
							this.newsList = res.data.data.datas;
							this.newsList.forEach(item => {
								item.time = item.updatetime.split('-')[0] + "/" + item.updatetime.split('-')[1] + "/" + item.updatetime.split(
									'-')[2].split(' ')[0]
							})
						}
					}
				});
			},
			//在制工单
			getStartWorking() {
				this.disptchDetail()
				// this.$http.request({
				//   url: '/apis/mes/dispatch/getOneStartWorking',
				//   method:'post',
				// }).then(res=>{
				// 	 if(res){
				// 		 if(res.data.code == 0){
				// 			 this.startWorkingInfo=res.data.data?res.data.data:{},
				// 			 console.log(this.startWorkingInfo)
				// 			  this.startWorkingInfo.time=this.startWorkingInfo.endTime?this.startWorkingInfo.endTime.split(' ')[0]:''
				// 		// imgList
				// 		if(res.data.fileList){
				// 			res.data.fileList.forEach(item=>{
				// 				this.imgList.push(config.imgURL+item.filePath)
				// 			})
				// 		}
				// 		 }
				// 	 }
				// });
			},
			//等待工单
			getDetailOfDisptch() {
				this.$http.request({
					url: '/apis/mes/dispatch/detailOfdisptch',
					method: 'post',
					params: {
						// pageno: 1,
						pagesize: 500,
						operator: this.userInfo.userId,
						status: [249, 233, 237],
					}
				}).then(res => {
					if (res) {
						if (res.data.code == 0) {
							this.dispatchList = res.data.data ? res.data.data.datas : [],
								this.dispatchList.forEach(item => {
									item.time = item.endTime.split(' ')[0]
								})
						}
					}
				});
			},

			// 获取等待工单详情
			disptchDetail() {
				this.$http.request({
					url: '/apis/mes/dispatch/getStartWorkingDetail',
					method: 'post',
					params: {
						id: this.dispatchList[this.chooseItemIndex].dispatchId,
					}
				}).then(res => {
					if (res) {
						if (res.data.code == 0) {
							this.startWorkingInfo = res.data.data ? res.data.data : {},
								this.startWorkingInfo.time = this.startWorkingInfo.endTime ? this.startWorkingInfo.endTime.split(' ')[0] : ''
							this.pointList = res.data.pointList ? res.data.pointList : [],

								this.imgList = []
							if (res.data.fileList) {
								res.data.fileList.forEach(item => {
									this.imgList.push(config.imgURL + item.filePath)
								})
							}
							if (this.pointList.length > 0) {
								this.openWebsoket();
								this.onmessageWebsoket();
								this.changeValue();
							}
						} else {
							this.pointList = []
						}
					}
				});
			},


			toPage(url) {
				if (url == '/pages/materialCollect/add') {
					if (this.startWorkingInfo.dispatchItemId) {
						uni.navigateTo({
							url: url + "?code=" + this.startWorkingInfo.code + "&dispatchItemId=" + this.startWorkingInfo.dispatchItemId
						});
					} else {
						uni.showToast({
							title: "没有在制工单",
							icon: "none",
							duration: 2000
						});
					}

				} else if (url == '/pages/processReport/add') {
					if (this.startWorkingInfo.dispatchItemId) {
						uni.navigateTo({
							// url:url,
							url: '/pages/processReport/add?id=' + this.dispatchList[this.chooseItemIndex].dispatchId
						});
					} else {
						uni.showToast({
							title: "没有在制工单",
							icon: "none",
							duration: 2000
						});
					}
				} else {
					uni.navigateTo({
						url: url
					});
				}

			},
			formatDate(n) {
				if (n.toString().length == 1) {
					return '0' + n
				} else {
					return n
				}
			},
			getTime() {
				let datatime = new Date();
				this.date = datatime.getFullYear() + '/' + this.formatDate(datatime.getMonth() + 1) + '/' + this.formatDate(
					datatime.getDate())
				this.time = this.formatDate(datatime.getHours()) + ":" + this.formatDate(datatime.getMinutes()) + ":" + this.formatDate(
					datatime.getSeconds())
				let a = ["日", "一", "二", "三", "四", "五", "六"];
				this.weekday = a[datatime.getDay()]
			},
			// 下拉
			PgDown() {
				this.ifShow = true
			},
			// 上拉
			PgUp() {
				this.ifShow = false
			},
			//退出登录
			toLoginOut() {
				uni.showModal({
					title: '',
					content: '退出登录吗?',
					success: function(res) {
						if (res.confirm) {
							var admin_info = uni.getStorageSync('admin_info');
							// console.log(admin_info)
							uni.clearStorage();
							if (admin_info) {
								uni.setStorage({
									key: 'admin_info',
									data: admin_info,
									success: function() {
										uni.reLaunch({
											url: '../login/login'
										})
									}
								});
							} else {
								uni.reLaunch({
									url: '../login/login'
								})
							}
						} else if (res.cancel) {}
					}
				});
			},
			//查看新闻
			lookNews(items) {
				this.viewDetail = {};
				this.viewDetail = Object.assign({}, this.viewDetail, items);
				this.show_news = true
			},
			goCustomerService(){
				this.$refs.dialogInput.open()
			}
		},
		onBackPress(options) { //取消默认的返回事件.

			return true;
		}
	}
</script>

<style>
.process_title[required]:before {
	position: relative;
	content: "*";
	color: red;
	left: 0;
	top: 0;
}

.table_body::-webkit-scrollbar {
	width: 5px;
	background-color: #707789;
}

.content {
	/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	position: absolute;
	background-color: #16171c;
	width: 100%;
	height: 100%;
}

.top_img {
	position: absolute;
	display: block;
	margin: auto;
	left: 0;
	right: 0;
	width: 94%;
	height: 56px;
	top: 20px;
	background-image: url('../../static/top2.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.date {
	font-family: "黑体";
	position: absolute;
	font-size: 15px;
	right: 9%;
	color: #fff;
	text-align: center;
	top: -2px;
}

.login_out {
	position: absolute;
	width: 25px;
	height: 25px;
	right: 5%;
	top: -2px;
	cursor: pointer;
}

.arrows_out {
	position: absolute;
	width: 25px;
	height: 15px;
	right: 5%;
	top: -2px;
	cursor: pointer;
}

.top_logo {
	position: absolute;
	display: block;
	left: 10%;
	width: 115px;
	height: 30px;
	top: -2px;
}

.center {
	position: absolute;
	width: 90%;
	/* height: calc(100% - 106px); */
	height: calc(100% - 136px);
	left: 5%;
	top: 86px;
}

.center1 {
	position: relative;
	width: 100%;
	height: calc((100% - 40px) * 0.3);
}

.center1_left {
	position: absolute;
	width: calc((100% - 40px) * 0.3);
	height: 100%;
	left: 0;
	box-sizing: border-box;
	border-radius: 14px;
	border: 1px solid #193b5a;
	box-shadow: 5px 5px 10px rgba(23, 60, 144, 0.5) inset, -5px -5px 10px rgba(23, 60, 144, 0.3) inset;
}

.userInfo {
	position: absolute;
	padding-top: 10px;
	width: 50%;
	height: 100%;
	left: 0;
	top: 0;
	box-sizing: border-box;
}

.user_info_item {
	position: relative;
	width: 100%;
	padding: 5px;
	font-size: 14px;
	/* font-size: 1.5vw; */
	color: #fff;
	word-break: break-all;
	padding-left: 50px;
	/* padding-left: 4.5vw; */
	box-sizing: border-box;
}

.user_info_item_name {
	position: absolute;
	left: 8px;
}

.photo {
	position: absolute;
	width: 40%;
	height: 100%;
	right: 0;
	top: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-sizing: border-box;
}

.center1_center {
	position: absolute;
	width: calc((100% - 40px) * 0.4);
	height: 100%;
	left: calc((100% - 40px) * 0.3 + 20px);
	border: 1px solid #193b5a;
	box-sizing: border-box;
	border-radius: 14px;
	box-shadow: 5px 5px 10px rgba(23, 60, 144, 0.5) inset, -5px -5px 10px rgba(23, 60, 144, 0.3) inset;
}

.border_back {
	position: absolute;
	font-size: 14px;
	left: 0;
	top: 0;
	color: #fff;
	width: 125px;
	height: 40px;
	/* width: 12vw; */
	/* height: 4vw; */
	text-align: center;
	line-height: 30px;
	background-image: url("../../static/border_back.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}

.center1_center_headtext {
	position: absolute;
	height: 40px;
	line-height: 40px;
	left: 128px;
	right: 3px;
	top: 0;
	text-align: center;
	font-size: 15px;
	color: #fff;
}

.center1_center_list {
	position: relative;
	width: 100%;
	padding: 0 5px;
	box-sizing: border-box;
	height: calc(100% - 70px);
	float: left;
	margin-top: 35px;
	/* margin-top: 3.5vw; */
	color: #fef28a;
	font-size: 14px;
	line-height: 14px;
}

.center1_center_list view {
	float: left;
	min-height: 25%;
	width: 50%;
	word-break: break-all;
	/* overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap */
}

.center1_center_list :nth-child(odd) {
	width: 60%;
}

.center1_center_list :nth-child(even) {
	width: 40%;
}

.center1_center_list_state {
	position: absolute;
	background-image: linear-gradient(to top, rgba(56, 144, 234, 1), rgba(56, 116, 217, 1));
	/* width: auto !important; */
	padding: 0 14px;
	line-height: 24px;
	margin-left: 10px;
	font-size: 14px;
	bottom: 5px;
	color: #fef28a;
}

.center1_right {
	position: absolute;
	width: calc((100% - 40px) * 0.3);
	height: 100%;
	right: 0;
	border: 1px solid #193b5a;
	box-sizing: border-box;
	border-radius: 14px;
	box-shadow: 5px 5px 10px rgba(23, 60, 144, 0.5) inset, -5px -5px 10px rgba(23, 60, 144, 0.3) inset;
}

.center1_center_right {
	position: relative;
	width: 100%;
	height: calc(100% - 40px);
	float: left;
	margin-top: 30px;
	/* margin-top: 3.5vw; */
	color: #fff;
	font-size: 14px;
	/* line-height: 14px; */
	text-align: justify;
	line-height: 25px;
	padding: 10px;
	box-sizing: border-box;
	overflow: auto;
}

.center2 {
	position: relative;
	float: left;
	margin-top: 20px;
	width: calc((100% - 40px)*0.7 + 20px);
	height: calc((70% - 8px));
}

.ddgd {
	position: absolute;
	width: 100%;
	height: calc((100% - 20px) * 0.5);
	left: 0;
	top: 0;
	border: 1px solid #193b5a;
	border-radius: 14px;
	box-shadow: 5px 5px 10px rgba(23, 60, 144, 0.5) inset, -5px -5px 10px rgba(23, 60, 144, 0.3) inset;
}

.ddgd1 {
	position: absolute;
	width: 100%;
	height: calc((100% - 20px) * 1);
	left: 0;
	top: 0;
	border: 1px solid #193b5a;
	border-radius: 14px;
	box-shadow: 5px 5px 10px rgba(23, 60, 144, 0.5) inset, -5px -5px 10px rgba(23, 60, 144, 0.3) inset;
}

.zdcj {
	position: absolute;
	width: calc((100% - 20px) * 0.5);
	height: calc((100% - 20px) * 0.5);
	left: 0;
	bottom: 0;
	border: 1px solid #193b5a;
	border-radius: 14px;
	box-shadow: 5px 5px 10px rgba(23, 60, 144, 0.5) inset, -5px -5px 10px rgba(23, 60, 144, 0.3) inset;
}

.xwgg {
	position: absolute;
	width: calc((100% - 20px) * 0.5);
	height: calc((100% - 20px) * 0.5);
	right: 0;
	bottom: 0;
	border: 1px solid #193b5a;
	border-radius: 14px;
	box-shadow: 5px 5px 10px rgba(23, 60, 144, 0.5) inset, -5px -5px 10px rgba(23, 60, 144, 0.3) inset;
}

.table {
	position: relative;
	height: calc(100% - 40px);
	/* height: calc(100% - 3.5vw); */
	margin-top: 40px;
	/* margin-top: 3.5vw; */
	font-size: 14px;
	/* font-size: 1.5vw; */
	width: 100%;
	color: #fff;
	text-align: center;
}

.table_head {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #152c51;
	line-height: 35px;
	height: 35px;
	/* line-height: 3.5vw;
		height: 3.5vw; */
}

.table_body {
	position: relative;
	height: calc(100% - 35px) !important;
	overflow: auto;
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
}

.table_tr {
	position: relative;
	font-size: 14px;
	width: 100%;
	height: 33.3%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #16171c;
}

.table_tr1 {
	position: relative;
	font-size: 14px;
	width: 100%;
	height: 16.65%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #16171c;
}

.table_tr_choose {
	background-color: #558bc5;
	font-size: 17px;
}

.table_tr:after {
	position: absolute;
	content: '';
	height: 1px;
	width: 96%;
	left: 2%;
	bottom: 0;
	background-color: #182a4c;
}

.table_tr1:after {
	position: absolute;
	content: '';
	height: 1px;
	width: 96%;
	left: 2%;
	bottom: 0;
	background-color: #182a4c;
}

.table_tr_choose:after {
	display: none;
}

.ddgd_table .table_head view,
.ddgd_table .table_tr view {
	width: 16.5%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ddgd_table .table_head view,
.ddgd_table .table_tr1 view {
	width: 16.5%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zdcj_table .table_head view,
.zdcj_table .table_tr view {
	width: 33.3%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xwgg_table .table_tr view:nth-of-type(1) {
	text-align: left;
	position: absolute;
	width: 100%;
	padding-right: 120px;
	padding-left: 14px;
	box-sizing: border-box;
}

.xwgg_table .table_tr view:nth-of-type(2) {
	position: absolute;
	right: 14px;
	text-align: left;
}

.center3 {
	padding: 10px 5px;
	position: relative;
	float: right;
	/* margin-left: 20px; */
	margin-top: 20px;
	width: calc(30% - 12px);
	height: calc((70% - 8px));
	border: 1px solid #193b5a;
	box-shadow: 5px 5px 10px rgba(23, 60, 144, 0.5) inset, -5px -5px 10px rgba(23, 60, 144, 0.3) inset;
	box-sizing: border-box;
	border-radius: 14px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}

.center_btn {
	position: relative;
	width: calc((100% - 40px) / 2);
	padding-top: calc(((100% - 160px) / 4 -22px) / 2);
	padding-bottom: calc(((100% - 160px) / 4 -22px) / 2);
	padding-left: 8px;
	padding-right: 8px;
	color: #fef28a;
	font-size: 21px;
	line-height: 21px;
	text-align: center;
	white-space: nowrap;
	text-align: center;
	/* border: 1px solid #193b5a; */
	border-radius: 3px;
	/* box-shadow: 5px 5px 10px rgba(28,45,104,1) inset,-5px -5px 10px rgba(28,45,104,1) inset; */
	box-sizing: border-box;
	background-image: linear-gradient(to top, rgba(7, 40, 93, 1), rgba(0, 66, 145, 1));
	cursor: pointer;

}

.center_btn image {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.news_out {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
}

.news_container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.news_in {
	position: relative;
	font-size: 17px;
	color: #333;
	width: 80%;
	max-height: 80%;
	background-color: #fff;
	border-radius: 5px;
	padding: 15px;
	box-sizing: border-box;
	overflow: hidden;
}

.news_title {
	padding-right: 20px;
	line-height: 24px;
	font-size: 18px;
	color: #303133;
}

.article_out {
	position: relative;
	overflow: auto;
	max-height: 500px;
}

.article_out_img {}

.article_out_img img {
	width: 100%;
	margin-top: 5px;
}

.news_closeempty {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 1;
}

.news_in h5 {
	margin: 10px 0;
}

.bottom_copy {
	position: fixed;
	width: 100%;
	bottom: 10px;
	color: #a6a6a6;
	font-size: 13px;
	text-align: center;
}

.bottom_copy_in {
	position: relative;
	display: flex;
	justify-content: center;
}

.bottom_copy_in a {
	color: #a6a6a6;
}

.process_title {
	line-height: 30px;
	width: 100%;
	text-align: center;
	font-size: 16px;
}

.guaqi {
	width: 90%;
	margin: auto;
	height: 100px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #ccc;
}

.submit_gua_qu {
	position: relative;
	margin: auto;
	margin-top: 15px;
	width: 170px;
	height: 40px;
}

.submit_guaqi,
.submit_quxiao {
	float: left;
	width: 80px;
	height: 40px;
	line-height: 40px;
	background-color: #007AFF;
	text-align: center;
	color: #fff;
	border-radius: 4px;
	margin: auto;
	cursor: pointer;
}

.submit_quxiao {
	float: right;
}

.arrows {
	position: absolute;
	left: 52%;
	top: 100%;
	transform: translate(-50%, -50%);
}

.waitCountStyle {
	position: absolute;
	left: 55.5%;
	top: 77%;
	/* background-image: linear-gradient(to top, rgba(56,144,234,1) , rgba(56,116,217,1)); */
	/* width: auto !important; */
	padding: 0 14px;
	line-height: 24px;
	margin-left: 10px;
	font-size: 14px;
	bottom: 5px;
	color: #fef28a;
	width: 100%;
}

.hidden {
	overflow: hidden;
	text-overflow: ellipsis; //超出部分以省略号显示
	white-space: nowrap;
}

.goGo {
	width: 42px;
	height: 140px;
	position: fixed;
	bottom: 45%;
	right: 0;
	z-index: 100;
	transform: scale(0.7);
}

.goGo2 {
	width: 62px;
	position: fixed;
	bottom: 40%;
	right: 10px;
	z-index: 100;
}

.active {
	position: absolute;
	top: 0;
	right: 0;
}

.active-one {
	position: absolute;
	top: 0;
	right: 65px;
}

.active-two {
	position: absolute;
	top: 25px;
	right: 65px;
}

.img-show {
	width: 150px;
	height: 150px;
}

.img-right {
	float: left;
	margin-bottom: 10px;
}

.w100 {
	width: 100%;
	height: 100%;
}
</style>
