zoie
/
Cold_Api


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图数据可视化</title>
<!--    https://osscold.baozhida.cn/-->
    <link rel="stylesheet" href="https://osscold.baozhida.cn/essjksh/css/index.css">
    <link rel="stylesheet" href="https://osscold.baozhida.cn/essjksh/fonts/icomoon.css">
    <script src="https://osscold.baozhida.cn/js/jquery.cookie.min.js"></script>
    <script src="https://osscold.baozhida.cn/js/jquery.min.js"></script>
    <script src="https://osscold.baozhida.cn/js/echarts.js"></script>
    <script src="https://osscold.baozhida.cn/essjksh/js/index.js"></script>
    <script src="https://osscold.baozhida.cn/essjksh/js/china.js"></script>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=f41c8fbdd908f420f6babe5ab38bf574&callback=init&plugin=AMap.GraspRoad"></script>

</head>

<body>
    <div class="viewport">
        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4 id="KF_Count" style="height: 1.7rem;margin-bottom: 0.0rem;margin-left: 0.8rem;">0</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            仓库端总数
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="KF_Warning_Count"  style="height: 1.7rem;margin-bottom: 0.0rem;margin-left: 0.8rem;">0</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            仓库报备数
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="YD_Count"  style="height: 1.7rem;margin-bottom: 0.0rem;margin-left: 0.8rem;">0</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            运输端总数
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="YD_Warning_Count"  style="height: 1.7rem;margin-bottom: 0.0rem;margin-left: 0.8rem;">0</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            运输报警数
                        </span>
                    </div>
                </div>
            </div>
            <!--仓库端分公司数据统计-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">仓库端分公司数据统计</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col" style="width: 100px">分公司名称</span>
                            <span class="col" style="width: 50px">终端总数</span>
                            <span class="col" style="width: 70px">报警设备数</span>
                            <span class="col" style="width: 70px">设备报警率</span>
                        </div>
                        <div class="marquee-view">
                            <div id="KF_list" class="marquee">

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--分公司仓库报警占比-->
            <div class="point panel">
                <div class="inner">
                    <h3>分公司仓库报警占比</h3>
                    <div class="chart">
                        <div class="pie" style="width: 24rem;"></div>
<!--                        <div class="data" style="  margin-top: 12.5rem;">-->
<!--&lt;!&ndash;                            <div class="item">&ndash;&gt;-->
<!--&lt;!&ndash;                                <h4>320,11</h4>&ndash;&gt;-->
<!--&lt;!&ndash;                                <span>&ndash;&gt;-->
<!--&lt;!&ndash;                                    <i class="icon-dot" style="color: #ed3f35"></i>&ndash;&gt;-->
<!--&lt;!&ndash;                                    点位总数&ndash;&gt;-->
<!--&lt;!&ndash;                                </span>&ndash;&gt;-->
<!--&lt;!&ndash;                            </div>&ndash;&gt;-->
<!--                            <div class="item">-->
<!--                                <h4 id="YD_KF_Warning_Count">418</h4>-->
<!--                                <span>-->
<!--                                    <i class="icon-dot" style="color: #eacf19"></i>-->
<!--                                    总报警次数-->
<!--                                </span>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    移动端实时地图
                </h3>
                <div class="chart">
                    <div class="geo" id="container"></div>
                </div>
            </div>
            <!-- 分公司报警率排名 -->
            <div class="users panel">
                <div class="inner">
                    <h3>分公司报警率排名</h3>
                    <div class="chart">
                        <div class="bar" style="width: 29.5rem;"></div>

                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 运输端数据统计  -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="t1" class="active">物流端</a>
                        <a href="javascript:;" data-key="t2">药店端</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data" style="margin-top: 0.0rem;">
                        <div class="item">
                            <h4 style="margin-bottom: 0.0rem;margin-left: 0.8rem;">0</h4>
                            <span>
                                <i class="icon-dot" style="color: #008cff;"></i>
                                设备总数
                            </span>
                        </div>
                        <div class="item">
                            <h4  style="margin-bottom: 0.0rem;margin-left: 0.8rem;">0</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                使用数量
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 每个时间段使用数量走势（物流曲线/药店曲线） -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>使用数量走势</h3>
                        <a href="javascript:;" class="active" data-type="Day">日</a>
                        <a href="javascript:;" data-type="Month">月</a>
                        <a href="javascript:;" data-type="Year">年</a>
                    </div>
                    <div class="chart"  onmouseover="f_onmouseover()" onmouseout = "f_onmoseout()" >
                        <div class="label">单位:次</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 物流端使用占比  药店端使用占比 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>物流端使用占比</h3>
                        <div class="chart">
                            <div class="pie" style="height: 6.8rem"></div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>药店端使用占比</h3>

                        <div class="chart" style="padding-top: 0px;">
                            <div class="pie" style="height: 6.8rem"></div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 仓库端分公司数据统计 -->
            <div class="monitor panel" style="height: 11.8rem;">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">运输端分公司数据统计</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col" style="width: 100px">分公司名称</span>
                            <span class="col" style="width: 50px">终端总数</span>
                            <span class="col" style="width: 70px">报警设备数</span>
                            <span class="col" style="width: 70px">设备报警率</span>
                        </div>
                        <div class="marquee-view">
                            <div id="YD_list" class="marquee">

                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>
    </div>
</body>
<!--<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
<!--<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>-->


<script>
    // 页面 加载完成后执行
    window.onload = function () {
        console.log("页面 加载完成后执行")
        DataScreen_Data()
        Amap_inte()
        DataScreen_Map()
        // 开始更新
        setInterval(function(){
            //要执行的代码
            DataScreen_Map()
        },10000);
        // 开始更新
        setInterval(function(){
            //要执行的代码
            DataScreen_Data()
        },11000);
    }

</script>
<!-- 数据-->
<script>
    // 获取数据
    function DataScreen_Data() {
        $.ajax({
            type: 'POST',
            url: 'DataScreen_Data',//发送请求
            data: {

                // Admin_uuid: Admin_uuid,
                // T_sn: $("#D_T_sn").val(),
                // Name: $("#D_Name").val(),
            },
            success: function (result) {

                console.log(result)
                if (result.Code != 200) {
                    layer.msg(result.Msg);
                    return
                }

                DataScreen_Data_Handle(result.Data)

            }
        });
    }
    // 获取数据
    function DataScreen_Data_Handle(Data) {

        $("#KF_Count").html(Data.KF_Count)
        $("#YD_Count").html(Data.YD_Count)
        $("#KF_Warning_Count").html(Data.KF_Warning_Count)
        $("#YD_Warning_Count").html(Data.YD_Warning_Count)
        $("#YD_KF_Warning_Count").html(Data.YD_Warning_Count+Data.KF_Warning_Count)

        // 仓库端分公司数据统计  - 列表
        $('#KF_list').html("")
        for (let i = 0; i < Data.KF_list.length; i++) {
            $('#KF_list').append("" +
                "<div class=\"row\">\n" +
                "    <span class=\"col\"  style=\"width: 100px\" >"+Data.KF_list[i].Name+"</span>\n" +
                "    <span class=\"col\"  style=\"width: 50px;text-align: center\" >"+Data.KF_list[i].Device_Count+"</span>\n" +
                "    <span class=\"col\"  style=\"width: 60px;text-align: center\" >"+Data.KF_list[i].Warning_Count+"</span>\n" +
                "    <span class=\"col\"  style=\"width: 60px;text-align: center\" >"+Data.KF_list[i].Ratio+"%</span>\n" +
                "    <span class=\"icon-dot\"></span>\n" +
                "</div>")
        }
        //运输端分公司数据统计   - 列表
        $('#YD_list').html("")
        for (let i = 0; i < Data.YD_list.length; i++) {
            $('#YD_list').append("" +
                "<div class=\"row\">\n" +
                "    <span class=\"col\"  style=\"width: 100px\" >"+Data.YD_list[i].Name+"</span>\n" +
                "    <span class=\"col\"  style=\"width: 50px;text-align: center\" >"+Data.YD_list[i].Device_Count+"</span>\n" +
                "    <span class=\"col\"  style=\"width: 60px;text-align: center\" >"+Data.YD_list[i].Warning_Count+"</span>\n" +
                "    <span class=\"col\"  style=\"width: 60px;text-align: center\" >"+Data.YD_list[i].Ratio+"%</span>\n" +
                "    <span class=\"icon-dot\"></span>\n" +
                "</div>")
        }
        // 仓库报警占比 - 饼状图
        KF_pie(Data.KF_list)


        // 报警率排名
        Warning_KF_YD_list(Data.Warning_KF_YD_list)


        // 每个时间段使用数量走势（物流曲线/药店曲线）
        T_l_p_Line(Data)

        // 各公司物流端使用次数占比 - 饼状图
        YD_1_pie(Data.YD_pie_1)

        // 各公司药店端使用次数占比 - 饼状图
        YD_2_pie(Data.YD_pie_2)

        YD_1_2(Data.YD_1_2)
    }
    function dateChangeFormat(format, date) {
        date = new Date(date);
        const dataItem = {
            'Y+': date.getFullYear().toString(),
            'm+': (date.getMonth() + 1).toString(),
            'd+': date.getDate().toString(),
            'H+': date.getHours().toString(),
            'M+': date.getMinutes().toString(),
            'S+': date.getSeconds().toString(),
        };
        Object.keys(dataItem).forEach((item) => {
            const ret = new RegExp(`(${item})`).exec(format);
            if (ret) {
                format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
            }
        });
        return format;
    }
    // 仓库报警占比 - 饼状图
    function KF_pie(Data) {
        datax = []
        var myechart = echarts.init($('.pie')[0]);
        for (let i = 0; i < Data.length; i++) {
            datax.push({ value: Data[i].Ratio, name: Data[i].Name })
        }

        console.log("datax:",datax)
        option = {
            // 控制提示
            tooltip: {
                // 非轴图形，使用item的意思是放到数据对应图形上触发提示
                trigger: 'item',
                // 格式化提示内容：
                // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
                formatter: "{b} : {c} ({d}%)"
            },
            // 控制图表
            series: [
                {
                    // 图表名称
                    name: '地区',
                    // 图表类型
                    type: 'pie',
                    // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                    // 百分比基于  图表DOM容器的半径
                    radius: ['10%', '70%'],
                    // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                    center: ['50%', '50%'],
                    // 半径模式，另外一种是 area 面积模式
                    roseType: 'radius',
                    // 数据集 value 数据的值 name 数据的名称
                    data: datax,
                    //文字调整
                    label: {
                        fontSize: 10
                    },
                    //引导线
                    labelLine: {
                        length: 8,
                        length2: 10
                    }
                }
            ],
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
        };
        myechart.setOption(option);
    }

    // 报警率排名
    function Warning_KF_YD_list(Data) {
        data_list = []
        for (let i = 0; i < Data.length; i++) {
            data_list.push(  {Name: Data[i].Name, Ratio: Data[i].Ratio})

        }

        data_list.sort(function(a, b) {
            // boolean false == 0; true == 1
            return a.Ratio < b.Ratio;
        });
        console.log("Warning_KF_YD_list  data_list:",data_list);


        data_x = []
        data_y = []
        for (let i = 0; i < data_list.length; i++) {
            // 限制 数量
            if(i > 4){
                break
            }
            data_x.push(data_list[i].Name)
            data_y.push(data_list[i].Ratio)

        }

        // 中间省略的数据  准备三项
        var item = {
            name: '',
            value: 1200,
            // 柱子颜色
            itemStyle: {
                color: '#254065'
            },
            // 鼠标经过柱子颜色
            emphasis: {
                itemStyle: {
                    color: '#254065'
                }
            },
            // 工具提示隐藏
            tooltip: {
                extraCssText: 'opacity:0'
            }
        };
        option = {
            // 工具提示
            tooltip: {
                // 触发类型  经过轴触发axis  经过轴触发item
                trigger: 'item',
                // 轴触发提示才有效
                axisPointer: {
                    // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
                    type: 'shadow'
                }
            },
            // 图表边界控制
            grid: {
                // 距离 上右下左 的距离
                left: '0',
                right: '0%',
                bottom: '3%',
                top: '5%',
                // 大小是否包含文本【类似于boxsizing】
                containLabel: true,
                //显示边框
                show: true,
                //边框颜色
                borderColor: 'rgba(0, 240, 255, 0.3)'
            },
            // 控制x轴
            xAxis: [
                {
                    // 使用类目，必须有data属性
                    type: 'category',
                    // 使用 data 中的数据设为刻度文字
                    data: data_x,//['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                    // 刻度设置
                    axisTick: {
                        // true意思：图形在刻度中间
                        // false意思：图形在刻度之间
                        alignWithLabel: false,
                        show: false
                    },
                    //文字
                    axisLabel: {
                        color: '#4c9bfd'
                    }
                }
            ],
            // 控制y轴
            yAxis: [
                {
                    // 使用数据的值设为刻度文字
                    type: 'value',
                    axisTick: {
                        // true意思：图形在刻度中间
                        // false意思：图形在刻度之间
                        alignWithLabel: false,
                        show: false
                    },
                    //文字
                    axisLabel: {
                        color: '#4c9bfd'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 240, 255, 0.3)'
                        }
                    },
                }
            ],
            // 控制x轴
            series: [

                {
                    // series配置
                    // 颜色
                    itemStyle: {
                        // 提供的工具函数生成渐变颜色
                        color: new echarts.graphic.LinearGradient(
                            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#00fffb' }, // 0 起始颜色
                                { offset: 1, color: '#0061ce' }  // 1 结束颜色
                            ]
                        )
                    },
                    // 图表数据名称
                    name: '用户统计',
                    // 图表类型
                    type: 'bar',
                    // 柱子宽度
                    barWidth: '60%',
                    // 数据
                    data: data_y ,//[2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
                }
            ]
        };
        var myechart = echarts.init($('.users .bar')[0]);
        myechart.setOption(option);
    }

    // 每个时间段使用数量走势（物流曲线/药店曲线）
    function T_l_p_Line(Data) {


        var option = {
            //鼠标提示工具
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                // 类目类型
                type: 'category',
                // x轴刻度文字
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisTick: {
                    show: false//去除刻度线
                },
                axisLabel: {
                    color: '#4c9bfd'//文本颜色
                },
                axisLine: {
                    show: false//去除轴线
                },
                boundaryGap: false//去除轴内间距
            },
            yAxis: {
                // 数据作为刻度文字
                type: 'value',
                axisTick: {
                    show: false//去除刻度线
                },
                axisLabel: {
                    color: '#4c9bfd'//文本颜色
                },
                axisLine: {
                    show: false//去除轴线
                },
                boundaryGap: false//去除轴内间距
            },
            //图例组件
            legend: {
                textStyle: {
                    color: '#4c9bfd' // 图例文字颜色

                },
                right: '10%'//距离右边10%
            },
            // 设置网格样式
            grid: {
                show: true,// 显示边框
                top: '20%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                borderColor: '#012f4a',// 边框颜色
                containLabel: true // 包含刻度文字在内
            },
            series: [{
                name: '物流端',
                // 数据
                data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                // 图表类型
                type: 'line',
                // 圆滑连接
                smooth: true,
                itemStyle: {
                    color: '#00f2f1'  // 线颜色
                }
            },
                {
                    name: '药店端',
                    // 数据
                    data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
                    // 图表类型
                    type: 'line',
                    // 圆滑连接
                    smooth: true,
                    itemStyle: {
                        color: '#c88bff'  // 线颜色
                    }
                }]
        };
        //将值设置到 图表中
        option.series[0].data = Data.Sales_Day_z_list_1;
        option.series[1].data = Data.Sales_Day_z_list_2;
        option.xAxis.data = []
        for (var i=0; i<24;i++){
            option.xAxis.data.push(i+"h")
        }
        var myechart = echarts.init($('.line')[0]);
        myechart.setOption(option);


        $('.sales ').on('click', '.caption a', function () {
            $(this).addClass('active').siblings('a').removeClass('active');
            //option series   data
            //获取自定义属性值
            var key = $(this).attr('data-type');
            //取出对应的值

            switch (key) {
                case "Day": //日
                    //将值设置到 图表中
                    option.series[0].data = Data.Sales_Day_z_list_1;
                    option.series[1].data = Data.Sales_Day_z_list_2;
                    option.xAxis.data = []
                    for (var i=0; i<24;i++){
                        option.xAxis.data.push(i+"h")
                    }
                    break
                case "Month": //月
                    //将值设置到 图表中
                    option.series[0].data = Data.Sales_Month_z_list_1;
                    option.series[1].data = Data.Sales_Month_z_list_2;
                    option.xAxis.data = []
                    for (var i=1; i < Data.Sales_Month_z_list_1.length+1;i++){
                        option.xAxis.data.push(i)
                    }
                    break
                case "Year": //年
                    //将值设置到 图表中
                    option.series[0].data = Data.Sales_Year_z_list_1;
                    option.series[1].data = Data.Sales_Year_z_list_2;
                    option.xAxis.data = []
                    for (var i=1; i<13;i++){
                        option.xAxis.data.push(i)
                    }
                    break
            }

            //再次调用才能在页面显示
            myechart.setOption(option);
        });


    }

    function f_onmouseover() {
        console.log("f_onmouseover")
        index_timer = false;
    }
    function f_onmoseout() {
        console.log("onmoseout")
        index_timer = true;
    }


    //定时器
    var index = 0;
    var index_timer = true;
    var timer = setInterval(function () {
        if(index_timer){
            index++;
            if (index > 2) {
                index = 0;
            };
            $('.sales .caption a').eq(index).click();
        }

    }, 3000);


    // 各公司物流端使用次数占比 - 饼状图
    function YD_1_pie(Data) {
        if(Data == null) return
        datax = []
        var myechart = echarts.init($('.pie')[1]);
        for (let i = 0; i < Data.length; i++) {
            datax.push({ value: Data[i].Ratio, name: Data[i].Name })
        }

        console.log("YD_1_pie  datax:",datax)
        option = {
            // 控制提示
            tooltip: {
                // 非轴图形，使用item的意思是放到数据对应图形上触发提示
                trigger: 'item',
                // 格式化提示内容：
                // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
                formatter: "{b} : {c} ({d}%)"
            },
            // 控制图表
            series: [
                {

                    // 图表类型
                    type: 'pie',
                    // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                    // 百分比基于  图表DOM容器的半径
                    radius: ['10%', '70%'],
                    // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                    center: ['50%', '50%'],
                    // 半径模式，另外一种是 area 面积模式
                    roseType: 'radius',

                    itemStyle: {
                        borderRadius: 5
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },

                    // 数据集 value 数据的值 name 数据的名称
                    data: datax,
                }
            ],
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
        };
        myechart.setOption(option);
    }

    // 各公司药店端使用次数占比 - 饼状图
    function YD_2_pie(Data) {
        datax = []
        var myechart = echarts.init($('.pie')[2]);
        for (let i = 0; i < Data.length; i++) {
            datax.push({ value: Data[i].Ratio, name: Data[i].Name })
        }

        console.log("datax:",datax)
        option = {
            // 控制提示
            tooltip: {
                // 非轴图形，使用item的意思是放到数据对应图形上触发提示
                trigger: 'item',
                // 格式化提示内容：
                // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
                formatter: "{b} : {c} ({d}%)"
            },
            // 控制图表
            series: [
                {

                    // 图表类型
                    type: 'pie',
                    // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                    // 百分比基于  图表DOM容器的半径
                    radius: ['10%', '70%'],
                    // 图表中心位置 left 50%  top 50% 距离图表DOM容器
                    center: ['50%', '50%'],
                    // 半径模式，另外一种是 area 面积模式
                    roseType: 'radius',

                    itemStyle: {
                        borderRadius: 5
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },

                    // 数据集 value 数据的值 name 数据的名称
                    data: datax,
                }
            ],
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
        };
        myechart.setOption(option);
    }

    // 运输端数据统计
    var setInterval_x
    function YD_1_2(Data) {
        console.log("YD_1_2:",Data)
        var data = {
            t1: { orders: Data.Device_YD_1_Count , amount: Data.Device_YD_1_Count_use },
            t2: { orders: Data.Device_YD_2_Count , amount: Data.Device_YD_2_Count_use }
        }
        //停止 t 定时器
        if(setInterval_x != undefined){
            clearTimeout(setInterval_x)
        }

        $('.order .item h4:eq(0)').text(Data.Device_YD_1_Count);
        $('.order .item h4:eq(1)').text(Data.Device_YD_1_Count_use);
        //点击事件
        $('.order').on('click', '.filter a', function () {
            //点击之后加类名
            $(this).addClass('active').siblings().removeClass('active');
            // 先获取点击a的 data-key自定义属性
            var key = $(this).attr('data-key');
            //获取自定义属性
            // data{}==>data.shuxing data['shuxing]
            key = data[key];//
            $('.order .item h4:eq(0)').text(key.orders);
            $('.order .item h4:eq(1)').text(key.amount);
        });
        //定时器
        var index = 0;
        var aclick = $('.order a');
        setInterval_x = setInterval(function () {
            index++;
            if (index > 1) {
                index = 0;
            }
            //每san秒调用点击事件
            aclick.eq(index).click();
        }, 3000);
    }
</script>

<!--地图-->
<script>
    var map
    var Map_list = new Map();
    function Amap_inte() {
        map = new AMap.Map('container', {
            resizeEnable: true,////是否监控地图容器尺寸变化
            center: [104.101765,41.561402],
            zoom: 4,
            features: ['bg', 'road', 'building', 'point'], // 设置地图显示要素（Features）  区域面（bg）  道路（road）  建筑物（building）  标注（point）
            // showLabel: false //不显示地图文字标记
        });

        // 样式
        var styleName = "amap://styles/normal";
        map.setMapStyle(styleName);

        //map_list.get("sn1").T_Marker.setPosition([116.474203,39.970199])
        //map_list.get("sn1").T_info.setContent(info_content("2222"))
    }

    // 获取数据
    function DataScreen_Map() {
        $.ajax({
            type: 'POST',
            url: 'DataScreen_Map',//发送请求
            data: {

            },
            success: function (result) {

                console.log(result)
                if (result.Code != 200) {
                    layer.msg(result.Msg);
                    return
                }
                var map_sn = new Map()
                for (let i = 0; i < result.Data.length; i++) {
                    if(result.Data[i].T_Site == undefined){
                        console.log("undefined 跳过 ",result.Data[i].T_sn,result.Data[i].T_Site)
                        continue
                    }
                    if(result.Data[i].T_Site.length < 7){
                        console.log("T_Site 跳过 ",result.Data[i].T_sn,result.Data[i].T_Site)
                        continue
                    }
                    if(result.Data[i].T_id != 1){
                        console.log("T_id 跳过 ",result.Data[i].T_sn)
                        continue
                    }
                    if(map_sn.has(result.Data[i].T_sn)){
                        console.log("map_sn 跳过 ",result.Data[i].T_sn)
                        continue
                    }
                    map_sn.set(result.Data[i].T_sn,"1")
                    T_site_split = result.Data[i].T_Site.split(",")
                    // 地理经纬度坐标
                    var lon = parseFloat(T_site_split[1]);
                    var lat = parseFloat(T_site_split[0]);

                    waring = 1
                    if(result.Data[i].T_t <  result.Data[i].T_Tlower || result.Data[i].T_rh < result.Data[i].T_RHlower){
                        waring = 2
                    }
                    if(result.Data[i].T_t >  result.Data[i].T_Tupper || result.Data[i].T_rh > result.Data[i].T_RHupper){
                        waring = 2
                    }

                    P_ = {
                        T_sn:result.Data[i].T_sn,
                        T_name:result.Data[i].T_name,
                        T_t:result.Data[i].T_t,
                        T_rh:result.Data[i].T_rh,
                        T_waring:waring,
                        T_Tlower:result.Data[i].T_Tlower,
                        T_Tupper:result.Data[i].T_Tupper,
                        T_RHlower:result.Data[i].T_RHlower,
                        T_RHupper:result.Data[i].T_RHupper,
                        T_time:result.Data[i].T_time,
                        T_l_p:result.Data[i].T_l_p,
                        T_Marker: {},
                        T_info:{},
                        T_Position:[lon,lat],
                        T_Dattery:result.Data[i].T_Dattery,
                    }
                    Hand_dian(P_)

                }


            }
        });
    }

    //  获取点  轨迹
    function get_DeviceSensor_data(T_sn) {

        // 今天
        var myDate = new Date();
        y = myDate.getFullYear();        //获取当前年份(2位)
        m = myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
        d = myDate.getDate();        //获取当前日(1-31)
        console.log(y+"-"+m+"-"+d)

        Time_start = y+"-"+m+"-"+d + " 00:00:00"
        Time_end = y+"-"+m+"-"+d + " 23:59:59"


        $.ajax({
            type: 'POST',
            url: 'Device_Sensor_Data',//发送请求
            data: {

                Time_start:Time_start,
                Time_end:Time_end,
                T_sn: T_sn,
                T_id: 1,
                page: 0,
                page_z: 9000,
            },
            success: function (result) {
                console.log(result)
                if (result.Code == 200) {

                    T_fhand(result.Data.DeviceSensor_data)

                } else {

                }
            }
        });
        return false
    }
    // 轨迹
    list_marker = []  // 条纹
    var marker_line  // 点
    var startMarker_line  // 开始
    function T_fhand(data) {
        var lineArr = [
            // ['75.757904', '38.118117'],
            // ['117.375719', '24.598057']
        ];
        if(!data) {
            return
        }
        for (let i = 0; i < data.length; i++) {
            // 026.5610665,106.6644807

            if(data[i].T_site.length < 5){
                continue;
            }
            T_site_split = data[i].T_site.split(",")
            // 地理经纬度坐标
            var lon = parseFloat(T_site_split[1]);
            var lat = parseFloat(T_site_split[0]);

            // console.log(data,lon,lat)
            lineArr.unshift(new AMap.LngLat(lon,lat))  //unshift  push


        }
        console.log("lineArr：",lineArr)
        // 清楚所有
        map.remove(list_marker);
        // 坐标转换
        AMap.convertFrom(lineArr, 'gps', function (status, result) {
            if (result.info === 'ok') {
                var path2 = result.locations;
                console.log("path2:",path2)

                ///   -------------  开始点
                // 创建一个 Icon
                var startIcon = new AMap.Icon({
                    // 图标尺寸
                    size: new AMap.Size(25, 34),
                    // 图标的取图地址
                    image: 'https://osscold.baozhida.cn/images/dir-marker.png',
                    // 图标所用图片大小
                    imageSize: new AMap.Size(135, 40),
                    // 图标取图偏移量
                    imageOffset: new AMap.Pixel(-9, -3)
                });
                // 创建一个 Icon
                var dianIcon = new AMap.Icon({
                    // 图标的取图地址
                    image: 'https://osscold.baozhida.cn/images/poi-marker-default.png',
                    size: new AMap.Size(22, 28),  //图标所处区域大小
                    imageSize: new AMap.Size(22,28) //图标大小
                });
                // 将 icon 传入 marker
                startMarker_line = new AMap.Marker({
                    position: new AMap.LngLat(path2[0].lng,path2[0].lat),
                    icon: startIcon,
                    map: map,
                    offset: new AMap.Pixel(-13, -30)
                });
                AMap.event.addListener(startMarker_line, 'click', function () {
                    //创建信息窗口
                    infoWindow = new AMap.InfoWindow({
                        isCustom: true,  //使用自定义窗体
                        content: info_content_list(data[data.length - 1]),
                        offset: new AMap.Pixel(0, -30)
                    });
                    //打开信息窗口
                    infoWindow.open(map, [path2[0].lng,path2[0].lat]); //后面的参数指的是经纬度，在此显示窗口
                });
                list_marker.push(startMarker_line)
                //  ------线条

                // 所有 标记点  信息
                for (let ix = 0; ix < path2.length; ix++) {
                    if(ix == 0 || ix == path2.length - 1){
                        continue
                    }
                    var marker_line = new AMap.Marker({
                        position: new AMap.LngLat(path2[ix].lng,path2[ix].lat),
                        icon: dianIcon,
                        map: map,
                    });

                    ddid = data.length - ix - 1  // -
                    style_s = "#ffffff"
                    if(data[ddid].T_t <  data[ddid].T_Tlower || data[ddid].T_rh < data[ddid].T_RHlower){
                        style_s = "#ff7070"
                    }
                    if(data[ddid].T_t >  data[ddid].T_Tupper || data[ddid].T_rh > data[ddid].T_RHupper){
                        style_s = "#ff7070"
                    }

                    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                    // marker.setLabel({
                    //     offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
                    //     content: "<spen style='background: transparent;'>"+ddid+"</spen>", //设置文本标注内容
                    //     direction: 'center' //设置文本标注方位
                    // });
                    AMap.event.addListener(marker_line, 'click', function () {
                        console.log("ix:",ix)
                        ddid = data.length - ix - 1
                        //创建信息窗口
                        infoWindow = new AMap.InfoWindow({
                            isCustom: true,  //使用自定义窗体
                            content: info_content_list(data[ddid]),
                            offset: new AMap.Pixel(0, -30)
                        });
                        //打开信息窗口
                        infoWindow.open(map, [path2[ix].lng,path2[ix].lat]); //后面的参数指的是经纬度，在此显示窗口
                    });

                    list_marker.push(marker_line)


                }

                // 条纹
                polyline1 = new AMap.Polyline({
                    path:path2,
                    strokeWeight:8,
                    strokeOpacity:0.8,
                    strokeColor:'#9991ea',
                    showDir:true,
                    map: map,
                });
                list_marker.push(polyline1)
                map.setFitView(null, false, [150, 60, 100, 60]);

            }
        });


    }


    // 处理 标点
    function Hand_dian(P_){
        if(Map_list == undefined){
            Add_dian(P_)
            return
        }
        if(Map_list.get(P_.T_sn) == undefined){
            Add_dian(P_)
            return;
        }
        M_T_sn = Map_list.get(P_.T_sn)
        P_.T_Marker = M_T_sn.T_Marker
        P_.T_info = M_T_sn.T_info
        PU_convertFrom(P_)
    }

    // 创建一个点
    function Add_dian(P_) {
        // 添加
        // 将 icon 传入 marker
        var Marker_ = new AMap.Marker({
            position: [0,0],
            icon: Icon_1_1,
            offset: new AMap.Pixel(0, 0)
        });
        infoW_ = new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体
            content: info_content(P_),
            offset: new AMap.Pixel(20, 0)
        });

        Add_convertFrom(P_)
        map.add(Marker_);
        P_.T_Marker = Marker_
        P_.T_info = infoW_
        Map_list.set(P_.T_sn, P_)
        console.log("添加 ",P_.T_sn)
    }

    // 坐标转换
    function Add_convertFrom(P_){
        console.log("Add_convertFrom:",P_)
        AMap.convertFrom(P_.T_Position, 'gps', function (status, result) {
            if (result.info === 'ok') {
                var resLnglat = result.locations[0];
                console.log(resLnglat)
                P_.T_Marker.setPosition([resLnglat.lng,resLnglat.lat])

                f_Icon(P_) // 判断 图标

                AMap.event.addListener(P_.T_Marker, 'click', function () {
                    console.log("click'",P_.T_sn)

                    get_DeviceSensor_data(P_.T_sn)
                    //打开信息窗口
                    P_.T_info.open(map, [resLnglat.lng,resLnglat.lat]); //后面的参数指的是经纬度，在此显示窗口
                });

            }
            map.setFitView(null, false, [150, 60, 100, 60]);
        });
    }
    // 坐标转换
    function PU_convertFrom(P_){
        AMap.convertFrom(P_.T_Position, 'gps', function (status, result) {
            if (result.info === 'ok') {
                var resLnglat = result.locations[0];
                console.log(resLnglat)
                P_.T_Marker.setPosition([resLnglat.lng,resLnglat.lat])


                f_Icon(P_) // 判断 图标
                P_.T_info.setContent(info_content(P_))
                P_.T_info.setPosition([resLnglat.lng,resLnglat.lat])

            }
        });
    }
    // 判断 图标
    function f_Icon(P_) {

        if(P_.T_l_p == 1){
            if(f_Icon.T_waring == 1){
                P_.T_Marker.setIcon( Icon_1_1 )
            }else if(P_.T_waring == 2){
                P_.T_Marker.setIcon(Icon_1_2)
            }
        }else if(P_.T_l_p == 2) {
            if(P_.T_waring == 1){
                P_.T_Marker.setIcon(Icon_2_1)
            }else if(P_.T_waring == 2){
                P_.T_Marker.setIcon(Icon_2_2)
            }
        }
    }
    // 消息串口模板
    function info_content_list(P_) {
        return "" +
            "<div style='height: 3.5rem;padding: 5px;background-color: #478EE6;opacity:0.8;border-radius:5px;box-shadow: 0px 0px 5px #62adff;border: 1px solid #006ad0;padding: 2px;float: contour;'>" +
            "<div style='margin-left: 4px;font-size: 15px;color: #ffffff;text-align: center;height: 1rem;'>"+P_.T_name+"</div>"+
            "<div style='margin-left: 4px;font-size: 12px;color: #ffffff'> <span style='width: 65px;display: inline-block;'>温度："+P_.T_t+"</span> <span style='width: 65px;display: inline-block;' > 湿度："+P_.T_rh+"</span></div>"+
            "<div style='margin: 0px 4px;font-size: 14px;color: #ffffff'>"+dateChangeFormat('YYYY-mm-dd HH:MM:SS', P_.T_time)+"</div>" +
            "</div>"
    }
    // 消息串口模板
    function info_content(P_) {
        style_s = "正常"
        if(P_.T_waring == 1){
            style_s = "正常"
        }else if(P_.T_waring == 2){
            style_s = "异常"
        }
        return "" +
            "<div style='height: 83px;padding: 5px;background-color: #478EE6;opacity:0.8;border-radius:5px;box-shadow: 0px 0px 5px #62adff;border: 1px solid #006ad0;padding: 2px;float: contour;'>" +
            "<div style='margin-left: 4px;font-size: 15px;color: #ffffff;text-align: center;height: 1rem;'>"+P_.T_name+"</div>"+
            "<div style='margin-left: 4px;font-size: 12px;color: #ffffff'> <span style='width: 65px;display: inline-block;'>温度："+P_.T_t+"</span> <span style='width: 65px;display: inline-block;' > 湿度："+P_.T_rh+"</span></div>"+
            "<div style='margin-left: 4px;font-size: 12px;color: #ffffff'><span style='width: 65px;display: inline-block;'>状态："+style_s+"</span> <span style='width: 65px;display: inline-block;' > 电量："+P_.T_Dattery+"%</span></div>"+
            "<div style='margin: 0px 4px;font-size: 14px;color: #ffffff'>"+dateChangeFormat('YYYY-mm-dd HH:MM:SS', P_.T_time)+"</div>" +
            "</div>"
    }
    // 创建一个 Icon
    var Icon_1_1 = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(60, 60),
        // 图标的取图地址
        image: 'https://osscold.baozhida.cn/images/救护车.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(40, 40),
        // 图标取图偏移量
        //imageOffset: new AMap.Pixel(-9, -3)
    });
    var Icon_1_2 = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(60, 60),
        // 图标的取图地址
        image: 'https://osscold.baozhida.cn/images/救护车1.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(40, 40),
        // 图标取图偏移量
        //imageOffset: new AMap.Pixel(-9, -3)
    });
    var Icon_2_1 = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(60, 60),
        // 图标的取图地址
        image: 'https://osscold.baozhida.cn/images/药箱.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(40, 40),
        // 图标取图偏移量
        //imageOffset: new AMap.Pixel(-9, -3)
    });
    var Icon_2_2 = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(60, 60),
        // 图标的取图地址
        image: 'https://osscold.baozhida.cn/images/药箱1.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(40, 40),
        // 图标取图偏移量
        //imageOffset: new AMap.Pixel(-9, -3)
    });
</script>
<style>

    .amap-logo {
        right: 0 !important;
        left: auto !important;
        display: none !important;
    }

    .amap-copyright {
        right: 70px !important;
        left: auto !important;
        opacity:0 !important;
    }
</style>
</html>