jiangxiSZ/shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue

<template>
    <div id="educationPage">
        
      <tr id="schoolStatus">在校生情况</tr>
      <div id="table_head">
          <td id="td1">类型</td>
          <td id="td2">人数</td>
          <td id="td3">比例</td>
      </div>
      <div id="table_body">
        <tr id="tr_class">
            <td class="educate_type">学龄前</td>
            <td class="educate_num">{{xlq?xlq.num:0}}</td>
            <td class="educate_num1">{{xlq?xlq.rate:0}}%</td>
        </tr>
        <tr id="tr_class1">
          <td class="educate_type">小学</td>
          <td class="educate_num">{{xx?xx.num:0}}</td>
          <td class="educate_num1">{{xx?xx.rate:0}}%</td>
          </tr>
          <tr class="tr_class">
              <td class="educate_type">初中</td>
              <td class="educate_num">{{cz?cz.num:0}}</td>
              <td class="educate_num1">{{cz?cz.rate:0}}%</td>
          </tr>
          <tr class="tr_class">
              <td class="educate_type">高中</td>
              <td class="educate_num">{{gz?gz.num:0}}</td>
              <td class="educate_num1">{{gz?gz.rate:0}}%</td>
          </tr>
          <tr class="tr_class">
              <td class="educate_type">大学</td>
              <td class="educate_num">{{dx?dx.num:0}}</td>
              <td class="educate_num1">{{dx?dx.rate:0}}%</td>
          </tr>
          <tr class="tr_class" id="tr6">
              <td class="educate_type">研究生及以上</td>
              <td class="educate_num">{{yjs?yjs.num:0}}</td>
              <td class="educate_num1">{{yjs?yjs.rate:0}}%</td>
          </tr>
          <div id="back_div1">
        </div>
        <div id="back_div2">
        </div>
        <div id="back_div3">
        </div>
      </div>
      <tr id="educate_distribution">教育程度分布</tr>
      <div id="educate_chart">
        <ThreeDCharts></ThreeDCharts>
      </div>
    </div>
</template>
    <script>  
     import ThreeDCharts from "../Utils/ThreeDCharts1.vue"
    export default {
      name: 'EducationPage',
      components:{
        ThreeDCharts
      },
      data () {
        return {
            school: [
            {
                rate: 8.73,
                num: 2101,
                name: "学龄前",
                id: 1513
            },
            {
                rate: 15.79,
                num: 3800,
                name: "小学",
                id: 1514
            },
            {
                rate: 13.44,
                num: 3235,
                name: "初中",
                id: 1559
            },
            {
                rate: 29.65,
                num: 7136,
                name: "高中",
                id: 1515
            },
            {
                rate: 32.07,
                num: 7718,
                name: "大学",
                id: 1516
            },
            {
                rate: 0.32,
                num: 78,
                name: "研究生及以上",
                id: 1517
            }
        ],
        xlq:0
        ,xx:0,cz:0,gz:0,dx:0,yjs:0
        }
      },
      mounted(){
         
        let clear= setInterval(() => {
          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data.school) {
            this.school=this.$store.getters.getSzdata.data.school
            console.log(this.$store.getters.getSzdata.data)
           this.school.map(obj=>{
                if(obj.name=="学龄前"){
                        this.xlq={
                            num:obj.num,
                            rate:obj.rate
                        }
                    }else  if(obj.name=="小学"){
                        this.xx={
                            num:obj.num,
                            rate:obj.rate
                        }
                    }else  if(obj.name=="初中"){
                        this.cz={
                            num:obj.num,
                            rate:obj.rate
                        }
                    }else  if(obj.name=="高中"){
                        this.gz={
                            num:obj.num,
                            rate:obj.rate
                        }
                    }else  if(obj.name=="大学"){
                        this.dx={
                            num:obj.num,
                            rate:obj.rate
                        }
                    }else  if(obj.name=="研究生及以上"){
                        this.yjs={
                            num:obj.num,
                            rate:obj.rate
                        }
                    }
          })
            clearInterval(clear)
          }
        }, 500);

      },
      methods:{

      }
    }
</script>
    
 <style scoped>


    #back_div1{
        position: absolute;
        width: 100%;
        height: 16%;
        background-color:rgb(96, 136, 206,0.2) ;
        top:14%;
    }
    #back_div2{
        position: absolute;
        width: 100%;
        height: 16%;
        background-color:rgb(96, 136, 206,0.2) ;
        top:44%;
    }
    #back_div3{
        position: absolute;
        width: 100%;
        height: 16%;
        background-color:rgb(96, 136, 206,0.2) ;
        top:73%;
    }
     .educate_num{
        position: absolute;
        width: 10%;
        left: 45%;
     }
     .educate_num1{
        position: absolute;
        width: 30%;
        left: 65%;
     }
     #td1{
        font-weight:bold;
        position: absolute;
        left:10%;
        top:15%
     }
     #td2{
        font-weight:bold;
        position: absolute;
        left:45%;
        top:15%
     }
     #td3{
        font-weight:bold;
        position: absolute;
        left:75%;
        top:15%
     }
     #educationPage{
        position: absolute;
        width: 100%;
        height: 25%;
        top:52%;
     }
     #schoolStatus{
         position: absolute;
         font-family: "宋体";
         font-weight:bold;
         left:18%
     }
     #table_head{
        position: absolute;
        background-color:rgb(10,98,197) ;
        font-size: 13px; 
        top:10%;
        width: 40%;
        height: 12%;
        left: 13%;
     }
     #table_body{
         position: absolute;
         font-size: 10px; 
         left:13%;
         top:25%;
         width: 40%;
         height: 70%;
         background-color: rgb(10,98,197,0.1);
         text-align:center;
         line-height:25px
     }
     #educate_distribution{
        position: absolute;
        font-family: "宋体";
         font-weight:bold;
         left:58%
     }
     #educate_chart{
        position: absolute;
        height: 100%;
        width: 50%;
        left: 55%;
        /* background-color: rgb(10,98,197,0.2); */
     }

 @media screen and (max-height: 1000px) {
        #back_div1{
        position: absolute;
        width: 100%;
        height: 20%;
        background-color:rgb(96, 136, 206,0.2) ;
        top:16%;
    }
    #back_div2{
        position: absolute;
        width: 100%;
        height: 20%;
        background-color:rgb(96, 136, 206,0.2) ;
        top:49%;
    }
    #back_div3{
        position: absolute;
        width: 100%;
        height: 20%;
        background-color:rgb(96, 136, 206,0.2) ;
        top:85%;
    }
     .educate_num{
        position: absolute;
        width: 10%;
        left: 45%;
     }
     .educate_num1{
        position: absolute;
        width: 30%;
        left: 65%;
     }
     #td1{
        font-weight:bold;
        position: absolute;
        left:10%;
        top:15%
     }
     #td2{
        font-weight:bold;
        position: absolute;
        left:45%;
        top:15%
     }
     #td3{
        font-weight:bold;
        position: absolute;
        left:75%;
        top:15%
     }
     #educationPage{
        position: absolute;
        width: 100%;
        height: 25%;
        top:52%;
     }
     #schoolStatus{
         position: absolute;
         font-family: "宋体";
         font-weight:bold;
         left:18%
     }
     #table_head{
        position: absolute;
        background-color:rgb(10,98,197) ;
        font-size: 13px; 
        top:10%;
        width: 40%;
        height: 12%;
        left: 13%;
     }
     #table_body{
         position: absolute;
         font-size: 10px; 
         left:13%;
         top:25%;
         width: 40%;
         height: 70%;
         background-color: rgb(10,98,197,0.1);
         text-align:center;
         line-height:25px
     }
     #educate_distribution{
        position: absolute;
        font-family: "宋体";
         font-weight:bold;
         left:58%
     }
     #educate_chart{
        position: absolute;
        height: 100%;
        width: 50%;
        left: 55%;
        /* background-color: rgb(10,98,197,0.2); */
     }
  }
</style>