首页及表完善

zhengpz

2021-08-22 b6d9bbb38cc344d1538439750c3db5a4a6b0d79a

首页及表完善

 src/api/index/index.js

@@ -88,10 +88,11 @@
  });
};
// 资格审查异常人员清单
export const qualificationPages = () => {
export const qualificationPages = (params) => {
  return request({
    url: "/api/blade-user/pages",
    method: "get"
    method: "get",
    params: params
  });
};
// 监管处罚数量

 src/views/home/index.vue

@@ -274,12 +274,10 @@
              <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="getQualificationPages">{{
              <span class="showDialog" @click="shoeDialog">{{
                rightData.qualification
              }}</span>
              <span class="showDialog" @click="getQualificationPages"
                >资格审查异常</span
              >
              <span class="showDialog" @click="shoeDialog">资格审查异常</span>
            </div>
          </div>
          <!-- <div class="card-text"> -->
@@ -309,21 +307,21 @@
            <div class="rightData rightData1">
              <img src="../../../public/img/bajgxt/u231.png" alt />
              <div class="text">
                <span>数据更新异常</span>
                <span>违规经营</span>
                <span>45个</span>
              </div>
            </div>
            <div class="rightData rightData2">
              <img src="../../../public/img/bajgxt/u232.png" alt />
              <div class="text">
                <span>材料不齐全</span>
                <span>经营不善</span>
                <span>{{ rightData.materialNum }}个</span>
              </div>
            </div>
            <div class="rightData rightData3">
              <img src="../../../public/img/bajgxt/u233.png" alt />
              <div class="text">
                <span>业务经营异常</span>
                <span>有名无实</span>
                <span>12个</span>
              </div>
            </div>
@@ -377,17 +375,32 @@
        <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-column
          prop="sex"
          label="性别"
          :formatter="sexFormatter"
        ></el-table-column>
        <el-table-column prop="cardid" label="身份证号"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="birthday" label="出生日期"></el-table-column>
        <el-table-column
          prop="securitynumber"
          label="保安员证编号"
        ></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column
          prop="examinationType"
          label="审查状态"
          :formatter="examinationFormatter"
        ></el-table-column>
        <el-table-column
          prop="examinationMx"
          label="审查明细"
        ></el-table-column>
      </el-table>
      <el-pagination
        @current-change="getQualificationPages"
        @size-change="getQualificationPages"
        :current-page="gridData.current"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
@@ -505,17 +518,13 @@
    }
  },
  methods: {
    startMove() {
      // eslint-disable-next-line
      let timer = setTimeout(() => {
        if (this.number === 2) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
    sexFormatter(row, column) {
      row.sex = row.sex === 1 ? "男" : "女";
    },
    examinationFormatter(row) {
      row.examinationType = row.examinationType === "1" ? "不正常" : "正常";
    },

    // 左侧表的接口返回数据
    initEchart() {
      securityTotal().then(res => {
@@ -832,23 +841,26 @@
      });
    },
    // 资格审查异常名单
    shoeDialog() {
      this.gridData.current = 1;
      this.gridData.total = 0;
      this.dialogTableVisible = true;
      this.getQualificationPages(1);
    },
    getQualificationPages(page) {
      this.gridData.current = page;
      this.dialogTableVisible = true;
      this.dialogloading = true;
      this.gridData.data = [];
      this.gridData.total = 0;
      let params = {
        current: this.gridData.current,
        size: 10,
        examinationType: this.poorPerformanceType,
        examinationType: 1,
        jurisdiction: this.value1
      };
      qualificationPages(params).then(res => {
        if (res.data.code === 200) {
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
          // this.gridData.current = res.data.data.current;
        }
        this.dialogloading = false;
      });
@@ -944,7 +956,6 @@
    }
  },
  mounted() {
    this.startMove();
    this.initEchart();
    this.getHolderNum(0);
    this.getPoorPerformance(3);

 src/views/securityUnitOperation/economicAnalysis.vue

@@ -73,13 +73,13 @@
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="rowContent">
        <div class="rowContent" v-loading="loading1">
          <span class="span-title">社保缴纳</span>
          <div id="middleEchart1"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="rowContent">
        <div class="rowContent" v-loading="loading2">
          <span class="span-title">派遣人员占比</span>
          <div id="middleEchart2"></div>
        </div>
@@ -87,8 +87,8 @@
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="rowContent">
          <span class="span-title">公司经济运转趋势</span>
        <div class="rowContent" v-loading="loading3">
          <span class="span-title">年龄趋势</span>
          <div id="bottomEchart"></div>
        </div>
      </el-col>
@@ -151,7 +151,10 @@
        addPaiQ: 0,
        sheBPerson: 0,
        addSheBPerson: 0
      }
      },
      loading1: true,
      loading2: true,
      loading3: true
    };
  },
  methods: {
@@ -173,6 +176,7 @@
      this.getCompanys();
    },
    pieChange() {
      this.loading2 = true;
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2
@@ -186,6 +190,7 @@
        } else {
          this.$message.error(res.msg);
        }
        this.loading2 = false;
      });
    },
    getCompanys() {
@@ -234,6 +239,7 @@
      });
    },
    getQueryYearSoil() {
      this.loading1 = true;
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2
@@ -249,6 +255,7 @@
                echartJs.economicMiddle(res.data.data, res1.data.data)
              );
            }
            this.loading1 = false;
          });
        } else {
          this.$message.error(res.msg);
@@ -256,6 +263,7 @@
      });
    },
    getQueryYearAn() {
      this.loading3 = true;
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2
@@ -269,6 +277,7 @@
        } else {
          this.$message.error(res.msg);
        }
        this.loading3 = false;
      });
    },
    changeCompanys() {

 src/views/securityUnitOperation/economicTable.vue

@@ -275,7 +275,7 @@
  methods: {
    dateChange() {},
    getTableData() {
      selectJj().then(res => {
      selectJj({ current: 1, size: 10 }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.loading = false;

 src/views/securityUnitOperation/operationAnalysis.vue

@@ -7,15 +7,20 @@
            <img src="../../../public/img/bajgxt/u1618.png" />
            <span>数据概览</span>

            <el-select class="select0" v-model="value0" placeholder="请选择">
            <!-- <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" v-model="value1" placeholder="请选择" @change="fenjuChange">
            </el-select> -->
            <el-select
              class="select1"
              v-model="value1"
              placeholder="请选择"
              @change="fenjuChange"
            >
              <el-option
                v-for="item in options1"
                :key="item.id"
@@ -23,7 +28,12 @@
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select class="select2" v-model="value2" placeholder="请选择" @change="changeCompanys">
            <el-select
              class="select2"
              v-model="value2"
              placeholder="请选择"
              @change="changeCompanys"
            >
              <el-option
                v-for="item in options2"
                :key="item.departmentid"
@@ -37,38 +47,38 @@
          <div class="col-content">
            <div class="box-card">
              <span>总保安数</span>
              <span>{{card.baoanTotal}}</span>
              <span>较上月增加{{card.addbaoanTotal}}人</span>
              <span>{{ card.baoanTotal }}</span>
              <span>较上月增加{{ card.addbaoanTotal }}人</span>
            </div>
            <div class="box-card">
              <span>正常保安员</span>
              <span>{{card.zcBaoan}}</span>
              <span>较上月增加{{card.addzcBaoan}}人</span>
              <span>{{ card.zcBaoan }}</span>
              <span>较上月增加{{ card.addzcBaoan }}人</span>
            </div>
            <div class="box-card">
              <span>持证保安员</span>
              <span>{{card.czBaoan}}</span>
              <span>较上月增加{{card.addczBaoan}}人</span>
              <span>{{ card.czBaoan }}</span>
              <span>较上月增加{{ card.addczBaoan }}人</span>
            </div>
            <div class="box-card">
              <span>过考保安员</span>
              <span>{{card.gkBaoan}}</span>
              <span>较上月增加{{card.addgkBaoan}}人</span>
              <span>{{ card.gkBaoan }}</span>
              <span>较上月增加{{ card.addgkBaoan }}人</span>
            </div>
            <div class="box-card">
              <span>服务客户</span>
              <span>{{card.kh}}</span>
              <span>较上月增加{{card.addkh}}家</span>
              <span>{{ card.kh }}</span>
              <span>较上月增加{{ card.addkh }}家</span>
            </div>
            <div class="box-card">
              <span>缴纳社保</span>
              <span>{{card.sheb}}</span>
              <span>较上月增加{{card.addsheb}}人</span>
              <span>{{ card.sheb }}</span>
              <span>较上月增加{{ card.addsheb }}人</span>
            </div>
            <div class="box-card">
              <span>保安派遣</span>
              <span>{{card.baoanPq}}</span>
              <span>较上月增加{{card.addbaoanPq}}人</span>
              <span>{{ card.baoanPq }}</span>
              <span>较上月增加{{ card.addbaoanPq }}人</span>
            </div>
          </div>
        </div>
@@ -76,23 +86,47 @@
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="rowContent">
        <div class="rowContent" v-loading="loading1">
          <span class="span-title">保安类数据统计</span>
          <div id="middleEchart1"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="rowContent">
        <div class="rowContent" v-loading="loading2">
          <span class="span-title">服务客户</span>
          <div id="middleEchart2"></div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="rowContent">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="rowContent" v-loading="loading3">
          <span class="span-title">公司运营趋势</span>
          <div id="bottomEchart"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="rowContent" v-loading="loading4">
          <span class="span-title">年龄结构</span>
          <div class="leftEchartTitle qing">
            <div class="block1"></div>
            <span>青年</span>
            <span>11</span>
            <span>人</span>
          </div>
          <div class="leftEchartTitle zhong">
            <div class="block1"></div>
            <span>中年</span>
            <span>321</span>
            <span>人</span>
          </div>
          <div class="leftEchartTitle lao">
            <div class="block1"></div>
            <span>老年</span>
            <span>123</span>
            <span>人</span>
          </div>
          <div id="bottomEchart1"></div>
        </div>
      </el-col>
    </el-row>
@@ -158,17 +192,48 @@
        }
      ],
      options1: [],
      options2: []
      options2: [],
      enterpriseName: "",
      loading1: true,
      loading2: true,
      loading3: true,
      loading4: false,
      echartDom: {
        middleEchart1: null,
        middleEchart2: null,
        bottomEchart: null,
        bottomEchart1: null
      }
    };
  },
  methods: {
    setEchart() {
      this.loading3 = true;
      let data = [];
      let bottomEchart = echarts.init(document.getElementById("bottomEchart"));
      bottomEchart.setOption(echartJs.bottomOption1(data));
      if (!this.echartDom.bottomEchart) {
        this.echartDom.bottomEchart = echarts.init(
          document.getElementById("bottomEchart")
        );
        this.echartDom.bottomEchart.setOption(echartJs.bottomOption1(data));
      }
      this.loading3 = false;

      let data1 = [];
      if (!this.echartDom.bottomEchart1) {
        this.echartDom.bottomEchart1 = echarts.init(
          document.getElementById("bottomEchart1")
        );
        this.echartDom.bottomEchart1.setOption(echartJs.bottomOption2(data1));
      }
    },
    toOperationTable() {
      this.$router.push({ path: "/securityUnitOperation/operationTable" });
      this.$router.push({
        path:
          "/securityUnitOperation/operationTable?jurisdiction =" +
          this.value2 +
          "&enterpriseName =" +
          this.enterpriseName
      });
    },
    getFenju() {
      this.options1 = [];
@@ -190,7 +255,9 @@
      getCompanys({ jurisdiction: this.value1 }).then(res => {
        if (res.data.code === 200) {
          this.options2 = res.data.data;
          debugger
          this.value2 = this.options2[0] ? this.options2[0].departmentid : "";
          this.enterpriseName = this.options2[0] ? this.options2[0].enterpriseName : "";
          this.changeCompanys();
        }
      });
@@ -223,31 +290,43 @@
      });
    },
    getQueryYearKh() {
      this.loading2 = true;
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2
      };
      queryYearKh(params).then(res => {
        if (res.data.code === 200) {
          let middleEchart2 = echarts.init(
            document.getElementById("middleEchart2")
          if (!this.echartDom.middleEchart2) {
            this.echartDom.middleEchart2 = echarts.init(
              document.getElementById("middleEchart2")
            );
          }
          this.echartDom.middleEchart2.setOption(
            echartJs.middleOption2(res.data.data)
          );
          middleEchart2.setOption(echartJs.middleOption2(res.data.data));
        }
        this.loading2 = false;
      });
    },
    getQueryYearG() {
      this.loading1 = true;
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2
      };
      queryYearG().then(res => {
      queryYearG(params).then(res => {
        if (res.data.code === 200) {
          let middleEchart1 = echarts.init(
            document.getElementById("middleEchart1")
          if (!this.echartDom.middleEchart1) {
            this.echartDom.middleEchart1 = echarts.init(
              document.getElementById("middleEchart1")
            );
          }
          this.echartDom.middleEchart1.setOption(
            echartJs.middleOption1(res.data.data)
          );
          middleEchart1.setOption(echartJs.middleOption1(res.data.data));
        }
        this.loading1 = false;
      });
    },
    // 清空之前的查询结果
@@ -270,6 +349,11 @@
      };
    },
    changeCompanys() {
      this.options2.forEach(item => {
        if (item.value === this.value2) {
          this.enterpriseName = item.enterpriseName;
        }
      });
      this.clear();
      this.getQueryCounts();
      this.getQueryYearKh();
@@ -289,8 +373,9 @@
}
#bottomEchart,
#middleEchart1,
#middleEchart2 {
  height: calc(100% - 40px);
#middleEchart2,
#bottomEchart1 {
  height: calc(100% - 25px);
  width: 100%;
}
.el-row:first-child {
@@ -378,4 +463,102 @@
  margin-top: 15px;
  margin-left: 36px;
}
.leftEchartTitle {
  height: 30px;
  display: flex;
  line-height: 30px;
  margin-top: 10px;
  margin-left: 28px;
  position: absolute;
  .block1 {
    width: 23px;
    height: 13px;
    background: #2ec7c9;
    border-radius: 3px;
    margin-top: 9px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
    margin: 0px 10px 0px 3px;
  }
  span:nth-child(3) {
    color: #2ec7c9;
    font-size: 17px;
    font-weight: 700;
    display: block;
    width: 65px;
    text-align: center;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #2ec7c9;
  }
}
.leftEchartTitle.qing {
  right: 37px;
  margin-top: 42px;
  .block1 {
    width: 30px;
    height: 15px;
    background: #73c0de;
    margin-top: 7px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #73c0de;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #73c0de;
  }
}
.leftEchartTitle.zhong {
  right: 37px;
  margin-top: 83px;
  .block1 {
    width: 30px;
    height: 15px;
    background: #fac858;
    margin-top: 7px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #fac858;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #fac858;
  }
}
.leftEchartTitle.lao {
  right: 37px;
  margin-top: 125px;
  .block1 {
    width: 30px;
    height: 15px;
    background: #91cc75;
    margin-top: 7px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #91cc75;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #91cc75;
  }
}
</style>

 src/views/securityUnitOperation/operationTable.vue

@@ -136,7 +136,6 @@
                label: "缴纳社保保安数"
              }
            ],
            search: true,
            rules: [
              {
                required: true,
@@ -154,17 +153,19 @@
          },
          {
            label: "所属辖区",
            prop: "jurname",
            prop: "jurisdiction",
            searchSpan: 4,
            type: "select",
            // cascaderItem: ["city", "area"],
            // dicUrl: "/api/information/lazyTreeJu",
            // dicMethod:'post',
            props: {
              label: "title",
              value: "value"
              value: "id"
            },
            // cascaderItem: ["city", "area"],
            // dicUrl:subofficeOptions,
            dicData: this.subOfficeData,
            dicData: [],
            search: true,
            // overHidden: true,
            type: "tree",
            rules: [
              {
                required: true,
@@ -238,15 +239,29 @@
    getSubOfficeData() {
      lazyTreeJu().then(res => {
        if (res.data.code === 200) {
          this.subOfficeData = res.data.data;
          this.subOfficeValue = this.subOfficeData[0].value || "";
          console.log(res.data, 99)

          this.tableOption.column.forEach(item => {

            if (item.label == "所属辖区") {
              item.dicData = res.data.data
            }
          })
          // this.subOfficeData = res.data.data;
          // this.subOfficeValue = this.subOfficeData[0].value || "";
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getTableData() {
      selectTb().then(res => {
      let params = {
        jurisdiction: "",
        enterpriseName: "",
        size: 1,
        current: 10
      };
      selectTb(params).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.loading = false;
@@ -274,7 +289,7 @@
    // }
  },
  mounted() {
    this.getSubOfficeData();
    this.getSubOfficeData(); 
    this.getTableData();
  }
};

 src/views/securityUnitOperation/securityEchart.js

@@ -26,15 +26,15 @@
      "#96dee8"
    ],
    grid: {
      top: "10%",
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "15%",
      bottom: "0%",
      containLabel: true
    },
    legend: {
      data: ["趋势"],
      bottom: "0%",
      data: ["服务对象数量"],
      top: "0%",
      textStyle: {
        color: "#fff"
      }
@@ -71,7 +71,6 @@
      ]
    },
    yAxis: {
      name: "（元）",
      type: "value",
      axisLabel: {
        color: "#fff"
@@ -79,7 +78,7 @@
    },
    series: [
      {
        name: "趋势",
        name: "服务对象数量",
        data: data,
        type: "line",
        smooth: true,
@@ -113,21 +112,21 @@
      "#96dee8"
    ],
    grid: {
      top: "10%",
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "15%",
      bottom: "0%",
      containLabel: true
    },
    legend: {
      data: ["趋势"],
      bottom: "0%",
      data: ["保安员数量", "派遣数量", "持证数量"],
      top: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: "item",
      trigger: "axis",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
@@ -158,7 +157,7 @@
      ]
    },
    yAxis: {
      name: "（元）",
      // name: "（元）",
      type: "value",
      axisLabel: {
        color: "#fff"
@@ -166,11 +165,22 @@
    },
    series: [
      {
        name: "趋势",
        data: [10, 20, 14, 15, 16, 17, 24, 15, 3, 7, 11, 23],
        name: "保安员数量",
        type: "line",
        smooth: true,
        areaStyle: {}
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210, 113, 221, 42, 152, 111]
      },
      {
        name: "派遣数量",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310, 111, 110, 91, 111, 131]
      },
      {
        name: "持证数量",
        type: "line",
        stack: "总量",
        data: [150, 232, 201, 154, 190, 330, 410, 90, 91, 93, 112, 133]
      }
    ]
  };
@@ -413,8 +423,72 @@
  };
  return option;
}
function bottomOption2(alldata) {
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    // legend: {
    //   data: ["青年", "中年", "老年"],
    //   top: "0%",
    //   itemHeight: 10,
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    color: [
      "#73c0de",
      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "5%",
      right: "30%",
      bottom: "4%",
      containLabel: true
    },
    series: [
      {
        name: "年龄结构",
        type: "pie",
        center: ["33%", "50%"],
        radius: "70%",
        data: [
          { value: 1048, name: "青年" },
          { value: 735, name: "中年" },
          { value: 580, name: "老年" }
        ],
        label: {
          color: "#fff"
        }
      }
    ]
  };
  return option;
}

function economicMiddle(data1,data2) {
function economicMiddle(data1, data2) {
  let sbData = [];
  let pqData = [];
  for (var a in data1) {
@@ -576,7 +650,7 @@
        },
        data: [
          { value: allData.PCount, name: "已派遣人数" },
          { value: allData.WPCount, name: "未派遣人" }
          { value: allData.WPCount, name: "未派遣人数" }
        ]
      }
    ]
@@ -590,5 +664,6 @@
  middleOption1,
  middleOption2,
  economicMiddle,
  economicPieOption
  economicPieOption,
  bottomOption2
};

 src/views/statisticalQueryManagement/companyDetails.vue

@@ -2,12 +2,19 @@
  <basic-container>
    <avue-crud
      :option="tableOption"
      :data="tableData"
      :page.sync="tablePage"
      :table-loading="loading"
      :data="tableData"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      @date-change="dateChange"
      ref="crud"
      @row-update="rowUpdates"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
    </avue-crud>
  </basic-container>
@@ -21,6 +28,12 @@
  name: "公司人员详情",
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      query: {},
      value1: "",
      value2: "",
      tableData: [
@@ -61,11 +74,6 @@
        //   send: "是"
        // }
      ],
      tablePage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      tableOption: {
        excelBtn: true,
        delBtn: false,
@@ -303,17 +311,84 @@
    }
  },
  methods: {
    dateChange() {},
    getTableData() {
      selectUIn({ deptid: "1412222709480509442",current: 1, size: 10 }).then(
        res => {
          if (res.data.code === 200) {
            this.tableData = res.data.data;
            this.loading = false;
          }
    rowSave(row, done, loading) {
      adddata(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    }
    },
    rowUpdates(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      // if (!params) {
      //   params = { current: page.currentPage, size: page.pageSize };
      // }
      let param = {};
      param["deptid"] = "1412222709480509442";
      param["current"] = page.currentPage;
      param["size"] = page.pageSize;
      selectUIn(param).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.tableData = res.data.data;
        // this.data = data.records;
        this.loading = false;
        // this.selectionClear();
      });
    },
    // getTableData() {
    //   selectUIn(param).then(res => {
    //     if (res.data.code === 200) {
    //       this.tableData = res.data.data;
    //       this.loading = false;
    //     }
    //   });
    // }
    // downExcel() {
    //   let et = XLSX.utils.table_to_book(document.getElementById("table"));
    //   let etout = XLSX.write(et, {
@@ -335,7 +410,7 @@
    // }
  },
  mounted() {
    this.getTableData();
    // this.getTableData();
  }
};
</script>

 src/views/statisticalQueryManagement/securityGuardStatistics.vue

@@ -2,12 +2,19 @@
  <basic-container>
    <avue-crud
      :option="tableOption"
      :table-loading="loading"
      :data="tableData"
      :page.sync="tablePage"
       :table-loading="loading"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      @date-change="dateChange"
      ref="crud"
      @row-update="rowUpdates"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @row-click="handleRowClick"
      class="rowClick"
    >
@@ -19,10 +26,17 @@
import XLSX from "xlsx";
import { mapGetters } from "vuex";
import { selectLi } from "../../api/statisticalQueryManagement/statisticalQueryManagement";
import { lazyTreeJu } from "../../api/index/index";
export default {
  name: "业务情况统计",
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      query: {},
      value1: "",
      value2: "",
      tableData: [
@@ -63,11 +77,6 @@
        //   socialSecurity: "21535",
        // },
      ],
      tablePage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tableOption: {
        align: "center",
        viewBtn: true,
@@ -93,7 +102,7 @@
            prop: "deptname",
            search: true,
            searchSpan: 4,
            display: false,
            display: false
          },
          {
            label: "所属辖区",
@@ -101,71 +110,71 @@
            searchSpan: 4,
            type: "select",
            props: {
              label: "label",
              value: "value",
              label: "title",
              value: "value"
            },
            // cascaderItem: ["city", "area"],
            // dicUrl:subofficeOptions,
            // dicUrl: "/api/information/lazyTreeJu",
            // dicMethod:'post',
            dicData: [
              {
                value: "0",
                label: "南昌市公安局",
              },
              {
                value: "2",
                label: "东湖分局",
              },
              {
                value: "3",
                label: "西湖分局",
              },
              {
                value: "4",
                label: "青云谱分局",
              },
              {
                value: "5",
                label: "青山湖分局",
              },
              // {
              //   value: "0",
              //   label: "南昌市公安局"
              // },
              // {
              //   value: "2",
              //   label: "东湖分局"
              // },
              // {
              //   value: "3",
              //   label: "西湖分局"
              // },
              // {
              //   value: "4",
              //   label: "青云谱分局"
              // },
              // {
              //   value: "5",
              //   label: "青山湖分局"
              // }
            ],
            search: true,
            rules: [
              {
                required: true,
                message: "请选择所属辖区",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "保安员总数",
            prop: "num",
            display: false,
            display: false
          },
          {
            label: "持证上岗人数",
            prop: "cznum",
            display: false,
            display: false
          },
          {
            label: "未派遣人数",
            prop: "wpaiqnum",
            display: false,
            display: false
          },
          {
            label: "派遣人数",
            prop: "paiqnum",
            display: false,
            display: false
          },
          {
            label: "未采集照片人数",
            prop: "wcaijnum",
            display: false,
            display: false
          },
          {
            label: "资格审查异常人数",
            prop: "yicnum",
            display: false,
            display: false
          },
          // {
          //   label: "过考保安人数",
@@ -175,12 +184,12 @@
          {
            label: "缴纳社保人数",
            prop: "sbnum",
            display: false,
          },
        ],
            display: false
          }
        ]
      },
      companyName: "",
      loading:true,
      loading: true
    };
  },
  computed: {
@@ -190,26 +199,110 @@
        addBtn: this.vaildData(this.permission.post_add, false),
        viewBtn: this.vaildData(this.permission.post_view, false),
        delBtn: this.vaildData(this.permission.post_delete, false),
        editBtn: this.vaildData(this.permission.post_edit, false),
        editBtn: this.vaildData(this.permission.post_edit, false)
      };
    },
    }
  },
  methods: {
    getSubOfficeData() {
      lazyTreeJu().then(res => {
        if (res.data.code === 200) {
          this.tableOption.column.forEach(item => {
            if (item.label == "所属辖区") {
              item.dicData = res.data.data;
            }
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    rowSave(row, done, loading) {
      adddata(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowUpdates(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      // if (!params) {
      //   params = { current: page.currentPage, size: page.pageSize };
      // }
      let param = {};
      param["jurisdiction"] = params["jurname"] ? params["jurname"] : "";
      param["deptid"] =  "";
      param["current"] = page.currentPage;
      param["size"] = page.pageSize;
      selectLi(param).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.tableData = res.data.data;
        // this.data = data.records;
        console.log(this.data);
        this.loading = false;
        // this.selectionClear();
      });
    },
    // toCompanyDetails() {
    //   this.$router.push({ path: "/statisticalQueryManagement/companyDetails" });
    // },
    handleRowClick(row, event, column) {
      this.$router.push({ path: "/statisticalQueryManagement/companyDetails" });
    },
    dateChange() {},
    getTableData() {
      selectLi({current: 1, size: 10 }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.loading = false;
        }
      });
    }
    // getTableData() {
    //   selectLi({ current: 1, size: 10 }).then(res => {
    //     if (res.data.code === 200) {
    //       this.tableData = res.data.data;
    //       this.loading = false;
    //     }
    //   });
    // }
    // downExcel() {
    //   let et = XLSX.utils.table_to_book(document.getElementById("table"));
    //   let etout = XLSX.write(et, {
@@ -231,12 +324,12 @@
    // }
  },
  mounted() {
    this.getTableData();
  },
    this.getSubOfficeData();
  }
};
</script>
<style lang="scss" scoped> 
/deep/ .rowClick .el-table__row:hover td{
<style lang="scss" scoped>
/deep/ .rowClick .el-table__row:hover td {
  cursor: pointer;
}
</style>