|
|
@@ -1,726 +1,212 @@
|
|
|
<template>
|
|
|
- <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
|
|
|
- <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 v-for="groupNum in monitorDataGroupNum" :key="groupNum" class="modal-monitor">
|
|
|
- <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
|
|
|
- <div class="title">空压机{{ groupNum }} </div>
|
|
|
- <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
|
|
|
- <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
|
|
|
- <span class="monitor-title">{{ preMonitor.title }}:</span>
|
|
|
- <span class="monitor-val"
|
|
|
- ><span class="val">{{ monitorData[groupNum] ? monitorData[groupNum][preMonitor.code] : '-' }}</span
|
|
|
- ><span class="unit">{{ preMonitor.unit }}</span></span
|
|
|
- >
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </fourBorderBg>
|
|
|
+ <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
|
|
|
+ <template v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
|
|
|
+ <div :id="`compressorCss3D${sysIndex + 1}`" class="threejs-Object-CSS compressorCss3D-box"
|
|
|
+ style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 模型卡片 -->
|
|
|
+ <div v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex" style="position: absolute; z-index: -1">
|
|
|
+ <div v-show="monitorDataGroupFlag == sysIndex + 1" :id="`nitrogenMonitorBox${sysIndex}`">
|
|
|
+ <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
|
|
|
+ <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
|
|
|
+ <div class="title">{{ `空压机${groupNum}` }} </div>
|
|
|
+ <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
|
|
|
+ <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
|
|
|
+ <span class="monitor-title">{{ preMonitor.title }}:</span>
|
|
|
+ <span class="monitor-val"><span class="val">{{
|
|
|
+ monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
|
|
|
+ ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
|
|
|
+ : preMonitor.value
|
|
|
+ ? preMonitor.value
|
|
|
+ : '-'
|
|
|
+ }}</span><span class="unit">{{ preMonitor.unit }}</span></span>
|
|
|
+ </div>
|
|
|
+ <div v-else class="signal-item">
|
|
|
+ <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
|
|
|
+ <span class="monitor-title">{{ signal.title }}</span>
|
|
|
+ <span :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-warning':
|
|
|
+ signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </fourBorderBg>
|
|
|
+ <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`"
|
|
|
+ v-if="cqgMonitorList && cqgMonitorList.length > 0">
|
|
|
+ <div class="title">{{ `风包${groupNum}` }}</div>
|
|
|
+ <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
|
|
|
+ <div class="monitor-item">
|
|
|
+ <span class="monitor-title">{{ cqgMonitor.title }}:</span>
|
|
|
+ <span class="monitor-val"><span class="val">{{
|
|
|
+ monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
|
|
|
+ ? formatNum(monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
|
|
|
+ : cqgMonitor.value
|
|
|
+ ? cqgMonitor.value
|
|
|
+ : '-'
|
|
|
+ }}</span><span class="unit">{{ cqgMonitor.unit }}</span></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </fourBorderBg>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="nitrogen-home">
|
|
|
+
|
|
|
+ <!-- 顶部导航提示 -->
|
|
|
+ <!-- <div class="total-data" v-if="totalData && totalData.length > 0">
|
|
|
+ <div class="vent-flex-row">
|
|
|
+ <div class="item" v-for="(data, index) in totalData" :key="index"
|
|
|
+ >{{ data.title + '(' + data.unit + ')' }}：<span class="val">{{
|
|
|
+ monitorData[data.code] ? formatNum(monitorData[data.code]) : data.value ? data.value : '-'
|
|
|
+ }}</span></div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
<div class="nitrogen-container">
|
|
|
+ <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
|
|
|
<div class="top-box">
|
|
|
- <!-- 中间区域控制按钮 -->
|
|
|
- <div class="center-item-box">
|
|
|
- <div class="top-left">
|
|
|
- <div class="button-box" @click="handlerDevice(airCompressorState, '制氮机启动')">制氮机启动</div>
|
|
|
- <div class="button-box" @click="handlerDevice(airCompressorState, '制氮机停止')">制氮机停止</div>
|
|
|
- <div class="button-box" @click="handlerDevice(airCompressorState, '空压机启动')">空压机启动</div>
|
|
|
- <div class="button-box" @click="handlerDevice(airCompressorState, '空压机停止')">空压机停止</div>
|
|
|
- </div>
|
|
|
- <div class="top-center">
|
|
|
- <div>
|
|
|
- <span class="top-c-label">注氮机通信状态：</span>
|
|
|
- <span class="top-c-val">{{ monitorData[0] && monitorData[0].netStatus ? '连接' : '网络断开' }}</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span class="top-c-label">空压机通信状态：</span>
|
|
|
- <span class="top-c-val">{{ monitorData[1] && monitorData[1].netStatus ? '连接' : '网络断开' }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="top-right">
|
|
|
- <div class="control-type">
|
|
|
- <div class="control-title">空压机状态切换：</div>
|
|
|
- <a-radio-group v-model:value="statusKyj">
|
|
|
- <a-radio :value="`1`">工作</a-radio>
|
|
|
- <a-radio :value="`0`">停机</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- </div>
|
|
|
- <div class="control-type">
|
|
|
- <div class="control-title">制氮机远近控切换：</div>
|
|
|
- <a-radio-group v-model:value="statusZdj">
|
|
|
- <a-radio :value="`1`">远程</a-radio>
|
|
|
- <a-radio :value="`0`">就地</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<!-- 左边监测数据 -->
|
|
|
<div class="lr-box left-box">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div>注氮机监测</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <div class="input-item" v-for="(preFan, index) in nitrogenMonitorData" :key="index">
|
|
|
- <div class="title">{{ preFan.title }}</div>
|
|
|
- <div v-if="preFan.unit !== 'signal'" class="value">{{ monitorData[0] ? formatNum(Number(monitorData[0][preFan.code])) : '-' }}</div>
|
|
|
- <div
|
|
|
- v-else
|
|
|
- :class="{
|
|
|
- 'signal-round': true,
|
|
|
- 'signal-round-warning': monitorData[0][preFan.code] == '1',
|
|
|
- 'signal-round-run': monitorData[0][preFan.code] == '0',
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- <div class="unit">{{ preFan.unit !== 'signal' ? `(${preFan.unit})` : '' }}</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- <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="monitor-item">
|
|
|
- <div class="state-item" v-for="(preFan, index) in preFanMonitorData" :key="index">
|
|
|
- <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' && preFan.unit !== '' ? `(${preFan.unit})` : '') }}</div>
|
|
|
- <div v-if="preFan.unit !== 'signal'" class="state-val">{{
|
|
|
- monitorData[groupNum] ? monitorData[groupNum][preFan.code] : '-'
|
|
|
- }}</div>
|
|
|
- <div
|
|
|
- v-else
|
|
|
- :class="{
|
|
|
+ <div class="left-container" v-if="preFanMonitorData && preFanMonitorData.length > 0">
|
|
|
+ <div class="item item-l" v-for="(groupNum, index) in monitorDataGroup" :key="index">
|
|
|
+ <div class="monitor-box">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>{{ groupNum }}号压风机</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="state-item">
|
|
|
+ <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
|
|
|
+ <span class="state-title">{{
|
|
|
+ preFan.title + (preFan.unit !== 'signal' && preFan.unit !== 'warning' ? `(${preFan.unit})` :
|
|
|
+ '')
|
|
|
+ }}</span>
|
|
|
+ <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
|
|
|
+ monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)] >= 0
|
|
|
+ ? formatNum(Number(monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)]))
|
|
|
+ : preFan.value
|
|
|
+ ? preFan.value
|
|
|
+ : '-'
|
|
|
+ }}</span>
|
|
|
+ <span v-else :class="{
|
|
|
'signal-round': true,
|
|
|
- 'signal-round-warning': monitorData[groupNum][preFan.code] == '1',
|
|
|
- 'signal-round-run': monitorData[groupNum][preFan.code] == '0',
|
|
|
- }"
|
|
|
- ></div>
|
|
|
+ 'signal-round-run':
|
|
|
+ preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ 'signal-round-warning':
|
|
|
+ preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
|
|
|
+ }"></span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 右边控制状态 -->
|
|
|
- <div class="lr-box right-box">
|
|
|
- <ventBox1 class="vent-margin-t-10">
|
|
|
- <template #title>
|
|
|
- <div>设备实时监测曲线</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <BarAndLine
|
|
|
- v-if="chartsColumns.length > 0"
|
|
|
- xAxisPropType="readTime"
|
|
|
- :dataSource="echartData"
|
|
|
- height="340px"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- :option="echatsOption"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- <div v-if="renderPlayer" ref="playerRef" style="height: auto; width: 100%; margin-top: 10px"></div>
|
|
|
- </div>
|
|
|
+ <div v-if="renderPlayer" ref="playerRef" class="playerBox"> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup name="nitrogenHome">
|
|
|
- import { onMounted, onUnmounted, ref, 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 BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
- import { deviceControlApi } from '/@/api/vent/index';
|
|
|
- import { preMonitorList, preFanMonitorData, nitrogenMonitorData } from '../nitrogen.data.ln';
|
|
|
- import { formatNum } from '/@/utils/ventutil';
|
|
|
- import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
- import { message } from 'ant-design-vue';
|
|
|
- import lodash from 'lodash';
|
|
|
- import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
-
|
|
|
- const globalConfig = inject('globalConfig');
|
|
|
-
|
|
|
- const props = defineProps({
|
|
|
- deviceId: {
|
|
|
- type: String,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- modalType: {
|
|
|
- type: String,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- });
|
|
|
- const renderPlayer = ref(true);
|
|
|
- const playerRef = ref();
|
|
|
- const refresh = ref(false);
|
|
|
- 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: '15%',
|
|
|
- right: '20px',
|
|
|
- bottom: '8%',
|
|
|
- // containLabel: true
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
- };
|
|
|
-
|
|
|
- const monitorDataGroupNum = ref(0);
|
|
|
- const statusKyj = ref(''); //空压机工作状态
|
|
|
- const statusZdj = ref(''); //制氮机远近程状态
|
|
|
-
|
|
|
- let airCompressorState = reactive<any[]>([]);
|
|
|
-
|
|
|
- const chartsColumns = ref(getTableHeaderColumns('sys_nitrogen_chart'));
|
|
|
- const { getCamera, webRtcServer } = useCamera();
|
|
|
-
|
|
|
- const monitorData = reactive<any[]>([]);
|
|
|
-
|
|
|
- //图表数据
|
|
|
- let echartData = ref<any>([]);
|
|
|
-
|
|
|
- // https获取监测数据
|
|
|
- let timer: null | NodeJS.Timeout = null;
|
|
|
- async function getMonitor(flag?) {
|
|
|
- if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+import { onMounted, onUnmounted, ref, onBeforeUnmount } from 'vue';
|
|
|
+import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
|
|
|
+import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
|
|
|
+import { list } from '../nitrogen.api';
|
|
|
+import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
+import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, totalData, } from '../nitrogen.data.lh';
|
|
|
+import { formatNum } from '/@/utils/ventutil';
|
|
|
+import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
+
|
|
|
+const loading = ref(true);
|
|
|
+const monitorDataGroupFlag = ref(1);
|
|
|
+const monitorDataGroup = ref<Number[]>([]);
|
|
|
+const monitorData = ref<Object | []>({});
|
|
|
+const playerRef = ref();
|
|
|
+const renderPlayer = ref(true);
|
|
|
+
|
|
|
+const { getCamera, removeCamera } = useCamera();
|
|
|
+
|
|
|
+// 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 () => {
|
|
|
- if (props.deviceId) {
|
|
|
- await getDataSource(props.deviceId);
|
|
|
- }
|
|
|
+ await getDataSource();
|
|
|
if (timer) {
|
|
|
timer = null;
|
|
|
}
|
|
|
- await getMonitor();
|
|
|
+ resolve(null);
|
|
|
+ await getMonitor(false);
|
|
|
},
|
|
|
- flag ? 0 : 3000
|
|
|
+ flag ? 0 : 1000
|
|
|
);
|
|
|
- }
|
|
|
+ });
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- async function getDataSource(systemID) {
|
|
|
- const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
|
|
|
- if (res) {
|
|
|
- const result = res;
|
|
|
- if (!result || result.msgTxt.length < 1) return;
|
|
|
- airCompressorState.length = 0;
|
|
|
- monitorData.length = 0;
|
|
|
- result.msgTxt.forEach((item) => {
|
|
|
- if (item.type && item.type.startsWith('nitrogen_auto')) {
|
|
|
- monitorData.splice(0, 0, { ...item['datalist'][0], ...item['datalist'][0].readData });
|
|
|
- } else if (item.type && item.type.startsWith('nitrogen_air_compressor')) {
|
|
|
- monitorData.push({ ...item['datalist'][0], ...item['datalist'][0].readData });
|
|
|
- }
|
|
|
- statusKyj.value = monitorData[1] ? monitorData[1]['operation_shutdown'] : '';
|
|
|
- statusZdj.value = monitorData[0] ? monitorData[0]['remote_local'] : '';
|
|
|
- monitorDataGroupNum.value = monitorData.length - 1;
|
|
|
- airCompressorState.push({
|
|
|
- id: monitorData[1] ? monitorData[1]['deviceID'] : '',
|
|
|
- deviceType: monitorData[1] ? monitorData[1]['deviceType'] : '',
|
|
|
- });
|
|
|
- const airCompressor = { readTime: monitorData[0]['readTime'].substring(11) };
|
|
|
- const dataArr = lodash.cloneDeep(echartData.value);
|
|
|
- //图表数据
|
|
|
- if (dataArr.length <= 5) {
|
|
|
- airCompressor[`nitrogen_flow_rate`] = monitorData[0]['nitrogen_flow_rate'] || 0;
|
|
|
- dataArr.push(airCompressor);
|
|
|
- } else {
|
|
|
- dataArr.shift();
|
|
|
- airCompressor[`nitrogen_flow_rate`] = monitorData[0]['nitrogen_flow_rate'] || 0;
|
|
|
- dataArr.push(airCompressor);
|
|
|
- }
|
|
|
- echartData.value = dataArr;
|
|
|
- });
|
|
|
- refresh.value = true;
|
|
|
- nextTick(() => {
|
|
|
- refresh.value = false;
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
+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] : [];
|
|
|
|
|
|
- function handlerDevice(data, bol) {
|
|
|
- kzParam.data = data;
|
|
|
- kzParam.isFw = bol;
|
|
|
- if (bol == '制氮机启动' || bol == '空压机启动') {
|
|
|
- modalTitle.value = bol;
|
|
|
- modalType.value = '1';
|
|
|
- modalIsShow.value = true;
|
|
|
- kzParam.data.start = true;
|
|
|
- kzParam.data.stop = false;
|
|
|
- } else {
|
|
|
- modalTitle.value = bol;
|
|
|
- modalType.value = '2';
|
|
|
- modalIsShow.value = true;
|
|
|
- kzParam.data.start = false;
|
|
|
- kzParam.data.stop = true;
|
|
|
- }
|
|
|
+ if (dataSource) {
|
|
|
+ Object.assign(monitorData.value, dataSource, dataSource.readData);
|
|
|
}
|
|
|
- function handleOK(passWord, handlerState) {
|
|
|
- console.log(kzParam, 'kz----------');
|
|
|
- // if (passWord !== '123456') {
|
|
|
- // message.warning('密码不正确，请重新输入');
|
|
|
- // return;
|
|
|
- // }
|
|
|
-
|
|
|
- let data = {};
|
|
|
- if (kzParam.isFw == '制氮机启动' || kzParam.isFw == '空压机启动') {
|
|
|
- data = {
|
|
|
- deviceid: kzParam.data.id,
|
|
|
- devicetype: kzParam.data.deviceType,
|
|
|
- password: passWord,
|
|
|
- start: kzParam.data.start,
|
|
|
- };
|
|
|
- } else {
|
|
|
- data = {
|
|
|
- deviceid: kzParam.data.id,
|
|
|
- password: passWord,
|
|
|
- devicetype: kzParam.data.deviceType,
|
|
|
- stop: kzParam.data.stop,
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- deviceControlApi(data).then((res) => {
|
|
|
- // 模拟时开启
|
|
|
- if (res.success) {
|
|
|
- modalIsShow.value = false;
|
|
|
- getDataSource(props.deviceId);
|
|
|
- if (globalConfig.History_Type == 'remote') {
|
|
|
- message.success('指令已下发至生产管控平台成功！');
|
|
|
- } else {
|
|
|
- message.success('指令已下发成功！');
|
|
|
- }
|
|
|
- }
|
|
|
+ loading.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function setMonitorGroupNum(flag) {
|
|
|
+ if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
|
|
|
+ const monitorGroup = monitorDataGroupArr[flag - 1];
|
|
|
+ setModelType('compressor' + (flag - 1));
|
|
|
+ monitorDataGroup.value = monitorGroup;
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ mountedThree(monitorDataGroupArr).then(async () => {
|
|
|
+ setMonitorGroupNum(1);
|
|
|
+ getMonitor(true).then(async () => {
|
|
|
+ if (monitorData.value && monitorData.value['deviceID']) await getCamera(monitorData.value['deviceID'], playerRef, renderPlayer);
|
|
|
+ });
|
|
|
});
|
|
|
+ }, 0);
|
|
|
+});
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ removeCamera(playerRef);
|
|
|
+});
|
|
|
+onUnmounted(() => {
|
|
|
+ destroy();
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
}
|
|
|
- function handleCancel() {
|
|
|
- modalIsShow.value = false;
|
|
|
- modalTitle.value = '';
|
|
|
- modalType.value = '';
|
|
|
- }
|
|
|
-
|
|
|
- watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
|
|
|
- nextTick(() => {
|
|
|
- if (newMonitorDataGroupNum && !newLoading) {
|
|
|
- setModelType(props.modalType, newMonitorDataGroupNum);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- onMounted(async () => {
|
|
|
- await getMonitor(true);
|
|
|
- await mountedThree().then(() => {
|
|
|
- loading.value = false;
|
|
|
- });
|
|
|
- await getCamera(props.deviceId, playerRef, renderPlayer);
|
|
|
- });
|
|
|
-
|
|
|
- onUnmounted(() => {
|
|
|
- destroy();
|
|
|
- if (webRtcServer.length > 0) {
|
|
|
- webRtcServer.forEach((item) => {
|
|
|
- item.disconnect();
|
|
|
- });
|
|
|
- }
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- }
|
|
|
- });
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @ventSpace: zxm;
|
|
|
-
|
|
|
- .nitrogen-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
+@import '../../comment/less/workFace.less';
|
|
|
+@ventSpace: zxm;
|
|
|
+
|
|
|
+.compressorCss3D-box {
|
|
|
+ .modal-monitor {
|
|
|
+ position: absolute;
|
|
|
+ left: 0px;
|
|
|
+ top: 0px;
|
|
|
}
|
|
|
|
|
|
- #nitrogenCss3D {
|
|
|
- .modal-monitor {
|
|
|
- width: 200px;
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- &:deep(.win) {
|
|
|
- margin: 0 !important;
|
|
|
- background: #00000044;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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: calc(100% - 100px);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 100px;
|
|
|
-
|
|
|
- .device-state {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- color: #e90000;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .top-box {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- // margin-top: 40px;
|
|
|
-
|
|
|
- .center-item-box {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50px;
|
|
|
- transform: translate(-48%, 0);
|
|
|
- width: calc(100% - 720px);
|
|
|
- height: 50px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- pointer-events: auto;
|
|
|
-
|
|
|
- .top-left {
|
|
|
- display: flex;
|
|
|
- width: 42%;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- .button-box {
|
|
|
- position: relative;
|
|
|
- width: auto;
|
|
|
- height: 32px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 5px;
|
|
|
- color: #fff;
|
|
|
- padding: 10px 15px;
|
|
|
- margin: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- cursor: pointer;
|
|
|
- background: linear-gradient(#1fa6cb, #127cb5);
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: linear-gradient(#1fa6cbcc, #127cb5cc);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .top-center {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- // flex: 1;
|
|
|
- width: 15%;
|
|
|
- justify-content: center;
|
|
|
- align-items: left;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- .top-c-label {
|
|
|
- color: yellow;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .top-right {
|
|
|
- display: flex;
|
|
|
- // flex: 2;
|
|
|
- width: 43%;
|
|
|
- justify-content: right;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- .control-type {
|
|
|
- display: flex;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- .control-title {
|
|
|
- color: #73e8fe;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .lr-box {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
- // overflow: hidden;
|
|
|
- z-index: 9999;
|
|
|
- pointer-events: auto;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- height: calc(100% - 70px);
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 305px;
|
|
|
- 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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .monitor-item {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .state-item {
|
|
|
- width: 50%;
|
|
|
- padding: 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .state-title {
|
|
|
- width: 100px;
|
|
|
- color: #ffffffdd;
|
|
|
- flex: 9;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- .unit {
|
|
|
- // color: #ffffffbb;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .state-val {
|
|
|
- flex: 1;
|
|
|
- color: #e4a300;
|
|
|
- margin-right: 5px;
|
|
|
- text-align: right;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-box {
|
|
|
- width: 300px;
|
|
|
- margin-top: 50px;
|
|
|
- }
|
|
|
-
|
|
|
- .left-box {
|
|
|
- width: 335px;
|
|
|
- margin-top: 80px;
|
|
|
-
|
|
|
- .input-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 4px 8px;
|
|
|
- margin: 6px 0;
|
|
|
- background-image: linear-gradient(to right, #39deff15, #3977e500);
|
|
|
-
|
|
|
- .title {
|
|
|
- width: 200px;
|
|
|
- }
|
|
|
-
|
|
|
- .title-auto {
|
|
|
- width: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .input-value {
|
|
|
- width: 80px;
|
|
|
- height: 28px;
|
|
|
- line-height: 28px !important;
|
|
|
- background: transparent !important;
|
|
|
- border-color: #228da2 !important;
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- width: 100px;
|
|
|
- color: #00d8ff;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .unit {
|
|
|
- width: 80px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:deep(.win) {
|
|
|
- width: 100%;
|
|
|
- margin: 0 !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:deep(.win) {
|
|
|
+ margin: 0 !important;
|
|
|
+ background: #00000044;
|
|
|
}
|
|
|
|
|
|
&:deep(.main) {
|
|
|
@@ -738,7 +224,6 @@
|
|
|
}
|
|
|
|
|
|
.monitor-item {
|
|
|
- width: 200px;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
width: auto;
|
|
|
@@ -762,8 +247,7 @@
|
|
|
}
|
|
|
|
|
|
.monitor-title {
|
|
|
- // width: 100px;
|
|
|
- width: 125px;
|
|
|
+ width: 100px;
|
|
|
color: #7af5ff;
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
@@ -822,8 +306,335 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.nitrogen-home {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100%);
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ pointer-events: none;
|
|
|
+ top: 60px;
|
|
|
+
|
|
|
+ .total-data {
|
|
|
+ position: absolute;
|
|
|
+ color: #e4cd00;
|
|
|
+ z-index: 9;
|
|
|
+ top: 20px;
|
|
|
+ right: 30px;
|
|
|
+ // display: flex;
|
|
|
+ font-size: 18px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-left: 20px;
|
|
|
+
|
|
|
+ .val {
|
|
|
+ display: inline-box;
|
|
|
+ width: 150px;
|
|
|
+ color: #00d8ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nitrogen-container {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100%);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .device-state {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ color: #e90000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .lr-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ z-index: 9999;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 285px;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 0px;
|
|
|
+ pointer-events: auto;
|
|
|
+ color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .control-item {
|
|
|
+ height: auto;
|
|
|
+ min-height: 35px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 0 10px 0 3px;
|
|
|
+ pointer-events: auto;
|
|
|
+ background: linear-gradient(to right, #0063cd22, #0063cd04);
|
|
|
+
|
|
|
+ margin-bottom: 5px;
|
|
|
+ border-width: 1px;
|
|
|
+ border-style: dashed;
|
|
|
+
|
|
|
+ border-image: linear-gradient(to right, #008ccd66, #0063cd04) 1 1;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-item-l {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .round {
|
|
|
+ display: inline-block;
|
|
|
+ width: 3px;
|
|
|
+ height: 3px;
|
|
|
+ padding: 1px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #3df6ff;
|
|
|
+ margin-right: 5px;
|
|
|
+ box-shadow: 0 0 1px 1px #64f7ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-item-r {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-box {
|
|
|
+ position: relative;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px transparent solid;
|
|
|
+ background-clip: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .a-button {
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::v-deep .a-button--mini {
|
|
|
+ padding: 6px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::v-deep .a-button--mini.is-round {
|
|
|
+ padding: 6px 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .base-title {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ text-align: center;
|
|
|
+ color: #00d8ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .state-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .item-col {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+ .state-title {
|
|
|
+ color: #ffffffcc;
|
|
|
+ flex: 9;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ // color: #ffffffbb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .state-val {
|
|
|
+ flex: 1;
|
|
|
+ color: #e4a300;
|
|
|
+ margin-right: 5px;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ pointer-events: auto;
|
|
|
+ direction: rtl;
|
|
|
+
|
|
|
+ .item-l {
|
|
|
+ width: 335px;
|
|
|
+
|
|
|
+ .monitor-box {
|
|
|
+ background-color: #ffffff05;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-container {
|
|
|
+ direction: ltr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .control-item {
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .playerBox {
|
|
|
+ z-index: 9999;
|
|
|
+ position: fixed;
|
|
|
+ // top: 200px;
|
|
|
+ right: 15px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ overflow-y: auto;
|
|
|
+ margin: auto;
|
|
|
+ pointer-events: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+
|
|
|
+ &:deep(#LivePlayerBox) {
|
|
|
+ width: auto !important;
|
|
|
+ height: auto !important;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ justify-content: end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ padding: 2px 12px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ width: calc(100% - 4px);
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ top: 2px;
|
|
|
+ left: 2px;
|
|
|
+ border-radius: 2px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn1 {
|
|
|
+ border: 1px solid #5cfaff;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ background-image: linear-gradient(#2effee92, #0cb1d592);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border: 1px solid #5cfaffaa;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ background-image: linear-gradient(#2effee72, #0cb1d572);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn2 {
|
|
|
+ border: 1px solid #e91927;
|
|
|
+ margin-left: 10px;
|
|
|
|
|
|
- :deep(.zxm-radio-wrapper) {
|
|
|
- color: #fff !important;
|
|
|
+ &::before {
|
|
|
+ background-image: linear-gradient(#b02533, #a31f2e);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ &::before {
|
|
|
+ background-image: linear-gradient(#bd2e3ccc, #a31f2ecc);
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
