|
|
@@ -1,673 +1,753 @@
|
|
|
<template>
|
|
|
- <div id="nitrogenCss3D" class="threejs-Object-CSS"
|
|
|
- style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
|
|
|
- <a-spin :spinning="loading" />
|
|
|
- <!-- 中间区域 -->
|
|
|
+ <div id="nitrogenCss3D" class="threejs-Object-CSS"
|
|
|
+ style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
|
|
|
+ <a-spin :spinning="loading" />
|
|
|
+ <template>
|
|
|
<div v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
|
|
|
<fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
|
|
|
- <div class="title">{{ groupNum }}号制氮机 </div>
|
|
|
+ <div class="title">{{ monitorData[groupNum - 1]['strname'] }} </div>
|
|
|
<div class="monitor-item">
|
|
|
- <span class="monitor-title">注氮压力:</span>
|
|
|
- <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['nitrogenPressure'] ?
|
|
|
- monitorData[groupNum - 1]['nitrogenPressure'] : '-' }}</span><span class="unit">Mpa</span></span>
|
|
|
+ <span class="monitor-title">排气压力:</span>
|
|
|
+ <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] ?
|
|
|
+ monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] : '-' }}</span><span class="unit">kPa</span></span>
|
|
|
</div>
|
|
|
<div class="monitor-item">
|
|
|
- <span class="monitor-title">氮气实时流量:</span>
|
|
|
- <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['instantaneousFlow'] ?
|
|
|
- monitorData[groupNum - 1]['instantaneousFlow'] : '-' }}</span><span class="unit">m³/h</span></span>
|
|
|
+ <span class="monitor-title">累计流量:</span>
|
|
|
+ <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['FluxTotal1'] ?
|
|
|
+ monitorData[groupNum - 1]['FluxTotal1'] : '-' }}</span><span class="unit">m³/h</span></span>
|
|
|
</div>
|
|
|
<div class="monitor-item">
|
|
|
- <span class="monitor-title">氮气浓度:</span>
|
|
|
- <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['nitrogenContent'] ?
|
|
|
- monitorData[groupNum - 1]['nitrogenContent'] : '-' }}</span><span class="unit">%</span></span>
|
|
|
+ <span class="monitor-title">氮气纯度:</span>
|
|
|
+ <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['NitrogenPurity'] ?
|
|
|
+ monitorData[groupNum - 1]['NitrogenPurity'] : '-' }}</span><span class="unit">%</span></span>
|
|
|
</div>
|
|
|
- <div class="signal-item">
|
|
|
- <div class="signal"><span class="monitor-title">运行信号</span><span
|
|
|
- :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['compressRunSigF1'], 'signal-round-gry': !monitorData[groupNum - 1]['compressRunSigF1'] }"></span>
|
|
|
+ <div class="monitor-item">
|
|
|
+ <span class="monitor-title">运行时间:</span>
|
|
|
+ <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['AirCompressor_RunTime'] ?
|
|
|
+ monitorData[groupNum - 1]['AirCompressor_RunTime'] : '-' }}</span><span class="unit">-</span></span>
|
|
|
+ </div>
|
|
|
+ <div class="monitor-item">
|
|
|
+ <span class="monitor-title">加载时间:</span>
|
|
|
+ <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['AirCompressor_LoadTime'] ?
|
|
|
+ monitorData[groupNum - 1]['AirCompressor_LoadTime'] : '-' }}</span><span class="unit">-</span></span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="signal-item">
|
|
|
+ <div class="signal"><span class="monitor-title">运行时间:</span><span
|
|
|
+ :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['AirCompressor_RunTime'], 'signal-round-gry': !monitorData[groupNum - 1]['AirCompressor_RunTime'] }"></span>
|
|
|
</div>
|
|
|
- <div class="signal"><span class="monitor-title">加载信号</span><span
|
|
|
- :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['compressLoadSigF1'], 'signal-round-gry': !monitorData[groupNum - 1]['compressLoadSigF1'] }"></span>
|
|
|
+ <div class="signal"><span class="monitor-title">加载时间:</span><span
|
|
|
+ :class="{ 'signal-round': true, 'signal-round-run': monitorData[groupNum - 1]['AirCompressor_LoadTime'], 'signal-round-gry': !monitorData[groupNum - 1]['AirCompressor_LoadTime'] }"></span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</fourBorderBg>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
|
|
|
- <div class="nitrogen-home">
|
|
|
- <div class="nitrogen-container">
|
|
|
- <div class="top-box">
|
|
|
- <!-- 左边监测数据 -->
|
|
|
- <div class="lr-box left-box">
|
|
|
- <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
|
|
|
- <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" v-for="(data, index) in groupParameterData" :key="index">
|
|
|
- <div class="item-col">
|
|
|
- <span class="state-title">{{ Object.values(data)[0] }} :</span>
|
|
|
- <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
|
|
|
- >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
|
|
|
- </div>
|
|
|
- <div class="item-col" v-if="Object.keys(data)[1]">
|
|
|
- <span class="state-title">{{ Object.values(data)[1] }} :</span>
|
|
|
- <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
|
|
|
- >= 0 ? monitorData[groupNum - 1][Object.keys(data)[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" v-for="(data, index) in deviceParameterData" :key="index">
|
|
|
- <div class="item-col">
|
|
|
- <span class="state-title">{{ Object.values(data)[0] }} :</span>
|
|
|
- <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
|
|
|
- >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
|
|
|
- </div>
|
|
|
- <div class="item-col" v-if="Object.keys(data)[1]">
|
|
|
- <span class="state-title">{{ Object.values(data)[1] }} :</span>
|
|
|
- <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
|
|
|
- >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 右边控制状态 -->
|
|
|
- <div class="lr-box right-box">
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
|
|
|
+ <div class="nitrogen-home">
|
|
|
+ <div class="nitrogen-container">
|
|
|
+ <div class="top-box">
|
|
|
+ <!-- 左边监测数据 -->
|
|
|
+ <div class="lr-box left-box">
|
|
|
+ <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
|
|
|
<ventBox1>
|
|
|
<template #title>
|
|
|
- <div>远程控制</div>
|
|
|
+ <div>{{ monitorData[groupNum - 1]['strname'] }}</div>
|
|
|
+ <!-- <div style="position: absolute;right:10px;font-size: 10px;color:#3fe4fc;cursor: pointer;" @click="getDetail(groupNum - 1)">查看详情>></div> -->
|
|
|
</template>
|
|
|
<template #container>
|
|
|
- <div class="control-group">
|
|
|
- <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
|
|
|
- <div class="control-item-title">{{ zdjs[groupNum - 1] }}</div>
|
|
|
- <div class="control-item-state">
|
|
|
- <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small" checked-children="开启"
|
|
|
- un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
|
|
|
- @change="handlerDevice(airCompressorState[groupNum - 1])">
|
|
|
- </a-switch>
|
|
|
- </div>
|
|
|
+ <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="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
|
|
|
- <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
|
|
|
- <div class="control-item-state">
|
|
|
- <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small" checked-children="开启"
|
|
|
- un-checked-children="关闭" :disabled="airCompressorState[groupNum - 1][`controlModel`]"
|
|
|
- @change="handlerDevice(airCompressorState[groupNum - 1])">
|
|
|
- </a-switch>
|
|
|
+ <div class="state-item" v-for="(data, index) in groupParameterData" :key="index">
|
|
|
+ <div class="item-col">
|
|
|
+ <span class="state-title">{{ Object.values(data)[0] }} :</span>
|
|
|
+ <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum -
|
|
|
+ 1][Object.keys(data)[0]])
|
|
|
+ >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item-col" v-if="Object.keys(data)[1]">
|
|
|
+ <span class="state-title">{{ Object.values(data)[1] }} :</span>
|
|
|
+ <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum -
|
|
|
+ 1][Object.keys(data)[1]])
|
|
|
+ >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="control-item">
|
|
|
- <div class="control-item-title">是否开启联动</div>
|
|
|
- <div class="control-item-state">
|
|
|
- <a-radio v-model:checked="isLink">开启</a-radio>
|
|
|
+ </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" v-for="(data, index) in deviceParameterData" :key="index">
|
|
|
+ <div class="item-col">
|
|
|
+ <span class="state-title">{{ Object.values(data)[0] }} :</span>
|
|
|
+ <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum -
|
|
|
+ 1][Object.keys(data)[0]])
|
|
|
+ >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item-col" v-if="Object.keys(data)[1]">
|
|
|
+ <span class="state-title">{{ Object.values(data)[1] }} :</span>
|
|
|
+ <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum -
|
|
|
+ 1][Object.keys(data)[1]])
|
|
|
+ >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</ventBox1>
|
|
|
- <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>
|
|
|
+ <!-- 右边控制状态 -->
|
|
|
+ <div class="lr-box right-box">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>远程控制</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="control-group">
|
|
|
+ <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
|
|
|
+ <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
|
|
|
+ <div class="control-item-state">
|
|
|
+ <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"
|
|
|
+ checked-children="开启" un-checked-children="关闭"
|
|
|
+ :disabled="airCompressorState[groupNum - 1][`controlModel`]"
|
|
|
+ @change="handlerDevice(airCompressorState[groupNum - 1])">
|
|
|
+ </a-switch>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
|
|
|
+ <div class="control-item-title">{{ kyjs[groupNum - 1] }}</div>
|
|
|
+ <div class="control-item-state">
|
|
|
+ <a-switch v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]" size="small"
|
|
|
+ checked-children="开启" un-checked-children="关闭"
|
|
|
+ :disabled="airCompressorState[groupNum - 1][`controlModel`]"
|
|
|
+ @change="handlerDevice(airCompressorState[groupNum - 1])">
|
|
|
+ </a-switch>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="control-item">
|
|
|
+ <div class="control-item-title">是否开启联动</div>
|
|
|
+ <div class="control-item-state">
|
|
|
+ <a-radio v-model:checked="isLink">开启</a-radio>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ <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>
|
|
|
</div>
|
|
|
-
|
|
|
- </template>
|
|
|
- <script lang="ts" setup name="nitrogenHome">
|
|
|
- import { onMounted, onUnmounted, ref, watch, reactive } from 'vue'
|
|
|
- import ventBox1 from '/@/components/vent/ventBox1.vue'
|
|
|
- import fourBorderBg from '../../../comment/components/fourBorderBg.vue'
|
|
|
- import { mountedThree, destroy } from '../nitrogen.threejs'
|
|
|
- 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'
|
|
|
-
|
|
|
- const loading = ref(true)
|
|
|
- const isLink = ref(true)
|
|
|
-
|
|
|
- const zdjs = ['1号制氮机', '2号制氮机', '3号制氮机', '4号制氮机'];
|
|
|
- const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
|
|
|
-
|
|
|
- const flvURL1 = () => {
|
|
|
- return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
|
|
|
- // return ''
|
|
|
- };
|
|
|
-
|
|
|
- const monitorDataGroupNum = ref(0);
|
|
|
-
|
|
|
- const airCompressorState = reactive([
|
|
|
- {
|
|
|
- id: '',
|
|
|
- compressRunSigF1: false,
|
|
|
- controlModel: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: '',
|
|
|
- compressRunSigF1: false,
|
|
|
- controlModel: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: '',
|
|
|
- compressRunSigF1: false,
|
|
|
- controlModel: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: '',
|
|
|
- compressRunSigF1: false,
|
|
|
- controlModel: false
|
|
|
- }
|
|
|
- ]);
|
|
|
-
|
|
|
- const groupParameterData = [
|
|
|
- {
|
|
|
- cumulativeFlow: '累计流量(m³)',
|
|
|
- centerTemperature: '加热器中心温度',
|
|
|
- },
|
|
|
- {
|
|
|
- outletTemperature: '加热器出口温度',
|
|
|
- },
|
|
|
- ];
|
|
|
- const deviceParameterData = [
|
|
|
- {
|
|
|
- Ia: 'A项电流(A)',
|
|
|
- Ib: 'B项电流(A)',
|
|
|
- },
|
|
|
- {
|
|
|
- Ic: 'c项电流(A)',
|
|
|
- Vab: 'AB项间电压(V)',
|
|
|
- },
|
|
|
- {
|
|
|
- Vac: 'AC项间电压(V)',
|
|
|
- Vbc: 'BC项间电压(V)',
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- const monitorData = ref(new Array(3).fill({
|
|
|
- strName: '空压机',
|
|
|
- cumulativeFlow: '-',
|
|
|
- centerTemperature: '-',
|
|
|
- outletTemperature: '-',
|
|
|
- Ia: '-',
|
|
|
- Ib: '-',
|
|
|
- Ic: '-',
|
|
|
- Vab: '-',
|
|
|
- Vac: '-',
|
|
|
- Vbc: '-',
|
|
|
- compressGroupName: '',
|
|
|
- compressExhaustPressF1: '-',
|
|
|
- compressSeparatePressF1: '-',
|
|
|
- compressHostTempF1: '-',
|
|
|
- compressCrewTempF1: '-',
|
|
|
- compressRunTimeF1: '-',
|
|
|
- controlModel: 'LOC'
|
|
|
- }));
|
|
|
-
|
|
|
- // https获取监测数据
|
|
|
- let timer: null | NodeJS.Timeout = null;
|
|
|
- async function getMonitor(flag?) {
|
|
|
- if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- timer = await setTimeout(async () => {
|
|
|
- await getDataSource();
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- await getMonitor();
|
|
|
- }, flag ? 0 : 1000);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- async function getDataSource() {
|
|
|
- const res = await list({ devicetype: 'nitrogen', pagetype: 'normal' });
|
|
|
- const dataSource = res.msgTxt[0].datalist || [];
|
|
|
- monitorData.value = dataSource.filter((data) => {
|
|
|
- const item = data.readData;
|
|
|
- Object.assign(data, item);
|
|
|
- return item
|
|
|
- });
|
|
|
- console.log(monitorData,'000')
|
|
|
- monitorDataGroupNum.value = monitorData.value.length
|
|
|
- loading.value = false
|
|
|
- };
|
|
|
-
|
|
|
- function handlerDevice(data) {
|
|
|
- // if (data.length < 1) return
|
|
|
- // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
|
|
|
- // if (res.success) {
|
|
|
- // message.success('操作成功')
|
|
|
- // } else {
|
|
|
- // message.warning(data.msg)
|
|
|
- // }
|
|
|
- // })
|
|
|
- };
|
|
|
- function resetDevice(data) {
|
|
|
-
|
|
|
+ </div>
|
|
|
+ <!-- <DetailModal @register="registerModal" /> -->
|
|
|
+</template>
|
|
|
+<script lang="ts" setup name="nitrogenHome">
|
|
|
+import { onMounted, onUnmounted, ref, watch, reactive, defineProps } from 'vue'
|
|
|
+import ventBox1 from '/@/components/vent/ventBox1.vue'
|
|
|
+import fourBorderBg from '../../../comment/components/fourBorderBg.vue'
|
|
|
+import { mountedThree, destroy, setModelType } from '../nitrogen.threejs'
|
|
|
+import { getDevice } 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 { nextTick } from 'vue'
|
|
|
+
|
|
|
+
|
|
|
+// import DetailModal from './DetailModal.vue';
|
|
|
+// import { useModal } from '/@/components/Modal';
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ deviceId: {
|
|
|
+ type: String,
|
|
|
+ require: true
|
|
|
+ },
|
|
|
+ modalType: {
|
|
|
+ type: String,
|
|
|
+ require: true
|
|
|
+ }
|
|
|
+})
|
|
|
+const loading = ref(true)
|
|
|
+const isLink = ref(true)
|
|
|
+const isRefresh = ref(true)
|
|
|
+
|
|
|
+const zdjs = ['1号制氮机', '2号制氮机', '3号制氮机', '4号制氮机'];
|
|
|
+// const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
|
|
|
+
|
|
|
+const flvURL1 = () => {
|
|
|
+ // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
|
|
|
+ return ''
|
|
|
+};
|
|
|
+
|
|
|
+const monitorDataGroupNum = ref(0);
|
|
|
+
|
|
|
+let airCompressorState = reactive<any[]>([]);
|
|
|
+
|
|
|
+const groupParameterData = [
|
|
|
+ {
|
|
|
+ FluxTotal1: '累计流量',
|
|
|
+ InputFlux: '瞬时流量',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ PreMembraneTemperature: '膜前温度(°C)',
|
|
|
+ NitrogenPurity: '氮气纯度(%)',
|
|
|
+ },
|
|
|
+];
|
|
|
+const deviceParameterData = [
|
|
|
+ {
|
|
|
+ AirCompressor_ExhaustPre: '空压机排气压力(KPa)',
|
|
|
+ AirCompressor_ExhaustTemp: '空压机排气温度(°C)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ AirCompressor_RunTime: '空压机运行时间',
|
|
|
+ AirCompressor_LoadTime: '空压机加载时间',
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+];
|
|
|
+
|
|
|
+const monitorData = ref(new Array(3).fill({
|
|
|
+ // strName: '空压机',
|
|
|
+ // cumulativeFlow: '-',
|
|
|
+ // centerTemperature: '-',
|
|
|
+ // outletTemperature: '-',
|
|
|
+ // Ia: '-',
|
|
|
+ // Ib: '-',
|
|
|
+ // Ic: '-',
|
|
|
+ // Vab: '-',
|
|
|
+ // Vac: '-',
|
|
|
+ // Vbc: '-',
|
|
|
+ // compressGroupName: '',
|
|
|
+ // compressExhaustPressF1: '-',
|
|
|
+ // compressSeparatePressF1: '-',
|
|
|
+ // compressHostTempF1: '-',
|
|
|
+ // compressCrewTempF1: '-',
|
|
|
+ // compressRunTimeF1: '-',
|
|
|
+ // controlModel: 'LOC'
|
|
|
+}));
|
|
|
+
|
|
|
+
|
|
|
+// //详情弹框
|
|
|
+// const [registerModal, { openModal, closeModal }] = useModal();
|
|
|
+//查看详情
|
|
|
+// function getDetail(ind) {
|
|
|
+// console.log(ind,'激活详情索引')
|
|
|
+// switch(ind){
|
|
|
+// case 0:
|
|
|
+
|
|
|
+// openModal()
|
|
|
+// break;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = null;
|
|
|
+async function getMonitor(flag?) {
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = await setTimeout(async () => {
|
|
|
+ if (props.deviceId) {
|
|
|
+ await getDataSource(props.deviceId)
|
|
|
+ }
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ await getMonitor();
|
|
|
+ }, flag ? 0 : 1000);
|
|
|
}
|
|
|
-
|
|
|
- function handlerControlModel(data) {
|
|
|
-
|
|
|
+};
|
|
|
+
|
|
|
+async function getDataSource(systemID) {
|
|
|
+ console.log(monitorData, 'monitorData')
|
|
|
+ const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
|
|
|
+ if (res.success) {
|
|
|
+ const result = res.result;
|
|
|
+ if (!result || result.msgTxt.length < 1) return
|
|
|
+ result.msgTxt.forEach(item => {
|
|
|
+ if (item.type == 'zd_12s302zd') {
|
|
|
+ monitorData.value = item['datalist'].filter((data) => {
|
|
|
+ const item = data.readData;
|
|
|
+ return Object.assign(data, item);
|
|
|
+ });
|
|
|
+ airCompressorState.length = 0
|
|
|
+ item['datalist'].forEach(v => {
|
|
|
+ airCompressorState.push({
|
|
|
+ id: v.deviceID,
|
|
|
+ compressRunSigF1: false,
|
|
|
+ controlModel: false
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ monitorDataGroupNum.value = monitorData.value.length
|
|
|
}
|
|
|
-
|
|
|
- watch(monitorDataGroupNum, (newVal) => {
|
|
|
- if (newVal) {
|
|
|
- destroy()
|
|
|
- mountedThree(newVal)
|
|
|
+};
|
|
|
+
|
|
|
+function handlerDevice(data) {
|
|
|
+
|
|
|
+ // if (data.length < 1) return
|
|
|
+ // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
|
|
|
+ // if (res.success) {
|
|
|
+ // message.success('操作成功')
|
|
|
+ // } else {
|
|
|
+ // message.warning(data.msg)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+};
|
|
|
+function resetDevice(data) {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function handlerControlModel(data) {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
|
|
|
+ nextTick(() => {
|
|
|
+ if (newMonitorDataGroupNum && !newLoading) {
|
|
|
+ setModelType(props.modalType, newMonitorDataGroupNum)
|
|
|
}
|
|
|
})
|
|
|
- onMounted(async () => {
|
|
|
- await getMonitor(true)
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ await getMonitor(true)
|
|
|
+ await mountedThree().then(() => {
|
|
|
+ loading.value = false
|
|
|
})
|
|
|
-
|
|
|
- onUnmounted(() => {
|
|
|
- destroy();
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- </script>
|
|
|
-
|
|
|
- <style lang="less" scoped>
|
|
|
- @ventSpace: zxm;
|
|
|
-
|
|
|
- .nitrogen-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ destroy();
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
}
|
|
|
- #nitrogenCss3D {
|
|
|
- .modal-monitor {
|
|
|
- width: 200px;
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
-
|
|
|
- }
|
|
|
- &:deep(.win) {
|
|
|
- margin: 0 !important;
|
|
|
- background: #00000044;
|
|
|
- }
|
|
|
-
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@ventSpace: zxm;
|
|
|
+
|
|
|
+.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 {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.nitrogen-home {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ pointer-events: none;
|
|
|
+ top: 60px;
|
|
|
+
|
|
|
+ .nitrogen-container {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: fixed;
|
|
|
- z-index: 99;
|
|
|
+ height: calc(100%);
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- pointer-events: none;
|
|
|
- top: 60px;
|
|
|
- .nitrogen-container {
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 100px;
|
|
|
+
|
|
|
+ .top-box {
|
|
|
width: 100%;
|
|
|
- height: calc(100%);
|
|
|
+ padding: 10px;
|
|
|
+ overflow: hidden;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- margin-bottom: 100px;
|
|
|
-
|
|
|
- .top-box {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- overflow: hidden;
|
|
|
+
|
|
|
+ .lr-box {
|
|
|
+ height: fit-content;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .lr-box {
|
|
|
- height: fit-content;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- z-index: 9999;
|
|
|
- pointer-events: auto;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 9999;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 335px;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 0px;
|
|
|
+ pointer-events: auto;
|
|
|
+ color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0px;
|
|
|
}
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 335px;
|
|
|
- height: auto;
|
|
|
- position: relative;
|
|
|
- border-radius: 5px;
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 0px;
|
|
|
- pointer-events: auto;
|
|
|
+
|
|
|
+ .base-title {
|
|
|
color: #fff;
|
|
|
- overflow: hidden;
|
|
|
- &:first-child{
|
|
|
- margin-top: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- .base-title {
|
|
|
- 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 {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- padding: 5px;
|
|
|
-
|
|
|
- .item-col {
|
|
|
- width: calc(50% - 5px);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- 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;
|
|
|
- }
|
|
|
-
|
|
|
- .state-val {
|
|
|
- flex: 1;
|
|
|
- color: #00eefffe;
|
|
|
- margin-right: 5px;
|
|
|
- text-align: right;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
}
|
|
|
-
|
|
|
- .signal-box {
|
|
|
- margin: 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .state-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+ .item-col {
|
|
|
+ width: calc(50% - 5px);
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .signal-title {
|
|
|
- color: #7AF5FF;
|
|
|
- margin: 0 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;
|
|
|
}
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0px;
|
|
|
+
|
|
|
+ .state-val {
|
|
|
+ flex: 1;
|
|
|
+ color: #00eefffe;
|
|
|
+ margin-right: 5px;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .list-item {
|
|
|
- padding: 0 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .item-data-key {
|
|
|
- color: #ffffff99;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-box {
|
|
|
+ margin: 5px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .signal-title {
|
|
|
+ color: #7AF5FF;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-item {
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-data-key {
|
|
|
+ color: #ffffff99;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-data-box {
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .state-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .open {
|
|
|
+ border: 5px solid #133a56;
|
|
|
+ background: #4ecb73;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close {
|
|
|
+ border: 5px solid #192961;
|
|
|
+ background: #6d7898;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-l {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .monitor-box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .parameter-title {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .icon,
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ top: -10px;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- .item-data-box {
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- .state-icon {
|
|
|
- display: inline-block;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- border-radius: 12px;
|
|
|
+
|
|
|
+ .group-parameter-title {
|
|
|
+ background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ left: -12px;
|
|
|
+ top: -17px;
|
|
|
}
|
|
|
-
|
|
|
- .open {
|
|
|
- border: 5px solid #133a56;
|
|
|
- background: #4ecb73;
|
|
|
+
|
|
|
+ span {
|
|
|
+ left: 18px;
|
|
|
}
|
|
|
-
|
|
|
- .close {
|
|
|
- border: 5px solid #192961;
|
|
|
- background: #6d7898;
|
|
|
+
|
|
|
+ .item-col {
|
|
|
+ background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .item-l {
|
|
|
- width: 100%;
|
|
|
- .monitor-box {
|
|
|
- width: 100%;
|
|
|
- .parameter-title{
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 14px;
|
|
|
- margin-top: 10px;
|
|
|
- .icon, span{
|
|
|
- position: absolute;
|
|
|
- top: -10px;
|
|
|
- }
|
|
|
-
|
|
|
+
|
|
|
+ .device-parameter-title {
|
|
|
+ background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ left: -10px;
|
|
|
+ top: -14px;
|
|
|
}
|
|
|
- .group-parameter-title{
|
|
|
- background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
|
|
|
-
|
|
|
- .icon{
|
|
|
- left: -12px;
|
|
|
- top: -17px;
|
|
|
- }
|
|
|
- span{
|
|
|
- left: 18px;
|
|
|
- }
|
|
|
- .item-col{
|
|
|
- background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
|
|
|
- }
|
|
|
+
|
|
|
+ span {
|
|
|
+ left: 18px;
|
|
|
}
|
|
|
- .device-parameter-title{
|
|
|
- background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
|
|
|
- .icon{
|
|
|
- left: -10px;
|
|
|
- top: -14px;
|
|
|
- }
|
|
|
- span{
|
|
|
- left: 18px;
|
|
|
- }
|
|
|
- .item-col{
|
|
|
- background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
|
|
|
- }
|
|
|
+
|
|
|
+ .item-col {
|
|
|
+ background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- .right-box {
|
|
|
- width: 330px;
|
|
|
- .control-group{
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ width: 330px;
|
|
|
+ margin-top: 50px;
|
|
|
+
|
|
|
+ .control-group {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .control-item {
|
|
|
+
|
|
|
display: flex;
|
|
|
- // justify-content: space-around;
|
|
|
- flex-wrap: wrap;
|
|
|
- .control-item {
|
|
|
-
|
|
|
+ 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;
|
|
|
- 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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .left-box {
|
|
|
- width: 365px;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- &:deep(.win) {
|
|
|
- width: 100%;
|
|
|
- margin: 0 !important;
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ width: 365px;
|
|
|
+ margin-top: 80px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- &: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;
|
|
|
+
|
|
|
+ &:deep(.win) {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 !important;
|
|
|
}
|
|
|
- .monitor-item {
|
|
|
- width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+&: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;
|
|
|
- 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;
|
|
|
-
|
|
|
- }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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%;
|
|
|
- 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-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-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;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
|
|
-
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-radio-wrapper) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+</style>
|
