jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/control/manual/events/index.vue

<template>
  <div class="RoadNetworkMonitoring">
    <!-- 搜索栏 -->
    <div class="filter">
      <div class="filter-btn">
        <ButtonGradient @click.native="handleExport" v-hasPermi="['control:manual:events:export']">
          <template #prefix>
            <img src="@screen/images/export.svg" />
          </template>
          导出
        </ButtonGradient>
        <ButtonGradient @click="onRefresh" class="refresh-btn">
          <template #prefix>
            <img src="./images/refresh.svg" />
          </template>
          刷新
        </ButtonGradient>
      </div>

      <InputSearch
        ref="searchComp"
        style="width: 402px"
        :formList="searchFormList"
        :formConfigOptions="{ dFormData: { eventState: '0' } }"
        @handleSearch="handleSearch"
      />
    </div>

    <!-- 内容 -->
    <div class="body">
        <div class="content">
              <!-- 内容 -->
    <div class="scrollPanel">
      <ManualWarningCard
        v-for="(item, index) in data"
        :key="index"
        :cardData="item"
      />
    </div>
      </div>
      </div>

    <!-- 分页 -->
    <div class="footer">
      <Pagination
        @current-change="initData"
        @size-change="onSizeChange"
        width="'100%'"
        :page-sizes="[12, 16, 20, 32, 48]"
        :page-size="pageSize"
        :current-page.sync="pageNum"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </Pagination>
    </div>
  </div>
</template>

<script>
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
import Pagination from "@screen/components/Pagination.vue";
import InputSearch from "@screen/components/InputSearch/index.vue";
import ManualWarningCard from "@screen/components/ManualWarningCard/index.vue";
import { perceivedEventsList } from "@/api/manualWarning/index.js";
// import EventDispatchDialog from "./EventDispatchDialog/index";
import { searchFormList } from "./data";
import request from "@/utils/request";
import { exportFile } from "@screen/utils/common";
import { WarningType, WarningSubclass } from "@screen/utils/enum.js";
import { checkRole } from '@/utils/permission'

const directionMapping = {
  1: "菏泽方向",
  2: "双向",
  3: "济南方向",
};

export default {
  name: "RoadNetworkMonitoring",
  components: {
    Pagination,
    ManualWarningCard,
    InputSearch,
    Pagination,
    ButtonGradient,
  },
  data() {
    return {
      WarningSubclass,
      searchFormList,
      detailDialogFormData: {},
      total: 0,
      data: [],
      eventId: "0",
      pageSize: 12,
      pageNum: 1,
      searchData: {
        pageNum: 1,
        warningSource:"6"
      },
    };
  },
  created() {
    this.initSearch();
    this.initData();
  },
  methods: {
    initSearch(){
      request({
        url: `business/facility/query?facilityType=1`,
        method: "get",
      }).then(res=>{
        if (res.code != 200) return Message.error(res?.msg);
        const options = [];
        res.data.forEach(e => {
          options.push({
            key: e.facilityName,
            label: e.facilityName,
          })
        });
        this.searchFormList[2].options.options = options
      })
    },
    // 导出
    handleExport() {
      exportFile({
        url: "/business/warning/export",
        filename: "事件列表",
        data: this.searchData
      });
    },
    // 刷新
    onRefresh() {
      this.checkFacility()
      this.searchData.pageNum = 1;
      this.$refs.searchComp.handleResetForm();
    },
    initData() {
      this.checkFacility()
      perceivedEventsList(this.searchData, this.pageNum, this.pageSize).then(
        (res) => {
          if (res.code != 200) return Message.error(res?.msg);
          this.total = res.total;
          res.rows.forEach((it) => {
            it.source = "非机预警";
            it.stringDirection = directionMapping[it.direction] || it.direction;
            it.otherConfig = JSON.parse(it.otherConfig);
            if (it.warningSubclass) {
              let i = it.warningType;
              let r = it.warningSubclass;
              it.warningTypeName =
                WarningType[i] +
                (WarningSubclass[i][r]
                  ? "(" + WarningSubclass[i][r] + ")"
                  : "");
            }
          });
          this.data = res.rows;
        }
      );
    },
    checkFacility(){
      if(checkRole(['101','102','103','104','105','106','107','108','109','110',]) && !checkRole(["admin"])){
        if (checkRole(["101"])){
          this.searchData.facilityName = "大学城收费站"
        } else if (checkRole(["102"])){
          this.searchData.facilityName = "长清收费站"
        } else if (checkRole(["103"])){
          this.searchData.facilityName = "孝里收费站"
        } else if (checkRole(["104"])){
          this.searchData.facilityName = "平阴北收费站"
        } else if (checkRole(["105"])){
          this.searchData.facilityName = "平阴收费站"
        } else if (checkRole(["106"])){
          this.searchData.facilityName = "平阴南收费站"
        } else if (checkRole(["107"])){
          this.searchData.facilityName = "东平收费站"
        } else if (checkRole(["108"])){
          this.searchData.facilityName = "梁山东收费站"
        } else if (checkRole(["109"])){
          this.searchData.facilityName = "梁山收费站"
        } else if (checkRole(["110"])){
          this.searchData.facilityName = "嘉祥西收费站"
        }
      }
    },
    onSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.initData();
    },
    getStateCardBind(item) {},

    firstBtnClick(id) {},
    handleSearch(data) {
      this.searchData.facilityName = data.facilityName;
      this.searchData.startTime = data.warningTime && data.warningTime[0]+' 00:00:00';
      this.searchData.completeTime = data.warningTime && data.warningTime[1]+' 23:59:59';
      if(data.warningType){
        this.searchData.warningType = data.warningType
      } else {
       delete this.searchData.warningType;
      }
      if(data.direction){
        this.searchData.direction = data.direction
      } else {
       delete this.searchData.direction;
      }
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.RoadNetworkMonitoring {
  padding: 21px;

  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 6;

  .filter {
    height: 38px;
    display: flex;
    // justify-content: flex-end;
    justify-content: space-between;
    .filter-btn {
      width: 150px;
      justify-content: space-between;
      display: flex;
    }
  }


  .body {
    flex: 1;
    overflow: hidden;
    position: relative;
    overflow: hidden;

    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .scrollPanel {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 24px;
        grid-auto-rows: minmax(220px, max-content);
        position: relative;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
      }
    }
  }


  // .body {
  //   flex: 1;
  //   overflow: auto;
  //   display: grid;
  //   grid-template-columns: repeat(4, 1fr);
  //   grid-gap: 20px;
  //   // grid-row-gap: 9px;
  //   // grid-column-gap: 9px;
  //   grid-auto-rows: min-content;
  // }

  .footer {
    margin-top: 15px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>