kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏自残术结构重构

Browse Source
This commit is contained in:
aixianling
2024-04-12 15:03:17 +08:00
parent b5523f5f40
commit 5d2a66b861
2 changed files with 229 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

439
packages/bigscreen/designer/config.js
View File

@@ -458,7 +458,7 @@ const maps = [{
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png', thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0', is3dAround: '0',
limitArea: '0', limitArea: '0',
}, {type: "linkageMap", label: "联动地图", width: 800, height: 964, top: 0, left: 560}] }, {type: "linkageMap", label: "联动地图", width: 800, height: 964, top: 0, left: 560, thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/linkageMap.png"}]
const customHtml = { const customHtml = {
label: "HTML块", type: "html", list: [{ label: "HTML块", type: "html", list: [{
type: 'html', type: 'html',
@@ -474,7 +474,7 @@ const customHtml = {
}] }]
} }
const components = [{ const components = [{
type: 'chart', label: '图表', list: [...chartTpl, { label: '图表', list: [...chartTpl, {
label: "多维图", type: "plot", list: [{ label: "多维图", type: "plot", list: [{
type: 'plot', type: 'plot',
label: '多维图表', label: '多维图表',
@@ -499,155 +499,78 @@ const components = [{
}] }]
}] }]
}, { }, {
label: '表格', list: [ label: '表格', list: [{
{ type: 'table',
label: '单表格', list: [{ label: '表格',
type: 'table', title: '表格',
label: '表格', border: 'border6',
title: '表格', width: 650,
border: 'border6', height: 400,
width: 650, zIndex: 1,
height: 400, thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
zIndex: 1, dataX: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png', dataY: [],
dataX: '', rowNum: 7,
dataY: [], isShowIndex: '1',
rowNum: 7, sourceDataId: '',
isShowIndex: '1', api: '',
sourceDataId: '', apiData: [],
api: '', dataType: 'staticData',
apiData: [], dynamicData: [],
dataType: 'staticData', staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
dynamicData: [], }, {
staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}] type: 'AiDvTable',
}, { label: '新版表格',
type: 'AiDvTable', title: '新版表格',
label: '新版表格', border: 'border6',
title: '新版表格', width: 650,
border: 'border6', height: 400,
width: 650, zIndex: 1,
height: 400, thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
zIndex: 1, dataX: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png', dataY: [],
dataX: '', rowNum: 7,
dataY: [], stripe: '1',
rowNum: 7, isShowIndex: '1',
stripe: '1', sourceDataId: '',
isShowIndex: '1', api: '',
sourceDataId: '', config: [{
api: '', width: '', color: '', align: ''
config: [{ }, {
width: '', color: '', align: '' width: '', color: '', align: ''
}, { }, {
width: '', color: '', align: '' width: '', color: '', align: ''
}, { }],
width: '', color: '', align: '' apiData: [],
}], dataType: 'staticData',
apiData: [], dynamicData: [],
dataType: 'staticData', staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}]
dynamicData: [], }, {
staticData: [{name: '列1', v: 23, v2: 3}, {name: '列2', v: 12, v2: 4}, {name: '列2', v: 12, v2: 4}] type: 'AiRanking',
}, { label: '排行榜',
type: 'AiRanking', title: '排行榜',
label: '排行榜', border: 'border6',
title: '排行榜', width: 523,
border: 'border6', height: 400,
width: 523, zIndex: 1,
height: 400, thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png',
zIndex: 1, dataX: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/table.png', dataY: [],
dataX: '', rowNum: 7,
dataY: [], subType: 'Ranking1',
rowNum: 7, stripe: '1',
subType: 'Ranking1', isShowIndex: '1',
stripe: '1', sourceDataId: '',
isShowIndex: '1', api: '',
sourceDataId: '', apiData: [],
api: '', dataType: 'staticData',
apiData: [], dynamicData: [],
dataType: 'staticData', staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
dynamicData: [],
staticData: [{name: '列1', value: 23}, {name: '列2', value: 12}, {name: '列2', value: 12}]
}]
},
]
}, {
type: 'ai3d', label: "3D", list: [{
label: "3D楼栋", type: 'building', list: [{
type: 'building1',
label: "楼栋模型1",
width: 840,
height: 800,
zIndex: 1,
title: "楼栋模型1",
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}]
}] }]
}, { },
label: "AI", list: [ {
{ label: "样式", list: [
label: "AI助手", {
list: [{
type: "aiAssist",
label: "AI助手",
width: 134,
height: 140,
zIndex: 1,
title: "AI助手",
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"
}]
}
]
}, {
label: '其他', list: [
{
label: "图片", list: [
{
label: "普通图片",
type: "img",
width: 500,
height: 400,
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
}
]
},
{label: '地图', list: maps}, {
label: '党组织', type: 'partyOrg', list: [{
type: 'partyOrg',
label: '党组织',
width: 840,
height: 800,
zIndex: 1,
top: 0,
left: 0,
dataX: '',
dataY: [],
title: '党组织',
border: 'border3',
sourceDataId: '',
dataType: 'staticData',
staticData: [{
key: '个人服务办理', value: 247
}, {
key: '同比上月', value: 247
}],
dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}]
}, {
label: '边框', type: 'panel', list: [{
type: 'panel',
label: '边框',
title: '边框',
border: 'border0',
width: 400,
height: 400,
isZoom: false,
zIndex: 1,
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
}]
}, {
label: '装饰', type: 'display', list: [{
type: 'display', type: 'display',
label: '装饰', label: '装饰',
display: 'display0', display: 'display0',
@@ -664,55 +587,17 @@ const components = [{
}, { }, {
label: '同比上月', value: 247 label: '同比上月', value: 247
}] }]
}]
}, {
label: '轮播图', list: [{
type: 'swiper',
label: '轮播图',
width: 400,
height: 300,
zIndex: 1,
border: 'border2',
dataType: 'staticData',
staticData: [{
img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
}],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
}, { }, {
type: 'swiper', type: 'panel',
label: '轮播图(点指示器)', label: '边框',
width: 800, title: '边框',
height: 358, border: 'border0',
zIndex: 1,
border: 'border14',
dataType: 'staticData',
staticData: [{
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
}, {
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
},],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
dotIndicator: true
}]
}, {
label: '视频播放器', type: 'video', list: [{
type: 'video',
label: '视频播放器',
width: 400, width: 400,
height: 300, height: 400,
isZoom: false,
zIndex: 1, zIndex: 1,
src: '', thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/border.png'
border: 'border2', }, {
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
}]
}, {
label: '数据统计', type: 'summary', list: [{
type: 'summary', type: 'summary',
label: '数据统计', label: '数据统计',
display: 'summary0', display: 'summary0',
@@ -735,41 +620,147 @@ const components = [{
}], }],
dynamicData: [], dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png' thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}
]
},
{label: '地图', list: maps}, {
type: 'ai3d', label: "3D", list: [{
label: "3D楼栋", type: 'building', list: [{
type: 'building1',
label: "楼栋模型1",
width: 840,
height: 800,
zIndex: 1,
title: "楼栋模型1",
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}] }]
}, { }]
label: '视频监控', list: [ }, {
{ label: "AI", list: [{
type: 'monitor', type: "aiAssist",
label: '视频监控', label: "AI助手",
src: '', width: 134,
width: 480, height: 140,
height: 240, zIndex: 1,
title: "AI助手",
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"
}]
}, {
label: '其他', list: [
{
label: "图片", list: [
{
label: "普通图片",
type: "img",
width: 500,
height: 400,
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
}
]
},
{
label: '党组织', type: 'partyOrg', list: [{
type: 'partyOrg',
label: '党组织',
width: 840,
height: 800,
zIndex: 1, zIndex: 1,
top: 0, top: 0,
left: 0, left: 0,
title: '', dataX: '',
moniterId: '', dataY: [],
monitorType: 'cmcc', title: '党组织',
api: '/app/appzyvideoequipment/list2', border: 'border3',
border: 'border2',
sourceDataId: '', sourceDataId: '',
dataType: 'staticData', dataType: 'staticData',
staticData: '', staticData: [{
dynamicData: '', key: '个人服务办理', value: 247
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png' }, {
}, key: '同比上月', value: 247
{ }],
type: "monitorCarousel", dynamicData: [],
label: "视频轮播", thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
width: 480, }]
height: 480, }, {
label: '轮播图', list: [{
type: 'swiper',
label: '轮播图',
width: 400,
height: 300,
zIndex: 1, zIndex: 1,
title: "视频轮播", border: 'border2',
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png" dataType: 'staticData',
} staticData: [{
] img: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png', title: '湖羊', content: `歙县众城湖羊养殖专业合作社
}, customHtml] 徐晓红 - 18273645627
}] 歙县郑村镇唐跃村碉墅`
}],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
}, {
type: 'swiper',
label: '轮播图(点指示器)',
width: 800,
height: 358,
zIndex: 1,
border: 'border14',
dataType: 'staticData',
staticData: [{
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
}, {
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
},],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
dotIndicator: true
}]
}, {
label: '视频播放器', type: 'video', list: [{
type: 'video',
label: '视频播放器',
width: 400,
height: 300,
zIndex: 1,
src: '',
border: 'border2',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
}]
}, {
label: '视频监控', list: [
{
type: 'monitor',
label: '视频监控',
src: '',
width: 480,
height: 240,
zIndex: 1,
top: 0,
left: 0,
title: '',
moniterId: '',
monitorType: 'cmcc',
api: '/app/appzyvideoequipment/list2',
border: 'border2',
sourceDataId: '',
dataType: 'staticData',
staticData: '',
dynamicData: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png'
},
{
type: "monitorCarousel",
label: "视频轮播",
width: 480,
height: 480,
zIndex: 1,
title: "视频轮播",
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/tpl/video.png"
}
]
}, customHtml]
}]
export {components} export {components}

24
packages/bigscreen/designer/viewport.vue
View File

@@ -30,7 +30,7 @@
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
</div> </div>
</div> </div>
<div class="layout-left__middle"> <div class="layout-left__middle" v-if="hasCategories">
<div>全部</div> <div>全部</div>
<div <div
class="layout-left__middle--item" class="layout-left__middle--item"
@@ -304,18 +304,20 @@ export default {
} }
}, },
widget() { widget() {
if (this.components.length && this.components[this.parentIndex].list.length) { const categories = this.components[this.parentIndex].list
return this.components[this.parentIndex].list[this.subIndex].list if (categories.length) {
return categories[this.subIndex]?.list || categories
} }
return [] return []
}, },
hasCategories: v => v.components[v.parentIndex].list[v.subIndex].list?.length > 0,
comps: v => { comps: v => {
const obj = {} const obj = {}
v.components.map(e => e.list.map(c => c.list.map(com => { const handleOps = e => {
com.echartOps = com.echartOps || v.$echartTpls[com.type] e.echartOps = e.echartOps || v.$echartTpls[e.type]
obj[com.type] = com obj[e.type] = e
}))) }
v.components.map(e => e.list.map(c => c.list?.map(handleOps) || handleOps(c)))
return obj return obj
} }
}, },
@@ -386,7 +388,8 @@ export default {
id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => { id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
if (res?.data) { if (res?.data) {
const data = JSON.parse(res.data.config) const data = JSON.parse(res.data.config)
this.componentList = data.config.filter(Boolean).map(e => ({...this.comps[e.type], ...e})) const getComp = type => this.comps[type] || {}
this.componentList = data.config.filter(Boolean).map(e => ({...getComp(e.type), ...e}))
this.dashboard = data.dashboard this.dashboard = data.dashboard
this.images = data.images || [] this.images = data.images || []
} }
@@ -826,6 +829,7 @@ export default {
padding: 0 10px; padding: 0 10px;
background: #0A0B0D; background: #0A0B0D;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
.layout-left__right--item { .layout-left__right--item {
margin-top: 10px; margin-top: 10px;
@@ -839,7 +843,7 @@ export default {
img { img {
width: auto; width: auto;
height: auto; height: auto;
max-height: 80px; max-height: 130px;
max-width: 100%; max-width: 100%;
margin-left: 50%; margin-left: 50%;
transform: translateX(-50%); transform: translateX(-50%);