863 lines
29 KiB
Plaintext
863 lines
29 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/index/css/reset.css" rel="stylesheet" />
|
|||
|
|
<link href="../res/index/css/home.css?v1" 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 js-hover" data-type="WelderNumDef">
|
|||
|
|
<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>
|
|||
|
|
</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 ">按分包商</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>
|
|||
|
|
<div class="hover-wrap">
|
|||
|
|
<div class="hover-item">
|
|||
|
|
</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: '#333'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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 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: '#333',
|
|||
|
|
fontWeight: '300'
|
|||
|
|
},
|
|||
|
|
show: true
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: {
|
|||
|
|
//data: ['销量'],
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(51, 51, 51, 0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(51, 51, 51, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
type: 'category',
|
|||
|
|
data: xArr
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(51, 51, 51, 0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(51, 51, 51, 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(51, 51, 51, 0.3)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option)
|
|||
|
|
}
|
|||
|
|
var xArr31 = [<%=xArr31%>]
|
|||
|
|
var data310 = [<%=data310%>]
|
|||
|
|
|
|||
|
|
var series31 = [{
|
|||
|
|
name: '已完成',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 40,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
color: '#333'
|
|||
|
|
},
|
|||
|
|
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: '#333'
|
|||
|
|
},
|
|||
|
|
itemStyle: { normal: { color: 'rgba(236,157,27, 1)' } }
|
|||
|
|
}];
|
|||
|
|
category_Three('three', xArr31, series31, '焊接进度分析(万)')
|
|||
|
|
|
|||
|
|
var xArr41 = [<%=xArr41%>];
|
|||
|
|
var data41 = [<%=data41%>];
|
|||
|
|
var series41 = [{
|
|||
|
|
name: '数量',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 40,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
color: '#333'
|
|||
|
|
},
|
|||
|
|
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: '#333'
|
|||
|
|
},
|
|||
|
|
data: data42,
|
|||
|
|
itemStyle: { normal: { color: 'rgba(57,178,210, 1)' } }
|
|||
|
|
}];
|
|||
|
|
|
|||
|
|
category_Three('four', xArr41, series41, '焊接一次合格率')
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function category_five(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: false,
|
|||
|
|
bottom: 0,
|
|||
|
|
align: 'left',
|
|||
|
|
textStyle: {//图例文字的样式
|
|||
|
|
color: '#333'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//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 data55 = [<%=data55%> ];
|
|||
|
|
category_five('five', data55)
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var xArr11 = [<%=xArr11%>];
|
|||
|
|
var data11 = [<%=data11%>];
|
|||
|
|
var series11 = [{
|
|||
|
|
name: '数量',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 40,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'top',
|
|||
|
|
color: '#333'
|
|||
|
|
},
|
|||
|
|
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)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
var dataHtmlContent = {
|
|||
|
|
|
|||
|
|
/*type0: '企业总部人数A项目20人，B项目4人。| 总部人数A项目24人，B项目4人。'*/
|
|||
|
|
PersonNum:'<%=WelderNumDef%>',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function GetHtml(obj) {
|
|||
|
|
var $this = $(obj), type = $this.attr('data-type'), tabType = $this.attr('data-tabType') || '';
|
|||
|
|
var title = '';
|
|||
|
|
var content = '';
|
|||
|
|
if (type == 'PersonNum') {
|
|||
|
|
title = '焊工人数'
|
|||
|
|
}
|
|||
|
|
if (tabType != '') {
|
|||
|
|
tabType = $this.closest('.bb-item').find('.tab-wrap .tab .active').attr('data-type')
|
|||
|
|
if (tabType == null) {
|
|||
|
|
tabType = $this.closest('.str-bottom').find('.tab-wrap .tab .active').attr('data-type')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
content = dataHtmlContent[type + tabType] || ''
|
|||
|
|
var html = ''
|
|||
|
|
var strs = '<%=WelderNumDef%>'.split('|');
|
|||
|
|
for (var i = 0; i < strs.length; i++) {
|
|||
|
|
html += '<div class="tit">'
|
|||
|
|
html += '<h1>' + strs[i] + '</h1>'
|
|||
|
|
html += '</div>'
|
|||
|
|
html += '<div class="content">'
|
|||
|
|
}
|
|||
|
|
if (content != '') {
|
|||
|
|
var contentArr = content.split('|')
|
|||
|
|
for (var i = 0; i < contentArr.length; i++) {
|
|||
|
|
var contentNow = contentArr[i] || ''
|
|||
|
|
if (contentNow != '') {
|
|||
|
|
html += '<div class="text">'
|
|||
|
|
html += contentNow
|
|||
|
|
html += '</div>'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
html += '</div>'
|
|||
|
|
return html;
|
|||
|
|
}
|
|||
|
|
initHover();
|
|||
|
|
function initHover() {
|
|||
|
|
console.log("以调用")
|
|||
|
|
var x = 10, y = 20;
|
|||
|
|
// 设置maxHeight值
|
|||
|
|
//$('.hover-wrap .hover-item').css('max-height', '300px')
|
|||
|
|
$(".js-hover").mouseover(function (e) {
|
|||
|
|
console.log("鼠标进入")
|
|||
|
|
debugger
|
|||
|
|
if ($('.click-wrap').css('display') == 'block') {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
var $hoverWrap = $(".hover-wrap");
|
|||
|
|
var htmlContent = GetHtml(this)
|
|||
|
|
$hoverWrap.find('.hover-item').html(htmlContent)
|
|||
|
|
var length = $hoverWrap.find('.hover-item .text').length
|
|||
|
|
var numHeightFix = length > 10 ? (length / 2) * 20 : 0
|
|||
|
|
var windowX = $(window).width(), windowY = $(window).height();
|
|||
|
|
var leftValue = e.clientX, righttValue = e.clientX
|
|||
|
|
if (leftValue < windowX / 2) {
|
|||
|
|
leftValue = e.clientX + y
|
|||
|
|
righttValue = 'auto'
|
|||
|
|
} else {
|
|||
|
|
leftValue = 'auto'
|
|||
|
|
righttValue = windowX - e.clientX + y
|
|||
|
|
}
|
|||
|
|
var topValue = e.clientY, bottomValue = e.clientY
|
|||
|
|
if (topValue < windowY / 2) {
|
|||
|
|
topValue = Math.max(e.clientY + x + $(document).scrollTop() - numHeightFix, 0)
|
|||
|
|
bottomValue = 'auto'
|
|||
|
|
} else {
|
|||
|
|
topValue = 'auto'
|
|||
|
|
//bottomValue = windowY - (e.clientY + x) - $(document).scrollTop() - numHeightFix
|
|||
|
|
if (windowY - e.clientY < numHeightFix) {
|
|||
|
|
bottomValue = windowY - (e.clientY + x) - $(document).scrollTop()
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
bottomValue = windowY - (e.clientY + x) - $(document).scrollTop() - numHeightFix
|
|||
|
|
}
|
|||
|
|
// console.log("1:", e.clientY, numHeightFix, windowY - (e.clientY + x) - $(document).scrollTop())
|
|||
|
|
}
|
|||
|
|
$hoverWrap.css({
|
|||
|
|
top: topValue,
|
|||
|
|
bottom: bottomValue,
|
|||
|
|
left: leftValue,
|
|||
|
|
right: righttValue,
|
|||
|
|
}).show()
|
|||
|
|
}).mouseout(function () {
|
|||
|
|
$(".hover-wrap").hide()
|
|||
|
|
}).mousemove(function (e) {
|
|||
|
|
//if ($('.click-wrap').css('display') == 'block') {
|
|||
|
|
// return
|
|||
|
|
//}
|
|||
|
|
var $hoverWrap = $(".hover-wrap");
|
|||
|
|
var htmlContent = GetHtml(this)
|
|||
|
|
$hoverWrap.find('.hover-item').html(htmlContent)
|
|||
|
|
var length = $hoverWrap.find('.hover-item .text').length
|
|||
|
|
var numHeightFix = length > 10 ? (length / 2) * 20 : 0
|
|||
|
|
var windowX = $(window).width(), windowY = $(window).height();
|
|||
|
|
|
|||
|
|
var leftValue = e.clientX
|
|||
|
|
var righttValue = e.clientX
|
|||
|
|
|
|||
|
|
if (leftValue < windowX / 2) {
|
|||
|
|
leftValue = e.clientX + y
|
|||
|
|
righttValue = 'auto'
|
|||
|
|
} else {
|
|||
|
|
leftValue = 'auto'
|
|||
|
|
righttValue = windowX - e.clientX + y
|
|||
|
|
}
|
|||
|
|
// console.log('mousemove - end', leftValue, righttValue)
|
|||
|
|
var topValue = e.clientY, bottomValue = e.clientY
|
|||
|
|
if (topValue < windowY / 2) {
|
|||
|
|
topValue = Math.max(e.clientY + x + $(document).scrollTop() - numHeightFix, 0)
|
|||
|
|
bottomValue = 'auto'
|
|||
|
|
} else {
|
|||
|
|
topValue = 'auto'
|
|||
|
|
//bottomValue = Math.max(windowY - (e.clientY + x) - $(document).scrollTop() - numHeightFix, 0)
|
|||
|
|
//bottomValue = windowY - (e.clientY + x) - $(document).scrollTop() - numHeightFix
|
|||
|
|
if (windowY - e.clientY < numHeightFix) {
|
|||
|
|
bottomValue = windowY - (e.clientY + x) - $(document).scrollTop()
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
bottomValue = windowY - (e.clientY + x) - $(document).scrollTop() - numHeightFix
|
|||
|
|
}
|
|||
|
|
// console.log("2:", e.clientY, numHeightFix, windowY - (e.clientY + x) - $(document).scrollTop())
|
|||
|
|
}
|
|||
|
|
$hoverWrap.css({
|
|||
|
|
top: topValue,
|
|||
|
|
bottom: bottomValue,
|
|||
|
|
left: leftValue,
|
|||
|
|
right: righttValue,
|
|||
|
|
}).show()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
|