|
|
|
@ -78,7 +78,7 @@ |
|
|
|
</ul> |
|
|
|
|
|
|
|
<div class="warning-text"> |
|
|
|
<i v-if="item.isWarningActive" class="iconfont icon-baojingjilu" /> |
|
|
|
<i class="iconfont icon-baojingjilu" /> |
|
|
|
<div v-if="item.isWarningActive" :ref="el => setWarningRef(el, index)" class="warning-text-scroll"> |
|
|
|
<div class="scroll-wrap"> |
|
|
|
<div v-for="(warn, warnIdx) in item.warnList" :key="warnIdx" class="scroll-item"> |
|
|
|
@ -90,6 +90,8 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else style="font-size: 12px; color: #999; flex: 1;">暂无报警信息</div> |
|
|
|
<i class="el-icon-more" style="font-size: 12px; cursor: pointer;" @click.stop="handleMoreClick(item)" /> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
|
|
|
|
@ -117,11 +119,44 @@ |
|
|
|
<hkVideo ref="hkVideoRef" :hk-config="hkConfig" /> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- ==========新增：历史报警弹窗========== --> |
|
|
|
<el-dialog |
|
|
|
title="历史报警信息" |
|
|
|
append-to-body |
|
|
|
width="900px" |
|
|
|
:visible.sync="alarmDialogVisible" |
|
|
|
> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
class="archives-table" |
|
|
|
stripe |
|
|
|
style="width: 100%;" |
|
|
|
height="calc(100vh - 530px)" |
|
|
|
:data="alarmTableData" |
|
|
|
> |
|
|
|
<el-table-column prop="warehouseName" label="仓库名称" /> |
|
|
|
<el-table-column prop="warnValue" label="报警信息" /> |
|
|
|
<el-table-column prop="startTime" label="报警时间" width="160"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
{{ scope.row.startTime | parseTime }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<el-pagination |
|
|
|
style="margin-top:16px;text-align:right;" |
|
|
|
:current-page="alarmPageNum" |
|
|
|
:page-size="alarmPageSize" |
|
|
|
:total="alarmTotal" |
|
|
|
layout="total, prev, pager, next" |
|
|
|
@current-change="alarmPageChange" |
|
|
|
/> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import crudDevice, { FetchFondsWarehouseTree, FetchDeviceAllByWarehouseId } from '@/api/assetDevice/index' |
|
|
|
import crudDevice, { FetchFondsWarehouseTree, FetchDeviceAllByWarehouseId, FetchInitAlarmsLog } from '@/api/assetDevice/index' |
|
|
|
import CRUD, { presenter, header, crud } from '@crud/crud' |
|
|
|
import hkVideo from '@/views/components/hkVideo.vue' |
|
|
|
|
|
|
|
@ -169,7 +204,15 @@ export default { |
|
|
|
password: null, |
|
|
|
ip: null, |
|
|
|
port: null |
|
|
|
} |
|
|
|
}, |
|
|
|
// ==========历史报警弹窗新增data========== |
|
|
|
alarmDialogVisible: false, |
|
|
|
alarmLoading: false, |
|
|
|
alarmWarehouseNo: '', |
|
|
|
alarmTableData: [], |
|
|
|
alarmPageNum: 1, |
|
|
|
alarmPageSize: 10, |
|
|
|
alarmTotal: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -199,52 +242,6 @@ export default { |
|
|
|
this.buildWarehouseCardList(apiList) |
|
|
|
}, |
|
|
|
buildWarehouseCardList(apiResult) { |
|
|
|
// ========== 测试：打开下面注释，使用mock数据，注释掉原本 apiList ========== |
|
|
|
// const apiList = [ |
|
|
|
// { |
|
|
|
// warehouse: { |
|
|
|
// id: 1, |
|
|
|
// warehouseNo: 'S00101', |
|
|
|
// warehouseName: '中心仓库', |
|
|
|
// warehouseArea: '1200', |
|
|
|
// administrator: '张管理员', |
|
|
|
// contactPhone: '13800138000', |
|
|
|
// fondsNo: 'S001', |
|
|
|
// lastTime: '2026-08-07 10:20:30' |
|
|
|
// }, |
|
|
|
// todayInCount: 0, |
|
|
|
// monthlyInCount: 11, |
|
|
|
// monthlyInboundCount: 99, |
|
|
|
// monthlyOutboundCount: 0, |
|
|
|
// fluctuationCount: 0, |
|
|
|
// fluctuationImportantCount: 0, |
|
|
|
// warnList: [] |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// warehouse: { |
|
|
|
// id: 2, |
|
|
|
// warehouseNo: 'S00201', |
|
|
|
// warehouseName: '襄阳仓库', |
|
|
|
// warehouseArea: '800', |
|
|
|
// administrator: '李管理员', |
|
|
|
// contactPhone: '13900139000', |
|
|
|
// fondsNo: 'S002', |
|
|
|
// lastTime: '2026-08-07 09:10:20' |
|
|
|
// }, |
|
|
|
// todayInCount: 0, |
|
|
|
// monthlyInCount: 0, |
|
|
|
// monthlyInboundCount: 0, |
|
|
|
// monthlyOutboundCount: 0, |
|
|
|
// fluctuationCount: 0, |
|
|
|
// fluctuationImportantCount: 0, |
|
|
|
// warnList: [ |
|
|
|
// { warnValue: '标签异常，资产A001脱离监控标签异常' }, |
|
|
|
// { warnValue: '11111' } |
|
|
|
// ] |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// ========== 测试mock结束 ========== |
|
|
|
|
|
|
|
const apiList = this.crud.data || [] |
|
|
|
|
|
|
|
if (!Array.isArray(apiList) || apiList.length === 0) { |
|
|
|
@ -309,22 +306,19 @@ export default { |
|
|
|
let timer = null |
|
|
|
|
|
|
|
const scrollStep = () => { |
|
|
|
// 平滑滚动到下一条 |
|
|
|
wrapDom.style.transition = 'transform 0.6s ease-in-out' |
|
|
|
offset += itemHeight |
|
|
|
wrapDom.style.transform = `translateY(-${offset}px)` |
|
|
|
|
|
|
|
timer = setTimeout(() => { |
|
|
|
// 判断：已经滚动完原始列表高度，瞬间归位，无动画，视觉无缝 |
|
|
|
if (offset >= totalOriginHeight) { |
|
|
|
wrapDom.style.transition = 'none' |
|
|
|
offset = 0 |
|
|
|
wrapDom.style.transform = `translateY(0px)` |
|
|
|
// 强制重绘，再恢复动画 |
|
|
|
wrapDom.offsetHeight |
|
|
|
} |
|
|
|
scrollStep() |
|
|
|
}, 3000) // 每条停留3s |
|
|
|
}, 3000) |
|
|
|
} |
|
|
|
|
|
|
|
const stop = () => { |
|
|
|
@ -370,41 +364,12 @@ export default { |
|
|
|
handleClose() { |
|
|
|
this.hkVideoVisible = false |
|
|
|
}, |
|
|
|
|
|
|
|
// async openWarehouseCamera(cardItem) { |
|
|
|
// const warehouseNo = cardItem.warehouseNo |
|
|
|
// try { |
|
|
|
// // 接口返回全部仓库的设备（你这里没有传参） |
|
|
|
// const res = await FetchDeviceAllByWarehouseId() |
|
|
|
// const allDevices = res || [] |
|
|
|
|
|
|
|
// // 1.先过滤设备类型为网络高清球机 |
|
|
|
// // 2.再过滤：球机的warehouseNo === 当前点击卡片的warehouseNo |
|
|
|
// const ballDevices = allDevices.filter(d => { |
|
|
|
// return d.deviceTypeName === '网络高清球机' && d.warehouseNo === warehouseNo |
|
|
|
// }) |
|
|
|
|
|
|
|
// if (ballDevices.length === 0) { |
|
|
|
// this.$message.info('该仓库暂无网络高清球机设备') |
|
|
|
// return |
|
|
|
// } |
|
|
|
// console.log('当前仓库匹配的球机', ballDevices) |
|
|
|
// // 取该仓库下第一个球机的id |
|
|
|
// this.handleViewVideo(ballDevices[0].id) |
|
|
|
// } catch (err) { |
|
|
|
// console.error('获取仓库设备异常：', err) |
|
|
|
// this.$message.error('获取仓库设备失败') |
|
|
|
// } |
|
|
|
// }, |
|
|
|
|
|
|
|
async openWarehouseCamera(cardItem) { |
|
|
|
const warehouseId = cardItem.id |
|
|
|
try { |
|
|
|
// ✅ 传给接口 warehouseId，后端直接返回该仓库下所有设备 |
|
|
|
const res = await FetchDeviceAllByWarehouseId({ warehouseId }) |
|
|
|
const allDevices = res || [] |
|
|
|
|
|
|
|
// 此时 allDevices 已经仅是当前仓库的设备，只需要过滤设备类型 |
|
|
|
const ballDevices = allDevices.filter(d => d.deviceTypeName === '网络高清球机') |
|
|
|
|
|
|
|
if (ballDevices.length === 0) { |
|
|
|
@ -441,6 +406,37 @@ export default { |
|
|
|
console.error('打开视频失败：', err) |
|
|
|
this.$message.error('获取监控设备信息失败') |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 修改后 handleMoreClick |
|
|
|
handleMoreClick(item) { |
|
|
|
this.alarmWarehouseNo = item.warehouse.warehouseNo |
|
|
|
this.alarmPageNum = 1 |
|
|
|
this.alarmDialogVisible = true |
|
|
|
this.getAlarmList() |
|
|
|
}, |
|
|
|
// 获取报警列表 |
|
|
|
async getAlarmList() { |
|
|
|
this.alarmLoading = true |
|
|
|
try { |
|
|
|
const param = { |
|
|
|
warehouseNo: this.alarmWarehouseNo, |
|
|
|
pageNum: this.alarmPageNum, |
|
|
|
pageSize: this.alarmPageSize |
|
|
|
} |
|
|
|
const res = await FetchInitAlarmsLog(param) |
|
|
|
this.alarmTableData = res.records || [] |
|
|
|
this.alarmTotal = res.total || 0 |
|
|
|
} catch (e) { |
|
|
|
this.$message.error('查询历史报警失败') |
|
|
|
} finally { |
|
|
|
this.alarmLoading = false |
|
|
|
} |
|
|
|
}, |
|
|
|
// 分页切换 |
|
|
|
alarmPageChange(page) { |
|
|
|
this.alarmPageNum = page |
|
|
|
this.getAlarmList() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -533,7 +529,6 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.warning-text { |
|
|
|
color: #F65163; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 600; |
|
|
|
border-top: 1px solid #ebeef5; |
|
|
|
@ -546,6 +541,7 @@ export default { |
|
|
|
|
|
|
|
.iconfont { |
|
|
|
flex-shrink: 0; |
|
|
|
color: #F65163; |
|
|
|
} |
|
|
|
.warning-text-scroll { |
|
|
|
flex: 1; |
|
|
|
|
