统计

package-lock.json

@@ -29,6 +29,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": {
@@ -16546,6 +16547,14 @@
         "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -18427,6 +18436,14 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue3-seamless-scroll": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
+      "integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
+      "dependencies": {
+        "throttle-debounce": "5.0.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -33062,6 +33079,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -34457,6 +34479,14 @@
         "@volar/vue-typescript": "0.34.17"
       }
     },
+    "vue3-seamless-scroll": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
+      "integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
+      "requires": {
+        "throttle-debounce": "5.0.0"
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

public/config.js

@@ -4,7 +4,7 @@ var LOOP_INTERVAL = {
   flight: 15 * 1000,
   waybill: 15 * 1000,
   goods: 15 * 1000,
-}
+};
 
 // const PLATFROM_CONFIG = {
 //   baseNewUrl: "http://120.26.64.82:8083/", //登录前的http请求地址
@@ -289,7 +289,11 @@ var DATACONTENT_ID = {
   nodeExportAirline: 1805, // 节点统计导出-航线
   nodeExportAirport: 1805, // 节点统计导出-航站
   nodeAxisDesc: 90, // 节点统计指示器名称解释
-}
+  modeFlightvolume: 1803623, //航班统计计量
+  modeLoadingweight: 1803624, //加货重量统计
+  modeSpecialgoods: 1803625, //特货统计
+  modeCargostatistics: 1803626, //货量统计
+};
 
 var SERVICE_ID = {
   /***-----账号管理------***/
@@ -324,4 +328,4 @@ var SERVICE_ID = {
 
   /***-----离港管理------***/
   departureScId: 8011, //发送报警预警日志信息
-}
+};

src/main.ts

@@ -1,12 +1,12 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-const app = createApp(App)
-import router from './router'
-import '@/styles/index.scss' // global css
+import { createApp } from "vue";
+import App from "./App.vue";
+const app = createApp(App);
+import router from "./router";
+import "@/styles/index.scss"; // global css
 //import element-plus
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-app.use(ElementPlus)
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+app.use(ElementPlus);
 // import zhCn from 'element-plus/es/locale/lang/zh-cn'
 // app.use(ElementPlus, { size: 'small', locale: zhCn })
 
@@ -23,23 +23,24 @@ app.use(ElementPlus)
 
 //svg-icon
 //import svg-icon doc in  https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md
-import 'virtual:svg-icons-register'
-import svgIcon from '@/icons/SvgIcon.vue'
-app.component('SvgIcon', svgIcon)
+import "virtual:svg-icons-register";
+import svgIcon from "@/icons/SvgIcon.vue";
+app.component("SvgIcon", svgIcon);
 
 //global mount moment-mini
 // import $momentMini from 'moment-mini'
 // app.config.globalProperties.$momentMini = $momentMini
 //import global directive（unplugin-vue-components auto scan）
-import directive from '@/directives'
-directive(app)
+import directive from "@/directives";
+directive(app);
+
 //import router intercept
-import './permission'
+import "./permission";
 
 //import theme
-import './theme/index.scss'
+import "./theme/index.scss";
 //import unocss
-import 'uno.css'
+import "uno.css";
 
 //element svg icon(unplugin-vue-components auto scan)
 // import ElSvgIcon from '@/components/ElSvgIcon.vue'
@@ -50,12 +51,12 @@ import 'uno.css'
 // errorLog()
 
 //pinia
-import { createPinia } from 'pinia'
+import { createPinia } from "pinia";
 
-app.use(createPinia())
+app.use(createPinia());
 
-app.use(router).mount('#app')
+app.use(router).mount("#app");
 
-import elTableInfiniteScroll from 'el-table-infinite-scroll'
+import elTableInfiniteScroll from "el-table-infinite-scroll";
 
-app.use(elTableInfiniteScroll)
+app.use(elTableInfiniteScroll);

src/router/index.ts

@@ -1,49 +1,50 @@
-import { createRouter, createWebHashHistory, Router } from 'vue-router'
-import Layout from '@/layout'
-import { RouterTy } from '~/router'
-import routesOne from './routes/routes-file-one'
-import routesTwo from './routes/routes-file-two'
-import routesThree from './routes/routes-file-three'
-import routesFour from './routes/routes-file-four'
-import routesFive from './routes/routes-file-five'
-import routesSix from './routes/routes-file-six'
-import { Route, useKeepAlive } from '@/store/keepAlive'
+import { createRouter, createWebHashHistory, Router } from "vue-router";
+import Layout from "@/layout";
+import { RouterTy } from "~/router";
+import routesOne from "./routes/routes-file-one";
+import routesTwo from "./routes/routes-file-two";
+import routesThree from "./routes/routes-file-three";
+import routesFour from "./routes/routes-file-four";
+import routesFive from "./routes/routes-file-five";
+import routesSix from "./routes/routes-file-six";
+import routesSeven from "./routes/routes-file-seven";
+import { Route, useKeepAlive } from "@/store/keepAlive";
 
 const routesPush = (arr, routes) => {
-  if (!Array.isArray(arr)) return '请传入数组格式路由表'
+  if (!Array.isArray(arr)) return "请传入数组格式路由表";
   for (let i = 0; i < arr.length; i++) {
-    routes.push(arr[i])
+    routes.push(arr[i]);
   }
-}
+};
 
 export const constantRoutes: RouterTy = [
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Layout,
     hidden: true,
     children: [
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect'),
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect"),
       },
     ],
   },
   {
-    path: '/login',
-    component: () => import('@/views/login/Login.vue'),
+    path: "/login",
+    component: () => import("@/views/login/Login.vue"),
     hidden: true,
   },
   {
-    path: '/404',
-    component: () => import('@/views/error-page/404.vue'),
+    path: "/404",
+    component: () => import("@/views/error-page/404.vue"),
     hidden: true,
   },
   {
-    path: '/401',
-    component: () => import('@/views/error-page/401.vue'),
+    path: "/401",
+    component: () => import("@/views/error-page/401.vue"),
     hidden: true,
   },
-]
+];
 /**
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
@@ -51,8 +52,8 @@ export const constantRoutes: RouterTy = [
 export const asyncRoutes: RouterTy = [
   // 404 page must be placed at the end !!!
   // using pathMatch install of "*" in vue-router 4.0
-  { path: '/:pathMatch(.*)', redirect: '/404', hidden: true },
-]
+  { path: "/:pathMatch(.*)", redirect: "/404", hidden: true },
+];
 
 // 插入路由
 routesPush(
@@ -63,15 +64,16 @@ routesPush(
     ...routesTwo,
     ...routesThree,
     ...routesFour,
+    ...routesSeven,
   ],
   asyncRoutes
-)
+);
 
 const router: Router = createRouter({
   history: createWebHashHistory(),
   scrollBehavior: () => ({ top: 0 }),
   routes: constantRoutes,
-})
+});
 
 router.beforeEach((to, from, next) => {
   const {
@@ -82,47 +84,47 @@ router.beforeEach((to, from, next) => {
     // delCachedView,
     delCachedViewAll,
     delCachedViewUntil,
-  } = useKeepAlive()
-  if (from.matched?.[0]?.name === 'RealTime') {
+  } = useKeepAlive();
+  if (from.matched?.[0]?.name === "RealTime") {
     if (to.matched[1].name !== from.matched[1].name) {
-      delCachedViewAll()
+      delCachedViewAll();
     } else if (to.matched.length < from.matched.length) {
-      delCachedViewUntil(to.name as string)
+      delCachedViewUntil(to.name as string);
     }
 
     if (
-      typeof from.name === 'string' &&
-      ((from.name.includes('FlightView') &&
+      typeof from.name === "string" &&
+      ((from.name.includes("FlightView") &&
         from.query.flightNO &&
         from.query.flightDate) ||
-        (from.name.includes('WaybillView') && from.query.waybillNO))
+        (from.name.includes("WaybillView") && from.query.waybillNO))
     ) {
-      saveRoute(from as Route)
+      saveRoute(from as Route);
     }
   }
 
-  if (to.matched?.[0]?.name === 'RealTime') {
+  if (to.matched?.[0]?.name === "RealTime") {
     if (to.meta.keepAlive) {
-      addCachedViewAll(to.matched.map(route => route.name) as string[])
+      addCachedViewAll(to.matched.map((route) => route.name) as string[]);
     }
 
     if (
-      typeof to.name === 'string' &&
-      ((to.name.includes('FlightView') &&
+      typeof to.name === "string" &&
+      ((to.name.includes("FlightView") &&
         (!to.query.flightNO || !to.query.flightDate)) ||
-        (to.name.includes('WaybillView') && !to.query.waybillNO))
+        (to.name.includes("WaybillView") && !to.query.waybillNO))
     ) {
       const savedRoute = savedRoutes.find(
-        savedRoute => savedRoute.name === to.name
-      )
+        (savedRoute) => savedRoute.name === to.name
+      );
       if (savedRoute) {
-        next(savedRoute.fullPath)
+        next(savedRoute.fullPath);
       }
     }
   }
 
-  next()
-})
+  next();
+});
 
 // export function resetRouter() {
 //   const newRouter = createRouter({
@@ -132,4 +134,4 @@ router.beforeEach((to, from, next) => {
 //   })
 // }
 
-export default router
+export default router;

src/router/routes/routes-file-seven.ts

@@ -0,0 +1,54 @@
+import Layout from "@/layout";
+
+const HomeRoutes = {
+  path: "/statisticalanalysis",
+  component: Layout,
+  name: "statisticalanalysis",
+  redirect: "/statisticalanalysis/specialgoods",
+  //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
+  meta: {
+    title: "统计分析",
+    elSvgIcon: "Operation",
+    roles: ["basic_data_menu"],
+  },
+  children: [
+    {
+      path: "/statisticalanalysis/specialgoods",
+      name: "specialgoods",
+      meta: {
+        title: "统计分析",
+        roles: ["airline_information_maintenance_page"],
+      },
+      component: () =>
+        import("@/views/statisticalanalysis/specialgoods/index.vue"),
+    },
+    // {
+    //   path: "/BasicsData/deployNode",
+    //   name: "DeployNode",
+    //   meta: {
+    //     title: "节点信息维护",
+    //     roles: ["node_information_maintenance_page"],
+    //   },
+    //   component: () => import("@/views/BasicsData/deployNode/index.vue"),
+    // },
+    // {
+    //   path: "/BasicsData/specialCargoMaintenance",
+    //   name: "SpecialCargoMaintenance",
+    //   meta: {
+    //     title: "特殊货物类型维护",
+    //     roles: ["special_cargo_type_maintenance_page"],
+    //   },
+    //   component: () =>
+    //     import("@/views/BasicsData/specialCargoMaintenance/index.vue"),
+    // },
+    // {
+    //   path: "/BasicsData/equipmentMaintenance",
+    //   name: "EquipmentMaintenance",
+    //   meta: { title: "设备维护", roles: ["equipment_maintenance_page"] },
+    //   component: () =>
+    //     import("@/views/BasicsData/equipmentMaintenance/index.vue"),
+    // },
+  ],
+};
+
+export default [HomeRoutes];

src/views/statisticalanalysis/components/echart/echarts.js

@@ -0,0 +1,653 @@
+//饼图内嵌饼图
+export const leftEcharts = {
+  tooltip: {
+    trigger: "item",
+  },
+  // title: {
+  //     text:'采集',
+  //     left:'center',
+  //     top:'30%',
+  //     padding:[24,0],
+  //     textStyle:{
+  //         color:'#303133',
+  //         fontSize:'24px',
+  //         align:'center',
+  //         fontWeight:'800'
+  //     }
+  // },
+  // legend: {
+  //     top: '5%',
+  //     left: 'right'
+  // },
+  // legend: {
+  //     selectedMode:false,
+  //     formatter: function(name) {
+  //         return '{total|' + 1 + '}';
+  //     },
+  //     // data: [echartData[0].name],
+  //     // data: ['高等教育学'],
+  //     // itemGap: 50,
+  //     left: 'center',
+  //     top: 'center',
+  //     icon: 'none',
+  //     align:'center',
+  //     textStyle: {
+  //         color: "#fff",
+  //         fontSize: '16px',
+  //         // rich: rich
+  //     },
+  // },
+  series: [
+    {
+      name: "访问来源",
+      type: "pie",
+      // silent:true,
+      radius: ["71%", "95%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: "center",
+      },
+      // emphasis: {
+      //     label: {
+      //         show: true,
+      //         fontSize: '40',
+      //         fontWeight: 'bold'
+      //     }
+      // },
+      labelLine: {
+        show: false,
+      },
+      itemStyle: {
+        normal: {
+          color: function (params) {
+            let colorList = [
+              "#EE6666",
+              "#EEA966",
+              "#FAC858",
+              "#91CC75",
+              "#7754C6",
+            ];
+            return colorList[params.dataIndex];
+          },
+          // color: ['#EE6666', '#EEA966','#FAC858','#91CC75','#7754C6']
+        },
+      },
+      data: [
+        { value: 1048, name: "搜索引擎" },
+        { value: 735, name: "直接访问" },
+        { value: 580, name: "邮件营销" },
+        { value: 484, name: "联盟广告" },
+        { value: 300, name: "视频广告" },
+      ],
+    },
+    {
+      name: "访问来源",
+      type: "pie",
+      // silent:true,
+      radius: ["49%", "61%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: "center",
+      },
+      color: ["red"],
+      itemStyle: {
+        normal: {
+          color: function (params) {
+            let colorList = ["#3893F0", "#4ECAE9"];
+            return colorList[params.dataIndex];
+          },
+        },
+      },
+      // emphasis: {
+      //     label: {
+      //         show: true,
+      //         fontSize: '40',
+      //         fontWeight: 'bold'
+      //     }
+      // },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        { value: 1048, name: "搜索引擎" },
+        { value: 735, name: "直接访问" },
+      ],
+    },
+  ],
+};
+//进度条
+export const progress = {
+  backgroundColor: "#ffffff",
+  grid: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  xAxis: {
+    show: false,
+    type: "value",
+    boundaryGap: [0, 0],
+  },
+  yAxis: [
+    {
+      type: "category",
+      data: [""],
+      axisLine: { show: false },
+      axisTick: [
+        {
+          show: false,
+        },
+      ],
+    },
+  ],
+  series: [
+    {
+      name: "金额",
+      type: "bar",
+      zlevel: 1,
+      itemStyle: {
+        normal: {
+          barBorderRadius: 4,
+          color: "#3893F0",
+        },
+      },
+      barWidth: 16,
+      data: [10],
+    },
+    {
+      name: "背景",
+      type: "bar",
+      barWidth: 16,
+      barGap: "-100%",
+      data: [20],
+      itemStyle: {
+        normal: {
+          color: "#F5F7FA",
+
+          barBorderRadius: 4,
+        },
+      },
+    },
+  ],
+};
+//进度条2
+export const progresser = {
+  backgroundColor: "#ffffff",
+  grid: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  xAxis: {
+    show: false,
+    type: "value",
+    boundaryGap: [0, 0],
+  },
+  yAxis: [
+    {
+      type: "category",
+      data: [""],
+      axisLine: { show: false },
+      axisTick: [
+        {
+          show: false,
+        },
+      ],
+    },
+  ],
+  series: [
+    {
+      name: "金额",
+      type: "bar",
+      zlevel: 1,
+      itemStyle: {
+        normal: {
+          barBorderRadius: 4,
+          color: "#FAC858",
+        },
+      },
+      barWidth: 16,
+      data: [10],
+    },
+    {
+      name: "背景",
+      type: "bar",
+      barWidth: 16,
+      barGap: "-100%",
+      data: [20],
+      itemStyle: {
+        normal: {
+          color: "#F5F7FA",
+
+          barBorderRadius: 4,
+        },
+      },
+    },
+  ],
+};
+//雷达图
+export const radarup = {
+  radar: {
+    // shape: 'circle',
+    name: {
+      color: "#303133",
+      fontSize: 12,
+      formatter: function (value, indicator) {
+        var num = indicator.max;
+        return value + "\n" + num + "件";
+      },
+    },
+    axisLine: {
+      //
+      lineStyle: {
+        color: "#ebeff6",
+      },
+    },
+    indicator: [
+      { name: "中转、直达", max: 6500 },
+      { name: "特殊行李", max: 16000 },
+      { name: "常客等级", max: 30000 },
+      { name: "要客VVIP、VIP", max: 38000 },
+      { name: "追运行李", max: 52000 },
+      { name: "翻仓行李", max: 25000 },
+    ],
+  },
+  series: [
+    {
+      name: "Budget vs spending",
+      type: "radar",
+      areaStyle: {
+        normal: {
+          color: "rgba(124, 222, 246, 0.2)",
+        },
+      },
+      symbolSize: 0,
+      lineStyle: {
+        normal: {
+          color: "rgba(124, 222, 246, 1)",
+          width: 2,
+        },
+      },
+      data: [
+        {
+          value: [5000, 14000, 28000, 26000, 42000, 21000],
+          name: "Actual Spending",
+        },
+      ],
+    },
+  ],
+};
+//告警图
+export const Alarmecahrt = {
+  tooltip: {
+    trigger: "item",
+  },
+  series: [
+    {
+      name: "",
+      type: "pie",
+      radius: ["30%", "95%"],
+      avoidLabelOverlap: false,
+      // silent:true,
+      itemStyle: {
+        borderRadius: 7,
+        borderColor: "#fff",
+        borderWidth: 2,
+      },
+      label: {
+        show: false,
+        // position: 'center'
+      },
+      // emphasis: {
+      //   label: {
+      //     show: true,
+      //     fontSize: '40',
+      //     fontWeight: 'bold'
+      //   }
+      // },
+      labelLine: {
+        show: false,
+      },
+      color: ["#EE6666", "#EEA966"],
+      data: [
+        { value: 1048, name: "告警" },
+        { value: 735, name: "预警" },
+      ],
+    },
+  ],
+};
+//日志图
+export const journalcahrt = {
+  // title: {
+  //   text: 'Stacked Line'
+  // },
+  // tooltip: {
+  //   trigger: 'axis'
+  // },
+  // legend: {
+  //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+  // },
+  // backgroundColor:"#F5F7FA",
+  grid: {
+    top: "3%",
+    left: "3%",
+    right: "4%",
+    bottom: "10%",
+    containLabel: true,
+  },
+  // toolbox: {
+  //   feature: {
+  //     saveAsImage: {}
+  //   }
+  // },
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+  },
+  yAxis: [
+    {
+      type: "value",
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: ["#F5F7FA", "#F5F7FA"], //折线图背景
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "Email",
+      symbol: "none",
+      type: "line",
+      stack: "Total",
+      color: "#91CC75",
+      data: [120, 132, 101, 134, 90, 230, 210],
+    },
+    {
+      name: "Union Ads",
+      type: "line",
+      symbol: "none",
+      color: "#FAC858",
+      stack: "Total",
+      data: [220, 182, 191, 234, 290, 330, 310],
+    },
+    {
+      name: "Video Ads",
+      type: "line",
+      color: "#4ECAE9",
+      symbol: "none",
+      stack: "Total",
+      data: [150, 232, 201, 154, 190, 330, 410],
+    },
+  ],
+};
+//环图
+export const ReverseGraph = {
+  angleAxis: {
+    max: 100, // 满分
+    clockwise: false, // 逆时针
+    // 隐藏刻度线
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+    splitLine: {
+      show: false,
+    },
+  },
+  radiusAxis: {
+    type: "category",
+    // 隐藏刻度线
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+    splitLine: {
+      show: false,
+    },
+  },
+  polar: {
+    center: ["50%", "50%"],
+    radius: "175%", //图形大小
+  },
+  series: [
+    {
+      type: "bar",
+      data: [
+        {
+          name: "作文得分",
+          value: 75,
+          itemStyle: {
+            normal: {
+              color: "red",
+              // colorStops: [
+              //     {
+              //       offset: 0, color: 'rgba(137,185,253,0.59)' // 0% 处的颜色
+              //     },
+              //     {
+              //       offset: 0.25, color: 'rgba(137,185,253,0.39)' // 50% 处的颜色
+              //     },
+              //     {
+              //       offset: 0.75, color: 'rgba(137,185,253,0.1)' // 50% 处的颜色
+              //     },
+              //     {
+              //       offset: 1, color: 'rgba(137,185,253,0.07)' // 100% 处的颜色
+              //     }
+              // ],
+            },
+          },
+        },
+      ],
+      coordinateSystem: "polar",
+      roundCap: true,
+      barWidth: 14,
+      barGap: "-100%", // 两环重叠
+      z: 2,
+    },
+    {
+      // 灰色环
+      type: "bar",
+      silent: true,
+      data: [
+        {
+          value: 100,
+          itemStyle: {
+            color: "#F5F7FA",
+            shadowColor: "#F5F7FA",
+            shadowBlur: 5,
+            shadowOffsetY: 2,
+          },
+        },
+      ],
+      coordinateSystem: "polar",
+      roundCap: true,
+      barWidth: 14,
+      barGap: "-100%", // 两环重叠
+      z: 1,
+    },
+  ],
+};
+export const collectionStatistics = {
+  title: {
+    // text: '2019年销售水量和主营业务收入对比',
+    textStyle: {
+      align: "center",
+      color: "#fff",
+      fontSize: 20,
+    },
+    top: "3%",
+    left: "0%",
+  },
+  // backgroundColor: '#F5F7FA',
+  grid: {
+    top: "10%",
+    left: "2%",
+    right: "0%",
+    bottom: "15%", //也可设置left和right设置距离来控制图表的大小
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+      label: {
+        show: true,
+      },
+    },
+  },
+  // legend: {
+  //   data: ["环比", "主营业务"],
+  //   top: "0%",
+  //   right: "10%",
+  //   textStyle: {
+  //     color: "#ffffff",
+  //   },
+  // },
+  xAxis: {
+    data: [],
+    axisLine: {
+      show: true, //隐藏X轴轴线
+      lineStyle: {
+        color: "#000000",
+      },
+    },
+    axisTick: {
+      show: true, //隐藏X轴刻度
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: "#000000", //X轴文字颜色
+      },
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
+      name: "",
+      nameTextStyle: {
+        color: "#000000",
+      },
+      splitLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#000000",
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#000000",
+        },
+      },
+    },
+    {
+      type: "value",
+      gridIndex: 0,
+      min: 50,
+      max: 100,
+      splitNumber: 8,
+      splitLine: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          // color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "环比",
+      type: "line",
+      smooth: false, //平滑曲线显示
+      showAllSymbol: true, //显示所有图形。
+      symbol: "circle", //标记的图形为实心圆
+      symbolSize: 15, //标记的大小
+      hoverAnimation: false,
+      // itemStyle: {
+      //     //折线拐点标志的样式
+      //     color: "#66C87F",
+      //     borderWidth: '10',
+      // },
+      itemStyle: {
+        color: "#CE2872",
+        borderColor: "#fff",
+        borderWidth: 4,
+        shadowColor: "rgba(0, 0, 0, 0)",
+        shadowBlur: 0,
+        shadowOffsetY: 2,
+        shadowOffsetX: 2,
+      },
+      lineStyle: {
+        color: "#CE2872",
+      },
+      // areaStyle: {
+      //   color: "rgba(117,211,199, 0.16)",
+      // },
+      data: [],
+    },
+    {
+      name: "",
+      type: "bar",
+      barWidth: 18,
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#595FAE", // 0% 处的颜色
+            },
+            {
+              offset: 0.2,
+              color: "#595FAE", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#595FAE", // 100% 处的颜色
+            },
+          ],
+        },
+      },
+      data: [],
+    },
+  ],
+};

src/views/statisticalanalysis/components/echart/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    style="height: 100%; width: 100%; position: absolute; left: 0; top: 0"
+    class="ChartsBar"
+    :id="id"
+  ></div>
+</template>
+
+<script>
+import { markRaw } from "vue";
+import * as echarts from "echarts";
+import * as _ from "lodash";
+import { collectionStatistics } from "./echarts.js";
+// 柱状图初始数据
+export default {
+  name: "ChartsBar",
+  props: {
+    // 柱状图生成所需id
+    id: {
+      type: String,
+      default: "collection_ecahrt",
+    },
+    // 柱状图额外的数据
+    option: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      levelList: [
+        {
+          name: "加货重量统计",
+        },
+        {
+          name: "航班量统计",
+        },
+        {
+          name: "特货统计",
+        },
+        {
+          name: "货量统计",
+        },
+      ],
+      myChart: null, //柱状图实例
+      desc: 300, // 防抖时间
+    };
+  },
+  mounted() {
+    // 柱状图dom
+    const chartDom = document.getElementById(this.id);
+    // 柱状图初始化
+    this.myChart = markRaw(echarts.init(chartDom));
+    collectionStatistics.xAxis.data = this.option.time;
+    collectionStatistics.series[0].data = this.option.data1;
+    collectionStatistics.series[1].data = this.option.data2;
+    collectionStatistics.series[1].name = this.option.kg;
+    collectionStatistics.yAxis[0].name = this.option.kg;
+    // 生成柱状图
+    this.myChart.setOption(collectionStatistics);
+    // 监听页面缩放 防止dom重复渲染
+    window.addEventListener("resize", _.debounce(this.handle, this.desc));
+  },
+  watch: {
+    // 监听数据变化，重绘折线图
+    option: {
+      deep: true,
+      handler(newVal) {
+        console.log(newVal);
+        const chartDom = document.getElementById(this.id);
+        // 先移除之前的实例，保证重绘的流畅性
+        chartDom.removeAttribute("_echarts_instance_");
+        this.myChart = markRaw(echarts.init(chartDom));
+        collectionStatistics.xAxis.data = newVal.time;
+        collectionStatistics.series[0].data = newVal.data1;
+        collectionStatistics.series[1].data = newVal.data2;
+        collectionStatistics.series[1].name = this.option.kg;
+        collectionStatistics.yAxis[0].name = this.option.kg;
+        this.myChart.setOption(collectionStatistics);
+      },
+    },
+  },
+  destroyed() {
+    // 销毁实例和移除监听
+    this.myChart.dispose();
+    window.removeEventListener("resize", this.handle);
+  },
+  methods: {
+    /**
+     * @description: 图形缩放
+     * @param {*}
+     * @return {*}
+     */
+    handle() {
+      this.myChart.resize();
+    },
+  },
+};
+</script>

src/views/statisticalanalysis/components/echart/statisticsHeader.vue

@@ -0,0 +1,576 @@
+<template>
+  <div class="flight-statistics-header">
+    <template v-if="title">
+      <div class="title">{{ title }}</div>
+    </template>
+    <el-form ref="form" class="form" :model="formData">
+      <el-form-item
+        v-for="item in formItems"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :style="{
+          width: item.width || '120px',
+        }"
+      >
+        <template v-if="item.inputType === 'input'">
+          <el-input
+            v-model="formData[item.prop]"
+            :size="item.size || 'small'"
+            :placeholder="item.placeholder || '请输入'"
+            :clearable="item.clearable"
+          />
+        </template>
+        <template v-if="item.inputType === 'select'">
+          <el-select
+            v-model="formData[item.prop]"
+            :filterable="item.filterable"
+            :default-first-option="item.filterable"
+            :size="item.size || 'small'"
+            :placeholder="item.placeholder || '请选择'"
+            :multiple="item.multiple"
+            :collapse-tags="item.multiple"
+            :clearable="item.clearable"
+            :disabled="item.disabled"
+            @change="
+              (value) => {
+                item.changeHandler && call(item.changeHandler, value);
+              }
+            "
+          >
+            <el-option
+              v-for="option in item.options"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+            />
+          </el-select>
+        </template>
+        <template v-if="item.inputType === 'datePicker'">
+          <el-date-picker
+            v-model="formData[item.prop]"
+            :size="item.size || 'small'"
+            type="daterange"
+            value-format="YYYY-MM-DD"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+        </template>
+        <template v-if="item.inputType === 'cascader'">
+          <el-cascader
+            v-model="formData[item.prop]"
+            :size="item.size || 'small'"
+            :placeholder="item.placeholder || '请选择'"
+            :options="item.options"
+            :props="item.props"
+            :clearable="item.clearable"
+            :disabled="item.disabled"
+            @change="
+              (value) => {
+                item.changeHandler && call(item.changeHandler, value);
+              }
+            "
+          />
+        </template>
+      </el-form-item>
+      <el-form-item v-if="formItems.length">
+        <el-button type="primary" size="small" @click="getData">{{
+          buttonText
+        }}</el-button>
+      </el-form-item>
+      <el-form-item v-if="withExport">
+        <img
+          src="../../../assets/nav/ic_export.png"
+          title="导出"
+          class="btn-icon-only"
+          @click="exportClickHandler"
+        />
+      </el-form-item>
+      <el-form-item v-if="withSetting">
+        <img
+          src="../../../assets/nav/ic_setting.png"
+          title="节点设置"
+          class="btn-icon-only"
+          @click="settingClickHandler"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { Query } from "@/api/dataIntegration";
+export default {
+  name: "StatisticsHeader",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    items: {
+      type: Array,
+      default: undefined,
+    },
+    customItems: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Object,
+      default: undefined,
+    },
+    buttonText: {
+      type: String,
+      default: "查询",
+    },
+    withExport: {
+      type: Boolean,
+      default: true,
+    },
+    withSetting: {
+      type: Boolean,
+      default: false,
+    },
+    eledata: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      formData: {
+        range: "",
+        inOrOut: "",
+        interval: "",
+        airline: [],
+        area: "",
+        airport: [],
+        terminal: "",
+        dateTime: "",
+        flightType: "",
+        baggageType: "",
+        passengerType: [],
+      },
+      formItems: [
+        {
+          prop: "range",
+          inputType: "select",
+          placeholder: "统计范围",
+          requiredWarning: "请先选择统计范围",
+          options: [
+            {
+              value: "全部",
+              label: "全部",
+            },
+            {
+              value: "航线",
+              label: "航线",
+            },
+            {
+              value: "基地分公司",
+              label: "基地分公司",
+            },
+            {
+              value: "航站",
+              label: "航站",
+            },
+            {
+              value: "航站楼",
+              label: "航站楼",
+            },
+          ],
+          changeHandler(value) {
+            this.formData.inOrOut = "";
+            // this.formData.interval = ''
+            this.formData.area = "";
+            this.formData.airline = "";
+            this.formData.airport = "";
+            this.formData.terminal = "";
+            this.setInOrOutOptions(value);
+            const airlineItem = this.formItems.find(
+              (item) => item.prop === "airline"
+            );
+            const areaItem = this.formItems.find(
+              (item) => item.prop === "area"
+            );
+            const airportItem = this.formItems.find(
+              (item) => item.prop === "airport"
+            );
+            const terminalItem = this.formItems.find(
+              (item) => item.prop === "terminal"
+            );
+            airlineItem && (airlineItem.disabled = true);
+            areaItem && (areaItem.disabled = true);
+            airportItem && (airportItem.disabled = true);
+            terminalItem && (terminalItem.disabled = true);
+            switch (value) {
+              case "航线":
+                airlineItem && (airlineItem.disabled = false);
+                break;
+              case "基地分公司":
+                areaItem && (areaItem.disabled = false);
+                break;
+              case "航站":
+                airportItem && (airportItem.disabled = false);
+                break;
+              case "航站楼":
+                terminalItem && (terminalItem.disabled = false);
+                break;
+              default:
+                break;
+            }
+          },
+        },
+        {
+          prop: "inOrOut",
+          inputType: "select",
+          placeholder: "进离港",
+          requiredWarning: "请先选择进离港",
+          clearable: true,
+          options: [],
+        },
+        {
+          prop: "interval",
+          inputType: "select",
+          placeholder: "时间维度",
+          requiredWarning: "请先选择统计时间维度",
+          clearable: true,
+          options: [
+            {
+              value: "日",
+              label: "按日统计",
+            },
+            {
+              value: "月",
+              label: "按月统计",
+            },
+            {
+              value: "季",
+              label: "按季统计",
+            },
+            {
+              value: "年",
+              label: "按年统计",
+            },
+          ],
+        },
+        {
+          prop: "dateTime",
+          inputType: "datePicker",
+          clearable: true,
+          width: "240px",
+          requiredWarning: "请先选择统计时间范围",
+        },
+        {
+          prop: "airline",
+          inputType: "select",
+          placeholder: "航线",
+          width: "180px",
+          filterable: true,
+          clearable: true,
+          multiple: true,
+          disabled: true,
+          queryId: DATACONTENT_ID.airlineOptions,
+          setKey: "a2",
+          options: [],
+        },
+        {
+          prop: "area",
+          inputType: "select",
+          placeholder: "基地分公司",
+          filterable: true,
+          clearable: true,
+          disabled: true,
+          queryId: DATACONTENT_ID.areaOptions,
+          setKey: "a5",
+          options: [],
+        },
+        {
+          prop: "airport",
+          inputType: "select",
+          placeholder: "航站",
+          width: "150px",
+          filterable: true,
+          clearable: true,
+          multiple: true,
+          disabled: true,
+          queryId: DATACONTENT_ID.AirportId,
+          setKey: "a2",
+          options: [],
+        },
+        {
+          prop: "terminal",
+          inputType: "select",
+          placeholder: "航站楼",
+          filterable: true,
+          clearable: true,
+          disabled: true,
+          queryId: DATACONTENT_ID.TerminalId,
+          setKey: "a2",
+          options: [],
+        },
+      ],
+    };
+  },
+  watch: {
+    items: {
+      handler(val) {
+        val && (this.formItems = val);
+      },
+      deep: true,
+      immediate: true,
+    },
+    data: {
+      handler(val) {
+        val && (this.formData = val);
+      },
+      deep: true,
+      immediate: true,
+    },
+    eledata: {
+      handler(val) {
+        this.formData = {};
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  created() {
+    this.customItems.forEach((item) => {
+      if (typeof item.itemIndex === "number") {
+        if (item.prop) {
+          this.formItems.splice(item.itemIndex, item.replaceNum, item);
+        } else {
+          this.formItems.splice(item.itemIndex, item.replaceNum);
+        }
+      } else {
+        this.formItems.push(item);
+      }
+    });
+    this.formItems.forEach((item) => {
+      if (item.queryId && item.setKey) {
+        this.getOptions(item.queryId, item.setKey, item.prop);
+      }
+      if (item.defaultOption) {
+        this.formData[item.prop] = item.defaultOption;
+      }
+    });
+  },
+  methods: {
+    call(func, ...args) {
+      func.call(this, ...args);
+    },
+    getData() {
+      try {
+        this.formItems.forEach((item) => {
+          if (
+            item.requiredWarning &&
+            (!this.formData[item.prop] || this.formData[item.prop].length === 0)
+          ) {
+            throw new Error(item.requiredWarning);
+          }
+        });
+      } catch (error) {
+        this.$message.warning(error.message);
+        return;
+      }
+      if (this.formData.range === "航线" && !this.formData.airline) {
+        this.$message.warning("请先选择航线");
+        return;
+      } else if (this.formData.range === "航站" && !this.formData.airport) {
+        this.$message.warning("请先选择航站");
+        return;
+      } else if (this.formData.range === "基地分公司" && !this.formData.area) {
+        this.$message.warning("请先选择基地分公司");
+        return;
+      }
+      this.$emit("getFormData", this.formData);
+    },
+    exportClickHandler() {
+      this.$emit("export");
+    },
+    settingClickHandler() {
+      this.$emit("setting");
+    },
+    setInOrOutOptions(range) {
+      const theInOrOutItem = this.formItems.find(
+        (item) => item.prop === "inOrOut"
+      );
+      switch (range) {
+        case "全部":
+        case "航线":
+          theInOrOutItem.options = [
+            {
+              label: "全部",
+              value: "全部",
+            },
+          ];
+          this.formData.inOrOut = "全部";
+          this.formItems[1].disabled = true;
+          break;
+        case "基地分公司":
+        case "航站":
+        case "航站楼":
+          theInOrOutItem.options = [
+            {
+              value: "全部",
+              label: "全部",
+            },
+            {
+              value: "进港",
+              label: "进港",
+            },
+            {
+              value: "离港",
+              label: "离港",
+            },
+          ];
+          this.formItems[1].disabled = false;
+          break;
+        default:
+          theInOrOutItem.options = [];
+          this.formItems[1].disabled = false;
+          break;
+      }
+    },
+    async getOptions(queryId, setKey, prop) {
+      try {
+        const { code, returnData, message } = await Query({
+          id: queryId,
+          dataContent: [],
+        });
+        if (Number(code) === 0) {
+          const arr = returnData.listValues.map((element) => ({
+            label: element[setKey],
+            value: element[setKey],
+          }));
+          const theItem = this.formItems.find((item) => item.prop === prop);
+          theItem.options = arr;
+        } else {
+          this.$message.error(message);
+        }
+      } catch (error) {
+        this.$message.error("失败");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flight-statistics-header {
+  padding-top: 24px;
+  min-height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  .title {
+    margin-right: 24px;
+    padding-left: 16px;
+    // min-width: 190px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 18px;
+    font-family: Helvetica, "Microsoft YaHei";
+    font-weight: bold;
+    white-space: nowrap;
+    position: relative;
+    &::before {
+      content: "";
+      width: 4px;
+      height: 20px;
+      background: #ac014d;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+    }
+  }
+  ::v-deep .form {
+    display: flex;
+    flex-wrap: wrap;
+    > .el-form-item {
+      margin-bottom: 24px;
+      // width: 185px;
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+      &:nth-last-child(2),
+      &:nth-last-child(3) {
+        margin-right: 16px;
+      }
+      .el-form-item__content {
+        height: 32px;
+        line-height: 30px;
+        .el-input {
+          &.is-disabled .el-input__inner {
+            border: none;
+          }
+          .el-input__inner {
+            border-radius: 4px;
+            font-family: Helvetica, "Microsoft YaHei";
+            color: #303133;
+            border-color: #ffffff;
+            &:hover {
+              border-color: #c0c4cc;
+            }
+            &:focus {
+              border-color: #409eff;
+            }
+          }
+        }
+        .el-date-editor--daterange.el-input,
+        .el-date-editor--daterange.el-input__inner,
+        .el-date-editor--timerange.el-input,
+        .el-date-editor--timerange.el-input__inner {
+          width: 100%;
+          border-radius: 4px;
+          border-color: #ffffff;
+          color: #303133;
+          font-family: Helvetica, "Microsoft YaHei";
+          &:hover {
+            border-color: #c0c4cc;
+          }
+          &.is-active {
+            border-color: #409eff;
+          }
+          .el-input__icon {
+            color: #303133;
+          }
+          .el-range-separator {
+            line-height: 28px;
+          }
+        }
+        .el-select,
+        .el-cascader {
+          .el-input {
+            .el-icon-arrow-up::before {
+              content: "\e78f";
+            }
+            .el-icon-arrow-down::before {
+              content: "\e790";
+            }
+            &:not(.is-disabled) {
+              .el-input__icon,
+              .el-input__inner::-webkit-input-placeholder {
+                color: #303133;
+              }
+            }
+          }
+        }
+        .el-button {
+          border-radius: 4px;
+          font-family: Helvetica, "Microsoft YaHei";
+        }
+        .btn-icon-only {
+          width: 32px;
+          height: 32px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/statisticalanalysis/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>

src/views/statisticalanalysis/specialgoods/index.vue

@@ -0,0 +1,448 @@
+<template>
+  <div class="airportInfo">
+    <div class="header">
+      <div
+        :class="action === index ? 'navs' : 'nav'"
+        v-for="(item, index) in levelList"
+        :key="index"
+        @click="up(index)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="variable">
+      <StatisticsHeader
+        :title="titleTop"
+        :items="formItems"
+        :data="formData"
+        :eledata="eledata"
+        with-setting
+        :withSetting="false"
+        :withExport="false"
+        @getFormData="getFormData"
+      />
+    </div>
+    <div class="echart">
+      <Echarts :id="dataid" :option="tableData" />
+    </div>
+  </div>
+  <!-- <div
+    style="height: 100%; width: 100%; position: absolute; left: 0; top: 0"
+    class="ChartsBar"
+    :id="id"
+  ></div> -->
+</template>
+
+<script>
+import Echarts from "../components/echart/index.vue";
+import StatisticsHeader from "../components/echart/statisticsHeader.vue";
+import { Query } from "@/api/webApi";
+export default {
+  name: "ChartsBar",
+  data() {
+    return {
+      action: 0,
+      dataid: "collection_ecahrt0",
+      listqueryTemplateID: DATACONTENT_ID.modeLoadingweight,
+      eledata: null,
+      isShow: Echarts,
+      tableData: {
+        time: [],
+        data1: [],
+        data2: [],
+        kg: "",
+        tyol: "",
+      },
+      formData: {
+        airport: "",
+        dateTime: "",
+      },
+      titleTop: "加货重量统计",
+      levelList: [
+        {
+          name: "加货重量统计",
+        },
+        {
+          name: "航班量统计",
+        },
+        {
+          name: "特货统计",
+        },
+        {
+          name: "货量统计",
+        },
+      ],
+      formItems: [
+        {
+          prop: "fttp",
+          inputType: "select",
+          placeholder: "国内国际",
+          requiredWarning: "请先选择国内国际",
+          clearable: true,
+          options: [
+            {
+              value: "国内离港",
+              label: "国内离港",
+            },
+            {
+              value: "国际离港",
+              label: "国际离港",
+            },
+          ],
+        },
+        {
+          prop: "kht",
+          inputType: "select",
+          placeholder: "客货类型",
+          requiredWarning: "请先选择客货类型",
+          clearable: true,
+          options: [
+            {
+              value: "客机",
+              label: "客机",
+            },
+            {
+              value: "货机",
+              label: "货机",
+            },
+            {
+              value: "其它",
+              label: "其它",
+            },
+            {
+              value: "全部",
+              label: "全部",
+            },
+          ],
+        },
+        {
+          prop: "td",
+          inputType: "select",
+          placeholder: "统计维度",
+          requiredWarning: "请先选择统计时间维度",
+          clearable: true,
+          options: [
+            {
+              value: "月",
+              label: "月",
+            },
+            {
+              value: "年",
+              label: "年",
+            },
+          ],
+        },
+        {
+          prop: "spe",
+          inputType: "select",
+          placeholder: "特货类型",
+          requiredWarning: "请先选择特货类型",
+          clearable: false,
+          disabled: true,
+          options: [
+            {
+              value: "贵重物品",
+              label: "贵重物品",
+            },
+            {
+              value: "鲜活",
+              label: "鲜活",
+            },
+            {
+              value: "动物",
+              label: "动物",
+            },
+            {
+              value: "邮件",
+              label: "邮件",
+            },
+            {
+              value: "锂电池",
+              label: "锂电池",
+            },
+            {
+              value: "全部",
+              label: "全部",
+            },
+          ],
+        },
+        {
+          prop: "set",
+          inputType: "select",
+          placeholder: "统计运单",
+          requiredWarning: "",
+          clearable: false,
+          disabled: true,
+          options: [
+            {
+              value: "1",
+              label: "统计运单",
+            },
+            {
+              value: "2",
+              label: "统计重量",
+            },
+          ],
+        },
+        {
+          prop: "dateTime",
+          inputType: "datePicker",
+          clearable: true,
+          width: "240px",
+          options: [],
+        },
+      ],
+    };
+  },
+  mounted() {
+    // this.getQuery([]);
+  },
+  watch: {
+    // 监听数据变化，重绘折线图
+    option: {
+      deep: true,
+      handler(newVal) {},
+    },
+  },
+  destroyed() {},
+  methods: {
+    up(index) {
+      this.action = index;
+      if (index === 0) {
+        this.eledata = 0;
+        this.dataid = "collection_ecahrt0";
+        this.listqueryTemplateID = DATACONTENT_ID.modeLoadingweight;
+        this.titleTop = "加货重量统计";
+        this.tableData.time = [];
+        this.tableData.data1 = [];
+        this.tableData.data2 = [];
+        this.formItems[3].disabled = true;
+        this.formItems[4].disabled = true;
+        this.formItems[0].options = [
+          {
+            value: "国内离港",
+            label: "国内离港",
+          },
+          {
+            value: "国际离港",
+            label: "国际离港",
+          },
+        ];
+      } else if (index === 1) {
+        this.eledata = 1;
+        this.dataid = "collection_ecahrt1";
+        this.formItems[3].disabled = true;
+        this.formItems[4].disabled = true;
+        this.formItems[0].options = [
+          {
+            value: "国内离港",
+            label: "国内离港",
+          },
+          {
+            value: "国际离港",
+            label: "国际离港",
+          },
+          {
+            value: "国内进港",
+            label: "国内进港",
+          },
+          {
+            value: "国际进港",
+            label: "国际进港",
+          },
+        ];
+        this.tableData.time = [];
+        this.tableData.data1 = [];
+        this.tableData.data2 = [];
+        this.listqueryTemplateID = DATACONTENT_ID.modeFlightvolume;
+        // this.getQuery();
+        this.titleTop = "航班量统计";
+      } else if (index === 2) {
+        this.dataid = "collection_ecahrt2";
+        this.formItems[3].disabled = false;
+        this.formItems[4].disabled = false;
+        this.tableData.time = [];
+        this.tableData.data1 = [];
+        this.tableData.data2 = [];
+        this.formItems[0].options = [
+          {
+            value: "国内离港",
+            label: "国内离港",
+          },
+          {
+            value: "国际离港",
+            label: "国际离港",
+          },
+          {
+            value: "国内进港",
+            label: "国内进港",
+          },
+          {
+            value: "国际进港",
+            label: "国际进港",
+          },
+        ];
+        this.eledata = 2;
+        this.listqueryTemplateID = DATACONTENT_ID.modeSpecialgoods;
+        this.titleTop = "特货统计";
+      } else if (index === 3) {
+        this.dataid = "collection_ecahrt3";
+        this.tableData.time = [];
+        this.tableData.data1 = [];
+        this.tableData.data2 = [];
+        this.formItems[0].options = [
+          {
+            value: "国内离港",
+            label: "国内离港",
+          },
+          {
+            value: "国际离港",
+            label: "国际离港",
+          },
+          {
+            value: "国内进港",
+            label: "国内进港",
+          },
+          {
+            value: "国际进港",
+            label: "国际进港",
+          },
+        ];
+        this.formItems[3].disabled = true;
+        this.formItems[4].disabled = true;
+        this.eledata = 3;
+        this.titleTop = "货量统计";
+        this.listqueryTemplateID = DATACONTENT_ID.modeCargostatistics;
+      }
+    },
+    getFormData(data) {
+      if (this.action === 2) {
+        let option = [
+          {
+            fttp: data.fttp,
+            kht: data.kht,
+            td: data.td,
+            fd1: data.dateTime[0],
+            fd2: data.dateTime[1],
+            spe: data.spe,
+          },
+        ];
+        this.getQuery(option, data.set);
+      } else {
+        let option = [
+          {
+            fttp: data.fttp,
+            kht: data.kht,
+            td: data.td,
+            fd1: data.dateTime[0],
+            fd2: data.dateTime[1],
+          },
+        ];
+        this.getQuery(option, null);
+      }
+    },
+    //获取表格数据
+    async getQuery(data, dat) {
+      try {
+        const { code, returnData } = await Query({
+          id: this.listqueryTemplateID,
+          dataContent: data,
+        });
+        if (code == 0) {
+          returnData.listValues.forEach((element) => {
+            if (this.action === 0) {
+              this.tableData.data2.push(element.weight ? element.weight : 0);
+              this.tableData.time.push(element.dat);
+              this.tableData.kg = "单位：吨";
+            } else if (this.action === 1) {
+              this.tableData.data2.push(
+                element.flightNum ? element.flightNum : 0
+              );
+              this.tableData.time.push(element.dat);
+              this.tableData.kg = "单位：班";
+            } else if (this.action === 2) {
+              this.tableData.time.push(element.dat);
+              if (dat == 1) {
+                this.tableData.data2.push(
+                  element.flightNum ? element.flightNum : 0
+                );
+                this.tableData.kg = "单位：单";
+              } else if (dat == 2) {
+                this.tableData.kg = "单位:吨";
+                this.tableData.data2.push(element.weight ? element.weight : 0);
+              }
+            } else if (this.action === 3) {
+              this.tableData.data2.push(element.weight ? element.weight : 0);
+              this.tableData.time.push(element.fdt);
+              this.tableData.kg = "单位：吨";
+            }
+            this.tableData.data1 = [];
+          });
+          let ar = [];
+          for (let index = 0; index < this.tableData.data2.length; index++) {
+            const element =
+              (this.tableData.data2[index + 1] - this.tableData.data2[index]) /
+              this.tableData.data2[index];
+            this.tableData.data1.push(element);
+          }
+          // this.tableData = returnData.listValues;
+          // console.log(this.tableData[0])
+        }
+      } catch (error) {
+        this.page--;
+      }
+    },
+  },
+  components: {
+    Echarts,
+    StatisticsHeader,
+  },
+};
+</script>
+<style lang="scss" scoped>
+.airportInfo {
+  position: relative;
+  .header {
+    width: 103%;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f7f7f7;
+    position: relative;
+    left: -23px;
+    > .nav {
+      padding: 0 30px 0 30px;
+      cursor: pointer;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #101116;
+    }
+    > .navs {
+      height: 100%;
+      padding: 0 30px 0 30px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #ac014d;
+      border-bottom: 2px solid #ac014d;
+    }
+  }
+  .variable {
+    width: 100%;
+    height: 64px;
+  }
+  .echart {
+    width: 100%;
+    height: 710px;
+    position: absolute;
+    background: #ffffff;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+}
+</style>