shuochen
/
LargeScreenVisualization


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/scroll.css">
    <link rel="stylesheet" href="css/histor.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/date.css">
    <!-- <link rel="stylesheet" href="css/info.css"> -->
    <script src="js/shipei.js"></script>

    <script src="js/echarts.min.js"></script>
    <script type="text/javascript" src="https://developer.baidu.com/map/custom/stylelist.js"></script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=cO9TZgFofryAYu4TCTSOTuYxVBuyy11A&services=&t=20200309163354">
    </script>
</head>

<body>
    <div class="bg">
        <!-- 顶部 -->
        <div class="header">
            <span class="header-title">观测站</span>
            <span class="header-text">综合监控平台</span>
        </div>
        <!-- 内容 -->
        <div class="wrap">
            <!-- 左侧 -->
            <div class="left fl">
                <div class="left-header">
                    <span>农气站在线情况</span>
                    <div id="left-header-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
                <div class="left-mid">
                    <span>按观测作物分类</span>
                    <div id="left-mid-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
                <div class="left-bottom">
                    <span>农业小气候站</span>
                    <div id="left-bottom-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
            </div>
            <!-- 中间 -->
            <div class="center fl">
                <!-- 地图 -->
                <div class="center-map">
                    <div id="allmap" style="width:100%;height:100%;"></div>
                </div>
                <!-- 离线清单 -->
                <div class="center-offline">
                    <div class="center-offline-header">
                        <p>离线站点清单</p>
                    </div>
                    <div class="center-offline-mid">
                        <div class="title">
                            <div class="sit sit-title fl">站名</div>
                            <div class="sit sit-title fl">站号</div>
                            <div class="sit sit-title fl">状态</div>
                            <div class="sit sit-title fl">电话</div>
                        </div>
                        <!-- 自动滚动清单列表 -->
                        <div class="list" id="list">
                            <div class="rowup" id="rowup">
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">无锡市黄瓜</li>
                                    <li class="fl sit-item">离线</li>
                                    <li class="fl sit-item">12345678984</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">东阳台村种植园</li>
                                    <li class="fl sit-item">离线</li>
                                    <li class="fl sit-item">12345678984</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">山东院内</li>
                                    <li class="fl sit-item">离线</li>
                                    <li class="fl sit-item">12345678984</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">山东农气站</li>
                                    <li class="fl sit-item">离线</li>
                                    <li class="fl sit-item">12345678984</li>
                                </ul>
                            </div>
                            <div class="rowupcope" id="rowupcope"></div>
                        </div>
                    </div>

                    <div class="center-offline-bottom">
                        <p>研制：科技有限公司&nbsp;&nbsp;&nbsp;研制：科技有限公司</p>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="right fr">
                <span class="right-title">站点详情</span>
                <div class="right-top">
                    <div class="right-top-content">
                        <span class="name">站名:</span>
                        <span class="text">观测站</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">编号:</span>
                        <span class="text">LOO33</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">地址:</span>
                        <span class="text">观测站</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">观测作物:</span>
                        <span class="text">西红柿</span>
                    </div>
                </div>
                <div class="right-mid">
                    <div class="right-mid-header">
                        实时数据
                    </div>
                    <div class="right-mid-scroll">
                        <div class="right-mid-content">
                            <div class="right-top-content">
                                <span class="name">要素数:</span>
                                <span class="text">7</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">观测时间:</span>
                                <span class="text">2020-03-16 10:40:00</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">150cm气温:</span>
                                <span class="text">33.4℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">150cm空气相对湿度</span>
                                <span class="text">48.7%</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">5cm低温：</span>
                                <span class="text">0.0℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">10cm低温：</span>
                                <span class="text">18.1℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">20cm低温:</span>
                                <span class="text">18.0℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">10cm土壤相对湿度:</span>
                                <span class="text">46.3℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">20cm土壤相对湿度:</span>
                                <span class="text">46.3℃</span>
                            </div>
                        </div>
                    </div>
                    <a href="javascript:;" class="history" id="triggerBtn">查看历史记录</a>
                </div>
                <div class="right-bottom">
                    <div class="right-mid-header">
                        实时监控
                    </div>
                    <div class="right-bottom-content">
                        <img src="./img/jiankong.png" alt="">
                    </div>
                    <a href="javascript:;" class="history-pic" id="triggerBtnpic">查看历史图片</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框历史数据 -->

    <div id="myModal" class="modal">
        <div class="modal-content">
            <div class="model-header">查看历史记录</div>
            <div class="see">
                <div class="from fl">
                    <div class="line fl">
                        <span>站名：</span>
                        <select name="name" id="" class="line-content">
                            <option value="">西红柿观测站</option>
                        </select>
                    </div>
                    <div class="line fl">
                        <span>要素：</span>
                        <select name="name" id="" class="line-content">
                            <option value="">7</option>
                        </select>
                    </div>
                    <div class="line fl">
                        <span>开始时间:</span>
                        <input type="text" name="date" id="date" lay-verify="date" placeholder="" autocomplete="off"
                            class="line-content" />
                    </div>
                    <div class="line fl">
                        <span>结束时间:</span>
                        <input type="text" name="date" id="date1" lay-verify="date" placeholder="" autocomplete="off"
                            class="line-content" />
                    </div>
                </div>
                <div class="see-right fr">
                    <div class="submit fr">
                        <input type="button" class="button" value="导出">
                    </div>
                    <div class="submit fr query">
                        <input type="button" class="button" value="查询">
                    </div>
                </div>
            </div>
            <div class="date">
                <div class="date-content" id="date-content-wrap">
                    <div id="data-content-line" style="width: 100%;height: 98%;" class="data-content-line"></div>
                </div>
            </div>

            <div id="closeBtn" class="close">X</div>
        </div>
    </div>
    <!-- 模态框历史图片 -->
    <div id="myModalpic" class="modalpic">
        <div class="modal-content">
            <div class="model-header">查看历史图片</div>
            <div class="see">
                <div class="from fl">
                    <div class="line fl">
                        <span>站名：</span>
                        <select name="name" id="" class="line-content">
                            <option value="">西红柿观测站</option>
                        </select>
                    </div>
                    <div class="line fl">
                        <span>要素：</span>
                        <select name="name" id="" class="line-content">
                            <option value="">7</option>
                        </select>
                    </div>
                    <div class="line fl">
                        <span>开始时间:</span>
                        <input type="text" name="date" id="date2" lay-verify="date" placeholder="" autocomplete="off"
                            class="line-content" />
                    </div>
                    <div class="line fl">
                        <span>结束时间:</span>
                        <input type="text" name="date" id="date3" lay-verify="date" placeholder="" autocomplete="off"
                            class="line-content" />
                    </div>
                </div>
                <div class="see-right fr">
                    <div class="submit fr querypic">
                        <input type="button" class="button" value="查询">
                    </div>
                </div>
            </div>
            <!-- 历史图片 -->
            <div class="date">
                <div class="data-contentpic">
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                </div>
            </div>

            <div id="closeBtnpic" class="close">X</div>
        </div>
    </div>
    </div>
</body>

<script src="js/jquery.js"></script>
<script src="js/bar.js"></script>
<script src="js/pie.js"></script>
<script src="js/pinhuan.js"></script>
<script src="js/map.js"></script>
<script type="text/javascript" src="js/InfoBox.js"></script>
<script src="js/histroy.js"></script>
<script src="js/histroyline.js"></script>
<script src="layui/layui.js"></script>
<script src="js/date.js"></script>
<script src="js/gundong.js"></script>

</html>