357 lines
12 KiB
HTML
357 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" href="https://manage.gkyun.net/favicon.ico">
|
|
<title>数字燃气综合管理系统</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #171a3e;
|
|
}
|
|
.box {
|
|
position: fixed;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
/*background: red;*/
|
|
background: url(./img/BG.jpg) no-repeat;
|
|
background-size: cover;
|
|
transform-origin: left top;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 1;
|
|
}
|
|
.box::before{
|
|
content: '';
|
|
position: fixed;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
/*background: red;*/
|
|
background: url(./img/bg1.gif) no-repeat;
|
|
background-size: cover;
|
|
transform-origin: left top;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0.15;
|
|
}
|
|
.header-box{
|
|
height: 100px;
|
|
text-align: center;
|
|
font-family: Source Han Sans CN;
|
|
background: url(./img/header-title.png) no-repeat;
|
|
-webkit-user-select: none; /* Chrome, Safari, Opera */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
/*align-items: center;*/
|
|
position: relative;
|
|
z-index: 99;
|
|
|
|
}
|
|
.header-logo{
|
|
width: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 25px;
|
|
color: #1594FF;
|
|
margin-top: -17px;
|
|
padding-left: 24px;
|
|
}
|
|
.header-logo img{
|
|
width: 86px;
|
|
height: 31px;
|
|
/*margin-top: 21px;*/
|
|
/*margin-left: 24px;*/
|
|
}
|
|
.header-box-title{
|
|
font-weight: bold;
|
|
font-size: 40px;
|
|
color: #FFFFFF;
|
|
line-height: 70px;
|
|
text-shadow: 0px 1px 0px rgba(0,22,37,0.72), 0px 5px 0px rgba(0,51,95,0.39);
|
|
}
|
|
.header-logo-right{
|
|
width: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 25px;
|
|
color: #1594FF;
|
|
margin-top: -17px;
|
|
padding-right: 11px;
|
|
}
|
|
.header-logo-right img{
|
|
width: 31px;
|
|
height: 31px;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
/*margin-top: 21px;*/
|
|
/*margin-left: 24px;*/
|
|
}
|
|
/*.header-box-title{*/
|
|
/* background: linear-gradient(0deg, rgba(0,179,255,0.5) 0%, rgba(255,255,255,0.5) 50.2685546875%, rgba(255,255,255,0.5) 83.7890625%, rgba(0,179,255,0.5) 100%);*/
|
|
/*}*/
|
|
.main-box{
|
|
/*margin: 166px auto 0;*/
|
|
width: 1028px;
|
|
height: 547px;
|
|
background: url(./img/line.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
left: 415px;
|
|
top: 222px;
|
|
z-index: 2;
|
|
}
|
|
.main-box .center{
|
|
width: 378px;
|
|
height: 470px;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 368px;
|
|
background: url(./img/icon-center.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.main-box .nav-item{
|
|
width: 200px;
|
|
height: 280px;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
color: #FFFFFF;
|
|
line-height: 80px;
|
|
-webkit-user-select: none; /* Chrome, Safari, Opera */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none;
|
|
cursor: pointer;
|
|
z-index: 999;
|
|
background-size: 100% 100%;
|
|
}
|
|
.top-center{
|
|
background: url(./img/prevent.png) no-repeat;
|
|
top: -185px;
|
|
left: 305px;
|
|
}
|
|
.top-right{
|
|
/*background: url(./img/project.png) no-repeat;*/
|
|
background: url(./img/customer.png) no-repeat;
|
|
top: -160px;
|
|
left: 715px;
|
|
}
|
|
.left-top{
|
|
background: url(./img/Inspection.png) no-repeat;
|
|
top: -84px;
|
|
left: 36px;
|
|
}
|
|
.left-center{
|
|
background: url(./img/GIS.png) no-repeat;
|
|
top: 121px;
|
|
left: -145px;
|
|
}
|
|
.left-bottom{
|
|
background: url(./img/SCADA.png) no-repeat;
|
|
bottom: -64px;
|
|
left: 58px;
|
|
}
|
|
.left-bottom2{
|
|
background: url(./img/shop.png) no-repeat;
|
|
bottom: -40px;
|
|
left: -167px;
|
|
}
|
|
.center-bottom{
|
|
background: url(./img/manage-center.png) no-repeat;
|
|
bottom: -127px;
|
|
left: 481px;
|
|
}
|
|
.right-bottom{
|
|
background: url(./img/gasBottle.png) no-repeat;
|
|
bottom: -13px;
|
|
right: -72px;
|
|
}
|
|
.right-center{
|
|
/*background: url(./img/exam.png) no-repeat;*/
|
|
background: url(./img/video.png) no-repeat;
|
|
top: 29px;
|
|
right: -147px;
|
|
}
|
|
.top {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: hotpink;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.bottom {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: skyblue;
|
|
margin-left: 50px;
|
|
margin-top: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- 数据展示的区域 -->
|
|
<div class="box">
|
|
<div class="header-box">
|
|
<div class="header-logo">
|
|
<img src="./img/logo.png" alt="" />
|
|
<span class="header-logo-text">
|
|
驱动创新
|
|
</span>
|
|
</div>
|
|
<div class="header-box-title">
|
|
数字燃气一体化平台
|
|
</div>
|
|
<div class="header-logo-right">
|
|
<span id="time">2024-09-13 10:19:49</span>
|
|
<img id="fullScreen" src="./img/fullScreen.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="main-box">
|
|
<div class="center"></div>
|
|
<div class="nav-item top-center">双重预防机制</div>
|
|
<!-- <div class="nav-item top-right">工程管理</div>-->
|
|
<div class="nav-item top-right">智能客服</div>
|
|
<div class="nav-item left-top">智慧巡检</div>
|
|
<div class="nav-item left-center">GIS系统</div>
|
|
<div class="nav-item left-bottom">SCADA系统</div>
|
|
<!-- <div class="nav-item left-bottom2">电子商城</div>-->
|
|
<div class="nav-item center-bottom">管理中心</div>
|
|
<div class="nav-item right-bottom">气瓶管理</div>
|
|
<!-- <div class="nav-item right-center">车辆管理</div>-->
|
|
<div class="nav-item right-center">视频监控</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|
|
<script type="text/javascript">
|
|
(function(c,l,a,r,i,t,y){
|
|
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
|
|
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
|
|
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
|
|
})(window, document, "clarity", "script", "oythfu4ogz");
|
|
</script>
|
|
<script>
|
|
//控制数据大屏放大与缩小
|
|
let box = document.querySelector('.box');
|
|
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
|
|
//计算缩放的比例啦
|
|
function getScale(w = 1920, h = 1080) {
|
|
const ww = window.innerWidth / w;
|
|
const wh = window.innerHeight / h;
|
|
return ww < wh ? ww : wh;
|
|
//ww<wh情况: 1920/1920(ww) 1080/1080(wh)
|
|
//ww>wh情况:1920/1920(ww) 1080/1080(wh)
|
|
}
|
|
// function updateTime() {
|
|
// var now = new Date();
|
|
// var hours = now.getHours();
|
|
// var minutes = now.getMinutes();
|
|
// var seconds = now.getSeconds();
|
|
// var timeString = hours.toString().padStart(2, '0') + ":" +
|
|
// minutes.toString().padStart(2, '0') + ":" +
|
|
// seconds.toString().padStart(2, '0');
|
|
// document.getElementById("time").innerHTML = timeString;
|
|
// }
|
|
function updateTime() {
|
|
let now = new Date(); // 获取当前日期和时间
|
|
let year = now.getFullYear(); // 获取年份
|
|
let month = now.getMonth() + 1; // 获取月份，+1因为getMonth()返回0-11
|
|
let day = now.getDate(); // 获取日
|
|
let hours = now.getHours(); // 获取小时
|
|
let minutes = now.getMinutes(); // 获取分钟
|
|
let seconds = now.getSeconds(); // 获取秒钟
|
|
|
|
// 格式化时间为两位数
|
|
hours = hours < 10 ? '0' + hours : hours;
|
|
minutes = minutes < 10 ? '0' + minutes : minutes;
|
|
seconds = seconds < 10 ? '0' + seconds : seconds;
|
|
|
|
// 构建时间字符串
|
|
const timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
|
// 更新页面上的时间显示
|
|
document.getElementById('time').textContent = timeStr;
|
|
// 每秒更新一次时间
|
|
setTimeout(updateTime, 1000);
|
|
}
|
|
|
|
updateTime()
|
|
|
|
function toggleFullScreen() {
|
|
if (!document.fullscreenElement) {
|
|
// 进入全屏
|
|
document.documentElement.requestFullscreen();
|
|
} else {
|
|
// 退出全屏
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
}
|
|
|
|
// 绑定一个按钮点击事件来切换全屏
|
|
document.getElementById('fullScreen').addEventListener('click', toggleFullScreen);
|
|
|
|
window.onresize = () => {
|
|
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
|
|
}
|
|
let navItem = document.querySelectorAll('.nav-item');
|
|
// 管理中心: http://manage.gkyun.net/
|
|
// GIS系统: https://manage.fdanrangas.com/gis-system
|
|
// 智慧巡检: http://manage.gkyun.net/inspection
|
|
// SCADA:http://iotui.gkyun.net
|
|
// 气瓶管理:http://nxsz.ts-tac.cn/samr
|
|
// 培训考试:http://pxks.histron.cn:18080/
|
|
// 车辆管理:https://gnss.elink-star.com/autoLogin?username=drwl&password=dr!@12
|
|
navItem.forEach(item => {
|
|
item.onclick = () => {
|
|
if (item.innerHTML === '智慧巡检'){
|
|
window.open('http://manage.gkyun.net/inspection');
|
|
}else if (item.innerHTML === 'GIS系统'){
|
|
window.open('http://manage.gkyun.net/gis-system');
|
|
}else if (item.innerHTML === 'SCADA系统'){
|
|
window.open('http://iotui.gkyun.net');
|
|
}else if (item.innerHTML === '管理中心'){
|
|
window.open('http://manage.gkyun.net/');
|
|
}else if (item.innerHTML === '气瓶管理'){
|
|
window.open('http://test.siteweb.bjgas95.com:8028/gpurl.php');
|
|
}else if (item.innerHTML === '车辆管理'){
|
|
window.open('https://gnss.elink-star.com/autoLogin?username=drwl&password=dr!@12');
|
|
}else if (item.innerHTML === '视频监控'){
|
|
window.open('https://iotui.gkyun.net/video/video');
|
|
}else if (item.innerHTML === '电子商城'){
|
|
// window.open('https://gnss.elink-star.com/autoLogin?username=drwl&password=dr!@12');
|
|
}else if (item.innerHTML === '工程管理'){
|
|
// window.open('https://gnss.elink-star.com/autoLogin?username=drwl&password=dr!@12');
|
|
}else if (item.innerHTML === '智能客服'){
|
|
window.open('http://kefu.gkyun.net/');
|
|
}else if (item.innerHTML === '双重预防机制'){
|
|
window.open('https://manage.gkyun.net/gis-system?type=scyfjz');
|
|
}
|
|
console.log(item.innerHTML);
|
|
}
|
|
})
|
|
|
|
</script> |