127 lines
3.5 KiB
Vue
127 lines
3.5 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="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> |