<template>
|
<el-table :data="tableData" :show-overflow-tooltip="true" class="alarmTable" :row-style="rowStyle">
|
<el-table-column prop="" :label="t('')" align="center" width="30" />
|
<el-table-column :label="t('')" width="40">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<!-- 显示图片 -->
|
<img :src="scope.row.icon" :alt="scope.row.icon" style="width: 20px; height: 20px; object-fit: cover" />
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('dayCount.alarmType')" width="190">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span @click="showDetailDialog(scope.row.title)"> {{ getTranslatedTitle(scope.row.title) }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column :label="t('dayCount.count')" width="110">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ scope.row.num }} </span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 在线人员 - 离线人员 -->
|
<el-dialog v-model="dialogVisible" width="45%" style="height: 620px; background-size: 100% 100%">
|
<template #header="">
|
<div class="my-header" style="font-weight: bold; color: white; text-align: center">
|
{{ dialogTitle }}
|
</div>
|
</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">
|
<template #default="scope">
|
{{ getSafeValue(scope.row.pname) }}
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.tagid')" align="center">
|
<template #default="scope">
|
<span style="height: 100px">{{ getSafeValue(scope.row.ptagid) }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.status')" align="center">
|
<template #default="scope">
|
<el-tag :type="scope.row.ponline === '1' ? '' : 'danger'">
|
{{ getSafeValue(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">
|
<template #default="scope">
|
<span>{{ getSafeValue(scope.row.ppower) }}% </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.department')" align="center">
|
<template #default="scope">
|
<span>{{ getSafeValue(scope.row.pdepartment) }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('dayCount.type')" align="center">
|
<template #default="scope">
|
<span>{{ getSafeValue(scope.row.baoliu19) }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.company')" align="center">
|
<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>
|
</el-dialog>
|
|
<!-- 告警详情对话框 -->
|
<el-dialog v-model="dialogVisibleWarning" width="45%" style="height: 620px; overflow-y: hidden; background-size: 100% 100%">
|
<template #header="">
|
<div class="my-header" style="margin-left: 10px; font-weight: bold; color: white; text-align: center">
|
{{ dialogTitle }}
|
</div>
|
</template>
|
<el-input
|
v-model="searchTextWarning"
|
:placeholder="t('dayCount.searchPlaceholder')"
|
clearable
|
style="float: left; margin-left: 0"
|
@input="handleSearchWarning"
|
></el-input>
|
<el-table
|
:data="filteredTableDataWarning"
|
:show-overflow-tooltip="true"
|
class="alarmTable"
|
:row-style="rowStyle"
|
style="height: 500px"
|
>
|
<el-table-column :label="t('dayCount.alarmType')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<template v-if="scope.row.type === 'SOS'">
|
<el-image style="width: 20px; height: 20px; margin-top: 0" :src="sos" />{{ t("warningTypes.sos") }}
|
</template>
|
<template v-else-if="scope.row.type === '进入告警'">
|
<el-image style="width: 20px; height: 20px; margin-top: 0" :src="jinru" />{{ t("warningTypes.enter") }}
|
</template>
|
<template v-else-if="scope.row.type === '出去告警'">
|
<el-image style="width: 20px; height: 20px; margin-top: 0" :src="chuqu" /> {{ t("warningTypes.exit") }}
|
</template>
|
<template v-else-if="scope.row.type === '聚集告警'">
|
<el-image style="width: 20px; height: 20px; margin-top: 0" :src="juji" />{{ t("warningTypes.gather") }}
|
</template>
|
<template v-else>
|
{{ scope.row.type }}
|
</template>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.name')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ scope.row.baoliu2 }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Person.tagid')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ scope.row.objectid }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Config.time')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ scope.row.time.split("-")[1] }}-{{ scope.row.time.split("-")[2] }} </span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent, onMounted, reactive, ref, toRefs, nextTick, onUnmounted, computed } from "vue";
|
import { FindDayCountInfo, FindWarningInfoType } from "@/api/modules/hxzk/statistics/warncount";
|
import trBackground from "../images/map/trbackground.png";
|
import infoBack from "@/views/hxzk/images/map/infoBack.png";
|
import { Search } from "@element-plus/icons-vue"; // 导入搜索图标
|
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>,
|
tableDataWarning: [] as Array<tableType>,
|
tableDataPerson: [] as Array<tableType>,
|
currentPage: 1,
|
pageSize: 6,
|
tableDom: {} as HTMLElement,
|
dialogVisible: false, // 控制对话框显示
|
dialogVisibleWarning: false, // 控制对话框显示
|
selectedTitle: "", // 选中的告警类型
|
dialogTitle: t("dayCount.alarmDetails") // 对话框标题
|
});
|
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 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 searchTextPerson = ref("");
|
const searchTextWarning = ref("");
|
|
// 获取翻译后的标题
|
const getTranslatedTitle = (title: string) => {
|
const titleMap: Record<string, string> = {
|
在线人员: t("dayCount.onlinePersonnel"),
|
离线人员: t("dayCount.offlinePersonnel"),
|
SOS报警: t("warningTypes.sos"),
|
进入报警: t("warningTypes.enter"),
|
越界报警: t("warningTypes.exit"),
|
聚集报警: t("warningTypes.gather")
|
};
|
return titleMap[title] || title;
|
};
|
|
// 初始化表格的数据
|
const list = () => {
|
const tableList = {
|
pageNum: 1,
|
pageSize: 1000
|
};
|
const params = {
|
tableList
|
};
|
FindDayCountInfo(params).then(dt => {
|
for (let i = 0; i < dt.length; i++) {
|
dt[i].icon = `${baseUrl}/uploads/warn/Tongji/` + dt[i].icon;
|
}
|
data.tableData = dt;
|
});
|
};
|
// 计算属性：过滤后的表格数据 --- 在线 - 离线人员
|
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 filteredTableDataWarning = computed(() => {
|
if (!searchTextWarning.value) {
|
return data.tableDataWarning;
|
}
|
const searchText1 = searchTextWarning.value.toLowerCase();
|
return data.tableDataWarning.filter(item => {
|
return (
|
(item.baoliu4 && item.baoliu4.toLowerCase().includes(searchText1)) ||
|
(item.objectid && item.objectid.toLowerCase().includes(searchText1)) ||
|
(item.baoliu3 && item.baoliu3.toLowerCase().includes(searchText1))
|
);
|
});
|
});
|
// 搜索处理函数
|
const handleSearch = () => {
|
// 计算属性会自动更新，无需额外操作
|
};
|
// 搜索处理函数
|
const handleSearchWarning = () => {
|
// 计算属性会自动更新，无需额外操作
|
};
|
// 显示详情对话框
|
const showDetailDialog = (title: string) => {
|
data.selectedTitle = title;
|
if (title == "在线人员" || title == "离线人员") {
|
data.dialogTitle = getTranslatedTitle(title);
|
data.dialogVisible = true;
|
const tableList = {
|
pageNum: 1,
|
pageSize: 1000
|
};
|
const params = {
|
tableList,
|
warning: {
|
type: title
|
}
|
};
|
FindWarningInfoType(params).then(dt => {
|
console.log(dt);
|
data.tableDataPerson = dt.data.list;
|
});
|
} else {
|
data.dialogTitle = getTranslatedTitle(title);
|
data.dialogVisibleWarning = true;
|
const tableList = {
|
pageNum: 1,
|
pageSize: 1000
|
};
|
const params = {
|
tableList,
|
warning: {
|
type: title
|
}
|
};
|
FindWarningInfoType(params).then(dt => {
|
console.log(dt);
|
data.tableDataWarning = dt.data.list;
|
});
|
}
|
};
|
|
// 表格的数据滚动
|
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",
|
height: "50px"
|
};
|
};
|
|
return {
|
...toRefs(data),
|
rowStyle,
|
showDetailDialog,
|
infoBack,
|
filteredTableDataPerson,
|
handleSearch,
|
handleSearchWarning,
|
filteredTableDataWarning,
|
Search,
|
searchTextWarning,
|
searchTextPerson,
|
sos,
|
jinru,
|
chuqu,
|
juji,
|
getSafeValue,
|
t,
|
getTranslatedTitle
|
};
|
}
|
});
|
</script>
|
<style lang="scss" scoped>
|
el-table {
|
border: 1px solid rgb(33 0 99) !important;
|
}
|
.alarmTable {
|
height: 100%;
|
padding: 0 0 22px;
|
margin-top: 0;
|
overflow: hidden;
|
font-size: 14px;
|
font-weight: bolder;
|
text-shadow:
|
-1px -1px 0 #000000,
|
1px -1px 0 #000000,
|
-1px 1px 0 #000000,
|
1px 1px 0 #000000;
|
scroll-behavior: smooth;
|
}
|
:deep(.el-input__wrapper) {
|
background-color: transparent !important;
|
border: 1px solid#14637F;
|
box-shadow: none !important;
|
}
|
</style>
|
