<template>
  <!-- 线表分析 -->
  <div class="lineTableAnalysis-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="lineTableAnalysis-box">
      <div class="left-box">
        <div class="border-out">
          <div class="border-inner">
            <!-- 线标分析-折线图 -->
            <div class="left-top-box">
              <div class="left-top-title">线表分析</div>
              <div id="TableLine" class="TableLine"></div>
            </div>
          </div>
        </div>
        <div class="border-out box-top">
          <div class="border-inner">
            <!-- 线标分析 -柱状图 -->
            <div class="left-bottom-box">
              <div class="left-bottom-title">线表分析</div>
              <div id="TableBar" class="TableBar"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="border-out">
          <div class="border-inner">
            <!-- 完成量-与未完成量 -->
            <div class="right-top-box">
              <div class="right-top-title">线表分析</div>
              <div id="ShipBar" class="ShipBar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { kbanXbjh, xbgtt } from "@/api/lineTableAnalysis";
export default {
  name: "LineTableAnalysis",
  data() {
    return {
      formData: {
        year: 2024,
      },
      xbjhList: [],
      ydjhList: [],
      monthList: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    };
  },
  mounted() {
    this.queryBtn();
  },
  methods: {
    // 根据年份查询
    queryBtn() {
      this.kbanXbjh();
      this.xbgtt();
    },
    kbanXbjh() {
      kbanXbjh({
        nf: this.formData.year,
      }).then((res) => {
        const ydjhList = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        res.data.ydjh.forEach((item) => {
          ydjhList[item.mon - 1] = item.zl;
        });
        this.xbjhList = res.data.xbjh;
        this.ydjhList = ydjhList;
        // 线表分析折线图
        this.TableLine();
        // 线表分析柱状图
        this.TableBar();
      });
    },
    xbgtt() {
      xbgtt({
        nf: this.formData.year,
      }).then((res) => {
        let xbgttList = res.data.reduce((prev, current) => {
          const key = current.dcCh;
          if (!prev[key]) {
            prev[key] = [];
          }
          prev[key].push(current);
          return prev;
        }, {});

        // 获取所有船只
        let dataY = Object.keys(xbgttList);

        let xbListCopy = JSON.parse(JSON.stringify(xbgttList));
        let ydListCopy = JSON.parse(JSON.stringify(xbgttList));

        // 获取日期
        let xbStartData = [];
        let xbEndData = [];
        let ydStartData = [];
        let ydEndData = [];

        dataY.forEach((item) => {
          xbListCopy[item] = xbListCopy[item].filter((em) => {
            return em.zl >= 0;
          });
          ydListCopy[item] = ydListCopy[item].filter((em) => {
            return em.jhzl >= 0;
          });

          xbStartData.push(
            xbListCopy[item] && xbListCopy[item][0].yf
              ? new Date(
                  this.$moment().format("yyyy") +
                    "/" +
                    xbListCopy[item][0].yf +
                    "/01"
                )
              : ""
          );
          xbEndData.push(
            xbListCopy[item] && xbListCopy[item].length > 0
              ? new Date(
                  this.$moment().format("yyyy") +
                    "/" +
                    xbListCopy[item][xbListCopy[item].length - 1].yf +
                    "/01"
                )
              : ""
          );

          // =====
          ydStartData.push(
            ydListCopy[item] && ydListCopy[item].length > 0
              ? new Date(
                  this.$moment().format("yyyy") +
                    "/" +
                    ydListCopy[item][0].yf +
                    "/01"
                )
              : ""
          );

          ydEndData.push(
            ydListCopy[item] && ydListCopy[item].length > 0
              ? new Date(
                  this.$moment().format("yyyy") +
                    "/" +
                    ydListCopy[item][ydListCopy[item].length - 1].yf +
                    "/01"
                )
              : ""
          );
        });
        // 船只分析甘特图
        this.ShipBar(dataY, xbStartData, xbEndData, ydStartData, ydEndData);
      });
    },
    TableLine() {
      var myChart = this.$echarts.init(document.getElementById("TableLine"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        color: ["#1afffd", "#5470c6"],
        legend: {
          data: ["线表计划", "月度计划"],
          top: "5%",
          textStyle: {
            color: "#e9ebee",
          },
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "5%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.monthList,
          axisLabel: {
            color: "#e4e4e4",
          },
          nameTextStyle: {
            color: "#e4e4e4",
            fontSize: 12,
            padding: [0, 0, 0, 0],
          },
        },
        yAxis: {
          name: "重量（吨）",
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#064585",
            },
          },
          axisLabel: {
            color: "#e4e4e4",
          },
          nameTextStyle: {
            color: "#e4e4e4",
            fontSize: 12,
            padding: [0, 30, 10, 0],
          },
        },
        series: [
          {
            name: "线表计划",
            type: "line",
            data: this.xbjhList,
          },
          {
            name: "月度计划",
            type: "line",
            data: this.ydjhList,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    TableBar() {
      var myChart = this.$echarts.init(document.getElementById("TableBar"));

      var option = {
        color: ["#1afffd", "#2e7cff"],
        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: [
          {
            name: "重量（吨）",
            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: this.xbjhList,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "Max",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
                {
                  type: "min",
                  name: "Min",
                  label: {
                    show: true,
                    color: "#fff",
                  },
                },
              ],
            },
          },
          {
            name: "月度计划",
            type: "bar",
            data: this.ydjhList,
            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();
      });
    },
    ShipBar(dataY, xbStartData, xbEndData, ydStartData, ydEndData) {
      var myChart = this.$echarts4.init(document.getElementById("ShipBar"));
      var option = {
        legend: {
          left: "center",
          top: "2%",
          data: ["线表计划", "月度计划"],
          textStyle: {
            color: "#e9ebee",
          },
        },
        grid: {
          containLabel: true,
          top: "6%",
          left: "2%",
          right: "4%",
          bottom: "6%",
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
          textStyle: {
            color: "#91a0be",
          },
          axisPointer: {
            type: "line", // 使用线型指示器
            lineStyle: {
              color: "#fff", // 设置线的颜色
              width: 1,
              type: "dashed",
            },
          },
          formatter: (params) => {
            if (params && params.length) {
              var xbRes = "";
              var ydRes = "";
              var date0 = this.$moment(params[0].data).format("yyyy-MM");
              var date1 =
                params.length > 1 && params[1].data
                  ? this.$moment(params[1].data).format("yyyy-MM")
                  : "";
              var date2 =
                params.length > 2 && params[2].data
                  ? this.$moment(params[2].data).format("yyyy-MM")
                  : "";
              var date3 =
                params.length > 3 && params[3].data
                  ? this.$moment(params[3].data).format("yyyy-MM")
                  : "";

              if (date0 || date1) {
                xbRes =
                  params[0].name +
                  "</br>" +
                  params[1].marker +
                  params[1].seriesName +
                  ":</br>" +
                  date0 +
                  "~" +
                  date1 +
                  "</br>";
              } else {
                xbRes = "";
              }
              if (date2 || date3) {
                ydRes =
                  params[3].marker +
                  params[3].seriesName +
                  ":</br>" +
                  date2 +
                  "~" +
                  date3 +
                  "</br>";
              } else {
                ydRes = "";
              }
              return xbRes + ydRes;
            }
          },
        },
        xAxis: {
          type: "time",
          max: new Date("2024-12"),
          min: new Date("2024-01"),
          interval: 3600 * 24 * 1001 * 30.7,
          axisLabel: {
            show: true,
            color: "#e4e4e4",
            formatter: (value) => {
              var date = new Date(value);
              // 获取月份，并加1因为 JavaScript 中月份是从0开始的
              var month = date.getMonth() + 1;
              // 返回月份或不显示
              return month === 0 || month === 13 ? "" : month + "月";
            },
          },
          axisLine: {
            lineStyle: {
              color: "#616878",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: "#1350b0",
            },
          },
          axisTick: {
            show: false, // 设置为false去掉刻度线
          },
        },
        yAxis: {
          data: dataY,
          axisLabel: {
            color: "#e4e4e4",
          },
          axisLine: {
            lineStyle: {
              color: "#616878",
            },
          },
          // axisTick: {
          //   show: false, // 设置为false去掉刻度线
          // },
        },
        series: [
          {
            name: "线表计划（隐藏）",
            type: "bar",
            stack: "sum1",
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
              },
            },
            data: xbStartData,
          },
          {
            name: "线表计划",
            type: "bar",
            stack: "sum1",
            //修改地方2
            itemStyle: {
              normal: {
                color: "#1afffd",
              },
            },
            data: xbEndData,
          },
          {
            name: "月度计划（隐藏）",
            type: "bar",
            stack: "sum2",
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
              },
            },
            data: ydStartData,
          },
          {
            name: "月度计划",
            type: "bar",
            stack: "sum2",
            //修改地方3
            itemStyle: {
              normal: {
                color: "#2e7cff",
              },
            },
            data: ydEndData,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.lineTableAnalysis-container {
  margin-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  transition: opacity 1003s;
  .lineTableAnalysis-box {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 105px);
    .left-box {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      //   线表分析折线图
      .left-top-box {
        height: 100%;
        .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;
        }
        .TableLine {
          width: 100%;
          height: calc(100% - 24px);
        }
      }
      //   线表分析柱状图
      .left-bottom-box {
        height: 100%;
        .left-bottom-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;
        }
        .TableBar {
          width: 100%;
          height: calc(100% - 24px);
        }
      }
    }
    .right-box {
      width: 50%;
      height: 100%;
      margin-left: 5px;
      //   线表分析甘特图
      .right-top-box {
        height: 100%;
        .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;
        }
        .ShipBar {
          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>
