jin_ji_hu/src/views/dataCloudMap/components/honorDialog.vue

<template>
  <el-dialog
    title="荣誉情况" 
    :visible.sync="infoVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="infoClose"
    custom-class="honor-dialog"
    append-to-body
    width="60%"
  >
    <div>
      <section>
        <el-table 
          v-loading="loading" 
          border
          class="dataMap-two-table" 
          :data="tableData" 
          :cell-class-name="tableRowClassName" 
          :cell-style="tableCellStyle"
          :header-cell-style="{background:'#D1D9E6'}"
          :span-method="objectSpanMethod"
          height="550px"
        >  <!-- :max-height="tabHeader" -->
          <el-table-column label="项目大类" prop="projectBigName" align="center"/>
          <el-table-column label="数量" prop="count1" align="center" width="100">
            <template slot-scope="scope">
              <div class="project-trace-table-number" @click="bigNumber(scope.row)">{{ scope.row.count1 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="项目中类" prop="projectMiddleName" align="center"/>
          <el-table-column label="数量" prop="count2" align="center" width="100">
            <template slot-scope="scope">
              <div class="project-trace-table-number" @click="middleNumber(scope.row)">{{ scope.row.count2 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="项目小类" prop="projectSmallName" align="center"/>
          <el-table-column label="数量" prop="count3" align="center" width="100">
            <template slot-scope="scope">
              <div class="project-trace-table-number" @click="smallNumber(scope.row)">{{ scope.row.count3 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="2024年新增" prop="currentYearAdd" align="center" width="100">
            <template slot-scope="scope">
              <div class="project-trace-table-number" @click="YrarNumber(scope.row)">{{ scope.row.currentYearAdd }}</div>
            </template>
          </el-table-column>
        </el-table>
      </section>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "honorDialog",
  data() {
    return {
      infoVisible: false,
      loading: false,
      tableData:[],
    }
  },
  methods:{
    open(data){
      this.infoVisible = true;
      this.tableData = data
      const effectMerge = {
        projectBigName: ['projectMiddleName'], //一月和地理区域值都相同的时候，  大类和小类值都相同的时候
        //可以合并一月这一列，其余情况不合并
        projectSmallName: [], //三月值相同的时候合并这一列，不受其他的影响，可以跨地理区域进行合并
        projectBigName: [] //三月值相同的时候合并这一列，不受其他的影响，可以跨地理区域进行合并     大类值相同的时候合并这一列 
      };
      this.setTabelRowSpan(this.tableData, ['projectBigName', 'count1', 'projectMiddleName', 'count2', 'projectSmallName', 'count3', 'currentYearAdd'], effectMerge);
    },
    infoClose(){
      this.infoVisible = false;
    },
    // 大类数量点击
    bigNumber(row){

    },
    // 中类数量点击
    middleNumber(row){

    },
    // 小类数量点击
    smallNumber(row){

    },
    // 2024年新增数量点击
    YrarNumber(row){
      this.$router.push({
        name: 'Project',
        params: { projectYear: 2024, projectBigType: row.projectBigType, projectMiddleType: row.projectMiddleType, projectSmallType: row.projectSmallType }
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.mergeCell.includes(column.property)) {
        const rowspan = row[`rowspan_${column.property}`];
        if (rowspan) {
          return { rowspan: rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    },
    setTabelRowSpan(tableData, fieldArr, effectMerge = {}, isFieldAll = false) {
      let lastItem = {};
      fieldArr.forEach((field, index) => {
        let judgeArr = fieldArr.slice(0, index + 1);
        if (isFieldAll) {
          judgeArr = [...fieldArr];
        } else if (effectMerge[field]) {
          judgeArr = [...effectMerge[field], field];
        }
        tableData.forEach(item => {
          item.mergeCell = fieldArr;
          const rowSpan = `rowspan_${field}`;
          // 判断是否合并到上个单元格。
          if (judgeArr.every(e => lastItem[e] === item[e] && item[e] !== '')) {
            // 判断是否所在行的列对应的值全部相同，并且此列的值不为空
            // 是：合并行
            item[rowSpan] = 0;
            lastItem[rowSpan] += 1;
          } else {
            // 否：完成一次同类合并。lastItem重新赋值，进入下一次合并计算。
            item[rowSpan] = 1;
            lastItem = item;
          }
        });
      });
    },
    // 修改table背景色
    tableRowClassName({row, column, rowIndex, columnIndex}){
      if(columnIndex == 4 || columnIndex == 5 || columnIndex == 6 ) {
        if(rowIndex == 0 || rowIndex == 1 || rowIndex == 5 || rowIndex == 10 || rowIndex == 11 || rowIndex == 14 || rowIndex == 15 || rowIndex == 16 || rowIndex == 18 || rowIndex == 19 || rowIndex == 21 ) {
          return 'evenNumber-row-border';
        }
      }
      if(columnIndex == 0 || columnIndex == 1 ) {
        if(rowIndex == 3 || rowIndex == 5 || rowIndex == 8 || rowIndex == 10) {
          return 'evenNumber-row';
        }
      }
      if(columnIndex == 2 || columnIndex == 3 ) {
        if(rowIndex == 3 || rowIndex == 5 || rowIndex == 8 || rowIndex == 10 || rowIndex == 14 || rowIndex == 21) {
          return 'evenNumber-row';
        }
      }
      return '';
    },
    // 修改table背景色
    tableCellStyle({row, column, rowIndex, columnIndex}){
      if(columnIndex == 4 || columnIndex == 5 || columnIndex == 6 ) {
        if (rowIndex == 3 || rowIndex == 5 || rowIndex == 6 || rowIndex == 8 || rowIndex == 10 || rowIndex == 11 || rowIndex == 12 || rowIndex == 14 || rowIndex == 15 || rowIndex == 16 || rowIndex == 17 || rowIndex == 21 || rowIndex == 22) {
          return " background-color: #F6F9FD;"
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .honor-dialog {
  margin-top: 12vh !important;
}
</style>