|
|
@@ -16,7 +16,7 @@
|
|
|
</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" class="uni-col-left">
|
|
|
+ <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">
|
|
|
@@ -27,8 +27,8 @@
|
|
|
<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 ? 'rate-up' : 'rate-down']">
|
|
|
- {{ compareData.totalBalanceGrowthRate >= 0 ? '+' : '' }}{{ compareData.totalBalanceGrowthRate }}%
|
|
|
+ <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>
|
|
|
@@ -45,8 +45,8 @@
|
|
|
<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 ? 'rate-up' : 'rate-down']">
|
|
|
- {{ compareData.totalEquityGrowthRate >= 0 ? '+' : '' }}{{ compareData.totalEquityGrowthRate }}%
|
|
|
+ <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>
|
|
|
@@ -63,8 +63,8 @@
|
|
|
<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 ? 'rate-up' : 'rate-down']">
|
|
|
- {{ compareData.totalDepositAmountGrowthRate >= 0 ? '+' : '' }}{{ compareData.totalDepositAmountGrowthRate }}%
|
|
|
+ <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>
|
|
|
@@ -81,8 +81,8 @@
|
|
|
<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 ? 'rate-up' : 'rate-down']">
|
|
|
- {{ compareData.totalWithdrawalAmountGrowthRate >= 0 ? '+' : '' }}{{ compareData.totalWithdrawalAmountGrowthRate }}%
|
|
|
+ <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>
|
|
|
@@ -92,111 +92,83 @@
|
|
|
</uni-col>
|
|
|
</uni-row>
|
|
|
</uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="uni-col-right">
|
|
|
- <view class="dashboard-container">
|
|
|
- <view class="account-info1" v-if="isDealLogin">
|
|
|
- <uni-row>
|
|
|
- <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <view class="custom-money custom-money-left">
|
|
|
- <view class="header">
|
|
|
- <view class="tit">
|
|
|
- <text class="tab">{{ t('Documentary.console.item23') }}</text>
|
|
|
- </view>
|
|
|
- <view class="num" @click="toDocumentary1">
|
|
|
- <cwg-icon name="crm-sz" :size="18" color="#6c8595" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="bottomCol">
|
|
|
- <uni-row>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
|
|
- <view class="bo-left1">
|
|
|
- <view>
|
|
|
- <text>{{ t('Documentary.console.item26') }}</text>
|
|
|
- </view>
|
|
|
- <view class="blue-font">
|
|
|
- <text>{{ numberFormat(dealDate.followNum || '0') }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
|
|
- <view class="bo-left1">
|
|
|
- <view>
|
|
|
- <text>{{ t('Documentary.console.item9') }}</text>
|
|
|
- </view>
|
|
|
- <view class="blue-font">
|
|
|
- <text>{{ numberFormat(dealDate.followNumIncrement || '0') }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
|
|
- <view class="bo-left1">
|
|
|
- <view>
|
|
|
- <text>{{ t('Documentary.console.item29') }}</text>
|
|
|
- </view>
|
|
|
- <view class="blue-font">
|
|
|
- <text>{{ numberFormat(dealDate.position || '0') }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
|
|
- <view class="bo-right1">
|
|
|
- <view>
|
|
|
- <text>{{ t('Documentary.console.item30') }}</text>
|
|
|
- </view>
|
|
|
- <view class="blue-font">
|
|
|
- <text>{{ numberFormat(dealDate.closed || '0') }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </view>
|
|
|
+ <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>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="account-info1" v-else>
|
|
|
- <uni-row>
|
|
|
- <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <view class="custom-money custom-money-right">
|
|
|
- <view class="header">
|
|
|
- <view class="tit">
|
|
|
- <text class="tab">{{ t('Documentary.console.item27') }}</text>
|
|
|
- </view>
|
|
|
- <view class="num">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="bottom">
|
|
|
- <view class="tab">
|
|
|
- <cwg-tabel :data="SubscribeProfitDate" class="crm_tab" :api="listApi" :columns="[
|
|
|
- { label: t('Documentary.console.item32'), prop: 'nickname', align: 'center', slot: 'nickname' },
|
|
|
- { label: t('Documentary.console.item33'), prop: 'nickname2', align: 'center', slot: 'nickname2' },
|
|
|
- { label: t('Documentary.console.item34'), prop: 'startTime', align: 'center', slot: 'startTime' },
|
|
|
- { label: t('Documentary.console.item35'), prop: 'endTime', align: 'center', slot: 'endTime' }
|
|
|
- ]" style="width: 100%" :show-operation="false" :showPagination="false">
|
|
|
- <template #nickname="{ row }">
|
|
|
- <text>{{ row.nickname || '--' }}</text>
|
|
|
- </template>
|
|
|
- <template #nickname2="{ row }">
|
|
|
- <text>{{ row.nickname || '--' }}</text>
|
|
|
- </template>
|
|
|
- <template #startTime="{ row }">
|
|
|
- <text>{{ row.startTime || '--' }}</text>
|
|
|
- </template>
|
|
|
- <template #endTime="{ row }">
|
|
|
- <text>{{ row.endTime || '--' }}</text>
|
|
|
- </template>
|
|
|
- </cwg-tabel>
|
|
|
- </view>
|
|
|
- </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>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
+ </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>
|
|
|
- </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>
|
|
|
|
|
|
@@ -226,13 +198,136 @@ const listApi = ref(documentaryApi.followDailySubscribeProfit)
|
|
|
|
|
|
|
|
|
const loginOptions = ref([])
|
|
|
-const ChartSet = 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 '--'
|
|
|
@@ -391,7 +486,10 @@ const getData = async () => {
|
|
|
|
|
|
onMounted(async () => {
|
|
|
loading.value = true
|
|
|
+ getLocalTime()
|
|
|
await getData()
|
|
|
+ await getDropDown()
|
|
|
+ await fetchChartData()
|
|
|
loading.value = false
|
|
|
})
|
|
|
|
|
|
@@ -710,4 +808,104 @@ onMounted(async () => {
|
|
|
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>
|