9 changed files with 392 additions and 16 deletions
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
@ -0,0 +1,188 @@ |
|||||
|
import moment from 'moment' |
||||
|
|
||||
|
import { ref } from 'vue' |
||||
|
import type { BasicColumn, FormSchema } from '@/components/Table' |
||||
|
import { DICT_TYPE, getDictOptions } from '@/utils/dict' |
||||
|
import { optionListApi, subSystemListApi } from '@/api/alert/model/select' |
||||
|
import type { systemSelectParams } from '@/api/alert/model/model/optionsModel' |
||||
|
|
||||
|
export const columns: BasicColumn[] = [ |
||||
|
{ |
||||
|
title: '编号', |
||||
|
dataIndex: 'id', |
||||
|
width: 80, |
||||
|
fixed: 'left', |
||||
|
}, |
||||
|
{ |
||||
|
title: '模型名称', |
||||
|
dataIndex: 'modelName', |
||||
|
width: 250, |
||||
|
className: 'instant', |
||||
|
slots: { customRender: 'detail' }, |
||||
|
fixed: 'left', |
||||
|
}, |
||||
|
{ |
||||
|
title: '算法', |
||||
|
dataIndex: 'Algorithm', |
||||
|
width: 200, |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
title: '模式覆盖率', |
||||
|
dataIndex: 'CoveredPercent', |
||||
|
width: 200, |
||||
|
}, |
||||
|
{ |
||||
|
title: '报警次数', |
||||
|
dataIndex: 'AlarmNumber', |
||||
|
width: 200, |
||||
|
}, |
||||
|
{ |
||||
|
title: '总报警时间(m)', |
||||
|
dataIndex: 'AlarmToatlMinutes', |
||||
|
width: 200, |
||||
|
}, |
||||
|
{ |
||||
|
title: '系统维度', |
||||
|
dataIndex: 'Dimension', |
||||
|
width: 200, |
||||
|
}, |
||||
|
{ |
||||
|
title: '计算耗时(s)', |
||||
|
dataIndex: 'CalcSeconds', |
||||
|
width: 200, |
||||
|
}, |
||||
|
{ |
||||
|
title: '状态', |
||||
|
dataIndex: 'status', |
||||
|
width: 100, |
||||
|
slots: { customRender: 'status' }, |
||||
|
fixed: 'right', |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
const optionList = await optionListApi() |
||||
|
|
||||
|
const systemOptions = ref<any>([]) |
||||
|
systemOptions.value = optionList.systems |
||||
|
export const searchFormSchema: FormSchema[] = [ |
||||
|
{ |
||||
|
label: '机组', |
||||
|
field: 'unit', |
||||
|
component: 'Select', |
||||
|
defaultValue: optionList.units[0].id || null, |
||||
|
colProps: { span: 4 }, |
||||
|
|
||||
|
componentProps: ({ formModel }) => { |
||||
|
return { |
||||
|
// xxxx props
|
||||
|
allowClear: false, |
||||
|
placeholder: '请选择机组', |
||||
|
options: optionList.units.map(unit => ({ value: unit.id, label: unit.name })), |
||||
|
onChange: async (e: any) => { |
||||
|
// const { reload } = tableAction
|
||||
|
// reload()
|
||||
|
// or
|
||||
|
console.log(e) |
||||
|
const param: systemSelectParams = { |
||||
|
unitId: e, |
||||
|
typeId: formModel.type, |
||||
|
} |
||||
|
systemOptions.value = await subSystemListApi(param) |
||||
|
formModel.system = systemOptions.value[0].id |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '系统', |
||||
|
field: 'type', |
||||
|
component: 'Select', |
||||
|
defaultValue: optionList.types[0].id || null, |
||||
|
colProps: { span: 4 }, |
||||
|
componentProps: ({ formModel }) => { |
||||
|
return { |
||||
|
allowClear: false, |
||||
|
placeholder: '请选择系统', |
||||
|
options: optionList.types.map(type => ({ value: type.id, label: type.name })), |
||||
|
onChange: async (e: any) => { |
||||
|
// const { reload } = tableAction
|
||||
|
// reload()
|
||||
|
// or
|
||||
|
console.log(e) |
||||
|
const param: systemSelectParams = { |
||||
|
unitId: formModel.unit, |
||||
|
typeId: e, |
||||
|
} |
||||
|
systemOptions.value = await subSystemListApi(param) |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '子系统', |
||||
|
field: 'system', |
||||
|
component: 'Select', |
||||
|
defaultValue: systemOptions.value[0].id || null, |
||||
|
colProps: { span: 4 }, |
||||
|
componentProps: () => { |
||||
|
return { |
||||
|
allowClear: false, |
||||
|
placeholder: '请选择子系统', |
||||
|
options: systemOptions.value.map(system => ({ value: system.id, label: system.name })), |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '模型名称', |
||||
|
field: 'modelName', |
||||
|
component: 'Input', |
||||
|
|
||||
|
defaultValue: '', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入模型名称', |
||||
|
}, |
||||
|
colProps: { span: 4 }, |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
export const calcFormSchemas: FormSchema[] = [ |
||||
|
{ |
||||
|
label: '回算时间', |
||||
|
field: 'time', |
||||
|
component: 'RangePicker', |
||||
|
componentProps: { |
||||
|
placeholder: ['开始时间', '结束时间'], |
||||
|
defaultValue: [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')], |
||||
|
valueFormat: 'YYYY-MM-DD HH:mm:ss', |
||||
|
showTime: { |
||||
|
defaultValue: [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')], |
||||
|
}, |
||||
|
|
||||
|
onChange: (e: any) => { |
||||
|
console.log(e) |
||||
|
}, |
||||
|
}, |
||||
|
required: true, |
||||
|
|
||||
|
colProps: { |
||||
|
span: 8, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '回算采样周期', |
||||
|
field: 'interval', |
||||
|
component: 'Select', |
||||
|
defaultValue: 60, |
||||
|
|
||||
|
componentProps: { |
||||
|
options: [{ value: 10, label: '10秒' }, { value: 60, label: '60秒' }, { value: 300, label: '300秒' }], |
||||
|
}, |
||||
|
required: true, |
||||
|
colProps: { |
||||
|
span: 4, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
] |
||||
@ -0,0 +1,185 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { Badge, Button, Divider, Switch } from 'ant-design-vue' |
||||
|
import { onMounted, ref } from 'vue' |
||||
|
import moment from 'moment' |
||||
|
import HistoryModal from '../../exa/config/HistoryModal.vue' |
||||
|
import { calcFormSchemas, columns, searchFormSchema } from './calc.data' |
||||
|
|
||||
|
import { BasicTable, TableAction, useTable } from '@/components/Table' |
||||
|
import { BasicForm, useForm } from '@/components/Form' |
||||
|
|
||||
|
import { getInstantCount, getInstantPage, updateInstant } from '@/api/alert/run/instant' |
||||
|
import { getExaNow } from '@/api/alert/exa' |
||||
|
import { useI18n } from '@/hooks/web/useI18n' |
||||
|
import { router } from '@/router' |
||||
|
import { useMessage } from '@/hooks/web/useMessage' |
||||
|
import { IconEnum } from '@/enums/appEnum' |
||||
|
import { useModal } from '@/components/Modal' |
||||
|
|
||||
|
defineOptions({ name: 'InstantCalc' }) |
||||
|
const { createMessage } = useMessage() |
||||
|
const { t } = useI18n() |
||||
|
|
||||
|
const [registerHistoryModal, { openModal: openHistoryModal }] = useModal() |
||||
|
const [registerCreateModal, { openModal: openCreateModal }] = useModal() |
||||
|
const [registerUpdateModal, { openModal: openUpdateModal }] = useModal() |
||||
|
|
||||
|
const [registerTable, { getForm, reload, getDataSource, updateTableDataRecord }] = useTable({ |
||||
|
title: '实例列表', |
||||
|
api: getInstantPage, |
||||
|
rowKey: 'id', |
||||
|
immediate: true, |
||||
|
columns, |
||||
|
formConfig: { |
||||
|
labelWidth: 70, |
||||
|
schemas: searchFormSchema, |
||||
|
showResetButton: false, |
||||
|
actionColOptions: { |
||||
|
span: 2, |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
useSearchForm: true, |
||||
|
showTableSetting: true, |
||||
|
showIndexColumn: false, |
||||
|
actionColumn: { |
||||
|
width: 100, |
||||
|
title: t('common.action'), |
||||
|
dataIndex: 'action', |
||||
|
fixed: 'right', |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
const isShow = ref<boolean>(false) |
||||
|
|
||||
|
function handleCreate() { |
||||
|
openCreateModal(true, { isUpdate: false }) |
||||
|
isShow.value = true |
||||
|
} |
||||
|
|
||||
|
function handleEdit(record: Recordable) { |
||||
|
openUpdateModal(true, { record, isUpdate: true }) |
||||
|
} |
||||
|
async function handleDelete(record: Recordable) { |
||||
|
await deleteRole(record.id) |
||||
|
createMessage.success(t('common.delSuccessText')) |
||||
|
reload() |
||||
|
} |
||||
|
|
||||
|
const itemName = ref<string>() |
||||
|
const legendName = ref<string[]>() |
||||
|
function handleHistory(record: Recordable) { |
||||
|
itemName.value = (JSON.parse(record.instantInfo)).model_state |
||||
|
legendName.value = [] |
||||
|
legendName.value.push(`${record.mpName}-${itemName.value}`) |
||||
|
openHistoryModal(true, { record }) |
||||
|
} |
||||
|
|
||||
|
function handleWarnConfig(record: Recordable) { |
||||
|
router.push(`/run/warnConfig?id=${record.id}`) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* BasicForm绑定注册; |
||||
|
*/ |
||||
|
const [registerForm] = useForm({ |
||||
|
// 注册表单列 |
||||
|
schemas: calcFormSchemas, |
||||
|
// 是否显示展开收起按钮,默认false |
||||
|
// showAdvancedButton: true, |
||||
|
// // // 超过指定行数折叠,默认3行 |
||||
|
// autoAdvancedLine: 1, |
||||
|
// // // 折叠时默认显示行数,默认1行 |
||||
|
// alwaysShowLines: 1, |
||||
|
layout: 'horizontal', |
||||
|
model: { time: [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')] }, |
||||
|
fieldMapToTime: [ |
||||
|
// data为时间组件在表单内的字段,startTime,endTime为转化后的开始时间于结束时间 |
||||
|
['time', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss'], |
||||
|
], |
||||
|
actionColOptions: { span: 2 }, |
||||
|
showSubmitButton: false, |
||||
|
showResetButton: false, |
||||
|
}) |
||||
|
|
||||
|
/** |
||||
|
* 点击提交按钮的value值----改为导出按钮 |
||||
|
* @param values |
||||
|
*/ |
||||
|
function handleSubmit(values: any) { |
||||
|
console.log('提交按钮数据::::', values) |
||||
|
} |
||||
|
// 回算 |
||||
|
function handleCalc(values: any) { |
||||
|
console.log('提交按钮数据::::', values) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div> |
||||
|
<BasicTable @register="registerTable"> |
||||
|
<template #form-formFooter> |
||||
|
<!-- <a-button v-auth="['run:instant:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
||||
|
{{ t('action.create') }} |
||||
|
</a-button> --> |
||||
|
<Divider orientation="left"> |
||||
|
回算 |
||||
|
</Divider> |
||||
|
<!-- 自定义表单 --> |
||||
|
<BasicForm @register="registerForm"> |
||||
|
<template #advanceBefore> |
||||
|
<a-button v-auth="['run:instant:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate"> |
||||
|
{{ t('action.create') }} |
||||
|
</a-button> |
||||
|
</template> |
||||
|
</BasicForm> |
||||
|
</template> |
||||
|
|
||||
|
<!-- 统计量点击跳转历史曲线 --> |
||||
|
<template #history="{ record }"> |
||||
|
<a @click="handleHistory(record)"> |
||||
|
{{ record.pointSte }} |
||||
|
</a> |
||||
|
<!-- <SlidersOutlined class="click-status" /> --> |
||||
|
</template> |
||||
|
|
||||
|
<template #bodyCell="{ column, record }"> |
||||
|
<template v-if="column.key === 'action'"> |
||||
|
<TableAction |
||||
|
:actions="[ |
||||
|
{ icon: IconEnum.BACK_CALC, label: t('action.backCalc'), onClick: handleWarnConfig.bind(null, record) }, |
||||
|
]" |
||||
|
/> |
||||
|
</template> |
||||
|
</template> |
||||
|
</BasicTable> |
||||
|
<HistoryModal :item-name="itemName" :legend-name="legendName" @register="registerHistoryModal" /> |
||||
|
<CreateModal :item-name="itemName" :legend-name="legendName" @register="registerCreateModal" @success="reload" /> |
||||
|
<UpdateModal @register="registerUpdateModal" @success="reload" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
:deep(.instant) { |
||||
|
font-weight: bold; |
||||
|
color: #0B55A4 |
||||
|
} |
||||
|
|
||||
|
:deep(.alarm .ant-badge-status-dot) { |
||||
|
animation: flash 1s linear infinite; |
||||
|
} |
||||
|
|
||||
|
@keyframes flash { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.runningStatus { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue