UI3/src/views/_component/_WarnNoProcess.vue

<script setup lang="ts">
import { ref, computed, onMounted } from "vue"
import moment from "moment"
import router from "@/router"
import Rs from "@/core/services/RequestService"
const props = withDefaults(
  defineProps<{
    type?: number
    columns?: any
  }>(),
  { type: 0 }
)
const tableUrl = computed(() => {
  return props.type == 0 || props.type == 1
    ? "sys/workOrderOrg/getNoOrderWarnByOrgForPage"
    : "sys/workOrderCom/getNoOrderWarnByComForPage"
})

const cols = ref<Array<any>>([
  {
    name: "公司名称",
    field: "company_name",
  },
  {
    name: "区域",
    field: "org_name",
    width: 150,
  },
  {
    name: "设备名称",
    field: "device_name",
  },
  {
    name: "报警类型",
    field: "warn_type_name",
  },

  {
    name: "报警时间",
    field: "warn_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>({
  query_start_time: moment(dateRange.value[0]).format("YYYYMMDD"),
  query_end_time: moment(dateRange.value[1]).format("YYYYMMDD"),
})
const table = ref()

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 = {
    //monitoring_type: monitoringType.value,
    //org_id: orgId.value,
    //abnormal_state: abnormalState.value,
    company_name: companyName.value,
    warn_type: warnType.value,
    query_start_time: moment(dateRange.value[0]).format("YYYYMMDD"),
    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 noticeDetails = ref<any>({})
const formData = ref({ content: "" })
function Urging(row: any) {
  formData.value.content = ""
  noticeDetails.value = Object.assign({}, row)
  modal.value.show()
}
function onSave() {
  Rs.post("sys/workOrderOrg/startWorkOrderByOrg", {
    data: {
      warn_id: noticeDetails.value.id,
      content: formData.value.content,
    },
  })
}
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 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="Urging(row)">发起催办</span>
    </template>
  </VbDataTable>
  <VbModal
    v-model:modal="modal"
    title="发起催办"
    :form-data="formData"
    :form-items="[
      {
        label: '催办内容：',
        field: 'content',
        component: 'slot',
        rules: [{ required: true, message: '请填写催办内容', trigger: ['blur'] }],
      },
    ]"
    @confirm="onSave"
  >
    <template #body>
      <el-row>
        <el-col :span="12">
          <dl>
            <dt>企业名称：</dt>
            <dd>{{ noticeDetails.company_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>异常类型：</dt>
            <dd>{{ noticeDetails.warn_type_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>告警设备：</dt>
            <dd>{{ noticeDetails.device_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>告警时间：</dt>
            <dd>{{ noticeDetails.warn_time }}</dd>
          </dl>
        </el-col>
      </el-row>
      <div class="separator mt-2 mb-5"></div>
    </template>
    <template #content_form>
      <el-input v-model="formData.content" type="textarea" placeholder="请输入催办内容"></el-input>
    </template>
  </VbModal>
</template>