jiangxiSZ/shuzhixiangzheng/src/components/OtherChilds/PepoleStatus.vue

<template>
  <div id="pepoleStatusPage">
    <img src="../../assets/png/yq_background.png" class="yq_background_img" />
    <div class="czrk_name">常住人口</div>
    <div class="czrk_num">{{czrk.num}}</div>
    <img src="../../assets/png/yq_background.png" class="yq_background_img1" />
    <div class="ldrk_name">流动人口</div>
    <div class="ldrk_num">{{ldrk.num}}</div>
    <ThreeDCharts3 :tdata="dd"></ThreeDCharts3>
  </div>
</template>

<script>
  import ThreeDCharts3 from "../Utils/ThreeDCharts3.vue"
  export default {
    name: 'PepoleStatusPage',
    props: ["pdata"],
    components: {
      ThreeDCharts3
    },
    data() {
      return {
        czrk: 0,
        ldrk: 0,
        dd:{}
      }
    },
    watch:{   
      pdata(newVal,oldVal) {
        
        this.init(newVal);
      }
    },
    mounted() {
      this.init(this.pdata);
    },
    methods: {
      init(value){
        let clear = setInterval(() => {
        if ( value) {
          this.dd=value
          console.log("this.pdata",value)
        //  this.population = this.$store.getters.getDaZhongdata.data.population
          this.czrk = value.filter(result => result.name == '常住人口')[0];
          this.ldrk = value.filter(result => result.name == '流动人口')[0];
          clearInterval(clear)
        }
      }, 500);
      }
    }
  }

</script>


<style scoped>
  .czrk_name {
    position: absolute;
    color: rgb(4, 185, 202);
    font-weight: bold;
    left: 18%;
    top: 8%
  }

  .czrk_num {
    position: absolute;
    left: 18%;
    top: 12%;
    color: rgb(250, 207, 44);
    font-size: 25px;
    font-weight: bold;
  }

  .ldrk_name {
    position: absolute;
    color: rgb(4, 185, 202);
    font-weight: bold;
    left: 68%;
    top: 8%
  }

  .ldrk_num {
    position: absolute;
    left: 70%;
    top: 12%;
    font-size: 25px;
    color: rgb(250, 207, 44);
    font-weight: bold;
  }

  .yq_background_img {
    position: absolute;
    width: 30%;
    left: 10%;
    top: 5%
  }

  .yq_background_img1 {
    position: absolute;
    width: 30%;
    left: 60%;
    top: 5%
  }

  .font {
    position: absolute;
    font-size: 10px;
  }

  .row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 5%;
  }

  #pepoleStatusPage {
    position: absolute;
    width: 100%;
    height: 43%;
    /* background-color: rgb(48,115,248,0.1); */
    top: 36%;
    z-index: 2;
    color: rgb(255, 255, 255);
  }

  .num1 {
    position: absolute;
    width: 5%;
    left: 15%;
    font-size: 10px;
  }

  .num2 {
    position: absolute;
    left: 42%;
    width: 10%;
    font-size: 10px;
  }

  .num3 {
    position: absolute;
    left: 84%;
    width: 10%;
    font-size: 10px;
  }

  .progress_both {
    left: 52%;
    top: 2%;
    /* position: absolute; */
    width: 30%;
    height: 5px;
  }

  .progress_container0 {
    right: 62%;
    position: absolute;
    width: 15%;
    height: 5px;
    background-color: rgb(48, 115, 248);
  }

  .progress_container1 {
    position: absolute;
    width: 30%;
    left: 52%;
    height: 5px;
    background-color: rgb(55, 179, 163);
  }

  .progress_container2 {
    position: absolute;
    width: 10%;
    height: 5px;
    left: 52%;
    background-color: rgb(245, 199, 49);
  }
 
</style>