修改扫描节点与位置分析下载

src/views/statisticsCharts/views/nodeStatisticsCharts.vue

@@ -1,74 +1,28 @@
 <template>
-  <div
-    v-loading="loading"
-    element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    class="statstics-wrapper"
-  >
-    <div
-      ref="headerWrapper"
-      class="statstics-header"
-    >
-      <StatisticsHeader
-        title="扫描节点与位置分析"
-        :items="formItems"
-        :data="formData"
-        with-setting
-        @getFormData="getFormData"
-        @export="exportHandler"
-        @setting="settingHandler"
-      />
+  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="statstics-wrapper">
+    <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"
-        >
+        <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>
@@ -87,7 +41,7 @@ import FileSaver from 'file-saver'
 export default {
   name: 'FlightStatisticsCharts',
   components: { StatisticsHeader, Dialog },
-  data() {
+  data () {
     return {
       formData: {
         range: '',
@@ -112,7 +66,7 @@ export default {
             },
           ],
           setKey: 'a1',
-          changeHandler(value) {
+          changeHandler (value) {
             switch (value) {
               case 'airline':
                 this.formData.airport = null
@@ -284,16 +238,18 @@ export default {
       tooltips: [],
       descriptions: {},
       loading: false,
+      msgDatas: [],
+      msgObj: {}
     }
   },
   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]
@@ -302,19 +258,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],
@@ -326,17 +282,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) => {
@@ -374,7 +330,7 @@ export default {
       }
     }, [])
   },
-  mounted() {
+  mounted () {
     const that = this
 
     this.setChartHeight()
@@ -396,7 +352,7 @@ export default {
       setTimeout(that.changeTips.bind(that, params), 0)
     })
   },
-  beforeDestroy() {
+  beforeDestroy () {
     // 销毁实例和移除监听
     window.removeEventListener('resize', this.debouncedChartHeightSetter)
     if (this.myChart) {
@@ -405,21 +361,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'
       )
@@ -437,7 +393,7 @@ export default {
           break
       }
     },
-    async getTips() {
+    async getTips () {
       try {
         const { code, returnData, message } = await TempQuery({
           serviceId: SERVICE_ID.nodeAxisDesc,
@@ -452,7 +408,7 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryChartsData(data) {
+    async queryChartsData (data) {
       this.loading = true
       const params = []
       let queryId
@@ -506,7 +462,7 @@ export default {
       // }
       // console.log(params)
       this.queryData = params
-
+      this.msgObj = { ...dataObj }
       try {
         this.echartsOptions.series[0].data = []
         this.tooltips.forEach(tooltip => (tooltip.ratio = '0%'))
@@ -542,6 +498,7 @@ export default {
               }
               return result
             })
+            this.msgDatas = _.cloneDeep(this.seriesData)
             this.hasChartData = true
           }
         } else {
@@ -553,29 +510,28 @@ export default {
         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 +
+      this.chartHeight = `calc(100vh - ${topBarHeight +
         headerBlankHeight +
         tabsWrapperHeight +
         headerHeight +
         footerBlankHeight
-      }px)`
+        }px)`
       this.$nextTick(() => {
         this.resizeHandler()
       })
     },
-    resizeHandler() {
+    resizeHandler () {
       if (this.myChart) {
         this.myChart.resize()
       }
     },
-    exportHandler() {
+    exportHandler () {
       if (!this.hasChartData) {
         this.$message.warning('请查询后再进行导出')
         return
@@ -588,13 +544,14 @@ export default {
       // $a.setAttribute('download', '扫描节点与位置分析统计.png')
       // $a.click()
     },
-    async queryExportData(queryData) {
+    async queryExportData (queryData) {
+      const { range } = this.formData
       let queryId
-      switch (queryData[0]) {
-        case '航站':
+      switch (range) {
+        case 'airport':
           queryId = SERVICE_ID.nodeExportAirport
           break
-        case '航线':
+        case 'airline':
           queryId = SERVICE_ID.nodeExportAirline
           break
         default:
@@ -602,160 +559,158 @@ export default {
           return
       }
       try {
-        const res = await TempQuery({
-          id: queryId,
-          dataContent: queryData,
-        })
-        if (Number(res.code) === 0) {
-          const { listValues } = res.returnData
-          if (listValues.length) {
-            // 生成表格数据
-            const xlsxDatas = [[]]
-            const listArray = listValues.map(record =>
-              Object.entries(record).filter(
-                ([key, value]) => key === 'a4' || this.checkList.includes(key)
-              )
+        const listValues = this.msgDatas
+        if (listValues.length) {
+          // 生成表格数据
+          const xlsxDatas = [[]]
+          const listArray = [[]]
+          listValues.map(item => {
+            if (item.key) {
+              delete item.key
+            }
+            listArray[0].push(Object.values(item))
+          })
+          listArray[0].unshift(['a4', this.msgObj.fd1])
+          xlsxDatas[0].push(...listArray[0].map(([key, value]) => key))
+          xlsxDatas.push(
+            ...listArray.map(record =>
+              record.map(([key, value]) => value || 0)
             )
-            xlsxDatas[0].push(...listArray[0].map(([key, value]) => key))
-            xlsxDatas.push(
-              ...listArray.map(record =>
-                record.map(([key, value]) => value || 0)
+          )
+          xlsxDatas[0][0] = '日期'
+          // 添加合计行
+          if (xlsxDatas.length > 2) {
+            const summaryRow = ['合计']
+            const colNum = xlsxDatas[0].length
+            for (let columnIndex = 1; columnIndex < colNum; columnIndex++) {
+              summaryRow[columnIndex] = xlsxDatas.reduce(
+                (pre, currentRow, currentRowIndex) => {
+                  if (currentRowIndex === 0) {
+                    return pre
+                  } else {
+                    return pre + currentRow[columnIndex]
+                  }
+                },
+                0
               )
-            )
-            xlsxDatas[0][0] = '日期'
-            // 添加合计行
-            if (xlsxDatas.length > 2) {
-              const summaryRow = ['合计']
-              const colNum = xlsxDatas[0].length
-              for (let columnIndex = 1; columnIndex < colNum; columnIndex++) {
-                summaryRow[columnIndex] = xlsxDatas.reduce(
-                  (pre, currentRow, currentRowIndex) => {
-                    if (currentRowIndex === 0) {
-                      return pre
-                    } else {
-                      return pre + currentRow[columnIndex]
-                    }
-                  },
-                  0
-                )
-              }
-              xlsxDatas.push(summaryRow)
             }
-            // 添加节点扫描率列，计算列宽
-            const columnWidths = []
-            xlsxDatas.forEach((row, rowIndex) => {
-              // 从行李总件数后一列开始遍历，添加节点扫描率数据
-              for (
-                let columnIndex = 2;
-                columnIndex < row.length;
-                columnIndex += 2
+            xlsxDatas.push(summaryRow)
+          }
+          // 添加节点扫描率列，计算列宽
+          const columnWidths = []
+          xlsxDatas.forEach((row, rowIndex) => {
+            // 从行李总件数后一列开始遍历，添加节点扫描率数据
+            for (
+              let columnIndex = 2;
+              columnIndex < row.length;
+              columnIndex += 2
+            ) {
+              const totalcell = row[1]
+              const cell = row[columnIndex]
+              const newCell =
+                rowIndex === 0
+                  ? `${cell.slice(0, 2)}扫描率`
+                  : `${cell ? ((cell / totalcell) * 100).toFixed(2) : 0}%`
+              row.splice(columnIndex + 1, 0, newCell)
+            }
+            // 计算每一列宽度，考虑换行
+            row.forEach((cell, columnIndex) => {
+              const cellWidth = Math.max(
+                ...String(cell)
+                  .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]
               ) {
-                const totalcell = row[1]
-                const cell = row[columnIndex]
-                const newCell =
-                  rowIndex === 0
-                    ? `${cell.slice(0, 2)}扫描率`
-                    : `${cell ? ((cell / totalcell) * 100).toFixed(2) : 0}%`
-                row.splice(columnIndex + 1, 0, newCell)
+                columnWidths[columnIndex] = cellWidth
               }
-              // 计算每一列宽度，考虑换行
-              row.forEach((cell, columnIndex) => {
-                const cellWidth = Math.max(
-                  ...String(cell)
-                    .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 = reg.test(key)
-              if (match) {
-                const rowIndex = reg.exec(key)[1]
-                let cellStyle = {
-                  alignment: {
-                    horizontal: 'center',
-                    vertical: 'center',
-                    wrapText: true,
+          })
+          // 生成表格
+          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 = reg.test(key)
+            if (match) {
+              const rowIndex = reg.exec(key)[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,
                   },
-                }
-                if (Number(rowIndex) === 1) {
-                  cellStyle = {
-                    ...cellStyle,
-                    border: {
-                      top: borderStyle,
-                      right: borderStyle,
-                      bottom: borderStyle,
-                      left: borderStyle,
-                    },
-                    font: {
-                      color: {
-                        rgb: 'FFFFFF',
-                      },
+                  font: {
+                    color: {
+                      rgb: 'FFFFFF',
                     },
-                    fill: {
-                      fgColor: {
-                        rgb: '3366FF',
-                      },
+                  },
+                  fill: {
+                    fgColor: {
+                      rgb: '3366FF',
                     },
-                  }
-                } else {
-                  cellStyle.alignment.horizontal = 'left'
+                  },
                 }
-                sheet[key].s = cellStyle
+              } else {
+                cellStyle.alignment.horizontal = 'left'
               }
+              sheet[key].s = cellStyle
             }
-            // 表格数据转换
-            const workBook = XLSX.utils.book_new()
-            XLSX.utils.book_append_sheet(workBook, sheet, '扫描节点与位置分析')
-            const tableWrite = XLSX_STYLE.write(workBook, {
-              bookType: 'xlsx',
-              bookSST: true,
-              type: 'buffer',
-              cellStyles: true,
-            })
-            // 下载表格
-            const fileName = `扫描节点与位置分析-${queryData.join('-')}.xlsx`
-            FileSaver.saveAs(
-              new Blob([tableWrite], { type: 'application/octet-stream' }),
-              fileName
-            )
           }
-        } else {
-          this.$message.error(res.message || '失败')
+          // 表格数据转换
+          const workBook = XLSX.utils.book_new()
+          XLSX.utils.book_append_sheet(workBook, sheet, '扫描节点与位置分析')
+          const tableWrite = XLSX_STYLE.write(workBook, {
+            bookType: 'xlsx',
+            bookSST: true,
+            type: 'buffer',
+            cellStyles: true,
+          })
+          // 下载表格
+          const nData = { ...queryData[0] }
+          const nDownList = Object.values(nData)
+          const fileName = `扫描节点与位置分析-${nDownList.join('-')}.xlsx`
+          FileSaver.saveAs(
+            new Blob([tableWrite], { type: 'application/octet-stream' }),
+            fileName
+          )
         }
       } catch (error) {
+        console.log(error)
         this.$message.error('失败')
       }
     },
-    settingHandler() {
+    settingHandler () {
       this.dialogFlag = true
       this.checkListTemp = [...this.checkList]
     },
-    onCheck() {
+    onCheck () {
       if (this.dialogFlag === false) {
         return
       }
@@ -766,7 +721,7 @@ export default {
       this.checkList = [...this.checkListTemp]
       this.dialogFlag = false
     },
-    hide() {
+    hide () {
       this.dialogFlag = false
     },
   },
@@ -785,7 +740,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;