国内出港

public/config.js

@@ -4,12 +4,19 @@ var LOOP_INTERVAL = {
   flight: 15 * 1000,
   waybill: 15 * 1000,
   goods: 15 * 1000,
-}
+};
 
 var DATACONTENT_ID = {
   /***-----登录------***/
   loginId: 36, //登录-获取权限-id
 
+  /***-----驾驶舱------***/
+  jscHourlyPeakId: 1803534, //国内出港-小时峰值分布-id
+  jscWaybillTrendId: 1803535, //国内出港-运单趋势分析-id
+  jscNodePeakId: 1803536, //国内出港-节点峰值-id
+  jscNumbersId: 1803537, //国内出港-航班数&运单数-id
+  jscAirlineTrafficId: 1803538, //国内出港-航司运量-id
+
   /***-----权限管理------***/
   authTreeId: 40, //权限管理-权限树
   authTreeNewId: 92, //权限管理-权限树
@@ -234,7 +241,7 @@ var DATACONTENT_ID = {
   nodeExportAirline: 1805, // 节点统计导出-航线
   nodeExportAirport: 1805, // 节点统计导出-航站
   nodeAxisDesc: 90, // 节点统计指示器名称解释
-}
+};
 
 var SERVICE_ID = {
   /***-----账号管理------***/
@@ -269,4 +276,4 @@ var SERVICE_ID = {
 
   /***-----离港管理------***/
   departureScId: 8011, //发送报警预警日志信息
-}
+};

src/components/Echarts/commonChartsBar.vue

@@ -7,66 +7,65 @@
  * @FilePath: \vue-admin-template-master\src\layout\components\Echarts\commonChartsBar.vue
 -->
 <template>
-  <div style="height: 100%;width: 100%;position: absolute;left: 0;top: 0;" class="ChartsBar" :id="id"></div>
+  <div
+    style="height: 100%; width: 100%; position: absolute; left: 0; top: 0"
+    class="ChartsBar"
+    :id="id"
+  ></div>
 </template>
 
 <script>
-import { markRaw } from 'vue'
+import { markRaw } from "vue";
 import * as echarts from "echarts";
-import * as _ from 'lodash'
+import * as _ from "lodash";
 // 柱状图初始数据
-import ChartsBar from '../mixin/commonChartsBar'
 export default {
-  name: 'ChartsBar',
+  name: "ChartsBar",
   props: {
     // 柱状图生成所需id
     id: {
       type: String,
-      default: ''
+      default: "",
     },
     // 柱状图额外的数据
     option: {
       type: Object,
-      default: () => { }
-    }
+      default: () => {},
+    },
   },
-  mixins: [ChartsBar],
-  data () {
+  data() {
     return {
       myChart: null, //柱状图实例
-      desc: 300 // 防抖时间
-    }
+      desc: 300, // 防抖时间
+    };
   },
-  mounted () {
-    // 初始数据和额外的配置数据耦合
-    const objData = _.merge(this.options.baseOption, this.option)
+  mounted() {
     // 柱状图dom
-    const chartDom = document.getElementById(this.id)
+    const chartDom = document.getElementById(this.id);
     // 柱状图初始化
-    this.myChart = markRaw(echarts.init(chartDom))
+    this.myChart = markRaw(echarts.init(chartDom));
     // 生成柱状图
-    this.myChart.setOption(objData)
+    this.myChart.setOption(_.cloneDeep(this.option));
     // 监听页面缩放 防止dom重复渲染
-    window.addEventListener('resize', _.debounce(this.handle, this.desc))
+    window.addEventListener("resize", _.debounce(this.handle, this.desc));
   },
   watch: {
     // 监听数据变化，重绘折线图
     option: {
       deep: true,
-      handler (newVal) {
-        const objData = _.merge(this.options, newVal)
-        const chartDom = document.getElementById(this.id)
+      handler(newVal) {
+        const chartDom = document.getElementById(this.id);
         // 先移除之前的实例，保证重绘的流畅性
-        chartDom.removeAttribute('_echarts_instance_')
-        this.myChart = markRaw(echarts.init(chartDom))
-        this.myChart.setOption(objData)
-      }
-    }
+        chartDom.removeAttribute("_echarts_instance_");
+        this.myChart = markRaw(echarts.init(chartDom));
+        this.myChart.setOption(_.cloneDeep(newVal));
+      },
+    },
   },
-  destroyed () {
+  destroyed() {
     // 销毁实例和移除监听
-    this.myChart.dispose()
-    window.removeEventListener('resize', this.handle)
+    this.myChart.dispose();
+    window.removeEventListener("resize", this.handle);
   },
   methods: {
     /**
@@ -74,10 +73,9 @@ export default {
      * @param {*}
      * @return {*}
      */
-    handle () {
-      this.myChart.resize()
-    }
-  }
-}
+    handle() {
+      this.myChart.resize();
+    },
+  },
+};
 </script>
-

src/components/mixin/commonChartsBar.js

@@ -7,82 +7,82 @@
  * @FilePath: \vue-admin-template-master\src\layout\mixin\commonChartsLine.js
  */
 export default {
-  data () {
+  data() {
     return {
       options: {
         // echarts4要用timeline就要把通用属性写到baseOption里
         baseOption: {
           textStyle: {
-            color: '#698dc3'
+            color: "#698dc3",
           },
           title: {
-            top: '4%',
-            left: '5%',
+            top: "4%",
+            left: "5%",
             textStyle: {
-              color: '#4bb4dd'
-            }
+              color: "#4bb4dd",
+            },
           },
           legend: {
-            top: '4%',
-            right: '5%',
+            top: "4%",
+            right: "5%",
             textStyle: {
-              color: '#698dc3'
-            }
+              color: "#698dc3",
+            },
           },
           tooltip: {
-            trigger: 'axis',
+            trigger: "axis",
             axisPointer: {
-              type: 'shadow'
-            }
+              type: "shadow",
+            },
           },
           grid: {
-            left: '5%',
-            right: '5%',
-            bottom: '5%',
-            top: '25%',
-            containLabel: true
+            left: "5%",
+            right: "5%",
+            bottom: "5%",
+            top: "25%",
+            containLabel: true,
           },
           xAxis: {
-            type: 'category',
+            type: "category",
             axisTick: {
-              show: false
+              show: false,
             },
             axisLine: {
               show: false,
               lineStyle: {
-                color: '#698dc3'
-              }
+                color: "#698dc3",
+              },
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#698dc3'
-              }
+                type: "dashed",
+                color: "#698dc3",
+              },
             },
             axisLabel: {
-              color: '#698dc3'
-            }
+              color: "#698dc3",
+            },
           },
           yAxis: {
-            type: 'value',
+            type: "value",
             axisLine: {
               show: false,
               lineStyle: {
-                color: '#698dc3'
-              }
+                color: "#698dc3",
+              },
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: '#698dc3'
-              }
+                type: "dashed",
+                color: "#698dc3",
+              },
             },
             axisLabel: {
-              color: '#698dc3'
-            }
+              color: "#698dc3",
+            },
           },
-        }
-      }
-    }
-  }
-}
+        },
+      },
+    };
+  },
+};

src/views/dashboard/components/comHead.vue

@@ -2,7 +2,13 @@
   <div class="dashboard-head flex">
     <!-- <div class="dashboard-head-title">{{title}}</div> -->
     <div class="dashboard-head-tabs flex-wrap">
-      <div class="dashboard-head-tabs-list" :class="tabsIndex == index ? 'active' : ''" @click="tabClick(item, index)" v-for="(item, index) in tabs" :key="index">
+      <div
+        class="dashboard-head-tabs-list"
+        :class="tabsIndex == index ? 'active' : ''"
+        @click="tabClick(item, index)"
+        v-for="(item, index) in tabs"
+        :key="index"
+      >
         {{ item.label }}
       </div>
     </div>
@@ -16,7 +22,7 @@ const router = useRouter();
 const props = defineProps({
   tabsIndex: {
     type: Number,
-    default: 0,
+    default: 1,
   },
 });
 const tabs = [

src/views/dashboard/css/index.scss

@@ -134,7 +134,6 @@
           &-box1 {
             z-index: 10;
             width: 205px;
-            height: 120px;
             border: 2px solid #468fc3;
             position: absolute;
             left: 50px;
@@ -160,7 +159,6 @@
           &-box2 {
             z-index: 10;
             width: 284px;
-            height: 120px;
             border: 2px solid #468fc3;
             position: absolute;
             right: 60px;

src/views/dashboard/hooks/usePublic.ts

@@ -1,94 +1,108 @@
+import { Query } from "@/api/webApi";
+import { CommonData } from "~/common";
+import * as _ from "lodash";
+
+export enum showTimeMsg {
+  HourlyPeak, //小时峰值
+  WaybillTrend, //运单趋势
+  NodePeak, //节点峰值
+  AirlineTraffic, //航司运量
+}
+
 export function usePublic() {
   const optionLeft = {
     tooltip: {
-      trigger: 'axis',
+      trigger: "axis",
     },
     legend: {
       show: true,
       top: 0,
-      left: '30%',
-      icon: 'roundRect',
+      left: "30%",
+      icon: "roundRect",
+      textStyle: {
+        color: "#698dc3",
+      },
     },
     grid: {
-      left: '0%',
-      right: '5%',
-      bottom: '0%',
-      top: '15%',
+      left: "0%",
+      right: "5%",
+      bottom: "0%",
+      top: "15%",
       containLabel: true,
     },
-    color: ['#F5BB3D', '#73D970', '#6A9DD9'],
+    color: ["#F5BB3D", "#73D970", "#6A9DD9"],
     xAxis: {
-      type: 'category',
+      type: "category",
       boundaryGap: true,
       data: [
-        '0:00',
-        '2:00',
-        '4:00',
-        '6:00',
-        '8:00',
-        '10:00',
-        '12:00',
-        '14:00',
-        '16:00',
-        '18:00',
-        '20:00',
-        '22:00',
+        "0:00",
+        "2:00",
+        "4:00",
+        "6:00",
+        "8:00",
+        "10:00",
+        "12:00",
+        "14:00",
+        "16:00",
+        "18:00",
+        "20:00",
+        "22:00",
       ],
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#8897BC',
+          color: "#8897BC",
         },
       },
       axisTick: {
         show: false,
       },
       axisLabel: {
-        color: '#8897BC',
+        color: "#8897BC",
       },
     },
     yAxis: [
       {
-        type: 'value',
+        type: "value",
         axisLabel: {
-          color: '#8897BC',
+          color: "#8897BC",
           formatter: function (item) {
-            return item / 10000 + '万'
+            return item / 10000 + "万";
           },
         },
         splitLine: {
           lineStyle: {
-            type: 'dashed',
-            color: 'rgba(196,194,225, 0.54)',
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
           },
         },
-        name: '单',
+        name: "单",
       },
       {
-        type: 'value',
+        type: "value",
         axisLabel: {
-          color: '#8897BC',
+          color: "#8897BC",
         },
         splitLine: {
           lineStyle: {
-            type: 'dashed',
-            color: 'rgba(196,194,225, 0.54)',
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
           },
         },
-        name: '吨',
+        name: "吨",
       },
     ],
     series: [
       {
-        name: '运单/单',
-        type: 'line',
-        symbol: 'none',
-        key: 'bagsnum',
+        name: "运单/单",
+        type: "line",
+        symbol: "none",
+        key: "bagsnum",
         yAxisIndex: 0,
         data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230],
         areaStyle: {
           color: {
-            type: 'linear',
+            type: "linear",
             x: 0,
             y: 0,
             x2: 0,
@@ -96,11 +110,11 @@ export function usePublic() {
             colorStops: [
               {
                 offset: 0,
-                color: 'rgba(125,72,255,0.5)',
+                color: "rgba(125,72,255,0.5)",
               },
               {
                 offset: 1,
-                color: 'rgba(0,180,255,0.01)',
+                color: "rgba(0,180,255,0.01)",
               },
             ],
             global: false,
@@ -108,15 +122,15 @@ export function usePublic() {
         },
       },
       {
-        name: '重量/吨',
-        type: 'line',
-        symbol: 'none',
+        name: "重量/吨",
+        type: "line",
+        symbol: "none",
         yAxisIndex: 1,
-        key: 'passengers',
+        key: "passengers",
         data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
         areaStyle: {
           color: {
-            type: 'linear',
+            type: "linear",
             x: 0,
             y: 0,
             x2: 0,
@@ -124,11 +138,11 @@ export function usePublic() {
             colorStops: [
               {
                 offset: 0,
-                color: 'rgba(125,72,255,0.5)',
+                color: "rgba(125,72,255,0.5)",
               },
               {
                 offset: 1,
-                color: 'rgba(0,180,255,0.01)',
+                color: "rgba(0,180,255,0.01)",
               },
             ],
             global: false,
@@ -136,161 +150,161 @@ export function usePublic() {
         },
       },
     ],
-  }
+  };
   const airlineAbnormalBaggage = {
-    component: 'commonChartsBar',
+    component: "commonChartsBar",
     option: {
       baseOption: {
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           valueFormatter: function (value) {
-            return value + '单'
+            return value + "单";
           },
         },
         legend: {
-          data: ['报警', '预警'],
-          right: '20%',
+          data: ["报警", "预警"],
+          right: "20%",
           textStyle: {
-            color: '#8897BC',
+            color: "#8897BC",
           },
           // top:"-10"
         },
-        color: ['#EC3B71', '#E5B35C'],
+        color: ["#EC3B71", "#E5B35C"],
         grid: {
-          bottom: '10%',
-          left: '5%',
-          right: '1%',
-          top: '15%',
+          bottom: "10%",
+          left: "5%",
+          right: "1%",
+          top: "15%",
         },
         xAxis: {
-          data: ['卸机', '机下交接', '货站交接', '提取'],
+          data: ["卸机", "机下交接", "货站交接", "提取"],
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#8897BC',
+              color: "#8897BC",
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: '#8897BC',
+            color: "#8897BC",
           },
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           axisLabel: {
-            color: '#8897BC',
+            color: "#8897BC",
           },
           splitLine: {
             lineStyle: {
-              type: 'dashed',
-              color: 'rgba(196,194,225, 0.54)',
+              type: "dashed",
+              color: "rgba(196,194,225, 0.54)",
             },
           },
-          name: '单',
+          name: "单",
         },
         series: [
           {
-            name: '报警',
-            type: 'bar',
+            name: "报警",
+            type: "bar",
             data: [11, 16, 4, 6],
           },
           {
-            name: '预警',
-            type: 'bar',
+            name: "预警",
+            type: "bar",
             data: [11, 15, 17, 4],
           },
         ],
       },
     },
-  }
+  };
   const airCompaneBaggage = {
-    component: 'commonChartsBar',
+    component: "commonChartsBar",
     option: {
       baseOption: {
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
         },
         legend: {
-          data: ['运单/单', '重量/吨'],
-          right: '20%',
+          data: ["运单/单", "重量/吨"],
+          right: "20%",
           textStyle: {
-            color: '#8897BC',
+            color: "#8897BC",
           },
         },
-        color: ['#51DEE9', '#4C88E1'],
+        color: ["#51DEE9", "#4C88E1"],
         grid: {
-          bottom: '10%',
-          left: '13%',
-          right: '8%',
-          top: '15%',
+          bottom: "10%",
+          left: "13%",
+          right: "8%",
+          top: "15%",
         },
         xAxis: {
-          data: ['国航', '南航', '深航', '东航', '海航', '国泰', '川航'],
+          data: ["国航", "南航", "深航", "东航", "海航", "国泰", "川航"],
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#8897BC',
+              color: "#8897BC",
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: '#8897BC',
+            color: "#8897BC",
           },
         },
         yAxis: [
           {
-            type: 'value',
+            type: "value",
             axisLabel: {
-              color: '#8897BC',
+              color: "#8897BC",
               formatter: function (item) {
-                return item / 10000 + '万'
+                return item / 10000 + "万";
               },
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: 'rgba(196,194,225, 0.54)',
+                type: "dashed",
+                color: "rgba(196,194,225, 0.54)",
               },
             },
-            name: '单',
+            name: "单",
           },
           {
-            type: 'value',
+            type: "value",
             axisLabel: {
-              color: '#8897BC',
+              color: "#8897BC",
             },
             splitLine: {
               lineStyle: {
-                type: 'dashed',
-                color: 'rgba(196,194,225, 0.54)',
+                type: "dashed",
+                color: "rgba(196,194,225, 0.54)",
               },
             },
-            name: '吨',
+            name: "吨",
           },
         ],
         series: [
           {
-            name: '运单/单',
-            type: 'bar',
+            name: "运单/单",
+            type: "bar",
             data: [12, 10, 15, 11, 16, 4, 6],
             yAxisIndex: 0,
           },
           {
-            name: '重量/吨',
-            type: 'bar',
+            name: "重量/吨",
+            type: "bar",
             data: [11, 15, 17, 8, 1, 4, 6],
             yAxisIndex: 1,
           },
         ],
       },
     },
-  }
+  };
   const airStutas = {
-    component: 'commonChartsBar',
+    component: "commonChartsBar",
     option: {
       baseOption: {
         // legend: {
@@ -302,103 +316,103 @@ export function usePublic() {
         //   // top:"-10"
         // },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           valueFormatter: function (value) {
-            return value + '单'
+            return value + "单";
           },
         },
-        color: ['#51DEE9', '#4C88E1'],
+        color: ["#51DEE9", "#4C88E1"],
         grid: {
-          bottom: '10%',
-          left: '5%',
-          right: '1%',
-          top: '15%',
+          bottom: "10%",
+          left: "5%",
+          right: "1%",
+          top: "15%",
         },
         xAxis: {
-          data: ['机下交接', '货站交接', '理货'],
+          data: ["机下交接", "货站交接", "理货"],
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#8897BC',
+              color: "#8897BC",
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: '#8897BC',
+            color: "#8897BC",
           },
         },
         yAxis: {
-          type: 'value',
+          type: "value",
           axisLabel: {
-            color: '#8897BC',
+            color: "#8897BC",
           },
           splitLine: {
             lineStyle: {
-              type: 'dashed',
-              color: 'rgba(196,194,225, 0.54)',
+              type: "dashed",
+              color: "rgba(196,194,225, 0.54)",
             },
           },
-          name: '单',
+          name: "单",
         },
         series: [
           {
-            type: 'bar',
+            type: "bar",
             data: [12, 10, 15],
           },
         ],
       },
     },
-  }
+  };
   const nodeEfficiency = {
-    component: 'commonChartsLine',
+    component: "commonChartsLine",
     option: {
       tooltip: {
-        trigger: 'axis',
+        trigger: "axis",
         valueFormatter: function (value) {
-          return value + '秒'
+          return value + "秒";
         },
       },
       legend: {
-        top: '1%',
-        right: '5%',
-        data: ['平均时间', '最长时间', '最短时间'],
+        top: "1%",
+        right: "5%",
+        data: ["平均时间", "最长时间", "最短时间"],
         itemWidth: 25,
         itemHeight: 14,
       },
       grid: {
-        bottom: '10%',
-        left: '1%',
-        right: '1%',
-        top: '15%',
+        bottom: "10%",
+        left: "1%",
+        right: "1%",
+        top: "15%",
       },
-      color: ['#3ca4fc', '#f1ce7c', '#36ccba'],
+      color: ["#3ca4fc", "#f1ce7c", "#36ccba"],
       xAxis: {
         axisLabel: {
           interval: 0,
         },
-        data: ['卸机', '机下交接', '货站交接', '提取'],
+        data: ["卸机", "机下交接", "货站交接", "提取"],
       },
       yAxis: {
-        type: 'value',
+        type: "value",
         axisLabel: {
-          color: '#8897BC',
+          color: "#8897BC",
         },
         splitLine: {
           lineStyle: {
-            type: 'dashed',
-            color: 'rgba(196,194,225, 0.54)',
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
           },
         },
-        name: '单位：秒',
+        name: "单位：秒",
       },
       series: [
         {
-          name: '平均时间',
-          type: 'line',
+          name: "平均时间",
+          type: "line",
           smooth: true,
-          stack: '',
+          stack: "",
           areaStyle: {
             opacity: 0,
           },
@@ -418,10 +432,10 @@ export function usePublic() {
           ],
         },
         {
-          name: '最长时间',
-          type: 'line',
+          name: "最长时间",
+          type: "line",
           smooth: true,
-          stack: '',
+          stack: "",
           areaStyle: {
             opacity: 0,
           },
@@ -441,10 +455,10 @@ export function usePublic() {
           ],
         },
         {
-          name: '最短时间',
-          type: 'line',
+          name: "最短时间",
+          type: "line",
           smooth: true,
-          stack: '',
+          stack: "",
           areaStyle: {
             opacity: 0,
           },
@@ -465,35 +479,35 @@ export function usePublic() {
         },
       ],
     },
-  }
-  const node = ['卸机', '机下交接', '货站交接', '提取']
+  };
+  const node = ["卸机", "机下交接", "货站交接", "提取"];
 
-  const hours = Array.from({ length: 24 }, (v, i) => i + 1)
+  const hours = Array.from({ length: 24 }, (v, i) => i + 1);
   const hourPeak = {
-    component: 'commonChartsScatter',
+    component: "commonChartsScatter",
     option: {
       tooltip: {
-        trigger: 'axis',
+        trigger: "axis",
         valueFormatter: function (value) {
-          return value + '单'
+          return value + "单";
         },
       },
       title: node.map((month, index) => ({
-        top: ((index + 0.5) * 100) / 4 - 3 + '%',
+        top: ((index + 0.5) * 100) / 4 - 3 + "%",
         text: month,
         textStyle: {
           fontSize: 12,
-          fontWeight: 'normal',
-          color: '#698dc3',
+          fontWeight: "normal",
+          color: "#698dc3",
         },
       })),
       singleAxis: node.map((month, index) => ({
-        type: 'category',
+        type: "category",
         data: hours,
-        top: ((index + 0.5) * 100) / 4 - 3 + '%',
-        height: 100 / 4 - 5 + '%',
-        left: '12%',
-        right: '1%',
+        top: ((index + 0.5) * 100) / 4 - 3 + "%",
+        height: 100 / 4 - 5 + "%",
+        left: "12%",
+        right: "1%",
         axisTick: {
           show: false,
         },
@@ -503,8 +517,8 @@ export function usePublic() {
       })),
       series: node.map((month, index) => ({
         singleAxisIndex: index,
-        coordinateSystem: 'singleAxis',
-        type: 'scatter',
+        coordinateSystem: "singleAxis",
+        type: "scatter",
         data: [
           3,
           6,
@@ -532,63 +546,30 @@ export function usePublic() {
           5,
         ],
         symbolSize: function (dataItem) {
-          return dataItem * 3
+          return dataItem * 3;
         },
       })),
     },
-  }
-  const hkArr = [
-    {
-      id: 1,
-      cname: '本年',
-      cvalue: '1000',
-      dname: '同期',
-      dvalue: '1100',
-    },
-    {
-      id: 2,
-      cname: '本年',
-      cvalue: '1000',
-      dname: '同期',
-      dvalue: '1100',
-    },
-    {
-      id: 3,
-      cname: '本年',
-      cvalue: '1000',
-      dname: '同期',
-      dvalue: '1100',
-    },
-  ]
-  const hkData = [
-    {
-      id: 1,
-      cname: '本年',
-      cvalue: '1000',
-      dname: '同期',
-      dvalue: '1100',
-      ename: '重量',
-      evalue: '1100',
-    },
-    {
-      id: 2,
-      cname: '本年',
-      cvalue: '1000',
-      dname: '同期',
-      dvalue: '1100',
-      ename: '重量',
-      evalue: '1100',
-    },
-    {
-      id: 3,
-      cname: '本年',
-      cvalue: '1000',
-      dname: '同期',
-      dvalue: '1100',
-      ename: '重量',
-      evalue: '1100',
-    },
-  ]
+  };
+  const getPublicData = async (id: number, times?: any[]) => {
+    try {
+      const {
+        code,
+        returnData: { listValues },
+        message,
+      } = await Query<CommonData>({
+        id,
+        dataContent: times,
+      });
+      if (Number(code) !== 0) {
+        throw new Error(message || "失败");
+      } else {
+        return listValues;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
   return {
     optionLeft,
     airlineAbnormalBaggage,
@@ -596,7 +577,6 @@ export function usePublic() {
     airStutas,
     nodeEfficiency,
     hourPeak,
-    hkArr,
-    hkData,
-  }
+    getPublicData,
+  };
 }

src/views/dashboard/indexHomeOut.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.jscHourlyPeakId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+};
+
+//运单趋势分析
+const waybillTrendFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscWaybillTrendId, [
+    form.value.startDate,
+    form.value.endDate,
+  ])) as any;
+  waybillTrendObj.value = pubFunc(listValues, optionLeft);
+};
+
+//节点峰值
+const nodePeakFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscNodePeakId, [
+    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.jscNumbersId,
+    []
+  )) as any;
+  const { flightNum, stockNum } = listValues[0];
+  flightNums.value = flightNum;
+  stockNums.value = stockNum;
+};
+
+//航司运量
+const airlineTrafficFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineTrafficId, [
+    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>