m

shuzhixiangzheng/src/components/MainPage.vue

@@ -29,312 +29,345 @@
       <VaccinationPage :vaccin='dataAll.vaccin'></VaccinationPage>
     </div>
 
-    <div id="click" class="click_class" v-on:click="to3DMap"></div>
-
-    <div class="click_class" name='叶家舍小区' id="click_1" v-on:click="toZheji"></div>
-    <div class="click_class" name='大岭社区' id="click_2" v-on:click="toOther"></div>
-    <div class="click_class" name='台山社区' id="click_3" v-on:click="toOther"></div>
-    <div class="click_class" name='云亭社区' id="click_4" v-on:click="toOther"></div>
-    <div  class="click_class" name='西门社区' id="click_5" v-on:click="toXiMen"></div>
-    <div class="click_class" name='江阀社区' id="click_6" v-on:click="toOther"></div>
-    <div class="click_class" name='莲湾社区' id="click_7" v-on:click="toOther"></div>
-    <div class="click_class" name='三里社区' id="click_8" v-on:click="toOther"></div>
-    <div class="click_class" name='江新社区' id="click_9" v-on:click="toOther"></div>
-    <div class="click_class" name='钟山社区' id="click_10" v-on:click="toOther"></div>
-    <div class="click_class" name='鄱湖社区' id="click_11" v-on:click="toOther"></div>
-    <div class="click_class" name='胜利村' id="click_12" v-on:click="toOther"></div>
-    <div class="click_class" name='月亮村' id="click_13" v-on:click="toOther"></div>
-    <div class="click_class" name='洪湖村' id="click_14" v-on:click="toOther"></div>
-    <div class="click_class" name='柏树社区' id="click_15" v-on:click="toOther"></div>
-    <div class="click_class" name='洋港社区' id="click_16" v-on:click="toOther"></div>
+    <div id="click" class="click_class" v-on:click="to3DMap('大中社区')"></div>
+
+    <div class="click_class" myName='叶家舍小区' id="click_1" v-on:click="toZheji('柘矶社区')"></div>
+    <div class="click_class" myName='大岭社区' id="click_2" v-on:click="toOther('大岭社区')"></div>
+    <div class="click_class" myName='台山社区' id="click_3" v-on:click="toOther('台山社区')"></div>
+    <div class="click_class" myName='云亭社区' id="click_4" v-on:click="toOther('云亭社区')"></div>
+    <div class="click_class" myName='西门社区' id="click_5" v-on:click="toXiMen('西门社区')"></div>
+    <div class="click_class" myName='江阀社区' id="click_6" v-on:click="toOther('江阀社区')"></div>
+    <div class="click_class" myName='莲湾社区' id="click_7" v-on:click="toOther('莲湾社区')"></div>
+    <div class="click_class" myName='三里社区' id="click_8" v-on:click="toOther('三里社区')"></div>
+    <div class="click_class" myName='江新社区' id="click_9" v-on:click="toOther('江新社区')"></div>
+    <div class="click_class" myName='钟山社区' id="click_10" v-on:click="toOther('钟山社区')"></div>
+    <div class="click_class" myName='鄱湖社区' id="click_11" v-on:click="toOther('鄱湖社区')"></div>
+    <div class="click_class" myName='胜利村' id="click_12" v-on:click="toOther('胜利村')"></div>
+    <div class="click_class" myName='月亮村' id="click_13" v-on:click="toOther('月亮村')"></div>
+    <div class="click_class" myName='洪湖村' id="click_14" v-on:click="toOther('洪湖村')"></div>
+    <div class="click_class" myName='柏树社区' id="click_15" v-on:click="toOther('柏树社区')"></div>
+    <div class="click_class" myName='洋港社区' 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";
-export default {
-  name: "MainPage",
-  components: {
-    Time,
-    PersonStatusPage,
-    ViewPage,
-    InsuredPage,
-    KeyPopulationPage,
-    EmploymentSituation,
-    VaccinationPage,
-    EducationPage,
-    VaccinationPage,
-  },
-  data() {
-    return {
-      dataAll: {
-      }
-    };
-  },
-  created() {},
-  mounted() {
-    this.change();
-    // 拿到首页数据，传给左侧的组件
-    let clear = setInterval(() => {
-      if (
-        this.$store.getters.getSzdata.code === 10000 &&
-        this.$store.getters.getSzdata.data.index
-      ) {
-        this.dataAll = this.$store.getters.getSzdata.data;
-        console.log('拿到首页全部数据', this.dataAll);
-        clearInterval(clear);
-      }
-    }, 500);
-  },
-  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);
-        });
-      }
+  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: {
+      Time,
+      PersonStatusPage,
+      ViewPage,
+      InsuredPage,
+      KeyPopulationPage,
+      EmploymentSituation,
+      VaccinationPage,
+      EducationPage,
+      VaccinationPage,
+    },
+    data() {
+      return {
+        dataAll: {}
+      };
     },
-    changeData(name) {
-      console.log("点击",name)
-      SZZSQSY_httpGet(
-        name,
-        (result) => {
-          console.log('sssssssssssssssssssssssss',name, result);
-           this.$store.commit("setDaZhongdata", result.data);
-          //this.$store.commit("setSzdata", result.data);
-        },
-        (result) => {
-          console.log(name, result)
+    created() {},
+    mounted() {
+      this.change();
+      // 拿到首页数据，传给左侧的组件
+      let clear = setInterval(() => {
+        if (
+          this.$store.getters.getSzdata.code === 10000 &&
+          this.$store.getters.getSzdata.data.index
+        ) {
+          this.dataAll = this.$store.getters.getSzdata.data;
+          console.log('拿到首页全部数据', this.dataAll);
+          clearInterval(clear);
         }
-      );
+      }, 500);
     },
-    to3DMap() {
-      setTimeout(() => {
-        window.cesiumMap.removeGaode();
+    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);
 
-        window.cesiumMap.addEntity();
-      }, 100);
+            // setTimeout(() => {
+            //   this.changeData(event.target.getAttribute("name"));
+            // }, 1000);
+          });
+        }
+      },
+      changeData(name) {
+        SZZSQSY_httpGet(
+          name,
+          (result) => {
+            console.log('sssssssssssssssssssssssss', name, result);
+            this.$store.commit("setDaZhongdata", result.data);
+            //this.$store.commit("setSzdata", result.data);
+          },
+          (result) => {
+            console.log(name, result)
+          }
+        );
+      },
+      to3DMap(name) {
+        setTimeout(() => {
+          this.changeData(name);
+          window.cesiumMap.removeGaode();
 
-      this.$router.replace("/daZhong");
-    },
-    toZheji() {
-      window.cesiumMap.addGaode();
-      this.$router.replace("/zheJi");
-    },
-    toXiMen() {
-      window.cesiumMap.loadximen();
-      window.cesiumMap.addLocationName({
-        target: {
-          id: "click_5",
-        },
-      });
-      this.$router.replace("/ximen");
-    },
-    toOther() {
-      window.cesiumMap.addGaode();
-      this.$router.replace("/other");
+          window.cesiumMap.addEntity();
+        }, 100);
+
+        this.$router.replace("/daZhong");
+      },
+      toZheji(name) {
+        this.changeData(name);
+        window.cesiumMap.addGaode();
+        this.$router.replace("/zheJi");
+      },
+      toXiMen(name) {
+        this.changeData(name);
+        window.cesiumMap.loadximen();
+        window.cesiumMap.addLocationName({
+          target: {
+            id: "click_5",
+          },
+        });
+        this.$router.replace("/ximen");
+      },
+      toOther(name) {
+        this.changeData(name);
+        window.cesiumMap.addGaode();
+        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 {
-  position: absolute;
-  top: 30%;
-  left: 50%;
-  width: 30%;
-}
-#insured_status {
-  position: absolute;
-  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%;
-}
-
-.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%;
-}
-
-#click_15 {
-  left: 65%;
-  top: 43%;
-}
-#click_16 {
-  left: 48.5%;
-  top: 27%;
-}
+  #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%;
+    left: 50%;
+    width: 30%;
+  }
+
+  #insured_status {
+    position: absolute;
+    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%;
+  }
+
+  .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%;
+  }
+
+  #click_15 {
+    left: 65%;
+    top: 43%;
+  }
+
+  #click_16 {
+    left: 48.5%;
+    top: 27%;
+  }
+
 </style>

shuzhixiangzheng/src/components/MainPageChild/InsuredPage.vue

@@ -61,7 +61,7 @@
 <style scoped>
   #yb {
     position: absolute;
-    width: 15%;
+    width: 20%;
     height: 15%;
     top: 35%;
     left: 13%;
@@ -75,7 +75,7 @@
     position: absolute;
     width: 15%;
     height: 15%;
-    top: 53%;
+    top: 50%;
     left: 13%;
     font-size: 12px;
     color: rgb(55, 180, 164);

shuzhixiangzheng/src/components/OtherChilds/EdcationPage_shequ.vue

@@ -72,7 +72,8 @@ export default {
   mounted() {
     const myTime = setInterval(() => {
       try {
-        this.school =this.dataAll.school
+          if(this.dataAll){
+            this.school =this.dataAll.school
         this.school.map((obj) => {
           if (obj.name == "学龄前") {
             this.xlq = {
@@ -106,6 +107,7 @@ export default {
             };
           }
         });
+          }
         clearInterval(myTime);
       } catch (error) {
         console.log(error);

shuzhixiangzheng/src/components/OtherPage.vue

@@ -4,7 +4,9 @@
       <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="../assets/png/柏树/left.png" v-show="baishu_show"></img>
+      <LeftPage :dataAll='dataAll' :isShow='isShow'></LeftPage>
+      <RightPage :dataAll='dataAll'></RightPage>
+      <!-- <img class="img" id="img3" src="../assets/png/柏树/left.png" v-show="baishu_show"></img>
       <img class="img"  id="img5" src="../assets/png/柏树/right.png" v-show="baishu_show"></img>
 
       <img class="img" id="img3" src="../assets/png/大岭社区/left.png" v-show="dalin_show"></img>
@@ -44,7 +46,7 @@
       <img class="img" id="img5" src="../assets/png/云亭社区/right.png" v-show="yunting_show"></img>
 
       <img class="img" id="img3" src="../assets/png/钟山社区/left.png" v-show="zhongshan_show"></img>
-      <img class="img" id="img5" src="../assets/png/钟山社区/right.png" v-show="zhongshan_show"></img>
+      <img class="img" id="img5" src="../assets/png/钟山社区/right.png" v-show="zhongshan_show"></img> -->
     </div>
   </template>
   
@@ -52,21 +54,23 @@
       import Time from "./Time.vue"
       import ReturnButton from "./ReturnButton.vue"
   import Map from "../assets/api/Map.js"
-  import left2Png from "../assets/png/left2.png"
-  import right2Png from "../assets/png/right2.png"
 
+  import LeftPage from "./OtherChilds/LeftPage.vue"
+  import RightPage from "./OtherChilds/RightPage.vue"
   export default {
     name: 'OrtherPage',
     components:{
     Time,
-    ReturnButton
+    ReturnButton,
+    RightPage,
+    LeftPage
     },
     data () {
       return {
+        isShow:true,
+        dataAll:{},
         msg: '',
         form_show:false,
-        leftPng_url:left2Png,
-        rightPng_url:right2Png,
         baishu_show:false,
         dalin_show:false,
         hongfu_show:false,
@@ -84,13 +88,19 @@
       }
     },
     mounted(){
-      // this.$nextTick(()=>{
-      //   console.log(2222)
-      //  this.init()
-      // })
-        setTimeout(()=>{
-          this.init()
-        },500);
+      let clear = setInterval(() => {
+        if (
+          this.$store.getters.getDaZhongdata.code === 10000 &&
+          this.$store.getters.getDaZhongdata.data
+        ) {
+          this.dataAll=this.$store.getters.getDaZhongdata.data
+          console.log('--------',this.dataAll);
+          clearInterval(clear);
+        }
+      }, 500);
+        // setTimeout(()=>{
+        //   this.init()
+        // },500);
     },
     methods:{
       init(){

shuzhixiangzheng/src/components/Utils/ThreeDCharts1.vue

@@ -556,24 +556,24 @@ export default {
   position: absolute;
   width: 100%;
   height: 100%;
-  top: -30%;
-  right: 130%;
+  top: -25%;
+  right: 120%;
 }
 
 .cityGreenLand-charts {
-  height: 300px;
-  width: 600px;
+  height: 400px;
+  width: 800px;
 }
 
 .num {
   position: absolute;
   width: 30%;
   height: 15%;
-  right: -75%;
-  top: 75%;
+  right: -70%;
+  top: 70%;
   font-weight: bold;
   /* background-color: rgb(255, 0, 0,0.3); */
-  font-size: 35px;
+  font-size: 34px;
 }
 
 @media screen and (max-height: 1000px) {

shuzhixiangzheng/src/components/Utils/ThreeDCharts3.vue

@@ -497,7 +497,34 @@
     /* background-color: rgb(255, 0, 0,0.3); */
     font-size: 35px;
   }
-
+  #number_2{
+      position: absolute;
+      width: 20%;
+      height: 20%;
+      left: 34%;
+      top:37%
+      /* background-color: rgb(255, 0, 0,0.3); */
+    }
+    #number_3{
+      position: absolute;
+      width: 60%;
+      height: 65%;
+      left: 1%;
+      top: 5%;
+      font-weight: bold;
+      /* background-color: rgb(255, 0, 0,0.3); */
+      font-size: 30px;
+    }
+    #number_4{
+      position: absolute;
+      width: 70%;
+      height: 65%;
+      right: 15%;
+      top: 71%;
+      font-weight: bold;
+      /* background-color: rgb(255, 0, 0,0.3); */
+      font-size: 15px;
+    }
   @media screen and (max-height: 1000px) {
     .water-eval-container {
       position: absolute;
@@ -523,11 +550,19 @@
       /* background-color: rgb(255, 0, 0,0.3); */
       font-size: 25px;
     }
+    
+    #number_2{
+      position: absolute;
+      width: 20%;
+      height: 20%;
+      left: 35%;
+      /* background-color: rgb(255, 0, 0,0.3); */
+    }
     #number_3{
       position: absolute;
       width: 60%;
       height: 65%;
-      right: 40%;
+      left: 1%;
       top: 5%;
       font-weight: bold;
       /* background-color: rgb(255, 0, 0,0.3); */
@@ -535,9 +570,9 @@
     }
     #number_4{
       position: absolute;
-      width: 60%;
+      width: 70%;
       height: 65%;
-      right: 35%;
+      right: 20%;
       top: 71%;
       font-weight: bold;
       /* background-color: rgb(255, 0, 0,0.3); */

shuzhixiangzheng/src/components/Utils/ThreeDCharts4.vue

@@ -11,7 +11,7 @@
   import echarts from 'echarts'
   import 'echarts-gl';
   export default {
-    props:['working'],
+    props: ['working'],
     name: "cityGreenLand",
     components: {},
     data() {
@@ -66,23 +66,26 @@
       }
     },
     mounted() {
-    const myTime = setInterval(() => {
-      try {
-        this.initData();
-        clearInterval(myTime);
-      } catch (error) {
-        console.log(error);
-      }
-    }, 500);
+      const myTime = setInterval(() => {
+        try {
+          this.initData();
+          clearInterval(myTime);
+        } catch (error) {
+          console.log(error);
+        }
+      }, 500);
     },
     methods: {
       //数据匹配
       initData() {
-        this.optionData.filter(result => result.name == '公职人员数')[0].value = +this.working.publicRate;
-        this.optionData.filter(result => result.name == '自主就业')[0].value = +this.working.privateRate;
-        this.optionData.filter(result => result.name == '企业员工')[0].value = +this.working.companyRate;
-        this.optionData.filter(result => result.name == '无业')[0].value = +this.working.noWorkingRate;
-        this.optionData.filter(result => result.name == '退休')[0].value = +this.working.retireRate;
+        if (this.working) {
+          this.optionData.filter(result => result.name == '公职人员数')[0].value = +this.working.publicRate;
+          this.optionData.filter(result => result.name == '自主就业')[0].value = +this.working.privateRate;
+          this.optionData.filter(result => result.name == '企业员工')[0].value = +this.working.companyRate;
+          this.optionData.filter(result => result.name == '无业')[0].value = +this.working.noWorkingRate;
+          this.optionData.filter(result => result.name == '退休')[0].value = +this.working.retireRate;
+        }
+
         this.init();
       },
       init() {
@@ -160,7 +163,7 @@
             let itemStyle = {};
             typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
             typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity :
-            null;
+              null;
             seriesItem.itemStyle = itemStyle;
           }
           series.push(seriesItem);
@@ -483,10 +486,11 @@
     height: 100%;
     /* top: -70%;
     left: -26% */
+    top: 2%
   }
 
   .cityGreenLand-charts {
-	position: absolute;
+    position: absolute;
     height: 400px;
     width: 800px;
   }
@@ -501,7 +505,16 @@
     /* background-color: rgb(255, 0, 0,0.3); */
     font-size: 35px;
   }
-
+  .num3 {
+      position: absolute;
+      width: 20%;
+      height: 5%;
+      right: 1%;
+      top: 16%;
+      font-weight: bold;
+      /* background-color: rgb(255, 0, 0,0.3); */
+      font-size: 35px;
+    }
   @media screen and (max-height: 1000px) {
     .water-eval-container {
       position: absolute;

shuzhixiangzheng/src/components/Utils/ThreeDCharts5.vue

@@ -73,7 +73,8 @@
     methods: {
       //数据匹配
       initData() {
-        this.optionData.filter(result => result.name == '文盲')[0].value = +this.education.filter(result => result.name ==
+        if(this.education){
+          this.optionData.filter(result => result.name == '文盲')[0].value = +this.education.filter(result => result.name ==
           '文盲')[0].rate;
         this.optionData.filter(result => result.name == '初中及以下')[0].value = +this.education.filter(result => result
           .name == '初中及以下')[0].rate;
@@ -85,6 +86,7 @@
           '本科')[0].rate;
         this.optionData.filter(result => result.name == '专科')[0].value = +this.education.filter(result => result.name ==
           '专科')[0].rate;
+        }
         this.init();
       },
       init() {
@@ -491,8 +493,8 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    top: -30%;
-    right:  130%
+    top: -20%;
+    right:  80%
   }
 
   .cityGreenLand-charts {
@@ -504,11 +506,11 @@
     position: absolute;
     width: 30%;
     height: 15%;
-    right: -75%;
-    top: 75%;
+    right: -46%;
+    top: 55%;
     font-weight: bold;
     /* background-color: rgb(255, 0, 0,0.3); */
-    font-size: 35px;
+    font-size: 25px;
   }
 
   @media screen and (max-height: 1000px) {

shuzhixiangzheng/src/components/ZheJiPage.vue

@@ -6,8 +6,8 @@
     <img class="img" id="img2" src="../assets/png/title.png" />
     <!-- <img class="img" id="img3" :src="left2Png_url" />
     <img class="img" id="img5" :src="right2Png_url" /> -->
-    <LeftPage></LeftPage>
-    <RightPage></RightPage>
+    <LeftPage :dataAll='dataAll' :isShow='isShow'></LeftPage>
+    <RightPage :dataAll='dataAll'></RightPage>
     <div id="child1_form" v-show="form_show">
       <img
         class="img"
@@ -80,6 +80,8 @@ export default {
   },
   data() {
     return {
+      isShow:true,
+        dataAll:{},
       myNum:1,
       total: 0,
       myData: {
@@ -113,6 +115,16 @@ export default {
       this.doEvent();
     });
     this.lxw_changeHouse();
+    let clear = setInterval(() => {
+        if (
+          this.$store.getters.getDaZhongdata.code === 10000 &&
+          this.$store.getters.getDaZhongdata.data
+        ) {
+          this.dataAll=this.$store.getters.getDaZhongdata.data
+          console.log('--------',this.dataAll);
+          clearInterval(clear);
+        }
+      }, 500);
   },
   methods: {
     // 分页器方法