数据大屏优化
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
<script src="../res/lib/flex.js"></script>
|
||||
<link rel="stylesheet" href="../res/homecss/common.css?v=202603" />
|
||||
<link rel="stylesheet" href="../res/homecss/layout.css?v=202603" />
|
||||
<link rel="stylesheet" href="../res/homecss/index.css?v=202604" />
|
||||
<link rel="stylesheet" href="../res/homecss/index.css?v=202609" />
|
||||
<%--<link rel="stylesheet" href="../res/homecss/safe.css?v=202603" />--%>
|
||||
</head>
|
||||
<body style="background-color: #001B35;">
|
||||
@@ -170,7 +170,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%--<div id="map"></div>--%>
|
||||
<div class="map">
|
||||
<div id="map"></div>
|
||||
<div class="change-map" @click="handleChangeMap">{{mapType ? '中国地图' : '世界地图'}}</div>
|
||||
@@ -186,10 +185,10 @@
|
||||
</ul>
|
||||
</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>
|
||||
<div class="site_500 jshover" style="height: 3.05rem; margin-bottom: 0.25rem" data-type="HazardFactor">
|
||||
<h2><span class="gradient_white_blue">安全危害因素</span></h2>
|
||||
<div id="risk" class="site_content risk">
|
||||
<div class="flex_row_center_center">
|
||||
<i></i>
|
||||
<div class="flex_column_between_start">
|
||||
@@ -220,27 +219,36 @@
|
||||
</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">
|
||||
<div class="site_500 jshover" style="height: 3.05rem; margin-bottom: 0.25rem" data-type="HazardFactorOccHealth">
|
||||
<h2><span class="gradient_white_blue">职业健康危害因素</span></h2>
|
||||
<div id="riskHazard" class="site_content risk">
|
||||
<div class="flex_row_center_center">
|
||||
<i></i>
|
||||
<div class="flex_column_between_start">
|
||||
<h6>许可</h6>
|
||||
<p>
|
||||
<span class="gradient_white_yellow">0</span><span>项</span>
|
||||
</p>
|
||||
<h6>重大风险</h6>
|
||||
<p><span>{{form?.hazardFactorOcc?.majorRiskNum}}</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>
|
||||
<div class="flex_row_center_center">
|
||||
<i></i>
|
||||
<div class="flex_column_between_start">
|
||||
<h6>较大风险</h6>
|
||||
<p><span>{{form?.hazardFactorOcc?.largerRiskNum}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_row_center_center">
|
||||
<i></i>
|
||||
<div class="flex_column_between_start">
|
||||
<h6>一般风险</h6>
|
||||
<p><span>{{form?.hazardFactorOcc?.generalRiskNum}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex_row_center_center">
|
||||
<i></i>
|
||||
<div class="flex_column_between_start">
|
||||
<h6>低风险</h6>
|
||||
<p><span>{{form?.hazardFactorOcc?.lowRiskNum}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -311,11 +319,11 @@
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载后执行的操作
|
||||
this.show = true; // 显示内容
|
||||
hoverEvent();
|
||||
//组件挂载后执行的操作
|
||||
this.show = true; //显示内容
|
||||
this.createChinaMap();
|
||||
this.loadData(); // 加载数据
|
||||
this.loadData(); //加载数据
|
||||
hoverEvent();//模块数据穿透
|
||||
// this.startTimer(); //启动时间定时器
|
||||
},
|
||||
methods: {
|
||||
@@ -328,6 +336,9 @@
|
||||
url: "main.aspx/GetMainData", //调用后台WebMethod
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
<%--data: JSON.stringify({
|
||||
unitId: '<%=UnitId%>'
|
||||
}),--%>
|
||||
success: function (response) {
|
||||
//console.log("请求结果：", response.d)
|
||||
if (response.d.success) {
|
||||
@@ -383,7 +394,7 @@
|
||||
this.createChinaMap(this.chinaData)
|
||||
}
|
||||
},
|
||||
// 创建中国地图
|
||||
//创建中国地图
|
||||
createChinaMap(data) {
|
||||
let list = data || [];
|
||||
//console.log("地图数据", data);
|
||||
@@ -470,8 +481,10 @@
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
formatter: function (params) {
|
||||
console.log("地图数据明细", params)
|
||||
formatter: function(params) {
|
||||
// debugger
|
||||
// console.log("地图数据明细", params)
|
||||
// console.log("地图数据明细", params)
|
||||
// 自定义 tooltip 内容
|
||||
if (params.seriesType === 'effectScatter') {
|
||||
return `<div style="color: white;">
|
||||
@@ -541,12 +554,47 @@
|
||||
this.chainaMap.setOption(chinaOption);
|
||||
this.chainaMap.on('click', function (params) {
|
||||
// 控制台打印点击的地区名称
|
||||
//if (params.seriesType == 'effectScatter') {
|
||||
// alert('点击了' + params.name);
|
||||
//}
|
||||
if (params.seriesType == 'effectScatter') {
|
||||
// alert('点击了' + params.name + ';' + params.data.id);
|
||||
|
||||
// debugger;
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "main.aspx/ViewProject", //调用后台WebMethod
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
data: JSON.stringify({
|
||||
projectId: params.data.id
|
||||
}),
|
||||
success: function (response) {
|
||||
|
||||
//console.log("请求结果：", response.d)
|
||||
if (response.d.success) {
|
||||
var url = response.d.data;
|
||||
var msg = response.d.msg;
|
||||
if (url != "") {
|
||||
// 当前页面跳转
|
||||
top.window.location.href = url;
|
||||
} else {
|
||||
alert("跳转失败：" + msg);
|
||||
}
|
||||
} else {
|
||||
// 更新数据失败
|
||||
alert("跳转失败：" + response.d.msg);
|
||||
}
|
||||
// $(".loading").hide()
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
// AJAX请求错误处理
|
||||
// $(".loading").hide()
|
||||
alert("请求失败：" + error);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 你可以在这里添加你的逻辑代码
|
||||
});
|
||||
},
|
||||
//创建世界地图
|
||||
createWorldMap(data) {
|
||||
//let data = list || [
|
||||
// { value: [116.407394, 39.904211], name: "北京" }, // 北京
|
||||
@@ -713,14 +761,13 @@
|
||||
//}
|
||||
//// 你可以在这里添加你的逻辑代码
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function hoverEvent() {
|
||||
$(".jshover").click(function (e) {
|
||||
e.stopPropagation()
|
||||
|
||||
if ($(".popu").css("display") == "block") {
|
||||
$(".popu").hide()
|
||||
return
|
||||
@@ -728,57 +775,21 @@
|
||||
let type = this.getAttribute("data-type")
|
||||
let iframe = $('iframe')
|
||||
switch (type) {
|
||||
case "1":
|
||||
// 组织人员
|
||||
// iframe.attr('src', '../DataShow/CompanyPerson.aspx')
|
||||
window.open('../DataShow/CompanyPerson.aspx')
|
||||
case "HazardFactor"://安全危害因素
|
||||
window.open('../DataShow/HazardFactor.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')
|
||||
case "HazardFactorOccHealth"://职业健康危害因素
|
||||
window.open('../DataShow/HazardFactorOccHealth.aspx')
|
||||
break
|
||||
}
|
||||
// $("#hover").hide()
|
||||
$(".popu").show()
|
||||
})
|
||||
$(".container").css({
|
||||
position: "relative",
|
||||
})
|
||||
$(".container")
|
||||
.click(function (e) {
|
||||
$(".popu").hide()
|
||||
})
|
||||
$(".container").click(function (e) {
|
||||
$(".popu").hide()
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user