From f6769a1af13e187541eed4326e69916f9a7dee01 Mon Sep 17 00:00:00 2001
From: wulitaotao <547306458@qq.com>
Date: 星期一, 27 二月 2023 15:49:20 +0800
Subject: [PATCH] 修改左下角滚动，进入视角不旋转
---
src/components/chart/DataStorage.vue | 345 +++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 270 insertions(+), 75 deletions(-)
diff --git a/src/components/chart/DataStorage.vue b/src/components/chart/DataStorage.vue
index c97ec7c..f42e913 100644
--- a/src/components/chart/DataStorage.vue
+++ b/src/components/chart/DataStorage.vue
@@ -2,12 +2,7 @@
<div class="data-storage">
<div class="data-storage__header">
<div class="text">
- <img
- class="img"
- src="@/assets/img/Screen/cunchu.png"
- alt=""
- srcset=""
- />
+ <img class="img" src="@/assets/img/Screen/cunchu.png" alt="" srcset="" />
<div class="title">鍏卞瓨鍌ㄦ枃浠舵暟閲�</div>
</div>
<div class="num">
@@ -16,8 +11,30 @@
</div>
</div>
<div class="data-storage__content">
- <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
- <el-scrollbar class="scrollbar">
+ <ul class="contentTitle">
+ <li class="title">缂栧彿</li>
+ <li class="name">鍚嶇О</li>
+ <li class="num">鏂囦欢鏁�</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 }}</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)' }"
@@ -60,14 +77,16 @@
<el-table-column prop="num" label="鏂囦欢鏁�" width="70">
</el-table-column>
</el-table>
- </el-scrollbar>
- </div>
- </div>
+ </el-scrollbar> -->
</template>
<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
import { countDataStorage } from "@/api/screen.js"
export default {
+ components: {
+ vueSeamlessScroll
+ },
data() {
return {
tableData: [
@@ -120,6 +139,22 @@
},
}
},
+ computed: {
+ defaultOption() {
+ return {
+ step: 0.2, // 鏁板�艰秺澶ч�熷害婊氬姩瓒婂揩
+ limitMoveNum: this.tableData.length, // 寮�濮嬫棤缂濇粴鍔ㄧ殑鏁版嵁閲� this.dataList.length
+ hoverStop: true, // 鏄惁寮�鍚紶鏍囨偓鍋渟top
+ direction: 1, // 0鍚戜笅 1鍚戜笂 2鍚戝乏 3鍚戝彸
+ openWatch: true, // 寮�鍚暟鎹疄鏃剁洃鎺у埛鏂癲om
+ singleHeight: 0, // 鍗曟杩愬姩鍋滄鐨勯珮搴�(榛樿鍊�0鏄棤缂濅笉鍋滄鐨勬粴鍔�) direction => 0/1
+ singleWidth: 0, // 鍗曟杩愬姩鍋滄鐨勫搴�(榛樿鍊�0鏄棤缂濅笉鍋滄鐨勬粴鍔�) direction => 2/3
+ waitTime: 1000, // 鍗曟杩愬姩鍋滄鐨勬椂闂�(榛樿鍊�1000ms)
+ };
+ },
+ },
+
+
created() {
this.initTable()
},
@@ -148,79 +183,239 @@
<style lang="scss" scoped>
.data-storage {
- margin: 10px;
- width: 377px;
- &__header {
- margin-bottom: 10px;
+
+ 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;
- justify-content: space-between;
- height: 20px;
- width: 340px;
- box-sizing: border-box;
- .text {
+ }
+
+ .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,.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;
}
- .title {
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
- color: #ffffff;
- }
- .img {
- margin-right: 4px;
- width: 16px;
- height: 16px;
+ .name {
+ width: 60%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
- .value {
- text-align: center;
- color: #ffffff;
- width: 16px;
- height: 20px;
- background: url("~@/assets/img/Screen/numBg.png");
- background-size: 100% 100%;
+
+ .num {
+ width: 25%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
+
+
}
- &__content {
- width: 95%;
- height: 220px;
- }
+
+
}
-</style>
+
+.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: 60%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .num {
+ 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>
+// .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>
--
Gitblit v1.9.3