jhprjv2/ruoyi-ui/src/views/project/surProject/myIndex.vue

<template>
    <div class="project-my-index">
        <!--
        111111111111111
        <div style="width: 200px;height: 148px;position: relative;display:inline-block;">
            <border-box1/>
        </div>
        <div style="width: 200px;height: 148px;position: relative;display:inline-block;">
            <border-box2/>
        </div>
        <div style="width: 200px;height: 148px;position: relative;display:inline-block;">
            <border-box3/>
        </div>
        -->
        <div class="prj-nav">
            <el-radio-group v-model="selPrj" @input="doSelPrj">
                <el-radio-button v-for="(it, idx) in prjs" :key="idx" :label="it.id">{{ it.projectName }}</el-radio-button>
            </el-radio-group>
        </div>
        <div class="prj-info">
            <el-col :span="6">
                <span class="sp-label">责任主体:</span>
                <span class="sp-text">{{ prj.deptName }}</span>
            </el-col>

            <el-col :span="6">
                <span class="sp-label">父级项目:</span>
                <span class="sp-text">{{ prj.paretProjectName }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">项目建设类型:</span>
                <span class="sp-text">{{ prj.paretProjectName }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">项目简称:</span>
                <span class="sp-text">{{ prj.simpleName }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">项目分类:</span>
                <span class="sp-text">{{ getprojectType(prj.projectType) }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">项目等级:</span>
                <span class="sp-text">{{ getprojectLvl(prj.projiectLevel) }}</span>
            </el-col>
            <el-col :span="12">
                <span class="sp-label">项目地址:</span>
                <span class="sp-text">{{ prj.projectAddress }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">工程期限:</span>
                <span class="sp-text">{{ prj.projectTimeLimit?prj.projectTimeLimit+'天':'' }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">总投资:</span>
                <span class="sp-text">{{ prj.totalInvestment?prj.totalInvestment+'万元':'' }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">建筑面积:</span>
                <span class="sp-text">{{ prj.floorArea?prj.floorArea+'平方米':'' }}</span>
            </el-col>
            <el-col :span="12">
                <span class="sp-label">开累产值:</span>
                <span class="sp-text">{{ prj.totalOutputValue?prj.totalOutputValue+'万元':'' }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">计划完成时间:</span>
                <span class="sp-text">{{ prj.plannedCompletionTime }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">计划开工时间:</span>
                <span class="sp-text">{{ prj.scheduledStartTime }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">实际开工时间:</span>
                <span class="sp-text">{{ prj.actualOperatingTime }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">实际完工时间:</span>
                <span class="sp-text">{{ prj.actualCompletionTime }}</span>
            </el-col>

            <el-col :span="6">
                <span class="sp-label">合同总额:</span>
                <span class="sp-text">{{ prj.contractAmount?prj.contractAmount+'万元':'' }}</span>
            </el-col>

            <el-col :span="6">
                <span class="sp-label">付款金额:</span>
                <span class="sp-text">{{ prj.paidAmount?prj.paidAmount+'万元':'' }}</span>
            </el-col>

            <el-col :span="6">
                <span class="sp-label">挂账金额:</span>
                <span class="sp-text">{{ prj.onAccountAmount?prj.onAccountAmount+'万元':'' }}</span>
            </el-col>

            <el-col :span="6">
                <span class="sp-label">重要等级:</span>
                <span class="sp-text">{{ getWeight(prj.weightType) }}</span>
            </el-col>

            <el-col :span="6">
                <span class="sp-label">劳务人员数:</span>
                <span class="sp-text">{{ prj.servicePersonnel?prj.servicePersonnel+'人':'' }}</span>
            </el-col>
            <el-col :span="6">
                <span class="sp-label">监理人员数:</span>
                <span class="sp-text">{{ prj.supervisorPersonnel?prj.supervisorPersonnel+'人':'' }}</span>
            </el-col>
            <el-col :span="12">
                <span class="sp-label">总包人员数:</span>
                <span class="sp-text">{{ prj.generalContractor?prj.generalContractor+'人':'' }}</span>
            </el-col>

            <el-col :span="24">
                <span class="sp-label">项目概述:</span>
                <span class="sp-text">{{ prj.projectSummarize }}</span>
            </el-col>
        </div>

        <div class="tool-bar">
            <el-button type="primary" @click="doPrjProcessMgr" v-hasPermi="['project:surProject:edit']"  icon="el-icon-time">进度管理</el-button>
            <el-button type="primary" @click="doPrjAssess"  v-hasPermi="['system:assess:list']"  icon="el-icon-coordinate">季度考核管理</el-button>
            <el-button type="primary" @click="doPrjBuildNode" v-hasPermi="['project:build_node_data:list']"  icon="el-icon-data-analysis">计划节点管理</el-button>
            <el-button type="primary" @click="doPrjAttendance" v-hasPermi="['project:surProjectAttendance:add']"  icon="el-icon-s-check">今日出勤</el-button>
        </div>
        <ProjectScheduleDlg ref="prjSchDlg"></ProjectScheduleDlg>
        <assess-drawer ref="assessDrawer"></assess-drawer>
        <build-node-drawer ref="nodeDrawer"></build-node-drawer>
        <attendance-drawer ref="attDrawer"></attendance-drawer>
    </div>
</template>

<script>
import { listSurProject} from "@/api/project/surProject";
import ProjectScheduleDlg from '../surProjectSchedule/ProjectScheduleDlg.vue'
import AssessDrawer from '../surProjectQuarterlyAssess/assessDrawer.vue'
import buildNodeDrawer from '../surBuildNode/buildNodeDrawer.vue'
import attendanceDrawer from '../surProjectAttendance/attendanceDrawer.vue'
export default {
    dicts: ['sys_check_state','sur_project_xmjd', 'project_build_type', 'sys_common_isdel', 'project_category','project_level','sur_project_weight'],
    name: 'RuoyiUiMyIndex',
    components:{
        ProjectScheduleDlg,AssessDrawer,buildNodeDrawer,attendanceDrawer
    },
    data() {
        return {
            prjs: [],
            selPrj: 0,
            prj: {}
        };
    },

    mounted() {
        this.loadData();
    },

    methods: {
        doPrjAttendance(){
            this.$refs.attDrawer.show(this.prj);
        },
        getWeight(v){
            let tmps=this.dict.type.sur_project_weight.filter(d=>d.value==v);
            return tmps.length>0?tmps[0].label:'';
        },
        getprojectType(v){
            let tmps=this.dict.type.project_category.filter(d=>d.value==v);
            return tmps.length>0?tmps[0].label:'';
        },
        getprojectLvl(v){
            let tmps=this.dict.type.project_level.filter(d=>d.value==v);
            return tmps.length>0?tmps[0].label:'';
        },
        doPrjProcessMgr(){
            this.$refs.prjSchDlg.showDialog(this.prj);
        },
        doPrjAssess(){
            this.$refs.assessDrawer.show(this.prj);
        },
        doPrjBuildNode(){
            this.$refs.nodeDrawer.show(this.prj);
        },
        doSelPrj(a, b) {
            let tmps = this.prjs.filter(d => d.id == this.selPrj);
            this.prj = tmps.length > 0 ? tmps[0] : {};
        },
        loadData() {
            let queryParams = {
                pageNum: 1,
                pageSize: 40,
            };
            listSurProject(queryParams).then(d => {
                this.prjs = d.rows || [];
                if (this.prjs.length > 0) {
                    this.selPrj = this.prjs[0].id;
                    this.prj = this.prjs[0];
                }
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.project-my-index {
    .prj-nav {
        ::v-deep .el-radio-group {
            max-height: 304px;
            overflow-y: auto;
            box-shadow: 5px 5px 7px 4px rgba(0, 0, 0, 0.3);
            padding: 4px;

            .el-radio-button {
                margin-left: 4px;
                margin-bottom: 4px;

                .el-radio-button__inner {
                    border: 1px solid #DCDFE6;
                }
            }
        }
    }

    .prj-info {
        box-shadow: 5px 5px 7px 4px rgba(0, 0, 0, 0.3);
        margin-top: 24px;
        overflow: auto;
        padding: 12px;
        line-height: 32px;
    }

    .tool-bar {
        box-shadow: 5px 5px 7px 4px rgba(0, 0, 0, 0.3);
        margin-top: 24px;
        overflow: auto;
        padding: 12px;
        line-height: 32px;
    }
}
</style>