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

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <ModuleCommon
        v-for="cfg in configs"
        :key="cfg.deviceType"
        :show-style="cfg.showStyle"
        :module-data="cfg.moduleData"
        :module-name="cfg.moduleName"
        :device-type="cfg.deviceType"
        :data="selectData"
        :visible="true"
      /> </div
  ></a-spin>
</template>
<script setup lang="ts">
  import { ref, onMounted, onUnmounted, defineProps } from 'vue';
  import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
  import { list } from '../balancePress.api';
  import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
  import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
  import { useGlobSetting } from '/@/hooks/setting';
  // import { Config } from '../../../deviceManager/configurationTable/types';

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

  const { sysOrgCode } = useGlobSetting();

  const loading = ref(false);

  // 监测数据
  const selectData = ref();

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

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID });

    const result = Array.from(res.msgTxt).reduce(
      (obj: any, e: any) => {
        obj[e.type] = e;

        // if (true) {
        if (sysOrgCode === 'sdmtjtswmk') {
          if (e.type.startsWith('fanlocal')) {
            obj.fanlocal.datalist.push(...e.datalist);
          }
          if (e.type.startsWith('safetymonitor')) {
            e.datalist.forEach((ele) => {
              if (ele.strinstallpos.includes('风门')) {
                obj.gate.datalist.push(ele);
              } else if (ele.strinstallpos.includes('风窗')) {
                obj.window.datalist.push(ele);
              } else if (ele.strinstallpos.includes('工作面')) {
                obj.work_surface.datalist.push(ele);
              } else {
                obj.others.datalist.push(ele);
              }
            });
          }
          if (e.type.startsWith('avgpressure_lowoxygen')) {
            e.datalist.forEach((ele) => {
              ele.strinstallpos.replace(' ', '');
              ele.strname.replace(' ', '');
            });
          }
        }

        return obj;
      },
      {
        /** 用于归类fanlocal */
        fanlocal: { datalist: [] },
        /** 用于归类gate */
        gate: { datalist: [] },
        /** 用于归类window */
        window: { datalist: [] },
        /** 用于归类work_surface */
        work_surface: { datalist: [] },
        others: { datalist: [] },
      }
    );

    return result;
  }

  // const configs = ref<Config[]>([
  //   {
  //     deviceType: 'fanlocal',
  //     moduleName: '局部风机',
  //     pageType: 'balancePressHome',
  //     moduleData: {
  //       header: {
  //         show: true,
  //         readFrom: 'datalist',
  //         selector: {
  //           show: true,
  //           value: '${deviceID}',
  //           trans: {
  //             '1910221332833665026': '主机',
  //             '1910221283626090497': '备机',
  //           },
  //         },
  //         slot: {
  //           show: false,
  //           value: '',
  //         },
  //       },
  //       background: {
  //         show: false,
  //         type: 'image',
  //         link: '',
  //       },
  //       layout: {
  //         direction: 'column',
  //         items: [
  //           {
  //             name: 'tabs',
  //             basis: '100%',
  //           },
  //         ],
  //       },
  //       complex_list: [],
  //       chart: [],
  //       table: [],
  //       gallery: [],
  //       list: [],
  //       tabs: [
  //         {
  //           type: 'K',
  //           readFrom: '',
  //           mapFromData: false,
  //           items: [
  //             {
  //               title: '电机1',
  //               contents: [
  //                 {
  //                   label: '输出功率',
  //                   value: '${readData.Fan1StartStatus}',
  //                   color: 'blue',
  //                 },
  //                 {
  //                   label: '输出电压',
  //                   value: '${readData.Fan1StartStatus}',
  //                   color: 'blue',
  //                 },
  //               ],
  //             },
  //             {
  //               title: '电机2',
  //               contents: [
  //                 {
  //                   label: '输出功率',
  //                   value: '${readData.Fan2StartStatus}',
  //                   color: 'blue',
  //                 },
  //                 {
  //                   label: '输出电压',
  //                   value: '${readData.Fan2StartStatus}',
  //                   color: 'blue',
  //                 },
  //                 {
  //                   label: '输出电压',
  //                   value: '${readData.Fan2StartStatus}',
  //                   color: 'blue',
  //                 },
  //                 {
  //                   label: '输出电压',
  //                   value: '${readData.Fan2StartStatus}',
  //                   color: 'blue',
  //                 },
  //               ],
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:470px;height:260px;',
  //       version: '原版',
  //       position: 'top:20px;left:0;',
  //     },
  //   },
  //   {
  //     deviceType: '',
  //     moduleName: '风门',
  //     pageType: 'balancePressHome',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         slot: {
  //           show: false,
  //           value: '',
  //         },
  //       },
  //       background: {
  //         show: false,
  //         type: 'image',
  //         link: '',
  //       },
  //       layout: {
  //         direction: 'column',
  //         items: [
  //           {
  //             name: 'complex_list',
  //             basis: '100%',
  //           },
  //         ],
  //       },
  //       complex_list: [
  //         {
  //           type: 'G',
  //           readFrom: 'gate.datalist',
  //           mapFromData: true,
  //           items: [
  //             {
  //               title: '${deviceID}',
  //               trans: {
  //                 '1915631893453004802': '22107胶运顺槽入口自动风门2',
  //                 '1915631893478170626': '22107胶运顺槽入口自动风门1',
  //                 '1915631897043329025': '22107辅回撤通道自动风门1',
  //                 '1915631895088783362': '22107辅回撤通道自动风门2',
  //               },
  //               contents: [
  //                 {
  //                   label: '状态',
  //                   value: '${readData.V}',
  //                   color: 'blue',
  //                 },
  //               ],
  //             },
  //           ],
  //         },
  //       ],
  //       chart: [],
  //       table: [],
  //       gallery: [],
  //       list: [],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:470px;height:320px;',
  //       version: '原版',
  //       position: 'top:290px;left:0;',
  //     },
  //   },
  //   {
  //     deviceType: '',
  //     moduleName: '综采工作面推进度',
  //     pageType: 'balancePressHome',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         slot: {
  //           show: false,
  //           value: '',
  //         },
  //       },
  //       background: {
  //         show: false,
  //         type: 'image',
  //         link: '',
  //       },
  //       layout: {
  //         direction: 'column',
  //         items: [
  //           {
  //             name: 'list',
  //             basis: '100%',
  //           },
  //         ],
  //       },
  //       complex_list: [],
  //       chart: [],
  //       table: [],
  //       gallery: [],
  //       list: [
  //         {
  //           type: 'K',
  //           readFrom: '',
  //           items: [
  //             {
  //               label: '进度',
  //               value: '50%',
  //               color: 'blue',
  //             },
  //             {
  //               label: '埋深',
  //               value: '2000km',
  //               color: 'blue',
  //             },
  //           ],
  //         },
  //       ],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:470px;height:130px;',
  //       version: '原版',
  //       position: 'top:620px;left:0;',
  //     },
  //   },
  //   {
  //     deviceType: '',
  //     moduleName: '重点监控传感器',
  //     pageType: 'balancePressHome',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         slot: {
  //           show: false,
  //           value: '',
  //         },
  //       },
  //       background: {
  //         show: false,
  //         type: 'image',
  //         link: '',
  //       },
  //       layout: {
  //         direction: 'column',
  //         items: [
  //           {
  //             name: 'complex_list',
  //             basis: '100%',
  //           },
  //         ],
  //       },
  //       complex_list: [
  //         {
  //           type: 'G',
  //           readFrom: 'avgpressure_lowoxygen_normal.datalist',
  //           mapFromData: true,
  //           items: [
  //             {
  //               title: '${strinstallpos}',
  //               contents: [
  //                 {
  //                   label: '网络状态',
  //                   value: '${readData.netStatus_str}',
  //                   color: 'blue',
  //                 },
  //               ],
  //             },
  //           ],
  //         },
  //       ],
  //       chart: [],
  //       table: [],
  //       gallery: [],
  //       list: [],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:470px;height:230px;',
  //       version: '原版',
  //       position: 'top:20px;right:0;',
  //     },
  //   },
  //   {
  //     deviceType: '',
  //     moduleName: '辅助巡检传感器',
  //     pageType: 'balancePressHome',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         slot: {
  //           show: false,
  //           value: '',
  //         },
  //       },
  //       background: {
  //         show: false,
  //         type: 'image',
  //         link: '',
  //       },
  //       layout: {
  //         direction: 'column',
  //         items: [
  //           {
  //             name: 'complex_list',
  //             basis: '100%',
  //           },
  //         ],
  //       },
  //       complex_list: [
  //         {
  //           type: 'G',
  //           readFrom: 'others.datalist',
  //           mapFromData: true,
  //           items: [
  //             {
  //               title: '${strinstallpos}',
  //               contents: [
  //                 {
  //                   label: '网络状态',
  //                   value: '${readData.netStatus_str}',
  //                   color: 'blue',
  //                 },
  //               ],
  //             },
  //           ],
  //         },
  //       ],
  //       chart: [],
  //       table: [],
  //       gallery: [],
  //       list: [],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:470px;height:230px;',
  //       version: '原版',
  //       position: 'top:260px;right:0;',
  //     },
  //   },
  //   {
  //     deviceType: '',
  //     moduleName: '地面大气压',
  //     pageType: 'balancePressHome',
  //     moduleData: {
  //       header: {
  //         show: false,
  //         readFrom: '',
  //         selector: {
  //           show: false,
  //           value: '',
  //         },
  //         slot: {
  //           show: false,
  //           value: '',
  //         },
  //       },
  //       background: {
  //         show: false,
  //         type: 'image',
  //         link: '',
  //       },
  //       layout: {
  //         direction: 'column',
  //         items: [
  //           {
  //             name: 'chart',
  //             basis: '100%',
  //           },
  //         ],
  //       },
  //       complex_list: [],
  //       chart: [
  //         {
  //           type: 'line_smooth',
  //           readFrom: 'surface_history.datalist',
  //           legend: { show: true },
  //           xAxis: [{ show: true }],
  //           yAxis: [
  //             { show: true, name: '压力1(Pa)', position: 'left' },
  //             { show: true, name: '压力2(Pa)', position: 'right' },
  //           ],
  //           series: [
  //             { readFrom: '', xprop: 'time', yprop: 'pressure1', label: '压力1' },
  //             // { readFrom: 'datalist', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
  //           ],
  //         },
  //       ],
  //       table: [],
  //       gallery: [],
  //       list: [],
  //       gallery_list: [],
  //       preset: [],
  //       to: '',
  //     },
  //     showStyle: {
  //       size: 'width:470px;height:250px;',
  //       version: '原版',
  //       position: 'top:500px;right:0;',
  //     },
  //   },
  // ]);

  const { configs, fetchConfigs } = useInitConfigs();

  onMounted(async () => {
    // getMonitor()
    fetchConfigs('balancePressHome');
    loading.value = true;
    // mountedThree().then(async () => {
    //   await setModelType('balancePressTun'); //balancePressBase
    //   loading.value = false;
    //   timer = null;
    //   await getMonitor(true);
    //   play('startSmoke', 'top', 30, 'open', 0);
    // });
    timer = null;
    await getMonitor(true);
    loading.value = false;
  });

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