Skip to content

J
JINRUN-DP
Commit d789875a authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

大屏接口对接-alarm scroll auto

parent c05a80dc
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 69 deletions
src/components/MineMonitor/RightTodayAlarm.vue
View file @ d789875a
......@@ -7,7 +7,7 @@
:key="index"
class="tab-item"
:class="{ active: activeTab === index }"
@click="activeTab = index"
@click="handleTabChange(index)"
>
{{ tab.name }}({{ tab.count }})
</div>
......@@ -22,15 +22,20 @@
<span>定位卡号</span>
<span>报警时间</span>
</dt>
<template v-for="(item, index) in sosData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.realName }}</span>
<span>{{ item.cardId }}</span>
<span class="time-cell">
<div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
<div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
</span>
</dd>
<template v-if="sosData.length > 0">
<template v-for="(item, index) in sosData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.realName }}</span>
<span>{{ item.cardId }}</span>
<span class="time-cell">
<div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
<div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
</span>
</dd>
</template>
</template>
<template v-else>
<dd class="no-data">暂无数据</dd>
</template>
</dl>
</div>
......@@ -46,16 +51,21 @@
<span>报警类型</span>
<span>报警时间</span>
</dt>
<template v-for="(item, index) in vehicleData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.driver }}</span>
<span>{{ item.licensePlate }}</span>
<span>{{ item.alarmType }}</span>
<span class="time-cell">
<div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
<div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
</span>
</dd>
<template v-if="vehicleData.length > 0">
<template v-for="(item, index) in vehicleData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.driver }}</span>
<span>{{ item.licensePlate }}</span>
<span>{{ item.alarmType }}</span>
<span class="time-cell">
<div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
<div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
</span>
</dd>
</template>
</template>
<template v-else>
<dd class="no-data">暂无数据</dd>
</template>
</dl>
</div>
......@@ -70,15 +80,20 @@
<span>定位卡号/车牌号</span>
<span>越界时间</span>
</dt>
<template v-for="(item, index) in boundaryData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.driver }}</span>
<span>{{ item.licensePlate }}</span>
<span class="time-cell">
<div class="date-part">{{ item.boundaryTime.split(' ')[0] }}</div>
<div class="time-part">{{ item.boundaryTime.split(' ')[1] }}</div>
</span>
</dd>
<template v-if="boundaryData.length > 0">
<template v-for="(item, index) in boundaryData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.driver }}</span>
<span>{{ item.licensePlate }}</span>
<span class="time-cell">
<div class="date-part">{{ item.boundaryTime.split(' ')[0] }}</div>
<div class="time-part">{{ item.boundaryTime.split(' ')[1] }}</div>
</span>
</dd>
</template>
</template>
<template v-else>
<dd class="no-data">暂无数据</dd>
</template>
</dl>
</div>
......@@ -94,16 +109,21 @@
<span>报警级别</span>
<span>报警时间</span>
</dt>
<template v-for="(item, index) in monitorData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.equipname }}</span>
<span>{{ item.value }}{{ item.unit }}</span>
<span>{{ item.alarmlevel }}</span>
<span class="time-cell">
<div class="date-part">{{ item.time.split(' ')[0] }}</div>
<div class="time-part">{{ item.time.split(' ')[1] }}</div>
</span>
</dd>
<template v-if="monitorData.length > 0">
<template v-for="(item, index) in monitorData" :key="index">
<dd class="list-item" :class="getItemClass(item)">
<span>{{ item.equipname }}</span>
<span>{{ item.value }}{{ item.unit }}</span>
<span>{{ item.alarmlevel }}</span>
<span class="time-cell">
<div class="date-part">{{ item.time.split(' ')[0] }}</div>
<div class="time-part">{{ item.time.split(' ')[1] }}</div>
</span>
</dd>
</template>
</template>
<template v-else>
<dd class="no-data">暂无数据</dd>
</template>
</dl>
</div>
......@@ -112,15 +132,14 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'
import { getSosList, getCarAlarmList, getFenceLogList, getOnlineAlarmList } from '@/api/index-dp';
import {
import {
useMessage
} from 'naive-ui';
const message = useMessage();
// 激活的tab索引
const activeTab = ref(0)
......@@ -137,32 +156,17 @@ let scrollTimer = null
const sosData = ref([])
// 车辆报警数据
const vehicleData = ref([
// { vehicleOrDriver: '货车01', plateNumber: '鲁C12345', alarmType: '超速', alarmTime: '2025-01-10 14:21:31', status: 'chengse' },
// { vehicleOrDriver: '货车02', plateNumber: '鲁C12346', alarmType: '偏离路线', alarmTime: '2025-01-10 13:15:22', status: 'lanse' },
// { vehicleOrDriver: '张三', plateNumber: '鲁C12347', alarmType: '疲劳驾驶', alarmTime: '2025-01-10 12:05:47', status: 'huangse' }
])
const vehicleData = ref([])
// 越界开采数据
const boundaryData = ref([
// { personOrVehicle: '李四', cardOrPlate: 'K00123', boundaryTime: '2025-01-10 14:21:31', status: 'chengse' },
// { personOrVehicle: '挖掘机01', cardOrPlate: '鲁C56789', boundaryTime: '2025-01-10 13:45:12', status: 'lanse' },
// { personOrVehicle: '王五', cardOrPlate: 'K00456', boundaryTime: '2025-01-10 12:30:55', status: 'huangse' },
// { personOrVehicle: '卡车02', cardOrPlate: '鲁C98765', boundaryTime: '2025-01-10 11:20:33', status: 'chengse' }
])
const boundaryData = ref([])
// 在线监测数据
const monitorData = ref([
// { deviceName: '边坡表面位移01', monitorValue: '0.0047mm', alarmLevel: '橙色预警', alarmTime: '2025-01-10 14:21:31', status: 'chengse' },
// { deviceName: '降雨量', monitorValue: '50.2mm', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 13:15:22', status: 'lanse' },
// { deviceName: '温度传感器01', monitorValue: '38.5℃', alarmLevel: '黄色预警', alarmTime: '2025-01-10 12:05:47', status: 'huangse' },
// { deviceName: '湿度传感器02', monitorValue: '85%RH', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 11:30:15', status: 'lanse' }
])
const monitorData = ref([])
const fetchSosData = async () => {
const response = await getSosList();
console.log(response, 'SOS报警列表')
console.log(response, 'SOS报警列表')
if (response.data.code == 200) {
sosData.value = response.data.data || []
......@@ -170,6 +174,7 @@ const fetchSosData = async () => {
message.error(response.data.msg)
}
}
const fetchvehicleData = async () => {
const response = await getCarAlarmList();
if (response.data.code == 200) {
......@@ -178,6 +183,7 @@ const fetchvehicleData = async () => {
message.error(response.data.msg)
}
}
const fetchFenceData = async () => {
const response = await getFenceLogList();
if (response.data.code == 200) {
......@@ -186,6 +192,7 @@ const fetchFenceData = async () => {
message.error(response.data.msg)
}
}
const fetchMonitorData = async () => {
const response = await getOnlineAlarmList();
if (response.data.code == 200) {
......@@ -195,7 +202,6 @@ const fetchMonitorData = async () => {
}
}
// 定义tabs 使用computed使其具有响应性
const tabs = computed(() => [
{ name: 'SOS报警', count: sosData.value.length },
......@@ -204,10 +210,6 @@ const tabs = computed(() => [
{ name: '在线监测', count: monitorData.value.length }
])
// 根据status获取对应的class
const getItemClass = (item) => {
if (item.alarmlevel === '橙色预警') {
......@@ -249,15 +251,24 @@ const initScroll = () => {
// 如果没有数据或容器不存在，则不启动滚动
if (!wrapper || wrapper.scrollHeight <= wrapper.clientHeight) {
console.log("不满足滚动条件：wrapper存在?", !!wrapper, "scrollHeight:", wrapper ? wrapper.scrollHeight : "N/A", "clientHeight:", wrapper ? wrapper.clientHeight : "N/A")
return
}
console.log("开始滚动，容器:", wrapper, "scrollHeight:", wrapper.scrollHeight, "clientHeight:", wrapper.clientHeight)
// 设置初始滚动方向为向下
let direction = 1
const step = 1
// 启动自动滚动
scrollTimer = setInterval(() => {
// 确保元素仍然存在
if (!wrapper) {
clearInterval(scrollTimer)
return
}
// 计算新的滚动位置
const newScrollTop = wrapper.scrollTop + (step * direction)
......@@ -281,17 +292,24 @@ const initScroll = () => {
const handleTabChange = (index) => {
activeTab.value = index
// 延迟执行以确保DOM更新完成
setTimeout(initScroll, 100)
nextTick(() => {
initScroll()
})
}
// 监听数据变化，重新初始化滚动
watch([sosData, vehicleData, boundaryData, monitorData], () => {
nextTick(() => {
initScroll()
})
})
// 组件挂载时初始化滚动
onMounted(() => {
initScroll()
fetchSosData()
fetchvehicleData()
fetchFenceData()
fetchMonitorData()
})
// 组件卸载前清除定时器
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment