zhanghj
/
ChengDa_English
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ChengDa_English/SGGL/FineUIPro.Web/common/mainMenu_HJGL.aspx

808 lines
26 KiB
Plaintext
Raw Normal View History

20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
<%@ 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>
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
<%-- <div class="t-item ">按焊口数</div>--%>
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
</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;">
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
<%--<div class="tab" data-value="5">
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
<div class="t-item active">按分包商</div>
<div class="t-item ">按单位工程</div>
<div class="t-item">按材质类别</div>
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
</div>--%>
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
</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">
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
<%-- <div class="t-item active">按单位工程</div>--%>
<div class="t-item active">按分包商</div>
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
</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>
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
<%-- <div class="t-item ">按分包商</div>--%>
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
</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">
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
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();
});
}
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
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)' } }
} ];
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
category_Three('three', xArr31, series31, '焊接进度分析(万)')
// initEchart04('three', xArr31, data310, '焊接进度分析(万)')
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
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)' } }
}];
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
category_Three('four', xArr41, series41, '焊接一次合格率')
// initEchart04('four', xArr41, data41, '焊接一次合格率')
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
</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',
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
data: ['问题数量']
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
},
radar: [
{
shape: 'circle',
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
indicator: xArr,
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
center: ['50%', '55%'],
radius: 70
}
],
series: [
{
type: 'radar',
//areaStyle: {},
data: [
{
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
name: '问题数量',
value: data,
}
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
内蒙项目首页修改
2023-03-16 19:30:28 +08:00
var xArr = [{ text: "气孔", max: 30 }, { text: "夹渣", max: 30 }, { text: "咬边", max: 30 }, { text: "未融", max: 30 }, { text: "其他", max: 30 }]
var data = [23, 25, 22, 13, 4]
20220315 代码初始化上传
2022-03-15 17:36:38 +08:00
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>