yanghongwei
/
lg_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、增加滚动看板

This commit is contained in:
lankuixing 2024-02-25 19:12:49 +08:00
parent 0934b414cd
commit d2c606ce1b
1 changed files with 77 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
components/CheckData.vue
View File

@ -17,60 +17,70 @@
</div> </div>
</div> </div>
<div class="table-body"> <div class="table-body">
<div class="table-item-body" v-for="item of dataSource">
<div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
item.pointName
}}
</div>
<div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
<div class="_value">
{{ `${item.COValue}${item.COUnit}` }}
</div>
<div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">
<vue-seamless-scroll
v-if="dataSource.length"
ref="vueSeamless"
:data="dataSource"
class="seamless-scroll"
:class-option="defaultOption"
>
<div class="table-item-body" v-for="item of dataSource">
<div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
item.pointName
}}
</div> </div>
</div> <div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
<div class="data-value" :style="`width:${tableItemWidthList[2]}%`"> <div class="_value">
<div class="_value"> {{ `${item.COValue}${item.COUnit}` }}
{{ `${item.SO2Value}${item.SO2Unit}` }} </div>
</div> <div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">
<div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
</div>
</div> </div>
</div> <div class="data-value" :style="`width:${tableItemWidthList[2]}%`">
<div class="data-value" :style="`width:${tableItemWidthList[3]}%`"> <div class="_value">
<div class="_value"> {{ `${item.SO2Value}${item.SO2Unit}` }}
{{ `${item.NOValue}${item.NOUnit}` }} </div>
</div> <div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
<div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
</div>
</div> </div>
</div> <div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
<div class="data-value" :style="`width:${tableItemWidthList[4]}%`"> <div class="_value">
<div class="_value"> {{ `${item.NOValue}${item.NOUnit}` }}
{{ `${item.O3Value}${item.O3Unit}` }} </div>
</div> <div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
<div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
</div>
</div> </div>
</div> <div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
<div class="data-value" :style="`width:${tableItemWidthList[5]}%`"> <div class="_value">
<div class="_value"> {{ `${item.O3Value}${item.O3Unit}` }}
{{ `${item.PM10Value}${item.PM10Unit}` }} </div>
</div> <div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
<div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
</div>
</div> </div>
</div> <div class="data-value" :style="`width:${tableItemWidthList[5]}%`">
<div class="data-value" :style="`width:${tableItemWidthList[6]}%`"> <div class="_value">
<div class="_value"> {{ `${item.PM10Value}${item.PM10Unit}` }}
{{ `${item.PM25Value}${item.PM25Unit}` }} </div>
</div> <div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
<div :class="getOddsRatioIcon(item.PM25Value,'PM25StandardValue')">
</div>
</div>
<div class="data-value" :style="`width:${tableItemWidthList[6]}%`">
<div class="_value">
{{ `${item.PM25Value}${item.PM25Unit}` }}
</div>
<div :class="getOddsRatioIcon(item.PM25Value,'PM25StandardValue')">
</div>
</div> </div>
</div> </div>
</div> </vue-seamless-scroll>
</div> </div>
</div> </div>
</div> </div>
@ -78,8 +88,11 @@
</template> </template>
<script> <script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default { export default {
name: "CheckData", name: "CheckData",
components: {vueSeamlessScroll},
data() { data() {
return { return {
title: '实时检查数据', title: '实时检查数据',
@ -262,6 +275,20 @@ export default {
] ]
} }
}, },
computed: {
defaultOption() {
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 9, // 开始无缝滚动的数据量 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)
}
},
},
methods: { methods: {
//判断数值是上升还是下降 //判断数值是上升还是下降
getOddsRatioIcon(val, valType) { getOddsRatioIcon(val, valType) {
@ -305,6 +332,7 @@ export default {
flex: 1; flex: 1;
padding: 30px 20px 0 20px; padding: 30px 20px 0 20px;
height: 0; height: 0;
.table-info { .table-info {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -329,7 +357,11 @@ export default {
.table-body { .table-body {
height: calc(100% - 77px); height: calc(100% - 77px);
overflow-y: auto;
.seamless-scroll {
height: 100%;
overflow: hidden;
}
.table-item-body { .table-item-body {
height: 77px; height: 77px;
@ -380,6 +412,7 @@ export default {
} }
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 4px; width: 4px;
height: 4px; height: 4px;
@ -387,12 +420,12 @@ export default {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background-color: rgba(21, 77, 160, 0.20);; background-color: rgba(21, 77, 160, 0.20);;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 5px; border-radius: 5px;
background-color: #d3dce6; background-color: #d3dce6;
} }