统计图表修改

public/config.js

@@ -90,28 +90,38 @@ const DATACONTENT_ID = {
   bagTableId: 55, //基础数据-特殊行李维护-表格-id
 
   // 数据统计
-  airlineOptions: 1806, // 获取航线下拉
-  areaOptions: 1807, // 获取大区/基地分公司下拉
-  AirportId: 1808, // 获取航站下拉
-  TerminalId: 1809, // 获取航站楼下拉
-  byOther: 1810, // 获取大区/分公司以外航班统计（全部）
+  airlineOptions: 1806, // 航线下拉
+  areaOptions: 1807, // 大区/基地分公司下拉
+  AirportId: 1808, // 航站下拉
+  TerminalId: 1809, // 航站楼下拉
+  byOther: 1810, // 大区/分公司以外航班统计（全部）
   byArea: 1811, // 根据大区/分公司航班统计（全部）
-  withBaggageByOther: 1812, // 获取大区/分公司以外航班统计（有行李）
+  withBaggageByOther: 1812, // 大区/分公司以外航班统计（有行李）
   withBaggageByArea: 1814, // 根据大区/分公司航班统计（有行李）
-  baggageByOther: 1815, // 获取行李统计（全部）
-  baggageByArea: 1816, // 获取行李统计-分公司（全部）
-  notDelByOther: 1817, // 获取行李统计（不包含DEL）
-  notDelByArea: 1818, // 获取行李统计-分公司（不包含DEL）
-  passengerByOther: 1819, // 获取旅客统计
-  passengerByArea: 1820, // 获取旅客统计-分公司
-  specialBaggageByOther: 1821, // 获取特殊行李统计
-  specialBaggageByArea: 1822, // 获取特殊行李统计-分公司
-  nodeRange: 1801, // 节点获取查询范围
-  nodeAirline: 1802, // 节点获取航线下拉
-  nodeAirport: 1803, // 节点获取航站下拉
-  nodeAll: 1804, // 获取节点统计雷达图-全部
-  nodeIn: 1804, // 获取节点统计雷达图-进港
-  nodeOut: 1804, // 获取节点统计雷达图-离港
+  baggageByOther: 1815, // 行李统计（全部）
+  baggageByArea: 1816, // 行李统计-分公司（全部）
+  notDelByOther: 1817, // 行李统计（不包含DEL）
+  notDelByArea: 1818, // 行李统计-分公司（不包含DEL）
+  baggagePassengerByOther: 1819, // 行李旅客统计
+  baggagePassengerByArea: 1820, // 行李旅客统计-分公司
+  specialBaggageByOther: 1821, // 特殊行李统计
+  specialBaggageByArea: 1822, // 特殊行李统计-分公司
+  abnormalBaggageByOther: 1823, // 异常行李统计
+  abnormalBaggageByArea: 1824, // 异常行李统计-分公司
+  complaintBaggageByOther: 1825, // 投诉行李统计
+  complaintBaggageByArea: 1826, // 投诉行李统计-分公司
+  compensationBaggageByOther: 1827, // 赔偿行李统计
+  compensationBaggageByArea: 1828, // 赔偿行李统计-分公司
+  compensationByOther: 1829, // 赔偿金额统计
+  compensationByArea: 1830, // 赔偿金额统计-分公司
+  baggageAverageByOther: 1831, // 平均行李统计
+  baggageAverageByArea: 1832, // 平均行李统计-分公司
+  nodeRange: 1801, // 节点查询范围
+  nodeAirline: 1802, // 节点航线下拉
+  nodeAirport: 1803, // 节点航站下拉
+  nodeAll: 1804, // 节点统计雷达图-全部
+  nodeIn: 1804, // 节点统计雷达图-进港
+  nodeOut: 1804, // 节点统计雷达图-离港
   nodeExportAirline: 1805, // 节点统计导出-航线
   nodeExportAirport: 1805, // 节点统计导出-航站
   nodeAxisDesc: 90 // 节点统计指示器名称解释

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

@@ -29,32 +29,67 @@ const statisticsChartsRoutes = {
           meta: { title: '航班量统计', keepAlive: false, roles: ['flight_volume_statistics'] }
         },
         {
-          path: '/statisticsCharts/node',
+          path: 'node',
           name: 'NodeStatisticsCharts',
           hidden: true,
           component: () => import('@/views/statisticsCharts/views/nodeStatisticsCharts'),
           meta: { title: '扫描节点与位置分析', keepAlive: false, roles: ['scanning_node_and_location_analysis'] }
         },
         {
-          path: '/statisticsCharts/baggage',
+          path: 'baggage',
           name: 'BaggageStatisticsCharts',
           hidden: true,
           component: () => import('@/views/statisticsCharts/views/baggageStatisticsCharts'),
           meta: { title: '行李量统计', keepAlive: false, roles: ['baggage_statistics'] }
         },
         {
-          path: '/statisticsCharts/specialBaggage',
+          path: 'specialBaggage',
           name: 'SpecialBaggageStatisticsCharts',
           hidden: true,
           component: () => import('@/views/statisticsCharts/views/specialBaggageStatisticsCharts'),
           meta: { title: '特殊行李量统计', keepAlive: false }
         },
         {
-          path: '/statisticsCharts/passenger',
-          name: 'PassengerStatisticsCharts',
+          path: 'baggagePassenger',
+          name: 'BaggagePassengerStatisticsCharts',
           hidden: true,
-          component: () => import('@/views/statisticsCharts/views/passengerStatisticsCharts'),
-          meta: { title: '旅客量统计', keepAlive: false }
+          component: () => import('@/views/statisticsCharts/views/baggagePassengerStatisticsCharts'),
+          meta: { title: '行李旅客量统计', keepAlive: false }
+        },
+        {
+          path: 'baggageAverage',
+          name: 'BaggageAverageStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/baggageAverageStatisticsCharts'),
+          meta: { title: '平均行李量统计', keepAlive: false }
+        },
+        {
+          path: 'abnormalBaggage',
+          name: 'AbnormalBaggageStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/abnormalBaggageStatisticsCharts'),
+          meta: { title: '异常行李量统计', keepAlive: false }
+        },
+        {
+          path: 'complaintBaggage',
+          name: 'ComplaintBaggageStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/complaintBaggageStatisticsCharts'),
+          meta: { title: '投诉行李量统计', keepAlive: false }
+        },
+        {
+          path: 'compensationBaggage',
+          name: 'CompensationBaggageStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/compensationBaggageStatisticsCharts'),
+          meta: { title: '赔偿行李量统计', keepAlive: false }
+        },
+        {
+          path: 'compensation',
+          name: 'CompensationStatisticsCharts',
+          hidden: true,
+          component: () => import('@/views/statisticsCharts/views/compensationStatisticsCharts'),
+          meta: { title: '赔偿金额统计', keepAlive: false }
         }
       ]
     }

src/views/statisticsCharts/components/commonStatisticsCharts.vue

@@ -5,8 +5,8 @@
       class="statstics-header"
     >
       <StatisticsHeader
-        :title="`${chartsTitle}量统计`"
-        :extra-items="extraItems"
+        :title="`${chartsTitle}统计`"
+        :custom-items="customFormItems"
         @getFormData="getFormData"
         @export="exportHandler"
       />
@@ -38,7 +38,7 @@ export default {
       type: Object,
       required: true
     },
-    extraItems: {
+    customFormItems: {
       type: Array,
       default: () => []
     }
@@ -69,9 +69,9 @@ export default {
           itemHeight: 14,
           itemGap: 30,
           data: [
-            `${this.chartsTitle}数量`,
+            this.chartsTitle.replace('量', '数量'),
             // `${this.chartsTitle}量同比`,
-            `${this.chartsTitle}量环比`
+            `${this.chartsTitle}环比`
           ],
           textStyle: {
             fontFamily: 'Helvetica, "Microsoft YaHei"',
@@ -144,7 +144,7 @@ export default {
         ],
         series: [
           {
-            name: `${this.chartsTitle}数量`,
+            name: this.chartsTitle.replace('量', '数量'),
             type: 'bar',
             z: 2,
             itemStyle: {
@@ -158,7 +158,7 @@ export default {
             data: []
           },
           {
-            name: `${this.chartsTitle}量同比`,
+            name: `${this.chartsTitle}同比`,
             type: 'line',
             z: 4,
             yAxisIndex: 1,
@@ -179,7 +179,7 @@ export default {
             data: []
           },
           {
-            name: `${this.chartsTitle}量环比`,
+            name: `${this.chartsTitle}环比`,
             type: 'line',
             z: 3,
             yAxisIndex: 1,
@@ -248,7 +248,7 @@ export default {
       } else if (formData.range === '航站' && !formData.airport) {
         this.$message.warning('请先选择航站')
         return
-      } else if (formData.range === '基地分公司' && !formData.company) {
+      } else if (formData.range === '基地分公司' && !formData.area) {
         this.$message.warning('请先选择基地分公司')
         return
       }
@@ -264,7 +264,7 @@ export default {
         this.$message.warning('请先选择统计时间范围')
         return
       }
-      const requiredMissing = this.extraItems.some(item => {
+      const requiredMissing = this.customFormItems.some(item => {
         if (item.requiredWarning && !formData[item.prop]) {
           this.$message.warning(item.requiredWarning)
           return true
@@ -283,7 +283,7 @@ export default {
         } else {
           id = this.querySettings.byArea
         }
-        params = [formData.interval, formData.company, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
+        params = [formData.interval, formData.area, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
       } else if (formData.range !== '基地分公司' && formData.range !== '') {
         if (formData.flightType === 'withBaggage') {
           id = this.querySettings.withBaggageByOther

src/views/statisticsCharts/components/statisticsHeader.vue

@@ -110,7 +110,7 @@ export default {
       type: Array,
       default: undefined
     },
-    extraItems: {
+    customItems: {
       type: Array,
       default: () => []
     },
@@ -138,7 +138,7 @@ export default {
         inOrOut: '',
         interval: '',
         airline: '',
-        company: '',
+        area: '',
         airport: '',
         terminal: '',
         dateTime: '',
@@ -175,27 +175,31 @@ export default {
           changeHandler(value) {
             this.formData.inOrOut = ''
             // this.formData.interval = ''
-            this.formData.company = ''
+            this.formData.area = ''
             this.formData.airline = ''
             this.formData.airport = ''
             this.formData.terminal = ''
             this.setInOrOutOptions(value)
-            this.formItems[4].disabled = true
-            this.formItems[5].disabled = true
-            this.formItems[6].disabled = true
-            this.formItems[7].disabled = true
+            const airlineItem = this.formItems.find(item => item.prop === 'airline')
+            const areaItem = this.formItems.find(item => item.prop === 'area')
+            const airportItem = this.formItems.find(item => item.prop === 'airport')
+            const terminalItem = this.formItems.find(item => item.prop === 'terminal')
+            airlineItem && (airlineItem.disabled = true)
+            areaItem && (areaItem.disabled = true)
+            airportItem && (airportItem.disabled = true)
+            terminalItem && (terminalItem.disabled = true)
             switch (value) {
               case '航线':
-                this.formItems[4].disabled = false
+                airlineItem && (airlineItem.disabled = false)
                 break
               case '基地分公司':
-                this.formItems[5].disabled = false
+                areaItem && (areaItem.disabled = false)
                 break
               case '航站':
-                this.formItems[6].disabled = false
+                airportItem && (airportItem.disabled = false)
                 break
               case '航站楼':
-                this.formItems[7].disabled = false
+                terminalItem && (terminalItem.disabled = false)
                 break
               default:
                 break
@@ -252,7 +256,7 @@ export default {
           options: []
         },
         {
-          prop: 'company',
+          prop: 'area',
           inputType: 'select',
           placeholder: '基地分公司选择',
           filterable: true,
@@ -308,9 +312,13 @@ export default {
     }
   },
   created() {
-    this.extraItems.forEach(item => {
-      if (item.itemIndex) {
-        this.formItems.splice(item.itemIndex, 0, item)
+    this.customItems.forEach(item => {
+      if (typeof item.itemIndex === 'number') {
+        if (item.prop) {
+          this.formItems.splice(item.itemIndex, item.replaceNum, item)
+        } else {
+          this.formItems.splice(item.itemIndex, item.replaceNum)
+        }
       } else {
         this.formItems.push(item)
       }
@@ -409,7 +417,7 @@ export default {
   .title {
     // margin-right: 24px;
     padding-left: 16px;
-    min-width: 176px;
+    min-width: 190px;
     height: 32px;
     line-height: 32px;
     font-size: 18px;

src/views/statisticsCharts/components/statisticsTabs.vue

@@ -1,59 +1,127 @@
 <template>
   <div class="statistics-tabs">
-    <div
-      v-for="(tab, index) in tabList"
-      :key="tab.path"
-      :class="['tab-bar', { 'tab-active': activeIndex === index }]"
-      @click="clickHandler(index)"
+    <el-row
+      :gutter="16"
+      type="flex"
     >
-      <img
-        class="tab-icon"
-        :src="activeIndex === index ? tab.activeIcon : tab.defaultIcon"
-        :alt="tab.title"
+      <el-col
+        v-for="(tab, index) in tabList"
+        :key="index"
+        :span="4"
       >
-      <span class="tab-title">{{ tab.title }}</span>
-    </div>
+        <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"
+            >
+              <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="{ path: childTab.path, parentIndex: index }"
+            >{{ childTab.title }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <div
+          v-else
+          :class="['tab-bar tab-bar-single', { 'tab-active': activeIndex === index }]"
+          @click="clickHandler(index)"
+        >
+          <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>
+      </el-col>
+    </el-row>
   </div>
 </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() {
     return {
+      defaultIcon: require('@/assets/nav/ic_statistical_top_default.png'),
+      activeIcon: require('@/assets/nav/ic_statistical_top_check.png'),
       tabList: [
         {
-          path: '/statisticsCharts/flight',
-          title: '航班量统计',
-          defaultIcon,
-          activeIcon
+          title: '公司行李相关总统计',
+          children: [
+            {
+              path: '/statisticsCharts/flight',
+              title: '航班量统计'
+            },
+            {
+              path: '/statisticsCharts/baggage',
+              title: '行李量统计'
+            },
+            {
+              path: '/statisticsCharts/baggagePassenger',
+              title: '行李旅客量统计'
+            },
+            {
+              path: '/statisticsCharts/specialBaggage',
+              title: '特殊行李量统计'
+            },
+            {
+              path: '/statisticsCharts/baggageAverage',
+              title: '平均行李量统计'
+            },
+            {
+              path: '/statisticsCharts/abnormalBaggage',
+              title: '异常行李量统计'
+            },
+            {
+              path: '/statisticsCharts/complaintBaggage',
+              title: '投诉行李量统计'
+            },
+            {
+              path: '/statisticsCharts/compensationBaggage',
+              title: '赔偿行李量统计'
+            },
+            {
+              path: '/statisticsCharts/compensation',
+              title: '赔偿金额统计'
+            }
+          ]
         },
         {
-          path: '/statisticsCharts/node',
-          title: '扫描节点与位置分析',
-          defaultIcon,
-          activeIcon
+          title: '旅客分类统计'
+        },
+        {
+          title: '航班分类相关统计'
         },
         {
-          path: '/statisticsCharts/baggage',
-          title: '行李量统计',
-          defaultIcon,
-          activeIcon
+          path: '/statisticsCharts/node',
+          title: '扫描节点与位置分析'
         },
         {
-          path: '/statisticsCharts/specialBaggage',
-          title: '特殊行李量统计',
-          defaultIcon,
-          activeIcon
+          title: '报表统计'
         },
         {
-          path: '/statisticsCharts/passenger',
-          title: '行李旅客量统计',
-          defaultIcon,
-          activeIcon
+          title: '特殊赔偿异常分类统计'
         }
       ],
       activeIndex: null
@@ -61,20 +129,46 @@ export default {
   },
   watch: {
     '$route.path': {
-      handler(val) {
-        this.activeIndex = this.tabList.findIndex(tab => tab.path === val)
+      handler(path) {
+        let activeIndex = null
+        this.tabList.some((tab, index) => {
+          if (tab.path === path) {
+            activeIndex = index
+            return true
+          } else if (tab.children?.length) {
+            const matchedChildTab = tab.children.find(childTab => childTab.path === path)
+            if (matchedChildTab) {
+              activeIndex = index
+              return true
+            }
+          }
+        })
+        this.activeIndex = activeIndex
       },
       immediate: true
     },
-    activeIndex(val) {
-      this.$router.push({
-        path: this.tabList[val].path
-      })
+    activeIndex(index) {
+      const path = this.tabList[index].path
+      if (path) {
+        this.$router.push({
+          path
+        })
+      }
     }
   },
   methods: {
+    commandHandler({ path, parentIndex }) {
+      this.activeIndex = parentIndex
+      this.$router.push({
+        path
+      })
+    },
     clickHandler(index) {
-      this.activeIndex = index
+      if (this.tabList[index].path) {
+        this.activeIndex = index
+      } else {
+        this.$message.info('开发中')
+      }
     }
   }
 }
@@ -82,36 +176,63 @@ export default {
 
 <style lang="scss" scoped>
 .statistics-tabs {
-  display: flex;
-  .tab-bar {
-    min-width: 216px;
-    height: 56px;
-    background-color: #ffffff;
-    padding-left: 24px;
-    display: flex;
-    align-items: center;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-    border-radius: 4px;
-    cursor: pointer;
-    &:not(:last-child) {
-      margin-right: 16px;
-    }
-    .tab-icon {
-      width: 16px;
-      height: 16px;
-      margin-right: 15px;
-    }
-    .tab-title {
-      font-size: 16px;
-      font-family: Helvetica 'Microsoft YaHei';
-      font-weight: bold;
-      color: #101116;
+  > .el-row > .el-col {
+    max-width: 232px;
+    min-width: 186px;
+    .el-dropdown {
+      width: 100%;
     }
-    &.tab-active {
-      background-color: #2d67e3;
+    .tab-bar {
+      width: 100%;
+      height: 56px;
+      background-color: #ffffff;
+      padding-left: 16px;
+      padding-right: 16px;
+      display: flex;
+      align-items: center;
+      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
+      &-single {
+        cursor: pointer;
+      }
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      .tab-icon {
+        width: 14px;
+        height: 14px;
+      }
       .tab-title {
+        padding-left: 12px;
+        padding-right: 8px;
+        font-size: 14px;
+        font-family: Helvetica, 'Microsoft YaHei';
+        font-weight: bold;
+        color: #101116;
+        letter-spacing: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      &.tab-active {
+        background-color: #2d67e3;
+        .tab-title {
+          color: #ffffff;
+        }
+      }
+      .icon-arrow {
+        position: absolute;
+        right: 16px;
+        color: #101116;
+        font-size: 14px;
+        transition: transform 0.3s;
+      }
+      &.tab-active .icon-arrow {
         color: #ffffff;
       }
+      &:hover .icon-arrow {
+        transform: rotate(180deg);
+      }
     }
   }
 }

src/views/statisticsCharts/index.vue

@@ -17,6 +17,6 @@ export default {
 
 <style lang="scss" scoped>
 .statistics-charts-wrapper {
-  padding: 24px 36px 0 24px;
+  padding: 24px 24px 0;
 }
 </style>

src/views/statisticsCharts/mixins/noTerminal.js

@@ -0,0 +1,65 @@
+export default {
+  data() {
+    return {
+      customFormItems: [
+        {
+          itemIndex: 0,
+          replaceNum: 1,
+          prop: 'range',
+          inputType: 'select',
+          placeholder: '请选择统计范围',
+          options: [
+            {
+              value: '全部',
+              label: '全部'
+            },
+            {
+              value: '航线',
+              label: '航线'
+            },
+            {
+              value: '基地分公司',
+              label: '基地分公司'
+            },
+            {
+              value: '航站',
+              label: '航站'
+            }
+          ],
+          changeHandler(value) {
+            this.formData.inOrOut = ''
+            // this.formData.interval = ''
+            this.formData.area = ''
+            this.formData.airline = ''
+            this.formData.airport = ''
+            this.formData.terminal = ''
+            this.setInOrOutOptions(value)
+            const airlineItem = this.formItems.find(item => item.prop === 'airline')
+            const areaItem = this.formItems.find(item => item.prop === 'area')
+            const airportItem = this.formItems.find(item => item.prop === 'airport')
+            airlineItem && (airlineItem.disabled = true)
+            areaItem && (areaItem.disabled = true)
+            airportItem && (airportItem.disabled = true)
+            switch (value) {
+              case '航线':
+                airlineItem && (airlineItem.disabled = false)
+                break
+              case '基地分公司':
+                areaItem && (areaItem.disabled = false)
+                break
+              case '航站':
+                airportItem && (airportItem.disabled = false)
+                break
+              default:
+                break
+            }
+          }
+        },
+        {
+          itemIndex: 7,
+          replaceNum: 1
+        }
+      ]
+    }
+  }
+}

src/views/statisticsCharts/views/abnormalBaggageStatisticsCharts.vue

@@ -0,0 +1,26 @@
+<template>
+  <CommonStatisticsCharts
+    charts-title="异常行李量"
+    :query-settings="querySettings"
+    :custom-form-items="customFormItems"
+  />
+</template>
+
+<script>
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
+import noTerminal from '../mixins/noTerminal'
+
+export default {
+  name: 'AbnormalBaggageStatisticsCharts',
+  components: { CommonStatisticsCharts },
+  mixins: [noTerminal],
+  data() {
+    return {
+      querySettings: {
+        byArea: DATACONTENT_ID.abnormalBaggageByArea,
+        byOther: DATACONTENT_ID.abnormalBaggageByOther
+      }
+    }
+  }
+}
+</script>

src/views/statisticsCharts/views/passengerStatisticsCharts.vue → src/views/statisticsCharts/views/baggageAverageStatisticsCharts.vue

@@ -1,6 +1,6 @@
 <template>
   <CommonStatisticsCharts
-    charts-title="行李旅客"
+    charts-title="平均行李量"
     :query-settings="querySettings"
   />
 </template>
@@ -8,13 +8,13 @@
 <script>
 import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
 export default {
-  name: 'PassengerStatisticsCharts',
+  name: 'BaggageAverageStatisticsCharts',
   components: { CommonStatisticsCharts },
   data() {
     return {
       querySettings: {
-        byArea: DATACONTENT_ID.passengerByArea,
-        byOther: DATACONTENT_ID.passengerByOther
+        byArea: DATACONTENT_ID.baggageAverageByArea,
+        byOther: DATACONTENT_ID.baggageAverageByOther
       }
     }
   }

src/views/statisticsCharts/views/baggagePassengerStatisticsCharts.vue

@@ -0,0 +1,22 @@
+<template>
+  <CommonStatisticsCharts
+    charts-title="行李旅客量"
+    :query-settings="querySettings"
+  />
+</template>
+
+<script>
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
+export default {
+  name: 'BaggagePassengerStatisticsCharts',
+  components: { CommonStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        byArea: DATACONTENT_ID.baggagePassengerByArea,
+        byOther: DATACONTENT_ID.baggagePassengerByOther
+      }
+    }
+  }
+}
+</script>

src/views/statisticsCharts/views/baggageStatisticsCharts.vue

@@ -1,8 +1,8 @@
 <template>
   <CommonStatisticsCharts
-    charts-title="行李"
+    charts-title="行李量"
     :query-settings="querySettings"
-    :extra-items="extraItems"
+    :custom-form-items="customItems"
   />
 </template>
 
@@ -19,7 +19,7 @@ export default {
         notDelByArea: DATACONTENT_ID.notDelByArea,
         notDelByOther: DATACONTENT_ID.notDelByOther
       },
-      extraItems: [
+      customItems: [
         {
           prop: 'baggageType',
           inputType: 'select',

src/views/statisticsCharts/views/compensationBaggageStatisticsCharts.vue

@@ -0,0 +1,26 @@
+<template>
+  <CommonStatisticsCharts
+    charts-title="赔偿行李量"
+    :query-settings="querySettings"
+    :custom-form-items="customFormItems"
+  />
+</template>
+
+<script>
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
+import noTerminal from '../mixins/noTerminal'
+
+export default {
+  name: 'CompensationBaggageStatisticsCharts',
+  components: { CommonStatisticsCharts },
+  mixins: [noTerminal],
+  data() {
+    return {
+      querySettings: {
+        byArea: DATACONTENT_ID.compensationBaggageByArea,
+        byOther: DATACONTENT_ID.compensationBaggageByOther
+      }
+    }
+  }
+}
+</script>

src/views/statisticsCharts/views/compensationStatisticsCharts.vue

@@ -0,0 +1,26 @@
+<template>
+  <CommonStatisticsCharts
+    charts-title="赔偿金额"
+    :query-settings="querySettings"
+    :custom-form-items="customFormItems"
+  />
+</template>
+
+<script>
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
+import noTerminal from '../mixins/noTerminal'
+
+export default {
+  name: 'CompensationStatisticsCharts',
+  components: { CommonStatisticsCharts },
+  mixins: [noTerminal],
+  data() {
+    return {
+      querySettings: {
+        byArea: DATACONTENT_ID.compensationByArea,
+        byOther: DATACONTENT_ID.compensationByOther
+      }
+    }
+  }
+}
+</script>

src/views/statisticsCharts/views/complaintBaggageStatisticsCharts.vue

@@ -0,0 +1,26 @@
+<template>
+  <CommonStatisticsCharts
+    charts-title="投诉行李量"
+    :query-settings="querySettings"
+    :custom-form-items="customFormItems"
+  />
+</template>
+
+<script>
+import CommonStatisticsCharts from '../components/commonStatisticsCharts.vue'
+import noTerminal from '../mixins/noTerminal'
+
+export default {
+  name: 'ComplaintBaggageStatisticsCharts',
+  components: { CommonStatisticsCharts },
+  mixins: [noTerminal],
+  data() {
+    return {
+      querySettings: {
+        byArea: DATACONTENT_ID.complaintBaggageByArea,
+        byOther: DATACONTENT_ID.complaintBaggageByOther
+      }
+    }
+  }
+}
+</script>

src/views/statisticsCharts/views/flightStatisticsCharts.vue

@@ -1,8 +1,8 @@
 <template>
   <CommonStatisticsCharts
-    charts-title="航班"
+    charts-title="航班量"
     :query-settings="querySettings"
-    :extra-items="extraItems"
+    :custom-form-items="customItems"
   />
 </template>
 
@@ -19,7 +19,7 @@ export default {
         withBaggageByArea: DATACONTENT_ID.withBaggageByArea,
         withBaggageByOther: DATACONTENT_ID.withBaggageByOther
       },
-      extraItems: [
+      customItems: [
         {
           prop: 'flightType',
           inputType: 'select',

src/views/statisticsCharts/views/specialBaggageStatisticsCharts.vue

@@ -1,6 +1,6 @@
 <template>
   <CommonStatisticsCharts
-    charts-title="特殊行李"
+    charts-title="特殊行李量"
     :query-settings="querySettings"
   />
 </template>