$(function () {
    layui.use(['layer', 'table', 'element'], function () {
      layLayer = layui.layer;
      layTable = layui.table;
      element = layui.element;
  
      start();
    });
    //全局变量
    var currentEventObj = {};//点击评估处理时当前事件obj
    currEventsArr = [],
      checkEventEype = '',//回顾事件 review 处理当前 current
      stepWord = 0;//处理中事件 到了哪一步了 0-3 step
  
  
  
    $('.escTitClose').click(function () {
      removeCircle();
      $('#esc-tit , .escbox-bottom').hide();
      $('.escbox-bottom .item').hide();
      $('.escbox-bottom').find('item01').show();
    });
    var overlays = [],
      isAdd = false;
    function addCircle(lng, lat, radius) {
      //初步研判
      let circle = new AMap.Circle({
        center: new AMap.LngLat(lng, lat), // 圆心位置
        radius: radius, //半径
        strokeColor: '#F33', //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 1, //线粗细度
        fillColor: '#ee2200', //填充颜色
        fillOpacity: 0.35, //填充透明度
      });
      let poiIcon = new AMap.Icon({
        size: new AMap.Size(102, 102),
        image: './images/flag.png',
        imageSize: new AMap.Size(62, 62),
        imageOffset: new AMap.Pixel(0, 0),
      });
      let marker = new AMap.Marker({
        map: map,
        icon: poiIcon,
        offset: new AMap.Pixel(-20, -20),
        position: [lng, lat],
      });
      overlays.push(circle);
      overlays.push(marker);
      console.log(overlays);
      map.add(overlays);
      isAdd = true;
      map.setFitView([circle]);
    }
    function removeCircle() {
      map.remove(overlays);
      overlays = [];
      isAdd = false;
    }
    $('.ty')
      .find('a.abt')
      .click(function () {
        if (checkEventEype === 'current') {
          return
        }
        let ind = $(this).index('a.abt');
        // if (ind == 1 && !isAdd) {
        //   // 创建面覆盖物
        //   addCircle(113.7422, 38.538715, 300);
        // } else if (ind != 1) {
        //   //清除初步研覆盖物
        //   if (overlays.length > 0) {
        //     removeCircle();
        //   }
        // }
        $('.escbox-bottom').show();
        $('.escbox-bottom .item' + ind + 1).show().siblings().hide();
      });
  
    //清除所有覆盖物
    function removeAllOverlay() {
      map.clearMap();
      map.setCenter(defaultCenter);
      $('#legend a').removeClass('selected');
    }
    //搜索按钮
    function getBtmSearchData(param) {
      let opts = {
        url: apis.mapSearch,
        type: 'post',
        data: JSON.stringify({ keywords: param }),
        success: function (res) {
          if (res.code === 0) {
            let arr = res.data.pageData;
            if (arr.length > 0) {
              let html = '';
              removeAllOverlay();
              $('#legend li a').removeClass('selected');
              arr.map((ele) => {
                html += `<div class="btm-list-item" data-id="${ele.id}">${ele.fullName}</div>`;
                let ar = [];
                ar.push(ele);
                addMarker(ar, ele.showType, null);
              });
              $('#listWrap').html(html);
              // $('.btm-list-item').click(function(){
              //   let id = $(this).attr('data-id');
              //   let rowobj = arr.filter(ele => ele.id = id)
              //   addMarker(rowobj, rowobj.showType, null)
              // })
            } else {
              $('#listWrap').html('<div class="btm-list-item" style="text-align:center;">无搜索结果！</div>');
            }
          }
        },
      };
      jQueryAjax(opts);
    }
    $('.uative').on('click', function () {
      $('#btmSearch > *').fadeIn(100);
      $(this).hide();
    });
    $('.activebtn').on('click', function (e) {
      let val = $('#btnInput').val();
      getBtmSearchData(val);
    });
    $('.guan').click(function () {
      $('#btmSearch > *').hide();
      $('.uative').show();
    });
    $('#removeSerBtn').click(function () {
      removeAllOverlay();
    });
    $('#mulitVideoBtn').click(function () {
      showMulitVideo();
    })
    $('#btnInput').bind('input', function (e) {
      let val = e.target.value;
      if (!val) {
        $('#listWrap').html('');
        removeAllOverlay();
      }
    });
    $('.escbox-tip-b .item').click(function () {
      $('.escbox-top').toggle();
    });
  
    // 云台控制
    $('.controlBtn .button').click(function () {
      var self = this;
      if (!videoController) {
        return;
      }
      if (videoController.getInChoiceVideo() === undefined) {
        layLayer.msg('请先点击视频以选中');
        return;
      }
      videoController.setChoiceWindow(0);
      videoController.holder($(self).data('action'), { speed: 200, group: 0, present: 0, time: 0 }, false);
      var controlTimer = setTimeout(function () {
        videoController.holder($(self).data('action'), { speed: 200, group: 0, present: 0, time: 0 }, true);
        clearTimeout(controlTimer);
      }, 200);
    });
  
    // 鼠标滚动放大缩小
    $('.reset').on('mousewheel DOMMouseScroll', function (e) {
      var delta =
        (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
  
      if (!videoController) {
        return;
      }
      if (videoController.getInChoiceVideo() === undefined) {
        layLayer.msg('请先点击视频以选中');
        return;
      }
  
      if (delta > 0) {
        // 向上滚
        videoController.setChoiceWindow(0);
        videoController.holder('zoomout', { speed: 4000, group: 0, present: 0, time: 0 }, false);
        var mousewheelUpTimer = setTimeout(function () {
          videoController.holder('zoomout', { speed: 4000, group: 0, present: 0, time: 0 }, true);
          clearTimeout(mousewheelUpTimer);
        }, 500);
      } else if (delta < 0) {
        // 向下滚
        videoController.setChoiceWindow(0);
        videoController.holder('zoomin', { speed: 4000, group: 0, present: 0, time: 0 }, false);
        var mousewheelDownTimer = setTimeout(function () {
          videoController.holder('zoomin', { speed: 4000, group: 0, present: 0, time: 0 }, true);
          clearTimeout(mousewheelDownTimer);
        }, 500);
      }
    });
  
    // 监听图例点击事件
    $('#legend').on('click', function (ev) {
      if (ev.target.tagName.toLowerCase() !== 'a') {
        $(ev.target).closest('li').find('a').click();
      } else {
        if ($(ev.target)[0].classList.toString().indexOf('selected') === -1) {
          removeMaker($(ev.target).data('id'));
          addCateMarker($(ev.target).data('id'), $(ev.target).closest('li').data('id'));
        } else {
          removeMaker($(ev.target).data('id'));
        }
        $(ev.target).toggleClass('selected');
      }
    });
  
    $('#bottomMenu .btn').click(function () {
      let inde = $(this).index('#bottomMenu .btn');
      if (inde == 0) GISFun();
      if (inde == 1) dutyBookFun();
      if (inde == 2) eventReciev();
      if (inde == 3) EventReview();
      if (inde == 4) guaranteeFun();
      if (inde == 5) genericPlan();
      if (inde == 6) konwlegeFun();
    });
    //底部ToolBar-GIS调度
    function GISFun() {
      removeAllOverlay();
      map.setCenter([114.195771, 38.247808]);
      $('#legend a').removeClass('selected');
    }
    //底部ToolBar-值守通讯
    $('body').on('click', '.cbtn',function () {
      $('.fixedbox').hide();
      $('#ensurelistbox .layui-table-view').hide();
      $('.yjbs .detali').hide();
    });
    function dutyBookFun() {
      $('#dutyBooklist').show();
      layTable.render({
        elem: '#Booklist',
        url: 'http://47.104.61.232:60010/auth/user/getDutyContactsList',
        method: 'get',
        cols: [
          [
            { field: 'deptName', title: '部门', align: 'center' },
            { field: 'userName', title: '姓名', align: 'center' },
            {
              field: 'sex',
              title: '姓别',
              align: 'center',
              templet: function (obj) {
                return obj.sex == 1 ? '男' : '女';
              },
            },
            { field: 'mobliePhone', title: '手机号', align: 'center' },
            { field: 'phone', title: '座机', align: 'center' },
            { field: 'email', title: '邮箱', align: 'center' },
          ],
        ],
      });
    }
    //底部ToolBar-事件接报
    function eventReciev() {
      $('#eventslistbox').show(function () {
        $(this)
          .find('.frame')
          .html('<iframe src="http://47.104.61.232:60012/#/Events/" scorlling="no" width="800" height="500"></iframe>');
      });
    }
    //底部ToolBar-事件回顾
    function EventReview() {
      $('.escbox-top').show();
      $('#esc-tit').show();
    }
    //底部ToolBar-综合保障
    function guaranteeFun() {
      let opt = {
        url: 'http://47.104.61.232:8902/ioc/frontApi/getSecurityInfoNum',
        success: function (res) {
          let html = '';
          if (res.data.length > 0) {
            res.data.map((ele) => {
              html += `<div class="item" data-code="${ele.legendCode}"><span class="itemTitle">${ele.legendAliasName}</span><span class="num">${ele.num}</span></div>`;
            });
            $('#numbox').html(html);
            $('body').on('click', '.xstty .item', function () {
              $('#ensurelistbox .layui-table-view').show();
              $(this).addClass('active').siblings().removeClass('active');
              let lcode = $(this).attr('data-code');
              layTable.render({
                elem: '#ensurelist',
                url: `http://47.104.61.232:8902/ioc/frontApi/getSecurityInfoList/${lcode}`,
                method: 'get',
                cols: [
                  [
                    { field: 'fullName', title: '名称', align: 'center' },
                    { field: 'contacts', title: '联系人', align: 'center' },
                    { field: 'telephone', title: '电话', align: 'center' },
                    { field: 'address', title: '地址', align: 'center' },
                    { field: 'introduce', title: '介绍', align: 'center' },
                  ],
                ],
              });
            });
          } else {
            $('#numbox').html('无记录！');
          }
          $('#ensurelistbox').show();
        },
      };
      jQueryAjax(opt);
    }
    //查看预案详情
    window.check = function (d) {
      $('.yjdetali').show();
      $('.yjdetali').html(`<h1>${d.planTitle} ${d.planLevel + '级'}</h1>
      <table id="members" lay-filter="members"></table>${d.planContents}`);
      layTable.render({
        elem: '#members',
        size: 'sm',
        skin: 'nob',
        cols: [[
          { align: 'center', title: '人员列表', colspan: 5 },],
        [
          { field: 'deptName', title: '部门' },
          { field: 'userName', title: '联系人' },
          { field: 'mobilePhone', title: '手机号' },
          { field: 'phone', title: '电话' },
          { field: 'email', title: '邮箱' },
        ]],
        data: d.rdeptInfoList
      })
    }
    //当前事件 流程跳转
    function toStepChange(toIndex) {/* 参数 1:初步研判-4 */
      toIndex = Number(toIndex)
      $(`.escbox-bottom, #esc-tit`).show();
      $(`#esc-tit .abt`).addClass('not').removeClass('done');
      if (toIndex > 0) {
        let num = toIndex - 1;
        while (num > 0) {
          num--
          $(`#esc-tit .abt:eq(${num})`).addClass('done');
        }
      }
      $(`#esc-tit .abt:eq(${toIndex - 1})`).removeClass('not');
      $(`.escbox-bottom .item${toIndex}`).show().siblings().hide();
      //获取相应item的内容
      switch (toIndex) {
        case 1:
          estimateEvent()
          break;
        case 2:
          carryPlan()
          break;
        case 3:
          eventCirculate()
          break;
        case 4:
          eventEvaluate()
          break;
      }
    }
    //初步研判
    function estimateEvent() {
      let obj = { ...currentEventObj }
      /*加载应急资源*/
      function getResource(keywords = '') {
        let opt = {
          type: 'post',
          url: apis.mapSearch,
          data: JSON.stringify({
            distance: 3000,
            keywords: keywords,
            latitude: obj.latitude,
            longitude: obj.longitude
          }),
          success: function (res) {
            let resArr = res.data.numList;
            if (resArr.length > 0) {
              let html = '';
              resArr.map((ele, index) => {
                html += `<p>${ele.legendName}<font class="num">${ele.num}</font></p>`
              })
              $('#escboxBottomItem1 .resouce .tbl').html('<p>资源名称<font class="num">资源数量</font></p>' + html)
            } else {
              $('#escboxBottomItem1 .resouce .tbl').html('暂无资源！')
            }
          }
        }
        jQueryAjax(opt)
      }
      /*标注地图资源*/
      function maps() {
        map.clearMap();
        buildRadar([obj.longitude, obj.latitude], 3000);
        scan();
        mapSearch(
          {
            distance: 3000,
            keywords: '',
            latitude: obj.latitude,
            longitude: obj.longitude,
          },
          () => {
            var searchTimer = setTimeout(() => {
              clearTimeout(searchTimer);
              object3Dlayer.remove(radar);
              renderCircle([obj.longitude, obj.latitude], 3000);
              addFlag()
            }, 3000);
          }
        );
      }
      /*加中心点旗帜*/
      function addFlag() {
        let overlays = [], poiIcon = new AMap.Icon({
          size: new AMap.Size(102, 102),
          image: './images/flag.png',
          imageSize: new AMap.Size(100, 100),
          imageOffset: new AMap.Pixel(0, 0),
        });
        let marker = new AMap.Marker({
          map: map,
          icon: poiIcon,
          offset: new AMap.Pixel(-20, -20),
          position: [obj.longitude, obj.latitude],
        });
        overlays.push(marker);
        map.add(overlays)
      }
      getResource()
      maps()
    }
    //态势决策-增补 执行预案
    window.checkPlan = function (planid) {
      genericPlan('', planid)
    }
    function carryPlan() {
      let html = '',
        opt = {/* 查询已关联预案 */
          url: apis.searchEventPlan + currentEventObj.id,
          success: function (res) {
            if (res.code == 0) {
              if (res.data.length > 0) {
                let obj = res.data[0];
                html = `<p style="text-decoration: underline;cursor:pointer;" onclick="window.checkPlan(&quot;${obj.planId}&quot;)">预案标题：${obj.planTitle}</p>` +
                  `<p>预案等级：${obj.planLevel}级</p>` +
                  `<p>所属部门：${obj.deptName}</p>`;
                $('.item2 .cn').html(html)
              }
            }
          }
        },
        carryOpt = {/* 启动预案 */
          url: apis.carryPlan + currentEventObj.id,
          success: function (res) {
            if (res.code == 0) {
              layLayer.msg('启动预案成功！', { icon: 1 });
              changeStatus('2')
            }
          }
        },
        addOpt = {/* 增补预案 */
          type: 'post',
          data: JSON.stringify({
            addPlanContent: $('textarea[name=addPlan]').val()
          }),
          url: apis.addPlan + currentEventObj.id,
          success: function (res) {
            if (res.code == 0) {
              layLayer.msg('增补预案成功！', { icon: 1 });
              jQueryAjax(carryOpt)
            }
          }
        };
      $('body').on('click', '#carryPalnBtn', function () {
        layLayer.confirm(`确定启动预案吗？`, function () {
          jQueryAjax(addOpt)
        })
      })
      jQueryAjax(opt)
    }
    //事件处理过程
    function eventCirculate() {
      let html = '', opt = {
        url: apis.checkCirculate + currentEventObj.id,
        success: function (res) {
          if (res.code == 0) {
            if (res.data.length > 0) {
              res.data.map((ele, inde) => {
                let date = ele.handleTime.substring(0, 10), time = ele.handleTime.substring(11, 16)
                html += `<li><p>${date}<br><span>${time}</span></p><div class="con">${inde + 1 + '.'} ${ele.handleContent}</div></li>`
              })
              $('ul.timeLine').html(html)
              $(`#esc-tit .abt:eq(2)`).addClass('done');
            } else {
              $('ul.timeLine').html('暂无处理过程！')
            }
          }
        }
      }
      jQueryAjax(opt)
    }
    //事件评估
    function eventEvaluate() {
      let opt = {
        url: apis.eventEvaluateInfo + currentEventObj.id,
        success: function (res) {
          if (res.code == 0) {
            if (res.data && res.data.evaluateContent) {
              $('#evaluatCon').html(res.data.evaluateContent)
              $(`#esc-tit .abt:eq(3)`).addClass('done');
            } else {
              $('#evaluatCon').html('暂无评估内容！')
            }
          }
        }
      }
      jQueryAjax(opt)
    }
  
    function changeStatus(step) {
      let opt = {
        url: apis.changeStatus + `${currentEventObj.id}/${step}`,
        success: function (res) {
          if (res.code == 0) stepWord = step;
          toStepChange(stepWord)
        }
      };
      jQueryAjax(opt)
    }
    //关联预案
    window.connect = function (d) {
      let obj = {
        planId: d.id,
        eventId: currentEventObj.id
      }
      layLayer.confirm(`确定关联此预案《${d.planTitle}》吗？`, function () {
        let opt = {
          url: apis.contentPlan,
          type: 'post',
          data: JSON.stringify(obj),
          success: function (res) {
            if (res.code == 0) layLayer.msg('关联成功！', { icon: 1 });
            //修改事件状态
            changeStatus('1')
            debugger
            //关联预案成功跳转到态势决策
            $('#yingjlistbox').hide()
          }
        };
        jQueryAjax(opt)
      });
    }
    //底部ToolBar-应急预案
    function genericPlan(key = '', planID = '') {
      function getPlansli() {
        let opt = {
          type: 'post',
          url: apis.plansGetList,
          data: JSON.stringify({
            page: 1,
            size: 1000
          }),
          success: function (res) {
            let Arr = res.data.pageData, resArr;
            if (planID != '') resArr = Arr.filter(ele => ele.id == planID);
            else resArr = [...Arr];
            if (resArr.length > 0) {
              layTable.render({
                elem: '#yingjlist',
                size: 'sm',
                cols: [
                  [
                    { field: 'deptName', title: '所属单位' },
                    { field: 'planTitle', title: '预案标题' },
                    {
                      field: 'planLevel', title: '预案登记', templet: function (d) {
                        return d.planLevel + '级'
                      }
                    },
                    {
                      field: '',
                      title: '操作',
                      templet: function (d) {
                        let s;
                        if (key == 'gl') {
                          s = `<span class="txtbtn yjck" onclick="window.check(${JSON.stringify(d).replace(/"/g, '&quot;')})">查看</span>&nbsp;&nbsp;<span class="txtbtn glya" onclick="window.connect(${JSON.stringify(d).replace(/"/g, '&quot;')})">关联预案</span>`;
                        } else if (planID != '') {
                          s = `<span class="txtbtn yjck" onclick="window.check(${JSON.stringify(d).replace(/"/g, '&quot;')})">详情</span>`;
                        } else {
                          s = `<span class="txtbtn yjck" onclick="window.check(${JSON.stringify(d).replace(/"/g, '&quot;')})">查看</span>`;
                        }
                        return s
                      }
                    }
                  ],
                ],
                data: resArr
              });
            }
          }
        };
        jQueryAjax(opt)
      }
      $('#yingjlistbox').show(function () {
        //加载预案列表
        getPlansli()
      });
    }
    //底部ToolBar-知识库
    function konwlegeFun() {
      $('#zsbox').show(function () {
        //应急事件
        layTable.render({
          elem: '#zslist',
          size: 'sm',
          cols: [
            [
              { field: 'decr', title: '类型' },
              { field: 'mc', title: '名称' },
              { field: 'dw', title: '状态' },
              { field: 'time', title: '时间' },
              {
                field: '',
                title: '详情',
                templet: function (d) {
                  return '<span class="txtbtnca">查看</span>';
                },
              },
            ],
          ],
          data: [{ dw: '已广播', time: '2020-03-01', decr: '防火', mc: '春季防火' }],
          done: function () {
            $('body').on('click', '.txtbtnca', function () {
              $('.zsdetali').show();
            });
          },
        });
      });
    }
  
    // $('#bottomMenu').click(function() {
    //   layLayer.alert('此功能正在开发中...');
    // });
    //查询事件列表
    function getEventList(){
      let opt = {
        url: apis.getEventInfoList,
        success: function(res){
          if(res.code == 0){
          let resData = res.data.pageData;
            $('.currEvNum').html(resData.newEventNum);
            $('.escbox-txt').html('<font style="color:red">发生事件！</font>');
            if(resData.newEventList.length > 0){
              let arr = resData.newEventList;
              currEventsArr = [...arr]
              renderEventList()
            }
          }
        }
      };
      jQueryAjax(opt)
    }
    //事件接报中-历史事件
    function historyEvent() {
      layTable.render({
        elem: '#esctable',
        size: 'sm',
        cols: [
          [
            { field: 'time', title: '时间' },
            { field: 'decr', title: '事件描述' },
            {
              field: '',
              title: '操作',
              templet: function (d) {
                return '<span class="txtbtn">回顾</span>';
              },
            },
          ],
        ],
        data: [{ time: '2020.03.18', decr: '平山县318大火事件' }],
      });
      layTable.on('row(esctable)', function (obj) {
        $('#esc-tit').show();
        $('#esc-tit a').addClass('done').removeClass('not');
        checkEventEype = 'review'
      });
    }
    //弹窗
    var tanDialogFun = function(title ,id , addhtml){
      let defaultHtml = `<div id="${id}" class="fixedbox">
      <div class="fixedbox-tit">${title}<span class="cbtn"><i class="layui-icon layui-icon-close"></i></span></div></div>`;
      $('body').append(defaultHtml)
      $(`#${id} .fixedbox-tit`).after(addhtml);
      $(`#${id}`).show()
      $('body').on('click', `#${id} .cbtn`,function () {
        $(`#${id}`).remove()
      })
    }
    //渲染当前事件列表
    function renderEventList(){
      layTable.render({
        elem: '#currEvents',
        size: 'sm',
        cols: [
          [
            { field: 'alarmTime', title: '时间' },
            { field: 'eventName', title: '事件名称',event:'tanDetail',templet:function(d){
              console.log(d)
              return `<span style="text-decoration:underline;cursor:pointer">${d.eventName}</span>`
            },
            },
            {
              field: '',
              title: '操作',
              templet:function(d){
                let txt;
                if(d.eventStatus == 0) txt = '评估处理';
                else txt = evenStepNameArr[Number(d.eventStatus) - 1];
                return '<span class="txtbtn">'+ txt +'</span>'
              },
              event:'handle'
            },
          ],
        ],
        data: currEventsArr,
      });
      layTable.on('tool(currEvents)', function (obj) {
        let rowData = obj.data,
          rowEvent = obj.event;
        if (rowEvent == 'handle') {//评估处理
          handleEvent(rowData)
        }else if(rowEvent == 'tanDetail'){
          let detaliHtml = `<div class="eventDeatail">`+
          `<P>事件名称：${rowData.eventName}</p>`+
          `<P>事件等级：${rowData.eventLevel}级</p>`+
          `<P>事发地点：${rowData.eventAddress}</p>`+
          `<P>报案人：${rowData.alarmPeople}</p>`+
          `<P>报案人联系电话：${rowData.alarmPeoplePhone}</p>`+
          `<P>事发时间：${rowData.alarmTime}</p>`+
          `</div>`;
          tanDialogFun('事件详情','eventDetail',detaliHtml)
        }
      })
    }
    //事件接报中-当前事件 事件评估-处置
    function currEvents() {
      let ws = new WebSocket(iocWsUrl);
      ws.onopen = function () {
        ws.onmessage = function (evt) {
          let reciveObj = JSON.parse(evt.data);
          console.log(reciveObj)
          if (reciveObj.dataType == 3) {//事件评估提交完毕
            toStepChange(3)
            stepWord = 3
          } else if (reciveObj.dataType == 2) {
            toStepChange(2)
            stepWord = 2
          } else if (reciveObj.dataType == 1) {
            let ind,
              resobj = reciveObj.param,
              term = currEventsArr.filter((ele, index) => {
                if (ele.id == resobj.id) ind = index;
                return ele.id == resobj.id;
              });
            if (term.length == 0) {
              currEventsArr.push(resobj);
            } else {
              currEventsArr.splice(ind, 1, resobj);
            }
            $('.currEvNum').html(currEventsArr.length);
            $('.escbox-txt').html('<font style="color:red">发生事件！</font>');
            renderEventList()
          }
        };
      };
    }
    //关联按钮事件
    $('body').on('click', '#connectPlanBtn', function () {
      genericPlan('gl')
    })
    //评估处理
    function handleEvent(obj) {
      currentEventObj = { ...obj };
      stepWord = obj.eventStatus
      toStepChange(stepWord)
    }
  
    // 启动
    function start() {
      getEventList()
      currEvents();
      historyEvent();
      login();
      // renderMap();
      createLegendList();
      // renderAlarmNum();
      renderEventNum();
      createDeviceNumPieChart('deviceNumPie');
      renderLegendTypeNum('categoryAlarmNum');
      initVideo('videoHandler');
      getAlarmData();
  
      // showMulitVideo();
  
      // 连接 websocket
      ws = new App.NewSocket({
        url: wsUrl,
        onmessageHandle: function (resData) {
          reciveWsMessage(resData);
        },
      });
    }
  });
  