zhgdyunapp/pages/projectEnd/emergencyDisposal/index.vue

<template>
	<view class="emergencyDisposal">
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				应急处置
			</view>
		</headers>
		<view class="problemOverview">
			<view class="overFlex">
				<view class="overLeft">问题概览</view>
				<view class="overRight">{{nowTime}}</view>
			</view>
			<view class="problemData">
				<view class="dataBox1 dataStyle">
					<!-- <view class="day" v-if="statisticsValue.totalNumDifferYesterday<0">
						较昨日{{statisticsValue.totalNumDifferYesterday||0}}</view>
					<view class="day" v-else>较昨日+{{statisticsValue.totalNumDifferYesterday||0}}</view> -->
					<view class="num">{{statisticsValue.totalNum}}</view>
					<view class="text">总数</view>
				</view>
				<view class="dataBox2 dataStyle">
					<!-- <view class="day" v-if="statisticsValue.oseNumDifferYesterday<0">
						较昨日{{statisticsValue.oseNumDifferYesterday}}</view>
					<view class="day" v-else>
						较昨日+{{statisticsValue.oseNumDifferYesterday||0}}</view> -->
					<view class="num">{{statisticsValue.overdueNotCloseNum}}</view>
					<view class="text">待救援</view>
				</view>
				<view class="dataBox4 dataStyle">
					<!-- 	<view class="day" v-if="statisticsValue.notCloseNumDifferYesterday<0">
						较昨日{{statisticsValue.notCloseNumDifferYesterday||0}}</view>
					<view class="day" v-else>较昨日+{{statisticsValue.notCloseNumDifferYesterday||0}}</view> -->
					<view class="num">{{statisticsValue.notCloseNum}}</view>
					<view class="text">救援中</view>
				</view>
				<view class="dataBox3 dataStyle">
					<!-- <view class="day" v-if="statisticsValue.closeNumDifferYesterday<0">
						较昨日{{statisticsValue.closeNumDifferYesterday||0}}</view>
					<view class="day" v-else>较昨日+{{statisticsValue.closeNumDifferYesterday||0}}</view> -->
					<view class="num">{{statisticsValue.closeNum}}</view>
					<view class="text">已完成</view>
				</view>
			</view>
			<!-- <view class="overDataList">
        待整改
        <span style="margin-left: 35px;">{{statisticsValue.rectificationNum}}</span>
        待复查
        <span style="margin-left: 35px;">{{statisticsValue.reviewNum}}</span>
        待核验
        <span style="margin-left: 35px;">{{statisticsValue.verificationNum}}</span>
      </view> -->
			<!--  <view class="overData">
        <view>待整改<span style="margin-left: 30px;">{{statisticsValue.rectificationNum}}</span></view>
        <view>待复查<span style="margin-left: 30px;">{{statisticsValue.reviewNum}}</span></view>
        <view>待核验<span style="margin-left: 30px;">{{statisticsValue.verificationNum}}</span></view>
      </view> -->
		</view>
		<view class="commonModules">
			<view class="overEmergency">处置台账</view>
			<view class="modulesList">
				<view class="menu" @click="getnavigateTo('./detail')">
					<view>
						<text>报警人员姓名：</text>
						<text>李三</text>
					</view>
					<view>
						<text>应急类型：</text>
						<text>人员倒地</text>
					</view>
					<view class="detail">
						<text>应急详情：</text>
						<text>好好好好好好i多i啊u四偶爱甲方收到就</text>
					</view>
					<view class="time">
						<text>报警时间：</text>
						<text>2024-10-15 19:54</text>
					</view>
					<view class="lable-absolute">
						待救援
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import headers from "../../../components/headers/headers.vue"
	import uCharts from '@/components/u-charts/component.vue';
	var _self;
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				mendNumber: 0,
				submitNumber: 0,
				totalNum: 0,
				pieChartData: {
					title: {
						name: "1",
						color: '#7cb5ec',
						fontSize: 12,
						offsetY: 0,
						background: 'rgba(0,0,0,0)'
					},
					series: [{
							"data": 0,
							color: '#FA5C53'
						},
						{
							"data": 0,
							color: '#FFCC00'
						},
						{
							"data": 0,
							color: '#6DD400'
						},
						{
							"data": 0,
							color: '#44C5D7'
						},
					]
				},
				manageTypeList: [{
						typeName: '待整改数',
						totalNum: 26
					},
					{
						typeName: '待审核数',
						totalNum: 12
					},
					{
						typeName: '无需整改数',
						totalNum: 20
					},
					{
						typeName: '已闭合数',
						totalNum: 10
					}
				],
				colorList: ['#FA5C53', '#FFCC00', '#6DD400', '#44C5D7'],
				statusBarHeight: 0,
				projectSn: '',
				statisticsValue: {
					totalNum: 0, //总数
					closeNum: 0, //已闭合
					notCloseNum: 0, //未闭合
					overdueNotCloseNum: 0, //超期未关闭
					rectificationNum: 0, //待整改
					reviewNum: 0, //待复查
					verificationNum: 0, //待核验
					totalNumDifferYesterday: 0, //
					oseNumDifferYesterday: 0, //
					closeNumDifferYesterday: 0, //
					notCloseNumDifferYesterday: 0, //


				},
				nowTime: '',
				timer: '', //定义一个定时器
			}
		},
		mounted() {
			this.getTime()
			// this.getListData();
			// this.loadData();
		},
		onShow() {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			// this.getListData();
			// this.loadData();
			this.getRecordList()
		},
		methods: {
			//实时时间
			getTime() {
				this.timer = setInterval(() => {
					let timeDate = new Date()
					let year = timeDate.getFullYear()
					let mounth = timeDate.getMonth() + 1
					let day = timeDate.getDate()
					let hours = timeDate.getHours()
					hours = hours >= 10 ? hours : '0' + hours
					let minutes = timeDate.getMinutes()
					minutes = minutes >= 10 ? minutes : '0' + minutes
					let seconds = timeDate.getSeconds()
					seconds = seconds >= 10 ? seconds : '0' + seconds
					let week = timeDate.getDay()
					let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
					this.nowTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
				}, 1000)
			},
			//获取检查记录数据
			getRecordList() {
				let data = {
					projectSn: this.projectSn
				}
				this.sendRequest({
					url: 'xmgl/qualityInspectionRecord/list',
					method: 'post',
					data,
					success: res => {
						this.statisticsValue = res.result.total
						console.log('获取检查记录数据', res)
					}
				})
			},
			loadData() {
				if (this.manageTypeList.length > 0) {
					let arr = [];
					this.manageTypeList.forEach((item, index) => {
						let json = {
							"data": item.totalNum,
							color: this.colorList[index]
						};
						arr.push(json)
					});
					this.pieChartData.series = arr;
				};
			},
			//获取记录
			getListData() {
				let that = this;
				let userId = JSON.parse(uni.getStorageSync('userInfo')).userId;
				//获取我整改的巡查记录数量
				this.sendRequest({
					url: 'xmgl/qualityInspectionRecord/selectQualityStatistics',
					method: 'post',
					data: {
						projectSn: this.projectSn
					},
					success: res => {
						console.log(res)
						this.totalNum = res.result.total.totalNum
						let data = res.result
						let arr = [{
								typeName: '待整改数',
								num: data.total.rectificationNum
							},
							{
								typeName: '待审核数',
								num: data.total.reviewNum
							},
							{
								typeName: '无需整改数',
								num: data.total.totalNum - data.total.rectificationNum
							},
							{
								typeName: '已闭合数',
								num: data.total.closeNum
							}
						]
						this.manageTypeList = arr
						let arr2 = []
						this.manageTypeList.forEach((item, index) => {
							let json = {
								"data": item.num,
								color: this.colorList[index]
							};
							arr2.push(json);
						});
						this.pieChartData.series = arr2;
					}
				})

			},
			//列表页
			goList(type) {
				uni.navigateTo({
					url: "./list?type=" + type
				})
			},
			//新增按钮
			addBtn() {
				uni.navigateTo({
					url: "./addIssue?type=add"
				})
			},
			addPrjcet() {
				// 项目质量自检
				uni.navigateTo({
					url: "./projectList"
				})
			},
			qualityAlarm() {
				// 质量分析预警
				uni.navigateTo({
					url: "./analysisAlarm"
				})
			},
			getnavigateTo(url) {
				uni.navigateTo({
					url,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.emergencyDisposal {
		height: 100%;
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/.headerBox {
			background: #2b8df3;
			color: #fff;
		}
	}



	.problemOverview {
		// height: 33%;
		// box-sizing: border-box;
		border-radius: 10px;
		// border: 3px solid #fafbfc;
		margin: 17% 2% 11% 2%;
		padding: 3% 3%;


		.overFlex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.overRight {
				// float: right;
				font-size: 24rpx;
				color: gray;
				margin: 6rpx 0;
			}
		}



		.problemData {
			margin-top: 13%;
			display: flex;
			background: linear-gradient(180deg, #FCF2D6 0%, #FFFFFF 50%);
			box-shadow: 0 8rpx 16rpx 0 rgba(219, 229, 255, 0.6);
			border-radius: 10rpx;

			.dataStyle {
				width: 300rpx;
				// height: 180rpx;
				text-align: center;
				margin: 24rpx 0;
			}

			.dataStyle:not(:last-child) {
				border-right: 2rpx solid #FFD356;
			}

			.dataBox1 {
				// background: #ebf1ff;
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;

				.day {
					font-size: 12px;
					color: #3a7bff;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #3a7bff;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: bold;
					margin-top: 5px;
				}
			}

			.dataBox2 {
				// background: #fcebec;

				.day {
					font-size: 12px;
					color: #ea3941;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #ea3941;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}

			.dataBox3 {
				// background: #eef9f6;

				.day {
					font-size: 12px;
					color: #5ecba7;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #5ecba7;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}

			.dataBox4 {
				// background: #fff4e7;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;

				.day {
					font-size: 12px;
					color: #ff9810;
					margin-top: 10px;
				}

				.num {
					font-size: 20px;
					font-weight: bold;
					color: #ff9810;
					margin-top: 5px;
				}

				.text {
					font-size: 12px;
					font-weight: 600;
					margin-top: 5px;
				}
			}
		}
	}

	.overDataList {
		padding-left: 7px;
		margin-top: 15px;
	}

	.overDataList>span:not(:last-child)::after {
		content: '|';
		margin: 0 10px;
		color: #e9e9e9;
	}

	.commonModules {
		height: 66%;
		margin: -10% 2%;
		padding: 3% 3%;

		.modulesList {
			// display: flex;
			// flex-wrap: wrap;
			margin-top: 4%;

			// display: grid;
			// grid-gap: 20px;
			// grid-template-columns: repeat(3, 1fr);
			.menu {
				// text-align: center;
				// margin-left: 30px;
				// margin-bottom: 5%;
				font-size: 28rpx;
				padding: 16rpx 30rpx;
				background: linear-gradient( 180deg, rgba(255,255,255,0.1) 0%, rgba(198,220,255,0.2) 100%);
				box-shadow: 0px 8rpx 32rpx -8rpx rgba(42,60,106,0.24);
				border-radius: 34rpx;
				position: relative;
				line-height: 44rpx;
				view:not(:first-child){
					margin-top: 20rpx;
				}
				view {
					display: flex;

					text:last-child {
						flex: 1,
					}
				}
				
				.detail {
					flex-direction: column;
				}
				.time {
					color: rgba(0, 0, 0, 0.5);
					    font-size: 24rpx;
					    justify-content: flex-end;
						text:last-child {
							flex: initial;
						}
				}

				.lable-absolute {
					color: #ffffff;
					padding: 4rpx 24rpx;
					background-color: #5181F6;
					font-size: 24rpx;
					box-shadow: 0 8rpx 18rpx 0 rgba(81,129,246,0.37);
					border-radius: 148rpx;
					position: absolute;
					top: 26rpx;
					right: 38rpx;
				}
			}
		}
	}

	.overLeft {
		// float: left;
		color: #000;
		font-weight: bold;
		font-size: 34rpx;
	}
	
	.overEmergency {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 34rpx;
		line-height: 44rpx;
		padding-bottom: 20rpx;
		color: #000000;
		position: relative;
	}
	.overEmergency::after{
		content: "";
		width: 190rpx;
		border-bottom: 6rpx solid #3A7BFF;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	// .smallHeight{
	// 	// height: calc(100% - 45px);
	// 	height: 100%;
	// 	box-sizing: border-box;
	// 	background: #F6F6F6;
	// }

	// .qualityManage >>> .headerBox {
	// 	background-color: #13b98c;
	// }
	// .chart_wrap .chart_box{
	// 	width: 60%;
	// 	position: relative;
	// }
	// .chart_wrap{
	// 	display: flex;
	// 	font-size: 12px;
	// 	color: #fff;
	// }
	// .chart_box #pieChart{
	// 	margin-left: 76rpx !important;
	// 	margin-top: 56rpx !important;
	// }
	// .chart_message{
	// 	margin-left: 60rpx;
	// 	padding-top: 60rpx;
	// }
	// .chart_wrap .flex{
	// 	width: 240rpx;
	// 	margin: 8rpx 0;
	// }
	// .chart_wrap .num {
	// 	font-size: 12px;
	// 	color: #fff;
	// }
	// .chart_title{
	// 	background: #0f9c75;
	// 	width: 216rpx;
	// 	height: 216rpx;
	// 	position: absolute;
	// 	z-index: 1;
	// 	border-radius: 50%;
	// 	left: 116rpx;
	// 	top: 96rpx;
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;
	// }
	// .chart_title span{
	// 	font-size: 24px;
	// }
	// .chart_wrap .bg_color{
	// 	width: 10rpx;
	// 	height: 10rpx;
	// 	border-radius: 50%;
	// 	margin: 0 16px 0 10px;
	// }
	// .qualityManage .content {
	// 	width: 100%;
	// 	height: 100%;
	// 	padding: 0px 30rpx 0;
	// 	box-sizing: border-box;
	// 	margin-top: -30px;
	// 	z-index: 99;
	// }

	// .flex {
	// 	display: flex;
	// 	align-items: center;
	// }

	// .flex2 {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// }

	// .item {
	// 	width: 100%;
	// 	box-sizing: border-box;
	// 	padding: 14px 30rpx;
	// 	box-shadow: 0 0 10px #d3d3d3;
	// 	margin-bottom: 18px;
	// 	border-radius: 4px;
	// 	color: rgba(51, 51, 51, 100);
	// 	font-size: 30rpx;
	// 	font-family: PingFangSC-Regular;
	// 	background-color: #FFFFFF;
	// }

	// .value {
	// 	font-size: 26rpx;
	// }

	// .num {
	// 	margin-right: 5px;
	// 	font-size: 37rpx;
	// 	color: #4181FE;
	// }

	// .addBtn {
	// 	position: absolute;
	// 	bottom: 50px;
	// 	left: 0;
	// 	right: 0;
	// 	width: 60%;
	// 	margin: 0 auto;
	// 	text-align: center;
	// 	padding: 10px 0;
	// 	border-radius: 30px;
	// 	background-color: rgba(65, 129, 254, 0.9);
	// 	font-size: 30rpx;
	// 	color: #fff;
	// 	box-shadow: 0 0 5px rgba(65, 129, 254, 0.7);
	// }

	// .addBtn:active {
	// 	background-color: #4181FE;
	// }
	// .chart_wrap{
	// 	width: 100%;
	// 	height: 480rpx;
	// 	background-image: url(../../../static/titleBg2.png);
	// 	background-size: cover;
	// }
</style>