m

shuzhixiangzheng/src/components/OtherChilds/LeftPage.vue

@@ -26,7 +26,9 @@ export default {
   data() {
     return {};
   },
-  mounted() {},
+  mounted() {
+    console.log('拿到数据',this.dataAll);
+  },
   methods: {},
 };
 </script>

shuzhixiangzheng/src/components/OtherChilds/PepoleStatus.vue

@@ -2,184 +2,179 @@
   <div id="pepoleStatusPage">
     <img src="../../assets/png/yq_background.png" class="yq_background_img" />
     <div class="czrk_name">常住人口</div>
-    <div class="czrk_num">{{ czrk.num }}</div>
+    <div class="czrk_num">{{czrk.num}}</div>
     <img src="../../assets/png/yq_background.png" class="yq_background_img1" />
     <div class="ldrk_name">流动人口</div>
-    <div class="ldrk_num">{{ ldrk.num }}</div>
+    <div class="ldrk_num">{{ldrk.num}}</div>
     <ThreeDCharts3></ThreeDCharts3>
   </div>
 </template>
 
 <script>
-import ThreeDCharts3 from "../Utils/ThreeDCharts3.vue";
-export default {
-  name: "PepoleStatusPage",
-  components: {
-    ThreeDCharts3,
-  },
-  data() {
-    return {
-      population: [
-        // -- 人口情况
-        {
-          name: "流动人口",
-          num: 501,
-          rate: "22.77",
-        },
-        {
-          name: "常住人口",
-          num: 1699,
-          rate: "77.23",
-        },
-      ],
-      czrk: 0,
-      ldrk: 0,
-    };
-  },
-  mounted() {
-    let clear = setInterval(() => {
-      if (
-        this.$store.getters.getSzdata.code === 10000 &&
-        this.$store.getters.getDaZhongdata.data &&
-        this.$store.getters.getDaZhongdata.data.population
-      ) {
-        this.population = this.$store.getters.getDaZhongdata.data.population;
-        this.czrk = this.population.filter(
-          (result) => result.name == "常住人口"
-        )[0];
-        this.ldrk = this.population.filter(
-          (result) => result.name == "流动人口"
-        )[0];
-        clearInterval(clear);
+  import ThreeDCharts3 from "../Utils/ThreeDCharts3.vue"
+  export default {
+    name: 'PepoleStatusPage',
+    components: {
+      ThreeDCharts3
+    },
+    data() {
+      return {
+        population: [ // -- 人口情况
+          {
+            name: "流动人口",
+            num: 501,
+            rate: "22.77"
+          },
+          {
+            name: "常住人口",
+            num: 1699,
+            rate: "77.23"
+          }
+        ],
+        czrk: 0,
+        ldrk: 0
       }
-    }, 500);
-  },
-  methods: {},
-};
+    },
+    mounted() {
+      let clear = setInterval(() => {
+        if (this.$store.getters.getSzdata.code === 10000&&this.$store.getters.getDaZhongdata.data&&this.$store.getters.getDaZhongdata.data.population) {
+          this.population = this.$store.getters.getDaZhongdata.data.population
+          this.czrk = this.population.filter(result => result.name == '常住人口')[0];
+          this.ldrk = this.population.filter(result => result.name == '流动人口')[0];
+          clearInterval(clear)
+        }
+      }, 500);
+    },
+    methods: {
+
+    }
+  }
+
 </script>
 
 
 <style scoped>
-.czrk_name {
-  position: absolute;
-  color: rgb(4, 185, 202);
-  font-weight: bold;
-  left: 18%;
-  top: 8%;
-}
-
-.czrk_num {
-  position: absolute;
-  left: 18%;
-  top: 15%;
-  color: rgb(250, 207, 44);
-  font-size: 25px;
-  font-weight: bold;
-}
-
-.ldrk_name {
-  position: absolute;
-  color: rgb(4, 185, 202);
-  font-weight: bold;
-  left: 68%;
-  top: 8%;
-}
-
-.ldrk_num {
-  position: absolute;
-  left: 70%;
-  top: 15%;
-  font-size: 25px;
-  color: rgb(250, 207, 44);
-  font-weight: bold;
-}
-
-.yq_background_img {
-  position: absolute;
-  width: 30%;
-  left: 10%;
-  top: 5%;
-}
-
-.yq_background_img1 {
-  position: absolute;
-  width: 30%;
-  left: 60%;
-  top: 5%;
-}
-
-.font {
-  position: absolute;
-  font-size: 10px;
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 5%;
-}
-
-#pepoleStatusPage {
-  position: absolute;
-  width: 100%;
-  height: 43%;
-  /* background-color: rgb(48,115,248,0.1); */
-  top: 36%;
-  z-index: 2;
-  color: rgb(255, 255, 255);
-}
-
-.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 {
-  right: 62%;
-  position: absolute;
-  width: 15%;
-  height: 5px;
-  background-color: rgb(48, 115, 248);
-}
-
-.progress_container1 {
-  position: absolute;
-  width: 30%;
-  left: 52%;
-  height: 5px;
-  background-color: rgb(55, 179, 163);
-}
-
-.progress_container2 {
-  position: absolute;
-  width: 10%;
-  height: 5px;
-  left: 52%;
-  background-color: rgb(245, 199, 49);
-}
+  .czrk_name {
+    position: absolute;
+    color: rgb(4, 185, 202);
+    font-weight: bold;
+    left: 18%;
+    top: 8%
+  }
+
+  .czrk_num {
+    position: absolute;
+    left: 18%;
+    top: 15%;
+    color: rgb(250, 207, 44);
+    font-size: 25px;
+    font-weight: bold;
+  }
+
+  .ldrk_name {
+    position: absolute;
+    color: rgb(4, 185, 202);
+    font-weight: bold;
+    left: 68%;
+    top: 8%
+  }
+
+  .ldrk_num {
+    position: absolute;
+    left: 70%;
+    top: 15%;
+    font-size: 25px;
+    color: rgb(250, 207, 44);
+    font-weight: bold;
+  }
+
+  .yq_background_img {
+    position: absolute;
+    width: 30%;
+    left: 10%;
+    top: 5%
+  }
+
+  .yq_background_img1 {
+    position: absolute;
+    width: 30%;
+    left: 60%;
+    top: 5%
+  }
+
+  .font {
+    position: absolute;
+    font-size: 10px;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 5%;
+  }
+
+  #pepoleStatusPage {
+    position: absolute;
+    width: 100%;
+    height: 43%;
+    /* background-color: rgb(48,115,248,0.1); */
+    top: 36%;
+    z-index: 2;
+    color: rgb(255, 255, 255);
+  }
+
+  .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 {
+    right: 62%;
+    position: absolute;
+    width: 15%;
+    height: 5px;
+    background-color: rgb(48, 115, 248);
+  }
+
+  .progress_container1 {
+    position: absolute;
+    width: 30%;
+    left: 52%;
+    height: 5px;
+    background-color: rgb(55, 179, 163);
+  }
+
+  .progress_container2 {
+    position: absolute;
+    width: 10%;
+    height: 5px;
+    left: 52%;
+    background-color: rgb(245, 199, 49);
+  }
+
 </style>