|
|
@@ -2,10 +2,7 @@
|
|
|
<div class="zl-box">
|
|
|
<div class="zl-container-box">
|
|
|
<div class="top-box">
|
|
|
- <transition
|
|
|
- enter-active-class="animate__animated animate__slideInLeft"
|
|
|
- leave-active-class="animate__animated animate__slideOutLeft"
|
|
|
- >
|
|
|
+ <transition enter-active-class="animate__animated animate__slideInLeft" leave-active-class="animate__animated animate__slideOutLeft">
|
|
|
<div class="left-box lr-box" v-if="show">
|
|
|
<div class="network-time">
|
|
|
本次解算时间：
|
|
|
@@ -13,7 +10,7 @@
|
|
|
</div>
|
|
|
<div class="analysis-box">
|
|
|
<div class="item-top-title">通风网络分析</div>
|
|
|
- <BorderBox1 class="border-bg" backgroundColor="#00bfff15" >
|
|
|
+ <BorderBox1 class="border-bg" backgroundColor="#00bfff15">
|
|
|
<div class="pie-group">
|
|
|
<div class="item-pie">
|
|
|
<div class="pie">
|
|
|
@@ -42,11 +39,10 @@
|
|
|
<SvgIcon class="icon-style" size="18" :name="data.icon" />
|
|
|
</div>
|
|
|
<div class="item-name">{{ data.name }}</div>
|
|
|
- <div v-if="data.code !== 'level' && data.code !== 'resistance'" class="item-value">{{ pageData[data.code] }}
|
|
|
- </div>
|
|
|
+ <div v-if="data.code !== 'level' && data.code !== 'resistance'" class="item-value">{{ pageData[data.code] }} </div>
|
|
|
<div v-if="data.code == 'level'" class="item-value">
|
|
|
<!-- <span class="signal-round signal-round-run" :class="{'signal-round-run': Number(pageData.dTotalArea) > 2, 'signal-round-red': Number(pageData.dTotalArea) <= 2 }"></span> -->
|
|
|
- <span class="">{{ Number(pageData.dTotalArea) > 2 ? '容易':'难' }}</span>
|
|
|
+ <span class="">{{ Number(pageData.dTotalArea) > 2 ? '容易' : '难' }}</span>
|
|
|
</div>
|
|
|
<div v-if="data.code == 'resistance'" class="item-value">{{ totalPa }}</div>
|
|
|
</div>
|
|
|
@@ -80,57 +76,57 @@
|
|
|
<div class="data">有效风量率</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- <div class="time-list" style="overflow-y: auto;">
|
|
|
- <dv-scroll-board ref="scrollBoardRef" :config="solveTimesData" style="width: 100%; height: 80px; font-weight: 500;" />
|
|
|
+ <div class="time-list" style="overflow-y: auto">
|
|
|
+ <dv-scroll-board ref="scrollBoardRef" :config="solveTimesData" style="width: 100%; height: 80px; font-weight: 500" />
|
|
|
</div>
|
|
|
</BorderBox1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
- <transition
|
|
|
- enter-active-class="animate__animated animate__slideInRight"
|
|
|
- leave-active-class="animate__animated animate__slideOutRight"
|
|
|
- >
|
|
|
- <div class="right-box lr-box" v-if="show">
|
|
|
- <div class="sensor-box">
|
|
|
- <div class="item-top-title">传感器实时数据</div>
|
|
|
- <BorderBox1 class="table-box border-bg" backgroundColor="#00bfff15">
|
|
|
- <div class="table-container">
|
|
|
- <a-table :columns="sensorColumns" :data-source="pageData.sensorDataList" :pagination="false" size="small" :scroll="{y: 180}">
|
|
|
- <template #bodyCell="{ column, record }">
|
|
|
- <div v-if="column.dataIndex == 'action'">
|
|
|
- <a @click="goLocation('device', record.deviceID, record)">定位</a>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- </BorderBox1>
|
|
|
- </div>
|
|
|
- <div class="warning-box">
|
|
|
- <div class="item-top-title">预警报警信息</div>
|
|
|
- <BorderBox1 class="table-box border-bg" backgroundColor="#00bfff15">
|
|
|
- <div class="table-container">
|
|
|
- <a-table :columns="warningColumns" :data-source="pageData.warningDataList" :pagination="false" size="small" :scroll="{y: 180}">
|
|
|
- <template #bodyCell="{ column, record }">
|
|
|
- <div v-if="column.dataIndex == 'level'">
|
|
|
- <span class="signal-round"
|
|
|
- :class="{ 'signal-round-red': (record['level'] == 104 || record['level'] == 201), 'signal-round-orange': record['level'] == 103, 'signal-round-yellow': record['level'] == 102 }"></span>
|
|
|
- </div>
|
|
|
- <div v-if="column.dataIndex == 'action'">
|
|
|
- <a @click="goLocation('device', record.deviceID, record)">定位</a>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- </BorderBox1>
|
|
|
+ <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight">
|
|
|
+ <div class="right-box lr-box" v-if="show">
|
|
|
+ <div class="sensor-box">
|
|
|
+ <div class="item-top-title">传感器实时数据</div>
|
|
|
+ <BorderBox1 class="table-box border-bg" backgroundColor="#00bfff15">
|
|
|
+ <div class="table-container">
|
|
|
+ <a-table :columns="sensorColumns" :data-source="pageData.sensorDataList" :pagination="false" size="small" :scroll="{ y: 180 }">
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <div v-if="column.dataIndex == 'action'">
|
|
|
+ <a @click="goLocation('device', record.deviceID, record)">定位</a>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </BorderBox1>
|
|
|
+ </div>
|
|
|
+ <div class="warning-box">
|
|
|
+ <div class="item-top-title">预警报警信息</div>
|
|
|
+ <BorderBox1 class="table-box border-bg" backgroundColor="#00bfff15">
|
|
|
+ <div class="table-container">
|
|
|
+ <a-table :columns="warningColumns" :data-source="pageData.warningDataList" :pagination="false" size="small" :scroll="{ y: 180 }">
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <div v-if="column.dataIndex == 'level'">
|
|
|
+ <span
|
|
|
+ class="signal-round"
|
|
|
+ :class="{
|
|
|
+ 'signal-round-red': record['level'] == 104 || record['level'] == 201,
|
|
|
+ 'signal-round-orange': record['level'] == 103,
|
|
|
+ 'signal-round-yellow': record['level'] == 102,
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div v-if="column.dataIndex == 'action'">
|
|
|
+ <a @click="goLocation('device', record.deviceID, record)">定位</a>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </BorderBox1>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
+ </transition>
|
|
|
</div>
|
|
|
- <transition
|
|
|
- enter-active-class="animate__animated animate__slideInUp"
|
|
|
- leave-active-class="animate__animated animate__slideOutDown"
|
|
|
- >
|
|
|
+ <transition enter-active-class="animate__animated animate__slideInUp" leave-active-class="animate__animated animate__slideOutDown">
|
|
|
<div class="bottom-box" v-if="show">
|
|
|
<div class="icon-group">
|
|
|
<div class="to-small" @click="toHome('home')"></div>
|
|
|
@@ -138,7 +134,7 @@
|
|
|
</div>
|
|
|
<div class="bottom-left bottom-lr-box">
|
|
|
<div class="network-top">
|
|
|
- <!-- <div class="network-top-left">
|
|
|
+ <!-- <div class="network-top-left">
|
|
|
<div>
|
|
|
准确率：
|
|
|
<span class="accuracy-rate">95%</span>
|
|
|
@@ -148,36 +144,64 @@
|
|
|
<span class="error-rate">0.0941%</span>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- <!-- <div class="network-top-right">
|
|
|
+ <!-- <div class="network-top-right">
|
|
|
本次解算时间：
|
|
|
<span class="time">{{ pageData.currentTime }}</span>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
<BorderBox11 class="border-bg" title="实时网络解算" :color="['#00FFFF']" backgroundColor="#00bfff15">
|
|
|
<div class="zl-top">
|
|
|
<div>
|
|
|
- <span v-for="(device, index) in deviceTab " :key="index" class="btn" :class="{'active': device.code == deviceActiveCode }" @click="setTable(device.code)">{{ device.title }}</span>
|
|
|
+ <span
|
|
|
+ v-for="(device, index) in deviceTab"
|
|
|
+ :key="index"
|
|
|
+ class="btn"
|
|
|
+ :class="{ active: device.code == deviceActiveCode }"
|
|
|
+ @click="setTable(device.code)"
|
|
|
+ >{{ device.title }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="table-container" style="position: absolute;">
|
|
|
- <a-table v-if="deviceActiveCode == 'tun'" :columns="networkColumns" :data-source="tableDate" :pagination="false" size="small" :scroll="{ y: 155 }" >
|
|
|
+ <div class="table-container" style="position: absolute">
|
|
|
+ <a-table
|
|
|
+ v-if="deviceActiveCode == 'tun'"
|
|
|
+ :columns="networkColumns"
|
|
|
+ :data-source="tableDate"
|
|
|
+ :pagination="false"
|
|
|
+ size="small"
|
|
|
+ :scroll="{ y: 155 }"
|
|
|
+ >
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
<div v-if="column.dataIndex == 'action'">
|
|
|
- <a @click="goLocation(record['nTunID'] ? 'tunnel': 'device',record.deviceID, record)">定位</a>
|
|
|
+ <a @click="goLocation(record['nTunID'] ? 'tunnel' : 'device', record.deviceID, record)">定位</a>
|
|
|
</div>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
- <a-table v-if="deviceActiveCode == 'gate'" :columns="gateColumns" :data-source="tableDate" :pagination="false" size="small" :scroll="{ y: 155 }" >
|
|
|
+ <a-table
|
|
|
+ v-if="deviceActiveCode == 'gate'"
|
|
|
+ :columns="gateColumns"
|
|
|
+ :data-source="tableDate"
|
|
|
+ :pagination="false"
|
|
|
+ size="small"
|
|
|
+ :scroll="{ y: 155 }"
|
|
|
+ >
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
<div v-if="column.dataIndex == 'action'">
|
|
|
- <a @click="goLocation(record['nTunID'] ? 'tunnel': 'device',record.deviceID, record)">定位</a>
|
|
|
+ <a @click="goLocation(record['nTunID'] ? 'tunnel' : 'device', record.deviceID, record)">定位</a>
|
|
|
</div>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
- <a-table v-if="deviceActiveCode == 'window'" :columns="windowColumns" :data-source="tableDate" :pagination="false" size="small" :scroll="{ y: 155 }" >
|
|
|
+ <a-table
|
|
|
+ v-if="deviceActiveCode == 'window'"
|
|
|
+ :columns="windowColumns"
|
|
|
+ :data-source="tableDate"
|
|
|
+ :pagination="false"
|
|
|
+ size="small"
|
|
|
+ :scroll="{ y: 155 }"
|
|
|
+ >
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
<div v-if="column.dataIndex == 'action'">
|
|
|
- <a @click="goLocation(record['nTunID'] ? 'tunnel': 'device',record.deviceID, record)">定位</a>
|
|
|
+ <a @click="goLocation(record['nTunID'] ? 'tunnel' : 'device', record.deviceID, record)">定位</a>
|
|
|
</div>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
@@ -194,19 +218,19 @@
|
|
|
</div>
|
|
|
<div>
|
|
|
路线阻力
|
|
|
- <span class="data">{{ maxPaths[activePath - 1] && formatNum(maxPaths[activePath - 1]['TotalH']) || '-' }}</span>
|
|
|
+ <span class="data">{{ (maxPaths[activePath - 1] && formatNum(maxPaths[activePath - 1]['TotalH'])) || '-' }}</span>
|
|
|
Pa
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="zl-container">
|
|
|
<template v-if="maxPaths.length > 0">
|
|
|
<template v-for="(tun, index) in maxPaths[activePath - 1]['tuns']" :key="index">
|
|
|
- <div v-if="index < 11" class="zl-path-item" :class="`position${index + 1}`" >
|
|
|
+ <div v-if="index < 11" class="zl-path-item" :class="`position${index + 1}`">
|
|
|
<div class="title">{{ tun['strName'] }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
<!-- <div class="zl-path-item position1">
|
|
|
<div class="title">副平硐</div>
|
|
|
</div>
|
|
|
@@ -250,937 +274,945 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, onUnmounted, defineEmits, defineProps, watch, reactive } from 'vue';
|
|
|
-import { Icon as SvgIcon } from '/@/components/Icon';
|
|
|
-import { BorderBox11, BorderBox1, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
|
|
|
-import { sensorColumns, networkColumns, warningColumns, deviceTab, SensorType, NetworkType, windowColumns, gateColumns, WindowType, WarningType, GateType, solveTimesData } from './network.data'
|
|
|
-import dayjs from 'dayjs'
|
|
|
-import { formatNum } from '/@/utils/ventutil'
|
|
|
-import { getActions } from '/@/qiankun/state';
|
|
|
-import { useGo } from '/@/hooks/web/usePage';
|
|
|
-import { useGlobSetting } from '/@/hooks/setting';
|
|
|
-
|
|
|
-const glob = useGlobSetting();
|
|
|
-
|
|
|
-const emit = defineEmits(['changePageType'])
|
|
|
-const props = defineProps({
|
|
|
- pageResult: {
|
|
|
- type: Object,
|
|
|
- default: () => {}
|
|
|
+ import { ref, onMounted, onUnmounted, defineEmits, defineProps, watch, reactive } from 'vue';
|
|
|
+ import { Icon as SvgIcon } from '/@/components/Icon';
|
|
|
+ import { BorderBox11, BorderBox1, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
|
|
|
+ import {
|
|
|
+ sensorColumns,
|
|
|
+ networkColumns,
|
|
|
+ warningColumns,
|
|
|
+ deviceTab,
|
|
|
+ SensorType,
|
|
|
+ NetworkType,
|
|
|
+ windowColumns,
|
|
|
+ gateColumns,
|
|
|
+ WindowType,
|
|
|
+ WarningType,
|
|
|
+ GateType,
|
|
|
+ solveTimesData,
|
|
|
+ } from './network.data';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import { formatNum } from '/@/utils/ventutil';
|
|
|
+ import { getActions } from '/@/qiankun/state';
|
|
|
+ import { useGo } from '/@/hooks/web/usePage';
|
|
|
+ import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+
|
|
|
+ const glob = useGlobSetting();
|
|
|
+
|
|
|
+ const emit = defineEmits(['changePageType']);
|
|
|
+ const props = defineProps({
|
|
|
+ pageResult: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const go = useGo();
|
|
|
+ let count = 0;
|
|
|
+ const actions = getActions();
|
|
|
+ const pageData = reactive({
|
|
|
+ currentTime: dayjs(new Date().getTime() + count).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ totalEnterNum: '-',
|
|
|
+ totalToNum: '-',
|
|
|
+ totallength: '-', // 总长
|
|
|
+ level: '-',
|
|
|
+ dTotalArea: '-',
|
|
|
+ sensorDataList: <SensorType[]>[],
|
|
|
+ networkDataList: <NetworkType[]>[],
|
|
|
+ gateDataList: <GateType[]>[],
|
|
|
+ windowDataList: <WindowType[]>[],
|
|
|
+ warningDataList: <WarningType[]>[],
|
|
|
+ });
|
|
|
+
|
|
|
+ const show = ref(false);
|
|
|
+
|
|
|
+ const deviceActiveCode = ref('tun');
|
|
|
+ const columns = ref(networkColumns);
|
|
|
+ const tableDate = <any[]>ref(pageData.networkDataList as any);
|
|
|
+
|
|
|
+ const totalPa = ref(1640 + '');
|
|
|
+ const rate1 = ref(95 + '');
|
|
|
+ const rate2 = ref(95 + '');
|
|
|
+ const rate3 = ref(95 + '');
|
|
|
+
|
|
|
+ const analysisDetailDataList = [
|
|
|
+ {
|
|
|
+ code: 'totallength',
|
|
|
+ name: '通风巷道总长(m)',
|
|
|
+ icon: 'path-icon1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 'level',
|
|
|
+ name: '通风难易程度',
|
|
|
+ icon: 'path-icon2',
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // code: 'resistance',
|
|
|
+ // name: '总阻力',
|
|
|
+ // value: totalPa.value,
|
|
|
+ // icon: 'path-icon3'
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ code: 'dTotalArea',
|
|
|
+ name: '等积孔（㎡）',
|
|
|
+ icon: 'path-icon4',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const maxPaths = ref([]);
|
|
|
+ const activePath = ref(1);
|
|
|
+ let solveTimes: [string, string][] = [];
|
|
|
+ const scrollBoardRef = ref();
|
|
|
+
|
|
|
+ function toHome(type: string) {
|
|
|
+ show.value = false;
|
|
|
+ if (type == 'home') {
|
|
|
+ go(glob.homePath);
|
|
|
+ } else {
|
|
|
+ go(`/micro-vent-3dModal/dashboard/analysis?type=model3D`);
|
|
|
+ }
|
|
|
}
|
|
|
-})
|
|
|
-const go = useGo()
|
|
|
-let count = 0;
|
|
|
-const actions = getActions();
|
|
|
-const pageData = reactive({
|
|
|
- currentTime: dayjs(new Date().getTime() + count).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- totalEnterNum: '-',
|
|
|
- totalToNum: '-',
|
|
|
- totallength: '-', // 总长
|
|
|
- level: '-',
|
|
|
- dTotalArea: '-',
|
|
|
- sensorDataList: <SensorType[]>[],
|
|
|
- networkDataList: <NetworkType[]>[],
|
|
|
- gateDataList: <GateType[]>[],
|
|
|
- windowDataList: <WindowType[]>[],
|
|
|
- warningDataList:<WarningType[]>[]
|
|
|
-})
|
|
|
-
|
|
|
-const show = ref(false)
|
|
|
-
|
|
|
-const deviceActiveCode = ref('tun')
|
|
|
-const columns = ref(networkColumns)
|
|
|
-const tableDate = <any[]>ref(pageData.networkDataList as any)
|
|
|
-
|
|
|
-const totalPa = ref(1640 + '')
|
|
|
-const rate1 = ref(95 + '')
|
|
|
-const rate2 = ref(95 + '')
|
|
|
-const rate3 = ref(95 + '')
|
|
|
-
|
|
|
-
|
|
|
-const analysisDetailDataList = [
|
|
|
- {
|
|
|
- code: 'totallength',
|
|
|
- name: '通风巷道总长(m)',
|
|
|
- icon: 'path-icon1'
|
|
|
- },
|
|
|
- {
|
|
|
- code: 'level',
|
|
|
- name: '通风难易程度',
|
|
|
- icon: 'path-icon2'
|
|
|
- },
|
|
|
- // {
|
|
|
- // code: 'resistance',
|
|
|
- // name: '总阻力',
|
|
|
- // value: totalPa.value,
|
|
|
- // icon: 'path-icon3'
|
|
|
- // },
|
|
|
- {
|
|
|
- code: 'dTotalArea',
|
|
|
- name: '等积孔（㎡）',
|
|
|
- icon: 'path-icon4'
|
|
|
- },
|
|
|
-]
|
|
|
-const maxPaths = ref([])
|
|
|
-const activePath = ref(1)
|
|
|
-let solveTimes: [string, string][] = []
|
|
|
-const scrollBoardRef = ref()
|
|
|
-
|
|
|
-function toHome(type: string) {
|
|
|
- show.value = false
|
|
|
- if(type == 'home'){
|
|
|
- go(glob.homePath)
|
|
|
- }else{
|
|
|
- go(`/micro-vent-3dModal/dashboard/analysis?type=model3D`)
|
|
|
+
|
|
|
+ function changeActive(index) {
|
|
|
+ activePath.value = index;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-function changeActive(index){
|
|
|
- activePath.value = index
|
|
|
-}
|
|
|
-
|
|
|
-function analyzePageResult(resultData){
|
|
|
- console.log('数据接收到------', resultData);
|
|
|
- if(!resultData) return
|
|
|
- pageData.currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
|
-
|
|
|
- const sensorDataList = <SensorType[]>[];
|
|
|
- const networkDataList = <NetworkType[]>[]
|
|
|
- const gateDataList = <GateType[]>[]
|
|
|
- const windowDataList = <WindowType[]>[]
|
|
|
- const warningDataList = <WarningType[]>[]
|
|
|
-
|
|
|
- if(resultData['solutionresult']){
|
|
|
-
|
|
|
- const solutionresult = resultData['solutionresult'] || null;
|
|
|
- pageData.totalEnterNum = solutionresult['TotalInQ'] != null ? formatNum(Number(solutionresult['TotalInQ'])) : '-';
|
|
|
- pageData.totalToNum = solutionresult['TotalOutQ'] != null ? formatNum(Number(solutionresult['TotalOutQ'])): '-';
|
|
|
- pageData.totallength = solutionresult['TotalLength'] != null ? formatNum(Number(solutionresult['TotalLength'])) : '-';
|
|
|
- pageData.dTotalArea = solutionresult['dTotalArea'] != null ? formatNum(Number(solutionresult['dTotalArea'])) : '-';
|
|
|
-
|
|
|
- if (solutionresult['tuns'])
|
|
|
-
|
|
|
- for (const key in solutionresult['tuns']) {
|
|
|
- const item = solutionresult['tuns'][key]
|
|
|
- const obj = {
|
|
|
- nTunID: item['nTunID'],
|
|
|
- strName: item['strName'],
|
|
|
- deviceID: item['nTunID'],
|
|
|
- dHFric: item['dHFric'] != null ? item['dHFric'].toFixed(2) : '-', //摩擦阻力
|
|
|
- dHLocal: item['dHNature'] != null ? item['dHNature'].toFixed(2) : '-', //局部阻力
|
|
|
- dHNature: item['dHNature'] != null ? item['dHNature'].toFixed(2) : '-', //自然风压
|
|
|
- dHTotal: item['dHTotal'] != null ? item['dHTotal'].toFixed(2) : '-', //总阻力
|
|
|
- fRealQ: item['fRealQ'] != null ? item['fRealQ'].toFixed(2) : '-', //实时风量
|
|
|
- fRealV: item['fRealV'] != null ? item['fRealV'].toFixed(2) : '-', //实时风速
|
|
|
+
|
|
|
+ function analyzePageResult(resultData) {
|
|
|
+ console.log('数据接收到------', resultData);
|
|
|
+ if (!resultData) return;
|
|
|
+ pageData.currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
|
+
|
|
|
+ const sensorDataList = <SensorType[]>[];
|
|
|
+ const networkDataList = <NetworkType[]>[];
|
|
|
+ const gateDataList = <GateType[]>[];
|
|
|
+ const windowDataList = <WindowType[]>[];
|
|
|
+ const warningDataList = <WarningType[]>[];
|
|
|
+
|
|
|
+ if (resultData['solutionresult']) {
|
|
|
+ const solutionresult = resultData['solutionresult'] || null;
|
|
|
+ pageData.totalEnterNum = solutionresult['TotalInQ'] != null ? formatNum(Number(solutionresult['TotalInQ'])) : '-';
|
|
|
+ pageData.totalToNum = solutionresult['TotalOutQ'] != null ? formatNum(Number(solutionresult['TotalOutQ'])) : '-';
|
|
|
+ pageData.totallength = solutionresult['TotalLength'] != null ? formatNum(Number(solutionresult['TotalLength'])) : '-';
|
|
|
+ pageData.dTotalArea = solutionresult['dTotalArea'] != null ? formatNum(Number(solutionresult['dTotalArea'])) : '-';
|
|
|
+
|
|
|
+ if (solutionresult['tuns'])
|
|
|
+ for (const key in solutionresult['tuns']) {
|
|
|
+ const item = solutionresult['tuns'][key];
|
|
|
+ const obj = {
|
|
|
+ nTunID: item['nTunID'],
|
|
|
+ strName: item['strName'],
|
|
|
+ deviceID: item['nTunID'],
|
|
|
+ dHFric: item['dHFric'] != null ? item['dHFric'].toFixed(2) : '-', //摩擦阻力
|
|
|
+ dHLocal: item['dHNature'] != null ? item['dHNature'].toFixed(2) : '-', //局部阻力
|
|
|
+ dHNature: item['dHNature'] != null ? item['dHNature'].toFixed(2) : '-', //自然风压
|
|
|
+ dHTotal: item['dHTotal'] != null ? item['dHTotal'].toFixed(2) : '-', //总阻力
|
|
|
+ fRealQ: item['fRealQ'] != null ? item['fRealQ'].toFixed(2) : '-', //实时风量
|
|
|
+ fRealV: item['fRealV'] != null ? item['fRealV'].toFixed(2) : '-', //实时风速
|
|
|
+ };
|
|
|
+ networkDataList.push(obj);
|
|
|
}
|
|
|
- networkDataList.push(obj)
|
|
|
- }
|
|
|
|
|
|
- if (solutionresult['gates'])
|
|
|
- for (const key in solutionresult['gates']) {
|
|
|
- const item = solutionresult['gates'][key]
|
|
|
- const obj = {
|
|
|
- nGateID: item['nGateID'],
|
|
|
- deviceID: item['nGateID'],
|
|
|
- strName: item['strName'],
|
|
|
- data_dHDiff: item['data_dHDiff'] != null ? item['data_dHDiff'].toFixed(2) : '-', //风门压差
|
|
|
- data_dQ_min: item['data_dQ_min'] != null ? item['data_dQ_min'].toFixed(2) : '-', //风门漏风量
|
|
|
- data_dQ_s: item['data_dQ_s'] != null ? item['data_dQ_s'].toFixed(2) : '-', //风门漏风量
|
|
|
+ if (solutionresult['gates'])
|
|
|
+ for (const key in solutionresult['gates']) {
|
|
|
+ const item = solutionresult['gates'][key];
|
|
|
+ const obj = {
|
|
|
+ nGateID: item['nGateID'],
|
|
|
+ deviceID: item['nGateID'],
|
|
|
+ strName: item['strName'],
|
|
|
+ data_dHDiff: item['data_dHDiff'] != null ? item['data_dHDiff'].toFixed(2) : '-', //风门压差
|
|
|
+ data_dQ_min: item['data_dQ_min'] != null ? item['data_dQ_min'].toFixed(2) : '-', //风门漏风量
|
|
|
+ data_dQ_s: item['data_dQ_s'] != null ? item['data_dQ_s'].toFixed(2) : '-', //风门漏风量
|
|
|
+ };
|
|
|
+ gateDataList.push(obj);
|
|
|
}
|
|
|
- gateDataList.push(obj)
|
|
|
- }
|
|
|
|
|
|
- if (solutionresult['windows'])
|
|
|
- for (const key in solutionresult['windows']) {
|
|
|
- const item = solutionresult['windows'][key]
|
|
|
- const obj = {
|
|
|
- nWindowID: item['nWindowID'],
|
|
|
- strName: item['strName'],
|
|
|
- deviceID: item['nWindowID'],
|
|
|
- data_dHDiff: item['data_dHDiff'] != null ? item['data_dHDiff'].toFixed(2) : '-', //风门压差
|
|
|
- data_dQ_min: item['data_dQ_min'] != null ? item['data_dQ_min'].toFixed(2) : '-', //风门漏风量
|
|
|
- data_dQ_s: item['data_dQ_s'] != null ? item['data_dQ_s'].toFixed(2) : '-', //风门漏风量
|
|
|
+ if (solutionresult['windows'])
|
|
|
+ for (const key in solutionresult['windows']) {
|
|
|
+ const item = solutionresult['windows'][key];
|
|
|
+ const obj = {
|
|
|
+ nWindowID: item['nWindowID'],
|
|
|
+ strName: item['strName'],
|
|
|
+ deviceID: item['nWindowID'],
|
|
|
+ data_dHDiff: item['data_dHDiff'] != null ? item['data_dHDiff'].toFixed(2) : '-', //风门压差
|
|
|
+ data_dQ_min: item['data_dQ_min'] != null ? item['data_dQ_min'].toFixed(2) : '-', //风门漏风量
|
|
|
+ data_dQ_s: item['data_dQ_s'] != null ? item['data_dQ_s'].toFixed(2) : '-', //风门漏风量
|
|
|
+ };
|
|
|
+ windowDataList.push(obj);
|
|
|
}
|
|
|
- windowDataList.push(obj)
|
|
|
+
|
|
|
+ if (solutionresult['MaxHPaths']) {
|
|
|
+ console.log('最大阻力路线', solutionresult['MaxHPaths']);
|
|
|
+ maxPaths.value = solutionresult['MaxHPaths'];
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
+ if (resultData['monitors'] && resultData['monitors'].length > 0) {
|
|
|
+ resultData['monitors'].forEach((item) => {
|
|
|
+ item = {
|
|
|
+ strinstallpos: item.strinstallpos,
|
|
|
+ deviceID: item['deviceID'],
|
|
|
+ va: item['readData']['va'] != null ? Number(item['readData']['va']).toFixed(2) : '-',
|
|
|
+ m3: item['readData']['m3'] != null ? formatNum(Number(item['readData']['m3'])) : '-',
|
|
|
+ };
|
|
|
+ sensorDataList.push(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (resultData['warns'] && resultData['warns'].length > 0) {
|
|
|
+ resultData['warns'].forEach((item) => {
|
|
|
+ const obj = {
|
|
|
+ deviceID: item['deviceid'],
|
|
|
+ pos: item['pos'] != null ? item['pos'] : '-', //地点
|
|
|
+ level: item['level'] != null ? item['level'].toFixed(2) : '-', //等级
|
|
|
+ };
|
|
|
+ warningDataList.push(obj);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // const solutionresult = JSON.parse(result['result'])
|
|
|
+
|
|
|
+ // if (solutionresult) {
|
|
|
|
|
|
- if(solutionresult['MaxHPaths']){
|
|
|
- console.log('最大阻力路线', solutionresult['MaxHPaths'])
|
|
|
- maxPaths.value = solutionresult['MaxHPaths']
|
|
|
+ // }
|
|
|
+
|
|
|
+ pageData.sensorDataList = sensorDataList;
|
|
|
+ pageData.warningDataList = warningDataList;
|
|
|
+ pageData.networkDataList = networkDataList;
|
|
|
+ pageData.gateDataList = gateDataList;
|
|
|
+ pageData.windowDataList = windowDataList;
|
|
|
+ setTable(deviceActiveCode.value);
|
|
|
+ if (solveTimes.length >= 4) {
|
|
|
+ solveTimes.shift();
|
|
|
}
|
|
|
+ solveTimes = [...solveTimes, [dayjs().format('YYYY-MM-DD HH:mm:ss'), '解算用时' + (Math.random() * 0.1 + 3).toFixed(2) + 's']];
|
|
|
+ const tempSolveTimes = [...solveTimes];
|
|
|
+ tempSolveTimes[tempSolveTimes.length - 1] = [
|
|
|
+ `<span style="color:#00F5FE;" >${tempSolveTimes[tempSolveTimes.length - 1][0]}</span>`,
|
|
|
+ `<span style="color:#00F5FE;" >${tempSolveTimes[tempSolveTimes.length - 1][1]}</span>`,
|
|
|
+ ];
|
|
|
+ scrollBoardRef.value.updateRows(tempSolveTimes);
|
|
|
}
|
|
|
-
|
|
|
- if (resultData['monitors'] && resultData['monitors'].length > 0) {
|
|
|
- resultData['monitors'].forEach((item => {
|
|
|
- item = {
|
|
|
- strinstallpos: item.strinstallpos,
|
|
|
- deviceID: item['deviceID'],
|
|
|
- va: item['readData']['va'] != null ? Number(item['readData']['va']).toFixed(2) : '-',
|
|
|
- m3: item['readData']['m3'] != null ? formatNum(Number(item['readData']['m3'])) : '-',
|
|
|
- }
|
|
|
- sensorDataList.push(item)
|
|
|
- }))
|
|
|
|
|
|
+ function setTable(code) {
|
|
|
+ deviceActiveCode.value = code;
|
|
|
+ if (code == 'tun') {
|
|
|
+ columns.value = networkColumns;
|
|
|
+ tableDate.value = pageData.networkDataList;
|
|
|
+ } else if (code === 'gate') {
|
|
|
+ columns.value = gateColumns;
|
|
|
+ tableDate.value = pageData.gateDataList;
|
|
|
+ } else if (code === 'window') {
|
|
|
+ columns.value = windowColumns;
|
|
|
+ tableDate.value = pageData.windowDataList;
|
|
|
+ }
|
|
|
}
|
|
|
- if (resultData['warns'] && resultData['warns'].length > 0) {
|
|
|
- resultData['warns'].forEach((item => {
|
|
|
- const obj = {
|
|
|
- deviceID: item['deviceid'],
|
|
|
- pos: item['pos'] != null ? item['pos'] : '-', //地点
|
|
|
- level: item['level'] != null ? item['level'].toFixed(2) : '-', //等级
|
|
|
- }
|
|
|
- warningDataList.push(obj)
|
|
|
- }))
|
|
|
- }
|
|
|
- // const solutionresult = JSON.parse(result['result'])
|
|
|
-
|
|
|
- // if (solutionresult) {
|
|
|
-
|
|
|
-
|
|
|
- // }
|
|
|
-
|
|
|
- pageData.sensorDataList = sensorDataList
|
|
|
- pageData.warningDataList = warningDataList
|
|
|
- pageData.networkDataList = networkDataList
|
|
|
- pageData.gateDataList = gateDataList
|
|
|
- pageData.windowDataList = windowDataList
|
|
|
- setTable(deviceActiveCode.value)
|
|
|
- if(solveTimes.length >= 4){
|
|
|
- solveTimes.shift()
|
|
|
- }
|
|
|
- solveTimes = [ ...solveTimes, [dayjs().format('YYYY-MM-DD HH:mm:ss'), '解算用时'+ (Math.random() * 0.1 + 3).toFixed(2) + 's']]
|
|
|
- const tempSolveTimes = [...solveTimes]
|
|
|
- tempSolveTimes[tempSolveTimes.length - 1] = [`<span style="color:#00F5FE;" >${tempSolveTimes[tempSolveTimes.length - 1][0]}</span>`, `<span style="color:#00F5FE;" >${tempSolveTimes[tempSolveTimes.length - 1][1]}</span>`]
|
|
|
- scrollBoardRef.value.updateRows(tempSolveTimes)
|
|
|
-}
|
|
|
-
|
|
|
-function setTable(code) {
|
|
|
- deviceActiveCode.value = code
|
|
|
- if(code == 'tun'){
|
|
|
- columns.value = networkColumns
|
|
|
- tableDate.value = pageData.networkDataList
|
|
|
- }else if(code === 'gate'){
|
|
|
- columns.value = gateColumns
|
|
|
- tableDate.value = pageData.gateDataList
|
|
|
- }else if(code === 'window') {
|
|
|
- columns.value = windowColumns
|
|
|
- tableDate.value = pageData.windowDataList
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-function goLocation(type:string ,id: string, record:any) {
|
|
|
- actions.setGlobalState({ locationObj: { pageType: type, deviceid: id }, pageObj: null });
|
|
|
-}
|
|
|
+ function goLocation(type: string, id: string, record: any) {
|
|
|
+ actions.setGlobalState({ locationObj: { pageType: type, deviceid: id }, pageObj: null });
|
|
|
+ }
|
|
|
|
|
|
-watch(() => props.pageResult, (newData) => {
|
|
|
- analyzePageResult(newData)
|
|
|
-})
|
|
|
+ watch(
|
|
|
+ () => props.pageResult,
|
|
|
+ (newData) => {
|
|
|
+ analyzePageResult(newData);
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- show.value = true
|
|
|
-});
|
|
|
+ onMounted(() => {
|
|
|
+ show.value = true;
|
|
|
+ });
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
-
|
|
|
-});
|
|
|
+ onUnmounted(() => {});
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
-@ventSpace: zxm;
|
|
|
-
|
|
|
-.zl-box {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 30px);
|
|
|
- top: 80px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- color: #fff;
|
|
|
- background-position: center;
|
|
|
- background-size: cover;
|
|
|
-
|
|
|
- .modal-box {
|
|
|
+ @ventSpace: zxm;
|
|
|
+
|
|
|
+ .zl-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ top: 80px;
|
|
|
position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #fff;
|
|
|
+ background-position: center;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ .modal-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zl-container-box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.zl-container-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: 10px;
|
|
|
- position: relative;
|
|
|
- z-index: 99;
|
|
|
- pointer-events: none;
|
|
|
-
|
|
|
- .top-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: calc(60% - 10px);
|
|
|
+ top: 10px;
|
|
|
position: relative;
|
|
|
z-index: 99;
|
|
|
- .lr-box {
|
|
|
- width: 374px;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
+ pointer-events: none;
|
|
|
|
|
|
- .left-box {
|
|
|
- .network-time{
|
|
|
- height: 50px;
|
|
|
- padding-left: 10px;
|
|
|
- font-size: 18px;
|
|
|
- position: relative;
|
|
|
- top: -5px;
|
|
|
- .time{
|
|
|
- font-size: 24px;
|
|
|
- color: #00f5fe;
|
|
|
- font-family: 'electronicFont';
|
|
|
- }
|
|
|
+ .top-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: calc(60% - 10px);
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ .lr-box {
|
|
|
+ width: 374px;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
- .analysis-box {
|
|
|
- position: relative;
|
|
|
|
|
|
- .pie-group {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- padding-top: 30px;
|
|
|
+ .left-box {
|
|
|
+ .network-time {
|
|
|
+ height: 50px;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ position: relative;
|
|
|
+ top: -5px;
|
|
|
+ .time {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #00f5fe;
|
|
|
+ font-family: 'electronicFont';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .analysis-box {
|
|
|
+ position: relative;
|
|
|
|
|
|
- .item-pie {
|
|
|
- flex: 1;
|
|
|
- padding: 5px;
|
|
|
+ .pie-group {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+ padding-top: 30px;
|
|
|
|
|
|
- .pie {
|
|
|
- width: 140px;
|
|
|
- height: 80px;
|
|
|
- background: url('/@/assets/images/vent/path/di.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
+ .item-pie {
|
|
|
+ flex: 1;
|
|
|
+ padding: 5px;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .qiu1 {
|
|
|
- background: url('/@/assets/images/vent/path/cicle01.png') no-repeat center;
|
|
|
- }
|
|
|
+ .pie {
|
|
|
+ width: 140px;
|
|
|
+ height: 80px;
|
|
|
+ background: url('/@/assets/images/vent/path/di.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .qiu1 {
|
|
|
+ background: url('/@/assets/images/vent/path/cicle01.png') no-repeat center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qiu2 {
|
|
|
+ background: url('/@/assets/images/vent/path/cicle04.png') no-repeat center;
|
|
|
+ }
|
|
|
|
|
|
- .qiu2 {
|
|
|
- background: url('/@/assets/images/vent/path/cicle04.png') no-repeat center;
|
|
|
+ .qiu {
|
|
|
+ position: relative;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background-size: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid rgba(255, 255, 255, 0.5);
|
|
|
+ animation: scale 2s linear infinite;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .qiu {
|
|
|
- position: relative;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background-size: 100%;
|
|
|
+ .pie-data {
|
|
|
+ width: 140px;
|
|
|
+ height: 20px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- padding-top: 18px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600px;
|
|
|
-
|
|
|
+ position: relative;
|
|
|
+ background: url('/@/assets/images/vent/path/pie-line.png');
|
|
|
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
+ .data-text {
|
|
|
display: block;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- border-radius: 50%;
|
|
|
- border: 3px solid rgba(255, 255, 255, 0.5);
|
|
|
- animation: scale 2s linear infinite;
|
|
|
+ top: -8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .pie-data {
|
|
|
- width: 140px;
|
|
|
- height: 20px;
|
|
|
+ .detail-data-group {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+
|
|
|
+ .container-item {
|
|
|
+ width: 307px;
|
|
|
+ height: 63px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
position: relative;
|
|
|
- background: url('/@/assets/images/vent/path/pie-line.png');
|
|
|
+ background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
|
|
|
+ background-size: auto;
|
|
|
+ background-position: bottom;
|
|
|
+ padding: 10px 30px;
|
|
|
|
|
|
- .data-text {
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 5px;
|
|
|
position: absolute;
|
|
|
- top: -8px;
|
|
|
+ top: 62px;
|
|
|
+ left: 0;
|
|
|
+ background-color: #73f4ff66;
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .detail-data-group {
|
|
|
- width: 100%;
|
|
|
- ;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- margin-top: 15px;
|
|
|
-
|
|
|
- .container-item {
|
|
|
- width: 307px;
|
|
|
- height: 63px;
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
|
|
|
- background-size: auto;
|
|
|
- background-position: bottom;
|
|
|
- padding: 10px 30px;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 5px;
|
|
|
- position: absolute;
|
|
|
- top: 62px;
|
|
|
- left: 0;
|
|
|
- background-color: #73f4ff66;
|
|
|
- backdrop-filter: blur(5px);
|
|
|
- }
|
|
|
|
|
|
- .item-icon {
|
|
|
- width: 60px;
|
|
|
- height: 45px;
|
|
|
- background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
|
|
|
- background-size: cover;
|
|
|
+ .item-icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 45px;
|
|
|
+ background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
|
|
|
- .icon-style {
|
|
|
- margin: 10px 0 0 18px;
|
|
|
+ .icon-style {
|
|
|
+ margin: 10px 0 0 18px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .item-name {
|
|
|
- width: 180px;
|
|
|
- line-height: 60px;
|
|
|
- margin-left: 5px;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
+ .item-name {
|
|
|
+ width: 180px;
|
|
|
+ line-height: 60px;
|
|
|
+ margin-left: 5px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
|
|
|
- .item-value {
|
|
|
- position: relative;
|
|
|
- height: 26px;
|
|
|
- line-height: 24px;
|
|
|
- margin: 15px 0;
|
|
|
- text-align: center;
|
|
|
- width: 80px;
|
|
|
- border: 1px solid #00f5fe;
|
|
|
- border-radius: 13px;
|
|
|
- background: linear-gradient(to right, #00f5fe44, #0090ff44);
|
|
|
+ .item-value {
|
|
|
+ position: relative;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 15px 0;
|
|
|
+ text-align: center;
|
|
|
+ width: 80px;
|
|
|
+ border: 1px solid #00f5fe;
|
|
|
+ border-radius: 13px;
|
|
|
+ background: linear-gradient(to right, #00f5fe44, #0090ff44);
|
|
|
|
|
|
- &::before {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: -3px;
|
|
|
- top: 8px;
|
|
|
- background: #ffa500;
|
|
|
- border-radius: 3px;
|
|
|
+ &::before {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: -3px;
|
|
|
+ top: 8px;
|
|
|
+ background: #ffa500;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .feature-group {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- padding: 20px;
|
|
|
- margin-top: 15px;
|
|
|
-
|
|
|
- .feature-item {
|
|
|
- width: 108px;
|
|
|
- height: 120px;
|
|
|
- background: url('/@/assets/images/vent/path/path-feature-bg.png');
|
|
|
+ .feature-group {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- // justify-content: center;
|
|
|
-
|
|
|
- .pie {
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 20px;
|
|
|
+ margin-top: 15px;
|
|
|
+
|
|
|
+ .feature-item {
|
|
|
+ width: 108px;
|
|
|
+ height: 120px;
|
|
|
+ background: url('/@/assets/images/vent/path/path-feature-bg.png');
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+
|
|
|
+ .pie {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
|
|
|
- .data {
|
|
|
- margin-top: 15px;
|
|
|
- font-size: 12px;
|
|
|
- scale: 0.9;
|
|
|
- text-align: center;
|
|
|
+ .data {
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+ scale: 0.9;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .time-list{
|
|
|
- height: 122px;
|
|
|
- margin: 30px 15px 0px 30px;
|
|
|
- padding-bottom: 10px;
|
|
|
- pointer-events: auto;
|
|
|
- .row-item:first-child{
|
|
|
- color: #00f5fe !important;
|
|
|
+ .time-list {
|
|
|
+ height: 122px;
|
|
|
+ margin: 30px 15px 0px 30px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ pointer-events: auto;
|
|
|
+ .row-item:first-child {
|
|
|
+ color: #00f5fe !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .right-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
|
|
|
- .sensor-box,
|
|
|
- .warning-box {
|
|
|
- position: relative;
|
|
|
+ .right-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- // min-height: 220px;
|
|
|
- // max-height: 250px;
|
|
|
- .table-box {
|
|
|
- height: 280px;
|
|
|
- width: 100%;
|
|
|
+ .sensor-box,
|
|
|
+ .warning-box {
|
|
|
position: relative;
|
|
|
|
|
|
- .table-container {
|
|
|
- width: calc(100% - 40px);
|
|
|
- margin: 25px 20px 20px;
|
|
|
- // height: 250px;
|
|
|
- position: absolute;
|
|
|
+ // min-height: 220px;
|
|
|
+ // max-height: 250px;
|
|
|
+ .table-box {
|
|
|
+ height: 280px;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .table-container {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ margin: 25px 20px 20px;
|
|
|
+ // height: 250px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .sensor-box {
|
|
|
- .item-top-title {
|
|
|
- &::after {
|
|
|
- left: 110px;
|
|
|
- }
|
|
|
|
|
|
- &::before {
|
|
|
- left: 265px;
|
|
|
+ .sensor-box {
|
|
|
+ .item-top-title {
|
|
|
+ &::after {
|
|
|
+ left: 110px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ left: 265px;
|
|
|
+ }
|
|
|
}
|
|
|
+ // .table-container {
|
|
|
+ // // height: 280px !important;
|
|
|
+ // }
|
|
|
}
|
|
|
- // .table-container {
|
|
|
- // // height: 280px !important;
|
|
|
- // }
|
|
|
- }
|
|
|
- .warning-box {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- :deep.zxm-table-content{
|
|
|
- max-height: none !important;
|
|
|
- }
|
|
|
- :deep(.zxm-table) {
|
|
|
- table{
|
|
|
- width:max-content;
|
|
|
+ .warning-box {
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-box {
|
|
|
- width: 100%;
|
|
|
- height: 280px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 0px;
|
|
|
- position: relative;
|
|
|
- top: 30px;
|
|
|
- bottom: 10px;
|
|
|
- pointer-events: auto;
|
|
|
- .icon-group{
|
|
|
- position: absolute;
|
|
|
- top: -65px;
|
|
|
- right: 380px;
|
|
|
- display: flex;
|
|
|
- .to-small {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
|
|
|
- background-size: auto;
|
|
|
- border-radius: 10px;
|
|
|
- &:hover {
|
|
|
- background-color: rgba(79, 104, 134, 0.418);
|
|
|
+ :deep.zxm-table-content {
|
|
|
+ max-height: none !important;
|
|
|
}
|
|
|
- }
|
|
|
- .to-model {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
|
|
|
- background-size: auto;
|
|
|
- border-radius: 10px;
|
|
|
- &:hover {
|
|
|
- background-color: rgba(79, 104, 134, 0.418);
|
|
|
+ :deep(.zxm-table) {
|
|
|
+ table {
|
|
|
+ width: max-content;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .bottom-lr-box {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
|
|
|
- }
|
|
|
- .network-top {
|
|
|
+ .bottom-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
- position: absolute;
|
|
|
- // top: 55px;
|
|
|
- top: 45px;
|
|
|
- right: 0;
|
|
|
- padding: 0 10px 0 30px;
|
|
|
- z-index: 99;
|
|
|
+ margin-top: 0px;
|
|
|
+ position: relative;
|
|
|
+ top: 30px;
|
|
|
+ bottom: 10px;
|
|
|
+ pointer-events: auto;
|
|
|
+ .icon-group {
|
|
|
+ position: absolute;
|
|
|
+ top: -65px;
|
|
|
+ right: 380px;
|
|
|
+ display: flex;
|
|
|
+ .to-small {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url('/@/assets/images/vent/home/tohome.png') no-repeat center;
|
|
|
+ background-size: auto;
|
|
|
+ border-radius: 10px;
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(79, 104, 134, 0.418);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .to-model {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
|
|
|
+ background-size: auto;
|
|
|
+ border-radius: 10px;
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(79, 104, 134, 0.418);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .network-top-left {
|
|
|
+ .bottom-lr-box {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .network-top {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: absolute;
|
|
|
+ // top: 55px;
|
|
|
+ top: 45px;
|
|
|
+ right: 0;
|
|
|
+ padding: 0 10px 0 30px;
|
|
|
+ z-index: 99;
|
|
|
|
|
|
- div {
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
+ .network-top-left {
|
|
|
+ display: flex;
|
|
|
|
|
|
- span {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 15px;
|
|
|
- }
|
|
|
+ div {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
|
|
|
- .accuracy-rate {
|
|
|
- color: #FFA500;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
|
|
|
- .error-rate {
|
|
|
- color: #00f5fe;
|
|
|
+ .accuracy-rate {
|
|
|
+ color: #ffa500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .error-rate {
|
|
|
+ color: #00f5fe;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .time {
|
|
|
- color: #949494;
|
|
|
+ .time {
|
|
|
+ color: #949494;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .bottom-left {
|
|
|
- margin-right: 0px !important;
|
|
|
- position: relative;
|
|
|
+ .bottom-left {
|
|
|
+ margin-right: 0px !important;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .table-container {
|
|
|
- // height: 180px;
|
|
|
- margin-top: 40px;
|
|
|
- margin-left: 10px;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- :deep(.zxm-table) {
|
|
|
- table{
|
|
|
- width: 100%;
|
|
|
+ .table-container {
|
|
|
+ // height: 180px;
|
|
|
+ margin-top: 40px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ :deep(.zxm-table) {
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .bottom-right {
|
|
|
- // margin-left: 10px;
|
|
|
- .zl-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin: 0 10px;
|
|
|
- background: url('/@/assets/images/vent/path/zl-bg1.png') no-repeat;
|
|
|
- background-size: 940px 240px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
+ .bottom-right {
|
|
|
+ // margin-left: 10px;
|
|
|
+ .zl-container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- top: 85px;
|
|
|
- background: url('/@/assets/images/vent/path/zl-bg2.png') no-repeat;
|
|
|
- background-size: 920px 100px;
|
|
|
+ margin: 0 10px;
|
|
|
+ background: url('/@/assets/images/vent/path/zl-bg1.png') no-repeat;
|
|
|
+ background-size: 940px 240px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 85px;
|
|
|
+ background: url('/@/assets/images/vent/path/zl-bg2.png') no-repeat;
|
|
|
+ background-size: 920px 100px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .zl-path-item {
|
|
|
- height: 67px;
|
|
|
- background: url('/@/assets/images/vent/path/zl-path-item-bg.png') no-repeat;
|
|
|
- background-size: auto;
|
|
|
- background-position: center bottom;
|
|
|
- position: absolute;
|
|
|
- scale: 0.9;
|
|
|
+ .zl-path-item {
|
|
|
+ height: 67px;
|
|
|
+ background: url('/@/assets/images/vent/path/zl-path-item-bg.png') no-repeat;
|
|
|
+ background-size: auto;
|
|
|
+ background-position: center bottom;
|
|
|
+ position: absolute;
|
|
|
+ scale: 0.9;
|
|
|
|
|
|
- .title {
|
|
|
- position: relative;
|
|
|
- top: -20px;
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- background: #00f5fe33;
|
|
|
- padding: 3px 5px;
|
|
|
- backdrop-filter: blur(5px);
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ top: -20px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ background: #00f5fe33;
|
|
|
+ padding: 3px 5px;
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .position10 {
|
|
|
+ top: 128px;
|
|
|
+ left: 120px;
|
|
|
}
|
|
|
- }
|
|
|
- .position10 {
|
|
|
- top: 128px;
|
|
|
- left: 120px;
|
|
|
- }
|
|
|
|
|
|
- .position11 {
|
|
|
- top: 130px;
|
|
|
- left: 0px;
|
|
|
- }
|
|
|
+ .position11 {
|
|
|
+ top: 130px;
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
|
|
|
- .position1 {
|
|
|
- top: 52px;
|
|
|
- left: 100px;
|
|
|
- }
|
|
|
+ .position1 {
|
|
|
+ top: 52px;
|
|
|
+ left: 100px;
|
|
|
+ }
|
|
|
|
|
|
- .position9 {
|
|
|
- top: 132px;
|
|
|
- left: 270px;
|
|
|
- }
|
|
|
+ .position9 {
|
|
|
+ top: 132px;
|
|
|
+ left: 270px;
|
|
|
+ }
|
|
|
|
|
|
- .position8 {
|
|
|
- top: 128px;
|
|
|
- left: 420px;
|
|
|
- }
|
|
|
+ .position8 {
|
|
|
+ top: 128px;
|
|
|
+ left: 420px;
|
|
|
+ }
|
|
|
|
|
|
- .position2 {
|
|
|
- top: 60px;
|
|
|
- left: 320px;
|
|
|
- }
|
|
|
+ .position2 {
|
|
|
+ top: 60px;
|
|
|
+ left: 320px;
|
|
|
+ }
|
|
|
|
|
|
- .position7 {
|
|
|
- top: 120px;
|
|
|
- left: 580px;
|
|
|
- }
|
|
|
+ .position7 {
|
|
|
+ top: 120px;
|
|
|
+ left: 580px;
|
|
|
+ }
|
|
|
|
|
|
- .position6 {
|
|
|
- top: 123px;
|
|
|
- left: 690px;
|
|
|
- }
|
|
|
+ .position6 {
|
|
|
+ top: 123px;
|
|
|
+ left: 690px;
|
|
|
+ }
|
|
|
|
|
|
- .position5 {
|
|
|
- top: 103px;
|
|
|
- left: 830px;
|
|
|
- }
|
|
|
+ .position5 {
|
|
|
+ top: 103px;
|
|
|
+ left: 830px;
|
|
|
+ }
|
|
|
|
|
|
- .position4 {
|
|
|
- top: 90px;
|
|
|
- left: 740px;
|
|
|
- }
|
|
|
+ .position4 {
|
|
|
+ top: 90px;
|
|
|
+ left: 740px;
|
|
|
+ }
|
|
|
|
|
|
- .position3 {
|
|
|
- top: 80px;
|
|
|
- left: 535px;
|
|
|
+ .position3 {
|
|
|
+ top: 80px;
|
|
|
+ left: 535px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .zl-top {
|
|
|
- width: calc(100% - 30px);
|
|
|
- padding: 0 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- position: relative;
|
|
|
- top: 35px;
|
|
|
- z-index: 99;
|
|
|
- margin: 10px;
|
|
|
- border-bottom: 1px solid #00f5fe88;
|
|
|
-
|
|
|
- .btn {
|
|
|
- padding: 3px 10px;
|
|
|
- border-top: 1px solid #c6c6c6;
|
|
|
- background-image: linear-gradient(#c2c2c2aa, #b3b3b388 20%, #5a5a5a88);
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 5px;
|
|
|
-
|
|
|
- &:hover,
|
|
|
- &:active {
|
|
|
+ .zl-top {
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ padding: 0 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ top: 35px;
|
|
|
+ z-index: 99;
|
|
|
+ margin: 10px;
|
|
|
+ border-bottom: 1px solid #00f5fe88;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ padding: 3px 10px;
|
|
|
+ border-top: 1px solid #c6c6c6;
|
|
|
+ background-image: linear-gradient(#c2c2c2aa, #b3b3b388 20%, #5a5a5a88);
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 5px;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:active {
|
|
|
+ border-top: 1px solid #00f5fe;
|
|
|
+ background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
border-top: 1px solid #00f5fe;
|
|
|
background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
|
|
|
}
|
|
|
+
|
|
|
+ .data {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #ffa500;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- border-top: 1px solid #00f5fe;
|
|
|
- background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
|
|
|
+ .item-top-title {
|
|
|
+ width: 374px;
|
|
|
+ height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fafafa;
|
|
|
+ position: absolute;
|
|
|
+ padding-top: 0px;
|
|
|
+ top: -9px;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 40px;
|
|
|
+ height: 1px;
|
|
|
+ position: absolute;
|
|
|
+ left: 255px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ background-color: #00d4fe88;
|
|
|
}
|
|
|
|
|
|
- .data {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #FFA500;
|
|
|
- font-size: 15px;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 40px;
|
|
|
+ height: 1px;
|
|
|
+ position: absolute;
|
|
|
+ left: 120px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ background-color: #00d4fe88;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.item-top-title {
|
|
|
- width: 374px;
|
|
|
- height: 32px;
|
|
|
- text-align: center;
|
|
|
- line-height: 34px;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: 600;
|
|
|
- color: #fafafa;
|
|
|
- position: absolute;
|
|
|
- padding-top: 0px;
|
|
|
- top: -9px;
|
|
|
- z-index: 999;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 40px;
|
|
|
- height: 1px;
|
|
|
- position: absolute;
|
|
|
- left: 255px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- -webkit-transform: translate(-50%, -50%);
|
|
|
- background-color: #00d4fe88;
|
|
|
- }
|
|
|
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 40px;
|
|
|
- height: 1px;
|
|
|
- position: absolute;
|
|
|
- left: 120px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- -webkit-transform: translate(-50%, -50%);
|
|
|
- background-color: #00d4fe88;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.signal-round {
|
|
|
- display: inline-block;
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- border-radius: 50%;
|
|
|
- position: relative;
|
|
|
- top: -3px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- display: block;
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- top: -2px;
|
|
|
- left: -2px;
|
|
|
+ .signal-round {
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
border-radius: 50%;
|
|
|
- background-color: #daffc044;
|
|
|
- box-shadow: 0 0 1px 1px #c6ff7722;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ top: -2px;
|
|
|
+ left: -2px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #daffc044;
|
|
|
+ box-shadow: 0 0 1px 1px #c6ff7722;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.signal-round-run {
|
|
|
- background-color: #67fc00;
|
|
|
+ .signal-round-run {
|
|
|
+ background-color: #67fc00;
|
|
|
|
|
|
- &::after {
|
|
|
- background-color: #daffc044;
|
|
|
- box-shadow: 0 0 1px 1px #c6ff7722;
|
|
|
+ &::after {
|
|
|
+ background-color: #daffc044;
|
|
|
+ box-shadow: 0 0 1px 1px #c6ff7722;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.signal-round-red {
|
|
|
- background-color: #FF3823;
|
|
|
+ .signal-round-red {
|
|
|
+ background-color: #ff3823;
|
|
|
|
|
|
- &::after {
|
|
|
- background-color: #FF382344;
|
|
|
- box-shadow: 0 0 1px 1px #FF382333;
|
|
|
+ &::after {
|
|
|
+ background-color: #ff382344;
|
|
|
+ box-shadow: 0 0 1px 1px #ff382333;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.signal-round-orange {
|
|
|
- background-color: #FF9B17;
|
|
|
+ .signal-round-orange {
|
|
|
+ background-color: #ff9b17;
|
|
|
|
|
|
- &::after {
|
|
|
- background-color: #FF9B1744;
|
|
|
- box-shadow: 0 0 1px 1px #FF9B1733;
|
|
|
+ &::after {
|
|
|
+ background-color: #ff9b1744;
|
|
|
+ box-shadow: 0 0 1px 1px #ff9b1733;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.signal-round-yellow {
|
|
|
- background-color: #FFFF00;
|
|
|
+ .signal-round-yellow {
|
|
|
+ background-color: #ffff00;
|
|
|
|
|
|
- &::after {
|
|
|
- background-color: #FFFF0044;
|
|
|
- box-shadow: 0 0 1px 1px #FFFF0033;
|
|
|
+ &::after {
|
|
|
+ background-color: #ffff0044;
|
|
|
+ box-shadow: 0 0 1px 1px #ffff0033;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.table-container {
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- pointer-events: auto;
|
|
|
+ .table-container {
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ pointer-events: auto;
|
|
|
|
|
|
- &::-webkit-scrollbar {
|
|
|
- width: 4px;
|
|
|
- height: 8px;
|
|
|
- background-color: #f5f5f500;
|
|
|
- }
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #f5f5f500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background-color: #ffffff33;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- background-color: #ffffff33;
|
|
|
- border-radius: 10px;
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #cccccc44;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background-color: #cccccc44;
|
|
|
- border-radius: 10px;
|
|
|
+ .border-bg {
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.border-bg{
|
|
|
- backdrop-filter: blur(5px);
|
|
|
-}
|
|
|
+ @keyframes scale {
|
|
|
+ 0% {
|
|
|
+ transform: translate(-50%, -50%) scale(0.9);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
|
|
|
-@keyframes scale {
|
|
|
- 0% {
|
|
|
- transform: translate(-50%, -50%) scale(0.9);
|
|
|
- opacity: 1;
|
|
|
+ 100% {
|
|
|
+ transform: translate(-50%, -50%) scale(1.5);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- 100% {
|
|
|
- transform: translate(-50%, -50%) scale(1.5);
|
|
|
- opacity: 0;
|
|
|
+ :deep(.@{ventSpace}-progress-text) {
|
|
|
+ color: #fff !important;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-:deep(.@{ventSpace}-progress-text) {
|
|
|
- color: #fff !important;
|
|
|
-}
|
|
|
+ :deep(.@{ventSpace}-table-thead) {
|
|
|
+ background-color: transparent !important;
|
|
|
|
|
|
-:deep(.@{ventSpace}-table-thead) {
|
|
|
- background-color: transparent !important;
|
|
|
+ & > tr {
|
|
|
+ border: 1px solid #00f5fe !important;
|
|
|
+ }
|
|
|
|
|
|
- &>tr {
|
|
|
- border: 1px solid #00f5fe !important;
|
|
|
+ & > tr > th {
|
|
|
+ // border: none !important;
|
|
|
+ color: #00f5fe !important;
|
|
|
+ border-top: 1px solid #00f5fe !important;
|
|
|
+ border-bottom: 1px solid #00f5fe !important;
|
|
|
+ border-left: none !important;
|
|
|
+ border-right: none !important;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &>tr>th {
|
|
|
- // border: none !important;
|
|
|
- color: #00f5fe !important;
|
|
|
- border-top: 1px solid #00f5fe !important;
|
|
|
- border-bottom: 1px solid #00f5fe !important;
|
|
|
- border-left: none !important;
|
|
|
- border-right: none !important;
|
|
|
- font-size: 13px;
|
|
|
+ :deep(.@{ventSpace}-table-tbody) {
|
|
|
+ & > tr > td {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-:deep(.@{ventSpace}-table-tbody) {
|
|
|
- &>tr>td {
|
|
|
- font-size: 13px;
|
|
|
+ :deep(.@{ventSpace}-table-small) {
|
|
|
+ border: none !important;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-:deep(.@{ventSpace}-table-small) {
|
|
|
- border: none !important;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.@{ventSpace}-layout) {
|
|
|
- background: transparent !important;
|
|
|
-}</style>
|
|
|
+ :deep(.@{ventSpace}-layout) {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+</style>
|
