航站视图修改

src/router/routes/routes-file-six.ts

@@ -1,4 +1,5 @@
 import Layout from '@/layout'
+import { h, resolveComponent } from 'vue'
 
 const HomeRoutes = {
   path: '/baggageManagement',
@@ -9,10 +10,13 @@ const HomeRoutes = {
   meta: { title: '综合可视化', elSvgIcon: 'Fold' },
   children: [
     {
-      path: '/baggageManagement/departure/station',
+      path: '/baggageManagement/departure',
       name: 'InternalDeparture',
+      redirect: '/baggageManagement/departure/station',
       meta: { title: '国内出港', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/departure/index.vue'),
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
       children: [
         {
           path: '/baggageManagement/departure/station',
@@ -45,30 +49,74 @@ const HomeRoutes = {
       ],
     },
     {
-      path: '/baggageManagement/departure',
-      name: 'DepartureC',
+      path: '/baggageManagement/internationalDeparture',
+      name: 'InternationalDeparture',
+      redirect: '/baggageManagement/internationalDeparture/station',
       meta: { title: '国际出港', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/departure/index.vue'),
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
+      children: [
+        {
+          path: '/baggageManagement/internationalDeparture/station',
+          name: 'InternationalDepartureStation',
+          meta: { title: '国际出港航站视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalDeparture/station/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalDeparture/flight',
+          name: 'InternationalDepartureFlight',
+          meta: { title: '国际出港航班视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalDeparture/flight/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalDeparture/waybill',
+          name: 'InternationalepartureWaybill',
+          meta: { title: '国际出港运单视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalDeparture/waybill/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalDeparture/goods',
+          name: 'InternationalDepartureGoods',
+          meta: { title: '国际出港货物视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalDeparture/goods/index.vue'
+            ),
+        },
+      ],
     },
     {
-      path: '/baggageManagement/Arrival/station',
-      name: 'InternalArrival',
+      path: '/baggageManagement/arrival',
+      name: 'Arrival',
+      redirect: '/baggageManagement/arrival/station',
       meta: { title: '国内进港', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/departure/index.vue'),
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
       children: [
         {
           path: '/baggageManagement/arrival/station',
           name: 'ArrivalStation',
           meta: { title: '国内进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import('@/views/baggageManagement/departure/station/index.vue'),
+            import('@/views/baggageManagement/arrival/station/index.vue'),
         },
         {
           path: '/baggageManagement/arrival/flight',
           name: 'ArrivalFlight',
           meta: { title: '国内进港航班视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import('@/views/baggageManagement/departure/flight/index.vue'),
+            import('@/views/baggageManagement/arrival/flight/index.vue'),
         },
         {
           path: '/baggageManagement/arrival/waybill',
@@ -87,10 +135,51 @@ const HomeRoutes = {
       ],
     },
     {
-      path: '/baggageManagement/arrival',
-      name: 'Arrival',
+      path: '/baggageManagement/internationalArrival',
+      name: 'InternationalArrival',
+      redirect: '/baggageManagement/internationalArrival/station',
       meta: { title: '国际进港', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/arrival/index.vue'),
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
+      children: [
+        {
+          path: '/baggageManagement/internationalArrival/station',
+          name: 'InternationalArrivalStation',
+          meta: { title: '国际进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalArrival/station/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalArrival/flight',
+          name: 'InternationalArrivalFlight',
+          meta: { title: '国际进港航班视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalArrival/flight/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalArrival/waybill',
+          name: 'InternationalArrivalWaybill',
+          meta: { title: '国际进港运单视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalArrival/waybill/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalArrival/goods',
+          name: 'InternationalArrivalGoods',
+          meta: { title: '国际进港货物视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalArrival/goods/index.vue'
+            ),
+        },
+      ],
     },
     {
       path: '/baggageManagement/trackMap',

src/views/baggageManagement/arrival/flight/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/arrival/station/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/components/CountBox/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="count-box">
-    <span class="label">{{ props.label }}</span>
+    <span class="label">{{ label }}</span>
     <li v-for="(_, index) in numberItems" :key="index" class="number-item">
       <span class="number-box">
         <i ref="numberBoxes" class="number-list">0123456789</i>

src/views/baggageManagement/components/StationForm/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-form :model="formData" inline class="station-form">
+    <el-form-item :prop="formData.startDate" style="width: 184px">
+      <el-date-picker
+        v-model="formData.startDate"
+        type="datetime"
+        format="YYYY-MM-DD HH:mm:ss"
+        value-format="YYYY-MM-DD hh:mm:ss"
+        size="default"
+        :clearable="false"
+      />
+    </el-form-item>
+    <el-form-item :prop="formData.endDate" style="width: 184px">
+      <el-date-picker
+        v-model="formData.endDate"
+        type="datetime"
+        format="YYYY-MM-DD HH:mm:ss"
+        value-format="YYYY-MM-DD hh:mm:ss"
+        size="default"
+        :clearable="false"
+      />
+    </el-form-item>
+    <el-form-item :prop="formData.flightStatus" style="width: 104px">
+      <el-select
+        v-model="formData.flightStatus"
+        size="default"
+        placeholder="全部航班"
+      >
+        <el-option
+          v-for="option in flightStatusOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item :prop="formData.flightWarning" style="width: 104px">
+      <el-select
+        v-model="formData.flightWarning"
+        size="default"
+        placeholder="全部航班"
+      >
+        <el-option
+          v-for="option in flightWarningOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="international"
+      :prop="formData.waybillType"
+      style="width: 104px"
+    >
+      <el-select
+        v-model="formData.waybillType"
+        size="default"
+        placeholder="运单类型"
+      >
+        <el-option
+          v-for="option in waybillTypeOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { parseTime } from '@/utils/validate'
+
+interface selectOptions {
+  label: string
+  value: string | number
+}
+
+const props = defineProps({
+  international: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const formData = reactive({
+  startDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
+  endDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
+  flightStatus: '',
+  flightWarning: '',
+  waybillType: '',
+})
+const flightStatusOptions = ref<selectOptions[]>([])
+const flightWarningOptions = ref<selectOptions[]>([])
+const waybillTypeOptions = ref<selectOptions[]>([])
+</script>
+
+<style scoped lang="scss">
+.station-form :deep {
+  .el-form-item {
+    margin: 0;
+    &:not(:last-of-type) {
+      margin-right: 8px;
+    }
+  }
+}
+</style>
+

src/views/baggageManagement/components/StationView/index.vue

@@ -1,283 +0,0 @@
-<template>
-  <div class="station-view">
-    <div class="station-header">
-      <el-form :model="formData" inline class="station-form">
-        <el-form-item :prop="formData.startDate" style="width: 184px">
-          <el-date-picker
-            v-model="formData.startDate"
-            type="datetime"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD hh:mm:ss"
-            size="default"
-            :clearable="false"
-          />
-        </el-form-item>
-        <el-form-item :prop="formData.endDate" style="width: 184px">
-          <el-date-picker
-            v-model="formData.endDate"
-            type="datetime"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD hh:mm:ss"
-            size="default"
-            :clearable="false"
-          />
-        </el-form-item>
-        <el-form-item :prop="formData.flightStatus" style="width: 104px">
-          <el-select
-            v-model="formData.flightStatus"
-            size="default"
-            placeholder="全部航班"
-          >
-            <el-option
-              v-for="option in flightStatusOptions"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item :prop="formData.flightWarning" style="width: 104px">
-          <el-select
-            v-model="formData.flightWarning"
-            size="default"
-            placeholder="全部航班"
-          >
-            <el-option
-              v-for="option in flightWarningOptions"
-              :key="option.value"
-              :label="option.label"
-              :value="option.value"
-          /></el-select>
-        </el-form-item>
-      </el-form>
-      <div class="station-count">
-        <CountBox
-          :count-number="tableDataCount.waybillCount"
-          label="预计装载总运单数"
-        />
-        <CountBox
-          v-if="goodsCountFlag"
-          :count-number="tableDataCount.goodsCount"
-          label="预计装载总件数"
-        />
-      </div>
-      <div class="station-settings">
-        <TableSwitch v-model:flag="goodsCountFlag" label="显示件数" />
-        <TableSwitch v-model:flag="UTCFlag" label="开启UTC" />
-        <ColumnSet
-          :table-columns="tableColumns"
-          @checked-submit="columnChecked"
-        />
-      </div>
-    </div>
-    <div class="station-table">
-      <el-auto-resizer>
-        <template #default="{ height, width }">
-          <el-table-v2
-            :columns="filteredColumns"
-            :data="tableData"
-            :width="width"
-            :height="height"
-            :footer-height="60"
-            :row-class="rowClass"
-            fixed
-          >
-            <template #cell="slot: CellSlotProps">
-              <div :class="cellClass(slot)">
-                <span class="cell-text">{{
-                  slot.rowData[slot.column.dataKey]
-                }}</span>
-                <div class="cell-background" />
-              </div>
-            </template>
-            <template #footer>
-              <div class="table-footer">
-                <span class="table-footer-count"
-                  >航班总数：{{ tableDataCount.flightCount }}</span
-                >
-                <span class="table-footer-count"
-                  >货运航班总数：{{ tableDataCount.freightFlightCount }}</span
-                >
-                <span class="table-footer-count"
-                  >已装机总数：{{ tableDataCount.loadCount }}</span
-                >
-                <span class="table-footer-count"
-                  >已起飞总数：{{ tableDataCount.takeOffCount }}</span
-                >
-              </div>
-            </template>
-          </el-table-v2>
-        </template>
-      </el-auto-resizer>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import type { CellSlotProps } from '../../hooks/useTableStyle'
-import ColumnSet from '../../components/ColumnSet/index.vue'
-import CountBox from '../../components/CountBox/index.vue'
-import TableSwitch from '../../components/TableSwitch/index.vue'
-import useTableColumnSet from '../../hooks/useTableColumnSet'
-import useTableData from '../../hooks/useTableData'
-import useTableStyle from '../../hooks/useTableStyle'
-import { parseTime } from '@/utils/validate'
-
-interface selectOptions {
-  label: string
-  value: string | number
-}
-
-const formData = reactive({
-  startDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
-  endDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
-  flightStatus: '',
-  flightWarning: '',
-})
-const flightStatusOptions = ref<selectOptions[]>([])
-const flightWarningOptions = ref<selectOptions[]>([])
-
-const goodsCountFlag = ref(true)
-const UTCFlag = ref(true)
-
-const { tableColumns, tableData } = useTableData()
-const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
-
-const tableDataCount = reactive({
-  waybillCount: 0,
-  goodsCount: 0,
-  flightCount: 0,
-  freightFlightCount: 0,
-  loadCount: 0,
-  takeOffCount: 0,
-})
-watch(tableData, records => {
-  tableDataCount.waybillCount = records.length
-  tableDataCount.goodsCount = records.length
-  tableDataCount.flightCount = records.length
-  tableDataCount.freightFlightCount = records.length
-  tableDataCount.loadCount = records.length
-  tableDataCount.takeOffCount = records.length
-})
-
-const { rowClass, cellClass } = useTableStyle()
-</script>
-<style lang="scss" scoped>
-.station-view {
-  width: 100%;
-  height: 100%;
-  .station-header {
-    display: flex;
-    margin-bottom: 16px;
-    :deep .station-form {
-      margin-right: 43px;
-      .el-form-item {
-        margin: 0;
-        &:not(:last-of-type) {
-          margin-right: 8px;
-        }
-      }
-    }
-    .station-count {
-      margin-right: 24px;
-      flex: 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .station-settings {
-      display: flex;
-      align-items: center;
-      .station-switch {
-        margin-right: 28px;
-        &:nth-child(2) {
-          margin-right: 24px;
-        }
-      }
-    }
-  }
-  .station-table {
-    width: 100%;
-    height: calc(100% - 32px - 16px);
-    :deep .el-table-v2 {
-      .el-table-v2__header-cell,
-      .el-table-v2__row-cell {
-        &:not(:last-child) {
-          border-right: 1px solid #dfe3ea;
-        }
-      }
-      .el-table-v2__header-cell-text,
-      .el-table-v2__cell-text {
-        font-size: 14px;
-        font-family: Helvetica, Microsoft YaHei;
-        font-weight: bold;
-        color: #101116;
-        white-space: pre-line;
-      }
-      .el-table-v2__header {
-        .el-table-v2__header-cell {
-          &.bg-yellow {
-            background-color: #f9f3cb;
-          }
-          &.bg-green {
-            background-color: #ace5d3;
-          }
-          &.bg-cyan {
-            background-color: #b7d5e8;
-          }
-        }
-      }
-      .el-table-v2__body {
-        .el-table-v2__row {
-          &.bg-gray {
-            background-color: #d2d6df;
-          }
-          &.underline-red {
-            border-bottom: 2px solid #e83f82;
-          }
-          .el-table-v2__row-cell {
-            position: relative;
-            .el-table-v2__cell-text {
-              .cell-text {
-                position: relative;
-                z-index: 1;
-              }
-              .cell-background {
-                content: '';
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: 0;
-                background-color: transparent;
-              }
-              &.cell-warning .cell-background {
-                background-color: #f6cda5;
-              }
-              &.cell-error .cell-background {
-                background-color: #f38080;
-              }
-            }
-          }
-        }
-      }
-      .table-footer {
-        padding-left: 8px;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        background-color: #dfe3ea;
-        &-count {
-          font-size: 16px;
-          font-family: Helvetica, Microsoft YaHei;
-          font-weight: bold;
-          color: #303133;
-          &:not(:last-of-type) {
-            margin-right: 48px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/baggageManagement/components/TableSwitch/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="station-switch">
     <el-switch
-      v-model="props.flag"
+      v-model="flag"
       size="default"
       style="--el-switch-on-color: #ac014d; --el-switch-off-color: #b1b1b1"
       @change="
@@ -10,7 +10,7 @@
         }
       "
     />
-    <span class="switch-label">{{ props.label }}</span>
+    <span class="switch-label">{{ label }}</span>
   </div>
 </template>
 

src/views/baggageManagement/departure/station/index.vue

@@ -1,7 +1,104 @@
 <template>
-  <StationView />
+  <div class="station-view">
+    <div class="station-header">
+      <StationForm />
+      <div class="station-count">
+        <CountBox
+          :count-number="tableDataCount.waybillCount"
+          label="预计装载总运单数"
+        />
+        <CountBox
+          v-if="goodsCountFlag"
+          :count-number="tableDataCount.goodsCount"
+          label="预计装载总件数"
+        />
+      </div>
+      <div class="station-settings">
+        <TableSwitch v-model:flag="goodsCountFlag" label="显示件数" />
+        <TableSwitch v-model:flag="UTCFlag" label="开启UTC" />
+        <ColumnSet
+          :table-columns="tableColumns"
+          @checked-submit="columnChecked"
+        />
+      </div>
+    </div>
+    <div class="station-table">
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <el-table-v2
+            :columns="filteredColumns"
+            :data="tableData"
+            :width="width"
+            :height="height"
+            :footer-height="60"
+            :row-class="rowClass"
+            fixed
+          >
+            <template #cell="slot: CellSlotProps">
+              <div :class="cellClass(slot)">
+                <span class="cell-text">{{
+                  slot.rowData[slot.column.dataKey]
+                }}</span>
+                <div class="cell-background" />
+              </div>
+            </template>
+            <template #footer>
+              <div class="table-footer">
+                <span class="table-footer-count"
+                  >航班总数：{{ tableDataCount.flightCount }}</span
+                >
+                <span class="table-footer-count"
+                  >货运航班总数：{{ tableDataCount.freightFlightCount }}</span
+                >
+                <span class="table-footer-count"
+                  >已装机总数：{{ tableDataCount.loadCount }}</span
+                >
+                <span class="table-footer-count"
+                  >已起飞总数：{{ tableDataCount.takeOffCount }}</span
+                >
+              </div>
+            </template>
+          </el-table-v2>
+        </template>
+      </el-auto-resizer>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import StationView from '../../components/StationView/index.vue'
+import type { CellSlotProps } from '../../hooks/useTableStyle'
+import StationForm from '../../components/StationForm/index.vue'
+import ColumnSet from '../../components/ColumnSet/index.vue'
+import CountBox from '../../components/CountBox/index.vue'
+import TableSwitch from '../../components/TableSwitch/index.vue'
+import useTableColumnSet from '../../hooks/useTableColumnSet'
+import useTableData from '../../hooks/useTableData'
+import useTableStyle from '../../hooks/useTableStyle'
+
+const goodsCountFlag = ref(true)
+const UTCFlag = ref(true)
+
+const { tableColumns, tableData } = useTableData()
+const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
+
+const tableDataCount = reactive({
+  waybillCount: 0,
+  goodsCount: 0,
+  flightCount: 0,
+  freightFlightCount: 0,
+  loadCount: 0,
+  takeOffCount: 0,
+})
+watch(tableData, records => {
+  tableDataCount.waybillCount = records.length
+  tableDataCount.goodsCount = records.length
+  tableDataCount.flightCount = records.length
+  tableDataCount.freightFlightCount = records.length
+  tableDataCount.loadCount = records.length
+  tableDataCount.takeOffCount = records.length
+})
+
+const { rowClass, cellClass } = useTableStyle()
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '../../style/station.scss';
+</style>

src/views/baggageManagement/internationalArrival/flight/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/internationalArrival/goods/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/internationalArrival/station/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/internationalArrival/waybill/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/internationalDeparture/flight/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/internationalDeparture/goods/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/internationalDeparture/station/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/internationalDeparture/waybill/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/style/station.scss

@@ -0,0 +1,112 @@
+.station-view {
+  width: 100%;
+  height: 100%;
+  .station-header {
+    display: flex;
+    margin-bottom: 16px;
+    .station-form {
+      margin-right: 43px;
+    }
+    .station-count {
+      margin-right: 24px;
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .station-settings {
+      display: flex;
+      align-items: center;
+      .station-switch {
+        margin-right: 28px;
+        &:nth-child(2) {
+          margin-right: 24px;
+        }
+      }
+    }
+  }
+  .station-table {
+    width: 100%;
+    height: calc(100% - 32px - 16px);
+    :deep .el-table-v2 {
+      .el-table-v2__header-cell,
+      .el-table-v2__row-cell {
+        &:not(:last-child) {
+          border-right: 1px solid #dfe3ea;
+        }
+      }
+      .el-table-v2__header-cell-text,
+      .el-table-v2__cell-text {
+        font-size: 14px;
+        font-family: Helvetica, Microsoft YaHei;
+        font-weight: bold;
+        color: #101116;
+        white-space: pre-line;
+      }
+      .el-table-v2__header {
+        .el-table-v2__header-cell {
+          &.bg-yellow {
+            background-color: #f9f3cb;
+          }
+          &.bg-green {
+            background-color: #ace5d3;
+          }
+          &.bg-cyan {
+            background-color: #b7d5e8;
+          }
+        }
+      }
+      .el-table-v2__body {
+        .el-table-v2__row {
+          &.bg-gray {
+            background-color: #d2d6df;
+          }
+          &.underline-red {
+            border-bottom: 2px solid #e83f82;
+          }
+          .el-table-v2__row-cell {
+            position: relative;
+            .el-table-v2__cell-text {
+              .cell-text {
+                position: relative;
+                z-index: 1;
+              }
+              .cell-background {
+                content: '';
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 0;
+                background-color: transparent;
+              }
+              &.cell-warning .cell-background {
+                background-color: #f6cda5;
+              }
+              &.cell-error .cell-background {
+                background-color: #f38080;
+              }
+            }
+          }
+        }
+      }
+      .table-footer {
+        padding-left: 8px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        background-color: #dfe3ea;
+        &-count {
+          font-size: 16px;
+          font-family: Helvetica, Microsoft YaHei;
+          font-weight: bold;
+          color: #303133;
+          &:not(:last-of-type) {
+            margin-right: 48px;
+          }
+        }
+      }
+    }
+  }
+}