gasInjection-project/src/views/vent/monitorManager/sprayMonitor/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="spray-wrapper">
    <BasicMonitoring
      main-title="凝胶防灭火材料自动喷洒系统"
      :main-config="{
        operations: operations,
        configs: configs,
      }"
      :monitor-history-config="{}"
      :handler-history-config="{}"
      :alarm-history-config="{}"
      strtype="sys_surface_juejin"
    >
      <template #default="{ monitorData }">
        <div id="spray3D" class="w-full h-full flex justify-center items-center overflow-hidden">
          <a-spin :spinning="loading" />
          <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none">
            <FourBorderBg id="sprayCSS3DEnvA">
              <div>送料电机</div>
              <div>电压US：{{ get(monitorData, 'spray_auto[0].readData.SlDjdy', '-') }}</div>
              <div>电流LA：{{ get(monitorData, 'spray_auto[0].readData.SlDjAdl', '-') }}</div>
              <div>电流LB：{{ get(monitorData, 'spray_auto[0].readData.SlDjBdl', '-') }}</div>
              <div>电流LC：{{ get(monitorData, 'spray_auto[0].readData.SlDjCdl', '-') }}</div>
            </FourBorderBg>
            <FourBorderBg id="sprayCSS3DEnvB">
              <div>注浆电机</div>
              <div>电压US：{{ get(monitorData, 'spray_auto[0].readData.ZjDjdy', '-') }}</div>
              <div>电流LA：{{ get(monitorData, 'spray_auto[0].readData.ZjDjAdl', '-') }}</div>
              <div>电流LB：{{ get(monitorData, 'spray_auto[0].readData.ZjDjBdl', '-') }}</div>
              <div>电流LC：{{ get(monitorData, 'spray_auto[0].readData.ZjDjCdl', '-') }}</div>
            </FourBorderBg>
          </div>
        </div>
      </template>
    </BasicMonitoring>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import BasicMonitoring from '/@/components/vent/BasicMonitoring.vue';
  import { Config } from '../../deviceManager/configurationTable/types';
  import { useInitConfigs } from '../../home/configurable/hooks/useInit';
  import { mountedThree, setModelType } from './spray.three';
  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
  import { get } from 'lodash-es';

  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: '1',
              },
              {
                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: 'readData.online_str',
              },
            ],
            readFrom: 'spray_auto',
          },
        ],
        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: '${spray_auto[0].strinstallpos}',
              },
              {
                label: '控制箱地址',
                value: '${spray_auto[0].readData.snumber}',
              },
              {
                label: '故障从机',
                value: '${spray_auto[0].readData.Cjgz}',
              },
              {
                label: '浮球液位报警',
                value: '${spray_auto[0].readData.minimumgrouting}',
              },
              {
                label: '输送管道压力',
                value: '${spray_auto[0].readData.zjbhglpaV}',
              },
            ],
          },
          {
            type: 'N',
            readFrom: '',
            items: [
              {
                label: '启动状态',
                value: '${spray_auto[0].readData.online_str}',
                color: 'blue',
              },
              {
                label: '报警状态',
                value: '${spray_auto[0].warnLevel_str}',
              },
            ],
          },
          {
            type: 'N',
            readFrom: '',
            items: [
              {
                label: '启动状态',
                value: '${spray_auto[0].readData.online_str}',
                color: 'blue',
              },
              {
                label: '故障状态',
                value: '${spray_auto[0].readData.warnLevel_str}',
              },
            ],
          },
        ],
        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',
          },
        ],
      },
      showStyle: {
        size: 'width:440px;height:700px;',
        version: '原版',
        position: 'top:80px;right:10px;',
      },
    },
  ];

  const { configs, fetchConfigs } = useInitConfigs();
  const loading = ref(false);

  const operations = ref([
    {
      label: '开启控制箱',
      key: 'run_auto_sign',
      value: '1',
      disabled: false,
      showPassword: true,
      // permission: 'spray:run_auto_sign',
    },
    {
      label: '关闭控制箱',
      key: 'run_auto_sign',
      value: '0',
      disabled: false,
      showPassword: true,
      // permission: 'spray:run_auto_sign',
    },
  ]);

  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%;
  }

  #spray3D {
    pointer-events: all;
  }

  .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>