代码提交
This commit is contained in:
parent
e8e4c46023
commit
e60a9c4ef8
|
|
@ -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[(]"(\S*)"/g;
|
||||
let backgroundImgs = html_src.match(backgroundUrlReg);
|
||||
if (backgroundImgs.length) {
|
||||
backgroundImgs.forEach(item => {
|
||||
let url = item.replace(/url[(]"/g, '').replace(/"/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%;
|
||||
}
|
||||
}
|
||||
/**
|
||||
下拉显示动画效果
|
||||
|
|
|
|||
|
|
@ -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++) {
|
||||
// if (name == res.data.data[i].地区) {
|
||||
// let mapData = res.data.data[i]
|
||||
// this.echartsMap(mapData);
|
||||
// }
|
||||
// }
|
||||
for (let i = 0; i < res.data.data.length; i++) {
|
||||
if (name == res.data.data[i].地区) {
|
||||
let mapData = res.data.data[i]
|
||||
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);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue