|
|
|
@ -1,10 +1,10 @@ |
|
|
|
<script lang="ts"> |
|
|
|
import type { ComponentPublicInstance } from 'vue' |
|
|
|
import type { Dayjs } from 'dayjs' |
|
|
|
import { debounce } from 'lodash-es' |
|
|
|
import dayjs from 'dayjs' |
|
|
|
import { computed, defineComponent, onMounted, ref, toRaw, watch } from 'vue' |
|
|
|
import { useRoute } from 'vue-router' |
|
|
|
import type { ComponentPublicInstance } from "vue"; |
|
|
|
import type { Dayjs } from "dayjs"; |
|
|
|
import { debounce } from "lodash-es"; |
|
|
|
import dayjs from "dayjs"; |
|
|
|
import { computed, defineComponent, onMounted, ref, toRaw, watch } from "vue"; |
|
|
|
import { useRoute } from "vue-router"; |
|
|
|
import { |
|
|
|
Button, |
|
|
|
Card, |
|
|
|
@ -23,22 +23,22 @@ import { |
|
|
|
Steps, |
|
|
|
Tabs, |
|
|
|
Transfer, |
|
|
|
} from 'ant-design-vue' |
|
|
|
import VueECharts from 'vue-echarts' |
|
|
|
import { pointTableSchema, sampleInfoTableSchema } from './data' |
|
|
|
import { BasicTable, useTable } from '@/components/Table' |
|
|
|
import { PageWrapper } from '@/components/Page' |
|
|
|
} from "ant-design-vue"; |
|
|
|
import VueECharts from "vue-echarts"; |
|
|
|
import { pointTableSchema, sampleInfoTableSchema } from "./data"; |
|
|
|
import { BasicTable, useTable } from "@/components/Table"; |
|
|
|
import { PageWrapper } from "@/components/Page"; |
|
|
|
import { |
|
|
|
bottomModelApi, |
|
|
|
modelInfoApi, |
|
|
|
testModelApi, |
|
|
|
trainModelApi, |
|
|
|
updateModelInfo, |
|
|
|
} from '@/api/alert/model/models' |
|
|
|
import { getExaHistorys } from '@/api/alert/exa/index' |
|
|
|
import { useECharts } from '@/hooks/web/useECharts' |
|
|
|
import { useMessage } from '@/hooks/web/useMessage' |
|
|
|
import { pointListApi } from '@/api/alert/model/select' |
|
|
|
} from "@/api/alert/model/models"; |
|
|
|
import { getExaHistorys } from "@/api/alert/exa/index"; |
|
|
|
import { useECharts } from "@/hooks/web/useECharts"; |
|
|
|
import { useMessage } from "@/hooks/web/useMessage"; |
|
|
|
import { pointListApi } from "@/api/alert/model/select"; |
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
components: { |
|
|
|
@ -67,152 +67,151 @@ export default defineComponent({ |
|
|
|
ACol: Col, |
|
|
|
}, |
|
|
|
setup() { |
|
|
|
const { createMessage } = useMessage() |
|
|
|
const route = useRoute() |
|
|
|
const id = route.params.id |
|
|
|
const model = ref(null) |
|
|
|
const brushActivated = ref<Set<number>>(new Set()) |
|
|
|
const spinning = ref(false) |
|
|
|
let trainTimeCopy = '' |
|
|
|
const { createMessage } = useMessage(); |
|
|
|
const route = useRoute(); |
|
|
|
const id = route.params.id; |
|
|
|
const model = ref(null); |
|
|
|
const brushActivated = ref<Set<number>>(new Set()); |
|
|
|
const spinning = ref(false); |
|
|
|
let trainTimeCopy = ""; |
|
|
|
const fetchModelInfo = async () => { |
|
|
|
const modelInfo = await modelInfoApi(id) |
|
|
|
model.value = modelInfo |
|
|
|
trainTimeCopy = JSON.stringify(model.value.trainTime) |
|
|
|
getHistory() |
|
|
|
} |
|
|
|
const modelInfo = await modelInfoApi(id); |
|
|
|
model.value = modelInfo; |
|
|
|
trainTimeCopy = JSON.stringify(model.value.trainTime); |
|
|
|
getHistory(); |
|
|
|
}; |
|
|
|
|
|
|
|
const pointData = computed(() => model.value?.pointInfo || []) |
|
|
|
const pointData = computed(() => model.value?.pointInfo || []); |
|
|
|
const [pointTable] = useTable({ |
|
|
|
columns: pointTableSchema, |
|
|
|
pagination: true, |
|
|
|
dataSource: pointData, |
|
|
|
scroll: { y: 300 }, |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
const trainTime = computed(() => model.value?.trainTime || []) |
|
|
|
const trainTime = computed(() => model.value?.trainTime || []); |
|
|
|
const [trainTimeTable] = useTable({ |
|
|
|
columns: sampleInfoTableSchema, |
|
|
|
dataSource: trainTime, |
|
|
|
scroll: { y: 300 }, |
|
|
|
}) |
|
|
|
|
|
|
|
const activeKey = ref('1') |
|
|
|
type RangeValue = [Dayjs, Dayjs] |
|
|
|
const currentDate: Dayjs = dayjs() |
|
|
|
const lastMonthDate: Dayjs = currentDate.subtract(1, 'day') |
|
|
|
const rangeValue: RangeValue = [ |
|
|
|
lastMonthDate, |
|
|
|
currentDate, |
|
|
|
] |
|
|
|
const historyTime = ref<RangeValue>(rangeValue) |
|
|
|
const historyList = ref<any[]>([]) |
|
|
|
const echartsRefs = ref<any[]>([]) |
|
|
|
}); |
|
|
|
|
|
|
|
const activeKey = ref("1"); |
|
|
|
type RangeValue = [Dayjs, Dayjs]; |
|
|
|
// const currentDate: Dayjs = dayjs() |
|
|
|
// const lastMonthDate: Dayjs = currentDate.subtract(1, 'day') |
|
|
|
const currentDate: Dayjs = dayjs("2023-10-29 00:00:00"); |
|
|
|
const lastMonthDate: Dayjs = dayjs("2023-10-28 16:00:00"); |
|
|
|
const rangeValue: RangeValue = [lastMonthDate, currentDate]; |
|
|
|
const historyTime = ref<RangeValue>(rangeValue); |
|
|
|
const historyList = ref<any[]>([]); |
|
|
|
const echartsRefs = ref<any[]>([]); |
|
|
|
|
|
|
|
async function getHistory() { |
|
|
|
if (!historyTime.value) |
|
|
|
return |
|
|
|
spinning.value = true |
|
|
|
if (!historyTime.value) return; |
|
|
|
spinning.value = true; |
|
|
|
if (model.value.para) { |
|
|
|
getTestData() |
|
|
|
} |
|
|
|
else { |
|
|
|
getTestData(); |
|
|
|
} else { |
|
|
|
const params = { |
|
|
|
startTime: historyTime.value[0].format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
endTime: historyTime.value[1].format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
startTime: historyTime.value[0].format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
endTime: historyTime.value[1].format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
itemName: model.value?.pointInfo |
|
|
|
.map(item => item.pointId) |
|
|
|
.join(','), |
|
|
|
.map((item) => item.pointId) |
|
|
|
.join(","), |
|
|
|
interval: model.value.sampling, |
|
|
|
} |
|
|
|
const history = await getExaHistorys(params) |
|
|
|
}; |
|
|
|
const history = await getExaHistorys(params); |
|
|
|
historyList.value = history.map((item, index) => { |
|
|
|
const point = model.value?.pointInfo[index] |
|
|
|
const point = model.value?.pointInfo[index]; |
|
|
|
return { |
|
|
|
data: [item], |
|
|
|
name: `${index + 1}.${point?.description}(${point?.pointId})`, |
|
|
|
} |
|
|
|
}) |
|
|
|
echartsRefs.value = Array.from({ length: historyList.value.length }) |
|
|
|
brushActivated.value = new Set() |
|
|
|
}; |
|
|
|
}); |
|
|
|
echartsRefs.value = Array.from({ length: historyList.value.length }); |
|
|
|
brushActivated.value = new Set(); |
|
|
|
} |
|
|
|
|
|
|
|
spinning.value = false |
|
|
|
spinning.value = false; |
|
|
|
} |
|
|
|
|
|
|
|
async function getTestData() { |
|
|
|
const params = { |
|
|
|
Model_id: 530, |
|
|
|
version: model.value?.Cur_Version ? model.value?.Cur_Version : 'v-test', |
|
|
|
version: model.value?.Cur_Version ? model.value?.Cur_Version : "v-test", |
|
|
|
Test_Data: { |
|
|
|
time: historyTime.value |
|
|
|
.map(t => dayjs(t).format('YYYY-MM-DD HH:mm:ss')) |
|
|
|
.join(','), |
|
|
|
points: model.value.pointInfo.map(t => t.pointId).join(','), |
|
|
|
.map((t) => dayjs(t).format("YYYY-MM-DD HH:mm:ss")) |
|
|
|
.join(","), |
|
|
|
points: model.value.pointInfo.map((t) => t.pointId).join(","), |
|
|
|
interval: model.value.sampling * 1000, |
|
|
|
}, |
|
|
|
} |
|
|
|
const result = await testModelApi(params) |
|
|
|
const sampleData = result.sampleData |
|
|
|
const reconData = result.reconData |
|
|
|
}; |
|
|
|
const result = await testModelApi(params); |
|
|
|
const sampleData = result.sampleData; |
|
|
|
const reconData = result.reconData; |
|
|
|
const xData = generateTimeList( |
|
|
|
historyTime.value, |
|
|
|
model.value.sampling * 1000, |
|
|
|
) |
|
|
|
model.value.sampling * 1000 |
|
|
|
); |
|
|
|
historyList.value = sampleData.map((item, index) => { |
|
|
|
const point = model.value?.pointInfo[index] |
|
|
|
const point = model.value?.pointInfo[index]; |
|
|
|
return { |
|
|
|
data: [ |
|
|
|
item.map((t, i) => { |
|
|
|
return [xData[i], t] |
|
|
|
return [xData[i], t]; |
|
|
|
}), |
|
|
|
reconData[index].map((t, i) => { |
|
|
|
return [xData[i], t] |
|
|
|
return [xData[i], t]; |
|
|
|
}), |
|
|
|
], |
|
|
|
name: `${index + 1}.${point?.description}(${point?.pointId})`, |
|
|
|
} |
|
|
|
}) |
|
|
|
brushActivated.value = new Set() |
|
|
|
}; |
|
|
|
}); |
|
|
|
brushActivated.value = new Set(); |
|
|
|
} |
|
|
|
|
|
|
|
function generateTimeList(time: RangeValue, intervalMs: number) { |
|
|
|
const [t1, t2] = time |
|
|
|
const count = Math.floor(t2.diff(t1, 'millisecond') / intervalMs) + 1 |
|
|
|
return Array.from({ length: count }, (_, i) => t1.add(i * intervalMs, 'millisecond').valueOf()) |
|
|
|
const [t1, t2] = time; |
|
|
|
const count = Math.floor(t2.diff(t1, "millisecond") / intervalMs) + 1; |
|
|
|
return Array.from({ length: count }, (_, i) => |
|
|
|
t1.add(i * intervalMs, "millisecond").valueOf() |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
function getOption(item: any) { |
|
|
|
const name = ['测量值', '模型值', ''] |
|
|
|
const color = ['blue', '#ff6f00', 'red'] |
|
|
|
const yIndex = [0, 0, 1] |
|
|
|
const name = ["测量值", "模型值", ""]; |
|
|
|
const color = ["blue", "#ff6f00", "red"]; |
|
|
|
const yIndex = [0, 0, 1]; |
|
|
|
const option = { |
|
|
|
xAxis: { |
|
|
|
type: 'time', |
|
|
|
type: "time", |
|
|
|
axisLabel: { |
|
|
|
formatter(value) { |
|
|
|
const date = new Date(value) |
|
|
|
return date.toLocaleString() |
|
|
|
const date = new Date(value); |
|
|
|
return date.toLocaleString(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
yAxis: [{ type: 'value' }, { type: 'value', max: 10, show: false }], |
|
|
|
yAxis: [{ type: "value" }, { type: "value", max: 10, show: false }], |
|
|
|
series: item.data.map((item, index) => { |
|
|
|
return { |
|
|
|
data: item, |
|
|
|
type: 'line', |
|
|
|
type: "line", |
|
|
|
smooth: true, |
|
|
|
symbol: 'none', |
|
|
|
symbol: "none", |
|
|
|
name: name[index], |
|
|
|
color: color[index], |
|
|
|
yAxisIndex: yIndex[index], |
|
|
|
} |
|
|
|
}; |
|
|
|
}), |
|
|
|
legend: {}, |
|
|
|
dataZoom: [{}], |
|
|
|
brush: { |
|
|
|
toolbox: ['lineX'], |
|
|
|
toolbox: ["lineX"], |
|
|
|
xAxisIndex: 0, |
|
|
|
brushType: 'lineX', |
|
|
|
brushType: "lineX", |
|
|
|
}, |
|
|
|
grid: [ |
|
|
|
{ |
|
|
|
@ -222,242 +221,234 @@ export default defineComponent({ |
|
|
|
top: 30, |
|
|
|
}, |
|
|
|
], |
|
|
|
} |
|
|
|
return option |
|
|
|
}; |
|
|
|
return option; |
|
|
|
} |
|
|
|
|
|
|
|
function setChartRef( |
|
|
|
el: Element | ComponentPublicInstance | null, |
|
|
|
index: number, |
|
|
|
index: number |
|
|
|
) { |
|
|
|
let dom: HTMLElement | null = null |
|
|
|
let dom: HTMLElement | null = null; |
|
|
|
if (el) { |
|
|
|
if ('$el' in el && (el as any).$el instanceof HTMLElement) |
|
|
|
dom = (el as any).$el |
|
|
|
else if (el instanceof HTMLElement) |
|
|
|
dom = el |
|
|
|
if ("$el" in el && (el as any).$el instanceof HTMLElement) |
|
|
|
dom = (el as any).$el; |
|
|
|
else if (el instanceof HTMLElement) dom = el; |
|
|
|
} |
|
|
|
if (dom) |
|
|
|
useECharts(ref(dom as HTMLDivElement)) |
|
|
|
if (dom) useECharts(ref(dom as HTMLDivElement)); |
|
|
|
} |
|
|
|
|
|
|
|
function setEchartsRef(el: any, index: number) { |
|
|
|
if (el) |
|
|
|
echartsRefs.value[index] = el |
|
|
|
if (el) echartsRefs.value[index] = el; |
|
|
|
} |
|
|
|
const isInitBrush = ref(true) |
|
|
|
const isInitBrush = ref(true); |
|
|
|
function onChartFinished(index: number) { |
|
|
|
if (brushActivated.value.has(index)) |
|
|
|
return |
|
|
|
const chart = echartsRefs.value[index] |
|
|
|
if (!chart) |
|
|
|
return |
|
|
|
if (brushActivated.value.has(index)) return; |
|
|
|
const chart = echartsRefs.value[index]; |
|
|
|
if (!chart) return; |
|
|
|
chart.dispatchAction({ |
|
|
|
type: 'takeGlobalCursor', |
|
|
|
key: 'brush', |
|
|
|
type: "takeGlobalCursor", |
|
|
|
key: "brush", |
|
|
|
brushOption: { |
|
|
|
brushType: 'lineX', |
|
|
|
brushMode: 'multiple', |
|
|
|
brushType: "lineX", |
|
|
|
brushMode: "multiple", |
|
|
|
}, |
|
|
|
}) |
|
|
|
const areas = (model.value?.trainTime || []).map(row => ({ |
|
|
|
brushType: 'lineX', |
|
|
|
}); |
|
|
|
const areas = (model.value?.trainTime || []).map((row) => ({ |
|
|
|
brushType: "lineX", |
|
|
|
xAxisIndex: 0, |
|
|
|
coordRange: [ |
|
|
|
dayjs(row.st).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
dayjs(row.et).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
dayjs(row.st).format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
dayjs(row.et).format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
], |
|
|
|
})) |
|
|
|
})); |
|
|
|
chart.dispatchAction({ |
|
|
|
type: 'brush', |
|
|
|
type: "brush", |
|
|
|
areas, |
|
|
|
}) |
|
|
|
brushActivated.value.add(index) |
|
|
|
isInitBrush.value = true |
|
|
|
}); |
|
|
|
brushActivated.value.add(index); |
|
|
|
isInitBrush.value = true; |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
|
await fetchModelInfo() |
|
|
|
}) |
|
|
|
await fetchModelInfo(); |
|
|
|
}); |
|
|
|
const onBrushSelected = debounce((params) => { |
|
|
|
if (isInitBrush.value) { |
|
|
|
isInitBrush.value = false |
|
|
|
return |
|
|
|
isInitBrush.value = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
const selected = params.batch[0].selected |
|
|
|
if (!isInitBrush.value && model?.Cur_Version != "v-test") { |
|
|
|
return; |
|
|
|
} |
|
|
|
const selected = params.batch[0].selected; |
|
|
|
if (selected.length > 0) { |
|
|
|
const areas = mergeAreas(params.batch[0].areas).map(area => ({ |
|
|
|
const areas = mergeAreas(params.batch[0].areas).map((area) => ({ |
|
|
|
brushType: area.brushType, |
|
|
|
xAxisIndex: 0, |
|
|
|
coordRange: area.coordRange, |
|
|
|
})) |
|
|
|
})); |
|
|
|
const trainTime = areas.map((area) => { |
|
|
|
const [stRaw, etRaw] = area.coordRange |
|
|
|
const st = typeof stRaw === 'string' ? dayjs(stRaw).valueOf() : stRaw |
|
|
|
const et = typeof etRaw === 'string' ? dayjs(etRaw).valueOf() : etRaw |
|
|
|
console.log('Selected area:', { st, et }, area) |
|
|
|
const [stRaw, etRaw] = area.coordRange; |
|
|
|
const st = typeof stRaw === "string" ? dayjs(stRaw).valueOf() : stRaw; |
|
|
|
const et = typeof etRaw === "string" ? dayjs(etRaw).valueOf() : etRaw; |
|
|
|
console.log("Selected area:", { st, et }, area); |
|
|
|
return { |
|
|
|
st: dayjs(st).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
et: dayjs(et).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
st: dayjs(st).format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
et: dayjs(et).format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
duration: Math.round((et - st) / 1000), |
|
|
|
number: '', // 采样数量（如有数据可补充） |
|
|
|
filter: '', // 清洗样本数（如有数据可补充） |
|
|
|
mode: '', // 有效样本数（如有数据可补充） |
|
|
|
} |
|
|
|
}) |
|
|
|
console.log('Selected train time:', trainTime) |
|
|
|
if (trainTimeCopy === JSON.stringify(trainTime)) |
|
|
|
return |
|
|
|
model.value.trainTime = trainTime |
|
|
|
trainTimeCopy = JSON.stringify(trainTime) |
|
|
|
number: "", // 采样数量（如有数据可补充） |
|
|
|
filter: "", // 清洗样本数（如有数据可补充） |
|
|
|
mode: "", // 有效样本数（如有数据可补充） |
|
|
|
}; |
|
|
|
}); |
|
|
|
console.log("Selected train time:", trainTime); |
|
|
|
if (trainTimeCopy === JSON.stringify(trainTime)) return; |
|
|
|
model.value.trainTime = trainTime; |
|
|
|
trainTimeCopy = JSON.stringify(trainTime); |
|
|
|
echartsRefs.value.forEach((chart, index) => { |
|
|
|
if (chart) { |
|
|
|
chart.dispatchAction({ |
|
|
|
type: 'brush', |
|
|
|
type: "brush", |
|
|
|
areas, |
|
|
|
}) |
|
|
|
isInitBrush.value = true |
|
|
|
}); |
|
|
|
isInitBrush.value = true; |
|
|
|
} |
|
|
|
}) |
|
|
|
updateModelInfoDebounced() |
|
|
|
}); |
|
|
|
updateModelInfoDebounced(); |
|
|
|
} |
|
|
|
}, 300) |
|
|
|
}, 300); |
|
|
|
|
|
|
|
function mergeAreas(areas: any[]) { |
|
|
|
if (!areas.length) |
|
|
|
return [] |
|
|
|
if (!areas.length) return []; |
|
|
|
// 只合并 brushType 和 xAxisIndex 相同的区间 |
|
|
|
const sorted = [...areas].sort( |
|
|
|
(a, b) => a.coordRange[0] - b.coordRange[0], |
|
|
|
) |
|
|
|
const merged: any[] = [] |
|
|
|
(a, b) => a.coordRange[0] - b.coordRange[0] |
|
|
|
); |
|
|
|
const merged: any[] = []; |
|
|
|
for (const area of sorted) { |
|
|
|
if ( |
|
|
|
merged.length |
|
|
|
&& merged[merged.length - 1].brushType === area.brushType |
|
|
|
&& merged[merged.length - 1].xAxisIndex === area.xAxisIndex |
|
|
|
&& merged[merged.length - 1].coordRange[1] >= area.coordRange[0] |
|
|
|
merged.length && |
|
|
|
merged[merged.length - 1].brushType === area.brushType && |
|
|
|
merged[merged.length - 1].xAxisIndex === area.xAxisIndex && |
|
|
|
merged[merged.length - 1].coordRange[1] >= area.coordRange[0] |
|
|
|
) { |
|
|
|
// 有交集或相邻，合并 |
|
|
|
merged[merged.length - 1].coordRange[1] = Math.max( |
|
|
|
merged[merged.length - 1].coordRange[1], |
|
|
|
area.coordRange[1], |
|
|
|
) |
|
|
|
} |
|
|
|
else { |
|
|
|
area.coordRange[1] |
|
|
|
); |
|
|
|
} else { |
|
|
|
// 新区间 |
|
|
|
merged.push({ |
|
|
|
brushType: area.brushType, |
|
|
|
xAxisIndex: area.xAxisIndex, |
|
|
|
coordRange: [...area.coordRange], |
|
|
|
}) |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
return merged |
|
|
|
return merged; |
|
|
|
} |
|
|
|
|
|
|
|
// 防抖更新 |
|
|
|
const updateModelInfoDebounced = debounce(() => { |
|
|
|
const val = toRaw(model.value) |
|
|
|
if (val && val.id) |
|
|
|
updateModelInfo(val) |
|
|
|
}, 500) |
|
|
|
const val = toRaw(model.value); |
|
|
|
if (val && val.id) updateModelInfo(val); |
|
|
|
}, 500); |
|
|
|
|
|
|
|
function handleDeleteTrainTime(index: number) { |
|
|
|
if (!model.value?.trainTime) |
|
|
|
return |
|
|
|
if (!model.value?.trainTime) return; |
|
|
|
// 赋值新数组，确保响应式 |
|
|
|
model.value.trainTime = [ |
|
|
|
...model.value.trainTime.slice(0, index), |
|
|
|
...model.value.trainTime.slice(index + 1), |
|
|
|
] |
|
|
|
]; |
|
|
|
// 删除后同步更新所有图表的 brush 区域 |
|
|
|
const areas = (model.value.trainTime || []).map(row => ({ |
|
|
|
brushType: 'lineX', |
|
|
|
const areas = (model.value.trainTime || []).map((row) => ({ |
|
|
|
brushType: "lineX", |
|
|
|
xAxisIndex: 0, |
|
|
|
coordRange: [dayjs(row.st).valueOf(), dayjs(row.et).valueOf()], |
|
|
|
})) |
|
|
|
})); |
|
|
|
echartsRefs.value.forEach((chart) => { |
|
|
|
if (chart) { |
|
|
|
chart.dispatchAction({ |
|
|
|
type: 'brush', |
|
|
|
type: "brush", |
|
|
|
areas, |
|
|
|
}) |
|
|
|
isInitBrush.value = true |
|
|
|
}); |
|
|
|
isInitBrush.value = true; |
|
|
|
} |
|
|
|
}) |
|
|
|
updateModelInfoDebounced() |
|
|
|
}); |
|
|
|
updateModelInfoDebounced(); |
|
|
|
} |
|
|
|
async function clearModel() { |
|
|
|
model.value.para = null |
|
|
|
updateModelInfoDebounced() |
|
|
|
await getHistory() |
|
|
|
model.value.para = null; |
|
|
|
updateModelInfoDebounced(); |
|
|
|
await getHistory(); |
|
|
|
} |
|
|
|
|
|
|
|
async function trainModel() { |
|
|
|
const modelInfo = model.value |
|
|
|
const modelInfo = model.value; |
|
|
|
if (!modelInfo || !modelInfo.id) { |
|
|
|
console.error('模型信息不完整，无法训练') |
|
|
|
return |
|
|
|
console.error("模型信息不完整，无法训练"); |
|
|
|
return; |
|
|
|
} |
|
|
|
const pointInfo = modelInfo.pointInfo || [] |
|
|
|
const pointInfo = modelInfo.pointInfo || []; |
|
|
|
if (pointInfo.length === 0) { |
|
|
|
console.error('模型参数点信息为空，无法训练') |
|
|
|
return |
|
|
|
console.error("模型参数点信息为空，无法训练"); |
|
|
|
return; |
|
|
|
} |
|
|
|
const params = { |
|
|
|
conditon: modelInfo.alarmmodelset?.alarmcondition || '1==1', |
|
|
|
conditon: modelInfo.alarmmodelset?.alarmcondition || "1==1", |
|
|
|
Hyper_para: { |
|
|
|
percent: modelInfo.rate, |
|
|
|
}, |
|
|
|
Train_Data: { |
|
|
|
points: pointInfo.map(item => item.pointId).join(','), |
|
|
|
dead: pointInfo.map(item => (item.dead ? '1' : '0')).join(','), |
|
|
|
limit: pointInfo.map(item => (item.limit ? '1' : '0')).join(','), |
|
|
|
points: pointInfo.map((item) => item.pointId).join(","), |
|
|
|
dead: pointInfo.map((item) => (item.dead ? "1" : "0")).join(","), |
|
|
|
limit: pointInfo.map((item) => (item.limit ? "1" : "0")).join(","), |
|
|
|
uplow: pointInfo |
|
|
|
.map( |
|
|
|
item => |
|
|
|
(item) => |
|
|
|
`${item.Upper ? item.Upper : null},${ |
|
|
|
item.Lower ? item.Lower : null |
|
|
|
}`, |
|
|
|
}` |
|
|
|
) |
|
|
|
.join(';'), |
|
|
|
.join(";"), |
|
|
|
interval: modelInfo.sampling * 1000, |
|
|
|
time: modelInfo.trainTime |
|
|
|
.map(item => `${item.st},${item.et}`) |
|
|
|
.join(';'), |
|
|
|
.map((item) => `${item.st},${item.et}`) |
|
|
|
.join(";"), |
|
|
|
}, |
|
|
|
type: 'PCA', |
|
|
|
type: "PCA", |
|
|
|
smote_config: [], |
|
|
|
smote: true, |
|
|
|
} |
|
|
|
spinning.value = true |
|
|
|
}; |
|
|
|
spinning.value = true; |
|
|
|
try { |
|
|
|
const response = await trainModelApi(params) |
|
|
|
model.value.para = response |
|
|
|
model.value.principal = response.Model_info.K |
|
|
|
updateModelInfoDebounced() |
|
|
|
getTestData() |
|
|
|
createMessage.success('模型训练成功') |
|
|
|
} |
|
|
|
catch (error) { |
|
|
|
console.error('模型训练失败:', error) |
|
|
|
createMessage.error('模型训练失败') |
|
|
|
const response = await trainModelApi(params); |
|
|
|
model.value.para = response; |
|
|
|
model.value.principal = response.Model_info.K; |
|
|
|
updateModelInfoDebounced(); |
|
|
|
getTestData(); |
|
|
|
createMessage.success("模型训练成功"); |
|
|
|
} catch (error) { |
|
|
|
console.error("模型训练失败:", error); |
|
|
|
createMessage.error("模型训练失败"); |
|
|
|
} |
|
|
|
|
|
|
|
spinning.value = false |
|
|
|
spinning.value = false; |
|
|
|
} |
|
|
|
const editForm = ref({ |
|
|
|
index: -1, |
|
|
|
Upper: '', |
|
|
|
Lower: '', |
|
|
|
lowerBound: '', |
|
|
|
upperBound: '', |
|
|
|
Upper: "", |
|
|
|
Lower: "", |
|
|
|
lowerBound: "", |
|
|
|
upperBound: "", |
|
|
|
dead: true, |
|
|
|
limit: false, |
|
|
|
}) |
|
|
|
const openEditPointModal = ref<boolean>(false) |
|
|
|
let pointEditRecord = null |
|
|
|
}); |
|
|
|
const openEditPointModal = ref<boolean>(false); |
|
|
|
let pointEditRecord = null; |
|
|
|
function editPoint() { |
|
|
|
// 这里可以添加编辑点的逻辑 |
|
|
|
model.value.pointInfo[editForm.value.index] = { |
|
|
|
@ -468,123 +459,130 @@ export default defineComponent({ |
|
|
|
upperBound: editForm.value.upperBound, |
|
|
|
dead: editForm.value.dead, |
|
|
|
limit: editForm.value.limit, |
|
|
|
} |
|
|
|
updateModelInfoDebounced() |
|
|
|
pointEditRecord.Upper = editForm.value.Upper |
|
|
|
pointEditRecord.Lower = editForm.value.Lower |
|
|
|
pointEditRecord.lowerBound = editForm.value.lowerBound |
|
|
|
pointEditRecord.upperBound = editForm.value.upperBound |
|
|
|
pointEditRecord.dead = editForm.value.dead |
|
|
|
pointEditRecord.limit = editForm.value.limit |
|
|
|
openEditPointModal.value = false |
|
|
|
}; |
|
|
|
updateModelInfoDebounced(); |
|
|
|
pointEditRecord.Upper = editForm.value.Upper; |
|
|
|
pointEditRecord.Lower = editForm.value.Lower; |
|
|
|
pointEditRecord.lowerBound = editForm.value.lowerBound; |
|
|
|
pointEditRecord.upperBound = editForm.value.upperBound; |
|
|
|
pointEditRecord.dead = editForm.value.dead; |
|
|
|
pointEditRecord.limit = editForm.value.limit; |
|
|
|
openEditPointModal.value = false; |
|
|
|
} |
|
|
|
|
|
|
|
function openPointModal(index, record) { |
|
|
|
// 当前页 index |
|
|
|
const pageIndex = index |
|
|
|
const pageIndex = index; |
|
|
|
// 全局 index |
|
|
|
const globalIndex = model.value.pointInfo.findIndex( |
|
|
|
item => item.pointId === record.pointId, |
|
|
|
) |
|
|
|
openEditPointModal.value = true |
|
|
|
pointEditRecord = record |
|
|
|
(item) => item.pointId === record.pointId |
|
|
|
); |
|
|
|
openEditPointModal.value = true; |
|
|
|
pointEditRecord = record; |
|
|
|
editForm.value = { |
|
|
|
index: globalIndex, |
|
|
|
Upper: record?.Upper ?? '', |
|
|
|
Lower: record?.Lower ?? '', |
|
|
|
lowerBound: record?.lowerBound ?? '', |
|
|
|
upperBound: record?.upperBound ?? '', |
|
|
|
Upper: record?.Upper ?? "", |
|
|
|
Lower: record?.Lower ?? "", |
|
|
|
lowerBound: record?.lowerBound ?? "", |
|
|
|
upperBound: record?.upperBound ?? "", |
|
|
|
dead: !!record?.dead, |
|
|
|
limit: !!record?.limit, |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
const mode = ref({ |
|
|
|
alarmcondition: '1==1', |
|
|
|
alarmname: '全工况运行', |
|
|
|
}) |
|
|
|
const openEditModeModal = ref<boolean>(false) |
|
|
|
alarmcondition: "1==1", |
|
|
|
alarmname: "全工况运行", |
|
|
|
}); |
|
|
|
const openEditModeModal = ref<boolean>(false); |
|
|
|
|
|
|
|
function openEditMode() { |
|
|
|
openEditModeModal.value = true |
|
|
|
openEditModeModal.value = true; |
|
|
|
mode.value = { |
|
|
|
alarmcondition: model.value?.alarmmodelset?.alarmcondition || '1==1', |
|
|
|
alarmname: model.value?.alarmmodelset?.alarmname || '全工况运行', |
|
|
|
} |
|
|
|
alarmcondition: model.value?.alarmmodelset?.alarmcondition || "1==1", |
|
|
|
alarmname: model.value?.alarmmodelset?.alarmname || "全工况运行", |
|
|
|
}; |
|
|
|
} |
|
|
|
function closeEditMode() { |
|
|
|
openEditModeModal.value = false |
|
|
|
openEditModeModal.value = false; |
|
|
|
} |
|
|
|
function handleEditMode() { |
|
|
|
// 这里可以添加编辑模式的逻辑 |
|
|
|
model.value.alarmmodelset = mode.value |
|
|
|
updateModelInfoDebounced() |
|
|
|
closeEditMode() |
|
|
|
model.value.alarmmodelset = mode.value; |
|
|
|
updateModelInfoDebounced(); |
|
|
|
closeEditMode(); |
|
|
|
} |
|
|
|
|
|
|
|
const openEditModelModal = ref(false) |
|
|
|
const openEditModelModal = ref(false); |
|
|
|
const editModelForm = ref({ |
|
|
|
sampling: 0, |
|
|
|
rate: 0, |
|
|
|
selectedKeys: [], |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
// 穿梭框数据源示例 |
|
|
|
const transferData = ref([]) // 穿梭框数据源 |
|
|
|
const transferData = ref([]); // 穿梭框数据源 |
|
|
|
|
|
|
|
// 初始化时获取全部测点 |
|
|
|
async function fetchAllPoints(keyword = '') { |
|
|
|
async function fetchAllPoints(keyword = "") { |
|
|
|
// 这里调用你的后端接口，传递 keyword |
|
|
|
// const res = await fetchPointsApi({ keyword }) |
|
|
|
// 示例数据 |
|
|
|
const data = await pointListApi({ keyword }) |
|
|
|
console.log('Fetched points:', data) |
|
|
|
transferData.value = transferData.value.filter(item => editModelForm.value.selectedKeys.includes(item.key)) |
|
|
|
.concat(data.map(item => ({ |
|
|
|
const data = await pointListApi({ keyword }); |
|
|
|
console.log("Fetched points:", data); |
|
|
|
transferData.value = transferData.value |
|
|
|
.filter((item) => editModelForm.value.selectedKeys.includes(item.key)) |
|
|
|
.concat( |
|
|
|
data.map((item) => ({ |
|
|
|
key: item.id, |
|
|
|
title: item.name, |
|
|
|
}))) |
|
|
|
console.log('Transfer data:', transferData.value) |
|
|
|
})) |
|
|
|
); |
|
|
|
console.log("Transfer data:", transferData.value); |
|
|
|
} |
|
|
|
onMounted(() => { |
|
|
|
fetchAllPoints() |
|
|
|
}) |
|
|
|
fetchAllPoints(); |
|
|
|
}); |
|
|
|
|
|
|
|
function handleTransferSearch(dir, value) { |
|
|
|
if (dir === 'left') { |
|
|
|
if (dir === "left") { |
|
|
|
// 左侧：后端接口查询 |
|
|
|
fetchAllPoints(value) |
|
|
|
} |
|
|
|
else { |
|
|
|
fetchAllPoints(value); |
|
|
|
} else { |
|
|
|
// 右侧：前端过滤 |
|
|
|
transferData.value = (model.value?.pointInfo || []) |
|
|
|
.filter(item => |
|
|
|
editModelForm.value.selectedKeys.includes(`${item.description}|${item.pointId}|${item.unit}|${item.Lower}|${item.Upper}`) |
|
|
|
&& (`${item.description || ''}(${item.pointId})`).includes(value), |
|
|
|
.filter( |
|
|
|
(item) => |
|
|
|
editModelForm.value.selectedKeys.includes( |
|
|
|
`${item.description}|${item.pointId}|${item.unit}|${item.Lower}|${item.Upper}` |
|
|
|
) && `${item.description || ""}(${item.pointId})`.includes(value) |
|
|
|
) |
|
|
|
.map(item => ({ |
|
|
|
.map((item) => ({ |
|
|
|
key: `${item.description}|${item.pointId}|${item.unit}|${item.Lower}|${item.Upper}`, |
|
|
|
title: `${item.description || ''} (${item.pointId})`, |
|
|
|
})) |
|
|
|
title: `${item.description || ""} (${item.pointId})`, |
|
|
|
})); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function openEditModel() { |
|
|
|
editModelForm.value.sampling = model.value?.sampling || 0 |
|
|
|
editModelForm.value.rate = model.value?.rate || 0 |
|
|
|
editModelForm.value.selectedKeys = (model.value?.pointInfo || []).map(item => `${item.description}|${item.pointId}|${item.unit}|${item.Lower}|${item.Upper}`) |
|
|
|
transferData.value = (model.value?.pointInfo || []).map(item => ({ |
|
|
|
editModelForm.value.sampling = model.value?.sampling || 0; |
|
|
|
editModelForm.value.rate = model.value?.rate || 0; |
|
|
|
editModelForm.value.selectedKeys = (model.value?.pointInfo || []).map( |
|
|
|
(item) => |
|
|
|
`${item.description}|${item.pointId}|${item.unit}|${item.Lower}|${item.Upper}` |
|
|
|
); |
|
|
|
transferData.value = (model.value?.pointInfo || []).map((item) => ({ |
|
|
|
key: `${item.description}|${item.pointId}|${item.unit}|${item.Lower}|${item.Upper}`, |
|
|
|
title: `${item.description || ''} (${item.pointId})`, |
|
|
|
})) |
|
|
|
console.log('transferData:', transferData.value) |
|
|
|
openEditModelModal.value = true |
|
|
|
title: `${item.description || ""} (${item.pointId})`, |
|
|
|
})); |
|
|
|
console.log("transferData:", transferData.value); |
|
|
|
openEditModelModal.value = true; |
|
|
|
} |
|
|
|
function handleEditModelOk() { |
|
|
|
model.value.sampling = editModelForm.value.sampling |
|
|
|
model.value.rate = editModelForm.value.rate |
|
|
|
model.value.sampling = editModelForm.value.sampling; |
|
|
|
model.value.rate = editModelForm.value.rate; |
|
|
|
model.value.pointInfo = editModelForm.value.selectedKeys.map((key) => { |
|
|
|
const [description, pointId, unit, Lower, Upper] = key.split('|') |
|
|
|
const [description, pointId, unit, Lower, Upper] = key.split("|"); |
|
|
|
return { |
|
|
|
description, |
|
|
|
pointId, |
|
|
|
@ -593,28 +591,27 @@ export default defineComponent({ |
|
|
|
Upper, |
|
|
|
dead: true, |
|
|
|
limit: false, |
|
|
|
} |
|
|
|
}) |
|
|
|
clearModel() |
|
|
|
openEditModelModal.value = false |
|
|
|
}; |
|
|
|
}); |
|
|
|
clearModel(); |
|
|
|
openEditModelModal.value = false; |
|
|
|
} |
|
|
|
function handleEditModelCancel() { |
|
|
|
openEditModelModal.value = false |
|
|
|
openEditModelModal.value = false; |
|
|
|
} |
|
|
|
|
|
|
|
async function bottomModel() { |
|
|
|
if (!model.value.para) { |
|
|
|
createMessage.error('模型未训练，无法下装') |
|
|
|
return |
|
|
|
createMessage.error("模型未训练，无法下装"); |
|
|
|
return; |
|
|
|
} |
|
|
|
try { |
|
|
|
const response = await bottomModelApi(model.value.id) |
|
|
|
model.value = response |
|
|
|
createMessage.success('模型下装成功') |
|
|
|
} |
|
|
|
catch (error) { |
|
|
|
console.error('底层模型获取失败:', error) |
|
|
|
createMessage.error('底层模型获取失败') |
|
|
|
const response = await bottomModelApi(model.value.id); |
|
|
|
model.value = response; |
|
|
|
createMessage.success("模型下装成功"); |
|
|
|
} catch (error) { |
|
|
|
console.error("底层模型获取失败:", error); |
|
|
|
createMessage.error("底层模型获取失败"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -653,9 +650,9 @@ export default defineComponent({ |
|
|
|
handleEditModelOk, |
|
|
|
handleEditModelCancel, |
|
|
|
bottomModel, |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
}) |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
@ -672,9 +669,7 @@ export default defineComponent({ |
|
|
|
<a-descriptions-item label="版本"> |
|
|
|
{{ model?.Cur_Version || "v-test" }} |
|
|
|
</a-descriptions-item> |
|
|
|
<a-descriptions-item label="评估报告"> |
|
|
|
暂无 |
|
|
|
</a-descriptions-item> |
|
|
|
<a-descriptions-item label="评估报告"> 暂无 </a-descriptions-item> |
|
|
|
<a-descriptions-item label="创建人"> |
|
|
|
{{ model?.founder }} |
|
|
|
</a-descriptions-item> |
|
|
|
@ -713,7 +708,7 @@ export default defineComponent({ |
|
|
|
( |
|
|
|
model?.trainTime.reduce( |
|
|
|
(total, item) => total + item.duration, |
|
|
|
0, |
|
|
|
0 |
|
|
|
) / 3600 |
|
|
|
).toFixed(2) || "暂无" |
|
|
|
}} |
|
|
|
@ -785,14 +780,14 @@ export default defineComponent({ |
|
|
|
> |
|
|
|
清除训练结果 |
|
|
|
</a-button> |
|
|
|
<a-button type="primary" style="margin-left: 6px" @click="openEditModel"> |
|
|
|
修改模型 |
|
|
|
</a-button> |
|
|
|
<a-button |
|
|
|
danger |
|
|
|
style="margin-left: 10px" |
|
|
|
@click="bottomModel" |
|
|
|
type="primary" |
|
|
|
style="margin-left: 6px" |
|
|
|
@click="openEditModel" |
|
|
|
> |
|
|
|
修改模型 |
|
|
|
</a-button> |
|
|
|
<a-button danger style="margin-left: 10px" @click="bottomModel"> |
|
|
|
下装 |
|
|
|
</a-button> |
|
|
|
</div> |
|
|
|
@ -856,12 +851,8 @@ export default defineComponent({ |
|
|
|
/> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="清洗方式" style="margin-top: 16px"> |
|
|
|
<a-checkbox v-model:checked="editForm.dead"> |
|
|
|
死区清洗 |
|
|
|
</a-checkbox> |
|
|
|
<a-checkbox v-model:checked="editForm.limit"> |
|
|
|
限值清洗 |
|
|
|
</a-checkbox> |
|
|
|
<a-checkbox v-model:checked="editForm.dead"> 死区清洗 </a-checkbox> |
|
|
|
<a-checkbox v-model:checked="editForm.limit"> 限值清洗 </a-checkbox> |
|
|
|
</a-form-item> |
|
|
|
</a-form> |
|
|
|
</a-modal> |
|
|
|
@ -922,11 +913,18 @@ export default defineComponent({ |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<div style="display: flex; justify-content: center; margin-top: 24px;margin-bottom: 10px;"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin-top: 24px; |
|
|
|
margin-bottom: 10px; |
|
|
|
" |
|
|
|
> |
|
|
|
<a-transfer |
|
|
|
v-model:target-keys="editModelForm.selectedKeys" |
|
|
|
:data-source="transferData" |
|
|
|
:render="item => item.title" |
|
|
|
:render="(item) => item.title" |
|
|
|
:row-key="(item) => item.key" |
|
|
|
:pagination="false" |
|
|
|
:show-search="true" |
|
|
|
|
