vent-template/src/views/vent/monitorManager/compressor/components/nitrogenHome_ln.vue

<template>
  <div class="zd-model">
    <ModelTip :modelType="moduleTypeName" :statusData="monitorData"></ModelTip>
  </div>
  <div class="nitrogen-home">
    <div class="nitrogen-container">
      <!-- <div v-if="monitorNetStatus == 0" class="device-state">网络断开</div> -->
      <div class="top-box">
        <!-- 左边监测数据 -->
        <div class="lr-box left-box">
          <template v-if="moduleTypeName == 'KYJ'">
            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupKyjL" :key="index">
              <ventBox1>
                <template #title>
                  <div>{{ groupNum }}号压风机</div>
                </template>
                <template #container>
                  <div class="monitor-box">
                    <div class="parameter-title group-parameter-title">
                      <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
                    </div>
                    <div class="state-item">
                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
                        <span class="state-title">{{
                          preFan.title + (preFan.unit && 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[0], prefix[0] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
                            : preFan.value
                              ? preFan.value
                              : '-'
                        }}</span>
                        <span v-else :class="{
                          'signal-round': true,
                          '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 class="monitor-box">
                    <div class="parameter-title device-parameter-title">
                      <SvgIcon class="icon" size="32" name="device-paramer" /><span>电机数据</span>
                    </div>
                    <div class="state-item">
                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorDjData" :key="preFanIndex">
                        <span class="state-title">{{
                          preFan.title + (preFan.unit && 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[0], prefix[0] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
                            : preFan.value
                              ? preFan.value
                              : '-'
                        }}</span>
                        <span v-else :class="{
                          'signal-round': true,
                          '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>
                </template>
              </ventBox1>
            </div>
          </template>
          <template v-else>
            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupZdjL" :key="index">
              <ventBox1>
                <template #title>
                  <div>{{ groupNum }}号压风机</div>
                </template>
                <template #container>
                  <div class="monitor-box">
                    <div class="parameter-title group-parameter-title">
                      <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
                    </div>
                    <div class="state-item">
                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
                        <span class="state-title">{{
                          preFan.title + (preFan.unit && 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[0], prefix[0] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
                            : preFan.value
                              ? preFan.value
                              : '-'
                        }}</span>
                        <span v-else :class="{
                          'signal-round': true,
                          '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 class="monitor-box">
                    <div class="parameter-title device-parameter-title">
                      <SvgIcon class="icon" size="32" name="device-paramer" /><span>电机数据</span>
                    </div>
                    <div class="state-item">
                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorDjData" :key="preFanIndex">
                        <span class="state-title">{{
                          preFan.title + (preFan.unit && 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[0], prefix[0] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
                            : preFan.value
                              ? preFan.value
                              : '-'
                        }}</span>
                        <span v-else :class="{
                          'signal-round': true,
                          '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>
                </template>
              </ventBox1>
            </div>
          </template>
        </div>
        <!-- 右边控制状态 -->
        <div class="lr-box right-box">
          <template v-if="moduleTypeName == 'KYJ'">
            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupKyjR" :key="index">
              <ventBox1>
                <template #title>
                  <div>3号压风机</div>
                </template>
                <template #container>
                  <div class="monitor-box">
                    <div class="parameter-title group-parameter-title">
                      <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
                    </div>
                    <div class="state-item">
                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
                        <span class="state-title">{{
                          preFan.title + (preFan.unit && 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[0], prefix[0] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
                            : preFan.value
                              ? preFan.value
                              : '-'
                        }}</span>
                        <span v-else :class="{
                          'signal-round': true,
                          '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 class="monitor-box">
                    <div class="parameter-title device-parameter-title">
                      <SvgIcon class="icon" size="32" name="device-paramer" /><span>电机数据</span>
                    </div>
                    <div class="state-item">
                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorDjData" :key="preFanIndex">
                        <span class="state-title">{{
                          preFan.title + (preFan.unit && 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[0], prefix[0] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[0], prefix[0] + groupNum)]))
                            : preFan.value
                              ? preFan.value
                              : '-'
                        }}</span>
                        <span v-else :class="{
                          'signal-round': true,
                          '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>
                </template>
              </ventBox1>
            </div>
          </template>
          <template v-else>
            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroupZdjR" :key="index">
              <ventBox1>
                <template #title>
                  <div>{{ groupNum }}号制氮机</div>
                </template>
                <template #container>
                  <div class="monitor-box">
                    <div class="parameter-title group-parameter-title">
                      <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>机组参数</span>
                    </div>
                    <div class="state-item">
                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorDataZD" :key="preFanIndex">
                        <span class="state-title">{{
                          preFan.title + (preFan.unit && 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-run':
                            preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[1], `${prefix[1]}${groupNum}`)] != '1',
                          'signal-round-warning':
                            preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[1], `${prefix[1]}${groupNum}`)] == '1',
                          'signal-round-gry': monitorData[preFan.code.replace(prefix[1], `${prefix[1]}${groupNum}`)] != '1',
                        }"></span>
                      </div>
                    </div>
                  </div>

                </template>
              </ventBox1>
            </div>
          </template>
          <!-- <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>设备实时监测曲线</div>
            </template>
            <template #container>
              <BarAndLineCustom xAxisPropType="readTime" :chartData="monitorData" height="240px"
                :propTypeArr="['flowRate']" :option="zhudanOption" />
            </template>
          </ventBox1> -->
          <div class="vent-margin-t-10">
            <!-- <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls /> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="nitrogenHome">
import { computed, onMounted, onUnmounted, ref, watch, reactive, nextTick, watchEffect } from 'vue';
import ventBox1 from '/@/components/vent/ventBox1.vue';
import { list } from '../nitrogen.api';
import { SvgIcon } from '/@/components/Icon';
import LivePlayer from '@liveqing/liveplayer-v3';
import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
import { zhudanOption } from '../nitrogen.data.ts';
import {  preFanMonitorDataZD, prefix, preFanMonitorData, preFanMonitorDjData } from '../nitrogen.data.ln'
import { formatNum } from '/@/utils/ventutil';
import ModelTip from './model-tip.vue'


const props = defineProps({
  deviceId: {
    type: String,
    require: true,
  },
  modalType: {
    type: String,
    require: true,
  },
  moduleTypeName: {
    type: String,
    default: ''
  }
});

const monitorDataGroupKyjL = ref(2)
const monitorDataGroupKyjR = ref(1)
const monitorDataGroupZdjL = ref(2)
const monitorDataGroupZdjR = ref(2)

const loading = ref(true);

const flvURL1 = () => {
  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
  // return ''
};
const monitorNetStatus = ref(0);

const monitorData = reactive({});

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
async function getMonitor(flag?) {
  if (Object.prototype.toString.call(timer) === '[object Null]') {
    timer = await setTimeout(
      async () => {
        if (props.deviceId) {
          await getDataSource(props.deviceId);
        }
        if (timer) {
          timer = null;
        }
        await getMonitor();
      },
      flag ? 0 : 1000
    );
  }
}

async function getDataSource(systemID) {
  const res = await list({ devicetype: 'sys',systemID:'',  type: 'all' });
  const result = res.msgTxt;
  if (!result || result.length < 1) return;
  let dataSource: any = [];
  if (props.moduleTypeName == 'KYJ') {
    dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[1] : {};
  } else {
    dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : {};
  }

  if (dataSource) {
    Object.assign(monitorData, dataSource, dataSource.readData);
  }
}

onMounted(async () => {
  await getMonitor(true);
});

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>

<style lang="less" scoped>
@ventSpace: zxm;

.zd-model {
  // width: calc(100% - 695px);
  // height: calc(100% - 100px);
  width: calc(100% - 705px);
  height: calc(100% - 110px);
  position: absolute;
  left: 365px;
  top: 90px;
  padding-right: 25px;
  box-sizing: border-box;
}

// .nitrogen-box {
//   width: 100%;
//   height: 100%;
//   display: flex;
//   justify-content: center;
// }

// #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: 60px;

  .nitrogen-container {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;

    .device-state {
      width: 100%;
      position: absolute;
      top: 70px;
      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 {
        //height: fit-content;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        z-index: 9999;
        pointer-events: auto;
        overflow-y: auto;
        transform: scaleX(-1);
      }

      .item {
        width: 335px;
        height: auto;
        position: relative;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 0px;
        pointer-events: auto;
        color: #fff;
        transform: scaleX(-1);
        //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;
          }
        }

        .state-item {
          display: flex;
          flex-direction: row;
          padding: 5px;
          flex-wrap: wrap;

          .item-col {
            width: calc(50% - 5px);
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: 4px;
            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);

            // &:first-child {
            //   margin-right: 10px;
            // }

            .state-title {
              color: #ffffffcc;
              flex: 9;
              font-size: 14px;
            }

            .state-val {
              flex: 1;
              color: #00eefffe;
              margin-right: 5px;
              text-align: right;
              font-size: 14px;
            }
          }
        }

        .signal-box {
          margin: 5px 0;
          display: flex;
          align-items: center;

          .signal-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: 330px;
        margin-top: 50px;

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

      .left-box {
        width: 365px;
        margin-top: 45px;
      }
    }

    &:deep(.win) {
      width: 100%;
      margin: 0 !important;
    }
  }
}

// &:deep(.main) {
//   .title {
//     height: 34px;
//     text-align: center;
//     font-weight: 600;
//     color: #7af5ff;
//     // background-image: url('../../../assets/img/yfj/light.png');
//     background-repeat: no-repeat;
//     background-position-x: center;
//     background-position-y: 100%;
//     background-size: 80%;
//     font-size: 16px;
//   }

//   .monitor-item {
//     width: 200px;
//     display: flex;
//     flex-direction: row;
//     width: auto;
//     margin-bottom: 3px;

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

:deep(.zxm-radio-wrapper) {
  color: #fff !important;
}
</style>