mky-vent-base/src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome.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>
        </div>
      </div>
      <div class="lr right-box ml-auto">
        <div class="item-box sensor-container">
          <ventBox1 class="">
            <template #title>
              <div>设备监测详情</div>
            </template>
            <template #container>
              <div class="overflow-y-auto max-h-500px">
                <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>
              </div>
            </template>
          </ventBox1>
          <ventBox1 class="">
            <template #title>
              <div>基于大气压的氧气浓度预测值</div>
            </template>
            <template #container> <CustomChart :chart-config="PressO2Option" :chart-data="mockData" height="220px" /> </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-300px">
                <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>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>设备监测详情</div>
            </template>
            <template #container>
              <div class="overflow-y-auto max-h-400px">
                <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="input-box">
                    <div v-for="(item, index) in localFanParam" 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>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script setup lang="ts" name="balancePressHome">
import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch, computed } from 'vue';
import ventBox1 from '/@/components/vent/ventBox1.vue';
import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
import { PressO2Option, mockData1 } from '../balancePressO2.data';
import { SvgIcon } from '/@/components/Icon';
import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
import { settingParam1, settingParam2, settingParam3, windowParam, localFanParam, windrectParam } from '../balancePress.data';
import { list, submit, subList, submitEdit, getO2PressData } from '../balancePress.api';
import { message } from 'ant-design-vue';
import { get } from 'lodash-es';
const props = defineProps({
  deviceId: {
    type: String,
    require: true,
  },
});
const loading = ref(false);
// 默认初始是第一行
const isAutoControl = ref('1');
const O2PressDataFetched = ref(false);
// 监测数据
const selectData = reactive({
  frontRearDP: '-',
  sourcePressure: '-',
  fault: '-',
});
const monitorParam = [
  {
    title: '监测值',
    code: 'readData.ss_analog_value',
    unit: '',
  },
];
const changeType = (isAutoControl) => {
  isAutoControl;
  //
};

let listData = ref<any[]>([]);

// 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 windowMonitorData = ref<any[]>([]);
const windrectMonitorData = ref<any[]>([]);
const modelsensorO2Data = ref<any[]>([]);
const mockData = ref<{ chartData: { dateTime: string; o2Val: string; pressureVal: string }[] }>({
  chartData: [],
});
const chartData1 = 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 = [];
  modelsensorO2Data.value = [];
  result.forEach((item) => {
    if (item.type.startsWith('safetymonitor')) {
      safetyMonitorData.value.push(...item.datalist);
    }
    if (item.type.startsWith('fanlocal')) {
      item.datalist.forEach((e) => {
        const f1Run = e.readData.Fan1StartStatus == '1';
        e.FanfHz = f1Run ? e.readData.Fan1_Frequency : e.readData.Fan2_Frequency;
        e.FanRun = f1Run ? '1#风机' : '2#风机';
      });
      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);
    }
    if (item.type.startsWith('modelsensor_o2')) {
      modelsensorO2Data.value.push(...item.datalist);
    }
  });
  if (!O2PressDataFetched.value) {
    O2PressDataFetched.value = true;
    getO2Press(modelsensorO2Data.value);
  }
}
async function getO2Press(params) {
  const deviceID = params[0].deviceID;
  const param = {
    deviceId: deviceID,
  };
  const res = await getO2PressData(param);

  const chartData = [...res.o2HistoryDataList, ...res.o2List];
  mockData.value = { chartData };
  O2PressDataFetched.value = true;
}

// 喷粉操作
async function onSubmit() {
  if (listData.value.length != 0) {
    //编辑
    let res = await submitEdit(listData.value[0]);
    if (res) {
      initParamList();
    }
  } else {
    //新增
    let res = await submit(formData.value);
    if (res) {
      initParamList();
      message.success('提交成功');
    }
  }
}

//获取低氧参数监测返显列表
async function initParamList() {
  let res = await subList();
  if (res && res.records && res.records.length != 0) {
    listData.value = res.records;
    formData.value = res.records[0];
  }
}

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

const formData = ref({
  id: '',
  coMaxStart: 0,
  o2MinStart: 0,
  coRiseStart: 0,
  o2DownStart: 0,
  windowAreaSetGrad: 0,
  windowSetTime: 0,
  windowMinArea: 0,
  windowAreaDef: 0,
  setMinTime: 0,
  coEnd: 0,
  coTimeEnd: 0,
  o2End: 0,
  o2TimeEnd: 0,
});

onBeforeMount(() => {});

onMounted(() => {
  loading.value = true;
  mountedThree().then(async () => {
    await setModelType('balancePressBase'); //balancePressBase
    loading.value = false;
    timer = null;
    await initParamList();
    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;
  }
}

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

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