[Wip 0000] 首页看板页面开发

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

@@ -1,3 +1,12 @@
+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 leftImg from '/@/assets/images/files/homes/file.svg';
+import rightImg from '/@/assets/images/files/homes/sp.svg';
+
+// 各个煤矿看板的配置
 export const BILLBOARDS = [
   {
     title: 'A矿',
@@ -34,7 +43,8 @@ export const BILLBOARDS = [
   },
 ];
 
-export const COLUMN_A = [
+// 基础的表格列配置，针对普通设备
+export const BASIC_COLUMN = [
   {
     name: '设备类型',
     prop: 'a',
@@ -48,3 +58,90 @@ export const COLUMN_A = [
     prop: 'c',
   },
 ];
+
+// 火灾状态监测相关的内容配置项
+export const FIRE_STATUS_LIST = [
+  {
+    icon: 'warning-optical-fiber',
+    label: '矿井光纤测温系统报警',
+    prop: 'a',
+  },
+  {
+    icon: 'warning-tubes',
+    label: '矿井束管监测系统报警',
+    prop: 'a',
+  },
+  {
+    icon: 'warning-smoke-2',
+    label: '矿井烟雾传感器报警',
+    prop: 'a',
+  },
+  {
+    icon: 'warning-CO-2',
+    label: '矿井CO传感器报警',
+    prop: 'a',
+  },
+  {
+    icon: 'warning-temp',
+    label: '矿井温度传感器报警',
+    prop: 'a',
+  },
+  {
+    icon: 'warning-max-temp',
+    label: '矿井温度传感器最高值',
+    prop: 'a',
+  },
+];
+
+// 文件总览相关的内容配置项
+export const FILE_OVERVIEW_CONFIG = [
+  { src: leftImg, text: '文档总数', num: 233, id: 'file_cfg_001' },
+  { src: rightImg, text: '待审批数', num: 50, id: 'file_cfg_002' },
+];
+
+// 通风状态监测相关的内容配置项
+export const VENTILATION_STATUS_HEADER_CONFIG = [
+  {
+    label: '总进风量',
+    prop: 'a',
+    type: 'blue-to-left',
+  },
+  {
+    label: '总回风量',
+    prop: 'a',
+    type: 'green-to-right',
+  },
+  {
+    label: '总需风量',
+    prop: 'a',
+    type: 'green-to-left',
+  },
+  {
+    label: '通风巷道总长度',
+    prop: 'a',
+    type: 'blue-to-right',
+  },
+];
+
+// 瓦斯状态监测相关的内容配置项
+export const GAS_STATUS_HEADER_CONFIG = [
+  {
+    label: '瓦斯风险等级',
+    prop: 'a',
+    type: 'to-bottom-right',
+  },
+  {
+    label: '瓦斯鉴定等级',
+    prop: 'a',
+    type: 'to-top-right',
+  },
+];
+
+// 各个监测类型对应的要展示的组件
+export const COMPONENTS_MAP = new Map([
+  ['dust', DustStatus],
+  ['fire', FireStatus],
+  ['file', FileOverview],
+  ['ventilate', VentilationStatus],
+  ['gas', GasStatus],
+]);

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

@@ -16,13 +16,13 @@
     defineProps<{
       title: string;
       /** 卡片总体的高度 */
-      height: number;
+      height?: number;
       /** 卡片内容部分的高度 */
-      contentHeight: number;
+      contentHeight?: number;
     }>(),
     {
-      height: 320,
-      contentHeight: 250,
+      height: 370,
+      contentHeight: 300,
     }
   );
 </script>
@@ -43,5 +43,6 @@
     font-family: 'douyuFont';
   }
   .card_content {
+    padding: 10px 0 0 0;
   }
 </style>

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

@@ -10,10 +10,15 @@
   </div>
 </template>
 <script lang="ts" setup>
-  defineProps<{
-    label: string;
-    value: string;
-  }>();
+  withDefaults(
+    defineProps<{
+      label: string;
+      value?: string;
+    }>(),
+    {
+      value: '/',
+    }
+  );
 
   defineEmits(['click']);
 </script>

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

@@ -1,12 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <CommonTitle class="mb-10px" label="测试" value="是我啊" />
-  <CommonTable :columns="COLUMN_A" :data="[{ a: 1, b: 2, c: 3 }]" />
-</template>
-<script lang="ts" setup>
-  import CommonTable from './CommonTable.vue';
-  import CommonTitle from './CommonTitle.vue';
-  import { COLUMN_A } from '../billboard.data';
-  // import mapComponent from './3Dmap/index.vue';
-</script>
-<style lang="less" scoped></style>

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

@@ -1,45 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <CommonTitle class="mb-10px" label="测试" value="是我啊" />
-  <ListItemA v-for="(item, i) in list" :key="item.icon" :icon="item.icon" :label="item.label" :value="item.value" :type="i % 2 ? 'green' : 'blue'" />
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import CommonTitle from './components/CommonTitle.vue';
-  import ListItemA from './ListItemA.vue';
-  // import mapComponent from './components/3Dmap/index.vue';
-
-  const list = ref([
-    {
-      icon: 'warning-optical-fiber',
-      label: 'a',
-      value: 'a',
-    },
-    {
-      icon: 'warning-tubes',
-      label: 'a',
-      value: 'a',
-    },
-    {
-      icon: 'warning-smoke-2',
-      label: 'a',
-      value: 'a',
-    },
-    {
-      icon: 'warning-CO-2',
-      label: 'a',
-      value: 'a',
-    },
-    {
-      icon: 'warning-temp',
-      label: 'a',
-      value: 'a',
-    },
-    {
-      icon: 'warning-max-temp',
-      label: 'a',
-      value: 'a',
-    },
-  ]);
-</script>
-<style lang="less" scoped></style>

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

@@ -1,24 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <CommonTitle class="mb-10px" label="测试" value="是我啊" />
-  <Row>
-    <Col :offset="2" :span="9">
-      <ListItemB :label=""></ListItemB>
-    </Col>
-  </Row>
-</template>
-<script lang="ts" setup>
-  import { Row, Col } from 'ant-design-vue';
-  import { computed, ref } from 'vue';
-  import BaseCard from './components/BaseCard.vue';
-  import ArrowButton from './components/ArrowButton.vue';
-  import CommonTable from './components/CommonTable.vue';
-  import CommonTitle from './components/CommonTitle.vue';
-  import { BILLBOARDS, COLUMN_A } from './billboard.data';
-  import ListItemA from './components/ListItemA.vue';
-  import ListItemB from './ListItemB.vue';
-  import ListItemC from './components/ListItemC.vue';
-  import FileOverview from './components/FileOverview.vue';
-  // import mapComponent from './components/3Dmap/index.vue';
-</script>
-<style lang="less" scoped></style>

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

@@ -1,19 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <CommonTitle class="mb-10px" label="测试" value="是我啊" />
-  <CommonTable :columns="COLUMN_A" :data="[{ a: 1, b: 2, c: 3 }]" />
-</template>
-<script lang="ts" setup>
-  import { computed, ref } from 'vue';
-  import BaseCard from './components/BaseCard.vue';
-  import ArrowButton from './components/ArrowButton.vue';
-  import CommonTable from './components/CommonTable.vue';
-  import CommonTitle from './components/CommonTitle.vue';
-  import { BILLBOARDS, COLUMN_A } from './billboard.data';
-  import ListItemA from './components/ListItemA.vue';
-  import ListItemB from './components/ListItemB.vue';
-  import ListItemC from './components/ListItemC.vue';
-  import FileOverview from './components/FileOverview.vue';
-  // import mapComponent from './components/3Dmap/index.vue';
-</script>
-<style lang="less" scoped></style>

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

@@ -0,0 +1,16 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <CommonTitle class="mb-10px" label="矿井火灾风险性等级" :value="risk" />
+  <CommonTable :columns="BASIC_COLUMN" :data="data" />
+</template>
+<script lang="ts" setup>
+  import CommonTable from './CommonTable.vue';
+  import CommonTitle from './CommonTitle.vue';
+  import { BASIC_COLUMN } from '../billboard.data';
+  import { ref } from 'vue';
+  // import mapComponent from './3Dmap/index.vue';
+
+  const risk = ref('低风险');
+  const data = ref([{ a: 1, b: 2, c: 3 }]);
+</script>
+<style lang="less" scoped></style>

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

@@ -9,15 +9,11 @@
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import leftImg from '/@/assets/images/files/homes/file.svg';
-  import rightImg from '/@/assets/images/files/homes/sp.svg';
+  import { FILE_OVERVIEW_CONFIG } from '../billboard.data';
 
   defineEmits(['click']);
 
-  let tabs = ref([
-    { src: leftImg, text: '文档总数', num: 233, id: 'file_cfg_001' },
-    { src: rightImg, text: '待审批数', num: 50, id: 'file_cfg_002' },
-  ]);
+  let tabs = ref(FILE_OVERVIEW_CONFIG);
 </script>
 
 <style lang="less" scoped>

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

@@ -0,0 +1,24 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <CommonTitle class="mb-10px" label="矿井火灾风险性等级" :value="risk" />
+  <ListItem
+    v-for="(item, i) in list"
+    :key="item.icon"
+    :icon="item.icon"
+    :label="item.label"
+    :value="data[item.prop]"
+    :type="i % 2 ? 'green' : 'blue'"
+  />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import CommonTitle from './CommonTitle.vue';
+  import ListItem from './ListItem.vue';
+  import { FIRE_STATUS_LIST } from '../billboard.data';
+
+  const list = ref(FIRE_STATUS_LIST);
+  const risk = ref('低风险');
+
+  const data = ref({});
+</script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,21 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Row>
+    <Col v-for="(item, i) in headerConfig" :key="`svvhbcgs${i}`" :span="12">
+      <LargeBoard :label="item.label" :value="data[item.prop]" :type="item.type" />
+    </Col>
+    <CommonTable class="mt-10px" :columns="BASIC_COLUMN" :data="data" />
+  </Row>
+</template>
+<script lang="ts" setup>
+  import { Row, Col } from 'ant-design-vue';
+  import { GAS_STATUS_HEADER_CONFIG, BASIC_COLUMN } from '../billboard.data';
+  import LargeBoard from './LargeBoard.vue';
+  import { ref } from 'vue';
+  import CommonTable from './CommonTable.vue';
+  // import mapComponent from './components/3Dmap/index.vue';
+
+  const headerConfig = ref(GAS_STATUS_HEADER_CONFIG);
+  const data = ref([{ a: 1, b: 2, c: 3 }]);
+</script>
+<style lang="less" scoped></style>

src/views/vent/home/billboard/components/ListItemC.vue → src/views/vent/home/billboard/components/LargeBoard.vue

@@ -11,13 +11,17 @@
 </template>
 <script lang="ts" setup>
   /** 宽高固定 158 * 93 */
-  defineProps<{
-    label: string;
-    value: string;
-    /** 背景图的类型 */
-    type: 'to-top-right' | 'to-bottom-right';
-  }>();
-
+  withDefaults(
+    defineProps<{
+      label: string;
+      value?: string;
+      /** 背景图的类型 'to-top-right' | 'to-bottom-right' */
+      type: string;
+    }>(),
+    {
+      value: '/',
+    }
+  );
   defineEmits(['click']);
 </script>
 <style lang="less" scoped>

src/views/vent/home/billboard/components/ListItemA.vue → src/views/vent/home/billboard/components/ListItem.vue

@@ -18,13 +18,18 @@
   import { SvgIcon } from '/@/components/Icon';
 
   /** 宽高固定 364 * 34 */
-  defineProps<{
-    icon: string;
-    label: string;
-    value: string;
-    /** 背景图的类型 */
-    type: 'blue' | 'green';
-  }>();
+  withDefaults(
+    defineProps<{
+      icon: string;
+      label: string;
+      value?: string;
+      /** 背景图的类型 */
+      type: 'blue' | 'green';
+    }>(),
+    {
+      value: '/',
+    }
+  );
 
   defineEmits(['click']);
 </script>

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

@@ -10,13 +10,18 @@
   </div>
 </template>
 <script lang="ts" setup>
-  /** 宽高固定 205 * 68 */
-  defineProps<{
-    label: string;
-    value: string;
-    /** 背景图的类型 */
-    type: 'green-to-right' | 'green-to-left' | 'blue-to-right' | 'blue-to-left';
-  }>();
+  /** 宽高固定 205 * 62 */
+  withDefaults(
+    defineProps<{
+      label: string;
+      value?: string;
+      /** 背景图的类型 'green-to-right' | 'green-to-left' | 'blue-to-right' | 'blue-to-left' */
+      type: string;
+    }>(),
+    {
+      value: '/',
+    }
+  );
 
   defineEmits(['click']);
 </script>
@@ -24,8 +29,8 @@
   @import '@/design/vent/color.less';
 
   .list-item {
-    height: 68px;
-    line-height: 68px;
+    height: 62px;
+    line-height: 62px;
     width: 205px;
     padding: 0 30px;
     box-sizing: border-box;

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

@@ -0,0 +1,65 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Row>
+    <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" />
+    </div>
+  </Row>
+</template>
+<script lang="ts" setup>
+  import { Row, Col, Tree } from 'ant-design-vue';
+  import type { TreeProps } from 'ant-design-vue';
+  import { VENTILATION_STATUS_HEADER_CONFIG } from '../billboard.data';
+  import MiniBoard from './MiniBoard.vue';
+  import { ref } from 'vue';
+  import CommonTitle from './CommonTitle.vue';
+  // import mapComponent from './components/3Dmap/index.vue';
+
+  const headerConfig = ref(VENTILATION_STATUS_HEADER_CONFIG);
+  const data = ref({});
+  const ventilatorCount = ref('0');
+  const treeData: TreeProps['treeData'] = [
+    {
+      title: 'parent 1',
+      key: '0-0',
+      children: [
+        {
+          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' }],
+        },
+      ],
+    },
+  ];
+
+  function consoleLog(...args) {
+    console.log(...args);
+  }
+</script>
+<style lang="less" scoped>
+  .ventilate-status-card {
+    width: 406px;
+    margin-top: 10px;
+    box-sizing: border-box;
+    background-size: 100% 100%;
+    background: url('@/assets/images/company/area1.png') no-repeat center;
+
+    ::v-deep(.zxm-tree) {
+      color: @white;
+      background-color: transparent;
+    }
+  }
+</style>

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

@@ -18,7 +18,7 @@
           <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" /> -->
-          <FileOverview />
+          <GasStatus />
         </BaseCard>
       </a-col>
       <!-- </Transition> -->
@@ -31,13 +31,8 @@
   import { computed, ref } from 'vue';
   import BaseCard from './components/BaseCard.vue';
   import ArrowButton from './components/ArrowButton.vue';
-  import CommonTable from './components/CommonTable.vue';
-  import CommonTitle from './components/CommonTitle.vue';
-  import { BILLBOARDS, COLUMN_A } from './billboard.data';
-  import ListItemA from './components/ListItemA.vue';
-  import ListItemB from './components/ListItemB.vue';
-  import ListItemC from './components/ListItemC.vue';
-  import FileOverview from './components/FileOverview.vue';
+  import { BILLBOARDS } from './billboard.data';
+  import GasStatus from './components/GasStatus.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const mainTitle = computed(() => '国家能源神东煤炭集团');
@@ -91,7 +86,7 @@
       background: url('@/assets/images/company/content-bg.png') no-repeat;
       background-size: 100% 100%;
       pointer-events: none;
-      padding: 150px 100px 100px 100px;
+      padding: 100px 100px 0 100px;
     }
     .company__arrow_left {
       position: absolute;