|
@@ -1,504 +0,0 @@
|
|
-<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>
|
|
|