SzplatformWeb/src/views/warningManage/warningAudit/groupEvent.vue

<!-- 驾驶舱群体事件 -->
<template>
  <div class="L-ultimately-container">
    <header>
      驾驶舱群体事件
      <span class="title-span">解释：同地点、同一件事发生多起。规则：3天内、同地点、同一件事发生超过10次的。如果超过30天则创建新事件。如果当天再发生不再推送新事件，第二天再发生再推送新事件。</span>
    </header>
    <div class="tabs">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="color: #edeef0"
      >
        <el-tab-pane label="待审核" name="first" />
        <el-tab-pane label="已上报" name="second" />
        <el-tab-pane label="重训练" name="third" />
        <el-tab-pane label="审核通过" name="four" />
      </el-tabs>
    </div>
    <div class="container-info" id="L-size-main">
      <header id="L-header">
        <el-form :inline="true" :model="formInline" size="small" class="demo-form-inline">
          <el-form-item label="事件标题：">
            <el-input v-model="formInline.title" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="预警时间：">
            <!-- <el-date-picker
              class="ignoreElement"
              v-model="formInline.firstWarnTimeDate"
              format="yyyy"
              value-format="yyyy"
              type="year"
              placeholder="选择年份">
            </el-date-picker> -->
            <el-date-picker
              v-model="formInline.time"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="请选择"
            >
            </el-date-picker>
          </el-form-item>
          
          <el-form-item>
            <el-button size="mini" @click="resetQuery('queryFrom')">重置</el-button>
            <el-button size="mini" type="primary" @click="handleQuery('queryFrom')">查询</el-button>
          </el-form-item>
        </el-form>
      </header>
      <section>
        <!--  :height="tabHeader" -->
        <el-table v-loading="loading" :data="tableData" :height="tabHeader">
          <el-table-column type="index" label="序号" width="100px" class-name="table-operation" align="center"/>
          <el-table-column label="事件标题" key="title" width="400px" prop="title" />
          <el-table-column label="预警时间" key="firstWarnTimeDate" width="300px" prop="firstWarnTimeDate" />
          <el-table-column label="预警因素" key="warnFactor" width="400px" prop="warnFactor" />
          <el-table-column label="事件数量" key="nums" width="100px" prop="nums" align="center">
            <template slot-scope="scope">
              <div style="text-align: center;">{{ scope.row.nums }}条</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="table-operation-anniu" align="center">
            <template slot-scope="scope">
              <div @click="audit(scope.row)" class="go-audit" v-if="activeName == 'first'">
                <img src="@/assets/images/audit.png" alt="">
                <span>审核</span>
              </div>
              <el-button v-else @click="audit(scope.row)" type="text" style="margin-right: 5px;" class="sqbtn sqbtn1">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination 
          id="L-pagination"
          :total="total"
          :page="pagination.current"
          :limit="pagination.size"
          layout="total, prev, pager, next, jumper"
          @pagination="getPagination"
          :current-page.sync="pagination.current" 
        ></pagination>
      </section>
    </div>
    <event-audit title="事件审核" ref="eventAudit" :auditStatus="auditStatus" @closeDialog="getList"></event-audit>
  </div>
</template>
<script>
import { colonyPage, login } from "@/api/eventPage"
import { setToken } from '@/utils/auth'
import { encrypt } from '@/utils/jsencrypt'
import EventAudit from '@/views/components/eventAudit.vue'
export default {
  components:{
    EventAudit,
  },
  data() {
    return {
      activeName: "first",
      active: 0,
      formInline:{
        title:"",
        time:[],
      },
      loading: false,
      tableData: [],
      tabHeader: null,
      total:0,
      pagination: {
        current: 1,
        size: 10,
        msgType: '1',
        isReport:null,
      },
      auditStatus: 1,
    }
  },
  mounted(){
    const currentDate = new Date();
    const targetDate = new Date(2024, 10, 1, 0, 0, 0);
    if(currentDate >= targetDate) {
      this.$prompt('<div>算法服务已超过使用期限</div><div class="warningText">请输入试用码（有效期30天）</div>', '提示', {
      confirmButtonText: '确定',
      type:"warning",
      closeOnPressEscape:false,
      showCancelButton: false,
      closeOnClickModal:false,
      dangerouslyUseHTMLString:true,
      inputPattern: /^3939$/,
      inputErrorMessage: "试用码错误！",
      showInput:true,
      showClose:false,
    }).then(({ value }) => {
      login("admin",encrypt("Suanfa@2024//**...")).then(res=>{
        // setToken(res.token)
        localStorage.setItem('Admin-Token',res.token)
        this.getList();
        this.cancalDebounce();
        window.addEventListener('resize', this.cancalDebounce);
      })
    })
    } else {
      login("admin",encrypt("Suanfa@2024//**...")).then(res=>{
        // setToken(res.token)
        localStorage.setItem('Admin-Token',res.token)
        this.getList();
        this.cancalDebounce();
        window.addEventListener('resize', this.cancalDebounce);
      })
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    // 切换tab
    handleClick(e) {
      if (this.activeName == "first") {
        this.pagination.isReport = 4;
        this.pagination.startTime = "";
        this.pagination.endTime = "";
        this.pagination.title = "";
        this.formInline.title = "";
        this.formInline.time = [];
        this.auditStatus = 1;
        this.getList();
      } else if (this.activeName == "second") {
        this.pagination.isReport = 1;
        this.pagination.startTime = "";
        this.pagination.endTime = "";
        this.pagination.title = "";
        this.formInline.title = "";
        this.formInline.time = [];
        this.auditStatus = 2;
        this.getList();
      } else if (this.activeName == "third") {
        this.pagination.isReport = 2;
        this.pagination.startTime = "";
        this.pagination.endTime = "";
        this.pagination.title = "";
        this.formInline.title = "";
        this.formInline.time = [];
        this.auditStatus = 2;
        this.getList();
      } else if(this.activeName == "four") {
        this.pagination.isReport = 3
        this.pagination.startTime = "";
        this.pagination.endTime = "";
        this.pagination.title = "";
        this.formInline.title = "";
        this.formInline.time = [];
        this.auditStatus = 2;
        this.getList();
      }
    },
    // 获取页码
    getPagination(pages) {
      this.pagination.current = pages.page;
      this.pagination.size = pages.limit;
      this.getList();
    },
    getList(){
      this.loading = true;
      colonyPage(this.pagination).then(res=>{
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false;
      }).catch(err=>{
        this.tableData = [];
        this.loading = false;
      })
    },
    resetQuery(){
      this.formInline = {
        title:"",
        time:[],
      }
      this.pagination = {
        current: 1,
        size: 10,
        msgType: '1',
        isReport: this.activeName == "first" ? null : this.activeName == "second" ? 1 : this.activeName == "third" ? 2 : null,
      }
      this.getList();
    },
    // 查询
    handleQuery(){
      if(this.formInline.time.length > 0) {
        this.formInline.startTime = this.formInline.time[0]
        this.formInline.endTime = this.formInline.time[1]
      }
      this.pagination = {...this.pagination,...this.formInline}
      this.getList();
    },
    audit(item){
      this.$refs.eventAudit.open(item);
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('L-size-main'); // 通过元素的 ID 获取元素
      const header = document.getElementById('L-header'); // 通过元素的 ID 获取元素
      const pagination = document.getElementById('L-pagination'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const headerHeight = header.offsetHeight;
      const paginationtHeight = pagination.offsetHeight;
      this.tabHeader = elementHeight - headerHeight - paginationtHeight;
    }
  },
}
</script>
<style lang="scss" scoped>

</style>