|
|
@@ -8,8 +8,10 @@
|
|
|
title="扫描节点与位置分析"
|
|
|
:items="formItems"
|
|
|
:data="formData"
|
|
|
+ with-setting
|
|
|
@getFormData="getFormData"
|
|
|
@export="exportHandler"
|
|
|
+ @setting="settingHandler"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="statstics-content">
|
|
|
@@ -19,27 +21,62 @@
|
|
|
:style="{ height: chartHeight }"
|
|
|
/>
|
|
|
<div
|
|
|
- v-if="tooltips.length"
|
|
|
+ v-if="checkedTooltips.length"
|
|
|
class="node-tooltip"
|
|
|
>
|
|
|
<div class="node-tooltip-title">节点扫描率</div>
|
|
|
<div
|
|
|
- v-for="tooltip in tooltips"
|
|
|
+ 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"
|
|
|
+ >
|
|
|
+ <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-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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import StatisticsHeader from '../components/statisticsHeader.vue'
|
|
|
+import Dialog from '@/layout/components/Dialog'
|
|
|
import { Query } from '@/api/dataIntegration'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
+import * as XLSX from 'xlsx'
|
|
|
+import XLSX_STYLE from 'xlsx-style'
|
|
|
+import FileSaver from 'file-saver'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'FlightStatisticsCharts',
|
|
|
- components: { StatisticsHeader },
|
|
|
+ components: { StatisticsHeader, Dialog },
|
|
|
data() {
|
|
|
const that = this
|
|
|
return {
|
|
|
@@ -115,23 +152,56 @@ export default {
|
|
|
options: []
|
|
|
}
|
|
|
],
|
|
|
+ queryData: null,
|
|
|
+ nodeList: [
|
|
|
+ {
|
|
|
+ name: '行李总件数',
|
|
|
+ label: '',
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '值机件数',
|
|
|
+ label: '值机'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '安检件数',
|
|
|
+ label: '安检'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '分拣件数',
|
|
|
+ label: '分拣'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '装车件数',
|
|
|
+ label: '装车'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '装机件数',
|
|
|
+ label: '装机',
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '卸机件数',
|
|
|
+ label: '卸机',
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '中转件数',
|
|
|
+ label: '中转'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '到达件数',
|
|
|
+ label: '到达'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ checkList: [],
|
|
|
+ checkListTemp: [],
|
|
|
+ dialogFlag: false,
|
|
|
myChart: null,
|
|
|
debounceTime: 300,
|
|
|
chartHeight: '70vh',
|
|
|
hasChartData: false,
|
|
|
- options: {
|
|
|
- // legend: {
|
|
|
- // top: 32,
|
|
|
- // right: 32,
|
|
|
- // height: 14,
|
|
|
- // itemWidth: 14,
|
|
|
- // itemHeight: 14,
|
|
|
- // icon: 'rect',
|
|
|
- // textStyle: {
|
|
|
- // fontSize: 14
|
|
|
- // },
|
|
|
- // data: ['离港', '进港']
|
|
|
- // },
|
|
|
+ echartsOptions: {
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
@@ -142,44 +212,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
radar: {
|
|
|
- indicator: [
|
|
|
- {
|
|
|
- name: '行李总件数',
|
|
|
- max: 10000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '值机件数',
|
|
|
- max: 10000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '安检件数',
|
|
|
- max: 10000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '分拣件数',
|
|
|
- max: 10000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '装车件数',
|
|
|
- max: 10000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '装机件数',
|
|
|
- max: 10000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '卸机件数',
|
|
|
- max: 10000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '中转件数',
|
|
|
- max: 10000
|
|
|
- },
|
|
|
- {
|
|
|
- name: '到达件数',
|
|
|
- max: 10000
|
|
|
- }
|
|
|
- ],
|
|
|
+ indicator: [],
|
|
|
axisName: {
|
|
|
padding: 10,
|
|
|
color: '#303133',
|
|
|
@@ -207,51 +240,52 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
- tooltips: [
|
|
|
- {
|
|
|
- label: '值机',
|
|
|
- ratio: '0%'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '安检',
|
|
|
- ratio: '0%'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '分拣',
|
|
|
- ratio: '0%'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '装车',
|
|
|
- ratio: '0%'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '装机',
|
|
|
- ratio: '0%'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '卸机',
|
|
|
- ratio: '0%'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '中转',
|
|
|
- ratio: '0%'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '到达',
|
|
|
- ratio: '0%'
|
|
|
- }
|
|
|
- ],
|
|
|
+ indicator: [],
|
|
|
+ seriesData: [],
|
|
|
+ tooltips: [],
|
|
|
descriptions: {}
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['sidebar'])
|
|
|
+ ...mapGetters(['sidebar']),
|
|
|
+ checkedTooltips() {
|
|
|
+ return this.tooltips.filter(tooltip => this.checkList.includes(tooltip.name))
|
|
|
+ },
|
|
|
+ checkedSeriesData() {
|
|
|
+ return this.seriesData.reduce((pre, curr) => {
|
|
|
+ if (this.checkList.includes(curr.name)) {
|
|
|
+ return [...pre, curr.value]
|
|
|
+ } else {
|
|
|
+ return pre
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
+ },
|
|
|
+ checkedIndicator() {
|
|
|
+ return this.indicator.filter(node => this.checkList.includes(node.name))
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
+ checkedIndicator: {
|
|
|
+ handler(arr) {
|
|
|
+ this.echartsOptions.radar.indicator = arr
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ checkedSeriesData: {
|
|
|
+ handler(arr) {
|
|
|
+ this.echartsOptions.series[0].data = [
|
|
|
+ {
|
|
|
+ name: this.queryData[2],
|
|
|
+ value: arr
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
// 监听数据变化 重绘图形
|
|
|
- options: {
|
|
|
+ echartsOptions: {
|
|
|
handler(obj) {
|
|
|
- this.myChart.setOption(obj)
|
|
|
+ this.myChart && this.myChart.setOption(obj)
|
|
|
this.resizeHandler()
|
|
|
},
|
|
|
deep: true
|
|
|
@@ -262,13 +296,41 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.getTips()
|
|
|
+
|
|
|
+ this.tooltips = this.nodeList.reduce((pre, curr) => {
|
|
|
+ if (curr.label) {
|
|
|
+ return [
|
|
|
+ ...pre,
|
|
|
+ {
|
|
|
+ name: curr.name,
|
|
|
+ label: curr.label,
|
|
|
+ ratio: '0%'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ } else {
|
|
|
+ return pre
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ this.indicator = this.nodeList.map(node => ({
|
|
|
+ name: node.name,
|
|
|
+ max: 10000
|
|
|
+ }))
|
|
|
+
|
|
|
+ this.checkList = this.nodeList.reduce((pre, curr) => {
|
|
|
+ if (['装机件数', '卸机件数'].includes(curr.name)) {
|
|
|
+ return pre
|
|
|
+ } else {
|
|
|
+ return [...pre, curr.name]
|
|
|
+ }
|
|
|
+ }, [])
|
|
|
},
|
|
|
mounted() {
|
|
|
const that = this
|
|
|
|
|
|
this.setChartHeight()
|
|
|
this.myChart = this.$echarts.init(this.$refs['myChart'])
|
|
|
- this.myChart.setOption(this.options)
|
|
|
+ this.myChart.setOption(this.echartsOptions)
|
|
|
|
|
|
// 监听页面缩放
|
|
|
window.addEventListener('resize', this.setChartHeight)
|
|
|
@@ -307,7 +369,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
getFormData(data) {
|
|
|
- this.getData(data)
|
|
|
+ this.queryChartsData(data)
|
|
|
},
|
|
|
setInOrOutOptions(range) {
|
|
|
const theInOrOutItem = this.formItems.find(item => item.prop === 'inOrOut')
|
|
|
@@ -361,7 +423,7 @@ export default {
|
|
|
console.log('出错了', error.message || error)
|
|
|
}
|
|
|
},
|
|
|
- async getData(data) {
|
|
|
+ async queryChartsData(data) {
|
|
|
const params = []
|
|
|
let queryId
|
|
|
if (data.range === '') {
|
|
|
@@ -402,53 +464,46 @@ export default {
|
|
|
} else {
|
|
|
params.splice(1, 0, '全部')
|
|
|
}
|
|
|
+
|
|
|
+ this.queryData = params
|
|
|
+
|
|
|
try {
|
|
|
+ this.echartsOptions.series[0].data = []
|
|
|
+ this.tooltips.forEach(tooltip => (tooltip.ratio = '0%'))
|
|
|
+ this.hasChartData = false
|
|
|
+
|
|
|
const res = await Query({
|
|
|
id: queryId,
|
|
|
dataContent: params
|
|
|
})
|
|
|
if (Number(res.code) === 0) {
|
|
|
- if (!res.returnData.listValues.length) {
|
|
|
- this.options.series[0].data = []
|
|
|
- this.tooltips.forEach(tooltip => (tooltip.ratio = '0%'))
|
|
|
- return
|
|
|
+ if (res.returnData.listValues.length) {
|
|
|
+ const list = Object.entries(res.returnData.listValues[0])
|
|
|
+ const max = Math.max(...list.map(element => element[1]))
|
|
|
+ this.indicator.forEach(node => {
|
|
|
+ node.max = max
|
|
|
+ })
|
|
|
+ list.forEach(([name, value]) => {
|
|
|
+ const tooltip = this.tooltips.find(tooltip => tooltip.name === name)
|
|
|
+ if (tooltip && value) {
|
|
|
+ tooltip.ratio = ((value / max) * 100).toFixed(2) + '%'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.seriesData = this.indicator.map(node => {
|
|
|
+ const result = {
|
|
|
+ name: node.name,
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ const data = list.find(([key, value]) => key === node.name)
|
|
|
+ if (data) {
|
|
|
+ result.value = data[1]
|
|
|
+ }
|
|
|
+ return result
|
|
|
+ })
|
|
|
+ this.hasChartData = true
|
|
|
}
|
|
|
- const labels = Object.keys(res.returnData.listValues[0])
|
|
|
- const datas = Object.values(res.returnData.listValues[0])
|
|
|
- const max = Math.max(...datas)
|
|
|
- this.options.radar.indicator = labels.map(label => {
|
|
|
- return {
|
|
|
- name: label,
|
|
|
- max
|
|
|
- }
|
|
|
- })
|
|
|
- this.options.series[0].data = [
|
|
|
- {
|
|
|
- value: datas,
|
|
|
- name: data.inOrOut
|
|
|
- }
|
|
|
- ]
|
|
|
- this.tooltips = labels.reduce((pre, curr, index) => {
|
|
|
- if (!curr.includes('总')) {
|
|
|
- return [
|
|
|
- ...pre,
|
|
|
- {
|
|
|
- label: curr.slice(0, 2),
|
|
|
- ratio: ((datas[index] / max) * 100).toFixed(2) + '%'
|
|
|
- }
|
|
|
- ]
|
|
|
- } else {
|
|
|
- return pre
|
|
|
- }
|
|
|
- }, [])
|
|
|
- // .map((label, index) => ({
|
|
|
- // label: label.replace('件数', ''),
|
|
|
- // ratio: (datas[index] / max).toFixed(2) * 100 + '%'
|
|
|
- // }))
|
|
|
- // .filter(element => !element.label.includes('总'))
|
|
|
- this.hasChartData = true
|
|
|
} else {
|
|
|
- this.$message.error(res.message)
|
|
|
+ this.$message.error(res.message || '失败')
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log('出错了', error.message || error)
|
|
|
@@ -471,14 +526,103 @@ export default {
|
|
|
},
|
|
|
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', '扫描节点与位置分析统计.png')
|
|
|
- $a.click()
|
|
|
+ this.queryExportData(this.queryData)
|
|
|
+ // 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', '扫描节点与位置分析统计.png')
|
|
|
+ // $a.click()
|
|
|
+ },
|
|
|
+ async queryExportData(queryData) {
|
|
|
+ let queryId
|
|
|
+ switch (queryData[0]) {
|
|
|
+ case '航站':
|
|
|
+ queryId = DATACONTENT_ID.nodeExportAirport
|
|
|
+ break
|
|
|
+ case '航线':
|
|
|
+ queryId = DATACONTENT_ID.nodeExportAirline
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ this.$message.warning('请先选择统计范围')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const res = await Query({
|
|
|
+ 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))
|
|
|
+ )
|
|
|
+ xlsxDatas[0].push(...listArray[0].map(([key, value]) => key))
|
|
|
+ xlsxDatas.push(...listArray.map(record => record.map(([key, value]) => value)))
|
|
|
+ xlsxDatas[0][0] = '日期'
|
|
|
+ const columnWidths = []
|
|
|
+ const rowNum = xlsxDatas.length
|
|
|
+ for (let rowIndex = 0; rowIndex < rowNum; rowIndex++) {
|
|
|
+ const colNum = xlsxDatas[rowIndex].length
|
|
|
+ for (let columnIndex = 0; columnIndex < colNum; columnIndex++) {
|
|
|
+ const cellTextLength = xlsxDatas[rowIndex][columnIndex]
|
|
|
+ .toString()
|
|
|
+ .split('')
|
|
|
+ .reduce((pre, curr) => {
|
|
|
+ const letterSize = curr.charCodeAt(0) > 255 ? 2 : 1
|
|
|
+ return pre + letterSize
|
|
|
+ }, 0)
|
|
|
+ if ((!columnWidths[columnIndex] && cellTextLength > 0) || cellTextLength > columnWidths[columnIndex]) {
|
|
|
+ columnWidths[columnIndex] = cellTextLength
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const sheet = XLSX.utils.aoa_to_sheet(xlsxDatas)
|
|
|
+ sheet['!cols'] = columnWidths.map(width => ({
|
|
|
+ wch: width + 2
|
|
|
+ }))
|
|
|
+ const workBook = XLSX.utils.book_new()
|
|
|
+ XLSX.utils.book_append_sheet(workBook, sheet, '扫描节点与位置分析')
|
|
|
+ // console.log(workBook)
|
|
|
+ // return
|
|
|
+ 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 || '失败')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('出错了', error.message || error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ settingHandler() {
|
|
|
+ this.dialogFlag = true
|
|
|
+ this.checkListTemp = [...this.checkList]
|
|
|
+ },
|
|
|
+ onCheck() {
|
|
|
+ if (this.dialogFlag === false) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.checkListTemp.length < 3) {
|
|
|
+ this.$message.warning('至少需要勾选2项（不包含行李总件数）')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.checkList = [...this.checkListTemp]
|
|
|
+ this.dialogFlag = false
|
|
|
+ },
|
|
|
+ hide() {
|
|
|
+ this.dialogFlag = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -516,5 +660,15 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
+ .dialog-check-group {
|
|
|
+ .el-checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .el-checkbox {
|
|
|
+ margin-right: 0;
|
|
|
+ width: 33.3%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
