加弹框以及调整

src/views/hzcxbb/szkb/index.vue

 <template>
+  <!-- -->
   <div v-loading='isLoading' element-loading-text="数据载入中..." id="szkb">
     <!-- <Dialog :app='dialog' v-if="dialog.showDialog" /> -->
-    <Yszx :app='dialog' v-if="dialog.showDialog" />
+    <Yszx :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='Yszx'" />
+    <R1 :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='R1'"  />
+    <R1 :app='dialog' v-if="dialog.showDialog&&dialog.DialogName=='R2'"  />
     <!-- 弹框区域-->
+
     <div class="title">
       大数据展示平台
     </div>
@@ -14,9 +18,9 @@
           <i class="i2"></i>
           <i class="i3"></i>
           <i class="i4"></i>
-          <div class="full" style="height: 50%;">
+          <div class="full" style="height: 100%;">
             <span class="com-count-title">
-              {{lqndylName1}}
+              {{'业务预算总体执行情况(按单位)'}}
             </span>
             <div v-echartResize="()=>{
               if(lg1){
@@ -27,7 +31,7 @@
 
             </div>
           </div>
-          <div class="full" style="height: 50%;">
+  <!--       <div class="full" style="height: 50%;">
             <span class="com-count-title">
               {{lqndylName2}}
             </span>
@@ -38,7 +42,7 @@
            }" ref="lg2" class="com-count-body">
 
             </div>
-          </div>
+          </div> -->
         </div>
 
       </div>
@@ -52,13 +56,13 @@
           <i class="i4"></i>
           <!-- 排行数据-->
           <div style="color: #61d2f7;float: left;font-size: .9vw;margin-top: 2vh;margin-left: 2vh;">
-            总体排名:1
-            <br>
-            资本排名:2
-            <br>
-            成本项目:2
-            <br>
-            标准成本:2
+            <pre>
+            总体排名: 1
+            资本排名: 2
+            成本排名
+            -成本项目:2
+            -标准成本:2
+            </pre>
           </div>
           <div class="full" ref="szkbmap" v-echartResize="()=>{
              szkbmapCharts.resize()
@@ -69,14 +73,14 @@
       </div>
       <div class="third">
 
-        <div class="itemmain boxall itembg ">
+        <div  @click="openR1" style="cursor: pointer;" class="itemmain boxall itembg ">
           <i class="i1"></i>
           <i class="i2"></i>
           <i class="i3"></i>
           <i class="i4"></i>
-          <div class="full" style="height: 50%;">
+          <div class="full" style="height: 100%;">
             <span class="com-count-title">
-              {{lhName1}}
+              {{'资本性预算执行情况(按单位)'}}
             </span>
             <div v-echartResize="()=>{
               if(lg3){
@@ -86,7 +90,7 @@
 
             </div>
           </div>
-          <div class="full" style="height: 50%;">
+<!--          <div class="full" style="height: 50%;">
             <span class="com-count-title">
               {{lhName2}}
             </span>
@@ -97,7 +101,7 @@
             }" ref="lg4" class="com-count-body">
 
             </div>
-          </div>
+          </div> -->
         </div>
 
       </div>
@@ -111,11 +115,9 @@
           <i class="i4"></i>
           <div class="full itembg ">
             <!-- 轮播图-->
-            <el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
-              :autoplay="true">
-              <el-carousel-item style="height: 45vh;">
+           <div class="full">
              <span class="com-count-title">
-                  预算执行分析-标准成本(单位)
+                    稽核问题展示
                   </span>
                   <div ref="slt" v-echartResize="()=>{
                 if(slt1){
@@ -124,20 +126,7 @@
 
              }" class="com-count-body">
                   </div>
-              </el-carousel-item>
-              <el-carousel-item style="height: 45vh;">
-                <span class="com-count-title">
-                  预算执行分析-标准成本(科目)
-                </span>
-                <div ref="slt2" v-echartResize="()=>{
-              if(slt2){
-                slt2.resize()
-              }
-
-           }" class="com-count-body">
            </div>
-              </el-carousel-item>
-            </el-carousel>
 
           </div>
         </div>
@@ -195,16 +184,14 @@
         </div>
       </div>
       <div class="third">
-        <div class="itemmainb boxall itembg ">
+        <div @click="openR2" style="cursor: pointer;" class="itemmainb boxall itembg ">
           <i class="i1"></i>
           <i class="i2"></i>
           <i class="i3"></i>
           <i class="i4"></i>
-          <el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
-            :autoplay="true">
-            <el-carousel-item style="height: 45vh;">
+         <div class="full">
            <span class="com-count-title">
-                预算执行分析-成本性项目(单位)
+                成本性预算执行情况(按单位)
               </span>
               <div   ref="slt3" v-echartResize="()=>{
               if(slt3){
@@ -213,20 +200,7 @@
 
            }" class="com-count-body">
               </div>
-            </el-carousel-item>
-            <el-carousel-item style="height: 45vh;">
-              <span class="com-count-title">
-                预算执行分析-成本性项目(专业)
-              </span>
-              <div ref="slt4" v-echartResize="()=>{
-              if(slt4){
-                slt4.resize()
-              }
-
-           }" class="com-count-body">
          </div>
-            </el-carousel-item>
-          </el-carousel>
         </div>
       </div>
     </div>
@@ -237,6 +211,8 @@
   import huaian from "common/src/assets/mapJson/huaian.json"
   import Dialog from "./dialog.vue"
   import Yszx from './yszx.vue'
+  import R1 from './r1.vue'
+  import R2 from './r2.vue'
   import {
     doQuery,
     doDelete,
@@ -253,7 +229,9 @@
     components: {
       vueSeamless,
       Dialog,
-      Yszx
+      Yszx,
+      R1,
+      R2
     },
     mounted() {
       this.mounted()
@@ -289,6 +267,7 @@
         /* 加载蒙层*/
         isLoading: true,
         dialog: {
+          DialogName:null,
           showDialog: false,
           DialogTitle: '测试',
           DialogWidth: '40vw'
@@ -298,6 +277,16 @@
       }
     },
     methods: {
+      openR1(){
+        this.dialog.DialogTitle ='资本性预算执行情况'
+        this.dialog.DialogName='R1'
+        this.dialog.showDialog = true
+      },
+      openR2(){
+        this.dialog.DialogTitle ='成本性预算执行情况'
+        this.dialog.DialogName='R2'
+        this.dialog.showDialog = true
+      },
       mounted() {
         /*初始化*/
         /* 地图后端数据*/
@@ -333,6 +322,9 @@
             let lsxList = records.filter(item => {
               return item.bmName == '涟水县供电公司'
             })
+            let hyList = records.filter(item => {
+              return item.bmName == '淮阴区供电公司'
+            })
             /* 滚动表格数据*/
             this.$post('hafms/yszxjdlog/queryRepDetail', {}).then(res => {
               if (res.success) {
@@ -347,20 +339,24 @@
                 fullScreen(document.getElementById("szkb"));
               }, false);
               /* 初始化地图*/
+              debugger
               this.szkbmapCharts = this.initSzkbmapCharts({
                 habbList: habbList,
                 jhxList: jhxList,
                 xyxList: xyxList,
                 hzxList: hzxList,
-                lsxList: lsxList
+                lsxList: lsxList,
+                hyList:hyList
               })
               this.szkbmapCharts.on("click", (params) => {
+                console.log(params)
                 if (params.data) {
                   //获取到定义的数据
                   let info = params.data.data
                   /* 弹框传参查询*/
                   this.dialog.bmid = info.bmid
                   this.dialog.DialogTitle = info.bmName
+                  this.dialog.DialogName='Yszx'
                   this.dialog.showDialog = true
                 }
               });
@@ -374,7 +370,7 @@
         this.initslt()
         this.initslt2()
         this.initslt3()
-        this.initslt4()
+        // this.initslt4()
 
       },
       initLqnd() {
@@ -418,7 +414,7 @@
                 }
               })
               this.lg1 = this.initlg1(showLxg1)
-              this.lg2 = this.initlg2(showLxg2)
+              // this.lg2 = this.initlg2(showLxg2)
             }
           }
         })
@@ -465,7 +461,7 @@
               })
 
               this.lg3 = this.initlg3(showLxg1)
-              this.lg4 = this.initlg4(showLxg2)
+              // this.lg4 = this.initlg4(showLxg2)
             }
           }
         })
@@ -478,7 +474,8 @@
         jhxList,
         xyxList,
         hzxList,
-        lsxList
+        lsxList,
+        hyList
       }) {
         this.mapList = []
         let huaian1 = _.cloneDeep(huaian)
@@ -561,7 +558,24 @@
                 data: item.properties.apiData
               })
             }
-          } else {
+          }
+          /* 未加*/
+          else if (item.properties.name == '淮阴区') {
+            item.properties.name = '淮阴区供电公司'
+            if (lsxList.length != 0) {
+              item.properties.apiData = lsxList[0]
+              item.properties.name = `淮阴区供电公司
+
+              ${hyList?0:hyList[0].pm}
+
+              ${hyList?0:hyList[0].wcl}%
+              `
+              this.mapList.push({
+                name: item.properties.name,
+                data: item.properties.apiData
+              })
+            }
+          }else {
             item.properties.name = ''
           }
         })
@@ -2013,6 +2027,7 @@
 
 <style lang="scss" scoped>
   #szkb {
+
     .com-count-title {
       transform: translateY(10px);
       font-size: 1vw;