2048 lines
55 KiB
Vue
2048 lines
55 KiB
Vue
<template>
|
||
<view class="statistics-container">
|
||
<view class="top—1"></view>
|
||
<!-- 顶部导航栏 -->
|
||
<view class="nav-bar">
|
||
<uni-icons class="back-icon" @click="goBack" size="24" type="left" color="#fff"></uni-icons>
|
||
<view class="title-tabs">
|
||
<text >
|
||
业务管理
|
||
</text>
|
||
</view>
|
||
<view class="filter-btn" ></view>
|
||
</view>
|
||
|
||
<!-- 工单统计 -->
|
||
<view >
|
||
<view class="dil" >
|
||
<!-- 四个选项 -->
|
||
<!-- #ifdef APP-PLUS || H5 -->
|
||
<view class="tab-choose-class">
|
||
<view class="tab-content" @click="tabChoose(item, index)"
|
||
v-for='(item, index) in ["当日", "当月","当年", "全部", "自定义"]' :key='index'>
|
||
<!-- tab 名称信息 -->
|
||
<view class='tab-name-class'
|
||
:style='{ color: index + 1 == tabValue ? "#101A3E" : "#8D90A6", fontWeight: index + 1 == tabValue ? "bold" : "normal" }'>
|
||
{{ item }}
|
||
<view class="icon-tab" v-if='index == 4'>
|
||
<image src="@/static/icons/homeOrderCard/xialajiantou.svg" mode="scaleToFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 名称下 icon -->
|
||
<view class="tab-icon"
|
||
:style='{ background: index + 1 == tabValue ? "linear-gradient( 180deg, #054DF3 0%, #55A3FF 100%)" : "" }'>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="example-body" v-show="tabValue==5" style="margin-bottom: 16rpx;">
|
||
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
|
||
</view>
|
||
<!-- 快捷统计卡 -->
|
||
<view class="four-box">
|
||
<view class="boxf" @click="goToOrder('null')">
|
||
<view class="zi1">
|
||
<image class="zi1-icon" src="@/static/icons/homeOrderCard/receivedOrder_new.png" mode="aspectFit" />
|
||
<text>已接单</text>
|
||
</view>
|
||
<view class="zi2" style="margin-top: 10rpx;">{{countNum.yjdNum ? countNum.yjdNum : '0'}}</view>
|
||
</view>
|
||
<view class="boxf" @click="goToOrder(1)">
|
||
<view class="zi1">
|
||
<image class="zi1-icon" src="@/static/icons/homeOrderCard/jyz_new.png" mode="aspectFit" />
|
||
<text>救援中</text>
|
||
</view>
|
||
<view class="zi2" style="margin-top: 10rpx;">{{countNum.jyzNum ? countNum.jyzNum : '0'}}</view>
|
||
</view>
|
||
<view class="boxf" @click="goToOrder(5)">
|
||
<view class="zi1">
|
||
<image class="zi1-icon" src="@/static/icons/homeOrderCard/ywc_new.png" mode="aspectFit" />
|
||
<text>已完成</text>
|
||
</view>
|
||
<view class="zi2" style="margin-top: 10rpx;">{{countNum.ywcNum ? countNum.ywcNum : '0'}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 金额/待取车卡 -->
|
||
<view class="two-box-container">
|
||
<view class="two-box">
|
||
<view class="boxf2" style="background: linear-gradient(135deg, #E0F0FF 40%, #BBD9FF 100%);">
|
||
<view style="display: flex; justify-content: space-between; align-items: center;">
|
||
<view class="zi1_1">
|
||
<image class="zi1_1-icon" src="@/static/icons/homeOrderCard/ysk_solid.png" mode="aspectFit" />
|
||
<text style="color: #3d6ba0; font-weight: bold; font-size: 30rpx;">应收款</text>
|
||
</view>
|
||
<uni-icons class="eye-icon" type="eye" />
|
||
</view>
|
||
<view class="zi2_2" style="margin-top: 10rpx;">{{ countNum.yingskNum ? countNum.yingskNum : '0' }}</view>
|
||
</view>
|
||
<view class="boxf2" style="background: linear-gradient(135deg, #FFF7E0 40%, #FFE7B8 100%);" @click="goToOrder(3)">
|
||
<view style="display: flex; justify-content: space-between; align-items: center;">
|
||
<view class="zi1_1">
|
||
<image class="zi1_1-icon" src="@/static/icons/homeOrderCard/qucar.png" mode="aspectFit" />
|
||
<text style="color: #a97747; font-size: 30rpx; font-weight: bold;">待取车</text>
|
||
</view>
|
||
<uni-icons class="eye-icon" type="eye" />
|
||
</view>
|
||
<view class="zi2_2" style="margin-top: 10rpx;">{{ countNum.dqcNum ? countNum.dqcNum : '0' }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="two-box">
|
||
<view class="boxf2" style="background: linear-gradient(135deg, #E6F8ED 40%, #C8F0D8 100%);">
|
||
<view style="display: flex; justify-content: space-between; align-items: center;">
|
||
<view class="zi1_1">
|
||
<image class="zi1_1-icon" src="@/static/icons/homeOrderCard/yisk_solid.png" mode="aspectFit" />
|
||
<text style="color: #169948; font-size: 30rpx; font-weight: bold;">已收款</text>
|
||
</view>
|
||
<uni-icons class="eye-icon" type="eye" />
|
||
</view>
|
||
<view class="zi2_2" style="margin-top: 10rpx;">{{ countNum.yiskNum ? countNum.yiskNum : '0' }}</view>
|
||
</view>
|
||
<view class="boxf2" style="background: linear-gradient(135deg, #F0E9FF 40%, #D9CEFF 100%);">
|
||
<view style="display: flex; justify-content: space-between; align-items: center;">
|
||
<view class="zi1_1">
|
||
<image class="zi1_1-icon" src="@/static/icons/homeOrderCard/dsk_solid.png" mode="aspectFit" />
|
||
<text style="color: #6657da; font-weight: bold; font-size: 30rpx;">待收款</text>
|
||
</view>
|
||
<uni-icons class="eye-icon" type="eye" />
|
||
</view>
|
||
<view class="zi2_2" style="margin-top: 10rpx;">{{ countNum.dskNum ? countNum.dskNum : '0' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
|
||
|
||
<!-- ===== 业务渠道统计 标题栏 ===== -->
|
||
<view class="bc-bar">
|
||
<view class="blue-line"></view>
|
||
<text class="bc-title">业务渠道统计</text>
|
||
<!-- 右侧时间 Tab 改成循环 -->
|
||
<view class="bc-time-tabs">
|
||
<text
|
||
v-for="(t,i) in ['本日','本月','本年','全部','自定义']"
|
||
:key="i"
|
||
:class="['bc-time-item', cTab===i ? 'active' : '']"
|
||
@click.stop="switchCTab(i)"
|
||
>
|
||
{{ t }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- 仅当点了「自定义」才出现 -->
|
||
<uni-datetime-picker
|
||
class="full-width-picker"
|
||
v-if="cTab===4"
|
||
v-model="customRange"
|
||
type="daterange"
|
||
rangeSeparator="至"
|
||
@change="onCustomRangeChange"
|
||
/>
|
||
|
||
|
||
<view v-for="stat in channelStats" :key="stat.channel" class="channel-card" @click="goSource(stat)">
|
||
<view class="c-header">
|
||
<text class="c-name">{{ stat.channel }}</text>
|
||
<view class="pk-btn" @click="toChannelPk(stat.channelId)">PK 去对比</view>
|
||
</view>
|
||
<view class="c-row four">
|
||
<view class="c-cell"><text class="c-num">{{ stat.yjdNum }}</text><text class="c-lab">已接单</text></view>
|
||
<view class="c-cell"><text class="c-num">{{ stat.jyzNum }}</text><text class="c-lab">救援中</text></view>
|
||
<view class="c-cell"><text class="c-num">{{ stat.ywcNum }}</text><text class="c-lab">已完成</text></view>
|
||
<view class="c-cell wait-car"><text class="c-num">{{ stat.dqcNum }}</text><text class="c-lab">待取车</text></view>
|
||
</view>
|
||
<view class="c-row three">
|
||
<view class="c-cell"><text class="c-num">{{ stat.receivable }}</text><text class="c-lab">应收款</text></view>
|
||
<view class="c-cell"><text class="c-num">{{ stat.receivedMoney }}</text><text class="c-lab">已收款</text></view>
|
||
<view class="c-cell"><text class="c-num">{{ stat.dskNum }}</text><text class="c-lab">待收款</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- ===== 渠道卡 1：泸渝高速 ===== -->
|
||
<!-- <view class="channel-card">
|
||
<view class="c-header">
|
||
<text class="c-name">泸渝高速</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view> -->
|
||
|
||
<!-- 第一行 4 格 -->
|
||
<!-- <view class="c-row four">
|
||
<view class="c-cell">
|
||
<text class="c-num">0</text><text class="c-lab">已接单</text>
|
||
</view>
|
||
<view class="c-cell">
|
||
<text class="c-num">0</text><text class="c-lab">救援中</text>
|
||
</view>
|
||
<view class="c-cell">
|
||
<text class="c-num">0</text><text class="c-lab">已完成</text>
|
||
</view> -->
|
||
<!-- 待取车：浅灰描边 + 倾斜数字示例 -->
|
||
<!-- <view class="c-cell wait-car">
|
||
<text class="c-num">0</text><text class="c-lab">待取车</text>
|
||
</view>
|
||
</view> -->
|
||
<!-- 第二行 3 格 -->
|
||
<!-- <view class="c-row three">
|
||
<view class="c-cell">
|
||
<text class="c-num">0</text><text class="c-lab">应收款</text>
|
||
</view>
|
||
<view class="c-cell">
|
||
<text class="c-num">0</text><text class="c-lab">已收款</text>
|
||
</view>
|
||
<view class="c-cell">
|
||
<text class="c-num">0</text><text class="c-lab">待收款</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- ===== 再复制一份改名即可：泸贵高速 / 交警二大队 … ===== -->
|
||
|
||
|
||
<!-- ===== 业务管理统计 标题栏 ===== -->
|
||
<view class="bm-bar">
|
||
<view class="blue-line"></view>
|
||
<text class="bm-title">业务管理统计</text>
|
||
<!-- 放在业务管理统计标题栏右侧 -->
|
||
<view class="bm-time-tabs">
|
||
<text v-for="(t,i) in ['本日','本月','本年','全部','自定义']"
|
||
:key="i"
|
||
:class="['bm-time-item', bmTimeTab===i ? 'active' : '']"
|
||
@click.stop="changeBmTime(i)">
|
||
{{ t }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- ☆ 只有点“自定义”才出现，放在 bm-bar 下面一行 ☆ -->
|
||
<uni-datetime-picker
|
||
v-if="bmTimeTab===4"
|
||
class="full-width-picker"
|
||
v-model="bmRange"
|
||
type="daterange"
|
||
rangeSeparator="至"
|
||
@change="changeBmTime(4,true)"
|
||
/>
|
||
|
||
|
||
<!-- ===== 业务管理卡：统一 v-for 渲染 ===== -->
|
||
<view v-for="cat in bmCategories" :key="cat" class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">{{ bmTitleMap[cat] || cat }}</text>
|
||
<view class="pk-btn" @click="toPk(cat)">PK 去对比</view>
|
||
</view>
|
||
|
||
<view class="m-grid">
|
||
<view class="m-item" v-for="item in bmStats[cat]" :key="item.name">
|
||
<text class="m-key">{{ item.name }}</text>
|
||
<text class="m-val">{{ item.count }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- ===== 统计卡 1：救援类型统计 ===== -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">救援类型统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view> -->
|
||
|
||
<!-- 数据区域：任意偶数个条目均可，自动两列排版 -->
|
||
<!-- <view class="m-grid">
|
||
<view class="m-item">
|
||
<text class="m-key">道路救援</text>
|
||
<text class="m-val">46</text>
|
||
</view>
|
||
<view class="m-item">
|
||
<text class="m-key">事故救援</text>
|
||
<text class="m-val">29</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- ===== 统计卡 2：故障地点统计（示例 4 项） ===== -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">故障地点统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
|
||
<view class="m-grid">
|
||
<view class="m-item"><text class="m-key">新旧转换区</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">莱芜区</text><text class="m-val">29</text></view>
|
||
<view class="m-item"><text class="m-key">历城区</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">章丘区</text><text class="m-val">29</text></view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 车辆类型统计 -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">车辆类型统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
<view class="m-grid">
|
||
<view class="m-item"><text class="m-key">小型车</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">中型车</text><text class="m-val">29</text></view>
|
||
<view class="m-item"><text class="m-key">大型车</text><text class="m-val">46</text></view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 车辆品牌统计 -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">车辆品牌统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
<view class="m-grid">
|
||
<view class="m-item"><text class="m-key">奔驰</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">沃尔玛</text><text class="m-val">29</text></view>
|
||
<view class="m-item"><text class="m-key">大众</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">宝马</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">五菱宏光</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">小米汽车</text><text class="m-val">29</text></view>
|
||
<view class="m-item"><text class="m-key">凯迪拉克</text><text class="m-val">46</text></view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 下车地统计 -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">下车地统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
<view class="m-grid">
|
||
<view class="m-item"><text class="m-key">新旧转换区</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">莱芜区</text><text class="m-val">29</text></view>
|
||
<view class="m-item"><text class="m-key">历城区</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">章丘区</text><text class="m-val">29</text></view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 移交易由统计 -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">移交易由统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
<view class="m-grid">
|
||
<view class="m-item"><text class="m-key">请假</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">技术问题</text><text class="m-val">29</text></view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 是否新能源统计 -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">是否新能源统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
<view class="m-grid">
|
||
<view class="m-item"><text class="m-key">新能源统计</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">非新能源统计</text><text class="m-val">29</text></view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 救援需求统计 -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">救援需求统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
<view class="m-grid">
|
||
<view class="m-item"><text class="m-key">轮胎问题</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">汽车故障</text><text class="m-val">29</text></view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 收费类型统计 -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">收费类型统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
<view class="m-grid">
|
||
<view class="m-item"><text class="m-key">线上支付</text><text class="m-val">46</text></view>
|
||
<view class="m-item"><text class="m-key">线下支付</text><text class="m-val">29</text></view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 是否扣车统计 -->
|
||
<!-- <view class="manage-card">
|
||
<view class="m-header">
|
||
<text class="m-title">是否扣车统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
<view class="m-grid">
|
||
<view class="m-item">
|
||
<text class="m-key">待取车数量</text>
|
||
<text class="m-val">46</text>
|
||
</view>
|
||
<view class="m-item">
|
||
<text class="m-key">车辆信息</text>
|
||
<text class="m-val">29</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
|
||
|
||
|
||
|
||
<!-- =========== 财务统计 BEGIN =========== -->
|
||
<!-- ========= 财务统计 ========= -->
|
||
<view class="sec-bar">
|
||
<view class="blue-line"></view>
|
||
<text class="sec-title">财务统计</text>
|
||
|
||
<!-- 时间切换 -->
|
||
<view class="sec-time-tabs">
|
||
<text v-for="(t,i) in ['本日','本月','本年','全部','自定义']"
|
||
:key="i"
|
||
:class="['sec-time-item', financeTimeTab===i ? 'active' : '']"
|
||
@click.stop="changeFinanceTime(i)"
|
||
>
|
||
{{ t }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- 只有点了『自定义』才出现 -->
|
||
<uni-datetime-picker
|
||
v-if="financeTimeTab===4"
|
||
class="full-width-picker"
|
||
v-model="financeRange"
|
||
type="daterange"
|
||
rangeSeparator="至"
|
||
@change="changeFinanceTime(4,true)"
|
||
/>
|
||
|
||
|
||
<view class="list-wrap">
|
||
<!-- ===== 应收款统计 ===== -->
|
||
<view class="uni-card">
|
||
<view class="card-hd">
|
||
<text class="card-title">应收款统计</text>
|
||
<button class="pk-btn">PK 去对比</button>
|
||
</view>
|
||
|
||
<view class="row-g">
|
||
<view class="row"><text class="lbl">金额</text><text class="val">1414.70</text><text class="lbl">数量</text><text class="val">208</text></view>
|
||
<view class="row"><text class="lbl">相对应的渠道</text><text class="val">489</text><text class="lbl">来源</text><text class="val">512</text></view>
|
||
<view class="row"><text class="lbl">救援类型</text><text class="val">216</text><text class="lbl">故障地点</text><text class="val">390</text></view>
|
||
<view class="row"><text class="lbl">车辆品牌</text><text class="val">968</text><text class="lbl">车辆类型</text><text class="val">776</text></view>
|
||
<view class="row"><text class="lbl">是否新能源</text><text class="val">994</text><text class="lbl">救援需求</text><text class="val">468</text></view>
|
||
<view class="row"><text class="lbl">收费类型</text><text class="val">965</text><text class="lbl">待取车数量</text><text class="val">684</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ===== 已收款统计 ===== -->
|
||
<view class="uni-card">
|
||
<view class="card-hd">
|
||
<text class="card-title">已收款统计</text>
|
||
<view class="pk-btn">PK 去对比</view>
|
||
</view>
|
||
|
||
<view class="row-g">
|
||
<view class="row"><text class="lbl">金额</text><text class="val">6629.45</text><text class="lbl">数量</text><text class="val">646</text></view>
|
||
<view class="row"><text class="lbl">相对应的渠道</text><text class="val">466</text><text class="lbl">来源</text><text class="val">271</text></view>
|
||
<view class="row"><text class="lbl">救援类型</text><text class="val">268</text><text class="lbl">故障地点</text><text class="val">573</text></view>
|
||
<view class="row"><text class="lbl">车辆品牌</text><text class="val">828</text><text class="lbl">车辆类型</text><text class="val">242</text></view>
|
||
<view class="row"><text class="lbl">是否新能源</text><text class="val">240</text><text class="lbl">救援需求</text><text class="val">432</text></view>
|
||
<view class="row"><text class="lbl">收费类型</text><text class="val">752</text><text class="lbl">待取车数量</text><text class="val">627</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ===== 待收款统计 ===== -->
|
||
<view class="uni-card">
|
||
<view class="card-hd">
|
||
<text class="card-title">待收款统计</text>
|
||
<button class="pk-btn">PK 去对比</button>
|
||
</view>
|
||
|
||
<view class="row-g">
|
||
<view class="row"><text class="lbl">金额</text><text class="val">7774.92</text><text class="lbl">数量</text><text class="val">504</text></view>
|
||
<view class="row"><text class="lbl">相对应的渠道</text><text class="val">240</text><text class="lbl">来源</text><text class="val">365</text></view>
|
||
<view class="row"><text class="lbl">救援类型</text><text class="val">608</text><text class="lbl">故障地点</text><text class="val">936</text></view>
|
||
<view class="row"><text class="lbl">车辆品牌</text><text class="val">347</text><text class="lbl">车辆类型</text><text class="val">841</text></view>
|
||
<view class="row"><text class="lbl">是否新能源</text><text class="val">765</text><text class="lbl">救援需求</text><text class="val">219</text></view>
|
||
<view class="row"><text class="lbl">收费类型</text><text class="val">630</text><text class="lbl">待取车数量</text><text class="val">637</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- =========== 财务统计 END =========== -->
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import OrderCardNew from '@/components/orderCard/OrderCardNew.vue'
|
||
import request from '../../utils/request';
|
||
import CategoryList from '../../components/categoryList/CategoryList.vue';
|
||
import lzcPicker from '@/components/lzc-picker/lzc-picker.vue';
|
||
import BusinessPanel from '@/components/BusinessPanel.vue'
|
||
import {
|
||
hasRole,
|
||
hasRoleNew
|
||
} from "@/utils/auth";
|
||
|
||
export default {
|
||
name: "StatisticsInfo",
|
||
data() {
|
||
return {
|
||
financeTimeTab:0,
|
||
financeRange:[],
|
||
|
||
customRange: [], // ← 加这一行，保证是响应式数组
|
||
// ↓ 渠道 Tab 当前索引
|
||
channelTabIdx: 0,
|
||
|
||
// ↓ 你已有 — 改默认值为空数组，供模板 v-for
|
||
channelOptions: [],
|
||
// 时间 Tab（0~4 对应 本日、本月…）
|
||
cTab: 0,
|
||
timeTypeMap: ['day', 'month', 'year', 'all', 'more'],
|
||
bmTimeTab: 0, // 0 本日 1 本月 2 本年 3 全部 4 自定义
|
||
bmRange: [], // 自定义时间
|
||
bmStats: {}, // 后端返回的整个 data
|
||
bmTitleMap:{ // key ➜ 卡片标题
|
||
rescueType:'救援类型统计',
|
||
faultDistrict:'故障地点统计',
|
||
carBrand:'车辆品牌统计',
|
||
carType:'车辆类型统计',
|
||
downDestination:'下车地统计',
|
||
transferReason:'移交易由统计',
|
||
newEnergy:'是否新能源统计',
|
||
rescueNeeds:'救援需求统计',
|
||
feeType:'收费类型统计',
|
||
kouChe:'是否扣车统计'
|
||
},
|
||
bmCatKeys: [
|
||
'rescueType', // 救援类型统计
|
||
'faultDistrict', // 故障地点统计
|
||
'carBrand', // 车辆品牌统计
|
||
'carType', // 车辆类型统计
|
||
'downDestination', // 下车地统计
|
||
'transferReason', // 移交易由统计
|
||
'newEnergy', // 是否新能源统计
|
||
'rescueNeeds', // 救援需求统计
|
||
'feeType', // 收费类型统计
|
||
'kouChe' // 是否扣车统计
|
||
],
|
||
|
||
financeTimeTab:0, // 0~4 对应 本日…自定义
|
||
|
||
// cTab: 0, // 0:本日 1:本月 ...
|
||
channelStats: [], // 渠道统计列表
|
||
// 工单统计相关数据
|
||
tabValue: 1,
|
||
timeType: "day",
|
||
range: [],
|
||
startTimeStr: null,
|
||
endTimeStr: null,
|
||
searchText: '',
|
||
searchKeyword: null,
|
||
gindex: 1,
|
||
brandList: [],
|
||
staffList: [],
|
||
orderList: [],
|
||
total: 0,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
totalPages: 0,
|
||
activeInfoTab: 4, // 信息选项卡
|
||
initialLoading: true,
|
||
loadingMore: false,
|
||
hasMore: true,
|
||
scrollTop: 0,
|
||
totalNum: null,
|
||
|
||
// 筛选相关数据
|
||
isShowPop: false,
|
||
windowsHeight: 700,
|
||
tabTwoList: ["全部", "筛选"],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
timeType: 'day',
|
||
rescueStatus: null,
|
||
rescueType: null,
|
||
licenseNum: null,
|
||
rangeTime: [],
|
||
startTimeStr: null,
|
||
endTimeStr: null,
|
||
|
||
connectionName: null,
|
||
connectionPhone: null,
|
||
rescuePosition: null,
|
||
secondDispatchId: null,
|
||
driverId: null,
|
||
rescueDriver: null,
|
||
rescueCar: null,
|
||
driverCarNum: null,
|
||
faultType: null,
|
||
phenomenon: null,
|
||
channel: null,
|
||
channelId: null,
|
||
source: null
|
||
},
|
||
|
||
channelOptions: [],
|
||
|
||
countNum: {
|
||
jyzNum: 0,
|
||
dzfNum: 0,
|
||
dqcNum: 0,
|
||
ywcNum: 0,
|
||
zwxNum: 0,
|
||
yjdNum: 0,
|
||
yingskNum: 0,
|
||
yiskNum: 0,
|
||
dskNum: 0,
|
||
},
|
||
};
|
||
},
|
||
components: {
|
||
OrderCardNew,
|
||
CategoryList,
|
||
lzcPicker,
|
||
BusinessPanel
|
||
},
|
||
onLoad(option) {
|
||
this.gindex = option.id || 1
|
||
this.getlist()
|
||
uni.getSystemInfo({
|
||
success: function(res) {
|
||
this.windowsHeight = res.windowHeight - 100;
|
||
console.log('屏幕高度：', res.windowHeight);
|
||
}
|
||
});
|
||
|
||
this.fetchBmStats();
|
||
// 在拿到渠道列表以后立刻拉一次“本日”数据
|
||
// onLoad 中
|
||
this.loadChannelOptions()
|
||
.then(() => {
|
||
this.fetchChannelStats(); // 默认拉本日
|
||
});
|
||
|
||
},
|
||
created() {
|
||
},
|
||
onReachBottom() {
|
||
console.log('触底加载');
|
||
if (this.pageNum >= this.totalPages) {
|
||
this.hasMore = false;
|
||
} else if (!this.loadingMore) {
|
||
this.loadingMore = true;
|
||
this.pageNum++;
|
||
this.getlist();
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
watch: {
|
||
range(newval) {
|
||
if (newval && newval.length === 2) {
|
||
this.startTimeStr = newval[0];
|
||
this.endTimeStr = newval[1];
|
||
|
||
|
||
/* ★ 同步到 queryParams ★ */
|
||
this.queryParams.startTimeStr = this.startTimeStr
|
||
this.queryParams.endTimeStr = this.endTimeStr
|
||
this.queryParams.timeType = 'more'
|
||
|
||
this.pageNum = 1;
|
||
this.orderList = [];
|
||
this.hasMore = true;
|
||
this.initialLoading = true;
|
||
// this.getlist();
|
||
this.getCountNum()
|
||
}
|
||
},
|
||
'queryParams.rangeTime': {
|
||
handler(newval) {
|
||
if (newval && newval.length === 2) {
|
||
this.queryParams.startTimeStr = newval[0];
|
||
this.queryParams.endTimeStr = newval[1];
|
||
this.queryParams.timeType = 'more';
|
||
} else {
|
||
this.queryParams.startTimeStr = null;
|
||
this.queryParams.endTimeStr = null;
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
computed: {
|
||
/* 过滤掉 null 或空数组的分类，只渲染有数据的 */
|
||
bmCategories(){
|
||
if (!this.bmStats || typeof this.bmStats !== 'object') {
|
||
return [];
|
||
}
|
||
|
||
return Object.keys(this.bmStats).filter(k => {
|
||
const value = this.bmStats[k];
|
||
return Array.isArray(value) && value.length > 0;
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
/* 进入来源页 */
|
||
async goSource(stat){
|
||
const map = ['day','month','year','all','more']
|
||
const dateType = map[this.cTab]
|
||
|
||
// 共用的查询串
|
||
const baseQuery = [
|
||
`channelId=${stat.channelId}`,
|
||
`channel=${encodeURIComponent(stat.channel)}`,
|
||
`dateType=${dateType}`
|
||
].join('&')
|
||
|
||
try{
|
||
const { data:list=[] } = await request({
|
||
url:`/rescue-channel-source/sources/${stat.channelId}`,
|
||
method:'get'
|
||
})
|
||
|
||
// 没有来源 ⇒ 直接查订单
|
||
if(!list.length){
|
||
uni.navigateTo({
|
||
url:`/pages/rescue/businessManageOrder?${baseQuery}&source=`
|
||
})
|
||
}else{
|
||
// 有来源 ⇒ 去来源页
|
||
uni.navigateTo({
|
||
url:`/pages/rescue/businessManageSource?${baseQuery}`
|
||
})
|
||
}
|
||
}catch(e){
|
||
uni.showToast({ title:'获取来源失败', icon:'none' })
|
||
}
|
||
},
|
||
changeFinanceTime(i,rangePicked=false){
|
||
this.financeTimeTab = i
|
||
if(i===4 && !rangePicked) return // 自定义必须选完
|
||
const map = ['day','month','year','all','more']
|
||
const p = { timeType:map[i] }
|
||
if(i===4){ p.startTime=this.financeRange[0]; p.endTime=this.financeRange[1] }
|
||
this.fetchFinanceStats(p) // ← 你自己的接口
|
||
},
|
||
fetchFinanceStats(){
|
||
|
||
},
|
||
|
||
switchCTab(i){ // 顶部时间 Tab 点击
|
||
this.cTab = i;
|
||
// this.fetchChannelStats();
|
||
if(i!==4) this.fetchChannelStats()
|
||
},
|
||
/* 选完日期再打接口 */
|
||
onCustomRangeChange(val){
|
||
// val 形如 ['2024-01-01','2024-01-31']
|
||
if(Array.isArray(val) && val.length===2){
|
||
this.customRange = val
|
||
this.fetchChannelStats()
|
||
}
|
||
},
|
||
|
||
// ③ 真正调用 /app/rescueInfo/getRescueStatistics
|
||
async fetchChannelStats(){
|
||
const timeType = ['day','month','year','all','more'][this.cTab]
|
||
|
||
/* ---- 参数拼装 ---- */
|
||
const baseParams = { timeType }
|
||
if(timeType==='more'){
|
||
if(!this.customRange.length){
|
||
return uni.showToast({title:'请选择时间区间',icon:'none'})
|
||
}
|
||
baseParams.startTimeStr = this.customRange[0] + ' 00:00:01'
|
||
baseParams.endTimeStr = this.customRange[1] + ' 23:59:59'
|
||
}
|
||
|
||
/* ---- 并发请求各渠道 ---- */
|
||
const list = this.channelOptions.filter(c=>c.id!=='all')
|
||
const tasks = list.map(c=>{
|
||
return request({
|
||
url:'/app/rescueInfo/getRescueStatistics',
|
||
params:{ ...baseParams, channel:c.nickname }
|
||
}).then(r=>({
|
||
channel : c.nickname,
|
||
channelId : c.id,
|
||
yjdNum : r.data.yjdNum,
|
||
jyzNum : r.data.jyzNum,
|
||
ywcNum : r.data.ywcNum,
|
||
dqcNum : r.data.dqcNum,
|
||
receivable : (r.data.yingskNum/100).toFixed(1),
|
||
receivedMoney : (r.data.yiskNum/100).toFixed(1),
|
||
dskNum : (r.data.dskNum/100).toFixed(1),
|
||
}))
|
||
})
|
||
this.channelStats = await Promise.all(tasks)
|
||
},
|
||
changeBmTime(i,rangePicked=false){
|
||
this.bmTimeTab=i;
|
||
/* 自定义必须选完区间再请接口 */
|
||
if(i===4 && !rangePicked) return;
|
||
const map=['day','month','year','all','more'];
|
||
const params={timeType:map[i]};
|
||
if(i===4){params.startTime=this.bmRange[0];params.endTime=this.bmRange[1];}
|
||
this.fetchBmStats(params);
|
||
},
|
||
|
||
/* 真正请求接口 */
|
||
fetchBmStats(params={timeType:'day'}){
|
||
request({
|
||
url:'/rescueBusiness/statistics/overview',
|
||
method:'get',
|
||
params
|
||
}).then(res=>{
|
||
const raw = res.data || {};
|
||
const filled = {};
|
||
|
||
/* 给 10 个分类都补一份数据，没数据就放一条 count=0 */
|
||
this.bmCatKeys.forEach(k=>{
|
||
if(Array.isArray(raw[k]) && raw[k].length){
|
||
filled[k] = raw[k];
|
||
}else{
|
||
filled[k] = [{ name:'—', count:0 }]; // 占位
|
||
}
|
||
});
|
||
|
||
this.bmStats = filled;
|
||
});
|
||
},
|
||
|
||
// PK 跳转
|
||
toChannelPk(channelId) {
|
||
uni.navigateTo({
|
||
url: `/pages/rescue/channelPk?channelId=${channelId}`
|
||
});
|
||
},
|
||
|
||
hasRole,
|
||
hasRoleNew,
|
||
switchInfoTab(index) {
|
||
this.activeInfoTab = index;
|
||
console.log('切换到信息选项卡:', index);
|
||
},
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
Fourhammers() {
|
||
request({
|
||
url: '/app/rescueInfo/getRescueStatistics',
|
||
method: 'get',
|
||
params: {
|
||
timeType: this.timeType,
|
||
startTimeStr: this.startTimeStr,
|
||
endTimeStr: this.endTimeStr,
|
||
}
|
||
}).then((res) => {
|
||
console.log('四个', res);
|
||
this.countNum.dqcNum = res.data.dqcNum
|
||
this.countNum.dzfNum = res.data.dzfNum
|
||
this.countNum.jyzNum = res.data.jyzNum
|
||
this.countNum.ywcNum = res.data.ywcNum
|
||
this.countNum.yjdNum = res.data.yjdNum
|
||
this.countNum.yingskNum = res.data.yingskNum ? res.data.yingskNum / 100 : 0
|
||
this.countNum.yiskNum = res.data.yiskNum ? res.data.yiskNum / 100 : 0
|
||
this.countNum.dskNum = res.data.dskNum ? res.data.dskNum / 100 : 0
|
||
})
|
||
},
|
||
getRescueList(item){
|
||
return new Promise((resolve, reject) => {
|
||
this.loading = true;
|
||
let data = {
|
||
rescueStatus: 1,
|
||
pageSize: this.pageSize,
|
||
pageNum: this.pageNum,
|
||
channel: item
|
||
}
|
||
request({
|
||
url: '/app/rescueInfo/getRescueList',
|
||
method: 'get',
|
||
params: data
|
||
}).then((res) => {
|
||
console.log('首页', res);
|
||
if (res.code == 200) {
|
||
if (this.pageNum != 1) {
|
||
this.orderList = this.orderList.concat(res.rows)
|
||
} else {
|
||
this.orderList = res.rows
|
||
}
|
||
let total = res.total
|
||
this.totalPages = Math.ceil(total / this.pageSize);
|
||
}
|
||
resolve(); // 请求完成
|
||
}).catch(error => {
|
||
console.error('获取列表失败', error);
|
||
reject(error);
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
})
|
||
});
|
||
},
|
||
|
||
|
||
openFilter() {
|
||
uni.showToast({
|
||
title: "筛选功能待实现",
|
||
icon: "none",
|
||
});
|
||
},
|
||
|
||
// 选项卡选择
|
||
tabChoose(item, index) {
|
||
this.tabValue = index + 1
|
||
if (1 == this.tabValue) {
|
||
this.timeType = "day"
|
||
} else if (2 == this.tabValue) {
|
||
this.timeType = "month"
|
||
} else if (3 == this.tabValue) {
|
||
this.timeType = "year"
|
||
}else if (4 == this.tabValue) {
|
||
this.timeType = "all"
|
||
}else if (5 == this.tabValue) {
|
||
this.timeType = "more"
|
||
this.range = []
|
||
}
|
||
if (5 == this.tabValue) {
|
||
if (this.range.length > 0) {
|
||
this.startTimeStr = this.range[0]
|
||
this.endTimeStr = this.range[1]
|
||
this.Fourhammers()
|
||
}
|
||
} else {
|
||
this.Fourhammers()
|
||
}
|
||
|
||
},
|
||
|
||
|
||
maskClick(e) {
|
||
console.log('maskClick事件:', e);
|
||
},
|
||
|
||
getlist() {
|
||
console.log('queryParams', this.queryParams)
|
||
request({
|
||
url: '/app/rescueInfo/getRescueStatisticsInfoList',
|
||
method: 'get',
|
||
params: this.queryParams
|
||
}).then((res) => {
|
||
console.log('list', res);
|
||
if (res.code == 200) {
|
||
this.getCountNum()
|
||
if (this.pageNum != 1) {
|
||
const currentScrollTop = this.scrollTop;
|
||
this.orderList = this.orderList.concat(res.rows)
|
||
this.$nextTick(() => {
|
||
uni.pageScrollTo({
|
||
scrollTop: currentScrollTop,
|
||
duration: 0
|
||
});
|
||
});
|
||
} else {
|
||
this.orderList = res.rows
|
||
}
|
||
this.totalNum = res.total
|
||
let total = res.total
|
||
this.totalPages = Math.ceil(total / this.pageSize);
|
||
this.hasMore = this.pageNum < this.totalPages;
|
||
}
|
||
}).catch((error) => {
|
||
console.error('获取数据失败', error);
|
||
uni.showToast({
|
||
title: '数据加载失败',
|
||
icon: 'none'
|
||
});
|
||
}).finally(() => {
|
||
this.initialLoading = false;
|
||
this.loadingMore = false;
|
||
});
|
||
},
|
||
|
||
// 刷新列表
|
||
refreshList() {
|
||
this.pageNum = 1;
|
||
this.orderList = [];
|
||
this.hasMore = true;
|
||
this.initialLoading = true;
|
||
this.getlist();
|
||
},
|
||
getStatisticsList(data) {
|
||
let url = '';
|
||
if (this.hasRole('ddzx')) {
|
||
url = '/app/rescueInfo/statisticsAll';
|
||
} else if (this.hasRole('second_dispatcher')) {
|
||
url = '/app/rescueInfo/statisticsAllSecond';
|
||
} else {
|
||
this.driverList = [];
|
||
this.vehicleList = [];
|
||
return;
|
||
}
|
||
request({
|
||
url: url,
|
||
method: 'get',
|
||
params: data
|
||
}).then((res) => {
|
||
console.log('list', res);
|
||
if (res.code == 200) {
|
||
const processedData = res.data.map(item => {
|
||
if (item.money !== undefined && item.money !== null) {
|
||
return {
|
||
...item,
|
||
money: Math.trunc(item.money / 100),
|
||
mileage: Math.trunc(item.mileage)
|
||
};
|
||
}
|
||
return item;
|
||
});
|
||
switch (data.queryType) {
|
||
case 'driver':
|
||
this.driverList = processedData;
|
||
break;
|
||
case 'car':
|
||
this.vehicleList = processedData;
|
||
break;
|
||
case 'dispatch':
|
||
this.dispatchList = processedData;
|
||
break;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
async loadChannelOptions() {
|
||
return new Promise((resolve, reject) => {
|
||
request({
|
||
url: '/rescue-channel-source/channelList',
|
||
method: 'get',
|
||
}).then((res) => {
|
||
this.channelOptions = res.data.map(item => ({
|
||
nickname: item.name, // 显示文本
|
||
value: item.name, // 实际值
|
||
id: item.id, // ID
|
||
label: item.name // 保留原字段
|
||
}));
|
||
resolve();
|
||
}).catch(reject);
|
||
});
|
||
},
|
||
getCountNum() {
|
||
request({
|
||
url: '/app/rescueInfo/getRescueStatisticsInfoNum',
|
||
method: 'get',
|
||
params: this.queryParams
|
||
}).then((res) => {
|
||
console.log('四个', res);
|
||
this.countNum.dqcNum = res.data.dqcNum
|
||
this.countNum.dzfNum = res.data.dzfNum
|
||
this.countNum.jyzNum = res.data.jyzNum
|
||
this.countNum.ywcNum = res.data.ywcNum
|
||
this.countNum.yjdNum = res.data.yjdNum
|
||
this.countNum.zwxNum = res.data.zwxNum
|
||
this.countNum.yingskNum = res.data.yingskNum ? res.data.yingskNum / 100 : 0
|
||
this.countNum.yiskNum = res.data.yiskNum ? res.data.yiskNum / 100 : 0
|
||
this.countNum.dskNum = res.data.dskNum ? res.data.dskNum / 100 : 0
|
||
})
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
|
||
|
||
|
||
|
||
/* ========== 财务计样式 开始 ========= */
|
||
|
||
/* —— 标题栏 + 时间 Tab —— */
|
||
.sec-bar{
|
||
display:flex;align-items:center;
|
||
padding:0 20rpx;margin:24rpx 0 12rpx;
|
||
}
|
||
.sec-bar .blue-line{
|
||
width:8rpx;height:32rpx;border-radius:4rpx;
|
||
background:#054df3;margin-right:16rpx;
|
||
}
|
||
.sec-bar .sec-title{
|
||
font-size:30rpx;font-weight:600;color:#101A3E;
|
||
margin-right:auto;
|
||
}
|
||
.sec-time-tabs{display:flex;align-items:center;column-gap:28rpx;}
|
||
.sec-time-item{
|
||
position:relative;font-size:26rpx;color:#8D90A6;white-space:nowrap;
|
||
}
|
||
.sec-time-item.active{font-weight:600;color:#101A3E;}
|
||
.sec-time-item.active::after{
|
||
content:'';position:absolute;left:50%;bottom:-12rpx;transform:translateX(-50%);
|
||
width:22rpx;height:6rpx;border-radius:3rpx;
|
||
background:linear-gradient(180deg,#054df3 0%,#55a3ff 100%);
|
||
}
|
||
.sec-bar + .full-width-picker{margin:12rpx 20rpx 0;}
|
||
|
||
/* —— 统一 PK 按钮 —— */
|
||
.pk-btn{
|
||
font-size:22rpx;color:#327dfb;border:1rpx solid #327dfb;
|
||
border-radius:32rpx;padding:8rpx 32rpx;
|
||
line-height:1;white-space:nowrap;background:transparent;
|
||
}
|
||
|
||
/* —— 财务卡片外框 —— */
|
||
.uni-card{
|
||
margin:0 20rpx 24rpx;
|
||
padding:24rpx;border-radius:12rpx;
|
||
background:linear-gradient(180deg,#e4ecff 0%,#ffffff 100%);
|
||
box-shadow:0 4rpx 12rpx rgba(0,0,0,.06);
|
||
}
|
||
|
||
/* 头部：标题 + PK（按钮固定右上） */
|
||
.card-hd{
|
||
position:relative; /* 让按钮绝对定位 */
|
||
display:flex;align-items:center;
|
||
margin-bottom:24rpx;
|
||
}
|
||
.card-title{flex:none;font-size:28rpx;font-weight:600;color:#101A3E;}
|
||
.card-hd .pk-btn{
|
||
position:absolute;
|
||
right:0;
|
||
top:50%; /* 原来是 top:0; */
|
||
transform:translateY(-50%);/* 垂直居中 */
|
||
}
|
||
|
||
/* —— 数据区域 —— */
|
||
.row-g{row-gap:28rpx;}
|
||
|
||
/* 每行四列：lbl-val | lbl-val，列宽固定方便对齐 */
|
||
.row{
|
||
display:grid;
|
||
grid-template-columns:150rpx 120rpx 150rpx 120rpx;
|
||
column-gap:24rpx;
|
||
font-size:26rpx;color:#666;
|
||
}
|
||
.row .lbl{white-space:nowrap;}
|
||
.row .val{
|
||
text-align:right;font-weight:600;color:#101A3E;
|
||
transform:translateX(-10rpx); /* 整体左移一点点 */
|
||
}
|
||
|
||
/* ========== 财务计样式 结束 ========= */
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ========== 业务管理统计样式 开始 ========= */
|
||
.bm-bar{
|
||
display:flex;align-items:center;
|
||
padding:0 20rpx;
|
||
margin:24rpx 0 12rpx;
|
||
line-height:1;
|
||
}
|
||
|
||
.bm-bar .blue-line{
|
||
width:8rpx;height:32rpx;border-radius:4rpx;
|
||
background:#054df3;margin-right:16rpx;
|
||
}
|
||
|
||
.bm-bar .bm-title{
|
||
font-size:30rpx;font-weight:600;color:#101A3E;
|
||
margin-right:auto; /* 推送时间标签到最右 */
|
||
white-space:nowrap;
|
||
}
|
||
|
||
/* 时间标签容器 */
|
||
.bm-time-tabs{
|
||
display:flex;align-items:center;column-gap:28rpx;
|
||
}
|
||
|
||
/* 单个标签 */
|
||
.bm-time-item{
|
||
position:relative;
|
||
font-size:26rpx;
|
||
color:#8D90A6;
|
||
line-height:1;
|
||
white-space:nowrap; /* 禁止“本\n日”换行 */
|
||
}
|
||
|
||
.bm-time-item.active{
|
||
font-weight:bold;color:#101A3E;
|
||
}
|
||
.bm-time-item.active::after{
|
||
content:'';position:absolute;left:50%;bottom:-12rpx;
|
||
transform:translateX(-50%);
|
||
width:22rpx;height:6rpx;border-radius:3rpx;
|
||
background:linear-gradient(180deg,#054df3 0%,#55a3ff 100%);
|
||
}
|
||
|
||
/* 日期选择器与标题行的间距 */
|
||
.bm-bar + .full-width-picker{
|
||
margin:12rpx 20rpx 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* ========== 业务管理统计卡 ========= */
|
||
.manage-card{
|
||
margin-bottom:10rpx;
|
||
padding:24rpx;
|
||
border-radius:12rpx;
|
||
background:linear-gradient(180deg,#e4ecff 0%,#ffffff 100%);
|
||
box-shadow:0 4rpx 12rpx rgba(0,0,0,.06);
|
||
}
|
||
|
||
/* 头部：标题 + PK */
|
||
.m-header{display:flex;justify-content:space-between;align-items:center;}
|
||
.m-title{font-size:28rpx;font-weight:600;}
|
||
|
||
/* PK 按钮沿用之前的 pk-btn 样式，无需重复 */
|
||
|
||
/* 数据区：自动两列网格，条目多少都可 */
|
||
/* 统计卡内部表格 － 调整对齐 */
|
||
/* ===== 故障地点统计 – 列表排版优化 ===== */
|
||
|
||
/* ① 把 flex ➜ grid，一行 2 项 */
|
||
.m-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(2,1fr); /* 两列等宽 */
|
||
column-gap:20rpx; /* 左右留白 */
|
||
row-gap:12rpx; /* 行距 */
|
||
padding:18rpx 0;
|
||
}
|
||
|
||
/* ② 每项左右各占一边 */
|
||
.m-item{
|
||
display:flex;
|
||
justify-content:space-between; /* 关键：数字贴右 */
|
||
align-items:center;
|
||
}
|
||
|
||
/* ③ 左侧地点名 */
|
||
.m-key{
|
||
flex:1; /* 自动占剩余 */
|
||
font-size:26rpx;
|
||
color:#646b79;
|
||
overflow:hidden; /* 超长省略 */
|
||
text-overflow:ellipsis;
|
||
white-space:nowrap;
|
||
}
|
||
|
||
/* ④ 右侧数量 */
|
||
.m-val{
|
||
flex:none;
|
||
font-size:32rpx;
|
||
font-weight:600;
|
||
color:#101A3E;
|
||
margin-left:12rpx; /* 与文字拉开一点 */
|
||
}
|
||
/* ========== 业务管理统计样式 结束 ========= */
|
||
|
||
|
||
/* ========== 业务渠道统计样式 开始 ========== */
|
||
.bc-bar{
|
||
display:flex;align-items:center;
|
||
padding:0 20rpx; /* 左右统一内边距 */
|
||
margin:24rpx 0 12rpx; /* 与模块距离 */
|
||
line-height:1;
|
||
}
|
||
|
||
.bc-bar .blue-line{
|
||
width:8rpx;height:32rpx;border-radius:4rpx;
|
||
background:#054df3;margin-right:16rpx;
|
||
}
|
||
|
||
.bc-bar .bc-title{
|
||
font-size:30rpx;font-weight:bold;color:#101A3E;
|
||
margin-right:auto; /* 把时间标签顶到最右 */
|
||
white-space:nowrap;
|
||
}
|
||
|
||
/* 时间标签容器 */
|
||
.bc-time-tabs{
|
||
display:flex;align-items:center;column-gap:28rpx;
|
||
}
|
||
|
||
/* 单个标签 */
|
||
.bc-time-item{
|
||
position:relative;
|
||
font-size:26rpx;
|
||
color:#8D90A6;
|
||
line-height:1;
|
||
white-space:nowrap; /* 关键：禁止换行！ */
|
||
}
|
||
|
||
/* 选中态 */
|
||
.bc-time-item.active{
|
||
font-weight:bold;color:#101A3E;
|
||
}
|
||
.bc-time-item.active::after{
|
||
content:'';position:absolute;left:50%;bottom:-12rpx;
|
||
transform:translateX(-50%);
|
||
width:22rpx;height:6rpx;border-radius:3rpx;
|
||
background:linear-gradient(180deg,#054df3 0%,#55a3ff 100%);
|
||
}
|
||
|
||
/* 如果你用的是 uni-datetime-picker 且仅在自定义时出现 */
|
||
.bc-bar + .full-width-picker{
|
||
margin:12rpx 20rpx 0;
|
||
}
|
||
|
||
|
||
/* 渠道卡：保留你原有风格，仅做轻微统一间距 */
|
||
.channel-card{
|
||
margin:16rpx 20rpx 24rpx;
|
||
padding:24rpx;border-radius:12rpx;
|
||
background:linear-gradient(180deg,#d9e6ff 0%,#ffffff 100%);
|
||
box-shadow:0 4rpx 12rpx rgba(0,0,0,.06);
|
||
}
|
||
|
||
/* 顶部：渠道名 + PK */
|
||
.c-header{display:flex;justify-content:space-between;align-items:center;}
|
||
.c-name{font-size:28rpx;font-weight:600;}
|
||
.pk-btn{
|
||
font-size:22rpx;color:#327dfb;border:1rpx solid #327dfb;
|
||
border-radius:20rpx;padding:4rpx 20rpx;
|
||
}
|
||
|
||
/* 行容器：与原来一致 */
|
||
.c-row{display:grid;row-gap:24rpx;margin-top:24rpx;}
|
||
.c-row.four{grid-template-columns:repeat(4,1fr);}
|
||
.c-row.three{grid-template-columns:repeat(3,1fr);}
|
||
.c-cell{text-align:center;}
|
||
.c-num{font-size:30rpx;font-weight:600;color:#101a3e;}
|
||
.c-lab{display:block;margin-top:6rpx;font-size:22rpx;color:#666;}
|
||
|
||
/* ========== 业务渠道统计样式 结束 ========== */
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.dil {
|
||
// background-color: #F7F8FC;
|
||
background-color: #f3f5fc;
|
||
box-sizing: border-box;
|
||
padding: 0 30rpx;
|
||
}
|
||
.four-box-header {
|
||
display: flex;
|
||
justify-content: start;
|
||
align-items: center;
|
||
padding: 20rpx 0 10rpx 0;
|
||
}
|
||
.blue-line {
|
||
width: 8rpx;
|
||
height: 32rpx;
|
||
background: #054DF3;
|
||
border-radius: 4rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.four-box-header-title {
|
||
font-weight: bold;
|
||
}
|
||
.tab-choose-class {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 4rpx 20rpx 16rpx 20rpx;
|
||
border-top: 1rpx solid #F5F5F5;
|
||
|
||
.tab-content {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.tab-name-class {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-icon {
|
||
width: 66rpx;
|
||
height: 8rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
.four-box {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 24rpx;
|
||
// margin-top: 15px;
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.boxf {
|
||
height: 130rpx;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
// background-image: url('~@/static/images/homeOrderCard/dzf.png');
|
||
// background: rgba(218, 218, 218, 0.2);
|
||
background-color: #fdfeff;
|
||
background-size: cover;
|
||
background-position: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
// 边框
|
||
border: 1px solid #badeff;
|
||
// 阴影
|
||
box-shadow: inset 0 2px 8px rgba(186, 222, 255, 0.3);
|
||
}
|
||
.zi1 {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
display: flex;
|
||
align-items: center;
|
||
column-gap: 10rpx;
|
||
|
||
.zi1-icon {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
.zi2 {
|
||
width: 100%;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
.two-box-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
width: 100%;
|
||
}
|
||
.two-box {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18rpx;
|
||
width: 100%;
|
||
}
|
||
.boxf2 {
|
||
height: 120rpx;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
border-radius: 6px;
|
||
padding: 2px 12px 2px 12px;
|
||
background: rgba(218, 218, 218, 0.2);
|
||
background-size: cover;
|
||
background-position: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.zi1_1 {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
display: flex;
|
||
align-items: center;
|
||
column-gap: 10rpx;
|
||
|
||
.zi1_1-icon {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
.zi2_2 {
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
/* 三列自动换行专用 */
|
||
.tab-choose-multi {
|
||
display: flex;
|
||
flex-wrap: wrap; // 允许换行
|
||
}
|
||
/* 每个选项占 1/3 宽度 */
|
||
.tab-choose-multi .tab-content {
|
||
flex: 0 0 33.333%;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
margin-bottom: 12rpx; // 行间距，可按需调整
|
||
}
|
||
/* 三列对齐 + 文字居中专用 */
|
||
.tab-choose-equal {
|
||
/* 用网格替代 flex，列宽完全一致 */
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr); // 3 列等宽
|
||
row-gap: 5rpx; // 行间距，可按需调整
|
||
column-gap: 0; // 列间距，如需分隔可自行设置
|
||
}
|
||
/* 每个格子内部再居中一下文字 */
|
||
.tab-choose-equal .tab-content {
|
||
display: flex; // 保留原来的竖直布局
|
||
flex-direction: column;
|
||
align-items: center; // 水平居中
|
||
justify-content: center; // 垂直居中（可选）
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* 原有样式保持不变，只添加弹窗相关样式 */
|
||
.popup-content {
|
||
padding: 20rpx 20rpx 20rpx 20rpx;
|
||
overflow-y: scroll;
|
||
background: white;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.popup-header {
|
||
font-size: 32rpx;
|
||
color: #101A3E;
|
||
margin-bottom: 40rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.popup-body {
|
||
font-size: 28rpx;
|
||
color: #101A3E;
|
||
}
|
||
|
||
.filter-section {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.filter-section text {
|
||
display: block;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.popup-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 60rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.popup-footer button {
|
||
padding: 10rpx 20rpx;
|
||
margin: 0 10rpx;
|
||
border-radius: 5px;
|
||
background-color: #327DFB;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
|
||
/* 搜索和时间筛选区域 */
|
||
/* .search-filter-area {
|
||
width: 100%;
|
||
background: #fff;
|
||
margin: 0 20rpx;
|
||
border-radius: 16rpx;
|
||
padding: 6rpx 0 10rpx 0;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
} */
|
||
|
||
.tab-icon {
|
||
width: 66rpx;
|
||
height: 8rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.statistics-container {
|
||
background: #f6f8fc;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.top—1 {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background: #3a8dff;
|
||
}
|
||
|
||
/* 顶部导航 */
|
||
.nav-bar {
|
||
position:relative; // 关键①：让子元素能绝对定位
|
||
display: flex;
|
||
align-items: center;
|
||
background: linear-gradient(180deg, #3a8dff, #579dff);
|
||
color: #fff;
|
||
padding: 10px 16px;
|
||
height: 100rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
/* ① 给箭头固定宽度 */
|
||
.nav-bar uni-icons {
|
||
flex:0 0 60rpx; // 60rpx 左右自己调，够摆下箭头就行
|
||
}
|
||
/* 左侧返回箭头占 60rpx */
|
||
.back-icon { width:60rpx; flex-shrink:0; }
|
||
|
||
.title-tabs {
|
||
position:absolute; /* 关键 */
|
||
left:50%;
|
||
top:0;
|
||
transform:translateX(-50%); /* 真正水平居中 */
|
||
height:100%;
|
||
display:flex;
|
||
align-items:center;
|
||
}
|
||
|
||
.tab-item {
|
||
padding:0 24rpx;
|
||
font-size:15px;
|
||
line-height:100rpx;
|
||
white-space:nowrap; /* 不允许自动换行 */
|
||
flex:none; /* 别再撑满父元素 */
|
||
}
|
||
|
||
.tab-item.active {
|
||
font-weight: bold;
|
||
border-bottom: 3px solid #fff;
|
||
opacity: 1;
|
||
}
|
||
|
||
.filter-btn {
|
||
width:60rpx; flex-shrink:0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 统计卡片 */
|
||
/* .stat-cards {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin: 14rpx 0;
|
||
} */
|
||
|
||
.stat-card {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 4rpx;
|
||
flex: 1;
|
||
margin: 0 16rpx;
|
||
text-align: center;
|
||
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.stat-num {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.stat-label {
|
||
display: block;
|
||
margin-top: 6px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 搜索和时间筛选区域 */
|
||
.search-filter-area {
|
||
background: #fff;
|
||
margin: 0 20rpx;
|
||
border-radius: 16rpx;
|
||
/* padding: 6rpx 0 10rpx 0; */
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.top-icon {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 5px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.h-text {
|
||
width: 124rpx;
|
||
height: 56rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 28rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #327DFB;
|
||
}
|
||
|
||
.s-input {
|
||
width: 78%;
|
||
height: 56rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0px 10px;
|
||
|
||
input {
|
||
margin-left: 5px;
|
||
flex: 1;
|
||
width: 0;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
/* 时间筛选选项卡样式 */
|
||
.tab-choose-class {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0 16rpx 0;
|
||
background-color: #fff;
|
||
/* border-bottom: 1rpx solid #F5F5F5; */
|
||
width: 100%;
|
||
/* 新增：让容器占满宽度 */
|
||
}
|
||
|
||
.tab-content {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.tab-name-class {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.icon-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.icon-tab image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.example-body {
|
||
display:flex;
|
||
background-color: #fff;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
/* 信息选项卡样式 */
|
||
.four-box-header_2 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.four-box-header_2_right {
|
||
width: 60%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.four-box-header_2_right .tab-item {
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
color: #a1a6aa;
|
||
position: relative;
|
||
padding: 0rpx 20rpx;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.four-box-header_2_right .tab-item.active {
|
||
font-weight: bold;
|
||
color: #000000;
|
||
}
|
||
|
||
.four-box-header_2_right .tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -10rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 33.33%;
|
||
height: 6rpx;
|
||
background: linear-gradient(90deg, #054DF3 0%, #55A3FF 100%);
|
||
border-radius: 3rpx 3rpx 0 0;
|
||
}
|
||
|
||
/* 订单列表区域 */
|
||
.dil {
|
||
background-color: #F7F8FC;
|
||
box-sizing: border-box;
|
||
padding: 8px 12px 15px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
row-gap: 10px;
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.loading-spinner {
|
||
position: relative;
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 4px solid #f3f3f3;
|
||
border-top: 4px solid #327DFB;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 16px;
|
||
color: #666;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.ques {
|
||
margin: 0px auto;
|
||
margin-top: 40px;
|
||
width: 80%;
|
||
}
|
||
|
||
.ques image {
|
||
width: 100%;
|
||
}
|
||
|
||
.loading-more {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.loading-more .mini {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-width: 2px;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.no-more-data {
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
/* 分类统计样式 */
|
||
.sub-tabs {
|
||
display: flex;
|
||
background: #fff;
|
||
padding: 10px 0;
|
||
justify-content: space-around;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.sub-tab-item {
|
||
font-size: 15px;
|
||
color: #666;
|
||
padding: 4px 10px;
|
||
}
|
||
|
||
.sub-tab-item.active {
|
||
font-weight: bold;
|
||
color: #3a8dff;
|
||
border-bottom: 2px solid #3a8dff;
|
||
}
|
||
|
||
.list-container {
|
||
margin: 10px;
|
||
}
|
||
|
||
.table-header,
|
||
.table-row {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.table-header {
|
||
font-weight: bold;
|
||
background: #f0f3f8;
|
||
}
|
||
|
||
.col-rank {
|
||
width: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
.col-driver {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.col-num,
|
||
.col-distance,
|
||
.col-money {
|
||
width: 80px;
|
||
text-align: center;
|
||
}
|
||
|
||
.scroll_view_style {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 新增选择字段样式 */
|
||
.select-field {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid #e9ecef;
|
||
min-height: 80rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.select-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.select-field:active {
|
||
background: #e9ecef;
|
||
}
|
||
|
||
.stat-cards-container {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 14rpx 0;
|
||
}
|
||
|
||
.stat-cards {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex: 1;
|
||
}
|
||
|
||
.expand-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 60rpx;
|
||
height: 80rpx;
|
||
margin-right: 20rpx;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.expand-text {
|
||
font-size: 20rpx;
|
||
color: #327DFB;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.expanded-cards {
|
||
margin-top: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
</style> |