5 changed files with 80 additions and 387 deletions
@ -1,200 +0,0 @@ |
|||||
<script lang="ts" setup> |
|
||||
import { onMounted, reactive, ref } from 'vue' |
|
||||
import type { Dayjs } from 'dayjs' |
|
||||
import moment from 'moment' |
|
||||
import { Card, Descriptions, DescriptionsItem, Form, FormItem, RangePicker, Space, Switch, message } from 'ant-design-vue' |
|
||||
import { mount } from 'sortablejs' |
|
||||
import { number } from 'vue-types' |
|
||||
import { useRoute } from 'vue-router' |
|
||||
import HistoryLine from '../../exa/HistoryLine.vue' |
|
||||
import { detailColumns, instantForm } from './instant.data' |
|
||||
import { getExaHistorys } from '@/api/alert/exa' |
|
||||
import { useModal } from '@/components/Modal' |
|
||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|
||||
import { getInstant, getInstantChart, getInstantPage, getInstantPoint } from '@/api/alert/run/instant' |
|
||||
import { useI18n } from '@/hooks/web/useI18n' |
|
||||
import { router } from '@/router' |
|
||||
import { BasicForm, useForm } from '@/components/Form' |
|
||||
import PropsPanel from '@/components/FormDesign/src/components/VFormDesign/modules/PropsPanel.vue' |
|
||||
import echarts from '@/utils/lib/echarts' |
|
||||
|
|
||||
defineOptions({ name: 'InstantDetail' }) |
|
||||
|
|
||||
const route = useRoute() |
|
||||
|
|
||||
// const props = defineProps({ |
|
||||
// id: { |
|
||||
// type: Number, |
|
||||
// default: null, |
|
||||
// }, |
|
||||
// }) |
|
||||
const { t } = useI18n() |
|
||||
const loadingBasic = ref<boolean>(false) |
|
||||
const loadingChart = ref<boolean>(false) |
|
||||
|
|
||||
const basicInfo = ref<any>({}) |
|
||||
const modelInfo = ref<any>({}) |
|
||||
const pointInfo = ref<any>({}) |
|
||||
const pointList = ref<any>([]) |
|
||||
const historyList = ref<any>([]) |
|
||||
const [registerForm, { getFieldsValue, setProps }] = useForm({ |
|
||||
labelWidth: 100, |
|
||||
// baseColProps: { span: 24 }, |
|
||||
schemas: instantForm, |
|
||||
showResetButton: false, |
|
||||
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, |
|
||||
style:{ |
|
||||
marginLeft:'5px' |
|
||||
}}, |
|
||||
}) |
|
||||
|
|
||||
const instantId = ref<any>(route.query.mpId) // 获取URL中的query参数 |
|
||||
|
|
||||
onMounted(async () => { |
|
||||
loadingBasic.value = true |
|
||||
basicInfo.value = await getInstant(instantId.value) |
|
||||
loadingBasic.value = false |
|
||||
|
|
||||
modelInfo.value = JSON.parse(basicInfo.value.modelInfo) |
|
||||
pointInfo.value = modelInfo.value.pointInfo |
|
||||
console.log(modelInfo.value) |
|
||||
pointList.value = await getInstantPoint(instantId.value) |
|
||||
getChartsData() |
|
||||
}) |
|
||||
|
|
||||
function handleSubmitR() { |
|
||||
getChartsData() |
|
||||
} |
|
||||
async function getChartsData() { |
|
||||
setProps({ |
|
||||
submitButtonOptions: { |
|
||||
loading: true, |
|
||||
}, |
|
||||
}) |
|
||||
|
|
||||
loadingChart.value = true |
|
||||
console.log(getFieldsValue()) |
|
||||
const instantForm = getFieldsValue() |
|
||||
|
|
||||
historyList.value = await getInstantChart({ ...{ id: instantId.value }, ...instantForm }) |
|
||||
echarts.connect('async') |
|
||||
|
|
||||
loadingChart.value = false |
|
||||
setProps({ |
|
||||
submitButtonOptions: { |
|
||||
loading: false, |
|
||||
}, |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const [registerTable] = useTable({ |
|
||||
title: '测点列表', |
|
||||
size: 'small', |
|
||||
dataSource: pointList, |
|
||||
columns: detailColumns, |
|
||||
useSearchForm: false, |
|
||||
showTableSetting: true, |
|
||||
showIndexColumn: false, |
|
||||
actionColumn: { |
|
||||
width: 140, |
|
||||
title: t('common.action'), |
|
||||
dataIndex: 'action', |
|
||||
fixed: 'right', |
|
||||
}, |
|
||||
}) |
|
||||
|
|
||||
function handleDetail(record) { |
|
||||
console.log(record) |
|
||||
router.push('/run/instant/detail') |
|
||||
} |
|
||||
|
|
||||
|
|
||||
function handleFaultConfig(field) { |
|
||||
console.log(field) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<div> |
|
||||
<Card :loading="loadingBasic"> |
|
||||
<Descriptions size="small" title="模型基本信息" bordered :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"> |
|
||||
<DescriptionsItem label="实例名称" :span="4"> |
|
||||
{{ basicInfo.mpName }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="创建人"> |
|
||||
{{ basicInfo.createName }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="创建时间"> |
|
||||
{{ moment(basicInfo.createTime).format("YYYY-MM-DD HH:mm:ss") }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="最近修改人"> |
|
||||
{{ basicInfo.updateName }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="最近修改时间"> |
|
||||
{{ moment(basicInfo.updateTime).format("YYYY-MM-DD HH:mm:ss") }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="算法"> |
|
||||
{{ basicInfo.algorithmShortname }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="训练采样间隔"> |
|
||||
{{ modelInfo.sampling }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="参数个数"> |
|
||||
{{ pointInfo.length }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="最小主元贡献率"> |
|
||||
{{ modelInfo.rate }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="主元个数"> |
|
||||
{{ modelInfo.principal }} |
|
||||
</DescriptionsItem> |
|
||||
<DescriptionsItem label="模型精度"> |
|
||||
{{ modelInfo.precision }} |
|
||||
</DescriptionsItem> |
|
||||
</Descriptions> |
|
||||
</Card> |
|
||||
<Card> |
|
||||
<BasicTable @register="registerTable"> |
|
||||
<template #detail="{ record }"> |
|
||||
<a class="click-status" @click="handleDetail(record)"> |
|
||||
{{ record.mpName }} |
|
||||
</a> |
|
||||
<!-- <SlidersOutlined class="click-status" /> --> |
|
||||
</template> |
|
||||
</BasicTable> |
|
||||
</Card> |
|
||||
<Card> |
|
||||
<BasicForm @register="registerForm" @submit="handleSubmitR"> |
|
||||
<!-- 添加button的插槽 --> |
|
||||
<template #configButton="{ field }"> |
|
||||
<a-button @click="handleFaultConfig(field)"> |
|
||||
故障配置 |
|
||||
</a-button> |
|
||||
</template> |
|
||||
</BasicForm> |
|
||||
</Card> |
|
||||
<Card :loading="loadingChart"> |
|
||||
<div> |
|
||||
<div v-for="(item, index) in historyList" :key="index"> |
|
||||
<div style="border:1px solid #ccc"> |
|
||||
<HistoryLine :is-async="index !== 0" :title="item.title" :data="item.seriesData" :name="item.name" height="250px" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Card> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<style lang="less" scoped> |
|
||||
:deep(.ant-table-body){ |
|
||||
height:100% !important; |
|
||||
max-height:100% !important |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue