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.
643 lines
22 KiB
643 lines
22 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>生产监控看板</title>
|
|
<script type="text/javascript" src="~/Content/Cust011/js/jquery.js"></script>
|
|
<link rel="stylesheet" href="~/Content/Cust011/css/comon0.css?ss=7" />
|
|
<script type="text/javascript" src="~/Content/Cust011/js/echarts.min.js"></script>
|
|
@*<script language="JavaScript" src="~/Content/Cust011/js/js.js?ss=4"></script>*@
|
|
<style>
|
|
.logoclass {
|
|
height:1rem;
|
|
}
|
|
.TopNamelogo {
|
|
position:absolute;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
@*<div class="loading">
|
|
<div class="loadbox"><img src="~/Content/Cust011/images/loading.gif" /> 页面加载中...</div>
|
|
</div>*@
|
|
<div class="head">
|
|
|
|
<img class="TopNamelogo logoclass" src="~/Content/img/logo.png" border="0" />
|
|
|
|
<h1><a href="">生产监控看板</a></h1>
|
|
<div class="time" id="showTime">2019/12/05 16:16:54</div>
|
|
|
|
</div>
|
|
<div class="mainbox">
|
|
<ul class="clearfix" style="height: calc(35%)">
|
|
<li>
|
|
|
|
<div class="boxall" style="height: calc(100% - 0.15rem)">
|
|
<div class="alltitle">工单产出统计</div>
|
|
<div class="boxnav" id="echarts1"></div>
|
|
</div>
|
|
|
|
</li>
|
|
<li>
|
|
<div class="boxall" style="height: calc(100% - 0.15rem)">
|
|
|
|
<div class="alltitle">
|
|
<p>在制统计</p>
|
|
</div>
|
|
<div class="boxnav yqlist" style="height: calc(100% - 0.05rem)">
|
|
<ul>
|
|
<li class="LineStringSet">
|
|
<div class="yq" id="yq">170</div>
|
|
<span>在制数</span>
|
|
</li>
|
|
<li class="LineStringSet">
|
|
<div class="yq">139</div>
|
|
<span>入库数</span>
|
|
</li>
|
|
<li class="LineStringSet">
|
|
<div class="yq">141</div>
|
|
<span>合格数</span>
|
|
</li>
|
|
<li class="LineStringSet">
|
|
<div class="yq">3</div>
|
|
<span>不良数</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
<li >
|
|
<div class="boxall" style="height: calc(100% - 0.15rem)">
|
|
<div class="alltitle">不良品分析</div>
|
|
<div class="boxnav" id="echarts5"></div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<ul class="clearfix" style="height: calc(35% )">
|
|
|
|
<li style="width: calc(50%)">
|
|
|
|
<div class="boxall" style="height: calc(100% - 0.15rem)">
|
|
<div class="alltitle">不良品分布</div>
|
|
<div class="boxnav"
|
|
id="echarts6"
|
|
style="height: calc(100% - 0.3rem)"></div>
|
|
</div>
|
|
<li style="width: calc(50%)">
|
|
|
|
<div class="boxall" style="height: calc(100% - 0.15rem )">
|
|
<div class="alltitle">人员任务</div>
|
|
<div class="boxnav" id="">
|
|
<table border="0" cellspacing="0">
|
|
<tr>
|
|
<th></th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
</tr>
|
|
<tr>
|
|
<th>字段</th>
|
|
<td>8098</td>
|
|
<td>19.80%</td>
|
|
<td>22</td>
|
|
<td>368</td>
|
|
</tr>
|
|
<tr>
|
|
<th>字段</th>
|
|
<td>7506</td>
|
|
<td>6.70%</td>
|
|
<td>22</td>
|
|
<td>339</td>
|
|
</tr>
|
|
<tr>
|
|
<th>字段</th>
|
|
<td>3261</td>
|
|
<td>32.30%</td>
|
|
<td>10</td>
|
|
<td>325.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>字段</th>
|
|
<td>1993</td>
|
|
<td>201%</td>
|
|
<td>10</td>
|
|
<td>199</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
<ul class="clearfix" style="height: calc(30% )">
|
|
|
|
<li style="width: calc(100%)">
|
|
|
|
<div class="boxall" style="height: calc(100% - 0.15rem )">
|
|
<div class="alltitle">工单进度执行跟踪</div>
|
|
<div class="boxnav" id="">
|
|
<table border="0" cellspacing="0">
|
|
<tr>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
</tr>
|
|
<tr>
|
|
<td>8098</td>
|
|
<td>19.80%</td>
|
|
<td>22</td>
|
|
<td>8098</td>
|
|
<td>19.80%</td>
|
|
<td>22</td>
|
|
<td>368</td>
|
|
</tr>
|
|
<tr>
|
|
<td>7506</td>
|
|
<td>6.70%</td>
|
|
<td>22</td>
|
|
<td>7506</td>
|
|
<td>6.70%</td>
|
|
<td>22</td>
|
|
<td>339</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3261</td>
|
|
<td>32.30%</td>
|
|
<td>10</td>
|
|
<td>3261</td>
|
|
<td>32.30%</td>
|
|
<td>10</td>
|
|
<td>325.7</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1993</td>
|
|
<td>201%</td>
|
|
<td>10</td>
|
|
<td>1993</td>
|
|
<td>201%</td>
|
|
<td>10</td>
|
|
<td>199</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<script>
|
|
|
|
$(document).ready(function () {
|
|
var whei = $(window).width()
|
|
$("html").css({ fontSize: whei / 20 })
|
|
$(window).resize(function () {
|
|
var whei = $(window).width()
|
|
$("html").css({ fontSize: whei / 20 })
|
|
});
|
|
});
|
|
var DataF = 300;// 300;//单位秒 //刷新数据时间
|
|
|
|
$(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;
|
|
//填充到组件中
|
|
$("#showTime").text(theDateStr);
|
|
// setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
|
|
window.setTimeout(getTime, 1000);
|
|
}
|
|
function GetDataZong() {
|
|
echarts_1();
|
|
echarts_6();
|
|
echarts_5();
|
|
// GetZhiXing_MO("marqueeCustCH1", "30");
|
|
|
|
// SetIfGo("marqueeCust1", "marqueeCustCH1", "marqueelist1");//判断是否需要滚动
|
|
// GetOtherData();
|
|
// echart2_2();
|
|
// echart2_3();
|
|
|
|
}
|
|
|
|
|
|
function echarts_1() {
|
|
var myChart = echarts.init(document.getElementById('echarts1'));
|
|
|
|
var ComInQty = new Array();//工单入库数量
|
|
var MoQty = new Array();//工单用量
|
|
var MonthData = new Array();
|
|
|
|
//测试
|
|
MonthData = ["1月", "2月", "3月"];
|
|
ComInQty = ["200", "100", "140"];
|
|
MoQty = ["4", "2", "7"];
|
|
//$.ajax({
|
|
// url: "/SRM/WatchPanel/GetWipZ?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++) {
|
|
|
|
// MonthData.push(data[i].月份);
|
|
// ComInQty.push(data[i].工单入库数量);
|
|
// MoQty.push(data[i].工单用量);
|
|
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
//});
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
}, "grid": {
|
|
"top": "20%",
|
|
"right": "50",
|
|
"bottom": "20",
|
|
"left": "30",
|
|
},
|
|
legend: {
|
|
data: [ '工单入库数量', '工单数量' ],
|
|
right: 'center', width: '100%',
|
|
textStyle: {
|
|
color: "#fff"
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
},
|
|
|
|
|
|
|
|
"xAxis": [
|
|
{
|
|
"type": "category",
|
|
data: MonthData,
|
|
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
|
|
axisLabel: {
|
|
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
|
},
|
|
|
|
},
|
|
],
|
|
"yAxis": [
|
|
{
|
|
"type": "value",
|
|
"name": "工单入库数量",
|
|
axisTick: { show: false },
|
|
splitLine: {
|
|
show: false,
|
|
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
fontSize: 14,
|
|
color: "rgba(255,255,255,.6)"
|
|
|
|
},
|
|
axisLine: {
|
|
min: 0,
|
|
max: 10,
|
|
lineStyle: { color: 'rgba(255,255,255,.1)' }
|
|
},//左线色
|
|
|
|
},
|
|
{
|
|
"type": "value",
|
|
"name": "工单数量",
|
|
"show": true,
|
|
"axisLabel": {
|
|
"show": true,
|
|
fontSize: 14,
|
|
formatter: "{value} ",
|
|
color: "rgba(255,255,255,.6)"
|
|
},
|
|
axisTick: { show: false },
|
|
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
|
|
splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
|
|
},
|
|
],
|
|
"series": [
|
|
|
|
{
|
|
"name": "工单入库数量",
|
|
"type": "bar",
|
|
"data": ComInQty,
|
|
"barWidth": "15%",
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: 15,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#8bd46e'
|
|
}, {
|
|
offset: 1,
|
|
color: '#09bcb7'
|
|
}]),
|
|
}
|
|
},
|
|
"barGap": "0.2"
|
|
},
|
|
//{
|
|
// "name": "工单数量",
|
|
// "type": "bar",
|
|
// "data": MoQty,
|
|
// "barWidth": "15%",
|
|
// "itemStyle": {
|
|
// "normal": {
|
|
// barBorderRadius: 15,
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
// offset: 0,
|
|
// color: '#248ff7'
|
|
// }, {
|
|
// offset: 1,
|
|
// color: '#6851f1'
|
|
// }]),
|
|
// }
|
|
// },
|
|
// "barGap": "0.2"
|
|
//},
|
|
|
|
{
|
|
"name": "工单数量",
|
|
"type": "line",
|
|
smooth: true,
|
|
"yAxisIndex": 1,
|
|
"data": MoQty,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2
|
|
},
|
|
},
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": '#6851f1'//'#248ff7' //"#86d370",
|
|
|
|
}
|
|
},
|
|
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function echarts_6() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echarts6'));
|
|
|
|
|
|
option = {
|
|
title: {
|
|
text: '5132',
|
|
subtext: '总体',
|
|
x: 'center',
|
|
y: '40%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 22,
|
|
lineHeight: 10,
|
|
},
|
|
subtextStyle: {
|
|
color: '#90979c',
|
|
fontSize: 16,
|
|
lineHeight: 10,
|
|
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{b} : {c} ({d}%)"
|
|
},
|
|
|
|
visualMap: {
|
|
show: false,
|
|
min: 500,
|
|
max: 600,
|
|
inRange: {
|
|
//colorLightness: [0, 1]
|
|
}
|
|
},
|
|
series: [{
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
center: ['50%', '50%'],
|
|
color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
data: [{
|
|
"value": 1924,
|
|
"name": "字段名称1"
|
|
}, {
|
|
"value": 1055,
|
|
"name": "字段名称2"
|
|
}, {
|
|
"value": 1532,
|
|
"name": "字段名称3"
|
|
}
|
|
].sort(function (a, b) {
|
|
return a.value - b.value
|
|
}),
|
|
roseType: 'radius',
|
|
|
|
label: {
|
|
normal: {
|
|
formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
|
|
rich: {
|
|
c: {
|
|
color: 'rgb(241,246,104)',
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
lineHeight: 5
|
|
},
|
|
b: {
|
|
color: 'rgb(98,137,169)',
|
|
fontSize: 14,
|
|
height: 44
|
|
},
|
|
},
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: 'rgb(98,137,169)',
|
|
},
|
|
smooth: 0.2,
|
|
length: 10,
|
|
length2: 20,
|
|
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function echarts_5() {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echarts5'));
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
}, "grid": {
|
|
"top": "15%",
|
|
"right": "10%",
|
|
"bottom": "20",
|
|
"left": "10%",
|
|
},
|
|
legend: {
|
|
data: ['字段1', '字段2'],
|
|
right: 'center',
|
|
top: 0,
|
|
textStyle: {
|
|
color: "#fff"
|
|
},
|
|
itemWidth: 12,
|
|
itemHeight: 10,
|
|
},
|
|
"xAxis": [
|
|
{
|
|
"type": "category",
|
|
|
|
data: ['2016', '2017', '2018', '2019'],
|
|
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
|
|
axisLabel: {
|
|
textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
|
|
},
|
|
|
|
},
|
|
],
|
|
"yAxis": [
|
|
{
|
|
"type": "value",
|
|
"name": "单位1",
|
|
splitLine: { show: false },
|
|
axisTick: { show: false },
|
|
"axisLabel": {
|
|
"show": true,
|
|
color: "rgba(255,255,255,.6)"
|
|
|
|
},
|
|
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
|
|
|
|
},
|
|
{
|
|
"type": "value",
|
|
"name": "单位2",
|
|
"show": true,
|
|
axisTick: { show: false },
|
|
"axisLabel": {
|
|
"show": true,
|
|
formatter: "{value} %",
|
|
color: "rgba(255,255,255,.6)"
|
|
},
|
|
axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
|
|
splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
|
|
},
|
|
],
|
|
"series": [
|
|
|
|
{
|
|
"name": "字段1",
|
|
"type": "bar",
|
|
"data": [
|
|
18453.35, 20572.22, 24274.22, 30500.00
|
|
],
|
|
"barWidth": "20%",
|
|
|
|
"itemStyle": {
|
|
"normal": {
|
|
barBorderRadius: 15,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#fccb05'
|
|
}, {
|
|
offset: 1,
|
|
color: '#f5804d'
|
|
}]),
|
|
}
|
|
},
|
|
"barGap": "0"
|
|
},
|
|
{
|
|
"name": "字段2",
|
|
"type": "line",
|
|
"yAxisIndex": 1,
|
|
|
|
"data": [0, 11.48, 18.00, 25.65],
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2
|
|
},
|
|
},
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#ff3300",
|
|
|
|
}
|
|
},
|
|
"smooth": true
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|