master

分支 (1)

管理

管理

master

wdj
/
index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="3600" />
<title></title>

<link rel="stylesheet" type="text/css" href="css/default.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/climacons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
 <link href="wd1/css/styles.css" rel="stylesheet" type="text/css" />
  <link href="wd1/css/goal-thermometer.css" rel="stylesheet" type="text/css" />
   <link href="wd2/css/styles.css" rel="stylesheet" type="text/css" />
  <link href="wd2/css/goal-thermometer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/modernizr.custom.js"></script>
	<meta name="article" id="articlelink" content="/technology/javascript/20120823-gauge-justgage-js/" />
 <style>


      #g1 {
        width:200px; height:160px;
        display: inline-block;
        margin: 0em;
		border: 1px soild #202020;
		box-shadow: 0px 0px 15px #101010;
		margin-top: 10px;
		margin-left: -1px;
		border-radius: 8px;
      }
         #g2 {
         width:200px; height:160px;
        display: inline-block;
        margin: 0em;
		border: 1px soild #202020;
		box-shadow: 0px 0px 15px #101010;
		margin-top: 10px;
		border-radius: 8px;
      }
      #g3 {
        width:200px; height:160px;
        display: inline-block;
        margin: 0em;
		border: 1px soild #202020;
		box-shadow: 0px 0px 15px #101010;
		margin-top: 10px;
		border-radius: 8px;
      }

    </style>
	<script src="js/raphael.2.1.0.min.js"></script>
    <script src="js/justgage.1.0.1.min.js"></script>
	<script src="RGraph.common.core.js" ></script>
    <script src="RGraph.common.effects.js" ></script>
    <script src="RGraph.common.dynamic.js" ></script>
    <script src="RGraph.gauge.js" ></script>
    <script src="excanvas.js"></script>
	 <script src="wd1/js/jquery-latest.js"></script>
     <script type="text/javascript" src="wd1/js/goal-thermometer.js"></script>

   <script type="text/javascript" src="wd2/js/goal-thermometer.js"></script>
	<script>
	//获取数据风向接口
	    var FX,FS;

		$.ajax({
		type:"get",
		url: "http://localhost:8000/feng",
		dataType:"json",
		success:function (data) {
		FX=data.FX;
		FS=data.FS;
		$("#span1").html(FS);
		}});


	// 获取能见度

	var n1,n2,n3;
	$.ajax({
		type:"get",
		url: "http://localhost:8000/njd",
		dataType:"json",
		success:function (data) {
		n1=data.YFZ;
		n2=data.SFZ;
		n3=data.YHZ;
		}});
	//获取电压值
	var d1,d2,d3;
	$.ajax({
		type:"get",
		url: "http://localhost:8000/tyn",
		dataType:"json",
		success:function (data) {
		d1=data.SCDY;
		d2=data.SCDL;
		d3=data.DCDY;
		}});
		 //获取温度计
 var currentAmount = 22;//湿度
 var currentAmount2 = 22;//温度
 	$.ajax({
		type:"get",
		url: "http://localhost:8000/wsd",
		dataType:"json",
		success:function (data) {

		currentAmount=data.SD;
		currentAmount2=data.WD;
		}});

	$(function(){
    setInterval(function(){
              $.ajax({
		type:"get",
		url: "http://localhost:8000/feng",
		dataType:"json",
		success:function (data) {
		FX=data.FX;
		FS=data.FS;
		$("#span1").html(FS);
		}});
		$.ajax({
		type:"get",
		url: "http://localhost:8000/njd",
		dataType:"json",
		success:function (data) {
		n1=data.YFZ;
		n2=data.SFZ;
		n3=data.YHZ;
		}});
		$.ajax({
		type:"get",
		url: "http://localhost:8000/tyn",
		dataType:"json",
		success:function (data) {
		d1=data.SCDY;
		d2=data.SCDL;
		d3=data.DCDY;
		}});
		$.ajax({
		type:"get",
		url: "http://localhost:8000/wsd",
		dataType:"json",
		success:function (data) {

		currentAmount=data.SD;
		currentAmount2=data.WD;
		}});
		 $("#img1").css("transform", "rotate("+FX+"deg)");
                  },5000);
})


		//-------能见度开始
      var g1;

      window.onload = function(){
        var g1 = new JustGage({
          id: "g1",
          value: getRandomInt(0, 50000),
          min: 0,
          max: 5000,
          title: "",
          label: "m",
			levelColors: [
			  "#222222",
			  "#555555",
			  "#CCCCCC"
			]
        });

       setInterval(function() {
          g1.refresh(n1);
		  }, 800);
		  var g2 = new JustGage({
          id: "g2",
          value: getRandomInt(0, 50000),
          min: 0,
          max: 5000,
          title: "",
          label: "m",
			levelColors: [
			  "#222222",
			  "#555555",
			  "#CCCCCC"
			]
        });

        setInterval(function() {
          g2.refresh(n2);
        }, 800);
	    var g3= new JustGage({
          id: "g3",
          value: getRandomInt(0, 50000),
          min: 0,
          max: 5000,
          title: "",
          label: "HZ",
			levelColors: [
			  "#222222",
			  "#555555",
			  "#CCCCCC"
			]
        });

        setInterval(function() {
          g3.refresh(n3);
        }, 800);
//-----------------------能见度结束--电流开始


            var gauge2 = new RGraph.Gauge('cvs2', 0, 5000, [184]);
            gauge2.Set('chart.title.top', '');
            gauge2.Set('chart.title.bottom.size', 'Italic 14'); // Hmmmm
            gauge2.Set('chart.title.bottom.font', 'Impact');
            gauge2.Set('chart.title.bottom.color', '#ccc');
            gauge2.Set('chart.title.bottom','');
            gauge2.Set('chart.title.bottom.pos', 0.4);
            gauge2.Set('chart.background.color', 'black');
            gauge2.Set('chart.background.gradient', true);
            gauge2.Set('chart.centerpin.color', '#666');
            gauge2.Set('chart.needle.colors', [RGraph.RadialGradient(gauge2, 125, 125, 0, 125, 125, 25, 'transparent', 'white'),
                                               RGraph.RadialGradient(gauge2, 125, 125, 0, 125, 125, 25, 'transparent', '#d66')]);
            gauge2.Set('chart.needle.size', [null, 50]);
            gauge2.Set('chart.text.color', 'white');
            gauge2.Set('chart.tickmarks.big.color', 'white');
            gauge2.Set('chart.tickmarks.medium.color', 'white');
            gauge2.Set('chart.tickmarks.small.color', 'white');
            gauge2.Set('chart.border.outer', '#666');
            gauge2.Set('chart.border.inner', '#333');
            gauge2.Set('chart.colors.ranges', []);
            gauge2.Draw();
			function Updategauge2 () {
				gauge2.value = [d1]
				RGraph.Effects.Gauge.Grow(gauge2);
				setTimeout(Updategauge2, 2000);
			}
			Updategauge2();


			 var gauge13 = new RGraph.Gauge('cvs3', 0, 100, [184]);
            gauge13.Set('chart.title.top', '');
            gauge13.Set('chart.title.bottom.size', 'Italic 14'); // Hmmmm
            gauge13.Set('chart.title.bottom.font', 'Impact');
            gauge13.Set('chart.title.bottom.color', '#ccc');
            gauge13.Set('chart.title.bottom', '');
            gauge13.Set('chart.title.bottom.pos', 0.4);
            gauge13.Set('chart.background.color', 'black');
            gauge13.Set('chart.background.gradient', true);
            gauge13.Set('chart.centerpin.color', '#666');
            gauge13.Set('chart.needle.colors', [RGraph.RadialGradient(gauge13, 125, 125, 0, 125, 125, 25, 'transparent', 'white'),
                                               RGraph.RadialGradient(gauge13, 125, 125, 0, 125, 125, 25, 'transparent', '#d66')]);
            gauge13.Set('chart.needle.size', [null, 50]);
            gauge13.Set('chart.text.color', 'white');
            gauge13.Set('chart.tickmarks.big.color', 'white');
            gauge13.Set('chart.tickmarks.medium.color', 'white');
            gauge13.Set('chart.tickmarks.small.color', 'white');
            gauge13.Set('chart.border.outer', '#666');
            gauge13.Set('chart.border.inner', '#333');
            gauge13.Set('chart.colors.ranges', []);
            gauge13.Draw();
			function Updategauge13 () {
				gauge13.value = [d2]
				RGraph.Effects.Gauge.Grow(gauge13);
				setTimeout(Updategauge13, 2000);
			}
			Updategauge13();

			 var gauge4 = new RGraph.Gauge('cvs4', 0, 1000, [184]);
            gauge4.Set('chart.title.top', '');
            gauge4.Set('chart.title.bottom.size', 'Italic 14'); // Hmmmm
            gauge4.Set('chart.title.bottom.font', 'Impact');
            gauge4.Set('chart.title.bottom.color', '#ccc');
            gauge4.Set('chart.title.bottom', '');
            gauge4.Set('chart.title.bottom.pos', 0.4);
            gauge4.Set('chart.background.color', 'black');
            gauge4.Set('chart.background.gradient', true);
            gauge4.Set('chart.centerpin.color', '#666');
            gauge4.Set('chart.needle.colors', [RGraph.RadialGradient(gauge4, 125, 125, 0, 125, 125, 25, 'transparent', 'white'),
                                               RGraph.RadialGradient(gauge4, 125, 125, 0, 125, 125, 25, 'transparent', '#d66')]);
            gauge4.Set('chart.needle.size', [null, 50]);
            gauge4.Set('chart.text.color', 'white');
            gauge4.Set('chart.tickmarks.big.color', 'white');
            gauge4.Set('chart.tickmarks.medium.color', 'white');
            gauge4.Set('chart.tickmarks.small.color', 'white');
            gauge4.Set('chart.border.outer', '#666');
            gauge4.Set('chart.border.inner', '#333');
            gauge4.Set('chart.colors.ranges', []);
            gauge4.Draw();
			function Updategauge4 () {
				gauge4.value = [d3]
				RGraph.Effects.Gauge.Grow(gauge4);
				setTimeout(Updategauge4, 2000);
			}
			Updategauge4();

			 $("#img1").css("transform", "rotate("+FX+"deg)");
      };


    </script>

</head>

<body >

<div class="container">

	<header class="clearfix">
	</header>


	<div class="main">

		<ul id="rb-grid" class="rb-grid clearfix">
			<li class="icon-clima-1" >
			<!-- <div class="beijing" ></div> -->
					<div id="g1" style="background-color:#fff;margin-bottom:1em">

					</div>
				<br>
				<font style="color:black;">	每分钟能见度</font>
			</li>
			<li class="icon-clima-2">

					  <canvas id="cvs2" width="200" height="180"></canvas>
					  <br>
				<font style="color:black">输出电压</font>
			</li>
			<li class="icon-clima-1">
				 <div id="centered">
	        <!--add this line to the html where you want the thermometer-->
    		<div id="goal-thermometer"></div>
			 <br>
				<font style="color:black;margin-left:-2em">湿度</font>
		</div>
			</li>
			<li class="icon-clima-4">
				 <div id="centered1" >
	        <!--add this line to the html where you want the thermometer-->
    		<div id="goal-thermometer1"></div>
			 <br>
				<font style="color:black;margin-left:-2em" >温度</font>
			</li>
			<li class="icon-clima-5">
				<div id="g2" style="background-color:#fff;margin-bottom:1em">

					</div>
					<br>
				<font style="color:black">	十分钟能见度频率</font>
			</li>
			<li class="icon-clima-1">
				  <canvas id="cvs3" width="200" height="180"></canvas>
				   <br>
				<font style="color:black">输出电流</font>
			</li>
			<li class="icon-clima-2" >
				<div style="margin-top:5em;margin-left:5em">
				<img  src="FX.png" id="img1"  width="200px",height="200px"/>
				</div>
				   <br>
				<font style="color:black;margin-left:6em"  >风速：<span id="span1"></span></font>
			</li>
			<li class="icon-clima-11">

			</li>
			<li class="icon-clima-1">
				<div id="g3" style="background-color:#fff;margin-bottom:1em">

					</div>
				<br>
				<font style="color:black">	每分钟能见度频率</font>
			</li>
			<li class="icon-clima-2">
				  <canvas id="cvs4" width="200" height="180">[No canvas support]</canvas>
				   <br>
				<font style="color:black">电池电压</font>
			</li>
			<li class="icon-clima-11">

			</li>
		</ul>

	</div>
</div><!-- /container -->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fittext.js"></script>
<script type="text/javascript" src="js/boxgrid.js"></script>
<script type="text/javascript">
$(function(){
	Boxgrid.init();
});
</script>

</body>
</html>