<template>
|
<el-input
|
v-model="searchTextPerson"
|
:placeholder="t('dayCount.searchPlaceholder')"
|
clearable
|
style="float: left; margin-left: 0"
|
@input="handleSearch"
|
>
|
<template #prefix>
|
<el-icon><Search /></el-icon>
|
</template>
|
</el-input>
|
<el-table
|
:data="filteredTableDataPerson"
|
:show-overflow-tooltip="true"
|
class="alarmTable"
|
:row-style="rowStyle"
|
style="height: 500px"
|
>
|
<el-table-column :label="t('Person.name')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
{{ getSafeValue(scope.row.pname) }}
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.tagid')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ getSafeValue(scope.row.ptagid) }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('PersonInfoCard.status')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<el-tag :type="scope.row.ponline === '1' ? '' : 'danger'">
|
{{ scope.row.ponline === "1" ? t("status.online") : t("status.offline") }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.power')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ getSafeValue(scope.row.ppower) }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.department')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ getSafeValue(scope.row.pdepartment) }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('dayCount.type')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ getSafeValue(scope.row.baoliu19) }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.company')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<el-tag hit style="font-size: 14px; font-weight: bold">{{ getSafeValue(scope.row.company) }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
<script lang="ts">
|
import { defineComponent, onMounted, reactive, ref, toRefs, nextTick, onUnmounted, computed } from "vue";
|
import { getPersonList } from "@/api/modules/hxzk/person/person";
|
import trBackground from "../../images/map/trbackground.png";
|
import { getSafeValue } from "@/views/hxzk/utils/common";
|
import { useI18n } from "vue-i18n";
|
|
export default defineComponent({
|
setup() {
|
const { t } = useI18n({ useScope: "global" });
|
|
// 表格的数据类型
|
interface tableType {
|
name: string;
|
money: number;
|
}
|
const data = reactive({
|
tableData: [] as Array<tableType>, // 表格的数据
|
currentPage: 1, // 当前展示的页码
|
pageSize: 6, // 当前表格一页展示多少条数据
|
tableDom: {} as HTMLElement, // 表格内容的dom
|
tableDataPerson: [] as Array<tableType>
|
});
|
let timeInterval: NodeJS.Timer; // 定时器的对象
|
let tableScroll = ref(false); // 是否需要滚动
|
|
// 定时器 ID，用于在组件卸载时清除定时器
|
let intervalId: number | null = null;
|
|
onMounted(() => {
|
// 初始化表格的数据
|
list();
|
// 每秒执行一次 list 函数
|
intervalId = setInterval(list, 10000);
|
scrollTable();
|
});
|
|
onUnmounted(() => {
|
clearInterval(timeInterval);
|
// 组件卸载时清除定时器，避免内存泄漏
|
if (intervalId) {
|
clearInterval(intervalId);
|
}
|
});
|
const searchTextPerson = ref("");
|
const baseUrl = import.meta.env.VITE_IP;
|
const sos = ref(`${baseUrl}/uploads/warn/Tongji/sosimage.png`);
|
const jinru = ref(`${baseUrl}/uploads/warn/Tongji/jinruimage.png`);
|
const chuqu = ref(`${baseUrl}/uploads/warn/Tongji/yujie.png`);
|
const juji = ref(`${baseUrl}/uploads/warn/Tongji/jujiimage.png`);
|
// 初始化表格的数据
|
const list = () => {
|
const params = {
|
pageNum: 1,
|
pageSize: 1000
|
};
|
getPersonList(params).then(dt => {
|
data.tableDataPerson = dt.data.list;
|
});
|
};
|
|
// 计算属性：过滤后的表格数据 --- 在线 - 离线人员
|
const filteredTableDataPerson = computed(() => {
|
if (!searchTextPerson.value) {
|
return data.tableDataPerson;
|
}
|
const searchText1 = searchTextPerson.value.toLowerCase();
|
return data.tableDataPerson.filter(item => {
|
return (
|
(item.pname && item.pname.toLowerCase().includes(searchText1)) ||
|
(item.ptagid && item.ptagid.toLowerCase().includes(searchText1)) ||
|
(item.pdepartment && item.pdepartment.toLowerCase().includes(searchText1)) ||
|
(item.company && item.company.toLowerCase().includes(searchText1)) ||
|
(item.baoliu19 && item.baoliu19.toLowerCase().includes(searchText1))
|
);
|
});
|
});
|
|
// 搜索处理函数
|
const handleSearch = () => {
|
// 计算属性会自动更新，无需额外操作
|
};
|
// 表格的数据滚动
|
const scrollTable = () => {
|
nextTick(() => {
|
// 获取当前表格内容的dom
|
let table = document.getElementsByClassName("alarmTable")[0];
|
data.tableDom = table.getElementsByClassName("el-scrollbar__wrap")[0]! as HTMLElement;
|
// 鼠标放在表格内容，暂停滚动
|
data.tableDom.addEventListener("mouseover", () => {
|
tableScroll.value = false;
|
});
|
// 鼠标移出表格内容，继续滚动
|
// data.tableDom.addEventListener("mouseout", () => {
|
// tableScroll.value = true;
|
// });
|
//
|
timeInterval = setInterval(() => {
|
if (tableScroll.value) {
|
// 每次内容滚动的距离
|
data.tableDom.scrollTop += 1;
|
if (data.tableDom.clientHeight + data.tableDom.scrollTop == data.tableDom.scrollHeight) {
|
data.tableDom.scrollTop = 0;
|
}
|
}
|
}, 10);
|
});
|
};
|
const rowStyle = ({}) => {
|
// 设置统一的背景图片，这里假设图片路径为 'path/to/your-background-image.jpg'
|
// 可以根据实际情况修改图片路径
|
return {
|
backgroundImage: `url('${trBackground}')`,
|
backgroundSize: "100% 150%", // 可根据需求调整背景图片的显示方式
|
backgroundRepeat: "no-repeat"
|
};
|
};
|
|
return {
|
...toRefs(data),
|
rowStyle,
|
sos,
|
jinru,
|
chuqu,
|
juji,
|
handleSearch,
|
searchTextPerson,
|
filteredTableDataPerson,
|
getSafeValue,
|
t
|
};
|
}
|
});
|
</script>
|
<style lang="scss" scoped>
|
.alarmTable {
|
height: 100%;
|
padding: 10px 0;
|
margin-top: 10px;
|
overflow: hidden;
|
font-size: 16px;
|
}
|
:deep(.el-input__wrapper) {
|
background-color: transparent !important;
|
border: 1px solid#14637F;
|
box-shadow: none !important;
|
}
|
</style>
|
