YZProjectCloud/yanzhu-bigscreen/src/views/projectDetail.vue

    <template>
    <div class="project-detail main-page">

        <el-col :span="6" class="h100">
            <module-one-1-1 label="项目概况">
                <div class="glr-title">{{ selProject?.projectName||'' }}</div>
                <div class="dept-info-list">
                    <el-col :span="12" class="dept-item">
                        <div class="dept-title">建设单位</div>
                        <div v-if="deptType1==null" class="dept-nodata">
                                暂无数据
                        </div>
                        <div class="dept-info" v-else>                           
                            <img class="dept-img" src="images/company_3.png"/>
                            <div class="dept-row">
                                <div class="dept-name"> {{ deptType1.deptName }}</div>
                                <div class="dept-leader-phone">
                                    <span class="dept-leader">{{deptType1.leader}}</span>
                                    <span class="dept-phone">{{deptType1.phone}}</span>
                                </div>
                            </div>
                        </div>                
                    </el-col>
                    <el-col :span="12" class="dept-item">
                        <div class="dept-title">设计单位</div>
                        <div v-if="deptType2==null" class="dept-nodata">
                                暂无数据
                        </div>
                        <div class="dept-info" v-else>                           
                            <img class="dept-img" src="images/company_2.png"/>
                            <div class="dept-row">
                                <div class="dept-name"> {{ deptType2.deptName }}</div>
                                <div class="dept-leader-phone">
                                    <span class="dept-leader">{{deptType2.leader}}</span>
                                    <span class="dept-phone">{{deptType2.phone}}</span>
                                </div>
                            </div>
                        </div>                    
                    </el-col>
                    <el-col :span="12" class="dept-item">
                        <div class="dept-title">总包单位</div>
                        <div v-if="deptType3.deptName==null" class="dept-nodata">
                                暂无数据
                        </div>
                        <div class="dept-info" v-else>                           
                            <img class="dept-img" src="images/company_3.png"/>
                            <div class="dept-row">
                                <div class="dept-name"> {{ deptType3.deptName }}</div>
                                <div class="dept-leader-phone">
                                    <span class="dept-leader">{{deptType3.leader}}</span>
                                    <span class="dept-phone">{{deptType3.phone}}</span>
                                </div>
                            </div>
                        </div>                    
                    </el-col>
                    <el-col :span="12" class="dept-item">
                        <div class="dept-title">监理单位</div>
                        <div v-if="deptType4==null" class="dept-nodata">
                                暂无数据
                        </div>
                        <div class="dept-info" v-else>                           
                            <img class="dept-img" src="images/company_11.png"/>
                            <div class="dept-row">
                                <div class="dept-name"> {{ deptType4.deptName }}</div>
                                <div class="dept-leader-phone">
                                    <span class="dept-leader">{{deptType4.leader}}</span>
                                    <span class="dept-phone">{{deptType4.phone}}</span>
                                </div>
                            </div>
                        </div>                    
                    </el-col>

                    <el-col :span="12" class="dept-item">
                        <div class="dept-title">检测单位</div>
                        <div v-if="deptType5==null" class="dept-nodata">
                                暂无数据
                        </div>
                        <div class="dept-info" v-else>                           
                            <img class="dept-img" src="images/company_12.png"/>
                            <div class="dept-row">
                                <div class="dept-name"> {{ deptType5.deptName }}</div>
                                <div class="dept-leader-phone">
                                    <span class="dept-leader">{{deptType5.leader}}</span>
                                    <span class="dept-phone">{{deptType5.phone}}</span>
                                </div>
                            </div>
                        </div>                    
                    </el-col>

                    <el-col :span="12" class="dept-item">
                        <div class="dept-title">勘察单位</div>
                        <div v-if="deptType6==null" class="dept-nodata">
                                暂无数据
                        </div>
                        <div class="dept-info" v-else>                           
                            <img class="dept-img" src="images/company_10.png"/>
                            <div class="dept-row">
                                <div class="dept-name"> {{ deptType6.deptName }}</div>
                                <div class="dept-leader-phone">
                                    <span class="dept-leader">{{deptType6.leader}}</span>
                                    <span class="dept-phone">{{deptType6.phone}}</span>
                                </div>
                            </div>
                        </div>                    
                    </el-col>

                </div>
            </module-one-1-1>
            <module-one-1-1 label="项目概况">

            </module-one-1-1>
            <module-one-1-1 label="项目概况">

            </module-one-1-1>
        </el-col>
        <el-col :span="12" class="h100">
            <module-one-2-2 label="项目概况">

</module-one-2-2>
            <module-one-1-2 label="项目概况">

            </module-one-1-2>
        </el-col>
        <el-col :span="6" class="h100">
            <module-one-1-1 label="项目概况">

            </module-one-1-1>
            <module-one-2-1 label="项目概况">

            </module-one-2-1>
        </el-col>

    </div>
</template>

<script>
export default {
    data() {
        return {
            selProject:null,
            prjInfo:{},
            deptType1:[],//建设单位
            deptType2:[],//设计单位
            deptType3:[],//总包单位
            deptType4:[],//监理单位
            deptType5:[],//检测单位
            deptType6:[],//勘察单位
        }
    },
    mounted() {
        this.$store.dispatch('ChangeNav', 2);
        this.$bus.$on('projectChange', prj => {
            this.selProject=prj;
            this.init();
        });
        this.selProject=this.$store.getters.selProject;
        this.init();
    },
    methods:{
        init(){
            if(!this.selProject){
                return;
            }
            this.$api.project.getProjectInfo(this.selProject.id).then(d=>{
                this.prjInfo=d.data||{};
                let tmps=this.prjInfo.projectDeptsList||[];
                const func=(t)=>{
                    let objs=tmps.filter(it=>it.deptType==t);
                    return objs.length>0?objs[0]:null;
                };
                
                this.deptType1=func('建设单位');
                this.deptType2=func('设计单位');
                this.deptType3={deptName:this.prjInfo.disDeptName,leader:this.prjInfo.projectPerson,phone:this.prjInfo.projectPersonPhone};
                this.deptType4=func("监理单位");
                this.deptType5=func("检测单位");
                this.deptType6=func("勘察单位");
            });
        }
    }
}
</script>

<style lang="less"></style>