dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据大屏图表接口对接

Browse Source
This commit is contained in:
fengerli
2025-09-28 15:28:15 +08:00
parent c4d00bfdc3
commit b202de76ec
15 changed files with 755 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/homeIndex/components/RealTimeAlarm.vue
View File

@ -10,54 +10,39 @@
<div class="alarm-table-body" ref="tableBody"
:style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
<div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
<div class="item-cell">{{ item.alarmTime }}</div>
<div class="item-cell">{{ item.deviceType }}</div>
<div class="item-cell">{{ item.deviceIMEI }}</div>
<div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
<div class="item-cell">{{ item.alarmLocation }}</div>
</div>
<!-- 复制一份数据，实现无缝滚动 -->
<div v-for="(item, index) in alarmData" :key="index + 'copy'" class="alarm-item">
<div class="item-cell">{{ item.alarmTime }}</div>
<div class="item-cell">{{ item.deviceType }}</div>
<div class="item-cell">{{ item.deviceIMEI }}</div>
<div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
<div class="item-cell">{{ item.alarmLocation }}</div>
<div class="item-cell">{{ item.startTime }}</div>
<div class="item-cell">{{ item.deviceTypeName }}</div>
<div class="item-cell">{{ item.deviceImei }}</div>
<div class="item-cell alarm-event">
{{ {
0: '强制报警',
1: '撞击闯入',
2: '自动报警',
3: '电子围栏告警'
}[item.deviceAction]}}
</div>
<div class="item-cell">{{ item.location }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getRealtimeAlarm } from '@/api/homeIndex/index';
// 模拟报警数据
const alarmData = ref([
{
alarmTime: '2025-09-01 20:16:54',
deviceType: 'BJQ6170',
deviceIMEI: '123456789123456',
alarmEvent: '强制报警',
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
},
{
alarmTime: '2025-09-01 20:16:54',
deviceType: 'BJQ6170',
deviceIMEI: '123456789123456',
alarmEvent: '强制报警',
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
},
{
alarmTime: '2025-09-01 20:16:54',
deviceType: 'BJQ6170',
deviceIMEI: '123456789123456',
alarmEvent: '强制报警',
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
}
]);
const getRealtimeAlarmData = () => {
getRealtimeAlarm().then((res) => {
alarmData.value = res.data;
});
}
const tableBody = ref(null);
onMounted(() => {
getRealtimeAlarmData()
// 启动滚动动画
if (tableBody.value) {
tableBody.value.style.animationName = 'scroll';
@ -76,9 +61,9 @@ onMounted(() => {
.alarm-table-header {
display: flex;
color: #267AD0;
color: #00C0FF;
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
font-size: 1vw;
font-size: 0.8vw;
}
.header-item {