<!DOCTYPE html>
|
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="utf-8"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
|
<meta name="renderer" content="webkit"/>
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
|
<meta name="format-detection" content="telephone=no"/>
|
<title>电子货位卡系统-电子门禁</title>
|
|
<link rel="stylesheet" th:href="@{/dzhwk/style.css}"/>
|
<link rel="stylesheet" th:href="@{/dzhwk/swiper-bundle.min.css}"/>
|
</head>
|
|
<body class="">
|
<div class="screen-container">
|
<div id="container">
|
<div class="header">
|
<div class="h-info">
|
<div class="t">电子货位卡系统</div>
|
- 电子门禁
|
</div>
|
<a href="" class="logo">
|
<img th:src="@{/img/dzhwk/logo.png}" alt="">
|
<span>风正致远郑州直属库</span>
|
</a>
|
<div class="h-date">2025-03-26 10:10</div>
|
</div>
|
<div class="g-row">
|
<div class="left-slide">
|
<div class="m-prohibitl">
|
<div class="col-l">
|
<div class="m-doorl">
|
<a href="#m-win" class="left h411 myfancy">
|
<div class="box">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/iconl29.png}" alt="">
|
</div>
|
<div class="tit">点击开门</div>
|
</div>
|
</a>
|
<div class="right">
|
<div class="g-boxl1 h411">
|
<div class="g-titl1">气体信息</div>
|
<ul class="ul-listl3 styl2">
|
<li>
|
<div class="con" style="background-color: rgba(3,77,146,.3);">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/iconl21.png}" alt="">
|
</div>
|
<div class="txt">
|
<div class="num"><em>0</em>ppm</div>
|
<div class="tt">磷化氢</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="con" style="background-color: rgba(31,133,78,.15);">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/iconl20.png}" alt="">
|
</div>
|
<div class="txt">
|
<div class="num"><em>20.5</em>%</div>
|
<div class="tt">氧气</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="con" style="background-color: rgba(91,104,225,.25);">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/iconl28.png}" alt="">
|
</div>
|
<div class="txt">
|
<div class="num"><em>400</em>ppm</div>
|
<div class="tt">二氧化碳</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
<div class="date">2025-01-01 10:10</div>
|
</div>
|
</div>
|
</div>
|
<div class="m-centrel">
|
<ul class="ul-listl2">
|
<li>
|
<div class="con" style="background-image: url(/img/dzhwk/bgl8.png);">
|
<div class="top">
|
<div class="icon" id="icon"
|
style="background-image: url(/img/dzhwk/bgl2-1.png);">
|
<img th:src="@{/img/dzhwk/iconl16.png}" alt="">
|
</div>
|
<div class="btnbox" id="btnbox">
|
<div class="box">
|
<div class="btn open">
|
<div class="tt">开灯</div>
|
<div class="tips">仓内照明</div>
|
</div>
|
</div>
|
<div class="box">
|
<div class="btn">
|
<div class="tt">关灯</div>
|
<div class="tips">仓内照明</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="con" style="background-image: url(/img/dzhwk/bgl11.png);">
|
<div class="top">
|
<div class="icon" style="background-image: url(/img/dzhwk/bgl2-1.png);">
|
<img th:src="@{/img/dzhwk/b-i2.png}" alt="">
|
</div>
|
<div class="txt">
|
<div class="tit">气体检测</div>
|
<div class="desc">实时监测</div>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="m-belowl">
|
<div class="g-boxl1 h331 red">
|
<div class="g-titl1">
|
<div class="tit">安全进仓提醒</div>
|
</div>
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/iconl30.png}" alt="">
|
</div>
|
<div class="tips">当前仓内有磷化氢存留,不能进仓作业</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-r">
|
<div class="g-boxl1 h411">
|
<div class="g-titl1">货位信息</div>
|
<ul class="ul-listl7">
|
<li class="ok">
|
<div class="con">
|
<div class="icon"></div>
|
<div class="tit">人进灯亮</div>
|
<div class="tips">配合门禁系统实现开门自动开灯</div>
|
</div>
|
</li>
|
<li class="ok">
|
<div class="con">
|
<div class="icon"></div>
|
<div class="tit">人出灯灭</div>
|
<div class="tips">配合门禁系统实现关门自动关灯</div>
|
</div>
|
</li>
|
<li>
|
<div class="con">
|
<div class="icon"></div>
|
<div class="tit">安全进仓提醒</div>
|
<div class="tips">配合气体浓度验证进仓安全,非安全情况3次提醒</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="h20"></div>
|
<div class="g-boxl1 h511 posb1">
|
<div class="g-titl1">门禁记录</div>
|
<div class="g-moreb1">
|
<svg t="1744356499098" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="4388" width="64" height="64">
|
<path d="M896 469.333333v128h-128v-128h128z m-298.666667 0v128h-128v-128h128z m-298.666666 0v128H170.666667v-128h128z"
|
fill="#9fa0a2" p-id="4389"></path>
|
</svg>
|
</div>
|
<div class="g-tableb1">
|
<ul class="ul-tableb1 thead">
|
<li>
|
<div class="td">开门人</div>
|
<div class="td">开门方式</div>
|
<div class="td">开门时间</div>
|
</li>
|
</ul>
|
<div class="swiper-container" id="swl1">
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<ul class="ul-tableb1">
|
<li>
|
<div class="td">张三</div>
|
<div class="td">刷卡开门</div>
|
<div class="td">2025/01/01 10:10</div>
|
</li>
|
</ul>
|
</div>
|
<div class="swiper-slide">
|
<ul class="ul-tableb1">
|
<li>
|
<div class="td">张三</div>
|
<div class="td">刷卡开门</div>
|
<div class="td">2025/01/01 10:10</div>
|
</li>
|
</ul>
|
</div>
|
<div class="swiper-slide">
|
<ul class="ul-tableb1">
|
<li>
|
<div class="td">张三</div>
|
<div class="td">刷卡开门</div>
|
<div class="td">2025/01/01 10:10</div>
|
</li>
|
</ul>
|
</div>
|
<div class="swiper-slide">
|
<ul class="ul-tableb1">
|
<li>
|
<div class="td">张三</div>
|
<div class="td">刷卡开门</div>
|
<div class="td">2025/01/01 10:10</div>
|
</li>
|
</ul>
|
</div>
|
<div class="swiper-slide">
|
<ul class="ul-tableb1">
|
<li>
|
<div class="td">张三</div>
|
<div class="td">刷卡开门</div>
|
<div class="td">2025/01/01 10:10</div>
|
</li>
|
</ul>
|
</div>
|
<div class="swiper-slide">
|
<ul class="ul-tableb1">
|
<li>
|
<div class="td">张三</div>
|
<div class="td">刷卡开门</div>
|
<div class="td">2025/01/01 10:10</div>
|
</li>
|
</ul>
|
</div>
|
<div class="swiper-slide">
|
<ul class="ul-tableb1">
|
<li>
|
<div class="td">张三</div>
|
<div class="td">刷卡开门</div>
|
<div class="td">2025/01/01 10:10</div>
|
</li>
|
</ul>
|
</div>
|
<div class="swiper-slide">
|
<ul class="ul-tableb1">
|
<li>
|
<div class="td">张三</div>
|
<div class="td">刷卡开门</div>
|
<div class="td">2025/01/01 10:10</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="g-opts">
|
<div class="swiper-button-prev">
|
<svg t="1744343461436" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="4317" width="64" height="64">
|
<path d="M481.856 992V154.432L76.608 558.144l-44.48-44.608L513.664 32l478.144 478.144-44.544 46.08-401.792-401.792V992h-63.616z"
|
fill="currentColor" p-id="4318"></path>
|
</svg>
|
</div>
|
<div class="swiper-pagination"></div>
|
<div class="swiper-button-next">
|
<svg t="1744343487866" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="5295" width="64" height="64">
|
<path d="M545.472 32v837.504L947.2 467.712l44.544 46.144-478.08 478.144L32.128 510.4l44.48-44.544 405.248 403.712V32h63.616z"
|
fill="currentColor" p-id="5296"></path>
|
</svg>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 弹窗 -->
|
<div class="m-pop" id="m-win">
|
<div class="pop-bg"></div>
|
<div class="inner g-boxl1">
|
<div class="m-winl">
|
<div class="item">
|
<div class="g-boxl2">
|
<div class="pic">
|
<img th:src="@{/img/dzhwk/imgl7.png}" alt="">
|
</div>
|
</div>
|
<ul class="ul-listl8">
|
<li class="on">
|
<div class="con">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/iconl36.png}" alt="">
|
</div>
|
人脸识别
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="item">
|
<div class="g-boxl2">
|
<div class="m-posswordl">
|
<div class="possword">
|
<input type="text" class="inp" placeholder="请输入密码">
|
<ul class="ul-numl">
|
<li>
|
<div class="con">1</div>
|
</li>
|
<li>
|
<div class="con">2</div>
|
</li>
|
<li>
|
<div class="con">3</div>
|
</li>
|
<li>
|
<div class="con">4</div>
|
</li>
|
<li>
|
<div class="con">5</div>
|
</li>
|
<li>
|
<div class="con">6</div>
|
</li>
|
<li>
|
<div class="con">7</div>
|
</li>
|
<li>
|
<div class="con">8</div>
|
</li>
|
<li>
|
<div class="con">9</div>
|
</li>
|
<li>
|
<div class="con">0</div>
|
</li>
|
<li>
|
<div class="con purple">
|
<img th:src="@{/img/dzhwk/close.png}" alt="">
|
</div>
|
</li>
|
<li>
|
<div class="con green">确认</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<ul class="ul-listl8">
|
<li>
|
<div class="con">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/iconl35.png}" alt="">
|
</div>
|
密码解锁
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="item">
|
<div class="g-boxl2">
|
<div class="pic">
|
<img th:src="@{/img/dzhwk/imgl8.png}" alt="">
|
</div>
|
</div>
|
<ul class="ul-listl8">
|
<li>
|
<div class="con">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/iconl37.png}" alt="">
|
</div>
|
刷卡解锁
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right-slide">
|
<ul class="ul-listb1">
|
<li>
|
<a href="javascript:void(0)" onclick="toPage('dzhwk')" class="con sty1">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/r1.png}" alt="">
|
</div>
|
<div class="ty">电子货位卡</div>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" onclick="toPage('grain')" class="con sty2">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/r2.png}" alt="">
|
</div>
|
<div class="ty">仓储保管作业</div>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" onclick="toPage('door')" class="con sty3">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/r3.png}" alt="">
|
</div>
|
<div class="ty">电子门禁</div>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" onclick="toPage('ai')" class="con sty4">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/r4.png}" alt="">
|
</div>
|
<div class="ty">AI专家决策</div>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" onclick="toPage('card')" class="con sty5">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/r5.png}" alt="">
|
</div>
|
<div class="ty">粮油专卡</div>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" onclick="toPage('patrol')" class="con sty6">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/r6.png}" alt="">
|
</div>
|
<div class="ty">巡检打卡</div>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" onclick="toPage('sys')" class="con sty7">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/r7.png}" alt="">
|
</div>
|
<div class="ty">运维配置</div>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" onclick="toPage('index')" class="con sty8">
|
<div class="icon">
|
<img th:src="@{/img/dzhwk/r8.png}" alt="">
|
</div>
|
<div class="ty">返回首页</div>
|
</a>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/dzhwk/swiper-bundle.min.js}"></script>
|
<script th:src="@{/dzhwk/common.js}"></script>
|
<script th:inline="javascript">
|
var flag = [[${flag}]];
|
$(function () {
|
$('.ul-listl7 li').click(function () {
|
$(this).toggleClass('ok');
|
})
|
|
var swiper = new Swiper('.swiper-container', {
|
direction: 'vertical',
|
slidesPerView: 5,
|
pagination: {
|
el: '.swiper-pagination',
|
type: 'progressbar',
|
},
|
navigation: {
|
nextEl: '.swiper-button-next',
|
prevEl: '.swiper-button-prev',
|
},
|
});
|
|
//弹出框
|
$('.myfancy').click(function () {
|
var _id = $(this).attr('href');
|
$(this).parents(".pop-bg").fadeOut();
|
$(_id).addClass('open');
|
});
|
$('.pop-bg,.close').click(function () {
|
$(this).parents(".m-pop").removeClass('open');
|
});
|
|
$('.ul-listl8 li').on('click', function () {
|
$('.ul-listl8 li').removeClass('on');
|
$(this).addClass('on');
|
});
|
|
// 开灯关灯
|
$('#btnbox .btn').click(function () {
|
$('#btnbox .btn').removeClass('open')
|
$(this).addClass('open');
|
const isOpenLight = $(this).find('.tt').text().trim() === '开灯';
|
$('#icon img').attr('src',
|
isOpenLight ? '/img/dzhwk/iconl16.png' : '/img/dzhwk/iconl16-1.png'
|
);
|
})
|
})
|
|
//监听操作
|
document.addEventListener('mousemove', resetTimeout); //鼠标移动
|
document.addEventListener('click', resetTimeout); //鼠标点击
|
document.addEventListener('touchstart', resetTimeout); //触屏
|
|
timeFormate();
|
setInterval(function () {
|
timeFormate()
|
}, 1000);
|
</script>
|
</body>
|
</html>
|
