首页 > 编程学习 > 智能交通IoT大数据平台

智能交通IoT大数据平台

发布时间:2022/12/10 17:55:15

最近,公司做一个项目“智能交通IoT大数据平台”,前端WEB界面酷炫的效果特分享给大家。

项目名称:智能交通IoT大数据平台

技术标签:Html5、Css、JavaScript、Echarts(世界地图、柱状图)

支持平台:PC端 浏览器

说明:通过Html5、Css、JavaScript、Echarts等前端技术展示酷炫的界面效果。

以下为代码:

<!doctype html><head><meta charset="utf-8" /><title>智能交通IoT大数据平台</title><style type="text/css">*{margin: 0;padding: 0;}body{width: 100%;height: 100%;}#box{				width: 1200px;height: 980px;left:15%;top:5%;position: absolute;}</style></head>
<link href="css/style.css"  rel="stylesheet" type="text/css" media="all" />
<script src="js/echarts.min.js" charset="utf-8"></script>
<script src="js/jquery-3.2.0.min.js" charset="utf-8"></script>
<script src="beijing.js"></script><body>
<div class="wpbox">
<div class="bnt"><div class="topbnt_left fl"><ul></ul></div><h1 class="tith1 fl">智能交通IoT大数据平台</h1><div class=" fr topbnt_right"><ul></ul></ul></div>
</div>
<!-- bnt end -->
<div class="left1"><div class="aleftboxttop pt1"><h2 class="tith2">设备数国家排名TOP5</h2><div class="pvr fl liwp lpeftb2otcont1" style="height:70%;" ><ul><li class="hot1">1</li><li class="hot2">2</li><li class="hot3">3</li><li class="hot4">4</li><li class="hot5">5</li></ul><div id="pleftbox2bott_cont"class="lpeftb2otcont"  style="height:100%;"></div></div><!-- lefttoday_number end --></div><div class="aleftboxtmidd"><h2 class="tith2 pt2">设备数城市排名TOP5</h2><div class="pvr fl liwp lpeftb2otcont1" style="height:70%;" ><ul><li class="hot1">1</li><li class="hot2">2</li><li class="hot3">3</li><li class="hot4">4</li><li class="hot5">5</li></ul><div id="pleftbox2bott_cont2" class="lpeftb2otcont"  style="height:100%;"></div></div></div><div class="aleftboxtbott"><h2 class="tith2">故障分类</h2><!-- <div class="lefttoday_tit height"><p class="fl">状态:已调节.æl,kmo</p><p class="fr">时间段:2018-06-10 至 2018-06-14</p></div> --><div id="aleftboxtmidd" class="aleftboxtbott_cont2" ></div>
</div>
</div>
<!--  left1 end -->
<div class="mrbox"><div class="mrbox_topmidd" style="width: 69%;"><div class="amiddboxttop"><h2 class="tith2 pt1">全球分布图</h2><div class="hot_map" id="topmap"   ><p>总数:<span style="color:rgb(0,176,240)">10000</span> </p><p>在线:<span style="color:rgb(0,176,80)">9675</span> </p><p>离线:<span style="color:rgb(255,196,0)">53</span> </p><p>故障:<span style="color:red">32</span></p></div></div></div><!-- mrbox_top end --><div class="mrbox_top_right"><div class="arightboxtop"><h2 class="tith2">消息通知</h2><div class="lefttoday_tit"><p class="fl">消息通知内容</p><p class="fr">发生时间</p></div><div class="left2_table"><ul><li><p class="fl"><b>LED显示屏电量不足</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED右转指示标致电路异常</b><br>中山路与人民路交叉口。<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li><p class="fl"><b>LED右转指示标致断开网络</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED路程指示标致位置统称</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li><p class="fl"><b>LED路程指示标致振动异常</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED路程指示标致维修完成</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p><li><p class="fl"><b>LED显示屏安装完成</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED路程指示标致安装完成</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p><li><p class="fl"><b>LED显示屏安装完成</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p></li><li class="bg"><p class="fl"><b>LED路程指示标致安装完成</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p><li><p class="fl"><b>LED显示屏安装完成</b><br>中山路与人民路交叉口,<br></p><p class="fr pt17">2018-06-22 10:00</p></li></ul></div></div><div class="arightboxbott"><h2 class="tith2 ">设备信息</h2><div id="aleftboxtmiddr" class="arightboxbottcont2"><table width="100%" height="100%" ><tr><td><p>设备编号:LED-902</p><p>设备名称:右转指示灯</p><p>类别:LED灯</p><p>状态:电量不足</p><p>电压:10V</p><p>温度:12℃</p><p>湿度:10%</p><p>位置:中山路人民路交XXXXXXXXXXXXXXX叉口</p><p>经纬度:22222,555555</p></td><td ><img src="./img/device.png"></img></td></tr></table></div></div></div><!-- mrbox_top_right end --></div></div>
</div><div id="box" class="box"></div><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><script src="js/echarts-gl.js" type="text/javascript" charset="utf-8"></script><script src="js/china.js" type="text/javascript" charset="utf-8"></script><script src="js/world.js" type="text/javascript" charset="utf-8"></script><script src="js/data-1499132667476-ry7ZXuu4Z.js" type="text/javascript" charset="utf-8"></script>	<script type="text/javascript">var config = {color: '#750be8',levels: 1,intensity: 4,threshold: 0.01}var canvas = document.createElement('canvas');canvas.width = 2048;canvas.height = 1024;context = canvas.getContext("2d");context.lineWidth = 0.5;context.strokeStyle = config.color;context.fillStyle = config.color;context.shadowColor = config.color;			$.when($.getScript('./js/world-gl-map/d3-contour.js'),$.getScript('./js/world-gl-map/d3_geo.js'),$.getScript('./js/world-gl-map/d3_timer.js')).done(function () {image('img/8.png').then(function(image) {var m = image.height,n = image.width,values = new Array(n * m),contours = d3.contours().size([n, m]).smooth(true),projection = d3.geoIdentity().scale(canvas.width / n),path = d3.geoPath(projection, context);//   StackBlur.R(image, 5);for (var j = 0, k = 0; j < m; ++j) {for (var i = 0; i < n; ++i, ++k) {values[k] = image.data[(k << 2)] / 255;}}var opt = {image: canvas}var results = [];function update(threshold, levels) {context.clearRect(0, 0, canvas.width, canvas.height);var thresholds = [];for (var i = 0; i < levels; i++) {thresholds.push((threshold + 1 / levels * i) % 1);}results = contours.thresholds(thresholds)(values);redraw();}function redraw() {results.forEach(function (d, idx) {context.beginPath();path(d);context.globalAlpha = 1;context.stroke();if (idx > config.levels / 5 * 3) {context.globalAlpha = 0.01;context.fill();}});opt.onupdate();}d3.timer(function(t) {var threshold = (t % 10000) / 10000;update(threshold, 1);});initCharts(opt);update(config.threshold, config.levels);});		function image(url) {return new Promise(function(resolve) {var image = new Image();image.src = url;image.onload = function() {var canvas = document.createElement("canvas");canvas.width = image.width / 8;canvas.height = image.height / 8;var context = canvas.getContext("2d");context.drawImage(image, 0, 0, canvas.width, canvas.height);resolve(context.getImageData(0, 0, canvas.width, canvas.height));};});}function initCharts(opt) {var myChart = echarts.init(document.getElementsByClassName("box")[0])let canvas2 = document.createElement('canvas');let mapChart = echarts.init(canvas2, null, {width: 2048,height: 1024});var contourChart = echarts.init(document.createElement('canvas'), null, {width: 2048,height: 1024});var img = new echarts.graphic.Image({style: {image: opt.image,x: -1,y: -1,width: opt.image.width + 2,height: opt.image.height + 2}});contourChart.getZr().add(img);opt.onupdate = function () {img.dirty();};mapChart.setOption({series: [{type: 'map',map: 'world',// 绘制完整尺寸的 echarts 实例top: 0,left: 0,right: 0,bottom: 0,boundingCoords: [[-180, 90],[180, -90]]}]});var canvas1 = document.createElement('canvas');var mapChart1 = echarts.init(canvas1, null, {width: 2048,height: 1024});mapChart1.setOption({backgroundColor: 'transparent',series: [{type: 'map',map: 'china',left: 0,top: 0,right: 0,bottom: 0,//   environment: '#000',boundingCoords: [[-180, 90],[180, -90]],label: {normal: {show: false,fontSize: 4,lineHeigh: 4,color: '#000',}},itemStyle: {normal: {areaColor: 'transparent',borderWidth: 1,borderType: 'solid',borderColor: '#a85000'}},}]});		var option = {title: {text: '点击地球获取该区域地图',textStyle: {color: '#fff'}},tooltip: {show: true},//		    visualMap: [{//		        // show: false,//		        type: 'continuous',//		        seriesIndex: 0,//		        text: ['scatter3D'],//		        textStyle: {//		            color: '#fff'//		        },//		        calculable: true,//		        max: 3000,//		        inRange: {//		            color: ['#87aa66', '#eba438', '#d94d4c']//		        }//		    }],globe: {//		        baseTexture: mapChart,environment:'none',//背景//environment:'img/charity_top.png',heightTexture: 'img/bathymetry_bw_composite_4k-back.jpg',baseTexture: 'img/8.png',shading: 'lambert',light: { // 光照阴影main: {color: 'blue', // 光照颜色intensity: 14.2, // 光照强度shadowQuality: 'ultra', //阴影亮度shadow: true, // 是否显示阴影alpha: 40,beta: -30},ambient: {intensity: 4.6}},viewControl: {alpha: 30,beta: 160,
//			            targetCoord: [116.46, 39.92],autoRotate: true,autoRotateAfterStill: 10,distance: 240,autoRotateSpeed:4},postEffect: {//为画面添加高光,景深,环境光遮蔽(SSAO),调色等效果enable: true, //是否开启SSAO: {//环境光遮蔽radius: 1,//环境光遮蔽的采样半径。半径越大效果越自然intensity: 1,//环境光遮蔽的强度enable: true}},layers: [{type: 'blend',blendTo: 'emission',texture: contourChart,intensity: config.intensity}]},series: [{name: 'lines3D',type: 'lines3D',coordinateSystem: 'globe',effect: {show: true,period: 2,trailWidth: 3,trailLength: 0.5,trailOpacity: 1,trailColor: '#0087f4'},blendMode: 'lighter',lineStyle: {width: 1,color: '#0087f4',opacity: 0.2},data: [],//		        data: [{//		            from: 'A',//		            to: 'B',//		            coords: [//		                [-83.69501541554166, -75.76453333240994],//						[105.18, 37.51]//		            ],//		            value:"2013.48"//		        }, {//		            from: 'A',//		            to: 'C',//		            coords: [//		                [118.377173, 31.337123],//		                [105.18, 37.51]//		            ],//		            value:"2013.48"//		        }],silent: false},{ //点name: '景区',//		        type: 'effectScatter',//		        coordinateSystem: 'bmap',type: 'scatter3D',blendMode: 'lighter',coordinateSystem: 'globe',showEffectOn: 'render',zlevel: 2,effectType:"ripple", symbolSize: 15,rippleEffect: {period: 4,scale: 4,brushType: 'fill'},//		        showEffectOn: 'hover',hoverAnimation: true,label: {normal: {show: true,position: 'right',
//			                formatter: '{b}',formatter:function(params){if(params.dataIndex == 1){return '中国-无锡'}else if(params.dataIndex == 2){return '韩国'}else if(params.dataIndex == 3){return '印度'}else if(params.dataIndex == 4){return '日本'}else if(params.dataIndex == 5){return '台湾'}else if(params.dataIndex == 0){return '泰国'}else if(params.dataIndex == 6){return '缅甸'}},textStyle: {fontSize: 18,color: '#f5d909',fontWeight:'bold',
//			                    backgroundColor:'rgba(255,255,255,0.2)'backgroundColor:'transparent'}}},itemStyle: {normal: {color: 'rgb(29,183,255)'}},//		        data: [{//		            'name': 'A',//		            'value': [105.18, 37.51, 1500]//		        }, {//		            'name': 'B',//		            'value': [118.393252, 31.15576, 1500]//		        }, {//		            'name': 'C',//		            'value': [117.989662, 31.293115, 1500]//		        }]data:[[102.58, 15.01],[120.58, 32.01],[127.38, 35.8],[80.58, 21.01],[139.46, 35.42],[121.68, 24.50],[95.90, 20.31]]}]}// 随机数据option.series[0].data = [{coords:[[102.58, 15.01],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},{coords:[[123.38, 41.8],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},{coords:[[127.38, 35.8],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},{coords:[[139.46, 35.42],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},	{coords:[[121.68, 24.50],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)},	{coords:[[102.90, 25.31],[120.58, 32.01]],value: (Math.random() * 3000).toFixed(2)}]for (let i = 0; i < 10; i++) {option.series[0].data = option.series[0].data.concat(rodamData())}function rodamData() {let name = '随机点' + Math.random().toFixed(5) * 100000// let longitude = Math.random() * 62 + 73let longitude = 118.58let longitude2 = Math.random() * 360 - 180// let latitude = Math.random() * 50 + 3.52let latitude = 32.01let latitude2 = Math.random() * 180 - 90return {coords: [[longitude2, latitude2],[longitude, latitude]],value: (Math.random() * 3000).toFixed(2)}}			myChart.setOption(option)	//点击事件,根据点击某个省份计算出这个省份的数据myChart.on('click', function (params) {console.log(params);//逻辑控制alert(params);});}}) 			</script><script type="text/javascript">var myChart = echarts.init(document.getElementById('pleftbox2bott_cont'));option = {color:['#7ecef4'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left:45,right:20,top:25,bottom:0,containLabel: true},xAxis: {type: 'value',axisLine:{lineStyle:{color:'rgba(255,255,255,0)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,0)'}},axisLabel:{color:"rgba(255,255,255,0)"},boundaryGap: [0, 0.01]},yAxis: {type: 'category',axisLine:{lineStyle:{color:'rgba(255,255,255,.5)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.5)"},data: ['缅甸','印度','日本','泰国','中国']},series: [{name: '',type: 'bar',barWidth :20,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 1,[{offset: 0, color: 'rgba(230,253,139,.7)'},{offset: 1, color: 'rgba(41,220,205,.7)'}])}},data: [18203, 23489, 29034, 104970, 131744]}]};myChart.setOption(option);</script><script type="text/javascript">var myChart = echarts.init(document.getElementById('pleftbox2bott_cont2'));option = {color:['#7ecef4'],backgroundColor: 'rgba(1,202,217,.2)',grid: {left:45,right:20,top:17,bottom:10,containLabel: true},xAxis: {type: 'value',axisLine:{lineStyle:{color:'rgba(255,255,255,0)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,0)'}},axisLabel:{color:"rgba(255,255,255,0)"},boundaryGap: [0, 0.01]},yAxis: {type: 'category',axisLine:{lineStyle:{color:'rgba(255,255,255,.5)'}},splitLine:{lineStyle:{color:'rgba(255,255,255,.1)'}},axisLabel:{color:"rgba(255,255,255,.5)"},data: ['无锡','上海','杭州','苏州','南京']},series: [{name: '',type: 'bar',barWidth :20,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 1,[{offset: 0, color: 'rgba(230,253,139,.7)'},{offset: 1, color: 'rgba(41,220,205,.7)'}])}},data: [18203, 23489, 29034, 104970, 131744]}]};myChart.setOption(option);</script><script type="text/javascript">
var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
option = {
color:['#d2d17c','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a',  '#00b7ee', '#81dabe','#5fc5ce'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {left:60,right:60,top:20,bottom:0,containLabel: true},legend: {left: 10,top: 5,textStyle:{fontSize:10,color:'rgba(255,255,255,.6)'},data: ['电量不足','位置偏移','振动异常','电路异常','设备离线']},calculable : true,series : [{name:'面积模式',type:'pie',radius : [20, 70],center : ['50%', '55%'],roseType : 'area',data:[{value:187650, name:'电量不足'},{value:145896, name:'位置偏移'},{value:148920, name:'振动异常'},{value:148920, name:'电路异常'},{value:148920, name:'设备离线'},]}]};
myChart.setOption(option);
</script>
</body>
</html>

 


本文链接:https://www.ngui.cc/zz/1569065.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000