- <template>
- <div class="longYW">
- <div class="partTitleHM">监测站点统计</div>
- <div class="ConstrucClass">
- <div class="HeadContent">
- <div class="one">
- <div class="iconTwo bgcBlue"></div>
- <span>总计</span>
- <span class="bgcBlue">86</span>
- 个
- </div>
- <div class="two">
- <div class="iconTwo bgcgreen"></div>
- <span>在线</span>
- <span class="bgcgreen">80</span>
- 个
- </div>
- <div class="three">
- <div class="iconTwo bgcRed"></div>
- <span>离线</span>
- <span class="bgcRed">5</span>
- 个
- </div>
- <div class="four">
- <div class="iconTwo bgcYellow"></div>
- <span>故障</span>
- <span class="bgcYellow">1</span>
- 个
- </div>
- </div>
- <div class="box-body">
- <div class="scrollMapHM">
- <div class="scrollTitle flex">
- <p>站点名称</p>
- <p>监测类型</p>
- <p>通讯时间</p>
- <p>状态</p>
- </div>
-
- <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
- <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
- <p class="ellipsis">{{ item.start }}</p>
- <p class="ellipsis">{{ item.num }}</p>
- <p class="ellipsis">{{ item.time }}</p>
- <p class="ellipsis reports" @click="checkReport(item)">{{ item.zt }}</p>
- </div>
- </Vue3SeamlessScroll>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup>
- import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-
- const tableData = ref([
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '离线', id: 1 },
- { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '故障', id: 1 },
- ]);
- </script>
-
- <style lang="scss" scoped>
- .longYW {
- margin-top: 10px;
- width: 100%;
- height: 31%;
- background: #003b6d;
- opacity: 0.8;
- }
- .ConstrucClass {
- height: 83%;
- opacity: 0.8;
- // background: red;
- .HeadContent {
- width: 100%;
- height: 23%;
- // background: #2270ff;
- align-items: center;
- line-height: 25px;
- margin-top: 2px;
- display: flex;
- .one,
- .two,
- .three,
- .four {
- width: 24.5%;
- height: 100%;
- display: flex;
- justify-content: space-around;
- align-items: center;
- font-size: 15px;
- font-family: SourceHanSansCN-Regular;
- font-weight: 600;
- // background: red;
- }
- }
- .box-body {
- height: 80%;
- // background: yellowgreen;
- padding: 10px;
- .scrollMapHM {
- height: 100%;
- p {
- width: 18%;
- // background: red;
- }
- .reports {
- color: #3afff8;
- }
- .scroll {
- width: 100%;
- height: calc(100% - 30%);
- overflow: hidden;
- display: inline-block;
- }
- }
- }
- }
- .iconTwo {
- display: inline-block;
- // border-color: #18e87a;
- border-style: solid;
- border-width: 2px;
- width: 0;
- height: 0;
- position: relative;
- top: -2px;
- -moz-transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- margin-left: 15px;
- }
- .bgcBlue {
- color: #619bff;
- }
- .bgcgreen {
- color: #2ceea7;
- }
- .bgcRed {
- color: #fa5959;
- }
- .bgcYellow {
- color: #ffcf2a;
- }
- </style>