<template>
  <div class="app-container">
    <div class="headTitle">生产制造运营中心</div>
    <div class="exit" @click="exitFun"></div>

    <div class="chart1">
      <Chart ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <div class="title">3日内需要交付订单</div>
      <div class="item" style="left: 2%">
        <div class="itemTitle">完成数/订单数</div>
        <div class="ratio">5/14</div>
      </div>
      <div class="item" style="left: 52%">>
        <div class="itemTitle">完成量/产品量</div>
        <div class="ratio">1004/1701</div>
      </div>
    </div>
    <div class="chart3">
      <div class="title">本月需完成订单</div>
      <div class="item" style="left: 2%">
        <div class="itemTitle">完成数/订单数</div>
        <div class="ratio">12/52</div>
      </div>
      <div class="item" style="left: 52%">>
        <div class="itemTitle">完成量/产品量</div>
        <div class="ratio">2333/6591</div>
      </div>
    </div>
    <div class="chart4">
      <Chart ref="chart4"></Chart>
    </div>
    <div class="chart5">
      <Chart ref="chart5"></Chart>
    </div>
    <div class="chart6">
      <Chart ref="chart6"></Chart>
    </div>
    <div class="chart7">
      <Chart ref="chart7"></Chart>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/board/Chart";
import {getData} from "@/api/board/getData";
import * as echarts from 'echarts'

export default {
  name: "Liner",
  components: {
    Chart
  },
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {}
  },
  mounted() {
    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
    this.$refs.chart1.setData({
      title: {
        text: "3日完成订单",
        left: "center",
        top: "5%",
        textStyle: {
          color: "#fff",
          fontSize: 0.7 * vw,
          align: "center",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: '20%',
        bottom: 1.5 * vw,
        left: 2.5 * vw,
        right: 2.5 * vw,
        textStyle: {
          color: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      ],
      yAxis: [
        {
          name: '数量',
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#90979c33",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "应完成订单",
          type: "bar",
          barWidth: '30%',
          itemStyle: {
            normal: {
              color: "#5ecee0",
              barBorderRadius: '50%',
            },
          },
          data: [
            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
          ],
        },
      ],
    })
    this.$refs.chart4.setData({
      title: {
        text: "7日内合格率",
        left: "center",
        top: "5%",
        textStyle: {
          color: "#fff",
          fontSize: 0.7 * vw,
          align: "center",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: '20%',
        bottom: 1.5 * vw,
        left: 2.5 * vw,
        right: 2.5 * vw,
        textStyle: {
          color: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      ],
      yAxis: [
        {
          name: '合格率',
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#90979c44",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
            formatter: '{value}%'
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "总数",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            normal: {
              color: "rgba(252,230,48,1)",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize: 0.6 * vw,
                formatter: function (p) {
                  return (p.value > 0 ? p.value : "") + '%';
                },
              },
            },
          },
          data: [
            106, 111, 96, 65, 86, 126, 101, 94, 100
          ],
        },
      ],
    })
    this.$refs.chart5.setData({
      title: {
        text: "订单履约率",
        left: "center",
        top: "5%",
        textStyle: {
          color: "#fff",
          fontSize: 0.7 * vw,
          align: "center",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: '20%',
        bottom: 1.5 * vw,
        left: 2.5 * vw,
        right: 2.5 * vw,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        x: "center",
        top: "12%",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#90979c",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw
          },
          splitArea: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "日计划数",
          type: "bar",
          borderWidth: '15%',
          itemStyle: {
            normal: {
              color: "#5ecee0",
            },
          },
          data: [
            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
          ],
        },

        {
          name: "日产量",
          type: "bar",
          borderWidth: '15%',
          barGap: "-100%",
          itemStyle: {
            normal: {
              color: "#78b4fe",
              barBorderRadius: 0,
            },
          },
          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
        },
        {
          name: "达成率",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: "rgba(252,230,48,1)",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize: 0.6 * vw,
                formatter: function (p) {
                  return (p.value > 0 ? p.value : "") + '%';
                },
              },
            },
          },
          data: [
            106, 111, 96, 65, 86, 126, 101, 94, 100
          ],
        },
      ],
    })
    this.$refs.chart7.setData({
      title: {
        text: "本月异常分布类型",
        left: "center",
        top: "5%",
        textStyle: {
          color: "#fff",
          fontSize: 0.7 * vw,
          align: "center",
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      series: [
        {
          name: "故障大类",
          type: "pie",
          selectedMode: "single",
          radius: [0, "50%"],

          label: {
            normal: {
              position: "inner",
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {value: 335, name: "辅件缺陷"},
            {value: 679, name: "箱体缺陷"},
            {value: 1548, name: "性能缺陷"},
          ],
        },
        {
          name: "故障小类",
          type: "pie",
          radius: ["50%", "65%"],
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              position: "outside",
            },
            emphasis: {
              show: true,
            },
          },

          data: [
            {value: 335, name: "印刷品"},
            {value: 310, name: "测温问题"},
            {value: 234, name: "捡漏问题"},
            {value: 135, name: "电检问题"},
            {value: 1048, name: "内胆件"},
            {value: 251, name: "压机室件"},
            {value: 147, name: "后板"},
            {value: 102, name: "塑料件"},
          ],
        },
      ],
    })

    getData().then(e => {
      this.$refs.chart6.setData({
        title: {
          text: "准时交付率（清单率）",
          left: "center",
          top: "5%",
          textStyle: {
            color: "#fff",
            fontSize: 0.7 * vw,
            align: "center",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "0",
          right: "4%",
          bottom: "0",
          top: '25%',
          containLabel: true,
        },
        legend: {
          data: ['应完成订单', '实际完成订单', '准时交付率'],
          right: 'center',
          top: '10%',
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: e.liner.inventoryStatus.x,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },

        yAxis: [
          {
            name: '数量  ',
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "white",
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {},
          },
          {
            name: '百分比',
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "white",
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {},
          }
        ],
        series: [
          {
            name: '应完成订单',
            type: "bar",
            barWidth: "30%",
            barMaxWidth: 50,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#39ffff",
                  },
                  {
                    offset: 1,
                    color: "#5affa6",
                  },
                ]),
              },
            },
            data: e.liner.inventoryStatus.y[0].data,
          },
          {
            name: '实际完成订单',
            type: "bar",
            barWidth: "30%",
            barMaxWidth: 50,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#a8aab0",
                  fontStyle: "normal",
                  fontFamily: "微软雅黑",
                  fontSize: 0.75 * vw,
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#4adfff",
                  },
                  {
                    offset: 1,
                    color: "#3d7aff",
                  },
                ]),
              },
            },
            data: e.liner.inventoryStatus.y[1].data,
          },
          {
            name: '准时交付率',
            type: "line",
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 6,
            yAxisIndex: 1,
            lineStyle: {
              normal: {
                width: 3,
                color: '#fff',
              },
              borderColor: "#f0f",
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 16
              },
            },
            itemStyle: {
              color: '#F2D770',
              border: 0,
            },
            // tooltip: {
            //     show: false
            // },
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
          },
        ],
      })
    })
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style lang="less" scoped>
.app-container {
  background-image: url("~@/assets/model/production/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #021e31;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}


.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}

.chart1 {
  position: absolute;
  top: 10%;
  left: 1.3%;
  width: 25%;
  height: 43%;
  background-color: #0b184f;
}

.chart2 {
  position: absolute;
  top: 10%;
  left: 27.6%;
  width: 45%;
  height: 21%;
  background-color: #0b184f;

  .title {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1vw;
    color: #d6eaed;
    letter-spacing: 2px;
  }

  .item {
    position: absolute;
    top: 25%;
    width: 45%;
    height: 70%;
    border: 1px solid #fff6;

    .itemTitle {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      color: #6fc3dd;
      font-size: 1vw;
    }

    .ratio {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      color: #62aafe;
      font-size: 3vw;
    }
  }
}

.chart3 {
  position: absolute;
  top: 32%;
  left: 27.6%;
  width: 45%;
  height: 21%;
  background-color: #0b184f;

  .title {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1vw;
    color: #d6eaed;
    letter-spacing: 2px;
  }

  .item {
    position: absolute;
    top: 25%;
    width: 45%;
    height: 70%;
    border: 1px solid #fff6;

    .itemTitle {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      color: #6fc3dd;
      font-size: 1vw;
    }

    .ratio {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      color: #62aafe;
      font-size: 3vw;
    }
  }
}

.chart4 {
  position: absolute;
  top: 10%;
  left: 73.9%;
  width: 25%;
  height: 43%;
  background-color: #0b184f;
}

.chart5 {
  position: absolute;
  top: 54.5%;
  left: 1.3%;
  width: 25%;
  height: 43%;
  background-color: #0b184f;
}

.chart6 {
  position: absolute;
  top: 54.5%;
  left: 27.6%;
  width: 45%;
  height: 43%;
  background-color: #0b184f;
}

.chart7 {
  position: absolute;
  top: 54.5%;
  left: 73.9%;
  width: 25%;
  height: 43%;
  background-color: #0b184f;
}
</style>
