ChengDa_English/SGGL/FineUIPro.Web/common/mainMenu_HJGL.aspx

808 lines
26 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ 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/index/css/reset.css" rel="stylesheet" />
<link href="../res/index/css/home.css" rel="stylesheet" />
<link href="../res/index/css/swiper-3.4.2.min.css" rel="stylesheet" />
<style type="text/css">
* {
box-sizing: border-box;
}
.pd{
padding: 20px;
}
.pd10{
padding: 10px !important;
}
.wrap{
height:100%;
padding:15px;
}
.bw-item-content{
padding: 0;
}
.bottom-wrap{
padding:0;
margin-bottom:0;
}
.bottom-wrap:last-child{
margin-bottom:0;
}
.top {
display: flex;
display: -webkit-flex;
overflow: hidden;
width: 100%;
}
.bw-b-bottom{
width:100%;
height:100%;
}
.bw-b-bottom-up {
border-radius:0;
height: 100%;
margin:0;
box-shadow: none;
}
.tab-wrap {
left: auto;
right: 15px;
top: 8px;
}
.tab-wrap .tab{
border-radius:0 !important;
border: none!important;
box-shadow: none !important;
}
.tab-wrap .tab .active {
color: rgba(0,162,233, 1);
background-color: transparent !important;
}
.tab-wrap .tab .t-item {
width: auto;
font-size: 10px;
padding: 2px;
}
.itemlr{
margin: 0 5px 5px 0;
}
.mgb{
margin-bottom: 5px;
}
.flex4 {
-webkit-flex: 4;
/* Chrome */
-ms-flex: 4; /* IE 10 */
flex: 4;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/*-webkit-box-flex: 3; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 4;
/* OLD - Firefox 19- */
}
.flex6 {
-webkit-flex: 6;
/* Chrome */
-ms-flex: 6; /* IE 10 */
flex: 6;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/*-webkit-box-flex: 3; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 6;
/* OLD - Firefox 19- */
}
.flex9 {
-webkit-flex: 9;
/* Chrome */
-ms-flex: 9; /* IE 10 */
flex: 9;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
/*-webkit-box-flex: 3; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 9;
/* OLD - Firefox 19- */
}
.info-wrap{
width:100%;
height:100%;
padding:5px 10px;
}
.info-wrap .info-item{
align-items:center;
margin:0 20px;
}
.info-wrap .info-item .title {
margin-bottom:5px;
font-size:14px;
}
.info-wrap .info-item .item {
width:100%;
height:100%;
background-color:#267AA4;
border-radius:15px;
align-items:center;
justify-content:space-around;
}
.info-wrap .info-item .item .i-num{
color:#F48A5C;
font-size:28px;
}
.info-wrap .info-item .item .i-num-c{
color:#C1DF8E;
}
</style>
</head>
<body>
<div class="wrap flex">
<div class="bottom-wrap flex1">
<div class="top flexV">
<div class="item flex4 itemlr">
<div class="bw-b-bottom">
<div class="bw-b-bottom-up">
<div class="info-wrap flex">
<div class="info-item flex flexV flex1">
<div class="title">一次合格率</div>
<div class="item flex1 flex flexV">
<div class="specialNum i-num"><%=PassRate %></div>
<div style="font-size:10px">单位:%</div>
</div>
</div>
<div class="info-item flex flexV flex1">
<div class="title">焊工总人数</div>
<div class="item flex1 flex flexV">
<div class="specialNum i-num i-num-c"><%=WelderNum %></div>
<div style="font-size:10px">单位:人</div>
</div>
</div>
</div>
<%--<div class="bw-item-content flex">
<div class="flex1 pd" >
<div id='one' style="width: 100%; height: 100%;"></div>
</div>
<div class="flex1 pd" >
<div id='one1' style="width: 100%; height: 100%;"></div>
</div>
</div>--%>
</div>
</div>
</div>
<div class="item flex6 itemlr">
<div class="bw-b-bottom">
<div class="bw-b-bottom-up">
<div class="tab-wrap" style="right:5px;">
<div class="tab" data-value="6">
<div class="t-item active">按达因量</div>
<%-- <div class="t-item ">按焊口数</div>--%>
</div>
</div>
<div class="bw-item-content">
<div id='two' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="item flex9 itemlr">
<div class="bw-b-bottom">
<div class="bw-b-bottom-up">
<div class="tab-wrap" style="right:5px;">
<%--<div class="tab" data-value="5">
<div class="t-item active">按分包商</div>
<div class="t-item ">按单位工程</div>
<div class="t-item">按材质类别</div>
</div>--%>
</div>
<div class="bw-item-content">
<div id='five' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-wrap flex3">
<div class="top flexV">
<div class="item flex1 mgb">
<div class="bw-b-bottom">
<div class="bw-b-bottom-up">
<div class="tab-wrap">
<div class="tab" data-value="4">
<%-- <div class="t-item active">按单位工程</div>--%>
<div class="t-item active">按分包商</div>
</div>
</div>
<div class="bw-item-content pd10">
<div id='four' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="item flex1 mgb">
<div class="bw-b-bottom">
<div class="bw-b-bottom-up">
<div class="tab-wrap">
<div class="tab" data-value="3">
<div class="t-item active">按单位工程</div>
<%-- <div class="t-item ">按分包商</div>--%>
</div>
</div>
<div class="bw-item-content pd10">
<div id='three' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="item flex1 mgb">
<div class="bw-b-bottom">
<div class="bw-b-bottom-up">
<div class="bw-item-content pd10">
<div id='one' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../res/index/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../res/index/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="../res/index/js/echarts.min.js"></script>
<script type="text/javascript">
function category_One(id, dataNum, title, detail) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
//tooltip: {
// formatter: '{a} <br/>{b} : {c}%'
//},
title: {
left:'center',
text: title,
textStyle: {
color: '#278AC8',
fontSize: 14,
fontWeight:'300'
},
show: true
},
series: [
{
name: ' ',
center: ["50%", "65%"],
type: 'gauge',
radius: "100%",
pointer: {
show: true,
length: '70%',
width : 3
},
axisTick : { //刻度线样式(及短线样式)
length : 0
},
splitLine: {
length: 10,
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLine: {
lineStyle: {
width : 10//表盘宽度
}
},
min: 0,
max: 100,
detail: {
show: true,
formatter: detail
},
data: [{
value: dataNum,
name: ''
}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true)
}
//category_One('one', 80, '项目焊接一次合格率', '{value}%');
//category_One('one1', 76, '项目焊工总人数', '{value}人');
</script>
<script type="text/javascript">
function category_two(id, data) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
title: [{
text: '项目焊接工程量统计',
top:'10',
//left:'center',
textStyle:{
color: '#278AC8',
fontSize: 12,
//fontWeight:300
}
}],
//tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b}: {c} ({d}%)'
//},
legend: {
show: true,
bottom: 0,
align: 'left',
textStyle:{//图例文字的样式
color:'#fff'
}
},
color: ['#1E9B7D', '#8EC43D'],
series: [
{
name: '项目焊接工程量统计',
type: 'pie',
center: ['50%', '55%'],
radius: ['50%', '65%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'inside',
formatter: function(data){ return data.percent.toFixed(2)+"%";}
},
//emphasis: {
// label: {
// show: true,
// fontSize: '20',
// fontWeight: 'bold'
// }
//},
labelLine: {
show: false
},
data: data,
itemStyle: {
normal: {
//opacity: 0.7,
borderWidth: 3,
borderColor: 'rgba(218,235,234, 1)'
}
}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
var data21= [ <%=data21%> ];
var data22 = [<%=data22%> ];
category_two('two', data21);
</script>
<script type="text/javascript">
function initEchart04(id, dataT, data1, title) {
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
// left:'center',
text: title,
textStyle: {
fontSize: 12,
color: '#fff',
fontWeight: '300'
},
show: true
},
color: ['#1ab1ff', '#f24166'],
grid: {
top: '20%',
left: '3%',
right: '3%',
bottom: '5%',
containLabel: true
},
tooltip: {
trigger: 'axis',
showDelay: 0,
axisPointer: {
type: 'shadow'
}
},
legend: {
// y: '55%',
top: '4%',
left: 'center',
textStyle: {
fontSize: 12,//字体大小
color: ['#1ab1ff', '#f24166']//字体颜色
},
data: ['全部'],
itemWidth: 12,//图例的宽度
itemHeight: 6,//图例的高度
},
xAxis: {
data: dataT,
boundaryGap: true,
axisLabel: {
color: '#1ab1ff',
interval: 0,
},
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: '#0D3C65',
},
},
splitNumber: 5,
},
series: [
{
name: '全部',
type: 'bar',
barWidth: 16,
data: data1,
barGap: '0%',/*多个并排柱子设置柱子之间的间距*/
barCategoryGap: '0%',/*多个并排柱子设置柱子之间的间距*/
itemStyle: {
color: '#1ab1ff',
emphasis: {
barBorderRadius: [10, 10, 0, 0],
},
normal: {
barBorderRadius: [10, 10, 0, 0],
}
}
}
]
};
myChart.clear();//清空
if (dataT.length > 6) {
option.dataZoom = [{
type: 'slider',
show: true,
startValue: 0,
endValue: 5,
height: '3',
backgroundColor: 'rgba(47,69,84,0)',
fillerColor: 'rgba(47,69,84,0)',
bottom: '0%',
zoomLock: true,
moveOnMouseWheel: true,
brushSelect: true,
showDetail: false,
}]
}
option && myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function category_Three(id, xArr, series, title) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
title: {
// left:'center',
text: title,
textStyle: {
fontSize: 12,
color: '#fff',
fontWeight:'300'
},
show: true
},
tooltip: {},
legend: {
//data: ['销量'],
show: false
},
xAxis: {
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.8)'
}
},
type: 'category',
data: xArr
},
yAxis: {
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.8)'
}
}
},
series: series,
grid: {
top: '25%',
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true,
backgroundColor: 'rgba(0,162,233, 0.01)',
// borderColor: 'rgba(0,162,233, 1)'
},
itemStyle: {
color: 'rgba(200,201,10, 1)'
},
backgroundColor: 'rgba(0,162,233, 0.01)',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
var xArr31 = [<%=xArr31%>]
var data310 = [<%=data310%>]
var series31 = [{
name: '已完成',
type: 'bar',
barWidth: 40,
label: {
show: true,
position: 'top',
color: 'white'
},
data: data310,
itemStyle: { normal: { color: 'rgba(236,157,27, 1)' } }
} ];
var xArr32 = [<%=xArr32%>]
var data320 = [<%=data320%>]
var series32 = [{
name: '已完成',
type: 'bar',
barWidth: 40,
data: data320,
label: {
show: true,
position: 'top',
color: 'white'
},
itemStyle: { normal: { color: 'rgba(236,157,27, 1)' } }
} ];
category_Three('three', xArr31, series31, '焊接进度分析(万)')
// initEchart04('three', xArr31, data310, '焊接进度分析(万)')
var xArr41 = [<%=xArr41%>];
var data41=[<%=data41%>];
var series41 = [{
name: '数量',
type: 'bar',
barWidth: 40,
label: {
show: true,
position: 'top',
color:'white'
},
data: data41,
itemStyle: { normal: { color: 'rgba(57,178,210, 1)' } }
}];
var xArr42 = [<%=xArr42%>];
var data42 = [<%=data42%>];
var series42 = [{
name: '数量',
type: 'bar',
barWidth: 40,
label: {
show: true,
position: 'top',
color: 'white'
},
data: data42,
itemStyle: { normal: { color: 'rgba(57,178,210, 1)' } }
}];
category_Three('four', xArr41, series41, '焊接一次合格率')
// initEchart04('four', xArr41, data41, '焊接一次合格率')
</script>
<script type="text/javascript">
function category_five(id, xArr, data) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
title: {
top: 10,
//left: 10,
text: '',
textStyle: {
color: '#278AC8',
//fontWeight: '300',
fontSize: 12
},
},
tooltip: {
trigger: 'axis'
},
legend: {
show: false,
left: 'center',
data: ['问题数量']
},
radar: [
{
shape: 'circle',
indicator: xArr,
center: ['50%', '55%'],
radius: 70
}
],
series: [
{
type: 'radar',
//areaStyle: {},
data: [
{
name: '问题数量',
value: data,
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
var xArr = [{ text: "气孔", max: 30 }, { text: "夹渣", max: 30 }, { text: "咬边", max: 30 }, { text: "未融", max: 30 }, { text: "其他", max: 30 }]
var data = [23, 25, 22, 13, 4]
category_five('five', xArr, data)
</script>
<script type="text/javascript">
var xArr11 = [<%=xArr11%>];
var data11 = [<%=data11%>];
var series11 = [{
name: '数量',
type: 'bar',
barWidth: 40,
label: {
show: true,
position: 'top',
color: 'white'
},
data: data11,
itemStyle: { normal: { color: 'rgba(57,178,210, 1)' } }
}];
category_Three('one', xArr11, series11, '近7日功效分析')
</script>
<script>
$(".tab .t-item").click(function () {
var $this = $(this)
var index = $this.index()
if ($this.hasClass('active') && index == 0) {
return
}
var $tab = $this.closest(".tab")
var value = $tab.attr("data-value")
$tab.find(".t-item").removeClass('active');
$this.addClass('active')
if (value == 4) {
if (index == 0) {
category_Three('four', xArr41, series41, '焊接一次合格率')
} else if (index == 1) {
category_Three('four', xArr42, series42, '焊接一次合格率')
}
//category_One('one', xArr, data)
}
if (value == 3) {
if (index == 0) {
category_Three('three', xArr31, series31, '焊接进度分析')
} else if (index == 1) {
category_Three('three', xArr32, series32, '焊接进度分析')
}
//category_One('one', xArr, data)
}
else if (value == 6) {
if (index == 0) {
category_two('two', data21);
}
else if (index == 1) {
category_two('two', data22);
}
}
else if (value == 3) {
var data = [{ value: 10, name: '分包一' },
{ value: 5, name: '分包二' },
{ value: 15, name: '分包三' },
{ value: 25, name: '分包四' },
{ value: 20, name: '分包五' },
{ value: 35, name: '分包六' }];
if (index == 2) {
data = [{ value: 25, name: '单位工程一' },
{ value: 35, name: '单位工程二' },
{ value: 30, name: '单位工程三' }];
}
else if (index == 4) {
data = [{ value: 45, name: '建筑' },
{ value: 55, name: '安装' }];
}
else if (index == 6) {
data = [{ value: 35, name: '质量不合格' },
{ value: 65, name: '质量缺陷' }];
}
pie('three', data)
}
else if (value == 4) {
var xArr = ["主项一", "主项二", "主项三", "主项四", "主项五"]
var data = [12, 5, 28, 43, 22]
if (index == 2) {
xArr = ["建筑", "安装"]
data = [45, 65]
}
category('four', xArr, data)
}
})
</script>
</html>