<template> <div class="flex"> <button @click="toggleSlide" class="toggle">검색하기</button> <div :class="['slide-content left', { active: showSlide }]"> <div class="wrap flex-between"> <div class="search"> <h2>횡단보도 등록</h2> <div class="box"> <div class="flex-between m-b"> <label for="">시/도</label> <select name="" id=""></select> </div> <div class="flex-between m-b"> <label for="">시/군/구</label> <select name="" id=""></select> </div> <div class="flex-between m-b"> <label for="">행정동</label> <select name="" id=""></select> </div> <div class="flex-between m-b"> <label for="">교차로</label> <select name="" id=""></select> </div> <div class="flex-between m-b"> <label for="">방위각</label> <select name="" id=""></select> </div> <div class="m-b"> <div class="flex m-b"> <label for="" class="m-r">횡단보도 좌표</label ><button>좌표수정</button> </div> <div class="flex gap"> <div class="flex m-b"> <label class="m-r">위도 : </label> <input style="width: 9rem" type="text" name="" id="" placeholder="00.0000" /> </div> <div class="flex m-b"> <label class="m-r">경도 : </label> <input style="width: 9rem" type="text" name="" id="" placeholder="00.0000" /> </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" /><label for="">무단횡단</label> <input type="checkbox" /><label for="">신호연장</label> <input type="checkbox" /><label for="">우회전차량</label> </div> <div class="bottom"> <div class="flex m-b"> <label class="m-r">무단횡단 검지 범위 : </label> <input type="text" name="" id="" placeholder="" /> </div> <div class="flex m-b"> <label class="m-r">왕복차선 정보 : </label> <input type="text" name="" id="" placeholder="" /> </div> <div class="flex m-b"> <label class="m-r">우회전 차선 유무 : </label> <select style="width: 9rem" name="" id=""> <option value=""></option> </select> </div> <div class="flex m-b"> <label class="m-r">우회전 차선 유형 : </label> <input type="text" name="" id="" placeholder="" /> </div> <div class="flex m-b"> <label class="m-r">횡단보도 관리자 : </label> <div class="flex gap"> <input type="text" name="" id="" placeholder="" /> <button @click="modal_1 = true">검색</button> <div class="modal-wrap" v-if="modal_1 == true"> <div class="modal-bg"></div> <div class="modal"> <h2 class="flex-between"> 횡단보도 유지보수 담당자 검색<button type="button" class="gray-btn" @click="modal_1 = false" > <img src="../../../resources/images/close.png" alt="" /> </button> </h2> <div class="modalmain"> <div class="flex-end gap m-b" style="margin-top: 3rem" > <select name="" id=""> <option value="">검색조건</option> <option value="">이름</option> <option value="">소속정보</option> </select> <input type="text" /> <button type="button" class="btn-2 green-btn"> 검색 </button> </div> <table> <thead> <tr> <td>No</td> <td>이름</td> <td>전화번호</td> <td>소속정보</td> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <div class="bottom-wrap"> <div class="pg-wrap"> <a href="#" class="pg-item prev">◀</a> <a href="#" class="pg-item active">1</a> <a href="#" class="pg-item">2</a> <a href="#" class="pg-item">3</a> <a href="#" class="pg-item">4</a> <a href="#" class="pg-item">5</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 @click="modal_2 = true">등록</button> <div class="modal-wrap" v-if="modal_2 == true"> <div class="modal-bg"></div> <div class="modal2"> <div class="modalmain2"><h4 class="flex-between"> 횡단보도를&nbsp;<em style="color: blue">등록</em>&nbsp;하시겠습니까? </h4> <div class="flex-center gap" style="margin-top: 3rem;"> <button @click="modal_2 = false">확인</button> <button @click="modal_2 = false">취소</button> </div> </div> </div> </div> <button>취소</button> </div> </div> </div> </div> </div> <div class="right"> <div><OpenLayers ref="open_layers" /></div> </div> </div> </template> <style scoped> @media all and (max-width: 479px) { .top { overflow: scroll; } .top ul { width: 137rem; overflow: hidden; justify-content: space-between !important; padding: 2rem 1rem !important; } .top li { display: flex; } .search { width: inherit; } .toggle { color: #fff; font-weight: bold; background: #13833b; display: block !important; position: absolute; z-index: 150; top: 7.5rem; right: 1rem; } .wrap { height: auto !important; width: inherit; } .slide-content { position: absolute; z-index: 97; top: 6.5rem; left: -36rem; width: 34rem; height: 100vh; background-color: #f0f0f0; transition: transform 0.3s ease; transform: translateX(100%); } .slide-content.active { transform: translateX(0); } } .toggle { display: none; } label { width: max-content; text-align: left; } .search .box { padding: 1rem 2rem; } .search input[type="text"] { width: 9rem; } .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; } .bg-white { min-height: 46.6rem; max-height: 46.6rem; overflow: scroll; overflow-x: hidden; } .bg-white::-webkit-scrollbar-thumb { background-color: #fff; } 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; } .pg-item { display: inline-block; padding: 10px; color: #949292; } table { width: 100%; text-align: center; border-collapse: collapse; } 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 { padding: 1rem; 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: #e5e5dd; font-size: 2rem; padding: 1rem; color: #333; } .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; } .modal-bg button { border: 0; background: none; height: 30px; cursor: pointer; } .modal button img { width: 25px; } </style> <script> import axios from 'axios'; import MapPage from "../../component/MapPage.vue"; import OpenLayers from "../../component/OpenLayers.vue"; import { vworldBaseLayer, vworldGrayLayer, vworldMidnightLayer, vworldHybridLayer, vworldSatelliteLayer, } from "../../component/OpenLayersMap.vue"; import {baseStyles} from '../../component/OpenLayersStyle.vue'; var freeBus = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "popupContent": "18th & California Light Rail Stop", "data" : 123 }, "geometry": { "type": "Point", "coordinates": [126.9757184, 37.564388] } },{ "type": "Feature", "properties": { "popupContent": "20th & Welton Light Rail Stop", "data" : 456 }, "geometry": { "type": "Point", "coordinates": [124.9748523, 37.5796212] } } ] }; export default { data() { return { showSlide: false, modal_1: false, modal_2: false, tabs: [ { id: 1, title: "상황발생현황", content1: "This is the content for Tab 1", }, { id: 2, 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 }, ], }; }, components: { MapPage: MapPage, OpenLayers: OpenLayers, }, methods: { toggleSlide() { this.showSlide = !this.showSlide; }, changeTab(tabId) { this.activeTab = tabId; }, toggleActive(item) { item.isActive = !item.isActive; }, childClick : function(prop,coordinate){ console.log(prop); console.log(coordinate); // 레이어 삭제 this.$refs.open_layers.removeLayer('point1'); // Icon 그리기 this.$refs.open_layers.createIcon(coordinate[0],coordinate[1],'/client/resources/images/icon/fin.png',0.3, 'point1'); } }, watch: {}, computed: {}, mounted() { console.log("Main2 mounted"); var vm = this; // 지도 초기화 this.$refs.open_layers.setBaseMap(vworldBaseLayer); //this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson.json','testMap','EPSG:4326', baseStyles['labelStyle'],'label'); this.$refs.open_layers.addVectorLayerByUrl('/testDongGeoJson2.json','testMap','EPSG:5181', baseStyles['MultiPolygon'],'MultiPolygon'); }, }; </script>