驾驶舱修改

package.json

@@ -41,6 +41,7 @@
     "tinymce": "4.9.11",
     "vue": "^3.2.37",
     "vue-router": "4.0.14",
+    "vue3-seamless-scroll": "^2.0.1",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

public/config.js

@@ -25,26 +25,34 @@ var DATACONTENT_ID = {
   jscNodePeakId: 1803536, //国内出港-节点峰值-id
   jscNumbersId: 1803537, //国内出港-航班数&运单数-id
   jscAirlineTrafficId: 1803538, //国内出港-航司运量-id
+  jscAirlineId: 1803602, //国内出港-航班动态统计-id
 
   jscGjHourlyPeakId: 1803539, //国际出港-小时峰值分布-id
   jscGjWaybillTrendId: 1803540, //国际出港-运单趋势分析-id
   jscGjNodePeakId: 1803541, //国际出港-节点峰值-id
   jscGjNumbersId: 1803542, //国际出港-航班数&运单数-id
   jscGjAirlineTrafficId: 1803543, //国际出港-航司运量-id
+  jscGjAirlineId: 1803604, //国际出港-航班动态统计-id
 
   jscCgHourlyPeakId: 1803544, //国内进港-小时峰值分布-id
   jscCgWaybillTrendId: 1803545, //国内进港-运单趋势分析-id
   jscCgNodePeakId: 1803546, //国内进港-节点峰值-id
   jscCgNumbersId: 1803547, //国内进港-航班数&运单数-id
   jscCgAirlineTrafficId: 1803548, //国内进港-航司运量-id
+  jscCgAirlineId: 1803606, //国内进港-航班动态统计-id
 
   jscJgHourlyPeakId: 1803549, //国际进港-小时峰值分布-id
   jscJgWaybillTrendId: 1803550, //国际进港-运单趋势分析-id
   jscJgNodePeakId: 1803551, //国际进港-节点峰值-id
   jscJgNumbersId: 1803552, //国际进港-航班数&运单数-id
   jscJgAirlineTrafficId: 1803553, //国际进港-航司运量-id
+  jscJgAirlineId: 1803608, //国际进港-航班动态统计-id
 
-  jscAirlineAbnormalId: 1803561, //航班预警报警分析
+  jscAirlineAbnormalId: 1803612, //驾驶舱-始发站/目的站统计分析-id
+  jscFlightDynamicsId: 1803611, //驾驶舱-驾驶舱-航班动态table-id
+
+  jscGgPullId: 1803609, //驾驶舱-国内离港-拉货统计分析-id
+  jscGjPullId: 1803610, //驾驶舱-国际离港-拉货统计分析-id
 
   /***-----权限管理------***/
   authTreeId: 40, //权限管理-权限树

src/utils/validate.ts

@@ -3,7 +3,7 @@
  * @returns {Boolean}
  */
 export function isExternal(path: string): boolean {
-  return /^(https?:|mailto:|tel:)/.test(path);
+  return /^(https?:|mailto:|tel:)/.test(path)
 }
 
 /**
@@ -11,8 +11,8 @@ export function isExternal(path: string): boolean {
  * @returns {Boolean}
  */
 export function validUsername(str: string): boolean {
-  const valid_map = ["admin", "editor"];
-  return valid_map.indexOf(str.trim()) >= 0;
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
 }
 
 /**
@@ -20,8 +20,8 @@ export function validUsername(str: string): boolean {
  * @returns {Boolean}
  */
 export function validURL(url: string): boolean {
-  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
-  return reg.test(url);
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
 }
 
 /**
@@ -29,8 +29,8 @@ export function validURL(url: string): boolean {
  * @returns {Boolean}
  */
 export function validLowerCase(str: string): boolean {
-  const reg = /^[a-z]+$/;
-  return reg.test(str);
+  const reg = /^[a-z]+$/
+  return reg.test(str)
 }
 
 /**
@@ -38,8 +38,8 @@ export function validLowerCase(str: string): boolean {
  * @returns {Boolean}
  */
 export function validUpperCase(str: string): boolean {
-  const reg = /^[A-Z]+$/;
-  return reg.test(str);
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
 }
 
 /**
@@ -47,8 +47,8 @@ export function validUpperCase(str: string): boolean {
  * @returns {Boolean}
  */
 export function validAlphabets(str: string): boolean {
-  const reg = /^[A-Za-z]+$/;
-  return reg.test(str);
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
 }
 
 /**
@@ -65,18 +65,23 @@ export function validAlphabets(str: string): boolean {
  * @returns {Boolean}
  */
 export function isString(str: any): boolean {
-  return typeof str === "string" || str instanceof String;
+  return typeof str === 'string' || str instanceof String
 }
 
 /**
  * @param {Array} arg
  * @returns {Boolean}
  */
-export function isArray(arg: string) {
-  if (typeof Array.isArray === "undefined") {
-    return Object.prototype.toString.call(arg) === "[object Array]";
+export function isValue(arg: []) {
+  if (Array.isArray(arg)) {
+    return arg.length
+  } else {
+    if (typeof arg === 'object') {
+      return Object.keys(arg).length
+    } else {
+      return false
+    }
   }
-  return Array.isArray(arg);
 }
 
 /**
@@ -87,28 +92,28 @@ export function isArray(arg: string) {
  */
 export function parseTime(time: any, cFormat: string) {
   if (arguments.length === 0 || !time) {
-    return null;
+    return null
   }
-  const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
-  let date;
-  if (typeof time === "object") {
-    date = time;
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
   } else {
-    if (typeof time === "string") {
+    if (typeof time === 'string') {
       if (/^[0-9]+$/.test(time)) {
         // support "1548221490638"
-        time = parseInt(time);
+        time = parseInt(time)
       } else {
         // support safari
         // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
-        time = time.replace(new RegExp(/-/gm), "/");
+        time = time.replace(new RegExp(/-/gm), '/')
       }
     }
 
-    if (typeof time === "number" && time.toString().length === 10) {
-      time = time * 1000;
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000
     }
-    date = new Date(time);
+    date = new Date(time)
   }
   const formatObj = {
     y: date.getFullYear(),
@@ -118,47 +123,47 @@ export function parseTime(time: any, cFormat: string) {
     i: date.getMinutes(),
     s: date.getSeconds(),
     a: date.getDay(),
-  };
+  }
   const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
-    const value = formatObj[key];
+    const value = formatObj[key]
     // Note: getDay() returns 0 on Sunday
-    if (key === "a") {
-      return ["日", "一", "二", "三", "四", "五", "六"][value];
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
     }
-    return value.toString().padStart(2, "0");
-  });
-  return time_str;
+    return value.toString().padStart(2, '0')
+  })
+  return time_str
 }
 
 export function translateDataToTreeAll(arr, parentKey, key) {
-  const map = {};
-  const result = [];
+  const map = {}
+  const result = []
   arr.forEach((element) => {
-    const id = element[key];
-    const pid = element[parentKey];
+    const id = element[key]
+    const pid = element[parentKey]
     if (map[id]) {
       map[id] = {
         ...element,
         children: map[id].children,
-      };
+      }
     } else {
       map[id] = {
         ...element,
         children: [],
-      };
+      }
     }
-    const item = map[id];
+    const item = map[id]
     if (pid <= 0) {
-      result.push(item);
+      result.push(item)
     } else {
       if (map[pid]) {
-        map[pid].children.push(item);
+        map[pid].children.push(item)
       } else {
         map[pid] = {
           children: [item],
-        };
+        }
       }
     }
-  });
-  return result;
+  })
+  return result
 }

src/views/dashboard/css/index.scss

@@ -37,7 +37,7 @@
       .active {
         color: #51dee9;
         &::after {
-          content: "";
+          content: '';
           position: absolute;
           bottom: 0;
           width: 80%;
@@ -59,17 +59,17 @@
     flex-direction: column;
     &-top {
       width: 100%;
-      height: 65%;
+      height: calc(100% - 20px);
       &-left,
       &-right {
         width: calc(30% - 20px);
         &-item {
           width: 100%;
-          height: calc(50% - 20px);
+          height: calc(33% - 20px);
           margin: 20px 0;
           display: flex;
           flex-direction: column;
-          background-image: url("../../assets/home/pic_border.png");
+          background-image: url('../../assets/home/pic_border.png');
           background-repeat: no-repeat;
           background-size: 100% 100%;
           padding: 13px;
@@ -111,8 +111,11 @@
           width: 100%;
           height: 32px;
           display: flex;
-          padding-top: 15px;
+          margin: 40px 0 20px 0;
           box-sizing: border-box;
+          padding: 18px 22px;
+          height: 110px;
+          border: 2px solid #468fc3;
           &-title {
             font-size: 16px;
             font-weight: bold;
@@ -120,64 +123,82 @@
             line-height: 1.8;
             margin-right: 10px;
           }
-          &-time {
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            cursor: pointer;
+          &-list {
+            flex: 1;
+            &-txt {
+              font-size: 20px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #75cee1;
+            }
+            &-num {
+              font-size: 32px;
+              font-family: DIN;
+              font-weight: bold;
+              color: #ffffff;
+              margin-top: 8px;
+            }
           }
         }
         &-bottom {
           width: 100%;
           flex: 1;
           position: relative;
-          &-box1 {
-            z-index: 10;
-            width: 205px;
-            border: 2px solid #468fc3;
-            position: absolute;
-            left: 50px;
-            display: flex;
-            flex-direction: column;
-            padding: 15px 0 15px 15px;
-            &-title {
-              font-size: 16px;
-              font-weight: bold;
-              color: #ffffff;
-              margin-bottom: 10px;
-            }
-            &-info {
-              font-size: 14px;
-              font-weight: 400;
-              color: #c0cbe4;
+          flex-direction: column;
+          box-sizing: border-box;
+          background-image: url('../../assets/home/biankuang.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          height: 100%;
+          overflow: hidden;
+          &-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: #75cee1;
+            line-height: 1.8;
+            margin-right: 10px;
+            margin-top: 28px;
+            padding: 0 13px;
+          }
+          &-content {
+            margin-top: 16px;
+            height: 100%;
+            overflow: hidden;
+            &-head {
+              height: 32px;
+              line-height: 28px;
+              border-top: 2px solid #468fc3;
+              border-bottom: 2px solid #468fc3;
               display: flex;
-              div {
-                margin-right: 10px;
+              flex-wrap: wrap;
+              &-list {
+                flex: 1;
+                text-align: center;
+                font-size: 14px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #75cee1;
               }
             }
-          }
-          &-box2 {
-            z-index: 10;
-            width: 284px;
-            border: 2px solid #468fc3;
-            position: absolute;
-            right: 60px;
-            display: flex;
-            flex-direction: column;
-            padding: 15px 0 15px 15px;
-            &-title {
-              font-size: 16px;
-              font-weight: bold;
-              color: #ffffff;
-              margin-bottom: 10px;
-            }
-            &-info {
-              font-size: 14px;
-              font-weight: 400;
-              color: #c0cbe4;
-              display: flex;
-              div {
-                margin-right: 10px;
+            &-bottom {
+              padding: 0 2px;
+              height: 100%;
+              overflow: hidden;
+              &-list {
+                display: flex;
+                flex-wrap: wrap;
+                line-height: 40px;
+                &-txt {
+                  flex: 1;
+                  text-align: center;
+                  font-size: 14px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+                &:nth-child(odd) {
+                  background-color: #253257;
+                }
               }
             }
           }
@@ -193,7 +214,7 @@
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
-        background-image: url("../../assets/home/pic_border.png");
+        background-image: url('../../assets/home/pic_border.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         padding: 13px;
@@ -235,7 +256,7 @@
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        background-image: url("../../assets/home/pic_border.png");
+        background-image: url('../../assets/home/pic_border.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
         background-position: center center;
@@ -269,7 +290,7 @@
       }
     }
     .pBox {
-      background-image: url("../../assets/home/pic_border.png");
+      background-image: url('../../assets/home/pic_border.png');
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }

src/views/dashboard/hooks/usePublic.ts

@@ -5,9 +5,10 @@ import * as _ from 'lodash'
 export enum showTimeMsg {
   HourlyPeak, //小时峰值
   WaybillTrend, //运单趋势
-  NodePeak, //节点峰值
-  AirlineTraffic, //航司运量
-  AirlineAbnormal, //航班预警报警
+  NodePeak, //始发站/目的站统计分析
+  AirlineTraffic, //航司统计
+  AirlineAbnormal, //航班统计
+  PickingStatistics, //拉货统计
 }
 
 export function usePublic() {
@@ -366,121 +367,7 @@ export function usePublic() {
       },
     },
   }
-  const nodeEfficiency = {
-    component: 'commonChartsLine',
-    option: {
-      tooltip: {
-        trigger: 'axis',
-        valueFormatter: function (value) {
-          return value + '秒'
-        },
-      },
-      legend: {
-        top: '1%',
-        right: '5%',
-        data: ['平均时间', '最长时间', '最短时间'],
-        itemWidth: 25,
-        itemHeight: 14,
-      },
-      grid: {
-        bottom: '10%',
-        left: '7%',
-        right: '1%',
-        top: '17%',
-      },
-      color: ['#3ca4fc', '#f1ce7c', '#36ccba'],
-      xAxis: {
-        axisLabel: {
-          interval: 0,
-        },
-        data: ['卸机', '机下交接', '货站交接', '提取'],
-      },
-      yAxis: {
-        type: 'value',
-        axisLabel: {
-          color: '#8897BC',
-        },
-        splitLine: {
-          lineStyle: {
-            type: 'dashed',
-            color: 'rgba(196,194,225, 0.54)',
-          },
-        },
-        name: '单位：秒',
-      },
-      series: [
-        {
-          name: '平均时间',
-          type: 'line',
-          smooth: true,
-          stack: '',
-          areaStyle: {
-            opacity: 0,
-          },
-          data: [
-            4016,
-            4652,
-            1570,
-            6334,
-            12052,
-            3115,
-            10604,
-            12733,
-            14533,
-            2464,
-            4168,
-            3844,
-          ],
-        },
-        {
-          name: '最长时间',
-          type: 'line',
-          smooth: true,
-          stack: '',
-          areaStyle: {
-            opacity: 0,
-          },
-          data: [
-            4558,
-            770,
-            11745,
-            2699,
-            11205,
-            6497,
-            1544,
-            1555,
-            4181,
-            447,
-            60,
-            9804,
-          ],
-        },
-        {
-          name: '最短时间',
-          type: 'line',
-          smooth: true,
-          stack: '',
-          areaStyle: {
-            opacity: 0,
-          },
-          data: [
-            14240,
-            3190,
-            1699,
-            14446,
-            11349,
-            11182,
-            14829,
-            11740,
-            2418,
-            4824,
-            9707,
-            8126,
-          ],
-        },
-      ],
-    },
-  }
+
   const node = ['卸机', '机下交接', '货站交接', '提取']
 
   const hours = Array.from({ length: 24 }, (v, i) => i + 1)
@@ -557,246 +444,26 @@ export function usePublic() {
       const {
         code,
         returnData: { listValues },
-        message,
       } = await Query<CommonData>({
         id,
         dataContent: times,
       })
       if (Number(code) !== 0) {
-        throw new Error(message || '失败')
+        return []
       } else {
         return listValues
       }
-    } catch (error) {
-      console.error(error)
-    }
-  }
-  const geoCoordMap = {
-    上海: [121.4648, 31.2891],
-    东莞: [113.8953, 22.901],
-    东营: [118.7073, 37.5513],
-    中山: [113.4229, 22.478],
-    临汾: [111.4783, 36.1615],
-    临沂: [118.3118, 35.2936],
-    丹东: [124.541, 40.4242],
-    丽水: [119.5642, 28.1854],
-    乌鲁木齐: [87.9236, 43.5883],
-    佛山: [112.8955, 23.1097],
-    保定: [115.0488, 39.0948],
-    兰州: [103.5901, 36.3043],
-    包头: [110.3467, 41.4899],
-    北京: [116.4551, 40.2539],
-    北海: [109.314, 21.6211],
-    南京: [118.8062, 31.9208],
-    南宁: [108.479, 23.1152],
-    南昌: [116.0046, 28.6633],
-    南通: [121.1023, 32.1625],
-    厦门: [118.1689, 24.6478],
-    台州: [121.1353, 28.6688],
-    合肥: [117.29, 32.0581],
-    呼和浩特: [111.4124, 40.4901],
-    咸阳: [108.4131, 34.8706],
-    哈尔滨: [127.9688, 45.368],
-    唐山: [118.4766, 39.6826],
-    嘉兴: [120.9155, 30.6354],
-    大同: [113.7854, 39.8035],
-    大连: [122.2229, 39.4409],
-    天津: [117.4219, 39.4189],
-    太原: [112.3352, 37.9413],
-    威海: [121.9482, 37.1393],
-    宁波: [121.5967, 29.6466],
-    宝鸡: [107.1826, 34.3433],
-    宿迁: [118.5535, 33.7775],
-    常州: [119.4543, 31.5582],
-    广州: [113.5107, 23.2196],
-    廊坊: [116.521, 39.0509],
-    延安: [109.1052, 36.4252],
-    张家口: [115.1477, 40.8527],
-    徐州: [117.5208, 34.3268],
-    德州: [116.6858, 37.2107],
-    惠州: [114.6204, 23.1647],
-    成都: [103.9526, 30.7617],
-    扬州: [119.4653, 32.8162],
-    承德: [117.5757, 41.4075],
-    拉萨: [91.1865, 30.1465],
-    无锡: [120.3442, 31.5527],
-    日照: [119.2786, 35.5023],
-    昆明: [102.9199, 25.4663],
-    杭州: [119.5313, 29.8773],
-    枣庄: [117.323, 34.8926],
-    柳州: [109.3799, 24.9774],
-    株洲: [113.5327, 27.0319],
-    武汉: [114.3896, 30.6628],
-    汕头: [117.1692, 23.3405],
-    江门: [112.6318, 22.1484],
-    沈阳: [123.1238, 42.1216],
-    沧州: [116.8286, 38.2104],
-    河源: [114.917, 23.9722],
-    泉州: [118.3228, 25.1147],
-    泰安: [117.0264, 36.0516],
-    泰州: [120.0586, 32.5525],
-    济南: [117.1582, 36.8701],
-    济宁: [116.8286, 35.3375],
-    海口: [110.3893, 19.8516],
-    淄博: [118.0371, 36.6064],
-    淮安: [118.927, 33.4039],
-    深圳: [114.5435, 22.5439],
-    清远: [112.9175, 24.3292],
-    温州: [120.498, 27.8119],
-    渭南: [109.7864, 35.0299],
-    湖州: [119.8608, 30.7782],
-    湘潭: [112.5439, 27.7075],
-    滨州: [117.8174, 37.4963],
-    潍坊: [119.0918, 36.524],
-    烟台: [120.7397, 37.5128],
-    玉溪: [101.9312, 23.8898],
-    珠海: [113.7305, 22.1155],
-    盐城: [120.2234, 33.5577],
-    盘锦: [121.9482, 41.0449],
-    石家庄: [114.4995, 38.1006],
-    福州: [119.4543, 25.9222],
-    秦皇岛: [119.2126, 40.0232],
-    绍兴: [120.564, 29.7565],
-    聊城: [115.9167, 36.4032],
-    肇庆: [112.1265, 23.5822],
-    舟山: [122.2559, 30.2234],
-    苏州: [120.6519, 31.3989],
-    莱芜: [117.6526, 36.2714],
-    菏泽: [115.6201, 35.2057],
-    营口: [122.4316, 40.4297],
-    葫芦岛: [120.1575, 40.578],
-    衡水: [115.8838, 37.7161],
-    衢州: [118.6853, 28.8666],
-    西宁: [101.4038, 36.8207],
-    西安: [109.1162, 34.2004],
-    贵阳: [106.6992, 26.7682],
-    连云港: [119.1248, 34.552],
-    邢台: [114.8071, 37.2821],
-    邯郸: [114.4775, 36.535],
-    郑州: [113.4668, 34.6234],
-    鄂尔多斯: [108.9734, 39.2487],
-    重庆: [107.7539, 30.1904],
-    金华: [120.0037, 29.1028],
-    铜川: [109.0393, 35.1947],
-    银川: [106.3586, 38.1775],
-    镇江: [119.4763, 31.9702],
-    长春: [125.8154, 44.2584],
-    长沙: [113.0823, 28.2568],
-    长治: [112.8625, 36.4746],
-    阳泉: [113.4778, 38.0951],
-    青岛: [120.4651, 36.3373],
-    韶关: [113.7964, 24.7028],
-  }
-  const convertData = (data) => {
-    const res: any = []
-    for (let i = 0; i < data.length; i++) {
-      const dataItem = data[i]
-      const fromCoord = geoCoordMap[dataItem[0].name]
-      const toCoord = geoCoordMap[dataItem[1].name]
-      if (fromCoord && toCoord) {
-        res.push({
-          fromName: dataItem[0].name,
-          toName: dataItem[1].name,
-          coords: [fromCoord, toCoord],
-          value: dataItem[1].value,
-        })
-      }
+    } catch (err) {
+      return []
     }
-    return res
-  }
-  const getMapData = (arr: any[]) => {
-    const series: any = []
-    const color = ['#a6c84c', '#ffa022', '#46bee9']
-    const planePath =
-      'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
-    arr.forEach(function (item: any, i) {
-      //console.log(item,i);
-      series.push(
-        {
-          name: item[0] + ' Top10',
-          type: 'lines',
-          zlevel: 1,
-          effect: {
-            show: true,
-            period: 6,
-            trailLength: 0.7,
-            color: '#fff',
-            symbolSize: 3,
-          },
-          lineStyle: {
-            normal: {
-              color: color[i],
-              width: 0,
-              curveness: 0.2,
-            },
-          },
-          data: convertData(item[1]),
-        },
-        {
-          name: item[0] + ' Top10',
-          type: 'lines',
-          zlevel: 2,
-          symbol: ['none', 'arrow'],
-          symbolSize: 10,
-          effect: {
-            show: true,
-            period: 6,
-            trailLength: 0,
-            symbol: planePath,
-            symbolSize: 15,
-          },
-          lineStyle: {
-            normal: {
-              color: color[i],
-              width: 1,
-              opacity: 0.6,
-              curveness: 0.2,
-            },
-          },
-          data: convertData(item[1]),
-        },
-        {
-          name: item[0] + ' Top10',
-          type: 'effectScatter',
-          coordinateSystem: 'geo',
-          zlevel: 2,
-          rippleEffect: {
-            brushType: 'stroke',
-          },
-          label: {
-            normal: {
-              show: true,
-              position: 'right',
-              formatter: '{b}',
-            },
-          },
-          symbolSize: function (val) {
-            return val[2] / 8
-          },
-          itemStyle: {
-            normal: {
-              color: color[i],
-            },
-          },
-          data: item[1].map(function (dataItem) {
-            return {
-              name: dataItem[1].name,
-              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
-            }
-          }),
-        }
-      )
-    })
-    return series
   }
+
   return {
     optionLeft,
     airlineAbnormalBaggage,
     airCompaneBaggage,
     airStutas,
-    nodeEfficiency,
     hourPeak,
     getPublicData,
-    getMapData,
   }
 }

src/views/dashboard/index.vue

@@ -40,29 +40,74 @@
               <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 class="dashboard-content-top-left-item-bottom">
+              <Echarts id="ww4" :option="nodePeakObj" />
+            </div>
+          </div>
         </div>
         <!-- 地图 -->
         <div class="dashboard-content-top-center">
-          <div class="dashboard-content-top-center-top"></div>
+          <div 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">{{ weight }}</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">{{ 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>
           <div class="dashboard-content-top-center-bottom">
-            <div class="dashboard-content-top-center-bottom-box1">
-              <div class="dashboard-content-top-center-bottom-box1-title">
-                航班数：{{ flightNums }}
+            <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>
-            <div class="dashboard-content-top-center-bottom-box2">
-              <div class="dashboard-content-top-center-bottom-box2-title">
-                运单数：{{ stockNums }}
+              <div class="dashboard-content-top-center-bottom-content-bottom">
+                <vue3-seamless-scroll :list="listData" :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.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>
-            <EchartsMap :option="mapOptions" id="ww2" />
           </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.AirlineAbnormal)">
                 <el-icon color="#ffffff" size="18">
@@ -74,13 +119,13 @@
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-              <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
+              <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.AirlineTraffic)">
                 <el-icon color="#ffffff" size="18">
@@ -92,57 +137,9 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww33" :option="airlineTrafficObj" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="dashboard-content-bottom flex">
-        <div class="dashboard-content-bottom-left">
-          <div class="dashboard-content-bottom-left-top">
-            <div class="dashboard-content-bottom-left-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 class="dashboard-content-bottom-left-bottom">
-            <Echarts id="ww4" :option="nodePeakObj" />
-          </div>
-        </div>
-        <div class="dashboard-content-bottom-center">
-          <div class="dashboard-content-bottom-center-top">
-            <div class="dashboard-content-bottom-center-top-title">
-              节点效率分析
-            </div>
-            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker()">
-              <el-icon color="#ffffff" size="18">
-                <Calendar />
-              </el-icon>
-              <el-icon color="#ffffff">
-                <CaretBottom />
-              </el-icon>
-            </div>
-          </div>
-          <div class="dashboard-content-bottom-center-bottom">
-            <Echarts id="ww5" :option="nodeEfficiency.option" />
-          </div>
-        </div>
-        <div class="dashboard-content-bottom-right">
-          <div class="dashboard-content-bottom-right-top">
-            <div class="dashboard-content-bottom-center-top-title">
-              航班动态统计
+              <Echarts id="ww44" :option="airlineObj" />
             </div>
           </div>
-          <div class="dashboard-content-bottom-right-bottom">
-            <Echarts id="ww6" :option="airStutas.option" />
-          </div>
         </div>
       </div>
     </div>
@@ -161,77 +158,30 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 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, showTimeMsg } from "./hooks/usePublic";
-import { parseTime } from "@/utils/validate";
+import { parseTime, isValue } from "@/utils/validate";
 import * as _ from "lodash";
-const {
-  optionLeft,
-  airlineAbnormalBaggage,
-  airCompaneBaggage,
-  airStutas,
-  nodeEfficiency,
-  hourPeak,
-  getPublicData,
-  getMapData,
-} = usePublic();
+const { optionLeft, airCompaneBaggage, airStutas, getPublicData } = usePublic();
 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 mapOptions = ref<any>({
-  tooltip: {
-    trigger: "item",
-    formatter: function (params, ticket, callback) {
-      if (params.seriesType == "effectScatter") {
-        return "线路：" + params.data.name + "" + params.data.value[2];
-      } else if (params.seriesType == "lines") {
-        return (
-          params.data.fromName +
-          ">" +
-          params.data.toName +
-          "<br />" +
-          params.data.value
-        );
-      } else {
-        return params.name;
-      }
-    },
-  },
-  geo: {
-    map: "china",
-    label: {
-      emphasis: {
-        show: true,
-        color: "#fff",
-      },
-    },
-    roam: true,
-    itemStyle: {
-      normal: {
-        areaColor: "#154186",
-        borderColor: "#255caf",
-      },
-      emphasis: {
-        areaColor: "#255caf",
-      },
-    },
-  },
-  series: [],
-});
+const airlineObj = ref<any>({});
 const flightNums = ref<number>(0);
 const stockNums = ref<number>(0);
+const weight = ref<number>(0);
 const form = ref({
   startDate: parseTime(Date.now() - 24 * 60 * 60 * 1000 * 7, "{y}-{m}-{d}"),
   endDate: 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);
@@ -309,106 +259,98 @@ const pubFunc = (listValues, target) => {
 //获取小时峰值分布
 const hourlyPeakFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscCgHourlyPeakId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+  if (listValues && isValue(listValues)) {
+    hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+  }
 };
 
 //运单趋势分析
 const waybillTrendFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscCgWaybillTrendId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  waybillTrendObj.value = pubFunc(listValues, optionLeft);
+  if (listValues && isValue(listValues)) {
+    waybillTrendObj.value = pubFunc(listValues, optionLeft);
+  }
 };
 
-//节点峰值
+//始发站/目的站统计分析
 const nodePeakFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscCgNodePeakId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate, fttp: "国内进港" },
   ])) 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);
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["airport"];
     });
-    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;
+    nodePeakObj.value = pubFunc(listValues, newObj);
+  }
 };
 
 //航班数&运单数
 const numbersFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscCgNumbersId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  const { flightNum, stockNum } = listValues[0];
-  flightNums.value = flightNum;
-  stockNums.value = stockNum;
+  if (listValues && isValue(listValues)) {
+    const { flightNum, stockNum, weight } = listValues[0];
+    flightNums.value = flightNum;
+    stockNums.value = stockNum;
+    weight.value = weight;
+  }
 };
 
 //航司运量
 const airlineTrafficFunc = async () => {
   const listValues = (await getPublicData(
     DATACONTENT_ID.jscCgAirlineTrafficId,
-    [{ fd1: form.value.startDate }, { fd2: form.value.endDate }]
+    [{ fd1: form.value.startDate, fd2: form.value.endDate }]
   )) as any;
-  listValues.forEach((item) => {
-    item.jobTime = item["IACACode"];
-  });
-  airlineTrafficObj.value = pubFunc(
-    listValues,
-    airCompaneBaggage.option.baseOption
-  );
+  if (listValues && isValue(listValues)) {
+    listValues.forEach((item) => {
+      item.jobTime = item["IACACode"];
+    });
+    airlineTrafficObj.value = pubFunc(
+      listValues,
+      airCompaneBaggage.option.baseOption
+    );
+  }
 };
 
-//航班预警报警分析
+//航班表格
 const airlineAbnormalFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: "国内进港",
+    },
   ])) as any;
-  // console.log(listValues);
+  if (listValues && isValue(listValues)) {
+    listData.value = listValues;
+  }
+};
+
+//航班动态统计
+const airlineFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgAirlineId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+    },
+  ])) as any;
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["nodeCode"];
+      item.stockNum = item["flightNum"];
+      item.weight = item["stockNum"];
+    });
+    airlineObj.value = pubFunc(listValues, newObj);
+  }
 };
 
 onMounted(() => {
@@ -418,31 +360,7 @@ onMounted(() => {
   numbersFunc();
   airlineTrafficFunc();
   airlineAbnormalFunc();
-  setTimeout(() => {
-    var BJData = [
-      [{ name: "北京" }, { name: "深圳", value: 95 }],
-      [{ name: "成都" }, { name: "深圳", value: 95 }],
-      [{ name: "重庆" }, { name: "深圳", value: 95 }],
-      [{ name: "西安" }, { name: "深圳", value: 95 }],
-      [{ name: "太原" }, { name: "深圳", value: 95 }],
-    ];
-    var GZData = [
-      [{ name: "深圳" }, { name: "福州", value: 95 }],
-      [{ name: "深圳" }, { name: "太原", value: 90 }],
-      [{ name: "深圳" }, { name: "长春", value: 80 }],
-      [{ name: "深圳" }, { name: "重庆", value: 70 }],
-      [{ name: "深圳" }, { name: "西安", value: 60 }],
-      [{ name: "深圳" }, { name: "成都", value: 50 }],
-      [{ name: "深圳" }, { name: "常州", value: 40 }],
-      [{ name: "深圳" }, { name: "北京", value: 30 }],
-      [{ name: "深圳" }, { name: "北海", value: 20 }],
-      [{ name: "深圳" }, { name: "海口", value: 10 }],
-    ];
-    mapOptions.value.series = getMapData([
-      ["北京", BJData],
-      ["深圳", GZData],
-    ]);
-  }, 0);
+  airlineFunc();
 });
 </script>
 

src/views/dashboard/indexHomeOut.vue

@@ -40,29 +40,74 @@
               <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 class="dashboard-content-top-left-item-bottom">
+              <Echarts id="ww4" :option="nodePeakObj" />
+            </div>
+          </div>
         </div>
         <!-- 地图 -->
         <div class="dashboard-content-top-center">
-          <div class="dashboard-content-top-center-top"></div>
+          <div 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">{{ weight }}</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">{{ 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>
           <div class="dashboard-content-top-center-bottom">
-            <div class="dashboard-content-top-center-bottom-box1">
-              <div class="dashboard-content-top-center-bottom-box1-title">
-                航班数：{{ flightNums }}
+            <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>
-            <div class="dashboard-content-top-center-bottom-box2">
-              <div class="dashboard-content-top-center-bottom-box2-title">
-                运单数：{{ stockNums }}
+              <div class="dashboard-content-top-center-bottom-content-bottom">
+                <vue3-seamless-scroll :list="listData" :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.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>
-            <EchartsMap :option="mapOptions" id="ww2" />
           </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.AirlineAbnormal)">
                 <el-icon color="#ffffff" size="18">
@@ -74,13 +119,13 @@
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-              <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
+              <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.AirlineTraffic)">
                 <el-icon color="#ffffff" size="18">
@@ -92,57 +137,27 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww33" :option="airlineTrafficObj" />
+              <Echarts id="ww44" :option="airlineObj" />
             </div>
           </div>
-        </div>
-      </div>
-      <div class="dashboard-content-bottom flex">
-        <div class="dashboard-content-bottom-left">
-          <div class="dashboard-content-bottom-left-top">
-            <div class="dashboard-content-bottom-left-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 class="dashboard-content-bottom-left-bottom">
-            <Echarts id="ww4" :option="nodePeakObj" />
-          </div>
-        </div>
-        <div class="dashboard-content-bottom-center">
-          <div class="dashboard-content-bottom-center-top">
-            <div class="dashboard-content-bottom-center-top-title">
-              节点效率分析
-            </div>
-            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker()">
-              <el-icon color="#ffffff" size="18">
-                <Calendar />
-              </el-icon>
-              <el-icon color="#ffffff">
-                <CaretBottom />
-              </el-icon>
+          <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>
-          <div class="dashboard-content-bottom-center-bottom">
-            <Echarts id="ww5" :option="nodeEfficiency.option" />
-          </div>
-        </div>
-        <div class="dashboard-content-bottom-right">
-          <div class="dashboard-content-bottom-right-top">
-            <div class="dashboard-content-bottom-center-top-title">
-              航班动态统计
+            <div class="dashboard-content-top-left-item-bottom">
+              <Echarts id="ww45" :option="pickingObj" />
             </div>
           </div>
-          <div class="dashboard-content-bottom-right-bottom">
-            <Echarts id="ww6" :option="airStutas.option" />
-          </div>
         </div>
       </div>
     </div>
@@ -161,77 +176,31 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 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, showTimeMsg } from "./hooks/usePublic";
-import { parseTime } from "@/utils/validate";
+import { parseTime, isValue } from "@/utils/validate";
 import * as _ from "lodash";
-const {
-  optionLeft,
-  airlineAbnormalBaggage,
-  airCompaneBaggage,
-  airStutas,
-  nodeEfficiency,
-  hourPeak,
-  getPublicData,
-  getMapData,
-} = usePublic();
+const { optionLeft, airCompaneBaggage, airStutas, getPublicData } = usePublic();
 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 airlineObj = ref<any>({});
+const pickingObj = ref<any>({});
 const flightNums = ref<number>(0);
 const stockNums = ref<number>(0);
-const mapOptions = ref<any>({
-  tooltip: {
-    trigger: "item",
-    formatter: function (params, ticket, callback) {
-      if (params.seriesType == "effectScatter") {
-        return "线路：" + params.data.name + "" + params.data.value[2];
-      } else if (params.seriesType == "lines") {
-        return (
-          params.data.fromName +
-          ">" +
-          params.data.toName +
-          "<br />" +
-          params.data.value
-        );
-      } else {
-        return params.name;
-      }
-    },
-  },
-  geo: {
-    map: "china",
-    label: {
-      emphasis: {
-        show: true,
-        color: "#fff",
-      },
-    },
-    roam: true,
-    itemStyle: {
-      normal: {
-        areaColor: "#154186",
-        borderColor: "#255caf",
-      },
-      emphasis: {
-        areaColor: "#255caf",
-      },
-    },
-  },
-  series: [],
-});
+const weight = ref<number>(0);
 const form = ref({
   startDate: parseTime(Date.now() - 24 * 60 * 60 * 1000 * 7, "{y}-{m}-{d}"),
   endDate: 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);
@@ -264,6 +233,9 @@ const submitForm = () => {
     case showTimeMsg.AirlineAbnormal:
       airlineAbnormalFunc();
       break;
+    case showTimeMsg.PickingStatistics:
+      pickingFuncs();
+      break;
     default:
       break;
   }
@@ -309,106 +281,116 @@ const pubFunc = (listValues, target) => {
 //获取小时峰值分布
 const hourlyPeakFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscHourlyPeakId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+  if (listValues && isValue(listValues)) {
+    hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+  }
 };
 
 //运单趋势分析
 const waybillTrendFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscWaybillTrendId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  waybillTrendObj.value = pubFunc(listValues, optionLeft);
+  if (listValues && isValue(listValues)) {
+    waybillTrendObj.value = pubFunc(listValues, optionLeft);
+  }
 };
 
-//节点峰值
+//始发站/目的站统计分析
 const nodePeakFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscNodePeakId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate, fttp: "国内出港" },
   ])) 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",
-      },
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["airport"];
     });
-    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;
+    nodePeakObj.value = pubFunc(listValues, newObj);
+  }
 };
 
 //航班数&运单数
 const numbersFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscNumbersId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  const { flightNum, stockNum } = listValues[0];
-  flightNums.value = flightNum;
-  stockNums.value = stockNum;
+  if (listValues && isValue(listValues)) {
+    const { flightNum, stockNum, weight } = listValues[0];
+    flightNums.value = flightNum;
+    stockNums.value = stockNum;
+    weight.value = weight;
+  }
 };
 
 //航司运量
 const airlineTrafficFunc = async () => {
   const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineTrafficId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  listValues.forEach((item) => {
-    item.jobTime = item["IACACode"];
-  });
-  airlineTrafficObj.value = pubFunc(
-    listValues,
-    airCompaneBaggage.option.baseOption
-  );
+  if (listValues && isValue(listValues)) {
+    listValues.forEach((item) => {
+      item.jobTime = item["IACACode"];
+    });
+    airlineTrafficObj.value = pubFunc(
+      listValues,
+      airCompaneBaggage.option.baseOption
+    );
+  }
 };
 
-//航班预警报警分析
+//航班表格
 const airlineAbnormalFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: "国内出港",
+    },
   ])) as any;
-  // console.log(listValues);
+  if (listValues && isValue(listValues)) {
+    listData.value = listValues;
+  }
+};
+
+//航班动态统计
+const airlineFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+    },
+  ])) as any;
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["nodeCode"];
+      item.stockNum = item["flightNum"];
+      item.weight = item["stockNum"];
+    });
+    airlineObj.value = pubFunc(listValues, newObj);
+  }
+};
+
+//拉货统计
+const pickingFuncs = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscGgPullId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+    },
+  ])) as any;
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["flightDate"];
+      item.stockNum = item["flightNum"];
+      item.weight = item["stockNum"];
+    });
+    pickingObj.value = pubFunc(listValues, newObj);
+  }
 };
 
 onMounted(() => {
@@ -418,31 +400,8 @@ onMounted(() => {
   numbersFunc();
   airlineTrafficFunc();
   airlineAbnormalFunc();
-  setTimeout(() => {
-    var BJData = [
-      [{ name: "北京" }, { name: "深圳", value: 95 }],
-      [{ name: "成都" }, { name: "深圳", value: 95 }],
-      [{ name: "重庆" }, { name: "深圳", value: 95 }],
-      [{ name: "西安" }, { name: "深圳", value: 95 }],
-      [{ name: "太原" }, { name: "深圳", value: 95 }],
-    ];
-    var GZData = [
-      [{ name: "深圳" }, { name: "福州", value: 95 }],
-      [{ name: "深圳" }, { name: "太原", value: 90 }],
-      [{ name: "深圳" }, { name: "长春", value: 80 }],
-      [{ name: "深圳" }, { name: "重庆", value: 70 }],
-      [{ name: "深圳" }, { name: "西安", value: 60 }],
-      [{ name: "深圳" }, { name: "成都", value: 50 }],
-      [{ name: "深圳" }, { name: "常州", value: 40 }],
-      [{ name: "深圳" }, { name: "北京", value: 30 }],
-      [{ name: "深圳" }, { name: "北海", value: 20 }],
-      [{ name: "深圳" }, { name: "海口", value: 10 }],
-    ];
-    mapOptions.value.series = getMapData([
-      ["北京", BJData],
-      ["深圳", GZData],
-    ]);
-  }, 0);
+  airlineFunc();
+  pickingFuncs();
 });
 </script>
 

src/views/dashboard/indexIn.vue

@@ -40,29 +40,74 @@
               <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 class="dashboard-content-top-left-item-bottom">
+              <Echarts id="ww4" :option="nodePeakObj" />
+            </div>
+          </div>
         </div>
         <!-- 地图 -->
         <div class="dashboard-content-top-center">
-          <div class="dashboard-content-top-center-top"></div>
+          <div 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">{{ weight }}</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">{{ 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>
           <div class="dashboard-content-top-center-bottom">
-            <div class="dashboard-content-top-center-bottom-box1">
-              <div class="dashboard-content-top-center-bottom-box1-title">
-                航班数：{{ flightNums }}
+            <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>
-            <div class="dashboard-content-top-center-bottom-box2">
-              <div class="dashboard-content-top-center-bottom-box2-title">
-                运单数：{{ stockNums }}
+              <div class="dashboard-content-top-center-bottom-content-bottom">
+                <vue3-seamless-scroll :list="listData" :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.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>
-            <EchartsMap :option="mapOptions" id="ww2" />
           </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.AirlineAbnormal)">
                 <el-icon color="#ffffff" size="18">
@@ -74,13 +119,13 @@
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-              <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
+              <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.AirlineTraffic)">
                 <el-icon color="#ffffff" size="18">
@@ -92,57 +137,9 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww33" :option="airlineTrafficObj" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="dashboard-content-bottom flex">
-        <div class="dashboard-content-bottom-left">
-          <div class="dashboard-content-bottom-left-top">
-            <div class="dashboard-content-bottom-left-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 class="dashboard-content-bottom-left-bottom">
-            <Echarts id="ww4" :option="nodePeakObj" />
-          </div>
-        </div>
-        <div class="dashboard-content-bottom-center">
-          <div class="dashboard-content-bottom-center-top">
-            <div class="dashboard-content-bottom-center-top-title">
-              节点效率分析
-            </div>
-            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker()">
-              <el-icon color="#ffffff" size="18">
-                <Calendar />
-              </el-icon>
-              <el-icon color="#ffffff">
-                <CaretBottom />
-              </el-icon>
-            </div>
-          </div>
-          <div class="dashboard-content-bottom-center-bottom">
-            <Echarts id="ww5" :option="nodeEfficiency.option" />
-          </div>
-        </div>
-        <div class="dashboard-content-bottom-right">
-          <div class="dashboard-content-bottom-right-top">
-            <div class="dashboard-content-bottom-center-top-title">
-              航班动态统计
+              <Echarts id="ww44" :option="airlineObj" />
             </div>
           </div>
-          <div class="dashboard-content-bottom-right-bottom">
-            <Echarts id="ww6" :option="airStutas.option" />
-          </div>
         </div>
       </div>
     </div>
@@ -161,77 +158,30 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 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, showTimeMsg } from "./hooks/usePublic";
-import { parseTime } from "@/utils/validate";
+import { parseTime, isValue } from "@/utils/validate";
 import * as _ from "lodash";
-const {
-  optionLeft,
-  airlineAbnormalBaggage,
-  airCompaneBaggage,
-  airStutas,
-  nodeEfficiency,
-  hourPeak,
-  getPublicData,
-  getMapData,
-} = usePublic();
+const { optionLeft, airCompaneBaggage, airStutas, getPublicData } = usePublic();
 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 airlineObj = ref<any>({});
 const flightNums = ref<number>(0);
 const stockNums = ref<number>(0);
-const mapOptions = ref<any>({
-  tooltip: {
-    trigger: "item",
-    formatter: function (params, ticket, callback) {
-      if (params.seriesType == "effectScatter") {
-        return "线路：" + params.data.name + "" + params.data.value[2];
-      } else if (params.seriesType == "lines") {
-        return (
-          params.data.fromName +
-          ">" +
-          params.data.toName +
-          "<br />" +
-          params.data.value
-        );
-      } else {
-        return params.name;
-      }
-    },
-  },
-  geo: {
-    map: "china",
-    label: {
-      emphasis: {
-        show: true,
-        color: "#fff",
-      },
-    },
-    roam: true,
-    itemStyle: {
-      normal: {
-        areaColor: "#154186",
-        borderColor: "#255caf",
-      },
-      emphasis: {
-        areaColor: "#255caf",
-      },
-    },
-  },
-  series: [],
-});
+const weight = ref<number>(0);
 const form = ref({
   startDate: parseTime(Date.now() - 24 * 60 * 60 * 1000 * 7, "{y}-{m}-{d}"),
   endDate: 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);
@@ -308,107 +258,99 @@ const pubFunc = (listValues, target) => {
 
 //获取小时峰值分布
 const hourlyPeakFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscJgHourlyPeakId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgHourlyPeakId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+  if (listValues && isValue(listValues)) {
+    hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+  }
 };
 
 //运单趋势分析
 const waybillTrendFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscJgWaybillTrendId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgWaybillTrendId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  waybillTrendObj.value = pubFunc(listValues, optionLeft);
+  if (listValues && isValue(listValues)) {
+    waybillTrendObj.value = pubFunc(listValues, optionLeft);
+  }
 };
 
-//节点峰值
+//始发站/目的站统计分析
 const nodePeakFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscJgNodePeakId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate, fttp: "国内进港" },
   ])) 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);
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["airport"];
     });
-    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;
+    nodePeakObj.value = pubFunc(listValues, newObj);
+  }
 };
 
 //航班数&运单数
 const numbersFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscJgNumbersId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgNumbersId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  const { flightNum, stockNum } = listValues[0];
-  flightNums.value = flightNum;
-  stockNums.value = stockNum;
+  if (listValues && isValue(listValues)) {
+    const { flightNum, stockNum, weight } = listValues[0];
+    flightNums.value = flightNum;
+    stockNums.value = stockNum;
+    weight.value = weight;
+  }
 };
 
 //航司运量
 const airlineTrafficFunc = async () => {
   const listValues = (await getPublicData(
-    DATACONTENT_ID.jscJgAirlineTrafficId,
-    [{ fd1: form.value.startDate }, { fd2: form.value.endDate }]
+    DATACONTENT_ID.jscCgAirlineTrafficId,
+    [{ fd1: form.value.startDate, fd2: form.value.endDate }]
   )) as any;
-  listValues.forEach((item) => {
-    item.jobTime = item["IACACode"];
-  });
-  airlineTrafficObj.value = pubFunc(
-    listValues,
-    airCompaneBaggage.option.baseOption
-  );
+  if (listValues && isValue(listValues)) {
+    listValues.forEach((item) => {
+      item.jobTime = item["IACACode"];
+    });
+    airlineTrafficObj.value = pubFunc(
+      listValues,
+      airCompaneBaggage.option.baseOption
+    );
+  }
 };
 
-//航班预警报警分析
+//航班表格
 const airlineAbnormalFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: "国内进港",
+    },
   ])) as any;
-  // console.log(listValues);
+  if (listValues && isValue(listValues)) {
+    listData.value = listValues;
+  }
+};
+
+//航班动态统计
+const airlineFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgAirlineId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+    },
+  ])) as any;
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["nodeCode"];
+      item.stockNum = item["flightNum"];
+      item.weight = item["stockNum"];
+    });
+    airlineObj.value = pubFunc(listValues, newObj);
+  }
 };
 
 onMounted(() => {
@@ -418,31 +360,7 @@ onMounted(() => {
   numbersFunc();
   airlineTrafficFunc();
   airlineAbnormalFunc();
-  setTimeout(() => {
-    var BJData = [
-      [{ name: "北京" }, { name: "深圳", value: 95 }],
-      [{ name: "成都" }, { name: "深圳", value: 95 }],
-      [{ name: "重庆" }, { name: "深圳", value: 95 }],
-      [{ name: "西安" }, { name: "深圳", value: 95 }],
-      [{ name: "太原" }, { name: "深圳", value: 95 }],
-    ];
-    var GZData = [
-      [{ name: "深圳" }, { name: "福州", value: 95 }],
-      [{ name: "深圳" }, { name: "太原", value: 90 }],
-      [{ name: "深圳" }, { name: "长春", value: 80 }],
-      [{ name: "深圳" }, { name: "重庆", value: 70 }],
-      [{ name: "深圳" }, { name: "西安", value: 60 }],
-      [{ name: "深圳" }, { name: "成都", value: 50 }],
-      [{ name: "深圳" }, { name: "常州", value: 40 }],
-      [{ name: "深圳" }, { name: "北京", value: 30 }],
-      [{ name: "深圳" }, { name: "北海", value: 20 }],
-      [{ name: "深圳" }, { name: "海口", value: 10 }],
-    ];
-    mapOptions.value.series = getMapData([
-      ["北京", BJData],
-      ["深圳", GZData],
-    ]);
-  }, 0);
+  airlineFunc();
 });
 </script>
 

src/views/dashboard/indexOut.vue

@@ -40,29 +40,74 @@
               <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 class="dashboard-content-top-left-item-bottom">
+              <Echarts id="ww4" :option="nodePeakObj" />
+            </div>
+          </div>
         </div>
         <!-- 地图 -->
         <div class="dashboard-content-top-center">
-          <div class="dashboard-content-top-center-top"></div>
+          <div 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">{{ weight }}</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">{{ 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>
           <div class="dashboard-content-top-center-bottom">
-            <div class="dashboard-content-top-center-bottom-box1">
-              <div class="dashboard-content-top-center-bottom-box1-title">
-                航班数：{{ flightNums }}
+            <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>
-            <div class="dashboard-content-top-center-bottom-box2">
-              <div class="dashboard-content-top-center-bottom-box2-title">
-                运单数：{{ stockNums }}
+              <div class="dashboard-content-top-center-bottom-content-bottom">
+                <vue3-seamless-scroll :list="listData" :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.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>
-            <EchartsMap :option="mapOptions" id="ww2" />
           </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.AirlineAbnormal)">
                 <el-icon color="#ffffff" size="18">
@@ -74,13 +119,13 @@
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-              <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
+              <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.AirlineTraffic)">
                 <el-icon color="#ffffff" size="18">
@@ -92,57 +137,9 @@
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww33" :option="airlineTrafficObj" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="dashboard-content-bottom flex">
-        <div class="dashboard-content-bottom-left">
-          <div class="dashboard-content-bottom-left-top">
-            <div class="dashboard-content-bottom-left-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 class="dashboard-content-bottom-left-bottom">
-            <Echarts id="ww4" :option="nodePeakObj" />
-          </div>
-        </div>
-        <div class="dashboard-content-bottom-center">
-          <div class="dashboard-content-bottom-center-top">
-            <div class="dashboard-content-bottom-center-top-title">
-              节点效率分析
-            </div>
-            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker()">
-              <el-icon color="#ffffff" size="18">
-                <Calendar />
-              </el-icon>
-              <el-icon color="#ffffff">
-                <CaretBottom />
-              </el-icon>
-            </div>
-          </div>
-          <div class="dashboard-content-bottom-center-bottom">
-            <Echarts id="ww5" :option="nodeEfficiency.option" />
-          </div>
-        </div>
-        <div class="dashboard-content-bottom-right">
-          <div class="dashboard-content-bottom-right-top">
-            <div class="dashboard-content-bottom-center-top-title">
-              航班动态统计
+              <Echarts id="ww44" :option="airlineObj" />
             </div>
           </div>
-          <div class="dashboard-content-bottom-right-bottom">
-            <Echarts id="ww6" :option="airStutas.option" />
-          </div>
         </div>
       </div>
     </div>
@@ -161,77 +158,30 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 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, showTimeMsg } from "./hooks/usePublic";
-import { parseTime } from "@/utils/validate";
+import { parseTime, isValue } from "@/utils/validate";
 import * as _ from "lodash";
-const {
-  optionLeft,
-  airlineAbnormalBaggage,
-  airCompaneBaggage,
-  airStutas,
-  nodeEfficiency,
-  hourPeak,
-  getPublicData,
-  getMapData,
-} = usePublic();
+const { optionLeft, airCompaneBaggage, airStutas, getPublicData } = usePublic();
 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 airlineObj = ref<any>({});
 const flightNums = ref<number>(0);
 const stockNums = ref<number>(0);
-const mapOptions = ref<any>({
-  tooltip: {
-    trigger: "item",
-    formatter: function (params, ticket, callback) {
-      if (params.seriesType == "effectScatter") {
-        return "线路：" + params.data.name + "" + params.data.value[2];
-      } else if (params.seriesType == "lines") {
-        return (
-          params.data.fromName +
-          ">" +
-          params.data.toName +
-          "<br />" +
-          params.data.value
-        );
-      } else {
-        return params.name;
-      }
-    },
-  },
-  geo: {
-    map: "china",
-    label: {
-      emphasis: {
-        show: true,
-        color: "#fff",
-      },
-    },
-    roam: true,
-    itemStyle: {
-      normal: {
-        areaColor: "#154186",
-        borderColor: "#255caf",
-      },
-      emphasis: {
-        areaColor: "#255caf",
-      },
-    },
-  },
-  series: [],
-});
+const weight = ref<number>(0);
 const form = ref({
   startDate: parseTime(Date.now() - 24 * 60 * 60 * 1000 * 7, "{y}-{m}-{d}"),
   endDate: 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);
@@ -308,107 +258,99 @@ const pubFunc = (listValues, target) => {
 
 //获取小时峰值分布
 const hourlyPeakFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscGjHourlyPeakId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgHourlyPeakId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+  if (listValues && isValue(listValues)) {
+    hourlyPeakObj.value = pubFunc(listValues, optionLeft);
+  }
 };
 
 //运单趋势分析
 const waybillTrendFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscGjWaybillTrendId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgWaybillTrendId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  waybillTrendObj.value = pubFunc(listValues, optionLeft);
+  if (listValues && isValue(listValues)) {
+    waybillTrendObj.value = pubFunc(listValues, optionLeft);
+  }
 };
 
-//节点峰值
+//始发站/目的站统计分析
 const nodePeakFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscGjNodePeakId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate, fttp: "国内进港" },
   ])) 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);
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["airport"];
     });
-    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;
+    nodePeakObj.value = pubFunc(listValues, newObj);
+  }
 };
 
 //航班数&运单数
 const numbersFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscGjNumbersId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgNumbersId, [
+    { fd1: form.value.startDate, fd2: form.value.endDate },
   ])) as any;
-  const { flightNum, stockNum } = listValues[0];
-  flightNums.value = flightNum;
-  stockNums.value = stockNum;
+  if (listValues && isValue(listValues)) {
+    const { flightNum, stockNum, weight } = listValues[0];
+    flightNums.value = flightNum;
+    stockNums.value = stockNum;
+    weight.value = weight;
+  }
 };
 
 //航司运量
 const airlineTrafficFunc = async () => {
   const listValues = (await getPublicData(
-    DATACONTENT_ID.jscGjAirlineTrafficId,
-    [{ fd1: form.value.startDate }, { fd2: form.value.endDate }]
+    DATACONTENT_ID.jscCgAirlineTrafficId,
+    [{ fd1: form.value.startDate, fd2: form.value.endDate }]
   )) as any;
-  listValues.forEach((item) => {
-    item.jobTime = item["IACACode"];
-  });
-  airlineTrafficObj.value = pubFunc(
-    listValues,
-    airCompaneBaggage.option.baseOption
-  );
+  if (listValues && isValue(listValues)) {
+    listValues.forEach((item) => {
+      item.jobTime = item["IACACode"];
+    });
+    airlineTrafficObj.value = pubFunc(
+      listValues,
+      airCompaneBaggage.option.baseOption
+    );
+  }
 };
 
-//航班预警报警分析
+//航班表格
 const airlineAbnormalFunc = async () => {
-  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
-    { fd1: form.value.startDate },
-    { fd2: form.value.endDate },
+  const listValues = (await getPublicData(DATACONTENT_ID.jscFlightDynamicsId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+      fttp: "国内进港",
+    },
   ])) as any;
-  // console.log(listValues);
+  if (listValues && isValue(listValues)) {
+    listData.value = listValues;
+  }
+};
+
+//航班动态统计
+const airlineFunc = async () => {
+  const listValues = (await getPublicData(DATACONTENT_ID.jscCgAirlineId, [
+    {
+      fd1: form.value.startDate,
+      fd2: form.value.endDate,
+    },
+  ])) as any;
+  if (listValues && isValue(listValues)) {
+    const newObj = _.cloneDeep(airCompaneBaggage.option.baseOption);
+    listValues.forEach((item) => {
+      item.jobTime = item["nodeCode"];
+      item.stockNum = item["flightNum"];
+      item.weight = item["stockNum"];
+    });
+    airlineObj.value = pubFunc(listValues, newObj);
+  }
 };
 
 onMounted(() => {
@@ -418,31 +360,7 @@ onMounted(() => {
   numbersFunc();
   airlineTrafficFunc();
   airlineAbnormalFunc();
-  setTimeout(() => {
-    var BJData = [
-      [{ name: "北京" }, { name: "深圳", value: 95 }],
-      [{ name: "成都" }, { name: "深圳", value: 95 }],
-      [{ name: "重庆" }, { name: "深圳", value: 95 }],
-      [{ name: "西安" }, { name: "深圳", value: 95 }],
-      [{ name: "太原" }, { name: "深圳", value: 95 }],
-    ];
-    var GZData = [
-      [{ name: "深圳" }, { name: "福州", value: 95 }],
-      [{ name: "深圳" }, { name: "太原", value: 90 }],
-      [{ name: "深圳" }, { name: "长春", value: 80 }],
-      [{ name: "深圳" }, { name: "重庆", value: 70 }],
-      [{ name: "深圳" }, { name: "西安", value: 60 }],
-      [{ name: "深圳" }, { name: "成都", value: 50 }],
-      [{ name: "深圳" }, { name: "常州", value: 40 }],
-      [{ name: "深圳" }, { name: "北京", value: 30 }],
-      [{ name: "深圳" }, { name: "北海", value: 20 }],
-      [{ name: "深圳" }, { name: "海口", value: 10 }],
-    ];
-    mapOptions.value.series = getMapData([
-      ["北京", BJData],
-      ["深圳", GZData],
-    ]);
-  }, 0);
+  airlineFunc();
 });
 </script>