地图

src/views/report/reportIndex.vue

@@ -22,11 +22,11 @@
                 <secondMap :isShowOther="isShowSecond"></secondMap>
             </div>
             <div id="thirdScreen" style="width:100%;height:100%;" v-if="isShowThird">
-                <thirdScreen :isShow="isShowThird"></thirdScreen>
+                <thirdScreen :isShow="isShowThird" @hidePage="hidePage"></thirdScreen>
             </div>
 
         </section>
-        <div class="buttonWrap" v-show="isShowOther">
+        <div class="buttonWrap" v-show="isShowPage">
             <p :class="currentScreen==1?'activeP':''" @click="handleToWhich(1)"></p>
             <p :class="currentScreen==2?'activeP':''" @click="handleToWhich(2)"></p>
             <p :class="currentScreen==3?'activeP':''" @click="handleToWhich(3)"></p>
@@ -56,7 +56,8 @@
                 isShowThird:false,
                 isShowForth:false,
                 isShowFifth:false,
-                currentScreen:1
+                currentScreen:1,
+                isShowPage:false
 
 
             }
@@ -66,6 +67,7 @@
             handleTo(type){
                 this.isShowFirst = false;
                 this.isShowOther = true;
+                this.isShowPage = true;
                 this.isShowSecond = true;
                 this.isWhich = type;
             },
@@ -93,6 +95,10 @@
                     this.isShowForth = false;
                     this.isShowFifth = true;
                 }
+            },
+
+            hidePage(data){
+                this.isShowPage = !data;
             }
 
 

src/views/report/thirdScreen.vue

@@ -47,7 +47,7 @@
             </div>
             <div>
                 <div id="projectNum"></div>
-                <p>项目数量</p>
+                <p @click="handleMap">项目数量</p>
             </div>
             <div>
                 <div id="infoKnowledge"></div>
@@ -58,15 +58,25 @@
                 <p>品牌</p>
             </div>
         </div>
+        <div class="worldMap" v-if="isShowWorldMap">
+            <worldMap></worldMap>
+        </div>
+        <div class="closeButton" v-show="isShowWorldMap">
+            <i class="iconfont icon-cuowu" @click="handleClose"></i>
+        </div>
     </div>
 </template>
 
 <script>
     import echarts from 'echarts';
     import '../../../public/js/techbook';
+    import worldMap from './worldMap';
     export default {
         name: "thirdScreen",
         props:['isShow'],
+        components:{
+            worldMap
+        },
         data(){
             return{
                 currentIndex:1,
@@ -404,6 +414,7 @@
                         data: [187430,99233,125490]
                     }
                 ],
+                isShowWorldMap:false
 
             }
         },
@@ -491,6 +502,16 @@
                 mapChart.style.height = '200px';
                 echartIndustry = echarts.init(mapChart,'techbook');
                 echartIndustry.setOption(this.platformEchartsOption, true);
+            },
+
+            //查看地图
+            handleMap(){
+                this.isShowWorldMap = true;
+                this.$emit("hidePage",true);
+            },
+
+            handleClose(){
+                this.isShowWorldMap = false;
             }
         },
         mounted(){
@@ -506,6 +527,7 @@
         background-size: 100%;
         color: #fff;
         padding-top: 50px;
+        position: relative;
         &>p{
             font-size: 30px;
         }
@@ -575,5 +597,22 @@
                 }
             }
         }
+        .worldMap{
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+        .closeButton{
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            cursor: pointer;
+            .icon-cuowu:before{
+                color: #D8D8D8;
+                font-size: 25px;
+            }
+        }
     }
 </style>
\ No newline at end of file