980 lines
41 KiB
Plaintext
980 lines
41 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_CQMS_1.aspx.cs" Inherits="FineUIPro.Web.mainMenu_CQMS_1" %>
|
||
|
||
<!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;
|
||
}
|
||
|
||
.flexV {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.wrap {
|
||
height: 100%;
|
||
padding: 15px;
|
||
}
|
||
|
||
.iteml {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.itemb {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.bottom-wrap {
|
||
padding: 0;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.bottom-wrap:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.bw-b-bottom {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.bw-b-bottom-up {
|
||
border-radius: 0;
|
||
height: 100%;
|
||
margin: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.bw-item-content {
|
||
padding: 5px;
|
||
}
|
||
|
||
.top {
|
||
width: 100%;
|
||
}
|
||
|
||
.top .item {
|
||
}
|
||
|
||
.bw-b {
|
||
width: 50%;
|
||
}
|
||
|
||
.bw-b-bottom-up {
|
||
}
|
||
|
||
.tab-wrap {
|
||
left: auto;
|
||
right: 15px;
|
||
top: 5px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tab .t-item {
|
||
width: auto;
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
.tit-item {
|
||
padding: 0 10px;
|
||
color: #fff;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tip-item {
|
||
margin-left: 10px;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.tip {
|
||
width: 25px;
|
||
height: 13px;
|
||
background-color: #258F76;
|
||
border-radius: 2px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.tip-next {
|
||
background-color: #92BF55;
|
||
}
|
||
.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 flexV">
|
||
|
||
<div class="bottom-wrap flex1">
|
||
<div class="top flex">
|
||
<div class="item flex1">
|
||
<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">98.37</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>
|
||
</div>
|
||
</div>
|
||
<div class="item flex2 iteml">
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="tab-wrap">
|
||
<div class="tab" data-value="2">
|
||
<div class="t-item ">施工分包商</div>
|
||
<div class="spline"></div>
|
||
<div class="t-item active">问题类别</div>
|
||
<div class="spline"></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>
|
||
</div>
|
||
<div class="bottom-wrap flex2">
|
||
<div class="top flex">
|
||
<div class="item flex1 flex flexV">
|
||
<div class="bw-b-bottom" style="margin-bottom: 5px;">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content flex">
|
||
<div id='one' style="width: 100%; height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content">
|
||
<div id='three' style="width: 100%; height: 95%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item flex2 iteml">
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="tab-wrap">
|
||
<div class="tab">
|
||
<div class="t-item active">施工分包商</div>
|
||
</div>
|
||
</div>
|
||
<div class="bw-item-content">
|
||
<div id='four' 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_six(id, title, xArr, data) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
left: '0',
|
||
top: '0',
|
||
text: '统计',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
fontWeight: '300'
|
||
},
|
||
show: true
|
||
},
|
||
legend: {
|
||
left: 'right',
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
tooltip: {},
|
||
dataset: {
|
||
source: [
|
||
['product', '2012', '2013', '2014'],
|
||
['已整改', 2, 3, 5],
|
||
['未整改', 6, 9, 3]
|
||
]
|
||
},
|
||
color: ['#258F76', '#92BF55'],
|
||
graphic: {
|
||
type: "text",
|
||
left: "center",
|
||
top: "center",
|
||
style: {
|
||
text: "text",
|
||
textAlign: "center",
|
||
fill: "#fff",
|
||
fontSize: 12,
|
||
fontWeight: 700
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
center: ['18%', '58%'],
|
||
radius: ['60%', '80%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: function (data) { return data.percent.toFixed(2) + "%"; }
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
//opacity: 0.7,
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
},
|
||
// No encode specified, by default, it is '2012'.
|
||
}, {
|
||
type: 'pie',
|
||
radius: ['60%', '80%'],
|
||
center: ['50%', '58%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: function (data) { return data.percent.toFixed(2) + "%"; }
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
//opacity: 0.7,
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
},
|
||
encode: {
|
||
itemName: 'product',
|
||
value: '2013'
|
||
}
|
||
}, {
|
||
type: 'pie',
|
||
radius: ['60%', '80%'],
|
||
center: ['82%', '58%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: function (data) { return data.percent.toFixed(2) + "%"; }
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
//opacity: 0.7,
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
},
|
||
encode: {
|
||
itemName: 'product',
|
||
value: '2014'
|
||
}
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var xArr = ["已整改", "未整改"]
|
||
var series = [
|
||
{ value: 335, name: '人身伤害' },
|
||
{ value: 310, name: '未遂事故' }
|
||
]
|
||
//category_six('one4', "A类", xArr, );
|
||
</script>
|
||
<script type="text/javascript">
|
||
function pie(id, data, title, text, needLegend) {
|
||
var myChartPie = echarts.init(document.getElementById(id));
|
||
var needLegend = needLegend || false
|
||
var optionPie = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
show: true
|
||
},
|
||
legend: {
|
||
show: needLegend,
|
||
selectedMode: false,
|
||
left: 'right',
|
||
orient: 'horizontal',
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
title: {
|
||
left: '15%',
|
||
bottom: 'center',
|
||
text: title,
|
||
textStyle: {
|
||
color: 'rgba(0,162,233, 1)',
|
||
fontSize: 16,
|
||
fontWeight: '300'
|
||
},
|
||
show: true
|
||
},
|
||
graphic: {
|
||
type: "text",
|
||
left: "66%",
|
||
top: "center",
|
||
style: {
|
||
text: text,
|
||
textAlign: "center",
|
||
fill: "#fff",
|
||
fontSize: 16,
|
||
fontWeight: 700
|
||
}
|
||
},
|
||
color: ['#258F76', '#92BF55'],
|
||
series: [
|
||
{
|
||
name: ' ',
|
||
hoverOffset: 0,
|
||
type: 'pie',
|
||
clickable: false,
|
||
center: ['70%', '50%'],
|
||
radius: ['50%', '75%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
//opacity: 0.7,
|
||
borderWidth: 3,
|
||
borderColor: 'rgba(218,235,234, 1)'
|
||
}
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '10',
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: data
|
||
}
|
||
]
|
||
};
|
||
//为echarts对象加载数据
|
||
myChartPie.setOption(optionPie);
|
||
}
|
||
var one4 = { "title": null, "num1": 0, "num2": 0, "num3": 0, "num4": 0, "num5": 0, "num6": 0, "num7": 0, "num8": 0, "num9": 0 };
|
||
var data4 = [{ value: one4.num2, name: '已完成' },
|
||
{ value: one4.num1, name: '未完成' }];
|
||
var data5 = [{ value: one4.num5, name: '已完成' },
|
||
{ value: one4.num4, name: '未完成' }];
|
||
var data6 = [{ value: one4.num8, name: '已完成' },
|
||
{ value: one4.num7, name: '未完成' }];
|
||
pie('one', data4, "质量问题整改率", "<%=One3%>")
|
||
//pie('one5', data5, "B类", one4.num6)
|
||
//pie('one6', data6, "C类", one4.num9)
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
function category_Two(id, xArr, data,num) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
// left:'center',
|
||
text: '质量问题统计',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontWeight: 'normal',
|
||
fontSize: 12
|
||
},
|
||
show: true
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
left: '15%',
|
||
show: true,
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff',
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
},
|
||
interval: 0,
|
||
formatter:function(value)
|
||
{
|
||
var ret = "";//拼接加\n返回的类目项
|
||
var maxLength = num;//每项显示文字个数
|
||
var valLength = value.length;//X轴类目项的文字个数
|
||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||
if (rowN > 1)//如果类目项的文字大于maxLength,
|
||
{
|
||
for (var i = 0; i < rowN; i++) {
|
||
var temp = "";//每次截取的字符串
|
||
var start = i * maxLength;//开始截取的位置
|
||
var end = start + maxLength;//结束截取的位置
|
||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||
//temp = value.substring(start, end) + "\n";
|
||
temp = value.substring(start, end) + (i == rowN -1 ? "" : "\n");
|
||
ret += temp; //凭借最终的字符串
|
||
}
|
||
return ret;
|
||
}
|
||
else {
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
type: 'category',
|
||
data: xArr,
|
||
boundaryGap: [0, 0.01],
|
||
},
|
||
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: data,
|
||
grid: {
|
||
top: '20%',
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '0%',
|
||
containLabel: true,
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
// borderColor: 'rgba(0,162,233, 1)'
|
||
},
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var two2 =<%=Two4 %>;
|
||
//var xArr = ["分包1", "分包2", "分包3", "分包4", "分包5", "分包6", "分包7", "分包8", "分包9"]
|
||
var xArr = two2.categories
|
||
var data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth: 20,
|
||
//data: [3, 5, 8, 10, 6, 4, 5, 9, 12],
|
||
data: two2.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth: 20,
|
||
//data: [2, 7, 5, 9, 12, 9, 2, 8, 10],
|
||
data: two2.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
]
|
||
category_Two('two', xArr, data, two2.xFontNum)
|
||
//var two2 = { "title": "质量问题统计", "xFontNum": 2, "legend": null, "categories": ["全场总图运输", "全场外管", "全厂给排水", "全厂供电线路及道路照明", "全厂电信及火灾报警系统", "全厂消防", "全厂环境监测系统", "循环水站", "事故水池", "污水提升池", "厂前区变电所", "空压站", "天然气计量站", "备品备件库", "化学品库", "危废品库", "危化品库", "冷库", "机修车间", "中央控制室", "化验室", "门卫一（含汽车衡）", "门卫二", "厂外工艺管线", "场外排水管线"], "series": [{ "name": null, "type": null, "data": [0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 6.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
////var xArr = ["分包1", "分包2", "分包3", "分包4", "分包5", "分包6", "分包7", "分包8", "分包9"]
|
||
//var xArr = two2.categories
|
||
//var data = [
|
||
// {
|
||
// name: '未整改',
|
||
// type: 'bar',
|
||
// stack: '总量',
|
||
// barWidth: 40,
|
||
// //data: [3, 5, 8, 10, 6, 4, 5, 9, 12],
|
||
// data: two2.series[0].data,
|
||
// itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
// },
|
||
// {
|
||
// name: '已整改',
|
||
// type: 'bar',
|
||
// stack: '总量',
|
||
// barWidth: 40,
|
||
// //data: [2, 7, 5, 9, 12, 9, 2, 8, 10],
|
||
// data: two2.series[1].data,
|
||
// itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
// }
|
||
//]
|
||
//category_Two('two', xArr, data,two2.xFontNum)
|
||
</script>
|
||
<script type="text/javascript">
|
||
function category_Three(id, xArr, series) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
left: 'right',
|
||
text: '质量方案',
|
||
textStyle: {
|
||
color: 'rgba(0,162,233, 1)',
|
||
fontSize: 14,
|
||
fontWeight: '300'
|
||
},
|
||
show: true
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
left: '3%',
|
||
orient: 'vertical',
|
||
top: '0',
|
||
show: false,
|
||
selectedMode: false,
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff',
|
||
fontSize: '10'
|
||
}
|
||
},
|
||
yAxis: {
|
||
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
|
||
},
|
||
xAxis: {
|
||
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: '10',
|
||
right: '10',
|
||
bottom: '0%',
|
||
containLabel: true,
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
// borderColor: 'rgba(0,162,233, 1)'
|
||
},
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
textStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
var three = <%=ConstructSolution%> //{ "title": "质量一次合格率", "xFontNum": 0, "legend": null, "categories": ["广西建工", "吉林华强"], "series": [{ "name": null, "type": null, "data": [1.0, 2.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [4.0, 3.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
//var xArr = ["分包1", "分包2", "分包3", "分包4", "分包5", "分包6"]
|
||
var xArr = ["待审核", "已闭环"]
|
||
//var data = [12, 5, 28, 43, 22, 11]
|
||
//var data1 = [21, 9, 12, 15, 8, 43]
|
||
var series = [{
|
||
name: '待审核',
|
||
type: 'bar',
|
||
barGap:0,
|
||
data: three.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(247,234,16,1)' } }
|
||
},
|
||
{
|
||
name: '已闭环',
|
||
type: 'bar',
|
||
data: three.series[0].data,
|
||
barGap:0,
|
||
itemStyle: { normal: { color: 'rgba(250,75,8, 1)' } }
|
||
}]
|
||
category_Three('three', xArr, series)
|
||
</script>
|
||
<script>
|
||
function category_Four(id, xArr, series, title) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
title: {
|
||
// left:'center',
|
||
text: title,
|
||
textStyle: {
|
||
color: 'rgba(0,162,233, 1)',
|
||
fontSize: 14,
|
||
fontWeight: '300',
|
||
},
|
||
show: true
|
||
},
|
||
tooltip: {},
|
||
color: ['#88cc00', '#AE4B23'],
|
||
legend: {
|
||
left: '15%',
|
||
show: false,
|
||
textStyle: {//图例文字的样式
|
||
color: '#ffffff',
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0,
|
||
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 four1 = <%=BaoYan%>//{ "title": "报验数量（单位：个）", "xFontNum": 0, "legend": null, "categories": ["十六化建", "十三化建"], "series": [{ "name": null, "type": null, "data": [10.0, 8.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [1.0, 4.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
var xArr = ["设备材料", "人员", "机具", "现场签证", "设计交底"]
|
||
var series = four1.series
|
||
//[{
|
||
// name: '分包1',
|
||
// type: 'bar',
|
||
// barWidth: 20,
|
||
// barGap: 0.05,
|
||
// data: [1, 2, 3, 4, 5],
|
||
// itemStyle: { normal: { color: '#70FF6F' } }
|
||
//}, {
|
||
// name: '分包2',
|
||
// type: 'bar',
|
||
// barWidth: 20,
|
||
// data: [10, 12, 8, 4, 15],
|
||
// itemStyle: { normal: { color: '#AE4B23' } }
|
||
//}];
|
||
category_Four('four', xArr, series, "报验数量（单位：个）")
|
||
</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')
|
||
var two =<%=Two %>;
|
||
var two2 =<%=Two2 %>;
|
||
var two3 =<%=Two3 %>;
|
||
var two4 =<%=Two4 %>;
|
||
|
||
//var two = { "title": "质量问题统计", "xFontNum": 14, "legend": null, "categories": ["广西建工集团基础建设有限公司", "吉林吉化华强建设有限责任公司"], "series": [{ "name": null, "type": null, "data": [2.0, 4.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [8.0, 2.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
//var two2 = { "title": "质量问题统计", "xFontNum": 2, "legend": null, "categories": ["全场总图运输", "全场外管", "全厂给排水", "全厂供电线路及道路照明", "全厂电信及火灾报警系统", "全厂消防", "全厂环境监测系统", "循环水站", "事故水池", "污水提升池", "厂前区变电所", "空压站", "天然气计量站", "备品备件库", "化学品库", "危废品库", "危化品库", "冷库", "机修车间", "中央控制室", "化验室", "门卫一（含汽车衡）", "门卫二", "厂外工艺管线", "场外排水管线"], "series": [{ "name": null, "type": null, "data": [0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 6.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
//var two3 = { "title": "质量问题统计", "xFontNum": 4, "legend": null, "categories": ["建筑工程", "土建", "设备", "管道", "电气", "仪表", "防腐", "消防"], "series": [{ "name": null, "type": null, "data": [0.0, 6.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [0.0, 10.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
//var two4 = { "title": "质量问题统计", "xFontNum": 4, "legend": null, "categories": ["模板工程", "混凝土工程", "钢筋工程", "土方工程"], "series": [{ "name": null, "type": null, "data": [4.0, 0.0, 1.0, 1.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [6.0, 1.0, 3.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
var three = { "title": "质量一次合格率", "xFontNum": 0, "legend": null, "categories": ["广西建工", "吉林华强"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
var three2 = { "title": "质量一次合格率", "xFontNum": 0, "legend": null, "categories": ["建筑工程", "土建", "设备", "管道", "电气", "仪表", "防腐", "消防"], "series": [{ "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
var four = { "title": "质量一次合格率", "xFontNum": 0, "legend": null, "categories": [], "series": [{ "name": null, "type": null, "data": [], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
var four2 = { "title": "质量一次合格率", "xFontNum": 0, "legend": null, "categories": [], "series": [{ "name": null, "type": null, "data": [], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }, { "name": null, "type": null, "data": [], "data2": null, "data3": null, "data4": null, "dataString": null, "dataObject": null, "jd": null, "sg": null, "time": null, "ht": null, "convert": null, "pieData": null, "loc": null }], "series2": null };
|
||
var num = 5;
|
||
if (value == 2) {
|
||
var xArr = two.categories
|
||
var data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [3, 5, 8, 10, 6, 4, 5, 9, 12],
|
||
data: two.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [2, 7, 5, 9, 12, 9, 2, 8, 10],
|
||
data: two.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
];
|
||
num = two.xFontNum;
|
||
if (index == 6) {
|
||
//xArr = ["单位工程1", "单位工程2", "单位工程3", "单位工程4", "单位工程5", "单位工程6", "单位工程7", "单位工程8", "单位工程9"]
|
||
xArr = two2.categories
|
||
data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [13, 5, 18, 10, 6, 4, 5, 9, 22],
|
||
data: two2.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [2, 7, 15, 9, 12, 29, 12, 18, 10],
|
||
data: two2.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
];
|
||
num = two2.xFontNum;
|
||
}
|
||
else if (index == 2) {
|
||
//xArr = ["专业1", "专业2", "专业3", "专业4", "专业5", "专业6", "专业7", "专业8", "专业9"]
|
||
xArr = two4.categories
|
||
data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [23, 25, 18, 10, 16, 4, 5, 29, 2],
|
||
data: two4.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [2, 27, 15, 9, 12, 29, 32, 18, 1],
|
||
data: two4.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
];
|
||
num = two4.xFontNum;
|
||
}
|
||
else if (index == 4) {
|
||
//xArr = ["专业1", "专业2", "专业3", "专业4", "专业5", "专业6", "专业7", "专业8", "专业9"]
|
||
xArr = two3.categories
|
||
data = [
|
||
{
|
||
name: '未整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [23, 25, 18, 10, 16, 4, 5, 29, 2],
|
||
data: two3.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(162,63,21, 1)' } }
|
||
},
|
||
{
|
||
name: '已整改',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
//data: [2, 27, 15, 9, 12, 29, 32, 18, 1],
|
||
data: two3.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(206,143,135,1)' } }
|
||
}
|
||
];
|
||
num = two3.xFontNum;
|
||
}
|
||
category_Two('two', xArr, data,num)
|
||
}
|
||
else if (value == 3) {
|
||
//var xArr = ["分包1", "分包2", "分包3", "分包4", "分包5", "分包6"]
|
||
var xArr = three.categories
|
||
//var data = [12, 5, 28, 43, 22, 11]
|
||
//var data1 = [21, 9, 12, 15, 8, 43]
|
||
var series = [{
|
||
name: '质量验收一次合格率',
|
||
type: 'bar',
|
||
data: three.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(43,155,176,1)' } }
|
||
},
|
||
{
|
||
name: '施工资料同步率',
|
||
type: 'bar',
|
||
data: three.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(140,202,214, 1)' } }
|
||
}];
|
||
if (index == 2) {
|
||
//xArr = ["专业1", "专业2", "专业3", "专业4", "专业5", "专业6"]
|
||
xArr = three2.categories
|
||
series = [{
|
||
name: '质量验收一次合格率',
|
||
type: 'bar',
|
||
data: three2.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(43,155,176,1)' } }
|
||
},
|
||
{
|
||
name: '施工资料同步率',
|
||
type: 'bar',
|
||
data: three2.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(140,202,214, 1)' } }
|
||
}];
|
||
}
|
||
category_Three('three', xArr, series)
|
||
}
|
||
else if (value == 4) {
|
||
var xArr = four.categories
|
||
var series = [{
|
||
name: '质量验收一次合格率',
|
||
type: 'bar',
|
||
data: four.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(43,155,176,1)' } }
|
||
},
|
||
{
|
||
name: '施工资料同步率',
|
||
type: 'bar',
|
||
data: four.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(140,202,214, 1)' } }
|
||
}];
|
||
if (index == 2) {
|
||
xArr = four2.categories
|
||
series = [{
|
||
name: '质量验收一次合格率',
|
||
type: 'bar',
|
||
data: four2.series[0].data,
|
||
itemStyle: { normal: { color: 'rgba(43,155,176,1)' } }
|
||
},
|
||
{
|
||
name: '施工资料同步率',
|
||
type: 'bar',
|
||
data: four2.series[1].data,
|
||
itemStyle: { normal: { color: 'rgba(140,202,214, 1)' } }
|
||
}];
|
||
}
|
||
category('four', xArr, series)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</html>
|
||
|