<template>
|
<el-input
|
v-model="searchTextWarning"
|
:placeholder="t('warningInfo.searchPlaceholder')"
|
clearable
|
style="float: left; margin-left: 0"
|
@input="handleSearch"
|
>
|
<template #prefix>
|
<el-icon><Search /></el-icon>
|
</template>
|
</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('Tag.device') + t('Person.tagid')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ scope.row.objectid }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Tag.device') + t('Person.name')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ scope.row.baoliu2 }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Warning.handleStatus')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ scope.row.status }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('warningInfo.viewPosition')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span style="color: #eeeeee" @click="sendDataToParent(scope)">
|
<el-image style="width: 30px; height: 30px; margin-top: 0" :src="position" />
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('warningInfo.triggerTime')" align="center">
|
<!-- 使用 scoped slot 自定义列内容 -->
|
<template #default="scope">
|
<span>{{ scope.row.time }} </span>
|
</template>
|
</el-table-column>
|
<el-table-column :label="t('Config.operation')" align="center">
|
<template #default="scope">
|
<el-tag type="danger" hit style="font-size: 14px; font-weight: bold" @click="openHandleDialog(scope.row)">{{
|
t("Warning.handle")
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- Handle Alarm Dialog -->
|
<el-dialog v-model="dialogVisible" :title="t('Warning.handleAlarm')" width="500px">
|
<el-form :model="handleForm" :label-width="t('Warning.handleContentLabelWidth')">
|
<el-form-item :label="t('dayCount.alarmType')">
|
<el-input v-model="handleForm.type" disabled />
|
</el-form-item>
|
<el-form-item :label="t('warningInfo.nameId')">
|
<el-input v-model="handleForm.nameId" disabled />
|
</el-form-item>
|
<el-form-item :label="t('warningInfo.alarmTime')">
|
<el-input v-model="handleForm.time" disabled />
|
</el-form-item>
|
|
<el-form-item :label="t('warningInfo.handleMethod')">
|
<el-radio-group v-model="handleForm.handleMethod">
|
<el-radio :label="t('warningInfo.noNeedHandle')" />
|
<el-radio :label="t('warningInfo.contacted')" />
|
<el-radio :label="t('warningInfo.falseAlarm')" />
|
<el-radio :label="t('warningInfo.manualInput')" />
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item v-if="handleForm.handleMethod === t('warningInfo.manualInput')" :label="t('Warning.handleContent')">
|
<el-input
|
v-model="handleForm.handleContent"
|
type="textarea"
|
:rows="3"
|
:placeholder="t('Warning.handleContentPlaceholder')"
|
:rules="[
|
{
|
required: handleForm.handleMethod === t('warningInfo.manualInput'),
|
message: t('warningInfo.handleContentRequired'),
|
trigger: 'blur'
|
}
|
]"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">{{ t("Config.cancel") }}</el-button>
|
<el-button type="primary" @click="confirmHandle">{{ t("Warning.confirmHandle") }}</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
<script lang="ts">
|
import { defineComponent, onMounted, reactive, ref, toRefs, nextTick, onUnmounted, computed } from "vue";
|
import { FindWarningUntreated } from "@/api/modules/hxzk/warning/warning";
|
import trBackground from "../../images/map/trbackground.png";
|
import { ElMessage } from "element-plus";
|
import { UpHandle } from "@/api/modules/hxzk/warning/warning";
|
import position from "../../images/map/position.png";
|
import { useI18n } from "vue-i18n";
|
|
export default defineComponent({
|
emits: ["warningPostionClick"], // 声明自定义事件
|
|
setup(props, { emit }) {
|
const { t } = useI18n({ useScope: "global" });
|
|
// 表格的数据类型
|
interface tableType {
|
name: string;
|
money: number;
|
type: string;
|
baoliu2: string;
|
objectid: string;
|
time: string;
|
// other properties...
|
}
|
const data = reactive({
|
tableData: [] as Array<tableType>,
|
currentPage: 1,
|
pageSize: 6,
|
tableDom: {} as HTMLElement,
|
dialogVisible: false,
|
handleForm: {
|
type: "",
|
nameId: "",
|
time: "",
|
quickAction: "",
|
handleMethod: "", // 改为处理方式单选
|
handleContent: ""
|
},
|
tableDataWarning: [] as Array<tableType>,
|
currentWarning: {} as tableType
|
});
|
let timeInterval: NodeJS.Timer; // 定时器的对象
|
let tableScroll = ref(false); // 是否需要滚动
|
|
// 定时器 ID，用于在组件卸载时清除定时器
|
let intervalId: number | null = null;
|
|
onMounted(() => {
|
// 初始化表格的数据
|
list();
|
// 每秒执行一次 list 函数
|
intervalId = setInterval(list, 10000);
|
scrollTable();
|
});
|
const searchTextWarning = ref("");
|
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 list = () => {
|
const tableList = {
|
pageNum: 1,
|
pageSize: 1000
|
};
|
const params = {
|
tableList
|
};
|
FindWarningUntreated(params).then(dt => {
|
data.tableDataWarning = dt.data.list;
|
});
|
};
|
|
// 计算属性：过滤后的表格数据 --- 在线 - 离线人员
|
const filteredTableDataWarning = computed(() => {
|
if (!searchTextWarning.value) {
|
return data.tableDataWarning;
|
}
|
const searchText1 = searchTextWarning.value.toLowerCase();
|
return data.tableDataWarning.filter(item => {
|
return (
|
(item.type && item.type.toLowerCase().includes(searchText1)) ||
|
(item.objectid && item.objectid.toLowerCase().includes(searchText1)) ||
|
(item.status && item.status.toLowerCase().includes(searchText1)) ||
|
(item.baoliu3 && item.baoliu3.toLowerCase().includes(searchText1)) ||
|
(item.baoliu2 && item.baoliu2.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 sendDataToParent = person => {
|
console.log(person);
|
emit("warningPostionClick", person.row); // 触发自定义事件并传递数据
|
};
|
const rowStyle = ({}) => {
|
// 设置统一的背景图片，这里假设图片路径为 'path/to/your-background-image.jpg'
|
// 可以根据实际情况修改图片路径
|
return {
|
backgroundImage: `url('${trBackground}')`,
|
backgroundSize: "100% 150%", // 可根据需求调整背景图片的显示方式
|
backgroundRepeat: "no-repeat"
|
};
|
};
|
// 处理
|
const openHandleDialog = (warning: tableType) => {
|
data.currentWarning = warning;
|
data.handleForm = {
|
type: getTranslatedAlarmType(warning.type),
|
nameId: `${warning.baoliu2}-${warning.objectid}`,
|
time: warning.time,
|
quickAction: "",
|
handleContent: ""
|
};
|
data.dialogVisible = true;
|
};
|
|
// 获取翻译后的告警类型
|
const getTranslatedAlarmType = (type: string) => {
|
const typeMap: Record<string, string> = {
|
SOS: t("warningTypes.sos"),
|
进入告警: t("warningTypes.enter"),
|
出去告警: t("warningTypes.exit"),
|
聚集告警: t("warningTypes.gather")
|
};
|
return typeMap[type] || type;
|
};
|
|
const clearManualContent = () => {
|
data.handleForm.handleContent = "";
|
};
|
|
const clearQuickAction = () => {
|
data.handleForm.quickAction = "";
|
};
|
const confirmHandle = () => {
|
if (!data.handleForm.handleMethod) {
|
ElMessage.warning(t("warningInfo.selectHandleMethod"));
|
return;
|
}
|
|
if (data.handleForm.handleMethod === t("warningInfo.manualInput") && !data.handleForm.handleContent) {
|
ElMessage.warning(t("warningInfo.handleContentRequired"));
|
return;
|
}
|
|
const handleContent =
|
data.handleForm.handleMethod === t("warningInfo.manualInput")
|
? data.handleForm.handleContent
|
: `${t("warningInfo.handleMethod")}: ${data.handleForm.handleMethod}`;
|
|
const params = {
|
...data.currentWarning,
|
handleContent
|
};
|
|
UpHandle(params)
|
.then(() => {
|
ElMessage.success(t("Warning.handleSuccess"));
|
data.dialogVisible = false;
|
list(); // Refresh the table
|
})
|
.catch(error => {
|
ElMessage.error(`${t("warningInfo.handleFailed")}: ${error.message}`);
|
});
|
};
|
return {
|
...toRefs(data),
|
rowStyle,
|
sos,
|
jinru,
|
chuqu,
|
juji,
|
clearManualContent,
|
clearQuickAction,
|
openHandleDialog,
|
confirmHandle,
|
searchTextWarning,
|
handleSearch,
|
filteredTableDataWarning,
|
position,
|
sendDataToParent,
|
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>
|
