|
@@ -1,4 +1,5 @@
|
|
<template>
|
|
<template>
|
|
|
|
+ <customHeader>预警历史监控系统</customHeader>
|
|
<div class="data-statistics">
|
|
<div class="data-statistics">
|
|
<div class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
|
|
<div class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
|
|
<div class="left-box">
|
|
<div class="left-box">
|
|
@@ -9,15 +10,25 @@
|
|
<div class="text-label">监测数量</div>
|
|
<div class="text-label">监测数量</div>
|
|
<div class="text-value">{{ item.valueT }}</div>
|
|
<div class="text-value">{{ item.valueT }}</div>
|
|
</div>
|
|
</div>
|
|
- <div class="box-text">
|
|
|
|
|
|
+ <div class="warning-state box-text">
|
|
<div class="text-label">预警状态</div>
|
|
<div class="text-label">预警状态</div>
|
|
<div class="text-value">{{ item.valueB }}</div>
|
|
<div class="text-value">{{ item.valueB }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
|
|
|
|
+ <a-tab-pane tab="设备预警历史" key="device" />
|
|
|
|
+ <a-tab-pane tab="联动预警历史" key="manageAuto" />
|
|
|
|
+ </a-tabs>
|
|
<div class="alarm-history-table">
|
|
<div class="alarm-history-table">
|
|
- <BasicTable ref="alarmHistory" @register="registerTable">
|
|
|
|
|
|
+ <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>
|
|
|
|
+ </BasicTable>
|
|
|
|
+ <BasicTable v-if="activeKey == 'manageAuto'" ref="alarmHistory" @register="registerTable"
|
|
|
|
+ :scroll="{ x: 0, y: 350 }">
|
|
<template #form-onExportXls>
|
|
<template #form-onExportXls>
|
|
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
|
|
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
|
|
</template>
|
|
</template>
|
|
@@ -26,362 +37,421 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" name="system-user" setup>
|
|
<script lang="ts" name="system-user" setup>
|
|
- //ts语法
|
|
|
|
- import { watch, ref, defineExpose, inject, onMounted, reactive } from 'vue';
|
|
|
|
- import { BasicTable } from '/@/components/Table';
|
|
|
|
- import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
|
- import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
|
- import { defHttp } from '/@/utils/http/axios';
|
|
|
|
- import dayjs from 'dayjs';
|
|
|
|
- import { getAutoScrollContainer } from '/@/utils/common/compUtils';
|
|
|
|
- import { list, getEachMineWarnCountInfo } from './warning.api';
|
|
|
|
- import { useGlobSetting } from '/@/hooks/setting';
|
|
|
|
- import { useRoute } from 'vue-router';
|
|
|
|
-
|
|
|
|
- const props = defineProps({
|
|
|
|
- deviceListApi: {
|
|
|
|
- type: Function,
|
|
|
|
- },
|
|
|
|
- designScope: {
|
|
|
|
- type: String,
|
|
|
|
- },
|
|
|
|
- sysId: {
|
|
|
|
- type: String,
|
|
|
|
- },
|
|
|
|
- list: {
|
|
|
|
- type: Function,
|
|
|
|
- default: (params) => defHttp.post({ url: '/ventanaly-company/company/index/getEachMineWarnLogList', params }),
|
|
|
|
- },
|
|
|
|
- });
|
|
|
|
- const route = useRoute();
|
|
|
|
- let orgcode = '';
|
|
|
|
- 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 alarmHistory = ref();
|
|
|
|
- const columns = getTableHeaderColumns('alarm_history');
|
|
|
|
-
|
|
|
|
- // 列表页面公共参数、方法
|
|
|
|
- const { tableContext, onExportXls } = useListPage({
|
|
|
|
- tableProps: {
|
|
|
|
- api: list,
|
|
|
|
- columns: columns,
|
|
|
|
- canResize: true,
|
|
|
|
- showTableSetting: false,
|
|
|
|
- showActionColumn: false,
|
|
|
|
- bordered: false,
|
|
|
|
- size: 'small',
|
|
|
|
- formConfig: {
|
|
|
|
- labelAlign: 'left',
|
|
|
|
- showAdvancedButton: false,
|
|
|
|
- // autoAdvancedCol: 2,
|
|
|
|
- schemas: [
|
|
|
|
- {
|
|
|
|
- label: '是否解决',
|
|
|
|
- // field: 'isok',
|
|
|
|
- field: 'isOk',
|
|
|
|
- component: 'Select',
|
|
|
|
- componentProps: {
|
|
|
|
- options: [
|
|
|
|
- {
|
|
|
|
- label: '未解决',
|
|
|
|
- value: '0',
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: '已解决',
|
|
|
|
- value: '1',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
- colProps: { span: 4 },
|
|
|
|
|
|
+//ts语法
|
|
|
|
+import { watch, ref, defineExpose, onMounted, reactive } from 'vue';
|
|
|
|
+import { BasicTable } from '/@/components/Table';
|
|
|
|
+import { useListPage } from '/@/hooks/system/useListPage';
|
|
|
|
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
|
+import { manageAutoColumns1 } from './alarm.data';
|
|
|
|
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
|
|
|
|
+import { list, getEachMineWarnCountInfo } from './warning.api';
|
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
|
+import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
|
+const props = defineProps({
|
|
|
|
+ formConfig: {
|
|
|
|
+ type: Object as PropType<FormProps> | undefined,
|
|
|
|
+ default: undefined,
|
|
|
|
+ },
|
|
|
|
+});
|
|
|
|
+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: '' },
|
|
|
|
+]);
|
|
|
|
+const activeKey = ref('device');
|
|
|
|
+const alarmHistory = ref();
|
|
|
|
+const deviceColumns = getTableHeaderColumns('alarm_history') as [];
|
|
|
|
+const dataColumns = ref(deviceColumns);
|
|
|
|
+const paramType = ref('alarmLog')
|
|
|
|
+
|
|
|
|
+// 列表页面公共参数、方法
|
|
|
|
+const { tableContext, onExportXls } = useListPage({
|
|
|
|
+ tableProps: {
|
|
|
|
+ api: list,
|
|
|
|
+ columns: dataColumns,
|
|
|
|
+ canResize: true,
|
|
|
|
+ showTableSetting: false,
|
|
|
|
+ showActionColumn: false,
|
|
|
|
+ bordered: false,
|
|
|
|
+ size: 'small',
|
|
|
|
+ formConfig: {
|
|
|
|
+ labelAlign: 'left',
|
|
|
|
+ showAdvancedButton: false,
|
|
|
|
+ // autoAdvancedCol: 4,
|
|
|
|
+ // labelWidth:50,
|
|
|
|
+ schemas: [
|
|
|
|
+ {
|
|
|
|
+ label: '是否解决',
|
|
|
|
+ field: 'isOk',
|
|
|
|
+ defaultValue: false,
|
|
|
|
+ component: 'Select',
|
|
|
|
+ componentProps: {
|
|
|
|
+ options: [
|
|
|
|
+ {
|
|
|
|
+ label: '未解决',
|
|
|
|
+ value: false,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '已解决',
|
|
|
|
+ value: true,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
},
|
|
},
|
|
- {
|
|
|
|
- label: '所属系统',
|
|
|
|
- // field: 'kindtype',systemType
|
|
|
|
- field: 'systemType',
|
|
|
|
- component: 'Select',
|
|
|
|
- componentProps: {
|
|
|
|
- options: [
|
|
|
|
- {
|
|
|
|
- label: '通风',
|
|
|
|
- value: 'ventS',
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: '防灭火',
|
|
|
|
- value: 'fireS',
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: '防尘',
|
|
|
|
- value: 'dustS',
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: '瓦斯',
|
|
|
|
- value: 'gasS',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
- colProps: { span: 4 },
|
|
|
|
|
|
+ colProps: { span: 4 },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '系统',
|
|
|
|
+ field: 'systemType',
|
|
|
|
+ component: 'Select',
|
|
|
|
+ componentProps: {
|
|
|
|
+ options: [
|
|
|
|
+ {
|
|
|
|
+ label: '通风',
|
|
|
|
+ value: 'ventS',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '防灭火',
|
|
|
|
+ value: 'fireS',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '防尘',
|
|
|
|
+ value: 'dustS',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '瓦斯',
|
|
|
|
+ value: 'gasS',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
},
|
|
},
|
|
-
|
|
|
|
- {
|
|
|
|
- field: 'starttime',
|
|
|
|
- label: '开始时间',
|
|
|
|
- component: 'DatePicker',
|
|
|
|
- defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
|
- required: true,
|
|
|
|
- componentProps: {
|
|
|
|
- showTime: true,
|
|
|
|
- valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
|
- getPopupContainer: getAutoScrollContainer,
|
|
|
|
- },
|
|
|
|
- colProps: {
|
|
|
|
- span: 4,
|
|
|
|
- },
|
|
|
|
|
|
+ colProps: { span: 3 },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '矿编码',
|
|
|
|
+ field: 'orgcode',
|
|
|
|
+ component: 'Select',
|
|
|
|
+ defaultValue: 'sdmtjtbetmk',
|
|
|
|
+ componentProps: {
|
|
|
|
+ options: [
|
|
|
|
+ {
|
|
|
|
+ label: '布尔台煤矿',
|
|
|
|
+ value: 'sdmtjtbetmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '活鸡兔井',
|
|
|
|
+ value: 'sdmtjtdltmkhjtj',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '大柳塔井',
|
|
|
|
+ value: 'sdmtjtdltmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '补连塔煤矿',
|
|
|
|
+ value: 'sdmtjtbltmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '上湾煤矿',
|
|
|
|
+ value: 'sdmtjtswmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '锦界煤矿',
|
|
|
|
+ value: 'sdmtjtjjmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '哈拉沟煤矿',
|
|
|
|
+ value: 'sdmtjthlgmk',
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ label: '柳塔煤矿',
|
|
|
|
+ value: 'sdmtjtltmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '石圪台煤矿',
|
|
|
|
+ value: 'sdmtjtsgtmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '保德煤矿',
|
|
|
|
+ value: 'sdmtjtbdmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '寸草塔煤矿',
|
|
|
|
+ value: 'sdmtjtcctmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '寸草塔二矿',
|
|
|
|
+ value: 'sdmtjtcctrk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '榆家粱煤矿',
|
|
|
|
+ value: 'sdmtjtyjlmk',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '乌兰木伦煤矿',
|
|
|
|
+ value: 'sdmtjtwlmlmk',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
},
|
|
},
|
|
- {
|
|
|
|
- field: 'endtime',
|
|
|
|
- label: '结束时间',
|
|
|
|
- component: 'DatePicker',
|
|
|
|
- defaultValue: dayjs(),
|
|
|
|
- required: true,
|
|
|
|
- componentProps: {
|
|
|
|
- showTime: true,
|
|
|
|
- valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
|
- getPopupContainer: getAutoScrollContainer,
|
|
|
|
- },
|
|
|
|
- colProps: {
|
|
|
|
- span: 4,
|
|
|
|
- },
|
|
|
|
|
|
+ colProps: { span: 3 },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ field: 'starttime',
|
|
|
|
+ label: '开始时间',
|
|
|
|
+ component: 'DatePicker',
|
|
|
|
+ componentProps: {
|
|
|
|
+ showTime: true,
|
|
|
|
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
|
+ getPopupContainer: getAutoScrollContainer,
|
|
},
|
|
},
|
|
- ],
|
|
|
|
- },
|
|
|
|
- fetchSetting: {
|
|
|
|
- listField: 'records',
|
|
|
|
- },
|
|
|
|
- pagination: {
|
|
|
|
- current: 1,
|
|
|
|
- pageSize: 10,
|
|
|
|
- pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
|
- },
|
|
|
|
- beforeFetch(params) {
|
|
|
|
- const { sysOrgCode } = useGlobSetting();
|
|
|
|
- params.orgcode = orgcode ? orgcode : sysOrgCode;
|
|
|
|
- params.type = 'alarmLog';
|
|
|
|
- // params.devicetype = params.devicetype ? params.devicetype + '*' : '';
|
|
|
|
- if (props.sysId) {
|
|
|
|
- params.sysId = props.sysId;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+ colProps: {
|
|
|
|
+ span: 4,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ field: 'endtime',
|
|
|
|
+ label: '结束时间',
|
|
|
|
+ component: 'DatePicker',
|
|
|
|
+ componentProps: {
|
|
|
|
+ showTime: true,
|
|
|
|
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
|
+ getPopupContainer: getAutoScrollContainer,
|
|
|
|
+ },
|
|
|
|
+ colProps: {
|
|
|
|
+ span: 4,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ fetchSetting: {
|
|
|
|
+ listField: 'records',
|
|
},
|
|
},
|
|
- exportConfig: {
|
|
|
|
- name: '预警历史列表',
|
|
|
|
- url: '/safety/ventanalyAlarmLog/exportXls',
|
|
|
|
|
|
+ pagination: {
|
|
|
|
+ current: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ pageSizeOptions: ['10', '30', '50', '100'],
|
|
},
|
|
},
|
|
- });
|
|
|
|
- //注册table数据
|
|
|
|
- const [registerTable, { reload, setLoading, getForm }] = tableContext;
|
|
|
|
-
|
|
|
|
- //获取预警统计信息
|
|
|
|
- async function getEachMineWarnCountInfoList() {
|
|
|
|
- const { sysOrgCode } = useGlobSetting();
|
|
|
|
- let res = await getEachMineWarnCountInfo({ orgcode: orgcode ? orgcode : sysOrgCode });
|
|
|
|
- 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 || '';
|
|
|
|
|
|
+ beforeFetch(params) {
|
|
|
|
+ params.type = paramType.value
|
|
|
|
+ return params;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ exportConfig: {
|
|
|
|
+ name: '预警历史列表',
|
|
|
|
+ url: '/safety/ventanalyAlarmLog/exportXls',
|
|
|
|
+ },
|
|
|
|
+});
|
|
|
|
+//注册table数据
|
|
|
|
+const [registerTable, { reload, setLoading, getForm }] = tableContext;
|
|
|
|
+
|
|
|
|
+function onChangeTab(tab) {
|
|
|
|
+ if (tab === 'device') {
|
|
|
|
+ paramType.value = 'alarmLog'
|
|
|
|
+ dataColumns.value = deviceColumns;
|
|
|
|
+ } else {
|
|
|
|
+ paramType.value = 'autoLog'
|
|
|
|
+ dataColumns.value = manageAutoColumns1;
|
|
}
|
|
}
|
|
- onMounted(async () => {
|
|
|
|
- orgcode = route.query['orgcode'] as string;
|
|
|
|
- getEachMineWarnCountInfoList();
|
|
|
|
- });
|
|
|
|
|
|
+}
|
|
|
|
|
|
- defineExpose({ setLoading });
|
|
|
|
|
|
+//获取预警统计信息
|
|
|
|
+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 || '';
|
|
|
|
+}
|
|
|
|
+onMounted(async () => {
|
|
|
|
+ getEachMineWarnCountInfoList();
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+defineExpose({ setLoading });
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
<style scoped lang="less">
|
|
- @ventSpace: zxm;
|
|
|
|
|
|
+@ventSpace: zxm;
|
|
|
|
|
|
- :deep(.zxm-table-container) {
|
|
|
|
- max-height: 720px !important;
|
|
|
|
- }
|
|
|
|
|
|
+:deep(.zxm-table-container) {
|
|
|
|
+ max-height: 720px !important;
|
|
|
|
+}
|
|
|
|
|
|
- :deep(.ventSpace-table-body) {
|
|
|
|
- height: auto !important;
|
|
|
|
- }
|
|
|
|
|
|
+:deep(.ventSpace-table-body) {
|
|
|
|
+ height: auto !important;
|
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-picker) {
|
|
|
|
- height: 30px !important;
|
|
|
|
- }
|
|
|
|
|
|
+:deep(.zxm-picker) {
|
|
|
|
+ height: 30px !important;
|
|
|
|
+}
|
|
|
|
|
|
- :deep(.@{ventSpace}-picker-dropdown) {
|
|
|
|
- position: absolute !important;
|
|
|
|
- top: 35px !important;
|
|
|
|
- left: 0 !important;
|
|
|
|
- }
|
|
|
|
|
|
+:deep(.@{ventSpace}-picker-dropdown) {
|
|
|
|
+ position: absolute !important;
|
|
|
|
+ top: 35px !important;
|
|
|
|
+ left: 0 !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.data-statistics {
|
|
|
|
+ height: 200px;
|
|
|
|
+ padding: 20px;
|
|
|
|
+ margin-top: 90px;
|
|
|
|
+ background-color: #0ebbff15;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .data-statistics {
|
|
|
|
- height: 200px;
|
|
|
|
- padding: 20px;
|
|
|
|
- margin-top: 20px;
|
|
|
|
- background-color: #0ebbff15;
|
|
|
|
|
|
+ .statistics-box {
|
|
display: flex;
|
|
display: flex;
|
|
- justify-content: space-between;
|
|
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 100%;
|
|
|
|
+ justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
- .statistics-box {
|
|
|
|
- display: flex;
|
|
|
|
- flex: 1;
|
|
|
|
|
|
+ .left-box {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 138px;
|
|
height: 100%;
|
|
height: 100%;
|
|
- justify-content: center;
|
|
|
|
|
|
+
|
|
|
|
+ .box-title {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 50%;
|
|
|
|
+ bottom: 18px;
|
|
|
|
+ transform: translate(-50%, 0);
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:nth-child(1) .left-box {
|
|
|
|
+ background: url('../../../../assets/images/vent-tf.png') no-repeat center;
|
|
|
|
+ background-size: 100% auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:nth-child(2) .left-box {
|
|
|
|
+ background: url('../../../../assets/images/dust-fc.png') no-repeat center;
|
|
|
|
+ background-size: 100% auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:nth-child(3) .left-box {
|
|
|
|
+ background: url('../../../../assets/images/gas-ws.png') no-repeat center;
|
|
|
|
+ background-size: 100% auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:nth-child(4) .left-box {
|
|
|
|
+ background: url('../../../../assets/images/fire-fz.png') no-repeat center;
|
|
|
|
+ background-size: 100% auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:nth-child(5) .left-box {
|
|
|
|
+ background: url('../../../../assets/images/aqjc.png') 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;
|
|
align-items: center;
|
|
|
|
|
|
- .left-box {
|
|
|
|
|
|
+ .box-text {
|
|
position: relative;
|
|
position: relative;
|
|
- width: 138px;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 40px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ background: url('../../../../assets/images/his-one.png') no-repeat center;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .box-title {
|
|
|
|
|
|
+ .text-label {
|
|
position: absolute;
|
|
position: absolute;
|
|
- left: 50%;
|
|
|
|
- bottom: 18px;
|
|
|
|
- transform: translate(-50%, 0);
|
|
|
|
- color: #fff;
|
|
|
|
|
|
+ left: 20px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translate(0, -50%);
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
|
|
- &:nth-child(1) .left-box {
|
|
|
|
- background: url('../../../../assets/images/vent-tf.png') no-repeat center;
|
|
|
|
- background-size: 100% auto;
|
|
|
|
|
|
+ .text-value {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 130px;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translate(0, -50%);
|
|
|
|
+ font-family: 'douyuFont';
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
- &:nth-child(2) .left-box {
|
|
|
|
- background: url('../../../../assets/images/dust-fc.png') no-repeat center;
|
|
|
|
- background-size: 100% auto;
|
|
|
|
|
|
+ .warning-state {
|
|
|
|
+ .text-value {
|
|
|
|
+ color: aqua !important;
|
|
|
|
+ font-family: 'douyuFont';
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
|
|
- &:nth-child(3) .left-box {
|
|
|
|
- background: url('../../../../assets/images/gas-ws.png') no-repeat center;
|
|
|
|
- background-size: 100% auto;
|
|
|
|
- }
|
|
|
|
|
|
+.tab-box {
|
|
|
|
+ display: flex;
|
|
|
|
+ color: #fff;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 11px;
|
|
|
|
+ background: linear-gradient(#001325, #012e4f);
|
|
|
|
|
|
- &:nth-child(4) .left-box {
|
|
|
|
- background: url('../../../../assets/images/fire-fz.png') no-repeat center;
|
|
|
|
- background-size: 100% auto;
|
|
|
|
- }
|
|
|
|
|
|
+ :deep(.zxm-tabs-nav) {
|
|
|
|
+ margin: 0 !important;
|
|
|
|
|
|
- &:nth-child(5) .left-box {
|
|
|
|
- background: url('../../../../assets/images/aqjc.png') no-repeat center;
|
|
|
|
- background-size: 100% auto;
|
|
|
|
- }
|
|
|
|
|
|
+ .zxm-tabs-tab {
|
|
|
|
+ width: 180px;
|
|
|
|
+ height: 45px;
|
|
|
|
+ background: url('@/assets/images/top-btn.png') center no-repeat;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
|
|
- .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: url('../../../../assets/images/his-one.png') 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%);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ .zxm-tabs-tab-active {
|
|
|
|
+ width: 180px;
|
|
|
|
+ position: relative;
|
|
|
|
+ background: url('@/assets/images/top-btn-select.png') center no-repeat;
|
|
|
|
+ background-size: cover;
|
|
|
|
+
|
|
|
|
+ .zxm-tabs-tab-btn {
|
|
|
|
+ color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
|
|
- // .tab-button-group {
|
|
|
|
- // // line-height: 60px;
|
|
|
|
- // margin-top: 16px;
|
|
|
|
- // display: flex;
|
|
|
|
- // pointer-events: auto;
|
|
|
|
- // position: relative;
|
|
|
|
- // &::after {
|
|
|
|
- // position: absolute;
|
|
|
|
- // content: '';
|
|
|
|
- // width: calc(100% + 10px);
|
|
|
|
- // height: 2px;
|
|
|
|
- // top: 44px;
|
|
|
|
- // left: -10px;
|
|
|
|
- // border-bottom: 1px solid #0efcff;
|
|
|
|
- // }
|
|
|
|
- // .tab-button {
|
|
|
|
- // padding: 10px 30px;
|
|
|
|
- // position: relative;
|
|
|
|
- // display: flex;
|
|
|
|
- // justify-content: center;
|
|
|
|
- // align-items: center;
|
|
|
|
- // font-size: 16px;
|
|
|
|
- // color: #fff;
|
|
|
|
- // cursor: pointer;
|
|
|
|
- // margin-right: 10px;
|
|
|
|
- // background-color: rgba(0, 103, 103, 0.253);
|
|
|
|
- // &::before {
|
|
|
|
- // content: '';
|
|
|
|
- // position: absolute;
|
|
|
|
- // top: 0;
|
|
|
|
- // right: 0;
|
|
|
|
- // bottom: 0;
|
|
|
|
- // left: 0;
|
|
|
|
- // border: 1px solid #2bb2c4;
|
|
|
|
- // // transform: skewX(-38deg);
|
|
|
|
- // // background-color: rgba(0, 77, 103, 85%);
|
|
|
|
- // z-index: 0;
|
|
|
|
- // }
|
|
|
|
- // &::after {
|
|
|
|
- // background-color: rgba(0, 77, 103, 85%);
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
- // .active {
|
|
|
|
- // &::before {
|
|
|
|
- // border-color: #46fcff;
|
|
|
|
- // box-shadow: 1px 1px 10px 2px #0efcff99 inset;
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
- .alarm-history-table {
|
|
|
|
- width: 100%;
|
|
|
|
- background-color: #0ebbff15;
|
|
|
|
- position: relative;
|
|
|
|
- margin-top: 10px;
|
|
|
|
-
|
|
|
|
- &::after {
|
|
|
|
- position: absolute;
|
|
|
|
- content: '';
|
|
|
|
- width: calc(100% + 10px);
|
|
|
|
- height: 2px;
|
|
|
|
- top: 0px;
|
|
|
|
- left: -10px;
|
|
|
|
- border-bottom: 1px solid #0efcff99;
|
|
|
|
|
|
+ .zxm-tabs-ink-bar {
|
|
|
|
+ width: 0 !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .zxm-tabs-tab+.zxm-tabs-tab {
|
|
|
|
+ margin: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.alarm-history-table {
|
|
|
|
+ width: 100%;
|
|
|
|
+ background-color: #0ebbff15;
|
|
|
|
+ position: relative;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+
|
|
|
|
+ &::after {
|
|
|
|
+ position: absolute;
|
|
|
|
+ content: '';
|
|
|
|
+ width: calc(100% + 10px);
|
|
|
|
+ height: 2px;
|
|
|
|
+ top: 0px;
|
|
|
|
+ left: -10px;
|
|
|
|
+ border-bottom: 1px solid #0efcff44;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|