mky-vent-base/src/views/vent/home/billboard/mock.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <a-button
      preIcon="ant-design:rollback-outlined"
      type="text"
      size="small"
      style="position: absolute; left: 15px; top: 15px; color: #fff"
      @click="getBack"
    >
      回到首页
    </a-button>
    <div class="top-bg">
      <div class="main-title">{{ mainTitle }}</div>
    </div>
    <a-row class="company-content" :gutter="10">
      <!-- <a-col v-for="(item, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
        <BaseCard :title="item.orgname || '/'" @open="openHandler(item.ip)">
          <component :is="componentMap[billboardType]" :data="item" />
        </BaseCard>
      </a-col> -->
      <a-col v-for="(render, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
        <component :is="render" />
      </a-col>
    </a-row>
    <!-- <div v-if="showBtn" style="position: absolute; top: 0; left: 0">
      <a-button @click="billboardType = 'DustStatus'">切换粉尘看板</a-button>
      <a-button @click="billboardType = 'FireStatus'">切换火灾看板</a-button>
      <a-button @click="billboardType = 'FileOverview'">切换文件看板</a-button>
      <a-button @click="billboardType = 'VentilationStatus'">切换风扇看板</a-button>
      <a-button @click="billboardType = 'GasStatus'">切换瓦斯看板</a-button>
    </div> -->
    <ArrowButton point-to="left" class="company__arrow_left" @click="changeCurrentPage(-1)" />
    <ArrowButton point-to="right" class="company__arrow_right" @click="changeCurrentPage(1)" />
  </div>
</template>
<script lang="ts" setup>
  /**
   * 本文件夹下的内容是公司端看板页的内容：
   *
   * 看板有多种类型，包含了监测、跳转矿端的功能。
   *
   * 菜单配置相关信息：使用vent/home/billboard/gas及类似组件进行配置（即 ./gas.vue ./fire.vue 等）
   *
   * 支持的看板类型如下：'DustStatus'、'FireStatus'、'FileOverview'、'VentilationStatus'、'GasStatus'、'Summary'
   *
   */
  import { VNode, computed, h, onMounted, ref } from 'vue';
  import BaseCard from './components/BaseCard.vue';
  import ArrowButton from './components/ArrowButton.vue';
  // import { useRoute } from 'vue-router';
  // import { getSummary } from './billboard.api';
  import { useAutoLogin } from '../../../../hooks/vent/useAutoLogin';
  import DustStatus from './components/DustStatus.vue';
  import FileOverview from './components/FileOverview.vue';
  import FireStatus from './components/FireStatus.vue';
  import VentilationStatus from './components/VentilationStatus.vue';
  import GasStatus from './components/GasStatus.vue';
  import Summary from './components/Summary.vue';
  import Warning from './components/Warning.vue';
  import DuskRisk from './components/DustRisk.vue';
  import _ from 'lodash-es';
  import { useRouter } from 'vue-router';
  import { mockSHENDONG } from './billboard.data';
  // import mapComponent from './components/3Dmap/index.vue';

  const props = defineProps<{
    billboardType: string;
    title?: string;
  }>();

  // const route = useRoute();
  const { open } = useAutoLogin();
  const router = useRouter();

  // 组件Map，不同type使用不用组件
  const componentMap = {
    DustStatus,
    FileOverview,
    VentilationStatus,
    GasStatus,
    FireStatus,
    Summary,
    Warning,
    DuskRisk,
  };

  const mainTitle = props.title || '国能神东一通三防管控平台';

  // 看板相关的基础配置
  const billboards = ref<(() => VNode)[]>([]);

  function fetchBillboards() {
    Promise.resolve(mockSHENDONG).then((r) => {
      billboards.value = r.map((el) => {
        return () =>
          h(
            BaseCard,
            {
              title: el.orgname || '/',
              onOpen: () => openHandler(el.ip),
            },
            {
              default: () =>
                h(componentMap[props.billboardType], {
                  data: JSON.parse(JSON.stringify(el)),
                }),
            }
          );
      });
    });
  }

  // 看板分页相关的配置
  const pageSize = 8;
  const currentPage = ref(1);
  const totalPage = computed(() => {
    return Math.ceil(billboards.value.length / pageSize) + 1;
  });

  // 能真正在页面上展示的看板
  const shownBillboards = computed(() => {
    return billboards.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize);
  });

  function changeCurrentPage(pagecount: number) {
    currentPage.value = Math.max((currentPage.value + pagecount) % totalPage.value, 1);
  }

  // const billboardType = ref('DustStatus');
  // const showBtn = ref(true);

  // 组件Map，不同type需要跳转到不同的矿端页面
  const routePathMap = {
    DustStatus: '/dust/warn/home',
    FileOverview: '/fileManager/fileDetail/home',
    VentilationStatus: '/micro-vent-3dModal/dashboard/analysis',
    GasStatus: '/gas/warn/home',
    FireStatus: '/fire/warn/home',
    Summary: '/monitorChannel/monitor-alarm-home',
  };
  // 页面跳转
  function openHandler(ip: string) {
    // const url = `http://localhost:3100/login`;
    const url = `http://${ip}:8092${routePathMap[props.billboardType]}`;
    open(url);
  }

  // 返回首页
  function getBack() {
    router.push('/company/home');
  }

  onMounted(() => {
    // if (route.query.type) {
    //   billboardType.value = route.query.type as string;
    //   showBtn.value = false;
    // }
    fetchBillboards();
  });
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .company-home {
    width: 100%;
    height: 100%;
    color: #fff;
    position: relative;
    background: url('@/assets/images/company/content-bg.png') no-repeat;
    background-size: 100% 100%;
    // background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
    // background-size: 100% 100%;

    .top-bg {
      width: 100%;
      height: 97px;
      background: url('@/assets/images/company/top-bg.png') no-repeat center;
      .main-title {
        height: 96px;
        font-family: 'douyuFont';
        font-size: 20px;
        letter-spacing: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .company-content {
      width: 100%;
      height: calc(100% - 97px);
      padding: 30px 100px 0 100px;
    }
    .company__arrow_left {
      position: absolute;
      top: calc(50% - 38px);
      left: 15px;
    }
    .company__arrow_right {
      position: absolute;
      top: calc(50% - 38px);
      right: 15px;
    }
  }
</style>