gas-injection/src/views/vent/monitorManager/sprayMonitor/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="spray-wrapper">
    <MonitorComponent
      main-title="凝胶防灭火材料自动喷洒系统"
      :main-config="{
        configs: defaultConfigs,
      }"
      :monitor-history-config="{}"
      :handler-history-config="{}"
      :alarm-history-config="{}"
      strtype="sys_surface_juejin"
    >
      <template #default="{ monitorData }">
        <div id="spray3D" class="w-full h-full">
          <a-spin :spinning="loading" />
          <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden">
            <FourBorderBg id="sprayCSS3DEnvA">
              <div>送料电机</div>
              <div>电压US：{{ monitorData.slus }}</div>
              <div>电流LA：{{ monitorData.slla }}</div>
              <div>电流LB：{{ monitorData.sllb }}</div>
              <div>电流LC：{{ monitorData.sllc }}</div>
            </FourBorderBg>
            <FourBorderBg id="sprayCSS3DEnvB">
              <div>输送电机</div>
              <div>电压US：{{ monitorData.ssus }}</div>
              <div>电流LA：{{ monitorData.ssla }}</div>
              <div>电流LB：{{ monitorData.sslb }}</div>
              <div>电流LC：{{ monitorData.sslc }}</div>
            </FourBorderBg>
          </div>
        </div>
      </template>
    </MonitorComponent>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import FourBorderBg from '/@/views/vent/comment/components/fourBorderBg.vue';
  import MonitorComponent from './component.vue';
  import { Config } from '../../deviceManager/configurationTable/types';
  import { useInitConfigs } from '../../home/configurable/hooks/useInit';
  import { mountedThree, setModelType } from './spray.three';

  const loading = ref(false);
  const defaultConfigs: Config[] = [
    {
      deviceType: '',
      moduleName: '压力传感器',
      pageType: 'spray',
      moduleData: {
        header: {
          show: false,
          readFrom: '',
          selector: {
            show: false,
            value: '',
          },
          slot: {
            show: false,
            value: '',
          },
        },
        background: {
          show: false,
          type: 'video',
          link: '',
        },
        layout: {
          direction: 'row',
          items: [
            {
              name: 'board',
              basis: '100%',
            },
          ],
        },
        board: [
          {
            type: 'P',
            layout: 'label-top',
            items: [
              {
                label: '在线数量',
                value: '99',
              },
              {
                label: '异常数量',
                value: '0',
              },
            ],
            readFrom: '',
          },
        ],
      },
      showStyle: {
        size: 'width:440px;height:250px;',
        version: '保德',
        position: 'top:80px;left:10px;',
      },
    },
    {
      deviceType: '',
      moduleName: '喷洒实况',
      pageType: 'spray',
      moduleData: {
        header: {
          show: false,
          readFrom: '',
          selector: {
            show: false,
            value: '',
          },
          slot: {
            show: false,
            value: '',
          },
        },
        background: {
          show: false,
          type: 'video',
          link: '',
        },
        layout: {
          direction: 'row',
          items: [
            {
              name: 'table',
              basis: '100%',
            },
          ],
        },
        table: [
          {
            type: 'A',
            columns: [
              {
                name: '支架',
                prop: 'strinstallpos',
              },
              {
                name: '工作状态',
                prop: 'airStatus_str',
              },
            ],
            readFrom: '',
          },
        ],
        preset: [],
      },
      showStyle: {
        size: 'width:440px;height:430px;',
        version: '保德',
        position: 'top:350px;left:10px;',
      },
    },
    {
      deviceType: '',
      moduleName: '场景信息总览',
      pageType: 'spray',
      moduleData: {
        header: { show: false, readFrom: '', selector: { show: false, value: '' }, slot: { show: false, value: '' } },
        background: { show: false, type: 'video', link: '' },
        layout: {
          direction: 'column',
          items: [
            {
              name: 'list',
              basis: '50%',
              overflow: false,
            },
            {
              name: 'partition',
              basis: 'auto',
              overflow: false,
            },
            {
              name: 'list',
              basis: 'auto',
              overflow: false,
            },
            {
              name: 'partition',
              basis: 'auto',
              overflow: false,
            },
            {
              name: 'list',
              basis: 'auto',
              overflow: false,
            },
          ],
        },
        list: [
          {
            type: 'L',
            readFrom: '',
            items: [
              {
                label: '绑定控制箱名称',
                value: '${cumulativeFlow}',
              },
              {
                label: '控制箱地址',
                value: '${heaterTemperature}',
              },
              {
                label: '控制箱在线状态',
                value: '${nitrogen}',
              },
              {
                label: '故障从机',
                value: '${nitrogenContent}',
              },
              {
                label: '浮球液位报警',
                value: '${nitrogenContent}',
              },
              {
                label: '输送管道压力',
                value: '${nitrogenContent}',
              },
            ],
          },
          {
            type: 'N',
            readFrom: '',
            items: [
              {
                label: '启动状态',
                value: '0.97',
                color: 'blue',
              },
              {
                label: '报警状态',
                value: '84.4',
              },
            ],
          },
          {
            type: 'N',
            readFrom: '',
            items: [
              {
                label: '启动状态',
                value: '0.97',
                color: 'blue',
              },
              {
                label: '故障状态',
                value: '84.4',
              },
            ],
          },
        ],
        partition: [
          {
            type: 'A',
            readFrom: '',
            layout: 'icon-pre',
            label: '送料电机',
            icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-1.png',
          },
          {
            type: 'A',
            readFrom: '',
            layout: 'icon-pre',
            label: '输送电机',
            icon: '/src/assets/images/home-container/configurable/tashanhome/partition-icon-2.png',
          },
        ],
        mock: {},
      },
      showStyle: {
        size: 'width:440px;height:700px;',
        version: '原版',
        position: 'top:80px;right:10px;',
      },
    },
  ];

  const { configs, fetchConfigs } = useInitConfigs();

  onMounted(() => {
    fetchConfigs('spray');
    // loading.value = true;
    // mountedThree('#spray3D', ['#sprayCSS3D', '#sprayCSS3DEnvA', '#sprayCSS3DEnvB']).then(() => {
    //   setModelType('spray').finally(() => {
    //     loading.value = false;
    //   });
    // });
  });
</script>

<style lang="less" scoped>
  .spray-wrapper {
    width: 100%;
    height: 100%;
  }

  .spray-wrapper :deep(.list-item_L .list-item__icon_L) {
    background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
  }
  .spray-wrapper :deep(.list-item_N:nth-child(1)) {
    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
  }
  .spray-wrapper :deep(.list-item_N:nth-child(2)) {
    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
  }
</style>