节点统计分析修改

src/views/statisticsCharts/views/nodeStatisticsCharts.vue

@@ -1,26 +1,64 @@
 <template>
   <div class="statstics-wrapper">
-    <div ref="headerWrapper" class="statstics-header">
-      <StatisticsHeader title="扫描节点与位置分析" :items="formItems" :data="formData" with-setting @getFormData="getFormData" @export="exportHandler" @setting="settingHandler" />
+    <div
+      ref="headerWrapper"
+      class="statstics-header"
+    >
+      <StatisticsHeader
+        title="扫描节点与位置分析"
+        :items="formItems"
+        :data="formData"
+        with-setting
+        @getFormData="getFormData"
+        @export="exportHandler"
+        @setting="settingHandler"
+      />
     </div>
     <div class="statstics-content">
-      <div ref="myChart" class="node-statistics-chart" :style="{ height: chartHeight }" />
-      <div v-if="checkedTooltips.length" class="node-tooltip">
+      <div
+        ref="myChart"
+        class="node-statistics-chart"
+        :style="{ height: chartHeight }"
+      />
+      <div
+        v-if="checkedTooltips.length"
+        class="node-tooltip"
+      >
         <div class="node-tooltip-title">节点扫描率</div>
-        <div v-for="tooltip in checkedTooltips" :key="tooltip.label" class="node-tooltip-content"><span>{{ tooltip.label }}：</span><span>{{ tooltip.ratio }}</span></div>
+        <div
+          v-for="tooltip in checkedTooltips"
+          :key="tooltip.label"
+          class="node-tooltip-content"
+        ><span>{{ tooltip.label }}：</span><span>{{ tooltip.ratio }}</span></div>
       </div>
     </div>
-    <Dialog :flag="dialogFlag" class="dialog-check-group">
+    <Dialog
+      :flag="dialogFlag"
+      class="dialog-check-group"
+    >
       <div class="dialog-wrapper">
         <div class="title">列设置</div>
         <div class="content">
           <el-checkbox-group v-model="checkListTemp">
-            <el-checkbox v-for="node in nodeList" :key="node.name" :label="node.name" :disabled="node.disabled" />
+            <el-checkbox
+              v-for="node in nodeList"
+              :key="node.name"
+              :label="node.name"
+              :disabled="node.disabled"
+            />
           </el-checkbox-group>
         </div>
         <div class="foot right t30">
-          <el-button size="medium" class="r24" type="primary" @click="onCheck">确定</el-button>
-          <el-button size="medium" @click="hide">取消</el-button>
+          <el-button
+            size="medium"
+            class="r24"
+            type="primary"
+            @click="onCheck"
+          >确定</el-button>
+          <el-button
+            size="medium"
+            @click="hide"
+          >取消</el-button>
         </div>
       </div>
     </Dialog>
@@ -39,7 +77,7 @@ import FileSaver from 'file-saver'
 export default {
   name: 'FlightStatisticsCharts',
   components: { StatisticsHeader, Dialog },
-  data () {
+  data() {
     const that = this
     return {
       formData: {
@@ -57,7 +95,7 @@ export default {
           options: [],
           queryId: DATACONTENT_ID.nodeRange,
           setKey: 'a1',
-          changeHandler (value) {
+          changeHandler(value) {
             this.formData.airline = ''
             this.formData.airport = ''
             this.formData.inOrOut = ''
@@ -139,8 +177,8 @@ export default {
         },
         {
           name: '装机件数',
-          label: '装机',
-          disabled: true
+          label: '装机'
+          // disabled: true
         },
         {
           name: '卸机件数',
@@ -210,10 +248,10 @@ export default {
   },
   computed: {
     ...mapGetters(['sidebar']),
-    checkedTooltips () {
+    checkedTooltips() {
       return this.tooltips.filter(tooltip => this.checkList.includes(tooltip.name))
     },
-    checkedSeriesData () {
+    checkedSeriesData() {
       return this.seriesData.reduce((pre, curr) => {
         if (this.checkList.includes(curr.name)) {
           return [...pre, curr.value]
@@ -222,19 +260,19 @@ export default {
         }
       }, [])
     },
-    checkedIndicator () {
+    checkedIndicator() {
       return this.indicator.filter(node => this.checkList.includes(node.name))
     }
   },
   watch: {
     checkedIndicator: {
-      handler (arr) {
+      handler(arr) {
         this.echartsOptions.radar.indicator = arr
       },
       deep: true
     },
     checkedSeriesData: {
-      handler (arr) {
+      handler(arr) {
         this.echartsOptions.series[0].data = [
           {
             name: this.queryData[2],
@@ -246,17 +284,17 @@ export default {
     },
     // 监听数据变化 重绘图形
     echartsOptions: {
-      handler (obj) {
+      handler(obj) {
         this.myChart && this.myChart.setOption(obj)
         this.resizeHandler()
       },
       deep: true
     },
-    'sidebar.expand' () {
+    'sidebar.expand'() {
       this.setChartHeight()
     }
   },
-  created () {
+  created() {
     this.getTips()
 
     this.tooltips = this.nodeList.reduce((pre, curr) => {
@@ -280,14 +318,19 @@ export default {
     }))
 
     this.checkList = this.nodeList.reduce((pre, curr) => {
-      if (['装机件数', '卸机件数'].includes(curr.name)) {
+      if (
+        [
+          // '装机件数',
+          '卸机件数'
+        ].includes(curr.name)
+      ) {
         return pre
       } else {
         return [...pre, curr.name]
       }
     }, [])
   },
-  mounted () {
+  mounted() {
     const that = this
 
     this.setChartHeight()
@@ -306,7 +349,7 @@ export default {
       setTimeout(that.changeTips.bind(that, params), 0)
     })
   },
-  beforeDestroy () {
+  beforeDestroy() {
     // 销毁实例和移除监听
     window.removeEventListener('resize', this.debouncedChartHeightSetter)
     if (this.myChart) {
@@ -315,21 +358,21 @@ export default {
     }
   },
   methods: {
-    hideTips (params) {
+    hideTips(params) {
       if (params.componentType === 'radar') {
         this.myChart._dom.children[1].style.opacity = 0
       }
     },
-    changeTips (params) {
+    changeTips(params) {
       const tip = this.myChart._dom.children[1]
       if (params.componentType === 'radar' && this.descriptions[params.name]) {
         tip.innerHTML = tip.textContent = this.descriptions[params.name]
       }
     },
-    getFormData (data) {
+    getFormData(data) {
       this.queryChartsData(data)
     },
-    setInOrOutOptions (range) {
+    setInOrOutOptions(range) {
       const theInOrOutItem = this.formItems.find(item => item.prop === 'inOrOut')
       switch (range) {
         case '全部':
@@ -362,7 +405,7 @@ export default {
           break
       }
     },
-    async getTips () {
+    async getTips() {
       try {
         const {
           code,
@@ -378,10 +421,10 @@ export default {
           this.$message.error(message ?? '失败')
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    async queryChartsData (data) {
+    async queryChartsData(data) {
       const params = []
       let queryId
       if (data.range === '') {
@@ -464,27 +507,28 @@ export default {
           this.$message.error(res.message || '失败')
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    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
@@ -497,7 +541,7 @@ export default {
       // $a.setAttribute('download', '扫描节点与位置分析统计.png')
       // $a.click()
     },
-    async queryExportData (queryData) {
+    async queryExportData(queryData) {
       let queryId
       switch (queryData[0]) {
         case '航站':
@@ -637,14 +681,14 @@ export default {
           this.$message.error(res.message || '失败')
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    settingHandler () {
+    settingHandler() {
       this.dialogFlag = true
       this.checkListTemp = [...this.checkList]
     },
-    onCheck () {
+    onCheck() {
       if (this.dialogFlag === false) {
         return
       }
@@ -655,7 +699,7 @@ export default {
       this.checkList = [...this.checkListTemp]
       this.dialogFlag = false
     },
-    hide () {
+    hide() {
       this.dialogFlag = false
     }
   }
@@ -674,7 +718,7 @@ export default {
       left: 64px;
       z-index: 100;
       font-size: 14px;
-      font-family: Helvetica, "Microsoft YaHei";
+      font-family: Helvetica, 'Microsoft YaHei';
       color: #303133;
       .node-tooltip-title {
         line-height: 14px;