666 lines
28 KiB
Plaintext
666 lines
28 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_HJGL.aspx.cs" Inherits="FineUIPro.Web.mainMenu_HJGL" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head id="Head1" runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>首页</title>
|
|
<link href="../res/indexv1/assets/css/sub_index.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div class="sd-sub-body sd-sub-body--welding dis-flex">
|
|
<div class="sub-sections">
|
|
<div class="sub-section sub-section-01">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">焊工现场统计</span>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div class="field-statistics">
|
|
<div class="field-statistics-item field-statistics-item--green">
|
|
<div class="field-statistics-bar">
|
|
<div class="field-statistics-bar-inner" style="height: 100%;"></div>
|
|
</div>
|
|
<div class="field-statistics-title">一次合格率</div>
|
|
<div class="field-statistics-value" runat="server" id="divPassRate">0%</div>
|
|
</div>
|
|
<div class="field-statistics-item field-statistics-item--blue">
|
|
<div class="field-statistics-bar">
|
|
<div class="field-statistics-bar-inner" style="height: 100%;"></div>
|
|
</div>
|
|
<div class="field-statistics-title">焊接总人数</div>
|
|
<div class="field-statistics-value" runat="server" id="divWelderNum">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section sub-section-02">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">项目焊接工程量统计</span>
|
|
<div class="sub-right-select">
|
|
<div class="sub-select-name">
|
|
<span class="sub-select-value">按达因量</span><span class="dropdown-arrow"></span>
|
|
</div>
|
|
<ul class="sub-select-ul">
|
|
<li class="sub-select-li active" data-type="1">按达因量</li>
|
|
<li class="sub-select-li" data-type="2">按焊口数</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts02" class="echarts-box" style="width: 80%; height: 80%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section sub-section-03">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">焊接缺陷分析</span>
|
|
<div class="sub-right-select">
|
|
<div class="sub-select-name">
|
|
<span class="sub-select-value">按分包商</span><span class="dropdown-arrow"></span>
|
|
</div>
|
|
<ul class="sub-select-ul">
|
|
<li class="sub-select-li active" data-type="1">按分包商</li>
|
|
<li class="sub-select-li active" data-type="2">按单位工程</li>
|
|
<li class="sub-select-li" data-type="3">按材质类别</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts03" class="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sub-sections flex-1">
|
|
<div class="sub-section sub-section-04">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">焊接一次合格率</span>
|
|
<ul class="sub-sections-tabs">
|
|
<li class="sub-section-item active" data-type="fbs">分包商</li>
|
|
<li class="sub-section-item" data-type="dwgc">单位工程</li>
|
|
<li class="sub-section-item" data-type="czlb">材质类别</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts04" class="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section sub-section-05">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">焊接进度分析</span>
|
|
<ul class="sub-sections-tabs">
|
|
<li class="sub-section-item active" data-type="fbs">分包商</li>
|
|
<li class="sub-section-item" data-type="dwgc">单位工程</li>
|
|
<li class="sub-section-item" data-type="czlb">材质类别</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts05" class="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
<div class="sub-section sub-section-06">
|
|
<div class="sub-section-header">
|
|
<span class="sub-section-title">焊工业绩分析</span>
|
|
<ul class="sub-sections-tabs">
|
|
<li class="sub-section-item active" data-type="fbs">分包商</li>
|
|
<li class="sub-section-item" data-type="dwgc">单位工程</li>
|
|
<li class="sub-section-item" data-type="czlb">材质类别</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sub-section-inner">
|
|
<div id="echarts06" class="echarts-box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../res/indexv1/assets/js/jquery-2.1.1.min.js" type="text/javascript"></script>
|
|
<script src="../res/indexv1/assets/js/echarts-5.2.0.min.js" type="text/javascript"></script>
|
|
<script src="../res/indexv1/assets/js/draw-circle.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$('.sub-section-02 ul li').click(function () {
|
|
var value = $(this).text()
|
|
var type = $(this).attr('data-type')
|
|
$(this).parent('ul').siblings('.sub-select-name').find('.sub-select-value').text(value)
|
|
if (type == '1') {
|
|
initEchart02({ canvasId: 'echarts02', y: <%=Dy1 %>, n: <%=Dy2 %> })
|
|
} else if (type == '2') {
|
|
initEchart02({ canvasId: 'echarts02', y: <%=HK1 %>, n: <%=HK2 %> })
|
|
}
|
|
})
|
|
$('.sub-section-03 ul li').click(function () {
|
|
var value = $(this).text()
|
|
var type = $(this).attr('data-type')
|
|
$(this).parent('ul').siblings('.sub-select-name').find('.sub-select-value').text(value)
|
|
var indicator = [
|
|
{ text: '问题1', max: 150, },
|
|
{ text: '问题6', max: 150, },
|
|
{ text: '问题5', max: 150, },
|
|
{ text: '问题4', max: 150, },
|
|
{ text: '问题3', max: 150, },
|
|
{ text: '问题2', max: 150, }
|
|
]
|
|
if (type == '1') {
|
|
initEchart03({ name: '按分包商', value: [130, 93, 50, 90, 70, 21], indicator: indicator })
|
|
} else if (type == '2') {
|
|
initEchart03({ name: '按单位工程', value: [120, 83, 60, 90, 80, 13], indicator: indicator })
|
|
} else if (type == '3') {
|
|
initEchart03({ name: '按材质类别', value: [50, 150, 70, 160, 75, 5], indicator: indicator })
|
|
}
|
|
})
|
|
$('.sub-section-04 ul li').click(function () {
|
|
var type = $(this).attr('data-type')
|
|
$(this).addClass('active').siblings().removeClass('active')
|
|
if (type == 'fbs') {
|
|
var data = [40, 90, 83, 95, 80, 40, 90, 83, 95, 80, 40]
|
|
initEchart04(data)
|
|
} else if (type == 'dwgc') {
|
|
var data = [80, 90, 83, 55, 80, 40, 20, 83, 95, 80, 60]
|
|
initEchart04(data)
|
|
} else if (type == 'czlb') {
|
|
var data = [120, 30, 83, 95, 80, 40, 10, 83, 95, 80, 20]
|
|
initEchart04(data)
|
|
}
|
|
})
|
|
$('.sub-section-05 ul li').click(function () {
|
|
var type = $(this).attr('data-type')
|
|
$(this).addClass('active').siblings().removeClass('active')
|
|
if (type == 'fbs') {
|
|
var data = [100, 50, 100, 100, 100, 100, 100, 50, 100, 100, 100];
|
|
initEchart05(data)
|
|
} else if (type == 'dwgc') {
|
|
var data = [20, 50, 100, 100, 100, 45, 100, 50, 100, 100, 34];
|
|
initEchart05(data)
|
|
} else if (type == 'czlb') {
|
|
var data = [40, 50, 100, 100, 34, 100, 100, 50, 100, 100, 45];
|
|
initEchart05(data)
|
|
}
|
|
})
|
|
$('.sub-section-06 ul li').click(function () {
|
|
var type = $(this).attr('data-type')
|
|
$(this).addClass('active').siblings().removeClass('active')
|
|
if (type == 'fbs') {
|
|
var data = [40, 90, 83, 95, 80, 40, 90, 83, 95, 80, 40]
|
|
initEchart06(data)
|
|
} else if (type == 'dwgc') {
|
|
var data = [80, 90, 83, 95, 80, 20, 90, 83, 95, 80, 20]
|
|
initEchart06(data)
|
|
} else if (type == 'czlb') {
|
|
var data = [120, 90, 83, 95, 10, 40, 90, 83, 95, 80, 30]
|
|
initEchart06(data)
|
|
}
|
|
})
|
|
|
|
function initEchart02(options) {
|
|
var chartDom = document.getElementById(options.canvasId);
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var data = [
|
|
{
|
|
name: '未完成', value: options.n, label: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 10,
|
|
color: '#f24166',
|
|
align: 'center',
|
|
},
|
|
percent: {
|
|
fontSize: 10,
|
|
color: '#f24166',
|
|
align: 'center',
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '已完成', value: options.y, label: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 10,
|
|
color: '#15edbb',
|
|
align: 'center',
|
|
},
|
|
percent: {
|
|
fontSize: 10,
|
|
color: '#15edbb',
|
|
align: 'center',
|
|
}
|
|
}
|
|
}
|
|
},
|
|
];
|
|
|
|
option = {
|
|
color: ['#f24166', '#15edbb'],
|
|
grid: {
|
|
top: '10%',
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '2%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b} : {d}%'
|
|
},
|
|
series: [{
|
|
name: '质量控制点统计',
|
|
type: 'pie',
|
|
radius: ['45%', '70%'],
|
|
top: '5%',
|
|
left: 'center',
|
|
width: '95%',
|
|
height: '95%',
|
|
label: {
|
|
alignTo: 'edge',
|
|
formatter: '{name|{b}}\n{percent|{d}%}',
|
|
minMargin: 5,
|
|
edgeDistance: 10,
|
|
lineHeight: 15,
|
|
},
|
|
labelLine: {
|
|
length: 10,
|
|
length2: 0,
|
|
maxSurfaceAngle: 80
|
|
},
|
|
data: data
|
|
}]
|
|
};
|
|
myChart.clear();//清空
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function initEchart03(options) {
|
|
var chartDom = document.getElementById('echarts03');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
confine: true,
|
|
},
|
|
color: ['#3372b3'],
|
|
radar: [
|
|
{
|
|
indicator: options.indicator,
|
|
splitNumber: 4,
|
|
center: ['50%', '50%'],
|
|
radius: '60', // 解决文案被遮挡的情况
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#3372b3'
|
|
}
|
|
},
|
|
splitArea: {
|
|
areaStyle: {
|
|
color: ['transparent'],
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#3372b3'
|
|
}
|
|
},
|
|
axisName: {
|
|
color: '#fff',
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'radar',
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
data: [
|
|
{
|
|
name: options.name,
|
|
value: options.value,
|
|
symbol: 'none',
|
|
lineStyle: {
|
|
show: false,
|
|
},
|
|
areaStyle: {
|
|
// type: 'default',
|
|
opacity: 1,
|
|
color: new echarts.graphic.RadialGradient(0.5, 1, 1, [
|
|
{
|
|
color: '#004ffe',
|
|
offset: 0
|
|
},
|
|
{
|
|
color: '#00ebff',
|
|
offset: 1
|
|
}
|
|
])
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();//清空
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function initEchart04(data) {
|
|
var chartDom = document.getElementById('echarts04');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var xAxisData = ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6', '类型7', '类型8', '类型9', '类型10', '类型11']
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: '{c}',
|
|
},
|
|
grid: {
|
|
top: '10%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
data: xAxisData,
|
|
axisLabel: {
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0D3C65',
|
|
},
|
|
},
|
|
splitNumber: 5,
|
|
},
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
color: '#4cffc3',
|
|
symbol: 'circle',
|
|
symbolSize: 10,//拐点大小
|
|
smooth: false,
|
|
data: data,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#17eebd',
|
|
borderWidth: 5,
|
|
borderColor: 'rgba(23,238,189,0.4)', //拐点边框颜色
|
|
}
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: '#1d5552' // 100% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#173446' // 0% 处的颜色
|
|
}],
|
|
global: false
|
|
}
|
|
},
|
|
},
|
|
],
|
|
}
|
|
myChart.clear();//清空
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function initEchart05(data) {
|
|
var chartDom = document.getElementById('echarts05');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
var xAxisData = ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6', '类型7', '类型8', '类型9', '类型10', '类型11'];
|
|
option = {
|
|
color: ['#4989fb'],
|
|
grid: {
|
|
top: '10%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '2%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showDelay: 0,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
boundaryGap: true,
|
|
axisLabel: {
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
onZero: true,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0d3760 ',
|
|
},
|
|
},
|
|
splitNumber: 5,
|
|
},
|
|
series: [
|
|
{
|
|
name: '焊接进度分析',
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
data: data,
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
},
|
|
normal: {
|
|
barBorderRadius: [10, 10, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 1, 1, 0,
|
|
[
|
|
{ offset: 0, color: '#4989fb' },
|
|
{ offset: 1, color: '#18fbfd' }
|
|
]
|
|
)
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
myChart.clear();//清空
|
|
option && myChart.setOption(option);
|
|
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
|
|
}
|
|
|
|
function initEchart06(data) {
|
|
var chartDom = document.getElementById('echarts06');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
var xAxisData = ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6', '类型7', '类型8', '类型9', '类型10', '类型11']
|
|
option = {
|
|
color: ['#499ab6'],
|
|
grid: {
|
|
top: '10%',
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: '{c}',
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
data: xAxisData,
|
|
axisLabel: {
|
|
color: '#1ab1ff',
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
onZero: false,
|
|
lineStyle: {
|
|
color: '#1ab1ff',
|
|
width: 1,
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#0D3C65',
|
|
},
|
|
},
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '焊工业绩分析',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 0
|
|
},
|
|
showSymbol: false,
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
offset: 0,
|
|
color: '#6072aa',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#499ab6'
|
|
}
|
|
])
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: data
|
|
},
|
|
]
|
|
};
|
|
myChart.clear();//清空
|
|
option && myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
initEchart02({ canvasId: 'echarts02', y: <%=Dy1 %>, n: <%=Dy2 %> })
|
|
// 03的数值
|
|
var indicator = [
|
|
{ text: '问题1', max: 150, },
|
|
{ text: '问题6', max: 150, },
|
|
{ text: '问题5', max: 150, },
|
|
{ text: '问题4', max: 150, },
|
|
{ text: '问题3', max: 150, },
|
|
{ text: '问题2', max: 150, }
|
|
]
|
|
initEchart03({ name: '按分包商', value: [130, 93, 50, 90, 70, 60], indicator: indicator })
|
|
var data = [40, 90, 83, 95, 80, 40, 90, 83, 95, 80, 40]
|
|
initEchart04(data)
|
|
var data = [100, 50, 100, 100, 100, 100, 100, 50, 100, 100, 100];
|
|
initEchart05(data)
|
|
var data = [40, 90, 83, 95, 80, 40, 90, 83, 95, 80, 40]
|
|
initEchart06(data)
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|