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="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 ">
<!-- 검색 -->
<div class="de_Search">
<table class="troubleTable">
<tbody>
<tr>
<th>행정동</th>
<td colspan="3" >
<div class="flex-start gap"><dongSelectList @setDongCd="setDongCd" :nodeHiddenCk="true" :crslk_azHiddenCk="true" ></dongSelectList> </div>
</td>
<th>조회기간</th>
<td colspan="3">
<input type="date" value-format="yyyyMMdd" :max="today" v-model="crosswalkListSearch.startDate" />
<span style="margin: 0px 2%;"> ~ </span>
<input type="date" value-format="yyyyMMdd" :min="crosswalkListSearch.startDate" :max="today" v-model="crosswalkListSearch.endDate" />
</td>
</tr>
<tr>
<th>장비상태</th>
<td >
<select v-model="crosswalkListSearch.error" style="width:100%;">
<option value="null">전체</option>
<option value="Y">정상</option>
<option value="N">비정상</option>
</select>
</td>
<th>우회차선</th>
<td >
<select v-model="crosswalkListSearch.searchRightTurnType" style="width:100%;">
<option value="null">전체</option>
<option value="직각">직각</option>
<option value="곡선">곡선</option>
</select>
</td>
<td colspan="4">
<button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="crosswalkSelectList">검색</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- <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>
<tr v-if="crosswalkListCount == 0">
<td style="font-size: 20px;" colspan="7">검색조건에 해당하는 데이터가 없습니다.</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_base" style="width:100rem;">
<h2 class="flex-between">
<span>횡단보도 상세정보</span>
<button
type="button"
class="gray-btn modal_base_close"
@click="modal_crosswalkOne = false"
>
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modal_base_body">
<div class="flex-between">
<div v-if="WTRMS_CAM1.file_name!=null" class="img" >무단횡단검지카메라 이미지
<img style="height:100px;" :src="'http://localhost:40000/download/'+WTRMS_CAM1.file_path+'/'+WTRMS_CAM1.file_name">
</div>
<div v-if="WTRMS_CAM2.file_name!=null" class="img" >무단횡단검지카메라 이미지
<img style="height:100px;" :src="'http://localhost:40000/download/'+WTRMS_CAM2.file_path+'/'+WTRMS_CAM2.file_name">
</div>
<div v-if="SIGNL_EXTN_CAM1.file_name!=null" class="img" >신호연장검지카메라 이미지
<img style="height:100px;" :src="'http://localhost:40000/download/'+SIGNL_EXTN_CAM1.file_path+'/'+SIGNL_EXTN_CAM1.file_name">
</div>
<div v-if="SIGNL_EXTN_CAM2.file_name!=null" class="img" >신호연장검지카메라 이미지
<img style="height:100px;" :src="'http://localhost:40000/download/'+SIGNL_EXTN_CAM2.file_path+'/'+SIGNL_EXTN_CAM2.file_name">
</div>
<div v-if="RITTRN_VHCLE_CAM.file_name!=null" class="img" >우회차량검지카메라 이미지
<img style="height:100px;" :src="'http://localhost:40000/download/'+RITTRN_VHCLE_CAM.file_path+'/'+RITTRN_VHCLE_CAM.file_name">
</div>
</div>
<h3 class="modal_base_title">횡단보도 기본정보</h3>
<div class="de_Search">
<table class="troubleTable mrg_b_0" >
<tbody>
<tr>
<th colspan="2">시/도</th>
<td colspan="2">{{ crosswalk.sido_nm }}</td>
<th colspan="2">시/군/구</th>
<td colspan="2">{{ crosswalk.sigungu_nm }}</td>
</tr>
<tr>
<th colspan="2">행정동</th>
<td colspan="2">{{ crosswalk.dong_nm }}</td>
<th colspan="2">노드명</th>
<td colspan="2">{{ crosswalk.node_name }}</td>
</tr>
<tr>
<th colspan="2">횡단보도명</th>
<td colspan="2">{{ crosswalk.crslk_nm }}</td>
<th colspan="2">왕복차선</th>
<td colspan="2">{{ crosswalk.rndtp_tfclne_info }}차선</td>
</tr>
<tr>
<th colspan="2">위도</th>
<td colspan="2">{{ crosswalk.lat }}</td>
<th colspan="2">경도</th>
<td colspan="2">{{ crosswalk.lon }}</td>
</tr>
<tr>
<th rowspan="3">설치된 검시장비</th>
<th>무단횡단</th>
<td
colspan="6"
v-if="crosswalk.wtrms_crosng_eqpmn_instl_yn == 'y'"
>
설치
</td>
<td colspan="6" v-else>미설치</td>
</tr>
<tr>
<th >신호연장</th>
<td
colspan="6"
v-if="crosswalk.signl_extn_eqpmn_instl_yn == 'y'"
>
설치
</td>
<td colspan="7" v-else>미설치</td>
</tr>
<tr>
<th>우회전차량</th>
<td
colspan="6"
v-if="crosswalk.rittrn_vhcle_eqpmn_instl_yn == 'y'"
>
설치
</td>
<td colspan="6" v-else>미설치</td>
</tr>
<!--
<tr>
<th colspan="2">무단횡단 검지범위</th>
<td colspan="6">{{ crosswalk.wtrms_crosng_detct_rate }}%</td>
</tr>
-->
<tr>
<th colspan="2">우회전차선유무</th>
<td colspan="2">{{ crosswalk.rittrn_tfclne_yn }}</td>
<th colspan="2">우회전차선유형</th>
<td colspan="2">{{ crosswalk.rittrn_tfclne_ty }}</td>
</tr>
<tr>
<th colspan="2">등록자 ID</th>
<td colspan="2">{{ nullHyphen(crosswalk.rgtr_id) }}</td>
<th colspan="2">등록일자</th>
<td colspan="2">{{ yyyymmdd(crosswalk.reg_dt) }}</td>
</tr>
<tr>
<th colspan="2">수정자 ID</th>
<td colspan="2">{{ nullHyphen(crosswalk.mdfr_id) }}</td>
<th colspan="2">수정일자</th>
<td colspan="2">{{ yyyymmdd(crosswalk.mdfcn_dt) }}</td>
</tr>
<tr>
<th colspan="2">횡단보도 유지보수 담당자</th>
<td colspan="2">{{ crosswalk.mngr_nm }}</td>
</tr>
</tbody>
</table>
</div>
<br />
<br />
<br />
<h3 class="modal_base_title">이벤트 발생정보</h3>
<button class="btn-2 green-btn s-btn " style=" float: right; margin-left: 10px; margin-bottom:5px;" @click="crosswalkSearchPage(crosswalk.node_id, crosswalk.dong_cd)">위치확인</button>
<button class="btn-2 green-btn s-btn " style=" float: right; margin-left: 10px; margin-bottom:5px;" @click="situationSearchPage(crosswalk.node_id, crosswalk.crslk_az, crosswalk.sigungu_cd, crosswalk.dong_cd)">상황발생 상세보기</button>
<button class="btn-2 green-btn s-btn " style=" float: right; margin-left: 10px; margin-bottom:5px;" @click="errorSearchPage(crosswalk.node_id, crosswalk.crslk_az, crosswalk.sigungu_cd, crosswalk.dong_cd)">장애발생 상세보기</button>
<div class="de_Search">
<table class="troubleTable mrg_b_0" >
<tbody>
<tr>
<th rowspan="4">금일 상황 발생</th>
<th >무단횡단</th>
<td colspan="4">
{{ crosswalk.jaywalkCount }}회
</td>
</tr>
<tr>
<th>신호연장</th>
<td>{{ crosswalk.signalCount }}회</td>
</tr>
<tr>
<th>차량위반</th>
<td>{{ crosswalk.rightTurnCount }}회</td>
</tr>
<tr>
<th>금일 장애발생 수</th>
<td>{{ crosswalk.errorCount }}회</td>
</tr>
</tbody>
</table>
</div>
</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/dongSelectListSimple.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,
error: null
},
crosswalk: {
crslk_az: null,
node_id: null,
sigungu_cd: 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,
jaywalkCount: null,
signalCount: null,
rightTurnCount: null,
errorCount: null,
},
crosswalkListCount: 0,
crosswalkList: [],
crosswalkIdx: 0,
address: {},
modal_crosswalkOne: false,
//오늘 날짜
today: COMMON_UTIL.today(),
file_info:[],
RITTRN_VHCLE_CAM:{
file_path:null,
file_name:null,
},
WTRMS_CAM1:{
file_path:null,
file_name:null,
},
WTRMS_CAM2:{
file_path:null,
file_name:null,
},
SIGNL_EXTN_CAM1:{
file_path:null,
file_name:null,
},
SIGNL_EXTN_CAM2:{
file_path:null,
file_name:null,
},
};
},
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) *
vm.crosswalkListSearch.perPage;
})
.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;
vm.RITTRN_VHCLE_CAM={
file_path:null,
file_name:null,
};
vm.WTRMS_CAM1={
file_path:null,
file_name:null,
}
vm.WTRMS_CAM2={
file_path:null,
file_name:null,
}
vm.SIGNL_EXTN_CAM1={
file_path:null,
file_name:null,
}
vm.SIGNL_EXTN_CAM2={
file_path:null,
file_name:null,
},
vm.crosswalkImgSelect(item);
})
.catch(function (error) {
console.log("crosswalkSelectOne - error : ", error);
alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
});
},
//횡단보도 이미지 조회
crosswalkImgSelect: function (item) {
const vm = this;
// console.log("crosswalkSelectOne item : ",item);
axios({
url: "/statusControl/crosswalkImgSelectList.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("crosswalkImgSelectList response : ",response.data);
let cnt1=0;
let cnt2=0;
for( var i=0 ; i<response.data.length ; i++){
console.log("for response i : ",i," :",response.data[i]);
//우회전 카메라
if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-RITTRN_VHCLE'){
vm.RITTRN_VHCLE_CAM.file_name=response.data[i].file_nm;
vm.RITTRN_VHCLE_CAM.file_path=response.data[i].real_file_nm;
}
//무단횡단 카메라
if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-WTRMS'){
console.log("for ck i : ",i," :",response.data[i]);
if(cnt1==0){
vm.WTRMS_CAM1.file_name=response.data[i].file_nm;
vm.WTRMS_CAM1.file_path=response.data[i].real_file_nm;
}
else{
vm.WTRMS_CAM2.file_name=response.data[i].file_nm;
vm.WTRMS_CAM2.file_path=response.data[i].real_file_nm;
}
cnt1++;
console.log("WTRMS_CAM1 i : ",i," :",vm.WTRMS_CAM1);
console.log("WTRMS_CAM2 i : ",i," :",vm.WTRMS_CAM2);
}
//신호연장 카메라
if(response.data[i].eqpmn_ty_id==='EQPMN-CAM-SIGNL_EXTN'){
if(cnt2==0){
vm.SIGNL_EXTN_CAM1.file_name=response.data[i].file_nm;
vm.SIGNL_EXTN_CAM1.file_path=response.data[i].real_file_nm;
}
else{
vm.SIGNL_EXTN_CAM2.file_name=response.data[i].file_nm;
vm.SIGNL_EXTN_CAM2.file_path=response.data[i].real_file_nm;
}
cnt2++;
}
}
vm.file_info = response.data;
})
.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;
},
situationSearchPage: function(node_id, crslk_az, sigungu_cd, dong_cd) {
this.$router.push({ path: '/SituationSearch.page', query: { 'node_id': node_id, 'crslk_az': crslk_az, 'sigungu_cd': sigungu_cd,'dong_cd': dong_cd}})
},
errorSearchPage: function(node_id, crslk_az, sigungu_cd, dong_cd) {
this.$router.push({ path: '/ErrorSearch.page', query: { 'node_id': node_id, 'crslk_az': crslk_az, 'sigungu_cd': sigungu_cd, 'dong_cd': dong_cd}})
},
crosswalkSearchPage: function(node_id, dong_cd) {
this.$router.push({ path: '/CrosswalkSearch.page', query: { 'node_id': node_id, 'dong_cd': dong_cd, 'route': 'Y'}})
}
},
watch: {},
computed: {},
components: {
PaginationButton: PaginationButton,
dongSelectList: dongSelectList,
},
created() {
this.crosswalkListSearch.endDate = COMMON_UTIL.today();
// this.crosswalkListSearch.startDate = COMMON_UTIL.oneMonthAgo();
this.crosswalkListSearch.startDate = '2023-07-01';
},
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;
}
.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-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-bg button {
border: 0;
background: none;
height: 30px;
cursor: pointer;
}
.modal img {
width: 25px;
height: 25px;
}
.modal .box{padding: 3rem;}
.modal .box .img{width: 15rem; height: 15rem; border: 1px solid #e5e5dd;}
.main-img{width: 20rem; height: 20rem; border: 1px solid #e5e5dd; margin: 3px;}
.txt-point {
color: #333;
}
.wrap {
width: 80%;
margin: 25px 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;
}
.img {
height: 15rem;
border: 1px solid rgba(92, 92, 92, 0.516);
line-height: 4rem;
width: 200px;
}
</style>