master

分支 (1)

管理

管理

master

echarts-data-visualization
/
logistics-order.html

<!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="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/echarts.js"></script>
    <script src="./js/jquery-3.7.1.js"></script>
</head>

<body>
    <div class="header">
        <div class="header-left" id="time"></div>
        <div class="header-right">物流大数据分析平台欢迎您！</div>
        <div class="sysName">
            <h1 class="tit">物流大数据分析平台</h1>
            <div class="header-img"></div>
        </div>
        <div class="menu">
            <ul>
                <li><a href="./index.html">总数据</a></li>
                <li><a href="./logistics-operation.html">物流运营综合分析</a></li>
                <li class="sysnameN"></li>
                <li><a href="./logistics-market.html">物流市场分析</a></li>
                <li><a href="./logistics-order.html" class="menuActive">物流订单分析</a></li>
            </ul>
        </div>
        <div class="header-bottom"></div>
    </div>
    <div class="chartWarp saleWarp" id="order-box">
        <div class="pure-g sale-row1">
            <div class="pure-u-1-4">
                <div class="chartBlock">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">城市订单时效</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="timeAnalysis" class="chartDiv"></div>
                    </div>
                </div>
            </div>
            <div class="pure-u-1-4">
                <div class="chartBlock">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">热门物件库存</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="inventory" class="chartDiv"></div>
                    </div>
                </div>
            </div>
            <div class="pure-u-1-4">
                <div class="chartBlock">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">订单成本</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="orderCost" class="chartDiv"></div>
                    </div>
                </div>
            </div>
            <div class="pure-u-1-4">
                <div class="chartBlock">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">客户满意度</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="customerYi" class="chartDiv"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pure-g sale-row2">
            <div class="pure-u-1-4">
                <div class="chartBlock">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">城市卖家数量</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="citySeller" class="chartDiv"></div>
                    </div>
                </div>
            </div>
            <div class="pure-u-1-2">
                <div class="chartBlock">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">订单情况</h2>
                        </div>
                    </div>
                    <div class="bd">
                        <div id="orderStatus" class="chartDiv"></div>
                    </div>
                </div>
            </div>
            <div class="pure-u-1-4">
                <div class="chartBlock">
                    <div class="hd">
                        <div class="chartTit">
                            <h2 class="titContent">订单下发时段</h2>
                        </div>
                    </div>
                    <div class="bd barOrder">
                        <div id="orderIssuance" class="chartDiv"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function getCurrentDateTime() {
            const now = new Date()
            const year = now.getFullYear()
            const month = String(now.getMonth() + 1).padStart(2, '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 weekday = new Intl.DateTimeFormat('zh-CN', { weekday: 'long' }).format(now);
            return `${year}-${month}-${day}&nbsp;&nbsp;${hours}:${minutes}:${seconds}&nbsp;&nbsp;<span>${weekday}</span>`;
        }
        document.getElementById('time').innerHTML = getCurrentDateTime()
        setInterval(() => {
            document.getElementById('time').innerHTML = getCurrentDateTime()
        }, 1000)
    </script>

    <script src="./js/logistics-order.js"></script>
</body>

</html>