Freight-Settlement-Screen/src/components/page/sindex copy 3.vue

<template>
    <div class="dashboard-container">
        <div class="background-wrapper" style="width: 2048px; height: 1152px; pointer-events: auto;z-index: 0;">
            <img src="../../assets/imgs/bgimg.png" alt="" style="width: 2048px;height: 1152px;">
        </div>
        <div class="main-content">
            <div class="header-background">
                <div class="header-section">
                    <div class="main-title fontMF">电氢智运-物流集散调度中心</div>
                </div>

                <div class="time-display fontFx">
                    <span class="margin-right-10 fontMF">{{ nowWeek }}</span>
                    <span class="margin-right-10">{{ nowDate }}</span>
                    {{ nowTime }}
                </div>
            </div>
            <div class="content-body">
                <div class="left-panel">
                    <div class="section-title fontMF">当前运力分析展示</div>
                    <div class="enterprise-statistics">
                        <img src="../../assets/enterprise.png" alt="" class="enterprise-icon">
                        <p class="enterprise-title">入驻企业</p>
                        <div class="enterprise-count">
                            <counts bg :startVal="0" :length="6" :endVal='EnterpriseStatistics' separator="" />
                            <span>家</span>
                        </div>
                    </div>
                    <div class="vehicle-stats-row-1">
                        <div class="stat-number">
                            <count :startVal='0' :endVal='VehicleAnalysis.entryTruck' :decimals="0" />
                            <p>入驻车辆/辆</p>
                        </div>
                        <div class="stat-number">
                            <count :startVal='0' :endVal='VehicleAnalysis.entryUnmanned' :decimals="0" />
                            <p>入驻无人车辆</p>
                        </div>
                    </div>
                    <div class="vehicle-stats-row-2">
                        <div class="stat-number">
                            <count :startVal='0' :endVal='VehicleAnalysis.entryDriver' :decimals="0" />
                            <p>入驻司机/人</p>
                        </div>
                        <div class="stat-number">
                            <count :startVal='0' :endVal='VehicleAnalysis.entryTotal' :decimals="0" />
                            <p>平台磅秤/座</p>
                        </div>
                    </div>
                    <div class="section-title fontMF">客户列表展示</div>
                    <div class="customer-table">
                        <div class="table-header flex" style="padding-left: 28px;">
                            <div style="width: 20%;text-align: center;">客户类型</div>
                            <div style="width: 20%;text-align: center;">使用次数</div>
                            <div style="width: 20%;text-align: center;">货物运输量</div>
                            <div style="width: 20%;text-align: center;">服务车辆数</div>
                            <div style="width: 20%;text-align: center;">车辆运营时长</div>
                        </div>
                        <div class="table-body" style="height:480px; overflow: hidden; position: relative;">
                            <div class="scroll-content customer-scroll-content"
                                :style="{ transform: `translateY(-${scrollTop}px)` }" ref="scrollContentRef"
                                @mouseenter="pauseScroll" @mouseleave="resumeScroll">
                                <div v-for="(item, i) in customerList" :key="i" class="table-row flex"
                                    style="height: 28px;display: flex;" id="customerListRowE">
                                    <div class="row-rank">{{ item.rank }}</div>
                                    <div class="row-content">
                                        <div class="table-cell" style="width: 20%;text-align: center;">{{ item.name }}</div>
                                        <div class="table-cell" style="width: 20%;text-align: center;">{{ item.usageCount }}次
                                        </div>
                                        <div class="table-cell" style="width: 20%;text-align: center;">
                                            {{ item.transportationVolume }}</div>
                                        <div class="table-cell" style="width: 20%;text-align: center;">{{ item.serveCarCount }}
                                        </div>
                                        <div class="table-cell" style="width: 20%;text-align: center;">{{ item.duration }}</div>
                                    </div>
                                </div>
                                <div v-for="(item, i) in customerList" :key="'copy-' + i" class="table-row flex"
                                    style="height: 28px;">
                                    <div class="row-rank">{{ item.rank }}</div>
                                    <div class="row-content">
                                        <div class="table-cell" style="width: 20%;text-align: center;">{{ item.name }}</div>
                                        <div class="table-cell" style="width: 20%;text-align: center;">{{ item.usageCount }}次
                                        </div>
                                        <div class="table-cell" style="width: 20%;text-align: center;">
                                            {{ item.transportationVolume }}</div>
                                        <div class="table-cell" style="width: 20%;text-align: center;">{{ item.serveCarCount }}
                                        </div>
                                        <div class="table-cell" style="width: 20%;text-align: center;">{{ item.duration }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="center-panel">
                    <div class="statistics-top">
                        <div class="statistic-item">
                            <div class="statistic-header">
                                <img class="statistic-icon" src="../../assets/imgs/dot.png" alt="">
                                <div class="statistic-label fontMF">累计运单/车</div>
                            </div>
                            <counts bg :startVal="0" :length="6" :endVal='totalStatistics.totalOrders' separator="" />
                        </div>
                        <div class="statistic-item">
                            <div class="statistic-header">
                                <img class="statistic-icon" src="../../assets/imgs/dot.png" alt="">
                                <div class="statistic-label fontMF">累计运载/吨</div>
                            </div>
                            <counts bg :startVal="0" :length="6" :endVal='totalStatistics.totalWeight' separator="" />
                        </div>
                        <div class="statistic-item">
                            <div class="statistic-header">
                                <img class="statistic-icon" src="../../assets/imgs/dot.png" alt="">
                                <div class="statistic-label fontMF">配送中车辆数/辆</div>
                            </div>
                            <counts bg :startVal="0" :length="6" :endVal='totalStatistics.deliveringVehicles'
                                separator="" />
                        </div>
                    </div>
                    <div class="map-container">
                        <img src="../../assets/imgs/map_bg.png" alt="" class="map-background">
                        <div class="iframe-wrapper">
                            <iframe ref="iframe" id="iframe" src="https://saas.sckaiwu.cn/wyenuxmd4j.html"
                                frameborder="0"></iframe>
                        </div>
                    </div>
                </div>
                <div class="right-panel">
                    <div class="section-title fontMF" style="margin-top: 0px;margin-left: 0 !important;">车辆入驻统计</div>
                    <div>
                        <Charts :eOption="vehicleStatsOption" v-if="vehicleStatsOption"
                            style="height: 424px; width: 450px;" />
                    </div>
                    <div class="section-title fontMF" style="margin-top: 30px;margin-left: 0 !important;">订单执行情况</div>
                    <div class="order-table">
                        <div class="table-header flex">
                            <div style="width: 28%;text-align: center;">订单号</div>
                            <div style="width: 18%;text-align: center;">计划量/吨</div>
                            <div style="width: 18%;text-align: center;">已装载/吨</div>
                            <div style="width: 18%;text-align: center;">车次</div>
                            <div style="width: 18%;text-align: center;">完成率</div>
                        </div>
                        <div class="table-body" style="height: 400px; overflow: hidden; position: relative;">
                            <div class="order-scroll-content" :style="{ transform: `translateY(-${scrollTop2}px)` }"
                                ref="scrollContentRef2" @mouseenter="pauseScroll2" @mouseleave="resumeScroll2">
                                <div v-for="(item, i) in orderList" :key="i" class="table-row flex" style="height: 40px;">
                                    <div class="table-cell" style="width: 28%;text-align: center;">{{ item.orderId }}</div>
                                    <div class="table-cell" style="width: 18%;text-align: center;">{{ item.totalWeight }}{{
                                        item.unit }}</div>
                                    <div class="table-cell" style="width: 18%;text-align: center;">{{ item.deliveredWeight }}{{
                                        item.unit }}
                                    </div>
                                    <div class="table-cell" style="width: 18%;text-align: center;">{{ item.carNumber }}</div>
                                    <div class="progress-cell" style="width: 18%;color: #fff;">
                                        <div class="progress-bar" :style="{ width: getRadioWidth(item.progress.toFixed(0)) }">
                                            <div class="progress-indicator"></div>
                                        </div>
                                        {{ item.progress.toFixed(0) }}
                                    </div>
                                </div>
                                <div v-for="(item, i) in orderList" :key="'copy-' + i" class="table-row flex"
                                    style="height: 40px;">
                                    <div class="table-cell" style="width: 28%;text-align: center;">{{ item.orderId }}</div>
                                    <div class="table-cell" style="width: 18%;text-align: center;">{{ item.totalWeight }}{{
                                        item.unit }}</div>
                                    <div class="table-cell" style="width: 18%;text-align: center;">{{ item.deliveredWeight }}{{
                                        item.unit }}
                                    </div>
                                    <div class="table-cell" style="width: 18%;text-align: center;">{{ item.carNumber }}</div>
                                    <div class="progress-cell" style="width: 18%;color: #fff;">
                                        <div class="progress-bar" :style="{ width: getRadioWidth(item.progress.toFixed(0)) }">
                                            <div class="progress-indicator"></div>
                                        </div>
                                        {{ item.progress.toFixed(0) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount, defineComponent } from 'vue';
import moment from 'moment';
import Charts from '@/components/selfCP/charts.vue';
import Chartsbar from '@/components/selfCP/chartsbar.vue';
import count from './count.vue';
import counts from './counts.vue';
import { POST, GET } from '@/server/api/common';
import * as echarts from "echarts";
import { useRoute } from 'vue-router';
import { getCurrentInstance } from 'vue';

const { appContext } = getCurrentInstance();
const $config = appContext.config.globalProperties.$config;

// 注册组件
const components = { Charts, Chartsbar, count, counts };

// 响应式数据
const nowWeek = ref('');
const nowDate = ref('');
const nowTime = ref('');

const tabIndex = ref(1);

let newTimer = null;
let time1 = null;
let time2 = null;
let mineId = ref(null);

const route = useRoute();


function getNowTime() {
    let date = new Date();
    nowDate.value =
        date.getFullYear() +
        '.' +
        (date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)) +
        '.' +
        (date.getDate() >= 10 ? date.getDate() : '0' + date.getDate());
    nowTime.value =
        date.getHours() +
        ':' +
        (date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()) +
        ':' +
        (date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds());
    let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    nowWeek.value = weeks[date.getDay()];
}

function getApiUrl() {
    getEnterpriseStatistics()
    getVehicleAnalysis()
    getCustomerList()
    getTotalStatistics()
    getCarStatistics()
    getOrders()
}

const EnterpriseStatistics = ref(0)
const orderSituationList = ref([])
function getEnterpriseStatistics() {
    GET($config.enterpriseStatistics.url).then((res) => {
        EnterpriseStatistics.value = res.data.data.total
    })
}
const VehicleAnalysis = ref({
    "entryTruck": 0,
    "entryDriver": 0,
    "entryUnmanned": 0,
    "entryTotal": 0
})
function getVehicleAnalysis() {
    GET($config.vehicleAnalysis.url).then((res) => {
        VehicleAnalysis.value = res.data.data
    })
}
const customerList = ref([])
function getCustomerList() {
    GET($config.customerList.url).then((res) => {
        customerList.value = res.data.data.list
        setTimeout(() => {
            startScroll();
        }, 500);

    })
}
const orderList = ref([])
function getOrders() {
    GET($config.orders.url).then((res) => {
        orderList.value = res.data.data.orders
        startScroll2();
    })
}
const totalStatistics = ref({
    "totalOrders": 0,
    "totalWeight": 0,
    "deliveringVehicles": 0
})
function getTotalStatistics() {
    GET($config.totalStatistics.url).then((res) => {
        totalStatistics.value = res.data.data
    })
}


function getCarStatistics() {
    GET($config.carStatistics.url).then((res) => {
        console.log(res);

        vehicleStatsOption.value = {
            backgroundColor: 'transparent',
            title: {
                text: '入驻数量',
                left: '20px',
                top: '20px',
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                    fontWeight: 'normal'
                }
            },
            legend: {
                data: ['入驻司机', '登记车辆', '无人车辆'],
                right: '20px',
                top: '20px',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                itemWidth: 8,
                itemHeight: 8,
                icon: 'rect'
            },
            grid: {
                left: '3%',
                right: '5%',
                bottom: '5%',
                top: '20%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: res.data.data.categories,
                axisLine: {
                    lineStyle: {
                        color: '#2a4b7c'
                    }
                },
                axisLabel: {
                    color: '#8892b0',
                    fontSize: 10
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                max: 800,
                interval: 100,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#8892b0',
                    fontSize: 12
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1e3a5f',
                        type: 'solid',
                        width: 1
                    }
                }
            },
            series: [
                {
                    name: '入驻司机',
                    type: 'bar',
                    data: res.data.data.series[0].data,
                    barWidth: 9,
                    barGap: '0%',
                    itemStyle: {
                        color: '#1890ff',
                        borderRadius: [0, 0, 0, 0]
                    },
                    showBackground: true,  // 开启背景
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)',  // 背景颜色
                    },
                },
                {
                    name: '登记车辆',
                    type: 'bar',
                    data: res.data.data.series[1].data,
                    barWidth: 9,
                    itemStyle: {
                        color: '#52c41a',
                        borderRadius: [0, 0, 0, 0]
                    },
                    showBackground: true,  // 开启背景
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)',  // 背景颜色
                    },
                },
                {
                    name: '无人车辆',
                    type: 'bar',
                    data: res.data.data.series[2].data,
                    barWidth: 9,
                    itemStyle: {
                        color: '#13c2c2',
                        borderRadius: [0, 0, 0, 0]
                    },
                    showBackground: true,  // 开启背景
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)',  // 背景颜色
                    },
                }
            ]
        }
    })
}
function getRadioWidth(pct) {
    let width = (76 / 100) * parseFloat(pct);
    return width + 'px';
}

const scrollTop = ref(0);
const scrollContentRef = ref(null);
let scrollTimer = null;
let rowHeight = 26; // 单行高度，和上面style一致
let pause = false;

function startScroll() {
    
    if (scrollTimer) clearInterval(scrollTimer);
    scrollTimer = setInterval(() => {
        if (pause) return;
        scrollTop.value += 1;
        // 滚动到一半（即原始数据高度）后重置
        if (customerList.value.length > 0 && scrollTop.value >= rowHeight * customerList.value.length) {
            scrollTop.value = 0;
        }
    }, 30); // 速度可调
}

function pauseScroll() {
    pause = true;
}
function resumeScroll() {
    pause = false;
}

const scrollTop2 = ref(0);
const scrollContentRef2 = ref(null);
let scrollTimer2 = null;
const rowHeight2 = 40;
let pause2 = false;

function startScroll2() {
    if (scrollTimer2) clearInterval(scrollTimer2);
    scrollTimer2 = setInterval(() => {
        if (pause2) return;
        scrollTop2.value += 1;
        if (orderList.value.length > 0 && scrollTop2.value >= rowHeight2 * orderList.value.length) {
            scrollTop2.value = 0;
        }
    }, 30);
}

function pauseScroll2() {
    pause2 = true;
}
function resumeScroll2() {
    pause2 = false;
}

// script setup 区域增加车辆统计图表配置
// 重新配置车辆统计图表，为每个柱子组合添加背景
const vehicleStatsOption = ref(null);

onMounted(() => {
    getNowTime();
    newTimer = setInterval(getNowTime, 1000);
    if (route.query && route.query.companyId) {
        mineId.value = route.query.companyId;
    }
    getApiUrl();
    moment.locale('zh-cn');
    // clearInterval(time1);
    // clearInterval(time2);
    // time1 = setInterval(getdata, $config.time * 1000);
    // time2 = setInterval(getdatas, $config.time1 * 1000);

});

onBeforeUnmount(() => {
    clearInterval(newTimer);
    newTimer = null;
    if (scrollTimer) clearInterval(scrollTimer);
    if (scrollTimer2) clearInterval(scrollTimer2);
});



</script>
<style lang="less" scoped>
@font-face {
    font-family: MFLiHei;
    src: url('../../assets/font/MFLiHei_Noncommercial-Regular.otf') format('opentype');
}

@font-face {
    font-family: FXLed;
    src: url('../../assets/font/DSDIGI1.ttf');
}

.fontMF {
    font-family: MFLiHei;
}

.fontFx {
    font-family: FXLed;
}

.flex {
    display: flex;
    align-items: center;
}

.MR40 {
    margin-right: 40px;
}

.margin-right-10 {
    margin-right: 10px;
}

.vehicle-stats-row-2 {
    height: 98px;
    width: 398px;
    background: url(../../assets/zhibiao2.png) no-repeat;
    background-size: 100%;
    display: flex;
    color: #fff;
    padding-right: 98px;
    box-sizing: border-box;
    margin: 0 auto;
    padding-bottom: 4px;

    .stat-number {
        width: 50%;
        text-align: center;
        display: flex;
        flex-direction: column;
        font-family: FXLed;
        font-weight: normal;
        font-size: 23px;
        color: #FFFFFF;
        margin-bottom: 0;
        align-items: center;
        justify-content: center;
        line-height: 23px;
    }

    p {
        font-size: 12px;
        line-height: 12px;
        margin-top: 4px;
    }
}

.enterprise-statistics {
    width: 314px;
    height: 95px;
    background: rgba(255, 255, 255, 0.1);
    padding-top: 12px;
    padding-left: 75px;
    box-sizing: border-box;
    position: relative;
    margin-left: 96px;
    margin-top: 40px;

    .enterprise-icon {
        position: absolute;
        width: 125px;
        height: 125px;
        left: -67.5px;
        top: -20px;
    }

    .enterprise-title {
        font-family: MFLiHei;
        font-weight: 400;
        font-size: 19px;
        color: #FFFFFF;
    }

    .enterprise-count {
        span {
            color: #fff;
            margin-left: 4px;
            line-height: 40px;
            position: relative;
            top: 8px;
        }
    }
}

.vehicle-stats-row-1 {
    margin-top: 10px;
    height: 98px;
    width: 398px;
    background: url(../../assets/zhibiao1.png) no-repeat;
    background-size: 100%;
    display: flex;
    color: #fff;
    padding-left: 98px;
    box-sizing: border-box;
    margin: 0 auto;
    padding-bottom: 4px;
    margin-top: 20px;

    .stat-number {
        width: 50%;
        text-align: center;
        display: flex;
        flex-direction: column;
        font-family: FXLed;
        font-weight: normal;
        font-size: 23px;
        color: #FFFFFF;
        margin-bottom: 0;
        align-items: center;
        justify-content: center;
        line-height: 23px;
    }

    p {
        font-size: 12px;
        line-height: 12px;
        margin-top: 4px;
    }
}

.dashboard-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    .main-content {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1;
        width: 100%;
        padding: 0px;

        .header-background {
            width: 2048px;
            height: 113px;
            z-index: 0;
            transform: rotate(0deg);
            opacity: 1;
            // pointer-events: none;
            position: relative;
        }

        .header-section {
            position: absolute !important;
            margin: 0 !important;
            width: 2048px;
            height: 113px;
            display: flex;
            justify-content: space-between;
            background-image: url(../../assets/imgs/title_bg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;

            .main-title {
                text-align: center;
                line-height: 25px;
                flex: 1;
                padding: 25px 0;
                pointer-events: auto;
                color: rgb(255, 255, 255);
                font-weight: 400;
                font-size: 40px;
                writing-mode: horizontal-tb;
                letter-spacing: 0px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }

        .tab-button {
            position: absolute;
            width: 257px;
            height: 39px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-family: MF LiHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 39px;
            text-align: center;
            cursor: pointer;
        }

        .left-tab {
            background-image: url(../../assets/imgs/tab_l.png);
            left: 270px;
            top: 15px;
            text-indent: 40px;
        }

        .left-tab-active {
            background-image: url(../../assets/imgs/tab_led.png);
        }

        .right-tab {
            background-image: url(../../assets/imgs/tab_r.png);
            right: 270px;
            top: 15px;
            text-indent: -30px;
        }

        .right-tab-active {
            background-image: url(../../assets/imgs/tab_red.png);
        }

        .time-display {
            position: fixed;
            right: 50px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            top: 8px;
            color: #fff;
        }

        .content-body {
            display: flex;
            justify-content: center;

            .left-panel {
                width: 484px;
                height: 1010px;
                background-image: url(../../assets/imgs/left_bg.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                padding: 20px;
                box-sizing: border-box;

                .quantity-display {
                    color: #FFFFFF;
                    font-size: 28px;
                    font-weight: bold;
                    letter-spacing: 0;
                    display: flex;
                    align-items: baseline;

                    .quantity-prefix {
                        font-size: 16px;
                        margin-right: 8px;
                    }

                    .quantity-unit {
                        margin-left: 8px;
                        font-size: 14px;
                        color: #FFFFFF;
                        font-weight: bolder;
                        vertical-align: super;
                        font-family: Microsoft Yahei;
                    }
                }

                .section-title {
                    width: 313px;
                    height: 24px;
                    background-image: url(../../assets/imgs/tits_bg.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    font-weight: 400;
                    font-size: 18px;
                    color: #FFFFFF;
                    text-indent: 25px;
                    margin-top: 10px;
                    line-height: 15px;
                }

                .carbox {
                    display: flex;
                    align-items: center;
                    padding-left: 40px;
                    margin-top: 30px;

                    .carimg {
                        width: 97px;
                        height: 88px;
                    }

                    .cardes {
                        margin-left: 35px;

                        .cart {
                            font-weight: 400;
                            font-size: 18px;
                            color: #FFFFFF;
                        }
                    }
                }

                .z_box {
                    margin-top: 30px;
                    display: flex;
                    align-items: center;

                    .l_box {
                        width: 190px;
                        height: 160px;
                        background: rgba(255, 255, 255, 0.1);
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;

                        .l_img {
                            width: 156px;
                            height: 86px;
                        }

                        .l_tit {
                            font-weight: 400;
                            font-size: 16px;
                            color: #FFFFFF;
                        }

                    }

                    .r_box {
                        margin-left: 20px;

                        .b_item {
                            width: 200px;
                            height: 70px;
                            background: rgba(255, 255, 255, 0.1);
                            display: flex;
                            align-items: center;

                            // justify-content: center;
                            .l_img {
                                width: 108px;
                                height: 59px;
                                margin-left: -20px;
                            }

                            .b_des {
                                margin-left: 16px;

                                .b_tit {
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #FFFFFF;
                                }
                            }
                        }
                    }
                }

                .customer-table {
                    width: 420px;
                    margin: 0 auto;
                    margin-top: 20px;
                    height: 360px;

                    .table-header {
                        color: #ffffff;
                        font-size: 12px;
                        padding: 9px 0;
                    }

                    .table-body {
                        .seamless-warp {
                            overflow: hidden;
                            height: 360px;
                            // height: 390px;
                            width: 100%;
                        }
                    }

                    th {
                        text-align: left;
                        font-size: 12px;
                        font-weight: 400;
                        color: #ffffff;
                        line-height: 30px;
                        // background-color: rgb(0, 80, 179);
                    }

                    .table-cell {
                        font-size: 12px;
                        font-weight: 400;
                        color: #ffffff;
                        line-height: 30px;
                    }

                    .table-row:nth-child(2n+1) {
                        // background-color: #032255;
                        background-color: rgba(255, 255, 255, 0.1);
                    }

                    .progress-cell {
                        display: flex;
                        align-items: center;
                        color: #ffffff;
                        font-size: 12px;

                        .progress-bar {
                            position: relative;
                            min-width: 6px;
                            height: 10px;
                            background: linear-gradient(90deg, #29abe3, #01ffff);
                            margin-right: 4px;

                            .progress-indicator {
                                width: 6px;
                                height: 16px;
                                background: #ffffff;
                                position: absolute;
                                top: -3px;
                                right: 0;
                            }
                        }
                    }
                }

                .nitem {
                    display: flex;
                    align-items: center;

                    .nimg {
                        width: 216px;
                        height: 122px;
                        position: relative;
                        z-index: 2;
                    }

                    .ndes {
                        width: 220px;
                        height: 70px;
                        background: rgba(255, 255, 255, 0.1);
                        display: flex;
                        margin-left: -50px;
                        position: relative;
                        z-index: 1;
                    }

                    .mc {
                        margin-left: 30px;
                        margin-top: 24px;
                    }
                }
            }
        }

        .center-panel {
            .statistics-top {
                width: 1018px;
                height: 138px;
                background-image: url(../../assets/imgs/mid_tbg.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                align-items: center;
                justify-content: center;

                .statistic-item {
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    flex: 1;

                    .statistic-header {
                        display: flex;
                        align-items: center;
                        margin-bottom: 12px;

                        .statistic-icon {
                            width: 20px;
                            height: 20px;
                        }

                        .statistic-label {
                            margin-left: 8px;
                            font-weight: 500;
                            font-size: 18px;
                            color: #FFFFFF;
                        }
                    }
                }
            }

            .map-container {
                margin-top: 14px;
                width: 1018px;
                height: 860px;
                // width: 1018px;
                // height: 658px;
                // background-image: url(../../assets/imgs/map_bg.png);
                // background-size: 100% 100%;
                // background-repeat: no-repeat;
                // margin-top: 14px;
                position: relative;
                box-sizing: border-box;

                .map-background {
                    width: 1018px;
                    height: 100%;
                    position: absolute;
                    z-index: 1;
                    pointer-events: none;
                }

                .iframe-wrapper {
                    position: absolute;
                    // background-image: url(../../assets/img/iframe_bg.png);
                    // background-repeat: no-repeat;
                    // background-size: 100% 100%;
                    overflow: hidden;
                    height: 100%;
                    padding-bottom: 20px;
                    box-sizing: border-box;

                    #iframe {
                        // margin: 10px 12px;
                        margin: 0 auto;
                        margin-left: 10px;
                        margin-top: 10px;
                        width: 998px;
                        height: 100%;
                        z-index: 0;
                        // border-radius: 30px;
                    }
                }
            }

            .mid_b {
                padding: 20px;
                box-sizing: border-box;
                width: 1018px;
                height: 190px;
                background-image: url(../../assets/imgs/mid_bbg.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-top: 10px;

                .tt {
                    width: 313px;
                    height: 24px;
                    background-image: url(../../assets/imgs/tits_bg.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    font-weight: 400;
                    font-size: 18px;
                    color: #FFFFFF;
                    text-indent: 25px;
                    line-height: 15px;
                    margin-top: 10px;
                    margin-left: 10px;
                }
            }
        }

        .right-panel {
            width: 484px;
            height: 1010px;
            background-image: url(../../assets/imgs/right_bg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 30px;
            box-sizing: border-box;

            .section-title {
                width: 313px;
                height: 24px;
                background-image: url(../../assets/imgs/tits_bg.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                font-weight: 400;
                font-size: 18px;
                color: #FFFFFF;
                text-indent: 25px;
                line-height: 15px;
                margin-top: 10px;
                margin-left: 10px;
            }

            .order-table {
                width: 424px;
                margin: 0 auto;

                .table-header {
                    color: #fff;
                    padding: 9px 0;
                    font-size: 12px;
                }

                .table-body {
                    .seamless-warp {
                        overflow: hidden;
                        height: 900px;
                        width: 424px;
                    }
                }

                th {
                    text-align: left;
                    font-size: 12px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 30px;
                }

                .table-cell {
                    font-size: 12px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 30px;
                }

                .table-row:nth-child(even) {
                    background-color: rgba(255, 255, 255, 0.1);
                    // background-color: rgba(255, 255, 255, 0.399);
                }

                .progress-cell {
                    display: flex;
                    align-items: center;
                    font-size: 12px;

                    .progress-bar {
                        position: relative;
                        min-width: 6px;
                        height: 10px;
                        background: linear-gradient(90deg, #29abe3, #01ffff);
                        margin-right: 4px;

                        .progress-indicator {
                            width: 6px;
                            height: 16px;
                            background: #ffffff;
                            position: absolute;
                            top: -3px;
                            right: 0;
                        }
                    }
                }
            }
        }
    }
}

.scroll-content {
    transition: transform 0.1s linear;
    will-change: transform;
}

.order-scroll-content {
    transition: transform 0.1s linear;
    will-change: transform;
}

.customer-scroll-content {

    .row-rank {
        width: 28px;
        height: 28px;
        background: linear-gradient(90deg, #0067FF, #3A93FF);
        text-align: center;
        color: #fff;
    }

    .row-content {
        display: flex;
        flex: 1;
    }
}
</style>