结构修改

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>