[Wip 0000] 首页看板模块开发

src/assets/icons/warning-CO-2.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.293" height="13.602" viewBox="0 0 18.293 13.602">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cfff1"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55953" data-name="路径 55953" d="M90.551,205.081h2.44a6.636,6.636,0,0,1-.833,3.587,3.13,3.13,0,0,1-2.865,1.309,3.926,3.926,0,0,1-3.332-1.241,7.067,7.067,0,0,1-.927-4.123V201.85q0-3.086.97-4.276a3.764,3.764,0,0,1,3.094-1.2,3.538,3.538,0,0,1,2.874,1.063,5.079,5.079,0,0,1,.883,3.289h-2.4a4.874,4.874,0,0,0-.247-1.793.925.925,0,0,0-.935-.587q-1.727,0-1.726,2.72V205.3a3.71,3.71,0,0,0,.442,2.083,1.509,1.509,0,0,0,1.3.62,1,1,0,0,0,.952-.655,5.918,5.918,0,0,0,.306-2.269Zm4.276-.468v-2.6q0-3.222.986-4.428a3.986,3.986,0,0,1,3.264-1.207q2.549,0,3.4,1.36a8.273,8.273,0,0,1,.85,4.276v2.618a7.01,7.01,0,0,1-.927,4.123,3.87,3.87,0,0,1-3.289,1.224,4.1,4.1,0,0,1-3.289-1.173q-.994-1.174-.994-4.191Zm2.517-3.545V205.3q0,2.7,1.692,2.7,1.777,0,1.777-2.6v-4.156q0-2.9-1.734-2.9t-1.734,2.72Z" transform="translate(-85.034 -196.375)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/warning-max-temp.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.587" height="17.587" viewBox="0 0 17.587 17.587">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cfff1"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14760" data-name="组 14760" transform="translate(-106.667 -106.667)">
+    <path id="路径_55954" data-name="路径 55954" d="M233.907,560.409a.72.72,0,0,0-.833-.417.707.707,0,0,0-.463.926,6.48,6.48,0,0,0,12.033,0,.7.7,0,1,0-1.3-.509,5.1,5.1,0,0,1-4.721,3.193A5.291,5.291,0,0,1,233.907,560.409Z" transform="translate(-123.167 -443.467)" fill="url(#linear-gradient)"/>
+    <path id="路径_55955" data-name="路径 55955" d="M126.035,596.259a.72.72,0,0,0-.833.417,7.791,7.791,0,0,1-7.359,5.137,8.005,8.005,0,0,1-7.451-5.137.674.674,0,0,0-.833-.417.743.743,0,0,0-.463.926,9.38,9.38,0,0,0,8.7,6.017,9.2,9.2,0,0,0,8.655-6.063A.688.688,0,0,0,126.035,596.259Z" transform="translate(-2.337 -478.947)" fill="url(#linear-gradient)"/>
+    <path id="路径_55956" data-name="路径 55956" d="M360.583,214.75a3.682,3.682,0,0,0,3.286-2.036.671.671,0,0,0-.417-.972.685.685,0,0,0-.787.324,2.266,2.266,0,0,1-2.083,1.3,2.316,2.316,0,0,1-2.083-1.3.662.662,0,0,0-.787-.324.7.7,0,0,0-.417.972A3.791,3.791,0,0,0,360.583,214.75Zm-1.99-9.951a.5.5,0,0,0-.463.463c.046.278.185.463.463.463.278-.046.463-.185.463-.463A.415.415,0,0,0,358.593,204.8Z" transform="translate(-245.123 -96.004)" fill="url(#linear-gradient)"/>
+    <path id="路径_55957" data-name="路径 55957" d="M122.4,106.667H108.518a1.857,1.857,0,0,0-1.851,1.851v3.7a1.857,1.857,0,0,0,1.851,1.851H122.4a1.857,1.857,0,0,0,1.851-1.851v-3.7A1.857,1.857,0,0,0,122.4,106.667Zm-8.932,3.471a.89.89,0,0,1-.879-.926.879.879,0,0,1,.879-.879.953.953,0,0,1,.926.879A.928.928,0,0,1,113.47,110.138Zm2.731,2.5a1.873,1.873,0,0,1-1.9-1.99,1.94,1.94,0,0,1,1.9-2.036c.787.046,1.157.231,1.2.6a.341.341,0,0,1-.37.37.814.814,0,0,1-.278-.046,1.367,1.367,0,0,0-.6-.093c-.648.046-1.018.463-1.064,1.25.046.787.37,1.157,1.064,1.2a1.6,1.6,0,0,0,.6-.139,1.82,1.82,0,0,1,.278-.093c.185,0,.324.139.37.37C117.451,112.406,117.034,112.637,116.2,112.637Z" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/warning-optical-fiber.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.18" height="20.593" viewBox="0 0 21.18 20.593">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cb5fd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14757" data-name="组 14757" transform="translate(0.62 0.675)">
+    <path id="路径_55465" data-name="路径 55465" d="M.339,0,0,.441,11.339,9.163l.34-.441Z" transform="translate(14.576 13.025) rotate(-172)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+    <path id="路径_55460" data-name="路径 55460" d="M-18841.912,4263.367l.314-.459c-.375-.254-9.16-6.246-12.326-7.163l-.154.534C-18851,4257.173-18842.006,4263.306-18841.912,4263.367Z" transform="translate(18854.078 -4250.316)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+    <path id="路径_55461" data-name="路径 55461" d="M-18843.352,4260.974l.34-.442-11.338-8.721-.34.441Z" transform="translate(18856.387 -4248.333)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+    <path id="路径_55464" data-name="路径 55464" d="M.346,0,0,.436,11.191,9.3l.345-.436Z" transform="matrix(-0.996, 0.087, -0.087, -0.996, 13.618, 13.099)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+    <path id="路径_55463" data-name="路径 55463" d="M.339,0,0,.441,11.339,9.163l.34-.441Z" transform="matrix(-0.998, -0.07, 0.07, -0.998, 14.177, 13.038)" fill="url(#linear-gradient)"/>
+    <path id="路径_55462" data-name="路径 55462" d="M.386,0,0,.4C2.429,2.749,8.836,9.15,9.3,10.549l.528-.176A10.019,10.019,0,0,0,8.062,7.929c-.8-.928-1.883-2.091-3.2-3.456C2.612,2.153.408.021.386,0Z" transform="matrix(-0.998, -0.07, 0.07, -0.998, 13.593, 11.209)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+    <g id="组_13474" data-name="组 13474" transform="translate(22.224 16.539) rotate(135)">
+      <path id="路径_55456" data-name="路径 55456" d="M2.175,0H.251C.112,0,0,.3,0,.678V2.944H2.426V.678C2.426.3,2.314,0,2.175,0Z" transform="translate(2.353 0)" fill="url(#linear-gradient)"/>
+      <path id="路径_55458" data-name="路径 55458" d="M.833,0l.524,2.376H0l.009.011L2.591,5.528,2.015,3.256H3.388ZM.028,2.389H1.373l0-.008L.858.053l2.5,3.189H2l.567,2.232L.028,2.389Z" transform="translate(1.875 3.485)" fill="url(#linear-gradient)"/>
+      <path id="路径_55459" data-name="路径 55459" d="M4.227,0H.488C.219,0,0,.3,0,.678V2.944H4.715V.678C4.716.3,4.5,0,4.227,0Z" transform="translate(1.208 7.871)" fill="url(#linear-gradient)"/>
+      <path id="路径_55454" data-name="路径 55454" d="M6.977,6.915a.091.091,0,0,1-.082.1H.094a.091.091,0,0,1-.082-.1s-.026-1.023,0-1.362c.066-.865.4-2.567.453-3.433,0,0,0,0,0,0C1.079,1.388,2,1.2,2.208.362A.435.435,0,0,1,2.608,0H4.381a.435.435,0,0,1,.4.362c.2.841,1.129,1.026,1.743,1.755,0,0,0,0,0,0,.057.866.387,2.568.453,3.433C7,5.892,6.977,6.915,6.977,6.915Z" transform="translate(0 2.553)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>

src/assets/icons/warning-smoke-2.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.068" height="19.068" viewBox="0 0 19.068 19.068">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cb5fd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_14759" data-name="组 14759" transform="translate(-64 -64)">
+    <path id="路径_55951" data-name="路径 55951" d="M73.534,64a9.534,9.534,0,1,0,9.534,9.534A9.545,9.545,0,0,0,73.534,64Zm0,17.706a8.172,8.172,0,1,1,8.172-8.172A8.181,8.181,0,0,1,73.534,81.706Z" fill="url(#linear-gradient)"/>
+    <path id="路径_55952" data-name="路径 55952" d="M196.517,204.295a5.971,5.971,0,0,1-3.222-3.222.681.681,0,1,0-1.259.522A7.338,7.338,0,0,0,196,205.553a.681.681,0,1,0,.521-1.259Zm-4.112-7.409a.678.678,0,0,0,.89-.368,5.975,5.975,0,0,1,3.222-3.223.681.681,0,0,0-.522-1.258A7.332,7.332,0,0,0,192.036,196,.681.681,0,0,0,192.4,196.885Zm8.668-3.59a5.971,5.971,0,0,1,3.222,3.222.681.681,0,0,0,1.259-.522,7.338,7.338,0,0,0-3.959-3.959.682.682,0,0,0-.522,1.259Zm4.112,7.409a.683.683,0,0,0-.89.368,5.965,5.965,0,0,1-3.222,3.222.681.681,0,0,0,.522,1.259,7.334,7.334,0,0,0,3.959-3.959A.681.681,0,0,0,205.185,200.7Zm-9.868-5.387a4.9,4.9,0,0,0-1.066,1.595.681.681,0,1,0,1.258.522,3.569,3.569,0,0,1,1.925-1.926.682.682,0,0,0-.522-1.258A4.907,4.907,0,0,0,195.317,195.317Zm4.839.191a3.571,3.571,0,0,1,1.925,1.925.681.681,0,1,0,1.258-.522,4.93,4.93,0,0,0-2.662-2.661.681.681,0,1,0-.522,1.258Zm-2.723,6.573a3.575,3.575,0,0,1-1.926-1.925.681.681,0,0,0-1.259.522,4.934,4.934,0,0,0,2.662,2.662.681.681,0,0,0,.522-1.259Zm4.839.191a4.9,4.9,0,0,0,1.067-1.595.681.681,0,1,0-1.258-.522,3.577,3.577,0,0,1-1.925,1.925.681.681,0,1,0,.522,1.258A4.873,4.873,0,0,0,202.272,202.272Zm-.753-3.477a2.724,2.724,0,1,0-2.724,2.724A2.727,2.727,0,0,0,201.519,198.795Zm-2.724,1.362a1.362,1.362,0,1,1,1.362-1.362A1.363,1.363,0,0,1,198.795,200.157Z" transform="translate(-125.26 -125.26)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/warning-temp.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10.78" height="18.461" viewBox="0 0 10.78 18.461">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cb5fd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_13144" data-name="组 13144" transform="translate(-506.549 -361.739)">
+    <path id="路径_55369" data-name="路径 55369" d="M219.078,11.364V6.412a.547.547,0,0,0-.546-.546h-.043a.53.53,0,0,0-.53.53v4.968a1.923,1.923,0,0,0-1.412,1.833,1.972,1.972,0,1,0,2.531-1.833Zm2.9-2.194a.5.5,0,0,1-.195-.379v-5.6a3.267,3.267,0,0,0-6.533,0V8.633a.778.778,0,0,1-.265.6,5.192,5.192,0,0,0-1.857,3.97,5.392,5.392,0,0,0,10.78,0A5.192,5.192,0,0,0,221.979,9.17Zm-3.461,7.62a3.647,3.647,0,0,1-3.692-3.593,3.559,3.559,0,0,1,1.725-3.036l.261-.16a.29.29,0,0,0,.137-.245V3.193a1.571,1.571,0,0,1,3.14,0V9.756a.29.29,0,0,0,.137.245l.261.16a3.555,3.555,0,0,1,1.723,3.036,3.65,3.65,0,0,1-3.694,3.593Z" transform="translate(293.42 361.739)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/warning-tubes.svg

@@ -0,0 +1,17 @@
+<svg id="组_14758" data-name="组 14758" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.818" height="19.818" viewBox="0 0 19.818 19.818">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2cfff1"/>
+      <stop offset="1" stop-color="#ccedff"/>
+    </linearGradient>
+  </defs>
+  <path id="椭圆_2583" data-name="椭圆 2583" d="M9.909,1.416A8.493,8.493,0,1,0,18.4,9.909,8.5,8.5,0,0,0,9.909,1.416M9.909,0A9.909,9.909,0,1,1,0,9.909,9.909,9.909,0,0,1,9.909,0Z" transform="translate(0)" fill="url(#linear-gradient)"/>
+  <path id="路径_55457" data-name="路径 55457" d="M3.92.531A2.831,2.831,0,1,0,6.751,3.362,2.834,2.834,0,0,0,3.92.531m0-.708A3.539,3.539,0,1,1,.381,3.362,3.539,3.539,0,0,1,3.92-.177Z" transform="translate(2.989 1.342)" fill="url(#linear-gradient)"/>
+  <path id="椭圆_2585" data-name="椭圆 2585" d="M2.831.708A2.123,2.123,0,1,0,4.955,2.831,2.126,2.126,0,0,0,2.831.708m0-.708A2.831,2.831,0,1,1,0,2.831,2.831,2.831,0,0,1,2.831,0Z" transform="translate(9.909 1.416)" fill="url(#linear-gradient)"/>
+  <path id="路径_55458" data-name="路径 55458" d="M2.712.23A2.461,2.461,0,1,0,5.173,2.692,2.464,2.464,0,0,0,2.712.23m0-.708A3.169,3.169,0,1,1-.457,2.692,3.169,3.169,0,0,1,2.712-.478Z" transform="translate(7.366 7.217)" fill="url(#linear-gradient)"/>
+  <path id="椭圆_2586" data-name="椭圆 2586" d="M2.831.708A2.123,2.123,0,1,0,4.955,2.831,2.126,2.126,0,0,0,2.831.708m0-.708A2.831,2.831,0,1,1,0,2.831,2.831,2.831,0,0,1,2.831,0Z" transform="translate(12.74 5.662)" fill="url(#linear-gradient)"/>
+  <path id="路径_55454" data-name="路径 55454" d="M2.638.284A2.425,2.425,0,1,0,5.063,2.709,2.427,2.427,0,0,0,2.638.284m0-.708A3.133,3.133,0,1,1-.494,2.709,3.133,3.133,0,0,1,2.638-.424Z" transform="translate(8.341 13.377)" fill="url(#linear-gradient)"/>
+  <path id="路径_55455" data-name="路径 55455" d="M2.134.006A2.335,2.335,0,1,0,4.469,2.341,2.337,2.337,0,0,0,2.134.006m0-.708A3.042,3.042,0,1,1-.908,2.341,3.042,3.042,0,0,1,2.134-.7Z" transform="translate(3.869 12.026)" fill="url(#linear-gradient)"/>
+  <path id="路径_55456" data-name="路径 55456" d="M2.281.006A2.481,2.481,0,1,0,4.762,2.488,2.484,2.484,0,0,0,2.281.006m0-.708A3.189,3.189,0,1,1-.908,2.488,3.189,3.189,0,0,1,2.281-.7Z" transform="translate(1.038 7.063)" fill="url(#linear-gradient)"/>
+  <path id="路径_55459" data-name="路径 55459" d="M1.716.1A2.123,2.123,0,1,0,3.839,2.223,2.126,2.126,0,0,0,1.716.1m0-.708A2.831,2.831,0,1,1-1.115,2.223,2.831,2.831,0,0,1,1.716-.608Z" transform="translate(13.562 11.164)" fill="url(#linear-gradient)"/>
+</svg>

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

@@ -0,0 +1,50 @@
+export const BILLBOARDS = [
+  {
+    title: 'A矿',
+  },
+  {
+    title: 'B矿',
+  },
+  {
+    title: 'C矿',
+  },
+  {
+    title: 'D矿',
+  },
+  {
+    title: 'E矿',
+  },
+  {
+    title: 'F矿',
+  },
+  {
+    title: 'G矿',
+  },
+  {
+    title: 'H矿',
+  },
+  {
+    title: 'I矿',
+  },
+  {
+    title: 'J矿',
+  },
+  {
+    title: 'K矿',
+  },
+];
+
+export const COLUMN_A = [
+  {
+    name: '设备类型',
+    prop: 'a',
+  },
+  {
+    name: '监测数量',
+    prop: 'b',
+  },
+  {
+    name: '当前状态',
+    prop: 'c',
+  },
+];

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

@@ -0,0 +1,43 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="arrow-button" :class="`point-to-${pointTo}`" @click="$emit('click')"></div>
+</template>
+<script lang="ts" setup>
+  /** 箭头按钮，宽高固定 90 * 76 */
+  withDefaults(
+    defineProps<{
+      pointTo: 'left' | 'right' | 'bottom' | 'top';
+    }>(),
+    {
+      pointTo: 'left',
+    }
+  );
+
+  defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  .arrow-button {
+    height: 90px;
+    width: 76px;
+    background-image: url('@/assets/images/company/arrow-button.png');
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+  }
+
+  .arrow-button:hover {
+    background-image: url('@/assets/images/company/arrow-button-hover.png');
+  }
+
+  .point-to-left {
+    transform: rotate(0deg);
+  }
+  .point-to-right {
+    transform: rotate(180deg);
+  }
+  .point-to-top {
+    transform: rotate(90deg);
+  }
+  .point-to-bottom {
+    transform: rotate(270deg);
+  }
+</style>

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

@@ -0,0 +1,47 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="card" :style="{ height: `${height}px` }">
+    <p class="card_title">
+      <slot name="title">{{ title }}</slot>
+    </p>
+    <div class="card_content" :style="{ height: `${contentHeight}px` }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  // import mapComponent from './components/3Dmap/index.vue';
+
+  withDefaults(
+    defineProps<{
+      title: string;
+      /** 卡片总体的高度 */
+      height: number;
+      /** 卡片内容部分的高度 */
+      contentHeight: number;
+    }>(),
+    {
+      height: 320,
+      contentHeight: 250,
+    }
+  );
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('@/assets/font/douyuFont.otf');
+  }
+
+  .card {
+    background: url('@/assets/images/company/area-card4.png') no-repeat;
+    background-size: 100% 100%;
+    padding: 2px 20px 0 20px;
+    text-align: center;
+  }
+  .card_title {
+    margin-top: 10px;
+    font-family: 'douyuFont';
+  }
+  .card_content {
+  }
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="table">
+    <div class="table__content">
+      <div class="table__content_label">
+        <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`">{{ item.name }}</div>
+      </div>
+      <div class="table__content_list">
+        <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
+          <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`">
+            <slot :name="t.prop" :scope="item">
+              <span>{{ get(item, t.prop) }}</span>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { defineProps } from 'vue';
+  import _ from 'lodash-es';
+
+  let props = withDefaults(
+    defineProps<{
+      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
+      columns: { prop: string; name: string }[];
+      data: any[];
+      defaultValue: string;
+    }>(),
+    {
+      columns: () => [],
+      data: () => [],
+      defaultValue: '-',
+    }
+  );
+
+  function get(o, p) {
+    return _.get(o, p, props.defaultValue);
+  }
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('@/assets/font/douyuFont.otf');
+  }
+
+  .table__content {
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .table__content_label {
+      width: 366px;
+      height: 32px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: url('@/assets/images/company/content-label.png') no-repeat;
+      .label-t {
+        color: #3df6ff;
+        text-align: center;
+        font-size: 14px;
+      }
+    }
+
+    .table__content_list {
+      height: calc(100% - 32px);
+      width: 378px;
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-around;
+      justify-content: flex-start;
+      padding: 5px 0px;
+      box-sizing: border-box;
+      overflow-y: auto;
+      .table__content_list_row {
+        width: 100%;
+        height: 28px;
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-start;
+        background: url('@/assets/images/company/content-text.png') no-repeat;
+        color: #fff;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,35 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="common-title flex justify-between">
+    <div>
+      <slot name="label">{{ label }}</slot>
+    </div>
+    <div class="common-title__value">
+      <slot name="value">{{ value }}</slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps<{
+    label: string;
+    value: string;
+  }>();
+
+  defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .common-title {
+    height: 30px;
+    line-height: 30px;
+    padding-left: 58px;
+    box-sizing: border-box;
+    background: url('@/assets/images/company/lentj.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+
+  .common-title__value {
+    color: @vent-gas-primary-text;
+  }
+</style>

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

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

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

@@ -0,0 +1,24 @@
+<!-- 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/ContentD.vue

@@ -0,0 +1,19 @@
+<!-- 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/ContentE.vue

@@ -0,0 +1,19 @@
+<!-- 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/FileOverview.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="card-b">
+    <div class="box" v-for="item in tabs" :key="item.id" @click="$emit('click', item)">
+      <div class="img"> <img :src="item.src" alt="" /> </div>
+      <div class="text">{{ item.text }}</div>
+      <div class="num">{{ item.num }}</div>
+    </div>
+  </div>
+</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';
+
+  defineEmits(['click']);
+
+  let tabs = ref([
+    { src: leftImg, text: '文档总数', num: 233, id: 'file_cfg_001' },
+    { src: rightImg, text: '待审批数', num: 50, id: 'file_cfg_002' },
+  ]);
+</script>
+
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url(/@/assets/images/files/douyuFont.otf);
+  }
+
+  .card-b {
+    display: flex;
+    flex-direction: row;
+
+    .box {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+
+      &:first-child .img {
+        position: relative;
+        width: 72px;
+        height: 78px;
+        background: url(/@/assets/images/files/homes/file1.png) no-repeat center;
+
+        img {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -75%);
+        }
+      }
+
+      &:last-child .img {
+        position: relative;
+        width: 72px;
+        height: 78px;
+        background: url(/@/assets/images/files/homes/sp.png) no-repeat center;
+
+        img {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -75%);
+        }
+      }
+
+      .text {
+        margin: 5px 0px;
+        font-family: '思源黑体', 'Microsoft Yahei';
+        color: #fff;
+        font-size: 14px;
+      }
+
+      &:first-child .num {
+        width: 120px;
+        height: 30px;
+        font-family: 'douyuFont';
+        color: #fff;
+        font-size: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: url(/@/assets/images/files/homes/file2.png) no-repeat center;
+      }
+
+      &:last-child .num {
+        width: 120px;
+        height: 30px;
+        font-family: 'douyuFont';
+        color: #fff;
+        font-size: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: url(/@/assets/images/files/homes/sp2.png) no-repeat center;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,49 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list-item flex justify-between" :class="`list-item-${type}`">
+    <div>
+      <slot name="icon">
+        <SvgIcon class="icon" size="18" :name="icon" />
+      </slot>
+      <slot name="label">
+        <span class="ml-30px">{{ label }}</span>
+      </slot>
+    </div>
+    <div class="list-item__value">
+      <slot name="value">{{ value }}</slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { SvgIcon } from '/@/components/Icon';
+
+  /** 宽高固定 364 * 34 */
+  defineProps<{
+    icon: string;
+    label: string;
+    value: string;
+    /** 背景图的类型 */
+    type: 'blue' | 'green';
+  }>();
+
+  defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .list-item {
+    height: 34px;
+    line-height: 34px;
+    width: 364px;
+    padding: 0 40px 0 8px;
+    box-sizing: border-box;
+    background-size: 100% 100%;
+  }
+
+  .list-item-blue {
+    background: url('@/assets/images/company/list-item-1.png') no-repeat center;
+  }
+  .list-item-green {
+    background: url('@/assets/images/company/list-item-2.png') no-repeat center;
+  }
+</style>

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

@@ -0,0 +1,47 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list-item flex justify-between" :class="`list-item-${type}`">
+    <div>
+      <slot name="label">{{ label }}</slot>
+    </div>
+    <div class="list-item__value">
+      <slot name="value">{{ value }}</slot>
+    </div>
+  </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';
+  }>();
+
+  defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .list-item {
+    height: 68px;
+    line-height: 68px;
+    width: 205px;
+    padding: 0 30px;
+    box-sizing: border-box;
+    background-size: 100% 100%;
+  }
+
+  .list-item-green-to-right {
+    background: url('@/assets/images/company/list-item-3.png') no-repeat center;
+  }
+  .list-item-blue-to-right {
+    background: url('@/assets/images/company/list-item-4.png') no-repeat center;
+  }
+  .list-item-green-to-left {
+    background: url('@/assets/images/company/list-item-5.png') no-repeat center;
+  }
+  .list-item-blue-to-left {
+    background: url('@/assets/images/company/list-item-6.png') no-repeat center;
+  }
+</style>

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

@@ -0,0 +1,50 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list-item flex justify-around flex-col" :class="`list-item-${type}`">
+    <div>
+      <slot name="label">{{ label }}</slot>
+    </div>
+    <div class="list-item__value">
+      <slot name="value">{{ value }}</slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  /** 宽高固定 158 * 93 */
+  defineProps<{
+    label: string;
+    value: string;
+    /** 背景图的类型 */
+    type: 'to-top-right' | 'to-bottom-right';
+  }>();
+
+  defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('@/assets/font/douyuFont.otf');
+  }
+
+  .list-item {
+    font-size: 20px;
+    height: 93px;
+    width: 158px;
+    padding: 10px;
+    box-sizing: border-box;
+    background-size: 100% 100%;
+  }
+
+  .list-item-to-top-right {
+    background: url('@/assets/images/company/list-item-7.png') no-repeat center;
+  }
+  .list-item-to-bottom-right {
+    background: url('@/assets/images/company/list-item-8.png') no-repeat center;
+  }
+
+  .list-item__value {
+    font-family: douyuFont;
+    color: @vent-gas-primary-text;
+  }
+</style>

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

@@ -0,0 +1,107 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <div class="top-bg">
+      <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">
+        <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" /> -->
+          <FileOverview />
+        </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)" />
+  </div>
+</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';
+
+  const mainTitle = computed(() => '国家能源神东煤炭集团');
+
+  // 一页最多支持几个看板项
+  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);
+  });
+  function changeCurrentPage(pagecount: number) {
+    currentPage.value = Math.max((currentPage.value + pagecount) % totalPage, 1);
+  }
+</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/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;
+      position: absolute;
+      z-index: 1;
+      .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: 100%;
+      background: url('@/assets/images/company/content-bg.png') no-repeat;
+      background-size: 100% 100%;
+      pointer-events: none;
+      padding: 150px 100px 100px 100px;
+    }
+    .company__arrow_left {
+      position: absolute;
+      top: calc(50% - 38px);
+      left: 15px;
+    }
+    .company__arrow_right {
+      position: absolute;
+      top: calc(50% - 38px);
+      right: 15px;
+    }
+  }
+</style>