m

shuzhixiangzheng/src/components/DaZhongPage.vue

@@ -232,9 +232,12 @@
         this.leftPng_url = left1Png;
         this.rightPng_url = right1Png;
         console.log(333)
+       
         SZZXQ_httpGet("金湖国际",result=>{
             console.log("金湖国际",result)
             this.dataAll=result.data.data;
+            
+            // this.$store.commit("setDaZhongdata", result.data);
         },result=>{})
      //  this.$store.commit("setShowDZ", false);
         //  localStorage.setItem('showDZ',false)

shuzhixiangzheng/src/components/MainPageChild/ViewPage.vue

@@ -57,9 +57,9 @@ export default {
     };
   },
   mounted() {
-    setInterval(() => {
-      console.log('----------------------------------',this.szdata);
-    }, 100);
+    // setInterval(() => {
+    //   console.log('----------------------------------',this.szdata);
+    // }, 100);
     
   },
   methods: {},

shuzhixiangzheng/src/components/OtherChilds/LeftPage.vue

@@ -5,14 +5,14 @@
       <ViewPage :szdata="dataAll.index"></ViewPage>
     </div>
     <img id="person_status_img" src="../../assets/png/2.png" />
-    <PepoleStatus></PepoleStatus>
+    <PepoleStatus :pdata="dataAll.population"></PepoleStatus>
     <template v-if="isShow" >
       <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png" />
       <Dezhizhaihai :data='dataAll.damage' ></Dezhizhaihai>
     </template>
     <template v-else>
       <img id="populationStructure_img" src="../../assets/png/renkoujieguo.png" />
-      <PopulationStructure :data='dataAll.structure'></PopulationStructure>
+      <PopulationStructure :psdata='dataAll.structure'></PopulationStructure>
     </template>
   </div>
 </template>
@@ -39,9 +39,9 @@
     //   console.log('拿到数据', this.dataAll);
     //   this.showDZ = localStorage.getItem('showDZ')
     //   console.log("this.showDZ", this.showDZ)
-      setInterval(() => {
-        console.log(this.dataAll.structure)
-      }, 1000);
+      // setInterval(() => {
+      //   console.log(this.dataAll.structure)
+      // }, 1000);
     },
     methods: {},
   };

shuzhixiangzheng/src/components/OtherChilds/PepoleStatus.vue

@@ -6,7 +6,7 @@
     <img src="../../assets/png/yq_background.png" class="yq_background_img1" />
     <div class="ldrk_name">流动人口</div>
     <div class="ldrk_num">{{ldrk.num}}</div>
-    <ThreeDCharts3></ThreeDCharts3>
+    <ThreeDCharts3 :tdata="dd"></ThreeDCharts3>
   </div>
 </template>
 
@@ -14,39 +14,38 @@
   import ThreeDCharts3 from "../Utils/ThreeDCharts3.vue"
   export default {
     name: 'PepoleStatusPage',
+    props: ["pdata"],
     components: {
       ThreeDCharts3
     },
     data() {
       return {
-        population: [ // -- 人口情况
-          {
-            name: "流动人口",
-            num: 501,
-            rate: "22.77"
-          },
-          {
-            name: "常住人口",
-            num: 1699,
-            rate: "77.23"
-          }
-        ],
         czrk: 0,
-        ldrk: 0
+        ldrk: 0,
+        dd:{}
+      }
+    },
+    watch:{   
+      pdata(newVal,oldVal) {
+        this.init(newVal);
       }
     },
     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];
+      this.init(this.pdata);
+    },
+    methods: {
+      init(value){
+        let clear = setInterval(() => {
+        if ( value) {
+          this.dd=value
+          console.log("this.pdata",value)
+        //  this.population = this.$store.getters.getDaZhongdata.data.population
+          this.czrk = value.filter(result => result.name == '常住人口')[0];
+          this.ldrk = value.filter(result => result.name == '流动人口')[0];
           clearInterval(clear)
         }
       }, 500);
-    },
-    methods: {
-
+      }
     }
   }
 

shuzhixiangzheng/src/components/OtherChilds/PopulationStructure.vue

@@ -1,247 +1,258 @@
 <template>
-    <div id="populationStructure">
-        <img src="../../assets/png/renkoutuli.png" id="renkou">
-        <div id="pop"></div>
-    </div>
-  </template>
-  
-  <script>
-    import echarts from 'echarts'
-    export default {
-        props: ["data1"],
-      name: 'populationStructure',
-      components: {
-      },
-      data() {
-        return {   
-         
+  <div id="populationStructure">
+    <img src="../../assets/png/renkoutuli.png" id="renkou">
+    <div id="pop"></div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  export default {
+    props: ["psdata"],
+    name: 'populationStructure',
+    components: {},
+    data() {
+      return {
+
+      }
+    },
+    mounted() {
+      let clear = setInterval(() => {
+        console.log("this.data", this.psdata)
+        if (this.psdata) {
+          this.init()
+          clearInterval(clear)
         }
-      },
-      mounted() {
-          setInterval(() => {
-            console.log("this.data1",this.data1)
-          }, 500);
-          
-        if(this.data1){
-        this.init()
-    }
-      },
-      watch:{
+      }, 500);
+    },
+    watch: {
+
+    },
+    methods: {
+      init() {
+        var myChart = echarts.init(document.getElementById('pop'));
+        var xData = ["18以下", "18-60", "60-80", "80以上"];
+        var yData = [];
+        var shadowYData = [];
 
-      },
-      methods: {
-        init(){
-            var myChart = echarts.init(document.getElementById('pop'));
-		var xData = ["18以下", "18-60","60-80","80以上"];
-		var yData = [];
-		var shadowYData=[];
-        
-            this.data.map(c=>{
-                this.yData[0]=this.data.filter(d=>d.name=="18岁以下")[0].male;
-                this.yData[1]=this.data.filter(d=>d.name=="18-60岁")[0].male;
-                this.yData[2]=this.data.filter(d=>d.name=="60-80岁")[0].male;
-                this.yData[3]=this.data.filter(d=>d.name=="80岁以上")[0].male;
+        yData.push(this.psdata.filter(d => d.name == "18岁以下")[0].male);
+        yData.push(this.psdata.filter(d => d.name == "18-60岁")[0].male);
+        yData.push(this.psdata.filter(d => d.name == "60-80岁")[0].male);
+        yData.push(this.psdata.filter(d => d.name == "80岁以上")[0].male);
+
+        shadowYData.push(this.psdata.filter(d => d.name == "18岁以下")[0].total);
+        shadowYData.push(this.psdata.filter(d => d.name == "18-60岁")[0].total);
+        shadowYData.push(this.psdata.filter(d => d.name == "60-80岁")[0].total);
+        shadowYData.push(this.psdata.filter(d => d.name == "80岁以上")[0].total);
+
+        console.log("this.yData", this.yData)
+        console.log(this.shadowYData)
 
-                this.shadowYData[0]=this.data.filter(d=>d.name=="18岁以下")[0].total;
-                this.shadowYData[1]=this.data.filter(d=>d.name=="18-60岁")[0].total;
-                this.shadowYData[2]=this.data.filter(d=>d.name=="60-80岁")[0].total;
-                this.shadowYData[3]=this.data.filter(d=>d.name=="80岁以上")[0].total;
-            });
-            console.log("this.yData",this.yData)
-            console.log(this.shadowYData)
-      
         //#0D53CC
-		var color="#19dfdd";
-		var shadowColor="#0b5767";  
-		var barWidth=15;
-		var option = {
-			// backgroundColor: '#05233b',
-			"grid": {
-				"top": "25%",
-				"left": "-5%",
-				"bottom": "5%",
-				"right": "5%",
-				"containLabel": true
-			},
-			animation: false,
-			"xAxis": [{
-				"type": "category",
-				"data": xData,
-				"axisTick": {
-					"alignWithLabel": true
-				},
-				"nameTextStyle": {
-					"color": "#82b0ec"
-				},
-				"axisLine": {
-					show: false,
-					"lineStyle": {
-						"color": "#82b0ec"
-					}
-				},
-				"axisLabel": {
-					"textStyle": {
-						"color": color
-					},
-					margin: 30
-				}
-			}],
-			"yAxis": [{
-				show: false,
-				"type": "value",
-				"axisLabel": {
-					"textStyle": {
-						"color": "#fff"
-					},
-				},
-				"splitLine": {
-					"lineStyle": {
-						"color": "#0c2c5a"
-					}
-				},
-				"axisLine": {
-					"show": false
-				}
-			}],
-			"series": [
-				{
-					"name": "数据上椭圆",
-					type: 'pictorialBar',
-					symbolSize: [barWidth, 10],
-					symbolOffset: [0, -6],
-					symbolPosition: 'end',
-					z: 12,
-					// "label": {
-					// 	"normal": {
-					// 		"show": true,
-					// 		"position": "top",
-					// 		fontSize: 14,
-					// 		color: color,
-					// 		formatter:function(params,index){
-					// 			return params.value+"%";
-					// 		}
-					// 	}
-					// },
-					color: "#2DB1EF",
-					data: yData
-				},
-				{
-					name: '',
-					type: 'pictorialBar',
-					symbolSize: [barWidth, 10],
-					symbolOffset: [0, 7],
-					z: 12,
-					"color": color,
-					"data": yData
-				},
-				// {
-				// 	name: '',
-				// 	type: 'pictorialBar',
-				// 	symbolSize: [barWidth+5, 15],
-				// 	symbolOffset: [0, 12],
-				// 	z: 10,
-				// 	itemStyle: {
-				// 		normal: {
-				// 			color: 'transparent',
-				// 			borderColor: color,
-				// 			borderType: 'solid',
-				// 			borderWidth: 1
-				// 		}
-				// 	},
-				// 	data: yData
-				// },
-				// {
-				// 	name: '',
-				// 	type: 'pictorialBar',
-				// 	symbolSize: [barWidth+10, 20],
-				// 	symbolOffset: [0, 18],
-				// 	z: 10,
-				// 	itemStyle: {
-				// 		normal: {
-				// 			color: 'transparent',
-				// 			borderColor: color,
-				// 			borderType: 'solid',
-				// 			borderWidth: 2
-				// 		}
-				// 	},
-				// 	data: yData
-				// },
-				{
-					type: 'bar',
-					"barWidth": barWidth,
-					barGap: '10%', // Make series be overlap
-					barCateGoryGap: '10%',
-					itemStyle: {
-						normal: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
-									offset: 0,
-									color: "rgba(13,83,204,.7)"
-								},
-								{
-									offset: 1,
-									color: "rgba(13,83,204,.2)"
-								}
-							]), 
-						},
-					},
-					data: yData
-				},
-				{
-					"name": "阴影椭圆",
-					type: 'pictorialBar',
-					symbolSize: [barWidth, 10],
-					symbolOffset: [0, -6],
-					symbolPosition: 'end',
-					z: 12,
-					"label": {
-						"show": false,
-					},
-					 color: shadowColor,
-					data: shadowYData
-				},
-				{
-					name:"阴影柱体",
-					type: 'bar',
-					"barWidth": barWidth,
-					barCateGoryGap: '10%',
-					"zlevel": -1,
-					"barGap": "-100%",
-					itemStyle: {
-						color: shadowColor
-					},
-					data: shadowYData
-				},
-			]
-		};
+        var color = "#19dfdd";
+        var shadowColor = "#0b5767";
+        var barWidth = 15;
+        var option = {
+          // backgroundColor: '#05233b',
+          "grid": {
+            "top": "25%",
+            "left": "-5%",
+            "bottom": "5%",
+            "right": "5%",
+            "containLabel": true
+          },
+          animation: false,
+          "xAxis": [{
+            "type": "category",
+            "data": xData,
+            "axisTick": {
+              "alignWithLabel": true
+            },
+            "nameTextStyle": {
+              "color": "#82b0ec"
+            },
+            "axisLine": {
+              show: false,
+              "lineStyle": {
+                "color": "#82b0ec"
+              }
+            },
+            "axisLabel": {
+              "textStyle": {
+                "color": color
+              },
+              margin: 30
+            }
+          }],
+          "yAxis": [{
+            show: false,
+            "type": "value",
+            "axisLabel": {
+              "textStyle": {
+                "color": "#fff"
+              },
+            },
+            "splitLine": {
+              "lineStyle": {
+                "color": "#0c2c5a"
+              }
+            },
+            "axisLine": {
+              "show": false
+            }
+          }],
+          "series": [{
+              "name": "数据上椭圆",
+              type: 'pictorialBar',
+              symbolSize: [barWidth, 10],
+              symbolOffset: [0, -6],
+              symbolPosition: 'end',
+              z: 12,
+            //   "label": {
+            //   	"normal": {
+            //   		"show": true,
+            //   		"position": "top",
+            //   		fontSize: 12,
+            //   		color: color,
+            //   		formatter:function(params,index){
+            //   			return params.value;
+            //   		}
+            //   	}
+            //   },
+              color: "#2DB1EF",
+              data: yData
+            },
+            {
+              name: '',
+              type: 'pictorialBar',
+              symbolSize: [barWidth, 10],
+              symbolOffset: [0, 7],
+              z: 12,
+              "color": color,
+              "data": yData
+            },
+            // {
+            // 	name: '',
+            // 	type: 'pictorialBar',
+            // 	symbolSize: [barWidth+5, 15],
+            // 	symbolOffset: [0, 12],
+            // 	z: 10,
+            // 	itemStyle: {
+            // 		normal: {
+            // 			color: 'transparent',
+            // 			borderColor: color,
+            // 			borderType: 'solid',
+            // 			borderWidth: 1
+            // 		}
+            // 	},
+            // 	data: yData
+            // },
+            // {
+            // 	name: '',
+            // 	type: 'pictorialBar',
+            // 	symbolSize: [barWidth+10, 20],
+            // 	symbolOffset: [0, 18],
+            // 	z: 10,
+            // 	itemStyle: {
+            // 		normal: {
+            // 			color: 'transparent',
+            // 			borderColor: color,
+            // 			borderType: 'solid',
+            // 			borderWidth: 2
+            // 		}
+            // 	},
+            // 	data: yData
+            // },
+            {
+              type: 'bar',
+              "barWidth": barWidth,
+              barGap: '10%', // Make series be overlap
+              barCateGoryGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
+                      offset: 0,
+                      color: "rgba(13,83,204,.7)"
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(13,83,204,.2)"
+                    }
+                  ]),
+                },
+              },
+              data: yData
+            },
+            {
+              "name": "阴影椭圆",
+              type: 'pictorialBar',
+              symbolSize: [barWidth, 10],
+              symbolOffset: [0, -6],
+              symbolPosition: 'end',
+              z: 12,
+              "label": {
+                "show": false,
+              },
+              color: shadowColor,
+              data: shadowYData
+            },
+            {
+              name: "阴影柱体",
+              type: 'bar',
+              "barWidth": barWidth,
+              barCateGoryGap: '10%',
+              "zlevel": -1,
+              "barGap": "-100%",
+              itemStyle: {
+                color: shadowColor
+              },
+			//   "label": {
+            //   	"normal": {
+            //   		"show": true,
+            //   		"position": "bottom",
+            //   		fontSize: 12,
+            //   		color: color,
+            //   		formatter:function(params,index){
+						
+            //   			return params.value;
+            //   		}
+            //   	}
+            //   },
+              data: shadowYData
+            },
+          ]
+        };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
 
-        }
       }
     }
-  
-  </script>
-  
-  
-  <style scoped>
- #renkou{
+  }
+
+</script>
+
+
+<style scoped>
+  #renkou {
     position: absolute;
     width: 25%;
     right: 10%;
- }
-  #populationStructure{
-      position: absolute;
-      width: 100%;
-      height: 25%;
-      z-index: 2;
-      top:75%;
-    
   }
-  #pop{
+
+  #populationStructure {
+    position: absolute;
+    width: 100%;
+    height: 25%;
+    z-index: 2;
+    top: 75%;
+
+  }
+
+  #pop {
     position: absolute;
     width: 100%;
     height: 100%;
     /* background-color: rgb(0, 0, 255,0.4); */
   }
-  </style>
-  
+
+</style>

shuzhixiangzheng/src/components/Utils/ThreeDCharts3.vue

@@ -14,21 +14,10 @@
   import 'echarts-gl';
   export default {
     name: "cityGreenLand",
+    props: ['tdata'],
     components: {},
     data() {
       return {
-        population: [ // -- 人口情况
-          {
-            name: "流动人口",
-            num: 501,
-            rate: 22.77
-          },
-          {
-            name: "常住人口",
-            num: 1699,
-            rate: 77.23
-          }
-        ],
         optionData: [{
           name: '流动人口',
           value: 22.77,
@@ -44,15 +33,24 @@
         }],
       }
     },
+    watch:{   
+      working(newVal,oldVal) {
+        this.initData();
+      }
+    },
     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
-          console.log("this.population",this.population)
-          this.optionData.filter(result => result.name == '常住人口')[0].value = +this.population.filter(result =>
+     this.initData();
+    },
+    methods: {
+      //数据匹配
+      initData() {
+        let clear = setInterval(() => {
+        if (this.tdata instanceof Array) {
+        //  this.population = this.$store.getters.getDaZhongdata.data.population
+          this.optionData.filter(result => result.name == '常住人口')[0].value = +this.tdata.filter(result =>
             result.name ==
             '常住人口')[0].rate;
-          this.optionData.filter(result => result.name == '流动人口')[0].value = +this.population.filter(result =>
+          this.optionData.filter(result => result.name == '流动人口')[0].value = +this.tdata.filter(result =>
             result
             .name == '流动人口')[0].rate;
        
@@ -60,11 +58,6 @@
           clearInterval(clear)
         }
       }, 500);
-    },
-    methods: {
-      //数据匹配
-      initData() {
-
       },
       init() {
         //构建3d饼状图

shuzhixiangzheng/src/components/Utils/ThreeDCharts4.vue

@@ -66,19 +66,17 @@
       }
     },
     mounted() {
-      const myTime = setInterval(() => {
-        try {
-          this.initData();
-          clearInterval(myTime);
-        } catch (error) {
-          console.log(error);
-        }
-      }, 500);
+      this.initData()
+    },
+    watch:{   
+      working(newVal,oldVal) {
+        this.initData()
+      }
     },
     methods: {
       //数据匹配
       initData() {
-        if (this.working) {
+        if (this.working&&this.working.publicRate) {
           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;

shuzhixiangzheng/src/components/Utils/ThreeDCharts5.vue

@@ -10,12 +10,11 @@
   import echarts from 'echarts'
   import 'echarts-gl';
   export default {
-    props:['education'],
+    props: ['education'],
     name: "cityGreenLand",
     components: {},
     data() {
       return {
-        education: [],
         optionData: [{
             name: '文盲',
             value: 0.98,
@@ -61,31 +60,34 @@
       }
     },
     mounted() {
-    const myTime = setInterval(() => {
-      try {
-        this.initData();
-        clearInterval(myTime);
-      } catch (error) {
-        console.log(error);
+      this.initData()
+    },
+    watch: {
+      education(newVal,oldVal) {
+        this.initData()
       }
-    }, 500);
     },
     methods: {
       //数据匹配
       initData() {
-        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;
-        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;
-        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;
+        if (this.education instanceof Array) {
+          console.log("this.education",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;
+          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;
+          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;
         }
         this.init();
       },
@@ -126,8 +128,6 @@
         myChart.on('mouseover', function (params) {
           let num = optionData.filter(result => result.name == params.seriesName);
           if (num.length != 0) {
-            console.log(num[0].value)
-            console.log()
             document.getElementById("number_1").innerText = num[0].value + "%"
           }
         });
@@ -494,7 +494,7 @@
     width: 100%;
     height: 100%;
     top: -20%;
-    right:  80%
+    right: 80%
   }
 
   .cityGreenLand-charts {
@@ -515,12 +515,13 @@
 
   @media screen and (max-height: 1000px) {
     .water-eval-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: -40%;
-    right:  130%
-  }
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: -40%;
+      right: 130%
+    }
+
     .cityGreenLand-charts {
       height: 400px;
       width: 800px;