UI3/src/views/goLineData/_ViewCompany_Alarm.vue

<script setup lang="ts">
import moment from "moment"
import { ref, withDefaults, onMounted, watch } from "vue"
import { useRoute } from "vue-router"
const route = useRoute()
const props = withDefaults(defineProps<{ id: string }>(), { id: "" })
const cols = ref([
  {
    name: "设备名称",
    field: "device_name",
  },
  {
    name: "告警类型",
    field: "warn_type_name",
  },
  {
    name: "告警数据",
    field: "warn_value",
  },
  {
    name: "发生时间",
    field: "warn_starttime",
  },
  {
    name: "恢复时间",
    field: "warn_endtime",
  },
  {
    name: "持续时间",
    field: "stay_time",
  },
])
const date = ref<[Date, Date]>([new Date(), new Date()])
const warnType = ref<string | undefined>()
const queryParams = ref({
  id: props.id,
  begin: moment(date.value[0]).format("YYYYMMDD"),
  end: moment(date.value[1]).format("YYYYMMDD"),
  //warn_type: warnType.value && warnType.value != "undefined" ? warnType.value : "",
})

function init() {
  //
  warnType.value = route.query.type as string
}
function query() {
  const params: any = {
    id: props.id,
    begin: moment(date.value[0]).format("YYYYMMDD"),
    end: moment(date.value[1]).format("YYYYMMDD"),
  }
  if (warnType.value) {
    params.warn_type = warnType.value
  }

  queryParams.value = params
}
watch(() => props.id, init)

onMounted(() => {
  init()
})
</script>
<template>
  <VbDataTable
    :header="cols"
    url="sys/onlineData/warnTable"
    :query-params="queryParams"
    method="post"
    :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="日期：">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="default"
          />
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="告警类型：">
          <DySelect
            v-model:value="warnType"
            url="sys/dict/getList?code=000100001&key=temp"
            method="get"
            :formatRemoteData="(v:any)=>{return v?.list}"
          ></DySelect>
        </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-form-item>
      </el-form>
    </template>
    <template #warn_starttime="{ row }">
      {{ moment(row.warn_starttime, "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") }}
    </template>
    <template #warn_endtime="{ row }">
      {{ moment(row.warn_endtime, "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") }}
    </template>
    <template #stay_time="{ row }">
      {{ moment(row.warn_endtime, "YYYYMMDDHHmmss").diff(moment(row.warn_starttime, "YYYYMMDDHHmmss"), "m") }} 分钟
    </template>
  </VbDataTable>
</template>