初始化
This commit is contained in:
砂糖
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="超链接"
|
||||
:visible.sync="iframeDialog"
|
||||
:width="dialogW"
|
||||
:modal="true"
|
||||
:modal-append-to-body="false"
|
||||
:appen-to-body="true"
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
@close="close"
|
||||
>
|
||||
<div
|
||||
class="el-dialog-div"
|
||||
:style="{height: dialogH}"
|
||||
>
|
||||
<iframe
|
||||
:src="url"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style="border: none;margin: -2px 0"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Iframe',
|
||||
props: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
config: {
|
||||
get () {
|
||||
return this.$store.state.bigScreen.activeItemConfig
|
||||
},
|
||||
set () {
|
||||
}
|
||||
},
|
||||
url () {
|
||||
return this.config?.customize?.url || ''
|
||||
},
|
||||
dialogW () {
|
||||
return this.config?.customize?.dialogW + 'px' || '1000px'
|
||||
},
|
||||
dialogH () {
|
||||
return this.config?.customize?.dialogH + 'px' || '500px'
|
||||
},
|
||||
iframeDialog: {
|
||||
get () {
|
||||
return this.$store.state.bigScreen.iframeDialog
|
||||
},
|
||||
set () {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('bigScreen', ['changeIframeDialog']),
|
||||
close () {
|
||||
this.changeIframeDialog(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-dialog-div{
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div @click.stop>
|
||||
<el-dialog
|
||||
title="超链接"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="dialogW"
|
||||
:modal="true"
|
||||
:modal-append-to-body="false"
|
||||
:append-to-body="true"
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
@close="close"
|
||||
>
|
||||
<div
|
||||
class="el-dialog-div"
|
||||
:style="{height: dialogH}"
|
||||
>
|
||||
<iframe
|
||||
:src="url"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style="border: none;margin: -2px 0"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'IframeDialogPreview',
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
url () {
|
||||
return this.config?.customize?.url || ''
|
||||
},
|
||||
dialogW () {
|
||||
return this.config?.customize?.dialogW + 'px' || '1000px'
|
||||
},
|
||||
dialogH () {
|
||||
return this.config?.customize?.dialogH + 'px' || '500px'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-dialog-div{
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
92
frontend/packages/BasicComponents/LinkChart/index.vue
Normal file
92
frontend/packages/BasicComponents/LinkChart/index.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div
|
||||
class="bs-design-wrap"
|
||||
:class="`bs-text-${customTheme}`"
|
||||
@click="linkHandle"
|
||||
>
|
||||
<div
|
||||
class="content-box"
|
||||
:style="{'font-size': config.customize.fontSize +'px','font-weight': +config.customize.fontWeight,'background-image': `-webkit-linear-gradient(${config.customize.color})`}"
|
||||
>
|
||||
{{ config.customize.title }}
|
||||
</div>
|
||||
<iframeDialogPreview
|
||||
v-if="isPreview"
|
||||
ref="iframeDialogPreview"
|
||||
:config="config"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
|
||||
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
|
||||
import { mapMutations } from 'vuex'
|
||||
import iframeDialogPreview from './iframeDialogPreview'
|
||||
export default {
|
||||
name: 'LinkChart',
|
||||
components: { iframeDialogPreview },
|
||||
mixins: [paramsMixins, commonMixins],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
customClass: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
mounted () {
|
||||
this.chartInit()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('bigScreen', ['changeIframeDialog']),
|
||||
linkHandle () {
|
||||
// 设计态点击不进行跳转,预览态进行跳转
|
||||
if (this.isPreview){
|
||||
if (this.config.customize.url) {
|
||||
if (this.config.customize.openType === 'dialog') {
|
||||
if (this.isPreview) {
|
||||
this.$refs.iframeDialogPreview.dialogVisible = true
|
||||
} else {
|
||||
this.changeIframeDialog(true)
|
||||
}
|
||||
} else {
|
||||
window.open(this.config.customize.url, this.config.customize.openType)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
dataFormatting (config, data) {
|
||||
// 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
|
||||
if (config.dataSource.businessKey) {
|
||||
config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
|
||||
}
|
||||
return config
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-box{
|
||||
//text-align: center;
|
||||
/* 将背景设为渐变 */
|
||||
/*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/
|
||||
/* 规定背景绘制区域 */
|
||||
-webkit-background-clip: text;
|
||||
/* 将文字隐藏 */
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
197
frontend/packages/BasicComponents/LinkChart/setting.vue
Normal file
197
frontend/packages/BasicComponents/LinkChart/setting.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<!--
|
||||
* @description: 标题属性设置面板
|
||||
* @Date: 2022-08-17 16:53:28
|
||||
* @Author: shiyi
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<el-form
|
||||
ref="form"
|
||||
label-width="100px"
|
||||
label-position="left"
|
||||
:model="config"
|
||||
:rules="rules"
|
||||
class="bs-el-form"
|
||||
>
|
||||
<SettingTitle>标题</SettingTitle>
|
||||
<div class="bs-setting-wrap">
|
||||
<el-form-item
|
||||
label="标题"
|
||||
label-width="100px"
|
||||
prop="title"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.customize.title"
|
||||
placeholder="请输入标题"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<SettingTitle>位置</SettingTitle>
|
||||
<div class="bs-setting-wrap">
|
||||
<PosWhSetting :config="config" />
|
||||
</div>
|
||||
<SettingTitle v-if="config.border">
|
||||
边框
|
||||
</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<BorderSetting
|
||||
v-if="config.border"
|
||||
label-width="100px"
|
||||
:config="config.border"
|
||||
:big-title="config.title"
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>旋转</SettingTitle>
|
||||
<div class="lc-field-body">
|
||||
<RotateSetting
|
||||
:config="config"
|
||||
/>
|
||||
</div>
|
||||
<SettingTitle>基础</SettingTitle>
|
||||
<div class="bs-setting-wrap">
|
||||
<el-form-item
|
||||
label="URL"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.customize.url"
|
||||
placeholder="请输入URL地址"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="打开方式"
|
||||
label-width="100px"
|
||||
prop="title"
|
||||
>
|
||||
<el-select
|
||||
v-model="config.customize.openType"
|
||||
popper-class="bs-el-select"
|
||||
class="bs-el-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="(type) in openTypeList"
|
||||
:key="type.label"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="config.customize.openType === 'dialog'"
|
||||
label="弹窗宽度"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="config.customize.dialogW"
|
||||
class="bs-el-input-number"
|
||||
placeholder="请输入弹窗宽度"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="config.customize.openType === 'dialog'"
|
||||
label="弹窗高度"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="config.customize.dialogH"
|
||||
class="bs-el-input-number"
|
||||
placeholder="请输入弹窗高度"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="标题字体大小"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input
|
||||
v-model="config.customize.fontSize"
|
||||
placeholder="请输入标题字体大小"
|
||||
clearable
|
||||
>
|
||||
<template slot="append">
|
||||
px
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="标题字体权重"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="config.customize.fontWeight"
|
||||
class="bs-el-input-number"
|
||||
:min="0"
|
||||
:step="100"
|
||||
placeholder="请输入标题字体权重"
|
||||
/>
|
||||
</el-form-item>
|
||||
<TextGradient v-model="config.customize.color" />
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
|
||||
import TextGradient from 'data-room-ui/BigScreenDesign/RightSetting/TextGradient/index'
|
||||
import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
|
||||
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
|
||||
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
|
||||
export default {
|
||||
name: 'LinkChartSetting',
|
||||
components: {
|
||||
TextGradient,
|
||||
PosWhSetting,
|
||||
SettingTitle,
|
||||
BorderSetting,
|
||||
RotateSetting
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
openTypeList: [
|
||||
{
|
||||
label: '当前窗口',
|
||||
value: '_self'
|
||||
},
|
||||
{
|
||||
label: '新窗口',
|
||||
value: '_blank'
|
||||
},
|
||||
{
|
||||
label: '弹窗',
|
||||
value: 'dialog'
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: '请输入标题', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
config: {
|
||||
get () {
|
||||
return this.$store.state.bigScreen.activeItemConfig
|
||||
},
|
||||
set (val) {
|
||||
this.$store.state.bigScreen.activeItemConfig = val
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
mounted () {},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../assets/style/settingWrap.scss";
|
||||
.bs-setting-wrap{
|
||||
padding: 12px 16px;
|
||||
}
|
||||
</style>
|
||||
59
frontend/packages/BasicComponents/LinkChart/settingConfig.js
Normal file
59
frontend/packages/BasicComponents/LinkChart/settingConfig.js
Normal file
@@ -0,0 +1,59 @@
|
||||
/*
|
||||
* @Descripttion:
|
||||
* @Author: liu.shiyi
|
||||
* @Date: 2022-10-13 11:18:03
|
||||
* @LastEditTime: 2022-10-13 13:55:11
|
||||
*/
|
||||
import { commonConfig, displayOption } from 'data-room-ui/js/config'
|
||||
|
||||
export const settingConfig = {
|
||||
theme: 'dark',
|
||||
text: '超链接占位符', // text内容
|
||||
// 设置面板属性的显隐
|
||||
displayOption: {
|
||||
...displayOption,
|
||||
metricField: {
|
||||
// 指标
|
||||
label: '指标',
|
||||
enable: true,
|
||||
multiple: false // 是否多选
|
||||
},
|
||||
dimensionField: {
|
||||
// 维度
|
||||
label: '维度', // 维度/查询字段
|
||||
enable: false,
|
||||
multiple: true // 是否多选
|
||||
}
|
||||
}
|
||||
}
|
||||
const customConfig = {
|
||||
type: 'linkChart',
|
||||
root: {
|
||||
version: '2023071001',
|
||||
url: 'https://www.runoob.com/',
|
||||
// 绕x轴旋转角度
|
||||
rotateX: 0,
|
||||
// 绕y轴旋转角度
|
||||
rotateY: 0,
|
||||
// 绕z轴旋转角度
|
||||
rotateZ: 0,
|
||||
// 透视距离
|
||||
perspective: 0,
|
||||
skewX: 0,
|
||||
skewY: 0
|
||||
},
|
||||
customize: {
|
||||
title: '超链接占位符',
|
||||
fontSize: 20,
|
||||
fontWeight: 700,
|
||||
color: 'left,#007aff,#007aff',
|
||||
url: 'http://gcpaas.gccloud.com', // 链接地址
|
||||
openType: '_blank', // 打开方式
|
||||
dialogW: 1000, // 弹窗宽度
|
||||
dialogH: 500// 弹窗高度
|
||||
}
|
||||
|
||||
}
|
||||
export const dataConfig = {
|
||||
...commonConfig(customConfig)
|
||||
}
|
||||
Reference in New Issue
Block a user