TBA_GXPT/ruoyi-ui/src/views/monitor/modelAlarm/index.vue

<template>
  <div class="app-container">
    <el-row justify="space-between">
      <el-col :span="12">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
          <el-form-item label="模型名称">
            <el-select v-model="queryParams.mdid" clearable filterable placeholder="请选择" style="width: 180px;">
              <el-option
                  v-for="dict in modelOptions"
                  :key="dict.mdid"
                  :label="dict.name"
                  :value="dict.mdid">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getAlarmData">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
        :data="alarmTableData"
        height="68vh"
        :cell-style="{ padding: '5px' }"
        :header-cell-style="{fontSize: '14px', height: heightAll * 0.01 + 'px' }"
        :row-style="{ fontSize: '1rem', textAlign:'center' }"
        border>
      <el-table-column align="center" width="200" prop="alertTime" label="报警时间"></el-table-column>
      <el-table-column align="center" width="130" prop="alertType" label="报警类型">
        <template #default="scope">
          <el-tag size="small" v-if="scope.row.alertType == '1'" type="danger">
            {{ alertTypeConversion(scope.row.alertType) }}
          </el-tag>
          <el-tag size="small" v-else-if="scope.row.alertType == '2'" type="warning">
            {{ alertTypeConversion(scope.row.alertType) }}
          </el-tag>
          <el-tag size="small" v-else type="info">{{ alertTypeConversion(scope.row.alertType) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="240" prop="modelName" label="模型名称"/>
      <el-table-column align="center" prop="alertContent" label="报警内容"/>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"/>
  </div>
</template>
<script setup>
import {onMounted} from 'vue';
import {getAlarmPageList} from "@/api/service/alarm.js";
import Pagination from "@/components/Pagination/index.vue";
import {getModelList2} from "@/api/register/regCom.js";

const queryParams = ref({
  pageNum: 1,
  pageSize: 20
})
const total = ref(0)
const alarmTableData = ref([])
const modelOptions = ref([])

/** 获取模型服务调用次数 */
function getAlarmData() {
  getAlarmPageList(queryParams.value).then(res => {
    alarmTableData.value = res.rows
    total.value = res.total
  })
}

function alertTypeConversion(alertType) {
  switch (alertType) {
    case '1':
      return '服务器异常'
    case '2':
      return '接口异常'
    case '3':
      return '返回信息异常'
    default:
      return ''
  }
}

function getModelList() {
  getModelList2().then(res => {
    modelOptions.value = res.data
  })
}

getModelList()
onMounted(() => {
  getAlarmData()
});
</script>
<style scoped lang="scss">
</style>