|
|
@@ -30,8 +30,7 @@
|
|
|
<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>
|
|
|
@@ -40,16 +39,14 @@
|
|
|
</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>
|
|
|
@@ -65,8 +62,7 @@
|
|
|
<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>
|
|
|
@@ -79,330 +75,323 @@
|
|
|
</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 { manageAutoColumns1, safetyColumns, safetySchema, unsafetySchema } from './alarm.data';
|
|
|
-
|
|
|
-import { list, getEachMineWarnCountInfo, getExportUrl } 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('safety');
|
|
|
-const alarmHistory = ref();
|
|
|
-const deviceColumns = getTableHeaderColumns('alarm_history') as [];
|
|
|
-const dataColumns = ref<any>(safetyColumns);
|
|
|
-const searchFormSchema = ref<any>(safetySchema);
|
|
|
-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
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-// 列表页面公共参数、方法
|
|
|
-const { tableContext, onExportXls, onExportXlsPost } = useListPage({
|
|
|
- tableProps: {
|
|
|
- api: list,
|
|
|
- columns: dataColumns,
|
|
|
- canResize: true,
|
|
|
- showTableSetting: false,
|
|
|
- showActionColumn: false,
|
|
|
- showIndexColumn: true,
|
|
|
- bordered: false,
|
|
|
- size: 'small',
|
|
|
+ //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, safetyColumns, safetySchema, unsafetySchema } from './alarm.data';
|
|
|
+
|
|
|
+ import { list, getEachMineWarnCountInfo, getExportUrl } 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: {
|
|
|
- labelAlign: 'left',
|
|
|
- showAdvancedButton: false,
|
|
|
- // autoAdvancedCol: 4,
|
|
|
- // labelWidth:50,
|
|
|
- schemas: searchFormSchema as any
|
|
|
- },
|
|
|
- fetchSetting: {
|
|
|
- listField: 'records',
|
|
|
+ type: Object as PropType<FormProps> | undefined,
|
|
|
+ default: undefined,
|
|
|
},
|
|
|
- pagination: {
|
|
|
- current: 1,
|
|
|
- pageSize: 10,
|
|
|
- pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
+ });
|
|
|
+ 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('safety');
|
|
|
+ const alarmHistory = ref();
|
|
|
+ const deviceColumns = getTableHeaderColumns('alarm_history') as [];
|
|
|
+ const dataColumns = ref<any>(safetyColumns);
|
|
|
+ const searchFormSchema = ref<any>(safetySchema);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 列表页面公共参数、方法
|
|
|
+ const { tableContext, onExportXls, onExportXlsPost } = useListPage({
|
|
|
+ tableProps: {
|
|
|
+ api: list,
|
|
|
+ columns: dataColumns,
|
|
|
+ canResize: true,
|
|
|
+ showTableSetting: false,
|
|
|
+ showActionColumn: false,
|
|
|
+ showIndexColumn: true,
|
|
|
+ bordered: false,
|
|
|
+ size: 'small',
|
|
|
+ formConfig: {
|
|
|
+ labelAlign: 'left',
|
|
|
+ showAdvancedButton: false,
|
|
|
+ // autoAdvancedCol: 4,
|
|
|
+ // labelWidth:50,
|
|
|
+ schemas: searchFormSchema as any,
|
|
|
+ },
|
|
|
+ fetchSetting: {
|
|
|
+ listField: 'records',
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageSizeOptions: ['10', '30', '50', '100'],
|
|
|
+ },
|
|
|
+ beforeFetch(params) {
|
|
|
+ params.type = paramType.value;
|
|
|
+ return params;
|
|
|
+ },
|
|
|
},
|
|
|
- beforeFetch(params) {
|
|
|
- params.type = paramType.value;
|
|
|
- return params;
|
|
|
+ exportConfig: {
|
|
|
+ name: '预警历史列表',
|
|
|
+ url: () => getExportUrl(activeKey.value),
|
|
|
},
|
|
|
- },
|
|
|
- exportConfig: {
|
|
|
- name: '预警历史列表',
|
|
|
- url: () => getExportUrl(activeKey.value)
|
|
|
- },
|
|
|
-});
|
|
|
-//注册table数据
|
|
|
-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 || '';
|
|
|
-}
|
|
|
-
|
|
|
-const orgname = ref<any>('');
|
|
|
-
|
|
|
-onMounted(async () => {
|
|
|
- orgname.value = route.query.orgname;
|
|
|
- getEachMineWarnCountInfoList();
|
|
|
-});
|
|
|
-
|
|
|
-defineExpose({ setLoading });
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="less">
|
|
|
-@import '/@/design/theme.less';
|
|
|
-@ventSpace: zxm;
|
|
|
+ });
|
|
|
+ //注册table数据
|
|
|
+ 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 || '';
|
|
|
+ }
|
|
|
|
|
|
-:deep(.zxm-table-container) {
|
|
|
- max-height: 720px !important;
|
|
|
-}
|
|
|
+ const orgname = ref<any>('');
|
|
|
|
|
|
-:deep(.ventSpace-table-body) {
|
|
|
- height: auto !important;
|
|
|
-}
|
|
|
+ onMounted(async () => {
|
|
|
+ orgname.value = route.query.orgname;
|
|
|
+ getEachMineWarnCountInfoList();
|
|
|
+ });
|
|
|
|
|
|
-:deep(.zxm-picker) {
|
|
|
- height: 30px !important;
|
|
|
-}
|
|
|
+ defineExpose({ setLoading });
|
|
|
+</script>
|
|
|
|
|
|
-:deep(.@{ventSpace}-picker-dropdown) {
|
|
|
- position: absolute !important;
|
|
|
- top: 35px !important;
|
|
|
- left: 0 !important;
|
|
|
-}
|
|
|
+<style scoped lang="less">
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+ @ventSpace: zxm;
|
|
|
|
|
|
-@{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');
|
|
|
+ :deep(.zxm-table-container) {
|
|
|
+ max-height: 720px !important;
|
|
|
}
|
|
|
|
|
|
- .tab-box {
|
|
|
- --table-border: #0eb3ff66;
|
|
|
- --tab-bg: linear-gradient(#001325, #051f4a);
|
|
|
- --image-top-btn: url('/@/assets/images/themify/deepblue/top-btn.png');
|
|
|
- --image-top-btn-select: url('/@/assets/images/themify/deepblue/top-btn-select.png');
|
|
|
+ :deep(.ventSpace-table-body) {
|
|
|
+ height: auto !important;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.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;
|
|
|
- }
|
|
|
+ :deep(.zxm-picker) {
|
|
|
+ height: 30px !important;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(2) .left-box {
|
|
|
- background: var(--image-dust-fc) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
- }
|
|
|
+ :deep(.@{ventSpace}-picker-dropdown) {
|
|
|
+ position: absolute !important;
|
|
|
+ top: 35px !important;
|
|
|
+ left: 0 !important;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(3) .left-box {
|
|
|
- background: var(--image-gas-ws) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
+ @{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');
|
|
|
}
|
|
|
|
|
|
- &:nth-child(4) .left-box {
|
|
|
- background: var(--image-fire-fz) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
+ .tab-box {
|
|
|
+ --table-border: #0eb3ff66;
|
|
|
+ --tab-bg: linear-gradient(#001325, #051f4a);
|
|
|
+ --image-top-btn: url('/@/assets/images/themify/deepblue/top-btn.png');
|
|
|
+ --image-top-btn-select: url('/@/assets/images/themify/deepblue/top-btn-select.png');
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(5) .left-box {
|
|
|
- background: var(--image-aqjc) no-repeat center;
|
|
|
- background-size: 100% auto;
|
|
|
- }
|
|
|
+ .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;
|
|
|
|
|
|
- .right-box {
|
|
|
- position: relative;
|
|
|
- width: 215px;
|
|
|
- height: 100%;
|
|
|
+ .statistics-box {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
- .box-text {
|
|
|
+ .left-box {
|
|
|
position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- color: #fff;
|
|
|
- background: var(--image-his-one) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ width: 138px;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .text-label {
|
|
|
+ .box-title {
|
|
|
position: absolute;
|
|
|
- left: 20px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
+ left: 50%;
|
|
|
+ bottom: 18px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .text-value {
|
|
|
- position: absolute;
|
|
|
- left: 130px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- font-family: 'douyuFont';
|
|
|
- }
|
|
|
+ &: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;
|
|
|
}
|
|
|
|
|
|
- .warning-state {
|
|
|
- .text-value {
|
|
|
- color: aqua !important;
|
|
|
- font-family: 'douyuFont';
|
|
|
+ &: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;
|
|
|
- --tab-bg: linear-gradient(#001325, #012e4f);
|
|
|
- --image-top-btn: url('/@/assets/images/top-btn.png');
|
|
|
- --image-top-btn-select: url('/@/assets/images/top-btn-select.png');
|
|
|
- display: flex;
|
|
|
- color: #fff;
|
|
|
- position: relative;
|
|
|
- top: 11px;
|
|
|
- background: var(--tab-bg);
|
|
|
-
|
|
|
- :deep(.zxm-tabs-nav) {
|
|
|
- margin: 0 !important;
|
|
|
-
|
|
|
- .zxm-tabs-tab {
|
|
|
- width: 180px;
|
|
|
- height: 45px;
|
|
|
- background: var(--image-top-btn) center no-repeat;
|
|
|
- background-size: cover;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
|
|
|
- .zxm-tabs-tab-active {
|
|
|
- width: 180px;
|
|
|
- position: relative;
|
|
|
- background: var(--image-top-btn-select) center no-repeat;
|
|
|
- background-size: cover;
|
|
|
+ .tab-box {
|
|
|
+ --table-border: #0efcff44;
|
|
|
+ --tab-bg: linear-gradient(#001325, #012e4f);
|
|
|
+ --image-top-btn: url('/@/assets/images/top-btn.png');
|
|
|
+ --image-top-btn-select: url('/@/assets/images/top-btn-select.png');
|
|
|
+ display: flex;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ top: 11px;
|
|
|
+ background: var(--tab-bg);
|
|
|
+
|
|
|
+ :deep(.zxm-tabs-nav) {
|
|
|
+ margin: 0 !important;
|
|
|
|
|
|
- .zxm-tabs-tab-btn {
|
|
|
- color: #fff !important;
|
|
|
+ .zxm-tabs-tab {
|
|
|
+ width: 180px;
|
|
|
+ height: 45px;
|
|
|
+ background: var(--image-top-btn) center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .zxm-tabs-ink-bar {
|
|
|
- width: 0 !important;
|
|
|
- }
|
|
|
+ .zxm-tabs-tab-active {
|
|
|
+ width: 180px;
|
|
|
+ position: relative;
|
|
|
+ background: var(--image-top-btn-select) center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
|
|
|
- .zxm-tabs-tab+.zxm-tabs-tab {
|
|
|
- margin: 0 !important;
|
|
|
+ .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 var(--table-border);
|
|
|
+
|
|
|
+ .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 var(--table-border);
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
hongrunxia