|
@@ -1,68 +1,28 @@
|
|
|
<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"
|
|
|
- >
|
|
|
+ <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>
|
|
@@ -81,10 +41,9 @@ import FileSaver from 'file-saver'
|
|
|
export default {
|
|
|
name: 'FlightStatisticsCharts',
|
|
|
components: { StatisticsHeader, Dialog },
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
return {
|
|
|
formData: {
|
|
|
- range: '',
|
|
|
airline: '',
|
|
|
airport: '',
|
|
|
inOrOut: '',
|
|
@@ -124,8 +83,8 @@ export default {
|
|
|
// filterable: true,
|
|
|
// clearable: true,
|
|
|
// disabled: true,
|
|
|
- queryId: SERVICE_ID.nodeAirline,
|
|
|
- setKey: 'a2',
|
|
|
+ queryId: SERVICE_ID.AirlineIds,
|
|
|
+ setKey: 'air_line',
|
|
|
options: [],
|
|
|
},
|
|
|
{
|
|
@@ -136,8 +95,8 @@ export default {
|
|
|
// clearable: true,
|
|
|
// multiple: true,
|
|
|
// disabled: true,
|
|
|
- queryId: SERVICE_ID.nodeAirport,
|
|
|
- setKey: 'a2',
|
|
|
+ queryId: SERVICE_ID.AirportIds,
|
|
|
+ setKey: 'code3',
|
|
|
options: [],
|
|
|
},
|
|
|
{
|
|
@@ -146,16 +105,12 @@ export default {
|
|
|
placeholder: '进离港',
|
|
|
clearable: true,
|
|
|
options: [{
|
|
|
- value: '离岗',
|
|
|
- label: '离岗',
|
|
|
+ value: '离港',
|
|
|
+ label: '离港',
|
|
|
},
|
|
|
{
|
|
|
value: '进港',
|
|
|
label: '进港',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '中转',
|
|
|
- label: '中转',
|
|
|
}],
|
|
|
},
|
|
|
{
|
|
@@ -262,12 +217,12 @@ 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]
|
|
@@ -276,19 +231,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],
|
|
@@ -300,17 +255,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) => {
|
|
@@ -346,7 +301,7 @@ export default {
|
|
|
}
|
|
|
}, [])
|
|
|
},
|
|
|
- mounted() {
|
|
|
+ mounted () {
|
|
|
const that = this
|
|
|
|
|
|
this.setChartHeight()
|
|
@@ -368,7 +323,7 @@ export default {
|
|
|
setTimeout(that.changeTips.bind(that, params), 0)
|
|
|
})
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
+ beforeDestroy () {
|
|
|
// 销毁实例和移除监听
|
|
|
window.removeEventListener('resize', this.debouncedChartHeightSetter)
|
|
|
if (this.myChart) {
|
|
@@ -377,21 +332,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'
|
|
|
)
|
|
@@ -426,7 +381,7 @@ export default {
|
|
|
break
|
|
|
}
|
|
|
},
|
|
|
- async getTips() {
|
|
|
+ async getTips () {
|
|
|
try {
|
|
|
const {
|
|
|
code,
|
|
@@ -445,13 +400,9 @@ export default {
|
|
|
this.$message.error('失败')
|
|
|
}
|
|
|
},
|
|
|
- async queryChartsData(data) {
|
|
|
+ async queryChartsData (data) {
|
|
|
const params = []
|
|
|
let queryId
|
|
|
- if (data.range === '') {
|
|
|
- this.$message.warning('请先选择统计范围')
|
|
|
- return
|
|
|
- }
|
|
|
if (data.range === '航线' && data.airline === '') {
|
|
|
this.$message.warning('请先选择航线')
|
|
|
return
|
|
@@ -478,15 +429,22 @@ export default {
|
|
|
this.$message.warning('请先选择统计时间范围')
|
|
|
return
|
|
|
}
|
|
|
- params.push(data.range, data.inOrOut, data.dateTime[0], data.dateTime[1])
|
|
|
- if (data.range === '航线') {
|
|
|
- params.splice(1, 0, data.airline)
|
|
|
- } else if (data.range === '航站') {
|
|
|
- params.splice(1, 0, data.airport)
|
|
|
- } else {
|
|
|
- params.splice(1, 0, '全部')
|
|
|
+ const dataObj = {
|
|
|
+ air_line: data.airline,
|
|
|
+ airport: data.airport,
|
|
|
+ io_type: data.inOrOut,
|
|
|
+ fd1: data.dateTime[0],
|
|
|
+ fd2: data.dateTime[1]
|
|
|
}
|
|
|
-
|
|
|
+ params.push(dataObj)
|
|
|
+ // if (data.range === '航线') {
|
|
|
+ // params.splice(1, 0, data.airline)
|
|
|
+ // } else if (data.range === '航站') {
|
|
|
+ // params.splice(1, 0, data.airport)
|
|
|
+ // } else {
|
|
|
+ // params.splice(1, 0, '全部')
|
|
|
+ // }
|
|
|
+ // console.log(params)
|
|
|
this.queryData = params
|
|
|
|
|
|
try {
|
|
@@ -495,7 +453,7 @@ export default {
|
|
|
this.hasChartData = false
|
|
|
|
|
|
const res = await TempQuery({
|
|
|
- id: queryId,
|
|
|
+ serviceId: SERVICE_ID.LuggageNodeId,
|
|
|
dataContent: params,
|
|
|
})
|
|
|
if (Number(res.code) === 0) {
|
|
@@ -533,29 +491,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
|
|
@@ -568,7 +525,7 @@ export default {
|
|
|
// $a.setAttribute('download', '扫描节点与位置分析统计.png')
|
|
|
// $a.click()
|
|
|
},
|
|
|
- async queryExportData(queryData) {
|
|
|
+ async queryExportData (queryData) {
|
|
|
let queryId
|
|
|
switch (queryData[0]) {
|
|
|
case '航站':
|
|
@@ -731,11 +688,11 @@ export default {
|
|
|
this.$message.error('失败')
|
|
|
}
|
|
|
},
|
|
|
- settingHandler() {
|
|
|
+ settingHandler () {
|
|
|
this.dialogFlag = true
|
|
|
this.checkListTemp = [...this.checkList]
|
|
|
},
|
|
|
- onCheck() {
|
|
|
+ onCheck () {
|
|
|
if (this.dialogFlag === false) {
|
|
|
return
|
|
|
}
|
|
@@ -746,7 +703,7 @@ export default {
|
|
|
this.checkList = [...this.checkListTemp]
|
|
|
this.dialogFlag = false
|
|
|
},
|
|
|
- hide() {
|
|
|
+ hide () {
|
|
|
this.dialogFlag = false
|
|
|
},
|
|
|
},
|
|
@@ -765,7 +722,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;
|