gasInjection-project/src/views/vent/monitorManager/nitrogen/components/nitrogenHome.vue

<template>
  <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}`)])
                    : '-'
                }}</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.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[1]}${groupNum}`)]
                    ? formatNum(monitorData[cqgMonitor.code.replace(prefix[1], `${prefix[1]}${groupNum}`)])
                    : '-'
                }}</span
                ><span class="unit">{{ cqgMonitor.unit }}</span></span
              >
            </div>
          </template>
        </fourBorderBg>
      </div>
    </div>
  </div>
  <div class="nitrogen-home">
    <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex" v-if="monitorDataGroupArr.length > 1">
      <div
        v-for="(sysItem, sysIndex) in monitorDataGroupArr"
        :key="sysIndex"
        class="tab-button-box"
        :class="{ 'tab-button-box-active': monitorDataGroupFlag == sysIndex + 1 }"
        @click="setMonitorGroupNum(sysIndex + 1)"
        >{{ '压风系统' + (sysIndex + 1) }}
        <!-- (运行: <p style="padding: 0 5px"></p
        ><span
          :class="{
            'signal-round': true,
            'signal-round-run': sysStateList[sysIndex] && sysStateList[sysIndex].isRun,
            'signal-round-gry': sysStateList[sysIndex] && !sysStateList[sysIndex].isRun,
          }"
        ></span>
        <p style="padding: 0 5px"></p>故障:<p style="padding: 0 5px"></p
        ><span
          :class="{
            'signal-round': true,
            'signal-round-warning': sysStateList[sysIndex] && sysStateList[sysIndex].fault,
            'signal-round-gry': sysStateList[sysIndex] && !sysStateList[sysIndex].fault,
          }"
        ></span
        ><p style="padding: 0 5px"></p> ) -->
      </div>
    </div>
    <div class="total-data">
      <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]) : '-'
          }}</span></div
        >
      </div>
    </div>
    <div class="nitrogen-container">
      <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
      <div class="top-box">
        <!-- 左边监测数据 -->
        <div class="lr-box left-box">
          <div class="left-container" v-if="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[2], prefix[2] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[2], prefix[2] + groupNum)]))
                            : '-'
                        }}</span>
                        <span
                          v-else
                          :class="{
                            'signal-round': true,
                            'signal-round-run':
                              preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] != '1',
                            'signal-round-warning':
                              preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] == '1',
                            'signal-round-gry': monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] != '1',
                          }"
                        ></span>
                      </div>
                    </div>
                  </template>
                </ventBox1>
              </div>
            </div>
          </div>
        </div>
        <div class="lr-box right-box">
          <div class="right-container" v-if="(btnSet && btnSet.length > 0) || (controlSet && controlSet.length > 0)">
            <ventBox1>
              <template #title>
                <div>设备控制</div>
              </template>
              <template #container>
                <div class="vent-flex-row btn-box" v-if="btnSet">
                  <div class="btn btn1 ml-16px" v-for="(btn, index) in btnSet" :key="index">{{ btn.title }}</div>
                </div>
                <template v-if="controlSet">
                  <div class="input-item" v-for="(item, index) in controlSet" :key="index">
                    <div class="title-auto">{{ item.title }}：</div>
                    <div>
                      <a-input class="input-value" v-model="item.value" />
                      <span class="btn btn1 vent-margin-l-8">保存</span>
                    </div>
                  </div>
                </template>
              </template>
            </ventBox1>
          </div>
        </div>
        <div ref="playerRef" class="playerBox"> </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="nitrogenHome">
  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 { getMonitorData } from '../nitrogen.data.1';
  import type { State } from '../nitrogen.data.1';
  import { formatNum } from '/@/utils/ventutil';
  import { useCamera } from '/@/hooks/system/useCamera';

  const { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix, getSysState, totalData, btnSet, controlSet } =
    await getMonitorData();
  const loading = ref(true);
  const monitorDataGroupFlag = ref(1);
  const monitorDataGroup = ref<Number[]>([]);
  const kyjs = ref<string[]>([]);
  const cqgs = ref<string[]>([]);
  const monitorData = ref<Object | []>({});
  const sysStateList = ref<State[]>([]);
  const playerRef = ref();

  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 () => {
            await getDataSource();
            if (timer) {
              timer = null;
            }
            resolve(null);
            await getMonitor(false);
          },
          flag ? 0 : 1000
        );
      });
    }
  }

  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] : [];
    if (dataSource) {
      Object.assign(monitorData.value, dataSource, dataSource.readData);
    }
    loading.value = false;
    sysStateList.value = getSysState(monitorData.value);
  }

  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.value);
        });
      });
    }, 0);
  });
  onBeforeUnmount(() => {
    removeCamera();
  });
  onUnmounted(() => {
    destroy();
    removeCamera();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>

<style lang="less" scoped>
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;
  .compressorCss3D-box {
    .modal-monitor {
      position: absolute;
      left: 0px;
      top: 0px;
    }

    &:deep(.win) {
      margin: 0 !important;
      background: #00000044;
    }

    &: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 {
        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;
          }
        }
      }

      .monitor-title {
        width: 100px;
        color: #7af5ff;
        font-weight: 400;
        font-size: 14px;
      }

      .signal-item {
        display: flex;
        justify-content: space-between;

        // margin-bottom: 5px;
        .signal-round {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin: 0 10px;
          position: relative;

          &::after {
            display: block;
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            top: -2px;
            left: -2px;
            border-radius: 50%;
          }
        }

        .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;
          }
        }
      }
    }
  }

  .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 {
        width: 200px;
        margin-left: 30px;
        .val {
          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;
            }
          }
        }

        .right-box {
          width: 330px;
          margin-top: 60px;
          .control-group {
            display: flex;
            // justify-content: space-around;
            flex-wrap: wrap;
            .control-item {
              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;
              }
            }
          }
          .control-btn-group {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .control-left-box {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 0 20px;
              .btn-box {
                width: 100px;
                color: #fff;
                display: flex;
                justify-content: space-between;
                span {
                  display: inline-block;
                  padding: 2px 8px;
                  background: #007099;
                  border-radius: 4px;
                  border: 1px solid rgb(125, 230, 249);
                  cursor: pointer;
                  &:hover {
                    background: #005574;
                  }
                }
              }
              .icon-box {
                width: 60px;
                height: 60px;
                border-radius: 30px;
                border: 2px solid #00bcdd;
                box-shadow: 0 0 20px #ffffff88;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 20px;

                .icon {
                  width: 18px;
                  height: 18px;
                  border-radius: 9px;
                  border: 3px solid #d7f9ff;
                  position: relative;
                  background: #00bcdd;
                  &::before {
                    position: absolute;
                    content: '';
                    width: 2px;
                    height: 12px;
                    background-color: #00bcdd;
                    left: 6px;
                    top: -16px;
                  }
                  &::after {
                    position: absolute;
                    content: '';
                    width: 2px;
                    height: 12px;
                    left: 6px;
                    top: 17px;
                    background-color: #00d9ff;
                  }
                }
              }
              .remote-icon-box {
                transform: rotate(30deg);
                animation: iconRotate 1s linear;
              }
              .remote-icon-box1 {
                transform: rotate(-30deg);
                animation: iconRotate1 1s linear;
              }

              @keyframes iconRotate {
                from {
                  transform: rotate(-30deg);
                }
                to {
                  transform: rotate(30deg);
                }
              }
              @keyframes iconRotate1 {
                from {
                  transform: rotate(30deg);
                }
                to {
                  transform: rotate(-30deg);
                }
              }
            }
            .control-right-box {
              width: 100px;
              color: #fff;
              height: 80px;
              justify-content: space-between;
              align-items: center;
              .btn {
                margin-bottom: 30px;
              }
            }
          }
        }

        .left-box {
          height: calc(100%);
          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: 100%;
      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;
      }
    }
    .tab-button-box {
      display: inline-block;
      position: relative;
      padding: 5px;
      // border: 1px transparent solid;
      border-radius: 5px;
      margin-left: 8px;
      margin-right: 8px;
      width: auto;
      // height: 40px;
      // border: 1px solid #65dbea;
      height: 35px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 0 15px 5px 15px;
      cursor: pointer;
      &:hover {
        background: linear-gradient(#2cd1ff55, #1eb0ff55);
      }
      &::before {
        width: calc(100% - 6px);
        height: 27px;
        content: '';
        position: absolute;
        top: 3px;
        right: 0;
        left: 3px;
        bottom: 0;
        z-index: -1;
        border-radius: inherit; /*important*/
        background: linear-gradient(#1fa6cb, #127cb5);
      }
      &::after {
        width: calc(100% + 32px);
        height: 10px;
        content: '';
        position: absolute;
        top: 28px;
        right: 0;
        left: -16px;
        bottom: 0;
        z-index: -1;
        border-radius: inherit; /*important*/
        background: url('/@/assets/images/vent/short-light.png') no-repeat;
        background-position: center;
        background-size: 100%;
        z-index: 999;
      }
    }

    .tab-button-box-active {
      border: 1px solid #66989e !important;
      &:hover {
        background: none !important;
      }
      &::before {
        background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
      }
    }
  }
  .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;

    &::before {
      background-image: linear-gradient(#b02533, #a31f2e);
    }

    &:hover {
      &::before {
        background-image: linear-gradient(#bd2e3ccc, #a31f2ecc);
      }
    }
  }
</style>