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

<!-- 驾驶舱紧急事件 -->
<template>
  <div class="L-ultimately-container">
    <header>
      驾驶舱紧急事件
      <span class="title-span"
        >解释：社会治安类紧急突发事件。规则：跳楼、放火、杀人、灾害、火灾、救火、打架、群架、斗殴、殴打、受伤、车祸、受伤、地震等类型。</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="350px"
            prop="warnFactor"
          />
          <el-table-column
            label="审核时间"
            key="auditTime"
            v-if="activeName !== 'first'"
            width="180px"
            prop="auditTime"
            align="center"
          >
            <template slot-scope="scope">
              <div style="text-align: center">{{ scope.row.auditTime }}</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>
    <urgency-audit
      :title="dialogTitle"
      ref="urgencyAudit"
      :auditStatus="auditStatus"
      @closeDialog="getList"
    ></urgency-audit>
  </div>
</template>
<script>
import { colonyPage, login, verify, verificationCode } from "@/api/eventPage";
import { setToken } from "@/utils/auth";
import { encrypt } from "@/utils/jsencrypt";
import urgencyAudit from "@/views/components/urgencyAudit.vue";
export default {
  components: {
    urgencyAudit,
  },
  data() {
    return {
      activeName: "first",
      active: 0,
      formInline: {
        title: "",
        time: [],
      },
      loading: false,
      tableData: [],
      tabHeader: null,
      total: 0,
      pagination: {
        current: 1,
        size: 10,
        msgType: "3",
        isReport: 4,
      },
      auditStatus: 1,
      auditMapStatus: 1,
      dialogTitle: "事件审核",
    };
  },
  mounted() {
    // const currentDate = new Date();
    // const targetDate = new Date(2024, 10, 1, 0, 0, 0);
    if (JSON.parse(process.env.VUE_APP_ISTEST)) {
      // 正式环境使用
      verify().then((res) => {
        if (!res.data) {
          this.$prompt(
            '<div>算法已有3个月未迭代，请联系算法人员进行迭代优化。</div><div class="warningText">正式使用码（签约合同有效期2年，有效期至2026年11月1日）</div>',
            "提示",
            {
              confirmButtonText: "确定",
              type: "warning",
              closeOnPressEscape: false,
              showCancelButton: false,
              closeOnClickModal: false,
              dangerouslyUseHTMLString: true,
              showInput: true,
              showClose: false,
              beforeClose: (action, instance, done) => {
                if (action === "confirm") {
                  if (instance.inputValue == "88888888") {
                    done();
                  } else {
                    this.$message.error("试用码错误！");
                  }
                }
              },
            }
          ).then(({ value }) => {
            verificationCode({ verificationCode: value }).then((res) => {
              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);
          });
        }
      });
    } else {
      // 测试环境使用
      this.getList();
      this.cancalDebounce();
      window.addEventListener("resize", this.cancalDebounce);
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.cancalDebounce);
  },
  methods: {
    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.auditMapStatus = 1;
        this.dialogTitle = "事件审核";
        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.auditMapStatus = 2;
        this.dialogTitle = "事件详情";
        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.auditMapStatus = 2;
        this.dialogTitle = "事件详情";
        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.auditMapStatus = 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: "3",
        isReport:
          this.activeName == "first"
            ? 4
            : 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.urgencyAudit.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>