jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue

<template>
  <div class='RoadNetworkMonitoring'>
    <!-- 搜索栏 -->
    <div class="filter">
      <ButtonGradient @click="onRefresh" class="refresh-btn">
        <template #prefix>
          <img src="./images/refresh.svg" />
        </template>
        刷新
      </ButtonGradient>

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

    <!-- 内容 -->
    <div class="body">
      <RoadStateCard v-for="item in data" :key="item" :cardData="item" @firstBtnClick="firstBtnClick"
        @lastBtnClick="lastBtnClick" />
    </div>

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

    <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" @update:value="handleClose" />
    <EventDispatchDialog :visible="eventDispatchDialogVisible" @update:value="handleClose" :eventId="eventId" />
  </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 RoadStateCard from '@screen/components/RoadStateCard/index.vue';
import EventDetailDialog from "./EventDetailDialog/index";
import EventDispatchDialog from "./EventDispatchDialog/index";
import { searchFormList } from './data';
import request from "@/utils/request";

export default {
  name: 'RoadNetworkMonitoring',
  components: {
    Pagination,
    RoadStateCard,
    InputSearch,
    EventDispatchDialog,
    EventDetailDialog,
    Pagination,
    ButtonGradient
  },
  data() {
    return {
      eventDetailDialogVisible: false,
      eventDispatchDialogVisible: false,
      searchFormList,
      detailDialogFormData: {},
      total: 0,
      data: [],
      eventId: '0',
      searchData: {
        pageSize: 16,
        pageNum: 1,
        eventState: 0,
      },
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      request({
        // url: `/dc/system/event/dispatchEventList`,
        url: '/dc/system/event/list',
        method: "get",
        params: this.searchData,
      }).then((result) => {
        if (result.code != 200) return Message.error(result?.msg);
        this.data = result.rows;
        this.total = result.total;
      });
    },
    onSizeChange(pageSize) {
      this.searchData.pageSize = pageSize;
      this.initData();
    },
    getStateCardBind(item) {
      const { state, textColor, text } = tabMap[this.activeName];

      return {
        cardData: { ...item, state },
        lastBtnColor: textColor,
        lastBtnText: text,
      };
    },
    onRefresh() {
      this.data = [];
      setTimeout(() => {
        this.initData();
      }, 100);
    },
    firstBtnClick(id) {
      console.log("id", id);
      request({
        url: `/dc/system/event/${id}`,
        method: "get",
      }).then((result) => {
        if (result.code != 200) return Message.error(result?.msg);
        this.detailDialogFormData = result.data;

        this.eventDetailDialogVisible = true;
      });
    },
    lastBtnClick(id) {
      console.log(id)
      this.eventDispatchDialogVisible = true;
      this.eventId = id;
    },
    handleSearch(data) {
      console.log("data", data);
      let daterange = data.daterange;

      let dStakeMark = data.stakeMark;
      let dendStakeMark = data.endStakeMark;

      let stakeMark = dStakeMark[0] ? `K${dStakeMark[0]}+${dStakeMark[1]}` : '';
      let endStakeMark = dendStakeMark[0] ? `K${dendStakeMark[0]}+${dendStakeMark[1]}` : '';

      this.searchData = {
        ...this.searchData,
        eventState: data.eventState || 0,
        eventType: data.eventType,
        eventSources: data.eventSources,
        startTime: daterange && daterange.length > 0 ? daterange[0] : "",
        endTime: daterange && daterange.length > 0 ? daterange[1] : "",
        stakeMark: stakeMark,
        endStakeMark: endStakeMark,
      };
      this.initData();
    },
    handleClose() {
      this.eventDetailDialogVisible = false;
      this.eventDispatchDialogVisible = false;
    }
  }
}
</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;
    .refresh-btn {

    }
  }

  .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>