You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<template>
|
|
<div
|
|
class="configuration-wrap"
|
|
:class="{
|
|
'active': activeCodes.includes(config.code) && (!isPreview),
|
|
'hover': hoverCode === config.code && (!isPreview)
|
|
}"
|
|
@mouseenter.stop="changeHover(config.code)"
|
|
@mouseleave="changeHover('')"
|
|
@click.stop="changeActive(config)"
|
|
@contextmenu="onContextmenu($event, config)"
|
|
>
|
|
<!-- <span class="point-text" v-show="hoverCode === config.code"> {{ getPoint(config) }}</span>-->
|
|
<span
|
|
v-show="!isPreview && config.locked"
|
|
class="locked-status el-icon-lock"
|
|
/>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState, mapMutations } from 'vuex'
|
|
|
|
import chartContextMenu from 'data-room-ui/js/mixins/chartContextMenu'
|
|
export default {
|
|
name: 'Configuration',
|
|
mixins: [chartContextMenu],
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
activeCode: state => state.bigScreen.activeCode,
|
|
activeCodes: state => state.bigScreen.activeCodes,
|
|
hoverCode: state => state.bigScreen.hoverCode,
|
|
activeItemConfig: state => state.bigScreen.activeItemConfig,
|
|
chartList: state => state.bigScreen.pageInfo.chartList,
|
|
presetLine: state => state.bigScreen.presetLine
|
|
}),
|
|
isPreview () {
|
|
return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
|
|
}
|
|
},
|
|
mounted () {},
|
|
methods: {
|
|
...mapMutations('bigScreen', [
|
|
'changeHoverCode',
|
|
'changeActiveCode',
|
|
'changeChartConfig',
|
|
'addItem',
|
|
'delItem',
|
|
'resetPresetLine',
|
|
'changeLayout',
|
|
'changeZIndex',
|
|
'changeLocked'
|
|
]),
|
|
// 改变hover的组件
|
|
changeHover (code) {
|
|
this.changeHoverCode(code)
|
|
},
|
|
// 改变激活的组件
|
|
changeActive (config) {
|
|
this.changeActiveCode(config.code)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.configuration-wrap {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 1px solid transparent;
|
|
//cursor: move;
|
|
|
|
.opt-icon-wrap {
|
|
z-index: 100;
|
|
display: flex;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
&:hover{
|
|
cursor: pointer;
|
|
}
|
|
.obt-item{
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
|
|
.point-text {
|
|
position: absolute;
|
|
top: -36px;
|
|
left: -110px;
|
|
background: #f2f2f2;
|
|
border-radius: 6px;
|
|
display: inline-block;
|
|
width: 100px;
|
|
text-align: center;
|
|
padding: 2px;
|
|
color: #8a7878;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.locked-status {
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 4px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.hover {
|
|
border: 1px dashed var(--bs-el-color-primary);
|
|
}
|
|
.active {
|
|
border: -1px solid #c8ff00;
|
|
}
|
|
</style>
|