|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<customHeader>{{ orgname }}预警历史监控系统</customHeader>
|
|
|
- <div class="data-statistics">
|
|
|
+ <!-- <div class="data-statistics">
|
|
|
<div class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
|
|
|
<div class="left-box">
|
|
|
<div class="box-title">{{ item.title }}</div>
|
|
@@ -16,20 +16,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
|
|
|
- <a-tab-pane tab="安全监控预警历史" key="safety" />
|
|
|
- <a-tab-pane tab="设备预警历史" key="device" />
|
|
|
- <a-tab-pane tab="联动预警历史" key="manageAuto" />
|
|
|
- </a-tabs>
|
|
|
+ </div> -->
|
|
|
+ <!-- <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
|
|
|
+ <a-tab-pane tab="安全监控预警历史" key="safety" />
|
|
|
+ <a-tab-pane tab="设备预警历史" key="device" />
|
|
|
+ <a-tab-pane tab="联动预警历史" key="manageAuto" />
|
|
|
+ </a-tabs> -->
|
|
|
<div class="alarm-history-table">
|
|
|
- <BasicTable v-if="activeKey == 'device'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
|
|
|
+ <!-- <BasicTable v-if="activeKey == 'device'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
|
|
|
<template #form-onExportXls>
|
|
|
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
|
|
|
</template>
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
<template v-if="column.dict">
|
|
|
- <!-- 除了 101(蓝色预警)其他都是红色字体 -->
|
|
|
<span v-if="column.dataIndex === 'nwartype'"
|
|
|
:class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
|
|
|
{{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
|
|
@@ -39,15 +38,14 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
</template>
|
|
|
- </BasicTable>
|
|
|
- <BasicTable v-if="activeKey == 'manageAuto'" ref="alarmHistory" @register="registerTable"
|
|
|
+ </BasicTable> -->
|
|
|
+ <!-- <BasicTable v-if="activeKey == 'manageAuto'" ref="alarmHistory" @register="registerTable"
|
|
|
:scroll="{ x: 0, y: 350 }">
|
|
|
<template #form-onExportXls>
|
|
|
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
|
|
|
</template>
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
<template v-if="column.dict">
|
|
|
- <!-- 除了 101(蓝色预警)其他都是红色字体 -->
|
|
|
<span v-if="column.dataIndex === 'nwartype'"
|
|
|
:class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
|
|
|
{{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
|
|
@@ -57,8 +55,8 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
</template>
|
|
|
- </BasicTable>
|
|
|
- <BasicTable v-if="activeKey == 'safety'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
|
|
|
+ </BasicTable> -->
|
|
|
+ <BasicTable v-if="activeKey == 'safety'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 650 }">
|
|
|
<template #form-onExportXls>
|
|
|
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsPost()"> 导出</a-button>
|
|
|
</template>
|
|
@@ -97,13 +95,13 @@ const props = defineProps({
|
|
|
},
|
|
|
});
|
|
|
const route = useRoute();
|
|
|
-let statisticsList = reactive<any[]>([
|
|
|
- { title: '通风', valueT: 0, valueB: '' },
|
|
|
- { title: '粉尘', valueT: 0, valueB: '' },
|
|
|
- { title: '瓦斯', valueT: 0, valueB: '' },
|
|
|
- { title: '火灾', valueT: 0, valueB: '' },
|
|
|
- { title: '安全监测', valueT: 0, valueB: '' },
|
|
|
-]);
|
|
|
+// let statisticsList = reactive<any[]>([
|
|
|
+// { title: '通风', valueT: 0, valueB: '' },
|
|
|
+// { title: '粉尘', valueT: 0, valueB: '' },
|
|
|
+// { title: '瓦斯', valueT: 0, valueB: '' },
|
|
|
+// { title: '火灾', valueT: 0, valueB: '' },
|
|
|
+// { title: '安全监测', valueT: 0, valueB: '' },
|
|
|
+// ]);
|
|
|
const activeKey = ref('safety');
|
|
|
const alarmHistory = ref();
|
|
|
const deviceColumns = getTableHeaderColumns('alarm_history') as [];
|
|
@@ -114,22 +112,23 @@ const paramType = ref('aqjkAlarmLog');
|
|
|
|
|
|
|
|
|
|
|
|
-function onChangeTab(tab) {
|
|
|
- activeKey.value = tab
|
|
|
- if (tab === 'safety') {
|
|
|
- paramType.value = 'aqjkAlarmLog';
|
|
|
- dataColumns.value = safetyColumns;
|
|
|
- searchFormSchema.value = safetySchema
|
|
|
- } else if (tab === 'device') {
|
|
|
- paramType.value = 'alarmLog';
|
|
|
- dataColumns.value = deviceColumns;
|
|
|
- searchFormSchema.value = unsafetySchema
|
|
|
- } else {
|
|
|
- paramType.value = 'autoLog';
|
|
|
- dataColumns.value = manageAutoColumns1;
|
|
|
- searchFormSchema.value = unsafetySchema
|
|
|
- }
|
|
|
-}
|
|
|
+// function onChangeTab(tab) {
|
|
|
+// activeKey.value = tab
|
|
|
+// // if (tab === 'safety') {
|
|
|
+// // paramType.value = 'aqjkAlarmLog';
|
|
|
+// // dataColumns.value = safetyColumns;
|
|
|
+// // searchFormSchema.value = safetySchema
|
|
|
+// // }
|
|
|
+// // else if (tab === 'device') {
|
|
|
+// // paramType.value = 'alarmLog';
|
|
|
+// // dataColumns.value = deviceColumns;
|
|
|
+// // searchFormSchema.value = unsafetySchema
|
|
|
+// // } else {
|
|
|
+// // paramType.value = 'autoLog';
|
|
|
+// // dataColumns.value = manageAutoColumns1;
|
|
|
+// // searchFormSchema.value = unsafetySchema
|
|
|
+// // }
|
|
|
+// }
|
|
|
|
|
|
|
|
|
// 列表页面公共参数、方法
|
|
@@ -175,26 +174,26 @@ const [registerTable, { reload, setLoading, getForm }] = tableContext;
|
|
|
|
|
|
|
|
|
//获取预警统计信息
|
|
|
-async function getEachMineWarnCountInfoList() {
|
|
|
- let res = await getEachMineWarnCountInfo({});
|
|
|
- console.log(res, '监测数量预警状态------');
|
|
|
- statisticsList[0].valueT = res.ventSWarnInfo.totalNum || 0;
|
|
|
- statisticsList[0].valueB = res.ventSWarnInfo.maxWarnLevel || '';
|
|
|
- statisticsList[1].valueT = res.dustSWarnInfo.totalNum || 0;
|
|
|
- statisticsList[1].valueB = res.dustSWarnInfo.maxWarnLevel || '';
|
|
|
- statisticsList[2].valueT = res.gasSWarnInfo.totalNum || 0;
|
|
|
- statisticsList[2].valueB = res.gasSWarnInfo.maxWarnLevel || '';
|
|
|
- statisticsList[3].valueT = res.fireSWarnInfo.totalNum || 0;
|
|
|
- statisticsList[3].valueB = res.fireSWarnInfo.maxWarnLevel || '';
|
|
|
- statisticsList[4].valueT = res.synthesizeSWarnInfo.totalNum || 0;
|
|
|
- statisticsList[4].valueB = res.synthesizeSWarnInfo.maxWarnLevel || '';
|
|
|
-}
|
|
|
+// async function getEachMineWarnCountInfoList() {
|
|
|
+// let res = await getEachMineWarnCountInfo({});
|
|
|
+// console.log(res, '监测数量预警状态------');
|
|
|
+// statisticsList[0].valueT = res.ventSWarnInfo.totalNum || 0;
|
|
|
+// statisticsList[0].valueB = res.ventSWarnInfo.maxWarnLevel || '';
|
|
|
+// statisticsList[1].valueT = res.dustSWarnInfo.totalNum || 0;
|
|
|
+// statisticsList[1].valueB = res.dustSWarnInfo.maxWarnLevel || '';
|
|
|
+// statisticsList[2].valueT = res.gasSWarnInfo.totalNum || 0;
|
|
|
+// statisticsList[2].valueB = res.gasSWarnInfo.maxWarnLevel || '';
|
|
|
+// statisticsList[3].valueT = res.fireSWarnInfo.totalNum || 0;
|
|
|
+// statisticsList[3].valueB = res.fireSWarnInfo.maxWarnLevel || '';
|
|
|
+// statisticsList[4].valueT = res.synthesizeSWarnInfo.totalNum || 0;
|
|
|
+// statisticsList[4].valueB = res.synthesizeSWarnInfo.maxWarnLevel || '';
|
|
|
+// }
|
|
|
|
|
|
const orgname = ref<any>('');
|
|
|
|
|
|
onMounted(async () => {
|
|
|
orgname.value = route.query.orgname;
|
|
|
- getEachMineWarnCountInfoList();
|
|
|
+ // getEachMineWarnCountInfoList();
|
|
|
});
|
|
|
|
|
|
defineExpose({ setLoading });
|
|
@@ -223,14 +222,14 @@ defineExpose({ setLoading });
|
|
|
}
|
|
|
|
|
|
@{theme-deepblue} {
|
|
|
- .data-statistics {
|
|
|
- --image-vent-tf: url('/@/assets/images/themify/deepblue/vent-tf.png');
|
|
|
- --image-dust-fc: url('/@/assets/images/themify/deepblue/dust-fc.png');
|
|
|
- --image-gas-ws: url('/@/assets/images/themify/deepblue/gas-ws.png');
|
|
|
- --image-fire-fz: url('/@/assets/images/themify/deepblue/fire-fz.png');
|
|
|
- --image-aqjc: url('/@/assets/images/themify/deepblue/aqjc.png');
|
|
|
- --image-his-one: url('/@/assets/images/themify/deepblue/his-one.png');
|
|
|
- }
|
|
|
+ // .data-statistics {
|
|
|
+ // --image-vent-tf: url('/@/assets/images/themify/deepblue/vent-tf.png');
|
|
|
+ // --image-dust-fc: url('/@/assets/images/themify/deepblue/dust-fc.png');
|
|
|
+ // --image-gas-ws: url('/@/assets/images/themify/deepblue/gas-ws.png');
|
|
|
+ // --image-fire-fz: url('/@/assets/images/themify/deepblue/fire-fz.png');
|
|
|
+ // --image-aqjc: url('/@/assets/images/themify/deepblue/aqjc.png');
|
|
|
+ // --image-his-one: url('/@/assets/images/themify/deepblue/his-one.png');
|
|
|
+ // }
|
|
|
|
|
|
.tab-box {
|
|
|
--table-border: #0eb3ff66;
|
|
@@ -240,109 +239,109 @@ defineExpose({ setLoading });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.data-statistics {
|
|
|
- --image-vent-tf: url('/@/assets/images/vent-tf.png');
|
|
|
- --image-dust-fc: url('/@/assets/images/dust-fc.png');
|
|
|
- --image-gas-ws: url('/@/assets/images/gas-ws.png');
|
|
|
- --image-fire-fz: url('/@/assets/images/fire-fz.png');
|
|
|
- --image-aqjc: url('/@/assets/images/aqjc.png');
|
|
|
- --image-his-one: url('/@/assets/images/his-one.png');
|
|
|
- height: 200px;
|
|
|
- padding: 20px;
|
|
|
- margin-top: 90px;
|
|
|
- background-color: #0ebbff15;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .statistics-box {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .left-box {
|
|
|
- position: relative;
|
|
|
- width: 138px;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .box-title {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 18px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(1) .left-box {
|
|
|
- background: var(--image-vent-tf) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) .left-box {
|
|
|
- background: var(--image-dust-fc) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(3) .left-box {
|
|
|
- background: var(--image-gas-ws) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(4) .left-box {
|
|
|
- background: var(--image-fire-fz) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(5) .left-box {
|
|
|
- background: var(--image-aqjc) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
- }
|
|
|
-
|
|
|
- .right-box {
|
|
|
- position: relative;
|
|
|
- width: 215px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .box-text {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- color: #fff;
|
|
|
- background: var(--image-his-one) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .text-label {
|
|
|
- position: absolute;
|
|
|
- left: 20px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- }
|
|
|
-
|
|
|
- .text-value {
|
|
|
- position: absolute;
|
|
|
- left: 130px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- font-family: 'douyuFont';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .warning-state {
|
|
|
- .text-value {
|
|
|
- color: aqua !important;
|
|
|
- font-family: 'douyuFont';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+// .data-statistics {
|
|
|
+// // --image-vent-tf: url('/@/assets/images/vent-tf.png');
|
|
|
+// // --image-dust-fc: url('/@/assets/images/dust-fc.png');
|
|
|
+// // --image-gas-ws: url('/@/assets/images/gas-ws.png');
|
|
|
+// // --image-fire-fz: url('/@/assets/images/fire-fz.png');
|
|
|
+// // --image-aqjc: url('/@/assets/images/aqjc.png');
|
|
|
+// // --image-his-one: url('/@/assets/images/his-one.png');
|
|
|
+// height: 200px;
|
|
|
+// padding: 20px;
|
|
|
+// margin-top: 90px;
|
|
|
+// background-color: #0ebbff15;
|
|
|
+// display: flex;
|
|
|
+// justify-content: space-between;
|
|
|
+// align-items: center;
|
|
|
+
|
|
|
+// .statistics-box {
|
|
|
+// display: flex;
|
|
|
+// flex: 1;
|
|
|
+// height: 100%;
|
|
|
+// justify-content: center;
|
|
|
+// align-items: center;
|
|
|
+
|
|
|
+// .left-box {
|
|
|
+// position: relative;
|
|
|
+// width: 138px;
|
|
|
+// height: 100%;
|
|
|
+
|
|
|
+// .box-title {
|
|
|
+// position: absolute;
|
|
|
+// left: 50%;
|
|
|
+// bottom: 18px;
|
|
|
+// transform: translate(-50%, 0);
|
|
|
+// color: #fff;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// &:nth-child(1) .left-box {
|
|
|
+// background: var(--image-vent-tf) no-repeat center;
|
|
|
+// background-size: 100% auto;
|
|
|
+// }
|
|
|
+
|
|
|
+// &:nth-child(2) .left-box {
|
|
|
+// background: var(--image-dust-fc) no-repeat center;
|
|
|
+// background-size: 100% auto;
|
|
|
+// }
|
|
|
+
|
|
|
+// &:nth-child(3) .left-box {
|
|
|
+// background: var(--image-gas-ws) no-repeat center;
|
|
|
+// background-size: 100% auto;
|
|
|
+// }
|
|
|
+
|
|
|
+// &:nth-child(4) .left-box {
|
|
|
+// background: var(--image-fire-fz) no-repeat center;
|
|
|
+// background-size: 100% auto;
|
|
|
+// }
|
|
|
+
|
|
|
+// &:nth-child(5) .left-box {
|
|
|
+// background: var(--image-aqjc) no-repeat center;
|
|
|
+// background-size: 100% auto;
|
|
|
+// }
|
|
|
+
|
|
|
+// .right-box {
|
|
|
+// position: relative;
|
|
|
+// width: 215px;
|
|
|
+// height: 100%;
|
|
|
+// display: flex;
|
|
|
+// flex-direction: column;
|
|
|
+// justify-content: space-around;
|
|
|
+// align-items: center;
|
|
|
+
|
|
|
+// .box-text {
|
|
|
+// position: relative;
|
|
|
+// width: 100%;
|
|
|
+// height: 40px;
|
|
|
+// color: #fff;
|
|
|
+// background: var(--image-his-one) no-repeat center;
|
|
|
+// background-size: 100% 100%;
|
|
|
+
|
|
|
+// .text-label {
|
|
|
+// position: absolute;
|
|
|
+// left: 20px;
|
|
|
+// top: 50%;
|
|
|
+// transform: translate(0, -50%);
|
|
|
+// }
|
|
|
+
|
|
|
+// .text-value {
|
|
|
+// position: absolute;
|
|
|
+// left: 130px;
|
|
|
+// top: 50%;
|
|
|
+// transform: translate(0, -50%);
|
|
|
+// font-family: 'douyuFont';
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .warning-state {
|
|
|
+// .text-value {
|
|
|
+// color: aqua !important;
|
|
|
+// font-family: 'douyuFont';
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
|
|
|
.tab-box {
|
|
|
--table-border: #0efcff44;
|
|
@@ -352,7 +351,8 @@ defineExpose({ setLoading });
|
|
|
display: flex;
|
|
|
color: #fff;
|
|
|
position: relative;
|
|
|
- top: 11px;
|
|
|
+ // top: 11px;
|
|
|
+ margin-top: 120px;
|
|
|
background: var(--tab-bg);
|
|
|
|
|
|
:deep(.zxm-tabs-nav) {
|
|
@@ -393,7 +393,8 @@ defineExpose({ setLoading });
|
|
|
width: 100%;
|
|
|
background-color: #0ebbff15;
|
|
|
position: relative;
|
|
|
- margin-top: 10px;
|
|
|
+ // margin-top: 10px;
|
|
|
+ margin-top: 80px;
|
|
|
|
|
|
&::after {
|
|
|
position: absolute;
|