UI3/src/views/_component/_WarnProcessed.vue

<script setup lang="ts">
import { ref, computed, onMounted } from "vue"
import moment from "moment"
import router from "@/router"
import ProcessDetail from "./__WarnProcessDetail.vue"
import Rs from "@/core/services/RequestService"
const props = withDefaults(
  defineProps<{
    type?: number
    columns?: any
  }>(),
  { type: 0 }
)
const tableUrl = computed(() => {
  return props.type == 0
    ? "sys/workOrderOrg/getFinishedWorkOrderByOrgAdmin"
    : props.type == 0
    ? "sys/workOrderOrg/getFinishedWorkOrderByOrgLaw"
    : props.type == 2
    ? "sys/workOrderCom/getFinishedWorkOrderByCom"
    : ""
})
const cols = ref([
  {
    name: "公司名称",
    field: "company_name",
  },
  {
    name: "区域",
    field: "org_name",
  },
  {
    name: "报警类型",
    field: "warn_type_name",
  },

  {
    name: "创建时间",
    field: "work_order_start_time",
  },
  {
    name: "完结时间",
    field: "work_order_end_time",
  },
  {
    name: "流程耗时",
    field: "work_order_continue_time",
  },
  {
    name: "操作",
    width: 150,
    field: "action",
  },
])

const size = ref<any>("default")
const dySearchSelectStyle = { width: "180px" }
const dateRange = ref<[Date, Date]>([moment(new Date()).add(-7, "d").toDate(), new Date()])
const companyName = ref("")
const warnType = ref("")
//const orgId = ref("0")
//const monitoringType = ref("")
//const abnormalState = ref("")
const queryParams = ref<any>(
  props.type == 0
    ? {
        query_start_time: moment(dateRange.value[0]).format("YYYYMMDD"),
        query_end_time: moment(dateRange.value[1]).format("YYYYMMDD"),
      }
    : {}
)
const table = ref()
// const getStayTimes = (item: any) => {
//   if (!!item.warn_endtime && !!item.work_order_start_time) {
//     const stayTime = moment(item.work_order_end_time, "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 ""
// }
const jump = function (v: any) {
  console.log("jump", v)
  router.push({
    path: "/goLineData/oilFumeConcentration",
    query: {
      back: 1,
      comName: v.company_name,
      company_id: v.company_id,
    },
  })
}

function query() {
  const params: any = {
    //monitoring_type: monitoringType.value,
    //org_id: orgId.value,
    //abnormal_state: abnormalState.value,
    company_name: companyName.value,
    warn_type: warnType.value,
  }
  if (props.type == 0) {
    params.query_start_time = moment(dateRange.value[0]).format("YYYYMMDD")
    params.query_end_time = moment(dateRange.value[1]).format("YYYYMMDD")
  }
  const keys = Object.keys(params)
  keys.forEach((key) => {
    if (params[key] == "" && params[key] !== 0) {
      delete params[key]
    }
  })
  queryParams.value = params
}
function reset() {
  //orgId.value = "0"
  //monitoringType.value = ""
  //abnormalState.value = ""
  companyName.value = ""
  warnType.value = ""
  dateRange.value = [moment(new Date()).add(-7, "d").toDate(), new Date()]
  query()
}
const modal = ref()
const warnDetails = ref<any>({})
function detail(row: any) {
  const url =
    props.type == 0
      ? "sys/workOrderOrg/getWorkOrderDetailByOrg"
      : props.type == 1
      ? "sys/workOrderOrg/getWorkOrderDetailByOrgLaw"
      : props.type == 2
      ? "sys/workOrderCom/getWorkOrderDetailByCom"
      : ""
  Rs.post(url, {
    data: {
      work_order_id: row.work_order_id,
    },
  }).then((res) => {
    console.log("WARN", res.data)
    res.data.processInfoList.forEach((item: any) => {
      if (item.picture_url != null) {
        const picList = item.picture_url.split(",")
        const picReall: Array<any> = [] //去除空的
        picList.forEach((pic: string, index: number) => {
          if (pic != "") {
            pic = pic.substring(pic.indexOf("/api/file/"))
            picReall.push({
              uid: index,
              name: "image.png",
              status: "done",
              url: pic,
            })
          }
        })
        item.fileList = picReall
      } else {
        item.fileList = []
      }
    })
    warnDetails.value = res.data
    modal.value.show()
  })
}
function init() {
  if (props.type != 0 && props.type != 1) {
    cols.value = props.columns
  }
}
onMounted(init)
</script>

<template>
  <VbDataTable
    ref="table"
    :header="cols"
    :url="tableUrl"
    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="商户名称" v-if="props.type == 0 || props.type == 1">
          <el-input
            class=""
            :style="dySearchSelectStyle"
            v-model="companyName"
            placeholder="请输入商户名称"
            :size="size"
          />
        </el-form-item>
        <el-form-item v-if="props.type == 0" class="mb-0 me-5 align-items-center" label="日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :size="size"
          />
        </el-form-item>

        <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?type=1'"
            :style="dySearchSelectStyle"
            placeholder="请选择告警类型"
          ></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-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 #company_name="{ row }">
      <span class="text-primary" @click="jump(row)" style="cursor: pointer">{{ row["company_name"] }}</span>
    </template>
    <template #action="{ row }">
      <span class="table-action" @click="detail(row)">查看详情</span>
    </template>
    <template #work_order_start_time="{ row }">
      {{ moment(row.work_order_start_time, "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") }}
    </template>
    <template #work_order_end_time="{ row }">
      {{ moment(row.work_order_end_time, "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") }}
    </template>
    <!-- <template #work_order_continue_time="{ row }">
      {{ getStayTimes(row) }}
    </template> -->
  </VbDataTable>
  <VbModal v-model:modal="modal" title="详情">
    <template #body>
      <ProcessDetail :data="warnDetails"></ProcessDetail>
    </template>
  </VbModal>
</template>