YZProjectCloud/yanzhu-bigscreen/src/views/machmater/materialManage.vue

<template>
  <div class="material-manage main-page">
    <el-col :span="18" class="h100">
      <module-one-2-3 label="近期工单" class="h66 order-data-module">
        <div class="element-table-ranking" :key="orderDataKey">
          <el-table :data="todaysWorkOrderData.data" class="scroll mytable" :height="orderDataHeight">
            <el-table-column v-for="(st, idx) in todaysWorkOrderData.labels" :prop="st.data" :key="idx" :width="st.width" :label="st.label" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </module-one-2-3>

      <module-one-1-3 label="混凝土使用情况" class="h33"> </module-one-1-3>
    </el-col>

    <el-col :span="6" class="h100">
      <module-one-3-1 label="超耗情况" class="labor-base h100" style="height: cacl(100% - 20px)"></module-one-3-1>
    </el-col>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      dpi: "",
      selProject: null,
      //今日工单
      todaysWorkOrderData: {
        labels: [],
        data: [],
      },
      orderDataHeight: 500,
      orderInterval: null,
      orderDataKey: 0,
    };
  },
  mounted() {
    window.materApp = this;
    this.$store.dispatch("ChangeNav", 802);
    this.$bus.$on(
      "projectChange",
      debounce((prj) => {
        this.selProject = prj;
        this.init();
      })
    );
    this.selProject = this.$store.getters.selProject;
    this.init();
    this.dpi = this.$dpi();
    window.addEventListener("resize", () => {
      if (this.dpi != this.$dpi()) {
        this.dpi = this.$dpi();
        this.resize();
      }
    });
    this.resize();
  },
  methods: {
    resize() {
      let is1K = this.$dpi() == "1K";
      let is2K = this.$dpi() == "2K";
      console.log("---->", is1K, is2K);
      this.orderDataHeight = is1K ? 580 : is2K ? 810 : 1275;
      this.getOrderDataLabel();
      this.chartKey++;
      this.orderDataKey++;
    },
    init() {
      if (!this.selProject) {
        return;
      }

      //今日工单
      this.loadTodaysWorkOrderData();

      // let data = {
      //   projectId: this.selProject.id,
      //   startTime: this.$dt("2025-01-01").format("YYYY-MM-DD HH:mm:ss"),
      //   endTime: this.$dt(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      // };
      // this.$api.machMater.materGetConcreteMaterialActQuantityBuildingNoInfoService(data).then((d) => {
      //   console.log("====>", d);
      // });
    },
    loadTodaysWorkOrderData() {
      let data = {
        projectId: this.selProject.id,
        //startTime: this.$dt("2025-01-01").format("YYYY-MM-DD HH:mm:ss"),
        //endTime: this.$dt(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      };
      this.$api.machMater.materGetConcreteOrderDetailsInfoService(data).then((d) => {
        let newFormatData = (d.data?.data || []).map((item, index) => {
          let { applyType, materielModel, mixName, applyQuantity, actQuantity, addUserName, approvalUserName, addTime, placingMethod, receiptNum, load, receipt, initialId } = item;
          return {
            index: index + 1,
            initialId,
            applyName: item.applyName.split(">>")[0],
            placingLocation: item.applyName.split(">>").length > 1 ? item.applyName.split(">>")[item.applyName.split(">>").length - 1] : item.applyName,
            concrteGrade: materielModel,
            mixName,
            applyQuantity,
            actQuantity,
            addUserName,
            approvalUserName,
            addTime: this.$dt(addTime).format("YYYY-MM-DD"),
            placingMethod: "泵送",
            receiptNum: actQuantity,
            load: index == 0 ? actQuantity * 2.4 : "",
            receipt: index == 0 ? (actQuantity % 8 == 0 ? parseInt(actQuantity / 8) : parseInt(actQuantity / 8) + 1) : "",
            orderChFlag: applyType == "超耗申领" ? "是" : "否",
          };
        });
        
        this.todaysWorkOrderData.data = newFormatData;
        this.getOrderDataLabel();
        this.orderDataKey++;
      });
    },
    getOrderDataLabel() {
      let is1K = this.$dpi() == "1K";
      let is2K = this.$dpi() == "2K";
       let newFormatData=this.todaysWorkOrderData.data;
      this.todaysWorkOrderData.labels = [
        {
          label: "序号",
          width: is1K ? 50 : is2K ? 80 : 110,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "number",
        },
        {
          label: "工单ID",
          width:  "",
          color: "",
          isShow: false,
          type: "",
          type_color: "",
          data: "number",
        },
        {
          label: "工号",
          width: "",
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "job_number",
        },
        {
          label: "浇筑部位",
          width: "",
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "pouring_location",
        },
        {
          label: "混凝土标号",
          width: "",
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "concrete_grade",
        },
        {
          label: "外加剂名称",
          width: "",
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "admixture_name",
        },
        {
          label: "设计量(m³)",
          width: is1K ? 90 : is2K ? 120 : 180,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "design_quantity",
        },
        {
          label: "申请方量(m³)",
          width: is1K ? 105 : is2K ? 138 : 210,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "number_applicants",
        },
        {
          label: "申请人",
          width: is1K ? 80 : is2K ? 85 : 120,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "applicant",
        },
        {
          label: "审核人",
          width: is1K ? 76 : is2K ? 85 : 120,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "reviewed_by",
        },
        {
          label: "申请时间",
          width: "",
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "application_time",
        },
        {
          label: "浇筑方式",
          width: is1K ? 70 : is2K ? 105 : 150,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "pouring_method",
        },
        {
          label: "小票方量(m³)",
          width: is1K ? 105 : is2K ? 138 : 210,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "small_ticket_quantity",
        },
        {
          label: "载重(t)",
          width: is1K ? 90 : is2K ? 88 : 130,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "carrying_capacity",
        },
        {
          label: "小票数量(张)",
          width: is1K ? 110 : is2K ? 135 : 210,
          color: "",
          isShow: true,
          type: "",
          type_color: "",
          data: "small_ticket_number",
        },
        {
          label: "是否超耗",
          width: is1K ? 68 : is2K ? 105 : 150,
          color: "",
          isShow: true,
          type: "state",
          type_color: "consume_above_color",
          data: "consume_above",
        },
      ];

      if (newFormatData.length > 0) {
        let i = 0;
        for (let key in newFormatData[0]) {
          this.todaysWorkOrderData.labels[i] = {
            label: this.todaysWorkOrderData.labels[i].label,
            width: this.todaysWorkOrderData.labels[i].width,
            color: "",
            isShow: this.todaysWorkOrderData.labels[i].isShow,
            type: "",
            type_color: "",
            data: key,
          };
          i++;
        }
      }
    },
  },
};
</script>

<style lang="less">
.material-manage {
  .screen-module {
    &.h66 {
      height: calc(66% - 20px);
    }
    &.h100 {
      height: calc(100% - 20px);
    }
    &.h33 {
      height: calc(33% - 20px);
    }
  }

  .order-data-module {
    .module-ctx {
      padding: 0px 1px 0px 0px;
    }
    .element-table-ranking {
      padding: 0px;
    }
  }
  @media (max-width: 1920px) {
    .order-data-module {
      .element-table-ranking {
        .el-table {
          th {
            padding: 0px;
            .cell {
              padding-left: 0px;
              padding-right: 0px;
            }
          }
        }
      }
    }
  }
}
</style>