gdb-h5/index.html

346 lines
13 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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,maximum-scale=1.0,user-scalable=no"
/>
<title>国防宣教</title>
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/swiper-3.4.2.min.css" />
<link
rel="stylesheet"
href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
/>
<script src="./js/jquery.min.js"></script>
<script src="./js/api.js"></script>
<script src="./js/moment.js"></script>
<script src="./js/swiper-3.4.2.min.js"></script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=307b14b003f9288ba0cad406d5e1238e"
></script>
<script>
// var map = new AMap.Map("container", {
// zoom: 11,
// center: [107.535867, 31.228318],
// resizeEnable: true,
// });
sessionStorage.setItem("local", "107.487141,31.219671");
AMap.plugin("AMap.Geolocation", function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位默认5s
position: "RB", //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量,默认:[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
// map.addControl(geolocation);
geolocation.getCurrentPosition(function (status, result) {
console.log("##", status, result);
if (status == "complete") {
// console.log('cmp');
onComplete(result);
} else {
// geolocation.getCityInfo((stat,res)=>{
// if(stat=="complete"){
// onComplete(result);
// }
// })
// console.log('###',result)
onError(result);
}
});
});
// AMap.plugin("AMap.CitySearch", function () {
// var citySearch = new AMap.CitySearch();
// citySearch.getLocalCity(function (status, result) {
// if (status === "complete" && result.info === "OK") {
// // 查询成功result即为当前所在城市信息
// }
// });
// });
function onComplete(data) {
sessionStorage.setItem("local", data.position);
}
function onError(data) {
// sessionStorage.setItem("local", "107.487141,31.219671");
}
// var dw = window.innerWidth;
// var dh = window.innerHeight;
var code;
var mp3;
var zzggListQuery = {
current: 1,
size: 10,
};
var zzggTotal = 0;
$(function () {
code = getUrlParam("code");
if (isDebug) {
$("#debug").show();
}
if (!sessionStorage.getItem("token")) {
login(code);
}
newsList();
getBanner();
// scrollPageInit()
init();
});
function getUrlParam(name) {
var searchParams = new URLSearchParams(window.location.search);
return searchParams.get(name);
}
function handleTabClick(el, name) {
// if (name === "qkcz") {
// if (JSON.parse(sessionStorage.getItem("info")).type === "10") {
// error();
// } else {
window.location.href = `${name}.html`;
// }
// } else {
// window.location.href = `${name}.html`;
// }
}
function hideAllTabItem() {
$(".gfxj").hide();
$(".gsgg").hide();
$(".jjyb").hide();
$(".qkcz").hide();
}
function openDialog(title) {
$(".dialog").css("display", "flex");
let map = {
yxjb: "预先警报",
kxjb: "空袭警报",
jcjb: "解除警报",
fzjb: "防灾警报",
};
let audioMap = {
fzjb: "fz",
yxjb: "yx",
kxjb: "kx",
jcjb: "jc",
};
let contentMap = {
yxjb: "预先告知敌人即将实施空袭要求做好防空袭的准备。规定音响信号鸣36秒停24秒重复3遍为一个周期时间为3分钟。听到预先警报后应立即拉断电闸关闭燃气熄灭炉火携带好个人防护器材和必需的生活用品按定人、定位、定路线的要求迅速有序地进入工程或指定掩蔽地域。",
kxjb: "表明敌空袭兵器已临近空袭即刻或已经开始警告迅速掩蔽。规定音响信号鸣6秒停6秒反复15遍为一个周期时间3分钟。听到空袭警报时应就近进入人防工程掩蔽。如情况紧急无法进入人防工程时要利用地形地物就近掩蔽。",
jcjb: "表明该阶段空袭已结束空袭警报解除。规定音响信号连续长鸣一长声时间为3分钟。进入安全地带。听到解除警报并不意味着危险不存在还可能会出现房屋倒塌和大火附近可能沾染放射性物质或染毒、染菌。因此需要保持清醒的头脑清点并携带好自己的物品有组织地撤出危险区域进入安全地带。恢复生产和生活秩序。由于空袭打乱了社会和家庭的生产、生活秩序为此各类人员应遵守战时的有关规定协助有关部门尽快恢复生产和生活秩序将损失降低到最小。",
fzjb: "鸣15秒停10秒再鸣5秒停10秒反复3遍时间为2分钟。可简单记为“三长三短。”灾情警报是平时发生重大自然灾情和突发事故时发放的警报。主要向人们通报有重大灾情的发生要立即实施应急的救援和采取防护措施。",
};
let temp = audioMap[title];
mp3 = $("#audio")[0];
$(mp3).attr(
"src",
"https://ykdz.yundazhou.com:8000/file/jbmp3/jbmp3" + temp + ".mp3"
);
mp3.play();
$(".dialog .title").text(map[title]);
$(".dialog .content").text(contentMap[title]);
$(".dialog .icon_alert").attr("class", `icon_alert ${title}`);
// icon_alert yxjb
}
function closeDialog() {
$(".dialog").hide();
pausePlay();
}
function pausePlay() {
mp3.pause();
}
</script>
</head>
<body>
<audio
id="audio"
src="https://ykdz.yundazhou.com:8000/file/jbmp3/jbmp3fz.mp3"
></audio>
<div class="dwdh"></div>
<div id="debug" style="display: none">
<button onclick="debugLogin()">登陆</button>
<button onclick="getInfo()">Info</button>
</div>
<!-- <div class="banner"></div> -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- <div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div> -->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<script>
getBanner();
</script>
<div class="tabs">
<div class="tab active" onclick="handleTabClick(this,'index')">
国防宣教
</div>
<div class="tab" onclick="handleTabClick(this,'gsgg')">公示公告</div>
<div class="tab" onclick="handleTabClick(this,'jjyb')">紧急掩蔽</div>
<div class="tab" onclick="handleTabClick(this,'qkcz')">情况处置</div>
</div>
<div class="body">
<!-- 国防宣教 -->
<div class="gfxj">
<div class="layer">
<div class="title"><i class="line"></i>警报试听</div>
<div class="navList">
<div class="navItem">
<div class="navBg fk">防空</div>
<div class="menuList">
<div class="menuItem" onclick="openDialog('yxjb')">
<div class="icon yxjb"></div>
<div>预先警报</div>
</div>
<div class="menuItem" onclick="openDialog('kxjb')">
<div class="icon kxjb"></div>
<div>空袭警报</div>
</div>
<div class="menuItem" onclick="openDialog('jcjb')">
<div class="icon jcjb"></div>
<div>解除警报</div>
</div>
</div>
</div>
<div class="navItem">
<div class="navBg fz">防灾</div>
<div class="menuList">
<div class="menuItem" onclick="openDialog('fzjb')">
<div class="icon fzjb"></div>
<div>防灾警报</div>
</div>
</div>
</div>
</div>
</div>
<div class="layer zcgg">
<div class="title"><i class="line"></i>政策公告</div>
<div class="newslist zcggList" id="zcggList">
<!-- <div class="newsItem">
<div class="newsInfo">
<div class="newsTitle">海浪橙色警报:东海东部将...</div>
<div class="newsContent">国家海洋预报台8月28日8时发...</div>
<div class="newsDetail">
<span class="newsAuthor">李强</span
><span class="newsDate">2024-08-22</span>
</div>
</div>
<img src="" alt="" />
</div>
<div class="newsItem">
<div class="newsInfo">
<div class="newsTitle">海浪橙色警报:东海东部将...</div>
<div class="newsContent">国家海洋预报台8月28日8时发...</div>
<div class="newsDetail">
<span class="newsAuthor">李强</span
><span class="newsDate">2024-08-22</span>
</div>
</div>
<img src="" alt="" />
</div> -->
</div>
<!-- <div class="loader-box">
<div id="loader"></div>
<div id="nothing" class="hidden">没有更多了~</div>
</div> -->
</div>
</div>
<!-- 公示公告 -->
<div class="layer gsgg" style="display: none">
<div class="newslist gsggList">
<!-- <div class="newsItem">
<div class="newsInfo">
<div class="newsTitle">
热到史上第二!高温红色预警信号七连发!
</div>
<div class="newsDetail">
<span class="newsAuthor">李强</span
><span class="newsDate">2024-08-22</span>
</div>
</div>
<img src="" alt="" />
</div>
<div class="newsItem">
<div class="newsInfo">
<div class="newsTitle">海浪橙色警报:东海东部将...</div>
<div class="newsContent">国家海洋预报台8月28日8时发...</div>
<div class="newsDetail">
<span class="newsAuthor">李强</span
><span class="newsDate">2024-08-22</span>
</div>
</div>
<img src="" alt="" />
</div> -->
</div>
</div>
<!-- 情况处置 -->
<!-- <div class="layer qkcz" style="display: none">
<div class="btn_qksb">
<i class="icon_plus" onclick="handleEventUpload()"></i>
</div>
<div class="newslist qkczList"></div>
</div>
<div class="maplayer jjyb" style="display: none">
<div id="container" class="map"></div>
<div class="markList"></div>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=307b14b003f9288ba0cad406d5e1238e"
></script>
<script type="text/javascript">
// var current_position;
// 创建地图实例
var map = new AMap.Map("container", {
zoom: 11,
center: [107.535867, 31.228318],
resizeEnable: true,
});
</script>
</div> -->
</div>
<div class="dialog">
<div class="dialogBox">
<div class="dialog_bg"></div>
<div class="title">
<i class="icon_dots mr142"></i>预先警报<i class="icon_dots ml142"></i>
</div>
<div class="icon_alert yxjb" onclick="pausePlay()"></div>
<div class="content">
预先警报信号的作用是在城市可能遭到空袭的情况下告知市民提前做好防空袭各项准备。音响信号为鸣36秒停24秒重复3遍时间3分钟主要是城市有遭空袭迹象时的早期预报提示人们实施防护或紧急疏散。
</div>
<button class="btn_ok" type="button" onclick="closeDialog()">
我知道了
</button>
<div class="tips">再点击一下图标可以关闭警报</div>
</div>
</div>
<div id="hotal">
<!-- 提示框 -->
<div class="toast_box">
<p id="toast"></p>
</div>
<!-- <button id="toliet" type="button" onclick="correct()">正常</button>
<button id="toliet" type="button" onclick="warning()">警告</button>
<button id="toliet" type="button" onclick="error()">报错异常</button> -->
</div>
</body>
</html>