gypsy-crm-frontend-vu/pages/customer/dashboard.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <view class="header">
      <view class="title">
        <view class="mb-3">{{ t('Home.msg.Custom') }}</view>
        <view class="">{{ dateWeek }}</view>
      </view>

      <button type="button" class="btn  btn-secondary  btn-shadow waves-effect"
              @click="createAccount">
        <view class="d-flex align-items-center">
          <cwg-icon name="crm-plus" :size="14" color="#fff" />
          <text v-t="'Custom.Index.AddAccount'" />
        </view>
      </button>
    </view>
    <uni-loading v-if="loading" />
    <uni-row v-else class="demo-uni-row uni-row1" :gutter="20">
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <uni-row :gutter="10">
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="card position-relative">
              <view class="card-body d-flex align-items-center gap-3">
                <view class="icon-placeholder">
                  <cwg-icon name="crm-wallet" :size="28" color="red" />
                </view>
                <view class="flex-1">
                  <view class="d-flex justify-between items-start mb-1">
                    <text class="text-muted text-sm">Total Balance</text>
                    <text
                      :class="['growth-rate', compareData.totalBalanceGrowthRate||0 >= 0 ? 'rate-up' : 'rate-down']">
                      {{ compareData.totalBalanceGrowthRate || 0 >= 0 ? '+' : ''
                      }}{{ compareData.totalBalanceGrowthRate || 0 }}%
                    </text>
                  </view>
                  <view class="fw-bold text-lg">${{ numberFormat(compareData.totalBalance || '0') }}</view>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="card position-relative">
              <view class="card-body d-flex align-items-center gap-3">
                <view class="icon-placeholder">
                  <cwg-icon name="crm-money-up" :size="28" color="red" />
                </view>
                <view class="flex-1">
                  <view class="d-flex justify-between items-start mb-1">
                    <text class="text-muted text-sm">Equity</text>
                    <text :class="['growth-rate', compareData.totalEquityGrowthRate ||0>= 0 ? 'rate-up' : 'rate-down']">
                      {{ compareData.totalEquityGrowthRate || 0 >= 0 ? '+' : ''
                      }}{{ compareData.totalEquityGrowthRate || 0 }}%
                    </text>
                  </view>
                  <view class="fw-bold text-lg">${{ numberFormat(compareData.totalEquity || '0') }}</view>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="card position-relative">
              <view class="card-body d-flex align-items-center gap-3">
                <view class="icon-placeholder">
                  <cwg-icon name="icon_withdraw" :size="28" color="red" />
                </view>
                <view class="flex-1">
                  <view class="d-flex justify-between items-start mb-1">
                    <text class="text-muted text-sm">Total deposit</text>
                    <text
                      :class="['growth-rate', compareData.totalDepositAmountGrowthRate ||0 >= 0 ? 'rate-up' : 'rate-down']">
                      {{ compareData.totalDepositAmountGrowthRate || 0 >= 0 ? '+' : ''
                      }}{{ compareData.totalDepositAmountGrowthRate || 0 }}%
                    </text>
                  </view>
                  <view class="fw-bold text-lg">${{ numberFormat(compareData.totalDepositAmount || '0') }}</view>
                </view>
              </view>
            </view>
          </uni-col>
          <uni-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <view class="card position-relative">
              <view class="card-body d-flex align-items-center gap-3">
                <view class="icon-placeholder">
                  <cwg-icon name="crm-money-bill-transfer" :size="28" color="red" />
                </view>
                <view class="flex-1">
                  <view class="d-flex justify-between items-start mb-1">
                    <text class="text-muted text-sm">Total withdrawal</text>
                    <text
                      :class="['growth-rate', compareData.totalWithdrawalAmountGrowthRate||0 >= 0 ? 'rate-up' : 'rate-down']">
                      {{ compareData.totalWithdrawalAmountGrowthRate || 0 >= 0 ? '+' : ''
                      }}{{ compareData.totalWithdrawalAmountGrowthRate || 0 }}%
                    </text>
                  </view>
                  <view class="fw-bold text-lg">${{ numberFormat(compareData.totalWithdrawalAmount || '0') }}</view>
                </view>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </uni-col>
      <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <view class="chart-box crm-border-radius">
            <view class="chart-title">
              <uni-row>
                <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <view class="time" @click="toReload">
                    <cwg-icon name="crm-refresh" :size="16" color="#666" />
                    <text class="crm-cursor"> GMT+3 {{ time }}</text>
                  </view>
                </uni-col>
                <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <view class="title">
                    <view class="name">
                      <text v-if="chartForm.chartType == 4">{{ t('Custom.Index.TradingVolumeStatistics') }}</text>
                      <text v-if="chartForm.chartType == 2">{{ t('Custom.Index.DepositStatistical') }}</text>
                      <text v-if="chartForm.chartType == 3">{{ t('Custom.Index.WithdrawalsStatistical') }}</text>
                      <text v-if="chartForm.chartType == 6">{{ t('Custom.Index.ProfitLoss') }}</text>
                    </view>
                    <view class="account" v-if="chartForm.login">
                      <text>{{ t('Custom.Index.TradingAccount') }}</text>
                      <text> —</text>
                      <text>{{ chartForm.login }}</text>
                    </view>
                    <view class="date">
                      <uni-datetime-picker
                        v-model="isDate"
                        type="daterange"
                        :placeholder="t('placeholder.Start') + ' - ' + t('placeholder.End')"
                        @change="getSearchDate"
                      />
                    </view>
                  </view>
                </uni-col>
                <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <view class="operation" @click="isChart = true">
                    <text style="font-size: 14px">{{ t('Custom.Index.Parameter') }}</text>
                    <cwg-icon name="iconcanshu" :size="16" color="#666" />
                  </view>
                </uni-col>
              </uni-row>
            </view>
            {{isMobile}}
            <view class="chart-container">
              <cwg-match-media :max-width="991">
              <cwg-charts type="line" :chartData="chartData" :opts="chartOpts" tooltipFormat="tooltipCustom" ontouch />
              </cwg-match-media>
              <cwg-match-media :min-width="991">
              <cwg-charts type="line" :chartData="chartData" :opts="chartOpts" tooltipFormat="tooltipCustom"  />
              </cwg-match-media>
            </view>
          </view>
        </uni-col>
      </uni-col>
    </uni-row>
    <cwg-improve-popup v-model:visible="dialogCheck" @confirm="confirm" />

    <cwg-popup v-model:visible="isChart" type="center" :mask-click="false" :show-footers="true"
               :title="t('Custom.Index.ChartSet')">
      <view class="dia-content">
        <uni-forms ref="chartFormRef" labelWidth="160">
          <uni-forms-item :label="t('Label.ChartType') + ':'" prop="chartType">
            <cwg-combox
              v-model:value="chartForm.chartType"
              :options="chartTypeOptions"
              :placeholder="t('placeholder.choose')"
              filterable
            />
          </uni-forms-item>
          <uni-forms-item :label="t('Label.PlatformType') + ':'" prop="platform">
            <cwg-combox
              v-model:value="chartForm.platform"
              :options="platformOptions"
              :placeholder="t('placeholder.choose')"
              @change="onPlatformChange"
            />
          </uni-forms-item>
          <uni-forms-item :label="t('Label.TradingAccount') + ':'" prop="login">
            <cwg-combox
              v-model:value="chartForm.login"
              :options="loginOptions"
              :placeholder="t('placeholder.choose')"
              filterable
            />
          </uni-forms-item>
        </uni-forms>
      </view>
      <template #footer>
        <button @click="isChart = false">{{ t('Btn.Cancel') }}</button>
        <button type="primary" @click="handleChartConfirm">{{ t('Btn.Confirm') }}</button>
      </template>
    </cwg-popup>
  </cwg-page-wrapper>
</template>

<script setup>
  import { ref, computed, watch, onMounted, nextTick,onUnmounted } from 'vue'
  import { useI18n } from 'vue-i18n'
  import dayjs from 'dayjs'
  import useRouter from '@/hooks/useRouter'
  import config from '@/config/index'
  import useUserStore from '@/stores/use-user-store'
  import { useStorage } from '@/hooks/useStorage'
  import { useFilters } from '@/composables/useFilters'
  import { documentaryApi } from '@/service/documentary'
  import { customApi } from '@/service/custom'
  import { userApi } from '@/api/user'

  const { t, locale } = useI18n()
  const loading = ref(false)
  const router = useRouter()
  const { Code } = config
  const userStore = useUserStore()
  const { numberFormat } = useFilters()
  const listApi = ref(documentaryApi.followDailySubscribeProfit)


  const loginOptions = ref([])
  const ChartSetDate = ref({})
  const isDealLogin = ref(false)
  const dealDate = ref({})
  const SubscribeProfitDate = ref([])
  const compareData = ref({})

  const isChart = ref(false)
  const isDate = ref(['', ''])
  const time = ref('')
  const chartData = ref({ categories: [], series: [] })
  const chartOpts = ref({
    color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
    padding: [15, 10, 0, 15],
    enableScroll: true,
    legend: {
      show: false,
    },
    xAxis: {
      // disableGrid: true,
      scrollShow: true,
      itemCount: 4,
    },
    tooltipFormat: 'tooltipCustom',
    extra: {
      line: {
        type: 'straight',
        width: 2,
        activeType: 'hollow',
      },
      tooltip: {
        legendShow: false,
        // showCategory: true,
        formatter: 'tooltipCustom',
      },
    },
  })
  const dropDown = ref([])
  const chartFormRef = ref(null)

  const chartForm = ref({
    chartType: 4,
    platform: '',
    login: '',
  })

  const chartTypeOptions = ref([
    { text: 'Trading Volume Statistics', value: 4 },
    { text: 'Deposit Statistical', value: 2 },
    { text: 'Withdrawals Statistical', value: 3 },
    { text: 'Profit Loss', value: 6 },
  ])

  const platformOptions = [
    { text: 'MT4', value: 'MT4' },
    { text: 'MT5', value: 'MT5' },
  ]

  const getLocalTime = () => {
    let timezone = 2 //目标时区时间，东2区   东时区正数 西市区负数
    let offset_GMT = new Date().getTimezoneOffset() // 本地时间和格林威治的时间差，单位为分钟
    let nowDate = new Date().getTime() // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
    let now = new Date(
      nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000,
    )

    //当前时间
    let month = now.getMonth() + 1 //月
    let day = now.getDate() //日
    let hh = now.getHours() //时
    let mm = now.getMinutes() //分
    let clock
    if (month < 10) {
      month = '0' + month
    }
    if (day < 10) {
      day = '0' + day
    }
    if (hh < 10) {
      hh = '0' + hh
    }
    if (mm < 10) {
      mm = '0' + mm
    }
    clock = '  ' + hh + ':' + mm + '  ' + month + '/' + day
    time.value = clock
  }

  const toReload = () => {
    goTime()
  }

  const getSearchDate = (val) => {
    if (Array.isArray(val)) {
      isDate.value = val
    }
    fetchChartData()
  }

  const onPlatformChange = (val) => {
    console.log('Platform changed:', val)
  }

  const handleChartConfirm = async () => {
    try {
      const params = {
        type: chartForm.value.chartType || 4,
        platform: chartForm.value.platform,
        login: chartForm.value.login,
        startDate: isDate.value[0],
        endDate: isDate.value[1],
      }
      const res = await customApi.getChartInfo(params)
      if (res.code === Code.StatusOK) {
        if (res.data) {
          let categories = []
          let seriesData = []
          res.data.forEach((item) => {
            categories.push(item.date.split(' ')[0])
            seriesData.push(item.amount)
          })
          chartData.value = { categories, series: [{ name: '', data: seriesData }] }
        } else {
          chartData.value = { categories: [], series: [] }
        }
      }
      isChart.value = false
    } catch (error) {
      console.error('获取图表数据失败', error)
      isChart.value = false
    }
  }

  const fetchChartData = async () => {
    try {
      const params = {
        type: chartForm.value.chartType || 4,
        platform: chartForm.value.platform,
        login: chartForm.value.login,
        startDate: isDate.value[0],
        endDate: isDate.value[1],
      }
      const res = await customApi.getChartInfo(params)
      if (res.code === Code.StatusOK) {
        if (res.data) {
          let categories = []
          let seriesData = []
          res.data.forEach((item) => {
            categories.push(item.date.split(' ')[0])
            seriesData.push(item.amount)
          })
          chartData.value = { categories, series: [{ name: '', data: seriesData }] }
        } else {
          chartData.value = { categories: [], series: [] }
        }
      }
    } catch (error) {
      console.error('获取图表数据失败', error)
    }
  }

  const getDropDown = async () => {
    try {
      const res = await customApi.CustomDropdown()
      if (res.code === Code.StatusOK) {
        dropDown.value = res.data || []
        loginOptions.value = (res.data || []).map(item => ({
          text: item.login,
          value: item.login,
        }))
      }
    } catch (error) {
      console.error('获取账户列表失败', error)
    }
  }


  const groupTypeName = (type) => {
    if (!type) return '--'
    if (type == 1) return t('AccountType.ClassicAccount')
    if (type == 2) return t('AccountType.SeniorAccount')
    if (type == 5) return t('AccountType.SpeedAccount')
    if (type == 6) return t('AccountType.SpeedAccount')
    if (type == 7) return t('AccountType.StandardAccount')
    if (type == 8) return t('AccountType.CentAccount')
    return type
  }

  const groupCurrency = (type) => {
    console.log(type, 'usd')
    if (type == 'GBP') {
      return ': £'
    } else if (type == 'USD') {
      return ': $'
    } else if (type == 'EUR') {
      return ': €'
    } else if (type == 'USC') {
      return ': ￠'
    } else {
      return ': $'
    }
  }

  const groupCurrency1 = (type) => {
    if (type == 'GBP') {
      return '£'
    } else if (type == 'USD') {
      return '$'
    } else if (type == 'EUR') {
      return '€'
    } else if (type == 'USC') {
      return '￠'
    } else {
      return '$'
    }
  }

  // 今日时间
  const dateWeek = computed(() => {
    const now = dayjs()
    const isChinese = locale.value === 'cn' || locale.value === 'zhHant'

    if (isChinese) {
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      return `${weekDays[now.day()]}, ${months[now.month()]}${now.date()}日, ${now.year()}`
    } else {
      return now.format('ddd, MMMD, YYYY')
    }
  })


  const createAccount = () => {
    getCustomLoginInfo()
  }
  // 获取客户登录信息
  const dialogCheck = ref(false)

  async function getCustomLoginInfo() {
    try {
      const res = await userApi.getUserInfo()
      userStore.saveUserInfo(res.data)
      if (res.code === 200) {
        if (
          res.data.customInfo.status == 2 &&
          res.data.customInfo.applyRealStatus == 2
        ) {
          router.push(`/pages/customer/account-select?server=${cativeIndex.value}`)
        } else {
          dialogCheck.value = true
        }
      }
    } catch (error) {
      //  console.log(error, 111);
    }
  }

  const confirm = () => {
    dialogCheck.value = false
    router.push(`/pages/mine/improveImmediately`)
  }

  const getDailyCompare = async (login) => {
    const res = await documentaryApi.followDailyCompare({ login })
    if (res.code === Code.StatusOK) {
      ChartSetDate.value = res.data ?? {}
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  }

  const getDailyDeal = async (login) => {
    const res = await documentaryApi.followDailyDeal({ login })
    if (res.code === Code.StatusOK) {
      dealDate.value = res.data ?? {}
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  }

  const getDailySubscribeProfit = async (login) => {
    const res = await documentaryApi.followDailySubscribeProfit({ login })
    if (res.code === Code.StatusOK) {
      SubscribeProfitDate.value = res.data?.data ?? []
    } else {
      uni.showToast({ title: res.msg, icon: 'none' })
    }
  }
  watch(() => chartForm.value.login, async (login) => {
    await getDailyCompare(login)
    if (isDealLogin.value) {
      await getDailyDeal(login)
    } else {
      await getDailySubscribeProfit(login)
    }
  })

  const getData = async () => {
    try {
      const res = await customApi.customDailyCompare()
      if (res.code === Code.StatusOK) {
        compareData.value = res.data
      }
    } catch (e) {
      console.log(e)
    }
  }
  const goTime = () => {
    getLocalTime()
    let timezone = 2 //目标时区时间，东2区   东时区正数 西市区负数
    let offset_GMT = new Date().getTimezoneOffset() // 本地时间和格林威治的时间差，单位为分钟
    let nowDate = new Date().getTime() // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
    let data = new Date(
      nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000,
    )
    //当月第一天和最后一天
    let mon1 = data.setDate(1) //当月第一天
    let mon2 = data.setMonth(data.getMonth() + 1) //下月
    let y1 = new Date(mon1).getFullYear()
    let m1 = new Date(mon1).getMonth() + 1
    let d1 = new Date(mon1).getDate()
    let y2 = new Date(mon2).getFullYear()
    let m2 = new Date(mon2).getMonth() + 1
    let d2 = 1

    isDate.value = [
      y1 + '-' + (m1 < 10 ? '0' + m1 : m1) + '-' + (d1 < 10 ? '0' + d1 : d1),
      y2 + '-' + (m2 < 10 ? '0' + m2 : m2) + '-' + (d2 < 10 ? '0' + d2 : d2),
    ]
    fetchChartData()
  }
  const isMobile = ref(false)
  onUnmounted(() => {
    // #ifdef H5
    window.removeEventListener('resize', handleResize)
    // #endif
  })
  const chartShow = ref(true)
  // 监听窗口大小变化（仅 H5）
  // #ifdef H5
  const handleResize = () => {
    checkIsMobile()
  }
  // #endif
  const checkIsMobile = () => {
    // 适配 uni-app 环境
    chartShow.value = false
    const width = window.innerWidth
    console.log(width)
    isMobile.value = width < 991
    chartShow.value = true
    // #ifndef H5
    chartShow.value = false
    const systemInfo = uni.getSystemInfoSync()
    isMobile.value = systemInfo.windowWidth < 991
    chartShow.value = true
    // #endif
  }
  onMounted(async () => {
    loading.value = true
    goTime()
    await getData()
    await getDropDown()
    // await fetchChartData()
    loading.value = false
  })

</script>

<style lang="scss" scoped>
  @import "@/uni.scss";

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: px2rpx(20);

    .title {
      font-size: px2rpx(24);
      font-weight: bold;
    }
  }

  .demo-uni-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 auto !important;
  }

  .uni-col-left {
    //display: flex;
    //flex-direction: column;
  }

  .uni-col-right {
    display: flex;
  }

  .dashboard-container {
    min-height: 10vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 卡片通用样式 */
  .card {
    background: var(--color-white);
    color: var(--bs-heading-color);
    border-radius: 4px;
    margin-bottom: px2rpx(20);
    box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.2);
  }

  .card-body {
    padding: px2rpx(16);
  }

  .icon-placeholder {
    width: px2rpx(48);
    height: px2rpx(48);
    border-radius: px2rpx(24);
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .icon-text {
    font-size: px2rpx(20);
    font-weight: bold;
    color: #6c757d;
  }

  .growth-rate {
    font-size: px2rpx(12);
    font-weight: 500;
    padding: px2rpx(2) px2rpx(8);
    border-radius: px2rpx(2);
  }

  .growth-rate.rate-up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
  }

  .growth-rate.rate-down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
  }

  .custom-number,
  .custom-money {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    padding: 15px;

    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-height: px2rpx(125);
  }

  .custom-number .title,
  .custom-money .left .tit,
  .custom-money .right .tit {
    font-size: 14px;
    color: var(--bs-heading-color);
    margin-bottom: 10px;
  }

  .custom-number .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .custom-money {
    display: flex;
    flex-direction: column;
  }

  .custom-money .left,
  .custom-money .right {
    flex: 1;
  }

  .custom-money .num {
    font-size: 20px;
    font-weight: bold;
    color: var(--bs-heading-color);
  }

  .custom-money .num.red {
    color: #eb3f57;
  }

  .el-dropdown-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6c8595;
    font-size: 12px;
  }

  .account-info1 {
    margin-bottom: 20px;
  }

  .custom-money-left .header,
  .custom-money-right .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: px2rpx(15);
  }

  .custom-money-left .tab,
  .custom-money-right .tab {
    font-size: px2rpx(16);
    font-weight: 600;
    color: var(--bs-heading-color);
  }

  .bottomCol {
    font-size: 16px;
    color: #868686;

    .bo-left1 {
      margin: 20px 0;
      padding: 20px 0;
      border-right: 1px dashed #989898;
      text-align: center;
      font-size: 16px;
    }


    .bo-right1 {
      margin: 20px 0px;
      padding: 20px 0;
      text-align: center;
      font-size: 16px;

    }
  }

  .blue-font {
    margin-top: px2rpx(15);
    color: #007aff;
    font-weight: 600;
    font-size: px2rpx(24);
  }

  .subscribe-table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    overflow: hidden;
  }

  .subscribe-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-top: 1px solid #ebeef5;
  }

  .subscribe-head {
    background: #f5f7fa;
    border-top: none;
  }

  .subscribe-cell {
    padding: 10px 8px;
    font-size: 12px;
    color: var(--bs-heading-color);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .custom-dialog-content {
    padding: px2rpx(20);

    .info-text {
      color: var(--bs-heading-color);
      font-size: px2rpx(14);
      line-height: px2rpx(36);
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: px2rpx(12);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  .header-title {
    font-size: px2rpx(14);
    font-weight: 600;
  }

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

  .action-btn {
    background: #ffde02;
    border: none;
    border-radius: 50%;
    width: px2rpx(32);
    height: px2rpx(32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;

    &:after {
      border: none;
    }
  }

  .dia-content {
    padding: 20rpx;
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .label {
    font-weight: 500;
    margin-bottom: 8rpx;
  }

  .btn {
    text-align: center;
    background-color: rgb(var(--bs-danger-rgb));
    font-size: px2rpx(16);
    color: #fff;
    padding: px2rpx(10) px2rpx(20);
    border-radius: px2rpx(24);
    margin: 0;
  }

  .crm-cursor {
    cursor: pointer;
  }

  .link {
    display: flex;
    margin-top: 20rpx;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: px2rpx(35);
      margin: 0 px2rpx(10);
    }
  }

  .chart-box {
    background: var(--color-white);
    border-radius: 8px;
    padding: px2rpx(16);
    box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.2);
  }

  .chart-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: px2rpx(16);
    padding-bottom: px2rpx(16);
    border-bottom: 1px solid #f0f0f0;
  }

  .chart-title .time {
    display: flex;
    align-items: center;
    gap: px2rpx(8);
    font-size: px2rpx(20);
    margin-bottom: px2rpx(10);
    color: #999;
  }

  .chart-title .title {
    flex: 1;
    margin: 0;
    margin-bottom: px2rpx(10);
  }

  .chart-title .title .name {
    font-size: px2rpx(20);
    font-weight: 600;
    color: var(--bs-heading-color);
    margin-bottom: px2rpx(8);
  }

  .chart-title .title .account {
    font-size: px2rpx(20);
    color: #999;
    margin-bottom: px2rpx(8);
  }

  .chart-title .title .date {
    display: flex;
  }

  .chart-title .date-picker {
    font-size: px2rpx(12);
    color: #666;
    padding: px2rpx(6) px2rpx(12);
    background: #f5f5f5;
    border-radius: 4px;
  }

  .chart-title .operation {
    display: flex;
    align-items: center;
    gap: px2rpx(4);
    color: #666;
    margin-bottom: px2rpx(10);
    cursor: pointer;
  }

  .chart-container {
    height: px2rpx(300);
  }

  .popup-content .form {
    padding: px2rpx(16);
  }

  .popup-content .form-item {
    margin-bottom: px2rpx(20);
  }

  .popup-content .form-label {
    display: block;
    font-size: px2rpx(14);
    color: #666;
    margin-bottom: px2rpx(8);
  }

  .popup-content .picker-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px2rpx(12);
    background: #f5f5f5;
    border-radius: 4px;
    font-size: px2rpx(14);
    color: #333;
  }

  .crm-cursor {
    cursor: pointer;
  }

  .crm-border-radius {
    border-radius: 8px;
  }
</style>