Newer
Older
KaiFengPC / src / views / sponeScreen / longYW / MonitoringStation.vue
@鲁yixuan 鲁yixuan on 25 Jun 4 KB update
  1. <template>
  2. <div class="longYW">
  3. <div class="partTitleHM">监测站点统计</div>
  4. <div class="ConstrucClass">
  5. <div class="HeadContent">
  6. <div class="one">
  7. <div class="iconTwo bgcBlue"></div>
  8. <span>总计</span>
  9. <span class="bgcBlue">86</span>
  10. </div>
  11. <div class="two">
  12. <div class="iconTwo bgcgreen"></div>
  13. <span>在线</span>
  14. <span class="bgcgreen">80</span>
  15. </div>
  16. <div class="three">
  17. <div class="iconTwo bgcRed"></div>
  18. <span>离线</span>
  19. <span class="bgcRed">5</span>
  20. </div>
  21. <div class="four">
  22. <div class="iconTwo bgcYellow"></div>
  23. <span>故障</span>
  24. <span class="bgcYellow">1</span>
  25. </div>
  26. </div>
  27. <div class="box-body">
  28. <div class="scrollMapHM">
  29. <div class="scrollTitle flex">
  30. <p>站点名称</p>
  31. <p>监测类型</p>
  32. <p>通讯时间</p>
  33. <p>状态</p>
  34. </div>
  35.  
  36. <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
  37. <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
  38. <p class="ellipsis">{{ item.start }}</p>
  39. <p class="ellipsis">{{ item.num }}</p>
  40. <p class="ellipsis">{{ item.time }}</p>
  41. <p class="ellipsis reports" @click="checkReport(item)">{{ item.zt }}</p>
  42. </div>
  43. </Vue3SeamlessScroll>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </template>
  49.  
  50. <script setup>
  51. import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
  52.  
  53. const tableData = ref([
  54. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
  55. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
  56. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
  57. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
  58. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
  59. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
  60. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '在线', id: 1 },
  61. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '离线', id: 1 },
  62. { start: '汴京路雨量站', num: '雨量站', time: '06-07 16:00', zt: '故障', id: 1 },
  63. ]);
  64. </script>
  65.  
  66. <style lang="scss" scoped>
  67. .longYW {
  68. margin-top: 10px;
  69. width: 100%;
  70. height: 31%;
  71. background: #003b6d;
  72. opacity: 0.8;
  73. }
  74. .ConstrucClass {
  75. height: 83%;
  76. opacity: 0.8;
  77. // background: red;
  78. .HeadContent {
  79. width: 100%;
  80. height: 23%;
  81. // background: #2270ff;
  82. align-items: center;
  83. line-height: 25px;
  84. margin-top: 2px;
  85. display: flex;
  86. .one,
  87. .two,
  88. .three,
  89. .four {
  90. width: 24.5%;
  91. height: 100%;
  92. display: flex;
  93. justify-content: space-around;
  94. align-items: center;
  95. font-size: 15px;
  96. font-family: SourceHanSansCN-Regular;
  97. font-weight: 600;
  98. // background: red;
  99. }
  100. }
  101. .box-body {
  102. height: 80%;
  103. // background: yellowgreen;
  104. padding: 10px;
  105. .scrollMapHM {
  106. height: 100%;
  107. p {
  108. width: 18%;
  109. // background: red;
  110. }
  111. .reports {
  112. color: #3afff8;
  113. }
  114. .scroll {
  115. width: 100%;
  116. height: calc(100% - 30%);
  117. overflow: hidden;
  118. display: inline-block;
  119. }
  120. }
  121. }
  122. }
  123. .iconTwo {
  124. display: inline-block;
  125. // border-color: #18e87a;
  126. border-style: solid;
  127. border-width: 2px;
  128. width: 0;
  129. height: 0;
  130. position: relative;
  131. top: -2px;
  132. -moz-transform: rotate(45deg);
  133. -webkit-transform: rotate(45deg);
  134. -o-transform: rotate(45deg);
  135. transform: rotate(45deg);
  136. margin-left: 15px;
  137. }
  138. .bgcBlue {
  139. color: #619bff;
  140. }
  141. .bgcgreen {
  142. color: #2ceea7;
  143. }
  144. .bgcRed {
  145. color: #fa5959;
  146. }
  147. .bgcYellow {
  148. color: #ffcf2a;
  149. }
  150. </style>