首页表格

zhengpz

2021-08-27 548c7698042179461a7b7ceac3a7723cfcf3f817

首页表格

 src/api/index/index.js

@@ -103,6 +103,14 @@
    params: params
  });
};
// 监管处罚公司清单
export const punishList = params => {
  return request({
    url: "/api/punish/page",
    method: "get",
    params: params
  });
};
// 公司材料不全数量
export const selectCl = () => {
  return request({

 src/views/home/index.vue

@@ -274,10 +274,12 @@
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u230.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span class="showDialog" @click="shoeDialog">{{
              <span class="showDialog" @click="shoeDialog('zg')">{{
                rightData.qualification
              }}</span>
              <span class="showDialog" @click="shoeDialog">资格审查异常</span>
              <span class="showDialog" @click="shoeDialog('zg')"
                >资格审查异常</span
              >
            </div>
          </div>
          <!-- <div class="card-text"> -->
@@ -304,28 +306,28 @@
            </el-select>
          </div>
          <div class="right-content" v-loading="right2loading">
            <div class="rightData rightData1">
            <div class="rightData rightData1" @click="shoeDialog('wg')">
              <img src="../../../public/img/bajgxt/u231.png" alt />
              <div class="text">
                <span>违规经营</span>
                <span>{{ rightData.wgNum }}个</span>
              </div>
            </div>
            <div class="rightData rightData2">
            <div class="rightData rightData2" @click="shoeDialog('jy')">
              <img src="../../../public/img/bajgxt/u232.png" alt />
              <div class="text">
                <span>经营不善</span>
                <span>{{ rightData.materialNum }}个</span>
              </div>
            </div>
            <div class="rightData rightData3">
            <div class="rightData rightData3" @click="shoeDialog('ym')">
              <img src="../../../public/img/bajgxt/u233.png" alt />
              <div class="text">
                <span>有名无实</span>
                <span>{{ rightData.ymwsNum }}个</span>
              </div>
            </div>
            <div class="rightData rightData4">
            <div class="rightData rightData4" @click="shoeDialog('jg')">
              <img src="../../../public/img/bajgxt/111.png" alt />
              <div class="text">
                <span>监管处罚</span>
@@ -366,77 +368,255 @@
    <!-- 弹框表格 -->
    <el-dialog
      class="dialog"
      title="资格异常人员清单"
      :title="gridData.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="保安姓名"
          :show-overflow-tooltip="true"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="deptName"
          label="保安公司"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          :formatter="sexFormatter"
          :show-overflow-tooltip="true"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="cardid"
          label="身份证号"
          :show-overflow-tooltip="true"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          :show-overflow-tooltip="true"
          width="100"
        ></el-table-column>
        <!-- <el-table-column
        <template v-if="gridData.type === 'zg'">
          <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="100"
          ></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="性别"
            :formatter="sexFormatter"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cardid"
            label="身份证号"
            :show-overflow-tooltip="true"
            width="180"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="age"
            label="年龄"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <!-- <el-table-column
          prop="birthday"
          label="出生日期"
          :show-overflow-tooltip="true"
        ></el-table-column> -->
        <el-table-column
          prop="securitynumber"
          label="保安员证编号"
          :show-overflow-tooltip="true"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
          :show-overflow-tooltip="true"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="examinationType"
          label="审查状态"
          :formatter="examinationFormatter"
          :show-overflow-tooltip="true"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="examinationMx"
          label="审查明细"
          :show-overflow-tooltip="true"
          width="150"
        ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="securitynumber"
            label="保安员证编号"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="phone"
            label="联系方式"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="examinationType"
            label="审查状态"
            :formatter="examinationFormatter"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="examinationMx"
            label="审查明细"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'wg'">
          <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"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="持证保安"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="czl"
            label="持证率"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sbnum"
            label="缴纳社保人数"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sbl"
            label="缴纳社保比例"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'jy'">
          <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"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="持证保安"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="painum"
            label="派遣人数"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="fwnum"
            label="服务对象数量"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="pql"
            label="派遣率"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="pjpqrs"
            label="平均派遣人数"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'ym'">
          <el-table-column :key="gridData.type" type="index"> </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="公司名称"
            :show-overflow-tooltip="true"
            width="450"
          ></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
          >gridData
        </template>
        <template v-if="gridData.type === 'jg'">
          <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="punishtype"
            label="处罚类别"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="punishreason"
            label="处罚原因"
            :show-overflow-tooltip="true"
            width="200"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="penalty"
            label="处罚单位"
            :show-overflow-tooltip="true"
            width="200"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="punishtime"
            label="处罚时间"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
        </template>
      </el-table>
      <el-pagination
        @current-change="getQualificationPages"
        @size-change="getQualificationPages"
        @current-change="changePage"
        @size-change="changePage"
        :current-page="gridData.current"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
@@ -484,7 +664,8 @@
  selectCl,
  selectYs,
  selectJy,
  selectWg
  selectWg,
  punishList
} from "../../api/index/index";

import car from "@/assets/img/car.png";
@@ -546,7 +727,14 @@
      gridData: {
        data: [],
        total: 0,
        current: 1
        current: 1,
        type: "zg",
        title: "资格异常人员清单"
      },
      dialogTable: {
        wgTable: [],
        jyTable: [],
        ymTable: []
      }
    };
  },
@@ -728,47 +916,6 @@
          this.textArr.push(obj);
        });
      }
      // let curLayer = null;
      // let imgUrl = null;
      // this.carVectorLayer.getSource().clear();
      // this.peoVectorLayer.getSource().clear();
      // this.gunVectorLayer.getSource().clear();
      // if (type === 2) {
      //   curLayer = this.carVectorLayer;
      //   imgUrl = car;
      // } else if (type === 1) {
      //   curLayer = this.peoVectorLayer;
      //   imgUrl = peo;
      // } else if (type === 3) {
      //   curLayer = this.gunVectorLayer;
      //   imgUrl = gun;
      // }
      // let features = [];
      // let style = new Style({
      //   image: new Icon({
      //     src: imgUrl,
      //     opacity: 1,
      //     scale: 0.5,
      //   }),
      // });
      // this.mapData[type]["geoData"].forEach((item) => {
      //   let carFeature = new Feature({
      //     geometry: new Point(item),
      //   });
      //   carFeature.setStyle(style);
      //   features.push(carFeature);
      // });
      // curLayer.getSource().addFeatures(features);
      // if (this.mapData[type]["geoData"].length > 1) {
      //   let extent = curLayer.getSource().getExtent();
      //   this.map.getView().fit(extent, this.map.getSize());
      //   this.$nextTick(() => {
      //     this.$refs.indexTable.doLayout();
      //   });
      // } else {
      //   this.map.getView().setCenter(this.mapData[type]["geoData"][0]);
      //   this.map.getView().setZoom(11);
      // }
    },
    // 获取表格及地图上的数据
    getTableData(type) {
@@ -889,11 +1036,107 @@
      });
    },
    // 资格审查异常名单
    shoeDialog() {
    shoeDialog(type) {
      this.gridData.title = "";
      this.gridData.type = type;
      this.gridData.current = 1;
      this.gridData.total = 0;
      this.dialogTableVisible = true;
      this.getQualificationPages(1);
      if (type === "zg") {
        this.gridData.title = "资格异常人员清单";
        this.getQualificationPages(1);
      } else if (type === "wg") {
        this.gridData.title = "违规经营公司清单";
        this.getWgTable();
      } else if (type === "jy") {
        this.gridData.title = "经营不善公司清单";
        this.getJyTable();
      } else if (type === "ym") {
        this.gridData.title = "有名无实公司清单";
        this.getYmTable();
      } else if (type === "jg") {
        this.gridData.title = "受监管处罚公司清单";
        this.getPunishList(1);
      }
    },
    getWgTable() {
      this.dialogTable.wgTable.forEach(item => {
        let czl = 0;
        if (Number(item.cznum) !== 0 && Number(item.znum) !== 0) {
          czl =
            ((Number(item.cznum) / Number(item.znum)) * 100).toFixed(4) + "%";
        }
        item["czl"] = czl;
        let sbl = 0;
        if (Number(item.sbnum) !== 0 && Number(item.znum) !== 0) {
          czl =
            ((Number(item.sbnum) / Number(item.znum)) * 100).toFixed(4) + "%";
        }
        item["sbl"] = sbl;
      });
      this.gridData.data = this.dialogTable.wgTable.slice(0, 10);
      this.gridData.total = this.dialogTable.wgTable.length;
    },
    getJyTable() {
      this.dialogTable.jyTable.forEach(item => {
        let pql = 0;
        if (Number(item.painum) !== 0 && Number(item.znum) !== 0) {
          pql =
            ((Number(item.painum) / Number(item.znum)) * 100).toFixed(4) + "%";
        }
        item["pql"] = pql;
        let pjpqrs = 0;
        if (Number(item.painum) !== 0 && Number(item.fwnum) !== 0) {
          pjpqrs =
            ((Number(item.painum) / Number(item.fwnum)) * 100).toFixed(4) + "%";
        }
        item["pjpqrs"] = pjpqrs;
      });
      this.gridData.data = this.dialogTable.jyTable.slice(0, 10);
      this.gridData.total = this.dialogTable.jyTable.length;
    },
    getYmTable() {
      this.gridData.data = this.dialogTable.ymTable.slice(0, 10);
      this.gridData.total = this.dialogTable.ymTable.length;
    },
    getPunishList(page) {
      this.gridData.current = page;
      this.dialogloading = true;
      this.gridData.data = [];
      let params = {
        current: this.gridData.current,
        size: 10,
        jurisdiction: this.value1
      };
      punishList(params).then(res => {
        if (res.data.code === 200) {
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
        }
        this.dialogloading = false;
      });
    },
    changePage(page) {
      if (this.gridData.type === "zg") {
        this.getQualificationPages(page);
      } else if (this.gridData.type === "wg") {
        this.gridData.data = this.dialogTable.wgTable.slice(
          10 * (page - 1),
          10 * page
        );
      } else if (this.gridData.type === "jy") {
        this.gridData.data = this.dialogTable.jyTable.slice(
          10 * (page - 1),
          10 * page
        );
      } else if (this.gridData.type === "ym") {
        this.gridData.data = this.dialogTable.jyTable.slice(
          10 * (page - 1),
          10 * page
        );
      } else if (this.gridData.type === "jg") {
        this.getPunishList(page);
      }
    },
    getQualificationPages(page) {
      this.gridData.current = page;
@@ -917,7 +1160,7 @@
    getPunishNum() {
      selectCf({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.punishNum = res.data.data[0].count;
          this.rightData.punishNum = res.data.data.count;
        } else {
          this.$message.error(res.msg);
        }
@@ -928,7 +1171,8 @@
    getMaterial() {
      selectJy({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.materialNum = res.data.data.Count;
          this.rightData.materialNum = res.data.data.count;
          this.dialogTable.jyTable = res.data.data.List;
        } else {
          this.$message.error(res.msg);
        }
@@ -939,7 +1183,8 @@
    getselectYs() {
      selectYs({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.ymwsNum = res.data.data.Count;
          this.rightData.ymwsNum = res.data.data.count;
          this.dialogTable.ymTable = res.data.data.List;
        } else {
          this.$message.error(res.msg);
        }
@@ -951,6 +1196,7 @@
      selectWg({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.wgNum = res.data.data.count;
          this.dialogTable.wgTable = res.data.data.list;
        } else {
          this.$message.error(res.msg);
        }