boyue2025/boyue_jnpf
3
0
Fork 0
mirror of https://gitee.com/myxzgzs/boyue_jnpf.git synced 2025-08-08 15:22:43 +08:00
Code Issues Packages Projects Releases Wiki Activity
boyue_jnpf/boyue-web-vue3/jnpf-web-datascreen-vue3/public/config.js

2411 lines
67 KiB
JavaScript
Raw Normal View History

Initial commit
2025-06-30 09:38:03 +08:00
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
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: []
}
}
}]
}]
}
Reference in New Issue Copy Permalink