day two

2025-10-25 20:56:36 +08:00
parent 18254e59e6
commit c00eb11a3a
21 changed files with 1146 additions and 35 deletions
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -22,6 +22,9 @@ const barItems = [{
 },{
    name: '安全管理',
    path: '/security-management',
+},{
+    name: '安全管理2',
+    path: '/security-management-2',
 },{
    name: '质量管理',
    path: '/quality-management',
--- a/src/components/ProjectRiskDetails/ProjectRiskDetailsLeft.vue
+++ b/src/components/ProjectRiskDetails/ProjectRiskDetailsLeft.vue
@@ -0,0 +1,61 @@
+<template>
+    <nav class="left">
+        <div
+            v-for="item in items"
+            :key="item.path"
+            class="left-item"
+            @click="$router.push(item.path)"
+        >
+            <div class="item-name">{{ item.name }}</div>
+        </div>
+    </nav>
+</template>
+
+<script setup>
+const items = [
+    {
+        name: '勘探点信息',
+        path: '/exploration-point-information'
+    },{
+        name: '协作单位',
+        path: '/collaboration-units'
+    }
+    ,{
+        name: '文件信息',
+        path: '/file-information'
+    },{
+        name: '预警记录',
+        path: '/warning-records'
+    },{
+        name: '验收意见',
+        path: '/acceptance-opinions'
+    }
+]
+</script>
+
+<style scoped>
+.left {
+    position: relative;
+    width: 200px;
+    background: #ffffff;
+    border-right: 1px solid #e5e7eb;
+    padding: 12px 8px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin: 10px 10px 10px 0;
+}
+.left-item {
+    padding: 10px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #1f2937;
+}
+.left-item:hover {
+    background: #f3f4f6;
+}
+.item-name {
+    text-align: center;
+}
+</style>
--- a/src/components/projectdetails/ProjectDetailsLeft.vue
+++ b/src/components/projectdetails/ProjectDetailsLeft.vue
@@ -1,41 +1,51 @@
 <template>
-    <div class="left">
-        <div class="left-item">
-            <div class="left-item-name">工程名称</div>
-            <div class="left-item-content">天津市政工程设计研究总院</div>
+    <nav class="left">
+        <div
+            v-for="item in items"
+            :key="item.path"
+            class="left-item"
+            @click="$router.push(item.path)"
+        >
+            <div class="item-name">{{ item.name }}</div>
        </div>
-    </div>
+    </nav>
 </template>

 <script setup>
-// Left 组件的逻辑
+const items = [
+    {
+        name: '工程信息',
+        path: '/project-information'
+    },{
+        name: '协作单位',
+        path: '/collaboration-units'
+    }
+]
 </script>

 <style scoped>
 .left {
-    margin: 10px;
-    padding: 16px;
+    position: relative;
+    width: 200px;
    background: #ffffff;
-    border: 1px solid #e5e7eb;
-    border-radius: 6px;
-    width: 300px;
-    min-height: 200px;
-}
-
-.left-item {
+    border-right: 1px solid #e5e7eb;
+    padding: 12px 8px;
+    box-sizing: border-box;
    display: flex;
    flex-direction: column;
-    gap: 8px;
+    gap: 6px;
+    margin: 10px 10px 10px 0;
 }
-
-.left-item-name {
-    font-weight: 600;
-    color: #374151;
-    font-size: 14px;
+.left-item {
+    padding: 10px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #1f2937;
 }
-
-.left-item-content {
-    color: #111827;
-    font-size: 16px;
+.left-item:hover {
+    background: #f3f4f6;
+}
+.item-name {
+    text-align: center;
 }
 </style>
--- a/src/components/projectdetails/ProjectDetailsTop.vue
+++ b/src/components/projectdetails/ProjectDetailsTop.vue
@@ -14,6 +14,10 @@ import router from '@/router'
 const viewDetailsSummary = () => {
    router.push('/project-details-summary')
 }
+
+const viewList = () => {
+    router.push('/exploration-points-list')
+}
 </script>

 <style scoped>
@@ -39,12 +43,11 @@ const viewDetailsSummary = () => {

 .exploration-points-list {
    color: #111827;
-    flex: 1; /* 关键：让这个元素占据剩余空间 */
+    flex: 1;
 }

 .edit,
 .back {
-    /* 移除 margin-left: auto */
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid #dcdfe6;
--- a/src/components/securitymanagement/SecurityManagementTop.vue
+++ b/src/components/securitymanagement/SecurityManagementTop.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="top">
+        <div class="top-item">
+            <div class="item" v-for="item in items" :key="item.path" @click="$router.push(item.path)">{{ item.name }}</div>
+            <el-select v-if="$route.path.startsWith('/project-risk')" v-model="selectedItem" placeholder="请选择" @change="handleSelectChange" style="width: 200px;">
+                <el-option v-for="relativeItem in items[1].relative" :key="relativeItem.path" :label="relativeItem.name" :value="relativeItem.path" />
+            </el-select>
+            <div class="edit">修改</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const items = [
+    {
+        name: '工程安全管理',
+        path: '/project-security'
+    },
+    {
+        name: '工程风险因素管理',
+        path: '/project-risk',
+        relative: [{
+            name: '设备管理',
+            path: '/project-risk/device-manage'
+        },{
+            name: '工程风险',
+            path: '/project-risk?type=project'
+        },{
+            name: '环境风险',
+            path: '/project-risk?type=environment'
+        },{
+            name: '地质风险',
+            path: '/project-risk?type=geology'
+        }]
+    },
+    {
+        name: '工程安全措施管理监督',
+        path: '/project-measure'
+    }
+]
+
+const router = useRouter()
+const route = useRoute()
+
+// 初始化选择值：兼容 /project-risk?type=xxx 和 /project-risk/* 两种形式
+const initialFullPath = route.fullPath
+const selectedItem = ref(initialFullPath.startsWith('/project-risk') ? initialFullPath : '')
+
+// 路由变化时同步下拉选中值
+watch(() => route.fullPath, (fp) => {
+  selectedItem.value = fp.startsWith('/project-risk') ? fp : selectedItem.value
+})
+
+const handleSelectChange = (val) => {
+  if (val) {
+    router.push(val)
+  }
+}
+</script>
+
+<style scoped>
+.top {
+    margin: 10px;
+    padding: 16px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+}
+
+.top-item {
+    display: flex;
+    align-items: center;
+    gap: 100px;
+}
+
+.item {
+    font-weight: 600;
+    color: #374151;
+    min-width: 80px;
+}
+
+.edit {
+    cursor: pointer;
+    padding: 8px 16px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-left: auto;
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -16,12 +16,99 @@ const routes = [
    {
        path: '/project-details',
        name: 'project-details',
-        component: () => import('../views/ProjectDetails.vue')
+        component: () => import('../views/ProjectDetails.vue'),
+        redirect: '/project-details-summary',
+        children: [
+            {
+                path: '/project-details-summary',
+                name: 'project-details-summary',
+                component: () => import('../views/ProjectDetailsSummary.vue'),
+                redirect: '/project-information',
+                children: [
+                    {
+                        path: '/project-information',
+                        name: 'project-information',
+                        component: () => import('../views/ProjectInformation.vue')
+                    },{
+                        path: '/collaboration-units',
+                        name: 'collaboration-units',
+                        component: () => import('../views/CollaborationUnits.vue')
+                    }
+                ]
+            },{
+                path: '/exploration-points-list',
+                name: 'exploration-points-list',
+                component: () => import('../views/ExplorationPointsList.vue')
+            }
+        ]
    },{
-        path: '/project-details-summary',
-        name: 'project-details-summary',
-        component: () => import('../views/ProjectDetailsSummary.vue')
-    },
+        path: '/security-management',
+        name: 'security-management',
+        component: () => import('../views/SecurityManagement.vue')
+    },{
+        path: '/security-management-2',
+        name: 'security-management-2',
+        component: () => import('../views/SecurityManagement2.vue'),
+        redirect: '/project-security',
+        children: [
+            {
+                path: '/project-security',
+                name: 'project-security',
+                component: () => import('../views/ProjectSecurity.vue')
+            },{
+                path: '/project-measure',
+                name: 'project-measure',
+                component: () => import('../views/ProjectMeasure.vue')
+            },{
+                path: '/security-management-2/personal-company',
+                name: 'personal-company',
+                component: () => import('../views/PersonalCompany.vue')
+            }
+        ]
+    },{
+        path: '/project-risk',
+        component: () => import('../views/SecurityManagement2.vue'),
+        children: [
+            {
+                path: '',
+                name: 'project-risk',
+                component: () => import('../views/ProjectRisk.vue')
+            },
+            {
+                path: 'device-manage',
+                name: 'device-manage',
+                component: () => import('../views/DeviceManage.vue')
+            }
+        ]
+    },{
+        path: '/project-risk-details',
+        name: 'project-risk-details',
+        component: () => import('../views/ViewRiskDetails.vue'),
+        redirect: '/exploration-point-information',
+        children: [
+            {
+                path: '/exploration-point-information',
+                name: 'exploration-point-information',
+                component: () => import('../views/ExplorationPointInformation.vue')
+            },{
+                path: '/collaboration-units',
+                name: 'collaboration-units',
+                component: () => import('../views/CollaborationUnits.vue')
+            // },{
+            //     path: '/file-information',
+            //     name: 'file-information',
+            //     component: () => import('../views/FileInformation.vue')
+            // },{
+            //     path: '/warning-records',
+            //     name: 'warning-records',
+            //     component: () => import('../views/WarningRecords.vue')
+            // },{
+            //     path: '/acceptance-opinions',
+            //     name: 'acceptance-opinions',
+            //     component: () => import('../views/AcceptanceOpinions.vue')
+            }
+        ]
+    }
 ]

 const router = createRouter({
--- a/src/views/CollaborationUnits.vue
+++ b/src/views/CollaborationUnits.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        协作单位
+        <div>
+            项目合作单位
+        </div>
+        <div class="form">
+            <div class="form-item">单位名称<el-input></el-input></div>
+            <div class="form-item">编录或技术人员<el-input></el-input></div>
+            <div class="form-item">联系人<el-input></el-input></div>
+            <div class="form-item">技术人员<el-input></el-input></div>
+            <div class="form-item">联系方式<el-input></el-input></div>
+            <div class="form-item">静探工人<el-input></el-input></div>
+            <div class="form-item">钻探机长<el-input></el-input></div>
+            <div class="form-item">钻机工人<el-input></el-input></div>
+            <div class="form-item">静探机长<el-input></el-input></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.form {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-row-gap: 20px;
+    margin-top: 20px;
+}
+
+.form-item {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 400px;
+}
+</style>
--- a/src/views/DeviceManage.vue
+++ b/src/views/DeviceManage.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="security-management">
+        <div class="search-bar">
+            <el-input placeholder="请输入关键字" v-model="searchText" style="width: 250px;" />
+            <div class="search-label">开工日期：</div>
+            <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始"
+                end-placeholder="结束"
+            />
+            <div class="search-label">工程状态：</div>
+            <el-select v-model="selectedStatus" placeholder="请选择状态" style="width: 180px;">
+                <el-option label="在施" value="pending" />
+                <el-option label="阶段完成" value="phaseCompleted" />
+                <el-option label="完成" value="completed" />
+            </el-select>
+            <div class="btn">查询</div>
+        </div>
+
+        <div class="security-list">
+            <el-table :data="securityList">
+                <el-table-column prop="securityId" label="ID"></el-table-column>
+                <el-table-column prop="projectName" label="工程名称"></el-table-column>
+                <el-table-column prop="projectNumber" label="工程编号"></el-table-column>
+                <el-table-column prop="projectLocation" label="工程地点"></el-table-column>
+                <el-table-column prop="projectLeader" label="负责人"></el-table-column>
+                <el-table-column prop="explorationPoint" label="勘探点"></el-table-column>
+                <el-table-column prop="totalDistance" label="总延米"></el-table-column>
+                <el-table-column prop="projectDuration" label="计划工期"></el-table-column>
+                <el-table-column prop="createTime" label="创建日期"></el-table-column>
+                <el-table-column prop="status" label="工程状态"></el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const searchText = ref('')
+const dateRange = ref([])
+const selectedStatus = ref('')
+const securityList = ref([
+    {
+        securityId: '1',
+        projectName: '工程A',
+        projectNumber: '123456',
+        projectLocation: '地点A',
+        projectLeader: '负责人A',
+        explorationPoint: '勘探点A',
+        totalDistance: '1000',
+        projectDuration: '30天',
+        createTime: '2023-01-01',
+        status: '在施'
+    },
+])
+</script>
+
+<style scoped>
+.search-bar {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    border: 1px solid #e5e7eb;
+    padding: 8px 12px;
+}
+
+.search-label {
+    font-size: 12px;
+    width: 90px;
+}
+
+.btn {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    padding: 0 12px;
+    transition: all 0.3s;
+}
+</style>
--- a/src/views/ExplorationPointInformation.vue
+++ b/src/views/ExplorationPointInformation.vue
@@ -0,0 +1,87 @@
+<template>
+    <div class="first-grid">
+        <div>
+            勘探点信息
+            <div class="second-grid">勘探点号<el-input placeholder="请输入勘探点号"></el-input></div>
+            <div class="second-grid">勘探类型<el-select placeholder="请选择勘探类型"></el-select></div>
+            <div class="second-grid">钻探情况<el-input placeholder="请输入钻探情况"></el-input></div>
+            <div class="second-grid">
+                坐标
+                <div>
+                    <div class="second-grid">x<el-input placeholder="请输入x坐标"></el-input></div>
+                    <div class="second-grid">y<el-input placeholder="请输入y坐标"></el-input></div>
+                </div>
+            </div>
+            <div class="second-grid">
+                经纬度
+                <div>
+                    <div class="second-grid">经度<el-input placeholder="请输入经度"></el-input></div>
+                    <div class="second-grid">纬度<el-input placeholder="请输入纬度"></el-input></div>
+                </div>
+            </div>
+            <div class="second-grid">设备型号<el-input placeholder="请输入设备型号"></el-input></div>
+            <div class="second-grid">
+                <div class="second-grid">孔口标高<el-input placeholder="请输入孔口标高"></el-input></div>
+                <div class="second-grid">高程<el-input placeholder="请输入高程"></el-input></div>
+                <div class="second-grid">深度<el-input placeholder="请输入深度"></el-input></div>
+                <div class="second-grid">地下水位<el-input placeholder="请输入地下水位"></el-input></div>
+                <div class="second-grid">初见水位<el-input placeholder="请输入初见水位"></el-input></div>
+                <div class="second-grid">静止水位<el-input placeholder="请输入静止水位"></el-input></div>
+            </div>
+            <div>
+                是否取水
+                <el-radio-group>
+                    <el-radio label="1">是</el-radio>
+                    <el-radio label="0">否</el-radio>
+                </el-radio-group>
+            </div>
+        </div>
+        <div>
+            <div>技术质量要求</div>
+            <div class="main-content">
+                安全管理要求
+                <div>
+                    <div class="safety-manage"><el-input></el-input>：<el-input></el-input></div>
+                    <div class="safety-manage"><el-input></el-input>：<el-input></el-input></div>
+                    <div class="safety-manage"><el-input></el-input>：<el-input></el-input></div>
+                </div>
+            </div>
+            <div class="main-content">
+                风险信息
+                <div class="second-grid">风险信息<el-input placeholder="请输入风险信息"></el-input></div>
+                <div class="second-grid">核查情况<el-input placeholder="请输入核查情况"></el-input></div>
+            </div>
+            <div class="main-content">
+                勘探点现场刨验
+                <div>
+                    <div class="second-grid">刨验次数<el-input></el-input></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.first-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.second-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.safety-manage {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.main-content {
+    margin-top: 20px;
+}
+</style>
--- a/src/views/ExplorationPointsList.vue
+++ b/src/views/ExplorationPointsList.vue
@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div class="search-bar">
+            <el-input placeholder="请输入勘探点号" v-model="searchText" style="width: 120px;" />
+            <div class="search-label">类型：</div>
+            <el-select v-model="selectedStatus.type" placeholder="请选择" style="width: 120px;">
+            </el-select>
+            <div class="search-label">状态：</div>
+            <el-select v-model="selectedStatus.status" placeholder="请选择状态" style="width: 120px;">
+            </el-select>
+            <div class="search-label">协作单位：</div>
+            <el-select v-model="selectedStatus.collaborationUnit" placeholder="请选择协作单位" style="width: 120px;">
+            </el-select>
+            <div class="search-label">开工日期：</div>
+            <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始"
+                end-placeholder="结束"
+                style="width: 220px;"
+            />
+            <div class="btn">查询</div>
+            <div class="btn">删除</div>
+        </div>
+
+        <div class="points-list">
+            <el-table :data="pointsList">
+                <el-table-column prop="pointId" label="勘探点号"></el-table-column>
+                <el-table-column prop="type" label="类型"></el-table-column>
+                <el-table-column prop="height" label="高程（米）"></el-table-column>
+                <el-table-column prop="depth" label="深度（米）"></el-table-column>
+                <el-table-column prop="status" label="钻探情况"></el-table-column>
+                <el-table-column prop="collaborationUnit" label="协作单位"></el-table-column>
+                <el-table-column prop="startTime" label="开始施工时间"></el-table-column>
+                <el-table-column prop="endTime" label="结束施工时间"></el-table-column>
+                <el-table-column label="操作">
+                    <template #default="row">
+                        <div>
+                            <el-button type="primary" size="mini" @click="handleDetail(row)">查看详情</el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import router from '@/router'
+
+const searchText = ref('')
+const dateRange = ref([])
+const selectedStatus = ref({
+    type: '',
+    status: '',
+    collaborationUnit: ''
+})
+
+const pointsList = ref([
+    {
+        pointId: '123456',
+        type: 'A类',
+        height: 100,
+        depth: 50,
+        status: '已完成',
+        collaborationUnit: '单位A',
+        startTime: '2023-01-01',
+        endTime: '2023-01-10'
+    },
+    // 更多数据...
+])
+
+const handleDetail = (row) => {
+    router.push(`/project-risk-details?pointId=${row.row.pointId}`)
+}
+</script>
+
+<style scoped>
+.search-bar {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    border: 1px solid #e5e7eb;
+    padding: 8px 12px;
+}
+
+.search-label {
+    font-size: 12px;
+    width: 40px;
+}
+</style>
--- a/src/views/PersonalCompany.vue
+++ b/src/views/PersonalCompany.vue
@@ -0,0 +1,68 @@
+<template>
+    <div class="container">
+        <div>
+            <h2>协作单位</h2>
+            <div>123456公司</div>
+
+            <div class="company-details">
+                <div class="detail-item">单位名称<el-input></el-input></div>
+                <div class="detail-item">编录或技术人员<el-input></el-input></div>
+                <div class="detail-item">联系人<el-input></el-input></div>
+                <div class="detail-item">技术人员<el-input></el-input></div>
+                <div class="detail-item">联系方式<el-input></el-input></div>
+                <div class="detail-item">静探工人<el-input></el-input></div>
+                <div class="detail-item">钻探机长<el-input></el-input></div>
+                <div class="detail-item">钻机工人<el-input></el-input></div>
+                <div class="detail-item">静探机长<el-input></el-input></div>
+            </div>
+        </div>
+
+        <div>
+            <h2>人员管理</h2>
+
+            <div class="personal-details">
+                <div class="detail-item">姓名<el-input></el-input></div>
+                <div class="detail-item">职务<el-input></el-input></div>
+                <div class="detail-item">常驻地址<el-select></el-select></div>
+                <div class="detail-item">详细地址<el-input></el-input></div>
+                <div class="detail-item">手机号<el-input></el-input></div>
+                <div class="detail-item">邮箱<el-input></el-input></div>
+                <div class="detail-item">密码<el-input></el-input></div>
+                <div class="detail-item">确认密码<el-input></el-input></div>
+                <div class="detail-item">相关证书<el-input></el-input></div>
+                <div class="detail-item">劳务资质证书<el-input></el-input></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    flex-direction: column;
+    grid-column-gap: 20px;
+}
+
+.company-details {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-row-gap: 20px;
+    grid-column-gap: 20px;
+    margin-top: 40px;
+}
+
+.personal-details {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-row-gap: 20px;
+    grid-column-gap: 20px;
+    margin-top: 40px;
+}
+
+.detail-item {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 400px;
+}
+</style>
--- a/src/views/ProjectDetails.vue
+++ b/src/views/ProjectDetails.vue
@@ -21,5 +21,7 @@ import ProjectDetailsTop from '@/components/projectdetails/ProjectDetailsTop.vue
 .content {
    flex: 1;
    padding: 10px;
+    margin-left: 0px;
+    width: 100%;
 }
 </style>
--- a/src/views/ProjectDetailsSummary.vue
+++ b/src/views/ProjectDetailsSummary.vue
@@ -1,5 +1,24 @@
 <template>
-    <div>
-        <h1>Project Details Summary</h1>
+  <div class="left">
+    <ProjectDetailsLeft />
+    <div class="content">
+      <router-view />
    </div>
+  </div>
 </template>
+
+<script setup>
+import ProjectDetailsLeft from '@/components/projectdetails/ProjectDetailsLeft.vue'
+</script>
+
+<style scoped>
+.left {
+  display: flex;
+}
+
+.content {
+  flex: 1;
+  padding: 10px;
+  margin-left: 20px;
+}
+</style>
--- a/src/views/ProjectInformation.vue
+++ b/src/views/ProjectInformation.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        工程基本信息
+        <div class="form">
+            <div class="form-item">工程名称<el-input></el-input></div>
+            <div class="form-item">工程状态<el-select></el-select></div>
+            <div class="form-item">工程编号<el-input></el-input></div>
+            <div class="form-item">计划工期<el-date-picker style="width: 100px;"></el-date-picker></div>
+            <div class="form-item">工程地址 <el-input></el-input></div>
+            <div class="form-item">工程规模<el-select></el-select></div>
+            <div class="form-item">场地特点<el-select></el-select></div>
+            <div class="form-item">工程类型<el-select></el-select></div>
+            <div class="form-item">工程风险类型<el-select></el-select></div>
+            <div class="form-item">地址风险类型<el-select></el-select></div>
+        </div>
+    </div>
+
+    <div style="margin-top: 40px;">
+        项目人员基本信息
+        <div class="form">
+            <div class="form-item">项目负责人<el-input></el-input></div>
+            <div class="form-item">现场负责人<el-input></el-input></div>
+            <div class="form-item">注册人员<el-input></el-input></div>
+            <div class="form-item">技术人员<el-input></el-input></div>
+            <div class="form-item">审核人<el-input></el-input></div>
+            <div class="form-item">设计联系人<el-input></el-input></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.form {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-row-gap: 20px;
+    margin-top: 20px;
+}
+
+.form-item {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: 400px;
+}
+</style>
--- a/src/views/ProjectManagement.vue
+++ b/src/views/ProjectManagement.vue
@@ -98,7 +98,7 @@ const detail = (row) => {
 }

 .return-btn {
-    margin-left: auto; /* 返回按钮靠右 */
+    margin-left: auto;
 }

 .btn {
--- a/src/views/ProjectMeasure.vue
+++ b/src/views/ProjectMeasure.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        工程安全措施管理监督
+    </div>
+</template>
--- a/src/views/ProjectRisk.vue
+++ b/src/views/ProjectRisk.vue
@@ -0,0 +1,185 @@
+<template>
+    <div class="project-management">
+        <div class="search-bar">
+            <el-input placeholder="请输入关键字" v-model="searchText" style="width: 250px;" />
+            <div class="search-label">开工日期：</div>
+            <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始"
+                end-placeholder="结束"
+            />
+            <div class="search-label">工程状态：</div>
+            <el-select v-model="selectedStatus" placeholder="请选择状态" style="width: 180px;">
+                <el-option label="在施" value="pending" />
+                <el-option label="阶段完成" value="phaseCompleted" />
+                <el-option label="完成" value="completed" />
+            </el-select>
+            <div class="btn">查询</div>
+            <div class="btn">新增</div>
+            <div class="btn">添加</div>
+            <div class="btn">删除</div>
+            <div style="width: 70px;"></div>
+            <div class="btn">返回</div>
+        </div>
+
+        <div class="tag">
+            <div v-for="item in tagList[type]" :key="item">{{ item }}</div>
+        </div>
+
+        <div class="project-list">
+            <el-table :data="projectList">
+                <el-table-column label="id" prop="id" width="50" />
+                <el-table-column label="工程名称" prop="name" />
+                <el-table-column label="工程编号" prop="number" />
+                <el-table-column label="工程地点" prop="location" />
+                <el-table-column label="负责人" prop="principal" width="80" />
+                <el-table-column label="勘探点" prop="explorationPoint" width="80" />
+                <el-table-column label="总延米" prop="totalDistance" width="80" />
+                <el-table-column label="计划工期" prop="planDuration" width="80" />
+                <el-table-column label="创建日期" prop="createdAt" width="100" />
+                <el-table-column label="工程状态" prop="status" width="80" />
+                <el-table-column label="操作" prop="operation">
+                    <template #default="row">
+                        <div>
+                            <el-button @click="detail(row)">详情</el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import router from '@/router'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const type = computed(() => route.query.type || 'project')
+
+const dateRange = ref([])
+const selectedStatus = ref('')
+const searchText = ref('')
+
+const tagList = ref({
+    project: [
+    '深基坑',
+    '高边坡',
+    '特殊地质隧道及长隧道',
+    '特殊地质桥梁及特大桥',
+    '其它工程风险',
+    '首次遇见',
+    ],
+    environment: [
+        '平原项目',
+        '山区项目',
+        '市区项目',
+        '既有道路钻探',
+        '水上钻探',
+        '下有地下空间',
+        '下有铁路',
+        '下穿高速公路',
+        '下穿超高压输电网',
+        '下穿大江大河',
+        '海上工程',
+        '高海拔地区',
+        '存在地下管线',
+        '斜坡场地',
+        '其它场地',
+        '首次遇见',
+    ],
+    geology: [
+        '填土',
+        '深厚填土',
+        '软土',
+        '湿陷性黄土',
+        '膨胀土',
+        '红黏土',
+        '花岗岩残积土',
+        '岩溶',
+        '滑坡',
+        '泥石流',
+        '危岩崩塌',
+        '活动断裂',
+        '采空区',
+        '煤系地层或瓦斯',
+        '高低应力',
+        '其它地质风险',
+        '首次遇见',
+    ],
+})
+
+const projectList = ref([
+    {
+        id: 1,
+        name: '工程A',
+        number: '123456',
+        location: '地点A',
+        principal: '负责人A',
+        explorationPoint: '勘探点A',
+        totalDistance: 1000,
+        planDuration: '3个月',
+        createdAt: '2023-01-01',
+        status: 'pending',
+    },
+])
+
+const detail = (row) => {
+    router.push({ name: 'project-details', params: { id: row.id } })
+}
+
+</script>
+
+<style scoped>
+.project-management {
+    padding: 16px;
+}
+
+.search-bar {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    border: 1px solid #e5e7eb;
+    padding: 8px 12px;
+}
+
+.search-label {
+    font-size: 12px;
+    width: 90px;
+}
+
+.return-btn {
+    margin-left: auto;
+}
+
+.btn {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    padding: 0 12px;
+    transition: all 0.3s;
+}
+
+.btn:hover {
+    background-color: #f5f7fa;
+    border-color: #c6e2ff;
+}
+
+.tag {
+    display: flex;
+    gap: 12px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+</style>
--- a/src/views/ProjectSecurity.vue
+++ b/src/views/ProjectSecurity.vue
@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <div class="top">
+            工程编号：工程名称：项目负责人：
+        </div>
+        <div class="content">
+            <div class="item">
+                <div class="text">安全措施实施情况</div>
+                <div class="details">
+                    <div class="detail" v-for="(item, index) in details" :key="index">
+                        <div class="detail-text">{{ item }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="item">
+                <div class="text">安全风险踏勘情况</div>
+                <el-table :data="riskRecords" style="width: 100%" :style="{ 'margin-top': '15px' }">
+                    <el-table-column prop="riskPoint" label="勘探点" />
+                    <el-table-column prop="riskPhoto" label="照片或视频" />
+                    <el-table-column prop="riskDescription" label="风险描述" />
+                    <el-table-column prop="riskTextRemark" label="文字备注" />
+                    <el-table-column prop="riskVoiceRemark" label="语音备注" />
+                    <el-table-column prop="riskFactors" label="风险因素" />
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const details = [
+    '安全协议',
+    '踏勘记录',
+    '风险应急预案',
+    '交底记录',
+    '开工检查',
+    '安全培训记录',
+    '安全隐患排查及环保验收',
+    '安全生产会议',
+    '安全评审',
+    '应急演练记录',
+    '安全检查整改记录',
+    '安全处罚记录'
+]
+
+const riskRecords = [
+    {
+        riskPoint: '勘探点1',
+        riskPhoto: '照片1',
+        riskDescription: '风险描述1',
+        riskTextRemark: '文字备注1',
+        riskVoiceRemark: '语音备注1',
+        riskFactors: '风险因素1'
+    },
+    {
+        riskPoint: '勘探点2',
+        riskPhoto: '照片2',
+        riskDescription: '风险描述2',
+        riskTextRemark: '文字备注2',
+        riskVoiceRemark: '语音备注2',
+        riskFactors: '风险因素2'
+    }
+]
+</script>
+
+
+
+<style scoped>
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-left: 0px;
+    margin-top: -30px;
+}
+
+.details {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.detail {
+    width: 200px;
+    height: 100px;
+    background: #f9fafb;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 8px 12px;
+}
+</style>
--- a/src/views/SecurityManagement.vue
+++ b/src/views/SecurityManagement.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="security-management">
+        <div class="search-bar">
+            <el-input placeholder="请输入关键字" v-model="searchText" style="width: 250px;" />
+            <div class="search-label">开工日期：</div>
+            <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始"
+                end-placeholder="结束"
+            />
+            <div class="search-label">工程状态：</div>
+            <el-select v-model="selectedStatus" placeholder="请选择状态" style="width: 180px;">
+                <el-option label="在施" value="pending" />
+                <el-option label="阶段完成" value="phaseCompleted" />
+                <el-option label="完成" value="completed" />
+            </el-select>
+            <div class="btn">查询</div>
+        </div>
+
+        <div class="security-list">
+            <el-table :data="securityList">
+                <el-table-column prop="securityId" label="ID"></el-table-column>
+                <el-table-column prop="projectName" label="工程名称"></el-table-column>
+                <el-table-column prop="projectNumber" label="工程编号"></el-table-column>
+                <el-table-column prop="projectLocation" label="工程地点"></el-table-column>
+                <el-table-column prop="projectLeader" label="负责人"></el-table-column>
+                <el-table-column prop="explorationPoint" label="勘探点"></el-table-column>
+                <el-table-column prop="totalDistance" label="总延米"></el-table-column>
+                <el-table-column prop="projectDuration" label="计划工期"></el-table-column>
+                <el-table-column prop="createTime" label="创建日期"></el-table-column>
+                <el-table-column prop="status" label="工程状态"></el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const searchText = ref('')
+const dateRange = ref([])
+const selectedStatus = ref('')
+const securityList = ref([
+    {
+        securityId: '1',
+        projectName: '工程A',
+        projectNumber: '123456',
+        projectLocation: '地点A',
+        projectLeader: '负责人A',
+        explorationPoint: '勘探点A',
+        totalDistance: '1000',
+        projectDuration: '30天',
+        createTime: '2023-01-01',
+        status: '在施'
+    },
+])
+</script>
+
+<style scoped>
+.search-bar {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    border: 1px solid #e5e7eb;
+    padding: 8px 12px;
+}
+
+.search-label {
+    font-size: 12px;
+    width: 90px;
+}
+
+.btn {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    padding: 0 12px;
+    transition: all 0.3s;
+}
+</style>
--- a/src/views/SecurityManagement2.vue
+++ b/src/views/SecurityManagement2.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <SecurityManagementTop />
+  </div>
+  <div class="content">
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+import SecurityManagementTop from '../components/securitymanagement/SecurityManagementTop.vue'
+</script>
+
+<style scoped>
+.content {
+  flex: 1;
+  padding: 10px;
+  margin-left: 0px;
+  width: 100%;
+}
+</style>
--- a/src/views/ViewRiskDetails.vue
+++ b/src/views/ViewRiskDetails.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="left">
+        <div>
+            <ProjectRiskDetailsLeft />
+        </div>
+
+        <div class="content">
+            <router-view />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ProjectRiskDetailsLeft from '@/components/ProjectRiskDetails/ProjectRiskDetailsLeft.vue'
+</script>
+
+<style scoped>
+.left {
+    display: flex;
+}
+
+.content {
+    flex: 1;
+    padding: 10px;
+    margin-left: 20px;
+}
+</style>