111 lines
3.6 KiB
Vue
111 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<div class="bs-design-wrap" :class="`bs-text-${customTheme}`">
|
||
|
|
<div class="content-box" :key="domkey"
|
||
|
|
:style="{ 'text-align': config.customize.align, 'letter-spacing': config.customize.letterSpacing + 'px', 'font-family': config.customize.fontFamily, 'font-size': config.customize.fontSize + 'px', 'font-weight': +config.customize.fontWeight, 'background-image': `-webkit-linear-gradient(${config.customize.color})` }">
|
||
|
|
{{ config.customize.title }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
|
||
|
|
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
|
||
|
|
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
|
||
|
|
export default {
|
||
|
|
name: 'Texts',
|
||
|
|
components: {},
|
||
|
|
mixins: [paramsMixins, commonMixins, linkageMixins],
|
||
|
|
props: {
|
||
|
|
// 卡片的属性
|
||
|
|
config: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
domkey: 0,
|
||
|
|
customClass: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.chartInit()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 通过表达式计算得来的值
|
||
|
|
getDataByExpression(config) {
|
||
|
|
// 如果表达式是由其他组件的值构成的
|
||
|
|
// eslint-disable-next-line no-new-func
|
||
|
|
try {
|
||
|
|
const result = new Function('dataset', 'computedDatas', this.config.expression)
|
||
|
|
config.customize.title = result(this.dataset, this.computedDatas)
|
||
|
|
} catch (e) {
|
||
|
|
|
||
|
|
}
|
||
|
|
// 同时将计算得来的值保存到公共的数据存储的地方
|
||
|
|
this.updateComputedDatas({ code: config.code, title: config.title, data: config.customize.title })
|
||
|
|
// this.changeChartConfig(config)
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
// dataFormatting(config, data) {
|
||
|
|
// console.log('config, data: ', config, data);
|
||
|
|
// // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
|
||
|
|
// if (config.dataSource.businessKey && config.dataSource.source === 'dataset') {
|
||
|
|
// config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
|
||
|
|
// config.option.data = data && data.data && data.data.length ? data.data : []
|
||
|
|
// }
|
||
|
|
// this.domkey += 1;
|
||
|
|
// return config
|
||
|
|
// }
|
||
|
|
dataFormatting(config, data) {
|
||
|
|
// 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
|
||
|
|
if (config.dataSource.businessKey && config.dataSource.source === 'dataset') {
|
||
|
|
if (data && data.data && data.data.length) {
|
||
|
|
let resp = data.data[0][config.dataSource.metricField];
|
||
|
|
config.option.data = data.data;
|
||
|
|
if (config.dataHandler) {
|
||
|
|
try {
|
||
|
|
// 此处函数处理data
|
||
|
|
eval(config.dataHandler)
|
||
|
|
} catch (e) {
|
||
|
|
console.info(e)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
config.customize.title = (typeof resp === 'string') ? resp : JSON.stringify(resp);
|
||
|
|
} else {
|
||
|
|
config.customize.title = '暂无数据';
|
||
|
|
config.option.data = [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.domkey += 1;
|
||
|
|
return config;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "../../assets/fonts/numberFont/stylesheet.css";
|
||
|
|
|
||
|
|
.bs-design-wrap {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-box {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
/* 将背景设为渐变 */
|
||
|
|
/*background-image: -webkit-linear-gradient(left, #6294F7, #C85D14);*/
|
||
|
|
/* 规定背景绘制区域 */
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
/* 将文字隐藏 */
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
</style>
|