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="['project: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>