|
|
@@ -1,51 +1,80 @@
|
|
|
- //时间
|
|
|
- var timer = null;
|
|
|
- function setTime(){
|
|
|
- if(timer !== null){
|
|
|
- clearTimeout(timer);
|
|
|
- }
|
|
|
- setTimeout(function () {
|
|
|
- $("#date").text(getTime()[0]);
|
|
|
- $("#time").text(getTime()[1] +" "+ getTime()[2]);
|
|
|
- setTime();
|
|
|
- },1000);
|
|
|
- }
|
|
|
- setTime();
|
|
|
-
|
|
|
- //legend 生成图例
|
|
|
- function createLegend() {
|
|
|
- var html = '';
|
|
|
- html += '<div class="legend-content" onmouseover="$(this).css(\'cursor\',\'pointer\');showCityOpt();" onmouseout="hideCityOpt();"><span><img src="icon/legend.png"/>运维区域</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.map(function(e){
|
|
|
- html += "<ul class='city-item'><li>";
|
|
|
- // 地市级
|
|
|
- html += "<a href='javascript:void(0)' class='city-choose city' data-city-id='"+e.code+"'>"+ e.name +"</a>";
|
|
|
- e.areas.map(function(el){
|
|
|
- // 县区
|
|
|
- html += "<a href='javascript:void(0)' class='city-choose county' data-city-id='"+el.code+"'>"+ el.name +"</a>";
|
|
|
- })
|
|
|
- html += "</li></ul>";
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- html += '</div>';
|
|
|
- $("body #position_top").append(html);
|
|
|
-
|
|
|
- initStyle();
|
|
|
- }
|
|
|
-
|
|
|
- createLegend();
|
|
|
-
|
|
|
- // 设置悬浮图标Css
|
|
|
- function initStyle() {
|
|
|
+// 默认显示宠物和医院
|
|
|
+$(function(){
|
|
|
+ setTime();
|
|
|
+ // 初始化数据
|
|
|
+ initData();
|
|
|
+ // 初始化大屏样式
|
|
|
+ initScreen();
|
|
|
+
|
|
|
+ var isFirstLoadding = localStorage.getItem('isFirstLoadding');
|
|
|
+ // 第一次加载
|
|
|
+ if (isFirstLoadding === null) {
|
|
|
+ $('#pets_distribute').attr('checked','checked');
|
|
|
+ localStorage.setItem('isShowPets',true);
|
|
|
+ $('#pets_hospital').attr('checked','checked');
|
|
|
+ localStorage.setItem('isShowHospital',true);
|
|
|
+
|
|
|
+ localStorage.setItem('isFirstLoadding',false);
|
|
|
+ } else {
|
|
|
+ localStorage.getItem('isShowPets') && $('#pets_distribute').attr('checked','checked');
|
|
|
+ localStorage.getItem('isShowHospital') && $('#pets_hospital').attr('checked','checked');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化地图
|
|
|
+ initBdMap();
|
|
|
+
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+//时间
|
|
|
+var timer = null;
|
|
|
+function setTime(){
|
|
|
+ if(timer !== null){
|
|
|
+ clearTimeout(timer);
|
|
|
+ }
|
|
|
+ setTimeout(function () {
|
|
|
+ $("#date").text(getTime()[0]);
|
|
|
+ $("#time").text(getTime()[1] +" "+ getTime()[2]);
|
|
|
+ setTime();
|
|
|
+ },1000);
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化数据
|
|
|
+function initData() {
|
|
|
+ getHospitalData();
|
|
|
+ getPetData();
|
|
|
+ getSearchPetsData();
|
|
|
+ getRecordPetsPieData();
|
|
|
+ getRecordRankingData();
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化大屏
|
|
|
+function initScreen() {
|
|
|
+ $('#position_left').text() && $('#position_left').html('');
|
|
|
+ $('#position_top').text() && $('#position_top').html('');
|
|
|
+ $('#position_right').text() && $('#position_right').html('');
|
|
|
+ // 头部导航
|
|
|
+ initTopNav();
|
|
|
+ // 上牌排名
|
|
|
+ initRecordRank();
|
|
|
+ // 数据统计
|
|
|
+ initStatistics();
|
|
|
+ // 备案宠物品种统计
|
|
|
+ initRecordPetsPie();
|
|
|
+ // 寻宠轮播
|
|
|
+ initSearchPets();
|
|
|
+ // 初始化tips
|
|
|
+ initStyle();
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 窗口尺寸改变
|
|
|
+$(window).resize(function(e){
|
|
|
+ initStyle();
|
|
|
+});
|
|
|
+
|
|
|
+// 设置悬浮图标Css
|
|
|
+function initStyle() {
|
|
|
var window_w = $(window).width();
|
|
|
var position_left_w = $('#position_left').width();
|
|
|
var position_right_w = $('#position_right').width();
|
|
|
@@ -60,156 +89,7 @@
|
|
|
$('#position_right').css({top:"90px"});
|
|
|
}
|
|
|
$('#cityOpt').css({left:(position_left_w + 20) +"px"});
|
|
|
- }
|
|
|
-
|
|
|
- // 窗口尺寸改变
|
|
|
- $(window).resize(function(e){
|
|
|
- initStyle();
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- //生成卡片
|
|
|
- // 数据统计
|
|
|
- var zhzb =
|
|
|
- '<ul>' +
|
|
|
- '<li><span class="zhzb-li-name">已备案宠物<span class="typeStyle">（只）</span></span><span class="zhzb-li-num">653212</span></li>' +
|
|
|
- '<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">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);
|
|
|
-
|
|
|
-// 犬种统计图
|
|
|
-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: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '访问来源',
|
|
|
- type: 'pie',
|
|
|
- radius: '55%',
|
|
|
- center: ['50%', '60%'],
|
|
|
- data: [
|
|
|
- {value: 335, name: '直接访问'},
|
|
|
- {value: 310, name: '邮件营销'},
|
|
|
- {value: 234, name: '联盟广告'},
|
|
|
- {value: 135, name: '视频广告'},
|
|
|
- {value: 1548, name: '搜索引擎'}
|
|
|
- ],
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
-};
|
|
|
-specie_pie.setOption(specie_pie_option);
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- //详细指标
|
|
|
- var xxzb = '<div id="qybxspm"></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:1300
|
|
|
- });
|
|
|
- qybxspm.setData([
|
|
|
- {"name":"中部","data":1123,"color":"#55DAED"},
|
|
|
- {"name":"东部","data":904,"color":"#55B6ED"},
|
|
|
- {"name":"西部","data":845,"color":"#3F80D2"},
|
|
|
- {"name":"北部","data":756,"color":"#2B5DB8"},
|
|
|
- {"name":"南部","data":684,"color":"#1864E3"}
|
|
|
- ]);
|
|
|
-
|
|
|
-// 寻宠轮播
|
|
|
-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.decribe || '';
|
|
|
- if (text.length > 96) {
|
|
|
- text = text.slice(0,96) + '...';
|
|
|
- }
|
|
|
- search_pets += "<div class='pets-carousel-item' " + ((searchPetsIndex != index) ? "style='display:none'" : '') + ">";
|
|
|
- search_pets += "<div class='pets-search-info'>";
|
|
|
- search_pets += "<img src='"+item.photo+"' alt='宠物图片' width='120px' height='120px' />";
|
|
|
- search_pets += "<div class='pets-info'>"
|
|
|
- + "<span>宠物名称：" +item.name + "</span>"
|
|
|
- + "<span>设备编号：" +item.deviceNumber+ "</span>"
|
|
|
- + "<span>发布人：" +item.userName + "</span>"
|
|
|
- + "<span>联系电话：" +item.phone+ "</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 showCityOpt() {
|
|
|
$('#cityOpt').show();
|
|
|
@@ -217,3 +97,89 @@ function showCityOpt() {
|
|
|
function hideCityOpt() {
|
|
|
$('#cityOpt').hide();
|
|
|
}
|
|
|
+
|
|
|
+// 寻宠轮播
|
|
|
+setInterval(function(){
|
|
|
+ var times = searchPetsData.length;
|
|
|
+ if (times <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $('#pets-carousel-item'+searchPetsIndex).hide();
|
|
|
+ searchPetsIndex++;
|
|
|
+ if (searchPetsIndex == times) {
|
|
|
+ searchPetsIndex = 0;
|
|
|
+ }
|
|
|
+ $('#pets-carousel-item'+searchPetsIndex).show();
|
|
|
+},searchPetsInterval * 1000);
|
|
|
+
|
|
|
+// 全屏模式
|
|
|
+function fullScreen() {
|
|
|
+ var e = document.documentElement
|
|
|
+ , a = e.requestFullScreen || e.webkitRequestFullScreen || e.mozRequestFullScreen || e.msRequestFullscreen;
|
|
|
+ "undefined" != typeof a && a && a.call(e)
|
|
|
+}
|
|
|
+function exitScreen() {
|
|
|
+ document.documentElement;
|
|
|
+ document.exitFullscreen ? document.exitFullscreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen ? document.webkitCancelFullScreen() : document.msExitFullscreen && document.msExitFullscreen()
|
|
|
+}
|
|
|
+
|
|
|
+$('.nav-full-screen').on('click',function(e){
|
|
|
+ var a = "nav-icon-screen-full"
|
|
|
+ , t = "nav-icon-screen-restore";
|
|
|
+ $(this).hasClass(a) ? (fullScreen(),$(this).addClass(t).removeClass(a).attr('src',compbase + '/icon/min-screen.png')) : (exitScreen(),$(this).addClass(a).removeClass(t).attr('src',compbase + '/icon/full-screen.png'));
|
|
|
+});
|
|
|
+
|
|
|
+// 显示/隐藏宠物覆盖物
|
|
|
+$(document).on('click','#pets_distribute',function(){
|
|
|
+ var isChecked = $(this).attr('checked');
|
|
|
+ if (isChecked) {
|
|
|
+ $(this).removeAttr('checked');
|
|
|
+ localStorage.removeItem('isShowPets');
|
|
|
+ } else {
|
|
|
+ $(this).attr('checked','checked');
|
|
|
+ localStorage.setItem('isShowPets',true);
|
|
|
+ }
|
|
|
+ initBdMap();
|
|
|
+});
|
|
|
+// 显示/隐藏宠物医院覆盖物
|
|
|
+$(document).on('click','#pets_hospital',function(){
|
|
|
+ var isChecked = $(this).attr('checked');
|
|
|
+ if (isChecked) {
|
|
|
+ $(this).removeAttr('checked');
|
|
|
+ localStorage.removeItem('isShowHospital');
|
|
|
+ } else {
|
|
|
+ $(this).attr('checked','checked');
|
|
|
+ localStorage.setItem('isShowHospital',true);
|
|
|
+ }
|
|
|
+ initBdMap();
|
|
|
+});
|
|
|
+// 切换城市
|
|
|
+$(document).on('click','.city-choose',function(e){
|
|
|
+ var cityid = $(this).data('cityid');
|
|
|
+
|
|
|
+ cityData.some(function(item1){
|
|
|
+ if (item1.id == cityid) {
|
|
|
+ curCityInfo = item1;
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ item1.sub && item1.sub.some(function(item2){
|
|
|
+ if (item2.id == cityid) {
|
|
|
+ curCityInfo = item2;
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ localStorage.setItem('curCityInfo',JSON.stringify(curCityInfo));
|
|
|
+
|
|
|
+ // 重新加载数据
|
|
|
+ getHospitalData();
|
|
|
+ getPetData();
|
|
|
+ getSearchPetsData();
|
|
|
+ getRecordPetsPieData();
|
|
|
+ getRecordRankingData();
|
|
|
+
|
|
|
+ initScreen();
|
|
|
+
|
|
|
+ initBdMap();
|
|
|
+});
|
git
