|
|
@@ -9,7 +9,10 @@
|
|
|
<div class="dashboard-content-top-left-item-top-title">
|
|
|
小时峰值分析
|
|
|
</div>
|
|
|
- <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker(showTimeMsg.HourlyPeak)">
|
|
|
+ <div
|
|
|
+ class="dashboard-content-top-left-item-top-time"
|
|
|
+ @click="showDatePicker(showTimeMsg.HourlyPeak)"
|
|
|
+ >
|
|
|
<el-icon color="#ffffff" size="18">
|
|
|
<Calendar />
|
|
|
</el-icon>
|
|
|
@@ -18,7 +21,13 @@
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-loading="loading1" element-loading-text="数据加载中..." element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(0,0,0, 0.3)" class="dashboard-content-top-left-item-bottom">
|
|
|
+ <div
|
|
|
+ v-loading="loading1"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
+ element-loading-background="rgba(0,0,0, 0.3)"
|
|
|
+ class="dashboard-content-top-left-item-bottom"
|
|
|
+ >
|
|
|
<Echarts id="ww1" :option="hourlyPeakObj" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -27,7 +36,10 @@
|
|
|
<div class="dashboard-content-top-left-item-top-title">
|
|
|
日趋势分析
|
|
|
</div>
|
|
|
- <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker(showTimeMsg.WaybillTrend)">
|
|
|
+ <div
|
|
|
+ class="dashboard-content-top-left-item-top-time"
|
|
|
+ @click="showDatePicker(showTimeMsg.WaybillTrend)"
|
|
|
+ >
|
|
|
<el-icon color="#ffffff" size="18">
|
|
|
<Calendar />
|
|
|
</el-icon>
|
|
|
@@ -36,7 +48,13 @@
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-loading="loading2" element-loading-text="数据加载中..." element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(0,0,0, 0.3)" class="dashboard-content-top-left-item-bottom">
|
|
|
+ <div
|
|
|
+ v-loading="loading2"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
+ element-loading-background="rgba(0,0,0, 0.3)"
|
|
|
+ class="dashboard-content-top-left-item-bottom"
|
|
|
+ >
|
|
|
<Echarts id="ww12" :option="waybillTrendObj" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -45,7 +63,10 @@
|
|
|
<div class="dashboard-content-top-left-item-top-title">
|
|
|
始发站统计分析
|
|
|
</div>
|
|
|
- <div class="dashboard-content-bottom-left-top-time" @click="showDatePicker(showTimeMsg.NodePeak)">
|
|
|
+ <div
|
|
|
+ class="dashboard-content-bottom-left-top-time"
|
|
|
+ @click="showDatePicker(showTimeMsg.NodePeak)"
|
|
|
+ >
|
|
|
<el-icon color="#ffffff" size="18">
|
|
|
<Calendar />
|
|
|
</el-icon>
|
|
|
@@ -54,50 +75,151 @@
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-loading="loading3" element-loading-text="数据加载中..." element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(0,0,0, 0.3)" class="dashboard-content-top-left-item-bottom">
|
|
|
+ <div
|
|
|
+ v-loading="loading3"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
+ 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-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(0,0,0, 0.3)" class="dashboard-content-top-center-top">
|
|
|
+ <div
|
|
|
+ v-loading="loading4"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
+ 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 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 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 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-svg-view-box="-10, -10, 50, 50" 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
|
|
|
+ v-loading="loading5"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
+ 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
|
|
|
+ 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
|
|
|
+ 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
|
|
|
+ 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>
|
|
|
@@ -110,7 +232,10 @@
|
|
|
<div class="dashboard-content-top-right-item-top-title">
|
|
|
航司统计分析
|
|
|
</div>
|
|
|
- <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker(showTimeMsg.AirlineTraffic)">
|
|
|
+ <div
|
|
|
+ class="dashboard-content-top-right-item-top-time"
|
|
|
+ @click="showDatePicker(showTimeMsg.AirlineTraffic)"
|
|
|
+ >
|
|
|
<el-icon color="#ffffff" size="18">
|
|
|
<Calendar />
|
|
|
</el-icon>
|
|
|
@@ -119,7 +244,13 @@
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-loading="loading6" element-loading-text="数据加载中..." element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(0,0,0, 0.3)" class="dashboard-content-top-right-item-bottom">
|
|
|
+ <div
|
|
|
+ v-loading="loading6"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
+ element-loading-background="rgba(0,0,0, 0.3)"
|
|
|
+ class="dashboard-content-top-right-item-bottom"
|
|
|
+ >
|
|
|
<Echarts id="a1" :option="airlineTrafficObj" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -128,7 +259,10 @@
|
|
|
<div class="dashboard-content-top-right-item-top-title">
|
|
|
特货分类统计
|
|
|
</div>
|
|
|
- <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker(showTimeMsg.SpecialClassification)">
|
|
|
+ <div
|
|
|
+ class="dashboard-content-top-right-item-top-time"
|
|
|
+ @click="showDatePicker(showTimeMsg.SpecialClassification)"
|
|
|
+ >
|
|
|
<el-icon color="#ffffff" size="18">
|
|
|
<Calendar />
|
|
|
</el-icon>
|
|
|
@@ -146,13 +280,24 @@
|
|
|
</span>
|
|
|
<template #dropdown>
|
|
|
<el-dropdown-menu>
|
|
|
- <el-dropdown-item v-for="item in specialGoodsDatas" :key="item.specialTypeName" :command="item.specialTypeName">{{ item.specialTypeName }}</el-dropdown-item>
|
|
|
+ <el-dropdown-item
|
|
|
+ v-for="item in specialGoodsDatas"
|
|
|
+ :key="item.specialTypeName"
|
|
|
+ :command="item.specialTypeName"
|
|
|
+ >{{ item.specialTypeName }}</el-dropdown-item
|
|
|
+ >
|
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-loading="loading7" element-loading-text="数据加载中..." element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(0,0,0, 0.3)" class="dashboard-content-top-left-item-bottom">
|
|
|
+ <div
|
|
|
+ v-loading="loading7"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
+ element-loading-background="rgba(0,0,0, 0.3)"
|
|
|
+ class="dashboard-content-top-left-item-bottom"
|
|
|
+ >
|
|
|
<Echarts id="ww44" :option="airlineObj" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -161,7 +306,10 @@
|
|
|
<div class="dashboard-content-top-right-item-top-title">
|
|
|
货机货量统计
|
|
|
</div>
|
|
|
- <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker(showTimeMsg.TallyWeight)">
|
|
|
+ <div
|
|
|
+ class="dashboard-content-top-right-item-top-time"
|
|
|
+ @click="showDatePicker(showTimeMsg.TallyWeight)"
|
|
|
+ >
|
|
|
<el-icon color="#ffffff" size="18">
|
|
|
<Calendar />
|
|
|
</el-icon>
|
|
|
@@ -186,20 +334,47 @@
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-loading="loading8" element-loading-text="数据加载中..." element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(0,0,0, 0.3)" class="dashboard-content-top-left-item-bottom">
|
|
|
+ <div
|
|
|
+ v-loading="loading8"
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
+ element-loading-svg-view-box="-10, -10, 50, 50"
|
|
|
+ element-loading-background="rgba(0,0,0, 0.3)"
|
|
|
+ class="dashboard-content-top-left-item-bottom"
|
|
|
+ >
|
|
|
<Echarts id="ww45" :option="tallyObj" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Dialog :flag="flag" msg-title="日期选择" @resetForm="resetForm" @submitForm="submitForm">
|
|
|
+ <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-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-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>
|
|
|
@@ -207,16 +382,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted } from "vue";
|
|
|
-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 } from "./hooks/usePublic";
|
|
|
-import nodeCode from "./hooks/nodeCode";
|
|
|
-import { parseTime, isValue } from "@/utils/validate";
|
|
|
-import * as _ from "lodash";
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+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 } from './hooks/usePublic'
|
|
|
+// import nodeCode from './hooks/nodeCode'
|
|
|
+import { parseTime, isValue } from '@/utils/validate'
|
|
|
+import * as _ from 'lodash'
|
|
|
const {
|
|
|
optionLeft,
|
|
|
airCompaneBaggage,
|
|
|
@@ -225,320 +400,330 @@ const {
|
|
|
getPublicData,
|
|
|
formatGoods,
|
|
|
formatWeight,
|
|
|
-} = usePublic();
|
|
|
-const timePickerName = ref<number>(0);
|
|
|
-const limitScrollNum = ref<number>(13);
|
|
|
-const scrollContent = ref<HTMLElement>();
|
|
|
-const flag = ref<boolean>(false);
|
|
|
-const loading1 = ref<boolean>(false);
|
|
|
-const loading2 = ref<boolean>(false);
|
|
|
-const loading3 = ref<boolean>(false);
|
|
|
-const loading4 = ref<boolean>(false);
|
|
|
-const loading5 = ref<boolean>(false);
|
|
|
-const loading6 = ref<boolean>(false);
|
|
|
-const loading7 = ref<boolean>(false);
|
|
|
-const loading8 = ref<boolean>(false);
|
|
|
-const hourlyPeakObj = ref<any>({});
|
|
|
-const waybillTrendObj = ref<any>({});
|
|
|
-const nodePeakObj = ref<any>({});
|
|
|
-const airlineTrafficObj = ref<any>({});
|
|
|
-const airlineObj = ref<any>({});
|
|
|
-const tallyObj = ref<any>({});
|
|
|
-const flightNums = ref<number>(0);
|
|
|
-const stockNums = ref<number>(0);
|
|
|
-const weightNums = ref<number | string>(0);
|
|
|
-const specialGoods = ref<string>("分类");
|
|
|
-const specialGoodsDatas = ref<any>([]);
|
|
|
-const specialGoodsAll = ref<any>([]);
|
|
|
-const weightType = ref("进港");
|
|
|
+} = usePublic()
|
|
|
+const timePickerName = ref(0)
|
|
|
+const limitScrollNum = ref(13)
|
|
|
+const scrollContent = ref<HTMLElement>()
|
|
|
+const flag = ref(false)
|
|
|
+const loading1 = ref(false)
|
|
|
+const loading2 = ref(false)
|
|
|
+const loading3 = ref(false)
|
|
|
+const loading4 = ref(false)
|
|
|
+const loading5 = ref(false)
|
|
|
+const loading6 = ref(false)
|
|
|
+const loading7 = ref(false)
|
|
|
+const loading8 = ref(false)
|
|
|
+const hourlyPeakObj = ref<any>({})
|
|
|
+const waybillTrendObj = ref<any>({})
|
|
|
+const nodePeakObj = ref<any>({})
|
|
|
+const airlineTrafficObj = ref<any>({})
|
|
|
+const airlineObj = ref<any>({})
|
|
|
+const tallyObj = ref<any>({})
|
|
|
+const flightNums = ref(0)
|
|
|
+const stockNums = ref(0)
|
|
|
+const weightNums = ref<number | string>(0)
|
|
|
+const specialGoods = ref<string>('分类')
|
|
|
+const specialGoodsDatas = ref<any>([])
|
|
|
+const specialGoodsAll = ref<any>([])
|
|
|
+const weightType = ref('进港')
|
|
|
const form = ref({
|
|
|
- startDate: parseTime(Date.now() - 24 * 60 * 60 * 1000 * 7, "{y}-{m}-{d}"),
|
|
|
- endDate: parseTime(Date.now(), "{y}-{m}-{d}"),
|
|
|
-});
|
|
|
+ startDate: parseTime(Date.now() - 24 * 60 * 60 * 1000 * 7, '{y}-{m}-{d}'),
|
|
|
+ endDate: parseTime(Date.now(), '{y}-{m}-{d}'),
|
|
|
+})
|
|
|
const dateNow = ref({
|
|
|
- time: parseTime(Date.now(), "{y}-{m}-{d}"),
|
|
|
-});
|
|
|
-const listData = ref<any>([]);
|
|
|
+ time: parseTime(Date.now(), '{y}-{m}-{d}'),
|
|
|
+})
|
|
|
+const listData = ref<any>([])
|
|
|
const disabledStartDate = (time: Date) => {
|
|
|
- const timer: any = form.value.endDate;
|
|
|
- const data = new Date(timer);
|
|
|
- return time.getTime() > data.getTime();
|
|
|
-};
|
|
|
+ const timer: any = form.value.endDate
|
|
|
+ const data = new Date(timer)
|
|
|
+ return time.getTime() > data.getTime()
|
|
|
+}
|
|
|
const disabledEndDate = (time: Date) => {
|
|
|
- const timer: any = form.value.startDate;
|
|
|
- let data = new Date(timer);
|
|
|
- return data.getTime() > time.getTime();
|
|
|
-};
|
|
|
+ const timer: any = form.value.startDate
|
|
|
+ let data = new Date(timer)
|
|
|
+ return data.getTime() > time.getTime()
|
|
|
+}
|
|
|
const resetForm = () => {
|
|
|
- flag.value = false;
|
|
|
-};
|
|
|
+ flag.value = false
|
|
|
+}
|
|
|
|
|
|
const submitForm = () => {
|
|
|
- flag.value = false;
|
|
|
+ flag.value = false
|
|
|
switch (timePickerName.value) {
|
|
|
case showTimeMsg.HourlyPeak:
|
|
|
- dateNow.value.time = form.value.startDate;
|
|
|
- hourlyPeakFunc();
|
|
|
- break;
|
|
|
+ dateNow.value.time = form.value.startDate
|
|
|
+ hourlyPeakFunc()
|
|
|
+ break
|
|
|
case showTimeMsg.WaybillTrend:
|
|
|
- waybillTrendFunc();
|
|
|
- break;
|
|
|
+ waybillTrendFunc()
|
|
|
+ break
|
|
|
case showTimeMsg.NodePeak:
|
|
|
- nodePeakFunc();
|
|
|
- break;
|
|
|
+ nodePeakFunc()
|
|
|
+ break
|
|
|
case showTimeMsg.AirlineTraffic:
|
|
|
- airlineTrafficFunc();
|
|
|
- break;
|
|
|
+ airlineTrafficFunc()
|
|
|
+ break
|
|
|
case showTimeMsg.AirlineAbnormal:
|
|
|
- airlineFunc();
|
|
|
- break;
|
|
|
+ airlineFunc()
|
|
|
+ break
|
|
|
case showTimeMsg.TallyWeight:
|
|
|
- tallyWeightFunc();
|
|
|
- break;
|
|
|
+ tallyWeightFunc()
|
|
|
+ break
|
|
|
case showTimeMsg.SpecialClassification:
|
|
|
- airlineFunc();
|
|
|
- break;
|
|
|
+ airlineFunc()
|
|
|
+ break
|
|
|
default:
|
|
|
- break;
|
|
|
+ break
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
|
|
|
const showDatePicker = (id?) => {
|
|
|
- flag.value = true;
|
|
|
- timePickerName.value = id;
|
|
|
-};
|
|
|
+ flag.value = true
|
|
|
+ timePickerName.value = id
|
|
|
+}
|
|
|
|
|
|
-const sortClass = (sortData) => {
|
|
|
+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;
|
|
|
-};
|
|
|
+ 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(Number(item.stockNum));
|
|
|
- weights.push(Number(item.weight));
|
|
|
- });
|
|
|
- newObj.xAxis.data = jobTimes;
|
|
|
+ const newObj = _.cloneDeep(target)
|
|
|
+ const [jobTimes, stockNums, weights] = [<any>[], <any>[], <any>[]]
|
|
|
+ listValues.forEach(item => {
|
|
|
+ jobTimes.push(item.jobTime)
|
|
|
+ stockNums.push(Number(item.stockNum))
|
|
|
+ weights.push(Number(item.weight))
|
|
|
+ })
|
|
|
+ newObj.xAxis.data = jobTimes
|
|
|
if (type) {
|
|
|
- newObj.series[1].data = stockNums;
|
|
|
- newObj.series[0].data = weights;
|
|
|
+ newObj.series[1].data = stockNums
|
|
|
+ newObj.series[0].data = weights
|
|
|
} else {
|
|
|
- newObj.series[0].data = stockNums;
|
|
|
- newObj.series[1].data = weights;
|
|
|
+ newObj.series[0].data = stockNums
|
|
|
+ newObj.series[1].data = weights
|
|
|
}
|
|
|
- return newObj;
|
|
|
-};
|
|
|
+ return newObj
|
|
|
+}
|
|
|
|
|
|
const parseDate = (date: string) => {
|
|
|
- const dates = date.split("-");
|
|
|
- const newDate = dates.shift();
|
|
|
- return dates.join("-");
|
|
|
-};
|
|
|
+ const dates = date.split('-')
|
|
|
+ const newDate = dates.shift()
|
|
|
+ return dates.join('-')
|
|
|
+}
|
|
|
|
|
|
// 特货分类统计-选取下拉数据
|
|
|
const handleCommand = (command: string) => {
|
|
|
- specialGoods.value = command;
|
|
|
- const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption);
|
|
|
- const result = formatGoods(command, specialGoodsAll.value);
|
|
|
- airlineObj.value = pubFunc(result, newObj);
|
|
|
-};
|
|
|
+ specialGoods.value = command
|
|
|
+ const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption)
|
|
|
+ const result = formatGoods(command, specialGoodsAll.value)
|
|
|
+ airlineObj.value = pubFunc(result, newObj)
|
|
|
+}
|
|
|
|
|
|
//获取小时峰值分布
|
|
|
const hourlyPeakFunc = async () => {
|
|
|
- loading1.value = true;
|
|
|
+ loading1.value = true
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscCgHourlyPeakId, [
|
|
|
{ flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
|
|
|
- ])) as any;
|
|
|
+ ])) as any
|
|
|
if (listValues && isValue(listValues)) {
|
|
|
- hourlyPeakObj.value = pubFunc(listValues, optionLeft, true);
|
|
|
+ hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
|
|
|
}
|
|
|
- loading1.value = false;
|
|
|
-};
|
|
|
+ loading1.value = false
|
|
|
+}
|
|
|
|
|
|
//运单趋势分析
|
|
|
const waybillTrendFunc = async () => {
|
|
|
- loading2.value = true;
|
|
|
+ loading2.value = true
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscCgWaybillTrendId, [
|
|
|
{ flightDate1: form.value.startDate, flightDate2: form.value.endDate },
|
|
|
- ])) as any;
|
|
|
+ ])) as any
|
|
|
if (listValues && isValue(listValues)) {
|
|
|
- listValues.forEach((item) => {
|
|
|
- item.jobTime = parseDate(item["jobTime"]);
|
|
|
- });
|
|
|
- waybillTrendObj.value = pubFunc(listValues, optionLeft, true);
|
|
|
+ listValues.forEach(item => {
|
|
|
+ item.jobTime = parseDate(item['jobTime'])
|
|
|
+ })
|
|
|
+ waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
|
|
|
}
|
|
|
- loading2.value = false;
|
|
|
-};
|
|
|
+ loading2.value = false
|
|
|
+}
|
|
|
|
|
|
//始发站/目的站统计分析
|
|
|
-const nodePeakFunc = async () => {
|
|
|
- loading3.value = true;
|
|
|
+const nodePeakFunc = async (fd1?: string, fd2?: string) => {
|
|
|
+ loading3.value = true
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
|
|
|
- { fd1: form.value.startDate, fd2: form.value.endDate, fttp: "国内进港" },
|
|
|
- ])) as any;
|
|
|
+ {
|
|
|
+ fd1: fd1 ?? form.value.startDate,
|
|
|
+ fd2: fd2 ?? form.value.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);
|
|
|
+ const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption)
|
|
|
+ listValues.forEach(item => {
|
|
|
+ item.jobTime = item['airport']
|
|
|
+ })
|
|
|
+ nodePeakObj.value = pubFunc(listValues, newObj, true)
|
|
|
}
|
|
|
- loading3.value = false;
|
|
|
-};
|
|
|
+ loading3.value = false
|
|
|
+}
|
|
|
|
|
|
//航班数&运单数
|
|
|
const numbersFunc = async () => {
|
|
|
- loading4.value = true;
|
|
|
+ loading4.value = true
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscCgNumbersId, [
|
|
|
{
|
|
|
- fd1: parseTime(Date.now(), "{y}-{m}-{d}"),
|
|
|
- fd2: parseTime(Date.now(), "{y}-{m}-{d}"),
|
|
|
+ fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
|
|
|
+ fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
|
|
|
},
|
|
|
- ])) as any;
|
|
|
+ ])) as any
|
|
|
if (listValues && isValue(listValues)) {
|
|
|
- const { flightNum, finishFlightNum, weight } = listValues[0];
|
|
|
- flightNums.value = flightNum ?? 0;
|
|
|
- stockNums.value = finishFlightNum ?? 0;
|
|
|
- weightNums.value = weight ?? 0;
|
|
|
+ const { flightNum, finishFlightNum, weight } = listValues[0]
|
|
|
+ flightNums.value = flightNum ?? 0
|
|
|
+ stockNums.value = finishFlightNum ?? 0
|
|
|
+ weightNums.value = weight ?? 0
|
|
|
}
|
|
|
- loading4.value = false;
|
|
|
-};
|
|
|
+ loading4.value = false
|
|
|
+}
|
|
|
|
|
|
//航司运量
|
|
|
-const airlineTrafficFunc = async () => {
|
|
|
- loading6.value = true;
|
|
|
- const listValues = (await getPublicData(
|
|
|
- DATACONTENT_ID.jscCgAirlineTrafficId,
|
|
|
- [{ flightDate1: form.value.startDate, flightDate2: form.value.endDate }]
|
|
|
- )) as any;
|
|
|
+const airlineTrafficFunc = async (
|
|
|
+ flightDate1?: string,
|
|
|
+ flightDate2?: string
|
|
|
+) => {
|
|
|
+ loading6.value = true
|
|
|
+ const listValues = await getPublicData(DATACONTENT_ID.jscCgAirlineTrafficId, [
|
|
|
+ {
|
|
|
+ flightDate1: flightDate1 ?? form.value.startDate,
|
|
|
+ flightDate2: flightDate2 ?? form.value.endDate,
|
|
|
+ },
|
|
|
+ ])
|
|
|
if (listValues && isValue(listValues)) {
|
|
|
- const newObj: any = _.cloneDeep(airCompaneBaggage.option.baseOption);
|
|
|
- (newObj.dataZoom = [
|
|
|
+ const newObj: any = _.cloneDeep(airCompaneBaggage.option.baseOption)
|
|
|
+ ;(newObj.dataZoom = [
|
|
|
{
|
|
|
- id: "dataZoomX",
|
|
|
- type: "slider",
|
|
|
+ id: 'dataZoomX',
|
|
|
+ type: 'slider',
|
|
|
xAxisIndex: [0],
|
|
|
- filterMode: "filter",
|
|
|
+ filterMode: 'filter',
|
|
|
start: 0,
|
|
|
end: 20,
|
|
|
},
|
|
|
]),
|
|
|
- listValues.forEach((item) => {
|
|
|
- item.jobTime = item["IACACode"];
|
|
|
- });
|
|
|
+ listValues.forEach(item => {
|
|
|
+ item.jobTime = item['IACACode']
|
|
|
+ })
|
|
|
|
|
|
- airlineTrafficObj.value = pubFunc(listValues, newObj, true);
|
|
|
+ airlineTrafficObj.value = pubFunc(listValues, newObj, true)
|
|
|
}
|
|
|
- loading6.value = false;
|
|
|
-};
|
|
|
+ loading6.value = false
|
|
|
+}
|
|
|
|
|
|
//航班表格
|
|
|
const airlineAbnormalFunc = async () => {
|
|
|
- loading5.value = true;
|
|
|
+ loading5.value = true
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
|
|
|
{
|
|
|
- fd1: parseTime(Date.now(), "{y}-{m}-{d}"),
|
|
|
- fd2: parseTime(Date.now(), "{y}-{m}-{d}"),
|
|
|
- fttp: "国内进港",
|
|
|
+ fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
|
|
|
+ fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
|
|
|
+ fttp: '国内进港',
|
|
|
},
|
|
|
- ])) as any;
|
|
|
- const domHeight = scrollContent.value?.clientHeight;
|
|
|
- if (domHeight && typeof domHeight == "number") {
|
|
|
- const cell = Math.ceil(domHeight / 40);
|
|
|
- limitScrollNum.value = cell;
|
|
|
+ ])) 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;
|
|
|
+ listData.value = listValues
|
|
|
}
|
|
|
- loading5.value = false;
|
|
|
-};
|
|
|
+ loading5.value = false
|
|
|
+}
|
|
|
|
|
|
//航班动态统计
|
|
|
const airlineFunc = async () => {
|
|
|
- loading7.value = true;
|
|
|
+ loading7.value = true
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
|
|
|
{
|
|
|
fd1: form.value.startDate,
|
|
|
fd2: form.value.endDate,
|
|
|
- fttp: "国内进港",
|
|
|
+ fttp: '国内进港',
|
|
|
},
|
|
|
- ])) as any;
|
|
|
+ ])) as any
|
|
|
if (listValues && isValue(listValues)) {
|
|
|
- const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption);
|
|
|
- const newDatas = _.cloneDeep(listValues);
|
|
|
- const nameDatas = _.unionBy(newDatas, "specialTypeName");
|
|
|
+ const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption)
|
|
|
+ const newDatas = _.cloneDeep(listValues)
|
|
|
+ const nameDatas = _.unionBy(newDatas, 'specialTypeName')
|
|
|
// const names: any = [...nameDatas];
|
|
|
- const names: any = [...nameDatas, { specialTypeName: "合计" }];
|
|
|
+ const names: any = [...nameDatas, { specialTypeName: '合计' }]
|
|
|
// specialGoods.value = names[0]["specialTypeName"];
|
|
|
- specialGoods.value = "合计";
|
|
|
- specialGoodsDatas.value = names;
|
|
|
- specialGoodsAll.value = listValues;
|
|
|
+ specialGoods.value = '合计'
|
|
|
+ specialGoodsDatas.value = names
|
|
|
+ specialGoodsAll.value = listValues
|
|
|
const result = formatGoods(
|
|
|
// names[0]["specialTypeName"],
|
|
|
- "合计",
|
|
|
+ '合计',
|
|
|
specialGoodsAll.value
|
|
|
- );
|
|
|
- airlineObj.value = pubFunc(result, newObj);
|
|
|
+ )
|
|
|
+ airlineObj.value = pubFunc(result, newObj)
|
|
|
}
|
|
|
- loading7.value = false;
|
|
|
-};
|
|
|
+ loading7.value = false
|
|
|
+}
|
|
|
|
|
|
//理货重量
|
|
|
const tallyWeightFunc = async () => {
|
|
|
- loading8.value = true;
|
|
|
+ loading8.value = true
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscTallyId, [
|
|
|
{
|
|
|
fd1: form.value.startDate,
|
|
|
fd2: form.value.endDate,
|
|
|
fttp: `国内${weightType.value}`,
|
|
|
},
|
|
|
- ])) as any;
|
|
|
+ ])) as any
|
|
|
if (listValues && isValue(listValues)) {
|
|
|
- const newObj: any = _.cloneDeep(airStutas.option.baseOption);
|
|
|
- const [datas, weights] = [<any>[], <any>[]];
|
|
|
- listValues.forEach((item) => {
|
|
|
- datas.push(item.flightDate);
|
|
|
- weights.push(item.weight);
|
|
|
- });
|
|
|
- newObj.xAxis.data = datas;
|
|
|
- newObj.series[0].data = weights;
|
|
|
- tallyObj.value = newObj;
|
|
|
+ const newObj: any = _.cloneDeep(airStutas.option.baseOption)
|
|
|
+ const [datas, weights] = [<any>[], <any>[]]
|
|
|
+ listValues.forEach(item => {
|
|
|
+ datas.push(item.flightDate)
|
|
|
+ weights.push(item.weight)
|
|
|
+ })
|
|
|
+ newObj.xAxis.data = datas
|
|
|
+ newObj.series[0].data = weights
|
|
|
+ tallyObj.value = newObj
|
|
|
}
|
|
|
- loading8.value = false;
|
|
|
-};
|
|
|
+ loading8.value = false
|
|
|
+}
|
|
|
const handleWeightType = (type: string) => {
|
|
|
- weightType.value = type;
|
|
|
- tallyWeightFunc();
|
|
|
-};
|
|
|
+ weightType.value = type
|
|
|
+ tallyWeightFunc()
|
|
|
+}
|
|
|
|
|
|
+const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
|
|
|
onMounted(() => {
|
|
|
- hourlyPeakFunc();
|
|
|
- waybillTrendFunc();
|
|
|
- nodePeakFunc();
|
|
|
- numbersFunc();
|
|
|
- airlineTrafficFunc();
|
|
|
- airlineAbnormalFunc();
|
|
|
- airlineFunc();
|
|
|
- tallyWeightFunc();
|
|
|
-});
|
|
|
+ hourlyPeakFunc()
|
|
|
+ waybillTrendFunc()
|
|
|
+ nodePeakFunc(today, today)
|
|
|
+ numbersFunc()
|
|
|
+ airlineTrafficFunc(today, today)
|
|
|
+ airlineAbnormalFunc()
|
|
|
+ airlineFunc()
|
|
|
+ tallyWeightFunc()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-@import "./css/index.scss";
|
|
|
+@import './css/index.scss';
|
|
|
</style>
|
