航司行李相关统计-修改为迭代2

public/config.js

@@ -82,7 +82,7 @@ window.SERVICE_ID = {
   stTerminalId: 18020,
   stBrsId: 1803429,
 
-  // 数据统计
+  /***-----统计图表------***/
   airlineOptions: 1806, // 航线下拉
   twoCharacterOptions: 1803426, // 二字码下拉
   termSeleid: 1156, //航站选择下拉
@@ -139,6 +139,19 @@ window.SERVICE_ID = {
   nodeExportAirport: 1805, // 节点统计导出-航站
   nodeAxisDesc: 90, // 节点统计指示器名称解释
 
+  /***-----统计图表-新版------***/
+  areaOptionsNew: 200305, // 基地分公司下拉
+  terminalOptionsNew: 200306, // 航站楼下拉
+  airlineCompanyOptionsNew: 200307, // 航司下拉
+  airlineOptionsNew: 200308, // 航线下拉
+  airportOptionsNew: 200309, //航站下拉
+
+  airlineCompanyAll: 200301, // 航司行李相关统计-全部
+  airlineCompanyByAirline: 200302, // 航司行李相关统计-航线
+  airlineCompanyByAirport: 200303, // 航司行李相关统计-航站
+  airlineCompanyByTerminal: 200304, // 航司行李相关统计-航站楼
+
+
   /***-----统计表格------***/
   transferBaggageProption: 1848, //中转行李比例明细
   transferBaggageFactor: 1849, // 中转行李因素分析

src/views/statisticsCharts/components/newBarStatisticsCharts.vue

@@ -0,0 +1,646 @@
+<template>
+  <div class="statstics-wrapper">
+    <div
+      ref="headerWrapper"
+      class="statstics-header"
+    >
+      <StatisticsHeader
+        :title="`${chartsTitle}统计`"
+        :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 './newStatisticsHeader.vue'
+import { Query } from '@/api/webApi'
+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: () => [],
+    },
+  },
+  data() {
+    return {
+      myChart: null,
+      debounceTime: 300,
+      chartHeight: '70vh',
+      hasChartData: false,
+      baseKey: 'seriesData',
+      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: [],
+          },
+        ],
+      },
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+    seriesKey() {
+      const filterMap = {
+        全部: '',
+        有行李: '_have_bag',
+        实际托运: '_no_del',
+        进港: '_in',
+        离港: '_out',
+      }
+      return `${this.baseKey}${this.filters
+        .map(filter => filterMap[filter])
+        .join('')}`
+    },
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    options: {
+      handler(obj) {
+        this.myChart.setOption(obj)
+        this.resizeHandler()
+      },
+      deep: true,
+    },
+    'sidebar.expand'() {
+      this.setChartHeight()
+    },
+    querySettings: {
+      handler({ seriesKey }) {
+        if (seriesKey) {
+          this.baseKey = seriesKey
+        }
+      },
+      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 serviceId
+      let dataContentList = []
+      const dataContent = {
+        IATA: 'CA',
+        td: formData.interval,
+        fd1: formData.dateTime[0],
+        fd2: formData.dateTime[1],
+      }
+      switch (formData.range) {
+        case '全部':
+          serviceId = SERVICE_ID.airlineCompanyAll
+          dataContentList = [dataContent]
+          break
+        case '基地分公司':
+          serviceId = SERVICE_ID.airlineCompanyAll
+          dataContentList = [
+            {
+              ...dataContent,
+              IATA: formData.area,
+            },
+          ]
+          break
+        case '航线':
+          serviceId = SERVICE_ID.airlineCompanyByAirline
+          dataContentList =
+            formData.airline instanceof Array
+              ? formData.airline.map(airline => ({
+                  ...dataContent,
+                  air_line: airline,
+                }))
+              : [
+                  {
+                    ...dataContent,
+                    air_line: formData.airline,
+                  },
+                ]
+          break
+        case '航站':
+          serviceId = SERVICE_ID.airlineCompanyByAirport
+          dataContentList =
+            formData.airport instanceof Array
+              ? formData.airport.map(airport => ({
+                  ...dataContent,
+                  airport,
+                }))
+              : [
+                  {
+                    ...dataContent,
+                    airport: formData.airport,
+                  },
+                ]
+          break
+        case '航站楼':
+          serviceId = SERVICE_ID.airlineCompanyByTerminal
+          dataContentList = [
+            {
+              ...dataContent,
+              airport: formData.terminal.split('-')[0],
+              terminal: formData.terminal.split('-')[1],
+            },
+          ]
+          break
+        default:
+          return
+      }
+      this.filters = this.querySettings.filters || []
+      this.filters.push(
+        formData.flightType,
+        formData.baggageType,
+        formData.inOrOut
+      )
+      const rangeMap = {
+        航线: 'airline',
+        基地分公司: 'area',
+        航站: 'airport',
+        航站楼: 'terminal',
+      }
+      this.params = [
+        formData.interval,
+        formData.range,
+        formData[rangeMap[formData.range]],
+        formData.inOrOut,
+        formData.dateTime[0],
+        formData.dateTime[1],
+        ...this.filters,
+      ]
+      this.getMultipleChartsData(serviceId, dataContentList)
+    },
+    async getMultipleChartsData(serviceId, dataContentList) {
+      try {
+        const listValuesArray = await Promise.all(
+          dataContentList.map(dataContent =>
+            this.getChartsData(serviceId, dataContent)
+          )
+        )
+        console.log(this.seriesKey)
+        const listValues = listValuesArray.reduce(
+          (preValues, currentValues) => {
+            currentValues.forEach(value => {
+              const preValue = preValues.find(
+                preValue => preValue.fd === value.fd
+              )
+              if (preValue) {
+                preValue[this.seriesKey] += value[this.seriesKey]
+              } else {
+                preValues.push({
+                  fd: value.fd,
+                  [this.seriesKey]: value[this.seriesKey],
+                })
+              }
+            })
+            return preValues
+          },
+          []
+        )
+        this.setChartsData(this._.sortBy(listValues, 'fd'))
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    },
+    async getChartsData(serviceId, dataContent) {
+      try {
+        const { code, returnData, message } = await Query({
+          serviceId,
+          dataContent,
+          event: '0',
+        })
+        if (String(code) === '0') {
+          return returnData
+        } else {
+          return Promise.reject(message || '失败')
+        }
+      } catch (error) {
+        return Promise.reject(error.message || '失败')
+      }
+    },
+    setChartsData(listValues) {
+      const xAxisData = []
+      const yAxisData = [0]
+      const seriesDatas = []
+
+      if (listValues.length === 0) {
+        this.$message.info('未查询到对应数据')
+        return
+      }
+      for (let i = 0; i < listValues.length; i++) {
+        xAxisData.push(listValues[i].fd)
+        seriesDatas.push(listValues[i][this.seriesKey])
+        if (i > 0) {
+          if (listValues[i - 1][this.seriesKey] > 0) {
+            yAxisData.push(
+              (listValues[i][this.seriesKey] -
+                listValues[i - 1][this.seriesKey]) /
+                listValues[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 = key.match(reg)
+        if (match) {
+          const rowIndex = match[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'
+          }
+          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
+        }
+      }
+      // 表格数据转换
+      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/newStatisticsHeader.vue

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

src/views/statisticsCharts/components/statisticsHeader.vue

@@ -206,7 +206,7 @@ export default {
           inputType: 'select',
           placeholder: '时间维度',
           requiredWarning: '请先选择统计时间维度',
-          clearable: true,
+          // clearable: true,
           options: [
             {
               value: '日',
@@ -229,7 +229,7 @@ export default {
         {
           prop: 'dateTime',
           inputType: 'datePicker',
-          clearable: true,
+          // clearable: true,
           width: '240px',
           requiredWarning: '请先选择统计时间范围'
         },

src/views/statisticsCharts/views/airlineCompany copy/abnormalBaggageStatisticsCharts.vue

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

src/views/statisticsCharts/views/airlineCompany copy/baggageAverageStatisticsCharts.vue

@@ -0,0 +1,22 @@
+<template>
+  <CommonBarStatisticsCharts
+    charts-title="平均行李量"
+    :query-settings="querySettings"
+  />
+</template>
+
+<script>
+import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+export default {
+  name: 'BaggageAverageStatisticsCharts',
+  components: { CommonBarStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        byArea: SERVICE_ID.baggageAverageByArea,
+        byOther: SERVICE_ID.baggageAverageByOther
+      }
+    }
+  }
+}
+</script>

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

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

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

@@ -0,0 +1,44 @@
+<template>
+  <CommonBarStatisticsCharts
+    charts-title="行李量"
+    :query-settings="querySettings"
+    :custom-form-items="customFormItems"
+  />
+</template>
+
+<script>
+import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+export default {
+  name: 'BaggageStatisticsCharts',
+  components: { CommonBarStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        byArea: SERVICE_ID.baggageByArea,
+        byOther: SERVICE_ID.baggageByOther,
+        notDelByArea: SERVICE_ID.notDelByArea,
+        notDelByOther: SERVICE_ID.notDelByOther
+      },
+      customFormItems: [
+        {
+          prop: 'baggageType',
+          inputType: 'select',
+          placeholder: '行李类型',
+          requiredWarning: '请先选择行李类型',
+          clearable: true,
+          options: [
+            {
+              value: '全部',
+              label: '全部'
+            },
+            {
+              value: '不包含DEL',
+              label: '实际托运'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/statisticsCharts/views/airlineCompany copy/compensationBaggageStatisticsCharts.vue

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

src/views/statisticsCharts/views/airlineCompany copy/compensationStatisticsCharts.vue

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

src/views/statisticsCharts/views/airlineCompany copy/complaintBaggageStatisticsCharts.vue

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

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

@@ -0,0 +1,44 @@
+<template>
+  <CommonBarStatisticsCharts
+    charts-title="航班量"
+    :query-settings="querySettings"
+    :custom-form-items="customFormItems"
+  />
+</template>
+
+<script>
+import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+export default {
+  name: 'FlightStatisticsCharts',
+  components: { CommonBarStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        byArea: SERVICE_ID.byArea,
+        byOther: SERVICE_ID.byOther,
+        withBaggageByArea: SERVICE_ID.withBaggageByArea,
+        withBaggageByOther: SERVICE_ID.withBaggageByOther
+      },
+      customFormItems: [
+        {
+          prop: 'flightType',
+          inputType: 'select',
+          placeholder: '航班属性',
+          requiredWarning: '请先选择航班属性',
+          clearable: true,
+          options: [
+            {
+              value: '全部',
+              label: '全部'
+            },
+            {
+              value: '有行李',
+              label: '有行李'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <CommonBarStatisticsCharts
+    charts-title="特殊行李量"
+    :query-settings="querySettings"
+  />
+</template>
+
+<script>
+import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+export default {
+  name: 'SpecialBaggageStatisticsCharts',
+  components: { CommonBarStatisticsCharts },
+  data() {
+    return {
+      querySettings: {
+        byArea: SERVICE_ID.specialBaggageByArea,
+        byOther: SERVICE_ID.specialBaggageByOther
+      }
+    }
+  }
+}
+</script>

src/views/statisticsCharts/views/airlineCompany/abnormalBaggageStatisticsCharts.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 import noTerminal from '../../mixins/noTerminal'
 
 export default {
@@ -17,10 +17,9 @@ export default {
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.abnormalBaggageByArea,
-        byOther: SERVICE_ID.abnormalBaggageByOther
-      }
+        seriesKey: 'exception_num',
+      },
     }
-  }
+  },
 }
 </script>

src/views/statisticsCharts/views/airlineCompany/baggageAverageStatisticsCharts.vue

@@ -6,17 +6,16 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 export default {
   name: 'BaggageAverageStatisticsCharts',
   components: { CommonBarStatisticsCharts },
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.baggageAverageByArea,
-        byOther: SERVICE_ID.baggageAverageByOther
-      }
+        seriesKey: 'avg_bag_num',
+      },
     }
-  }
+  },
 }
 </script>

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

@@ -6,17 +6,16 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 export default {
   name: 'BaggagePassengerStatisticsCharts',
   components: { CommonBarStatisticsCharts },
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.baggagePassengerByArea,
-        byOther: SERVICE_ID.baggagePassengerByOther
-      }
+        seriesKey: 'passenger_num_have_bag',
+      },
     }
-  }
+  },
 }
 </script>

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

@@ -7,17 +7,14 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 export default {
   name: 'BaggageStatisticsCharts',
   components: { CommonBarStatisticsCharts },
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.baggageByArea,
-        byOther: SERVICE_ID.baggageByOther,
-        notDelByArea: SERVICE_ID.notDelByArea,
-        notDelByOther: SERVICE_ID.notDelByOther
+        seriesKey: 'bag_num',
       },
       customFormItems: [
         {
@@ -25,20 +22,20 @@ export default {
           inputType: 'select',
           placeholder: '行李类型',
           requiredWarning: '请先选择行李类型',
-          clearable: true,
+          // clearable: true,
           options: [
             {
               value: '全部',
-              label: '全部'
+              label: '全部',
             },
             {
               value: '不包含DEL',
-              label: '实际托运'
-            }
-          ]
-        }
-      ]
+              label: '实际托运',
+            },
+          ],
+        },
+      ],
     }
-  }
+  },
 }
 </script>

src/views/statisticsCharts/views/airlineCompany/compensationBaggageStatisticsCharts.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 import noTerminal from '../../mixins/noTerminal'
 
 export default {
@@ -17,10 +17,9 @@ export default {
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.compensationBaggageByArea,
-        byOther: SERVICE_ID.compensationBaggageByOther
-      }
+        seriesKey: 'compensation_bag_num',
+      },
     }
-  }
+  },
 }
 </script>

src/views/statisticsCharts/views/airlineCompany/compensationStatisticsCharts.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 import noTerminal from '../../mixins/noTerminal'
 
 export default {
@@ -17,10 +17,9 @@ export default {
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.compensationByArea,
-        byOther: SERVICE_ID.compensationByOther
-      }
+        seriesKey: 'compensation_money_num',
+      },
     }
-  }
+  },
 }
 </script>

src/views/statisticsCharts/views/airlineCompany/complaintBaggageStatisticsCharts.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 import noTerminal from '../../mixins/noTerminal'
 
 export default {
@@ -17,10 +17,9 @@ export default {
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.complaintBaggageByArea,
-        byOther: SERVICE_ID.complaintBaggageByOther
-      }
+        seriesKey: 'complaint_bag_num',
+      },
     }
-  }
+  },
 }
 </script>

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

@@ -7,17 +7,15 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
+
 export default {
   name: 'FlightStatisticsCharts',
   components: { CommonBarStatisticsCharts },
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.byArea,
-        byOther: SERVICE_ID.byOther,
-        withBaggageByArea: SERVICE_ID.withBaggageByArea,
-        withBaggageByOther: SERVICE_ID.withBaggageByOther
+        seriesKey: 'flight_num',
       },
       customFormItems: [
         {
@@ -25,20 +23,20 @@ export default {
           inputType: 'select',
           placeholder: '航班属性',
           requiredWarning: '请先选择航班属性',
-          clearable: true,
+          // clearable: true,
           options: [
             {
               value: '全部',
-              label: '全部'
+              label: '全部',
             },
             {
               value: '有行李',
-              label: '有行李'
-            }
-          ]
-        }
-      ]
+              label: '有行李',
+            },
+          ],
+        },
+      ],
     }
-  }
+  },
 }
 </script>

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

@@ -6,17 +6,16 @@
 </template>
 
 <script>
-import CommonBarStatisticsCharts from '../../components/commonBarStatisticsCharts.vue'
+import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
 export default {
   name: 'SpecialBaggageStatisticsCharts',
   components: { CommonBarStatisticsCharts },
   data() {
     return {
       querySettings: {
-        byArea: SERVICE_ID.specialBaggageByArea,
-        byOther: SERVICE_ID.specialBaggageByOther
-      }
+        seriesKey: 'spe_num',
+      },
     }
-  }
+  },
 }
 </script>