donghaolin
4 months ago
15 changed files with 362 additions and 203 deletions
-
2vue/gold-system/src/router/index.js
-
2vue/gold-system/src/views/audit/rechargeAudit.vue
-
2vue/gold-system/src/views/audit/refundAudit.vue
-
6vue/gold-system/src/views/consume/addConsume.vue
-
2vue/gold-system/src/views/consume/allConsume.vue
-
2vue/gold-system/src/views/login.vue
-
317vue/gold-system/src/views/recharge/addRecharge.vue
-
2vue/gold-system/src/views/recharge/adminRecharge.vue
-
2vue/gold-system/src/views/recharge/allRecharge.vue
-
6vue/gold-system/src/views/refund/addRefund.vue
-
2vue/gold-system/src/views/refund/allRefund.vue
-
13vue/gold-system/src/views/usergold/index.vue
-
2vue/gold-system/src/views/usergoldInfo/index.vue
-
24vue/gold-system/src/views/workspace/index.vue
-
181vue/gold-system/src/views/z.vue
@ -1,107 +1,130 @@ |
|||||
<script setup> |
<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'; |
|
||||
|
import { ref, onMounted, reactive, computed, nextTick } from "vue"; |
||||
|
|
||||
// 变量 |
// 变量 |
||||
const option4Data = ref([]); |
|
||||
const a1=ref(1000); |
|
||||
const a2=ref(2000); |
|
||||
const a3=ref(3000); |
|
||||
const a4=ref(4000); |
|
||||
|
let allData = [] |
||||
|
let tableData = [] |
||||
|
let elTableHeight = 0 //el-table的高度 |
||||
|
let theadHeight = 0 //表头的高度 |
||||
|
let contentHeight = 0 //主要内容高度 |
||||
|
let showRowCount = 0 //一共能显示多少行 |
||||
|
let falseBox = 0 //后边假盒子的高度 |
||||
|
let scollBoxHeight = 0 //假滚动条的高度 |
||||
|
let scrollTopRowCount = 0 //一共向上滚动了多少行 |
||||
|
|
||||
|
// 方法 |
||||
onMounted(async function () { |
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); |
|
||||
}) |
|
||||
|
allData = []; |
||||
|
for (let i = 0; i < 10000; i++) { |
||||
|
allData.push({ |
||||
|
name: '张三' + i, |
||||
|
age: 20 + i, |
||||
|
address: '北京市海淀区' + i, |
||||
|
salary: 50000 + i, |
||||
|
date: '2022-01-01' |
||||
|
}) |
||||
|
} |
||||
|
scollBoxHeight = 45 * allData.length + 45; //多加一行，要不然滚动到底差一行 |
||||
|
await new Promise(resolve => setTimeout(resolve, 100)); // 人为创建一个小延迟 |
||||
|
nextTick(() => { |
||||
|
elTableHeight = document.querySelector('.table-box .el-table').offsetHeight; |
||||
|
theadHeight = document.querySelector('.table-box .el-table__header-wrapper').offsetHeight; |
||||
|
contentHeight = elTableHeight - theadHeight; |
||||
|
showRowCount = Math.floor(contentHeight / 45); |
||||
|
// 获取默认显示的前 <showRowCount> 条 |
||||
|
tableData = JSON.parse(JSON.stringify(allData)).splice(0, showRowCount); |
||||
|
}) |
||||
|
falseBox = document.querySelector('.false-box'); |
||||
|
falseBox.addEventListener('scroll', function (e) { |
||||
|
scrollTopRowCount = Math.ceil(e.target.scrollTop / 45); |
||||
|
// 获取从索引<scrollTopRowCount> 开始 <showRowCount> 条 |
||||
|
tableData = JSON.parse(JSON.stringify(allData)).splice(scrollTopRowCount, showRowCount); |
||||
|
}); |
||||
|
console.log(allData) |
||||
|
console.log(elTableHeight) |
||||
|
console.log(theadHeight) |
||||
|
console.log(contentHeight) |
||||
|
console.log(showRowCount) |
||||
|
console.log(falseBox) |
||||
|
console.log(scollBoxHeight) |
||||
|
console.log(tableData) |
||||
|
|
||||
const imgrule = ref('..\assets\韩信.png'); |
|
||||
|
}) |
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<div> |
|
||||
<el-image :preview-src-list="[imgrule]" preview-teleported="true" src="..\assets\动漫美女.png" alt="美女" style="width: 50px; height: 50px" /> |
|
||||
|
<div class="box" style="width: 1000px; height: 500px; overflow: hidden; position: relative;"> |
||||
|
<!-- false-box这是一个用来显示滚动条的方法 --> |
||||
|
<div class="false-box" style="width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; overflow: auto;"> |
||||
|
<div class="scroll-box" :style="{ 'height': scollBoxHeight + 'px' }"> |
||||
|
<!-- scroll-box是用来撑起盒子的方法 --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="table-box"> |
||||
|
<el-table :data="tableData" style="width: 100%"> |
||||
|
<el-table-column prop="name" label="姓名" width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="age" label="年龄" width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="address" label="地址"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="salary" label="薪资" width="180"> |
||||
|
|
||||
|
</el-table-column> |
||||
|
<el-table-column prop="date" label="日期" width="180"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
|
||||
|
</el-table> |
||||
|
</div> |
||||
</div> |
</div> |
||||
<div id="main" style="width: 600px;height:400px;"></div> |
|
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
.comparedWithYesterday { |
|
||||
display: flex; |
|
||||
|
.box { |
||||
|
width: 1000px; |
||||
|
height: 500px; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
} |
} |
||||
|
|
||||
.ranking-item { |
|
||||
margin-bottom: 10px; |
|
||||
|
.box .false-box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
top: 0%; |
||||
|
left: 0%; |
||||
|
overflow: auto; |
||||
} |
} |
||||
|
|
||||
.ranking-header { |
|
||||
margin-bottom: 10px; |
|
||||
display: flex; |
|
||||
|
.box .false-box .scroll-box { |
||||
|
width: 100%; |
||||
|
height: 1000px; |
||||
|
position: absolute; |
||||
|
top: 0%; |
||||
|
left: 0%; |
||||
} |
} |
||||
|
|
||||
.goldCategory { |
|
||||
margin-right: 20px; |
|
||||
display: flex; |
|
||||
|
.box .table-box { |
||||
|
width: calc(100% - 20px); |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
top: 0%; |
||||
|
left: 0%; |
||||
} |
} |
||||
|
|
||||
.bar { |
|
||||
display: flex; |
|
||||
} |
|
||||
|
|
||||
.pie { |
|
||||
display: flex; |
|
||||
|
::v-deep .el-table { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
} |
} |
||||
|
|
||||
.el-row { |
|
||||
margin-bottom: 20px; |
|
||||
|
.el-table .el-table__row { |
||||
|
height: 45px; |
||||
} |
} |
||||
|
|
||||
.el-radio-button { |
|
||||
border: 1px solid grey; |
|
||||
|
.el-table .el-table__row td { |
||||
|
padding: 0px |
||||
} |
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue