<template>
|
<div class="data-storage">
|
<div class="data-storage__header">
|
<div class="text">
|
<img
|
class="img"
|
src="@/assets/img/Screen/cunchu.png"
|
alt=""
|
srcset=""
|
/>
|
<div class="title">共存储文件数量</div>
|
</div>
|
<div class="num">
|
<dv-digital-flop :config="config1" style="width: 70px; height: 20px" />
|
<!-- <div class="value">5</div> -->
|
</div>
|
</div>
|
<div class="data-storage__content">
|
<ul class="contentTitle">
|
<li class="title">编号</li>
|
<li class="name">名称</li>
|
<li class="num">数量</li>
|
<li class="size">文件大小(MB)</li>
|
</ul>
|
<div class="scroolData">
|
<vue-seamless-scroll
|
:data="tableData"
|
class="ClassScroll"
|
:class-option="defaultOption"
|
>
|
<ul class="item">
|
<li v-for="(item, index) in tableData" :key="index">
|
<span class="title">
|
<div>{{ item.index }}</div></span
|
>
|
<span class="name" :title="item.name">{{
|
item.name.substring(0, 15)
|
}}</span>
|
<span class="num">{{ item.num || 0 }}</span>
|
<span class="size">{{ item.size || 0 }}</span>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</div>
|
|
<!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
|
<!-- <el-scrollbar class="scrollbar">
|
<el-table
|
:data="tableData"
|
:row-style="{ background: 'rgba(135,180,248,0.10)' }"
|
:cell-style="{ background: 'rgba(135,180,248,0.10)' }"
|
:header-row-style="{
|
background: 'rgba(57,128,236,0.29)',
|
color: '#fff',
|
}"
|
:header-cell-style="{
|
background: 'rgba(57,128,236,0.29)',
|
color: '#fff',
|
}"
|
>
|
<el-table-column prop="index" label="编号" width="50">
|
<template slot-scope="scope">
|
<div
|
style="
|
background: rgba(180, 188, 235, 0.25);
|
text-align: center;
|
"
|
>
|
{{ scope.row.index }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" prop="name" label="名称">
|
<template slot-scope="scope">
|
<div
|
style="
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
"
|
:title="scope.row.name"
|
>
|
{{ scope.row.name }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="num" label="文件数" width="70">
|
</el-table-column>
|
</el-table>
|
</el-scrollbar> -->
|
</template>
|
|
<script>
|
import vueSeamlessScroll from "vue-seamless-scroll"
|
import { countDataStorage, countLargeCategories } from "@/api/screen.js"
|
export default {
|
components: {
|
vueSeamlessScroll,
|
},
|
data() {
|
return {
|
tableData: [
|
|
],
|
config: {
|
header: ["编号", "名称", "文件数"],
|
data: [
|
|
],
|
columnWidth: [40, 300, 50],
|
align: ["center"],
|
carousel: "page",
|
},
|
config1: {
|
number: [0],
|
content: "{nt}个",
|
style: {
|
fontSize: 12,
|
fill: "#00baff",
|
},
|
},
|
}
|
},
|
computed: {
|
defaultOption() {
|
return {
|
step: 0.2, // 数值越大速度滚动越快
|
limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.dataList.length
|
hoverStop: true, // 是否开启鼠标悬停stop
|
direction: 1, // 0向下 1向上 2向左 3向右
|
openWatch: true, // 开启数据实时监控刷新dom
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
}
|
},
|
},
|
|
created() {
|
this.initTable()
|
},
|
methods: {
|
async initTable() {
|
const res = await countLargeCategories()
|
if (res.code == 200) {
|
let count = 0
|
this.tableData = res.result.map((item, i) => {
|
count += item.count
|
return {
|
index: i + 1,
|
name: item.name,
|
num: item.count,
|
sizes: item.sizes,
|
}
|
})
|
this.config1.number = [count]
|
this.config1 = {
|
...this.config1,
|
}
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.data-storage {
|
height: calc(100% - 30px);
|
width: 100%;
|
}
|
|
.data-storage__header {
|
height: 40px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
|
.text {
|
display: flex;
|
align-items: center;
|
}
|
|
.title {
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
color: #ffffff;
|
}
|
|
.img {
|
margin-right: 4px;
|
width: 16px;
|
height: 16px;
|
}
|
|
.num {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.data-storage__content {
|
height: calc(100% - 40px);
|
width: 100%;
|
|
.contentTitle {
|
height: 40px;
|
width: 100%;
|
display: flex;
|
background-color: rgba(52, 78, 147, 0.5);
|
flex-direction: row;
|
|
li {
|
align-items: center;
|
justify-content: space-around;
|
color: #ffffff;
|
}
|
|
.title {
|
width: 15%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.name {
|
width: 60%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.num {
|
width: 25%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
|
.scroolData {
|
height: calc(100% - 40px);
|
width: 100%;
|
overflow: hidden;
|
}
|
.ClassScroll {
|
height: 100%;
|
width: 100%;
|
|
.item {
|
width: 100%;
|
height: 100%;
|
color: #ffffff;
|
|
li {
|
height: 40px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
|
.title {
|
width: 15%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
div {
|
height: 20px;
|
width: 20px;
|
background-color: #495477;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.name {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.num {
|
width: 25%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.size {
|
width: 25%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
}
|
|
// .data-storage {
|
// margin: 10px;
|
// width: 377px;
|
|
// &__header {
|
// margin-bottom: 10px;
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-between;
|
// height: 20px;
|
// width: 340px;
|
// box-sizing: border-box;
|
|
// .text {
|
// display: flex;
|
// align-items: center;
|
// }
|
|
// .title {
|
// font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
// color: #ffffff;
|
// }
|
|
// .img {
|
// margin-right: 4px;
|
|
// width: 16px;
|
// height: 16px;
|
// }
|
|
// .value {
|
// text-align: center;
|
// color: #ffffff;
|
// width: 16px;
|
// height: 20px;
|
// background: url("~@/assets/img/Screen/numBg.png");
|
// background-size: 100% 100%;
|
// }
|
// }
|
|
// &__content {
|
// width: 95%;
|
// height: 220px;
|
// }
|
// }
|
//
|
</style>
|
|
<style lang="scss">
|
// .data-storage {
|
// .index-wrap {
|
// margin: 0 auto;
|
// width: 14px;
|
// height: 14px;
|
// background: rgba(180, 188, 235, 0.25);
|
// }
|
|
// .scrollbar {
|
// width: 100%;
|
// overflow-x: hidden;
|
// height: 200px;
|
|
// .el-scrollbar__wrap {
|
// overflow-x: hidden;
|
// }
|
|
// .el-table {
|
// height: 100%;
|
// width: 100%;
|
// background-color: transparent;
|
// color: #fff;
|
// }
|
|
// .el-table th.el-table__cell.is-leaf,
|
// .el-table td.el-table__cell {
|
// border: none;
|
// }
|
|
// .el-table--group::after,
|
// .el-table--border::after,
|
// .el-table::before {
|
// border: none;
|
// }
|
|
// .el-table::before {
|
// height: 0;
|
// }
|
// }
|
// }
|
</style>
|
