代码提交

src/views/greenPop.vue

@@ -3,24 +3,79 @@
     <div class="close">
       <img src="../assets/images/close.png" style="position: absolute;right:0" @click="close"/>
     </div>
+    <div class="content">
+      <iframe id="iFrame" :src="greenUrl" style="height: 100%;width:100%" frameborder="0" scrolling="yes" ></iframe>
+    </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios'
 export default {
     name:'greenPop',
+    props:{
+      greenUrl:{
+        type: String,
+      }
+    },
     data(){
       return{
-
+        url:'https://mp.weixin.qq.com/s/6HClPULGCNGgtIUpvdhpIg'
       }
     },
     mounted(){
-
+      // this.initUrl();
     },
     methods:{
       close(){
         this.$parent.componentShow = "";
         this.$parent.modelOthers = false;
+      },
+      initUrl(){
+      //微信的文章地址
+      //调用跨域API
+      let realurl = 'https://cors-anywhere.herokuapp.com/' + this.url;
+      let that = this;
+         axios.get(realurl).then(response=>{
+           console.log(response,'response');
+           if (response) {
+                      let html = response;
+                      html = html.replace(/data-src/g, "src")
+                          .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, '')
+                          .replace(/https/g, 'http');
+                      //根据微信传回的html中的特殊路径data-src转为src等
+                      let html_src = html;
+                      let iframe = document.getElementById('iFrame');
+                      iframe.src = html_src;
+                      //这时候就成功拿到了微信公众号，这个html_src是个静态网页
+                      let doc = iframe.contentDocument || iframe.document;
+          
+                      let head = doc.querySelector("head");
+                      let meta = `<meta name="referrer" content="never">`;
+                      head.innerHTML += meta;
+                      //添加meta展示图片
+          
+                      let backgroundUrlReg = /url[(]&quot;(\S*)&quot;/g;
+                      let backgroundImgs = html_src.match(backgroundUrlReg);
+                      if (backgroundImgs.length) {
+                          backgroundImgs.forEach(item => {
+                              let url = item.replace(/url[(]&quot;/g, '').replace(/&quot;/g, '');
+                              let img = document.createElement('img');
+                              img.src = url;
+                              doc.querySelector("body").appendChild(img);
+                          });
+                      }
+                      //配置无效img绕过背景图片路径限制
+          
+                      doc.write(html_src);
+                      // 将静态页面写入iframe中
+                      setTimeout(() => {
+                          that.height = doc.documentElement.scrollHeight;
+                      }, 500);
+                      //通过延时获取文档高度赋值Iframe去除滚动条，根据实际情况增加延时时间
+                      doc.getElementById("js_content").style.visibility = "visible";
+                  }
+         })
       }
     }
 }
@@ -47,6 +102,10 @@ export default {
         align-items: center;
         position: relative;
       }
+      .content{
+        height: calc(100% - 5%);
+        width: 100%;
+      }
 }
 /**
 下拉显示动画效果

src/views/index.vue

@@ -293,6 +293,7 @@
           :popTableData11 = 'popTableData11'
           :popTableData12 = 'popTableData12'
           :popTableData13 = 'popTableData13'
+          :greenUrl = 'greenUrl'
         ></component>
       </keep-alive>
     </div>
@@ -308,16 +309,17 @@ import {getData} from '../api/index.js'
 export default {
   data(){
     return{
+      greenUrl:'',
       greenLeftData:[
         {
           name:'上月清洁能源电厂发电量',
-          count:'025529',
+          count:'',
           company:'万千瓦时',
           color:'rgb(255,204,0)',
         },
         {
           name:'本年度清洁能源电厂发电量',
-          count:'262561',
+          count:'',
           company:'万千瓦时',
           color:'rgb(71,211,252)',
         },
@@ -325,13 +327,13 @@ export default {
       greenRightData:[
         {
           name:'减少碳排放量',
-          count:'068310',
+          count:'',
           company:'吨',
           color:'rgb(2,244,177)',
         },
         {
           name:'减少碳排放量',
-          count:'00055',
+          count:'',
           company:'万吨',
           color:'rgb(249,163,70)',
         },
@@ -651,7 +653,29 @@ export default {
          }).then((res)=>{
            this.tableData = res.data.data
          })
-    this.selcetChange(1)
+    this.selcetChange(1);
+    //获取绿色双碳数据
+    getData({
+           action:'one',
+           key:'绿色双碳'
+         }).then((res)=>{
+           this.greenUrl = res.data.data[0].详情链接
+           for (let i = 0; i < this.greenLeftData.length; i++) {
+             for (let j = 0; j < res.data.data.length; j++) {
+               if (this.greenLeftData[i].name == '上月清洁能源电厂发电量') {
+                  this.greenLeftData[i].count = res.data.data[j].上月清洁能源电厂发电量
+               }else {
+                 this.greenLeftData[i].count = res.data.data[j].本年度清洁能源电厂发电量
+               }
+             }
+           }
+           for (let i = 0; i < this.greenRightData.length; i++) {
+             for (let j = 0; j < res.data.data.length; j++) {
+                  this.greenRightData[0].count = res.data.data[j].上月减少碳排放量
+                 this.greenRightData[1].count = res.data.data[j].本年度减少碳排放量
+               }
+             }
+         })
   },
   methods:{
     selcetChange(val){
@@ -761,14 +785,13 @@ export default {
            action:'one',
            key:'地图经纬度'
          }).then((res)=>{
-          //  for (let i = 0; i < res.data.data.length; i++) {
+           for (let i = 0; i < res.data.data.length; i++) {
-          //   if (name == res.data.data[i].地区) {
+            if (name == res.data.data[i].地区) {
-          //     let mapData = res.data.data[i]
+              let mapData = res.data.data[i]
-          //     this.echartsMap(mapData);
+              this.echartsMap(mapData);
-          //   }
+            }
-          //  }
+           }
          })
-       
     },
      echartsOne(contaminatedData){
        let regionData = [
@@ -2050,28 +2073,29 @@ export default {
                              return `<div class=chartLabel>
                             <div class=title>${params.data.obj}</div>
                             </div>`
-                        }else if (params.name == '大丰市') {
-                          return `<div class=chartLabel1>
-                          <div class=maptitle>大丰市</div>
-                            <div class=mapText>盐城大丰新能源及装备制造产业链上企业近30家以上，落户有金风科技、中车电机等产业龙头企业，
-                            并依次引进有迪皮埃、中船重工双瑞风电叶片、中天科技海缆、龙马风电装备等一批产业链企业，
-                            形成了整机及配套电机、叶片、海缆、塔筒、机舱罩、组件、叶片成套芯材等研发、制造和运维服务一条龙的产业链条，
-                            打造海上风电全产业链生态圈。装备制造能力上，大丰区兆瓦级以上风电机组制造能力达1200台/年，
-                            可批量生产2.5MW、3MW、6MW、6.7MW海陆风机，具备8MW等大型海上风电机组生产能力。</div>
-                            </div>`
-                        }else if (params.name == '射阳县') {
-                          return `<div class=chartLabel1>
-                            <div class=maptitle>射阳县</div>
-                            <div class=mapText>
-                            盐城射阳新能源产业已初步建成全产业生态体系，
-                            以国内风电整机商——远景能源为首，
-                            相继落户中车时代新材、长风海工、大连重工、禾望电气、
-                            常友机舱罩等风电装备制造旗舰22家之多，华能、龙源、
-                            国华等国字头开发企业6家，西门子研究院、保利泰克叶片检测中心等研发平台2家，
-                            以及华能智链等新业态项目。
-                            </div>
-                            </div>`
                         }
+                        // else if (params.name == '大丰市') {
+                        //   return `<div class=chartLabel1>
+                        //   <div class=maptitle>大丰市</div>
+                        //     <div class=mapText>盐城大丰新能源及装备制造产业链上企业近30家以上，落户有金风科技、中车电机等产业龙头企业，
+                        //     并依次引进有迪皮埃、中船重工双瑞风电叶片、中天科技海缆、龙马风电装备等一批产业链企业，
+                        //     形成了整机及配套电机、叶片、海缆、塔筒、机舱罩、组件、叶片成套芯材等研发、制造和运维服务一条龙的产业链条，
+                        //     打造海上风电全产业链生态圈。装备制造能力上，大丰区兆瓦级以上风电机组制造能力达1200台/年，
+                        //     可批量生产2.5MW、3MW、6MW、6.7MW海陆风机，具备8MW等大型海上风电机组生产能力。</div>
+                        //     </div>`
+                        // }else if (params.name == '射阳县') {
+                        //   return `<div class=chartLabel1>
+                        //     <div class=maptitle>射阳县</div>
+                        //     <div class=mapText>
+                        //     盐城射阳新能源产业已初步建成全产业生态体系，
+                        //     以国内风电整机商——远景能源为首，
+                        //     相继落户中车时代新材、长风海工、大连重工、禾望电气、
+                        //     常友机舱罩等风电装备制造旗舰22家之多，华能、龙源、
+                        //     国华等国字头开发企业6家，西门子研究院、保利泰克叶片检测中心等研发平台2家，
+                        //     以及华能智链等新业态项目。
+                        //     </div>
+                        //     </div>`
+                        // }
                    
                     }
                 },
@@ -2325,9 +2349,9 @@ export default {
                 //             dataIndex: 0,
                 //         });
                 myChart.on('click', function(params){
-                      if (params.componentSubType == 'scatter') {
+                      // if (params.componentSubType == 'scatter') {
                         console.log(params,'params');//此处可以写一些某个市被点击后的操作
-                      }
+                      // }
                 });
                 myChart.setOption(option);
      },