var source = `
<!--
@authors zhicheng
组件存放目录
|-componentSource (组件源码目录)
|-组件文件夹1
|-组件文件夹1
|-...
|-componentProduct (组件成品目录)
|-组件文件夹1
|-组件文件夹1
|-...
单个组件源码目录说明：
--组件文件夹
|--asset
|--组件名.vue
|--组件名.json
目录别名 （方便代码中引用）
alias: {
'@': resolve('componentSource'),
}
事件关联函数(本组件为事件的发起者)创建示例（如增加F方法）
第一步：在data(){} relateFun属性中增加以下对象
data(){
return {
...,
"relateFun":{
"des":"F方法说明",
"fun":"F",
"param":{"id":1} //表示传参的格式
},
}
}
第二步：在methods代码部分增加F方法定义
methods:{
...,
F:function(id){
//事件关联
EventRelation.call(this,'F',{id:id})
}
}
-->
<template>
<div id="main" ref="main" v-bind:style="{
'display':propertyConfig.appearance.form.display,
}">
<div class="type box"
v-bind:style="{
'width':propertyConfig.appearance.form.layW+'px',
'height':propertyConfig.appearance.form.layH+'px',
}"
>
<div class="box-flex-1 p-t-15" @click="switch2dMode">
<img v-bind:style="{
'width':propertyConfig.appearance.form.width+'px',
'height':propertyConfig.appearance.form.height+'px',
}" v-if="mode == 'JDMAP_2D_MAP'" src="/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee49.png" alt="">
<img v-bind:style="{
'width':propertyConfig.appearance.form.width+'px',
'height':propertyConfig.appearance.form.height+'px',
}" v-else src="/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee48.png" alt="">
<br><span v-bind:style="{
'display':'inline-block',
'transform':transform,
'fontSize':propertyConfig.appearance.form.fontSize+'px',
'color':propertyConfig.appearance.form.fontColor,
'font:Weight':propertyConfig.appearance.form.fontWeight
}">二维地图</span></div>
<div class="box-flex-1 p-t-15" @click="switch3dMode">
<img v-bind:style="{
'width':propertyConfig.appearance.form.width+'px',
'height':propertyConfig.appearance.form.height+'px',
}" v-if="mode == 'JDMAP_3D_MAP'" src="/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee4b.png" alt="">
<img v-bind:style="{
'width':propertyConfig.appearance.form.width+'px',
'height':propertyConfig.appearance.form.height+'px',
}" v-else src="/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee4a.png" alt="">
<br><span v-bind:style="{
'display':'inline-block',
'transform':transform,
'fontSize':propertyConfig.appearance.form.fontSize+'px',
'color':propertyConfig.appearance.form.fontColor,
'font:Weight':propertyConfig.appearance.form.fontWeight
}">三维地图</span></div>
<div class="box-flex-1 p-t-15" @click="switchImageryOceanAndRoadMode">
<img v-bind:style="{
'width':propertyConfig.appearance.form.width+'px',
'height':propertyConfig.appearance.form.height+'px',
}" v-if="mode == 'JDMAP_IMAGERY_OCEAN_Road_MAP'" src="/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee4d.png" alt="">
<img v-bind:style="{
'width':propertyConfig.appearance.form.width+'px',
'height':propertyConfig.appearance.form.height+'px',
}" v-else src="/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee4c.png" alt="">
<br><span v-bind:style="{
'display':'inline-block',
'transform':transform,
'fontSize':propertyConfig.appearance.form.fontSize+'px',
'color':propertyConfig.appearance.form.fontColor,
'font:Weight':propertyConfig.appearance.form.fontWeight
}">海图</span></div>
<div class="box-flex-1 p-t-15" @click="switchSatelliteMode">
<img v-bind:style="{
'width':propertyConfig.appearance.form.width+'px',
'height':propertyConfig.appearance.form.height+'px',
}" v-if="mode == 'JDMAP_SATELLITE_MAP'" src="/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee4f.png" alt="">
<img v-bind:style="{
'width':propertyConfig.appearance.form.width+'px',
'height':propertyConfig.appearance.form.height+'px',
}" v-else src="/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee4e.png" alt="">
<br><span v-bind:style="{
'display':'inline-block',
'transform':transform,
'fontSize':propertyConfig.appearance.form.fontSize+'px',
'color':propertyConfig.appearance.form.fontColor,
'font:Weight':propertyConfig.appearance.form.fontWeight
}">卫星地图</span></div>
<div class="close" @click="close"></div>
</div>
</div>
<\/template>
<script>
export default {
components: {},
props: ['screenId', 'comIdent', 'comConfig', 'screenModel','scaleX','scaleY','eventRelation'], //参数由大屏传递过来
data() {
return {
comType:'mapCom',
comName:'mapTool_v12',
comHash:'1817748297520144386', //接受组件标识 创建组件时由后端生成
transform:'',
mode:'',
//创建文件时会自动替换为对应的配置属性
propertyConfig:{
//property--start
"appearance":{
"description": {
"display": {
"title": "状态",
"type": "String",
"formType": "select",
"selectArr": [
{
"label": "显示",
"value": "block"
},
{
"label": "隐藏",
"value": "none"
}
]
},
"layW": {
"title": "整体宽度",
"type": "Number",
"formType": "input[type=number]"
},
"layH": {
"title": "整体高度",
"type": "Number",
"formType": "input[type=number]"
},
"width": {
"title": "图片宽",
"type": "Number",
"formType": "input[type=number]"
},
"height": {
"title": "图片高",
"type": "Number",
"formType": "input[type=number]"
},
"fontSize": {
"title": "字号",
"type": "Number",
"formType": "input[type=number]"
},
"fontColor": {
"title": "颜色",
"type": "String",
"formType": "colorPicker"
},
"fontWeight": {
"title": "加粗",
"type": "String",
"formType": "select",
"selectArr": [
{
"label": "正常",
"value": "normal"
},
{
"label": "加粗",
"value": "bold"
}
]
}
},
"form": {
"display": "block",
"layW": 422,
"layH": 111,
"width": 95,
"height": 70,
"fontSize": 13,
"fontColor": "#fff",
"fontWeight": "normal"
}
},//组件外观配置对象结束
"hookFun":{
"callFun":[ //调用其它的组件的方法
// {
// "trigger":"click", //触发的动作
// "comName":"组件名称",
// "fun":"组件方法"
// }
]
},//hookFun配置对象结束
//property--end
},
"ownerFun":[ //当前组件允许外部调用的方法(本组件为事件的执行者)
{
"fun":"show",
"des":"显示组件",
"param":"/*无参数*/"
},
{
"fun":"hide",
"des":"隐藏组件",
"param":"/*无参数*/"
},
{
"fun":"toggle",
"des":"显示/隐藏切换组件",
"param":"/*无参数*/"
}
],
"relateFun":[ //可以做关联的方法(本组件为事件的发起者)
{
"des":"关闭",
"fun":"close",
"param":"/*无参数*/"
}
]
}
},
methods: {
show:function(){
this.propertyConfig.appearance.form.display = 'block'
},
hide:function(){
this.propertyConfig.appearance.form.display = 'none'
},
toggle:function(){
this.propertyConfig.appearance.form.display = (this.propertyConfig.appearance.form.display == 'block')?'none':'block';
},
close:function(){
EventRelation.call(this,'close',{})
},
switch2dMode:function(){
this.mode = 'JDMAP_2D_MAP';
jdMap.switch2dMode()
},
switch3dMode:function(){
this.mode = 'JDMAP_3D_MAP';
jdMap.switch3dMode()
},
switchImageryOceanAndRoadMode:function(){
this.mode = 'JDMAP_IMAGERY_OCEAN_Road_MAP';
jdMap.switchImageryOceanAndRoadMode()
},
switchSatelliteMode:function(){
this.mode = 'JDMAP_SATELLITE_MAP';
jdMap.switchSatelliteMode()
},
resize:function(){
//this.myChart.resize();
if(this.scaleX >= this.scaleY){
this.transform = 'scale('+this.scaleY/this.scaleX+',1)'
}else{
this.transform = 'scale(1,'+this.scaleX/this.scaleY+')'
}
},
},
mounted() {
if (this.comConfig) { //如果有大屏传过来的配置项 那么就展开
this.propertyConfig = {
...this.propertyConfig,
...this.comConfig
}
}
this.resize();
},
created() {
},
computed: {
},
watch: {
'comConfig': {
handler: function(v) {
this.propertyConfig = v;
},
deep: true
}
}
}
<\/script>
<style scoped>
#main {
height: 100%;
width: 100%;
}
.type{
background: url(/componentProduct/mapTool_v12/asset/95a95cdfd9f4cfff0459dee50.png) center center no-repeat;
background-size: 100% 100%;
width: 422px;
height: 111px;
padding-right: 10px;
padding-left: 20px;
text-align: center;
font-size: 13px;
color: #fff;
cursor: pointer;
}
.type img{
height: 70px
}
.m{
margin-top:18px;
cursor: pointer;
}
.close{
position: absolute;
left: 0;
top: 50%;
width: 14px;
height: 30px;
margin-top: -16px;
}
<\/style>
`
// var script = source.match(/<script[\s\S.]*<\/script>/g);
// console.log(script[0])
// var s = script[0].replace(/export[ ]*?default[\s\S.]*?{/g,'return {').replace(/(<script>|<\/script>)/gi,'');
// var f = new Function('',s)();
// var p = f.data().propertyConfig;
// console.log(f.data().propertyConfig);
// console.log(JSON.stringify(p.appearance))
// var n = source.replace(JSON.stringify(p.appearance),'');
// console.log(n);
var script = source.match(/<script[\s\S.]*<\/script>/g);
var s = "\"appearance\"[ ]*?:[ ]*?\\{[\\s\\S.]*?\\}";
var num = script[0].match(/\}/g);
console.log(num);
var i = 0;
var fun = function(r){
s+=r;
var reg = new RegExp(s,"gi")
// console.log(reg);
// var p = script[0].match(/"appearance"[ ]*?:[ ]*?\{[\s\S.]*?\}/gi)
var p = script[0].match(reg)
// console.log(p[0]);
// console.log(p[0].replace(/"appearance"[ ]*?:[ ]*/gi,''))
try {
var k_r = new RegExp("\"appearance\"[ ]*?:[ ]*","gi");
// var o = JSON.parse(p[0].replace(/"appearance"[ ]*?:[ ]*/gi,''));
var o = JSON.parse(p[0].replace(k_r,'').replace(/,[\r\n ]*?\}/g,'}').replace(/,[\r\n ]*?\]/g,']'));
// console.log(o);
// console.log(p[0])
return p[0];
} catch (err) {
console.log('没有转换成功 说明正则匹配出的字符串不完整'+i);
i++;
if(i<num.length){
return fun('[\\s\\S.]*?\\}');
}
}
}
console.log(fun(''));
console