zdsz_vue/src/components/ConstructionDetails/index.vue

 <!--
    *@description: 工程历史详情
    *@author: yh Fu
    *@date: 2024-1-8 10: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="viewSource" class="projectTabs">
            <el-tab-pane
                :label="e.label"
                :name="e.value"
                v-for="(e,idx) in currentDicts"
                :key="idx"
                >
                <el-collapse
                    class="rmOldPie"
                    v-for="(e,idx) in currentCollapses"
                    :key="idx"
                    >
                    <el-collapse-item  :name="idx">
                        <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;">{{ e.updateTime }}</h2>
                            </div>
                        </template>
                        <!--  人员信息 -->
                        <div>
                            负责人：{{ e.headName || '未知'}} &nbsp;&nbsp;
                            施工人：{{ e.constructUser || '未知'}} &nbsp;&nbsp;
                            负责人电话：{{ e.headPhone || '未知'}} &nbsp;&nbsp;
                            施工人电话：{{ e.constructPhone || '未知'}}
                        </div>
                        <hr>
                        <!--  用料明细 -->
                        <div
                            v-for="(i,idx) in e.zEngineeringMaterialBo"
                            :key="idx"
                        >
                            品牌：{{ i.brand || '未知'}}
                            材质：{{ i.corrosionLevel || '未知'}}
                            上门类型：{{ i.visitType || '未知'}}
                        </div>
                        <hr>
                        <!-- 照片墙 -->
                        <!-- <div style="width: 100%;height: 100%;">
                            <img :src=require(v) v-for="v in e.zEngiineeringPhotoBoList" :key="v">

                        </div> -->
                        <ObsImageUpload
                          ref="obsImageUpload"
                          :limit="9999"
                          :fileType="['png', 'jpg', 'jpeg']"
                          disabled
                          :value="e.zEngiineeringPhotoBoList"
                          ></ObsImageUpload>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
            <el-button class="check" @click="checkWorking">审核</el-button>
        </el-tabs>
    </el-dialog>
</template>

<script>
export default {
    name:'ConstructionDetails',
    props:['currentCollapses'],
    data(){
        return {
            currentDicts:[],              // 当前类型工程节点项
            dialogVisible:false,
            activeNames: ['0'],
        }
    },
    methods:{
        // 查看单节点历史
        viewSource(e){
            console.log(this.$parent)
            this.$parent.viewNodeSource(e.name)
        },
        // 单项审核
        checkWorking(){

        },
        // 查看历史
        open(dicts,type = null){
            if(type == '1' || type == '2'){
              // 工业 市政
              this.$parent.viewNodeSource()
              this.currentDicts = [
                {
                  value:"历史数据",
                  label:"历史数据"
                }
              ]
            }else{
              console.log(dicts)
              this.currentDicts = dicts
            }
            this.dialogVisible = true
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog{
    height: 85%;
    .el-dialog__body{
        overflow: hidden;
        height: 94%;
    }
}

::v-deep .el-upload--picture-card{
    display: none;
}
.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;
            overflow: hidden;
            overflow-x: scroll;
        }
        ::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>