SMAirports/src/views/dashboard/index.vue

<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>