|
|
@@ -1,95 +1,175 @@
|
|
|
<template>
|
|
|
- <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
|
|
|
- <template v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
|
|
|
- <div :id="`compressorCss3D${sysIndex + 1}`" class="threejs-Object-CSS compressorCss3D-box"
|
|
|
- style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 模型卡片 -->
|
|
|
- <div v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex" style="position: absolute; z-index: -1">
|
|
|
- <div v-show="monitorDataGroupFlag == sysIndex + 1" :id="`nitrogenMonitorBox${sysIndex}`">
|
|
|
- <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
|
|
|
- <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
|
|
|
- <div class="title">{{ `空压机${groupNum}` }} </div>
|
|
|
- <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
|
|
|
- <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
|
|
|
- <span class="monitor-title">{{ preMonitor.title }}:</span>
|
|
|
- <span class="monitor-val"><span class="val">{{
|
|
|
- monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
|
|
|
- ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
|
|
|
- : preMonitor.value
|
|
|
- ? preMonitor.value
|
|
|
- : '-'
|
|
|
- }}</span><span class="unit">{{ preMonitor.unit }}</span></span>
|
|
|
- </div>
|
|
|
- <div v-else class="signal-item">
|
|
|
- <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
|
|
|
- <span class="monitor-title">{{ signal.title }}</span>
|
|
|
- <span :class="{
|
|
|
- 'signal-round': true,
|
|
|
- 'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
- 'signal-round-warning':
|
|
|
- signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
- 'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
- }"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </fourBorderBg>
|
|
|
- <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`"
|
|
|
- v-if="cqgMonitorList && cqgMonitorList.length > 0">
|
|
|
- <div class="title">{{ `风包${groupNum}` }}</div>
|
|
|
- <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
|
|
|
- <div class="monitor-item">
|
|
|
- <span class="monitor-title">{{ cqgMonitor.title }}:</span>
|
|
|
- <span class="monitor-val"><span class="val">{{
|
|
|
- monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
|
|
|
- ? formatNum(monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
|
|
|
- : cqgMonitor.value
|
|
|
- ? cqgMonitor.value
|
|
|
- : '-'
|
|
|
- }}</span><span class="unit">{{ cqgMonitor.unit }}</span></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </fourBorderBg>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="zd-model">
|
|
|
+ <ModelTip :modelType="moduleTypeName" :statusData="monitorData"></ModelTip>
|
|
|
</div>
|
|
|
<div class="nitrogen-home">
|
|
|
-
|
|
|
- <!-- 顶部导航提示 -->
|
|
|
- <!-- <div class="total-data" v-if="totalData && totalData.length > 0">
|
|
|
- <div class="vent-flex-row">
|
|
|
- <div class="item" v-for="(data, index) in totalData" :key="index"
|
|
|
- >{{ data.title + '(' + data.unit + ')' }}：<span class="val">{{
|
|
|
- monitorData[data.code] ? formatNum(monitorData[data.code]) : data.value ? data.value : '-'
|
|
|
- }}</span></div
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
<div class="nitrogen-container">
|
|
|
- <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
|
|
|
+ <!-- <div v-if="monitorNetStatus == 0" class="device-state">网络断开</div> -->
|
|
|
<div class="top-box">
|
|
|
<!-- 左边监测数据 -->
|
|
|
<div class="lr-box left-box">
|
|
|
- <div class="left-container" v-if="preFanMonitorData && preFanMonitorData.length > 0">
|
|
|
- <div class="item item-l" v-for="(groupNum, index) in monitorDataGroup" :key="index">
|
|
|
- <div class="monitor-box">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div>{{ groupNum }}号压风机</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
+ <template v-if="moduleTypeName == 'KYJ'">
|
|
|
+ <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupKyjL" :key="index">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>{{ groupNum }}号压风机</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="monitor-box">
|
|
|
+ <div class="parameter-title group-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
|
|
|
+ </div>
|
|
|
<div class="state-item">
|
|
|
<div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
|
|
|
<span class="state-title">{{
|
|
|
- preFan.title + (preFan.unit !== 'signal' && preFan.unit !== 'warning' ? `(${preFan.unit})` :
|
|
|
+ preFan.title + (preFan.unit && preFan.unit !== 'signal' && preFan.unit !== 'warning' ?
|
|
|
+ `(${preFan.unit})` :
|
|
|
'')
|
|
|
- }}</span>
|
|
|
+ }}</span>
|
|
|
<span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
|
|
|
- monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)] >= 0
|
|
|
- ? formatNum(Number(monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)]))
|
|
|
+ monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)] >= 0
|
|
|
+ ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
|
|
|
+ : preFan.value
|
|
|
+ ? preFan.value
|
|
|
+ : '-'
|
|
|
+ }}</span>
|
|
|
+ <span v-else :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run':
|
|
|
+ preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ 'signal-round-warning':
|
|
|
+ preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="monitor-box">
|
|
|
+ <div class="parameter-title device-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="32" name="device-paramer" /><span>电机数据</span>
|
|
|
+ </div>
|
|
|
+ <div class="state-item">
|
|
|
+ <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorDjData" :key="preFanIndex">
|
|
|
+ <span class="state-title">{{
|
|
|
+ preFan.title + (preFan.unit && preFan.unit !== 'signal' && preFan.unit !== 'warning' ?
|
|
|
+ `(${preFan.unit})` :
|
|
|
+ '')
|
|
|
+ }}</span>
|
|
|
+ <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
|
|
|
+ monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)] >= 0
|
|
|
+ ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
|
|
|
+ : preFan.value
|
|
|
+ ? preFan.value
|
|
|
+ : '-'
|
|
|
+ }}</span>
|
|
|
+ <span v-else :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run':
|
|
|
+ preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ 'signal-round-warning':
|
|
|
+ preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupZdjL" :key="index">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>{{ groupNum }}号压风机</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="monitor-box">
|
|
|
+ <div class="parameter-title group-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
|
|
|
+ </div>
|
|
|
+ <div class="state-item">
|
|
|
+ <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
|
|
|
+ <span class="state-title">{{
|
|
|
+ preFan.title + (preFan.unit && preFan.unit !== 'signal' && preFan.unit !== 'warning' ?
|
|
|
+ `(${preFan.unit})` :
|
|
|
+ '')
|
|
|
+ }}</span>
|
|
|
+ <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
|
|
|
+ monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)] >= 0
|
|
|
+ ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
|
|
|
+ : preFan.value
|
|
|
+ ? preFan.value
|
|
|
+ : '-'
|
|
|
+ }}</span>
|
|
|
+ <span v-else :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run':
|
|
|
+ preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ 'signal-round-warning':
|
|
|
+ preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="monitor-box">
|
|
|
+ <div class="parameter-title device-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="32" name="device-paramer" /><span>电机数据</span>
|
|
|
+ </div>
|
|
|
+ <div class="state-item">
|
|
|
+ <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorDjData" :key="preFanIndex">
|
|
|
+ <span class="state-title">{{
|
|
|
+ preFan.title + (preFan.unit && preFan.unit !== 'signal' && preFan.unit !== 'warning' ?
|
|
|
+ `(${preFan.unit})` :
|
|
|
+ '')
|
|
|
+ }}</span>
|
|
|
+ <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
|
|
|
+ monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)] >= 0
|
|
|
+ ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
|
|
|
+ : preFan.value
|
|
|
+ ? preFan.value
|
|
|
+ : '-'
|
|
|
+ }}</span>
|
|
|
+ <span v-else :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run':
|
|
|
+ preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ 'signal-round-warning':
|
|
|
+ preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- 右边控制状态 -->
|
|
|
+ <div class="lr-box right-box">
|
|
|
+ <template v-if="moduleTypeName == 'KYJ'">
|
|
|
+ <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupKyjR" :key="index">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>3号压风机</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="monitor-box">
|
|
|
+ <div class="parameter-title group-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
|
|
|
+ </div>
|
|
|
+ <div class="state-item">
|
|
|
+ <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
|
|
|
+ <span class="state-title">{{
|
|
|
+ preFan.title + (preFan.unit && preFan.unit !== 'signal' && preFan.unit !== 'warning' ?
|
|
|
+ `(${preFan.unit})` :
|
|
|
+ '')
|
|
|
+ }}</span>
|
|
|
+ <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
|
|
|
+ monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)] >= 0
|
|
|
+ ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
|
|
|
: preFan.value
|
|
|
? preFan.value
|
|
|
: '-'
|
|
|
@@ -104,88 +184,181 @@
|
|
|
}"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="monitor-box">
|
|
|
+ <div class="parameter-title device-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="32" name="device-paramer" /><span>电机数据</span>
|
|
|
+ </div>
|
|
|
+ <div class="state-item">
|
|
|
+ <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorDjData" :key="preFanIndex">
|
|
|
+ <span class="state-title">{{
|
|
|
+ preFan.title + (preFan.unit && preFan.unit !== 'signal' && preFan.unit !== 'warning' ?
|
|
|
+ `(${preFan.unit})` :
|
|
|
+ '')
|
|
|
+ }}</span>
|
|
|
+ <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
|
|
|
+ monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)] >= 0
|
|
|
+ ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
|
|
|
+ : preFan.value
|
|
|
+ ? preFan.value
|
|
|
+ : '-'
|
|
|
+ }}</span>
|
|
|
+ <span v-else :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run':
|
|
|
+ preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ 'signal-round-warning':
|
|
|
+ preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupZdjR" :key="index">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>{{ groupNum }}号制氮机</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="monitor-box">
|
|
|
+ <div class="parameter-title group-parameter-title">
|
|
|
+ <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
|
|
|
+ </div>
|
|
|
+ <div class="state-item">
|
|
|
+ <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorDataZD" :key="preFanIndex">
|
|
|
+ <span class="state-title">{{
|
|
|
+ preFan.title + (preFan.unit && preFan.unit !== 'signal' && preFan.unit !== 'warning' ?
|
|
|
+ `(${preFan.unit})` :
|
|
|
+ '')
|
|
|
+ }}</span>
|
|
|
+ <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
|
|
|
+ monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)] >= 0
|
|
|
+ ? formatNum(Number(monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)]))
|
|
|
+ : preFan.value
|
|
|
+ ? preFan.value
|
|
|
+ : '-'
|
|
|
+ }}</span>
|
|
|
+ <span v-else :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run':
|
|
|
+ preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[1], `${prefix[1]}${groupNum}`)] != '1',
|
|
|
+ 'signal-round-warning':
|
|
|
+ preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[1], `${prefix[1]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code.replace(prefix[1], `${prefix[1]}${groupNum}`)] != '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+ <!-- <ventBox1 class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div>设备实时监测曲线</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <BarAndLineCustom xAxisPropType="readTime" :chartData="monitorData" height="240px"
|
|
|
+ :propTypeArr="['flowRate']" :option="zhudanOption" />
|
|
|
+ </template>
|
|
|
+ </ventBox1> -->
|
|
|
+ <div class="vent-margin-t-10">
|
|
|
+ <!-- <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="renderPlayer" ref="playerRef" class="playerBox"> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup name="nitrogenHome">
|
|
|
-import { onMounted, onUnmounted, ref, onBeforeUnmount } from 'vue';
|
|
|
-import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
|
|
|
-import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
|
|
|
-import { list } from '../nitrogen.api';
|
|
|
+import { computed, onMounted, onUnmounted, ref, watch, reactive, nextTick, watchEffect } from 'vue';
|
|
|
import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
-import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, totalData, } from '../nitrogen.data.lh';
|
|
|
+import { list } from '../nitrogen.api';
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+import LivePlayer from '@liveqing/liveplayer-v3';
|
|
|
+import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
|
|
|
+import { zhudanOption } from '../nitrogen.data.ts';
|
|
|
+import { preFanMonitorDataZD, prefix, preFanMonitorData, preFanMonitorDjData } from '../nitrogen.data.ln'
|
|
|
import { formatNum } from '/@/utils/ventutil';
|
|
|
-import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
+import ModelTip from './model-tip.vue'
|
|
|
+
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ deviceId: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ modalType: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ moduleTypeName: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const monitorDataGroupKyjL = ref(2)
|
|
|
+const monitorDataGroupKyjR = ref(1)
|
|
|
+const monitorDataGroupZdjL = ref(2)
|
|
|
+const monitorDataGroupZdjR = ref(2)
|
|
|
|
|
|
const loading = ref(true);
|
|
|
-const monitorDataGroupFlag = ref(1);
|
|
|
-const monitorDataGroup = ref<Number[]>([]);
|
|
|
-const monitorData = ref<Object | []>({});
|
|
|
-const playerRef = ref();
|
|
|
-const renderPlayer = ref(true);
|
|
|
|
|
|
-const { getCamera, removeCamera } = useCamera();
|
|
|
+const flvURL1 = () => {
|
|
|
+ return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
|
|
|
+ // return ''
|
|
|
+};
|
|
|
+const monitorNetStatus = ref(0);
|
|
|
+
|
|
|
+const monitorData = reactive({});
|
|
|
|
|
|
// https获取监测数据
|
|
|
let timer: null | NodeJS.Timeout = null;
|
|
|
async function getMonitor(flag?) {
|
|
|
if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- return new Promise(async (resolve) => {
|
|
|
- timer = await setTimeout(
|
|
|
- async () => {
|
|
|
- await getDataSource();
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- resolve(null);
|
|
|
- await getMonitor(false);
|
|
|
- },
|
|
|
- flag ? 0 : 1000
|
|
|
- );
|
|
|
- });
|
|
|
+ timer = await setTimeout(
|
|
|
+ async () => {
|
|
|
+ if (props.deviceId) {
|
|
|
+ await getDataSource(props.deviceId);
|
|
|
+ }
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ await getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-async function getDataSource() {
|
|
|
- const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
|
|
|
- let dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : [];
|
|
|
+async function getDataSource(systemID) {
|
|
|
+ const res = await list({ devicetype: 'sys',systemID:'', type: 'all' });
|
|
|
+ const result = res.msgTxt;
|
|
|
+ if (!result || result.length < 1) return;
|
|
|
+ let dataSource: any = [];
|
|
|
+ if (props.moduleTypeName == 'KYJ') {
|
|
|
+ dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[1] : {};
|
|
|
+ } else {
|
|
|
+ dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : {};
|
|
|
+ }
|
|
|
|
|
|
if (dataSource) {
|
|
|
- Object.assign(monitorData.value, dataSource, dataSource.readData);
|
|
|
+ Object.assign(monitorData, dataSource, dataSource.readData);
|
|
|
}
|
|
|
- loading.value = false;
|
|
|
-}
|
|
|
-
|
|
|
-function setMonitorGroupNum(flag) {
|
|
|
- if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
|
|
|
- const monitorGroup = monitorDataGroupArr[flag - 1];
|
|
|
- setModelType('compressor' + (flag - 1));
|
|
|
- monitorDataGroup.value = monitorGroup;
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
|
- setTimeout(() => {
|
|
|
- mountedThree(monitorDataGroupArr).then(async () => {
|
|
|
- setMonitorGroupNum(1);
|
|
|
- getMonitor(true).then(async () => {
|
|
|
- if (monitorData.value && monitorData.value['deviceID']) await getCamera(monitorData.value['deviceID'], playerRef, renderPlayer);
|
|
|
- });
|
|
|
- });
|
|
|
- }, 0);
|
|
|
-});
|
|
|
-onBeforeUnmount(() => {
|
|
|
- removeCamera(playerRef);
|
|
|
+ await getMonitor(true);
|
|
|
});
|
|
|
+
|
|
|
onUnmounted(() => {
|
|
|
- destroy();
|
|
|
if (timer) {
|
|
|
clearTimeout(timer);
|
|
|
timer = undefined;
|
|
|
@@ -194,125 +367,46 @@ onUnmounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import '../../comment/less/workFace.less';
|
|
|
@ventSpace: zxm;
|
|
|
|
|
|
-.compressorCss3D-box {
|
|
|
- .modal-monitor {
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- &:deep(.win) {
|
|
|
- margin: 0 !important;
|
|
|
- background: #00000044;
|
|
|
- }
|
|
|
-
|
|
|
- &:deep(.main) {
|
|
|
- .title {
|
|
|
- height: 34px;
|
|
|
- text-align: center;
|
|
|
- font-weight: 600;
|
|
|
- color: #7af5ff;
|
|
|
- // background-image: url('../../../assets/img/yfj/light.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position-x: center;
|
|
|
- background-position-y: 100%;
|
|
|
- background-size: 80%;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .monitor-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- width: auto;
|
|
|
- margin-bottom: 3px;
|
|
|
-
|
|
|
- .monitor-val {
|
|
|
- color: #ffb700;
|
|
|
- display: flex;
|
|
|
- width: auto;
|
|
|
-
|
|
|
- .val {
|
|
|
- width: 80px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .unit {
|
|
|
- color: #ffffffbb;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .monitor-title {
|
|
|
- width: 100px;
|
|
|
- color: #7af5ff;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .signal-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- // margin-bottom: 5px;
|
|
|
- .signal-round {
|
|
|
- display: inline-block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- margin: 0 10px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- display: block;
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- top: -2px;
|
|
|
- left: -2px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .signal-round-gry {
|
|
|
- background-color: #858585;
|
|
|
-
|
|
|
- &::after {
|
|
|
- background-color: #85858544;
|
|
|
- box-shadow: 0 0 1px 1px #85858599;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .signal-round-run {
|
|
|
- background-color: #67fc00;
|
|
|
-
|
|
|
- &::after {
|
|
|
- background-color: #67fc0044;
|
|
|
- box-shadow: 0 0 1px 1px #c6ff77;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .signal-round-warning {
|
|
|
- background-color: #e9170b;
|
|
|
-
|
|
|
- &::after {
|
|
|
- background-color: #e9170b44;
|
|
|
- box-shadow: 0 0 1px 1px #e9170b;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.zd-model {
|
|
|
+ // width: calc(100% - 695px);
|
|
|
+ // height: calc(100% - 100px);
|
|
|
+ width: calc(100% - 705px);
|
|
|
+ height: calc(100% - 110px);
|
|
|
+ position: absolute;
|
|
|
+ left: 365px;
|
|
|
+ top: 90px;
|
|
|
+ padding-right: 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
+// .nitrogen-box {
|
|
|
+// width: 100%;
|
|
|
+// height: 100%;
|
|
|
+// display: flex;
|
|
|
+// justify-content: center;
|
|
|
+// }
|
|
|
+
|
|
|
+// #nitrogenCss3D {
|
|
|
+// .modal-monitor {
|
|
|
+// width: 200px;
|
|
|
+// position: absolute;
|
|
|
+// left: 0px;
|
|
|
+// top: 0px;
|
|
|
+// }
|
|
|
+
|
|
|
+// &:deep(.win) {
|
|
|
+// margin: 0 !important;
|
|
|
+// background: #00000044;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
.nitrogen-home {
|
|
|
width: 100%;
|
|
|
- height: calc(100%);
|
|
|
+ height: 100%;
|
|
|
position: fixed;
|
|
|
- z-index: 99;
|
|
|
+ z-index: 9999;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
@@ -320,37 +414,17 @@ onUnmounted(() => {
|
|
|
pointer-events: none;
|
|
|
top: 60px;
|
|
|
|
|
|
- .total-data {
|
|
|
- position: absolute;
|
|
|
- color: #e4cd00;
|
|
|
- z-index: 9;
|
|
|
- top: 20px;
|
|
|
- right: 30px;
|
|
|
- // display: flex;
|
|
|
- font-size: 18px;
|
|
|
-
|
|
|
- .item {
|
|
|
- margin-left: 20px;
|
|
|
-
|
|
|
- .val {
|
|
|
- display: inline-box;
|
|
|
- width: 150px;
|
|
|
- color: #00d8ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.nitrogen-container {
|
|
|
width: 100%;
|
|
|
- height: calc(100%);
|
|
|
+ height: calc(100% - 100px);
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- position: relative;
|
|
|
+ margin-bottom: 100px;
|
|
|
|
|
|
.device-state {
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
|
- top: 20px;
|
|
|
+ top: 70px;
|
|
|
color: #e90000;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -365,15 +439,17 @@ onUnmounted(() => {
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.lr-box {
|
|
|
+ height: fit-content;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
position: relative;
|
|
|
+ overflow: hidden;
|
|
|
z-index: 9999;
|
|
|
pointer-events: auto;
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
- width: 285px;
|
|
|
+ width: 335px;
|
|
|
height: auto;
|
|
|
position: relative;
|
|
|
border-radius: 5px;
|
|
|
@@ -383,105 +459,57 @@ onUnmounted(() => {
|
|
|
color: #fff;
|
|
|
overflow: hidden;
|
|
|
|
|
|
- .control-item {
|
|
|
- height: auto;
|
|
|
- min-height: 35px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 5px;
|
|
|
- margin: 0 10px 0 3px;
|
|
|
- pointer-events: auto;
|
|
|
- background: linear-gradient(to right, #0063cd22, #0063cd04);
|
|
|
-
|
|
|
- margin-bottom: 5px;
|
|
|
- border-width: 1px;
|
|
|
- border-style: dashed;
|
|
|
-
|
|
|
- border-image: linear-gradient(to right, #008ccd66, #0063cd04) 1 1;
|
|
|
- border-radius: 5px;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .control-item-l {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- .round {
|
|
|
- display: inline-block;
|
|
|
- width: 3px;
|
|
|
- height: 3px;
|
|
|
- padding: 1px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #3df6ff;
|
|
|
- margin-right: 5px;
|
|
|
- box-shadow: 0 0 1px 1px #64f7ff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .control-item-r {
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .button-box {
|
|
|
- position: relative;
|
|
|
- padding: 5px;
|
|
|
- border: 1px transparent solid;
|
|
|
- background-clip: border-box;
|
|
|
- border-radius: 5px;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .a-button {
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
-
|
|
|
- &::v-deep .a-button--mini {
|
|
|
- padding: 6px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- &::v-deep .a-button--mini.is-round {
|
|
|
- padding: 6px 10px;
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0px;
|
|
|
}
|
|
|
|
|
|
.base-title {
|
|
|
- width: calc(100% - 60px);
|
|
|
- text-align: center;
|
|
|
- color: #00d8ff;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-left: 10px;
|
|
|
+ position: relative;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 4px;
|
|
|
+ height: 12px;
|
|
|
+ top: 7px;
|
|
|
+ left: 0px;
|
|
|
+ background: #45d3fd;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.state-item {
|
|
|
- width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
-
|
|
|
+ padding: 5px;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.item-col {
|
|
|
- width: 50%;
|
|
|
+ width: calc(50% - 5px);
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- padding: 5px;
|
|
|
+ padding-right: 4px;
|
|
|
+ background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
|
|
|
+
|
|
|
+ // &:first-child {
|
|
|
+ // margin-right: 10px;
|
|
|
+ // }
|
|
|
|
|
|
.state-title {
|
|
|
color: #ffffffcc;
|
|
|
flex: 9;
|
|
|
font-size: 14px;
|
|
|
-
|
|
|
- .unit {
|
|
|
- // color: #ffffffbb;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.state-val {
|
|
|
flex: 1;
|
|
|
- color: #e4a300;
|
|
|
+ color: #00eefffe;
|
|
|
margin-right: 5px;
|
|
|
text-align: right;
|
|
|
font-size: 14px;
|
|
|
@@ -537,104 +565,230 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .item-l {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .left-box {
|
|
|
- height: calc(100% - 50px);
|
|
|
- overflow-x: hidden;
|
|
|
- overflow-y: auto;
|
|
|
- pointer-events: auto;
|
|
|
- direction: rtl;
|
|
|
-
|
|
|
- .item-l {
|
|
|
- width: 335px;
|
|
|
+ .monitor-box {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .monitor-box {
|
|
|
- background-color: #ffffff05;
|
|
|
+ .parameter-title {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .icon,
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ top: -10px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .left-container {
|
|
|
- direction: ltr;
|
|
|
- }
|
|
|
+ .group-parameter-title {
|
|
|
+ background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
|
|
|
|
|
|
- .control-item {
|
|
|
- height: 36px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .playerBox {
|
|
|
- z-index: 9999;
|
|
|
- position: fixed;
|
|
|
- // top: 200px;
|
|
|
- right: 15px;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 100px);
|
|
|
- overflow-y: auto;
|
|
|
- margin: auto;
|
|
|
- pointer-events: none;
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
+ .icon {
|
|
|
+ left: -12px;
|
|
|
+ top: -17px;
|
|
|
+ }
|
|
|
|
|
|
- &:deep(#LivePlayerBox) {
|
|
|
- width: auto !important;
|
|
|
- height: auto !important;
|
|
|
- display: flex;
|
|
|
- flex-flow: column;
|
|
|
- justify-content: end;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ span {
|
|
|
+ left: 18px;
|
|
|
+ }
|
|
|
|
|
|
-.btn {
|
|
|
- padding: 2px 12px;
|
|
|
- position: relative;
|
|
|
- border-radius: 2px;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- content: '';
|
|
|
- width: calc(100% - 4px);
|
|
|
- height: calc(100% - 4px);
|
|
|
- top: 2px;
|
|
|
- left: 2px;
|
|
|
- border-radius: 2px;
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
-}
|
|
|
+ .item-col {
|
|
|
+ background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.btn1 {
|
|
|
- border: 1px solid #5cfaff;
|
|
|
+ .device-parameter-title {
|
|
|
+ background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
|
|
|
|
|
|
- &::before {
|
|
|
- background-image: linear-gradient(#2effee92, #0cb1d592);
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ left: -10px;
|
|
|
+ top: -14px;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- border: 1px solid #5cfaffaa;
|
|
|
+ span {
|
|
|
+ left: 18px;
|
|
|
+ }
|
|
|
|
|
|
- &::before {
|
|
|
- background-image: linear-gradient(#2effee72, #0cb1d572);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .item-col {
|
|
|
+ background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.btn2 {
|
|
|
- border: 1px solid #e91927;
|
|
|
- margin-left: 10px;
|
|
|
+ .right-box {
|
|
|
+ width: 330px;
|
|
|
+ margin-top: 50px;
|
|
|
+
|
|
|
+ // .control-group {
|
|
|
+ // display: flex;
|
|
|
+ // // justify-content: space-around;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+
|
|
|
+ // .control-item {
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // padding: 0 4px;
|
|
|
+
|
|
|
+ // .control-item-title {
|
|
|
+ // color: #a6dce9;
|
|
|
+ // position: relative;
|
|
|
+ // top: 5px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .control-item-state {
|
|
|
+ // width: 94px;
|
|
|
+ // height: 47px;
|
|
|
+ // background: url('/@/assets/images/vent/control-switch-bg.png');
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .button-box {
|
|
|
+ // position: relative;
|
|
|
+ // padding: 5px;
|
|
|
+ // border: 1px transparent solid;
|
|
|
+ // background-clip: border-box;
|
|
|
+ // border-radius: 5px;
|
|
|
+ // margin-left: 8px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .a-button {
|
|
|
+ // pointer-events: auto;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // &::v-deep .a-button--mini {
|
|
|
+ // padding: 6px 10px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // &::v-deep .a-button--mini.is-round {
|
|
|
+ // padding: 6px 10px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
|
|
|
- &::before {
|
|
|
- background-image: linear-gradient(#b02533, #a31f2e);
|
|
|
- }
|
|
|
+ .left-box {
|
|
|
+ width: 365px;
|
|
|
+ margin-top: 45px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- &::before {
|
|
|
- background-image: linear-gradient(#bd2e3ccc, #a31f2ecc);
|
|
|
+ &:deep(.win) {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// &:deep(.main) {
|
|
|
+// .title {
|
|
|
+// height: 34px;
|
|
|
+// text-align: center;
|
|
|
+// font-weight: 600;
|
|
|
+// color: #7af5ff;
|
|
|
+// // background-image: url('../../../assets/img/yfj/light.png');
|
|
|
+// background-repeat: no-repeat;
|
|
|
+// background-position-x: center;
|
|
|
+// background-position-y: 100%;
|
|
|
+// background-size: 80%;
|
|
|
+// font-size: 16px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .monitor-item {
|
|
|
+// width: 200px;
|
|
|
+// display: flex;
|
|
|
+// flex-direction: row;
|
|
|
+// width: auto;
|
|
|
+// margin-bottom: 3px;
|
|
|
+
|
|
|
+// .monitor-val {
|
|
|
+// color: #ffb700;
|
|
|
+// display: flex;
|
|
|
+// width: auto;
|
|
|
+
|
|
|
+// .val {
|
|
|
+// width: 80px;
|
|
|
+// font-size: 14px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .unit {
|
|
|
+// color: #ffffffbb;
|
|
|
+// font-size: 14px;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .monitor-title {
|
|
|
+// width: 100px;
|
|
|
+// color: #7af5ff;
|
|
|
+// font-weight: 400;
|
|
|
+// font-size: 14px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .signal-item {
|
|
|
+// display: flex;
|
|
|
+// justify-content: space-between;
|
|
|
+
|
|
|
+// // margin-bottom: 5px;
|
|
|
+// .signal-round {
|
|
|
+// display: inline-block;
|
|
|
+// width: 8px;
|
|
|
+// height: 8px;
|
|
|
+// border-radius: 50%;
|
|
|
+// margin: 0 10px;
|
|
|
+// position: relative;
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// display: block;
|
|
|
+// content: '';
|
|
|
+// position: absolute;
|
|
|
+// width: 12px;
|
|
|
+// height: 12px;
|
|
|
+// top: -2px;
|
|
|
+// left: -2px;
|
|
|
+// border-radius: 50%;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .signal-round-gry {
|
|
|
+// background-color: #858585;
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// background-color: #85858544;
|
|
|
+// box-shadow: 0 0 1px 1px #85858599;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .signal-round-run {
|
|
|
+// background-color: #67fc00;
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// background-color: #67fc0044;
|
|
|
+// box-shadow: 0 0 1px 1px #c6ff77;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .signal-round-warning {
|
|
|
+// background-color: #e9170b;
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// background-color: #e9170b44;
|
|
|
+// box-shadow: 0 0 1px 1px #e9170b;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+:deep(.zxm-radio-wrapper) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
</style>
|
