UI3/src/views/warn/abnormal.vue

<script setup lang="ts">
import { ref } from "vue"
import moment from "moment"
import router from "@/router"
const cols = ref([
  {
    name: "设备名称",
    field: "device_name",
  },
  {
    name: "异常类型",
    field: "warn_type_name",
  },
  {
    name: "告警时间",
    field: "warn_time",
  },
  {
    name: "持续时间(分钟)",
    field: "continue_time",
  },
  {
    name: "操作",
    field: "action",
    width: 100,
  },
])
const warnType = ref(null)
const size = ref<any>("default")
const dySearchSelectStyle = { width: "180px" }
const dateRange = ref<any>([moment(new Date()).add(-1, "M").toDate(), new Date()])
const queryParams = ref({
  warn_type: warnType.value,
  abnormal_state: null,
  query_start_time: moment(dateRange.value[0]).format("YYYYMMDD"),
  query_end_time: moment(dateRange.value[1]).format("YYYYMMDD"),
})

function query() {
  queryParams.value = {
    warn_type: warnType.value,
    abnormal_state: null,
    query_start_time: moment(dateRange.value[0]).format("YYYYMMDD"),
    query_end_time: moment(dateRange.value[1]).format("YYYYMMDD"),
  }
}
function reset() {
  warnType.value = null
  dateRange.value = [moment(new Date()).add(-1, "M").toDate(), new Date()]
  query()
}
function detail(row: any) {
  if (row.warn_type == "000100003" || row.warn_type == "000100005" || row.warn_type == "000100007") {
    router.push({
      path: "/AbnormalList/strongWarn",
      query: { back: 1, id: row.id, type: row.warn_type },
    })
  } else if (row.warn_type == "000100006") {
    router.push({
      path: "/AbnormalList/disConnect",
      query: { back: 1, id: row.id, type: row.warn_type },
    })
  } else {
    router.push({
      path: "/AbnormalList/overdueWarn",
      query: { back: 1, id: row.id, type: row.warn_type },
    })
  }
}
</script>

<template>
  <VbDataTable
    ref="table"
    :header="cols"
    url="sys/companyDeclare/getCompanyWarnList"
    method="post"
    :query-params="queryParams"
    :has-checkbox="false"
  >
    <template v-slot:table-tool>
      <el-form class="align-items-center" :inline="true">
        <el-form-item class="mb-0 me-5 align-items-center" label="异常类型">
          <DySelect
            v-model="warnType"
            :url="'sys/dict/getList?code=000100001&key=temp'"
            :formatRemoteData="(v:any)=>{return v?.list}"
            :style="dySearchSelectStyle"
            :size="size"
            @clear="warnType = null"
            placeholder="请选择异常类型"
          ></DySelect>
        </el-form-item>
        <el-form-item class="mb-0 me-0 align-items-center" label="日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="default"
          />
        </el-form-item>
        <el-form-item class="mb-0 me-0 align-items-center">
          <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="query">查询</el-button>
          <el-button class="ms-3 mt-0 btn btn-sm btn-light-primary btn-outline" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </template>

    <template #action="{ row }">
      <span class="table-action" @click="detail(row)">查看</span>
    </template>
  </VbDataTable>
</template>