<!DOCTYPE html>
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8" />
|
<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/bootstrap-select.min.css">
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
<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-select.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>
|
<style>
|
.clock0 {
|
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
|
font-size: 20px;
|
width: 450px;
|
float: left;
|
color: #fff;
|
margin-top: -75px;
|
margin-right: 5px;
|
color: #09d1ea;
|
}
|
|
.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;
|
}
|
|
.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;
|
}
|
|
.col-sm-8,
|
.col-sm-6,
|
.col-sm-4,
|
.col-sm-3,
|
.col-sm-2 {
|
/* border: 1px solid #00c6ff; */
|
height: 450px;
|
}
|
|
#cTitle {
|
width: 50px;
|
height: 450px;
|
font-size: 25px;
|
line-height: 30px;
|
color: #00c6ff;
|
border: 1px solid #333
|
}
|
|
.col-sm-12,
|
.col-sm-2,
|
.col-sm-3,
|
.col-sm-4,
|
.col-sm-6,
|
.col-sm-8 {
|
position: relative;
|
min-height: 1px;
|
padding-right: 0px;
|
padding-left: 0px;
|
}
|
|
#mychart1,
|
#mychart2,
|
#mychart3,
|
#mychart4,
|
#mychart5 {
|
width: 100%;
|
border: none;
|
height: 450px;
|
}
|
|
#cList {
|
margin: 0% auto;
|
color: #00c6ff;
|
}
|
|
#cList li {
|
margin: 26px auto;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
#cList li span {
|
word-wrap: break-word;
|
word-break: break-all;
|
overflow: hidden;
|
}
|
|
#cList0 {
|
height: 450px;
|
width: 3%;
|
/* border: 1px solid #00c6ff; */
|
float: left;
|
}
|
|
#cList1 {
|
float: left;
|
}
|
|
#cList1 li {
|
float: left;
|
height: 450px;
|
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: 450px;
|
width: 97%;
|
/* 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;
|
}
|
|
.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;
|
}
|
|
.col-sm-3 {
|
width: 20%;
|
}
|
|
.bootstrap-select.form-control:not([class*=col-]) {
|
width: 220px;
|
/* float: right; */
|
}
|
|
.bootstrap-select > .dropdown-toggle.bs-placeholder,
|
.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
|
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
|
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
|
border-color: #080E2D !important;
|
background-color: #000 !important;
|
color: #09d1ea !important;
|
}
|
|
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
|
color: #09d1ea !important;
|
}
|
|
.bootstrap-select.btn-group .dropdown-menu {
|
background-color: #000 !important;
|
}
|
|
.form-control {
|
background-color: #000 !important;
|
}
|
|
.form-control:focus {
|
border-color: #09d1ea !important;
|
}
|
|
.form-control:hover {
|
border-color: #000 !important;
|
}
|
|
.btn-default:hover {
|
border-color: #09d1ea !important;
|
}
|
|
.bootstrap-select.btn-group .dropdown-menu li a:hover {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
}
|
|
.btn-default {
|
border-color: #09d1ea !important;
|
color: #09d1ea !important;
|
background-color: #000 !important;
|
}
|
|
.bootstrap-select.form-control:hover {
|
background-color: #000 !important;
|
}
|
|
.btn-default:hover {
|
background-color: #000 !important;
|
border-color: #09d1ea !important;
|
color: #09d1ea !important;
|
}
|
|
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
}
|
</style>
|
<script type="text/javascript">
|
//配置参数
|
var LineCode = '11111'//生产资源编码
|
var LineCodeList = 'BM000002';//流水线看板今日全部流水线编码:产线1、产线2、产线3、产线4、产线5、产线6
|
var SourceList = [];
|
var SourceNum = 0;
|
|
|
|
var interval;//计时器
|
var interval1;//计时器
|
var num = 0;
|
var hours = [];
|
var hoursqty = [];
|
var CloseProgress = 0; //完工率
|
var LineName = []; //流水线数组
|
var LineOrderQty = []; //流水线当天订单总任务数量数组
|
var LineOrderCloseQty = []; //流水线当天订单总完成数量数组
|
var Week = 0; //本周分析
|
var Month = 0; //本月分析
|
|
$(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 () {
|
showHospitalCode();
|
var mychart1 = echarts.init(document.getElementById('mychart1'));
|
var mychart2 = echarts.init(document.getElementById('mychart2'));
|
var mychart3 = echarts.init(document.getElementById('mychart3'));
|
var mychart4 = echarts.init(document.getElementById('mychart4'));
|
var mychart5 = echarts.init(document.getElementById('mychart5'));
|
Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
|
DataTable();
|
// 定时器
|
interval = setInterval(function () {
|
hours = [];
|
hoursqty = [];
|
closeprogress = 0; //完工率
|
LineName = []; //流水线数组
|
LineOrderQty = []; //流水线当天订单总任务数量数组
|
LineOrderCloseQty = []; //流水线当天订单总完成数量数组
|
week = 0; //本周分析
|
month = 0; //本月分析
|
Chart(mychart1, mychart2, mychart3, mychart4, mychart5);
|
}, 20000);
|
setInterval(function () {
|
//num+=1;
|
//$("#tb_order").bootstraptable('refreshoptions',{offset:num}); // pagenumber:1, 指定页码为第1页
|
$("#tb_order").bootstrapTable('refresh');
|
}, 10000);
|
//更换下拉框资源
|
setInterval(function () {
|
if (SourceNum < SourceList.data.length) {
|
LineCode = SourceList.data[SourceNum].HNumber;
|
$("#hospitalCodeSelect").find("option[value='" + SourceList.data[SourceNum].HNumber + "']").attr("selected", true);//更新下拉框选中数据
|
$("#hospitalCodeSelect").selectpicker('refresh')//页面渲染
|
SourceNum += 1;
|
} else {
|
showHospitalCode();
|
SourceNum = 0;
|
}
|
}, 30000);
|
//根据窗口的大小变动图表 --- 重点
|
window.onresize = function () {
|
mychart1.resize();
|
mychart2.resize();
|
mychart3.resize();
|
mychart4.resize();
|
mychart5.resize();
|
}
|
})
|
|
function Chart(mychart1, mychart2, mychart3, mychart4, mychart5) {
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/KB_ProductData",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "LineCode": LineCode, "LineCodeList": LineCodeList },
|
success: function (data) {
|
|
$.each(data.data[0], function (index, val) {
|
hours.push(val.hour + '点');
|
hoursqty.push(parseFloat(val.Count).toFixed(2));
|
|
});
|
if (data.data[1].length > 0) {
|
$("#OrderQty").html(parseFloat(data.data[1][0].HDatePlanQty).toFixed(2)); //总订单
|
$("#OrderInQty").html(parseFloat(data.data[1][0].HQty).toFixed(2));//已入库
|
|
CloseProgress = parseFloat(data.data[1][0].HQty / data.data[1][0].HDatePlanQty).toFixed(2); //完成率
|
}
|
|
if (data.data[2].length > 0) {
|
$("#LineStus").html(data.data[2][0].HICMOStatus);
|
}
|
|
//今日全部流水线产量对比
|
$.each(data.data[3], function (index, val) {
|
LineName.push(val.FNAME);
|
LineOrderQty.push(parseFloat(val.qty).toFixed(2));
|
LineOrderCloseQty.push(parseFloat(val.inqty).toFixed(2));
|
|
});
|
|
//本周分析
|
Week = parseFloat(data.data[4][1].weekqty / data.data[4][0].weekqty).toFixed(2);
|
//本月分析
|
Month = parseFloat(data.data[4][3].weekqty / data.data[4][2].weekqty).toFixed(2);
|
},
|
error: function (data) {
|
|
}
|
})
|
|
|
option1 = {
|
tooltip: {
|
trigger: 'item',
|
formatter: "{a} <br/>{b}月 : {c}"
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: hours, //时间点数据
|
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: "微软雅黑"
|
}
|
},
|
legend: {
|
icon: 'line',
|
data: ['小时产能'],
|
textStyle: {
|
color: '#00c6ff',
|
fontSize: 20,
|
fontFamily: "微软雅黑"
|
}
|
},
|
series: [
|
{
|
name: '小时产能',
|
data: hoursqty, //时间点值
|
type: 'line',
|
smooth: true,
|
itemStyle: {
|
normal: {
|
color: 'orange',
|
lineStyle: {
|
width: 4, //设置线条粗细
|
shadowColor: 'rgba(255, 94, 91,.1)',
|
shadowOffsetX: 3,
|
shadowOffsetY: 5,
|
}
|
},
|
},
|
textStyle: {
|
fontFamily: "微软雅黑"
|
}
|
},
|
]
|
}
|
|
const colorList = ['#47A2FF ', '#FBD444']
|
|
option2 = {
|
title: {
|
text: '达成率',
|
subtext: (CloseProgress * 100).toFixed(0) + '%',
|
textStyle: {
|
fontSize: 20,
|
color: '#00c6ff',
|
lineHeight: 20,
|
fontFamily: "微软雅黑"
|
},
|
subtextStyle: {
|
fontSize: 18,
|
color: '#00c6ff'
|
},
|
textAlign: 'center',
|
left: '50%',
|
top: '70%'
|
},
|
tooltip: {
|
trigger: 'item',
|
},
|
legend: {
|
type: 'scroll',
|
icon: 'pin',
|
show: true,
|
top: '90%',
|
left: 'center',
|
textStyle: {
|
color: '#09d1ea'
|
}
|
},
|
color: colorList,
|
series: [
|
{
|
name: '占比',
|
type: 'pie',
|
radius: [50, 80],
|
center: ['50%', '50%'],
|
label: {
|
show: false
|
},
|
labelLine: {
|
show: false
|
},
|
itemStyle: {
|
borderWidth: 3,
|
borderColor: '#000000'
|
},
|
data: [
|
{ name: '达成率', value: CloseProgress > 1 ? 1 : CloseProgress },
|
{ name: '未达成率', value: CloseProgress > 1 ? 0 : 1 - CloseProgress }
|
]
|
}
|
]
|
};
|
|
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: LineName,
|
axisTick: {
|
alignWithLabel: true
|
},
|
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#00c6ff',
|
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
|
width: 1, //隐藏y轴
|
}
|
},
|
axisLabel: {
|
interval: 0, //控制X轴刻度全部显示
|
rotate: 45, //倾斜角度
|
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',
|
data: LineOrderQty
|
},
|
{
|
name: '完成数',
|
type: 'bar',
|
data: LineOrderCloseQty
|
}
|
]
|
};
|
|
option4 = {
|
title: [
|
{
|
text: '达成率',
|
subtext: (Week * 100).toFixed(0) + '%',
|
textStyle: {
|
fontSize: 16,
|
color: '#999',
|
lineHeight: 20
|
},
|
subtextStyle: {
|
fontSize: 28,
|
color: '#00c6ff'
|
},
|
textAlign: 'center',
|
left: '50%',
|
top: '70%'
|
},
|
{
|
show: true,
|
text: '本周分析',
|
textStyle: {
|
color: '#00c6ff',
|
fontSize: '16',
|
},
|
textAlign: 'center',
|
left: '50%',
|
top: '5%'
|
}
|
],
|
tooltip: {
|
trigger: 'item',
|
},
|
legend: {
|
type: 'scroll',
|
icon: 'pin',
|
show: true,
|
top: '90%',
|
left: 'center',
|
textStyle: {
|
color: '#09d1ea'
|
}
|
},
|
color: colorList,
|
series: [
|
{
|
name: '占比',
|
type: 'pie',
|
radius: [50, 80],
|
center: ['50%', '50%'],
|
label: {
|
show: false
|
},
|
labelLine: {
|
show: false
|
},
|
itemStyle: {
|
borderWidth: 3,
|
borderColor: '#000000'
|
},
|
data: [
|
{ name: '达成率', value: Week > 1 ? 1 : Week },
|
{ name: '未达成率', value: Week > 1 ? 0 : 1 - Week }
|
],
|
}
|
]
|
};
|
|
option5 = {
|
title: [
|
{
|
text: '达成率',
|
subtext: (Month * 100).toFixed(0) + '%',
|
textStyle: {
|
fontSize: 16,
|
color: '#999',
|
lineHeight: 20
|
},
|
subtextStyle: {
|
fontSize: 28,
|
color: '#00c6ff'
|
},
|
textAlign: 'center',
|
left: '50%',
|
top: '70%'
|
},
|
{
|
show: true,
|
text: '本月分析',
|
textStyle: {
|
color: '#00c6ff',
|
fontSize: '16',
|
},
|
textAlign: 'center',
|
left: '50%',
|
top: '5%'
|
}
|
],
|
tooltip: {
|
trigger: 'item',
|
},
|
legend: {
|
type: 'scroll',
|
icon: 'pin',
|
show: true,
|
top: '90%',
|
left: 'center',
|
textStyle: {
|
color: '#09d1ea'
|
}
|
},
|
color: colorList,
|
series: [
|
{
|
name: '占比',
|
type: 'pie',
|
radius: [50, 80],
|
center: ['50%', '50%'],
|
label: {
|
show: false
|
},
|
labelLine: {
|
show: false
|
},
|
itemStyle: {
|
borderWidth: 3,
|
borderColor: '#000000'
|
},
|
data: [
|
{ name: '达成率', value: Month > 1 ? 1 : Month },
|
{ name: '未达成率', value: Month > 1 ? 0 : 1 - Month }
|
],
|
}
|
]
|
};
|
|
|
mychart1.setOption(option1);
|
mychart2.setOption(option2);
|
mychart3.setOption(option3);
|
mychart4.setOption(option4);
|
mychart5.setOption(option5);
|
|
}
|
|
function DataTable() {
|
$('#tb_order').bootstrapTable({
|
url: GetWEBURL() + '/loaddata/KB_ProductTableData',
|
//data: dataJson,
|
method: 'get', //请求方式（*）
|
dataType: "json",
|
queryParams: queryParams,
|
striped: false, //是否显示行间隔色
|
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
|
pagination: true, //是否显示分页（*）
|
sortable: false, //是否启用排序
|
sortable: false, //是否启用排序
|
search: false, //是否启用搜索框
|
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
|
pageNumber: 1, //初始化加载第一页，默认第一页
|
pageSize: 10, //每页的记录行数（*）
|
pageList: [10], //可供选择的每页的行数（*）
|
strictSearch: false, //设置为 true启用 全匹配搜索，否则为模糊搜索
|
clickToSelect: true, //是否启用点击选中行
|
singleSelect: true, //设置True 将禁止多选
|
uniqueId: "ID", //每一行的唯一标识，一般为主键列
|
cardView: false, //是否显示详细视图
|
detailView: false, //是否显示父子表
|
//responseHandler: function (res) {
|
// // 对返回参数进行处理
|
// //console.log(res);
|
// //return {
|
// // "total": res.total,
|
// // "rows": res.rows
|
// //};
|
//},
|
columns: [
|
{ field: 'HICMOBillNo', title: '生产订单号', align: "left" },
|
{ field: 'HNumber', title: '产品编码', align: "left" },
|
{ field: 'HName', title: '产品名称', align: "left" },
|
{ field: 'HModel', title: '产品规格', align: "left" },
|
{
|
field: 'HPlanQty', title: '订单数量', align: "left", width: 100, formatter: function (value, row, index) {
|
return parseFloat(value).toFixed(2);
|
}
|
},
|
{
|
field: 'HSplitRelationQty', title: '完成数量', align: "left", width: 100, formatter: function (value, row, index) {
|
return parseFloat(value).toFixed(2);
|
}
|
},
|
{
|
field: 'FQTY', title: '库存数量', align: "left", width: 100, formatter: function (value, row, index) {
|
return parseFloat(value).toFixed(2);
|
}
|
},
|
{
|
field: 'HICMOStatus', title: '状态', align: "left", width: 100
|
},
|
{
|
field: 'Progress', title: '进度', align: "left", formatter: function (value, row, index) {
|
var res = 100 * row.HSplitRelationQty / row.HPlanQty;
|
return "<div class='w40 div_co pw'><div class='PA' style='text-align:right;color:#4b2dba;float:right;height:20px;line-height:25px'>" + res.toFixed(2) + "%</div><div class='progress' style='margin-top:4px;'><div class='progress-bar progress-diy-info' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:" + res.toFixed(2) + "%';text-align:center;'></div></div></div>";
|
}
|
}
|
],
|
onClickRow: function (row, $element) {
|
|
},
|
onCheck: function (row, $element) {
|
|
},
|
onLoadSuccess: function (row) {
|
var num_total = (row.total) / 10
|
if (num >= num_total) {
|
num = 0
|
}
|
//var a = $('#tb_order').bootstrapTable('getSelections');
|
}
|
|
})
|
}
|
//得到查询的参数
|
function queryParams(params) {
|
num += 1;
|
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
|
LineCode: LineCode,
|
limit: params.limit, //页面大小
|
offset: num, //页码
|
};
|
return temp;
|
}
|
//选择事件
|
function selectOnchang(obj) {
|
LineCode = obj.options[obj.selectedIndex].value;
|
Chart(mychart1, mychart2, mychart3, mychart4, mychart5)
|
//DataTable();
|
$('#tb_order').bootstrapTable('refresh');
|
}
|
function showHospitalCode() {
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/Gy_Source",//跳转到控制器HospitalController
|
type: "get",
|
success: function (Data) {
|
var hospitals = JSON.parse(Data);//反序列化
|
SourceList = hospitals;
|
var content = '';
|
$.each(hospitals.data, function (i, n) {
|
content += "<option value='" + n.HNumber + "'>" + n.HNumber + '-' + n.HName + "</option>";
|
});
|
$("#hospitalCodeSelect").empty();
|
$("#hospitalCodeSelect").append(content);//append 添加进去并展示
|
$("#hospitalCodeSelect").find("option[value='" + hospitals.data[0].HNumber + "']").attr("selected", true);
|
$("#hospitalCodeSelect").selectpicker('refresh');
|
}
|
})
|
}
|
</script>
|
</head>
|
<body>
|
<div class='title'>生产设备产量分析看板</div>
|
<div class="clock0">
|
<select class="selectpicker show-tick form-control" id="hospitalCodeSelect" data-live-search="true" title="搜索或选择流水线" style="float: left;" onchange="selectOnchang(this)">
|
<option value=''></option>
|
</select>
|
</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>
|
<div class="col-sm-8">
|
<div class="col-sm-7">
|
<div id="mychart1"></div>
|
</div>
|
<div class="col-sm-3">
|
<ul id="cList">
|
<li style="font-size: 25px"><span>设备状态：</span><span id="LineStus"></span></li>
|
<li><span>订单量：</span><span id="OrderQty">0</span></li>
|
<li><span>产量：</span><span id="OrderInQty">0</span></li>
|
</ul>
|
</div>
|
<div class="col-sm-2">
|
<div id="mychart2"></div>
|
</div>
|
</div>
|
<div class="col-sm-4">
|
<div id="mychart3"></div>
|
</div>
|
<div class="col-sm-8">
|
<div id="cList0">
|
<ul id="cList1">
|
<li><span>本线当日全部订单</span></li>
|
</ul>
|
</div>
|
<div id="cList2">
|
<table id="tb_order" class="table-condensed table-responsive tb_order" data-filter-control="true"></table>
|
</div>
|
</div>
|
<div class="col-sm-4">
|
<div class="col-sm-6">
|
<div id="mychart4"></div>
|
</div>
|
<div class="col-sm-6">
|
<div id="mychart5"></div>
|
</div>
|
</div>
|
</body>
|
</html>
|
