huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add:汇率小数7位 

图表优化
zhangyong/milestone-20250913-现金管理
lihui 2 months ago
parent
b5ab375c59
commit
e7619b3035
3 changed files with 73 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/components/workspace/GoldGraph.vue
  2. 24
      src/components/workspace/GoldGraphMarkets.vue
  3. 83
      src/views/managerecharge/rate.vue

14
src/components/workspace/GoldGraph.vue
View File

@ -47,11 +47,16 @@
</div> </div>
<div class="graph-content"> <div class="graph-content">
<div ref="chartRef" class="left"></div>
<div ref="chartRef" class="left"
v-loading="loading"
element-loading-background="rgba(122, 122, 122, 0)">
<!-- 加上loading动画 图表有点慢-->
</div>
<div class="right"> <div class="right">
<el-card class="graph-card-list"> <el-card class="graph-card-list">
<div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div> <div class="card-large">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div>
<el-select popper-class="mySelectStyle" class="card-select" v-model="selectedType" style="width: 100%; margin-bottom: 15px">
<el-select popper-class="mySelectStyle" class="card-select" v-model="selectedType"
style="width: 100%; margin-bottom: 15px">
<el-option label="全部类型" value="all"></el-option> <el-option label="全部类型" value="all"></el-option>
<el-option label="永久金币" value="permanent"></el-option> <el-option label="永久金币" value="permanent"></el-option>
<el-option label="免费金币" value="free"></el-option> <el-option label="免费金币" value="free"></el-option>
@ -92,7 +97,8 @@ const defaultTime = [
new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59), new Date(2000, 2, 1, 23, 59, 59),
] ]
// 加载状态
const loading = ref(true)
// 地区数据 // 地区数据
const markets = ref([]) const markets = ref([])
// 图表相关 // 图表相关
@ -806,10 +812,12 @@ onUnmounted(() => {
} }
} }
/* select 列表项 初始颜色 */ /* select 列表项 初始颜色 */
.el-select-dropdown__item { .el-select-dropdown__item {
background: #ffffff; background: #ffffff;
} }
/* select hover状态*/ /* select hover状态*/
.el-select-dropdown__item:hover { .el-select-dropdown__item:hover {
border-radius: 8px; border-radius: 8px;

24
src/components/workspace/GoldGraphMarkets.vue
View File

@ -11,10 +11,10 @@
</div> </div>
<div class="condition"> <div class="condition">
<div class="stats"> <div class="stats">
<div v-if="activeTab === 'consume'">合计：{{ sumConsume / 100 }}</div>&nbsp;&nbsp;
永久金币: {{ activeTab === 'recharge' ? sumRechargePermanent / 100 : sumConsumePermanent / 100 }}&nbsp;&nbsp;
免费金币: {{ activeTab === 'recharge' ? sumRechargeFree / 100 : sumConsumeFree / 100 }}&nbsp;&nbsp;
任务金币: {{ activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100 }}&nbsp;&nbsp;
<div v-if="activeTab === 'consume'">合计：{{ sumConsume }}</div>&nbsp;&nbsp;
永久金币: {{ activeTab === 'recharge' ? sumRechargePermanent : sumConsumePermanent }}&nbsp;&nbsp;
免费金币: {{ activeTab === 'recharge' ? sumRechargeFree : sumConsumeFree }}&nbsp;&nbsp;
任务金币: {{ activeTab === 'recharge' ? sumRechargeTask : sumConsumeTask }}&nbsp;&nbsp;
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<el-button @click="getYes()" size="small" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天 <el-button @click="getYes()" size="small" :type="activeTimeRange === 'yes' ? 'primary' : ''">昨天
@ -472,7 +472,17 @@ const updateChart = (chartData) => {
const option = { const option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: {type: 'shadow'},
axisPointer: { type: 'shadow' },
formatter: function (params) {
let result = params[0].name + '<br/>'
let total = 0
params.forEach(param => {
result += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`
total += param.value
})
result += `总${activeTab.value === 'recharge' ? '充值' : '消费'}: ${total.toLocaleString()}`
return result
}
}, },
legend: { legend: {
data: legend, data: legend,
@ -488,7 +498,9 @@ const updateChart = (chartData) => {
type: 'category', type: 'category',
data: chartData.dates.value, data: chartData.dates.value,
axisLabel: { axisLabel: {
rotate: 45
// 大于15个字符的标签旋转45度
rotate: chartData.dates.value.length > 15 ? 45 : 0
// rotate: 45
} }
}, },
yAxis: { yAxis: {

83
src/views/managerecharge/rate.vue
View File

@ -1,12 +1,13 @@
<script setup> <script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import request from '@/util/http' import request from '@/util/http'
import { useAdminStore } from "@/store/index.js";
import { storeToRefs } from "pinia";
import { permissionMapping, hasMenuPermission } from "@/utils/menuTreePermission.js"
import {useAdminStore} from "@/store/index.js";
import {storeToRefs} from "pinia";
import {permissionMapping, hasMenuPermission} from "@/utils/menuTreePermission.js"
const adminStore = useAdminStore() const adminStore = useAdminStore()
const { adminData, menuTree } = storeToRefs(adminStore)
const {adminData, menuTree} = storeToRefs(adminStore)
const regeEdit = ref(false) const regeEdit = ref(false)
const editFormRef = ref(null) const editFormRef = ref(null)
const tableData = ref([]) const tableData = ref([])
@ -74,7 +75,7 @@ const checkFreeGoldRadio = function (rule, value, callback) {
} }
// 定义表单验证规则 // 定义表单验证规则
const rules = reactive({ const rules = reactive({
num: [{ validator: checkFreeGoldRadio, trigger: 'blur' }],
num: [{validator: checkFreeGoldRadio, trigger: 'blur'}],
}) })
// 表单大小 // 表单大小
const formSize = ref('default') const formSize = ref('default')
@ -109,7 +110,7 @@ const getEditData = async function (row) {
console.log('搜索参数', getObj.value) console.log('搜索参数', getObj.value)
const result = await request({ const result = await request({
url: '/rate/selectById', url: '/rate/selectById',
data: { id: row.id }
data: {id: row.id}
}) })
console.log('根据id查 请求成功', result) console.log('根据id查 请求成功', result)
rateEdit.value.id = row.id rateEdit.value.id = row.id
@ -133,24 +134,24 @@ const initPermissions = () => {
}; };
// 编辑汇率 // 编辑汇率
const editRate = async function () { const editRate = async function () {
if(!hasrateEdit){
ElMessage.error('暂无权限')
return
}
// 提交前验证 汇率是否为数字
rateEdit.value.num = parseFloat(rateEdit.value.num);
try {
console.log('搜索参数', rateEdit.value)
const result = await request({
url: '/rate/update',
data: rateEdit.value
})
console.log('请求成功', result)
await getAllRate()
} catch (error) {
console.log('请求失败', error)
}
if (!hasrateEdit) {
ElMessage.error('暂无权限')
return
}
// 提交前验证 汇率是否为数字
rateEdit.value.num = parseFloat(rateEdit.value.num);
try {
console.log('搜索参数', rateEdit.value)
const result = await request({
url: '/rate/update',
data: rateEdit.value
})
console.log('请求成功', result)
await getAllRate()
} catch (error) {
console.log('请求失败', error)
}
} }
// 添加前验证 // 添加前验证
const edit = () => { const edit = () => {
@ -181,6 +182,7 @@ const handleEditDialogClose = () => {
getAllRate() getAllRate()
} }
} }
// 日期格式化 // 日期格式化
function formatDate(value) { function formatDate(value) {
if (!value) return '' if (!value) return ''
@ -193,6 +195,7 @@ function formatDate(value) {
const seconds = date.getSeconds().toString().padStart(2, '0') const seconds = date.getSeconds().toString().padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
} }
// 输入框过滤 // 输入框过滤
function handleInput(value) { function handleInput(value) {
// 检查是否使用了中文句号 // 检查是否使用了中文句号
@ -220,10 +223,10 @@ function handleInput(value) {
ElMessage.info('整数部分最多允许六位') ElMessage.info('整数部分最多允许六位')
} }
// 限制小数部分最多两位 // 限制小数部分最多两位
if (parts[1].length > 2) {
parts[1] = parts[1].slice(0, 2)
if (parts[1].length > 7) {
parts[1] = parts[1].slice(0, 7)
value = parts[0] + '.' + parts[1] value = parts[0] + '.' + parts[1]
ElMessage.info('最多允许两位小数')
ElMessage.info('最多允许七位小数')
} else { } else {
value = parts[0] + '.' + parts[1] value = parts[0] + '.' + parts[1]
} }
@ -245,6 +248,7 @@ function handleInput(value) {
return value return value
} }
onMounted(async function () { onMounted(async function () {
initPermissions() initPermissions()
await getAllRate() await getAllRate()
@ -257,11 +261,11 @@ onMounted(async function () {
<el-table-column type="index" label="序号" width="100px" fixed="left"> <el-table-column type="index" label="序号" width="100px" fixed="left">
<template #default="scope"> <template #default="scope">
<span>{{ <span>{{
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="rateName" label="货币名称" :span="2" />
<el-table-column prop="rateName" label="货币名称" :span="2"/>
<el-table-column prop="num" label="汇率" :span="2"> <el-table-column prop="num" label="汇率" :span="2">
<template #default="scope"> <template #default="scope">
<p> <p>
@ -289,22 +293,22 @@ onMounted(async function () {
<!-- 分页 --> <!-- 分页 -->
<div class="pagination"> <div class="pagination">
<el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]" <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
@current-change="handleCurrentChange"></el-pagination>
</div> </div>
</el-card> </el-card>
<!-- 这是编辑弹窗 --> <!-- 这是编辑弹窗 -->
<el-dialog align-center v-model="regeEdit" title="修改汇率" width="30vw" :close-on-click-modal="false" <el-dialog align-center v-model="regeEdit" title="修改汇率" width="30vw" :close-on-click-modal="false"
@close="handleEditDialogClose">
@close="handleEditDialogClose">
<el-form ref="editFormRef" :model="rateEdit" :rules="rules" label-width="auto" class="edit-form" :size="formSize" <el-form ref="editFormRef" :model="rateEdit" :rules="rules" label-width="auto" class="edit-form" :size="formSize"
status-icon>
status-icon>
<el-form-item prop="rateName" label="货币名称:"> <el-form-item prop="rateName" label="货币名称:">
<el-input v-model="rateEdit.rateName" disabled style="width: 10vw" />
<el-input v-model="rateEdit.rateName" disabled style="width: 10vw"/>
</el-form-item> </el-form-item>
<el-form-item prop="num" label="汇率:"> <el-form-item prop="num" label="汇率:">
<el-input v-model="rateEdit.num" @update:modelValue="handleInput" style="width: 120px" />
<el-input v-model="rateEdit.num" @update:modelValue="handleInput" style="width: 120px"/>
<span class="unit">:1</span> <span class="unit">:1</span>
<span class="rate-tip"> <span class="rate-tip">
(提示：当前规则每 (提示：当前规则每
@ -326,10 +330,11 @@ onMounted(async function () {
.card1 { .card1 {
background: #F3FAFE; background: #F3FAFE;
} }
:deep(.el-table__header-wrapper), :deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper), :deep(.el-table__body-wrapper),
:deep(.el-table__cell), :deep(.el-table__cell),
/* 表格 */
/* 表格 */
:deep(.el-table__body td) { :deep(.el-table__body td) {
background-color: #F3FAFE !important; background-color: #F3FAFE !important;
} }

Write Preview
Loading…
Cancel
Save