forked from github/dataease
Merge pull request #9003 from dataease/pr@dev-v2@feat_de-frame
fix(仪表板): 支持网页组件
This commit is contained in:
王嘉豪
GitHub
commit
52e3f36689
1
core/core-frontend/src/assets/svg/db-more-web.svg
Normal file
1
core/core-frontend/src/assets/svg/db-more-web.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712630540622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4351" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M885.333333 177.066667C838.4 104.533333 697.6 136.533333 652.8 149.333333c-8.533333 2.133333-19.2 4.266667-32 8.533334-40.533333-17.066667-87.466667-25.6-134.4-25.6-200.533333 0-362.666667 162.133333-362.666667 362.666666 0 51.2 10.666667 98.133333 27.733334 140.8-36.266667 117.333333-29.866667 194.133333 21.333333 234.666667 23.466667 19.2 51.2 25.6 81.066667 25.6 59.733333 0 123.733333-27.733333 157.866666-46.933333 23.466667 4.266667 49.066667 8.533333 74.666667 8.533333 130.133333 0 245.333333-68.266667 309.333333-172.8h-106.666666c-51.2 53.333333-121.6 87.466667-202.666667 87.466667-104.533333 0-194.133333-57.6-241.066667-142.933334 85.333333-241.066667 281.6-343.466667 373.333334-379.733333 68.266667 36.266667 119.466667 100.266667 136.533333 179.2H467.2v85.333333h381.866667v-19.2c0-40.533333-6.4-78.933333-19.2-115.2 49.066667-68.266667 93.866667-147.2 55.466666-202.666666z m-70.4 44.8s4.266667 17.066667-27.733333 66.133333c-17.066667-25.6-38.4-49.066667-61.866667-70.4 44.8-4.266667 81.066667-4.266667 89.6 4.266667zM298.666667 802.133333c-29.866667 8.533333-57.6 10.666667-70.4 0-4.266667-2.133333-17.066667-17.066667-10.666667-68.266666 23.466667 27.733333 51.2 49.066667 81.066667 68.266666zM209.066667 497.066667v-4.266667c0-153.6 123.733333-277.333333 277.333333-277.333333h2.133333c-93.866667 53.333333-202.666667 142.933333-279.466666 281.6z" p-id="4352"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import { toRefs } from 'vue'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
||||
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
||||
|
||||
const props = defineProps({
|
||||
dvModel: {
|
||||
type: String,
|
||||
default: 'dv'
|
||||
},
|
||||
themes: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
}
|
||||
})
|
||||
|
||||
const { dvModel } = toRefs(props)
|
||||
const newComponent = () => {
|
||||
eventBus.emit('handleNew', { componentName: 'DeFrame', innerType: 'DeFrame' })
|
||||
}
|
||||
|
||||
const handleDragStart = e => {
|
||||
commonHandleDragStart(e, dvModel.value)
|
||||
}
|
||||
|
||||
const handleDragEnd = e => {
|
||||
commonHandleDragEnd(e, dvModel.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="group"
|
||||
@dragstart="handleDragStart"
|
||||
@dragend="handleDragEnd"
|
||||
v-on:click="newComponent"
|
||||
>
|
||||
<drag-component
|
||||
:themes="themes"
|
||||
icon="db-more-web"
|
||||
label="网页"
|
||||
drag-info="DeFrame&DeFrame"
|
||||
></drag-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.group {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
</style>
|
||||
@ -8,6 +8,18 @@ export const commonStyle = {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
// 超链接配置
|
||||
export const HYPERLINKS = {
|
||||
openMode: '_blank',
|
||||
enable: false,
|
||||
content: 'http://'
|
||||
}
|
||||
|
||||
// 嵌套页面信息
|
||||
export const FRAMELINKS = {
|
||||
src: ''
|
||||
}
|
||||
|
||||
export const defaultStyleValue = {
|
||||
...commonStyle,
|
||||
color: '',
|
||||
@ -132,6 +144,25 @@ const list = [
|
||||
},
|
||||
matrixStyle: {}
|
||||
},
|
||||
{
|
||||
id: '30002',
|
||||
component: 'de-frame',
|
||||
type: 'de-frame',
|
||||
label: '',
|
||||
icon: 'iconfont icon-iframe',
|
||||
defaultClass: 'text-filter',
|
||||
hyperlinks: HYPERLINKS,
|
||||
style: {
|
||||
width: 400,
|
||||
height: 200
|
||||
},
|
||||
frameLinks: FRAMELINKS,
|
||||
x: 1,
|
||||
y: 1,
|
||||
sizeX: 10,
|
||||
sizeY: 5,
|
||||
matrixStyle: {}
|
||||
},
|
||||
{
|
||||
component: 'DeTimeClock',
|
||||
name: '时间组件',
|
||||
|
||||
13
core/core-frontend/src/custom-component/de-frame/Attr.vue
Normal file
13
core/core-frontend/src/custom-component/de-frame/Attr.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="attr-list de-collapse-style">
|
||||
<CommonAttr :element="curComponent"></CommonAttr>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import CommonAttr from '@/custom-component/common/CommonAttr.vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { curComponent } = storeToRefs(dvMainStore)
|
||||
</script>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-row class="main-frame">
|
||||
<div v-if="element.frameLinks.src" class="main-frame">
|
||||
<iframe
|
||||
v-if="state.frameShow"
|
||||
id="iframe"
|
||||
:src="element.frameLinks.src"
|
||||
scrolling="auto"
|
||||
frameborder="0"
|
||||
class="main-frame main-de-iframe"
|
||||
/>
|
||||
<div v-if="editMode === 'edit'" class="frame-mask edit-mask">
|
||||
<span style="opacity: 1">
|
||||
<span style="font-weight: bold; color: lawngreen">{{
|
||||
t('visualization.edit_web_tips')
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
|
||||
<div v-if="editMode !== 'edit'" class="frame-mask preview-top-mask" />
|
||||
<div v-if="editMode !== 'edit'" class="frame-mask preview-right-mask" />
|
||||
<div v-if="editMode !== 'edit'" class="frame-mask preview-left-mask" />
|
||||
<div v-if="screenShot" class="frame-mask" />
|
||||
</div>
|
||||
<div v-else class="info-class">
|
||||
<span>{{ t('visualization.link_add_tips_pre') }}</span>
|
||||
<el-icon><Link /></el-icon>
|
||||
<span>{{ t('visualization.web_add_tips_suf') }}</span>
|
||||
</div>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, toRefs } from 'vue'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { canvasStyleData } = storeToRefs(dvMainStore)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
propValue: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
element: {
|
||||
type: Object
|
||||
},
|
||||
editMode: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: 'edit'
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
},
|
||||
screenShot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const { propValue, element, editMode, active, screenShot } = toRefs(props)
|
||||
|
||||
const state = reactive({
|
||||
pOption: {},
|
||||
frameShow: true
|
||||
})
|
||||
|
||||
const frameLinksChange = () => {
|
||||
state.frameShow = false
|
||||
nextTick(() => {
|
||||
state.frameShow = true
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
useEmitt({
|
||||
name: 'frameLinksChange-' + element.value.id,
|
||||
callback: function () {
|
||||
frameLinksChange()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.info-class {
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
font-size: 12px;
|
||||
color: #9ea6b2;
|
||||
}
|
||||
|
||||
.main-frame {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame-mask {
|
||||
display: flex;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.edit-mask {
|
||||
left: 0px;
|
||||
background-color: #5c5e61;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.preview-top-mask {
|
||||
left: 0px;
|
||||
height: 15px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.preview-right-mask {
|
||||
right: 0px;
|
||||
height: 100% !important;
|
||||
width: 15px !important;
|
||||
}
|
||||
|
||||
.preview-left-mask {
|
||||
left: 0px;
|
||||
height: 100% !important;
|
||||
width: 15px !important;
|
||||
}
|
||||
</style>
|
||||
@ -25,6 +25,8 @@ import DeTimeClock from '@/custom-component/de-time-clock/Component.vue'
|
||||
import DeTimeClockAttr from '@/custom-component/de-time-clock/Attr.vue'
|
||||
import GroupArea from '@/custom-component/group-area/Component.vue'
|
||||
import GroupAreaAttr from '@/custom-component/group-area/Attr.vue'
|
||||
import DeFrame from '@/custom-component/de-frame/ComponentFrame.vue'
|
||||
import DeFrameAttr from '@/custom-component/de-frame/Attr.vue'
|
||||
export const componentsMap = {
|
||||
VText: VText,
|
||||
VQuery,
|
||||
@ -52,7 +54,9 @@ export const componentsMap = {
|
||||
DeTimeClock: DeTimeClock,
|
||||
DeTimeClockAttr: DeTimeClockAttr,
|
||||
GroupArea: GroupArea,
|
||||
GroupAreaAttr: GroupAreaAttr
|
||||
GroupAreaAttr: GroupAreaAttr,
|
||||
DeFrame: DeFrame,
|
||||
DeFrameAttr: DeFrameAttr
|
||||
}
|
||||
|
||||
export default function findComponent(key) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user