统计图表新增旅客量统计、特殊行李统计

public/config.js

@@ -93,6 +93,13 @@ const DATACONTENT_ID = {
   byAreaId: 1158, //根据大区统计ID
   baggageByOtherId: 1167, // 获取行李统计
   baggageByAreaId: 1168, // 获取行李统计-分公司
+  
+  // 待修改
+  passengerByOtherId: 1167, // 获取旅客统计
+  passengerByAreaId: 1168, // 获取旅客统计-分公司
+  specialBaggageByOtherId: 1167, // 获取特殊行李统计
+  specialBaggageByAreaId: 1168, // 获取特殊行李统计-分公司
+
   nodeRangeId: 1171, // 节点获取查询范围
   nodeAirlineId: 1172, // 节点获取航线下拉
   nodeAirportId: 1173,  // 节点获取航站下拉

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

@@ -4,7 +4,8 @@ const statisticsChartsRoutes = {
   path: '/statisticsCharts',
   component: Layout,
   meta: {
-    title: '统计图表', keepAlive: false
+    title: '统计图表',
+    keepAlive: false
   },
   children: [
     {
@@ -38,7 +39,21 @@ const statisticsChartsRoutes = {
           name: 'BaggageStatisticsCharts',
           hidden: true,
           component: () => import('@/views/statisticsCharts/views/baggageStatisticsCharts'),
-          meta: { title: '行李统计', keepAlive: false }
+          meta: { title: '行李量统计', keepAlive: false }
+        },
+        {
+          path: '/statisticsCharts/specialBaggage',
+          name: 'SpecialBaggageStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/specialBaggageStatisticsCharts'),
+          meta: { title: '特殊行李量统计', keepAlive: false }
+        },
+        {
+          path: '/statisticsCharts/passenger',
+          name: 'PassengerStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/passengerStatisticsCharts'),
+          meta: { title: '旅客量统计', keepAlive: false }
         }
       ]
     }

src/views/statisticsCharts/components/commonStatisticsCharts.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="statstics-wrapper">
+    <div
+      ref="headerWrapper"
+      class="statstics-header"
+    >
+      <StatisticsHeader
+        :title="`${chartsTitle}量统计`"
+        @getFormData="getFormData"
+      />
+    </div>
+    <div class="statstics-content">
+      <div
+        id="chart"
+        class="flight-statistics-chart"
+        :style="{ height: chartHeight }"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import StatisticsHeader from './statisticsHeader.vue'
+import { Query } from '@/api/dataIntegration'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'CommonStatisticsCharts',
+  components: { StatisticsHeader },
+  props: {
+    chartsTitle: {
+      type: String,
+      required: true
+    },
+    querySettings: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      myChart: null,
+      debounceTime: 300,
+      chartHeight: '70vh',
+      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}数量`,
+            // `${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}数量`,
+            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: []
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar'])
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    options: {
+      handler(obj) {
+        this.myChart.setOption(obj)
+      },
+      deep: true
+    },
+    'sidebar.expand'() {
+      this.resizeHandler()
+    }
+  },
+  mounted() {
+    this.setChartHeight()
+    this.myChart = this.$echarts.init(document.getElementById('chart'))
+    this.myChart.setOption(this.options)
+    // 监听页面缩放
+    window.addEventListener('resize', this.setChartHeight)
+    window.addEventListener('resize', this._.debounce(this.resizeHandler, this.debounceTime))
+    this.$nextTick(() => {
+      this.resizeHandler()
+    })
+  },
+  beforeDestroy() {
+    // 销毁实例和移除监听
+    window.removeEventListener('resize', this.setChartHeight)
+    if (this.myChart) {
+      this.myChart.dispose()
+      window.removeEventListener('resize', this.resizeHandler)
+      this.myChart = null
+    }
+  },
+  methods: {
+    getFormData(data) {
+      this.getData(data)
+    },
+    async getData(data) {
+      let id
+      let params = []
+      if (data.range === '') {
+        this.$message.warning('请先选择统计范围')
+        return
+      } else if (data.range === '航线' && !data.airline) {
+        this.$message.warning('请先选择航线')
+        return
+      } else if (data.range === '航站' && !data.airport) {
+        this.$message.warning('请先选择航站')
+        return
+      } else if (data.range === '基地分公司' && !data.company) {
+        this.$message.warning('请先选择基地分公司')
+        return
+      }
+      if (data.inOrOut === '') {
+        this.$message.warning('请先选择进离港')
+        return
+      }
+      if (data.interval === '') {
+        this.$message.warning('请先选择统计时间维度')
+        return
+      }
+      if (data.dateTime === '') {
+        this.$message.warning('请先选择统计时间范围')
+        return
+      }
+      if (data.range === '基地分公司') {
+        // id = DATACONTENT_ID.byAreaId
+        id = this.querySettings.byAreaId
+        params = [data.interval, data.company, data.inOrOut, data.dateTime[0], data.dateTime[1]]
+      } else if (data.range !== '基地分公司' && data.range !== '') {
+        // id = DATACONTENT_ID.byOtherId
+        id = this.querySettings.byOtherId
+        params = [data.interval, data.range, data.inOrOut, data.dateTime[0], data.dateTime[1]]
+        if (data.airline === '' && data.airport === '' && data.terminal === '') {
+          params.splice(2, 0, '全部')
+        }
+        if (data.airline !== '') {
+          params.splice(2, 0, data.airline)
+        }
+        if (data.airport !== '') {
+          params.splice(2, 0, data.airport)
+        }
+        if (data.terminal !== '') {
+          params.splice(2, 0, data.terminal)
+        }
+      }
+      try {
+        const {
+          code,
+          returnData: { listValues },
+          message
+        } = await Query({
+          id: id,
+          dataContent: params
+        })
+        if (Number(code) === 0) {
+          const xAxisData = []
+          const yAxisData = [0]
+          const seriesData = []
+          for (let i = 0; i < listValues.length; i++) {
+            xAxisData.push(listValues[i].A)
+            seriesData.push(listValues[i][this.querySettings.seriesKey])
+            if (i > 0) {
+              if (listValues[i - 1][this.querySettings.seriesKey] > 0) {
+                yAxisData.push(
+                  (listValues[i][this.querySettings.seriesKey] -
+                    listValues[i - 1][this.querySettings.seriesKey]) /
+                    listValues[i - 1][this.querySettings.seriesKey]
+                )
+              } else {
+                yAxisData.push(0)
+              }
+            }
+          }
+          let max = Math.max(...seriesData)
+          max = Math.ceil(max / 10) * 10
+          this.options.yAxis[0].max = max
+          this.options.xAxis.data = xAxisData
+          this.options.series[0].data = seriesData
+          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.resizeHandler()
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.log('出错了', error)
+      }
+    },
+    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)`
+    },
+    resizeHandler() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statstics-wrapper {
+  .flight-statistics-chart {
+    width: 100%;
+  }
+}
+</style>

src/views/statisticsCharts/components/statisticsTabs.vue

@@ -8,7 +8,7 @@
     >
       <img
         class="tab-icon"
-        :src="activeIndex === index ? tab.activeIcon : tab.icon"
+        :src="activeIndex === index ? tab.activeIcon : tab.defaultIcon"
         :alt="tab.title"
       >
       <span class="tab-title">{{ tab.title }}</span>
@@ -17,6 +17,9 @@
 </template>
 
 <script>
+const defaultIcon = require('@/assets/nav/ic_statistical_top_default.png')
+const activeIcon = require('@/assets/nav/ic_statistical_top_check.png')
+
 export default {
   name: 'StatisticsTabs',
   data() {
@@ -24,21 +27,33 @@ export default {
       tabList: [
         {
           path: '/statisticsCharts/flight',
-          icon: require('@/assets/nav/ic_statistical_top_default.png'),
-          activeIcon: require('@/assets/nav/ic_statistical_top_check.png'),
-          title: '航班量统计'
+          title: '航班量统计',
+          defaultIcon,
+          activeIcon
         },
         {
           path: '/statisticsCharts/node',
-          icon: require('@/assets/nav/ic_statistical_top_default.png'),
-          activeIcon: require('@/assets/nav/ic_statistical_top_check.png'),
-          title: '扫描节点与位置分析'
+          title: '扫描节点与位置分析',
+          defaultIcon,
+          activeIcon
         },
         {
           path: '/statisticsCharts/baggage',
-          icon: require('@/assets/nav/ic_statistical_top_default.png'),
-          activeIcon: require('@/assets/nav/ic_statistical_top_check.png'),
-          title: '行李统计'
+          title: '行李量统计',
+          defaultIcon,
+          activeIcon
+        },
+        {
+          path: '/statisticsCharts/specialBaggage',
+          title: '特殊行李量统计',
+          defaultIcon,
+          activeIcon
+        },
+        {
+          path: '/statisticsCharts/passenger',
+          title: '旅客量统计',
+          defaultIcon,
+          activeIcon
         }
       ],
       activeIndex: null

src/views/statisticsCharts/views/baggageStatisticsCharts.vue

@@ -1,338 +1,23 @@
 <template>
-  <div class="statstics-wrapper">
-    <div
-      ref="headerWrapper"
-      class="statstics-header"
-    >
-      <StatisticsHeader
-        title="行李统计"
-        @getFormData="getFormData"
-      />
-    </div>
-    <div class="statstics-content">
-      <div
-        id="chart"
-        class="flight-statistics-chart"
-        :style="{ height: chartHeight }"
-      />
-    </div>
-  </div>
+  <CommonStatisticsCharts
+    charts-title="行李"
+    :query-settings="querySettings"
+  />
 </template>
 
 <script>
-import StatisticsHeader from '../components/statisticsHeader.vue'
-import { Query } from '@/api/dataIntegration'
-import { mapGetters } from 'vuex'
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
 export default {
-  name: 'FlightStatisticsCharts',
-  components: { StatisticsHeader },
+  name: 'BaggageStatisticsCharts',
+  components: { CommonStatisticsCharts },
   data() {
     return {
-      myChart: null,
-      debounceTime: 300,
-      chartHeight: '70vh',
-      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: [
-            '行李数量',
-            // '行李量同比',
-            '行李量环比'
-          ],
-          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: '行李数量',
-            type: 'bar',
-            z: 2,
-            itemStyle: {
-              color: '#6682B5'
-            },
-            barWidth: 40,
-            label: {
-              show: true,
-              position: 'top'
-            },
-            data: []
-          },
-          {
-            name: '行李量同比',
-            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: '行李量环比',
-            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: []
-          }
-        ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters(['sidebar'])
-  },
-  watch: {
-    // 监听数据变化 重绘图形
-    options: {
-      handler(obj) {
-        this.myChart.setOption(obj)
-      },
-      deep: true
-    },
-    'sidebar.expand'() {
-      this.resizeHandler()
-    }
-  },
-  mounted() {
-    this.setChartHeight()
-    this.myChart = this.$echarts.init(document.getElementById('chart'))
-    this.myChart.setOption(this.options)
-    // 监听页面缩放
-    window.addEventListener('resize', this.setChartHeight)
-    window.addEventListener('resize', this._.debounce(this.resizeHandler, this.debounceTime))
-    this.$nextTick(() => {
-      this.resizeHandler()
-    })
-  },
-  beforeDestroy() {
-    // 销毁实例和移除监听
-    window.removeEventListener('resize', this.setChartHeight)
-    if (this.myChart) {
-      this.myChart.dispose()
-      window.removeEventListener('resize', this.resizeHandler)
-      this.myChart = null
-    }
-  },
-  methods: {
-    getFormData(data) {
-      this.getData(data)
-    },
-    async getData(data) {
-      let id
-      let params = []
-      if (data.range === '') {
-        this.$message.warning('请先选择统计范围')
-        return
-      } else if (data.range === '航线' && !data.airline) {
-        this.$message.warning('请先选择航线')
-        return
-      } else if (data.range === '航站' && !data.airport) {
-        this.$message.warning('请先选择航站')
-        return
-      } else if (data.range === '基地分公司' && !data.company) {
-        this.$message.warning('请先选择基地分公司')
-        return
-      }
-      if (data.inOrOut === '') {
-        this.$message.warning('请先选择进离港')
-        return
-      }
-      if (data.interval === '') {
-        this.$message.warning('请先选择统计时间维度')
-        return
-      }
-      if (data.dateTime === '') {
-        this.$message.warning('请先选择统计时间范围')
-        return
-      }
-      if (data.range === '基地分公司') {
-        id = DATACONTENT_ID.baggageByAreaId
-        params = [data.interval, data.company, data.inOrOut, data.dateTime[0], data.dateTime[1]]
-      } else if (data.range !== '基地分公司' && data.range !== '') {
-        id = DATACONTENT_ID.baggageByOtherId
-        params = [data.interval, data.range, data.inOrOut, data.dateTime[0], data.dateTime[1]]
-        if (data.airline === '' && data.airport === '' && data.terminal === '') {
-          params.splice(2, 0, '全部')
-        }
-        if (data.airline !== '') {
-          params.splice(2, 0, data.airline)
-        }
-        if (data.airport !== '') {
-          params.splice(2, 0, data.airport)
-        }
-        if (data.terminal !== '') {
-          params.splice(2, 0, data.terminal)
-        }
-      }
-      try {
-        const res = await Query({
-          id: id,
-          dataContent: params
-        })
-        if (res.code === '0') {
-          const dateArr = []
-          const dataArr = []
-          const chainArr = [0]
-          for (let i = 0; i < res.returnData.listValues.length; i++) {
-            dateArr.push(res.returnData.listValues[i].A)
-            dataArr.push(res.returnData.listValues[i]['sum(a12)'])
-            if (i > 0) {
-              if (res.returnData.listValues[i - 1]['sum(a12)'] > 0) {
-                chainArr.push(
-                  (res.returnData.listValues[i]['sum(a12)'] - res.returnData.listValues[i - 1]['sum(a12)']) /
-                    res.returnData.listValues[i - 1]['sum(a12)']
-                )
-              } else {
-                chainArr.push(0)
-              }
-            }
-          }
-          let max = Math.max(...dataArr)
-          max = Math.ceil(max / 10) * 10
-          this.options.yAxis[0].max = max
-          this.options.xAxis.data = dateArr
-          this.options.series[0].data = dataArr
-          this.options.series[2].data = chainArr
-          this.options.yAxis[1].min = (Math.min(...chainArr) - 0.1).toFixed(2)
-          this.options.yAxis[1].max = (Math.max(...chainArr) + 0.1).toFixed(2)
-          this.resizeHandler()
-        } else {
-          this.$message.error(res.message)
-        }
-      } catch (error) {
-        console.log('出错了', error)
-      }
-    },
-    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)`
-    },
-    resizeHandler() {
-      if (this.myChart) {
-        this.myChart.resize()
+      querySettings: {
+        byAreaId: DATACONTENT_ID.baggageByAreaId,
+        byOtherId: DATACONTENT_ID.baggageByOtherId,
+        seriesKey: 'sum(a12)'
       }
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.statstics-wrapper {
-  .flight-statistics-chart {
-    width: 100%;
-  }
-}
-</style>

src/views/statisticsCharts/views/flightStatisticsCharts.vue

@@ -1,338 +1,23 @@
 <template>
-  <div class="statstics-wrapper">
-    <div
-      ref="headerWrapper"
-      class="statstics-header"
-    >
-      <StatisticsHeader
-        title="航班量统计"
-        @getFormData="getFormData"
-      />
-    </div>
-    <div class="statstics-content">
-      <div
-        id="chart"
-        class="flight-statistics-chart"
-        :style="{ height: chartHeight }"
-      />
-    </div>
-  </div>
+  <CommonStatisticsCharts
+    charts-title="航班"
+    :query-settings="querySettings"
+  />
 </template>
 
 <script>
-import StatisticsHeader from '../components/statisticsHeader.vue'
-import { Query } from '@/api/dataIntegration'
-import { mapGetters } from 'vuex'
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
 export default {
   name: 'FlightStatisticsCharts',
-  components: { StatisticsHeader },
+  components: { CommonStatisticsCharts },
   data() {
     return {
-      myChart: null,
-      debounceTime: 300,
-      chartHeight: '70vh',
-      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: [
-            '航班数量',
-            // '航班量同比',
-            '航班量环比'
-          ],
-          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: '航班数量',
-            type: 'bar',
-            z: 2,
-            itemStyle: {
-              color: '#6682B5'
-            },
-            barWidth: 40,
-            label: {
-              show: true,
-              position: 'top'
-            },
-            data: []
-          },
-          {
-            name: '航班量同比',
-            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: '航班量环比',
-            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: []
-          }
-        ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters(['sidebar'])
-  },
-  watch: {
-    // 监听数据变化 重绘图形
-    options: {
-      handler(obj) {
-        this.myChart.setOption(obj)
-      },
-      deep: true
-    },
-    'sidebar.expand'() {
-      this.resizeHandler()
-    }
-  },
-  mounted() {
-    this.setChartHeight()
-    this.myChart = this.$echarts.init(document.getElementById('chart'))
-    this.myChart.setOption(this.options)
-    // 监听页面缩放
-    window.addEventListener('resize', this.setChartHeight)
-    window.addEventListener('resize', this._.debounce(this.resizeHandler, this.debounceTime))
-    this.$nextTick(() => {
-      this.resizeHandler()
-    })
-  },
-  beforeDestroy() {
-    // 销毁实例和移除监听
-    window.removeEventListener('resize', this.setChartHeight)
-    if (this.myChart) {
-      this.myChart.dispose()
-      window.removeEventListener('resize', this.resizeHandler)
-      this.myChart = null
-    }
-  },
-  methods: {
-    getFormData(data) {
-      this.getData(data)
-    },
-    async getData(data) {
-      let id
-      let params = []
-      if (data.range === '') {
-        this.$message.warning('请先选择统计范围')
-        return
-      } else if (data.range === '航线' && !data.airline) {
-        this.$message.warning('请先选择航线')
-        return
-      } else if (data.range === '航站' && !data.airport) {
-        this.$message.warning('请先选择航站')
-        return
-      } else if (data.range === '基地分公司' && !data.company) {
-        this.$message.warning('请先选择基地分公司')
-        return
-      }
-      if (data.inOrOut === '') {
-        this.$message.warning('请先选择进离港')
-        return
-      }
-      if (data.interval === '') {
-        this.$message.warning('请先选择统计时间维度')
-        return
-      }
-      if (data.dateTime === '') {
-        this.$message.warning('请先选择统计时间范围')
-        return
-      }
-      if (data.range === '基地分公司') {
-        id = DATACONTENT_ID.byAreaId
-        params = [data.interval, data.company, data.inOrOut, data.dateTime[0], data.dateTime[1]]
-      } else if (data.range !== '基地分公司' && data.range !== '') {
-        id = DATACONTENT_ID.byOtherId
-        params = [data.interval, data.range, data.inOrOut, data.dateTime[0], data.dateTime[1]]
-        if (data.airline === '' && data.airport === '' && data.terminal === '') {
-          params.splice(2, 0, '全部')
-        }
-        if (data.airline !== '') {
-          params.splice(2, 0, data.airline)
-        }
-        if (data.airport !== '') {
-          params.splice(2, 0, data.airport)
-        }
-        if (data.terminal !== '') {
-          params.splice(2, 0, data.terminal)
-        }
-      }
-      try {
-        const res = await Query({
-          id: id,
-          dataContent: params
-        })
-        if (res.code === '0') {
-          const dateArr = []
-          const dataArr = []
-          const chainArr = [0]
-          for (let i = 0; i < res.returnData.listValues.length; i++) {
-            dateArr.push(res.returnData.listValues[i].A)
-            dataArr.push(res.returnData.listValues[i]['sum(a9)'])
-            if (i > 0) {
-              if (res.returnData.listValues[i - 1]['sum(a9)'] > 0) {
-                chainArr.push(
-                  (res.returnData.listValues[i]['sum(a9)'] - res.returnData.listValues[i - 1]['sum(a9)']) /
-                    res.returnData.listValues[i - 1]['sum(a9)']
-                )
-              } else {
-                chainArr.push(0)
-              }
-            }
-          }
-          let max = Math.max(...dataArr)
-          max = Math.ceil(max / 10) * 10
-          this.options.yAxis[0].max = max
-          this.options.xAxis.data = dateArr
-          this.options.series[0].data = dataArr
-          this.options.series[2].data = chainArr
-          this.options.yAxis[1].min = (Math.min(...chainArr) - 0.1).toFixed(2)
-          this.options.yAxis[1].max = (Math.max(...chainArr) + 0.1).toFixed(2)
-          this.resizeHandler()
-        } else {
-          this.$message.error(res.message)
-        }
-      } catch (error) {
-        console.log('出错了', error)
-      }
-    },
-    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)`
-    },
-    resizeHandler() {
-      if (this.myChart) {
-        this.myChart.resize()
+      querySettings: {
+        byAreaId: DATACONTENT_ID.byAreaId,
+        byOtherId: DATACONTENT_ID.byOtherId,
+        seriesKey: 'sum(a9)'
       }
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.statstics-wrapper {
-  .flight-statistics-chart {
-    width: 100%;
-  }
-}
-</style>

src/views/statisticsCharts/views/nodeStatisticsCharts.vue

@@ -377,7 +377,7 @@ export default {
           queryId = DATACONTENT_ID.nodeOutId
           break
         default:
-          this.$message.warning('请先选择统计时间范围')
+          this.$message.warning('请先选择进离港')
           return
       }
       if (data.dateTime === '') {

src/views/statisticsCharts/views/passengerStatisticsCharts.vue

@@ -0,0 +1,23 @@
+<template>
+  <CommonStatisticsCharts
+    charts-title="旅客"
+    :query-settings="querySettings"
+  />
+</template>
+
+<script>
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
+export default {
+  name: 'PassengerStatisticsCharts',
+  components: { CommonStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        byAreaId: DATACONTENT_ID.passengerByAreaId,
+        byOtherId: DATACONTENT_ID.passengerByOtherId,
+        seriesKey: 'sum(a9)'
+      }
+    }
+  }
+}
+</script>

src/views/statisticsCharts/views/specialBaggageStatisticsCharts.vue

@@ -0,0 +1,23 @@
+<template>
+  <CommonStatisticsCharts
+    charts-title="特殊行李"
+    :query-settings="querySettings"
+  />
+</template>
+
+<script>
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
+export default {
+  name: 'SpecialBaggageStatisticsCharts',
+  components: { CommonStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        byAreaId: DATACONTENT_ID.specialBaggageByAreaId,
+        byOtherId: DATACONTENT_ID.specialBaggageByOtherId,
+        seriesKey: 'sum(a12)'
+      }
+    }
+  }
+}
+</script>