lxm_front/bigscreen
1
0
Fork 0
mirror of https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git synced 2026-01-21 05:40:35 +08:00
Code Issues Projects Releases Wiki Activity
Files
f4d17e9f9d1cfc3cdb26cef9861a5ad027689248
bigscreen/智慧社区/社区/index.html
zhangxiaohui 95cee2cd2d update
2021-04-14 13:57:08 +08:00

631 lines
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./js/rem.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.min.js"></script>
<!-- <script src="./js/flexible.js"></script>-->
<link rel="stylesheet" href="./css/index.css">
<title>大屏</title>
</head>
<body>
<div class="contianer">
<div class="bg-faguang"></div>
<div class="bg-jianzhu"></div>
<div class="header">
<div class="header-left">
<!-- <div class="logo" style="visibility: hidden">-->
<!-- <div class="logo-img">-->
<!-- logo-->
<!-- </div>-->
<!-- <p>合肥市庐阳区城市更新投资集团</p>-->
<!-- </div>-->
<ul class="nav">
<li class="active">主屏</li>
<li>智慧商圈</li>
<li>智慧社区</li>
</ul>
</div>
<div class="header-right">
<ul>
<li>
<span class="time">2019.09.28 12:12:12</span>
</li>
<li>
<i><img src="./img/header-2.svg" style="width: 0.58rem;height: 0.8rem"></i><span> 温度: </span><span class="tem">25℃</span>
</li>
<li>
<i><img src="./img/header-3.svg" style="width: 0.66rem;height: 0.86rem"></i><span> 湿度: </span><span class="humidity">28%</span>
</li>
<li>
<i><img src="./img/header-4.svg" style="width: 1.08rem;height: 0.84rem" class="wea-img"></i><span> 天气: </span><span class="wea">多云</span>
</li>
<li>
<i><img src="./img/header-1.svg" style="width: 1rem;height: 0.8rem"></i><span> 风力: </span><span class="win_speed">233km/h</span>
</li>
</ul>
</div>
</div>
<div class="left">
<div class="today">
<div class="title">
<p>今日街区</p>
<img src="./img/title-line.png" alt="">
</div>
<div>
<ul class="today-con">
<li>
<div>
<img src="./img/top-icon.png" class="today-top">
<img src="./img/right-icon.png" class="today-right">
<img src="./img/bottom-icon.png" class="today-bottom">
<img src="./img/left-icon.png" class="today-left">
</div>
<p id="gaust_qty" class="bigNum">27468</p>
<p class="titleText">客流量</p>
</li>
<li>
<div>
<img src="./img/top-icon.png" class="today-top">
<img src="./img/right-icon.png" class="today-right">
<img src="./img/bottom-icon.png" class="today-bottom">
<img src="./img/left-icon.png" class="today-left">
</div>
<p id="car_qty" class="bigNum">8788</p>
<p class="titleText">车流量</p>
</li>
<li>
<div>
<img src="./img/top-icon.png" class="today-top">
<img src="./img/right-icon.png" class="today-right">
<img src="./img/bottom-icon.png" class="today-bottom">
<img src="./img/left-icon.png" class="today-left">
</div>
<p id="illegal_qty" class="bigNum">28</p>
<p class="titleText">违章量</p>
</li>
<li>
<div>
<img src="./img/top-icon.png" class="today-top">
<img src="./img/right-icon.png" class="today-right">
<img src="./img/bottom-icon.png" class="today-bottom">
<img src="./img/left-icon.png" class="today-left">
</div>
<p id="accident_qty" class="bigNum">2468</p>
<p class="titleText">事故量</p>
</li>
<li>
<div>
<img src="./img/top-icon.png" class="today-top">
<img src="./img/right-icon.png" class="today-right">
<img src="./img/bottom-icon.png" class="today-bottom">
<img src="./img/left-icon.png" class="today-left">
</div>
<p id="illegally_park" class="bigNum">27468</p>
<p class="titleText">违停量</p>
</li>
</ul>
</div>
</div>
<div class="security">
<div class="title">
<p>安全事件预警</p>
<img src="./img/title-line.png" alt="">
</div>
<div>
<div class="security-con">
<div class="slide-title">
<span>等级</span>
<span>时间</span>
<span>位置</span>
<span>内容</span>
</div>
<div class="slide-container"><!--css设置时，注意高度是显示多少个item,如：item的高度是30px，显示3个，高度则是 3*30 = 90px -->
<ul class="slide-list js-slide-list">
</ul>
</div>
</div>
</div>
</div>
<div class="road">
<div class="title">
<p>街区概况</p>
<img src="./img/title-line.png" alt="">
</div>
<div>
<div class="load-left">
<div class="title">
<p>建筑设施</p>
</div>
<div id="road-table"></div>
</div>
<div class="load-right">
<div class="title">
<p>住宅人口类型</p>
</div>
<div id="people-pie"></div>
</div>
</div>
</div>
<div class="build">
<div class="title">
<p>建筑设施</p>
</div>
<div>
<ul>
<li>
<div class="build-img">
<img src="./img/build-1.svg">
</div>
<div>
<p class="build-num">52</p>
<p class="build-text">无人奶茶店</p>
</div>
</li>
<li>
<div class="build-img">
<img src="./img/build-2.svg">
</div>
<div>
<p class="build-num">188</p>
<p class="build-text">信用租赁</p>
</div>
</li>
<li>
<div class="build-img">
<img src="./img/build-3.svg">
</div>
<div>
<p class="build-num">6</p>
<p class="build-text">智能综合体</p>
</div>
</li>
<li>
<div class="build-img">
<img src="./img/build-4.svg">
</div>
<div>
<p class="build-num">12</p>
<p class="build-text">智能充电桩</p>
</div>
</li>
<li>
<div class="build-img">
<img src="./img/build-5.svg">
</div>
<div>
<p class="build-num">12</p>
<p class="build-text">智能路灯</p>
</div>
</li>
<li>
<div class="build-img">
<img src="./img/build-6.svg">
</div>
<div>
<p class="build-num">12</p>
<p class="build-text">智能垃圾桶</p>
</div>
</li>
<li>
<div class="build-img">
<img src="./img/build-7.svg">
</div>
<div>
<p class="build-num">12</p>
<p class="build-text">无人便利店</p>
</div>
</li>
</ul>
</div>
</div>
<img src="./img/bottom-line.png" style="width: 100%;float:left;">
</div>
<div class="center">
<div class="center-titlebg">
<p class="main-title">淮河路步行街智慧街区系统</p>
<!-- <div class="line-bink"></div>-->
<div class="center-con">
<div class="commodity-sign-wrap boil1"></div>
<div class="commodity-sign-wrap boil2"></div>
<div class="camera camera1">
<img src="./img/camera.png" alt="">
<div class="video-box">
<div>
<video src=""></video>
</div>
</div>
</div>
<div class="camera camera2">
<img src="./img/camera.png" alt="">
<div class="video-box">
<div>
<video src=""></video>
</div>
</div>
</div>
<div class="camera camera3">
<img src="./img/camera.png" alt="">
<div class="video-box">
<div>
<video src=""></video>
</div>
</div>
</div>
<div class="camera camera4">
<img src="./img/camera.png" alt="">
<div class="video-box">
<div>
<video src=""></video>
</div>
</div>
</div>
<div class="camera camera5">
<img src="./img/camera.png" alt="">
<div class="video-box">
<div>
<video src=""></video>
</div>
</div>
</div>
<div class="fire fire1">
<img src="./img/fire.png" alt="">
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="fire fire2">
<img src="./img/fire.png" alt="">
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="fire fire3">
<img src="./img/fire.png" alt="">
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="device device1">
<div class="online">
<img src="./img/online-1.svg" class="online-img">
<img src="./img/outline-1.svg" class="outline-img">
</div>
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<!-- <div class="device device2">-->
<!-- <div class="device online">-->
<!-- <img src="./img/online-3.svg" class="online-img">-->
<!-- <img src="./img/outline-3.svg" class="outline-img">-->
<!-- </div>-->
<!-- </div>-->
<div class="device device3">
<div class="outline">
<img src="./img/online-1.svg" class="online-img">
<img src="./img/outline-1.svg" class="outline-img">
</div>
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="device device4">
<div class="online">
<img src="./img/online-1.svg" class="online-img">
<img src="./img/outline-1.svg" class="outline-img">
</div>
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="device device5">
<div class="online">
<img src="./img/online-3.svg" class="online-img">
<img src="./img/outline-3.svg" class="outline-img">
</div>
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="device device6">
<div class="outline">
<img src="./img/online-1.svg" class="online-img">
<img src="./img/outline-1.svg" class="outline-img">
</div>
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="device device7">
<div class="online">
<img src="./img/online-1.svg" class="online-img">
<img src="./img/outline-1.svg" class="outline-img">
</div>
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<!-- <div class="device device8">-->
<!-- <div class="device online">-->
<!-- <img src="./img/online-1.svg" class="online-img">-->
<!-- <img src="./img/outline-1.svg" class="outline-img">-->
<!-- </div>-->
<!-- </div>-->
<div class="famous famous1">
<span>名胜古迹</span>
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="building building1">
<span>标志性建筑</span>
<div class="device-box">
<div class="device-title">标题</div>
<div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
</div>
<div class="things things1">
<img src="./img/quan1.gif" alt="">
</div>
<div class="things things2">
<img src="./img/quan1.gif" alt="">
</div>
<div class="things things3">
<img src="./img/quan1.gif" alt="">
</div>
<div class="things things4">
<img src="./img/quan1.gif" alt="">
</div>
<div class="things things5">
<img src="./img/quan1.gif" alt="">
</div>
<div class="things-box">
<p class="things-title">发生人群拥挤</p>
<p class="things-con">合肥市庐阳区苏州路96号百大鼓楼名品金店</p>
<div class="things-img">
<img src="" alt="">
</div>
<!-- <div class="device-title">标题</div>-->
<!-- <div class="device-con">介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍 介绍介绍介绍介绍介绍介绍介绍介绍</div>-->
</div>
</div>
<div class="handle-btn-box">
<ul class="handle-btn">
<li class="video-btn" data-type="1">
<img src="./img/center-linenoactive.png" style="width: 100%;height: 100%">
<div class="handle-con">
<img src="./img/center-1.svg" style="width: 1.44rem;height: 1.18rem">
<p>摄像头</p>
</div>
</li>
<li class="device-btn" data-type="2">
<img src="./img/center-linenoactive.png" style="width: 100%">
<div class="handle-con">
<img src="./img/center-2.svg" style="width: 1.44rem;height: 1.18rem">
<p>智能设备</p>
</div>
</li>
<li class="fire-btn" data-type="3">
<img src="./img/center-linenoactive.png" style="width: 100%">
<div class="handle-con">
<img src="./img/center-3.svg" style="width: 1.44rem;height: 1.18rem">
<p>消防安全设施</p>
</div>
</li>
<li class="famous-btn" data-type="4">
<img src="./img/center-linenoactive.png" style="width: 100%">
<div class="handle-con">
<img src="./img/center-4.svg" style="width: 1.44rem;height: 1.18rem">
<p>名胜古迹</p>
</div>
</li>
<li class="building-btn" data-type="5">
<img src="./img/center-linenoactive.png" style="width: 100%">
<div class="handle-con">
<img src="./img/center-5.svg" style="width: 1.44rem;height: 1.18rem">
<p>标志建筑</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="right-box">
<img src="./img/title-line.png" style="width: 100%;">
<div>
<div class="right-left">
<div class="title">
<p>今日商圈</p>
</div>
<div class="ball-box">
<img src="./img/ball-bg.png" style="position: absolute;width: 9rem;height:3.6rem;right:0;left:0;margin:auto;">
<div class="ball1-box">
<p>市场容量指数</p>
<span class="ball-con ball1">2</span>
</div>
<div class="ball2-box">
<p>消费指数</p>
<span class="ball-con ball2">5</span>
</div>
<div class="ball3-box">
<span>市场容量指数</span>
<span class="ball-con ball3">5</span>
</div>
</div>
</div>
<div class="right-right">
<div class="title">
<p>人流热力图</p>
</div>
<div class="head-box">
<div id="head-map">
</div>
</div>
</div>
</div>
</div>
<div class="right-box1">
<div class="right1-left">
<div class="title">
<p>商铺入驻增长分析</p>
</div>
<div id="market-table"></div>
</div>
<div class="right1-right">
<div class="title">
<p>营销总额分析</p>
</div>
<div id="marking-table"></div>
</div>
</div>
<div class="right-box2">
<div class="title">
<p>今日社区</p>
</div>
<div>
<ul class="coummity">
<li class="small-box">
<p class="commity-title">人员数量</p>
<p class="commity-num">1.5<span class='commity-unit'>万</span></p>
</li>
<li class="small-box">
<p class="commity-title">访客数量</p>
<p class="commity-num">5682</p>
</li>
<li class="big-box">
<p class="commity-title">人员出入数量</p>
<p class="commity-num">1.2<span class='commity-unit'>万</span></p>
</li>
<li class="big-box">
<p class="commity-title">车辆出入数量</p>
<p class="commity-num">5781</p>
</li>
</ul>
</div>
</div>
<div class="right-box3">
<div class="right3-left">
<div class="title">
<p>今日社区能耗</p>
</div>
<div class="energy-box">
<div class="energy">
<div class="water">
<p>10<span>吨</span></p>
<canvas id="pop"></canvas>
</div>
<div class="elect">
<p>599<span>度</span></p>
<canvas id="pop1"></canvas>
</div>
<div class="air">
<p>10<span>m³</span></p>
<canvas id="pop2"></canvas>
</div>
</div>
<div class="energy-text">
<p>用水</p>
<p>用电</p>
<p>用气</p>
</div>
</div>
</div>
<div class="right3-right">
<div class="title">
<p>社区停车位情况</p>
</div>
<div>
<ul class="parking">
<li>
<div>
<img src="./img/car1.png" class="parking-icon">
</div>
<div class="parking-text">
<p>369</p>
<p>已使用车位</p>
</div>
</li>
<li>
<div>
<img src="./img/car2.png" class="parking-icon">
</div>
<div class="parking-text1">
<p>16</p>
<p>剩余车位</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="right-box4">
<div class="right4-left">
<div class="title">
<p>今日拥堵指数</p>
</div>
<div id="congestion-table">
</div>
</div>
<div class="right4-right">
<div class="title">
<p>今日路口流量排行</p>
</div>
<div class="crossing">
<div class="slide-title1">
<span>路口名称</span>
<span>平均流量</span>
<span>状态</span>
</div>
<div class="slide-container1"><!--css设置时，注意高度是显示多少个item,如：item的高度是30px，显示3个，高度则是 3*30 = 90px -->
<ul class="slide-list1 js-slide-list1">
<li><span><span class="name-bt">1</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
<li><span><span class="name-bt">2</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
<li><span><span class="name-bt">3</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
<li><span><span class="name-bt">4</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
<li><span><span class="name-bt">5</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
<li><span><span class="name-bt">6</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
<li><span><span class="name-bt">7</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
<li><span><span class="name-bt">8</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
<li><span><span class="name-bt">9</span> 某某某某路口名称1</span><span>876辆/小时</span><span>畅通</span></li>
</ul>
</div>
</div>
</div>
<img src="./img/title-line.png" style="width: 100%;float: left">
</div>
</div>
</div>
</body>
<script src="./js/mixin.js"></script>
<script src="./js/core.js"></script>
<script src="./js/md5.js"></script>
<script src="./js/http.js"></script>
<script src="./index.js"></script>
<!-- myEcharts 下的图表 -->
<script src="./js/myEcharts/building.js"></script>
<script src="./js/myEcharts/marketingTotal.js"></script>
<script src="./js/myEcharts/peopleStream.js"></script>
<script src="./js/myEcharts/populationType.js"></script>
<script src="./js/myEcharts/storeGrowth.js"></script>
<script src="./js/myEcharts/todayJam.js"></script>
</html>
Reference in New Issue View Git Blame Copy Permalink