UI3/src/views/overAnalysis/overTimeDetail_Company.vue

<script setup lang="ts">
import { ref, onMounted } from "vue"
import type { Header } from "@/components/Table/table-partials/models"
import moment from "moment"
import { useRouter, useRoute } from "vue-router"
const route = useRoute()
const router = useRouter()

const table = ref()
const columns = ref<Array<Header>>([
  {
    name: "商户名称",
    field: "company_name",
  },
  {
    name: "监控仪",
    field: "device_name",
  },
  {
    name: "报警类型",
    field: "warn_type_name",
  },
  {
    name: "发生时间",
    field: "warn_starttime",
  },
  {
    name: "恢复时间",
    field: "warn_endtime",
  },
  {
    name: "持续时间",
    field: "stay_time",
  },
  {
    name: "操作",
    width: 150,
    align: "center",
    field: "action",
  },
])

const size = ref<any>("default")
const dySearchSelectStyle = { width: "150px" }

const companyId = ref(route.query.company_id as string)
const warnType = ref("")
const timeType = ref(0)

const queryParams = ref<any>({
  company_id: companyId.value,
  warn_type: warnType.value,
  time_type: timeType.value,
  query_end_time: moment().format("YYYYMMDD"),
  query_start_time: moment().format("YYYYMMDD"),
})
const startDate = ref(new Date())
const endDate = ref(new Date())
const dateValue = ref<[Date, Date]>([startDate.value, endDate.value])
//const selectValue = ref(0)
function changeDate(v: Date[]) {
  startDate.value = v[0]
  endDate.value = v[1]
}

const jump = function (v: any) {
  console.log("jump", v)
  router.push({
    path: "/goLineData/oilFumeConcentration",
    query: {
      comName: v.company_name,
      company_id: v.company_id,
      backNeed: 1,
    },
  })
}
const getStayTimes = (item: any) => {
  if (!!item.warn_endtime && !!item.warn_starttime) {
    const stayTime = moment(item.warn_endtime, "YYYYMMDDHHmmss").diff(
      moment(item.warn_starttime, "YYYYMMDDHHmmss"),
      "milliseconds"
    )
    if (stayTime !== 0) {
      const hours = Math.floor((stayTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
      const minutes = Math.floor((stayTime % (1000 * 60 * 60)) / (1000 * 60))
      const seconds = Math.floor((stayTime % (1000 * 60)) / 1000)
      return `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}:${
        seconds < 10 ? "0" + seconds : seconds
      }`
    }
  }
  return ""
}
function init() {
  timeType.value = Number(route.query.time_type) ?? 0
  startDate.value = moment(route.query.query_start_time as string, "YYYYMMDD").toDate()
  endDate.value = moment(route.query.query_end_time as string, "YYYYMMDD").toDate()
  query()
}

function query() {
  const params = {
    company_id: companyId.value,
    warn_type: warnType.value,
    time_type: timeType.value,
    query_start_time: moment(startDate.value).format("YYYYMMDD"),
    query_end_time: moment(endDate.value).format("YYYYMMDD"),
  }
  const keys = Object.keys(params)
  keys.forEach((key) => {
    if (params[key] == "" && params[key] !== 0) {
      delete params[key]
    }
  })

  queryParams.value = params
}
function reset() {
  timeType.value = 0
  warnType.value = ""
  startDate.value = new Date()
  endDate.value = new Date()
  dateValue.value = [startDate.value, endDate.value]
  init()
}
function exported() {
  const params = {
    company_id: companyId.value,
    warn_type: warnType.value,
    time_type: timeType.value,
    query_start_time: moment(startDate.value).format("YYYYMMDD"),
    query_end_time: moment(endDate.value).format("YYYYMMDD"),
  }
  const keys = Object.keys(params)
  keys.forEach((key) => {
    if (params[key] == "" && params[key] !== 0) {
      delete params[key]
    }
  })
  let str = ""
  for (const key in params) {
    str += `${key}=${params[key]}&`
  }
  window.open("/api/sys/overStandardAnalysis/exportWarnTable?" + str)
}
function detail(row: any) {
  const path =
    row.warn_type == "000100003" || row.warn_type == "000100005" || row.warn_type == "000100007"
      ? "/overAnalysis/overTime/concentrationWarn"
      : row.warn_type == "000100006"
      ? "/overAnalysis/overTime/offlineWarn"
      : "/overAnalysis/overTime/overdueWarn"

  router.push({
    path: path,
    query: {
      id: row.id,
      type: row.warn_type,
      needback: 1,
    },
  })
}
onMounted(init)
</script>
<template>
  <VbDataTable
    ref="table"
    :header="columns"
    url="sys/overStandardAnalysis/warnTable"
    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"
            :formatRemoteData="(v:any)=>{return v?.list}"
            :url="'sys/dict/getExceedWarnType'"
            :style="`width:180px`"
            placeholder="请选择报警类型"
          ></DySelect>
        </el-form-item>
        <DateRangeSelect
          v-model:date-value="dateValue"
          v-model:select-value="timeType"
          :select-class="'mb-0 align-items-center'"
          :date-class="'mb-0 mt-3 align-items-center'"
          :style="dySearchSelectStyle"
          :size="size"
          @change="changeDate"
        />
        <el-form-item class="mb-0 me-0 align-items-center" :class="timeType == 4 ? `mt-3` : ''">
          <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-button class="ms-3 mt-0 btn btn-sm btn-light-info btn-outline" @click="exported">导出</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #company_name="{ row }">
      <span class="text-primary" @click="jump(row)" style="cursor: pointer">{{ row["company_name"] }}</span>
    </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 }">{{ getStayTimes(row) }}</template>
    <template #action="{ row }">
      <div class="text-danger text-center">
        <span class="table-action" @click="detail(row)">查看详情</span>
      </div>
    </template>
  </VbDataTable>
</template>