CNCEC_SUBQHSE_WUHUAN/SGGL/FineUIPro.Web/common/mainMenu_TestRun.aspx

1018 lines
34 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_TestRun.aspx.cs" Inherits="FineUIPro.Web.mainMenu_TestRun" %>
<!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">
.top {
display: flex;
display: -webkit-flex;
overflow: hidden;
width: 100%;
height: 360px;
margin-bottom: 5px;
box-sizing: border-box;
}
.top .item {
flex: 1;
width: 50%;
float: left;
box-sizing: border-box;
margin: 0 10px 20px;
}
.bw-b {
width: 50%;
}
.bw-b-bottom-up {
box-sizing: border-box;
height: 340px;
}
.tab-wrap {
left: auto;
right: 15px;
}
.tab .t-item {
width: auto;
padding: 5px 10px;
}
.bottom-list {
height: 100px;
padding: 15px;
overflow: hidden;
color: #fff;
margin: 0 10px;
}
.bottom-list .bl-left {
float: left;
margin-right: 30px;
margin-left: 50px;
}
.bottom-list .bl-right {
float: right;
margin-right: 50px;
}
.tab .t-item {
font-size: 13px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="bottom-wrap">
<div class="top">
<div class="item">
<div class="bw-b-bottom ptop6">
<div class="bw-b-bottom-up">
<div class="bw-item-content">
<div id='one' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="bw-b-bottom ptop6">
<div class="bw-b-bottom-up">
<div class="bw-item-content">
<div id='two' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%--<div class="wrap">
<div class="bottom-wrap">
<div class="top">
<div class="item">
<div class="bw-b-bottom ptop6">
<div class="bw-b-bottom-up">
<div class="tab-wrap">
<div class="tab" data-value="1">
<div class="t-item active">施工分包商</div>
<div class="spline"></div>
<div class="t-item ">单位工程</div>
<div class="spline"></div>
<div class="t-item">专业</div>
</div>
</div>
<div class="bw-item-content">
<div id='one' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="bw-b-bottom ptop6">
<div class="bw-b-bottom-up">
<div class="tab-wrap">
<div class="tab" data-value="2">
<div class="t-item active">施工分包商</div>
<div class="spline"></div>
<div class="t-item ">单位工程</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">
<div class="top">
<div class="item">
<div class="bw-b-bottom ptop6">
<div class="bw-b-bottom-up">
<div class="tab-wrap">
<div class="tab" data-value="3">
<div class="t-item active">施工分包商</div>
<div class="spline"></div>
<div class="t-item ">单位工程</div>
<div class="spline"></div>
<div class="t-item">专业</div>
<div class="spline"></div>
<div class="t-item">问题类别</div>
</div>
</div>
<div class="bw-item-content">
<div id='three' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="bw-b-bottom ptop6">
<div class="bw-b-bottom-up">
<div class="tab-wrap">
<div class="tab" data-value="4">
<div class="t-item active">主项</div>
<div class="spline"></div>
<div class="t-item">专业</div>
</div>
</div>
<div class="bw-item-content">
<div id='four' style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-wrap">
<div class="bw-b-bottom-up bottom-list">
<div class="bl-left">
<div>质量控制点总数量200已完成178未完成22完成百分比89%</div>
<div>质量问题总数量100已完成84未完成16完成百分比84%</div>
<div>设计变更总数量65已完成52未完成13完成百分比80%</div>
</div>
<div class="bl-right">
<div>工程联系单总数量65已完成56未完成9 </div>
<div>工作联系单总数量42已完成35未完成7 </div>
<div>施工方案总数量34已完成30未完成4 </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">
var oneArrStr = "<%=oneArrStr%>";
var oneDataStr = '<%=oneDataStr%>';
var oneNameData = [];
var oneArr = JSON.parse(oneArrStr);
var oneData = JSON.parse(oneDataStr);
$.each(oneData, function (inxex, item) {
var obj = { name: item };
oneNameData.push(obj);
});
//图1
var bar_data = oneArr;//模拟数据
var chart = echarts.init(document.getElementById('one'));
var option = {
title: {
text: '预试车进度信息',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: 16
},
show: true
},
tooltip: {
formatter: '{a}:{c}%'//a 是series中每条数据name值c 是data数值
},
//legend: {
// orient: 'vertical', // 'horizontal'
// data: oneData,
// textStyle: { // 图列内容样式
// color: '#fff', // 字体颜色
// },
// x: '70%',//图例位置设置right发现图例和文字位置反了设置一个数值就好了
// y: 'center'//延Y轴居中
//},
grid: {
left: '3%',
//right: '30%',
right: '0%',
top: '15%',
bottom: '5%',
containLabel: true,
backgroundColor: 'rgba(0,162,233, 0.01)',
},
xAxis: [ //横坐标
{
type: 'category',
data: oneData,
axisLine: {
lineStyle: {
color: "#fff",//横坐标线条颜色
}
},
axisLabel: {
interval: 0,
rotate: -90,
}
}
],
yAxis: [ //纵坐标
{
type: 'value',
axisLabel: {
show: true,
formatter: '{value}%',//给Y轴数值添加百分号
},
axisLine: {
lineStyle: {
color: "#fff",//纵坐标线条颜色
}
}
}
],
//dataZoom: [
// {
// type: "slider",//slider表示有滑动块的
// show: true,
//// xAxisIndex: [0],//表示x轴折叠
// start: 1,//数据窗口范围的起始百分比,表示1%
// end: 70,//数据窗口范围的结束百分比,表示35%坐标
// bottom: "0",
// },
//],
series: [{
name: '进度率',
type: 'bar',
barWidth: 20,
data: oneArr,
label: {
show: true,
position: 'inside',
interval: 0,
rotate: -90,
formatter: function (params) {
if (params.value > 0) {
return params.value + '%';
} else {
return ' ';
}
},
},
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#0287f8', '#33CCCC', '#58b1fc', '#2fb6f6', '#CC3366', '#00FF99', '#33FFFF', '#669900', '#CC0099', '#FF66FF', '#330099', '#00FFCC', '#FFFF33', '#FF9966', '#FF6633'];
return colorList[params.dataIndex]
},
}
}
}]
//series: oneNameData
};
//for (var i = 0; i < option.series.length; i++) {
// var style = { //定义柱状图的样式
// type: 'bar',
// barWidth: 20,
// normal: {
// label: {
// show: true,
// position: 'inside', //柱子下显示 数值
// interval: 0,
// rotate: -90,
// formatter: function (params) {
// if (params.value > 0) {
// return params.value + '%';
// } else {
// return ' ';
// }
// },
// }
// }
// };
// option.series[i].type = 'bar'; //每条数据指定类型为'bar'
// option.series[i].itemStyle = style; // series中每条数据都加的样式
// option.series[i].data = [bar_data[i]]; //series 中 data赋值
//};
chart.setOption(option);
var twoDataStr = '<%=twoDataStr%>';
var towData = JSON.parse(twoDataStr);
var data = towData.map((item, index) => item.Rate);
var chart1 = echarts.init(document.getElementById('two'));
var barWidth = 20;
var maxNum = 100;
option = {
grid: {
top: '10%',
left: '20%',
right: '10%',
bottom: '0%',
},
title: {
text: '试车进度信息',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize: 16
},
},
xAxis: {
show: false,
},
yAxis: {
data: towData.map((item, index) => item.Name),
splitLine: {
show: false,
},
axisLabel: {
textStyle: { fontSize: '80%', color: '#02afff' },
},
axisLine: {
show: false,
},
axisTick: false,
},
series: [
{
type: 'bar',
barWidth: barWidth,
zlevel: 2,
data: data.map(function (item) {
return {
value: item,
maxNum: maxNum,
};
}),
label: {
show: true,
position: 'inside',
align: 'left',
formatter: function (params) {
var percent = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
return percent;
},
color: '#fff',
fontSize: 12,
},
itemStyle: {
borderRadius: 10,
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: '#395CFE' },
{ offset: 1, color: '#2EC7CF' },
]),
},
},
{
type: 'bar',
barWidth: barWidth,
barGap: '-100%',
data: data.map(function (item) {
return {
realValue: item,
value: maxNum,
};
}),
//label: {
// show: true,
// position: 'right',
// distance: 80,
// align: 'right',
// //formatter: function (params) {
// // return params.data.realValue + ' 件';
// //},
// color: '#02afff',
// fontSize: 18,
//},
itemStyle: {
borderRadius: 10,
color: 'rgba(3,169,244, 0.5)',
},
},
],
};
chart1.setOption(option);
</script>
<%--<script type="text/javascript">
function category_One(id, xArr, data) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
title: {
// left:'center',
text: '质量验收一次合格率 施工资料同步率',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize:16
},
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,
boundaryGap: [0, 0.01],
},
yAxis: {
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.8)'
},
formatter: function (value, index) {
return (value * 100) + "%";
}
}
},
series: data,
grid: {
top: '25%',
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 xArr = ["分包一", "分包二"]
var data = [
{
name: '质量一次性合格率',
type: 'bar',
data: [0.85, 0.82],
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
},
{
name: '施工资料同步率',
type: 'bar',
data: [0.69, 0.65],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
}
]
category_One('one', xArr, data)
</script>
<script type="text/javascript">
function category_Two(id, xArr, data) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
title: {
// left:'center',
text: '施工进度',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize:16
},
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,
boundaryGap: [0, 0.01],
},
yAxis: {
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.8)'
},
formatter: function (value, index) {
return (value * 100) + "%";
}
}
},
series: data,
grid: {
top: '25%',
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 xArr = ["分包一", "分包二", "分包三"]
var data = [
{
name: '计划值',
type: 'bar',
data: [0.23, 0.35, 0.42],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
},
{
name: '实际值',
type: 'bar',
data: [0.2, 0.28, 0.35],
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
},
{
name: '累计计划值',
type: 'line',
smooth: true,
data: [0.23, 0.58, 1],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
},
{
name: '累计实际值',
type: 'line',
smooth: true,
data: [0.2, 0.48, 0.83],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
}
]
category_Two('two', xArr, data)
</script>
<script type="text/javascript">
function category(id, xArr, data) {
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id))
// 指定图表的配置项和数据
var option = {
title: {
// left:'center',
text: '设计变更',
textStyle: {
color: '#fff',
fontWeight: 'normal',
fontSize:16
},
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: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255, 255, 255, 0.8)'
}
}
},
series: [{
name: '数量',
type: 'bar',
data: data
}],
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 xArr = ["主项1", "主项2", "主项3", "主项4", "主项5", "主项6"]
var data = [12, 5, 28, 43, 22, 11]
category('four', xArr, data)
</script>
<script>
function pie(id, data) {
var myChartPie = echarts.init(document.getElementById(id));
optionPie = {
title: {
text: '质量问题',
textStyle: {
// fontSize:14,
fontWeight: 'normal',
fontSize:16,
color: '#fff'
}
, left: 0
, top: 0
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
//legend: {
// show: false,
// data: ['已整改', '未整改'],
// color: ['#32A8FF', ' #02C800'],
// orient: 'vertical',
// x: 'right',
// y: 'top',
// textStyle: {
// color: ['#32A8FF', ' #02C800']
// }
//},
//graphic: {
// type: "text",
// left: "center",
// top: "center",
// style: {
// text: "进度80%",
// textAlign: "center",
// fill: "#fff",
// fontSize: 18,
// fontWeight: 700
// }
//},
series: [
{
name: '质量问题',
label: {
show: false
},
emphasis: {
label: {
show: true,
textStyle: {
// fontSize:14,
fontWeight: 'normal',
fontSize:16,
color: '#fff'
}
}
},
type: 'pie',
roseType: 'radius',
radius: [20, 160],
center: ['50%', '60%'],
// avoidLabelOverlap:false,
//color: ['#32A8FF', ' #02C800'],
data: data
}
]
};
//为echarts对象加载数据
myChartPie.setOption(optionPie);
}
var data = [{ value: 10, name: '分包一' },
{ value: 5, name: '分包二' },
{ value: 15, name: '分包三' },
{ value: 25, name: '分包四' },
{ value: 20, name: '分包五' },
{ value: 35, name: '分包六' }];
pie('three', data)
</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 == 1) {
var xArr = ["单位工程一", "单位工程二"]
var data = [
{
name: '质量一次性合格率',
type: 'bar',
data: [0.9, 0.85],
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
},
{
name: '施工资料同步率',
type: 'bar',
data: [0.75, 0.65],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
}
]
if (index == 0) {
xArr = ["分包一", "分包二"]
data = [
{
name: '质量一次性合格率',
type: 'bar',
data: [0.85, 0.82],
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
},
{
name: '施工资料同步率',
type: 'bar',
data: [0.69, 0.65],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
}
]
} else if (index == 4) {
xArr = ["建筑", "安装"]
data = [
{
name: '质量一次性合格率',
type: 'bar',
data: [0.83, 0.78],
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
},
{
name: '施工资料同步率',
type: 'bar',
data: [0.64, 0.61],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
}
]
}
category_One('one', xArr, data)
}
else if (value == 2) {
var xArr = ["分包一", "分包二", "分包三"]
var data = [
{
name: '计划值',
type: 'bar',
data: [0.23, 0.35, 0.42],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
},
{
name: '实际值',
type: 'bar',
data: [0.2, 0.28, 0.35],
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
},
{
name: '累计计划值',
type: 'line',
smooth: true,
data: [0.23, 0.58, 1],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
},
{
name: '累计实际值',
type: 'line',
smooth: true,
data: [0.2, 0.48, 0.83],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
}
]
if (index == 2) {
xArr = ["单位工程一", "单位工程二", "单位工程三"]
data = [
{
name: '计划值',
type: 'bar',
data: [0.20, 0.33, 0.47],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
},
{
name: '实际值',
type: 'bar',
data: [0.15, 0.25, 0.33],
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
},
{
name: '累计计划值',
type: 'line',
smooth: true,
data: [0.20, 0.53, 1],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
},
{
name: '累计实际值',
type: 'line',
smooth: true,
data: [0.15, 0.4, 0.73],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
}
]
}
else if (index == 4) {
xArr = ["建筑", "安装"]
data = [
{
name: '计划值',
type: 'bar',
data: [0.45, 0.55],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
},
{
name: '实际值',
type: 'bar',
data: [0.36, 0.43],
//itemStyle: { normal: { color: 'rgba(231,236,114,.9)' } }
},
{
name: '累计计划值',
type: 'line',
smooth: true,
data: [0.45, 1],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
},
{
name: '累计实际值',
type: 'line',
smooth: true,
data: [0.36, 0.79],
//itemStyle: { normal: { color: 'rgba(200,201,10, 1)' } }
}
]
}
category_Two('two', xArr, data)
}
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>
<script>
var mySwiper = new Swiper('#swiper1', {
autoplay: 3000,//可选选项,自动滑动
direction: 'vertical',
loop: true,
slidesPerView: 6
})
var mySwiper = new Swiper('#swiper2', {
autoplay: 4000,//可选选项,自动滑动
direction: 'vertical',
loop: true,
slidesPerView: 6
})
</script>--%>
</html>