gj-erp-kban-vue/src/components/AmphiPosition/index.vue

<template>
  <!-- 垮位分析 -->
  <div class="amphiPosition-container">
    <!-- 筛选 -->
    <div class="formData-box">
      <el-form ref="form" :model="formData" label-width="90px">
        <el-form-item label="请选择年份" size="mini">
          <el-select v-model="formData.year" placeholder="">
            <el-option label="2024" :value="2024"></el-option>
            <el-option label="2025" :value="2025"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="query-btn" @click="queryBtn">确定</div>
    </div>
    <div class="amphiPosition-box">
      <div class="left-box">
        <div class="border-out">
          <div class="border-inner">
            <!-- 表格 -->
            <div class="left-top-box">
              <table class="table-sum">
                <tr>
                  <td class="radius">月度计划总张数</td>
                  <td class="radius" colspan="3">{{ tableSumObj.zs }}张</td>
                </tr>
                <tr>
                  <td>上料张数</td>
                  <td colspan="3">{{ tableSumObj.sl }}张</td>
                </tr>
                <tr>
                  <td>跨位</td>
                  <td>作业区</td>
                  <td>计划张数</td>
                  <td>完成张数</td>
                </tr>
                <tr v-for="(item, index) in tableSumObj.detail" :key="index">
                  <td>{{ item.kw }}</td>
                  <td>{{ item.zyq }}</td>
                  <td>{{ item.sl }}张</td>
                  <td>{{ item.wc }}张</td>
                </tr>
              </table>
              <div class="desc-title" style="margin-top: 2%">垮位汇总表</div>
            </div>
            <!-- 切割饼图 -->
            <div class="left-center-box">
              <div id="loaderPie" class="loaderPie"></div>
              <div id="cutOnePie" class="cutOnePie"></div>
              <div id="cutSecondPie" class="cutSecondPie"></div>
              <div id="cutThreePie" class="cutThreePie"></div>
              <div id="cutSumPie" class="cutSumPie"></div>
            </div>

            <!-- 上料及各做业务区柱状图 -->
            <div class="left-bottom-box">
              <div id="loaderBar" class="loaderBar"></div>
              <div class="desc-title">各工作区完成计划工张数数据分析</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="border-out">
          <div class="border-inner">
            <!-- 折线图 -->
            <div class="right-top-box">
              <div id="TableLine" class="TableLine"></div>
              <div class="desc-title">30天作业区完成情况</div>
            </div>
            <!-- 文字描述 -->
            <div class="right-center-box">
              <div class="right-center-title">
                一区 计划：{{ tableConfigObj.jh }}张 到货检査：{{
                  tableConfigObj.jc
                }}张 上料:{{ tableConfigObj.sl }}张
              </div>
            </div>
            <!-- 滚动列表 -->
            <div class="right-bottom-box">
              <dv-scroll-board ref="tableConfig" :config="tableConfig" />
              <div class="desc-title">本日各作业区计划完成情况</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { zyjhzxTable, zyjhzx, today_zyjhzx } from "@/api/amphiPosition";
export default {
  name: "AmphiPosition",
  data() {
    return {
      formData: {
        year: 2024,
      },
      tableSumObj: {},
      tableConfig: {
        header: ["作业区", "船号", "批量", "分段", "套料图号", "状态"],
        data: [],
        rowNum: 6,
        align: ["center"],
        headerHeight: 35,
        headerBGC: "#063079",
        oddRowBGC: "",
        evenRowBGC: "#12264f",
      },
      tableConfigObj: {},
    };
  },
  created() {
    this.queryBtn();
  },
  methods: {
    // 根据年份查询
    queryBtn() {
      this.zyjhzxTable(); //垮位汇总表
      this.zyjhzx(); //30天作业区完成情况折线图
      this.today_zyjhzx(); //本日各作业区计划完成情况
    },
    zyjhzxTable() {
      zyjhzxTable({
        nf: this.formData.nf,
      }).then((res) => {
        this.tableSumObj = res.data;
        let wclOneValue = 0;
        let wcOneValue = 0;
        let slOneValue = 0;
        let wclSecondValue = 0;
        let wcSecondValue = 0;
        let slSecondValue = 0;
        let wclThreeValue = 0;
        let wcThreeValue = 0;
        let slThreeValue = 0;
        let wclSumValue = 0;
        let wcSumValue = 0;
        let slSumValue = 0;
        // =======
        let zyq1 = 0;
        let zyq2 = 0;
        let zyq3 = 0;
        let zyq4 = 0;
        //   切割饼图
        this.loaderPie(res.data.zs - res.data.sl, res.data.sl);
        res.data.detail.forEach((item) => {
          if (item.kw == "一垮") {
            wcOneValue += item.wc;
            wclOneValue = (slOneValue += item.sl) - wcOneValue;
            this.cutOnePie(wclOneValue, wcOneValue);
          } else if (item.kw == "二垮") {
            wcSecondValue += item.wc;
            wclSecondValue = (slSecondValue += item.sl) - wcSecondValue;
            this.cutSecondPie(wclSecondValue, wcSecondValue);
          } else if (item.kw == "三垮") {
            wcThreeValue += item.wc;
            wclThreeValue = (slThreeValue += item.sl) - wcThreeValue;
            this.cutThreePie(wclThreeValue, wcThreeValue);
          } else if (item.kw == "四五六垮") {
            wcSumValue += item.wc;
            wclSumValue = (slSumValue += item.sl) - wcSumValue;
            this.cutSumPie(wclSumValue, wcSumValue);
          }
          // =================
          if (item.zyq == "一区") {
            zyq1 += item.sl;
          } else if (item.zyq == "二区") {
            zyq2 += item.sl;
          } else if (item.zyq == "三区") {
            zyq3 += item.sl;
          } else if (item.zyq == "四区") {
            zyq4 += item.sl;
          }
        });
        let zyqDataY = [zyq1, zyq2, zyq3, zyq4];
        var bgData = [res.data.zs, res.data.zs, res.data.zs, res.data.zs];
        this.$nextTick(() => {
          this.loaderBar(zyqDataY, bgData);
        });
      });
    },
    zyjhzx() {
      zyjhzx({
        nf: this.formData.nf,
      }).then((res) => {
        let dataX = [];
        let dataY = [];
        let legendData = [];
        let seriesData = [];
        res.data.forEach((item) => {
          dataX.push(item.day);
          dataY.push(item.sl);
          legendData.push(item.zyq);
          seriesData.push({
            name: item.zyq,
            type: "line",
            stack: "Total",
            data: item.sl,
          });
        });
        //   折线图
        this.TableLine(legendData, dataX, dataY, seriesData);
      });
    },
    today_zyjhzx() {
      today_zyjhzx({
        nf: this.formData.nf,
      }).then((res) => {
        this.tableConfigObj = res.data;
        let data = [];
        if (res.data.detail.length) {
          res.data.detail.forEach((item, index) => {
            data.push({
              zyq: item.zyq,
              dcCh: item.dcCh,
              dcPl: item.dcPl,
              dcFd: item.dcFd,
              tzbh: item.tzbh,
              zt: item.zt,
            });
          });
          let valueArray = data.map((obj) => Object.values(obj));
          this.$nextTick(() => {
            this.$refs["tableConfig"].updateRows(valueArray);
          });
        }
      });
    },
    loaderPie(wclValue, wcValue) {
      var myChart = this.$echarts.init(document.getElementById("loaderPie"));
      var option = {
        title: {
          text: "上料分析",
          left: "center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        color: ["#91cc75", "#5470c6"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          textStyle: {
            color: "#e9ebee",
          },
        },
        series: [
          {
            name: "上料",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            minAngle: wcValue && wclValue ? 20 : "",
            avoidLabelOverlap: true,
            data: [
              { value: wcValue, name: "完成" },
              { value: wclValue, name: "未完成" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    cutOnePie(wclOneValue, wcOneValue) {
      var myChart = this.$echarts.init(document.getElementById("cutOnePie"));

      var option = {
        title: {
          text: "一垮分析",
          left: "center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        color: ["#91cc75", "#fac858"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: false,
          left: "center",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 20,
          itemHeight: 12,
        },
        series: [
          {
            name: "一垮",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            minAngle: wcOneValue && wclOneValue ? 20 : "",
            avoidLabelOverlap: true,
            data: [
              { value: wcOneValue, name: "完成" },
              { value: wclOneValue, name: "未完成" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    cutSecondPie(wclSecondValue, wcSecondValue) {
      var myChart = this.$echarts.init(document.getElementById("cutSecondPie"));

      var option = {
        title: {
          text: "二垮分析",
          left: "center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        color: ["#fac858", "#ee6666"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: false,
          left: "center",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 20,
          itemHeight: 12,
        },
        series: [
          {
            name: "二垮",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            minAngle: wcSecondValue && wclSecondValue ? 20 : "",
            avoidLabelOverlap: true,
            data: [
              { value: wcSecondValue, name: "完成" },
              { value: wclSecondValue, name: "未完成" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    cutThreePie(wclThreeValue, wcThreeValue) {
      var myChart = this.$echarts.init(document.getElementById("cutThreePie"));

      var option = {
        title: {
          text: "三垮分析",
          left: "center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        color: ["#1afffd", "#2e7cff"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: false,
          left: "center",
          textStyle: {
            color: "#e9ebee",
          },
        },
        series: [
          {
            name: "三垮",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            minAngle: wcThreeValue && wclThreeValue ? 20 : "",
            data: [
              { value: wcThreeValue, name: "完成" },
              { value: wclThreeValue, name: "未完成" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    cutSumPie(wclSumValue, wcSumValue) {
      var myChart = this.$echarts.init(document.getElementById("cutSumPie"));

      var option = {
        title: {
          text: "四五六垮",
          left: "center",
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        color: ["#ff81cb", "#2865aa"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          textStyle: {
            color: "#e9ebee",
          },
        },
        series: [
          {
            name: "四五六垮",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            minAngle: wcSumValue && wclSumValue ? 20 : "",
            data: [
              { value: wcSumValue, name: "完成" },
              { value: wclSumValue, name: "未完成" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    loaderBar(zyqDataY, bgData) {
      var myChart = this.$echarts.init(document.getElementById("loaderBar"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(150,150,150,0.2)",
              width: 70,
              type: "solid",
            },
          },
          formatter: (params) => {
            var res = "";
            res =
              params[1].marker +
              params[1].name +
              "<br/>" +
              params[0].seriesName +
              "：" +
              params[0].value +
              "<br/>" +
              params[1].seriesName +
              "：" +
              params[1].value;
            return res;
          },
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "3%",
          bottom: "0",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["一区", "二区", "三区", "四区"],
            axisLabel: {
              color: "#e4e4e4",
            },
          },
        ],
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#e4e4e4",
          },
          data: zyqDataY,
        },
        series: [
          {
            name: "总数量",
            type: "bar",
            barGap: "-100%",
            label: {
              show: false,
            },
            barWidth: 40,
            itemStyle: {
              color: "#2e7cff",
            },
            data: bgData, // 载入背景数据
            z: 0,
          },
          {
            name: "完成数量",
            type: "bar",
            barWidth: 40,
            itemStyle: {
              color: "#1afffd",
            },
            data: zyqDataY, // 载入数据(内含自定义参数)
            z: 1,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    TableLine(legendData, dataX, dataY, seriesData) {
      var myChart = this.$echarts.init(document.getElementById("TableLine"));

      var option = {
        tooltip: {
          trigger: "axis",
        },
        color: [
          "#e15828",
          "#2e7cff",
          "#00c0ef",
          "#5470c6",
          "#ffcb89",
          "#3ba272",
        ],
        legend: {
          data: legendData,
          top: "5%",
          textStyle: {
            color: "#e9ebee",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          top: "10%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dataX,
          axisLabel: {
            color: "#e4e4e4",
          },
          nameTextStyle: {
            color: "#e4e4e4",
            fontSize: 12,
            padding: [0, 0, 0, 0],
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#064585",
            },
          },
          axisLabel: {
            color: "#e4e4e4",
          },
          nameTextStyle: {
            color: "#e4e4e4",
            fontSize: 12,
            padding: [0, 40, 10, 0],
          },
        },
        series: [
          {
            name: "作业区1",
            type: "line",
            stack: "Total",
            data: [
              120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230, 4, 90,
              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
              230,
            ],
          },
          {
            name: "作业区2",
            type: "line",
            stack: "Total",
            data: [
              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
              230,
            ],
          },
          {
            name: "作业区3",
            type: "line",
            stack: "Total",
            data: [
              120, 132, 101, 134, 130, 230, 210, 132, 101, 134, 90, 230, 4, 90,
              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
              230,
            ],
          },
          {
            name: "作业区4",
            type: "line",
            stack: "Total",
            data: [
              220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
              230,
            ],
          },
          {
            name: "作业区5",
            type: "line",
            stack: "Total",
            data: [
              120, 132, 101, 134, 30, 230, 210, 132, 101, 134, 90, 230, 4, 90,
              230, 210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90,
              230,
            ],
          },
          {
            name: "作业区6",
            type: "line",
            stack: "Total",
            data: [
              220, 182, 591, 234, 290, 330, 310, 132, 101, 134, 90, 4, 90, 230,
              210, 132, 101, 134, 90, 304, 90, 230, 210, 132, 101, 134, 90, 230,
              230,
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.amphiPosition-container {
  margin-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  .amphiPosition-box {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 105px);
    .left-box {
      width: 45%;
      height: 100%;
      margin-right: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .left-top-box {
        width: 100%;
        height: 31%;
        .table-sum {
          width: 100%;
          border-collapse: collapse;
          color: #ffffff;
          .radius {
            border-top-left-radius: 10px;
          }
        }
        .table-sum tr td {
          font-size: 12px;
        }
      }
      //   饼图
      .left-center-box {
        width: 100%;
        height: 33%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .loaderPie,
        .cutOnePie,
        .cutSecondPie,
        .cutThreePie,
        .cutSumPie {
          width: 100%;
          height: 90%;
        }
      }
      // 上料各作业区柱状图
      .left-bottom-box {
        height: 33%;
        padding-top: 2%;
        .loaderBar {
          height: 80%;
        }
      }
    }
    .right-box {
      width: 55%;
      height: 100%;
      //   折线图
      .right-top-box {
        height: 45%;
        .TableLine {
          width: 100%;
          height: 90%;
        }
      }
      .right-center-box {
        margin-top: 2%;
        margin-bottom: 3%;
        .right-center-title {
          color: #fff;
          text-align: center;
          font-size: 16px;
          font-weight: bold;
        }
      }
      //   滚动表格
      .right-bottom-box {
        height: 37%;
      }
    }
  }
  // 共用
  .border-out {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px #0174f5 solid;
    padding: 1px;
    box-sizing: border-box;
  }
  .border-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #016ae0;
    border-radius: 10px;
    background-color: rgba(2, 8, 23, 0.54);
    overflow: hidden;
  }

  .box-top {
    margin-top: 5px;
  }
  .desc-title {
    color: #fff;
    text-align: center;
    margin-top: 2vh;
    font-size: 12px;
  }
}
</style>