|
|
@@ -9,629 +9,932 @@
|
|
|
<div class="value">{{ selectData[item.code] ? selectData[item.code] : '-' }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- </fourBorderBg>
|
|
|
- </div> -->
|
|
|
+</fourBorderBg>
|
|
|
+</div> -->
|
|
|
</div>
|
|
|
<!-- 布尔台新瓦斯泵模型上的数据 -->
|
|
|
<div class="elementContent" style="position: absolute; display: none">
|
|
|
<div v-for="(tag, index) in modelMonitorTags" :key="index" :id="tag.domId" class="modal-monitor-box">
|
|
|
<div class="title">{{ tag.title }}</div>
|
|
|
- <div
|
|
|
- v-if="tag.type == 'sign'"
|
|
|
- class="signal-round"
|
|
|
- :class="{ 'signal-round-gry': selectData[tag.code] != 1, 'signal-round-run': selectData[tag.code] == 1 }"
|
|
|
- ></div>
|
|
|
+ <div v-if="tag.type == 'sign'" class="signal-round"
|
|
|
+ :class="{ 'signal-round-gry': selectData[tag.code] != 1, 'signal-round-run': selectData[tag.code] == 1 }">
|
|
|
+ </div>
|
|
|
<div v-else class="value">{{ selectData[tag.code] }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
|
|
|
- <div class="lr left-box">
|
|
|
- <div class="left-container">
|
|
|
- <div class="monitor-box">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div>瓦斯泵</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <div v-for="key in 2" :key="key">
|
|
|
- <div class="parameter-title group-parameter-title">
|
|
|
- <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#瓦斯泵磁力启动器</span>
|
|
|
- </div>
|
|
|
- <div class="input-box">
|
|
|
- <div v-for="(item, index) in pumpMonitorData" class="input-item" :key="index">
|
|
|
- <div class="title">{{ item.title }}：</div>
|
|
|
- <template v-if="item.type !== 'sign' && item.type !== 'warning'">
|
|
|
- <div class="value">{{
|
|
|
- selectData && selectData[item.code.replace('Starter', `Starter${key + 4}`)]
|
|
|
- ? formatNum(selectData[item.code.replace('Starter', `Starter${key + 4}`)], 1)
|
|
|
- : '-'
|
|
|
- }}</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="value">
|
|
|
- <span
|
|
|
- :class="{
|
|
|
- 'signal-round': true,
|
|
|
- 'signal-round-run': item.type === 'sign' && selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '1',
|
|
|
- 'signal-round-gry': selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '0',
|
|
|
- 'signal-round-warning': item.type === 'warning' && selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '1',
|
|
|
- }"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- <ventBox1 class="vent-margin-t-10">
|
|
|
- <template #title>
|
|
|
- <div>注水泵</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <div v-for="key in 2" :key="key">
|
|
|
- <div class="parameter-title group-parameter-title">
|
|
|
- <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#注水泵</span>
|
|
|
- </div>
|
|
|
- <div class="input-box">
|
|
|
- <div v-for="(item, index) in waterPumpData" class="input-item" :key="index">
|
|
|
- <div class="title">{{ item.title }}：</div>
|
|
|
- <template v-if="item.type !== 'sign'">
|
|
|
- <div class="value">{{
|
|
|
- selectData && selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)]
|
|
|
- ? formatNum(selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)], 1)
|
|
|
- : '-'
|
|
|
- }}</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="value">
|
|
|
- <span
|
|
|
- :class="{
|
|
|
- 'signal-round': true,
|
|
|
- 'signal-round-run': selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)],
|
|
|
- 'signal-round-gry': selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)] == '0',
|
|
|
- }"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- <ventBox1 class="vent-margin-t-10">
|
|
|
- <template #title>
|
|
|
- <div>排水泵</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <div v-for="key in 2" :key="key">
|
|
|
- <div class="parameter-title group-parameter-title">
|
|
|
- <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#排水泵</span>
|
|
|
- </div>
|
|
|
- <div class="input-box">
|
|
|
- <div v-for="(item, index) in dewateringPumpData" class="input-item" :key="index">
|
|
|
- <div class="title">{{ item.title }}：</div>
|
|
|
- <template v-if="item.type !== 'sign'">
|
|
|
- <div class="value">{{
|
|
|
- selectData && selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)]
|
|
|
- ? formatNum(selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)], 1)
|
|
|
- : '-'
|
|
|
- }}</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="value">
|
|
|
- <span
|
|
|
- :class="{
|
|
|
- 'signal-round': true,
|
|
|
- 'signal-round-run': selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)],
|
|
|
- 'signal-round-gry': selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)] == '0',
|
|
|
- }"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="lr right-box">
|
|
|
- <div class="item-box sensor-container">
|
|
|
- <ventBox1 class="vent-margin-t-10">
|
|
|
- <template #title>
|
|
|
- <div>泵站远程集中控制</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <div class="top-btn">
|
|
|
- <div class="btn-group">
|
|
|
- <a-button class="btn-item" type="primary" @click="handlerFn('zfw')">总复位</a-button>
|
|
|
- <a-button class="btn-item" type="default" disabled @click="handlerFn('change')">一键切换</a-button>
|
|
|
- </div>
|
|
|
- <div class="btn-group">
|
|
|
- <a-button style="width: calc(100% - 16px); padding: 0 8px" type="primary" @click="openModal">瓦斯泵控制</a-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="control-item">
|
|
|
- <div class="control-title">控制模式：</div>
|
|
|
- <div class="control-container">
|
|
|
- <a-radio-group v-model:value="selectData['ykjdqh']">
|
|
|
- <a-radio :value="'0'">就地</a-radio>
|
|
|
- <a-radio :value="'1'">远程</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- <div class="btn-box">
|
|
|
- <div class="btn btn1" @click="changeCtr(0)">就地</div>
|
|
|
- <div class="btn btn1" @click="changeCtr(1)">远程</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="control-item">
|
|
|
- <div class="control-title">检修模式：</div>
|
|
|
- <div class="control-container">
|
|
|
- <a-radio-group v-model:value="selectData['jxmsqh']">
|
|
|
- <a-radio :value="'0'">关闭</a-radio>
|
|
|
- <a-radio :value="'1'">开启</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- <div class="btn-box">
|
|
|
- <div class="btn btn1" @click="changeMode(0)">关闭</div>
|
|
|
- <div class="btn btn1" @click="changeMode(1)">开启</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- <ventBox1 class="vent-margin-t-10">
|
|
|
- <template #title>
|
|
|
- <div>泵站监测详情</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <ListItem
|
|
|
- v-for="(item, index) in modelMonitor"
|
|
|
- :key="index"
|
|
|
- class="w-100% mb-5px"
|
|
|
- :value="selectData[item.code]"
|
|
|
- :label="item.title"
|
|
|
- label-width="250px"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
- <!-- <div class="item-box" >
|
|
|
- <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
+
|
|
|
+ <!-- 可配置模块 -->
|
|
|
+ <ModuleCommon v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-data="cfg.moduleData"
|
|
|
+ :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="selectData" :visible="true" />
|
|
|
+
|
|
|
+ <div class="lr left-box"></div>
|
|
|
+ <div class="lr right-box"></div>
|
|
|
<div ref="playerRef" class="player-box"></div>
|
|
|
</div>
|
|
|
- <DetailModal @register="register" :device-type="deviceType" :device-id="deviceId" />
|
|
|
- <PasswordModal
|
|
|
- :modal-is-show="passwordModalIsShow"
|
|
|
- modal-title="密码检验"
|
|
|
- :modal-type="handlerType"
|
|
|
- @handle-ok="handleOK"
|
|
|
- @handle-cancel="handleCancel"
|
|
|
- />
|
|
|
+ <PasswordModal :modal-is-show="passwordModalIsShow" modal-title="密码检验" :modal-type="handlerType" @handle-ok="handleOK"
|
|
|
+ @handle-cancel="handleCancel" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, onMounted, onUnmounted, reactive, defineProps, watch, inject, nextTick, onBeforeUnmount } from 'vue';
|
|
|
- import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
- import { setModelType, playAnimate } from '../gasPump.threejs';
|
|
|
- import ListItem from '@/views/vent/gas/components/list/listItem.vue';
|
|
|
- import {
|
|
|
- stateWarningHeader,
|
|
|
- valveWarningState,
|
|
|
- pumpMonitorData,
|
|
|
- waterPumpData,
|
|
|
- dewateringPumpData,
|
|
|
- modelMonitor,
|
|
|
- getModelMonitorTags,
|
|
|
- valveCtrlType,
|
|
|
- } from '../gasPump.data';
|
|
|
- import { list } from '../gasPump.api';
|
|
|
- import { SvgIcon } from '/@/components/Icon';
|
|
|
- import { formatNum } from '/@/utils/ventutil';
|
|
|
- import DetailModal from './DetailModal.vue';
|
|
|
- import { useModal } from '/@/components/Modal';
|
|
|
- import { deviceControlApi } from '/@/api/vent/index';
|
|
|
- import PasswordModal from '../../comment/components/PasswordModal.vue';
|
|
|
- import { message } from 'ant-design-vue';
|
|
|
- import fourBorderBg from '/@/components/vent/fourBorderBg.vue';
|
|
|
- import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
-
|
|
|
- const globalConfig = inject('globalConfig');
|
|
|
-
|
|
|
- const props = defineProps({
|
|
|
- deviceId: {
|
|
|
- type: String,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- deviceType: {
|
|
|
- type: String,
|
|
|
- require: true,
|
|
|
- },
|
|
|
- });
|
|
|
- const [register, { openModal }] = useModal();
|
|
|
- const modelMonitorTags = getModelMonitorTags();
|
|
|
- const loading = ref(false);
|
|
|
- const tabActiveKey = ref(1);
|
|
|
- const passwordModalIsShow = ref(false);
|
|
|
- const handlerType = ref('');
|
|
|
- const playerRef = ref();
|
|
|
-
|
|
|
- // 监测数据
|
|
|
- const selectData = ref({
|
|
|
- pump1: false,
|
|
|
- pump2: false,
|
|
|
- pump3: false,
|
|
|
- pump4: false,
|
|
|
- waterPump1: false,
|
|
|
- waterPump2: false,
|
|
|
- waterPump3: false,
|
|
|
- waterPump4: false,
|
|
|
- inValve1: false,
|
|
|
- outValve1: false,
|
|
|
- inValve2: false,
|
|
|
- outValve2: false,
|
|
|
- inValve3: false,
|
|
|
- outValve3: false,
|
|
|
- inValve4: false,
|
|
|
- outValve4: false,
|
|
|
- jxmsqh: '1',
|
|
|
- ykjdqh: '1',
|
|
|
- FlowSensor_InputFlux: '-',
|
|
|
- deviceType: '',
|
|
|
- });
|
|
|
-
|
|
|
- const { getCamera, removeCamera } = useCamera();
|
|
|
-
|
|
|
- // https获取监测数据
|
|
|
- let timer: null | NodeJS.Timeout = null;
|
|
|
- function getMonitor(flag?) {
|
|
|
- if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- return new Promise((resolve) => {
|
|
|
- timer = setTimeout(
|
|
|
- async () => {
|
|
|
- if (props.deviceId) {
|
|
|
- const data = await getDataSource(props.deviceId);
|
|
|
- selectData.value = data;
|
|
|
- playAnimate(data);
|
|
|
- // Object.assign(selectData, data);
|
|
|
- }
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- resolve(null);
|
|
|
- await getMonitor();
|
|
|
- loading.value = false;
|
|
|
- },
|
|
|
- flag ? 0 : 1000
|
|
|
- );
|
|
|
- });
|
|
|
- }
|
|
|
+import { ref, onMounted, onUnmounted, reactive, defineProps, watch, inject, nextTick, onBeforeUnmount, computed } from 'vue';
|
|
|
+// import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
+import { setModelType, playAnimate } from '../gasPump.threejs';
|
|
|
+// import ListItem from '@/views/vent/gas/components/list/listItem.vue';
|
|
|
+import {
|
|
|
+ getModelMonitorTags,
|
|
|
+} from '../gasPump.data';
|
|
|
+import { list } from '../gasPump.api';
|
|
|
+import { deviceControlApi } from '/@/api/vent/index';
|
|
|
+import PasswordModal from '../../comment/components/PasswordModal.vue';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+// import fourBorderBg from '/@/components/vent/fourBorderBg.vue';
|
|
|
+// import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
+import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
|
|
|
+ import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
|
|
|
+ import { set } from 'lodash-es';
|
|
|
+
|
|
|
+const globalConfig = inject<any>('globalConfig');
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ deviceId: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ deviceType: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const { configs: rawConfigs, fetchConfigs } = useInitConfigs();
|
|
|
+const configs = computed(() => {
|
|
|
+ return rawConfigs.value.filter((c) => c.deviceType == props.deviceId);
|
|
|
+});
|
|
|
+
|
|
|
+// const [register, { openModal }] = useModal();
|
|
|
+const modelMonitorTags = getModelMonitorTags();
|
|
|
+const loading = ref(false);
|
|
|
+const passwordModalIsShow = ref(false);
|
|
|
+const handlerType = ref('');
|
|
|
+const playerRef = ref();
|
|
|
+
|
|
|
+// 监测数据
|
|
|
+const selectData = ref({});
|
|
|
+
|
|
|
+// const { getCamera, removeCamera } = useCamera();
|
|
|
+
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = null;
|
|
|
+function getMonitor(flag?) {
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ if (props.deviceId) {
|
|
|
+ const data = await getDataSource();
|
|
|
+ selectData.value = data;
|
|
|
+ playAnimate(data);
|
|
|
+ // Object.assign(selectData, data);
|
|
|
+ }
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ resolve(null);
|
|
|
+ await getMonitor();
|
|
|
+ loading.value = false;
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
+ });
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+async function getDataSource() {
|
|
|
+ const res = await list({
|
|
|
+ devicetype: 'gasdrainage',
|
|
|
+ pagetype: 'normal',
|
|
|
+ });
|
|
|
+ const datalist = res.msgTxt[0]['datalist'];
|
|
|
|
|
|
- async function getDataSource(systemID) {
|
|
|
- const res = await list({ devicetype: props.deviceType, ids: systemID });
|
|
|
- const result = res.msgTxt[0]['datalist'][0];
|
|
|
- Object.assign(result, result['readData']);
|
|
|
+ const result = datalist.reduce((obj, e) => {
|
|
|
+ return set(obj, e.readData.id, e);
|
|
|
+ }, {});
|
|
|
return result;
|
|
|
}
|
|
|
|
|
|
- function handler(passWord, paramcode) {
|
|
|
- let value = '';
|
|
|
- if (paramcode == 'ykjdqh') {
|
|
|
- value = selectData.value['ykjdqh'] == '1' ? '2' : '1';
|
|
|
- }
|
|
|
- if (paramcode == 'jxmsqh') {
|
|
|
- value = selectData.value['jxmsqh'] == '1' ? '2' : '1';
|
|
|
- }
|
|
|
- const data = {
|
|
|
- deviceid: selectData.value['deviceID'],
|
|
|
- devicetype: selectData.value['deviceType'],
|
|
|
- paramcode: paramcode,
|
|
|
- password: passWord,
|
|
|
- value: value,
|
|
|
- };
|
|
|
- deviceControlApi(data)
|
|
|
- .then((res) => {
|
|
|
- if (globalConfig.History_Type == 'remote') {
|
|
|
- message.success('指令已下发至生产管控平台成功！');
|
|
|
- } else {
|
|
|
- message.success('指令已下发成功！');
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- message.success('控制异常');
|
|
|
- });
|
|
|
+function handler(passWord, paramcode) {
|
|
|
+ let value = '';
|
|
|
+ if (paramcode == 'ykjdqh') {
|
|
|
+ value = selectData.value['ykjdqh'] == '1' ? '2' : '1';
|
|
|
}
|
|
|
-
|
|
|
- function changeCtr(e) {
|
|
|
- if (e == 1) {
|
|
|
- // 就地
|
|
|
- handlerType.value = 'jxmsqh';
|
|
|
- } else if (e == 2) {
|
|
|
- // 远程
|
|
|
- handlerType.value = 'jxmsqh';
|
|
|
- }
|
|
|
- passwordModalIsShow.value = true;
|
|
|
+ if (paramcode == 'jxmsqh') {
|
|
|
+ value = selectData.value['jxmsqh'] == '1' ? '2' : '1';
|
|
|
}
|
|
|
+ const data = {
|
|
|
+ deviceid: selectData.value['deviceID'],
|
|
|
+ devicetype: selectData.value['deviceType'],
|
|
|
+ paramcode: paramcode,
|
|
|
+ password: passWord,
|
|
|
+ value: value,
|
|
|
+ };
|
|
|
+ deviceControlApi(data)
|
|
|
+ .then((res) => {
|
|
|
+ if (globalConfig.History_Type == 'remote') {
|
|
|
+ message.success('指令已下发至生产管控平台成功！');
|
|
|
+ } else {
|
|
|
+ message.success('指令已下发成功！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ message.success('控制异常');
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
- function changeMode(e) {
|
|
|
- if (e == 1) {
|
|
|
- // 检修开
|
|
|
- handlerType.value = 'ykjdqh';
|
|
|
- } else if (e == 2) {
|
|
|
- // 检修关
|
|
|
- handlerType.value = 'ykjdqh';
|
|
|
- }
|
|
|
- passwordModalIsShow.value = true;
|
|
|
- }
|
|
|
+// function changeCtr(e) {
|
|
|
+// if (e == 1) {
|
|
|
+// // 就地
|
|
|
+// handlerType.value = 'jxmsqh';
|
|
|
+// } else if (e == 2) {
|
|
|
+// // 远程
|
|
|
+// handlerType.value = 'jxmsqh';
|
|
|
+// }
|
|
|
+// passwordModalIsShow.value = true;
|
|
|
+// }
|
|
|
|
|
|
- function handlerFn(paramcode) {
|
|
|
- handlerType.value = paramcode;
|
|
|
- passwordModalIsShow.value = true;
|
|
|
- }
|
|
|
+// function changeMode(e) {
|
|
|
+// if (e == 1) {
|
|
|
+// // 检修开
|
|
|
+// handlerType.value = 'ykjdqh';
|
|
|
+// } else if (e == 2) {
|
|
|
+// // 检修关
|
|
|
+// handlerType.value = 'ykjdqh';
|
|
|
+// }
|
|
|
+// passwordModalIsShow.value = true;
|
|
|
+// }
|
|
|
|
|
|
- function handleOK(passWord, handlerState) {
|
|
|
- handler(passWord, handlerState);
|
|
|
- passwordModalIsShow.value = false;
|
|
|
- handlerType.value = '';
|
|
|
- }
|
|
|
+// function handlerFn(paramcode) {
|
|
|
+// handlerType.value = paramcode;
|
|
|
+// passwordModalIsShow.value = true;
|
|
|
+// }
|
|
|
+
|
|
|
+function handleOK(passWord, handlerState) {
|
|
|
+ handler(passWord, handlerState);
|
|
|
+ passwordModalIsShow.value = false;
|
|
|
+ handlerType.value = '';
|
|
|
+}
|
|
|
|
|
|
- function handleCancel() {
|
|
|
- passwordModalIsShow.value = false;
|
|
|
- handlerType.value = '';
|
|
|
+function handleCancel() {
|
|
|
+ passwordModalIsShow.value = false;
|
|
|
+ handlerType.value = '';
|
|
|
+}
|
|
|
+
|
|
|
+// 喷粉操作
|
|
|
+// function handlerDevice(code, data) { }
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.deviceType,
|
|
|
+ () => {
|
|
|
+ // removeCamera();
|
|
|
+ nextTick(async () => {
|
|
|
+ if (props.deviceType == 'pump_over') {
|
|
|
+ setModelType('gasPump');
|
|
|
+ } else if (props.deviceType?.startsWith('pump_under') || props.deviceType == 'pump_n12m2pq') {
|
|
|
+ setModelType('gasPumpUnder');
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
+);
|
|
|
+// watch(
|
|
|
+// () => props.deviceId,
|
|
|
+// async (deviceID) => {
|
|
|
+// removeCamera();
|
|
|
+// if (deviceID) await getCamera(deviceID, playerRef.value);
|
|
|
+// }
|
|
|
+// );
|
|
|
|
|
|
- // 喷粉操作
|
|
|
- function handlerDevice(code, data) {}
|
|
|
-
|
|
|
- watch(
|
|
|
- () => props.deviceType,
|
|
|
- () => {
|
|
|
- removeCamera();
|
|
|
- nextTick(async () => {
|
|
|
- if (props.deviceType == 'pump_over') {
|
|
|
- setModelType('gasPump');
|
|
|
- } else if (props.deviceType?.startsWith('pump_under') || props.deviceType == 'pump_n12m2pq') {
|
|
|
- setModelType('gasPumpUnder');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- );
|
|
|
- watch(
|
|
|
- () => props.deviceId,
|
|
|
- async (deviceID) => {
|
|
|
- removeCamera();
|
|
|
- if (deviceID) await getCamera(deviceID, playerRef.value);
|
|
|
- }
|
|
|
- );
|
|
|
+onMounted(async () => {
|
|
|
+ timer = null;
|
|
|
+ await getMonitor(true);
|
|
|
+ fetchConfigs('gasPumpMonitor');
|
|
|
+ // if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
|
|
|
+});
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
+// onBeforeUnmount(() => {
|
|
|
+// removeCamera();
|
|
|
+// });
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ // removeCamera();
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
timer = null;
|
|
|
- await getMonitor(true);
|
|
|
- // if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
|
|
|
- });
|
|
|
-
|
|
|
- onBeforeUnmount(() => {
|
|
|
- removeCamera();
|
|
|
- });
|
|
|
-
|
|
|
- onUnmounted(() => {
|
|
|
- removeCamera();
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
- }
|
|
|
- });
|
|
|
+ }
|
|
|
+});
|
|
|
+ // const rawConfigs = ref<Config[]>([
|
|
|
+ // {
|
|
|
+ // deviceType: '1709773229143920641',
|
|
|
+ // moduleName: '瓦斯泵',
|
|
|
+ // pageType: 'gasPumpMonitor',
|
|
|
+ // moduleData: {
|
|
|
+ // header: {
|
|
|
+ // show: false,
|
|
|
+ // readFrom: '',
|
|
|
+ // selector: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // slot: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // background: {
|
|
|
+ // show: false,
|
|
|
+ // type: 'image',
|
|
|
+ // link: '',
|
|
|
+ // },
|
|
|
+ // layout: {
|
|
|
+ // direction: 'column',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // name: 'list',
|
|
|
+ // basis: '100%',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // complex_list: [],
|
|
|
+ // chart: [],
|
|
|
+ // table: [],
|
|
|
+ // gallery: [],
|
|
|
+ // list: [
|
|
|
+ // {
|
|
|
+ // type: 'K',
|
|
|
+ // readFrom: '',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // label: '701001传感器的值',
|
|
|
+ // value: '${701001.readData.value}',
|
|
|
+ // color: 'blue',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // gallery_list: [],
|
|
|
+ // preset: [],
|
|
|
+ // to: '',
|
|
|
+ // },
|
|
|
+ // showStyle: {
|
|
|
+ // size: 'width:348px;height:300px;',
|
|
|
+ // version: '原版',
|
|
|
+ // position: 'top:30px;left:10px;',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // deviceType: '1709773229143920641',
|
|
|
+ // moduleName: '注水泵',
|
|
|
+ // pageType: 'gasPumpMonitor',
|
|
|
+ // moduleData: {
|
|
|
+ // header: {
|
|
|
+ // show: false,
|
|
|
+ // readFrom: '',
|
|
|
+ // selector: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // slot: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // background: {
|
|
|
+ // show: false,
|
|
|
+ // type: 'image',
|
|
|
+ // link: '',
|
|
|
+ // },
|
|
|
+ // layout: {
|
|
|
+ // direction: 'column',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // name: 'list',
|
|
|
+ // basis: '100%',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // complex_list: [],
|
|
|
+ // chart: [],
|
|
|
+ // table: [],
|
|
|
+ // gallery: [],
|
|
|
+ // list: [
|
|
|
+ // {
|
|
|
+ // type: 'K',
|
|
|
+ // readFrom: '',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // label: '701001传感器的值',
|
|
|
+ // value: '${701001.readData.value}',
|
|
|
+ // color: 'blue',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // gallery_list: [],
|
|
|
+ // preset: [],
|
|
|
+ // to: '',
|
|
|
+ // },
|
|
|
+ // showStyle: {
|
|
|
+ // size: 'width:348px;height:200px;',
|
|
|
+ // version: '原版',
|
|
|
+ // position: 'top:340px;left:10px;',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // deviceType: '1709773229143920641',
|
|
|
+ // moduleName: '排水泵',
|
|
|
+ // pageType: 'gasPumpMonitor',
|
|
|
+ // moduleData: {
|
|
|
+ // header: {
|
|
|
+ // show: false,
|
|
|
+ // readFrom: '',
|
|
|
+ // selector: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // slot: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // background: {
|
|
|
+ // show: false,
|
|
|
+ // type: 'image',
|
|
|
+ // link: '',
|
|
|
+ // },
|
|
|
+ // layout: {
|
|
|
+ // direction: 'column',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // name: 'list',
|
|
|
+ // basis: '100%',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // complex_list: [],
|
|
|
+ // chart: [],
|
|
|
+ // table: [],
|
|
|
+ // gallery: [],
|
|
|
+ // list: [
|
|
|
+ // {
|
|
|
+ // type: 'K',
|
|
|
+ // readFrom: '',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // label: '701001传感器的值',
|
|
|
+ // value: '${701001.readData.value}',
|
|
|
+ // color: 'blue',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // gallery_list: [],
|
|
|
+ // preset: [],
|
|
|
+ // to: '',
|
|
|
+ // },
|
|
|
+ // showStyle: {
|
|
|
+ // size: 'width:348px;height:200px;',
|
|
|
+ // version: '原版',
|
|
|
+ // position: 'top:550px;left:10px;',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // deviceType: '1709773229143920641',
|
|
|
+ // moduleName: '泵站检测详情',
|
|
|
+ // pageType: 'gasPumpMonitor',
|
|
|
+ // moduleData: {
|
|
|
+ // header: {
|
|
|
+ // show: false,
|
|
|
+ // readFrom: '',
|
|
|
+ // selector: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // slot: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // background: {
|
|
|
+ // show: false,
|
|
|
+ // type: 'image',
|
|
|
+ // link: '',
|
|
|
+ // },
|
|
|
+ // layout: {
|
|
|
+ // direction: 'column',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // name: 'list',
|
|
|
+ // basis: '100%',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // complex_list: [],
|
|
|
+ // chart: [],
|
|
|
+ // table: [],
|
|
|
+ // gallery: [],
|
|
|
+ // list: [
|
|
|
+ // {
|
|
|
+ // type: 'K',
|
|
|
+ // readFrom: '',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // label: '701001传感器的值',
|
|
|
+ // value: '${701001.readData.value}',
|
|
|
+ // color: 'blue',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // gallery_list: [],
|
|
|
+ // preset: [],
|
|
|
+ // to: '',
|
|
|
+ // },
|
|
|
+ // showStyle: {
|
|
|
+ // size: 'width:348px;height:490px;',
|
|
|
+ // version: '原版',
|
|
|
+ // position: 'top:30px;right:0px;',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // deviceType: '1709773300489031682',
|
|
|
+ // moduleName: '瓦斯泵',
|
|
|
+ // pageType: 'gasPumpMonitor',
|
|
|
+ // moduleData: {
|
|
|
+ // header: {
|
|
|
+ // show: false,
|
|
|
+ // readFrom: '',
|
|
|
+ // selector: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // slot: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // background: {
|
|
|
+ // show: false,
|
|
|
+ // type: 'image',
|
|
|
+ // link: '',
|
|
|
+ // },
|
|
|
+ // layout: {
|
|
|
+ // direction: 'column',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // name: 'list',
|
|
|
+ // basis: '100%',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // complex_list: [],
|
|
|
+ // chart: [],
|
|
|
+ // table: [],
|
|
|
+ // gallery: [],
|
|
|
+ // list: [
|
|
|
+ // {
|
|
|
+ // type: 'K',
|
|
|
+ // readFrom: '',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // label: '701004传感器的值',
|
|
|
+ // value: '${701004.readData.value}',
|
|
|
+ // color: 'blue',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // gallery_list: [],
|
|
|
+ // preset: [],
|
|
|
+ // to: '',
|
|
|
+ // },
|
|
|
+ // showStyle: {
|
|
|
+ // size: 'width:348px;height:300px;',
|
|
|
+ // version: '原版',
|
|
|
+ // position: 'top:30px;left:10px;',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // deviceType: '1709773300489031682',
|
|
|
+ // moduleName: '注水泵',
|
|
|
+ // pageType: 'gasPumpMonitor',
|
|
|
+ // moduleData: {
|
|
|
+ // header: {
|
|
|
+ // show: false,
|
|
|
+ // readFrom: '',
|
|
|
+ // selector: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // slot: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // background: {
|
|
|
+ // show: false,
|
|
|
+ // type: 'image',
|
|
|
+ // link: '',
|
|
|
+ // },
|
|
|
+ // layout: {
|
|
|
+ // direction: 'column',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // name: 'list',
|
|
|
+ // basis: '100%',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // complex_list: [],
|
|
|
+ // chart: [],
|
|
|
+ // table: [],
|
|
|
+ // gallery: [],
|
|
|
+ // list: [
|
|
|
+ // {
|
|
|
+ // type: 'K',
|
|
|
+ // readFrom: '',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // label: '701004传感器的值',
|
|
|
+ // value: '${701004.readData.value}',
|
|
|
+ // color: 'blue',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // gallery_list: [],
|
|
|
+ // preset: [],
|
|
|
+ // to: '',
|
|
|
+ // },
|
|
|
+ // showStyle: {
|
|
|
+ // size: 'width:348px;height:200px;',
|
|
|
+ // version: '原版',
|
|
|
+ // position: 'top:340px;left:10px;',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // deviceType: '1709773300489031682',
|
|
|
+ // moduleName: '排水泵',
|
|
|
+ // pageType: 'gasPumpMonitor',
|
|
|
+ // moduleData: {
|
|
|
+ // header: {
|
|
|
+ // show: false,
|
|
|
+ // readFrom: '',
|
|
|
+ // selector: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // slot: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // background: {
|
|
|
+ // show: false,
|
|
|
+ // type: 'image',
|
|
|
+ // link: '',
|
|
|
+ // },
|
|
|
+ // layout: {
|
|
|
+ // direction: 'column',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // name: 'list',
|
|
|
+ // basis: '100%',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // complex_list: [],
|
|
|
+ // chart: [],
|
|
|
+ // table: [],
|
|
|
+ // gallery: [],
|
|
|
+ // list: [
|
|
|
+ // {
|
|
|
+ // type: 'K',
|
|
|
+ // readFrom: '',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // label: '701004传感器的值',
|
|
|
+ // value: '${701004.readData.value}',
|
|
|
+ // color: 'blue',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // gallery_list: [],
|
|
|
+ // preset: [],
|
|
|
+ // to: '',
|
|
|
+ // },
|
|
|
+ // showStyle: {
|
|
|
+ // size: 'width:348px;height:200px;',
|
|
|
+ // version: '原版',
|
|
|
+ // position: 'top:550px;left:10px;',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // deviceType: '1709773300489031682',
|
|
|
+ // moduleName: '泵站检测详情',
|
|
|
+ // pageType: 'gasPumpMonitor',
|
|
|
+ // moduleData: {
|
|
|
+ // header: {
|
|
|
+ // show: false,
|
|
|
+ // readFrom: '',
|
|
|
+ // selector: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // slot: {
|
|
|
+ // show: false,
|
|
|
+ // value: '',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // background: {
|
|
|
+ // show: false,
|
|
|
+ // type: 'image',
|
|
|
+ // link: '',
|
|
|
+ // },
|
|
|
+ // layout: {
|
|
|
+ // direction: 'column',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // name: 'list',
|
|
|
+ // basis: '100%',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // complex_list: [],
|
|
|
+ // chart: [],
|
|
|
+ // table: [],
|
|
|
+ // gallery: [],
|
|
|
+ // list: [
|
|
|
+ // {
|
|
|
+ // type: 'K',
|
|
|
+ // readFrom: '',
|
|
|
+ // items: [
|
|
|
+ // {
|
|
|
+ // label: '701004传感器的值',
|
|
|
+ // value: '${701004.readData.value}',
|
|
|
+ // color: 'blue',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // gallery_list: [],
|
|
|
+ // preset: [],
|
|
|
+ // to: '',
|
|
|
+ // },
|
|
|
+ // showStyle: {
|
|
|
+ // size: 'width:348px;height:490px;',
|
|
|
+ // version: '原版',
|
|
|
+ // position: 'top:30px;right:0px;',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // ]);
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- @import '/@/design/theme.less';
|
|
|
- @import '/@/design/vent/modal.less';
|
|
|
- @import '../../comment/less/workFace.less';
|
|
|
- @ventSpace: zxm;
|
|
|
+@import '/@/design/theme.less';
|
|
|
+@import '/@/design/vent/modal.less';
|
|
|
+@import '../../comment/less/workFace.less';
|
|
|
+@ventSpace: zxm;
|
|
|
+
|
|
|
+.elementContent {
|
|
|
+ :deep(.main-container) {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 690px;
|
|
|
+ padding: 10px 12px 10px 15px;
|
|
|
+ border: 1px solid #d3e1ff33;
|
|
|
+ background-color: #061c2a55;
|
|
|
+ box-shadow: 0 0 15px #3b567f55;
|
|
|
+ background-color: #38383833;
|
|
|
|
|
|
- .elementContent {
|
|
|
- :deep(.main-container) {
|
|
|
+ .gas-monitor-row {
|
|
|
display: flex;
|
|
|
+ flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
- width: 690px;
|
|
|
- padding: 10px 12px 10px 15px;
|
|
|
- border: 1px solid #d3e1ff33;
|
|
|
- background-color: #061c2a55;
|
|
|
- box-shadow: 0 0 15px #3b567f55;
|
|
|
- background-color: #38383833;
|
|
|
- .gas-monitor-row {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
- color: #fff;
|
|
|
- line-height: 32px;
|
|
|
- .title {
|
|
|
- width: 250px;
|
|
|
- color: #baeaff;
|
|
|
- }
|
|
|
- .value {
|
|
|
- width: 80px;
|
|
|
- color: #efae05;
|
|
|
- }
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 250px;
|
|
|
+ color: #baeaff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ width: 80px;
|
|
|
+ color: #efae05;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .modal-monitor-box {
|
|
|
- background-color: #000;
|
|
|
- color: #fff;
|
|
|
- padding: 0 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .title {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- .signal-round {
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- .value {
|
|
|
- width: 30px;
|
|
|
- color: #efae05;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-monitor-box {
|
|
|
+ background-color: #000;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
- .device-state {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- color: #e90000;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
+
|
|
|
+ .signal-round {
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
- .lr {
|
|
|
- margin-top: 0 !important;
|
|
|
+ .value {
|
|
|
+ width: 30px;
|
|
|
+ color: #efae05;
|
|
|
}
|
|
|
- .left-box {
|
|
|
- width: 360px !important;
|
|
|
- direction: rtl;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- height: calc(100% - 60px);
|
|
|
- margin-top: 30px !important;
|
|
|
-
|
|
|
- .left-container {
|
|
|
- direction: ltr;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.device-state {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ color: #e90000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.lr {
|
|
|
+ margin-top: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.left-box {
|
|
|
+ width: 360px !important;
|
|
|
+ direction: rtl;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ margin-top: 30px !important;
|
|
|
+
|
|
|
+ .left-container {
|
|
|
+ direction: ltr;
|
|
|
}
|
|
|
- .right-box {
|
|
|
- width: 350px !important;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- .environment-monitor {
|
|
|
- .item {
|
|
|
- flex: 1;
|
|
|
- margin: 0 5px;
|
|
|
- .title {
|
|
|
- color: #7ae5ff;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
- .num {
|
|
|
- width: 100%;
|
|
|
- height: 30px;
|
|
|
- text-align: center;
|
|
|
- border-top: 2px solid #50c8fc;
|
|
|
- border-radius: 4px;
|
|
|
- background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.right-box {
|
|
|
+ width: 350px !important;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+ .environment-monitor {
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 5px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #7ae5ff;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 2px;
|
|
|
}
|
|
|
- }
|
|
|
- .pool-box {
|
|
|
- width: 327px;
|
|
|
- height: 65px;
|
|
|
- padding: 0 5px;
|
|
|
- background: url('/@/assets/images/vent/pump1.png') no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-origin: content-box;
|
|
|
- margin-top: 2px;
|
|
|
+
|
|
|
.num {
|
|
|
- color: aqua;
|
|
|
- }
|
|
|
- .center {
|
|
|
- padding-right: 5px;
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ border-top: 2px solid #50c8fc;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .player-box {
|
|
|
- position: absolute;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- padding: 0 20px 0 20px;
|
|
|
- z-index: 9999;
|
|
|
- display: flex;
|
|
|
- align-items: end;
|
|
|
- bottom: 80px;
|
|
|
- :deep(#LivePlayerBox) {
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
+
|
|
|
+ .pool-box {
|
|
|
+ width: 327px;
|
|
|
+ height: 65px;
|
|
|
+ padding: 0 5px;
|
|
|
+ background: url('/@/assets/images/vent/pump1.png') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-origin: content-box;
|
|
|
+ margin-top: 2px;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center {
|
|
|
+ padding-right: 5px;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .input-box {
|
|
|
- width: calc(100%);
|
|
|
+.player-box {
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: end;
|
|
|
+ bottom: 80px;
|
|
|
+
|
|
|
+ :deep(#LivePlayerBox) {
|
|
|
display: flex;
|
|
|
- flex-direction: row !important;
|
|
|
- flex-wrap: wrap !important;
|
|
|
- .input-item {
|
|
|
- width: calc(50% - 8px);
|
|
|
- padding: 0 2px;
|
|
|
-
|
|
|
- &:nth-child(2n) {
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
+ justify-content: end;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.input-box {
|
|
|
+ width: calc(100%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row !important;
|
|
|
+ flex-wrap: wrap !important;
|
|
|
+
|
|
|
+ .input-item {
|
|
|
+ width: calc(50% - 8px);
|
|
|
+ padding: 0 2px;
|
|
|
+
|
|
|
+ &:nth-child(2n) {
|
|
|
+ margin-left: 4px;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.btn-group {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .btn-item {
|
|
|
+ width: 82px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.top-btn {
|
|
|
.btn-group {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
.btn-item {
|
|
|
- width: 82px;
|
|
|
- text-align: center;
|
|
|
+ width: calc(50% - 16px);
|
|
|
+ margin: 0 4px;
|
|
|
}
|
|
|
}
|
|
|
- .top-btn {
|
|
|
- .btn-group {
|
|
|
- margin-bottom: 8px;
|
|
|
- .btn-item {
|
|
|
- width: calc(50% - 16px);
|
|
|
- margin: 0 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- .control-item {
|
|
|
- margin-left: 10px;
|
|
|
- margin-bottom: 8px;
|
|
|
- display: flex;
|
|
|
- .control-title {
|
|
|
- width: 80px;
|
|
|
- color: var(--vent-font-action-link);
|
|
|
- }
|
|
|
- .control-container {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-box {
|
|
|
+
|
|
|
+ .control-item {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 8px;
|
|
|
display: flex;
|
|
|
- .btn {
|
|
|
- padding: 0 8px !important;
|
|
|
- margin: 0 2px;
|
|
|
+
|
|
|
+ .control-title {
|
|
|
+ width: 80px;
|
|
|
+ color: var(--vent-font-action-link);
|
|
|
}
|
|
|
- }
|
|
|
- .state-header {
|
|
|
- display: flex;
|
|
|
- color: var(--vent-font-action-link);
|
|
|
- .header-item {
|
|
|
- width: 25%;
|
|
|
- text-align: center;
|
|
|
+
|
|
|
+ .control-container {
|
|
|
+ display: flex;
|
|
|
}
|
|
|
}
|
|
|
- .device-row {
|
|
|
- display: flex;
|
|
|
- margin-top: 10px;
|
|
|
- .state {
|
|
|
- width: 25%;
|
|
|
- text-align: center;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-box {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ padding: 0 8px !important;
|
|
|
+ margin: 0 2px;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.state-header {
|
|
|
+ display: flex;
|
|
|
+ color: var(--vent-font-action-link);
|
|
|
|
|
|
- :deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
- overflow: auto;
|
|
|
+ .header-item {
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- :deep(.list-item__background) {
|
|
|
- background-image: linear-gradient(to right, #39deff15, #3977e500) !important;
|
|
|
- line-height: 30px !important;
|
|
|
- height: 30px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.device-row {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.list-item__background) {
|
|
|
+ background-image: linear-gradient(to right, #39deff15, #3977e500) !important;
|
|
|
+ line-height: 30px !important;
|
|
|
+ height: 30px !important;
|
|
|
+}
|
|
|
</style>
|
