更新

huanghongfeng

3 天以前 5ffc36a1db18d3112a9b50a9cf3953d7fcf21bae

 ÏîÄ¿´úÂë/DP/src/views/indexs/right-center.vue

@@ -1,238 +1,91 @@
<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <ul>
            <li>合格：{{container_data.qualified}}</li>
            <li>待检：{{container_data.waitCheck}}</li>
            <li>检修中：{{container_data.checkIng}}</li>
            <li>空托：{{container_data.empty}}</li>
            <li>实托：{{container_data.full}}</li>
  <ul class="user_Overview flex">
    <li class="user_Overview-item">
      <div class="user_Overview_nums" :class="kst ? 'allnum' : 'online'">
        <dv-digital-flop style="width:100%;height:100%;" />
      </div>
      <p>正常</p>
    </li>
          </ul>
        </span>
      </div>
      <div class="d-flex jc-center" style="margin-left: 23%;">
        <CenterLeft1Chart />
      </div>
      <!-- 4个主要的数据 -->
      <!-- <div class="bottom-data">
        <div
          class="item-box mt-2"
          v-for="(item, index) in numberData"
          :key="index"
        >
          <div class="d-flex" style="margin-left:60px">
            <span class="coin">#</span>
            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
          </div>
          <p class="text" style="text-align: center;">
            {{ item.text }}
            <span class="colorYellow">(个)</span>
          </p>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import CenterLeft1Chart from '@/components/echart/centerLeft1Chart'
import axios from 'axios'
export default {
  data() {
    return {
      container_data:{},
      // numberData: [
      //   {
      //     number: {
      //       number: [15],
      //       toFixed: 1,
      //       textAlign: 'left',
      //       content: '{nt}',
      //       style: {
      //         fontSize: 24
      //       }
      //     },
      //     text: '今日构建总量'
      //   },
      //   {
      //     number: {
      //       number: [1144],
      //       toFixed: 1,
      //       textAlign: 'left',
      //       content: '{nt}',
      //       style: {
      //         fontSize: 24
      //       }
      //     },
      //     text: '总共完成数量'
      //   },
      //   {
      //     number: {
      //       number: [361],
      //       toFixed: 1,
      //       textAlign: 'left',
      //       content: '{nt}',
      //       style: {
      //         fontSize: 24
      //       }
      //     },
      //     text: '正在编译数量'
      //   },
      //   {
      //     number: {
      //       number: [157],
      //       toFixed: 1,
      //       textAlign: 'left',
      //       content: '{nt}',
      //       style: {
      //         fontSize: 24
      //       }
      //     },
      //     text: '未通过数量'
      //   }
      // ]
    }
      kst: true, 
    };
  },
  components: {
    CenterLeft1Chart
  },
  mounted() {
    this.changeTiming()
  },
  methods: {
    changeTiming() {
      this.changeNumber()
      setInterval(() => {
        this.changeNumber()
      }, 3000)
    },
    changeNumber() {
      // this.numberData.forEach((item, index) => {
      //   item.number.number[0] += ++index
      //   item.number = { ...item.number }
      // })
      axios.post("http://192.168.12.189:8098/api/VV_Container/GetContainerMessage",null)
      .then((res) => {
        this.container_data = res;
       
        // this.numberData  = [
        //   {
        //     number: {
        //       number: [agvs.emptyNum],
        //       toFixed: 1,
        //       textAlign: 'left',
        //       content: '{nt}',
        //       style: {
        //         fontSize: 24
        //       }
        //     },
        //     text: '总共空货位'
        //   },
        //   {
        //     number: {
        //       number: [agvs.storedNum],
        //       toFixed: 1,
        //       textAlign: 'left',
        //       content: '{nt}',
        //       style: {
        //         fontSize: 24
        //       }
        //     },
        //     text: '总共有货货位'
        //   },
        //   {
        //     number: {
        //       number: [agvs.num],
        //       toFixed: 1,
        //       textAlign: 'left',
        //       content: '{nt}',
        //       style: {
        //         fontSize: 24
        //       }
        //     },
        //     text: '总共缓存架'
        //   },
        //   {
        //     number: {
        //       number: [agvs.ngNum],
        //       toFixed: 1,
        //       textAlign: 'left',
        //       content: '{nt}',
        //       style: {
        //         fontSize: 24
        //       }
        //     },
        //     text: '掉线缓存架数量'
        //   }
        // ]
          // this.numberData = GetLocationData
      }).catch((res) => {
        console.log(res)
      })
    }
  }
}
};
</script>

<style lang="scss" scoped>
$box-width: 610px;
$box-height: 410px;
<style lang='scss' scoped>
.user_Overview {
  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

#centerLeft1 {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .bottom-data {
    .item-box {
      & > div {
        padding-right: 5px;
      }
      font-size: 14px;
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;
      .dv-digital-flop {
        width: 120px;
        height: 30px;
      }
      // é‡‘币
      .coin {
        position: relative;
        top: 6px;
        font-size: 20px;
        color: #ffc107;
      }
      .colorYellow {
        color: yellowgreen;
      }
      p {
        text-align: center;
      font-size: 16px;
      margin-top: 10px;
      }

    .user_Overview_nums {
      
      width: 200px;  /* æ”¾å¤§å®¹å™¨ */
      height: 200px;
      text-align: center;
      line-height: 250px;
      font-size: 52px;
      margin: 50px auto;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;  /* å…³é”®ä¿®æ”¹ï¼šç­‰æ¯”例缩放 */
        z-index: 1;
    }

      /* æ•°å­—内容层级提高 */
      > * {
        position: relative;
        z-index: 2;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
  }
}

ul li{
  float: left;
  list-style-type: none;
  margin-left: 8%;
    /* ä¸åŒç±»åå¯¹åº”不同背景图 */
    .allnum::before {
      background-image: url("../../assets/img/left_top_lan.png");
    }

    .online::before {
      background-image: url("../../assets/img/left_top_lv.png");
    }

    .offline::before {
      background-image: url("../../assets/img/left_top_huang.png");
    }

    .laramnum::before {
      background-image: url("../../assets/img/left_top_hong.png");
    }
  }
}
</style>