<!DOCTYPE html>
|
<!--<html lang="zh-cn">-->
|
c
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>发货看板</title>
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
<link rel="stylesheet" type="text/css" href="css/layui.css" media="all">
|
<script src="js/jquery.min.js"></script>
|
<script src='js/echarts.min.js'></script>
|
<script src="js/bootstrap.min.js"></script>
|
<script src='js/bootstrap-table.min.js'></script>
|
<script src='js/bootstrap-table-zh-CN.min.js'></script>
|
<script src="js/jquery.SuperSlide.2.1.3.js"></script>
|
<script src='js/template.js'></script>
|
<script src="js/jquery.qrcode.min.js"></script>
|
<script src="js/webConfig.js"></script>
|
<script src="js/layui.js"></script>
|
<style>
|
.layui-table th {
|
font-weight: bold;
|
}
|
|
.layui-table td {
|
font-weight: bold;
|
}
|
|
.clock {
|
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
|
font-size: 20px;
|
width: 450px;
|
float: right;
|
color: #fff;
|
margin-top: -75px;
|
margin-right: 5px;
|
color: #09d1ea;
|
}
|
/* .layui-icon {
|
font-family:layui-icon !important;
|
}*/
|
|
.clock #Date {
|
text-align: center;
|
text-shadow: 0 0 0px #00c6ff;
|
}
|
|
.clock ul {
|
width: 450px;
|
margin: 0 auto;
|
padding: 0px;
|
list-style: none;
|
text-align: right;
|
margin-left: 15px;
|
position: relative;
|
}
|
|
.clock ul li {
|
display: inline;
|
font-size: 24px;
|
text-align: left;
|
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
|
text-shadow: 0 0 0px #00c6ff;
|
}
|
|
body {
|
padding-left: 50px;
|
padding-right: 50px;
|
}
|
|
.title {
|
font-size: 44px;
|
font-family: PingFangSC;
|
font-weight: 500;
|
color: rgba(9, 209, 234, 1);
|
text-align: center;
|
background: url(img/img_little_new.png) center no-repeat;
|
margin-bottom: 30px;
|
}
|
|
.col-sm-12 {
|
position: relative;
|
min-height: 1px;
|
padding-right: 0px;
|
padding-left: 0px;
|
}
|
|
.left {
|
/* border: 1px solid #00c6ff; */
|
height: 900px;
|
}
|
|
.right {
|
/* border: 1px solid #00c6ff; */
|
height: 300px;
|
}
|
|
.layui-form-item .layui-inline {
|
margin-right: 0;
|
}
|
|
.col-sm-2 {
|
position: absolute;
|
top: 900px;
|
right: 250px;
|
}
|
|
.col-sm-8 {
|
position: relative;
|
min-height: 1px;
|
padding-right: 0px;
|
padding-left: 0px;
|
}
|
|
.col-sm-4 {
|
position: absolute;
|
top: 100px;
|
right: 20px;
|
}
|
|
.col-sm-6 {
|
position: absolute;
|
top: 100px;
|
left: 0;
|
}
|
|
.col-sm-5 {
|
position: absolute;
|
top: 100px;
|
right: 50px;
|
}
|
|
|
.col-sm-3 {
|
position: absolute;
|
top: 550px;
|
right: 130px;
|
}
|
/*
|
#mychart1,
|
#mychart2 {
|
width: 120%;
|
border: none;
|
height: 300px;
|
}
|
|
#mychart3 {
|
width: 190%;
|
border: none;
|
height: 300px;
|
}*/
|
|
#cList {
|
margin: 0% auto;
|
color: #00c6ff;
|
}
|
|
#cList li {
|
margin: 20px 0px;
|
text-align: left;
|
font-size: 18px;
|
margin-left: 25%;
|
}
|
|
#cList0 {
|
height: 900px;
|
width: 3%;
|
/* border: 1px solid #00c6ff; */
|
float: left;
|
}
|
|
#cList1 {
|
float: left;
|
}
|
|
#cList1 li {
|
float: left;
|
height: 900px;
|
color: #00c6ff;
|
font-size: 20px;
|
/*文字居中*/
|
text-align: center;
|
/*display: flex;*/
|
}
|
|
#cList1 li span {
|
/*文字居中*/
|
display: inline-block;
|
height: 100%;
|
/*文字居中*/
|
/*文字竖排*/
|
writing-mode: vertical-lr;
|
/*从左向右 从右向左是 writing-mode: vertical-rl;*/
|
writing-mode: tb-lr;
|
/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
|
}
|
|
#cList2 {
|
height: 900px;
|
width: 65%;
|
/* border: 1px solid #00c6ff; */
|
float: left;
|
}
|
|
table tr td {
|
text-align: center;
|
vertical-align: middle !important;
|
/*border: 1px solid #464646;*/
|
border-right: 0px;
|
height: 40px;
|
font-size: 16px;
|
font-family: '黑体';
|
font-family: Arial;
|
border: none;
|
}
|
|
.table > caption + thead > tr:first-child > td,
|
.table > caption + thead > tr:first-child > th,
|
.table > colgroup + thead > tr:first-child > td,
|
.table > colgroup + thead > tr:first-child > th,
|
.table > thead:first-child > tr:first-child > td,
|
.table > thead:first-child > tr:first-child > th {
|
background-color: #000;
|
color: #3bff72;
|
}
|
|
.fixed-table-container tbody td .th-inner,
|
.fixed-table-container thead th .th-inner {
|
font-size: 15px;
|
color: #09d1ea;
|
padding: 20px 0 15px 0;
|
}
|
|
#tb_order tr td {
|
text-align: center;
|
height: 32px;
|
line-height: 32px;
|
font-size: 14px;
|
/* font-family: '黑体'; */
|
color: #a6a8ae;
|
font-family: Arial;
|
/* border: 1px solid #464646; */
|
border: none;
|
}
|
|
#tb_order2 tr td {
|
text-align: center;
|
height: 32px;
|
line-height: 32px;
|
font-size: 14px;
|
/* font-family: '黑体'; */
|
color: #a6a8ae;
|
font-family: Arial;
|
/* border: 1px solid #464646; */
|
border: none;
|
}
|
|
#tb_order3 tr td {
|
text-align: center;
|
height: 32px;
|
line-height: 32px;
|
font-size: 14px;
|
/* font-family: '黑体'; */
|
color: #a6a8ae;
|
font-family: Arial;
|
/* border: 1px solid #464646; */
|
border: none;
|
}
|
|
|
.bootstrap-table .table {
|
border-radius: none
|
}
|
|
th {
|
background-color: transparent !important;
|
}
|
|
td {
|
background-color: transparent;
|
}
|
|
tr {
|
background-color: transparent
|
}
|
|
#tb_order tr:nth-child(even) {
|
background: #080c1c;
|
}
|
|
.fixed-table-container tbody td .th-inner,
|
.fixed-table-container thead th .th-inner {
|
text-align: left;
|
}
|
|
.progress {
|
background-color: darkblue;
|
}
|
|
#tb_order tr:nth-child(even) {
|
background: #000000;
|
}
|
|
.pull-right, .fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
|
display: none;
|
}
|
</style>
|
|
<script type="text/javascript">
|
layui.use(['form', 'element', 'table', 'layer'], function () {
|
var $ = layui.$
|
form = layui.form,
|
layer = layui.layer,
|
table = layui.table,
|
element = layui.element;
|
var titleData = ["FID", "FENTRYID"]
|
var titleData2 = ["FID", "FENTRYID"]
|
var titleData3 = ["FID", "FENTRYID"]
|
//参数配置
|
var HouseCode = '509'; //仓库编码
|
var interval;//计时器
|
var interval1;//计时器
|
var num = 0;
|
var num2 = 0;
|
var num3 = 0;
|
var ReachProgress = 0; //达成率
|
var FHDt = []; //发货趋势时间数组
|
var FHQty = []; //发货趋势时间值数组
|
|
var ToDayDt = []; //近日达成率对比时间数组
|
var OrderQty = []; //近日达成率对比订单总量数数组
|
var FHSQty = []; //近日达成率对比总发货量数数组
|
|
|
$(document).ready(function () {
|
// 创建两个变量，一个数组中的月和日的名称
|
var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"];
|
setInterval(function () {
|
var date1 = new Date;
|
var year = date1.getFullYear();
|
var month = date1.getMonth();
|
var day = date1.getDate();
|
var hh = date1.getHours();
|
var mm = date1.getMinutes();
|
var ss = date1.getSeconds();
|
var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
var Stamp = new Date();
|
|
|
$('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日 " + ' ' + dayNames[Stamp.getDay()]);
|
$("#hours").html((hh < 10 ? ("0" + hh) : hh));
|
$("#min").html((mm < 10 ? ("0" + mm) : mm));
|
$("#sec").html((ss < 10 ? ("0" + ss) : ss));
|
|
}, 1000);
|
});
|
$(function () {
|
//var mychart1 = echarts.init(document.getElementById('mychart1'));
|
//var mychart2 = echarts.init(document.getElementById('mychart2'));
|
//var mychart3 = echarts.init(document.getElementById('mychart3'));
|
|
//Chart(mychart1, mychart2, mychart3);
|
DataTable();
|
DataTable2();
|
DataTable3();
|
|
// 定时器
|
interval = setInterval(function () {
|
//num = 0;
|
FHDt = [];
|
FHQty = [];
|
ToDayDt = [];
|
OrderQty = [];
|
FHSQty = [];
|
//Chart(mychart1, mychart2, mychart3);
|
}, 20000);
|
interval1 = setInterval(function () {
|
$("#tb_order").bootstrapTable('refresh');
|
DataTable();
|
DataTable2();
|
DataTable3();
|
}, 30000);
|
//根据浏览器大小改变大小
|
//window.onresize = () => {
|
// mychart1.resize();
|
// mychart2.resize();
|
// mychart3.resize();
|
//}
|
})
|
|
|
|
function Chart(mychart1, mychart2, mychart3) {
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/DeliveryData",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "Tag": 0, "limit": 10, "offset": 1 },
|
success: function (data) {
|
|
$("#OrderQty").html(parseFloat(data.data[0][0].ZDQty).toFixed(0));
|
$("#FHQty").html(parseFloat(data.data[1][0].FHQty).toFixed(0));
|
$("#ReachProgress").html(parseFloat(data.data[1][0].FHQty) / parseFloat(data.data[0][0].ZDQty == 0 ? 1 : data.data[0][0].ZDQty).toFixed(0) * 100 + "%");
|
$("#DaySupQty").html(parseFloat(data.data[0][0].ZDQty - data.data[1][0].FHQty < 0 ? 0 : data.data[0][0].ZDQty - data.data[1][0].FHQty).toFixed(0));
|
ReachProgress = parseFloat(data.data[1][0].FHQty) / parseFloat(data.data[0][0].ZDQty == 0 ? 1 : data.data[0][0].ZDQty).toFixed(0) * 100;
|
//发货趋势
|
$.each(data.data[2], function (index, val) {
|
FHDt.push(val.hour.substring(5));
|
FHQty.push(parseFloat(val.FHQty).toFixed(0));
|
});
|
|
//近日达成率
|
$.each(data.data[2], function (index, val) {
|
ToDayDt.push(val.hour.substring(5));
|
OrderQty.push(parseFloat(val.ZDQty).toFixed(0));
|
FHSQty.push(parseFloat(val.FHQty).toFixed(0));
|
});
|
},
|
error: function (data) {
|
|
}
|
})
|
|
|
const colorList = ['#47A2FF', '#ff9900']
|
option1 = {
|
title: [
|
{
|
text: '',
|
subtext: ReachProgress + '%',
|
textStyle: {
|
fontSize: 16,
|
color: '#999',
|
lineHeight: 20
|
},
|
subtextStyle: {
|
fontSize: 28,
|
color: '#00c6ff'
|
},
|
textAlign: 'center',
|
left: '50%',
|
top: '50%'
|
},
|
{
|
show: true,
|
text: '达成率分析',
|
textStyle: {
|
color: '#00c6ff',
|
fontSize: '16',
|
},
|
textAlign: 'center',
|
left: '50%',
|
top: '5%'
|
}
|
],
|
tooltip: {
|
trigger: 'item',
|
},
|
legend: {
|
type: 'scroll',
|
icon: 'pin',
|
show: false
|
},
|
color: colorList,
|
series: [
|
{
|
name: '占比',
|
type: 'pie',
|
radius: [50, 80],
|
center: ['50%', '50%'],
|
center: ['50%', '60%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false
|
},
|
labelLine: {
|
show: false
|
},
|
itemStyle: {
|
borderWidth: 3,
|
borderColor: '#000000'
|
},
|
data: [
|
{ name: '', value: ReachProgress },
|
{ name: '', value: 100 - ReachProgress }
|
],
|
}
|
]
|
};
|
|
option2 = {
|
tooltip: {
|
trigger: 'item',
|
formatter: "{a} <br/>{b}月 : {c}万"
|
},
|
grid: {
|
left: '25',
|
right: '4%',
|
bottom: '5%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: FHDt, //时间点数据
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#00c6ff',
|
},
|
},
|
axisTick: {
|
show: true,
|
},
|
axisLabel: {
|
textStyle: {
|
color: '#00c6ff', //坐标值得具体的颜色
|
fontSize: '16'
|
}
|
}
|
},
|
yAxis: [{
|
type: 'value',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#00c6ff',
|
width: 0, //隐藏y轴
|
}
|
},
|
splitLine: { //网格线
|
lineStyle: {
|
type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
|
},
|
show: false //隐藏或显示
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLabel: {
|
textStyle: {
|
color: '#00c6ff', //坐标值得具体的颜色
|
fontSize: '16'
|
}
|
},
|
splitNumber: 5
|
}],
|
title: {
|
show: true,
|
text: '发货趋势图(按日期显示)',
|
x: 'left',
|
textStyle: {
|
color: '#00c6ff',
|
fontSize: 18,
|
fotweight: 'normal',
|
fontFamily: "微软雅黑"
|
},
|
textAlign: 'left',
|
left: '20',
|
top: '0%'
|
},
|
legend: {
|
icon: 'line',
|
data: ['小时产能'],
|
x: 'right', //可设定图例在左、右、居中
|
y: 'top', //可设定图例在上、下、居中
|
//padding:[0,0,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
textStyle: {
|
color: '#00c6ff',
|
fontSize: 20,
|
fontFamily: "微软雅黑"
|
}
|
},
|
series: [
|
{
|
name: '小时产能',
|
data: FHQty, //时间点值
|
type: 'line',
|
smooth: true,
|
itemStyle: {
|
normal: {
|
color: 'orange',
|
lineStyle: {
|
width: 4, //设置线条粗细
|
shadowColor: 'rgba(255, 94, 91,.1)',
|
shadowOffsetX: 3,
|
shadowOffsetY: 5,
|
}
|
},
|
},
|
textStyle: {
|
fontFamily: "微软雅黑"
|
}
|
},
|
]
|
}
|
|
option3 = {
|
title: {
|
text: '近日达成率对比',
|
left: '0',
|
top: 2,
|
textStyle: {
|
fontSize: 20,
|
color: '#00c6ff',
|
fontFamily: "微软雅黑"
|
},
|
},
|
color: ['#5b9bd5', '#ed7d31', '#a9d18e', '#ffc000'],
|
tooltip: {
|
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '10%',
|
containLabel: true
|
},
|
legend: {
|
left: 'right',
|
data: ['总订单', '总发货'],
|
textStyle: {
|
color: '#00c6ff',
|
fontSize: 16,
|
fontFamily: "微软雅黑"
|
}
|
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: ToDayDt,
|
axisTick: {
|
alignWithLabel: true
|
},
|
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#00c6ff',
|
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
|
width: 1, //隐藏y轴
|
}
|
},
|
axisLabel: {
|
show: true,
|
textStyle: {
|
color: '#00c6ff', //坐标值得具体的颜色
|
fontSize: '16'
|
}
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLine: {
|
show: false,
|
|
},
|
splitLine: { //网格线
|
lineStyle: {
|
color: '#00c6ff',
|
|
},
|
show: true //隐藏或显示
|
},
|
axisLabel: {
|
textStyle: {
|
color: '#00c6ff', //坐标值得具体的颜色
|
fontSize: '16'
|
}
|
}
|
}
|
],
|
series: [
|
{
|
name: '总订单',
|
type: 'bar',
|
barWidth: 15,
|
data: OrderQty
|
},
|
{
|
name: '总发货',
|
type: 'bar',
|
barWidth: 15,
|
data: FHSQty
|
}
|
]
|
};
|
|
|
//mychart1.setOption(option1);
|
//mychart2.setOption(option2);
|
//mychart3.setOption(option3);
|
}
|
|
function DataTable() {
|
layui.use(['table', 'jquery', 'form'], function () {
|
var table = layui.table
|
, form = layui.form
|
, $ = layui.jquery
|
, list = []
|
, selectedIds = []; // 存放已选中行的id数组
|
|
num = num + 1;
|
$.ajax({
|
type: "GET",
|
url: GetWEBURL() + '/loaddata/DeliveryTableData',
|
contentType: "application/json;charset=utf-8",
|
data: { "limit": "15", "offset": num },
|
async: false,
|
dataType: "json",
|
json: 'callback',
|
success: function (result) {
|
var col = [];
|
//给空的数组赋值
|
//给空的数组赋值
|
col.push({ type: 'radio', fixed: 'left', formatter: stateFormatter, width: 50 });
|
for (var key in result.columnNameList) {
|
if ($.inArray(result.columnNameList[key].ColmCols, titleData) > -1) {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', hide: true }); //隐藏id列
|
} else
|
if (result.columnNameList[key].ColmType == "Decimal") {
|
|
col.push({
|
field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 120, formatter: function (value, row, index) {
|
return parseFloat(value).toFixed(2);
|
}
|
});
|
}
|
else if (result.columnNameList[key].ColmCols == '日期' || result.columnNameList[key].ColmCols == '客户名称' || result.columnNameList[key].ColmCols == '司机电话') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 120 });
|
}
|
else if (result.columnNameList[key].ColmCols == '装车时间' || result.columnNameList[key].ColmCols == '进厂时间' || result.columnNameList[key].ColmCols == '出厂时间') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 170 });
|
}
|
else if (result.columnNameList[key].ColmCols == '物料名称') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 150 });
|
}
|
else if (result.columnNameList[key].ColmCols == '规格型号') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 250 });
|
} else {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 110 });
|
}
|
|
}
|
|
var num_total = (result.total) / 15;
|
if (num >= num_total) {
|
num = 0;
|
}
|
|
table.render({
|
elem: '#tb_order'
|
, toolbar: '#toolbarDemo'
|
, data: result.rows
|
, page: true // 开启分页
|
, limit: 15
|
, limits: [15, 30, 45, 60, 75, 100, 115, 130, 145, 160, 175, 200]
|
, cols: [col]
|
, done: function (res, curr, count) {
|
res.data.forEach(function (item, index) {
|
// console.log(item);
|
//这里的entity_status_id 为表格数据中的一列数据，用于判断特定行
|
if (item.进厂标记 == 1 && item.出厂标记 == 0) {
|
var tr = $(".layui-one .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(51,204,102)");
|
}
|
else if
|
(item.进厂标记 == 0 && item.出厂标记 == 0) {
|
var tr = $(".layui-one .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "white");
|
}
|
else if (item.进厂标记 == 1 && item.出厂标记 == 1) {
|
var tr = $(".layui-one .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(253,253,150)");
|
}
|
else if
|
(item.进厂标记 == 0 && item.出厂标记 == 1) {
|
var tr = $(".layui-one .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(253,253,150)");
|
}
|
})
|
|
// 监听table复选框的选择事件
|
table.on('radio(tb_order)', function (obj) {
|
selectedIds = table.checkStatus('tb_order').data.map(item => item.id).sort(function (a, b) {
|
return a - b;
|
});
|
|
console.log('selectedIds');
|
console.log(selectedIds);
|
|
});
|
}
|
});
|
|
|
}
|
})
|
});
|
|
}
|
|
//头工具栏事件
|
table.on('toolbar(tb_order)', function (obj) {
|
var checkStatus = table.checkStatus('tb_order')
|
, data = checkStatus.data;
|
|
|
var FID = data[0].FID.toString();
|
var FENTRYID = data[0].FENTRYID.toString();
|
|
switch (obj.event) {
|
case 'InFactory1':
|
Table_Button(FID, FENTRYID, 'InFactory1');
|
DataTable();
|
break;
|
case 'DInFactory1':
|
Table_Button(FID, FENTRYID, 'DInFactory1');
|
DataTable();
|
break;
|
case 'OutFactory1':
|
Table_Button(FID, FENTRYID, 'OutFactory1');
|
DataTable();
|
break;
|
|
case 'DOutFactory1':
|
Table_Button(FID, FENTRYID, 'DOutFactory1');
|
DataTable();
|
break;
|
}
|
});
|
|
|
function Table_Button(FID, FENTRYID, OperationType) {
|
$.ajax({
|
type: "GET",
|
url: GetWEBURL() + '/loaddata/DeliveryTableDataButton',
|
contentType: "application/json;charset=utf-8",
|
data: { "FID": FID, "FENTRYID": FENTRYID, "OperationType": OperationType },
|
async: false,
|
dataType: "json",
|
json: 'callback',
|
success: function (result) {
|
var data = result.data;
|
|
}
|
})
|
}
|
|
function DataTable2() {
|
layui.use(['table', 'jquery', 'form'], function () {
|
var table = layui.table
|
, form = layui.form
|
, $ = layui.jquery
|
, list = []
|
, selectedIds = []; // 存放已选中行的id数组
|
|
num2 = num2 + 1;
|
$.ajax({
|
type: "GET",
|
url: GetWEBURL() + '/loaddata/DeliveryTableData2',
|
contentType: "application/json;charset=utf-8",
|
data: { "limit": "15", "offset": num2 },
|
async: false,
|
dataType: "json",
|
json: 'callback',
|
success: function (result) {
|
var col = [];
|
//给空的数组赋值
|
col.push({ type: 'radio', fixed: 'left', formatter: stateFormatter, width: 50 });
|
for (var key in result.columnNameList) {
|
if ($.inArray(result.columnNameList[key].ColmCols, titleData2) > -1) {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', hide: true }); //隐藏id列
|
} else
|
if (result.columnNameList[key].ColmType == "Decimal") {
|
|
col.push({
|
field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 120, formatter: function (value, row, index) {
|
return parseFloat(value).toFixed(2);
|
}
|
});
|
}
|
else if (result.columnNameList[key].ColmCols == '日期' || result.columnNameList[key].ColmCols == '客户名称' || result.columnNameList[key].ColmCols == '司机电话') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 120 });
|
}
|
else if (result.columnNameList[key].ColmCols == '装车时间' || result.columnNameList[key].ColmCols == '进厂时间' || result.columnNameList[key].ColmCols == '出厂时间') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 170 });
|
}
|
else if (result.columnNameList[key].ColmCols == '物料名称') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 150 });
|
}
|
else if (result.columnNameList[key].ColmCols == '规格型号') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 250 });
|
} else {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 110 });
|
}
|
|
}
|
|
var num_total2 = (result.total) / 15;
|
if (num2 >= num_total2) {
|
num2 = 0;
|
}
|
|
table.render({
|
elem: '#tb_order2'
|
, toolbar: '#toolbarDemo2'
|
, data: result.rows
|
, page: true // 开启分页
|
, limit: 15
|
, limits: [15, 30, 45, 60, 75, 100, 115, 130, 145, 160, 175, 200]
|
, cols: [col]
|
, done: function (res, curr, count) {
|
res.data.forEach(function (item, index) {
|
// console.log(item);
|
//这里的entity_status_id 为表格数据中的一列数据，用于判断特定行
|
if (item.进厂标记 == 1 && item.出厂标记 == 0) {
|
var tr = $(".layui-two .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(51,204,102)");
|
}
|
else if
|
(item.进厂标记 == 0 && item.出厂标记 == 0) {
|
var tr = $(".layui-two .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "white");
|
}
|
else if (item.进厂标记 == 1 && item.出厂标记 == 1) {
|
var tr = $(".layui-two .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(253,253,150)");
|
}
|
else if
|
(item.进厂标记 == 0 && item.出厂标记 == 1) {
|
var tr = $(".layui-two .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(253,253,150)");
|
}
|
})
|
}
|
});
|
|
|
// 监听table复选框的选择事件
|
table.on('radio(tb_order2)', function (obj) {
|
selectedIds = table.checkStatus('tb_order2').data.map(item => item.id).sort(function (a, b) {
|
return a - b;
|
});
|
|
console.log('selectedIds');
|
console.log(selectedIds);
|
|
});
|
}
|
})
|
|
|
|
|
});
|
|
}
|
|
//头工具栏事件
|
table.on('toolbar(tb_order2)', function (obj) {
|
var checkStatus = table.checkStatus('tb_order2')
|
, data = checkStatus.data;
|
|
var FID = data[0].FID.toString();
|
var FENTRYID = data[0].FENTRYID.toString();
|
|
switch (obj.event) {
|
case 'InFactory2':
|
Table_Button(FID, FENTRYID, 'InFactory2');
|
DataTable2();
|
break;
|
case 'DInFactory2':
|
Table_Button(FID, FENTRYID, 'DInFactory2');
|
DataTable2();
|
break;
|
case 'OutFactory2':
|
Table_Button(FID, FENTRYID, 'OutFactory2');
|
DataTable2();
|
break;
|
|
case 'DOutFactory2':
|
Table_Button(FID, FENTRYID, 'DOutFactory2');
|
DataTable2();
|
break;
|
}
|
});
|
|
function DataTable3() {
|
layui.use(['table', 'jquery', 'form'], function () {
|
var table = layui.table
|
, form = layui.form
|
, $ = layui.jquery
|
, list = []
|
, selectedIds = []; // 存放已选中行的id数组
|
|
num2 = num2 + 1;
|
$.ajax({
|
type: "GET",
|
url: GetWEBURL() + '/loaddata/DeliveryTableData3',
|
contentType: "application/json;charset=utf-8",
|
data: { "limit": "15", "offset": num3 },
|
async: false,
|
dataType: "json",
|
json: 'callback',
|
success: function (result) {
|
var col = [];
|
//给空的数组赋值
|
col.push({ type: 'radio', fixed: 'left', formatter: stateFormatter, width: 50 });
|
for (var key in result.columnNameList) {
|
if ($.inArray(result.columnNameList[key].ColmCols, titleData3) > -1) {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', hide: true }); //隐藏id列
|
} else
|
if (result.columnNameList[key].ColmType == "Decimal") {
|
|
col.push({
|
field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 120, formatter: function (value, row, index) {
|
return parseFloat(value).toFixed(2);
|
}
|
});
|
}
|
else if (result.columnNameList[key].ColmCols == '日期' || result.columnNameList[key].ColmCols == '客户名称' || result.columnNameList[key].ColmCols == '司机电话') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 120 });
|
}
|
else if (result.columnNameList[key].ColmCols == '装车时间' || result.columnNameList[key].ColmCols == '进厂时间' || result.columnNameList[key].ColmCols == '出厂时间') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 170 });
|
}
|
else if (result.columnNameList[key].ColmCols == '物料名称') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 150 });
|
}
|
else if (result.columnNameList[key].ColmCols == '规格型号') {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 250 });
|
} else {
|
col.push({ field: result.columnNameList[key].ColmCols, title: result.columnNameList[key].ColmCols, align: 'center', width: 110 });
|
}
|
|
}
|
|
var num_total3 = (result.total) / 15;
|
if (num3 >= num_total3) {
|
num3 = 0;
|
}
|
|
table.render({
|
elem: '#tb_order3'
|
, toolbar: '#toolbarDemo3'
|
, data: result.rows
|
, page: true // 开启分页
|
, limit: 15
|
, limits: [15, 30, 45, 60, 75, 100, 115, 130, 145, 160, 175, 200]
|
, cols: [col]
|
, done: function (res, curr, count) {
|
res.data.forEach(function (item, index) {
|
// console.log(item);
|
//这里的entity_status_id 为表格数据中的一列数据，用于判断特定行
|
if (item.进厂标记 == 1 && item.出厂标记 == 0) {
|
var tr = $(".layui-three .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(51,204,102)");
|
}
|
else if
|
(item.进厂标记 == 0 && item.出厂标记 == 0) {
|
var tr = $(".layui-three .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "white");
|
}
|
else if (item.进厂标记 == 1 && item.出厂标记 == 1) {
|
var tr = $(".layui-three .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(253,253,150)");
|
}
|
else if
|
(item.进厂标记 == 0 && item.出厂标记 == 1) {
|
var tr = $(".layui-three .layui-table tr[data-index=" + index + "]");
|
tr.css("background-color", "rgb(253,253,150)");
|
}
|
})
|
}
|
});
|
|
|
// 监听table复选框的选择事件
|
table.on('radio(tb_order3)', function (obj) {
|
selectedIds = table.checkStatus('tb_order3').data.map(item => item.id).sort(function (a, b) {
|
return a - b;
|
});
|
|
console.log('selectedIds');
|
console.log(selectedIds);
|
|
});
|
}
|
})
|
|
|
|
|
});
|
|
}
|
|
//头工具栏事件
|
table.on('toolbar(tb_order3)', function (obj) {
|
var checkStatus = table.checkStatus('tb_order3')
|
, data = checkStatus.data;
|
|
var FID = data[0].FID.toString();
|
var FENTRYID = data[0].FENTRYID.toString();
|
|
switch (obj.event) {
|
case 'InFactory3':
|
Table_Button(FID, FENTRYID, 'InFactory3');
|
DataTable3();
|
break;
|
case 'DInFactory3':
|
Table_Button(FID, FENTRYID, 'DInFactory3');
|
DataTable3();
|
break;
|
case 'OutFactory3':
|
Table_Button(FID, FENTRYID, 'OutFactory3');
|
DataTable3();
|
break;
|
|
case 'DOutFactory3':
|
Table_Button(FID, FENTRYID, 'DOutFactory3');
|
DataTable3();
|
break;
|
}
|
});
|
|
function stateFormatter(value, row, index) {
|
if (row.state == true)
|
return {
|
disabled: true,//设置是否可用
|
checked: true//设置选中
|
};
|
return value;
|
}
|
|
})
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
<div class='title'>发货看板</div>
|
<div class="clock">
|
<ul>
|
<li id="Date"></li>
|
<li id="hours"> </li>
|
<li id="point">:</li>
|
<li id="min"> </li>
|
<li id="point">:</li>
|
<li id="sec"> </li>
|
</ul>
|
</div>
|
<form class="layui-form">
|
<div class="layui-tab">
|
<ul class="layui-tab-title">
|
<li lay-id="1" style="padding: 3px; color: rgba(9, 209, 234, 1);" class="layui-this">浙江安东尼奥</li>
|
<li lay-id="2" style="padding: 3px; color: rgba(9, 209, 234, 1);">中安(浙江)</li>
|
<li lay-id="3" style="padding: 3px; color: rgba(9, 209, 234, 1);">绍兴中蓝祥帆</li>
|
</ul>
|
<div class="layui-tab-content">
|
<!--基本信息-->
|
<div class="layui-tab-item layui-show layui-one">
|
<div class="layui-form-item" style="padding-top: 10px;">
|
<div class="col-sm-12 left">
|
<div>
|
<table id="tb_order" lay-filter="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
|
</div>
|
</div>
|
<script type="text/html" id="toolbarDemo">
|
<div class="layui-btn-container">
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="InFactory1">进厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="DInFactory1">撤销进厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="OutFactory1">出厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="DOutFactory1">撤销出厂</button>
|
</div>
|
</script>
|
</div>
|
</div>
|
<!--基本信息-->
|
<div class="layui-tab-item layui-two">
|
<div class="layui-form-item" style="padding-top: 10px;">
|
<div class="col-sm-12 left">
|
<div>
|
<table id="tb_order2" lay-filter="tb_order2" class="table-condensed table-responsive tb_order2" data-filter-control="true"></table>
|
</div>
|
</div>
|
<script type="text/html" id="toolbarDemo2">
|
<div class="layui-btn-container">
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="InFactory2">进厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="DInFactory2">撤销进厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="OutFactory2">出厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="DOutFactory2">撤销出厂</button>
|
</div>
|
</script>
|
</div>
|
</div>
|
<!--基本信息-->
|
<div class="layui-tab-item layui-three">
|
<div class="layui-form-item" style="padding-top: 10px;">
|
<div class="col-sm-12 left">
|
<div>
|
<table id="tb_order3" lay-filter="tb_order3" class="table-condensed table-responsive tb_order3" data-filter-control="true"></table>
|
</div>
|
</div>
|
</div>
|
<script type="text/html" id="toolbarDemo3">
|
<div class="layui-btn-container">
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="InFactory3">进厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="DInFactory3">撤销进厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="OutFactory3">出厂</button>
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="DOutFactory3">撤销出厂</button>
|
</div>
|
</script>
|
</div>
|
</div>
|
|
</div>
|
</form>
|
|
<!--<div class="col-sm-4 right">
|
<div class="col-sm-6 right">
|
<ul id="cList">
|
<li style="font-size:24px;color:#3bff72">状态</li>
|
<li>总单量：<span id="OrderQty">0</span></li>
|
<li>总发货：<span id="FHQty">0</span></li>
|
<li>达成率：<span id="ReachProgress">0</span></li>
|
<li>今日剩余：<span id="DaySupQty">0</span></li>
|
</ul>
|
</div>
|
<div class="col-sm-5 right">
|
<div id="mychart1"></div>
|
</div>
|
</div>
|
<div class="col-sm-3 right">
|
<div id="mychart2"></div>
|
</div>
|
<div class="col-sm-2 right">
|
<div id="mychart3"></div>
|
</div>-->
|
|
</body>
|
|
</html>
|
