604 lines
28 KiB
Plaintext
604 lines
28 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main.aspx.cs" Inherits="FineUIPro.Web.common.main" Async="true" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head runat="server">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script src="../res/lib/flex.js"></script>
|
|
<link rel="stylesheet" href="../res/homecss/common.css?v=202512" />
|
|
<link rel="stylesheet" href="../res/homecss/layout.css?v=202512" />
|
|
<link rel="stylesheet" href="../res/homecss/index.css?v=20251208" />
|
|
<%--<link rel="stylesheet" href="../res/homecss/safe.css?v=202512" />--%>
|
|
</head>
|
|
<body style="background-color: #001B35;">
|
|
<div id="app">
|
|
<div class="container bg1">
|
|
<div class="side">
|
|
<div class="site_500" style="height: 2.525rem; margin-bottom: 0.25rem">
|
|
<h2><span class="gradient_white_blue">历史上的今天</span></h2>
|
|
<div class="site_content" id="yearstoday">
|
|
<div class="scroll">
|
|
<ul>
|
|
<li class="tipli" v-for="(item, idx) in form.accidentWarning" :key="idx">
|
|
<p :title="item.Title">{{item.Title}}</p>
|
|
<span>{{item.AccidentDate}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site_500" style="height: 3.1rem; margin-bottom: 0.25rem">
|
|
<h2><span class="gradient_white_blue">教育培训</span></h2>
|
|
<div id="education" class="site_content">
|
|
<div class="ed-box flex_row_start_start">
|
|
<i></i>
|
|
<div class="ed-item">
|
|
<div class="ed-item-tit">公司级培训</div>
|
|
<div class="ed-item-num"><span>0</span><span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="ed-box flex_row_start_start">
|
|
<i></i>
|
|
<div class="ed-item">
|
|
<div class="ed-item-tit">项目级培训</div>
|
|
<div class="ed-item-num"><span>0</span><span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="ed-box flex_row_start_start">
|
|
<i></i>
|
|
<div class="ed-item">
|
|
<div class="ed-item-tit">班组级培训</div>
|
|
<div class="ed-item-num"><span>0</span><span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="ed-box flex_row_start_start">
|
|
<i></i>
|
|
<div class="ed-item">
|
|
<div class="ed-item-tit">自行培训</div>
|
|
<div class="ed-item-num"><span>0</span><span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="ed-box flex_row_start_start">
|
|
<i></i>
|
|
<div class="ed-item">
|
|
<div class="ed-item-tit">承包商组织培训</div>
|
|
<div class="ed-item-num"><span>0</span><span>个</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="ed-box flex_row_start_start">
|
|
<i></i>
|
|
<div class="ed-item">
|
|
<div class="ed-item-tit">承包商培训</div>
|
|
<div class="ed-item-num"><span>0</span><span>个</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site_500" style="height: 3.1rem; margin-bottom: 0.25rem">
|
|
<h2><span class="gradient_white_blue">安全隐患排查治理</span></h2>
|
|
<div id="safety1" class="site_content">
|
|
<div>
|
|
<h3 class="tit"><span>企业级检查</span></h3>
|
|
<div class="flex_column_start_start">
|
|
<div class="flex_row_between_center">
|
|
<p><span>安全隐患</span><span>0</span><span>项</span></p>
|
|
<p><span>未完成</span><span>0</span><span>项</span></p>
|
|
</div>
|
|
<div class="flex_row_between_center">
|
|
<p><span>整改闭环</span><span>0</span><span>项</span></p>
|
|
<p><span>整改率</span><span>0</span><span>%</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="tit"><span>项目级检查</span></h3>
|
|
<div class="flex_column_start_start">
|
|
<div class="flex_row_between_center">
|
|
<p><span>安全隐患</span><span>0</span><span>项</span></p>
|
|
<p><span>未完成</span><span>0</span><span>项</span></p>
|
|
</div>
|
|
<div class="flex_row_between_center">
|
|
<p><span>整改闭环</span><span>0</span><span>项</span></p>
|
|
<p><span>整改率</span><span>0</span><span>%</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site_500" style="height: 2.15rem; margin-bottom: 0.25rem">
|
|
<h2><span class="gradient_white_blue">安全费用</span></h2>
|
|
<div id="cost" class="site_content">
|
|
<h2>
|
|
<i></i>
|
|
<span>安全费用</span>
|
|
</h2>
|
|
<h2>
|
|
<i></i>
|
|
<span>施工机具设备</span>
|
|
</h2>
|
|
<div class="flex_row_between_center">
|
|
<span>费用提取</span>
|
|
<p>
|
|
<span class="gradient_white_yellow">0</span><span>亿元</span>
|
|
</p>
|
|
</div>
|
|
<div class="flex_row_between_center">
|
|
<span>费用使用</span>
|
|
<p>
|
|
<span class="gradient_white_yellow">0</span><span>亿元</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center" style="height: 100%">
|
|
<div class="aqsc">
|
|
<span>安全生产累计</span>
|
|
<p><span>{{form?.projectInfo?.workSafetyDay1000 || 0}}</span><span>{{form?.projectInfo?.workSafetyDay100 || 0}}</span><span>{{form?.projectInfo?.workSafetyDay10 || 0}}</span><span>{{form?.projectInfo?.workSafetyDay1 || 0}}</span></p>
|
|
<span>天</span>
|
|
</div>
|
|
<div id="project1" class="flex_row_between_center">
|
|
<div class="flex_row_center_center">
|
|
<i></i>
|
|
<div>
|
|
<h6 class="gradient_white_yellow">在建项目</h6>
|
|
<p><span class="gradient_white_yellow">{{form?.projectInfo?.projectsUnderConstruction || 0}}</span><span>个</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_row_center_center">
|
|
<i></i>
|
|
<div>
|
|
<h6 class="gradient_white_yellow">停工项目</h6>
|
|
<p><span class="gradient_white_yellow">{{form?.projectInfo?.shutdownProject || 0}}</span><span>个</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_row_center_center">
|
|
<i></i>
|
|
<div>
|
|
<h6 class="gradient_white_red">参建人数</h6>
|
|
<p><span class="gradient_white_yellow">{{form?.projectInfo?.participateInNum || 0}}</span><span>人</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_row_center_center">
|
|
<i></i>
|
|
<div>
|
|
<h6 class="gradient_white_red">在施危大工程</h6>
|
|
<p><span class="gradient_white_yellow">{{form?.projectInfo?.dangerousProject || 0}}</span><span>项</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="map"></div>
|
|
</div>
|
|
<div class="side">
|
|
<div class="site_500" style="height: 2.7rem; margin-bottom: 0.25rem">
|
|
<h2><span class="gradient_white_blue">待办</span></h2>
|
|
<div id="today" class="site_content">
|
|
<div class="scroll">
|
|
<ul>
|
|
<li>开发中，请耐心等待</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site_500" style="height: 2.275rem; margin-bottom: 0.25rem">
|
|
<h2><span class="gradient_white_blue">高风险作业许可</span></h2>
|
|
<div id="job" class="site_content">
|
|
<div class="flex_row_end_center">
|
|
<i></i>
|
|
<div class="flex_column_between_start">
|
|
<h6>许可</h6>
|
|
<p>
|
|
<span class="gradient_white_yellow">0</span><span>项</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<i></i>
|
|
<div class="flex_row_start_center">
|
|
<div class="flex_column_between_start">
|
|
<h6>关闭</h6>
|
|
<p>
|
|
<span class="gradient_white_blue">0</span><span>项</span>
|
|
</p>
|
|
</div>
|
|
<i></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site_500" style="height: 3.05rem; margin-bottom: 0.25rem">
|
|
<h2><span class="gradient_white_blue">风险分级管控</span></h2>
|
|
<div id="risk" class="site_content">
|
|
<div class="flex_row_center_center">
|
|
<i></i>
|
|
<div class="flex_column_between_start">
|
|
<h6>重大风险</h6>
|
|
<p><span>0</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_row_center_center">
|
|
<i></i>
|
|
<div class="flex_column_between_start">
|
|
<h6>较大风险</h6>
|
|
<p><span>0</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_row_center_center">
|
|
<i></i>
|
|
<div class="flex_column_between_start">
|
|
<h6>一般风险</h6>
|
|
<p><span>0</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex_row_center_center">
|
|
<i></i>
|
|
<div class="flex_column_between_start">
|
|
<h6>低风险</h6>
|
|
<p><span>0</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="site_500" style="height: 2.275rem; margin-bottom: 0.25rem">
|
|
<h2><span class="gradient_white_blue">高风险作业许可</span></h2>
|
|
<div id="job" class="site_content">
|
|
<div class="flex_row_end_center">
|
|
<i></i>
|
|
<div class="flex_column_between_start">
|
|
<h6>许可</h6>
|
|
<p>
|
|
<span class="gradient_white_yellow">0</span><span>项</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<i></i>
|
|
<div class="flex_row_start_center">
|
|
<div class="flex_column_between_start">
|
|
<h6>关闭</h6>
|
|
<p>
|
|
<span class="gradient_white_blue">0</span><span>项</span>
|
|
</p>
|
|
</div>
|
|
<i></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<svg class="loading" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;" width="60" height="60" viewBox="0 0 38 38" stroke="#ffffff">
|
|
<g fill="none" fill-rule="evenodd">
|
|
<g transform="translate(1 1)" stroke-width="2">
|
|
<circle stroke-opacity=".5" cx="18" cy="18" r="18" />
|
|
<path d="M36 18c0-9.94-8.06-18-18-18">
|
|
<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite" />
|
|
</path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</body>
|
|
|
|
</html>
|
|
<script src="../res/lib/vue.min.js?v=20251"></script>
|
|
<script src="../res/lib/echarts.min.js?v=20251"></script>
|
|
<script src="../res/lib/china1.js?v=20251"></script>
|
|
<script src="../res/lib/jquery.js?v=20251"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
iframeSrc: "",
|
|
// 控制显示状态
|
|
show: false,
|
|
// 当前激活的导航索引
|
|
nav_idx: 1,
|
|
// 当前激活的管理菜单索引
|
|
manage_idx: 1,
|
|
// 存储所有数据的主要对象
|
|
form: {},
|
|
// 当前时间显示
|
|
nowTime: '09:00:12',
|
|
chinaData: []
|
|
}
|
|
},
|
|
mounted() {
|
|
// 组件挂载后执行的操作
|
|
this.show = true; // 显示内容
|
|
hoverEvent();
|
|
this.createChinaMap();
|
|
this.loadData(); // 加载数据
|
|
// this.startTimer(); //启动时间定时器
|
|
},
|
|
methods: {
|
|
// 从后台加载HSSE数据
|
|
loadData() {
|
|
$(".loading").show()
|
|
const that = this;
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "main.aspx/GetMainData", //调用后台WebMethod
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType: "json",
|
|
success: function (response) {
|
|
//console.log("请求结果：", response.d)
|
|
if (response.d.success) {
|
|
// 更新数据成功
|
|
that.form = { ...response.d.data }; // 更新表单数据
|
|
that.chinaData = [...response.d.data.chinaData]; // 更新地图数据
|
|
//console.log("地图数据",that.chinaData);
|
|
that.createChinaMap(that.chinaData); // 重新创建地图
|
|
console.log("form", that.form)
|
|
} else {
|
|
// 更新数据失败
|
|
alert("加载数据失败：" + response.d.msg);
|
|
}
|
|
$(".loading").hide()
|
|
},
|
|
error: function (xhr, status, error) {
|
|
// AJAX请求错误处理
|
|
$(".loading").hide()
|
|
alert("请求失败：" + error);
|
|
}
|
|
});
|
|
},
|
|
//// 启动时间定时器，每秒更新一次当前时间
|
|
//startTimer() {
|
|
// setInterval(() => {
|
|
// const now = new Date();
|
|
// this.nowTime = now.toLocaleTimeString('zh-CN', {
|
|
// hour12: false, // 使用24小时制
|
|
// hour: '2-digit', // 两位数显示小时
|
|
// minute: '2-digit', // 两位数显示分钟
|
|
// second: '2-digit' // 两位数显示秒钟
|
|
// });
|
|
// }, 1000); // 1000毫秒 = 1秒
|
|
//},
|
|
//// 切换主导航菜单
|
|
//onSwitchMenu(idx) {
|
|
// this.nav_idx = idx; // 更新导航索引
|
|
//},
|
|
//// 切换管理菜单
|
|
//onSwitchManage(idx) {
|
|
// this.manage_idx = idx; // 更新管理菜单索引
|
|
//},
|
|
//// 刷新数据
|
|
//onRefresh() {
|
|
// this.loadData(); // 重新加载数据
|
|
//},
|
|
// 创建中国地图
|
|
createChinaMap(data) {
|
|
let list = data || [];
|
|
//console.log("地图数据", data);
|
|
if (!this.chainaMap) {
|
|
this.chainaMap = echarts.init(document.getElementById('map'));
|
|
}
|
|
// 中国地图配置
|
|
echarts.registerMap('china', chinaJson);
|
|
let chinaOption = {
|
|
geo: [
|
|
{
|
|
// 地理坐标系组件
|
|
map: "china",
|
|
roam: false, //可以缩放和平移
|
|
aspectScale: 0.85, //比例
|
|
top: 150,
|
|
zlevel: 2,
|
|
zoom: 1.1,
|
|
label: {
|
|
show: false
|
|
},
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
itemStyle: {
|
|
//隐藏地图
|
|
normal: {
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
}
|
|
},
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
// 图形上的地图区域
|
|
normal: {
|
|
areaColor: "#07121B",
|
|
borderColor: "#07121B",
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
}
|
|
},
|
|
{
|
|
// 地理坐标系组件
|
|
map: "china",
|
|
roam: false, // 可以缩放和平移
|
|
aspectScale: 0.85, // 比例
|
|
top: 140,
|
|
zlevel: 9,
|
|
zoom: 1.1,
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
normal: {
|
|
opacity: 0, // 为 0 时不绘制该图形
|
|
}
|
|
},
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
// 图形上的地图区域
|
|
normal: {
|
|
areaColor: "#076393",
|
|
borderColor: "#076393",
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
}
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
|
borderColor: '#fff',
|
|
borderWidth: 1,
|
|
padding: 10,
|
|
formatter: function (params) {
|
|
console.log("地图数据明细", params)
|
|
// 自定义 tooltip 内容
|
|
if (params.seriesType === 'effectScatter') {
|
|
return `<div style="color: white;">
|
|
<p><strong>${params.name}</strong></p>
|
|
<p>工程造价： ${params.data.projectMoney}万元</p>
|
|
<p>开工时间： ${params.data.startDate}</p>
|
|
<p>完工时间： ${params.data.endDate}</p>
|
|
<p>项目地址： ${params.data.address}</p>
|
|
</div>`;
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
// 地理坐标系组件
|
|
type: 'map',
|
|
map: "china",
|
|
roam: false, // 可以缩放和平移
|
|
aspectScale: 0.85, // 比例
|
|
top: 130,
|
|
zlevel: 12,
|
|
zoom: 1.1,
|
|
data: list,
|
|
regions: [
|
|
{
|
|
name: "南海诸岛",
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
itemStyle: {
|
|
// 图形上的地图区域
|
|
normal: {
|
|
borderWidth: 1,
|
|
areaColor: "rgba(0, 221, 255, .8)",
|
|
borderColor: "RGBA(27, 225, 255, 1)",
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
}
|
|
},
|
|
{
|
|
name: '散点',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
data: data,
|
|
zlevel: 14,
|
|
symbolSize: 10,
|
|
showEffectOn: 'render',
|
|
rippleEffect: {
|
|
brushType: 'stroke'
|
|
},
|
|
hoverAnimation: true,
|
|
label: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: '#FBE795'
|
|
}
|
|
}
|
|
],
|
|
}
|
|
this.chainaMap.setOption(chinaOption);
|
|
this.chainaMap.on('click', function (params) {
|
|
// 控制台打印点击的地区名称
|
|
//if (params.seriesType == 'effectScatter') {
|
|
// alert('点击了' + params.name);
|
|
//}
|
|
// 你可以在这里添加你的逻辑代码
|
|
});
|
|
},
|
|
}
|
|
})
|
|
|
|
function hoverEvent() {
|
|
$(".jshover").click(function (e) {
|
|
e.stopPropagation()
|
|
|
|
if ($(".popu").css("display") == "block") {
|
|
$(".popu").hide()
|
|
return
|
|
}
|
|
let type = this.getAttribute("data-type")
|
|
let iframe = $('iframe')
|
|
switch (type) {
|
|
case "1":
|
|
// 组织人员
|
|
// iframe.attr('src', '../DataShow/CompanyPerson.aspx')
|
|
window.open('../DataShow/CompanyPerson.aspx')
|
|
break
|
|
case "2":
|
|
// 教育培训/安全工时
|
|
// iframe.attr('src', '../DataShow/EduTrain.aspx')
|
|
window.open('../DataShow/EduTrain.aspx')
|
|
break
|
|
case "3":
|
|
// 安全隐患排查治理
|
|
// iframe.attr('src', '../DataShow/HiddenRectification.aspx')//一般隐患
|
|
window.open('../DataShow/HiddenRectification.aspx')
|
|
break
|
|
case "4":
|
|
// 费用及机具
|
|
// iframe.attr('src', '../DataShow/SecurityCost.aspx')
|
|
window.open('../DataShow/SecurityCost.aspx')
|
|
break
|
|
case "5":
|
|
// 危大工程管控数据
|
|
// iframe.attr('src', '../DataShow/LargeEngineering.aspx')
|
|
window.open('../DataShow/LargeEngineering.aspx')
|
|
break
|
|
case "6":
|
|
// 风险分级管控
|
|
// iframe.attr('src', '../DataShow/SecurityRisk.aspx')
|
|
window.open('../DataShow/SecurityRisk.aspx')
|
|
break
|
|
case "7":
|
|
// 高风险作业许可
|
|
// iframe.attr('src', '../DataShow/License.aspx')
|
|
window.open('../DataShow/License.aspx')
|
|
break
|
|
case "8":
|
|
// 应急管理数据
|
|
// iframe.attr('src', '../DataShow/Emergency.aspx')
|
|
window.open('../DataShow/Emergency.aspx')
|
|
break
|
|
}
|
|
// $("#hover").hide()
|
|
$(".popu").show()
|
|
})
|
|
$(".container").css({
|
|
position: "relative",
|
|
})
|
|
$(".container")
|
|
.click(function (e) {
|
|
$(".popu").hide()
|
|
})
|
|
}
|
|
|
|
</script>
|