zs_aucma-mes-ui/src/views/model/quality.vue

<template>
  <div class="app-container">
    <div class="headTitle">质量可视化管理</div>
    <div class="exit" @click="exitFun"></div>


    <div class="centerTitle">本月综合质量</div>
    <div class="chart11">
      <Chart ref="chart11"></Chart>
    </div>
    <div class="chart12">
      <Chart ref="chart12"></Chart>
    </div>
    <div class="chart13">
      <Chart ref="chart13"></Chart>
    </div>
    <div class="chart14">
      <Chart ref="chart14"></Chart>
    </div>
    <div class="box1">
      <div class="boxTitle">一次校验合格率</div>
      <div class="chart1">
        <Chart ref="chart1"></Chart>
      </div>
    </div>
    <div class="box2">
      <div class="boxTitle">OQC抽检分数</div>
      <div class="chart2">
        <Chart ref="chart2"></Chart>
      </div>
    </div>
    <div class="box3">
      <div class="chart3">
        <Chart ref="chart3"></Chart>
      </div>
    </div>
    <div class="box4">
      <div class="boxTitle">本月缺陷占比</div>
      <div class="chart4">
        <Chart ref="chart4"></Chart>
      </div>
    </div>
    <div class="box5">
      <div class="boxTitle">重点工序监控</div>
      <div class="chart5">
        <Chart ref="chart5"></Chart>
      </div>
    </div>
    <div class="box6">
      <div class="boxTitle">当年市场不良率</div>
      <div class="chart6">
        <Chart ref="chart6"></Chart>
      </div>
    </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({
      grid: {
        top: "15%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["产品数", "合格率"],
        top: "3%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "01",
          "02",
          "03",
          "04",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#ffffff66",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ffffff66", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#ffffff66",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ffffff66",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
        {
          type: "value",
          name: "合格率",
          nameTextStyle: {
            color: "#ffffff66",
          },
          position: "right",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
      ],
      series: [
        {
          name: "合格率",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "top",
              formatter: '{c}%',
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, //平滑曲线显示
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#ffffff",
          },
          lineStyle: {
            color: "#ffffff",
          },
          data: [94.2, 93.8, 94.8, 93.5],
        },
        {
          name: "产品数",
          type: "bar",
          label: {
            normal: {
              show: true,
              position: ['0%', '50%'],
              textStyle: {
                color: "#ffffff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#45e9a7",
                },
                {
                  offset: 1,
                  color: "#35a075",
                },
              ]),
            },
          },
          data: [4.2, 3.8, 4.8, 3.5],
        },
      ],
    })
    this.$refs.chart2.setData({
      grid: {
        top: "15%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["OQC抽检分数", "目标值"],
        top: "3%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "01",
          "02",
          "03",
          "04",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#ffffff66",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ffffff66", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "OQC抽检分数",
          nameTextStyle: {
            color: "#ffffff66",
          },
          position: "left",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
      ],
      series: [
        {
          name: "OQC抽检分数",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "top",
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#ffffff",
          },
          lineStyle: {
            color: "#ffffff",
          },
          data: [94.6, 93.4, 94.7, 93.3],
        },
        {
          name: "目标值",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "bottom",
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#ffffff",
          },
          lineStyle: {
            color: "#ffffff",
          },
          data: [94.7, 93.2, 94.7, 93.4],
        },
      ],
    })
    this.$refs.chart3.setData({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          data: [
            {value: 335, name: "测温"},
            {value: 310, name: "捡漏"},
            {value: 234, name: "后板"},
            {value: 135, name: "系统件"},
          ],
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: "{b} : {c} ({d}%)",
                color:'#fff'
              },
            },
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart4.setData({
      grid: {
        top: "15%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["占比"],
        top: "3%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "测温",
          "捡漏",
          "后板",
          "系统件",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#ffffff66",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ffffff66", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "缺陷占比",
          nameTextStyle: {
            color: "#ffffff66",
          },
          position: "left",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
      ],
      series: [
        {
          name: "占比",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "bottom",
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#ffffff",
          },
          lineStyle: {
            color: "#ffffff",
          },
          data: [94.7, 93.2, 94.7, 93.4],
        },
      ],
    })
    this.$refs.chart5.setData({
      grid: {
        top: "15%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["质检次数", "合格率"],
        top: "3%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "01",
          "02",
          "03",
          "04",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#ffffff66",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ffffff66", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#ffffff66",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ffffff66",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
        {
          type: "value",
          name: "合格率",
          nameTextStyle: {
            color: "#ffffff66",
          },
          position: "right",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
      ],
      series: [
        {
          name: "合格率",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "top",
              formatter: '{c}%',
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, //平滑曲线显示
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#ffffff",
          },
          lineStyle: {
            color: "#ffffff",
          },
          data: [94.2, 93.8, 94.8, 93.5],
        },
        {
          name: "质检次数",
          type: "bar",
          label: {
            normal: {
              show: true,
              position: ['0%', '50%'],
              textStyle: {
                color: "#ffffff",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#96c4fc",
                },
                {
                  offset: 1,
                  color: "#32547d",
                },
              ]),
            },
          },
          data: [4.2, 3.8, 4.8, 3.5],
        },
      ],
    })
    this.$refs.chart6.setData({
      grid: {
        top: "15%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["当年市场不良率", "目标市场不良率"],
        top: "3%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "01",
          "02",
          "03",
          "04",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#ffffff66",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ffffff66", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "当年市场不良率",
          nameTextStyle: {
            color: "#ffffff66",
          },
          position: "left",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: '{value}%',
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
      ],
      series: [
        {
          name: "当年市场不良率",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "top",
              formatter: '{c}%',
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#45e9a7",
          },
          lineStyle: {
            color: "#45e9a7",
          },
          data: [4.6, 3.4, 4.7, 3.3],
        },
        {
          name: "目标市场不良率",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "bottom",
              formatter: '{c}%',
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#ffffff",
          },
          lineStyle: {
            color: "#ffffff",
          },
          data: [4.7, 3.2, 4.7, 3.4],
        },
      ],
    })
    this.$refs.chart11.setData({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 91.21, name: "合格率"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  params.value +
                  "%}" +
                  "\n{b|" +
                  params.name +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#fa2f5a",
              label: {
                show: false,
                formatter: "{b} : {c} ({d}%)",
                color: "#fff"
              },
            },
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart12.setData({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 99.65, name: "质量控制达标率"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  params.value +
                  "%}" +
                  "\n{b|" +
                  params.name +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#62aafe",
              label: {
                show: false,
                formatter: "{b} : {c} ({d}%)",
                color: "#fff"
              },
            },
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart13.setData({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 1.85, name: "当年市场不良率"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  params.value +
                  "%}" +
                  "\n{b|" +
                  params.name +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#2ffae0",
              label: {
                show: false,
                formatter: "{b} : {c} ({d}%)",
                color: "#fff"
              },
            },
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart14.setData({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 45.90, name: "OQC抽检分数"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  params.value +
                  "}" +
                  "\n{b|" +
                  params.name +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#fae92f",
            },
            labelLine: {show: true},
          },
        },
      ],
    })
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style lang="less" scoped>
.app-container {
  background-image: url("~@/assets/model/quality/bg.jpg");
  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;
}

.boxTitle {
  position: absolute;
  top: 0;
  width: 100%;
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(to right, #152049, #184680);
  color: #fff;
  font-size: 1vw;
  text-align: center;
}

.box1 {
  position: absolute;
  top: 10%;
  left: 2%;
  width: 34%;
  height: 43%;
  border: 1px solid #123061;

  .chart1 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box2 {
  position: absolute;
  top: 55%;
  left: 2%;
  width: 34%;
  height: 41%;
  border: 1px solid #123061;

  .chart2 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box3 {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 25%;
  height: 25%;
  border: 1px solid #123061;
  transform: translateX(-50%);

  .chart3 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.box4 {
  position: absolute;
  top: 70%;
  left: 50%;
  width: 25%;
  height: 25%;
  border: 1px solid #123061;
  transform: translateX(-50%);

  .chart4 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box5 {
  position: absolute;
  top: 10%;
  right: 2%;
  width: 34%;
  height: 43%;
  border: 1px solid #123061;

  .chart5 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box6 {
  position: absolute;
  top: 55%;
  right: 2%;
  width: 34%;
  height: 41%;
  border: 1px solid #123061;

  .chart6 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.chart11 {
  position: absolute;
  top: 17%;
  left: 41%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.chart12 {
  position: absolute;
  top: 32%;
  left: 46%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.chart13 {
  position: absolute;
  top: 32%;
  left: 54%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.chart14 {
  position: absolute;
  top: 17%;
  left: 59%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}
.centerTitle{
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.4vw;
}
</style>