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="grid2_8">
<div class="left">
<div class="wrap flex-between">
<div class="search">
<h2>횡단보도 조회</h2>
<div class="box grid gap ">
<DongSelectList @setDongCd="setDongCd" ref="parent" :crslk_azHiddenCk=true :open_layers="this.$refs.open_layers"
@siDoGunGuSelectF="siDoGunGuSelectF" @dongSelectF="dongSelectF" @nodeSelectF="nodeSelectF"></DongSelectList>
<div class="flex-center m-t3"><button class="btn-l gr-btn search-btn">검색</button></div>
</div>
<hr />
<div class="box tab-buttons" style="height: calc(100% - 31rem)" v-show="modal_tab == true">
<div class="btn_set flex-start gap">
<button
class="m-r flex gray-btn s-btn gap"
v-for="tab in tabs"
:key="tab.id"
:class="{ active: activeTab === tab.id }"
@click="changeTab(tab.id)"
>
{{ tab.title }}
<!-- <img src="../../../resources/images/warning.png" alt="" /> -->
</button>
</div>
<div class="ulbox">
<div
class="tab-content"
v-for="tab in tabs"
:key="tab.id"
v-show="activeTab === tab.id"
>
<ul v-show="tab.content2">
<li @click="troblCcrnLocation1">
<p class="m-b" style="color: #9bbb8d; ">장애명: 오른쪽 무단횡단 카메라 작동 불량</p>
<p class="m-b" style="color: #474747; font-size: 14px;"><img src="../../../resources/images/icon/map.png" alt=""> 달서초등(A) 북쪽횡단보도</p>
<p class="m-b">발생일시: 2023-07-24 17:38</p>
<p class="m-b">담당자: 김성훈</p>
<p class="m-b">연락처: 010-2158-4427</p>
<p class="">복구여부: 미복구</p>
</li>
<li @click="troblCcrnLocation2">
<p class="m-b" style="color: #9bbb8d; ">장애명: 왼쪽 잔여시간표시기 작동 불량</p>
<p class="m-b" style="color: #474747; font-size: 14px;"><img src="../../../resources/images/icon/map.png" alt=""> 달서초등(A) 북쪽횡단보도</p>
<p class="m-b">발생일시: 2023-07-24 17:38</p>
<p class="m-b">담당자: 김성훈</p>
<p class="m-b">연락처: 010-2158-4427</p>
<p class="">복구여부: 미복구</p>
</li>
<li @click="troblCcrnLocation3">
<p class="m-b" style="color: #9bbb8d; ">장애명: 신호제어기 작동 불량</p>
<p class="m-b" style="color: #474747; font-size: 14px;"><img src="../../../resources/images/icon/map.png" alt=""> 이현파출소 동쪽 횡단보도</p>
<p class="m-b">발생일시: 2023-07-24 19:30</p>
<p class="m-b">담당자: 김성훈</p>
<p class="m-b">연락처: 010-2158-4427</p>
<p class="">복구여부: 미복구</p>
</li>
</ul>
</div>
</div>
</div>
<h2 v-show="modal_crosswalUpdate == true">횡단보도 수정</h2>
<div class="box" v-show="modal_crosswalUpdate == true">
<div class="grid3_7 m-b" id="siDoHiddenCk">
<label for="">시/도</label>
<select
name="siDoSelectList"
id="siDoSelectList"
v-model="crosswalk['siDo_dong_cd']"
@change="siDoGunGuSelectF($event)"
>
<option :value="null" disabled>대구광역시</option>
<option
v-for="(item, key) in siDoList"
:key="key"
:value="item['dong_cd']"
>
{{ item["dong_nm"] }}
</option>
</select>
</div>
<div class="grid3_7 m-b" id="gunGuHiddenCk">
<label for="">시/군/구</label>
<select
name="gunGuSelectList"
id="gunGuSelectList"
v-model="crosswalk['guGun_dong_cd']"
@change="siDoGunGuSelectF($event)"
>
<option :value="null" disabled>서구</option>
<option
v-for="(item, key) in gunGuList"
:key="key"
:value="item['dong_cd']"
>
{{ item["dong_nm"] }}
</option>
</select>
</div>
<div class="grid3_7 m-b" id="dongHiddenCk">
<label for="">행정동</label>
<select
name="dongSelectList"
id="dongSelectList"
v-model="crosswalk['dong_dong_cd']"
@change="dongSelectF($event)"
>
<option :value="null" disabled>행정동</option>
<option
v-for="(item, key) in dongList"
:key="key"
:value="item['dong_cd']"
>
{{ item["dong_nm"] }}
</option>
</select>
</div>
<div class="grid3_7 m-b" id="nodeHiddenCk">
<label for="">교차로</label>
<select
name="nodeSelectList"
id="nodeSelectList"
v-model="crosswalk['node_id']"
@change="nodeSelectF($event)"
>
<option :value="null" disabled>교차로</option>
<option
v-for="(item, key) in nodeList"
:key="key"
:value="item['node_id']"
>
{{ item["node_name"] }}
</option>
</select>
</div>
<div class="grid3_7 m-b" id="azimuthHiddenCk">
<label for="">방위각</label>
<select
name="azimutSelectList"
id="azimutSelectList"
v-model="crosswalk['crslk_az']"
>
<option :value="0" disabled>방위각</option>
<option :value="10">북</option>
<option :value="50">북동</option>
<option :value="20">동</option>
<option :value="60">남동</option>
<option :value="30">남</option>
<option :value="70">남서</option>
<option :value="40">서</option>
<option :value="80">북서</option>
</select>
</div>
<div class="m-b">
<div class="grid3_7 m-b">
<label for="" class="m-r ">횡단보도 좌표</label
><button class="gr-btn s-btn" @click="clickStateChange()">좌표선택</button>
</div>
<div class="flex gap">
<div class="grid3_7 m-b">
<label class="m-r">위도</label>
<input
type="text"
name=""
id=""
placeholder="00.0000"
v-model="crosswalk.lat"
/>
</div>
<div class="grid3_7 m-b">
<label class="m-r">경도</label>
<input
type="text"
name=""
id=""
placeholder="00.0000"
v-model="crosswalk.lon"
/>
</div>
</div>
</div>
<div class="">
<div class="m-b flex-start" style="margin-top: 3rem">
<label for="">검지장비 선택</label>
</div>
<div class="flex-between m-b">
<input
type="checkbox"
v-model="crosswalk.wtrms_crosng_eqpmn_instl_yn"
/><label for="">무단횡단</label>
<input
type="checkbox"
v-model="crosswalk.signl_extn_eqpmn_instl_yn"
/><label for="">신호연장</label>
<input
type="checkbox"
v-model="crosswalk.rittrn_vhcle_eqpmn_instl_yn"
/><label for="">우회전차량</label>
</div>
<div class="bottom">
<div class="flex m-b">
<label class="m-r">무단횡단 검지 범위 : </label>
<select
name="wtrms_crosng_detct_rate"
id="wtrms_crosng_detct_rate"
v-model="condition.wtrms_crosng_detct_rate"
>
<option :value="100">100%</option>
<option :value="90">90%</option>
<option :value="80">80%</option>
<option :value="70">70%</option>
<option :value="60">60%</option>
<option :value="50">50%</option>
<option :value="40">40%</option>
<option :value="30">30%</option>
<option :value="20">20%</option>
<option :value="10">10%</option>
</select>
</div>
<div class="flex m-b">
<label class="m-r">왕복차선 정보 : </label>
<select
name="rndtp_tfclne_info"
id="rndtp_tfclne_info"
v-model="condition.rndtp_tfclne_info"
>
<option :value="99" disabled>왕복 차선 정보</option>
<option :value="1">왕복 1차선</option>
<option :value="2">왕복 2차선</option>
<option :value="3">왕복 3차선</option>
<option :value="4">왕복 4차선</option>
<option :value="5">왕복 5차선</option>
<option :value="6">왕복 6차선</option>
<option :value="7">왕복 7차선</option>
<option :value="8">왕복 8차선</option>
<option :value="9">왕복 9차선</option>
<option :value="10">왕복 10차선</option>
</select>
</div>
<div class="flex m-b">
<label class="m-r">우회전 차선 유무 : </label>
<select
style="width: 9rem"
name=""
id=""
v-model="crosswalk.rittrn_tfclne_yn"
>
<option :value="null">우회전 차선 유무 선택</option>
<option :value="true">있음</option>
<option :value="false">없음</option>
</select>
</div>
<div class="flex m-b">
<label class="m-r">우회전 차선 유형 : </label>
<input
type="text"
name=""
id=""
placeholder="우회전 차선 유형 입력"
v-model="crosswalk.rittrn_tfclne_ty"
/>
</div>
<div class="flex m-b">
<label class="m-r">횡단보도 관리자 : </label>
<div class="flex gap">
<input
type="text"
name=""
id=""
placeholder=""
v-model="crosswalk.mngr_nm"
/>
<button class="gr-btn s-btn" @click="modal_managerSearch = true">검색</button>
<div class="modal-wrap" v-if="modal_managerSearch == true">
<div class="modal-bg"></div>
<div class="modal">
<h2 class="flex-between">
횡단보도 유지보수 담당자 검색
<button type="button" class="gray-btn" @click="modal_managerSearch = false">
<img src="../../../resources/images/close.png" alt="" />
</button>
</h2>
<div class="modal_base_body">
<div class="de_Search" >
<table class="troubleTable">
<tbody>
<tr>
<th>검색</th>
<td colspan="7" >
<select name="" id="" v-model="managerListSearch.searchType">
<option value="null">검색조건</option>
<option value="mngr_nm">이름</option>
<option value="mngr_ogdp_info">소속정보</option>
</select>
<input type="text" placeholder="검색어를 입력 해주세요." v-model="managerListSearch.searchText" @keyup.enter="managerSelectList" style="width: 76%;" />
<button type="button" class="green-btn" style="margin-left: 5px;padding: 5px;width: 10rem; float: right;" @click="managerSelectList">검색</button>
</td>
</tr>
</tbody>
</table>
</div>
<table>
<thead>
<tr>
<td>No</td>
<td>이름</td>
<td>전화번호</td>
<td>소속정보</td>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in managerList" :key="idx" @click="managerSelect(item)">
<td data-title="No">{{ managerIdx - idx }}</td>
<td data-title="이름">{{ item['mngr_nm'] }}</td>
<td data-title="전화번호">{{ HyphenMinus(item['mngr_telno']) }}</td>
<td data-title="소속정보">{{ item['mngr_ogdp_info'] }}</td>
</tr>
<tr v-show="managerList.length == 0">
<td class="exception" colspan="9">조회된 데이터가 없습니다</td>
</tr>
</tbody>
</table>
<div class="bottom-wrap">
<div class="pg-wrap">
<PaginationButton
v-model:currentPage="managerListSearch.currentPage"
:per-page="managerListSearch.perPage"
:total-count="managerListCount"
:max-range="5"
:click="managerSelectList"
/>
<!-- <a href="#" class="pg-item prev">◀</a>
<a href="#" class="pg-item active">1</a>
<a href="#" class="pg-item next">▶</a> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-center gap" style="margin-top: 3rem">
<button class="gr-btn s-btn" @click="modal_update = true">수정</button>
<div class="modal-wrap" v-if="modal_update == true">
<div class="modal-bg"></div>
<div class="modal2">
<div class="modalmain2">
<h4 class="flex-between">
횡단보도를 <em style="color: blue">수정</em
> 하시겠습니까?
</h4>
<div class="flex-center gap" style="margin-top: 3rem">
<button @click="crslkUpdate">확인</button>
<button @click="modal_update = false">취소</button>
</div>
</div>
</div>
</div>
<button class="gr-btn s-btn" @click="modal_crosswalUpdate = false; modal_tab=true">취소</button>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<OpenLayers ref="open_layers" />
</div>
<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:8080/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:8080/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:8080/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:8080/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:8080/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" >
<colgroup>
<col id="col1" style="width: 15%" />
<col id="col2" style="width: 10%" />
<col id="col3" style="width: 15%" />
<col id="col4" style="width: 15%" />
<col id="col5" style="width: 10%" />
<col id="col6" style="width: 20%" />
<!-- <col id="col6" style="width: 20%" /> -->
</colgroup>
<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"
>
설치
</td>
<td colspan="6" v-else>미설치</td>
</tr>
<tr>
<th >신호연장</th>
<td
colspan="6"
v-if="crosswalk.signl_extn_eqpmn_instl_yn"
>
설치
</td>
<td colspan="7" v-else>미설치</td>
</tr>
<tr>
<th>우회전차량</th>
<td
colspan="6"
v-if="crosswalk.signl_extn_eqpmn_instl_yn"
>
설치
</td>
<td colspan="6" v-else>미설치</td>
</tr>
<!-- <tr>
<td>우회전차량</td>
<td colspan="2" v-if="crosswalk.rittrn_vhcle_eqpmn_instl_yn">
설치
</td>
<td colspan="2" v-else>미설치</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">{{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">{{ 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 />
<div class="flex-center gap">
<button class="s-btn gr-btn" @click="editDetails">수정</button>
<button class="s-btn gr-btn" @click="crslkDelete">삭제</button>
</div>
<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="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 class="mapSelectBox">
<div class="box">
<select v-model="selectMap" >
<option :value="mapList[0]">기본맵</option>
<option :value="mapList[1]">컬러맵</option>
<option :value="mapList[2]">나이트맵</option>
<option :value="mapList[3]">포토맵</option>
</select>
</div>
</div>-->
</div>
</template>
<script>
import axios from "axios";
import MapPage from "../../component/MapPage.vue";
import OpenLayers from "../../component/OpenLayers.vue";
import {
defaultLayer
} from "../../component/OpenLayersMap.vue";
import { baseStyles } from "../../component/OpenLayersStyle.vue";
import DongSelectList from "../../component/dongSelectList.vue";
import COMMON_UTIL from "../../../resources/js/commonUtil.ts";
import PaginationButton from "../../component/pagination/PaginationButton.vue";
import { transform } from "ol/proj";
import Overlay from 'ol/Overlay';
import COMMON_MAP from "../../component/OpenLayersNewMap.ts"
export default {
data() {
return {
address: {
//지역 설정
dong_cd: "22030",
siDo_dong_cd: "22",
guGun_dong_cd: "22030",
dong_dong_cd: null,
node_id: null,
node_name: null,
zoomLevel: null,
crslk_az: "0",
coordinate: [],
lat: null,
lon: null,
baseSource: "EPSG:5181",
},
//조건설정
condition: {
//체크박스(장비 설치 유무)
signl_extn_eqpmn_instl_yn: false,
wtrms_crosng_eqpmn_instl_yn: false,
rittrn_vhcle_eqpmn_instl_yn: false,
//무단횐단 검지 범위
wtrms_crosng_detct_rate: "100",
//왕복차선 정보
rndtp_tfclne_info: "99",
//우회전 차선 유무
rittrn_tfclne_yn: null,
//우회전 차선 유형
rittrn_tfclne_ty: null,
},
managerListSearch: {
currentPage: 1,
perPage: 10,
searchType: null,
searchText: null,
startDate: null,
endDate: null,
},
managerInfo: {
mngr_eml: null,
mngr_nm: null,
mngr_ogdp_info: null,
mngr_telno: null,
mntnce_mngr_id: null,
reg_dt: null,
rgtr_id: null,
},
crosswalk: {
siDo_dong_cd: null,
guGun_dong_cd: null,
dong_dong_cd: null,
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,
},
managerList: [],
managerListCount: 0,
managerIdx: 0,
siDoList: [],
gunGuList: [],
dongList: [],
nodeList: [],
crslkList: [],
//현재 zoom
now_zoom: null,
zoom_status : 5,
// 맵선택
/* selectMap : emapBaseLayer,
mapList : [ emapBaseLayer,
emapColorLayer,
emapNightLayer,
emapsSkyLayer
],*/
//휠할때 마우스 위치를 포함하는 dong data
wheelEventSiDo: null,
wheelEventSiGunGu: null,
wheelEventDong: null,
wheelEventNode: null,
clickState: false,
modal_crosswalkOne: false,
modal_crosswalUpdate: false,
modal_managerSearch: false,
modal_update: false,
modal_tab:true,
modal_mana:false,
tabs: [
{
id: 1,
title: "장애발생현황",
content2: "This is the content for Tab 2",
},
],
activeTab: 1,
items: [
{ id: 1, name: "무단횡단", isActive: false },
{ id: 2, name: "신호연장", isActive: false },
{ id: 3, name: "우회전 차량", isActive: false },
{ id: 4, name: "장애발생", isActive: false },
],
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,
},
};
},
components: {
PaginationButton:PaginationButton,
OpenLayers: OpenLayers,
DongSelectList: DongSelectList,
},
methods: {
//DongSelectList에서 dong_cd 받아오기
setDongCd : function(value) {
this.address = value;
},
//시/도/군/구 Select 선택시 바로 위치 이동
siDoGunGuSelectF: function (event) {
//기존 layer 지우기
this.$refs.open_layers.removeLayerAll();
//기본 지도 layer 그리기 + 해당 위치로 이동
this.$refs.open_layers.setBaseMap(COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map), event.target.value);
this.$refs.open_layers.setZoom(this.address.zoomLevel);
//polygon 그리기
this.$refs.open_layers.addVectorLayerByUrl("/common/getDongsGeoJson.json","multiPolygonLayer","EPSG:5181",baseStyles["MultiPolygon"],"MultiPolygon",this.address.dong_cd);
// 지역 중앙에 노드 + 이름 넣기
this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl("/common/getDongsCenterAndChildNodeCntJson.json","nodeLayer","EPSG:5181",baseStyles["labelStyle"],"label",this.address.dong_cd);
},
//행정동 Select 선택시 바로 위치 이동
dongSelectF: function (event) {
//기존 layer 지우기
this.$refs.open_layers.removeLayerAll();
//기본 지도 layer 그리기 + 해당 위치로 이동
this.$refs.open_layers.setBaseMap(COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map), event.target.value);
this.$refs.open_layers.setZoom(this.address.zoomLevel);
//polygon 그리기
this.$refs.open_layers.addVectorLayerByUrl(
"/common/getDongGeoJson.json",
"multiPolygonLayer",
"EPSG:5181",
baseStyles["MultiPolygon"],
"MultiPolygon",
this.address.dong_cd
);
// 행정동에 포함된 노드 넣기
this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl(
"/common/getNodesGeoAndChildNodeCntJson.json",
"nodeLayer",
"EPSG:4326",
baseStyles["labelStyle"],
"label",
this.address.dong_cd
);
},
//노드 Select 선택시 바로 위치 이동
nodeSelectF: function (event) {
//기존 layer 지우기
this.$refs.open_layers.removeLayerAll();
//기본 지도 layer 그리기 + 해당 위치로 이동
this.$refs.open_layers.setBaseMap(
COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map),
this.address.dong_cd,
event.target.value
);
this.$refs.open_layers.setZoom(this.address.zoomLevel);
//polygon 그리기
this.$refs.open_layers.addVectorLayerByUrl(
"/common/getNodeGeoJson.json",
"multiPolygonLayer",
"EPSG:4326",
baseStyles["MultiPolygon"],
"MultiPolygon",
this.address.dong_cd,
this.address.node_id
);
// 노드 횡단보도 그리기
this.$refs.open_layers.addVectorLayerByUrl(
"/common/getCrslksGeoJson.json",
"crslkLayer",
"EPSG:5181",
baseStyles["labelStyle"],
"label",
this.address.dong_cd,
this.address.node_id
);
// this.crslkSearchSelectList(this.address.node_id);
},
//노드(교차로) 받아오기
findNodeUsingDongSelectList: function (dong_cd) {
const vm = this;
axios({
url: "/node/findNodeUsingDongSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { dong_cd: dong_cd },
})
.then(function (response) {
vm.nodeList = response.data;
})
.catch(function (error) {
console.log("findNodeUsingDongSelectList - error : ", error);
});
},
//시/도 받아오기
siDoSelectList: function () {
const vm = this;
axios({
url: "/dong/siDoSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {},
})
.then(function (response) {
vm.siDoList = response.data;
})
.catch(function (error) {
console.log("siDoSelectList - error : ", error);
});
},
//군/구 받아오기
gunGuSelect: function (dong_cd) {
const vm = this;
axios({
url: "/dong/gunGuSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { dong_cd: dong_cd },
})
.then(function (response) {
vm.gunGuList = response.data;
})
.catch(function (error) {
console.log("gunGuSelect - error : ", error);
});
},
//행정동 받아오기
dongSelectList: function (dong_cd) {
const vm = this;
axios({
url: "/dong/dongSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { dong_cd: dong_cd },
})
.then(function (response) {
vm.dongList = response.data;
})
.catch(function (error) {
console.log("dongSelectList - error : ", error);
});
},
//횡단보도 유지보수 관리자 목록 조회
managerSelectList: function () {
const vm = this;
axios({
url: "/managerSelectList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.managerListSearch,
}).then(function (response) {
// console.log("managerSelectList - response : ", response.data);
vm.managerListCount = response.data.managerListCount;
vm.managerList = response.data.managerList;
vm.managerIdx =
vm.managerListCount -
(vm.managerListSearch.currentPage - 1) * vm.managerList.length;
})
.catch(function (error) {
console.log("managerSelectList - error : ", error);
alert(
"횡단보도 유지보수 관리자 목록 조회 오류, 관리자에게 문의해주세요."
);
});
},
managerSelect: function (managerInfo) {
// console.log("managerInfo : ", managerInfo);
this.crosswalk.mntnce_mngr_id = managerInfo.mntnce_mngr_id;
this.crosswalk.mngr_nm=managerInfo.mngr_nm;
},
// 전화번호 '-' 추가 후 출력
HyphenMinus: function (telno) {
return COMMON_UTIL.HyphenMinus(telno);
},
childClick: function (prop, coordinate, layerCk,map) {
if ( prop[0] != null && prop[0].values_ != null && prop[0].values_.dong_cd != null) {
this.address.dong_cd = prop[0].values_.dong_cd;
}
if ( prop[0] != null && prop[0].values_ != null && prop[0].values_.node_id != null ) {
this.address.node_id = prop[0].values_.node_id;
this.address.node_name = prop[0].values_.node_name;
}
if (layerCk) {
if (prop[0].layerName == "nodeLayer") {
this.address.node_id=prop[0].id_;
this.$refs.open_layers.removeLayerAll();
this.$refs.open_layers.setBaseMap(COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map), prop[0].id_);
// this.$refs.open_layers.setZoom(17);
// dong인지 node인지 확인 필요
if (!prop[0].values_.node_id) {
this.$refs.open_layers.addVectorLayerByUrl("/common/getDongGeoJson.json", "multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", this.address.dong_cd );
this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl( "/common/getNodesGeoAndChildNodeCntJson.json", "nodeLayer","EPSG:4326", baseStyles["labelStyle"], "label", prop[0].id_, prop[0].id_ );
} else {
this.$refs.open_layers.addVectorLayerByUrl( "/common/getNodeGeoJson.json", "multiPolygonLayer", "EPSG:4326", baseStyles["MultiPolygon"], "MultiPolygon", prop[0].id_, prop[0].id_);
this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl( "/common/getCrslksGeoJson.json", "crslkLayer", "EPSG:5181", baseStyles["labelStyle"], "label", this.address.dong_cd,prop[0].id_);
}
}
else if (prop[0].layerName == "crslkLayer") {
console.log("prop[0].values_ : ",prop[0].values_);
this.RITTRN_VHCLE_CAM={
file_path:null,
file_name:null,
};
this.WTRMS_CAM1={
file_path:null,
file_name:null,
}
this.WTRMS_CAM2={
file_path:null,
file_name:null,
}
this.SIGNL_EXTN_CAM1={
file_path:null,
file_name:null,
}
this.SIGNL_EXTN_CAM2={
file_path:null,
file_name:null,
},
this.modal_crosswalkOne = true;
this.crosswalkSelectOne(prop[0].values_);
}
else if (prop[0].layerName == "troblLayer"){
this.modal_mana=true;
let container = document.createElement('div');
container.classList.add('ol-popup-custom');
let content = document.createElement('div');
content.classList.add('popup-content');
container.appendChild(content);
document.body.appendChild(container);
var coordinate = coordinate; // 클릭한 지도 좌표
content.innerHTML = this.createPopup();
//
var overlay = new Overlay({
element: container,
});
map.addOverlay(overlay);
overlay.setPosition(coordinate);
}
}
if (this.clickState) {
this.address.coordinate = coordinate;
// console.log(" this.address.coordinate : ", this.address.coordinate);
// console.log(" this.address.coordinate.lat 경도 : ", this.address.coordinate[0]);
// console.log(" this.address.coordinate.lon 위도 : ", this.address.coordinate[1]);
// [this.crosswalk.lon,this.crosswalk./lat]=transform([this.address.coordinate[0],this.address.coordinate[1]],"EPSG:5181","EPSG:4326");
this.crosswalk.lon=this.address.coordinate[0];
this.crosswalk.lat=this.address.coordinate[1];
// 레이어 삭제
this.$refs.open_layers.removeLayer("point1");
// Icon 그리기
this.$refs.open_layers.createIcon(
coordinate[1],
coordinate[0],
"/client/resources/images/icon/fin2.png",
0.3,
"point1",
"EPSG:5181"
);
this.clickState = false;
} else {
this.$refs.open_layers.removeLayer("point1");
this.address.coordinate = null;
}
},
createPopup: function () {
var content =`<table class="htmlTable" v-show="modal_mana == true">
<thead>
<td colspan="4" class="fon">유지보수 담당자 정보</td>
</thead>
<tbody>
<tr>
<th class="fon2">장애명</th>
<td>오른쪽 무단횡단 카메라</td>
</tr>
<tr>
<th class="fon2">이름</th>
<td>김성훈</td>
</tr>
<tr>
<th class="fon2">연락처</th>
<td>010-2158-4427</td>
</tr>
<tr>
<th class="fon2">이메일</th>
<td>taken@naver.com</td>
</tr>
<tr>
<th class="fon2">소속정보</th>
<td>테이큰</td>
</tr>
</tbody>
</table>`
// '<table class="htmlTable">' +
// "<thead>" +
// '<td colspan="4" class="fon">유지보수 담당자 정보</td>' +
// "</thead>" +
// "<tbody>" +
// "<tr>" +
// '<th class="fon2">장애명</th>' +
// "<td></td>" +
// "</tr>" +
// "<tr>" +
// '<th class="fon2">이름</th>' +
// "<td>sdasd</td>" +
// "</tr>" +
// "<tr>" +
// ' <th class="fon2">연락처</th>' +
// "<td>sdasd</td>" +
// "</tr>" +
// "<tr>" +
// '<th class="fon2">이메일</th>' +
// "<td>sdasd</td>" +
// "</tr>" +
// "<tr>" +
// '<th class="fon2">소속정보</th>' +
// "<td>sdasd</td>" +
// "</tr>" +
// "</tbody>" +
// "</table>";
return content;
},
childMoveEnd(zoom) {
this.now_zoom = zoom;
//시/도 레이어로 수정
if (this.wheelEventSiDo == null) return;
if (zoom <= 13) {
if(this.zoom_status != 1 ){
this.$refs.open_layers.removeLayer("crslkLayer");
this.$refs.open_layers.removeLayer("multiPolygonLayer");
this.$refs.open_layers.removeLayer("nodeLayer");
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
"/common/getDongsPolygonGeoJson.json",
"multiPolygonLayer",
"EPSG:5181",
baseStyles["MultiPolygon"],
"MultiPolygon",
this.wheelEventSiDo
);
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
"/common/getDongsCenterJson.json",
"nodeLayer",
"EPSG:5181",
baseStyles["labelStyle"],
"label",
this.wheelEventSiDo
);
}
this.zoom_status = 1;
}
//시/군/구 레이어로 수정
else if (zoom <= 14.5) {
if(this.zoom_status != 2 ){
this.$refs.open_layers.removeLayer("crslkLayer");
this.$refs.open_layers.removeLayer("multiPolygonLayer");
this.$refs.open_layers.removeLayer("nodeLayer");
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
"/common/getDongsGeoJson.json",
"multiPolygonLayer",
"EPSG:5181",
baseStyles["MultiPolygon"],
"MultiPolygon",
this.wheelEventSiGunGu
);
this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl(
"/common/getDongsCenterAndChildNodeCntJson.json",
"nodeLayer",
"EPSG:5181",
baseStyles["labelStyle"],
"label",
this.wheelEventSiGunGu
);
}
this.zoom_status = 2;
}
//행정동
else if (zoom <= 17.5) {
if(this.zoom_status != 2 ){
this.$refs.open_layers.removeLayer("crslkLayer");
this.$refs.open_layers.removeLayer("multiPolygonLayer");
this.$refs.open_layers.removeLayer("nodeLayer");
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
"/common/getDongsPolygonGeoJson.json",
"multiPolygonLayer",
"EPSG:5181",
baseStyles["MultiPolygon"],
"MultiPolygon",
this.wheelEventDong
);
this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl(
"/common/getNodesGeoAndChildNodeCntJson.json",
"nodeLayer",
"EPSG:4326",
baseStyles["labelStyle"],
"label",
this.wheelEventDong
);
}
this.zoom_status = 3;
}
//노드
else if (zoom <= 18) {
if(this.zoom_status != 4 ){
this.$refs.open_layers.removeLayer("crslkLayer");
this.$refs.open_layers.removeLayer("multiPolygonLayer");
this.$refs.open_layers.removeLayer("nodeLayer");
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
"/common/getDongsPolygonGeoJson.json",
"multiPolygonLayer",
"EPSG:5181",
baseStyles["MultiPolygon"],
"MultiPolygon",
this.wheelEventDong
);
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
"/common/getCrslksGeoJson.json",
"crslkLayer",
"EPSG:5181",
baseStyles["labelStyle"],
"label",
this.wheelEventDong,
this.wheelEventNode
);
}
this.zoom_status = 4;
}
//횡단보도
else if( zoom > 18){
//가장 가까운 노드로 판단
if(this.zoom_status != 5 ){
this.$refs.open_layers.removeLayer("crslkLayer");
this.$refs.open_layers.removeLayer("multiPolygonLayer");
this.$refs.open_layers.removeLayer("nodeLayer");
this.$refs.open_layers.addVectorLayerRemoveAutoSizeByUrl(
"/common/getCrslksGeoJson.json",
"crslkLayer",
"EPSG:5181",
baseStyles["labelStyle"],
"label",
this.wheelEventDong,
this.wheelEventNode
);
}
this.zoom_status = 5;
}
},
//좌표로 dong_cd찾기
childWheel(coordinate) {
const vm = this;
if (this.now_zoom <= 18) {
axios({
url: "/dong/getDongCdUsingCoordinates.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { lat: coordinate[0], lon: coordinate[1] },
})
.then(function (response) {
for (var i = 0; i < response.data.length; i++) {
if (response.data[i].layer == "sido") {
vm.wheelEventSiDo = response.data[i].dong_cd;
} else if (response.data[i].layer == "sigungu") {
vm.wheelEventSiGunGu = response.data[i].dong_cd;
} else {
vm.wheelEventDong = response.data[i].dong_cd;
vm.findNodeUsingDongSelectList(vm.wheelEventDong);
}
}
})
.catch(function (error) {
console.log("getDongCdUsingCoordinates - error : ", error);
alert("좌표로 dong_cd 조회 오류, 관리자에게 문의해주세요.");
});
} else {
var min = 9999999999;
var minIndex = null;
coordinate = transform(
[coordinate[0], coordinate[1]],
"EPSG:5181",
"EPSG:4326"
);
for (var i = 0; i < this.nodeList.length; i++) {
var lat = JSON.parse(this.nodeList[i].geometry).coordinates[0];
var lon = JSON.parse(this.nodeList[i].geometry).coordinates[1];
var dLat = this.toRadians(coordinate[0] - lat);
var dLon = this.toRadians(coordinate[1] - lon);
var a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(this.toRadians(lat)) *
Math.cos(this.toRadians(coordinate[0])) *
Math.sin(dLon / 2) *
Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var dis = 6371 * c;
if (min > dis) {
min = dis;
minIndex = i;
}
}
if (
this.nodeList.length != 0 &&
this.nodeList[minIndex].node_id != null
) {
this.wheelEventNode = this.nodeList[minIndex].node_id;
this.address.node_id = this.nodeList[minIndex].node_id;
}
}
},
//횡단보도 이미지 조회
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: vm.address.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("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
});
},
//횡단보도 상세조회
crosswalkSelectOne: function (item) {
const vm = this;
// console.log("crosswalkSelectOne item : ",item);
axios({
url: "/statusControl/crosswalkSelectOne.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: { node_id: vm.address.node_id, crslk_az: item.crslk_az },
})
.then(function (response) {
vm.crosswalk = response.data;
vm.crosswalk.siDo_dong_cd = response.data.dong_cd.slice(0, 2);
vm.crosswalk.guGun_dong_cd = response.data.dong_cd.slice(0, 5);
vm.crosswalk.dong_dong_cd = response.data.dong_cd;
// let coordinate = transform(
// [response.data.lon, response.data.lat],
// "EPSG:4326",
// "EPSG:5181"
// );
// vm.crosswalk.lat = coordinate[0];
// vm.crosswalk.lon = coordinate[1];
vm.crosswalk.lat = response.data.lat;
vm.crosswalk.lon = response.data.lon;
if (response.data.rittrn_tfclne_yn == "y") {
vm.crosswalk.rittrn_tfclne_yn = true;
} else {
vm.crosswalk.rittrn_tfclne_yn = false;
}
if (response.data.rittrn_vhcle_eqpmn_instl_yn == "y") {
vm.crosswalk.rittrn_vhcle_eqpmn_instl_yn = true;
} else {
vm.crosswalk.rittrn_vhcle_eqpmn_instl_yn = false;
}
if (response.data.signl_extn_eqpmn_instl_yn == "y") {
vm.crosswalk.signl_extn_eqpmn_instl_yn = true;
} else {
vm.crosswalk.signl_extn_eqpmn_instl_yn = false;
}
if (response.data.wtrms_crosng_eqpmn_instl_yn == "y") {
vm.crosswalk.wtrms_crosng_eqpmn_instl_yn = true;
} else {
vm.crosswalk.wtrms_crosng_eqpmn_instl_yn = false;
}
vm.modal_crosswalkOne = true;
vm.crosswalkImgSelect(item);
})
.catch(function (error) {
console.log("crosswalkSelectOne - error : ", error);
alert("횡단보도 상세조회 오류, 관리자에게 문의해주세요.");
});
},
//횡단보도 업데이트
crslkUpdate() {
const vm = this;
axios({
url: "/management/crslkUpdate.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.crosswalk,
})
.then(function (response) {
})
.catch(function (error) {
// console.log("crslkUpdate - error : ", error);
alert("횡단보도 업데이트 오류, 관리자에게 문의해주세요.");
});
this.modal_update = false;
},
//횡단보도 삭제
crslkDelete() {
const vm = this;
axios({
url: "/management/crslkDelete.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.crosswalk,
})
.then(function (response) {
})
.catch(function (error) {
console.log("crslkDelete - error : ", error);
alert("횡단보도 삭제 오류, 관리자에게 문의해주세요.");
});
this.modal_update = false;
},
//장애 발생 버튼
trobl_ocrn_btn(){
//해당 위치로 이동
},
troblCcrnLocation1(){
//1520002712 달서
//1520003902 이현
this.$refs.open_layers.removeLayer('crslkLayer');
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.addVectorLayerAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, '1520002712');
},
troblCcrnLocation2(){
this.$refs.open_layers.removeLayer('crslkLayer');
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.addVectorLayerAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, '1520002712');
},
troblCcrnLocation3(){
this.$refs.open_layers.removeLayer('crslkLayer');
this.$refs.open_layers.removeLayer('multPolygonLayer');
this.$refs.open_layers.removeLayer('nodeLayer');
this.$refs.open_layers.addVectorLayerAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.wheelEventDong, '1520003902');
},
//횡단보도 상세정보 수정 버튼
editDetails() {
this.siDoSelectList();
this.gunGuSelect(this.crosswalk.siDo_dong_cd);
this.dongSelectList(this.crosswalk.guGun_dong_cd);
this.findNodeUsingDongSelectList(this.crosswalk.dong_dong_cd);
this.managerSelectList();
this.modal_crosswalkOne = false;
this.modal_crosswalUpdate = true;
this.modal_tab=false;
},
toRadians(degrees) {
return (degrees * Math.PI) / 180;
},
changeTab(tabId) {
this.activeTab = tabId;
},
toggleActive(item) {
item.isActive = !item.isActive;
},
//날짜 시,분,초 자르기
yyyymmdd: function (date) {
return COMMON_UTIL.yyyymmdd(date);
},
clickStateChange() {
this.clickState = true;
},
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}})
},
},
watch: {
modal_crosswalkOne: function (newValue, oldValue) {
},
nodeList: function (newValue, oldValue) {
},
selectMap : function(newValue, oldValue) {
this.$refs.open_layers.setBaseMap(newValue);
},
},
computed: {},
mounted() {
console.log(COMMON_MAP.API_KEY);
this.$refs.open_layers.setBaseMap(COMMON_MAP.selectDefaulyMapLayer(this.$refs.open_layers.map));
if(this.$route.query.route === 'Y') {
this.$refs.open_layers.addVectorLayerAutoSizeByUrl('/common/getCrslksGeoJson.json', 'crslkLayer', 'EPSG:5181', baseStyles['labelStyle'], 'label', this.$route.query.dong_cd, this.$route.query.node_id);
// this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl("/common/getDongsCenterAndChildNodeCntJson.json","nodeLayer", "EPSG:5181", baseStyles["labelStyle"], "label", this.$route.query.dong_cd, this.$route.query.node_id);
} else {
this.$refs.open_layers.addVectorLayerByUrl( "/common/getDongsGeoJson.json","multiPolygonLayer", "EPSG:5181", baseStyles["MultiPolygon"], "MultiPolygon", this.address.dong_cd);
this.$refs.open_layers.addVectorLayerRemoveAutoSizAddChildNodeCnteByUrl("/common/getDongsCenterAndChildNodeCntJson.json","nodeLayer", "EPSG:5181", baseStyles["labelStyle"], "label", this.address.dong_cd);
}
// this.$refs.open_layers.dumpTroblLayer("/common/getDongsCenterAndChildNodeCntJson.json","troblLayer", "EPSG:5181", baseStyles["labelStyle"], "label", this.address.dong_cd);
},
};
</script>
<style scoped>
.tab-buttons .ulbox {
height: calc(100% - 6rem);
overflow: scroll;
overflow-x: hidden;
}
.ulbox ul {
height: 30rem;
}
.ulbox ul li p{font-size: 13px;}
.fon {
color: white;
}
.fon2 {
background-color: #31a257;
color: white;
}
.co2 {
background-color: #13833b;
}
.co3 {
background-color: #31a257;
}
.co1 {
background-color: rgb(244, 244, 244);
}
#col1 {
background-color: #13833b;
color: #ffffff;
}
#col2 {
background-color: #ffffff;
}
#col3 {
background-color: #ffffff;
}
#col4 {
background-color: #13833b;
color: #ffffff;
}
.grid {
padding: 1rem;
gap: 1rem;
}
.img {
height: 9rem;
}
label {
/* width: max-content; */
text-align: left;
line-height: 3rem;
}
.search .box {
padding: 1rem 2rem;
}
.search .box select{width: -webkit-fill-available;}
.search input[type="text"] {
/* width: 19rem; */
}
.box{}
.btn_set {
position: relative;
border-bottom: 1px solid #e5e3e3;
padding: 0 0 1rem 0;
}
.btn_set div {
position: absolute;
top: 40px;
width: 313px;
height: 380px;
background: #fff;
padding: 1rem;
}
h2 {
background: #50ba8a;
text-align: center;
color: #fff;
padding: 1.6rem 0;
}
.top p {
font-size: 15px;
}
.top ul {
padding: 1rem 0;
}
.top li {
width: calc(100% / 6);
text-align: center;
}
.top h3 {
font-size: 20px;
}
.wrap {
z-index: 100;
top: 0;
height: 865px;
}
.left {
background: #fff;
}
.right {
width: -webkit-fill-available;
}
.search .box button img{width: 20px;}
.pg-item {
display: inline-block;
padding: 10px;
color: #949292;
}
table {
width: 90%;
text-align: center;
border-collapse: collapse;
margin: 0 auto;
}
th,
td {
border-left: none;
border-right: none;
}
table th {
padding: 15px 0;
color: #fff;
background-color: #13833b;
}
table td {
padding: 10px 0;
border-bottom: 1px solid #e5e5dd;
}
table thead tr {
background-color: #f7f6f6;
}
.modal2 {
padding: 3rem;
}
.modal2 h4 {
font-size: 2rem;
}
.modal {
width: 100rem;
}
.modalmain {
max-height: 70rem;
overflow: scroll;
overflow-x: hidden;
}
.modalmain select {
width: max-content;
}
.modalmain input[type="text"] {
width: inherit;
}
.modalmain table thead {
background: #f7f6f6;
}
.modalmain table td {
border: 1px solid #eee;
}
.modal h2 {
background: #018b4d;
font-size: 3rem;
padding: 1.5rem;
color: #ffffff;
}
.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 h2 button {
border: 0;
background: none;
height: 30px;
cursor: pointer;
width: fit-content;
}
.modal-bg button {
border: 0;
background: none;
height: 30px;
cursor: pointer;
}
.modal button img {
width: 25px;
}
.search-btn{padding: 1rem 2rem;}
.ol-popup-custom {
padding: 0;
margin: 0;
pointer-events: none;
position: absolute;
background-color: white;
filter: drop-shadow(3px 3px 7px rgba(0,0,0,0.6));
border: 1px solid black;
width: 90px;
left: -45px; /* 위치를 조정, -width의 절반값 */
height: 24px;
bottom: -12px; /* 위치를 조정, -height의 절반값 */
box-sizing: border-box;
overflow: hidden;
}
.popup-content {
position: relative;
animation-duration: 1s;
animation-name: slidein;
animation-direction: alternate;
animation-iteration-count: infinite;
box-sizing: border-box;
line-height: 100%;
}
.popup-content > span {
display: inline-block;
line-height: 100%;
width: 100%;
font-size:10px;
font-weight: bold;
box-sizing: border-box;
}
</style>