智能交通IoT大数据平台_arightboxbott

作者：思考机器4 | 2024-02-03 23:31:46
踩
arightboxbott
最近，公司做一个项目“智能交通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 + 73
			    let longitude = 118.58
			    let longitude2 = Math.random() * 360 - 180
			    // let latitude = Math.random() * 50 + 3.52
			    let latitude = 32.01
			    let latitude2 = Math.random() * 180 - 90
			    return {
			        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>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58394