新增 施工详情

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>