1、增加滚动看板
This commit is contained in:
lankuixing
parent
0934b414cd
commit
d2c606ce1b
|
|
@ -17,60 +17,70 @@
|
|||
</div>
|
||||
</div>
|
||||
<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 class="data-value" :style="`width:${tableItemWidthList[2]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.SO2Value}${item.SO2Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.COValue}${item.COUnit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.NOValue}${item.NOUnit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[2]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.SO2Value}${item.SO2Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.O3Value}${item.O3Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.NOValue}${item.NOUnit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[5]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.PM10Value}${item.PM10Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
|
||||
<div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.O3Value}${item.O3Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
|
||||
|
||||
</div>
|
||||
</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 class="data-value" :style="`width:${tableItemWidthList[5]}%`">
|
||||
<div class="_value">
|
||||
{{ `${item.PM10Value}${item.PM10Unit}` }}
|
||||
</div>
|
||||
<div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
|
||||
|
||||
</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>
|
||||
</vue-seamless-scroll>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,8 +88,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
|
||||
export default {
|
||||
name: "CheckData",
|
||||
components: {vueSeamlessScroll},
|
||||
data() {
|
||||
return {
|
||||
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: {
|
||||
//判断数值是上升还是下降
|
||||
getOddsRatioIcon(val, valType) {
|
||||
|
|
@ -305,6 +332,7 @@ export default {
|
|||
flex: 1;
|
||||
padding: 30px 20px 0 20px;
|
||||
height: 0;
|
||||
|
||||
.table-info {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -329,7 +357,11 @@ export default {
|
|||
|
||||
.table-body {
|
||||
height: calc(100% - 77px);
|
||||
overflow-y: auto;
|
||||
|
||||
.seamless-scroll {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-item-body {
|
||||
height: 77px;
|
||||
|
|
@ -380,6 +412,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
|
|
@ -387,12 +420,12 @@ export default {
|
|||
|
||||
::-webkit-scrollbar-thumb {
|
||||
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);;
|
||||
}
|
||||
|
||||
::-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;
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue