m

shuzhixiangzheng/src/components/MainPage.vue

@@ -10,10 +10,12 @@
 
         <div id="left_div">
             <img class="menu" src="../assets/png/1.png"></img>
-                <ShunagzhongViewPage :szdata="data.index"></ShunagzhongViewPage>
+                <ShunagzhongViewPage ></ShunagzhongViewPage>
             <img class="menu" id="peopleStatus" src="../assets/png/2.png"></img>
+            <img id="person_status" src="../assets/png/people_status.png"></img>
                   <PersonStatusPage></PersonStatusPage>
             <img class="menu" id="insuredStatus" src="../assets/png/3.png"></img>
+            <img id="insured_status" src="../assets/png/insured_status.png"></img>
                   <InsuredPage></InsuredPage>
     
        </div>
@@ -186,16 +188,13 @@ export default {
       for(let i=0;i<boxCollection.length;i++){
           boxCollection[i].addEventListener("click",(event)=>{
             window.name=  window.cesiumMap.addLocationName(event)   ;
-     
           });
     }
-
     },
     getData(){
       SZZSY_httpGet(result=>{
         this.data=result.data;
-        // this.$store.commit('setDemoValue', this.data);  
-        console.log("this.data",this.data)
+        this.$store.commit('setSzdata',this.data);   
       },reuslt=>{})
     },
     to3DMap(){
@@ -247,6 +246,18 @@ export default {
  #education{
    top:45%
  }
+#person_status{
+  position: absolute;
+  top:30%;
+  left: 50%;
+  width: 30%;
+}
+#insured_status{
+  position: absolute;
+  bottom:5%;
+  left: 50%;
+  width: 20%;
+}
 
  #right_div{
     position: absolute;

shuzhixiangzheng/src/components/MainPageChild/InsuredPage.vue

@@ -1,12 +1,12 @@
 <template>
     <div id="insuredPage">
         <div id="myChart"></div>
-        <div id="legend">
+        <!-- <div id="legend">
             <div class="color1"></div>
             <div class="color2"></div>
             <div class="font1">医保参保</div>
             <div class="font2">社保参保</div>
-        </div>
+        </div> -->
     </div>
 </template>
     

shuzhixiangzheng/src/components/MainPageChild/KeyPopulationPage.vue

@@ -4,27 +4,27 @@
         <td>
           <span id="partyMemberNum">
             <span class="font">党员人数</span> <br>
-            <span class="number">10000</span> 
+            <span class="number">{{important.member}}</span> 
           </span>
           <span id="treatmentObjectNum">
             <span class="font" >优抚对象</span><br>
-            <span class="number" >10000</span> 
+            <span class="number" >{{important.specialCare}}</span> 
           </span>
           <span id="subsistenceAllowanceObjectNum">
             <span class="font" >低保对象</span><br>
-            <span class="number" >10000</span> 
+            <span class="number" >{{important.basicAllowance}}</span> 
           </span>
           <span id="shakeoffPovertyNum">
             <span class="font" >城市脱贫解困对象</span><br>
-            <span class="number" >10000</span> 
+            <span class="number" >{{0}}</span> 
           </span>
           <span id="disabledNum">
             <span class="font" >残疾人</span><br>
-            <span class="number" >10000</span> 
+            <span class="number" >{{important.deformed}}</span> 
           </span>
           <span id="liveAloneNum">
             <span class="font" >独居户</span><br>
-            <span class="number" >10000</span> 
+            <span class="number" >{{important.alone}}</span> 
           </span>
         </td>
        </tr>
@@ -38,11 +38,22 @@
       },
       data () {
         return {
-          msg: '',
+           important:{                        // -- 重点人群
+            specialCare:165,            //优抚对象
+            alone:455,            		//独居户
+            member:927,			//党员人数
+            basicAllowance:1336,	//低保对象
+            deformed:1102,                 //残疾人
+          }
         }
       },
       mounted(){
-  
+        let clear= setInterval(() => {
+          if(this.$store.getters.getSzdata.code===10000) {
+            this.important=this.$store.getters.getSzdata.data.important
+            clearInterval(clear)
+          }
+        }, 500);
       },
       methods:{
         

shuzhixiangzheng/src/components/MainPageChild/PersonStatusPage.vue

@@ -1,23 +1,34 @@
 <template>
-  <div id="personStatusPage">
-    <td id="num1">10000</td>
-    <td>
-      <div id="progress_container0">
-      </div>
-    </td>
-    <td id="num2">
-      月亮村
-    </td>
-     <td>
-       <div id="progress_both">
-        <div id="progress_container1">
+  <div id="personStatusPage" >
+    <!-- <div id="head">
+      <div class="font">流动人口</div>
+      <div class="font">户数</div>
+      <div class="font">人数</div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div> -->
+    <div id="row" v-for="(floatPeople,name,household,people) in population">
+      <td id="num1">{{floatPeople}}</td>
+      <td>
+        <div id="progress_container0">
         </div>
-        <div id="progress_container2"></div>
-       </div>
-    </td>
-    <td id="num3">
-      20000/20000
-    </td>
+      </td>
+      <td id="num2">
+        {{name}}
+      </td>
+       <td>
+         <div id="progress_both">
+          <div id="progress_container1">
+          </div>
+          <div id="progress_container2"></div>
+         </div>
+      </td>
+      <td id="num3">
+        {{household}}/{{people}}
+      </td>
+    </div>
+  
     
   </div>
   </template>
@@ -31,11 +42,26 @@
     },
     data () {
       return {
-        msg: '',
+          population:[              // -- 人口情况
+            {
+                name:"大中社区",   //社区名称
+                floatPeople:501,	//流动人口
+                household:893,		//户数
+                people:2200		  //人数
+            },
+        ],
+        str:""
       }
     },
     mounted(){
-
+      this.str=this.population[0].household+"/"+this.population[0].people;
+      let clear= setInterval(() => {
+          if(this.$store.getters.getSzdata.code===10000) {
+            this.population=this.$store.getters.getSzdata.data.population
+            console.log(this.population)
+            clearInterval(clear)
+          }
+        }, 500);
     },
     methods:{
       
@@ -46,6 +72,15 @@
   
   
   <style scoped>
+    .font{
+      position: absolute;
+      font-size: 10px;
+    }
+    #row{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
        #personStatusPage{
       position: absolute;
       width: 100%;

shuzhixiangzheng/src/components/MainPageChild/ShunagzhongViewPage.vue

@@ -5,11 +5,11 @@
             <td>
               <span id="peopleNum">
                 <span class="font">在籍人数</span> <br>
-                <span class="number">{{szdata.peoples}}</span> 
+                <span class="number">{{szdata?szdata.peoples:0}}</span> 
               </span>
               <span id="houseNum">
                 <span class="font" >户数</span><br>
-                <span class="number" >{{szdata.households}}</span> 
+                <span class="number" >{{szdata?szdata.households:0}}</span> 
               </span>
             </td>
            </tr>
@@ -18,11 +18,11 @@
             <td>
               <span id="villageNum">
                 <span class="font">小区数量</span> <br>
-                <span class="number">{{szdata.villages}}</span> 
+                <span class="number">{{szdata?szdata.villages:0}}</span> 
               </span>
               <span id="buildNum">
                 <span class="font" >建筑数量</span><br>
-                <span class="number" >{{szdata.buildings}}</span> 
+                <span class="number" >{{szdata?szdata.buildings:0}}</span> 
               </span>
             </td>
            </tr>
@@ -31,11 +31,11 @@
             <td>
               <span id="hasPropertyNum">
                 <span class="font">有物业小区</span> <br>
-                <span class="number">{{szdata.villagesWithCompany}}</span> 
+                <span class="number">{{szdata?szdata.villagesWithCompany:0}}</span> 
               </span>
               <span id="nohasPropertyNum">
                 <span class="font" >无物业小区</span><br>
-                <span class="number" >{{szdata.villagesWithoutCompany}}</span> 
+                <span class="number" >{{szdata?szdata.villagesWithoutCompany:0}}</span> 
               </span>
             </td>
            </tr>
@@ -46,25 +46,29 @@
      
     export default {
       name: 'ShunagzhongView',
-      props: ['szdata'],
+      // props: ['szdata'],
       components:{
   
       },
       data () {
         return {
-//           szdata:{				// -- 概况
-//             peoples:1,	//在籍人数
-//             villages:42,		//小区数量
-//             villagesWithCompany:33,	//由物业小区
-//             buildings:8049,			//建筑数量
-//             households:23653,			//户数
-//             villagesWithoutCompany:8		//无物业小区
-//         },
+          szdata:{				// -- 概况
+            peoples:77849,	//在籍人数
+            villages:42,		//小区数量
+            villagesWithCompany:33,	//由物业小区
+            buildings:8049,			//建筑数量
+            households:23653,			//户数
+            villagesWithoutCompany:8		//无物业小区
+        },
         }
       },
       mounted(){
-      //  this.szdata=this.$store.getters.getDemoValue
-        console.log(this.$store.getters.getDemoValue)
+      let clear= setInterval(() => {
+          if(this.$store.getters.getSzdata.code===10000) {
+            this.szdata=this.$store.getters.getSzdata.data.index
+            clearInterval(clear)
+          }
+        }, 500);
       },
       methods:{
         

shuzhixiangzheng/src/store/index.js

@@ -1,7 +1,26 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 Vue.use(Vuex);
-const store = new Vuex.Store();
+const store = new Vuex.Store({
+        state:{  //全局访问对象
+           szdata:{}
+        },
+        getters: {
+            getSzdata: state =>{
+               return state.szdata
+            } 
+        },      
+        mutations: {    
+        //set方法       
+        setSzdata(state,value){ 
+          state.szdata = value  
+          console.log(value) 
+         }           
+         },
+         actions:{
+             
+         }
+});
  
 export default store;
 

shuzhixiangzheng/src/store/module/szgk.js

@@ -1,30 +0,0 @@
-export default {
-
-        state: {
-    
-            //属性
-    
-            demoValue:{}
-    
-        },
-    
-        getters: {
-    
-            getDemoValue: state => state.demoValue
-    
-        },
-    
-        mutations: {
-    
-            //set方法
-    
-            setDemoValue(state,demoValue){
-    
-                state.demoValue = demoValue
-    
-            }
-    
-        }
-    
-    }
-