Newer
Older
KaiFengPC / src / views / floodSys / scada / alertService / index.vue
@zhangdeliang zhangdeliang on 23 May 3 KB 初始化项目
  1. <template>
  2. <!-- 告警配置 -->
  3. <div class="serviceScadaWarn publicContainer">
  4. <!-- 头部 -->
  5. <div class="synHead">
  6. <div
  7. :class="['part', checkedKey == item.key ? 'changed' : '']"
  8. v-for="item in headArr"
  9. :key="item.key"
  10. @click="changeHeadData(item.key)"
  11. >
  12. <img :src="getImgMonitorIcon(item.imgUrl)" :alt="item.name" />
  13. <p>{{ item.name }}</p>
  14. <p class="value">{{ dataAarray[item.key] ? dataAarray[item.key] : dataAarray[item.keys] ? dataAarray[item.keys] : 0 }}</p>
  15. </div>
  16. </div>
  17. <div class="content">
  18. <div class="synRight">
  19. <reportService></reportService>
  20. </div>
  21. </div>
  22. </div>
  23. </template>
  24. <script setup name="serviceScadaWarn">
  25. import bus from '@/bus';
  26. import { plcWarnConfig } from '@/api/scada/repairdata';
  27. import { getImgMonitorIcon } from '@/utils/validate';
  28. import reportService from './components/reportService.vue';
  29. const { proxy } = getCurrentInstance();
  30. // 变量声明
  31. const headArr = [
  32. { name: '全部', value: '(合计97处)', imgUrl: 'all_icon.png', key: '', keys: 'all' },
  33. { name: '水位告警', value: '(4)', imgUrl: 'river_icon.png', key: 'water_level' },
  34. { name: '降雨告警', value: '(4)', imgUrl: 'lake_icon.png', key: 'rain' },
  35. { name: '流量告警', value: '(97处)', imgUrl: 'gqjc_icon.png', key: 'flow' },
  36. { name: '水质告警', value: '(合计7处)', imgUrl: 'line_icon.png', key: 'quality' },
  37. { name: '其他告警', value: '(合计197处)', imgUrl: 'land_icon.png', key: 'other' },
  38. ];
  39. const checkedKey = ref('1');
  40. // 方法
  41. function changeHeadData(warnType = '') {
  42. checkedKey.value = warnType;
  43. bus.emit('mapPointClick3', warnType);
  44. }
  45. const dataAarray = ref({});
  46. const rtuWarnType = async () => {
  47. let { data } = await plcWarnConfig();
  48. var contall = 0;
  49. data.forEach(i => {
  50. dataAarray.value[i.warnType] = i.count;
  51. contall += i.count;
  52. });
  53. dataAarray.value.all = contall;
  54. };
  55. // 初始化
  56. onMounted(() => {
  57. rtuWarnType();
  58. changeHeadData(); //默认显示全部
  59. });
  60. // 页面销毁
  61. onBeforeUnmount(() => {});
  62. </script>
  63. <style lang="scss" scoped>
  64. @import '@/assets/styles/variables.module.scss';
  65. .serviceScadaWarn {
  66. width: 100%;
  67. height: calc(100vh - 84px);
  68. position: relative;
  69. .synHead {
  70. width: 100%;
  71. height: 70px;
  72. display: flex;
  73. align-items: center;
  74. justify-content: space-around;
  75. background: $mainColor1;
  76. .part {
  77. line-height: 25px;
  78. display: flex;
  79. align-items: center;
  80. cursor: pointer;
  81. height: 40px;
  82. padding: 5px 8px;
  83. img {
  84. margin-right: 6px;
  85. }
  86. .value {
  87. color: #3782ff;
  88. margin-left: 5px;
  89. }
  90. &:hover {
  91. background: $mainColor2;
  92. }
  93. }
  94. .changed {
  95. background: $mainColor2;
  96. border: 1px solid #3782ff;
  97. border-radius: 2px;
  98. animation-duration: 1s;
  99. }
  100. }
  101. .content {
  102. display: flex;
  103. height: 93%;
  104. box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
  105. border-radius: 6px;
  106. margin-top: 10px;
  107. .synLeft {
  108. width: 400px;
  109. background: #eef1fb;
  110. }
  111. .synRight {
  112. width: 100%;
  113. }
  114. }
  115. .dialogDetail {
  116. position: absolute;
  117. z-index: 999;
  118. right: 20px;
  119. bottom: 10px;
  120. box-shadow: 0px 2px 26px 0px rgba(28, 52, 92, 0.3);
  121. width: 900px;
  122. border-radius: 8px;
  123. .dialogTitle {
  124. width: 100%;
  125. height: 50px;
  126. line-height: 50px;
  127. background: #0f69ff;
  128. color: #fff;
  129. border-radius: 8px 8px 0 0;
  130. display: flex;
  131. justify-content: space-between;
  132. align-items: center;
  133. padding: 0 15px;
  134. p {
  135. font-size: 17px;
  136. }
  137. .el-icon {
  138. font-size: 30px;
  139. cursor: pointer;
  140. margin-top: 20px;
  141. margin-left: 15px;
  142. &:hover {
  143. transform: scale(1.05);
  144. }
  145. }
  146. }
  147. .dialogCont {
  148. overflow: auto;
  149. padding: 10px;
  150. border: 1px solid red;
  151. }
  152. }
  153. }
  154. </style>