774 lines
25 KiB
Plaintext
774 lines
25 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mains.aspx.cs" Inherits="FineUIPro.Web.common.mains" %>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title></title>
|
|
<link href="../res/css/indexv1.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
<script src="../res/lib/flexlib.js"></script>
|
|
<form id="form1" runat="server">
|
|
|
|
|
|
|
|
<!-- 导航 1 -->
|
|
<div id="wrap">
|
|
<div class="side_left">
|
|
<!-- 人员统计 0 -->
|
|
<div class="plate">
|
|
<div class="plate-title">人员统计</div>
|
|
<div class="people">
|
|
<div class="people-nums">
|
|
<div class="people-nums_dot">
|
|
<div class="label">管理人员</div>
|
|
<div class="val" runat="server" id="divGLPerson">0<span>个</span></div>
|
|
</div>
|
|
<div class="people-nums_dot" style="margin-top:2.8947rem;">
|
|
<div class="label">作业人员</div>
|
|
<div class="val" id="divZYPerson" runat="server">0<span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="people-map">
|
|
<div id="onGuardMap"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 人员统计 1 -->
|
|
|
|
<!-- 风险管控 0 -->
|
|
<div class="plate">
|
|
<div class="plate-title">风险管控</div>
|
|
<div class="risk">
|
|
<div id="riskMap"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 风险管控 1 -->
|
|
<!-- 作业许可统计 0 -->
|
|
<div class="plate">
|
|
<div class="plate-title">作业许可统计</div>
|
|
<div class="jobLicensesMap">
|
|
<div id="jobLicensesMap"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 作业许可统计 1 -->
|
|
</div>
|
|
<div class="side_center">
|
|
<div class="plate1">
|
|
<div class="item">
|
|
<div class="item-label"></div>
|
|
<div class="item-label">在建项目(个)</div>
|
|
<div class="item-num" runat="server" id="divProjectNum"></div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-label">年度累计</div>
|
|
<div class="item-label">承接施工产值(亿元)</div>
|
|
<div class="item-num" runat="server" id="divYearPlanOutPutValue" >--</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-label">年度累计</div>
|
|
<div class="item-label">施工实际产值(亿元)</div>
|
|
<div class="item-num" runat="server" id="divYearActualOutPutValue">--</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-label">年度累计</div>
|
|
<div class="item-label">签订合同额(亿元)</div>
|
|
<div class="item-num" runat="server" id="divHTAmount">0</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-label">年度累计</div>
|
|
<div class="item-label">施工分包合同(个)</div>
|
|
<div class="item-num" runat="server" id="divHTNum"> </div>
|
|
</div>
|
|
</div>
|
|
<div class="plate2">
|
|
<div class="changMap imgbg"><b>中国地图</b> <span class="imgbg"></span></div>
|
|
<div class="map">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="side_right">
|
|
<div class="plate">
|
|
<div class="plate-title">安全统计</div>
|
|
<div class="safe">
|
|
<div class="safe-label">安全人工时</div>
|
|
<div class="safe-num" id="divSafeWorkTime" runat="server">00000000000</div>
|
|
<div class="safe-boxs">
|
|
<div class="safe-box">
|
|
<div class="safe-box_label" runat="server" id="divAllRectify">0<span>个</span></div>
|
|
<div class="safe-box_val">问题总数</div>
|
|
</div>
|
|
<div class="safe-box">
|
|
<div class="safe-box_label orange" id="divRectifyRate" runat="server">0<span>%</span></div>
|
|
<div class="safe-box_val">整改率</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plate">
|
|
<div class="plate-title">安全隐患分析</div>
|
|
<div class="safetyAnalysisMap">
|
|
<div id="safetyAnalysisMap"></div>
|
|
</div>
|
|
</div>
|
|
<div class="plate">
|
|
<div class="plate-title">质量统计</div>
|
|
<div class="quality">
|
|
<div class="quality-top">
|
|
<div class="quality-top_label">问题总数</div>
|
|
<div class="quality-top_val" id="divCQMSAllNum" runat="server">0<span>个</span></div>
|
|
</div>
|
|
<div class="qualityMap">
|
|
<div id="qualityMap1"></div>
|
|
<div id="qualityMap2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</body>
|
|
</html>
|
|
<script src="../res/lib/echarts.min.js"></script>
|
|
<script src="../res/lib/china.js"></script>
|
|
<script src="../res/lib/world.js"></script>
|
|
<script src="../res/js/optionV1.js"></script>
|
|
<script src="../res/lib/jquery.js"></script>
|
|
<script>
|
|
|
|
|
|
// 在岗率数据配置
|
|
let guardData1 = [
|
|
{
|
|
value: <%=OnDutyRate%>,
|
|
name: '在岗率',
|
|
title: {
|
|
color: '#12CDA2',
|
|
offsetCenter: ['0%', '20%'],
|
|
fontSize: 0.6316 * basePx
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: ['0%', '-10%'],
|
|
}
|
|
}
|
|
];
|
|
let guardOption1 = {
|
|
series: [
|
|
{
|
|
id: '在岗率',
|
|
radius: '99%',
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
progress: {
|
|
show: true,
|
|
overlap: false,
|
|
roundCap: false,
|
|
clip: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 1.0526 * basePx,
|
|
color: [[1, '#071646']],
|
|
shadowColor: '#1C466C',
|
|
shadowBlur: 2,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: '#0FD09C',
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
distance: 0,
|
|
length: 0.5263 * basePx
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
data: guardData1,
|
|
detail: {
|
|
offsetCenter: ['0%', '120%'],
|
|
fontSize: 1.0526 * basePx,
|
|
color: '#12CDA2',
|
|
formatter: '{value}{a|%}',
|
|
rich: {
|
|
a: {
|
|
fontSize: 0.4211 * basePx,
|
|
color: '#1AB1FF'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
// 人员统计 在岗率初始化
|
|
var guardMap = echarts.init(document.getElementById('onGuardMap'));
|
|
guardMap.setOption(guardOption1)
|
|
|
|
// 风险管理初始化
|
|
|
|
|
|
// 风险管控
|
|
let riskData1 = [
|
|
{ value: <%=riskData4%>, name: '四级/重大风险', label: { color: '#FF7473' }, itemStyle: { color: '#FF7473' }, labelLine: { lineStyle: { color: '#FF7473' } } },
|
|
{ value: <%=riskData1%>, name: '一级/低风险', label: { color: '#5C5AFF' }, itemStyle: { color: '#5C5AFF' }, labelLine: { lineStyle: { color: '#5C5AFF' } } },
|
|
{ value: <%=riskData2%>, name: '三级/较大风险', label: { color: '#FFA502' }, itemStyle: { color: '#FFA502' }, labelLine: { lineStyle: { color: '#FFA502' } } },
|
|
{ value: <%=riskData3%>, name: '二级/一般风险', label: { color: '#E7EA2E' }, itemStyle: { color: '#E7EA2E' }, labelLine: { lineStyle: { color: '#E7EA2E' } } },
|
|
]
|
|
let riskOption1 = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['20%', '60%'],
|
|
center: ['50%', '50%'],
|
|
label: {
|
|
formatter: '{b}\n{c}'
|
|
},
|
|
data: riskData1.sort(function (a, b) {
|
|
return a.value - b.value;
|
|
}),
|
|
roseType: 'radius',
|
|
|
|
animationType: 'scale',
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function (idx) {
|
|
return Math.random() * 200;
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
var riskMap = echarts.init(document.getElementById('riskMap'));
|
|
riskMap.setOption(riskOption1)
|
|
|
|
// 作业许可统计
|
|
|
|
|
|
// 作业许可统计
|
|
|
|
var license =<%=License %>;
|
|
let yMax1 = 500;
|
|
let dataShadow1 = [];
|
|
for (let i = 0; i < data.length; i++) {
|
|
dataShadow1.push(yMax1);
|
|
}
|
|
let jobOption1 = {
|
|
grid: {
|
|
top: 1.3158 * basePx,
|
|
left: 3.6842 * basePx,
|
|
height: '85%',
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
data: license.categories,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
triggerEvent: true,
|
|
axisLabel: {
|
|
color: '#7ECEF7',
|
|
width: 2.6316 * basePx,
|
|
overflow: 'truncate',
|
|
align: 'right',
|
|
},
|
|
},
|
|
{
|
|
data: data,
|
|
position: 'left',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: true,
|
|
fontSize: 0.5263 * basePx,
|
|
color: '#ffffff'
|
|
},
|
|
z: 0.5263 * basePx
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: '#091F60',
|
|
borderRadius: 0.2632 * basePx,
|
|
},
|
|
barWidth: 0.5263 * basePx,
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{ offset: 0, color: '#12CDA2' },
|
|
{ offset: 1, color: '#091F60' }
|
|
]),
|
|
barBorderRadius: [0.2632 * basePx, 0.2632 * basePx, 0.2632 * basePx, 0.2632 * basePx]
|
|
},
|
|
data: license.series[0].data
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
var jobLicensesMap = echarts.init(document.getElementById('jobLicensesMap'));
|
|
jobLicensesMap.setOption(jobOption1)
|
|
|
|
// 安全隐患分析
|
|
|
|
|
|
var safeHiddenDanger = JSON.parse('<%=SafeHiddenDanger %>')
|
|
let xdatay = safeHiddenDanger.legend
|
|
let data1y = safeHiddenDanger.series[0].data
|
|
let safetyAnalysisOption1 = {
|
|
grid: {
|
|
left: 2.1053 * basePx,
|
|
right: '3%',
|
|
bottom: 1.0526 * basePx,
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
data: xdatay,
|
|
triggerEvent: true,
|
|
axisTick: {
|
|
// 刻度线
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
rotate: -30,
|
|
interval: 0,
|
|
width: 3.1579 * basePx,
|
|
overflow: 'truncate',
|
|
textStyle: {
|
|
color: '#00BEFF',
|
|
fontSize: 0.6316 * basePx
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#0D3C65'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// y轴线
|
|
show: true,
|
|
textStyle: {
|
|
color: '#00BEFF',
|
|
fontSize: 0.6316 * basePx
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'hill',
|
|
type: 'pictorialBar',
|
|
barWidth: 1.5789 * basePx,
|
|
symbol:
|
|
'triangle',
|
|
itemStyle: {
|
|
normal: {
|
|
// 渐变色
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#00FEFF'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#4390FA'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: data1y,
|
|
z: 10
|
|
},
|
|
]
|
|
}
|
|
|
|
var safetyAnalysisMap = echarts.init(document.getElementById('safetyAnalysisMap'));
|
|
safetyAnalysisMap.setOption(safetyAnalysisOption1)
|
|
|
|
|
|
|
|
|
|
|
|
// 质量统计
|
|
|
|
const quality1Data1 = [
|
|
{
|
|
value: <%=CRectificationRate%>,
|
|
name: '整改率',
|
|
title: {
|
|
color: '#1AB1FF',
|
|
offsetCenter: ['0%', '125%'],
|
|
fontSize: 0.6316 * basePx
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: ['0%', '10%'],
|
|
}
|
|
}
|
|
];
|
|
let quality1ption1 = {
|
|
series: [
|
|
{
|
|
id: '整改率',
|
|
radius: '75%',
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
pointer: {
|
|
show: false
|
|
},
|
|
progress: {
|
|
show: true,
|
|
overlap: false,
|
|
roundCap: false,
|
|
clip: false,
|
|
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 0.5263 * basePx,
|
|
color: [[1, '#0F2164']]
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: '#FFB260',
|
|
borderRadius: 0
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
distance: 0,
|
|
length: 0.5263 * basePx
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
data: quality1Data1,
|
|
detail: {
|
|
fontSize: 0.7368 * basePx,
|
|
color: '#FFB260',
|
|
formatter: '{value}{a|%}',
|
|
rich: {
|
|
a: {
|
|
fontSize: 0.4211 * basePx,
|
|
color: '#1AB1FF'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
const quality2Data2 = [
|
|
{
|
|
value:<%=CQualifiedRate%>,
|
|
name: '合格率',
|
|
title: {
|
|
color: '#1AB1FF',
|
|
offsetCenter: ['0%', '125%'],
|
|
fontSize: 0.6316 * basePx
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: ['0%', '10%'],
|
|
}
|
|
}
|
|
];
|
|
let quality2ption2 = {
|
|
series: [
|
|
{
|
|
id: '合格率',
|
|
radius: '70%',
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
pointer: {
|
|
show: false
|
|
},
|
|
progress: {
|
|
show: true,
|
|
overlap: false,
|
|
roundCap: false,
|
|
clip: false,
|
|
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 0.5263 * basePx,
|
|
color: [[1, '#0F2164']]
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: '#12CDA2',
|
|
borderRadius: 0
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
distance: 0,
|
|
length: 0.5263 * basePx
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
data: quality2Data2,
|
|
detail: {
|
|
fontSize: 0.7368 * basePx,
|
|
color: '#12CDA2',
|
|
formatter: '{value}{a|%}',
|
|
rich: {
|
|
a: {
|
|
fontSize: 0.4211 * basePx,
|
|
color: '#1AB1FF'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
|
|
|
|
var qualityMap1 = echarts.init(document.getElementById('qualityMap1'));
|
|
qualityMap1.setOption(quality1ption1)
|
|
var qualityMap2 = echarts.init(document.getElementById('qualityMap2'));
|
|
qualityMap2.setOption(quality2ption2)
|
|
</script>
|
|
<script>
|
|
|
|
|
|
var mapProjectPoint = JSON.parse('<%=ProjectInfo %>')
|
|
// 地图
|
|
let chinaData1 = [
|
|
{
|
|
name: '合肥',
|
|
value: [117.27, 31.86, 55]
|
|
},
|
|
{
|
|
name: '北京',
|
|
value: [116.40, 39.90, 110]
|
|
},
|
|
{
|
|
name: '重庆',
|
|
value: [106.55, 29.56, 32]
|
|
}
|
|
]
|
|
let chinaOption1 = {
|
|
geo: [
|
|
{
|
|
// 地理坐标系组件
|
|
map: "china",
|
|
roam: false, // 可以缩放和平移
|
|
aspectScale: 0.75, // 比例
|
|
top: 6.3158 * basePx,
|
|
zlevel: 1,
|
|
zoom: 1.4,
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
normal: {
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
}
|
|
},
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
// 图形上的地图区域
|
|
normal: {
|
|
areaColor: "#1B3885",
|
|
}
|
|
},
|
|
|
|
emphasis: {
|
|
disabled: true,
|
|
}
|
|
|
|
},
|
|
{
|
|
// 地理坐标系组件
|
|
map: "china",
|
|
roam: false, // 可以缩放和平移
|
|
aspectScale: 0.75, // 比例
|
|
top: 6.3158 * basePx,
|
|
zlevel: 10,
|
|
zoom: 1.4,
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
normal: {
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
}
|
|
},
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
// 图形上的地图区域
|
|
normal: {
|
|
borderWidth: 0.1053 * basePx,
|
|
areaColor: "#214DA9",
|
|
borderColor: "#2FA1D7",
|
|
// shadowBlur: 20,
|
|
// shadowOffsetY:10,
|
|
// shadowOffsetX:10,
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
itemStyle: {
|
|
areaColor: 'red',
|
|
}
|
|
}
|
|
|
|
},
|
|
],
|
|
series: [{
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
symbolSize: 1.0526 * basePx,
|
|
zlevel: 100,
|
|
itemStyle: {
|
|
color: "#FDFF04"
|
|
},
|
|
rippleEffect: {
|
|
|
|
},
|
|
data: mapProjectPoint,
|
|
}],
|
|
|
|
}
|
|
|
|
|
|
|
|
// 地图
|
|
echarts.registerMap('china', chinaJson);
|
|
var chart = echarts.init(document.getElementById('map'));
|
|
chart.setOption(chinaOption1);
|
|
// 世界地图跳转事件
|
|
chart.on('click', function (params) {
|
|
console.log(params);
|
|
if (params.seriesId && params.seriesId == 'isSkip') {
|
|
// isFullScreen 判单是不是全屏保证当进入项目时也是全屏状态
|
|
location.href = './indexv2.html'
|
|
}
|
|
});
|
|
// 切换地图的事件
|
|
$('.changMap').click(function () {
|
|
let val = $('.changMap>b').text()
|
|
if (val == '中国地图') {
|
|
echarts.registerMap('word', wordJson);
|
|
chart.setOption(wordOption);
|
|
$('.changMap>b').text('世界地图')
|
|
} else {
|
|
echarts.registerMap('china', chinaJson);
|
|
chart.setOption(chinaOption);
|
|
$('.changMap>b').text('中国地图')
|
|
}
|
|
|
|
})
|
|
|
|
|
|
// 切换全屏
|
|
$('.magnify').click(function () {
|
|
const element = document.documentElement
|
|
if (document.fullscreenElement) {
|
|
// 如果浏览器有这个Function
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen()
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen()
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen()
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen()
|
|
}
|
|
} else {
|
|
// 如果浏览器有这个Function
|
|
if (element.requestFullscreen) {
|
|
element.requestFullscreen()
|
|
} else if (element.webkitRequestFullScreen) {
|
|
element.webkitRequestFullScreen()
|
|
} else if (element.mozRequestFullScreen) {
|
|
element.mozRequestFullScreen()
|
|
} else if (element.msRequestFullscreen) {
|
|
element.msRequestFullscreen()
|
|
}
|
|
}
|
|
|
|
})
|
|
// 监听全屏变化
|
|
window.onresize = function () {
|
|
if (document.fullscreenElement) {
|
|
$('.nav-site_right').hide();
|
|
$('.nav-site_left').hide();
|
|
$('.magnify').text('退出全屏');
|
|
} else {
|
|
$('.nav-site_right').show();
|
|
$('.nav-site_left').show();
|
|
$('.magnify').text('全屏');
|
|
}
|
|
}
|
|
</script> |