[Feat 0000]新增智能通风数据中心页面

src/views/vent/dataCenter/infoCenter/components/infoBox.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="info-box-bg">
+    <div class="box-top">
+      <div class="title">
+        <slot name="title"></slot>
+      </div>
+    </div>
+    <div class="box-center">
+      <div class="box-container">
+        <slot name="container"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup></script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('@/assets/font/douyuFont.otf');
+  }
+  @import '/@/design/theme.less';
+  .info-box-bg {
+    --image-border1: url('/@/assets/images/dataCenter/infoCenter/info-border1.png');
+    --image-border2: url('/@/assets/images/dataCenter/infoCenter/info-border2.png');
+    --image-border3: url('/@/assets/images/dataCenter/infoCenter/info-border3.png');
+    --image-border4: url('/@/assets/images/dataCenter/infoCenter/info-border4.png');
+    --image-title: url('/@/assets/images/dataCenter/infoCenter/info-title.png');
+
+    --container-color: #00213236;
+    --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+    width: 100%;
+    height: 100%;
+    min-height: 80px;
+    position: relative;
+    background: var(--image-border4) no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+    .box-top {
+      width: 220px;
+      height: 35px;
+
+      .title {
+        width: 100%;
+        height: 35px;
+        display: flex;
+        background-image: var(--image-title);
+        background-size: 100% 100%;
+        justify-content: center;
+        align-items: center;
+        color: #66ffff;
+        font-family: 'douyuFont';
+        padding-top: 5px;
+      }
+    }
+    .box-center {
+      width: calc(100% + 0.5px);
+      height: calc(100% - 50px);
+      position: relative;
+
+      .box-container {
+        width: calc(100% - 2px);
+        height: 100%;
+        min-height: 50px;
+        padding: 10px 25px;
+        color: #fff;
+        overflow-y: scroll;
+      }
+    }
+  }
+</style>

src/views/vent/dataCenter/infoCenter/index.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="company-home">
+    <customHeader>{{ mainTitle }}</customHeader>
+    <div class="company-content">
+      <div class="content-item item-1">
+        <infoBox class="infoBox1">
+          <template #title> 系统数据量 </template>
+          <template #container>
+            <div class="content-wrapper wrapper-1 grid">
+              <div class="data-item">
+                <div class="item-icon icon1"></div>
+                <div>
+                  <div class="label">接入系统数量</div>
+                  <div class="value">262 </div>
+                </div>
+              </div>
+              <div class="data-item">
+                <div class="item-icon icon2"></div>
+                <div>
+                  <div class="label">接入点位数量</div>
+                  <div class="value status-normal">14521</div>
+                </div>
+              </div>
+              <div class="data-item">
+                <div class="item-icon icon3"></div>
+                <div>
+                  <div class="label">数据存储量</div>
+                  <div class="value status-normal">14521</div>
+                </div>
+              </div>
+              <div class="data-item">
+                <div class="item-icon icon4"></div>
+                <div>
+                  <div class="label">消息总数量（条）</div>
+                  <div class="value status-normal">14521</div>
+                </div>
+              </div>
+              <div class="data-item">
+                <div class="item-icon icon5"></div>
+                <div>
+                  <div class="label">共享接口数量</div>
+                  <div class="value status-normal">14521</div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </infoBox>
+      </div>
+      <div class="content-item item-2 grid">
+        <infoBox class="infoBox2">
+          <template #title> 每日采集数据量 </template>
+          <template #container>
+            <div class="content-wrapper">
+              <CustomChart :chart-config="dailyNumOption" :chart-data="dailyNumData" height="250px" />
+            </div>
+          </template>
+        </infoBox>
+        <infoBox class="infoBox3">
+          <template #title> 系统数据量排名 </template>
+          <template #container>
+            <div class="content-wrapper">
+              <a-table size="small" :dataSource="sysData" :columns="sysDataColumn" :pagination="false" />
+            </div>
+          </template>
+        </infoBox>
+      </div>
+      <div class="content-item item-3">
+        <infoBox class="infoBox4">
+          <template #title> 系统接入情况 </template>
+          <template #container>
+            <div class="content-wrapper">
+              <a-table size="small" :dataSource="accessStatusData" :columns="accessStatusColumn" :pagination="false">
+                <template #action="{ record }">
+                  <div class="option-cont">
+                    <div class="view-icon"></div>
+                    <a class="table-action-link" @click="viewData(record)">查看数据</a>
+                  </div>
+                </template>
+              </a-table>
+            </div>
+          </template>
+        </infoBox>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import infoBox from './components/infoBox.vue';
+  import { sysDataColumn, sysData, accessStatusColumn, accessStatusData, dailyNumOption, dailyNumData } from './infoCenter.data';
+  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+  let mainTitle = ref('智能通风数据中心');
+
+  function viewData(record) {
+    console.log(record);
+  }
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('@/assets/font/douyuFont.otf');
+  }
+
+  .company-home {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    :deep(.vent-home-header) {
+      height: 50px;
+      background: url('@/assets/images/vent/home/modal-top.png') no-repeat center;
+      background-size: 100% 100%;
+    }
+
+    .company-content {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: calc(100% - 50px);
+      padding: 10px 20px;
+      --image-border1: url('/@/assets/images/dataCenter/infoCenter/info-border1.png');
+      --image-border2: url('/@/assets/images/dataCenter/infoCenter/info-border2.png');
+      --image-border3: url('/@/assets/images/dataCenter/infoCenter/info-border3.png');
+      --image-border4: url('/@/assets/images/dataCenter/infoCenter/info-border4.png');
+      --image-split-line: url('/@/assets/images/dataCenter/infoCenter/split-line.png');
+      --image-rank: url('/@/assets/images/dataCenter/infoCenter/rank-bg.png');
+      .content-item {
+        width: 100%;
+        overflow: hidden;
+        padding-bottom: 20px;
+      }
+      .item-1 {
+        height: 20%;
+      }
+      .item-2 {
+        height: 40%;
+        grid-template-columns: 6fr 4fr;
+        gap: 20px;
+        :deep(table) {
+          border-collapse: separate !important;
+          border-spacing: 0 10px !important;
+          .zxm-table-thead {
+            height: 35px;
+            background-color: unset !important;
+            .zxm-table-cell {
+              color: #66ffff !important;
+            }
+          }
+          .zxm-table-tbody {
+            background-color: unset !important;
+          }
+          .zxm-table-cell {
+            border: none !important;
+            background: none !important;
+            padding: 0px;
+          }
+          tr {
+            background: var(--image-rank) no-repeat !important;
+            background-size: 100% 100% !important;
+          }
+        }
+      }
+      .item-3 {
+        height: 40%;
+        :deep(table) {
+          border-collapse: collapse !important;
+          // border-spacing: 0 10px !important;
+          .zxm-table-thead {
+            height: 35px;
+            background-color: #0b2542 !important;
+            border: 1px solid #1f7eb5;
+            .zxm-table-cell {
+              border: none !important;
+              color: #37e0eb !important;
+            }
+          }
+          .zxm-table-tbody {
+            .zxm-table-row:nth-child(odd) {
+              background-color: #0e3455;
+            }
+
+            /* 偶数行背景色 */
+            .zxm-table-row:nth-child(even) {
+              background-color: #114268 !important;
+            }
+            .zxm-table-cell {
+              border: none !important;
+              background: none !important;
+            }
+          }
+        }
+      }
+      .infoBox1 {
+        background-color: var(--image-border1) no-repeat;
+      }
+      .infoBox2 {
+        background-color: var(--image-border2) no-repeat;
+      }
+      .infoBox3 {
+        background-color: var(--image-border3) no-repeat;
+      }
+      .infoBox4 {
+        background-color: var(--image-border4) no-repeat;
+      }
+    }
+    .wrapper-1 {
+      grid-template-columns: repeat(5, 1fr);
+      .data-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        &::after {
+          position: absolute;
+          right: 1px;
+          top: 5px;
+          display: block;
+          width: 2px;
+          height: 100%;
+          background: var(--image-split-line);
+          content: '';
+        }
+        &:last-child::after {
+          display: none;
+        }
+        .value {
+          font-family: 'douyuFont';
+          color: #66ffff;
+          margin-top: 20px;
+        }
+        .item-icon {
+          width: 80px;
+          height: 80px;
+          background-size: 100% 100%;
+          margin-right: 15px;
+        }
+        .icon1 {
+          background-image: url('/@/assets/images/dataCenter/infoCenter/icon1.png');
+        }
+        .icon2 {
+          background-image: url('/@/assets/images/dataCenter/infoCenter/icon2.png');
+        }
+        .icon3 {
+          background-image: url('/@/assets/images/dataCenter/infoCenter/icon3.png');
+        }
+        .icon4 {
+          background-image: url('/@/assets/images/dataCenter/infoCenter/icon4.png');
+        }
+        .icon5 {
+          background-image: url('/@/assets/images/dataCenter/infoCenter/icon5.png');
+        }
+      }
+    }
+    .option-cont {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .view-icon {
+        width: 20px;
+        height: 20px;
+        background-image: url('/@/assets/images/dataCenter/infoCenter/view-icon.png');
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+      }
+    }
+  }
+</style>

src/views/vent/dataCenter/infoCenter/infoCenter.data.ts

@@ -0,0 +1,228 @@
+import { BasicColumn } from '/@/components/Table';
+import { ModuleDataChart } from '/@/views/vent/deviceManager/configurationTable/types';
+
+import { h } from 'vue'; // 引入vue的h函数用于创建VNode
+
+// 系统数据排名
+export const sysDataColumn: BasicColumn[] = [
+  {
+    title: '',
+    align: 'center',
+    width: 60,
+    // 修正customRender的类型和返回值
+    customRender: ({ index }: { index: number }) => {
+      // 确保index是数字类型，避免算术运算错误
+      const numIndex = Number(index);
+      let rankImg = '';
+      if (numIndex === 0) {
+        rankImg = '/src/assets/images/dataCenter/infoCenter/rank-1.png';
+      } else if (numIndex === 1) {
+        rankImg = '/src/assets/images/dataCenter/infoCenter/rank-2.png';
+      } else if (numIndex === 2) {
+        rankImg = '/src/assets/images/dataCenter/infoCenter/rank-3.png';
+      } else {
+        rankImg = '/src/assets/images/dataCenter/infoCenter/rank-4.png';
+      }
+      return h(
+        'div',
+        {
+          style: {
+            width: '80px',
+            height: '35px',
+            backgroundImage: `url(${rankImg})`,
+            backgroundSize: '100% 100%',
+            backgroundRepeat: 'no-repeat',
+            position: 'relative',
+            margin: '0 15px',
+          },
+        },
+        [
+          // 排名文字
+          h(
+            'span',
+            {
+              style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)', 
+                color: '#fff',
+                fontSize: '14px',
+                fontWeight: 'bold',
+              },
+            },
+            `NO.${index + 1}`
+          ), // 显示NO.1、NO.2等
+        ]
+      );
+    },
+  },
+  {
+    title: '系统名称',
+    dataIndex: 'sysName',
+    align: 'center',
+  },
+  {
+    title: '数量',
+    dataIndex: 'sysNum',
+    align: 'center',
+  },
+];
+// 系统接入情况数据
+export const sysData = [
+  {
+    sysName: 'wscc',
+    sysNum: 32,
+  },
+  {
+    sysName: 'wscc',
+    sysNum: 33,
+  },
+  {
+    sysName: 'wscc',
+    sysNum: 34,
+  },
+  {
+    sysName: 'wscc',
+    sysNum: 35,
+  },
+  {
+    sysName: 'wscc',
+    sysNum: 35,
+  },
+  {
+    sysName: 'wscc',
+    sysNum: 35,
+  },
+];
+
+//系统接入情况
+export const accessStatusColumn: BasicColumn[] = [
+  {
+    title: '序号',
+    align: 'center',
+    customRender: ({ index }: { index: number }) => `${index + 1}`,
+  },
+  {
+    title: '系统名称',
+    dataIndex: 'sysName',
+    align: 'center',
+  },
+
+  {
+    title: '系统接入时间',
+    dataIndex: 'accessTime',
+    align: 'center',
+  },
+  {
+    title: '点位数量',
+    dataIndex: 'pointNum',
+    align: 'center',
+  },
+  {
+    title: '运行状态',
+    dataIndex: 'runStatus',
+    align: 'center',
+  },
+  {
+    title: '数据更新时间',
+    dataIndex: 'dataUpdateTime',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 200,
+    align: 'center',
+    slots: { customRender: 'action' },
+  },
+];
+// 系统接入情况数据
+export const accessStatusData = [
+  {
+    sysName: '1',
+    accessTime: '2025.10.01',
+    pointNum: 32,
+    runStatus: '1',
+    dataUpdateTime: '2025.10.01',
+  },
+  {
+    sysName: '2',
+    accessTime: '2025.10.02',
+    pointNum: 32,
+    runStatus: '2',
+    dataUpdateTime: '2025.10.02',
+  },
+  {
+    sysName: '3',
+    accessTime: '2025.10.02',
+    pointNum: 32,
+    runStatus: '3',
+    dataUpdateTime: '2025.10.02',
+  },
+  {
+    sysName: '3',
+    accessTime: '2025.10.02',
+    pointNum: 32,
+    runStatus: '3',
+    dataUpdateTime: '2025.10.02',
+  },
+];
+// 每日采集数据表格属性
+export const dailyNumOption: ModuleDataChart = {
+  type: 'bar',
+  readFrom: '',
+  legend: { show: false },
+  xAxis: [{ show: true }],
+  yAxis: [{ show: true, name: '', position: 'left' }],
+  series: [{ readFrom: 'history', xprop: 'time', yprop: 'val', label: '' }],
+};
+// 每日采集数据
+export const dailyNumData = {
+  history: [
+    {
+      time: '2025-10-13',
+      val: '113',
+    },
+    {
+      time: '2025-10-14',
+      val: '153',
+    },
+    {
+      time: '2025-10-15',
+      val: '163',
+    },
+    {
+      time: '2025-10-16',
+      val: '193',
+    },
+    {
+      time: '2025-10-17',
+      val: '203',
+    },
+    {
+      time: '2025-10-18',
+      val: '203',
+    },
+    {
+      time: '2025-10-19',
+      val: '223',
+    },
+    {
+      time: '2025-10-20',
+      val: '183',
+    },
+    {
+      time: '2025-10-21',
+      val: '153',
+    },
+    {
+      time: '2025-10-22',
+      val: '183',
+    },
+    {
+      time: '2025-10-23',
+      val: '153',
+    },
+  ],
+};