hanzhengyi
/
wxapp2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <!-- <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> -->
    <script src="__PUBLIC__/wxapp/js/jquery-1.8.3/jquery.min.js"></script>
    <script src="__PUBLIC__/wxapp/js/echarts.min.js"></script>
        <script src="__PUBLIC__/html/video/ezuikit.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/wxapp/css/jdxf.css">
    <title>设备详情</title>
    <style>
        .bjbox{
            margin: 15px 0;
        }
        .mar{
            margin: 0 30px;
        }
        .bjbox-c{
            font-size: 14px;
            color: #646464;
        }
        .box{
            height: 20px;
            background-color: #F5F5F5;
        }

        .mar-words {
            float: right;
            font-size: 18px;
        }

        .height1dcdcdc {
            display: block;
            height: 1px;
            margin-top: 2px;
            margin-bottom: 20px;
            background: #DCDCDC;
        }

    </style>
</head>
<body>
<!-- 头部 -->
<div class="hand">
	<span class="hand-i"><!-- <i class="fa fa-angle-down"></i> -->
	<a href="__MODULE__/Dmanger/index{$tokenurl}/companyid/{$companyid}">
	<img  style="height: 16px;" src="__PUBLIC__/wxapp/images/jd_07.png" alt="">
	</a>
	</span>
    设备详情
</div>
<!-- 内容块 -->
<div class="bjbox">
    <!-- <div class="bjbox-c mar">
        <span>2018/02/20 10:25</span>
        <span style="float: right;">离线</span>
    </div> -->
    <div class="mar">
        <span class="ownername">{$list.owner_name}</span>
        <span class="mar-words" style="color: #646464;">{$list.zs_status}</span>
    </div>
</div>
<div class="box"></div>

<div class="bjbox">
    <div class="bjbox-c mar">基本信息</div>
    <div class="height1dcdcdc"></div>

    <div class="mar">
        剩余电流：{$mA}mA <br>
        温度：{$t}℃ <br>
        设备类型：{$list.dwtypes} <br>
        设备编号：{$list.deviceid} <br>
        物联网卡号：{$list.sim}<br>
        添加时间：{$list.install_time}
    </div>

</div>
<div class="box"></div>

<div class="bjbox">
    <div class="bjbox-c mar">基本信息</div>
    <div class="height1dcdcdc"></div>

    <div class="mar">
        {$list.owner_address}
    </div>

</div>
<div class="box"></div>

<div class="bjbox">
    <div class="bjbox-c mar">视频</div>
    <div class="height1dcdcdc" style="    margin-bottom: 0;"></div>
    <div class="br-video-body" >
        <video id="video123" style="width: 100%; height: 200px" poster="" controls playsInline webkit-playsinline autoplay >
             <!--<source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b" type="" />-->
             <!--<source src="http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" type="application/x-mpegURL" />-->
            <source src="{$list.rtmp}" type="" />
            <source src="{$list.hls}" type="application/x-mpegURL" />
        </video>
        <script>
            var player = new EZUIPlayer('video123');
            player.on('error', function(){
                console.log('error');
            });
            player.on('play', function(){
                console.log('play');
            });
            player.on('pause', function(){
                console.log('pause');
            });
        </script>
	</div>
    <!--<div class="mar" style="margin: 0">
        {$list.h5}
    </div>-->
</div>
<div class="box"></div>

<script>
			// sydl/wd
			owner_3('ownerinfo_3');
			function owner_3(part){

				var option = {
					color: ["#67e0e3","#e062ae"],
				    title: {
				        text: '剩余电流/温度',
						textStyle: {
							fontSize:14,
							color: '#7affff',
							fontWeight: '100'
						},
						left:5,
				    },

				    tooltip: {
				        trigger: 'axis',
				        // formatter: "{a1} {b1} {c1}℃<br>{a} {b} {c}mA<br>",
				        formatter:function(data,ticket,callback){
				        	// console.log(data);
				        	var res = "";
				        	var a_unit = ["mA","℃"]
				        	for(var i=0;i<data.length;i++){
				        		res += data[i].seriesName+" "+data[i].value+a_unit[i]+"<br>";
				        	}
				        	return res;
				        }
				    },
				    legend: {
				        data:['剩余电流','温度'],// 
				        textStyle: {
		                    color: '#fff',
		                },
						left:5,
						top:20,
				    },
				    grid: {
				    	top:50,
				        left: '4%',
				        right: '4%',
				        bottom: '8%',
				        containLabel: true,
				        height:220,
				    },

				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: {$res_time},
				        axisLabel: {
							color: '#ffffff'
						},

				    },
				    yAxis: {
				        type: 'value',
						axisLine: {
							lineStyle: {
								color: '#2b5baa'
							}
						},
						axisLabel: {
							color: '#ffffff'
						},
				        splitLine:{
				        	lineStyle:{
				        		color:"#2b5baa",
				        	},
				        },
				    },
//				    dataZoom: [
//				        {   
//				            type: 'slider', 
//				            start: 0,      
//				            end: 100,
//				            bottom:0,
//				            dataBackground: {
//								areaStyle: {color:"#87f96d"},
//							},
//							textStyle:{
//								color:"#f00",
//							},					
//							height:30,
//							showDetail:false,
//
//				        }
//				    ],
				    series: [
				        {
				            name:'剩余电流',
				            type:'line',
				            data:{$res_sydl},
				            symbol:"triangle",
				            symbolSize:10,
				        },
				        {
				            name:'温度',
				            type:'line',
				            data:{$res_wd},
				            symbol:"roundRect",
				            symbolSize:10,
				        },
				    ]


				};

				var myChart3 = echarts.init(document.getElementById(part)); //4echers // 基于准备好的dom，初始化echarts实例
				myChart3.clear();
				myChart3.setOption(option); // 使用刚指定的配置项和数据显示图表。		
				//4echers // 基于准备好的dom，初始化echarts实例
				// var myChart3 = echarts.init(document.getElementById('wd'));
				// myChart3.setOption(option);// 使用刚指定的配置项和数据显示图表。
			}
			// sxdy/sxdl
			owner_4('ownerinfo_4');
			function owner_4(part){
				var option = {
					color: ["#e062ae", "#67e0e3", "#00dd71",'#ffdb5c', '#37a2da', '#00dd71'],
				    title: {
				        text: '三相电压/三相电流',

				        textStyle:{
				        	fontSize:14,
				        	color: '#7affff',
				        },
				        left:5,
				    },
		            label: {

					},
				    tooltip: {
				        trigger: 'axis',
				        // formatter: "{a1} {b1} {c1}℃<br>{a} {b} {c}mA<br>",
				        formatter:function(data,ticket,callback){
				        	// console.log(data);
				        	var res = "";
				        	var a_unit = ["v","v","v","mA","mA","mA"];
				        	for(var i=0;i<data.length;i++){
				        		res += data[i].seriesName+" "+data[i].value+a_unit[i]+"<br>";
				        	}
				        	return res;
				        }
				    },
				    legend: {
				        data:['Ua','Ub','Uc','Ia','Ib','Ic'],

				        textStyle:{
				        	color: '#fff',
				        },
						left:5,
						top:20,
				    },
				    grid: {
				    	top:50,
				        left: '4%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true,
				        height:220,
				    },

				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: {$res_time},
				        axisLabel: {
							color: '#ffffff'
						},
				    },
				    yAxis: {
				        type: 'value',
						axisLine: {
							lineStyle: {
								color: '#2b5baa'
							}
						},
						axisLabel: {
							color: '#ffffff'
						},
				        splitLine:{
				        	lineStyle:{
				        		color:"#2b5baa",
				        	},
				        },
				    },
//				    dataZoom: [
//				        {   
//				            type: 'slider', 
//				            start: 0,      
//				            end: 100 ,
//				            dataBackground: {
//								areaStyle: {color:"#87f96d"},
//							},
//							height:30,
//							showDetail:false,            
//				        }
//				    ],
				    series: [
				        {
				        	name:'Ua',
				        	type:'line',
				            data:{$res_ua},
				            symbolSize:10,
				        },
				        {
				            name:'Ub',
				            type:'line',
				            data:{$res_ub},
				            symbolSize:10,
				        },
				        {
				            name:'Uc',
				            type:'line',
				            data:{$res_uc},
				            symbolSize:10,
				        },
				        {
				        	name:'Ia',
				        	type:'line',
				            data:{$res_ia},
				            symbol:"triangle",
				            symbolSize:10,
				        },
				        {
				            name:'Ib',
				            type:'line',
				            data:{$res_ib},
				            symbol:"triangle",
				            symbolSize:10,
				        },
				        {
				            name:'Ic',
				            type:'line',
				            data:{$res_ic},
				            symbol:"triangle",
				            symbolSize:10,
				        },
				    ]
				};
				//4echers // 基于准备好的dom，初始化echarts实例
				var myChart4 = echarts.init(document.getElementById(part));
				myChart4.clear();
				myChart4.setOption(option);// 使用刚指定的配置项和数据显示图表。
			}
	

</script>
</body>
</html>