朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 0ab338150111191ed71fbd6bf76c1186942e3b97 1 个父辈 7d3f8e31 analysis

进港业务统计分析

内嵌 并排对比
正在显示 6 个修改的文件 包含 322 行增加 和 3 行删除
  1 +import http from './http.js'
  2 +import axios from "axios";
  3 +
  4 +let baseUrl = 'cgonms-arrival'
  5 +//进港业务数据统计分析
  6 +
  7 +export const getArrivalDataAnalysis = params =>{return http.get(`${baseUrl}/cgoNms/getInfo`, params);};
  8 +
  9 +export const createArrivalExcel = params => { return http.post(`${baseUrl}/arrival/excel`, params)};
  10 +
  11 +export const downArrivalExcel = params => { return axios.get(`${baseUrl}/arrival/downExcel`, params ) };
@@ -2,8 +2,7 @@ import http from './http.js' @@ -2,8 +2,7 @@ import http from './http.js'
2 import axios from "axios"; 2 import axios from "axios";
3 3
4 let baseUrl = 'cgonms-provide' 4 let baseUrl = 'cgonms-provide'
5 -// let baseUrl = 'http://127.0.0.1:9999/dispatch'  
6 -/*用户端，管理员端调度记录，查询车辆调度记录*/ 5 +
7 6
8 export const getExitDataAnalysis = params =>{return http.get(`${baseUrl}/cgoNms/getInfo`, params);}; 7 export const getExitDataAnalysis = params =>{return http.get(`${baseUrl}/cgoNms/getInfo`, params);};
9 8
@@ -51,6 +51,8 @@ import Location from './views/empt/Location.vue' @@ -51,6 +51,8 @@ import Location from './views/empt/Location.vue'
51 import AgentExcelExport from './views/excel/exportExcel-agent' 51 import AgentExcelExport from './views/excel/exportExcel-agent'
52 import NMMSExcelExport from './views/excel/exportExcel-NMMS' 52 import NMMSExcelExport from './views/excel/exportExcel-NMMS'
53 import ExitAnalysis from './views/dataAnalysis/ExitAnalysis' 53 import ExitAnalysis from './views/dataAnalysis/ExitAnalysis'
  54 +import ArrivalAnalysis from './views/dataAnalysis/ArrivalAnalysis'
  55 +
54 56
55 let routes = [ 57 let routes = [
56 { 58 {
@@ -98,6 +100,7 @@ let routes = [ @@ -98,6 +100,7 @@ let routes = [
98 iconCls: 'fa fa-id-card-o', 100 iconCls: 'fa fa-id-card-o',
99 children: [ 101 children: [
100 {path: '/exitAnalysis', component: ExitAnalysis, name: '出港业务统计'}, 102 {path: '/exitAnalysis', component: ExitAnalysis, name: '出港业务统计'},
  103 + {path: '/arrivalAnalysis', component: ArrivalAnalysis, name: '进港业务统计'},
101 ] 104 ]
102 }, 105 },
103 { 106 {
  1 +const ArrivalWebsocket = {
  2 + wsuri: '',
  3 + serverPort: '9011',
  4 + sid: '',
  5 + /**
  6 + * 前后端消息定制的协议为JSON字符窜格式
  7 + * 下面是经过json转换收到的消息,重新赋值的
  8 + * 格式样例为:msgJson:{
  9 + * message:socketMessage,
  10 + * status: socketStatus,
  11 + * data: socketDataList
  12 + * .....
  13 + * }
  14 + */
  15 + socketMessage: '',
  16 + socketStatus: '',
  17 + socketDataList: '',
  18 + msgJson: '',
  19 + websocket: undefined,
  20 +
  21 + // eslint-disable-next-line no-console
  22 + onmessage: function (event) {console.log(event.data)},
  23 + // eslint-disable-next-line no-console
  24 + onclose: function (event) {console.log("websocket链接已关闭")},
  25 + // eslint-disable-next-line no-console
  26 + onopen: function (event) {console.log("websocket链接已链接")},
  27 + // eslint-disable-next-line no-console
  28 + onerror: function (event) {console.log("websocket链接失败,请检查URL")},
  29 + // eslint-disable-next-line no-console
  30 + send: function(message){console.log("已发送消息")},
  31 +
  32 + getWebIP: function () {
  33 + var curIP = window.location.hostname;
  34 + return curIP;
  35 + },
  36 + init: function () {
  37 + this.sid= sessionStorage.getItem('token');
  38 + this.wsuri = "ws://" + '192.168.1.17'+ ":" + this.serverPort + "/websocket/" + this.sid;
  39 + if(this.sid!== ''){
  40 + this.websocket = new WebSocket(this.wsuri);
  41 + this.websocket.onmessage = this.onmessage;
  42 + this.websocket.onclose = this.onclose;
  43 + this.websocket.onopen = this.onopen;
  44 + this.websocket.onerror = this.onerror;
  45 + this.websocket.send = this.send;
  46 +
  47 + }
  48 + }
  49 +}
  50 +
  51 +export default ArrivalWebsocket;
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-card style="background-color: #F5F7FA">
  5 + <!-- 搜素区域 -->
  6 + <div>
  7 + <el-row :gutter="24">
  8 + <el-col :span="5">
  9 + <el-input v-model="queryInfo.flightNo" prefix-icon="el-icon-search"
  10 + placeholder="请输入航班号" clearable style="width:220px">
  11 + </el-input>
  12 + </el-col>
  13 + <el-col :span="5">
  14 + <el-date-picker v-model="queryInfo.flightDate" type="date" value-format="yyyy-MM-dd"
  15 + placeholder="请选择航班日期"
  16 + style="width: 220px">
  17 + </el-date-picker>
  18 + </el-col>
  19 + <el-col :span="10">
  20 + <el-button type="primary" @click="getExitInfoList" style="width: 160px;"
  21 + icon="el-icon-search">
  22 + 数据统计查询
  23 + </el-button>
  24 + <el-button :loading="downloadLoading" type="success" icon="el-icon-s-home"
  25 + style="width: 160px;"
  26 + :disabled="socketResponse.socketStatus!=='200'"
  27 + @click="downLoadExcel">导出 Excel
  28 + </el-button>
  29 + </el-col>
  30 + </el-row>
  31 + <!-- 显示区域 -->
  32 + <el-row :gutter="24" style="margin-top: 30px">
  33 + <el-col :span="11" style="margin-top: 10px">
  34 + <!-- <el-progress :text-inside="true" :stroke-width="15" :percentage="proportion"-->
  35 + <!-- :color="customColors"-->
  36 + <!-- style="width: 455px"></el-progress>-->
  37 + <el-input v-model="message" type="textarea"
  38 + :autosize="{ minRows: 6, maxRows: 10}"
  39 + style="width: 455px;height: 400px"
  40 + placeholder="获取数据进度" readonly>
  41 + </el-input>
  42 + </el-col>
  43 + <el-col :span="4" style="margin-left: 40px;margin-top: 20px">
  44 + <el-progress type="circle" :percentage="proportion"
  45 + :stroke-width="12"
  46 + :color="customColors"
  47 + :width="proportion>6?200:126">
  48 + </el-progress>
  49 + </el-col>
  50 + </el-row>
  51 + </div>
  52 + </el-card>
  53 + </el-main>
  54 + </el-container>
  55 +</template>
  56 +
  57 +<script>
  58 +
  59 + import {getArrivalDataAnalysis, createArrivalExcel, downArrivalExcel} from "../../api/arrival_data_analysis";
  60 + import ArrivalWebsocket from '@/utils/arrival_web_socket';
  61 +
  62 + export default {
  63 + name: "ExitAnalysis",
  64 + data() {
  65 + return {
  66 + /**
  67 + * 出港业务统计列表
  68 + */
  69 + exitInfoList: [],
  70 + resultStatus: '0',
  71 + message: '',
  72 +
  73 +
  74 + /**
  75 + * 返回结果
  76 + */
  77 + socketResponse: {
  78 + socketMessage: '',
  79 + socketStatus: '',
  80 + socketDataList: [],
  81 + socketCurrentNum: 1,
  82 + socketTotalNum: 1,
  83 + },
  84 + /**
  85 + * 查询列表
  86 + */
  87 + queryInfo: {
  88 + //航班号
  89 + flightNo: 'CV4481',
  90 + //航班日期
  91 + flightDate: '2019-06-11',
  92 + },
  93 +
  94 + /* 列表加载 */
  95 + listLoading: false,
  96 + downloadLoading: false,
  97 +
  98 + /**
  99 + * 百分比例
  100 + */
  101 + proportion: 0,
  102 +
  103 + /**
  104 + * 百分比例，颜色
  105 + */
  106 + customColors: [
  107 + {color: '#6f7ad3', percentage: 20},
  108 + {color: '#f56c6c', percentage: 40},
  109 + {color: '#e6a23c', percentage: 60},
  110 + {color: '#5cb87a', percentage: 80},
  111 + {color: '#1989fa', percentage: 100},
  112 + ],
  113 + /**
  114 + * 下载路径的参数
  115 + */
  116 + fileName: "test.xls",
  117 + ipAddress: "",
  118 + url: "",
  119 + }
  120 + },
  121 + methods: {
  122 + /**
  123 + * 获取出港信息列表
  124 + */
  125 + getExitInfoList() {
  126 + let _this = this;
  127 + if (_this.queryInfo.flightNo === '') {
  128 + if (_this.queryInfo.flightDate === '' || _this.queryInfo.flightDate === null) {
  129 + return _this.$message.warning('航班号与航班日期，不能同时为空');
  130 + }
  131 + }
  132 + _this.$message.success('开始获取统计数据');
  133 + getArrivalDataAnalysis(_this.queryInfo).catch(error => {
  134 + // _this.$message.info("即将结束！请您稍候");
  135 + });
  136 + },
  137 +
  138 + /**
  139 + * 下载excel
  140 + */
  141 + downLoadExcel() {
  142 + downArrivalExcel().then((response) => {
  143 + this.downloadLoading = true;
  144 + let res = response.data;
  145 + if (res.code !== '200') {
  146 + return this.$message.error('下载失败');
  147 + this.downloadLoading = false;
  148 + }
  149 + // console.log(res.msg)
  150 + //获取地址
  151 + this.ipAddress = res.msg;
  152 + this.url = this.ipAddress + this.fileName;
  153 + console.log(this.url)
  154 + // console.log(this.ipAddress)
  155 + this.down();
  156 + this.downloadLoading = false;
  157 + }).catch(error => {
  158 + this.downloadLoading = false;
  159 + console.log(error.toString())
  160 + this.$message.error(error.toString());
  161 + });
  162 +
  163 + },
  164 +
  165 + down() {
  166 + // 创建a标签
  167 + const link = document.createElement('a');
  168 + // download属性
  169 + link.setAttribute('download', 'excel.xls');
  170 + // href链接
  171 + link.setAttribute('href', this.url);
  172 +
  173 + document.body.appendChild(link);
  174 + // 自执行点击事件
  175 + link.click()
  176 + },
  177 +
  178 + /**
  179 + * 生成excel
  180 + */
  181 + generateExcel() {
  182 + createArrivalExcel(this.socketResponse.socketDataList).then((response) => {
  183 + let res = response.data;
  184 + if (res.code !== '200') {
  185 + return this.$message.error('生成excel失败');
  186 + }
  187 + this.fileName = res.msg;
  188 + console.log(this.fileName)
  189 + this.$message.success("Excel准备就绪")
  190 + }).catch(error => {
  191 + this.$message.error(error.toString());
  192 + });
  193 + },
  194 +
  195 + socket_onmessage: function (e) {
  196 + console.log("从websocket接收到新的消息-->>" + e.data);
  197 + //this.message = this.message + e.data + "\n";
  198 + let msgJson = JSON.parse(e.data);
  199 + this.message = this.message + this.dataFormat(new Date()) + " -> " + msgJson.message + "\n";
  200 + this.socketResponse = JSON.parse(e.data);
  201 + this.socketResponse.socketMessage = msgJson.message;
  202 + this.socketResponse.socketCurrentNum = msgJson.currentNum;
  203 + this.socketResponse.socketTotalNum = msgJson.totalNum;
  204 + console.log(this.socketMessage);
  205 + this.socketResponse.socketStatus = msgJson.status;
  206 + this.socketResponse.socketDataList = msgJson.data;
  207 + console.log(msgJson);
  208 + if (this.socketResponse.socketTotalNum !== null && this.socketResponse.socketTotalNum !== 0) {
  209 + this.proportion = this.toPercent(this.socketResponse.socketCurrentNum / this.socketResponse.socketTotalNum);
  210 + }
  211 + if (this.socketResponse.socketCurrentNum === this.socketResponse.socketTotalNum &&
  212 + this.socketResponse.socketTotalNum !== 0 && this.socketResponse.socketCurrentNum !== 0) {
  213 + this.generateExcel();
  214 + }
  215 + },
  216 +
  217 + socket_onopen: function (e) {
  218 + console.log("websocket->>链接已链接");
  219 + },
  220 +
  221 + /**
  222 + * 重写日期函数格式化日期
  223 + */
  224 + dataFormat(time) {
  225 + 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()}`;
  226 + },
  227 +
  228 + /**
  229 + * 将小数转换成百分比
  230 + * @param point
  231 + * @returns {string|number}
  232 + */
  233 + toPercent(point) {
  234 + if (point == 0) {
  235 + return 0;
  236 + }
  237 + let str = Number(point * 100).toFixed();
  238 + // str+="%";
  239 + return parseInt(str);
  240 + }
  241 + },
  242 + created() {
  243 + ArrivalWebsocket.onopen = this.socket_onopen;
  244 + ArrivalWebsocket.onmessage = this.socket_onmessage;
  245 + ArrivalWebsocket.init();
  246 + },
  247 + destroyed() {
  248 + },
  249 + watch: {},
  250 + }
  251 +</script>
  252 +
  253 +<style scoped>
  254 +
  255 +</style>
@@ -299,7 +299,7 @@ @@ -299,7 +299,7 @@
299 getPermList() { 299 getPermList() {
300 let para = { 300 let para = {
301 pageNum: 1, 301 pageNum: 1,
302 - pageSize: 200 302 + pageSize: 500
303 }; 303 };
304 NProgress.start(); 304 NProgress.start();
305 permList(para).then((res) => { 305 permList(para).then((res) => {