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-02-07 17:24:55 +08:00
parent 6cca359c2a
commit 1994faf5b8
6 changed files with 235 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/AiDvRender.vue
View File

@@ -4,6 +4,7 @@
<ai-dv-panel
style="height: 100%; width: 100%;"
v-if="currentType !== 'display'"
:padding="data.padding"
:title="data.title"
:theme="theme"
:border="data.border || ''">
@@ -56,6 +57,7 @@
</ai-map>
<ai-monitor :src="data.src" v-else-if="currentType === 'monitor'" :type="data.monitorType"/>
<ai-monitor-carousel :list="data.list" v-else-if="currentType === 'monitorCarousel'"/>
<img v-else-if="currentType=='img'" :src="data.src" alt="" style="width: 100%; height: 100%; object-fit: fill;"/>
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay
v-else-if="currentType === 'video'"/>
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/>

11
components/layout/AiDvPanel/AiDvPanel.vue
View File

@@ -4,9 +4,13 @@
<template v-if="$slots.title" #title>
<slot name="title"/>
</template>
<slot/>
<div :style="{padding}">
<slot/>
</div>
</component>
<slot style="width: 100%; height: 100%;" v-else></slot>
<div v-else :style="{padding}">
<slot style="width: 100%; height: 100%;"/>
</div>
</section>
</template>
@@ -54,7 +58,8 @@ export default {
theme: {
type: String,
default: '0'
}
},
padding: {default: 0}
},
mounted() {
},

1
components/layout/AiDvPanel/borders/border15.vue
View File

@@ -24,6 +24,7 @@ export default {
padding: 0 10px;
background-image: linear-gradient(270deg, rgba(31, 67, 102, 0), rgba(31, 78, 102, 0.4));
margin-bottom: 12px;
color: white;
}
.slot {

9
packages/bigscreen/designer/components/componentConfig.vue
View File

@@ -17,6 +17,9 @@
<el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
</div>
</div>
<config-item label="內边距">
<el-input size="mini" v-model="config.padding" clearable placeholder="请输入符合css的padding合法值"/>
</config-item>
</div>
</div>
<div class="layout-right__content--wrapper">
@@ -53,6 +56,9 @@
<el-input v-model="config.src" size="mini"></el-input>
</div>
</div>
<config-item label="图片URL" v-if="config.type=='img'">
<el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
</config-item>
<div class="layout-config__item" v-if="config.type === 'monitor'">
<label>视频类型</label>
<div class="layout-config__item--right">
@@ -231,6 +237,7 @@
import ConfigItem from "./configItem.vue";
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import {monitorTypes} from "../config";
export default {
name: 'componentConfig',
components: {AiDialogBtn, ConfigItem},
@@ -242,7 +249,7 @@ export default {
data() {
return {
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
'border11', 'border12', 'border13','border14','border15'],//边框待选项
'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14',
'summary15', 'summary16', 'summary17', 'summary18', 'summary19'],//汇总待选项

2
packages/bigscreen/designer/components/configItem.vue
View File

@@ -78,7 +78,7 @@ export default {
align-items: center;
justify-content: flex-end;
text-align: right;
margin-left: 30px;
margin-left: 27px;
input, textarea {
background: #262C33;

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

@@ -513,209 +513,240 @@ const components = [{
},
{
label: "AI", 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: "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: '地图', type: 'map', list: [{
type: 'map',
label: '地图',
display: 'map',
width: 840,
height: 534,
left: 0,
top: 0,
mask: '2',
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
apiData: [],
dataType: 'staticData',
dynamicData: [],
staticData: [{
label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
}],
api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
layers: 'vector'
}, {
type: 'AiDvMap',
label: '地图',
display: 'map',
width: 840,
height: 534,
left: 0,
top: 0,
mask: '2',
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
apiData: [],
dataType: 'staticData',
dynamicData: [],
staticData: [{
label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
}],
api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
}]
}, {
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
label: '其他', list: [
{
label: "图片", list: [
{
label: "普通图片",
type: "img",
width: 500,
height: 400,
thumb: "https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png"
}
]
},
{
label: '地图', type: 'map', list: [{
type: 'map',
label: '地图',
display: 'map',
width: 840,
height: 534,
left: 0,
top: 0,
mask: '2',
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
apiData: [],
dataType: 'staticData',
dynamicData: [],
staticData: [{
label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
}],
api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
layers: 'vector'
}, {
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',
label: '装饰',
display: 'display0',
width: 840,
height: 540,
isZoom: false,
zIndex: 1,
title: '标题',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
sourceDataId: '',
dataType: 'staticData',
staticData: [{
label: '个人服务办理', value: 247
}, {
label: '同比上月', value: 247
type: 'AiDvMap',
label: '地图',
display: 'map',
width: 840,
height: 534,
left: 0,
top: 0,
mask: '2',
pulseLines: '1',
mapStyle: "e51987628aee5206d4c9ca8c6e98b4f7",
areaId: '',
zIndex: 1,
apiData: [],
dataType: 'staticData',
dynamicData: [],
staticData: [{
label: '中卫慧通', lng: 117.1339399, lat: 36.7190487,
}],
api: '',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
}]
}]
}, {
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',
label: '轮播图(点指示器)',
width: 800,
height: 358,
zIndex: 1,
border: 'border14',
dataType: 'staticData',
staticData: [{
content: `歙县众城湖羊养殖专业合作社
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',
label: '装饰',
display: 'display0',
width: 840,
height: 540,
isZoom: false,
zIndex: 1,
title: '标题',
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/display.png',
sourceDataId: '',
dataType: 'staticData',
staticData: [{
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'
}, {
content: `歙县众城湖羊养殖专业合作社
type: 'swiper',
label: '轮播图(点指示器)',
width: 800,
height: 358,
zIndex: 1,
border: 'border14',
dataType: 'staticData',
staticData: [{
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: '数据统计', type: 'summary', list: [{
type: 'summary',
label: '数据统计',
display: 'summary0',
width: 480,
height: 240,
zIndex: 1,
top: 0,
left: 0,
dataX: '',
dataY: [],
summaryTitle: '',
border: 'border3',
sourceDataId: '',
title: '数据统计',
dataType: 'staticData',
staticData: [{
key: '个人服务办理', value: 247
}, {
key: '同比上月', value: 247
}],
dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
}]
}, {
label: '视频监控', list: [
{
type: 'monitor',
label: '视频监控',
}, {
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: '数据统计', type: 'summary', list: [{
type: 'summary',
label: '数据统计',
display: 'summary0',
width: 480,
height: 240,
zIndex: 1,
top: 0,
left: 0,
title: '',
moniterId: '',
monitorType: 'cmcc',
api: '/app/appzyvideoequipment/list2',
border: 'border2',
dataX: '',
dataY: [],
summaryTitle: '',
border: 'border3',
sourceDataId: '',
title: '数据统计',
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]
staticData: [{
key: '个人服务办理', value: 247
}, {
key: '同比上月', value: 247
}],
dynamicData: [],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.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}