首页加弹框表格

zhengpz

2021-08-19 08c20bd242cdae591e21a20d4f08c6f9a5728730

首页加弹框表格

 src/views/home/index.scss

@@ -254,6 +254,7 @@
      }
    }
  }
  .middle {
  .el-table {
    width: calc(100% - 40px);
    height: calc(100% - 65px);
@@ -282,6 +283,8 @@
  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #b0caf3;
  }
  }

  /deep/ .el-input__inner {
    height: 27px;
    color: #fff !important;
@@ -662,3 +665,43 @@
    color: #886eff;
  }
}
.showDialog:hover {
  cursor: pointer;
}
.bajgxt-home {
  /deep/.dialog {
    z-index: 10000000 !important;
    .el-table {
      top: 0px !important;
      margin: 0px !important;
      width: 100% !important;
      height: calc(100% - 50px) !important;
      .el-table__header {
        background-color: #2d5cc8 !important;
      }
      .el-table__body-wrapper {
        height: calc(100% - 50px);
        overflow: auto;
      }
    }
    .el-pagination {
      color: #a2a5a5;
    }
    .btn-prev,
    .btn-next {
      background: transparent !important;
    }
    .el-dialog__body {
      padding: 10px 20px;
      height: calc(100% - 60px);
      .el-input {
        width: 50px !important;
        border-bottom: 1px solid #8a7b7b !important;
      }
    }
  }
  /deep/ .el-dialog {
    width: 80% !important;
    height: 77%;
  }
}

 src/views/home/index.vue

@@ -270,12 +270,16 @@
              <span>{{ rightData.poorPerformance }}</span>
              <span>现实表现差</span>
            </div>
            <div class="card-list" @click="getQualificationPages">
            <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u230.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>{{ rightData.qualification }}</span>
              <span>资格审查异常</span>
              <span class="showDialog" @click="getQualificationPages">{{
                rightData.qualification
              }}</span>
              <span class="showDialog" @click="getQualificationPages"
                >资格审查异常</span
              >
            </div>
          </div>
          <!-- <div class="card-text"> -->
@@ -360,6 +364,37 @@
        </div>
      </div>
    </div>

    <!-- 弹框表格 -->
    <el-dialog
      class="dialog"
      title="资格异常人员清单"
      v-loading="dialogloading"
      element-loading-text="数据加载中"
      :visible.sync="dialogTableVisible"
    >
      <el-table :data="gridData.data">
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="realName" label="保安姓名"></el-table-column>
        <el-table-column prop="deptName" label="保安公司"></el-table-column>
        <el-table-column prop="sexName" label="性别"></el-table-column>
        <el-table-column prop="" label="身份证号"></el-table-column>
        <el-table-column prop="" label="年龄"></el-table-column>
        <el-table-column prop="" label="出生日期"></el-table-column>
        <el-table-column prop="" label="保安员证编号"></el-table-column>
        <el-table-column prop="" label="联系方式"></el-table-column>
        <el-table-column prop="" label="审查状态"></el-table-column>
        <el-table-column prop="" label="审查明细"></el-table-column>
      </el-table>
      <el-pagination
        @current-change="getQualificationPages"
        :current-page="gridData.current"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="gridData.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

@@ -452,7 +487,13 @@
        nv: 0
      },
      left2EchartType: 0,
      poorPerformanceType: 3
      poorPerformanceType: 3,
      dialogTableVisible: false,
      gridData: {
        data: [],
        total: 0,
        current: 1
      }
    };
  },
  computed: {
@@ -791,17 +832,25 @@
      });
    },
    // 资格审查异常名单
    getQualificationPages() {
    getQualificationPages(page) {
      this.gridData.current = page;
      this.dialogTableVisible = true;
      this.dialogloading = true;
      this.gridData.data = [];
      this.gridData.total = 0;
      let params = {
        current: 1,
        current: this.gridData.current,
        size: 10,
        examinationType: this.poorPerformanceType,
        jurisdiction: this.value1
      };
      qualificationPages(params).then(res => {
        if (res.data.code === 200) {
          let tableData = res.data.data;
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
          // this.gridData.current = res.data.data.current;
        }
        this.dialogloading = false;
      });
    },
    // 公司受处罚数量

 src/views/home/indexEchart.js

@@ -182,6 +182,7 @@
    legend: {
      data: ["持证人数", "未持证人数"],
      bottom: "1%",
      left :'13%',
      itemWidth: 20,
      textStyle: {
        color: "#fff"
@@ -198,7 +199,7 @@
      type: "category",
      axisLabel: {
        color: "#fff",
        rotate: -80
        rotate: 40
      },
      data: nameArr
    },