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">
              <view class="time" @click="toReload">
                <cwg-icon name="crm-refresh" :size="16" color="#666" />
                <text class="crm-cursor"> GMT+3 {{ time }}</text>
              </view>
              <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>
              <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>
            </view>
            <view class="chart-container">
              <cwg-charts type="line" :chartData="chartData" />
            </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 } from 'vue'
import { useI18n } from 'vue-i18n'
import dayjs from 'dayjs'
import useRouter from '@/hooks/useRouter'
import { ibApi } from '@/service/ib'
import config from '@/config/index'
import useUserStore from '@/stores/use-user-store'
import { useStorage } from '@/hooks/useStorage'
import QrCode from '@/components/QrCode.vue'
import { useFilters } from '@/composables/useFilters'
import { isAfterJuly28 } from '@/utils/dateUtils'
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 dropDown = ref([])
const chartFormRef = ref(null)

const chartForm = ref({
  chartType: '',
  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 = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hh = String(now.getHours()).padStart(2, '0')
  const mm = String(now.getMinutes()).padStart(2, '0')
  time.value = `${year}/${month}/${day} ${hh}:${mm}`
}

const toReload = () => {
  getLocalTime()
  fetchChartData()
}

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 !== null ? item.amount : item.doubleAmount)
        })
        chartData.value = { categories, series: 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 !== null ? item.amount : item.doubleAmount)
        })
        chartData.value = { categories, series: 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 handleCommand = ({ value }) => {
  const data = { ...value.value }
  console.log(123, data)

  isDealLogin.value = data.isDealLogin
  ChartSet.value = {
    login: data.login,
    leverage: '1:' + data.leverage,
    platform: data.platform,
    groupTypeName: data.groupTypeName,
    type: data.type,
    balance: data.balance,
    currency: data.currency || '',
  }
}

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(() => ChartSet.value.login, async (login) => {
  await getDailyCompare(login)
  if (isDealLogin.value) {
    await getDailyDeal(login)
  } else {
    await getDailySubscribeProfit(login)
  }
})


const toDocumentary1 = () => {
  router.push({ path: '/pages/follow/trading-center' })
}

const isApplySignalVisible = ref(false)
const onApplySignalConfirm = () => {
  isApplySignalVisible.value = false
}

const getData = async () => {
  try{
    const res = await customApi.customDailyCompare()
    if (res.code === Code.StatusOK) {
      compareData.value = res.data
    }
  }catch (e) {
    console.log(e)
  }
}

onMounted(async () => {
  loading.value = true
  getLocalTime()
  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);
  }
}

.qrCode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.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(12);
  color: #999;
}

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

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

.chart-title .title .account {
  font-size: px2rpx(12);
  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;
  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>