Merge remote-tracking branch 'origin/zdsz3.0' into zdsz3.0

src/components/ConstructionDetails/index.vue

@@ -0,0 +1,185 @@
+
+ <!-- 
+    *@description: 房间详情
+    *@author: yh Fu
+    *@date: 2023-12-27 11:04:23
+    *@version: V1.0.5 
+-->
+
+<template>
+    <el-dialog 
+        :visible.sync="dialogVisible" 
+        title="" 
+        width="60%"
+        append-to-body
+        custom-class="ConstructionDetailsDialog">
+        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="projectTabs">
+            <el-tab-pane label="拆旧管" name="0">
+                <el-collapse v-model="activeNames" class="rmOldPie">
+                    <el-collapse-item  name="1">
+                        <template slot="title">
+                            <div style="display: flex;width: 100%;height: 100%;">
+                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
+                                </div>
+                                <h2 style="margin-left: 1%;font-weight: 700;">2023-12-25</h2>
+                            </div>
+                            
+                        </template>
+                        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+                        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+                    </el-collapse-item>
+                    <el-collapse-item name="2">
+                        <template slot="title">
+                            <div style="display: flex;width: 100%;height: 100%;">
+                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
+                                </div>
+                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-30</h2>
+                            </div>
+                        </template>
+                        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+                        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+                    </el-collapse-item>
+                    <el-collapse-item name="3">
+                        <template slot="title">
+                            <div style="display: flex;width: 100%;height: 100%;">
+                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
+                                </div>
+                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-27</h2>
+                            </div>
+                        </template>
+                        <div>简化流程：设计简洁直观的操作流程；</div>
+                        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+                        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+                    </el-collapse-item>
+                    <el-collapse-item name="4">
+                        <template slot="title">
+                            <div style="display: flex;width: 100%;height: 100%;">
+                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
+                                </div>
+                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-20</h2>
+                            </div>
+                        </template>
+                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+                    </el-collapse-item>
+                    <el-collapse-item name="5">
+                        <template slot="title">
+                            <div style="display: flex;width: 100%;height: 100%;">
+                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
+                                </div>
+                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-15</h2>
+                            </div>
+                        </template>
+                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+                    </el-collapse-item>
+                    <el-collapse-item name="6">
+                        <template slot="title">
+                            <div style="display: flex;width: 100%;height: 100%;">
+                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
+                                </div>
+                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-7</h2>
+                            </div>
+                        </template>
+                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+                    </el-collapse-item>
+                    <el-collapse-item name="7">
+                        <template slot="title">
+                            <div style="display: flex;width: 100%;height: 100%;">
+                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
+                                </div>
+                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-1</h2>
+                            </div>
+                        </template>
+                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+                    </el-collapse-item>
+                </el-collapse>
+
+            </el-tab-pane>
+            <el-tab-pane label="立杠" name="1">立杠</el-tab-pane>
+            <el-tab-pane label="挂表" name="2">挂表</el-tab-pane>
+            <el-tab-pane label="表后管" name="3">表后管</el-tab-pane>
+            <el-tab-pane label="管和阀" name="4">管和阀</el-tab-pane>
+            <el-button class="check" @click="checkWorking">审核</el-button>
+        </el-tabs>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    name:'ConstructionDetails',
+    data(){
+        return {
+            dialogVisible:true,
+            activeNames: ['0']
+        }
+    },
+    methods:{
+        // 单项审核
+        checkWorking(){
+
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog{
+    height: 85%;
+    .el-dialog__body{
+        overflow: hidden;
+        height: 94%;
+    }
+}
+.ConstructionDetailsDialog{
+    position: absolute;
+    .projectTabs{
+        height: 100%;
+        overflow: hidden;
+        overflow-y: scroll;
+        margin-top: 4%;
+        ::v-deep .el-tabs__content{
+            margin-top: 1%;
+        }
+        ::v-deep .el-tabs__nav{
+            border: none;
+        }
+        ::v-deep .el-tabs__item{
+            width: 47%;
+            border: 1px solid #797979;
+            border-radius: 5px;
+        }
+        ::v-deep .el-tabs__item.is-active{
+            background-color: #169BD5;
+            color: #fff;
+        }
+        ::v-deep .el-tabs__header{
+            position: fixed;
+            width: 53%;
+            border: none;
+            top: 13%;
+        }
+        ::v-deep .el-collapse-item__wrap{
+            padding: 0 4%;
+        }
+        .check{
+            position: fixed;
+            right: 22.1%;
+            top: 13.1%;
+            height: 4.6%;
+            background-color: #CC9900;
+            color: #fff;
+        }
+    }
+    .projectTabs::-webkit-scrollbar{
+        display: none;
+    }
+    ::v-deep .rmOldPie{
+        .el-collapse-item{
+            border: none;
+        }
+    }
+}
+</style>

src/router/index.js

@@ -161,6 +161,33 @@ export const dynamicRoutes = [
         meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
       }
     ]
+  },
+  {
+    name:'material',
+    path:'@/views/zdsz/enginee/material/index',
+    component: Layout,
+    meta: { title: '用料管理'},
+    permissions: ['zdsz:material:list'],
+    children: [
+      {
+        path: '/material_statistics',
+        component: () => import('@/views/zdsz/enginee/material/material_statistics/index'),
+        name: 'material_statistics',
+        meta: { title: '用料统计'}
+      },
+      {
+        path: '/progres_statistics',
+        component: () => import('@/views/zdsz/enginee/material/progres_statistics/progres_statistics'),
+        name: 'progres_statistics',
+        meta: { title: '进度统计'}
+      },
+      {
+        path: '/progres_visual',
+        component: () => import('@/views/zdsz/enginee/material/progres_visual/index'),
+        name: 'progres_visual',
+        meta: { title: '可视化进度'}
+      }
+    ]
   }
 ]
 

src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">RuoYi-Vue-Plus后台管理系统</h3>
+      <h3 class="title">贞达市政后台管理系统</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"

src/views/zdsz/enginee/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        工程管理
+    </div>
+</template>

src/views/zdsz/enginee/material/index.vue

@@ -0,0 +1,68 @@
+
+ <!-- 
+    *@description:用料管理
+    *@author: yh Fu
+    *@date: 2023-12-25 10:13:29
+    *@version: V1.0.5 
+    -->
+
+  <template>
+    <div class="materialContainer">
+        <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
+            <el-radio-button label="0">用料统计</el-radio-button>
+            <el-radio-button label="1">进度统计</el-radio-button>
+            <el-radio-button label="2">可视化进度</el-radio-button>
+        </el-radio-group>
+        <router-view class="component_contain">
+
+        </router-view>
+    </div>
+  </template>
+
+  <script>
+
+export default {
+    components:{
+    },
+    data(){
+        return {
+            currentMenu:null,   // 0:用料管理 1:进度统计 2:可视化进度
+        }   
+    },
+    methods:{ 
+        toModule(){
+            console.log(this.$router)
+            const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' : 'progres_visual'
+            this.$router.push({
+                path:`/${currentPage}`
+            })
+        }
+    },
+
+}
+</script>
+
+<style lang="scss" scoped>
+.materialContainer{
+    width: 100%;
+    height:928px;
+    .component_contain{
+        width: 100%;
+        height: 93%;
+        border: 1px solid skyblue;
+    }
+}
+</style>
+
+<style lang="scss" scoped>
+.el-radio-group{
+    width: 24%;
+    margin: 1% 0 0 1% !important;
+    .el-radio-button{
+        width: 33%;
+        .el-radio-button__inner{
+            width: 100%;
+        }
+    }
+}
+</style>

src/views/zdsz/enginee/material/material_statistics/index.vue

@@ -0,0 +1,286 @@
+
+ <!-- 
+    *@description: 用料统计
+    *@author: yh Fu
+    *@date: 2023-12-25 13:07:41
+    *@version: V1.0.5 
+    -->
+
+<template>
+    <div class="MaterialStatistics_Contain">
+        <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
+            <el-radio-button label="0">用料统计</el-radio-button>
+            <el-radio-button label="1">进度统计</el-radio-button>
+            <el-radio-button label="2">可视化进度</el-radio-button>
+        </el-radio-group>
+        <div class="topContain">
+            <div style="width: 100%;height: 100%;">
+                <el-select 
+                    v-model="currentCommunity" 
+                    placeholder="请选择行政区"
+                    class="projectSelect" 
+                    popper-class="projectDropDown" 
+                    :popper-append-to-body="false"
+                    >
+                    <el-option
+                        v-for="e in communityOptions"
+                        :key="e.value"
+                        :label="e.label"
+                        :value="e.value">
+                    </el-option>
+                </el-select>
+                <el-select 
+                    v-model="currentCommunity" 
+                    placeholder="请选择小区"
+                    class="projectSelect" 
+                    popper-class="projectDropDown" 
+                    :popper-append-to-body="false"
+                    >
+                    <el-option
+                        v-for="e in communityOptions"
+                        :key="e.value"
+                        :label="e.label"
+                        :value="e.value">
+                    </el-option>
+                </el-select>
+                <el-select 
+                    v-model="currentType" 
+                    placeholder="请选择工程类型" 
+                    class="projectSelect" 
+                    popper-class="projectDropDown" 
+                    :popper-append-to-body="false"
+                    >
+                    <el-option
+                        v-for="e in typeOptions"
+                        :key="e.value"
+                        :label="e.label"
+                        :value="e.value">
+                    </el-option>
+                </el-select>
+                <el-date-picker
+                    v-model="currentDate"
+                    class="projectSelect" 
+                    popper-class="projectDropDown" 
+                    :popper-append-to-body="false"
+                    type="date"
+                    placeholder="选择日期">
+                </el-date-picker>
+            </div>
+            
+            <el-button class="searchBtn">查询</el-button>
+            <el-button 
+                icon="el-icon-download"
+                @click="handleExport"
+                class="searchBtn"
+                v-hasPermi="['zdsz:visual_house:export']"
+                >导出</el-button>
+        </div>    
+        <el-table
+            class="materialStatisticsTable"
+            :data="tableData"
+            header-cell-style="background-color:#199ED8;border: 2px solid #000066"
+            border
+            :cell-style="tableRowClassName"
+            style="width: 100%">
+            <el-table-column
+            prop="date"
+            width="250"
+            label=""
+            >
+            </el-table-column>
+            <el-table-column
+            prop="name"
+            label="预计用料"
+            >
+            </el-table-column>
+            <el-table-column
+            prop="address"
+            label="实际用料">
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    name:'MaterialStatistics',
+    dicts:['district'],
+    data(){
+        return {
+            currentDate:null,
+            currentMenu:0,   // 0:用料管理 1:进度统计 2:可视化进度
+            typeOptions:[
+                {
+                    value: '0',
+                    label: '市政工程'
+                }, 
+                {
+                    value: '1',
+                    label: '工业工程'
+                },
+                {
+                    value: '2',
+                    label: '民用工程'
+                }, 
+                {
+                    value: '3',
+                    label: '危险作业'
+                }, 
+                {
+                    value: '4',
+                    label: '顶管工程'
+                },
+                {
+                    value: '5',
+                    label: '基建工程'
+                }
+            ],
+            communityOptions:[
+                {
+                    value: '0',
+                    label: '领秀世家'
+                }, 
+                {
+                    value: '1',
+                    label: '上东府里'
+                },
+                {
+                    value: '2',
+                    label: '清华园'
+                }, 
+                {
+                    value: '3',
+                    label: '万科蓝山'
+                }, 
+                {
+                    value: '4',
+                    label: '龙腾香格里'
+                },
+            ],
+            currentType:null,
+            currentCommunity:null,
+            tableData: [
+                {
+                    date: '规格',
+                    name: '0.5cm',
+                    address: '1cm'
+                }, 
+                {
+                    date: '尺寸',
+                    name: '1.2m',
+                    address: '1.5m'
+                }, 
+                {
+                    date: '材质',
+                    name: 'pv',
+                    address: '钢 pv pc'
+                }, 
+            ]
+
+        }
+    },
+    mounted(){
+        console.log(this.dict)
+    },
+    methods:{
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('zdsz/visual_house/export', {
+                ...this.queryParams
+            }, `house_${new Date().getTime()}.xlsx`)
+        },
+        tableRowClassName(){
+            return "background:#199ED8;border: 2px solid #000066"
+        },
+        toModule(){
+            console.log(this.$router)
+            const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' : 'progres_visual'
+            this.$router.push({
+                path:`/${currentPage}`
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.tags-view-container{
+    display: none;
+}
+.MaterialStatistics_Contain{
+    width: 100%;
+    height: 100%;
+    padding: 1%;
+    .topContain{  
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        .searchBtn{
+            width: 11%;
+            background-color: #1890FF;
+            color: #fff;
+        }
+        ::v-deep .projectSelect{
+            .el-input__inner{
+                background-color: #1890FF;
+                color: #fff;
+            }
+        }
+        .projectDropDown{
+            background-color: #1890FF;
+            .el-select-dropdown__item{
+                background-color: #1890FF;
+                color: #fff;
+            }
+            ::v-deep .el-select-dropdown__list {
+                padding-top: 0 !important;
+                padding-bottom: 0;
+            }
+        }
+        .projectDropDown >ul{
+            padding-top: 0 ;
+            padding-bottom: 0;
+        }
+    }
+    .materialStatisticsTable{
+        margin-top: 1%;
+        border: 2px solid #000066 !important;
+
+    }
+    .materialStatisticsTable::before{
+        background-color:#000066 ;
+    }
+    .materialStatisticsTable::after{
+        background-color:#000066 ;
+    }
+}
+</style>
+
+<style lang="scss" scoped>
+.customTable{
+    .el-table__header-wrapper th{
+    background-color: #199ED8;
+}
+.el-table--border th.el-table__cell{
+    border: 2px solid #000066 !important;
+}
+.el-table__empty-block{
+    background-color: #199ED8;
+}
+.el-table__empty-text{
+    color: #000066;
+}
+.el-table__cell{
+    background-color: #199ED8 ;
+    border: 2px solid #000066 !important;
+}
+.el-table__cell >div{
+    text-align: center;
+}
+.el-button{
+    background-color: #169BD5;
+    color: #fff;
+}
+}
+
+</style>

src/views/zdsz/enginee/material/progres_statistics/progres_statistics.vue

@@ -0,0 +1,190 @@
+
+ <!-- 
+    *@description: 进度统计
+    *@author: yh Fu
+    *@date: 2023-12-25 13:26:18
+    *@version: V1.0.5 
+    -->
+
+<template>
+    <div class="ProgreStatistics_Contain">
+        <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
+            <el-radio-button label="0">用料统计</el-radio-button>
+            <el-radio-button label="1">进度统计</el-radio-button>
+            <el-radio-button label="2">可视化进度</el-radio-button>
+        </el-radio-group>
+        <div class="topContain">
+            <el-select 
+                v-model="currentType" 
+                placeholder="请选择"
+                class="projectSelect" 
+                popper-class="projectDropDown" 
+                :popper-append-to-body="false"
+                >
+            <el-option
+                v-for="e in typeOptions"
+                :key="e.value"
+                :label="e.label"
+                :value="e.value">
+                </el-option>
+            </el-select>
+            <el-button class="searchBtn">查询</el-button>
+        </div>
+        <el-table
+            class="materialStatisticsTable"
+            :data="tableData"
+            header-cell-style="background-color:#199ED8;border: 2px solid #000066"
+            border
+            :cell-style="tableRowClassName"
+            style="width: 100%">
+            <el-table-column
+            prop="name"
+            width="250"
+            label="小区名称"
+            >
+            </el-table-column>
+            <el-table-column
+            prop="doing"
+            label="未开工（户）"
+            >
+            </el-table-column>
+            <el-table-column
+            prop="willDone"
+            label="施工（户）">
+            </el-table-column>
+            <el-table-column
+            prop="done"
+            label="完工（户）">
+            </el-table-column>
+
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    name:'ProgreStatistics',
+    data(){
+        return {
+            currentMenu:1,   // 0:用料管理 1:进度统计 2:可视化进度
+            typeOptions:[
+                {
+                    value: '0',
+                    label: '市政工程'
+                }, 
+                {
+                    value: '1',
+                    label: '工业工程'
+                },
+                {
+                    value: '2',
+                    label: '民用工程'
+                }, 
+                {
+                    value: '3',
+                    label: '危险作业'
+                }, 
+                {
+                    value: '4',
+                    label: '顶管工程'
+                },
+                {
+                    value: '5',
+                    label: '基建工程'
+                }
+            ],
+            tableData: [
+                {
+                    name: '兰亭湖畔',
+                    doing: '30',
+                    willDone:'19',
+                    done:'20'
+                }, 
+                {
+                    name: '清华园',
+                    doing: '30',
+                    willDone:'19',
+                    done:'20'
+                }, 
+                {
+                    name: '领秀世家',
+                    doing: '30',
+                    willDone:'19',
+                    done:'20'
+                }, 
+                {
+                    name: '上东府里',
+                    doing: '30',
+                    willDone:'19',
+                    done:'20'
+                }, 
+                {
+                    name: '龙腾香格里',
+                    doing: '30',
+                    willDone:'19',
+                    done:'20'
+                }, 
+            ],
+            currentType:'管'
+        }
+    },
+    methods:{
+        tableRowClassName(){
+            return "background:#199ED8;border: 2px solid #000066"
+        },
+        toModule(){
+            console.log(this.$router)
+            const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' : 'progres_visual'
+            this.$router.push({
+                path:`/${currentPage}`
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.ProgreStatistics_Contain{
+    width: 100%;
+    height: 100%;
+    padding: 1%;
+    .topContain{  
+        display: flex;
+        justify-content: space-between;
+        width: 38%;
+        .searchBtn{
+            width: 11%;
+            background-color: #1890FF;
+            color: #fff;
+        }
+        ::v-deep .projectSelect{
+            .el-input__inner{
+                background-color: #1890FF;
+                color: #fff;
+            }
+        }
+        .projectDropDown{
+            background-color: #1890FF;
+            .el-select-dropdown__item{
+                background-color: #1890FF;
+                color: #fff;
+            }
+            ::v-deep .el-select-dropdown__list {
+                padding-top: 0 !important;
+                padding-bottom: 0;
+            }
+        }
+    }
+    .materialStatisticsTable{
+        margin-top: 1%;
+        border: 2px solid #000066 !important;
+
+    }
+    .materialStatisticsTable::before{
+        background-color:#000066 ;
+    }
+    .materialStatisticsTable::after{
+        background-color:#000066 ;
+    }
+}
+</style>

src/views/zdsz/enginee/material/progres_visual/index.vue

@@ -0,0 +1,223 @@
+
+ <!-- 
+    *@description: 可视化进度
+    *@author: yh Fu
+    *@date: 2023-12-25 13:27:19
+    *@version: V1.0.5 
+    -->
+
+<template>
+    <div class="progresVisualContainer">
+        <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
+            <el-radio-button label="0">用料统计</el-radio-button>
+            <el-radio-button label="1">进度统计</el-radio-button>
+            <el-radio-button label="2">可视化进度</el-radio-button>
+        </el-radio-group>
+        <div class="topContain">
+            <div style="width: 100%;height: 100%;">
+                <el-select 
+                    v-model="currentCommunity" 
+                    placeholder="请选择行政区"
+                    class="projectSelect" 
+                    popper-class="projectDropDown" 
+                    :popper-append-to-body="false"
+                    >
+                    <el-option
+                        v-for="e in communityOptions"
+                        :key="e.value"
+                        :label="e.label"
+                        :value="e.value">
+                    </el-option>
+                </el-select>
+                <el-select 
+                    v-model="currentCommunity" 
+                    placeholder="请选择小区"
+                    class="projectSelect" 
+                    popper-class="projectDropDown" 
+                    :popper-append-to-body="false"
+                    >
+                    <el-option
+                        v-for="e in communityOptions"
+                        :key="e.value"
+                        :label="e.label"
+                        :value="e.value">
+                    </el-option>
+                </el-select>
+                <el-select 
+                    v-model="currentType" 
+                    placeholder="请选择工程类型" 
+                    class="projectSelect" 
+                    popper-class="projectDropDown" 
+                    :popper-append-to-body="false"
+                    >
+                    <el-option
+                        v-for="e in typeOptions"
+                        :key="e.value"
+                        :label="e.label"
+                        :value="e.value">
+                    </el-option>
+                </el-select>
+                <el-date-picker
+                    v-model="currentDate"
+                    class="projectSelect" 
+                    popper-class="projectDropDown" 
+                    :popper-append-to-body="false"
+                    type="date"
+                    placeholder="选择日期">
+                </el-date-picker>
+            </div>
+            <el-button class="searchBtn">查询</el-button>
+            <el-button class="searchBtn">导出</el-button>
+            <div class="unitStatus">
+                <div 
+                    v-for="(e,idx) in unitStatusOption"
+                    :key="idx"
+                    :style="`background-color:${e.color};width: 22%;height: 35px;position: absolute;right:${idx*130}px;box-shadow:0 5px 5px 0 #CDCDCD`"
+                    >
+                    <div 
+                        style="position: relative;left: 107%;width: 116%;top: 20%;"
+                        >
+                        {{ e.label }}
+                    </div>
+                </div>
+            </div>
+        </div>   
+        <!-- 房间集合 -->
+        <ConstructionDetails/>
+    </div>
+</template>
+
+<script>
+import ConstructionDetails from '@/components/ConstructionDetails'
+export default {
+    name:'ProgreVisual',
+    components:{
+        ConstructionDetails
+    },
+    data(){
+        return {
+            currentMenu:2,   // 0:用料管理 1:进度统计 2:可视化进度
+            typeOptions:[
+                {
+                    value: '0',
+                    label: '市政工程'
+                }, 
+                {
+                    value: '1',
+                    label: '工业工程'
+                },
+                {
+                    value: '2',
+                    label: '民用工程'
+                }, 
+                {
+                    value: '3',
+                    label: '危险作业'
+                }, 
+                {
+                    value: '4',
+                    label: '顶管工程'
+                },
+                {
+                    value: '5',
+                    label: '基建工程'
+                }
+            ],
+            communityOptions:[
+                {
+                    value: '0',
+                    label: '领秀世家'
+                }, 
+                {
+                    value: '1',
+                    label: '上东府里'
+                },
+                {
+                    value: '2',
+                    label: '清华园'
+                }, 
+                {
+                    value: '3',
+                    label: '万科蓝山'
+                }, 
+                {
+                    value: '4',
+                    label: '龙腾香格里'
+                },
+            ],
+            unitStatusOption:[
+                {
+                    label:'竣工',
+                    color:'#009900'
+                },
+                {
+                    label:'进行中',
+                    color:'#FFFF66'
+                },
+                {
+                    label:'未开始',
+                    color:'#999999'
+                },
+            ],
+            currentType:null,
+            currentCommunity:null,
+        }
+    },
+    methods:{
+        toModule(){
+            console.log(this.$router)
+            const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' : 'progres_visual'
+            this.$router.push({
+                path:`/${currentPage}`
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.progresVisualContainer{
+    width: 100%;
+    height: 100%;
+    padding: 1%;
+    .topContain{  
+        display: flex;
+        justify-content: space-between;
+        width: 60%;
+        .searchBtn{
+            width: 11%;
+            background-color: #1890FF;
+            color: #fff;
+        }
+        ::v-deep .projectSelect{
+            width: 20% !important;
+            .el-input__inner{
+                background-color: #1890FF;
+                color: #fff;
+            }
+        }
+        .projectDropDown{
+            background-color: #1890FF;
+            .el-select-dropdown__item{
+                background-color: #1890FF;
+                color: #fff;
+            }
+            ::v-deep .el-select-dropdown__list {
+                padding-top: 0 !important;
+                padding-bottom: 0;
+            }
+        }
+        .projectDropDown >ul{
+            padding-top: 0 ;
+            padding-bottom: 0;
+        }
+        .unitStatus{
+            width: 13%;
+            display: flex;
+            position: absolute;
+            right: 7%;
+            height: 5%;
+        }
+    }
+}
+</style>

src/views/zdsz/enginee/visual_house/index.vue

@@ -0,0 +1,32 @@
+
+ <!-- 
+    *@description:可视化房屋
+    *@author: yh Fu
+    *@date: 2023-12-25 11:29:13
+    *@version: V1.0.5 
+    -->
+
+    <template>
+        <div>
+            可视化房屋
+            <div></div>
+        </div>
+      </template>
+    
+      <script>
+    
+    export default {
+        data(){
+            return {
+            }
+        },
+        methods:{
+    
+        },
+        
+    }
+    </script>
+    
+    <style lang="scss" scoped>
+    
+    </style>