4 年之前 · 1e0380eaa6
--- a/gitee-datav/智慧运维/PetsDataView/icon/alarm.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/alarm.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/fix.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/fix.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/fold.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/fold.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/legend.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/legend.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/pie.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/pie.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/selectIcon.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/selectIcon.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/statistics.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/statistics.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/unfold.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/unfold.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/xjt.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/xjt.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/上升趋势.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/上升趋势.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/下降趋势.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/下降趋势.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/区域完成数排名.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/区域完成数排名.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/考勤.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/考勤.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/高亮图标大.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/高亮图标大.png
--- a/gitee-datav/智慧运维/PetsDataView/icon/高亮图标小.png
+++ b/gitee-datav/智慧运维/PetsDataView/icon/高亮图标小.png
--- a/gitee-datav/智慧运维/PetsDataView/index.html
+++ b/gitee-datav/智慧运维/PetsDataView/index.html
@@ -0,0 +1,29 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>智慧宠物大屏展示</title>
			
 
				+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WSrX4bCfgcjTfhWNCwvfI1ZnQnfZDxFW"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="mapContainer"></div>
			
 
				+    <div class="nav-top">
			
 
				+        <span class="nav-top-title">智慧宠物大屏展示</span>
			
 
				+        <div class="nav-top-time">
			
 
				+            <span id="date"></span>
			
 
				+            <span id="time"></span>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 顶部悬浮 -->
			
 
				+    <div id="position_top" class="legend-container top-nav" style="min-width:500px; position: fixed; top: 90px; left: calc(20vw + 20px);"></div>
			
 
				+
			
 
				+    <!-- 左侧区域悬浮 -->
			
 
				+    <div id="position_left" style="width: 20vw; min-width: 300px; position: fixed; top: 90px; left: 10px;"></div>
			
 
				+
			
 
				+    <!-- 右侧区域悬浮 -->
			
 
				+    <div id="position_right" style="width: 22vw; min-width: 400px; position: fixed; top: 90px; right: 10px;"></div>
			
 
				+
			
 
				+<script type="text/javascript" src="lib/loadingScript.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/gitee-datav/智慧运维/PetsDataView/js/bdMap.js
+++ b/gitee-datav/智慧运维/PetsDataView/js/bdMap.js
@@ -0,0 +1,42 @@
 
				+function checkhHtml5()
			
 
				+{
			
 
				+    if (typeof(Worker) === "undefined")
			
 
				+    {
			
 
				+        if(navigator.userAgent.indexOf("MSIE 9.0")<=0)
			
 
				+        {
			
 
				+            alert("请使用： chrome、firefox、safari、IE10 浏览器");
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+}
			
 
				+checkhHtml5();
			
 
				+
			
 
				+//初始化地图
			
 
				+function initBdMap () {
			
 
				+    var map = new BMap.Map("mapContainer",{toolBarVisible:false});
			
 
				+    var point = new BMap.Point(116.404, 39.915);
			
 
				+    map.loaded = function () {
			
 
				+        console.log('map loaded')
			
 
				+    };
			
 
				+    var map = new BMap.Map('mapContainer');
			
 
				+    map.centerAndZoom(new BMap.Point(116.404, 40.10), 10);
			
 
				+    map.enableScrollWheelZoom(true);
			
 
				+    
			
 
				+    var  mapStyle ={
			
 
				+        features: ["road", "building","water","land"],//隐藏地图上的poi
			
 
				+        style : "midnight"  //设置地图风格为高端黑
			
 
				+    };
			
 
				+    map.setMapStyle(mapStyle);
			
 
				+
			
 
				+}
			
 
				+
			
 
				+// 宠物医院
			
 
				+function initHospital() {
			
 
				+
			
 
				+    console.log(hospitalData)
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+initBdMap();
			
--- a/gitee-datav/智慧运维/PetsDataView/js/data.js
+++ b/gitee-datav/智慧运维/PetsDataView/js/data.js
--- a/gitee-datav/智慧运维/PetsDataView/js/index.js
+++ b/gitee-datav/智慧运维/PetsDataView/js/index.js
@@ -0,0 +1,219 @@
 
				+ //时间

			
 
				+ 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() {

			
 
				+    var window_w = $(window).width();

			
 
				+    var position_left_w = $('#position_left').width();

			
 
				+    var position_right_w = $('#position_right').width();

			
 
				+        

			
 
				+    if ( window_w < 1200 + 40 ) {

			
 
				+        $('#position_top').css({left:"10px",width:"99%"});

			
 
				+        $('#position_left').css({top:"150px"});

			
 
				+        $('#position_right').css({top:"150px"});

			
 
				+    } else {

			
 
				+        $('#position_top').css({left: (position_left_w + 20) +"px",width: (window_w - position_left_w - position_right_w - 40) +"px"});

			
 
				+        $('#position_left').css({top:"90px"});

			
 
				+        $('#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();

			
 
				+}

			
 
				+function hideCityOpt() {

			
 
				+    $('#cityOpt').hide();

			
 
				+}

			
--- a/gitee-datav/智慧运维/PetsDataView/lib/createSpeed.js
+++ b/gitee-datav/智慧运维/PetsDataView/lib/createSpeed.js
@@ -0,0 +1,73 @@
 
				+/**
			
 
				+ * 创建进度条 组件
			
 
				+ */
			
 
				+function CreateSpeed(option){
			
 
				+    this.option = option;
			
 
				+    this.isFirstLoad = true;
			
 
				+    this.init();
			
 
				+}
			
 
				+CreateSpeed.prototype = {
			
 
				+    init:function () {
			
 
				+        this.createSpeed();
			
 
				+    },
			
 
				+    createSpeed:function () {
			
 
				+        var _view_ = this;
			
 
				+        var html = '';
			
 
				+        html += '<div id="'+_view_.option.id+'" class="speed-container">';
			
 
				+            if (_view_.option.title) {
			
 
				+
			
 
				+                html += '<div class="speed-title">';
			
 
				+                html += '<span><img src="'+_view_.option.icon+'"></span><span>'+_view_.option.title+'</span><span><img src="icon/xjt.png"></span>';
			
 
				+                html += '</div>';
			
 
				+            }
			
 
				+                
			
 
				+                html += '<div class="speed-content">';
			
 
				+                html += '<ul>';
			
 
				+
			
 
				+                html += '<ul>';
			
 
				+            html += '</div>';
			
 
				+        html += '</div>';
			
 
				+        $("#"+_view_.option.id).append(html);
			
 
				+    },
			
 
				+    setData:function (series) {
			
 
				+        var _view_ = this;
			
 
				+        function toPoint(point){
			
 
				+            var str=Number(point*100).toFixed(1);
			
 
				+            str+="%";
			
 
				+            return str;
			
 
				+        }
			
 
				+        var html = '';
			
 
				+        series.forEach(function (item,index) {
			
 
				+            html += '<li><span>'+item["name"]+'</span><span class="speed-line"><span id="'+_view_.option.id+index+'" class="speed-num" style="background-color: '+item["color"]+'"></span><span class="numText">'+item["data"]+'</span></span></li>';
			
 
				+        });
			
 
				+        $("#"+_view_.option.id + " ul").html(html);
			
 
				+
			
 
				+        //动画效果加载数据
			
 
				+        if(_view_.isFirstLoad){
			
 
				+            series.forEach(function (item,index) {
			
 
				+                var dataNum = null;
			
 
				+                if(_view_.option.max === null){
			
 
				+                    dataNum = item["data"];
			
 
				+                }else{
			
 
				+                    dataNum = toPoint(item["data"]/_view_.option.max);
			
 
				+                }
			
 
				+                $("#"+_view_.option.id+index).animate({
			
 
				+                    width:dataNum
			
 
				+                },2000);
			
 
				+            });
			
 
				+            _view_.isFirstLoad = false;
			
 
				+        }else{
			
 
				+            series.forEach(function (item,index) {
			
 
				+                var dataNum = null;
			
 
				+                if(_view_.option.max === null){
			
 
				+                    dataNum = item["data"];
			
 
				+                }else{
			
 
				+                    dataNum = toPoint(item["data"]/_view_.option.max);
			
 
				+                }
			
 
				+                $("#"+_view_.option.id+index).width({
			
 
				+                    width:dataNum
			
 
				+                })
			
 
				+            });
			
 
				+        }
			
 
				+    }
			
 
				+};
			
--- a/gitee-datav/智慧运维/PetsDataView/lib/createTip.js
+++ b/gitee-datav/智慧运维/PetsDataView/lib/createTip.js
@@ -0,0 +1,58 @@
 
				+/**
			
 
				+ * 生成卡片窗口
			
 
				+ */
			
 
				+function CreateTip(option){
			
 
				+    this.option = option;
			
 
				+    this.drop = false;
			
 
				+    this.init();
			
 
				+}
			
 
				+CreateTip.prototype = {
			
 
				+    init:function () {
			
 
				+        this.createContainer();
			
 
				+    },
			
 
				+    createContainer:function () {
			
 
				+        var _view_ = this;
			
 
				+        var html = '';
			
 
				+        html += '<div id="'+_view_.option.id+'" class="tip-container" style="width: '+_view_.option.width +'">';
			
 
				+        html += '<div class="tip-title"><span><img src="'+_view_.option.icon+'"/></span><span>'+_view_.option.titleName+'</span><span class="tip-dropDown"><img src="icon/fold.png"/></span></div>';
			
 
				+        html += '<div class="tip-content">';
			
 
				+        // html += _view_.option.html;
			
 
				+        html += '</div>';
			
 
				+        html += '</div>';
			
 
				+        if (_view_.option.parentId) {
			
 
				+            $('#' + _view_.option.parentId).append(html);
			
 
				+        } else {
			
 
				+            $("body").append(html);
			
 
				+        }
			
 
				+        
			
 
				+        var $container = $("#"+_view_.option.id);
			
 
				+
			
 
				+        if (_view_.option.pos) {
			
 
				+            $container.css(_view_.option.pos);
			
 
				+        }        
			
 
				+        if (_view_.option.css) {
			
 
				+            $container.css(_view_.option.css);
			
 
				+        }        
			
 
				+
			
 
				+        var $containerW = $container.width() - 32;
			
 
				+        $("#"+_view_.option.id+" .tip-content").width($containerW);
			
 
				+
			
 
				+        $("#"+_view_.option.id+" .tip-dropDown").bind("click",function () {
			
 
				+            var $tipContent =  $("#"+_view_.option.id+" .tip-content");
			
 
				+            if(!_view_.drop){
			
 
				+                $tipContent.slideUp();
			
 
				+                $(this).find("img").attr("src","icon/unfold.png");
			
 
				+                _view_.drop = true;
			
 
				+            }else{
			
 
				+                $tipContent.slideDown();
			
 
				+                $(this).find("img").attr("src","icon/fold.png");
			
 
				+                _view_.drop = false;
			
 
				+            }
			
 
				+        });
			
 
				+    },
			
 
				+    setData:function (htmlText) {
			
 
				+        var _view_ = this;
			
 
				+        $("#"+_view_.option.id+" .tip-content").html(htmlText);
			
 
				+    }
			
 
				+};
			
 
				+
			
--- a/gitee-datav/智慧运维/PetsDataView/lib/echarts.js
+++ b/gitee-datav/智慧运维/PetsDataView/lib/echarts.js
--- a/gitee-datav/智慧运维/PetsDataView/lib/getTime.js
+++ b/gitee-datav/智慧运维/PetsDataView/lib/getTime.js
@@ -0,0 +1,26 @@
 
				+/**
			
 
				+ * 时间更新模块
			
 
				+ */
			
 
				+function getTime(){
			
 
				+    var week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			
 
				+    var localToday = '';
			
 
				+    var d = new Date();
			
 
				+    localToday = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日";
			
 
				+    var time = '';
			
 
				+    var hh = d.getHours();            //时
			
 
				+    var mm = d.getMinutes();          //分
			
 
				+    var ss = d.getSeconds();
			
 
				+    if(hh < 10)
			
 
				+        time += "0";
			
 
				+
			
 
				+    time += hh + ":";
			
 
				+
			
 
				+    if (mm < 10) time += '0';
			
 
				+    time += mm + ":";
			
 
				+
			
 
				+    if (ss < 10) time += '0';
			
 
				+    time += ss;
			
 
				+
			
 
				+
			
 
				+    return {0:localToday ,1:week[d.getDay()],2:time }
			
 
				+}
			
--- a/gitee-datav/智慧运维/PetsDataView/lib/jquery.min.js
+++ b/gitee-datav/智慧运维/PetsDataView/lib/jquery.min.js
--- a/gitee-datav/智慧运维/PetsDataView/lib/loadingScript.js
+++ b/gitee-datav/智慧运维/PetsDataView/lib/loadingScript.js
@@ -0,0 +1,45 @@
 
				+/**
			
 
				+ * @module 加载所以文件
			
 
				+ */
			
 
				+(function() {
			
 
				+    /**
			
 
				+     * 获取当前文件的路径
			
 
				+     *
			
 
				+     * Returns: {String} 当前脚本文件路径
			
 
				+     */
			
 
				+    //动态加载css
			
 
				+    function dynamicLoadCss(url) {
			
 
				+        var head = document.getElementsByTagName('head')[0];
			
 
				+        var link = document.createElement('link');
			
 
				+        link.type = 'text/css';
			
 
				+        link.rel = 'stylesheet';
			
 
				+        link.href = url;
			
 
				+        head.appendChild(link);
			
 
				+    }
			
 
				+    var cssFiles = [
			
 
				+        "style/cssFile.css"
			
 
				+    ];
			
 
				+    var cssTags = new Array(cssFiles.length);
			
 
				+    for (var k = 0, len = cssTags.length; k < len; k++) {
			
 
				+        dynamicLoadCss(cssFiles[k]);
			
 
				+    }
			
 
				+    // 加载所有js文件
			
 
				+    var jsFiles = [
			
 
				+        // "http://www.jq22.com/jquery/jquery-1.10.2.js",
			
 
				+        "lib/jquery.min.js",
			
 
				+        "lib/echarts.js",
			
 
				+        "lib/getTime.js",
			
 
				+        "lib/createTip.js",
			
 
				+        "lib/createSpeed.js",
			
 
				+        "js/data.js",
			
 
				+        "js/bdMap.js",
			
 
				+        "js/index.js"
			
 
				+    ];
			
 
				+    var scriptTags = new Array(jsFiles.length);
			
 
				+    for (var i = 0, len = jsFiles.length; i < len; i++) {
			
 
				+        scriptTags[i] = "<script type='text/javascript' src='"+ jsFiles[i] + "' ></script>";
			
 
				+    }
			
 
				+    if (scriptTags.length > 0) {
			
 
				+        document.write(scriptTags.join(""));
			
 
				+    }
			
 
				+})();
			
--- a/gitee-datav/智慧运维/PetsDataView/style/cssFile.css
+++ b/gitee-datav/智慧运维/PetsDataView/style/cssFile.css
@@ -0,0 +1,373 @@
 
				+html,body{
			
 
				+    padding:0;
			
 
				+    margin: 0;
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+    font-family: 微软雅黑;
			
 
				+    font-size: 14px;
			
 
				+}
			
 
				+ul,li,img{
			
 
				+    padding:0;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+.BMap_cpyCtrl
			
 
				+{
			
 
				+    display:none;
			
 
				+}
			
 
				+.anchorBL{
			
 
				+    display:none;
			
 
				+}
			
 
				+
			
 
				+#mapContainer{
			
 
				+    width:100%;
			
 
				+    height:100%;
			
 
				+}
			
 
				+.nav-top{
			
 
				+    position: fixed;
			
 
				+    top:0;
			
 
				+    left: 0;
			
 
				+    height: 80px;
			
 
				+    width: 100%;
			
 
				+    background-color: rgba(3,21,24,0.7);
			
 
				+    text-align: center;
			
 
				+}
			
 
				+.nav-top-title{
			
 
				+    line-height: 80px;
			
 
				+    color: #ffffff;
			
 
				+    font-size: 24px;
			
 
				+    font-weight: 600;
			
 
				+
			
 
				+}
			
 
				+.nav-top-time{
			
 
				+    position: absolute;
			
 
				+    top:0;
			
 
				+    right: 10px;
			
 
				+    padding: 20px;
			
 
				+}
			
 
				+.nav-top-time span{
			
 
				+    display: block;
			
 
				+    color:#ffffff;
			
 
				+    line-height: 20px;
			
 
				+}
			
 
				+
			
 
				+.tip-container{
			
 
				+    background-color: rgba(22, 31, 38, 0.87);
			
 
				+
			
 
				+}
			
 
				+.tip-title{
			
 
				+    width: 100%;
			
 
				+    height: 48px;
			
 
				+    color:#ffffff;
			
 
				+    overflow: hidden;
			
 
				+    box-sizing: border-box;
			
 
				+    border-bottom: 1px solid #052025;
			
 
				+}
			
 
				+.tip-title span{
			
 
				+    line-height: 48px;
			
 
				+    vertical-align: middle;
			
 
				+    font-size: 16px;
			
 
				+    font-weight: 600;
			
 
				+}
			
 
				+.tip-title span img{
			
 
				+    width: 16px;
			
 
				+    height: 16px;
			
 
				+}
			
 
				+.tip-title span:nth-child(1){
			
 
				+    float: left;
			
 
				+    margin-left: 12px;
			
 
				+}
			
 
				+.tip-title span:nth-child(2){
			
 
				+    float: left;
			
 
				+    margin-left: 10px;
			
 
				+}
			
 
				+.tip-title span:nth-child(3){
			
 
				+    float: right;
			
 
				+    margin-right: 10px;
			
 
				+}
			
 
				+.tip-content{
			
 
				+    padding: 16px;
			
 
				+}
			
 
				+
			
 
				+.tip-content ul li {
			
 
				+    color:#ffffff;
			
 
				+    list-style: none;
			
 
				+    overflow: hidden;
			
 
				+    line-height: 30px;
			
 
				+}
			
 
				+
			
 
				+.zhzb-li-name{
			
 
				+    float: left;
			
 
				+    /*font-weight: 600;*/
			
 
				+}
			
 
				+.zhzb-li-num{
			
 
				+    float: right;
			
 
				+    color:#00CEFA;
			
 
				+    /*font-weight: 600;*/
			
 
				+}
			
 
				+.typeStyle{
			
 
				+    color:#1079A6;
			
 
				+    font-weight: 600;
			
 
				+}
			
 
				+.font-w{
			
 
				+    color: #ffffff!important;
			
 
				+}
			
 
				+.yj-span{
			
 
				+    display: block;
			
 
				+    width: 30px;
			
 
				+    float: right;
			
 
				+    text-align: right;
			
 
				+}
			
 
				+
			
 
				+.speed-container{
			
 
				+    width: 100%;
			
 
				+    box-sizing: border-box;
			
 
				+    border-bottom: 1px solid #052025;
			
 
				+    padding-bottom: 10px;
			
 
				+}
			
 
				+.speed-container .speed-title{
			
 
				+    overflow: hidden;
			
 
				+    line-height: 30px;
			
 
				+}
			
 
				+.speed-container .speed-title span{
			
 
				+    display: block;
			
 
				+    float: left;
			
 
				+    color: #ffffff;
			
 
				+    padding-right: 10px;
			
 
				+}
			
 
				+.speed-content{
			
 
				+    margin-top: 10px;
			
 
				+    width: 100%;
			
 
				+}
			
 
				+.speed-content ul{
			
 
				+    width: 100%;
			
 
				+}
			
 
				+.speed-content ul li{
			
 
				+    width: 100%;
			
 
				+    list-style: none;
			
 
				+    overflow: hidden;
			
 
				+    margin: 0;
			
 
				+}
			
 
				+.speed-content ul li span:nth-child(1){
			
 
				+    display: block;
			
 
				+    width: 30%;
			
 
				+    /*height: 20px;*/
			
 
				+    float: left;
			
 
				+    padding: 0;
			
 
				+    margin: 0;
			
 
				+    /*line-height: 20px;*/
			
 
				+}
			
 
				+.speed-content ul li span:nth-child(2){
			
 
				+    display: block;
			
 
				+    /*height: 20px;*/
			
 
				+    float: right;
			
 
				+    padding: 0;
			
 
				+    margin: 0;
			
 
				+    /*line-height: 20px;*/
			
 
				+}
			
 
				+.speed-line{
			
 
				+    width: 200px;
			
 
				+    background-color: #043037;
			
 
				+    width: 70%;
			
 
				+    height: 13px;
			
 
				+    margin-top: 8px!important;
			
 
				+    border-radius: 5px;
			
 
				+    position: relative;
			
 
				+}
			
 
				+.speed-num{
			
 
				+    /*width: 90%;*/
			
 
				+    display: block;
			
 
				+    height: 100%;
			
 
				+    border-radius: 5px;
			
 
				+}
			
 
				+
			
 
				+.numText{
			
 
				+    position: absolute;
			
 
				+    top: -9px;
			
 
				+    right: 4px;
			
 
				+    color: #ffffff;
			
 
				+    font-size: 12px;
			
 
				+}
			
 
				+
			
 
				+.legend-container{
			
 
				+    height: 48px;
			
 
				+    background-color: rgba(22, 31, 38, 0.87);
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+.legend-content{
			
 
				+    height: 100%;
			
 
				+
			
 
				+}
			
 
				+.legend-content:nth-child(1){
			
 
				+    float: left;
			
 
				+}
			
 
				+.legend-content:nth-child(2){
			
 
				+    float: right;
			
 
				+    font-size: 14px!important;
			
 
				+    overflow: hidden;
			
 
				+
			
 
				+}
			
 
				+.legend-content span{
			
 
				+    line-height: 48px;
			
 
				+    color: #FFFFFF;
			
 
				+    font-weight: 600;
			
 
				+    font-size: 16px;
			
 
				+
			
 
				+}
			
 
				+.legend-content span img{
			
 
				+    vertical-align: middle;
			
 
				+    margin-top: -4px;
			
 
				+    margin-left: 10px;
			
 
				+    margin-right: 10px;
			
 
				+}
			
 
				+
			
 
				+.legend-content:nth-child(2) span{
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    float: left;
			
 
				+    margin-right: 10px;
			
 
				+}
			
 
				+
			
 
				+.legend-content label{
			
 
				+    line-height: 48px;
			
 
				+    color: #FFFFFF;
			
 
				+    font-weight: 600;
			
 
				+    font-size: 16px;
			
 
				+}
			
 
				+
			
 
				+.legend-content:nth-child(2) input{
			
 
				+    float: left;
			
 
				+    display: block;
			
 
				+    margin-right: 10px;
			
 
				+}
			
 
				+
			
 
				+.red-legend{
			
 
				+    height: 8px;
			
 
				+    width: 30px;
			
 
				+    background-color: #FF3774;
			
 
				+    border-radius: 5px;
			
 
				+    margin-top: 20px;
			
 
				+}
			
 
				+.green-legend{
			
 
				+    height: 8px;
			
 
				+    width: 30px;
			
 
				+    background-color: #6AE89C;
			
 
				+    border-radius: 5px;
			
 
				+    margin-top: 20px;
			
 
				+}
			
 
				+
			
 
				+.tip-dropDown{
			
 
				+
			
 
				+}
			
 
				+.tip-dropDown:hover{
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+.info-container{
			
 
				+    width: 100%;
			
 
				+
			
 
				+}
			
 
				+.info-container-title{
			
 
				+    width: 100%;
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 10px;
			
 
				+}
			
 
				+.info-container-people{
			
 
				+    width: 100%;
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 10px;
			
 
				+}
			
 
				+.info-container-speed{
			
 
				+    width: 100%;
			
 
				+}
			
 
				+.info-container-speed-content{
			
 
				+    width: 204px;
			
 
				+    margin-left: 18px;
			
 
				+    background-color: #58618A;
			
 
				+    height: 14px;
			
 
				+    margin-bottom: 10px;
			
 
				+    border-radius: 5px;
			
 
				+}
			
 
				+.info-container-speed-content-inside-1{
			
 
				+    display: block;
			
 
				+    height: 100%;
			
 
				+    border-radius: 5px;
			
 
				+    background-color: #FF3774;
			
 
				+    width: 0%;
			
 
				+}
			
 
				+.info-container-speed-content-inside-2{
			
 
				+    display: block;
			
 
				+    height: 100%;
			
 
				+    border-radius: 5px;
			
 
				+    background-color: #6AE89C;
			
 
				+    width: 0%;
			
 
				+}
			
 
				+.info-container-speed-content-inside-1-num{
			
 
				+    position: absolute;
			
 
				+    top: 54px;
			
 
				+    left: 110px;
			
 
				+}
			
 
				+.info-container-speed-content-inside-2-num{
			
 
				+    position: absolute;
			
 
				+    top: 80px;
			
 
				+    left: 110px;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+#cityOpt {
			
 
				+    position: fixed;
			
 
				+    top: 138px;
			
 
				+    left: calc(20vw + 20px);
			
 
				+    display: none;
			
 
				+    background-color: rgba(22, 31, 38, 0.87);
			
 
				+    color: #fff;
			
 
				+    width: 500px;
			
 
				+}
			
 
				+#cityOpt .city-item li { list-style: none; line-height: 30px; }
			
 
				+#cityOpt .city-item li a{
			
 
				+    text-decoration: none;
			
 
				+    margin-left: 10px;
			
 
				+}
			
 
				+#cityOpt .city-item li a:first-child{
			
 
				+    color: #769ef9;
			
 
				+}
			
 
				+#cityOpt .city-item li a:hover {
			
 
				+    color: #6AE89C;
			
 
				+}
			
 
				+
			
 
				+#cityOpt .city-choose.city {
			
 
				+    color: #fff;
			
 
				+    font-weight: bold;
			
 
				+}
			
 
				+
			
 
				+#cityOpt .city-choose.county {
			
 
				+    color: #fff;
			
 
				+}
			
 
				+/* Tip 间距 */
			
 
				+#species,#search_pets {
			
 
				+    margin-top: 5px;
			
 
				+}
			
 
				+
			
 
				+#specie_pie {
			
 
				+    width: 300px;
			
 
				+    height: 300px;
			
 
				+}
			
 
				+
			
 
				+#search_pets {
			
 
				+    color: #fff;
			
 
				+}
			
 
				+
			
 
				+/* .pets-carousel-item {
			
 
				+    display: none;
			
 
				+} */
			
 
				+.pets-search-info {
			
 
				+    display: flex;
			
 
				+}
			
 
				+.pets-info {
			
 
				+    display: flex;
			
 
				+    flex-flow: column wrap;
			
 
				+    margin-left: 10px;
			
 
				+}
			
 
				+.pets-describe {
			
 
				+    margin-top: 10px;
			
 
				+    text-indent: 2em;
			
 
				+}
			
--- a/gitee-datav/智慧运维/PetsDataView/可视化监控管理平台.png
+++ b/gitee-datav/智慧运维/PetsDataView/可视化监控管理平台.png