screenFront/src/views/legionProducts/chart/scrollBoard.vue

<template>
    <div class="box">
        <div class="box-title">{{ t('messages.LegionDevList') }}</div>
        <div class="box-body">
            <dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave"
                @click="dvClick" :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>
    </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance, onMounted, reactive, ref, defineProps, watch } from "vue";
import { devListType } from "@/type/InPlantProducts";
import { useRouter } from "vue-router"
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const prop = defineProps({
    config: Object,
    severdata: Array
})
const router = useRouter()
//弹窗文本
let tipcontent = ref(null)
//弹窗显示与隐藏
let visible = ref(false)
//存储弹窗dom
let triggerRef = ref(null)
let devList = ref()
/**
 * @函数功能: 鼠标移入组件方法
 * @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
    }

};

watch(() => prop.config, (newVal, oldVal) => {
    devList.value.updateRows(newVal.data, {
        header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
        headerBGC: 'rgb(52, 105, 243)',
        oddRowBGC: '#100c2a',
        evenRowBGC: '#100c2a',
        rowNum: 10,
        columnWidth: [80, 170, 120, 120, 120, 120, 120, 120, 120, 100, 130],
        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
    });
}, { deep: true, flush: 'post' })

/**
 * @函数功能:  鼠标移出组件方法
 * @出口参数: 
 * @函数备注: 
 */
const dvmouseleave = () => {
    triggerRef.value = null
    tipcontent.value = null
    visible.value = false
};

const dvClick = (value) => {

    if (value.row) {
        prop.severdata.forEach((res: any) => {
            if (res.index == value.row[0]) {
                router.push({
                    name: "devItem",
                    params: {
                        id: res.id,
                        label: res.label,
                        name: res.name,
                    },
                });
            }
        });
    }
};
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.box-title {
    width: 100%;
    padding: 10px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

.box-body {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

:deep(.dv-scroll-board .rows .ceil) {
    overflow: auto;
    white-space: pre-wrap;
    text-overflow: none
}
</style>
<style>
.el-popper.tooltip-class {
    color: #fff !important;
}
</style>