|
|
@@ -0,0 +1,537 @@
|
|
|
+<template>
|
|
|
+ <div class="monitor-container">
|
|
|
+ <div class="area-box lr-box">
|
|
|
+ <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>注浆站输出监测</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <div class="monitor-box">
|
|
|
+ <div class="monitor-item">
|
|
|
+ <div class="state-item" v-for="(preFan, index) in groutFanMonitorDataHlg" :key="index">
|
|
|
+ <div class="state-title">{{ preFan.title }}</div>
|
|
|
+ <div v-if="preFan.unit !== 'signal'" class="state-val">{{
|
|
|
+ monitorData[preFan.code] >= 0 ? formatNum(Number(monitorData[preFan.code])) : '-'
|
|
|
+ }}</div>
|
|
|
+ <div
|
|
|
+ v-else-if="preFan.code=='Running'"
|
|
|
+ :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-warning': monitorData[preFan.code] == '0',
|
|
|
+ 'signal-round-run': monitorData[preFan.code] == '1',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ :class="{
|
|
|
+ 'signal-round': true,
|
|
|
+ 'signal-round-warning': monitorData[preFan.code] == '1',
|
|
|
+ 'signal-round-run': monitorData[preFan.code] == '0',
|
|
|
+ 'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="header-box">
|
|
|
+ <div class="header-container">
|
|
|
+ <div class="device-detail">
|
|
|
+ <div class="device-title"> </div>
|
|
|
+ <div class="device-val">故障代码</div>
|
|
|
+ <div class="device-val">警告代码</div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(device, key) in deviceMonitorListHlg" class="device-detail" :key="key">
|
|
|
+ <div class="device-title">{{ device.title }}</div>
|
|
|
+ <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
|
|
|
+ <span v-if="index == 0" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
|
|
|
+ monitorData[detailItem.code]
|
|
|
+ }}</span>
|
|
|
+ <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
|
|
|
+ monitorData[detailItem.code]
|
|
|
+ }}</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div ref="playerRef" style="z-index: 9999; position: absolute; top: 0px; right: 15px; height: 100%; margin: auto; pointer-events: none"> </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script setup lang="ts">
|
|
|
+ import { watch, ref, onMounted, onUnmounted, defineProps, reactive } from 'vue';
|
|
|
+ import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
+ import { mountedThree, destroy, setModelType } from '../grout.threejs';
|
|
|
+ import { formatNum } from '/@/utils/ventutil';
|
|
|
+ import { deviceMonitorListHlg, groutFanMonitorDataHlg } from '../grout.data';
|
|
|
+ import { list } from '../grout.api';
|
|
|
+ import { useCamera } from '/@/hooks/system/useCamera';
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ deviceId: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ deviceType: {
|
|
|
+ type: String,
|
|
|
+ require: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ let monitorDataGroupNum = ref(1);
|
|
|
+
|
|
|
+ const loading = ref(false);
|
|
|
+ const monitorData = ref({});
|
|
|
+
|
|
|
+ const playerRef = 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) {
|
|
|
+ await getDataSource(props.deviceId);
|
|
|
+ }
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ resolve(null);
|
|
|
+ await getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function getDataSource(systemID) {
|
|
|
+ const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
|
|
|
+ if(res && res.result.msgTxt[0]){
|
|
|
+ const result = res.result.msgTxt[0];
|
|
|
+ if (result.type.startsWith('pulping')) {
|
|
|
+ monitorData.value = Object.assign(result['datalist'][0], result['datalist'][0]['readData']);
|
|
|
+ }
|
|
|
+ loading.value = false;
|
|
|
+ }else {
|
|
|
+ monitorData.value={}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.deviceId,
|
|
|
+ async (deviceId) => {
|
|
|
+ if (deviceId) {
|
|
|
+ await getCamera(deviceId, playerRef.value, 'pulping');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getMonitor(true)?.then(async () => {
|
|
|
+ if (props.deviceId) await getCamera(props.deviceId, playerRef.value, 'pulping');
|
|
|
+ });
|
|
|
+ loading.value = true;
|
|
|
+ mountedThree().then(async () => {
|
|
|
+ // await setModelType('groutBase');
|
|
|
+ await setModelType('bertaiBase');
|
|
|
+ loading.value = false;
|
|
|
+ timer = null;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ onUnmounted(() => {
|
|
|
+ destroy();
|
|
|
+ removeCamera();
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <style lang="less" scoped>
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+ @import '/@/design/vent/modal.less';
|
|
|
+ @ventSpace: zxm;
|
|
|
+
|
|
|
+ @{theme-deepblue} {
|
|
|
+ .monitor-container {
|
|
|
+ --box-shadow: #316b92;
|
|
|
+ --border-color: #0a80fad4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .monitor-container {
|
|
|
+ --box-shadow: #0099b8;
|
|
|
+ --border-color: #00baffd4;
|
|
|
+ position:relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // height: 550px;
|
|
|
+ // border: 1px solid #fff;
|
|
|
+ margin-top: 80px;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // justify-content: center;
|
|
|
+ padding: 0 5px;
|
|
|
+
|
|
|
+ .header-box {
|
|
|
+ position:absolute;
|
|
|
+ bottom:20px;
|
|
|
+ left:50%;
|
|
|
+ transform:translate(-50%,0%);
|
|
|
+ // margin: 50px 15px 0px 15px;
|
|
|
+
|
|
|
+ .header-container {
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0 0 30px var(--box-shadow) inset;
|
|
|
+ margin-top: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-title {
|
|
|
+ width: 130px;
|
|
|
+ text-align: center;
|
|
|
+ border-top: 1px solid var(--border-color);
|
|
|
+ border-left: 1px solid var(--border-color);
|
|
|
+ line-height: 46px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ background-color: #00bbff21;
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-detail {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ background-color: #00bbff11;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ .device-val,
|
|
|
+ .device-title {
|
|
|
+ border-right: 1px solid var(--border-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-val {
|
|
|
+ line-height: 36px;
|
|
|
+ border-top: 1px solid var(--border-color);
|
|
|
+ border-left: 1px solid var(--border-color);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-box {
|
|
|
+ width: 335px;
|
|
|
+ margin-top: 50px;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 305px;
|
|
|
+ height: 450px;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-round {
|
|
|
+ display: inline-block;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ // margin: 0 10px;
|
|
|
+ margin: 0 5px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ top: -2px;
|
|
|
+ left: -2px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-round-gry {
|
|
|
+ background-color: #858585;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ background-color: #85858544;
|
|
|
+ box-shadow: 0 0 1px 1px #85858599;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-round-run {
|
|
|
+ background-color: #67fc00;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ background-color: #67fc0044;
|
|
|
+ box-shadow: 0 0 1px 1px #c6ff77;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-round-warning {
|
|
|
+ background-color: #e9170b;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ background-color: #e9170b44;
|
|
|
+ box-shadow: 0 0 1px 1px #e9170b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.@{ventSpace}-tabs-tabpane-active) {
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 10px;
|
|
|
+
|
|
|
+ .input-title {
|
|
|
+ color: #73e8fe;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .@{ventSpace}-input-number {
|
|
|
+ border-color: #ffffff88 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
