File name
Commit message
Commit date
2023-07-26
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-07-27
File name
Commit message
Commit date
2023-07-26
2023-07-27
2023-07-27
File name
Commit message
Commit date
2023-07-27
2023-07-26
<template>
<div class="wrap">
<h2 style="color: #10833b" class="flex gap">
<img src="../../../resources/images/bar.png" alt="" />상황발생 정보 조회
</h2>
<div style="margin-left: 2rem; font-size: 13px" class="m-b3">
현황관제 > <em class="green2 lined">상황발생 정보 조회</em>
</div>
<div class="board-wrap ">
<table class="table2 m-b3">
<tr>
<th><label>날짜를 선택해주세요.</label></th>
<td>
<input type="date" name="" id="" />
<span>~</span>
<input type="date" name="" id="" />
</td>
<th>지역</th>
<td class="flex gap">
<label>시/도</label>
<div class="bg-white box">
<select name="" id="">
<option value="">대구광역시</option>
</select>
</div>
<label>시/군/구</label>
<div class="bg-white box">
<select name="" id="">
<option value="">서구</option>
</select>
</div>
<label>행정동</label>
<div class="bg-white box">
<select name="" id="">
<option value="">전체</option>
</select>
</div>
</td>
</tr>
<tr>
<th><label>상황명</label></th>
<td class="flex gap"><select name="" id="">
<option value="">전체</option>
<option value="">무단횡단</option>
<option value="">신호연장</option>
<option value="">신호위반</option>
</select>
<input type="text" />
<button type="button" class="btn-2 green-btn s-btn">조회</button></td>
</tr>
</table>
<div>
<table class="pc">
<!-- <colgroup>
<col style="width: 10%;">
<col style="width: 20%;">
<col style="width: 20%;">
<col style="width: 30%;">
<col style="width: 20%;">
</colgroup> -->
<thead>
<tr>
<th>No</th>
<th>발생일시</th>
<th>시/도</th>
<th>시/군/구</th>
<th>행정동</th>
<th>상황명</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in eventList"
:key="idx"
>
<td data-title="NO">{{ eventIdx - idx }}</td>
<td data-title="발생일시"> {{ item.ocrn_dt }}</td>
<td data-title="시/도">{{ item.sido_nm }}</td>
<td data-title="시/군/구">{{ item.sigungu_nm }}</td>
<td data-title="행정동">{{ item.dong_nm }}</td>
<td data-title="상황명">{{ item.type }}</td>
</tr>
</tbody>
</table>
<table class="mobile">
<colgroup>
<col style="width: 10%" />
<col style="width: 20%" />
</colgroup>
<tbody>
<tr>
<th>No</th>
<td></td>
</tr>
<tr>
<th>발생일시</th>
<td></td>
</tr>
<tr>
<th>시/도</th>
<td></td>
</tr>
<tr>
<th>시/군/구</th>
<td></td>
</tr>
<tr>
<th>행정동</th>
<td></td>
</tr>
<tr>
<th>상황명</th>
<td></td>
</tr>
</tbody>
</table>
<div class="modal-wrap" v-if="modal_1 == true">
<div class="modal-bg"></div>
<div class="modal">
<h2 class="flex">
상황발생 상세정보
<button type="button" class="gray-btn" @click="modal_1 = false">
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modalmain">
<h3>영재어린이집(서측)</h3>
<h4>동쪽횡단보도</h4>
<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr @click="modal_1 = true">
<td>발생일시</td>
<td>2023-05-03 14:48</td>
</tr>
<tr @click="modal_1 = true">
<td>상황명</td>
<td>무단횡단</td>
</tr>
<tr @click="modal_1 = true">
<td>신호상태</td>
<td>적색불</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="eventListSearch.currentPage"
:per-page="eventListSearch.perPage" :total-count="eventListCount" :max-range="5"
:click="eventSelectList" />
<div class="btn-wrap">
<router-link to="/UserManagement.page">
<span class="btn-2 green-btn">Excel로 저장</span>
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import dongSelectList from '../../component/dongSelectList.vue';
import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
export default {
data() {
return {
eventListSearch: {
currentPage: 1,
perPage: 10,
// startDate: null,
// endDate: null,
// searchDongCode: null,
},
eventListCount: 0,
eventList: [],
eventIdx: 0,
address: {},
modal_eventOne: false,
};
},
methods: {
eventSelectList: function() {
const vm = this;
axios({
url: "/statusControl/eventSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.eventListSearch,
})
.then(function(response) {
console.log("errorSelectList - response : ", response.data);
vm.eventListCount = response.data.eventListCount;
vm.eventList = response.data.eventList;
vm.eventIdx = response.data.eventListCount - (vm.eventListSearch.currentPage - 1) * response.data.eventList.length;
})
.catch(function(error) {
console.log("errorSelectList - error : ", error);
alert("상황발생 목록 조회 오류, 관리자에게 문의해주세요.");
});
},
},
watch: {},
computed: {},
components: {
PaginationButton: PaginationButton,
dongSelectList: dongSelectList
},
mounted() {
console.log("Main4 mounted");
this.eventSelectList();
},
};
</script>
<style scoped>
@media all and (max-width: 479px) {
.situ input {
width: 13rem;
}
.date input {
width: 10rem;
}
}
.mobile {
display: none;
}
.modal {
width: max-content;
}
.modalmain {
padding: 1rem;
}
.modalmain table tbody tr:nth-child(odd) {
background: #f7f6f6;
}
.modalmain table tbody tr:nth-child(even) {
background: #ffffff;
}
.modalmain table td {
border: 1px solid #eee;
}
.modal h2 {
background: #e5e5dd;
font-size: 2rem;
padding: 1rem;
}
.modal h3 {
font-size: 1.8rem;
border-bottom: 1px solid #eee;
padding: 1rem 0 0.2rem 0;
}
.modal h4 {
font-size: 1.6rem;
font-weight: 100;
padding: 0.2rem 0 1rem 0;
}
.modal button {
border: 0;
background: none;
height: 30px;
padding: 0 0 0 50rem;
cursor: pointer;
}
.modal button img {
width: 25px;
}
.txt-point {
color: #333;
}
.wrap {
width: 80%;
margin: 100px auto;
}
.wrap h2 {
font-size: 2.5rem;
}
.float-right {
float: right;
}
.clear-fix::after {
content: "";
display: block;
clear: both;
}
.search-wrap .float-right form > *:not(:last-child) {
margin-right: 1rem;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
th,
td {
border-left: none;
border-right: none;
}
table th {
padding: 15px;
color: #fff;
background-color: #13833b;
}
table td {
padding: 10px;
border-bottom: 1px solid #e5e5dd;
}
table tr:nth-child(odd) {
background-color: #f7f6f6;
}
table tr:nth-child(even) {
background-color: #fdfdf2;
}
.bottom-wrap {
position: relative;
padding: 1rem 0;
}
.btn-2 {
display: inline-block;
padding: 0.5rem 2rem;
font-size: 13.333px;
height: 3rem;
}
.pg-wrap {
text-align: center;
}
.pg-item {
display: inline-block;
padding: 10px;
color: #949292;
}
.search-wrap label {
width: 25%;
}
.pg-item.prev,
.pg-item.next,
.pg-item.active {
color: #13833b;
}
.btn-wrap {
position: absolute;
right: 0;
top: 1.5em;
z-index: 10;
}
.btn-wrap button {
cursor: pointer;
}
</style>