|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <customHeader>预警历史监控系统</customHeader>
|
|
|
+ <customHeader>预警历史监控系统222</customHeader>
|
|
|
<div class="data-statistics">
|
|
|
<div class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
|
|
|
<div class="left-box">
|
|
|
@@ -29,7 +29,8 @@
|
|
|
<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) }">
|
|
|
+ <span v-if="column.dataIndex === 'nwartype'"
|
|
|
+ :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
|
|
|
{{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
|
|
|
</span>
|
|
|
<span v-else>
|
|
|
@@ -38,14 +39,16 @@
|
|
|
</template>
|
|
|
</template>
|
|
|
</BasicTable>
|
|
|
- <BasicTable v-if="activeKey == 'manageAuto'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
|
|
|
+ <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) }">
|
|
|
+ <span v-if="column.dataIndex === 'nwartype'"
|
|
|
+ :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
|
|
|
{{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
|
|
|
</span>
|
|
|
<span v-else>
|
|
|
@@ -58,356 +61,381 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" name="system-user" setup>
|
|
|
- //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 { manageAutoColumns } from './alarm.data';
|
|
|
- import { getAutoScrollContainer } from '/@/utils/common/compUtils';
|
|
|
- import { getAlarmLogList, getManageAutoLogList, getWarnCountInfo } from './warning.api';
|
|
|
- import { useRoute } from 'vue-router';
|
|
|
- import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
- import { render } from '/@/utils/common/renderUtils';
|
|
|
- const props = defineProps({
|
|
|
+//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 { manageAutoColumns } from './alarm.data';
|
|
|
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
|
|
|
+import { getAlarmLogList, getManageAutoLogList, getWarnCountInfo } from './warning.api';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+import { render } from '/@/utils/common/renderUtils';
|
|
|
+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 list = ref<any>(getAlarmLogList);
|
|
|
+
|
|
|
+// 列表页面公共参数、方法
|
|
|
+const { tableContext, onExportXls } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ api: list,
|
|
|
+ columns: dataColumns,
|
|
|
+ canResize: true,
|
|
|
+ showTableSetting: false,
|
|
|
+ showActionColumn: false,
|
|
|
+ showIndexColumn: true,
|
|
|
+ bordered: false,
|
|
|
+ size: 'small',
|
|
|
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 list = ref<any>(getAlarmLogList);
|
|
|
-
|
|
|
- // 列表页面公共参数、方法
|
|
|
- const { tableContext, onExportXls } = useListPage({
|
|
|
- tableProps: {
|
|
|
- api: list,
|
|
|
- columns: dataColumns,
|
|
|
- canResize: true,
|
|
|
- showTableSetting: false,
|
|
|
- showActionColumn: false,
|
|
|
- showIndexColumn: true,
|
|
|
- bordered: false,
|
|
|
- size: 'small',
|
|
|
- formConfig: {
|
|
|
- labelAlign: 'left',
|
|
|
- showAdvancedButton: false,
|
|
|
- // autoAdvancedCol: 2,
|
|
|
- schemas: [
|
|
|
- {
|
|
|
- label: '是否解决',
|
|
|
- // field: 'isok',
|
|
|
- field: 'isOk',
|
|
|
- defaultValue: false,
|
|
|
- component: 'Select',
|
|
|
- componentProps: {
|
|
|
- options: [
|
|
|
- {
|
|
|
- label: '未解决',
|
|
|
- value: false,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '已解决',
|
|
|
- value: true,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- colProps: { span: 4 },
|
|
|
+ labelAlign: 'left',
|
|
|
+ showAdvancedButton: false,
|
|
|
+ // autoAdvancedCol: 2,
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ label: '是否解决',
|
|
|
+ // field: 'isok',
|
|
|
+ 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: 'kindtype',systemType
|
|
|
+ field: 'systemType',
|
|
|
+ component: 'Select',
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '通风',
|
|
|
+ value: 'ventS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '防灭火',
|
|
|
+ value: 'fireS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '防尘',
|
|
|
+ value: 'dustS',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '瓦斯',
|
|
|
+ value: 'gasS',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- {
|
|
|
- label: '设备类型',
|
|
|
- field: 'deviceKind',
|
|
|
- component: 'MTreeSelect',
|
|
|
- componentProps: {
|
|
|
- virtual: false,
|
|
|
- },
|
|
|
- colProps: { span: 4 },
|
|
|
+ colProps: { span: 4 },
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // label: '设备类型',
|
|
|
+ // field: 'deviceKind',
|
|
|
+ // component: 'MTreeSelect',
|
|
|
+ // componentProps: {
|
|
|
+ // virtual: false,
|
|
|
+ // },
|
|
|
+ // colProps: { span: 4 },
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ label: '设备类型',
|
|
|
+ field: 'deviceKind',
|
|
|
+ component: 'Select',
|
|
|
+ defaultValue: '',
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: '',
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
},
|
|
|
- {
|
|
|
- field: 'starttime',
|
|
|
- label: '开始报警时间',
|
|
|
- component: 'DatePicker',
|
|
|
- componentProps: {
|
|
|
- showTime: true,
|
|
|
- valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
- getPopupContainer: getAutoScrollContainer,
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 4,
|
|
|
- },
|
|
|
+ colProps: { span: 4 },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'starttime',
|
|
|
+ label: '开始报警时间',
|
|
|
+ component: 'DatePicker',
|
|
|
+ componentProps: {
|
|
|
+ showTime: true,
|
|
|
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ getPopupContainer: getAutoScrollContainer,
|
|
|
},
|
|
|
- // {
|
|
|
- // field: 'endtime',
|
|
|
- // label: '结束时间',
|
|
|
- // component: 'DatePicker',
|
|
|
- // componentProps: {
|
|
|
- // showTime: true,
|
|
|
- // valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
- // getPopupContainer: getAutoScrollContainer,
|
|
|
- // },
|
|
|
- // colProps: {
|
|
|
- // span: 4,
|
|
|
- // },
|
|
|
- // },
|
|
|
- ],
|
|
|
- },
|
|
|
- fetchSetting: {
|
|
|
- listField: 'records',
|
|
|
- },
|
|
|
- pagination: {
|
|
|
- current: 1,
|
|
|
- pageSize: 10,
|
|
|
- pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
- },
|
|
|
- beforeFetch(params) {
|
|
|
- if (!params['deviceKind']) {
|
|
|
- params['deviceKind'] = null;
|
|
|
- }
|
|
|
- return params;
|
|
|
- },
|
|
|
+ colProps: {
|
|
|
+ span: 4,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // field: 'endtime',
|
|
|
+ // label: '结束时间',
|
|
|
+ // component: 'DatePicker',
|
|
|
+ // componentProps: {
|
|
|
+ // showTime: true,
|
|
|
+ // valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
|
+ // getPopupContainer: getAutoScrollContainer,
|
|
|
+ // },
|
|
|
+ // colProps: {
|
|
|
+ // span: 4,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ ],
|
|
|
},
|
|
|
- exportConfig: {
|
|
|
- name: '预警历史列表',
|
|
|
- url: '/safety/ventanalyAlarmLog/exportXls',
|
|
|
+ fetchSetting: {
|
|
|
+ listField: 'records',
|
|
|
},
|
|
|
- });
|
|
|
- //注册table数据
|
|
|
- const [registerTable, { reload, setLoading, getForm }] = tableContext;
|
|
|
-
|
|
|
- function onChangeTab(tab) {
|
|
|
- if (tab === 'device') {
|
|
|
- list.value = getAlarmLogList;
|
|
|
- dataColumns.value = deviceColumns;
|
|
|
- } else {
|
|
|
- list.value = getManageAutoLogList;
|
|
|
- dataColumns.value = manageAutoColumns;
|
|
|
- }
|
|
|
- }
|
|
|
+ pagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
+ },
|
|
|
+ beforeFetch(params) {
|
|
|
+ if (!params['deviceKind']) {
|
|
|
+ params['deviceKind'] = null;
|
|
|
+ }
|
|
|
+ return params;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ exportConfig: {
|
|
|
+ name: '预警历史列表',
|
|
|
+ url: '/safety/ventanalyAlarmLog/exportXls',
|
|
|
+ },
|
|
|
+});
|
|
|
+//注册table数据
|
|
|
+const [registerTable, { reload, setLoading, getForm }] = tableContext;
|
|
|
|
|
|
- //获取预警统计信息
|
|
|
- async function getEachMineWarnCountInfoList() {
|
|
|
- let res = await getWarnCountInfo({});
|
|
|
- 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 || '';
|
|
|
+function onChangeTab(tab) {
|
|
|
+ if (tab === 'device') {
|
|
|
+ list.value = getAlarmLogList;
|
|
|
+ dataColumns.value = deviceColumns;
|
|
|
+ } else {
|
|
|
+ list.value = getManageAutoLogList;
|
|
|
+ dataColumns.value = manageAutoColumns;
|
|
|
}
|
|
|
- onMounted(async () => {
|
|
|
- getEachMineWarnCountInfoList();
|
|
|
- });
|
|
|
+}
|
|
|
|
|
|
- defineExpose({ setLoading });
|
|
|
+//获取预警统计信息
|
|
|
+async function getEachMineWarnCountInfoList() {
|
|
|
+ let res = await getWarnCountInfo({});
|
|
|
+ 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>
|
|
|
|
|
|
<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: 90px;
|
|
|
- background-color: #0ebbff15;
|
|
|
+ .statistics-box {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
- .statistics-box {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
+ .left-box {
|
|
|
+ position: relative;
|
|
|
+ width: 138px;
|
|
|
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;
|
|
|
|
|
|
- .left-box {
|
|
|
+ .box-text {
|
|
|
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;
|
|
|
- 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%);
|
|
|
- font-family: 'douyuFont';
|
|
|
- }
|
|
|
- }
|
|
|
- .warning-state {
|
|
|
- .text-value {
|
|
|
- color: aqua !important;
|
|
|
- font-family: 'douyuFont';
|
|
|
- }
|
|
|
- }
|
|
|
+ .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-box {
|
|
|
- display: flex;
|
|
|
- color: #fff;
|
|
|
- position: relative;
|
|
|
- top: 11px;
|
|
|
- background: linear-gradient(#001325, #012e4f);
|
|
|
- :deep(.zxm-tabs-nav) {
|
|
|
+
|
|
|
+ .zxm-tabs-ink-bar {
|
|
|
+ width: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-tabs-tab+.zxm-tabs-tab {
|
|
|
margin: 0 !important;
|
|
|
- .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;
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
