jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/WarningList.vue

<template>
  <div class="warning_list">
    <el-tabs v-model="activeTab" @tab-click="onChangeTab">
      <el-tab-pane label="告警事件" name="first" />
      <el-tab-pane label="待确认事件" name="second" />
    </el-tabs>

    <div>
      <Table :data="tableData" :show-header="false">
        <ElTableColumn prop="remark" width="280">
          <template slot-scope="scope">
            <div class="leftColumn">
              <div class="device-icon"
                :style="{ backgroundImage: `url(${require(`@screen/images/event/${activeTab == 'first' ? (WarningType[scope.row.warningType] || '交通拥堵') : '交通拥堵'}.svg`)})` }" />
              <p>{{ activeTab == 'first' ? WarningType[scope.row.warningType] : scope.row.stringEventType }}</p>
            </div>
            <P> {{ scope.row.remark }}</P>
          </template>

        </ElTableColumn>
      </Table>
    </div>

    <div class="footer">
      <Pagination @current-change="getMainData" @size-change="onSizeChange" width="'100%'"
        :page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum"
        layout="total, sizes, prev, pager, next" :total="total">
      </Pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import Table from '@screen/components/Table.vue';
import Pagination from '@screen/components/Pagination.vue';
import { WarningType } from "@screen/utils/enum.js";

export default {
  data() {
    return {
      activeTab: "first",
      WarningType,
      tableData: [],
      total: 10,
      searchData: {
        pageSize: 10,
        pageNum: 1,
      },
    };
  },
  components: {
    Table,
    Pagination
  },
  computed: {
  },
  mounted() {
    this.getMainData();
  },
  methods: {
    onChangeTab(tab, event) {
      console.log(tab, event);
      this.getMainData();
    },
    getMainData() {
      if (this.activeTab == 'first') {
        request({
          url: `/perceivedEvents/warning/warningListPage?pageNum=${this.searchData.pageNum}&pageSize=${this.searchData.pageSize}`,
          method: "POST",
          data: {
            warningState: 1,
            pageNum: 1, pageSize: 10
          }
        })
          .then((result) => {
            if (result.code != 200) return;
            this.tableData = result.rows;
            this.total = result.total;
          })
      } else if (this.activeTab == 'second') {
        request({
          url: `dc/system/event/list?eventState=0&pageSize=${this.searchData.pageSize}&pageNum=${this.searchData.pageNum}`,
          method: "GET",
          // params: {}
        })
          .then((result) => {
            if (result.code != 200) return;
            result.rows.forEach(item => {
              item.remark = (item.occurrenceTime || '') + " " + (item.stakeMark || '') + " " + (item.direction || '') + " 发生" + (item.stringEventType || '') + "( " + (item.eventSubclass || '') + ")事件"
              // item.remark = item.stakeMark + " " + item.direction + " 发生" + item.stringEventType + "( " + item.eventSubclass + ")事件"
            })
            this.tableData = result.rows;
            this.total = result.total;
          })
      }
    },
    onSizeChange(pageSize) {
      this.searchData.pageSize = pageSize;
      this.getMainData();
    },
  }
};
</script>

<style lang="scss" scoped>
.warning_list {
  .leftColumn {
    display: flex;
    justify-content: center;
    margin-right: 8px;
    border: 1px solid #FF5F5F;
    float: left;

    p {
      color: #FF5F5F;
      font-size: 15px;
      margin-right: 3px;
    }

    .device-icon {
      height: 22px;
      width: 22px;
      background-repeat: no-repeat;
      background-size: auto;
      background-position: center;
    }

  }
}
</style>