Merge branch 'master' of http://120.26.64.82:10880/BFFE/SMAirports

public/config.js

@@ -23,6 +23,9 @@ window.SERVICE_ID = {
   userColAuthId: 200227, //用户授权-列设置
   containerId: 200238, //容器历史记录-容器历史
 
+  /***-----高级查询------***/
+  dashboardMap: 200248, // 首页-行李分布
+
   /***-----高级查询------***/
   baggageTypeId: 86, //高级查询-特殊行李类型下拉选项查询-id
   advancedQueryId: 30, //高级查询-数据查询-id

src/components/CountBox/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="count-box">
+    <li
+      v-for="(_, index) in numberItems"
+      :key="index"
+      class="number-item"
+    >
+      <span class="number-box">
+        <i
+          ref="numberBoxes"
+          class="number-list"
+          >0123456789.</i
+        >
+      </span>
+    </li>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CountBox',
+  props: {
+    countNumber: {
+      type: Number,
+      default: 0,
+    },
+    countLength: {
+      type: Number,
+      default: 6,
+      validator(value) {
+        return value > 0
+      },
+    },
+  },
+  computed: {
+    numberItems() {
+      let numberString = this.countNumber.toString()
+      if (numberString.length > this.countLength) {
+        ElMessage.error(`${this.label}过大`)
+        numberString = '9'.repeat(this.countLength)
+      }
+      numberString = '0'.repeat(this.countLength) + numberString
+      return numberString.slice(-this.countLength).split('')
+    },
+  },
+  watch: {
+    numberItems: {
+      handler(items) {
+        const numberBoxes = this.$refs['numberBoxes']
+        for (let index = 0; index < numberBoxes.length; index++) {
+          const box = numberBoxes[index]
+          if (box) {
+            if (items[index] === '.') {
+              box.style.transform = `translate(-50%, -${1000 / 11}%)`
+            } else {
+              box.style.transform = `translate(-50%, -${
+                (Number(items[index]) * 100) / 11
+              }%)`
+            }
+          }
+        }
+      },
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.count-box {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  list-style: none;
+  writing-mode: vertical-lr;
+  text-orientation: upright;
+  overflow: hidden;
+  .number-item {
+    width: 48px;
+    height: 100%;
+    list-style: none;
+    background: #323c4c;
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+    & > .number-box {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      & > .number-list {
+        position: absolute;
+        top: 25%;
+        left: 50%;
+        transform: translate(-50%, 0%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 14px;
+        font-size: 32px;
+        color: #ffffff;
+        font-family: Helvetica, Microsoft YaHei;
+        font-style: normal;
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -9,6 +9,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import store from '@/store'
+import Layout from '@/layout'
 
 Vue.use(Router)
 
@@ -53,7 +54,20 @@ export const constantRoutes = [
     path: '/404',
     component: () => import('@/views/404'),
     hidden: true
-  }
+  },
+  {
+  path: '/',
+  component: Layout,
+    meta: { title: '首页' },
+    children: [
+    {
+      path: '',
+      name: 'Dashboard',
+      component: () => import('@/views/dashboard/index.vue'),
+      meta: { title: '首页' }
+    }
+  ]
+}
   // { path: '/', redirect: '/nopower', component: () => import('@/views/noPower'), hidden: true }
   // 404 page must be placed at the end !!!
 ]

src/views/dashboard/index.vue

@@ -0,0 +1,410 @@
+<template>
+  <div class="dashboard">
+    <div class="dashboard-scrollbar">
+      <div class="dashboard-wrapper">
+        <div class="dashboard-card">
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">当日进港航班数</div>
+            <div class="dashboard-card-content">
+              <CountBox
+                :count-number="arrivalFlightCount"
+                :count-length="9"
+              />
+            </div>
+          </div>
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">当日出港航班数</div>
+            <div class="dashboard-card-content">
+              <CountBox
+                :count-number="departureFlightCount"
+                :count-length="9"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="dashboard-card">
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">航司行李量排行</div>
+          </div>
+        </div>
+        <div class="dashboard-card">
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">
+              <span class="title-text">航站选择</span>
+              <el-select
+                v-model="currentAirport"
+                placeholder="请选择航站"
+                filterable
+              >
+                <el-option
+                  v-for="option in aiportOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="dashboard-card">
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">当日行李量统计</div>
+            <div class="dashboard-card-content">
+              <div
+                v-for="item in baggageCountItems"
+                :key="item.title"
+                class="baggage-count-item"
+              >
+                <div class="baggage-count-num">{{ item.num }}</div>
+                <div class="baggage-count-title">{{ item.title }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="dashboard-card">
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">当日行李目的地分布图</div>
+          </div>
+          <div class="dashboard-card-content">
+            <MapCharts
+              id="box-map"
+              :option="boxMap"
+            />
+          </div>
+        </div>
+        <div class="dashboard-card">
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">每日小时行李处理量 - 进港</div>
+          </div>
+        </div>
+        <div class="dashboard-card">
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">每日小时行李处理量 - 出港</div>
+          </div>
+        </div>
+        <div class="dashboard-card">
+          <div class="dashboard-card-wrapper">
+            <div class="dashboard-card-title">每日小时行李处理量 - 中转</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CountBox from '@/components/CountBox/index.vue'
+import BarCharts from '@/layout/components/Echarts/commonChartsBar.vue'
+import MapCharts from '@/layout/components/Echarts/commonChartsChinaMap.vue'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import { Query } from '@/api/webApi'
+
+const defaultDate = '2023-05-09'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    CountBox,
+    BarCharts,
+    MapCharts,
+    vueSeamlessScroll,
+  },
+  data() {
+    return {
+      arrivalFlightCount: 0,
+      departureFlightCount: 0,
+      currentAirport: 'CTU',
+      aiportOptions: [
+        {
+          label: '成都双流机场',
+          value: 'CTU',
+        },
+      ],
+      baggageCountItems: [
+        {
+          title: '行李总数',
+          num: 223124,
+        },
+        {
+          title: '进港行李数',
+          num: 223124,
+        },
+        {
+          title: '出港行李数',
+          num: 223124,
+        },
+        {
+          title: '中转行李数',
+          num: 223124,
+        },
+      ],
+      boxMap: {
+        tooltip: {
+          trigger: 'item',
+          formatter: function (item) {
+            if (item.data && item.data.index) {
+              const html = `<div>
+              <div>TOP ${item.data.index}</div>
+              <div>${item.data.name} ${item.data.value}</div>
+            </div>`
+              return html
+            } else {
+              return '<div>暂无数据</div>'
+            }
+          },
+        },
+        legend: {
+          show: false,
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+        visualMap: {
+          type: 'continuous',
+          text: ['高', '低'],
+          min: 0,
+          max: 20000,
+          seriesIndex: [0, 2],
+          dimension: 0,
+          realtime: false,
+          left: 0,
+          bottom: '30%',
+          itemWidth: 8,
+          itemHeight: 93,
+          calculable: true,
+          inRange: {
+            color: ['#869CBC', 'yellow'],
+            symbolSize: [100, 100],
+          },
+          textStyle: {
+            color: '#fff',
+          },
+          outOfRange: {
+            color: ['orange'],
+            symbolSize: [100, 100],
+          },
+        },
+        toolbox: {
+          show: false,
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: {
+          show: false,
+        },
+        series: [
+          {
+            name: '行李数',
+            type: 'map',
+            mapType: 'china',
+            // left: '100',
+            // width: '40%',
+            roam: 'move',
+            mapValueCalculation: 'sum',
+            zoom: 1,
+            selectedMode: false,
+            showLegendSymbol: false,
+            left: '10%',
+            top: '10%',
+            width: '80%',
+            label: {
+              normal: {
+                textStyle: {
+                  color: '#666666',
+                },
+              },
+              emphasis: {
+                textStyle: {
+                  color: '#234EA5',
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                areaColor: '#fff',
+                borderColor: '#666666',
+              },
+              emphasis: {
+                areaColor: '#E5F39B',
+              },
+            },
+            data: [],
+          },
+        ],
+      },
+    }
+  },
+  mounted() {
+    this.getMap()
+  },
+  methods: {
+    // 当日行李分布
+    async getMap() {
+      const { code, returnData: listValues } = await Query({
+        serviceId: SERVICE_ID.dashboardMap,
+        dataContent: [
+          {
+            airport: this.currentAirport,
+            fd1: defaultDate,
+            fd2: defaultDate,
+          },
+        ],
+      })
+      if (code == 0) {
+        listValues.sort((a, b) => b.bags - a.bags)
+        listValues.map((item, index) => {
+          item.name = item.in_province
+          item.value = item.bags
+          item.index = index + 1
+        })
+        this.boxMap.series[0].data = listValues
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  width: 100%;
+  height: calc(100vh - 48px - 32px);
+  padding: 16px 20px;
+  background-color: #081821;
+  color: #fff;
+  &-scrollbar {
+    margin-right: -20px;
+    width: calc(100% + 20px);
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &-wrapper {
+    width: 100%;
+    height: 968px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  &-card {
+    width: calc((100% - 16px * 2) / 3);
+    height: calc((100% - 16px * 2) / 3);
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #3a4456;
+    background: linear-gradient(270deg, rgba(118, 142, 184, 0.25), transparent);
+    position: relative;
+    &::before {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border: 12px solid #6d7d98;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+    }
+    &-wrapper {
+      height: 0;
+      flex: 1;
+      &:not(:first-child) {
+        margin-top: 25px;
+      }
+    }
+    &-title {
+      height: 40px;
+      line-height: 16px;
+      font-size: 16px;
+      font-family: Helvetica, Microsoft YaHei;
+      font-weight: bold;
+    }
+    &-content {
+      height: calc(100% - 40px);
+    }
+    &:nth-child(1) {
+      .dashboard-card-content {
+        max-height: 64px;
+      }
+    }
+    &:nth-child(3) {
+      height: 40px;
+      padding: 0 25px;
+      &::before {
+        display: none;
+      }
+      .dashboard-card-title {
+        height: 38px;
+        display: flex;
+        justify-content: space-between;
+        line-height: 38px;
+        .el-select {
+          width: 160px;
+          ::v-deep .el-input__inner {
+            border: none;
+            background-color: transparent;
+            font-size: 16px;
+            font-family: Helvetica, Microsoft YaHei;
+            font-weight: bold;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    &:nth-child(4) {
+      height: calc((100% - 16px * 2) / 3 - 40px - 16px);
+    }
+    &:nth-child(2),
+    &:nth-child(5) {
+      height: calc((100% - 16px * 2) / 3 * 2 + 16px);
+    }
+    &:nth-child(4) {
+      .dashboard-card-content {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .baggage-count-item {
+          height: 50%;
+          padding-left: 96px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          position: relative;
+          font-family: Helvetica, Microsoft YaHei;
+          font-weight: bold;
+          .baggage-count-num {
+            font-size: 36px;
+            color: #f7c15a;
+          }
+          .baggage-count-title {
+            font-size: 14px;
+          }
+          &::before {
+            content: url('../../assets/analysis/ic.png');
+            display: block;
+            width: 72px;
+            height: 72px;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translate(0, -50%);
+          }
+        }
+      }
+    }
+    &:nth-child(5) {
+      background: transparent;
+      border: none;
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+</style>