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 concrete-module" :key="workerOrderKey" v-loading="workerOrderLoading">
        <div class="xhz-concrete-nav">
          <div class="sjk-chart-line-title-tz" style="padding: 10px 20px 0">
            <button :class="schemeNav == 0 ? 'active' : ''" @click="onSchemeBtnA(0, {})">全部</button>
            <button :class="schemeNav == index + 1 ? 'active' : ''" @click="onSchemeBtnA(index + 1, item)"
              v-for="(item, index) in workerOrder" :key="index">{{ item.ghName }}</button>
            <more-button :nav="moreNav" :label="moreLabel" v-if="workerOrerMore.length > 0" :list="workerOrerMore"
              @value="onMoreBtn"></more-button>

          </div>
          <div style="display: flex">
            <div class="xhz-concrete-legend xhz-concrete-legend-1"><button></button> 设计量</div>
            <div class="xhz-concrete-legend xhz-concrete-legend-2"><button></button> 消耗量</div>
          </div>
          <div class="sjk-chart-line-title" style="padding: 10px 0 0">
            <div :class="trendBtnNav == 1 ? 'active' : ''" @click="onClickTemperatureTrend(1)">本月</div>
            <div :class="trendBtnNav == 2 ? 'active' : ''" @click="onClickTemperatureTrend(2)">开累</div>
          </div>
        </div>
        <div style="display: flex;padding: 0 10px;" class="xhz-concrete-chart"
          :class="{ 'no-data': moreData.length == 0 }">

          <many-chart :dataList="moreData" v-if="moreData.length > 0"></many-chart>
          <div class="no-data" v-else>
            <img src="images/nodata.png" class="no-data-img" />
            <div style="text-align: center;" class="no-data-text">暂无数据</div>
          </div>
        </div>
      </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";
import moreButton from "./components/moreButton.vue";
import manyChart from "./components/manyChart.vue";
export default {
  components: {
    moreButton,
    manyChart,
  },
  data() {
    return {
      dpi: "",
      selProject: null,
      //今日工单
      todaysWorkOrderData: {
        labels: [],
        data: [],
      },
      orderDataHeight: 500,
      orderInterval: null,
      orderDataKey: 0,
      //混凝土使用情况
      workerOrder: [],
      workerOrerMore: [],
      schemeNav: 0,
      moreNav: '',
      trendBtnNav: 1,
      moreLabel: '更多',
      moreData: [],
      workerOrderKey: 0,
      workerOrderLoading: false,
    };
  },
  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";
      this.orderDataHeight = is1K ? 580 : is2K ? 810 : 1275;
      this.getOrderDataLabel();
      this.chartKey++;
      this.orderDataKey++;
      this.workerOrderKey++;
    },
    init() {
      if (!this.selProject) {
        return;
      }

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

      //获取工号信息
      this.loadWorkOrderData();

    },
    //获取材料销号制混凝土楼号维度信息
    async getConcreteMaterialActQuantityBuildingNoInfoService(type) {
      let postData = {
        projectId: this.selProject.id,
      }
      this.moreData = []
      if (type == 1) {
        postData.startTime = this.$dt(this.getlastMonth()).format("YYYY-MM-DD 00:00:00");
        postData.endTime = this.$dt(new Date()).format("YYYY-MM-DD 23:59:59");
      }
      this.workerOrderLoading = true
      let result = await this.$api.machMater.materGetConcreteMaterialActQuantityBuildingNoInfoService(postData)
      result = result.data;
      if (result && result.code == '000000' && result.data) {
        let moreDataTemp = []
        result.data.forEach(item => {
          if (moreDataTemp.length <= 0) {
            moreDataTemp.push({
              text: item.oneName,
              legend: ["设计量", "消耗量"],
              unit: 'm³',
              xData: [],
              yData_1: [],
              yData_2: []
            })
          }

          if (JSON.stringify(moreDataTemp).indexOf(item.oneName) < 0) {
            moreDataTemp.push({
              text: item.oneName,
              legend: ["设计量", "消耗量"],
              unit: 'm³',
              xData: [],
              yData_1: [],
              yData_2: []
            })
          }
        })

        moreDataTemp.forEach(item => {
          result.data.forEach(item1 => {
            if (item.text == item1.oneName) {
              item.xData.push(item1.materielModel)
              item.yData_1.push(item1.yhl.toFixed(1))
              item.yData_2.push(item1.actQuantity.toFixed(1))
            }
          })
        })
        moreDataTemp.forEach(item => {
          this.moreData.push({
            text: item.text,
            legend: item.legend,
            unit: item.unit,
            xData: item.xData,
            yData_1: item.yData_1,
            yData_2: item.yData_2,
          })
        })

      } else {
        this.moreData = []
      }
      this.workerOrderLoading = false
      this.workerOrderKey++;

    },
    //获取材料销号制混凝土楼层维度信息
    async getConcreteMaterialActQuantityFloorLevelInfoService(type, ghId) {
      this.moreData = []
      let postData = {
        projectId: this.selProject.id,
      }
      this.moreData = []
      if (type == 1) {
        postData.startTime = this.$dt(this.getlastMonth()).format("YYYY-MM-DD 00:00:00");
        postData.endTime = this.$dt(new Date()).format("YYYY-MM-DD 23:59:59");
      }
      this.workerOrderLoading = true
      let result = await this.$api.machMater.materGetConcreteMaterialActQuantityFloorLevelInfoService(postData);
      result = result.data;
      if (result && result.code == '000000' && result.data) {
        let moreDataTemp = []
        result.data.forEach(item => {
          if (moreDataTemp.length <= 0) {
            moreDataTemp.push({
              text: item.threeName,
              legend: ["设计量", "消耗量"],
              unit: 'm³',
              time: item.add_time,
              xData: [],
              yData_1: [],
              yData_2: []
            })
          }

          if (JSON.stringify(moreDataTemp).indexOf(item.threeName) < 0) {
            moreDataTemp.push({
              text: item.threeName,
              legend: ["设计量", "消耗量"],
              unit: 'm³',
              time: item.add_time,
              xData: [],
              yData_1: [],
              yData_2: []
            })
          }
        })

        moreDataTemp.forEach(item => {
          result.data.forEach(item1 => {
            if (item.text == item1.threeName) {
              item.xData.push(item1.materielModel)
              item.yData_1.push(item1.yhl.toFixed(1))
              item.yData_2.push(item1.actQuantity.toFixed(1))
            }
          })
        })
        this.moreData = moreDataTemp.sort((prev, next) => prev.time - next.time)
        this.workerOrderLoading = false
        this.workerOrderKey++;

      }
    },
    async onClickTemperatureTrend(n) {
      this.trendBtnNav = n
      if (this.schemeNav == 0) {
        await this.getConcreteMaterialActQuantityBuildingNoInfoService(n)
      } else {
        await this.getConcreteMaterialActQuantityFloorLevelInfoService(n, this.ghId)
      }
    },
    async onSchemeBtnA(n, item) {
      this.schemeNav = n
      if (n == 0) {
        await this.getConcreteMaterialActQuantityBuildingNoInfoService(this.trendBtnNav)
      } else {
        this.ghId = item.ghId
        await this.getConcreteMaterialActQuantityFloorLevelInfoService(this.trendBtnNav, item.ghId)
      }
      this.moreNav = ''
    },
    async onMoreBtn(item) {
      this.ghId = item.id
      this.schemeNav = -1
      this.moreNav = item.text
      await this.getConcreteMaterialActQuantityFloorLevelInfoService(this.trendBtnNav, item.id)
    },
    loadWorkOrderData() {
      let data = {
        projectId: this.selProject.id
      };
      this.$api.machMater.materGetConcreteMaterialActQuantityGhInfoService(data).then(d => {
        let tmps = (d.data?.data || []).map(item => {
          item.text = item.ghName
          item.id = item.ghId
          return item;
        });
        this.workerOrder = tmps.slice(0, 3);
        this.workerOrerMore = tmps;
        this.onSchemeBtnA(0, {});
      });
    },
    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++;
        }
      }
    },
    getlastMonth() {
      let now = new Date();
      // 当前月的日期
      let nowDate = now.getDate();
      let lastMonth = new Date(now.getTime());
      // 设置上一个月（这里不需要减1）
      lastMonth.setMonth(lastMonth.getMonth());
      // 设置为0，默认为当前月的最后一天
      lastMonth.setDate(0);
      // 上一个月的天数
      let daysOflastMonth = lastMonth.getDate();
      // 设置上一个月的日期，如果当前月的日期大于上个月的总天数，则为最后一天
      lastMonth.setDate(nowDate > daysOflastMonth ? daysOflastMonth : nowDate);
      return lastMonth;
    }
  },
};
</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;
    }
  }

  .concrete-module {
    .xhz-concrete-nav {
      margin-top: -12px;

      .sjk-chart-line-title-tz {
        button {
          width: auto;
          border: 0;
          padding: 5px 10px;
        }
      }

    }

    .xhz-concrete-chart {
      &.no-data {
        height: 100%;
        justify-content: center;
        align-items: center;
      }

      .no-data {
        width: 100%;
        text-align: center;

        .no-data-img {
          width: 120px;
        }

        .no-data-text {
          font-size: 14px;
        }
      }
    }
  }

  @media (max-width: 1920px) {
    .order-data-module {
      .element-table-ranking {
        .el-table {
          th {
            padding: 0px;

            .cell {
              padding-left: 0px;
              padding-right: 0px;
            }
          }
        }
      }
    }
  }
}
</style>