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.
1260 lines
50 KiB
1260 lines
50 KiB
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--更多资源： -->
|
|
<meta charset="utf-8" />
|
|
<meta name="description" content="" />
|
|
<meta name="keywords" content="" />
|
|
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<title>执行看板</title>
|
|
<!--大屏-->
|
|
<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" />
|
|
<link rel="stylesheet" href="~/Content/Cust069/fonts/icomoon.css">
|
|
<script src="~/Content/js/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
|
|
@*<script src="~/Content/Cust003/js/jquery-1.11.0.min.js" type="text/javascript"></script>*@
|
|
<script src="~/Content/Cust003/js/jquery.numscroll.js"
|
|
type="text/javascript"
|
|
charset="utf-8"></script>
|
|
<script src="~/Content/js/echarts/echarts5.3.3.js"></script>
|
|
|
|
|
|
|
|
<script src="~/Content/js/echarts4.8/echarts-liquidfill.js"></script>
|
|
<style>
|
|
h3 {
|
|
color: #FFFFFF;
|
|
text-shadow: #05d1fc 0px 1px 3px, #05d1fc 1px 0px 3px,#05d1fc 0px -1px 3px, #05d1fc -1px 0px 3px;
|
|
filter: glow(color=#00FFCC,strength=3);
|
|
}
|
|
|
|
.rightMain_top {
|
|
width: 100%;
|
|
padding-bottom: 0.1rem;
|
|
}
|
|
|
|
.animationNone {
|
|
animation: none !important;
|
|
}
|
|
|
|
.CustDiv1 ul li:nth-child(1), .CustDiv1 div div ul li:nth-child(1) {
|
|
width: 5% !important;
|
|
}
|
|
|
|
.CustDiv1 ul li:nth-child(2), .CustDiv1 div div ul li:nth-child(2) {
|
|
/* width: 28% !important; */
|
|
}
|
|
|
|
.CustDiv1 ul li:nth-child(3), .CustDiv1 div div ul li:nth-child(3) {
|
|
width: 11% !important;
|
|
}
|
|
|
|
.CustDiv1 ul li:nth-child(4), .CustDiv1 div div ul li:nth-child(4) {
|
|
width: 11% !important;
|
|
}
|
|
|
|
.CustDiv1 ul li:nth-child(5), .CustDiv1 div div ul li:nth-child(5) {
|
|
width: 19% !important;
|
|
}
|
|
|
|
.CustDiv1 ul li:nth-child(6), .CustDiv1 div div ul li:nth-child(6) {
|
|
width: 11% !important;
|
|
}
|
|
|
|
|
|
|
|
.CustDiv4 ul li:nth-child(1), .CustDiv4 div div ul li:nth-child(1) {
|
|
width: 5% !important;
|
|
}
|
|
|
|
.CustDiv4 ul li:nth-child(2), .CustDiv4 div div ul li:nth-child(2) {
|
|
width: 18% !important;
|
|
}
|
|
|
|
.CustDiv4 ul li:nth-child(3), .CustDiv4 div div ul li:nth-child(3) {
|
|
width: 26% !important;
|
|
}
|
|
|
|
.CustDiv4 ul li:nth-child(4), .CustDiv4 div div ul li:nth-child(4) {
|
|
width: 11% !important;
|
|
}
|
|
|
|
.CustDiv4 ul li:nth-child(5), .CustDiv4 div div ul li:nth-child(5) {
|
|
width: 11% !important;
|
|
}
|
|
|
|
.CustDiv4 ul li:nth-child(6), .CustDiv4 div div ul li:nth-child(6) {
|
|
width: 18% !important;
|
|
}
|
|
|
|
.CustDiv4 ul li:nth-child(7), .CustDiv4 div div ul li:nth-child(7) {
|
|
width: 11% !important;
|
|
}
|
|
|
|
|
|
.CustDiv2 ul li:nth-child(1), .CustDiv2 div div ul li:nth-child(1) {
|
|
width: 22% !important;
|
|
}
|
|
|
|
.CustDiv2 ul li:nth-child(2), .CustDiv2 div div ul li:nth-child(2) {
|
|
width: 15% !important;
|
|
}
|
|
|
|
.CustDiv2 ul li:nth-child(3), .CustDiv2 div div ul li:nth-child(3) {
|
|
width: 15% !important;
|
|
}
|
|
|
|
.CustDiv2 ul li:nth-child(4), .CustDiv2 div div ul li:nth-child(4) {
|
|
width: 15% !important;
|
|
}
|
|
|
|
.CustDiv2 ul li:nth-child(5), .CustDiv2 div div ul li:nth-child(5) {
|
|
width: 15% !important;
|
|
}
|
|
|
|
.CustDiv2 ul li:nth-child(6), .CustDiv2 div div ul li:nth-child(6) {
|
|
width: 8% !important;
|
|
}
|
|
|
|
.CustDiv2 ul li:nth-child(7), .CustDiv2 div div ul li:nth-child(7) {
|
|
width: 10% !important;
|
|
}
|
|
|
|
.leftMain_top, .leftMain_bottom {
|
|
height: calc(46.5%);
|
|
}
|
|
|
|
.leftMain_topIn, .leftMain_bottomIn, .leftMain_topIn ul:nth-child(1),
|
|
.leftMain_bottomIn ul:nth-child(1), .rightMain_bottom, .rightMain_bottomIn {
|
|
height: 100%;
|
|
}
|
|
|
|
img {
|
|
height: 0.2rem;
|
|
width: 0.5rem;
|
|
padding-top: 0.05rem;
|
|
}
|
|
|
|
.bg {
|
|
padding-top: 0.01rem;
|
|
}
|
|
|
|
.title {
|
|
height: 8%;
|
|
text-shadow: #01db78 0px 2px 3px, #01db78 1px 0px 3px, #05d1fc 0px -2px 3px, #05d1fc -1px 0px 3px;
|
|
}
|
|
|
|
|
|
.TopName {
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
|
|
.TopNameTime {
|
|
vertical-align: middle;
|
|
text-align: right;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
/*td {
|
|
box-sizing:inherit;
|
|
}*/
|
|
.rightMain_bottomIn .biaoge_list ul li {
|
|
overflow: hidden;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
#div1 {
|
|
display: flex;
|
|
}
|
|
|
|
#div1-C1 {
|
|
font-size: 18px;
|
|
margin-left: 115px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
#div1-C1 div {
|
|
margin-top: 20px;
|
|
color: white;
|
|
text-align: center;
|
|
width: 130px;
|
|
}
|
|
|
|
#div1-C2 {
|
|
font-size: 18px;
|
|
margin-left: 15px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
#div1-C2 div {
|
|
margin-top: 23px;
|
|
width: 200px;
|
|
height: 20px;
|
|
background-color: #0000CD;
|
|
text-align: center;
|
|
}
|
|
|
|
#div1-C3 {
|
|
font-size: 18px;
|
|
margin-left: 15px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
#div1-C3 div {
|
|
margin-top: 20px;
|
|
color: white;
|
|
/*border-left:solid 1px #AFEEEE;
|
|
border-right:solid 1px #AFEEEE;
|
|
border-radius:25px;*/
|
|
text-align: center;
|
|
width: 30px;
|
|
}
|
|
|
|
#div3 {
|
|
display: flex;
|
|
color: white;
|
|
}
|
|
|
|
#div3-C1 {
|
|
width: 50%;
|
|
}
|
|
|
|
#div3-C2 {
|
|
width: 50%;
|
|
}
|
|
|
|
#div3-C1-C1 {
|
|
text-align: center;
|
|
width: 100%;
|
|
font-size: 25px;
|
|
background-color: #6495ED;
|
|
}
|
|
|
|
#div3-C1-C2 {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
}
|
|
|
|
#div3-C1-C2-div1 {
|
|
width: 25px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#div3-C1-C2-div2 {
|
|
width: 25px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#div3-C2-C1 {
|
|
text-align: center;
|
|
width: 97%;
|
|
font-size: 25px;
|
|
background-color: #6495ED;
|
|
}
|
|
|
|
#div3-C2-C2 {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
}
|
|
|
|
#div3-C2-C2-div1 {
|
|
width: 25px;
|
|
}
|
|
|
|
#div3-C2-C2-div2 {
|
|
width: 20px;
|
|
}
|
|
|
|
#div3-C1-C2 span {
|
|
margin-left: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
#div3-C2-C2 span {
|
|
margin-left: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
#div1-C2 {
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
document.documentElement.style.fontSize =
|
|
(document.documentElement.clientWidth / 768) * 100 + 'px'
|
|
</script>
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class="bg">
|
|
<table class="title">
|
|
<tr>
|
|
<td style="width:20%">
|
|
<div class="TopNamelogo" id="TopNamelogo">
|
|
<img src="~/Content/img/zhenxiang.png" border="0" class="logoclass" />
|
|
@*<img src="~/Content/img/wechat.jpg" border="0" class="logoclass" />*@
|
|
</div>
|
|
</td>
|
|
|
|
<td style="width:60%">
|
|
<div class="TopName" id="TopName">生产进度看板</div>
|
|
</td>
|
|
<td style="width:20%">
|
|
<div class="TopNameTime" id="TopNameTime"></div>
|
|
</td>
|
|
|
|
</tr>
|
|
</table>
|
|
@*<div class="title">执行看板</div>*@
|
|
|
|
|
|
<div class="leftMain_top">
|
|
<div class="leftMain_topIn">
|
|
<ul>
|
|
<li class="LineLi" style="width:50%">
|
|
<div class="rightMain_bottom">
|
|
<div class="rightMain_bottomIn">
|
|
<div class="biaoge biaoge_list"
|
|
style="width: 100%; ">
|
|
<div class="biaoge_listIn CustDiv1">
|
|
<div id="div1">
|
|
<div id="div1-C1">
|
|
<div>月度生产指标</div>
|
|
<div>月度发车指标</div>
|
|
<div>上月实际生产</div>
|
|
<div>上月实际发车</div>
|
|
</div>
|
|
<div id="div1-C2">
|
|
<div id="mothPlan"></div>
|
|
<div id="motnSales"></div>
|
|
<div id="lastMothPlan"></div>
|
|
<div id="lastMothSales"></div>
|
|
</div>
|
|
<div id="div1-C3">
|
|
<div>台</div>
|
|
<div>台</div>
|
|
<div>台</div>
|
|
<div>台</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@*</div>*@
|
|
</li>
|
|
<li class="LineLi" style="width:50%">
|
|
<div class="rightMain_bottom">
|
|
<div class="rightMain_bottomIn">
|
|
@*<h3> 插件车间生产加工数据</h3>*@
|
|
<div class="biaoge biaoge_list" id="marqueelist2"
|
|
style="width: 100%; ">
|
|
<div class="biaoge_listIn CustDiv1">
|
|
<ul class="ul_title">
|
|
<li>序号</li>
|
|
<li>生产编号</li>
|
|
<li>产品名称</li>
|
|
<li>用户单位</li>
|
|
<li>客户交货期</li>
|
|
<li>生产状态</li>
|
|
<li>进度</li>
|
|
</ul>
|
|
<div class="ul_list" id="marqueeCust2">
|
|
<div class="ul_listIn ul_listInCust" id="marqueeCustCH2">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="border_bg_leftTop"></span>
|
|
<span class="border_bg_rightTop"></span>
|
|
<span class="border_bg_leftBottom"></span>
|
|
<span class="border_bg_rightBottom"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
@*<li class="LineLi">
|
|
|
|
<div class="rightMain_bottom">
|
|
<div class="rightMain_bottomIn">
|
|
<h3> 组装车间生产加工数据</h3>
|
|
<div class="biaoge biaoge_list" id="marqueelist3"
|
|
style="width: 100%; ">
|
|
<div class="biaoge_listIn CustDiv1">
|
|
<ul class="ul_title">
|
|
<li>生产订单</li>
|
|
<li>产品名称</li>
|
|
<li>计划量</li>
|
|
<li>完成量</li>
|
|
<li>计划完工日期</li>
|
|
<li>生产进度</li>
|
|
</ul>
|
|
<div class="ul_list" id="marqueeCust3">
|
|
<div class="ul_listIn" id="marqueeCustCH3">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="border_bg_leftTop"></span>
|
|
<span class="border_bg_rightTop"></span>
|
|
<span class="border_bg_leftBottom"></span>
|
|
<span class="border_bg_rightBottom"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</li>*@
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="leftMain_bottom">
|
|
<div class="leftMain_bottomIn">
|
|
<ul>
|
|
<li class="LineLi">
|
|
|
|
<div class="rightMain_bottom">
|
|
<div class="rightMain_bottomIn">
|
|
@*<h3> IPQC检验合格率</h3>*@
|
|
<div id="echart1_1" style="width:calc(100% );height:calc(100% - 0.1rem)">
|
|
<div id="div3">
|
|
<div id="div3-C1">
|
|
<div id="div3-C1-C1">
|
|
|
|
|
|
</div>
|
|
<div id="div3-C1-C2">
|
|
<span>完成数量</span>
|
|
<span id="div3-C1-C2-div1"></span>
|
|
<span>计划完成数量</span>
|
|
<span id="div3-C1-C2-div2"></span>
|
|
</div>
|
|
<div id="div3pie" style="width:600px;height:200px">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div id="div3-C2">
|
|
<div id="div3-C2-C1">
|
|
|
|
</div>
|
|
<div id="div3-C2-C2">
|
|
<span>完成数量</span>
|
|
<span id="div3-C2-C2-div1"></span>
|
|
<span>计划完成数量</span>
|
|
<span id="div3-C2-C2-div2"></span>
|
|
</div>
|
|
<div id="div3-C2-C3">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="border_bg_leftTop"></span>
|
|
<span class="border_bg_rightTop"></span>
|
|
<span class="border_bg_leftBottom"></span>
|
|
<span class="border_bg_rightBottom"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="LineLi">
|
|
|
|
<div class="rightMain_bottom">
|
|
<div class="rightMain_bottomIn">
|
|
<h3 style=" text-align: center;
|
|
width: 97%;
|
|
font-size:25px;
|
|
background-color:#6495ED;">
|
|
月完工车辆统计
|
|
</h3>
|
|
<div class="biaoge biaoge_list" id="div4"
|
|
style="width: 100%; ">
|
|
@*<div class="biaoge_listIn CustDiv2">
|
|
<div class="ul_list" id="RCVUNINView">
|
|
<div class="ul_listIn" id="RCVUNIN">
|
|
</div>
|
|
</div>
|
|
</div>*@
|
|
|
|
|
|
|
|
</div>
|
|
<span class="border_bg_leftTop"></span>
|
|
<span class="border_bg_rightTop"></span>
|
|
<span class="border_bg_leftBottom"></span>
|
|
<span class="border_bg_rightBottom"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
@*</div>*@
|
|
|
|
<div style="clear: both"></div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var DataF = 30;// 300;//单位秒 //刷新数据时间
|
|
var _BarWidth = "25%";
|
|
var _barBorderRadius_M = 2;
|
|
var myChart4 = echarts.init(document.getElementById('div4'));
|
|
var myChartArea3 = echarts.init(document.getElementById('div3pie'));
|
|
GetArea3();
|
|
|
|
$(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;
|
|
//填充到组件中
|
|
$("#TopNameTime").text(theDateStr);
|
|
// setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
|
|
window.setTimeout(getTime, 1000);
|
|
}
|
|
function GetDataZong() {
|
|
//echart1_1();
|
|
GetArea1();
|
|
GetArea2('marqueeCustCH2', 1);
|
|
|
|
GetArea4();
|
|
//GetZhiXing_MO("marqueeCustCH1", "30");
|
|
//GetZhiXing_MO("marqueeCustCH2", "60");
|
|
//GetZhiXing_MO("marqueeCustCH3", "90");
|
|
//GetZhiXing_RCVUnInWare();
|
|
// SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动
|
|
// SetIfGo("marqueeCust2", "marqueeCustCH2", "marqueelist2");//判断是否需要滚动
|
|
// SetIfGo("marqueeCust3", "marqueeCustCH3", "marqueelist3");//判断是否需要滚动
|
|
//SetIfGo("RCVUNINView", "RCVUNIN", "marqueelist4");//判断是否需要滚动
|
|
|
|
|
|
}
|
|
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
//function echart1_1() {
|
|
// // 基于准备好的dom，初始化echarts实例
|
|
// var myChart = echarts.init(document.getElementById('echart1_1'));
|
|
|
|
// var MonthArray = new Array();
|
|
// var MonthPercent = new Array();
|
|
// var MonthPercent_BZ = new Array();
|
|
|
|
// $.ajax({
|
|
// url: "/SRM/WatchPanel/GetZhiXing_OQC?XX=XX&" + Math.random(),
|
|
// dataType: "json",
|
|
// async: false,
|
|
// success: function (data) {
|
|
// if (data != false && data != null && data.length > 0) {
|
|
// for (var i = 0; i < data.length; i++) {
|
|
// MonthArray.push(data[i].月份);
|
|
// MonthPercent.push(data[i].PercentNum);
|
|
// MonthPercent_BZ.push(99.5);
|
|
// }
|
|
|
|
// //MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
|
|
// var colors = ['#9c90e7', '#4ff494', '#f2c290', '#FFD700', '#f3aaf5', '#fcfb68']
|
|
// var colors2 = ['#6A5ACD', '#3D9140', '#ED9121', '#DAA569', '#A066D3', '#E3CF57'];
|
|
// option = {
|
|
// color: colors,
|
|
// tooltip: {
|
|
// trigger: 'axis',
|
|
// axisPointer: { type: 'shadow' },
|
|
// formatter: function (params) {
|
|
// var showHtm = "";
|
|
// showHtm = params[0].name + "月:" + '<br>' +
|
|
// params[0].seriesName + ':' + params[0].data + "%" + '<br>' +
|
|
// params[2].seriesName + ':' + params[2].data + "%";
|
|
|
|
// return showHtm;
|
|
// }
|
|
// },
|
|
// grid: {
|
|
// "top": "15",
|
|
// "right": "20",
|
|
// "bottom": "20",
|
|
// "left": "40",
|
|
|
|
// },
|
|
// legend: {
|
|
// show: false,
|
|
// },
|
|
|
|
|
|
|
|
// "xAxis": [
|
|
// {
|
|
|
|
// data: MonthArray,
|
|
// axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.9)", } },
|
|
// axisTick: { show: true, },
|
|
// axisLabel: {
|
|
// textStyle: {
|
|
// show: true,
|
|
// //fontSize: 9,
|
|
// color: "rgba(255,255,255,.9)",
|
|
// },
|
|
// },
|
|
|
|
// },
|
|
// ],
|
|
// "yAxis": [
|
|
// {
|
|
// max: 100,
|
|
// "type": "value",
|
|
// axisTick: {
|
|
// show: true,
|
|
// lineStyle: {
|
|
// show: true,
|
|
// color: "rgba(255,255,255,.9)",
|
|
// },
|
|
// },
|
|
// splitLine: { show: false, },
|
|
// axisLine: {
|
|
// show: true,
|
|
// lineStyle: {
|
|
// show: true,
|
|
// //fontSize: 9,
|
|
// color: "rgba(255,255,255,.9)",
|
|
// },
|
|
// },
|
|
// axisLabel: {
|
|
// show: true,
|
|
// color: "rgba(255,255,255,.9)"
|
|
|
|
// },
|
|
// axisLine: {
|
|
// show: true,
|
|
// lineStyle: {
|
|
// show: true,
|
|
// color: "rgba(255,255,255,.9)",
|
|
// },
|
|
// },
|
|
|
|
// }
|
|
// ],
|
|
// "series": [
|
|
// {
|
|
// "name": "合格率",
|
|
// "type": "bar",
|
|
// "data": MonthPercent,
|
|
// barWidth: _BarWidth,
|
|
// "itemStyle": {
|
|
// "normal": {
|
|
// barBorderRadius: _barBorderRadius_M,
|
|
// //color: function (params)
|
|
// //{
|
|
// // return colors[params.dataIndex];
|
|
// //},
|
|
// color: function (params) {
|
|
// return new echarts.graphic.LinearGradient(
|
|
// 0,
|
|
// 0,
|
|
// 0,
|
|
// 1,
|
|
// [
|
|
// { offset: 0, color: colors[params.dataIndex] },
|
|
|
|
// { offset: 1, color: colors2[params.dataIndex] }
|
|
// ]
|
|
// )
|
|
// },
|
|
// barBorderRadius: [3, 3, 3, 3],
|
|
|
|
|
|
// }
|
|
// },
|
|
// animation: false,
|
|
// barGap: '-100%',
|
|
// barCategoryGap: '40%',
|
|
// label: {
|
|
// show: true,
|
|
// formatter: '{c}%',
|
|
// },
|
|
|
|
|
|
// }
|
|
// ,
|
|
// {
|
|
// "name": "合格率",
|
|
// "type": "line",
|
|
// "data": MonthPercent,
|
|
// barWidth: _BarWidth,
|
|
// "itemStyle": {
|
|
// "normal": {
|
|
// color: "#96aef1",
|
|
|
|
// }
|
|
// },
|
|
// label: {
|
|
// show: false,
|
|
// //position: 'outside',
|
|
// formatter: '{c}%',
|
|
// },
|
|
|
|
// }
|
|
// ,
|
|
// {
|
|
// "name": "标准值",
|
|
// "type": "line",
|
|
// "data": MonthPercent_BZ,
|
|
|
|
// "itemStyle": {
|
|
// "normal": {
|
|
|
|
|
|
// }
|
|
// },
|
|
// label: {
|
|
// show: false,
|
|
// //position: 'outside',
|
|
// formatter: '{c}%',
|
|
// }
|
|
|
|
// },
|
|
|
|
// ]
|
|
// };
|
|
|
|
// myChart.setOption(option);
|
|
// }
|
|
// else {
|
|
// return null;
|
|
// }
|
|
// },
|
|
// error: function (aa) {
|
|
// return null;
|
|
// }
|
|
// });
|
|
|
|
|
|
|
|
//}
|
|
//区域一
|
|
|
|
function GetArea1() {
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetAreal1",
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if (data != false && data != null) {
|
|
//月度生产 月度发车 上月实际生产 月度实际发车 上月完成数量 上上月完成数量
|
|
$("#mothPlan").html(data[0].月度生产);
|
|
$("#motnSales").html(data[0].月度发车);
|
|
$("#lastMothSales").html(data[0].上月度发车);
|
|
} else {
|
|
$("#" + marqueeID).html("");
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
|
|
}
|
|
});
|
|
}
|
|
function GetArea3() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
|
|
//var MonthArray = new Array();
|
|
//var MonthPercent = new Array();
|
|
//var MonthPercent_BZ = new Array();
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetOutput?XX=XX&" + Math.random(),
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
console.log(data);
|
|
if (data != false && data != null && data.length > 0) {
|
|
var value = 0;
|
|
var value1 = 0;
|
|
var value2 = 0;
|
|
var value3 = 0;
|
|
var value4 = 0;
|
|
var value5 = 0;
|
|
var value6 = 0;
|
|
var value7 = 0;
|
|
for (var i = 0; i < data.length; i++) {
|
|
value = data[i].上月度生产;
|
|
value1 = data[i].上月完成;
|
|
value2 = data[i].前月度生产;
|
|
value3 = data[i].前月完成;
|
|
value4 = data[i].上月比;
|
|
value5 = data[i].前月比;
|
|
value6 = data[0].前月;
|
|
value7 = data[0].上月;
|
|
}
|
|
$("#div3-C1-C1").html(value7 + "月完成率");
|
|
$("#div3-C2-C1").html(value6 + "月完成率");
|
|
$("#div3-C1-C2-div1").html(value3);
|
|
$("#lastMothPlan").html(value3);
|
|
$("#div3-C1-C2-div2").html(value2);
|
|
$("#div3-C2-C2-div1").html(value1);
|
|
$("#div3-C2-C2-div2").html(value);
|
|
//MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
|
|
|
|
var data = [value5, value5, value5];
|
|
var option3 = {
|
|
|
|
title: [
|
|
{
|
|
text: value7 + '月完成率',
|
|
x: '22%',
|
|
y: '90%',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontWeight: '100',
|
|
color: '#5dc3ea',
|
|
lineHeight: 16,
|
|
textAlign: 'center',
|
|
},
|
|
},
|
|
{
|
|
text: value6 + '月完成率',
|
|
x: '76%',
|
|
y: '90%',
|
|
textStyle: {
|
|
fontSize: 14,
|
|
fontWeight: '100',
|
|
color: '#5dc3ea',
|
|
lineHeight: 16,
|
|
textAlign: 'center',
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: 'liquidFill',
|
|
radius: '85%',
|
|
center: ['30%', '48%'],
|
|
color: [
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#446bf5',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#0000FF',
|
|
},
|
|
],
|
|
globalCoord: false,
|
|
},
|
|
],
|
|
data: [value5, value5, value5], // data个数代表波浪数
|
|
backgroundStyle: {
|
|
borderWidth: 1,
|
|
color: 'RGBA(51, 66, 127, 0.7)',
|
|
},
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
},
|
|
outline: {
|
|
// show: false
|
|
borderDistance: 0,
|
|
itemStyle: {
|
|
borderWidth: 6,
|
|
borderColor: '#0000FF',
|
|
},
|
|
},
|
|
},
|
|
|
|
|
|
{ //第二个球的填充
|
|
type: 'liquidFill',
|
|
radius: '85%',
|
|
center: ['84%', '45%'],
|
|
color: [
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#2aa1e3',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#08bbc9',
|
|
},
|
|
],
|
|
globalCoord: false,
|
|
},
|
|
],
|
|
data: [value4, value4, value4], // data个数代表波浪数
|
|
backgroundStyle: {
|
|
borderWidth: 1,
|
|
color: 'RGBA(51, 66, 127, 0.7)',
|
|
},
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
fontSize: 28,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
},
|
|
outline: {
|
|
// show: false
|
|
borderDistance: 0,
|
|
itemStyle: {
|
|
borderWidth: 6,
|
|
borderColor: '#08bbc9',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
myChartArea3.setOption(option3);
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
}
|
|
//function GetArea3() {
|
|
// // 基于准备好的dom，初始化echarts实例
|
|
|
|
|
|
|
|
// //var MonthArray = new Array();
|
|
// //var MonthPercent = new Array();
|
|
// //var MonthPercent_BZ = new Array();
|
|
|
|
// $.ajax({
|
|
// url: "/SRM/WatchPanel/GetOutput?XX=XX&" + Math.random(),
|
|
// dataType: "json",
|
|
// async: false,
|
|
// success: function (data) {
|
|
// if (data != false && data != null && data.length > 0) {
|
|
// var value = 0;
|
|
// var value1 = 0;
|
|
// var value2 = 0;
|
|
// var value3 = 0;
|
|
// var value4 = 0;
|
|
// var value5 = 0;
|
|
// for (var i = 0; i < data.length; i++) {
|
|
// value = data[i].生产1;
|
|
// value1 = data[i].计划1;
|
|
// value2 = data[i].生产2;
|
|
// value3 = data[i].计划2;
|
|
// value4 = data[i].月份1;
|
|
// value5 = data[i].月份2;
|
|
// };
|
|
// let option3 = {
|
|
// series: [
|
|
// {
|
|
// name: value4+'月计划量',
|
|
// type:'pie',
|
|
// data: [
|
|
// { value: value, name: '完成率' },
|
|
// { value: value1, name: '计划完成率' }
|
|
// ],
|
|
// label: {
|
|
// formatter: '1023010'
|
|
// },
|
|
// emphasis: {
|
|
// label: {
|
|
// show: true,
|
|
// fontSize: '20',
|
|
// fontWeight: 'bold'
|
|
// }
|
|
// }
|
|
// }
|
|
// ]
|
|
// };
|
|
// myChartArea3.setOption(option3);
|
|
// }
|
|
// else {
|
|
// return null;
|
|
// }
|
|
// },
|
|
// error: function (aa) {
|
|
// return null;
|
|
// }
|
|
// });
|
|
//}
|
|
|
|
//区域四
|
|
function GetArea4() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var MonthArray = new Array();
|
|
var MonthNum = new Array();
|
|
var MonthPercent_BZ = new Array();
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/monthOutput?XX=XX&" + Math.random(),
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if (data != false && data != null && data.length > 0) {
|
|
console.log(data);
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
//console.log(i);
|
|
MonthArray.push(data[i].Mont);
|
|
MonthNum.push(data[i].num);
|
|
}
|
|
//console.log(MonthArray);
|
|
//MonthPercent = [80, 75.23, 98, 40, 60,53];//测试
|
|
|
|
|
|
let option4 = {
|
|
|
|
xAxis: {
|
|
type: 'category',
|
|
name: '日期',
|
|
namelocation: 'end',
|
|
nameTextStyle: {
|
|
color: "rgba(28, 231, 224, 1)"
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(28, 231, 224, 1)" // 设置X轴颜色为红色
|
|
}
|
|
},
|
|
data: MonthArray
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '完成量',
|
|
namelocation: 'top',
|
|
nameTextStyle: {
|
|
color: "rgba(28, 231, 224, 1)"
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(28, 231, 224, 1)" // 设置X轴颜色为红色
|
|
}
|
|
},
|
|
max: 20
|
|
},
|
|
series: [{
|
|
data: MonthNum,
|
|
type: 'line',
|
|
lineStyle: {
|
|
color: 'skyblue',
|
|
width: 3 // 设置线条宽度为2
|
|
},
|
|
areaStyle: {
|
|
color: 'rgba(240, 240, 240, 0.3)' // 设置曲线下部区域为30%透明度的白灰色
|
|
},
|
|
markPoint: {
|
|
data: [
|
|
{ type: 'max', name: '最大值' },
|
|
{ type: 'min', name: '最小值' }
|
|
]
|
|
},
|
|
itemStyle: {
|
|
color: 'skyblue'
|
|
},
|
|
animation: true // 开启动画效果
|
|
}]
|
|
};
|
|
|
|
|
|
myChart4.setOption(option4);
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function GetZhiXing_MO(marqueeID, ItemNumber) {
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetZhiXing_MO?ItemNumber=" + ItemNumber + "&" + 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"> ';
|
|
if (ItemNumber == "30")
|
|
html += ' <li >' + data[i].AB面 + '</li> ';
|
|
html += ' <li >' + data[i].生产订单 + '</li> <li >' + data[i].产品名称 + '</li>';
|
|
html += ' <li >' + data[i].计划数量 + '</li> <li >' + data[i].完成数量 + '</li>';
|
|
html += ' <li >' + data[i].计划完工日期 + '</li> <li >' + data[i].生产进度 + '</li> </ul> ';
|
|
|
|
}
|
|
html += "</ul>";
|
|
$("#" + marqueeID).html(html);
|
|
} else {
|
|
$("#" + marqueeID).html("");
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
|
|
}
|
|
});
|
|
}
|
|
function GetArea2(marqueeID, ItemNumber) {
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetProductProgress?ItemNumber=" + ItemNumber + "&" + Math.random(),
|
|
dataType: "json",
|
|
async: false,
|
|
success: function (data) {
|
|
if (data != false && data != null) {
|
|
var html = "";
|
|
for (var i = 0; i < data.length; i++) {
|
|
html += '<ul class="ul_con">';
|
|
html += '<li>' + data[i].序号 + '</li>';
|
|
html += '<li>' + data[i].销售车辆号 + '</li><li>' + data[i].产品名称 + '</li><li>' + data[i].用户单位 + '</li>';
|
|
html += '<li>' + data[i].客户交货期 + '</li><li>' + data[i].生产状态 + '</li>';
|
|
html += '<li>' + data[i].进度 + '</li></ul>';
|
|
}
|
|
$(".ul_listInCust").css("animation-duration", data.length * 1.3 + "s");
|
|
$("#" + marqueeID).html(html);
|
|
|
|
// Set background color of odd-indexed ul elements to black
|
|
$("#" + marqueeID + " ul:nth-child(odd)").css("background-color", "rgba(0, 1, 0, 0.1)");
|
|
} else {
|
|
$("#" + marqueeID).html("");
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
// Handle error
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function GetZhiXing_RCVUnInWare() {
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetZhiXing_RCVUnInWare?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].LOTNO + '</li> <li >' +
|
|
data[i].送货单号 + '</li>';
|
|
html += ' <li >' + data[i].采购订单号 + '</li> <li >' + data[i].物料编码 + '</li>';
|
|
html += ' <li >' + data[i].物料名称 + '</li> <li >' + data[i].数量 + '</li> ';
|
|
html += ' <li >' + data[i].检验人 + '</li> </ul> ';
|
|
|
|
}
|
|
html += "</ul>";
|
|
$("#RCVUNIN").html(html);
|
|
}
|
|
else {
|
|
$("#RCVUNIN").html("");
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|