data_view/gitee-datav/智慧运维/PetsDataView/js/tips.js

//生成卡片
// 头部导航
function initTopNav() {
    var html = '';
        html += '<div class="legend-content" onmouseover="$(this).css(\'cursor\',\'pointer\');showCityOpt();" onmouseout="hideCityOpt();">'
              + '<span><img src="' + compbase + '/icon/legend.png"/>城市</span>' 
              + '<span> [ '+ curCityInfo.name +' ] </span></div>';
        html += '<div class="legend-content">';
        html += '<span><input type="checkbox" id="pets_distribute" /><label for="pets_distribute" style="font-size: 14px;">宠物分布</label></span>';
        html += '<span><input type="checkbox" id="pets_hospital" /><label for="pets_hospital" style="font-size: 14px;">宠物医院</label></span>';
        // html += '<span><input type="checkbox" id="pets_vaccine" /><label for="pets_vaccine" style="font-size: 14px;">疫苗注射点</label></span>';
        // html += '<span><input type="checkbox" id="pets_service" /><label for="pets_service" style="font-size: 14px;">上牌服务点</label></span>';
        html += '</div>';
        //  选择城市
        html += '<div id="cityOpt" onmouseover="showCityOpt()" onmouseout="hideCityOpt()">';
        cityData.length && cityData.map(function(e){
           html += "<ul class='city-item'><li>";
           // 地市级
           html += "<a href='javascript:void(0)' class='city-choose city' data-cityid='"+e.id+"'>"+ e.name +"</a>";
            e.sub && e.sub.length && e.sub.map(function(el){
               // 县区
               html += "<a href='javascript:void(0)' class='city-choose county' data-cityid='"+el.id+"'>"+ el.name +"</a>";
           })
           html += "</li></ul>";

        });

        html += '</div>';
    $("body #position_top").append(html);
}

// 数据统计
function initStatistics() {
    // 计算登记宠物数
    var petsNum = 0;
    var waitRenewalNum = 0;
    petData.wait_renewal && (waitRenewalNum = petData.wait_renewal.length) && (petsNum += waitRenewalNum);
    petData.normal && (petsNum += petData.normal.length);
    var zhzb =
    '<ul>' +
        '<li><span class="zhzb-li-name">宠物医院<span class="typeStyle">（所）</span></span><span class="zhzb-li-num">' + hospitalData.length + '</span></li>' +
        '<li><span class="zhzb-li-name">登记犬只数<span class="typeStyle">（只）</span></span><span class="zhzb-li-num">'+ petsNum +'</span></li>' +
        '<li><span class="zhzb-li-name">待续期犬证<span class="typeStyle">（张）</span></span><span class="zhzb-li-num">'+ waitRenewalNum +'</span></li>'
        // '<li><span class="zhzb-li-name">疫苗注射点<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">4213</span></li>' +
        // '<li><span class="zhzb-li-name">上牌服务点<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">108</span></li>' +
    '</ul>';

    var zzb = new CreateTip({
    parentId: "position_left",
    id:"zongzhibiao",
    titleName:"数据统计",
    icon:"icon/statistics.png",
    width: "100%",
    //        html:zhzb
    });
    zzb.setData(zhzb);
}

// 上牌排行
function initRecordRank() {
    // 计算上牌数
    var petsNum = 0;
    petData.wait_renewal && (petsNum += petData.wait_renewal.length);
    petData.normal && (petsNum += petData.normal.length);
    //详细指标
    var xxzb = '<div id="qybxspm">';  
                if (petsNum == 0) {
                    xxzb += '<p style="color: #fff; text-align: center;">暂无数据</p>';
                }
        xxzb += '</div>';
    var xzb = new CreateTip({
        parentId: "position_right",
        id:"xxzb",
        titleName:"上牌排行榜",
        icon:"icon/statistics.png",
        width:"100%",
    //        html:xxzb
    });
    xzb.setData(xxzb);

    var qybxspm = new CreateSpeed({
        id:"qybxspm",
        icon:"icon/fix.png",
        //  title:"上牌排行",
        max: petsNum
    });
    qybxspm.setData(recordRankingData);
}

// 寻宠轮播
function initSearchPets() {
    var search_pets = "";
    if (searchPetsData.length == 0) {
        search_pets += '<p style="color: #fff; text-align: center;">暂无数据</p>';
    } else {
        
        searchPetsData.forEach(function(item, index){
            let text = item.Description || '';
            if (text.length > 96) {
                text = text.slice(0,96) + '...';
            }
            search_pets += "<div class='pets-carousel-item' " + ((searchPetsIndex != index) ? "style='display:none'" : '') + " id='pets-carousel-item"+index+"' >";
            search_pets += "<div class='pets-search-info'>";
            search_pets += "<img src='"+(item.PetPhotos_0 || item.PetPhotos_1 || compbase +'/icon/pet-default.jpg')+"' alt='宠物图片' width='120px' height='120px' />";
            search_pets += "<div class='pets-info'>" 
            + "<span>宠物昵称：" +(item.PetName || '') + "</span>"
            + "<span>狗牌编号：" +(item.DeviceNumber || '') + "</span>"
            + "<span>发布人：" +item.UserName + "</span>"
            + "<span>联系电话：" +item.Mobile+ "</span>"
            + "<span>丢失地点：" +(item.Address || '')+ "</span></div>";
            search_pets += "</div>";
            search_pets += "<div class='pets-describe'>"+text+"</div>";
            search_pets += "</div>";
        });
    
    }
    var xcObj = new CreateTip({
        parentId: "position_right",
        id: "search_pets",
        titleName: "寻宠信息",
        icon: "icon/alarm.png",
        width: "100%"
    });
    xcObj.setData(search_pets);
}
 
// 犬种统计图
function initRecordPetsPie() {
    var species = '<div id="specie_pie"></div>';
    var specieObj = new CreateTip({
        parentId: "position_left",
        id: "species",
        titleName: "已备案品种统计",
        icon: "icon/pie.png",
        width: "100%",
    });
    specieObj.setData(species);

    var specie_pie = echarts.init(document.getElementById('specie_pie'));
    var specie_pie_option = {
        textStyle: {
            color: "#fff",
        },
        title: {
            // text: '标题',
            // subtext: '子标题',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            // orient: 'vertical',
            left: 'left',
            data: recordPetsPieData.map(function(e){return e.name}),
            textStyle: {
                color: "#fff",
            }
        },
        series: [
            {
                name: '宠物品种',
                type: 'pie',
                radius: '55%',
                center: ['45%', '60%'],
                data: recordPetsPieData.map(function(e){
                    //e.name = e.name + '(' + e.value +')';
                    return e;
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    specie_pie.setOption(specie_pie_option);

}