SZYGM1.0/src/views/statisticalanalysis/gantryframe/index.vue

<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"
      :style="
        tableList.length > 0 ? 'background:rgba(0,0,0,0)' : 'background:#ffffff'
      "
    >
      <Tableformbrs
        :tableList="
          tableList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        :action="changing"
        :set="set"
        :listall="listall"
      />
    </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/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 {
      currentPage: 1,
      pagesize: 10,
      total: 0,
      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: [],
        },
      ],
      listall: {
        piclvall: 0,
        acclvall: 0,
        readlvall: 0,
        oklvall: 0,
        reCodeNumall: 0,
        codeNumall: 0,
        reAccNumall: 0,
        accNumall: 0,
        pcsall: 0,
      },
    };
  },
  mounted() {
    this.pagesize = window.screen.height > 1080 ? 20 : 10;
    // this.getQuery([]);
  },
  watch: {
    // 监听数据变化，重绘折线图
    option: {
      deep: true,
      handler(newVal) {},
    },
  },
  destroyed() {},
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getFormData(data) {
      this.listall.piclvall = 0;
      this.listall.acclvall = 0;
      this.listall.readlvall = 0;
      this.listall.oklvall = 0;
      this.listall.reCodeNumall = 0;
      this.listall.codeNumall = 0;
      this.listall.reAccNumall = 0;
      this.listall.accNumall = 0;
      this.listall.pcsall = 0;
      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.total = this.tableList.length;
          for (let i = 0; i < 9; i++) {
            if (!this.tableList[i]) {
              this.tableList.push({});
            }
          }
          this.tableList.forEach((item, index) => {
            item.reCodeNum = item.reCodeNum ? item.reCodeNum : 0;
            item.codeNum = item.codeNum ? item.codeNum : 0;
            item.reAccNum = item.reAccNum ? item.reAccNum : 0;
            item.accNum = item.accNum ? item.accNum : 0;
            item.pcs = item.pcs ? item.pcs : 0;
            if (item.codeNum === 0) {
              item.piclvs = ((item.reCodeNum * 100) / 1).toFixed(2);
            } else {
              item.piclvs = ((item.reCodeNum * 100) / item.codeNum).toFixed(2);
            }
            if (item.accNum === 0) {
              item.acclvs = ((item.reAccNum * 100) / 1).toFixed(2);
            } else {
              item.acclvs = ((item.reAccNum * 100) / item.accNum).toFixed(2);
            }
            if (item.pcs === 0) {
              item.readlvs = ((item.codeNum * 100) / 1).toFixed(2);
            } else {
              item.readlvs = ((item.codeNum * 100) / item.pcs).toFixed(2);
            }
            if (item.pcs === 0) {
              item.oklvs = (((item.pcs - item.reAccNum) * 100) / 1).toFixed(2);
            } else {
              item.oklvs = (
                ((item.pcs - item.reAccNum) * 100) /
                item.pcs
              ).toFixed(2);
            }
            if (isNaN(item.piclvs)) {
              item.piclvs = "0%";
            } else {
              item.piclvs = item.piclvs + "%";
            }
            if (isNaN(item.acclvs)) {
              item.acclvs = "0%";
            } else {
              item.acclvs = item.acclvs + "%";
            }
            if (isNaN(item.readlvs)) {
              item.readlvs = "0%";
            } else {
              item.readlvs = item.readlvs + "%";
            }
            if (isNaN(item.oklvs)) {
              item.oklvs = "0%";
            } else {
              item.oklvs = item.oklvs + "%";
            }
            item.indexs = index + 1;
          });
          for (let i = 0; i < returnData.listValues.length; i++) {
            this.listall.reCodeNumall =
              this.listall.reCodeNumall + returnData.listValues[i].reCodeNum;
            this.listall.codeNumall =
              this.listall.codeNumall + returnData.listValues[i].codeNum;
            this.listall.reAccNumall =
              this.listall.reAccNumall + returnData.listValues[i].reAccNum;
            this.listall.accNumall =
              this.listall.accNumall + returnData.listValues[i].accNum;
            this.listall.pcsall =
              this.listall.pcsall + returnData.listValues[i].pcs;
          }
          if (this.listall.codeNumall === 0) {
            this.listall.piclvall =
              ((this.listall.reCodeNumall * 100) / 1).toFixed(2) + "%";
          } else {
            this.listall.piclvall =
              (
                (this.listall.reCodeNumall * 100) /
                this.listall.codeNumall
              ).toFixed(2) + "%";
          }
          if (this.listall.accNumall === 0) {
            this.listall.acclvall =
              ((this.listall.reAccNumall * 100) / 1).toFixed(2) + "%";
          } else {
            this.listall.acclvall =
              (
                (this.listall.reAccNumall * 100) /
                this.listall.accNumall
              ).toFixed(2) + "%";
          }
          if (this.listall.pcsall === 0) {
            this.listall.readlvall =
              ((this.listall.codeNumall * 100) / 1).toFixed(2) + "%";
          } else {
            this.listall.readlvall =
              ((this.listall.codeNumall * 100) / this.listall.pcsall).toFixed(
                2
              ) + "%";
          }
          if (this.listall.pcsall === 0) {
            this.listall.oklvall =
              (
                ((this.listall.pcsall - this.listall.reAccNumall) * 100) /
                1
              ).toFixed(2) + "%";
          } else {
            this.listall.oklvall =
              (
                ((this.listall.pcsall - this.listall.reAccNumall) * 100) /
                this.listall.pcsall
              ).toFixed(2) + "%";
          }
          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.indexs,
              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.indexs,
              item.dat,
              item.cargoCompany,
              item.ChannelId,
              item.codeNum,
              item.reCodeNum,
              item.accNum,
              item.reAccNum,
              item.pcs,
              item.piclv,
              item.acclv,
              item.readlv,
              item.oklv,
            ];
          }
        });
        // 调用我们封装好的方法进行导出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;
  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;
  }
}
</style>