Skip to content

山
山西华远大屏
Commit 07e4ac3c authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add: 隧道

parent ec0dd42d
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 101 deletions
src/components/BigScreen/SuidaoMonitor.vue
View file @ 07e4ac3c
<template>
<div class="abs-full title2">
<div class="m-tt">
<h4>隧道监测</h4>
</div>
<div class="m-body">
<div class="bottom bottom-suidao">
<dl class="scrolling1">
<dt>
<span>检测项</span> <span>最近更新时间</span>
<span>监测数据</span>
</dt>
<div class="list-content">
<dd v-for="(item, index) in dataList" :key="index" class="suidao-item">
<span>{{ item.monName }}</span>
<span>{{ item.monDate }}</span>
<span>{{ item.monNumber }}</span>
</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="m-tt">
<h4>隧道监测</h4>
</div>
<div class="m-body">
<div class="bottom bottom-suidao">
<div class="dt">
<span>监测项</span> <span>最近更新时间</span> <span>监测数据</span>
</div>
<dl class="scrolling1">
<!-- <dt>
<span>检测项</span> <span>最近更新时间</span>
<span>监测数据</span>
</dt> -->
<div class="list-wrap">
<div class="list-content">
<dd
v-for="(item, index) in 5"
:key="index"
class="suidao-item"
>
<span>{{ item.monName }}</span>
<span>{{ item.monDate }}</span>
<span>{{ item.monNumber }}</span>
</dd>
</div>
</div>
</dl>
</div>
</div>
</div>
</template>
<script>
......@@ -48,12 +57,12 @@ export default {
data() {
return {
dataList: [],
// 应急预案
interval4yuan: null,
scrollPosition4yuan: 0,
direction4yuan: 1, // 1 for down, -1 for up
step4yuan: 1, // 每次滚动的像素
intervalTime4yuan: 40, // 每次滚动的时间间隔（ms）
// 应急预案
interval4suidao: null,
scrollPosition4suidao: 0,
direction4suidao: 1, // 1 for down, -1 for up
step4suidao: 1, // 每次滚动的像素
intervalTime4suidao: 40, // 每次滚动的时间间隔（ms）
};
},
......@@ -62,15 +71,15 @@ export default {
mounted() {
this.getList();
this.startScrolling(
".bottom-suidao .list-wrap",
".bottom-suidao .list-content",
"suidao"
);
".bottom-suidao .list-wrap",
".bottom-suidao .list-content",
"suidao"
);
},
methods: {
/** 查询应急预案信息列表 */
getList() {
/** 查询应急预案信息列表 */
getList() {
getList({
pageNum: 1,
pageSize: 99999,
......@@ -83,6 +92,29 @@ export default {
);
});
},
startScrolling(containerClass, contentClass, type) {
const container = document.querySelector(containerClass);
const content = document.querySelector(contentClass);
var affixHeight = 10;
if (this["interval4" + type]) {
clearInterval(this["interval4" + type]);
}
this["interval4" + type] = setInterval(() => {
this["scrollPosition4" + type] +=
this["step4" + type] * this["direction4" + type];
if (
this["scrollPosition4" + type] + container.clientHeight >=
content.scrollHeight + affixHeight ||
this["scrollPosition4" + type] <= 0
) {
this["direction4" + type] *= -1; // 改变滚动方向
}
content.style.transform = `translateY(-${
this["scrollPosition4" + type]
}px)`;
}, this["intervalTime4" + type]);
},
},
};
</script>
......@@ -145,14 +177,8 @@ export default {
.bottom {
height: 2.8rem;
overflow: hidden;
margin-top: 0.16rem;
.scrolling1 {
min-height: 2.55rem;
max-height: 2.55rem;
overflow-y: auto;
border-radius: 4px 4px 0px 0px;
border: 1px solid #0aabff;
dt {
margin-top: 0.1rem;
.dt {
height: 0.42rem;
line-height: 0.42rem;
color: #0adfff;
......@@ -161,11 +187,16 @@ export default {
font-weight: 500;
font-size: 0.18rem;
text-align: center;
grid-template-columns: 1.5rem 1.5rem 0.9rem;
border-radius: 4px 4px 0px 0px;
border: 1px solid #0aabff;
// opacity: 0.5;
}
.scrolling1 {
height:3.5rem;
overflow-y: auto;
border-radius: 4px 4px 0px 0px;
border: 1px solid #0aabff;
dd {
height: 0.4rem;
margin-left: 0;
......@@ -180,30 +211,12 @@ export default {
}
}
.bottom-suidao {
height: 3rem;
.scrolling1 {
.list-wrap {
position: relative;
height: 2.4rem;
overflow: hidden;
// margin-top: 0.4rem;
}
.list-content {
position: absolute; /* 绝对定位 */
transition: transform 0.2s ease; /* 添加平滑过渡 */
// top: 0.4rem;
}
}
}
.bottom-suidao {
min-height: 3.26rem;
max-height: 3.26rem;
height: 3.5rem;
.scrolling1 {
position: relative;
overflow: hidden;
border: none;
min-height: 2.8rem;
max-height: 2.8rem;
margin: 0;
dt {
position: absolute;
z-index: 1;
......@@ -212,10 +225,15 @@ export default {
margin-top: -0.1rem;
grid-template-columns: 1.5rem 1.5rem 0.9rem;
}
.list-wrap {
position: relative;
height: 2.7rem;
overflow: hidden;
// margin-top: 0.4rem;
}
.list-content {
position: absolute; /* 绝对定位 */
transition: transform 0.2s ease; /* 添加平滑过渡 */
top: 0.4rem;
}
dd {
background-image: url("~@/assets/images/dpNew2/bg1.png");
......@@ -223,7 +241,7 @@ export default {
padding-left: 0.45rem;
position: relative;
grid-template-columns: 1.5rem 1.5rem 0.9rem;
margin-bottom: 0.1rem;
margin-top: 0.1rem;
height: 0.57rem;
border: none;
&::before {
......@@ -233,7 +251,7 @@ export default {
left: 0.25rem;
width: 0.36rem;
height: 0.3rem;
background-image: url("~@/assets/images/dpNew2/emergencyIcon.png");
background-image: url("~@/assets/images/dpNew3/icon_1.png");
background-repeat: no-repeat;
background-size: cover;
}
......@@ -241,38 +259,4 @@ export default {
}
}
}
// 滚动条样式优化
.scrolling1::-webkit-scrollbar {
width: 0.06rem;
height: 0.08rem;
cursor: pointer;
}
.scrolling1::-webkit-scrollbar-thumb {
border-radius: 10px;
margin-right: 10px;
cursor: pointer;
background-color: rgba(23, 121, 230, 0.7);
background-image: -webkit-linear-gradient(
45deg,
rgba(31, 181, 219, 0.7) 25%,
transparent 0,
transparent 50%,
rgba(31, 181, 219, 0.7) 0,
rgba(31, 181, 219, 0.7) 75%,
transparent 0,
transparent
);
}
.scrolling1::-webkit-scrollbar-thumb:hover {
background-color: #1854e8;
}
.scrolling1::-webkit-scrollbar-track {
border-radius: 10px;
background: hsla(0, 0%, 100%, 0.1);
margin-right: 10px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment