epmet-work-pc-chengyang/src/views/dataBoard/overview/components/jdwgy.vue

<template>
  <div class="m-subbox m-jdwgy">
    <div class="table">
      <el-table :data="list" v-if="currentLevelData.orgLevel != 'grid'" v-loading="loading"
                element-loading-background="rgba(0, 0, 0, 0.3)" max-height="190px" height="190px">
        <el-table-column label="序号" type="index" width="80"/>
        <el-table-column prop="orgName" width="120" label="组织名称"/>
        <el-table-column prop="name" width="120" label="姓名"/>
        <el-table-column prop="gender" width="120" label="性别">
          <template slot-scope="scope">
            {{ genders[scope.row.gender] }}
          </template>
        </el-table-column>
        <el-table-column prop="age" width="120" label="年龄"/>
        <el-table-column prop="mobile" label="电话">
          <template slot-scope="scope">
            {{ $sensitive(scope.row.mobile, 3, 7) }}
          </template>
        </el-table-column>
        <el-table-column prop="operate" width="80" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"> 查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="currentLevelData.orgLevel == 'grid'" :data="wglist" v-loading="loading" max-height="190px" height="190px">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column prop="name" width="140" label="组织名称" />
        <el-table-column prop="type" width="90" label="类型">
          <template slot-scope="scope">
            <span :style="'color:' + scope.row.type">{{ types[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="houseNum" width="90" label="户数"/>
        <el-table-column prop="demandNum" width="90" label="需求"/>
        <el-table-column prop="eventNum" width="90" label="事件"/>
        <el-table-column prop="importanceNum" label="重点人群"/>
        <el-table-column prop="safetyNum" label="安全隐患"/>
        <el-table-column prop="operate" width="80" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"> 查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: "jdwgy",
  props: {
    peopleType: {
      type: String,
      default: "staffAgency",
    },
    currentLevelData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      list: [],
      wglist: [],
      genders: ["未知", "男", "女"],
      types: {red: "红", yellow: "黄", green: "绿色"},
      chooseName: {},
      loading: false,
    };
  },
  watch: {
    peopleType(val) {
      this.getData();
    },
    currentLevelData(val) {
      if (val.orgId) {
        this.getData();
      }
    },
  },
  mounted() {
    if (this.currentLevelData.orgId) {
      this.getData();
    }
  },
  methods: {
    getData() {
      this.loading = true;
      if (this.currentLevelData.orgLevel == "grid") {
        this.$http.get("/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=" +
            this.peopleType +
            "&level=" + this.currentLevelData.orgLevel +
            "&orgId=" + this.currentLevelData.orgId).then(({data: {data}}) => {
          this.loading = false;
          this.wglist = data;
          this.$emit(
              "setPoint",
              data.filter((item) => item.longitude && item.latitude)
          );
        });
      } else {
        this.$http.get("/actual/base/streetOverview/queryPersonnelGroup?level=" +
            this.currentLevelData.orgLevel + "&orgId=" +
            this.currentLevelData.orgId + "&personnelType=" +
            this.peopleType).then(({data: {data}}) => {
          this.loading = false;
          this.list = data.personnelInfoVOList;
          this.$emit("setNum", data.orgPersonnelVOList);
        });
      }
    },
    handleClick(item) {
      if (this.currentLevelData.orgLevel == "grid") {
        this.$router.push({
          path: "/homeDetails/index",
          query: {
            id: item.id,
          },
        });
      } else {
        this.$router.push({
          path: "/dataBoard/overview/resident",
          query: {
            user_id: item.id,
          },
        });
      }
    },
  },
};
</script>
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
<style lang="scss" src="@/assets/scss/dataBoard/table.scss" scoped></style>
<style lang="scss" scoped>
/deep/ .table {
  .el-table {
    td {
      padding: 0 !important;
    }

    th {
      padding: 6px 0 4px !important;
    }
  }
}
</style>