mky-vent-base/src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome1.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box">
        <div class="monitor-info item-box">
          <!-- <ventBox1>
            <template #title>
              <div>均压与低氧参数监测与设置</div>
            </template>
            <template #container>
              <div class="vent-flex-row-between auto-control">
                <div class="title">自动调节：</div>
                <a-radio-group v-model:value="isAutoControl" name="radioGroup" @change="changeType(isAutoControl)">
                  <a-radio value="1">关闭</a-radio>
                  <a-radio value="2">开启</a-radio>
                </a-radio-group>
              </div>
              <div class="input-box">
                <div class="divider-line">开始条件</div>
                <div v-for="(item, index) in settingParam1" class="input-item" :key="index">
                  <div class="title">{{ item.title }}：</div>
                  <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
                  <div class="unit">{{ item.unit }}</div>
                </div>
                <div class="divider-line">调节参数</div>
                <div v-for="(item, index) in settingParam2" class="input-item" :key="index">
                  <div class="title">{{ item.title }}：</div>
                  <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
                  <div class="unit">{{ item.unit }}</div>
                </div>
                <div class="divider-line">结束时间</div>
                <div v-for="(item, index) in settingParam3" class="input-item" :key="index">
                  <div class="title">{{ item.title }}：</div>
                  <a-input-number class="input-value" v-model:value="formData[item.code]" placeholder="" />
                  <div class="unit">{{ item.unit }}</div>
                </div>
              </div>
              <div class="btn-box" style="text-align: center">
                <div class="btn btn1" @click="onSubmit">提交</div>
              </div>
            </template>
          </ventBox1> -->
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>设备监测详情</div>
            </template>
            <template #container>
              <div class="overflow-y-auto max-h-700px">
                <template v-for="monitor in windrectMonitorData" :key="monitor.deviceId">
                  <div class="parameter-title group-parameter-title"
                    ><SvgIcon class="icon" size="14" name="fiber-title" />
                    <span>测风装置：{{ monitor.strinstallpos }}</span>
                  </div>
                  <div class="input-box">
                    <div v-for="(item, index) in windrectParam" class="input-item" :key="index">
                      <div class="title">{{ item.title }}</div>
                      <div class="value">{{ get(monitor, item.code, '-') }}</div>
                      <div class="unit">{{ item.unit }}</div>
                    </div>
                  </div>
                </template>
                <template v-for="monitor in windowMonitorData" :key="monitor.deviceId">
                  <div class="parameter-title group-parameter-title"
                    ><SvgIcon class="icon" size="14" name="fiber-title" />
                    <span>风窗：{{ monitor.strinstallpos }}</span>
                  </div>
                  <div class="input-box">
                    <div v-for="(item, index) in windowParam" class="input-item" :key="index">
                      <div class="title">{{ item.title }}</div>
                      <div class="value">{{ get(monitor, item.code, '-') }}</div>
                      <div class="unit">{{ item.unit }}</div>
                    </div>
                  </div>
                </template>
                <template v-for="monitor in fanlocalMonitorData" :key="monitor.deviceId">
                  <div class="parameter-title group-parameter-title"
                    ><SvgIcon class="icon" size="14" name="fiber-title" />
                    <span>局扇：{{ monitor.strinstallpos }}</span>
                  </div>
                  <div class="vent-flex-row">
                    <div
                      class="fan-btn"
                      :class="{ 'fan-btn-active': get(fanBtnData, monitor.deviceId) == 'Fan1' }"
                      @click="changeFanBtn(monitor.deviceId, 'Fan1')"
                      >主机</div
                    >
                    <div
                      class="fan-btn"
                      :class="{ 'fan-btn-active': get(fanBtnData, monitor.deviceId) == 'Fan2' }"
                      @click="changeFanBtn(monitor.deviceId, 'Fan2')"
                      >备机</div
                    >
                  </div>
                  <div class="input-box">
                    <div class="input-item">
                      <div class="title">运行风机</div>
                      <div class="value">{{ monitor.FanRun }}</div>
                    </div>
                    <div v-for="(item, index) in fanlocalColumn" class="input-item" :key="index">
                      <div class="title">{{ item.title }}</div>
                      <div class="value">{{
                        item.dataIndex.startsWith('Fan')
                          ? get(monitor, item.dataIndex.replace('Fan', fanBtnData[monitor.deviceId]))
                          : get(monitor, item.dataIndex)
                      }}</div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
      <div class="lr right-box ml-5px">
        <div class="item-box sensor-container">
          <ventBox1>
            <template #title>
              <!-- <div>CO与O2监测</div> -->
              <div>传感器/安全监控监测</div>
            </template>
            <template #container>
              <div class="overflow-y-auto max-h-700px">
                <template v-for="monitor in safetyMonitorData" :key="monitor.deviceId">
                  <div class="parameter-title group-parameter-title"
                    ><SvgIcon class="icon" size="14" name="fiber-title" />
                    <span>{{ monitor.strinstallpos }}</span>
                  </div>
                  <div class="input-box">
                    <div v-for="(item, index) in monitorParam" class="input-item" :key="index">
                      <div class="title">{{ item.title }}</div>
                      <div class="value" style="width: 50%">{{ get(monitor, item.code, '-') }}</div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script setup lang="ts" name="balancePressHome1">
  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import { SvgIcon } from '/@/components/Icon';
  import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
  import { settingParam1, settingParam2, settingParam3, windowParam, localFanParam, monitorParam, windrectParam } from '../balancePress.data';
  import { list } from '../balancePress.api';
  import { message } from 'ant-design-vue';
  import { get } from 'lodash-es';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';

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

  const loading = ref(false);

  // 默认初始是第一行
  const isAutoControl = ref('1');

  // 监测数据
  const selectData = reactive({
    frontRearDP: '-',
    sourcePressure: '-',
    fault: '-',
  });

  const changeType = (isAutoControl) => {
    isAutoControl;
    //
  };

  // https获取监测数据
  let timer: any = null;
  function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(
        async () => {
          if (props.deviceId) {
            const data = await getDataSource(props.deviceId);
            Object.assign(selectData, data);
            updateText(selectData);
          }
          if (timer) {
            timer = null;
          }
          await getMonitor();
          loading.value = false;
        },
        flag ? 0 : 1000
      );
    }
  }

  const safetyMonitorData = ref<any[]>([]);
  const fanlocalMonitorData = ref<any[]>([]);
  const fanBtnData = reactive({});
  const windowMonitorData = ref<any[]>([]);
  const windrectMonitorData = ref<any[]>([]);
  const fanlocalColumn = ref<any[]>([]);
  const windowColumn = ref<any[]>([]);

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID });
    const result = res.msgTxt;
    safetyMonitorData.value = [];
    fanlocalMonitorData.value = [];
    windowMonitorData.value = [];
    windrectMonitorData.value = [];
    result.forEach((item) => {
      if (item.type.startsWith('safetymonitor') || item.type.startsWith('avgpressure_lowoxygen')) {
        safetyMonitorData.value.push(...item.datalist);
      }
      if (item.type.startsWith('fanlocal')) {
        item.datalist.forEach((e) => {
          fanlocalColumn.value = getTableHeaderColumns('sys_surface_junya_fanlocal') || localFanParam;
          Object.assign(e, e.readData);
          const f1Run = e.readData.Fan1StartStatus == '1';
          e.FanfHz = f1Run ? e.readData.Fan1_Frequency : e.readData.Fan2_Frequency;
          e.FanRun = f1Run ? '1#风机' : '2#风机';
          if (!fanBtnData[e.deviceId]) fanBtnData[e.deviceId] = 'Fan1';
        });
        fanlocalMonitorData.value.push(...item.datalist);
      }
      if (item.type.startsWith('window')) {
        windowMonitorData.value.push(...item.datalist);
      }
      if (item.type.startsWith('windrect')) {
        windrectMonitorData.value.push(...item.datalist);
      }
    });
  }

  function changeFanBtn(deviceId, fan) {
    fanBtnData[deviceId] = fan;
  }
  // 喷粉操作
  function onSubmit() {
    sessionStorage.setItem('lalance-press-formdata', JSON.stringify(formData.value));
    message.success('提交成功');
  }

  // watch(
  //   () => props.deviceId,
  //   (newVal, oldVal) => {
  //     if (newVal && oldVal != undefined) {
  //       setModelType('balancePressBase');
  //     }

  //     loading.value = true;
  //   }
  // );

  const formData = ref({
    a: 0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: 0,
    h: 0,
    i: 0,
    j: 0,
    k: 0,
    l: 0,
    m: 0,
  });

  onBeforeMount(() => {});

  onMounted(() => {
    // getMonitor()
    loading.value = true;
    const storage = sessionStorage.getItem('lalance-press-formdata');
    if (storage) formData.value = JSON.parse(storage);
    mountedThree().then(async () => {
      await setModelType('balancePressTun'); //balancePressBase
      loading.value = false;
      timer = null;
      await getMonitor(true);
      play('startSmoke', 'top', 30, 'open', 0);
    });
  });

  onUnmounted(() => {
    destroy();
    if (timer) {
      clearTimeout(timer);
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;
  .monitor-container {
    margin-top: 60px;
  }
  .lr {
    width: 340px !important;
  }
  .auto-control {
    padding: 10px 8px;
    margin: 0 4px 4px 4px;
    border-radius: 4px;
    border: 1px solid #ffffff05;
    background-image: linear-gradient(to left, #39deff15, #3977e500, #39deff15);
  }
  .divider-line {
    position: relative;
    color: aqua;
    padding-left: 20px;
    font-size: 14px;
    &::before {
      position: absolute;
      content: '';
      display: block;
      top: 10px;
      left: 0;
      height: 1px;
      width: 15px;
      background-color: #ffffff33;
    }
    &::after {
      position: absolute;
      content: '';
      display: block;
      top: 10px;
      right: 0;
      height: 1px;
      width: calc(100% - 85px);
      background-color: #ffffff33;
    }
  }
  .input-value {
    width: 120px !important;
  }
  .unit {
    text-align: right;
  }
  .btn-box {
    margin: 10px 4px;
    .btn1 {
      padding: 4px 0;
    }
  }
  .fan-btn {
    flex: 1;
    text-align: center;
    background: var(--vent-balancePress-fan-bg-default);
    cursor: pointer;
    &:hover {
      color: var(--vent-font-action-link);
      background: var(--vent-balancePress-fan-bg-select);
    }
    &:first-child {
      border-left: 1px solid;
      border-radius: 4px;
      border-color: var(--vent-configurable-home-light-border);
    }
    &:last-child {
      border-right: 1px solid;
      border-radius: 4px;
      border-color: var(--vent-configurable-home-light-border);
    }
  }
  .fan-btn-active {
    color: var(--vent-font-action-link);
    background: var(--vent-balancePress-fan-bg-select);
  }

  :deep(.@{ventSpace}-tabs-tabpane-active) {
    overflow: auto;
  }

  :deep(.@{ventSpace}-input-number) {
    border-color: #ffffff88 !important;
  }
</style>