|
|
@@ -0,0 +1,209 @@
|
|
|
+<!-- 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>
|
