mky-vent-base/src/views/vent/home/configurable/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
      <a class="ant-dropdown-link" @click.prevent>
        全矿井通风检测
        <CaretDownOutlined />
      </a>
      <template #overlay>
        <MonitorCenter />
      </template>
    </a-dropdown>
    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->

    <!-- <SubVentilate />
    <Ventilate />
    <VentilateControl />
    <AirVolumeMonitor />
    <VentilateAnalysis />
    <WorkSurface />
    <DeviceWarning /> -->
    <template v-if="isOriginal">
      <ModuleOriginal v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-name="cfg.moduleName" :visible="visible">
        <Content v-bind="cfg" />
      </ModuleOriginal>
    </template>
    <template v-else>
      <ModuleEnhanced v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-name="cfg.moduleName" :visible="visible">
        <Content v-bind="cfg" />
      </ModuleEnhanced>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  // import SubVentilate from './components/SubVentilate.vue';
  // import Ventilate from './components/Ventilate.vue';
  import { CaretDownOutlined } from '@ant-design/icons-vue';
  // import VentilateControl from './components/VentilateControl.vue';
  // import AirVolumeMonitor from './components/AirVolumeMonitor.vue';
  // import VentilateAnalysis from './components/VentilateAnalysis.vue';
  // import WorkSurface from './components/WorkSurface.vue';
  // import DeviceWarning from './components/DeviceWarning.vue';
  import MonitorCenter from './components/MonitorCenter.vue';
  // import { useInitConfigs } from './hooks/useInit';
  import { Config } from '../../deviceManager/configurationTable/types';
  import ModuleEnhanced from './components/ModuleEnhanced.vue';
  import ModuleOriginal from './components/ModuleOriginal.vue';
  import Content from './components/content.vue';
  // import mapComponent from './components/3Dmap/index.vue';

  const mainTitle = ref('智能通风管控系统');

  // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];

  const configs = ref<Config[]>([
    {
      deviceType: 'fanlocal',
      moduleName: '测试局扇',
      pageType: '',
      moduleData: {
        header: {
          show: true,
          showSelector: true,
          showSlot: true,
          selector: {
            prop: 'strinstallpos',
          },
          slot: {
            prop: 'strinstallpos',
          },
        },
        background: {
          show: true,
          type: 'video',
          link: '/src/assets/vedio/fanLocal.mp4',
        },
        layout: ['board'],
        board: [
          {
            label: '风速1',
            type: 'A',
            layout: 'val-top',
            prop: 'readData.windSpeed1',
          },
          {
            label: '风速2',
            type: 'B',
            layout: 'label-top',
            prop: 'readData.windSpeed2',
          },
        ],
        list: [],
        chart: [],
        table: [],
      },
      showStyle: {
        size: 'width:450px;height:280px;',
        version: 'enhanced',
        position: 'top:60px;left:0;',
      },
    },
    {
      deviceType: 'sys_majorpath',
      moduleName: '测试折线图',
      pageType: '',
      moduleData: {
        header: {
          show: true,
          showSelector: true,
          showSlot: true,
          selector: {
            prop: 'strinstallpos',
          },
          slot: {
            prop: 'strinstallpos',
          },
        },
        background: {
          show: false,
          type: 'video',
          link: '',
        },
        layout: ['chart'],
        board: [],
        list: [],
        chart: [
          {
            type: 'line_area',
            readFrom: 'majorpath.paths',
            xAxis: [{ prop: 'name' }],
            yAxis: [
              { label: 'Drag', align: 'left' },
              { label: 'M3', align: 'right' },
            ],
            series: [
              { label: 'Drag', prop: 'drag' },
              { label: 'M3', prop: 'm3' },
              // { label: '回2', prop: 'hui2' },
            ],
          },
        ],
        table: [],
      },
      showStyle: {
        size: 'width:450px;height:280px;',
        version: 'enhanced',
        position: 'top:350px;left:0;',
      },
    },
    {
      deviceType: 'warn',
      moduleName: '测试报警',
      pageType: '',
      moduleData: {
        header: {
          show: false,
          showSelector: false,
          showSlot: true,
          selector: {
            prop: 'strinstallpos',
          },
          slot: {
            prop: 'netstatus.val',
            formatter: '网络异常：${} 台',
          },
        },
        background: {
          show: false,
          type: 'video',
          link: '',
        },
        layout: ['fire_warn'],
        // layout: ['list'],
        board: [],
        chart: [],
        table: [],
        list: [
          {
            label: '正常',
            prop: 'blue.val',
            color: 'blue',
            type: 'B',
          },
          {
            label: '告警',
            prop: 'orange.val',
            color: 'orange',
            type: 'B',
          },
          {
            label: '报警',
            prop: 'yellow.val',
            color: 'yellow',
            type: 'B',
          },
          {
            label: '危险',
            prop: 'red.val',
            color: 'red',
            type: 'B',
          },
          {
            label: '错误',
            prop: 'alarm.val',
            color: 'green',
            type: 'B',
          },
        ],
      },
      showStyle: {
        size: 'width:450px;height:280px;',
        version: 'enhanced',
        position: 'top:640px;left:0;',
      },
    },
    {
      deviceType: 'midinfo',
      moduleName: '测试中间模块',
      pageType: '',
      moduleData: {
        header: {
          show: false,
          showSelector: false,
          showSlot: false,
          selector: {
            icon: 'SwapOutlined',
            prop: 'strinstallpos',
          },
          slot: {
            icon: 'SwapOutlined',
            prop: 'strinstallpos',
          },
        },
        background: {
          show: false,
          type: 'video',
          link: '',
        },
        layout: ['chart'],
        board: [],
        list: [],
        table: [],
        chart: [
          {
            type: 'bar',
            readFrom: 'sysdata.history',
            xAxis: [{ prop: 'time' }],
            yAxis: [
              { label: '回1', align: 'left' },
              // { label: '回2', align: 'right' },
            ],
            series: [
              { label: '回1', prop: 'hui1' },
              // { label: '回2', prop: 'hui2' },
            ],
          },
        ],
      },
      showStyle: {
        size: 'width:1000px;height:280px;',
        version: 'enhanced',
        position: 'top:640px;left:460px;',
      },
    },
    {
      deviceType: 'sys_wind',
      moduleName: '测试测风装置',
      pageType: '',
      moduleData: {
        header: {
          show: false,
          showSelector: true,
          showSlot: false,
          selector: {
            prop: 'strinstallpos',
          },
          slot: {
            prop: 'strinstallpos',
          },
        },
        background: {
          show: false,
          type: 'video',
          link: '',
        },
        layout: ['blast_delta'],
        board: [
          {
            label: '风量',
            type: 'C',
            layout: 'val-top',
            prop: 'f1Val',
          },
          {
            label: '风速',
            type: 'C',
            layout: 'val-top',
            prop: 'f2Val',
          },
        ],
        list: [],
        table: [],
        chart: [
          {
            type: 'pie',
            readFrom: 'readData',
            xAxis: [{ prop: 'stationname' }],
            yAxis: [
              { label: '风量1', align: 'left' },
              // { label: '回2', align: 'right' },
            ],
            series: [
              { label: '风量1', prop: 'va' },
              { label: '风量2', prop: 'va2' },
              // { label: '回2', prop: 'hui2' },
            ],
          },
        ],
      },
      showStyle: {
        size: 'width:450px;height:280px;',
        version: 'enhanced',
        position: 'top:60px;right:0;',
      },
    },
    {
      deviceType: 'sys_majorpath',
      moduleName: '测试关键路线',
      pageType: '',
      moduleData: {
        header: {
          show: false,
          showSelector: true,
          showSlot: true,
          selector: {
            prop: 'devicePos',
          },
          slot: {
            prop: 'devicePos',
          },
        },
        background: {
          show: false,
          type: 'video',
          link: '',
        },
        layout: ['table'],
        board: [],
        list: [],
        table: [
          {
            readFrom: 'history',
            columns: [
              {
                prop: 'index',
                label: '编号',
              },
              {
                prop: 'time',
                label: '报警时间',
              },
              {
                prop: 'warn',
                label: '报警内容',
              },
            ],
          },
        ],
        chart: [],
      },
      showStyle: {
        size: 'width:450px;height:280px;',
        version: 'enhanced',
        position: 'top:350px;right:0;',
      },
    },
    {
      deviceType: 'sys_majorpath',
      moduleName: '测试关键路线',
      pageType: '',
      moduleData: {
        header: {
          show: false,
          showSelector: true,
          showSlot: true,
          selector: {
            prop: 'devicePos',
          },
          slot: {
            prop: 'devicePos',
          },
        },
        background: {
          show: false,
          type: 'video',
          link: '',
        },
        layout: ['fire_control'],
        board: [],
        list: [],
        table: [],
        chart: [],
      },
      showStyle: {
        size: 'width:450px;height:280px;',
        version: 'enhanced',
        position: 'top:640px;right:0;',
      },
    },
  ]);
  const isOriginal = true;
  const visible = ref(true);
  // const { configs, isOriginal, fetchConfigs } = useInitConfigs();

  onMounted(() => {
    // fetchConfigs();
  });
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .company-home {
    width: 100%;
    height: 100%;
    color: @white;
    position: relative;

    .top-bg {
      width: 100%;
      height: 56px;
      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
      position: absolute;
      z-index: 1;
      .main-title {
        height: 56px;
        font-family: 'douyuFont';
        font-size: 20px;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    // .module-left {
    //   position: absolute;
    //   width: 450px;
    //   height: 280px;
    //   left: 0;
    // }
    // .module-right {
    //   position: absolute;
    //   width: 450px;
    //   height: 280px;
    //   right: 0;
    // }
    // .module-bottom {
    //   position: absolute;
    //   width: 1000px;
    //   height: 280px;
    // }
    .module-dropdown {
      padding: 10px;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border-bottom: 2px solid #3df6ff;
      color: #fff;
      position: absolute;
      top: 70px;
      right: 460px;
    }
    .module-dropdown-original {
      padding: 10px;
      background-image: linear-gradient(to bottom, #036886, #072a40);
      border-bottom: 2px solid #3df6ff;
      color: #fff;
      position: absolute;
      top: 70px;
      right: 460px;
    }
  }
</style>