代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件</title>
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="./layui/css/layui.css" />
<link rel="stylesheet" href="./font/iconfont.css" />
<link rel="stylesheet" href="./css/public.css" />
<link rel="stylesheet" href="./css/even.css" />
</head>
<body>
<div class="layui-row header">
<div class="layui-col-md2" style="display: flex">
<img
src="./img/logo.png"
alt=""
class="logo"
style="margin-top: 0; margin-right: 0.1rem"
/>
<p style="font-size: 0.14rem;">
<span class="Data"></span
><span class="time" style="margin-left: 0.05rem"></span>
</p>
</div>
<div class="layui-col-md8 title">稠城云图-消防室离岗</div>
<div class="layui-col-md2 header-data">
<p style="font-size: 0.18rem">
值班领导:<span style="font-weight: bold">待定</span>
</p>
</div>
<div class="head_left">
<div class="headL-bx"></div>
</div>
<div class="head_right">
<div class="headR-bx"></div>
</div>
</div>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md2 left">
<div class="eventL-top">
<div class="top-title">事件概括</div>
<div class="top-nav">
<img
src="./img/user1.png"
alt=""
style="width: 0.26rem; height: 0.26rem"
/>
<p>
实现对城市路面、绿化带、店面门口、景区等
市容市貌管理难点区域,对大堆的垃圾废弃物、
废弃物料、生活垃圾等进行识别,快速锁定垃
圾堆积违规事件。
</p>
</div>
<div class="top-foot">
<div class="Tfoot-left">
<img
src="./img/jiedaohuanweizhishu.png"
alt=""
/>
<span>提升街道整洁度</span>
</div>
<div class="Tfoot-right">
<img src="./img/jianguan.png" alt="" />
<span>促进监管及时性</span>
</div>
</div>
</div>
<div class="eventL-top">
<div class="top-title">社区报表</div>
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>近7日各社区消防室离岗事件告警数与处置率
</div>
<div class="JG" style="width: 95%; height: 15%">
<div
id="WG"
style="width: 100%; height: 100%"
></div>
</div>
<div class="eventBmjdk">
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>消防室离岗事件告警数周环比下降TOP5
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num">1</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州中路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 100%"
></div>
</div>
<span class="jst-text">100%</span>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num">2</span>
<i class="iconfont sanjiao"></i>
<span class="text">江滨中路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 70%"
></div>
</div>
<span class="jst-text">70%</span>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num">3</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州北路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 50%"
></div>
</div>
<span class="jst-text">50%</span>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">4</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州南路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 36%"
></div>
</div>
<span class="jst-text">36%</span>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">5</span>
<i class="iconfont sanjiao"></i>
<span class="text">城中北路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 24%"
></div>
</div>
<span class="jst-text">24%</span>
</div>
</div>
<div class="evenBmjdk">
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>消防室离岗事件告警数周环比上升TOP5
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num">1</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州中路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 100%"
></div>
</div>
<span class="jst-text">100%</span>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num">2</span>
<i class="iconfont sanjiao"></i>
<span class="text">江滨中路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 70%"
></div>
</div>
<span class="jst-text">70%</span>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num">3</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州北路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 50%"
></div>
</div>
<span class="jst-text">50%</span>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">4</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州南路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 36%"
></div>
</div>
<span class="jst-text">36%</span>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">5</span>
<i class="iconfont sanjiao"></i>
<span class="text">城中北路</span>
</div>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 24%"
></div>
</div>
<span class="jst-text">24%</span>
</div>
</div>
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>消防室离岗事件处置人员分类
</div>
<div class="echtr">
<div
class="renyuan"
style="width: 45%; height: 100%"
>
<div
id="mychart3D"
style="width: 100%; height: 100%"
></div>
</div>
<ul class="echtr-text">
<li>
<img
src="./img/yuan1.png"
alt=""
class="yuan"
/>
<div>
<span>共治处理</span>
<span>52%</span>
</div>
</li>
<li>
<img
src="./img/yuan2.png"
alt=""
class="yuan"
/>
<div>
<span>执法处理</span>
<span>8%</span>
</div>
</li>
<li>
<img
src="./img/yuan5.png"
alt=""
class="yuan"
/>
<div>
<span>机器处理</span>
<span>18%</span>
</div>
</li>
<li>
<img
src="./img/yuan3.png"
alt=""
class="yuan"
/>
<div>
<span>异常关闭</span>
<span>22%</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md8 cont">
<div class="event-cont">
<div class="cont-title">
<div class="title-top">
<div class="title_left">
<img
src="./img/shijianleixing.png"
alt=""
/>
<div>
<p>事件类型</p>
<p><span>消防室离岗</span></p>
</div>
</div>
<div class="title_cont">
<img src="./img/shijian.png" alt="" />
<div>
<p>时间</p>
<p>
<!-- <span>2020</span>年-->
<!-- <span>12</span>月 <span>02</span>日-->
<!-- <span>14:24:14</span>-->
<span id="event-time"></span>
</p>
</div>
</div>
<div class="title_right">
<img src="./img/didian01.png" alt="" />
<div>
<p>地点</p>
<!-- <p>浙江省金华市义乌市稠州北路24号</p>-->
<p><span id="event-address"></span></p>
</div>
</div>
</div>
<div class="title-bom">
<div class="progress progress-striped active">
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 30%"
></div>
</div>
<span>30%</span>
</div>
</div>
<div class="cont-nav">
<div class="nav-left">
<a href="" class="double_pic"
><img src="./img/pic8.jpg" alt=""
/></a>
</div>
<ul class="nav-right" id="ul">
<!-- <li class="pic_left">-->
<li class="pic-list-0">
<img src="./img/pic9.jpg" alt="" />
<p>20-12-2 06:50:49</p>
</li>
<!-- <li class="pic_center">-->
<li class="pic-list-1">
<img
src="./img/pic8.jpg"
alt=""
class="picActive"
/>
<p>20-12-2 14:24:14</p>
</li>
<!-- <li class="pic_right">-->
<li class="pic-list-2">
<img src="./img/pic10.jpg" alt="" />
<p>20-12-2 16:30:27</p>
</li>
<!-- <li class="after1">-->
<li class="pic-list-3">
<img src="./img/pic6.png" alt="" />
<p>20-12-2 16:30:27</p>
</li>
<!-- <li class="after2">-->
<li class="pic-list-4">
<img src="./img/pic2.png" alt="" />
<p>20-12-2 16:30:27</p>
</li>
<img
src="./img/ltop.png"
alt=""
class="pin_top"
/>
<img
src="./img/lbom.png"
alt=""
class="pin_bom"
/>
</ul>
</div>
<ul class="title-top nav-bom">
<li class="title_left">
<img src="./img/guanlian.png" alt="" />
<div>
<p>关联对象</p>
<span id="camera-name">稠州北路24号</span>
</div>
</li>
<li class="title_left">
<img src="./img/weigui.png" alt="" />
<div>
<p>违规次数</p>
<span>2</span>
</div>
</li>
<li class="title_left">
<img src="./img/chuliren.png" alt="" />
<div>
<p>关联网格员</p>
<span>王琪</span>
</div>
</li>
<li class="title_left">
<img src="./img/Speed.png" alt="" />
<div>
<p>进度</p>
<span>未处理</span>
</div>
</li>
</ul>
</div>
</div>
<div class="layui-col-md2 right">
<div class="eventL-top" style="height: 100%">
<div class="top-title">事件详情</div>
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>消防室离岗总数
</div>
<div class="eventR-text">
<div class="Rtext-left">
<img
src="./img/user.png"
alt=""
style="width: 0.44rem; height: 0.43rem"
/>
<div>
<span>834</span>
<p>消防室离岗总数</p>
</div>
</div>
<div class="Rtext-rig">
<span>9%</span>
<p>占比</p>
</div>
</div>
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>近24时消防室离岗事件发生数
</div>
<div class="JG" style="width: 95%; height: 15%">
<div
id="JG"
style="width: 100%; height: 100%"
></div>
</div>
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>消防室离岗出现街面TOP10
</div>
<div class="eventJDT">
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num2">1</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州中路</span>
</div>
<span class="jst-text">100%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 100%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num2">2</span>
<i class="iconfont sanjiao"></i>
<span class="text">江滨中路</span>
</div>
<span class="jst-text">56%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 56%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num2">3</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州北路</span>
</div>
<span class="jst-text">52%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 52%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">4</span>
<i class="iconfont sanjiao"></i>
<span class="text">稠州南路</span>
</div>
<span class="jst-text">48%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 46%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">5</span>
<i class="iconfont sanjiao"></i>
<span class="text">城中北路</span>
</div>
<span class="jst-text">42%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 42%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">6</span>
<i class="iconfont sanjiao"></i>
<span class="text">篁园路</span>
</div>
<span class="jst-text">36%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 36%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">7</span>
<i class="iconfont sanjiao"></i>
<span class="text">城中中路</span>
</div>
<span class="jst-text">32%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 32%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">8</span>
<i class="iconfont sanjiao"></i>
<span class="text">丹溪北路</span>
</div>
<span class="jst-text">28%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 28%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">9</span>
<i class="iconfont sanjiao"></i>
<span class="text">国贸大道</span>
</div>
<span class="jst-text">24%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 24%"
></div>
</div>
</div>
<div class="eventB-jdt">
<div class="jdt-left">
<span class="num num1">10</span>
<i class="iconfont sanjiao"></i>
<span class="text">宗泽路</span>
</div>
<span class="jst-text">20%</span>
<div
class="progress progress-striped active jdt"
>
<div
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
style="width: 20%"
></div>
</div>
</div>
</div>
<div class="eventR-sq">
<div class="sq-left">
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>事件有效流转率
</div>
<div
class="shuiq"
style="width: 100%; height: 75%"
>
<div
id="shuiq1"
style="width: 100%; height: 100%"
></div>
</div>
</div>
<div class="sq-left">
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>共治率
</div>
<div
class="shuiq"
style="width: 100%; height: 75%"
>
<div
id="shuiq2"
style="width: 100%; height: 100%"
></div>
</div>
</div>
</div>
<div class="eventL-nav">
<img
src="./img/ictitle.png"
alt=""
class="ictitle"
/>消防室离岗事件处置完成类型
</div>
<div class="echtr">
<div
class="renyuan"
style="width: 45%; height: 100%"
>
<div
id="myChart3D"
style="width: 100%; height: 100%"
></div>
</div>
<ul class="echtr-text">
<li>
<img
src="./img/yuan1.png"
alt=""
class="yuan"
/>
<div>
<span>共治处理</span>
<span>52%</span>
</div>
</li>
<li>
<img
src="./img/yuan2.png"
alt=""
class="yuan"
/>
<div>
<span>执法处理</span>
<span>8%</span>
</div>
</li>
<li>
<img
src="./img/yuan5.png"
alt=""
class="yuan"
/>
<div>
<span>机器处理</span>
<span>18%</span>
</div>
</li>
<li>
<img
src="./img/yuan3.png"
alt=""
class="yuan"
/>
<div>
<span>异常关闭</span>
<span>22%</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./js/jquery-3.0.0.min.js"></script>
<script src="./bootstrap/bootstrap.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/echarts-gl.min.js"></script>
<script src="./js/echarts-liquidfill.js"></script>
<script src="./js/public.js"></script>
<script src="./js/event.js"></script>
<script>
// 事件图片ajax
var demobilized = "131603";
$.ajax({
type: "get",
dataType: "json",
data: {
eventTypeName: demobilized,
},
url: Url + "system/obtain/getEventTop",
success: function (res) {
// $(".pic_left").empty();
// $(".pic_center").empty();
// $(".pic_right").empty();
// $(".after1").empty();
// $(".after2").empty();
//大图清空
$(".double_pic").empty();
//轮播图片清空
$(".pic-list-0").empty();
$(".pic-list-1").empty();
$(".pic-list-2").empty();
$(".pic-list-3").empty();
$(".pic-list-4").empty();
console.log(data.length)
console.log(res.data[0].eventImage);
let url = Url;
let dataLength= res.data.length;
if (dataLength>0){
let pic = "<a href= "+ url+"system/event><img src=" + res.data[0].eventImage + " alt=''/><p>" + res.data[0].createTime + "</p></a>"
$("#event-address").html(res.data[0].placeName);
$("#event-time").html(res.data[0].createTime);
$("#camera-name").html(res.data[0].cameraName);
$(".double_pic").append(pic);
}
for (let i = 0; i < res.data.length; i++) {
let picListIndexName = ".pic-list-" + i; //pic列表名
let pic = "<a href=" + url + "system/event > <img src=" + res.data[i].eventImage + " alt=''/><p>" + res.data[i].createTime + "</p></a>"
$(picListIndexName).append(pic);
}
// $(".nav-left img").attr("src", "${res.data[1].createTime}");
// $(".pic_left").append(`<a href=${
// Url + "system/event"
// }><img src=${res.data[0].eventImage} alt="" />
// <p>${res.data[0].createTime}</p></a>`);
// $(".pic_center").append(`<a href=${
// Url + "system/event"
// }><img src=${res.data[1].eventImage} alt="" />
// <p>${res.data[1].createTime}</p></a>`);
// $(".pic_right").append(`<a href=${
// Url + "system/event"
// }><img src=${res.data[2].eventImage} alt="" />
// <p>${res.data[2].createTime}</p></a>`);
// $(".after1").append(`<a href=${Url + "system/event"}><img src=${
// res.data[3].eventImage
// } alt="" />
// <p>${res.data[3].createTime}</p></a>`);
// $(".after2").append(`<a href=${Url + "system/event"}><img src=${
// res.data[4].eventImage
// } alt="" />
// <p>${res.data[4].createTime}</p></a>`);
},
error: function (e) {
console.log(e);
},
});
</script>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。