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.
760 lines
26 KiB
760 lines
26 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.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,.leftMain_bottom ul li {
|
|
width: 100%;
|
|
|
|
}
|
|
.leftWZ ul {
|
|
height: 50%;
|
|
|
|
}
|
|
.titleCust {
|
|
background-color:#bbcec830;
|
|
}
|
|
|
|
.animationNone {
|
|
animation: none !important;
|
|
}
|
|
|
|
.leftWZ ul li {
|
|
width:calc(25% ) !important;
|
|
color:white;
|
|
float:left;
|
|
vertical-align: bottom;
|
|
text-align: center;
|
|
height:100%;
|
|
}
|
|
|
|
|
|
.leftMain_top, .leftMain_bottom {
|
|
height: calc( 46% );
|
|
}
|
|
|
|
.leftMain_topIn, .leftMain_bottomIn, .leftMain_topInUL,
|
|
.rightMain_bottom, .rightMain_bottomIn,.leftMain_bottom ul {
|
|
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: 20px;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
|
|
.rightMain_bottomIn .biaoge_list ul li {
|
|
overflow: hidden;
|
|
padding-right: 0px;
|
|
}
|
|
.rightMain_bottomIn .biaoge {
|
|
height: calc(100% );
|
|
}
|
|
.zantingCla li {
|
|
color:yellow !important;
|
|
}
|
|
.allnav {
|
|
/*height: calc(100% - 0.01rem);*/
|
|
height: 100%;
|
|
width:100%;
|
|
position:relative;
|
|
}
|
|
|
|
|
|
</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" />
|
|
</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="leftMain_top">
|
|
<div class="leftMain_topIn">
|
|
<ul class="leftMain_topInUL">
|
|
<li class="LineLi" style="width:72%">
|
|
|
|
<div class="rightMain_bottom">
|
|
<div class="leftWZ" style="height:calc( 18% )">
|
|
|
|
<ul>
|
|
<li class="titleCust">待检车辆</li>
|
|
<li class="titleCust">已检车辆</li>
|
|
<li class="titleCust">待整改车辆</li>
|
|
<li class="titleCust">已整改车辆</li>
|
|
</ul>
|
|
<ul id="ttt2">
|
|
<li>0台</li>
|
|
<li>0台</li>
|
|
<li>0台</li>
|
|
<li>0台</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rightMain_bottomIn" style="height:calc( 82% )">
|
|
<div class="biaoge biaoge_list" id="marqueelist1"
|
|
style="width: 100%; ">
|
|
<div class="allnav" id="echart2_2"></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>
|
|
@*</div>*@
|
|
</li>
|
|
<li class="LineLi" style="width:28%">
|
|
|
|
<div class="rightMain_bottom">
|
|
<div class="rightMain_bottomIn">
|
|
<div class="biaoge biaoge_list" id="marqueelist1"
|
|
style="width: 100%; ">
|
|
<div class="allnav" id="echart33">
|
|
</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> SMT车间生产加工数据</h3>*@
|
|
<div class="biaoge biaoge_list"
|
|
style="width: 100%; ">
|
|
<div class="biaoge_listIn CustDiv4">
|
|
<ul class="ul_title">
|
|
<li>销售车号</li>
|
|
<li>部件</li>
|
|
<li>人员</li>
|
|
<li>项目</li>
|
|
<li>时间</li>
|
|
<li>类型</li>
|
|
<li>结果</li>
|
|
|
|
</ul>
|
|
<div class="ul_list" id="marqueeCust1">
|
|
<div class="ul_listIn ul_listInCust" id="marqueeCustCH1">
|
|
|
|
</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 style="clear: both"></div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var DataF = 300;// 300;//单位秒 //刷新数据时间
|
|
var _BarWidth = "25%";
|
|
var _barBorderRadius_M = 2;
|
|
var myChart = echarts.init(document.getElementById('echart2_2'));
|
|
var myChartArea3 = echarts.init(document.getElementById('echart33'));
|
|
$(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() {
|
|
|
|
|
|
GetZhiXing_MO("marqueeCustCH1", "30");
|
|
|
|
// SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动
|
|
GetOtherData();
|
|
echart2_2();
|
|
echart2_3();
|
|
|
|
}
|
|
|
|
function SetIfGo(DivID, DivCHID,listID)
|
|
{
|
|
var ListDIV = $("#" + listID)[0].clientHeight;
|
|
var H_marqueediv = $("#" + DivCHID)[0];
|
|
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 GetZhiXing_MO(marqueeID, ItemNumber) {
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetCKData?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>";
|
|
|
|
html += ' <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> <li >' + data[i].结果 + '</li> </ul> ';
|
|
|
|
}
|
|
$(".ul_listInCust").css("animation-duration", data.length * 1.3 + "s");
|
|
$("#" + marqueeID).html(html);
|
|
}
|
|
else {
|
|
$("#" + marqueeID).html("");
|
|
}
|
|
},
|
|
error: function (aa) {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
function GetOtherData()
|
|
{
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetOtherData?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++) {
|
|
|
|
$("#ttt2").html ( "<li>" + data[i].待检车辆 + "台</li> <li>" + data[i].已检车辆 +
|
|
"台</li> <li>" + data[i].待整改 + "台</li> <li>" + data[i].已整改 + "台</li>");
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function echart2_2() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var colors = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76'];
|
|
var colors2 = ['#4992ff40', '#7cffb230', '#fddd609e', '#ff6e7678'];
|
|
|
|
var MonArray = new Array();//月份["2023-01","2023-02","2023-03","2023-04"]
|
|
|
|
var ZongArray = new Array();//Qty [89,90,60,90]
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetCKOKRate?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++) {
|
|
MonArray.push(data[i].月份);
|
|
ZongArray.push(data[i].Qty);
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
formatter: function (params) {
|
|
var showHtm = "";
|
|
showHtm = params[0].name + "月:" + '<br>' +
|
|
params[0].seriesName + ':' + params[0].data + '%' ;
|
|
|
|
return showHtm;
|
|
}
|
|
},
|
|
grid: {
|
|
"top": "35",
|
|
"right": "5",
|
|
"bottom": "20",
|
|
"left": "30",
|
|
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
title: {
|
|
text: '一次性验收合格率',
|
|
textStyle: {
|
|
fontSize: 15,
|
|
color: "rgba(250, 249, 249, 1)",
|
|
},
|
|
},
|
|
|
|
|
|
"xAxis": [
|
|
{
|
|
"type": "category",
|
|
data: MonArray,
|
|
axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.5)", } },
|
|
axisTick: { show: false, },
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 9,
|
|
color: "rgba(255,255,255,.8)",
|
|
},
|
|
},
|
|
|
|
},
|
|
],
|
|
"yAxis": [
|
|
{
|
|
|
|
"type": "value",
|
|
axisTick: { show: false },
|
|
splitLine: { show: false, },
|
|
|
|
"axisLabel": {
|
|
"show": true,
|
|
fontSize: 9,
|
|
color: "rgba(255,255,255,.8)"
|
|
|
|
},
|
|
axisLine: { show: true, lineStyle: { color: "rgba(255,255,255,.5)", } },
|
|
|
|
},
|
|
|
|
],
|
|
"series": [
|
|
|
|
{
|
|
"name": "一次检验合格率",
|
|
"type": "line",
|
|
"data": ZongArray,
|
|
areaStyle: {},
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: _barBorderRadius_M,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#8bd46e'
|
|
}, {
|
|
offset: 1,
|
|
color: '#09bcb7'
|
|
}]),
|
|
}
|
|
},
|
|
"barGap": "0.2",
|
|
stack: 'SunShi',
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
}
|
|
|
|
function echart2_3() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
|
var colors = ['#7cffb220', '#7cffb2', '#04040445', '#ff6e76'];
|
|
|
|
|
|
|
|
var ZongArray = 0;//[89, 90, 60, 90]//new Array();//工作总时间
|
|
|
|
|
|
$.ajax({
|
|
url: "/SRM/WatchPanel/GetCKOKRateALL?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++) {
|
|
ZongArray=data[i].Qty;
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//ZongArray = 0.7;
|
|
var options = {
|
|
|
|
title: {
|
|
text: '质量控制指标',
|
|
textStyle: {
|
|
fontSize: 15,
|
|
color: "rgba(250, 249, 249, 1)",
|
|
},
|
|
}
|
|
,
|
|
|
|
series: [
|
|
{
|
|
type: 'liquidFill',
|
|
radius: '85%',
|
|
color: [
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: colors[1],
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colors[0],
|
|
},
|
|
],
|
|
globalCoord: false,
|
|
},
|
|
],
|
|
data: [ZongArray, ZongArray-0.1, ZongArray], // data个数代表波浪数
|
|
backgroundStyle: {
|
|
borderWidth: 1,
|
|
color: colors[2],
|
|
},
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
fontSize: 26,
|
|
color: '#fff',
|
|
},
|
|
},
|
|
},
|
|
outline: {
|
|
// show: false
|
|
borderDistance: 0,
|
|
itemStyle: {
|
|
borderWidth: 6,
|
|
borderColor: colors[1],
|
|
},
|
|
},
|
|
}
|
|
],
|
|
};
|
|
|
|
myChartArea3.setOption(options);
|
|
|
|
}
|
|
|
|
|
|
|
|
function GetArea3() {
|
|
|
|
var value = 0.4;
|
|
var value1 = 0.6;
|
|
var value2 = 0.3;
|
|
var value3 = 0.4;
|
|
var value4 = 0.5;
|
|
var value5 = 0.4;
|
|
var value6 = 0.4;
|
|
var value7 = 0.5;
|
|
|
|
$("#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);
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|