m

shuzhixiangzheng/src/components/MainPage.vue

@@ -10,7 +10,7 @@
 
     <div id="left_div">
       <img class="menu" src="../assets/png/1.png" />
-      <ViewPage :szdata='szdata'></ViewPage>
+      <ViewPage :szdata='dataAll.index'></ViewPage>
       <img class="menu" id="peopleStatus" src="../assets/png/2.png" />
       <img id="person_status" src="../assets/png/people_status.png" />
       <PersonStatusPage></PersonStatusPage>
@@ -20,9 +20,9 @@
     </div>
     <div id="right_div">
       <img class="menu" id="importantPersonStatus" src="../assets/png/4.png" />
-      <KeyPopulationPage></KeyPopulationPage>
+      <KeyPopulationPage :important='dataAll.important'></KeyPopulationPage>
       <img class="menu" id="employmentSituation" src="../assets/png/5.png" />
-      <EmploymentSituation></EmploymentSituation>
+      <EmploymentSituation :working='dataAll.working'></EmploymentSituation>
       <img class="menu" id="education" src="../assets/png/6.png" />
       <EducationPage></EducationPage>
       <img class="menu" id="vaccination" src="../assets/png/7.png" />
@@ -79,14 +79,7 @@ export default {
   },
   data() {
     return {
-      szdata: {
-        // -- 概况
-        peoples: 0, //在籍人数
-        villages: 0, //小区数量
-        villagesWithCompany: 0, //由物业小区
-        buildings: 0, //建筑数量
-        households: 0, //户数
-        villagesWithoutCompany: 0, //无物业小区
+      dataAll: {
       }
     };
   },
@@ -99,8 +92,7 @@ export default {
         this.$store.getters.getSzdata.code === 10000 &&
         this.$store.getters.getSzdata.data.index
       ) {
-        this.szdata = this.$store.getters.getSzdata.data.index;
-        console.log("this.szdata", this.szdata);
+        this.dataAll = this.$store.getters.getSzdata.data;
         clearInterval(clear);
       }
     }, 500);

shuzhixiangzheng/src/components/MainPageChild/EmploymentSituation.vue

@@ -1,68 +1,67 @@
 <template>
-    <div id="employmentSituation">
-        <img class="ring_background_png" src="../../assets/png/ring_background.png"></img>
-        <div id="chart_1">
-          <ThreeDCharts></ThreeDCharts>
-        </div>
-      
-      
+  <div id="employmentSituation">
+    <img
+      class="ring_background_png"
+      src="../../assets/png/ring_background.png"
+    />
+    <div id="chart_1">
+      <ThreeDCharts :working='working'></ThreeDCharts>
     </div>
+  </div>
 </template>
     
 <script>
-     import ThreeDCharts from "../Utils/ThreeDCharts.vue"
-    export default {
-      name: 'EmploymentSituation',
-      components:{
-        ThreeDCharts
-      },
-      data () {
-        return {
-          msg: '',
-        }
-      },
-      mounted(){
-  
-      },
-      methods:{
-        
-      
-      }
-    }
+import ThreeDCharts from "../Utils/ThreeDCharts.vue";
+export default {
+  props:['working'],
+  name: "EmploymentSituation",
+  components: {
+    ThreeDCharts,
+  },
+  data() {
+    return {
+      msg: "",
+    };
+  },
+  mounted() {
+
+  },
+  methods: {},
+};
 </script>
     
     
  <style scoped>
-   #chart_1{
-     position: absolute;
-     width: 100%;
-     height: 100%;
-     top: -70%;
-    left: -26%
-   }
+#chart_1 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: -70%;
+  left: -26%;
+}
 
-   @media screen and (max-height: 1000px) {
-    #chart_1{
-     position: absolute;
-     width: 100%;
-     height: 100%;
-      top: -80%;
-      left: -26%
-   }
-   }
+@media screen and (max-height: 1000px) {
+  #chart_1 {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: -80%;
+    left: -26%;
+  }
+}
 
-     #employmentSituation{
-        position: absolute;
-        width: 100%;
-        height: 20%;
-        top:28%;
-        /* background-color: rgb(0, 0, 255,0.5); */
-     }
-     .ring_background_png{
-          position: absolute; 
-         width: 55%;
-         left: 30%;
-         top:10%
-     }
+#employmentSituation {
+  position: absolute;
+  width: 100%;
+  height: 20%;
+  top: 28%;
+  /* background-color: rgb(0, 0, 255,0.5); */
+}
+.ring_background_png {
+  position: absolute;
+  width: 55%;
+  left: 30%;
+  top: 10%;
+}
 </style>
     

shuzhixiangzheng/src/components/MainPageChild/KeyPopulationPage.vue

@@ -1,116 +1,100 @@
 <template>
-    <div id="keyPopulationPage">
-      <tr>
-        <td>
-          <span id="partyMemberNum">
-            <span class="font">党员人数</span> <br>
-            <span class="number">{{important.member}}</span> 
-          </span>
-          <span id="treatmentObjectNum">
-            <span class="font" >优抚对象</span><br>
-            <span class="number" >{{important.specialCare}}</span> 
-          </span>
-          <span id="subsistenceAllowanceObjectNum">
-            <span class="font" >低保对象</span><br>
-            <span class="number" >{{important.basicAllowance}}</span> 
-          </span>
-          <span id="shakeoffPovertyNum">
-            <span class="font" >城市脱贫解困对象</span><br>
-            <span class="number" >{{0}}</span> 
-          </span>
-          <span id="disabledNum">
-            <span class="font" >残疾人</span><br>
-            <span class="number" >{{important.deformed}}</span> 
-          </span>
-          <span id="liveAloneNum">
-            <span class="font" >独居户</span><br>
-            <span class="number" >{{important.alone}}</span> 
-          </span>
-        </td>
-       </tr>
-    </div>
+  <div id="keyPopulationPage">
+    <tr>
+      <td>
+        <span id="partyMemberNum">
+          <span class="font">党员人数</span> <br />
+          <span class="number">{{ important.member }}</span>
+        </span>
+        <span id="treatmentObjectNum">
+          <span class="font">优抚对象</span><br />
+          <span class="number">{{ important.specialCare }}</span>
+        </span>
+        <span id="subsistenceAllowanceObjectNum">
+          <span class="font">低保对象</span><br />
+          <span class="number">{{ important.basicAllowance }}</span>
+        </span>
+        <span id="shakeoffPovertyNum">
+          <span class="font">城市脱贫解困对象</span><br />
+          <span class="number">{{ 0 }}</span>
+        </span>
+        <span id="disabledNum">
+          <span class="font">残疾人</span><br />
+          <span class="number">{{ important.deformed }}</span>
+        </span>
+        <span id="liveAloneNum">
+          <span class="font">独居户</span><br />
+          <span class="number">{{ important.alone }}</span>
+        </span>
+      </td>
+    </tr>
+  </div>
 </template>
-    <script>   
-    export default {
-      name: 'KeyPopulationPage',
-      components:{
-  
-      },
-      data () {
-        return {
-           important:{                        // -- 重点人群
-            specialCare:165,            //优抚对象
-            alone:455,            		//独居户
-            member:927,			//党员人数
-            basicAllowance:1336,	//低保对象
-            deformed:1102,                 //残疾人
-          }
-        }
-      },
-      mounted(){
-        let clear= setInterval(() => {
-          if(this.$store.getters.getSzdata.code===10000&&this.$store.getters.getSzdata.data.important) {
-            this.important=this.$store.getters.getSzdata.data.important
-            clearInterval(clear)
-          }
-        }, 500);
-      },
-      methods:{
-        
-      
-      }
-    }
-    </script>
+    <script>
+export default {
+  props:['important'],
+  name: "KeyPopulationPage",
+  components: {},
+  data() {
+    return {
+    };
+  },
+  mounted() {
+
+  },
+  methods: {},
+};
+</script>
     
     
     <style scoped>
-    #keyPopulationPage{
-        position: absolute;
-        width: 100%;
-        height: 40%;
-    }
-    .font{
-      font-size: 10px;
-      color: rgb( 90,166,220);
-    }
-  .number{
-    font-size: 30px;
-  }
-  #partyMemberNum{
-    position: absolute;
-    font-weight:bold;
-    left: 15%;
-    top:15%
-  }
-  #treatmentObjectNum{
-    position: absolute;
-    font-weight:bold;
-    left: 45%;
-    top:15%
-  }
-  #subsistenceAllowanceObjectNum{
-    position: absolute;
-    font-weight:bold;
-    left: 75%;
-    top:15%
-  }
-  #shakeoffPovertyNum{
-    position: absolute;
-    font-weight:bold;
-    left: 15%;
-    top:35%
-  }
-  #disabledNum{
-    position: absolute;
-    font-weight:bold;
-    left: 45%;
-    top:35%
-  }
-  #liveAloneNum{
-    position: absolute;
-    font-weight:bold;
-    left: 75%;
-    top:35%
-  }
-    </style>
+#keyPopulationPage {
+  position: absolute;
+  width: 100%;
+  height: 40%;
+}
+.font {
+  font-size: 10px;
+  color: rgb(90, 166, 220);
+}
+.number {
+  font-size: 30px;
+}
+#partyMemberNum {
+  position: absolute;
+  font-weight: bold;
+  left: 15%;
+  top: 15%;
+}
+#treatmentObjectNum {
+  position: absolute;
+  font-weight: bold;
+  left: 45%;
+  top: 15%;
+}
+#subsistenceAllowanceObjectNum {
+  position: absolute;
+  font-weight: bold;
+  left: 75%;
+  top: 15%;
+}
+#shakeoffPovertyNum {
+  position: absolute;
+  font-weight: bold;
+  left: 15%;
+  top: 35%;
+}
+#disabledNum {
+  position: absolute;
+  font-weight: bold;
+  left: 45%;
+  top: 35%;
+}
+#liveAloneNum {
+  position: absolute;
+  font-weight: bold;
+  left: 75%;
+  top: 35%;
+}
+</style>