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="name" label="事件类型" />
          <el-table-column prop="address" label="事件描述" />
          <el-table-column prop="address" label="办理情况" />
          <el-table-column prop="address" label="上报时间" />
        </template>

        <!-- 居民需求 -->
        <template v-if="otherTabel === 'jmxq'">
          <el-table-column prop="name" label="需求类型" />
          <el-table-column prop="address" label="需求描述" />
          <el-table-column prop="address" label="办理情况" />
          <el-table-column prop="address" label="上报时间" />
        </template>
        <!-- 统治人群 -->
        <template v-if="otherTabel === 'tzrq'">
          <el-table-column prop="name" label="所属组织" />
          <el-table-column prop="address" label="所属网格" />
          <el-table-column prop="address" label="所属家庭" />
          <el-table-column prop="address" label="姓名" />
          <el-table-column prop="address" label="联系电话" />
          <el-table-column prop="address" label="性别" />
          <el-table-column prop="address" label="证件号" />
          <el-table-column prop="address" label="人员类别" />
          <el-table-column prop="address" label="备注" />
        </template>
        <!-- 安全隐患 -->
        <template v-if="otherTabel === 'aqyh'">
          <el-table-column prop="name" label="场所名称" />
          <el-table-column prop="address" label="巡查时间" />
          <el-table-column prop="address" label="巡查人员" />
          <el-table-column prop="address" label="联系电话" />
          <el-table-column prop="address" label="隐患明细" />
          <el-table-column prop="address" label="图片" />
          <el-table-column prop="address" label="拟复查时间" />
        </template>
        <el-table-column label="操作" width="90" align="center">
          <template slot-scope="data">
            <el-button type="text" @click="handleView">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="showDialog">
      <same-dialog @close="close" />
    </div>
    <div v-if="showDialogEvent">
      <report-an-event @close="closeEvent" />
    </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";

export default {
  name: "Microgrid",
  components: { Breadcrumb, Pagination, SameDialog, ReportAnEvent },
  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: "微网格",
        },
      ],
      itemNav: 1,
      showDialog: false,
      showDialogEvent: false,
      otherTabel: "sbsj",
      monthOptions: new Array(12).fill(0).map((_, index) => {
        return { label: index - 0 + 1 + "月", value: index - 0 + 1 };
      }),
      list: [{}, {}, {}],
    };
  },
  methods: {
    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;
    },
    getList() {},
    handleView() {
      if (this.itemNav === 1) {
        this.showDialogEvent = true;
      }
      if (this.itemNav === 3) {
        this.showDialog = 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>