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

<template>
  <div class="app-container">
    <div class="exit" @click="exitFun"></div>
    <div class="title" v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
      {{ i }}
    </div>
    <div class="time" id="time">{{ time }}</div>
    <div class="date" id="date">{{ date }}</div>
    <div class="logo"></div>

    <div class="chart1">
      <Chart ref="chart1"></Chart>
    </div>
    <div class="chart6">
      <div class="title">当年市场不良率</div>
      <div class="border"></div>
      <Chart ref="chart6"></Chart>
    </div>
    <div class="chart7">
      <div class="title">重点工序监控</div>
      <div class="border"></div>
      <Chart ref="chart7"></Chart>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/board/Chart";

let getDateIntervalFun = null
let time1 = () => {
}
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: "Liner",
  components: {
    Chart
  },
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      title: [
        '三日订单执行情况',
        '产品发布',
        '场景升级',
        '重点工序监控',
        '周产量',
        '产品分布',
        '异常统计',
        '质量分析',
        '产量统计',
        '设备分析',
        '数字化安全',
        '当年市场不良率',
      ],
      titlePosition: [
        {
          top: 11.6,
          left: 5.5
        },
        {
          top: 11.6,
          left: 29
        },
        {
          top: 11.6,
          left: 52.7
        },
        {
          top: 11.6,
          left: 76.4
        },
        {
          top: 40.9,
          left: 5.5
        },
        {
          top: 40.9,
          left: 29
        },
        {
          top: 40.9,
          left: 52.7
        },
        {
          top: 40.9,
          left: 76.4
        },
        {
          top: 70.4,
          left: 5.5
        },
        {
          top: 70.4,
          left: 29
        },
        {
          top: 70.4,
          left: 52.7
        },
        {
          top: 70.4,
          left: 76.4
        },
      ],
      time: '',
      date: ''
    }
  },
  created() {
    const getDate = () => {
      let date = new Date()
      let YYYY = date.getFullYear()
      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
      let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
      this.date = `${YYYY} - ${MM} - ${dd}`
      this.time = `${HH} : ${mm} : ${ss}`
    }
    getDate()
    getDateIntervalFun = setInterval(getDate, 1000)
  },
  mounted() {
    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
    this.$refs.chart6.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "1%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 50,
        top: "3%",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
              fontSize: 0.4 * vw,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
      ],
      yAxis: [
        {
          name: '不良率',
          type: "value",
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              color: "#d1e6eb",
            },
            fontSize: 0.4 * vw,
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "当年市场不良率",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#e8f1ff", // 线条颜色
            },
            borderColor: "#28ffb3",
          },
          label: {
            show: true,
            position: "bottom",
            fontSize: 0.4 * vw,
            textStyle: {
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
        },
        {
          name: "目标市场不良率",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#4268aa", // 线条颜色
            },
            borderColor: "#ecf3ff",
          },
          label: {
            show: true,
            position: "top",
            fontSize: 0.4 * vw,
            textStyle: {
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
        },
      ],
    })
    this.$refs.chart7.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "5%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 50,
        top: "2%",
        textStyle: {
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          type: "value",
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#d1e6eb",
            },
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "质检次数",
          type: "bar",
          barWidth: 20,
          tooltip: {
            show: false,
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              color: '#72b3fe'
            },
          },
          data: [200, 382, 102, 267, 186, 315, 316],
        },
        {
          name: "合格率",
          type: "line",
          yAxisIndex: 1,
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#ecf3ff", // 线条颜色
            },
            borderColor: "#6d88bf",
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [96.74, 96.68, 98.76, 99.75, 98.58, 98.57, 98.43],
        },
      ],
    })
    const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
      clearInterval(time1)
      let charts = echarts.init(id);
      if (!data) {
        data = {
          yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"],
          yData: [41, 99, 32, 41, 24, 4, 16, 64, 18],
          xDataName: "达成率",
          status: [1, 1, 1, 1, 1, 1, 1, 1, 1]
        }
      }
      let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
      let bgBar = []
      data.yData.forEach(() => {
        bgBar.push(100)
      })
      let option = {
        grid: {
          // left: "-10%",
          left: "0%",
          right: "8%",
          bottom: "0%",
          top: "0%",
          containLabel: true,
        },
        dataZoom: [],
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: data.yNameOne,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              // margin:150,
              fontSize: 0.75 * vw,
              textStyle: {
                textAlign: 'center'
              },
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data.yData,
            barWidth: '80%',
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  return myColor[data.status[params.dataIndex]];
                },
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 0,
            barGap: "-100%",
            data: bgBar,
            barWidth: '80%',
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 0.75 * vw
              },
              formatter: function (val, index, e) {
                return data.yData[val.dataIndex] + '%'
              }
            },
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 1,
                barBorderRadius: 15,
              },
            },
          },
        ],
      };

      if (data.yNameOne.length > 8) {
        option.dataZoom.push({
          show: false,
          type: 'slider',
          bottom: '0%',
          yAxisIndex: 0,
          height: 12,
          start: 0,
          end: 1 / (data.yNameOne.length / 9) * 100,
          textStyle: {
            fontSize: 0,
            color: 'rgba(0,0,0,0)'
          }
        })

        let step = 1 / (data.yNameOne.length / 9) * 100
        time1 = setInterval(() => {
          option.dataZoom[0].end += step
          option.dataZoom[0].start += step
          if (option.dataZoom[0].start >= 100) {
            option.dataZoom[0].start = 0
            option.dataZoom[0].end = step
          }
          if (option.dataZoom[0].end >= 100) {
            option.dataZoom[0].end = 100
            option.dataZoom[0].start = option.dataZoom[0].end - step
          }
          charts.setOption(option);
        }, 6000)
        // time()
      }
      charts.setOption(option);
      $(window).resize(charts.resize);
    }
  },
  methods: {
    exitFun() {
      this.exit()
    }
  },
  beforeDestroy() {
    getDateIntervalFun = null
  }
}
</script>
<style lang="less" scoped>
.app-container {
  background-image: url("~@/assets/model/dataCentre/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.time, .date {
  position: absolute;
  font-size: 0.8vw;
  color: #fcfcfc;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.time {
  top: 3.2%;
  left: 85.8%;
}

.date {
  top: 3.2%;
  left: 94.1%;
}

.logo {
  background-image: url("../../assets/board/logo.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 8vw;
  height: 3vw;
  position: absolute;
  top: 1%;
  left: 1%;
}

.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;
}

.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}

.chart6 {
  background-image: url("~@/assets/model/dataCentre/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 40%;
  right: 5%;
  width: 18%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    top: -2vw;
    color: #fff;
    font-size: 1vw;
    border-left: 3px solid #0251d1;
    padding-left: 12px;
  }
}

.chart7 {
  background-image: url("~@/assets/model/dataCentre/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 70%;
  right: 5%;
  width: 18%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    top: -2vw;
    color: #fff;
    font-size: 1vw;
    border-left: 3px solid #0251d1;
    padding-left: 12px;
  }
}

</style>