dyf-vue-ui/src/views/equipmentManagement/devices/Usr.vue

<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>