You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
575 lines
19 KiB
575 lines
19 KiB
<!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>
|