From 5e485300b74b7f8734d057160fb1eb5f9a7c6e6a Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Sat, 3 Jun 2023 22:43:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B4=A8=E9=87=8F=E7=9B=91=E7=9D=A3?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../memberSelect/components/memberDetails.vue | 411 ++++++++++++++++++
 .../laborRealName/memberSelect/index.vue      | 158 +++++++
 .../components/projectDetails.vue             |   2 +-
 .../components/transformInfo.vue              | 299 +++++++++++++
 .../goverment/qualitySupervision/index.vue    | 193 ++++++++
 5 files changed, 1062 insertions(+), 1 deletion(-)
 create mode 100644 src/views/goverment/laborRealName/memberSelect/components/memberDetails.vue
 create mode 100644 src/views/goverment/laborRealName/memberSelect/index.vue
 create mode 100644 src/views/goverment/qualitySupervision/components/transformInfo.vue
 create mode 100644 src/views/goverment/qualitySupervision/index.vue

diff --git a/src/views/goverment/laborRealName/memberSelect/components/memberDetails.vue b/src/views/goverment/laborRealName/memberSelect/components/memberDetails.vue
new file mode 100644
index 0000000..0f9d3df
--- /dev/null
+++ b/src/views/goverment/laborRealName/memberSelect/components/memberDetails.vue
@@ -0,0 +1,411 @@
+<template>
+	<div class="overview">
+		<el-dialog :title="props.title" show-close v-model="visible1" style="min-width: 1500px">
+			<el-form ref="ruleFormRef" :model="form" label-width="200px" class="form" size="default">
+				<!-- 基础信息 -->
+				<div>
+					<div class="form-title">
+						<div>基本信息</div>
+					</div>
+					<div class="row">
+						<el-form-item label="工程名称:" prop="personName">
+							<el-input placeholder="请输入" v-model="form.personName" disabled />
+						</el-form-item>
+						<el-form-item label="类别:" prop="sex">
+							<el-input placeholder="请输入" v-model="form.personName" disabled />
+						</el-form-item>
+					</div>
+					<div class="row">
+						<el-form-item label="建设单位:" prop="birthday">
+							<el-input placeholder="请输入" v-model="form.personName" disabled />
+						</el-form-item>
+						<el-form-item label="施工总承包单位:" prop="nation">
+							<el-input placeholder="请输入" v-model="form.personName" disabled />
+						</el-form-item>
+					</div>
+					<div class="row">
+						<el-form-item label="施工许可证编码:" prop="idCard">
+							<el-input placeholder="请输入" v-model="form.idCard" />
+						</el-form-item>
+						<el-form-item label="项目状态:" prop="idCard">
+							<el-input placeholder="请输入" v-model="form.idCard" />
+						</el-form-item>
+					</div>
+					<div class="row">
+						<el-form-item label="项目联系人:" prop="issuingAuthorityForIdCard">
+							<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
+						</el-form-item>
+						<el-form-item label="工程总面积:" prop="idCardExpireDate">
+							<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
+						</el-form-item>
+					</div>
+					<div class="row">
+						<el-form-item label="工程用途:" prop="issuingAuthorityForIdCard">
+							<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
+						</el-form-item>
+						<el-form-item label="工程总面积:" prop="idCardExpireDate">
+							<el-date-picker
+								v-model="form.entryTime"
+								format="YYYY-MM-DD"
+								value-format="YYYY-MM-DD"
+								type="daterange"
+								placeholder="请选择"
+							/>
+						</el-form-item>
+					</div>
+					<div class="row">
+						<el-form-item label="建设地点:" prop="issuingAuthorityForIdCard">
+							<el-input placeholder="请输入" v-model="form.issuingAuthorityForIdCard" />
+						</el-form-item>
+					</div>
+				</div>
+				<!-- 其他信息 -->
+				<div>
+					<div class="form-tab">
+						<el-tabs v-model="activeName" @tab-click="handleClick">
+							<el-tab-pane label="参建班组" name="first">
+								<div class="table">
+									<el-table
+										:data="unitData"
+										border
+										max-height="340"
+										class="el-table"
+										:header-cell-style="{ backgroundColor: '#EBEEF5', textAlign: 'center' }"
+										:cell-style="{ textAlign: 'center' }"
+									>
+										<el-table-column prop="personName" label="建设单位名称" />
+										<el-table-column prop="personName" label="统一社会信用代码" />
+										<el-table-column prop="personName" label="联系人" />
+										<el-table-column prop="personName" label="联系人电话" />
+									</el-table>
+								</div>
+							</el-tab-pane>
+						</el-tabs>
+						<div class="statistics-page">
+							<Pagination
+								:pageable="pageable"
+								:background="true"
+								:handleSizeChange="handleSizeChange"
+								:handleCurrentChange="handleCurrentChange"
+							/>
+						</div>
+					</div>
+				</div>
+			</el-form>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch, reactive, onBeforeMount } from "vue";
+import Pagination from "@/components/ProTable/components/Pagination.vue";
+import type { FormInstance, UploadProps } from "element-plus";
+const props = defineProps({
+	detailsDialog: Boolean,
+	title: String,
+	formData: Object
+});
+const pageable = ref({
+	// 分页参数
+	pageNo: 1,
+	pageSize: 10,
+	total: 30
+});
+const activeName = ref("first");
+const handleClick = (tab: any, event: any) => {
+	console.log(tab, event);
+};
+const handleSizeChange = size => {
+	console.log(size);
+};
+const handleCurrentChange = currentPage => {
+	console.log(currentPage);
+};
+const searchForm = ref({
+	projectName: ""
+});
+const unitData = ref([
+	{
+		personName: 111
+	}
+]);
+const monthColumns = [];
+const visible1 = ref(false);
+const changeType = ref(1);
+const filelist = ref([]);
+const emits = defineEmits(["update:detailsDialog", "confirm"]);
+const ruleFormRef = ref<FormInstance>();
+const educationLevelList: any = ref([]);
+const form = ref();
+// 重置表单
+const resetForm = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
+watch(
+	() => props.detailsDialog,
+	(n, o) => {
+		visible1.value = n;
+	}
+);
+// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
+watch(visible1, (n, o) => {
+	emits("update:detailsDialog", n);
+});
+watch(
+	() => props.formData,
+	(n, o) => {
+		resetForm(ruleFormRef.value);
+		console.log(props.formData);
+		form.value = reactive(n);
+	}
+);
+
+onBeforeMount(() => {
+	for (let i = 0; i < 31; i++) {
+		monthColumns.push({
+			prop: "day" + (i + 1),
+			label: "" + (i + 1)
+		});
+	}
+});
+onMounted(() => {
+	// 初始化 配置formData
+	console.log(props.formData);
+	form.value = reactive(props.formData);
+});
+</script>
+
+<style lang="scss" scoped>
+@mixin fullwidth {
+	width: -webkit-fill-available;
+	width: -moz-available;
+	width: stretch;
+}
+@mixin flex {
+	display: flex;
+	align-items: center;
+}
+@mixin successCircle {
+	display: inline-block;
+	width: 11px;
+	height: 11px;
+	background: #008bff;
+	opacity: 1;
+	border-radius: 50%;
+	cursor: pointer;
+}
+@mixin errorCircle {
+	display: inline-block;
+	width: 11px;
+	height: 11px;
+	background: #d9d9d9;
+	opacity: 1;
+	border-radius: 50%;
+	cursor: pointer;
+}
+.overview {
+	// background-color: #fff;
+	flex: 1;
+	.form {
+		background-color: #fff;
+		.form-title {
+			display: flex;
+			flex-direction: column;
+			background-color: #fff;
+			margin-bottom: 32px;
+			div {
+				position: relative;
+				padding-left: 6px;
+				font-size: 14px;
+				font-weight: 400;
+				color: #333333;
+				border-left: 3px solid #008bff;
+			}
+		}
+		.form-tab {
+			.search {
+				@include flex();
+				span:first-child {
+					font-size: 14px;
+					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+					font-weight: 500;
+					color: #333333;
+					margin-right: auto;
+				}
+				span:nth-child(2) {
+					margin-right: 5px;
+				}
+				> div {
+					.successCircle {
+						@include successCircle();
+					}
+					.errorCircle {
+						@include successCircle();
+					}
+					.text {
+						font-size: 14px;
+						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+						font-weight: 400;
+						color: #333333;
+						margin-right: 10px;
+						margin-left: 10px;
+					}
+				}
+			}
+			.search-two {
+				@include flex;
+				span {
+					font-size: 14px;
+					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+					font-weight: 500;
+					color: #333333;
+					margin-right: 22px;
+				}
+			}
+			.search-form {
+				@include flex;
+				margin-top: 24px;
+				> span {
+					font-size: 14px;
+					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+					font-weight: 500;
+					color: #333333;
+					margin-right: 5px;
+				}
+			}
+			.search-three {
+				@include flex();
+				> span:first-child {
+					font-size: 14px;
+					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+					font-weight: 500;
+					color: #333333;
+				}
+				> span {
+					margin-right: 5px;
+				}
+				> span:nth-child(3) {
+					margin-left: 10px;
+				}
+				> div {
+					.successCircle {
+						@include successCircle();
+					}
+					.errorCircle {
+						@include errorCircle();
+					}
+					.text {
+						font-size: 14px;
+						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+						font-weight: 400;
+						color: #333333;
+						margin-right: 10px;
+						margin-left: 10px;
+					}
+				}
+			}
+			.table {
+				margin-top: 20px;
+				.successCircle {
+					@include successCircle();
+				}
+				.errorCircle {
+					@include successCircle();
+				}
+				.table-title {
+					position: relative;
+					padding-left: 6px;
+					font-size: 14px;
+					font-weight: 400;
+					color: #333333;
+					border-left: 3px solid #008bff;
+				}
+				.member-list {
+					display: flex;
+					margin-top: 24px;
+					.list-item {
+						width: 352px;
+						min-width: 352px;
+						height: 201px;
+						background: #f8f8f8;
+						.avater-item {
+							display: flex;
+							margin-top: 12px;
+							margin-left: 12px;
+							> img {
+								width: 25px;
+								height: 36px;
+								align-self: center;
+							}
+							.avater-right {
+								display: flex;
+								flex-direction: column;
+								margin-left: 5px;
+								> div {
+									display: flex;
+									align-items: center;
+									img {
+										width: 14px;
+										height: 14px;
+										margin-left: 5px;
+									}
+								}
+							}
+						}
+						.member-type {
+							margin-top: 5px;
+							margin-left: 12px;
+							font-size: 14px;
+							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+							font-weight: 500;
+							color: #333333;
+						}
+						.member-other {
+							margin-top: 5px;
+							margin-left: 12px;
+							font-size: 12px;
+							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+							font-weight: 400;
+							color: #333333;
+						}
+					}
+				}
+			}
+		}
+		.row {
+			display: flex;
+			justify-content: space-between;
+			> :first-child,
+			> :last-child {
+				width: 45%;
+			}
+		}
+		:deep(.el-input--default) {
+			width: 100%;
+		}
+		v-deep {
+			.date {
+				@include fullwidth;
+			}
+			.el-input__prefix {
+				display: none;
+			}
+		}
+	}
+}
+
+.test :deep(.el-input__wrapper) {
+	box-shadow: 0 0 0 0;
+}
+.test :deep(.el-input__inner) {
+	text-align: center;
+}
+:deep(.el-table__empty-text) {
+	min-height: 200px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>
diff --git a/src/views/goverment/laborRealName/memberSelect/index.vue b/src/views/goverment/laborRealName/memberSelect/index.vue
new file mode 100644
index 0000000..351571f
--- /dev/null
+++ b/src/views/goverment/laborRealName/memberSelect/index.vue
@@ -0,0 +1,158 @@
+<template>
+	<div class="table-box">
+		<div class="statistics-search">
+			<el-card shadow="never" class="topCard">
+				<span style="margin: 0 10px 2px 0; white-space: nowrap">姓名</span>
+				<el-input v-model="searchForm.projectName" placeholder="请选择输入" />
+				<el-button type="primary" style="margin-left: 20px" @click="handleSubmit()">发送</el-button>
+			</el-card>
+		</div>
+		<div class="statistics-list">
+			<el-card shadow="never" class="bottomCard">
+				<div class="statistics-item">
+					<div class="item-child">
+						<div class="top-title">
+							<span>万天瑶</span>
+							<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
+							<el-button type="primary" style="margin-left: 20px" @click="showDetails()">查看</el-button>
+						</div>
+						<div class="detail-content">
+							<img src="../../../../assets/images/govermentImg/在职人数.png" alt="" />
+							<div>
+								<div class="content-item">
+									<span>开工时间:2023-01-01</span>
+								</div>
+								<div class="content-item">
+									<span>计划竣工时间:2023-01-01</span>
+								</div>
+								<div class="content-item">
+									<span>建设单位:2023-01-01</span>
+								</div>
+								<div class="content-item">
+									<span>施工单位:2023-01-01</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="statistics-page">
+					<Pagination
+						:pageable="pageable"
+						:background="true"
+						:handleSizeChange="handleSizeChange"
+						:handleCurrentChange="handleCurrentChange"
+					/>
+				</div>
+			</el-card>
+		</div>
+		<memberDetails title="查看工程信息" v-model:detailsDialog="detailsDialog" :formData="formData"> </memberDetails>
+	</div>
+</template>
+
+<script setup lang="tsx" name="ProjectSupervisionRecord">
+import { ref, reactive, nextTick, onMounted } from "vue";
+import Pagination from "@/components/ProTable/components/Pagination.vue";
+import memberDetails from "./components/memberDetails.vue";
+const searchForm = ref({
+	projectName: ""
+});
+const pageable = ref({
+	// 分页参数
+	pageNo: 1,
+	pageSize: 10,
+	total: 30
+});
+const detailsDialog = ref(false);
+const formData = ref({});
+const showDetails = () => {
+	detailsDialog.value = true;
+};
+const handleSizeChange = size => {
+	console.log(size);
+};
+const handleCurrentChange = currentPage => {
+	console.log(currentPage);
+};
+// 点击发送按钮
+const handleSubmit = async () => {};
+onMounted(() => {});
+</script>
+<style scoped lang="scss">
+.table-box {
+	.statistics-search {
+		.topCard {
+			display: flex;
+			align-items: center;
+			:deep(.el-card__body) {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+	.statistics-list {
+		margin-top: 20px;
+		height: 892px;
+		overflow-y: scroll;
+		.statistics-item {
+			display: flex;
+			flex-wrap: wrap;
+			.item-child {
+				width: 794px;
+				min-width: 794px;
+				height: 196px;
+				background: #ffffff;
+				opacity: 1;
+				border: 1px solid #d9d9d9;
+				.top-title {
+					height: 56px;
+					background: #f5f7f9;
+					display: flex;
+					align-items: center;
+					span {
+						font-size: 16px;
+						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+						font-weight: 500;
+						color: #333333;
+						margin: 0px 10px 0 16px;
+					}
+					img {
+						width: 18px;
+						height: 18px;
+						margin-right: auto;
+					}
+					:deep(.el-button) {
+						margin-right: 16px;
+					}
+				}
+				.detail-content {
+					height: 140px;
+					display: flex;
+					img {
+						width: 72px;
+						height: 108px;
+						align-self: center;
+						margin-left: 16px;
+						margin-right: 26px;
+					}
+					> div {
+						margin: 16px 0;
+						flex: 1;
+						.content-item {
+							width: 80%;
+							display: flex;
+							align-items: center;
+							margin-bottom: 8px;
+							span {
+								font-size: 14px;
+								font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+								font-weight: 500;
+								color: #606266;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/goverment/laborRealName/projectSelect/components/projectDetails.vue b/src/views/goverment/laborRealName/projectSelect/components/projectDetails.vue
index ad3d622..8d46a1a 100644
--- a/src/views/goverment/laborRealName/projectSelect/components/projectDetails.vue
+++ b/src/views/goverment/laborRealName/projectSelect/components/projectDetails.vue
@@ -232,7 +232,7 @@ const unitData = ref([
 		personName: 111
 	}
 ]);
-const monthColumns = [];
+const monthColumns: any = [];
 const visible1 = ref(false);
 const changeType = ref(1);
 const filelist = ref([]);
diff --git a/src/views/goverment/qualitySupervision/components/transformInfo.vue b/src/views/goverment/qualitySupervision/components/transformInfo.vue
new file mode 100644
index 0000000..a57c404
--- /dev/null
+++ b/src/views/goverment/qualitySupervision/components/transformInfo.vue
@@ -0,0 +1,299 @@
+<template>
+	<div class="overview">
+		<el-dialog :show-close="false" v-model="visible1" :style="dialogStyle">
+			<template #title>
+				<div class="title-detail">
+					<img src="@/assets/images/tableIcon/look.png" alt="" />
+					<span>查看隐患整改信息</span>
+					<el-icon>
+						<close />
+					</el-icon>
+				</div>
+			</template>
+			<div class="detail-content">
+				<div class="content-title">隐患记录</div>
+				<div class="row">
+					<el-row :gutter="20">
+						<el-col :span="8">
+							<span class="row-span" @click="showRecord">检查情况:整改中</span>
+						</el-col>
+						<el-col :span="8"> <span class="row-span">工程名称:衡阳大厦基坑支护工程</span></el-col>
+						<el-col :span="8"> <span class="row-span">监督员:郭明明</span></el-col>
+					</el-row>
+				</div>
+				<div class="row">
+					<el-row :gutter="20">
+						<el-col :span="8">
+							<span class="row-span">检查时间:2023-04-25 17:09:08</span>
+						</el-col>
+						<el-col :span="8"> <span class="row-span">施工单位:天津汇鑫建筑工程有限公司</span></el-col>
+						<el-col :span="8"> <span class="row-span">监理单位:天津汇鑫建筑工程有限公司</span></el-col>
+					</el-row>
+				</div>
+				<div class="row">
+					<el-row :gutter="20">
+						<el-col :span="8">
+							<span class="row-span">项目经理:徐晓云</span>
+						</el-col>
+						<el-col :span="8"> <span class="row-span">总监理工程师:天津汇鑫建筑工程有限公司</span></el-col>
+						<el-col :span="8"> <span class="row-span">责任区域:中铁建工工人生活区</span></el-col>
+					</el-row>
+				</div>
+				<div class="row">
+					<el-row :gutter="20">
+						<el-col :span="8">
+							<span class="row-span">隐患类别:安全管理/安全检查</span>
+						</el-col>
+						<el-col :span="8"> <span class="row-span">整改单位:中铁建工集团有限公司</span></el-col>
+						<el-col :span="8"> <span class="row-span">整改期限:2023-04-30</span></el-col>
+					</el-row>
+				</div>
+			</div>
+			<div class="detail-table">
+				<div class="content-title">整改/复查记录</div>
+				<div class="table">
+					<el-table
+						:data="recordData"
+						border
+						max-height="340"
+						class="el-table"
+						:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
+						:cell-style="{ textAlign: 'center' }"
+					>
+						<el-table-column prop="personName" label="创建人" />
+						<el-table-column prop="personName" label="隐患问题" />
+						<el-table-column label="隐患照片">
+							<template #default="scope">
+								<el-image style="width: 26px; height: 37px" :src="scope.row.imageUrl" fit="fill"></el-image>
+							</template>
+						</el-table-column>
+						<el-table-column prop="name" label="整改状态">
+							<template #default="scope">
+								<span>{{ scope.row.passType == 1 ? "进入" : "离开" }}</span>
+							</template>
+						</el-table-column>
+					</el-table>
+				</div>
+				<div class="operation-btn">
+					<el-button type="info" style="margin-right: 98px">驳回,请尽快整改</el-button>
+					<el-button type="primary">整改完成,全部合格</el-button>
+				</div>
+			</div>
+			<div class="transform-record">
+				<div class="title-detail">
+					<img src="@/assets/images/tableIcon/look.png" alt="" />
+					<span>整改记录</span>
+					<el-icon>
+						<close />
+					</el-icon>
+				</div>
+				<div class="content-title">隐患记录</div>
+				<div class="row">
+					<span>创建人:</span>
+					<span>朱可</span>
+				</div>
+				<div class="row">
+					<span>创建时间:</span>
+					<span>2023-05-26 12:45:09</span>
+				</div>
+				<div class="row">
+					<span>隐患问题:</span>
+					<span>未制定、完善、落实安全生产责任制度、安全生产规章制度和操作规程。</span>
+				</div>
+				<div class="row">
+					<span>备注:</span>
+					<span>请尽快整改</span>
+				</div>
+				<div class="row">
+					<span>隐患照片:</span>
+					<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
+				</div>
+				<div class="situation">
+					<span>整改情况</span>
+					<el-button type="success">新增整改记录</el-button>
+				</div>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch, reactive } from "vue";
+const props = defineProps({
+	detailsDialog: Boolean,
+	title: String,
+	formData: Object
+});
+const emits = defineEmits(["update:detailsDialog"]);
+const visible1 = ref(false);
+const recordData = ref([]);
+const dialogStyle = ref({
+	"min-width": "824px",
+	transform: "translateX(-170px)"
+});
+const showRecord = () => {
+	console.log(666);
+	dialogStyle.value = {
+		"min-width": "824px",
+		transform: "translateX(-170px)"
+	};
+};
+// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
+watch(
+	() => props.detailsDialog,
+	(n, o) => {
+		visible1.value = n;
+	}
+);
+// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
+watch(visible1, (n, o) => {
+	emits("update:detailsDialog", n);
+});
+watch(
+	() => props.formData,
+	(n, o) => {
+		console.log(props.formData);
+	}
+);
+onMounted(() => {
+	// 初始化 配置formData
+	console.log(props.formData);
+});
+</script>
+
+<style lang="scss" scoped>
+@mixin fullwidth {
+	width: -webkit-fill-available;
+	width: -moz-available;
+	width: stretch;
+}
+@mixin flex {
+	display: flex;
+	align-items: center;
+}
+@mixin title {
+	font-size: 14px;
+	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+	font-weight: 400;
+	color: #333333;
+	border-left: 2px solid #008bff;
+	padding-left: 5px;
+}
+.overview {
+	// background-color: #fff;
+	flex: 1;
+	:deep(.el-dialog) {
+		position: relative;
+	}
+	.title-detail {
+		@include flex;
+		> img {
+			width: 16px;
+			height: 18px;
+		}
+		> span {
+			font-size: 18px;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			font-weight: 400;
+			color: #333333;
+			margin-left: 5px;
+			margin-right: auto;
+		}
+		:deep(.el-icon) {
+			cursor: pointer;
+			color: #a8abb2;
+		}
+	}
+	.detail-content {
+		.content-title {
+			@include title;
+		}
+		.row {
+			margin-top: 14px;
+			.row-span {
+				font-size: 12px;
+				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+				font-weight: 500;
+				color: #333333;
+			}
+		}
+	}
+	.detail-table {
+		margin-top: 20px;
+		.content-title {
+			@include title;
+		}
+		.table {
+			margin-top: 20px;
+		}
+		.operation-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 20px;
+		}
+	}
+	.transform-record {
+		position: absolute;
+		top: 0;
+		right: -460px;
+		width: 380px;
+		min-width: 420px;
+		background: #ffffff;
+		box-shadow: 0px 4px 8px 0px rgba(48, 62, 100, 0.2);
+		border-radius: 8px 8px 8px 8px;
+		padding: 15px 20px;
+		.content-title {
+			@include title;
+			margin-top: 45px;
+			margin-bottom: 24px;
+		}
+		.row {
+			display: flex;
+			margin-bottom: 12px;
+			span:nth-child(1) {
+				width: 56px;
+				text-align: right;
+				font-size: 12px;
+				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+				font-weight: 500;
+				color: #333333;
+				white-space: nowrap;
+				margin-right: 10px;
+			}
+			span:nth-child(2) {
+				font-size: 12px;
+				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+				font-weight: 400;
+				color: #333333;
+			}
+			img {
+				width: 95px;
+				height: 53px;
+			}
+		}
+		.situation {
+			@include flex;
+			border-left: 2px solid #008bff;
+			margin-top: 20px;
+			span {
+				margin-right: auto;
+				margin-left: 5px;
+			}
+		}
+	}
+}
+
+.test :deep(.el-input__wrapper) {
+	box-shadow: 0 0 0 0;
+}
+.test :deep(.el-input__inner) {
+	text-align: center;
+}
+:deep(.el-table__empty-text) {
+	min-height: 200px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>
diff --git a/src/views/goverment/qualitySupervision/index.vue b/src/views/goverment/qualitySupervision/index.vue
new file mode 100644
index 0000000..c5dad33
--- /dev/null
+++ b/src/views/goverment/qualitySupervision/index.vue
@@ -0,0 +1,193 @@
+<template>
+	<div class="table-box">
+		<div class="statistics-top">
+			<div class="sta-item">
+				<div class="sta-num">
+					<span>累计下达整改单</span>
+					<span>2162207人</span>
+				</div>
+				<img src="@/assets/images/govermentImg/在职人数.png" alt="" />
+			</div>
+			<div class="sta-item">
+				<div class="sta-num">
+					<span>累计下达停工单</span>
+					<span>2162207人</span>
+				</div>
+				<img src="@/assets/images/govermentImg/出勤总数.png" alt="" />
+			</div>
+			<div class="sta-item">
+				<div class="sta-num">
+					<span>累计问题数</span>
+					<span>2162207人</span>
+				</div>
+				<img src="@/assets/images/govermentImg/出勤率.png" alt="" />
+			</div>
+			<div class="sta-item">
+				<div class="sta-num">
+					<span>累计闭合问题数</span>
+					<span>2162207人</span>
+				</div>
+				<img src="@/assets/images/govermentImg/考勤次数.png" alt="" />
+			</div>
+			<div class="sta-item">
+				<div class="sta-num">
+					<span>总检查次数</span>
+					<span>2162207人</span>
+				</div>
+				<img src="@/assets/images/govermentImg/考勤次数.png" alt="" />
+			</div>
+		</div>
+		<div class="statistics-search">
+			<el-card shadow="never" class="topCard">
+				<span style="margin: 0 10px 2px 0; white-space: nowrap">工程名称</span>
+				<el-input v-model="searchForm.personType" placeholder="请输入" />
+				<el-button type="primary" style="margin-left: 20px" @click="handleSubmit()">发送</el-button>
+			</el-card>
+		</div>
+		<div class="statistics-table">
+			<el-card shadow="never" class="topCard">
+				<div class="table">
+					<el-table
+						:data="ageStatistics"
+						class="el-table"
+						:header-cell-style="{ backgroundColor: '#F4F7F9', textAlign: 'center' }"
+						:cell-style="{ textAlign: 'center' }"
+					>
+						<el-table-column prop="data" label="序号"></el-table-column>
+						<el-table-column prop="data" label="工程名称"></el-table-column>
+						<el-table-column prop="data" label="监督员"></el-table-column>
+						<el-table-column prop="data" label="检查时间"></el-table-column>
+						<el-table-column prop="data" label="施工单位"></el-table-column>
+						<el-table-column prop="data" label="监理单位"></el-table-column>
+						<el-table-column prop="data" label="项目经理"></el-table-column>
+						<el-table-column prop="data" label="总监理工程师"></el-table-column>
+						<el-table-column prop="data" label="状态">
+							<template #default="scope">
+								<span>{{ scope.row.personType == 1 ? "管理" : "工人" }}</span>
+							</template>
+						</el-table-column>
+						<el-table-column fixed="right" label="操作" width="100">
+							<template #default="scope">
+								<el-button type="primary" link @click="showDetails">
+									<img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" />
+									<span>查看</span>
+								</el-button>
+							</template>
+						</el-table-column>
+					</el-table>
+				</div>
+				<div class="statistics-page">
+					<Pagination
+						:pageable="pageable"
+						:background="true"
+						:handleSizeChange="handleSizeChange"
+						:handleCurrentChange="handleCurrentChange"
+					/>
+				</div>
+			</el-card>
+		</div>
+		<transformInfo v-model:detailsDialog="detailsDialog"></transformInfo>
+	</div>
+</template>
+
+<script setup lang="tsx" name="ProjectSupervisionRecord">
+import { ref, reactive, nextTick, onMounted } from "vue";
+import { ElMessage, ElMessageBox, ElTree, FormInstance } from "element-plus";
+import Pagination from "@/components/ProTable/components/Pagination.vue";
+import transformInfo from "./components/transformInfo.vue";
+
+const searchForm = ref({
+	personType: null,
+	dateRange: []
+});
+const ageStatistics: any = [{ data: 111 }];
+const pageable = ref({
+	// 分页参数
+	pageNo: 1,
+	pageSize: 10,
+	total: 30
+});
+const detailsDialog = ref(false);
+const showDetails = () => {
+	detailsDialog.value = true;
+};
+const handleSizeChange = size => {
+	console.log(size);
+};
+const handleCurrentChange = currentPage => {
+	console.log(currentPage);
+};
+// 点击发送按钮
+const handleSubmit = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+		} else {
+			console.log("error submit!", fields);
+			ElMessage({
+				showClose: true,
+				message: "请完善表单信息！",
+				type: "error"
+			});
+		}
+	});
+};
+onMounted(() => {});
+</script>
+<style scoped lang="scss">
+.table-box {
+	.statistics-top {
+		display: flex;
+		flex-wrap: wrap;
+		.sta-item {
+			min-width: 320px;
+			height: 113px;
+			background: rgba(255, 255, 255, 0.9);
+			border-radius: 8px 8px 8px 8px;
+			opacity: 1;
+			display: flex;
+			margin-bottom: 20px;
+			margin-right: 20px;
+			.sta-num {
+				display: flex;
+				flex-direction: column;
+				margin-top: 20px;
+				margin-left: 42px;
+				margin-right: auto;
+				span:first-child {
+					font-size: 16px;
+					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+					color: #6b7275;
+				}
+				span:last-child {
+					font-size: 32px;
+					font-family: OPPOSans-Heavy, OPPOSans;
+					font-weight: 800;
+					color: #2e3038;
+				}
+			}
+			> img {
+				width: 44px;
+				height: 40px;
+				margin-right: 22px;
+				margin-top: 20px;
+			}
+		}
+	}
+	.statistics-search {
+		margin-top: 20px;
+		.topCard {
+			display: flex;
+			align-items: center;
+
+			:deep(.el-card__body) {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+	.statistics-table {
+		margin-top: 20px;
+	}
+}
+</style>