mky-vent-base/src/views/vent/monitorManager/compressor/components/nitrogenHomeNew.vue

<template>
  <div
    id="nitrogenCss3D"
    class="threejs-Object-CSS"
    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
  >
    <a-spin :spinning="loading" />
    <template>
      <div
        v-for="card in floatCards"
        :key="card.id"
        :id="card.domId"
        class="modal-monitor model-float-card"
        :style="{ visibility: moduleTypeName === 'ZDJ' ? 'visible' : 'hidden' }"
      >
        <fourBorderBg>
          <div class="title">{{ card.title }}</div>
          <div class="monitor-item" v-for="param in card.params" :key="param.code">
            <span class="monitor-title">{{ param.unit ? `${param.label}(${param.unit})` : param.label }}:</span>
            <span class="monitor-val"
              ><span class="val">{{ param.value }}</span></span
            >
          </div>
        </fourBorderBg>
      </div>
    </template>
  </div>
  <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
  <div class="nitrogen-home">
    <div class="nitrogen-container">
      <div class="top-box">
        <!-- 左边监测数据 -->
        <div class="lr-box left-box" :class="{ 'left-box-kyj': moduleTypeName === 'KYJ', 'left-box-zdj': moduleTypeName === 'ZDJ' }">
          <div class="item item-l" v-for="card in unitCards" :key="card.id">
            <ventBox1>
              <template #title>
                <div>{{ card.title }}</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="parameter-scroll">
                    <div class="state-item" v-for="(row, index) in card.rows" :key="index">
                      <div class="item-col" v-for="param in row" :key="param.code">
                        <span class="state-title">{{ param.unit ? `${param.label}(${param.unit})` : param.label }} :</span>
                        <span class="state-val">{{ param.value }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </ventBox1>
          </div>
        </div>
        <!-- 右边监测曲线：空压机房不展示 -->
        <div class="lr-box right-box" v-if="moduleTypeName !== 'KYJ'">
          <ventBox1>
            <template #title>
              <div>设备实时监测曲线</div>
            </template>
            <template #container>
              <BarAndLineCustom xAxisPropType="readTime" :chartData="flowChartData" height="240px" :propTypeArr="['flowRate']" :option="flowChartOption" />
            </template>
          </ventBox1>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="nitrogenHome">
  import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
  import { mountedThree, destroy, attachMonitorCards } from '../nitrogen.threejs';
  import { list } from '../nitrogen.api';
  import { SvgIcon } from '/@/components/Icon';
  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
  import { zhudanOption } from '../nitrogen.data';

  interface PointField {
    code: string;
    label: string;
    unit: string;
  }

  interface UnitParam {
    code: string;
    label: string;
    value: string;
    unit: string;
  }

  interface UnitCard {
    id: string;
    title: string;
    rows: UnitParam[][];
  }

  interface FlowPoint {
    readTime: string;
    flowRate: number;
  }

  interface FloatCard {
    id: string;
    domId: string;
    title: string;
    params: UnitParam[];
  }

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

  const nitrogenFields: PointField[] = [
    { code: 'dqyl', label: '氮气压力', unit: 'MPa' },
    { code: 'ysj_cw', label: '压缩机出温', unit: '℃' },
    { code: 'ysj_jw', label: '压缩机进温', unit: '℃' },
    { code: 'ld_wd', label: '露点温度', unit: '℃' },
    { code: 'jrqx_wd', label: '加热器温度', unit: '℃' },
    { code: 'lgj_ckyl', label: '冷干机出口压力', unit: 'MPa' },
    { code: 'lgj_rkyl', label: '冷干机入口压力', unit: 'MPa' },
    { code: 'ljyxsj', label: '累计运行时间', unit: 'h' },
    { code: 'bcljsj', label: '本次累计时间', unit: 'h' },
    { code: 'dqwd', label: '氮气温度', unit: '℃' },
    { code: 'ljll', label: '累计流量', unit: 'm³' },
    { code: 'bcljll', label: '本次累计流量', unit: 'm³' },
    { code: 'hyl', label: '含氧量', unit: '%' },
    { code: 'ssll', label: '瞬时流量', unit: 'm³/h' },
  ];

  const compressorFields: PointField[] = [
    { code: 'pqwd', label: '排气温度', unit: '℃' },
    { code: 'pqyl', label: '排气压力', unit: 'MPa' },
  ];

  const modelFloatFields: PointField[] = [
    { code: 'ljyxsj', label: '累计运行时间', unit: 'h' },
    { code: 'bcljsj', label: '本次累计时间', unit: 'h' },
    { code: 'dqwd', label: '氮气温度', unit: '℃' },
    { code: 'ljll', label: '累计流量', unit: 'm³' },
    { code: 'ssll', label: '瞬时流量', unit: 'm³/h' },
  ];

  const modelFloatCodes = modelFloatFields.map((field) => field.code);

  const unitCards = ref<UnitCard[]>([]);
  const floatCards = ref<FloatCard[]>(buildFloatCards({}));
  const flowChartData = ref<FlowPoint[]>([]);
  const flowPointLimit = 12;
  const flowYAxis = { ...zhudanOption.yAxis[0], min: 0 };
  delete flowYAxis.max;
  const flowChartOption = {
    ...zhudanOption,
    yAxis: [flowYAxis],
  };

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

  async function getReadData() {
    const res = await list({ devicetype: 'sys', systemID: props.deviceId, type: 'all' });
    const msgTxt = res?.msgTxt || [];
    const nitrogenBlock = msgTxt.find((item) => item.type === 'nitrogen_auto');
    return nitrogenBlock?.datalist?.[0]?.readData || {};
  }

  function toRows(params: UnitParam[]) {
    const rows: UnitParam[][] = [];
    for (let index = 0; index < params.length; index += 2) {
      rows.push(params.slice(index, index + 2));
    }
    return rows;
  }

  function readValue(readData: Record<string, string>, code: string) {
    const value = readData[code];
    if (value === undefined || value === null || value === '') return '-';
    return String(value);
  }

  function buildFloatCards(readData: Record<string, string>) {
    return [1, 2, 3].map((unitNo) => ({
      id: `float-jz${unitNo}`,
      domId: `nitrogenMonitor${unitNo}`,
      title: `${unitNo}号制氮机`,
      params: modelFloatFields.map((field) => ({
        code: `jz${unitNo}_${field.code}`,
        label: field.label,
        value: readValue(readData, `jz${unitNo}_${field.code}`),
        unit: field.unit,
      })),
    }));
  }

  function buildNitrogenCards(readData: Record<string, string>) {
    const unitNos = new Set<number>();
    Object.keys(readData).forEach((key) => {
      const matched = key.match(/^jz(\d+)_/);
      if (matched) unitNos.add(Number(matched[1]));
    });
    return Array.from(unitNos)
      .sort((prev, next) => prev - next)
      .map((unitNo) => {
        const params = nitrogenFields
          .filter((field) => !modelFloatCodes.includes(field.code))
          .map((field) => ({
          code: `jz${unitNo}_${field.code}`,
          label: field.label,
          value: readValue(readData, `jz${unitNo}_${field.code}`),
          unit: field.unit,
        }));
        return {
          id: `jz${unitNo}`,
          title: `${unitNo}号制氮机`,
          rows: toRows(params),
        };
      });
  }

  function buildCompressorCards(readData: Record<string, string>) {
    const unitNos = new Set<number>();
    Object.keys(readData).forEach((key) => {
      const matched = key.match(/^kyj_(\d+)h_/);
      if (matched) unitNos.add(Number(matched[1]));
    });
    return Array.from(unitNos)
      .sort((prev, next) => prev - next)
      .map((unitNo) => {
        const params = compressorFields.map((field) => ({
          code: `kyj_${unitNo}h_${field.code}`,
          label: field.label,
          value: readValue(readData, `kyj_${unitNo}h_${field.code}`),
          unit: field.unit,
        }));
        return {
          id: `kyj${unitNo}`,
          title: `${unitNo}号空压机`,
          rows: toRows(params),
        };
      });
  }

  function formatClock(date: Date) {
    const pad = (num: number) => String(num).padStart(2, '0');
    return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
  }

  function appendFlowPoint(readData: Record<string, string>) {
    const flowList = [1, 2, 3]
      .map((unitNo) => Number(readData[`jz${unitNo}_ssll`]))
      .filter((value) => !Number.isNaN(value));
    if (!flowList.length) return;
    const flowRate = Number(flowList.reduce((sum, value) => sum + value, 0).toFixed(2));
    const readTime = formatClock(new Date());
    const points = flowChartData.value.slice();
    const lastPoint = points[points.length - 1];
    if (lastPoint && lastPoint.readTime === readTime) {
      points[points.length - 1] = { readTime, flowRate };
      flowChartData.value = points;
      return;
    }
    flowChartData.value = points.concat({ readTime, flowRate }).slice(-flowPointLimit);
  }

  async function buildUnitCards() {
    const readData = await getReadData();
    floatCards.value = buildFloatCards(readData);
    if (props.moduleTypeName === 'KYJ') {
      unitCards.value = buildCompressorCards(readData);
    } else if (props.moduleTypeName === 'ZDJ') {
      unitCards.value = buildNitrogenCards(readData);
    } else {
      unitCards.value = [];
    }
    return readData;
  }

  async function getDataSource() {
    const readData = await buildUnitCards();
    if (props.moduleTypeName !== 'KYJ') {
      appendFlowPoint(readData);
    }
  }

  watch(
    () => props.moduleTypeName,
    () => {
      buildUnitCards();
    },
    { immediate: true }
  );

  onMounted(async () => {
    await getMonitor(true);
    await mountedThree('nitrogen_bjhz').then(() => {
      loading.value = false;
    });
    await nextTick();
    attachMonitorCards();
  });

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

<style lang="less" scoped>
  #nitrogenCss3D {
    .model-float-card {
      :deep(.win) {
        margin: 0;
      }
    }
    .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;
      .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;
        }

        .item {
          width: 335px;
          height: auto;
          position: relative;
          border-radius: 5px;
          margin-top: 10px;
          margin-bottom: 0px;
          pointer-events: auto;
          color: #fff;
          overflow: hidden;
          &:first-child {
            margin-top: 0px;
          }

          .state-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            column-gap: 8px;
            padding: 3px 2px;

            .item-col {
              width: auto;
              min-width: 0;
              min-height: 28px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 8px;
              margin-right: 0;
              padding: 3px 6px;
              background-image: linear-gradient(to right, #39a3ff14, #39a3ff05);

              .state-title {
                color: #ffffffcc;
                flex: 1;
                min-width: 0;
                font-size: 12px;
                line-height: 1.35;
              }

              .state-val {
                flex: none;
                color: #00eefffe;
                text-align: right;
                font-size: 13px;
                line-height: 1.35;
                white-space: nowrap;
              }
            }
          }
        }

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

        .right-box {
          width: 330px;
          margin-top: 0;
        }

        .left-box {
          width: 460px;
          margin-top: 80px;
          max-height: calc(100vh - 250px);
          overflow-x: hidden;
          overflow-y: auto;
          padding-right: 6px;
          padding-bottom: 12px;

          .item {
            overflow: visible;
          }

          :deep(.vent-box1-bg) {
            overflow: visible;
          }

          :deep(.box1-top),
          :deep(.box1-bottom) {
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          :deep(.box1-bottom) {
            position: relative;
            bottom: auto;
            flex-shrink: 0;
          }

          :deep(.box-container) {
            padding-bottom: 10px;
          }
        }

        .left-box.left-box-kyj,
        .left-box.left-box-zdj {
          gap: 16px;

          .item {
            margin-top: 0;
            margin-bottom: 0;
          }
        }

        .left-box.left-box-kyj {
          margin-top: 0;
          max-height: 816px;
          padding-bottom: 8px;
        }

        .left-box.left-box-zdj {
          gap: 8px;
          margin-top: 0;
          max-height: none;
          overflow: visible;
          padding-right: 0;
          padding-bottom: 8px;

          :deep(.box-container) {
            padding: 10px 10px 0;
          }

          .parameter-title {
            height: 16px;
            margin-top: 8px;
          }

          .parameter-scroll {
            max-height: none;
            overflow: visible;
          }

          .state-item {
            padding: 3px 0;

            .item-col {
              min-height: 26px;
              padding: 2px 6px;
            }
          }
        }
      }
      &: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;
        }
      }
    }
    .monitor-title {
      width: 132px;
      color: #7af5ff;
      font-weight: 400;
      font-size: 14px;
    }
  }
</style>