23 changed files with 4082 additions and 2384 deletions
-
3vue/gold-system/package.json
-
9vue/gold-system/src/api/index.js
-
BINvue/gold-system/src/assets/background.jpg
-
23vue/gold-system/src/assets/css/common.css
-
14vue/gold-system/src/router/index.js
-
42vue/gold-system/src/util/http.js
-
1017vue/gold-system/src/views/audit/rechargeAudit.vue
-
980vue/gold-system/src/views/audit/refundAudit.vue
-
571vue/gold-system/src/views/consume/addConsume.vue
-
265vue/gold-system/src/views/consume/allConsume.vue
-
88vue/gold-system/src/views/index.vue
-
126vue/gold-system/src/views/login.vue
-
762vue/gold-system/src/views/managerecharge/activity.vue
-
191vue/gold-system/src/views/managerecharge/rate.vue
-
113vue/gold-system/src/views/recharge/addRecharge.vue
-
25vue/gold-system/src/views/recharge/adminRecharge.vue
-
19vue/gold-system/src/views/recharge/allRecharge.vue
-
252vue/gold-system/src/views/refund/addRefund.vue
-
178vue/gold-system/src/views/refund/allRefund.vue
-
442vue/gold-system/src/views/usergold/index.vue
-
1241vue/gold-system/src/views/workspace/index.vue
-
104vue/gold-system/src/views/z.vue
-
1vue/gold-system/vite.config.ts
@ -0,0 +1,9 @@ |
|||||
|
import http from '../util/http.js'; |
||||
|
|
||||
|
const API={ |
||||
|
post: function(url,data){ |
||||
|
return http({url:url,method:'post',data:data}) |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
export default API; |
After Width: 928 | Height: 1133 | Size: 567 KiB |
@ -0,0 +1,42 @@ |
|||||
|
import axios from 'axios'; |
||||
|
|
||||
|
export default function (options) { |
||||
|
//配置每次发送请求都从localStorage中获取名字叫token的数据,
|
||||
|
//添加到请求头部的Authorization属性中
|
||||
|
const token = localStorage.getItem('token'); |
||||
|
//Object.assign用于合并对象的数据
|
||||
|
options.headers = Object.assign( |
||||
|
{ token: token }, |
||||
|
options.headers || {} |
||||
|
); |
||||
|
//axios() 返回一个promise对象,用于异步请求
|
||||
|
//options是一个对象,其中包含了许多用于配置请求的参数,
|
||||
|
//例如请求的url、请求方法(GET、POST等)、请求头等
|
||||
|
return axios(options) |
||||
|
.then(({ status, data, statusText }) => { |
||||
|
//该函数在请求成功并返回数据时被调用
|
||||
|
//status:HTTP状态码,例如200表示请求成功。
|
||||
|
//data:服务器返回的数据。
|
||||
|
// statusText:HTTP状态文本,例如"OK"表示请求成功。
|
||||
|
console.log(data); |
||||
|
if (status == 200) { |
||||
|
return data; |
||||
|
} else { |
||||
|
throw new e(statusText); |
||||
|
} |
||||
|
}) |
||||
|
.catch(e=>{ |
||||
|
// 检查是否是因为token过期导致的401错误
|
||||
|
if (e.response && e.response.status === 401) { |
||||
|
// 清除localStorage中的token
|
||||
|
localStorage.removeItem('token'); |
||||
|
// 执行重新登录的逻辑,例如跳转到登录页面
|
||||
|
window.location.href = '/login'; |
||||
|
// 可以在这里返回一个特定的值或者对象,以便调用者知道需要重新登录
|
||||
|
return { needsLogin: true }; |
||||
|
} else { |
||||
|
// 其他类型的错误,直接抛出
|
||||
|
return Promise.reject(e); |
||||
|
} |
||||
|
}); |
||||
|
} |
1017
vue/gold-system/src/views/audit/rechargeAudit.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
980
vue/gold-system/src/views/audit/refundAudit.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,126 @@ |
|||||
|
<script setup> |
||||
|
import { ref, onMounted, reactive, computed } from "vue"; |
||||
|
import { ElMessage } from "element-plus"; |
||||
|
import axios from "axios"; |
||||
|
import { useRouter } from "vue-router"; |
||||
|
import { VscGlobe } from "vue-icons-plus/vsc"; |
||||
|
|
||||
|
const router = useRouter(); // 获取路由实例 |
||||
|
const form = ref({ name: "", password: "" }); |
||||
|
//调用方法 |
||||
|
const login = async function () { |
||||
|
try { |
||||
|
const result = await axios.post( |
||||
|
"http://192.168.8.93:10070/admin/login", |
||||
|
form.value |
||||
|
); |
||||
|
if (result.data.code == 200) { |
||||
|
localStorage.setItem("token", result.data.msg); |
||||
|
router.push("/"); |
||||
|
ElMessage.success("登录成功"); |
||||
|
console.log("请求成功", result); |
||||
|
} else { |
||||
|
form.value.password = ""; |
||||
|
form.value.username = ""; |
||||
|
ElMessage.error(result.data.msg); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
ElMessage.error(result.data.msg); |
||||
|
// 在这里可以处理错误逻辑,比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-row class="login-page"> |
||||
|
<img |
||||
|
:span="12" |
||||
|
src="../assets/background.jpg" |
||||
|
alt="logo" |
||||
|
class="bg" |
||||
|
fit="fit" |
||||
|
/> |
||||
|
<el-col :span="6" :offset="3" class="form"> |
||||
|
<!-- 登录表单 --> |
||||
|
<el-form |
||||
|
:model="form" |
||||
|
size="large" |
||||
|
autocomplete="off" |
||||
|
@keyup.enter.native="login()" |
||||
|
> |
||||
|
<el-form-item> |
||||
|
<h1 style="color: #409eff">金币系统登录</h1> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input |
||||
|
v-model="form.username" |
||||
|
placeholder="请输入用户名" |
||||
|
></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
v-model="form.password" |
||||
|
type="password" |
||||
|
placeholder="请输入密码" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item class="flex"> </el-form-item> |
||||
|
<!-- 登录按钮 --> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
class="button" |
||||
|
type="primary" |
||||
|
auto-insert-space |
||||
|
@click="login()" |
||||
|
>登录</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</template> |
||||
|
<style scoped> |
||||
|
.bg { |
||||
|
border-radius: 0 20px 20px 0; |
||||
|
height: 100vh; |
||||
|
width: 50%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.background { |
||||
|
color: #fffdfd; |
||||
|
text-align: center; |
||||
|
font-size: 24px; |
||||
|
background-color: #08193d; |
||||
|
} |
||||
|
.form { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
user-select: none; |
||||
|
|
||||
|
.title { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.flex { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* .box { |
||||
|
padding: 20px; |
||||
|
border-radius: 10px; |
||||
|
background-color: #fff; |
||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
} */ |
||||
|
</style> |
@ -1,203 +1,329 @@ |
|||||
<script setup> |
<script setup> |
||||
import { ref, onMounted, reactive, computed } from "vue"; |
import { ref, onMounted, reactive, computed } from "vue"; |
||||
import ElementPlus from "element-plus"; |
import ElementPlus from "element-plus"; |
||||
import axios from 'axios'; |
|
||||
|
import axios from "axios"; |
||||
|
import { ta } from "element-plus/es/locales.mjs"; |
||||
|
import API from "../../api/index.js"; |
||||
|
|
||||
// 充值明细表格 |
// 充值明细表格 |
||||
const tableData = ref([]); |
const tableData = ref([]); |
||||
|
// 计算用户各金币总数的不分页对象 |
||||
|
const tableAllData = ref([]); |
||||
|
// 各金币总数 |
||||
|
const rechargeCoin = ref(0); |
||||
|
const freeCoin = ref(0); |
||||
|
const taskCoin = ref(0); |
||||
// 搜索=========================================== |
// 搜索=========================================== |
||||
|
//分页总条目 |
||||
|
const total = ref(100); |
||||
|
// 搜索对象时间 |
||||
|
const getTime = ref([]); |
||||
// 搜索detail |
// 搜索detail |
||||
const detail = ref({}); |
const detail = ref({}); |
||||
|
// 不分页的搜索对象 |
||||
|
const getAllObj = ref({}); |
||||
// 搜索对象 |
// 搜索对象 |
||||
const getObj = ref({ |
const getObj = ref({ |
||||
pageNum: 1, |
|
||||
pageSize: 5, |
|
||||
|
pageNum: 1, |
||||
|
pageSize: 5, |
||||
}); |
}); |
||||
//分页总条目 |
|
||||
const total = ref(100); |
|
||||
// 搜索对象时间 |
|
||||
const getTime = ref([]); |
|
||||
|
|
||||
// 支付方式选项 |
// 支付方式选项 |
||||
const updateType = [ |
const updateType = [ |
||||
{ |
|
||||
value: '充值', |
|
||||
label: '充值', |
|
||||
}, |
|
||||
{ |
|
||||
value: '消费', |
|
||||
label: '消费', |
|
||||
}, |
|
||||
{ |
|
||||
value: '退款', |
|
||||
label: '退款', |
|
||||
}, |
|
||||
] |
|
||||
|
{ |
||||
|
value: "充值", |
||||
|
label: "充值", |
||||
|
}, |
||||
|
{ |
||||
|
value: "消费", |
||||
|
label: "消费", |
||||
|
}, |
||||
|
{ |
||||
|
value: "退款", |
||||
|
label: "退款", |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
//表格高度 |
//表格高度 |
||||
const tableHeight = computed(function () { |
const tableHeight = computed(function () { |
||||
return (getObj.value.pageSize + 2) * 60 + 'px'; |
|
||||
|
return getObj.value.pageSize * 50 + "px"; |
||||
}); |
}); |
||||
|
|
||||
|
|
||||
// 方法 |
// 方法 |
||||
// 搜索=========================================================================== |
// 搜索=========================================================================== |
||||
// 搜索方法 |
// 搜索方法 |
||||
const get = async function (val) { |
const get = async function (val) { |
||||
try { |
|
||||
// 搜索参数页码赋值 |
|
||||
if (typeof val === 'number') { |
|
||||
getObj.value.pageNum = val; |
|
||||
} |
|
||||
// 搜索参数时间赋值 |
|
||||
if (getTime.value != null) { |
|
||||
if (getTime.value.startDate != '' && getTime.value.endDate != '') { |
|
||||
detail.value.startDate = getTime.value[0]; |
|
||||
detail.value.endDate = getTime.value[1]; |
|
||||
} |
|
||||
} else { |
|
||||
detail.value.startDate = ''; |
|
||||
detail.value.endDate = ''; |
|
||||
} |
|
||||
console.log('搜索参数', getObj.value); |
|
||||
// 发送POST请求 |
|
||||
const result = await axios.post('http://192.168.8.93:10040/detail', { ...getObj.value, detail: { ...detail.value } }); |
|
||||
|
|
||||
// 将响应结果存储到响应式数据中 |
|
||||
console.log('请求成功', result); |
|
||||
// 存储表格数据 |
|
||||
tableData.value = result.data.data.list; |
|
||||
console.log('tableData', tableData.value); |
|
||||
// 存储分页总数 |
|
||||
total.value = result.data.data.total; |
|
||||
console.log('total', total.value); |
|
||||
} catch (error) { |
|
||||
console.log('请求失败', error); |
|
||||
// 在这里可以处理错误逻辑,比如显示错误提示等 |
|
||||
|
try { |
||||
|
// 搜索参数页码赋值 |
||||
|
if (typeof val === "number") { |
||||
|
getObj.value.pageNum = val; |
||||
} |
} |
||||
} |
|
||||
|
// 搜索参数时间赋值 |
||||
|
if (getTime.value != null) { |
||||
|
if (getTime.value.startDate != "" && getTime.value.endDate != "") { |
||||
|
detail.value.startDate = getTime.value[0]; |
||||
|
detail.value.endDate = getTime.value[1]; |
||||
|
} |
||||
|
} else { |
||||
|
detail.value.startDate = ""; |
||||
|
detail.value.endDate = ""; |
||||
|
} |
||||
|
console.log("搜索参数", getObj.value); |
||||
|
// 发送POST请求 |
||||
|
const result = await API.post("http://192.168.8.93:10040/detail", { |
||||
|
...getObj.value, |
||||
|
detail: { ...detail.value }, |
||||
|
}); |
||||
|
const result2 = await API.post("http://192.168.8.93:10040/detail", { |
||||
|
...getAllObj.value, |
||||
|
detail: { ...detail.value }, |
||||
|
}); |
||||
|
// 将响应结果存储到响应式数据中 |
||||
|
console.log("请求成功", result); |
||||
|
console.log("请求成功2", result2); |
||||
|
// 存储表格数据 |
||||
|
tableData.value = result.data.list; |
||||
|
console.log("tableData", tableData.value); |
||||
|
tableAllData.value = result2.data; |
||||
|
console.log("tableAllData", tableAllData.value); |
||||
|
// 存储分页总数 |
||||
|
total.value = result.data.total; |
||||
|
console.log("total", total.value); |
||||
|
// 计算各金币总数 |
||||
|
rechargeCoin.value = tableAllData.value.reduce( |
||||
|
(pre, cur) => pre + cur.rechargeCoin, |
||||
|
0 |
||||
|
); |
||||
|
freeCoin.value = tableAllData.value.reduce( |
||||
|
(pre, cur) => pre + cur.freeCoin, |
||||
|
0 |
||||
|
); |
||||
|
taskCoin.value = tableAllData.value.reduce( |
||||
|
(pre, cur) => pre + cur.taskCoin, |
||||
|
0 |
||||
|
); |
||||
|
console.log( |
||||
|
"各金币总数", |
||||
|
rechargeCoin.value, |
||||
|
freeCoin.value, |
||||
|
taskCoin.value |
||||
|
); |
||||
|
} catch (error) { |
||||
|
console.log("请求失败", error); |
||||
|
// 在这里可以处理错误逻辑,比如显示错误提示等 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
// 重置 |
// 重置 |
||||
const reset = function () { |
const reset = function () { |
||||
detail.value.jwcode = ''; |
|
||||
detail.value.updateType = ''; |
|
||||
detail.value.startDate = ''; |
|
||||
detail.value.endDate = ''; |
|
||||
getTime.value = {}; |
|
||||
} |
|
||||
|
detail.value.jwcode = ""; |
||||
|
detail.value.updateType = ""; |
||||
|
detail.value.startDate = ""; |
||||
|
detail.value.endDate = ""; |
||||
|
getTime.value = {}; |
||||
|
}; |
||||
// 今天 |
// 今天 |
||||
const getToday = function () { |
const getToday = function () { |
||||
const today = new Date(); |
|
||||
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); |
|
||||
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
|
||||
getTime.value = [startDate, endDate]; |
|
||||
console.log('getTime', getTime.value); |
|
||||
get(); |
|
||||
} |
|
||||
|
const today = new Date(); |
||||
|
const startDate = new Date( |
||||
|
today.getFullYear(), |
||||
|
today.getMonth(), |
||||
|
today.getDate() |
||||
|
); |
||||
|
const endDate = new Date( |
||||
|
today.getFullYear(), |
||||
|
today.getMonth(), |
||||
|
today.getDate() + 1 |
||||
|
); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log("getTime", getTime.value); |
||||
|
get(); |
||||
|
}; |
||||
// 昨天 |
// 昨天 |
||||
const getYesterday = function () { |
const getYesterday = function () { |
||||
const yesterday = new Date(); |
|
||||
yesterday.setDate(yesterday.getDate() - 1); |
|
||||
const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()); |
|
||||
const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1); |
|
||||
getTime.value = [startDate, endDate]; |
|
||||
console.log('getTime', getTime.value); |
|
||||
get(); |
|
||||
} |
|
||||
|
const yesterday = new Date(); |
||||
|
yesterday.setDate(yesterday.getDate() - 1); |
||||
|
const startDate = new Date( |
||||
|
yesterday.getFullYear(), |
||||
|
yesterday.getMonth(), |
||||
|
yesterday.getDate() |
||||
|
); |
||||
|
const endDate = new Date( |
||||
|
yesterday.getFullYear(), |
||||
|
yesterday.getMonth(), |
||||
|
yesterday.getDate() + 1 |
||||
|
); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log("getTime", getTime.value); |
||||
|
get(); |
||||
|
}; |
||||
// 近7天 |
// 近7天 |
||||
const get7Days = function () { |
const get7Days = function () { |
||||
const today = new Date(); |
|
||||
const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6); |
|
||||
const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); |
|
||||
getTime.value = [startDate, endDate]; |
|
||||
console.log('getTime', getTime.value); |
|
||||
get(); |
|
||||
} |
|
||||
|
|
||||
|
const today = new Date(); |
||||
|
const startDate = new Date( |
||||
|
today.getFullYear(), |
||||
|
today.getMonth(), |
||||
|
today.getDate() - 6 |
||||
|
); |
||||
|
const endDate = new Date( |
||||
|
today.getFullYear(), |
||||
|
today.getMonth(), |
||||
|
today.getDate() + 1 |
||||
|
); |
||||
|
getTime.value = [startDate, endDate]; |
||||
|
console.log("getTime", getTime.value); |
||||
|
get(); |
||||
|
}; |
||||
|
|
||||
// 挂载 |
// 挂载 |
||||
onMounted(async function () { |
onMounted(async function () { |
||||
await get(); |
|
||||
}) |
|
||||
|
|
||||
|
await get(); |
||||
|
}); |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<el-row> |
|
||||
<el-col> |
|
||||
<el-card style="margin-bottom: 20px"> |
|
||||
<div class="head-card"> |
|
||||
<div class="head-card-element"> |
|
||||
<el-text class="mx-1" size="large">精网号:</el-text> |
|
||||
<el-input v-model="detail.jwcode" style="width: 240px" placeholder="请输入精网号" clearable /> |
|
||||
</div> |
|
||||
<div class="head-card-element"> |
|
||||
<el-text class="mx-1" size="large">更新类型:</el-text> |
|
||||
<el-select v-model="detail.updateType" placeholder="请选择更新类型" size="large" style="width: 240px"> |
|
||||
<el-option v-for="item in updateType" :key="item.value" :label="item.label" |
|
||||
:value="item.value" /> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
<div class="head-card-element"> |
|
||||
<el-text class="mx-1" size="large">更新时间:</el-text> |
|
||||
<el-time-picker v-model="getTime" is-range range-separator="至" start-placeholder="起始时间" |
|
||||
end-placeholder="结束时间" /> |
|
||||
</div> |
|
||||
<div class="head-card-btn"> |
|
||||
<el-button @click="reset()">重置</el-button> |
|
||||
<el-button type="primary" @click="get()">查询</el-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<el-row> |
|
||||
<el-col> |
|
||||
<el-card> |
|
||||
<div> |
|
||||
现有金币:免费金币:(),充值金币:(),任务金币:() |
|
||||
</div> |
|
||||
<div> |
|
||||
<el-table :data="tableData" style="width: 100%"> |
|
||||
<el-table-column prop="name" label="姓名" /> |
|
||||
<el-table-column prop="jwcode" label="精网号" /> |
|
||||
<el-table-column prop="area" label="所属地区" /> |
|
||||
<el-table-column prop="gold" label="更新数量"> |
|
||||
<template #default="scope"> |
|
||||
<span>{{ scope.row.rechargeCoin + scope.row.freeCoin + scope.row.taskCoin }}</span> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="updateType" label="更新类型" /> |
|
||||
<el-table-column prop="freeCoin" label="免费金币" /> |
|
||||
<el-table-column prop="rechargeCoin" label="充值金币" /> |
|
||||
<el-table-column prop="taskCoin" label="任务金币" /> |
|
||||
<el-table-column prop="name" label="提交人" /> |
|
||||
<el-table-column prop="createTime" label="更新时间" /> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 分页 --> |
|
||||
<el-pagination background layout="prev, pager, next" :total="total" /> |
|
||||
|
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card style="margin-bottom: 20px"> |
||||
|
<div class="head-card"> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">精网号:</el-text> |
||||
|
<el-input |
||||
|
v-model="detail.jwcode" |
||||
|
style="width: 240px" |
||||
|
placeholder="请输入精网号" |
||||
|
clearable |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">更新类型:</el-text> |
||||
|
<el-select |
||||
|
v-model="detail.updateType" |
||||
|
placeholder="请选择更新类型" |
||||
|
size="large" |
||||
|
style="width: 240px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in updateType" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="head-card-element"> |
||||
|
<el-text class="mx-1" size="large">更新时间:</el-text> |
||||
|
<el-date-picker |
||||
|
v-model="getTime" |
||||
|
type="daterange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="起始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="head-card-btn"> |
||||
|
<el-button @click="reset()">重置</el-button> |
||||
|
<el-button type="primary" @click="get()">查询</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col> |
||||
|
<el-card> |
||||
|
<div> |
||||
|
现有金币:免费金币:{{ freeCoin }},充值金币:{{ |
||||
|
rechargeCoin |
||||
|
}},任务金币:{{ taskCoin }} |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-table :data="tableData" :height="tableHeight" style="width: 100%"> |
||||
|
<el-table-column prop="uname" label="姓名" /> |
||||
|
<el-table-column prop="jwcode" label="精网号" /> |
||||
|
<el-table-column prop="area" label="所属地区" /> |
||||
|
<el-table-column prop="gold" label="更新数量"> |
||||
|
<template #default="scope"> |
||||
|
<span>{{ |
||||
|
scope.row.rechargeCoin + |
||||
|
scope.row.freeCoin + |
||||
|
scope.row.taskCoin |
||||
|
}}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="updateType" label="更新类型" /> |
||||
|
<el-table-column prop="freeCoin" label="免费金币" /> |
||||
|
<el-table-column prop="rechargeCoin" label="充值金币" /> |
||||
|
<el-table-column prop="taskCoin" label="任务金币" /> |
||||
|
<el-table-column prop="name" label="提交人" /> |
||||
|
<el-table-column prop="createTime" label="更新时间" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<!-- 分页 --> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
background |
||||
|
:page-size="getObj.pageSize" |
||||
|
layout="slot" |
||||
|
:total="total" |
||||
|
> |
||||
|
<div>共{{ total }}条,每页</div> |
||||
|
<el-select |
||||
|
v-model="getObj.pageSize" |
||||
|
class="page-size" |
||||
|
@change="get()" |
||||
|
style="width: 80px" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in [5, 6, 7, 8, 9, 10]" |
||||
|
:key="item" |
||||
|
:label="item" |
||||
|
:value="item" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
<div>条</div> |
||||
|
</el-pagination> |
||||
|
<el-pagination |
||||
|
background |
||||
|
layout="prev, pager, next,slot" |
||||
|
:page-size="getObj.pageSize" |
||||
|
:total="total" |
||||
|
:current-page="getObj.pageNum" |
||||
|
@current-change="get" |
||||
|
> |
||||
|
<div>跳至</div> |
||||
|
<el-input |
||||
|
v-model="getObj.pageNum" |
||||
|
style="width: 40px" |
||||
|
@change="checkNumber" |
||||
|
/> |
||||
|
<div>页</div> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
|
||||
.status { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
<style scoped> |
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
} |
||||
|
.status { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
.head-card { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
.head-card { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
.head-card-element { |
|
||||
margin-right: 20px; |
|
||||
} |
|
||||
|
.head-card-element { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
.head-card-btn { |
|
||||
margin-left: auto; |
|
||||
} |
|
||||
</style> |
|
||||
|
.head-card-btn { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
</style> |
1241
vue/gold-system/src/views/workspace/index.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,104 @@ |
|||||
|
<script setup> |
||||
|
import { all } from 'axios'; |
||||
|
import * as echarts from 'echarts'; |
||||
|
import { ref, onMounted, reactive, computed } from "vue"; |
||||
|
import { VscInfo } from 'vue-icons-plus/vsc' |
||||
|
import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6Circle, Bs7Circle, Bs8Circle } from 'vue-icons-plus/bs' |
||||
|
import axios from 'axios'; |
||||
|
|
||||
|
// 变量 |
||||
|
const option4Data = ref([]); |
||||
|
const a1=ref(1000); |
||||
|
const a2=ref(2000); |
||||
|
const a3=ref(3000); |
||||
|
const a4=ref(4000); |
||||
|
onMounted(async function () { |
||||
|
option4Data.value = [ |
||||
|
{ value: a1.value, name: '1000金币' }, |
||||
|
{ value: a2.value, name: '2000金币' }, |
||||
|
{ value: a3.value, name: '3000金币' }, |
||||
|
{ value: a4.value, name: '4000金币' }, |
||||
|
]; |
||||
|
// 第一个柱状图 基于准备好的dom,初始化echarts实例 |
||||
|
var rechargeBar = echarts.init(document.getElementById('main')); |
||||
|
|
||||
|
const option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
bottom: '-2%', |
||||
|
left: 'center', |
||||
|
orient: 'vertical' |
||||
|
}, |
||||
|
grid: { |
||||
|
top: '0%', // 设置图表距离容器顶部的距离为10%,使饼图上移 |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '全年累计消耗金币数(个)\n10000', |
||||
|
type: 'pie', |
||||
|
radius: ['80%', '60%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'center', |
||||
|
formatter: '{a}', |
||||
|
fontSize: 15, |
||||
|
fontWeight: 'bold' |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: option4Data.value, |
||||
|
color: ['#57a5ff', '#7f29ff', '#f2d113'] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
rechargeBar.setOption(option); |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div>zzz</div> |
||||
|
<div id="main" style="width: 600px;height:400px;"></div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.comparedWithYesterday { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.ranking-item { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.ranking-header { |
||||
|
margin-bottom: 10px; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.goldCategory { |
||||
|
margin-right: 20px; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.bar { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.pie { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.el-row { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.el-radio-button { |
||||
|
border: 1px solid grey; |
||||
|
} |
||||
|
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue