Browse Source
- Updated ModelItem interface to include createTime property. - Refactored index.vue to improve code readability and structure. - Enhanced Step1.vue to handle form submission and validation. - Simplified Step2.vue and Step3.vue for better data handling and user experience. - Removed Step5.vue as it was redundant. - Introduced new API models and methods for better data management. - Updated form schemas for steps to reflect new requirements and improve validation logic. - Improved styling and layout for better user interface consistency.pull/22/head
18 changed files with 8283 additions and 9213 deletions
File diff suppressed because it is too large
@ -0,0 +1,38 @@ |
|||||
|
export interface ModelCardItem { |
||||
|
id: number |
||||
|
name: string |
||||
|
status: number |
||||
|
algorithm: string |
||||
|
creator: string |
||||
|
createTime: string |
||||
|
} |
||||
|
|
||||
|
interface MovingWindows { |
||||
|
windowLength: number |
||||
|
samplingInterval: number |
||||
|
movingSpeed: number |
||||
|
} |
||||
|
|
||||
|
export interface ModelInfo { |
||||
|
id: number |
||||
|
btmState: string |
||||
|
unitID: string |
||||
|
createName: string |
||||
|
createTime: string |
||||
|
modelName: string |
||||
|
movingWindows: MovingWindows |
||||
|
steadyPoint: any[] |
||||
|
targetParameter: any |
||||
|
relationParameter: any[] |
||||
|
boundaryParameter: any[] |
||||
|
} |
||||
|
|
||||
|
export interface ModelQueryParams { |
||||
|
unitId: number |
||||
|
typeId: number |
||||
|
systemId: number |
||||
|
name?: string | null |
||||
|
status?: number | null |
||||
|
visible?: number | null |
||||
|
trash?: number | null |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
import { BasicFetchResult } from '/@/api/model/baseModel'; |
||||
|
|
||||
|
export interface OptionsItem { |
||||
|
id: number; |
||||
|
name: string; |
||||
|
} |
||||
|
|
||||
|
export interface AllOptionsItem { |
||||
|
units: OptionsItem[]; |
||||
|
types: OptionsItem[]; |
||||
|
systems: OptionsItem[]; |
||||
|
} |
||||
|
|
||||
|
export interface DemoOptionsItem { |
||||
|
name: string; |
||||
|
id: string; |
||||
|
} |
||||
|
|
||||
|
export interface selectParams { |
||||
|
id: number | string; |
||||
|
} |
||||
|
|
||||
|
export interface systemSelectParams { |
||||
|
unitId: number | null; |
||||
|
typeId: number | null; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @description: Request list return value |
||||
|
*/ |
||||
|
export type DemoOptionsGetResultModel = BasicFetchResult<DemoOptionsItem>; |
||||
@ -0,0 +1,33 @@ |
|||||
|
import type { ModelCardItem, ModelInfo, ModelQueryParams } from './model/models' |
||||
|
import { defHttp } from '@/utils/http/axios' |
||||
|
|
||||
|
enum Api { |
||||
|
MODEL_CARD_LIST = '/alert/model/card/list', |
||||
|
MODEL_INFO = '/alert/model/info/', |
||||
|
MODEL_SAVE = '/alert/model/', |
||||
|
MODEL_DATA = '/alert/model/data/', |
||||
|
CALCULATE_BACK = '/alert/model/data/calculate/', |
||||
|
OPTIMISTIC = '/alert/optimistic', |
||||
|
} |
||||
|
export function modelCardListApi(params?: ModelQueryParams) { |
||||
|
return defHttp.get<ModelCardItem[]>({ url: Api.MODEL_CARD_LIST, params }) |
||||
|
} |
||||
|
|
||||
|
export const modelInfoApi = (id: any) => defHttp.get<ModelInfo>({ url: Api.MODEL_INFO + id }) |
||||
|
|
||||
|
export function updateModelInfo(params: any) { |
||||
|
return defHttp.patch<boolean>({ url: Api.MODEL_INFO, params }) |
||||
|
} |
||||
|
|
||||
|
export function modelSaveApi(params?: any) { |
||||
|
return defHttp.post<number>({ url: Api.MODEL_SAVE, data: params }) |
||||
|
} |
||||
|
|
||||
|
export function modelDataApi(id: any, params: any) { |
||||
|
return defHttp.get<any>({ url: Api.MODEL_DATA + id, params }) |
||||
|
} |
||||
|
|
||||
|
export function calculateBackApi(id: any, params: any) { |
||||
|
return defHttp.post<boolean>({ url: Api.CALCULATE_BACK + id, params }) |
||||
|
} |
||||
|
export const getOptimisticApi = (params: any) => defHttp.get<any>({ url: Api.OPTIMISTIC, params }) |
||||
@ -0,0 +1,42 @@ |
|||||
|
import type { |
||||
|
AllOptionsItem, |
||||
|
DemoOptionsItem, |
||||
|
OptionsItem, |
||||
|
selectParams, |
||||
|
systemSelectParams, |
||||
|
} from './model/optionsModel' |
||||
|
import { defHttp } from '@/utils/http/axios' |
||||
|
|
||||
|
enum Api { |
||||
|
LIST = '/alert/select/list', |
||||
|
UNIT_LIST = '/alert/select/unit/options', |
||||
|
SYSTEM_LIST = '/alert/select/system/options', |
||||
|
POINT_LIST = '/alert/select/point/options', |
||||
|
} |
||||
|
|
||||
|
export const optionListApi = () => defHttp.get<AllOptionsItem>({ url: Api.LIST }) |
||||
|
|
||||
|
/** |
||||
|
* @description: 获取机组选项 |
||||
|
*/ |
||||
|
export function unitListApi(params?: selectParams) { |
||||
|
return defHttp.get<DemoOptionsItem[]>({ url: Api.UNIT_LIST, params }) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @description: 获取系统机组 |
||||
|
*/ |
||||
|
export function systemListApi(params?: selectParams) { |
||||
|
return defHttp.get<DemoOptionsItem[]>({ url: Api.UNIT_LIST, params }) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @description: 获取子系统选项 |
||||
|
*/ |
||||
|
export function subSystemListApi(params?: systemSelectParams) { |
||||
|
return defHttp.get<OptionsItem[]>({ url: Api.SYSTEM_LIST, params }) |
||||
|
} |
||||
|
|
||||
|
export function pointListApi(params?: string) { |
||||
|
return defHttp.get<OptionsItem[]>({ url: Api.POINT_LIST, params }) |
||||
|
} |
||||
@ -1,15 +1,16 @@ |
|||||
import { CSSProperties } from 'vue'; |
import type { CSSProperties } from 'vue' |
||||
|
|
||||
export interface ModelItem { |
export interface ModelItem { |
||||
id: number; |
id: number |
||||
icon: string; |
icon: string |
||||
title: string; |
title: string |
||||
value: number; |
value: number |
||||
total: number; |
total: number |
||||
color: string; |
color: string |
||||
status: string; |
status: string |
||||
creator: string; |
creator: string |
||||
description: string; |
createTime: string |
||||
headStyle: CSSProperties; |
description: string |
||||
bodyStyle: CSSProperties; |
headStyle: CSSProperties |
||||
|
bodyStyle: CSSProperties |
||||
} |
} |
||||
|
|||||
@ -1,190 +1,78 @@ |
|||||
<template> |
|
||||
<div class="step4"> |
|
||||
<a-alert message="选择系统测点作为模型输出。" show-icon /> |
|
||||
<a-descriptions :column="1" class="mt-5"> |
|
||||
<a-descriptions-item label="模型名称"> 测试模型 </a-descriptions-item> |
|
||||
<a-descriptions-item label="目标参数名称"> 送风机电流 </a-descriptions-item> |
|
||||
<a-descriptions-item label="滑动窗速度"> 600 </a-descriptions-item> |
|
||||
<a-descriptions-item label="滑动窗长度"> 120 </a-descriptions-item> |
|
||||
<a-descriptions-item label="取样间隔"> 30 </a-descriptions-item> |
|
||||
</a-descriptions> |
|
||||
<a-divider /> |
|
||||
<BasicForm @register="register"> |
|
||||
<template #remoteSearch="{ model, field }"> |
|
||||
<ApiSelect |
|
||||
:api="pointListApi" |
|
||||
showSearch |
|
||||
v-model:value="model[field]" |
|
||||
:filterOption="false" |
|
||||
resultField="list" |
|
||||
labelField="name" |
|
||||
valueField="id" |
|
||||
:params="searchParams" |
|
||||
@search="onSearch" |
|
||||
/> |
|
||||
</template> |
|
||||
<template #add="{ field }"> |
|
||||
<Button v-if="Number(field) === 0" @click="add">+</Button> |
|
||||
<Button v-if="field > 0" @click="del(field)">-</Button> |
|
||||
</template></BasicForm |
|
||||
> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script lang="ts"> |
<script lang="ts"> |
||||
import { defineComponent, ref, computed, unref, PropType, toRaw } from 'vue'; |
import { defineComponent } from 'vue' |
||||
import { BasicForm, useForm, ApiSelect } from '/@/components/Form'; |
import { Descriptions, Result } from 'ant-design-vue' |
||||
import { step4Schemas } from './data'; |
import { useGo } from '@/hooks/web/usePage' |
||||
import { Alert, Divider, Descriptions } from 'ant-design-vue'; |
|
||||
import { Button } from '/@/components/Button'; |
|
||||
import { pointListApi } from '/@/api/benchmark/select'; |
|
||||
import { modelSaveApi } from '/@/api/benchmark/models'; |
|
||||
import { type Recordable } from '@vben/types'; |
|
||||
import { useDebounceFn } from '@vueuse/core'; |
|
||||
|
|
||||
export default defineComponent({ |
export default defineComponent({ |
||||
components: { |
components: { |
||||
Button, |
[Result.name]: Result, |
||||
BasicForm, |
|
||||
ApiSelect, |
|
||||
[Alert.name]: Alert, |
|
||||
[Divider.name]: Divider, |
|
||||
[Descriptions.name]: Descriptions, |
[Descriptions.name]: Descriptions, |
||||
[Descriptions.Item.name]: Descriptions.Item, |
[Descriptions.Item.name]: Descriptions.Item, |
||||
}, |
}, |
||||
props: { |
props: { |
||||
beforeData: { |
modelId: { |
||||
type: Object as PropType<Record<string, any> | null | undefined>, |
|
||||
}, |
|
||||
systemId: { |
|
||||
type: Number, |
type: Number, |
||||
}, |
}, |
||||
}, |
}, |
||||
emits: ['next', 'prev'], |
emits: ['redo'], |
||||
setup(props, { emit }) { |
setup(props, { emit }) { |
||||
const [register, { appendSchemaByField, removeSchemaByField, validate, setProps }] = useForm({ |
const go = useGo() |
||||
labelWidth: 100, |
const goTrain = () => { |
||||
schemas: step4Schemas, |
go(`/model/train/${props.modelId}`) |
||||
actionColOptions: { |
|
||||
span: 14, |
|
||||
}, |
|
||||
resetButtonOptions: { |
|
||||
text: '上一步', |
|
||||
}, |
|
||||
submitButtonOptions: { |
|
||||
text: '创建模型', |
|
||||
}, |
|
||||
resetFunc: customResetFunc, |
|
||||
submitFunc: customSubmitFunc, |
|
||||
}); |
|
||||
const n = ref(1); |
|
||||
|
|
||||
function add() { |
|
||||
appendSchemaByField( |
|
||||
[ |
|
||||
{ |
|
||||
field: `point${n.value}`, |
|
||||
component: 'Input', |
|
||||
label: '边界参数' + n.value, |
|
||||
required: true, |
|
||||
slot: 'remoteSearch', |
|
||||
colProps: { |
|
||||
span: 16, |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
field: `${n.value}`, |
|
||||
component: 'Input', |
|
||||
label: ' ', |
|
||||
slot: 'add', |
|
||||
colProps: { |
|
||||
span: 2, |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
'', |
|
||||
); |
|
||||
n.value++; |
|
||||
} |
|
||||
|
|
||||
function del(field) { |
|
||||
removeSchemaByField([`point${field}`, `${field}`]); |
|
||||
n.value--; |
|
||||
} |
|
||||
|
|
||||
async function customResetFunc() { |
|
||||
emit('prev'); |
|
||||
} |
|
||||
|
|
||||
async function customSubmitFunc() { |
|
||||
try { |
|
||||
const values = await validate(); |
|
||||
const relationParameter = []; |
|
||||
for (const key in values) { |
|
||||
if (key.startsWith('point')) { |
|
||||
const point = values[key].split('|'); |
|
||||
const p = { |
|
||||
description: point[0], |
|
||||
targetPoint: point[1], |
|
||||
unit: point[2], |
|
||||
upperlimit: point[3], |
|
||||
lowerlimit: point[4], |
|
||||
}; |
|
||||
relationParameter.push(p); |
|
||||
} |
} |
||||
} |
|
||||
const systemId = props.systemId; |
|
||||
const modelInfo = toRaw(props.beforeData); |
|
||||
modelInfo['relationParameter'] = relationParameter; |
|
||||
console.log(modelInfo); |
|
||||
const model = { |
|
||||
systemId: systemId, |
|
||||
modelInfo: modelInfo, |
|
||||
}; |
|
||||
const modelId = await modelSaveApi(model); |
|
||||
setProps({ |
|
||||
submitButtonOptions: { |
|
||||
loading: true, |
|
||||
}, |
|
||||
}); |
|
||||
setTimeout(() => { |
|
||||
setProps({ |
|
||||
submitButtonOptions: { |
|
||||
loading: false, |
|
||||
}, |
|
||||
}); |
|
||||
emit('next', modelId); |
|
||||
}, 1500); |
|
||||
} catch (error) { |
|
||||
console.error(error); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const keyword = ref<string>(''); |
|
||||
const searchParams = computed<Recordable>(() => { |
|
||||
return { keyword: unref(keyword) }; |
|
||||
}); |
|
||||
|
|
||||
function onSearch(value: string) { |
|
||||
keyword.value = value; |
|
||||
} |
|
||||
|
|
||||
return { |
return { |
||||
register, |
redo: () => { |
||||
del, |
emit('redo') |
||||
add, |
|
||||
onSearch: useDebounceFn(onSearch, 300), |
|
||||
searchParams, |
|
||||
pointListApi, |
|
||||
handleReset: () => { |
|
||||
keyword.value = ''; |
|
||||
}, |
}, |
||||
}; |
goTrain, |
||||
|
} |
||||
}, |
}, |
||||
}); |
}) |
||||
</script> |
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="step4"> |
||||
|
<a-result status="success" title="新建成功" sub-title="可查看模型进行编辑"> |
||||
|
<template #extra> |
||||
|
<a-button type="primary" @click="redo"> |
||||
|
再建一个 |
||||
|
</a-button> |
||||
|
<a-button @click="goTrain"> |
||||
|
查看模型 |
||||
|
</a-button> |
||||
|
</template> |
||||
|
</a-result> |
||||
|
<div class="desc-wrap"> |
||||
|
<a-descriptions :column="1" class="mt-5"> |
||||
|
<a-descriptions-item label="模型名称"> |
||||
|
测试模型 |
||||
|
</a-descriptions-item> |
||||
|
<a-descriptions-item label="目标参数名称"> |
||||
|
送风机电流 |
||||
|
</a-descriptions-item> |
||||
|
<a-descriptions-item label="滑动窗速度"> |
||||
|
600 |
||||
|
</a-descriptions-item> |
||||
|
<a-descriptions-item label="滑动窗长度"> |
||||
|
120 |
||||
|
</a-descriptions-item> |
||||
|
<a-descriptions-item label="取样间隔"> |
||||
|
30 |
||||
|
</a-descriptions-item> |
||||
|
</a-descriptions> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
.step4 { |
.step4 { |
||||
width: 450px; |
width: 600px; |
||||
margin: 0 auto; |
margin: 0 auto; |
||||
} |
} |
||||
|
|
||||
|
.desc-wrap { |
||||
|
padding: 24px 40px; |
||||
|
margin-top: 24px; |
||||
|
background-color: @background-color-light; |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -1,62 +0,0 @@ |
|||||
<template> |
|
||||
<div class="step5"> |
|
||||
<a-result status="success" title="新建成功" sub-title="可查看模型进行编辑"> |
|
||||
<template #extra> |
|
||||
<a-button type="primary" @click="redo"> 再建一个 </a-button> |
|
||||
<a-button @click="goTrain"> 查看模型 </a-button> |
|
||||
</template> |
|
||||
</a-result> |
|
||||
<div class="desc-wrap"> |
|
||||
<a-descriptions :column="1" class="mt-5"> |
|
||||
<a-descriptions-item label="模型名称"> 测试模型 </a-descriptions-item> |
|
||||
<a-descriptions-item label="目标参数名称"> 送风机电流 </a-descriptions-item> |
|
||||
<a-descriptions-item label="滑动窗速度"> 600 </a-descriptions-item> |
|
||||
<a-descriptions-item label="滑动窗长度"> 120 </a-descriptions-item> |
|
||||
<a-descriptions-item label="取样间隔"> 30 </a-descriptions-item> |
|
||||
</a-descriptions> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script lang="ts"> |
|
||||
import { defineComponent } from 'vue'; |
|
||||
import { Result, Descriptions } from 'ant-design-vue'; |
|
||||
import { useGo } from '/@/hooks/web/usePage'; |
|
||||
|
|
||||
export default defineComponent({ |
|
||||
components: { |
|
||||
[Result.name]: Result, |
|
||||
[Descriptions.name]: Descriptions, |
|
||||
[Descriptions.Item.name]: Descriptions.Item, |
|
||||
}, |
|
||||
props: { |
|
||||
modelId: { |
|
||||
type: Number, |
|
||||
}, |
|
||||
}, |
|
||||
emits: ['redo'], |
|
||||
setup(props, { emit }) { |
|
||||
const go = useGo(); |
|
||||
const goTrain = () => { |
|
||||
go(`/model/train/${props.modelId}`); |
|
||||
}; |
|
||||
return { |
|
||||
redo: () => { |
|
||||
emit('redo'); |
|
||||
}, |
|
||||
goTrain, |
|
||||
}; |
|
||||
}, |
|
||||
}); |
|
||||
</script> |
|
||||
<style lang="less" scoped> |
|
||||
.step5 { |
|
||||
width: 600px; |
|
||||
margin: 0 auto; |
|
||||
} |
|
||||
|
|
||||
.desc-wrap { |
|
||||
margin-top: 24px; |
|
||||
padding: 24px 40px; |
|
||||
background-color: @background-color-light; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue