root
/
alert-front
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

fix:预警配置&下拉框表单适配

pull/118/head
xiaojinfei 4 days ago
parent
c7c1df30af
commit
8b1de79f87
6 changed files with 203 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/alert/run/instant/index.ts
  2. 34
      src/views/run/instant/index.vue
  3. 134
      src/views/run/instant/instant.data.ts
  4. 38
      src/views/warn/alarm/index.vue
  5. 42
      src/views/warn/config/UpdateModal.vue
  6. 51
      src/views/warn/config/index.vue

9
src/api/alert/run/instant/index.ts
View File

@ -5,6 +5,10 @@ export interface InstantPageReqVO extends PageParam {
mpName?: string
algorithmId?: number
}
export interface InstantReqVO{
mpName?: string
algorithmId?: number
}
export interface InstantVO {
mpId: number
@ -68,6 +72,11 @@ export interface InstantCalcReqVO {
export function getInstantPage(params: InstantPageReqVO) {
return defHttp.get({ url: '/alert/instant/page', params })
}
// 查询模型实例列表
export function getInstantList(params: InstantReqVO) {
return defHttp.get({ url: '/alert/instant/list', params })
}
// 查询模型实例详情
export function getInstant(id: number) {
return defHttp.get({ url: `/alert/instant/get?id=${id}` })

34
src/views/run/instant/index.vue
View File

@ -44,18 +44,7 @@ const [registerTable, { setProps,getForm, reload, getDataSource, updateTableData
}
},
formConfig: {
labelWidth: 70,
schemas: searchSchema,
showResetButton: false,
actionColOptions: {
span: 3,
style: {
marginLeft: '5px',
},
},
},
formConfig: {},
useSearchForm: true,
showTableSetting: true,
showIndexColumn: false,
@ -67,6 +56,27 @@ const [registerTable, { setProps,getForm, reload, getDataSource, updateTableData
},
})
onMounted(async () => {
// 等待表单配置加载完成
const searchSchema = await getSearchFormSchema(true,true,true,false,false,false) // 显示算法，不设置默认值
setProps({ formConfig: {
labelWidth: 70,
schemas: searchSchema,
showResetButton: false,
submitButtonOptions:{
preIcon: IconEnum.SEARCH,
},
actionColOptions: {
span: 3,
style: {
textAlign: 'left',
marginLeft: '5px',
}
} }})
// 加载表格数据
reload()
})
function handleDetail(record) {
console.log(record)
router.push(`/run/instant/detail?mpId=${record.mpId}`)

134
src/views/run/instant/instant.data.ts
View File

@ -6,7 +6,9 @@ import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { getModelVersionList } from '@/api/alert/run/model/index'
import { optionListApi, subSystemListApi } from '@/api/alert/model/select'
import type { systemSelectParams } from '@/api/alert/model/model/optionsModel'
import {setObjToUrlParams} from "@/utils";
import {getInstantList} from "@/api/alert/run/instant";
export const columns: BasicColumn[] = [
{
@ -203,29 +205,42 @@ export const columns: BasicColumn[] = [
* 获取搜索表单 schema（vben 标准版）
*/
const optionList = await optionListApi()
// 子系统 options 用普通变量维护（不是 ref）
const systemOptions = ref<any[]>([])
// 非“全部”时，提前加载一次
if (optionList.units?.length && optionList.types?.length) {
const param: systemSelectParams = {
unitId: optionList.units[0].id,
typeId: optionList.types[0].id,
}
systemOptions.value = await subSystemListApi(param)
console.log(systemOptions.value)
export interface selectParams {
unitId: number | null;
typeId: number | null;
systemId: number | null;
}
export function getSearchFormSchema(
export async function getSearchFormSchema(
showAlgorithm = true,
showAll = true,
showName=true,
isModal=false
isModal=false,
haveMpId = true,
haveWarn = true,
): Promise<FormSchema[]> {
if(showAll){
systemOptions.value=[];
}
const optionList = await optionListApi()
const mpList = ref<any[]>([])
// 子系统 options 用普通变量维护（不是 ref）
const systemOptions = ref<any[]>([])
if (!showAll && optionList.units?.length && optionList.types?.length) {
const param: systemSelectParams = {
unitId: optionList.units[0].id,
typeId: optionList.types[0].id,
}
systemOptions.value = await subSystemListApi(param);
//拿到该机组、该系统、该子系统的模型实例
const param1: selectParams = {
unit: optionList.units[0].id,
type: optionList.types[0].id,
system: systemOptions.value[1].id,
}
mpList.value = await getInstantList(param1)
}
console.log(systemOptions.value)
return [
{
label: '机组',
@ -233,7 +248,7 @@ if(showAll){
component: 'Select',
defaultValue: showAll ? null : optionList.units?.[0]?.id,
colProps: { span: isModal?8:4 },
componentProps: ({ formModel }) => ({
componentProps: ({ formModel, formActionType }) => ({
placeholder: '全部机组',
options: optionList.units?.map(unit => ({
value: unit.id,
@ -248,6 +263,25 @@ if(showAll){
unitId,
typeId: formModel.type,
})
// ✅ 给子系统赋默认值（第一个）
if (systemOptions.value.length) {
formActionType.setFieldsValue({system: systemOptions.value[1].id})
}
else{
formActionType.setFieldsValue({system: null})
}
// //拿到该机组、该系统、该子系统的模型实例
// mpList.value = await getInstantList({
// unit: unitId,
// type: formModel.type,
// system: formModel.system,
// })
// if (mpList.value.length) {
// formActionType.setFieldsValue({mpId: mpList.value[0].mpId})
// }
// else{
// formActionType.setFieldsValue({mpId: null})
// }
},
}),
},
@ -258,7 +292,7 @@ if(showAll){
component: 'Select',
defaultValue: showAll ? null : optionList.types?.[0]?.id,
colProps: { span: isModal?8:4 },
componentProps: ({ formModel }) => ({
componentProps: ({ formModel, formActionType }) => ({
placeholder: '全部系统',
options: optionList.types?.map(type => ({
value: type.id,
@ -273,6 +307,24 @@ if(showAll){
unitId: formModel.unit,
typeId,
})
if (!showAll&&systemOptions.value.length) {
formActionType.setFieldsValue({system: systemOptions.value[1].id})
}
else{
formActionType.setFieldsValue({system: null})
}
// //拿到该机组、该系统、该子系统的模型实例
// mpList.value = await getInstantList({
// unit: formModel.unit,
// type: typeId,
// system: formModel.system,
// })
// if (mpList.value.length) {
// formActionType.setFieldsValue({mpId: mpList.value[0].mpId})
// }
// else{
// formActionType.setFieldsValue({mpId: null})
// }
},
}),
},
@ -281,15 +333,33 @@ if(showAll){
label: '子系统',
field: 'system',
component: 'Select',
defaultValue: null, // ⚠️ 子系统永远不要给默认值
defaultValue: showAll? null:systemOptions.value[1].id, // ⚠️ 子系统永远不要给默认值
colProps: { span: isModal?8:4 },
componentProps: () => ({
componentProps: ({ formModel, formActionType }) => ({
placeholder: '全部子系统',
options: systemOptions.value.map(system => ({
options: systemOptions.value?.map(system => ({
value: system.id,
label: system.name,
})),
})},
})) || [],
onChange: async (system: number) => {
if (!system || !formModel.unit) {
mpList.value = []
return
}
mpList.value = await getInstantList({
unit: formModel.unit,
type: formModel.type,
system: system,
})
if (mpList.value.length) {
formModel.mpId=mpList.value[0].mpId
} else {
formModel.mpId=null
}
},
})
},
{
label: '模型实例名称',
field: 'mpName',
@ -316,6 +386,20 @@ if(showAll){
},
},
{
label: '模型实例',
field: 'mpId',
component: 'Select',
defaultValue: mpList.value.length!=0?mpList.value[0].mpId:null,
colProps: { span: isModal?8:4 },
show:haveMpId,
componentProps: () => ({
placeholder: '全部实例',
options: mpList.value.map(instant => ({
value: instant.mpId,
label: instant.mpName,
})),
})},
// 隐藏字段（用于后端透传）
{ label: '状态1', field: 'running', component: 'Input', show: false },
{ label: '状态2', field: 'runningLog', component: 'Input', show: false },

38
src/views/warn/alarm/index.vue
View File

@ -26,7 +26,6 @@ const { t } = useI18n()
const [registerUpdateModal, { openModal: openUpdateModal }] = useModal()
const [registerTrendModal, { openModal: openTrendModal }] = useModal()
const searchSchema = ref<FormSchema[]>(getSearchFormSchema(false,true)) // 不显示算法
const [registerTable, { setProps,getForm,reload, getDataSource,setTableData,updateTableDataRecord }] = useTable({
title: '集中告警列表',
api: getWarnPageReal,
@ -35,21 +34,7 @@ const [registerTable, { setProps,getForm,reload, getDataSource,setTableData,upda
columns,
//这个要写,不然不生效
useSearchForm: true,
formConfig: {
labelWidth: 80,
schemas: searchSchema,
showResetButton: false,
submitButtonOptions:{
preIcon: IconEnum.SEARCH,
},
actionColOptions: {
span: 2,
style: {
textAlign: 'left',
marginLeft: '10px',
},
},
},
formConfig: {},
showTableSetting: true,
showIndexColumn: false,
actionColumn: {
@ -59,6 +44,27 @@ const [registerTable, { setProps,getForm,reload, getDataSource,setTableData,upda
fixed: 'right',
}
})
onMounted(async () => {
// 等待表单配置加载完成
const searchSchema = await getSearchFormSchema(false, true,true,false,false,false) // 显示算法，不设置默认值
setProps({ formConfig: {
labelWidth: 80,
schemas: searchSchema,
showResetButton: false,
submitButtonOptions:{
preIcon: IconEnum.SEARCH,
},
actionColOptions: {
span: 3,
style: {
textAlign: 'left',
marginLeft: '10px',
}
} }})
// 加载表格数据
reload()
})
function handleUpdate(record: Recordable) {
openUpdateModal(true, { record, isUpdate: true })
}

42
src/views/warn/config/UpdateModal.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { ref, unref } from 'vue'
import { ref, unref,onMounted,nextTick } from 'vue'
import { updateWarnForm } from './warn.data'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
@ -15,17 +15,17 @@ const { t } = useI18n()
const { createMessage } = useMessage()
const isUpdate = ref(true)
//重新组合搜索表单
const queryForm = ref<FormSchema[]>(getSearchFormSchema(false, false,false,true)) // 不显示算法
// 新增的时候增加查询表单
const [registerQueryForm, {
setProps,
setFieldsValue: setQueryFields,
resetFields: resetQueryFields,
validate: validateQueryForm,
}] = useForm({
labelWidth: 80,
baseColProps: { span: 12 },
schemas: queryForm,
schemas: [],
showSubmitButton:false,
showActionButtonGroup: false,
actionColOptions: { span: 3 },
@ -48,33 +48,13 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
const res = await getWarn(data.record.warnId)
setFieldsValue({ ...res })
}
// // 获取下拉框的数据
// const versionData = await getModelVersionList({ modelId: data?.record.modelId })
// const versionList = [] as any
// // // 组名下拉框问题
// versionData.forEach((item) => {
// versionList.push({ label: item.version, value: item.id })
// })
// const calcGroupData = await getCalcGroupList({ unitId: data?.record.unitId })
// const calcGroupList = [] as any
// // // 组名下拉框问题
// calcGroupData.forEach((item) => {
// calcGroupList.push({ label: item.groupName, value: item.id })
// })
// // 将数据放入下拉框中
// updateSchema({
// field: 'modelVersionId',
// componentProps: {
// options: versionList,
// },
// })
// updateSchema({
// field: 'calcGroup',
// componentProps: {
// options: calcGroupList,
// },
// })
//如果是新增
else {
const queryForm = await getSearchFormSchema(false, false, false, true,true,true) // 不显示算法
// 等 Vue 渲染完成 form 实例
await nextTick()
await setProps({schemas: queryForm})
}
})
async function handleSubmit() {

51
src/views/warn/config/index.vue
View File

@ -22,35 +22,16 @@ const route = useRoute()
const { createMessage } = useMessage()
const { t } = useI18n()
//重新组合搜索表单
const searchSchema = ref<FormSchema[]>(getSearchFormSchema(false, true)) // 不显示算法
const searchForm = computed<FormSchema[]>(() => {
const schemas = [searchFormSchema]
schemas.push(...searchSchema.value)
return schemas
})
const [registerUpdateModal, { openModal: openUpdateModal }] = useModal()
const [registerTable, { getForm, reload, getDataSource, updateTableDataRecord }] = useTable({
const [registerTable, { setProps,getForm, reload, getDataSource, updateTableDataRecord }] = useTable({
title: '预警测点列表',
api: getWarnPage,
rowKey: 'warnId',
immediate: true,
columns,
formConfig: {
labelWidth: 80,
schemas: searchForm,
showResetButton: false,
submitButtonOptions:{
preIcon: IconEnum.SEARCH,
},
actionColOptions: {
span: 3,
style: {
textAlign: 'left',
marginLeft: '5px',
}
}
},
beforeFetch: (params) => ({
...params,
@ -68,6 +49,9 @@ const [registerTable, { getForm, reload, getDataSource, updateTableDataRecord }]
})
async function updateStatus(record) {
await updateWarn(record)
createMessage.success(t('common.saveSuccessText'))
@ -99,6 +83,31 @@ async function handleTrend(record: Recordable) {
onMounted(async () => {
// 等待表单配置加载完成
const searchSchema = await getSearchFormSchema(false, true,true,false,false,false) // 显示算法，不设置默认值
const searchForm = computed<FormSchema[]>(() => {
const schemas = [searchFormSchema]
schemas.push(...searchSchema)
return schemas
})
console.log(searchForm.value)
// 重新设置表格属性
setProps({ formConfig: {
labelWidth: 80,
schemas: searchForm.value,
showResetButton: false,
submitButtonOptions:{
preIcon: IconEnum.SEARCH,
},
actionColOptions: {
span: 4,
style: {
textAlign: 'left',
marginLeft: '5px',
}
} }})
// 加载表格数据
reload()
})
</script>

Write Preview
Loading…
Cancel
Save