<template>
  <div class="testdiv">
    <div class="top_title">
      <span>{{ title }}</span>
      <img :src="imgLogo" class="logo" @click="back" />
      <div class="times_bg">{{ nowTime }}</div>
    </div>
    <div class="middle_bottom">
      <Row class="middle">
        <i-col class="middle_left_box" span="11">
          <div class="title">单值图</div>
          <div class="chart_l_t" id="chart_l_t"></div>
        </i-col>
        <i-col class="middle_right_box" span="11">
          <div class="title">样本数据</div>
          <div class="chart_r_t" id="chart_r_t"></div>
        </i-col>
      </Row>
      <Row class="bottom">
        <i-col class="bottom_left_box" span="11">
          <div class="title">移动极差图</div>
          <div class="chart_l_b" id="chart_l_b"></div>
        </i-col>
        <i-col class="bottom_right_box" span="11">
          <div class="title">样本参数</div>
          <div class="bottom_right">
            <table border="0" class="bottom_right_table">
              <tr>
                <td>样本数量</td>
                <td>{{ sampleCount }}小时</td>
              </tr>
              <tr>
                <td>样本均值</td>
                <td>{{ sampleMean }}小时</td>
              </tr>
              <tr>
                <td>样本标准差</td>
                <td>{{ sigma }}小时</td>
              </tr>
              <tr>
                <td>Cp</td>
                <td>{{ cp }}小时</td>
              </tr>
              <tr>
                <td>Cpk</td>
                <td>{{ cpk }}小时</td>
              </tr>
            </table>
            <table border="0" class="bottom_right_table">
              <tr>
                <td>规格上限</td>
                <td>{{ right_foot_online }}小时</td>
              </tr>
              <tr>
                <td>规格中值</td>
                <td>{{ parameterValue }}小时</td>
              </tr>
              <tr>
                <td>规格下限</td>
                <td>{{ right_foot_offline }}小时</td>
              </tr>
              <tr>
                <td>Cpu</td>
                <td>{{ cpu }}小时</td>
              </tr>
              <tr>
                <td>Cpl</td>
                <td>{{ cpl }}小时</td>
              </tr>
            </table>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      imgLogo: require("../../../static/images/siger.png"),
      nowTime: moment(new Date().getTime()).format("YYYY-MM-DD"),
      sampleCount: "",
      sampleMean: "",
      sigma: "",
      cp: "",
      cpk: "",
      right_foot_online: "",
      parameterValue: "",
      right_foot_offline: "",
      cpu: "",
      cpl: "",
    };
  },
  computed: {
    ...mapState(["user"]),
    combId() {
      return this.$route.query.combId;
    },
    title() {
      return this.$route.query.title;
    },
  },
  created() {
    if (
      this.user.logo !== "" &&
      this.user.logo !== null &&
      this.user.logo !== undefined
    ) {
      this.imgLogo = this.user.logo;
    }
  },
  mounted() {
    let _this = this;
    let query = _this.$route.query;
    let params = {
      patial_code: query.patial_code,
      page_id: query.pageId,
      projectid: _this.user.projectId,
    };
    _this.axios
      .request({
        url: "/dashboard/DashboardShow/getalldata",
        params,
        method: "get",
      })
      .then((res) => {
        let result = res.data;
        if (result.ret == 1) {
          let data = result.data;
          let accQualityData_left_middle = data.accQualityData_left_middle;
          let accQualityData_left_bottom = data.accQualityData_left_bottom;
          let accQualityData_right_top = data.accQualityData_right_top;
          let accQualityData_right_bottom_left =
            data.accQualityData_right_bottom_left;
          let accQualityData_right_bottom_right =
            data.accQualityData_right_bottom_right;
          _this.renderLT(accQualityData_left_middle);
          _this.renderLB(accQualityData_left_bottom);
          _this.renderRT(accQualityData_right_top);
          _this.renderRB(
            accQualityData_right_bottom_left,
            accQualityData_right_bottom_right
          );
        } else {
          window_warning(_this.$t("" + result.msg));
          return false;
        }
      });
    return false;
    this.renderChartLT();
    this.renderChartRT();
    this.renderChartLB();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    renderLT(res) {
      let option = {
        title: false,
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "4%",
          right: "12%",
          bottom: "4%",
          containLabel: true,
        },
        legend: {
          data: ["UCL", "Sample", "X-bar", "LCL"],
          textStyle: {
            color: "#fff",
          },
        },
        toolbox: {
          show: true,
        },
        color: ["#E94242", "#4D90FE", "#FFC700", "#E94242"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.xAxis,
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1,
            },
          },
        },
        yAxis: [
          {
            type: "value",
            scale: true,
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
          },
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            name: "UCL",
            type: "line",
            data: res.uclArray,
            smooth: false, // 关键点，为true是不支持虚线的，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dotted",
                },
              },
            },
            markLine: {
              name: "UCL",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#E94242",
                    width: 2,
                  },
                  label: {
                    show: true,
                    formatter: "UCL：" + res.uclArray[0],
                  },
                },
              },
              data: [
                [
                  {
                    coord: [0, res.uclArray[0]],
                    label: { normal: { show: true } },
                  },
                  {
                    coord: [res.uclArray.length - 1, res.uclArray[0]],
                    label: { normal: { show: true } },
                  },
                ],
              ],
            },
          },
          {
            name: "Sample",
            type: "line",
            data: res.sample,
          },
          {
            name: "X-bar",
            type: "line",
            data: res.sampleMeanArray,
            smooth: false, // 关键点，为true是不支持虚线的，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dotted",
                },
              },
            },
            markLine: {
              name: "X-bar",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#FFC700",
                    width: 2,
                  },
                  label: {
                    show: true,
                    formatter: "X-bar：" + res.sampleMeanArray[0],
                  },
                },
              },
              data: [
                [
                  {
                    coord: [0, res.sampleMeanArray[0]],
                    label: { normal: { show: true } },
                  },
                  {
                    coord: [
                      res.sampleMeanArray.length - 1,
                      res.sampleMeanArray[0],
                    ],
                    label: { normal: { show: true } },
                  },
                ],
              ],
            },
          },
          {
            name: "LCL",
            type: "line",
            data: res.lclArray,
            smooth: false, // 关键点，为true是不支持虚线的，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dotted",
                },
              },
            },
            markLine: {
              name: "LCL",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#E94242",
                    width: 2,
                  },
                  label: {
                    show: true,
                    formatter: "LCL：" + res.lclArray[0],
                  },
                },
              },
              data: [
                [
                  {
                    coord: [0, res.lclArray[0]],
                    label: { normal: { show: true } },
                  },
                  {
                    coord: [res.lclArray.length - 1, res.lclArray[0]],
                    label: { normal: { show: true } },
                  },
                ],
              ],
            },
          },
        ],
      };
      if (document.getElementById("chart_l_t")) {
        echarts.init(document.getElementById("chart_l_t")).setOption(option);
      }
    },
    renderLB(res) {
      let option = {
        title: false,
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "4%",
          right: "12%",
          bottom: "4%",
          containLabel: true,
        },
        legend: {
          data: ["UCL", "Range", "MR-bar", "LCL"],
          textStyle: {
            color: "#fff",
          },
        },
        toolbox: {
          show: true,
        },
        color: ["#E94242", "#4D90FE", "#FFC700", "#E94242"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.xAxis,
          axisLine: {
            lineStyle: {
              color: "#fff",
              width: 1,
            },
          },
        },
        yAxis: [
          {
            type: "value",
            scale: true,
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
          },
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            name: "UCL",
            type: "line",
            data: res.rangeUCLArray,
            smooth: false, // 关键点，为true是不支持虚线的，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dotted",
                },
              },
            },
            markLine: {
              name: "UCL",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#E94242",
                    width: 2,
                  },
                  label: {
                    show: true,
                    formatter: "UCL：" + res.rangeUCLArray[0],
                  },
                },
              },
              data: [
                [
                  {
                    coord: [0, res.rangeUCLArray[0]],
                    label: { normal: { show: true } },
                  },
                  {
                    coord: [res.rangeUCLArray.length - 1, res.rangeUCLArray[0]],
                    label: { normal: { show: true } },
                  },
                ],
              ],
            },
          },
          {
            name: "Range",
            type: "line",
            data: res.range,
          },
          {
            name: "MR-bar",
            type: "line",
            data: res.rangeMeanArray,
            smooth: false, // 关键点，为true是不支持虚线的，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dotted",
                },
              },
            },
            markLine: {
              name: "MR-bar",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#FFC700",
                    width: 2,
                  },
                  label: {
                    show: true,
                    formatter: "MR-bar：" + res.rangeMeanArray[0],
                  },
                },
              },
              data: [
                [
                  {
                    coord: [0, res.rangeMeanArray[0]],
                    label: { normal: { show: true } },
                  },
                  {
                    coord: [
                      res.rangeMeanArray.length - 1,
                      res.rangeMeanArray[0],
                    ],
                    label: { normal: { show: true } },
                  },
                ],
              ],
            },
          },
          {
            name: "LCL",
            type: "line",
            data: res.rangeLCLArray,
            smooth: false, // 关键点，为true是不支持虚线的，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dotted",
                },
              },
            },
            markLine: {
              name: "LCL",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#E94242",
                    width: 2,
                  },
                  label: {
                    show: true,
                    formatter: "LCL：" + res.rangeLCLArray[0],
                  },
                },
              },
              data: [
                [
                  {
                    coord: [0, res.rangeLCLArray[0]],
                    label: { normal: { show: true } },
                  },
                  {
                    coord: [res.rangeLCLArray.length - 1, res.rangeLCLArray[0]],
                    label: { normal: { show: true } },
                  },
                ],
              ],
            },
          },
        ],
      };
      if (document.getElementById("chart_l_b")) {
        echarts.init(document.getElementById("chart_l_b")).setOption(option);
      }
    },
    renderRT(res) {
      let option = {
        title: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: res[1],
            axisLabel: {
              interval: 0,
              rotate: 30,
              margin: 10,
              formatter: function (value) {
                return Math.round(value * 10000) / 10000;
              },
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisTick: {
              alignWithLabel: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
          },
          {
            axisLabel: {
              interval: "auto",
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            barCategoryGap: 0,
            data: res[0],
            itemStyle: {
              normal: {
                color: "#4F81BD",
              },
            },
          },
          {
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  fontWeight: "bold",
                  color: "#000",
                },
                lineStyle: {
                  width: 4,
                },
              },
            },
            yAxisIndex: 1,
            type: "line",
          },
        ],
      };
      if (document.getElementById("chart_r_t")) {
        echarts.init(document.getElementById("chart_r_t")).setOption(option);
      }
    },
    renderRB(left, right) {
      this.sampleCount = left.sampleCount;
      this.sampleMean = left.sampleMean;
      this.sigma = left.sigma;
      this.cp = left.cp;
      this.cpk = left.cpk;
      this.right_foot_online = right.right_foot_online;
      this.parameterValue = right.parameterValue;
      this.right_foot_offline = right.right_foot_offline;
      this.cpu = right.cpu;
      this.cpl = right.cpl;
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log(from);
    if (from.path == "/") {
      next((vm) => {
        vm.$router.replace({ name: "8000063", query: { combId: vm.combId } });
      });
      return false;
    }
    next();
  },
};
</script>
<style lang="less" scoped>
.middle {
  margin-top: 24px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .middle_left_box {
    height: 100%;

    .title {
      height: 32px;
      background: url("../../../static/images/u6.png") center center no-repeat;
      background-size: 100% 100%;
      font-size: 20px;
      font-weight: bolder;
      color: #b1e2ff;
      line-height: 32px;
      padding-left: 20px;
      box-sizing: border-box;
      margin-bottom: 12px;
    }

    .chart_l_t {
      height: 90%;
      padding: 5px;
      background: url("../../../static/images/u9.png") center center no-repeat;
      background-size: 100% 100%;
    }
  }

  .middle_right_box {
    height: 100%;

    .title {
      height: 32px;
      background: url("../../../static/images/u6.png") center center no-repeat;
      background-size: 100% 100%;
      font-size: 20px;
      font-weight: bolder;
      color: #b1e2ff;
      line-height: 32px;
      padding-left: 20px;
      box-sizing: border-box;
      margin-bottom: 12px;
    }

    .chart_r_t {
      height: 90%;
      padding: 5px;
      background: url("../../../static/images/u9.png") center center no-repeat;
      background-size: 100% 100%;
    }
  }
}

.bottom {
  margin-top: 24px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .bottom_left_box {
    height: 100%;

    .title {
      height: 32px;
      background: url("../../../static/images/u6.png") center center no-repeat;
      background-size: 100% 100%;
      font-size: 20px;
      font-weight: bolder;
      color: #b1e2ff;
      line-height: 32px;
      padding-left: 20px;
      box-sizing: border-box;
      margin-bottom: 12px;
    }

    .chart_l_b {
      height: 90%;
      padding: 5px;
      background: url("../../../static/images/u9.png") center center no-repeat;
      background-size: 100% 100%;
    }
  }

  .bottom_right_box {
    height: 100%;

    .title {
      height: 32px;
      background: url("../../../static/images/u6.png") center center no-repeat;
      background-size: 100% 100%;
      font-size: 20px;
      font-weight: bolder;
      color: #b1e2ff;
      line-height: 32px;
      padding-left: 20px;
      box-sizing: border-box;
      margin-bottom: 12px;
    }

    .bottom_right {
      height: 90%;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .bottom_right_table {
        height: 100%;
        background: url("../../../static/images/u10.png") center center
          no-repeat;
        background-size: 100% 100%;
        color: #b1e2ff;
        font-size: 18px;
        width: 49%;
        tr {
          td {
            padding: 12px 16px;
          }
        }
      }
    }
  }
}

.standard {
  display: flex;
  color: #ffffff;
  font-size: 18px;
  div {
    width: 50%;
  }
  > div {
    > div {
      margin-bottom: 12px;
    }
  }
}

.dataM {
  margin-top: 10px;
  color: #ffffff;
  font-size: 18px;
  h2 {
    text-align: center;
  }
  > div {
    display: flex;
    > div {
      width: 50%;
    }
  }
}

@font-face {
  font-family: "DS-DIGII";
  src: url(../../../static/font/DS-DIGI.TTF) format("truetype");
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 3s;
}

.testdiv {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-image: url("../../../static/images/u0.png");
  background-size: 100% 100%;
  padding: 11px;
  box-sizing: border-box;
  overflow-y: auto;
}

.top_title {
  width: 100%;
  height: 106px;
  background: url("../../../static/images/u2.png") center center no-repeat;
  background-size: 81.25% 100%;
  padding: 0 25px 0 40px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  font-size: 59px;
  color: #fff;
  font-weight: bold;
  line-height: 100px;
  position: relative;
  font-style: italic;

  .logo {
    width: 200px;
    height: 60px;
    float: left;
    margin-top: 27px;
    cursor: pointer;
  }

  .times_bg {
    width: 200px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    float: right;
    background: url("../../../static/images/u4.png") center center no-repeat;
    background-size: 100% 40px;
    margin-top: 34px;
  }

  .backBtn {
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.middle_bottom {
  margin-top: 24px;
  padding: 0 24px;

  .formBox {
    .form_title {
      width: 96%;
      height: 60px;
      background: url("../../../static/images/u6.png") center center no-repeat;
      background-size: 100% 100%;
      font-size: 24px;
      color: #b1e2ff;
      line-height: 60px;
      padding-left: 45px;
      box-sizing: border-box;
      margin-bottom: 25px;
    }

    .formMain {
      box-sizing: border-box;
      width: 100%;
      // height:312px;
      height: 850px;
      background: url("../../../static/images/u_11.png") center center no-repeat;
      background-size: 100% 100%;

      .table_title {
        font-size: 18px;
        color: #fff;
      }

      .table_title_bg {
        width: 100%;
        // height: 46px;
        height: 105px;

        li {
          height: 100%;
          line-height: 105px;
          font-size: 25px;
          color: #fff;
          font-weight: normal;
          text-align: center;
          display: inline-block;
        }

        li:first-child {
          width: 5%;
        }

        li:nth-child(2) {
          width: 45%;
        }

        li:nth-child(3) {
          width: 10%;
        }

        li:nth-child(4) {
          width: 10%;
        }

        li:nth-child(5),
        li:nth-child(6),
        li:nth-child(7) {
          width: 10%;
        }
      }

      .tbaleSlide {
        width: 100%;
        height: 740px;
        overflow-y: hidden;

        .tableDetail {
          li {
            width: 100%;
            text-align: center;
            color: #fff;
            overflow: hidden;
            height: 74px;
            display: flex;
            align-items: center;

            div {
              width: 30%;
              float: left;
              // line-height: 36px;
              // font-size: 16px;
              // line-height: 76px;
              font-size: 25px;
            }

            div:first-child {
              width: 5%;
            }

            div:nth-child(2) {
              width: 45%;
            }

            div:nth-child(3) {
              width: 10%;
            }

            div:nth-child(4) {
              width: 10%;
            }

            div:nth-child(5),
            div:nth-child(6),
            div:nth-child(7) {
              width: 10%;
            }
          }
        }
      }
    }

    .table_bg {
      height: 347px;
      padding: 20px;
      background: url("../../../static/images/u9.png") center center no-repeat;
      background-size: 100% 100%;
    }
  }
}

// 淡入淡出
.hehe-enter,
.hehe-leave-to {
  opacity: 0;
}

.hehe-enter-to,
.hehe-leave {
  opacity: 1;
}

.hehe-enter-active,
.hehe-leave-active {
  transition: all 3s;
}

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
</style>
