heli-mes/mes-ui/mes-echarts/src/views/lefttop.vue

<template>
  <div id="center">
    <dv-border-box-13>
      <div class="dv-itbox">
        <div class="itbox-left">
          <span>今日到岗人数</span>
          <span>{{`112`}}</span>
          <span>较昨日增加{{`12`}}</span>
        </div>
        <img width="50px" src="../assets/image/u125.png" alt="" />
      </div>
    </dv-border-box-13>
    
    <dv-border-box-13>
      <div class="dv-itbox">
        <div class="itbox-left">
          <span>今出差人数</span>
          <span>{{`4`}}</span>
          <span>较昨日增加{{`1`}}</span>
        </div>
        <img width="50px" src="../assets/image/u124.png" alt="" />
      </div>
    </dv-border-box-13>
    <dv-border-box-13>
      <div class="dv-itbox">
        <div class="itbox-left">
          <span>当前设计项目数量</span>
          <span>{{`14`}}</span>
          <span>较昨日增加{{`0`}}</span>
        </div>
        <img width="50px" src="../assets/image/u124.png" alt="" />
      </div>
    </dv-border-box-13>
    <dv-border-box-13>
      <div class="dv-itbox">
        <div class="itbox-left">
          <span>当前在制项目数量</span>
          <span>{{`49`}}</span>
          <span>较昨日增加{{`1`}}</span>
        </div>
        <img width="50px" src="../assets/image/u126.png" alt="" />
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
import { request } from "@/utils/request.js";

export default {
  components: {

  },
  data() {
    return {
    
    };
  },
  mounted() {
    // this.setData();
    // this.startInterval();
  },
  methods: {
    // 开启定时器
    startInterval() {
      const _this = this;
      // 应通过接口获取配置时间，暂时写死10s
      const time = 50 * 10 * 1000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _this.setData();
      }, time);
    },
    // 根据自己的业务情况修改
    setData() {
      const _this = this;
      request({
        // 各产品生产数量api路径
        url: "/api/BigScreen/getMonthData",
        method: "get",
      }).then((r) => {
        // console.log(r.data.MoCompleteRate);
        if (r) {
          // debugger
          // _this.config.data[0] = r.data.MoCompleteRate
          _this.config = {
            // data: [r.data.MoCompleteRate],
            shape: "round",
            waveHeight: 10,
            waveNum: 2,
            // colors: ['#003366', 'FFE4C4']
          };
          _this.config1 = {
            data: [r.data.PoCompleteRate],
            shape: "round",
            waveHeight: 10,
            waveNum: 2,
            // colors: ['#003366', 'FFE4C4']
          };
        }
        // if (r) {
        //   _this.cdata = r.data.EqmtRate
        //   this.cdata.series.forEach(i => {
        //     i.type = 'line'
        //     i.markLine = {
        //       focus: 'series'
        //     }
        //   })
        // }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#center {
  width: 100%;
  height: 100%;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
  // background-color: bisque;
  .dv-border-box-13 {
    width: 25%;
    height: 100%;
    padding: 0 20px;
    padding-top: 30px;
    .dv-itbox {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      .itbox-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 180px;
        span {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 10px;
        }
        span:nth-child(2) {
          font-size: 24px;
          color: #00bbec;
          font-weight: 600;
        }
        span:nth-child(3) {
          font-size: 15px;
        }
      }
    }
    
  }
}
</style>