You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
419 lines
12 KiB
Vue
419 lines
12 KiB
Vue
<script lang="ts" setup>
|
|
import { onBeforeRouteLeave } from "vue-router";
|
|
import { BaseDelete, BaseTable } from "@/components/CustomTable";
|
|
import DiggerAlarmModal from "./components/DiggerAlarmModal.vue";
|
|
import DiggerHourlyDistanceChart from "@/components/Charts/diggerHourlyDistanceChart.vue";
|
|
import DiggerDailyDistanceChart from "@/components/Charts/diggerDailyDistanceChart.vue";
|
|
import VideoExport from "./components/VideoExport.vue";
|
|
|
|
import {
|
|
getAppearanceMonitorApi,
|
|
getAppearanceMonitorDetailApi,
|
|
getBeforeMonitorDetailApi,
|
|
deleteAppearanceMonitorApi,
|
|
getRecordAmountDataApi,
|
|
} from "@/api/dashboard";
|
|
import { isSuccessApi } from "@/utils/forApi";
|
|
import { useWebSocketStore } from "@/stores/websocketStore";
|
|
|
|
const isAlarmOpen = ref<Boolean>(false); //详情弹窗
|
|
const isDeleteOpen = ref<Boolean>(false); //删除弹窗
|
|
const websocketStore = useWebSocketStore();
|
|
|
|
const recordDistanceHourData = ref({}); // 分时距离报警
|
|
const recordDistanceDayData = ref({}); // 日距离告警
|
|
// 监听 messages 的变化
|
|
watch(
|
|
() => websocketStore.messages,
|
|
(newMessages: string[], oldMessages: string[]) => {
|
|
if (newMessages?.length > 0 && !isAlarmOpen.value) {
|
|
console.log(
|
|
newMessages[newMessages?.length - 1],
|
|
"newMessages[newMessages?.length - 1]"
|
|
);
|
|
currentRow.value = newMessages[newMessages?.length - 1];
|
|
currFileList.value = newMessages[newMessages?.length - 1]?.images;
|
|
isAlarmOpen.value = true;
|
|
}
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
|
|
|
const columns = [
|
|
{
|
|
label: "钩机编号",
|
|
type: "index",
|
|
index: (index: number) =>
|
|
`No.${
|
|
index +
|
|
1 +
|
|
(pagination.value.currentPage - 1) * pagination.value.pageSize
|
|
}`,
|
|
width: 90,
|
|
},
|
|
{
|
|
label: "车辆ID",
|
|
property: "train_number",
|
|
width: 185,
|
|
},
|
|
{
|
|
label: "车型",
|
|
property: "train_model",
|
|
width: 70,
|
|
},
|
|
{
|
|
label: "车厢号",
|
|
property: "train_carriage_number",
|
|
width: 125,
|
|
},
|
|
{
|
|
label: "告警",
|
|
property: "alarm_type",
|
|
width: 120,
|
|
},
|
|
// {
|
|
// label: "等级",
|
|
// property: "level",
|
|
// width: 60,
|
|
// },
|
|
// {
|
|
// label: "复核",
|
|
// property: "is_reviewed",
|
|
// formatter: ({ is_reviewed }) => {
|
|
// return is_reviewed === true ? "是" : "否";
|
|
// },
|
|
// width: 60,
|
|
// },
|
|
{
|
|
label: "时间",
|
|
property: "created_at",
|
|
},
|
|
{
|
|
type: "action",
|
|
label: "操作",
|
|
width: 170,
|
|
},
|
|
];
|
|
|
|
const listData = ref([]); // 列表数据
|
|
const currentRow = ref<Record<string, any>>({}); // 当前选中行
|
|
const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
|
|
// 搜索表单
|
|
const searchForm = reactive({
|
|
train_number: "",
|
|
train_carriage_number: "",
|
|
fault_type: "",
|
|
station: "",
|
|
type: "distance", // TODO 接口正常时约定替换 distance
|
|
});
|
|
// 文件详情
|
|
const getFileList = async () => {
|
|
try {
|
|
const res = await getAppearanceMonitorDetailApi({
|
|
id: currentRow.value?.id,
|
|
current: 1,
|
|
pageSize: 1000,
|
|
});
|
|
console.log(res.data, "getDetailList_data");
|
|
if (isSuccessApi(res)) {
|
|
currFileList.value = res.data.data;
|
|
}
|
|
} catch (error) {
|
|
console.log(error, "getDetailList_error");
|
|
}
|
|
};
|
|
function loadDetail() {
|
|
currentRow.value = listData.value[0];
|
|
console.log(currentRow.value, "currentRow");
|
|
getFileList();
|
|
}
|
|
|
|
// 获取列表
|
|
const getList = async () => {
|
|
try {
|
|
const { currentPage, pageSize } = pagination.value;
|
|
const res = await getAppearanceMonitorApi({
|
|
...searchForm,
|
|
current: currentPage,
|
|
pageSize,
|
|
});
|
|
console.log(res.data, "getList_data");
|
|
if (isSuccessApi(res)) {
|
|
listData.value = res.data.data;
|
|
loadDetail();
|
|
pagination.value = {
|
|
...pagination.value,
|
|
total: res.data.total,
|
|
};
|
|
}
|
|
} catch (error) {
|
|
console.error("获取数据失败:", error);
|
|
}
|
|
};
|
|
// 图表统计1
|
|
const fetchRecordHourData = async () => {
|
|
try {
|
|
const res = await getRecordAmountDataApi({
|
|
type: "distance",
|
|
dateType: "hour",
|
|
});
|
|
console.log(res.data, "fetchRecordHourData_data");
|
|
if (isSuccessApi(res)) {
|
|
recordDistanceHourData.value = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error("获取数据失败:", error);
|
|
}
|
|
};
|
|
// 图表统计2
|
|
const fetchRecordDayData = async () => {
|
|
try {
|
|
const res = await getRecordAmountDataApi({
|
|
type: "distance",
|
|
dateType: "day",
|
|
});
|
|
console.log(res.data, "fetchRecordDayData_data");
|
|
if (isSuccessApi(res)) {
|
|
recordDistanceDayData.value = res.data;
|
|
}
|
|
} catch (error) {
|
|
console.error("获取数据失败:", error);
|
|
}
|
|
};
|
|
|
|
// 查询方法
|
|
const handleQuery = () => {
|
|
getList();
|
|
};
|
|
|
|
// 重置方法
|
|
const handleReset = () => {
|
|
searchForm.train_number = "";
|
|
searchForm.station = "";
|
|
searchForm.train_carriage_number = "";
|
|
searchForm.fault_type = "";
|
|
getList();
|
|
};
|
|
|
|
function handleTableChange(record) {
|
|
console.log("handleTableChange_record", record);
|
|
pagination.value = {
|
|
...pagination.value,
|
|
currentPage: record.page,
|
|
pageSize: record.pageSize,
|
|
};
|
|
getList();
|
|
}
|
|
|
|
// 删除操作
|
|
const handleDeleteConfirm = async (row) => {
|
|
try {
|
|
const res = await deleteAppearanceMonitorApi({ id: row.id });
|
|
console.log(res, "deleteData");
|
|
if (res.code === 200) {
|
|
isDeleteOpen.value = false;
|
|
}
|
|
} catch (error) {
|
|
console.error("获取数据失败:", error);
|
|
}
|
|
};
|
|
|
|
// 定义行类名方法
|
|
const handleRowClassName = ({ row }) => {
|
|
return row.id === currentRow.value.id ? "selected-row" : "";
|
|
};
|
|
|
|
/**查看详情 */
|
|
function openCurrent(row) {
|
|
console.log(row, "openCurrent");
|
|
currentRow.value = row;
|
|
isAlarmOpen.value = true;
|
|
}
|
|
|
|
// 删除
|
|
function deleteCurrent(row) {
|
|
isDeleteOpen.value = true;
|
|
currentRow.value = row;
|
|
}
|
|
|
|
// 行点击事件处理
|
|
const handleRowClick = (row, event, rowIndex) => {
|
|
currentRow.value = row;
|
|
getFileList();
|
|
};
|
|
|
|
onBeforeRouteLeave(() => {
|
|
isAlarmOpen.value = false;
|
|
currentRow.value = {};
|
|
currFileList.value = [];
|
|
});
|
|
|
|
onMounted(() => {
|
|
getList();
|
|
fetchRecordHourData();
|
|
fetchRecordDayData();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="digger-monitor-warp">
|
|
<div class="digger-monitor-main-content">
|
|
<div class="module-header">
|
|
<div class="fg-title pl-[32px] pt-[23px]">
|
|
<span class="text-[18px]">钩机监测</span>
|
|
</div>
|
|
</div>
|
|
<div class="digger-monitor-body">
|
|
<div class="flex items-center justify-between">
|
|
<!-- 搜索区域 -->
|
|
<div class="digger-monitor-search-box">
|
|
<!-- <el-select
|
|
v-model="searchForm.station"
|
|
placeholder="钩机编号"
|
|
class="custom-select"
|
|
>
|
|
<el-option label="小觉站" value="小觉站"></el-option>
|
|
<el-option label="东西站" value="东西站"></el-option>
|
|
<el-option label="立杆区" value="立杆区"></el-option>
|
|
</el-select> -->
|
|
<el-input
|
|
v-model="searchForm.train_number"
|
|
placeholder="请输入列车辆ID"
|
|
class="custom-input"
|
|
clearable
|
|
/>
|
|
<el-input
|
|
v-model="searchForm.train_carriage_number"
|
|
placeholder="请输入车厢号"
|
|
class="custom-input"
|
|
clearable
|
|
/>
|
|
<!-- <el-select
|
|
v-model="searchForm.fault_type"
|
|
placeholder="故障类型"
|
|
class="custom-select"
|
|
>
|
|
<el-option label="下侧门板缺失" value="下侧门板缺失"></el-option>
|
|
<el-option label="门折页座脱落" value="门折页座脱落"></el-option>
|
|
<el-option label="小门塔扣丢失" value="小门塔扣丢失"></el-option>
|
|
<el-option label="小窗裂纹" value="小窗裂纹"></el-option>
|
|
<el-option label="搭扣未搭" value="搭扣未搭"></el-option>
|
|
<el-option label="小门外胀" value="小门外胀"></el-option>
|
|
</el-select> -->
|
|
<el-button
|
|
type="primary"
|
|
@click="handleQuery"
|
|
class="fg-basic-btn fg-info-button"
|
|
>
|
|
<span class="icon"></span> 查询
|
|
</el-button>
|
|
<el-button @click="handleReset" class="fg-basic-btn fg-reset-btn">
|
|
<span class="icon"></span> 重置
|
|
</el-button>
|
|
</div>
|
|
<div>
|
|
<VideoExport />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主体内容区域 -->
|
|
<div class="flex justify-between digger-monitor-banner">
|
|
<div class="left-panel">
|
|
<template v-if="currFileList?.length">
|
|
<div
|
|
class="flex items-center justify-center h-full monitor-left-top"
|
|
>
|
|
<!-- // TODO 暂时不渲染 -->
|
|
<img
|
|
class="w-full h-full"
|
|
:src="currFileList?.[0]?.image_url"
|
|
v-if="currFileList?.[0]?.image_url"
|
|
/>
|
|
<div v-else class="w-full h-full fg-empty-image"></div>
|
|
</div>
|
|
</template>
|
|
<div class="empty-bg" v-else></div>
|
|
</div>
|
|
|
|
<!-- 表格区域 -->
|
|
<!-- 搜索区域 -->
|
|
|
|
<!-- 右侧表格区域 -->
|
|
<div class="right-panel">
|
|
<div class="bg-transparent baseTable_wrap">
|
|
<template v-if="pagination.total > 0">
|
|
<BaseTable
|
|
class="bg-transparent baseTable_box"
|
|
:total="pagination.total"
|
|
:pageSize="pagination.pageSize"
|
|
:dataSource="listData"
|
|
:isFixedPagination="true"
|
|
:columns="columns"
|
|
:page="pagination.currentPage"
|
|
@change="handleTableChange"
|
|
:row-class-name="handleRowClassName"
|
|
@row-click="handleRowClick"
|
|
>
|
|
<template v-slot:actionBar="{ row }">
|
|
<ul class="flex table_action_box">
|
|
<li
|
|
class="flex items-center mr-[8px]"
|
|
@click="openCurrent(row)"
|
|
>
|
|
<div class="fg-button-primary">详情</div>
|
|
</li>
|
|
<li
|
|
class="flex items-center mr-[8px]"
|
|
@click="deleteCurrent(row)"
|
|
>
|
|
<div class="fg-button-primary-danger">删除</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</BaseTable>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul class="fg-footer-charts">
|
|
<li>
|
|
<div class="fg-footer-charts-title">分时距离报警</div>
|
|
<div class="fg-footer-charts-content">
|
|
<DiggerHourlyDistanceChart :datas="recordDistanceHourData" />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="fg-footer-charts-title">日距离告警</div>
|
|
<div class="fg-footer-charts-content">
|
|
<DiggerDailyDistanceChart :datas="recordDistanceDayData" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<DiggerAlarmModal
|
|
v-model:value="isAlarmOpen"
|
|
:info="currentRow"
|
|
:fileList="currFileList"
|
|
@close="isAlarmOpen = false"
|
|
/>
|
|
<BaseDelete
|
|
v-model:value="isDeleteOpen"
|
|
:deleteContent="`
|
|
<p>
|
|
确定删除“
|
|
<span>${currentRow?.alarm_type}</span>
|
|
”相关告警记录吗？删除后将找不到此记录，请谨慎操作.
|
|
</p>
|
|
`"
|
|
@delete-confirm="handleDeleteConfirm"
|
|
:info="currentRow"
|
|
@close="isDeleteOpen = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import url("./DiggerMonitor.scss");
|
|
</style>
|