hongxilin
4 months ago
4 changed files with 160 additions and 117 deletions
-
2vue/gold-system/src/router/index.js
-
2vue/gold-system/src/views/login.vue
-
92vue/gold-system/src/views/recharge/addRecharge.vue
-
181vue/gold-system/src/views/z.vue
@ -1,107 +1,130 @@ |
|||
<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 () { |
|||
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> |
|||
|
|||
<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 id="main" style="width: 600px;height:400px;"></div> |
|||
</template> |
|||
|
|||
<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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue