|
|
@@ -0,0 +1,310 @@
|
|
|
+<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="tableToExcel"
|
|
|
+ @upset="upset"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="echart">
|
|
|
+ <Tableformbrs :tableList="tableList" :action="changing" :set="set" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Echarts from "../components/echart/index.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 {
|
|
|
+ changing: "12",
|
|
|
+ asShow: false,
|
|
|
+ optiondata: [],
|
|
|
+ picShow: true, //图片表格切换
|
|
|
+ action: 0,
|
|
|
+ uppps: null,
|
|
|
+ dataid: "collection_ecahrt0",
|
|
|
+ listqueryTemplateID: DATACONTENT_ID.modeChannelbased,
|
|
|
+ eledata: null,
|
|
|
+ set: "",
|
|
|
+ isShow: Echarts,
|
|
|
+ tableList: [],
|
|
|
+ tableListcop: [],
|
|
|
+ listname: "",
|
|
|
+ listHeader: [],
|
|
|
+ tableData: {
|
|
|
+ time: [],
|
|
|
+ data1: [],
|
|
|
+ data2: [],
|
|
|
+ kg: "",
|
|
|
+ tyol: "",
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ airport: "",
|
|
|
+ dateTime: "",
|
|
|
+ },
|
|
|
+ titleTop: "龙门架统计",
|
|
|
+ formItems: [
|
|
|
+ {
|
|
|
+ prop: "pps",
|
|
|
+ inputType: "select",
|
|
|
+ placeholder: "统计范围",
|
|
|
+ requiredWarning: "请先选择统计范围",
|
|
|
+ clearable: true,
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: "基于通道",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: "基于代理人",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: "dateTime",
|
|
|
+ inputType: "datePicker",
|
|
|
+ clearable: true,
|
|
|
+ width: "240px",
|
|
|
+ options: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.getQuery([]);
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 监听数据变化，重绘折线图
|
|
|
+ option: {
|
|
|
+ deep: true,
|
|
|
+ handler(newVal) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ destroyed() {},
|
|
|
+ methods: {
|
|
|
+ getFormData(data) {
|
|
|
+ this.tableData.time = [];
|
|
|
+ this.tableData.data1 = [];
|
|
|
+ this.tableData.data2 = [];
|
|
|
+ this.listname = "龙门架统计" + data.dateTime[0] + "--" + data.dateTime[1];
|
|
|
+ this.uppps = data.pps;
|
|
|
+ if (data.pps === 1) {
|
|
|
+ (this.listqueryTemplateID = DATACONTENT_ID.modeChannelbased),
|
|
|
+ (this.listHeader = [
|
|
|
+ "日期",
|
|
|
+ "通道",
|
|
|
+ "绑图前条码数",
|
|
|
+ "绑图前重复条码数据",
|
|
|
+ "加货条码数量",
|
|
|
+ "加货重复条码数量",
|
|
|
+ "加货记录的该通道运单件数",
|
|
|
+ "绑图前重码率",
|
|
|
+ "加货重码率",
|
|
|
+ "识读率",
|
|
|
+ "加货准确率",
|
|
|
+ ]);
|
|
|
+ this.changing = 12;
|
|
|
+ } else if (data.pps === 2) {
|
|
|
+ (this.listqueryTemplateID = DATACONTENT_ID.modeAgentbased),
|
|
|
+ (this.listHeader = [
|
|
|
+ "日期",
|
|
|
+ "代理人",
|
|
|
+ "通道",
|
|
|
+ "绑图前条码数",
|
|
|
+ "绑图前重复条码数据",
|
|
|
+ "加货条码数量",
|
|
|
+ "加货重复条码数量",
|
|
|
+ "加货记录的该通道运单件数",
|
|
|
+ "绑图前重码率",
|
|
|
+ "加货重码率",
|
|
|
+ "识读率",
|
|
|
+ "加货准确率",
|
|
|
+ ]);
|
|
|
+ this.changing = 13;
|
|
|
+ }
|
|
|
+ let option = [
|
|
|
+ {
|
|
|
+ fd1: data.dateTime[0],
|
|
|
+ fd2: data.dateTime[1],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.getQuery(option, null);
|
|
|
+ },
|
|
|
+ //获取表格数据
|
|
|
+ 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));
|
|
|
+ this.tableList.forEach((item, index) => {
|
|
|
+ item.indexs = index + 1;
|
|
|
+ });
|
|
|
+ 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--;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //导出
|
|
|
+ tableToExcel() {
|
|
|
+ import("../../../utils/Export2Excel").then((excel) => {
|
|
|
+ // 设置导出表格的头部
|
|
|
+ const tHeader = this.listHeader;
|
|
|
+ // 将要导出的数据进行一个过滤
|
|
|
+ /**
|
|
|
+ * 源数据导入到excel的数据每一条重新拼成一个数组,数组里的每个元素就是filterVal里的每个字段
|
|
|
+ */
|
|
|
+ const data = this.tableListcop.map((item, index) => {
|
|
|
+ if (this.uppps === 1) {
|
|
|
+ return [
|
|
|
+ item.dat,
|
|
|
+ item.ChannelId,
|
|
|
+ item.codeNum,
|
|
|
+ item.reCodeNum,
|
|
|
+ item.accNum,
|
|
|
+ item.reAccNum,
|
|
|
+ item.pcs,
|
|
|
+ item.piclv,
|
|
|
+ item.acclv,
|
|
|
+ item.readlv,
|
|
|
+ item.oklv,
|
|
|
+ ];
|
|
|
+ } else if (this.uppps === 2) {
|
|
|
+ return [
|
|
|
+ item.dat,
|
|
|
+ item.cargoCompany,
|
|
|
+ item.ChannelId,
|
|
|
+ item.codeNum,
|
|
|
+ item.reCodeNum,
|
|
|
+ item.accNum,
|
|
|
+ item.reAccNum,
|
|
|
+ item.pcs,
|
|
|
+ item.piclv,
|
|
|
+ item.acclv,
|
|
|
+ item.readlv,
|
|
|
+ item.oklv,
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ data[data.length - 1].indexs = "总计";
|
|
|
+ // 调用我们封装好的方法进行导出Excel
|
|
|
+ excel.export_json_to_excel({
|
|
|
+ // 导出的头部
|
|
|
+ header: tHeader,
|
|
|
+ // 导出的内容
|
|
|
+ data,
|
|
|
+ // 导出的文件名称
|
|
|
+ filename: this.listname,
|
|
|
+ // 导出的表格宽度是否自动
|
|
|
+ autoWidth: true,
|
|
|
+ // 导出文件的后缀类型
|
|
|
+ bookType: "xlsx",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ upset(data) {
|
|
|
+ this.picShow = data;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Echarts,
|
|
|
+ StatisticsHeader,
|
|
|
+ Tableformbrs,
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.airportInfo {
|
|
|
+ position: relative;
|
|
|
+ .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: 64px;
|
|
|
+ }
|
|
|
+ .echart {
|
|
|
+ width: 100%;
|
|
|
+ height: 746px;
|
|
|
+ position: absolute;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
