houzhongjian
2 天以前 1674d9bb44595d6ce5d4b6f8fed092dfe47708b8
Merge remote-tracking branch 'origin/master'
已修改1个文件
已添加10个文件
1142 ■■■■■ 文件已修改
src/api/model/pre/accuracy/his.ts 19 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/model/pre/accuracy/rate.ts 50 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/model/pre/alarm/config.ts 55 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/model/pre/alarm/message.ts 28 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/model/pre/item/index.ts 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/model/pre/accuracy/MmItemAccuracyHisForm.vue 122 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/model/pre/accuracy/MmItemAccuracyRateForm.vue 176 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/model/pre/accuracy/index.vue 146 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/model/pre/alarm/MmPredictAlarmConfigForm.vue 223 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/model/pre/alarm/MmPredictAlarmMessageForm.vue 142 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/model/pre/alarm/index.vue 176 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/model/pre/accuracy/his.ts
对比新文件
@@ -0,0 +1,19 @@
import request from '@/config/axios'
export interface MmItemAccuracyHisVO {
  id: string
  rateId: string,
  inDeviation: number,
  inAccuracyRate: number,
  outDeviation: number,
  outAccuracyRate: number,
}
export interface MmItemAccuracyHisPageReqVO extends PageParam {
  rateId?: string
}
// 查询MmItemAccuracyHis列表
export const getMmItemAccuracyHisPage = (params: MmItemAccuracyHisPageReqVO) => {
  return request.get({ url: '/model/item/accuracy-his/page', params })
}
src/api/model/pre/accuracy/rate.ts
对比新文件
@@ -0,0 +1,50 @@
import request from '@/config/axios'
export interface MmItemAccuracyRateVO {
  id: string
  itemId: string,
  outId: string,
  sampleLength: number,
  valueType: number,
  beginTime: Date,
  inDeviation: number,
  inAccuracyRate: number,
  outDeviation: number,
  outAccuracyRate: number,
  isEnable: number,
}
export interface MmItemAccuracyRatePageReqVO extends PageParam {
  itemId?: string
}
// 查询MmItemAccuracyRate列表
export const getMmItemAccuracyRatePage = (params: MmItemAccuracyRatePageReqVO) => {
  return request.get({ url: '/model/item/accuracy-rate/page', params })
}
// 查询MmItemAccuracyRate详情
export const getMmItemAccuracyRate = (id: number) => {
  return request.get({ url: `/model/item/accuracy-rate/get/${id}`})
}
// 新增MmItemAccuracyRate
export const createMmItemAccuracyRate = (data: MmItemAccuracyRateVO) => {
  return request.post({ url: '/model/item/accuracy-rate/create', data })
}
// 修改MmItemAccuracyRate
export const updateMmItemAccuracyRate = (data: MmItemAccuracyRateVO) => {
  return request.put({ url: '/model/item/accuracy-rate/update', data })
}
// 删除MmItemAccuracyRate
export const deleteMmItemAccuracyRate = (id: number) => {
  return request.delete({ url: '/model/item/accuracy-rate/delete?id=' + id })
}
// 查询getItemAccuracyRateList详情
export const getItemAccuracyRateList = () => {
  return request.get({ url: `/model/item/accuracy-rate/list`})
}
src/api/model/pre/alarm/config.ts
对比新文件
@@ -0,0 +1,55 @@
import request from '@/config/axios'
export interface MmPredictAlarmConfigVO {
  id: string
  title: string,
  alarmObj: string,
  itemId: string,
  outId: string,
  compLength: number,
  upperLimit: number,
  lowerLimit: number,
  unit: string,
  coefficient: number,
  scheduleId: string,
  isEnable: number,
  creator: string,
  createTime: Date,
  updater: string,
  updateTime: Date,
}
export interface MmPredictAlarmConfigPageReqVO extends PageParam {
  title?: string
}
// 查询MmPredictAlarmConfig列表
export const getMmPredictAlarmConfigPage = (params: MmPredictAlarmConfigPageReqVO) => {
  return request.get({ url: '/model/pre/alarm-config/page', params })
}
// 查询MmPredictAlarmConfig详情
export const getMmPredictAlarmConfig = (id: number) => {
  return request.get({ url: `/model/pre/alarm-config/get/${id}`})
}
// 新增MmPredictAlarmConfig
export const createMmPredictAlarmConfig = (data: MmPredictAlarmConfigVO) => {
  return request.post({ url: '/model/pre/alarm-config/create', data })
}
// 修改MmPredictAlarmConfig
export const updateMmPredictAlarmConfig = (data: MmPredictAlarmConfigVO) => {
  return request.put({ url: '/model/pre/alarm-config/update', data })
}
// 删除MmPredictAlarmConfig
export const deleteMmPredictAlarmConfig = (id: number) => {
  return request.delete({ url: '/model/pre/alarm-config/delete?id=' + id })
}
// 查询getPredictAlarmConfigList详情
export const getPredictAlarmConfigList = () => {
  return request.get({ url: `/model/pre/alarm-config/list`})
}
src/api/model/pre/alarm/message.ts
对比新文件
@@ -0,0 +1,28 @@
import request from '@/config/axios'
export interface MmPredictAlarmMessageVO {
  id: string
  configId: string,
  title: string,
  content: string,
  alarmObj: string,
  pointId: string,
  itemId: string,
  outId: string,
  currentValue: number,
  outTime: Date,
  outValue: number,
  alarmType: string,
  alarmTime: Date,
  createTime: Date,
}
export interface MmPredictAlarmMessagePageReqVO extends PageParam {
  title?: string
}
// 查询MmPredictAlarmMessage列表
export const getMmPredictAlarmMessagePage = (params: MmPredictAlarmMessagePageReqVO) => {
  return request.get({ url: '/model/pre/alarm-message/page', params })
}
src/api/model/pre/item/index.ts
@@ -103,6 +103,11 @@
  return request.get({ url: `/model/pre/item/list`, params})
}
// 查询MmItemOutput列表
export const getMmItemOutputList = (params) => {
  return request.get({ url: `/model/pre/item-output/list/all`, params})
}
export const updateModel = (data: any) => {
  return request.upload({ url: '/model/pre/item/upload-model', data })
}
src/views/model/pre/accuracy/MmItemAccuracyHisForm.vue
对比新文件
@@ -0,0 +1,122 @@
<template>
  <el-drawer
    v-model="drawer"
    size="60%"
    title="历史详情"
    direction="rtl"
    :before-close="handleClose"
  >
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="精准误差" prop="inDeviation">
        <el-input
          v-model="queryParams.inDeviation"
          placeholder="请输入精准误差"
          clearable
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      row-key="id"
    >
      <el-table-column prop="inDeviation" label="精准误差"/>
      <el-table-column prop="inAccuracyRate" label="精准度"/>
      <el-table-column prop="outDeviation" label="不可信误差"/>
      <el-table-column prop="outAccuracyRate" label="不可信率"/>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.limit"
      v-model:page="queryParams.page"
      :total="total"
      @pagination="getList"
    />
  </el-drawer>
</template>
<script lang="ts" setup>
import * as MmItemAccuracyHis from '@/api/model/pre/accuracy/his'
defineOptions({name: 'ChartParam'})
const drawer = ref(false)
const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 字典表格数据
const queryParams = reactive({
  page: 1,
  limit: 10,
  rateId: undefined,
  inDeviation: undefined,
  inAccuracyRate: undefined,
  outDeviation: undefined,
  outAccuracyRate: undefined,
})
const queryFormRef = ref() // 搜索的表单
const getList = async () => {
  loading.value = true
  try {
    const data = await MmItemAccuracyHis.getMmItemAccuracyHisPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 打开弹窗 */
const open = async (rateId?: string) => {
  resetForm()
  drawer.value = true
  queryParams.rateId = rateId
  if (rateId) {
    getList()
  }
}
defineExpose({open}) // 提供 open 方法,用于打开弹窗
/** 重置表单 */
const resetForm = () => {
  queryParams.rateId = undefined
  queryParams.inDeviation = undefined
  queryParams.inAccuracyRate = undefined
  queryParams.outDeviation = undefined
  queryParams.outAccuracyRate = undefined
}
/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
const handleClose = (done: () => void) => {
  drawer.value = false
}
</script>
src/views/model/pre/accuracy/MmItemAccuracyRateForm.vue
对比新文件
@@ -0,0 +1,176 @@
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="预测项ID" prop="itemId">
            <el-input v-model="formData.itemId" placeholder="请输入预测项ID"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="输出ID" prop="outId">
            <el-input v-model="formData.outId" placeholder="请输入输出ID"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="取样长度" prop="sampleLength">
            <el-input-number v-model="formData.sampleLength" :min="1" clearable controls-position="right" style="width: 100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="值类型" prop="valueType">
            <el-input v-model="formData.valueType" placeholder="请输入值类型"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始统计时间" prop="beginTime">
            <el-input v-model="formData.beginTime" placeholder="请输入开始统计时间"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="精准误差" prop="inDeviation">
            <el-input v-model="formData.inDeviation" placeholder="请输入精准误差"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="精准度" prop="inAccuracyRate">
            <el-input v-model="formData.inAccuracyRate" placeholder="请输入精准度"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="不可信误差" prop="outDeviation">
            <el-input v-model="formData.outDeviation" placeholder="请输入不可信误差"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="不可信率" prop="outAccuracyRate">
            <el-input v-model="formData.outAccuracyRate" placeholder="请输入不可信率"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="isEnable">
            <el-select v-model="formData.isEnable" placeholder="请选择">
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as MmItemAccuracyRate from '@/api/model/pre/accuracy/rate'
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
defineOptions({name: 'DataMmItemAccuracyRateForm'})
const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const formData = ref({
  id: undefined,
  itemId: undefined,
  outId: undefined,
  sampleLength: undefined,
  valueType: undefined,
  beginTime: undefined,
  inDeviation: undefined,
  inAccuracyRate: undefined,
  outDeviation: undefined,
  outAccuracyRate: undefined,
  isEnable: undefined,
})
const formRules = reactive({
  itemId: [{required: true, message: '预测项ID不能为空', trigger: 'blur'}],
  outId: [{required: true, message: '输出ID不能为空', trigger: 'blur'}],
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时,设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await MmItemAccuracyRate.getMmItemAccuracyRate(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({open}) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as MmItemAccuracyRate.MmItemAccuracyRateVO
    if (formType.value === 'create') {
      await MmItemAccuracyRate.createMmItemAccuracyRate(data)
      message.success(t('common.createSuccess'))
    } else {
      await MmItemAccuracyRate.updateMmItemAccuracyRate(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    itemId: undefined,
    outId: undefined,
    sampleLength: undefined,
    valueType: undefined,
    beginTime: undefined,
    inDeviation: undefined,
    inAccuracyRate: undefined,
    outDeviation: undefined,
    outAccuracyRate: undefined,
    isEnable: undefined,
  }
  formRef.value?.resetFields()
}
</script>
src/views/model/pre/accuracy/index.vue
对比新文件
@@ -0,0 +1,146 @@
<template>
  <!-- 搜索 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['item:accuracy-rate:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="预测项ID" header-align="center" align="center" min-width="150" prop="itemId" fixed/>
      <el-table-column label="输出ID" header-align="center" align="center" min-width="150" prop="outId" />
      <el-table-column label="取样长度" header-align="center" align="center" min-width="100" prop="sampleLength" />
      <el-table-column label="值类型" header-align="center" align="center" min-width="50" prop="valueType" />
      <el-table-column label="开始统计时间" header-align="center" align="center" min-width="50" prop="beginTime" />
      <el-table-column label="精准误差" header-align="center" align="center" min-width="50" prop="inDeviation" />
      <el-table-column label="精准度" header-align="center" align="center" min-width="100" prop="inAccuracyRate" />
      <el-table-column label="不可信误差" header-align="center" align="center" min-width="100" prop="outDeviation" />
      <el-table-column label="不可信率" header-align="center" align="center" min-width="100" prop="outAccuracyRate" />
      <el-table-column label="是否启用" header-align="center" align="center" min-width="100" prop="isEnable" >
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COM_IS_INT" :value="scope.row.isEnable" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" header-align="center" align="center" min-width="100" prop="createTime" />
      <el-table-column label="操作" align="center" min-width="180" fixed="right">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['item:accuracy-rate:update']"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['item:accuracy-rate:delete']"
          >
            删除
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleView(scope.row.id)"
          >
            查看历史
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <!-- 表单弹窗:添加/修改 -->
  <MmItemAccuracyRateForm ref="formRef" @success="getList" />
  <MmItemAccuracyHis ref="MessageRef" />
</template>
<script lang="ts" setup>
import MmItemAccuracyRateForm from './MmItemAccuracyRateForm.vue'
import MmItemAccuracyHis from './MmItemAccuracyHisForm.vue'
import * as MmItemAccuracyRate from '@/api/model/pre/accuracy/rate'
import {DICT_TYPE} from "@/utils/dict";
defineOptions({name: 'DataMmItemAccuracyRate'})
const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const page = await MmItemAccuracyRate.getMmItemAccuracyRatePage(queryParams)
    list.value = page.list
    total.value = page.total
  } finally {
    loading.value = false
  }
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await MmItemAccuracyRate.deleteMmItemAccuracyRate(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {
  }
}
/** 查看历史按钮操作 */
const MessageRef = ref()
const handleView = (id?: string) => {
  MessageRef.value.open(id)
}
/** 初始化 **/
onMounted(async () => {
  await getList()
})
</script>
src/views/model/pre/alarm/MmPredictAlarmConfigForm.vue
对比新文件
@@ -0,0 +1,223 @@
<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="消息标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入消息标题"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监控对象" prop="alarmObj">
            <el-input v-model="formData.alarmObj" placeholder="请输入监控对象"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="预测项" prop="itemId">
            <el-select
              v-model="formData.itemId"
              filterable
              @change="handleChange(formData.itemId)"
              placeholder="请选择">
              <el-option
                v-for="(item, index) in predictItemList"
                :key="index"
                :label="item.itemname"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="输出" prop="outId">
            <el-select
              v-model="formData.outId"
              filterable
              placeholder="请选择">
              <el-option
                v-for="(item, index) in outPutList"
                :key="index"
                :label="item.tagname"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="比较长度" prop="compLength">
            <el-input-number v-model="formData.compLength" :min="1" clearable controls-position="right" style="width: 100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="formData.unit" placeholder="请输入单位"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="上限" prop="upperLimit">
            <el-input-number v-model="formData.upperLimit" :min="1" clearable controls-position="right" style="width: 100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下限" prop="lowerLimit">
            <el-input-number v-model="formData.lowerLimit" :min="1" clearable controls-position="right" style="width: 100%"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="转换系数" prop="coefficient">
            <el-input-number v-model="formData.coefficient" :min="1" clearable controls-position="right" style="width: 100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调度方案" prop="scheduleId">
            <el-input v-model="formData.scheduleId" placeholder="请输入调度方案"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="isEnable">
            <el-select v-model="formData.isEnable" placeholder="请选择">
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as MmPredictAlarmConfig from '@/api/model/pre/alarm/config'
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import * as MmPredictItem from '@/api/model/pre/item'
defineOptions({name: 'DataMmPredictAlarmConfigForm'})
const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
const formType = ref('') // 表单的类型:create - 新增;update - 修改
const predictItemList = ref([])
const outPutList = ref([])
const formData = ref({
  id: undefined,
  title: undefined,
  alarmObj: undefined,
  itemId: undefined,
  itemName: undefined,
  outId: undefined,
  compLength: undefined,
  upperLimit: undefined,
  lowerLimit: undefined,
  unit: undefined,
  coefficient: undefined,
  scheduleId: undefined,
  isEnable: undefined,
})
const formRules = reactive({
  title: [{required: true, message: '消息标题不能为空', trigger: 'blur'}],
  alarmObj: [{required: true, message: '监控对象不能为空', trigger: 'blur'}],
  itemId: [{required: true, message: '预测项ID不能为空', trigger: 'blur'}],
  outId: [{required: true, message: '输出ID不能为空', trigger: 'blur'}],
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 获取normal列表
  predictItemList.value = await MmPredictItem.getMmPredictItemList({
    itemtypename: 'NormalItem'
  })
  // 修改时,设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await MmPredictAlarmConfig.getMmPredictAlarmConfig(id)
      await handleChange(formData.value.itemId)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({open}) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as MmPredictAlarmConfig.MmPredictAlarmConfigVO
    if (formType.value === 'create') {
      await MmPredictAlarmConfig.createMmPredictAlarmConfig(data)
      message.success(t('common.createSuccess'))
    } else {
      await MmPredictAlarmConfig.updateMmPredictAlarmConfig(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
async function handleChange(itemid) {
  const queryParams = reactive({
    itemid: itemid,
  })
  outPutList.value = await MmPredictItem.getMmItemOutputList(queryParams)
}
/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    title: undefined,
    alarmObj: undefined,
    itemId: undefined,
    outId: undefined,
    compLength: 1,
    upperLimit: 1000000,
    lowerLimit: 1,
    unit: undefined,
    coefficient: 1,
    scheduleId: undefined,
    isEnable: undefined,
  }
  formRef.value?.resetFields()
}
</script>
src/views/model/pre/alarm/MmPredictAlarmMessageForm.vue
对比新文件
@@ -0,0 +1,142 @@
<template>
  <el-drawer
    v-model="drawer"
    size="60%"
    title="历史详情"
    direction="rtl"
    :before-close="handleClose"
  >
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="消息标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入消息标题"
          clearable
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="监控对象" prop="alarmObj">
        <el-input
          v-model="queryParams.alarmObj"
          placeholder="请输入监控对象"
          clearable
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="list"
      row-key="id"
    >
      <el-table-column prop="title" label="消息标题"/>
      <el-table-column prop="content" label="消息内容"/>
      <el-table-column prop="alarmObj" label="监控对象"/>
      <el-table-column prop="pointId" label="监控点位"/>
      <el-table-column prop="itemId" label="预测项"/>
      <el-table-column prop="outId" label="输出"/>
      <el-table-column prop="currentValue" label="当前值"/>
      <el-table-column prop="outTime" label="超出时间"/>
      <el-table-column prop="outValue" label="超出值"/>
      <el-table-column prop="alarmType" label="预警类型"/>
      <el-table-column prop="alarmTime" label="预警时间"/>
      <el-table-column prop="createTime" label="创建时间"/>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.limit"
      v-model:page="queryParams.page"
      :total="total"
      @pagination="getList"
    />
  </el-drawer>
</template>
<script lang="ts" setup>
import * as MmPredictAlarmMessage from '@/api/model/pre/alarm/message'
defineOptions({name: 'ChartParam'})
const drawer = ref(false)
const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 字典表格数据
const queryParams = reactive({
  page: 1,
  limit: 10,
  configId: undefined,
  title: undefined,
  content: undefined,
  alarmObj: undefined,
  pointId: undefined,
  itemId: undefined,
  outId: undefined,
  currentValue: undefined,
  outTime: undefined,
  outValue: undefined,
  alarmType: undefined,
  alarmTime: undefined,
  createTime: undefined,
})
const queryFormRef = ref() // 搜索的表单
const getList = async () => {
  loading.value = true
  try {
    const data = await MmPredictAlarmMessage.getMmPredictAlarmMessagePage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 打开弹窗 */
const open = async (configId?: string) => {
  resetForm()
  drawer.value = true
  queryParams.configId = configId
  if (configId) {
    getList()
  }
}
defineExpose({open}) // 提供 open 方法,用于打开弹窗
/** 重置表单 */
const resetForm = () => {
  queryParams.title = undefined
  queryParams.pointId = undefined
}
/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
const handleClose = (done: () => void) => {
  drawer.value = false
}
</script>
src/views/model/pre/alarm/index.vue
对比新文件
@@ -0,0 +1,176 @@
<template>
  <!-- 搜索 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" />
          重置
        </el-button>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['pre:alarm-config:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="消息标题" header-align="center" align="center" min-width="150" prop="title" fixed/>
      <el-table-column label="监控对象" header-align="center" align="center" min-width="150" prop="alarmObj" />
      <el-table-column label="预测项" header-align="center" align="center" min-width="150" prop="itemName" />
      <el-table-column label="输出" header-align="center" align="center" min-width="150" prop="outName" />
      <el-table-column label="比较长度" header-align="center" align="center" min-width="100" prop="compLength" />
      <el-table-column label="上限" header-align="center" align="center" min-width="50" prop="upperLimit" />
      <el-table-column label="下限" header-align="center" align="center" min-width="50" prop="lowerLimit" />
      <el-table-column label="单位" header-align="center" align="center" min-width="50" prop="unit" />
      <el-table-column label="转换系数" header-align="center" align="center" min-width="100" prop="coefficient" />
      <el-table-column label="是否启用" header-align="center" align="center" min-width="100" prop="isEnable" >
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.COM_IS_INT" :value="scope.row.isEnable" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="180" fixed="right">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['pre:alarm-config:update']"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['pre:alarm-config:delete']"
          >
            删除
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleView(scope.row.id)"
          >
            查看历史
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <!-- 表单弹窗:添加/修改 -->
  <MmPredictAlarmConfigForm ref="formRef" @success="getList" />
  <MmPredictAlarmMessage ref="MessageRef" />
</template>
<script lang="ts" setup>
import MmPredictAlarmConfigForm from './MmPredictAlarmConfigForm.vue'
import MmPredictAlarmMessage from './MmPredictAlarmMessageForm.vue'
import * as MmPredictAlarmConfig from '@/api/model/pre/alarm/config'
import {DICT_TYPE} from "@/utils/dict";
defineOptions({name: 'DataMmPredictAlarmConfig'})
  const message = useMessage() // 消息弹窗
  const {t} = useI18n() // 国际化
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    title: undefined,
  })
  const queryFormRef = ref() // 搜索的表单
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const page = await MmPredictAlarmConfig.getMmPredictAlarmConfigPage(queryParams)
      list.value = page.list
      total.value = page.total
    } finally {
      loading.value = false
    }
  }
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }
  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }
  /** 添加/修改操作 */
  const formRef = ref()
  const openForm = (type: string, id?: number) => {
    formRef.value.open(type, id)
  }
  /** 删除按钮操作 */
  const handleDelete = async (id: number) => {
    try {
      // 删除的二次确认
      await message.delConfirm()
      // 发起删除
      await MmPredictAlarmConfig.deleteMmPredictAlarmConfig(id)
      message.success(t('common.delSuccess'))
      // 刷新列表
      await getList()
    } catch {
    }
  }
  /** 查看历史按钮操作 */
  const MessageRef = ref()
  const handleView = (id?: string) => {
    MessageRef.value.open(id)
  }
  /** 初始化 **/
  onMounted(async () => {
    await getList()
  })
</script>