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

<template>
  <!-- 月度计划分析 -->
  <div class="monthPlan-container">
    <div class="monthPlan-box">
      <div class="left-box">
        <div class="border-out">
          <div class="border-inner">
            <!-- 线标分析-折线图 -->
            <div class="left-top-box">
              <div class="left-top-title">月度计划汇总表</div>
              <table class="table-sum">
                <tr>
                  <td class="table-sum-title">图纸数量</td>
                  <td class="table-sum-text">
                    {{ tableSumObj.tzsl ? tableSumObj.tzsl : 0 }}张
                  </td>
                  <td class="table-sum-title">来图数量</td>
                  <td class="table-sum-text">
                    {{ tableSumObj.ltsl ? tableSumObj.ltsl : 0 }}张
                  </td>
                </tr>
                <tr>
                  <td class="table-sum-title">需求重量</td>
                  <td class="table-sum-text">
                    {{ tableSumObj.xqzl ? hasDot(tableSumObj.xqzl) : 0 }}吨
                  </td>
                  <td class="table-sum-title">订货清单重量</td>
                  <td class="table-sum-text">
                    {{ tableSumObj.dhzl ? hasDot(tableSumObj.dhzl) : 0 }}吨
                  </td>
                </tr>
                <tr>
                  <td class="table-sum-title">月度计划重量</td>
                  <td class="table-sum-text">
                    {{ tableSumObj.jhzl ? hasDot(tableSumObj.jhzl) : 0 }}吨
                  </td>
                  <td class="table-sum-title">完成重量</td>
                  <td class="table-sum-text">
                    {{ tableSumObj.wczl ? hasDot(tableSumObj.wczl) : 0 }}吨
                  </td>
                </tr>
                <tr v-for="(item, index) in tableSumObj.detail" :key="index">
                  <td class="table-sum-title">船号</td>
                  <td class="table-sum-text">
                    {{ item.dcCh }}
                  </td>
                  <td class="table-sum-title">批次数量</td>
                  <td class="table-sum-text">
                    {{ item.pcsl ? item.pcsl : 0 }}张
                  </td>
                </tr>
              </table>
            </div>
            <!-- <div class="left-bottom-box">
              <table class="table-sum">
              </table>
            </div> -->
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="right-top-box">
          <div class="border-out">
            <div class="border-inner">
              <!-- 柱状图 -->
              <div class="right-top-title">月度计划数据分析</div>
              <el-row class="row">
                <el-col :span="24">
                  <div id="DrawingBar" class="drawingBar"></div>
                </el-col>
                <!-- <el-col :span="12">
                  <div id="ForwardDemandBar" class="forwardDemandBar"></div
                ></el-col> -->
              </el-row>
              <!-- <el-row class="row">
                <el-col :span="12">
                  <div id="MonthlyPlanBar" class="monthlyPlanBar"></div
                ></el-col>
                <el-col :span="12"
                  ><div id="FinishBar" class="finishBar"></div>
                </el-col>
              </el-row> -->
            </div>
          </div>
        </div>
        <div class="right-bottom-box">
          <div class="border-out">
            <div class="border-inner">
              <!-- 饼图 -->
              <div class="right-bottom-title">月度计划数据分析</div>
              <el-row class="row">
                <el-col :span="4">
                  <div id="DrawingPie" class="drawingPie"></div>
                </el-col>
                <el-col :span="4" :offset="1">
                  <div id="ForwardDemandPie" class="forwardDemandPie"></div>
                </el-col>
                <el-col :span="4" :offset="1">
                  <div id="PlanFinishPie" class="planFinishPie"></div>
                </el-col>
                <el-col :span="4" :offset="1">
                  <div id="MonthlyPlanPie" class="monthlyPlanPie"></div>
                </el-col>
                <el-col :span="4">
                  <div id="FinishPie" class="finishPie"></div
                ></el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { zrcTable } from "@/api/monthPlan";
import { hasDot } from "@/utils/tool";
export default {
  name: "MonthPlan",
  data() {
    return {
      hasDot,
      tableSumList: [],
      tableSumObj: {},
      xbjhList: [],
      ydjhList: [],
      monthList: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    };
  },
  mounted() {
    this.zrcTable();
  },
  methods: {
    zrcTable() {
      zrcTable().then((res) => {
        this.tableSumObj = res.data;
        var bgData = [res.data.xqzl, res.data.xqzl, res.data.xqzl, res.data.xqzl];
        var zlData = [ res.data.xqzl,res.data.dhzl, res.data.jhzl, res.data.wczl];

        this.DrawingBar(bgData,zlData);
        // this.ForwardDemandBar();
        // this.MonthlyPlanBar();
        // this.finishBar();
        this.drawingPie(res.data.ltsl, res.data.tzsl);
        this.planFinishPie(res.data.jhzl, res.data.wczl);
        this.forwardDemandPie(res.data.xqzl, res.data.dhzl);
        this.monthlyPlanPie(res.data.xqzl, res.data.jhzl);
        this.finishPie(res.data.xqzl, res.data.wczl);
      });
    },
    DrawingBar(bgData,zlData) {
      var myChart = this.$echarts.init(document.getElementById("DrawingBar"));

     
      var option = {
         // color: ["#2e7cff", "#fc8452"],
        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].name +
              "：" +
              params[1].value;
            return res;
          },
        },
        grid: {
          top: "10%",
          left: "2%",
          right: "2%",
          bottom: "15",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["需求重量", "订货重量", "计划重量", "完成重量"],
            axisLabel: {
              color: "#e4e4e4",
            },
          },
        ],
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#e4e4e4",
          },
          data: zlData,
        },
        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: "#fc8452",
            },
            data: zlData, // 载入数据(内含自定义参数)
            z: 1,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    ForwardDemandBar() {
      var myChart = this.$echarts.init(
        document.getElementById("ForwardDemandBar")
      );

      var option = {
        color: ["#2e7cff", "#91cd76"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["线表计划", "月度计划"],
          top: "5%",
          textStyle: {
            color: "#e9ebee",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "5%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.monthList,
            axisLabel: {
              color: "#e4e4e4",
            },
            nameTextStyle: {
              color: "#e4e4e4",
              fontSize: 12,
              padding: [0, 0, 0, 0],
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
              lineStyle: {
                color: "#064585",
                // type: "dashed"
              },
            },
            axisLabel: {
              color: "#e4e4e4",
            },
            nameTextStyle: {
              color: "#e4e4e4",
              fontSize: 12,
              padding: [0, 30, 10, 0],
            },
          },
        ],
        series: [
          {
            name: "线表计划",
            type: "bar",
            data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
          },
          {
            name: "月度计划",
            type: "bar",
            data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    MonthlyPlanBar() {
      var myChart = this.$echarts.init(
        document.getElementById("MonthlyPlanBar")
      );

      var option = {
        color: ["#2e7cff", "#feb602"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["线表计划", "月度计划"],
          top: "5%",
          textStyle: {
            color: "#e9ebee",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "5%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.monthList,
            axisLabel: {
              color: "#e4e4e4",
            },
            nameTextStyle: {
              color: "#e4e4e4",
              fontSize: 12,
              padding: [0, 0, 0, 0],
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
              lineStyle: {
                color: "#064585",
                // type: "dashed"
              },
            },
            axisLabel: {
              color: "#e4e4e4",
            },
            nameTextStyle: {
              color: "#e4e4e4",
              fontSize: 12,
              padding: [0, 30, 10, 0],
            },
          },
        ],
        series: [
          {
            name: "线表计划",
            type: "bar",
            data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
          },
          {
            name: "月度计划",
            type: "bar",
            data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    finishBar() {
      var myChart = this.$echarts.init(document.getElementById("FinishBar"));

      var option = {
        color: ["#2e7cff", "#1afffd"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["线表计划", "月度计划"],
          top: "5%",
          textStyle: {
            color: "#e9ebee",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "5%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.monthList,
            axisLabel: {
              color: "#e4e4e4",
            },
            nameTextStyle: {
              color: "#e4e4e4",
              fontSize: 12,
              padding: [0, 0, 0, 0],
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
              lineStyle: {
                color: "#064585",
                // type: "dashed"
              },
            },
            axisLabel: {
              color: "#e4e4e4",
            },
            nameTextStyle: {
              color: "#e4e4e4",
              fontSize: 12,
              padding: [0, 30, 10, 0],
            },
          },
        ],
        series: [
          {
            name: "线表计划",
            type: "bar",
            data: [34, 45, 67, 34, 45, 34, 12, 67, 34, 12, 34, 12],
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
          },
          {
            name: "月度计划",
            type: "bar",
            data: [34, 45, 67, 34, 12, 34, 45, 67, 34, 12, 34, 12],
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    drawingPie(ltValue, tzValue) {
      var myChart = this.$echarts.init(document.getElementById("DrawingPie"));
      var option = {
        title: {
          text: "来图与图纸分析",
          left: "center",
          bottom: "10%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#ff81cb", "#ff81cb"],
        legend: {
          show: true,
          left: "center",
          top: "10%",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 25,
          itemHeight: 15,
        },
        series: [
          {
            name: "来图与图纸分析",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            minAngle: tzValue && tzValue ? 20 : "",
            avoidLabelOverlap: true,
            data: [
              { value: ltValue, name: "来图数量" },
              { value: tzValue, name: "图纸数量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    planFinishPie(jhValue, wcValue) {
      var myChart = this.$echarts.init(
        document.getElementById("PlanFinishPie")
      );

      var option = {
        title: {
          text: "计划与完成分析",
          left: "center",
          bottom: "10%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        color: ["#2e7cff", "#91cc75"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: true,
          left: "center",
          top: "10%",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 25,
          itemHeight: 15,
        },
        series: [
          {
            name: "计划与完成分析",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            minAngle: wcValue && wcValue ? 20 : "",
            avoidLabelOverlap: true,
            data: [
              { value: jhValue, name: "计划重量" },
              { value: wcValue, name: "完成重量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    forwardDemandPie(xqValue, dhValue) {
      var myChart = this.$echarts.init(
        document.getElementById("ForwardDemandPie")
      );

      var option = {
        title: {
          text: "需求与订货分析",
          left: "center",
          bottom: "10%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        color: ["#ff5c58", "#06b8f8"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: true,
          left: "center",
          top: "10%",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 25,
          itemHeight: 15,
        },
        series: [
          {
            name: "需求与订货分析",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            minAngle: dhValue && dhValue ? 20 : "",
            avoidLabelOverlap: true,
            data: [
              { value: xqValue, name: "需求重量" },
              { value: dhValue, name: "订货重量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    monthlyPlanPie(xqValue, jhValue) {
      var myChart = this.$echarts.init(
        document.getElementById("MonthlyPlanPie")
      );

      var option = {
        title: {
          text: "需求与月度计划分析",
          left: "center",
          bottom: "10%",
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#5470c6", "#ffcb89"],
        legend: {
          show: true,
          left: "center",
          top: "10%",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 25,
          itemHeight: 15,
        },
        series: [
          {
            name: "需求与月度计划分析",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            minAngle: jhValue && jhValue ? 20 : "",
            avoidLabelOverlap: true,
            data: [
              { value: xqValue, name: "需求重量" },
              { value: jhValue, name: "计划重量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    finishPie(xqValue, wcValue) {
      var myChart = this.$echarts.init(document.getElementById("FinishPie"));
      var option = {
        title: {
          text: "需求与完成分析",
          left: "center",
          // left:"center",
          bottom: "10%",
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
          },
        },
        // color: ["#ff81cb", "#2865aa"],
        color: ["#1afffd", "#2e7cff"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: true,
          left: "center",
          top: "10%",
          textStyle: {
            color: "#e9ebee",
          },
          itemWidth: 25,
          itemHeight: 15,
        },
        series: [
          {
            name: "需求与完成分析",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            minAngle: wcValue && wcValue ? 20 : "",
            minAngle: 20,
            avoidLabelOverlap: true,
            data: [
              { value: xqValue, name: "需求重量" },
              { value: wcValue, name: "完成重量" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.monthPlan-container {
  margin-top: 2%;
  padding-left: 5px;
  padding-right: 5px;
  .monthPlan-box {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 85px);
    .left-box {
      width: 35%;
      height: 100%;
      .left-top-box {
        .left-top-title {
          width: 32%;
          height: 24px;
          background-image: url("@/assets/image/tit01s.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin: 0 auto;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          margin: 0 auto;
        }
        .table-sum {
          width: 96%;
          margin-left: 2%;
          margin-top: 2%;
          border-collapse: collapse;
          color: #ffffff;
          .table-sum-title {
            font-size: 14px;
          }
          .table-sum-text {
            font-weight: bold;
            font-size: 16px;
          }
        }
      }
      .left-bottom-box {
        // border: 1px solid red;
        .row-border {
          color: #fff;
          text-align: left;
          font-size: 0.8rem;
          .col-right-border {
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            border-right: 1px solid #3490ba;
            border-top: 1px solid #3490ba;
          }
          .col-right-border-text {
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            border-top: 1px solid #3490ba;
          }
        }
      }
    }
    .right-box {
      width: 65%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 5px;
      //   柱状图
      .right-top-box {
        height: 50%;
        margin-bottom: 5px;
        .right-top-title {
          width: 32%;
          height: 24px;
          background-image: url("@/assets/image/tit01s.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          margin: 0 auto;
        }
        .row {
          height: calc(100% - 24px);
          .el-col-24 {
            width: 100%;
            height: 100%;

            .drawingBar,
            .forwardDemandBar,
            .monthlyPlanBar,
            .finishBar {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      //   饼图
      .right-bottom-box {
        height: 50%;
        .right-bottom-title {
          width: 32%;
          height: 24px;
          background-image: url("@/assets/image/tit01s.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          margin: 0 auto;
        }
        .row {
          height: calc(100% - 24px);
          .el-col-4 {
            height: 100%;
            .drawingPie,
            .forwardDemandPie,
            .planFinishPie,
            .monthlyPlanPie,
            .finishPie {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }

  .box-top {
    margin-top: 5px;
  }

  .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;
  }
  .border-inner {
    background-color: rgba(2, 8, 23, 0.1);
  }
}
</style>