|
|
@@ -9,10 +9,7 @@
|
|
|
<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>
|
|
|
@@ -21,12 +18,7 @@
|
|
|
</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"
|
|
|
- >
|
|
|
+ <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>
|
|
|
@@ -35,10 +27,7 @@
|
|
|
<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>
|
|
|
@@ -47,12 +36,7 @@
|
|
|
</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"
|
|
|
- >
|
|
|
+ <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>
|
|
|
@@ -61,10 +45,7 @@
|
|
|
<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>
|
|
|
@@ -73,24 +54,14 @@
|
|
|
</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"
|
|
|
- >
|
|
|
+ <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 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">
|
|
|
今日计划航班数（班）
|
|
|
@@ -116,103 +87,57 @@
|
|
|
</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 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 class="dashboard-content-top-center-bottom-content-head-list">
|
|
|
公司/航班号
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="dashboard-content-top-center-bottom-content-head-list"
|
|
|
- >
|
|
|
+ <div class="dashboard-content-top-center-bottom-content-head-list">
|
|
|
航班状态
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="dashboard-content-top-center-bottom-content-head-list"
|
|
|
- >
|
|
|
+ <div class="dashboard-content-top-center-bottom-content-head-list">
|
|
|
始发站/经停
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="dashboard-content-top-center-bottom-content-head-list"
|
|
|
- >
|
|
|
+ <div class="dashboard-content-top-center-bottom-content-head-list">
|
|
|
计划到达
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="dashboard-content-top-center-bottom-content-head-list"
|
|
|
- >
|
|
|
+ <div class="dashboard-content-top-center-bottom-content-head-list">
|
|
|
实际到达
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="dashboard-content-top-center-bottom-content-head-list"
|
|
|
- >
|
|
|
+ <div class="dashboard-content-top-center-bottom-content-head-list">
|
|
|
机型
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="dashboard-content-top-center-bottom-content-head-list"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <div class="dashboard-content-top-center-bottom-content-bottom-list-txt">
|
|
|
{{ item.KHT }}
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -227,10 +152,7 @@
|
|
|
<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>
|
|
|
@@ -239,12 +161,7 @@
|
|
|
</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"
|
|
|
- >
|
|
|
+ <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>
|
|
|
@@ -253,10 +170,7 @@
|
|
|
<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>
|
|
|
@@ -274,23 +188,13 @@
|
|
|
</span>
|
|
|
<template #dropdown>
|
|
|
<el-dropdown-menu>
|
|
|
- <el-dropdown-item
|
|
|
- v-for="specialTypeName in specialGoodsDatas"
|
|
|
- :key="specialTypeName"
|
|
|
- :command="specialTypeName"
|
|
|
- >{{ specialTypeName }}</el-dropdown-item
|
|
|
- >
|
|
|
+ <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"
|
|
|
- >
|
|
|
+ <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>
|
|
|
@@ -299,10 +203,7 @@
|
|
|
<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>
|
|
|
@@ -327,45 +228,20 @@
|
|
|
</el-dropdown>
|
|
|
</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"
|
|
|
- >
|
|
|
+ <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="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
|
|
|
- v-model="form.startDate"
|
|
|
- type="date"
|
|
|
- placeholder="请选择开始日期"
|
|
|
- size="default"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- />
|
|
|
+ <el-date-picker 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
|
|
|
- v-model="form.endDate"
|
|
|
- :disabled-date="disabledEndDate"
|
|
|
- type="date"
|
|
|
- placeholder="请选择结束日期"
|
|
|
- size="default"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- />
|
|
|
+ <el-date-picker v-model="form.endDate" :disabled-date="disabledEndDate" type="date" placeholder="请选择结束日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</Dialog>
|
|
|
@@ -373,17 +249,17 @@
|
|
|
</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 { 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'
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
+import { parseTime, isValue } from "@/utils/validate";
|
|
|
+import * as _ from "lodash";
|
|
|
+import { useLoop } from "@/hooks/useLoop";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
|
|
|
const {
|
|
|
optionLeft,
|
|
|
@@ -393,223 +269,223 @@ const {
|
|
|
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 tallyObj = ref<any>({})
|
|
|
-const flightNums = ref(0)
|
|
|
-const stockNums = ref(0)
|
|
|
-const weightNums = ref<number | string>(0)
|
|
|
-const specialGoods = ref('全部')
|
|
|
-const specialGoodsDatas = ref(['动', '贵', '邮', '鲜', '锂', '全部'])
|
|
|
-const weightType = ref('进港')
|
|
|
-const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
|
|
|
+} = 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 tallyObj = ref<any>({});
|
|
|
+const flightNums = ref(0);
|
|
|
+const stockNums = ref(0);
|
|
|
+const weightNums = ref<number | string>(0);
|
|
|
+const specialGoods = ref("全部");
|
|
|
+const specialGoodsDatas = ref(["动", "贵", "邮", "鲜", "锂", "全部"]);
|
|
|
+const weightType = ref("进港");
|
|
|
+const today = parseTime(Date.now(), "{y}-{m}-{d}") as string;
|
|
|
const sevenDaysAgo = parseTime(
|
|
|
Date.now() - 24 * 60 * 60 * 1000 * 7,
|
|
|
- '{y}-{m}-{d}'
|
|
|
-) as string
|
|
|
+ "{y}-{m}-{d}"
|
|
|
+) as string;
|
|
|
const form = reactive({
|
|
|
startDate: sevenDaysAgo,
|
|
|
endDate: today,
|
|
|
-})
|
|
|
-const listData = ref<any>([])
|
|
|
+});
|
|
|
+const listData = ref<any>([]);
|
|
|
|
|
|
watchEffect(() => {
|
|
|
- const start = new Date(form.startDate).getTime()
|
|
|
- const end = new Date(form.endDate).getTime()
|
|
|
+ const start = new Date(form.startDate).getTime();
|
|
|
+ const end = new Date(form.endDate).getTime();
|
|
|
if (start > end) {
|
|
|
- ElMessage.warning('开始时间不能晚于结束时间')
|
|
|
- form.endDate = ''
|
|
|
- return
|
|
|
+ ElMessage.warning("开始时间不能晚于结束时间");
|
|
|
+ form.endDate = "";
|
|
|
+ return;
|
|
|
}
|
|
|
-})
|
|
|
+});
|
|
|
const disabledEndDate = (time: Date) => {
|
|
|
- const start = new Date(form.startDate).setHours(0)
|
|
|
- const end = time.setHours(0)
|
|
|
- return start > end
|
|
|
-}
|
|
|
+ const start = new Date(form.startDate).setHours(0);
|
|
|
+ const end = time.setHours(0);
|
|
|
+ return start > end;
|
|
|
+};
|
|
|
|
|
|
const resetForm = () => {
|
|
|
- flag.value = false
|
|
|
-}
|
|
|
+ flag.value = false;
|
|
|
+};
|
|
|
|
|
|
const submitForm = () => {
|
|
|
- flag.value = false
|
|
|
- let dates: any = {}
|
|
|
+ flag.value = false;
|
|
|
+ let dates: any = {};
|
|
|
switch (timePickerName.value) {
|
|
|
case showTimeMsg.HourlyPeak:
|
|
|
- dates = hourlyDates
|
|
|
- loading1.value = true
|
|
|
- break
|
|
|
+ dates = hourlyDates;
|
|
|
+ loading1.value = true;
|
|
|
+ break;
|
|
|
case showTimeMsg.WaybillTrend:
|
|
|
- dates = waybillDates
|
|
|
- loading2.value = true
|
|
|
- break
|
|
|
+ dates = waybillDates;
|
|
|
+ loading2.value = true;
|
|
|
+ break;
|
|
|
case showTimeMsg.NodePeak:
|
|
|
- dates = nodeDates
|
|
|
- loading3.value = true
|
|
|
- break
|
|
|
+ dates = nodeDates;
|
|
|
+ loading3.value = true;
|
|
|
+ break;
|
|
|
case showTimeMsg.AirlineTraffic:
|
|
|
- dates = airlineTrafficDates
|
|
|
- loading6.value = true
|
|
|
- break
|
|
|
+ dates = airlineTrafficDates;
|
|
|
+ loading6.value = true;
|
|
|
+ break;
|
|
|
case showTimeMsg.SpecialClassification:
|
|
|
- dates = airlineDates
|
|
|
- loading7.value = true
|
|
|
- break
|
|
|
+ dates = airlineDates;
|
|
|
+ loading7.value = true;
|
|
|
+ break;
|
|
|
case showTimeMsg.TallyWeight:
|
|
|
- dates = tallyDates
|
|
|
- loading8.value = true
|
|
|
- break
|
|
|
+ dates = tallyDates;
|
|
|
+ loading8.value = true;
|
|
|
+ break;
|
|
|
default:
|
|
|
- break
|
|
|
+ break;
|
|
|
}
|
|
|
- dates.startDate = form.startDate
|
|
|
- dates.endDate = form.endDate
|
|
|
-}
|
|
|
+ dates.startDate = form.startDate;
|
|
|
+ dates.endDate = form.endDate;
|
|
|
+};
|
|
|
|
|
|
const showDatePicker = (id?) => {
|
|
|
- flag.value = true
|
|
|
- timePickerName.value = id
|
|
|
- let dates: any = {}
|
|
|
+ flag.value = true;
|
|
|
+ timePickerName.value = id;
|
|
|
+ let dates: any = {};
|
|
|
switch (id) {
|
|
|
case showTimeMsg.HourlyPeak:
|
|
|
- dates = hourlyDates
|
|
|
- break
|
|
|
+ dates = hourlyDates;
|
|
|
+ break;
|
|
|
case showTimeMsg.WaybillTrend:
|
|
|
- dates = waybillDates
|
|
|
- break
|
|
|
+ dates = waybillDates;
|
|
|
+ break;
|
|
|
case showTimeMsg.NodePeak:
|
|
|
- dates = nodeDates
|
|
|
- break
|
|
|
+ dates = nodeDates;
|
|
|
+ break;
|
|
|
case showTimeMsg.AirlineTraffic:
|
|
|
- dates = airlineTrafficDates
|
|
|
- break
|
|
|
+ dates = airlineTrafficDates;
|
|
|
+ break;
|
|
|
case showTimeMsg.SpecialClassification:
|
|
|
- dates = airlineDates
|
|
|
- break
|
|
|
+ dates = airlineDates;
|
|
|
+ break;
|
|
|
case showTimeMsg.TallyWeight:
|
|
|
- dates = tallyDates
|
|
|
- break
|
|
|
+ dates = tallyDates;
|
|
|
+ break;
|
|
|
default:
|
|
|
- break
|
|
|
+ break;
|
|
|
}
|
|
|
- form.startDate = dates.startDate || null
|
|
|
- form.endDate = dates.endDate || null
|
|
|
-}
|
|
|
+ form.startDate = dates.startDate || null;
|
|
|
+ form.endDate = dates.endDate || null;
|
|
|
+};
|
|
|
|
|
|
-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 handleCommand = (command: string) => {
|
|
|
- specialGoods.value = command
|
|
|
-}
|
|
|
+ specialGoods.value = command;
|
|
|
+};
|
|
|
|
|
|
//获取小时峰值分布
|
|
|
-const hourlyDates = reactive({ startDate: today, endDate: today })
|
|
|
+const hourlyDates = reactive({ startDate: today, endDate: today });
|
|
|
const hourlyPeakFunc = async () => {
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscCgHourlyPeakId, [
|
|
|
{ flightDate1: hourlyDates.startDate, flightDate2: hourlyDates.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 waybillDates = reactive({ startDate: sevenDaysAgo, endDate: today })
|
|
|
+const waybillDates = reactive({ startDate: sevenDaysAgo, endDate: today });
|
|
|
const waybillTrendFunc = async () => {
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscCgWaybillTrendId, [
|
|
|
{ flightDate1: waybillDates.startDate, flightDate2: waybillDates.endDate },
|
|
|
- ])) as any
|
|
|
+ ])) as any;
|
|
|
if (listValues && isValue(listValues)) {
|
|
|
const dealedList = listValues.reduce((preList, currentValue) => {
|
|
|
- if (typeof currentValue.jobTime === 'string') {
|
|
|
+ if (typeof currentValue.jobTime === "string") {
|
|
|
return [
|
|
|
...preList,
|
|
|
{
|
|
|
...currentValue,
|
|
|
jobTime: parseDate(currentValue.jobTime),
|
|
|
},
|
|
|
- ]
|
|
|
+ ];
|
|
|
}
|
|
|
- return preList
|
|
|
- }, [])
|
|
|
- waybillTrendObj.value = pubFunc(dealedList, optionLeft, true)
|
|
|
+ return preList;
|
|
|
+ }, []);
|
|
|
+ waybillTrendObj.value = pubFunc(dealedList, optionLeft, true);
|
|
|
}
|
|
|
- loading2.value = false
|
|
|
-}
|
|
|
+ loading2.value = false;
|
|
|
+};
|
|
|
|
|
|
//始发站/目的站统计分析
|
|
|
-const nodeDates = reactive({ startDate: today, endDate: today })
|
|
|
+const nodeDates = reactive({ startDate: today, endDate: today });
|
|
|
const nodePeakFunc = async () => {
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
|
|
|
{
|
|
|
fd1: nodeDates.startDate,
|
|
|
fd2: nodeDates.endDate,
|
|
|
- fttp: '国内进港',
|
|
|
+ fttp: "国内进港",
|
|
|
},
|
|
|
- ])) as any
|
|
|
+ ])) 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 () => {
|
|
|
@@ -618,47 +494,47 @@ const numbersFunc = async () => {
|
|
|
fd1: today,
|
|
|
fd2: today,
|
|
|
},
|
|
|
- ])) 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 airlineTrafficDates = reactive({
|
|
|
startDate: sevenDaysAgo,
|
|
|
endDate: today,
|
|
|
-})
|
|
|
+});
|
|
|
const airlineTrafficFunc = async () => {
|
|
|
const listValues = await getPublicData(DATACONTENT_ID.jscCgAirlineTrafficId, [
|
|
|
{
|
|
|
flightDate1: airlineTrafficDates.startDate,
|
|
|
flightDate2: airlineTrafficDates.endDate,
|
|
|
},
|
|
|
- ])
|
|
|
+ ]);
|
|
|
if (listValues && isValue(listValues)) {
|
|
|
- const newObj: any = _.cloneDeep(airCompaneBaggage.option.baseOption)
|
|
|
+ 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']
|
|
|
- })
|
|
|
- airlineTrafficObj.value = pubFunc(listValues, newObj, true)
|
|
|
+ ];
|
|
|
+ listValues.forEach((item) => {
|
|
|
+ item.jobTime = item["IACACode"];
|
|
|
+ });
|
|
|
+ airlineTrafficObj.value = pubFunc(listValues, newObj, true);
|
|
|
}
|
|
|
- loading6.value = false
|
|
|
-}
|
|
|
+ loading6.value = false;
|
|
|
+};
|
|
|
|
|
|
//航班表格
|
|
|
const airlineAbnormalFunc = async () => {
|
|
|
@@ -666,77 +542,76 @@ const airlineAbnormalFunc = async () => {
|
|
|
{
|
|
|
fd1: today,
|
|
|
fd2: today,
|
|
|
- fttp: '国内进港',
|
|
|
+ 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 airlineDates = reactive({ startDate: sevenDaysAgo, endDate: today })
|
|
|
+const airlineDates = reactive({ startDate: sevenDaysAgo, endDate: today });
|
|
|
const airlineFunc = async () => {
|
|
|
const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
|
|
|
{
|
|
|
fd1: airlineDates.startDate,
|
|
|
fd2: airlineDates.endDate,
|
|
|
- fttp: '国内进港',
|
|
|
+ fttp: "国内进港",
|
|
|
spe: specialGoods.value,
|
|
|
},
|
|
|
- ])) as any
|
|
|
+ ])) 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)
|
|
|
+ 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
|
|
|
-}
|
|
|
+ loading7.value = false;
|
|
|
+};
|
|
|
|
|
|
//理货重量
|
|
|
-const tallyDates = reactive({ startDate: sevenDaysAgo, endDate: today })
|
|
|
+const tallyDates = reactive({ startDate: sevenDaysAgo, endDate: today });
|
|
|
const tallyWeightFunc = async () => {
|
|
|
- const listValues = (await getPublicData(DATACONTENT_ID.jscTallyId, [
|
|
|
+ const listValues = (await getPublicData(DATACONTENT_ID.jscNewTallyId, [
|
|
|
{
|
|
|
fd1: tallyDates.startDate,
|
|
|
fd2: tallyDates.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
|
|
|
-}
|
|
|
+ weightType.value = type;
|
|
|
+};
|
|
|
|
|
|
-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([tallyWeightFunc], 'dashboard', [tallyDates, weightType])
|
|
|
+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([tallyWeightFunc], "dashboard", [tallyDates, weightType]);
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-@import './css/index.scss';
|
|
|
+@import "./css/index.scss";
|
|
|
</style>
|
