物聯網--畢設中的問題解決

時間 2019-11-15

標籤聯網畢設問題解決简体版

原文原文鏈接

1、整體概述 javascript

2、硬件系統php

傳感器模塊調試

編譯環境：css

C編譯器-IAR Embedded Workbench 

帶有C/C++編譯器和調試器的集成開發環境(IDE)、實時操做系統和中間件、開發套件、硬件仿真器以及狀態機建模工具。


------------------------------------------------------------------------------------------

新建工做空間html

在一個工做空間下，能夠包含多個工程，每一個工程能夠單獨配置與編譯、調試、下載等，十分適合工業化需求與系統管理。操做以下：File\New\Workspace,點擊保存按鈕，設置文件名後保存。java

一、先建立一個工做區(Workspace)python

二、建立一個工程並將建立的工程添加到工做區選擇Project->Create New Project。彈出Create New Project對話框，可讓用戶按照模板建立新工程。jquery

單片機中的串口是什麼linux

最通俗的解釋:一種通信接口，用來傳輸一些數據。

硬件特性web

一、主流單片機包括CPU、4KB容量的RAM、128 KB容量的ROM、 
2個16位定時/計數器、4個8位並行口、全雙工串口行口、ADC/DAC、SPI、I2C、ISP、IAP。

RAM（random access memory）即隨機存儲內存，這種存儲器在斷電時將丟失其存儲內容，故主要用於存儲短期使用的程序。
ROM（Read-Only Memory）即只讀內存，是一種只能讀出事先所存數據的固態半導體存儲器。


2、系統結構簡單，使用方便，實現模塊化；

三、單片機可靠性高，可工做到10^6 ~10^7小時無端障；

4、處理功能強，速度快。

5、低電壓，低功耗，便於生產便攜式產品

6、控制功能強

七、環境適應能力強

軟件的使用：

一、Proteus的簡介ajax

EDA工具（仿真軟件）

二、Keil C51的簡介

溫溼度傳感器DHT11

DHT11用的是單總線協議，一次傳送40位的數據。注意了，看到這一句話，也就是說咱們每次讀取DHT11的數據時，都要一次性讀取40次，也就是讀取40位。
而且數據前16位是與溼度相關的，中間16位是與溫度相關的，最後八位是用來校驗的，當咱們校驗成功後，證實這一次的溫溼度結果正確的，咱們單片機就可
以使用這個溫溼度值；若是校驗不經過，那麼就表明咱們此次讀取出來的溫溼度值，是錯誤的（也許是咱們的時序錯誤了，也許是傳感器的問題），咱們不進
行採樣。

單片機A/D轉換，

A/D轉換器是用來經過必定的電路將模擬量轉變爲數字量。模擬量能夠是電壓、電流等電信號，也能夠是壓力、溫度、溼度、位移、聲音等非電信號。
但在A/D轉換前，輸入到A/D轉換器的輸入信號必須經各類傳感器把各類物理量轉換成電壓信號。

單片機怎麼和傳感器通訊鏈接

選擇器材STM3二、溫溼度傳感器、PM2.5傳感器、分貝傳感器、GPRS模塊、LORA模塊

選擇開發IAR軟件，經過ST-Link和單片機鏈接下載

單片機和lora模塊

單片機和GPRS模塊

PM2.5檢測 -- PMS7003 開發程序

PM2.5檢測 -- PMS7003 串口測試

基於GPRS方式鏈接OneNET(SIM900A)

物聯網：GPRS和NB-IOT

調試：將USB轉TTL串口與SIM模塊鏈接

SIM800C通信模塊調試(一）用這個案例鏈接，而後用OneNet的案例調試

GPRS： 視頻講解
1，是GSM的一種移動數據業務，是2G移動通訊的數據傳輸技術。
2，傳輸速率爲幾十kbps
3，永遠在線，不會被呼入的電話打斷
4，模塊啓動電流較大，約2A

GPRS應用
1，目前應用最普遍的移動物聯網解決方案。
2，信號覆蓋面積最廣的移動物聯網，野外/山區/原野。
3，普遍應用於環境監測、自動抄表、電力公司輸電線路檢測、車聯網、工程建築質量監理、智慧農業等幾乎全部戶外移動物聯網應用場景。

4，模塊價格￥20-30

NB-IOT
1， NB-IoT，即窄帶物聯網（Narrow Band Internet of Things）。可直接部署於GSM網絡、UMTS網絡或LTE網絡，部署成本低。
2，一種新興技術，覆蓋面積廣，低功耗廣域網。
3，資費低，將來可能取代GPRS

4，模塊價格預計5美圓。

視頻講解：https://weibo.com/tv/v/Gkiet9IYe?fid=1034:4fd2e7318d9a0eb317da2bfcfad19ee5

用loar模塊進行數據傳輸

多個LORA模塊接收數據可是隻有一個模塊能接收數據的狀況

兩個LORA模塊工做在通常模式定向傳輸數據的測試方法

【LoRa模塊_E32-TTL-100】+節點端代碼實現

http://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=615488&highlight=E32-TTL-100

視頻開發版調試

oneNet視頻開發版，linux指令

執行好./wifi後自動回到命令行輸入，每次進入修改一下保存！！！

vi config.json 每次進入都要假修改再保存退出

一、表的設計

Django中的Model（操做表）

https://www.cnblogs.com/chenchao1990/p/5311531.html?utm_source=tuicool&utm_medium=referral

二、echarts X軸數據顯示不全問題

很奇怪，X軸只顯示了部分節點。沒有顯示全。

在xAxis上加上下面的配置就能解決：

axisLabel :{
    interval:0 
}

座標軸刻度標籤的顯示間隔，在類目軸中有效。

默認會採用標籤不重疊的策略間隔顯示標籤，能夠設置成 0 強制顯示全部標籤。

手機端推流，網頁端直播

https://cloud.tencent.com/document/product/267/5704

網頁端播放器的代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地圖座標定位</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>

    {#    直播推流#}
    <script src="//qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script>;


{#    <script src="http://vjs.zencdn.net/5.19/lang/zh-CN.js"></script>#}
{#          #}

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font: 12px/1 "Microsoft Yahei", "微軟雅黑", sans-serif;
        }

        p, span {
            font-family: 'Microsoft Yahei' !important;
        }

        #map {
            overflow: hidden
        }

        #allmap {
            float: left
        }

        #container {
            float: left
        }

    {#    video#}


    </style>

    {#   echarts #}
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript"
            src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript"
            src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
    {#    echarts   #}
</head>

<body>
<div id="map">
    <div style="width: 800px; height: 503px;" id="allmap"></div>

    <div id="container" style="width: 600px;height: 400px"></div>
</div>
<div>
    <button style="width: 300px;height: 50px;" id="map1">
        定位到武漢黃鶴樓
    </button>
    <button style="width: 300px;height: 50px;" id="map2">
        定位到武漢大學文理學部
    </button>
</div>

{#<div id="video" style="width: 600px; height: 400px;"></div>#}



<div id="id_video_container" ></div>


</body>


<iframe style="display: none;" id="geoPage" width="100%" height="30%" frameborder=0 scrolling="no"
        src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp&effect=zoom"></iframe>
<!-- 接收到位置信息後 經過 iframe 嵌入位置標註組件 -->

<script type="text/javascript">
    function ShowMap(zuobiao, name, addrsee, phone, chuanzhen, zoom) {
        var arrzuobiao = zuobiao.split(',');
        var map = new BMap.Map("allmap");
        map.addControl(new BMap.OverviewMapControl());
        map.centerAndZoom(new BMap.Point(arrzuobiao[0], arrzuobiao[1]), zoom);
        map.addControl(new BMap.NavigationControl());
        var marker = new BMap.Marker(new BMap.Point(arrzuobiao[0], arrzuobiao[1]));
        map.addOverlay(marker);
        var infoWindow = new BMap.InfoWindow('<p style="color: #bf0008;font-size:14px;">' + name + '</p><p>地址：' + addrsee + '</p><p>電話：' + phone + '</p><p>傳真：' + chuanzhen + '</p>');
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
        });
        marker.openInfoWindow(infoWindow);
    }


    var loc;
    var isMapInit = false;
    //監聽定位組件的message事件
    window.addEventListener('message', function (event) {
        loc = event.data; // 接收位置信息
        //console.log('location', loc);
        if (loc && loc.module == 'geolocation') { //定位成功,防止其餘應用也會向該頁面post信息，需判斷module是否爲'geolocation'
            var markUrl = 'https://apis.map.qq.com/tools/poimarker' +
                '?marker=coord:' + loc.lat + ',' + loc.lng +
                ';title:個人位置;addr:' + (loc.addr || loc.city) +
                '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';
            //給位置展現組件賦值
            // document.getElementById('markPage').src = markUrl;
            var lng = loc.lng//經度
            var lat = loc.lat //維度
            console.log(lng)
            ShowMap('' + lng + ',' + lat + '', 'dome', loc.city, '1388888888', '010-88888888', '20');
        } else {
            console.log('定位失敗');
        }
    }, false);


    $('#map1').click(function () {//點擊更換座標
        ShowMap('114.313479,30.547525', 'dome', '武漢', '武漢黃鶴樓', '888666888', '20');
        $.ajax(
            {
                url: '',
                type: 'post',
                //

                success: function (data) {
                    data = data['k2']


                    console.log(data);
                    if (data) {


                        var dom = document.getElementById("container");
                        var myChart = echarts.init(dom);
                        var app = {};
                        option = null;
                        option = {
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                axisLine: {onZero: false},

                                data: data[0].map(function (str) {
                                    return str.replace(' ', '\n')
                                }), axisLabel: {
                                    interval: 0
                                }


                            },
                            yAxis: {
                                name: '溫度',
                                type: 'value'
                            },
                            series: [{
                                data: data[1],
                                type: 'line'
                            }]
                        };
                        ;
                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }


                    }

                }
            })


    })
    $('#map2').click(function () {//點擊更換座標
        ShowMap('114.368107,30.543083', 'dome', '武漢 ', '武漢大學文理學部', '021-66658888', '20');
        // 登陸驗證
        $.ajax(
            {
                url: '',
                type: 'post',
                //

                success: function (data) {
                    data = data['k1']


                    console.log(data);
                    if (data) {


                        var dom = document.getElementById("container");
                        var myChart = echarts.init(dom);
                        var app = {};
                        option = null;
                        option = {
                            xAxis: {
                                type: 'category',

                                data: data[0],
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: data[1],
                                type: 'line'
                            }]
                        };
                        ;
                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }


                    }

                }
            })


    })


var option = {
"live_url" : "rtmp://3891.liveplay.myqcloud.com/live/3891_user_c1c2c329_5224?bizid=3891&txSecret=d31ab37d0e5fb0967b80f0855ff6d93b&txTime=5C27718F",
"live_url2" : "http://2000.liveplay.myqcloud.com/live/2000_2a1.flv",
"width" : 480,
"height" : 320

//...可選填其餘屬性
};

var player = new qcVideo.Player("id_video_container", option)

</script>
</html>

View Code

谷歌問題沒法播放的問題

用Django 發送郵件的方法

用花生殼內網穿透

物聯網平臺onenet的使用

一、經過ONENET文檔中心的快速開始進行平臺的註冊及產品的建立。

二、設備聯網，對準備上傳的數據進行組包。可以使用restful API或直接用平臺寫好的SDK

{「liu」:123}
三、設備和平臺創建鏈接（經過設備ID和APIkey）

至此，您已經在OneNET上完成了產品的建立。

若您選擇的是EDP，MQTT，HTTP，Modbus或者JT\T808做爲接入協議，請進入公開協議產品指南瞭解詳情；

若您選擇的是RGMP做爲接入協議，請進入私有協議產品指南瞭解詳情。

oneNet文檔中心

一、採集終端：

OneNET視頻能力體驗------使用樹莓派攝像頭推流

從中移動onenet平臺獲取數據

import urllib #python3
 
DEVICE_ID='3*****6'#設備ID
API_KEY='tJX4fe************WbQoGo= '#產品的APIKEY，是MAsterKey，具備最大權限
 
#獲取的是數據流最近更新的數據點值
def http_get_data():
        url='http://api.heclouds.com/devices/'+DEVICE_ID+'/datapoints'
        request = urllib.request.Request(url)
        request.add_header('api-key',API_KEY)
        request.get_method = lambda:'GET'           # 設置HTTP的訪問方式
        request = urllib.request.urlopen(request)
        return request.read()
 
 
post = str(http_get_data())#返回的報文轉換成字符串格式
print('*'*100)
print(post)
str1=post.split('datapoints":')[1].split('[{')[1].split('},')[0]
str2=post.split('datapoints":')[2].split('[{')[1].split('},')[0]
str3=post.split('datapoints":')[3].split('[{')[1].split('},')[0]
str4=post.split('datapoints":')[4].split('[{')[1].split('},')[0]
str5=post.split('datapoints":')[5].split('[{')[1].split('},')[0]
print('*'*100)
print(str1)
print('*'*100)
print(str2)
print('*'*100)
print(str3)
print('*'*100)
print(str4)
print('*'*100)
print(str5)
print('*'*100)

View Code

基於Django的環境監測系統

溫度、溼度、PM2.五、視頻模塊

oneNet平臺添加觸發器設置報警規則，對超過預設閥值的異常環境數據進行報警以引發用戶的注意

向用戶預留的手機號碼或郵箱進行消息報警

設置定時器功能，每5分鐘上報一次，每5分鐘採集一次

OneNet api文檔

OneNET介紹學習資料、視頻、例程代碼彙總帖（2017年6月19日）

樹莓派傳輸數據給OneNET（HTTP形式）

使用python和樹莓派實現遠程監控

樹莓派能用來作啥？

溫度沒問題

溼度

1、溼度，表示大氣乾燥程度的物理量。
2、在必定的溫度下在必定體積的空氣裏含有的水汽越少，則空氣越乾燥；水汽越多，則空氣越潮溼。
3、空氣的乾溼程度叫作「溼度」。在此意義下，經常使用絕對溼度、相對溼度、比較溼度、混合比、飽和差以及露點等物理量來表示。
4、若表示在溼蒸汽中水蒸氣的重量佔蒸汽總重量（體積）的百分比，則稱之爲蒸汽的溼度。
5、人體感受溫馨的溼度是：相對溼度低於70%。

分貝：

分貝（decibel）是量度兩個相同單位之數量比例的計量單位，主要用於度量聲音強度，經常使用dB表示。

pm2.5：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地圖座標定位</title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" href="/static/blog/bootstrap-3.3.7/css/bootstrap.css">
    <script src="/static/JS/jquery-3.2.1.min.js"></script>
    <script src="/static/blog/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>

    {#    直播推流#}
    <script src="//qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script>
    {#導航欄#}

    <link rel="stylesheet" href="/static/css/index.css">

    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->

    {#    #}


    {#    <script src="http://vjs.zencdn.net/5.19/lang/zh-CN.js"></script>#}
    {#          #}

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font: 12px/1 "Microsoft Yahei", "微軟雅黑", sans-serif;
        }

        p, span {
            font-family: 'Microsoft Yahei' !important;
        }

        #all, #all2 {
            overflow: hidden
        }

        #allmap {
            float: left
        }

        #show, #show2 {
            float: left
        }

        #show3, #id_video_container {
            float: left
        }
    </style>

    {#   echarts #}
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript"
            src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript"
            src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
    {#    echarts   #}
</head>

<body>

{#導航欄#}
<script type="text/javascript">
    $(function () {
        $('.navbar-nav li ').click(function () {
            //添加類名addclass、siblings查找全部兄弟元素---不包括本身
            $(this).addClass('active').siblings('li').removeClass('active');
        });
    })

</script>

<nav class="navbar  navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/index/">首頁</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li id="person_index"><a href="/{{ request.user }}/">我的主頁<span class="sr-only">(current)</span></a></li>
                <li id="notebook"><a href="/cn_backend/">筆記</a></li>
                <li id="monitor_center" class="active"><a href="/map/">監控中心</a></li>
            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

{#-------導航欄----end#}
<div id="all">

    <div style="width: 800px; height: 700px;" id="allmap"></div>

    {# 可視化圖形 #}
    <div id="show">
        <div id="container" style="width: 600px;height: 300px">
            <div id="dashboard" style="width: 280px;height:280px;display:inline-block "></div>
            <div id="dashboard2" style="width: 280px;height:280px;display:inline-block "></div>

        </div>
        <div id="container2" style="width: 600px;height: 400px"></div>
        {#        全部傳感器#}

    </div>

    <div id="show2">
        <div id="container3" style="width: 600px;height: 300px">
            <div id="dashboard3"  style="width: 280px;height:280px">
                <button type="button" class="btn btn-success">（成功）Success</button>
            </div>

            <div id="dashboard4" style="width: 280px;height:280px">
                <button type="button" class="btn btn-info">（通常信息）Info</button>
            </div>
        </div>
        <div id="container4" style="width: 600px;height: 300px"></div>
        {#    視屏顯示#}
    </div>

</div>


<div id="all2">

    <div id="show3" style="width: 800px;height: 300px">
        <button style="width: 300px;height: 50px;" id="map1">
            定位到武漢黃鶴樓
        </button>
        <button style="width: 300px;height: 50px;" id="map2">
            定位到武漢大學文理學部
        </button>
    </div>
    <div id="id_video_container"></div>

</div>
{#<div id="video" style="width: 600px; height: 400px;"></div>#}


</body>


<iframe style="display: none;" id="geoPage" width="100%" height="30%" frameborder=0 scrolling="no"
        src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp&effect=zoom"></iframe>
<!-- 接收到位置信息後 經過 iframe 嵌入位置標註組件 -->

<script type="text/javascript">
    function ShowMap(zuobiao, name, addrsee, administrator, phone, zoom) {
        var arrzuobiao = zuobiao.split(',');
        var map = new BMap.Map("allmap");
        map.addControl(new BMap.OverviewMapControl());
        map.centerAndZoom(new BMap.Point(arrzuobiao[0], arrzuobiao[1]), zoom);
        map.addControl(new BMap.NavigationControl());
        var marker = new BMap.Marker(new BMap.Point(arrzuobiao[0], arrzuobiao[1]));
        map.addOverlay(marker);
        //var infoWindow = new BMap.InfoWindow('<p style="color: #bf0008;font-size:14px;">' + name + '</p><p>詳細地址：' + addrsee + '</p>');
        var infoWindow = new BMap.InfoWindow('<p style="color: #bf0008;font-size:14px;">' + name + '</p><p>地址：' + addrsee + '</p><p>負責人：' + administrator + '</p><p>電話：' + phone + '</p>');
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
        });
        marker.openInfoWindow(infoWindow);
    }


    var loc;
    var isMapInit = false;
    //監聽定位組件的message事件
    window.addEventListener('message', function (event) {
        loc = event.data; // 接收位置信息
        //console.log('location', loc);
        if (loc && loc.module == 'geolocation') { //定位成功,防止其餘應用也會向該頁面post信息，需判斷module是否爲'geolocation'
            var markUrl = 'https://apis.map.qq.com/tools/poimarker' +
                '?marker=coord:' + loc.lat + ',' + loc.lng +
                ';title:個人位置;addr:' + (loc.addr || loc.city) +
                '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';
            //給位置展現組件賦值
            // document.getElementById('markPage').src = markUrl;
            var lng = loc.lng//經度
            var lat = loc.lat //維度
            console.log(lng)
            ShowMap('' + lng + ',' + lat + '', '監測點', loc.city, 'someone', '18012346542', '20');
        } else {
            console.log('定位失敗');
        }
    }, false);


    $('#map1').click(function () {//點擊更換座標
        ShowMap('114.313479,30.547525', '監測點A', '武漢黃鶴樓', '張三', '13612346541', '20');
        $.ajax(
            {
                url: '',
                type: 'post',
                //
                success: function (data) {
                    //data = data['k2']//===[list,list2]
                    console.log(data, typeof data);
                    if (data) {

                        var dom = document.getElementById("container2");
                        var myChart = echarts.init(dom);
                        option = null;
                        option = {
                            title: {
                                text: '傳感器讀數'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['溫度(℃)', '溼度(%)', 'PM2.5(μg/m3)', '分貝(dB)']
                            },


                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                axisLine: {onZero: false},

                                data: data['Humidity'][0].map(function (str) {
                                    return str.replace(' ', '\n')
                                }), axisLabel: {
                                    interval: 0
                                }


                            },
                            yAxis: {

                                type: 'value'
                            },

                            series: [
                                {
                                    name: '溫度(℃)',
                                    type: 'line',

                                    data: data['Temperature'][1]
                                },
                                {
                                    name: '溼度(%)',
                                    type: 'line',

                                    data: data['Humidity'][1]
                                },
                                {
                                    name: 'PM2.5(μg/m3)',
                                    type: 'line',

                                    data: data['PM2_5_Content'][1]
                                },
                                {
                                    name: '分貝(dB)',
                                    type: 'line',

                                    data: data['NoiseValue'][1]
                                },

                            ]


                        };
                        myChart.setOption(option, true);
                    }

                    //two
                    if (data['new_Temperature']) {


                        var dom2 = document.getElementById("dashboard");
                        var myChart2 = echarts.init(dom2);
                        option = {
                            series: [
                                {
                                    name: '業務指標',
                                    type: 'gauge',
                                    detail: {formatter: '{value}℃'},
                                    data: [{value: data['new_Temperature'][1], name: '溫度'}]
                                },
                            ]
                        };

                        myChart2.setOption(option, true);


                    }

                    //three
                    if (data['new_Humidity']) {

                        var dom3 = document.getElementById("dashboard2");
                        var myChart3 = echarts.init(dom3);

                        option = {
                            series: [
                                {
                                    name: '業務指標',
                                    type: 'gauge',
                                    detail: {formatter: '{value}%'},
                                    data: [{value: data['new_Humidity'][1], name: '溼度'}]
                                }
                            ]
                        };

                        myChart3.setOption(option, true);

                    }

                    //four


                }
            })
    });

    $('#map2').click(function () {//點擊更換座標
        ShowMap('114.368107,30.543083', '監測點B', '武漢大學文理學部教5 ', '李四', '021-66658888', '20');
        // 登陸驗證
        $.ajax(
            {
                url: '',
                type: 'post',
                //

                success: function (data) {
                    //data = data['k1']


                    console.log(data);
                    if (data['NoiseValue']) {
                        data4 = data['NoiseValue']

                        var dom = document.getElementById("container");
                        var myChart = echarts.init(dom);
                        var app = {};
                        option = null;
                        option = {
                            xAxis: {
                                type: 'category',

                                data: data[0],
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: data[1],
                                type: 'line'
                            }]
                        };

                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }


                    }

                }
            })


    });

    var option = {
        "live_url": "rtmp://3891.liveplay.myqcloud.com/live/3891_user_1693306d_5838?bizid=3891&txSecret=5d4c6dd2ab8b914246c56a58ef0495c3&txTime=5C2EB1C6",
        {#"live_url2" : "http://2000.liveplay.myqcloud.com/live/2000_2a1.flv",#}
        "width": 480,
        "height": 300

//...可選填其餘屬性
    };

    var player = new qcVideo.Player("container4", option)

</script>
</html>