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" @cell-click="onCellClick">
        <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' ? ('交通拥堵') : '交通拥堵'}.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>

    <!-- "详情"弹出框 -->
    <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData" :activeName="activeName"
      @update:value="handleDialogClose" @queryData="reData" />

  </div>
</template>

<script>
import request from "@/utils/request";
import EventDetailDialog from "@screen/pages/control/event/event/EventDetailDialog/index";
import Table from '@screen/components/Table.vue';
import Pagination from '@screen/components/Pagination.vue';
import { WarningType } from "@screen/utils/enum.js";
import { Message } from "element-ui";
import { WarningType as warningTypeMapping, DirectionTypes as gzDirectionMapping, warningSourceMapping, warningStateMapping } from "@screen/utils/enum.js"

export default {
  components: {
    Table,
    Pagination,
    EventDetailDialog
  },
  data() {
    return {
      activeTab: "first",
      WarningType,
      eventDetailDialogVisible: false,
      detailDialogFormData: {},
      activeName: '-1',
      tableData: [],
      total: 10,
      searchData: {
        pageSize: 10,
        pageNum: 1,
      },
    };
  },
  computed: {
  },
  mounted() {
    this.getMainData();
  },
  methods: {
    onChangeTab(tab, event) {
      console.log(tab, event);
      this.getMainData();
    },
    onCellClick(row, column, cell, event) {
      // console.log('55', row, column, cell, event)
      if (this.activeTab == 'first') {
        this.activeName = '-1'
      } else {
        this.activeName = '0'
      }
      this.firstBtnClick(row.id);
    },
    handleDialogClose() {
      this.eventDetailDialogVisible = false;
    },
    reData() {

    },
    getMainData() {
      if (this.activeTab == 'first') {
        request({
          url: `/perceivedEvents/warning/warningListPage?pageNum=${this.searchData.pageNum}&pageSize=${this.searchData.pageSize}`,
          method: "POST",
          data: {
            warningState: 1,
          }
        })
          .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;
          })
      }
    },
    firstBtnClick(id) {//点击去确认/详情/处置记录等第一个按钮
      console.log("id", id);
      if (this.activeName == '-1') {
        request({
          url: `/perceivedEvents/warning/getWarningById`,//感知事件
          method: "post",
          data: { id }
        }).then((result) => {
          if (result.code != 200) return Message.error(result?.msg);
          let data = result.data;

          data.stringEventSource = data?.warningSource ? warningSourceMapping[data.warningSource] : '';
          data.nickName = data.userName;
          data.direction = gzDirectionMapping[data.direction] || data.direction;
          data.startTime = data.warningTime;
          data.stringEventState = warningStateMapping[data.warningState];
          data.stringEventType = warningTypeMapping[data.warningType];

          data.videoList = [];
          if (data.otherConfig) {
            let otherConfig = JSON.parse(data.otherConfig);

            data.waterFilmThickness = otherConfig.waterFilmThickness;
            data.windSpeed = otherConfig.windSpeed;
            data.visibility = otherConfig.visibility;

            data.pictures = otherConfig.pictures || [];
            data.videoList = otherConfig.videoList || [];
            // data.videoList = ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4',
            // 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4']
          }
          data.videoType = "mp4";
          data.component = "Video";
          this.detailDialogFormData = data;
          // console.log('data', this.detailDialogFormData)

          this.eventDetailDialogVisible = true;
        });
      } else {
        request({
          url: `/dc/system/event/${id}`,//交通事件
          method: "get",
        }).then(async (result) => {
          if (result.code != 200) return Message.error(result?.msg);
          let data = result.data;
          data.stringDirection = gzDirectionMapping[data.direction] || data.direction;
          data.startTime = data?.occurrenceTime || '';


          data.videoList = [];
          data.component = "VideoMulti";

          // const { downCamera, upCamera } = ((await getNearCameraNew(data.stakeMark))?.data || {});//新的上下游摄像头接口
          // data.downCamId = downCamera?.camId;
          // data.upCamId = upCamera?.camId;
          data.videoType = "flv";

          this.detailDialogFormData = data;

          this.eventDetailDialogVisible = true;
        });
      }

    },
    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>