更改界面

zhengpz

2021-09-12 19b2aecdae749714ece664c8faddd7bda846f9f1

 src/views/securityUnitOperation/economicAnalysis.vue

@@ -1,20 +1,11 @@
<template>
  <div class="page1">
    <el-row>
      <el-col :span="24">
        <div class="rowContent first-menu">
  <div class="jjPage">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="rowContent first-menu" style="position: relative;">
          <div class="rowTitle">
            <img src="../../../public/img/bajgxt/u1618.png" />
            <span>数据概览</span>
            <!-- <el-select class="select0" v-model="value0" placeholder="请选择">
              <el-option
                v-for="item in options0"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->
            <el-select
              class="select1"
              ref="treeForm"
@@ -73,6 +64,53 @@
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="rowContent first-menu">
          <div class="rowTitle">
            <img src="../../../public/img/bajgxt/yj.png" />
            <span>数据概览</span>
          </div>

          <div class="col-content">
            <div
              class="box-card"
              style="cursor: pointer; "
              @click="showTable('sb')"
            >
              <span>社保缴纳预警(家)</span>
              <span>{{ socialSecurity.num }}</span>
              <span>社保缴纳低于90%</span>
            </div>
            <div
              class="box-card"
              style="cursor: pointer; "
              @click="showTable('bx')"
            >
              <span>保险缴纳预警(家)</span>
              <span>{{ socialSecurity.money }}</span>
              <span>保险缴纳低于90%</span>
            </div>
            <div
              class="box-card"
              style="cursor: pointer; "
              @click="showTable('fw')"
            >
              <span>服务合同预警(家)</span>
              <span>{{ socialSecurity.paiQ }}</span>
              <span>服务合同不多于一份</span>
            </div>
            <div
              class="box-card"
              style="cursor: pointer; "
              @click="showTable('pq')"
            >
              <span>派遣预警(家)</span>
              <span>{{ socialSecurity.sheBPerson }}</span>
              <span>派遣比例少于50%</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
@@ -96,6 +134,178 @@
        </div>
      </el-col>
    </el-row>
    <el-dialog
      class="dialog"
      :title="gridData.title"
      v-loading="dialogloading"
      element-loading-text="数据加载中"
      :visible.sync="dialogTableVisible"
      :modal-append-to-body="false"
    >
      <el-table :data="gridData.data">
        <template v-if="gridData.type === 'sb'">
          <el-table-column :key="gridData.type" type="index"> </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="realName"
            label="保安公司名称"
            :show-overflow-tooltip="true"
            width="180"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="deptName"
            label="所属辖区"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sex"
            label="保安总人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cardid"
            label="社保缴纳人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="age"
            label="社保缴纳比例"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="age"
            label="备注"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'bx'">
          <el-table-column :key="gridData.type" type="index"> </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="保安公司名称"
            width="180"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="znum"
            label="所属辖区"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="保安总人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="czl"
            label="保险缴纳人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sbnum"
            label="保险缴纳比例"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sbl"
            label="备注"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'fw'">
          <el-table-column :key="gridData.type" type="index"> </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="保安公司名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="znum"
            label="所属辖区"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="服务合同数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="painum"
            label="服务单位名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="pql"
            label="备注"
            :show-overflow-tooltip="true"
          ></el-table-column> </template
        ><template v-if="gridData.type === 'pq'">
          <el-table-column :key="gridData.type" type="index"> </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="保安公司名称"
            width="180"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="znum"
            label="所属辖区"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="保安总人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="painum"
            label="派遣人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="fwnum"
            label="派遣比例"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="pql"
            label="备注"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </template>
      </el-table>
      <el-pagination
        @current-change="changePage"
        @size-change="changePage"
        :current-page.sync="gridData.current"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="gridData.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

@@ -165,10 +375,32 @@
        label: "title",
        value: "id"
      },
      node: {} //选中的记录
      node: {}, //选中的记录
      gridData: {
        data: [],
        total: 0,
        current: 1,
        type: "fw",
        title: ""
      },
      dialogloading: false,
      dialogTableVisible: false
    };
  },
  methods: {
    showTable(type) {
      this.gridData.type = type;
      this.dialogTableVisible = true;
      if (type === "sb") {
        this.gridData.title = "社保缴纳预警保安公司";
      } else if (type === "bx") {
        this.gridData.title = "保险缴纳预警保安公司";
      } else if (type === "fw") {
        this.gridData.title = "服务合同预警保安公司";
      } else if (type === "pq") {
        this.gridData.title = "派遣预警保安公司";
      }
    },
    //点击节点
    handleNodeClick(data) {
      this.node = data;
@@ -367,7 +599,7 @@
    background: #00aaf1;
    height: 135px;
    text-align: center;
    margin-right: 66px;
    margin-right: 34px;
    box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
    line-height: 40px;
    span:nth-child(2) {
@@ -376,7 +608,7 @@
    }
  }
}
.page1 {
.jjPage {
  height: 100%;
  width: 100%;
}
@@ -456,7 +688,49 @@
}
.col-content {
  display: flex;
  margin-top: 15px;
  margin-top: 35px;
  margin-left: 36px;
}
/deep/ .el-table .cell {
  text-align: center;
}
.jjPage {
  /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-x: hidden;
        overflow-y: 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%;
  }
}
</style>