|
@@ -23,10 +23,20 @@
|
|
|
<div class="admin-content">
|
|
|
<div class="left">
|
|
|
<div class="title">교통 CCTV 목록</div>
|
|
|
+ <div class="combo">
|
|
|
+ <select id="ixr-dvsn" name="ixr-dvsn" title="교차로 진행 차수" style="padding: 5px">
|
|
|
+ <option th:each="item : ${combo}" th:text="${item.getDvsn()+ '차 사업 교차로'}" th:value="${item.getDvsn()}"></option>
|
|
|
+ </select>
|
|
|
+ <div class="ixr-count" th:text="${'(' + intersection.getDisabled() + '/' + intersection.getTotal() + ')'}"></div>
|
|
|
+ <label class="toggle-button" for="totalSwitch">
|
|
|
+ <input id="totalSwitch" role="switch" type="checkbox" th:if="${intersection.getDisabled() != 0}" checked>
|
|
|
+ <input id="totalSwitch" role="switch" type="checkbox" th:if="${intersection.getDisabled() == 0}">
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
<div class="list"></div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <div class="title">영상화면은 30초 동안 재생됩니다. <label class="toggle-button"><input id="switch" role="switch" type="checkbox"></label></div>
|
|
|
+ <div class="title">영상화면은 30초 동안 재생됩니다. <label for="switch" class="toggle-button"><input id="switch" role="switch" type="checkbox"></label></div>
|
|
|
<div class="content">
|
|
|
<video id="video" class="video-js vjs-big-play-centered vjs-control-bar" playsinline style="width: 100%; height: 100%"></video>
|
|
|
</div>
|
|
@@ -51,10 +61,43 @@
|
|
|
const $list = $('.admin-content .left .list');
|
|
|
const $title = $('.admin-content .left .title');
|
|
|
const $switch = $('#switch');
|
|
|
+ const $totalSwitch = $('#totalSwitch');
|
|
|
|
|
|
recvCctvData(cctv);
|
|
|
recvIxrData(intersection);
|
|
|
|
|
|
+ $totalSwitch.on('click', function(event){
|
|
|
+ event.preventDefault();
|
|
|
+ let useYn = $(this).is(':checked') ? 1 : 0;
|
|
|
+
|
|
|
+ const $dvsn = $('#ixr-dvsn');
|
|
|
+ const dvsnVal = $dvsn.val();
|
|
|
+ const dvsnNm = $("#ixr-dvsn option:checked").text();
|
|
|
+
|
|
|
+ let message = dvsnNm+ "를 홈페이지에 표출 하시겠습니까?";
|
|
|
+ if (!useYn) {
|
|
|
+ message = dvsnNm+ "를 교차로들을 홈페이지에 표출 하지 않겠습니까?";
|
|
|
+ }
|
|
|
+
|
|
|
+ let param = {
|
|
|
+ useYn : useYn,
|
|
|
+ dvsn : dvsnVal,
|
|
|
+ }
|
|
|
+
|
|
|
+ alertMessage('blue', message, 'CCTV 관리', null, ()=>{
|
|
|
+ getDataAsync('/api/itcs/hmpg-stts-total-update', "POST", param, null, (jsonData)=>{
|
|
|
+ if (jsonData) {
|
|
|
+ alertMessage('blue', jsonData.message, 'CCTV 관리', null, null);
|
|
|
+ if (jsonData.success === 'S') {
|
|
|
+ $(this).prop('checked', !$(this).is(':checked'));
|
|
|
+ getIxrData(true);
|
|
|
+ closeVideo();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, false);
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
$switch.on('click', function (event) {
|
|
|
event.preventDefault();
|
|
|
const selectTab = $('.tab > div.active').text();
|
|
@@ -104,7 +147,7 @@
|
|
|
getCctvData(cctvId);
|
|
|
}
|
|
|
else {
|
|
|
- getIxrData(cctvId, ixrId);
|
|
|
+ getIxrData(true);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -112,6 +155,14 @@
|
|
|
})
|
|
|
})
|
|
|
|
|
|
+ $('#ixr-dvsn').on('change', function() {
|
|
|
+ getIxrData(true);
|
|
|
+ if ($('ul.active li.active')[0]) {
|
|
|
+ $('ul.active li.active').removeClass('active');
|
|
|
+ }
|
|
|
+ closeVideo();
|
|
|
+ })
|
|
|
+
|
|
|
let video = videojs("video", {
|
|
|
sources: [],
|
|
|
controls : true,
|
|
@@ -163,50 +214,49 @@
|
|
|
getDataAsync('/api/traffic/cctv-list-all', 'POST', null, cctvId, recvCctvData, null);
|
|
|
}
|
|
|
|
|
|
- function getIxrData(cctvId, ixrId) {
|
|
|
- getDataAsync('/api/itcs/list-all', 'POST', null, [cctvId, ixrId], recvIxrData, null);
|
|
|
+ function getIxrData(isWrite) {
|
|
|
+ const param = {
|
|
|
+ dvsn : $('#ixr-dvsn').val()
|
|
|
+ };
|
|
|
+ getDataAsync('/api/itcs/list-all', 'POST', param, isWrite, recvIxrData, null);
|
|
|
}
|
|
|
|
|
|
- function recvIxrData(jsonData, args) {
|
|
|
- if (jsonData && jsonData.length > 0) {
|
|
|
+ function recvIxrData(jsonData, isWrite) {
|
|
|
+ let intersectionStr = '<ul><li style="padding: 10px; box-sizing: border-box;">표출할 데이터가 없습니다.</li></ul>';
|
|
|
+ if (jsonData) {
|
|
|
+ const {disabled, total} = jsonData;
|
|
|
+ $('.ixr-count').text('(' + disabled + '/' + total + ')');
|
|
|
+ $('#totalSwitch').prop('checked', disabled !== 0);
|
|
|
|
|
|
- jsonData.sort(function(a, b){
|
|
|
- return a.ixr_nm > b.ixr_nm ? 1 : a.ixr_nm < b.ixr_nm ? -1 : 0;
|
|
|
- });
|
|
|
-
|
|
|
- let intersectionStr = "";
|
|
|
- jsonData.forEach((obj)=>{
|
|
|
- let cnt = 0;
|
|
|
- let detailStr = "";
|
|
|
- obj.detail.forEach((camera)=>{
|
|
|
- detailStr += `<li id="${camera.cmra_id}" class="state-${camera.cmra_use_yn}" onclick="detailClick('${camera.cmra_id}')">${camera.drct_lctn}</li>`;
|
|
|
- detailMap.set(camera.cmra_id, camera);
|
|
|
- if (camera.cmra_use_yn === 1) {
|
|
|
- cnt++;
|
|
|
- }
|
|
|
- });
|
|
|
- ixrMap.set(obj.ixr_id, obj);
|
|
|
- intersectionStr += `<ul id="${obj.ixr_id}" onclick="ixrClick('${obj.ixr_id}')">
|
|
|
- <div>${obj.ixr_nm} (${cnt}/${obj.detail.length})</div>
|
|
|
+ const intList = jsonData.int_list;
|
|
|
+ if (intList && intList.length) {
|
|
|
+ intersectionStr = "";
|
|
|
+ intList.forEach((obj)=>{
|
|
|
+ let detailStr = '';
|
|
|
+ let cnt = 0;
|
|
|
+ obj.detail.forEach((camera)=>{
|
|
|
+ detailStr += `<li id="${camera.cmra_id}" class="state-${camera.cmra_use_yn}" onclick="detailClick('${camera.cmra_id}')">${camera.drct_lctn}</li>`;
|
|
|
+ detailMap.set(camera.cmra_id, camera);
|
|
|
+ if (camera.cmra_use_yn === 1) {
|
|
|
+ cnt++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ ixrMap.set(obj.ixr_id, obj);
|
|
|
+ intersectionStr += `<ul id="${obj.ixr_id}" onclick="ixrClick('${obj.ixr_id}')">
|
|
|
+ <div>${obj.ixr_nm} (${cnt}/${obj.detail.length})</div>
|
|
|
<ul class="cmra-list">`;
|
|
|
- intersectionStr += detailStr
|
|
|
- intersectionStr += `</ul></ul>`;
|
|
|
- });
|
|
|
- strMap.set('smart', intersectionStr);
|
|
|
+ intersectionStr += detailStr
|
|
|
+ intersectionStr += `</ul></ul>`;
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
- if ($('.smart').hasClass('active')) {
|
|
|
+ strMap.set('smart', intersectionStr);
|
|
|
+ if (isWrite) {
|
|
|
$list.html(strMap.get('smart'));
|
|
|
- if (args && args.length > 0) {
|
|
|
- args.forEach((obj)=>{
|
|
|
- if(obj) {
|
|
|
- $('#' + obj).addClass('active');
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
function recvCctvData(jsonData, cctvId) {
|
|
|
let cctvStr = "";
|
|
|
if (jsonData && jsonData.length > 0) {
|
|
@@ -234,6 +284,18 @@
|
|
|
|
|
|
$list.html(strMap.get(show));
|
|
|
$title.text($show.text() + ' 목록');
|
|
|
+ const combo = $('.combo');
|
|
|
+ const list = $('.cctvWrap .admin-content .left .list');
|
|
|
+ let comboOnOff = 'none';
|
|
|
+ let height = 'calc(100% - 50px)';
|
|
|
+ if (show === 'smart') {
|
|
|
+ comboOnOff = 'flex';
|
|
|
+ height = (list.height() - combo.height() - 10) + 'px';
|
|
|
+ }
|
|
|
+
|
|
|
+ combo.css('display', comboOnOff);
|
|
|
+
|
|
|
+ list.css('height', height);
|
|
|
}
|
|
|
|
|
|
function cctvClick(cctvNo) {
|