|
|
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>仓库管理看板</title> <script type="text/javascript" src="~/Content/Cust011/js/jquery.js"></script> <link rel="stylesheet" href="~/Content/Cust011/css/comon0.css?ss=12" /> <script type="text/javascript" src="~/Content/Cust011/js/echarts.min.js"></script>
<link type="text/css" href="~/Content/Cust003/css/public.css" rel="stylesheet" /> <link type="text/css" href="~/Content/Cust003/css/icon.css" rel="stylesheet" /> <link type="text/css" href="~/Content/Cust003/css/index.css" rel="stylesheet" /> @*<script language="JavaScript" src="~/Content/Cust011/js/js.js?ss=4"></script>*@ <style> .logoclass { height: 1rem; }
.TopNamelogo { position: absolute; }
.ul_listIn { -webkit-animation: 14s gundong linear infinite normal; animation: 14s gundong linear infinite normal; position: relative; }
.rightMain_bottomIn, .rightMain_bottom, .biaoge { height: 100%; }
.rightMain_bottomIn { border: none; width: unset; min-height: unset; position: relative; padding: unset; }
.rightMain_bottomIn .biaoge_list .ul_con { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rightMain_bottomIn .biaoge_list ul li { width: 20%; text-align: center; color: rgba(255, 255, 255, .9); font-size: 0.18rem; height: 0.4rem; line-height: 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, .1); white-space: normal !important; height: auto; }
table td { font-size: .18rem; color: rgba(255, 255, 255, .6); }
.rightMain_bottomIn .biaoge_list .ul_title { background: -webkit-linear-gradient(left, rgb(5 17 50 / 10%), rgb(5 17 50 / 50%), rgb(5 17 50 / 10%)); }
.LineStringSet span { color: #fff; }
.ZPClass ul li:nth-child(1), .ZPClass ul li:nth-child(1) { width: 17% !important; }
.ZPClass ul li:nth-child(2), .ZPClass ul li:nth-child(2) { width: 7% !important; }
.ZPClass ul li:nth-child(3), .ZPClass ul li:nth-child(3) { width:21% !important; }
.ZPClass ul li:nth-child(4), .ZPClass ul li:nth-child(4) { width: 24% !important; }
.ZPClass ul li:nth-child(5), .ZPClass ul li:nth-child(5) { width: 24% !important; }
.ZPClass ul li:nth-child(6), .ZPClass ul li:nth-child(6) { width: 7% !important; }
.rateCClass { margin: 0.6rem; }
.rateCClass { width: 2.4rem; z-index: 99; }
/* 方法1：Flexbox布局（推荐） */ .equal-width-list { list-style: none; margin-bottom: 40px; }
.equal-width-list li { display: flex; padding: 0.04rem; }
.equal-width-list li span { flex: 1; text-align: center; font-weight: 500; color: #fff; font-size: 0.2rem; }
.left-span { background-color: #344244d1; color: white; }
.right-span { background-color: #395cabb5; color: white; } </style></head><body>
<div class="head"> <img class="TopNamelogo logoclass" src="~/Content/img/logo.png" border="0" /> <h1><a href="">金豪仓库管理看板</a></h1> <div class="time" id="showTime">2019/12/05 16:16:54</div>
</div> <div class="mainbox">
<ul class="clearfix" style="height: calc(60% )">
<li style="width: calc(50% - 0.02rem)">
<div class="boxall" style="height: calc(100% - 0.15rem )"> <div class="alltitle">采购看板（当天应到货未入库明细）</div> <div class="boxnav" id=""> <div class="rightMain_bottom"> <div class="rightMain_bottomIn">
<div class="biaoge biaoge_list" id="UserWork1_list"> <div class="biaoge_listIn ZPClass">
<ul class="ul_title"> <li>采购单号</li> <li>行号</li> <li>产品代码</li> <li>产品名称</li> <li>产品规格</li> <li>数量</li> </ul> <div class="ul_list" id="UserWork1_Upp"> <div class="ul_listIn ul_listInCust1 ZPClass" id="UserWork1">
</div> </div> </div> </div>
</div> </div> </div> </div>
</li>
<li style="width: calc(50% - 0.02rem)">
<div class="boxall" style="height: calc(100% - 0.15rem )"> <div class="alltitle">销售看板（当天已发货未出库明细）</div> <div class="boxnav" id=""> <div class="rightMain_bottom"> <div class="rightMain_bottomIn">
<div class="biaoge biaoge_list" id="UserWork2_list"> <div class="biaoge_listIn ZPClass">
<ul class="ul_title"> <li>到货单号</li> <li>行号</li> <li>产品代码</li> <li>产品名称</li> <li>产品规格</li> <li>数量</li> </ul> <div class="ul_list" id="UserWork2_Upp"> <div class="ul_listIn ul_listInCust2 ZPClass" id="UserWork2">
</div> </div> </div> </div>
</div> </div> </div> </div>
</li> </ul>
<ul class="clearfix" style="height: calc(40%)"> <li style="width: calc(50% - 0.02rem)">
<div class="rateCClass " style=" position:absolute;"> <ul class="equal-width-list"> <li><span class="left-span">采购数量</span><span class="right-span" id="ZQTYStr">0</span></li> <li> <span class="left-span">入库数量</span><span class="right-span" id="QTYStr">0</span> </li> <li> <span class="left-span">收货进度</span><span class="right-span" id="EQPRateStr">0</span> </li> </ul> </div>
<div class="boxall" style="height: calc(100% - 0.15rem);"> <div class="alltitle">收货进度</div> <div class="boxnav" id="echarts3"></div> </div>
</li>
<li style="width: calc(50% - 0.02rem)"> <div class="rateCClass " style=" position:absolute;"> <ul class="equal-width-list"> <li><span class="left-span">发货数量</span><span class="right-span" id="ZQTYStr2">0</span></li> <li> <span class="left-span">出库数量</span><span class="right-span" id="QTYStr2">0</span> </li> <li> <span class="left-span">发货进度</span><span class="right-span" id="EQPRateStr2">0</span> </li> </ul> </div>
<div class="boxall" style="height: calc(100% - 0.15rem);"> <div class="alltitle">当天发货进度</div> <div class="boxnav" id="echarts4"></div> </div>
</li> </ul>
</div> <script>
$(document).ready(function () { var whei = $(window).width() $("html").css({ fontSize: whei / 20 }) $(window).resize(function () { var whei = $(window).width() $("html").css({ fontSize: whei / 20 }) }); }); var DataF = 300;// 300;//单位秒 //刷新数据时间
$(function () { getTime(); GetDataZong();
//刷新数据 timer = setInterval(function () { GetDataZong(); }, DataF * 1000);
}); function getTime() { var days = new Array("日", "一", "二", "三", "四", "五", "六"); var currentDT = new Date(); var y, m, date, day, hs, ms, ss, theDateStr; y = currentDT.getFullYear(); //四位整数表示的年份 m = currentDT.getMonth() < 10 ? '0' + (currentDT.getMonth() + 1) : (currentDT.getMonth() + 1); //月 date = currentDT.getDate() < 10 ? '0' + currentDT.getDate() : currentDT.getDate(); //日 day = currentDT.getDay(); //星期 hs = currentDT.getHours() < 10 ? '0' + currentDT.getHours() : currentDT.getHours(); //时 ms = currentDT.getMinutes() < 10 ? '0' + currentDT.getMinutes() : currentDT.getMinutes(); //分 ss = currentDT.getSeconds() < 10 ? '0' + currentDT.getSeconds() : currentDT.getSeconds(); //秒 theDateStr = y + "-" + m + "-" + date + " " + hs + ":" + ms + ":" + ss; //填充到组件中 $("#showTime").text(theDateStr); // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 window.setTimeout(getTime, 1000); } function GetDataZong() { echarts_3(); echarts_4();
table_3(); SetIfGo("UserWork1_Upp", "UserWork1", "UserWork1_list");//判断是否需要滚动 table_4(); SetIfGo("UserWork2_Upp", "UserWork2", "UserWork2_list");//判断是否需要滚动 }
//收货比例 function echarts_3() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts3'));
var QTY = 0; var UnDoQTY = 0; var DoQty = 0; var EQPRATE = 0;
$.ajax({ url: "/SRM/WatchPanel/GetGridJson5?XX=XX&" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) {
EQPRATE = data[0].收货比例; DoQty = data[0].收货数量; QTY = data[0].数量; UnDoQTY = data[0].未入数量; $("#ZQTYStr").html(data[0].数量);
$("#QTYStr").html(data[0].收货数量); $("#EQPRateStr").html(data[0].收货比例 + '%'); } } });
option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: "34%", show: false, }, color: ["#3783e0e6", "#8bd46e"], series: [ { name: '收货进度', type: 'pie', radius: ['50%', '78%'], avoidLabelOverlap: false, padAngle: 5, itemStyle: { borderRadius: 20, borderColor: 'rgba(255, 255, 255, .0)', borderWidth: 8 }, label: { show: true, position: 'inside', formatter: '{b}: {c}', }, emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold',
} }, labelLine: { show: false }, data: [ { value: UnDoQTY, name: '未入数量' }, { value: DoQty, name: '入库数量' },
] } ] };
// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } //收货 function table_3() {
$.ajax({ url: "/SRM/WatchPanel/GetGridJson3?XX=XX&" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) {
var html = ""; for (var i = 0; i < data.length; i++) { html += " <ul class='ul_con'> <li>" + data[i].采购单号 + "</li> <li>" + data[i].行号 + "</li> <li>" + data[i].产品代码 + "</li> <li>" + data[i].产品名称 + "</li> <li>" + data[i].产品规格 + "</li> <li>" + data[i].数量 + "</li> </ul>";
} $(".ul_listInCust1").css("animation-duration", data.length * 3 + "s"); document.getElementById("UserWork1").innerHTML = html;
} } });
} ///出货 function table_4() {
$.ajax({ url: "/SRM/WatchPanel/GetGridJson4?XX=XX&" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) {
var html = ""; for (var i = 0; i < data.length; i++) { html += " <ul class='ul_con'> <li>" + data[i].出货单号 + "</li> <li>" + data[i].行号 + "</li> <li>" + data[i].产品代码 + "</li> <li>" + data[i].产品名称 + "</li> <li>" + data[i].产品规格 + "</li> <li>" + data[i].数量 + "</li> </ul>";
} $(".ul_listInCust2").css("animation-duration", data.length * 3 + "s"); document.getElementById("UserWork2").innerHTML = html;
} } });
}
//出货比例 function echarts_4() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('echarts4'));
var QTY = 0; var DoQty = 0; var EQPRATE =0; var UnDoQTY = 0; $.ajax({ url: "/SRM/WatchPanel/GetGridJson6?XX=XX&" + Math.random(), dataType: "json", async: false, success: function (data) { if (data != false && data != null && data.length > 0) {
EQPRATE = data[0].出货比例; DoQty = data[0].出货数量; QTY = data[0].数量; UnDoQTY = data[0].未出数量; $("#ZQTYStr2").html(data[0].数量);
$("#QTYStr2").html(data[0].出货数量); $("#EQPRateStr2").html(data[0].出货比例+'%'); } } });
option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center', show:false, }, color: ["#3783e0e6", "#8bd46e"], series: [ { name: '发货进度', type: 'pie', radius: ['50%', '78%'], avoidLabelOverlap: false, padAngle: 5, itemStyle: { borderRadius: 20, borderColor: 'rgba(255, 255, 255, .0)', borderWidth: 8 }, label: { show: true, position: 'inside', formatter: '{b}: {c}', }, emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold', } }, labelLine: { show: false }, data: [ { value: UnDoQTY, name: '未出数量' }, { value: DoQty, name: '出库数量' }, ] } ] };
// 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); }
function SetIfGo(DivID, DivCHID, listID) { var ListDIV = $("#" + listID)[0].clientHeight; var H_marqueediv = $("#" + DivCHID)[0]; //var H_marquee= H_marqueediv.clientHeight; var H_marqueeView = $("#" + DivID)[0].clientHeight; if ((ListDIV - 40) > H_marqueeView) { if (!$("#" + DivID).hasClass("animationNone")) { $("#" + DivID).addClass("animationNone"); } if (!$("#" + DivCHID).hasClass("animationNone")) { $("#" + DivCHID).addClass("animationNone"); }
} else {
if ($("#" + DivID).hasClass("animationNone")) { $("#" + DivID).removeClass("animationNone"); } if ($("#" + DivCHID).hasClass("animationNone")) { $("#" + DivCHID).removeClass("animationNone"); } } }
</script>
</body>
</html>
|
