epmet-work-pc-chengyang/src/views/dataBoard/organizational/microgrid/index.vue

<template>
  <div>
    <Breadcrumb :list="breadcrumbList" />
    <div class="top-nav">
      <div class="top-nav-list">
        <div v-for="(item, index) in navList" :key="item.key" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="list" :loading="loading">
        <el-table-column label="序号" type="index" width="80" />
        <!-- 上报事件 -->
        <template v-if="otherTabel === 'sbsj'">
          <el-table-column prop="categoryName" label="事件类型" />
          <el-table-column prop="addeventContentress" label="事件描述" />
          <el-table-column prop="status" label="办理情况" />
          <el-table-column prop="happenTime" label="上报时间" />
        </template>

        <!-- 居民需求 -->
        <template v-if="otherTabel === 'jmxq'">
          <el-table-column prop="categoryName" label="需求类型" />
          <el-table-column prop="content" label="需求描述" />
          <el-table-column prop="status" label="办理情况" />
          <el-table-column prop="reportTime" label="上报时间" />
        </template>
        <!-- 统治人群 -->
        <template v-if="otherTabel === 'tzrq'">
          <el-table-column prop="organizationName" label="所属组织" />
          <el-table-column prop="gridName" label="所属网格" />
          <el-table-column prop="familyName" label="所属家庭" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="mobile" label="联系电话" />
          <el-table-column prop="gender" label="性别" />
          <el-table-column prop="idNum" label="证件号" />
          <el-table-column prop="categoryType" label="人员类别" />
          <el-table-column prop="remark" label="备注" />
        </template>
        <!-- 安全隐患 -->
        <template v-if="otherTabel === 'aqyh'">
          <el-table-column prop="placeOrgName" label="场所名称" />
          <el-table-column prop="patrolTime" label="巡查时间" />
          <el-table-column prop="staffName" label="巡查人员" />
          <el-table-column prop="mobile" label="联系电话" />
          <el-table-column prop="detailed" label="隐患明细" />
          <el-table-column prop="attachmentUrl" label="图片" />
          <el-table-column prop="reviewTime" label="拟复查时间" />
        </template>
        <el-table-column label="操作" width="90" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="showDialog">
      <same-dialog :resiId="this.rowId" @close="close" />
    </div>
    <div v-if="showDialogEvent">
      <report-an-event :id="rowId" @close="closeEvent" />
    </div>
    <div v-if="showDialogSaft">
      <Safetyhazard @close="closeSaft" />
    </div>
    <Pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
  </div>
</template>

<script>
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
import SameDialog from "./components/popDetails.vue";
import ReportAnEvent from "./components/reportAnEvent.vue";
import Safetyhazard from "./components/safetyhazard.vue";
export default {
  name: "Microgrid",
  components: { Breadcrumb, Pagination, SameDialog, ReportAnEvent, Safetyhazard },
  data() {
    return {
      loading: false,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      navList: [
        {
          name: "上报事件",
          ifActive: true,
          key: 1,
        },
        {
          name: "居民需求",
          ifActive: false,
          key: 2,
        },
        {
          name: "统治人群",
          ifActive: false,
          key: 3,
        },
        // {
        //   name: "安全隐患",
        //   ifActive: false,
        //   key: 4,
        // },
      ],
      breadcrumbList: [
        {
          path: "/organizational/gridTree",
          name: "组织架构",
        },
        {
          path: "",
          name: "微网格",
        },
      ],
      rowId: null,
      itemNav: 1,
      showDialog: false,
      showDialogEvent: false,
      showDialogSaft: false,
      otherTabel: "sbsj",
      monthOptions: new Array(12).fill(0).map((_, index) => {
        return { label: index - 0 + 1 + "月", value: index - 0 + 1 };
      }),
      paramsData: {},
      list: [],
    };
  },
  watch: {
    otherTabel(n) {
      if (n) {
        this.getList();
      }
    },
  },
  created() {
    this.paramsData = this.$route.params;
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      const getUrl = new Map([
        ["sbsj", `/gov/org/organizational/neighborhood/getBuildingUnitLevelEvent?unitId=1634090229723381761`],
        ["jmxq", `/gov/org/organizational/neighborhood/getBuildingUnitLevelUserDemand?unitId=1565599676446027778`],
        ["tzrq", `/gov/org/organizational/neighborhood/getBuildingUnitLevelCtp?unitId=1483661223332417537`],
        ["aqyh", `/gov/org/organizational/neighborhood/getEnterprisePatrolRecord?unitId=f896b59f3cddf1f54280546d79803652`],
      ]);
      const url = getUrl.get(this.otherTabel);
      // unitId=${this.paramsData.id}
      this.$http.get(`${url}&pageNo=${this.pageNum}&pageSize=${this.pageSize}`).then((res) => {
        const {
          code,
          data: { total, list },
        } = res.data;
        if (code === 0) {
          this.total = total;
          this.list = list;
          this.loading = false;
        }
      });
    },

    chooseNav(item) {
      this.itemNav = item.key;
      this.otherTabel = item.key === 1 ? "sbsj" : item.key === 2 ? "jmxq" : item.key === 3 ? "tzrq" : "aqyh";
      this.navList.forEach((d) => {
        if (item.key === d.key) {
          d.ifActive = true;
        } else {
          d.ifActive = false;
        }
      });
    },
    close(flag) {
      this.showDialog = flag;
    },
    closeEvent(flag) {
      this.showDialogEvent = flag;
    },
    closeSaft(flag) {
      this.showDialogSaft = flag;
    },
    handleView(row) {
      this.rowId = row.id;
      if (this.itemNav === 1) {
        this.showDialogEvent = true;
      }
      if (this.itemNav === 3) {
        this.showDialog = true;
      }
      if (this.itemNav === 4) {
        this.showDialogSaft = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/dataBoard/table.scss";
@mixin navListCommon {
  width: 120px;
  height: 36px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  margin-right: 4px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}
.screen {
  margin: 25px 0 40px;

  .el-select,
  .el-input {
    width: 150px;
    margin-right: 4px;
    border: 1px solid #126ac5;
    border-radius: 2px;

    /deep/ .el-input__inner {
      background: none;
      border: none;
      color: #fff;
    }
  }

  .btn {
    margin-left: 46px;
    height: 32px;
  }
}
.main-title {
  margin: 25px 0 32px;
}

.top-nav {
  margin: 32px 0;
  .top-nav-list {
    display: flex;
    margin-left: 28px;
    .top-nav-item {
      @include navListCommon;
      background-image: url("~@/assets/images/home/noChooseMain.png");
      color: #96b1ce;
    }
    .top-nav-itemAC {
      @include navListCommon;
      background-image: url("~@/assets/images/home/chooseMain.png");
      color: #fff;
    }
  }
}
</style>