90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
|
<!--
|
||
|
|
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
|
||
|
|
* @Author: 王路平
|
||
|
|
* @文件版本: V1.0.0
|
||
|
|
* @Date: 2023-06-13 08:33:37
|
||
|
|
* @Description:
|
||
|
|
*
|
||
|
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="box-body">
|
||
|
|
<ZdScrollBoard ref="devList" :config="prop.config" @mouseover="dvMouseover"
|
||
|
|
@mouseend="dvmouseleave" :style="{
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
}" />
|
||
|
|
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
|
||
|
|
popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||
|
|
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||
|
|
import { useRouter } from "vue-router"
|
||
|
|
import { useI18n } from 'vue-i18n'
|
||
|
|
let { t } = useI18n();
|
||
|
|
const prop = defineProps({
|
||
|
|
config: Object,
|
||
|
|
})
|
||
|
|
const router = useRouter()
|
||
|
|
//弹窗文本
|
||
|
|
let tipcontent = ref(null)
|
||
|
|
//弹窗显示与隐藏
|
||
|
|
let visible = ref(false)
|
||
|
|
//存储弹窗dom
|
||
|
|
let triggerRef = ref(null)
|
||
|
|
/**
|
||
|
|
* @函数功能: 鼠标移入组件方法
|
||
|
|
* @param {*} value
|
||
|
|
* @出口参数:
|
||
|
|
* @函数备注:
|
||
|
|
*/
|
||
|
|
const dvMouseover = (value) => {
|
||
|
|
if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
|
||
|
|
triggerRef.value = value.toElement
|
||
|
|
tipcontent.value = value.toElement.innerText
|
||
|
|
visible.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* @函数功能: 鼠标移出组件方法
|
||
|
|
* @出口参数:
|
||
|
|
* @函数备注:
|
||
|
|
*/
|
||
|
|
const dvmouseleave = () => {
|
||
|
|
triggerRef.value = null
|
||
|
|
tipcontent.value = null
|
||
|
|
visible.value = false
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
.box-body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.dv-scroll-board .rows .ceil) {
|
||
|
|
overflow: auto;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
text-overflow: none
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.dv-scroll-board .rows .row-item) {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
.el-popper.tooltip-class {
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
</style>
|