驾驶舱

public/config.js

@@ -17,6 +17,24 @@ var DATACONTENT_ID = {
   jscNumbersId: 1803537, //国内出港-航班数&运单数-id
   jscAirlineTrafficId: 1803538, //国内出港-航司运量-id
 
+  jscGjHourlyPeakId: 1803539, //国际出港-小时峰值分布-id
+  jscGjWaybillTrendId: 1803540, //国际出港-运单趋势分析-id
+  jscGjNodePeakId: 1803541, //国际出港-节点峰值-id
+  jscGjNumbersId: 1803542, //国际出港-航班数&运单数-id
+  jscGjAirlineTrafficId: 1803543, //国际出港-航司运量-id
+
+  jscCgHourlyPeakId: 1803544, //国内进港-小时峰值分布-id
+  jscCgWaybillTrendId: 1803545, //国内进港-运单趋势分析-id
+  jscCgNodePeakId: 1803546, //国内进港-节点峰值-id
+  jscCgNumbersId: 1803547, //国内进港-航班数&运单数-id
+  jscCgAirlineTrafficId: 1803548, //国内进港-航司运量-id
+
+  jscJgHourlyPeakId: 1803549, //国际进港-小时峰值分布-id
+  jscJgWaybillTrendId: 1803550, //国际进港-运单趋势分析-id
+  jscJgNodePeakId: 1803551, //国际进港-节点峰值-id
+  jscJgNumbersId: 1803552, //国际进港-航班数&运单数-id
+  jscJgAirlineTrafficId: 1803553, //国际进港-航司运量-id
+
   /***-----权限管理------***/
   authTreeId: 40, //权限管理-权限树
   authTreeNewId: 92, //权限管理-权限树

src/views/dashboard/index.vue

@@ -9,7 +9,10 @@
               <div class="dashboard-content-top-left-item-top-title">
                 小时峰值分布
               </div>
-              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-left-item-top-time"
+                @click="showDatePicker(showTimeMsg.HourlyPeak)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -19,7 +22,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww1" :option="optionLeft" />
+              <Echarts id="ww1" :option="hourlyPeakObj" />
             </div>
           </div>
           <div class="dashboard-content-top-left-item">
@@ -27,7 +30,10 @@
               <div class="dashboard-content-top-left-item-top-title">
                 运单趋势分析
               </div>
-              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-left-item-top-time"
+                @click="showDatePicker(showTimeMsg.WaybillTrend)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -37,7 +43,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww12" :option="optionLeft" />
+              <Echarts id="ww12" :option="waybillTrendObj" />
             </div>
           </div>
         </div>
@@ -47,21 +53,12 @@
           <div class="dashboard-content-top-center-bottom">
             <div class="dashboard-content-top-center-bottom-box1">
               <div class="dashboard-content-top-center-bottom-box1-title">
-                航班数
-              </div>
-              <div v-for="(item,index) in capArr" :key="index" class="dashboard-content-top-center-bottom-box1-info">
-                <div>{{item.cname}}：{{item.cvalue}}</div>
-                <div>{{item.dname}}：{{item.dvalue}}</div>
+                航班数：{{ flightNums }}
               </div>
             </div>
             <div class="dashboard-content-top-center-bottom-box2">
               <div class="dashboard-content-top-center-bottom-box2-title">
-                运单数
-              </div>
-              <div v-for="(item,index) in capData" :key="index" class="dashboard-content-top-center-bottom-box2-info">
-                <div>{{item.cname}}：{{item.cvalue}}</div>
-                <div>{{item.dname}}：{{item.dvalue}}</div>
-                <div>{{item.ename}}：{{item.evalue}}</div>
+                运单数：{{ stockNums }}
               </div>
             </div>
             <EchartsMap id="ww2" />
@@ -73,7 +70,10 @@
               <div class="dashboard-content-top-right-item-top-title">
                 航班预警报警分析
               </div>
-              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-right-item-top-time"
+                @click="showDatePicker()"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -91,7 +91,10 @@
               <div class="dashboard-content-top-right-item-top-title">
                 航司运量统计
               </div>
-              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-right-item-top-time"
+                @click="showDatePicker(showTimeMsg.AirlineTraffic)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -101,7 +104,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww33" :option="airCompaneBaggage.option" />
+              <Echarts id="ww33" :option="airlineTrafficObj" />
             </div>
           </div>
         </div>
@@ -112,7 +115,10 @@
             <div class="dashboard-content-bottom-left-top-title">
               节点峰值分布
             </div>
-            <div class="dashboard-content-bottom-left-top-time" @click="showDatePicker">
+            <div
+              class="dashboard-content-bottom-left-top-time"
+              @click="showDatePicker(showTimeMsg.NodePeak)"
+            >
               <el-icon color="#ffffff" size="18">
                 <Calendar />
               </el-icon>
@@ -122,7 +128,7 @@
             </div>
           </div>
           <div class="dashboard-content-bottom-left-bottom">
-            <Echarts id="ww4" :option="hourPeak.option" />
+            <Echarts id="ww4" :option="nodePeakObj" />
           </div>
         </div>
         <div class="dashboard-content-bottom-center">
@@ -130,7 +136,10 @@
             <div class="dashboard-content-bottom-center-top-title">
               节点效率分析
             </div>
-            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker">
+            <div
+              class="dashboard-content-bottom-center-top-time"
+              @click="showDatePicker()"
+            >
               <el-icon color="#ffffff" size="18">
                 <Calendar />
               </el-icon>
@@ -158,10 +167,26 @@
     <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
       <el-form :model="form" label-width="120px">
         <el-form-item label="开始日期">
-          <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
+          <el-date-picker
+            :disabled-date="disabledStartDate"
+            v-model="form.startDate"
+            type="date"
+            placeholder="请选择开始日期"
+            size="default"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+          />
         </el-form-item>
         <el-form-item label="结束日期">
-          <el-date-picker :disabled-date="disabledEndDate" v-model="form.endDate" type="date" placeholder="请选择结束日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+          <el-date-picker
+            :disabled-date="disabledEndDate"
+            v-model="form.endDate"
+            type="date"
+            placeholder="请选择结束日期"
+            size="default"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
         </el-form-item>
       </el-form>
     </Dialog>
@@ -169,13 +194,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
 import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
 import ComHead from "./components/comHead.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
-import { usePublic } from "./hooks/usePublic";
+import { usePublic, showTimeMsg } from "./hooks/usePublic";
+import { parseTime } from "@/utils/validate";
+import * as _ from "lodash";
 const {
   optionLeft,
   airlineAbnormalBaggage,
@@ -183,37 +210,195 @@ const {
   airStutas,
   nodeEfficiency,
   hourPeak,
-  hkArr,
-  hkData,
+  getPublicData,
 } = usePublic();
-const capArr = ref(hkArr);
-const capData = ref(hkData);
+const timePickerName = ref<number>(0);
+const flag = ref<boolean>(false);
+const hourlyPeakObj = ref<any>({});
+const waybillTrendObj = ref<any>({});
+const nodePeakObj = ref<any>({});
+const airlineTrafficObj = ref<any>({});
+const flightNums = ref<number>(0);
+const stockNums = ref<number>(0);
 const form = ref({
-  startDate: Date.now(),
-  endDate: Date.now(),
+  startDate: parseTime(Date.now(), "{y}-{m}-{d}"),
+  endDate: parseTime(Date.now(), "{y}-{m}-{d}"),
 });
 
 const disabledStartDate = (time: Date) => {
-  let data = new Date(form.value.endDate);
+  const timer: any = form.value.endDate;
+  const data = new Date(timer);
   return time.getTime() > data.getTime();
 };
 const disabledEndDate = (time: Date) => {
-  let data = new Date(form.value.startDate);
+  const timer: any = form.value.startDate;
+  let data = new Date(timer);
   return data.getTime() > time.getTime();
 };
-
-const flag = ref(false);
 const resetForm = () => {
   flag.value = false;
 };
 
 const submitForm = () => {
   flag.value = false;
+  switch (timePickerName.value) {
+    case showTimeMsg.HourlyPeak:
+      hourlyPeakFunc();
+      break;
+    case showTimeMsg.WaybillTrend:
+      waybillTrendFunc();
+      break;
+    case showTimeMsg.NodePeak:
+      nodePeakFunc();
+      break;
+    case showTimeMsg.AirlineTraffic:
+      airlineTrafficFunc();
+      break;
+    default:
+      break;
+  }
 };
 
-const showDatePicker = () => {
+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) => {
+  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;
+  newObj.series[0].data = stockNums;
+  newObj.series[1].data = weights;
+  return newObj;
+};
+
+//获取小时峰值分布
+const hourlyPeakFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgHourlyPeakId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+};
+
+//运单趋势分析
+const waybillTrendFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgWaybillTrendId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  waybillTrendObj.value = pubFunc(listValues, optionLeft);
+};
+
+//节点峰值
+const nodePeakFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgNodePeakId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  const newObj = _.cloneDeep(hourPeak.option);
+  const arr = sortClass(listValues);
+  const [title, series, singleAxis] = [<any>[], <any>[], <any>[]];
+  arr.forEach((item, index) => {
+    const msg: any = [];
+    const datas: any = [];
+    item.map((p, i) => {
+      msg.push(p.stockNum);
+      datas.push(i + 1);
+    });
+    title.push({
+      top: ((index + 0.5) * 100) / 4 - 3 + "%",
+      text: item[0].jobName,
+      textStyle: {
+        fontSize: 12,
+        fontWeight: "normal",
+        color: "#698dc3",
+      },
+    });
+    series.push({
+      singleAxisIndex: index,
+      coordinateSystem: "singleAxis",
+      type: "scatter",
+      data: msg,
+    });
+    singleAxis.push({
+      type: "category",
+      data: datas,
+      top: ((index + 0.5) * 100) / 4 - 3 + "%",
+      height: 100 / 4 - 5 + "%",
+      left: "12%",
+      right: "1%",
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+    });
+  });
+  newObj.series = series;
+  newObj.singleAxis = singleAxis;
+  newObj.title = title;
+  nodePeakObj.value = newObj;
+};
+
+//航班数&运单数
+const numbersFunc = async () => {
+  const listValues = (await getPublicData(
+    DATACONTENT_ID.jscCgNumbersId,
+    []
+  )) as any;
+  const { flightNum, stockNum } = listValues[0];
+  flightNums.value = flightNum;
+  stockNums.value = stockNum;
+};
+
+//航司运量
+const airlineTrafficFunc = async () => {
+  const listValues = (await getPublicData(
+    DATACONTENT_ID.jscCgAirlineTrafficId,
+    [form.value.startDate, form.value.endDate]
+  )) as any;
+  listValues.forEach((item) => {
+    item.jobTime = item["IACACode"];
+  });
+  airlineTrafficObj.value = pubFunc(
+    listValues,
+    airCompaneBaggage.option.baseOption
+  );
+};
+
+onMounted(() => {
+  hourlyPeakFunc();
+  waybillTrendFunc();
+  nodePeakFunc();
+  numbersFunc();
+  airlineTrafficFunc();
+});
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/indexIn.vue

@@ -9,7 +9,10 @@
               <div class="dashboard-content-top-left-item-top-title">
                 小时峰值分布
               </div>
-              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-left-item-top-time"
+                @click="showDatePicker(showTimeMsg.HourlyPeak)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -19,7 +22,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww1" :option="optionLeft" />
+              <Echarts id="ww1" :option="hourlyPeakObj" />
             </div>
           </div>
           <div class="dashboard-content-top-left-item">
@@ -27,7 +30,10 @@
               <div class="dashboard-content-top-left-item-top-title">
                 运单趋势分析
               </div>
-              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-left-item-top-time"
+                @click="showDatePicker(showTimeMsg.WaybillTrend)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -37,7 +43,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww12" :option="optionLeft" />
+              <Echarts id="ww12" :option="waybillTrendObj" />
             </div>
           </div>
         </div>
@@ -47,21 +53,12 @@
           <div class="dashboard-content-top-center-bottom">
             <div class="dashboard-content-top-center-bottom-box1">
               <div class="dashboard-content-top-center-bottom-box1-title">
-                航班数
-              </div>
-              <div v-for="(item,index) in capArr" :key="index" class="dashboard-content-top-center-bottom-box1-info">
-                <div>{{item.cname}}：{{item.cvalue}}</div>
-                <div>{{item.dname}}：{{item.dvalue}}</div>
+                航班数：{{ flightNums }}
               </div>
             </div>
             <div class="dashboard-content-top-center-bottom-box2">
               <div class="dashboard-content-top-center-bottom-box2-title">
-                运单数
-              </div>
-              <div v-for="(item,index) in capData" :key="index" class="dashboard-content-top-center-bottom-box2-info">
-                <div>{{item.cname}}：{{item.cvalue}}</div>
-                <div>{{item.dname}}：{{item.dvalue}}</div>
-                <div>{{item.ename}}：{{item.evalue}}</div>
+                运单数：{{ stockNums }}
               </div>
             </div>
             <EchartsMap id="ww2" />
@@ -73,7 +70,10 @@
               <div class="dashboard-content-top-right-item-top-title">
                 航班预警报警分析
               </div>
-              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-right-item-top-time"
+                @click="showDatePicker()"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -91,7 +91,10 @@
               <div class="dashboard-content-top-right-item-top-title">
                 航司运量统计
               </div>
-              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-right-item-top-time"
+                @click="showDatePicker(showTimeMsg.AirlineTraffic)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -101,7 +104,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww33" :option="airCompaneBaggage.option" />
+              <Echarts id="ww33" :option="airlineTrafficObj" />
             </div>
           </div>
         </div>
@@ -112,7 +115,10 @@
             <div class="dashboard-content-bottom-left-top-title">
               节点峰值分布
             </div>
-            <div class="dashboard-content-bottom-left-top-time" @click="showDatePicker">
+            <div
+              class="dashboard-content-bottom-left-top-time"
+              @click="showDatePicker(showTimeMsg.NodePeak)"
+            >
               <el-icon color="#ffffff" size="18">
                 <Calendar />
               </el-icon>
@@ -122,7 +128,7 @@
             </div>
           </div>
           <div class="dashboard-content-bottom-left-bottom">
-            <Echarts id="ww4" :option="hourPeak.option" />
+            <Echarts id="ww4" :option="nodePeakObj" />
           </div>
         </div>
         <div class="dashboard-content-bottom-center">
@@ -130,7 +136,10 @@
             <div class="dashboard-content-bottom-center-top-title">
               节点效率分析
             </div>
-            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker">
+            <div
+              class="dashboard-content-bottom-center-top-time"
+              @click="showDatePicker()"
+            >
               <el-icon color="#ffffff" size="18">
                 <Calendar />
               </el-icon>
@@ -158,10 +167,26 @@
     <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
       <el-form :model="form" label-width="120px">
         <el-form-item label="开始日期">
-          <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
+          <el-date-picker
+            :disabled-date="disabledStartDate"
+            v-model="form.startDate"
+            type="date"
+            placeholder="请选择开始日期"
+            size="default"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+          />
         </el-form-item>
         <el-form-item label="结束日期">
-          <el-date-picker :disabled-date="disabledEndDate" v-model="form.endDate" type="date" placeholder="请选择结束日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+          <el-date-picker
+            :disabled-date="disabledEndDate"
+            v-model="form.endDate"
+            type="date"
+            placeholder="请选择结束日期"
+            size="default"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
         </el-form-item>
       </el-form>
     </Dialog>
@@ -169,13 +194,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
 import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
 import ComHead from "./components/comHead.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
-import { usePublic } from "./hooks/usePublic";
+import { usePublic, showTimeMsg } from "./hooks/usePublic";
+import { parseTime } from "@/utils/validate";
+import * as _ from "lodash";
 const {
   optionLeft,
   airlineAbnormalBaggage,
@@ -183,37 +210,195 @@ const {
   airStutas,
   nodeEfficiency,
   hourPeak,
-  hkArr,
-  hkData,
+  getPublicData,
 } = usePublic();
-const capArr = ref(hkArr);
-const capData = ref(hkData);
+const timePickerName = ref<number>(0);
+const flag = ref<boolean>(false);
+const hourlyPeakObj = ref<any>({});
+const waybillTrendObj = ref<any>({});
+const nodePeakObj = ref<any>({});
+const airlineTrafficObj = ref<any>({});
+const flightNums = ref<number>(0);
+const stockNums = ref<number>(0);
 const form = ref({
-  startDate: Date.now(),
-  endDate: Date.now(),
+  startDate: parseTime(Date.now(), "{y}-{m}-{d}"),
+  endDate: parseTime(Date.now(), "{y}-{m}-{d}"),
 });
 
 const disabledStartDate = (time: Date) => {
-  let data = new Date(form.value.endDate);
+  const timer: any = form.value.endDate;
+  const data = new Date(timer);
   return time.getTime() > data.getTime();
 };
 const disabledEndDate = (time: Date) => {
-  let data = new Date(form.value.startDate);
+  const timer: any = form.value.startDate;
+  let data = new Date(timer);
   return data.getTime() > time.getTime();
 };
-
-const flag = ref(false);
 const resetForm = () => {
   flag.value = false;
 };
 
 const submitForm = () => {
   flag.value = false;
+  switch (timePickerName.value) {
+    case showTimeMsg.HourlyPeak:
+      hourlyPeakFunc();
+      break;
+    case showTimeMsg.WaybillTrend:
+      waybillTrendFunc();
+      break;
+    case showTimeMsg.NodePeak:
+      nodePeakFunc();
+      break;
+    case showTimeMsg.AirlineTraffic:
+      airlineTrafficFunc();
+      break;
+    default:
+      break;
+  }
 };
 
-const showDatePicker = () => {
+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) => {
+  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;
+  newObj.series[0].data = stockNums;
+  newObj.series[1].data = weights;
+  return newObj;
+};
+
+//获取小时峰值分布
+const hourlyPeakFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscJgHourlyPeakId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+};
+
+//运单趋势分析
+const waybillTrendFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscJgWaybillTrendId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  waybillTrendObj.value = pubFunc(listValues, optionLeft);
+};
+
+//节点峰值
+const nodePeakFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscJgNodePeakId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  const newObj = _.cloneDeep(hourPeak.option);
+  const arr = sortClass(listValues);
+  const [title, series, singleAxis] = [<any>[], <any>[], <any>[]];
+  arr.forEach((item, index) => {
+    const msg: any = [];
+    const datas: any = [];
+    item.map((p, i) => {
+      msg.push(p.stockNum);
+      datas.push(i + 1);
+    });
+    title.push({
+      top: ((index + 0.5) * 100) / 4 - 3 + "%",
+      text: item[0].jobName,
+      textStyle: {
+        fontSize: 12,
+        fontWeight: "normal",
+        color: "#698dc3",
+      },
+    });
+    series.push({
+      singleAxisIndex: index,
+      coordinateSystem: "singleAxis",
+      type: "scatter",
+      data: msg,
+    });
+    singleAxis.push({
+      type: "category",
+      data: datas,
+      top: ((index + 0.5) * 100) / 4 - 3 + "%",
+      height: 100 / 4 - 5 + "%",
+      left: "12%",
+      right: "1%",
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+    });
+  });
+  newObj.series = series;
+  newObj.singleAxis = singleAxis;
+  newObj.title = title;
+  nodePeakObj.value = newObj;
+};
+
+//航班数&运单数
+const numbersFunc = async () => {
+  const listValues = (await getPublicData(
+    DATACONTENT_ID.jscJgNumbersId,
+    []
+  )) as any;
+  const { flightNum, stockNum } = listValues[0];
+  flightNums.value = flightNum;
+  stockNums.value = stockNum;
+};
+
+//航司运量
+const airlineTrafficFunc = async () => {
+  const listValues = (await getPublicData(
+    DATACONTENT_ID.jscJgAirlineTrafficId,
+    [form.value.startDate, form.value.endDate]
+  )) as any;
+  listValues.forEach((item) => {
+    item.jobTime = item["IACACode"];
+  });
+  airlineTrafficObj.value = pubFunc(
+    listValues,
+    airCompaneBaggage.option.baseOption
+  );
+};
+
+onMounted(() => {
+  hourlyPeakFunc();
+  waybillTrendFunc();
+  nodePeakFunc();
+  numbersFunc();
+  airlineTrafficFunc();
+});
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/indexOut.vue

@@ -9,7 +9,10 @@
               <div class="dashboard-content-top-left-item-top-title">
                 小时峰值分布
               </div>
-              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-left-item-top-time"
+                @click="showDatePicker(showTimeMsg.HourlyPeak)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -19,7 +22,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww1" :option="optionLeft" />
+              <Echarts id="ww1" :option="hourlyPeakObj" />
             </div>
           </div>
           <div class="dashboard-content-top-left-item">
@@ -27,7 +30,10 @@
               <div class="dashboard-content-top-left-item-top-title">
                 运单趋势分析
               </div>
-              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-left-item-top-time"
+                @click="showDatePicker(showTimeMsg.WaybillTrend)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -37,7 +43,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww12" :option="optionLeft" />
+              <Echarts id="ww12" :option="waybillTrendObj" />
             </div>
           </div>
         </div>
@@ -47,21 +53,12 @@
           <div class="dashboard-content-top-center-bottom">
             <div class="dashboard-content-top-center-bottom-box1">
               <div class="dashboard-content-top-center-bottom-box1-title">
-                航班数
-              </div>
-              <div v-for="(item,index) in capArr" :key="index" class="dashboard-content-top-center-bottom-box1-info">
-                <div>{{item.cname}}：{{item.cvalue}}</div>
-                <div>{{item.dname}}：{{item.dvalue}}</div>
+                航班数：{{ flightNums }}
               </div>
             </div>
             <div class="dashboard-content-top-center-bottom-box2">
               <div class="dashboard-content-top-center-bottom-box2-title">
-                运单数
-              </div>
-              <div v-for="(item,index) in capData" :key="index" class="dashboard-content-top-center-bottom-box2-info">
-                <div>{{item.cname}}：{{item.cvalue}}</div>
-                <div>{{item.dname}}：{{item.dvalue}}</div>
-                <div>{{item.ename}}：{{item.evalue}}</div>
+                运单数：{{ stockNums }}
               </div>
             </div>
             <EchartsMap id="ww2" />
@@ -73,7 +70,10 @@
               <div class="dashboard-content-top-right-item-top-title">
                 航班预警报警分析
               </div>
-              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-right-item-top-time"
+                @click="showDatePicker()"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -91,7 +91,10 @@
               <div class="dashboard-content-top-right-item-top-title">
                 航司运量统计
               </div>
-              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+              <div
+                class="dashboard-content-top-right-item-top-time"
+                @click="showDatePicker(showTimeMsg.AirlineTraffic)"
+              >
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -101,7 +104,7 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww33" :option="airCompaneBaggage.option" />
+              <Echarts id="ww33" :option="airlineTrafficObj" />
             </div>
           </div>
         </div>
@@ -112,7 +115,10 @@
             <div class="dashboard-content-bottom-left-top-title">
               节点峰值分布
             </div>
-            <div class="dashboard-content-bottom-left-top-time" @click="showDatePicker">
+            <div
+              class="dashboard-content-bottom-left-top-time"
+              @click="showDatePicker(showTimeMsg.NodePeak)"
+            >
               <el-icon color="#ffffff" size="18">
                 <Calendar />
               </el-icon>
@@ -122,7 +128,7 @@
             </div>
           </div>
           <div class="dashboard-content-bottom-left-bottom">
-            <Echarts id="ww4" :option="hourPeak.option" />
+            <Echarts id="ww4" :option="nodePeakObj" />
           </div>
         </div>
         <div class="dashboard-content-bottom-center">
@@ -130,7 +136,10 @@
             <div class="dashboard-content-bottom-center-top-title">
               节点效率分析
             </div>
-            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker">
+            <div
+              class="dashboard-content-bottom-center-top-time"
+              @click="showDatePicker()"
+            >
               <el-icon color="#ffffff" size="18">
                 <Calendar />
               </el-icon>
@@ -158,10 +167,26 @@
     <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
       <el-form :model="form" label-width="120px">
         <el-form-item label="开始日期">
-          <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
+          <el-date-picker
+            :disabled-date="disabledStartDate"
+            v-model="form.startDate"
+            type="date"
+            placeholder="请选择开始日期"
+            size="default"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+          />
         </el-form-item>
         <el-form-item label="结束日期">
-          <el-date-picker :disabled-date="disabledEndDate" v-model="form.endDate" type="date" placeholder="请选择结束日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+          <el-date-picker
+            :disabled-date="disabledEndDate"
+            v-model="form.endDate"
+            type="date"
+            placeholder="请选择结束日期"
+            size="default"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+          />
         </el-form-item>
       </el-form>
     </Dialog>
@@ -169,13 +194,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
 import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
 import ComHead from "./components/comHead.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
-import { usePublic } from "./hooks/usePublic";
+import { usePublic, showTimeMsg } from "./hooks/usePublic";
+import { parseTime } from "@/utils/validate";
+import * as _ from "lodash";
 const {
   optionLeft,
   airlineAbnormalBaggage,
@@ -183,37 +210,195 @@ const {
   airStutas,
   nodeEfficiency,
   hourPeak,
-  hkArr,
-  hkData,
+  getPublicData,
 } = usePublic();
-const capArr = ref(hkArr);
-const capData = ref(hkData);
+const timePickerName = ref<number>(0);
+const flag = ref<boolean>(false);
+const hourlyPeakObj = ref<any>({});
+const waybillTrendObj = ref<any>({});
+const nodePeakObj = ref<any>({});
+const airlineTrafficObj = ref<any>({});
+const flightNums = ref<number>(0);
+const stockNums = ref<number>(0);
 const form = ref({
-  startDate: Date.now(),
-  endDate: Date.now(),
+  startDate: parseTime(Date.now(), "{y}-{m}-{d}"),
+  endDate: parseTime(Date.now(), "{y}-{m}-{d}"),
 });
 
 const disabledStartDate = (time: Date) => {
-  let data = new Date(form.value.endDate);
+  const timer: any = form.value.endDate;
+  const data = new Date(timer);
   return time.getTime() > data.getTime();
 };
 const disabledEndDate = (time: Date) => {
-  let data = new Date(form.value.startDate);
+  const timer: any = form.value.startDate;
+  let data = new Date(timer);
   return data.getTime() > time.getTime();
 };
-
-const flag = ref(false);
 const resetForm = () => {
   flag.value = false;
 };
 
 const submitForm = () => {
   flag.value = false;
+  switch (timePickerName.value) {
+    case showTimeMsg.HourlyPeak:
+      hourlyPeakFunc();
+      break;
+    case showTimeMsg.WaybillTrend:
+      waybillTrendFunc();
+      break;
+    case showTimeMsg.NodePeak:
+      nodePeakFunc();
+      break;
+    case showTimeMsg.AirlineTraffic:
+      airlineTrafficFunc();
+      break;
+    default:
+      break;
+  }
 };
 
-const showDatePicker = () => {
+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) => {
+  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;
+  newObj.series[0].data = stockNums;
+  newObj.series[1].data = weights;
+  return newObj;
+};
+
+//获取小时峰值分布
+const hourlyPeakFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGjHourlyPeakId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+};
+
+//运单趋势分析
+const waybillTrendFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGjWaybillTrendId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  waybillTrendObj.value = pubFunc(listValues, optionLeft);
+};
+
+//节点峰值
+const nodePeakFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGjNodePeakId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  const newObj = _.cloneDeep(hourPeak.option);
+  const arr = sortClass(listValues);
+  const [title, series, singleAxis] = [<any>[], <any>[], <any>[]];
+  arr.forEach((item, index) => {
+    const msg: any = [];
+    const datas: any = [];
+    item.map((p, i) => {
+      msg.push(p.stockNum);
+      datas.push(i + 1);
+    });
+    title.push({
+      top: ((index + 0.5) * 100) / 4 - 3 + "%",
+      text: item[0].jobName,
+      textStyle: {
+        fontSize: 12,
+        fontWeight: "normal",
+        color: "#698dc3",
+      },
+    });
+    series.push({
+      singleAxisIndex: index,
+      coordinateSystem: "singleAxis",
+      type: "scatter",
+      data: msg,
+    });
+    singleAxis.push({
+      type: "category",
+      data: datas,
+      top: ((index + 0.5) * 100) / 4 - 3 + "%",
+      height: 100 / 4 - 5 + "%",
+      left: "12%",
+      right: "1%",
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+    });
+  });
+  newObj.series = series;
+  newObj.singleAxis = singleAxis;
+  newObj.title = title;
+  nodePeakObj.value = newObj;
+};
+
+//航班数&运单数
+const numbersFunc = async () => {
+  const listValues = (await getPublicData(
+    DATACONTENT_ID.jscGjNumbersId,
+    []
+  )) as any;
+  const { flightNum, stockNum } = listValues[0];
+  flightNums.value = flightNum;
+  stockNums.value = stockNum;
+};
+
+//航司运量
+const airlineTrafficFunc = async () => {
+  const listValues = (await getPublicData(
+    DATACONTENT_ID.jscGjAirlineTrafficId,
+    [form.value.startDate, form.value.endDate]
+  )) as any;
+  listValues.forEach((item) => {
+    item.jobTime = item["IACACode"];
+  });
+  airlineTrafficObj.value = pubFunc(
+    listValues,
+    airCompaneBaggage.option.baseOption
+  );
+};
+
+onMounted(() => {
+  hourlyPeakFunc();
+  waybillTrendFunc();
+  nodePeakFunc();
+  numbersFunc();
+  airlineTrafficFunc();
+});
 </script>
 
 <style lang="scss" scoped>