mirror of
https://gitee.com/myxzgzs/boyue_jnpf.git
synced 2025-08-08 15:22:43 +08:00
2411 lines
67 KiB
JavaScript
2411 lines
67 KiB
JavaScript
const baseUrl = '/api/blade-visual'
|
||
window.$website = {
|
||
isDemo: false,
|
||
isDemoTip: '演示环境不允许操作',
|
||
title: 'JNPF数据大屏',
|
||
name: '智慧可视化大屏',
|
||
subName: '可视化数据大屏',
|
||
url: baseUrl,
|
||
mqttUrl: 'wss://data.avuejs.com/api/mqtt/xiaowei',
|
||
routers: {
|
||
mainPath: '/'
|
||
},
|
||
autoSave: false,
|
||
autoSaveTime: 60000,
|
||
clientOption: {
|
||
clientId: 'avue-data', // 客户端id
|
||
clientSecret: 'avue-data', // 客户端密钥
|
||
accessToken: 'accessToken', // 接收传参的key
|
||
authorization: 'authorization', // token请求头的key
|
||
tokenHeader: 'token',
|
||
bearer: 'bearer', // jwt bearer
|
||
},
|
||
componentsList: [{
|
||
name: 'test',
|
||
component: 'testComponents',
|
||
option: 'testOption',
|
||
data: true
|
||
}],
|
||
baseList: [{
|
||
label: '图表',
|
||
icon: 'icon-bar',
|
||
children: [{
|
||
label: ' 自定义echart',
|
||
option: {
|
||
name: "自定义echart",
|
||
title: "自定义echart",
|
||
icon: 'icon-echart',
|
||
img: '/img/assets/text5.png',
|
||
dataType: 1,
|
||
"dataMethod": 'get',
|
||
data: {
|
||
"categories": [
|
||
"苹果",
|
||
"三星",
|
||
"小米",
|
||
"oppo",
|
||
"vivo"
|
||
],
|
||
"series": [{
|
||
name: "手机品牌",
|
||
data: [
|
||
1000879,
|
||
3400879,
|
||
2300879,
|
||
5400879,
|
||
3400879
|
||
]
|
||
}]
|
||
},
|
||
echartFormatter: "function (data,params){\n data={\n \"中国\": \"https://data.avuejs.com/asset/get/s/data-1527045631990-r1dZ0IM1X.json\",\n \"上海\": \"/asset/get/s/data-1482909900836-H1BC_1WHg.json\",\n \"河北\": \"/asset/get/s/data-1482909799572-Hkgu_yWSg.json\",\n \"山西\": \"/asset/get/s/data-1482909909703-SyCA_JbSg.json\",\n \"内蒙古\": \"/asset/get/s/data-1482909841923-rkqqdyZSe.json\",\n \"辽宁\": \"/asset/get/s/data-1482909836074-rJV9O1-Hg.json\",\n \"吉林\": \"/asset/get/s/data-1482909832739-rJ-cdy-Hx.json\",\n \"黑龙江\": \"/asset/get/s/data-1482909803892-Hy4__J-Sx.json\",\n \"江苏\": \"/asset/get/s/data-1482909823260-HkDtOJZBx.json\",\n \"浙江\": \"/asset/get/s/data-1482909960637-rkZMYkZBx.json\",\n \"安徽\": \"/asset/get/s/data-1482909768458-HJlU_yWBe.json\",\n \"福建\": \"/asset/get/s/data-1478782908884-B1H6yezWe.json\",\n \"江西\": \"/asset/get/s/data-1482909827542-r12YOJWHe.json\",\n \"山东\": \"/asset/get/s/data-1482909892121-BJ3auk-Se.json\",\n \"河南\": \"/asset/get/s/data-1482909807135-SJPudkWre.json\",\n \"湖北\": \"/asset/get/s/data-1482909813213-Hy6u_kbrl.json\",\n \"湖南\": \"/asset/get/s/data-1482909818685-H17FOkZSl.json\",\n \"广东\": \"/asset/get/s/data-1482909784051-BJgwuy-Sl.json\",\n \"广西\": \"/asset/get/s/data-1482909787648-SyEPuJbSg.json\",\n \"海南\": \"/asset/get/s/data-1482909796480-H12P_J-Bg.json\",\n \"四川\": \"/asset/get/s/data-1482909931094-H17eKk-rg.json\",\n \"贵州\": \"/asset/get/s/data-1482909791334-Bkwvd1bBe.json\",\n \"云南\": \"/asset/get/s/data-1482909957601-HkA-FyWSx.json\",\n \"西藏\": \"/asset/get/s/data-1482927407942-SkOV6Qbrl.json\",\n \"陕西\": \"/asset/get/s/data-1482909918961-BJw1FyZHg.json\",\n \"甘肃\": \"/asset/get/s/data-1482909780863-r1aIdyWHl.json\",\n \"青海\": \"/asset/get/s/data-1482909853618-B1IiOyZSl.json\",\n \"宁夏\": \"/asset/get/s/data-1482909848690-HJWiuy-Bg.json\",\n \"新疆\": \"/asset/get/s/data-1482909952731-B1YZKkbBx.json\",\n \"北京\": \"/asset/get/s/data-1482818963027-Hko9SKJrg.json\",\n \"天津\": \"/asset/get/s/data-1482909944620-r1-WKyWHg.json\",\n \"重庆\": \"/asset/get/s/data-1482909775470-HJDIdk-Se.json\",\n \"香港\": \"/asset/get/s/data-1461584707906-r1hSmtsx.json\",\n \"澳门\": \"/asset/get/s/data-1482909771696-ByVIdJWBx.json\"\n }\n const myChart = this.myChart;\n function loadMap(mapCode, name){\n axios.get(data[mapCode]).then(res=>{\n echarts.registerMap(name, res.data);\n let option = {\n tooltip: {\n triggerOn: \"click\",\n formatter: function(e, t, n) {\n return .5 == e.value ? e.name + \"：有疑似病例\" : e.seriesName + \"<br />\" + e.name + \"：\" + e.value\n }\n },\n visualMap: {\n min: 0,\n max: 1000,\n left: 26,\n bottom: 40,\n showLabel: !0,\n text: [\"高\", \"低\"],\n pieces: [{\n gt: 100,\n label: \"> 100 人\",\n color: \"#7f1100\"\n }, {\n gte: 10,\n lte: 100,\n label: \"10 - 100 人\",\n color: \"#ff5428\"\n }, {\n gte: 1,\n lt: 10,\n label: \"1 - 9 人\",\n color: \"#ff8c71\"\n }, {\n gt: 0,\n lt: 1,\n label: \"疑似\",\n color: \"#ffd768\"\n }, {\n value: 0,\n color: \"#ffffff\"\n }],\n show: !0\n },\n geo: {\n map: name,\n roam: !1,\n scaleLimit: {\n min: 1,\n max: 2\n },\n zoom: 1.23,\n top: 120,\n label: {\n normal: {\n show: !0,\n fontSize: \"14\",\n color: \"rgba(0,0,0,0.7)\"\n }\n },\n itemStyle: {\n normal: {\n //shadowBlur: 50,\n //shadowColor: 'rgba(0, 0, 0, 0.2)',\n borderColor: \"rgba(0, 0, 0, 0.2)\"\n },\n emphasis: {\n areaColor: \"#f2d5ad\",\n shadowOffsetX: 0,\n shadowOffsetY: 0,\n borderWidth: 0\n }\n }\n },\n series: [{\n name: \"确诊病例\",\n type: \"map\",\n geoIndex: 0,\n data: [{\n name: \"南海诸岛\",\n value: 0\n },\n {\n name: '北京',\n value: 54\n },\n {\n name: '天津',\n value: 13\n },\n {\n name: '上海',\n value: 40\n },\n {\n name: '重庆',\n value: 75\n },\n {\n name: '河北',\n value: 13\n },\n {\n name: '河南',\n value: 83\n },\n {\n name: '云南',\n value: 11\n },\n {\n name: '辽宁',\n value: 19\n },\n {\n name: '黑龙江',\n value: 15\n },\n {\n name: '湖南',\n value: 69\n },\n {\n name: '安徽',\n value: 60\n },\n {\n name: '山东',\n value: 39\n },\n {\n name: '新疆',\n value: 4\n },\n {\n name: '江苏',\n value: 31\n },\n {\n name: '浙江',\n value: 104\n },\n {\n name: '江西',\n value: 36\n },\n {\n name: '湖北',\n value: 1052\n },\n {\n name: '广西',\n value: 33\n },\n {\n name: '甘肃',\n value: 7\n },\n {\n name: '山西',\n value: 9\n },\n {\n name: '内蒙古',\n value: 7\n },\n {\n name: '陕西',\n value: 22\n },\n {\n name: '吉林',\n value: 4\n },\n {\n name: '福建',\n value: 18\n },\n {\n name: '贵州',\n value: 5\n },\n {\n name: '广东',\n value: 98\n },\n {\n name: '青海',\n value: 1\n },\n {\n name: '西藏',\n value: 0\n },\n {\n name: '四川',\n value: 44\n },\n {\n name: '宁夏',\n value: 4\n },\n {\n name: '海南',\n value: 22\n },\n {\n name: '台湾',\n value: 3\n },\n {\n name: '香港',\n value: 5\n },\n {\n name: '澳门',\n value: 5\n }\n ]\n }]\n }\n myChart.setOption(option);\n })\n \n }\n loadMap('中国','china')\n var timeFn = null;\n setTimeout(()=>{\n\n //单击切换到省级地图，当mapCode有值,说明可以切换到下级地图\n myChart.on('click', function(params) {\n clearTimeout(timeFn);\n //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行\n timeFn = setTimeout(function() {\n var name = params.name; //地区name\n var mapCode = data[name]; //地区的json数据\n loadMap(name, name);\n }, 250);\n });\n\n\n // 绑定双击事件，返回全国地图\n myChart.on('dblclick', function(params) {\n //当双击事件发生时，清除单击事件，仅响应双击事件\n clearTimeout(timeFn);\n \n //返回全国地图\n loadMap('中国', 'china');\n });\n },0)\n return {}\n}",
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
url: "",
|
||
option: {
|
||
remote: false,
|
||
src: '/echart-remote-temp.js'
|
||
},
|
||
component: {
|
||
width: 660,
|
||
height: 560,
|
||
name: "common",
|
||
prop: "common",
|
||
remoteContent: ''
|
||
},
|
||
}
|
||
}, {
|
||
label: 'datav',
|
||
option: {
|
||
name: "datav",
|
||
title: "datav",
|
||
icon: 'icon-datav',
|
||
img: '/img/assets/text6.png',
|
||
dataType: 0,
|
||
"dataMethod": 'get',
|
||
data: {
|
||
value: 66
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
echartFormatter: "(data,params)=>{\n console.log(data);\n return {\n config:{\n\t data: [66] \n\t }\n }\n}",
|
||
component: {
|
||
width: 150,
|
||
height: 200,
|
||
name: "datav",
|
||
prop: "datav",
|
||
},
|
||
option: {
|
||
is: 'dv-water-level-pond'
|
||
}
|
||
}
|
||
}, {
|
||
label: '柱形图',
|
||
option: {
|
||
name: "柱状图",
|
||
title: "柱状图",
|
||
icon: 'icon-bar',
|
||
img: '/img/assets/bar.png',
|
||
data: {
|
||
categories: [
|
||
"苹果",
|
||
"三星",
|
||
"小米",
|
||
"oppo",
|
||
"vivo"
|
||
],
|
||
series: [{
|
||
name: "手机品牌",
|
||
data: [
|
||
1000879,
|
||
3400879,
|
||
2300879,
|
||
5400879,
|
||
3400879
|
||
]
|
||
}]
|
||
},
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 600,
|
||
height: 300,
|
||
name: "bar",
|
||
prop: "bar",
|
||
},
|
||
option: {
|
||
gridX: 90,
|
||
gridY: 47,
|
||
gridX2: 43,
|
||
gridY2: 25,
|
||
legend: true,
|
||
tipShow: true,
|
||
xAxisShow: true,
|
||
yAxisShow: true,
|
||
barWidth: 30,
|
||
barRadius: 8,
|
||
barColor: [{
|
||
color1: "#83bff6",
|
||
color2: "#188df0",
|
||
postion: 90
|
||
}, {
|
||
color1: "#23B7E5",
|
||
color2: "#564AA3",
|
||
postion: 50,
|
||
}],
|
||
barMinHeight: 2
|
||
}
|
||
}
|
||
}, {
|
||
label: '折线图',
|
||
option: {
|
||
name: "折线图",
|
||
title: "折线图",
|
||
icon: 'icon-line',
|
||
img: '/img/assets/line.png',
|
||
data: {
|
||
categories: [
|
||
"苹果",
|
||
"三星",
|
||
"小米",
|
||
"oppo",
|
||
"vivo"
|
||
],
|
||
series: [{
|
||
name: "手机品牌",
|
||
data: [
|
||
1000879,
|
||
3400879,
|
||
2300879,
|
||
5400879,
|
||
3400879
|
||
]
|
||
}]
|
||
},
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 600,
|
||
height: 300,
|
||
name: "line",
|
||
prop: "line",
|
||
},
|
||
option: {
|
||
gridX: 84,
|
||
gridY: 35,
|
||
gridX2: 26,
|
||
gridY2: 31,
|
||
legend: true,
|
||
tipShow: true,
|
||
xAxisShow: true,
|
||
yAxisShow: true,
|
||
barColor: [{
|
||
color1: "#83bff6",
|
||
color2: "#188df0",
|
||
postion: 90
|
||
}, {
|
||
color1: "#23B7E5",
|
||
color2: "#564AA3",
|
||
postion: 50
|
||
}],
|
||
symbolShow: true,
|
||
symbolSize: 6,
|
||
smooth: true,
|
||
}
|
||
}
|
||
}, {
|
||
label: '饼图',
|
||
option: {
|
||
name: "饼图",
|
||
title: "饼图",
|
||
icon: 'icon-pie',
|
||
img: '/img/assets/pie.png',
|
||
data: [{
|
||
name: "苹果",
|
||
value: 1000879,
|
||
url: "http://www.baidu.com"
|
||
}, {
|
||
name: "三星",
|
||
value: 3400879,
|
||
url: "http://www.baidu.com"
|
||
}, {
|
||
name: "小米",
|
||
value: 2300879,
|
||
url: "http://www.baidu.com"
|
||
}, {
|
||
name: "oppo",
|
||
value: 5400879,
|
||
url: "http://www.baidu.com"
|
||
}, {
|
||
name: "大疆",
|
||
value: 3000,
|
||
url: "http://www.baidu.com"
|
||
}],
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 600,
|
||
height: 300,
|
||
name: "pie",
|
||
prop: "pie",
|
||
},
|
||
option: {
|
||
legend: true,
|
||
labelShow: true,
|
||
barColor: [
|
||
{
|
||
color1: "#83bff6"
|
||
},
|
||
{
|
||
color1: "#23B7E5"
|
||
},
|
||
{
|
||
color1: "rgba(154, 168, 212, 1)"
|
||
},
|
||
{
|
||
color1: "#188df0"
|
||
},
|
||
{
|
||
color1: "#564AA3"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}, {
|
||
label: '象形图',
|
||
option: {
|
||
title: "象形图",
|
||
name: "象形图",
|
||
icon: "icon-pictorialBar",
|
||
img: '/img/assets/bar2.png',
|
||
data: [{
|
||
name: "苹果",
|
||
value: 1000879,
|
||
}, {
|
||
name: "三星",
|
||
value: 3400879,
|
||
}, {
|
||
name: "小米",
|
||
value: 2300879,
|
||
}, {
|
||
name: "oppo",
|
||
value: 5400879,
|
||
}, {
|
||
name: "大疆",
|
||
value: 3000,
|
||
}, {
|
||
name: "抖音",
|
||
value: 2000,
|
||
}],
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 600,
|
||
height: 300,
|
||
name: "pictorialbar",
|
||
prop: "pictorialbar",
|
||
},
|
||
option: {
|
||
symbolSize: 30,
|
||
split: 30,
|
||
symbol: '/img/source/source256.png',
|
||
labelFontSize: '24',
|
||
labelColor: '#4dffff',
|
||
fontSize: 20,
|
||
color: '#fff',
|
||
gridX: 76,
|
||
gridY: 4,
|
||
gridX2: 127,
|
||
gridY2: 0
|
||
}
|
||
}
|
||
}, {
|
||
label: '雷达图',
|
||
option: {
|
||
title: "雷达图",
|
||
name: "雷达图",
|
||
icon: "icon-radar",
|
||
img: '/img/assets/radar.png',
|
||
dataType: 0,
|
||
data: {
|
||
indicator: [{
|
||
name: '销售',
|
||
max: 6500
|
||
},
|
||
{
|
||
name: '管理',
|
||
max: 16000
|
||
},
|
||
{
|
||
name: '信息技术',
|
||
max: 30000
|
||
},
|
||
{
|
||
name: '客服',
|
||
max: 38000
|
||
},
|
||
{
|
||
name: '研发',
|
||
max: 52000
|
||
},
|
||
{
|
||
name: '市场',
|
||
max: 25000
|
||
}
|
||
],
|
||
series: [{
|
||
data: [{
|
||
value: [4300, 10000, 28000, 35000, 50000, 19000],
|
||
name: '预算分配（Allocated Budget）'
|
||
},
|
||
{
|
||
value: [5000, 14000, 28000, 31000, 42000, 21000],
|
||
name: '实际开销（Actual Spending）'
|
||
}
|
||
]
|
||
}]
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 970,
|
||
height: 400,
|
||
name: "radar",
|
||
prop: "radar",
|
||
},
|
||
option: {
|
||
width: '100%',
|
||
height: 600,
|
||
color: '#fff',
|
||
fontSize: 18,
|
||
areaOpacity: 0.3,
|
||
legend: true,
|
||
tipShow: true,
|
||
barColor: [{
|
||
color1: "#564AA3",
|
||
},
|
||
{
|
||
color1: "#188df0",
|
||
}]
|
||
},
|
||
}
|
||
}, {
|
||
label: '散点图',
|
||
option: {
|
||
title: "散点图",
|
||
name: "散点图",
|
||
icon: "icon-scatter",
|
||
img: '/img/assets/scatter.png',
|
||
dataType: 0,
|
||
data: [{
|
||
data: [
|
||
[1, 8.04],
|
||
[2, 6.95]
|
||
]
|
||
},
|
||
{
|
||
data: [
|
||
[1, 4.04],
|
||
[2, 3.95]
|
||
]
|
||
}],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 600,
|
||
height: 300,
|
||
name: "scatter",
|
||
prop: "scatter",
|
||
},
|
||
option: {
|
||
gridX: 26,
|
||
gridY: 12,
|
||
gridX2: 14,
|
||
gridY2: 30,
|
||
lineSize: 25,
|
||
tipShow: true,
|
||
labelShow: true,
|
||
legend: true,
|
||
xAxisSplitLineShow: true,
|
||
yAxisSplitLineShow: true,
|
||
barColor: [{
|
||
postion: 0.2,
|
||
color1: '#91c7ae'
|
||
},
|
||
{
|
||
postion: 0.8,
|
||
color1: '#63869e'
|
||
},
|
||
{
|
||
postion: 1,
|
||
color1: '#c23531'
|
||
}]
|
||
}
|
||
}
|
||
}, {
|
||
label: '漏斗图',
|
||
option: {
|
||
title: "漏斗图",
|
||
name: "漏斗图",
|
||
icon: "icon-funnel",
|
||
img: '/img/assets/funnel.png',
|
||
dataType: 0,
|
||
data: [
|
||
{ value: 60, name: 'Visit' },
|
||
{ value: 40, name: 'Inquiry' },
|
||
{ value: 20, name: 'Order' },
|
||
{ value: 80, name: 'Click' },
|
||
{ value: 100, name: 'Show' }
|
||
],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 450,
|
||
height: 350,
|
||
name: "funnel",
|
||
prop: "funnel",
|
||
},
|
||
option: {
|
||
legend: true,
|
||
labelShow: true,
|
||
tipShow: true,
|
||
barColor: [{
|
||
color1: "#83bff6",
|
||
},
|
||
{
|
||
color1: "#23B7E5",
|
||
},
|
||
{
|
||
color1: "rgba(154, 168, 212, 1)",
|
||
},
|
||
{
|
||
color1: "#188df0",
|
||
},
|
||
{
|
||
color1: "#564AA3",
|
||
}]
|
||
}
|
||
}
|
||
}, {
|
||
label: '地图',
|
||
option: {
|
||
name: "地图",
|
||
title: "地图",
|
||
icon: "icon-map",
|
||
img: '/img/assets/map.png',
|
||
dataType: 0,
|
||
data: [
|
||
{
|
||
name: "测试坐标1",
|
||
value: 1,
|
||
lng: 118.30078125,
|
||
lat: 36.91915611148194,
|
||
zoom: 1
|
||
},
|
||
{
|
||
name: "测试坐标2",
|
||
value: 1,
|
||
lng: 112.21435546875,
|
||
lat: 37.965854128749434,
|
||
zoom: 1
|
||
}
|
||
],
|
||
formatter: "(name,data)=>{\n return '名称:'+name.data.name+name.data.value\n}",
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 800,
|
||
height: 607,
|
||
name: "map",
|
||
prop: "map",
|
||
},
|
||
option: {
|
||
tipBackgroundColor: "rgba(13, 255, 255, .5)",
|
||
tipColor: "rgba(217, 38, 10, 1)",
|
||
tipFontSize: "30",
|
||
borderWidth: 1,
|
||
scale: 87,
|
||
type: 0,
|
||
borderColor: "#0dffff",
|
||
areaColor: "rgba(6, 29, 51, 0.59)",
|
||
banner: true,
|
||
bannerTime: 3000,
|
||
fontSize: 14,
|
||
zoom: 0.5,
|
||
roam: true,
|
||
empAreaColor: "rgba(35, 183, 229, 0.42)",
|
||
empColor: "rgba(217, 38, 10, 1)",
|
||
index: "1",
|
||
mapData: "1",
|
||
color: "rgba(13, 255, 255, 1)",
|
||
}
|
||
}
|
||
}, {
|
||
label: '矩形图',
|
||
option: {
|
||
name: "矩形图",
|
||
title: "矩形图",
|
||
icon: 'icon-juxing',
|
||
img: '/img/assets/rectangles.png',
|
||
data: [
|
||
{
|
||
name: "分类 1",
|
||
value: 560
|
||
},
|
||
{
|
||
name: "分类 2",
|
||
value: 500
|
||
},
|
||
{
|
||
name: "分类 3",
|
||
value: 150
|
||
},
|
||
{
|
||
name: "分类 4",
|
||
value: 140
|
||
},
|
||
{
|
||
name: "分类 5",
|
||
value: 115
|
||
},
|
||
{
|
||
name: "分类 6",
|
||
value: 95
|
||
},
|
||
{
|
||
name: "分类 7",
|
||
value: 90
|
||
},
|
||
{
|
||
name: "分类 8",
|
||
value: 75
|
||
},
|
||
{
|
||
name: "分类 9",
|
||
value: 98
|
||
},
|
||
{
|
||
name: "分类 10",
|
||
value: 60
|
||
},
|
||
{
|
||
name: "分类 11",
|
||
value: 45
|
||
},
|
||
{
|
||
name: "分类 12",
|
||
value: 40
|
||
},
|
||
{
|
||
name: "分类 13",
|
||
value: 40
|
||
},
|
||
{
|
||
name: "分类 14",
|
||
value: 35
|
||
},
|
||
{
|
||
name: "分类 15",
|
||
value: 40
|
||
},
|
||
{
|
||
name: "分类 16",
|
||
value: 40
|
||
},
|
||
{
|
||
name: "分类 17",
|
||
value: 40
|
||
},
|
||
{
|
||
name: "分类 18",
|
||
value: 30
|
||
},
|
||
{
|
||
name: "分类 19",
|
||
value: 28
|
||
},
|
||
{
|
||
name: "分类 20",
|
||
value: 16
|
||
}
|
||
],
|
||
dataType: 0,
|
||
component: {
|
||
width: 754,
|
||
height: 377,
|
||
name: "rectangle",
|
||
prop: "rectangle",
|
||
},
|
||
option: {
|
||
tipShow: true,
|
||
labelShow: true,
|
||
labelShowColor: '#fff',
|
||
labelShowFontSize: 14
|
||
}
|
||
}
|
||
}]
|
||
}, {
|
||
label: '文字',
|
||
icon: 'icon-text',
|
||
children: [{
|
||
label: '文本框',
|
||
option: {
|
||
title: "文本框",
|
||
name: "文本框",
|
||
icon: 'icon-text',
|
||
img: '/img/assets/text.png',
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
child: {
|
||
index: [],
|
||
paramName: ""
|
||
},
|
||
data: {
|
||
value: '文本框'
|
||
},
|
||
component: {
|
||
width: 100,
|
||
height: 40,
|
||
name: "text",
|
||
prop: "text"
|
||
},
|
||
option: {
|
||
textAlign: "center",
|
||
fontSize: 26,
|
||
fontWeight: "normal",
|
||
color: "#fff"
|
||
},
|
||
},
|
||
}, {
|
||
label: '跑马灯',
|
||
option: {
|
||
title: "跑马灯",
|
||
name: "跑马灯",
|
||
icon: 'icon-scroll',
|
||
img: '/img/assets/text2.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: {
|
||
value: "跑马灯"
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 100,
|
||
height: 50,
|
||
name: "text",
|
||
prop: "text"
|
||
},
|
||
option: {
|
||
scroll: true,
|
||
speed: 70,
|
||
textAlign: "center",
|
||
fontSize: 26,
|
||
fontWeight: "normal",
|
||
color: "#fff"
|
||
},
|
||
},
|
||
}, {
|
||
label: '超链接',
|
||
option: {
|
||
title: "超链接",
|
||
name: "超链接",
|
||
icon: 'icon-link',
|
||
img: '/img/assets/text3.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {
|
||
value: "超链接"
|
||
},
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 100,
|
||
height: 50,
|
||
name: "text",
|
||
prop: "text"
|
||
},
|
||
option: {
|
||
link: true,
|
||
linkHref: 'http://avue.top',
|
||
linkTarget: '_self',
|
||
textAlign: "center",
|
||
fontSize: 26,
|
||
fontWeight: "normal",
|
||
color: "#fff"
|
||
},
|
||
},
|
||
}, {
|
||
label: '实时时间',
|
||
option: {
|
||
name: "实时时间",
|
||
title: "实时时间",
|
||
icon: 'icon-datetime',
|
||
img: '/img/assets/datetime.png',
|
||
top: 78,
|
||
left: 1604,
|
||
component: {
|
||
width: 250,
|
||
height: 50,
|
||
name: "datetime",
|
||
prop: "datetime",
|
||
},
|
||
option: {
|
||
format: 'yyyy-MM-dd hh:mm:ss',
|
||
color: "#fff",
|
||
textAlign: 'left',
|
||
fontSize: 24,
|
||
fontWeight: "normal"
|
||
}
|
||
},
|
||
}]
|
||
}, {
|
||
label: '媒体',
|
||
icon: 'icon-img',
|
||
children: [{
|
||
label: '图片',
|
||
option: {
|
||
title: "图片",
|
||
name: "图片",
|
||
icon: 'icon-img',
|
||
img: '/img/assets/img.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: {
|
||
value: '/img/img-default.png'
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 180,
|
||
height: 120,
|
||
name: 'img',
|
||
prop: 'img',
|
||
},
|
||
option: {
|
||
duration: '1000',
|
||
}
|
||
}
|
||
}, {
|
||
label: '图片框',
|
||
option: {
|
||
title: "图片框",
|
||
name: "图片框",
|
||
icon: 'icon-imgborder',
|
||
img: '/img/assets/imgborder.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: "/img/border/border1.png",
|
||
component: {
|
||
width: 140,
|
||
height: 140,
|
||
name: "imgborder",
|
||
prop: "imgborder",
|
||
},
|
||
option: {
|
||
backgroundColor: 'rgba(180, 181, 198, 0.1)',
|
||
}
|
||
}
|
||
}, {
|
||
label: 'SVG',
|
||
option: {
|
||
title: "SVG",
|
||
name: "SVG",
|
||
icon: 'icon-svg',
|
||
img: '/img/assets/svg.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: "img/border/border1.png",
|
||
component: {
|
||
width: 100,
|
||
height: 100,
|
||
name: "svg",
|
||
prop: "svg",
|
||
},
|
||
option: {
|
||
content: ''
|
||
}
|
||
}
|
||
}, {
|
||
label: '轮播图',
|
||
option: {
|
||
title: "轮播图",
|
||
name: "轮播图",
|
||
icon: 'icon-banner',
|
||
img: '/img/assets/swiper.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: [{
|
||
value: 'https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg',
|
||
}, {
|
||
value: 'https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg',
|
||
}, {
|
||
value: 'http://www.w3school.com.cn/i/movie.ogg'
|
||
}],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "swiper",
|
||
prop: "swiper"
|
||
},
|
||
option: {
|
||
type: '',
|
||
interval: 5000,
|
||
opacity: 100,
|
||
indicator: 'none',
|
||
autoplay: true,
|
||
controls: true,
|
||
loop: true
|
||
},
|
||
}
|
||
}, {
|
||
label: 'iframe',
|
||
option: {
|
||
title: "iframe",
|
||
name: "iframe",
|
||
icon: 'icon-iframe',
|
||
img: '/img/assets/iframe.png',
|
||
top: 0,
|
||
left: 0,
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
option: {},
|
||
name: "iframe",
|
||
prop: "iframe"
|
||
},
|
||
dataType: 0,
|
||
data: {
|
||
value: 'https://www.jnpfsoft.com/'
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
option: {},
|
||
}
|
||
}, {
|
||
label: 'video播放器',
|
||
option: {
|
||
title: "video",
|
||
name: "video",
|
||
icon: 'icon-video',
|
||
img: '/img/assets/video.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: {
|
||
value: 'http://www.w3school.com.cn/i/movie.ogg'
|
||
},
|
||
option: {
|
||
autoplay: false,
|
||
controls: true,
|
||
loop: true,
|
||
poster: ''
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "video",
|
||
prop: "video"
|
||
},
|
||
}
|
||
}, {
|
||
label: 'hls播放器',
|
||
option: {
|
||
title: "hls",
|
||
name: "hls",
|
||
icon: 'icon-video',
|
||
img: '/img/assets/video.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: {
|
||
value: 'https://node1.olelive.com:6443/live/CCTV9HD/hls.m3u8'
|
||
},
|
||
option: {
|
||
autoplay: true
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
option: {},
|
||
name: "clapper",
|
||
prop: "clapper"
|
||
},
|
||
}
|
||
}, {
|
||
label: '二维码',
|
||
option: {
|
||
name: "二维码",
|
||
title: "二维码",
|
||
icon: "icon-code",
|
||
img: "/img/assets/text8.png",
|
||
dataType: 0,
|
||
data: {
|
||
value: 'https://www.jnpfsoft.com/'
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 200,
|
||
height: 200,
|
||
name: "code",
|
||
prop: "code"
|
||
},
|
||
option: {
|
||
level: 'H',
|
||
color: '#fff',
|
||
background: 'rgba(21, 42, 64, 1)'
|
||
},
|
||
left: 0,
|
||
top: 0,
|
||
display: false,
|
||
lock: false,
|
||
group: "",
|
||
child: {
|
||
index: [],
|
||
paramList: []
|
||
}
|
||
}
|
||
}]
|
||
}, {
|
||
label: '指标',
|
||
icon: 'icon-flop',
|
||
children: [{
|
||
label: '翻牌器',
|
||
option: {
|
||
title: "翻牌器",
|
||
name: "翻牌器",
|
||
icon: 'icon-flop',
|
||
img: '/img/assets/flop.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
child: {
|
||
index: [],
|
||
paramName: ""
|
||
},
|
||
data: {
|
||
value: '12345'
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 445.6,
|
||
height: 86.56,
|
||
name: "flop",
|
||
prop: "flop",
|
||
},
|
||
option: {
|
||
textAlign: 'center',
|
||
paddingLeft: 10,
|
||
marginLeft: 10,
|
||
border: true,
|
||
borderColor: "#fff",
|
||
borderWidth: 10,
|
||
backgroundBorder: "img/border/border1.png",
|
||
fontSize: 50,
|
||
color: "#afdef2",
|
||
backgroundColor: "#132d4f"
|
||
},
|
||
}
|
||
}, {
|
||
label: '颜色块',
|
||
option: {
|
||
title: "颜色块",
|
||
name: "颜色块",
|
||
icon: 'icon-flop',
|
||
img: '/img/assets/flop2.png',
|
||
"child": {
|
||
"index": [],
|
||
"paramName": ""
|
||
},
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: [{
|
||
backgroundColor: '#67C23A',
|
||
prefixText: "某某某总人数",
|
||
value: '12345',
|
||
suffixText: '人',
|
||
}, {
|
||
backgroundColor: '#409EFF',
|
||
prefixText: "某某某总人数",
|
||
value: '12345',
|
||
suffixText: '人',
|
||
}, {
|
||
backgroundColor: '#E6A23C',
|
||
prefixText: "某某某总人数",
|
||
value: '12345',
|
||
suffixText: '人',
|
||
}, {
|
||
backgroundColor: '#F56C6C',
|
||
prefixText: "某某某总人数",
|
||
value: '12345',
|
||
suffixText: '人',
|
||
}, {
|
||
backgroundColor: '#7232dd',
|
||
prefixText: "某某某总人数",
|
||
value: '12345',
|
||
suffixText: '人',
|
||
}, {
|
||
backgroundColor: 'blue',
|
||
prefixText: "某某某总人数",
|
||
value: '12345',
|
||
suffixText: '人',
|
||
}],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 543.04,
|
||
height: 196.28,
|
||
name: "flop",
|
||
prop: "flop",
|
||
},
|
||
option: {
|
||
width: 180,
|
||
whole: true,
|
||
fontSize: 28,
|
||
prefixFontSize: 13,
|
||
backgroundColor: "#F56C6C",
|
||
suffixFontSize: 18,
|
||
marginTop: 10,
|
||
marginLeft: 5,
|
||
paddingTop: 10,
|
||
paddingLeft: 30,
|
||
color: "#fff",
|
||
suffixInline: true,
|
||
fontWeight: "bolder"
|
||
},
|
||
}
|
||
}, {
|
||
label: '环形图',
|
||
option: {
|
||
title: "环形图",
|
||
name: "环形图",
|
||
icon: 'icon-circle',
|
||
img: '/img/assets/progress.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: {
|
||
label: "人数增涨",
|
||
value: 40,
|
||
data: 80
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 300,
|
||
height: 300,
|
||
name: "progress",
|
||
prop: "progress"
|
||
},
|
||
option: {
|
||
type: "circle",
|
||
color: "#60d3da",
|
||
fontSize: 25,
|
||
suffixColor: "#60d3da",
|
||
strokeWidth: 20,
|
||
fontWeight: "normal",
|
||
borderColor: "#60d3da",
|
||
suffixFontSize: 30,
|
||
FontWeight: "normal"
|
||
},
|
||
}
|
||
}, {
|
||
label: '进度条',
|
||
option: {
|
||
title: "进度条",
|
||
name: "进度条",
|
||
icon: 'icon-progress',
|
||
img: '/img/assets/progress2.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {
|
||
label: "人数增涨",
|
||
value: 40,
|
||
data: 80
|
||
},
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 500,
|
||
height: 100,
|
||
name: "progress",
|
||
prop: "progress"
|
||
},
|
||
option: {
|
||
type: "line",
|
||
color: "#60d3da",
|
||
fontSize: 25,
|
||
suffixColor: "#60d3da",
|
||
strokeWidth: 10,
|
||
fontWeight: "normal",
|
||
borderColor: "#60d3da",
|
||
suffixFontSize: 30,
|
||
FontWeight: "normal"
|
||
},
|
||
}
|
||
}, {
|
||
label: '仪表盘',
|
||
option: {
|
||
title: "仪表盘",
|
||
icon: 'icon-gauge',
|
||
img: '/img/assets/gauge.png',
|
||
name: "仪表盘",
|
||
dataType: 0,
|
||
data: {
|
||
value: 4
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 390,
|
||
height: 314,
|
||
name: "gauge",
|
||
prop: "gauge"
|
||
},
|
||
option: {
|
||
lineSize: 15,
|
||
axisLabelShow: true,
|
||
axisLabelFontSize: 15,
|
||
nameFontSize: 40,
|
||
lineColor: "#eee",
|
||
barColor: [
|
||
{
|
||
color1: "rgba(154, 168, 212, 1)",
|
||
postion: "0.2",
|
||
},
|
||
{
|
||
color1: "#23B7E5",
|
||
postion: "0.8",
|
||
},
|
||
{
|
||
color1: "#564AA3",
|
||
postion: "1",
|
||
}
|
||
]
|
||
},
|
||
},
|
||
}, {
|
||
label: '字符云',
|
||
option: {
|
||
title: "字符云",
|
||
name: "字符云",
|
||
icon: "icon-wordCloud",
|
||
img: '/img/assets/wordcloud.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: [{
|
||
name: '三星',
|
||
value: '1'
|
||
}, {
|
||
name: '小米',
|
||
value: '10'
|
||
}, {
|
||
name: '华为',
|
||
value: '20'
|
||
}, {
|
||
name: 'oppo',
|
||
value: '30'
|
||
}, {
|
||
name: '抖音',
|
||
value: '40'
|
||
}, {
|
||
name: '快手',
|
||
value: '50'
|
||
}, {
|
||
name: '淘宝',
|
||
value: '60'
|
||
}, {
|
||
name: '百度',
|
||
value: '70'
|
||
}, {
|
||
name: '京东',
|
||
value: '80'
|
||
}, {
|
||
name: '天猫',
|
||
value: '100'
|
||
}, {
|
||
name: '字符1',
|
||
value: '110'
|
||
}, {
|
||
name: '字符1',
|
||
value: '200',
|
||
textStyle: {
|
||
color: 'red'
|
||
}
|
||
}],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
name: "wordcloud",
|
||
prop: "wordcloud",
|
||
width: 600,
|
||
height: 300,
|
||
},
|
||
option: {
|
||
minFontSize: 30,
|
||
maxFontSize: 80,
|
||
split: 30,
|
||
rotate: true,
|
||
}
|
||
}
|
||
}]
|
||
}, {
|
||
label: '表格',
|
||
icon: 'icon-table',
|
||
children: [{
|
||
label: '表格',
|
||
option: {
|
||
title: "表格",
|
||
name: "表格",
|
||
icon: 'icon-table',
|
||
img: '/img/assets/table.png',
|
||
top: 0,
|
||
left: 0,
|
||
dataType: 0,
|
||
data: [{
|
||
type1: '数据1',
|
||
type2: '数据1'
|
||
}, {
|
||
type1: '数据2',
|
||
type2: '数据2'
|
||
}, {
|
||
type1: '数据3',
|
||
type2: '数据3'
|
||
}, {
|
||
type1: '数据4',
|
||
type2: '数据4'
|
||
}],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 700,
|
||
height: 350,
|
||
name: "table",
|
||
prop: "table",
|
||
},
|
||
option: {
|
||
showHeader: true,
|
||
columnShow: true,
|
||
columnViews: true,
|
||
headerBackground: "#050e18",
|
||
headerColor: "#69bfe7",
|
||
headerTextAlign: "center",
|
||
nthColor: "#09192c",
|
||
bodyBackground: "rgba(0, 0, 0, 0.01)",
|
||
bodyColor: "#69bfe7",
|
||
bodyTextAlign: "center",
|
||
align: "center",
|
||
headerAlign: "center",
|
||
header: false,
|
||
scrollSpeed: 1,
|
||
fontSize: 15,
|
||
count: 4,
|
||
index: true,
|
||
column: [
|
||
{
|
||
label: "列1",
|
||
prop: "type1",
|
||
$index: 0
|
||
},
|
||
{
|
||
label: "列2",
|
||
prop: "type2",
|
||
$index: 1
|
||
},
|
||
{
|
||
label: "列3",
|
||
prop: "type3",
|
||
$index: 2
|
||
},
|
||
{
|
||
label: "列4",
|
||
prop: "type4",
|
||
$index: 3
|
||
}
|
||
],
|
||
othColor: "#142a40",
|
||
headerFontSize: 20,
|
||
bodyFontSize: 18
|
||
}
|
||
}
|
||
}, {
|
||
label: '选项卡',
|
||
option: {
|
||
title: "选项卡",
|
||
name: "选项卡",
|
||
icon: "icon-tabs",
|
||
img: '/img/assets/tabs.png',
|
||
child: {
|
||
index: [],
|
||
paramName: ""
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
dataType: 0,
|
||
data: [
|
||
{
|
||
label: "选项卡1",
|
||
value: "1"
|
||
},
|
||
{
|
||
label: "选项卡2",
|
||
value: "2"
|
||
}
|
||
],
|
||
component: {
|
||
width: 356,
|
||
height: 46,
|
||
name: "tabs",
|
||
prop: "tabs"
|
||
},
|
||
option: {
|
||
type: 'tabs',
|
||
color: "#eee",
|
||
empColor: "#4dffff",
|
||
fontSize: 20,
|
||
split: 8,
|
||
empBackgroundImage: "img/banner/banner5.png",
|
||
backgroundImage: "img/banner/banner4.png"
|
||
},
|
||
},
|
||
},]
|
||
}, {
|
||
label: '神器',
|
||
icon: 'icon-vue',
|
||
children: [{
|
||
label: '自定义Vue组件',
|
||
option: {
|
||
name: "自定义Vue组件",
|
||
title: "自定义Vue组件",
|
||
icon: 'icon-vue',
|
||
img: '/img/assets/text4.png',
|
||
dataType: 0,
|
||
data: {
|
||
name: "avue"
|
||
},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 800,
|
||
height: 500,
|
||
name: "vue",
|
||
prop: "vue",
|
||
remoteContent: ''
|
||
},
|
||
option: {
|
||
remote: false,
|
||
content: "<template>\n <div class=\"test\">\n <h1 @click=\"handleClick\">{{dataChart}}<h1>\n </div>\n</template>\n<script>\nexport default{\n data(){\n return{\n \n }\n },\n created(){\n console.log(this.refList);\n },\n methods:{\n handleClick(){\n this.$message.success(this.dataChart.name)\n }\n }\n}\n</script>\n<style>\n .test{\n text-align:center;\n color:red;\n font-size:40px;\n }\n</style>",
|
||
src: '/vue-remote-temp.js'
|
||
}
|
||
}
|
||
}, {
|
||
label: '组件融合',
|
||
option: {
|
||
name: "组件融合",
|
||
title: "组件融合",
|
||
icon: 'icon-group',
|
||
img: '/img/assets/group.png',
|
||
dataType: 0,
|
||
data: [],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
scale: 0.5,
|
||
width: 500,
|
||
height: 500,
|
||
name: "group",
|
||
prop: "group",
|
||
},
|
||
option: {
|
||
remote: false,
|
||
content: "[{\n \"title\": \"文本框\",\n \"name\": \"文本框\",\n \"icon\": \"icon-text\",\n \"img\": \"/img/assets/text.png\",\n \"dataType\": 0,\n \"dataFormatter\": \"\",\n \"dataHeader\": \"\",\n \"dataQuery\": \"\",\n \"stylesFormatter\": \"\",\n \"child\": {\n \"index\": [],\n \"paramList\": []\n },\n \"data\": {\n \"value\": \"文本框\"\n },\n \"component\": {\n \"width\": 100,\n \"height\": 40,\n \"name\": \"text\",\n \"prop\": \"text\",\n \"perspective\": 0,\n \"opacity\": 0,\n \"rotateX\": 0,\n \"rotateY\": 0,\n \"rotateZ\": 0\n },\n \"option\": {\n \"textAlign\": \"center\",\n \"fontSize\": 26,\n \"fontWeight\": \"normal\",\n \"color\": \"#fff\"\n },\n \"left\": 0,\n \"top\": 0,\n \"index\": \"eba3a6c8-f48e-471d-b9b0-829e34565365\",\n \"display\": false,\n \"lock\": false,\n \"group\": \"\",\n \"zIndex\": 1\n}]",
|
||
id: ''
|
||
}
|
||
}
|
||
}, {
|
||
label: 'html自定义',
|
||
option: {
|
||
name: "html自定义",
|
||
title: "html自定义",
|
||
icon: 'icon-html',
|
||
img: '/img/assets/html.png',
|
||
dataType: 0,
|
||
data: [],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 500,
|
||
height: 500,
|
||
name: "html",
|
||
prop: "html",
|
||
remoteContent: ''
|
||
},
|
||
option: {
|
||
remote: false,
|
||
src: '/html-remote-temp.js',
|
||
content: '<div style=\"color:red;font-size:80px\">自定义HTML标题</div>',
|
||
}
|
||
}
|
||
}, {
|
||
label: '定时器',
|
||
option: {
|
||
name: "定时器",
|
||
title: "定时器",
|
||
icon: 'icon-datetime',
|
||
img: '/img/assets/time.png',
|
||
echartFormatter: "(refs)=>{\n console.log(refs)\n}",
|
||
component: {
|
||
width: 100,
|
||
height: 100,
|
||
name: 'time',
|
||
prop: 'time',
|
||
},
|
||
option: {
|
||
time: 0
|
||
}
|
||
}
|
||
}, {
|
||
label: '数据集',
|
||
option: {
|
||
name: "数据集",
|
||
title: "数据集",
|
||
icon: 'icon-public',
|
||
img: '/img/assets/public.png',
|
||
dataType: 0,
|
||
data: {},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
component: {
|
||
width: 100,
|
||
height: 100,
|
||
name: 'data',
|
||
prop: 'data',
|
||
},
|
||
option: {
|
||
|
||
}
|
||
}
|
||
}, {
|
||
label: '全屏组件',
|
||
option: {
|
||
name: "全屏组件",
|
||
title: "全屏组件",
|
||
icon: 'icon-fullscreen',
|
||
img: '/img/assets/fullscreen.png',
|
||
dataType: 0,
|
||
data: [],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 100,
|
||
height: 50,
|
||
name: "fullscreen",
|
||
prop: "fullscreen",
|
||
},
|
||
option: {
|
||
color: '#fff',
|
||
fontSize: '14'
|
||
}
|
||
}
|
||
}, {
|
||
label: '自定义源码组件',
|
||
option: {
|
||
name: "自定义源码组件",
|
||
title: "自定义源码组件",
|
||
icon: 'icon-vue',
|
||
img: '/img/assets/test.png',
|
||
dataType: 0,
|
||
data: [],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 800,
|
||
height: 500,
|
||
name: "test",
|
||
prop: "test",
|
||
},
|
||
option: {
|
||
fontSize: 20,
|
||
}
|
||
}
|
||
}]
|
||
}, {
|
||
label: '线状',
|
||
icon: 'icon-graph',
|
||
children: [{
|
||
label: '直线',
|
||
option: {
|
||
name: "直线",
|
||
title: "直线",
|
||
icon: 'icon-graph',
|
||
img: '/img/assets/horizontal.png',
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 200,
|
||
height: 10,
|
||
name: "graph",
|
||
prop: "graph"
|
||
},
|
||
option: {
|
||
type: 'horizontal',
|
||
lineType: "",
|
||
color: "rgba(30, 144, 255, 1)",
|
||
size: 10,
|
||
animation: "positive"
|
||
}
|
||
}
|
||
}, {
|
||
label: '竖线',
|
||
option: {
|
||
name: "竖线",
|
||
title: "竖线",
|
||
icon: 'icon-graph',
|
||
img: '/img/assets/vertical.png',
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 40,
|
||
height: 200,
|
||
name: "graph",
|
||
prop: "graph"
|
||
},
|
||
option: {
|
||
type: 'vertical',
|
||
lineType: "",
|
||
color: "rgba(30, 144, 255, 1)",
|
||
size: 10,
|
||
animation: "positive"
|
||
}
|
||
}
|
||
}, {
|
||
label: '矩形',
|
||
option: {
|
||
name: "矩形",
|
||
title: "矩形",
|
||
icon: 'icon-graph',
|
||
img: '/img/assets/rotundity.png',
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 200,
|
||
height: 200,
|
||
name: "graph",
|
||
prop: "graph"
|
||
},
|
||
option: {
|
||
type: 'rotundity',
|
||
lineType: "",
|
||
color: "rgba(30, 144, 255, 1)",
|
||
size: 20,
|
||
animation: ""
|
||
}
|
||
}
|
||
}, {
|
||
label: '圆形',
|
||
option: {
|
||
name: "圆形",
|
||
title: "圆形",
|
||
icon: 'icon-graph',
|
||
img: '/img/assets/rectangle.png',
|
||
dataType: 0,
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 200,
|
||
height: 200,
|
||
name: "graph",
|
||
prop: "graph"
|
||
},
|
||
option: {
|
||
type: 'rectangle',
|
||
lineType: "",
|
||
color: "rgba(30, 144, 255, 1)",
|
||
size: 20,
|
||
animation: ""
|
||
}
|
||
}
|
||
}]
|
||
}, {
|
||
label: '边框',
|
||
icon: 'icon-biankuang',
|
||
children: [{
|
||
label: '边框1',
|
||
option: {
|
||
title: "边框1",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_01.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 1,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框2',
|
||
option: {
|
||
title: "边框2",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_02.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 2,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框3',
|
||
option: {
|
||
title: "边框3",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_03.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 3,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框4',
|
||
option: {
|
||
title: "边框4",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_04.png',
|
||
top: 0,
|
||
left: 0,
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 4,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框5',
|
||
option: {
|
||
title: "边框5",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_05.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 5,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框6',
|
||
option: {
|
||
title: "边框6",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_06.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 6,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框7',
|
||
option: {
|
||
title: "边框7",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_07.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 7,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框8',
|
||
option: {
|
||
title: "边框8",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_08.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 8,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框9',
|
||
option: {
|
||
title: "边框9",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_09.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 9,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框10',
|
||
option: {
|
||
title: "边框10",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_10.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 10,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框11',
|
||
option: {
|
||
title: "边框11",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_11.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 11,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '边框12',
|
||
option: {
|
||
title: "边框12",
|
||
name: "datav",
|
||
icon: 'icon-biankuang',
|
||
img: '/img/assets/borderBox/borderBox_12.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 300,
|
||
height: 150,
|
||
name: "borderBox",
|
||
prop: "borderBox"
|
||
},
|
||
option: {
|
||
type: 12,
|
||
color1: '#83bff6',
|
||
color2: '#00CED1',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}]
|
||
}, {
|
||
label: '装饰',
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
children: [{
|
||
label: '装饰1',
|
||
option: {
|
||
title: "装饰1",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_01.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 1,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰2',
|
||
option: {
|
||
title: "装饰2",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_02.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 2,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰3',
|
||
option: {
|
||
title: "装饰3",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_03.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 3,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰4',
|
||
option: {
|
||
title: "装饰4",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_04.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 4,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰5',
|
||
option: {
|
||
title: "装饰5",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_05.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 5,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰6',
|
||
option: {
|
||
title: "装饰6",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_06.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 6,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰7',
|
||
option: {
|
||
title: "装饰7",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_07.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 7,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰8',
|
||
option: {
|
||
title: "装饰8",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_08.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 8,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰9',
|
||
option: {
|
||
title: "装饰9",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_09.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 440.5,
|
||
height: 377.65,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 9,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰10',
|
||
option: {
|
||
title: "装饰10",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_10.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 10,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰11',
|
||
option: {
|
||
title: "装饰11",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_11.png',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 670,
|
||
height: 370,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 11,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}, {
|
||
label: '装饰12',
|
||
option: {
|
||
title: "装饰12",
|
||
name: "datav",
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
img: '/img/assets/decorate/decorate_12.gif',
|
||
top: 0,
|
||
left: 0,
|
||
data: {},
|
||
component: {
|
||
width: 430,
|
||
height: 430,
|
||
name: "decoration",
|
||
prop: "decoration"
|
||
},
|
||
option: {
|
||
type: 12,
|
||
color1: '#00CED1',
|
||
color2: '#FAD400',
|
||
dur: undefined
|
||
}
|
||
}
|
||
}]
|
||
}, {
|
||
label: '二次开发',
|
||
icon: 'icon-jianzhuzhuangshi',
|
||
children: [{
|
||
label: '滚动选项卡',
|
||
option: {
|
||
name: "滚动选项卡",
|
||
title: "滚动选项卡",
|
||
icon: 'icon-vue',
|
||
img: '/img/assets/text4.png',
|
||
dataType: 0,
|
||
data: [{
|
||
text: '领导调研',
|
||
list: [
|
||
"https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg",
|
||
"https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg"
|
||
]
|
||
}, {
|
||
text: '先进事件',
|
||
list: [
|
||
"https://img.alicdn.com/imgextra/i1/O1CN01NAnI6W1Vf1kZScscd_!!6000000002679-0-tps-2880-1070.jpg",
|
||
"https://img.alicdn.com/imgextra/i2/O1CN011FMQT21RF8u1nHsem_!!6000000002081-0-tps-2880-1070.jpg"
|
||
]
|
||
}],
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 800,
|
||
height: 400,
|
||
name: "imgTabs",
|
||
prop: "imgTabs",
|
||
},
|
||
option: {
|
||
direction: 'horizontal',
|
||
interval: 3000,
|
||
time: 3000,
|
||
autoplay: true
|
||
}
|
||
}
|
||
},
|
||
// {
|
||
// label: '滚动列表',
|
||
// option: {
|
||
// name: "滚动列表",
|
||
// title: "滚动列表",
|
||
// icon: 'icon-vue',
|
||
// img: '/img/assets/text4.png',
|
||
// dataType: 0,
|
||
// data: [
|
||
// {
|
||
// name: "jnpf",
|
||
// time: "11:26",
|
||
// color: "#7c324c",
|
||
// date: "2022-05-22",
|
||
// dept: "设计部",
|
||
// img: "https://oss.bladex.vip/caster/upload/20220522/6f2a92d95b64efeb42c131489abaff2f.webp"
|
||
// },
|
||
// {
|
||
// name: "jnpf",
|
||
// time: "11:26",
|
||
// color: "#6b6230",
|
||
// date: "2022-05-22",
|
||
// dept: "设计部",
|
||
// img: "https://oss.bladex.vip/caster/upload/20220522/6f2a92d95b64efeb42c131489abaff2f.webp"
|
||
// },
|
||
// {
|
||
// name: "jnpf",
|
||
// time: "11:26",
|
||
// date: "2022-05-22",
|
||
// color: "#274d86",
|
||
// dept: "设计部",
|
||
// img: "https://oss.bladex.vip/caster/upload/20220522/6f2a92d95b64efeb42c131489abaff2f.webp"
|
||
// }
|
||
// ],
|
||
// dataFormatter: "",
|
||
// dataHeader: "",
|
||
// dataQuery: "",
|
||
// stylesFormatter: "",
|
||
// component: {
|
||
// width: 800,
|
||
// height: 500,
|
||
// name: "imgList",
|
||
// prop: "imgList",
|
||
// },
|
||
// option: {
|
||
// step: 1,
|
||
// direction: 1,
|
||
// hoverStop: true,
|
||
// }
|
||
// }
|
||
// },
|
||
{
|
||
label: '倒计时',
|
||
option: {
|
||
name: "倒计时",
|
||
title: "倒计时",
|
||
icon: "icon-vue",
|
||
img: "/img/assets/text4.png",
|
||
dataType: 0,
|
||
data: {},
|
||
dataFormatter: "",
|
||
dataHeader: "",
|
||
dataQuery: "",
|
||
stylesFormatter: "",
|
||
component: {
|
||
width: 800,
|
||
height: 45,
|
||
name: "vue",
|
||
prop: "vue"
|
||
},
|
||
option: {
|
||
content: "<template>\n <div class=\"datetime\">\n {{datetime}}\n </div>\n</template>\n<script>\nexport default {\n data () {\n return {\n interval:null,\n datetime: ''\n }\n },\n created () {\n this.countdown('2026-02-13T23:59:59', '%d天 %h小时 %m分钟 %s秒');\n },\n methods: {\n setTime(deadline,format){\n var now = new Date().getTime();\n var distance = deadline - now;\n if (distance < 0) {\n clearInterval(this.interval);\n return;\n }\n var days = Math.floor(distance / (1000 * 60 * 60 * 24));\n var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\n var seconds = Math.floor((distance % (1000 * 60)) / 1000);\n var output = format.replace('%d', days)\n .replace('%h', hours)\n .replace('%m', minutes)\n .replace('%s', seconds);\n this.datetime = output\n },\n countdown (date, format) {\n deadline = new Date(date).getTime();\n this.setTime(deadline,format);\n this.interval = setInterval(() => {\n this.setTime(deadline,format)\n }, 1000);\n }\n }\n}\n</script>\n<style>\n.datetime {\n font-size: 30px;\n color: #fff;\n text-align: center;\n}\n</style>",
|
||
},
|
||
left: 0,
|
||
top: 0,
|
||
display: false,
|
||
lock: false,
|
||
group: "",
|
||
child: {
|
||
index: [],
|
||
paramList: []
|
||
}
|
||
}
|
||
}]
|
||
}]
|
||
} |