File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="container">
<div class="content">
<div class="content-titleZone flex justify-between align-center">
<p class="box-title">다이어그램 목록</p>
<div class="search-bar">
<div class="flex justify-end align-center">
<input
type="date"
name="start-date"
id="start-date"
class="square-date"
:class="{ 'date-placeholder': false }"
data-placeholder="날짜 선택"
v-model="search_date.value"
@change="searchData()"
/>
<span class="coupler">~</span>
<input
type="date"
name="end-date"
id="end-date"
class="square-date ml5"
:class="{ 'date-placeholder': false }"
data-placeholder="날짜 선택"
v-model="search_date.value2"
@change="searchData()"
/>
<select
class="square-select ml5"
v-model="search_data1.value"
@change="searchData()"
>
<option :value="null">상태 전체</option>
<option value="success">성공</option>
<option value="fail">실패</option>
</select>
</div>
</div>
</div>
<div class="table-zone">
<table class="list-table">
<thead>
<tr>
<th>번호</th>
<th>총 노드수</th>
<th>실패 노드수</th>
<th>실패 노드명</th>
<th>실행일자</th>
<th>상태</th>
</tr>
</thead>
<tbody>
<tr
v-for="(rowdata, dataIndex) in logdata"
:key="dataIndex"
@click="handleRowClick(rowdata.log_id)"
>
<td>{{ dataIndex + 1 }}</td>
<td>{{ rowdata.total_node_count }}</td>
<td>{{ rowdata.fail_node_count }}</td>
<td>{{ rowdata.fail_node_name }}</td>
<td>{{ $getFullTime(rowdata.operation_date) }}</td>
<td>
<p
v-if="rowdata.state_info === 'success'"
class="flex justify-center align-center state green icon-area"
>
<svg-icon
type="mdi"
:width="21"
:height="21"
:path="checkPath"
></svg-icon>
<span>성공</span>
</p>
<p
v-else-if="rowdata.state_info === 'fail'"
class="flex justify-center align-center state red"
>
<svg-icon
type="mdi"
:width="21"
:height="21"
:path="xPath"
></svg-icon>
<span>실패</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<PaginationButton
v-model:currentPage="search.currentPage"
:perPage="search.perPage"
:totalCount="search.totalRows"
:maxRange="5"
:click="searchData"
/>
</div>
</div>
<!-- 모달 -->
<div v-if="isModalOpen" class="modal-wrapper">
<div class="modal-container list-modal">
<div class="modal-title">
<div class="flex justify-between align-center">
<h2 class="main-title flex80">로그 상세보기</h2>
<button class="close-btn" @click="closeModal">
<svg-icon
type="mdi"
:width="20"
:height="20"
:path="closePath"
></svg-icon>
</button>
</div>
</div>
<div class="modal-content-monthly" v-show="modalType == 'form-modal'">
<div class="flex justify-start align-center">
<div class="cunt-selectZone">
<p class="box-title">
로그분류
<select
v-model="searchdetail_data.value"
@change="searchDetailData"
>
<option :value="null">상태 전체</option>
<option value="success">성공</option>
<option value="fail">실패</option>
</select>
</p>
</div>
</div>
<table class="list-table blue">
<thead>
<tr>
<th>번호</th>
<th>작동일시</th>
<th>작동완료일시</th>
<th>노드명</th>
<th>호스트명</th>
<th>로그분류</th>
<th>로그메세지</th>
</tr>
</thead>
<tbody>
<tr v-for="(rowdata, dataIndex) in detaillogdata" :key="dataIndex">
<td>{{ dataIndex + 1 }}</td>
<td>{{ $getFullTime(rowdata.operation_date) }}</td>
<td>{{ $getFullTime(rowdata.operation_success_date) }}</td>
<td>{{ rowdata.node_name }}</td>
<td>{{ rowdata.creat_id }}</td>
<td>{{ rowdata.log_category }}</td>
<td class="text-over" title="-">{{ rowdata.log_message }}</td>
</tr>
</tbody>
</table>
<PaginationButton
v-model:currentPage="searchdetail.currentPage"
:perPage="searchdetail.perPage"
:totalCount="searchdetail.totalRows"
:maxRange="5"
:click="detaillogSelectListAll"
/>
</div>
<div class="modal-end flex justify-end">
<button
v-show="modalType === 'form-modal'"
class="blue-btn small-btn"
@click="closeModal"
>
확인
</button>
</div>
</div>
</div>
</template>
<script>
import PaginationButton from "../../component/PaginationButton.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import { mdiClose } from "@mdi/js";
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import DefaultSearchBar from "../../template/templateElement/DefaultSearchBar.vue";
import { useRoute } from "vue-router";
import axios from "axios";
export default {
components: {
PaginationButton: PaginationButton,
SvgIcon: SvgIcon,
DefaultSearchBar: DefaultSearchBar,
},
props: {
diagram_id: {
type: String, // 또는 String, 실제 타입에 맞게 설정
required: true,
},
},
data() {
return {
// 검색
search: this.$getDefaultSerchVO(),
search_date: this.$getDefaultSerchItem("operation_date", "dates"),
search_data1: this.$getDefaultSerchItem("state_info", "string"),
search_data2: {
key: "diagram_id",
value: this.diagram_id,
},
//상세보기 검색
searchdetail: this.$getDefaultSerchVO(),
searchdetail_data: this.$getDefaultSerchItem("log_category", "string"),
searchdetail_data1: {
key: null,
value: null,
},
//검색 데이터
searchPath: mdiMagnify,
startDate: true,
endDate: true,
closePath: mdiClose,
isModalOpen: false,
modalType: "form-modal",
checkPath: mdiCheckCircle,
xPath: mdiCloseCircle,
logdata: [],
detaillogdata: [],
logId: null,
diagram_id: this.diagram_id,
//현재 라우터의 정보
route: useRoute(),
// 페이지 경로 목록
pageList: [
{ path: "/", name: "대시보드" },
{ path: "/fileManagement.page", name: "파일 관리" },
{ path: "/hostManagement.page", name: "호스트 관리" },
{ path: "/scheduleManagement.page", name: "작업 스케줄 관리" },
{ path: "/scheduleLogManagement.page", name: "로그 관리" },
],
};
},
mounted() {
this.searchData();
},
watch: {
diagram_id(v) {
this.search_data2.value = v;
this.searchData();
},
},
methods: {
searchData() {
const vm = this;
let data = vm.search;
data.searchObjectList = [];
data.searchObjectList.push(this.search_date);
data.searchObjectList.push(this.search_data1);
data.searchObjectList.push(this.search_data2);
axios({
url: "/diagram/logSelectListAll.json",
method: "post",
headers: { "Content-Type": "application/json; charset=UTF-8" },
data: data,
})
.then(function (response) {
vm.search.currentPage = response.data.resultData.searchVO.currentPage;
vm.search.order = response.data.resultData.searchVO.order;
vm.search.orderASC = response.data.resultData.searchVO.orderASC;
vm.search.perPage = response.data.resultData.searchVO.perPage;
vm.search.searchObjectList = [];
vm.search.totalRows = response.data.resultData.searchVO.totalRows;
vm.logdata = response.data.resultData.logList;
})
.catch(function (error) {
vm.$showAlert(
"오류",
"처리 중 오류가 발생했습니다. 관리자에게 문의바랍니다."
);
});
},
searchDetailData() {
const vm = this;
let datadetail = vm.searchdetail;
datadetail.searchObjectList = [];
datadetail.searchObjectList.push(this.searchdetail_data);
this.detaillogSelectListAll();
},
openModal() {
this.isModalOpen = true;
},
closeModal() {
this.isModalOpen = false;
},
pathName() {
for (let i = 0; i < this.pageList.length; i++) {
if (this.route.path == this.pageList[i]["path"]) {
return this.pageList[i]["name"];
}
}
return "대시보드";
},
handleRowClick(logId) {
this.logId = logId;
this.detaillogSelectListAll();
this.openModal();
},
detaillogSelectListAll() {
const vm = this;
let datadetail = vm.searchdetail;
datadetail.searchObjectList = [];
datadetail.searchObjectList.push(this.searchdetail_data);
vm.searchdetail_data1.key = "log_id";
vm.searchdetail_data1.value = vm.logId;
datadetail.searchObjectList.push(this.searchdetail_data1);
axios({
url: "/diagram/detaillogSelectListAll.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: datadetail,
})
.then(function (response) {
vm.searchdetail.currentPage = response.data.resultData.searchVO.currentPage;
vm.searchdetail.order = response.data.resultData.searchVO.order;
vm.searchdetail.orderASC = response.data.resultData.searchVO.orderASC;
vm.searchdetail.perPage = response.data.resultData.searchVO.perPage;
vm.searchdetail.searchObjectList = [];
vm.searchdetail.totalRows = response.data.resultData.searchVO.totalRows;
vm.detaillogdata = response.data.resultData.logList;
})
.catch(function (error) {
alert("상품 주문에 오류가 발생했습니다.");
});
},
},
};
</script>
<style scoped>
.navigate_bar {
padding: 10px 0px;
font-size: 1.3rem;
}
</style>