SZYGM1.0/src/views/dashboard/internationalDeparture.vue

<template>
  <div class="dashboard">
    <ComHead />
    <div class="dashboard-content">
      <div class="dashboard-content-top flex">
        <div class="dashboard-content-top-left">
          <div class="dashboard-content-top-left-item">
            <div class="dashboard-content-top-left-item-top">
              <div class="dashboard-content-top-left-item-top-title">
                小时峰值分析
              </div>
              <div
                class="dashboard-content-top-left-item-top-time"
                @click="showDatePicker(showTimeMsg.HourlyPeak)"
              >
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div
              v-loading="loading1"
              element-loading-text="数据加载中..."
              element-loading-background="rgba(0,0,0, 0.3)"
              class="dashboard-content-top-left-item-bottom"
            >
              <Echarts id="ww1" :option="hourlyPeakObj" />
            </div>
          </div>
          <div class="dashboard-content-top-left-item">
            <div class="dashboard-content-top-left-item-top">
              <div class="dashboard-content-top-left-item-top-title">
                日趋势分析
              </div>
              <div
                class="dashboard-content-top-left-item-top-time"
                @click="showDatePicker(showTimeMsg.WaybillTrend)"
              >
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div
              v-loading="loading2"
              element-loading-text="数据加载中..."
              element-loading-background="rgba(0,0,0, 0.3)"
              class="dashboard-content-top-left-item-bottom"
            >
              <Echarts id="ww12" :option="waybillTrendObj" />
            </div>
          </div>
          <div class="dashboard-content-top-left-item">
            <div class="dashboard-content-top-left-item-top">
              <div class="dashboard-content-top-left-item-top-title">
                目的站统计分析
              </div>
              <div
                class="dashboard-content-bottom-left-top-time"
                @click="showDatePicker(showTimeMsg.NodePeak)"
              >
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div
              v-loading="loading3"
              element-loading-text="数据加载中..."
              element-loading-background="rgba(0,0,0, 0.3)"
              class="dashboard-content-top-left-item-bottom"
            >
              <Echarts id="ww4" :option="nodePeakObj" />
            </div>
          </div>
        </div>
        <!-- 地图 -->
        <div class="dashboard-content-top-center">
          <div
            v-loading="loading4"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(0,0,0, 0.3)"
            class="dashboard-content-top-center-top"
          >
            <div class="dashboard-content-top-center-top-list">
              <div class="dashboard-content-top-center-top-list-txt">
                今日计划航班数（班）
              </div>
              <div class="dashboard-content-top-center-top-list-num">
                {{ flightNums }}
              </div>
            </div>
            <div class="dashboard-content-top-center-top-list">
              <div class="dashboard-content-top-center-top-list-txt">
                已完成航班数（班）
              </div>
              <div class="dashboard-content-top-center-top-list-num">
                {{ stockNums }}
              </div>
            </div>
            <div class="dashboard-content-top-center-top-list">
              <div class="dashboard-content-top-center-top-list-txt">
                已装载总量(吨)
              </div>
              <div class="dashboard-content-top-center-top-list-num">
                {{ formatWeight(weightNums) }}
              </div>
            </div>
          </div>
          <div
            v-loading="loading5"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(0,0,0, 0.3)"
            class="dashboard-content-top-center-bottom"
          >
            <div class="dashboard-content-top-center-bottom-title">
              航班动态跟踪
            </div>
            <div class="dashboard-content-top-center-bottom-content">
              <div class="dashboard-content-top-center-bottom-content-head">
                <div
                  class="dashboard-content-top-center-bottom-content-head-list"
                >
                  公司/航班号
                </div>
                <div
                  class="dashboard-content-top-center-bottom-content-head-list"
                >
                  航班状态
                </div>
                <div
                  class="dashboard-content-top-center-bottom-content-head-list"
                >
                  经停/到达站
                </div>
                <div
                  class="dashboard-content-top-center-bottom-content-head-list"
                >
                  计划起飞
                </div>
                <div
                  class="dashboard-content-top-center-bottom-content-head-list"
                >
                  实际起飞
                </div>
                <div
                  class="dashboard-content-top-center-bottom-content-head-list"
                >
                  机型
                </div>
                <div
                  class="dashboard-content-top-center-bottom-content-head-list"
                >
                  类型
                </div>
              </div>
              <div
                ref="scrollContent"
                class="dashboard-content-top-center-bottom-content-bottom"
              >
                <vue3-seamless-scroll
                  :list="listData"
                  :limitScrollNum="limitScrollNum"
                  :hover-stop="true"
                  :hover="true"
                  :step="0.3"
                >
                  <div
                    v-for="(item, index) in listData"
                    :key="index"
                    class="dashboard-content-top-center-bottom-content-bottom-list"
                  >
                    <div
                      class="dashboard-content-top-center-bottom-content-bottom-list-txt"
                    >
                      {{ item.flightNo }}
                    </div>
                    <div
                      class="dashboard-content-top-center-bottom-content-bottom-list-txt"
                    >
                      {{ item.flightState }}
                    </div>
                    <div
                      class="dashboard-content-top-center-bottom-content-bottom-list-txt"
                    >
                      {{ item.airport }}
                    </div>
                    <div
                      class="dashboard-content-top-center-bottom-content-bottom-list-txt"
                    >
                      {{ item.planTime }}
                    </div>
                    <!-- <div class="dashboard-content-top-center-bottom-content-bottom-list-txt">
                      {{ item.preTime || '--' }}
                    </div> -->
                    <div
                      class="dashboard-content-top-center-bottom-content-bottom-list-txt"
                    >
                      {{ item.acTime || '--' }}
                    </div>
                    <div
                      class="dashboard-content-top-center-bottom-content-bottom-list-txt"
                    >
                      {{ item.planeType }}
                    </div>
                    <div
                      class="dashboard-content-top-center-bottom-content-bottom-list-txt"
                    >
                      {{ item.KHT }}
                    </div>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </div>
          </div>
        </div>
        <div class="dashboard-content-top-right">
          <div class="dashboard-content-top-right-item">
            <div class="dashboard-content-top-right-item-top">
              <div class="dashboard-content-top-right-item-top-title">
                航司统计分析
              </div>
              <div
                class="dashboard-content-top-right-item-top-time"
                @click="showDatePicker(showTimeMsg.AirlineTraffic)"
              >
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div
              v-loading="loading6"
              element-loading-text="数据加载中..."
              element-loading-background="rgba(0,0,0, 0.3)"
              class="dashboard-content-top-right-item-bottom"
            >
              <Echarts id="a1" :option="airlineTrafficObj" />
            </div>
          </div>
          <div class="dashboard-content-top-right-item">
            <div class="dashboard-content-top-right-item-top">
              <div class="dashboard-content-top-right-item-top-title">
                特货分类统计
              </div>
              <div
                class="dashboard-content-top-right-item-top-time"
                @click="showDatePicker(showTimeMsg.SpecialClassification)"
              >
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
              <div class="dashboard-content-top-right-item-top-time">
                <el-dropdown
                  :disabled="!specialGoodsDatas.length"
                  trigger="click"
                  @command="handleCommand"
                >
                  <span class="icons">
                    <span class="icons-txt">{{ specialGoods }}</span>
                    <el-icon color="#ffffff">
                      <CaretBottom />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        v-for="specialTypeName in specialGoodsDatas"
                        :key="specialTypeName"
                        :command="specialTypeName"
                        >{{ specialTypeName }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <div
              v-loading="loading7"
              element-loading-text="数据加载中..."
              element-loading-background="rgba(0,0,0, 0.3)"
              class="dashboard-content-top-left-item-bottom"
            >
              <Echarts id="ww44" :option="airlineObj" />
            </div>
          </div>
          <div class="dashboard-content-top-right-item">
            <div class="dashboard-content-top-right-item-top">
              <div class="dashboard-content-top-right-item-top-title">
                拉货统计分析
              </div>
              <div
                class="dashboard-content-top-right-item-top-time"
                @click="showDatePicker(showTimeMsg.PickingStatistics)"
              >
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div
              v-loading="loading8"
              element-loading-text="数据加载中..."
              element-loading-background="rgba(0,0,0, 0.3)"
              class="dashboard-content-top-left-item-bottom"
            >
              <Echarts id="ww45" :option="pickingObj" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <Dialog
      :flag="flag"
      msg-title="日期选择"
      @resetForm="resetForm"
      @submitForm="submitForm"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="开始日期">
          <el-date-picker
            :disabled-date="disabledStartDate"
            v-model="form.startDate"
            type="date"
            placeholder="请选择开始日期"
            size="default"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            :disabled-date="disabledEndDate"
            v-model="form.endDate"
            type="date"
            placeholder="请选择结束日期"
            size="default"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import Echarts from '@/components/Echarts/commonChartsBar.vue'
import ComHead from './components/comHead.vue'
import { Calendar, CaretBottom } from '@element-plus/icons-vue'
import Dialog from '@/components/dialog/index.vue'
import { usePublic, showTimeMsg, parseDate } from './hooks/usePublic'
// import nodeCode from './hooks/nodeCode'
import { parseTime, isValue } from '@/utils/validate'
import * as _ from 'lodash'
import { useLoop } from '@/hooks/useLoop'

const {
  optionLeft,
  airCompaneBaggage,
  airlineAbnormalBaggage,
  getPublicData,
  formatGoods,
  formatWeight,
} = usePublic()
const timePickerName = ref(0)
const limitScrollNum = ref(13)
const scrollContent = ref<HTMLElement>()
const flag = ref(false)
const loading1 = ref(true)
const loading2 = ref(true)
const loading3 = ref(true)
const loading4 = ref(true)
const loading5 = ref(true)
const loading6 = ref(true)
const loading7 = ref(true)
const loading8 = ref(true)
const hourlyPeakObj = ref<any>({})
const waybillTrendObj = ref<any>({})
const nodePeakObj = ref<any>({})
const airlineTrafficObj = ref<any>({})
const airlineObj = ref<any>({})
const pickingObj = ref<any>({})
const flightNums = ref(0)
const stockNums = ref(0)
const specialGoods = ref('全部')
const specialGoodsDatas = ref([
  '活',
  '鲜',
  '药',
  '危',
  '冷',
  '锂',
  '快',
  '全部',
])
const weightNums = ref<number | string>(0)
const today = parseTime(Date.now(), '{y}-{m}-{d}')
const sevenDaysAgo = parseTime(
  Date.now() - 24 * 60 * 60 * 1000 * 7,
  '{y}-{m}-{d}'
)
const form = reactive({
  startDate: sevenDaysAgo,
  endDate: today,
})
const listData = ref<any>([])
const disabledStartDate = (time: Date) => {
  const timer: any = form.endDate
  const data = new Date(timer)
  return time.getTime() > data.getTime()
}
const disabledEndDate = (time: Date) => {
  const timer: any = form.startDate
  let data = new Date(timer)
  return data.getTime() > time.getTime()
}
const resetForm = () => {
  flag.value = false
}

const submitForm = () => {
  flag.value = false
  let dates: any = {}
  switch (timePickerName.value) {
    case showTimeMsg.HourlyPeak:
      dates = hourlyDates
      loading1.value = true
      break
    case showTimeMsg.WaybillTrend:
      dates = waybillDates
      loading2.value = true
      break
    case showTimeMsg.NodePeak:
      dates = nodeDates
      loading3.value = true
      break
    case showTimeMsg.AirlineTraffic:
      dates = airlineTrafficDates
      loading6.value = true
      break
    case showTimeMsg.SpecialClassification:
      dates = airlineDates
      loading7.value = true
      break
    case showTimeMsg.PickingStatistics:
      dates = pickingDates
      loading8.value = true
      break
    default:
      break
  }
  dates.startDate = form.startDate
  dates.endDate = form.endDate
}

const showDatePicker = (id?) => {
  flag.value = true
  timePickerName.value = id
  let dates: any = {}
  switch (id) {
    case showTimeMsg.HourlyPeak:
      dates = hourlyDates
      break
    case showTimeMsg.WaybillTrend:
      dates = waybillDates
      break
    case showTimeMsg.NodePeak:
      dates = nodeDates
      break
    case showTimeMsg.AirlineTraffic:
      dates = airlineTrafficDates
      break
    case showTimeMsg.SpecialClassification:
      dates = airlineDates
      break
    case showTimeMsg.PickingStatistics:
      dates = pickingDates
      break
    default:
      break
  }
  form.startDate = dates.startDate || null
  form.endDate = dates.endDate || null
}

const sortClass = sortData => {
  const groupBy = (array, f) => {
    let groups = {}
    array.forEach(o => {
      let group = JSON.stringify(f(o))
      groups[group] = groups[group] || []
      groups[group].push(o)
    })
    return Object.keys(groups).map(group => {
      return groups[group]
    })
  }
  const sorted = groupBy(sortData, item => {
    return item.jobName
  })
  return sorted
}

const pubFunc = (listValues, target, type?) => {
  const newObj = _.cloneDeep(target)
  const [jobTimes, stockNums, weights] = [<any>[], <any>[], <any>[]]
  listValues.forEach(item => {
    jobTimes.push(item.jobTime)
    stockNums.push(item.stockNum)
    weights.push(item.weight)
  })
  newObj.xAxis.data = jobTimes
  if (type) {
    newObj.series[1].data = stockNums
    newObj.series[0].data = weights
  } else {
    newObj.series[0].data = stockNums
    newObj.series[1].data = weights
  }
  return newObj
}

// 特货分类统计-选取下拉数据
const handleCommand = (command: string) => {
  specialGoods.value = command
}

//获取小时峰值分布
const hourlyDates = reactive({ startDate: today, endDate: today })
const hourlyPeakFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscGjHourlyPeakId, [
    { flightDate1: hourlyDates.startDate, flightDate2: hourlyDates.endDate },
  ])) as any
  if (listValues && isValue(listValues)) {
    hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
  }
  loading1.value = false
}

//运单趋势分析
const waybillDates = reactive({ startDate: sevenDaysAgo, endDate: today })
const waybillTrendFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscGjWaybillTrendId, [
    { flightDate1: waybillDates.startDate, flightDate2: waybillDates.endDate },
  ])) as any
  if (listValues && isValue(listValues)) {
    const dealedList = listValues.reduce((preList, currentValue) => {
      if (typeof currentValue.jobTime === 'string') {
        return [
          ...preList,
          {
            ...currentValue,
            jobTime: parseDate(currentValue.jobTime),
          },
        ]
      }
      return preList
    }, [])
    waybillTrendObj.value = pubFunc(dealedList, optionLeft, true)
  }
  loading2.value = false
}

//始发站/目的站统计分析
const nodeDates = reactive({ startDate: today, endDate: today })
const nodePeakFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
    {
      fd1: nodeDates.startDate,
      fd2: nodeDates.endDate,
      fttp: '国际离港',
    },
  ])) as any
  if (listValues && isValue(listValues)) {
    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption)
    listValues.forEach(item => {
      item.jobTime = item['airport']
    })
    nodePeakObj.value = pubFunc(listValues, newObj, true)
  }
  loading3.value = false
}

//航班数&运单数
const numbersFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscGjNumbersId, [
    {
      fd1: today,
      fd2: today,
    },
  ])) as any
  if (listValues && isValue(listValues)) {
    const { flightNum, finishFlightNum, weight } = listValues[0]
    flightNums.value = flightNum ?? 0
    stockNums.value = finishFlightNum ?? 0
    weightNums.value = weight ?? 0
  }
  loading4.value = false
}

//航司运量
const airlineTrafficDates = reactive({
  startDate: sevenDaysAgo,
  endDate: today,
})
const airlineTrafficFunc = async () => {
  const listValues = await getPublicData(DATACONTENT_ID.jscGjAirlineTrafficId, [
    {
      flightDate1: airlineTrafficDates.startDate,
      flightDate2: airlineTrafficDates.endDate,
    },
  ])
  if (listValues && isValue(listValues)) {
    const newObj: any = _.cloneDeep(airCompaneBaggage.option.baseOption)
    newObj.dataZoom = [
      {
        id: 'dataZoomX',
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'filter',
        start: 0,
        end: 20,
      },
    ]
    listValues.forEach(item => {
      item.jobTime = item['IACACode']
    })

    airlineTrafficObj.value = pubFunc(listValues, newObj, true)
  }
  loading6.value = false
}

//航班表格
const airlineAbnormalFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
    {
      fd1: today,
      fd2: today,
      fttp: '国际离港',
    },
  ])) as any
  const domHeight = scrollContent.value?.clientHeight
  if (domHeight && typeof domHeight == 'number') {
    const cell = Math.ceil(domHeight / 40)
    limitScrollNum.value = cell
  }
  if (listValues && isValue(listValues)) {
    listData.value = listValues
  }
  loading5.value = false
}

//航班动态统计
const airlineDates = reactive({ startDate: sevenDaysAgo, endDate: today })
const airlineFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
    {
      fd1: airlineDates.startDate,
      fd2: airlineDates.endDate,
      fttp: '国际离港',
      spe: specialGoods.value,
    },
  ])) as any
  if (listValues && isValue(listValues)) {
    const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption)
    const newDatas = _.cloneDeep(listValues)
    const result = formatGoods(specialGoods.value, newDatas)
    airlineObj.value = pubFunc(result, newObj)
  }
  loading7.value = false
}

//拉货统计
const pickingDates = reactive({ startDate: sevenDaysAgo, endDate: today })
const pickingFuncs = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscGjPullId, [
    {
      fd1: pickingDates.startDate,
      fd2: pickingDates.endDate,
    },
  ])) as any
  if (listValues && isValue(listValues)) {
    const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption)
    const dealedList = listValues.reduce((preList, currentValue) => {
      if (typeof currentValue.flightDate === 'string') {
        return [
          ...preList,
          {
            ...currentValue,
            jobTime: parseDate(currentValue.flightDate),
            weight: currentValue.flightNum,
          },
        ]
      }
      return preList
    }, [])
    pickingObj.value = pubFunc(dealedList, newObj)
  }
  loading8.value = false
}

useLoop([hourlyPeakFunc], 'dashboard', [hourlyDates])
useLoop([waybillTrendFunc], 'dashboard', [waybillDates])
useLoop([nodePeakFunc], 'dashboard', [nodeDates])
useLoop([numbersFunc], 'dashboard')
useLoop([airlineTrafficFunc], 'dashboard', [airlineTrafficDates])
useLoop([airlineAbnormalFunc], 'dashboard')
useLoop([airlineFunc], 'dashboard', [airlineDates, specialGoods])
useLoop([pickingFuncs], 'dashboard', [pickingDates])
</script>

<style lang="scss" scoped>
@import './css/index.scss';
</style>