cxc
/
ifm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
							<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>慧牧科技</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
#include("template/huimv-hkclient-head.vm")
<!-- 百度地图API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Gi6loTlqG5RF57Fvmx4YwYNv"></script>
<link href="views/hkclient/css/home.css" rel="stylesheet">
<script src="views/hkclient/js/home.js"></script>
<style rel="stylesheet">
/* Header example */
.example {
    margin: 0 auto;
    height: 100%;
}

.example .frame {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-shadow: none;
}
.cellName1 {
	height: 50px;
    line-height: 50px;
    width: 100%;
    font-size: x-large;
    font-weight: bold;
}
/* 改 */
html, body {
	background: url('views/hkclient/img/bjt.jpg');
	background-repeat: no-repeat;
    background-size: 145%;
}
.flex-container section div.wrapper #chartA, .flex-container section div.wrapper #chartB, .flex-container section div.wrapper #chartC{
	padding: 10px;
}
.flex-container section.secA {
	background: url('views/hkclient/img/kuang.PNG') !important;
}
.flex-container section.secA,.flex-container section.secB,.flex-container section.secC {
	width: 37%;
	height: 32%;
  	background: url('views/hkclient/img/mjbk.PNG');
	margin: 10px 0 0 10px;
}
@media screen and (max-width: 1000px) { 
	.flex-container section.secA,.flex-container section.secB,.flex-container section.secC {
		width: 37%;
		height: 32%;
	  	background: url('views/hkclient/img/mjbk.PNG');
		margin: 7px 0 0 10px;
	}
}
.flex-container section.secD,.flex-container section.secE{
	width: 60%;
}
.flex-container section.secD #zddtBody,.mapGif {
	padding:36px 28px 28px 28px;
  	background: url('views/hkclient/img/dtbk.PNG');
	height: 60% !important;
}
.flex-container section.secE {
  	background: url('views/hkclient/img/mjbk.PNG');
}
.flex-container section.secA,.flex-container section.secB,.flex-container section.secC,.flex-container section.secD #zddtBody,.mapGif,
.flex-container section.secE{
	background-size: 100% 100% !important;
	background-position: 0;
	background-repeat: no-repeat;
    background-color: transparent;
    position: relative;
}
.flex-container section.secA .tillt,.flex-container section.secB .tillt,.flex-container section.secC .tillt,.title{
	padding: 0 22px;
}
.title{
	font-size: 12px;
	margin: 11px 0;
}
.title li{
	color: #d9dadc;
}
.title li.active {
	text-shadow: 0 0 2px #00f;
}
#mapGif {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	background-color:rgba(255, 255, 255, 0.3);
}
.tillt h5{
	font-size: 12px;
}
.flex-container section .tillt {
    text-shadow: 0 0 6px #fff;
    height: 25px;
    margin: 11px 0;
    padding: 0 12px;
    position: relative;
    display: flex;
	flex-direction: row;
	align-items: center;
}
.flex-container section .tillt h5 {position: absolute;width: 26%;height: 25px;line-height: 25px;padding: 0 11px;margin: 0;z-index: 9;top: 0;}
.flex-container section div.wrapper {background-color: transparent;overflow: hidden;}
.syMc{letter-spacing:12px;font-weight:normal;font-size: 30px;white-space: pre;display: inline-block;color: #1b57a7;background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(26, 85, 161, 1)), to(rgba(146, 194, 255, 1)));-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent,transparent 10%,rgba(255,255,255,.2));}
.example .frame ul li:nth-child(odd),.example .frame ul li:nth-child(even){background-color: transparent;}
.example .frame ul li{color: #a2a4ab;margin: 0 1px 0 6px;}
#mcqk{background: url('views/hkclient/img/scqkbk.PNG');background-repeat: no-repeat;background-size: 100% 100%;background-color: transparent;background-position: 0;position: relative;overflow: hidden;height: 19%;margin-bottom: 1%;}
#mcqk ul{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;padding-top: 1%;}
#mcqk ul li{width: 42%;margin: 1% 0;font-size: 12px;color: #d9dadc;display: flex;justify-content: space-between;}
@font-face {font-family: myFirstFont;src: url('views/hkclient/font/font-family.ttf');}
#mcqk ul li span {font-family:myFirstFont;font-weight: bold;letter-spacing: 9px;font-size: 16px;}
#mcqk .tillt{padding: 0 22px;}
.fk{position: absolute;top: 5px;right: 10px;display: flex;flex-direction: row;color: #8DC0FF;}
.fk div{margin: 0 10px;}
.fk div strong{font-size: 24px;margin: 0 10px;}
@media screen and (max-width: 1000px) { 
	.fk div strong{font-size: 15px;margin: 0 5px;}
	.fk {top: 10px;}
}
.table{margin-bottom:0;}
td{border: none !important;font-size: 16px;}
td:nth-of-type(1){padding-left: 30px !important;white-space: pre;}
td:nth-of-type(2){padding-right: 20px !important;text-align: right;color: #f04f2f;}
td:nth-of-type(3){padding-top: 14px !important;padding-right: 30px !important;}
.mcdbt {
	position: absolute;
	top: 0;
	padding: 0 42px;
}
/*在进度条元素上调用动画*/
#fill{
	height:	12px;
    animation: move 2s;
    background: -webkit-linear-gradient(left, #2b8cc4 40% , #3ebcd9 100%);
}
@keyframes move {
    0%{
        width:0;
    }
    100%{
        width:100%;
    }
}

/** 分辨率适应  **/
@media screen and (max-width: 1000px) { 
	.table>thead>tr>th, .table>thead>tr>td, .table>tbody>tr>th, .table>tbody>tr>td, .table>tfoot>tr>th, .table>tfoot>tr>td {
	    padding: 4px;
	    line-height: 1.42857;
	    vertical-align: top;
	    border-top: 1px solid #ddd;
	    font-size:12px;
	}
	.flex-container section .tillt {
		margin: 5px 0px 5px -10px;
	}
	.syMc {
		letter-spacing: 7px;
		font-size:25px;
	}
	#mcqk ul li {
		margin: 0.6% 0;
	}
	#mcqk ul li span {
		margin: -3px 1px 0 0;
		letter-spacing: 4px;
	}
	.cellName1{
		height: 30px;
	    line-height: 20px;
	    width: 100%;
	    font-size: larger;
	    font-weight: bold;
	}
	.mcdbt {
		position: absolute;
		top: 0;
		padding: 0 27px;
		font-size: 0.83em;
		font-weight: bold;
	}
	.frame {
		font-size:12px;
	}
}
</style>
<script type="text/javascript">
var timer;
$(function(){
	sly.activate(0);
	loadZddtMap();
	window.clearInterval(timer);
	timer = window.setInterval(function(){
		loadZsxx();
	}, 600000);
});

/**
 * 加载
 */
function loadSj(lqid, zsid, qyid) {
	$("#hkzsid").val(zsid);
	var obj1 = $("#secA").find("li.active");
	var obj = $("#secB").find("li.active");
	hkclient.loadMobilePage("chartA", "getHkClient" + $(obj1).data("for") + "Main.htm?lqid=" + lqid);
	var qyidOld = $("#qyid").val();
		qyid = "14";
	if (qyidOld == "" || qyidOld != qyid) {
		$("#qyid").val(qyid);
		hkclient.loadMobilePage("chartB", "getHkClient" + $(obj).data("for") + "Main.htm?qyid=" + qyid);
	}
	/* hkclient.loadMobilePage("chartB", "getHkClient" + $(obj).data("for") + "Main.htm?mcid=" + $("#mcid").val()); */
	hkclient.loadMobilePage("chartC", "getHkClientMtxhMain.htm?mcid=" + $("#mcid").val());
}

/**
 * 加载地图
 */
function loadZddtMap() {
	hkclient.loadMobilePage("zddtBody", "loadHkdtMap.htm?mcid=" + $("#mcid").val());
}

/**
 * 刷新猪舍信息
 */
function loadZsxx() {
	jQuery.getJSON("getHkClientZsxx.htm", {mcid : $("#mcid").val()}, function(data) {
		for (var o in data) {
			if (data[o].dqwd == "") {
				//$("#wd" + data[o].id).html("<font color='#FC5C5C'>最近无数据</font>");
			} else {
				$("#wd" + data[o].id).html(data[o].dqwd + " ℃");
			}
			if (data[o].dqdn == "") {
				//$("#dn" + data[o].id).html("<font color='#FC5C5C'>最近无数据</font>");
			} else {
				$("#dn" + data[o].id).html(data[o].dqdn + " ℃");
			}
			if (data[o].dqsd == "") {
				//$("#sd" + data[o].id).html("<font color='#FC5C5C'>最近无数据</font>");
			} else {
				$("#sd" + data[o].id).html(data[o].dqsd + " RH");
			}
			if (data[o].dqaq == "") {
				//$("#aq" + data[o].id).html("<font color='#FC5C5C'>最近无数据&nbsp;&nbsp;&nbsp;</font>");
			} else {
				$("#aq" + data[o].id).html(data[o].dqaq + " ppm");
			}
		}
	});
}

</script>
</head>
<body>
<input type="hidden" id="mcid" value="$!daMcda.id">
<input type="hidden" id="hkzsid" value="">
<input type="hidden" id="qyid" value="">
<section class="flex-container">
    <section class="secA" id="secA">
        <div class="wrapper flex-container">
            <ul class="title nav-pills clearfix">
                <li class="active" data-for="Snwd">温度曲线</li>
                <li data-for="Snsd">湿度曲线</li>
                <li data-for="Snaq">氨气曲线</li>
            </ul>
            <div id="chartA"></div>
        </div>
    </section>
    <!-- <section class="secB" id="secB">
      	<div class="wrapper flex-container">
            <ul class="title nav-pills clearfix">
                <li class="active" data-for="Tzfb">门禁信息</li>
                <li data-for="Pjtz">平均体重</li>
                <li data-for="Rjzz">日均体重</li>
                <li data-for="Fwfb">访问分布</li>
            </ul>
            <div class="fk"><div>访客总数<strong id="fk1">66</strong></div><div>昨日新增访客<strong id="fk2">5</strong></div></div>
            <div id="chartB"></div>
        </div>
    </section> -->
    <section class="secB" id="secB">
      	<div class="wrapper flex-container">
            <ul class="title nav-pills clearfix">
                <li class="active" data-for="Nhsj">能耗数据</li>
                <!-- <li data-for="Pjtz">平均体重</li>
                <li data-for="Rjzz">日均体重</li>
                <li data-for="Fwfb">访问分布</li> -->
            </ul>
            <!-- <div class="fk"><div>访客总数<strong id="fk1">66</strong></div><div>昨日新增访客<strong id="fk2">5</strong></div></div> -->
            <div id="chartB"></div>
        </div>
    </section>
    <section class="secC" id="secC">
        <div class="wrapper flex-container">
	        <div class="tillt">
	    		<h5>环保数据</h5>
	    	</div>
            <div id="chartC"></div>
        </div>
    </section>
    <section class="secD" id="secD" style="height: 75%;">
        <div class="wrapper">
            <div id="headline" style="background-color:transparent;height: 18%;position: relative;display: flex;align-items: center;justify-content: space-around;"><span class="syMc"><!-- $!daMcda.mcmc养殖数据大平台 -->生猪福利养殖物联网在线监测与调控系统</span><div class="triggerMap" id="triggerMap" style="position: initial;white-space: pre;display: none;">切换地图</div></div>
            <div id="mcqk">
            	<div class="tillt">
		    		<h5>牧场情况</h5>
		    	</div>
		    	<ul>
		    		<li>牧场猪舍数量 <span style="color: #ed4f30;">$!zssl</span></li>
		    		<li>牧场当前产仔数 <span style="color: #edb530;">$!dqczs</span></li>
		    		<li>牧场当前配种数 <span style="color: #0ad554;">$!dqpzs</span></li>
		    		<li>牧场当前生产业绩 <span style="color: #0ad554;">$!dqscyj</span></li>
		    	</ul>
            </div>
            <div id="zddtBody" class="zzz" style="display: none;"></div>
            <div class="mapGif" id="mapGifWrapper"><h5 style="position: absolute;top: 0;margin-top: 1.4%;">猪舍</h5><img id="mapGif" src="views/hkclient/common/map_gif/11.gif" alt="动态地图"></div>
        </div>
    </section>
    <section class="secE" style="height: 24%;">
   		<h5 class="mcdbt">猪舍列表</h5>
        <div id="example" class="example">
            <div class="frame">
                <ul style="padding: 5px 0;">
                	#foreach ($!obj in $zsdaList)
                    <li class="">
                    	<input type="hidden" value="$!obj.dqlq"/>
                    	<input type="hidden" value="$!obj.id"/>
                    	<input type="hidden" value="$!obj.zsqy"/>
                        <div class="cellName1" data-wl="$!obj.wl" data-zsmc="$!obj.zsmc"></div>
                        <dl class="dl-horizontal">
                            <dt class="col-xs-5">室温：</dt>
							<dd class="col-xs-7" id="wd$!obj.id">
								#if ("$!obj.dqwd" == "111")<font color="#FC5C5C">最近无数据</font>#else$!obj.dqwd ℃#end
							</dd>
							<dt class="col-xs-5">地暖：</dt>
							<dd class="col-xs-7" id="dn$!obj.id">
								#if ("$!obj.dqdn" == "111")<font color="#FC5C5C">0.0</font>#else$!obj.dqdn ℃#end
							</dd>
                            <dt class="col-xs-5">湿度：</dt>
							<dd class="col-xs-7" id="sd$!obj.id">
								#if ("$!obj.dqsd" == "111")<font color="#FC5C5C">最近无数据</font>#else$!obj.dqsd RH#end
							</dd>
                            <dt class="col-xs-5">氨气：</dt>
							<dd class="col-xs-7" id="aq$!obj.id">
								#if ("$!obj.dqaq" == "111")<font color="#FC5C5C">最近无数据</font>#else$!obj.dqaq ppm#end
							</dd>
                        </dl>
                    </li>
                    #end
                </ul>
            </div>
        </div>
    </section>
</section>
</body>
</html>