448 lines
15 KiB
Plaintext
448 lines
15 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_SYHSEN.aspx.cs" Inherits="FineUIPro.Web.common.mainMenu_SYHSEN" %>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head runat="server">
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no">
|
|||
|
|
<title>实业板块数据看板</title>
|
|||
|
|
<link rel="stylesheet" href="../res/assets/iconfont/iconfont.css">
|
|||
|
|
<link rel="stylesheet" href="../res/assets/css/video-7.15.0.min.css">
|
|||
|
|
<link rel="stylesheet" href="../res/assets/css/index6.css">
|
|||
|
|
<link rel="stylesheet" href="../res/assets/css/swiper.min.css">
|
|||
|
|
<style>
|
|||
|
|
.swiper-container{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1.33854rem;
|
|||
|
|
}
|
|||
|
|
.swiper-slide {
|
|||
|
|
/* height: 28px; */
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
.sd-body .sd-right-new .content{
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-top: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="sd-index4-body disflex">
|
|||
|
|
<div class="sd-header" style="display:none;">
|
|||
|
|
<div class="sd-header-top">
|
|||
|
|
<div class="sd-header-top-right">
|
|||
|
|
<div id="sd-location-time" class="sd-location-time"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-header-title">
|
|||
|
|
实业看板
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body">
|
|||
|
|
<div class="sd-left sd-l-wrap">
|
|||
|
|
<div class="sbl-top bg">
|
|||
|
|
<div class="tit">安全人工时</div>
|
|||
|
|
<div class="sdsec-wrap">
|
|||
|
|
<div class="sd-security-value"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sbl-bottom bg">
|
|||
|
|
<div class="tit">风险管控</div>
|
|||
|
|
<div class="content-fxgk">
|
|||
|
|
<div class="sd-top-wrap">
|
|||
|
|
<div class="stw-item-wrap">
|
|||
|
|
<div class="stw-item bg1">
|
|||
|
|
<div class="num">0</div>
|
|||
|
|
<div class="desc">四级/重大风险</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stw-item-wrap">
|
|||
|
|
<div class="stw-item bg2">
|
|||
|
|
<div class="num">0</div>
|
|||
|
|
<div class="desc">三级/较大风险</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stw-item-wrap">
|
|||
|
|
<div class="stw-item bg3">
|
|||
|
|
<div class="num">0</div>
|
|||
|
|
<div class="desc">二级/一般风险</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stw-item-wrap">
|
|||
|
|
<div class="stw-item bg4">
|
|||
|
|
<div class="num">0</div>
|
|||
|
|
<div class="desc">一级/低风险</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="cf-list" id="heightFixFX">
|
|||
|
|
|
|||
|
|
<!-- Swiper -->
|
|||
|
|
<div class="news-list swiper-container" id="Swiper3">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
<%--<div class="swiper-slide">
|
|||
|
|
<a class="news-item" title="1.风险分级管理" href="javascrilt:;">
|
|||
|
|
1.风险分级管理~~~！！！
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
2.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
3.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
4.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
5.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
6.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
7.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
8.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
9.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
10.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
11.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<a class="news-item" href="javascrilt:;">
|
|||
|
|
12.风险分级管理
|
|||
|
|
</a>
|
|||
|
|
</div>--%>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-right-new">
|
|||
|
|
<div class="sdr-top">
|
|||
|
|
<div class="sd-content bg">
|
|||
|
|
<div class="tit">重大危险源</div>
|
|||
|
|
<div class="content" id="heightFix">
|
|||
|
|
<div class="list">
|
|||
|
|
<!-- Swiper -->
|
|||
|
|
<div class="news-list swiper-container" id="Swiper2">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
<%=risk %>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-video-item">
|
|||
|
|
<div class="sd-video-item-desc">视频监控</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sdr-bottom bg">
|
|||
|
|
<div class="tit">隐患排查</div>
|
|||
|
|
<div class="sd-output-box-wrap">
|
|||
|
|
<div class="sd-output-box" id="outputId"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="../res/assets/js/jquery-3.7.1.min.js"></script>
|
|||
|
|
<script src="../res/assets/js/echarts-5.2.0.min.js"></script>
|
|||
|
|
<script src="../res/assets/js/video-7.15.0.min.js"></script>
|
|||
|
|
<script src="../res/assets/js/swiper.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
//获取当前时间
|
|||
|
|
function getNowTime() {
|
|||
|
|
var date = new Date();
|
|||
|
|
//年 getFullYear()：四位数字返回年份
|
|||
|
|
var year = date.getFullYear(); //getFullYear()代替getYear()
|
|||
|
|
//月 getMonth()：0 ~ 11
|
|||
|
|
var month = date.getMonth() + 1;
|
|||
|
|
//日 getDate()：(1 ~ 31)
|
|||
|
|
var day = date.getDate();
|
|||
|
|
//时 getHours()：(0 ~ 23)
|
|||
|
|
var hour = date.getHours();
|
|||
|
|
//分 getMinutes()： (0 ~ 59)
|
|||
|
|
var minute = date.getMinutes();
|
|||
|
|
//秒 getSeconds()：(0 ~ 59)
|
|||
|
|
var second = date.getSeconds();
|
|||
|
|
var dayweeks = date.getDay();
|
|||
|
|
var weeks = new Array(
|
|||
|
|
"星期日",
|
|||
|
|
"星期一",
|
|||
|
|
"星期二",
|
|||
|
|
"星期三",
|
|||
|
|
"星期四",
|
|||
|
|
"星期五",
|
|||
|
|
"星期六"
|
|||
|
|
);
|
|||
|
|
var week = weeks[dayweeks];
|
|||
|
|
var time = year + '年' + this.addZero(month) + '月' + this.addZero(day) + '日 ' + this.addZero(hour) + ':' + this.addZero(minute) + ':' + this.addZero(second);
|
|||
|
|
return time + ' ' + week;
|
|||
|
|
}
|
|||
|
|
//小于10的拼接上0字符串
|
|||
|
|
function addZero(s) {
|
|||
|
|
return s < 10 ? ('0' + s) : s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getDateDesc() {
|
|||
|
|
var dateNow = getNowTime()
|
|||
|
|
$('#sd-location-time').html(dateNow)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initDate() {
|
|||
|
|
setInterval(() => {
|
|||
|
|
getDateDesc()
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initBarEchart(id, xAxisData, data1, data2) {
|
|||
|
|
var chartDom = document.getElementById(id);
|
|||
|
|
var myChart = echarts.init(chartDom);
|
|||
|
|
var option;
|
|||
|
|
option = {
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 5,
|
|||
|
|
height: '10',
|
|||
|
|
backgroundColor: 'rgba(47,69,84,0)',
|
|||
|
|
fillerColor: 'rgba(47,69,84,0)',
|
|||
|
|
bottom: '0%',
|
|||
|
|
zoomLock: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
brushSelect: true
|
|||
|
|
}],
|
|||
|
|
color: ['#12CDA2', '#00AAFF', '#FFC277'],
|
|||
|
|
grid: {
|
|||
|
|
top: '13%',
|
|||
|
|
left: '3%',
|
|||
|
|
right: '1%',
|
|||
|
|
bottom: '2%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
showDelay: 0,
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: xAxisData,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#179eb3',
|
|||
|
|
interval: 0
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
onZero: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#179eb3',
|
|||
|
|
width: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
boundaryGap: true
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#179eb3',
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
// axisLine: {
|
|||
|
|
// show: false,
|
|||
|
|
// onZero: false,
|
|||
|
|
// lineStyle: {
|
|||
|
|
// color: '#179eb3',
|
|||
|
|
// width: 1,
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed',
|
|||
|
|
color: '#0D3C65',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// splitNumber: 8,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '当日总数',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 24,
|
|||
|
|
data: data1,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
barBorderRadius: [15, 15, 0, 0] // 左上，右上，右下、左下
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '当日整改数',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 24,
|
|||
|
|
data: data2,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
barBorderRadius: [15, 15, 0, 0] // 左上，右上，右下、左下
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
right: "3%",
|
|||
|
|
top: '0',
|
|||
|
|
data: [{
|
|||
|
|
name: '当日总数',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#12CDA2',
|
|||
|
|
},
|
|||
|
|
}, {
|
|||
|
|
name: '当日整改数',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#00AAFF'
|
|||
|
|
},
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
option && myChart.setOption(option);
|
|||
|
|
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fontSize(res) {
|
|||
|
|
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|||
|
|
if (!clientWidth) return;
|
|||
|
|
let fontSize = clientWidth / 1920;
|
|||
|
|
return res * fontSize;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
var heightFixFX = $('#heightFixFX').height();
|
|||
|
|
$('#Swiper3').height(heightFixFX - 10);
|
|||
|
|
var heightFix = $('#heightFix').height();
|
|||
|
|
$('#Swiper2').height(heightFix - 80);
|
|||
|
|
var seriesOption = [{
|
|||
|
|
name: '问题1',
|
|||
|
|
}, {
|
|||
|
|
name: '问题2',
|
|||
|
|
}, {
|
|||
|
|
name: '问题3',
|
|||
|
|
}, {
|
|||
|
|
name: '问题4',
|
|||
|
|
}, {
|
|||
|
|
name: '问题5',
|
|||
|
|
}, {
|
|||
|
|
name: '问题6',
|
|||
|
|
}, {
|
|||
|
|
name: '问题7',
|
|||
|
|
}, {
|
|||
|
|
name: '问题8',
|
|||
|
|
}, {
|
|||
|
|
name: '问题9',
|
|||
|
|
}, {
|
|||
|
|
name: '问题10',
|
|||
|
|
}]
|
|||
|
|
|
|||
|
|
let xAxisData = [];
|
|||
|
|
let data1 = [];
|
|||
|
|
let data2 = [];
|
|||
|
|
|
|||
|
|
for (let i = 0; i < seriesOption.length; i++) {
|
|||
|
|
xAxisData.push(seriesOption[i].name);
|
|||
|
|
data1.push(0);
|
|||
|
|
data2.push(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
initBarEchart('outputId', xAxisData, data1, data2)
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
|
|||
|
|
var swiper2Model = new Swiper('#Swiper2', {
|
|||
|
|
slidesPerView: 'auto',
|
|||
|
|
direction: 'vertical',
|
|||
|
|
autoplay: {
|
|||
|
|
delay: 2000,
|
|||
|
|
stopOnLastSlide: false,
|
|||
|
|
disableOnInteraction: true,
|
|||
|
|
pauseOnMouseEnter: true,
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//6.6.2之前的版本需要通过代码实现此功能
|
|||
|
|
swiper2Model.el.onmouseover = function () {
|
|||
|
|
swiper2Model.autoplay.stop();
|
|||
|
|
}
|
|||
|
|
swiper2Model.el.onmouseout = function () {
|
|||
|
|
swiper2Model.autoplay.start();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var swiper3Model = new Swiper('#Swiper3', {
|
|||
|
|
slidesPerView: 'auto',
|
|||
|
|
direction: 'vertical',
|
|||
|
|
autoplay: {
|
|||
|
|
delay: 3000,
|
|||
|
|
stopOnLastSlide: false,
|
|||
|
|
disableOnInteraction: true,
|
|||
|
|
pauseOnMouseEnter: true,
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//6.6.2之前的版本需要通过代码实现此功能
|
|||
|
|
swiper3Model.el.onmouseover = function () {
|
|||
|
|
swiper3Model.autoplay.stop();
|
|||
|
|
}
|
|||
|
|
swiper3Model.el.onmouseout = function () {
|
|||
|
|
swiper3Model.autoplay.start();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|