数据改造

shuzhixiangzheng/src/components/MainPage.vue

@@ -24,7 +24,7 @@
       <img class="menu" id="employmentSituation" src="../assets/png/5.png" />
       <EmploymentSituation :working='dataAll.working'></EmploymentSituation>
       <img class="menu" id="education" src="../assets/png/6.png" />
-      <EducationPage></EducationPage>
+      <EducationPage :dataAll='dataAll'></EducationPage>
       <img class="menu" id="vaccination" src="../assets/png/7.png" />
       <VaccinationPage></VaccinationPage>
     </div>
@@ -93,6 +93,7 @@ export default {
         this.$store.getters.getSzdata.data.index
       ) {
         this.dataAll = this.$store.getters.getSzdata.data;
+        console.log('拿到首页全部数据', this.dataAll);
         clearInterval(clear);
       }
     }, 500);

shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue

@@ -1,350 +1,309 @@
 <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 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
+    <script>
+import ThreeDCharts from "../Utils/ThreeDCharts1.vue";
+export default {
+  props: ["dataAll"],
+  name: "EducationPage",
+  components: {
+    ThreeDCharts,
+  },
+  data() {
+    return {
+      school: [
+      ],
+      xlq: 0,
+      xx: 0,
+      cz: 0,
+      gz: 0,
+      dx: 0,
+      yjs: 0,
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.school = this.dataAll.school;
+      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,
+          };
         }
-      },
-      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:{
-
-      }
-    }
+      });
+    }, 1000);
+  },
+  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); */
+}
 
-
-    #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); */
-     }
+@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>
     

shuzhixiangzheng/src/components/Utils/ThreeDCharts.vue

@@ -58,7 +58,11 @@ export default {
       ],
     };
   },
-  mounted() {},
+  mounted() {
+    setTimeout(() => {
+      this.initData()
+    }, 1000);
+  },
   methods: {
     //数据匹配
     initData() {