|
|
@@ -86,6 +86,7 @@
|
|
|
|
|
|
.conList {
|
|
|
position: absolute;
|
|
|
+ width: 35%;
|
|
|
height: 40%;
|
|
|
}
|
|
|
|
|
|
@@ -106,22 +107,25 @@
|
|
|
}
|
|
|
|
|
|
.floortitle {
|
|
|
- width: 562px;
|
|
|
- height: 96px;
|
|
|
+ max-width: 562px;
|
|
|
+ width: 100%;
|
|
|
+ max-height: 96px;
|
|
|
+ height: 26%;
|
|
|
background-image: url(images/qjt-titlebg.png);
|
|
|
- background-size: cover;
|
|
|
+ background-size: 100% 100%;
|
|
|
font-family: Microsoft YaHei;
|
|
|
font-size: 24px;
|
|
|
color: #FFFFFF;
|
|
|
- line-height: 110px;
|
|
|
+ display: flex;
|
|
|
font-style: italic;
|
|
|
padding-left: 60px;
|
|
|
box-sizing: border-box;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.floorcontent {
|
|
|
- width: 559px;
|
|
|
- height: 70%;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ height: 72%;
|
|
|
background: #D3EBFF;
|
|
|
box-shadow: 5px 9px 9px 0px rgba(17, 126, 202, 0.24);
|
|
|
border-radius: 20px;
|
|
|
@@ -262,7 +266,7 @@
|
|
|
|
|
|
<body>
|
|
|
|
|
|
- <div class="container" id="ggyq">
|
|
|
+ <div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-sm-12">
|
|
|
<div class="model-container"
|
|
|
@@ -270,141 +274,143 @@
|
|
|
<div class="model-view">
|
|
|
<canvas id="canvas-model-view" style="width: 100%;height: 100%;">您的浏览器不支持canvas!</canvas>
|
|
|
</div>
|
|
|
- <div class="qjttitle"></div>
|
|
|
- <div class="nowtime">{{currentTime }}</div>
|
|
|
- <div class="onefloor conList">
|
|
|
- <div class="floortitle">1号楼概览</div>
|
|
|
- <div class="floorcontent">
|
|
|
- <div class="list blue">
|
|
|
- <div class="top radio">1号楼当前排队人数：</div>
|
|
|
- <div class="bottom">
|
|
|
- <img src="images/floor1.png" alt="">
|
|
|
- <div><span class="number">12</span>
|
|
|
- <span>人</span>
|
|
|
+ <div id="qjt">
|
|
|
+ <div class="qjttitle"></div>
|
|
|
+ <div class="nowtime">{{currentTime }}</div>
|
|
|
+ <div class="onefloor conList">
|
|
|
+ <div class="floortitle">1号楼概览</div>
|
|
|
+ <div class="floorcontent">
|
|
|
+ <div class="list blue">
|
|
|
+ <div class="top radio">1号楼当前排队人数：</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="images/floor1.png" alt="">
|
|
|
+ <div><span class="number">12</span>
|
|
|
+ <span>人</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="list yellow">
|
|
|
- <div class="top radio">可办事项数量：</div>
|
|
|
- <div class="bottom">
|
|
|
- <img src="images/floor2.png" alt="">
|
|
|
- <div><span class="number">798</span>
|
|
|
- <span>项</span>
|
|
|
+ <div class="list yellow">
|
|
|
+ <div class="top radio">可办事项数量：</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="images/floor2.png" alt="">
|
|
|
+ <div><span class="number">798</span>
|
|
|
+ <span>项</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="list green">
|
|
|
- <div class="top radio">平均等待时长：</div>
|
|
|
- <div class="bottom">
|
|
|
- <img src="images/floor2.png" alt="">
|
|
|
- <div><span class="number">2</span>
|
|
|
- <span>分钟</span>
|
|
|
+ <div class="list green">
|
|
|
+ <div class="top radio">平均等待时长：</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="images/floor2.png" alt="">
|
|
|
+ <div><span class="number">2</span>
|
|
|
+ <span>分钟</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="list purple">
|
|
|
- <div class="top radio">窗口数：</div>
|
|
|
- <div class="bottom">
|
|
|
- <img src="images/floor2.png" alt="">
|
|
|
- <div><span class="number">28</span>
|
|
|
- <span>个</span>
|
|
|
+ <div class="list purple">
|
|
|
+ <div class="top radio">窗口数：</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="images/floor2.png" alt="">
|
|
|
+ <div><span class="number">28</span>
|
|
|
+ <span>个</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="twofloor conList">
|
|
|
- <div class="floortitle">2号楼概览</div>
|
|
|
- <div class="floorcontent">
|
|
|
- <div class="list blue">
|
|
|
- <div class="top radio">2号楼当前排队人数：</div>
|
|
|
- <div class="bottom">
|
|
|
- <img src="images/floor1.png" alt="">
|
|
|
- <div><span class="number">12</span>
|
|
|
- <span>人</span>
|
|
|
+ <div class="twofloor conList">
|
|
|
+ <div class="floortitle">2号楼概览</div>
|
|
|
+ <div class="floorcontent">
|
|
|
+ <div class="list blue">
|
|
|
+ <div class="top radio">2号楼当前排队人数：</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="images/floor1.png" alt="">
|
|
|
+ <div><span class="number">12</span>
|
|
|
+ <span>人</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="list yellow">
|
|
|
- <div class="top radio">可办事项数量：</div>
|
|
|
- <div class="bottom">
|
|
|
- <img src="images/floor2.png" alt="">
|
|
|
- <div><span class="number">798</span>
|
|
|
- <span>项</span>
|
|
|
+ <div class="list yellow">
|
|
|
+ <div class="top radio">可办事项数量：</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="images/floor2.png" alt="">
|
|
|
+ <div><span class="number">798</span>
|
|
|
+ <span>项</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="list green">
|
|
|
- <div class="top radio">平均等待时长：</div>
|
|
|
- <div class="bottom">
|
|
|
- <img src="images/floor2.png" alt="">
|
|
|
- <div><span class="number">2</span>
|
|
|
- <span>分钟</span>
|
|
|
+ <div class="list green">
|
|
|
+ <div class="top radio">平均等待时长：</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="images/floor2.png" alt="">
|
|
|
+ <div><span class="number">2</span>
|
|
|
+ <span>分钟</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="list purple">
|
|
|
- <div class="top radio">窗口数：</div>
|
|
|
- <div class="bottom">
|
|
|
- <img src="images/floor2.png" alt="">
|
|
|
- <div><span class="number">28</span>
|
|
|
- <span>个</span>
|
|
|
+ <div class="list purple">
|
|
|
+ <div class="top radio">窗口数：</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <img src="images/floor2.png" alt="">
|
|
|
+ <div><span class="number">28</span>
|
|
|
+ <span>个</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="blsl conList">
|
|
|
- <div class="floortitle">累计办理数量</div>
|
|
|
- <div class="floorcontent">
|
|
|
- <div class="list">
|
|
|
- <div class="img">
|
|
|
- <img src="images/blsl1.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <span>本日办理数量</span>
|
|
|
- <div class="number">
|
|
|
- <span>98</span>
|
|
|
- <span>项</span>
|
|
|
+ <div class="blsl conList">
|
|
|
+ <div class="floortitle">累计办理数量</div>
|
|
|
+ <div class="floorcontent">
|
|
|
+ <div class="list">
|
|
|
+ <div class="img">
|
|
|
+ <img src="images/blsl1.png" alt="">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="list">
|
|
|
- <div class="img">
|
|
|
- <img src="images/blsl2.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <span>本月办理数量</span>
|
|
|
- <div class="number">
|
|
|
- <span>1298</span>
|
|
|
- <span>项</span>
|
|
|
+ <div class="right">
|
|
|
+ <span>本日办理数量</span>
|
|
|
+ <div class="number">
|
|
|
+ <span>98</span>
|
|
|
+ <span>项</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="list">
|
|
|
- <div class="img">
|
|
|
- <img src="images/blsl3.png" alt="">
|
|
|
+ <div class="list">
|
|
|
+ <div class="img">
|
|
|
+ <img src="images/blsl2.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span>本月办理数量</span>
|
|
|
+ <div class="number">
|
|
|
+ <span>1298</span>
|
|
|
+ <span>项</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <span>本年办理数量</span>
|
|
|
- <div class="number">
|
|
|
- <span>6298</span>
|
|
|
- <span>项</span>
|
|
|
+ <div class="list">
|
|
|
+ <div class="img">
|
|
|
+ <img src="images/blsl3.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span>本年办理数量</span>
|
|
|
+ <div class="number">
|
|
|
+ <span>6298</span>
|
|
|
+ <span>项</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="pdgdf conList">
|
|
|
- <div class="floortitle">大厅排队高低峰图</div>
|
|
|
- <div class="floorcontent">
|
|
|
- <div id="pdgdfechart" style="width: 100%;height: 100%;"></div>
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <span style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">地铁6号线</span>
|
|
|
- <span>邱家湾站2B出口</span>
|
|
|
- <span>距离：800米</span>
|
|
|
- <img src="images/qjtArrow.png" alt="">
|
|
|
+ <div class="pdgdf conList">
|
|
|
+ <div class="floortitle">大厅排队高低峰图</div>
|
|
|
+ <div class="floorcontent">
|
|
|
+ <div id="pdgdfechart" style="width: 100%;height: 100%;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <span style="font-size: 18px;font-weight: bold;margin-bottom: 5px;">地铁6号线</span>
|
|
|
+ <span>邱家湾站2B出口</span>
|
|
|
+ <span>距离：800米</span>
|
|
|
+ <img src="images/qjtArrow.png" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -627,7 +633,7 @@
|
|
|
<script>
|
|
|
// 初始化Vue实例
|
|
|
new Vue({
|
|
|
- el: '#ggyq',
|
|
|
+ el: '#qjt',
|
|
|
data: function () {
|
|
|
return {
|
|
|
currentTime: ""
|
|
|
@@ -642,8 +648,20 @@
|
|
|
},
|
|
|
methods: {
|
|
|
updateTime() {
|
|
|
+ // 获取当前日期时间对象
|
|
|
const now = new Date();
|
|
|
- this.currentTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
|
|
|
+
|
|
|
+ // 获取年月日时分秒，并补零
|
|
|
+ const year = String(now.getFullYear()).padStart(4, '0');
|
|
|
+ const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
|
|
|
+ const day = String(now.getDate()).padStart(2, '0');
|
|
|
+ const hours = String(now.getHours()).padStart(2, '0');
|
|
|
+ const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
|
+ const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
|
+
|
|
|
+ // 组合成格式化的字符串
|
|
|
+ const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+ this.currentTime = formattedDateTime;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
@@ -695,7 +713,7 @@
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: 'Line 1',
|
|
|
+ name: '大厅排队高低峰图',
|
|
|
type: 'line',
|
|
|
stack: 'Total',
|
|
|
smooth: true,
|
FinalYu