111 lines
2.6 KiB
Vue
111 lines
2.6 KiB
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="dark" trigger="click"
|
||
|
|
virtual-triggering :virtual-ref="triggerRef" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { getCurrentInstance, onMounted, reactive, ref, defineProps } 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)
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @函数功能: 鼠标移入组件方法
|
||
|
|
* @param {*} value
|
||
|
|
* @出口参数:
|
||
|
|
* @函数备注:
|
||
|
|
*/
|
||
|
|
const dvMouseover = (value) => {
|
||
|
|
if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
|
||
|
|
triggerRef.value = value.toElement
|
||
|
|
tipcontent.value = value.toElement.innerHTML
|
||
|
|
visible.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* @函数功能: 鼠标移出组件方法
|
||
|
|
* @出口参数:
|
||
|
|
* @函数备注:
|
||
|
|
*/
|
||
|
|
const dvmouseleave = () => {
|
||
|
|
triggerRef.value = null
|
||
|
|
tipcontent.value = null
|
||
|
|
visible.value = false
|
||
|
|
};
|
||
|
|
|
||
|
|
const dvClick = (value) => {
|
||
|
|
console.log(value,prop.severdata, "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>
|