476 lines
15 KiB
HTML
476 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>大数据可视化平台</title>
|
|
|
|
<script type="text/javascript" src="js/jquery.js"></script>
|
|
<link rel="stylesheet" href="css/comon0.css" />
|
|
<style>
|
|
.adduser li {
|
|
/*line-height:.42rem;*/
|
|
font-size: 0.18rem;
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
|
|
.adduser li p {
|
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.grid {
|
|
margin-top: 5%;
|
|
width: 80%;
|
|
height: 10px;
|
|
display: grid;
|
|
grid-template-columns: repeat(20, 1fr);
|
|
grid-column-gap: 14px;
|
|
}
|
|
|
|
.line {
|
|
position: relative;
|
|
width: 90%;
|
|
height: 7px;
|
|
}
|
|
|
|
.line::before,
|
|
.line::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 4.5rem;
|
|
height: 100%;
|
|
border-radius: 7px;
|
|
background-color: #ff0000;
|
|
}
|
|
|
|
.line::before {
|
|
animation: first-line ease-in-out 4s var(--delay) infinite alternate;
|
|
}
|
|
|
|
.line::after {
|
|
bottom: 0;
|
|
background-color: #b22222;
|
|
width: calc(80% - 10px);
|
|
animation: second-line ease-in-out 4s var(--delay) infinite alternate;
|
|
}
|
|
|
|
.line:nth-child(1) {
|
|
--delay: calc(-0.1s);
|
|
}
|
|
|
|
@keyframes first-line {
|
|
70% {
|
|
width: calc(80% - 10px);
|
|
}
|
|
100% {
|
|
background-color: #ff0000;
|
|
}
|
|
}
|
|
|
|
.barbox li {
|
|
font-size: 0.7rem;
|
|
color: #ffeb7b;
|
|
padding: 0.05rem 0;
|
|
font-family: electronicFont, "sans-serif";
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
var html = $(".wrap ul").html();
|
|
$(".wrap ul").append(html);
|
|
var ls = $(".wrap li").length / 2 + 1;
|
|
i = 0;
|
|
ref = setInterval(function () {
|
|
i++;
|
|
if (i == ls) {
|
|
i = 1;
|
|
$(".wrap ul").css({
|
|
marginTop: 0,
|
|
});
|
|
$(".wrap ul").animate(
|
|
{
|
|
marginTop: -".52" * i + "rem",
|
|
},
|
|
1000
|
|
);
|
|
}
|
|
$(".wrap ul").animate(
|
|
{
|
|
marginTop: -".52" * i + "rem",
|
|
},
|
|
1000
|
|
);
|
|
}, 2400);
|
|
|
|
var html2 = $(".adduser ul").html();
|
|
$(".adduser ul").append(html2);
|
|
var ls2 = $(".adduser li").length / 2 + 1;
|
|
a = 0;
|
|
ref = setInterval(function () {
|
|
a++;
|
|
if (a == ls2) {
|
|
a = 1;
|
|
$(".adduser ul").css({
|
|
marginTop: 0,
|
|
});
|
|
$(".adduser ul").animate(
|
|
{
|
|
marginTop: -".4" * a + "rem",
|
|
},
|
|
800
|
|
);
|
|
}
|
|
$(".adduser ul").animate(
|
|
{
|
|
marginTop: -".4" * a + "rem",
|
|
},
|
|
800
|
|
);
|
|
}, 4300);
|
|
});
|
|
</script>
|
|
|
|
<body style="overflow: -Scroll; overflow-y: hidden">
|
|
<div class="loading">
|
|
<div class="loadbox"><img src="images/loading.gif" /> 页面加载中...</div>
|
|
</div>
|
|
<div class="mainbox" style="margin-top: 5%">
|
|
<ul class="clearfix">
|
|
<li>
|
|
<div class="boxall" style="height: 4rem">
|
|
<div class="alltitle">系统状态</div>
|
|
|
|
<div class="sycm">
|
|
<ul
|
|
class="clearfix"
|
|
style="
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<li>
|
|
<h2 class="load-connect" style="color: orange">连接中</h2>
|
|
<span>在线状态(Online)</span>
|
|
</li>
|
|
|
|
<li>
|
|
<h2 class="load-delay">0(MS)</h2>
|
|
<span>网络延迟(Network)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sycm">
|
|
<div class="tit02"><span>实时数据</span></div>
|
|
<ul
|
|
class="clearfix"
|
|
style="
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<li>
|
|
<h2 id="today_amount">43</h2>
|
|
<span>今日成功订单数量 </span>
|
|
</li>
|
|
|
|
<li>
|
|
<h2 id="today2_amount">76</h2>
|
|
<span> 今日失败订单数量</span>
|
|
</li>
|
|
</ul>
|
|
<ul
|
|
class="clearfix"
|
|
style="
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
padding-top: 30px;
|
|
"
|
|
>
|
|
<li>
|
|
<h2 id="yes_amount">75</h2>
|
|
<span>昨日成功订单数量 </span>
|
|
</li>
|
|
|
|
<li>
|
|
<h2 id="yes2_amount">2</h2>
|
|
<span> 昨日失败订单数量</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- <div class="boxfoot"></div> -->
|
|
</div>
|
|
<div class="boxall" style="height: 4rem">
|
|
<div class="alltitle">系统状态</div>
|
|
|
|
<div class="sycm">
|
|
<ul
|
|
class="clearfix"
|
|
style="
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
<li>
|
|
<h2 id="today_total_money">13654</h2>
|
|
<span>今日流水额</span>
|
|
</li>
|
|
|
|
<li>
|
|
<h2 id="yesday_total_money">16565</h2>
|
|
<span>昨日流水额</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sycm">
|
|
<div class="tit02"><span>信息统计</span></div>
|
|
<ul class="clearfix">
|
|
<li>
|
|
<h2 id="today_total_day">5434</h2>
|
|
<span>今日日租总成交 </span>
|
|
</li>
|
|
|
|
<li>
|
|
<h2 id="today_total_hour">768</h2>
|
|
<span>今日时租总成交</span>
|
|
</li>
|
|
<li>
|
|
<h2 id="today2_total_money">1434</h2>
|
|
<span> 今日未支付金额</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="clearfix">
|
|
<li>
|
|
<h2 id="total_user">128</h2>
|
|
<span>用户数量 </span>
|
|
</li>
|
|
|
|
<li>
|
|
<h2 id="total_car">50</h2>
|
|
<span> 车位数量</span>
|
|
</li>
|
|
<li>
|
|
<h2 id="total_parking">8</h2>
|
|
<span> 停车场总数</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- <div class="boxfoot"></div> -->
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="bar">
|
|
<div class="barbox">
|
|
<ul class="clearfix">
|
|
<li class="pulll_left counter" id="total_order">345</li>
|
|
<li class="pulll_left counter" id="total_money">645</li>
|
|
</ul>
|
|
</div>
|
|
<div class="barbox2">
|
|
<ul class="clearfix">
|
|
<li class="pulll_left">订单总数</li>
|
|
<li class="pulll_left">总结算金额</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="map">
|
|
<div class="map1"><img src="images/lbx.png" /></div>
|
|
<div class="map2"><img src="images/jt.png" /></div>
|
|
<div class="map3"><img src="images/map.png" /></div>
|
|
<div class="map4" id="map_1"></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="boxall" style="height: 8.2rem">
|
|
<div class="alltitle">订单监控</div>
|
|
|
|
<div class="addnew">
|
|
<div class="tit02"><span>最新订单</span></div>
|
|
<div class="adduser" style="height: 7rem">
|
|
<ul id="orders">
|
|
<!-- 循环订单 -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="boxfoot"></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="back"></div>
|
|
<script type="text/javascript" src="js/echarts.min.js"></script>
|
|
<script type="text/javascript" src="js/echarts-gl.min.js"></script>
|
|
<script language="JavaScript" src="js/echarts-tool.js"></script>
|
|
<script type="text/javascript" src="js/timelineOption.js"></script>
|
|
<script type="text/javascript" src="../../assets/token.js"></script>
|
|
|
|
<script type="text/javascript"></script>
|
|
|
|
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
|
|
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
getcount();
|
|
getorder();
|
|
setInterval(function () {
|
|
console.log("1");
|
|
getcount();
|
|
getorder();
|
|
}, 60000);
|
|
// 获取订单
|
|
function getorder() {
|
|
$.ajax({
|
|
url: `${api}/api/getorder`,
|
|
type: "post",
|
|
contentType: "application/json",
|
|
headers: {
|
|
Authorization: window.localStorage.getItem("token"),
|
|
},
|
|
success: function (response) {
|
|
// 处理成功的响应
|
|
let orders = response.data;
|
|
var ul = $("#orders");
|
|
for (let i = 0; i <= 15; i++) {
|
|
// var dates=new Date(orders[i].addtime)
|
|
function formatDateTime(dateTime) {
|
|
const dateObj = new Date(dateTime);
|
|
const year = dateObj.getFullYear();
|
|
const month = String(dateObj.getMonth() + 1).padStart(2, "0");
|
|
const day = String(dateObj.getDate()).padStart(2, "0");
|
|
const hours = String(dateObj.getHours()).padStart(2, "0");
|
|
const minutes = String(dateObj.getMinutes()).padStart(2, "0");
|
|
const seconds = String(dateObj.getSeconds()).padStart(2, "0");
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
dates = formatDateTime(orders[i].inTime);
|
|
if (orders[i].mode == 0) {
|
|
label = '<b style="color: #7c7cff;">';
|
|
paytype = "按时租定";
|
|
}
|
|
|
|
if (orders[i].mode == 1) {
|
|
label = '<b style="color: green;">';
|
|
paytype = "按天租定";
|
|
}
|
|
|
|
if (orders[i].orderStatus == 1) {
|
|
var zhuangtai = "已支付";
|
|
var li = `<li><p><b style="color:#b7a642;">停车场：${orders[i].parkingName}-车位号：${orders[i].carNumber}-租借人：${orders[i].userName}</b><br>${zhuangtai} - ￥${orders[i].orderMoney} - -${label}-${paytype}</b> - ${dates}</p></li>`;
|
|
} else if (orders[i].orderStatus == 0) {
|
|
var zhuangtai = "未支付";
|
|
var li = `<li><p><b style="color:#b7a642;">停车场${orders[i].parkingName}-车位号：${orders[i].carNumber}-租借人：${orders[i].userName}</b><br>${zhuangtai} - ￥${orders[i].orderMoney} - -${label}-${paytype}</b> - ${dates}</p></li>`;
|
|
}
|
|
|
|
ul.append(li);
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
// 处理请求错误
|
|
console.error(error);
|
|
},
|
|
});
|
|
}
|
|
// 获取统计信息
|
|
function getcount() {
|
|
$.ajax({
|
|
url: `${api}/api/getcount`,
|
|
type: "post",
|
|
contentType: "application/json",
|
|
headers: {
|
|
Authorization: window.localStorage.getItem("token"),
|
|
},
|
|
success: function (response) {
|
|
// 渲染总订单数量
|
|
$("#total_order").html(
|
|
response.data.total_orders
|
|
? response.data.total_orders
|
|
: "loading"
|
|
);
|
|
// 渲染总金额
|
|
$("#total_money").html(
|
|
response.data.total_moneys
|
|
? response.data.total_moneys
|
|
: "loading"
|
|
);
|
|
// 渲染今日日租金额
|
|
$("#today_total_day").html(
|
|
response.data.today_total_day
|
|
? response.data.today_total_day
|
|
: "loading"
|
|
);
|
|
// 渲染今日时租金额
|
|
$("#today_total_hour").html(
|
|
response.data.today_total_hour
|
|
? response.data.today_total_hour
|
|
: "loading"
|
|
);
|
|
// 渲染今日成功订单
|
|
$("#today_amount").html(
|
|
response.data.today_amount
|
|
? response.data.today_amount
|
|
: "loading"
|
|
);
|
|
// 渲染今日失败订单
|
|
$("#today2_amount").html(
|
|
response.data.today2_amount
|
|
? response.data.today2_amount
|
|
: "loading"
|
|
);
|
|
// 渲染今日失败金额
|
|
$("#today2_total_money").html(
|
|
response.data.today2_total_money
|
|
? response.data.today2_total_money
|
|
: "loading"
|
|
);
|
|
// 渲染昨日成功订单
|
|
$("#yes_amount").html(
|
|
response.data.yes_amount ? response.data.yes_amount : "loading"
|
|
);
|
|
// 渲染昨日失败订单
|
|
$("#yes2_amount").html(
|
|
response.data.yes2_amount ? response.data.yes2_amount : "loading"
|
|
);
|
|
// 渲染今日流水额
|
|
$("#today_total_money").html(
|
|
response.data.today_total_money
|
|
? response.data.today_total_money
|
|
: "loading"
|
|
);
|
|
// 渲染昨日流水额
|
|
$("#yesday_total_money").html(
|
|
response.data.yesday_total_money
|
|
? response.data.yesday_total_money
|
|
: "loading"
|
|
);
|
|
// 渲染用户总数
|
|
$("#total_user").html(
|
|
response.data.total_user ? response.data.total_user : "loading"
|
|
);
|
|
// 渲染车辆总数
|
|
$("#total_car").html(
|
|
response.data.total_car ? response.data.total_car : "loading"
|
|
);
|
|
// 渲染维修总数
|
|
$("#total_parking").html(
|
|
response.data.total_parking
|
|
? response.data.total_parking
|
|
: "loading"
|
|
);
|
|
$(".counter").countUp();
|
|
},
|
|
error: function (xhr, status, error) {
|
|
// 处理请求错误
|
|
console.error(error);
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|