|
@@ -1,9 +1,6 @@
|
|
|
<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"
|
|
|
- >
|
|
|
+ <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">
|
|
@@ -11,44 +8,34 @@
|
|
|
<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]['AirCompressor_ExhaustPre'] ? monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] : '-'
|
|
|
- }}</span
|
|
|
- ><span class="unit">kPa</span></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]['FluxTotal1'] ? monitorData[groupNum - 1]['FluxTotal1'] ? parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-' : '-' }}</span
|
|
|
- ><span class="unit">m³/h</span></span
|
|
|
- >
|
|
|
+ <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['FluxTotal1'] ? parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-'}}</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]['NitrogenPurity'] ? monitorData[groupNum - 1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum - 1]['NitrogenPurity']).toFixed(2) : '-' : '-' }}</span
|
|
|
- ><span class="unit">%</span></span
|
|
|
- >
|
|
|
+ <span class="monitor-val"><span class="val">{{ monitorData[groupNum - 1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum -1]['NitrogenPurity']).toFixed(2) : '-' }}</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_RunTime'] ? monitorData[groupNum - 1]['AirCompressor_RunTime'] : '-'
|
|
|
- }}</span
|
|
|
- ><span class="unit">h</span></span
|
|
|
- >
|
|
|
+ <span class="monitor-val"><span class="val">{{
|
|
|
+ monitorData[groupNum - 1]['AirCompressor_RunTime'] ? monitorData[groupNum - 1]['AirCompressor_RunTime'] :
|
|
|
+ '-'
|
|
|
+ }}</span><span class="unit">h</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">h</span></span
|
|
|
- >
|
|
|
+ <span class="monitor-val"><span class="val">{{
|
|
|
+ monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum - 1]['AirCompressor_LoadTime']
|
|
|
+ : '-'
|
|
|
+ }}</span><span class="unit">h</span></span>
|
|
|
</div>
|
|
|
</fourBorderBg>
|
|
|
</div>
|
|
@@ -75,16 +62,18 @@
|
|
|
<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]] ? parseFloat(monitorData[groupNum - 1][Object.keys(data)[0]]).toFixed(2) : '-'
|
|
|
- : '-'
|
|
|
+ ? monitorData[groupNum - 1][Object.keys(data)[0]] ? parseFloat(monitorData[groupNum -
|
|
|
+ 1][Object.keys(data)[0]]).toFixed(2) : '-'
|
|
|
+ : '-'
|
|
|
}}</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]] ? parseFloat(monitorData[groupNum - 1][Object.keys(data)[1]]).toFixed(2) : '-'
|
|
|
- : '-'
|
|
|
+ ? monitorData[groupNum - 1][Object.keys(data)[1]] ? parseFloat(monitorData[groupNum -
|
|
|
+ 1][Object.keys(data)[1]]).toFixed(2) : '-'
|
|
|
+ : '-'
|
|
|
}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -98,16 +87,16 @@
|
|
|
<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]]
|
|
|
- : '-'
|
|
|
+ ? 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]]
|
|
|
- : '-'
|
|
|
+ ? monitorData[groupNum - 1][Object.keys(data)[1]]
|
|
|
+ : '-'
|
|
|
}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -135,9 +124,11 @@
|
|
|
:disabled="airCompressorState[groupNum - 1][`controlModel`]"
|
|
|
@change="handlerDevice(airCompressorState[groupNum - 1], index)"
|
|
|
/> -->
|
|
|
- <a-button v-if="index==0" size="small" type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],false)">一键启停</a-button>
|
|
|
- <a-button v-else size="small" type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
|
|
|
-
|
|
|
+ <a-button v-if="index == 0" size="small" type="text" style="color: #fff;"
|
|
|
+ @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
|
|
|
+ <a-button v-else size="small" type="text" style="color: #fff;"
|
|
|
+ @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
|
|
@@ -151,8 +142,10 @@
|
|
|
:disabled="airCompressorState[groupNum - 1][`controlModel`]"
|
|
|
@change="handlerDevice(airCompressorState[groupNum - 1], index)"
|
|
|
/> -->
|
|
|
- <a-button v-if="index==0" size="small" type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],true)">一键复位</a-button>
|
|
|
- <a-button v-else size="small" type="text" style="color: #fff;" @click="handlerDevice(airCompressorState[groupNum - 1],true)">一键复位</a-button>
|
|
|
+ <a-button v-if="index == 0" size="small" type="text" style="color: #fff;"
|
|
|
+ @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
|
|
|
+ <a-button v-else size="small" type="text" style="color: #fff;"
|
|
|
+ @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -163,703 +156,924 @@
|
|
|
<div>设备实时监测曲线</div>
|
|
|
</template>
|
|
|
<template #container>
|
|
|
- <BarAndLine
|
|
|
- v-if="chartsColumns.length > 0"
|
|
|
- xAxisPropType="readTime"
|
|
|
- :dataSource="echartData"
|
|
|
- height="340px"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- chartsType="listMonitor"
|
|
|
- :option="echatsOption"
|
|
|
- />
|
|
|
- <!-- :option="zhudanOption" -->
|
|
|
+ <BarAndLine v-if="chartsColumns.length > 0" xAxisPropType="readTime" :dataSource="echartData" height="340px"
|
|
|
+ :chartsColumns="chartsColumns" chartsType="listMonitor" :option="echatsOption" />
|
|
|
+ <!-- :option="zhudanOption" -->
|
|
|
</template>
|
|
|
</ventBox1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK" @handle-cancel="handleCancel" />
|
|
|
+ <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
|
|
|
+ @handle-cancel="handleCancel" />
|
|
|
</template>
|
|
|
<script lang="ts" setup name="nitrogenHome">
|
|
|
- import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject } 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 BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
- import { zhudanOption } from '../nitrogen.data.ts';
|
|
|
- import HandleModal from './modal.vue';
|
|
|
- import { deviceControlApi } from '/@/api/vent/index';
|
|
|
- import { message } from 'ant-design-vue';
|
|
|
- import { computed } from 'vue';
|
|
|
- import lodash from 'lodash';
|
|
|
-
|
|
|
- const globalConfig = inject('globalConfig');
|
|
|
-
|
|
|
- const props = defineProps({
|
|
|
- deviceId: {
|
|
|
- type: String,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- modalType: {
|
|
|
- type: String,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- });
|
|
|
- const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
|
|
|
- const modalType = ref(''); // 模态框内容显示类型,设备操作类型
|
|
|
- const modalIsShow = ref<boolean>(false); // 是否显示模态框
|
|
|
- const loading = ref(true);
|
|
|
- let kzParam = reactive<any>({
|
|
|
- data: {},
|
|
|
- isFw:null,
|
|
|
- });
|
|
|
-
|
|
|
- // 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 colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9']
|
|
|
- const echatsOption = {
|
|
|
- grid: {
|
|
|
- top: '35%',
|
|
|
- left: '-25px',
|
|
|
- right: '10px',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {}
|
|
|
- }
|
|
|
+import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, computed } 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 BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+import { zhudanOption } from '../nitrogen.data.ts';
|
|
|
+import HandleModal from './modal.vue';
|
|
|
+import { deviceControlApi } from '/@/api/vent/index';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+import lodash from 'lodash';
|
|
|
+
|
|
|
+const globalConfig = inject('globalConfig');
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ deviceId: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ modalType: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+});
|
|
|
+const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
|
|
|
+const modalType = ref(''); // 模态框内容显示类型,设备操作类型
|
|
|
+const modalIsShow = ref<boolean>(false); // 是否显示模态框
|
|
|
+const loading = ref(true);
|
|
|
+let kzParam = reactive<any>({
|
|
|
+ data: {},
|
|
|
+ isFw: null,
|
|
|
+});
|
|
|
+
|
|
|
+// 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 colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9']
|
|
|
+const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '35%',
|
|
|
+ left: '-25px',
|
|
|
+ right: '10px',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {}
|
|
|
}
|
|
|
- const monitorDataGroupNum = ref(0);
|
|
|
-
|
|
|
- let airCompressorState = reactive<any[]>([]);
|
|
|
-
|
|
|
- const groupParameterData = [
|
|
|
- {
|
|
|
- FluxTotal1: '累计流量(m³)',
|
|
|
- InputFlux: '瞬时流量(m³/h)',
|
|
|
- },
|
|
|
- {
|
|
|
- PreMembraneTemperature: '膜前温度(°C)',
|
|
|
- NitrogenPurity: '氮气纯度(%)',
|
|
|
- },
|
|
|
- ];
|
|
|
- const deviceParameterData = [
|
|
|
- {
|
|
|
- AirCompressor_ExhaustPre: '排气压力(KPa)',
|
|
|
- AirCompressor_ExhaustTemp: '排气温度(°C)',
|
|
|
- },
|
|
|
- {
|
|
|
- AirCompressor_RunTime: '运行时间(h)',
|
|
|
- AirCompressor_LoadTime: '加载时间(h)',
|
|
|
- },
|
|
|
- ];
|
|
|
- const propTypeArr = ref([])
|
|
|
- const chartsColumns = ref([])
|
|
|
- watch(monitorDataGroupNum, () => {
|
|
|
-
|
|
|
- const arr = <any[]>[]
|
|
|
- const item = {
|
|
|
- legend: '瞬时流量',
|
|
|
- seriesName: '(m³/h)',
|
|
|
- ymax: 5,
|
|
|
- yname: 'm³/h',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#FDB146',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'InputFlux',
|
|
|
- }
|
|
|
- const propTypeList = []
|
|
|
- for (let i = 1; i <= monitorDataGroupNum.value; i++) {
|
|
|
- const lineType = lodash.cloneDeep(item)
|
|
|
- lineType.legend = `制氮机${i}瞬时流量`;
|
|
|
- lineType.dataIndex = `InputFlux${i}`
|
|
|
- lineType.color = colors[i-1]
|
|
|
- arr.push(lineType)
|
|
|
- }
|
|
|
- chartsColumns.value = arr
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- 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'
|
|
|
- })
|
|
|
- );
|
|
|
-
|
|
|
- //图表数据
|
|
|
- let echartData = ref<any>([]);
|
|
|
-
|
|
|
- // 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 : 3000
|
|
|
- );
|
|
|
- }
|
|
|
+}
|
|
|
+const monitorDataGroupNum = ref(0);
|
|
|
+
|
|
|
+let airCompressorState = reactive<any[]>([]);
|
|
|
+
|
|
|
+const groupParameterData = [
|
|
|
+ {
|
|
|
+ FluxTotal1: '累计流量(m³)',
|
|
|
+ InputFlux: '瞬时流量(m³/h)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ PreMembraneTemperature: '膜前温度(°C)',
|
|
|
+ NitrogenPurity: '氮气纯度(%)',
|
|
|
+ },
|
|
|
+];
|
|
|
+const deviceParameterData = [
|
|
|
+ {
|
|
|
+ AirCompressor_ExhaustPre: '排气压力(KPa)',
|
|
|
+ AirCompressor_ExhaustTemp: '排气温度(°C)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ AirCompressor_RunTime: '运行时间(h)',
|
|
|
+ AirCompressor_LoadTime: '加载时间(h)',
|
|
|
+ },
|
|
|
+];
|
|
|
+const propTypeArr = ref([])
|
|
|
+const chartsColumns = ref([])
|
|
|
+watch(monitorDataGroupNum, () => {
|
|
|
+
|
|
|
+ const arr = <any[]>[]
|
|
|
+ const item = {
|
|
|
+ legend: '瞬时流量',
|
|
|
+ seriesName: '(m³/h)',
|
|
|
+ ymax: 5,
|
|
|
+ yname: 'm³/h',
|
|
|
+ linetype: 'line',
|
|
|
+ yaxispos: 'left',
|
|
|
+ color: '#FDB146',
|
|
|
+ sort: 1,
|
|
|
+ xRotate: 0,
|
|
|
+ dataIndex: 'InputFlux',
|
|
|
}
|
|
|
-
|
|
|
- async function getDataSource(systemID) {
|
|
|
- const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
|
|
|
- console.log(res, 'res---------------');
|
|
|
-
|
|
|
- if (res) {
|
|
|
- const result = res;
|
|
|
- if (!result || result.msgTxt.length < 1) return;
|
|
|
- result.msgTxt.forEach((item) => {
|
|
|
- if (item.type && item.type.startsWith('nitrogen')) {
|
|
|
- airCompressorState.length = 0;
|
|
|
- monitorData.value = item['datalist'].filter((data) => {
|
|
|
- const readData = data.readData;
|
|
|
- airCompressorState.push({
|
|
|
- id: data.deviceID,
|
|
|
- deviceType: data.deviceType,
|
|
|
- HMIReset: readData.HMIReset,
|
|
|
- HMIStartStop: readData.HMIStartStop
|
|
|
- });
|
|
|
- return Object.assign(data, readData);
|
|
|
- });
|
|
|
- const airCompressor = {readTime: monitorData.value[0]['readTime'].substring(11) }
|
|
|
- const dataArr = lodash.cloneDeep(echartData.value)
|
|
|
- //图表数据
|
|
|
- if (dataArr.length <= 5) {
|
|
|
- monitorData.value.forEach((el, index) => {
|
|
|
- airCompressor[`InputFlux${index+1}`] = el['InputFlux'] || 0
|
|
|
- });
|
|
|
- dataArr.push(airCompressor)
|
|
|
- }else{
|
|
|
- dataArr.shift()
|
|
|
- dataArr.push(airCompressor)
|
|
|
- }
|
|
|
- echartData.value = dataArr
|
|
|
-
|
|
|
+ const propTypeList = []
|
|
|
+ for (let i = 1; i <= monitorDataGroupNum.value; i++) {
|
|
|
+ const lineType = lodash.cloneDeep(item)
|
|
|
+ lineType.legend = `制氮机${i}瞬时流量`;
|
|
|
+ lineType.dataIndex = `InputFlux${i}`
|
|
|
+ lineType.color = colors[i - 1]
|
|
|
+ arr.push(lineType)
|
|
|
+ }
|
|
|
+ chartsColumns.value = arr
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+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'
|
|
|
+ })
|
|
|
+);
|
|
|
+
|
|
|
+//图表数据
|
|
|
+let echartData = ref<any>([]);
|
|
|
+
|
|
|
+// 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);
|
|
|
}
|
|
|
- });
|
|
|
- monitorDataGroupNum.value = monitorData.value.length;
|
|
|
- }
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ await getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 3000
|
|
|
+ );
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+async function getDataSource(systemID) {
|
|
|
+ const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
|
|
|
+ console.log(res, 'res---------------');
|
|
|
+
|
|
|
+ let objParams = reactive({
|
|
|
+ "result": {
|
|
|
+ "cmd": "monitordata",
|
|
|
+ "msgTxt": [
|
|
|
+ {
|
|
|
+ "datalist": [
|
|
|
+ {
|
|
|
+ "msgType": null,
|
|
|
+ "deviceID": "1705212847586627588",
|
|
|
+ "strname": "12上302注氮机1",
|
|
|
+ "strinstallpos": "12上302注氮机1",
|
|
|
+ "fsectarea": "null",
|
|
|
+ "stationname": "12s302kd制氮分站1",
|
|
|
+ "deviceType": "nitrogen_zd_12s302zd",
|
|
|
+ "typeName": "注氮机设备",
|
|
|
+ "netStatus": 0,
|
|
|
+ "warnFlag": 0,
|
|
|
+ "warnLevel": 0,
|
|
|
+ "warnLevel_str": "正常",
|
|
|
+ "warnTime": null,
|
|
|
+ "readTime": "2023-12-04 09:45:37",
|
|
|
+ "warnDes": "",
|
|
|
+ "frontGateOpenCtrl": null,
|
|
|
+ "rearGateOpenCtrl": null,
|
|
|
+ "readData": {
|
|
|
+ "RunTime4": "2000",
|
|
|
+ "RunTime3": "77",
|
|
|
+ "RunTime2": "24",
|
|
|
+ "RunTime1": "24",
|
|
|
+ "sign": "0",
|
|
|
+ "AirCompressor_ShortCutFaul": "0",
|
|
|
+ "HMIReset": "0",
|
|
|
+ "AirCompressor_Status": "0",
|
|
|
+ "AirCompressor_OilGasBarrel_HighPressureFault": "0",
|
|
|
+ "AirCompressor_PhaseFailureFault1": "0",
|
|
|
+ "AirCompressor_OverVoltageFault": "0",
|
|
|
+ "AirCompressor_TotalFailureSignal1": "0",
|
|
|
+ "AirCompressor_PhaseFailureFault": "0",
|
|
|
+ "InputFlux": "0.25",
|
|
|
+ "AirCompressor_LoadTime": "1597",
|
|
|
+ "AirCompressor_Fan_Current": "0",
|
|
|
+ "FluxTotal1": (Math.random()*3972).toFixed(2),
|
|
|
+ "FluxTotal2": "145.0",
|
|
|
+ "AirCompressor_OilGasBarrel_SeparatorFault": "0",
|
|
|
+ "AirCompressor_TotalFailureSignal": "1",
|
|
|
+ "AirCompressor_RunTime": "1",
|
|
|
+ "AirCompressor_MainMotor_OverTempFault": "0",
|
|
|
+ "AirCompressor_PhaseSequenceFault1": "0",
|
|
|
+ "AirCompressor_LoadorUnload": "0",
|
|
|
+ "AirCompressor_OilPressureLowFault": "0",
|
|
|
+ "AirCompressor_ExhaustTemp": "25",
|
|
|
+ "HMIStartStop": "0",
|
|
|
+ "AirCompressor_MainMotor_Current": "0",
|
|
|
+ "AirCompressor_ExhaustPre": (Math.random()*2930).toFixed(2),
|
|
|
+ "AirCompressor_CtrlMode": "1",
|
|
|
+ "AirCompressor_UnbalanceFault": "0",
|
|
|
+ "AirCompressor_NoWaterFault": "1",
|
|
|
+ "AirCompressor_MainMotor_OverloadFault": "0",
|
|
|
+ "o2Val": "20.7",
|
|
|
+ "AirCompressor_OilGasBarrel_OverTempAlarm": "0",
|
|
|
+ "NitrogenPurity": "79.63",
|
|
|
+ "AirCompressor_LowVoltageFault": "0",
|
|
|
+ "AirCompressor_Fan_OverloadFault": "0",
|
|
|
+ "AirCompressor_LeakageLock": "0",
|
|
|
+ "AirCompressor_PowerFault": "0",
|
|
|
+ "temperature": "20.3",
|
|
|
+ "AirCompressor_ExhaustPreHighFault": "0",
|
|
|
+ "AirCompressor_SysVoltage": "1139",
|
|
|
+ "AirCompressor_CloseFail": "0",
|
|
|
+ "AirCompressor_ExhaustTemp1": "0",
|
|
|
+ "PreMembraneTemperature": "23.0",
|
|
|
+ "fumes": "0.0",
|
|
|
+ "AirCompressor_OilGasBarrel_FilterBlockageFault": "0",
|
|
|
+ "AirCompressor_OpenFail": "0",
|
|
|
+ "AirCompressor_OilGasBarrel_OverTempAlarm1": "0",
|
|
|
+ "isRun": "-2",
|
|
|
+ "AirCompressor_PhaseSequenceFault": "0"
|
|
|
+ },
|
|
|
+ "readDataDes": null,
|
|
|
+ "summaryHour": [],
|
|
|
+ "summaryDay": [],
|
|
|
+ "history": [],
|
|
|
+ "totalInfo": null,
|
|
|
+ "sign": null,
|
|
|
+ "cameras": [],
|
|
|
+ "links": [],
|
|
|
+ "other1": null,
|
|
|
+ "other2": null,
|
|
|
+ "other3": null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "msgType": null,
|
|
|
+ "deviceID": "1705212847586627589",
|
|
|
+ "strname": "12上302注氮机2",
|
|
|
+ "strinstallpos": "12上302注氮机2",
|
|
|
+ "fsectarea": "null",
|
|
|
+ "stationname": "12s302kd制氮分站2",
|
|
|
+ "deviceType": "nitrogen_zd_12s302zd",
|
|
|
+ "typeName": "注氮机设备",
|
|
|
+ "netStatus": 0,
|
|
|
+ "warnFlag": 0,
|
|
|
+ "warnLevel": 0,
|
|
|
+ "warnLevel_str": "正常",
|
|
|
+ "warnTime": null,
|
|
|
+ "readTime": "2023-12-04 09:45:47",
|
|
|
+ "warnDes": "",
|
|
|
+ "frontGateOpenCtrl": null,
|
|
|
+ "rearGateOpenCtrl": null,
|
|
|
+ "readData": {
|
|
|
+ "RunTime4": "2000",
|
|
|
+ "RunTime3": "202",
|
|
|
+ "RunTime2": "27",
|
|
|
+ "RunTime1": "19",
|
|
|
+ "sign": "0",
|
|
|
+ "AirCompressor_ShortCutFaul": "0",
|
|
|
+ "HMIReset": "0",
|
|
|
+ "AirCompressor_Status": "0",
|
|
|
+ "AirCompressor_OilGasBarrel_HighPressureFault": "0",
|
|
|
+ "AirCompressor_PhaseFailureFault1": "0",
|
|
|
+ "AirCompressor_OverVoltageFault": "0",
|
|
|
+ "AirCompressor_TotalFailureSignal1": "0",
|
|
|
+ "AirCompressor_PhaseFailureFault": "0",
|
|
|
+ "InputFlux": "0.0",
|
|
|
+ "AirCompressor_LoadTime": "1210",
|
|
|
+ "AirCompressor_Fan_Current": "0",
|
|
|
+ "FluxTotal1": (Math.random()*9350).toFixed(2),
|
|
|
+ "FluxTotal2": "117.0",
|
|
|
+ "AirCompressor_OilGasBarrel_SeparatorFault": "0",
|
|
|
+ "AirCompressor_TotalFailureSignal": "1",
|
|
|
+ "AirCompressor_RunTime": "1",
|
|
|
+ "AirCompressor_MainMotor_OverTempFault": "0",
|
|
|
+ "AirCompressor_PhaseSequenceFault1": "0",
|
|
|
+ "AirCompressor_LoadorUnload": "0",
|
|
|
+ "AirCompressor_OilPressureLowFault": "0",
|
|
|
+ "AirCompressor_ExhaustTemp": "27",
|
|
|
+ "HMIStartStop": "0",
|
|
|
+ "AirCompressor_MainMotor_Current": "0",
|
|
|
+ "AirCompressor_ExhaustPre": (Math.random()*4930).toFixed(2),
|
|
|
+ "AirCompressor_CtrlMode": "1",
|
|
|
+ "AirCompressor_UnbalanceFault": "0",
|
|
|
+ "AirCompressor_NoWaterFault": "1",
|
|
|
+ "AirCompressor_MainMotor_OverloadFault": "0",
|
|
|
+ "o2Val": "20.7",
|
|
|
+ "AirCompressor_OilGasBarrel_OverTempAlarm": "0",
|
|
|
+ "NitrogenPurity": "79.45",
|
|
|
+ "AirCompressor_LowVoltageFault": "0",
|
|
|
+ "AirCompressor_Fan_OverloadFault": "0",
|
|
|
+ "AirCompressor_LeakageLock": "0",
|
|
|
+ "AirCompressor_PowerFault": "0",
|
|
|
+ "temperature": "20.3",
|
|
|
+ "AirCompressor_ExhaustPreHighFault": "0",
|
|
|
+ "AirCompressor_SysVoltage": "1143",
|
|
|
+ "AirCompressor_CloseFail": "0",
|
|
|
+ "AirCompressor_ExhaustTemp1": "0",
|
|
|
+ "PreMembraneTemperature": "22.63",
|
|
|
+ "fumes": "0.0",
|
|
|
+ "AirCompressor_OilGasBarrel_FilterBlockageFault": "0",
|
|
|
+ "AirCompressor_OpenFail": "0",
|
|
|
+ "AirCompressor_OilGasBarrel_OverTempAlarm1": "0",
|
|
|
+ "isRun": "-2",
|
|
|
+ "AirCompressor_PhaseSequenceFault": "0"
|
|
|
+ },
|
|
|
+ "readDataDes": null,
|
|
|
+ "summaryHour": [],
|
|
|
+ "summaryDay": [],
|
|
|
+ "history": [],
|
|
|
+ "totalInfo": null,
|
|
|
+ "sign": null,
|
|
|
+ "cameras": [],
|
|
|
+ "links": [],
|
|
|
+ "other1": null,
|
|
|
+ "other2": null,
|
|
|
+ "other3": null
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "avginfo": {
|
|
|
+ "warnFlag": {
|
|
|
+ "value": 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "typeName": "注氮机设备",
|
|
|
+ "type": "nitrogen_zd_12s302zd"
|
|
|
+ },
|
|
|
|
|
|
- function handlerDevice(data,bol) {
|
|
|
- console.log(bol,'bol-------')
|
|
|
- kzParam.data = data;
|
|
|
- kzParam.isFw = bol;
|
|
|
- console.log(kzParam,'kz--------')
|
|
|
- if ( bol) {
|
|
|
- modalTitle.value = '一键复位';
|
|
|
- modalType.value = '1';
|
|
|
- modalIsShow.value = true;
|
|
|
- kzParam.data.HMIReset=!data.HMIReset
|
|
|
- } else {
|
|
|
- modalTitle.value = '一键启停';
|
|
|
- modalType.value = '2';
|
|
|
- modalIsShow.value = true;
|
|
|
- kzParam.data.HMIStartStop =!data.HMIStartStop;
|
|
|
- }
|
|
|
- }
|
|
|
- function handleOK(passWord, handlerState) {
|
|
|
- console.log(kzParam, 'kz----------');
|
|
|
- // if (passWord !== '123456') {
|
|
|
- // message.warning('密码不正确,请重新输入');
|
|
|
- // return;
|
|
|
- // }
|
|
|
-
|
|
|
- let data = {};
|
|
|
- if (kzParam.isFw ) {
|
|
|
- data = {
|
|
|
- deviceid: kzParam.data.id,
|
|
|
- devicetype:kzParam.data.deviceType,
|
|
|
- password: passWord,
|
|
|
- HMIReset: kzParam.data.HMIReset,
|
|
|
- };
|
|
|
- } else {
|
|
|
- data = {
|
|
|
- deviceid: kzParam.data.id,
|
|
|
- password: passWord,
|
|
|
- devicetype:kzParam.data.deviceType,
|
|
|
- HMIStartStop: kzParam.data.HMIStartStop,
|
|
|
- };
|
|
|
+ ]
|
|
|
}
|
|
|
+ })
|
|
|
|
|
|
- deviceControlApi(data).then((res) => {
|
|
|
- // 模拟时开启
|
|
|
- if (res.success) {
|
|
|
- modalIsShow.value = false;
|
|
|
- getDataSource(props.deviceId);
|
|
|
- if(globalConfig.History_Type == 'remote'){
|
|
|
- message.success('指令已下发至生产管控平台成功!')
|
|
|
- }else{
|
|
|
- message.success('指令已下发成功!')
|
|
|
+ if (res) {
|
|
|
+ const result =objParams.result;
|
|
|
+ if (!objParams.result || objParams.result.msgTxt.length < 1) return;
|
|
|
+ objParams.result.msgTxt.forEach((item) => {
|
|
|
+ if (item.type && item.type.startsWith('nitrogen')) {
|
|
|
+ airCompressorState.length = 0;
|
|
|
+
|
|
|
+ monitorData.value = item['datalist'].filter((data) => {
|
|
|
+ const readData = data.readData;
|
|
|
+ airCompressorState.push({
|
|
|
+ id: data.deviceID,
|
|
|
+ deviceType: data.deviceType,
|
|
|
+ HMIReset: readData.HMIReset,
|
|
|
+ HMIStartStop: readData.HMIStartStop
|
|
|
+ });
|
|
|
+ return Object.assign(data, readData);
|
|
|
+ });
|
|
|
+ console.log(monitorData,'monitorData.value---===')
|
|
|
+ const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) }
|
|
|
+ const dataArr = lodash.cloneDeep(echartData.value)
|
|
|
+ //图表数据
|
|
|
+ if (dataArr.length <= 5) {
|
|
|
+ monitorData.value.forEach((el, index) => {
|
|
|
+ airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0
|
|
|
+ });
|
|
|
+ dataArr.push(airCompressor)
|
|
|
+ } else {
|
|
|
+ dataArr.shift()
|
|
|
+ dataArr.push(airCompressor)
|
|
|
}
|
|
|
+ echartData.value = dataArr
|
|
|
+
|
|
|
}
|
|
|
});
|
|
|
+ monitorDataGroupNum.value = monitorData.value.length;
|
|
|
}
|
|
|
- function handleCancel() {
|
|
|
- modalIsShow.value = false;
|
|
|
- modalTitle.value = '';
|
|
|
- modalType.value = '';
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // if (res) {
|
|
|
+ // const result = res;
|
|
|
+ // if (!result || result.msgTxt.length < 1) return;
|
|
|
+ // result.msgTxt.forEach((item) => {
|
|
|
+ // if (item.type && item.type.startsWith('nitrogen')) {
|
|
|
+ // airCompressorState.length = 0;
|
|
|
+ // monitorData.value = item['datalist'].filter((data) => {
|
|
|
+ // const readData = data.readData;
|
|
|
+ // airCompressorState.push({
|
|
|
+ // id: data.deviceID,
|
|
|
+ // deviceType: data.deviceType,
|
|
|
+ // HMIReset: readData.HMIReset,
|
|
|
+ // HMIStartStop: readData.HMIStartStop
|
|
|
+ // });
|
|
|
+ // return Object.assign(data, readData);
|
|
|
+ // });
|
|
|
+ // const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) }
|
|
|
+ // const dataArr = lodash.cloneDeep(echartData.value)
|
|
|
+ // //图表数据
|
|
|
+ // if (dataArr.length <= 5) {
|
|
|
+ // monitorData.value.forEach((el, index) => {
|
|
|
+ // airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0
|
|
|
+ // });
|
|
|
+ // dataArr.push(airCompressor)
|
|
|
+ // } else {
|
|
|
+ // dataArr.shift()
|
|
|
+ // dataArr.push(airCompressor)
|
|
|
+ // }
|
|
|
+ // echartData.value = dataArr
|
|
|
+
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // monitorDataGroupNum.value = monitorData.value.length;
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+function handlerDevice(data, bol) {
|
|
|
+ console.log(bol, 'bol-------')
|
|
|
+ kzParam.data = data;
|
|
|
+ kzParam.isFw = bol;
|
|
|
+ console.log(kzParam, 'kz--------')
|
|
|
+ if (bol) {
|
|
|
+ modalTitle.value = '一键复位';
|
|
|
+ modalType.value = '1';
|
|
|
+ modalIsShow.value = true;
|
|
|
+ kzParam.data.HMIReset = !data.HMIReset
|
|
|
+ } else {
|
|
|
+ modalTitle.value = '一键启停';
|
|
|
+ modalType.value = '2';
|
|
|
+ modalIsShow.value = true;
|
|
|
+ kzParam.data.HMIStartStop = !data.HMIStartStop;
|
|
|
+ }
|
|
|
+}
|
|
|
+function handleOK(passWord, handlerState) {
|
|
|
+ console.log(kzParam, 'kz----------');
|
|
|
+ // if (passWord !== '123456') {
|
|
|
+ // message.warning('密码不正确,请重新输入');
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ let data = {};
|
|
|
+ if (kzParam.isFw) {
|
|
|
+ data = {
|
|
|
+ deviceid: kzParam.data.id,
|
|
|
+ devicetype: kzParam.data.deviceType,
|
|
|
+ password: passWord,
|
|
|
+ HMIReset: kzParam.data.HMIReset,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ data = {
|
|
|
+ deviceid: kzParam.data.id,
|
|
|
+ password: passWord,
|
|
|
+ devicetype: kzParam.data.deviceType,
|
|
|
+ HMIStartStop: kzParam.data.HMIStartStop,
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
- watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
|
|
|
- nextTick(() => {
|
|
|
- if (newMonitorDataGroupNum && !newLoading) {
|
|
|
- setModelType(props.modalType, newMonitorDataGroupNum);
|
|
|
+ deviceControlApi(data).then((res) => {
|
|
|
+ // 模拟时开启
|
|
|
+ if (res.success) {
|
|
|
+ modalIsShow.value = false;
|
|
|
+ getDataSource(props.deviceId);
|
|
|
+ if (globalConfig.History_Type == 'remote') {
|
|
|
+ message.success('指令已下发至生产管控平台成功!')
|
|
|
+ } else {
|
|
|
+ message.success('指令已下发成功!')
|
|
|
}
|
|
|
- });
|
|
|
+ }
|
|
|
});
|
|
|
-
|
|
|
- onMounted(async () => {
|
|
|
- await getMonitor(true);
|
|
|
- await mountedThree().then(() => {
|
|
|
- loading.value = false;
|
|
|
- });
|
|
|
+}
|
|
|
+function handleCancel() {
|
|
|
+ modalIsShow.value = false;
|
|
|
+ modalTitle.value = '';
|
|
|
+ modalType.value = '';
|
|
|
+}
|
|
|
+
|
|
|
+watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
|
|
|
+ nextTick(() => {
|
|
|
+ if (newMonitorDataGroupNum && !newLoading) {
|
|
|
+ setModelType(props.modalType, newMonitorDataGroupNum);
|
|
|
+ }
|
|
|
});
|
|
|
+});
|
|
|
|
|
|
- onUnmounted(() => {
|
|
|
- destroy();
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- }
|
|
|
+
|
|
|
+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;
|
|
|
+@ventSpace: zxm;
|
|
|
+
|
|
|
+.nitrogen-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+#nitrogenCss3D {
|
|
|
+ .modal-monitor {
|
|
|
+ width: 200px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ top: 0px;
|
|
|
}
|
|
|
|
|
|
- #nitrogenCss3D {
|
|
|
- .modal-monitor {
|
|
|
- width: 200px;
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- &:deep(.win) {
|
|
|
- margin: 0 !important;
|
|
|
- background: #00000044;
|
|
|
- }
|
|
|
+ &: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: 20px;
|
|
|
+
|
|
|
+ .nitrogen-container {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: fixed;
|
|
|
- z-index: 9999;
|
|
|
+ height: calc(100%);
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- pointer-events: none;
|
|
|
- top: 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 100px;
|
|
|
|
|
|
- .nitrogen-container {
|
|
|
+ .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;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 9999;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
|
|
|
- .lr-box {
|
|
|
- height: fit-content;
|
|
|
- display: flex;
|
|
|
- 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;
|
|
|
+ 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;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .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;
|
|
|
|
|
|
- .state-item {
|
|
|
+ .item-col {
|
|
|
+ width: calc(50% - 5px);
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
- padding: 5px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 4px;
|
|
|
+ background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
|
|
|
|
|
|
- .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;
|
|
|
+ }
|
|
|
|
|
|
- &: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;
|
|
|
- }
|
|
|
+ .state-val {
|
|
|
+ flex: 1;
|
|
|
+ color: #00eefffe;
|
|
|
+ margin-right: 5px;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .signal-box {
|
|
|
- margin: 5px 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .signal-box {
|
|
|
+ margin: 5px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .signal-title {
|
|
|
- color: #7af5ff;
|
|
|
- margin: 0 5px;
|
|
|
- }
|
|
|
+ .signal-title {
|
|
|
+ color: #7af5ff;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
|
|
|
- &:last-child {
|
|
|
- margin-right: 0px;
|
|
|
- }
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .list-item {
|
|
|
- padding: 0 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .list-item {
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .item-data-key {
|
|
|
- color: #ffffff99;
|
|
|
- }
|
|
|
+ .item-data-key {
|
|
|
+ color: #ffffff99;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .item-data-box {
|
|
|
- color: #fff;
|
|
|
+ .item-data-box {
|
|
|
+ color: #fff;
|
|
|
|
|
|
- .state-icon {
|
|
|
- display: inline-block;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- border-radius: 12px;
|
|
|
- }
|
|
|
+ .state-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
|
|
|
- .open {
|
|
|
- border: 5px solid #133a56;
|
|
|
- background: #4ecb73;
|
|
|
- }
|
|
|
+ .open {
|
|
|
+ border: 5px solid #133a56;
|
|
|
+ background: #4ecb73;
|
|
|
+ }
|
|
|
|
|
|
- .close {
|
|
|
- border: 5px solid #192961;
|
|
|
- background: #6d7898;
|
|
|
- }
|
|
|
+ .close {
|
|
|
+ border: 5px solid #192961;
|
|
|
+ background: #6d7898;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-l {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .item-l {
|
|
|
+ .monitor-box {
|
|
|
width: 100%;
|
|
|
|
|
|
- .monitor-box {
|
|
|
+ .parameter-title {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
+ height: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
|
|
|
- .parameter-title {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 14px;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .icon,
|
|
|
- span {
|
|
|
- position: absolute;
|
|
|
- top: -10px;
|
|
|
- }
|
|
|
+ .icon,
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ top: -10px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .group-parameter-title {
|
|
|
- background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
|
|
|
+ .group-parameter-title {
|
|
|
+ background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
|
|
|
|
|
|
- .icon {
|
|
|
- left: -12px;
|
|
|
- top: -17px;
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ left: -12px;
|
|
|
+ top: -17px;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- left: 18px;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ left: 18px;
|
|
|
+ }
|
|
|
|
|
|
- .item-col {
|
|
|
- background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
|
|
|
- }
|
|
|
+ .item-col {
|
|
|
+ background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .device-parameter-title {
|
|
|
- background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
|
|
|
+ .device-parameter-title {
|
|
|
+ background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
|
|
|
|
|
|
- .icon {
|
|
|
- left: -10px;
|
|
|
- top: -14px;
|
|
|
- }
|
|
|
+ .icon {
|
|
|
+ left: -10px;
|
|
|
+ top: -14px;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- left: 18px;
|
|
|
- }
|
|
|
+ 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;
|
|
|
- margin-top: 50px;
|
|
|
+ .right-box {
|
|
|
+ width: 330px;
|
|
|
+ margin-top: 50px;
|
|
|
+
|
|
|
+ .control-group {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
- .control-group {
|
|
|
+ .control-item {
|
|
|
+ width: 50%; //lxh
|
|
|
display: flex;
|
|
|
- // justify-content: space-around;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 4px;
|
|
|
|
|
|
- .control-item {
|
|
|
- width: 50%;//lxh
|
|
|
+ .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;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .left-box {
|
|
|
- width: 365px;
|
|
|
- margin-top: 80px;
|
|
|
+ &::v-deep .a-button--mini {
|
|
|
+ padding: 6px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::v-deep .a-button--mini.is-round {
|
|
|
+ padding: 6px 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &: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;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+&: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-item {
|
|
|
- width: 200px;
|
|
|
+ .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;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .monitor-title {
|
|
|
- width: 100px;
|
|
|
- color: #7af5ff;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
+ .unit {
|
|
|
+ color: #ffffffbb;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .signal-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .monitor-title {
|
|
|
+ width: 100px;
|
|
|
+ color: #7af5ff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
|
|
|
- // margin-bottom: 5px;
|
|
|
- .signal-round {
|
|
|
- display: inline-block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
+ .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;
|
|
|
+ .signal-round-gry {
|
|
|
+ background-color: #858585;
|
|
|
|
|
|
- &::after {
|
|
|
- background-color: #85858544;
|
|
|
- box-shadow: 0 0 1px 1px #85858599;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ background-color: #85858544;
|
|
|
+ box-shadow: 0 0 1px 1px #85858599;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .signal-round-run {
|
|
|
- background-color: #67fc00;
|
|
|
+ .signal-round-run {
|
|
|
+ background-color: #67fc00;
|
|
|
|
|
|
- &::after {
|
|
|
- background-color: #67fc0044;
|
|
|
- box-shadow: 0 0 1px 1px #c6ff77;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ background-color: #67fc0044;
|
|
|
+ box-shadow: 0 0 1px 1px #c6ff77;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .signal-round-warning {
|
|
|
- background-color: #e9170b;
|
|
|
+ .signal-round-warning {
|
|
|
+ background-color: #e9170b;
|
|
|
|
|
|
- &::after {
|
|
|
- background-color: #e9170b44;
|
|
|
- box-shadow: 0 0 1px 1px #e9170b;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ background-color: #e9170b44;
|
|
|
+ box-shadow: 0 0 1px 1px #e9170b;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-radio-wrapper) {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
+:deep(.zxm-radio-wrapper) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
</style>
|