- <template>
- <!-- 排水防涝一张图 监测告警 -->
- <div class="tabRightGJ" v-if="tabShowWL == 3">
- <div class="allContent">
- <div class="selectTitle" style="margin-top: 15px">
- <div class="name">实时告警</div>
- <el-select
- v-model="gaojingType"
- class="selectTool"
- size="small"
- style="margin: 10px"
- placeholder="请选择报警类型"
- @change="getRealData"
- >
- <el-option v-for="item in optionsGJ" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </div>
- <!-- 设备故障表 -->
- <el-table :data="tableDataS" v-loading="tableLoadingS" height="320" highlight-current-row @row-click="clickRealData" ref="myTable">
- <!-- <el-table-column prop="stCode" label="站点编码" width="130" /> -->
- <el-table-column prop="stName" label="站点名称" width="150" />
- <el-table-column prop="siteType" label="站点类型" v-if="gaojingType == '2'" width="80">
- <template #default="scope">
- <span>
- {{
- scope.row.siteType == 'water_level'
- ? '水位站'
- : scope.row.siteType == 'flow'
- ? '流量站'
- : scope.row.siteType == 'rain'
- ? '雨量站'
- : scope.row.siteType == 'quality'
- ? '水质站'
- : '--'
- }}
- </span>
- </template>
- </el-table-column>
- <el-table-column prop="faultType" label="故障类型" v-if="gaojingType == '1'">
- <!-- <template #default="scope">
- <span>
- {{
- scope.row.faultType == 'low_battery'
- ? '低电压'
- : scope.row.faultType == 'low_signal'
- ? '低信号'
- : scope.row.faultType == 'exception'
- ? '异常值'
- : scope.row.faultType == 'offline'
- ? '离线'
- : '--'
- }}
- </span>
- </template> -->
- </el-table-column>
- <el-table-column prop="fromDatetime" label="开始时间" v-if="gaojingType == '1'" width="160" />
- <el-table-column prop="toDatetime" label="结束时间" v-if="gaojingType == '1'" width="160" />
- <el-table-column prop="durationTime" label="停留时长(h)" v-if="gaojingType == '1'" width="100" />
- <el-table-column prop="warnType" label="告警类型" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
- <!-- <el-table-column prop="warnFactorName" label="报警因子" v-if="gaojingType == '2'" width="100" /> -->
- <el-table-column prop="warnFactorNames" label="告警阈值" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
- <el-table-column prop="warnFactorValueNameStr" label="告警监测值" v-if="gaojingType == '2'" width="150" />
- <el-table-column prop="continueMinute" label="持续时长(min)" v-if="gaojingType == '2'" width="110" />
- </el-table>
- <div class="selectTitle">
- <div class="name">历史告警信息</div>
- <el-date-picker v-model="dateMonth" size="small" style="width: 120px" type="data" placeholder="选择时间" @change="changeDate" />
- </div>
- <div class="staticPicture">
- <!-- 历史设备故障表 -->
- <el-table :data="tableDataH" v-loading="tableLoadingH" height="280">
- <!-- <el-table-column prop="stCode" label="站点编码" width="100" /> -->
- <el-table-column prop="stName" label="站点名称" width="120" />
- <el-table-column prop="qdCode" label="故障类型" v-if="gaojingType == '1'">
- <template #default="scope">
- <span>
- {{
- scope.row.faultType == 'low_battery'
- ? '低电压'
- : scope.row.faultType == 'low_signal'
- ? '低信号'
- : scope.row.faultType == 'exception'
- ? '异常值'
- : scope.row.faultType == 'offline'
- ? '离线'
- : '--'
- }}
- </span>
- </template>
- </el-table-column>
- <el-table-column prop="warnDatetime" label="告警时间" v-if="gaojingType == '2'" width="160" />
-
- <!-- <el-table-column prop="durationTime" label="停留时长(h)" v-if="gaojingType == '1'" width="100" />
- <el-table-column prop="warnType" label="告警类型" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
- <el-table-column prop="warnFactorName" label="报警因子" v-if="gaojingType == '2'" width="110" /> -->
- <el-table-column prop="warnFactorValueName" label="告警监测值" v-if="gaojingType == '2'" />
- <el-table-column prop="warnFormulaName" label="超警戒值(m)" v-if="gaojingType == '2'" show-overflow-tooltip />
- <!-- <el-table-column prop="continueMinute" label="持续时长(min)" v-if="gaojingType == '2'" width="120" /> -->
- </el-table>
- </div>
- </div>
- </div>
- </template>
- <script setup name="tabRightGJ">
- import { nextTick } from 'vue';
- import bus from '@/bus';
- import {
- rtuFaultTimeSectionRealtimeList,
- rtuWarnRecordRealtimeList,
- rtuFaultTimeSectionHistoryPage,
- rtuWarnRecordHistoryPage,
- } from '@/api/floodSys/oneMap';
-
- const { proxy } = getCurrentInstance();
- const tabShowWL = ref(null);
- const gaojingType = ref('2');
- const optionsGJ = ref([
- { value: '2', label: '指标超标预警' },
- { value: '1', label: '设备故障报警' },
- ]);
- const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
- const tableDataS = ref([]);
- const tableLoadingS = ref(true);
- const tableDataH = ref([]);
- const tableLoadingH = ref(true);
- const checkRow = ref({});
- const myTable = ref(null);
-
- // 获取实时告警数据
- async function getRealData() {
- tableLoadingS.value = true;
- checkRow.value = [];
- if (gaojingType.value == '1') {
- let res = await rtuFaultTimeSectionRealtimeList();
- if (res && res.code == 200) {
- tableDataS.value = res.data;
- let features = [];
- tableDataS.value.forEach(element => {
- element.gaojingType = '1';
- element.size = 250;
- if (!element.lonLat) return;
- let coordinates = [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])];
- let warningPoint = turf.point(coordinates, element);
- features.push(warningPoint);
- });
- let waringPointJson = turf.featureCollection(features);
- let key = 'warning_monitor';
- bus.emit('removeMapDatas', [key]);
- bus.emit('getGeojsonByType', {
- type: key,
- callback: geojson => {
- if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: waringPointJson, key });
- bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
- },
- });
- }
- } else {
- let res = await rtuWarnRecordRealtimeList();
- if (res && res.code == 200) {
- tableDataS.value = res.data;
- let features = [];
- tableDataS.value.forEach(element => {
- element.gaojingType = '2';
- element.size = 250;
- if (!element.lonLat) return;
- let coordinates = [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])];
- let warningPoint = turf.point(coordinates, element);
- features.push(warningPoint);
- });
- let waringPointJson = turf.featureCollection(features);
- let key = 'warning_monitor';
- bus.emit('removeMapDatas', [key]);
- bus.emit('getGeojsonByType', {
- type: key,
- callback: geojson => {
- if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: waringPointJson, key });
- bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
- },
- });
- }
- }
- clickRealData(checkRow.value); //默认加载第一条的历史数据
- tableLoadingS.value = false;
- }
-
- // 选择年月
- function changeDate(val) {
- dateMonth.value = proxy.moment(val).format('YYYY-MM-DD');
- getHistoryData(checkRow.value); //获取历史数据
- }
- //地图定位
- const mapFlyTo = lonlat => {
- newfiberMapbox.map.easeTo({
- center: [Number(lonlat[0]), Number(lonlat[1])],
- zoom: 15.5,
- });
- };
- // 实时告警列点击
- function clickRealData(row) {
- checkRow.value = row;
- getHistoryData(row); //获取历史数据
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- if (!!!row.lonLat) return;
- let lonlat = row.lonLat.split(',');
- mapFlyTo(lonlat);
- }
-
- // 获取历史数据
- async function getHistoryData(row) {
- tableLoadingH.value = true;
- if (gaojingType.value == '1') {
- let res = await rtuFaultTimeSectionHistoryPage({ stCode: row.stCode, faultType: row.faultType, day: dateMonth.value });
- if (res && res.code == 200) {
- tableDataH.value = res.data;
- }
- } else {
- let res = await rtuWarnRecordHistoryPage({ stCode: row.stCode, configId: row.configId, day: dateMonth.value });
- if (res && res.code == 200) {
- tableDataH.value = res.data;
- }
- }
- tableLoadingH.value = false;
- }
- //告警点击事件
- const warningPointClick = () => {
- let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
- warningPoint.on('click', e => {
- let popupData = e.feature.properties;
- newfiberMapbox.map.easeTo({
- center: [Number(popupData.lonLat.split(',')[0]) + 0.0045, Number(popupData.lonLat.split(',')[1]) + 0.004],
- zoom: 15,
- });
- bus.emit('popupJCGJData', popupData);
- });
- };
- onMounted(() => {
- bus.on('changeTableContent', val => {
- if (val == 3) {
- tabShowWL.value = val;
- nextTick(() => {
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- getRealData(); //获取实时列表数据
- warningPointClick();
- });
- bus.emit('initeLayer', []);
- } else {
- tabShowWL.value = null;
- bus.emit('setLayerVisible', { type: 'point', layername: 'warning_monitor', isCheck: false });
- }
- });
- // 刷新列表数据
- bus.on('refreshGJ', val => {
- getRealData();
- });
- });
- onBeforeUnmount(() => {
- bus.off('changeTableContent');
- bus.off('refreshGJ');
- });
- </script>
- <style lang="scss">
- .tabRightGJ {
- width: 100%;
- height: 100%;
- position: absolute;
- background: #00314e;
- border: 1px solid #094065;
- z-index: 115;
- .allContent {
- height: 750px;
- overflow: auto;
-
- .staticPicture {
- padding-top: 10px;
- }
- }
- }
- </style>