Kaynağa Gözat

2024-10-24 update to admin cctv page(divide into intersection dvsn)

junggilpark 9 ay önce
ebeveyn
işleme
234f5da1c5

+ 2 - 1
src/main/java/com/its/web/controller/admin/AdminController.java

@@ -143,7 +143,8 @@ public class AdminController {
     public String adminCctvManagement(Model model) {
         model.addAttribute("selected", "cctv");
         model.addAttribute("cctv", trafficService.findAllCctv());
-        model.addAttribute("intersection", ixrService.findAllIntersection());
+        model.addAttribute("intersection", ixrService.findAllIntersection("1"));
+        model.addAttribute("combo", ixrService.getIxrComboList());
         return "admin/cctv";
     }
 

+ 20 - 2
src/main/java/com/its/web/controller/traffic/IntersectionController.java

@@ -2,16 +2,20 @@ package com.its.web.controller.traffic;
 
 import com.its.web.dto.admin.HmpgUseYnDto;
 import com.its.web.dto.message.ResultDto;
+import com.its.web.dto.traffic.IntersectionCameraCountDto;
 import com.its.web.dto.traffic.IntersectionCameraDto;
 import com.its.web.dto.traffic.IntersectionDto;
 import com.its.web.service.traffic.IntersectionService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
+import io.swagger.annotations.ApiParam;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 @Slf4j
 @RequiredArgsConstructor
@@ -31,8 +35,9 @@ public class IntersectionController {
     @ApiOperation(value = "01.스마트 교차로 전체 리스트 조회(IXR_MNGM)", response = IntersectionDto.class, responseContainer = "ArrayList")
     @PostMapping(value = "/list-all", produces = {"application/json; charset=utf-8"})
     @ResponseBody
-    public List<IntersectionDto> findAllIntersectionList() {
-        return service.findAllIntersection();
+    public IntersectionCameraCountDto findAllIntersectionList(@ApiParam(value = "사업번호", example = "1", required = true)
+                                                             @RequestParam("dvsn") String dvsn) {
+        return service.findAllIntersection(dvsn);
     }
 
     @ApiOperation(value = "02.스마트 교차로 카메라 홈페이지 표출 여부 설정", response = ResultDto.class)
@@ -42,6 +47,19 @@ public class IntersectionController {
         return this.service.updateCctvHmpgUseYn(param);
     }
 
+    @ApiOperation(value = "03.스마트 교차로 교차로 사업 차수별 카메라 홈페이지 표출 여부 설정", response = ResultDto.class)
+    @PostMapping(value = "/hmpg-stts-total-update", produces = {"application/json; charset=utf-8"})
+    @ResponseBody
+    public ResultDto updateTotalCctvHmpgUseYn(@ApiParam(value = "사업 교차로 번호", example = "1", required = true)
+                                              @RequestParam("dvsn") String dvsn,
+                                              @ApiParam(value = "사용여부", example = "0", required = true)
+                                              @RequestParam("useYn") String useYn) {
+        Map<String, Object> paramMap = new HashMap<>();
+        paramMap.put("dvsn", dvsn);
+        paramMap.put("useYn", useYn);
+        return this.service.updateTotalCctvHmpgUseYn(paramMap);
+    }
+
     @ApiOperation(value = "04.스마트 교차로 카메라 리스트 조회(CMRA_MNGM)", response = IntersectionDto.class, responseContainer = "ArrayList")
     @PostMapping(value = "/detail-list", produces = {"application/json; charset=utf-8"})
     @ResponseBody

+ 28 - 0
src/main/java/com/its/web/dto/traffic/IntersectionCameraCountDto.java

@@ -0,0 +1,28 @@
+package com.its.web.dto.traffic;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.List;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@ApiModel("IntersectionCameraCountDto(스마트교차로 카메라 활성화 카운트 DTO)")
+public class IntersectionCameraCountDto {
+    @ApiModelProperty("전체 개수")
+    @JsonProperty("total")
+    private Integer total;
+
+    @ApiModelProperty("비활성화 개수")
+    @JsonProperty("disabled")
+    private Integer disabled;
+
+    @ApiModelProperty("교차로 리스트")
+    @JsonProperty("int_list")
+    private List<IntersectionDto> intList;
+}

+ 18 - 0
src/main/java/com/its/web/dto/traffic/IntersectionDvsnDto.java

@@ -0,0 +1,18 @@
+package com.its.web.dto.traffic;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@ApiModel("IntersectionDvsnDto(교차로 진행 차수)")
+public class IntersectionDvsnDto {
+    @ApiModelProperty("교차로 진행 차수")
+    @JsonProperty("dvsn")
+    private String dvsn;
+}

+ 10 - 0
src/main/java/com/its/web/mapper/itcs/IntersectionMapper.java

@@ -4,8 +4,10 @@ import com.its.web.dto.admin.HmpgUseYnDto;
 import com.its.web.dto.statistics.DaeroMngmDto;
 import com.its.web.dto.statistics.IxrMngmDto;
 import com.its.web.dto.statistics.TrafficStatisticsDto;
+import com.its.web.dto.traffic.IntersectionCameraCountDto;
 import com.its.web.dto.traffic.IntersectionCameraDto;
 import com.its.web.dto.traffic.IntersectionDto;
+import com.its.web.dto.traffic.IntersectionDvsnDto;
 import org.apache.ibatis.annotations.Mapper;
 
 import java.util.List;
@@ -28,4 +30,12 @@ public interface IntersectionMapper {
     int updateCctvHmpgUseYn(HmpgUseYnDto param);
 
     List<IxrMngmDto> findIxrName();
+
+    IntersectionCameraCountDto getIxrCameraCount(Map<String, Object> paramMap);
+
+    List<IntersectionCameraDto> findEditCameraList(Map<String, Object> paramMap);
+
+    List<IntersectionDvsnDto> getIxrComboList();
+
+    int updateTotalCctvHmpgUseYn(Map<String, Object> paramMap);
 }

+ 73 - 40
src/main/java/com/its/web/service/traffic/IntersectionService.java

@@ -2,9 +2,7 @@ package com.its.web.service.traffic;
 
 import com.its.web.dto.admin.HmpgUseYnDto;
 import com.its.web.dto.message.ResultDto;
-import com.its.web.dto.traffic.IntersectionCameraDto;
-import com.its.web.dto.traffic.IntersectionDto;
-import com.its.web.dto.traffic.TbScCmraArrowDto;
+import com.its.web.dto.traffic.*;
 import com.its.web.mapper.itcs.IntersectionMapper;
 import com.its.web.mapper.its.traffic.TrafficMapper;
 import com.its.web.util.CommonUtil;
@@ -25,49 +23,73 @@ public class IntersectionService {
     private final IntersectionMapper mapper;
     private final TrafficMapper trafficMapper;
 
+
+    public List<IntersectionDvsnDto> getIxrComboList() {
+        return mapper.getIxrComboList();
+    }
     /**
      * 스마트 교차로 전체 정보를 목록으로 조회하여 리턴
      * @return
      */
-    public List<IntersectionDto> findAllIntersection() {
-        Map<String, IntersectionDto> result = new HashMap<>();
-
-        // 교차로 목록 조회
-        List<IntersectionDto> intersectionDtos = this.mapper.findAllIntersection();
-        intersectionDtos.forEach(crs -> {
-            crs.setDetail(new ArrayList<>());
-            result.put(crs.getIxrId(), crs);
-        });
-
-        // 교차로 카메라 정보를 조회 하여 해당 교차로에 리스트로 추가
-        List<IntersectionCameraDto> details = this.mapper.findAllIntersectionDetail();
-        details.forEach(detl -> {
-            IntersectionDto crsInfo = result.get(detl.getIxrId());
-            if (crsInfo != null) {
-                crsInfo.getDetail().add(detl);
-            }
-            else {
-//                log.error("not found crs info: {}", detl);
-            }
-        });
-
-        // 교차로의 소통정보를 조회하여 교차로 정보에 추가
-        List<TbScCmraArrowDto> arrows = this.trafficMapper.findAllIntersectionCameraArrow();
-        for (TbScCmraArrowDto arrow : arrows) {
-            IntersectionDto crsInfo = result.get(arrow.getIxrId());
-            if (crsInfo != null) {
-                for (IntersectionCameraDto detail : crsInfo.getDetail()) {
-                    if (detail.getCmraId().equals(arrow.getCmraId()) &&
-                            detail.getDrctDvsnCd().equals(arrow.getDrctDvsnCd())) {
-                            detail.setStartX(arrow.getStartX());
-                            detail.setStartY(arrow.getStartY());
-                            detail.setEndX(arrow.getEndX());
-                            detail.setEndY(arrow.getEndY());
-                    }
-                }
+    public IntersectionCameraCountDto findAllIntersection(String dvsn) {
+        Map<String, Object> paramMap = new HashMap<>();
+        paramMap.put("dvsn",dvsn);
+        IntersectionCameraCountDto result =  mapper.getIxrCameraCount(paramMap);
+        List<IntersectionCameraDto> camera = mapper.findEditCameraList(paramMap);
+        result.setIntList(new ArrayList<>());
+        log.info("{}",result);
+        Map<String, Boolean> checkMap = new HashMap<>();
+        for (IntersectionCameraDto dto : camera) {
+            if (checkMap.get(dto.getIxrId()) == null) {
+                IntersectionDto ixr =  new IntersectionDto();
+                ixr.setIxrId(dto.getIxrId());
+                ixr.setIxrNm(dto.getIxrNm());
+                ixr.setDetail(new ArrayList<>());
+                checkMap.put(dto.getIxrId(), true);
+                result.getIntList().add(ixr);
             }
+            result.getIntList().get(checkMap.size() - 1).getDetail().add(dto);
         }
-        return  new ArrayList<>(result.values());
+
+        return result;
+//        Map<String, IntersectionDto> result = new HashMap<>();
+//
+//        // 교차로 목록 조회
+//        List<IntersectionDto> intersectionDtos = this.mapper.findAllIntersection();
+//        intersectionDtos.forEach(crs -> {
+//            crs.setDetail(new ArrayList<>());
+//            result.put(crs.getIxrId(), crs);
+//        });
+//
+//        // 교차로 카메라 정보를 조회 하여 해당 교차로에 리스트로 추가
+//        List<IntersectionCameraDto> details = this.mapper.findAllIntersectionDetail();
+//        details.forEach(detl -> {
+//            IntersectionDto crsInfo = result.get(detl.getIxrId());
+//            if (crsInfo != null) {
+//                crsInfo.getDetail().add(detl);
+//            }
+//            else {
+////                log.error("not found crs info: {}", detl);
+//            }
+//        });
+//
+//        // 교차로의 소통정보를 조회하여 교차로 정보에 추가
+//        List<TbScCmraArrowDto> arrows = this.trafficMapper.findAllIntersectionCameraArrow();
+//        for (TbScCmraArrowDto arrow : arrows) {
+//            IntersectionDto crsInfo = result.get(arrow.getIxrId());
+//            if (crsInfo != null) {
+//                for (IntersectionCameraDto detail : crsInfo.getDetail()) {
+//                    if (detail.getCmraId().equals(arrow.getCmraId()) &&
+//                            detail.getDrctDvsnCd().equals(arrow.getDrctDvsnCd())) {
+//                            detail.setStartX(arrow.getStartX());
+//                            detail.setStartY(arrow.getStartY());
+//                            detail.setEndX(arrow.getEndX());
+//                            detail.setEndY(arrow.getEndY());
+//                    }
+//                }
+//            }
+//        }
+//        return  new ArrayList<>(result.values());
     }
 
     public List<IntersectionCameraDto> findAllIntersectionCamera() {
@@ -128,4 +150,15 @@ public class IntersectionService {
         }
         return CommonUtil.getResultDto(success, message);
     }
+
+    public ResultDto updateTotalCctvHmpgUseYn(Map<String, Object> paramMap) {
+        int affectedRow = this.mapper.updateTotalCctvHmpgUseYn(paramMap);
+        String message = "설정하신 홈페이지 표출정보를 수정하였습니다.";
+        String success = "S";
+        if (affectedRow <= 0) {
+            message = "설정하신 홈페이지 표출정보가 수정되지 않았습니다.";
+            success = "F";
+        }
+        return CommonUtil.getResultDto(success, message);
+    }
 }

+ 77 - 0
src/main/resources/mybatis/mapper/itcs/InterSectionMapper.xml

@@ -24,6 +24,77 @@
         ORDER BY A.ixr_nm
     </select>
 
+    <select id="getIxrComboList" resultType="com.its.web.dto.traffic.IntersectionDvsnDto">
+        select distinct(dvsn) dvsn from ixr_mngm
+    </select>
+
+    <select id="getIxrCameraCount" parameterType="java.util.HashMap" resultType="com.its.web.dto.traffic.IntersectionCameraCountDto">
+        select count(1) as total,
+               sum(decode(b.hmpg_dspl_en, 1, 1, 0)) as disabled
+          from ixr_mngm a, cmra_mngm b
+         where a.dvsn = #{dvsn}
+           and a.ixr_id = b.ixr_id
+    </select>
+
+    <select id="findEditCameraList" parameterType="java.util.HashMap" resultType="com.its.web.dto.traffic.IntersectionCameraDto">
+        SELECT
+            im.ixr_id,
+            im.ixr_nm,
+            cmra.cmra_id,
+            cmra.drct_dvsn_cd,
+            cmra.drct_lctn,
+            cmra.bus_dvrs_lane_en,
+            cmra.srvc_anly_en,
+            cmra.cmra_ip,
+            cmra.cmra_port,
+            cmra.cmra_http_port,
+            cmra.cmra_url,
+            cmra.cmra_type,
+            cmra.cmra_x_crdn,
+            cmra.cmra_y_crdn,
+            cmra.cmra_angn,
+            cmra.acrd_los,
+            cmra.dely_hh,
+            cmra.cmra_use_yn,
+            cmra.hmpg_cmra_url,
+            cmra.istl_lctn
+        FROM (select *
+              from itcs.ixr_mngm
+              where use_en = 1 and dvsn = #{dvsn}) im
+                 left outer join (
+            SELECT
+                CM.ixr_id,
+                CM.cmra_id,
+                CDM.drct_dvsn_cd,
+                CDM.drct_lctn,
+                CDM.bus_dvrs_lane_en,
+                CDM.srvc_anly_en,
+                CM.cmra_ip,
+                CM.cmra_port,
+                CM.cmra_http_port,
+                CM.cmra_url,
+                CM.cmra_type,
+                CM.cmra_y_crdn AS cmra_x_crdn,
+                CM.cmra_x_crdn AS cmra_y_crdn,
+                CM.cmra_angn,
+                ALS.acrd_los,
+                ALS.dely_hh,
+                CM.hmpg_dspl_en AS cmra_use_yn,
+                CM.hmpg_cmra_url,
+                CM.istl_lctn AS istl_lctn
+            FROM itcs.CMRA_MNGM CM
+                     JOIN itcs.CMRA_DRCT_MNGM CDM
+                          ON CM.ixr_id = CDM.ixr_id
+                              AND CM.cmra_id = CDM.cmra_id
+                     JOIN itcs.ACRD_LOS_STTS ALS
+                          ON CM.ixr_id = ALS.ixr_id
+                              AND CDM.drct_dvsn_cd = ALS.drct_dvsn_cd
+            WHERE CDM.drct_dvsn_cd=ALS.drct_dvsn_cd) cmra
+                                 on im.ixr_id = cmra.ixr_id
+        order by ixr_nm, drct_lctn
+    </select>
+
+
     <select id="findAllIntersectionDetail" resultType="com.its.web.dto.traffic.IntersectionCameraDto">
         SELECT
             CM.ixr_id,
@@ -270,6 +341,12 @@
         </if>
     </update>
 
+    <update id="updateTotalCctvHmpgUseYn" parameterType="com.its.web.dto.admin.HmpgUseYnDto">
+        UPDATE CMRA_MNGM
+        SET HMPG_DSPL_EN = #{useYn,jdbcType=INTEGER}
+        WHERE IXR_ID in (select ixr_id from ixr_mngm where dvsn = #{dvsn})
+    </update>
+
     <select id="findIxrName" resultType="com.its.web.dto.statistics.IxrMngmDto">
         SELECT
             IXR_ID,

+ 17 - 1
src/main/resources/static/css/cctv.css

@@ -224,7 +224,23 @@
     min-width: 300px;
     margin-right: 20px;
 }
-
+.cctvWrap .admin-content .left .combo {
+    width: 100%;
+    height: 40px;
+    border: 1px solid #c3c1c1;
+    padding: 0 10px;
+    box-sizing: border-box;
+    margin-top: 10px;
+    display: none;
+    align-items: center;
+}
+.cctvWrap .admin-content .left .combo > div {
+    margin-left: 10px;
+}
+.cctvWrap .admin-content .left .combo > label {
+    margin-left: auto;
+    margin-top : 5px;
+}
 .cctvWrap .admin-content .left .list{
     width: 100%;
     height: calc(100% - 50px);

+ 99 - 37
src/main/resources/templates/admin/cctv.html

@@ -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) {