Compare commits
2 Commits
main
...
feature/ma
| Author | SHA1 | Date |
|---|---|---|
 jschoi
|
25e86d31a9 | 7 days ago |
|
jschoi
|
37c622e684 | 7 days ago |
@ -1,3 +1,9 @@
|
||||
import vuetify from 'eslint-config-vuetify'
|
||||
|
||||
export default vuetify()
|
||||
export default {
|
||||
vuetify(),
|
||||
'vue/attributes-order': 'off',
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import { defineEmits } from "vue";
|
||||
|
||||
const emit = defineEmits(["onClick"]);
|
||||
|
||||
const onClick = () => {
|
||||
emit("onClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-tooltip location="bottom" text="다운로드">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
@click="onClick"
|
||||
class="ma-1"
|
||||
icon="mdi-download"
|
||||
color="success"
|
||||
density="comfortable"
|
||||
elevation="0"
|
||||
size="small"
|
||||
v-bind="props"
|
||||
>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import { defineEmits } from "vue";
|
||||
|
||||
const emit = defineEmits(["onClick"]);
|
||||
|
||||
const onClick = () => {
|
||||
emit("onClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-tooltip location="bottom" text="정보">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
@click="onClick"
|
||||
class="ma-1"
|
||||
icon="mdi-file-document"
|
||||
color="info"
|
||||
density="comfortable"
|
||||
elevation="0"
|
||||
size="small"
|
||||
v-bind="props"
|
||||
>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
@ -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>
|
||||
|
||||
import ListComponent from "@/components/run/excutions/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ListComponent />
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
</style>
|
||||
<style scoped lang="sass"></style>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<script setup>
|
||||
|
||||
import ListComponent from "@/components/run/experiment/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ListComponent />
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
</style>
|
||||
<style scoped lang="sass"></style>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<script setup>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ListComponent from "@/components/home/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ListComponent />
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<script setup>
|
||||
|
||||
import ListComponent from "@/components/workflow/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ListComponent/>
|
||||
<ListComponent />
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
</style>
|
||||
<style scoped lang="sass"></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