|
|
|
<template>
|
|
|
|
<el-container>
|
|
|
|
<el-main>
|
|
|
|
<el-card style="background-color: #F5F7FA">
|
|
|
|
<!-- 搜素区域 -->
|
|
|
|
<div>
|
|
|
|
<el-row :gutter="24">
|
|
|
|
<el-col :span="5">
|
|
|
|
<el-input v-model="queryInfo.flightNo" prefix-icon="el-icon-search"
|
|
|
|
placeholder="请输入航班号" clearable style="width:220px">
|
|
|
|
</el-input>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="5">
|
|
|
|
<el-date-picker v-model="queryInfo.flightDate" type="date" value-format="yyyy-MM-dd"
|
|
|
|
placeholder="请选择航班日期"
|
|
|
|
style="width: 220px">
|
|
|
|
</el-date-picker>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="10">
|
|
|
|
<el-button type="primary" @click="getExitInfoList" style="width: 160px;"
|
|
|
|
icon="el-icon-search">
|
|
|
|
数据统计查询
|
|
|
|
</el-button>
|
|
|
|
<el-button :loading="downloadLoading" type="success" icon="el-icon-s-home"
|
|
|
|
style="width: 160px;"
|
|
|
|
:disabled="socketResponse.socketStatus!=='200'"
|
|
|
|
@click="downLoadExcel">导出 Excel
|
|
|
|
</el-button>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<!-- 显示区域 -->
|
|
|
|
<el-row :gutter="24" style="margin-top: 30px">
|
|
|
|
<el-col :span="11" style="margin-top: 10px">
|
|
|
|
<!-- <el-progress :text-inside="true" :stroke-width="15" :percentage="proportion"-->
|
|
|
|
<!-- :color="customColors"-->
|
|
|
|
<!-- style="width: 455px"></el-progress>-->
|
|
|
|
<el-input v-model="message" type="textarea"
|
|
|
|
:autosize="{ minRows: 6, maxRows: 10}"
|
|
|
|
style="width: 455px;height: 400px"
|
|
|
|
placeholder="获取数据进度" readonly>
|
|
|
|
</el-input>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="4" style="margin-left: 40px;margin-top: 20px">
|
|
|
|
<el-progress type="circle" :percentage="proportion"
|
|
|
|
:stroke-width="12"
|
|
|
|
:color="customColors"
|
|
|
|
:width="proportion>6?200:126">
|
|
|
|
</el-progress>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</el-main>
|
|
|
|
</el-container>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import {getArrivalDataAnalysis, createArrivalExcel, downArrivalExcel} from "../../api/arrival_data_analysis";
|
|
|
|
import ArrivalWebsocket from '@/utils/arrival_web_socket';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "ExitAnalysis",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
/**
|
|
|
|
* 出港业务统计列表
|
|
|
|
*/
|
|
|
|
exitInfoList: [],
|
|
|
|
resultStatus: '0',
|
|
|
|
message: '',
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 返回结果
|
|
|
|
*/
|
|
|
|
socketResponse: {
|
|
|
|
socketMessage: '',
|
|
|
|
socketStatus: '',
|
|
|
|
socketDataList: [],
|
|
|
|
socketCurrentNum: 1,
|
|
|
|
socketTotalNum: 1,
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 查询列表
|
|
|
|
*/
|
|
|
|
queryInfo: {
|
|
|
|
//航班号
|
|
|
|
flightNo: 'CV4481',
|
|
|
|
//航班日期
|
|
|
|
flightDate: '2019-06-11',
|
|
|
|
},
|
|
|
|
|
|
|
|
/* 列表加载 */
|
|
|
|
listLoading: false,
|
|
|
|
downloadLoading: false,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 百分比例
|
|
|
|
*/
|
|
|
|
proportion: 0,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 百分比例，颜色
|
|
|
|
*/
|
|
|
|
customColors: [
|
|
|
|
{color: '#6f7ad3', percentage: 20},
|
|
|
|
{color: '#f56c6c', percentage: 40},
|
|
|
|
{color: '#e6a23c', percentage: 60},
|
|
|
|
{color: '#5cb87a', percentage: 80},
|
|
|
|
{color: '#1989fa', percentage: 100},
|
|
|
|
],
|
|
|
|
/**
|
|
|
|
* 下载路径的参数
|
|
|
|
*/
|
|
|
|
fileName: "test.xls",
|
|
|
|
ipAddress: "",
|
|
|
|
url: "",
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
/**
|
|
|
|
* 获取出港信息列表
|
|
|
|
*/
|
|
|
|
getExitInfoList() {
|
|
|
|
let _this = this;
|
|
|
|
if (_this.queryInfo.flightNo === '') {
|
|
|
|
if (_this.queryInfo.flightDate === '' || _this.queryInfo.flightDate === null) {
|
|
|
|
return _this.$message.warning('航班号与航班日期，不能同时为空');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
_this.$message.success('开始获取统计数据');
|
|
|
|
getArrivalDataAnalysis(_this.queryInfo).catch(error => {
|
|
|
|
// _this.$message.info("即将结束！请您稍候");
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 下载excel
|
|
|
|
*/
|
|
|
|
downLoadExcel() {
|
|
|
|
downArrivalExcel().then((response) => {
|
|
|
|
this.downloadLoading = true;
|
|
|
|
let res = response.data;
|
|
|
|
if (res.code !== '200') {
|
|
|
|
return this.$message.error('下载失败');
|
|
|
|
this.downloadLoading = false;
|
|
|
|
}
|
|
|
|
// console.log(res.msg)
|
|
|
|
//获取地址
|
|
|
|
this.ipAddress = res.msg;
|
|
|
|
this.url = this.ipAddress + this.fileName;
|
|
|
|
console.log(this.url)
|
|
|
|
// console.log(this.ipAddress)
|
|
|
|
this.down();
|
|
|
|
this.downloadLoading = false;
|
|
|
|
}).catch(error => {
|
|
|
|
this.downloadLoading = false;
|
|
|
|
console.log(error.toString())
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
down() {
|
|
|
|
// 创建a标签
|
|
|
|
const link = document.createElement('a');
|
|
|
|
// download属性
|
|
|
|
link.setAttribute('download', 'excel.xls');
|
|
|
|
// href链接
|
|
|
|
link.setAttribute('href', this.url);
|
|
|
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
// 自执行点击事件
|
|
|
|
link.click()
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 生成excel
|
|
|
|
*/
|
|
|
|
generateExcel() {
|
|
|
|
createArrivalExcel(this.socketResponse.socketDataList).then((response) => {
|
|
|
|
let res = response.data;
|
|
|
|
if (res.code !== '200') {
|
|
|
|
return this.$message.error('生成excel失败');
|
|
|
|
}
|
|
|
|
this.fileName = res.msg;
|
|
|
|
console.log(this.fileName)
|
|
|
|
this.$message.success("Excel准备就绪")
|
|
|
|
}).catch(error => {
|
|
|
|
this.$message.error(error.toString());
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
socket_onmessage: function (e) {
|
|
|
|
console.log("从websocket接收到新的消息-->>" + e.data);
|
|
|
|
//this.message = this.message + e.data + "\n";
|
|
|
|
let msgJson = JSON.parse(e.data);
|
|
|
|
this.message = this.message + this.dataFormat(new Date()) + " -> " + msgJson.message + "\n";
|
|
|
|
this.socketResponse = JSON.parse(e.data);
|
|
|
|
this.socketResponse.socketMessage = msgJson.message;
|
|
|
|
this.socketResponse.socketCurrentNum = msgJson.currentNum;
|
|
|
|
this.socketResponse.socketTotalNum = msgJson.totalNum;
|
|
|
|
console.log(this.socketMessage);
|
|
|
|
this.socketResponse.socketStatus = msgJson.status;
|
|
|
|
this.socketResponse.socketDataList = msgJson.data;
|
|
|
|
console.log(msgJson);
|
|
|
|
if (this.socketResponse.socketTotalNum !== null && this.socketResponse.socketTotalNum !== 0) {
|
|
|
|
this.proportion = this.toPercent(this.socketResponse.socketCurrentNum / this.socketResponse.socketTotalNum);
|
|
|
|
}
|
|
|
|
if (this.socketResponse.socketCurrentNum === this.socketResponse.socketTotalNum &&
|
|
|
|
this.socketResponse.socketTotalNum !== 0 && this.socketResponse.socketCurrentNum !== 0) {
|
|
|
|
this.generateExcel();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
socket_onopen: function (e) {
|
|
|
|
console.log("websocket->>链接已链接");
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 重写日期函数格式化日期
|
|
|
|
*/
|
|
|
|
dataFormat(time) {
|
|
|
|
return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()} ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()}:${time.getMinutes() >= 10 ? time.getMinutes() : '0' + time.getMinutes()}:${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 将小数转换成百分比
|
|
|
|
* @param point
|
|
|
|
* @returns {string|number}
|
|
|
|
*/
|
|
|
|
toPercent(point) {
|
|
|
|
if (point == 0) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
let str = Number(point * 100).toFixed();
|
|
|
|
// str+="%";
|
|
|
|
return parseInt(str);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
ArrivalWebsocket.onopen = this.socket_onopen;
|
|
|
|
ArrivalWebsocket.onmessage = this.socket_onmessage;
|
|
|
|
ArrivalWebsocket.init();
|
|
|
|
},
|
|
|
|
destroyed() {
|
|
|
|
},
|
|
|
|
watch: {},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
</style> |
...
|
...
|
|
