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

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

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

    <!-- 内容 -->
    <div class="body">
      <RoadStateCard
        v-for="(item, index) in data"
        :key="index"
        :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";

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

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: {
    onRefreshForm(){
      this.searchData.pageNum = 1;
      this.$refs.searchComp.handleResetForm();
    },
    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.total = result.total;
        result.rows.forEach((it) => {
          it.stringDirection = directionMapping[it.direction] || it.direction;
        });
        this.data = result.rows;
      });
    },
    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>