Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / tabRightGJ.vue
@鲁yixuan 鲁yixuan on 5 Sep 10 KB 1
  1. <template>
  2. <!-- 排水防涝一张图 监测告警 -->
  3. <div class="tabRightGJ" v-if="tabShowWL == 3">
  4. <div class="allContent">
  5. <div class="selectTitle" style="margin-top: 15px">
  6. <div class="name">实时告警</div>
  7. <el-select
  8. v-model="gaojingType"
  9. class="selectTool"
  10. size="small"
  11. style="margin: 10px"
  12. placeholder="请选择报警类型"
  13. @change="getRealData"
  14. >
  15. <el-option v-for="item in optionsGJ" :key="item.value" :label="item.label" :value="item.value" />
  16. </el-select>
  17. </div>
  18. <!-- 设备故障表 -->
  19. <el-table :data="tableDataS" v-loading="tableLoadingS" height="320" highlight-current-row @row-click="clickRealData" ref="myTable">
  20. <!-- <el-table-column prop="stCode" label="站点编码" width="130" /> -->
  21. <el-table-column prop="stName" label="站点名称" width="150" />
  22. <el-table-column prop="siteType" label="站点类型" v-if="gaojingType == '2'" width="80">
  23. <template #default="scope">
  24. <span>
  25. {{
  26. scope.row.siteType == 'water_level'
  27. ? '水位站'
  28. : scope.row.siteType == 'flow'
  29. ? '流量站'
  30. : scope.row.siteType == 'rain'
  31. ? '雨量站'
  32. : scope.row.siteType == 'quality'
  33. ? '水质站'
  34. : '--'
  35. }}
  36. </span>
  37. </template>
  38. </el-table-column>
  39. <el-table-column prop="faultType" label="故障类型" v-if="gaojingType == '1'">
  40. <!-- <template #default="scope">
  41. <span>
  42. {{
  43. scope.row.faultType == 'low_battery'
  44. ? '低电压'
  45. : scope.row.faultType == 'low_signal'
  46. ? '低信号'
  47. : scope.row.faultType == 'exception'
  48. ? '异常值'
  49. : scope.row.faultType == 'offline'
  50. ? '离线'
  51. : '--'
  52. }}
  53. </span>
  54. </template> -->
  55. </el-table-column>
  56. <el-table-column prop="fromDatetime" label="开始时间" v-if="gaojingType == '1'" width="160" />
  57. <el-table-column prop="toDatetime" label="结束时间" v-if="gaojingType == '1'" width="160" />
  58. <el-table-column prop="durationTime" label="停留时长(h)" v-if="gaojingType == '1'" width="100" />
  59. <el-table-column prop="warnType" label="告警类型" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
  60. <!-- <el-table-column prop="warnFactorName" label="报警因子" v-if="gaojingType == '2'" width="100" /> -->
  61. <el-table-column prop="warnFactorNames" label="告警阈值" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
  62. <el-table-column prop="warnFactorValueNameStr" label="告警监测值" v-if="gaojingType == '2'" width="150" />
  63. <el-table-column prop="continueMinute" label="持续时长(min)" v-if="gaojingType == '2'" width="110" />
  64. </el-table>
  65. <div class="selectTitle">
  66. <div class="name">历史告警信息</div>
  67. <el-date-picker v-model="dateMonth" size="small" style="width: 120px" type="data" placeholder="选择时间" @change="changeDate" />
  68. </div>
  69. <div class="staticPicture">
  70. <!-- 历史设备故障表 -->
  71. <el-table :data="tableDataH" v-loading="tableLoadingH" height="280">
  72. <!-- <el-table-column prop="stCode" label="站点编码" width="100" /> -->
  73. <el-table-column prop="stName" label="站点名称" width="120" />
  74. <el-table-column prop="qdCode" label="故障类型" v-if="gaojingType == '1'">
  75. <template #default="scope">
  76. <span>
  77. {{
  78. scope.row.faultType == 'low_battery'
  79. ? '低电压'
  80. : scope.row.faultType == 'low_signal'
  81. ? '低信号'
  82. : scope.row.faultType == 'exception'
  83. ? '异常值'
  84. : scope.row.faultType == 'offline'
  85. ? '离线'
  86. : '--'
  87. }}
  88. </span>
  89. </template>
  90. </el-table-column>
  91. <el-table-column prop="warnDatetime" label="告警时间" v-if="gaojingType == '2'" width="160" />
  92.  
  93. <!-- <el-table-column prop="durationTime" label="停留时长(h)" v-if="gaojingType == '1'" width="100" />
  94. <el-table-column prop="warnType" label="告警类型" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
  95. <el-table-column prop="warnFactorName" label="报警因子" v-if="gaojingType == '2'" width="110" /> -->
  96. <el-table-column prop="warnFactorValueName" label="告警监测值" v-if="gaojingType == '2'" />
  97. <el-table-column prop="warnFormulaName" label="超警戒值(m)" v-if="gaojingType == '2'" show-overflow-tooltip />
  98. <!-- <el-table-column prop="continueMinute" label="持续时长(min)" v-if="gaojingType == '2'" width="120" /> -->
  99. </el-table>
  100. </div>
  101. </div>
  102. </div>
  103. </template>
  104. <script setup name="tabRightGJ">
  105. import { nextTick } from 'vue';
  106. import bus from '@/bus';
  107. import {
  108. rtuFaultTimeSectionRealtimeList,
  109. rtuWarnRecordRealtimeList,
  110. rtuFaultTimeSectionHistoryPage,
  111. rtuWarnRecordHistoryPage,
  112. } from '@/api/floodSys/oneMap';
  113.  
  114. const { proxy } = getCurrentInstance();
  115. const tabShowWL = ref(null);
  116. const gaojingType = ref('2');
  117. const optionsGJ = ref([
  118. { value: '2', label: '指标超标预警' },
  119. { value: '1', label: '设备故障报警' },
  120. ]);
  121. const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
  122. const tableDataS = ref([]);
  123. const tableLoadingS = ref(true);
  124. const tableDataH = ref([]);
  125. const tableLoadingH = ref(true);
  126. const checkRow = ref({});
  127. const myTable = ref(null);
  128.  
  129. // 获取实时告警数据
  130. async function getRealData() {
  131. tableLoadingS.value = true;
  132. checkRow.value = [];
  133. if (gaojingType.value == '1') {
  134. let res = await rtuFaultTimeSectionRealtimeList();
  135. if (res && res.code == 200) {
  136. tableDataS.value = res.data;
  137. let features = [];
  138. tableDataS.value.forEach(element => {
  139. element.gaojingType = '1';
  140. element.size = 250;
  141. if (!element.lonLat) return;
  142. let coordinates = [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])];
  143. let warningPoint = turf.point(coordinates, element);
  144. features.push(warningPoint);
  145. });
  146. let waringPointJson = turf.featureCollection(features);
  147. let key = 'warning_monitor';
  148. bus.emit('removeMapDatas', [key]);
  149. bus.emit('getGeojsonByType', {
  150. type: key,
  151. callback: geojson => {
  152. if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: waringPointJson, key });
  153. bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
  154. },
  155. });
  156. }
  157. } else {
  158. let res = await rtuWarnRecordRealtimeList();
  159. if (res && res.code == 200) {
  160. tableDataS.value = res.data;
  161. let features = [];
  162. tableDataS.value.forEach(element => {
  163. element.gaojingType = '2';
  164. element.size = 250;
  165. if (!element.lonLat) return;
  166. let coordinates = [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])];
  167. let warningPoint = turf.point(coordinates, element);
  168. features.push(warningPoint);
  169. });
  170. let waringPointJson = turf.featureCollection(features);
  171. let key = 'warning_monitor';
  172. bus.emit('removeMapDatas', [key]);
  173. bus.emit('getGeojsonByType', {
  174. type: key,
  175. callback: geojson => {
  176. if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: waringPointJson, key });
  177. bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
  178. },
  179. });
  180. }
  181. }
  182. clickRealData(checkRow.value); //默认加载第一条的历史数据
  183. tableLoadingS.value = false;
  184. }
  185.  
  186. // 选择年月
  187. function changeDate(val) {
  188. dateMonth.value = proxy.moment(val).format('YYYY-MM-DD');
  189. getHistoryData(checkRow.value); //获取历史数据
  190. }
  191. //地图定位
  192. const mapFlyTo = lonlat => {
  193. newfiberMapbox.map.easeTo({
  194. center: [Number(lonlat[0]), Number(lonlat[1])],
  195. zoom: 15.5,
  196. });
  197. };
  198. // 实时告警列点击
  199. function clickRealData(row) {
  200. checkRow.value = row;
  201. getHistoryData(row); //获取历史数据
  202. let closeCommonPopup = false;
  203. bus.emit('closeCommonPopup', closeCommonPopup);
  204. if (!!!row.lonLat) return;
  205. let lonlat = row.lonLat.split(',');
  206. mapFlyTo(lonlat);
  207. }
  208.  
  209. // 获取历史数据
  210. async function getHistoryData(row) {
  211. tableLoadingH.value = true;
  212. if (gaojingType.value == '1') {
  213. let res = await rtuFaultTimeSectionHistoryPage({ stCode: row.stCode, faultType: row.faultType, day: dateMonth.value });
  214. if (res && res.code == 200) {
  215. tableDataH.value = res.data;
  216. }
  217. } else {
  218. let res = await rtuWarnRecordHistoryPage({ stCode: row.stCode, configId: row.configId, day: dateMonth.value });
  219. if (res && res.code == 200) {
  220. tableDataH.value = res.data;
  221. }
  222. }
  223. tableLoadingH.value = false;
  224. }
  225. //告警点击事件
  226. const warningPointClick = () => {
  227. let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
  228. warningPoint.on('click', e => {
  229. let popupData = e.feature.properties;
  230. newfiberMapbox.map.easeTo({
  231. center: [Number(popupData.lonLat.split(',')[0]) + 0.0045, Number(popupData.lonLat.split(',')[1]) + 0.004],
  232. zoom: 15,
  233. });
  234. bus.emit('popupJCGJData', popupData);
  235. });
  236. };
  237. onMounted(() => {
  238. bus.on('changeTableContent', val => {
  239. if (val == 3) {
  240. tabShowWL.value = val;
  241. nextTick(() => {
  242. newfiberMapbox.map.easeTo({
  243. center: [114.312, 34.802],
  244. zoom: 12.9,
  245. pitch: 55,
  246. });
  247. getRealData(); //获取实时列表数据
  248. warningPointClick();
  249. });
  250. bus.emit('initeLayer', []);
  251. } else {
  252. tabShowWL.value = null;
  253. bus.emit('setLayerVisible', { type: 'point', layername: 'warning_monitor', isCheck: false });
  254. }
  255. });
  256. // 刷新列表数据
  257. bus.on('refreshGJ', val => {
  258. getRealData();
  259. });
  260. });
  261. onBeforeUnmount(() => {
  262. bus.off('changeTableContent');
  263. bus.off('refreshGJ');
  264. });
  265. </script>
  266. <style lang="scss">
  267. .tabRightGJ {
  268. width: 100%;
  269. height: 100%;
  270. position: absolute;
  271. background: #00314e;
  272. border: 1px solid #094065;
  273. z-index: 115;
  274. .allContent {
  275. height: 750px;
  276. overflow: auto;
  277.  
  278. .staticPicture {
  279. padding-top: 10px;
  280. }
  281. }
  282. }
  283. </style>