统计图表修改、添加异常行李分析

public/config.js

@@ -164,6 +164,7 @@ window.SERVICE_ID = {
   LuggageNodeId: 200245, // 节点位置
   workload: 200306, // 工作量
   agentCode: 200307, // 操作者下拉
+  abnormalBaggageClassification: 200308, // 异常行李统计
 }
 
 window.AIRPORT_ID = {

src/router/routes/routes-file-temp.js

@@ -13,7 +13,7 @@ const uploadRoutes = {
         imgstyleup: 'ic_list_nav_upload_check.png',
       },
       component: {
-        render (c) {
+        render(c) {
           return c('router-view')
         },
       },
@@ -38,7 +38,7 @@ const statisticsChartsRoutes = {
   children: [
     {
       path: '/statisticsCharts',
-      redirect: 'airlineCompany',
+      redirect: '/statisticsCharts/baggage',
       component: () => import('@/views/statisticsCharts'),
       meta: {
         title: '统计图表',
@@ -46,245 +46,469 @@ const statisticsChartsRoutes = {
         imgstyleup: 'ic_list_nav_arrive_check.png',
       },
       children: [
+        // {
+        //   path: 'airlineCompany',
+        //   redirect: 'airlineCompany/flight',
+        //   name: 'AirlineCompanyStatistics',
+        //   hidden: true,
+        //   component: {
+        //     render(h) {
+        //       return h('router-view')
+        //     },
+        //   },
+        //   children: [
+        //     {
+        //       path: 'flight',
+        //       name: 'FlightStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/flightStatisticsCharts'
+        //         ),
+        //       meta: {
+        //         title: '航班量统计',
+        //         roles: ['flight_volume_statistics'],
+        //       },
+        //     },
+        //     {
+        //       path: 'baggage',
+        //       name: 'BaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/baggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '行李量统计', roles: ['baggage_statistics'] },
+        //     },
+        //     {
+        //       path: 'specialBaggage',
+        //       name: 'SpecialBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/specialBaggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '特殊行李量统计' },
+        //     },
+        //     {
+        //       path: 'baggagePassenger',
+        //       name: 'BaggagePassengerStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/baggagePassengerStatisticsCharts'
+        //         ),
+        //       meta: { title: '行李旅客量统计' },
+        //     },
+        //     {
+        //       path: 'baggageAverage',
+        //       name: 'BaggageAverageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/baggageAverageStatisticsCharts'
+        //         ),
+        //       meta: { title: '平均行李量统计' },
+        //     },
+        //     {
+        //       path: 'abnormalBaggage',
+        //       name: 'AbnormalBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/abnormalBaggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '异常行李量统计' },
+        //     },
+        //     {
+        //       path: 'complaintBaggage',
+        //       name: 'ComplaintBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/complaintBaggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '投诉行李量统计' },
+        //     },
+        //     {
+        //       path: 'compensationBaggage',
+        //       name: 'CompensationBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/compensationBaggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '赔偿行李量统计' },
+        //     },
+        //     {
+        //       path: 'compensation',
+        //       name: 'CompensationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/airlineCompany/compensationStatisticsCharts'
+        //         ),
+        //       meta: { title: '赔偿金额统计' },
+        //     },
+        //   ],
+        // },
+        // {
+        //   path: 'passengerClassification',
+        //   redirect: 'passengerClassification/baggagePassenger',
+        //   name: 'PassengerStatistics',
+        //   hidden: true,
+        //   component: {
+        //     render (h) {
+        //       return h('router-view')
+        //     },
+        //   },
+        //   children: [
+        //     {
+        //       path: 'baggagePassenger',
+        //       name: 'PassengerStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/passengerClassification/baggagePassengerStatisticsCharts'
+        //         ),
+        //       meta: { title: '行李旅客量统计' },
+        //     },
+        //     {
+        //       path: 'baggage',
+        //       name: 'PassengerBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/passengerClassification/baggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '行李量统计' },
+        //     },
+        //     {
+        //       path: 'specialBaggage',
+        //       name: 'PassengerSpecialBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/passengerClassification/specialBaggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '特殊行李量统计' },
+        //     },
+        //     {
+        //       path: 'abnormalBaggage',
+        //       name: 'PassengerAbnormalBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/passengerClassification/abnormalBaggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '异常行李量统计' },
+        //     },
+        //     {
+        //       path: 'complaintBaggage',
+        //       name: 'PassengerComplaintBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/passengerClassification/complaintBaggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '投诉行李量统计' },
+        //     },
+        //     {
+        //       path: 'compensationBaggage',
+        //       name: 'PassengerCompensationBaggageStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/passengerClassification/compensationBaggageStatisticsCharts'
+        //         ),
+        //       meta: { title: '赔偿行李量统计' },
+        //     },
+        //     {
+        //       path: 'compensation',
+        //       name: 'PassengerCompensationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/passengerClassification/compensationStatisticsCharts'
+        //         ),
+        //       meta: { title: '赔偿金额统计' },
+        //     },
+        //   ],
+        // },
+        // {
+        //   path: 'flightClassification',
+        //   redirect: 'flightClassification/flight',
+        //   name: 'FlightClassificationStatistics',
+        //   hidden: true,
+        //   component: {
+        //     render (h) {
+        //       return h('router-view')
+        //     },
+        //   },
+        //   children: [
+        //     {
+        //       path: 'flight',
+        //       name: 'FlightClassificationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/flightClassification/flightClassificationStatisticsCharts'
+        //         ),
+        //       meta: { title: '航班量统计' },
+        //     },
+        //     {
+        //       path: 'baggage',
+        //       name: 'FlightBaggageClassificationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/flightClassification/baggageClassificationStatisticsCharts'
+        //         ),
+        //       meta: { title: '行李量统计' },
+        //     },
+        //     {
+        //       path: 'passenger',
+        //       name: 'FlightPassengerClassificationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/flightClassification/passengerClassificationStatisticsCharts'
+        //         ),
+        //       meta: { title: '行李旅客量统计' },
+        //     },
+        //   ],
+        // },
+        // {
+        //   path: 'report',
+        //   redirect: 'report/reportStatistics',
+        //   name: 'Report',
+        //   hidden: true,
+        //   component: {
+        //     render (h) {
+        //       return h('router-view')
+        //     },
+        //   },
+        //   children: [
+        //     {
+        //       path: 'reportStatistics',
+        //       name: 'ReportStatistics',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/report/reportStatistics'
+        //         ),
+        //       meta: {
+        //         title: '运送效率报表统计',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //     {
+        //       path: 'transitTables',
+        //       name: 'TransitTables',
+        //       hidden: true,
+        //       component: () =>
+        //         import('@/views/statisticsCharts/views/report/transitTables'),
+        //       meta: {
+        //         title: '中转四个流向统计',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //     {
+        //       path: 'transferDirectionTable',
+        //       name: 'TransferDirectionTable',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/report/transferDirectionTable'
+        //         ),
+        //       meta: {
+        //         title: '中转流向明细统计',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //     {
+        //       path: 'transferBaggageTable',
+        //       name: 'TransferBaggageTable',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/report/transferBaggageTable'
+        //         ),
+        //       meta: {
+        //         title: '中转行李因素分析统计',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //     {
+        //       path: 'baggageProportionTable',
+        //       name: 'BaggageProportionTable',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/report/baggageProportionTable'
+        //         ),
+        //       meta: {
+        //         title: '中转行李比例明细统计',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //     {
+        //       path: 'scanningStatistics',
+        //       name: 'ScanningStatistics',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/report/scanningStatistics'
+        //         ),
+        //       meta: {
+        //         title: '航站BRS扫描统计',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //     {
+        //       path: 'scanDataTable',
+        //       name: 'scanDataTable',
+        //       hidden: true,
+        //       component: () =>
+        //         import('@/views/statisticsCharts/views/report/scanDataTable'),
+        //       meta: {
+        //         title: 'Mannual Load扫描数据统计表',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //     {
+        //       path: 'rfldTable',
+        //       name: 'rfldTable',
+        //       hidden: true,
+        //       component: () =>
+        //         import('@/views/statisticsCharts/views/report/rfldTable'),
+        //       meta: {
+        //         title: '航易行RFID扫描数据统计表',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //     {
+        //       path: 'Percentageofbaggage',
+        //       name: 'Percentageofbaggage',
+        //       hidden: true,
+        //       component: () =>
+        //         import('@/views/statisticsCharts/views/report/Percentageofbaggage'),
+        //       meta: {
+        //         title: '行李全流程服务水平百分比',
+        //         roles: ['scanning_node_and_location_analysis'],
+        //       },
+        //     },
+        //   ],
+        // },
+        // {
+        //   path: 'specialClassification',
+        //   redirect: 'specialClassification/special',
+        //   name: 'SpecialStatistics',
+        //   hidden: true,
+        //   component: {
+        //     render (h) {
+        //       return h('router-view')
+        //     },
+        //   },
+        //   children: [
+        //     {
+        //       path: 'special',
+        //       name: 'SpecialBaggageClassificationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/special/specialBaggageClassificationStatisticsCharts'
+        //         ),
+        //       meta: { title: '特殊行李分类统计' },
+        //     },
+        //     {
+        //       path: 'abnormal',
+        //       name: 'AbnormalBaggageClassificationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/special/abnormalBaggageClassificationStatisticsCharts'
+        //         ),
+        //       meta: { title: '异常行李分类统计' },
+        //     },
+        //     {
+        //       path: 'compensationBaggage',
+        //       name: 'CompensationBaggageClassificationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/special/compensationBaggageClassificationStatisticsCharts'
+        //         ),
+        //       meta: { title: '赔偿行李分类统计' },
+        //     },
+        //     {
+        //       path: 'compensation',
+        //       name: 'CompensationClassificationStatisticsCharts',
+        //       hidden: true,
+        //       component: () =>
+        //         import(
+        //           '@/views/statisticsCharts/views/special/compensationClassificationStatisticsCharts'
+        //         ),
+        //       meta: { title: '赔偿金额分类统计' },
+        //     },
+        //   ],
+        // },
+        // {
+        //   path: 'statisticalAnalysis',
+        //   name: 'statisticalAnalysisContent',
+        //   meta: { title: '统计分析' },
+        //   component: () => import('@/views/statisticalAnalysis/components'),
+        // },
         {
-          path: 'airlineCompany',
-          redirect: 'airlineCompany/flight',
-          name: 'AirlineCompanyStatistics',
+          path: 'baggage',
+          redirect: 'baggage/all',
+          name: 'BaggageStatistics',
           hidden: true,
           component: {
-            render (h) {
+            render(h) {
               return h('router-view')
             },
           },
           children: [
             {
-              path: 'flight',
-              name: 'FlightStatisticsCharts',
+              path: 'all',
+              name: 'BaggageAllStatisticsCharts',
               hidden: true,
               component: () =>
                 import(
-                  '@/views/statisticsCharts/views/airlineCompany/flightStatisticsCharts'
+                  '@/views/statisticsCharts/views/baggage/baggageAllStatisticsCharts'
                 ),
-              meta: {
-                title: '行李进港数量统计',
-                roles: ['flight_volume_statistics'],
-              },
+              meta: { title: '行李数量统计' },
             },
             {
-              path: 'baggage',
-              name: 'BaggageStatisticsCharts',
+              path: 'company',
+              name: 'BaggageCompanyStatisticsCharts',
               hidden: true,
               component: () =>
                 import(
-                  '@/views/statisticsCharts/views/airlineCompany/baggageStatisticsCharts'
+                  '@/views/statisticsCharts/views/baggage/companyStatisticsCharts'
                 ),
-              meta: { title: '航司行李量统计', roles: ['baggage_statistics'] },
+              meta: { title: '航司行李量统计' },
             },
-            // {
-            //   path: 'specialBaggage',
-            //   name: 'SpecialBaggageStatisticsCharts',
-            //   hidden: true,
-            //   component: () =>
-            //     import(
-            //       '@/views/statisticsCharts/views/airlineCompany/specialBaggageStatisticsCharts'
-            //     ),
-            //   meta: { title: '航线行李量统计' },
-            // },
             {
-              path: 'baggagePassenger',
-              name: 'BaggagePassengerStatisticsCharts',
+              path: 'airline',
+              name: 'BaggageAirlineStatisticsCharts',
               hidden: true,
               component: () =>
                 import(
-                  '@/views/statisticsCharts/views/airlineCompany/baggagePassengerStatisticsCharts'
+                  '@/views/statisticsCharts/views/baggage/airlineStatisticsCharts'
                 ),
               meta: { title: '航线行李量统计' },
             },
             {
-              path: 'hourPassenger',
-              name: 'HourPassengerStatisticsCharts',
+              path: 'hour',
+              name: 'BaggageHourStatisticsCharts',
               hidden: true,
               component: () =>
                 import(
-                  '@/views/statisticsCharts/views/airlineCompany/hourPassengerStatisticsCharts'
+                  '@/views/statisticsCharts/views/baggage/hourStatisticsCharts'
                 ),
-              meta: { title: '航线行李量统计' },
-            },
-            {
-              path: 'baggageAverage',
-              name: 'BaggageAverageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/airlineCompany/baggageAverageStatisticsCharts'
-                ),
-              meta: { title: '平均行李量统计' },
-            },
-            {
-              path: 'abnormalBaggage',
-              name: 'AbnormalBaggageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/airlineCompany/abnormalBaggageStatisticsCharts'
-                ),
-              meta: { title: '异常行李量统计' },
-            },
-            {
-              path: 'complaintBaggage',
-              name: 'ComplaintBaggageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/airlineCompany/complaintBaggageStatisticsCharts'
-                ),
-              meta: { title: '投诉行李量统计' },
-            },
-            {
-              path: 'compensationBaggage',
-              name: 'CompensationBaggageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/airlineCompany/compensationBaggageStatisticsCharts'
-                ),
-              meta: { title: '赔偿行李量统计' },
-            },
-            {
-              path: 'compensation',
-              name: 'CompensationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/airlineCompany/compensationStatisticsCharts'
-                ),
-              meta: { title: '赔偿金额统计' },
-            },
-          ],
-        },
-        {
-          path: 'passengerClassification',
-          redirect: 'passengerClassification/baggagePassenger',
-          name: 'PassengerStatistics',
-          hidden: true,
-          component: {
-            render (h) {
-              return h('router-view')
-            },
-          },
-          children: [
-            {
-              path: 'baggagePassenger',
-              name: 'PassengerStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/passengerClassification/baggagePassengerStatisticsCharts'
-                ),
-              meta: { title: '行李旅客量统计' },
-            },
-            {
-              path: 'baggage',
-              name: 'PassengerBaggageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/passengerClassification/baggageStatisticsCharts'
-                ),
-              meta: { title: '行李量统计' },
-            },
-            {
-              path: 'specialBaggage',
-              name: 'PassengerSpecialBaggageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/passengerClassification/specialBaggageStatisticsCharts'
-                ),
-              meta: { title: '特殊行李量统计' },
-            },
-            {
-              path: 'abnormalBaggage',
-              name: 'PassengerAbnormalBaggageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/passengerClassification/abnormalBaggageStatisticsCharts'
-                ),
-              meta: { title: '异常行李量统计' },
-            },
-            {
-              path: 'complaintBaggage',
-              name: 'PassengerComplaintBaggageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/passengerClassification/complaintBaggageStatisticsCharts'
-                ),
-              meta: { title: '投诉行李量统计' },
-            },
-            {
-              path: 'compensationBaggage',
-              name: 'PassengerCompensationBaggageStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/passengerClassification/compensationBaggageStatisticsCharts'
-                ),
-              meta: { title: '赔偿行李量统计' },
-            },
-            {
-              path: 'compensation',
-              name: 'PassengerCompensationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/passengerClassification/compensationStatisticsCharts'
-                ),
-              meta: { title: '赔偿金额统计' },
-            },
-          ],
-        },
-        {
-          path: 'flightClassification',
-          redirect: 'flightClassification/flight',
-          name: 'FlightClassificationStatistics',
-          hidden: true,
-          component: {
-            render (h) {
-              return h('router-view')
-            },
-          },
-          children: [
-            {
-              path: 'flight',
-              name: 'FlightClassificationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/flightClassification/flightClassificationStatisticsCharts'
-                ),
-              meta: { title: '航班量统计' },
-            },
-            {
-              path: 'baggage',
-              name: 'FlightBaggageClassificationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/flightClassification/baggageClassificationStatisticsCharts'
-                ),
-              meta: { title: '行李量统计' },
-            },
-            {
-              path: 'passenger',
-              name: 'FlightPassengerClassificationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/flightClassification/passengerClassificationStatisticsCharts'
-                ),
-              meta: { title: '行李旅客量统计' },
+              meta: { title: '行李小时量统计' },
             },
           ],
         },
@@ -296,200 +520,29 @@ const statisticsChartsRoutes = {
             import('@/views/statisticsCharts/views/nodeStatisticsCharts'),
           meta: {
             title: '扫描节点与位置分析',
-            roles: ['scanning_node_and_location_analysis'],
           },
         },
         {
-          path: 'cap',
-          name: 'capStatisticsCharts',
+          path: 'workload',
+          name: 'WorkloadStatisticsCharts',
           hidden: true,
           component: () =>
-            import('@/views/statisticsCharts/views/airlineCompany/capPassengerStatisticsCharts'),
+            import('@/views/statisticsCharts/views/workloadStatisticsCharts'),
           meta: {
-            title: '扫描节点与位置分析',
-            roles: ['scanning_node_and_location_analysis'],
+            title: '工作量统计',
           },
         },
         {
-          path: 'report',
-          redirect: 'report/reportStatistics',
-          name: 'Report',
+          path: 'abnormal',
+          name: 'AbnormalBaggageClassificationStatisticsCharts',
           hidden: true,
-          component: {
-            render (h) {
-              return h('router-view')
-            },
-          },
-          children: [
-            {
-              path: 'reportStatistics',
-              name: 'ReportStatistics',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/report/reportStatistics'
-                ),
-              meta: {
-                title: '运送效率报表统计',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-            {
-              path: 'transitTables',
-              name: 'TransitTables',
-              hidden: true,
-              component: () =>
-                import('@/views/statisticsCharts/views/report/transitTables'),
-              meta: {
-                title: '中转四个流向统计',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-            {
-              path: 'transferDirectionTable',
-              name: 'TransferDirectionTable',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/report/transferDirectionTable'
-                ),
-              meta: {
-                title: '中转流向明细统计',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-            {
-              path: 'transferBaggageTable',
-              name: 'TransferBaggageTable',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/report/transferBaggageTable'
-                ),
-              meta: {
-                title: '中转行李因素分析统计',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-            {
-              path: 'baggageProportionTable',
-              name: 'BaggageProportionTable',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/report/baggageProportionTable'
-                ),
-              meta: {
-                title: '中转行李比例明细统计',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-            {
-              path: 'scanningStatistics',
-              name: 'ScanningStatistics',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/report/scanningStatistics'
-                ),
-              meta: {
-                title: '航站BRS扫描统计',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-            {
-              path: 'scanDataTable',
-              name: 'scanDataTable',
-              hidden: true,
-              component: () =>
-                import('@/views/statisticsCharts/views/report/scanDataTable'),
-              meta: {
-                title: 'Mannual Load扫描数据统计表',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-            {
-              path: 'rfldTable',
-              name: 'rfldTable',
-              hidden: true,
-              component: () =>
-                import('@/views/statisticsCharts/views/report/rfldTable'),
-              meta: {
-                title: '航易行RFID扫描数据统计表',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-            {
-              path: 'Percentageofbaggage',
-              name: 'Percentageofbaggage',
-              hidden: true,
-              component: () =>
-                import('@/views/statisticsCharts/views/report/Percentageofbaggage'),
-              meta: {
-                title: '行李全流程服务水平百分比',
-                roles: ['scanning_node_and_location_analysis'],
-              },
-            },
-          ],
-        },
-        {
-          path: 'specialClassification',
-          redirect: 'specialClassification/special',
-          name: 'SpecialStatistics',
-          hidden: true,
-          component: {
-            render (h) {
-              return h('router-view')
-            },
+          component: () =>
+            import(
+              '@/views/statisticsCharts/views/abnormalBaggageClassificationStatisticsCharts'
+            ),
+          meta: {
+            title: '异常行李分析',
           },
-          children: [
-            {
-              path: 'special',
-              name: 'SpecialBaggageClassificationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/special/specialBaggageClassificationStatisticsCharts'
-                ),
-              meta: { title: '特殊行李分类统计' },
-            },
-            {
-              path: 'abnormal',
-              name: 'AbnormalBaggageClassificationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/special/abnormalBaggageClassificationStatisticsCharts'
-                ),
-              meta: { title: '异常行李分类统计' },
-            },
-            {
-              path: 'compensationBaggage',
-              name: 'CompensationBaggageClassificationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/special/compensationBaggageClassificationStatisticsCharts'
-                ),
-              meta: { title: '赔偿行李分类统计' },
-            },
-            {
-              path: 'compensation',
-              name: 'CompensationClassificationStatisticsCharts',
-              hidden: true,
-              component: () =>
-                import(
-                  '@/views/statisticsCharts/views/special/compensationClassificationStatisticsCharts'
-                ),
-              meta: { title: '赔偿金额分类统计' },
-            },
-          ],
-        },
-        {
-          path: 'statisticalAnalysis',
-          name: 'statisticalAnalysisContent',
-          meta: { title: '统计分析' },
-          component: () => import('@/views/statisticalAnalysis/components'),
         },
       ],
     },

src/views/statisticsCharts/components/commonBarStatisticsCharts.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
-    v-loading="loading"
-    element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    class="statstics-wrapper"
-  >
+  <div class="statstics-wrapper">
     <div
       ref="headerWrapper"
       class="statstics-header"
@@ -13,8 +7,6 @@
       <StatisticsHeader
         :title="`${chartsTitle}统计`"
         :custom-items="customFormItems"
-        :items="formItems"
-        :data.sync="formData"
         @getFormData="getFormData"
         @export="exportHandler"
       />
@@ -43,33 +35,24 @@ export default {
   props: {
     chartsTitle: {
       type: String,
-      required: true,
+      required: true
     },
     querySettings: {
       type: Object,
-      required: true,
+      required: true
     },
     customFormItems: {
       type: Array,
-      default: () => [],
-    },
-    formItems: {
-      type: Array,
-    },
-    formData: {
-      type: Object,
-      required: true,
-    },
+      default: () => []
+    }
   },
   data() {
     return {
-      loading: false,
       myChart: null,
       debounceTime: 300,
       chartHeight: '70vh',
       hasChartData: false,
       seriesKey: 'seriesData',
-      xAxisKey: 'flight_date',
       filters: [],
       tableData: [],
       params: [],
@@ -80,9 +63,9 @@ export default {
           axisPointer: {
             type: 'cross',
             crossStyle: {
-              color: '#999',
-            },
-          },
+              color: '#999'
+            }
+          }
         },
         legend: {
           top: '5%',
@@ -95,37 +78,37 @@ export default {
           data: [
             this.chartsTitle.replace('量', '数量'),
             // `${this.chartsTitle}量同比`,
-            `${this.chartsTitle}环比`,
+            `${this.chartsTitle}环比`
           ],
           textStyle: {
             fontFamily: 'Helvetica, "Microsoft YaHei"',
-            color: '#101116',
-          },
+            color: '#101116'
+          }
         },
         grid: {
           top: '15%',
           left: '5%',
           right: '5%',
-          bottom: '5%',
+          bottom: '5%'
         },
         xAxis: {
           data: [],
           axisLine: {
             show: true,
             lineStyle: {
-              color: '#000000',
-            },
+              color: '#000000'
+            }
           },
           axisTick: {
-            show: false, // 隐藏X轴刻度
+            show: false // 隐藏X轴刻度
           },
           axisLabel: {
             fontFamily: 'Helvetica, "Microsoft YaHei"',
-            color: '#101116',
+            color: '#101116'
           },
           axisPointer: {
-            type: 'shadow',
-          },
+            type: 'shadow'
+          }
         },
         yAxis: [
           {
@@ -135,18 +118,18 @@ export default {
               lineStyle: {
                 type: 'dashed',
                 color: '#B0B3C3',
-                opacity: 0.5,
-              },
+                opacity: 0.5
+              }
             },
             axisPointer: {
               label: {
-                formatter: ({ value }) => value.toFixed(),
-              },
+                formatter: ({ value }) => value.toFixed()
+              }
             },
             axisLabel: {
               fontFamily: 'Helvetica, "Microsoft YaHei"',
-              color: '#101116',
-            },
+              color: '#101116'
+            }
           },
           {
             min: -0.3,
@@ -154,17 +137,17 @@ export default {
             axisLabel: {
               formatter: value => (value * 100).toFixed(2) + '%',
               fontFamily: 'Helvetica, "Microsoft YaHei"',
-              color: '#101116',
+              color: '#101116'
             },
             axisPointer: {
               label: {
-                formatter: ({ value }) => (value * 100).toFixed(2) + '%',
-              },
+                formatter: ({ value }) => (value * 100).toFixed(2) + '%'
+              }
             },
             splitLine: {
-              show: false,
-            },
-          },
+              show: false
+            }
+          }
         ],
         series: [
           {
@@ -172,14 +155,14 @@ export default {
             type: 'bar',
             z: 2,
             itemStyle: {
-              color: '#6682B5',
+              color: '#6682B5'
             },
             barWidth: 40,
             label: {
               show: true,
-              position: 'top',
+              position: 'top'
             },
-            data: [],
+            data: []
           },
           {
             name: `${this.chartsTitle}同比`,
@@ -190,17 +173,17 @@ export default {
             itemStyle: {
               color: '#F2B849',
               borderColor: '#ffffff',
-              borderWidth: 4,
+              borderWidth: 4
             },
             lineStyle: {
               width: 4,
-              color: '#F2B849',
+              color: '#F2B849'
             },
             symbolSize: 32,
             tooltip: {
-              valueFormatter: value => (value * 100).toFixed(2) + '%',
+              valueFormatter: value => (value * 100).toFixed(2) + '%'
             },
-            data: [],
+            data: []
           },
           {
             name: `${this.chartsTitle}环比`,
@@ -211,25 +194,24 @@ export default {
             itemStyle: {
               color: '#E33D3D',
               borderColor: '#ffffff',
-              borderWidth: 4,
+              borderWidth: 4
             },
             lineStyle: {
               width: 4,
-              color: '#E33D3D',
+              color: '#E33D3D'
             },
             symbolSize: 32,
             tooltip: {
-              valueFormatter: value => (value * 100).toFixed(2) + '%',
+              valueFormatter: value => (value * 100).toFixed(2) + '%'
             },
-            data: [],
-          },
-        ],
-      },
-      admin: {},
+            data: []
+          }
+        ]
+      }
     }
   },
   computed: {
-    ...mapGetters(['sidebar']),
+    ...mapGetters(['sidebar'])
   },
   watch: {
     // 监听数据变化 重绘图形
@@ -238,36 +220,30 @@ export default {
         this.myChart.setOption(obj)
         this.resizeHandler()
       },
-      deep: true,
+      deep: true
     },
     'sidebar.expand'() {
       this.setChartHeight()
     },
     querySettings: {
-      handler({ seriesKey, filters, xAxisKey }) {
+      handler({ seriesKey, filters }) {
         if (seriesKey) {
           this.seriesKey = seriesKey
         }
-        if (xAxisKey) {
-          this.xAxisKey = xAxisKey
-        }
         if (filters?.length) {
           this.filters = filters
         }
       },
       deep: true,
-      immediate: true,
-    },
+      immediate: true
+    }
   },
   mounted() {
     this.setChartHeight()
     this.myChart = this.$echarts.init(document.getElementById('chart'))
     this.myChart.setOption(this.options)
     // 监听页面缩放
-    this.debouncedChartHeightSetter = this._.debounce(
-      this.setChartHeight,
-      this.debounceTime
-    )
+    this.debouncedChartHeightSetter = this._.debounce(this.setChartHeight, this.debounceTime)
     window.addEventListener('resize', this.debouncedChartHeightSetter)
   },
   beforeDestroy() {
@@ -291,79 +267,98 @@ export default {
     getFormData(formData) {
       this.resetDatas()
 
-      let params = {}
-      params = JSON.parse(JSON.stringify(formData))
-      params.fd1 = formData.dateTime[0]
-      params.fd2 = formData.dateTime[1]
-      delete params.dateTime
-      this.admin = JSON.parse(JSON.stringify(params))
-      delete params.timedim
-      this.getSingleChartsData(this.querySettings.serviceId, params)
-      // if (formData.passengerType.length) {
-      //   this.filters = [
-      //     {
-      //       key: formData.passengerType[0],
-      //       value: formData.passengerType[1]
-      //     }
-      //   ]
-      // }
-      // this.params = [...params, ...this.filters.map(({ value }) => value)]
-      // if (params[2] instanceof Array) {
-      //   const paramsList = params[2].map(param => [...params.slice(0, 2), param, ...params.slice(3)])
-      //   this.getMultipleChartsData(id, paramsList)
-      // } else {
-      //   this.getSingleChartsData(id, params)
-      // }
+      let id
+      let params = []
+      if (formData.range === '基地分公司') {
+        if (formData.flightType === '有行李') {
+          id = this.querySettings.withBaggageByArea
+        } else if (formData.baggageType === '不包含DEL') {
+          id = this.querySettings.notDelByArea
+        } else if (formData.passengerType[0] === '要客类型') {
+          id = this.querySettings.importantByArea
+        } else {
+          id = this.querySettings.byArea
+        }
+        params = [formData.interval, formData.area, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
+      } else {
+        if (formData.flightType === '有行李') {
+          id = this.querySettings.withBaggageByOther
+        } else if (formData.baggageType === '不包含DEL') {
+          id = this.querySettings.notDelByOther
+        } else if (formData.passengerType[0] === '要客类型') {
+          id = this.querySettings.importantByOther
+        } else {
+          id = this.querySettings.byOther
+        }
+        params = [formData.interval, formData.range, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
+        if (formData.airline.length) {
+          params.splice(2, 0, formData.airline)
+        } else if (formData.airport.length) {
+          params.splice(2, 0, formData.airport)
+        } else if (formData.terminal !== '') {
+          params.splice(2, 0, formData.terminal)
+        } else {
+          params.splice(2, 0, '全部')
+        }
+      }
+      if (formData.passengerType.length) {
+        this.filters = [
+          {
+            key: formData.passengerType[0],
+            value: formData.passengerType[1]
+          }
+        ]
+      }
+      this.params = [...params, ...this.filters.map(({ value }) => value)]
+      if (params[2] instanceof Array) {
+        const paramsList = params[2].map(param => [...params.slice(0, 2), param, ...params.slice(3)])
+        this.getMultipleChartsData(id, paramsList)
+      } else {
+        this.getSingleChartsData(id, params)
+      }
     },
     async getMultipleChartsData(id, paramsList) {
-      this.loading = true
       try {
-        const listValuesArray = await Promise.all(
-          paramsList.map(params => this.getChartsData(id, params))
-        )
-        const listValues = listValuesArray.reduce(
-          (preValues, currentValues) => {
-            currentValues.forEach(value => {
-              const preValue = preValues.find(
-                preValue => preValue.A === value.A
-              )
-              if (preValue) {
-                preValue[this.seriesKey] += value[this.seriesKey]
-              } else {
-                preValues.push({
-                  A: value.A,
-                  [this.seriesKey]: value[this.seriesKey],
-                })
-              }
-            })
-            return preValues
-          },
-          []
-        )
+        const listValuesArray = await Promise.all(paramsList.map(params => this.getChartsData(id, params)))
+        const listValues = listValuesArray.reduce((preValues, currentValues) => {
+          currentValues.forEach(value => {
+            const preValue = preValues.find(preValue => preValue.A === value.A)
+            if (preValue) {
+              preValue[this.seriesKey] += value[this.seriesKey]
+            } else {
+              preValues.push({
+                A: value.A,
+                [this.seriesKey]: value[this.seriesKey]
+              })
+            }
+          })
+          return preValues
+        }, [])
         this.setChartsData(this._.sortBy(listValues, 'A'))
       } catch (error) {
         this.$message.error(error.message)
       }
-      this.loading = false
     },
     async getSingleChartsData(id, params) {
-      this.loading = true
       try {
         const listValues = await this.getChartsData(id, params)
         this.setChartsData(listValues)
       } catch (error) {
         this.$message.error(error.message)
       }
-      this.loading = false
     },
-    async getChartsData(serviceId, params) {
+    async getChartsData(id, params) {
       try {
-        const { code, returnData, message } = await TempQuery({
-          serviceId,
-          dataContent: [params],
+        const {
+          code,
+          returnData: { listValues },
+          message
+        } = await TempQuery({
+          id,
+          dataContent: params
         })
         if (Number(code) === 0) {
-          return returnData.listValues || returnData
+          return listValues
         } else {
           return Promise.reject(message || '失败')
         }
@@ -375,42 +370,26 @@ export default {
       const xAxisData = []
       const yAxisData = [0]
       const seriesDatas = []
-      let filteredList = []
-      if (listValues && listValues.length) {
-        filteredList = listValues.filter(element =>
-          this.filters.every((key, value) => {
-            if (key && value && element[key] !== value) {
-              return false
-            } else {
-              return true
-            }
-          })
-        )
-      }
+      const filteredList = listValues.filter(element =>
+        this.filters.every((key, value) => {
+          if (key && value && element[key] !== value) {
+            return false
+          } else {
+            return true
+          }
+        })
+      )
       if (filteredList.length === 0) {
         this.$message.info('未查询到对应数据')
         return
       }
-      // console.log(this.admin)
-      if (this.admin.io === '进港') {
-        this.seriesKey = 'in_num'
-      } else if (this.admin.io === '离港') {
-        this.seriesKey = 'out_num'
-      } else if (this.admin.io === '中转') {
-        this.seriesKey = 'trans_num'
-      } else if (this.admin.timedim === '正常') {
-        this.seriesKey = 'bag_num'
-      } else if (this.admin.timedim === '异常') {
-        this.seriesKey = 'exception_num'
-      }
       for (let i = 0; i < filteredList.length; i++) {
-        xAxisData.push(filteredList[i][this.xAxisKey])
+        xAxisData.push(filteredList[i].A)
         seriesDatas.push(filteredList[i][this.seriesKey])
         if (i > 0) {
           if (filteredList[i - 1][this.seriesKey] > 0) {
             yAxisData.push(
-              (filteredList[i][this.seriesKey] -
-                filteredList[i - 1][this.seriesKey]) /
+              (filteredList[i][this.seriesKey] - filteredList[i - 1][this.seriesKey]) /
                 filteredList[i - 1][this.seriesKey]
             )
           } else {
@@ -436,11 +415,7 @@ export default {
       const headerHeight = this.$refs['headerWrapper'].offsetHeight
       const footerBlankHeight = 24
       this.chartHeight = `calc(100vh - ${
-        topBarHeight +
-        headerBlankHeight +
-        tabsWrapperHeight +
-        headerHeight +
-        footerBlankHeight
+        topBarHeight + headerBlankHeight + tabsWrapperHeight + headerHeight + footerBlankHeight
       }px)`
       this.$nextTick(() => {
         this.resizeHandler()
@@ -464,18 +439,10 @@ export default {
       // $a.click()
 
       // 生成表格数据
-      const xlsxDatas = [
-        [
-          '时间',
-          this.chartsTitle.replace('量', '数量'),
-          `${this.chartsTitle}环比`,
-        ],
-      ]
+      const xlsxDatas = [['时间', this.chartsTitle.replace('量', '数量'), `${this.chartsTitle}环比`]]
       const transposition = this.tableData[0].map((col, colIndex) => {
         return this.tableData.map((row, rowIndex) => {
-          return rowIndex === 2
-            ? (row[colIndex] * 100).toFixed(2) + '%'
-            : row[colIndex]
+          return rowIndex === 2 ? (row[colIndex] * 100).toFixed(2) + '%' : row[colIndex]
         })
       })
       xlsxDatas.push(...transposition)
@@ -484,20 +451,17 @@ export default {
         const summaryRow = ['合计']
         const colNum = xlsxDatas[0].length
         for (let colIndex = 1; colIndex < colNum; colIndex++) {
-          summaryRow[colIndex] = xlsxDatas.reduce(
-            (pre, currentRow, rowIndex) => {
-              if (colIndex === 1) {
-                if (rowIndex === 0) {
-                  return 0
-                } else {
-                  return pre + currentRow[colIndex]
-                }
+          summaryRow[colIndex] = xlsxDatas.reduce((pre, currentRow, rowIndex) => {
+            if (colIndex === 1) {
+              if (rowIndex === 0) {
+                return 0
               } else {
-                return pre
+                return pre + currentRow[colIndex]
               }
-            },
-            ''
-          )
+            } else {
+              return pre
+            }
+          }, '')
         }
         xlsxDatas.push(summaryRow)
       }
@@ -517,10 +481,7 @@ export default {
                 }, 0)
               )
           )
-          if (
-            (!columnWidths[columnIndex] && cellWidth > 0) ||
-            cellWidth > columnWidths[columnIndex]
-          ) {
+          if ((!columnWidths[columnIndex] && cellWidth > 0) || cellWidth > columnWidths[columnIndex]) {
             columnWidths[columnIndex] = cellWidth
           }
         })
@@ -529,26 +490,26 @@ export default {
       const sheet = XLSX.utils.aoa_to_sheet(xlsxDatas)
       // 添加列宽度
       sheet['!cols'] = columnWidths.map(width => ({
-        wch: width + 2,
+        wch: width + 2
       }))
       // 样式
       const borderStyle = {
         style: 'medium',
         color: {
-          rgb: 'FFFFFF',
-        },
+          rgb: 'FFFFFF'
+        }
       }
       const reg = /^[A-Z]+([\d]+$)/
       for (const key in sheet) {
-        const match = reg.test(key)
+        const match = key.match(reg)
         if (match) {
-          const rowIndex = reg.exec(key)[1]
+          const rowIndex = match[1]
           let cellStyle = {
             alignment: {
               horizontal: 'center',
               vertical: 'center',
-              wrapText: true,
-            },
+              wrapText: true
+            }
           }
           if (Number(rowIndex) === 1) {
             cellStyle = {
@@ -557,22 +518,41 @@ export default {
                 top: borderStyle,
                 right: borderStyle,
                 bottom: borderStyle,
-                left: borderStyle,
+                left: borderStyle
               },
               font: {
                 color: {
-                  rgb: 'FFFFFF',
-                },
+                  rgb: 'FFFFFF'
+                }
               },
               fill: {
                 fgColor: {
-                  rgb: '3366FF',
-                },
-              },
+                  rgb: '3366FF'
+                }
+              }
             }
           } else {
             cellStyle.alignment.horizontal = 'left'
           }
+          const cellValue = sheet[key].v
+          const isNumber = /^[^0]/.test(cellValue) && !isNaN(parseFloat(cellValue)) && isFinite(cellValue)
+          const isPercentage = /^[0-9]+(\.[0-9]+){0,1}\%$/.test(cellValue)
+          if (isNumber) {
+            sheet[key] = {
+              ...sheet[key],
+              t: 'n',
+              z: '0',
+              v: Number(cellValue)
+            }
+          }
+          if (isPercentage) {
+            sheet[key] = {
+              ...sheet[key],
+              t: 'n',
+              z: '0.00%',
+              v: parseFloat(cellValue)
+            }
+          }
           sheet[key].s = cellStyle
         }
       }
@@ -583,16 +563,13 @@ export default {
         bookType: 'xlsx',
         bookSST: true,
         type: 'buffer',
-        cellStyles: true,
+        cellStyles: true
       })
       // 下载表格
       const fileName = `${this.chartsTitle}统计-${this.params.join('-')}.xlsx`
-      FileSaver.saveAs(
-        new Blob([tableWrite], { type: 'application/octet-stream' }),
-        fileName
-      )
-    },
-  },
+      FileSaver.saveAs(new Blob([tableWrite], { type: 'application/octet-stream' }), fileName)
+    }
+  }
 }
 </script>
 

src/views/statisticsCharts/components/newBarStatisticsCharts.vue

@@ -0,0 +1,588 @@
+<template>
+  <div
+    v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    class="statstics-wrapper"
+  >
+    <div
+      ref="headerWrapper"
+      class="statstics-header"
+    >
+      <StatisticsHeader
+        :title="`${chartsTitle}统计`"
+        :custom-items="customFormItems"
+        :items="formItems"
+        :data="formData"
+        @getFormData="getFormData"
+        @export="exportHandler"
+      />
+    </div>
+    <div class="statstics-content">
+      <div
+        id="chart"
+        class="statistics-chart"
+        :style="{ height: chartHeight }"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import StatisticsHeader from './statisticsHeader.vue'
+import { TempQuery } from '@/api/temp'
+import { mapGetters } from 'vuex'
+import * as XLSX from 'xlsx'
+import XLSX_STYLE from 'xlsx-style'
+import FileSaver from 'file-saver'
+
+export default {
+  name: 'CommonBarStatisticsCharts',
+  components: { StatisticsHeader },
+  props: {
+    chartsTitle: {
+      type: String,
+      required: true,
+    },
+    querySettings: {
+      type: Object,
+      required: true,
+    },
+    customFormItems: {
+      type: Array,
+      default: () => [],
+    },
+    formItems: {
+      type: Array,
+    },
+    formData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      myChart: null,
+      debounceTime: 300,
+      chartHeight: '70vh',
+      hasChartData: false,
+      seriesKey: 'seriesData',
+      xAxisKey: 'flight_date',
+      filters: [],
+      tableData: [],
+      params: [],
+      options: {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999',
+            },
+          },
+        },
+        legend: {
+          top: '5%',
+          right: '5%',
+          icon: 'rect',
+          height: 14,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 30,
+          data: [
+            this.chartsTitle.replace('量', '数量'),
+            // `${this.chartsTitle}量同比`,
+            `${this.chartsTitle}环比`,
+          ],
+          textStyle: {
+            fontFamily: 'Helvetica, "Microsoft YaHei"',
+            color: '#101116',
+          },
+        },
+        grid: {
+          top: '15%',
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+        },
+        xAxis: {
+          data: [],
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#000000',
+            },
+          },
+          axisTick: {
+            show: false, // 隐藏X轴刻度
+          },
+          axisLabel: {
+            fontFamily: 'Helvetica, "Microsoft YaHei"',
+            color: '#101116',
+          },
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        yAxis: [
+          {
+            min: 0,
+            max: 60000,
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#B0B3C3',
+                opacity: 0.5,
+              },
+            },
+            axisPointer: {
+              label: {
+                formatter: ({ value }) => value.toFixed(),
+              },
+            },
+            axisLabel: {
+              fontFamily: 'Helvetica, "Microsoft YaHei"',
+              color: '#101116',
+            },
+          },
+          {
+            min: -0.3,
+            max: 0.5,
+            axisLabel: {
+              formatter: value => (value * 100).toFixed(2) + '%',
+              fontFamily: 'Helvetica, "Microsoft YaHei"',
+              color: '#101116',
+            },
+            axisPointer: {
+              label: {
+                formatter: ({ value }) => (value * 100).toFixed(2) + '%',
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: this.chartsTitle.replace('量', '数量'),
+            type: 'bar',
+            z: 2,
+            itemStyle: {
+              color: '#6682B5',
+            },
+            barWidth: 40,
+            label: {
+              show: true,
+              position: 'top',
+            },
+            data: [],
+          },
+          {
+            name: `${this.chartsTitle}同比`,
+            type: 'line',
+            z: 4,
+            yAxisIndex: 1,
+            symbol: 'circle',
+            itemStyle: {
+              color: '#F2B849',
+              borderColor: '#ffffff',
+              borderWidth: 4,
+            },
+            lineStyle: {
+              width: 4,
+              color: '#F2B849',
+            },
+            symbolSize: 32,
+            tooltip: {
+              valueFormatter: value => (value * 100).toFixed(2) + '%',
+            },
+            data: [],
+          },
+          {
+            name: `${this.chartsTitle}环比`,
+            type: 'line',
+            z: 3,
+            yAxisIndex: 1,
+            symbol: 'circle',
+            itemStyle: {
+              color: '#E33D3D',
+              borderColor: '#ffffff',
+              borderWidth: 4,
+            },
+            lineStyle: {
+              width: 4,
+              color: '#E33D3D',
+            },
+            symbolSize: 32,
+            tooltip: {
+              valueFormatter: value => (value * 100).toFixed(2) + '%',
+            },
+            data: [],
+          },
+        ],
+      },
+      admin: {},
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    options: {
+      handler(obj) {
+        this.myChart.setOption(obj)
+        this.resizeHandler()
+      },
+      deep: true,
+    },
+    'sidebar.expand'() {
+      this.setChartHeight()
+    },
+    querySettings: {
+      handler({ seriesKey, filters, xAxisKey }) {
+        if (seriesKey) {
+          this.seriesKey = seriesKey
+        }
+        if (xAxisKey) {
+          this.xAxisKey = xAxisKey
+        }
+        if (filters?.length) {
+          this.filters = filters
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.setChartHeight()
+    this.myChart = this.$echarts.init(document.getElementById('chart'))
+    this.myChart.setOption(this.options)
+    // 监听页面缩放
+    this.debouncedChartHeightSetter = this._.debounce(
+      this.setChartHeight,
+      this.debounceTime
+    )
+    window.addEventListener('resize', this.debouncedChartHeightSetter)
+  },
+  beforeDestroy() {
+    // 销毁实例和移除监听
+    window.removeEventListener('resize', this.debouncedChartHeightSetter)
+    if (this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
+    }
+  },
+  methods: {
+    resetDatas() {
+      this.hasChartData = false
+      this.options.yAxis[0].max = 60000
+      this.options.xAxis.data = []
+      this.options.series[0].data = []
+      this.options.series[2].data = []
+      this.options.yAxis[1].min = -0.3
+      this.options.yAxis[1].max = 0.5
+    },
+    getFormData(formData) {
+      this.resetDatas()
+
+      let params = {}
+      params = JSON.parse(JSON.stringify(formData))
+      params.fd1 = formData.dateTime[0]
+      params.fd2 = formData.dateTime[1]
+      delete params.dateTime
+      this.admin = JSON.parse(JSON.stringify(params))
+      delete params.timedim
+      this.getSingleChartsData(this.querySettings.serviceId, params)
+    },
+    async getMultipleChartsData(id, paramsList) {
+      this.loading = true
+      try {
+        const listValuesArray = await Promise.all(
+          paramsList.map(params => this.getChartsData(id, params))
+        )
+        const listValues = listValuesArray.reduce(
+          (preValues, currentValues) => {
+            currentValues.forEach(value => {
+              const preValue = preValues.find(
+                preValue => preValue.A === value.A
+              )
+              if (preValue) {
+                preValue[this.seriesKey] += value[this.seriesKey]
+              } else {
+                preValues.push({
+                  A: value.A,
+                  [this.seriesKey]: value[this.seriesKey],
+                })
+              }
+            })
+            return preValues
+          },
+          []
+        )
+        this.setChartsData(this._.sortBy(listValues, 'A'))
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+      this.loading = false
+    },
+    async getSingleChartsData(id, params) {
+      this.loading = true
+      try {
+        const listValues = await this.getChartsData(id, params)
+        this.setChartsData(listValues)
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+      this.loading = false
+    },
+    async getChartsData(serviceId, params) {
+      try {
+        const { code, returnData, message } = await TempQuery({
+          serviceId,
+          dataContent: [params],
+        })
+        if (Number(code) === 0) {
+          return returnData.listValues || returnData
+        } else {
+          return Promise.reject(message || '失败')
+        }
+      } catch (error) {
+        return Promise.reject(error.message || '失败')
+      }
+    },
+    setChartsData(listValues) {
+      const xAxisData = []
+      const yAxisData = [0]
+      const seriesDatas = []
+      let filteredList = []
+      if (listValues && listValues.length) {
+        filteredList = listValues.filter(element =>
+          this.filters.every((key, value) => {
+            if (key && value && element[key] !== value) {
+              return false
+            } else {
+              return true
+            }
+          })
+        )
+      }
+      if (filteredList.length === 0) {
+        this.$message.info('未查询到对应数据')
+        return
+      }
+      // console.log(this.admin)
+      if (this.admin.io === '进港') {
+        this.seriesKey = 'in_num'
+      } else if (this.admin.io === '离港') {
+        this.seriesKey = 'out_num'
+      } else if (this.admin.io === '中转') {
+        this.seriesKey = 'trans_num'
+      } else if (this.admin.timedim === '正常') {
+        this.seriesKey = 'bag_num'
+      } else if (this.admin.timedim === '异常') {
+        this.seriesKey = 'exception_num'
+      }
+      for (let i = 0; i < filteredList.length; i++) {
+        xAxisData.push(filteredList[i][this.xAxisKey])
+        seriesDatas.push(filteredList[i][this.seriesKey])
+        if (i > 0) {
+          if (filteredList[i - 1][this.seriesKey] > 0) {
+            yAxisData.push(
+              (filteredList[i][this.seriesKey] -
+                filteredList[i - 1][this.seriesKey]) /
+                filteredList[i - 1][this.seriesKey]
+            )
+          } else {
+            yAxisData.push(0)
+          }
+        }
+      }
+      let max = Math.max(...seriesDatas)
+      max = Math.ceil(max / 10) * 10
+      this.options.yAxis[0].max = max
+      this.options.xAxis.data = xAxisData
+      this.options.series[0].data = seriesDatas
+      this.options.series[2].data = yAxisData
+      this.options.yAxis[1].min = (Math.min(...yAxisData) - 0.1).toFixed(2)
+      this.options.yAxis[1].max = (Math.max(...yAxisData) + 0.1).toFixed(2)
+      this.tableData = [xAxisData, seriesDatas, yAxisData]
+      this.hasChartData = true
+    },
+    setChartHeight() {
+      const topBarHeight = 80
+      const headerBlankHeight = 24
+      const tabsWrapperHeight = 62
+      const headerHeight = this.$refs['headerWrapper'].offsetHeight
+      const footerBlankHeight = 24
+      this.chartHeight = `calc(100vh - ${
+        topBarHeight +
+        headerBlankHeight +
+        tabsWrapperHeight +
+        headerHeight +
+        footerBlankHeight
+      }px)`
+      this.$nextTick(() => {
+        this.resizeHandler()
+      })
+    },
+    resizeHandler() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    exportHandler() {
+      if (!this.hasChartData) {
+        this.$message.warning('请查询后再进行导出')
+        return
+      }
+      // const myCanvas = this.myChart._dom.querySelectorAll('canvas')[0]
+      // const image = myCanvas.toDataURL('image/png')
+      // const $a = document.createElement('a')
+      // $a.setAttribute('href', image)
+      // $a.setAttribute('download', `${this.chartsTitle}统计.png`)
+      // $a.click()
+
+      // 生成表格数据
+      const xlsxDatas = [
+        [
+          '时间',
+          this.chartsTitle.replace('量', '数量'),
+          `${this.chartsTitle}环比`,
+        ],
+      ]
+      const transposition = this.tableData[0].map((col, colIndex) => {
+        return this.tableData.map((row, rowIndex) => {
+          return rowIndex === 2
+            ? (row[colIndex] * 100).toFixed(2) + '%'
+            : row[colIndex]
+        })
+      })
+      xlsxDatas.push(...transposition)
+      // 添加合计行
+      if (xlsxDatas.length > 2) {
+        const summaryRow = ['合计']
+        const colNum = xlsxDatas[0].length
+        for (let colIndex = 1; colIndex < colNum; colIndex++) {
+          summaryRow[colIndex] = xlsxDatas.reduce(
+            (pre, currentRow, rowIndex) => {
+              if (colIndex === 1) {
+                if (rowIndex === 0) {
+                  return 0
+                } else {
+                  return pre + currentRow[colIndex]
+                }
+              } else {
+                return pre
+              }
+            },
+            ''
+          )
+        }
+        xlsxDatas.push(summaryRow)
+      }
+      // 计算列宽
+      const columnWidths = []
+      xlsxDatas.forEach((row, rowIndex) => {
+        // 计算每一列宽度，考虑换行
+        row.forEach((cell, columnIndex) => {
+          const cellWidth = Math.max(
+            ...cell
+              .toString()
+              .split('\n')
+              .map(cellRow =>
+                cellRow.split('').reduce((pre, curr) => {
+                  const letterSize = curr.charCodeAt(0) > 255 ? 2 : 1
+                  return pre + letterSize
+                }, 0)
+              )
+          )
+          if (
+            (!columnWidths[columnIndex] && cellWidth > 0) ||
+            cellWidth > columnWidths[columnIndex]
+          ) {
+            columnWidths[columnIndex] = cellWidth
+          }
+        })
+      })
+      // 生成表格
+      const sheet = XLSX.utils.aoa_to_sheet(xlsxDatas)
+      // 添加列宽度
+      sheet['!cols'] = columnWidths.map(width => ({
+        wch: width + 2,
+      }))
+      // 样式
+      const borderStyle = {
+        style: 'medium',
+        color: {
+          rgb: 'FFFFFF',
+        },
+      }
+      const reg = /^[A-Z]+([\d]+$)/
+      for (const key in sheet) {
+        const match = reg.test(key)
+        if (match) {
+          const rowIndex = reg.exec(key)[1]
+          let cellStyle = {
+            alignment: {
+              horizontal: 'center',
+              vertical: 'center',
+              wrapText: true,
+            },
+          }
+          if (Number(rowIndex) === 1) {
+            cellStyle = {
+              ...cellStyle,
+              border: {
+                top: borderStyle,
+                right: borderStyle,
+                bottom: borderStyle,
+                left: borderStyle,
+              },
+              font: {
+                color: {
+                  rgb: 'FFFFFF',
+                },
+              },
+              fill: {
+                fgColor: {
+                  rgb: '3366FF',
+                },
+              },
+            }
+          } else {
+            cellStyle.alignment.horizontal = 'left'
+          }
+          sheet[key].s = cellStyle
+        }
+      }
+      // 表格数据转换
+      const workBook = XLSX.utils.book_new()
+      XLSX.utils.book_append_sheet(workBook, sheet, this.chartsTitle)
+      const tableWrite = XLSX_STYLE.write(workBook, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'buffer',
+        cellStyles: true,
+      })
+      // 下载表格
+      const fileName = `${this.chartsTitle}统计-${this.params.join('-')}.xlsx`
+      FileSaver.saveAs(
+        new Blob([tableWrite], { type: 'application/octet-stream' }),
+        fileName
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-chart {
+  width: 100%;
+}
+</style>

src/views/statisticsCharts/components/newPieStatisticsCharts.vue

@@ -0,0 +1,589 @@
+<template>
+  <div
+    v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    class="statstics-wrapper"
+  >
+    <div
+      ref="headerWrapper"
+      class="statstics-header"
+    >
+      <StatisticsHeader
+        :title="`${chartsTitle}统计`"
+        :data="formData"
+        :items="formItems"
+        :custom-items="customFormItems"
+        @getFormData="getFormData"
+        @export="exportHandler"
+      />
+    </div>
+    <div class="statstics-content">
+      <div
+        id="chart"
+        class="statistics-chart"
+        :style="{ height: chartHeight }"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import StatisticsHeader from './statisticsHeader.vue'
+import { TempQuery } from '@/api/temp'
+import { mapGetters } from 'vuex'
+import * as XLSX from 'xlsx'
+import XLSX_STYLE from 'xlsx-style'
+import FileSaver from 'file-saver'
+
+export default {
+  name: 'CommonBarStatisticsCharts',
+  components: { StatisticsHeader },
+  props: {
+    chartsTitle: {
+      type: String,
+      required: true,
+    },
+    querySettings: {
+      type: Object,
+      required: true,
+    },
+    categories: {
+      type: Array,
+      validator(arr) {
+        return (
+          arr &&
+          arr.every(
+            category =>
+              (category instanceof Object && 'name' in category) ||
+              typeof category === 'string'
+          )
+        )
+      },
+    },
+    formData: {
+      type: Object,
+      required: true,
+    },
+    formItems: {
+      type: Array,
+      default: () => [],
+    },
+    customFormItems: {
+      type: Array,
+      default: () => [],
+    },
+    pieTitle: {
+      type: String,
+      default: '总件数',
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      myChart: null,
+      debounceTime: 300,
+      chartHeight: '70vh',
+      hasChartData: false,
+      tableData: [],
+      params: [],
+      options: {
+        backgroundColor: '#ffffff',
+        tooltip: {
+          trigger: 'item',
+        },
+        title: {
+          text: '',
+          // 副标题
+          subtext: '0',
+          // 主副标题间距
+          itemGap: 24,
+          x: 'left',
+          y: 'center',
+          left: '30%',
+          top: '40%',
+          textAlign: 'center',
+          // 主标题样式
+          textStyle: {
+            fontSize: '48',
+            color: '#ffffff',
+            fontWeight: 'bold',
+            fontFamily: 'Microsoft YaHei',
+          },
+          // 副标题样式
+          subtextStyle: {
+            fontSize: '80',
+            color: '#ffffff',
+            fontWeight: 'bold',
+          },
+        },
+        legend: {
+          show: true,
+          left: '60%',
+          x: 'right',
+          y: 'center',
+          icon: 'rect',
+          itemWidth: 20,
+          itemHeight: 20,
+          formatter: name => this.legendFormatter(name),
+          textStyle: {
+            backgroundColor: 'transparent',
+            lineHeight: 0,
+            rich: {
+              chartsTitle: {
+                width: 200,
+                lineHeight: 100,
+                fontSize: 32,
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 'bold',
+                color: '#101116',
+                padding: [0, 1000, 0, -20],
+              },
+              name: {
+                fontSize: 20,
+                fontFamily: 'Microsoft YaHei',
+                fontWeight: 'bold',
+                color: '#101116',
+                lineHeight: 100,
+              },
+              label: {
+                fontSize: 16,
+                fontFamily: 'Microsoft YaHei',
+                color: '#101116',
+              },
+              value: {
+                width: 96,
+                fontSize: 16,
+                fontFamily: 'Helvetica',
+                fontWeight: 'bold',
+                color: '#101116',
+              },
+              ratio: {
+                width: 80,
+                fontSize: 16,
+                fontFamily: 'Helvetica',
+                fontWeight: 'bold',
+                color: '#101116',
+              },
+              wrap: {
+                padding: [0, 40, 0, 0],
+              },
+            },
+          },
+          selected: {
+            [this.chartsTitle]: false,
+          },
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            left: '30%',
+            width: 560,
+            height: 560,
+            center: [0, '60%'],
+            radius: ['60%', '90%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '40',
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [],
+          },
+          {
+            name: '总数',
+            type: 'pie',
+            left: '30%',
+            width: 560,
+            height: 560,
+            center: [0, '60%'],
+            radius: ['0%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              normal: {
+                color: '#101116',
+              },
+            },
+            label: {
+              show: false,
+              position: 'center',
+            },
+            // 自定义中心内容的话需要把这个关闭
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [],
+          },
+        ],
+      },
+      totalCount: [{ value: 0 }],
+      categoryDatas: [],
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+  },
+  watch: {
+    pieTitle: {
+      handler(val) {
+        this.options.title.text = val
+      },
+      immediate: true,
+    },
+    // 监听数据变化 重绘图形
+    options: {
+      handler(obj) {
+        this.myChart.setOption(obj)
+        this.resizeHandler()
+      },
+      deep: true,
+    },
+    categories: {
+      handler(arr) {
+        this.categoryDatas = arr.map(category => {
+          if (category instanceof Object) {
+            return {
+              ...category,
+              value: 0,
+            }
+          } else {
+            return {
+              name: category,
+              key: category,
+              value: 0,
+            }
+          }
+        })
+      },
+      deep: true,
+      immediate: true,
+    },
+    'sidebar.expand'() {
+      this.setChartHeight()
+    },
+  },
+  mounted() {
+    this.setChartHeight()
+    this.myChart = this.$echarts.init(document.getElementById('chart'))
+    this.options.series[0].data = [
+      {
+        name: this.chartsTitle,
+        key: this.chartsTitle,
+        value: null,
+      },
+      ...this.categoryDatas,
+    ]
+    this.options.legend.data = [
+      {
+        name: this.chartsTitle,
+        icon: 'none',
+      },
+      ...this.categoryDatas.map(({ name }, index) => ({ name })),
+    ]
+    this.options.series[1].data = this.totalCount
+    this.myChart.setOption(this.options)
+    this.myChart.on('legendselectchanged', ({ name }) => {
+      if (name === this.chartsTitle) {
+        this.myChart.dispatchAction({
+          type: 'legendUnSelect',
+          name,
+        })
+      }
+    })
+    // 监听页面缩放
+    this.debouncedChartHeightSetter = this._.debounce(
+      this.setChartHeight,
+      this.debounceTime
+    )
+    window.addEventListener('resize', this.debouncedChartHeightSetter)
+  },
+  beforeDestroy() {
+    // 销毁实例和移除监听
+    window.removeEventListener('resize', this.debouncedChartHeightSetter)
+    if (this.myChart) {
+      this.myChart.dispose()
+      this.myChart = null
+    }
+  },
+  methods: {
+    legendFormatter(name) {
+      const index = this.categoryDatas.findIndex(
+        category => category.name === name
+      )
+      if (index === -1) {
+        return `{chartsTitle|${name}}`
+      } else {
+        const value = this.categoryDatas[index].value
+        const ratio =
+          value && this.totalCount.value
+            ? ((value / this.totalCount.value) * 100).toFixed(2) + '%'
+            : '0%'
+        const richString = `{name|${name}}\n{label|数量：}{value|${value}}{label|占比：}{ratio|${ratio}}`
+        return index % 2 ? richString + '{wrap| }' : richString
+      }
+    },
+    resetDatas() {
+      this.hasChartData = false
+      this.categoryDatas.forEach(category => {
+        category && (category.value = 0)
+      })
+      this.options.title.subtext = '0'
+      this.options.series[1].data[0].value = 0
+    },
+    getFormData(formData) {
+      this.resetDatas()
+      const params = JSON.parse(JSON.stringify(formData))
+      ;[params.fd1, params.fd2] = params.dateTime
+      delete params.dateTime
+      this.params = Object.values(params)
+      const paramsList = [params]
+      this.getMultipleChartsData(this.querySettings.serviceId, paramsList)
+    },
+    async getMultipleChartsData(serviceId, paramsList) {
+      this.loading = true
+      try {
+        const listValuesArray = await Promise.all(
+          paramsList.map(params => this.getChartsData(serviceId, params))
+        )
+        this.tableData = this._.sortBy(listValuesArray.flat(), 'fdt')
+        const categories = this.categoryDatas.map(category => category.key)
+        const listValues = listValuesArray.reduce(
+          (preValues, currentValues) => {
+            currentValues.forEach(value => {
+              const preValue = preValues.find(
+                preValue => preValue.fdt === value.fdt
+              )
+              if (preValue) {
+                categories.forEach(key => {
+                  preValue[key] += value[key] ?? 0
+                })
+              } else {
+                const valuesObj = {
+                  location: value.location,
+                  fdt: value.fdt,
+                }
+                categories.forEach(key => {
+                  valuesObj[key] = value[key] ?? 0
+                })
+                preValues.push(valuesObj)
+              }
+            })
+            return preValues
+          },
+          []
+        )
+        // console.log(listValues)
+        this.setChartsData(this._.sortBy(listValues, 'fdt'))
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+      this.loading = false
+    },
+    async getChartsData(serviceId, params) {
+      try {
+        const {
+          code,
+          returnData: listValues,
+          message,
+        } = await TempQuery({
+          serviceId,
+          dataContent: params,
+        })
+        if (String(code) === '0') {
+          return listValues.map(obj => ({
+            ...obj,
+            location: params.air_line || params.airport || '',
+          }))
+        } else {
+          throw new Error(message)
+        }
+      } catch (error) {
+        return Promise.reject(error.message || '失败')
+      }
+    },
+    setChartsData(listValues) {
+      if (listValues.length === 0) {
+        this.$message.info('未查询到对应数据')
+        return
+      }
+      let totalCount = 0
+      listValues.forEach(element => {
+        this.categoryDatas.forEach(category => {
+          if (element[category.key]) {
+            category.value += element[category.key]
+            totalCount += element[category.key]
+          }
+        })
+      })
+      this.options.title.subtext = totalCount.toString()
+      this.totalCount.value = totalCount
+      this.hasChartData = true
+    },
+    setChartHeight() {
+      const topBarHeight = 80
+      const headerBlankHeight = 24
+      const tabsWrapperHeight = 62
+      const headerHeight = this.$refs['headerWrapper'].offsetHeight
+      const footerBlankHeight = 24
+      this.chartHeight = `calc(100vh - ${
+        topBarHeight +
+        headerBlankHeight +
+        tabsWrapperHeight +
+        headerHeight +
+        footerBlankHeight
+      }px)`
+      this.$nextTick(() => {
+        this.resizeHandler()
+      })
+    },
+    resizeHandler() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    exportHandler() {
+      if (!this.hasChartData) {
+        this.$message.warning('请查询后再进行导出')
+        return
+      }
+      // const myCanvas = this.myChart._dom.querySelectorAll('canvas')[0]
+      // const image = myCanvas.toDataURL('image/png')
+      // const $a = document.createElement('a')
+      // $a.setAttribute('href', image)
+      // $a.setAttribute('download', `${this.chartsTitle}统计.png`)
+      // $a.click()
+
+      const xlsxDatas = [['时间', '位置', '分类', '数量', '占比']]
+      xlsxDatas.push(
+        ...this.tableData
+          .map(element =>
+            this.categoryDatas.map(category => [
+              element['fdt'],
+              element['location'],
+              category.name,
+              element[category.key],
+              `${(
+                (element[category.key] / this.totalCount.value) *
+                100
+              ).toFixed(2)}%`,
+            ])
+          )
+          .flat(1)
+      )
+      xlsxDatas.push(['合计', '', '', this.totalCount.value, ''])
+      // 计算列宽
+      const columnWidths = []
+      xlsxDatas.forEach((row, rowIndex) => {
+        // 计算每一列宽度，考虑换行
+        row.forEach((cell, columnIndex) => {
+          const cellWidth = Math.max(
+            ...cell
+              .toString()
+              .split('\n')
+              .map(cellRow =>
+                cellRow.split('').reduce((pre, curr) => {
+                  const letterSize = curr.charCodeAt(0) > 255 ? 2 : 1
+                  return pre + letterSize
+                }, 0)
+              )
+          )
+          if (
+            (!columnWidths[columnIndex] && cellWidth > 0) ||
+            cellWidth > columnWidths[columnIndex]
+          ) {
+            columnWidths[columnIndex] = cellWidth
+          }
+        })
+      })
+      // 生成表格
+      const sheet = XLSX.utils.aoa_to_sheet(xlsxDatas)
+      // 添加列宽度
+      sheet['!cols'] = columnWidths.map(width => ({
+        wch: width + 2,
+      }))
+      // 样式
+      const borderStyle = {
+        style: 'medium',
+        color: {
+          rgb: 'FFFFFF',
+        },
+      }
+      const reg = /^[A-Z]+([\d]+$)/
+      for (const key in sheet) {
+        const match = reg.test(key)
+        if (match) {
+          const rowIndex = reg.exec(key)[1]
+          let cellStyle = {
+            alignment: {
+              horizontal: 'center',
+              vertical: 'center',
+              wrapText: true,
+            },
+          }
+          if (Number(rowIndex) === 1) {
+            cellStyle = {
+              ...cellStyle,
+              border: {
+                top: borderStyle,
+                right: borderStyle,
+                bottom: borderStyle,
+                left: borderStyle,
+              },
+              font: {
+                color: {
+                  rgb: 'FFFFFF',
+                },
+              },
+              fill: {
+                fgColor: {
+                  rgb: '3366FF',
+                },
+              },
+            }
+          } else {
+            cellStyle.alignment.horizontal = 'left'
+          }
+          sheet[key].s = cellStyle
+        }
+      }
+      // 表格数据转换
+      const workBook = XLSX.utils.book_new()
+      XLSX.utils.book_append_sheet(workBook, sheet, this.chartsTitle)
+      const tableWrite = XLSX_STYLE.write(workBook, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'buffer',
+        cellStyles: true,
+      })
+      // 下载表格
+      const fileName = `${this.chartsTitle}统计-${this.params.join('-')}.xlsx`
+      FileSaver.saveAs(
+        new Blob([tableWrite], { type: 'application/octet-stream' }),
+        fileName
+      )
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-chart {
+  width: 100%;
+}
+</style>

src/views/statisticsCharts/components/statisticsHeader.vue

@@ -134,17 +134,17 @@ export default {
   data() {
     return {
       formData: {
-        // range: '',
-        // inOrOut: '',
-        // interval: '',
-        // airline: [],
-        // area: '',
-        // airport: [],
-        // terminal: '',
-        // dateTime: [],
-        // flightType: '',
-        // baggageType: '',
-        // passengerType: []
+        range: '',
+        inOrOut: '',
+        interval: '',
+        air_line: [],
+        area: '',
+        airport: [],
+        terminal: '',
+        dateTime: [],
+        flightType: '',
+        baggageType: '',
+        passengerType: [],
       },
       formItems: [
         {
@@ -177,7 +177,7 @@ export default {
           changeHandler(value) {
             this.setInOrOutOptions(value)
             const rangeMap = {
-              航线: 'airline',
+              航线: 'air_line',
               基地分公司: 'area',
               航站: 'airport',
               航站楼: 'terminal',
@@ -198,7 +198,7 @@ export default {
           inputType: 'select',
           placeholder: '进离港',
           requiredWarning: '请先选择进离港',
-          clearable: true,
+          // clearable: true,
           options: [],
         },
         {
@@ -206,7 +206,7 @@ export default {
           inputType: 'select',
           placeholder: '时间维度',
           requiredWarning: '请先选择统计时间维度',
-          clearable: true,
+          // clearable: true,
           options: [
             {
               value: '日',
@@ -229,21 +229,21 @@ export default {
         {
           prop: 'dateTime',
           inputType: 'datePicker',
-          clearable: true,
+          // clearable: true,
           width: '240px',
           requiredWarning: '请先选择统计时间范围',
         },
         {
-          prop: 'airline',
+          prop: 'air_line',
           inputType: 'select',
           placeholder: '航线',
           width: '180px',
           filterable: true,
-          clearable: true,
+          // clearable: true,
           multiple: true,
           disabled: true,
           queryId: SERVICE_ID.airlineOptions,
-          setKey: 'a2',
+          setKey: 'air_line',
           options: [],
         },
         {
@@ -251,7 +251,7 @@ export default {
           inputType: 'select',
           placeholder: '基地分公司',
           filterable: true,
-          clearable: true,
+          // clearable: true,
           disabled: true,
           queryId: SERVICE_ID.areaOptions,
           setKey: 'a5',
@@ -263,11 +263,11 @@ export default {
           placeholder: '航站',
           width: '150px',
           filterable: true,
-          clearable: true,
+          // clearable: true,
           multiple: true,
           disabled: true,
-          queryId: SERVICE_ID.AirportId,
-          setKey: 'a2',
+          queryId: SERVICE_ID.AirportIds,
+          setKey: 'code3',
           options: [],
         },
         {
@@ -275,7 +275,7 @@ export default {
           inputType: 'select',
           placeholder: '航站楼',
           filterable: true,
-          clearable: true,
+          // clearable: true,
           disabled: true,
           queryId: SERVICE_ID.TerminalId,
           setKey: 'a2',
@@ -347,7 +347,6 @@ export default {
         this.formData[item.prop] = item.defaultOption
       }
     })
-    this.$emit('update:data', this.formData)
   },
   methods: {
     getData() {
@@ -364,7 +363,7 @@ export default {
         this.$message.warning(error.message)
         return
       }
-      if (this.formData.range === '航线' && !this.formData.airline) {
+      if (this.formData.range === '航线' && !this.formData.air_line) {
         this.$message.warning('请先选择航线')
         return
       } else if (this.formData.range === '航站' && !this.formData.airport) {
@@ -437,7 +436,7 @@ export default {
         const { code, returnData, message } = await TempQuery({
           serviceId: queryId,
           dataContent: [],
-          pageSize: 9999
+          pageSize: 9999,
         })
         if (String(code) === '0') {
           const listValues = returnData.listValues || returnData

src/views/statisticsCharts/components/statisticsTabs.vue

@@ -1,25 +1,59 @@
 <template>
   <div class="statistics-tabs">
-    <el-row :gutter="16" type="flex">
-      <el-col v-for="(tab, index) in newTabList" :key="index" :span="4">
-        <el-dropdown v-if="tab.children && tab.children.length" placement="bottom" @command="commandHandler">
+    <el-row
+      :gutter="16"
+      type="flex"
+    >
+      <el-col
+        v-for="(tab, index) in newTabList"
+        :key="index"
+        :span="4"
+      >
+        <el-dropdown
+          v-if="tab.children && tab.children.length"
+          placement="bottom"
+          @command="commandHandler"
+        >
           <div :class="['tab-bar', { 'tab-active': activeIndex === index }]">
-            <img class="tab-icon" :src="activeIndex === index ? activeIcon : defaultIcon" :alt="tab.title" />
-            <el-tooltip :content="tab.title" placement="top">
+            <img
+              class="tab-icon"
+              :src="activeIndex === index ? activeIcon : defaultIcon"
+              :alt="tab.title"
+            />
+            <el-tooltip
+              :content="tab.title"
+              placement="top"
+            >
               <span class="tab-title">{{ tab.title }}</span>
             </el-tooltip>
             <i class="icon-arrow el-icon-caret-bottom" />
           </div>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item v-for="(childTab, childIndex) in tab.children" :key="childIndex" :command="[tab.path, childTab.path]">{{ childTab.title }}</el-dropdown-item>
+            <el-dropdown-item
+              v-for="(childTab, childIndex) in tab.children"
+              :key="childIndex"
+              :command="[tab.path, childTab.path]"
+              >{{ childTab.title }}</el-dropdown-item
+            >
           </el-dropdown-menu>
         </el-dropdown>
-        <div v-else :class="[
+        <div
+          v-else
+          :class="[
             'tab-bar tab-bar-single',
             { 'tab-active': activeIndex === index },
-          ]" @click="clickHandler(tab.path)">
-          <img class="tab-icon" :src="activeIndex === index ? activeIcon : defaultIcon" :alt="tab.title" />
-          <el-tooltip :content="tab.title" placement="top">
+          ]"
+          @click="clickHandler(tab.path)"
+        >
+          <img
+            class="tab-icon"
+            :src="activeIndex === index ? activeIcon : defaultIcon"
+            :alt="tab.title"
+          />
+          <el-tooltip
+            :content="tab.title"
+            placement="top"
+          >
             <span class="tab-title">{{ tab.title }}</span>
           </el-tooltip>
         </div>
@@ -31,34 +65,54 @@
 <script>
 export default {
   name: 'StatisticsTabs',
-  data () {
+  data() {
     return {
       defaultIcon: require('@/assets/nav/ic_statistical_top_default.png'),
       activeIcon: require('@/assets/nav/ic_statistical_top_check.png'),
       tabList: [
-        {
-          title: '行李量相关统计',
-          path: '/statisticsCharts/airlineCompany',
-          roles: ['airline_baggage_statistics'],
-          children: [
-            {
-              path: 'flight',
-              title: '行李数量统计',
-            },
-            {
-              path: 'baggage',
-              title: '航司行李量统计',
-            },
-            {
-              path: 'baggagePassenger',
-              title: '航线行李量统计',
-            },
-            {
-              path: 'hourPassenger',
-              title: '行李小时量统计',
-            },
-          ],
-        },
+        // {
+        //   title: '航司行李相关统计',
+        //   path: '/statisticsCharts/airlineCompany',
+        //   roles: ['airline_baggage_statistics'],
+        //   children: [
+        //     {
+        //       path: 'flight',
+        //       title: '航班量统计',
+        //     },
+        //     {
+        //       path: 'baggage',
+        //       title: '行李量统计',
+        //     },
+        //     {
+        //       path: 'baggagePassenger',
+        //       title: '行李旅客量统计',
+        //     },
+        //     {
+        //       path: 'specialBaggage',
+        //       title: '特殊行李量统计',
+        //     },
+        //     {
+        //       path: 'baggageAverage',
+        //       title: '平均行李量统计',
+        //     },
+        //     {
+        //       path: 'abnormalBaggage',
+        //       title: '异常行李量统计',
+        //     },
+        //     {
+        //       path: 'complaintBaggage',
+        //       title: '投诉行李量统计',
+        //     },
+        //     {
+        //       path: 'compensationBaggage',
+        //       title: '赔偿行李量统计',
+        //     },
+        //     {
+        //       path: 'compensation',
+        //       title: '赔偿金额统计',
+        //     },
+        //   ],
+        // },
         // {
         //   path: '/statisticsCharts/passengerClassification',
         //   title: '旅客分类统计',
@@ -113,16 +167,6 @@ export default {
         //     },
         //   ],
         // },
-        {
-          path: '/statisticsCharts/node',
-          title: '扫描节点与位置分析',
-          roles: ['scanning_node_and_location_analysis'],
-        },
-        {
-          path: '/statisticsCharts/cap',
-          title: '工作量统计',
-          roles: ['scanning_node_and_location_analysis'],
-        },
         // {
         //   title: '报表统计',
         //   path: '/statisticsCharts/report',
@@ -194,12 +238,49 @@ export default {
         //   title: '统计分析',
         //   roles: ['statistical_analysis'],
         // },
+        {
+          title: '行李量相关统计',
+          path: '/statisticsCharts/baggage',
+          children: [
+            {
+              path: 'all',
+              title: '行李数量统计',
+            },
+            {
+              path: 'company',
+              title: '航司行李量统计',
+            },
+            {
+              path: 'airline',
+              title: '航线行李量统计',
+            },
+            {
+              path: 'hour',
+              title: '行李小时量统计',
+            },
+          ],
+        },
+        {
+          path: '/statisticsCharts/node',
+          title: '扫描节点与位置分析',
+          roles: ['scanning_node_and_location_analysis'],
+        },
+        {
+          path: '/statisticsCharts/workload',
+          title: '工作量统计',
+          roles: ['scanning_node_and_location_analysis'],
+        },
+        {
+          path: '/statisticsCharts/abnormal',
+          title: '异常行李分析',
+          roles: ['scanning_node_and_location_analysis'],
+        },
       ],
       activeIndex: null,
     }
   },
   computed: {
-    newTabList () {
+    newTabList() {
       // const auths = JSON.parse(sessionStorage.getItem('userAuthList'))
       // return this.tabList.filter(
       //   tab => !tab.roles || tab.roles.every(role => auths.includes(role))
@@ -209,7 +290,7 @@ export default {
   },
   watch: {
     '$route.path': {
-      handler (path) {
+      handler(path) {
         let activeIndex = null
         this.newTabList.some((tab, index) => {
           if (path.includes(tab.path)) {
@@ -223,7 +304,7 @@ export default {
     },
   },
   methods: {
-    commandHandler (pathArray) {
+    commandHandler(pathArray) {
       if (pathArray.some(path => !path)) {
         this.$message.info('开发中')
         return
@@ -232,7 +313,7 @@ export default {
         path: pathArray.join('/'),
       })
     },
-    clickHandler (path) {
+    clickHandler(path) {
       if (!path) {
         this.$message.info('开发中')
         return
@@ -277,7 +358,7 @@ export default {
         padding-left: 12px;
         padding-right: 8px;
         font-size: 14px;
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         font-weight: bold;
         color: #101116;
         letter-spacing: 0;

src/views/statisticsCharts/views/abnormalBaggageClassificationStatisticsCharts.vue

@@ -0,0 +1,64 @@
+<template>
+  <CommonPieStatisticsCharts
+    charts-title="异常行李分类"
+    :query-settings="querySettings"
+    :categories="categories"
+    :form-data="formData"
+    :form-items="formItems"
+  />
+</template>
+
+<script>
+import CommonPieStatisticsCharts from '../components/newPieStatisticsCharts.vue'
+
+export default {
+  name: 'AbnormalBaggageClassificationStatisticsCharts',
+  components: { CommonPieStatisticsCharts },
+
+  data() {
+    return {
+      querySettings: {
+        serviceId: SERVICE_ID.abnormalBaggageClassification,
+      },
+      categories: [
+        {
+          name: '少收',
+          key: 'shaoshou',
+        },
+        {
+          name: '多收',
+          key: 'duoshou',
+        },
+        {
+          name: '破损',
+          key: 'posun',
+        },
+      ],
+      formData: {
+        dateTime: [],
+        airport: '',
+      },
+      formItems: [
+        {
+          prop: 'airport',
+          inputType: 'select',
+          placeholder: '航站',
+          width: '150px',
+          filterable: true,
+          // multiple: true,
+          queryId: SERVICE_ID.AirportIds,
+          setKey: 'code3',
+          requiredWarning: '请先选择航站',
+          options: [],
+        },
+        {
+          prop: 'dateTime',
+          inputType: 'datePicker',
+          width: '240px',
+          requiredWarning: '请先选择统计时间范围',
+        },
+      ],
+    }
+  },
+}
+</script>

src/views/statisticsCharts/views/airlineCompany/baggagePassengerStatisticsCharts.vue

@@ -1,9 +1,7 @@
 <template>
   <CommonBarStatisticsCharts
-    charts-title="航线行李量"
+    charts-title="行李旅客量"
     :query-settings="querySettings"
-    :formItems="formItems"
-    :formData="formData"
   />
 </template>
 
@@ -15,53 +13,10 @@ export default {
   data() {
     return {
       querySettings: {
-        serviceId: SERVICE_ID.LuggagecId,
-      },
-      formData: {
-        air_line: null,
-        // iata_code: null,
-        dateTime: [],
-        timedim: '',
-      },
-      formItems: [
-        {
-          prop: 'air_line',
-          inputType: 'select',
-          placeholder: '航线',
-          requiredWarning: '请先选择航线',
-          filterable: true,
-          // clearable: true,
-          width: '180px',
-          queryId: SERVICE_ID.AirlineIds,
-          setKey: 'air_line',
-          options: [],
-        },
-        {
-          prop: 'timedim',
-          inputType: 'select',
-          placeholder: '行李类型',
-          requiredWarning: '请先选择行李类型',
-          // clearable: true,
-          options: [
-            {
-              value: '正常',
-              label: '正常',
-            },
-            {
-              value: '异常',
-              label: '异常',
-            },
-          ],
-        },
-        {
-          prop: 'dateTime',
-          inputType: 'datePicker',
-          // clearable: true,
-          width: '240px',
-          requiredWarning: '请先选择时间范围',
-        },
-      ],
+        byArea: SERVICE_ID.baggagePassengerByArea,
+        byOther: SERVICE_ID.baggagePassengerByOther
+      }
     }
-  },
+  }
 }
 </script>

src/views/statisticsCharts/views/airlineCompany/baggageStatisticsCharts.vue

@@ -1,9 +1,8 @@
 <template>
   <CommonBarStatisticsCharts
-    charts-title="航司行李量"
+    charts-title="行李量"
     :query-settings="querySettings"
-    :formItems="formItems"
-    :formData="formData"
+    :custom-form-items="customFormItems"
   />
 </template>
 
@@ -15,54 +14,31 @@ export default {
   data() {
     return {
       querySettings: {
-        serviceId: SERVICE_ID.LuggagecId,
+        byArea: SERVICE_ID.baggageByArea,
+        byOther: SERVICE_ID.baggageByOther,
+        notDelByArea: SERVICE_ID.notDelByArea,
+        notDelByOther: SERVICE_ID.notDelByOther
       },
-      formData: {
-        iata_code: null,
-        dateTime: [],
-        timedim: '',
-      },
-      formItems: [
-        {
-          prop: 'iata_code',
-          inputType: 'select',
-          placeholder: '航司',
-          requiredWarning: '请先选择航司',
-          width: '150px',
-          filterable: true,
-          // clearable: true,
-          // multiple: true,
-          // disabled: true,
-          queryId: SERVICE_ID.AirlinportId,
-          setKey: 'ITATCode',
-          options: [],
-        },
+      customFormItems: [
         {
-          prop: 'timedim',
+          prop: 'baggageType',
           inputType: 'select',
           placeholder: '行李类型',
           requiredWarning: '请先选择行李类型',
-          // clearable: true,
+          clearable: true,
           options: [
             {
-              value: '正常',
-              label: '正常',
+              value: '全部',
+              label: '全部'
             },
             {
-              value: '异常',
-              label: '异常',
-            },
-          ],
-        },
-        {
-          prop: 'dateTime',
-          inputType: 'datePicker',
-          // clearable: true,
-          width: '240px',
-          requiredWarning: '请先选择时间范围',
-        },
-      ],
+              value: '不包含DEL',
+              label: '实际托运'
+            }
+          ]
+        }
+      ]
     }
-  },
+  }
 }
 </script>

src/views/statisticsCharts/views/airlineCompany/flightStatisticsCharts.vue

@@ -1,9 +1,8 @@
 <template>
   <CommonBarStatisticsCharts
-    charts-title="行李数量"
+    charts-title="航班量"
     :query-settings="querySettings"
-    :formItems="formItems"
-    :formData="formData"
+    :custom-form-items="customFormItems"
   />
 </template>
 
@@ -15,56 +14,31 @@ export default {
   data() {
     return {
       querySettings: {
-        serviceId: SERVICE_ID.LuggageInId,
+        byArea: SERVICE_ID.byArea,
+        byOther: SERVICE_ID.byOther,
+        withBaggageByArea: SERVICE_ID.withBaggageByArea,
+        withBaggageByOther: SERVICE_ID.withBaggageByOther
       },
-      formData: {
-        airport: 'CAN',
-        dateTime: [],
-        io: '',
-      },
-      formItems: [
-        {
-          prop: 'airport',
-          inputType: 'select',
-          placeholder: '航站',
-          width: '150px',
-          filterable: true,
-          // clearable: true,
-          requiredWarning: '请先选择航站',
-          queryId: SERVICE_ID.AirportIds,
-          setKey: 'code3',
-          options: [],
-        },
+      customFormItems: [
         {
-          prop: 'io',
+          prop: 'flightType',
           inputType: 'select',
-          placeholder: '进出港',
-          requiredWarning: '请先选择进出港',
-          // clearable: true,
+          placeholder: '航班属性',
+          requiredWarning: '请先选择航班属性',
+          clearable: true,
           options: [
             {
-              value: '离港',
-              label: '离港',
+              value: '全部',
+              label: '全部'
             },
             {
-              value: '进港',
-              label: '进港',
-            },
-            {
-              value: '中转',
-              label: '中转',
-            },
-          ],
-        },
-        {
-          prop: 'dateTime',
-          inputType: 'datePicker',
-          // clearable: true,
-          width: '240px',
-          requiredWarning: '请先选择统计时间范围',
-        },
-      ],
+              value: '有行李',
+              label: '有行李'
+            }
+          ]
+        }
+      ]
     }
-  },
+  }
 }
 </script>

src/views/statisticsCharts/views/airlineCompany/specialBaggageStatisticsCharts.vue

@@ -1,8 +1,7 @@
 <template>
   <CommonBarStatisticsCharts
-    charts-title="航线行李量"
+    charts-title="特殊行李量"
     :query-settings="querySettings"
-    :formItems="formItems"
   />
 </template>
 
@@ -16,62 +15,7 @@ export default {
       querySettings: {
         byArea: SERVICE_ID.specialBaggageByArea,
         byOther: SERVICE_ID.specialBaggageByOther
-      },
-      formItems: [
-        {
-          prop: 'company',
-          inputType: 'select',
-          placeholder: '航站',
-          requiredWarning: '请先选择航站',
-          clearable: true,
-          options: [
-            {
-              value: '国航',
-              label: '国航',
-            },
-            {
-              value: '代理国内',
-              label: '代理国内',
-            },
-            {
-              value: '代理国际',
-              label: '代理国际',
-            },
-            {
-              value: '非代理',
-              label: '非代理',
-            },
-          ],
-        },
-        {
-          prop: 'timedim',
-          inputType: 'select',
-          placeholder: '进出港',
-          requiredWarning: '请先选择进出港',
-          clearable: true,
-          options: [
-            {
-              value: '日',
-              label: '按日统计',
-            },
-            {
-              value: '月',
-              label: '按月统计',
-            },
-            {
-              value: '年',
-              label: '按年统计',
-            },
-          ],
-        },
-        {
-          prop: 'dateTime',
-          inputType: 'datePicker',
-          clearable: true,
-          width: '240px',
-          options: [],
-        },
-      ],
+      }
     }
   }
 }

src/views/statisticsCharts/views/baggage/airlineStatisticsCharts.vue

@@ -0,0 +1,67 @@
+<template>
+  <CommonBarStatisticsCharts
+    charts-title="航线行李量"
+    :query-settings="querySettings"
+    :formItems="formItems"
+    :formData="formData"
+  />
+</template>
+
+<script>
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
+export default {
+  name: 'BaggagePassengerStatisticsCharts',
+  components: { CommonBarStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        serviceId: SERVICE_ID.LuggagecId,
+      },
+      formData: {
+        air_line: null,
+        // iata_code: null,
+        dateTime: [],
+        timedim: '',
+      },
+      formItems: [
+        {
+          prop: 'air_line',
+          inputType: 'select',
+          placeholder: '航线',
+          requiredWarning: '请先选择航线',
+          filterable: true,
+          // clearable: true,
+          width: '180px',
+          queryId: SERVICE_ID.AirlineIds,
+          setKey: 'air_line',
+          options: [],
+        },
+        {
+          prop: 'timedim',
+          inputType: 'select',
+          placeholder: '行李类型',
+          requiredWarning: '请先选择行李类型',
+          // clearable: true,
+          options: [
+            {
+              value: '正常',
+              label: '正常',
+            },
+            {
+              value: '异常',
+              label: '异常',
+            },
+          ],
+        },
+        {
+          prop: 'dateTime',
+          inputType: 'datePicker',
+          // clearable: true,
+          width: '240px',
+          requiredWarning: '请先选择时间范围',
+        },
+      ],
+    }
+  },
+}
+</script>

src/views/statisticsCharts/views/baggage/baggageAllStatisticsCharts.vue

@@ -0,0 +1,70 @@
+<template>
+  <CommonBarStatisticsCharts
+    charts-title="行李数量"
+    :query-settings="querySettings"
+    :formItems="formItems"
+    :formData="formData"
+  />
+</template>
+
+<script>
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
+export default {
+  name: 'FlightStatisticsCharts',
+  components: { CommonBarStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        serviceId: SERVICE_ID.LuggageInId,
+      },
+      formData: {
+        airport: 'CAN',
+        dateTime: [],
+        io: '',
+      },
+      formItems: [
+        {
+          prop: 'airport',
+          inputType: 'select',
+          placeholder: '航站',
+          width: '150px',
+          filterable: true,
+          // clearable: true,
+          requiredWarning: '请先选择航站',
+          queryId: SERVICE_ID.AirportIds,
+          setKey: 'code3',
+          options: [],
+        },
+        {
+          prop: 'io',
+          inputType: 'select',
+          placeholder: '进出港',
+          requiredWarning: '请先选择进出港',
+          // clearable: true,
+          options: [
+            {
+              value: '离港',
+              label: '离港',
+            },
+            {
+              value: '进港',
+              label: '进港',
+            },
+            {
+              value: '中转',
+              label: '中转',
+            },
+          ],
+        },
+        {
+          prop: 'dateTime',
+          inputType: 'datePicker',
+          // clearable: true,
+          width: '240px',
+          requiredWarning: '请先选择统计时间范围',
+        },
+      ],
+    }
+  },
+}
+</script>

src/views/statisticsCharts/views/baggage/companyStatisticsCharts.vue

@@ -0,0 +1,68 @@
+<template>
+  <CommonBarStatisticsCharts
+    charts-title="航司行李量"
+    :query-settings="querySettings"
+    :formItems="formItems"
+    :formData="formData"
+  />
+</template>
+
+<script>
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
+export default {
+  name: 'BaggageStatisticsCharts',
+  components: { CommonBarStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        serviceId: SERVICE_ID.LuggagecId,
+      },
+      formData: {
+        iata_code: null,
+        dateTime: [],
+        timedim: '',
+      },
+      formItems: [
+        {
+          prop: 'iata_code',
+          inputType: 'select',
+          placeholder: '航司',
+          requiredWarning: '请先选择航司',
+          width: '150px',
+          filterable: true,
+          // clearable: true,
+          // multiple: true,
+          // disabled: true,
+          queryId: SERVICE_ID.AirlinportId,
+          setKey: 'ITATCode',
+          options: [],
+        },
+        {
+          prop: 'timedim',
+          inputType: 'select',
+          placeholder: '行李类型',
+          requiredWarning: '请先选择行李类型',
+          // clearable: true,
+          options: [
+            {
+              value: '正常',
+              label: '正常',
+            },
+            {
+              value: '异常',
+              label: '异常',
+            },
+          ],
+        },
+        {
+          prop: 'dateTime',
+          inputType: 'datePicker',
+          // clearable: true,
+          width: '240px',
+          requiredWarning: '请先选择时间范围',
+        },
+      ],
+    }
+  },
+}
+</script>

src/views/statisticsCharts/views/airlineCompany/hourPassengerStatisticsCharts.vue → src/views/statisticsCharts/views/baggage/hourStatisticsCharts.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 export default {
   name: 'FlightStatisticsCharts',
   components: { CommonBarStatisticsCharts },

src/views/statisticsCharts/views/airlineCompany/capPassengerStatisticsCharts.vue → src/views/statisticsCharts/views/workloadStatisticsCharts.vue

@@ -8,11 +8,11 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../components/commonBarStatisticsCharts.vue'
 import { Query } from '@/api/webApi'
 
 export default {
-  name: 'BaggagePassengerStatisticsCharts',
+  name: 'WorkloadStatisticsCharts',
   components: { CommonBarStatisticsCharts },
   data() {
     const that = this