<!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>
|
|
body {
|
padding: 0px;
|
font-family: KaiTi;
|
height: 100%;
|
width: 100%;
|
}
|
|
.bj {
|
background: url(../KanBanUI/img/bj4.jpg) no-repeat center center; /*加载背景图：图片地址 不平铺 */
|
background-size: cover; /*让背景图基于容器大小伸缩 */
|
background-attachment: fixed;
|
height: 100%;
|
width: 100%;
|
position: absolute;
|
}
|
|
.tr0 {
|
height: 80px;
|
/*background-color: aquamarine;*/
|
width: 100%
|
}
|
|
.col2-1 {
|
/*background-color: aquamarine;*/
|
width: 100%;
|
height: 100%;
|
}
|
|
.col2-1-p {
|
padding-right: 2%;
|
width: 50%;
|
height: 100%;
|
/*background-color: #0d5974;*/
|
margin: 0 auto;
|
line-height: 100%;
|
}
|
|
.col2-1-p p {
|
font-size: 28px;
|
text-align: center;
|
width: 100%;
|
height: 100%;
|
line-height: 400%;
|
/*background-color: #88ace74d;*/
|
}
|
|
.clock {
|
/*background-color: #88ace74d;*/
|
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
|
font-size: 20px;
|
float: right;
|
/*margin-top: -4px;*/
|
margin-right: 25px;
|
}
|
|
.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;
|
}
|
|
.tr1 {
|
height: 1000px;
|
/*background-color: #e5b2b26b;*/
|
width: 22%;
|
float: left;
|
}
|
|
.tr1-k {
|
height: 1000px;
|
/*background-color: #e5b1b26b;*/
|
width: 5.5%;
|
float: left;
|
}
|
|
.tr1-1 {
|
height: 28%;
|
/*background-color: #e5c6b26b;*/
|
width: 94.5%;
|
float: left;
|
color: aqua;
|
}
|
|
.tr1-1-k {
|
height: 38%;
|
width: 100%;
|
/*background-color: #cc9393ad;*/
|
}
|
|
.tr1-1-cen {
|
height: 18%;
|
width: 100%;
|
/*background-color: #cc9223ad;*/
|
}
|
|
.tr1-1-cenk {
|
height: 100%;
|
width: 10%;
|
/*background-color: #9d202099;*/
|
float: left;
|
}
|
|
.tr1-1-cen-left {
|
height: 100%;
|
width: 39%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-1-cen-left p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-1-cen-right {
|
height: 100%;
|
width: 35%;
|
/*background-color: #9d329099;*/
|
float: left;
|
}
|
|
.tr1-1-cen-right p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-1-cen-k {
|
height: 14%;
|
width: 100%;
|
/*background-color: #cc9393ad;*/
|
}
|
|
.tr1-1-btm {
|
height: 30%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-1-btm-k {
|
height: 100%;
|
width: 10%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-1-btm-left {
|
height: 100%;
|
width: 37%;
|
/*background-color: #9d303099;*/
|
float: left;
|
}
|
|
.tr1-1-btm-left p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-1-btm-right {
|
height: 100%;
|
width: 42%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-1-btm-right p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-2 {
|
height: 23%;
|
/*background-color: #dd9393ad;*/
|
width: 94.5%;
|
float: left;
|
color: aqua;
|
}
|
|
.tr1-2-k {
|
height: 38%;
|
width: 100%;
|
/*background-color: #cc9393ad;*/
|
}
|
|
.tr1-2-cen {
|
height: 18%;
|
width: 100%;
|
/*background-color: #cc9223ad;*/
|
}
|
|
.tr1-2-cenk {
|
height: 100%;
|
width: 5%;
|
/*background-color: #9d202099;*/
|
float: left;
|
}
|
|
.tr1-2-cen-left {
|
height: 100%;
|
width: 30%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-2-cen-left p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-2-cen-cen {
|
height: 100%;
|
width: 30%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-2-cen-cen p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-2-cen-right {
|
height: 100%;
|
width: 30%;
|
/*background-color: #9d329099;*/
|
float: left;
|
}
|
|
.tr1-2-cen-right p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-2-cen-k {
|
height: 22%;
|
width: 100%;
|
/*background-color: #cc9393ad;*/
|
}
|
|
.tr1-2-btm {
|
height: 22%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-2-btm-k {
|
height: 100%;
|
width: 5%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-2-btm-left {
|
height: 100%;
|
width: 30%;
|
/*background-color: #9d303099;*/
|
float: left;
|
}
|
|
.tr1-2-btm-left p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-2-btm-cen {
|
height: 100%;
|
width: 30%;
|
/*background-color: #9d303099;*/
|
float: left;
|
}
|
|
.tr1-2-btm-cen p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-2-btm-right {
|
height: 100%;
|
width: 30%;
|
/*background-color: #9d909099;*/
|
float: left;
|
}
|
|
.tr1-2-btm-right p {
|
text-align: center;
|
font-size: 30px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr1-3 {
|
margin-left: 2%;
|
height: 20%;
|
/*background-color: #6aa3dbde;*/
|
width: 90.5%;
|
float: left;
|
}
|
|
.tr1-4 {
|
margin-left: 2%;
|
margin-top: 9%;
|
height: 20%;
|
/*background-color: #6cc3aade;*/
|
width: 88%;
|
float: left;
|
}
|
|
.tr2 {
|
height: 966px;
|
/*background-color: #7e7474a3;*/
|
width: 56%;
|
float: left;
|
}
|
|
.tr2-k {
|
height: 12%;
|
/*background-color: #7e3374a3;*/
|
width: 100%;
|
}
|
|
.tr2-1 {
|
height: 14%;
|
/*background-color: #7e3323a3;*/
|
width: 100%;
|
}
|
|
.tr2-1-k {
|
height: 100%;
|
/*background-color: #7e6623a3;*/
|
width: 8%;
|
float: left;
|
}
|
|
.tr2-1-1 {
|
height: 100%;
|
/*background-color: #7e8426c3;*/
|
width: 9%;
|
float: left;
|
}
|
|
.tr2-1-1-k {
|
height: 100%;
|
/*background-color: #7e6623a3;*/
|
width: 13.5%;
|
float: left;
|
}
|
|
.tr2-1-2 {
|
height: 100%;
|
/*background-color: #7e8426c3;*/
|
width: 9%;
|
float: left;
|
}
|
|
.tr2-1-2-k {
|
height: 100%;
|
/*background-color: #7e6623a3;*/
|
width: 14%;
|
float: left;
|
}
|
|
.tr2-1-3 {
|
height: 100%;
|
/*background-color: #7e8426c3;*/
|
width: 9%;
|
float: left;
|
}
|
|
.tr2-1-3-k {
|
height: 100%;
|
/*background-color: #7e6623a3;*/
|
width: 15%;
|
float: left;
|
}
|
|
.tr2-1-4 {
|
height: 100%;
|
/*background-color: #7e8426c3;*/
|
width: 9%;
|
float: left;
|
}
|
|
.tr2-k-1 {
|
height: 12%;
|
/*background-color: #7e3374a3;*/
|
width: 100%;
|
}
|
|
.tr3 {
|
height: 966px;
|
/*background-color: #99d7c799;*/
|
width: 22%;
|
float: left;
|
}
|
|
.tr3-1 {
|
height: 36%;
|
/*background-color: #99d7c799;*/
|
width: 100%;
|
}
|
|
.tr3-2 {
|
height: 26%;
|
/*background-color: #99f6a799;*/
|
width: 100%;
|
color: aqua;
|
}
|
|
.tr3-2-k {
|
height: 40%;
|
/*background-color: #99f6a799;*/
|
width: 100%;
|
}
|
|
.tr3-2-l-k {
|
height: 20%;
|
/*background-color: #99f3e399;*/
|
width: 6%;
|
float: left;
|
}
|
|
.tr3-2-l {
|
height: 20%;
|
/*background-color: #99f3e399;*/
|
width: 28%;
|
float: left;
|
padding-top: 1%;
|
}
|
|
.tr3-2-l p {
|
text-align: center;
|
font-size: 22px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr3-2-c {
|
height: 20%;
|
/*background-color: #99f3e399;*/
|
width: 28%;
|
float: left;
|
padding-top: 1%;
|
}
|
|
.tr3-2-c p {
|
text-align: center;
|
font-size: 22px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr3-2-r {
|
height: 20%;
|
/*background-color: #99f3e399;*/
|
width: 29%;
|
float: left;
|
padding-top: 1%;
|
}
|
|
.tr3-2-r p {
|
text-align: center;
|
font-size: 22px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr3-2-2-k {
|
height: 39%;
|
/*background-color: #99f6a799;*/
|
width: 100%;
|
}
|
|
.tr3-2-2 {
|
height: 20%;
|
/*background-color: #99f3e399;*/
|
width: 32%;
|
float: left;
|
}
|
|
.tr3-2-2 p {
|
text-align: center;
|
font-size: 22px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d332359;*/
|
}
|
|
.tr3-2-3 {
|
height: 20%;
|
/*background-color: #99f3e399;*/
|
width: 20%;
|
float: left;
|
}
|
|
.tr3-2-3 p {
|
text-align: center;
|
font-size: 22px;
|
height: 100%;
|
width: 100%;
|
/*background-color: #9d909099;*/
|
}
|
|
.tr3-3 {
|
margin-left: 3%;
|
margin-top: 7%;
|
height: 30%;
|
/*background-color: #99f6a733;*/
|
width: 88%;
|
}
|
</style>
|
<script type="text/javascript">
|
$(document).ready(function () {
|
// 创建两个变量，一个数组中的月和日的名称
|
var monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "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();
|
|
|
$('#Date').html(year + "-" + monthNames[month] + '-' + (day < 10 ? "0" + day : day) + " ");
|
$("#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'));
|
//var mychart4 = echarts.init(document.getElementById('mychart4'));
|
var mychart5 = echarts.init(document.getElementById('mychart5'));
|
|
Chart(mychart1, mychart2, mychart3, mychart5);
|
|
setInterval(function () {
|
Chart(mychart1, mychart2, mychart3, mychart5);
|
}, 60000);
|
|
|
|
//根据窗口的大小变动图表 --- 重点
|
window.onresize = function () {
|
mychart1.resize();
|
mychart2.resize();
|
mychart3.resize();
|
mychart5.resize();
|
}
|
|
});
|
var PubRes = [];
|
|
|
|
function Chart(mychart1, mychart2, mychart3, mychart5) {
|
//所有工序在制 生产数量
|
get_Proc();
|
//当前状态
|
get_CurrentState();
|
//折线图
|
get_LineChart(mychart1, mychart3);
|
//柱状图
|
get_Histogram(mychart2);
|
//仪表盘
|
get_Dashboard_2(mychart5);
|
//在制状态
|
get_ZZSate();
|
}
|
|
//当前状态
|
function get_CurrentState() {
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/get_CurrentState",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "LineCode": "1" },
|
success: function (res) {
|
var HQty = 0.0;
|
for (var i = 0; i < PubRes.data[0].length; i++) {
|
HQty += PubRes.data[0][i].InHQty;
|
}
|
$("#jh").text(parseInt(res.data[0][0]["HQty"]).toLocaleString());
|
$("#wc").text(parseInt(res.data[1][0]["HQty"]).toLocaleString());
|
$("#zz").text(parseInt(HQty).toLocaleString());
|
$("#dd").text(parseInt(res.data[2][0]["HQty"]).toLocaleString());
|
}
|
})
|
}
|
|
//在制状态
|
function get_ZZSate() {
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/get_ZZSate",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "LineCode": "1" },
|
success: function (res) {
|
$("#lrc").text(res.data[0][0]["lrc"].toLocaleString());
|
$("#lhzyh").text(res.data[1][0]["lhzyh"].toLocaleString());
|
$("#lhzeh").text(res.data[2][0]["lhzeh"].toLocaleString());
|
$("#lhzsh").text(res.data[3][0]["lhzsh"].toLocaleString());
|
$("#ltz").text(res.data[4][0]["ltz"].toLocaleString());
|
$("#lbpwf").text(res.data[5][0]["lbpwf"].toLocaleString());
|
}
|
})
|
}
|
|
//工序数量
|
function get_Proc() {
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/KB_ProcSum",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "LineCode": "1" },
|
success: function (res) {
|
PubRes = res;
|
for (var i = 0; i < res.data[0].length; i++) {
|
if (res.data[0][i].HProcID == 191) {//缸厂
|
//$("#zzp1_2").text( res.data[0][i].InHQty.toLocaleString());
|
$("#cps_2").text(res.data[0][i].OutHQty.toLocaleString());
|
} else if (res.data[0][i].HProcID == 193) {//烘干定型
|
$("#zzp1_3").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_3").text(res.data[0][i].OutHQty.toLocaleString());
|
}
|
else if (res.data[0][i].HProcID == 194) {//上浆定型
|
$("#zzp1_4").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_4").text(res.data[0][i].OutHQty.toLocaleString());
|
}
|
else if (res.data[0][i].HProcID == 206) {//短线烫
|
$("#zzp1_5").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_5").text(res.data[0][i].OutHQty.toLocaleString());
|
}
|
else if (res.data[0][i].HProcID == 204) {//预烫剪
|
$("#zzp1_6").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_6").text(res.data[0][i].OutHQty.toLocaleString());
|
}
|
else if (res.data[0][i].HProcID == 200) {//拉幅定型
|
$("#zzp1_7").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_7").text(res.data[0][i].OutHQty.toLocaleString());
|
}
|
else if (res.data[0][i].HProcID == 198) {//色坯烫光
|
$("#zzp1_8").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_8").text(res.data[0][i].OutHQty.toLocaleString());
|
}
|
else if (res.data[0][i].HProcID == 197) {//补刷
|
$("#zzp1_9").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_9").text(res.data[0][i].OutHQty.toLocaleString());
|
}
|
else if (res.data[0][i].HProcID == 201) {//印毛尖
|
$("#zzp1_10").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_10").text(res.data[0][i].OutHQty.toLocaleString());
|
}
|
else if (res.data[0][i].HProcID == 205) {//长线烫
|
$("#zzp1_11").text(res.data[0][i].InHQty.toLocaleString());
|
$("#cps_11").text(res.data[0][i].OutHQty.toLocaleString());
|
$("#zzp1_12").text(res.data[0][i].InHQty.toLocaleString());//打包入库
|
}
|
}
|
//打包入库
|
//$("#cps_12").text(res.data[1][0].HQty.toLocaleString());
|
//染厂在制数量
|
//$("#zzp1_2").text((res.data[2].length == 0 ? 0 : res.data[2][0].HQty.toLocaleString()));
|
}
|
})
|
}
|
|
//折线图
|
function get_LineChart(mychart1, mychart3) {
|
|
//生产效率
|
var res = PubRes;
|
var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
for (var i = 0; i < res.data[0].length; i++) {
|
if (res.data[0][i].HProcID == 191) {//缸厂
|
optionData[0] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
} else if (res.data[0][i].HProcID == 193) {//烘干定型
|
optionData[1] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 194) {//上浆定型
|
optionData[2] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 198) {//色坯烫光
|
optionData[3] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 204) {//预烫剪
|
optionData[4] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 197) {//补刷
|
optionData[5] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 201) {//印毛尖
|
optionData[6] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 200) {//拉幅定型
|
optionData[7] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 206) {//短线烫
|
optionData[8] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 205) {//长线烫
|
optionData[9] = (res.data[0][i].OutHQty / 1000).toFixed(0);
|
}
|
}
|
//打包入库
|
optionData[10] = (res.data[1][0].HQty / 1000).toFixed(0);
|
|
var option = {
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['缸染', '烘干定型', '上浆定型', '色坯烫光', '预烫剪', '补刷', '印毛尖', '拉幅定型', '短线烫', '长线烫', '打包入库']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
legend: {
|
orient: 'vertical',
|
data: ['12', '43'],//设置线条的名字
|
right: 0,
|
top: 15,
|
textStyle: {
|
color: '#35d1ed' //设置字体颜色
|
}
|
},
|
axisLabel: {
|
show: true,
|
interval: 0,
|
color: '#35d1ed',
|
formatter: function (value) {
|
var ret = "";//拼接加\n返回的类目项
|
var maxLength = 1;//每项显示文字个数
|
var valLength = value.length;//X轴类目项的文字个数
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
if (rowN > 1)//如果类目项的文字大于3,
|
{
|
for (var i = 0; i < rowN; i++) {
|
var temp = "";//每次截取的字符串
|
var start = i * maxLength;//开始截取的位置
|
var end = start + maxLength;//结束截取的位置
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + "\n";
|
ret += temp; //凭借最终的字符串
|
}
|
return ret;
|
}
|
else {
|
return value;
|
}
|
}
|
},
|
series: [
|
{
|
name: '12',//与legend对应
|
data: optionData,
|
type: 'line',
|
label: {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
},
|
smooth: true,//smooth属性默认是false false就是直线 true就是曲线
|
lineStyle: {
|
color: '#44E2F0'
|
}
|
, itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: '#44E2F0',
|
label: {
|
show: true // 在折线拐点上显示数据
|
}
|
},
|
}, areaStyle: {}
|
},
|
{
|
name: '43',
|
data: [10, 10, 10, 10, 10, 10, 10, 10],
|
type: 'line',
|
smooth: true,//smooth属性默认是false false就是直线 true就是曲线
|
lineStyle: {
|
color: '#90f083'
|
}
|
, itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: '#90f083',
|
label: {
|
show: true // 在折线拐点上显示数据
|
}
|
},
|
}, areaStyle: {}
|
}
|
]
|
};
|
|
|
//生产产量
|
var dateData = [];
|
var OptionData = [];
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/ProductionOutput",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "LineCode": "1" },
|
success: function (res) {
|
for (var i = 0; i < res.data[0].length; i++) {
|
dateData.push(res.data[0][i]["HDate"]);
|
OptionData.push((res.data[0][i]["HQty"] / 1000).toFixed(0));
|
}
|
}
|
})
|
|
var option2 = {
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: dateData
|
},
|
yAxis: {
|
type: 'value'
|
},
|
legend: {
|
orient: 'vertical',
|
data: ['千米'],//设置线条的名字
|
right: 0,
|
top: 15,
|
textStyle: {
|
color: '#35d1ed' //设置字体颜色
|
}
|
},
|
axisLabel: {
|
show: true,
|
interval: 0,
|
color: '#35d1ed',
|
formatter: function (value) {
|
var ret = "";//拼接加\n返回的类目项
|
var maxLength = 2;//每项显示文字个数
|
var valLength = value.length;//X轴类目项的文字个数
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
if (rowN > 1)//如果类目项的文字大于3,
|
{
|
for (var i = 0; i < rowN; i++) {
|
var temp = "";//每次截取的字符串
|
var start = i * maxLength;//开始截取的位置
|
var end = start + maxLength;//结束截取的位置
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
if (value[i + 1] == "/") {
|
temp = value.substring(i + 1, i + 2) + "\n" + value.substring(i + 2, valLength);
|
ret += temp;
|
return ret;
|
} else {
|
temp = value.substring(start, end) + "\n";
|
}
|
ret += temp; //凭借最终的字符串
|
}
|
return ret;
|
}
|
else {
|
return value;
|
}
|
}
|
},
|
series: [
|
{
|
name: '千米',//与legend对应
|
data: OptionData,
|
type: 'line',
|
label: {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
},
|
smooth: true,//smooth属性默认是false false就是直线 true就是曲线
|
lineStyle: {
|
color: '#44E2F0' //线条颜色
|
}
|
, itemStyle: {
|
// 设置线条上点的颜色（和图例的颜色）
|
normal: {
|
color: '#44E2F0',
|
label: {
|
show: true // 在折线拐点上显示数据
|
}
|
},
|
}
|
}
|
]
|
};
|
mychart1.setOption(option);
|
mychart3.setOption(option2);
|
}
|
|
//柱状图
|
function get_Histogram(mychart2) {
|
|
//生产负荷
|
var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/KB_scfh",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "LineCode": "1" },
|
success: function (res) {
|
|
for (var i = 0; i < res.data[0].length; i++) {
|
if (res.data[0][i].HProcID == 191) {//缸厂
|
optionData[0] = (res.data[0][i].HQty / 1000).toFixed(0);
|
} else if (res.data[0][i].HProcID == 193) {//烘干定型
|
optionData[1] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 194) {//上浆定型
|
optionData[2] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 198) {//色坯烫光
|
optionData[3] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 204) {//预烫剪
|
optionData[4] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 197) {//补刷
|
optionData[5] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 201) {//印毛尖
|
optionData[6] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 200) {//拉幅定型
|
optionData[7] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 206) {//短线烫
|
optionData[8] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
else if (res.data[0][i].HProcID == 205) {//长线烫
|
optionData[9] = (res.data[0][i].HQty / 1000).toFixed(0);
|
}
|
}
|
}
|
})
|
|
var option = {
|
xAxis: {
|
type: 'category',
|
data: ['缸染', '烘干定型', '上浆定型', '色坯烫光', '预烫剪', '补刷', '印毛尖', '拉幅定型', '短线烫', '长线烫']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
axisLabel: {
|
show: true,
|
interval: 0,
|
color: '#35d1ed',
|
formatter: function (value) {
|
var ret = "";//拼接加\n返回的类目项
|
var maxLength = 1;//每项显示文字个数
|
var valLength = value.length;//X轴类目项的文字个数
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
if (rowN > 1)//如果类目项的文字大于3,
|
{
|
for (var i = 0; i < rowN; i++) {
|
var temp = "";//每次截取的字符串
|
var start = i * maxLength;//开始截取的位置
|
var end = start + maxLength;//结束截取的位置
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + "\n";
|
ret += temp; //凭借最终的字符串
|
}
|
return ret;
|
}
|
else {
|
return value;
|
}
|
}
|
},
|
series: [
|
{
|
data: optionData,
|
type: 'bar',
|
label: {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
}
|
, itemStyle: {
|
// 设置柱形的颜色
|
normal: {
|
color: '#14b16a',
|
label: {
|
show: true // 在折线拐点上显示数据
|
}
|
},
|
}
|
}
|
]
|
};
|
mychart2.setOption(option);
|
}
|
|
//仪表盘 合格率 制成率
|
function get_Dashboard_2(mychart5) {
|
var hgl = 0;
|
var zcl = 0;
|
//制成率 合格率
|
$.ajax({
|
url: GetWEBURL() + "/loaddata/Dashboard",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "Get",
|
data: { "LineCode": "1" },
|
success: function (res) {
|
hgl = res.data[0][0]["合格率"].toFixed(2);
|
zcl = res.data[1][0]["制成率"].toFixed(2);
|
}
|
})
|
|
var option = {
|
series: [
|
{//左边仪表盘
|
// name: '业务指标',
|
type: 'gauge',
|
detail: {
|
formatter: '{value}%',
|
//offsetCenter: ['10', '70%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比
|
fontSize: 25, //文字的字体大小
|
offsetCenter: ['10%', '100%']
|
},
|
radius: "50%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
center: ["26%", "60%"],
|
startAngle: 235,
|
endAngle: 25,
|
clockWise: true,
|
min: 0,
|
max: 100,
|
splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。
|
axisTick: { // 刻度(线)样式。
|
show: true, // 是否显示刻度(线),默认 true。
|
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
length: 15, // 刻度线长。支持相对半径的百分比,默认 8。
|
lineStyle: { // 刻度线样式。
|
color: "auto", //线的颜色,默认 #eee。
|
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
width: 1, //线度,默认 1。
|
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
// shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
|
},
|
},
|
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
lineStyle: { // 仪表盘轴线样式。
|
color: [
|
[0.2, '#fc3333'],
|
[0.8, '#17cee3'],
|
[1, '#01e878']
|
], //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
// opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
width: 10, //轴线宽度,默认 30。
|
// shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
|
}
|
},
|
splitLine: { // 分隔线样式。
|
show: true, // 是否显示分隔线,默认 true。
|
length: 15, // 分隔线线长。支持相对半径的百分比,默认 30。
|
lineStyle: { // 分隔线样式。
|
color: "auto", //线的颜色,默认 #eee。
|
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
width: 2, //线度,默认 2。
|
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
// shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
|
}
|
},
|
title: {
|
fontSize: 20,
|
color: '#55bcd5',//标题颜色
|
offsetCenter: ['20%', '60%']//设置完成率位置
|
},
|
data: [{
|
value: zcl,
|
name: '制成率',
|
}],
|
|
},
|
{//右仪表盘
|
// name: '业务指标',
|
type: 'gauge',
|
detail: {
|
fontSize: 25, //文字的字体大小
|
formatter: '{value}%',
|
offsetCenter: ['10%', '110%']
|
},
|
radius: "55%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
|
center: ["67%", "55%"],
|
startAngle: 225,//仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
|
endAngle: -45,//仪表盘结束角度
|
clockWise: true,
|
min: 0,
|
max: 100,
|
splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。
|
axisTick: { // 刻度(线)样式。
|
show: true, // 是否显示刻度(线),默认 true。
|
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
|
length: 15, // 刻度线长。支持相对半径的百分比,默认 8。
|
lineStyle: { // 刻度线样式。
|
color: "auto", //线的颜色,默认 #eee。
|
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
width: 1, //线度,默认 1。
|
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
// shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
|
},
|
},
|
axisLine: { // 仪表盘轴线(轮廓线)相关配置。
|
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
|
lineStyle: { // 仪表盘轴线样式。
|
color: [
|
[0.2, '#fc3333'],
|
[0.8, '#17cee3'],
|
[1, '#01e878']
|
], //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
|
// opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
width: 10, //轴线宽度,默认 30。
|
// shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
|
}
|
},
|
splitLine: { // 分隔线样式。
|
show: true, // 是否显示分隔线,默认 true。
|
length: 15, // 分隔线线长。支持相对半径的百分比,默认 30。
|
lineStyle: { // 分隔线样式。
|
color: "auto", //线的颜色,默认 #eee。
|
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
|
width: 2, //线度,默认 2。
|
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
|
// shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
|
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
|
}
|
},
|
title: {
|
fontSize: 20,
|
color: '#55bcd5',//标题颜色
|
offsetCenter: ['0', '70%']//设置完成率位置
|
},
|
data: [{
|
value: hgl,
|
name: '合格率',
|
}]
|
}
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
mychart5.setOption(option);
|
}
|
|
</script>
|
</head>
|
<body class="box">
|
<div class="bj">
|
<div class="tr0">
|
<div class="col2-1">
|
<div class="col2-1-p">
|
<p>宁波科艺绿色皮草管理驾驶舱</p>
|
</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>
|
</div>
|
<div class="tr1">
|
<div class="tr1-k">
|
</div>
|
<div class="tr1-1">
|
<div class="tr1-1-k">
|
|
</div>
|
<div class="tr1-1-cen">
|
<div class="tr1-1-cenk">
|
</div>
|
<div class="tr1-1-cen-left">
|
<p id="jh">0</p>
|
</div>
|
<div class="tr1-1-cen-right">
|
<p id="wc">0</p>
|
</div>
|
</div>
|
<div class="tr1-1-cen-k">
|
|
</div>
|
<div class="tr1-1-btm">
|
<div class="tr1-1-btm-k">
|
</div>
|
<div class="tr1-1-btm-left">
|
<p id="zz">0</p>
|
</div>
|
<div class="tr1-1-btm-right">
|
<p id="dd">0</p>
|
</div>
|
</div>
|
</div>
|
<div class="tr1-2">
|
<div class="tr1-2-k">
|
|
</div>
|
<div class="tr1-2-cen">
|
<div class="tr1-2-cenk">
|
</div>
|
<div class="tr1-2-cen-left">
|
<p id="lrc">0</p>
|
</div>
|
<div class="tr1-2-cen-cen">
|
<p id="lhzyh">0</p>
|
</div>
|
<div class="tr1-2-cen-right">
|
<p id="lhzeh">0</p>
|
</div>
|
</div>
|
<div class="tr1-2-cen-k">
|
|
</div>
|
<div class="tr1-2-btm">
|
<div class="tr1-2-btm-k">
|
</div>
|
<div class="tr1-2-btm-left">
|
<p id="lhzsh">0</p>
|
</div>
|
<div class="tr1-2-btm-cen">
|
<p id="ltz">0</p>
|
</div>
|
<div class="tr1-2-btm-right">
|
<p id="lbpwf">0</p>
|
</div>
|
</div>
|
</div>
|
<div class="tr1-3" id="mychart2">
|
|
</div>
|
<div class="tr1-4" id="mychart1">
|
|
</div>
|
|
</div>
|
<div class="tr2">
|
<div class="tr2-k">
|
|
</div>
|
<div class="tr2-1">
|
<div class="tr2-1-k">
|
|
</div>
|
<div class="tr2-1-1">
|
<p>在制品:</p>
|
<p id="zzp1_1">0</p>
|
<p>产品数:</p>
|
<p id="cps_1">0</p>
|
</div>
|
<div class="tr2-1-1-k">
|
|
</div>
|
<div class="tr2-1-2">
|
<p>在制品:</p>
|
<p id="zzp1_2">0</p>
|
<p>产品数:</p>
|
<p id="cps_2">0</p>
|
</div>
|
<div class="tr2-1-2-k">
|
|
</div>
|
<div class="tr2-1-3">
|
<p>在制品:</p>
|
<p id="zzp1_3">0</p>
|
<p>产品数:</p>
|
<p id="cps_3">0</p>
|
</div>
|
<div class="tr2-1-3-k">
|
|
</div>
|
<div class="tr2-1-4">
|
<p>在制品:</p>
|
<p id="zzp1_4">0</p>
|
<p>产品数:</p>
|
<p id="cps_4">0</p>
|
</div>
|
</div>
|
<div class="tr2-k-1">
|
|
</div>
|
<div class="tr2-1">
|
<div class="tr2-1-k">
|
|
</div>
|
<div class="tr2-1-1">
|
<p>在制品:</p>
|
<p id="zzp1_5">0</p>
|
<p>产品数:</p>
|
<p id="cps_5">0</p>
|
</div>
|
<div class="tr2-1-1-k">
|
|
</div>
|
<div class="tr2-1-2">
|
<p>在制品:</p>
|
<p id="zzp1_6">0</p>
|
<p>产品数:</p>
|
<p id="cps_6">0</p>
|
</div>
|
<div class="tr2-1-2-k">
|
|
</div>
|
<div class="tr2-1-3">
|
<p>在制品:</p>
|
<p id="zzp1_7">0</p>
|
<p>产品数:</p>
|
<p id="cps_7">0</p>
|
</div>
|
<div class="tr2-1-3-k">
|
|
</div>
|
<div class="tr2-1-4">
|
<p>在制品:</p>
|
<p id="zzp1_8">0</p>
|
<p>产品数:</p>
|
<p id="cps_8">0</p>
|
</div>
|
</div>
|
<div class="tr2-k-1">
|
|
</div>
|
<div class="tr2-1">
|
<div class="tr2-1-k">
|
|
</div>
|
<div class="tr2-1-1">
|
<p>在制品:</p>
|
<p id="zzp1_9">0</p>
|
<p>产品数:</p>
|
<p id="cps_9">0</p>
|
</div>
|
<div class="tr2-1-1-k">
|
|
</div>
|
<div class="tr2-1-2">
|
<p>在制品:</p>
|
<p id="zzp1_10">0</p>
|
<p>产品数:</p>
|
<p id="cps_10">0</p>
|
</div>
|
<div class="tr2-1-2-k">
|
|
</div>
|
<div class="tr2-1-3">
|
<p>在制品:</p>
|
<p id="zzp1_11">0</p>
|
<p>产品数:</p>
|
<p id="cps_11">0</p>
|
</div>
|
<div class="tr2-1-3-k">
|
|
</div>
|
<div class="tr2-1-4">
|
<p>在制品:</p>
|
<p id="zzp1_12">0</p>
|
<p>产品数:</p>
|
<p id="cps_12">0</p>
|
</div>
|
</div>
|
</div>
|
<div class="tr3">
|
<div class="tr3-1" id="mychart5">
|
|
</div>
|
<div class="tr3-2">
|
<div class="tr3-2-k">
|
|
</div>
|
<div class="tr3-2-l-k">
|
</div>
|
<div class="tr3-2-l">
|
<p id="rc">0</p>
|
</div>
|
<div class="tr3-2-c">
|
<p id="hzyh">0</p>
|
</div>
|
<div class="tr3-2-r">
|
<p id="hzeh">0</p>
|
</div>
|
<div class="tr3-2-2-k">
|
|
</div>
|
<div class="tr3-2-l-k">
|
</div>
|
<div class="tr3-2-2">
|
<p id="hzsh">0</p>
|
</div>
|
<div class="tr3-2-3">
|
<p id="tz">0</p>
|
</div>
|
</div>
|
<div class="tr3-3" id="mychart3">
|
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
