|
@@ -1,715 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="monitor-container">
|
|
|
- <template v-for="(sysItem, sysIndex) in deviceProperty.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: 1; top: 0px; left: 0px">
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
|
|
|
- <div v-for="(sysItem, sysIndex) in deviceProperty.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">{{ deviceProperty.modelMonitor[0].title + (index + 1) }} </div>
|
|
|
- <template v-for="(preMonitor, preMonitorIndex) in deviceProperty.modelMonitor[0].list"
|
|
|
- :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">{{
|
|
|
- selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`]
|
|
|
- ?
|
|
|
- formatNum(selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`])
|
|
|
- : '-'
|
|
|
- }}</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 != '故障信号' && selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] == '1',
|
|
|
- 'signal-round-warning':
|
|
|
- signal.title == '故障信号' && selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] == '1',
|
|
|
- 'signal-round-gry': selectData[`${deviceProperty.modelMonitor[0].key}${groupNum}${preMonitor.code}`] != '1',
|
|
|
- }"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </fourBorderBg>
|
|
|
- <fourBorderBg v-if="getShowModelMonitor(deviceProperty.modelMonitor[1], groupNum)"
|
|
|
- :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`">
|
|
|
- <div class="title">{{ deviceProperty.modelMonitor[1].title + (index + 1) }}</div>
|
|
|
- <template v-for="(cqgMonitor, cqgMonitorIndex) in deviceProperty.modelMonitor[1].list"
|
|
|
- :key="cqgMonitorIndex">
|
|
|
- <div class="monitor-item">
|
|
|
- <span class="monitor-title">{{ cqgMonitor.title }}:</span>
|
|
|
- <span class="monitor-val"><span class="val">{{
|
|
|
- selectData[`${deviceProperty.modelMonitor[1].key}${groupNum}${cqgMonitor.code}`]
|
|
|
- ?
|
|
|
- formatNum(selectData[`${deviceProperty.modelMonitor[1].key}${groupNum}${cqgMonitor.code}`])
|
|
|
- : '-'
|
|
|
- }}</span><span class="unit">{{ cqgMonitor.unit }}</span></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </fourBorderBg>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="total-data">
|
|
|
- <div class="vent-flex-row">
|
|
|
- <div class="item" v-for="(data, index) in deviceProperty.totalData" :key="index">{{ data.title + '(' +
|
|
|
- data.unit
|
|
|
- + ')' }}:<span class="val">{{
|
|
|
- selectData[data.code] ? formatNum(selectData[data.code]) : '-'
|
|
|
- }}</span></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
|
|
|
- <div class="nitrogen-home">
|
|
|
- <div class="lr left-box">
|
|
|
- <div class="left-container">
|
|
|
- <div class="monitor-box">
|
|
|
- <template v-for="(device, leftIndex) in deviceProperty.leftMonitor" :key="leftIndex">
|
|
|
- <ventBox1 :class="{ 'vent-margin-t-10': leftIndex > 0 }">
|
|
|
- <template #title>
|
|
|
- <div>{{ device.title }}</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <template v-for="(deviceChild, deviceChildIndex) in device.children"
|
|
|
- :key="deviceChildIndex">
|
|
|
- <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
|
|
|
- <div v-if="deviceChild.key.length > 1"
|
|
|
- class="parameter-title group-parameter-title">
|
|
|
- <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{
|
|
|
- deviceChild.childTitle[deviceIndex] }}</span>
|
|
|
- </div>
|
|
|
- <div class="input-box">
|
|
|
- <div v-for="(item, index) in deviceChild.list" class="input-item"
|
|
|
- :key="index">
|
|
|
- <div :class="{
|
|
|
- 'w-280px': item.type == 'sign' || item.type == 'warning',
|
|
|
- title: item.type !== 'sign' && item.type !== 'warning',
|
|
|
- }">{{ item.title }}:</div>
|
|
|
- <template v-if="item.type !== 'sign' && item.type !== 'warning'">
|
|
|
- <div class="value">{{
|
|
|
- selectData && selectData[deviceKey + item.code] ?
|
|
|
- formatNum(selectData[deviceKey + item.code], 1) : '-'
|
|
|
- }}</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="value">
|
|
|
- <span :class="{
|
|
|
- 'signal-round': true,
|
|
|
- 'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
|
|
|
- 'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
|
|
|
- 'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
|
|
|
- }"></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="lr right-box">
|
|
|
- <div class="item-box" :class="{ 'mt-50px': deviceProperty.totalData.length > 0 }">
|
|
|
- <ventBox1 v-for="(device, rightIndex) in deviceProperty.rightMonitor" :key="rightIndex"
|
|
|
- class="vent-margin-t-10">
|
|
|
- <template #title>
|
|
|
- <div>{{ device.title }}</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <div>
|
|
|
- <template v-for="(deviceChild, deviceChildIndex) in device.children"
|
|
|
- :key="deviceChildIndex">
|
|
|
- <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
|
|
|
- <div v-if="deviceChild.key.length > 1"
|
|
|
- class="parameter-title group-parameter-title">
|
|
|
- <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{
|
|
|
- deviceChild.childTitle[deviceIndex] }}</span>
|
|
|
- </div>
|
|
|
- <div class="input-box">
|
|
|
- <div v-for="(item, index) in deviceChild.list" class="input-item"
|
|
|
- :key="index">
|
|
|
- <div :class="{
|
|
|
- 'w-280px': item.type == 'sign' || item.type == 'warning',
|
|
|
- title: item.type !== 'sign' && item.type !== 'warning',
|
|
|
- }">{{ item.title }}:</div>
|
|
|
- <template v-if="item.type !== 'sign' && item.type !== 'warning'">
|
|
|
- <div class="value">{{
|
|
|
- selectData && selectData[deviceKey + item.code] ?
|
|
|
- formatNum(selectData[deviceKey + item.code], 1) : '-'
|
|
|
- }}</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="value">
|
|
|
- <span :class="{
|
|
|
- 'signal-round': true,
|
|
|
- 'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
|
|
|
- 'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
|
|
|
- 'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
|
|
|
- }"></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div ref="playerRef" class="player-box" :class="{ 'sw-player': sysOrgCode == 'sdmtjtswmk' }"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import { ref, onMounted, onUnmounted, reactive, defineProps, inject, onBeforeUnmount } from 'vue';
|
|
|
-import { devicePropertyType, propertyListType, getMonitorData } from '../nitrogen.data.1';
|
|
|
-import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
|
|
|
-import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
|
|
|
-import { list } from '../nitrogen.api';
|
|
|
-import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
-import { formatNum } from '/@/utils/ventutil';
|
|
|
-import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
-import { useGlobSetting } from '/@/hooks/setting';
|
|
|
-
|
|
|
-const props = defineProps({
|
|
|
- deviceId: {
|
|
|
- type: String,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- deviceType: {
|
|
|
- type: String,
|
|
|
- require: true,
|
|
|
- },
|
|
|
-});
|
|
|
-const { sysOrgCode } = useGlobSetting();
|
|
|
-// const sysOrgCode = 'sdmtjtswmk';
|
|
|
-const loading = ref(false);
|
|
|
-const monitorDataGroup = ref<Number[]>([]);
|
|
|
-const monitorDataGroupFlag = ref(1);
|
|
|
-const playerRef = ref();
|
|
|
-const deviceProperty = ref({
|
|
|
- leftMonitor: [] as devicePropertyType[],
|
|
|
- rightMonitor: [] as devicePropertyType[],
|
|
|
- modelMonitor: [] as devicePropertyType[],
|
|
|
- detailCtrl: [] as devicePropertyType[],
|
|
|
- monitorDataGroupArr: [],
|
|
|
- totalData: [] as propertyListType[],
|
|
|
-});
|
|
|
-deviceProperty.value = await getMonitorData(props.deviceType);
|
|
|
-
|
|
|
-// 监测数据
|
|
|
-// const selectData = reactive({});
|
|
|
-const selectData = ref<Object | []>({});
|
|
|
-const { getCamera, removeCamera } = useCamera();
|
|
|
-
|
|
|
-// 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
|
|
|
- );
|
|
|
- });
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-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] : [];
|
|
|
- // dataSource = {
|
|
|
- // msgType: null,
|
|
|
- // deviceID: '1781605808973565954',
|
|
|
- // strname: '压风机',
|
|
|
- // strinstallpos: '压风机',
|
|
|
- // fsectarea: 'null',
|
|
|
- // stationname: '压风机',
|
|
|
- // stationtype: 'redis',
|
|
|
- // deviceType: 'forcFan_normal',
|
|
|
- // typeName: '压风机',
|
|
|
- // netStatus: 1,
|
|
|
- // warnFlag: 0,
|
|
|
- // warnLevel: 0,
|
|
|
- // warnLevel_str: '正常',
|
|
|
- // warnTime: null,
|
|
|
- // readTime: '2024-04-23 08:23:49',
|
|
|
- // warnDes: '',
|
|
|
- // frontGateOpenCtrl: null,
|
|
|
- // rearGateOpenCtrl: null,
|
|
|
- // readData: {
|
|
|
- // PRE3_CPR_CoolantTemp: '62.0',
|
|
|
- // PRE1_MOT_PhaseATemp: '59.0',
|
|
|
- // PRE3_MOT_PhaseCTemp: '56.02',
|
|
|
- // PRE2_CPR_HeadTemp: '81.0',
|
|
|
- // sign: '0',
|
|
|
- // PRE1_CPR_UnLoadPre: '6.0',
|
|
|
- // PRE3_CPR_ExhaustPre: '5.7',
|
|
|
- // PRE1_CPR_LoadorUnload: '0',
|
|
|
- // PRE2_MOT_PhaseATempAlarm: '0',
|
|
|
- // PRE2_CPR_ExhaustTemp: '18.01',
|
|
|
- // PRE1_MOT_StopFail: '0',
|
|
|
- // PRE3_MOT_StopFail: '0',
|
|
|
- // PRE1_HMIReset: '0',
|
|
|
- // PRE2_HMIStop: '0',
|
|
|
- // PRE1_MOT_Ready: '1',
|
|
|
- // PRE2_CPR_LoadorUnload: '0',
|
|
|
- // PRE3_MOT_PhaseBTemp: '66.0',
|
|
|
- // Reset: '0',
|
|
|
- // PRE1_CPR_ExhaustPre: '5.3',
|
|
|
- // PRE3_FaultSignal: '0',
|
|
|
- // PRE1_MOT_PhaseATempAlarm: '0',
|
|
|
- // PRE2_MOT_PhaseBTempAlarm: '0',
|
|
|
- // PRE3_MOT_PhaseCTempAlarm: '0',
|
|
|
- // PRE2_HMIStart: '0',
|
|
|
- // PRE1_MOT_StartFail: '0',
|
|
|
- // PRE3_MOT_PhaseATemp: '66.0',
|
|
|
- // PRE2_CPR_CoolantTemp: '53.0',
|
|
|
- // PRE3_HostorLoc: '0',
|
|
|
- // PRE1_FaultSignal: '0',
|
|
|
- // PRE2_FaultSignal: '0',
|
|
|
- // PRE3_MOT_RunReturn: '1',
|
|
|
- // PRE1_HMIStart: '0',
|
|
|
- // PRE1_MOT_TotalRunTime: '6313.0',
|
|
|
- // 'PRE1_MOT_Pha seBTempAlarm': '0',
|
|
|
- // PRE1_CPR_LoadTime: '5184.0',
|
|
|
- // PRE2_MOT_PhaseCTempAlarm: '0',
|
|
|
- // PRE2_CPR_LoadTime: '3328.0',
|
|
|
- // PRE1_CPR_HeadTemp: '73.0',
|
|
|
- // PRE3_CPR_LoadTime: '5920.0',
|
|
|
- // PRE2_MOT_StartFail: '0',
|
|
|
- // PRE2_MOT_PhaseBTemp: '61.0',
|
|
|
- // PRE2_HostorLoc: '0',
|
|
|
- // PRE3_HMIStop: '0',
|
|
|
- // PRE3_CPR_HeadTemp: '84.0',
|
|
|
- // PRE2_MOT_TotalRunTime: '4272.0',
|
|
|
- // PRE3_HMIReset: '0',
|
|
|
- // PRE2_MOT_Ready: '1',
|
|
|
- // PRE2_MOT_RunReturn: '1',
|
|
|
- // PRE3_MOT_PhaseBTempAlarm: '0',
|
|
|
- // PRE2_MOT_StopFail: '0',
|
|
|
- // PRE3_CPR_UnLoadPre: '6.0',
|
|
|
- // PRE2_CPR_ExhaustPre: '5.7',
|
|
|
- // PRE3_CPR_ExhaustTemp: '18.09',
|
|
|
- // PRE3_MOT_StartFail: '0',
|
|
|
- // PRE3_MOT_TotalRunTime: '8474.0',
|
|
|
- // PRE2_MOT_PhaseATemp: '60.0',
|
|
|
- // PRE1_MOT_PhaseCTempAlarm: '0',
|
|
|
- // PRE3_HMIStart: '0',
|
|
|
- // PRE1_HMIStop: '0',
|
|
|
- // PRE3_MOT_Ready: '0',
|
|
|
- // PRE1_HostorLoc: '0',
|
|
|
- // PRE1_CPR_LoadPre: '5.0',
|
|
|
- // PRE1_MOT_RunReturn: '0',
|
|
|
- // PRE2_MOT_CtrlMode: '0',
|
|
|
- // PRE2_HMIReset: '0',
|
|
|
- // PRE1_MOT_CtrlMode: '0',
|
|
|
- // PRE3_CPR_LoadPre: '5.0',
|
|
|
- // PRE2_CPR_LoadPre: '5.0',
|
|
|
- // PRE3_MOT_CtrlMode: '0',
|
|
|
- // PRE1_MOT_PhaseCTemp: '58.0',
|
|
|
- // PRE3_CPR_LoadorUnload: '1',
|
|
|
- // TotalOutPipePre: '5.85',
|
|
|
- // PRE1_MOT_PhaseBTemp: '60.0',
|
|
|
- // PRE2_MOT_PhaseCTemp: '55.02',
|
|
|
- // PRE1_CPR_CoolantTemp: '55.0',
|
|
|
- // PRE3_MOT_PhaseATempAlarm: '0',
|
|
|
- // PRE2_CPR_UnLoadPre: '6.0',
|
|
|
- // isRun: '-2',
|
|
|
- // PRE1_CPR_ExhaustTemp: '16.12',
|
|
|
- // TotalOutPipeFlow: '884.0',
|
|
|
- // },
|
|
|
- // readDataDes: null,
|
|
|
- // summaryHour: [],
|
|
|
- // summaryDay: [],
|
|
|
- // history: [],
|
|
|
- // dayhistory: [],
|
|
|
- // totalInfo: null,
|
|
|
- // sign: null,
|
|
|
- // cameras: [],
|
|
|
- // links: [],
|
|
|
- // other1: null,
|
|
|
- // other2: null,
|
|
|
- // other3: null,
|
|
|
- // remarkInfo: null,
|
|
|
- // linkInfo: null,
|
|
|
- // };
|
|
|
- if (dataSource) {
|
|
|
- Object.assign(selectData.value, dataSource, dataSource.readData);
|
|
|
- }
|
|
|
- loading.value = false;
|
|
|
-}
|
|
|
-
|
|
|
-function setMonitorGroupNum(flag) {
|
|
|
- if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
|
|
|
- const monitorGroup = deviceProperty.value.monitorDataGroupArr[flag - 1];
|
|
|
- setModelType('compressor' + (flag - 1));
|
|
|
- monitorDataGroup.value = monitorGroup;
|
|
|
-}
|
|
|
-
|
|
|
-function handleOK() { }
|
|
|
-
|
|
|
-function handleCancel() { }
|
|
|
-
|
|
|
-// 判断是否应该在某套件(组别)下展示监测数据详情
|
|
|
-function getShowModelMonitor(config: devicePropertyType, groupNum: number) {
|
|
|
- if (config.hideInGroup) {
|
|
|
- return !config.hideInGroup.includes(groupNum);
|
|
|
- }
|
|
|
- return !!config.list.length;
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(async () => {
|
|
|
- setTimeout(() => {
|
|
|
- mountedThree(deviceProperty.value.monitorDataGroupArr).then(async () => {
|
|
|
- setMonitorGroupNum(1);
|
|
|
- getMonitor(true).then(async () => {
|
|
|
- if (selectData.value && selectData.value['deviceID']) await getCamera(selectData.value['deviceID'], playerRef.value);
|
|
|
- });
|
|
|
- });
|
|
|
- }, 0);
|
|
|
-});
|
|
|
-onBeforeUnmount(() => {
|
|
|
- removeCamera();
|
|
|
-});
|
|
|
-onUnmounted(() => {
|
|
|
- destroy();
|
|
|
- removeCamera();
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- }
|
|
|
-});
|
|
|
-</script>
|
|
|
-<style lang="less" scoped>
|
|
|
-@import '/@/design/vent/modal.less';
|
|
|
-@import '../../comment/less/workFace.less';
|
|
|
-@ventSpace: zxm;
|
|
|
-
|
|
|
-.monitor-container {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.compressorCss3D-box {
|
|
|
- pointer-events: auto;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.total-data {
|
|
|
- position: absolute;
|
|
|
- top: 40px;
|
|
|
- right: 100px;
|
|
|
- z-index: 999;
|
|
|
- color: #e4cd00;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 200px;
|
|
|
- margin-left: 30px;
|
|
|
-
|
|
|
- .val {
|
|
|
- color: #00d8ff;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.nitrogen-home {
|
|
|
- width: 100%;
|
|
|
- height: calc(100%);
|
|
|
- position: fixed;
|
|
|
- z-index: 0;
|
|
|
- height: calc(100%);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- position: relative;
|
|
|
- top: 20px;
|
|
|
- pointer-events: none;
|
|
|
-
|
|
|
- .lr {
|
|
|
- margin-top: 0 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .left-box {
|
|
|
- width: 360px !important;
|
|
|
- direction: rtl;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- height: calc(100% - 60px);
|
|
|
- margin-top: 30px !important;
|
|
|
-
|
|
|
- .left-container {
|
|
|
- direction: ltr;
|
|
|
-
|
|
|
- :deep(.input-item .title) {
|
|
|
- width: 220px !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-box {
|
|
|
- width: 360px !important;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
-
|
|
|
- .environment-monitor {
|
|
|
- .item {
|
|
|
- flex: 1;
|
|
|
- margin: 0 5px;
|
|
|
-
|
|
|
- .title {
|
|
|
- color: #7ae5ff;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- width: 100%;
|
|
|
- height: 30px;
|
|
|
- text-align: center;
|
|
|
- border-top: 2px solid #50c8fc;
|
|
|
- border-radius: 4px;
|
|
|
- background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pool-box {
|
|
|
- width: 327px;
|
|
|
- height: 65px;
|
|
|
- padding: 0 5px;
|
|
|
- background: url('/@/assets/images/vent/pump1.png') no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-origin: content-box;
|
|
|
- margin-top: 2px;
|
|
|
-
|
|
|
- .num {
|
|
|
- color: aqua;
|
|
|
- }
|
|
|
-
|
|
|
- .center {
|
|
|
- padding-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.device-state {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- color: #e90000;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.player-box {
|
|
|
- position: absolute;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- padding: 0 20px 0 20px;
|
|
|
- z-index: 9999;
|
|
|
- display: flex;
|
|
|
- align-items: end;
|
|
|
- bottom: 80px;
|
|
|
- pointer-events: none;
|
|
|
-
|
|
|
- :deep(#LivePlayerBox) {
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-//**上湾视频样式 */
|
|
|
-.sw-player {
|
|
|
- right: 350px;
|
|
|
- bottom: 130px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
-}
|
|
|
-
|
|
|
-.input-box {
|
|
|
- width: calc(100%);
|
|
|
- display: flex;
|
|
|
- flex-direction: row !important;
|
|
|
- flex-wrap: wrap !important;
|
|
|
-
|
|
|
- .input-item {
|
|
|
- width: calc(50% - 8px);
|
|
|
- padding: 0 2px;
|
|
|
-
|
|
|
- &:nth-child(2n) {
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.btn-group {
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
- right: 380px;
|
|
|
- top: 85px;
|
|
|
- pointer-events: auto;
|
|
|
-
|
|
|
- .btn-item {
|
|
|
- width: auto;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.state-header {
|
|
|
- display: flex;
|
|
|
- color: #73e8fe;
|
|
|
-
|
|
|
- .header-item {
|
|
|
- width: 25%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.device-row {
|
|
|
- display: flex;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .state {
|
|
|
- width: 25%;
|
|
|
- text-align: center;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
- overflow: auto;
|
|
|
-}
|
|
|
-</style>
|