first commit
This commit is contained in:
jiangrui
commit
a83bb31a60
|
|
@ -0,0 +1,626 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.swiper-container {
|
||||
/* width: 31.25rem; */
|
||||
/* height: 16.67rem; */
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 1.3rem;
|
||||
}
|
||||
.banner {
|
||||
background: url("../img/banner@3x.png") no-repeat;
|
||||
background-size: cover;
|
||||
width: 31.25rem;
|
||||
height: 16.67rem;
|
||||
margin-bottom: 1.3rem;
|
||||
}
|
||||
html {
|
||||
/* width: 31.25rem; */
|
||||
/* width: 100%; */
|
||||
height: 100%;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.body {
|
||||
}
|
||||
.layer {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.tabs {
|
||||
/* width: 5.67rem;
|
||||
height: 2.08rem;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500; */
|
||||
/* width: 31.25rem; */
|
||||
width: 100%;
|
||||
/* height: 16.67rem; */
|
||||
font-size: 1.42rem;
|
||||
|
||||
line-height: 2.08rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 1.67rem;
|
||||
}
|
||||
.tab {
|
||||
position: relative;
|
||||
}
|
||||
.active {
|
||||
color: #4876ff;
|
||||
/* border-bottom: 1px solid #4876ff; */
|
||||
}
|
||||
.active::after {
|
||||
content: "";
|
||||
width: 1.67rem;
|
||||
height: 0.33rem;
|
||||
background: #4876ff;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
bottom: -1rem;
|
||||
border-radius: 0.17rem 0.17rem 0.17rem 0.17rem;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
width: 5.33rem;
|
||||
height: 2.08rem;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 1.33rem;
|
||||
color: #333333;
|
||||
line-height: 2.08rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-bottom: 0.28rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.line {
|
||||
width: 0.33rem;
|
||||
height: 1.33rem;
|
||||
background: #4876ff;
|
||||
border-radius: 0.33rem 0.33rem 0.33rem 0.33rem;
|
||||
display: inline-block;
|
||||
margin-right: 0.67rem;
|
||||
}
|
||||
.navItem {
|
||||
width: 29.17rem;
|
||||
height: 6.67rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.67rem 0.67rem 0.67rem 0.67rem;
|
||||
border: 0.08rem solid #eeeeee;
|
||||
display: flex;
|
||||
margin-top: 0.83rem;
|
||||
/* align-items: center;
|
||||
justify-content: center; */
|
||||
}
|
||||
.navBg {
|
||||
width: 8.33rem;
|
||||
height: 6.67rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* width: 2.5rem;
|
||||
height: 2.08rem; */
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #ffffff;
|
||||
line-height: 2.08rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.fk {
|
||||
background: url("../img/fk.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.fz {
|
||||
background: url("../img/fz.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.menuList {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
/* padding: 0.75rem 0 0 2.75rem; */
|
||||
padding: 9px 11px 0 21px;
|
||||
}
|
||||
.menuItem {
|
||||
margin-right: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.menuitem:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.icon {
|
||||
width: 2.67rem;
|
||||
height: 2.67rem;
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.yxjb {
|
||||
background: url("../img/yxjb.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.kxjb {
|
||||
background: url("../img/kxjb.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.jcjb {
|
||||
background: url("../img/jcjb.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.fzjb {
|
||||
background: url("../img/fzjb.png") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.list {
|
||||
}
|
||||
.newsItem {
|
||||
width: 100%;
|
||||
/* height: 6.67rem; */
|
||||
display: flex;
|
||||
border-bottom: 0.08rem solid #eeeeee;
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 1.67rem;
|
||||
}
|
||||
.newsTitle {
|
||||
/* width: 17.5rem;
|
||||
height: 2.08rem; */
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #333333;
|
||||
line-height: 2.08rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.newsContent {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 1.17rem;
|
||||
color: #999999;
|
||||
line-height: 2.08rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.newsInfo {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* justify-content: space-evenly; */
|
||||
justify-content: space-between;
|
||||
}
|
||||
.newsDetail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.newsAuthor {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: #4876ff;
|
||||
line-height: 1rem;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.newsDate {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
color: #999999;
|
||||
line-height: 1rem;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.newsItem > img {
|
||||
width: 10rem;
|
||||
height: 6.67rem;
|
||||
border-radius: 0.33rem 0.33rem 0.33rem 0.33rem;
|
||||
margin-left: 1.67rem;
|
||||
}
|
||||
.dialog {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
display: none;
|
||||
z-index: 99;
|
||||
}
|
||||
.dialogBox {
|
||||
background: #fff;
|
||||
background-color: #fff;
|
||||
margin: 0 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 2.5rem;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
}
|
||||
.dialogBox > .dialog_bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../img/dialog_bg.png") no-repeat;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.dialogBox > .title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 1.42rem;
|
||||
color: #0f194d;
|
||||
line-height: 2.33rem;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.icon_dots {
|
||||
background: url("../img/icon_dots.png") no-repeat;
|
||||
background-size: 100%;
|
||||
width: 0.92rem;
|
||||
height: 0.92rem;
|
||||
display: inline-block;
|
||||
}
|
||||
.icon_alert {
|
||||
width: 5.33rem;
|
||||
height: 5.33rem;
|
||||
display: inline-block;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.content {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: #333333;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: 2px;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 2.08rem;
|
||||
}
|
||||
.mr142 {
|
||||
margin-right: 1.42rem;
|
||||
}
|
||||
.ml142 {
|
||||
margin-left: 1.42rem;
|
||||
}
|
||||
.btn_ok {
|
||||
width: 23.33rem;
|
||||
height: 3.33rem;
|
||||
border: none;
|
||||
background: linear-gradient(270deg, #4876ff 0%, #388dff 100%);
|
||||
box-shadow: 0rem 0.75rem 0.75rem 0rem rgba(72, 118, 255, 0.2);
|
||||
border-radius: 0.67rem 0.67rem 0.67rem 0.67rem;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 1.33rem;
|
||||
color: #ffffff;
|
||||
line-height: 2rem;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: 2.17rem;
|
||||
}
|
||||
.tips {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 1.17rem;
|
||||
color: rgba(15, 25, 77, 0.5);
|
||||
line-height: 1.83rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: 2.17rem;
|
||||
}
|
||||
.mapLayer {
|
||||
/* width: 31.25rem;
|
||||
height: 16.67rem; */
|
||||
width: 31.25rem;
|
||||
height: 37.5rem;
|
||||
}
|
||||
.map {
|
||||
/* width: 31.25rem; */
|
||||
width: 100%;
|
||||
height: 16.67rem;
|
||||
}
|
||||
.markList {
|
||||
/* width: 31.25rem; */
|
||||
width: 100%;
|
||||
height: 20.58rem;
|
||||
background: #ffffff;
|
||||
border-radius: 15px 15px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.markItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1.67rem 0 0.92rem 0;
|
||||
border-bottom: 0.08rem solid #eeeeee;
|
||||
}
|
||||
.markTitle {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 1.33rem;
|
||||
color: #333333;
|
||||
line-height: 2.08rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.markInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ssInfo {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 1.08rem;
|
||||
color: #333;
|
||||
line-height: 1rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.spanTag {
|
||||
background: rgba(72, 118, 255, 0.1);
|
||||
border-radius: 0.33rem 0.33rem 0.33rem 0.33rem;
|
||||
padding: 0.33rem 0.58rem;
|
||||
color: #4876ff;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.ssrsText {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 1.08rem;
|
||||
color: #999999;
|
||||
line-height: 1rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.icon_guide {
|
||||
background: url("../img/icon_guide.png") no-repeat;
|
||||
background-size: cover;
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
.markGuide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.btn_qksb {
|
||||
border-radius: 4rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
background: #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* position: fixed;
|
||||
right: 1.67rem;
|
||||
bottom: 3.33rem; */
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
.icon_plus {
|
||||
background: url("../img/btn_qksb.png");
|
||||
background-size: cover;
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
@keyframes show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toast_box {
|
||||
/* width: 100%; */
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
/* justify-content: center; */
|
||||
z-index: 10;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toast_box p {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
width: max-content;
|
||||
/* 提示框的背景色 */
|
||||
background: #707070;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.toliet {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#loader {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 3px solid #ddd;
|
||||
border-radius: 50%;
|
||||
border-bottom: 3px solid #717171;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
#loader {
|
||||
animation: loading 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
#hotal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.current {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 15px 15px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 1rem;
|
||||
border: 1px solid orange;
|
||||
}
|
||||
img[src=""],
|
||||
img:not([src]) {
|
||||
visibility: hidden;
|
||||
}
|
||||
.icon_fullScreen {
|
||||
background: url("../img/fullscreen.png");
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.icon_fullScreen_exit {
|
||||
background: url("../img/fullscreen_exit.png");
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
display: none;
|
||||
}
|
||||
.mapFullScreen {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.toolBar {
|
||||
position: fixed;
|
||||
right: 1.67rem;
|
||||
bottom: 3.33rem;
|
||||
width: 90%;
|
||||
height: 48px;
|
||||
/* background: #fff; */
|
||||
border-radius: 4rem;
|
||||
/* padding: 0 0 0 29px ; */
|
||||
}
|
||||
.menus_qksb {
|
||||
width: 100%;
|
||||
/* display: flex; */
|
||||
|
||||
border-radius: 4rem;
|
||||
padding-right: 48px;
|
||||
/* justify-content: space-between; */
|
||||
transition: all ease 1s;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.toolBarBox {
|
||||
background: linear-gradient(180deg, #336eff 0%, rgba(51, 110, 255, 1) 100%);
|
||||
opacity: 0.1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border-radius: 4rem;
|
||||
display: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.menuIcon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-size: cover !important;
|
||||
}
|
||||
.ico_jcmd {
|
||||
background: url("../img/ico_jcmd.png");
|
||||
}
|
||||
.ico_xsyy {
|
||||
background: url("../img/ico_xsyy.png");
|
||||
}
|
||||
.ico_yjjy {
|
||||
background: url("../img/ico_yjjy.png");
|
||||
}
|
||||
.ico_xcsb {
|
||||
background: url("../img/ico_xcsb.png");
|
||||
}
|
||||
.menuItem_qksb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.toggled {
|
||||
display: flex;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,119 @@
|
|||
<!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>
|
||||
// var dw = window.innerWidth;
|
||||
// var dh = window.innerHeight;
|
||||
var code;
|
||||
var gsggListQuery = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
};
|
||||
var gsggTotal = 0;
|
||||
$(function () {
|
||||
// console.log(dw, dh);
|
||||
// $(".banner").width = dw;
|
||||
code = getUrlParam("code");
|
||||
// dw = code;
|
||||
// $(".dwdh").text(code);
|
||||
// login(code);
|
||||
// newsList();
|
||||
ggList();
|
||||
// eventList();
|
||||
});
|
||||
function getUrlParam(name) {
|
||||
var searchParams = new URLSearchParams(window.location.search);
|
||||
return searchParams.get(name);
|
||||
}
|
||||
|
||||
// console.log(code);
|
||||
|
||||
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 closeDialog() {
|
||||
// console.log(123);
|
||||
$(".dialog").hide();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dwdh"></div>
|
||||
<!-- <button onclick="login()">登陆</button> -->
|
||||
<!-- <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" onclick="handleTabClick(this,'index')">国防宣教</div>
|
||||
<div class="tab active" 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="layer gsgg">
|
||||
<div class="newslist gsggList"></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>
|
||||
<!-- style="display: none;" -->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 817 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 357 B |
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 841 B |
Binary file not shown.
|
After Width: | Height: | Size: 631 B |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 519 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 497 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 685 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -0,0 +1,345 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,367 @@
|
|||
<!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>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.form {
|
||||
padding: 34px 22px 0 19px;
|
||||
}
|
||||
.form-item {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.label {
|
||||
width: 74px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.preUploadDiv {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.preUploadImg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.preUploadDiv:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.uploadBox {
|
||||
background: url("./img/upload.png");
|
||||
background-size: cover;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.upload {
|
||||
opacity: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.fileList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon_delete {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
background: url("./img/icon_delete.png");
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
/* padding: 8px 16px; */
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f6;
|
||||
padding-left: 16px;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
select {
|
||||
/* width: 256px; */
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f6;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
.fileListBox {
|
||||
flex: 1;
|
||||
}
|
||||
.btn_center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.btn_submit {
|
||||
width: 330px;
|
||||
height: 40px;
|
||||
background: #4876ff;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
line-height: 25px;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script src="./js/jquery.min.js"></script>
|
||||
<script>
|
||||
var BASE = "https://ykdz.yundazhou.com:8000/api";
|
||||
|
||||
var fileList = [];
|
||||
|
||||
function uploadChange(event) {
|
||||
var file = event.target.files[0];
|
||||
|
||||
if (file) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
var img = document.createElement("img");
|
||||
img.src = e.target.result;
|
||||
// document.body.appendChild(img);
|
||||
// 这里可以添加上传图片到服务器的代码
|
||||
// alert(e.target.result)
|
||||
|
||||
let tempFile = DataURIToBlob(e.target.result);
|
||||
|
||||
let fd = new FormData();
|
||||
fd.append("file", tempFile);
|
||||
upload(fd);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
// alert(JSON.stringify(reader.readAsDataURL(file)))
|
||||
}
|
||||
|
||||
// var input = document.getElementById('upload');
|
||||
// if (input.files && input.files) {
|
||||
// var reader = new FileReader();
|
||||
|
||||
// reader.onload = function (e) {
|
||||
// var previewImage = document.getElementById("previewImage");
|
||||
// previewImage.src = e.target.result;
|
||||
// previewImage.style.display = "block";
|
||||
// };
|
||||
// // alert(JSON.stringify(input.files))
|
||||
// reader.readAsDataURL(input.files);
|
||||
// }
|
||||
// var formData = new FormData();
|
||||
|
||||
// let files = $("#upload")[0].files;
|
||||
|
||||
// alert(JSON.stringify(val));
|
||||
// var formData = new FormData();
|
||||
// for (let i = 0; i < files.length; i++) {
|
||||
// formData.append("file", files[i]);
|
||||
// upload(formData);
|
||||
// }
|
||||
}
|
||||
|
||||
function DataURIToBlob(dataURI) {
|
||||
const splitDataURI = dataURI.split(",");
|
||||
const byteString =
|
||||
splitDataURI[0].indexOf("base64") >= 0
|
||||
? atob(splitDataURI[1])
|
||||
: decodeURI(splitDataURI[1]);
|
||||
const mimeString = splitDataURI[0].split(":")[1].split(";")[0];
|
||||
|
||||
const ia = new Uint8Array(byteString.length);
|
||||
for (let i = 0; i < byteString.length; i++)
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
|
||||
return new Blob([ia], { type: mimeString });
|
||||
}
|
||||
|
||||
function upload(formData) {
|
||||
// alert(formData);
|
||||
$.ajax({
|
||||
url: BASE + "/commonLogin/upload",
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
|
||||
headers: { Authorization: sessionStorage.token },
|
||||
success: function (data) {
|
||||
// alert(JSON.stringify(data));
|
||||
if (data.c === 200) {
|
||||
// console.log(data);
|
||||
// alert('200',JSON.stringify(data));
|
||||
fileList.push(data.d);
|
||||
renderFileList();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function renderFileList() {
|
||||
$(".preUploadDiv").remove();
|
||||
fileList.map((item, index) => {
|
||||
$(".fileList").prepend(
|
||||
`<div class="preUploadDiv"><img class="preUploadImg" src="${item}"><i class="icon_delete" onclick="removeUpload(${index})"></i></div>`
|
||||
);
|
||||
});
|
||||
}
|
||||
function removeUpload(index) {
|
||||
fileList.splice(index, 1);
|
||||
renderFileList();
|
||||
// $('.fileList')[index].remove()
|
||||
// $(".preUploadDiv")[index].remove();
|
||||
}
|
||||
function submit() {
|
||||
let params = {
|
||||
// address: "",
|
||||
content: $("#content").val(),
|
||||
imageUrls: [...fileList].toString(),
|
||||
// lat: "",
|
||||
// lng: "",
|
||||
// type: $("#type").val(),
|
||||
// dept: $("#dept").val(),
|
||||
staffName: $("#staffName").val(),
|
||||
staffPhone: $("#staffPhone").val(),
|
||||
type: $("#content").val(),
|
||||
type2: '1',
|
||||
};
|
||||
$.ajax({
|
||||
url: BASE + "/eventRecord/upload",
|
||||
type: "POST",
|
||||
// data: JSON.stringify(param),
|
||||
data: JSON.stringify(params),
|
||||
// async: true,
|
||||
dataType: "json",
|
||||
contentType: "application/json; charset=UTF-8",
|
||||
headers: { Authorization: sessionStorage.token },
|
||||
success: function (data) {
|
||||
if (data.c === 200) {
|
||||
console.log(data);
|
||||
window.history.back();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<input
|
||||
id="upload"
|
||||
type="file"
|
||||
hidden
|
||||
onchange="uploadChange(event)"
|
||||
capture="camera"
|
||||
accept="image/*"
|
||||
/>
|
||||
<input type="text" id="type2" hidden value="1" />
|
||||
|
||||
<div class="form">
|
||||
<!-- <div class="form-item" id="item_type">
|
||||
<div class="label">巡查类型</div>
|
||||
<select id="type">
|
||||
<option value="" style="display: none; font-size: 14px">
|
||||
请选择
|
||||
</option>
|
||||
<option label="发现国动设施附近施工" value="1"></option>
|
||||
<option label="发现国动设施处倾倒建渣或垃圾" value="2"></option>
|
||||
<option label="发现在国动设施正被破坏" value="3"></option>
|
||||
<option label="发现在国动设施已被破坏" value="4"></option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">姓名</div>
|
||||
<input type="text" id="staffName" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">电话</div>
|
||||
<input type="text" id="staffPhone" />
|
||||
</div>
|
||||
<!-- <div class="form-item">
|
||||
<div class="label">部门</div>
|
||||
<select id="dept">
|
||||
<option value="" style="display: none; font-size: 14px">
|
||||
请选择
|
||||
</option>
|
||||
<option label="社区" value="社区"></option>
|
||||
<option label="国动部门" value="国动部门"></option>
|
||||
<option label="国动设施管理单位" value="国动设施管理单位"></option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">内容</div>
|
||||
<textarea
|
||||
name=""
|
||||
id="content"
|
||||
cols="30"
|
||||
rows="10"
|
||||
placeholder="请输入"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- <div class="form-item">
|
||||
<label for="">现场照片</label>
|
||||
<input id="upload" type="file" multiple onchange="uploadChange()" />
|
||||
<div class="fileList"></div>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">现场照片</div>
|
||||
<div class="fileListBox">
|
||||
<div class="fileList">
|
||||
<img
|
||||
id="previewImage"
|
||||
src="#"
|
||||
alt="Image preview"
|
||||
style="display: none; width: 100%; max-width: 300px"
|
||||
/>
|
||||
<div class="uploadBox" onclick="$('input').click()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_center">
|
||||
<button class="btn_submit" type="button" onclick="submit()">上报</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!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 code;
|
||||
var map;
|
||||
var jjybListQuery = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
};
|
||||
var jjybTotal = 0;
|
||||
$(function () {
|
||||
let local = sessionStorage.getItem("local").split(",");
|
||||
// console.log(local);
|
||||
// alert(local)
|
||||
map = new AMap.Map("container", {
|
||||
zoom: 13,
|
||||
center: [local[0], local[1]],
|
||||
resizeEnable: true,
|
||||
});
|
||||
// alert(1)
|
||||
console.log("###", map);
|
||||
var marker = new AMap.Marker({
|
||||
map: map,
|
||||
position: [local[0], local[1]],
|
||||
});
|
||||
// alert(2)
|
||||
markList();
|
||||
// alert(3)
|
||||
});
|
||||
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 closeDialog() {
|
||||
// console.log(123);
|
||||
$(".dialog").hide();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
<script>
|
||||
getBanner();
|
||||
</script>
|
||||
<div class="tabs">
|
||||
<div class="tab" onclick="handleTabClick(this,'index')">国防宣教</div>
|
||||
<div class="tab" onclick="handleTabClick(this,'gsgg')">公示公告</div>
|
||||
<div class="tab active" onclick="handleTabClick(this,'jjyb')">
|
||||
紧急掩蔽
|
||||
</div>
|
||||
<div class="tab" onclick="handleTabClick(this,'qkcz')">情况处置</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="maplayer jjyb">
|
||||
<div id="container" class="map">
|
||||
<div onclick="fullScreen()" class="icon_fullScreen"></div>
|
||||
<div onclick="exitFullScreen()" class="icon_fullScreen_exit"></div>
|
||||
</div>
|
||||
<div class="current"></div>
|
||||
<div class="markList"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hotal">
|
||||
<div class="toast_box">
|
||||
<p id="toast"></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
// let local = sessionStorage.getItem("local").split(",");
|
||||
// var map = new AMap.Map("container", {
|
||||
// zoom: 18,
|
||||
// center: [local[0], local[1]],
|
||||
// resizeEnable: true,
|
||||
// });
|
||||
// console.log('###',map)
|
||||
// var marker = new AMap.Marker({
|
||||
// map: map,
|
||||
// position: [local[0], local[1]],
|
||||
// });
|
||||
</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,76 @@
|
|||
<!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" />
|
||||
<title>详情</title>
|
||||
<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>
|
||||
var newsId;
|
||||
$(function () {
|
||||
newsId = getUrlParam("id");
|
||||
getNewsInfo(newsId);
|
||||
});
|
||||
function getUrlParam(name) {
|
||||
var searchParams = new URLSearchParams(window.location.search);
|
||||
return searchParams.get(name);
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
padding: 24px 15px 50px 15px;
|
||||
}
|
||||
.title {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
letter-spacing: 1px;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.info {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
line-height: 25px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.author {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #4876ff;
|
||||
line-height: 25px;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.content{
|
||||
margin-top: 28px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title"></div>
|
||||
<div class="info">
|
||||
<div class="author">发布人</div>
|
||||
<div class="date"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!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>
|
||||
var qkczListQuery = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
};
|
||||
var qkczTotal = 0;
|
||||
$(function () {
|
||||
eventList();
|
||||
init();
|
||||
});
|
||||
function handleTabClick(el, name) {
|
||||
window.location.href = `${name}.html`;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dwdh"></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" onclick="handleTabClick(this,'index')">国防宣教</div>
|
||||
<div class="tab" onclick="handleTabClick(this,'gsgg')">公示公告</div>
|
||||
<div class="tab" onclick="handleTabClick(this,'jjyb')">紧急掩蔽</div>
|
||||
<div class="tab active" onclick="handleTabClick(this,'qkcz')">
|
||||
情况处置
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<!-- 情况处置 -->
|
||||
<div class="layer qkcz">
|
||||
<div class="toolBar">
|
||||
<div class="toolBarBox"></div>
|
||||
<div class="btn_qksb">
|
||||
<!-- <i class="icon_plus" onclick="handleEventUpload()"></i> -->
|
||||
<i class="icon_plus" onclick="toggleToolBar()"></i>
|
||||
</div>
|
||||
<div class="menus_qksb">
|
||||
<div class="menuItem_qksb" onclick="handleEventUpload(1)">
|
||||
<i class="menuIcon ico_jcmd"></i>
|
||||
<span>基层矛盾</span>
|
||||
</div>
|
||||
<div class="menuItem_qksb" onclick="handleEventUpload(2)">
|
||||
<i class="menuIcon ico_xsyy"></i>
|
||||
<span>线上预约</span>
|
||||
</div>
|
||||
<div class="menuItem_qksb" onclick="handleEventUpload(3)">
|
||||
<i class="menuIcon ico_yjjy"></i>
|
||||
<span>应急救援</span>
|
||||
</div>
|
||||
<div class="menuItem_qksb" onclick="handleEventUpload(4)">
|
||||
<i class="menuIcon ico_xcsb"></i>
|
||||
<span>巡查上报</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="menus_qksb">
|
||||
<div class="menuItem_qksb">
|
||||
<i class="menuIcon"></i>
|
||||
<span>基层矛盾</span>
|
||||
</div>
|
||||
<div class="menuItem_qksb">
|
||||
<i class="menuIcon"></i>
|
||||
<span>基层矛盾</span>
|
||||
</div>
|
||||
<div class="menuItem_qksb">
|
||||
<i class="menuIcon"></i>
|
||||
<span>基层矛盾</span>
|
||||
</div>
|
||||
<div class="menuItem_qksb">
|
||||
<i class="menuIcon"></i>
|
||||
<span>基层矛盾</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="newslist qkczList"></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>
|
||||
|
|
@ -0,0 +1,308 @@
|
|||
<!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" />
|
||||
<title>情况处置</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font-size: 15px;
|
||||
/* background: #f5f5f6; */
|
||||
background-color: #f5f5f6;
|
||||
/* background: url('./img/bg.png'); */
|
||||
/* padding: 12px; */
|
||||
/* background: #fff; */
|
||||
}
|
||||
.bodyBg {
|
||||
background: url("./img/bg.png");
|
||||
background-size: cover;
|
||||
height: 210px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.statusBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 350px;
|
||||
height: 50px;
|
||||
/* height: 36px; */
|
||||
/* width: 100%; */
|
||||
/* background: #fff; */
|
||||
box-sizing: border-box;
|
||||
padding: 5px 20px 0 20px;
|
||||
/* margin-top: 10px; */
|
||||
margin: 10px 12px;
|
||||
/* margin-bottom: 10px; */
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
#ffffff 100%
|
||||
);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
}
|
||||
#status {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #4876ff;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.contentBox {
|
||||
background: #fff;
|
||||
padding: 14px 20px;
|
||||
margin: 12px;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
position: relative;
|
||||
}
|
||||
.title {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
/* color: #4876ff; */
|
||||
line-height: 26px;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 3px;
|
||||
color: #0f194d;
|
||||
/* width: 346px; */
|
||||
|
||||
/* justify-content: center; */
|
||||
}
|
||||
.content {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #666666;
|
||||
line-height: 26px;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.infoItem div:nth-child(1) {
|
||||
width: 90px;
|
||||
}
|
||||
.infoItem div:nth-child(2) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #666666;
|
||||
line-height: 26px;
|
||||
text-align: justify;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
/* margin-left: 20px; */
|
||||
flex: 1;
|
||||
}
|
||||
.infoList {
|
||||
line-height: 30px;
|
||||
background: #f5f5f6;
|
||||
padding: 19px 10px;
|
||||
color: #999999;
|
||||
}
|
||||
.infoItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.imgList {
|
||||
margin-bottom: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.previewImgItem {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.previewImgItem:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.border {
|
||||
height: 10px;
|
||||
background: #f5f5f6;
|
||||
}
|
||||
.previewLayer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #000;
|
||||
display: none;
|
||||
align-items: center;
|
||||
}
|
||||
.previewImg {
|
||||
/* background-size: 100% !important; */
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
}
|
||||
.btn_close {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
/* background: #fff; */
|
||||
border-radius: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
img[src=""],
|
||||
img:not([src]) {
|
||||
visibility: hidden;
|
||||
}
|
||||
.icon_title {
|
||||
background: url("./img/icon_title.png");
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
display: inline-block;
|
||||
background-size: cover;
|
||||
}
|
||||
.contentBg {
|
||||
height: 60px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#3f74f6 0%,
|
||||
rgba(63, 116, 246, 0) 100%
|
||||
);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.infoItem{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script src="./js/jquery.min.js"></script>
|
||||
<script src="./js/moment.js"></script>
|
||||
<script src="./js/api.js"></script>
|
||||
|
||||
<script>
|
||||
// $(function () {
|
||||
// newsId = getUrlParam("id");
|
||||
// getEventInfo(id);
|
||||
// });
|
||||
// function getUrlParam(name) {
|
||||
// var searchParams = new URLSearchParams(window.location.search);
|
||||
// return searchParams.get(name);
|
||||
// }
|
||||
var eventId;
|
||||
$(function () {
|
||||
eventId = getUrlParam("id");
|
||||
getEventInfo(eventId);
|
||||
});
|
||||
function getUrlParam(name) {
|
||||
var searchParams = new URLSearchParams(window.location.search);
|
||||
return searchParams.get(name);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bodyBg"></div>
|
||||
<div class="previewLayer">
|
||||
<!-- <div class="previewImg"></div> -->
|
||||
<img class="previewImg" src="" alt="" />
|
||||
<div class="btn_close" onclick="handleClosePreview()">X</div>
|
||||
</div>
|
||||
<div class="statusBox">
|
||||
<div>事件状态：<span id="status"></span></div>
|
||||
</div>
|
||||
<!-- <div class="border"></div> -->
|
||||
<div class="contentBox">
|
||||
<div class="contentBg"></div>
|
||||
<div class="title"><i class="icon_title"></i>详细内容</div>
|
||||
<div class="content"></div>
|
||||
<div class="imgList"></div>
|
||||
<div class="infoList">
|
||||
<!-- 基层矛盾 -->
|
||||
<div class="infoItem jcmd">
|
||||
<div>姓名</div>
|
||||
<div id="staffName"></div>
|
||||
</div>
|
||||
<div class="infoItem jcmd">
|
||||
<div>电话</div>
|
||||
<div id="staffPhone"></div>
|
||||
</div>
|
||||
|
||||
<!-- 线上预约 -->
|
||||
<div class="infoItem xsyy">
|
||||
<div>联系人</div>
|
||||
<div id="staffName"></div>
|
||||
</div>
|
||||
<div class="infoItem xsyy">
|
||||
<div>联系电话</div>
|
||||
<div id="staffPhone"></div>
|
||||
</div>
|
||||
<div class="infoItem xsyy">
|
||||
<div>报件类型</div>
|
||||
<div id="type"></div>
|
||||
</div>
|
||||
<!-- <div class="infoItem">
|
||||
<div>报件内容</div>
|
||||
<div id="content"></div>
|
||||
</div> -->
|
||||
<!-- 应急救援 -->
|
||||
<div class="infoItem yjjy">
|
||||
<div>联系人</div>
|
||||
<div id="staffName"></div>
|
||||
</div>
|
||||
<div class="infoItem yjjy">
|
||||
<div>联系电话</div>
|
||||
<div id="staffPhone"></div>
|
||||
</div>
|
||||
<div class="infoItem yjjy">
|
||||
<div>时间</div>
|
||||
<div id="uploadTime"></div>
|
||||
</div>
|
||||
<div class="infoItem yjjy">
|
||||
<div>地点</div>
|
||||
<div id="address"></div>
|
||||
</div>
|
||||
<!-- 巡查上报 -->
|
||||
<div class="infoItem xcsb">
|
||||
<div>上报人</div>
|
||||
<div id="staffName"></div>
|
||||
</div>
|
||||
<div class="infoItem xcsb">
|
||||
<div>上报时间</div>
|
||||
<div id="uploadTime"></div>
|
||||
</div>
|
||||
<div class="infoItem xcsb">
|
||||
<div>处置时间</div>
|
||||
<div id="dealTime"></div>
|
||||
</div>
|
||||
<div class="infoItem xcsb">
|
||||
<div>分类</div>
|
||||
<div id="type2"></div>
|
||||
</div>
|
||||
<div class="infoItem xcsb">
|
||||
<div>事件类型</div>
|
||||
<div id="type"></div>
|
||||
</div>
|
||||
<div class="infoItem xcsb">
|
||||
<div>部门</div>
|
||||
<div id="dept"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
<!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>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.form {
|
||||
padding: 34px 22px 0 19px;
|
||||
}
|
||||
.form-item {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.label {
|
||||
width: 74px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.preUploadDiv {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.preUploadImg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.preUploadDiv:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.uploadBox {
|
||||
background: url("./img/upload.png");
|
||||
background-size: cover;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.upload {
|
||||
opacity: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.fileList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon_delete {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
background: url("./img/icon_delete.png");
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
/* padding: 8px 16px; */
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f6;
|
||||
padding-left: 16px;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
select {
|
||||
/* width: 256px; */
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f6;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
.fileListBox {
|
||||
flex: 1;
|
||||
}
|
||||
.btn_center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.btn_submit {
|
||||
width: 330px;
|
||||
height: 40px;
|
||||
background: #4876ff;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
line-height: 25px;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script src="./js/jquery.min.js"></script>
|
||||
<script>
|
||||
var BASE = "https://ykdz.yundazhou.com:8000/api";
|
||||
|
||||
var fileList = [];
|
||||
$(function () {
|
||||
type2 = getUrlParam("type2");
|
||||
// $("#type2").val(type2);
|
||||
// switch (type2) {
|
||||
// case "1":
|
||||
// $("#item_type").hide();
|
||||
// break;
|
||||
// case "2":
|
||||
// // $("#item_type").hide();
|
||||
// // $("#type").attr("type", "text");
|
||||
// $("#item_type").find("select").remove();
|
||||
// $("#item_type").append(`<input id="type" type="text">`);
|
||||
// break;
|
||||
// case "3":
|
||||
// $("#item_type").hide();
|
||||
// break;
|
||||
// case "4":
|
||||
// $("#item_type").show();
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// getNewsInfo(newsId);
|
||||
});
|
||||
function getUrlParam(name) {
|
||||
var searchParams = new URLSearchParams(window.location.search);
|
||||
return searchParams.get(name);
|
||||
}
|
||||
function uploadChange(event) {
|
||||
var file = event.target.files[0];
|
||||
|
||||
if (file) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
var img = document.createElement("img");
|
||||
img.src = e.target.result;
|
||||
// document.body.appendChild(img);
|
||||
// 这里可以添加上传图片到服务器的代码
|
||||
// alert(e.target.result)
|
||||
|
||||
let tempFile = DataURIToBlob(e.target.result);
|
||||
|
||||
let fd = new FormData();
|
||||
fd.append("file", tempFile);
|
||||
upload(fd);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
// alert(JSON.stringify(reader.readAsDataURL(file)))
|
||||
}
|
||||
|
||||
// var input = document.getElementById('upload');
|
||||
// if (input.files && input.files) {
|
||||
// var reader = new FileReader();
|
||||
|
||||
// reader.onload = function (e) {
|
||||
// var previewImage = document.getElementById("previewImage");
|
||||
// previewImage.src = e.target.result;
|
||||
// previewImage.style.display = "block";
|
||||
// };
|
||||
// // alert(JSON.stringify(input.files))
|
||||
// reader.readAsDataURL(input.files);
|
||||
// }
|
||||
// var formData = new FormData();
|
||||
|
||||
// let files = $("#upload")[0].files;
|
||||
|
||||
// alert(JSON.stringify(val));
|
||||
// var formData = new FormData();
|
||||
// for (let i = 0; i < files.length; i++) {
|
||||
// formData.append("file", files[i]);
|
||||
// upload(formData);
|
||||
// }
|
||||
}
|
||||
|
||||
function DataURIToBlob(dataURI) {
|
||||
const splitDataURI = dataURI.split(",");
|
||||
const byteString =
|
||||
splitDataURI[0].indexOf("base64") >= 0
|
||||
? atob(splitDataURI[1])
|
||||
: decodeURI(splitDataURI[1]);
|
||||
const mimeString = splitDataURI[0].split(":")[1].split(";")[0];
|
||||
|
||||
const ia = new Uint8Array(byteString.length);
|
||||
for (let i = 0; i < byteString.length; i++)
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
|
||||
return new Blob([ia], { type: mimeString });
|
||||
}
|
||||
|
||||
function upload(formData) {
|
||||
// alert(formData);
|
||||
$.ajax({
|
||||
url: BASE + "/commonLogin/upload",
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
|
||||
headers: { Authorization: sessionStorage.token },
|
||||
success: function (data) {
|
||||
// alert(JSON.stringify(data));
|
||||
if (data.c === 200) {
|
||||
// console.log(data);
|
||||
// alert('200',JSON.stringify(data));
|
||||
fileList.push(data.d);
|
||||
renderFileList();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function renderFileList() {
|
||||
$(".preUploadDiv").remove();
|
||||
fileList.map((item, index) => {
|
||||
$(".fileList").prepend(
|
||||
`<div class="preUploadDiv"><img class="preUploadImg" src="${item}"><i class="icon_delete" onclick="removeUpload(${index})"></i></div>`
|
||||
);
|
||||
});
|
||||
}
|
||||
function removeUpload(index) {
|
||||
fileList.splice(index, 1);
|
||||
renderFileList();
|
||||
// $('.fileList')[index].remove()
|
||||
// $(".preUploadDiv")[index].remove();
|
||||
}
|
||||
function submit() {
|
||||
let params = {
|
||||
// address: "",
|
||||
content: $("#content").val(),
|
||||
imageUrls: [...fileList].toString(),
|
||||
// lat: "",
|
||||
// lng: "",
|
||||
staffName: $("#staffName").val(),
|
||||
staffPhone: $("#staffPhone").val(),
|
||||
type: $("#type").val(),
|
||||
dept: $("#dept").val().toString(),
|
||||
type2: $("#type2").val(),
|
||||
};
|
||||
$.ajax({
|
||||
url: BASE + "/eventRecord/upload",
|
||||
type: "POST",
|
||||
// data: JSON.stringify(param),
|
||||
data: JSON.stringify(params),
|
||||
// async: true,
|
||||
dataType: "json",
|
||||
contentType: "application/json; charset=UTF-8",
|
||||
headers: { Authorization: sessionStorage.token },
|
||||
success: function (data) {
|
||||
if (data.c === 200) {
|
||||
console.log(data);
|
||||
window.history.back();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<input
|
||||
id="upload"
|
||||
type="file"
|
||||
hidden
|
||||
onchange="uploadChange(event)"
|
||||
capture="camera"
|
||||
accept="image/*"
|
||||
/>
|
||||
<input type="text" id="type2" hidden value="4" />
|
||||
|
||||
<div class="form">
|
||||
<div class="form-item">
|
||||
<div class="label">联系人</div>
|
||||
<input type="text" id="staffName" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">联系电话</div>
|
||||
<input type="text" id="staffPhone" />
|
||||
</div>
|
||||
<div class="form-item" id="item_type">
|
||||
<div class="label">巡查类型</div>
|
||||
<select id="type">
|
||||
<option value="" style="display: none; font-size: 14px">
|
||||
请选择
|
||||
</option>
|
||||
<option label="发现国动设施附近施工" value="发现国动设施附近施工"></option>
|
||||
<option label="发现国动设施处倾倒建渣或垃圾" value="发现国动设施处倾倒建渣或垃圾"></option>
|
||||
<option label="发现在国动设施正被破坏" value="发现在国动设施正被破坏"></option>
|
||||
<option label="发现在国动设施已被破坏" value="发现在国动设施已被破坏"></option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="form-item" id="item_type_input">
|
||||
<div class="label">巡查类型</div>
|
||||
<input type="text" id="type">
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">部门</div>
|
||||
<select id="dept" multiple=”multiple”>
|
||||
<option value="" style="display: none; font-size: 14px">
|
||||
请选择
|
||||
</option>
|
||||
<option label="社区" value="社区"></option>
|
||||
<option label="国动部门" value="国动部门"></option>
|
||||
<option label="国动设施管理单位" value="国动设施管理单位"></option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">巡查内容</div>
|
||||
<textarea
|
||||
name=""
|
||||
id="content"
|
||||
cols="30"
|
||||
rows="10"
|
||||
placeholder="请输入"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- <div class="form-item">
|
||||
<label for="">现场照片</label>
|
||||
<input id="upload" type="file" multiple onchange="uploadChange()" />
|
||||
<div class="fileList"></div>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">现场照片</div>
|
||||
<div class="fileListBox">
|
||||
<div class="fileList">
|
||||
<img
|
||||
id="previewImage"
|
||||
src="#"
|
||||
alt="Image preview"
|
||||
style="display: none; width: 100%; max-width: 300px"
|
||||
/>
|
||||
<div class="uploadBox" onclick="$('#upload').click()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_center">
|
||||
<button class="btn_submit" type="button" onclick="submit()">上报</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,368 @@
|
|||
<!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>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.form {
|
||||
padding: 34px 22px 0 19px;
|
||||
}
|
||||
.form-item {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.label {
|
||||
width: 74px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.preUploadDiv {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.preUploadImg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.preUploadDiv:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.uploadBox {
|
||||
background: url("./img/upload.png");
|
||||
background-size: cover;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.upload {
|
||||
opacity: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.fileList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon_delete {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
background: url("./img/icon_delete.png");
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
/* padding: 8px 16px; */
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f6;
|
||||
padding-left: 16px;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
select {
|
||||
/* width: 256px; */
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f6;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
.fileListBox {
|
||||
flex: 1;
|
||||
}
|
||||
.btn_center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.btn_submit {
|
||||
width: 330px;
|
||||
height: 40px;
|
||||
background: #4876ff;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
line-height: 25px;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script src="./js/jquery.min.js"></script>
|
||||
<script>
|
||||
var BASE = "https://ykdz.yundazhou.com:8000/api";
|
||||
var fileList = [];
|
||||
function uploadChange(event) {
|
||||
var file = event.target.files[0];
|
||||
|
||||
if (file) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
var img = document.createElement("img");
|
||||
img.src = e.target.result;
|
||||
// document.body.appendChild(img);
|
||||
// 这里可以添加上传图片到服务器的代码
|
||||
// alert(e.target.result)
|
||||
|
||||
let tempFile = DataURIToBlob(e.target.result);
|
||||
|
||||
let fd = new FormData();
|
||||
fd.append("file", tempFile);
|
||||
upload(fd);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
// alert(JSON.stringify(reader.readAsDataURL(file)))
|
||||
}
|
||||
|
||||
// var input = document.getElementById('upload');
|
||||
// if (input.files && input.files) {
|
||||
// var reader = new FileReader();
|
||||
|
||||
// reader.onload = function (e) {
|
||||
// var previewImage = document.getElementById("previewImage");
|
||||
// previewImage.src = e.target.result;
|
||||
// previewImage.style.display = "block";
|
||||
// };
|
||||
// // alert(JSON.stringify(input.files))
|
||||
// reader.readAsDataURL(input.files);
|
||||
// }
|
||||
// var formData = new FormData();
|
||||
|
||||
// let files = $("#upload")[0].files;
|
||||
|
||||
// alert(JSON.stringify(val));
|
||||
// var formData = new FormData();
|
||||
// for (let i = 0; i < files.length; i++) {
|
||||
// formData.append("file", files[i]);
|
||||
// upload(formData);
|
||||
// }
|
||||
}
|
||||
|
||||
function DataURIToBlob(dataURI) {
|
||||
const splitDataURI = dataURI.split(",");
|
||||
const byteString =
|
||||
splitDataURI[0].indexOf("base64") >= 0
|
||||
? atob(splitDataURI[1])
|
||||
: decodeURI(splitDataURI[1]);
|
||||
const mimeString = splitDataURI[0].split(":")[1].split(";")[0];
|
||||
|
||||
const ia = new Uint8Array(byteString.length);
|
||||
for (let i = 0; i < byteString.length; i++)
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
|
||||
return new Blob([ia], { type: mimeString });
|
||||
}
|
||||
|
||||
function upload(formData) {
|
||||
// alert(formData);
|
||||
$.ajax({
|
||||
url: BASE + "/commonLogin/upload",
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
|
||||
headers: { Authorization: sessionStorage.token },
|
||||
success: function (data) {
|
||||
// alert(JSON.stringify(data));
|
||||
if (data.c === 200) {
|
||||
// console.log(data);
|
||||
// alert('200',JSON.stringify(data));
|
||||
fileList.push(data.d);
|
||||
renderFileList();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function renderFileList() {
|
||||
$(".preUploadDiv").remove();
|
||||
fileList.map((item, index) => {
|
||||
$(".fileList").prepend(
|
||||
`<div class="preUploadDiv"><img class="preUploadImg" src="${item}"><i class="icon_delete" onclick="removeUpload(${index})"></i></div>`
|
||||
);
|
||||
});
|
||||
}
|
||||
function removeUpload(index) {
|
||||
fileList.splice(index, 1);
|
||||
renderFileList();
|
||||
// $('.fileList')[index].remove()
|
||||
// $(".preUploadDiv")[index].remove();
|
||||
}
|
||||
function submit() {
|
||||
let params = {
|
||||
// address: "",
|
||||
content: $("#content").val(),
|
||||
imageUrls: [...fileList].toString(),
|
||||
// lat: "",
|
||||
// lng: "",
|
||||
staffName: $("#staffName").val(),
|
||||
staffPhone: $("#staffPhone").val(),
|
||||
type: $("#type").val(),
|
||||
// dept: $("#dept").val(),
|
||||
type2: 2,
|
||||
};
|
||||
$.ajax({
|
||||
url: BASE + "/eventRecord/upload",
|
||||
type: "POST",
|
||||
// data: JSON.stringify(param),
|
||||
data: JSON.stringify(params),
|
||||
// async: true,
|
||||
dataType: "json",
|
||||
contentType: "application/json; charset=UTF-8",
|
||||
headers: { Authorization: sessionStorage.token },
|
||||
success: function (data) {
|
||||
if (data.c === 200) {
|
||||
console.log(data);
|
||||
window.history.back();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<input
|
||||
id="upload"
|
||||
type="file"
|
||||
hidden
|
||||
onchange="uploadChange(event)"
|
||||
capture="camera"
|
||||
accept="image/*"
|
||||
/>
|
||||
<input type="text" id="type2" hidden value="2"/>
|
||||
|
||||
<div class="form">
|
||||
<!-- <div class="form-item" id="item_type">
|
||||
<div class="label">巡查类型</div>
|
||||
<select id="type">
|
||||
<option value="" style="display: none; font-size: 14px">
|
||||
请选择
|
||||
</option>
|
||||
<option label="发现国动设施附近施工" value="1"></option>
|
||||
<option label="发现国动设施处倾倒建渣或垃圾" value="2"></option>
|
||||
<option label="发现在国动设施正被破坏" value="3"></option>
|
||||
<option label="发现在国动设施已被破坏" value="4"></option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">联系人</div>
|
||||
<input type="text" id="staffName" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">联系电话</div>
|
||||
<input type="text" id="staffPhone" />
|
||||
</div>
|
||||
<div class="form-item" id="item_type_input">
|
||||
<div class="label">报件类型</div>
|
||||
<input type="text" id="type">
|
||||
</div>
|
||||
<!-- <div class="form-item">
|
||||
<div class="label">部门</div>
|
||||
<select id="dept">
|
||||
<option value="" style="display: none; font-size: 14px">
|
||||
请选择
|
||||
</option>
|
||||
<option label="社区" value="社区"></option>
|
||||
<option label="国动部门" value="国动部门"></option>
|
||||
<option label="国动设施管理单位" value="国动设施管理单位"></option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">报件内容</div>
|
||||
<textarea
|
||||
name=""
|
||||
id="content"
|
||||
cols="30"
|
||||
rows="10"
|
||||
placeholder="请输入"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- <div class="form-item">
|
||||
<label for="">现场照片</label>
|
||||
<input id="upload" type="file" multiple onchange="uploadChange()" />
|
||||
<div class="fileList"></div>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">现场照片</div>
|
||||
<div class="fileListBox">
|
||||
<div class="fileList">
|
||||
<img
|
||||
id="previewImage"
|
||||
src="#"
|
||||
alt="Image preview"
|
||||
style="display: none; width: 100%; max-width: 300px"
|
||||
/>
|
||||
<div class="uploadBox" onclick="$('input').click()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_center">
|
||||
<button class="btn_submit" type="button" onclick="submit()">上报</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,375 @@
|
|||
<!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>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.form {
|
||||
padding: 34px 22px 0 19px;
|
||||
}
|
||||
.form-item {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.label {
|
||||
width: 74px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.preUploadDiv {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.preUploadImg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.preUploadDiv:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.uploadBox {
|
||||
background: url("./img/upload.png");
|
||||
background-size: cover;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.upload {
|
||||
opacity: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.fileList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.icon_delete {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
background: url("./img/icon_delete.png");
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
/* padding: 8px 16px; */
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f6;
|
||||
padding-left: 16px;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
select {
|
||||
/* width: 256px; */
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
background: #f5f5f6;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #f5f5f6;
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
/* color: #999999; */
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
.fileListBox {
|
||||
flex: 1;
|
||||
}
|
||||
.btn_center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.btn_submit {
|
||||
width: 330px;
|
||||
height: 40px;
|
||||
background: #4876ff;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
line-height: 25px;
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script src="./js/jquery.min.js"></script>
|
||||
<script>
|
||||
var BASE = "https://ykdz.yundazhou.com:8000/api";
|
||||
|
||||
var fileList = [];
|
||||
|
||||
function uploadChange(event) {
|
||||
var file = event.target.files[0];
|
||||
|
||||
if (file) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
var img = document.createElement("img");
|
||||
img.src = e.target.result;
|
||||
// document.body.appendChild(img);
|
||||
// 这里可以添加上传图片到服务器的代码
|
||||
// alert(e.target.result)
|
||||
|
||||
let tempFile = DataURIToBlob(e.target.result);
|
||||
|
||||
let fd = new FormData();
|
||||
fd.append("file", tempFile);
|
||||
upload(fd);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
// alert(JSON.stringify(reader.readAsDataURL(file)))
|
||||
}
|
||||
|
||||
// var input = document.getElementById('upload');
|
||||
// if (input.files && input.files) {
|
||||
// var reader = new FileReader();
|
||||
|
||||
// reader.onload = function (e) {
|
||||
// var previewImage = document.getElementById("previewImage");
|
||||
// previewImage.src = e.target.result;
|
||||
// previewImage.style.display = "block";
|
||||
// };
|
||||
// // alert(JSON.stringify(input.files))
|
||||
// reader.readAsDataURL(input.files);
|
||||
// }
|
||||
// var formData = new FormData();
|
||||
|
||||
// let files = $("#upload")[0].files;
|
||||
|
||||
// alert(JSON.stringify(val));
|
||||
// var formData = new FormData();
|
||||
// for (let i = 0; i < files.length; i++) {
|
||||
// formData.append("file", files[i]);
|
||||
// upload(formData);
|
||||
// }
|
||||
}
|
||||
|
||||
function DataURIToBlob(dataURI) {
|
||||
const splitDataURI = dataURI.split(",");
|
||||
const byteString =
|
||||
splitDataURI[0].indexOf("base64") >= 0
|
||||
? atob(splitDataURI[1])
|
||||
: decodeURI(splitDataURI[1]);
|
||||
const mimeString = splitDataURI[0].split(":")[1].split(";")[0];
|
||||
|
||||
const ia = new Uint8Array(byteString.length);
|
||||
for (let i = 0; i < byteString.length; i++)
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
|
||||
return new Blob([ia], { type: mimeString });
|
||||
}
|
||||
|
||||
function upload(formData) {
|
||||
// alert(formData);
|
||||
$.ajax({
|
||||
url: BASE + "/commonLogin/upload",
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
|
||||
headers: { Authorization: sessionStorage.token },
|
||||
success: function (data) {
|
||||
// alert(JSON.stringify(data));
|
||||
if (data.c === 200) {
|
||||
// console.log(data);
|
||||
// alert('200',JSON.stringify(data));
|
||||
fileList.push(data.d);
|
||||
renderFileList();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function renderFileList() {
|
||||
$(".preUploadDiv").remove();
|
||||
fileList.map((item, index) => {
|
||||
$(".fileList").prepend(
|
||||
`<div class="preUploadDiv"><img class="preUploadImg" src="${item}"><i class="icon_delete" onclick="removeUpload(${index})"></i></div>`
|
||||
);
|
||||
});
|
||||
}
|
||||
function removeUpload(index) {
|
||||
fileList.splice(index, 1);
|
||||
renderFileList();
|
||||
// $('.fileList')[index].remove()
|
||||
// $(".preUploadDiv")[index].remove();
|
||||
}
|
||||
function submit() {
|
||||
let params = {
|
||||
// address: "",
|
||||
content: $("#content").val(),
|
||||
imageUrls: [...fileList].toString(),
|
||||
// lat: "",
|
||||
// lng: "",
|
||||
staffName: $("#staffName").val(),
|
||||
staffPhone: $("#staffPhone").val(),
|
||||
uploadTime: new Date($("#uploadTime").val()).getTime()/1000,
|
||||
address: $("#address").val(),
|
||||
type:$("#content").val(),
|
||||
type2: "3",
|
||||
};
|
||||
$.ajax({
|
||||
url: BASE + "/eventRecord/upload",
|
||||
type: "POST",
|
||||
// data: JSON.stringify(param),
|
||||
data: JSON.stringify(params),
|
||||
// async: true,
|
||||
dataType: "json",
|
||||
contentType: "application/json; charset=UTF-8",
|
||||
headers: { Authorization: sessionStorage.token },
|
||||
success: function (data) {
|
||||
if (data.c === 200) {
|
||||
console.log(data);
|
||||
window.history.back();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<input
|
||||
id="upload"
|
||||
type="file"
|
||||
hidden
|
||||
onchange="uploadChange(event)"
|
||||
capture="camera"
|
||||
accept="image/*"
|
||||
/>
|
||||
<input type="text" id="type2" hidden value="3" />
|
||||
|
||||
<div class="form">
|
||||
<!-- <div class="form-item" id="item_type">
|
||||
<div class="label">巡查类型</div>
|
||||
<select id="type">
|
||||
<option value="" style="display: none; font-size: 14px">
|
||||
请选择
|
||||
</option>
|
||||
<option label="发现国动设施附近施工" value="1"></option>
|
||||
<option label="发现国动设施处倾倒建渣或垃圾" value="2"></option>
|
||||
<option label="发现在国动设施正被破坏" value="3"></option>
|
||||
<option label="发现在国动设施已被破坏" value="4"></option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">联系人</div>
|
||||
<input type="text" id="staffName" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">联系电话</div>
|
||||
<input type="text" id="staffPhone" />
|
||||
</div>
|
||||
<div class="form-item" id="item_type_input">
|
||||
<div class="label">时间</div>
|
||||
<input type="datetime-local" id="uploadTime" />
|
||||
</div>
|
||||
<div class="form-item" id="item_type_input">
|
||||
<div class="label">地点</div>
|
||||
<input type="text" id="address" />
|
||||
</div>
|
||||
<!-- <div class="form-item">
|
||||
<div class="label">部门</div>
|
||||
<select id="dept">
|
||||
<option value="" style="display: none; font-size: 14px">
|
||||
请选择
|
||||
</option>
|
||||
<option label="社区" value="社区"></option>
|
||||
<option label="国动部门" value="国动部门"></option>
|
||||
<option label="国动设施管理单位" value="国动设施管理单位"></option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">内容</div>
|
||||
<textarea
|
||||
name=""
|
||||
id="content"
|
||||
cols="30"
|
||||
rows="10"
|
||||
placeholder="请输入"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- <div class="form-item">
|
||||
<label for="">现场照片</label>
|
||||
<input id="upload" type="file" multiple onchange="uploadChange()" />
|
||||
<div class="fileList"></div>
|
||||
</div> -->
|
||||
<div class="form-item">
|
||||
<div class="label">现场照片</div>
|
||||
<div class="fileListBox">
|
||||
<div class="fileList">
|
||||
<img
|
||||
id="previewImage"
|
||||
src="#"
|
||||
alt="Image preview"
|
||||
style="display: none; width: 100%; max-width: 300px"
|
||||
/>
|
||||
<div class="uploadBox" onclick="$('#upload').click()"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_center">
|
||||
<button class="btn_submit" type="button" onclick="submit()">上报</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue