You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
552 lines
17 KiB
552 lines
17 KiB
11 months ago
|
<script setup lang="ts">
|
||
|
|
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||
|
|
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||
|
|
import IconSettingBtn from "@/components/button/IconSettingBtn.vue";
|
||
|
|
// import FormComponent from "@/components/device/FormComponent.vue";
|
||
|
|
import { onMounted, ref, watch } from "vue";
|
||
|
|
import ViewComponent from "@/components/deployment/ViewComponent.vue";
|
||
|
|
import DeploymentDialog from "@/components/atoms/organisms/DeploymentDialog.vue";
|
||
|
|
// const store = commonStore();
|
||
|
|
|
||
|
|
const openView = ref(false);
|
||
|
|
const isEditVisible = ref(false);
|
||
|
|
const tableHeader = [
|
||
|
|
{ label: "No", width: "5%", style: "word-break: keep-all;" },
|
||
|
|
{ label: "Model Name", width: "20%", style: "word-break: keep-all;" },
|
||
|
|
{ label: "Version", width: "10%", style: "word-break: keep-all;" },
|
||
|
|
{ label: "Duration", width: "10%", style: "word-break: keep-all;" },
|
||
|
|
{ label: "Deploy Status", width: "10%", style: "word-break: keep-all;" },
|
||
|
|
{ label: "Download Status", width: "10%", style: "word-break: keep-all;" },
|
||
|
|
{ label: "Deployed At", width: "15%", style: "word-break: keep-all;" },
|
||
|
|
{ label: "Action", width: "10%", style: "word-break: keep-all;" },
|
||
|
|
];
|
||
|
|
|
||
|
|
const searchOptions = [
|
||
|
|
{ searchType: "전체", searchText: "" },
|
||
|
|
{ searchType: "디바이스 별칭", searchText: "deviceAlias" },
|
||
|
|
{ searchType: "디바이스 키", searchText: "deviceKey" },
|
||
|
|
{ searchType: "사용자", searchText: "userId" },
|
||
|
|
{ searchType: "디바이스 이름", searchText: "deviceName" },
|
||
|
|
{ searchType: "디바이스 모델", searchText: "deviceModel" },
|
||
|
|
{ searchType: "디바이스 OS", searchText: "deviceOs" },
|
||
|
|
];
|
||
|
|
|
||
|
|
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: [],
|
||
|
|
isEditVisible: false,
|
||
|
|
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 = () => {
|
||
|
|
data.value.results = [
|
||
|
|
{
|
||
|
|
no: 23,
|
||
|
|
modelName: "ImageClassifier",
|
||
|
|
version: 2,
|
||
|
|
duration: "-",
|
||
|
|
deployStatus: "failure",
|
||
|
|
downloadStatus: "failure",
|
||
|
|
deployedAt: "2025-04-28",
|
||
|
|
key: 23,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
no: 22,
|
||
|
|
modelName: "ImageClassifier",
|
||
|
|
version: 1,
|
||
|
|
duration: "21s",
|
||
|
|
deployStatus: "failure",
|
||
|
|
downloadStatus: "failure",
|
||
|
|
deployedAt: "2025-03-21",
|
||
|
|
key: 22,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
no: 21,
|
||
|
|
modelName: "LaneDetection",
|
||
|
|
version: 1,
|
||
|
|
duration: "12s",
|
||
|
|
deployStatus: "success",
|
||
|
|
downloadStatus: "failure",
|
||
|
|
deployedAt: "2025-03-19",
|
||
|
|
key: 21,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
no: 20,
|
||
|
|
modelName: "CustomerChurn",
|
||
|
|
version: 1,
|
||
|
|
duration: "-",
|
||
|
|
deployStatus: "in_progress",
|
||
|
|
downloadStatus: "-",
|
||
|
|
deployedAt: "2025-02-08",
|
||
|
|
key: 20,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
no: 19,
|
||
|
|
modelName: "AnomalyDetection",
|
||
|
|
version: 1,
|
||
|
|
duration: "20s",
|
||
|
|
deployStatus: "success",
|
||
|
|
downloadStatus: "success",
|
||
|
|
deployedAt: "2025-02-06",
|
||
|
|
key: 19,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
no: 18,
|
||
|
|
modelName: "TimeSeriesForecast",
|
||
|
|
version: 2,
|
||
|
|
duration: "19s",
|
||
|
|
deployStatus: "success",
|
||
|
|
downloadStatus: "success",
|
||
|
|
deployedAt: "2025-01-28",
|
||
|
|
key: 18,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
no: 17,
|
||
|
|
modelName: "TextSentiment",
|
||
|
|
version: 2,
|
||
|
|
duration: "20s",
|
||
|
|
deployStatus: "success",
|
||
|
|
downloadStatus: "success",
|
||
|
|
deployedAt: "2025-01-28",
|
||
|
|
key: 17,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
data.value.totalDataLength = data.value.results.length;
|
||
|
|
const total = data.value.totalDataLength;
|
||
|
|
const size = data.value.params.pageSize;
|
||
|
|
data.value.pageLength =
|
||
|
|
total % size === 0 ? total / size : Math.ceil(total / size);
|
||
|
|
};
|
||
|
|
|
||
|
|
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 handleRefresh = () => {
|
||
|
|
alert("Refresh 작업 진행중...");
|
||
|
|
};
|
||
|
|
const openInfoModal = () => {
|
||
|
|
data.value.modalMode = "info";
|
||
|
|
openView.value = true;
|
||
|
|
};
|
||
|
|
const closeDetail = () => {
|
||
|
|
openView.value = false;
|
||
|
|
};
|
||
|
|
const changePageNum = (page) => {
|
||
|
|
data.value.params.pageNum = page;
|
||
|
|
getData();
|
||
|
|
};
|
||
|
|
const openSettingModal = (selectedItem) => {
|
||
|
|
data.value.selectedData = selectedItem;
|
||
|
|
data.value.modalMode = "setting";
|
||
|
|
openView.value = true;
|
||
|
|
};
|
||
|
|
const openModifyModal = (selectedItem) => {
|
||
|
|
data.value.selectedData = selectedItem;
|
||
|
|
data.value.modalMode = "modify";
|
||
|
|
data.value.isModalVisible = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
const openDeploymentModal = () => {
|
||
|
|
data.value.selectedData = null;
|
||
|
|
data.value.modalMode = "create";
|
||
|
|
isEditVisible.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
const closeModal = () => {
|
||
|
|
data.value.isModalVisible = false;
|
||
|
|
data.value.selectedData = null;
|
||
|
|
};
|
||
|
|
const closeCreateModal = () => {
|
||
|
|
data.value.isModalVisible = false;
|
||
|
|
isEditVisible.value = 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="!openView">
|
||
|
|
<!-- <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">Deployment</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="info" class="mr-4" @click="handleRefresh"
|
||
|
|
>Refresh
|
||
|
|
</v-btn>
|
||
|
|
<v-btn color="info" @click="openDeploymentModal"
|
||
|
|
>Deployment</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 in data.results"
|
||
|
|
:key="item.no"
|
||
|
|
class="text-center"
|
||
|
|
>
|
||
|
|
<td>
|
||
|
|
<v-checkbox
|
||
|
|
v-model="data.selected"
|
||
|
|
:value="{ deviceKey: item.deviceKey }"
|
||
|
|
hide-details
|
||
|
|
style="min-width: 36px"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
<td>{{ item.no }}</td>
|
||
|
|
<td class="text-start">{{ item.modelName }}</td>
|
||
|
|
<td>{{ item.version }}</td>
|
||
|
|
<td>{{ item.duration }}</td>
|
||
|
|
|
||
|
|
<td>
|
||
|
|
<v-icon
|
||
|
|
v-if="item.deployStatus === 'success'"
|
||
|
|
color="success"
|
||
|
|
>
|
||
|
|
mdi-checkbox-marked-circle
|
||
|
|
</v-icon>
|
||
|
|
<v-icon
|
||
|
|
v-else-if="item.deployStatus === 'in_progress'"
|
||
|
|
spin
|
||
|
|
>
|
||
|
|
mdi-loading
|
||
|
|
</v-icon>
|
||
|
|
<v-icon v-else color="error"> mdi-close-circle </v-icon>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<v-icon
|
||
|
|
v-if="item.downloadStatus === 'success'"
|
||
|
|
color="success"
|
||
|
|
>
|
||
|
|
mdi-checkbox-marked-circle
|
||
|
|
</v-icon>
|
||
|
|
<v-icon
|
||
|
|
v-else-if="item.downloadStatus === 'in_progress'"
|
||
|
|
spin
|
||
|
|
>
|
||
|
|
mdi-loading
|
||
|
|
</v-icon>
|
||
|
|
<v-icon
|
||
|
|
v-else-if="item.downloadStatus === 'failure'"
|
||
|
|
color="error"
|
||
|
|
>
|
||
|
|
mdi-close-circle
|
||
|
|
</v-icon>
|
||
|
|
<span v-else>-</span>
|
||
|
|
</td>
|
||
|
|
<td>{{ item.deployedAt }}</td>
|
||
|
|
<td style="white-space: nowrap">
|
||
|
|
<IconInfoBtn @on-click="openInfoModal(item)" />
|
||
|
|
<IconDeployment @click="redeploy(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-dialog v-model="isEditVisible" max-width="800" persistent>
|
||
|
|
<DeploymentDialog
|
||
|
|
:edit-data="data.selectedData"
|
||
|
|
:mode="data.modalMode"
|
||
|
|
@close-modal="closeCreateModal"
|
||
|
|
@handle-data="saveData"
|
||
|
|
:user-option="data.userOption"
|
||
|
|
/>
|
||
|
|
</v-dialog>
|
||
|
|
</v-container>
|
||
|
|
</div>
|
||
|
|
<div class="w-100" v-else>
|
||
|
|
<ViewComponent @close="closeDetail" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|