|
|
@@ -0,0 +1,477 @@
|
|
|
+<template>
|
|
|
+ <div class="airportInfo">
|
|
|
+ <div class="variable">
|
|
|
+ <StatisticsHeader
|
|
|
+ :title="titleTop"
|
|
|
+ :items="formItems"
|
|
|
+ :data="formData"
|
|
|
+ :eledata="eledata"
|
|
|
+ with-setting
|
|
|
+ :withSetting="false"
|
|
|
+ :withExport="true"
|
|
|
+ :set="set"
|
|
|
+ :action="action"
|
|
|
+ :asShow="asShow"
|
|
|
+ @getFormData="getFormData"
|
|
|
+ @export="Excelto"
|
|
|
+ @upset="upset"
|
|
|
+ @fore="fore"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="echart"
|
|
|
+ :style="
|
|
|
+ tableList.length > 0 ? 'background:rgba(0,0,0,0)' : 'background:#ffffff'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <Tableformbrs
|
|
|
+ :tableList="
|
|
|
+ tableList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
|
|
|
+ "
|
|
|
+ :action="action"
|
|
|
+ :set="set"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ v-if="tableList.length > 0"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ :page-size="pagesize"
|
|
|
+ style="position: absolute; right: 0; bottom: 0"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Echarts from "../components/echart/echartsgas.vue";
|
|
|
+import Tableformbrs from "../components/echart/tableforms.vue";
|
|
|
+import StatisticsHeader from "../components/echart/statisticsHeader.vue";
|
|
|
+import { export_json_to_excel } from "@/utils/Export2Excel";
|
|
|
+import { Query } from "@/api/webApi";
|
|
|
+export default {
|
|
|
+ name: "ChartsBar",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentPage: 1,
|
|
|
+ pagesize: 10,
|
|
|
+ total: 0,
|
|
|
+ asShow: false,
|
|
|
+ optiondata: [],
|
|
|
+ picShow: true, //图片表格切换
|
|
|
+ action: 14,
|
|
|
+ dataid: "collection_ecahrt10",
|
|
|
+ listqueryTemplateID: DATACONTENT_ID.modeSpecialList,
|
|
|
+ eledata: null,
|
|
|
+ set: "",
|
|
|
+ tableList: [],
|
|
|
+ tableListcop: [],
|
|
|
+ listname: "",
|
|
|
+ listHeader: [],
|
|
|
+ listnames: "",
|
|
|
+ listHeaders: [],
|
|
|
+ tableData: {
|
|
|
+ time: [],
|
|
|
+ data1: [],
|
|
|
+ data2: [],
|
|
|
+ kg: "",
|
|
|
+ tyol: "",
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ airport: "",
|
|
|
+ dateTime: "",
|
|
|
+ },
|
|
|
+ tableLister: [],
|
|
|
+ titleTop: "特货明细统计",
|
|
|
+ formItems: [
|
|
|
+ {
|
|
|
+ prop: "fttp",
|
|
|
+ inputType: "select",
|
|
|
+ placeholder: "国内出港",
|
|
|
+ requiredWarning: "",
|
|
|
+ clearable: true,
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "国内出港",
|
|
|
+ label: "国内出港",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "国际出港",
|
|
|
+ label: "国际出港",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "国内进港",
|
|
|
+ label: "国内进港",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "国际进港",
|
|
|
+ label: "国际进港",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "specialTypeName",
|
|
|
+ inputType: "select",
|
|
|
+ placeholder: "全部",
|
|
|
+ requiredWarning: "",
|
|
|
+ clearable: true,
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "动",
|
|
|
+ label: "动",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "贵",
|
|
|
+ label: "贵",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "邮",
|
|
|
+ label: "邮",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "鲜",
|
|
|
+ label: "鲜",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "锂",
|
|
|
+ label: "锂",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "全部",
|
|
|
+ label: "全部",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "dateTime",
|
|
|
+ inputType: "datePicker",
|
|
|
+ clearable: true,
|
|
|
+ width: "240px",
|
|
|
+ options: [new Date(), new Date()],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.getQuery([]);
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 监听数据变化，重绘折线图
|
|
|
+ option: {
|
|
|
+ deep: true,
|
|
|
+ handler(newVal) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ destroyed() {},
|
|
|
+ methods: {
|
|
|
+ fore(data) {
|
|
|
+ if (data.fttp === "国内出港" || data.fttp === "国内进港") {
|
|
|
+ this.formItems[1].options = [
|
|
|
+ {
|
|
|
+ value: "动",
|
|
|
+ label: "动",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "贵",
|
|
|
+ label: "贵",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "邮",
|
|
|
+ label: "邮",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "鲜",
|
|
|
+ label: "鲜",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "锂",
|
|
|
+ label: "锂",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "全部",
|
|
|
+ label: "全部",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ this.formItems[1].options = [
|
|
|
+ {
|
|
|
+ value: "活",
|
|
|
+ label: "活",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "鲜",
|
|
|
+ label: "鲜",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "药",
|
|
|
+ label: "药",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "危",
|
|
|
+ label: "危",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "冷",
|
|
|
+ label: "冷",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "锂",
|
|
|
+ label: "锂",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "快",
|
|
|
+ label: "快",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "全部",
|
|
|
+ label: "全部",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pagesize = val;
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ },
|
|
|
+ getFormData(data) {
|
|
|
+ this.tableData.time = [];
|
|
|
+ this.tableData.data1 = [];
|
|
|
+ this.tableData.data2 = [];
|
|
|
+ let option = [
|
|
|
+ {
|
|
|
+ specialTypeName: data.specialTypeName ? data.specialTypeName : "全部",
|
|
|
+ fttp: data.fttp ? data.fttp : "国内出港",
|
|
|
+ fd1: data.dateTime[0],
|
|
|
+ fd2: data.dateTime[1],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.getQuery(option, null);
|
|
|
+ // this.getQuerys(option, null);
|
|
|
+ this.listname =
|
|
|
+ "特货明细统计" + data.dateTime[0] + "--" + data.dateTime[1];
|
|
|
+ this.listHeader = ["序号", "日期", "特货名称", "航班号", "运单号"];
|
|
|
+ },
|
|
|
+ //获取表格数据
|
|
|
+ async getQuery(data, dat) {
|
|
|
+ try {
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ id: this.listqueryTemplateID,
|
|
|
+ dataContent: data,
|
|
|
+ });
|
|
|
+ if (code == 0) {
|
|
|
+ this.tableData.time = [];
|
|
|
+ this.tableData.data1 = [];
|
|
|
+ this.tableData.data2 = [];
|
|
|
+ this.tableList = JSON.parse(JSON.stringify(returnData.listValues));
|
|
|
+ this.tableListcop = JSON.parse(JSON.stringify(returnData.listValues));
|
|
|
+ for (var i = 0; i < this.tableList.length; i++) {
|
|
|
+ for (var j = i + 1; j < this.tableList.length; ) {
|
|
|
+ if (this.tableList[i].flightNO === this.tableList[j].flightNO) {
|
|
|
+ this.tableList.splice(j, 1);
|
|
|
+ } else {
|
|
|
+ j++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableList.forEach((item, index) => {
|
|
|
+ item.indexs = index + 1;
|
|
|
+ });
|
|
|
+ this.total = this.tableList.length;
|
|
|
+ // for (let i = 0; i < 9; i++) {
|
|
|
+ // if (!this.tableList[i]) {
|
|
|
+ // this.tableList.push({});
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ this.tableListcop.forEach((item, index) => {
|
|
|
+ item.indexs = index + 1;
|
|
|
+ });
|
|
|
+ returnData.listValues.forEach((element) => {
|
|
|
+ this.tableData.data1 = [];
|
|
|
+ });
|
|
|
+ this.tableData.data1.push(0);
|
|
|
+ for (let index = 0; index < this.tableData.data2.length; index++) {
|
|
|
+ if (index > 0) {
|
|
|
+ const element =
|
|
|
+ (this.tableData.data2[index] -
|
|
|
+ this.tableData.data2[index - 1]) /
|
|
|
+ this.tableData.data2[index - 1];
|
|
|
+ this.tableData.data1.push(
|
|
|
+ element.toFixed(2) ? element.toFixed(2) : 0
|
|
|
+ );
|
|
|
+ this.tableData.data1.forEach((element) => {
|
|
|
+ element = Number(element);
|
|
|
+ if (typeof element !== "number") {
|
|
|
+ element = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.page--;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ Excelto() {
|
|
|
+ this.tableToExcel();
|
|
|
+ // this.tableToExcels();
|
|
|
+ },
|
|
|
+ //导出
|
|
|
+ tableToExcel() {
|
|
|
+ import("../../../utils/Export2Excel").then((excel) => {
|
|
|
+ // 设置导出表格的头部
|
|
|
+ const tHeader = this.listHeader;
|
|
|
+ // 将要导出的数据进行一个过滤
|
|
|
+ /**
|
|
|
+ * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
|
|
|
+ */
|
|
|
+ const data = this.tableListcop.map((item, index) => {
|
|
|
+ return [
|
|
|
+ item.indexs,
|
|
|
+ item.flightDate,
|
|
|
+ item.specialTypeName,
|
|
|
+ item.flightNO,
|
|
|
+ item.stockCode,
|
|
|
+ ];
|
|
|
+ });
|
|
|
+ data[data.length - 1].indexs = "总计";
|
|
|
+ // 调用我们封装好的方法进行导出Excel
|
|
|
+ excel.export_json_to_excel({
|
|
|
+ // 导出的头部
|
|
|
+ header: tHeader,
|
|
|
+ // 导出的内容
|
|
|
+ data,
|
|
|
+ // 导出的文件名称
|
|
|
+ filename: this.listname,
|
|
|
+ // 导出的表格宽度是否自动
|
|
|
+ autoWidth: true,
|
|
|
+ // 导出文件的后缀类型
|
|
|
+ bookType: "xlsx",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tableToExcels() {
|
|
|
+ import("../../../utils/Export2Excel").then((excel) => {
|
|
|
+ // 设置导出表格的头部
|
|
|
+ const tHeader = this.listHeaders;
|
|
|
+ // 将要导出的数据进行一个过滤
|
|
|
+ /**
|
|
|
+ * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
|
|
|
+ */
|
|
|
+ const data = this.tableLister.map((item, index) => {
|
|
|
+ return [
|
|
|
+ item.dat,
|
|
|
+ item.t0,
|
|
|
+ item.t1,
|
|
|
+ item.t2,
|
|
|
+ item.t3,
|
|
|
+ item.t4,
|
|
|
+ item.t5,
|
|
|
+ item.t6,
|
|
|
+ item.t7,
|
|
|
+ item.t8,
|
|
|
+ item.t9,
|
|
|
+ item.t10,
|
|
|
+ item.t11,
|
|
|
+ item.t12,
|
|
|
+ item.t13,
|
|
|
+ item.t14,
|
|
|
+ item.t15,
|
|
|
+ item.t16,
|
|
|
+ item.t17,
|
|
|
+ item.t18,
|
|
|
+ item.t19,
|
|
|
+ item.t20,
|
|
|
+ item.t21,
|
|
|
+ item.t22,
|
|
|
+ item.t23,
|
|
|
+ ];
|
|
|
+ });
|
|
|
+ data[data.length - 1].indexs = "总计";
|
|
|
+ // 调用我们封装好的方法进行导出Excel
|
|
|
+ excel.export_json_to_excel({
|
|
|
+ // 导出的头部
|
|
|
+ header: tHeader,
|
|
|
+ // 导出的内容
|
|
|
+ data,
|
|
|
+ // 导出的文件名称
|
|
|
+ filename: this.listnames,
|
|
|
+ // 导出的表格宽度是否自动
|
|
|
+ autoWidth: true,
|
|
|
+ // 导出文件的后缀类型
|
|
|
+ bookType: "xlsx",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ upset(data) {
|
|
|
+ this.picShow = data;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Echarts,
|
|
|
+ StatisticsHeader,
|
|
|
+ Tableformbrs,
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.airportInfo {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
|
|
|
+ background-color: #ac014d !important; //修改默认的背景色
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ width: 103%;
|
|
|
+ height: 36px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #f7f7f7;
|
|
|
+ position: relative;
|
|
|
+ left: -23px;
|
|
|
+ > .nav {
|
|
|
+ padding: 0 30px 0 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #101116;
|
|
|
+ }
|
|
|
+ > .navs {
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 30px 0 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ac014d;
|
|
|
+ border-bottom: 2px solid #ac014d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .variable {
|
|
|
+ width: 100%;
|
|
|
+ height: 52px;
|
|
|
+ }
|
|
|
+ .echart {
|
|
|
+ width: 100%;
|
|
|
+ height: 746px;
|
|
|
+ position: absolute;
|
|
|
+ // background: #ffffff;
|
|
|
+ // box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ > .imgechatr {
|
|
|
+ width: 100%;
|
|
|
+ height: 49%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
