动态传感器数据展示平台代码及截图

　　这是我们上PHP课老师让我们完成的内容，在这里储存一下，方便以后观看，另外也可以给需要的小伙伴提供一些思路，代码什么的都是完整可运行的哦~

html部分的代码：

test001.html

 1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 2 <script src="./js/jquery-2.0.3.min.js"></script>
 3 <script src="./js/highstock.js"></script>
 4 <script src="./test001.js"></script>
 5 
 6 
 7 <center>
 8 <h1>传感器数据展示平台</h1>
 9 
10 <hr>
11 <div>
12     数据选择：
13     <select id="usb_data_id" name="usb_data_id" style="height: 30px;">
14     <option value="1">01</option>
15     <option value="2">02</option>
16     <option value="3">03</option>
17     <option value="4">04</option>
18     <option value="5">05</option>
19     <option value="6">06</option>
20     <option value="7">07</option>
21     <option value="8">08</option>
22     <option value="9">09</option>
23     <option value="10">10</option>
24     <option value="11">11</option>
25     <option value="12">12</option>
26     <option value="13">13</option>
27     <option value="14">14</option>
28     <option value="15">15</option>
29     <option value="16">16</option>
30     <option value="17">17</option>
31     <option value="18">18</option>
32     <option value="19" selected="true" //代表该项被选中>19</option>
33     <option value="20">20</option>
34     <option value="21">21</option>
35     <option value="22">22</option>
36     <option value="23">23</option>
37     <option value="24">24</option>
38     <option value="25">25</option>
39     <option value="26">26</option>
40     <option value="27">27</option>
41     <option value="28">28</option>
42     <option value="29">29</option>
43     <option value="30">30</option>
44     <option value="31">31</option>
45     <option value="32">32</option>
46     <option value="33">33</option>
47     <option value="34">34</option>
48     <option value="35">35</option>
49     
74     </select>
75     <button id="usb_data_show">显示数据</button>
76 </div>
77 <br>
78 <div id="container" style="min-width:400px;height:400px"></div>
79 
80 
81 
82 
83 </center>
84 
85 test001.html

 

 

js部分的代码：

test001.js

  1 $(document).ready(
  2     function () {
  3 
  4         var usb_data_all = [];  //全局变量，存储全局数据
  5 
  6         $("#usb_data_show").click(
  7             function () {
  8                 // $(this).hide();//将对应按钮内容单击后隐藏
  9                 // alert("我是一个按钮");//点击对应按钮后弹出提示框
 10                 //从后台获取数据
 11                 usb_data_all=getSingleUsbData();//是分号 不是逗号
 12                 //alert(usb_data_all);//显示数据
 13                
 14 
 15             }
 16         );
 17 
 18 
 19         //*************
 20         //图表数据获取函数
 21         //*************
 22         function getSingleUsbData() {
 23             var usb_data;
 24             $.ajax({
 25                 type: "post",  //是逗号，不是分号 
 26                 dataType: "json",
 27                 cache: false,//布尔值，表示浏览器是否缓存被请求页面。默认是 true
 28                 async: false,//是否异步
 29                 url: "test001.php",//跳转到test001.php界面
 30                 data: {
 31                     usb_data_id: $('#usb_data_id').val()  //usb_data_id name属性
 32                 },
 33                 success : function (data, textStatus) {
 34                     usb_data = data;                   
 35                 },
 36                 error : function (jqXHR, textStatus,
 37                      errorThrown) {
 38                         //alert("data");
 39                 },
 40             });
 41         return usb_data;
 42         
 43             }
 44 
 45 ////////////////////////////////////////////////
 46 Highcharts.setOptions({
 47     global : {
 48         useUTC : false
 49     }
 50 });
 51 // Create the chart
 52 Highcharts.stockChart('container', {
 53     chart : {
 54         events : {
 55             load : function () {
 56                 // set up the updating of the chart each second
 57                 var series = this.series[0];
 58                 //每几秒钟弹出什么内容
 59                 setInterval(function () {
 60                     if(usb_data_all.length>0){
 61                         var x = (new Date()).getTime(), // current time
 62                         y = parseInt(usb_data_all[0]);//Math.round(Math.random() * 100);//后台获取的数据
 63                         series.addPoint([x, y], true, false);
 64                         usb_data_all.shift();  //把数组第一个元素删除，并返回第一个元素的值
 65 
 66                     }
 67                     
 68                 }, 0.0001);
 69             }
 70         }
 71     },
 72     rangeSelector: {
 73         buttons: [{
 74             type: 'all',
 75             text: 'All'
 76         }],
 77         inputEnabled: false,
 78         selected: 0
 79     },
 80     title : {
 81         text : '传感器数据展示'
 82     },
 83     //数据提示框
 84     tooltip: {
 85         split: false
 86     },
 87     //是否导出
 88     exporting: {
 89         enabled: false
 90     },
 91     //图表区域的内容
 92     series : [{
 93         name : '传感器数据',
 94         data : []
 95     }]
 96 });
 97 
 98 /////////////////////////////////////////////////
 99 
100     }
101 );
102 
103 test001.js

 

 

php部分的代码：

test001.php

 1 <?php
 2     //文件名称
 3     $file = './msg_usb_data.csv';//图表文件
 4     //判断文件是否存在
 5     if (!is_file($file)){
 6         exit("没有文件");
 7     }
 8     //打开文件
 9     $handle = fopen($file,'r');
10     //判断文件是否可读取
11     if (!$handle){
12         exit("读取文件失败");
13     }
14 
15     $usb_data_id = $_POST["usb_data_id"];//自己学号后两位
16     //这里的 POST 与前台type类型一致
17     $usb_data = "";//需要图标显示的数据
18     $i = 1;
19     while (($data = fgetcsv($handle)) !== false){
20         //下面这行代码可以解决中文乱码问题
21         //$data[0] = iconv('gbk','utf-8','$data[0]');
22 
23         // //跳过第一行标题
24         if ($data[0] == 'name'){
25              continue;
26         }
27         //判断是否为自己的学号
28         if ($i == $usb_data_id){
29             //data为每行数据，这里转化成一维数组
30             $usb_data = explode(",",$data[0]);
31             break;
32         }
33         $i++;
34     }
35 
36     fclose($handle);
37     echo json_encode($usb_data);
38     
39 
40     //如果内容是纯php文件，可以去掉
41 ?>
42 
43 test001.php

 

这是两个js文件：js.zip

这是效果图：（此效果图为动态展示）

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2020-04-06写

欢迎评论点赞哦~~~

 

posted @ 2020-04-06 23:55  吃啥鸭  阅读(370)  评论(0)  编辑  收藏  举报