Browse Source

[Feat 0000] 修改看板目录结构以支持多类型看版在路由上的配置

houzekong 9 months ago
parent
commit
acc2d0a5fd

+ 7 - 0
src/views/vent/home/billboard/dust.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Billboard billboard-type="DustStatus" />
+</template>
+<script lang="ts" setup>
+  import Billboard from './index.vue';
+</script>

+ 7 - 0
src/views/vent/home/billboard/file.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Billboard billboard-type="FileOverview" />
+</template>
+<script lang="ts" setup>
+  import Billboard from './index.vue';
+</script>

+ 7 - 0
src/views/vent/home/billboard/fire.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Billboard billboard-type="FireStatus" />
+</template>
+<script lang="ts" setup>
+  import Billboard from './index.vue';
+</script>

+ 7 - 0
src/views/vent/home/billboard/gas.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Billboard billboard-type="GasStatus" />
+</template>
+<script lang="ts" setup>
+  import Billboard from './index.vue';
+</script>

+ 17 - 18
src/views/vent/home/billboard/index.vue

@@ -11,13 +11,13 @@
         </BaseCard>
       </a-col>
     </a-row>
-    <div v-if="showBtn" style="position: absolute; top: 0; left: 0">
+    <!-- <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>
+    </div> -->
     <ArrowButton point-to="left" class="company__arrow_left" @click="changeCurrentPage(-1)" />
     <ArrowButton point-to="right" class="company__arrow_right" @click="changeCurrentPage(1)" />
   </div>
@@ -26,14 +26,9 @@
   /**
    * 本文件夹下的内容是公司端看板页的内容:
    *
-   * 看板有多种类型,包含了监测、跳转矿端的功能。常规的菜单配置好后,左上角会出现看板切换按钮,但当带url query的菜单配置好后则不会出现。
-   *
-   * 菜单配置相关信息:使用vent/home/billboard/index组件配置。配置时根据需要在路径后添加url query
+   * 看板有多种类型,包含了监测、跳转矿端的功能。
    *
-   * 例如:
-   * /billboard/dust?type=DustStatus(粉尘看板)
-   * /gasMonitor/home?type=GasStatus(瓦斯看板)
-   * /home(综合看板)
+   * 菜单配置相关信息:使用vent/home/billboard/gas及类似组件进行配置(即 ./gas.vue ./fire.vue 等)
    *
    * 支持的看板类型如下:'DustStatus'、'FireStatus'、'FileOverview'、'VentilationStatus'、'GasStatus'
    *
@@ -42,7 +37,7 @@
   import BaseCard from './components/BaseCard.vue';
   import ArrowButton from './components/ArrowButton.vue';
   import { BillboardType } from './billboard.data';
-  import { useRoute } from 'vue-router';
+  // import { useRoute } from 'vue-router';
   import { getSummary } from './billboard.api';
   import { useSSO } from '/@/hooks/vent/useSSO';
   import DustStatus from './components/DustStatus.vue';
@@ -52,7 +47,11 @@
   import GasStatus from './components/GasStatus.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
-  const route = useRoute();
+  const props = defineProps<{
+    billboardType: string;
+  }>();
+
+  // const route = useRoute();
   const { open } = useSSO();
 
   // 组件Map,不同type使用不用组件
@@ -99,20 +98,20 @@
     currentPage.value = Math.max((currentPage.value + pagecount) % totalPage.value, 1);
   }
 
-  const billboardType = ref('DustStatus');
-  const showBtn = ref(true);
+  // const billboardType = ref('DustStatus');
+  // const showBtn = ref(true);
 
   // 页面跳转
   function openHandler(ip: string) {
     const url = `http://${ip}:8092/login`;
-    open(url, routePathMap[billboardType.value]);
+    open(url, routePathMap[props.billboardType]);
   }
 
   onMounted(() => {
-    if (route.query.type) {
-      billboardType.value = route.query.type as string;
-      showBtn.value = false;
-    }
+    // if (route.query.type) {
+    //   billboardType.value = route.query.type as string;
+    //   showBtn.value = false;
+    // }
     fetchBillboards();
   });
 </script>

+ 7 - 0
src/views/vent/home/billboard/vent.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Billboard billboard-type="VentilationStatus" />
+</template>
+<script lang="ts" setup>
+  import Billboard from './index.vue';
+</script>