修改展示形式

liujun001
1 parent 395d70a8
Showing 7 changed files with 488 additions and 92 deletions
src/main/java/com/bsth/controller/video/VideoController.java
src/main/java/com/bsth/entity/video/VideoTree.java
src/main/java/com/bsth/service/impl/videoimpl/VideoServiceImpl.java
src/main/java/com/bsth/service/video/VideoService.java
src/main/resources/static/pages/video/video.html
src/main/resources/static/pages/video/video.js
src/main/resources/static/pages/video/videoPage.html
@@ -17,11 +17,13 @@ import com.bsth.service.video.VideoService;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.collections.MapUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.PageImpl;
 import org.springframework.web.bind.annotation.*;
+import javax.servlet.http.HttpServletRequest;
 import java.util.*;
 /**
@@ -55,6 +57,27 @@ public class VideoController {
         return result;
     }
+    @GetMapping("/tree/carNo/{parentId}")
+    public List<VideoTree> layTreeNodeCarNo(@PathVariable("parentId") String parentId) {
+        return videoService.combinationTreeOfCar(parentId);
+    }
+
+    @GetMapping("/tree/search")
+    public Map<String, Object> searchLayTreeNode(HttpServletRequest request) {
+        String carNo = request.getParameter("insideCode_like");
+        if (StringUtils.isEmpty(carNo)) {
+            return combinationTree();
+        }
+        List<VideoTree> groups = videoService.searchTreeDataByCarNo(carNo);
+
+        Map<String, Object> result = new HashMap<>();
+        result.put("status", ResponseCode.SUCCESS);
+        result.put("data", groups);
+
+        return result;
+    }
+
+
     @GetMapping("/tree/table")
     public Map<String, Object> queryTreeTable(@RequestParam Map<String, Object> map,
                                               @RequestParam(defaultValue = "0") int page,
@@ -117,16 +140,53 @@ public class VideoController {
         return result;
     }
+    @GetMapping("/car/channel/tree/{carNo}")
+    public Map<String, Object> queryChannelsTree(@PathVariable String carNo) {
+        Map<String, Object> result = new HashMap<>();
+        try {
+
+
+            List<Map<String, Object>> videoChannels = videoService.getVideoChannel(carNo);
+            List<VideoTree> trees = new ArrayList<>();
+
+            if (CollectionUtils.isNotEmpty(videoChannels)) {
+                for (Map<String, Object> map : videoChannels) {
+                    VideoTree tree = new VideoTree();
+                    tree.setId(map.get("channelId"));
+                    tree.setCode(map.get("channelId"));
+                    tree.setSourceId(map.get("deviceId"));
+                    tree.setType(401);
+                    tree.setIcon("layui-icon-video");
+                    String name = Objects.isNull(map.get("name")) ? map.get("channelId") + "_" + map.get("deviceId") : map.get("name").toString();
+                    tree.setText(name);
+                    tree.setNodePValue(carNo);
+
+                    trees.add(tree);
+                }
+            }
+            result.put("status", ResponseCode.SUCCESS);
+            result.put("data", trees);
+            result.put("channelImageURL", wvpConfig.getChannelListOfImgURL());
+            result.put("wvpPlayURL", wvpConfig.getWvpPlayURL());
+            result.put("wvpLiveBroadcast", wvpConfig.getWvpLiveBroadcast());
+
+        } catch (Exception e) {
+            log.error("查询车辆通道异常:[{}]", carNo, e);
+            result.put("status", ResponseCode.ERROR);
+        }
+        return result;
+    }
+
     @GetMapping("/car/channel/history/{device}/{channel}/{dateStr}")
     public Map<String, Object> queryChannelHistoryList(@PathVariable("device") String device, @PathVariable("channel") String channel, @PathVariable("dateStr") String dateStr) {
         Map<String, Object> result = new HashMap<>();
         try {
             String token = videoService.getToken();
-            List<Map<String, Object>> videoChannels = videoService.getVideoChannelHistoryList(device, channel, dateStr,token);
+            List<Map<String, Object>> videoChannels = videoService.getVideoChannelHistoryList(device, channel, dateStr, token);
             result.put("status", ResponseCode.SUCCESS);
             result.put("data", videoChannels);
-            result.put("wvpPlayURL",wvpConfig.getWvpPlayURL());
+            result.put("wvpPlayURL", wvpConfig.getWvpPlayURL());
         } catch (Exception e) {
             log.error("查询通道历史数据异常:[{}],[{}],[{}]", device, channel, dateStr, e);
             result.put("status", ResponseCode.ERROR);
 package com.bsth.entity.video;
 import lombok.Data;
+import org.apache.commons.lang3.StringUtils;
 import javax.persistence.Id;
@@ -54,11 +55,14 @@ public class VideoTree implements Serializable {
     @Transient
     private Object code;
-//    @Transient
-//    private String icon;
+    @Transient
+    private String icon;
     @Transient
     private List<VideoTree> children;
+    /**是否展开*/
+    @Transient
+    private String spread;
     public String getTitle() {
@@ -66,7 +70,7 @@ public class VideoTree implements Serializable {
     }
     public boolean getSpread() {
-        return getType() == 0 ? true : false;
+        return StringUtils.isEmpty(spread)?getType() == 0 ? true : false:Boolean.parseBoolean(spread);
     }
 }
@@ -2,6 +2,7 @@ package com.bsth.service.impl.videoimpl;
 import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONArray;
+import com.bsth.data.BasicData;
 import com.bsth.entity.Business;
 import com.bsth.entity.Line;
 import com.bsth.entity.video.VideoChannel;
@@ -46,6 +47,8 @@ public class VideoServiceImpl implements VideoService {
     private LineService lineService;
     @Autowired
     private WvpConfig wvpConfig;
+    @Autowired
+    private BasicData basicData;
     @Override
@@ -66,13 +69,119 @@ public class VideoServiceImpl implements VideoService {
     }
     @Override
+    public List<VideoTree> combinationTreeOfCar(String code) {
+        if (Objects.nonNull(code)) {
+            List<VideoTree> trees = new ArrayList<>();
+            Set<String> carNos = groupCarNosByComputeCode(code);
+
+            Set<Line> lineSet = groupLingByCompany(code);
+            if (CollectionUtils.isNotEmpty(lineSet)) {
+                for (Line line : lineSet) {
+                    VideoTree videoTree = combinationOfLine(code, line);
+                    trees.add(videoTree);
+
+                    Set<String> carNoSets = groupCarNoByLine(line.getId());
+                    if (CollectionUtils.isNotEmpty(carNoSets)) {
+                        List<VideoTree> children = new ArrayList<>();
+                        for (String carNo : carNoSets) {
+                            VideoTree carTree = combnationOfCar(carNo, line.getId().toString());
+                            children.add(carTree);
+
+                            if (CollectionUtils.isNotEmpty(carNos)) {
+                                carNos.remove(carNo);
+                            }
+                        }
+                        videoTree.setChildren(children);
+                    }
+                }
+
+            }
+
+
+            if (CollectionUtils.isNotEmpty(carNos)) {
+                for (String carNo : carNos) {
+                    VideoTree carTree = combnationOfCar(carNo, code);
+                    trees.add(carTree);
+                }
+            }
+            return trees;
+        }
+        return null;
+    }
+
+    private VideoTree combnationOfCar(String carNo, String line) {
+        String name = Objects.isNull(basicData) || MapUtils.isEmpty(basicData.nbbmCompanyPlateMap) ? null : basicData.nbbmCompanyPlateMap.get(carNo);
+        return combinationVideoTree(carNo, carNo, line, carNo, 301, "layui-icon-transfer", carNo);
+    }
+
+    private VideoTree combinationOfLine(String code, Line line) {
+        return combinationVideoTree(line.getId(), line.getName(), code, line.getId(), 201, "layui-icon-link", line.getLineCode());
+    }
+
+    @Override
+    public List<VideoTree> searchTreeDataByCarNo(String carNo) {
+        Line line = findLineByCode(carNo);
+
+        Iterable<Business> businessIterable = businessService.list(new HashMap<>());
+        if (Objects.isNull(businessIterable)) {
+            return Collections.emptyList();
+        }
+
+        if (Objects.nonNull(line)) {
+            Set<Business> businesses = new LinkedHashSet<>();
+            findBussinessByUpCode(line.getCompany(), businessIterable, businesses);
+            if (CollectionUtils.isNotEmpty(businesses)) {
+                List<VideoTree> group = combitionBussiness(businesses);
+
+                VideoTree sourceTree = findVideoTreeByBusinessCode(line.getCompany(), group);
+                if (Objects.isNull(sourceTree.getChildren())) {
+                    sourceTree.setChildren(new ArrayList<>());
+                }
+                VideoTree lineOfTreeNode = combinationOfLine(sourceTree.getId().toString(), line);
+                lineOfTreeNode.setSpread(Boolean.TRUE.toString());
+                lineOfTreeNode.setChildren(new ArrayList<>());
+                sourceTree.getChildren().add(lineOfTreeNode);
+
+                VideoTree carOfTreeNode = combnationOfCar(carNo, line.getLineCode());
+                lineOfTreeNode.getChildren().add(carOfTreeNode);
+                carOfTreeNode.setSpread(Boolean.TRUE.toString());
+
+                return group;
+            }
+        } else {
+            Set<Business> businesses = new LinkedHashSet<>();
+            String company = basicData.nbbm2CompanyCodeMap.get(carNo);
+            if (StringUtils.isNotEmpty(company)) {
+                findBussinessByUpCode(company, businessIterable, businesses);
+                if (CollectionUtils.isNotEmpty(businesses)) {
+                    List<VideoTree> group = combitionBussiness(businesses);
+                    VideoTree sourceTree = findVideoTreeByBusinessCode(company, group);
+                    if (Objects.nonNull(sourceTree) && Objects.isNull(sourceTree.getChildren())) {
+                        sourceTree.setChildren(new ArrayList<>());
+                    }
+                    VideoTree carOfTreeNode = combnationOfCar(carNo, company);
+                    carOfTreeNode.setSpread(Boolean.TRUE.toString());
+                    sourceTree.getChildren().add(carOfTreeNode);
+
+                    sourceTree.setSpread("true");
+
+                    return group;
+                }
+            }
+        }
+
+
+        return Collections.emptyList();
+    }
+
+    @Override
     public List<Map<String, Object>> getVideoChannel(String carNo) throws Exception {
         return getWvpVideoChannelByCarNo(carNo);
     }
     @Override
-    public List<Map<String, Object>> getVideoChannelHistoryList(String device, String channel, String dateStr,String token) throws Exception {
-        return getVideoChannelHistoryListReq(device, channel, dateStr,token);
+    public List<Map<String, Object>> getVideoChannelHistoryList(String device, String channel, String dateStr, String token) throws Exception {
+        return getVideoChannelHistoryListReq(device, channel, dateStr, token);
     }
     @Override
@@ -93,11 +202,16 @@ public class VideoServiceImpl implements VideoService {
             return Collections.emptyList();
         }
+        return combitionBussiness(businessIterable);
+
+    }
+
+    private List<VideoTree> combitionBussiness(Iterable<Business> businessIterable) {
         List<VideoTree> trees = new ArrayList<>();
         Iterator<Business> iterator = businessIterable.iterator();
         while (iterator.hasNext()) {
             Business business = iterator.next();
-            VideoTree videoTree = combinationVideoTree(business.getBusinessCode(), business.getBusinessName(), business.getUpCode(), business.getId(), null, null, business.getBusinessCode());
+            VideoTree videoTree = combinationVideoTree(business.getBusinessCode(), business.getBusinessName(), business.getUpCode(), business.getId(), null, "layui-icon-component", business.getBusinessCode());
             trees.add(videoTree);
         }
         List<VideoTree> groupTree = new ArrayList<>();
@@ -116,32 +230,9 @@ public class VideoServiceImpl implements VideoService {
                 groupTree(trees, tree);
             }
         }
-
         return groupTree;
     }
-    private List<VideoTree> queryLine() {
-        Iterable<Line> lines = lineService.list(new HashMap<>());
-        if (Objects.isNull(lines)) {
-            return Collections.emptyList();
-        }
-
-        List<VideoTree> trees = new ArrayList<>();
-        Iterator<Line> iterator = lines.iterator();
-        while (iterator.hasNext()) {
-            Line line = iterator.next();
-            VideoTree videoTree = combinationVideoTree(line.getId(), line.getName(), line.getCompany(), line.getId(), 2, null, null);
-            trees.add(videoTree);
-        }
-
-
-        return trees;
-    }
-
-    private List<VideoTree> queryCars() {
-        return null;
-    }
-
     /***
      * 组合树
      * @author liujun
@@ -154,14 +245,14 @@ public class VideoServiceImpl implements VideoService {
      * @param icon 图标
      * @return com.bsth.entity.video.VideoTree
      */
-    private VideoTree combinationVideoTree(Object id, String text, String parent, Integer sourceId, Integer type, String icon, Object code) {
+    private VideoTree combinationVideoTree(Object id, String text, String parent, Object sourceId, Integer type, String icon, Object code) {
         VideoTree videoTree = new VideoTree();
         videoTree.setId(id);
         videoTree.setText(text);
         videoTree.setSourceId(sourceId);
         videoTree.setNodePValue(parent);
         videoTree.setType(type);
-//        videoTree.setIcon(icon);
+        videoTree.setIcon(icon);
         videoTree.setCode(code);
         return videoTree;
     }
@@ -235,7 +326,7 @@ public class VideoServiceImpl implements VideoService {
         }
     }
-    private List<Map<String, Object>> getVideoChannelHistoryListReq(String device, String channel, String dateStr,String token) throws Exception {
+    private List<Map<String, Object>> getVideoChannelHistoryListReq(String device, String channel, String dateStr, String token) throws Exception {
         if (StringUtils.isEmpty(token)) {
             log.error("wvp login token is null");
             return Collections.emptyList();
@@ -334,4 +425,137 @@ public class VideoServiceImpl implements VideoService {
         return null;
     }
+
+    private Set<String> groupCarNosByComputeCode(String code) {
+        if (Objects.isNull(basicData) || MapUtils.isEmpty(basicData.nbbm2CompanyCodeMap)) {
+            return Collections.emptySet();
+        }
+        Set<String> carNos = new LinkedHashSet<>();
+        for (Map.Entry<String, String> entry : basicData.nbbm2CompanyCodeMap.entrySet()) {
+            if (Objects.equals(code, entry.getValue())) {
+                carNos.add(entry.getKey());
+            }
+        }
+
+        return carNos;
+    }
+
+    private Set<String> groupCarNoByLine(Integer id) {
+        if (Objects.isNull(basicData) || MapUtils.isEmpty(basicData.nbbm2LineMap)) {
+            return Collections.emptySet();
+        }
+
+        Set<String> carNos = new LinkedHashSet<>();
+        for (Map.Entry<String, Line> entry : basicData.nbbm2LineMap.entrySet()) {
+            if (Objects.nonNull(entry.getValue()) && Objects.equals(entry.getValue().getId(), id)) {
+                carNos.add(entry.getKey());
+            }
+
+        }
+
+        return carNos;
+
+    }
+
+
+    private Set<Line> groupLine(Collection<String> carNos) {
+        if (Objects.isNull(basicData) || MapUtils.isEmpty(basicData.nbbm2LineMap)) {
+            return Collections.emptySet();
+        }
+
+        Set<Line> lineSet = new LinkedHashSet<>();
+        for (String carNo : carNos) {
+            Line line = basicData.nbbm2LineMap.get(carNo);
+            if (Objects.nonNull(line)) {
+                lineSet.add(line);
+            }
+        }
+
+        return lineSet;
+    }
+
+    private Set<Line> groupLingByCompany(String companyCode) {
+        if (Objects.isNull(basicData) || MapUtils.isEmpty(basicData.nbbm2LineMap)) {
+            return Collections.emptySet();
+        }
+
+        Set<Line> lineSet = new LinkedHashSet<>();
+        for (Map.Entry<String, Line> entry : basicData.nbbm2LineMap.entrySet()) {
+            if (Objects.nonNull(entry.getValue()) && Objects.equals(entry.getValue().getCompany(), companyCode)) {
+                lineSet.add(entry.getValue());
+            }
+
+        }
+        return lineSet;
+    }
+
+    private void findBussinessByUpCode(String upCode, Iterable<Business> businessIterable, Collection<Business> results) {
+        for (Business business : businessIterable) {
+            if (Objects.equals(business.getBusinessCode(), upCode)) {
+                results.add(business);
+                findBussinessByUpCode(business.getUpCode(), businessIterable, results);
+            }
+        }
+    }
+
+    private VideoTree findVideoTreeByBusinessCode(String bussinessCode, List<VideoTree> videoTrees) {
+        if (CollectionUtils.isEmpty(videoTrees)) {
+            return null;
+        }
+
+        for (VideoTree videoTree : videoTrees) {
+            if (Objects.nonNull(videoTree.getId()) && Objects.equals(videoTree.getId().toString(), bussinessCode)) {
+                return videoTree;
+            } else if (CollectionUtils.isNotEmpty(videoTree.getChildren())) {
+                VideoTree source = findVideoTreeByBusinessCode(bussinessCode, videoTree.getChildren());
+                if (Objects.nonNull(source)) {
+                    return source;
+                }
+            }
+        }
+
+        return null;
+    }
+
+    private Line findLineByCode(String carNo) {
+        Line line = basicData.nbbm2LineMap.get(carNo);
+        if (Objects.nonNull(line)) {
+            return line;
+        }
+        for (Map.Entry<String, Line> entry : basicData.nbbm2LineMap.entrySet()) {
+            if (StringUtils.equalsIgnoreCase(carNo, entry.getKey())) {
+                return entry.getValue();
+            }
+        }
+        String lineId = null;
+        for (Map.Entry<String, List<String>> entry : basicData.lineCodeHistoryNbbmMap.entrySet()) {
+            if (CollectionUtils.isNotEmpty(entry.getValue())) {
+                for (String sourceCarNo : entry.getValue()) {
+                    if (StringUtils.equalsIgnoreCase(carNo, sourceCarNo)) {
+                        lineId = entry.getKey();
+                        break;
+                    }
+                }
+            }
+
+            if (StringUtils.isNotEmpty(lineId)) {
+                break;
+            }
+        }
+
+        if (StringUtils.isEmpty(lineId)) {
+            return null;
+        }
+
+        for (Map.Entry<String, Line> entry : basicData.nbbm2LineMap.entrySet()) {
+            if (StringUtils.equalsIgnoreCase(lineId, String.valueOf(entry.getValue().getId()))) {
+                return entry.getValue();
+            }
+        }
+
+        return null;
+
+    }
+
+
 }
@@ -18,6 +18,10 @@ public interface VideoService {
     List<VideoTree> combinationTree();
+    List<VideoTree> combinationTreeOfCar(String code);
+
+    List<VideoTree> searchTreeDataByCarNo(String carNo);
+
     List<Map<String, Object>> getVideoChannel(String carNo)throws  Exception;
     List<Map<String,Object>> getVideoChannelHistoryList(String device,String channel,String dateStr,String token) throws  Exception;
@@ -16,7 +16,7 @@
 <div class="row">
     <div class="col-md-4" style="padding-right: 0px;width: 20%">
-        <div class="portlet light bordered" style="min-height: 715px;">
+        <div class="portlet light bordered" style="height: 715px;overflow:scroll">
             <div class="portlet-body">
                 <div id="video_tree"></div>
@@ -25,8 +25,8 @@
     </div>
     <div class="col-md-6" style="padding-left: 0px;width: 76%">
-        <div class="portlet light bordered" style="height: 715px;">
-            <div class="portlet-body" style="min-height: 701px;">
+        <div class="portlet light bordered" >
+            <div class="portlet-body">
                 <div class="layui-inline">
                     <input type="text" placeholder="请输入车辆编号" autocomplete="off" class="layui-input" id="carCode_like" style="display:inline-block;width: 200px"/>
                     <input type="text" placeholder="请输入内部编号" autocomplete="off" class="layui-input" id="insideCode_like" style="display:inline-block;width: 200px"/>
@@ -35,7 +35,25 @@
                     <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode" onclick="queryTreeTable()">查询</button>
                 </div>
-                <table class="layui-hide" id="treeTable"></table>
+                <div class="layui-tab layui-tab-card">
+                    <ul class="layui-tab-title">
+                        <li class="layui-this">直播</li>
+                        <li>历史数据</li>
+                    </ul>
+                    <div class="layui-tab-content">
+                        <div class="layui-tab-item layui-show" id="live_broadcastDiv" style="height: 572px;100%">
+                            <div>分屏:
+                                <a href="#" class="layui-btn layui-btn-primary layui-btn-xs" onclick="skeyewebplayerOne()">□</a>
+                                <a href="#" class="layui-btn layui-btn-primary layui-btn-xs" onclick="skeyewebplayerFour()">▤</a>
+                                <a href="#" class="layui-btn layui-btn-primary layui-btn-xs" onclick="skeyewebplayerNine()">▦</a>
+                            </div>
+                            <div id="skeyewebplayerDivContent" >
+
+                            </div>
+                        </div>
+                        <div class="layui-tab-item" style="height: 572px;width: 100%"></div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -16,20 +16,100 @@ $(document).ready(function () {
 function initTree(data) {
     layui.use(function () {
         var tree = layui.tree;
+        var opt = initTreeOpt(data, tree);
         // 渲染
-        tree.render({
-            elem: '#video_tree',
-            data: data,
-            onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
-            showLine: true, // 是否开启连接线
-            click: function (node) {
-                initTable(node);
-            }
-        });
+        var treeObj = tree.render(opt);
         closeLoading();
     });
 }
+function initTreeOpt(data, tree) {
+
+    var opt = {
+        elem: '#video_tree',
+        id: "video_tree",
+        data: data,
+        onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
+        showLine: true, // 是否开启连接线
+        click: function (node) {
+            loading = loadingFunction();
+            if (node.data.type < 400) {
+                lasyCarNo(node, tree, data);
+                node.initChild = true;
+            } else {
+                playWvpVideo1(node);
+                closeLoading();
+            }
+
+        }, dblClick: function (node) {
+            // lasyCarNo(node,tree,data);
+        }
+    };
+    return opt;
+}
+
+function lasyCarNo(node, tree, oldData) {
+    if (isEmpty(node.initChild) || false === node.initChild) {
+        if (node.data.type < 200) {
+            $.getJSON("/video/tree/carNo/" + node.data.code, function (data) {
+                if (oldData) {
+                    $.each(oldData, function (index, d) {
+                        layCarNoConcatArr(d, node, data);
+                        initTable(node);
+                    });
+                    closeLoading();
+                    tree.reload('video_tree', {data: oldData});
+
+                }
+            });
+        } else if (node.data.type > 300) {
+            $.getJSON("/video/car/channel/tree/" + node.data.sourceId, function (data) {
+                $.each(oldData, function (index, d) {
+                    layCarNoConcatArr(d, node, data.data, data);
+                    initTable(node);
+
+                });
+
+                tree.reload('video_tree', {data: oldData});
+                closeLoading();
+            });
+        } else {
+            closeLoading();
+        }
+
+    }
+
+}
+
+function layCarNoChildren(oldData, node, data, result) {
+    if (oldData) {
+        $.each(oldData, function (index, d) {
+            layCarNoConcatArr(d, node, data, result);
+        });
+    }
+}
+
+function layCarNoConcatArr(d, node, data, result) {
+    if (d.id === node.data.id && d.type === node.data.type) {
+        if (isEmpty(d.children)) {
+            d.children = [];
+        }
+        d.spread = true;
+        if (result) {
+            $.each(data, function (index, d1) {
+                d1.wvpLiveBroadcast = result.wvpLiveBroadcast;
+            })
+        }
+
+        d.children = d.children.concat(data);
+        if (result) {
+            d.wvpLiveBroadcast = result.wvpLiveBroadcast;
+        }
+    } else {
+        layCarNoChildren(d.children, node, data, result);
+    }
+}
+
 function initTable(treeNode) {
     var queryURL = "/video/tree/table?1=1";
@@ -70,29 +150,29 @@ function initTable(treeNode) {
     });
 }
-function  queryTreeTable(){
-    let  url = treeURL;
-    if(!isEmpty($("#carCode_like").val())){
-        url += "&carCode_like="+$("#carCode_like").val();
+function queryTreeTable() {
+    let url = treeURL;
+    if (!isEmpty($("#carCode_like").val())) {
+        url += "&carCode_like=" + $("#carCode_like").val();
     }
-    if(!isEmpty($("#insideCode_like").val())){
-        url += "&insideCode_like="+$("#insideCode_like").val();
+    if (!isEmpty($("#insideCode_like").val())) {
+        url += "&insideCode_like=" + $("#insideCode_like").val();
     }
-    if(!isEmpty($("#equipmentCode_like").val())){
-        url += "&equipmentCode_like="+$("#equipmentCode_like").val();
+    if (!isEmpty($("#equipmentCode_like").val())) {
+        url += "&equipmentCode_like=" + $("#equipmentCode_like").val();
     }
-    if(!isEmpty($("#carPlate_like").val())){
-        url += "&carPlate_like="+$("#carPlate_like").val();
+    if (!isEmpty($("#carPlate_like").val())) {
+        url += "&carPlate_like=" + $("#carPlate_like").val();
     }
     option.url = url;
     var treeTable = layui.treeTable;
     treeTable.render(option);
 }
-function  isEmpty(val){
+function isEmpty(val) {
     return null == val || undefined == val || "" == val;
 }
@@ -102,10 +182,10 @@ function initTreeTableOption(queryURL) {
         url: queryURL,
         loading: true,
         treeColIndex: 1,
-        even:true,
+        even: true,
         treeSpid: 0,
-        limit:5,
-        limits :[5,10,20,50],
+        limit: 5,
+        limits: [5, 10, 20, 50],
         maxHeight: '701px',
         cols: [[
             {field: 'name', title: '车辆编号', width: 140},
@@ -189,7 +269,7 @@ function getBigSnap(imageURL, deviceId, channelId) {
 function playWvpVideo(playURL, deviceId, channelId) {
     var idDiv = "video_" + (Date.now());
     var html = "'<div id='" + idDiv + "' style='padding-top: 0;'></div>'";
-    playURL = playURL.replace("{device}",deviceId).replace("{channel}",channelId);
+    playURL = playURL.replace("{device}", deviceId).replace("{channel}", channelId);
     var index = layer.open({
@@ -204,11 +284,16 @@ function playWvpVideo(playURL, deviceId, channelId) {
 }
-function playVideo(url, ID,time) {
+function playWvpVideo1(node) {
+    let url = node.data.wvpLiveBroadcast.replace("{device}", node.data.sourceId).replace("{channel}", node.data.id);
+    $("#live_broadcastDiv").html("<iframe src='"+url+"'  style='width: 100%;height: 100%' frameborder='0' boder='0'/>");
+}
+
+function playVideo(url, ID, time) {
     return new WebMediaPlayer(url, ID, function () {
     }, {
         autoplay: 1,
-        currentTime:time
+        currentTime: time
     }).play();
 }
@@ -220,7 +305,7 @@ function playVideo1(url, ID) {
 }
 function playVideo2(url, jqeruyObj, style) {
-    console.log(url);
+
     let html = " <video id=\"video\" controls=\"\" src=\"" + url + "\" style=\"width:100%; height:100%; object-fit: fill\" autoplay></video>";
     jqeruyObj.html(html);
 }
@@ -282,10 +367,10 @@ function deviceVidemoQueryHistory(device, channel, $deviceVideoDiv, idDiv) {
         if (resp.status === "SUCCESS") {
             var html = "<tr>";
             $.each(resp.data, function (index, node) {
-                if(isEmpty(node.filePath)){
-                    node.filePath=node.startTime+"_"+index;
+                if (isEmpty(node.filePath)) {
+                    node.filePath = node.startTime + "_" + index;
                 }
-                html += "<td><button class=\"layui-btn layui-btn-primary layui-border\" onclick=\"playDeviceVidemoQueryHistory('" + idDiv + "','" + resp.wvpPlayURL + "','" + device + "','" + channel + "','" + node.startTime + "','" + node.endTime + "','" + resp.token + "')\" title='"+ node.filePath+"'>" + node.filePath + "</button></td>";
+                html += "<td><button class=\"layui-btn layui-btn-primary layui-border\" onclick=\"playDeviceVidemoQueryHistory('" + idDiv + "','" + resp.wvpPlayURL + "','" + device + "','" + channel + "','" + node.startTime + "','" + node.endTime + "','" + resp.token + "')\" title='" + node.filePath + "'>" + node.filePath + "</button></td>";
                 if (index % 2 === 1) {
                     html += "</tr><tr>";
                 }
@@ -293,7 +378,7 @@ function deviceVidemoQueryHistory(device, channel, $deviceVideoDiv, idDiv) {
             $("#deviceVideoTbody", $deviceVideoDiv).html(html);
             closeLoading();
-        }else{
+        } else {
             closeLoading();
         }
     });
@@ -305,12 +390,12 @@ function playDeviceVidemoQueryHistory(idDiv, url, device, channel, startTime, en
     }
     startTime = startTime.replace("-", "").replace("-", "").replace(":", "").replace(":", "").replace(" ", "");
     endTime = endTime.replace("-", "").replace("-", "").replace(":", "").replace(":", "").replace(" ", "");
-    console.log(startTime);
+
     url = url + device + "_" + channel + "_" + startTime + "_" + endTime + ".live.mp4";
-    console.log(url);
+
     var idDiv1 = "device_video_play_" + (Date.now());
     $("#videoPlay", $("#" + idDiv)).html("<div id='" + idDiv1 + "' style='height:550px;width:99%'></div>")
-    player = playVideo(url, idDiv1,0);
+    player = playVideo(url, idDiv1, 0);
 }
@@ -361,16 +446,16 @@ function skeywebPlayerChannel($skeyewebplayer, carNo) {
     });
 }
-function skeyewebplayerChannelClick(playURL, btn,deviceId,channelId) {
+function skeyewebplayerChannelClick(playURL, btn, deviceId, channelId) {
     let children = $("#skeyewebplayerDivContent", $("#skeyewebplayer")).children();
     let length = children.length;
     if (length === 1) {
-        displaySkeyewebplayerChannel(children[0], playURL, btn,deviceId,channelId);
+        displaySkeyewebplayerChannel(children[0], playURL, btn, deviceId, channelId);
     } else if (length > 1) {
         for (let i = 0; i < length; i++) {
             let classCss = $(children[i]).attr("class");
             if (classCss.indexOf("skeyewebplayerDivContent_play_selected") > -1) {
-                displaySkeyewebplayerChannel(children[i], playURL, btn,deviceId,channelId);
+                displaySkeyewebplayerChannel(children[i], playURL, btn, deviceId, channelId);
                 break;
             }
         }
@@ -379,48 +464,48 @@ function skeyewebplayerChannelClick(playURL, btn,deviceId,channelId) {
 }
-function displaySkeyewebplayerChannel(htmlNode, playURL, btn,deviceId,channelId) {
+function displaySkeyewebplayerChannel(htmlNode, playURL, btn, deviceId, channelId) {
     loading = loadingFunction();
     let $htmlNode = $(htmlNode);
     let $btn = $(btn);
     deviceId = $btn.attr("deviceId");
-    channelId =  $btn.attr("channelId");
+    channelId = $btn.attr("channelId");
-    let htmlObj =  $("div[class='skeyewebplayerDiv_play_content']", $htmlNode);
+    let htmlObj = $("div[class='skeyewebplayerDiv_play_content']", $htmlNode);
     htmlObj.html("");
     $("div[class='skeyewebplayerDiv_title']", $htmlNode).html($btn.attr("channelNode"));
-    playURL = playURL.replace("{device}",deviceId).replace("{channel}",channelId);
-    let playURL1 = "<iframe  style='width:100%;height:100%;' src ='"+playURL+"'/>";
+    playURL = playURL.replace("{device}", deviceId).replace("{channel}", channelId);
+    let playURL1 = "<iframe  style='width:100%;height:100%;' src ='" + playURL + "'/>";
     htmlObj.html(playURL1);
     closeLoading();
 }
 function skeyewebplayerOne() {
-    skeyWebPlayer(1, "skeyewebplayer");
+    skeyWebPlayer(1, "live_broadcastDiv");
 }
 function skeyewebplayerFour() {
-    skeyWebPlayer(4, "skeyewebplayer");
+    skeyWebPlayer(4, "live_broadcastDiv");
 }
 function skeyewebplayerNine() {
-    skeyWebPlayer(9, "skeyewebplayer");
+    skeyWebPlayer(9, "live_broadcastDiv");
 }
 function skeyWebPlayer(len, parentId) {
-    var $skeyewebplayerDivContent = $("#skeyewebplayerDivContent", $("#" + parentId));
+    var $skeyewebplayerDivContent = $("#skeyewebplayerDivContent123", $("#" + parentId));
     var classCss = "skeyewebplayerDivContent_one";
-    let width = $(window).width();
+    let width = $(window).width()*0.75;
     width = width - width * 0.1;
-    $skeyewebplayerDivContent.attr("style", "width:" + width + "px;height:98%;float:right");
-    skeyWebPlayer_myVar = setInterval(function () {
-        width = $(window).width();
-        width = width - width * 0.1;
-        $skeyewebplayerDivContent.attr("style", "width:" + width + "px;height:98%;float:right");
-    }, 1000);
+   // $skeyewebplayerDivContent.attr("style", "width:100%;height:98%;float:right");
+   //  skeyWebPlayer_myVar = setInterval(function () {
+   //      width = $(window).width();
+   //      width = width - width * 0.1;
+   //     // $skeyewebplayerDivContent.attr("style", "width:100%;height:98%;float:right");
+   //  }, 1000);
     if (len === 4) {
         classCss = "skeyewebplayerDivContent_Four";
@@ -428,6 +513,7 @@ function skeyWebPlayer(len, parentId) {
         classCss = "skeyewebplayerDivContent_nine";
     }
+    console.log($skeyewebplayerDivContent)
     var html = "";
     for (let i = 0; i < len; i++) {
         html += "<div class='" + classCss + "' id='skeyewebplayerDivContent_play_" + i + "' onclick=\"skeyewebplayerDivContent_play_click(this)\"><div class='skeyewebplayerDiv_title'>";
 <script type="text/javascript">
     var url = window.location.href;
-    url= url.substring(0,url.indexOf("/pages/"))+"/video/video.html";
+    url= url.substring(0,url.indexOf("/pages/"))+"/other/video/video.html";
     window.location.href=url;
 </script>