parent
37c622e684
commit
25e86d31a9
@ -0,0 +1,308 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import Plotly from "plotly.js-dist-min";
|
||||||
|
|
||||||
|
const pieChartRef = ref<HTMLElement | null>(null);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (pieChartRef.value) {
|
||||||
|
Plotly.newPlot(
|
||||||
|
pieChartRef.value,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
values: [40, 25, 20, 15],
|
||||||
|
labels: ["Success", "Pending", "Failed", "Cancelled"],
|
||||||
|
type: "pie",
|
||||||
|
marker: {
|
||||||
|
colors: ["#4caf50", "#ff9800", "#f44336", "#9e9e9e"],
|
||||||
|
},
|
||||||
|
textinfo: "label+percent",
|
||||||
|
textfont: { color: "#fff", size: 14 },
|
||||||
|
hole: 0.4,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
{
|
||||||
|
paper_bgcolor: "#1e1e1e",
|
||||||
|
plot_bgcolor: "#1e1e1e",
|
||||||
|
showlegend: true,
|
||||||
|
legend: {
|
||||||
|
font: { color: "#ffffff", size: 12 },
|
||||||
|
orientation: "h",
|
||||||
|
x: 0.5,
|
||||||
|
xanchor: "center",
|
||||||
|
y: -0.2,
|
||||||
|
},
|
||||||
|
margin: { t: 20, b: 40, l: 0, r: 0 },
|
||||||
|
},
|
||||||
|
{ displayModeBar: false },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const recentRuns = [
|
||||||
|
{ name: "Model A - v1", status: "success", time: "2025-05-12 09:12" },
|
||||||
|
{ name: "Model B - tuning", status: "success", time: "2025-05-14 08:59" },
|
||||||
|
{ name: "Model C - test run", status: "failed", time: "2025-05-13 18:13" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const datasetUpdates = [
|
||||||
|
{ name: "DrivingLog2025", count: 7 },
|
||||||
|
{ name: "CameraFrames", count: 3 },
|
||||||
|
{ name: "LidarScans", count: 2 },
|
||||||
|
{ name: "Traffic_log", count: 2 },
|
||||||
|
{ name: "Traffic_log2", count: 2 },
|
||||||
|
];
|
||||||
|
const dummyWorkflow = [
|
||||||
|
{ title: "Volcano Test Pipeline", date: "2025-05-13 08:12" },
|
||||||
|
{ title: "Volcano Test Pipeline", date: "2025-05-13 08:12" },
|
||||||
|
{ title: "XGBoost Training", date: "2025-05-13 08:12" },
|
||||||
|
{ title: "Data Preprocess Flow", date: "2025-05-13 08:12" },
|
||||||
|
];
|
||||||
|
const tableHeader = [
|
||||||
|
{ label: "Model Name", width: "10%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Version", width: "10%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Deployed At", width: "10%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Status", width: "10%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Download", width: "10%", style: "word-break: keep-all;" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = ref({
|
||||||
|
results: [
|
||||||
|
{
|
||||||
|
deviceKey: "1",
|
||||||
|
name: "LaneDetectionModel",
|
||||||
|
version: "v1.2.0",
|
||||||
|
time: "2025-05-13 14:32",
|
||||||
|
status: "Active",
|
||||||
|
download: "Finished",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deviceKey: "2",
|
||||||
|
name: "TrafficSignClassifier",
|
||||||
|
version: "v0.9.3",
|
||||||
|
time: "2025-05-13 09:00",
|
||||||
|
status: "Pending",
|
||||||
|
download: "-",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deviceKey: "3",
|
||||||
|
name: "PathPlannerModel",
|
||||||
|
version: "v2.0.1",
|
||||||
|
time: "2025-05-12 17:44",
|
||||||
|
status: "Failed",
|
||||||
|
download: "Failed",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
allSelected: false,
|
||||||
|
selected: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const getSelectedAllData = () => {
|
||||||
|
data.value.selected = data.value.allSelected
|
||||||
|
? data.value.results.map(({ deviceKey }) => ({ deviceKey }))
|
||||||
|
: [];
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-container fluid>
|
||||||
|
<div class="d-flex justify-space-between align-center mb-6">
|
||||||
|
<h2 class="text-h6 font-weight-bold">배터리 상태 예측 모델 프로젝트</h2>
|
||||||
|
<v-btn color="primary" prepend-icon="mdi-refresh">Refresh</v-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12" md="6">
|
||||||
|
<v-card class="pa-0" style="min-height: 360px; max-height: 360px">
|
||||||
|
<div style="padding: 16px; border-bottom: 1px solid #ccc">
|
||||||
|
<h3 class="text-subtitle-1 font-weight-bold mb-0">
|
||||||
|
Workflow Success Rate
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div style="overflow-y: auto; padding: 8px 16px">
|
||||||
|
<div ref="pieChartRef" style="height: 280px"></div>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="12" md="6">
|
||||||
|
<v-card class="pa-0" style="min-height: 360px; max-height: 360px">
|
||||||
|
<div style="padding: 16px; border-bottom: 1px solid #ccc">
|
||||||
|
<h3 class="text-subtitle-1 font-weight-bold mb-0">
|
||||||
|
Recently Registered Workflow
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
|
||||||
|
<v-list density="comfortable" nav>
|
||||||
|
<v-list-item v-for="(item, idx) in dummyWorkflow" :key="idx">
|
||||||
|
<template #title>
|
||||||
|
<div class="d-flex justify-space-between align-center w-100">
|
||||||
|
<span class="text-body-2 font-weight-medium">{{
|
||||||
|
item.title
|
||||||
|
}}</span>
|
||||||
|
<span class="text-caption text-grey-lighten-1">{{
|
||||||
|
item.date
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row class="mt-4">
|
||||||
|
<v-col cols="12" md="6">
|
||||||
|
<v-card class="pa-0" style="min-height: 360px; max-height: 360px">
|
||||||
|
<div style="padding: 16px; border-bottom: 1px solid #ccc">
|
||||||
|
<h3 class="text-subtitle-1 font-weight-bold mb-0">Recent Run</h3>
|
||||||
|
</div>
|
||||||
|
<div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
|
||||||
|
<v-list density="comfortable">
|
||||||
|
<v-list-item
|
||||||
|
v-for="(run, idx) in recentRuns"
|
||||||
|
:key="idx"
|
||||||
|
class="py-2"
|
||||||
|
>
|
||||||
|
<div class="d-flex align-center">
|
||||||
|
<v-avatar
|
||||||
|
size="28"
|
||||||
|
:color="
|
||||||
|
run.status === 'success'
|
||||||
|
? 'green lighten-1'
|
||||||
|
: 'red lighten-1'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<v-icon size="20" color="white">
|
||||||
|
{{ run.status === "success" ? "mdi-check" : "mdi-close" }}
|
||||||
|
</v-icon>
|
||||||
|
</v-avatar>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="d-flex flex-column text-right ml-4"
|
||||||
|
style="flex: 1"
|
||||||
|
>
|
||||||
|
<span class="font-weight-medium text-body-2">
|
||||||
|
{{ run.name }}
|
||||||
|
</span>
|
||||||
|
<span class="text-caption text-grey-darken-1">
|
||||||
|
{{ run.time }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="12" md="6">
|
||||||
|
<v-card class="pa-0" style="min-height: 360px; max-height: 360px">
|
||||||
|
<div style="padding: 16px; border-bottom: 1px solid #ccc">
|
||||||
|
<h3 class="text-subtitle-1 font-weight-bold mb-0">
|
||||||
|
Dataset Update Activity
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div style="overflow-y: auto; max-height: 300px; padding: 8px 16px">
|
||||||
|
<v-list dense>
|
||||||
|
<v-list-item v-for="(data, idx) in datasetUpdates" :key="idx">
|
||||||
|
<v-list-item-title>{{ data.name }}</v-list-item-title>
|
||||||
|
<v-progress-linear
|
||||||
|
:model-value="data.count * 10"
|
||||||
|
height="8"
|
||||||
|
color="primary"
|
||||||
|
class="mt-1"
|
||||||
|
/>
|
||||||
|
<v-list-item-subtitle
|
||||||
|
>{{ data.count }} updates</v-list-item-subtitle
|
||||||
|
>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-card class="rounded-lg pa-4 mt-4">
|
||||||
|
<div class="d-flex justify-space-between align-center mt-8 mb-2 px-2">
|
||||||
|
<div class="d-flex align-center">
|
||||||
|
<span class="text-subtitle-1 font-weight-bold">Model Deployment</span>
|
||||||
|
</div>
|
||||||
|
<v-btn
|
||||||
|
variant="text"
|
||||||
|
class="text-caption font-weight-bold"
|
||||||
|
append-icon="mdi-arrow-right"
|
||||||
|
style="text-transform: none"
|
||||||
|
>
|
||||||
|
Go to Model Deploy
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-sheet>
|
||||||
|
<v-table density="comfortable" fixed-header height="625">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width: 5%" />
|
||||||
|
<col
|
||||||
|
v-for="(item, i) in tableHeader"
|
||||||
|
:key="i"
|
||||||
|
:style="`width:${item.width}`"
|
||||||
|
/>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<v-checkbox
|
||||||
|
v-model="data.allSelected"
|
||||||
|
style="min-width: 36px"
|
||||||
|
:indeterminate="data.allSelected === true"
|
||||||
|
hide-details
|
||||||
|
@change="getSelectedAllData"
|
||||||
|
></v-checkbox>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
v-for="(item, i) in tableHeader"
|
||||||
|
:key="i"
|
||||||
|
class="text-center font-weight-bold"
|
||||||
|
:style="item.style"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="text-body-2">
|
||||||
|
<tr
|
||||||
|
v-for="(item, i) in data.results"
|
||||||
|
:key="i"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
<v-checkbox
|
||||||
|
v-model="data.selected"
|
||||||
|
hide-details
|
||||||
|
:value="{ deviceKey: item.deviceKey }"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.name }}</td>
|
||||||
|
<td>{{ item.version }}</td>
|
||||||
|
<td>{{ item.time }}</td>
|
||||||
|
<td>{{ item.status }}</td>
|
||||||
|
<td>{{ item.download }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</v-table>
|
||||||
|
</v-sheet>
|
||||||
|
</v-col>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,563 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import FormComponent from "../experiment/FormComponent.vue";
|
||||||
|
import IconDownloadBtn from "@/components/button/IconDownloadBtn.vue";
|
||||||
|
|
||||||
|
// const store = commonStore();
|
||||||
|
|
||||||
|
const tableHeader = [
|
||||||
|
{ label: "No", width: "5%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Execution Name", width: "20%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Status", width: "10%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Duration", width: "10%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Experiment", width: "15%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Workflow", width: "15%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Start Time", width: "15%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Registry Status", width: "10%", style: "word-break: keep-all;" },
|
||||||
|
{ label: "Action", width: "5%", style: "word-break: keep-all;" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const searchOptions = [
|
||||||
|
{ searchType: "All", searchText: "" },
|
||||||
|
{ searchType: "Execution Name", searchText: "name" },
|
||||||
|
{ searchType: "Status", searchText: "status" },
|
||||||
|
{ searchType: "Duration", searchText: "duration" },
|
||||||
|
{ searchType: "Experiment", searchText: "experiment" },
|
||||||
|
{ searchType: "Workflow", searchText: "workflow" },
|
||||||
|
{ searchType: "Registry Status", searchText: "registryStatus" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const searchExperimentOptions = [{ searchType: "Experiment", searchText: "" }];
|
||||||
|
const searchWorkflowOptions = [{ searchType: "Workflow", searchText: "" }];
|
||||||
|
const pageSizeOptions = [
|
||||||
|
{ text: "10 페이지", value: 10 },
|
||||||
|
{ text: "50 페이지", value: 50 },
|
||||||
|
{ text: "100 페이지", value: 100 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = ref({
|
||||||
|
params: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
searchType: "",
|
||||||
|
searchText: "",
|
||||||
|
},
|
||||||
|
results: [],
|
||||||
|
totalDataLength: 0,
|
||||||
|
pageLength: 0,
|
||||||
|
modalMode: "",
|
||||||
|
selectedData: null,
|
||||||
|
allSelected: false,
|
||||||
|
selected: [],
|
||||||
|
isModalVisible: false,
|
||||||
|
isConfirmDialogVisible: false,
|
||||||
|
userOption: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const getCodeList = () => {
|
||||||
|
// UserService.search(data.value.params).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.userOption = d.data.userList;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const getData = () => {
|
||||||
|
const params = { ...data.value.params };
|
||||||
|
if (params.searchType === "" || params.searchText === "") {
|
||||||
|
delete params.searchType;
|
||||||
|
delete params.searchText;
|
||||||
|
}
|
||||||
|
data.value.results = [
|
||||||
|
{
|
||||||
|
no: 11,
|
||||||
|
name: "run-batch32-lr0.001",
|
||||||
|
status: "Succeeded",
|
||||||
|
duration: "0:00:21",
|
||||||
|
experiment: "Baseline Model Training",
|
||||||
|
workflow: "baseline_train_pipeline",
|
||||||
|
startTime: "2025-05-20 10:12",
|
||||||
|
registryStatus: "Registered",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 10,
|
||||||
|
name: "run-batch64-lr0.001",
|
||||||
|
status: "Failed",
|
||||||
|
duration: "0:00:20",
|
||||||
|
experiment: "Baseline Model Training",
|
||||||
|
workflow: "baseline_train_pipeline",
|
||||||
|
startTime: "2025-05-20 09:10",
|
||||||
|
registryStatus: "Not Registered",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 9,
|
||||||
|
name: "run-batch32-lr0.0005",
|
||||||
|
status: "Succeeded",
|
||||||
|
duration: "0:00:21",
|
||||||
|
experiment: "Baseline Model Training",
|
||||||
|
workflow: "baseline_train_pipeline",
|
||||||
|
startTime: "2025-05-19 10:12",
|
||||||
|
registryStatus: "Registered",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 8,
|
||||||
|
name: "run-batch64-lr0.0005",
|
||||||
|
status: "Running",
|
||||||
|
duration: "0:00:20",
|
||||||
|
experiment: "Baseline Model Training",
|
||||||
|
workflow: "baseline_train_pipeline",
|
||||||
|
startTime: "2025-05-18 11:50",
|
||||||
|
registryStatus: "Not Registered",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 7,
|
||||||
|
name: "run-augmented-data",
|
||||||
|
status: "Succeeded",
|
||||||
|
duration: "0:00:20",
|
||||||
|
experiment: "Baseline Model Training",
|
||||||
|
workflow: "baseline_train_pipeline",
|
||||||
|
startTime: "2025-05-17 09:12",
|
||||||
|
registryStatus: "Registered",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 6,
|
||||||
|
name: "run-augmented-data",
|
||||||
|
status: "Succeeded",
|
||||||
|
duration: "0:00:20",
|
||||||
|
experiment: "Baseline Model Training",
|
||||||
|
workflow: "baseline_train_pipeline",
|
||||||
|
startTime: "2025-05-17 09:12",
|
||||||
|
registryStatus: "Registered",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no: 5,
|
||||||
|
name: "run-augmented-data",
|
||||||
|
status: "Succeeded",
|
||||||
|
duration: "0:00:20",
|
||||||
|
experiment: "Baseline Model Training",
|
||||||
|
workflow: "baseline_train_pipeline",
|
||||||
|
startTime: "2025-05-17 09:12",
|
||||||
|
registryStatus: "Registered",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
data.value.totalDataLength = data.value.results.length;
|
||||||
|
setPaginationLength();
|
||||||
|
// DeviceService.search(params).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.results = d.data.deviceList;
|
||||||
|
// data.value.totalDataLength = d.data.totalCount;
|
||||||
|
// setTimeout(() => {
|
||||||
|
// setPaginationLength();
|
||||||
|
// }, 200);
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "디바이스 조회 실패",
|
||||||
|
// color: "error",
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// DeviceService.search().then((d) => {
|
||||||
|
// data.value.totalDataLength = d.data.totalCount;
|
||||||
|
// setTimeout(() => {
|
||||||
|
// setPaginationLength();
|
||||||
|
// }, 200);
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const setPaginationLength = () => {
|
||||||
|
if (data.value.totalDataLength % data.value.params.pageSize === 0) {
|
||||||
|
data.value.pageLength =
|
||||||
|
data.value.totalDataLength / data.value.params.pageSize;
|
||||||
|
} else {
|
||||||
|
data.value.pageLength = Math.ceil(
|
||||||
|
data.value.totalDataLength / data.value.params.pageSize,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = (formData) => {
|
||||||
|
if (data.value.modalMode === "create") {
|
||||||
|
// DeviceService.add(formData).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.isModalVisible = false;
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "등록 되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
// changePageNum(1);
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
} else {
|
||||||
|
// DeviceService.update(formData.deviceKey, formData).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.isModalVisible = false;
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "수정 되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
// changePageNum();
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeData = (value) => {
|
||||||
|
let removeList = value ? value : data.value.selected;
|
||||||
|
const remove = (code) => {
|
||||||
|
// return DeviceService.delete(code).then((d) => {
|
||||||
|
// if (d.status !== 200) {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (removeList.length === 1) {
|
||||||
|
remove(removeList[0].deviceKey).then(() => {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "삭제되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
changePageNum();
|
||||||
|
data.value.isConfirmDialogVisible = false;
|
||||||
|
data.value.selected = [];
|
||||||
|
data.value.allSelected = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
|
||||||
|
() => {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "모두 삭제되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
changePageNum();
|
||||||
|
data.value.isConfirmDialogVisible = false;
|
||||||
|
data.value.selected = [];
|
||||||
|
data.value.allSelected = false;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveData = () => {
|
||||||
|
if (data.value.selected.length === 0) {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "삭제 할 데이터를 선택해주세요. ",
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (data.value.allSelected || data.value.selected.length !== 1) {
|
||||||
|
data.value.isConfirmDialogVisible = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//리스트로 삭제 할때
|
||||||
|
removeData(undefined);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changePageNum = (page) => {
|
||||||
|
data.value.params.pageNum = page;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const openInfoModal = (selectedItem) => {
|
||||||
|
data.value.modalMode = "info";
|
||||||
|
};
|
||||||
|
const openModifyModal = (selectedItem) => {
|
||||||
|
data.value.selectedData = selectedItem;
|
||||||
|
data.value.modalMode = "modify";
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDownloadModal = () => {
|
||||||
|
data.value.selectedData = null;
|
||||||
|
data.value.modalMode = "download";
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
data.value.isModalVisible = false;
|
||||||
|
data.value.selectedData = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSelectedAllData = () => {
|
||||||
|
data.value.selected = data.value.allSelected
|
||||||
|
? data.value.results.map((item) => {
|
||||||
|
return {
|
||||||
|
deviceKey: item.deviceKey,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
getCodeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- <v-dialog v-model="data.isModalVisible" max-width="600" persistent>
|
||||||
|
<FormComponent
|
||||||
|
:edit-data="data.selectedData"
|
||||||
|
:mode="data.modalMode"
|
||||||
|
@close-modal="closeModal"
|
||||||
|
@handle-data="saveData"
|
||||||
|
:user-option="data.userOption"
|
||||||
|
/>
|
||||||
|
</v-dialog>
|
||||||
|
<v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">
|
||||||
|
<ConfirmDialogComponent
|
||||||
|
@cancel="data.isConfirmDialogVisible = false"
|
||||||
|
@delete="removeData(undefined)"
|
||||||
|
@init="((data.selected = []), (data.allSelected = false))"
|
||||||
|
/>
|
||||||
|
</v-dialog> -->
|
||||||
|
<v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
|
||||||
|
<v-card
|
||||||
|
flat
|
||||||
|
class="bg-shades-transparent d-flex flex-column align-center justify-center w-100"
|
||||||
|
>
|
||||||
|
<v-card flat class="bg-shades-transparent w-100">
|
||||||
|
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
|
||||||
|
<div class="d-flex flex-row justify-start align-center">
|
||||||
|
<div class="text-primary">Excutions</div>
|
||||||
|
</div>
|
||||||
|
</v-card-item>
|
||||||
|
</v-card>
|
||||||
|
<v-card flat class="bg-shades-transparent w-100">
|
||||||
|
<v-card flat class="bg-shades-transparent mb-4">
|
||||||
|
<div class="d-flex justify-center flex-wrap align-center">
|
||||||
|
<v-responsive
|
||||||
|
max-width="180"
|
||||||
|
min-width="180"
|
||||||
|
class="mr-3 mt-3 mb-3"
|
||||||
|
>
|
||||||
|
<v-select
|
||||||
|
v-model="data.params.searchType"
|
||||||
|
label="검색조건"
|
||||||
|
density="compact"
|
||||||
|
:items="searchOptions"
|
||||||
|
item-title="searchType"
|
||||||
|
item-value="searchText"
|
||||||
|
hide-details
|
||||||
|
></v-select>
|
||||||
|
</v-responsive>
|
||||||
|
<v-responsive
|
||||||
|
max-width="180"
|
||||||
|
min-width="180"
|
||||||
|
class="mr-3 mt-3 mb-3"
|
||||||
|
>
|
||||||
|
<v-select
|
||||||
|
v-model="data.params.searchType"
|
||||||
|
label="검색조건"
|
||||||
|
density="compact"
|
||||||
|
:items="searchExperimentOptions"
|
||||||
|
item-title="searchType"
|
||||||
|
item-value="searchText"
|
||||||
|
hide-details
|
||||||
|
></v-select>
|
||||||
|
</v-responsive>
|
||||||
|
<v-responsive
|
||||||
|
max-width="180"
|
||||||
|
min-width="180"
|
||||||
|
class="mr-3 mt-3 mb-3"
|
||||||
|
>
|
||||||
|
<v-select
|
||||||
|
v-model="data.params.searchType"
|
||||||
|
label="검색조건"
|
||||||
|
density="compact"
|
||||||
|
:items="searchWorkflowOptions"
|
||||||
|
item-title="searchType"
|
||||||
|
item-value="searchText"
|
||||||
|
hide-details
|
||||||
|
></v-select>
|
||||||
|
</v-responsive>
|
||||||
|
<v-responsive min-width="540" max-width="540">
|
||||||
|
<v-text-field
|
||||||
|
v-model="data.params.searchText"
|
||||||
|
label="검색어"
|
||||||
|
density="compact"
|
||||||
|
clearable
|
||||||
|
required
|
||||||
|
class="mt-3 mb-3"
|
||||||
|
hide-details
|
||||||
|
@keyup.enter="changePageNum(1)"
|
||||||
|
></v-text-field>
|
||||||
|
</v-responsive>
|
||||||
|
|
||||||
|
<div class="ml-3">
|
||||||
|
<v-btn
|
||||||
|
size="large"
|
||||||
|
color="primary"
|
||||||
|
:rounded="5"
|
||||||
|
@click="changePageNum(1)"
|
||||||
|
>
|
||||||
|
<v-icon> mdi-magnify</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
|
||||||
|
<v-sheet
|
||||||
|
class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
|
||||||
|
>
|
||||||
|
<v-sheet class="d-flex flex-wrap me-auto bg-shades-transparent">
|
||||||
|
<v-sheet
|
||||||
|
class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
|
||||||
|
>
|
||||||
|
<v-chip color="primary"
|
||||||
|
>총 {{ data.totalDataLength.toLocaleString() }}개
|
||||||
|
</v-chip>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet class="bg-shades-transparent">
|
||||||
|
<v-responsive max-width="140" min-width="140" class="mb-2">
|
||||||
|
<v-select
|
||||||
|
v-model="data.params.pageSize"
|
||||||
|
density="compact"
|
||||||
|
:items="pageSizeOptions"
|
||||||
|
item-title="text"
|
||||||
|
item-value="value"
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
hide-details
|
||||||
|
@update:model-value="changePageNum(1)"
|
||||||
|
></v-select>
|
||||||
|
</v-responsive>
|
||||||
|
</v-sheet>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet class="justify-end mb-2 mr-3">
|
||||||
|
<v-btn color="primary" @click="openCreateModal">Terminate </v-btn>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet class="justify-end mb-2 mr-3">
|
||||||
|
<v-btn color="primary" @click="openCreateModal">Retry </v-btn>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet class="justify-end mb-2 mr-3">
|
||||||
|
<v-btn color="primary" @click="openCreateModal">Clone </v-btn>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet class="justify-end mb-2 mr-3">
|
||||||
|
<v-btn color="primary" @click="openCreateModal">Compare </v-btn>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet class="justify-end mb-2">
|
||||||
|
<v-btn color="primary" @click="openCreateModal">Execution </v-btn>
|
||||||
|
</v-sheet>
|
||||||
|
</v-sheet>
|
||||||
|
|
||||||
|
<v-card class="rounded-lg pa-8">
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-sheet>
|
||||||
|
<v-table
|
||||||
|
density="comfortable"
|
||||||
|
fixed-header
|
||||||
|
height="625"
|
||||||
|
col-md-12
|
||||||
|
col-12
|
||||||
|
overflow-x-auto
|
||||||
|
>
|
||||||
|
<colgroup>
|
||||||
|
<col style="width: 5%" />
|
||||||
|
<col
|
||||||
|
v-for="(item, i) in tableHeader"
|
||||||
|
:key="i"
|
||||||
|
:style="`width:${item.width}`"
|
||||||
|
/>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<v-checkbox
|
||||||
|
v-model="data.allSelected"
|
||||||
|
style="min-width: 36px"
|
||||||
|
:indeterminate="data.allSelected === true"
|
||||||
|
hide-details
|
||||||
|
@change="getSelectedAllData"
|
||||||
|
></v-checkbox>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
v-for="(item, i) in tableHeader"
|
||||||
|
:key="i"
|
||||||
|
class="text-center font-weight-bold"
|
||||||
|
:style="`${item.style}`"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="text-body-2">
|
||||||
|
<tr
|
||||||
|
v-for="(item, i) in data.results"
|
||||||
|
:key="i"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
<v-checkbox
|
||||||
|
v-model="data.selected"
|
||||||
|
hide-details
|
||||||
|
:value="{
|
||||||
|
deviceKey: item.deviceKey,
|
||||||
|
}"
|
||||||
|
></v-checkbox>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.no }}</td>
|
||||||
|
<td>{{ item.name }}</td>
|
||||||
|
<td>
|
||||||
|
<v-icon v-if="item.status === 'Succeeded'" color="green"
|
||||||
|
>mdi-check-circle</v-icon
|
||||||
|
>
|
||||||
|
<v-icon v-else-if="item.status === 'Failed'" color="red"
|
||||||
|
>mdi-close-circle</v-icon
|
||||||
|
>
|
||||||
|
<v-icon v-else color="grey">mdi-loading</v-icon>
|
||||||
|
</td>
|
||||||
|
<td>{{ item.duration }}</td>
|
||||||
|
<td>{{ item.experiment }}</td>
|
||||||
|
<td>{{ item.workflow }}</td>
|
||||||
|
<td>{{ item.startTime }}</td>
|
||||||
|
<td>{{ item.registryStatus }}</td>
|
||||||
|
<td style="white-space: nowrap">
|
||||||
|
<IconInfoBtn @on-click="openInfoModal(item)" />
|
||||||
|
<IconModifyBtn @on-click="openModifyModal(item)" />
|
||||||
|
<IconDownloadBtn @on-click="openDownloadModal(item)" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</v-table>
|
||||||
|
</v-sheet>
|
||||||
|
<v-card-actions class="text-center mt-8 justify-center">
|
||||||
|
<v-pagination
|
||||||
|
v-model="data.params.pageNum"
|
||||||
|
:length="data.pageLength"
|
||||||
|
:total-visible="10"
|
||||||
|
color="primary"
|
||||||
|
rounded="circle"
|
||||||
|
@update:model-value="getData"
|
||||||
|
></v-pagination>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-col>
|
||||||
|
</v-card>
|
||||||
|
</v-card>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
<v-dialog v-model="data.isModalVisible" max-width="600" persistent>
|
||||||
|
<FormComponent
|
||||||
|
:edit-data="data.selectedData"
|
||||||
|
:mode="data.modalMode"
|
||||||
|
@close-modal="closeModal"
|
||||||
|
@handle-data="saveData"
|
||||||
|
:user-option="data.userOption"
|
||||||
|
/>
|
||||||
|
</v-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
editData: Object,
|
||||||
|
mode: String,
|
||||||
|
userOption: Array,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(["handle-data", "close-modal"]);
|
||||||
|
|
||||||
|
const visible = ref(true);
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
emit("handle-data", form.value);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-dialog v-model="visible" max-width="500" persistent>
|
||||||
|
<v-card class="rounded-lg overflow-hidden">
|
||||||
|
<!-- 타이틀 영역 -->
|
||||||
|
<v-card-title
|
||||||
|
class="text-white font-weight-bold text-h6"
|
||||||
|
style="background-color: #1976d2"
|
||||||
|
>
|
||||||
|
Create Experiment
|
||||||
|
</v-card-title>
|
||||||
|
|
||||||
|
<v-card-text class="pa-6">
|
||||||
|
<v-form @submit.prevent="submit">
|
||||||
|
<div class="mb-5">
|
||||||
|
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||||
|
>Experiment Name</label
|
||||||
|
>
|
||||||
|
<v-text-field
|
||||||
|
v-model="form.name"
|
||||||
|
variant="outlined"
|
||||||
|
dense
|
||||||
|
hide-details
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||||
|
>Description</label
|
||||||
|
>
|
||||||
|
<v-textarea
|
||||||
|
v-model="form.description"
|
||||||
|
variant="outlined"
|
||||||
|
rows="3"
|
||||||
|
dense
|
||||||
|
hide-details
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</v-form>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
|
<v-card-actions class="justify-end px-6 pb-4">
|
||||||
|
<v-btn color="primary" class="mr-2" @click="submit" variant="flat">
|
||||||
|
CREATE
|
||||||
|
</v-btn>
|
||||||
|
<v-btn variant="text" @click="$emit('close-modal')">CANCEL</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,504 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||||
|
import IconInfoBtn from "@/components/button/IconInfoBtn.vue";
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
import FormComponent from "@/components/run/experiment/FormComponent.vue";
|
||||||
|
import ViewComponent from "@/components/run/experiment/ViewComponent.vue";
|
||||||
|
|
||||||
|
// const store = commonStore();
|
||||||
|
const detailDialog = ref(false);
|
||||||
|
const viewComponent = ref(false);
|
||||||
|
const selectedExperiment = ref<{
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
createdDate: string;
|
||||||
|
createdID: string;
|
||||||
|
} | null>(null);
|
||||||
|
const tableHeader = [
|
||||||
|
{
|
||||||
|
label: "Experiment Name",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Description",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Created Date",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Created ID",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Action",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const searchOptions = [
|
||||||
|
{ searchType: "All", searchText: "" },
|
||||||
|
{ searchType: "Experiment Name", searchText: "name" },
|
||||||
|
{ searchType: "Description", searchText: "description" },
|
||||||
|
{ searchType: "Created Date", searchText: "createdDate" },
|
||||||
|
{ searchType: "Created ID", searchText: "createdID" },
|
||||||
|
];
|
||||||
|
const pageSizeOptions = [
|
||||||
|
{ text: "10 페이지", value: 10 },
|
||||||
|
{ text: "50 페이지", value: 50 },
|
||||||
|
{ text: "100 페이지", value: 100 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = ref({
|
||||||
|
params: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
searchType: "",
|
||||||
|
searchText: "",
|
||||||
|
},
|
||||||
|
results: [],
|
||||||
|
totalDataLength: 0,
|
||||||
|
pageLength: 0,
|
||||||
|
modalMode: "",
|
||||||
|
selectedData: null,
|
||||||
|
allSelected: false,
|
||||||
|
selected: [],
|
||||||
|
isModalVisible: false,
|
||||||
|
isConfirmDialogVisible: false,
|
||||||
|
userOption: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const getCodeList = () => {
|
||||||
|
// UserService.search(data.value.params).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.userOption = d.data.userList;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const getData = () => {
|
||||||
|
const params = { ...data.value.params };
|
||||||
|
if (params.searchType === "" || params.searchText === "") {
|
||||||
|
delete params.searchType;
|
||||||
|
delete params.searchText;
|
||||||
|
}
|
||||||
|
data.value.results = [
|
||||||
|
{
|
||||||
|
name: "Baseline Model Training",
|
||||||
|
description: "기본 모델 구조로 학습 성능 측정",
|
||||||
|
createdDate: "2025-04-28",
|
||||||
|
createdID: "ADMIN_001",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Batch Size Tuning",
|
||||||
|
description: "배치 사이즈 변경에 따른 학습 성능",
|
||||||
|
createdDate: "2025-04-20",
|
||||||
|
createdID: "ADMIN_001",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Learning Rate Sweep",
|
||||||
|
description: "러닝레이트 변경에 따른 손실 ",
|
||||||
|
createdDate: "2025-04-20",
|
||||||
|
createdID: "ADMIN_001",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Optimizer Comparison",
|
||||||
|
description: "Adam, SGD 등 옵티마이저 종류",
|
||||||
|
createdDate: "2025-04-20",
|
||||||
|
createdID: "ADMIN_001",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Model Architecture A vs B",
|
||||||
|
description: "서로 다른 모델 구조",
|
||||||
|
createdDate: "2025-01-28",
|
||||||
|
createdID: "ADMIN_001",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
data.value.totalDataLength = data.value.results.length;
|
||||||
|
setPaginationLength();
|
||||||
|
// DeviceService.search(params).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.results = d.data.deviceList;
|
||||||
|
// data.value.totalDataLength = d.data.totalCount;
|
||||||
|
// setTimeout(() => {
|
||||||
|
// setPaginationLength();
|
||||||
|
// }, 200);
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "디바이스 조회 실패",
|
||||||
|
// color: "error",
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// DeviceService.search().then((d) => {
|
||||||
|
// data.value.totalDataLength = d.data.totalCount;
|
||||||
|
// setTimeout(() => {
|
||||||
|
// setPaginationLength();
|
||||||
|
// }, 200);
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const setPaginationLength = () => {
|
||||||
|
if (data.value.totalDataLength % data.value.params.pageSize === 0) {
|
||||||
|
data.value.pageLength =
|
||||||
|
data.value.totalDataLength / data.value.params.pageSize;
|
||||||
|
} else {
|
||||||
|
data.value.pageLength = Math.ceil(
|
||||||
|
data.value.totalDataLength / data.value.params.pageSize,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveData = (formData) => {
|
||||||
|
if (data.value.modalMode === "create") {
|
||||||
|
// DeviceService.add(formData).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.isModalVisible = false;
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "등록 되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
// changePageNum(1);
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
} else {
|
||||||
|
// DeviceService.update(formData.deviceKey, formData).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.isModalVisible = false;
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "수정 되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
// changePageNum();
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeData = (value) => {
|
||||||
|
let removeList = value ? value : data.value.selected;
|
||||||
|
const remove = (code) => {
|
||||||
|
// return DeviceService.delete(code).then((d) => {
|
||||||
|
// if (d.status !== 200) {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (removeList.length === 1) {
|
||||||
|
remove(removeList[0].deviceKey).then(() => {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
|
||||||
|
// text: "삭제되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
changePageNum();
|
||||||
|
data.value.isConfirmDialogVisible = false;
|
||||||
|
data.value.selected = [];
|
||||||
|
data.value.allSelected = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
|
||||||
|
() => {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "모두 삭제되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
changePageNum();
|
||||||
|
data.value.isConfirmDialogVisible = false;
|
||||||
|
data.value.selected = [];
|
||||||
|
data.value.allSelected = false;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveData = () => {
|
||||||
|
if (data.value.selected.length === 0) {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "삭제 할 데이터를 선택해주세요. ",
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (data.value.allSelected || data.value.selected.length !== 1) {
|
||||||
|
data.value.isConfirmDialogVisible = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//리스트로 삭제 할때
|
||||||
|
removeData(undefined);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changePageNum = (page) => {
|
||||||
|
data.value.params.pageNum = page;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDetail = (item: {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
createdDate: string;
|
||||||
|
createdID: string;
|
||||||
|
}) => {
|
||||||
|
selectedExperiment.value = item;
|
||||||
|
viewComponent.value = true;
|
||||||
|
};
|
||||||
|
const closeDetail = () => {
|
||||||
|
viewComponent.value = false;
|
||||||
|
selectedExperiment.value = null;
|
||||||
|
};
|
||||||
|
const openCreateModal = () => {
|
||||||
|
data.value.selectedData = null;
|
||||||
|
data.value.modalMode = "create";
|
||||||
|
data.value.isModalVisible = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
data.value.isModalVisible = false;
|
||||||
|
data.value.selectedData = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSelectedAllData = () => {
|
||||||
|
data.value.selected = data.value.allSelected
|
||||||
|
? data.value.results.map((item) => {
|
||||||
|
return {
|
||||||
|
deviceKey: item.deviceKey,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
getCodeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="w-100" v-if="!viewComponent">
|
||||||
|
<!-- <v-dialog v-model="data.isModalVisible" max-width="600" persistent>
|
||||||
|
<FormComponent
|
||||||
|
:edit-data="data.selectedData"
|
||||||
|
:mode="data.modalMode"
|
||||||
|
@close-modal="closeModal"
|
||||||
|
@handle-data="saveData"
|
||||||
|
:user-option="data.userOption"
|
||||||
|
/>
|
||||||
|
</v-dialog>
|
||||||
|
<v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">
|
||||||
|
<ConfirmDialogComponent
|
||||||
|
@cancel="data.isConfirmDialogVisible = false"
|
||||||
|
@delete="removeData(undefined)"
|
||||||
|
@init="((data.selected = []), (data.allSelected = false))"
|
||||||
|
/>
|
||||||
|
</v-dialog> -->
|
||||||
|
<v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
|
||||||
|
<v-card
|
||||||
|
flat
|
||||||
|
class="bg-shades-transparent d-flex flex-column align-center justify-center w-100"
|
||||||
|
>
|
||||||
|
<v-card flat class="bg-shades-transparent w-100">
|
||||||
|
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
|
||||||
|
<div class="d-flex flex-row justify-start align-center">
|
||||||
|
<div class="text-primary">Experiment</div>
|
||||||
|
</div>
|
||||||
|
</v-card-item>
|
||||||
|
</v-card>
|
||||||
|
<v-card flat class="bg-shades-transparent w-100">
|
||||||
|
<v-card flat class="bg-shades-transparent mb-4">
|
||||||
|
<div class="d-flex justify-center flex-wrap align-center">
|
||||||
|
<v-responsive
|
||||||
|
max-width="180"
|
||||||
|
min-width="180"
|
||||||
|
class="mr-3 mt-3 mb-3"
|
||||||
|
>
|
||||||
|
<v-select
|
||||||
|
v-model="data.params.searchType"
|
||||||
|
label="검색조건"
|
||||||
|
density="compact"
|
||||||
|
:items="searchOptions"
|
||||||
|
item-title="searchType"
|
||||||
|
item-value="searchText"
|
||||||
|
hide-details
|
||||||
|
></v-select>
|
||||||
|
</v-responsive>
|
||||||
|
<v-responsive min-width="540" max-width="540">
|
||||||
|
<v-text-field
|
||||||
|
v-model="data.params.searchText"
|
||||||
|
label="검색어"
|
||||||
|
density="compact"
|
||||||
|
clearable
|
||||||
|
required
|
||||||
|
class="mt-3 mb-3"
|
||||||
|
hide-details
|
||||||
|
@keyup.enter="changePageNum(1)"
|
||||||
|
></v-text-field>
|
||||||
|
</v-responsive>
|
||||||
|
|
||||||
|
<div class="ml-3">
|
||||||
|
<v-btn
|
||||||
|
size="large"
|
||||||
|
color="primary"
|
||||||
|
:rounded="5"
|
||||||
|
@click="changePageNum(1)"
|
||||||
|
>
|
||||||
|
<v-icon> mdi-magnify</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
|
||||||
|
<v-sheet
|
||||||
|
class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
|
||||||
|
>
|
||||||
|
<v-sheet class="d-flex flex-wrap me-auto bg-shades-transparent">
|
||||||
|
<v-sheet
|
||||||
|
class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
|
||||||
|
>
|
||||||
|
<v-chip color="primary"
|
||||||
|
>총 {{ data.totalDataLength.toLocaleString() }}개
|
||||||
|
</v-chip>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet class="bg-shades-transparent">
|
||||||
|
<v-responsive max-width="140" min-width="140" class="mb-2">
|
||||||
|
<v-select
|
||||||
|
v-model="data.params.pageSize"
|
||||||
|
density="compact"
|
||||||
|
:items="pageSizeOptions"
|
||||||
|
item-title="text"
|
||||||
|
item-value="value"
|
||||||
|
variant="outlined"
|
||||||
|
color="primary"
|
||||||
|
hide-details
|
||||||
|
@update:model-value="changePageNum(1)"
|
||||||
|
></v-select>
|
||||||
|
</v-responsive>
|
||||||
|
</v-sheet>
|
||||||
|
</v-sheet>
|
||||||
|
<v-sheet class="justify-end mb-2">
|
||||||
|
<v-btn color="primary" @click="openCreateModal"
|
||||||
|
>Create Experiment
|
||||||
|
</v-btn>
|
||||||
|
</v-sheet>
|
||||||
|
</v-sheet>
|
||||||
|
|
||||||
|
<v-card class="rounded-lg pa-8">
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-sheet>
|
||||||
|
<v-table
|
||||||
|
density="comfortable"
|
||||||
|
fixed-header
|
||||||
|
height="625"
|
||||||
|
col-md-12
|
||||||
|
col-12
|
||||||
|
overflow-x-auto
|
||||||
|
>
|
||||||
|
<colgroup>
|
||||||
|
<col
|
||||||
|
v-for="(item, i) in tableHeader"
|
||||||
|
:key="i"
|
||||||
|
:style="`width:${item.width}`"
|
||||||
|
/>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<!-- <th>
|
||||||
|
<v-checkbox
|
||||||
|
v-model="data.allSelected"
|
||||||
|
style="min-width: 36px"
|
||||||
|
:indeterminate="data.allSelected === true"
|
||||||
|
hide-details
|
||||||
|
@change="getSelectedAllData"
|
||||||
|
></v-checkbox>
|
||||||
|
</th> -->
|
||||||
|
<th
|
||||||
|
v-for="(item, i) in tableHeader"
|
||||||
|
:key="i"
|
||||||
|
class="text-center font-weight-bold"
|
||||||
|
:style="`${item.style}`"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="text-body-2">
|
||||||
|
<tr
|
||||||
|
v-for="(item, i) in data.results"
|
||||||
|
:key="i"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<!-- <td>
|
||||||
|
<v-checkbox
|
||||||
|
v-model="data.selected"
|
||||||
|
hide-details
|
||||||
|
:value="{
|
||||||
|
deviceKey: item.deviceKey,
|
||||||
|
}"
|
||||||
|
></v-checkbox>
|
||||||
|
</td> -->
|
||||||
|
<td>{{ item.name }}</td>
|
||||||
|
<td>{{ item.description }}</td>
|
||||||
|
<td>{{ item.createdDate }}</td>
|
||||||
|
<td>{{ item.createdID }}</td>
|
||||||
|
<td style="white-space: nowrap">
|
||||||
|
<IconInfoBtn @on-click="openDetail(item)" />
|
||||||
|
<IconDeleteBtn
|
||||||
|
@on-click="
|
||||||
|
removeData([{ deviceKey: item.deviceKey }])
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</v-table>
|
||||||
|
</v-sheet>
|
||||||
|
<v-card-actions class="text-center mt-8 justify-center">
|
||||||
|
<v-pagination
|
||||||
|
v-model="data.params.pageNum"
|
||||||
|
:length="data.pageLength"
|
||||||
|
:total-visible="10"
|
||||||
|
color="primary"
|
||||||
|
rounded="circle"
|
||||||
|
@update:model-value="getData"
|
||||||
|
></v-pagination>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-col>
|
||||||
|
</v-card>
|
||||||
|
</v-card>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
<v-dialog v-model="data.isModalVisible" max-width="600" persistent>
|
||||||
|
<FormComponent
|
||||||
|
:edit-data="data.selectedData"
|
||||||
|
:mode="data.modalMode"
|
||||||
|
@close-modal="closeModal"
|
||||||
|
@handle-data="saveData"
|
||||||
|
:user-option="data.userOption"
|
||||||
|
/>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
|
<div class="w-100" v-else>
|
||||||
|
<ViewComponent :experiment="selectedExperiment" @close="closeDetail" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@ -0,0 +1,386 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||||
|
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||||
|
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||||
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
|
||||||
|
// const store = commonStore();
|
||||||
|
|
||||||
|
const tableHeader = [
|
||||||
|
{
|
||||||
|
label: "Run Name",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Status",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Duration",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Pipeline",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Start Time",
|
||||||
|
width: "20%",
|
||||||
|
style: "word-break: keep-all;",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const experimentInfo = ref({
|
||||||
|
experimentName: "Baseline Model Training",
|
||||||
|
projectName: "배터리 상태 예측 모델 프로젝트",
|
||||||
|
createdDate: "2025-02-06",
|
||||||
|
createdId: "ADMIN_001",
|
||||||
|
description: "기본 모델 구조로 학습 성능 측정",
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = ref({
|
||||||
|
params: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
searchType: "",
|
||||||
|
searchText: "",
|
||||||
|
},
|
||||||
|
results: [],
|
||||||
|
totalDataLength: 0,
|
||||||
|
pageLength: 0,
|
||||||
|
modalMode: "",
|
||||||
|
selectedData: null,
|
||||||
|
allSelected: false,
|
||||||
|
selected: [],
|
||||||
|
isModalVisible: false,
|
||||||
|
isConfirmDialogVisible: false,
|
||||||
|
userOption: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const getCodeList = () => {
|
||||||
|
// UserService.search(data.value.params).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.userOption = d.data.userList;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const getData = () => {
|
||||||
|
const params = { ...data.value.params };
|
||||||
|
if (params.searchType === "" || params.searchText === "") {
|
||||||
|
delete params.searchType;
|
||||||
|
delete params.searchText;
|
||||||
|
}
|
||||||
|
data.value.results = [
|
||||||
|
{
|
||||||
|
name: "run-batch32-lr0.001",
|
||||||
|
status: "Succeeded",
|
||||||
|
Duration: "0:00:21",
|
||||||
|
configProgress: "0/2",
|
||||||
|
Pipeline: "baseline_train_pipeline",
|
||||||
|
registDt: "2025-06-10T00:00:00Z",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "run-batch64-lr0.001",
|
||||||
|
status: "Failed",
|
||||||
|
Duration: "0:00:21",
|
||||||
|
configProgress: "1/3",
|
||||||
|
Pipeline: "baseline_train_pipeline",
|
||||||
|
registDt: "2025-06-09T00:00:00Z",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "run-batch32-lr0.0005",
|
||||||
|
status: "Succeeded",
|
||||||
|
Duration: "0:00:21",
|
||||||
|
configProgress: "0/3",
|
||||||
|
Pipeline: "baseline_train_pipeline",
|
||||||
|
registDt: "2025-06-01T00:00:00Z",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "run-batch64-lr0.0005",
|
||||||
|
status: "Running",
|
||||||
|
Duration: "0:00:21",
|
||||||
|
configProgress: "1/3",
|
||||||
|
Pipeline: "baseline_train_pipeline",
|
||||||
|
registDt: "2025-05-29T00:00:00Z",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "run-augmented-data",
|
||||||
|
status: "Succeeded",
|
||||||
|
Duration: "0:00:21",
|
||||||
|
configProgress: "0/3",
|
||||||
|
Pipeline: "baseline_train_pipeline",
|
||||||
|
registDt: "2025-05-31T00:00:00Z",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
data.value.totalDataLength = 5;
|
||||||
|
// DeviceService.search(params).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.results = d.data.deviceList;
|
||||||
|
// data.value.totalDataLength = d.data.totalCount;
|
||||||
|
// setTimeout(() => {
|
||||||
|
// setPaginationLength();
|
||||||
|
// }, 200);
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "디바이스 조회 실패",
|
||||||
|
// color: "error",
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// DeviceService.search().then((d) => {
|
||||||
|
// data.value.totalDataLength = d.data.totalCount;
|
||||||
|
// setTimeout(() => {
|
||||||
|
// setPaginationLength();
|
||||||
|
// }, 200);
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// const setPaginationLength = () => {
|
||||||
|
// if (data.value.totalDataLength % data.value.params.pageSize === 0) {
|
||||||
|
// data.value.pageLength =
|
||||||
|
// data.value.totalDataLength / data.value.params.pageSize;
|
||||||
|
// } else {
|
||||||
|
// data.value.pageLength = Math.ceil(
|
||||||
|
// data.value.totalDataLength / data.value.params.pageSize,
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
const saveData = (formData) => {
|
||||||
|
if (data.value.modalMode === "create") {
|
||||||
|
// DeviceService.add(formData).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.isModalVisible = false;
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "등록 되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
// changePageNum(1);
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
} else {
|
||||||
|
// DeviceService.update(formData.deviceKey, formData).then((d) => {
|
||||||
|
// if (d.status === 200) {
|
||||||
|
// data.value.isModalVisible = false;
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "수정 되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
// changePageNum();
|
||||||
|
// } else {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeData = (value) => {
|
||||||
|
let removeList = value ? value : data.value.selected;
|
||||||
|
const remove = (code) => {
|
||||||
|
// return DeviceService.delete(code).then((d) => {
|
||||||
|
// if (d.status !== 200) {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: d,
|
||||||
|
// result: 500,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (removeList.length === 1) {
|
||||||
|
remove(removeList[0].deviceKey).then(() => {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "삭제되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
changePageNum();
|
||||||
|
data.value.isConfirmDialogVisible = false;
|
||||||
|
data.value.selected = [];
|
||||||
|
data.value.allSelected = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
|
||||||
|
() => {
|
||||||
|
// store.setSnackbarMsg({
|
||||||
|
// text: "모두 삭제되었습니다.",
|
||||||
|
// result: 200,
|
||||||
|
// });
|
||||||
|
changePageNum();
|
||||||
|
data.value.isConfirmDialogVisible = false;
|
||||||
|
data.value.selected = [];
|
||||||
|
data.value.allSelected = false;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const changePageNum = (page) => {
|
||||||
|
data.value.params.pageNum = page;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: "close"): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
getCodeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
|
||||||
|
<v-card
|
||||||
|
flat
|
||||||
|
class="bg-shades-transparent d-flex flex-column justify-center w-100"
|
||||||
|
>
|
||||||
|
<v-card flat class="bg-shades-transparent w-100">
|
||||||
|
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
|
||||||
|
<div class="d-flex flex-row justify-start align-center">
|
||||||
|
<div class="text-primary">View Details</div>
|
||||||
|
</div>
|
||||||
|
</v-card-item>
|
||||||
|
</v-card>
|
||||||
|
|
||||||
|
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
|
||||||
|
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||||
|
<span class="font-weight-bold">Experiment Information</span>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text class="px-4 pb-4 pt-2 d-flex justify-center">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center pa-3">Experiment Name</th>
|
||||||
|
<td class="text-left" colspan="3">
|
||||||
|
{{ experimentInfo.experimentName }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center pa-3">Project Name</th>
|
||||||
|
<td class="text-left" colspan="3">
|
||||||
|
{{ experimentInfo.projectName }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center pa-3">Created Date</th>
|
||||||
|
<td class="text-left">{{ experimentInfo.createdDate }}</td>
|
||||||
|
<th class="text-center pa-3">Created ID</th>
|
||||||
|
<td class="text-left">{{ experimentInfo.createdId }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-center pa-3">Description</th>
|
||||||
|
<td class="text-left" colspan="3">
|
||||||
|
{{ experimentInfo.description }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
<v-card flat class="bg-shades-transparent w-100">
|
||||||
|
<v-card class="rounded-lg pa-8">
|
||||||
|
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||||
|
<span class="font-weight-bold">Runs</span>
|
||||||
|
</v-card-title>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-sheet>
|
||||||
|
<v-table
|
||||||
|
density="comfortable"
|
||||||
|
fixed-header
|
||||||
|
height="300"
|
||||||
|
col-md-12
|
||||||
|
col-12
|
||||||
|
overflow-x-auto
|
||||||
|
>
|
||||||
|
<colgroup>
|
||||||
|
<col
|
||||||
|
v-for="(item, i) in tableHeader"
|
||||||
|
:key="i"
|
||||||
|
:style="`width:${item.width}`"
|
||||||
|
/>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th
|
||||||
|
v-for="(item, i) in tableHeader"
|
||||||
|
:key="i"
|
||||||
|
class="text-center font-weight-bold"
|
||||||
|
:style="`${item.style}`"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="text-body-2">
|
||||||
|
<tr
|
||||||
|
v-for="(item, i) in data.results"
|
||||||
|
:key="i"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<td>{{ item.name }}</td>
|
||||||
|
<td>{{ item.status }}</td>
|
||||||
|
<td>{{ item.Duration }}</td>
|
||||||
|
<td>{{ item.Pipeline }}</td>
|
||||||
|
<td>{{ item.registDt }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</v-table>
|
||||||
|
</v-sheet>
|
||||||
|
<v-card-actions class="text-center mt-8 justify-center">
|
||||||
|
<v-pagination
|
||||||
|
v-model="data.params.pageNum"
|
||||||
|
:length="data.pageLength"
|
||||||
|
:total-visible="10"
|
||||||
|
color="primary"
|
||||||
|
rounded="circle"
|
||||||
|
@update:model-value="getData"
|
||||||
|
></v-pagination>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-col>
|
||||||
|
<v-sheet class="d-flex justify-end mb-2">
|
||||||
|
<v-btn color="primary" @click="emit('close')"> Back to List </v-btn>
|
||||||
|
</v-sheet>
|
||||||
|
</v-card>
|
||||||
|
</v-card>
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.v-card-text {
|
||||||
|
width: 100% !important;
|
||||||
|
border-collapse: collapse;
|
||||||
|
/* 전체 테이블 1px 테두리 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-card-text th {
|
||||||
|
font-size: 20px;
|
||||||
|
min-width: 400px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.v-card-text td {
|
||||||
|
font-size: 16px;
|
||||||
|
min-width: 600px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-align: left;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
.v-card-text tr:nth-child(odd) {
|
||||||
|
background-color: rgba(255, 255, 255, 0.02);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,10 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import ListComponent from "@/components/run/excutions/ListComponent.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<ListComponent />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass"></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import ListComponent from "@/components/run/experiment/ListComponent.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<ListComponent />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass"></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
<script setup>
|
<script setup lang="ts">
|
||||||
|
import ListComponent from "@/components/home/ListComponent.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<ListComponent />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,11 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import ListComponent from "@/components/workflow/ListComponent.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ListComponent/>
|
<ListComponent />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass"></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -0,0 +1,92 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
const projects = ref([
|
||||||
|
{
|
||||||
|
title: "배터리 상태 예측 모델 프로젝트",
|
||||||
|
creator: "ADMIN_001",
|
||||||
|
date: "2025-04-22",
|
||||||
|
description:
|
||||||
|
"센서 데이터를 기반으로 배터리 상태를 예측하는 프로젝트입니다.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "운전행동 예측 모델 프로젝트",
|
||||||
|
creator: "ADMIN_001",
|
||||||
|
date: "2025-03-02",
|
||||||
|
description: "급가속, 급제동 등 운전 행동을 기반으로 모델을 예측합니다.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "강화학습 기반 경로 생성 모델 프로젝트",
|
||||||
|
creator: "ADMIN_001",
|
||||||
|
date: "2025-01-20",
|
||||||
|
description: "지도 기반 환경에서 최적 경로를 생성하는 모델입니다.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "교통 표지판 인식모델 프로젝트",
|
||||||
|
creator: "USER_001",
|
||||||
|
date: "2024-12-12",
|
||||||
|
description: "지도 기반 환경에서 최적 경로를 생성하는 모델입니다.",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<v-container class="mt-12" style="max-width: 1600px">
|
||||||
|
<v-row class="mb-6" align="center" justify="space-between">
|
||||||
|
<v-col cols="auto">
|
||||||
|
<h2 class="font-weight-bold text-h5">Project Selection</h2>
|
||||||
|
</v-col>
|
||||||
|
<v-col cols="auto">
|
||||||
|
<v-btn
|
||||||
|
color="secondary"
|
||||||
|
variant="flat"
|
||||||
|
class="text-white font-weight-bold"
|
||||||
|
@click="onAddProject"
|
||||||
|
>
|
||||||
|
<v-icon left icon="mdi-plus" size="20" />
|
||||||
|
Create Project
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<v-row dense>
|
||||||
|
<v-col
|
||||||
|
v-for="(project, index) in projects"
|
||||||
|
:key="index"
|
||||||
|
cols="12"
|
||||||
|
sm="6"
|
||||||
|
md="6"
|
||||||
|
lg="6"
|
||||||
|
>
|
||||||
|
<v-card
|
||||||
|
class="pa-4"
|
||||||
|
color="primary"
|
||||||
|
variant="elevated"
|
||||||
|
elevation="6"
|
||||||
|
rounded="lg"
|
||||||
|
@click="() => console.log(`Selected: ${project.title}`)"
|
||||||
|
>
|
||||||
|
<v-card-title class="d-flex align-center">
|
||||||
|
<v-icon color="#6EC1E4" icon="mdi-file" start size="18" />
|
||||||
|
<h4>{{ project.title }}</h4>
|
||||||
|
</v-card-title>
|
||||||
|
|
||||||
|
<v-card-subtitle
|
||||||
|
class="text-white text-caption d-flex justify-space-between"
|
||||||
|
>
|
||||||
|
<span>생성자: {{ project.creator }}</span>
|
||||||
|
<span>등록일: {{ project.date }}</span>
|
||||||
|
</v-card-subtitle>
|
||||||
|
|
||||||
|
<v-card-text
|
||||||
|
class="text-white mt-3 text-body-2"
|
||||||
|
style="white-space: normal"
|
||||||
|
>
|
||||||
|
{{ project.description }}
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
Loading…
Reference in new issue