wennn
/
wdkl_screen


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
							<!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"> -->
    // 引入 Vue.js
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>

<body>
    <div class="app">
        <div class="header">
            <div class="title" id="title">维鼎康联养老看板</div>
            <div id="muteImg" style="top:20px;right: 20px;position: absolute;">
                <image src="./images/mute.png" style="height: 30px;width: 30px"></image>
            </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>
    </div>
</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>