diff --git a/.env.development b/.env.development
index bd41f8a..ffefc80 100644
--- a/.env.development
+++ b/.env.development
@@ -2,9 +2,9 @@
 NODE_ENV = 'development'
 
 # 本地环境接口地址(/api/index.ts文件中使用)
-VITE_API_URL = 'http://192.168.34.155:6688'
+# VITE_API_URL = 'http://192.168.34.155:6688'
 VITE_WPAPI_URL = "http://182.90.224.147:8081"
-# VITE_API_URL = "http://182.90.224.147:6688"
+VITE_API_URL = "http://182.90.224.147:6688"
 
 # 上传
 # VITE_ULD_API_URL = 'http://192.168.34.155:8012/onlinePreview?url='
diff --git a/src/views/project/monthlyReport/components/add.vue b/src/views/project/monthlyReport/components/add.vue
new file mode 100644
index 0000000..74be42c
--- /dev/null
+++ b/src/views/project/monthlyReport/components/add.vue
@@ -0,0 +1,198 @@
+<template>
+	<div class="overview">
+		<el-dialog :show-close="false" v-model="visible1" width="1305px" @close="closeMain">
+			<template #title>
+				<div class="title-detail">
+					<span>新增月报</span>
+					<el-icon>
+						<close @click="closeMain" />
+					</el-icon>
+				</div>
+			</template>
+			<div class="report-content">
+				<div class="title">天地一号御花园工程项目</div>
+				<div class="title">建设监理工作月报</div>
+				<div class="sub-title">
+					<span>第</span>
+					<el-input
+						v-model.number="formData.number"
+						style="width: 60px; margin: 0 5px"
+						@blur="e => validatorPhone(e, 'number')"
+					/>
+					<span>期</span>
+				</div>
+				<div class="sub-title">天眼监理工程有限公司项目监理部（章）</div>
+				<div class="title">《监理月报》签认表</div>
+				<div class="engineer-name">工程名称：天地一号御花园项目</div>
+				<div class="report-content-part1">
+					<div>致： 监理工程师</div>
+					<div>
+						按照《建设工程监理规范》和公司的有关规定， 年 月 完成了天地一号御花园工程 月份《监理月报》第
+						编写工作，请予以审查签认。
+					</div>
+					<div>编制人员：</div>
+					<div>土建专业监理工程师：</div>
+					<div>水暖专业监理工程师：</div>
+					<div>电气专业监理工程师：</div>
+					<div>（签字）</div>
+				</div>
+				<div class="report-content-part2">
+					<div class="engineer-name">项目监理部总监理工程师签认意见：</div>
+					<div>
+						<el-input v-model="formData.advice" :rows="3" type="textarea" />
+					</div>
+					<div>编制人员：</div>
+					<div>土建专业监理工程师：</div>
+					<div>水暖专业监理工程师：</div>
+					<div>电气专业监理工程师：</div>
+					<div>（签字）</div>
+				</div>
+			</div>
+			<template #footer>
+				<div>
+					<el-button type="primary" @click="visible1 = false">提交月报</el-button>
+					<el-button type="primary" @click="visible1 = false">提交打印</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch, reactive } from "vue";
+const props = defineProps({
+	addVisible: Boolean
+});
+const emits = defineEmits(["update:addVisible"]);
+const formData = ref({
+	number: "",
+	advice: ""
+});
+const visible1 = ref(true);
+
+const validatorPhone = (e: any, key: any) => {
+	// 校验正整数
+	// let pattern = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
+	// let dataValue = formData.value[key];
+	// if (!pattern.test(dataValue)) {
+	// 	ElMessage.error("请输入正确的手机号码");
+	// 	formData.value[key] = "";
+	// }
+};
+// 关闭两个对话框
+const closeMain = () => {
+	visible1.value = false;
+};
+watch(
+	() => props.addVisible,
+	n => {
+		if (n) {
+			visible1.value = n;
+		}
+	}
+);
+watch(
+	() => visible1,
+	n => {
+		emits("update:addVisible", n);
+	}
+);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+@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 {
+	:deep() {
+		.el-dialog__body {
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+	}
+	.title-detail {
+		@include flex;
+		border-left: 3px solid #0f81ff;
+		> span {
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			font-weight: 400;
+			color: #333333;
+			margin-left: 12px;
+			margin-right: auto;
+			font-size: 18px;
+		}
+		:deep(.el-icon) {
+			cursor: pointer;
+			color: #a8abb2;
+		}
+	}
+	.report-content {
+		.title {
+			font-size: 23px;
+			font-family: PingFang SC-Semibold, PingFang SC;
+			font-weight: 600;
+			color: #333333;
+			text-align: center;
+		}
+		.sub-title {
+			@include flex;
+			justify-content: center;
+			font-size: 18px;
+			font-family: PingFang SC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #333333;
+		}
+		.sub-title:nth-child(3) {
+			margin-top: 9px;
+		}
+		.sub-title:nth-child(4) {
+			margin-top: 18px;
+		}
+		.title:nth-child(5) {
+			margin-top: 25px;
+		}
+		.engineer-name {
+			font-size: 16px;
+			font-family: PingFang SC-Semibold, PingFang SC;
+			font-weight: 600;
+			color: #333333;
+			margin-top: 11px;
+		}
+		&-part1 {
+			padding: 16px 9px;
+			border: 1px solid #dedede;
+			margin-top: 11px;
+			div {
+				font-size: 16px;
+				font-family: PingFang SC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #333333;
+			}
+			div:last-child {
+				text-align: right;
+			}
+			div:not(:last-child) {
+				margin-bottom: 20px;
+			}
+			div:nth-child(6) {
+				margin-bottom: 0px;
+			}
+		}
+		&-part2 {
+			padding: 16px 9px;
+			border: 1px solid #dedede;
+			border-top: 0;
+		}
+	}
+}
+</style>
diff --git a/src/views/project/monthlyReport/index.scss b/src/views/project/monthlyReport/index.scss
new file mode 100644
index 0000000..7a05b90
--- /dev/null
+++ b/src/views/project/monthlyReport/index.scss
@@ -0,0 +1,6 @@
+.date-select {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
diff --git a/src/views/project/monthlyReport/index.vue b/src/views/project/monthlyReport/index.vue
new file mode 100644
index 0000000..105536b
--- /dev/null
+++ b/src/views/project/monthlyReport/index.vue
@@ -0,0 +1,187 @@
+<template>
+	<div class="table-box">
+		<ProTable
+			ref="proTable"
+			title="监理月报"
+			:columns="columns"
+			:requestApi="getTableList"
+			:dataCallback="dataCallback"
+			:tool-button="false"
+			:pagination="true"
+			background
+			:isShowSearch="false"
+			:initParam="initParam"
+			:onReset="true"
+		>
+			<template #formButton="scope">
+				<el-button class="addButtonStyle" @click="handleAddItem">新增</el-button>
+			</template>
+			<template #operation="{ row }">
+				<el-button type="primary" link @click="handleLookItem(row)">
+					<img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" />
+					<span>查看</span>
+				</el-button>
+			</template>
+		</ProTable>
+		<!-- 新增月报 -->
+		<add v-model:addVisible="addVisible" @confirm="confirmAdd"></add>
+		<!-- 侧边栏选择 -->
+		<engineeringEngDrawer v-model="engVisable" :active="activeValue" ref="engDrawer" :engList="engList" @select="tabsSelect">
+			<template #default="{ data }">
+				<span style="margin-left: 10px" @click="onUpdate(data)">{{
+					activeValue == "eng" ? data.engineeringName : data.projectName
+				}}</span>
+			</template>
+		</engineeringEngDrawer>
+		<allEngineering @click="engVisable = true" />
+	</div>
+</template>
+
+<script setup lang="tsx" name="ProjectSupervisionRecord">
+import { ref, reactive, nextTick, onMounted } from "vue";
+import { ElMessage, FormInstance } from "element-plus";
+import { ColumnProps } from "@/components/ProTable/interface";
+import ProTable from "@/components/ProTable/index.vue";
+import { getRelevanceList } from "@/api/modules/common";
+import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
+import allEngineering from "@/components/allEngineering/index.vue";
+import { towerCraneEquipDel, towerCraneEquipPage, getEngineeringName } from "@/api/modules/project";
+import add from "./components/add.vue";
+const addVisible = ref(false);
+const activeValue = ref("eng");
+const engList = ref([]);
+const engVisable = ref(false);
+const searchSn = ref("");
+// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({
+	engineeringSn: ""
+});
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTable = ref();
+
+// 表格配置项
+const columns: ColumnProps[] = [
+	{ type: "index", label: "序号", width: 80 },
+	{
+		prop: "devName",
+		label: "建设名称"
+	},
+	{
+		prop: "devName",
+		label: "施工单位"
+	},
+	{
+		prop: "devName",
+		label: "监理单位"
+	},
+	{
+		prop: "devName",
+		label: "填写人"
+	},
+	{
+		prop: "devName",
+		label: "附件"
+	},
+	{
+		prop: "installTime",
+		label: "创建时间",
+		search: {
+			el: "date-picker",
+			props: {
+				type: "daterange",
+				format: "YYYY-MM-DD",
+				valueFormat: "YYYY-MM-DD"
+				// defaultTime: defaultTime2
+			}
+		}
+	},
+	{ prop: "operation", label: "操作", fixed: "right", width: 260 }
+];
+const confirmAdd = () => {
+	console.log(666);
+};
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const dataCallback = (data: any) => {
+	// console.log(data);
+	return {
+		list: data.records,
+		total: Number(data.total),
+		pageNo: Number(data.current),
+		pageSize: Number(data.size)
+	};
+};
+
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+const getTableList = (params: any) => {
+	let newParams = JSON.parse(JSON.stringify(params));
+	if (newParams.installTime) {
+		newParams.installTime_begin = newParams.installTime[0];
+		newParams.installTime_end = newParams.installTime[1];
+		delete newParams.installTime;
+	}
+	if (searchSn.value) {
+		if (activeValue.value == "eng") {
+			newParams.engineeringSn = searchSn.value;
+		} else if (activeValue.value == "project") {
+			newParams.projectSn = searchSn.value;
+		}
+	} else {
+		return { result: { current: "1", pages: "1", records: [], size: "10", total: "0" } };
+	}
+	return towerCraneEquipPage(newParams);
+};
+// 新增
+const handleAddItem = () => {
+	addVisible.value = true;
+};
+// 查看
+const handleLookItem = (row: any) => {};
+
+// 抽屉tab选择时
+const tabsSelect = val => {
+	activeValue.value = val;
+	if (val == "eng") {
+		getengineering();
+	} else if (val == "project") {
+		getProject();
+	}
+};
+// 获取项目信息
+const getProject = async () => {
+	const res = await getEngineeringName();
+	engList.value = [res.result];
+	if (res.result) {
+		searchSn.value = res.result.projectSn;
+	}
+	proTable.value.getTableList();
+	console.log(res);
+};
+const getengineering = async () => {
+	// let newParams = JSON.parse(JSON.stringify(params));
+	const res = await getRelevanceList();
+	engList.value = res.result;
+	if (res.result && res.result.length > 0) {
+		searchSn.value = res.result[0].engineeringSn;
+	}
+	proTable.value.getTableList();
+	console.log(res);
+};
+// 点击抽屉的工程名称更新页面
+const onUpdate = async row => {
+	if (activeValue.value == "eng") {
+		searchSn.value = row.engineeringSn;
+	} else if (activeValue.value == "project") {
+		searchSn.value = row.projectSn;
+	}
+	proTable.value.getTableList();
+	ElMessage.success("页面已更新");
+};
+onMounted(() => {
+	getengineering();
+});
+</script>
+<style scoped lang="scss">
+@import "./index.scss";
+</style>