hxx/visualization
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
master
visualization/index.html
jiutianzhiyu 49befa3980 提交
2021-04-26 18:14:04 +08:00

443 lines
19 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化-智能看板</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./fonts/icomoon.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/myrem.js"></script>
<script src="./js/china.js"></script>
<script src="./js/mychart-map.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div class="layout">
<div class="cloumn">
<div class="baseinfo borderimage">
<div class="item">
<h2>2,190</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
<div class="item">
<h2>190</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
<div class="item">
<h2>3,001</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
<div class="item">
<h2>108</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
</div>
<div class="monitor borderimage">
<div class="tabs">
<a href="javscript:;" class="active" data-index='0'>故障设备监控</a>
<a href="javscript:;" data-index='1'>异常设备监控</a>
</div>
<div class="content" style="display: block;">
<div class="title">
<span>故障时间</span>
<span>设备地址</span>
<span>异常代码</span>
</div>
<div class="list">
<ul>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180909</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180910</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180911</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
<span class="icon-dot"></span>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="title">
<span>异常时间</span>
<span>设备地址</span>
<span>异常代码</span>
</div>
<div class="list">
<ul>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你123</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
<li>
<span>20180908</span>
<span>广州欢迎你</span>
<span>10001</span>
</li>
</ul>
</div>
</div>
</div>
<div class="site borderimage">
<h3>点位站点分布统计</h3>
<div class="data">
<div class="pie"></div>
<div class="info">
<div class="item">
<h2>2,190</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
<div class="item">
<h2>2,190</h2>
<p>
<i class="icon-dot"></i><span>设备总数</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="cloumn">
<div class="map">
<span>
<i class="icon-cube"></i>设备数据统计
</span>
<div class="maparea"></div>
</div>
<div class="user borderimage">
<h2>全国用户总量统计</h2>
<div class="chart">
<div class="bar"></div>
<div class="data">
<div class="item">
<h2>2190</h2>
<span>
<i class="icon-dot"></i>设备总数
</span>
</div>
<div class="item">
<h2>190</h2>
<span>
<i class="icon-dot" style="color:green"></i>设备总数
</span>
</div>
</div>
</div>
</div>
</div>
<div class="cloumn">
<div class="order borderimage">
<div class="tabs">
<a href="javascript:;" class="active" data-type='day365'>365天</a>
<a href="javascript:;" data-type='day90'>90天</a>
<a href="javascript:;" data-type='day30'>30天</a>
<a href="javascript:;" data-type='day1'>24小时</a>
</div>
<div class="data">
<div class="item">
<h2 class="order_orders">2190</h2>
<span>
<i class="icon-dot"></i>订单量
</span>
</div>
<div class="item">
<h2 class="order_count">190</h2>
<span>
<i class="icon-dot" style="color:green"></i>销售额(万元)
</span>
</div>
</div>
</div>
<div class="sales borderimage">
<div class="caption">
<h2>销售额统计</h2>
<!-- 前台页面的属性定义不是自由的，很多时候都必须根据后台的设定来设置
你在前台页面不能乱键 -->
<a href="javascript:;" class="active" data-type='year'>年</a>
<a href="javascript:;" data-type='quarter'>季</a>
<a href="javascript:;" data-type='month'>月</a>
<a href="javascript:;" data-type='week'>周</a>
</div>
<div class="line"></div>
</div>
<div class="season">
<div class="channel borderimage">
<h3>渠道分布</h3>
<div class="data">
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
机场
</span>
</div>
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
机场
</span>
</div>
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
机场
</span>
</div>
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
机场
</span>
</div>
</div>
</div>
<div class="quarter borderimage">
<h3>一季度销售进度</h3>
<div class="chart">
<div class="box">
<div class="gauge"></div>
<div class="label">75<small> %</small></div>
</div>
<div class="data">
<div class="item">
<h4>1,321</h4>
<span>
<i class="icon-dot" style="color: #6acca3"></i>
销售额(万元)
</span>
</div>
<div class="item">
<h4>150%</h4>
<span>
<i class="icon-dot" style="color: #ed3f35"></i>
同比增长
</span>
</div>
</div>
</div>
</div>
</div>
<div class="list borderimage">
<div class="all">
<h3>全国热榜</h3>
<ul>
<li>
<i class="icon-cup1" style="color: #d93f36;"></i>
可爱多
</li>
<li>
<i class="icon-cup2" style="color: #68d8fe;"></i>
娃哈啥
</li>
<li>
<i class="icon-cup3" style="color: #4c9bfd;"></i>
喜之郎
</li>
</ul>
</div>
<div class="province">
<h3>各省热销 <i class="date">// 近30日 //</i></h3>
<div class="data">
<ul class="sup">
<li>
<span>北京</span>
<span>25,179 <s class="icon-up"></s></span>
</li>
<li>
<span>河北</span>
<span>23,252 <s class="icon-down"></s></span>
</li>
<li>
<span>上海</span>
<span>20,760 <s class="icon-up"></s></span>
</li>
<li>
<span>江苏</span>
<span>23,252 <s class="icon-down"></s></span>
</li>
<li>
<span>山东</span>
<span>20,760 <s class="icon-up"></s></span>
</li>
</ul>
<ul class="sub">
<li>
<span>你好</span>
<span>6.00<s class="icon-up"></s></span>
</li>
<li>
<span>你好</span>
<span>6.00<s class="icon-up"></s></span>
</li>
<li>
<span>你好</span>
<span>6.00<s class="icon-up"></s></span>
</li>
<li>
<span>你好</span>
<span>6.00<s class="icon-up"></s></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink