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>지역</th>
<td class="flex gap"><dongSelectList
@setDongCd="setDongCd"
:nodeHiddenCk="true"
:crslk_azHiddenCk="true"
></dongSelectList></td>
<th><label class=" ">조회기간 </label></th>
<td><input
class=""
type="date"
value-format="yyyyMMdd"
v-model="crosswalkListSearch.startDate"
/>
<span> ~ </span>
<input
class=""
type="date"
value-format="yyyyMMdd"
v-model="crosswalkListSearch.endDate"
/></td>
</tr>
<tr>
<th> <label class=" ">상태 </label></th>
<td class="flex gap"><select name="" id="op">
<option value="">정상</option>
</select>
<button
type="button"
class="s-btn green-btn"
@click="crosswalkSelectList()"
>
조회
</button></td>
<th><label class="">우회차선 </label></th>
<td><select v-model="crosswalkListSearch.searchRightTurnType">
<option value="null" disabled>전체</option>
<option value="직각">직각</option>
<option value="곡선">곡선</option>
</select></td>
</tr>
</table>
<!-- <div class="search-wrap border">
<div class="flex-between mb-block">
<div class="gap gap-sub">
</div>
<div class="flex gap date">
<div class="bg-white flex gap">
</div>
</div>
</div>
<div class="flex-between">
<div class="flex-start gap statue">
<div class="bg-white flex gap box">
</div>
</div>
<div class="flex mb-block">
<div class="flex-start gap">
</div>
<div class="flex-start gap">
<label class="">왕복차선 </label>
<select v-model="crosswalkListSearch.searchRoundTripLane">
<option value="null" disabled>전체</option>
</select>
</div>
<div class="flex gap">
<label class="m-r">장비 </label>
<label>무단횡단</label>
<input
class="m-r"
type="checkbox"
v-model="crosswalkListSearch.jaywalking"
true-value="Y"
false-value="N"
/>
<label>신호연장</label>
<input
class="m-r"
type="checkbox"
v-model="crosswalkListSearch.signal"
true-value="Y"
false-value="N"
/>
<label>우회차량</label>
<input
class="m-r"
type="checkbox"
v-model="crosswalkListSearch.rightTurn"
true-value="Y"
false-value="N"
/>
</div>
</div>
</div>
</div> -->
</div>
<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>
<th>횡단보도명</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, idx) in crosswalkList"
:key="idx"
@click="crosswalkSelectOne(item)"
>
<td data-title="NO">{{ crosswalkIdx - idx }}</td>
<td data-title="설치일자">{{ item.instl_ymd }}</td>
<td data-title="시/도">{{ item.sido_nm }}</td>
<td data-title="시/군/구">{{ item.sigungu_nm }}</td>
<td data-title="행정동">{{ item.dong_nm }}</td>
<td data-titel="노드명">{{ item.node_name }}</td>
<td data-titel="횡단보도명">{{ item.crslk_nm }}</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>
<tr>
<th>횡단보도명</th>
<td></td>
</tr>
</tbody>
</table>
<div class="modal-wrap" v-if="modal_crosswalkOne == true">
<div class="modal-bg"></div>
<div class="modal">
<h2 class="flex-between">
횡단보도 상세정보
<button
type="button"
class="gray-btn"
@click="modal_crosswalkOne = false"
>
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modalmain">
<div class="flex-between">
<div class="img">무단횡단검지카메라 이미지</div>
<div class="img">무단횡단검지카메라 이미지</div>
<div class="img">신호연장검지카메라 이미지</div>
<div class="img">신호연장검지카메라 이미지</div>
<div class="img">우회차량검지카메라 이미지</div>
</div>
<table>
<colgroup>
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 20%" />
</colgroup>
<tbody>
<tr>
<td colspan="2">시/도</td>
<td colspan="2">{{ crosswalk.sido_nm }}</td>
</tr>
<tr>
<td colspan="2">시/군/구</td>
<td colspan="2">{{ crosswalk.sigungu_nm }}</td>
</tr>
<tr>
<td colspan="2">행정동</td>
<td colspan="2">{{ crosswalk.dong_nm }}</td>
</tr>
<tr>
<td colspan="2">노드명</td>
<td colspan="2">{{ crosswalk.node_name }}</td>
</tr>
<tr>
<td colspan="2">횡단보도명</td>
<td colspan="2">{{ crosswalk.crslk_nm }}</td>
</tr>
<tr>
<td rowspan="2">좌표</td>
<td>위도</td>
<td colspan="2">{{ crosswalk.lat }}</td>
</tr>
<tr>
<td>경도</td>
<td colspan="2">{{ crosswalk.lon }}</td>
</tr>
<tr>
<td rowspan="3">설치된 검시장비</td>
<td>무단횡단</td>
<td
colspan="2"
v-if="crosswalk.wtrms_crosng_eqpmn_instl_yn == 'y'"
>
설치
</td>
<td colspan="2" v-else>미설치</td>
</tr>
<tr>
<td>신호연장</td>
<td
colspan="2"
v-if="crosswalk.signl_extn_eqpmn_instl_yn == 'y'"
>
설치
</td>
<td colspan="2" v-else>미설치</td>
</tr>
<tr>
<td>우회전차량</td>
<td
colspan="2"
v-if="crosswalk.rittrn_vhcle_eqpmn_instl_yn == 'y'"
>
설치
</td>
<td colspan="2" v-else>미설치</td>
</tr>
<tr>
<td colspan="2">무단횡단 검지범위</td>
<td colspan="2">{{ crosswalk.wtrms_crosng_detct_rate }}%</td>
</tr>
<tr>
<td colspan="2">왕복차선</td>
<td colspan="2">{{ crosswalk.rndtp_tfclne_info }}차선</td>
</tr>
<tr>
<td colspan="2">우회전차선유무</td>
<td colspan="2">{{ crosswalk.rittrn_tfclne_yn }}</td>
</tr>
<tr>
<td colspan="2">우회전차선유형</td>
<td colspan="2">{{ crosswalk.rittrn_tfclne_ty }}</td>
</tr>
<tr>
<td colspan="2">횡단보도 유지보수 담당자</td>
<td colspan="2">{{ crosswalk.mngr_nm }}</td>
</tr>
<tr>
<td>등록자 ID</td>
<td>{{ nullHyphen(crosswalk.rgtr_id) }}</td>
<td>등록일자</td>
<td>{{ yyyymmdd(crosswalk.reg_dt) }}</td>
</tr>
<tr>
<td>수정자 ID</td>
<td>{{ nullHyphen(crosswalk.mdfr_id) }}</td>
<td>수정일자</td>
<td>{{ yyyymmdd(crosswalk.mdfcn_dt) }}</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<table>
<colgroup>
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 20%" />
</colgroup>
<tbody>
<tr>
<td rowspan="3">금일 상황발생 수</td>
<td>무단횡단</td>
<td>2회</td>
<td rowspan="4">
<button class="green-btn">상황발생 상세보기</button>
<button class="green-btn">장애발생 상세보기</button>
<button class="green-btn">위치확인</button>
</td>
</tr>
<tr>
<td>신호연장</td>
<td>-</td>
</tr>
<tr>
<td>우회전차량</td>
<td>-</td>
</tr>
<tr>
<td colspan="2">금일 장애발생 수</td>
<td>1회</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="bottom-wrap">
<PaginationButton
v-model:currentPage="crosswalkListSearch.currentPage"
:per-page="crosswalkListSearch.perPage"
:total-count="crosswalkListCount"
:max-range="5"
:click="crosswalkSelectList"
/>
</div>
<div class="flex-end">
<router-link to="/UserManagement.page">
<span class="btn-2 green-btn excel">Excel로 저장</span>
</router-link>
</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 {
crosswalkListSearch: {
currentPage: 1,
perPage: 10,
startDate: null,
endDate: null,
searchDongCode: null,
searchRightTurnType: null,
searchRoundTripLane: null,
jaywalking: null,
signal: null,
rightTurn: null,
},
crosswalk: {
crslk_az: null,
node_id: null,
dong_cd: null,
crslk_nm: null,
instl_ymd: null,
reg_dt: null,
rgtr_id: null,
mdfcn_dt: null,
mdfr_id: null,
mntnce_mngr_id: null,
rittrn_tfclne_yn: null,
rittrn_tfclne_ty: null,
rndtp_tfclne_info: null,
wtrms_crosng_detct_rate: null,
wtrms_crosng_eqpmn_instl_yn: null,
signl_extn_eqpmn_instl_yn: null,
rittrn_vhcle_eqpmn_instl_yn: null,
lat: null,
lon: null,
sido_nm: null,
sigungu_nm: null,
dong_nm: null,
node_name: null,
mngr_nm: null,
},
crosswalkListCount: 0,
crosswalkList: [],
crosswalkIdx: 0,
address: {},
modal_crosswalkOne: false,
};
},
methods: {
crosswalkSelectList: function () {
const vm = this;
vm.crosswalkListSearch.searchDongCode = vm.address.dong_cd;
axios({
url: "/statusControl/crosswalkSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.crosswalkListSearch,
})
.then(function (response) {
console.log("crosswalkSelectList - response : ", response.data);
vm.crosswalkListCount = response.data.crosswalkListCount;
vm.crosswalkList = response.data.crosswalkList;
vm.crosswalkIdx =
response.data.crosswalkListCount -
(vm.crosswalkListSearch.currentPage - 1) *
response.data.crosswalkList.length;
})
.catch(function (error) {
console.log("crosswalkSelectList - error : ", error);
alert("횡단보도 목록 조회 오류, 관리자에게 문의해주세요.");
});
},
crosswalkSelectOne: function (item) {
const vm = this;
axios({
url: "/statusControl/crosswalkSelectOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { node_id: item.node_id, crslk_az: item.crslk_az },
})
.then(function (response) {
console.log("crosswalkSelectOne - response : ", response.data);
vm.crosswalk = response.data;
vm.modal_crosswalkOne = true;
})
.catch(function (error) {
console.log("crosswalkSelectOne - error : ", error);
alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
});
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
//null값 '-' 치환
nullHyphen(data) {
return COMMON_UTIL.nullHyphen(data);
},
//dongSelectList 컴포넌트에서 선택된 dong_cd 셋팅
setDongCd(value) {
console.log("value : ", value);
this.address = value;
},
},
watch: {},
computed: {},
components: {
PaginationButton: PaginationButton,
dongSelectList: dongSelectList,
},
mounted() {
console.log("CrosswalkListSearch mounted");
this.crosswalkSelectList();
},
};
</script>
<style scoped>
@media all and (max-width: 479px) {
.date {
margin-right: 0 !important;
margin-bottom: 1rem;
}
.line select {
width: 10rem;
}
.local select {
width: 8.7rem;
}
}
.date {
width: 60%;
}
.wrap h2 {
font-size: 2.5rem;
}
.mar {
margin-bottom: 0rem !important;
}
.gap-sub {
display: flex;
}
.g1 {
width: 35.9em !important;
margin-bottom: 0rem !important;
}
.ta5 {
height: 9em !important;
line-height: 9em !important;
height: 30em;
}
.in1 {
width: 21em;
/* height: 4em !important; */
text-align: center;
}
.taa {
width: 10em;
height: 7em;
background-color: #f0f0f0;
/* border: 1px solid gray; */
/* border-bottom: 1px solid; */
box-shadow: 0px 0px 1px gray;
line-height: 7em;
text-align: center;
}
.g2 {
width: 38.6em;
/* margin-bottom: 0rem !important; */
}
.g3 {
width: 39em;
height: 7em;
/* margin-top: -11px; */
/* flex-grow: 1; */
/* width: 155em; */
}
.statue {
width: 50%;
}
.statue select {
width: 20rem;
}
#op {
line-height: 2em;
}
.border {
width: 100%;
height: 100%;
/* border: 1px solid blue; */
}
.board-wrap {
width: 100%;
}
.mobile {
display: none;
}
::v-deep select {
width: 15rem;
}
.img {
width: 20rem;
height: 20rem;
border: 1px solid #e5e5dd;
}
.btnb {
width: 1500px;
margin: 0 auto;
/* text-align: right; */
/* margin-top: -80em; */
/* border: 1px solid red; */
}
.modal {
width: 100rem;
}
.modalmain {
padding: 1rem;
max-height: 70rem;
overflow: scroll;
overflow-x: hidden;
}
.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-bg 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;
cursor: pointer;
}
.modal-bg button {
border: 0;
background: none;
height: 30px;
cursor: pointer;
}
.modal button img {
width: 25px;
}
.txt-point {
color: #333;
}
.wrap {
width: 80%;
margin: 100px auto;
}
.search-wrap .box {
width: 100%;
}
.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.3rem 2rem;
font-size: 13.333px;
}
.pg-wrap {
text-align: center;
}
.pg-item {
display: inline-block;
padding: 10px;
color: #949292;
}
.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>