JinZHouXiYiJi_DaPin/src/components/datav/CenterCmp.vue

<template>
  <div class="center-cmp">

    <div class="cc-details">
      <div style="width:40%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
        <span>当月入库</span>
      </div>
      <div style="width:20%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
      </div>
      <div style="width:40%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
        <span>当月出库</span>
      </div>
    </div>
    <div class="cc-header">
      <div style="width:40%;height:50px; float: left;display: flex"  >
        <div  class="card">{{r1}}</div>
        <div class="card">{{r2}}</div>
        <div class="card">{{r3}}</div>
        <div class="card">{{r4}}</div>
        <div class="card">{{r5}}</div>
      </div>
      <div style="width:40%;height:50px; float: left;display: flex"  >
        <div  class="card">{{c1}}</div>
        <div class="card">{{c2}}</div>
        <div class="card">{{c3}}</div>
        <div class="card">{{c4}}</div>
        <div class="card">{{c5}}</div>
      </div>
    </div>

    <div class="cc-details">

    </div>
    <div class="cc-main-container">
      <dv-active-ring-chart class="ccmc-middle" :config="config1" />
      <dv-active-ring-chart class="ccmc-middle" :config="config2" />

    </div>
    <div class="cc-details">
      <div style="width:50%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
        <span>当日入库</span>
      </div>
      <div style="width:50%;height:30px;align-items: center ;font-size: 15px ;text-align: center" >
        <span>当日出库</span>
      </div>
    </div>
  </div>
</template>

<script>
import LabelTag from './LabelTag'

export default {

  name: 'DigitalFlop',
  data () {
    return {
      config1: [],
      config2: [],
      r1:'0',
      r2:'0',
      r3:'0',
      r4:'0',
      r5:'0',
      c1:'0',
      c2:'0',
      c3:'0',
      c4:'0',
      c5:'0'
    }
  },
  mounted () {
    console.log('123123213123131')
    setTimeout(() => {
      this.getListData()
      this.getListData2()
      this.getListData3()
    }, 2500)

    setInterval(this.getListData, 535000)
    setInterval(this.getListData2, 545000)
    setInterval(this.getListData3, 555000)
  },
  methods: {
    getListData () {
      // 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
      this.$axios.post('/api/api/screeView/inMonth',{
        methodType:7
      })
        .then(res => {
          console.log(res.data)
          this.config1 = res.data
          //this.list = JSON.stringify(res.data.data)
          //let data2=JSON.parse(this.list);
          //console.log(this.list)
        })
    },
    getListData2 () {
      // 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
      this.$axios.post('/api/api/screeView/outMonth',{
        methodType:8
      })
        .then(res => {
          console.log(res.data)
          this.config2 = res.data
          //this.list = JSON.stringify(res.data.data)
          //let data2=JSON.parse(this.list);
          //console.log(this.list)
        })
    },
    getListData3 () {
      // 这里getList获取到的res是接口返回的所有内容（包含code、msg、data等），里面只有data是业务数据
      this.$axios.post('/api/api/screeView/inOutForMonth',{
        methodType:6
      })
        .then(res => {
          console.log(res)
          var jsonString = JSON.stringify(res.data);
          var jsObject = JSON.parse(jsonString)
          this.r1 = jsObject.r1
          this.r2 = jsObject.r2
          this.r3 = jsObject.r3
          this.r4 = jsObject.r4

          this.c1 = jsObject.c1
          this.c2 = jsObject.c2
          this.c3 = jsObject.c3
          this.c4 = jsObject.c4

          this.r5 = jsObject.r5
          this.c5 = jsObject.c5

          //this.list = JSON.stringify(res.data.data)
          //let data2=JSON.parse(this.list);

        })
    }
  }
}
</script>

<style lang="less">
.center-cmp {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  .cc-header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
    .card {
      background-color: rgba(4,49,128,.1);
      color: #ffffff;
      height: 70px;
      width: 70px;
      font-size: 45px;
      font-weight: bold;
      line-height: 70px;
      text-align: center;
      margin: 10px;
    }
  }
  .cc-details {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    font-size: 32px;
    align-items: center;
  }
  .cc-main-container {
    position: relative;
    flex: 1;
    display: flex;
    .ccmc-middle {
      width: 50%;
      height: 90%;
      .active-ring-name {
        font-size: 20px !important;
      }
    }
    .ccmc-middle2 {
      width: 50%;
      height: 10%;
      display: flex;
      justify-content: center;
    }
  }
  cc-main-container2 {
    position: relative;
    flex: 1;
    display: flex;
    .ccmc-middle2 {
      width: 50%;
      height: 10%;
      display: flex;
      justify-content: center;
    }
  }
  .label-tag {
    position: absolute;
    width: 500px;
    height: 30px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>