550 lines
24 KiB
Plaintext
550 lines
24 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainNew.aspx.cs" Inherits="FineUIPro.Web.common.mainNew" %>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Document</title>
|
|
<script src="./lib/flex.js"></script>
|
|
<link rel="stylesheet" href="css/swiper-bundle.min.css"/>
|
|
<link rel="stylesheet" href="css/index.css"/>
|
|
</head>
|
|
<body>
|
|
<form id="form1" runat="server">
|
|
<div class="z-page">
|
|
<div class="z-main">
|
|
<div class="z-side">
|
|
<div class="z-s">
|
|
<div class="z-w">
|
|
<div class="z-lab">百万工时</div>
|
|
<div class="z-val" id="NumberBox1" runat="server">657.32</div>
|
|
</div>
|
|
</div>
|
|
<div class="z-s">
|
|
<div class="z-w">
|
|
<div class="z-lab">承包商数量</div>
|
|
<div class="z-val"><span id="NumberBox2" runat="server">0</span><span class="z-unit">个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="z-s">
|
|
<div class="z-w">
|
|
<div class="z-lab">作业人员</div>
|
|
<div class="z-val"><span id="NumberBox3" runat="server">0</span><span class="z-unit">人</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="z-s">
|
|
<div class="z-w">
|
|
<div class="z-lab">培训课时</div>
|
|
<div class="z-val"><span id="NumberBox4" runat="server">0</span><span class="z-unit">小时</span></div>
|
|
</div>
|
|
</div>
|
|
<%-- <div class="z-s">
|
|
<div class="z-w">
|
|
<div class="z-lab">特种作业（工作票）</div>
|
|
<div class="z-val"><span id="NumberBox5" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
</div>--%>
|
|
<div class="z-s">
|
|
<div class="z-w">
|
|
<div class="z-lab">高危作业</div>
|
|
<div class="z-val"><span id="NumberBox6" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="z-s1">
|
|
<div class="z-w1">
|
|
<div class="z-lab">项目停工</div>
|
|
<div class="z-val"><span id="NumberBox7" runat="server">0</span><span class="z-unit">次</span></div>
|
|
</div>
|
|
<div class="z-s-box">
|
|
<div class="z_box">
|
|
<div class="z-b-lab">天气原因</div>
|
|
<div class="z-b-val"><span id="NumberBox8" runat="server">0</span> <span class="z-unit">次</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">天气原因</div>
|
|
<div class="z-b-val"><span id="NumberBox9" runat="server">0</span> <span class="z-unit">次</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">天气原因</div>
|
|
<div class="z-b-val"><span id="NumberBox10" runat="server">0</span> <span class="z-unit">次</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--<div class="z-s1">
|
|
<div class="z-w1">
|
|
<div class="z-lab">项目总数</div>
|
|
<div class="z-val"><span id="NumberBox11" runat="server">0</span><span class="z-unit">个</span></div>
|
|
</div>
|
|
<div class="z-s-box">
|
|
<div class="z_box">
|
|
<div class="z-b-lab">A级</div>
|
|
<div class="z-b-val"><span id="NumberBox12" runat="server">0</span> <span class="z-unit">个</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">B级</div>
|
|
<div class="z-b-val"><span id="NumberBox13" runat="server">0</span> <span class="z-unit">个</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">C级</div>
|
|
<div class="z-b-val"><span id="NumberBox14" runat="server">0</span> <span class="z-unit">个</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>--%>
|
|
<div class="z-s1">
|
|
<div class="z-w1">
|
|
<div class="z-lab">安全费用</div>
|
|
<div class="z-val"><span id="NumberBox15" runat="server">0</span><span class="z-unit">万元</span></div>
|
|
</div>
|
|
<div class="z-s-box">
|
|
<div class="z_box">
|
|
<div class="z-b-lab">已使用</div>
|
|
<div class="z-b-val"><span id="NumberBox16" runat="server">0</span> <span class="z-unit">万元</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">未归集</div>
|
|
<div class="z-b-val"><span id="NumberBox17" runat="server">0</span> <span class="z-unit">万元</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="z-s2">
|
|
<div class="z-w1">
|
|
<div class="z-lab">应急演练</div>
|
|
<div class="z-val"><span id="NumberBox18" runat="server">0</span><span class="z-unit">次</span></div>
|
|
</div>
|
|
<div class="z-w1">
|
|
<div class="z-lab">应急物品</div>
|
|
<div class="z-val"><span id="NumberBox19" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
<div class="z-w1">
|
|
<div class="z-lab">应急药品</div>
|
|
<div class="z-val"><span id="NumberBox20" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="z-s4" style="margin-top:20px">
|
|
<div class="z-w1">
|
|
<div class="z-lab">领导个人行动计划</div>
|
|
<div class="z-val"><span id="NumberBox39" runat="server">0</span><span class="z-unit">次</span></div>
|
|
</div>
|
|
<div class="z-w1">
|
|
<div class="z-lab">安全行为观察与沟通</div>
|
|
<div class="z-val"><span id="NumberBox40" runat="server">0</span><span class="z-unit">次</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="z-center">
|
|
<div class="z-p">
|
|
<div class="z-p-b">
|
|
<div class="z-pb-val"><span id="divProjectNum" runat="server">0</span> <span class="z-unit">个</span> </div>
|
|
<div class="z-pb-lab">在建项目</div>
|
|
</div>
|
|
<div class="z-p-b">
|
|
<div class="z-pb-val"><span id="divJoinConstructionPersonNum" runat="server">0</span> <span class="z-unit">个</span> </div>
|
|
<div class="z-pb-lab">参建人数</div>
|
|
</div>
|
|
</div>
|
|
<div class="z-map">
|
|
<div id="cMap"></div>
|
|
</div>
|
|
<div id="zhuimap"></div>
|
|
</div>
|
|
<div class="z-side">
|
|
<div class="z-s1">
|
|
<div class="z-w1">
|
|
<div class="z-lab">危害因素</div>
|
|
<div class="z-val"><span id="NumberBox21" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
<div class="z-s-box">
|
|
<div class="z_box">
|
|
<div class="z-b-lab">低风险</div>
|
|
<div class="z-b-val"><span id="NumberBox41" runat="server">0</span> <span class="z-unit">项</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">一般风险</div>
|
|
<div class="z-b-val"><span id="NumberBox23" runat="server">0</span> <span class="z-unit">项</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">较大风险</div>
|
|
<div class="z-b-val"><span id="NumberBox42" runat="server">0</span> <span class="z-unit">项</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">重大风险</div>
|
|
<div class="z-b-val"><span id="NumberBox22" runat="server">0</span> <span class="z-unit">项</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="z-s3">
|
|
<div class="z-c">
|
|
<div class="z-w3">
|
|
<div class="z-w3_lab">质量问题</div>
|
|
<div class="z-w3_val"><span id="NumberBox24" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
<div class="z-l"></div>
|
|
<div class="z-w3">
|
|
<div class="z-w3_lab">已整改</div>
|
|
<div class="z-w3_val"><span id="NumberBox25" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="z-c">
|
|
<div class="z-w3">
|
|
<div class="z-w3_lab">安全问题</div>
|
|
<div class="z-w3_val"><span id="NumberBox26" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
<div class="z-l"></div>
|
|
<div class="z-w3">
|
|
<div class="z-w3_lab">已整改</div>
|
|
<div class="z-w3_val"><span id="NumberBox27" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="z-w1">
|
|
<div class="z-lab">项目停工</div>
|
|
<div class="z-val"><span id="NumberBox28" runat="server">0</span><span class="z-unit">个</span></div>
|
|
</div>
|
|
<div class="z-s-box">
|
|
<div class="z_box">
|
|
<div class="z-b-lab">管控红线问题</div>
|
|
<div class="z-b-val"><span id="NumberBox29" runat="server">0</span> <span class="z-unit">项</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">较大隐患及停工项问题</div>
|
|
<div class="z-b-val"><span id="NumberBox30" runat="server">0</span> <span class="z-unit">项</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="z-s2" style=" margin-bottom: .325rem;">
|
|
<div class="z-w1">
|
|
<div class="z-lab">特种设备/日检查</div>
|
|
<div class="z-val"><span id="NumberBox31" runat="server">0</span><span class="z-unit">次</span></div>
|
|
</div>
|
|
<div class="z-w1">
|
|
<div class="z-lab">特种设备/周排查</div>
|
|
<div class="z-val"><span id="NumberBox32" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
<div class="z-w1">
|
|
<div class="z-lab">特种设备/月调度情况</div>
|
|
<div class="z-val"><span id="NumberBox33" runat="server">0</span><span class="z-unit">项</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="z-s1">
|
|
<div class="z-w1">
|
|
<div class="z-lab">参与五星计划</div>
|
|
<div class="z-val"><span id="NumberBox34" runat="server">0</span><span class="z-unit">人次</span></div>
|
|
</div>
|
|
<div class="z-s-box">
|
|
<div class="z_box">
|
|
<div class="z-b-lab">五星</div>
|
|
<div class="z-b-val"><span id="NumberBox35" runat="server">0</span> <span class="z-unit">人</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">四星</div>
|
|
<div class="z-b-val"><span id="NumberBox36" runat="server">0</span> <span class="z-unit">人</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">三星</div>
|
|
<div class="z-b-val"><span id="NumberBox37" runat="server">0</span> <span class="z-unit">人</span> </div>
|
|
</div>
|
|
<div class="z_box">
|
|
<div class="z-b-lab">二星</div>
|
|
<div class="z-b-val"><span id="NumberBox38" runat="server">0</span> <span class="z-unit">人</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="z-s4">
|
|
<div class="z-w1">
|
|
<div class="z-lab">一般隐患</div>
|
|
<div class="z-val"><span id="NumberBox43" runat="server">0</span><span class="z-unit">次</span></div>
|
|
</div>
|
|
<div class="z-w1">
|
|
<div class="z-lab">较大隐患</div>
|
|
<div class="z-val"><span id="NumberBox44" runat="server">0</span><span class="z-unit">次</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="z-b">
|
|
<div class="z-tit">HSE监管片区责任和网格化管理情况</div>
|
|
<div class="z-imgb">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper" id="swiper_div" runat="server">
|
|
<%-- <div class="swiper-slide">
|
|
<img src="images/m06.png"/>
|
|
</div>--%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</body>
|
|
</html>
|
|
<script src="lib/swiper-bundle.min.js"></script>
|
|
<script src="lib/china1.js"></script>
|
|
<script src="lib/echarts.min.js"></script>
|
|
<script>
|
|
var mySwiper = new Swiper('.swiper', {
|
|
autoplay: true,//可选选项，自动滑动
|
|
})
|
|
|
|
createChinaMap()
|
|
function createChinaMap() {
|
|
// 地图 点
|
|
var chinaData = JSON.parse('<%=ProjectInfo %>')
|
|
// 中国地图 配置
|
|
let chinaOption = {
|
|
tooltip: { show: false },
|
|
geo: [
|
|
{
|
|
// 地理坐标系组件
|
|
map: "china",
|
|
roam: false, // 可以缩放和平移
|
|
aspectScale: 0.75, // 比例
|
|
top: 140,
|
|
zlevel: 2,
|
|
zoom: 1.4,
|
|
tooltip: {
|
|
show: true,
|
|
backgroundColor: "#4CB0DD",
|
|
borderColor: 'rgba(0, 0, 0, 0.2)',
|
|
formatter: function (h) {
|
|
console.log(h)
|
|
let html = `<div style="z-index:99999999;color: #ffffff;">
|
|
<p>`+ h.name.split("@")[0] + `</p>
|
|
</div>`
|
|
return html
|
|
},
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
normal: {
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
}
|
|
},
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
// 图形上的地图区域
|
|
normal: {
|
|
areaColor: "#062539",
|
|
borderColor: "#07121B",
|
|
}
|
|
},
|
|
|
|
emphasis: {
|
|
disabled: true,
|
|
}
|
|
|
|
},
|
|
{
|
|
// 地理坐标系组件
|
|
map: "china",
|
|
roam: false, // 可以缩放和平移
|
|
aspectScale: 0.75, // 比例
|
|
top: 130,
|
|
zlevel: 9,
|
|
zoom: 1.4,
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
normal: {
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
}
|
|
},
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
// 图形上的地图区域
|
|
normal: {
|
|
areaColor: "#0576B3",
|
|
borderColor: "#076393",
|
|
}
|
|
},
|
|
|
|
emphasis: {
|
|
disabled: true,
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
// 地理坐标系组件
|
|
map: "china",
|
|
roam: false, // 可以缩放和平移
|
|
aspectScale: 0.75, // 比例
|
|
top: 120,
|
|
zlevel: 12,
|
|
zoom: 1.4,
|
|
label: {
|
|
color: "#ffffff",
|
|
show: true
|
|
},
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
// 图形上的地图区域
|
|
normal: {
|
|
borderWidth: 1,
|
|
areaColor: "#0E6492",
|
|
borderColor: "#45A8DB",
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
}
|
|
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
id: 'isSkip',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
symbolSize: 10,
|
|
zlevel: 100,
|
|
selectedMode: true,
|
|
select: {
|
|
disabled: true,
|
|
label: true,
|
|
},
|
|
itemStyle: {
|
|
color: "#FDFF04"
|
|
},
|
|
rippleEffect: {
|
|
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
},
|
|
data: chinaData,
|
|
}],
|
|
|
|
}
|
|
echarts.registerMap('china', chinaJson);
|
|
let chinaChart = echarts.init(document.getElementById('cMap'));
|
|
chinaChart.setOption(chinaOption);
|
|
|
|
window.addEventListener("resize", function () {
|
|
chinaChart.resize(); //myChart指自己定义的echartsDom对象
|
|
});
|
|
|
|
chinaChart.on('click', function (params) {
|
|
// 控制台打印点击的地区名称
|
|
//if (params.seriesType == 'effectScatter') {
|
|
// alert('点击了' + params.name);
|
|
//}
|
|
if (params.seriesType == "effectScatter") {
|
|
var gotoUrl = params.name.split("@")[1] || 'indexProject.aspx'
|
|
top.window.location.href = '../' + gotoUrl
|
|
}
|
|
// 你可以在这里添加你的逻辑代码
|
|
});
|
|
|
|
//chinaChart.on('click', function (params) {
|
|
// // 控制台打印点击的地区名称
|
|
// if (params.seriesType == 'effectScatter') {
|
|
// /*alert('点击了' + params.name);*/
|
|
// }
|
|
// // 你可以在这里添加你的逻辑代码
|
|
//});
|
|
|
|
}
|
|
// 重置大小
|
|
function resetSize(size, initWidth = 1920) {
|
|
let clientWidth = document.body.clientWidth
|
|
return size * (clientWidth / initWidth)
|
|
}
|
|
|
|
createZHUIMap()
|
|
function createZHUIMap() {
|
|
|
|
let data = [
|
|
{ val: 1, value: 1, name: '重大故障' }, // value 控制漏斗图的占比 不动
|
|
{ val: 29, value: 2, name: '故障' },
|
|
{ val: 300, value: 3, name: '(Trouble)' },
|
|
]
|
|
|
|
var chartDom = document.getElementById('zhuimap');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
title: {
|
|
bottom: '10%',
|
|
left: 'center',
|
|
text: `(${data[2].val}:${data[1].val}:${data[0].val})`,
|
|
textStyle: {
|
|
fontSize: resetSize(14),
|
|
color: '#ffffff'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Funnel',
|
|
type: 'funnel',
|
|
left: '10%',
|
|
top: '15%',
|
|
width: '80%',
|
|
height: '60%',
|
|
minSize: '0%',
|
|
maxSize: '100%',
|
|
sort: 'ascending',
|
|
gap: 0,
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
fontSize: resetSize(10),
|
|
color: '#ffffff',
|
|
formatter: (h) => {
|
|
let data = h.data
|
|
return `${data.val}次\n${data.name}`
|
|
|
|
}
|
|
},
|
|
labelLine: {
|
|
length: 10,
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#fff',
|
|
borderWidth: 0,
|
|
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
fontSize: resetSize(10)
|
|
}
|
|
},
|
|
data
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
}
|
|
</script>
|