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

public/config.js

@@ -23,8 +23,11 @@ window.SERVICE_ID = {
   userColAuthId: 200227, //用户授权-列设置
   containerId: 200238, //容器历史记录-容器历史
 
-  /***-----高级查询------***/
+  /***-----首页------***/
+  dashboardHourData: 200246, // 首页-小时行李处理量
+  dashboardDateData: 200247, // 首页-当日航班和行李数量
   dashboardMap: 200248, // 首页-行李分布
+  dashboardCompanyData: 200249, // 首页-航司行李量排行
 
   /***-----高级查询------***/
   baggageTypeId: 86, //高级查询-特殊行李类型下拉选项查询-id

src/router/index.js

@@ -57,11 +57,12 @@ export const constantRoutes = [
   },
   {
   path: '/',
+  redirect: '/dashboard',
   component: Layout,
-    meta: { title: '首页' },
-    children: [
+  meta: { title: '首页' },
+  children: [
     {
-      path: '',
+      path: '/dashboard',
       name: 'Dashboard',
       component: () => import('@/views/dashboard/index.vue'),
       meta: { title: '首页' }

src/views/dashboard/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="dashboard">
     <div class="dashboard-scrollbar">
-      <div class="dashboard-wrapper">
+      <div
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.3)"
+        class="dashboard-wrapper"
+      >
         <div class="dashboard-card">
           <div class="dashboard-card-wrapper">
             <div class="dashboard-card-title">当日进港航班数</div>
@@ -26,6 +32,32 @@
           <div class="dashboard-card-wrapper">
             <div class="dashboard-card-title">航司行李量排行</div>
           </div>
+          <div
+            v-if="companyData.length"
+            class="dashboard-card-content"
+          >
+            <vue-seamless-scroll
+              class="scroll-table"
+              :class-option="defaultOption"
+            >
+              <div
+                v-for="item in companyData"
+                :key="item.name"
+                class="company-baggage-item"
+              >
+                <div class="company-name">{{ item.name }}</div>
+                <div class="company-progress">
+                  <el-progress
+                    :percentage="item.percentage"
+                    :color="customColor"
+                    :show-text="false"
+                    :stroke-width="8"
+                  ></el-progress>
+                </div>
+                <div class="company-count">{{ item.count }}</div>
+              </div>
+            </vue-seamless-scroll>
+          </div>
         </div>
         <div class="dashboard-card">
           <div class="dashboard-card-wrapper">
@@ -35,6 +67,7 @@
                 v-model="currentAirport"
                 placeholder="请选择航站"
                 filterable
+                default-first-option
               >
                 <el-option
                   v-for="option in aiportOptions"
@@ -76,16 +109,34 @@
           <div class="dashboard-card-wrapper">
             <div class="dashboard-card-title">每日小时行李处理量 - 进港</div>
           </div>
+          <div class="dashboard-card-content">
+            <BarCharts
+              id="inHour"
+              :option="inHourDataOption"
+            />
+          </div>
         </div>
         <div class="dashboard-card">
           <div class="dashboard-card-wrapper">
             <div class="dashboard-card-title">每日小时行李处理量 - 出港</div>
           </div>
+          <div class="dashboard-card-content">
+            <BarCharts
+              id="outHour"
+              :option="outHourDataOption"
+            />
+          </div>
         </div>
         <div class="dashboard-card">
           <div class="dashboard-card-wrapper">
             <div class="dashboard-card-title">每日小时行李处理量 - 中转</div>
           </div>
+          <div class="dashboard-card-content">
+            <BarCharts
+              id="transHour"
+              :option="transHourDataOption"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -96,10 +147,48 @@
 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 VueSeamlessScroll from 'vue-seamless-scroll'
 import { Query } from '@/api/webApi'
+import { parseTime } from '@/utils'
 
-const defaultDate = '2023-05-09'
+const defaultDate = parseTime(new Date(), '{y}-{m}-{d}')
+const barOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisLabel: {
+      color: '#8897BC',
+    },
+    axisTick: {
+      alignWithLabel: true,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      color: '#8897BC',
+    },
+  },
+  series: [
+    {
+      data: [],
+      type: 'bar',
+      barWidth: '16px',
+    },
+  ],
+}
 
 export default {
   name: 'Dashboard',
@@ -107,35 +196,33 @@ export default {
     CountBox,
     BarCharts,
     MapCharts,
-    vueSeamlessScroll,
+    VueSeamlessScroll,
   },
   data() {
     return {
+      loading: false,
       arrivalFlightCount: 0,
       departureFlightCount: 0,
-      currentAirport: 'CTU',
-      aiportOptions: [
-        {
-          label: '成都双流机场',
-          value: 'CTU',
-        },
-      ],
+      currentAirport: '',
+      aiportOptions: [],
+      companyData: [],
+      customColor: '#478BE7',
       baggageCountItems: [
         {
           title: '行李总数',
-          num: 223124,
+          num: 0,
         },
         {
           title: '进港行李数',
-          num: 223124,
+          num: 0,
         },
         {
           title: '出港行李数',
-          num: 223124,
+          num: 0,
         },
         {
           title: '中转行李数',
-          num: 223124,
+          num: 0,
         },
       ],
       boxMap: {
@@ -236,25 +323,149 @@ export default {
           },
         ],
       },
+      inHourDataOption: this._.cloneDeep(barOption),
+      outHourDataOption: this._.cloneDeep(barOption),
+      transHourDataOption: this._.cloneDeep(barOption),
     }
   },
-  mounted() {
-    this.getMap()
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 2, // 开始无缝滚动的数据量  //this.fourDatata.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+  },
+  watch: {
+    currentAirport(val) {
+      if (val) {
+        this.getAllData()
+      }
+    },
+  },
+  created() {
+    this.inHourDataOption.series[0].color = '#3FC9D5'
+    this.outHourDataOption.series[0].color = '#527CF5'
+    this.transHourDataOption.series[0].color = '#F5C871'
+  },
+  async mounted() {
+    this.getAiportList()
   },
   methods: {
+    // 航站列表
+    async getAiportList() {
+      this.loading = true
+      try {
+        const {
+          code,
+          returnData: { listValues },
+          message,
+        } = await Query({
+          serviceId: SERVICE_ID.AirportIds,
+          dataContent: [],
+          pageSize: 9999,
+        })
+        if (String(code) !== '0') {
+          throw new Error(message || '失败')
+        }
+        this.aiportOptions = listValues.map(aiport => ({
+          label: aiport.code3,
+          value: aiport.code3,
+        }))
+        this.currentAirport = 'CTU'
+      } catch (error) {
+        console.error(error)
+      }
+      this.loading = false
+    },
+    // 当日航班和行李数量
+    async getDateData(io_type) {
+      try {
+        const {
+          code,
+          returnData: listValues,
+          message,
+        } = await Query({
+          serviceId: SERVICE_ID.dashboardDateData,
+          dataContent: [
+            {
+              fd1: defaultDate,
+              fd2: defaultDate,
+              airport: this.currentAirport,
+              io_type,
+            },
+          ],
+          pageSize: 9999,
+        })
+        if (String(code) !== '0') {
+          throw new Error(message || '失败')
+        }
+        return listValues
+      } catch (error) {
+        console.error(error)
+        return []
+      }
+    },
+    // 航司行李量排行
+    async getCompanyData() {
+      try {
+        this.companyData = []
+        const {
+          code,
+          returnData: listValues,
+          message,
+        } = await Query({
+          serviceId: SERVICE_ID.dashboardCompanyData,
+          dataContent: [
+            {
+              airport: this.currentAirport,
+              fd1: defaultDate,
+              fd2: defaultDate,
+            },
+          ],
+          pageSize: 9999,
+        })
+        if (String(code) !== '0') {
+          throw new Error(message || '失败')
+        }
+        const max = Math.max(...listValues.map(item => Number(item.bags)))
+        this.companyData = listValues.map(item => ({
+          name: item.iata_code,
+          count: item.bags,
+          percentage: (item.bags / max).toFixed(2) * 100,
+        }))
+      } catch (error) {
+        console.error(error)
+      }
+    },
     // 当日行李分布
     async getMap() {
-      const { code, returnData: listValues } = await Query({
-        serviceId: SERVICE_ID.dashboardMap,
-        dataContent: [
-          {
-            airport: this.currentAirport,
-            fd1: defaultDate,
-            fd2: defaultDate,
-          },
-        ],
-      })
-      if (code == 0) {
+      try {
+        const {
+          code,
+          returnData: listValues,
+          message,
+        } = await Query({
+          serviceId: SERVICE_ID.dashboardMap,
+          dataContent: [
+            {
+              airport: this.currentAirport,
+              fd1: defaultDate,
+              fd2: defaultDate,
+            },
+          ],
+          pageSize: 9999,
+        })
+        if (String(code) !== '0') {
+          this.boxMap.series[0].data = []
+          throw new Error(message || '失败')
+        }
         listValues.sort((a, b) => b.bags - a.bags)
         listValues.map((item, index) => {
           item.name = item.in_province
@@ -262,8 +473,83 @@ export default {
           item.index = index + 1
         })
         this.boxMap.series[0].data = listValues
+      } catch (error) {
+        console.error(error)
       }
     },
+    // 小时行李处理量
+    async getHourData(io_type) {
+      try {
+        const {
+          code,
+          returnData: listValues,
+          message,
+        } = await Query({
+          serviceId: SERVICE_ID.dashboardHourData,
+          dataContent: [
+            {
+              airport: this.currentAirport,
+              fd1: defaultDate,
+              fd2: defaultDate,
+              io_type,
+            },
+          ],
+          pageSize: 9999,
+        })
+        if (String(code) !== '0') {
+          throw new Error(message || '失败')
+        }
+        return listValues
+      } catch (error) {
+        console.error(error)
+        return []
+      }
+    },
+    async getAllData() {
+      this.loading = true
+      try {
+        const io_types = ['离港', '进港', '中转']
+        const [
+          [outDateData],
+          [inDateData],
+          [transDateData],
+          outHourData,
+          inHourData,
+          transHourData,
+        ] = await Promise.all([
+          ...io_types.map(io_type => this.getDateData(io_type)),
+          ...io_types.map(io_type => this.getHourData(io_type)),
+          this.getCompanyData(),
+          this.getMap(),
+        ])
+        this.arrivalFlightCount = Number(inDateData.flights)
+        this.departureFlightCount = Number(outDateData.flights)
+        this.baggageCountItems[0].num =
+          Number(inDateData.bags) + Number(outDateData.bags)
+        this.baggageCountItems[1].num = Number(inDateData.bags)
+        this.baggageCountItems[2].num = Number(outDateData.bags)
+        this.baggageCountItems[3].num = Number(transDateData.bags)
+        this.inHourDataOption.xAxis.data = inHourData.map(
+          item => `${item.dat}${item.dat <= 12 ? 'am' : 'pm'}`
+        )
+        this.inHourDataOption.series[0].data = inHourData.map(item => item.bags)
+        this.outHourDataOption.xAxis.data = outHourData.map(
+          item => `${item.dat}${item.dat <= 12 ? 'am' : 'pm'}`
+        )
+        this.outHourDataOption.series[0].data = outHourData.map(
+          item => item.bags
+        )
+        this.transHourDataOption.xAxis.data = transHourData.map(
+          item => `${item.dat}${item.dat <= 12 ? 'am' : 'pm'}`
+        )
+        this.transHourDataOption.series[0].data = transHourData.map(
+          item => item.bags
+        )
+      } catch (error) {
+        console.error(error)
+      }
+      this.loading = false
+    },
   },
 }
 </script>
@@ -345,7 +631,7 @@ export default {
         justify-content: space-between;
         line-height: 38px;
         .el-select {
-          width: 160px;
+          width: 120px;
           ::v-deep .el-input__inner {
             border: none;
             background-color: transparent;
@@ -379,6 +665,7 @@ export default {
           font-family: Helvetica, Microsoft YaHei;
           font-weight: bold;
           .baggage-count-num {
+            width: 120px;
             font-size: 36px;
             color: #f7c15a;
           }
@@ -406,5 +693,35 @@ export default {
       }
     }
   }
+  .scroll-table {
+    height: 100%;
+    overflow: hidden;
+    .company-baggage-item {
+      margin-top: 36px;
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      font-family: Helvetica;
+      font-weight: bold;
+      color: #ffffff;
+      .company-progress {
+        flex: 1;
+        margin: 0 23px;
+      }
+      ::v-deep .progress {
+        flex: 1;
+        margin: 0 36px;
+        .el-progress-bar {
+          padding-right: 0;
+          .el-progress-bar__outer {
+            background-color: #534e75;
+          }
+        }
+        .el-progress__text {
+          display: none;
+        }
+      }
+    }
+  }
 }
 </style>