sunProduct/src/views/system/Visitor/visitorMain.vue

<template>
  <div class="ResidentMainBox p-2 w-full h-full">
    <PageHeader title="访客信息"></PageHeader>
    <div class="ResidentMainBody">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-row>
          <el-col :span="14">
            <div class="carinfo_body grid grid-cols-3 grid-rows-3">
              <div class="carinfo_item">
                <div class="label">访问房屋:</div>
                <div class="main housename" :title="form.houseName">{{ form.houseName }}</div>
              </div>
              <div class="carinfo_item">
                <div class="label">访客姓名:</div>
                <div class="main">{{ form.visitorName }}</div>
              </div>
              <div class="carinfo_item">
                <div class="label">访客性别:</div>
                <div class="main">
                  <DictTag :options="sys_user_sex" :value="form.visitorGender"></DictTag>
                </div>
              </div>
              <div class="carinfo_item">
                <div class="label">手机号码:</div>
                <div class="main">{{ form.visitorPhone }}</div>
              </div>
              <div class="carinfo_item">
                <div class="label">访问日期:</div>
                <div class="main" style="text-wrap: wrap">
                  <span>{{ form.startTime }}</span>
                </div>
              </div>
              <div class="carinfo_item">
                <div class="label">访问时长:</div>
                <div class="main">{{ formatTimeDiff(form.startTime, form.endTime) }}</div>
              </div>
              <!-- <div class="carinfo_item">
                <div class="label">访问业主:</div>
                <div class="main flex align-items-center">
                  <div>去丽丽</div>
                  <div class="ml-20px color-blue cursor-pointer">住户详情</div>
                </div>
              </div> -->
              <div class="carinfo_item">
                <div class="label">提交时间:</div>
                <div class="main">{{ form.startTime }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="4"></el-col>
          <el-col :span="5">
            <div class="flex">
              <div class="labelpass">通行证:</div>
              <div class="content-imageBox">
                <i class="bordertopline"></i>
                <el-image style="height: 100%; width: 100%" :src="form.url"></el-image>
                <i class="borderline"></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="visitorlist">
          <h2>访问记录</h2>
        </div>
        <el-row>
          <el-col :span="8">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column align="center" prop="name" label="开门位置" />
              <el-table-column align="center" prop="date" label="开门时间" />
            </el-table>
          </el-col>
        </el-row>
        <el-row class="mt-30px">
          <el-col :span="12">
            <el-button @click="back">返回</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getVisitor } from '@/api/system/Visitor';
import { formatTimeDiff } from '@/utils/time';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));

const tableData = ref([
  {
    date: '',
    name: '西大门'
  },
  {
    date: '',
    name: '西大门'
  }
]);

const userid = ref(null);
const route = useRoute();
const router = useRouter();
const form = ref({
  'id': null,
  'houseId': null,
  'visitorName': '',
  'villageId': null,
  'houseName': '',
  'visitorGender': '0',
  'visitorPhone': '',
  'carNum': null,
  'visitorNum': null,
  'startTime': '',
  'endTime': '',
  'type': '1',
  'status': '0',
  'url': ''
});
function init() {
  if (route.query.id) {
    userid.value = route.query.id;
    getVisitor(userid.value).then((res) => {
      form.value = {
        ...form.value,
        ...res.data
      };
      tableData.value[0].date = form.value.startTime;
      tableData.value[1].date = form.value.endTime;
    });
  }
}
init();

function back() {
  router.push({
    path: '/repair/visitorlist'
  });
}
</script>

<style scoped lang="scss">
.ResidentMainBox {
  display: flex;
  flex-direction: column;
  .ResidentMainBody {
    flex: 1;
    margin-top: 20px;
    font-size: 15px;

    .visitorlist {
      margin: 20px 0;
      border-bottom: 1px solid #ccc;
    }
    .carinfo_body {
      gap: 20px;
    }
    .carinfo_item {
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      .label {
        width: 100px;
        font-weight: bolder;
        text-align: left;
        text-wrap: nowrap;
      }
      .main {
        font-size: small;
        cursor: default;
        &.housename {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    &:deep(div.el-step__head.is-process) {
      & > div.el-step__line {
        width: 0;
        border: 1px dashed gray;
        background: transparent;
      }
    }
    &:deep(.el-step.is-vertical .el-step__line) {
      top: 20px;
    }
    &:deep(div.el-step__head.is-finish) {
      & > div.el-step__line {
        width: 0;
        border: 1px solid var(--el-color-primary);
        background: transparent;
      }
    }
  }
}

//
.labelpass {
  width: 70px;
}
.content-imageBox {
  width: 200px;
  height: 200px;
  padding: 3px;
  margin-left: 20px;
  box-sizing: border-box;
  position: relative;
  background: transparent;
}

/* 四个角 */
.content-imageBox i.borderline::before,
.content-imageBox i.borderline::after,
.content-imageBox i.bordertopline::before,
.content-imageBox i.bordertopline::after {
  content: '';
  position: absolute;
  width: 20px; /* 角的大小 */
  height: 20px;
  border-color: #1677ff; /* 边框颜色 */
  border-width: 3px;
  border-style: solid;
}

/* 左上角 */
.content-imageBox i.borderline::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

/* 右上角 */
.content-imageBox i.borderline::after {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

/* 左下角 */
.content-imageBox i.bordertopline::before {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

/* 右下角 */
.content-imageBox i.bordertopline::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}
</style>