wennn
/
wdkl_screen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
							<!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>

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/animsition.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <!-- <link rel="stylesheet" href="./css/flipclock.css"> -->
</head>

<body>
    <div class="header">
        <div class="title" id="title">维鼎康联养老看板</div>
    </div>
    <div class="clearfix"></div>
    <div class="viewport">
        <div class="column">
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4 id="allCount"></h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            总用户
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="quarterly-addition"></h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            季度新增
                        </span>
                    </div>
                    <div class="item">
                        <h4 id="monthly-addition"></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">时间</span>
                            <span class="col">用户</span>
                            <span class="col">项目</span>
<!--                            <span class="col">值</span>-->
                        </div>
                        <div class="marquee-view">
                            <div id="vsLogTable" class="marquee">
                                <div class="vsLogTemplate row">
                                    <span class="col vsLogTime"></span>
                                    <span class="col vsLogUser"></span>
                                    <span class="col vsLogItem"></span>
<!--                                    <span class="col vsLogValue"></span>-->
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>用户年龄分布</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4 id="manCount"></h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    男性
                                </span>
                            </div>
                            <div class="item">
                                <h4 id="womanCount">418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    女性
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>报警分布</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4 id="dayCount"></h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    今日测量数
                                </span>
                            </div>
                            <div class="item">
                                <h4 id="hourCount"></h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    近1小时
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">365天</a>
                        <a href="javascript:;" data-key="day90">90天</a>
                        <a href="javascript:;" data-key="day30">30天</a>
                        <a href="javascript:;" data-key="day7">7天</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4></h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                测量
                            </span>
                        </div>
                        <div class="item">
                            <h4></h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                报警
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 报警统计 -->
            <div class="alarms panel">
                <div class="inner">
                    <div class="caption">
                        <h3>报警统计</h3>
                        <a href="javascript:;" class="active" data-type="week">周</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="year">年</a>

                    </div>
                    <div class="chart">
                        <div class="label"></div>
                        <div class="line"></div>
                    </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">时间</span>
                            <span class="col">用户</span>
                            <span class="col">项目</span>
                            <span class="col">值</span>
                        </div>
                        <div class="marquee-view">
                            <div id="errVsLogTable" class="marquee alarms-list">
                                <div id="errVsLogTemplate" class="row">
                                    <span class="col errVsLogTime"></span>
                                    <span class="col errVsLogUser"></span>
                                    <span class="col errVsLogItem"></span>
                                    <span class="col errVsLogValue"></span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
</body>

<script src="./js/mapStyleJson.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<!--<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>-->
<script src="./js/jquery.animsition.js"></script>
<script src="./js/bg.js"></script>
<!-- <script src="./js/flipclock.min.js"></script> -->
<script src="./js/index.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=4lgYDZ9MWQMbTvjX5R5M5pZG"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/bmap.min.js"></script>
<script src="./js/mymap.js"></script>

</html>