[Feat 0000] 看板页面开发

src/views/vent/home/billboard/billboard.data.ts

@@ -10,36 +10,43 @@ import rightImg from '/@/assets/images/files/homes/sp.svg';
 export const BILLBOARDS = [
   {
     title: 'A矿',
+    type: 'dust',
   },
   {
     title: 'B矿',
+    type: 'fire',
   },
   {
     title: 'C矿',
+    type: 'file',
   },
   {
     title: 'D矿',
+    type: 'ventilate',
   },
   {
     title: 'E矿',
+    type: 'gas',
   },
   {
     title: 'F矿',
+    type: 'dust',
   },
   {
     title: 'G矿',
+    type: 'fire',
   },
   {
     title: 'H矿',
+    type: 'file',
   },
   {
     title: 'I矿',
+    type: 'ventilate',
   },
   {
     title: 'J矿',
-  },
-  {
-    title: 'K矿',
+    type: 'gas',
   },
 ];
 

src/views/vent/home/billboard/components/BaseCard.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="card" :style="{ height: `${height}px` }">
-    <p class="card_title">
+    <p class="card_title" @click="alert">
       <slot name="title">{{ title }}</slot>
     </p>
     <div class="card_content" :style="{ height: `${contentHeight}px` }">
@@ -25,6 +25,10 @@
       contentHeight: 300,
     }
   );
+
+  function alert() {
+    window.alert('123');
+  }
 </script>
 <style lang="less" scoped>
   @font-face {

src/views/vent/home/billboard/components/CommonTitle.vue

@@ -36,5 +36,6 @@
 
   .common-title__value {
     color: @vent-gas-primary-text;
+    padding-right: 10px;
   }
 </style>

src/views/vent/home/billboard/components/FileOverview.vue

@@ -23,8 +23,10 @@
   }
 
   .card-b {
+    height: 100%;
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     .box {
       display: flex;

src/views/vent/home/billboard/components/FireStatus.vue

@@ -8,6 +8,7 @@
     :label="item.label"
     :value="data[item.prop]"
     :type="i % 2 ? 'green' : 'blue'"
+    class="mt-5px"
   />
 </template>
 <script lang="ts" setup>

src/views/vent/home/billboard/components/GasStatus.vue

@@ -1,11 +1,11 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Row>
-    <Col v-for="(item, i) in headerConfig" :key="`svvhbcgs${i}`" :span="12">
+  <Row justify="space-around">
+    <Col v-for="(item, i) in headerConfig" :key="`svvhbcgs${i}`" :span="10">
       <LargeBoard :label="item.label" :value="data[item.prop]" :type="item.type" />
     </Col>
-    <CommonTable class="mt-10px" :columns="BASIC_COLUMN" :data="data" />
   </Row>
+  <CommonTable class="mt-10px" :columns="BASIC_COLUMN" :data="data" />
 </template>
 <script lang="ts" setup>
   import { Row, Col } from 'ant-design-vue';

src/views/vent/home/billboard/components/MiniBoard.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  /** 宽高固定 205 * 62 */
+  /** 宽高固定 auto * 62 */
   withDefaults(
     defineProps<{
       label: string;
@@ -31,10 +31,10 @@
   .list-item {
     height: 62px;
     line-height: 62px;
-    width: 205px;
+    // width: 200px;
     padding: 0 30px;
     box-sizing: border-box;
-    background-size: 100% 100%;
+    background-size: 100% auto;
   }
 
   .list-item-green-to-right {

src/views/vent/home/billboard/components/VentilationStatus.vue

@@ -1,17 +1,18 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Row>
+  <Row justify="space-between">
     <Col v-for="(item, i) in headerConfig" :key="`svvhbcvs${i}`" :span="12">
       <MiniBoard :label="item.label" :value="data[item.prop]" :type="item.type" />
     </Col>
     <div class="ventilate-status-card">
       <CommonTitle label="通风系统数量" :value="ventilatorCount" />
-      <Tree class="h-180px" :tree-data="treeData" @click="consoleLog" @select="consoleLog" />
+      <BasicTree class="ventilate-status-card__tree" :tree-data="treeData" :virtual="false" />
     </div>
   </Row>
 </template>
 <script lang="ts" setup>
-  import { Row, Col, Tree } from 'ant-design-vue';
+  import { Row, Col } from 'ant-design-vue';
+  import { BasicTree } from '/@/components/Tree';
   import type { TreeProps } from 'ant-design-vue';
   import { VENTILATION_STATUS_HEADER_CONFIG } from '../billboard.data';
   import MiniBoard from './MiniBoard.vue';
@@ -30,24 +31,28 @@
         {
           title: 'parent 1-0',
           key: '0-0-0',
-          disabled: true,
-          children: [
-            { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
-            { title: 'leaf', key: '0-0-0-1' },
-          ],
         },
         {
           title: 'parent 1-1',
           key: '0-0-1',
-          children: [{ key: '0-0-1-0', title: 'sss' }],
+        },
+      ],
+    },
+    {
+      title: 'parent 2',
+      key: '1-0',
+      children: [
+        {
+          title: 'parent 2-0',
+          key: '1-0-0',
+        },
+        {
+          title: 'parent 2-1',
+          key: '1-0-1',
         },
       ],
     },
   ];
-
-  function consoleLog(...args) {
-    console.log(...args);
-  }
 </script>
 <style lang="less" scoped>
   .ventilate-status-card {
@@ -57,9 +62,14 @@
     background-size: 100% 100%;
     background: url('@/assets/images/company/area1.png') no-repeat center;
 
-    ::v-deep(.zxm-tree) {
-      color: @white;
-      background-color: transparent;
+    // ::v-deep(.zxm-tree) {
+    //   color: @white;
+    //   background-color: transparent;
+    // }
+
+    .ventilate-status-card__tree {
+      height: 130px;
+      overflow: auto;
     }
   }
 </style>

src/views/vent/home/billboard/index.vue

@@ -5,23 +5,11 @@
       <div class="main-title">{{ mainTitle }}</div>
     </div>
     <a-row class="company-content" :gutter="10">
-      <!-- <Transition name="fade-in"> -->
-      <a-col v-for="(item, i) in cards" :key="i" :span="6">
+      <a-col v-for="(item, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
         <BaseCard :title="item.title">
-          <!-- <CommonTitle class="mb-10px" label="测试" value="是我啊" />
-          <CommonTable :columns="COLUMN_A" :data="[{ a: 1, b: 2, c: 3 }]" /> -->
-          <!-- <ListItemA icon="warning-CO-2" label="LIA" value="233" type="blue" />
-          <ListItemA icon="warning-smoke-2" label="LIA" value="233" type="green" />
-          <ListItemB label="LIB" value="244" type="green-to-right" />
-          <ListItemB label="LIB" value="244" type="green-to-left" />
-          <ListItemB label="LIB" value="244" type="blue-to-right" />
-          <ListItemB label="LIB" value="244" type="blue-to-left" /> -->
-          <!-- <ListItemC label="LIC" value="244" type="to-top-right" />
-          <ListItemC label="LIC" value="244" type="to-bottom-right" /> -->
-          <GasStatus />
+          <component :is="COMPONENTS_MAP.get(item.type)" />
         </BaseCard>
       </a-col>
-      <!-- </Transition> -->
     </a-row>
     <ArrowButton point-to="left" class="company__arrow_left" @click="changeCurrentPage(-1)" />
     <ArrowButton point-to="right" class="company__arrow_right" @click="changeCurrentPage(1)" />
@@ -31,19 +19,20 @@
   import { computed, ref } from 'vue';
   import BaseCard from './components/BaseCard.vue';
   import ArrowButton from './components/ArrowButton.vue';
-  import { BILLBOARDS } from './billboard.data';
-  import GasStatus from './components/GasStatus.vue';
+  import { BILLBOARDS, COMPONENTS_MAP } from './billboard.data';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const mainTitle = computed(() => '国家能源神东煤炭集团');
 
   // 一页最多支持几个看板项
+  const billboards = ref(BILLBOARDS); // for test
   const pageSize = 8;
   // 当前页
   const currentPage = ref(1);
-  const totalPage = Math.ceil(BILLBOARDS.length / pageSize) + 1;
-  const cards = computed<{ title: string }[]>(() => {
-    return BILLBOARDS.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize);
+  const totalPage = 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, 1);
@@ -60,6 +49,8 @@
     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%;
 
@@ -67,8 +58,6 @@
       width: 100%;
       height: 97px;
       background: url('@/assets/images/company/top-bg.png') no-repeat center;
-      position: absolute;
-      z-index: 1;
       .main-title {
         height: 96px;
         font-family: 'douyuFont';
@@ -82,11 +71,8 @@
 
     .company-content {
       width: 100%;
-      height: 100%;
-      background: url('@/assets/images/company/content-bg.png') no-repeat;
-      background-size: 100% 100%;
-      pointer-events: none;
-      padding: 100px 100px 0 100px;
+      height: calc(100% - 97px);
+      padding: 50px 100px 0 100px;
     }
     .company__arrow_left {
       position: absolute;