assets/pages/scripts/operMonFile/parkingMon/parkingmonitoring.js

//设备状态
//1-地磁；2-视频桩；3-地锁,4-网关，5-中继器等' 9-PDA
var eqpType=[0,1,2,3,4,5,9];
/*侧栏*/
/*$(function(){
    $(".select p").click(function(e){
        $(".select").toggleClass('open');
        e.stopPropagation();
    });
    $(".content .select ul li").click(function(e){
        var _this=$(this);
        $(".select > p").text(_this.text());
        $(".select > p").attr('data-value',_this.attr('data-value'));
        _this.addClass("Selected").siblings().removeClass("Selected");
        $(".select").removeClass("open");
        e.stopPropagation();
    });
    $(document).on('click',function(){
        $(".select").removeClass("open");
    })
    //初始化按键
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $("#ser-button").click();
        }
    });
    //默认全部
    $("#ser-button").click();
    console.log(1213)
    //输入框提示
   // searchOption.ini();
});*/
////回车事件
//$(function(){
//});
//获取查询参数
function getQueryParam(){
    var serVal = $.trim($('#ser-input').val());
    var area_text = $(".select .Selected").attr('data-value');
    var park_type = $(".select2 .Selected").attr('data-value');
    console.log(park_type)
    var countryId = [];
    var plNosTemp = plNos;
    if (area_text) {
        countryId = area_text.split(',');
    }
    var req = {
        plNos:plNosTemp,
        sysCode: sysComm.sysCode,
        cityId: sysComm.cityId,
        parkNameOrAddress: serVal,
        countryId: countryId,
        plType: park_type,
        baseRequest: {
            pageNum: 1,
            pageSize: 10
        },
        flag:0,
        curPage:0,
        index:0,
        selector:null
    }
    return req;
}
//根据条件分页查询停车场
function queryParkingLotByCondition(req){
    $('#m_r_bar li').eq(1).removeClass('related_data');
    $('#model-right').hide();
    var opt = {
        method: "post",
        data: JSON.stringify(req),
        url: dataUrl.util.queryParkLotByCountryAndParkName(),
        async: false,
        success: function (res, xhr, status) {
            console.log(res)
            //清空内容
            $('#result').empty();
            if (res.code == '8888') {
                var pageCount = res.data.pages == undefined || null == res.data.pages ? 0 : res.data.pages;
                createHtml(res.data);
                //渲染地图
                /*var datas = res.data.dataList;
                var parkDataTemp = [];
                $.each(parkData, function (index, item) {
                    $.each(datas, function(_index,_item) {
                    	if(_item.plNo == item.parkNo){
                    		parkDataTemp.push(item);
                    	}
                    });
                });
                console.log(parkDataTemp);
                fun.drawMarker(parkDataTemp);*/
                var flag = req.flag;
                //icon_load(pageCount);
                if(flag==0){//查询
                    icon_load(pageCount);
                }
                else if(flag==1){//页码
                    num_click(pageCount,req.curPage,req.selector);
                }
                else if(flag==-1){//下一页
                    pageDown_click(pageCount,req.curPage,req.index);
                }
                else if(flag==-2){//上一页
                    pageUp_click(pageCount,req.curPage,req.index);
                }
            }
        }
    }
    sysAjax(opt);
    //查询所有的，不分页
    if(req.flag == 0){
        req.baseRequest.pageNum = 1;
        req.baseRequest.pageSize = 0;
        var opt = {
            method: "post",
            data: JSON.stringify(req),
            url: dataUrl.util.queryParkLotByCountryAndParkName(),
            async: false,
            success: function (res, xhr, status) {
                console.log(res)
                if (res.code == '8888') {
                    var datas = (res.data.dataList)==null?[]:(res.data.dataList);
                    var parkDataTemp = [];
                    $.each(parkData, function (index, item) {
                        $.each(datas, function(_index,_item) {
                            if(_item.plNo == item.parkNo){
                                parkDataTemp.push(item);
                            }
                        });
                    });
                    fun.drawMarker(parkDataTemp);
                }
            }
        }
        sysAjax(opt);
    }
}
//页面加载完成是与后台数据交互，后台返回总页数（如果只有总条数的话就自己算。Math.ceil(总条数/每条多少页)=总页数）
//如果pageCount不大于1
function createHtml(data){
    if(data.dataList==null||data.dataList.length<1){
        $('#result').empty().text('没有搜索到匹配内容');
        $('#pageGro').hide();
        $('#ser-wrap').show();
        return;
    }
    var html = '';
    var list = data.dataList == undefined || data.dataList == null ? [] : data.dataList;
    var i = 1;
    $.each(list, function (index, item) {
        var parkType;
        if (1 == item.plType) {
            parkType = '路侧'
        } else if (2 == item.plType) {
            parkType = '封闭'
        } else {
            parkType = '未知'
        }
        var berthNum = item.plBerthNum;
        var plName = item.plName;
        var plNo = item.plNo;
        //html+='<li data-value='+plNo+'>'+
        //    '<div data-value='+plName+'>'+(i++)+'.'+plName+'</div>'+
        //    '<div>类型 : '+parkType+'</div>'+
        //    '<div data-value='+berthNum+'>车位总数 : '+berthNum+'</div>'+
        //    '</li>';
        //new
        var no = "<a href='javascript:void(0)' class='indexNo indexNo-" + (index + 1) + "'></a>";
        html += '<li data-value=' + plNo + ' class="indexLi indexLi-' + (index + 1) + '">' +
            '<div data-value=' + plName + ' class="indexRow">' + no + '<span title=' + plName + '>' + commonClass.cutString(plName, 10) + '</span></div>' +
            '<div>类型 : ' + parkType + '</div>' +
            '<div data-value=' + berthNum + '>车位总数 : <span>' + berthNum + '</span></div>' +
            '<div title="' + item.plAddress + '">地址 : ' + commonClass.cutString(item.plAddress, 12) + '</div>' +
            '</li>';
    });
    //滚动
    $('#result').animate({
        scrollTop: $('#result').offset().top-1000
    }, 150);
    $('#result').empty().html(html);
    $('#ser-wrap').show();
    $('#pageGro').show();
};
/*搜索*/
$('#ser-button').on('click',function () {
    commonClass.setPopupVisible(false);
    var req = getQueryParam();
    req.flag=0;//0-查询按钮触发，1-页码触发，-1后一页，-2 前一页
    queryParkingLotByCondition(req);
    //songcxa
    $(".cancelBtn").css("display", "block");
});
/*
    @   songcxa
    @   搜索功能
*/
var searchOption = {
    ini: function () {
        var searchBox = $('#ser-input');
        /*
          @   inputID输入框id
          @   popID提示框id
          @   queryOption(url、queryParames请求参数post、itemsSelectCallback提示框选择事件）
       */
        var option = {
            url: dataUrl.util.queryParkLotByCountryAndParkName(),
            async: false,
            queryParames: function () {
                return getQueryParam();
            },
            itemsSelectCallback: function (ev) {
                searchBox.val(ev);
            }
        };
        commonClass.popupObject("ser-input", "ser-resPanel", option);
    },
}
/*end*/
//点击分页按钮触发
documentBindFunc.on("click","#pageGro li",function(){
    var pageNum = parseInt($(this).html());//获取当前页数
    var selector = $(this);
    var req = getQueryParam();
    req.baseRequest.pageNum = pageNum;
    req.curPage = pageNum;
    req.selector = selector;
    req.flag = 1;
    queryParkingLotByCondition(req);
});
//点击上一页触发
documentBindFunc.on("click","#pageGro .pageUp",function(){
    var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
    var index = $("#pageGro ul li.on").index();//获取index
    var req = getQueryParam();
    req.baseRequest.pageNum = pageNum-1;
    req.curPage = pageNum;
    req.index = index;
    req.flag = -2;
    queryParkingLotByCondition(req);
});
//点击下一页触发
documentBindFunc.on("click","#pageGro .pageDown",function(){
    var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
    var index = $("#pageGro ul li.on").index();//获取index
    var req = getQueryParam();
    req.baseRequest.pageNum = pageNum+1;
    req.curPage = pageNum;
    req.index = index;
    req.flag = -1;
    queryParkingLotByCondition(req);
});
function checkhHtml5() {
    if (typeof(Worker) === "undefined") {
        if (navigator.userAgent.indexOf("MSIE 9.0") <= 0) {
            alert("定制个性地图示例：IE9以下不兼容，推荐使用百度浏览器、chrome、firefox、safari、IE10");
        }
    }
}
function selectOptionFun(){
    $(".select p").click(function(e){
        $(".select").toggleClass('open');
        e.stopPropagation();
    });
    $(".select2 p").click(function(e){
        $(".select2").toggleClass('open');
        e.stopPropagation();
    });
    $(".content .select ul li").click(function(e){
        var _this=$(this);
        $(".select > p").text(_this.text());
        $(".select > p").attr('data-value',_this.attr('data-value'));
        _this.addClass("Selected").siblings().removeClass("Selected");
        $(".select").removeClass("open");
        e.stopPropagation();
    });
    $(".content .select2 ul li").click(function(e){
        var _this=$(this);
        $(".select2 > p").text(_this.text());
        $(".select2 > p").attr('data-value',_this.attr('data-value'));
        _this.addClass("Selected").siblings().removeClass("Selected");
        $(".select2").removeClass("open");
        e.stopPropagation();
    });
    $(document).on('click',function(){
        $(".select").removeClass("open");
        $(".select2").removeClass("open");
    })
    //初始化按键
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $("#ser-button").click();
        }
    });
    //默认全部
    $("#ser-button").click();
    //输入框提示
    searchOption.ini();
}
//停车场 渲染
var plNos =[];
var parkData=[];
var xTimeDatas;
var occupyDatas=[];
var turnOverDatas=[];
var clear_flag = false;
var fun = {
    init: function () {
        fun.getParkingLotGeo();
        //fun.setDist(sysComm.cityId);
        //alert(document.documentElement.clientHeight)
        var height = document.documentElement.clientHeight - 150;
        $('#main-wrap').height(height)
    },
    setDist:function (cityId) {
        $(".select").empty();
        // $(".select2").empty();
        cityId+='';
        var allDist = [];
        var distArray = cityData.dist[cityId];
        var html='';
        $.each(distArray,function (index,item) {
            allDist.push(item.id);
            html+="<li data-value='"+item.id+"'>"+item.areaName+"</li>"
        });
        $(".select").html("<p data-value="+allDist+">全部</p><ul style=' overflow-y: auto;'><li data-value="+allDist+" class='Selected'>全部</li>"+html+"</ul>");
        selectOptionFun();
    },
    //设置中心城市信息
    setCityInfo: function(){
        sysComm.cityId = firstPark.plCityId;
        sysComm.cityName = firstPark.plCityName;
        sysComm.provId = firstPark.plProvinceId;
        sysComm.point_lng = firstPark.lonId;
        sysComm.point_lat = firstPark.latId;
        fun.setDist(sysComm.cityId);
        $(".cityName").text(sysComm.cityName);
    },
    //获取停车场信息
    getParkingLotGeo: function () {
        var parkLot = fn.getParkLot(3);
        var plnos = [];
        $.each(parkLot, function (index, item) {
            plnos.push(item.code);
        })
        parkData = [];
        plNos=[];
        var req = {
            sysCode: sysComm.sysCode,
            plNos: plnos,
        }
        var opt = {
            method: 'post',
            url: dataUrl.util.queryParkingLotGeoByPlNos(),
            data: JSON.stringify(req),
            success: function (res) {
                if (res.code == '8888') {
                    //获取数据成功
                    var data = res.data;
                    $.each(data, function (index, item) {
                        var temp = {
                            parkNo: item.plNo,
                            parkName: item.plName,
                            pointX: item.lonId,
                            pointY: item.latId,
                            allnum: item.plBerthNum,
                            plType: item.plType,
                            free: item.freeBrethNum
                        };
                        plNos.push(item.plNo);
                        parkData.push(temp);
                    });
                    if(data.length > 0){
                        firstPark = data[0];
                    }
                    if(data.length > 1){
                        firstPark = data[1];
                    }
                    fun.setCityInfo();
                    fun.drawMarker(parkData);
                }
            }
        }
        sysAjax(opt);
    },
    // 渲染地图 停车场数据
    drawMarker:function(parkData) {
        var map; //Map实例
        //后台传过来
        // var currentLat = 118.922316;
        // var currentLon = 42.25953;
        map = new BMap.Map('allmap', {enableMapClick: false});
        //第1步：设置地图中心点，当前城市
        var point = new BMap.Point(sysComm.point_lng, sysComm.point_lat);
        //第2步：初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, 13);
        map.setCurrentCity(sysComm.cityName);  // 设置地图显示的城市 此项是必须设置的
        //第3步：启用滚轮放大缩小
        map.enableScrollWheelZoom(true);
        //第4步：向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            // 靠右上角位置
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_ZOOM,
            //偏离值
            offset: new BMap.Size(55, 80)
        });
        // map.addControl(ctrlNav);
        //第5步：检测浏览器兼容
        checkhHtml5();
        //清除以前的点位
        map.clearOverlays();
        //songcxa
        window.Bmap = map;
        window.Bmap.addEventListener("mousedown", function (ev) { commonClass.setPopupVisible(false); closeInfoWindow(); });
        //第7步：绘制点
        var marker = [];
        var newpoiX = null;//坐标
        var newpoiY = null;
        var parkNo = null;//编号
        var popAllnum = null;//停车场车位总数
        var popFree = null;//空闲车位
        var parkName = null;//停车场名称
        console.log(parkData.length)
        console.log(parkData)
        for (var i = 0; i < parkData.length; i++) {
            newpoiX = parkData[i].pointX;
            newpoiY = parkData[i].pointY;
            parkNo = parkData[i].parkNo;
            popAllnum = parkData[i].allnum;
            popFree = parkData[i].free;
            parkName = parkData[i].parkName;
            // console.log('popFree'+popFree)
            var point = new BMap.Point(newpoiX, newpoiY);
            if(popAllnum==0&&popFree==0){
                var myIcon = new BMap.Icon("../../assets/pages/scripts/operMonFile/img/parkIcon1.png",
                    new BMap.Size(30, 39), {
                        offset: new BMap.Size(10, 39),
                        textColor: '#fff'
                    });
                marker[i] = new BMap.Marker(point, {icon: myIcon});
                map.addOverlay(marker[i]);
            }else if ((popFree / popAllnum) == 0 ||(popFree / popAllnum) ==NaN) {
                var myIcon = new BMap.Icon("../../assets/pages/scripts/operMonFile/img/parkIcon1.png",
                    new BMap.Size(30, 39), {
                        offset: new BMap.Size(10, 39),
                        textColor: '#fff'
                    });
                marker[i] = new BMap.Marker(point, {icon: myIcon});
                map.addOverlay(marker[i]);
            } else if ((popFree / popAllnum) > 0 && (popFree / popAllnum) <= 0.3) {
                var myIcon2 = new BMap.Icon("../../assets/pages/scripts/operMonFile/img/parkIcon2.png",
                    new BMap.Size(30, 39), {
                        offset: new BMap.Size(10, 39),
                        textColor: '#fff'
                    });
                marker[i] = new BMap.Marker(point, {icon: myIcon2});
                map.addOverlay(marker[i]);
            } else if ((popFree / popAllnum) > 0.3) {
                var myIcon3 = new BMap.Icon("../../assets/pages/scripts/operMonFile/img/parkIcon3.png",
                    new BMap.Size(30, 39), {
                        offset: new BMap.Size(10, 39),
                        textColor: '#fff'
                    });
                marker[i] = new BMap.Marker(point, {icon: myIcon3});
                map.addOverlay(marker[i]);
            }
            marker[i].parkNo = parkData[i].parkNo;
            marker[i].newpoiX = parkData[i].pointX;
            marker[i].newpoiY = parkData[i].pointY;
            marker[i].Allnum = parkData[i].allnum;
            marker[i].Free = parkData[i].free;
            marker[i].parkName = parkData[i].parkName;
            marker[i].addEventListener("mouseover", function (n) {
                var newpoiY = n.target.newpoiY;
                var parkNo = n.target.parkNo;
                var parkName = n.target.parkName;
                var newpoiX = n.target.newpoiX;
                var freepop = Number(n.target.Free);
                var allnumpop = Number(n.target.Allnum);
                var req = {
                    sysCode: sysComm.sysCode,
                    cityId: sysComm.cityId,
                    plNos: [parkNo]
                }
                //点击事件-暂时去掉
                var opt = {
                    method: "post",
                    data: JSON.stringify(req),
                    url: dataUrl.util.queryParkFreeBerthsByPkNos(),
                    async: false,
                    success: function (res, xhr, status) {
                        if (res.code == '8888') {
                            freepop = res.data[parkNo];
                            addInfoWindow(map,parkNo,  newpoiX, newpoiY,parkName, freepop, allnumpop)
                        }
                    }
                }
                sysAjax(opt);
            });
            marker[i].addEventListener("mouseout", function () {
                closeInfoWindow();
            })
        }
        removeCluster(marker,map);
    }
}
fun.init();
function closeInfoWindow() {
    $(".parkpop-content").css('display', 'none');
}
// 聚合 地图
function removeCluster(marker,map) {
    if (clear_flag) {
        markerClusterer.clearMarkers();         //此步骤需要
    }
    markerClusterer = new BMapLib.MarkerClusterer(map,
        {
            markers: marker,
            styles: [{
                url: '../../assets/pages/scripts/operMonFile/img/map/index.png',
                //size: new BMap.Size(30, 39),
                size: new BMap.Size(53, 52),
                textColor:'#fff',
                fontSize:'18px',
                zIndex:0
            }],
        });
    markerClusterer.setMaxZoom(13);
    clear_flag = true;
    window.Bmap.tmpMarkerClusterer = markerClusterer;
}
//字符串倒序
var reverse = function(str){
    return str.split('').reverse().join('');
};
//停车场信息弹窗
function addInfoWindow(map,parkNo, newpoiX, newpoiY, parkName, freepop, allnumpop) {
    var frees = [0,0,0,0];//初始化一个空闲车位数数组
    if(freepop!=undefined && freepop!=null){
        var freeRev = reverse(freepop+"");
        var freesRev = freeRev.split('');
        for(var i=0;i<freesRev.length;i++){
            frees[3-i] = freesRev[i];
        }
    }
    $('.BMapLabel').empty();
    var parkNo = parkNo;
    var poix = newpoiX;
    var poiy = newpoiY;
    var freepop = freepop;
    var parkName=parkName;
    var allnumpop = allnumpop;
    var point = new BMap.Point(poix, poiy);
    // console.log(freepop);
    var myLabel = new BMap.Label(
        '<div class="parkpop-content"> ' +
        '<div class="parkpop-tit"><img src="../../assets/pages/scripts/operMonFile/img/parkName_icon.png" alt="">' + parkName + '</div> ' +
        '<div class="parkpop-cont"> ' +
        '<div class="parkpop-freecont"> ' +
        '<ul class="freenum-cont"> ' +
        '<li class="freespace-num">'+frees[0]+'</li> ' +
        '<li class="freespace-num">'+frees[1]+'</li> ' +
        '<li class="freespace-num">'+frees[2]+'</li> ' +
        '<li class="freespace-num">'+frees[3]+'</li> ' +
        '</ul> ' +
        '<div class="freespace-numtit">空闲车位数</div> ' +
        '</div><div class="parkpop-allnumcont"> ' +
        '<div class="allnum-Num">' + allnumpop + '</div> ' +
        '<div class="allspace-tit">总车位</div> ' +
        '</div> ' +
        '</div></div>',
        {
            offset: new BMap.Size(30, -85),                  //label的偏移量，为了让label的中心显示在点上
            position: point
        });
    myLabel.setStyle({
            color: "#F0F0F0",
            fontSize: "12px",
            padding: "5px",
            whiteSpace: "normal",
            backgroundColor: "rgba(0, 0, 0, 0)",
            border: "0px",
            zIndex: "1000"
        }
    );
    map.addOverlay(myLabel);
    $('.parkpop-content').parent().parent().css('z-index',99999999)
}
//左侧弹窗
$(document).on('click','#result li',function () {
    //debugger
    $('.loading-wrap').show(20)
    // 初始化基本信息
    $('#ITD-alert-tab-wrap li').eq(0).click();
    var that = $(this);
    var plNo = that.attr('data-value');
    var plName = that.find('div').eq(0).attr('data-value');
    var berthNum = that.find('div').eq(2).attr('data-value');
    queryInfoByPlNo(plNo,plName,berthNum);
    loadParkDatas(plNo,berthNum);
    //将地图上的数据进行过滤
    var parkDataTemp = [];
    $.each(parkData, function (index, item) {
        if(plNo == item.parkNo){
            parkDataTemp.push(item);
        }
    });
    fun.drawMarker(parkDataTemp);
});
$('.popClose').on('click',function () {
    $('#m_r_bar li').eq(1).removeClass('related_data');
    // $('#model-right').hide();
    $('#parkmon_alertmodel').modal('hide');
});
// --------li切换--------
//m_r_bar点击事件
$('#m_r_bar').on('click','li',function () {
    var index = $(this).index();
    $(this).addClass('bar_active').siblings('li').removeClass('bar_active');
    $('.m-model-main .m_r_bar_wrap').addClass('display-none');
    $('.m-model-main .m_r_bar_wrap').eq(index).removeClass('display-none');
    if(index==1){
        if($(this).hasClass('related_data')){
        }else{
            $(this).addClass('related_data');
            occupy_echarts.resize();
            turnover_echarts.resize();
            //drawOccupyAndTurnOver();
        }
    }
});
function loadParkDatas(plNo,berthNum){
    $("#parkDataFreeBerthNum").empty();
    $("#freeRate").empty();
    $("#occupyRate").empty();
    $("#turnOverRate").empty();
    getOccupyXDatas();//
    var req = {
        sysCode: sysComm.sysCode,
        pklNo: plNo,
    };
    sysAjax({
        method: "post",
        url: dataUrl.util.queryParkingdatas(),
        data: JSON.stringify(req),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        async: false,
        success: function(res) {
            if(res.code == '8888') {
                if(res.data == null){
                    return;
                }
                parkDatas = res.data;
                console.log(parkDatas)
                setTimeout(function () {
                  $('.loading-wrap').hide()
                  $('#parkmon_alertmodel').modal('show');
                },500)
                //console.log(displayCountry);
            } else {
                alert("请求报错");
            }
        }
    });
    //1、左上角四个数据
    //var plDataSpans = $(".parkmid_l_ul ").find('span');
    $("#parkDataFreeBerthNum").text(berthNum == null ? 0 : berthNum);
    $("#turnOverRate").text((parkDatas.avgTurnoverRate == null ? 0 : parkDatas.avgTurnoverRate).toFixed(2));
    $("#occupyRate").text(((parkDatas.avgOccupyRate == null ? 0 : parkDatas.avgOccupyRate)*100).toFixed(2));
    $("#freeRate").text(((1-(parkDatas.avgOccupyRate == null ? 0 : parkDatas.avgOccupyRate))*100).toFixed(2));
    //2左下角设备状态
    //初始化
//  $("#eqpInfo").html(' <li><span class="ITD-common-color000 ITD-hidden-nowrap">岗亭服务器</span><span class="ITD-common-color000 ITD-hidden-nowrap" "="">  正常\t</span></li>' +
//      '<li><span class="ITD-common-color000 ITD-hidden-nowrap">道闸设备</span><span class="ITD-common-color000 ITD-hidden-nowrap" "="">   正常\t</span></li>' +
//      '<li><span class="ITD-common-color000 ITD-hidden-nowrap">摄像机1</span><span class="ITD-common-color000 ITD-hidden-nowrap" "="">   正常\t</span></li>' +
//      '<li><span class="ITD-common-color000 ITD-hidden-nowrap">摄像机2</span><span class="ITD-color-red ITD-hidden-nowrap" "=""> 进口1设备异常\t</span></li>');
    $("#eqpInfo").html('<li><span class="ITD-common-color000 ITD-hidden-nowrap">岗亭</span><span class="ITD-common-color000 ITD-hidden-nowrap sec" "="">无\t</span></li>' +
        ' <li><span class="ITD-common-color000 ITD-hidden-nowrap">地磁</span><span class="ITD-common-color000 ITD-hidden-nowrap sec" "="">无\t</span></li>' +
        ' <li><span class="ITD-common-color000 ITD-hidden-nowrap">视频桩</span><span class="ITD-common-color000 ITD-hidden-nowrap sec" "="">无\t</span></li>' +
        ' <li><span class="ITD-common-color000 ITD-hidden-nowrap">地锁</span><span class="ITD-common-color000 ITD-hidden-nowrap sec" "="">无\t</span></li>' +
        ' <li><span class="ITD-common-color000 ITD-hidden-nowrap">网关</span><span class="ITD-common-color000 ITD-hidden-nowrap sec" "="">无\t</span></li>' +
        ' <li><span class="ITD-common-color000 ITD-hidden-nowrap">道闸</span><span class="ITD-common-color000 ITD-hidden-nowrap sec" "="">无\t</span></li>' +
        ' <li><span class="ITD-common-color000 ITD-hidden-nowrap">PDA</span><span class="ITD-common-color000 ITD-hidden-nowrap sec" "="">无\t</span></li>');
    $.each(parkDatas.deviceVoList, function(index,item) {
        var sub = eqpType.indexOf(item.type);
        if(sub != -1){
            var html = $("#eqpInfo").find('li').eq(sub).html();
            html = html.replace("无","在线");
            if(item.onlineCount < item.allCount){
                html = html.replace("ITD-common-color000 ITD-hidden-nowrap sec","ITD-color-red ITD-hidden-nowrap").replace("在线","故障");
            }
            $("#eqpInfo").find('li').eq(sub).html(html);
        }
    });
    // //3 右边两个图
    // getOccupyAndTurnOverDatas();
    // drawOccupyAndTurnOver();
}
//获取占用率和周转次数
function getOccupyAndTurnOverDatas (){
    if(parkDatas.statisList != null && (parkDatas.statisList).length >0){
        $.each(parkDatas.statisList, function (index, item) {
            //console.log(item.statisticTime);
            var curDate = new Date();
            curDate.setTime(item.statisticEndTime);
            for(inData in xTimeDatas){
                if(xTimeDatas[inData] == (curDate.getHours()+':00')){
                    occupyDatas[inData]=(1-(item.freeRatio < 0 ? 0 : item.freeRatio)).toFixed(4);
                    turnOverDatas[inData]=item.turnoverRatio < 0 ? 0 : (item.turnoverRatio).toFixed(2);
                }
            }
        });
    }
}
//5、24小时占用率x时间轴获取
function getOccupyXDatas(){
    occupyDatas=[];
    turnOverDatas=[];
    xTimeDatas=[];
    var curDate = new Date();
    for (var i=0;i<24;i++){
        xTimeDatas.push(curDate.getHours()+':00');
        curDate.setTime(curDate.getTime()+60*60*1000);
        occupyDatas[i]=0;
        turnOverDatas[i]=0;
    }
}
function queryInfoByPlNo(plNo,plName,berthNum){
    //初始化
    $("#baseParkImg").empty();
    $("#basePlName").empty();
    $("#parkDataPlName").empty();
    $("#basePlType").empty();
    $("#baseBerthNum").empty();
    $("#baseAddress").empty();
    $("#baseDeviceType").empty();
    $("#baseInOutNum").empty();
    $("#baseBusiCircle").empty();
    $(".gridtable").empty();
    $("#basePlName").html(plName);
    var req= {
        sysCode:sysComm.sysCode,
        pklNo:plNo
    };
    var getParkLotEqpCountChart= {
        method: "post",
        url: dataUrl.util.queryParkingBaseInfo(),
        data: JSON.stringify(req),
        async: false,
        contentType: 'application/json; charset=utf-8',
        dataType:'json',
        success: function(res){
            if(res.code == '8888'){
                var result = res.data;
                console.log(result);
                //停车类型
                var parkType;
                var eqpName;
                if (1 == result.plType) {
                    parkType = '路侧';
                    eqpName='地磁';
                } else if (2 == result.plType) {
                    parkType = '封闭';
                    eqpName='道闸';
                } else {
                    parkType = '未知';
                    eqpName='地磁';
                }
                //商圈属性1:商场、2:医院、3:小区、4:学校、5:写字楼、6:景区、7:交通场站、8:其他
                var busiCircle;
                if (1 == result.busiCircle) {
                    busiCircle = '商场'
                } else if (2 == result.busiCircle) {
                    busiCircle = '医院'
                }else if (3 == result.busiCircle) {
                    busiCircle = '小区'
                }else if (4 == result.busiCircle) {
                    busiCircle = '学校'
                }else if (5 == result.busiCircle) {
                    busiCircle = '写字楼'
                }else if (6 == result.busiCircle) {
                    busiCircle = '景区'
                }else if (7 == result.busiCircle) {
                    busiCircle = '交通场站'
                }else {
                    busiCircle = '其他'
                }
                var plEntranceNum = result.plEntranceNum==null?'0':result.plEntranceNum;
                var plExitNum = result.plExitNum==null?'0':result.plExitNum;
                $("#basePlName").html(result.plName);
                $("#parkDataPlName").html(result.plName);
                $("#basePlType").html(parkType);
                $("#baseBerthNum").html(result.plBerthNum+'个');
                $("#baseAddress").html(result.plAddress);
                $("#baseDeviceType").html(eqpName);
                $("#baseInOutNum").html(plEntranceNum+"入"+plExitNum+"出");
                $("#baseBusiCircle").html(busiCircle);
//			            photoList
                var photos = result.picUrls;
                var html = '';
                $.each(photos, function(index,item) {
                    html+="<li><img src="+item+" alt=''></li>";
                });
                $("#baseParkImg").html(html);
                var plRate=result.plRate;
                if(plRate==null || plRate==undefined || plRate==''||plRate==='[]'){
                    $("#plRate").empty();
                    var htmlnew='<li class="caryard-basic-borderbototm ITD-common-fontsize12 ITD-common-color000">'+
                        '<div class="caryard-basic-ifo-fees-cricle"></div>'+
                        // '<div class="caryard-basic-ifo-fees-type ITD-hidden-nowrap"></div>'+
                        '<div class="caryard-basic-ifo-fees-rule ITD-hidden-nowrap ITD-cursor-pointer">暂未配置</div>'+
                        '<div class="ITD-hidden-nowrap caryard-basic-ifo-fees-max text-center ITD-cursor-pointer">暂未配置</div>'+
                        '</li>';
                    $("#plRate").html(htmlnew);
                }else{
                    plRate = JSON.parse(plRate);
                    console.log(plRate);
                    $("#plRate").empty();
                    var htmlnew='';
                    for(var index in plRate){
                        htmlnew += '<li class="caryard-basic-borderbototm ITD-common-fontsize12 ITD-common-color000">'+
                            '<div class="caryard-basic-ifo-fees-cricle"></div>'+
                            // '<div class="caryard-basic-ifo-fees-type ITD-hidden-nowrap"></div>'+
                            '<div class="caryard-basic-ifo-fees-rule ITD-hidden-nowrap ITD-cursor-pointer" data-toggle="tooltip" title="'+plRate[index].standard+'">'+plRate[index].standard+'</div>'+
                            '<div class="ITD-hidden-nowrap caryard-basic-ifo-fees-max text-center ITD-cursor-pointer" data-toggle="tooltip" title="'+plRate[index].standardInfo+'">'+plRate[index].standardInfo+'</div>'+
                            '</i>';
                    }
                    $("#plRate").html(htmlnew);
                    $("[data-toggle='tooltip']").tooltip({
                        delay: {show: 500, hide: 100},
                    });
                }
            }
        }
    };
    sysAjax(getParkLotEqpCountChart);
    $('#m_r_bar li').eq(0).click();
}
//echarts 24小时
//周转次数和占用率
function drawOccupyAndTurnOver(){
    //停车数据
    //24小时占用率
    occupy_echarts = echarts.init(document.getElementById('caryard-parking-echart'));
    var occupy_option = {
        animationDuration:2000,
        tooltip : {
            trigger: 'axis',
            textStyle:{
                fontSize:'12px'
            },
            padding:[10,10,10,10],
            formatter: function (params) {
                //return params[0].value+'%'
                return (params[0].value*100).toFixed(2) +'%'
            },
        },
        grid: {
            left: '0.8%',
            right: '1%',
            bottom: '10%',
            top:'5%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : xTimeDatas,//['08:00','10:00','08:00','10:00','08:00','10:00',],
                axisTick:{
                    show:false,
                },
                axisLabel: {
                    rotate:40,
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,.8)',
                        fontFamily:'微软雅黑',
                        fontSize:'12px',
                    }
                },
                splitLine:{
                    lineStyle:{
                        color:'rgba(0,0,0,0.1)',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0,0,0,0.1)',
                        // width: 1,//这里是为了突出显示加上的
                    }
                },
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisTick:{
                    show:false
                },
                // splitNumber:3,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,.8)',
                        fontSize:'12px',
                        fontFamily:'微软雅黑',
                    },
                    formatter: function (value) {
                        return value*100 +'%'
                    },
                },
                max:'1',
                splitLine:{
                    lineStyle:{
                        color:'rgba(0,0,0,0.1)',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0,0,0,0.1)',
                        // width: 1,//这里是为了突出显示加上的
                    }
                },
            }
        ],
        series : [
            {
                name:'24小时占用率',
                type:'line',
                smooth:true,
                //stack:'总量',
                symbolSize:0,
                areaStyle: {normal: {
                        color:'#f7c92b'
                    }},
                lineStyle:{
                    normal: {
                        color:'#626c72',
                        width:0,
                    }
                },
                zlevel:11,
                data:occupyDatas//[0, 43.2, 40.0, 33.4, 14.9, 33.4,2.00]
            },
        ]
    };
    occupy_echarts.setOption(occupy_option, true);
    //24小时周转次数
    turnover_echarts = echarts.init(document.getElementById('berth-usage-echart'));
    var turnover_option = {
        animationDuration:2000,
        tooltip : {
            trigger: 'axis',
            textStyle:{
                fontSize:'12px'
            },
            padding:[10,10,10,10],
            formatter: function (params) {
                return params[0].value//+'%'
                // return (params[0].value*100).toFixed(2) +'%'
            },
        },
        grid: {
            left: '0.8%',
            right: '1%',
            bottom: '10%',
            top:'5%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : xTimeDatas,//['08:00','10:00','08:00','10:00','08:00','10:00',],
                axisTick:{
                    show:false,
                },
                axisLabel: {
                    rotate:40,
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.8)',
                        // align:'left',
                        fontSize:'12px',
                    }
                },
                splitLine:{
                    lineStyle:{
                        color:'rgba(0,0,0,0.1)',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0,0,0,0.1)',
                        // width: 1,//这里是为了突出显示加上的
                    }
                },
            }
        ],
        yAxis : [
            {
                z:0,
                axisTick:{
                    show:false
                },
                splitNumber:2,
                axisLabel: {
                    show: true,
                    formatter: function (value) {
                        return value//*100 +'%'
                    },
                    textStyle: {
                        color: 'rgba(0,0,0,0.8)',
                        fontSize:'12px',
                    }
                },
                splitLine:{
                    lineStyle:{
                        color:'rgba(0,0,0,0.1)',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0,0,0,0.1)',
                        // width: 1,//这里是为了突出显示加上的
                    }
                },
            }
        ],
        series : [
            {
                name:'24小时周转次数',
                type:'line',
                smooth:true,
                //stack:'总量',
                symbolSize:0,
                areaStyle: {
                    normal: {
                        color:'#469eef'
                    }
                },
                lineStyle:{
                    normal: {
                        color:'#626c72',
                        width:0,
                        opacity:1,
                    }
                },
                z:11,
                zlevel:11,
                data:turnOverDatas//[0, 43.2, 25.1, 33.4, 25.1, 33.4,10.0]
            },
        ]
    };
    turnover_echarts.setOption(turnover_option, true);
};
/**
 *弹窗切换
 **/
$('#ITD-alert-tab-wrap li').on('click', function () {
    var _index = $(this).index();
    $('#ITD-alert-tab-wrap>li').eq(_index).addClass('ITD-alert-tab-active').siblings().removeClass('ITD-alert-tab-active');
    $('#ITD-alertcon-tab-wrap>li').eq(_index).removeClass('display-none').siblings().addClass('display-none');
    if (0 == _index) {
        // fun.alertIfo();
    } else {
        getOccupyAndTurnOverDatas();
        drawOccupyAndTurnOver();
    }
});
var flag = true;
$('#main-left').on('click',function () {
    if(flag){
        $('#main-wrap').animate({'right':'-328px'});
        $(this).addClass('click_right');
        flag =  false;
    }else{
        $('#main-wrap').animate({'right':'18px'});
        $(this).removeClass('click_right');
        flag =  true;
    }
});