mky-vent-base/src/views/vent/monitorManager/windowMonitorBet/index.vue

<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
    <a-spin :spinning="loading" />
    <div id="window3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
      <div>
        <div ref="elementContent" class="elementContent">
          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
          <p><span class="data-title">故障诊断：</span>
            <i
              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
            ></i>{{selectData.fault}}</p>
        </div>
      </div>
    </div> -->
  </div>
  <div class="scene-box">
    <div class="top-box">
      <div class="top-center">
        <!-- <div class="input-box">
          <span class="input-title">风窗面积：</span>
          <a-input-number size="small" placeholder="0" :min="0" :max="90" :step="1" v-model:value="windowAngle" />
        </div> -->
        <div class="row" v-if="hasPermission('window:control') && selectData.nwindownum > 1">
          <div class="button-box" @click="setArea(1)">设定前窗面积</div>
          <div class="button-box" @click="setArea(2)">设定后窗面积</div>
        </div>
        <div class="row" v-if="hasPermission('window:control') && selectData.nwindownum == 1">
          <!-- <div class="button-box" @click="setArea(1)">设定风窗面积</div> -->
          <div class="button-box" @click="setWind()">设置过风量</div>
        </div>
      </div>
      <div class="top-right row">
        <!-- <div class="control-type row">
          <div class="control-title">控制模式：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">就地</a-radio>
            <a-radio :value="2">远程</a-radio>
          </a-radio-group>
        </div> -->
        <!-- <div class="run-type row">
          <div class="control-title">运行状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">检修</a-radio>
          </a-radio-group>
        </div>
        <div class="run-state row">
          <div class="control-title">网络状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">运行</a-radio>
          </a-radio-group>
        </div> -->
      </div>
    </div>
    <div class="title-text">
      {{ selectData.strinstallpos || selectData.strname }}
    </div>
    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 350, scroll)">
      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="实时监测">
            <MonitorTable
              v-if="activeKey === '1'"
              ref="MonitorDataTable"
              columnsType="wintest_monitor"
              :dataSource="dataSource"
              @selectRow="getSelectRow"
              design-scope="wintest-monitor"
              :scroll="{ y: scroll.y - 40 }"
              title="风窗监测"
              :isShowPagination="true"
              :isShowActionColumn="true"
            >
              <template #filterCell="{ column, record }">
                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
                  record.warnFlag == '0' ? '正常' : '报警'
                }}</a-tag>
                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? 'default' : 'green'">{{
                  record.netStatus == '0' ? '断开' : '连接'
                }}</a-tag>
                <div v-if="record.nwindownum == 1 && column.dataIndex === 'rearArea'">/</div>
              </template>
              <template #action="{ record }">
                <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
              </template>
            </MonitorTable>
          </a-tab-pane>
          <!-- <a-tab-pane key="2" tab="实时曲线图" force-render>
            <div class="tab-item" v-if="activeKey === '2'">
              <DeviceEcharts
                chartsColumnsType="window_chart"
                xAxisPropType="strname"
                :dataSource="dataSource"
                height="100%"
                :chartsColumns="chartsColumns"
                :device-list-api="baseList"
                device-type="window"
              />
            </div>
          </a-tab-pane> -->
          <a-tab-pane key="3" tab="历史数据">
            <div class="tab-item" v-if="activeKey === '3'">
              <HistoryTable columns-type="window" device-type="window" designScope="window-history" :scroll="scroll">
                <template #filterCell="{ column, record }">
                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : 'red'">{{
                    record.warnFlag == '0' ? '正常' : '报警'
                  }}</a-tag>
                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? 'default' : 'green'">{{
                    record.netStatus == '0' ? '断开' : '连接'
                  }}</a-tag>
                  <div v-if="record.nwindownum == 1 && column.dataIndex === 'rearArea'">/</div>
                </template>
              </HistoryTable>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="报警历史">
            <div class="tab-item" v-if="activeKey === '4'">
              <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="操作历史">
            <div class="tab-item" v-if="activeKey === '5'">
              <HandlerHistoryTable
                columns-type="operator_history"
                device-type="window"
                :device-list-api="baseList"
                designScope="alarm-history"
                :scroll="scroll"
              />
            </div>
          </a-tab-pane>
        </a-tabs>
      </dv-border-box8>
    </div>
  </div>
  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 10px; width: 300px; height: 280px; margin: auto"></div>
  <LivePlayer
    id="fc-player1"
    style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1"
    ref="player1"
    :videoUrl="flvURL1()"
    muted
    loading
    autoplay
    controls
    loop
    fluent
  />
  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK" @handle-cancel="handleCancel" />
  <DeviceBaseInfo @register="regModal" :device-type="selectData['deviceType']" />
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue';
  import DeviceEcharts from '../comment/DeviceEcharts.vue';
  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, watch, nextTick, inject } from 'vue';
  import MonitorTable from '../comment/MonitorTable.vue';
  import HistoryTable from '../comment/HistoryTable.vue';
  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  import HandleModal from './modal.vue';
  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
  import { mountedThree, destroy, addMonitorText, computePlay, setModelType, initCameraCanvas } from './window.threejs';
  import { list, getTableList, cameraList, cameraAddrList } from './window.api';
  import { list as baseList } from '../../deviceManager/windWindowTabel/ventanalyWindow.api';
  import { chartsColumns } from './window.data';
  import { deviceControlApi } from '/@/api/vent/index';
  import lodash from 'lodash';
  import { setDivHeight } from '/@/utils/event';
  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
  import { useRouter } from 'vue-router';
  import LivePlayer from '@liveqing/liveplayer-v3';
  import { useModal } from '/@/components/Modal';
  import { useCamera } from '/@/hooks/system/useCamera';
  import { usePermission } from '/@/hooks/web/usePermission';
  const { hasPermission } = usePermission();

  const globalConfig = inject('globalConfig');

  const { currentRoute } = useRouter();

  const MonitorDataTable = ref();

  const playerRef = ref();
  const scroll = reactive({
    y: 230,
  });

  const modalIsShow = ref<boolean>(false); // 是否显示模态框
  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
  const modalType = ref(''); // 模态框内容显示类型，设备操作类型

  const deviceBaseList = ref([]);
  const activeKey = ref('1');
  const loading = ref(false);
  const windowAngle = ref(0);
  const windowM3 = ref(0);

  const windowM3Unit = ref(0);
  const windowAngleUnit = ref(0);

  // const rotationParam = {
  //   frontDeg0: 0, // 前门初始
  //   frontDeg1: windowAngle.value, // 前门目标
  //   backDeg0: 0, // 后门初始
  //   backDeg1: windowAngle.value, // 后门目标
  // };

  // 默认初始是第一行
  const selectRowIndex = ref(-1);
  const dataSource = ref([]);

  // 设备数据
  const controlType = ref(1);

  const flvURL1 = () => {
    return `/video/window.mp4`;
  };
  const [regModal, { openModal }] = useModal();
  const { getCamera, removeCamera } = useCamera();

  const tabChange = (activeKeyVal) => {
    activeKey.value = activeKeyVal;
    if (activeKeyVal == 1) {
      nextTick(() => {
        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
      });
    }
  };

  const initData = {
    deviceID: '',
    deviceType: '',
    strname: '',
    dataDh: '-', //压差
    dataDtestq: '-', //测试风量
    sourcePressure: '-', //气源压力
    dataDequivalarea: '-',
    netStatus: '0', //通信状态
    fault: '气源压力超限',
    forntArea: '0',
    rearArea: '0',
    frontRearDifference: '-',
    rearPresentValue: '-',
    maxarea: 0,
    nwindownum: 0,
  };

  // 监测数据
  const selectData = reactive(lodash.cloneDeep(initData));

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  const getMonitor = (flag?) => {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(
        async () => {
          const data = await getDataSource();
          Object.assign(selectData, data);
          playAnimation(selectData, selectData.maxarea);
          addMonitorText(selectData);
          if (timer) {
            timer = null;
          }
          getMonitor();
        },
        flag ? 0 : 2000
      );
    }
  };

  const getDataSource = async () => {
    const res = await list({ devicetype: 'wintest', pagetype: 'normal' });
    dataSource.value = res.msgTxt[0].datalist || [];
    dataSource.value.forEach((data: any) => {
      const readData = data.readData;
      data = Object.assign(data, readData);
    });
    if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
      // 初始打开页面
      if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
        MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
      } else {
        MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
      }
    }

    const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
    if (n < 8 && data && data.OpenDegree && n > 0) {
      data.OpenDegree = Math.round(Number(windowAngleUnit.value) * ++n + Number(data.OpenDegree));
    } else {
      if (windowAngle.value && windowAngle.value != data.OpenDegree) {
        data.OpenDegree = Math.round(windowAngle.value);
      }
    }

    if (n < 13 && data && data.fWindowM3 && n > 0) {
      data.fWindowM3 = (Number(windowM3Unit.value) * ++n + Number(data.fWindowM3)).toFixed(2);
    } else {
      if (windowM3.value && windowM3.value != data.fWindowM3) {
        data.fWindowM3 = windowM3.value;
      }
    }
    return data;
  };

  // 获取设备基本信息列表
  const getDeviceBaseList = () => {
    getTableList({ pageSize: 1000 }).then((res) => {
      deviceBaseList.value = res.records;
    });
  };

  // 切换检测数据
  const getSelectRow = async (selectRow, index) => {
    if (!selectRow) return;
    selectRowIndex.value = index;
    loading.value = true;
    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
    Object.assign(selectData, initData, selectRow, baseData);

    // const type = selectData.nwindownum == 1 ? 'singleXkWindow' : 'doubleWindow';
    const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
    setModelType(type).then(() => {
      addMonitorText(selectData);
      playAnimation(selectRow, selectData.maxarea, true);
      loading.value = false;
    });
    await getCamera(selectRow.deviceID, playerRef.value);
  };

  // 判断前后窗的面积是否发生改变，如果改变则开启动画
  const playAnimation = (data, maxarea, isFirst = false) => {
    computePlay(data, maxarea, isFirst);
  };

  // 设置风窗面积
  const setArea = (flag) => {
    if (selectData.nwindownum == 2) {
      modalTitle.value = flag === 1 ? '设定前窗面积' : '设定后窗面积';
    } else {
      modalTitle.value = '设定风窗面积';
    }

    modalType.value = flag + '';
    modalIsShow.value = true;
  };

  const setWind = () => {
    modalTitle.value = '设定风窗过风量';
    modalType.value = '1';
    modalIsShow.value = true;
  };
  let n = 0;
  const handleOK = (passWord, handlerState, m3) => {
    // 先调整打开角度
    if (m3 < 1428) {
      windowAngle.value = (72 / 1428) * m3;
    } else if (m3 >= 1428 && m3 < 1448) {
      windowAngle.value = 74;
    } else if (m3 >= 1448 && m3 < 1467) {
      windowAngle.value = 75;
    } else if (m3 >= 1467 && m3 <= 1480) {
      windowAngle.value = 76;
    } else if (m3 >= 1480 && m3 <= 1504) {
      windowAngle.value = 80;
    } else if (m3 >= 1504 && m3 <= 1575) {
      windowAngle.value = 85;
    } else if (m3 >= 1575 && m3 <= 1640) {
      windowAngle.value = 90;
    } else if (m3 > 1640) {
      windowAngle.value = (90 / 1640) * m3;
    }

    const data = {
      deviceid: selectData.deviceID,
      devicetype: selectData.deviceType,
      paramcode: 'OpenDegreeSet',
      password: passWord || globalConfig?.simulatedPassword,
      value: Math.round(windowAngle.value),
    };
    message.success('指令已下发至生产管控平台成功！');
    handleCancel();
    windowAngleUnit.value = selectData.OpenDegree ? (windowAngle.value - selectData.OpenDegree) / 8 : 0;
    windowM3Unit.value = selectData.fWindowM3 ? (m3 - selectData.fWindowM3) / 13 : 0;
    n = 1;
    windowM3.value = m3;
    setTimeout(() => {
      deviceControlApi(data)
        .then((result) => {
          if (result && result.code == 500) {
            message.error(result.message);
          } else {
            // if (globalConfig.History_Type == 'remote') {
            //   message.success('指令已下发至生产管控平台成功！');
            // } else {
            //   message.success('指令已下发成功！');
            // }
            setTimeout(() => {
              const data1 = {
                deviceid: selectData.deviceID,
                devicetype: selectData.deviceType,
                paramcode: 'ctrlm3',
                password: passWord || globalConfig?.simulatedPassword,
                value: m3,
              };
              deviceControlApi(data1).then((result) => {
                if (result && result.code == 500) {
                  message.error(result.message);
                } else {
                }

                n = 0;
              });
            }, 5000);
          }
        })
        .catch(() => {})
        .finally(() => {});
    }, 8000);
    setTimeout(() => {
      windowAngle.value = 0;
      windowM3.value = 0;
    }, 30000);
  };

  const handleCancel = () => {
    modalIsShow.value = false;
    modalTitle.value = '';
    modalType.value = '';
  };

  function deviceEdit(e: Event, type: string, record) {
    e.stopPropagation();
    openModal(true, {
      type,
      deviceId: record['deviceID'],
    });
  }

  onBeforeMount(() => {
    // const sendVal = JSON.stringify({ pagetype: 'normal', devicetype: 'window', orgcode: '', ids: '', systemID: '' });
    // initWebSocket(sendVal);
    getDeviceBaseList();
  });

  onMounted(() => {
    loading.value = true;
    const playerDom = document.getElementById('fc-player1')?.getElementsByClassName('vjs-tech')[0];
    mountedThree(playerDom).then(async () => {
      // await setModelType('singleWindow');
      getMonitor(true);
      loading.value = false;
      addMonitorText(selectData);
    });
  });
  onUnmounted(() => {
    destroy();
    removeCamera();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  @import '/@/design/vent/modal.less';
  @ventSpace: zxm;

  // :deep(.@{ventSpace}-tabs-tabpane-active) {
  //   height: 100%;
  // }
  .input-box {
    display: flex;
    align-items: center;
    padding-left: 10px;
    .input-title {
      color: var(--vent-font-action-link);
      width: auto;
    }
    .@{ventSpace}-input-number {
      border-color: #ffffff88 !important;
    }
    margin-right: 10px;
  }
  .scene-box {
    .bottom-tabs-box {
      height: 350px;
    }
  }
</style>