决策驾驶舱-定时刷新

public/baseConfig.js

@@ -1,9 +1,30 @@
 /* url配置 */
 const PLATFROM_CONFIG = {
-  baseNewUrl: 'http://120.26.64.82:8083/', //登录前的http请求地址
-  baseUrl: 'http://120.26.64.82:8095/', // 4A-http请求地址
+  baseNewUrl: "", //登录前的http请求地址
+  baseUrl: 'http://10.81.40.201:8095/', // 4A-http请求地址
   appKeyString: '9inu7zpllz1folzsljm498dcpi0lsog1', //appSecret
   appId: 'q7kdjmmaf0kerwpf', //appid
-  baseURLCA: 'http://10.211.67.163:16300', // 登录后的http请求地址-测试
+  baseURLCA: 'http://10.81.40.201:16300', // 登录后的http请求地址-测试
   baggageMessageURL: '/openApi/query',
 }
+const baseNewUrl = window.location.hostname
+switch (baseNewUrl ){
+  case "10.81.160.49":
+  PLATFROM_CONFIG.baseNewUrl = "http://10.81.160.49:8095/"
+  break;
+  case "172.29.13.5":
+  PLATFROM_CONFIG.baseNewUrl = "http://172.29.13.5:8095/"
+  break;
+  case "10.83.36.15":
+  PLATFROM_CONFIG.baseNewUrl = "http://10.83.36.15:8095/"
+  break;
+  case "10.81.40.201":
+  PLATFROM_CONFIG.baseNewUrl = "http://10.81.40.201:8095/"
+  break;
+  case "120.26.64.82":
+  case "localhost":
+  PLATFROM_CONFIG.baseNewUrl = "http://120.26.64.82:8083/"
+  break;
+  default:
+  PLATFROM_CONFIG.baseNewUrl = "http://172.23.61.1:8095/"
+}

public/config.js

@@ -4,6 +4,7 @@ var LOOP_INTERVAL = {
   flight: 15 * 1000,
   waybill: 15 * 1000,
   goods: 15 * 1000,
+  dashboard: 15 * 1000,
 }
 
 // const PLATFROM_CONFIG = {

src/views/dashboard/components/comHead.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 const router = useRouter();
 const props = defineProps({
   tabsIndex: {

src/views/dashboard/components/lineChart.vue

@@ -21,11 +21,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
-import Dialog from "@/components/dialog/index.vue";
-import axios from "axios";
 
 const props = defineProps({
   title: {

src/views/dashboard/index copy.vue

@@ -0,0 +1,729 @@
+<template>
+  <div class="dashboard">
+    <ComHead :tabs-index="1" />
+    <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-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>
+          <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-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>
+          <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-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 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-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>
+              <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-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>
+          <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 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="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"
+            >
+              <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.TallyWeight)"
+              >
+                <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 trigger="click" @command="handleWeightType">
+                  <span class="icons">
+                    <span class="icons-txt">{{ weightType }}</span>
+                    <el-icon color="#ffffff">
+                      <CaretBottom />
+                    </el-icon>
+                  </span>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="进港">进港</el-dropdown-item>
+                      <el-dropdown-item command="出港">出港</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </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"
+            >
+              <Echarts id="ww45" :option="tallyObj" />
+            </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 { 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,
+  airlineAbnormalBaggage,
+  airStutas,
+  getPublicData,
+  formatGoods,
+  formatWeight,
+} = 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}'),
+})
+const dateNow = ref({
+  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 disabledEndDate = (time: Date) => {
+  const timer: any = form.value.startDate
+  let data = new Date(timer)
+  return data.getTime() > time.getTime()
+}
+const resetForm = () => {
+  flag.value = false
+}
+
+const submitForm = () => {
+  flag.value = false
+  switch (timePickerName.value) {
+    case showTimeMsg.HourlyPeak:
+      dateNow.value.time = form.value.startDate
+      hourlyPeakFunc()
+      break
+    case showTimeMsg.WaybillTrend:
+      waybillTrendFunc()
+      break
+    case showTimeMsg.NodePeak:
+      nodePeakFunc()
+      break
+    case showTimeMsg.AirlineTraffic:
+      airlineTrafficFunc()
+      break
+    case showTimeMsg.AirlineAbnormal:
+      airlineFunc()
+      break
+    case showTimeMsg.TallyWeight:
+      tallyWeightFunc()
+      break
+    case showTimeMsg.SpecialClassification:
+      airlineFunc()
+      break
+    default:
+      break
+  }
+}
+
+const showDatePicker = (id?) => {
+  flag.value = true
+  timePickerName.value = id
+}
+
+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(Number(item.stockNum))
+    weights.push(Number(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 parseDate = (date: string) => {
+  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)
+}
+
+//获取小时峰值分布
+const hourlyPeakFunc = async () => {
+  loading1.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgHourlyPeakId, [
+    { flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
+  }
+  loading1.value = false
+}
+
+//运单趋势分析
+const waybillTrendFunc = async () => {
+  loading2.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgWaybillTrendId, [
+    { flightDate1: form.value.startDate, flightDate2: form.value.endDate },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    listValues.forEach(item => {
+      item.jobTime = parseDate(item['jobTime'])
+    })
+    waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
+  }
+  loading2.value = false
+}
+
+//始发站/目的站统计分析
+const nodePeakFunc = async (fd1?: string, fd2?: string) => {
+  loading3.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
+    {
+      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)
+  }
+  loading3.value = false
+}
+
+//航班数&运单数
+const numbersFunc = async () => {
+  loading4.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgNumbersId, [
+    {
+      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+    },
+  ])) 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 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 = [
+      {
+        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 () => {
+  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: '国内进港',
+    },
+  ])) 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 airlineFunc = async () => {
+  loading7.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: '国内进港',
+    },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    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: '合计' }]
+    // specialGoods.value = names[0]["specialTypeName"];
+    specialGoods.value = '合计'
+    specialGoodsDatas.value = names
+    specialGoodsAll.value = listValues
+    const result = formatGoods(
+      // names[0]["specialTypeName"],
+      '合计',
+      specialGoodsAll.value
+    )
+    airlineObj.value = pubFunc(result, newObj)
+  }
+  loading7.value = false
+}
+
+//理货重量
+const tallyWeightFunc = async () => {
+  loading8.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscTallyId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: `国内${weightType.value}`,
+    },
+  ])) 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
+  }
+  loading8.value = false
+}
+const handleWeightType = (type: string) => {
+  weightType.value = type
+  tallyWeightFunc()
+}
+
+const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
+onMounted(() => {
+  hourlyPeakFunc()
+  waybillTrendFunc()
+  nodePeakFunc(today, today)
+  numbersFunc()
+  airlineTrafficFunc(today, today)
+  airlineAbnormalFunc()
+  airlineFunc()
+  tallyWeightFunc()
+})
+</script>
+
+<style lang="scss" scoped>
+@import './css/index.scss';
+</style>

src/views/dashboard/index.vue

@@ -24,7 +24,6 @@
             <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"
             >
@@ -51,7 +50,6 @@
             <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"
             >
@@ -78,7 +76,6 @@
             <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"
             >
@@ -91,7 +88,6 @@
           <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"
           >
@@ -123,7 +119,6 @@
           <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"
           >
@@ -247,7 +242,6 @@
             <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"
             >
@@ -294,7 +288,6 @@
             <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"
             >
@@ -337,7 +330,6 @@
             <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"
             >
@@ -382,7 +374,6 @@
 </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'
@@ -392,6 +383,8 @@ import { usePublic, showTimeMsg } 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,
@@ -405,14 +398,14 @@ 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 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>({})
@@ -426,21 +419,23 @@ 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}'),
-})
-const dateNow = ref({
-  time: parseTime(Date.now(), '{y}-{m}-{d}'),
+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.value.endDate
+  const timer: any = form.endDate
   const data = new Date(timer)
   return time.getTime() > data.getTime()
 }
 const disabledEndDate = (time: Date) => {
-  const timer: any = form.value.startDate
+  const timer: any = form.startDate
   let data = new Date(timer)
   return data.getTime() > time.getTime()
 }
@@ -450,37 +445,67 @@ const resetForm = () => {
 
 const submitForm = () => {
   flag.value = false
+  let dates: any = {}
   switch (timePickerName.value) {
     case showTimeMsg.HourlyPeak:
-      dateNow.value.time = form.value.startDate
-      hourlyPeakFunc()
+      dates = hourlyDates
+      loading1.value = true
       break
     case showTimeMsg.WaybillTrend:
-      waybillTrendFunc()
+      dates = waybillDates
+      loading2.value = true
       break
     case showTimeMsg.NodePeak:
-      nodePeakFunc()
+      dates = nodeDates
+      loading3.value = true
       break
     case showTimeMsg.AirlineTraffic:
-      airlineTrafficFunc()
+      dates = airlineTrafficDates
+      loading6.value = true
       break
-    case showTimeMsg.AirlineAbnormal:
-      airlineFunc()
+    case showTimeMsg.SpecialClassification:
+      dates = airlineDates
+      loading7.value = true
       break
     case showTimeMsg.TallyWeight:
-      tallyWeightFunc()
-      break
-    case showTimeMsg.SpecialClassification:
-      airlineFunc()
+      dates = tallyDates
+      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.TallyWeight:
+      dates = tallyDates
+      break
+    default:
+      break
+  }
+  form.startDate = dates.startDate || null
+  form.endDate = dates.endDate || null
 }
 
 const sortClass = sortData => {
@@ -535,39 +560,39 @@ const handleCommand = (command: string) => {
 }
 
 //获取小时峰值分布
+const hourlyDates = reactive({ startDate: today, endDate: today })
 const hourlyPeakFunc = async () => {
-  loading1.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscCgHourlyPeakId, [
-    { flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
+    { flightDate1: hourlyDates.startDate, flightDate2: hourlyDates.endDate },
   ])) as any
   if (listValues && isValue(listValues)) {
     hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
+    loading1.value = false
   }
-  loading1.value = false
 }
 
 //运单趋势分析
+const waybillDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const waybillTrendFunc = async () => {
-  loading2.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscCgWaybillTrendId, [
-    { flightDate1: form.value.startDate, flightDate2: form.value.endDate },
+    { flightDate1: waybillDates.startDate, flightDate2: waybillDates.endDate },
   ])) as any
   if (listValues && isValue(listValues)) {
     listValues.forEach(item => {
       item.jobTime = parseDate(item['jobTime'])
     })
     waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
+    loading2.value = false
   }
-  loading2.value = false
 }
 
 //始发站/目的站统计分析
-const nodePeakFunc = async (fd1?: string, fd2?: string) => {
-  loading3.value = true
+const nodeDates = reactive({ startDate: today, endDate: today })
+const nodePeakFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
     {
-      fd1: fd1 ?? form.value.startDate,
-      fd2: fd2 ?? form.value.endDate,
+      fd1: nodeDates.startDate,
+      fd2: nodeDates.endDate,
       fttp: '国内进港',
     },
   ])) as any
@@ -577,17 +602,16 @@ const nodePeakFunc = async (fd1?: string, fd2?: string) => {
       item.jobTime = item['airport']
     })
     nodePeakObj.value = pubFunc(listValues, newObj, true)
+    loading3.value = false
   }
-  loading3.value = false
 }
 
 //航班数&运单数
 const numbersFunc = async () => {
-  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: today,
+      fd2: today,
     },
   ])) as any
   if (listValues && isValue(listValues)) {
@@ -595,20 +619,20 @@ const numbersFunc = async () => {
     flightNums.value = flightNum ?? 0
     stockNums.value = finishFlightNum ?? 0
     weightNums.value = weight ?? 0
+    loading4.value = false
   }
-  loading4.value = false
 }
 
 //航司运量
-const airlineTrafficFunc = async (
-  flightDate1?: string,
-  flightDate2?: string
-) => {
-  loading6.value = true
+const airlineTrafficDates = reactive({
+  startDate: sevenDaysAgo,
+  endDate: today,
+})
+const airlineTrafficFunc = async () => {
   const listValues = await getPublicData(DATACONTENT_ID.jscCgAirlineTrafficId, [
     {
-      flightDate1: flightDate1 ?? form.value.startDate,
-      flightDate2: flightDate2 ?? form.value.endDate,
+      flightDate1: airlineTrafficDates.startDate,
+      flightDate2: airlineTrafficDates.endDate,
     },
   ])
   if (listValues && isValue(listValues)) {
@@ -628,17 +652,16 @@ const airlineTrafficFunc = async (
       })
 
     airlineTrafficObj.value = pubFunc(listValues, newObj, true)
+    loading6.value = false
   }
-  loading6.value = false
 }
 
 //航班表格
 const airlineAbnormalFunc = async () => {
-  loading5.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
     {
-      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
-      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd1: today,
+      fd2: today,
       fttp: '国内进港',
     },
   ])) as any
@@ -649,17 +672,17 @@ const airlineAbnormalFunc = async () => {
   }
   if (listValues && isValue(listValues)) {
     listData.value = listValues
+    loading5.value = false
   }
-  loading5.value = false
 }
 
 //航班动态统计
+const airlineDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const airlineFunc = async () => {
-  loading7.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
     {
-      fd1: form.value.startDate,
-      fd2: form.value.endDate,
+      fd1: airlineDates.startDate,
+      fd2: airlineDates.endDate,
       fttp: '国内进港',
     },
   ])) as any
@@ -679,17 +702,17 @@ const airlineFunc = async () => {
       specialGoodsAll.value
     )
     airlineObj.value = pubFunc(result, newObj)
+    loading7.value = false
   }
-  loading7.value = false
 }
 
 //理货重量
+const tallyDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const tallyWeightFunc = async () => {
-  loading8.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscTallyId, [
     {
-      fd1: form.value.startDate,
-      fd2: form.value.endDate,
+      fd1: tallyDates.startDate,
+      fd2: tallyDates.endDate,
       fttp: `国内${weightType.value}`,
     },
   ])) as any
@@ -703,25 +726,21 @@ const tallyWeightFunc = async () => {
     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()
 }
 
-const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
-onMounted(() => {
-  hourlyPeakFunc()
-  waybillTrendFunc()
-  nodePeakFunc(today, today)
-  numbersFunc()
-  airlineTrafficFunc(today, today)
-  airlineAbnormalFunc()
-  airlineFunc()
-  tallyWeightFunc()
-})
+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])
+useLoop([tallyWeightFunc], 'dashboard', [tallyDates, weightType])
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/indexHomeOut copy.vue

@@ -0,0 +1,743 @@
+<template>
+  <div class="dashboard">
+    <ComHead :tabs-index="0" />
+    <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-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>
+          <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-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>
+          <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-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 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-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>
+              <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-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>
+          <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="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"
+            >
+              <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-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="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 { 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,
+  airlineAbnormalBaggage,
+  getPublicData,
+  formatGoods,
+  formatWeight,
+} = 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 pickingObj = ref<any>({})
+const flightNums = ref(0)
+const stockNums = ref(0)
+const specialGoods = ref<string>('分类')
+const specialGoodsDatas = ref<any>([])
+const specialGoodsAll = ref<any>([])
+const weightNums = ref<number | string>(0)
+const form = ref({
+  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>([])
+const disabledStartDate = (time: Date) => {
+  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 resetForm = () => {
+  flag.value = false
+}
+
+const submitForm = () => {
+  flag.value = false
+  switch (timePickerName.value) {
+    case showTimeMsg.HourlyPeak:
+      dateNow.value.time = form.value.startDate
+      hourlyPeakFunc()
+      break
+    case showTimeMsg.WaybillTrend:
+      waybillTrendFunc()
+      break
+    case showTimeMsg.NodePeak:
+      nodePeakFunc()
+      break
+    case showTimeMsg.AirlineTraffic:
+      airlineTrafficFunc()
+      break
+    case showTimeMsg.AirlineAbnormal:
+      airlineFunc()
+      break
+    case showTimeMsg.PickingStatistics:
+      pickingFuncs()
+      break
+    case showTimeMsg.SpecialClassification:
+      airlineFunc()
+      break
+    default:
+      break
+  }
+}
+
+const showDatePicker = (id?) => {
+  flag.value = true
+  timePickerName.value = id
+}
+
+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 parseDate = (date: string) => {
+  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)
+}
+
+//获取小时峰值分布
+const hourlyPeakFunc = async () => {
+  loading1.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscHourlyPeakId, [
+    { flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
+  }
+  loading1.value = false
+}
+
+//运单趋势分析
+const waybillTrendFunc = async () => {
+  loading2.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscWaybillTrendId, [
+    { flightDate1: form.value.startDate, flightDate2: form.value.endDate },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    listValues.forEach(item => {
+      item.jobTime = parseDate(item['jobTime'])
+    })
+    waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
+  }
+  loading2.value = false
+}
+
+//始发站/目的站统计分析
+const nodePeakFunc = async (fd1?: string, fd2?: string) => {
+  loading3.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
+    {
+      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)
+  }
+  loading3.value = false
+}
+
+//航班数&运单数
+const numbersFunc = async () => {
+  loading4.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscNumbersId, [
+    {
+      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+    },
+  ])) 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 airlineTrafficFunc = async (
+  flightDate1?: string,
+  flightDate2?: string
+) => {
+  loading6.value = true
+  const listValues = await getPublicData(DATACONTENT_ID.jscAirlineTrafficId, [
+    {
+      flightDate1: flightDate1 ?? form.value.startDate,
+      flightDate2: flightDate2 ?? form.value.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 () => {
+  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: '国内离港',
+    },
+  ])) 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 airlineFunc = async () => {
+//   loading7.value = true;
+//   const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineId, [
+//     {
+//       fd1: form.value.startDate,
+//       fd2: form.value.endDate,
+//     },
+//   ])) as any;
+//   if (listValues && isValue(listValues)) {
+//     const res = findData(
+//       nodeCode.departure,
+//       listValues,
+//       "nodeCode",
+//       "flightNum"
+//     );
+//     const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption);
+//     (newObj.dataZoom = [
+//       {
+//         id: "dataZoomX",
+//         type: "slider",
+//         xAxisIndex: [0],
+//         filterMode: "filter",
+//         start: 0,
+//         end: 40,
+//       },
+//     ]),
+//       res.forEach((item) => {
+//         item.jobTime = item["name"] ?? item["nodeCode"];
+//         item.weight = item["flightNum"];
+//       });
+//     airlineObj.value = pubFunc(res, newObj);
+//   }
+//   loading7.value = false;
+// };
+
+//特货分类统计
+const airlineFunc = async () => {
+  loading7.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: '国内离港',
+    },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    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: '合计' }]
+    // specialGoods.value = names[0]["specialTypeName"];
+    specialGoods.value = '合计'
+    specialGoodsDatas.value = names
+    specialGoodsAll.value = listValues
+    const result = formatGoods(
+      // names[0]["specialTypeName"],
+      '合计',
+      specialGoodsAll.value
+    )
+    airlineObj.value = pubFunc(result, newObj)
+  }
+  loading7.value = false
+}
+
+//拉货统计
+const pickingFuncs = async () => {
+  loading8.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGgPullId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+    },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption)
+    listValues.forEach(item => {
+      item.jobTime = parseDate(item['flightDate'])
+      item.weight = item['flightNum']
+    })
+    pickingObj.value = pubFunc(listValues, newObj)
+  }
+  loading8.value = false
+}
+
+const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
+onMounted(() => {
+  hourlyPeakFunc()
+  waybillTrendFunc()
+  nodePeakFunc(today, today)
+  numbersFunc()
+  airlineTrafficFunc(today, today)
+  airlineAbnormalFunc()
+  airlineFunc()
+  pickingFuncs()
+})
+</script>
+
+<style lang="scss" scoped>
+@import './css/index.scss';
+</style>

src/views/dashboard/indexHomeOut.vue

@@ -24,7 +24,6 @@
             <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"
             >
@@ -51,7 +50,6 @@
             <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"
             >
@@ -78,7 +76,6 @@
             <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"
             >
@@ -91,7 +88,6 @@
           <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"
           >
@@ -123,7 +119,6 @@
           <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"
           >
@@ -247,7 +242,6 @@
             <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"
             >
@@ -298,7 +292,6 @@
             <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"
             >
@@ -325,7 +318,6 @@
             <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"
             >
@@ -370,16 +362,17 @@
 </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 nodeCode from './hooks/nodeCode'
 import { parseTime, isValue } from '@/utils/validate'
 import * as _ from 'lodash'
+import { useLoop } from '@/hooks/useLoop'
+
 const {
   optionLeft,
   airCompaneBaggage,
@@ -392,14 +385,14 @@ 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 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>({})
@@ -412,21 +405,23 @@ const specialGoods = ref<string>('分类')
 const specialGoodsDatas = ref<any>([])
 const specialGoodsAll = ref<any>([])
 const weightNums = ref<number | string>(0)
-const form = ref({
-  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 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.value.endDate
+  const timer: any = form.endDate
   const data = new Date(timer)
   return time.getTime() > data.getTime()
 }
 const disabledEndDate = (time: Date) => {
-  const timer: any = form.value.startDate
+  const timer: any = form.startDate
   let data = new Date(timer)
   return data.getTime() > time.getTime()
 }
@@ -436,37 +431,67 @@ const resetForm = () => {
 
 const submitForm = () => {
   flag.value = false
+  let dates: any = {}
   switch (timePickerName.value) {
     case showTimeMsg.HourlyPeak:
-      dateNow.value.time = form.value.startDate
-      hourlyPeakFunc()
+      dates = hourlyDates
+      loading1.value = true
       break
     case showTimeMsg.WaybillTrend:
-      waybillTrendFunc()
+      dates = waybillDates
+      loading2.value = true
       break
     case showTimeMsg.NodePeak:
-      nodePeakFunc()
+      dates = nodeDates
+      loading3.value = true
       break
     case showTimeMsg.AirlineTraffic:
-      airlineTrafficFunc()
+      dates = airlineTrafficDates
+      loading6.value = true
       break
-    case showTimeMsg.AirlineAbnormal:
-      airlineFunc()
+    case showTimeMsg.SpecialClassification:
+      dates = airlineDates
+      loading7.value = true
       break
     case showTimeMsg.PickingStatistics:
-      pickingFuncs()
-      break
-    case showTimeMsg.SpecialClassification:
-      airlineFunc()
+      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 => {
@@ -521,39 +546,39 @@ const handleCommand = (command: string) => {
 }
 
 //获取小时峰值分布
+const hourlyDates = reactive({ startDate: today, endDate: today })
 const hourlyPeakFunc = async () => {
-  loading1.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscHourlyPeakId, [
-    { flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
+    { flightDate1: hourlyDates.startDate, flightDate2: hourlyDates.endDate },
   ])) as any
   if (listValues && isValue(listValues)) {
     hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
+    loading1.value = false
   }
-  loading1.value = false
 }
 
 //运单趋势分析
+const waybillDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const waybillTrendFunc = async () => {
-  loading2.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscWaybillTrendId, [
-    { flightDate1: form.value.startDate, flightDate2: form.value.endDate },
+    { flightDate1: waybillDates.startDate, flightDate2: waybillDates.endDate },
   ])) as any
   if (listValues && isValue(listValues)) {
     listValues.forEach(item => {
       item.jobTime = parseDate(item['jobTime'])
     })
     waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
+    loading2.value = false
   }
-  loading2.value = false
 }
 
 //始发站/目的站统计分析
-const nodePeakFunc = async (fd1?: string, fd2?: string) => {
-  loading3.value = true
+const nodeDates = reactive({ startDate: today, endDate: today })
+const nodePeakFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
     {
-      fd1: fd1 ?? form.value.startDate,
-      fd2: fd2 ?? form.value.endDate,
+      fd1: nodeDates.startDate,
+      fd2: nodeDates.endDate,
       fttp: '国内离港',
     },
   ])) as any
@@ -563,17 +588,16 @@ const nodePeakFunc = async (fd1?: string, fd2?: string) => {
       item.jobTime = item['airport']
     })
     nodePeakObj.value = pubFunc(listValues, newObj, true)
+    loading3.value = false
   }
-  loading3.value = false
 }
 
 //航班数&运单数
 const numbersFunc = async () => {
-  loading4.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscNumbersId, [
     {
-      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
-      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd1: today,
+      fd2: today,
     },
   ])) as any
   if (listValues && isValue(listValues)) {
@@ -581,20 +605,20 @@ const numbersFunc = async () => {
     flightNums.value = flightNum ?? 0
     stockNums.value = finishFlightNum ?? 0
     weightNums.value = weight ?? 0
+    loading4.value = false
   }
-  loading4.value = false
 }
 
 //航司运量
-const airlineTrafficFunc = async (
-  flightDate1?: string,
-  flightDate2?: string
-) => {
-  loading6.value = true
+const airlineTrafficDates = reactive({
+  startDate: sevenDaysAgo,
+  endDate: today,
+})
+const airlineTrafficFunc = async () => {
   const listValues = await getPublicData(DATACONTENT_ID.jscAirlineTrafficId, [
     {
-      flightDate1: flightDate1 ?? form.value.startDate,
-      flightDate2: flightDate2 ?? form.value.endDate,
+      flightDate1: airlineTrafficDates.startDate,
+      flightDate2: airlineTrafficDates.endDate,
     },
   ])
   if (listValues && isValue(listValues)) {
@@ -614,17 +638,16 @@ const airlineTrafficFunc = async (
       })
 
     airlineTrafficObj.value = pubFunc(listValues, newObj, true)
+    loading6.value = false
   }
-  loading6.value = false
 }
 
 //航班表格
 const airlineAbnormalFunc = async () => {
-  loading5.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
     {
-      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
-      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd1: today,
+      fd2: today,
       fttp: '国内离港',
     },
   ])) as any
@@ -635,8 +658,8 @@ const airlineAbnormalFunc = async () => {
   }
   if (listValues && isValue(listValues)) {
     listData.value = listValues
+    loading5.value = false
   }
-  loading5.value = false
 }
 
 //航班动态统计
@@ -676,12 +699,12 @@ const airlineAbnormalFunc = async () => {
 // };
 
 //特货分类统计
+const airlineDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const airlineFunc = async () => {
-  loading7.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
     {
-      fd1: form.value.startDate,
-      fd2: form.value.endDate,
+      fd1: airlineDates.startDate,
+      fd2: airlineDates.endDate,
       fttp: '国内离港',
     },
   ])) as any
@@ -701,17 +724,17 @@ const airlineFunc = async () => {
       specialGoodsAll.value
     )
     airlineObj.value = pubFunc(result, newObj)
+    loading7.value = false
   }
-  loading7.value = false
 }
 
 //拉货统计
+const pickingDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const pickingFuncs = async () => {
-  loading8.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGgPullId, [
     {
-      fd1: form.value.startDate,
-      fd2: form.value.endDate,
+      fd1: pickingDates.startDate,
+      fd2: pickingDates.endDate,
     },
   ])) as any
   if (listValues && isValue(listValues)) {
@@ -721,21 +744,18 @@ const pickingFuncs = async () => {
       item.weight = item['flightNum']
     })
     pickingObj.value = pubFunc(listValues, newObj)
+    loading8.value = false
   }
-  loading8.value = false
 }
 
-const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
-onMounted(() => {
-  hourlyPeakFunc()
-  waybillTrendFunc()
-  nodePeakFunc(today, today)
-  numbersFunc()
-  airlineTrafficFunc(today, today)
-  airlineAbnormalFunc()
-  airlineFunc()
-  pickingFuncs()
-})
+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])
+useLoop([pickingFuncs], 'dashboard', [pickingDates])
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/indexIn copy.vue

@@ -0,0 +1,731 @@
+<template>
+  <div class="dashboard">
+    <ComHead :tabs-index="3" />
+    <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-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>
+          <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-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>
+          <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-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 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-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>
+              <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-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>
+          <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 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="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"
+            >
+              <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.TallyWeight)"
+              >
+                <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 trigger="click" @command="handleWeightType">
+                  <span class="icons">
+                    <span class="icons-txt">{{ weightType }}</span>
+                    <el-icon color="#ffffff">
+                      <CaretBottom />
+                    </el-icon>
+                  </span>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="进港">进港</el-dropdown-item>
+                      <el-dropdown-item command="出港">出港</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </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"
+            >
+              <Echarts id="ww45" :option="tallyObj" />
+            </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 { 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,
+  airlineAbnormalBaggage,
+  airStutas,
+  getPublicData,
+  formatGoods,
+  formatWeight,
+} = 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}'),
+})
+const dateNow = ref({
+  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 disabledEndDate = (time: Date) => {
+  const timer: any = form.value.startDate
+  let data = new Date(timer)
+  return data.getTime() > time.getTime()
+}
+const resetForm = () => {
+  flag.value = false
+}
+
+const submitForm = () => {
+  flag.value = false
+  switch (timePickerName.value) {
+    case showTimeMsg.HourlyPeak:
+      dateNow.value.time = form.value.startDate
+      hourlyPeakFunc()
+      break
+    case showTimeMsg.WaybillTrend:
+      waybillTrendFunc()
+      break
+    case showTimeMsg.NodePeak:
+      nodePeakFunc()
+      break
+    case showTimeMsg.AirlineTraffic:
+      airlineTrafficFunc()
+      break
+    case showTimeMsg.AirlineAbnormal:
+      airlineFunc()
+      break
+    case showTimeMsg.TallyWeight:
+      tallyWeightFunc()
+      break
+    case showTimeMsg.SpecialClassification:
+      airlineFunc()
+      break
+    default:
+      break
+  }
+}
+
+const showDatePicker = (id?) => {
+  flag.value = true
+  timePickerName.value = id
+}
+
+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(Number(item.stockNum))
+    weights.push(Number(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 parseDate = (date: string) => {
+  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)
+}
+
+//获取小时峰值分布
+const hourlyPeakFunc = async () => {
+  loading1.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscJgHourlyPeakId, [
+    { flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
+  }
+  loading1.value = false
+}
+
+//运单趋势分析
+const waybillTrendFunc = async () => {
+  loading2.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscJgWaybillTrendId, [
+    { flightDate1: form.value.startDate, flightDate2: form.value.endDate },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    listValues.forEach(item => {
+      item.jobTime = parseDate(item['jobTime'])
+    })
+    waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
+  }
+  loading2.value = false
+}
+
+//始发站/目的站统计分析
+const nodePeakFunc = async (fd1?: string, fd2?: string) => {
+  loading3.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
+    {
+      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)
+  }
+  loading3.value = false
+}
+
+//航班数&运单数
+const numbersFunc = async () => {
+  loading4.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscJgNumbersId, [
+    {
+      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+    },
+  ])) 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 airlineTrafficFunc = async (
+  flightDate1?: string,
+  flightDate2?: string
+) => {
+  loading6.value = true
+  const listValues = await getPublicData(DATACONTENT_ID.jscJgAirlineTrafficId, [
+    {
+      flightDate1: flightDate1 ?? form.value.startDate,
+      flightDate2: flightDate2 ?? form.value.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 () => {
+  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: '国际进港',
+    },
+  ])) 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 airlineFunc = async () => {
+  loading7.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: '国际进港',
+    },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    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: '合计' }]
+    // specialGoods.value = names[0]["specialTypeName"];
+    specialGoods.value = '合计'
+    specialGoodsDatas.value = names
+    specialGoodsAll.value = listValues
+    const result = formatGoods(
+      // names[0]["specialTypeName"],
+      '合计',
+      specialGoodsAll.value
+    )
+    airlineObj.value = pubFunc(result, newObj)
+  }
+  loading7.value = false
+}
+
+//理货重量
+const tallyWeightFunc = async () => {
+  loading8.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscTallyId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: `国际${weightType.value}`,
+    },
+  ])) 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
+  }
+  loading8.value = false
+}
+const handleWeightType = (type: string) => {
+  weightType.value = type
+  tallyWeightFunc()
+}
+
+const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
+onMounted(() => {
+  hourlyPeakFunc()
+  waybillTrendFunc()
+  nodePeakFunc(today, today)
+  numbersFunc()
+  airlineTrafficFunc(today, today)
+  airlineAbnormalFunc()
+  airlineFunc()
+  tallyWeightFunc()
+})
+</script>
+
+<style lang="scss" scoped>
+@import './css/index.scss';
+</style>

src/views/dashboard/indexIn.vue

@@ -24,7 +24,6 @@
             <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"
             >
@@ -51,7 +50,6 @@
             <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"
             >
@@ -78,7 +76,6 @@
             <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"
             >
@@ -91,7 +88,6 @@
           <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"
           >
@@ -123,7 +119,6 @@
           <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"
           >
@@ -249,7 +244,6 @@
             <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"
             >
@@ -296,7 +290,6 @@
             <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"
             >
@@ -339,7 +332,6 @@
             <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"
             >
@@ -384,16 +376,17 @@
 </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 nodeCode from './hooks/nodeCode'
 import { parseTime, isValue } from '@/utils/validate'
 import * as _ from 'lodash'
+import { useLoop } from '@/hooks/useLoop'
+
 const {
   optionLeft,
   airCompaneBaggage,
@@ -407,14 +400,14 @@ 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 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>({})
@@ -428,21 +421,23 @@ 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}'),
-})
-const dateNow = ref({
-  time: parseTime(Date.now(), '{y}-{m}-{d}'),
+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.value.endDate
+  const timer: any = form.endDate
   const data = new Date(timer)
   return time.getTime() > data.getTime()
 }
 const disabledEndDate = (time: Date) => {
-  const timer: any = form.value.startDate
+  const timer: any = form.startDate
   let data = new Date(timer)
   return data.getTime() > time.getTime()
 }
@@ -452,37 +447,67 @@ const resetForm = () => {
 
 const submitForm = () => {
   flag.value = false
+  let dates: any = {}
   switch (timePickerName.value) {
     case showTimeMsg.HourlyPeak:
-      dateNow.value.time = form.value.startDate
-      hourlyPeakFunc()
+      dates = hourlyDates
+      loading1.value = true
       break
     case showTimeMsg.WaybillTrend:
-      waybillTrendFunc()
+      dates = waybillDates
+      loading2.value = true
       break
     case showTimeMsg.NodePeak:
-      nodePeakFunc()
+      dates = nodeDates
+      loading3.value = true
       break
     case showTimeMsg.AirlineTraffic:
-      airlineTrafficFunc()
+      dates = airlineTrafficDates
+      loading6.value = true
       break
-    case showTimeMsg.AirlineAbnormal:
-      airlineFunc()
+    case showTimeMsg.SpecialClassification:
+      dates = airlineDates
+      loading7.value = true
       break
     case showTimeMsg.TallyWeight:
-      tallyWeightFunc()
-      break
-    case showTimeMsg.SpecialClassification:
-      airlineFunc()
+      dates = tallyDates
+      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.TallyWeight:
+      dates = tallyDates
+      break
+    default:
+      break
+  }
+  form.startDate = dates.startDate || null
+  form.endDate = dates.endDate || null
 }
 
 const sortClass = sortData => {
@@ -537,39 +562,39 @@ const handleCommand = (command: string) => {
 }
 
 //获取小时峰值分布
+const hourlyDates = reactive({ startDate: today, endDate: today })
 const hourlyPeakFunc = async () => {
-  loading1.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscJgHourlyPeakId, [
-    { flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
+    { flightDate1: hourlyDates.startDate, flightDate2: hourlyDates.endDate },
   ])) as any
   if (listValues && isValue(listValues)) {
     hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
+    loading1.value = false
   }
-  loading1.value = false
 }
 
 //运单趋势分析
+const waybillDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const waybillTrendFunc = async () => {
-  loading2.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscJgWaybillTrendId, [
-    { flightDate1: form.value.startDate, flightDate2: form.value.endDate },
+    { flightDate1: waybillDates.startDate, flightDate2: waybillDates.endDate },
   ])) as any
   if (listValues && isValue(listValues)) {
     listValues.forEach(item => {
       item.jobTime = parseDate(item['jobTime'])
     })
     waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
+    loading2.value = false
   }
-  loading2.value = false
 }
 
 //始发站/目的站统计分析
-const nodePeakFunc = async (fd1?: string, fd2?: string) => {
-  loading3.value = true
+const nodeDates = reactive({ startDate: today, endDate: today })
+const nodePeakFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
     {
-      fd1: fd1 ?? form.value.startDate,
-      fd2: fd2 ?? form.value.endDate,
+      fd1: nodeDates.startDate,
+      fd2: nodeDates.endDate,
       fttp: '国际进港',
     },
   ])) as any
@@ -579,17 +604,16 @@ const nodePeakFunc = async (fd1?: string, fd2?: string) => {
       item.jobTime = item['airport']
     })
     nodePeakObj.value = pubFunc(listValues, newObj, true)
+    loading3.value = false
   }
-  loading3.value = false
 }
 
 //航班数&运单数
 const numbersFunc = async () => {
-  loading4.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscJgNumbersId, [
     {
-      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
-      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd1: today,
+      fd2: today,
     },
   ])) as any
   if (listValues && isValue(listValues)) {
@@ -597,20 +621,20 @@ const numbersFunc = async () => {
     flightNums.value = flightNum ?? 0
     stockNums.value = finishFlightNum ?? 0
     weightNums.value = weight ?? 0
+    loading4.value = false
   }
-  loading4.value = false
 }
 
 //航司运量
-const airlineTrafficFunc = async (
-  flightDate1?: string,
-  flightDate2?: string
-) => {
-  loading6.value = true
+const airlineTrafficDates = reactive({
+  startDate: sevenDaysAgo,
+  endDate: today,
+})
+const airlineTrafficFunc = async () => {
   const listValues = await getPublicData(DATACONTENT_ID.jscJgAirlineTrafficId, [
     {
-      flightDate1: flightDate1 ?? form.value.startDate,
-      flightDate2: flightDate2 ?? form.value.endDate,
+      flightDate1: airlineTrafficDates.startDate,
+      flightDate2: airlineTrafficDates.endDate,
     },
   ])
   if (listValues && isValue(listValues)) {
@@ -630,17 +654,16 @@ const airlineTrafficFunc = async (
       })
 
     airlineTrafficObj.value = pubFunc(listValues, newObj, true)
+    loading6.value = false
   }
-  loading6.value = false
 }
 
 //航班表格
 const airlineAbnormalFunc = async () => {
-  loading5.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
     {
-      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
-      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd1: today,
+      fd2: today,
       fttp: '国际进港',
     },
   ])) as any
@@ -651,17 +674,17 @@ const airlineAbnormalFunc = async () => {
   }
   if (listValues && isValue(listValues)) {
     listData.value = listValues
+    loading5.value = false
   }
-  loading5.value = false
 }
 
 //航班动态统计
+const airlineDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const airlineFunc = async () => {
-  loading7.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
     {
-      fd1: form.value.startDate,
-      fd2: form.value.endDate,
+      fd1: airlineDates.startDate,
+      fd2: airlineDates.endDate,
       fttp: '国际进港',
     },
   ])) as any
@@ -681,17 +704,18 @@ const airlineFunc = async () => {
       specialGoodsAll.value
     )
     airlineObj.value = pubFunc(result, newObj)
+    loading7.value = false
   }
-  loading7.value = false
 }
 
 //理货重量
+const tallyDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const tallyWeightFunc = async () => {
   loading8.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscTallyId, [
     {
-      fd1: form.value.startDate,
-      fd2: form.value.endDate,
+      fd1: tallyDates.startDate,
+      fd2: tallyDates.endDate,
       fttp: `国际${weightType.value}`,
     },
   ])) as any
@@ -705,25 +729,21 @@ const tallyWeightFunc = async () => {
     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()
 }
 
-const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
-onMounted(() => {
-  hourlyPeakFunc()
-  waybillTrendFunc()
-  nodePeakFunc(today, today)
-  numbersFunc()
-  airlineTrafficFunc(today, today)
-  airlineAbnormalFunc()
-  airlineFunc()
-  tallyWeightFunc()
-})
+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])
+useLoop([tallyWeightFunc], 'dashboard', [tallyDates, weightType])
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/indexOut copy.vue

@@ -0,0 +1,709 @@
+<template>
+  <div class="dashboard">
+    <ComHead :tabs-index="2" />
+    <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-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>
+          <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-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>
+          <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-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 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-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>
+              <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-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>
+          <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="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"
+            >
+              <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-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="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 { 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,
+  airlineAbnormalBaggage,
+  getPublicData,
+  formatGoods,
+  formatWeight,
+} = 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 pickingObj = ref<any>({})
+const flightNums = ref(0)
+const stockNums = ref(0)
+const specialGoods = ref<string>('分类')
+const specialGoodsDatas = ref<any>([])
+const specialGoodsAll = ref<any>([])
+const weightNums = ref<number | string>(0)
+const form = ref({
+  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>([])
+const disabledStartDate = (time: Date) => {
+  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 resetForm = () => {
+  flag.value = false
+}
+
+const submitForm = () => {
+  flag.value = false
+  switch (timePickerName.value) {
+    case showTimeMsg.HourlyPeak:
+      dateNow.value.time = form.value.startDate
+      hourlyPeakFunc()
+      break
+    case showTimeMsg.WaybillTrend:
+      waybillTrendFunc()
+      break
+    case showTimeMsg.NodePeak:
+      nodePeakFunc()
+      break
+    case showTimeMsg.AirlineTraffic:
+      airlineTrafficFunc()
+      break
+    case showTimeMsg.AirlineAbnormal:
+      airlineFunc()
+      break
+    case showTimeMsg.PickingStatistics:
+      pickingFuncs()
+      break
+    case showTimeMsg.SpecialClassification:
+      airlineFunc()
+      break
+    default:
+      break
+  }
+}
+
+const showDatePicker = (id?) => {
+  flag.value = true
+  timePickerName.value = id
+}
+
+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 parseDate = (date: string) => {
+  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)
+}
+
+//获取小时峰值分布
+const hourlyPeakFunc = async () => {
+  loading1.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGjHourlyPeakId, [
+    { flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
+  }
+  loading1.value = false
+}
+
+//运单趋势分析
+const waybillTrendFunc = async () => {
+  loading2.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGjWaybillTrendId, [
+    { flightDate1: form.value.startDate, flightDate2: form.value.endDate },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    listValues.forEach(item => {
+      item.jobTime = parseDate(item['jobTime'])
+    })
+    waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
+  }
+  loading2.value = false
+}
+
+//始发站/目的站统计分析
+const nodePeakFunc = async (fd1?: string, fd2?: string) => {
+  loading3.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
+    {
+      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)
+  }
+  loading3.value = false
+}
+
+//航班数&运单数
+const numbersFunc = async () => {
+  loading4.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGjNumbersId, [
+    {
+      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+    },
+  ])) 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 airlineTrafficFunc = async (
+  flightDate1?: string,
+  flightDate2?: string
+) => {
+  loading6.value = true
+  const listValues = await getPublicData(DATACONTENT_ID.jscGjAirlineTrafficId, [
+    {
+      flightDate1: flightDate1 ?? form.value.startDate,
+      flightDate2: flightDate2 ?? form.value.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 () => {
+  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: '国际离港',
+    },
+  ])) 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 airlineFunc = async () => {
+  loading7.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: '国际离港',
+    },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    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: '合计' }]
+    // specialGoods.value = names[0]["specialTypeName"];
+    specialGoods.value = '合计'
+    specialGoodsDatas.value = names
+    specialGoodsAll.value = listValues
+    const result = formatGoods(
+      // names[0]["specialTypeName"],
+      '合计',
+      specialGoodsAll.value
+    )
+    airlineObj.value = pubFunc(result, newObj)
+  }
+  loading7.value = false
+}
+
+//拉货统计
+const pickingFuncs = async () => {
+  loading8.value = true
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGjPullId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+    },
+  ])) as any
+  if (listValues && isValue(listValues)) {
+    const newObj: any = _.cloneDeep(airlineAbnormalBaggage.option.baseOption)
+    listValues.forEach(item => {
+      item.jobTime = parseDate(item['flightDate'])
+      item.weight = item['flightNum']
+    })
+    pickingObj.value = pubFunc(listValues, newObj)
+  }
+  loading8.value = false
+}
+
+const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
+onMounted(() => {
+  hourlyPeakFunc()
+  waybillTrendFunc()
+  nodePeakFunc(today, today)
+  numbersFunc()
+  airlineTrafficFunc(today, today)
+  airlineAbnormalFunc()
+  airlineFunc()
+  pickingFuncs()
+})
+</script>
+
+<style lang="scss" scoped>
+@import './css/index.scss';
+</style>

src/views/dashboard/indexOut.vue

@@ -24,7 +24,6 @@
             <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"
             >
@@ -51,7 +50,6 @@
             <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"
             >
@@ -78,7 +76,6 @@
             <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"
             >
@@ -91,7 +88,6 @@
           <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"
           >
@@ -123,7 +119,6 @@
           <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"
           >
@@ -249,7 +244,6 @@
             <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"
             >
@@ -300,7 +294,6 @@
             <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"
             >
@@ -327,7 +320,6 @@
             <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"
             >
@@ -372,16 +364,17 @@
 </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 nodeCode from './hooks/nodeCode'
 import { parseTime, isValue } from '@/utils/validate'
 import * as _ from 'lodash'
+import { useLoop } from '@/hooks/useLoop'
+
 const {
   optionLeft,
   airCompaneBaggage,
@@ -394,14 +387,14 @@ 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 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>({})
@@ -414,21 +407,23 @@ const specialGoods = ref<string>('分类')
 const specialGoodsDatas = ref<any>([])
 const specialGoodsAll = ref<any>([])
 const weightNums = ref<number | string>(0)
-const form = ref({
-  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 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.value.endDate
+  const timer: any = form.endDate
   const data = new Date(timer)
   return time.getTime() > data.getTime()
 }
 const disabledEndDate = (time: Date) => {
-  const timer: any = form.value.startDate
+  const timer: any = form.startDate
   let data = new Date(timer)
   return data.getTime() > time.getTime()
 }
@@ -438,37 +433,67 @@ const resetForm = () => {
 
 const submitForm = () => {
   flag.value = false
+  let dates: any = {}
   switch (timePickerName.value) {
     case showTimeMsg.HourlyPeak:
-      dateNow.value.time = form.value.startDate
-      hourlyPeakFunc()
+      dates = hourlyDates
+      loading1.value = true
       break
     case showTimeMsg.WaybillTrend:
-      waybillTrendFunc()
+      dates = waybillDates
+      loading2.value = true
       break
     case showTimeMsg.NodePeak:
-      nodePeakFunc()
+      dates = nodeDates
+      loading3.value = true
       break
     case showTimeMsg.AirlineTraffic:
-      airlineTrafficFunc()
+      dates = airlineTrafficDates
+      loading6.value = true
       break
-    case showTimeMsg.AirlineAbnormal:
-      airlineFunc()
+    case showTimeMsg.SpecialClassification:
+      dates = airlineDates
+      loading7.value = true
       break
     case showTimeMsg.PickingStatistics:
-      pickingFuncs()
-      break
-    case showTimeMsg.SpecialClassification:
-      airlineFunc()
+      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 => {
@@ -523,39 +548,39 @@ const handleCommand = (command: string) => {
 }
 
 //获取小时峰值分布
+const hourlyDates = reactive({ startDate: today, endDate: today })
 const hourlyPeakFunc = async () => {
-  loading1.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGjHourlyPeakId, [
-    { flightDate1: dateNow.value.time, flightDate2: form.value.endDate },
+    { flightDate1: hourlyDates.startDate, flightDate2: hourlyDates.endDate },
   ])) as any
   if (listValues && isValue(listValues)) {
     hourlyPeakObj.value = pubFunc(listValues, optionLeft, true)
+    loading1.value = false
   }
-  loading1.value = false
 }
 
 //运单趋势分析
+const waybillDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const waybillTrendFunc = async () => {
-  loading2.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGjWaybillTrendId, [
-    { flightDate1: form.value.startDate, flightDate2: form.value.endDate },
+    { flightDate1: waybillDates.startDate, flightDate2: waybillDates.endDate },
   ])) as any
   if (listValues && isValue(listValues)) {
     listValues.forEach(item => {
       item.jobTime = parseDate(item['jobTime'])
     })
     waybillTrendObj.value = pubFunc(listValues, optionLeft, true)
+    loading2.value = false
   }
-  loading2.value = false
 }
 
 //始发站/目的站统计分析
-const nodePeakFunc = async (fd1?: string, fd2?: string) => {
-  loading3.value = true
+const nodeDates = reactive({ startDate: today, endDate: today })
+const nodePeakFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
     {
-      fd1: fd1 ?? form.value.startDate,
-      fd2: fd2 ?? form.value.endDate,
+      fd1: nodeDates.startDate,
+      fd2: nodeDates.endDate,
       fttp: '国际离港',
     },
   ])) as any
@@ -565,17 +590,16 @@ const nodePeakFunc = async (fd1?: string, fd2?: string) => {
       item.jobTime = item['airport']
     })
     nodePeakObj.value = pubFunc(listValues, newObj, true)
+    loading3.value = false
   }
-  loading3.value = false
 }
 
 //航班数&运单数
 const numbersFunc = async () => {
-  loading4.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGjNumbersId, [
     {
-      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
-      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd1: today,
+      fd2: today,
     },
   ])) as any
   if (listValues && isValue(listValues)) {
@@ -583,20 +607,20 @@ const numbersFunc = async () => {
     flightNums.value = flightNum ?? 0
     stockNums.value = finishFlightNum ?? 0
     weightNums.value = weight ?? 0
+    loading4.value = false
   }
-  loading4.value = false
 }
 
 //航司运量
-const airlineTrafficFunc = async (
-  flightDate1?: string,
-  flightDate2?: string
-) => {
-  loading6.value = true
+const airlineTrafficDates = reactive({
+  startDate: sevenDaysAgo,
+  endDate: today,
+})
+const airlineTrafficFunc = async () => {
   const listValues = await getPublicData(DATACONTENT_ID.jscGjAirlineTrafficId, [
     {
-      flightDate1: flightDate1 ?? form.value.startDate,
-      flightDate2: flightDate2 ?? form.value.endDate,
+      flightDate1: airlineTrafficDates.startDate,
+      flightDate2: airlineTrafficDates.endDate,
     },
   ])
   if (listValues && isValue(listValues)) {
@@ -616,17 +640,16 @@ const airlineTrafficFunc = async (
       })
 
     airlineTrafficObj.value = pubFunc(listValues, newObj, true)
+    loading6.value = false
   }
-  loading6.value = false
 }
 
 //航班表格
 const airlineAbnormalFunc = async () => {
-  loading5.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
     {
-      fd1: parseTime(Date.now(), '{y}-{m}-{d}'),
-      fd2: parseTime(Date.now(), '{y}-{m}-{d}'),
+      fd1: today,
+      fd2: today,
       fttp: '国际离港',
     },
   ])) as any
@@ -637,17 +660,17 @@ const airlineAbnormalFunc = async () => {
   }
   if (listValues && isValue(listValues)) {
     listData.value = listValues
+    loading5.value = false
   }
-  loading5.value = false
 }
 
 //航班动态统计
+const airlineDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const airlineFunc = async () => {
-  loading7.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGoodsId, [
     {
-      fd1: form.value.startDate,
-      fd2: form.value.endDate,
+      fd1: airlineDates.startDate,
+      fd2: airlineDates.endDate,
       fttp: '国际离港',
     },
   ])) as any
@@ -667,17 +690,17 @@ const airlineFunc = async () => {
       specialGoodsAll.value
     )
     airlineObj.value = pubFunc(result, newObj)
+    loading7.value = false
   }
-  loading7.value = false
 }
 
 //拉货统计
+const pickingDates = reactive({ startDate: sevenDaysAgo, endDate: today })
 const pickingFuncs = async () => {
-  loading8.value = true
   const listValues = (await getPublicData(DATACONTENT_ID.jscGjPullId, [
     {
-      fd1: form.value.startDate,
-      fd2: form.value.endDate,
+      fd1: pickingDates.startDate,
+      fd2: pickingDates.endDate,
     },
   ])) as any
   if (listValues && isValue(listValues)) {
@@ -687,21 +710,18 @@ const pickingFuncs = async () => {
       item.weight = item['flightNum']
     })
     pickingObj.value = pubFunc(listValues, newObj)
+    loading8.value = false
   }
-  loading8.value = false
 }
 
-const today = parseTime(Date.now(), '{y}-{m}-{d}') as string
-onMounted(() => {
-  hourlyPeakFunc()
-  waybillTrendFunc()
-  nodePeakFunc(today, today)
-  numbersFunc()
-  airlineTrafficFunc(today, today)
-  airlineAbnormalFunc()
-  airlineFunc()
-  pickingFuncs()
-})
+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])
+useLoop([pickingFuncs], 'dashboard', [pickingDates])
 </script>
 
 <style lang="scss" scoped>