zs_aucma-mes-ui/src/views/board/board1/index.vue

<template>
  <div class="app-container">
    <div class="headTitle">注塑车间设备运行监控平台</div>
    <div class="subTitle" style="top: 20%;left: 88%;">设备OEE</div>
    <div class="subTitle" style="top: 60%;left: 88%;">设备能耗</div>
    <div class="topNum deviceNum">
      <span class="text">设备数量</span>
      <span>：</span>
      <span class="num">16</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum bootRate">
      <span class="text">开机率</span>
      <span>：</span>
      <span class="num">80</span>
      <span class="unit">%</span>
    </div>
    <div class="topNum runNum">
      <span class="text">运行</span>
      <span>：</span>
      <span class="num">11</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum shutdownNum">
      <span class="text">停机</span>
      <span>：</span>
      <span class="num">02</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum standbyNum">
      <span class="text">待机</span>
      <span>：</span>
      <span class="num">01</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum waitMaterials">
      <span class="text">待料</span>
      <span>：</span>
      <span class="num">01</span>
      <span class="unit">台</span>
    </div>
    <div class="topNum unactivatedNum">
      <span class="text">未开机</span>
      <span>：</span>
      <span class="num">01</span>
      <span class="unit">台</span>
    </div>
    <div class="centerContent">
      <div class="item" v-for="i in list">
        <div class="itemTitle">AE-MD-S10</div>
        <div class="itemImg"></div>
        <div class="itemType itemType0" v-if="i.type===0">停机</div>
        <div class="itemType itemType1" v-if="i.type===1">待机</div>
        <div class="itemType itemType2" v-if="i.type===2">正常运行</div>
        <div class="itemType itemType3" v-if="i.type===3">待料</div>
        <div class="itemTime itemTime0" v-if="i.type===0">
          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
          <span>min</span>
        </div>
        <div class="itemTime itemTime1" v-if="i.type===1">
          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
          <span>min</span>
        </div>
        <div class="itemTime itemTime2" v-if="i.type===2">
          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
          <span>min</span>
        </div>
        <div class="itemTime itemTime3" v-if="i.type===3">
          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
          <span>min</span>
        </div>
        <div class="itemText">待机时长</div>
      </div>
    </div>
    <div class="oee">
      <Chart ref="chart1"></Chart>
    </div>
    <div class="energy">
      <Chart ref="chart2"></Chart>
    </div>
  </div>
</template>

<script>

import Chart from "@/components/board/Chart.vue";
import * as echarts from "echarts";

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  components: {
    Chart
  },
  name: "Liner",
  data() {
    return {}
  },
  mounted() {
    this.$refs.chart1.setData({
      title: [
        {
          text: "75%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 2 * vw,
            color: "#FFFFFF",
            fontFamily: "DINAlternate-Bold, DINAlternate",
            foontWeight: "600",
          },
        },
      ],
      polar: {
        radius: ["58%", "68%"],
        center: ["50%", "50%"],
      },
      angleAxis: {
        max: 133,
        // startAngle: 225,
        // endAngle: -180,
        clockwise: true,
        show: false
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: "",
          type: "bar",
          roundCap: false,
          barWidth: 30,
          showBackground: true,
          backgroundStyle: {
            color: "rgba(66, 66, 66, .3)",
          },
          data: [100],
          coordinateSystem: "polar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#16CEB9",
                },
                {
                  offset: 1,
                  color: "#6648FF",
                },
              ]),
            },
          },
        },
      ],
    })
    this.$refs.chart2.setData({
      title: [
        {
          text: "75%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 2 * vw,
            color: "#FFFFFF",
            fontFamily: "DINAlternate-Bold, DINAlternate",
            fontWeight: "600",
          },
        },
      ],
      polar: {
        radius: ["58%", "68%"],
        center: ["50%", "50%"],
      },
      angleAxis: {
        max: 133,
        // startAngle: 225,
        // endAngle: -180,
        clockwise: true,
        show: false
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: "",
          type: "bar",
          roundCap: false,
          barWidth: 30,
          showBackground: true,
          backgroundStyle: {
            color: "rgba(66, 66, 66, .3)",
          },
          data: [100],
          coordinateSystem: "polar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#16CEB9",
                },
                {
                  offset: 1,
                  color: "#6648FF",
                },
              ]),
            },
          },
        },
      ],
    })
  },
  methods: {},
  computed: {
    list() {
      return Array(222).fill(0).map(i => {
        return {
          type: Math.floor(Math.random() * 4)
        }
      })
    }
  },
  beforeDestroy() {
  }
};
</script>
<style scoped lang="less">
.app-container {
  background-image: url("../../../assets/board/boardBg1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

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

.topNum {
  position: absolute;
  top: 11.7%;
  transform: translateY(-50%);
  font-size: 1.3vw;
  vertical-align: middle;

  .text {
    color: #51A1D0;
    display: inline-block;
    width: 6vw;
    white-space: nowrap;
  }

  .num {
    letter-spacing: 0.2vw;
  }
}

.deviceNum {
  left: 4.5%;
  color: #DCDFDF;

  .text {
    letter-spacing: 0.3vw;
  }
}

.bootRate {
  left: 18%;
  color: #DCDFDF;

  .text {
    letter-spacing: 1vw;
  }
}

.runNum {
  left: 31.5%;
  color: #DCDFDF;

  .text {
    width: 5vw;
    letter-spacing: 2vw;
  }

  .num {
    color: #01F437;
  }
}

.shutdownNum {
  left: 45%;
  color: #DCDFDF;

  .text {
    width: 5vw;
    letter-spacing: 2vw;
  }

  .num {
    color: #D8070D;
  }
}

.standbyNum {
  left: 58.5%;
  color: #DCDFDF;

  .text {
    width: 5vw;
    letter-spacing: 2vw;
  }

  .num {
    color: #E1B00D;
  }
}

.waitMaterials {
  left: 72%;
  color: #DCDFDF;

  .text {
    width: 5vw;
    letter-spacing: 2vw;
  }

  .num {
    color: #E1B00D;
  }
}

.unactivatedNum {
  left: 85.5%;
  color: #DCDFDF;

  .text {
    letter-spacing: 1vw;
  }
}

.centerContent {
  position: absolute;
  top: 17%;
  left: 3.3%;
  width: 74.8%;
  height: 78%;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .item {
    display: inline-block;
    width: calc(33% - 1vw);
    height: 13.91vw;
    margin: 0.5vw;
    position: relative;
    background-image: url("../../../assets/board/boardItemBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .itemTitle {
      position: absolute;
      color: #DCDFDF;
      left: 10%;
      top: 11%;
      transform: translateY(-50%);
      font-size: 1.3vw;
    }

    .itemType {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 78%;
      top: 40%;
      width: 8vw;
      height: 2.22vw;
      line-height: 2.22vw;
      text-align: center;
      transform: translate(-50%, -50%);
      font-size: 1.2vw;
      color: #DCDFDF;
    }

    .itemType0 {
      background-image: url("../../../assets/board/boardDeviceStatus0.png");
      letter-spacing: 0.5vw;
    }

    .itemType1 {
      background-image: url("../../../assets/board/boardDeviceStatus1.png");
      letter-spacing: 0.5vw;
    }

    .itemType2 {
      background-image: url("../../../assets/board/boardDeviceStatus2.png");
    }

    .itemType3 {
      background-image: url("../../../assets/board/boardDeviceStatus3.png");
      letter-spacing: 0.5vw;
    }

    .itemImg {
      position: absolute;
      left: 4%;
      top: 28%;
      width: 51%;
      height: 65%;
      background-image: url("../../../assets/board/boardDevice.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .itemTime {
      position: absolute;
      left: 78%;
      top: 65%;
      transform: translate(-50%, -50%);
      font-size: 1.2vw;
      color: #DCDFDF;
    }

    .itemTime0 {
      color: #FB0102;
    }

    .itemTime1 {
      color: #FC7F03;
    }

    .itemTime2 {
      color: #02FD56;
    }

    .itemTime3 {
      color: #68CBFD;
    }

    .itemText {
      position: absolute;
      left: 78%;
      top: 80%;
      transform: translate(-50%, -50%);
      font-size: 0.8vw;
      color: #DCDFDF;
    }
  }
}

.oee {
  position: absolute;
  top: 23%;
  left: 78%;
  width: 20%;
  height: 30%;
}

.energy {
  position: absolute;
  top: 63%;
  left: 78%;
  width: 20%;
  height: 30%;
}

</style>