统计图表-查询条件缓存

src/views/statisticsCharts/components/statisticsHeader.vue

@@ -36,11 +36,6 @@
             :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"
@@ -70,11 +65,6 @@
             :props="item.props"
             :clearable="item.clearable"
             :disabled="item.disabled"
-            @change="
-              value => {
-                item.changeHandler && call(item.changeHandler, value)
-              }
-            "
           />
         </template>
       </el-form-item>
@@ -83,7 +73,8 @@
           type="primary"
           size="small"
           @click="getData"
-        >{{ buttonText }}</el-button>
+          >{{ buttonText }}</el-button
+        >
       </el-form-item>
       <el-form-item v-if="withExport">
         <img
@@ -91,7 +82,7 @@
           title="导出"
           class="btn-icon-only"
           @click="exportClickHandler"
-        >
+        />
       </el-form-item>
       <el-form-item v-if="withSetting">
         <img
@@ -99,7 +90,7 @@
           title="节点设置"
           class="btn-icon-only"
           @click="settingClickHandler"
-        >
+        />
       </el-form-item>
     </el-form>
   </div>
@@ -107,6 +98,7 @@
 
 <script>
 import { Query } from '@/api/dataIntegration'
+import { mapGetters } from 'vuex'
 export default {
   name: 'StatisticsHeader',
   props: {
@@ -183,37 +175,22 @@ export default {
             }
           ],
           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')
-            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 '航线':
-                airlineItem && (airlineItem.disabled = false)
-                break
-              case '基地分公司':
-                areaItem && (areaItem.disabled = false)
-                break
-              case '航站':
-                airportItem && (airportItem.disabled = false)
-                break
-              case '航站楼':
-                terminalItem && (terminalItem.disabled = false)
-                break
-              default:
-                break
+            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)
+              }
+            })
           }
         },
         {
@@ -307,6 +284,12 @@ export default {
       ]
     }
   },
+  computed: {
+    ...mapGetters(['savedFormDataMap']),
+    formDataObj() {
+      return JSON.parse(JSON.stringify(this.formData))
+    }
+  },
   watch: {
     items: {
       handler(val) {
@@ -321,6 +304,16 @@ export default {
       },
       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() {
@@ -335,19 +328,19 @@ export default {
         this.formItems.push(item)
       }
     })
+    const savedFormData = this.savedFormDataMap[this.$route.name]
     this.formItems.forEach(item => {
       if (item.queryId && item.setKey) {
         this.getOptions(item.queryId, item.setKey, item.prop)
       }
-      if (item.defaultOption) {
+      if (savedFormData?.[item.prop]) {
+        this.formData[item.prop] = savedFormData[item.prop]
+      } else if (item.defaultOption) {
         this.formData[item.prop] = item.defaultOption
       }
     })
   },
   methods: {
-    call(func, ...args) {
-      func.call(this, ...args)
-    },
     getData() {
       try {
         this.formItems.forEach(item => {
@@ -370,6 +363,9 @@ export default {
         return
       }
       this.$emit('getFormData', this.formData)
+      this.$store.dispatch('savedSettings/saveFormData', {
+        formData: this.formData
+      })
     },
     exportClickHandler() {
       this.$emit('export')
@@ -382,37 +378,43 @@ export default {
       switch (range) {
         case '全部':
         case '航线':
-          theInOrOutItem.options = [
-            {
-              label: '全部',
-              value: '全部'
-            }
-          ]
+          if (theInOrOutItem) {
+            theInOrOutItem.options = [
+              {
+                label: '全部',
+                value: '全部'
+              }
+            ]
+            theInOrOutItem.disabled = true
+          }
           this.formData.inOrOut = '全部'
-          this.formItems[1].disabled = true
           break
         case '基地分公司':
         case '航站':
         case '航站楼':
-          theInOrOutItem.options = [
-            {
-              value: '全部',
-              label: '全部'
-            },
-            {
-              value: '进港',
-              label: '进港'
-            },
-            {
-              value: '离港',
-              label: '离港'
-            }
-          ]
-          this.formItems[1].disabled = false
+          if (theInOrOutItem) {
+            theInOrOutItem.options = [
+              {
+                value: '全部',
+                label: '全部'
+              },
+              {
+                value: '进港',
+                label: '进港'
+              },
+              {
+                value: '离港',
+                label: '离港'
+              }
+            ]
+            theInOrOutItem.disabled = false
+          }
           break
         default:
-          theInOrOutItem.options = []
-          this.formItems[1].disabled = false
+          if (theInOrOutItem) {
+            theInOrOutItem.options = []
+            theInOrOutItem.disabled = false
+          }
           break
       }
     },
@@ -440,7 +442,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .flight-statistics-header {
   padding-top: 24px;
   min-height: 80px;

src/views/statisticsCharts/mixins/noTerminal.js

@@ -28,32 +28,21 @@ export default {
             }
           ],
           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
+            const rangeMap = {
+              航线: 'airline',
+              基地分公司: 'area',
+              航站: 'airport'
             }
+            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)
+              }
+            })
           }
         },
         {

src/views/statisticsCharts/mixins/onlyAirline.js

@@ -20,17 +20,19 @@ export default {
             }
           ],
           changeHandler(value) {
-            this.formData.inOrOut = ''
-            this.formData.airline = ''
-            const airlineItem = this.formItems.find(item => item.prop === 'airline')
-            airlineItem && (airlineItem.disabled = true)
-            switch (value) {
-              case '航线':
-                airlineItem && (airlineItem.disabled = false)
-                break
-              default:
-                break
+            this.setInOrOutOptions(value)
+            const rangeMap = {
+              航线: 'airline'
             }
+            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)
+              }
+            })
           }
         },
         {

src/views/statisticsCharts/views/nodeStatisticsCharts.vue

@@ -29,7 +29,9 @@
           v-for="tooltip in checkedTooltips"
           :key="tooltip.label"
           class="node-tooltip-content"
-        ><span>{{ tooltip.label }}：</span><span>{{ tooltip.ratio }}</span></div>
+        >
+          <span>{{ tooltip.label }}：</span><span>{{ tooltip.ratio }}</span>
+        </div>
       </div>
     </div>
     <Dialog
@@ -54,11 +56,13 @@
             class="r24"
             type="primary"
             @click="onCheck"
-          >确定</el-button>
+            >确定</el-button
+          >
           <el-button
             size="medium"
             @click="hide"
-          >取消</el-button>
+            >取消</el-button
+          >
         </div>
       </div>
     </Dialog>
@@ -78,7 +82,6 @@ export default {
   name: 'FlightStatisticsCharts',
   components: { StatisticsHeader, Dialog },
   data() {
-    const that = this
     return {
       formData: {
         range: '',
@@ -96,22 +99,22 @@ export default {
           queryId: DATACONTENT_ID.nodeRange,
           setKey: 'a1',
           changeHandler(value) {
-            this.formData.airline = ''
-            this.formData.airport = ''
-            this.formData.inOrOut = ''
-            that.setInOrOutOptions(value)
-            this.formItems[1].disabled = true
-            this.formItems[2].disabled = true
-            switch (value) {
-              case '航线':
-                this.formItems[1].disabled = false
-                break
-              case '航站':
-                this.formItems[2].disabled = false
-                break
-              default:
-                break
+            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)
+              }
+            })
           }
         },
         {
@@ -705,7 +708,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .statstics-wrapper {
   .statstics-content {
     background-color: #fff;