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:
liub
2025-09-09 16:34:54 +08:00
parent 92e22812d7
commit 84335de7c4
10 changed files with 1970 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/views/equipmentManagement/devices/Usr.vue Normal file
View File

@ -0,0 +1,256 @@
<template>
<div class="content">
<div class="row">
<div class="item">
<div class="lable">姓名<span>：</span></div>
<div class="val">{{ lastData?.name }}</div>
</div>
<div class="item">
<div class="lable">单位名称<span>：</span></div>
<div class="val">{{ lastData?.position }}</div>
</div>
<div class="item">
<div class="lable">职务<span>：</span></div>
<div class="val">{{ lastData?.unitName }}</div>
</div>
<div class="item">
<div class="lable">ID号<span>：</span></div>
<div class="val">{{ lastData?.code }}</div>
</div>
<div class="clear"></div>
</div>
<div class="clear divider"></div>
<div class="listTitle">信息登记记录</div>
<div class="list">
<div class="item" v-for="(item, index) in detailData">
<div class="time">
<el-icon><Timer /></el-icon>{{ item.item }}
</div>
<div class="childContent">
<div class="itemChild" :class="i === item.child.length - 1 ? '' : 'marginBottom'" v-for="(c, i) in item.child">
<div class="itemRow">登记时间：{{ c.createTime }}</div>
<div class="itemRow">姓&nbsp;&nbsp;&nbsp;&nbsp;名：{{ c.name }}</div>
<div class="itemRow">单位名称：{{ c.position }}</div>
<div class="itemRow">职&nbsp;&nbsp;&nbsp;&nbsp;务：{{ c.unitName }}</div>
<div class="itemRow">ID&nbsp;&nbsp;&nbsp;&nbsp;号：{{ c.code }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import request from '@/utils/request';
const props = defineProps({
data: {
type: Object,
required: true
},
acIndex: {
type: Number,
required: true
}
});
var detailData = ref([]);
var data = ref({});
var deviceid = null;
var lastData = ref({ name: '', position: '', unitName: '', code: '' });
function processDataByDateGroup(originalData) {
// 1. 深拷贝原始数据（避免修改原数据，保护源数据完整性）
const data = JSON.parse(JSON.stringify(originalData));
// 边界处理：若data不存在或非数组，返回原结构+空sipledate
if (!data?.data || !Array.isArray(data.data)) {
return {
code: data?.code ?? 400, // 若原code不存在，默认400（请求错误）
msg: data?.msg ?? '数据格式错误',
sipledate: []
};
}
// 2. 先按createTime逆序排序（子数据内部也保持“新->旧”顺序）
const sortedData = data.data.sort((a, b) => {
const timeA = new Date(a.createTime);
const timeB = new Date(b.createTime);
return timeB - timeA; // 逆序：后创建的排在前面
});
// 3. 按日期分组（key：yyyy-MM-dd，value：该日期下的所有子数据）
const dateGroupMap = sortedData.reduce((map, item) => {
// 提取当前数据的“yyyy-MM-dd”格式日期
const dateKey = item.createTime.slice(0, 10);
// 若当前日期未在map中，初始化空数组；若已存在，直接push子数据
if (!map.has(dateKey)) {
map.set(dateKey, []);
}
map.get(dateKey).push(item);
return map;
}, new Map()); // 使用Map而非Object，确保日期顺序与排序后一致
// 4. 转换为需求格式的sipledate数组（每个元素含item和child）
const sipledate = Array.from(dateGroupMap.entries()).map(([date, childData]) => ({
item: date, // 日期标识（yyyy-MM-dd），原需求“item1/item2”统一为“item”（更语义化）
child: childData // 该日期下的所有子数据（已按时间逆序）
}));
// 5. 返回最终格式结果
return {
code: data.code,
msg: data.msg,
sipledate: sipledate
};
}
function initData(item) {
if (deviceid == item.data.deviceId) {
return;
}
deviceid = item.data.deviceId;
request({
url: '/api/device/getDeviceUser/' + item.data.deviceId,
method: 'get'
})
.then((res) => {
if (res.code == 200) {
if (res.data) {
if (res.data.length) {
lastData.value = res.data[0];
let data = processDataByDateGroup(res);
detailData.value = data.sipledate;
}
}
}
})
.finally(() => {
data.value = item.data;
});
}
watch(
() => props.acIndex, // 监听的属性
(newVal) => {
if (newVal === 2 && props.data) {
// 确保参数有效
initData(props.data); // 调用回调
}
},
{ immediate: true } // 关键：组件初始化时立即执行一次
);
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30px 12px 12px 12px;
}
.row {
width: 50%;
}
.row .item {
width: 50%;
float: left;
height: 36px;
line-height: 36px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
color: rgba(56, 64, 79, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
.row .item .lable {
width: 100px;
text-align: right;
}
.divider {
width: 100%;
height: 0px;
border-bottom: 1px solid rgba(235, 238, 248, 1);
}
.listTitle {
color: rgba(56, 64, 79, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
height: 56px;
line-height: 56px;
letter-spacing: 0px;
text-align: left;
}
.list {
width: 100%;
box-sizing: border-box;
height: calc(100% - 130px);
padding: 15px 12px;
overflow-y: scroll;
}
.list .time {
color: #027cfb;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 21px;
height: 21px;
letter-spacing: 0px;
text-align: left;
}
.list .itemRow{
color: rgba(56, 64, 79, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
margin-bottom: 13px;
}
.itemChild.marginBottom {
margin-bottom: 12px;
}
.list .childContent {
width: 100%;
height: auto;
border-left: 1px solid rgba(0, 198, 250, 0.2);
box-sizing: border-box;
padding: 6px 20px;
}
.list .itemChild {
border-radius: 4px;
background: rgba(247, 248, 252, 1);
width: 100%;
height: auto;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.clear {
clear: both;
}
</style>