物业之前，新工作台

src/views/system/Visitor/index.vue

@@ -94,6 +94,7 @@ const data = reactive<PageData<VisitorForm, VisitorQuery>>({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
+    villageId: Number(localStorage.getItem('villageid')),
     houseId: undefined,
     visitorName: undefined,
     visitorGender: undefined,

src/views/system/Visitor/visitorMain.vue

@@ -9,31 +9,33 @@
           </div>
         </template>
         <el-row>
-          <el-col :span="12">
+          <el-col :span="14">
             <div class="grid grid-cols-3 grid-rows-3">
               <div class="carinfo_item">
                 <div class="label">访问房屋:</div>
-                <div class="main">北境碧桂园小区A栋2单元402</div>
+                <div class="main">{{ form.houseName }}</div>
               </div>
               <div class="carinfo_item">
                 <div class="label">访客姓名:</div>
-                <div class="main">李淑一</div>
+                <div class="main">{{ form.visitorName }}</div>
               </div>
               <div class="carinfo_item">
                 <div class="label">访客性别:</div>
-                <div class="main">男</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">15020360831</div>
+                <div class="main">{{ form.visitorPhone }}</div>
               </div>
               <div class="carinfo_item">
                 <div class="label">访问日期:</div>
-                <div class="main">2024/05/08</div>
+                <div class="main">{{ form.startTime }} - {{ form.endTime }}</div>
               </div>
               <div class="carinfo_item">
                 <div class="label">访问时长:</div>
-                <div class="main">3h</div>
+                <div class="main">{{ formatTimeDiff(form.startTime, form.endTime) }}</div>
               </div>
               <div class="carinfo_item">
                 <div class="label">访问业主:</div>
@@ -44,14 +46,18 @@
               </div>
               <div class="carinfo_item">
                 <div class="label">提交时间:</div>
-                <div class="main">2024/09/15 22：48</div>
+                <div class="main">{{ form.startTime }}</div>
               </div>
             </div>
           </el-col>
           <el-col :span="5"></el-col>
-          <el-col :span="6">
-            <div>
+          <el-col :span="4">
+            <div class="flex">
               <div>通行证</div>
+              <div class="content-imageBox">
+                <i></i>
+                <el-image :src="form.url"></el-image>
+              </div>
             </div>
           </el-col>
         </el-row>
@@ -78,30 +84,55 @@
 <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 = [
   {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
+    date: '西大门',
+    name: '2026-04-13 13:38:11'
   },
   {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
+    date: '西大门',
+    name: '2026-05-30 02:31:16'
   }
 ];
 
+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
+      };
+    });
+  }
+}
+init();
+
 function back() {
   router.push({
     path: '/repair/visitorlist'
@@ -127,7 +158,7 @@ function back() {
       display: flex;
       align-items: center;
       .label {
-        width: 100px;
+        width: 150px;
         text-align: right;
         font-weight: bolder;
         margin-right: 30px;
@@ -153,4 +184,68 @@ function back() {
     }
   }
 }
+
+//
+
+.content-imageBox {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  background: transparent;
+
+  i {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+
+/* 四个角 */
+.content-imageBox ::before,
+.content-imageBox ::after,
+.content-imageBox i::before,
+.content-imageBox i::after {
+  content: '';
+  position: absolute;
+  width: 20px; /* 角的大小 */
+  height: 20px;
+  border-color: #1677ff; /* 边框颜色 */
+  border-width: 3px;
+  border-style: solid;
+}
+
+/* 左上角 */
+.content-imageBox ::before {
+  top: 0;
+  left: 0;
+  border-right: none;
+  border-bottom: none;
+}
+
+/* 右上角 */
+.content-imageBox ::after {
+  top: 0;
+  right: 0;
+  border-left: none;
+  border-bottom: none;
+}
+
+/* 左下角 */
+.content-imageBox i::before {
+  bottom: 0;
+  left: 0;
+  border-right: none;
+  border-top: none;
+}
+
+/* 右下角 */
+.content-imageBox i::after {
+  bottom: 0;
+  right: 0;
+  border-left: none;
+  border-top: none;
+}
 </style>