neim/neim-ui/src/views/largeScreenPage/Subpage/projectEvolve.vue

<template>
  <div class="page projectEvolvePage">
    <div class="timeBox">{{ time }}</div>
    <div class="topTiltle">
      <span class="title">项目进展情况</span>
    </div>
    <div class="btuGroup">
      <div class="topBtu topLeftBtu" @click="back()">
        <span class="btuText">返回&nbsp;</span>
      </div>
      <div class="topBtu topRightBtu" @click="push()">
        <span class="btuText">后台管理</span>
      </div>
    </div>
    <div class="myMain-container">
      <div class="tableBox">
        <div class="tableTiltleTextBg">
          <div class="tableTitle">
            <span class="mainTitle">项目工作进展情况</span>
          </div>
        </div>
        <div class="tableContent">
          <el-table
            :data="tableData"
            border
            height="calc(75vh)"
            style="width: 100%" :span-method="handleSpanMethod">
            <el-table-column
              prop="index"
              label="序号"
              width="80" align="center">
            </el-table-column>
            <el-table-column
              prop="taskContent"
              label="工作内容" align="center">
            </el-table-column>
            <el-table-column
              prop="planTime"
              label="计划完成时间"
              width="150" align="center">
            </el-table-column>
            <el-table-column
              prop="detailedTaskContent"
              label="详细工作内容">
            </el-table-column>
            <el-table-column
              prop="realTime"
              label="实际完成时间"
              width="130" align="center">
            </el-table-column>
            <el-table-column
              prop="status"
              label="进展状态"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="bottomPushBtu" @click="pushPreProjectResource()">
      <span>前期项目资源信息</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "projectEvolve",
  data() {
    return {
      timer: null,
      time: '',
      project: {},
      tableData: [],
      // 合并单元格
      spanArr:[]
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    this.project = JSON.parse(this.$store.getters.projectInfo)
    this.formatTime()
    this.timer = setInterval(this.formatTime, 1000 * 60)
    this.getProjectEvolve()
  },
  methods: {
    // 获取项目进展情况
    getProjectEvolve() {
      this.spanArr = []
      this.tableData = [
        {
          index: '一',
          taskContent: '成立项目公司',
          planTime: '2023/2/15',
          detailedTaskContent: '',
          realTime: '',
          status: '已完成',
        },
        {index: '二', taskContent: '项目核准', planTime: '3月5日前必须完成', detailedTaskContent: '', realTime: '', status: '',},
        {
          index: '1',
          taskContent: '项目土地预审批复',
          planTime: '2023/2/20',
          detailedTaskContent: '1.修编可研，将15万千瓦改成20万千瓦',
          realTime: '2023/2/5',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '项目土地预审批复',
          planTime: '2023/2/20',
          detailedTaskContent: '2.完成场址区1:2000和升压站1:500地形图测绘',
          realTime: '2023/2/28',
          status: '正在开展',
        },
        {
          index: '1',
          taskContent: '项目土地预审批复',
          planTime: '2023/2/20',
          detailedTaskContent: '3.微观选址完成',
          realTime: '2023/2/15',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '项目土地预审批复',
          planTime: '2023/2/20',
          detailedTaskContent: '4.勘察规划选址批复',
          realTime: '2023/2/15',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '项目土地预审批复',
          planTime: '2023/2/20',
          detailedTaskContent: '5.开展土地预审招标',
          realTime: '2023/2/6',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '项目土地预审批复',
          planTime: '2023/2/20',
          detailedTaskContent: '6.开展土地预审编制',
          realTime: '2023/2/10',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '项目土地预审批复',
          planTime: '2023/2/20',
          detailedTaskContent: '7.取得土地预审批复',
          realTime: '2023/2/20',
          status: '已完成',
        },
        {
          index: '2',
          taskContent: '项目核准申请报告',
          planTime: '2023/2/21',
          detailedTaskContent: '1.编写项目核准申请文件',
          realTime: '2023/2/10',
          status: '已完成',
        },
        {
          index: '2',
          taskContent: '项目核准申请报告',
          planTime: '2023/2/21',
          detailedTaskContent: '2.编写项目申请报告（建设方案）',
          realTime: '2023/2/10',
          status: '已完成',
        },
        {
          index: '2',
          taskContent: '项目核准申请报告',
          planTime: '2023/2/21',
          detailedTaskContent: '3.获取土地预审后上报到依兰县发改局',
          realTime: '2023/2/10',
          status: '已完成',
        },
        {
          index: '3',
          taskContent: '相关支持文件：可研报告、环评报告、水保报告',
          planTime: '2023/2/20',
          detailedTaskContent: '1.修编可研后将收资材料给环评、水保单位编制完成报告后提报批复',
          realTime: '2023/2/10',
          status: '已完成',
        },
        {
          index: '3',
          taskContent: '相关支持文件：可研报告、环评报告、水保报告',
          planTime: '2023/2/20',
          detailedTaskContent: '2.编制环评、水保文件',
          realTime: '2023/2/20',
          status: '已完成',
        },
        {
          index: '4',
          taskContent: '地方发改委申报',
          planTime: '2023/2/25',
          detailedTaskContent: '将建设方案和土地预审上报地方后进行跟踪督办',
          realTime: '2023/2/25',
          status: '已完成',
        },
        {
          index: '5',
          taskContent: '黑龙江省发改委批复',
          planTime: '2023/3/5',
          detailedTaskContent: '',
          realTime: '',
          status: '已完成',
        },
        {index: '三', taskContent: '投资决策', planTime: '3月20日前必须完成', detailedTaskContent: '', realTime: '', status: '',},
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '1.修编可研深度',
          realTime: '2023/2/10',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '1.1连续一年的测风数据',
          realTime: '已完成',
          status: '依兰四期利用依兰三期测风数据',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '1.2完成1:2000地形图测绘',
          realTime: '2023/2/28',
          status: '正在开展，计划7日完成。',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '1.3地质勘测工作',
          realTime: '2023/2/28',
          status: '现阶段完成初勘',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '1.4完成现场踏勘和初步的机位选址',
          realTime: '2023/2/28',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '1.5完成可研阶段风电机组布机方案',
          realTime: '2023/2/28',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '2.根据审查条件准备支撑材料',
          realTime: '2023/2/15',
          status: '正在收资',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '2.1完成环评报告',
          realTime: '2023/2/20',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '2.2完成水保报告',
          realTime: '2023/2/20',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '2.3取得土地预审批复',
          realTime: '2023/2/20',
          status: '已完成',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '3.上报集团技经中心开展审查',
          realTime: '2023/2/20',
          status: '正在开展',
        },
        {
          index: '1',
          taskContent: '可研完成审查',
          planTime: '2023/3/10',
          detailedTaskContent: '4.取得审查意见',
          realTime: '2023/3/10',
          status: '完成核准，为快速完成，需要带条件进行审查',
        },
        {
          index: '2',
          taskContent: '环评批复',
          planTime: '2023/3/10',
          detailedTaskContent: '过程跟踪，督办环评开展情况',
          realTime: '2023/3/10',
          status: '前期转工程后，确定机位，开展批复工作',
        },
        {
          index: '3',
          taskContent: '水土保持批复',
          planTime: '2023/3/10',
          detailedTaskContent: '过程跟踪，督办水保开展情况',
          realTime: '2023/3/10',
          status: '前期转工程后，确定机位，开展批复工作',
        },
        {
          index: '4',
          taskContent: '接入系统获得经研院评审意见',
          planTime: '2023/3/15',
          detailedTaskContent: '1.开展招标工作',
          realTime: '2023/2/10',
          status: '已完成',
        },
        {
          index: '4',
          taskContent: '接入系统获得经研院评审意见',
          planTime: '2023/3/15',
          detailedTaskContent: '2.接入系统设计报告编制',
          realTime: '2023/3/10',
          status: '已完成',
        },
        {
          index: '4',
          taskContent: '接入系统获得经研院评审意见',
          planTime: '2023/3/15',
          detailedTaskContent: '3.上报国网公司进行评审申请',
          realTime: '2023/3/11',
          status: '已完成',
        },
        {
          index: '4',
          taskContent: '接入系统获得经研院评审意见',
          planTime: '2023/3/15',
          detailedTaskContent: '4.获取初步会议纪要',
          realTime: '2023/3/15',
          status: '本年接入系统为重大难点，无法确认时间',
        },
        {
          index: '5',
          taskContent: '获得集团投资计划',
          planTime: '2023/3/15',
          detailedTaskContent: '',
          realTime: '',
          status: '',
        },
        {index: '6', taskContent: '主设备选型', planTime: '2023/3/15', detailedTaskContent: '', realTime: '', status: '',},
        {index: '7', taskContent: '上报投资决策', planTime: '2023/3/15', detailedTaskContent: '', realTime: '', status: '',},
      ]
      this.spanArr = this.merge()
    },
    // 找相同的列
    merge() {
      let spanArr = []
      let concat = 0
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
        } else {
          if (item.taskContent === this.tableData[index - 1].taskContent) { //第一列需合并相同内容的判断条件
            spanArr[concat] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            concat = index;
          }
        }
      });
      return spanArr
    },
    // 合并单元格
    handleSpanMethod({rowIndex, columnIndex}) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    push() {
      this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
    },
    back() {
      this.$router.push({path: "/homepage/projectInfo"})
    },
    pushPreProjectResource() {
      this.$router.push({path: "/homepage/preProjectResources"})
    },
    rowStyle({row, rowIndex}) {
      if ((rowIndex+1) % 2 === 0) {
        return {
          background: '#0F4465',
          color: '#ffffff'
        }
      } else {
        return  {
          background: '#25748A',
          color: '#ffffff'
        }
      }
    },
    /*时间格式化*/
    formatTime() {
      this.time = ''
      let date = new Date()
      let year = date.getFullYear();                // 年
      let month = date.getMonth() + 1;        // 月
      let day = date.getDate();
      let hour = date.getHours();                   // 获取当前小时数(0-23)
      let minutes = date.getMinutes();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      if (minutes < 10) minutes = "0" + minutes;
      this.time = year + "-" + month + "-" + day + " " + hour + ' : ' + minutes;
    }
  }
}
</script>

<style scoped>
.projectEvolvePage {
  width: 100%;
  height: calc(100vh);
  background: url(../../../assets/largeScreenImg/backBg.png) no-repeat;
  background-size: 100% 100%;
  color: white;
}


.timeBox {
  position: absolute;
  left: 2%;
  top: 0;
  font-size: 20px;
  line-height: 40px;
  font-family: timeFont !important;
}

.page {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  box-shadow: inset -1px -20px 550px 200px rgb(12 25 69  / 80%);
}

.topTiltle {
  width: 100%;
  height: 5.5%;
  background: url(../../../assets/largeScreenImg/index/topTitleBg.png) -2px -1px no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}

.title {
  width: 17%;
  height: 100%;
  text-align: center;
  margin-top: .2%;
  font-size: 30px;
  font-weight: 800;
  background-image: linear-gradient(
    360deg,
    rgba(178, 204, 252, 1) 0,
    rgba(178, 204, 252, 1) 0,
    rgba(255, 255, 255, 1) 100%,
    rgba(255, 255, 255, 1) 100%
  );
  background-clip: text;
  color: transparent;
}

.btuGroup {
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  width: 15%;
  height: 5.5%;
  display: flex;
  justify-content: flex-end;
  font-size: 18px;
}

.topBtu {
  height: 100%;
  margin-top: -1.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.topRightBtu {
  background: url(../../../assets/largeScreenImg/index/topRightBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 50%;
}

.topLeftBtu {
  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 35%;
}

.myMain-container {
  display: flex;
  justify-content: center;
}

.tableBox {
  width: 95%;
  height: calc(90vh);
  background: url(../../../assets/largeScreenImg/index/leftTextBg.png) 100% no-repeat;
  background-size: 100% 100%;
  padding: 2%;
}

.tableTiltleTextBg {
  height: 32px;
  background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/projectEvolveTitleBg.png) 100% no-repeat;
  background-size: 100% 100%;
}


.tableTitle {
  color: rgba(183, 243, 252, 1);
  font-size: 20px;
  font-weight: 550;
  margin-left: 2%;
  position: relative;
  top: -25%;
}

.tableContent {
  margin-top: 2%;
}
.tableContent /deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
  background: #16354c;
  text-align: center;
  color: white;
}
.tableContent /deep/ .el-table tr{
  background: #16354c;
  color: white;
}
.tableContent /deep/ .el-table tr:hover >td{
  background: #16354c;
  color: white;
}

.tableContent /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /*滚动条宽度*/
  height: 12px; /*滚动条高度*/
}
.tableContent /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #eeeeee; /*滚动条的背景颜色*/
}
.tableContent /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #0a3b6e; /*滚动条的背景颜色*/
}
.tableContent /deep/ .el-table colgroup col[name='gutter']{
  width: 9px;
}
.tableContent /deep/ .el-table__body{
  width: 100% !important;
}
.bottomPushBtu {
  background: url(../../../assets/largeScreenImg/index/topLeftBtuBg.png) 100% no-repeat;
  background-size: 100% 100%;
  line-height: 60px;
  width: 12%;
  cursor: pointer;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: -.5%;
}
</style>