UI3/src/views/examApproval/reptNotice.vue

<script setup lang="ts">
import { ref } from "vue"
import configs from "@/core/config/Index"
import router from "@/router"
import Rs from "@/core/services/RequestService"
import moment from "moment"
const table = ref()
const cols = ref([
  {
    name: "序号",
    field: configs.TABLE_INDEX_FIELD,
    width: 60,
  },
  {
    name: "区域",
    field: "org_name",
  },
  {
    name: "企业名称",
    field: "company_name",
  },
  {
    name: "监测类型",
    field: "monitoring_type_name",
  },
  {
    name: "通知类型",
    field: "notice_type_name",
  },
  {
    name: "通知时间",
    field: "notice_time",
  },
  {
    name: "状态",
    field: "state",
  },
  {
    name: "操作",
    field: "action",
    width: 160,
  },
])
const size = ref<any>("default")
const dySearchSelectStyle = { width: "160px" }
const companyName = ref("")
const orgId = ref<string | null>(null)
const monitoringType = ref("")
const state = ref("")
const type = ref("")
const currentDate = ref<Date>(new Date())
const queryParams = ref({
  date: moment(currentDate.value).format("YYYYMMDD"),
})

const jump = function (v: any) {
  console.log("jump", v)
  router.push({
    path: "/goLineData/oilFumeConcentration",
    query: {
      comName: v.company_name,
      company_id: v.company_id,
      back: 1,
    },
  })
}

function query() {
  const params = {
    org_id: orgId.value,
    company_name: companyName.value,
    monitoring_type: monitoringType.value,
    state: state.value,
    type: type.value,
    date: moment(currentDate.value).format("YYYYMMDD"),
  }

  const keys = Object.keys(params)
  keys.forEach((key) => {
    if (params[key] == "") {
      delete params[key]
    }
  })
  queryParams.value = params
}
function reset() {
  companyName.value = ""
  orgId.value = "0"
  monitoringType.value = ""
  state.value = ""
  type.value = ""
  currentDate.value = new Date()
  query()
}
const modal = ref<any>()
const operationType = ref<"R" | "N">("R")

const modalTitle = ref("")

const details = ref<any>({})
const reply = function (row: any) {
  operationType.value = "R"
  modalTitle.value = "告警通知"
  getDetail(row)
}
const notity = function (row: any) {
  operationType.value = "N"
  if (row.type == 0) {
    modalTitle.value = "告警通知"
  } else if (row.type == 1) {
    modalTitle.value = "清洗通知"
  }
  getDetail(row)
}

function getDetail(row: any) {
  Rs.post(`sys/notice/getNoticeDetail`, { data: row.id }).then((res) => {
    details.value = Object.assign({}, res.data)
    details.value.clear_date = moment(res.data.clear_date, "YYYYMMDD").format("YYYY-MM-DD")
    modal.value.show()
  })
}
</script>

<template>
  <VbDataTable
    ref="table"
    :header="cols"
    url="sys/notice/selectForPage"
    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="商户名称">
          <el-input class="" style="width: 180px" v-model="companyName" placeholder="请输入商户名称" :size="size" />
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="区域">
          <OrgSelectTree v-model:value="orgId" style="width: 180px"></OrgSelectTree>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="通知类型">
          <el-select v-model="type" :style="dySearchSelectStyle" clearable placeholder="请选择通知类型">
            <el-option value="0" label="告警通知"></el-option>
            <el-option value="1" label="清洗通知"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="状态">
          <el-select v-model="state" :style="dySearchSelectStyle" clearable placeholder="请选择状态">
            <el-option value="0" label="未回复"></el-option>
            <el-option value="1" label="已回复"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="时间">
          <el-date-picker
            v-model="currentDate"
            type="date"
            placeholder="请选择时间"
            :size="size"
            :style="dySearchSelectStyle"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item class="mb-0 me-5 align-items-center" label="监测类型">
          <DySelect
            v-model="monitoringType"
            :url="'sys/dict/getCompanyMonitoringType'"
            :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 #state="{ row }">
      <span class="badge" :class="`badge-${row.state == 0 ? 'primary' : row.state == 1 ? 'success' : 'danger'}`">
        {{ row["state"] == 0 ? "未回复" : "已回复" }}
      </span>
    </template>
    <template #notice_time="{ row }">
      {{ moment(row["notice_time"], "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") }}
    </template>
    <template #action="{ row }">
      <span v-if="row.state == 1" class="table-action" @click="reply(row)">查看回复</span>
      <span class="table-action" @click="notity(row)">查看通知</span>
    </template>
  </VbDataTable>
  <VbModal
    v-model:modal="modal"
    :title="modalTitle"
    :confirm-btn="false"
    close-btn-class="btn btn-primary"
    :modal-class="`modal-${operationType == 'R' ? 'md' : 'lg'}`"
  >
    <template #body>
      <el-row v-if="operationType == 'R' && details.type == 1">
        <el-col :span="12">
          <dl>
            <dt>是否清洗：</dt>
            <dd>{{ details.is_clear ? "已清洗" : "未清洗" }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>清洗时间：</dt>
            <dd>{{ details.clear_date }}</dd>
          </dl>
        </el-col>
        <el-col :span="24">
          <dl>
            <dt>备注：</dt>
            <dd>{{ details.remark }}</dd>
          </dl>
        </el-col>
      </el-row>
      <el-row v-if="operationType == 'R' && details.type == 0">
        <el-col :span="23">
          <dl>
            <dt>设备名称：</dt>
            <dd>{{ details.device_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="24">
          <dl>
            <dt>异常类型：</dt>
            <dd>{{ details.warn_type_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="24">
          <dl>
            <dt>异常原因：</dt>
            <dd>{{ details.remark }}</dd>
          </dl>
        </el-col>
        <el-col :span="24">
          <dl>
            <dt>告警原因：</dt>
            <dd>{{ details.content }}</dd>
          </dl>
        </el-col>
      </el-row>

      <el-row v-if="operationType == 'N' && details.type == 1">
        <el-col :span="12">
          <dl>
            <dt>企业名称：</dt>
            <dd>{{ details.company_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>清洗周期(天)：</dt>
            <dd>{{ details.clean_cycle_day }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>设施名称：</dt>
            <dd>{{ details.device_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>清洗周期(小时)：</dt>
            <dd>{{ details.clean_cycle_hour }}</dd>
          </dl>
        </el-col>

        <el-col :span="12">
          <dl>
            <dt>是否完成清洗：</dt>
            <dd>{{ details.is_clear ? "已清洗" : "未清洗" }}</dd>
          </dl>
        </el-col>
      </el-row>
      <el-row v-if="operationType == 'N' && details.type == 0">
        <el-col :span="12">
          <dl>
            <dt>企业名称：</dt>
            <dd>{{ details.company_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>异常类型：</dt>
            <dd>{{ details.warn_type_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>告警设备：</dt>
            <dd>{{ details.device_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>告警时间：</dt>
            <dd>{{ details.warn_time }}</dd>
          </dl>
        </el-col>
        <el-col :span="24">
          <dl>
            <dt>通知内容：</dt>
            <dd>{{ details.content }}</dd>
          </dl>
        </el-col>
      </el-row>
      <div v-if="operationType == 'N'" class="separator mt-2 mb-5"></div>
      <el-row v-if="operationType == 'N'">
        <el-col :span="12">
          <dl>
            <dt>部门：</dt>
            <dd>{{ details.org_name }}</dd>
          </dl>
        </el-col>
        <el-col :span="12">
          <dl>
            <dt>通知人：</dt>
            <dd>{{ details.notifier }}</dd>
          </dl>
        </el-col>
      </el-row>
    </template>
  </VbModal>
</template>