123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <meta name="renderer" content="webkit">
- <meta http-equiv="Cache-Control" content="no-siteapp" />
- <title>30日温度图</title>
- <meta name="keywords" content="">
- <meta name="description" content="">
- <!--[if lt IE 9]>
- <meta http-equiv="refresh" content="0;ie.html" />
- <![endif]-->
- <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
- <script src="/static/jquery-1.11.3.min.js"></script>
- <script type="text/javascript" src="/static/echarts.js"></script>
- <style>
- .content{
- width: 100%;
- height: auto;
- overflow: hidden;
- }
- .content img{
- max-width: 100%;
- }
- .commpany{
- padding: 0.5rem;
- }
- </style>
- <style type="text/css">
- .container{
- padding: 20px;
- width: 100%;
- height: auto;
- overflow: hidden;
- }
- .toplogo{
- width: 80%;
- height: auto;
- margin: 20px auto;
- }
- .package-status {
- padding: 18px 0 0 0
- }
- .package-status .status-list {
- margin: 0;
- padding: 0;
- margin-top: -5px;
- padding-left: 8px;
- list-style: none;
- }
- .package-status .status-list>li {
- border-left: 2px solid #0278D8;
- text-align: left;
- }
- .package-status .status-list>li:before {
- /* 流程点的样式 */
- content: '';
- border: 3px solid #0278D8;
- background-color: #0278D8;
- display: inline-block;
- width: 6px;
- height: 6px;
- border-radius: 10px;
- margin-left: -7px;
- margin-right: 10px
- }
- .package-status .status-box {
- overflow: hidden
- }
- .package-status .status-list>li {
- height: auto;
- width: 95%;
- }
- .package-status .status-list {
- margin-top: -8px
- }
- .package-status .status-box {
- position: relative
- }
- .package-status .status-box:before {
- content: " ";
- background-color: #f3f3f3;
- display: block;
- position: absolute;
- top: -8px;
- left: 20px;
- width: 10px;
- height: 4px
- }
- .package-status .status-list {
- margin-top: 0px;
- }
- .status-list>li:not(:first-child) {
- padding-top: 10px;
- }
- .status-content-before {
- text-align: left;
- margin-left: 25px;
- margin-top: -20px;
- }
- .status-content-latest {
- text-align: left;
- margin-left: 25px;
- color: #f0ad4e;
- margin-top: -20px;
- }
- .status-time-before {
- text-align: left;
- margin-left: 25px;
- font-size: 10px;
- margin-top: 5px;
- }
- .status-time-latest {
- text-align: left;
- margin-left: 25px;
- color: #f0ad4e;
- font-size: 10px;
- margin-top: 5px;
- }
- .status-line {
- border-bottom: 1px solid #ccc;
- margin-left: 25px;
- margin: 10px 0 20px 0;
- }
- .list {
- padding: 0 20px;
- background-color: #F8F8F8;
- margin: 10px 0 0 25px;
- border: 1px solid #EBEBEB;
- }
- .list li {
- line-height: 30px;
- color: #616161;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div><h2>30日温度图</h2></div>
- <div class="row">
- <div class="col-sm-12">
- <div class="ibox float-e-margins">
- <div class="ibox-content">
- <div style="height: 300px" id="tj1"></div>
- </div>
- <div class="ibox-content" >
- <table class="table table-bordered" >
- <thead>
- <tr>
- {foreach $data[0] as $v}
- <th>{$v.name}</th>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[0] as $v}
- <td>{$v.value}</td>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[1] as $v}
- <th>{$v.name}</th>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[1] as $v}
- <td>{$v.value}</td>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[2] as $v}
- <th>{$v.name}</th>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[2] as $v}
- <td>{$v.value}</td>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[3] as $v}
- <th>{$v.name}</th>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[3] as $v}
- <td>{$v.value}</td>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[4] as $v}
- <th>{$v.name}</th>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[4] as $v}
- <td>{$v.value}</td>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[5] as $v}
- <th>{$v.name}</th>
- {/foreach}
- </tr>
- <tr>
- {foreach $data[5] as $v}
- <td>{$v.value}</td>
- {/foreach}
- </tr>
- </thead>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- <script>
- option = {
- xAxis: {
- type: 'category',
- data: {:json_encode($key)}
- },
- yAxis: {
- type: 'value'
- },
- series: [{
- data: {:json_encode($value)},
- type: 'line'
- }],
- tooltip : {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
- }
- };
- var myChart = echarts.init(document.getElementById('tj1'));
- myChart.setOption(option);
- </script>
- </html>
|