<template>
|
<el-dialog v-model="centerDialogVisible" :title="$t('Person.PersonInfo')" align-center width="800" destroy-on-close center>
|
<template #header="">
|
<div class="my-header stroke-with-shadow" style="">{{ $t("Person.PersonInfo") }}</div>
|
</template>
|
<!-- 个人信息模板 -->
|
<div class="person-info">
|
<el-row>
|
<!-- 左侧图片区域 -->
|
<el-col :span="4">
|
<div class="image-container">
|
<!-- 第一张图片 -->
|
<el-image class="person-image" :src="drawerProps.row.baoliu38" @error="handleImageError">
|
<template #error>
|
<el-image class="person-image" :src="defaultImage" />
|
</template>
|
</el-image>
|
<p class="stroke-with-shadow">【 {{ $t("PersonDrawer.photo") }} 】</p>
|
|
<!-- 第二张图片 -->
|
<el-image class="person-image" :src="url" @error="handleImageError">
|
<template #error>
|
<el-image class="person-image" :src="defaultImage" />
|
</template>
|
</el-image>
|
<p class="image-label stroke-with-shadow">【 {{ $t("PersonInfoCard.icon") }} 】</p>
|
</div>
|
</el-col>
|
<!-- 右侧信息区域 -->
|
<el-col :span="20">
|
<div class="info-list">
|
<!-- 上部分：个人信息 -->
|
<div class="info-section">
|
<h4 class="section-title">{{ $t("PersonInfoCard.basicInfo") }}</h4>
|
<el-row :gutter="9">
|
<el-col :span="9" v-for="(item, index) in personalInfo" :key="index">
|
<p class="stroke-with-shadow">
|
<span>{{ item.label }}:</span> {{ item.value }}
|
</p>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 下部分：位置/状态信息 -->
|
<div class="info-section">
|
<h4 class="section-title">{{ $t("PersonInfoCard.locationInfo") }}</h4>
|
<el-row :gutter="16">
|
<el-col :span="8" v-for="(item, index) in locationInfo" :key="index">
|
<p class="stroke-with-shadow">
|
<span>{{ item.label }}:</span> {{ item.value }}
|
</p>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, computed } from "vue";
|
import { FindOneDepartMent } from "@/api/modules/hxzk/department/department";
|
import notData from "@/assets/images/notData1.png";
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n();
|
|
const url = ref("");
|
const centerDialogVisible = ref(false);
|
|
interface DrawerProps {
|
title: string;
|
isView: boolean;
|
initParam: Partial<User.ResUserList>;
|
row: Partial<User.ResUserList>;
|
api?: (params: any) => Promise<any>;
|
getTableList?: () => void;
|
}
|
|
const drawerVisible = ref(false);
|
const drawerProps = ref<DrawerProps>({
|
isView: false,
|
initParam: {},
|
title: "",
|
row: {}
|
});
|
|
const formatValue = (val, suffix = "") => {
|
return val === "null" ? "--" : val + suffix;
|
};
|
|
// 默认图片路径（可以是本地或网络图片）
|
const defaultImage = notData;
|
|
// 图片加载失败时的处理
|
const handleImageError = e => {
|
console.error(t("PersonInfoCard.imageLoadError"), e);
|
};
|
|
const personalInfo = computed(() => [
|
{ label: t("Person.name"), value: formatValue(drawerProps.value.row.pname) },
|
{ label: t("Person.tagid"), value: formatValue(drawerProps.value.row.ptagid) },
|
{ label: t("Person.department"), value: formatValue(drawerProps.value.row.pdepartment) },
|
{ label: t("Person.company"), value: formatValue(drawerProps.value.row.company) },
|
{ label: t("Person.power"), value: formatValue(drawerProps.value.row.ppower, "%") },
|
{ label: t("Person.phone"), value: formatValue(drawerProps.value.row.pphone) },
|
{ label: t("PersonInfoCard.type"), value: formatValue(drawerProps.value.row.baoliu19) },
|
{ label: t("Person.cardNumber"), value: formatValue(drawerProps.value.row.baoliu1) }
|
]);
|
|
const locationInfo = computed(() => [
|
{ label: t("PersonInfoCard.longitude"), value: formatValue(drawerProps.value.row.baoliu2) },
|
{ label: t("PersonInfoCard.latitude"), value: formatValue(drawerProps.value.row.baoliu3) },
|
{ label: t("PersonInfoCard.elevation"), value: formatValue(drawerProps.value.row.baoliu4, "cm") },
|
{
|
label: t("Person.online"),
|
value: formatValue(drawerProps.value.row.ponline) === "1" ? t("Person.status.online") : t("Person.status.offline")
|
},
|
{ label: t("PersonInfoCard.xCoordinate"), value: formatValue(drawerProps.value.row.px) },
|
{ label: t("PersonInfoCard.yCoordinate"), value: formatValue(drawerProps.value.row.py) },
|
{ label: t("PersonInfoCard.floor"), value: formatValue(drawerProps.value.row.pfloor) },
|
{ label: t("PersonInfoCard.status"), value: formatValue(drawerProps.value.row.baoliu13) },
|
{ label: t("PersonInfoCard.heartRate"), value: "--" },
|
{ label: t("PersonInfoCard.bloodOxygen"), value: "--" },
|
{ label: t("PersonInfoCard.temperature"), value: "--" },
|
{ label: t("Config.time"), value: formatValue(drawerProps.value.row.paddtiem) }
|
]);
|
|
// 接收父组件传过来的参数
|
const acceptParams = (params: DrawerProps) => {
|
centerDialogVisible.value = true;
|
drawerProps.value = params;
|
drawerVisible.value = true;
|
FindOneDepartMent(drawerProps.value.row).then(data => {
|
url.value = data.baoliu3;
|
});
|
};
|
|
defineExpose({
|
acceptParams
|
});
|
</script>
|
|
<style scoped>
|
.person-info {
|
padding: 2px;
|
}
|
.image-container {
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
align-items: center;
|
}
|
.person-image {
|
width: 110px;
|
height: 110px;
|
border-radius: 10px;
|
box-shadow: 0 0 8px rgb(0 0 0 / 20%);
|
}
|
.info-list {
|
padding: 0 20px;
|
}
|
.info-section {
|
margin-bottom: 20px;
|
}
|
.section-title {
|
padding-bottom: 5px;
|
margin-bottom: 10px;
|
color: white;
|
border-bottom: 1px solid #444444;
|
}
|
.info-list p {
|
margin: 8px 0;
|
font-size: 14px;
|
}
|
.info-list p span {
|
margin-right: 10px;
|
font-weight: bold;
|
}
|
.stroke-with-shadow {
|
color: rgb(255 255 255);
|
}
|
</style>
|
