<script setup lang="ts">
import './style.less'
import PageTop from './components/pageTop/pageTop.vue'
import modalTitle from './components/modalTitle/modalTitle.vue';
import TrendOfTrafficFlow from './components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue'
import VehiclesEntering from './components/VehiclesEntering/VehiclesEntering.vue'
import PassengerFlowChanges from './components/PassengerFlowChanges/PassengerFlowChanges.vue'
import MultiIndustryIncome from './components/MultiIndustryIncome/MultiIndustryIncome.vue'
import BusinessStructure from './components/BusinessStructure/BusinessStructure.vue'
import CustomerAgeGroup from './components/CustomerAgeGroup/CustomerAgeGroup.vue'
import GenderCustomerGroup from './components/GenderCustomerGroup/GenderCustomerGroup.vue'
import CustomerGroupStay from './components/CustomerGroupStay/CustomerGroupStay.vue'
import PreferenceType from './components/PreferenceType/PreferenceType.vue'
import CoreBusinessData from './components/CoreBusinessData/CoreBusinessData.vue'
import AnnouncementTopic from './components/AnnouncementTopic/AnnouncementTopic.vue'
import MallOrderStatistics from './components/MallOrderStatistics/MallOrderStatistics.vue'
import SalesComparison from './components/SalesComparison/SalesComparison.vue'
import ReturnRate from './components/ReturnRate/ReturnRate.vue';
import HotProductList from './components/HotProductList/HotProductList.vue'
import TodayTrend from './components/TodayTrend/TodayTrend.vue'
import TradingAlert from './components/TradingAlert/TradingAlert.vue'
import PrivateRideService from './components/PrivateRideService/PrivateRideService.vue'
import RegionalRevenue from './components/RegionalRevenue/RegionalRevenue.vue'
import PageMap from './components/PageMap/PageMap.vue'
import { ref } from 'vue';
import FestivalRevenue from './components/FestivalRevenue/FestivalRevenue.vue';
import ConsumptionConversion from './components/ConsumptionConversion/ConsumptionConversion.vue'
import ConsumptionLevel from './components/ConsumptionLevel/ConsumptionLevel.vue';
import BrandConsumptionLevel from './components/BrandConsumptionLevel/BrandConsumptionLevel.vue';
import ConsumptionPeriod from './components/ConsumptionPeriod/ConsumptionPeriod.vue';
import PaymentProgress from './components/PaymentProgress/PaymentProgress.vue';
import TotalAccountsReceivable from './components/TotalAccountsReceivable/TotalAccountsReceivable.vue'
import AccountsReceivableWarning from './components/AccountsReceivableWarning/AccountsReceivableWarning.vue';
import BusyTradingRanking from './components/BusyTradingRanking/BusyTradingRanking.vue';
import NoticeListBox from './components/noticeListBox/noticeListBox.vue';
import BasicMessageBox from './components/BasicMessageBox/BasicMessageBox.vue';
import SupplierListBox from './components/supplierListBox/supplierListBox.vue'
import BrandListtBox from './components/BrandListtBox/BrandListtBox.vue';
import MerchantCategory from './components/MerchantCategory/MerchantCategory.vue';
import DeductionType from './components/DeductionType/DeductionType.vue';
import MerchantRatingRanking from './components/MerchantRatingRanking/MerchantRatingRanking.vue'
import HighQualityMerchants from './components/HighQualityMerchants/HighQualityMerchants.vue'
import ThisMonthBenefits from './components/ThisMonthBenefits/ThisMonthBenefits.vue';
import CoreCategory from './components/CoreCategory/CoreCategory.vue'
import BusinessCase from './components/BusinessCase/BusinessCase.vue'
import CustomerGroup from './components/CustomerGroup/CustomerGroup.vue'
import CustomerConsumptionPreferences from './components/CustomerConsumptionPreferences/CustomerConsumptionPreferences.vue'
import VehicleStayAnalysis from './components/VehicleStayAnalysis/VehicleStayAnalysis.vue'
import BrandDetail from './components/BrandDetail/BrandDetail.vue'
import AssessmentScoring from './components/AssessmentScoring/AssessmentScoring.vue';
import OverviewOfServiceArea from './components/OverviewOfServiceArea/OverviewOfServiceArea.vue'
import NewBigTitleBox from './components/newBigTitleBox/newBigTitleBox.vue'
import VehicleModelStay from './components/VehicleModelStay/VehicleModelStay.vue';
import ContractInformation from './components/ContractInformation/ContractInformation.vue'
import SignedClients from './components/SignedClients/SignedClients.vue'
import AnnualAccountsReceivable from './components/AnnualAccountsReceivable/AnnualAccountsReceivable.vue';
import DetailedPayment from './components/DetailedPayment/DetailedPayment.vue';
import DailyInspection from './components/DailyInspection/DailyInspection.vue';
import AssessmentScoringRanking from './components/AssessmentScoringRanking/AssessmentScoringRanking.vue';


// 页面样式
let pageType = ref<string>("center")
// 节日列表
let FestivalOptions = [
    { label: '元旦', value: 1 },
    { label: '春运', value: 2 },
    { label: '清明', value: 3 },
    { label: '五一', value: 4 },
    { label: '端午', value: 5 },
    { label: '暑期', value: 6 },
    { label: '中秋', value: 7 },
    { label: '国庆', value: 8 },

]
// 选中的节日
let FestivalValue = ref<number>(5)
// 当前选择的服务区数据
let currentService = ref<any>({})
// 新样式顶部的tab选择
let selectPageTab = ref<number>(1)


// 改变页面样式
const handleChangePageType = () => {
    if (pageType.value === 'center') {
        pageType.value = "left"
    } else {
        pageType.value = "center"
    }
}

// 拿到选择的服务区数据
const handleGetCurrentService = (obj: any) => {
    currentService.value = obj
}

// 改变选择的页面tab
const handleChangePageTab = (value: number) => {
    selectPageTab.value = value
    currentService.value = null
}

</script>

<template>
    <!-- <div class="main"> -->
    <div class="main169">
        <!-- 计划16：9的内容 -->
        <div class="pageTop">
            <PageTop :pageType="pageType" :selectPageTab="selectPageTab" @handleChangePageType="handleChangePageType"
                @handleChangePageTab="handleChangePageTab" />
        </div>

        <!-- 分区一 -->
        <div class="content169" v-if="selectPageTab === 1 || selectPageTab === 3">
            <div class="content169Left">
                <!-- 消息轮播框 -->
                <NoticeListBox :currentService="currentService" />

                <template v-if="selectPageTab === 1">
                    <!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
                    <div class="content169LeftContent">
                        <!-- 服务区概况 -->
                        <OverviewOfServiceArea />

                        <NewBigTitleBox :title="'管理运营监控'" style="margin-top: 15px;" />

                        <!-- 今日走势图 -->
                        <TodayTrend />

                        <!-- 服务区繁忙排行  交易排行 -->
                        <BusyTradingRanking style="margin-top: 11px;" />

                        <!-- 交易预警 -->
                        <!-- <TradingAlert style="margin-top: 11px;" /> -->
                    </div>

                </template>

                <template v-if="selectPageTab === 3">
                    <NewBigTitleBox title="应收账款" style="margin-top: 20px;" />

                    <div style="width: 100%;box-sizing: border-box;padding: 20px 11px;">

                        <!-- 合同信息 -->
                        <ContractInformation />

                        <!-- 收款完成进度 -->
                        <PaymentProgress style="margin-top: 24px;" />

                        <!-- 收款预警 -->
                        <AccountsReceivableWarning style="margin-top: 24px;" />
                    </div>


                </template>





                <!-- <modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
                    <template #extra>
                        <div class="FestivalBox">
                            <el-select class="festivalSelect" v-model="FestivalValue" placeholder="Select"
                                style="width: 72px;">
                                <el-option v-for="item in FestivalOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>
                    </template>
</modalTitle> -->
                <!-- 节假日营收分析 -->
                <!-- <FestivalRevenue :currentService="currentService" /> -->
            </div>

            <div class="content169Center">
                <!-- 核心经营数据 -->
                <CoreBusinessData :currentService="currentService" style="position: relative;z-index: 9;" />

                <!-- 地图 -->
                <PageMap @handleGetCurrentService="handleGetCurrentService" />

                <!-- 公告主题 -->
                <!-- <AnnouncementTopic style="position: relative;z-index: 9;" /> -->
            </div>


            <div class="content169Right">
                <!-- 时间天气等内容 -->
                <BasicMessageBox :currentService="currentService" />

                <template v-if="selectPageTab === 1">
                    <NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />

                    <div class="content169LeftContent" style="margin-top: 21px;">
                        <div class="leftContentBoxItem">
                            <!-- 车流断面趋势 -->
                            <TrendOfTrafficFlow :currentService="currentService" />
                        </div>

                        <div class="leftContentBoxItem" style="margin-top: 23px;">
                            <!-- 入区车辆趋势 -->
                            <VehiclesEntering :currentService="currentService" />
                        </div>

                        <div class="leftContentBoxItem" style="margin-top: 30px;">
                            <!-- 客流变化 -->
                            <PassengerFlowChanges :currentService="currentService" />
                        </div>


                        <div class="leftContentBoxItem" style="margin-top: 33px;">
                            <!-- 车型停留分析 / 日均 -->
                            <VehicleModelStay />
                        </div>
                    </div>

                </template>


                <template v-if="selectPageTab === 3">
                    <NewBigTitleBox :title="'应收账款'" style="margin-top: 20px;" />
                    <div style="width: 100%;box-sizing: border-box;padding: 16px 11px 0;">
                        <!-- 签约客户 -->
                        <SignedClients />

                        <!-- 应收总额完成度 -->
                        <TotalAccountsReceivable style="margin-top: 35px;" />

                        <!-- 年度应收总额完成度 -->
                        <AnnualAccountsReceivable style="margin-top: 35px;" />

                        <!-- 详细款项完成进度 -->
                        <DetailedPayment style="margin-top: 35px;" />
                    </div>
                </template>

            </div>
        </div>

        <div class="pageBottom" v-if="selectPageTab === 1 || selectPageTab === 3">

        </div>

        <!-- 分区二 -->
        <div class="content1692st" v-if="selectPageTab === 2">
            <div class="content1692stLeft">
                <!-- 消息轮播框 -->
                <NoticeListBox style="margin-top: 20px;width: 50%;" />
                <!-- 核心经营数据 -->
                <!-- <modalTitle :title="'核心经营数据'" style="margin-top: 20px;" /> -->
                <!-- <CoreBusinessData style="position: relative;z-index: 9;" :noTitle="true" /> -->

                <!-- 客群画像分析 -->
                <NewBigTitleBox :title="'客群画像分析'" :type="2" style="margin-top: 20px" />

                <div class="leftBottomContent">
                    <!-- 年龄 -->
                    <CustomerAgeGroup style="margin-top: 20px;" />

                    <!-- 性别 -->
                    <GenderCustomerGroup style="margin-left: 20px;margin-top: 20px;" />

                    <!-- 停留时长 -->
                    <!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->

                    <!-- 偏好类型 -->
                    <PreferenceType style="margin-left: 20px;margin-top: 20px;" />
                </div>

                <div class="left3stBottom">
                    <div class="left3stBottomItem">
                        <!-- 消费转化率对比图 -->
                        <ConsumptionConversion />
                    </div>

                    <div class="left3stBottomItem">
                        <!-- 消费水平 -->
                        <ConsumptionLevel />
                    </div>

                    <div class="left3stBottomItem">
                        <!-- 消费时段分析 -->
                        <ConsumptionPeriod style="margin-top: 11px;" />
                    </div>

                    <div class="left3stBottomItem">
                        <!-- 品牌消费水平 -->
                        <BrandConsumptionLevel style="margin-top: 11px;" />
                    </div>

                    <div class="left3stBottomItem">
                        <!-- 客群特征分析 -->
                        <CustomerGroup style="margin-top: 15px;" />
                    </div>

                    <div class="left3stBottomItem">
                        <!-- 客群消费偏好 -->
                        <CustomerConsumptionPreferences style="margin-top: 15px;" />
                    </div>

                </div>
            </div>
            <div class="content1692stCenter">
                <NewBigTitleBox :title="'月度经营情况'" />

                <div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
                    <!-- 经营数据同比分析  -->
                    <BusinessCase :currentService="currentService" />
                </div>
                <!-- <modalTitle :title="'应收账款'" /> -->
                <!-- <div class="left4stContent"> -->
                <!-- 收款完成进度 -->
                <!-- <PaymentProgress /> -->

                <!-- 应收总额完成度 -->
                <!-- <TotalAccountsReceivable style="margin-top: 33px;" /> -->

                <!-- 收款预警 -->
                <!-- <AccountsReceivableWarning style="margin-top: 44px;" /> -->
                <!-- </div> -->
            </div>
            <div class="content1692stRight">
                <NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
                <div class="rightContentBox">
                    <!-- 区域营收占比 -->
                    <RegionalRevenue :currentService="currentService" style="margin-top: 20px;" />

                    <!-- 多业态收入 -->
                    <!-- <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> -->

                    <!-- 业态结构占比 -->
                    <BusinessStructure :currentService="currentService" style="margin-top: 22px;" />
                </div>

                <NewBigTitleBox :title="'节假日营收分析'" style="margin-top: 34px;">
                    <template #extra>
                        <div class="FestivalBox">
                            <el-select class="festivalSelect" v-model="FestivalValue" placeholder="Select"
                                style="width: 72px;">
                                <el-option v-for="item in FestivalOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>
                    </template>
                </NewBigTitleBox>
                <!-- 节假日营收分析 -->
                <FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" />





                <!-- 电商模块 -->
                <!-- <modalTitle :title="'电商模块'" style="margin-top: 20px;" /> -->

                <!-- <div class="left5stContent"> -->
                <!-- <div class="left5stCenter"> -->
                <!-- 线上线下销售额对比 -->
                <!-- <SalesComparison /> -->
                <!-- 退货率 -->
                <!-- <ReturnRate /> -->
                <!-- </div> -->
                <!-- 热门商品榜单 -->
                <!-- <HotProductList style="margin-top: 30px;" :pageType="pageType" /> -->

                <!-- 服务区繁忙排行  交易排行 -->
                <!-- <BusyTradingRanking style="margin-top: 24px;" /> -->
                <!-- </div> -->
            </div>
        </div>

        <!-- 分区三 -->
        <div class="content1693st" v-if="selectPageTab === 99">
            <div class="content1693stItem">
                <!-- 消息轮播框 -->
                <NoticeListBox />
                <modalTitle :title="'供应商'" style="margin-top: 20px;" />
                <SupplierListBox />

                <!-- 品牌 -->
                <modalTitle :title="'品牌'" style="margin-top: 20px;" />
                <!-- 品牌列表 -->
                <BrandListtBox />
            </div>

            <div class="content1693stItem" style="padding-top: 46px;">
                <!-- 商户生态结构图谱 -->
                <modalTitle :title="'商户生态结构图谱'" />

                <div class="content1693stItem2stContent">
                    <!-- 商户类别 -->
                    <MerchantCategory />

                    <!-- 扣分类型趋势 -->
                    <DeductionType style="margin-top: 30px;" />

                    <!-- 商户评分排行榜 -->
                    <MerchantRatingRanking style="margin-top: 16px;" />

                    <!-- 优质商户 -->
                    <HighQualityMerchants style="margin-top: 20px;" />
                </div>
            </div>

            <div class="content1693stItem" style="padding-top: 46px;">
                <!-- 员工福利与商城数据 -->
                <modalTitle :title="'员工福利与商城数据'" />
                <div class="content1693stItem2stContent">
                    <!-- 本月福利金发送额度 -->
                    <ThisMonthBenefits />

                    <!-- 核心品类占比 -->
                    <CoreCategory style="margin-top: 20px;" />

                    <!-- 热门商品榜单 -->
                    <HotProductList style="margin-top: 30px;" :pageType="'left'" />
                </div>
            </div>

            <div class="content1693stItem">

            </div>
        </div>

        <!-- 分区四 -->
        <div class="content1694st" v-if="selectPageTab === 4">
            <div class="content1694stItem">
                <!-- 消息轮播框 -->
                <NoticeListBox style="margin-top: 20px;" />

                <NewBigTitleBox :title="'管理运营监控'" style="margin-top: 29px;" />

                <div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
                    <!-- 日常巡检(蓝湖的设备完好率) -->
                    <DailyInspection />

                    <!-- 考核打分排行榜 -->
                    <AssessmentScoringRanking style="margin-top: 19px;" />

                    <!-- 热门商品榜单 -->
                    <HotProductList style="margin-top: 20px;" :pageType="'left'" />
                </div>

                <!-- 客群特征分析 -->
                <!-- <CustomerGroup /> -->

                <!-- 客群消费偏好 -->
                <!-- <CustomerConsumptionPreferences style="margin-top: 140px;" /> -->

                <!-- 车型停留分析/日均 -->
                <!-- <VehicleStayAnalysis style="margin-top: 130px;" /> -->
            </div>


            <div class="content1694stItem">
                <NewBigTitleBox :title="'品牌'" style="margin-top: 74px;" />

                <!-- 商户类别比例图 和 下面的列表  -->
                <BrandDetail />
            </div>

            <div class="content1694stItem">
                <NewBigTitleBox :title="'供应商'" style="margin-top: 74px;" />
                <SupplierListBox />
                <!-- 在线服务区和在线收银机 -->
                <!-- <TodayTrend /> -->

                <!-- 交易预警 -->
                <!-- <TradingAlert /> -->

                <!-- 考核打分排行榜 -->
                <!-- <AssessmentScoring style="margin-top: 130px;" /> -->
            </div>
            <div class="content1694stItem">
                <!-- 时间天气等内容 -->
                <BasicMessageBox style="margin-top: 19px;" />

                <NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />

                <!-- 商城订单统计 -->
                <MallOrderStatistics style="margin-top: 20px;" />

                <NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />

                <!-- 本月福利金发送额度 -->
                <ThisMonthBenefits style="margin-top: 10px;" />

                <!-- 核心品类占比 -->
                <CoreCategory style="margin-top: 10px;" />

                <NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />

                <!-- 商户评分排行榜 -->
                <MerchantRatingRanking style="margin-top: 16px;" />
            </div>
        </div>




        <template v-if="false">
            <!-- 最初版隐藏 -->
            <div class="content" v-if="pageType === 'center'">
                <div class="left">
                    <div class="leftBox">
                        <div class="topLeft">
                            <modalTitle :title="'流量趋势'" />
                            <div class="topLeftContent">
                                <!-- 车流断面趋势 -->
                                <TrendOfTrafficFlow :currentService="currentService" />

                                <!-- 入区车辆趋势 -->
                                <VehiclesEntering style="margin-top: 24px;" />

                                <!-- 客流变化 -->
                                <PassengerFlowChanges style="margin-top: 24px;" />
                            </div>
                        </div>

                        <div class="topRight">
                            <modalTitle :title="'经营业态月度情况'" />
                            <div class="topRightContent">
                                <!-- 多业态收入
                            <MultiIndustryIncome /> -->

                                <!-- 区域营收占比 -->
                                <RegionalRevenue />

                                <!-- 业态结构占比 -->
                                <BusinessStructure style="margin-top: 30px;" />
                            </div>
                        </div>
                    </div>

                    <div class="leftBottom">
                        <modalTitle :title="'客群画像分析'" />

                        <div class="leftBottomContent">
                            <!-- 年龄 -->
                            <CustomerAgeGroup style="margin-top: 20px;" />

                            <!-- 性别 -->
                            <GenderCustomerGroup style="margin-left: 20px;margin-top: 20px;" />

                            <!-- 停留时长 -->
                            <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" />

                            <!-- 偏好类型 -->
                            <PreferenceType style="margin-left: 20px;margin-top: 20px;" />
                        </div>
                    </div>
                </div>

                <div class="centerBox">
                    <!-- 核心经营数据 -->
                    <CoreBusinessData style="position: relative;z-index: 9;" />

                    <!-- 地图 -->
                    <PageMap @handleGetCurrentService="handleGetCurrentService" />

                    <!-- 公告主题 -->
                    <AnnouncementTopic style="position: relative;z-index: 9;" />
                </div>

                <div class="rightBox">
                    <div class="rightLeft">
                        <modalTitle :title="'电商模块'" />

                        <!-- 商城订单统计 -->
                        <MallOrderStatistics style="margin-top: 20px;" />

                        <div class="rightLeftCenter">
                            <!-- 线上线下销售额对比 -->
                            <SalesComparison />

                            <!-- 退货率 -->
                            <ReturnRate />
                        </div>

                        <!-- 热门商品榜单 -->
                        <HotProductList style="margin-top: 30px;" />

                    </div>
                    <div class="rightright">
                        <modalTitle :title="'管理运营监控'" />

                        <!-- 今日走势图 -->
                        <TodayTrend />

                        <!-- 交易预警 -->
                        <TradingAlert />

                        <!-- 服务私乘 -->
                        <PrivateRideService />
                    </div>

                </div>
            </div>

            <div class="leftContent" v-if="pageType === 'left'">
                <div class="left1st">
                    <modalTitle :title="'流量趋势'" />

                    <div class="left1stTop">
                        <!-- 车流断面趋势 -->
                        <TrendOfTrafficFlow />

                        <!-- 入区车辆趋势 -->
                        <VehiclesEntering style="margin-top: 24px;" />

                        <!-- 客流变化 -->
                        <PassengerFlowChanges style="margin-top: 24px;" />
                    </div>

                    <modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
                        <template #extra>
                            <div class="FestivalBox">
                                <el-select class="festivalSelect" v-model="FestivalValue" placeholder="Select"
                                    style="width: 72px;">
                                    <el-option v-for="item in FestivalOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </div>
                        </template>
                    </modalTitle>

                    <FestivalRevenue />
                </div>

                <div class="left2st">
                    <modalTitle :title="'经营业态月度情况'" />

                    <div class="left2stContent">
                        <!-- 多业态收入 -->
                        <MultiIndustryIncome />

                        <!-- 业态结构占比 -->
                        <BusinessStructure style="margin-top: 20px;" />

                        <!-- 区域营收占比 -->
                        <RegionalRevenue style="margin-top: 58px;" />
                    </div>
                </div>

                <div class="left3st">
                    <modalTitle :title="'客群画像分析'" />

                    <div class="left3stTop">
                        <!-- 年龄 -->
                        <CustomerAgeGroup />

                        <!-- 性别 -->
                        <GenderCustomerGroup style="margin-left: 20px;" />

                        <!-- 消费能力 -->
                        <CustomerGroupStay style="margin-left: 20px;" />

                        <!-- 偏好类型 -->
                        <PreferenceType style="margin-left: 20px;" />
                    </div>

                    <div class="left3stBottom">
                        <div class="left3stBottomItem">
                            <!-- 消费转化率对比图 -->
                            <ConsumptionConversion />
                        </div>

                        <div class="left3stBottomItem">
                            <!-- 消费水平 -->
                            <ConsumptionLevel />
                        </div>

                        <div class="left3stBottomItem">
                            <!-- 品牌消费水平 -->
                            <BrandConsumptionLevel />
                        </div>

                        <div class="left3stBottomItem">
                            <!-- 消费时段分析 -->
                            <ConsumptionPeriod />
                        </div>

                    </div>
                </div>

                <div class="left4st">
                    <modalTitle :title="'应收账款'" />

                    <div class="left4stContent">
                        <!-- 收款完成进度 -->
                        <PaymentProgress />

                        <!-- 应收总额完成度 -->
                        <TotalAccountsReceivable style="margin-top: 33px;" />

                        <!-- 收款预警 -->
                        <AccountsReceivableWarning style="margin-top: 44px;" />
                    </div>
                </div>

                <div class="left5st">
                    <modalTitle :title="'电商模块'" />
                    <!-- 商城订单统计 -->
                    <MallOrderStatistics style="margin-top: 20px;" />

                    <div class="left5stContent">
                        <div class="left5stCenter">
                            <!-- 线上线下销售额对比 -->
                            <SalesComparison />
                            <!-- 退货率 -->
                            <ReturnRate />
                        </div>

                        <!-- 热门商品榜单 -->
                        <HotProductList style="margin-top: 30px;" :pageType="pageType" />

                        <!-- 服务区繁忙排行  交易排行 -->
                        <BusyTradingRanking style="margin-top: 24px;" />
                    </div>
                </div>

                <div class="left6st">
                    <modalTitle :title="'管理运营监控'" />

                    <!-- 今日走势图 -->
                    <TodayTrend />

                    <!-- 交易预警 -->
                    <TradingAlert />

                    <!-- 服务私乘 -->
                    <PrivateRideService />
                </div>
            </div>
        </template>

    </div>
</template>
