|
|
|
|
@ -3,82 +3,178 @@
|
|
|
|
|
<div class="scroll-area">
|
|
|
|
|
<!-- 设置margin，使内容 有从无到有的出现效果 -->
|
|
|
|
|
<div class="marquee-container">
|
|
|
|
|
{{ content }}
|
|
|
|
|
<svg class="svg-container">
|
|
|
|
|
<defs>
|
|
|
|
|
<linearGradient
|
|
|
|
|
:id="'backgroundGradient-'+config.code"
|
|
|
|
|
:x1="0"
|
|
|
|
|
:y1="['to top right'].includes(config.customize.bgGradientDirection) ? '100%' : '0'"
|
|
|
|
|
:x2="['to right','to bottom right','to top right'].includes(config.customize.bgGradientDirection) ? '100%' : '0'"
|
|
|
|
|
:y2="['to bottom','to bottom right'].includes(config.customize.bgGradientDirection) ? '100%' : '0'"
|
|
|
|
|
>
|
|
|
|
|
<stop
|
|
|
|
|
offset="0%"
|
|
|
|
|
:stop-color="config.customize.backgroundColorType === 'pure' ? config.customize.backgroundColor : config.customize.bgGradientColor0"
|
|
|
|
|
/>
|
|
|
|
|
<stop
|
|
|
|
|
offset="100%"
|
|
|
|
|
:stop-color="config.customize.backgroundColorType === 'pure' ? config.customize.backgroundColor : config.customize.bgGradientColor1"
|
|
|
|
|
/>
|
|
|
|
|
</linearGradient>
|
|
|
|
|
<linearGradient
|
|
|
|
|
:id="'textGradient-'+config.code"
|
|
|
|
|
:x1="0"
|
|
|
|
|
:y1="['to top right'].includes(config.customize.textGradientDirection) ? '100%' : '0'"
|
|
|
|
|
:x2="['to right','to bottom right','to top right'].includes(config.customize.textGradientDirection) ? '100%' : '0'"
|
|
|
|
|
:y2="['to bottom','to bottom right'].includes(config.customize.textGradientDirection) ? '100%' : '0'"
|
|
|
|
|
>
|
|
|
|
|
<stop
|
|
|
|
|
offset="0%"
|
|
|
|
|
:stop-color="config.customize.textColorType === 'pure' ? config.customize.textColor : config.customize.textGradientColor0"
|
|
|
|
|
/>
|
|
|
|
|
<stop
|
|
|
|
|
offset="100%"
|
|
|
|
|
:stop-color="config.customize.textColorType === 'pure' ? config.customize.textColor : config.customize.textGradientColor1"
|
|
|
|
|
/>
|
|
|
|
|
</linearGradient>
|
|
|
|
|
</defs>
|
|
|
|
|
<rect
|
|
|
|
|
v-if="config.customize.backgroundColorType !== 'transparent'"
|
|
|
|
|
width="100%"
|
|
|
|
|
height="100%"
|
|
|
|
|
:fill="`url(#backgroundGradient-${config.code})`"
|
|
|
|
|
/>
|
|
|
|
|
<text
|
|
|
|
|
:x="10"
|
|
|
|
|
:y="config.customize.fontSize"
|
|
|
|
|
:style="{ fontSize: config.customize.fontSize + 'px', fontWeight: config.customize.fontWeight }"
|
|
|
|
|
:fill="`url(#textGradient-${config.code})`"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<animate
|
|
|
|
|
v-if="isAnimate"
|
|
|
|
|
:attributeName="attributeName[config.customize.direction]"
|
|
|
|
|
:from="from[config.customize.direction]"
|
|
|
|
|
:to="to[config.customize.direction]"
|
|
|
|
|
:dur="config.customize.dur + 's'"
|
|
|
|
|
repeatCount="indefinite"
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
v-if="config.customize.icon.position === 'left'"
|
|
|
|
|
:class="config.customize.icon.name"
|
|
|
|
|
:style="{ color: config.customize.icon.color, fontSize: config.customize.fontSize + 'px' }"
|
|
|
|
|
/>
|
|
|
|
|
{{ config.customize.title }}
|
|
|
|
|
<i
|
|
|
|
|
v-if="config.customize.icon.position === 'right'"
|
|
|
|
|
:class="config.customize.icon.name"
|
|
|
|
|
:style="{ color: config.customize.icon.color, fontSize: config.customize.fontSize + 'px' }"
|
|
|
|
|
/>
|
|
|
|
|
</text>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import { EventBus } from 'data-room-ui/js/utils/eventBus'
|
|
|
|
|
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
|
|
|
|
|
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
|
|
|
|
|
export default {
|
|
|
|
|
props: { },
|
|
|
|
|
props: {
|
|
|
|
|
// 卡片的属性
|
|
|
|
|
config: {
|
|
|
|
|
type: Object,
|
|
|
|
|
default: () => ({})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
content: '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十'
|
|
|
|
|
customClass: {},
|
|
|
|
|
attributeName: {
|
|
|
|
|
right: 'x',
|
|
|
|
|
left: 'x',
|
|
|
|
|
top: 'y',
|
|
|
|
|
bottom: 'y'
|
|
|
|
|
},
|
|
|
|
|
// 动画开始
|
|
|
|
|
from: {
|
|
|
|
|
left: '-100%',
|
|
|
|
|
right: '100%',
|
|
|
|
|
top: '-100%',
|
|
|
|
|
bottom: '100%'
|
|
|
|
|
},
|
|
|
|
|
// 动画结束
|
|
|
|
|
to: {
|
|
|
|
|
left: '100%',
|
|
|
|
|
right: '-100%',
|
|
|
|
|
top: '100%',
|
|
|
|
|
bottom: '-100%'
|
|
|
|
|
},
|
|
|
|
|
isAnimate: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mixins: [paramsMixins, commonMixins],
|
|
|
|
|
mounted () {
|
|
|
|
|
this.scrollRightToLeft()
|
|
|
|
|
this.chartInit()
|
|
|
|
|
// 如果点击了生成图片，则先关闭动画
|
|
|
|
|
EventBus.$on('stopMarquee', () => {
|
|
|
|
|
this.isAnimate = false
|
|
|
|
|
})
|
|
|
|
|
// 图片生成完成后，再开启动画
|
|
|
|
|
EventBus.$on('startMarquee', () => {
|
|
|
|
|
this.isAnimate = true
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy () {
|
|
|
|
|
EventBus.$off('stopMarquee')
|
|
|
|
|
EventBus.$off('startMarquee')
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 从右到左滚动
|
|
|
|
|
scrollRightToLeft () {
|
|
|
|
|
// 在mounted阶段，才可以获取真实DOM节点
|
|
|
|
|
const showArea = document.querySelector('.marquee-box')
|
|
|
|
|
// 从左到右滚动，首先把滚动条置到元素的最右边
|
|
|
|
|
showArea.scrollLeft = 0
|
|
|
|
|
function f () {
|
|
|
|
|
// 如果滚动条到了元素的最左边，那么把它再初始化到最右边
|
|
|
|
|
if (showArea.scrollLeft > showArea.scrollWidth) {
|
|
|
|
|
showArea.scrollLeft = showArea.scrollWidth
|
|
|
|
|
} else {
|
|
|
|
|
// 每次滚动条向左移动2，改变speed可以调整滚动速度
|
|
|
|
|
const speed = 1
|
|
|
|
|
showArea.scrollLeft += speed
|
|
|
|
|
}
|
|
|
|
|
// 使用requestAnimationFrame，优化滚动效果
|
|
|
|
|
// requestAnimationFrame使得滚动和机器帧率同步
|
|
|
|
|
requestAnimationFrame(f)
|
|
|
|
|
}
|
|
|
|
|
requestAnimationFrame(f)
|
|
|
|
|
changeStyle () {
|
|
|
|
|
},
|
|
|
|
|
// 从左到右滚动
|
|
|
|
|
scrollLeftToRight () {
|
|
|
|
|
// 在mounted阶段，才可以获取真实DOM节点
|
|
|
|
|
const showArea = document.querySelector('.marquee-box')
|
|
|
|
|
showArea.scrollLeft = showArea.scrollWidth
|
|
|
|
|
function f () {
|
|
|
|
|
// 如果滚动条到了元素的最左边，那么把它再初始化到最右边
|
|
|
|
|
if (showArea.scrollLeft < 3) {
|
|
|
|
|
showArea.scrollLeft = showArea.scrollWidth
|
|
|
|
|
} else {
|
|
|
|
|
// 每次滚动条向左移动2，改变speed可以调整滚动速度
|
|
|
|
|
const speed = 1
|
|
|
|
|
showArea.scrollLeft -= speed
|
|
|
|
|
}
|
|
|
|
|
requestAnimationFrame(f)
|
|
|
|
|
dataFormatting (config, data) {
|
|
|
|
|
// 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
|
|
|
|
|
if (config.dataSource.businessKey) {
|
|
|
|
|
config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
|
|
|
|
|
}
|
|
|
|
|
// 使用requestAnimationFrame，优化滚动效果
|
|
|
|
|
// requestAnimationFrame使得滚动和机器帧率同步
|
|
|
|
|
requestAnimationFrame(f)
|
|
|
|
|
return config
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.marquee-box {
|
|
|
|
|
// height: 50px;
|
|
|
|
|
.marquee-box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.scroll-area {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.scroll-area {
|
|
|
|
|
font-size: 100px;
|
|
|
|
|
|
|
|
|
|
.marquee-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
.marquee-container {
|
|
|
|
|
|
|
|
|
|
.svg-container {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-icon-edit{
|
|
|
|
|
&:before{
|
|
|
|
|
content: '11111';
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
wu.jian2
2 years ago