|
@@ -1,213 +1,241 @@
|
|
|
<template>
|
|
|
- <div class="alarm-modal">
|
|
|
- <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
|
|
|
- <a-tab-pane key="1" tab="实时预警">
|
|
|
- <div v-if="activeKey == '1'" class="box-bg table-box" style="margin-bottom: 10px">
|
|
|
- <MonitorTable
|
|
|
- ref="SensorMonitorRef"
|
|
|
- :columns="levelColumns"
|
|
|
- :dataSource="dataSource"
|
|
|
- design-scope="alarm"
|
|
|
- :isShowSelect="false"
|
|
|
- title="预警监测"
|
|
|
- >
|
|
|
- <template #filterCell="{ column, record }">
|
|
|
- <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
|
|
|
- record.warnFlag == 0 ? '正常' : '报警'
|
|
|
- }}</a-tag>
|
|
|
- <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
|
|
|
- record.netStatus == '0' ? '断开' : '连接'
|
|
|
- }}</a-tag>
|
|
|
- </template>
|
|
|
- </MonitorTable>
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
- <a-tab-pane key="2" tab="报警历史">
|
|
|
- <div class="tab-item box-bg">
|
|
|
- <AlarmHistoryTable v-if="activeKey == '2'" :columns="levelHisColumns" designScope="alarm-history" />
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
- </div>
|
|
|
-
|
|
|
- </template>
|
|
|
- <script lang="ts" setup>
|
|
|
- import { onMounted, ref, defineEmits, reactive, onUnmounted, watch } from 'vue';
|
|
|
- import MonitorTable from '../../comment/MonitorTable.vue';
|
|
|
- import AlarmHistoryTable from '../AlarmHistoryTable.vue';
|
|
|
- import { warningList } from '../alarm.api';
|
|
|
- import { levelColumns, levelHisColumns } from '../alarm.data';
|
|
|
-
|
|
|
- // const props = defineProps({
|
|
|
- // deviceId: { type: String },
|
|
|
- // });
|
|
|
-
|
|
|
-
|
|
|
- // 默认初始是第一行
|
|
|
- const activeKey = ref('1');
|
|
|
- const dataSource = ref([]);
|
|
|
-
|
|
|
- const tabChange = (activeKeyVal) => {
|
|
|
- activeKey.value = activeKeyVal;
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- // https获取监测数据
|
|
|
- let timer: null | NodeJS.Timeout = null;
|
|
|
- function getMonitor(flag = false) {
|
|
|
- if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- timer = setTimeout(
|
|
|
- async () => {
|
|
|
- await getDataSource();
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- getMonitor();
|
|
|
- },
|
|
|
- flag ? 0 : 10000
|
|
|
- );
|
|
|
- }
|
|
|
+ <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 设备监测预警 </customHeader>
|
|
|
+ <div class="alarm-modal">
|
|
|
+ <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
|
|
|
+ style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
|
|
|
+ <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
|
|
|
+ <a-tab-pane key="1" tab="实时预警">
|
|
|
+ <div v-if="activeKey == '1'" class="box-bg table-box" style="margin-bottom: 10px">
|
|
|
+ <MonitorTable ref="SensorMonitorRef" :columns="levelColumns" :dataSource="dataSource" design-scope="alarm"
|
|
|
+ :isShowSelect="false" title="预警监测">
|
|
|
+ <template #filterCell="{ column, record }">
|
|
|
+ <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
|
|
|
+ record.warnFlag == 0 ? '正常' : '报警'
|
|
|
+ }}</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
|
|
|
+ record.netStatus == '0' ? '断开' : '连接'
|
|
|
+ }}</a-tag>
|
|
|
+ </template>
|
|
|
+ </MonitorTable>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="2" tab="报警历史">
|
|
|
+ <div class="tab-item box-bg">
|
|
|
+ <AlarmHistoryTable v-if="activeKey == '2'" :columns="levelHisColumns" designScope="alarm-history" />
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { onMounted, ref, defineEmits, reactive, onUnmounted, watch } from 'vue';
|
|
|
+import MonitorTable from '../../comment/MonitorTable.vue';
|
|
|
+import AlarmHistoryTable from '../AlarmHistoryTable.vue';
|
|
|
+import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
+import { warningList } from '../alarm.api';
|
|
|
+import { levelColumns, levelHisColumns } from '../alarm.data';
|
|
|
+import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+
|
|
|
+// const props = defineProps({
|
|
|
+// deviceId: { type: String },
|
|
|
+// });
|
|
|
+
|
|
|
+const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型(设备类型管理中可以查询到)
|
|
|
+// 默认初始是第一行
|
|
|
+const activeKey = ref('1');
|
|
|
+const dataSource = ref([]);
|
|
|
+
|
|
|
+const tabChange = (activeKeyVal) => {
|
|
|
+ activeKey.value = activeKeyVal;
|
|
|
+};
|
|
|
+let router = useRouter()
|
|
|
+
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = null;
|
|
|
+function getMonitor(flag = false) {
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ await getDataSource();
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 10000
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//返回首页
|
|
|
+function getBack() {
|
|
|
+ router.push('/monitorChannel/monitor-alarm-home')
|
|
|
+}
|
|
|
+
|
|
|
+//设备预警监测列表
|
|
|
+async function getDataSource() {
|
|
|
+ const res = await warningList({ isok: 0 });
|
|
|
+ dataSource.value = res.list || [];
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ getMonitor(true);
|
|
|
+});
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+@import '/@/design/vent/color.less';
|
|
|
+@import '/@/design/vent/modal.less';
|
|
|
+
|
|
|
+.padding-0 {
|
|
|
+ padding: 10px 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.alarm-modal {
|
|
|
+ position: relative;
|
|
|
+ padding: 80px 10px 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 999;
|
|
|
+ max-height: calc(100vh - 150px);
|
|
|
+
|
|
|
+ .@{ventSpace}-tabs {
|
|
|
+ max-height: calc(100vh - 100px);
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ height: calc(90vh - 152px);
|
|
|
+ // max-height: calc(100vh - 170px);
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
- //设备预警监测列表
|
|
|
- async function getDataSource() {
|
|
|
- const res = await warningList({ isok: 0 });
|
|
|
- dataSource.value = res.list || [];
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-text {
|
|
|
+ position: absolute;
|
|
|
+ top: -14px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-box {
|
|
|
+ height: calc(90vh - 152px);
|
|
|
+ padding: 20px 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-bg {
|
|
|
+ border: 1px solid #4d7ad855;
|
|
|
+ border-radius: 2px;
|
|
|
+ // background-color: #001d3055;
|
|
|
+ // -webkit-backdrop-filter: blur(8px);
|
|
|
+ // backdrop-filter: blur(8px);
|
|
|
+ box-shadow: 0 0 10px #5984e055 inset;
|
|
|
+ // background-color: #00b3ff12;
|
|
|
+ }
|
|
|
+
|
|
|
+ .charts-box {
|
|
|
+ height: calc(40vh - 80px);
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-tabs-card) {
|
|
|
+ .@{ventSpace}-tabs-tab {
|
|
|
+ background: linear-gradient(#2cd1ff55, #1eb0ff55);
|
|
|
+ border-color: #74e9fe;
|
|
|
+ border-radius: 0%;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #64d5ff;
|
|
|
}
|
|
|
-
|
|
|
- onMounted(async () => {
|
|
|
- getMonitor(true);
|
|
|
- });
|
|
|
- onUnmounted(() => {
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- }
|
|
|
- });
|
|
|
- </script>
|
|
|
- <style scoped lang="less">
|
|
|
- @import '/@/design/vent/color.less';
|
|
|
- @import '/@/design/vent/modal.less';
|
|
|
- .padding-0 {
|
|
|
- padding: 10px 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-tabs-nav::before {
|
|
|
+ border-color: #74e9fe;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-picker,
|
|
|
+ .@{ventSpace}-select-selector {
|
|
|
+ width: 100% !important;
|
|
|
+ background: #00000017 !important;
|
|
|
+ border: 1px solid @vent-form-item-boder !important;
|
|
|
+
|
|
|
+ input,
|
|
|
+ .@{ventSpace}-select-selection-item,
|
|
|
+ .@{ventSpace}-picker-suffix {
|
|
|
+ color: #fff !important;
|
|
|
}
|
|
|
- .alarm-modal {
|
|
|
- position: relative;
|
|
|
- padding: 10px;
|
|
|
- z-index: 999;
|
|
|
- max-height: calc(100vh - 150px);
|
|
|
- .@{ventSpace}-tabs {
|
|
|
- max-height: calc(100vh - 100px);
|
|
|
- .tab-item {
|
|
|
- height: calc(90vh - 152px);
|
|
|
- // max-height: calc(100vh - 170px);
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- .title-text {
|
|
|
- position: absolute;
|
|
|
- top: -14px;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .table-box {
|
|
|
- height: calc(90vh - 152px);
|
|
|
- padding: 20px 10px;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .box-bg {
|
|
|
- border: 1px solid #4d7ad855;
|
|
|
- border-radius: 2px;
|
|
|
- // background-color: #001d3055;
|
|
|
- // -webkit-backdrop-filter: blur(8px);
|
|
|
- // backdrop-filter: blur(8px);
|
|
|
- box-shadow: 0 0 10px #5984e055 inset;
|
|
|
- // background-color: #00b3ff12;
|
|
|
- }
|
|
|
- .charts-box {
|
|
|
- height: calc(40vh - 80px);
|
|
|
- padding: 5px 10px;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
+
|
|
|
+ .@{ventSpace}-select-selection-placeholder {
|
|
|
+ color: #b7b7b7 !important;
|
|
|
}
|
|
|
- :deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
- height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-pagination-next,
|
|
|
+ .action,
|
|
|
+ .@{ventSpace}-select-arrow,
|
|
|
+ .@{ventSpace}-picker-separator {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-table-cell-row-hover {
|
|
|
+ background: #264d8833 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-table-row-selected {
|
|
|
+ background: #00c0a311 !important;
|
|
|
+
|
|
|
+ td {
|
|
|
+ background-color: #00000000 !important;
|
|
|
}
|
|
|
- :deep(.@{ventSpace}-tabs-card) {
|
|
|
- .@{ventSpace}-tabs-tab {
|
|
|
- background: linear-gradient(#2cd1ff55, #1eb0ff55);
|
|
|
- border-color: #74e9fe;
|
|
|
- border-radius: 0%;
|
|
|
- &:hover {
|
|
|
- color: #64d5ff;
|
|
|
- }
|
|
|
- }
|
|
|
- .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
|
|
|
- color: aqua;
|
|
|
- }
|
|
|
- .@{ventSpace}-tabs-nav::before {
|
|
|
- border-color: #74e9fe;
|
|
|
- }
|
|
|
- .@{ventSpace}-picker,
|
|
|
- .@{ventSpace}-select-selector {
|
|
|
- width: 100% !important;
|
|
|
- background: #00000017 !important;
|
|
|
- border: 1px solid @vent-form-item-boder !important;
|
|
|
- input,
|
|
|
- .@{ventSpace}-select-selection-item,
|
|
|
- .@{ventSpace}-picker-suffix {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-select-selection-placeholder {
|
|
|
- color: #b7b7b7 !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .@{ventSpace}-pagination-next,
|
|
|
- .action,
|
|
|
- .@{ventSpace}-select-arrow,
|
|
|
- .@{ventSpace}-picker-separator {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-table-cell-row-hover {
|
|
|
- background: #264d8833 !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-table-row-selected {
|
|
|
- background: #00c0a311 !important;
|
|
|
- td {
|
|
|
- background-color: #00000000 !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .@{ventSpace}-table-thead {
|
|
|
- // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
|
|
|
- background: #3d9dd45d !important;
|
|
|
-
|
|
|
- & > tr > th,
|
|
|
- .@{ventSpace}-table-column-title {
|
|
|
- // color: #70f9fc !important;
|
|
|
- border-color: #84f2ff !important;
|
|
|
- border-left: none !important;
|
|
|
- border-right: none !important;
|
|
|
- padding: 7px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .@{ventSpace}-table-tbody {
|
|
|
- tr > td {
|
|
|
- padding: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
|
|
|
- background-color: #26648855 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .jeecg-basic-table-row__striped {
|
|
|
- // background: #97efff11 !important;
|
|
|
- td {
|
|
|
- background-color: #97efff11 !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-table-thead {
|
|
|
+ // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
|
|
|
+ background: #3d9dd45d !important;
|
|
|
+
|
|
|
+ &>tr>th,
|
|
|
+ .@{ventSpace}-table-column-title {
|
|
|
+ // color: #70f9fc !important;
|
|
|
+ border-color: #84f2ff !important;
|
|
|
+ border-left: none !important;
|
|
|
+ border-right: none !important;
|
|
|
+ padding: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-table-tbody {
|
|
|
+ tr>td {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
|
|
|
+ background-color: #26648855 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeecg-basic-table-row__striped {
|
|
|
+
|
|
|
+ // background: #97efff11 !important;
|
|
|
+ td {
|
|
|
+ background-color: #97efff11 !important;
|
|
|
}
|
|
|
- </style>
|
|
|
-
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|