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"
            @row-click="onInspectionPopup">
            <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)">
        <div class="xhz-device-data">
          <el-row>
            <el-col :span="12">
              <div class="xhz-device-data-min">
                <div class="survey_content">
                  <div class="survey_content_img xhz-education_bgd">
                    <img :src="'./images/education_icon_1.png'">
                  </div>
                </div>
                <div class="xhz-current-value-data">
                  <div>销号设计量</div>
                  <p><span class="led-number">{{ finishGhBaseUseTired.finishGhSjl }}</span>{{ unit }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="xhz-device-data-min">
                <div class="survey_content">
                  <div class="survey_content_img xhz-education_bgd">
                    <img :src="'./images/education_icon_2.png'">
                  </div>
                </div>
                <div class="xhz-current-value-data">
                  <div>销号实耗</div>
                  <p><span class="led-number">{{ finishGhBaseUseTired.finishGhshl }}</span>{{ unit }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="xhz-device-data-min">
                <div class="survey_content">
                  <div class="survey_content_img xhz-education_bgd">
                    <img :src="'./images/education_icon_3.png'">
                  </div>
                </div>
                <div class="xhz-current-value-data">
                  <div>节超量</div>
                  <p><span class="led-number">{{ finishGhBaseUseTired.finishGhJcl }}</span>{{ unit }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="xhz-device-data-min">
                <div class="survey_content">
                  <div class="survey_content_img xhz-education_bgd">
                    <img :src="'./images/education_icon_4.png'">
                  </div>
                </div>
                <div class="xhz-current-value-data">
                  <div>节超率</div>
                  <p><span class="led-number">{{ finishGhBaseUseTired.finishGhJclRate }}</span> %</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="excess-rate" :key="excessRateDataKey">
          <div class="rank-chart" style="padding: 15px;">
            <div class="rank-chart-title xhz-rank-chart-title">超耗率TOP5材料</div>
            <div class="consume-chart" :style="{ height: erHeight * excessRateData.length + 'px' }">
              <consume-chart :dataList="excessRateData" :width="excessNameWidth"></consume-chart>
            </div>
          </div>
        </div>


        <div class="excess-reason" :key="excessReasonKey">
          <div class="rank-chart">
            <div class="rank-chart-title xhz-rank-chart-title">超耗原因分析 <span>混凝土（m³）</span></div>
          </div>
          <div class="excess-chart">
            <project-overview-chart :htmlShow="true" :key="'ai1' + excessReasonKey" :sp="''" :fn="changeChart3"
              :maintitle="excessTitle" :legend-opt="excessReasonLegendOpt" :typedata="typEreasonData" text="超耗总量"
              :height="chart3Height"></project-overview-chart>
          </div>
        </div>

      </module-one-3-1>
    </el-col>
    <app-form-dialog ref="appFormDialog"></app-form-dialog>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
import moreButton from "./components/moreButton.vue";
import manyChart from "./components/manyChart.vue";
import consumeChart from "@/components/consumeChart.vue";
import appFormDialog from "./components/appFormDialog.vue";

export default {
  components: {
    moreButton,
    manyChart,
    consumeChart,
    appFormDialog,
  },
  data() {
    return {
      dpi: "",
      selProject: null,
      unit: 'm³', //混凝土:m³,钢筋:t
      //今日工单
      todaysWorkOrderData: {
        labels: [],
        data: [],
      },
      orderDataHeight: 500,
      orderInterval: null,
      orderDataKey: 0,
      //混凝土使用情况
      workerOrder: [],
      workerOrerMore: [],
      schemeNav: 0,
      moreNav: '',
      trendBtnNav: 1,
      moreLabel: '更多',
      moreData: [],
      workerOrderKey: 0,
      workerOrderLoading: false,
      //项目开累应用情况
      finishGhBaseUseTired: {
        finishGhSjl: 0,
        finishGhshl: 0,
        finishGhJcl: 0,
        finishGhJclRate: 0.0
      },
      //超耗情况  超耗率TOP5材料
      excessRateData: [],
      excessRateDataKey: 0,
      excessNameWidth: 100,
      erHeight: 30,
      //超耗情况  超耗原因分析
      typEreasonData: [],
      excessReasonKey: 100000,
      excessTitle: 100,
      excessReasonLegendOpt: {},
      chart3Height: 300,

    };
  },
  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++;
      this.excessNameWidth = is1K ? 250 : is2K ? 150 : 650;
      this.excessRateDataKey++;
      this.excessReasonKey++;
      this.chart3Height = is1K ? 250 : is2K ? 400 : 600;
      this.erHeight = is1K ? 20 : is2K ? 30 : 150;

    },
    init() {

      if (!this.selProject) {
        return;
      }
      this.initExcessReasonLegendOpt();
      //今日工单
      this.loadTodaysWorkOrderData();

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

      //获取用量情况统计服务
      this.getProjectChaoHaoStatisticsRPTService();

      //超耗率TOP5材料
      this.getReportExceedMaterielTopService();

      //超耗原因分析
      this.getReportConcreteExceedReasonService();

    },
    onInspectionPopup(row) {
      console.log(row)

      this.$refs.appFormDialog.showDialog(this.selProject.id, row)
    },
    initExcessReasonLegendOpt() {
      let is1K = this.$dpi() == "1K";
      let is2K = this.$dpi() == "2K";
      this.excessReasonLegendOpt = {
        icon: "rect",
        orient: "vertical",
        itemWidth: "50%",

        itemWidth: 20,
        itemGap: 20,
        itemHeight: 20,
        type: "scroll",
        pageTextStyle: {
          color: "#c3dbfd",
          fontSize: is1K ? 12 : is2K ? 16 : 24,
        },
        scroll: {
          y: is1K ? 300 : is2K ? 500 : 600,
          bar: {
            show: true,
            width: 5,
            height: 10,
          },
        },
        textStyle: {
          padding: [0, 0, 0, 0],
          fontSize: is1K ? 12 : is2K ? 16 : 24,
          color: "#c3dbfd",
          align: "center",
          rich: {
            name: {
              fontSize: is1K ? 12 : is2K ? 16 : 24,
              color: "#c3dbfd",
              padding: [5, 2, 5, 2],
            },
            percent: {
              fontSize: is1K ? 12 : is2K ? 16 : 24,
              color: "#4676FD",
              padding: [0, 2, 0, 2],
            },
          },
        },
      };
    },
    changeChart3(opt) {
      if (this.$dpi() == "1K") {
        opt.legend[0].left = 200;
        return opt;
      } else if (this.$dpi() == "2K") {
        opt.legend[0].left = 290;
        return opt;
      } else {
        opt.legend[0].left = 500;
        return opt;
      }
    },
    getReportConcreteExceedReasonService() {
      this.$api.machMater.materGetReportConcreteExceedReasonService({
        projectId: this.selProject.id
      }).then(d => {
        this.excessTitle = 0;
        let result = d.data;
        if (result && result.code == '000000' && result.data) {
          var temp = {}
          let datas2 = []
          for (let i = 0; i < result.data.length; i++) {
            if (result.data[i].causeName.indexOf('其他') != -1) {
              for (let k in result.data[i]) {
                temp[k] = result.data[i][k]
              }
              temp.name = "其它原因"
              temp.value = Number(temp.chActQuantity).toFixed(1);
              result.data.splice(i, 1)
              break;
            }
          }

          for (let i = 0; i < result.data.length; i++) {
            if (i < 5) {
              result.data[i].value = Number(result.data[i].chActQuantity).toFixed(1);
              result.data[i].name = result.data[i].causeName;
              datas2.push(
                result.data[i]
              )
            } else {
              temp.value = Number(Number(temp.value) + Number(Number(result.data[i].chActQuantity).toFixed(1))).toFixed(1)
            }
          }

          datas2 = datas2.sort((next, prev) => prev.value - next.value)
          if (Object.keys(temp).length > 0) {
            datas2.push(temp)
          }
          this.typEreasonData = datas2;
        }
        this.typEreasonData.forEach(item => {
          this.excessTitle += item.value * 1;
        });
        this.excessReasonKey++;
        this.excessTitle = Number(this.excessTitle).toFixed(1);

      });
    },
    getReportExceedMaterielTopService() {
      this.$api.machMater.materGetReportConcreteExceedMaterielTopService({
        projectId: this.selProject.id,
        top: 5
      }).then(d => {
        let res = d.data;
        if (res && res.code == '000000') {
          let objs = res.data || [];
          objs = objs;
          this.excessRateData = objs.map((item, index) => {
            return {
              value: index + 1,
              prop: parseFloat(parseFloat(item.chPer || "0").toFixed(1)),
              text: item.materielName + '(' + item.materielModel + ')'
            }
          }).sort((a, b) => a.prop - b.prop);
          this.excessRateDataKey++;
          console.log("+++++>", this.excessRateData)
        }
      });
    },
    getProjectChaoHaoStatisticsRPTService() {
      this.$api.machMater.materGetProjectChaoHaoStatisticsRPTService({
        projectId: this.selProject.id,
      }).then(d => {
        let res = d.data;
        this.finishGhBaseUseTired = {
          finishGhSjl: 0,
          finishGhshl: 0,
          finishGhJcl: 0,
          finishGhJclRate: 0.0
        }

        if (res && res.code == '000000' && res.data && res.data.length > 0) {
          let tmp = res.data[0];
          if (!tmp) {
            return;
          }
          //完工工号设计量(混凝土)
          this.finishGhBaseUseTired.finishGhSjl = parseFloat(tmp.concrete_finish_designtotal_not_loss).toFixed(1);
          //完工工号实耗量(混凝土)
          this.finishGhBaseUseTired.finishGhshl = parseFloat(tmp.concrete_real_consume).toFixed(1);
          //完工工号节超量(混凝土)
          this.finishGhBaseUseTired.finishGhJcl = parseFloat(tmp.concrete_deviation_not_loss).toFixed(1);
          //完工工号节超率(混凝土)
          this.finishGhBaseUseTired.finishGhJclRate = isNaN(parseFloat((tmp.concrete_deviation_not_loss / tmp.concrete_finish_designtotal_not_loss) * 100).toFixed(1)) ? '0.0' : parseFloat((tmp.concrete_deviation_not_loss / tmp.concrete_finish_designtotal_not_loss) * 100).toFixed(1);
        }
      });
    },
    //获取材料销号制混凝土楼号维度信息
    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% - 11px);
    }
  }

  .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;
        }
      }
    }
  }

  .excess-rate {
    height: 400px;

    .rank-chart {
      height: 100%;

      .rank-chart-title {}

      .consume-chart {
        height: calc(100% - 40px);
      }
    }
  }

  .excess-reason {
    .rank-chart {
      .rank-chart-title {}
    }

    .excess-chart {
      position: relative;
      top: -10px;

      .chart-gif,
      .chart-text {
        width: 120px;
        height: 120px;
        left: 44px;
        top: 65px !important;
      }
    }
  }

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

            .cell {
              padding-left: 0px;
              padding-right: 0px;
            }
          }
        }
      }
    }
  }

  @media (min-width: 1921px) and (max-width: 2560px) {
    .xhz-device-data {
      .xhz-device-data-min {
        .survey_content {
          .xhz-education_bgd {
            width: 110px;
            height: 110px;
            background-size: 90px 70px;

            img {
              width: 50px;
              height: 50px;
              margin-top: 25px
            }
          }
        }

        .xhz-current-value-data {
          font-size: 24px;

          .led-number {
            font-size: 40px;
          }
        }
      }
    }

    .excess-rate {
      height: 520px;

      .rank-chart {
        height: 100%;

        .rank-chart-title {
          font-size: 24px;

        }

        .consume-chart {
          height: calc(100% - 40px);
        }
      }
    }

    .excess-reason {
      margin-top: 30px;

      .rank-chart {
        .rank-chart-title {
          font-size: 24px;

          span {
            font-size: 16px;
          }
        }
      }

      .excess-chart {
        position: relative;
        top: -10px;

        .chart-gif,
        .chart-text {
          width: 190px;
          height: 190px;
          left: 49px;
          top: 106px !important;
        }
      }
    }
  }

  @media (min-width: 2561px) {
    .xhz-device-data {
      .xhz-device-data-min {
        .survey_content {
          .xhz-education_bgd {
            width: 160px;
            height: 160px;
            background-size: 130px 110px;

            img {
              width: 70px;
              height: 70px;
              margin-top: 45px
            }
          }
        }

        .xhz-current-value-data {
          font-size: 32px;

          .led-number {
            font-size: 50px;
          }
        }
      }
    }

    .excess-rate {
      height: 920px;

      .rank-chart {
        height: 100%;

        .rank-chart-title {
          font-size: 32px;
          height: 80px;
        }

        .consume-chart {
          height: calc(100% - 40px);
        }
      }
    }

    .excess-reason {
      margin-top: 60px;

      .rank-chart {
        .rank-chart-title {
          font-size: 32px;
          height: 80px;
          line-height: 80px;

          span {
            font-size: 24px;
          }
        }
      }

      .excess-chart {
        position: relative;
        top: -30px;

        .chart-gif,
        .chart-text {
          width: 290px;
          height: 290px;
          left: 78px;
          top: 155px !important;

          .chart-text-title {
            font-size: 48px;
          }

          .chart-text-sub-title {
            font-size: 28px;
          }
        }
      }
    }

  }
}
</style>