修改

shuzhixiangzheng/config/index.js

@@ -11,13 +11,13 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
-        target: 'http://101.132.109.234:8099/', //源地址 
-        changeOrigin: true, //改变源 
-        pathRewrite: { 
-          '^/api': 'http://101.132.109.234:8099/' //路径重写 
-          } 
-      } 
+      // '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
+      //   target: 'http://101.132.109.234:8099/', //源地址 
+      //   changeOrigin: true, //改变源 
+      //   pathRewrite: { 
+      //     '^/api': 'http://101.132.109.234:8099/' //路径重写 
+      //     } 
+      // } 
     },
 
     // Various Dev Server settings
@@ -52,7 +52,6 @@ module.exports = {
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     assetsPublicPath: './',
-
     /**
      * Source Maps
      */

shuzhixiangzheng/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.25.0",
+    "echarts": "^5.3.0",
     "element-ui": "^2.15.6",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"

shuzhixiangzheng/src/assets/api/loadData.js

@@ -2,7 +2,7 @@ import axios  from "axios";
 import { SZZ_URL } from "./urls";
 const base_url="http://101.132.109.234:8099/"
 export function httpGet(url,param,sucessFun,errorFun){
-    axios.get("/api"+url,{       // 还可以直接把参数拼接在url后边
+    axios.get(base_url+url,{       // 还可以直接把参数拼接在url后边
         params:param
     }).then(function(res){
         sucessFun(res)
@@ -12,7 +12,7 @@ export function httpGet(url,param,sucessFun,errorFun){
 }
 
 export function jinghuguoji_httpGet(param,sucessFun,errorFun){
-    axios.get("/api"+SZZ_URL,{       // 还可以直接把参数拼接在url后边
+    axios.get(base_url+SZZ_URL,{       // 还可以直接把参数拼接在url后边
         params:param
     }).then(function(res){
         sucessFun(res)

shuzhixiangzheng/src/components/DaZhongPage.vue

@@ -356,6 +356,7 @@
         }
 
         .house_class{
+          
          position: absolute;
          z-index: 114;
          width: 70px;
@@ -640,137 +641,166 @@
          top: 30%;
          
      }
+       
+     #numberDiv{
+        position: absolute;
+        z-index: 113;
+        width: 200px;
+        height: 100px;
+        left: 52%;
+        color: azure;
+        font-size: 35px;
+        top:19%
+    }
+    #numberDiv1{
+        position: absolute;
+        z-index: 113;
+        width: 200px;
+        height: 100px;
+        left: 52%;
+        color: azure;
+        font-size: 35px;
+        top:17%
+    }
+
+     #table{
+         position: absolute;
+         z-index: 103;
+         left: 50%;
+         top: 30%;
+         
+     }
         #house_101{
             left: 26%;
-            top: 87%;
+            top: 90%;
         }
         #house_102{
             left: 42%;
-            top: 87%;
+            top: 90%;
         }
         #house_201{
             left: 26%;
-            top: 83.5%;
+            top: 85.5%;
         }
         #house_202{
             left: 42%;
-            top: 83.5%;
+            top: 85.5%;
         }
         #house_301{
             left: 26%;
-            top: 79%;
+            top: 81%;
         }
         #house_302{
             left: 42%;
-            top: 79%;
+            top: 81%;
         }
         #house_401{
             left: 26%;
-            top: 75.5%;
+            top: 77.5%;
         }
         #house_402{
             left: 42%;
-            top: 75.5%;
+            top: 77.5%;
         }
         #house_501{
             left: 26%;
-            top: 71.5%;
+            top: 73.5%;
         }
         #house_502{
             left: 42%;
-            top: 71.5%;
+            top: 73.5%;
         }
         #house_601{
             left: 26%;
-            top: 68%;
+            top: 70%;
         }
         #house_602{
             left: 42%;
-            top: 68%;
+            top: 70%;
         }
 
 
         /* ------------------------------- */
         #house_701{
             left: 26%;
-            top: 64%;
+            top: 66%;
         } 
         #house_702{
             left: 42%;
-            top: 64%;
+            top: 66%;
         }
 
         #house_801{
             left: 26%;
-            top: 60.5%;
+            top: 62.5%;
         }
         #house_802{
             left: 42%;
-            top: 60.5%;
+            top:  62.5%;
         }
         #house_901{
             left: 26%;
-            top: 57%;
+            top: 59%;
         }
         #house_902{
             left: 42%;
-            top: 57%;
+            top: 59%;
         }
         #house_1001{
             left: 26%;
-            top: 53.5%;
+            top: 54.5%;
         }
         #house_1002{
             left: 42%;
-            top: 53.5%;
+            top: 54.5%;
         }
         #house_1101{
             left: 26%;
-            top: 50%;
+            top: 51%;
         }
         #house_1102{
             left: 42%;
-            top: 50%;
+            top: 51%;
         }
         #house_1201{
             left: 26%;
-            top: 46.5%;
+            top: 47%;
         }
         #house_1202{
             left: 42%;
-            top: 46.5%;
+            top: 47%;
         }
         #house_1301{
             left: 26%;
-            top: 42%;
+            top: 43%;
         }
         #house_1302{
             left: 42%;
-            top: 42%;
+            top: 43%;
         }
         #house_1401{
             left: 26%;
-            top: 38.5%;
+            top: 39.5%;
         }
         #house_1402{
             left: 42%;
-            top: 38.5%;
+            top: 39.5%;
         }
         #house_1501{
             left: 26%;
-            top: 35%;
+            top: 35.5%;
         }
         #house_1502{
             left: 42%;
-            top: 35%;
+            top: 35.5%;
         }
         #house_1601{
             left: 26%;
-            top: 31%;
+            top: 32%;
         }
         #house_1602{
             left: 42%;
-            top: 31%;
+            top: 32%;
         }
         #house_1701{
             left: 26%;

shuzhixiangzheng/src/components/MainPage.vue

@@ -6,7 +6,27 @@
       <div id="time_day">2021.05.16</div> -->
         <Time></Time>
         <img class="img" id="img2" src="../assets/png/title.png"></img>
-        <img class="img" id="first_img" src="../assets/png/first.png"></img>
+        <img class="img" id="first_img" src="../assets/png/first1.png"></img>
+
+        <div id="left_div">
+            <img class="menu" src="../assets/png/1.png"></img>
+                <ShunagzhongViewPage></ShunagzhongViewPage>
+            <img class="menu" id="peopleStatus" src="../assets/png/2.png"></img>
+                  <PersonStatusPage></PersonStatusPage>
+            <img class="menu" id="insuredStatus" src="../assets/png/3.png"></img>
+                  <InsuredStatus></InsuredStatus>
+    
+       </div>
+       <div id="right_div">
+          <img class="menu" id="importantPersonStatus" src="../assets/png/4.png"></img>
+          <KeyPopulationPage></KeyPopulationPage>
+          <img class="menu" id="employmentSituation" src="../assets/png/5.png"></img>
+          <EmploymentSituation></EmploymentSituation>
+          <img class="menu" id="education" src="../assets/png/6.png"></img>
+          <EducationPage></EducationPage>
+          <img class="menu" id="vaccination" src="../assets/png/7.png"></img>
+          <VaccinationPage></VaccinationPage>
+       </div>
 
         <div id="click" v-on:click="to3DMap">
         </div>
@@ -48,10 +68,25 @@
 
 <script>
   import Time from "./Time.vue"
+  import PersonStatusPage from "./MainPageChild/PersonStatusPage.vue"
+  import ShunagzhongViewPage from "./MainPageChild/ShunagzhongViewPage.vue"
+  import InsuredPage from "./MainPageChild/InsuredPage.vue"
+  import KeyPopulationPage from "./MainPageChild/KeyPopulationPage.vue"
+  import EmploymentSituation from "./MainPageChild/EmploymentSituation.vue"
+  import VaccinationPage from "./MainPageChild/VaccinationPage.vue"
+  import EducationPage from "./MainPageChild/EducationPage.vue"
 export default {
   name: 'MainPage',
   components:{
-    Time
+    Time,
+    PersonStatusPage,
+    ShunagzhongViewPage,
+    InsuredPage,
+    KeyPopulationPage,
+    EmploymentSituation,
+    VaccinationPage,
+    EducationPage,
+    VaccinationPage
   },
   data () {
     return {
@@ -103,33 +138,60 @@ export default {
 
 
 <style scoped>
-  
-  #time_time{
-            z-index: 113;
-            color: azure;
-            position: fixed;
-            font-size: 40px;
-            top: 1.5%;
-            right: 10%;
-        }
-        #time_week{
-            position: fixed;
-            width: 100px;
-            top: 2%;
-            right: 4%;
-            z-index: 111;
-            color: azure;
-            font-size: 12px;
-        }
-        #time_day{
-            position: fixed;
-            width: 100px;
-            top: 4%;
-            right: 4%;
-            z-index: 111;
-            color: azure;
-            font-size: 12px;
-        }
+  #peopleStatus{
+    top:30%
+  }
+  #insuredStatus{
+    top:75%
+  }
+  #importantPersonStatus{
+    left: 10%;
+  }
+  #employmentSituation{
+    top:30%
+  }
+  #vaccination{
+    top:75%;
+    width: 200px;
+  }
+ #education{
+   top:45%
+ }
+
+ #right_div{
+    position: absolute;
+    z-index: 120;
+    color: azure;
+    width: 25%;
+    height: 90%;
+    top:10%;
+    right: 1%;
+    /* background-color: rgb(0,0,0,0.1); */
+  }
+
+  #left_div{
+    position: absolute;
+    z-index: 120;
+    color: azure;
+    width: 25%;
+    height: 90%;
+    top:10%;
+    /* background-color: rgb(0,0,0,0.1); */
+  }
+  .menu{
+    position: absolute;
+    width: 150px;
+    left:10%
+  }
+
+  .font_background_png{
+    z-index: 119;
+    position: absolute;
+    top:-50%;
+    
+  }
+
+
       #firstPage{
           position: absolute;
           width: 100%;

shuzhixiangzheng/src/components/MainPageChild/EducationPage.vue

@@ -1,11 +1,14 @@
 <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>
-    </template>
-    
-    <script>
-     
+</template>
+    <script>  
     export default {
       name: 'EducationPage',
       components:{
@@ -23,14 +26,48 @@
         
       }
     }
-    </script>
+</script>
     
  <style scoped>
+     #td1{
+        font-weight:bold;
+        position: absolute;
+        left:10%;
+        top:15%
+     }
+     #td2{
+        font-weight:bold;
+        position: absolute;
+        left:40%;
+        top:15%
+     }
+     #td3{
+        font-weight:bold;
+        position: absolute;
+        left:70%;
+        top:15%
+     }
      #educationPage{
         position: absolute;
         width: 100%;
-        height: 100%;
+        height: 25%;
+        background-color: rgb(20, 10, 220,0.1);
+        top:52%;
+     }
+     #schoolStatus{
+         position: absolute;
+         font-family: "宋体";
+         font-weight:bold;
+         left:10%
+     }
+     #table_head{
+        position: absolute;
+        background-color:rgb(10,98,197) ;
+        font-size: 13px; 
+        top:10%;
+        width: 180px;
+        height: 30px;
+        left: 10%;
      }
- 
-    </style>
+</style>
     

shuzhixiangzheng/src/components/MainPageChild/EmploymentSituation.vue

@@ -0,0 +1,38 @@
+<template>
+    <div id="employmentSituation">
+      
+    </div>
+    </template>
+    
+    <script>
+     
+    export default {
+      name: 'EmploymentSituation',
+      components:{
+  
+      },
+      data () {
+        return {
+          msg: '',
+        }
+      },
+      mounted(){
+  
+      },
+      methods:{
+        
+      
+      }
+    }
+    </script>
+    
+    
+ <style scoped>
+     #employmentSituation{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+     }
+ 
+    </style>
+    

shuzhixiangzheng/src/components/MainPageChild/InsuredPage.vue

@@ -0,0 +1,39 @@
+<template>
+    <div id="insuredPage">
+      
+    </div>
+    </template>
+    
+    <script>
+     
+    export default {
+      name: 'InsuredPage',
+      components:{
+  
+      },
+      data () {
+        return {
+          msg: '',
+        }
+      },
+      mounted(){
+  
+      },
+      methods:{
+        
+      
+      }
+    }
+    </script>
+    
+    
+    <style scoped>
+         #insuredPage{
+        position: absolute;
+        width: 100%;
+        height: 40%;
+        top:37%
+      }
+    
+    </style>
+    

shuzhixiangzheng/src/components/MainPageChild/KeyPopulationPage.vue

@@ -0,0 +1,105 @@
+<template>
+    <div id="keyPopulationPage">
+      <tr>
+        <td>
+          <span id="partyMemberNum">
+            <span class="font">党员人数</span> <br>
+            <span class="number">10000</span> 
+          </span>
+          <span id="treatmentObjectNum">
+            <span class="font" >优抚对象</span><br>
+            <span class="number" >10000</span> 
+          </span>
+          <span id="subsistenceAllowanceObjectNum">
+            <span class="font" >低保对象</span><br>
+            <span class="number" >10000</span> 
+          </span>
+          <span id="shakeoffPovertyNum">
+            <span class="font" >城市脱贫解困对象</span><br>
+            <span class="number" >10000</span> 
+          </span>
+          <span id="disabledNum">
+            <span class="font" >残疾人</span><br>
+            <span class="number" >10000</span> 
+          </span>
+          <span id="liveAloneNum">
+            <span class="font" >独居户</span><br>
+            <span class="number" >10000</span> 
+          </span>
+        </td>
+       </tr>
+    </div>
+</template>
+    <script>   
+    export default {
+      name: 'KeyPopulationPage',
+      components:{
+  
+      },
+      data () {
+        return {
+          msg: '',
+        }
+      },
+      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:45%
+  }
+  #disabledNum{
+    position: absolute;
+    font-weight:bold;
+    left: 45%;
+    top:45%
+  }
+  #liveAloneNum{
+    position: absolute;
+    font-weight:bold;
+    left: 75%;
+    top:45%
+  }
+    </style>
+    

shuzhixiangzheng/src/components/MainPageChild/PersonStatusPage.vue

@@ -0,0 +1,103 @@
+<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>
+        <div id="progress_container2"></div>
+       </div>
+    </td>
+    <td id="num3">
+      20000/20000
+    </td>
+    
+  </div>
+  </template>
+  
+  <script>
+   
+  export default {
+    name: 'PersonStatusPage',
+    components:{
+
+    },
+    data () {
+      return {
+        msg: '',
+      }
+    },
+    mounted(){
+
+    },
+    methods:{
+      
+    
+    }
+  }
+  </script>
+  
+  
+  <style scoped>
+       #PersonStatusPage{
+      position: absolute;
+      width: 100%;
+      height: 40%;
+      background-color: rgb(48,115,248,0.1);
+      top:37%
+    }
+    #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{
+      left: 25%;
+      top:2%;
+      position: absolute;
+      width: 15%;
+      height: 5px;
+      background-color: rgb(48,115,248);
+    }
+    #progress_container1{
+      position: absolute;
+      width: 100%;
+      height: 5px;
+      background-color: rgb(55,179,163);
+    }
+    #progress_container2{
+      position: absolute;
+      width: 10%;
+      height: 5px;   
+      background-color: rgb(245,199,49);
+    }
+  </style>
+  

shuzhixiangzheng/src/components/MainPageChild/ShunagzhongViewPage.vue

@@ -0,0 +1,137 @@
+<template>
+    <div id="shunagzhongView">
+        <tr>
+            <td><img class="sign_png" src="../../assets/png/registered.png"></img></td>
+            <td>
+              <span id="peopleNum">
+                <span class="font">在籍人数</span> <br>
+                <span class="number">10000</span> 
+              </span>
+              <span id="houseNum">
+                <span class="font" >户数</span><br>
+                <span class="number" >10000</span> 
+              </span>
+            </td>
+           </tr>
+           <tr>
+            <td><img class="sign_png1" src="../../assets/png/village.png"></img></td>
+            <td>
+              <span id="villageNum">
+                <span class="font">小区数量</span> <br>
+                <span class="number">10000</span> 
+              </span>
+              <span id="buildNum">
+                <span class="font" >建筑数量</span><br>
+                <span class="number" >10000</span> 
+              </span>
+            </td>
+           </tr>
+           <tr>
+            <td><img class="sign_png2" src="../../assets/png/property.png"></img></td>
+            <td>
+              <span id="hasPropertyNum">
+                <span class="font">有物业小区</span> <br>
+                <span class="number">10000</span> 
+              </span>
+              <span id="nohasPropertyNum">
+                <span class="font" >无物业小区</span><br>
+                <span class="number" >10000</span> 
+              </span>
+            </td>
+           </tr>
+    </div>
+    </template>
+    
+    <script>
+     
+    export default {
+      name: 'ShunagzhongView',
+      components:{
+  
+      },
+      data () {
+        return {
+          msg: '',
+        }
+      },
+      mounted(){
+  
+      },
+      methods:{
+        
+      
+      }
+    }
+    </script>
+    
+    
+ <style scoped>
+     #shunagzhongView{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+     }
+  .sign_png{
+    position: absolute;
+    width: 80px;
+    left: 10%;
+    top:5%
+  }
+
+  .sign_png1{
+    position: absolute;
+    width: 80px;
+    left: 10%;
+    top:12%
+  }
+  .sign_png2{
+    position: absolute;
+    width: 80px;
+    left: 10%;
+    top:20%
+  }
+  #peopleNum{
+    position: absolute;
+    font-weight:bold;
+    left: 35%;
+    top:7%
+  }
+  #houseNum{
+    position: absolute;
+    font-weight:bold;
+    left: 75%;
+    top:7%
+  }
+  #villageNum{
+    position: absolute;
+    font-weight:bold;
+    left: 35%;
+    top:15%
+  }
+  #buildNum{
+    position: absolute;
+      font-weight:bold;
+      left: 75%;
+      top:15%
+  }
+ #hasPropertyNum{
+  position: absolute;
+      font-weight:bold;
+      left: 35%;
+      top:23%
+ }
+
+#nohasPropertyNum{
+  position: absolute;
+      font-weight:bold;
+      left: 75%;
+      top:23%
+ }
+ .font{
+    font-size: 10px;
+  }
+  .number{
+    font-size: 30px;
+  }
+    </style>
+    

shuzhixiangzheng/src/components/MainPageChild/VaccinationPage.vue

@@ -0,0 +1,39 @@
+<template>
+    <div id="vaccinationPage">
+      
+    </div>
+    </template>
+    
+    <script>
+     
+    export default {
+      name: 'VaccinationPage',
+      components:{
+  
+      },
+      data () {
+        return {
+          msg: '',
+        }
+      },
+      mounted(){
+  
+      },
+      methods:{
+        
+      
+      }
+    }
+    </script>
+    
+    
+    <style scoped>
+         #vaccinationPage{
+        position: absolute;
+        width: 100%;
+        height: 40%;
+
+      }
+    
+    </style>
+    

shuzhixiangzheng/src/components/Time.vue

@@ -39,7 +39,7 @@
   <style scoped>
     #time{
         position: absolute;
-            z-index: 110;
+            z-index: 130;
           
             /* width: 100%;
             height: 100%; */

shuzhixiangzheng/src/components/ZheJiPage.vue

@@ -115,14 +115,11 @@ export default {
       // console.log('当前页改变了', val)
       this.myData.pageNum = val;
       jinghuguoji_httpGet(
-        // console.log(999999999999,this.myNum),
         { ...this.myData, buildingNumber: this.myNum },
         (result) => {
           this.houseNum = this.myNum + "橦";
           this.yjs_tableData = result.data.data.list;
           this.totle = result.data.data.total;
-
-          // this.yjs_tableData.num=
         },
         () => {}
       );
@@ -147,14 +144,11 @@ export default {
     lxw_changeHouse() {
       let house1sCode = [1, 20];
 
-      // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
       jinghuguoji_httpGet(
         { ...this.myData, buildingNumber: 1 },
         (result) => {
           this.houseNum = "1" + "橦";
-          // console.log(11111111111, result);
           this.total = result.data.data.total;
-          // console.log(9999,this.total)
           this.yjs_tableData = result.data.data.list;
         },
         () => {}
@@ -164,40 +158,19 @@ export default {
           .getElementById("building_" + c)
           .addEventListener("click", () => {
             this.myNum=c,
-            // document.getElementById("form_img").src="./png/laoxianweisushe/"+c+".png";
               this.myData.pageNum = 1,
             jinghuguoji_httpGet(
               { ...this.myData, buildingNumber: c},
               (result) => {
-                // console.log(2222222222, result.data.data.total);
                 this.houseNum = c + "橦";
                 this.yjs_tableData = result.data.data.list;
                 this.total = result.data.data.total;
-                //  console.log(9999,this.total)
-                // this.yjs_tableData.num=
               },
               () => {}
             );
           });
       });
     },
-    addDataToTable() {
-      //  var currentData = [];
-      // for (let i = 0; i < 5; i++) {
-      //   currentData.push(this.yjs_tableData[this.currentTableIndex * 5 + i]);
-      // }
-      // this.yjs_tableData;
-      // let tbody = document.getElementById("tbody");
-      // for (let i = 0; i < currentData.length; i++) {
-      //   let tr = document.createElement("tr");
-      //   tbody.appendChild(tr);
-      //   for (let j in currentData[i]) {
-      //     let td = document.createElement("td");
-      //     td.innerHTML = currentData[i][j];
-      //   }
-      // }
-      // document.getElementById("yjxs_table");
-    },
   },
 };
 </script>