<!DOCTYPE html>
|
<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>智慧粮库管理系统-综合大屏</title>
|
<link rel="shortcut icon" th:href="@{/static/favicon.ico}"/>
|
<link th:href="@{/static/databoard/pc-reset.css}" rel="stylesheet">
|
<link th:href="@{/static/databoard/master.css}" rel="stylesheet">
|
<style>
|
.right-topInfo-address {
|
line-height: 32px;
|
color: #fff;
|
font-size: 18px;
|
float: right;
|
z-index: 3;
|
margin: -22px 30px 0 0;
|
padding-top: 10px;
|
}
|
|
.right-topInfo-address i {
|
float: left;
|
margin-right: 5px;
|
}
|
|
.sup-menu-group span.i-icon32 {
|
margin: 0 8px 0 0;
|
}
|
|
.right-topInfo-kd-h {
|
line-height: 35px;
|
font-size: 22px;
|
height: 35px;
|
color: #fff;
|
padding: 0 15px 5px 15px;
|
}
|
|
.right-topInfo-kd {
|
width: 320px;
|
height: 90px;
|
margin: 5px auto;
|
overflow: hidden;
|
background: url("../../static/img/databoard/right-m2-bg.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.right-topInfo-kd-item {
|
float: left;
|
width: 50%;
|
height: 90px;
|
text-align: center;
|
}
|
|
.right-topInfo-kd-item h3 {
|
color: #fff;
|
font-size: 14px;
|
line-height: 20px;
|
margin-top: 10px;
|
}
|
|
.right-topInfo-kd-list li {
|
width: 33.333333%;
|
}
|
|
.right-topInfo-jg li {
|
text-align: center;
|
float: left;
|
height: 100px;
|
overflow: hidden;
|
}
|
|
.right-topInfo-kd-list li:nth-child(2) p {
|
color: #f37b3d;
|
}
|
|
.data-top-left .right-topInfo-jg {
|
margin-top: 30px;
|
}
|
|
.right-topInfo-kd-list li:nth-child(2) p {
|
color: #f37b3d;
|
}
|
|
.right-topInfo-jg li:last-child p, .right-topInfo-kd-item:last-child p {
|
color: #36b994;
|
}
|
|
.right-topInfo-jg li:first-child p, .right-topInfo-kd-item:first-child p {
|
color: #2fc7ff;
|
}
|
|
.right-topInfo-jg li h3 {
|
color: #fff;
|
font-size: 18px;
|
}
|
|
.right-topInfo-jg li p, .right-topInfo-kd-item p {
|
font-weight: bold;
|
line-height: 60px;
|
font-size: 46px;
|
}
|
|
.right-topInfo-jg li p, .right-topInfo-kd-item p {
|
font-weight: bold;
|
line-height: 60px;
|
font-size: 46px;
|
}
|
</style>
|
</head>
|
<body style="overflow:hidden">
|
<div class="container">
|
<div class="i-top">
|
<h1 class="i-top-tit"><span th:text="${largeScreenName}">综合管理大屏</span></h1>
|
<p class="i-top-p" id="sloganText">不忘初心，牢记使命，为中国人民谋幸福，为中华民族谋复兴</p>
|
<span class="time-info"></span>
|
</div><!--i-top end-->
|
<div class="i-main cl">
|
<div class="i-m1 cl">
|
<div class="i-m1-left fl">
|
|
<div class="left-box1">
|
<h3 class="i-tit">
|
<i class="i-icon32"><img th:src="@{../../static/img/databoard/icon-chuku.png}"/></i>
|
库区信息
|
</h3>
|
<div class="right-topInfo-address">
|
<i class="i-icon32"><img th:src="@{/static/img/databoard/icon-address.png}" alt=""></i>
|
<span id="cityAndCounty">-</span>
|
</div>
|
<div class="panel-content" style="padding: 10px 0 0 0;">
|
<h2 class="right-topInfo-kd-h" id="deptName">-</h2>
|
<div class="right-topInfo-kd">
|
<div class="right-topInfo-kd-item">
|
<h3>粮仓个数（个）</h3>
|
<p id="depotNum">0</p>
|
</div>
|
<div class="right-topInfo-kd-item">
|
<h3>油罐个数（个）</h3>
|
<p id="depotOilNum">0</p>
|
</div>
|
</div>
|
<ul class="right-topInfo-kd-list right-topInfo-jg">
|
<li>
|
<p id="foodStorage" style="font-size: 36px;">0</p>
|
<h3>储备粮（吨）</h3>
|
</li>
|
<li>
|
<p id="oilStorage" style="font-size: 36px;">0</p>
|
<h3>储备油（吨）</h3>
|
</li>
|
<li>
|
<p id="storage" style="font-size: 36px;">0</p>
|
<h3>设计储量（吨）</h3>
|
</li>
|
</ul>
|
</div>
|
</div><!--left-box1 end-->
|
<div class="left-box2">
|
<h3 class="i-tit">
|
<i class="i-icon32"><img th:src="@{../../static/img/databoard/icon-chuku.png}"/></i>
|
出入库信息
|
</h3>
|
<div class="left-box1-con">
|
|
<div class="left-box1-top cl">
|
<div class="left-box1-num fl">
|
<div class="left-box1-item fl">
|
<p><span id="inCarNum">0</span>辆</p>
|
<h4>入库登记</h4>
|
</div>
|
<div class="left-box1-item fl">
|
<p><span id="inCompleteCarNum">0</span>辆</p>
|
<h4>入库完成</h4>
|
</div>
|
</div>
|
<div class="left-box1-num fr">
|
<div class="left-box1-item fl">
|
<p><span id="outCarNum">0</span>辆</p>
|
<h4>出库登记</h4>
|
</div>
|
<div class="left-box1-item fl">
|
<p><span id="outCompleteCarNum">0</span>辆</p>
|
<h4>出库完成</h4>
|
</div>
|
</div>
|
</div><!--left-box1-top end-->
|
|
<div class="left-box1-jd">
|
<div class="progress-group">
|
<div class="progress-label fl">入库完成率</div>
|
<div class="progress">
|
<div id="inPerDiv" class="progress-bar progress-bar-green animate-positive"
|
style="width: 0%">
|
<span id="inPerSpan" class="sr-only">0%</span>
|
</div>
|
</div>
|
</div><!--progress-group end-->
|
<div class="progress-group">
|
<div class="progress-label fl">出库完成率</div>
|
<div class="progress">
|
<div id="outPerDiv" class="progress-bar progress-bar-blue animate-positive"
|
style="width: 0%">
|
<span id="outPerSpan" class="sr-only">0%</span>
|
</div>
|
</div>
|
</div><!--progress-group end-->
|
</div><!--left-box1-jd end-->
|
</div><!--left-box1-con end-->
|
</div><!--left-box1 end-->
|
<!-- <div class="left-box2">-->
|
|
<!-- <h3 class="i-tit">-->
|
<!-- <i class="i-icon32"><img th:src="@{../../static/img/databoard/icon-zoushi.png}"/></i>-->
|
<!-- 能耗走势-->
|
<!-- </h3>-->
|
|
<!-- <div id="i-echart1" style="width: 100%; height: 230px;"></div>-->
|
<!-- -->
|
<!-- -->
|
<!-- </div><!–left-box2 end–>-->
|
</div><!--i-m1-left end-->
|
<div class="i-m1-center fl">
|
<h3 class="i-tit">
|
<i class="i-icon32"><img th:src="@{../../static/img/databoard/icon-jiance.png}"/></i>
|
粮情检测
|
</h3>
|
<div class="i-m1-cbox">
|
<div class="i-m1-cHd">
|
<ul>
|
<li>
|
<span><img th:src="@{../../static/img/databoard/icon-ckmc.png}"/></span>
|
<h4>仓库名称</h4>
|
</li>
|
<li>
|
<span><img th:src="@{../../static/img/databoard/icon-zgw.png}"/></span>
|
<h4>最高温(℃)</h4>
|
</li>
|
<li>
|
<span><img th:src="@{../../static/img/databoard/icon-zdw.png}"/></span>
|
<h4>最低温(℃)</h4>
|
</li>
|
<li>
|
<span><img th:src="@{../../static/img/databoard/icon-pjw.png}"/></span>
|
<h4>平均温(℃)</h4>
|
</li>
|
<li>
|
<span><img th:src="@{../../static/img/databoard/icon-cw.png}"/></span>
|
<h4>仓温(℃)</h4>
|
</li>
|
<li>
|
<span><img th:src="@{/static/img/databoard/icon-cs.png}"/></span>
|
<h4>仓湿(%)</h4>
|
</li>
|
<li>
|
<span><img th:src="@{../../static/img/databoard/icon-jcsj.png}"/></span>
|
<h4>检测时间</h4>
|
</li>
|
</ul>
|
</div>
|
<div class="i-m1-cBd" id="grainShowDiv">
|
<!-- 粮情展示div -->
|
</div>
|
</div>
|
</div><!--i-m1-center end-->
|
<div class="i-m1-right fr">
|
<div class="right-box1 posi-r">
|
|
<h3 class="i-tit">
|
<i class="i-icon32"><img th:src="@{../../static/img/databoard/icon-qixiang.png}"/></i>
|
气象站信息
|
</h3>
|
<div class="right-box1-time" id="weather_time">更新时间 : 2000-01-01 00:00:00</div>
|
<div class="right-box1-con">
|
|
<ul class="r1-list">
|
<li>
|
<h4><i class="i-icon"><img th:src="@{../../static/img/databoard/icon-wendu.png}"/></i>温度
|
</h4>
|
<p id="weather_wendu"><span>0</span>℃</p>
|
</li>
|
<li>
|
<h4><i class="i-icon"><img th:src="@{../../static/img/databoard/icon-shidu.png}"/></i>湿度
|
</h4>
|
<p id="weather_shidu"><span>0</span>%</p>
|
</li>
|
<li>
|
<h4><i class="i-icon"><img th:src="@{../../static/img/databoard/icon-yuqing.png}"/></i>天气
|
</h4>
|
<p id="weather_tianqi"><em>晴</em></p>
|
</li>
|
<li>
|
<h4><i class="i-icon"><img th:src="@{../../static/img/databoard/icon-yuliang.png}"/></i>风力
|
</h4>
|
<p id="windSpeed"><span>1级</span></p>
|
</li>
|
<li>
|
<h4><i class="i-icon"><img
|
th:src="@{../../static/img/databoard/icon-fengxiang.png}"/></i>风向</h4>
|
<p id="weather_fengxiang"><em>无风</em></p>
|
</li>
|
</ul>
|
</div>
|
</div><!--right-box1 end-->
|
|
<div class="right-box2">
|
|
<h3 class="i-tit">
|
<i class="i-icon32"><img th:src="@{../../static/img/databoard/icon-qiti.png}"/></i>
|
气体检测
|
</h3>
|
<div class="right-box2-con ">
|
<div class="right-box2-tit" id="gasDepotName">0号仓</div>
|
<div class="right-box2-time" id="gasCheckTime">检测时间: 12-01</div>
|
<div class="r2-echart">
|
<ul>
|
<li>
|
<div id="i-echart2" style="width: 100%; height: 160px;"></div>
|
<!--<div class="r2-echart-p">CO2(PPM)</div>-->
|
</li>
|
<li>
|
<div id="i-echart3" style="width: 100%; height: 160px;"></div>
|
<!--<div class="r2-echart-p">CO2(PPM)</div>-->
|
</li>
|
<li>
|
<div id="i-echart4" style="width: 100%; height: 160px;"></div>
|
<!--<div class="r2-echart-p">CO2(PPM)</div>-->
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
</div><!--right-box1 end-->
|
|
</div><!--i-m1-right end-->
|
|
</div><!--i-m1 end-->
|
<div class="i-m2 cl">
|
<div class="i-m2-box i-m2-box1 fl">
|
<h3 class="i-tit">
|
<i class="i-icon32"><img th:src="@{../../static/img/databoard/icon-cangku.png}"/></i>
|
仓库卡片
|
</h3>
|
<div class="i-m2-tab">
|
<div class="i-tab-bd" id="depotShowDiv">
|
|
</div> <!--tab-bd-->
|
<div class="i-tab-hd" id="depotTabDiv">
|
<span class="active"></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
</div>
|
</div><!--i-m2-tab end-->
|
|
</div><!--i-m2-box end-->
|
|
|
<div class="i-m2-box i-m2-box2 fr">
|
<h3 class="i-tit">
|
<i class="i-icon32"><img th:src="@{../../static/img/databoard/icon-cangchu.png}"/></i>
|
仓储统计
|
</h3>
|
|
<div class="i-m2-echarts">
|
|
<ul>
|
<li>
|
<h3 class="i-m2-echarts-h">仓储性质</h3>
|
<div id="i-echart5" style="width: 100%; height: 160px;"></div>
|
</li>
|
<li>
|
<h3 class="i-m2-echarts-h">粮食品种</h3>
|
<div id="i-echart6" style="width: 100%; height: 160px;"></div>
|
</li>
|
<li>
|
<h3 class="i-m2-echarts-h">粮食等级</h3>
|
<div id="i-echart7" style="width: 100%; height: 160px;"></div>
|
</li>
|
</ul>
|
|
|
</div>
|
|
|
</div><!--i-m2-box end-->
|
|
</div><!--i-m2 end-->
|
|
|
</div><!--i-main end-->
|
|
</div>
|
|
<div id="particles-js"></div>
|
|
<script th:src="@{/static/js/jquery.min.js}"></script>
|
<script th:src="@{/static/plugins/layui/layui.js}"></script>
|
<script th:src="@{/static/databoard/particles.min.js}"></script>
|
<script th:src="@{/static/plugins/echarts/echarts.min.js}"></script>
|
<script th:inline="javascript">
|
//定义变量
|
var companyId = [[${loginUser.companyId}]];
|
var listDepot = [[${listDepot}]];
|
var mapGrain = [[${mapGrain}]];
|
var mapGas = [[${mapGas}]];
|
var bizType = [[${bizType}]];
|
var bizTag = [[${bizTag}]];
|
var dicSlogan = [[${dicSlogan}]];
|
var weatherInfo = [[${weatherInfo}]];
|
var deptInfo = [[${deptInfo}]];
|
|
//能耗信息
|
// var esChart = [[${esChart}]];
|
|
//userId
|
var userId = [[${loginUser.username}]];
|
var deptId = [[${deptId}]];
|
|
//设置定时刷新页面，主要为了防止掉线
|
var timerFlush;
|
window.onload = function () {
|
if (timerFlush) {
|
clearInterval(timerFlush);
|
}
|
timerFlush = setInterval(function () {
|
window.location.href = window.location.href;
|
}, 60 * 60 * 1000);
|
};
|
|
</script>
|
<script th:src="@{/static/js/constant.js}"></script>
|
<script th:src="@{/static/js/igds-common.js}"></script>
|
<script th:src="@{/static/databoard/charts.js}"></script>
|
<script th:src="@{/static/databoard/databoard.js}"></script>
|
</body>
|
</html>
|
