|
|
@@ -0,0 +1,507 @@
|
|
|
+<template>
|
|
|
+ <div class="deviceMonitorWarn">
|
|
|
+ <customHeader>设备监测预警</customHeader>
|
|
|
+ <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
|
|
|
+ style="position: absolute; left: 15px; top: -66px; color: #fff" @click="getBack">返回</a-button>
|
|
|
+ <div class="content">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="left-box-content">
|
|
|
+ <div :class="activeIndex == index ? 'card-box1' : 'card-box'" v-for="(item, index) in cardList"
|
|
|
+ :key="index" @click="cardClick(item, index)">
|
|
|
+ <div class="card-item">
|
|
|
+ <div class="item-title">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="item-sum">
|
|
|
+ <span>总数：</span>
|
|
|
+ <span> {{ item.sumVal }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item-warn">
|
|
|
+ <span>报警数：</span>
|
|
|
+ <span> {{ item.warnVal }}</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="item-close">
|
|
|
+ <span>断开数：</span>
|
|
|
+ <span> {{ item.closeVal }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="right-box-content">
|
|
|
+ <div class="alarm-history-table">
|
|
|
+ <BasicTable :key="isShow" ref="alarmHistory" @register="registerTable"
|
|
|
+ :scroll="{ x: 0, y: 590 }">
|
|
|
+ <template #form-onExportXls>
|
|
|
+ <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()">
|
|
|
+ 导出</a-button>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
|
|
|
+import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+import { getTotalList, getAlarmLogList } from './deviceMonitorWarn.api'
|
|
|
+import { cardList } from './deviceMonitorWarn.data'
|
|
|
+import { BasicTable } from '/@/components/Table';
|
|
|
+import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ formConfig: {
|
|
|
+ type: Object as PropType<FormProps> | undefined,
|
|
|
+ default: undefined,
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+let router = useRouter();
|
|
|
+let activeIndex = ref(0)
|
|
|
+let devicekindType = ref('modelsensor')
|
|
|
+let isShow = ref(0)
|
|
|
+const deviceColumns = getTableHeaderColumns('alarm_history') as [];
|
|
|
+const dataColumns = ref(deviceColumns);
|
|
|
+
|
|
|
+// 列表页面公共参数、方法
|
|
|
+const { tableContext, onExportXls } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ api: getAlarmLogList,
|
|
|
+ columns: dataColumns,
|
|
|
+ canResize: true,
|
|
|
+ showTableSetting: false,
|
|
|
+ showActionColumn: false,
|
|
|
+ bordered: false,
|
|
|
+ size: 'small',
|
|
|
+ formConfig: {
|
|
|
+ labelAlign: 'left',
|
|
|
+ showAdvancedButton: false,
|
|
|
+ actionColOptions: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ label: '是否解决',
|
|
|
+ // field: 'isok',
|
|
|
+ field: 'isOk',
|
|
|
+ defaultValue: false,
|
|
|
+ component: 'Select',
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '未解决',
|
|
|
+ value: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '已解决',
|
|
|
+ value: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ colProps: { span: 8, },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '所属系统',
|
|
|
+ // field: 'kindtype',systemType
|
|
|
+ field: 'systemType',
|
|
|
+ component: 'Select',
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '通风',
|
|
|
+ value: 'ventS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '防灭火',
|
|
|
+ value: 'fireS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '防尘',
|
|
|
+ value: 'dustS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '瓦斯',
|
|
|
+ value: 'gasS',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ colProps: { span: 8 },
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // label: '设备类型',
|
|
|
+ // field: 'deviceKind',
|
|
|
+ // component: 'MTreeSelect',
|
|
|
+ // componentProps: {
|
|
|
+ // virtual: false,
|
|
|
+ // },
|
|
|
+ // colProps: { span: 8 },
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ field: 'starttime',
|
|
|
+ label: '开始时间',
|
|
|
+ component: 'DatePicker',
|
|
|
+ componentProps: {
|
|
|
+ showTime: true,
|
|
|
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ getPopupContainer: getAutoScrollContainer,
|
|
|
+ },
|
|
|
+ colProps: {
|
|
|
+ span: 8,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ fetchSetting: {
|
|
|
+ listField: 'records',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
+ },
|
|
|
+ beforeFetch(params) {
|
|
|
+ params['deviceKind'] = devicekindType.value;
|
|
|
+ return params;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ exportConfig: {
|
|
|
+ name: '预警历史列表',
|
|
|
+ url: '/safety/ventanalyAlarmLog/exportXls',
|
|
|
+ },
|
|
|
+});
|
|
|
+//注册table数据
|
|
|
+const [registerTable, { reload, setLoading, getForm }] = tableContext;
|
|
|
+
|
|
|
+//返回上一级
|
|
|
+function getBack() {
|
|
|
+ router.push('/monitorChannel/monitor-alarm-home');
|
|
|
+}
|
|
|
+//选项切换
|
|
|
+function cardClick(item, index) {
|
|
|
+ activeIndex.value = index
|
|
|
+ devicekindType.value = item.devicekind
|
|
|
+ isShow.value = new Date().getTime()
|
|
|
+}
|
|
|
+//获取左侧选项数据
|
|
|
+async function getDeviceCard() {
|
|
|
+ let res = await getTotalList({})
|
|
|
+ console.log(res, '左侧选项数据----------')
|
|
|
+ cardList.forEach(el => {
|
|
|
+ if (res.info.devicekindInfo[el.name]) {
|
|
|
+ el.sumVal = res.info.devicekindInfo[el.name].totalcount || 0
|
|
|
+ el.warnVal = res.info.devicekindInfo[el.name].count || 0
|
|
|
+ el.closeVal = res.info.devicekindInfo[el.name].netstatus || 0
|
|
|
+ el.devicekind = res.info.devicekindInfo[el.name].code || ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getDeviceCard()
|
|
|
+})
|
|
|
+defineExpose({ setLoading });
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.deviceMonitorWarn {
|
|
|
+ position: relative;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: calc(100% - 90px);
|
|
|
+ position: relative;
|
|
|
+ margin: 80px 10px 10px 10px;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ width: 45%;
|
|
|
+ height: 100%;
|
|
|
+ // margin-right: 15px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // background: url('@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+
|
|
|
+ .left-box-content {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .card-box {
|
|
|
+ width: 265px;
|
|
|
+ height: 112px;
|
|
|
+ margin: 0px 5px;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ background: url('../../../../assets/images/device/cgq.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ background: url('../../../../assets/images/device/jubufengji.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ background: url('../../../../assets/images/device/fengmen.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ background: url('../../../../assets/images/device/fengchuang.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6) {
|
|
|
+ background: url('../../../../assets/images/device/cefeng.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(7) {
|
|
|
+ background: url('../../../../assets/images/device/yafeng.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(8) {
|
|
|
+ background: url('../../../../assets/images/device/penling.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(9) {
|
|
|
+ background: url('../../../../assets/images/device/penfen.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(10) {
|
|
|
+ background: url('../../../../assets/images/device/zhudan.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(11) {
|
|
|
+ background: url('../../../../assets/images/device/zhujiang.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(12) {
|
|
|
+ background: url('../../../../assets/images/device/penwu.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(13) {
|
|
|
+ background: url('../../../../assets/images/device/chuchen.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(14) {
|
|
|
+ background: url('../../../../assets/images/device/wsgl.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(15) {
|
|
|
+ background: url('../../../../assets/images/device/wsb.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-item {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #01fefc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-sum {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-warn {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-close {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-box1 {
|
|
|
+ width: 265px;
|
|
|
+ height: 112px;
|
|
|
+ margin: 0px 5px;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ background: url('../../../../assets/images/device/cgq-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ background: url('../../../../assets/images/device/zhufengji-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ background: url('../../../../assets/images/device/jubufengji-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ background: url('../../../../assets/images/device/fengmen-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ background: url('../../../../assets/images/device/fengchuang-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6) {
|
|
|
+ background: url('../../../../assets/images/device/cefeng-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(7) {
|
|
|
+ background: url('../../../../assets/images/device/yafeng-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(8) {
|
|
|
+ background: url('../../../../assets/images/device/penling-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(9) {
|
|
|
+ background: url('../../../../assets/images/device/penfen-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(10) {
|
|
|
+ background: url('../../../../assets/images/device/zhudan-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(11) {
|
|
|
+ background: url('../../../../assets/images/device/zhujiang-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(12) {
|
|
|
+ background: url('../../../../assets/images/device/penwu-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(13) {
|
|
|
+ background: url('../../../../assets/images/device/chuchen-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(14) {
|
|
|
+ background: url('../../../../assets/images/device/wsgl-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(15) {
|
|
|
+ background: url('../../../../assets/images/device/wsb-1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-item {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #01fefc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-sum {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-warn {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-close {
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ width: 55%;
|
|
|
+ height: 100%;
|
|
|
+ background: url('../../../../assets/images/fire/border.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .right-box-content {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .alarm-history-table {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: calc(100% + 10px);
|
|
|
+ height: 2px;
|
|
|
+ top: 0px;
|
|
|
+ left: -10px;
|
|
|
+ border-bottom: 1px solid #0efcff44;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
