Bladeren bron

统计图表-航站或航线多选

zhongxiaoyu 2 jaren geleden
bovenliggende
commit
0011a2267a

+ 117 - 69
src/views/statisticsCharts/components/commonBarStatisticsCharts.vue

@@ -1,10 +1,22 @@
 <template>
   <div class="statstics-wrapper">
-    <div ref="headerWrapper" class="statstics-header">
-      <StatisticsHeader :title="`${chartsTitle}统计`" :custom-items="customFormItems" @getFormData="getFormData" @export="exportHandler" />
+    <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
+        id="chart"
+        class="statistics-chart"
+        :style="{ height: chartHeight }"
+      />
     </div>
   </div>
 </template>
@@ -34,7 +46,7 @@ export default {
       default: () => []
     }
   },
-  data () {
+  data() {
     return {
       myChart: null,
       debounceTime: 300,
@@ -204,17 +216,17 @@ export default {
   watch: {
     // 监听数据变化 重绘图形
     options: {
-      handler (obj) {
+      handler(obj) {
         this.myChart.setOption(obj)
         this.resizeHandler()
       },
       deep: true
     },
-    'sidebar.expand' () {
+    'sidebar.expand'() {
       this.setChartHeight()
     },
     querySettings: {
-      handler ({ seriesKey, filters }) {
+      handler({ seriesKey, filters }) {
         if (seriesKey) {
           this.seriesKey = seriesKey
         }
@@ -226,7 +238,7 @@ export default {
       immediate: true
     }
   },
-  mounted () {
+  mounted() {
     this.setChartHeight()
     this.myChart = this.$echarts.init(document.getElementById('chart'))
     this.myChart.setOption(this.options)
@@ -234,7 +246,7 @@ export default {
     this.debouncedChartHeightSetter = this._.debounce(this.setChartHeight, this.debounceTime)
     window.addEventListener('resize', this.debouncedChartHeightSetter)
   },
-  beforeDestroy () {
+  beforeDestroy() {
     // 销毁实例和移除监听
     window.removeEventListener('resize', this.debouncedChartHeightSetter)
     if (this.myChart) {
@@ -243,7 +255,7 @@ export default {
     }
   },
   methods: {
-    resetDatas () {
+    resetDatas() {
       this.hasChartData = false
       this.options.yAxis[0].max = 60000
       this.options.xAxis.data = []
@@ -252,7 +264,7 @@ export default {
       this.options.yAxis[1].min = -0.3
       this.options.yAxis[1].max = 0.5
     },
-    getFormData (formData) {
+    getFormData(formData) {
       this.resetDatas()
 
       let id
@@ -268,7 +280,7 @@ export default {
           id = this.querySettings.byArea
         }
         params = [formData.interval, formData.area, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
-      } else if (formData.range !== '') {
+      } else {
         if (formData.flightType === '有行李') {
           id = this.querySettings.withBaggageByOther
         } else if (formData.baggageType === '不包含DEL') {
@@ -279,17 +291,14 @@ export default {
           id = this.querySettings.byOther
         }
         params = [formData.interval, formData.range, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
-        if (formData.airline === '' && formData.airport === '' && formData.terminal === '') {
-          params.splice(2, 0, '全部')
-        }
-        if (formData.airline !== '') {
+        if (formData.airline.length) {
           params.splice(2, 0, formData.airline)
-        }
-        if (formData.airport !== '') {
+        } else if (formData.airport.length) {
           params.splice(2, 0, formData.airport)
-        }
-        if (formData.terminal !== '') {
+        } else if (formData.terminal !== '') {
           params.splice(2, 0, formData.terminal)
+        } else {
+          params.splice(2, 0, '全部')
         }
       }
       if (formData.passengerType.length) {
@@ -301,9 +310,44 @@ export default {
         ]
       }
       this.params = [...params, ...this.filters.map(({ value }) => value)]
-      this.getChartsData(id, params)
+      if (params[2] instanceof Array) {
+        const paramsList = params[2].map(param => [...params.slice(0, 2), param, ...params.slice(3)])
+        this.getMultipleChartsData(id, paramsList)
+      } else {
+        this.getSingleChartsData(id, params)
+      }
+    },
+    async getMultipleChartsData(id, paramsList) {
+      try {
+        const listValuesArray = await Promise.all(paramsList.map(params => this.getChartsData(id, params)))
+        const listValues = listValuesArray.reduce((preValues, currentValues) => {
+          currentValues.forEach(value => {
+            const preValue = preValues.find(preValue => preValue.A === value.A)
+            if (preValue) {
+              preValue[this.seriesKey] += value[this.seriesKey]
+            } else {
+              preValues.push({
+                A: value.A,
+                [this.seriesKey]: value[this.seriesKey]
+              })
+            }
+          })
+          return preValues
+        }, [])
+        this.setChartsData(this._.sortBy(listValues, 'A'))
+      } catch (error) {
+        this.$message.error(error.message)
+      }
     },
-    async getChartsData (id, params) {
+    async getSingleChartsData(id, params) {
+      try {
+        const listValues = await this.getChartsData(id, params)
+        this.setChartsData(listValues)
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    },
+    async getChartsData(id, params) {
       try {
         const {
           code,
@@ -314,71 +358,75 @@ export default {
           dataContent: params
         })
         if (Number(code) === 0) {
-          const xAxisData = []
-          const yAxisData = [0]
-          const seriesDatas = []
-          const filteredList = listValues.filter(element =>
-            this.filters.every((key, value) => {
-              if (key && value && element[key] !== value) {
-                return false
-              } else {
-                return true
-              }
-            })
-          )
-          if (filteredList.length === 0) {
-            this.$message.info('未查询到对应数据')
-            return
-          }
-          for (let i = 0; i < filteredList.length; i++) {
-            xAxisData.push(filteredList[i].A)
-            seriesDatas.push(filteredList[i][this.seriesKey])
-            if (i > 0) {
-              if (filteredList[i - 1][this.seriesKey] > 0) {
-                yAxisData.push(
-                  (filteredList[i][this.seriesKey] - filteredList[i - 1][this.seriesKey]) /
-                  filteredList[i - 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
+          return listValues
         } else {
-          this.$message.error(message || '失败')
+          return Promise.reject(message || '失败')
         }
       } catch (error) {
-this.$message.error("失败");
+        return Promise.reject(message || '失败')
+      }
+    },
+    setChartsData(listValues) {
+      const xAxisData = []
+      const yAxisData = [0]
+      const seriesDatas = []
+      const filteredList = listValues.filter(element =>
+        this.filters.every((key, value) => {
+          if (key && value && element[key] !== value) {
+            return false
+          } else {
+            return true
+          }
+        })
+      )
+      if (filteredList.length === 0) {
+        this.$message.info('未查询到对应数据')
+        return
+      }
+      for (let i = 0; i < filteredList.length; i++) {
+        xAxisData.push(filteredList[i].A)
+        seriesDatas.push(filteredList[i][this.seriesKey])
+        if (i > 0) {
+          if (filteredList[i - 1][this.seriesKey] > 0) {
+            yAxisData.push(
+              (filteredList[i][this.seriesKey] - filteredList[i - 1][this.seriesKey]) /
+                filteredList[i - 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 () {
+    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.chartHeight = `calc(100vh - ${
+        topBarHeight + headerBlankHeight + tabsWrapperHeight + headerHeight + footerBlankHeight
+      }px)`
       this.$nextTick(() => {
         this.resizeHandler()
       })
     },
-    resizeHandler () {
+    resizeHandler() {
       if (this.myChart) {
         this.myChart.resize()
       }
     },
-    exportHandler () {
+    exportHandler() {
       if (!this.hasChartData) {
         this.$message.warning('请查询后再进行导出')
         return

+ 103 - 49
src/views/statisticsCharts/components/commonPieStatisticsCharts.vue

@@ -1,10 +1,22 @@
 <template>
   <div class="statstics-wrapper">
-    <div ref="headerWrapper" class="statstics-header">
-      <StatisticsHeader :title="`${chartsTitle}统计`" :custom-items="customFormItems" @getFormData="getFormData" @export="exportHandler" />
+    <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
+        id="chart"
+        class="statistics-chart"
+        :style="{ height: chartHeight }"
+      />
     </div>
   </div>
 </template>
@@ -42,7 +54,7 @@ export default {
       default: '总件数'
     }
   },
-  data () {
+  data() {
     return {
       myChart: null,
       debounceTime: 300,
@@ -205,21 +217,21 @@ export default {
   },
   watch: {
     pieTitle: {
-      handler (val) {
+      handler(val) {
         this.options.title.text = val
       },
       immediate: true
     },
     // 监听数据变化 重绘图形
     options: {
-      handler (obj) {
+      handler(obj) {
         this.myChart.setOption(obj)
         this.resizeHandler()
       },
       deep: true
     },
     categories: {
-      handler (arr) {
+      handler(arr) {
         this.categoryDatas = arr.map(categoryName => ({
           name: categoryName,
           value: 0
@@ -233,7 +245,7 @@ export default {
       immediate: true
     },
     querySettings: {
-      handler ({ categoryKey, seriesKey }) {
+      handler({ categoryKey, seriesKey }) {
         if (seriesKey) {
           this.seriesKey = seriesKey
         }
@@ -244,11 +256,11 @@ export default {
       deep: true,
       immediate: true
     },
-    'sidebar.expand' () {
+    'sidebar.expand'() {
       this.setChartHeight()
     }
   },
-  mounted () {
+  mounted() {
     this.setChartHeight()
     this.myChart = this.$echarts.init(document.getElementById('chart'))
     this.options.series[0].data = this.categoryDatas
@@ -278,7 +290,7 @@ export default {
     this.debouncedChartHeightSetter = this._.debounce(this.setChartHeight, this.debounceTime)
     window.addEventListener('resize', this.debouncedChartHeightSetter)
   },
-  beforeDestroy () {
+  beforeDestroy() {
     // 销毁实例和移除监听
     window.removeEventListener('resize', this.debouncedChartHeightSetter)
     if (this.myChart) {
@@ -287,7 +299,7 @@ export default {
     }
   },
   methods: {
-    legendFormatter (name) {
+    legendFormatter(name) {
       const index = this.categoryDatas.findIndex(category => category.name === name)
       if (index === 0) {
         return `{chartsTitle|${name}}`
@@ -298,7 +310,7 @@ export default {
         return index % 2 ? richString + '{wrap| }' : richString
       }
     },
-    resetDatas () {
+    resetDatas() {
       this.hasChartData = false
       this.categoryDatas.forEach(category => {
         category && (category.value = 0)
@@ -306,7 +318,7 @@ export default {
       this.options.title.subtext = '0'
       this.options.series[1].data[0].value = 0
     },
-    getFormData (formData) {
+    getFormData(formData) {
       this.resetDatas()
 
       let id
@@ -314,26 +326,65 @@ export default {
       if (formData.range === '基地分公司') {
         id = this.querySettings.byArea
         params = [formData.interval, formData.area, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
-      } else if (formData.range !== '基地分公司' && formData.range !== '') {
+      } else {
         id = this.querySettings.byOther
         params = [formData.interval, formData.range, formData.inOrOut, formData.dateTime[0], formData.dateTime[1]]
-        if (formData.airline === '' && formData.airport === '' && formData.terminal === '') {
-          params.splice(2, 0, '全部')
-        }
-        if (formData.airline !== '') {
+        if (formData.airline.length) {
           params.splice(2, 0, formData.airline)
-        }
-        if (formData.airport !== '') {
+        } else if (formData.airport.length) {
           params.splice(2, 0, formData.airport)
-        }
-        if (formData.terminal !== '') {
+        } else if (formData.terminal !== '') {
           params.splice(2, 0, formData.terminal)
+        } else {
+          params.splice(2, 0, '全部')
         }
       }
       this.params = params
-      this.getChartsData(id, params)
+      if (params[2] instanceof Array) {
+        const paramsList = params[2].map(param => [...params.slice(0, 2), param, ...params.slice(3)])
+        this.getMultipleChartsData(id, paramsList)
+      } else {
+        this.getSingleChartsData(id, params)
+      }
     },
-    async getChartsData (id, params) {
+    async getMultipleChartsData(id, paramsList) {
+      try {
+        const listValuesArray = await Promise.all(paramsList.map(params => this.getChartsData(id, params)))
+        this.tableData = listValuesArray.flat()
+        const listValues = listValuesArray.reduce((preValues, currentValues) => {
+          currentValues.forEach(value => {
+            const preValue = preValues.find(
+              preValue => preValue.A === value.A && preValue[this.categoryKey] === value[this.categoryKey]
+            )
+            if (preValue) {
+              preValue[this.seriesKey] += value[this.seriesKey]
+            } else {
+              preValues.push({
+                A: value.A,
+                [this.categoryKey]: value[this.categoryKey],
+                [this.seriesKey]: value[this.seriesKey]
+              })
+            }
+          })
+          return preValues
+        }, [])
+        // console.log(listValues)
+
+        this.setChartsData(this._.sortBy(listValues, 'A'))
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    },
+    async getSingleChartsData(id, params) {
+      try {
+        const listValues = await this.getChartsData(id, params)
+        this.tableData = listValues
+        this.setChartsData(listValues)
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+    },
+    async getChartsData(id, params) {
       try {
         const {
           code,
@@ -344,48 +395,51 @@ export default {
           dataContent: params
         })
         if (Number(code) === 0) {
-          if (listValues.length === 0) {
-            this.$message.info('未查询到对应数据')
-            return
-          }
-          let totalCount = 0
-          listValues.forEach(element => {
-            this.categoryDatas.forEach(category => {
-              if (element[this.categoryKey]?.includes(category.name)) {
-                category.value += element[this.seriesKey]
-                totalCount += element[this.seriesKey]
-              }
-            })
-          })
-          this.options.title.subtext = totalCount.toString()
-          this.totalCount.value = totalCount
-          this.tableData = listValues
-          this.hasChartData = true
+          return listValues
         } else {
-          this.$message.error(message || '失败')
+          return Promise.reject(message || '失败')
         }
       } catch (error) {
-        this.$message.error("失败");
+        return Promise.reject(message || '失败')
+      }
+    },
+    setChartsData(listValues) {
+      if (listValues.length === 0) {
+        this.$message.info('未查询到对应数据')
+        return
       }
+      let totalCount = 0
+      listValues.forEach(element => {
+        this.categoryDatas.forEach(category => {
+          if (element[this.categoryKey]?.includes(category.name)) {
+            category.value += element[this.seriesKey]
+          }
+        })
+        totalCount += element[this.seriesKey]
+      })
+      this.options.title.subtext = totalCount.toString()
+      this.totalCount.value = totalCount
+      this.hasChartData = true
     },
-    setChartHeight () {
+    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.chartHeight = `calc(100vh - ${
+        topBarHeight + headerBlankHeight + tabsWrapperHeight + headerHeight + footerBlankHeight
+      }px)`
       this.$nextTick(() => {
         this.resizeHandler()
       })
     },
-    resizeHandler () {
+    resizeHandler() {
       if (this.myChart) {
         this.myChart.resize()
       }
     },
-    exportHandler () {
+    exportHandler() {
       if (!this.hasChartData) {
         this.$message.warning('请查询后再进行导出')
         return

+ 100 - 38
src/views/statisticsCharts/components/statisticsHeader.vue

@@ -3,41 +3,103 @@
     <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="{
+    <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" />
+          <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 || '请选择'" :clearable="item.clearable" :disabled="item.disabled" @change="
+          <el-select
+            v-model="formData[item.prop]"
+            :filterable="item.filterable"
+            :default-first-option="item.filterable"
+            :size="item.size || 'small'"
+            :placeholder="item.placeholder || '请选择'"
+            :multiple="item.multiple"
+            :collapse-tags="item.multiple"
+            :clearable="item.clearable"
+            :disabled="item.disabled"
+            @change="
               value => {
                 item.changeHandler && call(item.changeHandler, value)
               }
-            ">
-            <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label" />
+            "
+          >
+            <el-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="结束日期" />
+          <el-date-picker
+            v-model="formData[item.prop]"
+            :size="item.size || 'small'"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
         </template>
         <template v-if="item.inputType === 'cascader'">
-          <el-cascader v-model="formData[item.prop]" :size="item.size || 'small'" :placeholder="item.placeholder || '请选择'" :options="item.options" :props="item.props" :clearable="item.clearable" :disabled="item.disabled" @change="
+          <el-cascader
+            v-model="formData[item.prop]"
+            :size="item.size || 'small'"
+            :placeholder="item.placeholder || '请选择'"
+            :options="item.options"
+            :props="item.props"
+            :clearable="item.clearable"
+            :disabled="item.disabled"
+            @change="
               value => {
                 item.changeHandler && call(item.changeHandler, value)
               }
-            " />
+            "
+          />
         </template>
       </el-form-item>
       <el-form-item v-if="formItems.length">
-        <el-button type="primary" size="small" @click="getData">{{ buttonText }}</el-button>
+        <el-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">
+        <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">
+        <img
+          src="../../../assets/nav/ic_setting.png"
+          title="节点设置"
+          class="btn-icon-only"
+          @click="settingClickHandler"
+        >
       </el-form-item>
     </el-form>
   </div>
@@ -77,15 +139,15 @@ export default {
       default: false
     }
   },
-  data () {
+  data() {
     return {
       formData: {
         range: '',
         inOrOut: '',
         interval: '',
-        airline: '',
+        airline: [],
         area: '',
-        airport: '',
+        airport: [],
         terminal: '',
         dateTime: '',
         flightType: '',
@@ -120,7 +182,7 @@ export default {
               label: '航站楼'
             }
           ],
-          changeHandler (value) {
+          changeHandler(value) {
             this.formData.inOrOut = ''
             // this.formData.interval = ''
             this.formData.area = ''
@@ -198,8 +260,10 @@ export default {
           prop: 'airline',
           inputType: 'select',
           placeholder: '航线',
+          width: '180px',
           filterable: true,
           clearable: true,
+          multiple: true,
           disabled: true,
           queryId: DATACONTENT_ID.airlineOptions,
           setKey: 'a2',
@@ -220,9 +284,10 @@ export default {
           prop: 'airport',
           inputType: 'select',
           placeholder: '航站',
+          width: '150px',
           filterable: true,
           clearable: true,
-          // multiple: true,
+          multiple: true,
           disabled: true,
           queryId: DATACONTENT_ID.AirportId,
           setKey: 'a2',
@@ -233,9 +298,6 @@ export default {
           inputType: 'select',
           placeholder: '航站楼',
           filterable: true,
-          props: {
-            multiple: true
-          },
           clearable: true,
           disabled: true,
           queryId: DATACONTENT_ID.TerminalId,
@@ -247,21 +309,21 @@ export default {
   },
   watch: {
     items: {
-      handler (val) {
+      handler(val) {
         val && (this.formItems = val)
       },
       deep: true,
       immediate: true
     },
     data: {
-      handler (val) {
+      handler(val) {
         val && (this.formData = val)
       },
       deep: true,
       immediate: true
     }
   },
-  created () {
+  created() {
     this.customItems.forEach(item => {
       if (typeof item.itemIndex === 'number') {
         if (item.prop) {
@@ -280,10 +342,10 @@ export default {
     })
   },
   methods: {
-    call (func, ...args) {
+    call(func, ...args) {
       func.call(this, ...args)
     },
-    getData () {
+    getData() {
       try {
         this.formItems.forEach(item => {
           if (item.requiredWarning && (!this.formData[item.prop] || this.formData[item.prop].length === 0)) {
@@ -306,13 +368,13 @@ export default {
       }
       this.$emit('getFormData', this.formData)
     },
-    exportClickHandler () {
+    exportClickHandler() {
       this.$emit('export')
     },
-    settingClickHandler () {
+    settingClickHandler() {
       this.$emit('setting')
     },
-    setInOrOutOptions (range) {
+    setInOrOutOptions(range) {
       const theInOrOutItem = this.formItems.find(item => item.prop === 'inOrOut')
       switch (range) {
         case '全部':
@@ -351,7 +413,7 @@ export default {
           break
       }
     },
-    async getOptions (queryId, setKey, prop) {
+    async getOptions(queryId, setKey, prop) {
       try {
         const { code, returnData, message } = await Query({
           id: queryId,
@@ -368,7 +430,7 @@ export default {
           this.$message.error(message)
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     }
   }
@@ -389,12 +451,12 @@ export default {
     height: 32px;
     line-height: 32px;
     font-size: 18px;
-    font-family: Helvetica, "Microsoft YaHei";
+    font-family: Helvetica, 'Microsoft YaHei';
     font-weight: bold;
     white-space: nowrap;
     position: relative;
     &::before {
-      content: "";
+      content: '';
       width: 4px;
       height: 20px;
       background: #2d67e3;
@@ -427,7 +489,7 @@ export default {
           }
           .el-input__inner {
             border-radius: 4px;
-            font-family: Helvetica, "Microsoft YaHei";
+            font-family: Helvetica, 'Microsoft YaHei';
             color: #303133;
             border-color: #ffffff;
             &:hover {
@@ -446,7 +508,7 @@ export default {
           border-radius: 4px;
           border-color: #ffffff;
           color: #303133;
-          font-family: Helvetica, "Microsoft YaHei";
+          font-family: Helvetica, 'Microsoft YaHei';
           &:hover {
             border-color: #c0c4cc;
           }
@@ -464,10 +526,10 @@ export default {
         .el-cascader {
           .el-input {
             .el-icon-arrow-up::before {
-              content: "\e78f";
+              content: '\e78f';
             }
             .el-icon-arrow-down::before {
-              content: "\e790";
+              content: '\e790';
             }
             &:not(.is-disabled) {
               .el-input__icon,
@@ -479,7 +541,7 @@ export default {
         }
         .el-button {
           border-radius: 4px;
-          font-family: Helvetica, "Microsoft YaHei";
+          font-family: Helvetica, 'Microsoft YaHei';
         }
         .btn-icon-only {
           width: 32px;