Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/jiangxiSZ

shuzhixiangzheng/src/components/DaZhongPage.vue

@@ -3,17 +3,17 @@
     <Time></Time>
     <ReturnButton></ReturnButton>
     
-    <img class="img" id="img1" src="../assets/png/footer.png"></img>
-    <img class="img" id="img2" src="../assets/png/title.png"></img>
-    <!-- <img class="img" id="img3" :src="leftPng_url"></img> -->
+    <img class="img" id="img1" src="../assets/png/footer.png" />
+    <img class="img" id="img2" src="../assets/png/title.png" />
+    <!-- <img class="img" id="img3" :src="leftPng_url" /> -->
     <LeftPage></LeftPage>
     <RightPage></RightPage>
-    <!-- <img class="img" id="img5" :src="rightPng_url"></img> -->
-    <img class="img" id="img4" src="../assets/png/pop.png"></img>
+    <!-- <img class="img" id="img5" :src="rightPng_url" /> -->
+    <img class="img" id="img4" src="../assets/png/pop.png" />
     <div id="child_form">
-      <img class="img" id="x_img" src="../assets/png/×.png" v-show="form_show" v-on:click="form_showFun"></img>
+      <img class="img" id="x_img" src="../assets/png/×.png" v-show="form_show" v-on:click="form_showFun" />
       <img class="img" id="form_img" :src="housePng_url" v-show="form_show">
-      </img>
+      / 
       <div id="numberDiv" v-show="number_show1">{{houseNum}}</div>
       <div id="numberDiv1" v-show="number_show2">{{houseNum}}</div>
       <el-table :header-cell-style="{background:'#0b61c5',color:'#fff','font-weight': 700}" v-show="form_show"
@@ -98,7 +98,7 @@
         <div class="house_class" id="house1_604"></div>
       </div>
     </div>
-    <img class="img" id="background_img" src="../assets/png/background.png" v-show="form_show"></img>
+    <img class="img" id="background_img" src="../assets/png/background.png" v-show="form_show" />
 
 
   </div>

shuzhixiangzheng/src/components/MainPage.vue

@@ -1,86 +1,72 @@
 <template>
   <div id="firstPage">
-      <!-- <img class="img" id="img1" src="../assets/png/title.png"></img> -->
-      <!-- <div  id="time_time">10:45:23</div>
+    <!-- <img class="img" id="img1" src="../assets/png/title.png" /> -->
+    <!-- <div  id="time_time">10:45:23</div>
       <div id="time_week">星期五</div>
       <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/first1.png"></img>
+    <Time></Time>
+    <img class="img" id="img2" src="../assets/png/title.png" />
+    <img class="img" id="first_img" src="../assets/png/first1.png" />
 
-        <div id="left_div">
-            <img class="menu" src="../assets/png/1.png"></img>
-                <ViewPage></ViewPage>
-            <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>
-       <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="left_div">
+      <img class="menu" src="../assets/png/1.png" />
+      <ViewPage></ViewPage>
+      <img class="menu" id="peopleStatus" src="../assets/png/2.png" />
+      <img id="person_status" src="../assets/png/people_status.png" />
+      <PersonStatusPage></PersonStatusPage>
+      <img class="menu" id="insuredStatus" src="../assets/png/3.png" />
+      <img id="insured_status" src="../assets/png/insured_status.png" />
+      <InsuredPage></InsuredPage>
+    </div>
+    <div id="right_div">
+      <img class="menu" id="importantPersonStatus" src="../assets/png/4.png" />
+      <KeyPopulationPage></KeyPopulationPage>
+      <img class="menu" id="employmentSituation" src="../assets/png/5.png" />
+      <EmploymentSituation></EmploymentSituation>
+      <img class="menu" id="education" src="../assets/png/6.png" />
+      <EducationPage></EducationPage>
+      <img class="menu" id="vaccination" src="../assets/png/7.png" />
+      <VaccinationPage></VaccinationPage>
+    </div>
 
-        <div id="click" class="click_class" v-on:click="to3DMap">
-        </div>
+    <div id="click" class="click_class" v-on:click="to3DMap"></div>
 
-        <div class="click_class" id="click_1" v-on:click="toZheji">
-        </div>
-        <div class="click_class"    id="click_2" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_3" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_4" v-on:click="toOther">
-        </div>
-        <div  id="click_5" v-on:click="toXiMen">
-        </div>
-        <div class="click_class"    id="click_6" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_7" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_8" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_9" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_10" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_11" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_12" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_13" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_14" v-on:click="toOther"> 
-        </div>
-        <div class="click_class"    id="click_15" v-on:click="toOther">
-        </div>
-        <div class="click_class"    id="click_16" v-on:click="toOther">
-        </div>
+    <div class="click_class" id="click_1" v-on:click="toZheji"></div>
+    <div class="click_class" id="click_2" v-on:click="toOther"></div>
+    <div class="click_class" id="click_3" v-on:click="toOther"></div>
+    <div class="click_class" id="click_4" v-on:click="toOther"></div>
+    <div id="click_5" v-on:click="toXiMen"></div>
+    <div class="click_class" id="click_6" v-on:click="toOther"></div>
+    <div class="click_class" id="click_7" v-on:click="toOther"></div>
+    <div class="click_class" id="click_8" v-on:click="toOther"></div>
+    <div class="click_class" id="click_9" v-on:click="toOther"></div>
+    <div class="click_class" id="click_10" v-on:click="toOther"></div>
+    <div class="click_class" id="click_11" v-on:click="toOther"></div>
+    <div class="click_class" id="click_12" v-on:click="toOther"></div>
+    <div class="click_class" id="click_13" v-on:click="toOther"></div>
+    <div class="click_class" id="click_14" v-on:click="toOther"></div>
+    <div class="click_class" id="click_15" v-on:click="toOther"></div>
+    <div class="click_class" id="click_16" v-on:click="toOther"></div>
   </div>
 </template>
 
 <script>
-  import Time from "./Time.vue"
-  import PersonStatusPage from "./MainPageChild/PersonStatusPage.vue"
-  import ViewPage from "./MainPageChild/ViewPage.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"
-  import {SZZSY_httpGet,SZZSQSY_httpGet,SZZXQ_httpGet} from "../assets/api/loadData.js"
+import Time from "./Time.vue";
+import PersonStatusPage from "./MainPageChild/PersonStatusPage.vue";
+import ViewPage from "./MainPageChild/ViewPage.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";
+import {
+  SZZSY_httpGet,
+  SZZSQSY_httpGet,
+  SZZXQ_httpGet,
+} from "../assets/api/loadData.js";
 export default {
-  name: 'MainPage',
-  components:{
+  name: "MainPage",
+  components: {
     Time,
     PersonStatusPage,
     ViewPage,
@@ -89,252 +75,249 @@ export default {
     EmploymentSituation,
     VaccinationPage,
     EducationPage,
-    VaccinationPage
-  },
-  data () {
-    return {
-     
-         
-    }
+    VaccinationPage,
   },
-  created(){
-  
+  data() {
+    return {};
   },
-  mounted(){
+  created() {},
+  mounted() {
     this.change();
   },
-  methods:{
-    
-    change(){
-      let boxCollection=document.getElementsByClassName("click_class");
-      for(let i=0;i<boxCollection.length;i++){
-          boxCollection[i].addEventListener("click",(event)=>{
-            window.name=  window.cesiumMap.addLocationName(event) ;
-            console.log("event",event);
-            setTimeout(() => {
-              this.changeData(event.view.name) ;
-            }, 1000);
-           
-          });
+  methods: {
+    change() {
+      let boxCollection = document.getElementsByClassName("click_class");
+      for (let i = 0; i < boxCollection.length; i++) {
+        boxCollection[i].addEventListener("click", (event) => {
+          window.name = window.cesiumMap.addLocationName(event);
+          console.log("event", event);
+          setTimeout(() => {
+            this.changeData(event.view.name);
+          }, 1000);
+        });
       }
     },
-    changeData(name){
-
-      SZZSQSY_httpGet(name,result=>{
-        console.log(name,result);
-        this.$store.commit('setDaZhongdata',result.data); 
-        this.$store.commit('setSzdata',result.data);
-      },result=>{})
+    changeData(name) {
+      SZZSQSY_httpGet(
+        name,
+        (result) => {
+          console.log(name, result);
+          this.$store.commit("setDaZhongdata", result.data);
+          this.$store.commit("setSzdata", result.data);
+        },
+        (result) => {}
+      );
     },
-    to3DMap(){
-      setTimeout(()=>{
+    to3DMap() {
+      setTimeout(() => {
         window.cesiumMap.removeGaode();
 
         window.cesiumMap.addEntity();
-      },100);
-     
-      this.$router.replace('/daZhong')
+      }, 100);
+
+      this.$router.replace("/daZhong");
     },
-    toZheji(){
+    toZheji() {
       window.cesiumMap.addGaode();
-      this.$router.replace('/zheJi')
+      this.$router.replace("/zheJi");
     },
-    toXiMen(){
+    toXiMen() {
       window.cesiumMap.loadximen();
-      window.cesiumMap.addLocationName({target:{
-        id:"click_5"
-      }});
-      this.$router.replace('/ximen')
+      window.cesiumMap.addLocationName({
+        target: {
+          id: "click_5",
+        },
+      });
+      this.$router.replace("/ximen");
     },
-    toOther(){
+    toOther() {
       window.cesiumMap.addGaode();
-      this.$router.replace('/other')
-    }
-  }
-}
+      this.$router.replace("/other");
+    },
+  },
+};
 </script>
 
 
 <style scoped>
-  #peopleStatus{
-    top:28%
-  }
-  #insuredStatus{
-    top:75%
-  }
-  #importantPersonStatus{
-    left: 10%;
-  }
-  #employmentSituation{
-    top:22%
-  }
-  #vaccination{
-    top:75%;
-    width: 200px;
-  }
- #education{
-   top:45%
- }
-#person_status{
+#peopleStatus {
+  top: 28%;
+}
+#insuredStatus {
+  top: 75%;
+}
+#importantPersonStatus {
+  left: 10%;
+}
+#employmentSituation {
+  top: 22%;
+}
+#vaccination {
+  top: 75%;
+  width: 200px;
+}
+#education {
+  top: 45%;
+}
+#person_status {
   position: absolute;
-  top:30%;
+  top: 30%;
   left: 50%;
   width: 30%;
 }
-#insured_status{
+#insured_status {
   position: absolute;
-  bottom:5%;
+  bottom: 5%;
   left: 50%;
   width: 20%;
 }
 
- #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%
-  }
+#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); */
+}
 
-  .font_background_png{
-    z-index: 119;
-    position: absolute;
-    top:-50%;
-    
-  }
+#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%;
-            height: 100%;
-            margin: 0;
-            padding: 0;
-      }
-      .img{
-            position: absolute;
-        }
-        #img1{
-            bottom:1%;
-            left: 50%; transform: translateX(-50%);
-            z-index:111;
-            width: 50%;
-        }
-        #img2{
-            top:-1%;
-            left: 50%; transform: translateX(-50%);
-            z-index:111;
-            width: 30%;
-        }
-        #first_img{
-            position: absolute;
-            z-index: 110;
-            width: 100%;
-            height: 100%;
-        }
-        .click_class{
-            position: absolute;
-            z-index: 111;
-            width: 80px;
-            height: 40px;
-            cursor: pointer;
-        }
-        #click{
-         
-           position: absolute;
-           z-index: 111;
-           width: 80px;
-           height: 40px;
-           left: 38%;
-           top: 33%;
-           cursor: pointer;
-       }
-       #click_1{
-           left: 54%;
-           top: 48%;
-       }
-       #click_2{
-           left: 47.5%;
-           top: 32.5%;
-       }
-       #click_3{
-           left: 57.5%;
-           top: 31%;
-       }
-       #click_4{
-           left: 41%;
-            top: 36%;
-       }
-       #click_5{
-           position: absolute;
-           z-index: 111;
-           width: 80px;
-           height: 40px;
-           left: 32%;
-            top: 38%;
-            cursor: pointer;
-       }
-       #click_6{
-           left: 36%;
-           top: 42%;
-       }
-       #click_7{
-           left: 42%;
-            top: 43%;
-       }
-       #click_8{
-           left: 52%;
-            top: 40%;
-       }
-       #click_9{
-           left: 52.5%;
-   top: 35%;
-       }
-       #click_10{
-           left: 51.5%;
-           top: 45%;
-       }
-       #click_11{
-           left: 59%;
-           top: 47%;
-       }
-       #click_12{
-           left: 63%;
-           top: 54%;
-       }
-       #click_13{
-           left: 38%;
-           top: 53%;
-       }
-       #click_14{
-           left: 27%;
-           top: 56%;
-       }
+#firstPage {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.img {
+  position: absolute;
+}
+#img1 {
+  bottom: 1%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 111;
+  width: 50%;
+}
+#img2 {
+  top: -1%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 111;
+  width: 30%;
+}
+#first_img {
+  position: absolute;
+  z-index: 110;
+  width: 100%;
+  height: 100%;
+}
+.click_class {
+  position: absolute;
+  z-index: 111;
+  width: 80px;
+  height: 40px;
+  cursor: pointer;
+}
+#click {
+  position: absolute;
+  z-index: 111;
+  width: 80px;
+  height: 40px;
+  left: 38%;
+  top: 33%;
+  cursor: pointer;
+}
+#click_1 {
+  left: 54%;
+  top: 48%;
+}
+#click_2 {
+  left: 47.5%;
+  top: 32.5%;
+}
+#click_3 {
+  left: 57.5%;
+  top: 31%;
+}
+#click_4 {
+  left: 41%;
+  top: 36%;
+}
+#click_5 {
+  position: absolute;
+  z-index: 111;
+  width: 80px;
+  height: 40px;
+  left: 32%;
+  top: 38%;
+  cursor: pointer;
+}
+#click_6 {
+  left: 36%;
+  top: 42%;
+}
+#click_7 {
+  left: 42%;
+  top: 43%;
+}
+#click_8 {
+  left: 52%;
+  top: 40%;
+}
+#click_9 {
+  left: 52.5%;
+  top: 35%;
+}
+#click_10 {
+  left: 51.5%;
+  top: 45%;
+}
+#click_11 {
+  left: 59%;
+  top: 47%;
+}
+#click_12 {
+  left: 63%;
+  top: 54%;
+}
+#click_13 {
+  left: 38%;
+  top: 53%;
+}
+#click_14 {
+  left: 27%;
+  top: 56%;
+}
 
-       #click_15{
-           left: 65%;
-           top: 43%;
-       }
-       #click_16{
-           left: 48.5%;
-           top: 27%;
-       }
+#click_15 {
+  left: 65%;
+  top: 43%;
+}
+#click_16 {
+  left: 48.5%;
+  top: 27%;
+}
 </style>

shuzhixiangzheng/src/components/MainPageChild/ViewPage.vue

@@ -1,153 +1,155 @@
 <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">{{szdata?szdata.peoples:0}}</span> 
-              </span>
-              <span id="houseNum">
-                <span class="font" >户数</span><br>
-                <span class="number" >{{szdata?szdata.households:0}}</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">{{szdata?szdata.villages:0}}</span> 
-              </span>
-              <span id="buildNum">
-                <span class="font" >建筑数量</span><br>
-                <span class="number" >{{szdata?szdata.buildings:0}}</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">{{szdata?szdata.villagesWithCompany:0}}</span> 
-              </span>
-              <span id="nohasPropertyNum">
-                <span class="font" >无物业小区</span><br>
-                <span class="number" >{{szdata?szdata.villagesWithoutCompany:0}}</span> 
-              </span>
-            </td>
-           </tr>
-    </div>
-    </template>
+  <div id="shunagzhongView">
+    <tr>
+      <td><img class="sign_png" src="../../assets/png/registered.png" /></td>
+      <td>
+        <span id="peopleNum">
+          <span class="font">在籍人数</span> <br />
+          <span class="number">{{ szdata ? szdata.peoples : 0 }}</span>
+        </span>
+        <span id="houseNum">
+          <span class="font">户数</span><br />
+          <span class="number">{{ szdata ? szdata.households : 0 }}</span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td><img class="sign_png1" src="../../assets/png/village.png" /></td>
+      <td>
+        <span id="villageNum">
+          <span class="font">小区数量</span> <br />
+          <span class="number">{{ szdata ? szdata.villages : 0 }}</span>
+        </span>
+        <span id="buildNum">
+          <span class="font">建筑数量</span><br />
+          <span class="number">{{ szdata ? szdata.buildings : 0 }}</span>
+        </span>
+      </td>
+    </tr>
+    <tr>
+      <td><img class="sign_png2" src="../../assets/png/property.png" /></td>
+      <td>
+        <span id="hasPropertyNum">
+          <span class="font">有物业小区</span> <br />
+          <span class="number">{{
+            szdata ? szdata.villagesWithCompany : 0
+          }}</span>
+        </span>
+        <span id="nohasPropertyNum">
+          <span class="font">无物业小区</span><br />
+          <span class="number">{{
+            szdata ? szdata.villagesWithoutCompany : 0
+          }}</span>
+        </span>
+      </td>
+    </tr>
+  </div>
+</template>
     
     <script>
-     
-    export default {
-      name: 'View',
-      // props: ['szdata'],
-      components:{
-  
+export default {
+  name: "View",
+  // props: ['szdata'],
+  components: {},
+  data() {
+    return {
+      szdata: {
+        // -- 概况
+        peoples: 77849, //在籍人数
+        villages: 42, //小区数量
+        villagesWithCompany: 33, //由物业小区
+        buildings: 8049, //建筑数量
+        households: 23653, //户数
+        villagesWithoutCompany: 8, //无物业小区
       },
-      data () {
-        return {
-          szdata:{				// -- 概况
-            peoples:77849,	//在籍人数
-            villages:42,		//小区数量
-            villagesWithCompany:33,	//由物业小区
-            buildings:8049,			//建筑数量
-            households:23653,			//户数
-            villagesWithoutCompany:8		//无物业小区
-        },
-        }
-      },
-      mounted(){
-        
-      let clear= setInterval(() => {
-        console.log(1111)
-          if(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)
-            clearInterval(clear)
-          }
-        }, 500);
-      },
-      methods:{
-        
+    };
+  },
+  mounted() {
+    let clear = setInterval(() => {
+      console.log(1111);
+      if (
+        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);
+        clearInterval(clear);
       }
-    }
-    </script>
+    }, 500);
+  },
+  methods: {},
+};
+</script>
     
     
  <style scoped>
-     #shunagzhongView{
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        color: #ffffff;
-     }
-  .sign_png{
-    position: absolute;
-    width: 80px;
-    left: 10%;
-    top:5%
-  }
+#shunagzhongView {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: #ffffff;
+}
+.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:14%
-  }
-  #buildNum{
-    position: absolute;
-      font-weight:bold;
-      left: 75%;
-      top:14%
-  }
- #hasPropertyNum{
+.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: 14%;
+}
+#buildNum {
+  position: absolute;
+  font-weight: bold;
+  left: 75%;
+  top: 14%;
+}
+#hasPropertyNum {
   position: absolute;
-      font-weight:bold;
-      left: 35%;
-      top:21%
- }
+  font-weight: bold;
+  left: 35%;
+  top: 21%;
+}
 
-#nohasPropertyNum{
+#nohasPropertyNum {
   position: absolute;
-      font-weight:bold;
-      left: 75%;
-      top:21%
- }
- .font{
-    font-size: 10px;
-  }
-  .number{
-    font-size: 30px;
-  }
-    </style>
+  font-weight: bold;
+  left: 75%;
+  top: 21%;
+}
+.font {
+  font-size: 10px;
+}
+.number {
+  font-size: 30px;
+}
+</style>
     

shuzhixiangzheng/src/components/OtherChilds/LeftPage.vue

@@ -1,75 +1,68 @@
 <template>
-    <div id="leftPage">
-            <img id="dazhong_img" src="../../assets/png/dazhong.png"> </img>
-            <div id="viewPage_f">
-              <ViewPage></ViewPage>
-            </div>
-            <img id="person_status_img" src="../../assets/png/2.png"></img>
-            <PepoleStatus></PepoleStatus>
-            <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png"> </img>
-            <Dezhizhaihai></Dezhizhaihai>
+  <div id="leftPage">
+    <img id="dazhong_img" src="../../assets/png/dazhong.png" />
+    <div id="viewPage_f">
+      <ViewPage></ViewPage>
     </div>
-  </template>
+    <img id="person_status_img" src="../../assets/png/2.png" />
+    <PepoleStatus></PepoleStatus>
+    <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png" />
+    <Dezhizhaihai></Dezhizhaihai>
+  </div>
+</template>
   
   <script>
-   import ViewPage from "../MainPageChild/ViewPage.vue"
-  import PepoleStatus from "../OtherChilds/PepoleStatus.vue"
-  import Dezhizhaihai from "./Dezhizhaihai.vue"
-    export default {
-      name: '',
-      components: {
-        ViewPage,
-        PepoleStatus,
-        Dezhizhaihai
-      },
-      data() {
-        return {
-         
-        }
-      },
-      mounted() {
-        
-      },
-      methods: {
-  
-      }
-    }
-  
-  </script>
+import ViewPage from "../MainPageChild/ViewPage.vue";
+import PepoleStatus from "../OtherChilds/PepoleStatus.vue";
+import Dezhizhaihai from "./Dezhizhaihai.vue";
+export default {
+  name: "",
+  components: {
+    ViewPage,
+    PepoleStatus,
+    Dezhizhaihai,
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
   
   
   <style scoped>
-        #viewPage_f {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: -10%;
-  }
+#viewPage_f {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: -10%;
+}
 
-   #person_status_img {
-    position: absolute;
-    width: 150px;
-    top: 30%
-  }
-  #leftPage{
-    position: absolute;
-    left: 2%;
-    top: 7%;
-    z-index: 2;
-    height: 93%;
-    width: 23%;
-    background-color: rgba(4, 11, 30, 0.6);
-  }
-  #dazhong_img {
-    position: absolute;
-    width: 200px;
-    top: -1%
-  }
+#person_status_img {
+  position: absolute;
+  width: 150px;
+  top: 30%;
+}
+#leftPage {
+  position: absolute;
+  left: 2%;
+  top: 7%;
+  z-index: 2;
+  height: 93%;
+  width: 23%;
+  background-color: rgba(4, 11, 30, 0.6);
+}
+#dazhong_img {
+  position: absolute;
+  width: 200px;
+  top: -1%;
+}
 
-  #dizhizaihai_img {
-    position: absolute;
-    width: 200px;
-    top: 70%
-  }
-  </style>
+#dizhizaihai_img {
+  position: absolute;
+  width: 200px;
+  top: 70%;
+}
+</style>
   

shuzhixiangzheng/src/components/OtherChilds/RightPage.vue

@@ -1,103 +1,99 @@
 <template>
-    <div id="rightPage">
-        <img class="menu" id="importantPersonStatus" src="../../assets/png/4.png"></img>
-        <KeyPopulationPage></KeyPopulationPage>
-        <img class="menu" id="employmentSituation" src="../../assets/png/5.png"></img>
-        <div id="chart_2">
-          <ThreeDCharts4></ThreeDCharts4>
-        </div>
-        <img class="menu" id="education" src="../../assets/png/6.png"></img>
-        <div id="education_dib">
-          <EdcationPage_shequ></EdcationPage_shequ>
-        </div>
-        
-        <img class="menu" id="vaccination" src="../../assets/png/7.png"></img>
-        <VaccinationPage></VaccinationPage>
+  <div id="rightPage">
+    <img class="menu" id="importantPersonStatus" src="../../assets/png/4.png" />
+    <KeyPopulationPage></KeyPopulationPage>
+    <img class="menu" id="employmentSituation" src="../../assets/png/5.png" />
+    <div id="chart_2">
+      <ThreeDCharts4></ThreeDCharts4>
     </div>
-  </template>
+    <img class="menu" id="education" src="../../assets/png/6.png" />
+    <div id="education_dib">
+      <EdcationPage_shequ></EdcationPage_shequ>
+    </div>
+
+    <img class="menu" id="vaccination" src="../../assets/png/7.png" />
+    <VaccinationPage></VaccinationPage>
+  </div>
+</template>
   
   <script>
-   import KeyPopulationPage from "../MainPageChild/KeyPopulationPage"
-   import ThreeDCharts4 from "../Utils/ThreeDCharts4"
-   import EdcationPage_shequ from "./EdcationPage_shequ"
-   import VaccinationPage from "../MainPageChild/VaccinationPage"
-    export default {
-      name: '',
-      components: {
-        KeyPopulationPage,
-        ThreeDCharts4,
-        EdcationPage_shequ,
-        VaccinationPage
-      },
-      data() {
-        return {
-          population: [ // -- 人口情况
-            {
-              name: "流动人口",
-              num: 501,
-              rate: "22.77"
-            },
-            {
-              name: "常住人口",
-              num: 1699,
-              rate: "77.23"
-            }
-          ],
-          czrk: 0,
-          ldrk: 0
-        }
-      },
-      mounted() {
-        
-      },
-      methods: {
-  
-      }
-    }
-  
-  </script>
+import KeyPopulationPage from "../MainPageChild/KeyPopulationPage";
+import ThreeDCharts4 from "../Utils/ThreeDCharts4";
+import EdcationPage_shequ from "./EdcationPage_shequ";
+import VaccinationPage from "../MainPageChild/VaccinationPage";
+export default {
+  name: "",
+  components: {
+    KeyPopulationPage,
+    ThreeDCharts4,
+    EdcationPage_shequ,
+    VaccinationPage,
+  },
+  data() {
+    return {
+      population: [
+        // -- 人口情况
+        {
+          name: "流动人口",
+          num: 501,
+          rate: "22.77",
+        },
+        {
+          name: "常住人口",
+          num: 1699,
+          rate: "77.23",
+        },
+      ],
+      czrk: 0,
+      ldrk: 0,
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
   
   
   <style scoped>
-    #education_dib{
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: -10%;
-    }
- #chart_2{
-   position: absolute;
-   width: 100%;
-   height: 100%;
-   left:-40%;
-   top:10%;
-   z-index: 3;
- }
-  #rightPage{
-    position: absolute;
-    z-index: 120;
-    color: azure;
-    z-index: 2;
-    height: 90%;
-    width: 23%;
-    top:10%;
-    right: 1%;
-    background-color: rgba(4, 11, 30, 0.6);
-  }
-  .menu{
-    position: absolute;
-    width: 150px;
-    left:5%
-  }
-  #employmentSituation{
-    top:22%
-  }
-  #vaccination{
-    top:75%;
-    width: 200px;
-  }
- #education{
-   top:45%
- }
-  </style>
+#education_dib {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: -10%;
+}
+#chart_2 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: -40%;
+  top: 10%;
+  z-index: 3;
+}
+#rightPage {
+  position: absolute;
+  z-index: 120;
+  color: azure;
+  z-index: 2;
+  height: 90%;
+  width: 23%;
+  top: 10%;
+  right: 1%;
+  background-color: rgba(4, 11, 30, 0.6);
+}
+.menu {
+  position: absolute;
+  width: 150px;
+  left: 5%;
+}
+#employmentSituation {
+  top: 22%;
+}
+#vaccination {
+  top: 75%;
+  width: 200px;
+}
+#education {
+  top: 45%;
+}
+</style>