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"
        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="电话" />
        <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(
        val,
        this.currentLevelData.orgLevel,
        this.currentLevelData.orgId
      );
    },
    currentLevelData(val) {
      if (val.orgId) {
        this.getData(this.peopleType, val.orgLevel, val.orgId);
      }
    },
  },
  mounted() {},
  methods: {
    getData(peopleType, level = "", orgId = "") {
      this.loading = true;
      if (level == "grid") {
        this.$http
          .get(
            "/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=unit&level=" +
              level +
              "&orgId=" +
              orgId
          )
          .then(({ data: { data } }) => {
            this.loading = false;
            this.wglist = data;
          });
      } else {
        this.$http
          .get(
            "/actual/base/streetOverview/queryPersonnelGroup?level=" +
              level +
              "&orgId=" +
              orgId +
              "&personnelType=" +
              peopleType
          )
          .then(({ data: { data } }) => {
            this.loading = false;
            this.list = data.personnelInfoVOList;
          });
      }
    },
    handleClick(item) {
      console.log("handleClick::", item);
      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>