| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <title></title> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta name="generator" content="Three.js Editor"> |
|---|
| | | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> |
|---|
| | | <link rel="stylesheet" href="../static/css/main.css"> |
|---|
| | | <script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/utils.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/data/Warehouse.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/data/Asrs.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/Cube.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/StoreArea.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/Store.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/StoreGroup.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/StoreCrn.js"></script> |
|---|
| | | <!-- <script type="text/javascript" src="../static/js/object/StoreShelf.js"></script>--> |
|---|
| | | <script type="text/javascript" src="../static/js/object/StoreGoods.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/Route.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/RouteLine.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/CrnTask.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/lib/btnHide.js"></script> |
|---|
| | | </head> |
|---|
| | | <body style="position: relative"> |
|---|
| | | <div style="position: absolute;top: 0;right: 0"> |
|---|
| | | <button id="print">打印</button> |
|---|
| | | </div> |
|---|
| | | <div id="groundglass"></div> |
|---|
| | | <div id="sidebar"> |
|---|
| | | <p1>中扬-智能立体仓库</p1> |
|---|
| | | <p2>ZhongYang Intelligent Three-Dimensional Warehouse</p2> |
|---|
| | | <div id="Histogram"></div> |
|---|
| | | <div id="baobiao2"></div> |
|---|
| | | <div id="btnhide_m"></div> |
|---|
| | | <button id="btnhide" onclick="btnHide()">隐藏</button> |
|---|
| | | <div class="tablebox"> |
|---|
| | | <div class="tbl-header"> |
|---|
| | | <table border="0" cellspacing="0" cellpadding="0" > |
|---|
| | | <thead> |
|---|
| | | <tr> |
|---|
| | | <th>排名</th> |
|---|
| | | <th>地市</th> |
|---|
| | | <th>销售收入(万元)</th> |
|---|
| | | <th>同比(%)</th> |
|---|
| | | </tr> |
|---|
| | | </thead> |
|---|
| | | <tbody style="opacity:0;" ></tbody> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | <div class="tbl-body"> |
|---|
| | | <table border="0" cellspacing="0" cellpadding="0"> |
|---|
| | | <thead> |
|---|
| | | <tr> |
|---|
| | | <th>排名</th> |
|---|
| | | <th>地市</th> |
|---|
| | | <th>销售收入(万元)</th> |
|---|
| | | <th>同比(%)</th> |
|---|
| | | </tr> |
|---|
| | | </thead> |
|---|
| | | <tbody></tbody> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div id="container"></div> |
|---|
| | | <script type="module"> |
|---|
| | | <head> |
|---|
| | | <title></title> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <meta name="generator" content="Three.js Editor"> |
|---|
| | | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> |
|---|
| | | <link rel="stylesheet" href="../static/css/main.css"> |
|---|
| | | <link rel="stylesheet" href="../static/css/index.css"> |
|---|
| | | <link rel="stylesheet" href="../static/css/loader.css" media="all"> |
|---|
| | | <script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/data/Asrs.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/utils.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/lib/echarts.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/data/BuildingData.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/data/ConveyData.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/Cube.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/StoreArea.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/Store.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/StoreGroup.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/Route.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/CrnTask.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/Floor.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/object/ObjectSelect.js"></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | |
|---|
| | | import * as THREE from '../static/js/three.module.js'; |
|---|
| | | import { APP } from '../static/js/app.js'; |
|---|
| | | |
|---|
| | | window.THREE = THREE; |
|---|
| | | |
|---|
| | | var player = new APP.Player(); |
|---|
| | | player.start(); |
|---|
| | | |
|---|
| | | // document.body.appendChild( player.dom ); |
|---|
| | | // window.addEventListener( 'resize', function () { |
|---|
| | | // player.setSize( window.innerWidth, window.innerHeight ); |
|---|
| | | // } ); |
|---|
| | | |
|---|
| | | document.getElementById("print").addEventListener('click', function () { |
|---|
| | | console.log(player.objects); |
|---|
| | | player.initModelMove(); |
|---|
| | | }, false); |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | var dom1 = document.getElementById("Histogram"); |
|---|
| | | var myChart1 = echarts.init(dom1); |
|---|
| | | window.addEventListener('resize',function () { |
|---|
| | | myChart1.resize(); |
|---|
| | | }) |
|---|
| | | var app1 = {}; |
|---|
| | | |
|---|
| | | var dom = document.getElementById("baobiao2"); |
|---|
| | | var myChart = echarts.init(dom); |
|---|
| | | window.addEventListener('resize',function () { |
|---|
| | | myChart.resize(); |
|---|
| | | }) |
|---|
| | | var app = {}; |
|---|
| | | <!-- 控制面板 --> |
|---|
| | | <div id="sidebar"> |
|---|
| | | <button id="sidebar-btn" onclick="sidebar()">展示</button> |
|---|
| | | <div class="sidebar-contain" > |
|---|
| | | <div class="sidebar-header"> |
|---|
| | | <div class="t">中扬立库</div> |
|---|
| | | <div class="i">Zoneyung Intelligent Three-Dimensional Warehouse</div> |
|---|
| | | </div> |
|---|
| | | <div class="sidebar-main"> |
|---|
| | | <!-- 任务 --> |
|---|
| | | <div class="task-box"> |
|---|
| | | <div class="task-title"> |
|---|
| | | 出库作业 |
|---|
| | | </div> |
|---|
| | | <div class="task-rbl"> |
|---|
| | | <select class="task-select"> |
|---|
| | | <option value="1">1</option> |
|---|
| | | <option value="2">2</option> |
|---|
| | | <option value="2">3</option> |
|---|
| | | <option value="2">4</option> |
|---|
| | | <option value="2">5</option> |
|---|
| | | <option value="2">6</option> |
|---|
| | | <option value="2">7</option> |
|---|
| | | <option value="2">8</option> |
|---|
| | | <option value="2">9</option> |
|---|
| | | <option value="1">10</option> |
|---|
| | | <option value="1">11</option> |
|---|
| | | <option value="2">12</option> |
|---|
| | | <option value="2">13</option> |
|---|
| | | <option value="2">14</option> |
|---|
| | | <option value="2">15</option> |
|---|
| | | <option value="2">16</option> |
|---|
| | | <option value="2">17</option> |
|---|
| | | <option value="2">18</option> |
|---|
| | | <option value="2">19</option> |
|---|
| | | </select> |
|---|
| | | <select class="task-select"> |
|---|
| | | <option value="1">1</option> |
|---|
| | | <option value="2">2</option> |
|---|
| | | <option value="2">3</option> |
|---|
| | | <option value="2">4</option> |
|---|
| | | <option value="2">5</option> |
|---|
| | | <option value="2">6</option> |
|---|
| | | <option value="2">7</option> |
|---|
| | | <option value="2">8</option> |
|---|
| | | <option value="2">9</option> |
|---|
| | | <option value="1">10</option> |
|---|
| | | <option value="1">11</option> |
|---|
| | | <option value="2">12</option> |
|---|
| | | <option value="2">13</option> |
|---|
| | | <option value="2">14</option> |
|---|
| | | <option value="2">15</option> |
|---|
| | | <option value="2">16</option> |
|---|
| | | <option value="2">17</option> |
|---|
| | | <option value="2">18</option> |
|---|
| | | <option value="2">19</option> |
|---|
| | | </select> |
|---|
| | | <select class="task-select"> |
|---|
| | | <option value="1">1</option> |
|---|
| | | <option value="2">2</option> |
|---|
| | | <option value="2">3</option> |
|---|
| | | <option value="2">4</option> |
|---|
| | | <option value="2">5</option> |
|---|
| | | <option value="2">6</option> |
|---|
| | | <option value="2">7</option> |
|---|
| | | <option value="2">8</option> |
|---|
| | | <option value="2">9</option> |
|---|
| | | <option value="1">10</option> |
|---|
| | | <option value="1">11</option> |
|---|
| | | <option value="2">12</option> |
|---|
| | | <option value="2">13</option> |
|---|
| | | <option value="2">14</option> |
|---|
| | | <option value="2">15</option> |
|---|
| | | <option value="2">16</option> |
|---|
| | | <option value="2">17</option> |
|---|
| | | <option value="2">18</option> |
|---|
| | | <option value="2">19</option> |
|---|
| | | </select> |
|---|
| | | </div> |
|---|
| | | <div class="task-confirm"> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 报表 --> |
|---|
| | | <div class="charts-box"> |
|---|
| | | <!-- 表 1 --> |
|---|
| | | <div id="io-chart"></div> |
|---|
| | | <!-- 表 2 --> |
|---|
| | | <div class="io-msg"> |
|---|
| | | <div class="tbl-header"> |
|---|
| | | <table border="0" cellspacing="0" cellpadding="0" > |
|---|
| | | <thead> |
|---|
| | | <tr> |
|---|
| | | <th>设备类型</th> |
|---|
| | | <th>编号</th> |
|---|
| | | <th>报文数据</th> |
|---|
| | | <th>时间</th> |
|---|
| | | </tr> |
|---|
| | | </thead> |
|---|
| | | <tbody style="opacity:0;" ></tbody> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | <div class="tbl-body"> |
|---|
| | | <table border="0" cellspacing="0" cellpadding="0"> |
|---|
| | | <thead> |
|---|
| | | <tr> |
|---|
| | | <th>设备类型</th> |
|---|
| | | <th>编号</th> |
|---|
| | | <th>报文数据</th> |
|---|
| | | <th>时间</th> |
|---|
| | | </tr> |
|---|
| | | </thead> |
|---|
| | | <tbody></tbody> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | var option1; |
|---|
| | | <div id="mask" class="mask"></div> |
|---|
| | | <div id="title-box" class="title-box"> |
|---|
| | | <div id="title" class="title"><i>A</i><i>S</i><i> </i><i>/</i><i> </i><i>R</i><i>S</i><i> </i><i>-</i><i> </i><i>W</i><i> </i><i>C</i><i> </i><i>S</i></div> |
|---|
| | | <div class="say"> |
|---|
| | | <p>自动化仓库控制系统，是介于WMS和PLC之间的一层管理控制系统</p> |
|---|
| | | <p>可以协调各种物流设备如输送机、堆垛机、穿梭车以及机器人、自动导引小车等物流设备之间的运行</p> |
|---|
| | | <p>"WAREHOUSE CONTROL SYSTEM"</p> |
|---|
| | | </div> |
|---|
| | | <div class="use"> |
|---|
| | | <div></div> |
|---|
| | | 《中扬立库》 |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <img id="logo" class="logo" src="../static/img/logo0.png" alt=""/> |
|---|
| | | <div id="ship-info-box" class="ship-info-box"> |
|---|
| | | <div class="ship-type pointernone"> |
|---|
| | | <ul id="ship-type-ul"> |
|---|
| | | <li>初始化</li> |
|---|
| | | <li>待机…</li> |
|---|
| | | <li>您现在可以自由移动视角</li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | <div class="speed pointernone"><span id="speed">0</span> <i id="speed-unit">%</i></div> |
|---|
| | | <div id="ship-info-btn" class="btn" data-type="1"> |
|---|
| | | <div id="btn-lock"></div> |
|---|
| | | <div class="btn-word">启动</div> |
|---|
| | | <div class="line line1"></div> |
|---|
| | | <div class="line line2"></div> |
|---|
| | | </div> |
|---|
| | | <div id="control-remind" class="remind">您现在可以自由移动视角</div> |
|---|
| | | </div> |
|---|
| | | <ul class="menu" id="menu"> |
|---|
| | | <li id="menu-w"> |
|---|
| | | <div><div>主</div></div> |
|---|
| | | </li> |
|---|
| | | <li id="menu-m"> |
|---|
| | | <div><div>左</div></div> |
|---|
| | | </li> |
|---|
| | | <li id="menu-t"> |
|---|
| | | <div><div>俯</div></div> |
|---|
| | | </li> |
|---|
| | | <li id="menu-b"> |
|---|
| | | <div><div>返</div></div> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | |
|---|
| | | option1 = { |
|---|
| | | title: { |
|---|
| | | text: '年度进/出货量', |
|---|
| | | x:'5px', |
|---|
| | | y:'15px', |
|---|
| | | textStyle:{ |
|---|
| | | color:'#ffffff', |
|---|
| | | fontWeight:400, |
|---|
| | | fontSize: 10, |
|---|
| | | }, |
|---|
| | | subtext: 'Data', |
|---|
| | | subtextStyle:{ |
|---|
| | | align:'center', |
|---|
| | | color:'#ffffff', |
|---|
| | | fontSize: 7, |
|---|
| | | }, |
|---|
| | | show: true, |
|---|
| | | <div id="container"></div> |
|---|
| | | <script type="text/javascript" src="../static/js/data/sidebar.js"></script> |
|---|
| | | </body> |
|---|
| | | <script type="module"> |
|---|
| | | |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis' |
|---|
| | | }, |
|---|
| | | textStyle:{ |
|---|
| | | color:'#f5f4f4', |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | show:false, |
|---|
| | | data: ['进货', '出货'] |
|---|
| | | }, |
|---|
| | | toolbox: { |
|---|
| | | show: false, |
|---|
| | | feature: { |
|---|
| | | dataView: { show: true, readOnly: false }, |
|---|
| | | magicType: { show: true, type: ['line', 'bar'] }, |
|---|
| | | restore: { show: true }, |
|---|
| | | saveAsImage: { show: true } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | calculable: true, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | color:'#975a5a', |
|---|
| | | type: 'category', |
|---|
| | | axisTick:{ |
|---|
| | | show:false, |
|---|
| | | lineStyle:{ |
|---|
| | | color:'#000' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔 |
|---|
| | | fontSize:9, |
|---|
| | | interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理） |
|---|
| | | rotate: 0 ,// 横坐标上label的倾斜度 |
|---|
| | | textStyle: { |
|---|
| | | color:'#fff' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine:{ |
|---|
| | | lineStyle: { |
|---|
| | | color: '#e2e1e1',// x轴刻度线的颜色 |
|---|
| | | }}, |
|---|
| | | data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | offset: -4, |
|---|
| | | axisTick:{ |
|---|
| | | show:false, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | fontSize:9, |
|---|
| | | }, |
|---|
| | | splitLine:{ |
|---|
| | | lineStyle:{ |
|---|
| | | color:'#cdcdcd'// y轴分割线颜色 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | import * as THREE from '../static/js/three.module.js'; |
|---|
| | | import { APP } from '../static/js/app.js'; |
|---|
| | | |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | color:['#88b0e2'], |
|---|
| | | name: '进货', |
|---|
| | | type: 'bar', |
|---|
| | | data: [ |
|---|
| | | 204.5, 50.5, 15.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | color:['#f8f7f7'], |
|---|
| | | name: '出货', |
|---|
| | | type: 'bar', |
|---|
| | | data: [ |
|---|
| | | 100, 75.2, 33.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 |
|---|
| | | ], |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | window.THREE = THREE; |
|---|
| | | |
|---|
| | | }; |
|---|
| | | var player = new APP.Player(); |
|---|
| | | player.start(); |
|---|
| | | |
|---|
| | | if (option1 && typeof option1 === 'object') { |
|---|
| | | myChart1.setOption(option1); |
|---|
| | | } |
|---|
| | | document.getElementById("btn-lock").addEventListener('click', function () { |
|---|
| | | player.lockControl(); |
|---|
| | | removeClass(document.getElementById("ship-info-btn"), "show"); |
|---|
| | | document.getElementById("ship-type-ul").style.transform = 'translateY(-60px)'; |
|---|
| | | }, false); |
|---|
| | | |
|---|
| | | let base = +new Date(1988, 9, 3); |
|---|
| | | let oneDay = 24 * 3600 * 1000; |
|---|
| | | let data = [[base, Math.random() * 300]]; |
|---|
| | | for (let i = 1; i < 20000; i++) { |
|---|
| | | let now = new Date((base += oneDay)); |
|---|
| | | data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]); |
|---|
| | | } |
|---|
| | | option = { |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | position: function (pt) { |
|---|
| | | return [pt[0], '10%']; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | x:'5px', |
|---|
| | | y:'15px', |
|---|
| | | text: '销售件数', |
|---|
| | | textStyle:{ |
|---|
| | | color:'#ffffff', |
|---|
| | | fontWeight:400, |
|---|
| | | fontSize: 10, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | toolbox: { |
|---|
| | | show:false, |
|---|
| | | feature: { |
|---|
| | | dataZoom: { |
|---|
| | | yAxisIndex: 'none' |
|---|
| | | }, |
|---|
| | | restore: {}, |
|---|
| | | saveAsImage: {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | textStyle:{ |
|---|
| | | color:'#f5f4f4', |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'time', |
|---|
| | | boundaryGap: false, |
|---|
| | | axisTick:{ |
|---|
| | | show:false, |
|---|
| | | }, |
|---|
| | | axisLabel: { // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔 |
|---|
| | | fontSize:9, |
|---|
| | | interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理） |
|---|
| | | rotate: 0 ,// 横坐标上label的倾斜度 |
|---|
| | | textStyle: { |
|---|
| | | color:'#fff' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLine:{ |
|---|
| | | lineStyle: { |
|---|
| | | color: '#e2e1e1',// x轴刻度线的颜色 |
|---|
| | | }}, |
|---|
| | | document.getElementById("menu-w").addEventListener('click', function () { |
|---|
| | | player.mainView(); |
|---|
| | | }, false); |
|---|
| | | |
|---|
| | | }, |
|---|
| | | document.getElementById("menu-m").addEventListener('click', function () { |
|---|
| | | player.leftView(); |
|---|
| | | }, false); |
|---|
| | | |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | | boundaryGap: [0, '100%'], |
|---|
| | | axisLabel: { |
|---|
| | | fontSize:9, |
|---|
| | | }, |
|---|
| | | splitLine:{ |
|---|
| | | lineStyle:{ |
|---|
| | | color:'#cdcdcd'// y轴分割线颜色 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | dataZoom: [ |
|---|
| | | { |
|---|
| | | type: 'inside', |
|---|
| | | start: 0, |
|---|
| | | end: 20 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | start: 0, |
|---|
| | | end: 20 |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: 'Fake Data', |
|---|
| | | type: 'line', |
|---|
| | | smooth: true, |
|---|
| | | symbol: 'none', |
|---|
| | | areaStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#88b0e2' //改变区域颜色 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | itemStyle : { |
|---|
| | | normal : { |
|---|
| | | color:'#dddede', //改变折线点的颜色 |
|---|
| | | lineStyle:{ |
|---|
| | | // color:'#8cd5c2' //改变折线颜色 |
|---|
| | | width:0.5, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: data |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | document.getElementById("menu-t").addEventListener('click', function () { |
|---|
| | | player.verticalView(); |
|---|
| | | }, false); |
|---|
| | | |
|---|
| | | if (option && typeof option === 'object') { |
|---|
| | | myChart.setOption(option); |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | var MyMarhq = ''; |
|---|
| | | clearInterval(MyMarhq); |
|---|
| | | $('.tbl-body tbody').empty(); |
|---|
| | | $('.tbl-header tbody').empty(); |
|---|
| | | var Items = [{"Ranking":"1","City":"保定","SaleIncome":"2506734.43","An":"53.00",}, |
|---|
| | | {"Ranking":"2","City":"沧州","SaleIncome":"1425935.58","An":"65.00",}, |
|---|
| | | {"Ranking":"3","City":"秦皇岛","SaleIncome":"1372207.38","An":"34.00",}, |
|---|
| | | {"Ranking":"4","City":"衡水","SaleIncome":"972451.15","An":"15.00",}, |
|---|
| | | {"Ranking":"5","City":"石家庄","SaleIncome":"939010.52","An":"-57.00",}, |
|---|
| | | {"Ranking":"6","City":"邢台","SaleIncome":"774274.70","An":"-20.00",}, |
|---|
| | | {"Ranking":"7","City":"唐山","SaleIncome":"680456.79","An":"-29.00",}, |
|---|
| | | {"Ranking":"8","City":"张家口","SaleIncome":"613319.87","An":"2.00",}, |
|---|
| | | {"Ranking":"9","City":"中油华奥","SaleIncome":"596575.25","An":"35.00",}, |
|---|
| | | {"Ranking":"10","City":"承德","SaleIncome":"589048.12","An":"30.00",}, |
|---|
| | | {"Ranking":"11","City":"廊坊","SaleIncome":"515448.14","An":"-48.00",}, |
|---|
| | | {"Ranking":"12","City":"瑞州","SaleIncome":"399875.26","An":"128.00",}, |
|---|
| | | {"Ranking":"13","City":"石家庄中油","SaleIncome":"90543.62","An":"-24.00",}, |
|---|
| | | {"Ranking":"14","City":"辛集中油","SaleIncome":"49255.52","An":"19.00",}, |
|---|
| | | {"Ranking":"15","City":"井陉中油","SaleIncome":"29682.60","An":"-74.00",}, |
|---|
| | | {"Ranking":"16","City":"保定中油","SaleIncome":"11887.73","An":"-64.00",}] |
|---|
| | | $.each(Items,function (i, item) { |
|---|
| | | str = '<tr>'+ |
|---|
| | | '<td>'+item.Ranking+'</td>'+ |
|---|
| | | '<td>'+item.City+'</td>'+ |
|---|
| | | '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+ |
|---|
| | | '<td>'+(+item.An).toFixed(2)+'</td>' |
|---|
| | | // '<td>'+(+item.Mom).toFixed(2)+'</td>'+ |
|---|
| | | // '<td>'+(item.SalePlan/10000).toFixed(2)+'</td>'+ |
|---|
| | | // '<td>'+(+item.PlanFinish).toFixed(2)+'</td>'+ |
|---|
| | | '</tr>' |
|---|
| | | document.getElementById("menu-b").addEventListener('click', function () { |
|---|
| | | player.backlView(); |
|---|
| | | }, false); |
|---|
| | | </script> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | var percent = 0; |
|---|
| | | var shipInfoBtn = document.getElementById("ship-info-btn"); |
|---|
| | | var speedDom = document.getElementById("speed"); |
|---|
| | | var timer = setInterval(function () { |
|---|
| | | if (percent < 100.00) { |
|---|
| | | percent += 0.04; |
|---|
| | | // percent += 1; |
|---|
| | | speedDom.innerText = percent.toFixed(2); |
|---|
| | | } else { |
|---|
| | | speedDom.innerText = '100.00'; |
|---|
| | | if (!hasClass(shipInfoBtn, "show")) { |
|---|
| | | addClass(shipInfoBtn, "show") |
|---|
| | | clearInterval(timer); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, 1); |
|---|
| | | |
|---|
| | | $('.tbl-body tbody').append(str); |
|---|
| | | $('.tbl-header tbody').append(str); |
|---|
| | | }); |
|---|
| | | if(Items.length > 10){ |
|---|
| | | $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html()); |
|---|
| | | $('.tbl-body').css('top', '0'); |
|---|
| | | var tblTop = 0; |
|---|
| | | var speedhq = 50; // 数值越大越慢 |
|---|
| | | var outerHeight = $('.tbl-body tbody').find("tr").outerHeight(); |
|---|
| | | function Marqueehq(){ |
|---|
| | | if(tblTop <= -outerHeight*Items.length){ |
|---|
| | | tblTop = 0; |
|---|
| | | } else { |
|---|
| | | tblTop -= 1; |
|---|
| | | } |
|---|
| | | $('.tbl-body').css('top', tblTop+'px'); |
|---|
| | | } |
|---|
| | | $(document).on('click','.btn-word', function () { |
|---|
| | | fullScreen(); |
|---|
| | | $("#mask").fadeOut(3000, function () { // 3000 |
|---|
| | | $("#menu").addClass("show"); |
|---|
| | | setTimeout(function () { |
|---|
| | | $("#ship-type-ul").css("transform", "translateY(-40px)"); |
|---|
| | | if (window.screen.width > 600) { |
|---|
| | | $("#ship-info-btn .btn-word").text("体验调度世界"); |
|---|
| | | $("#ship-info-btn").data("type", 2).addClass("show"); |
|---|
| | | $("#ship-info-btn #btn-lock").css("z-index", "10"); |
|---|
| | | $('#sidebar-btn').show(); |
|---|
| | | } |
|---|
| | | $("#menu li").css("transition", "all 200ms !important"); |
|---|
| | | setTimeout(function () { |
|---|
| | | removeClass(document.getElementById("title-box"), "show"); |
|---|
| | | }, 5000); |
|---|
| | | }, 1000); // 1000 |
|---|
| | | }); |
|---|
| | | $("#title-box, #logo").addClass("show"); |
|---|
| | | $("#ship-info-btn").removeClass("show"); |
|---|
| | | $('.speed.pointernone').addClass("hide"); |
|---|
| | | $("#ship-type-ul").css("transform", "translateY(-20px)"); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | MyMarhq = setInterval(Marqueehq,speedhq); |
|---|
| | | |
|---|
| | | // 鼠标移上去取消事件 |
|---|
| | | $(".tbl-header tbody").hover(function (){ |
|---|
| | | clearInterval(MyMarhq); |
|---|
| | | },function (){ |
|---|
| | | clearInterval(MyMarhq); |
|---|
| | | MyMarhq = setInterval(Marqueehq,speedhq); |
|---|
| | | }) |
|---|
| | | |
|---|
| | | } |
|---|
| | | $.each(Items,function (i, item) { |
|---|
| | | str = '<tr>'+ |
|---|
| | | '<td>'+item.Ranking+'</td>'+ |
|---|
| | | '<td>'+item.City+'</td>'+ |
|---|
| | | '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+ |
|---|
| | | '<td>'+(+item.An).toFixed(2)+'</td>'+ |
|---|
| | | '</tr>' |
|---|
| | | |
|---|
| | | $('.tbl-body tbody').append(str); |
|---|
| | | $('.tbl-header tbody').append(str); |
|---|
| | | }); |
|---|
| | | if(Items.length > 10){ |
|---|
| | | $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html()); |
|---|
| | | $('.tbl-body').css('top', '0'); |
|---|
| | | var tblTop = 0; |
|---|
| | | var speedhq = 50; // 数值越大越慢 |
|---|
| | | var outerHeight = $('.tbl-body tbody').find("tr").outerHeight(); |
|---|
| | | function Marqueehq(){ |
|---|
| | | if(tblTop <= -outerHeight*Items.length){ |
|---|
| | | tblTop = 0; |
|---|
| | | } else { |
|---|
| | | tblTop -= 1; |
|---|
| | | } |
|---|
| | | $('.tbl-body').css('top', tblTop+'px'); |
|---|
| | | } |
|---|
| | | |
|---|
| | | MyMarhq = setInterval(Marqueehq,speedhq); |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
