Skip to content

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

add环境实时数据 列添加 样式优化

parent e5509129
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 17 deletions
src/components/MineMonitor/LeftOnlineMonitor.vue
View file @ a48a1358
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<span>设备名称</span> <span>设备名称</span>
<span>监测值</span> <span>监测值</span>
<span>监测时间</span> <span>监测时间</span>
<span>状态</span>
</dt> </dt>
</dl> </dl>
...@@ -17,8 +18,15 @@ ...@@ -17,8 +18,15 @@
<template v-for="(item, index) in tableData" :key="index"> <template v-for="(item, index) in tableData" :key="index">
<dd class="list-item" :class="getItemClass(item)"> <dd class="list-item" :class="getItemClass(item)">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span>{{ item.value }}</span> <span class="value-cell">
<span>{{ item.time }}</span> <div class="xy-value">{{ getXYValue(item.value) }}</div>
<div class="z-value">{{ getZValue(item.value) }}</div>
</span>
<span class="time-cell">
<div class="date-part">{{ item.time.split(' ')[0] }}</div>
<div class="time-part">{{ item.time.split(' ')[1] }}</div>
</span>
<span>{{ item.status }}</span>
</dd> </dd>
</template> </template>
</dl> </dl>
...@@ -39,31 +47,45 @@ const getItemClass = (item) => { ...@@ -39,31 +47,45 @@ const getItemClass = (item) => {
return 'status-lanse' return 'status-lanse'
} else if (item.status === 'huangse') { } else if (item.status === 'huangse') {
return 'status-huangse' return 'status-huangse'
} else if (item.status === '报警') {
return 'status-hongse'
} }
return '' return ''
} }
// 提取x和y值
const getXYValue = (value) => {
// 从 "x:0.047 y:0.047 z:0.047 mm" 中提取 "x:0.047 y:0.047"
const parts = value.split(' '); // 注意是两个空格
return parts.length >= 2 ? `${parts[0]} ${parts[1]}` : value;
}
// 提取z值
const getZValue = (value) => {
// 从 "x:0.047 y:0.047 z:0.047 mm" 中提取 "z:0.047 mm"
const parts = value.split(' '); // 注意是两个空格
return parts.length >= 3 ? `${parts[2]} ${parts[3] || ''}` : '';
}
const columns = ref([ const columns = ref([
{ title: '设备名称', key: 'name', align: 'left' }, { title: '设备名称', key: 'name', align: 'left' },
{ title: '监测值', key: 'value', align: 'center' }, { title: '监测值', key: 'value', align: 'center' },
{ title: '监测时间', key: 'time', align: 'center' }, { title: '监测时间', key: 'time', align: 'center' },
{ title: '状态', key: 'status', align: 'center' },
]); ]);
const tableData = ref([ const tableData = ref([
{ name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }, { name: '边坡表面位移01', value: 'x:0.047 y:0.047 z:0.047 mm', time: '2025-01-10 14:21:31', status: '正常' },
{ name: '降雨量', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }, { name: '降雨量', value: 'x:0.047 y:0.047 z:0.047 mm', time: '2025-01-10 14:21:31', status: '正常' },
{ name: '排土场表面位移03', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '预警' }, { name: '排土场表面位移03', value: 'x:0.047 y:0.047 z:0.047 mm', time: '2025-01-10 14:21:31', status: '报警' },
{ name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }, { name: '边坡表面位移01', value: 'x:0.047 y:0.047 z:0.047 mm', time: '2025-01-10 14:21:31', status: '正常' },
{ name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }, { name: '边坡表面位移01', value: 'x:0.047 y:0.047 z:0.047 mm', time: '2025-01-10 14:21:31', status: '正常' },
{ name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }, { name: '边坡表面位移01', value: 'x:0.047 y:0.047 z:0.047 mm', time: '2025-01-10 14:21:31', status: '正常' },
{ name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }, { name: '边坡表面位移01', value: 'x:0.047 y:0.047 z:0.047 mm', time: '2025-01-10 14:21:31', status: '正常' },
{ name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' } { name: '边坡表面位移01', value: 'x:0.047 y:0.047 z:0.047 mm', time: '2025-01-10 14:21:31', status: '正常' }
]); ]);
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -116,12 +138,14 @@ const tableData = ref([ ...@@ -116,12 +138,14 @@ const tableData = ref([
flex: 1; flex: 1;
text-align: center; text-align: center;
&:first-child { &:first-child {
text-align: left; text-align: left;
} }
&:last-child { &:last-child {
text-align: right; text-align: center;
flex: .5;
} }
} }
} }
...@@ -153,13 +177,49 @@ const tableData = ref([ ...@@ -153,13 +177,49 @@ const tableData = ref([
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: flex;
align-items: center;
&:first-child { &:first-child {
text-align: left; // text-align: left;
justify-content: start;
} }
&:last-child { &:last-child {
text-align: right; // text-align: right;
flex: .5;
justify-content: center;
}
}
.value-cell {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.2;
.xy-value, .z-value {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
}
.time-cell {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.2;
.date-part, .time-part {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
} }
} }
...@@ -180,6 +240,11 @@ const tableData = ref([ ...@@ -180,6 +240,11 @@ const tableData = ref([
color: #FFD118; color: #FFD118;
} }
} }
}
&.status-hongse {
span {
color: #FF852B;
}
}
}
</style> </style>
\ No newline at end of file
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