更新

.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//Users/mac/Documents/朗业/2025/m-迈柯唯访客/mkw-visit-cancel/**)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.env.development

@@ -2,5 +2,5 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = https://bd-fangke.ali251.langye.net
+VUE_APP_BASE_API = https://visitor-test.ali251.langye.net
-VUE_APP_UPLOAD_API = https://bd-fangke.ali251.langye.net/api/admin/upload-file
+VUE_APP_UPLOAD_API = https://visitor-test.ali251.langye.net/api/admin/upload-file

.env.production

@@ -2,5 +2,5 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = https://bd-fangke.ali251.langye.net
+VUE_APP_BASE_API =  ''
-VUE_APP_UPLOAD_API = https://bd-fangke.ali251.langye.net/api/admin/upload-file
+VUE_APP_UPLOAD_API = /api/admin/upload-file

src/api/gate/index.js

@@ -2,12 +2,28 @@ import request from "@/utils/request";
 
 export function getList(params){
   return request({
-    url:'/api/admin/gate/visit-list',
+    url:'/api/admin/gate/visits',
     method:'get',
     params
   })
 }
 
+export function show(data){
+  return request({
+    url:'/api/admin/gate/visits/detail',
+    method:'post',
+    data
+  })
+}
+
+export function update(data){
+  return request({
+    url:'/api/admin/gate/visits/update',
+    method:'post',
+    data
+  })
+}
+
 export function getUserList(params){
   return request({
     url:'/api/admin/gate/user-list',

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: 'BD访客管理系统',
+  title: '迈柯唯访客管理系统',
 
   /**
    * @type {boolean} true | false

src/styles/sidebar.scss

@@ -11,7 +11,7 @@
     transition: width 0.28s;
     width: $sideBarWidth !important;
     //background-color: $menuBg;
-    background: linear-gradient(180deg, #f27707, #f3a359);
+    background: linear-gradient(180deg, #182849, #4f607e);
     box-shadow: 1px 1px 15px 0px rgba(17, 76, 157, 0.2);
     height: 100%;
     position: fixed;
@@ -229,7 +229,7 @@
   >.el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
-    background: #f27707 !important;
+    background: #182849 !important;
 
     &::-webkit-scrollbar-track-piece {
       background: #d3dce6;

src/views/gate/visitlist.vue

@@ -1,37 +1,70 @@
 <template>
   <div>
-    <div class="gatewrap">
+    <div class="gatewrap">
-      <div class="gateLeft">
+      <!-- 头部导航 -->
-        <span @click='openList'>今日访客</span>
+      <div class="gate-header">
-      </div>
+        <div class="gate-left">
-      <div class="gateRight">
+          <span @click='openList' class="today-visitors">今日访客</span>
-        <span>
-          {{gateName}}<span @click="gateShow = true">切换</span>
-        </span>
-
-        <span @click='screen'>{{fullscreen?'取消全屏':'打开全屏'}}</span>
-      </div>
-      <div class="gatecode">
-        <div>
-          拜访日期：
-          <el-date-picker v-model="selectRange" @change="selectRangeM" value-format="yyyy-MM-dd" type="daterange"
-            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-            style="width:400px;vertical-align: middle;">
-          </el-date-picker>
         </div>
-        <div>
+        <div class="gate-right">
-          核验销码：
+          <div class="gate-info">
-          <el-input clearable ref='codeInput' size="mini" placeholder="请输入核销码或扫码" v-model="select.code"
+            <span class="gate-name">{{gateName}}</span>
-            style="width: 160px;margin-right: 10px;" @change='getList'></el-input>
+            <span @click="gateShow = true" class="switch-gate">切换</span>
+          </div>
+          <div class="fullscreen-btn" @click='screen'>
+            {{fullscreen?'取消全屏':'打开全屏'}}
+          </div>
         </div>
-        <div>
+      </div>
-          身份证件：
+
-          <el-input clearable ref='idInput' size="mini" placeholder="请输入身份证" v-model="select.idcard"
+      <!-- 主要内容区域 -->
-            style="width: 160px;margin-right: 10px;"></el-input>
+      <div class="gate-content">
-          <el-button type="primary" @click='getIdcard'>查询身份证</el-button>
+        <div class="form-container">
-        </div>
+          <div class="form-item">
-        <div>
+            <label class="form-label">拜访日期：</label>
-          <el-button class="getButton" type="primary" @click='getList'>查询</el-button>
+            <el-date-picker
+              v-model="selectRange"
+              @change="selectRangeM"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              class="date-picker"
+              :popper-class="'mobile-date-picker'"
+              append-to-body>
+            </el-date-picker>
+          </div>
+
+          <div class="form-item">
+            <label class="form-label">核验销码：</label>
+            <el-input
+              clearable
+              ref='codeInput'
+              placeholder="请输入核销码或扫码"
+              v-model="select.code"
+              class="form-input"
+              @change='getList'>
+            </el-input>
+          </div>
+
+          <div class="form-item">
+            <label class="form-label">身份证件：</label>
+            <div class="id-input-group">
+              <el-input
+                clearable
+                ref='idInput'
+                placeholder="请输入身份证"
+                v-model="select.idcard"
+                class="form-input id-input">
+              </el-input>
+              <el-button type="primary" @click='getIdcard' class="id-btn">查询身份证</el-button>
+            </div>
+          </div>
+
+          <div class="form-item query-btn-container">
+            <el-button class="query-btn" type="primary" @click='getList'>查询</el-button>
+          </div>
         </div>
       </div>
     </div>
@@ -51,9 +84,9 @@
   </div>
 </template>
 <script>
-  import Cookies from 'js-cookie'
+  import Cookies from 'js-cookie'
   import axios from 'axios'
-  import showVisit from '@/views/visit/component/showVisit'
+  import showVisit from '@/views/visit/component/showVisit'
   import list from '@/views/gate/components/list.vue'
   import {
     getList,
@@ -61,9 +94,8 @@
   } from '@/api/gate'
   export default {
     components: {
-      showVisit,
+      showVisit,
-      list
+      list
-
     },
     data() {
       return {
@@ -99,9 +131,9 @@
       this.getToday()
       // this.enterfullscreen()
     },
-    methods: {
+    methods: {
-      openList(){
+      openList(){
-        this.$refs.list.listShow = true
+        this.$refs.list.listShow = true
       },
       getToday() {
         let now = new Date()
@@ -140,7 +172,7 @@
               this.$refs['showVisit'].form = k
               this.$refs['showVisit'].formDataType = 'coderecord'
               this.$refs['showVisit'].gateAdminId = this.gateAdminId
-              this.$refs['showVisit'].isShow = true
+              this.$refs['showVisit'].isShow = true
               return
             } else {
               this.$successMessage(k.audit_status_text, '', 'success')
@@ -148,8 +180,8 @@
           }
         } else {
           this.$successMessage("未查询到记录", '', 'warning')
-        }
+        }
-        this.select.code = ''
+        this.select.code = ''
         this.select.idcard = ''
       },
       async getUserList() {
@@ -187,27 +219,27 @@
         })
         this.gateShow = false
       },
-      getIdcard() {
+      getIdcard() {
-        let that = this
+        let that = this
-        axios.get('https://127.0.0.1:24011/ZKIDROnline/ScanReadIdCardInfo?OP-DEV=1&CMD-URL=4&REPEAT=1&READTYPE=1',{
+        axios.get('https://127.0.0.1:24011/ZKIDROnline/ScanReadIdCardInfo?OP-DEV=1&CMD-URL=4&REPEAT=1&READTYPE=1',{
-          'headers':{
+          'headers':{
-            "Content-Type":'application/json'
+            "Content-Type":'application/json'
-          }
+          }
-        })
+        })
-        .then(res=>{
+        .then(res=>{
-            console.log(res)
+            console.log(res)
-            console.log(res.data)
+            console.log(res.data)
-            if(!res.data){
+            if(!res.data){
-              return
+              return
-            }
+            }
-            let data1 = res.data?res.data.split('"IDNumber"'):''
+            let data1 = res.data?res.data.split('"IDNumber"'):''
-            let data2= data1[1].split(",")
+            let data2= data1[1].split(",")
-            let data3 =data2[0].replace(/[^\d]/g, "")
+            let data3 =data2[0].replace(/[^\d]/g, "")
-            that.select.idcard = data3
+            that.select.idcard = data3
-            that.getList()
+            that.getList()
-        }).catch(err=>{
+        }).catch(err=>{
-          console.log(err)
+          console.log(err)
-               this.$successMessage(err.statusText, '', 'warning')
+               this.$successMessage(err.statusText, '', 'warning')
         })
       },
       screen() {
@@ -273,91 +305,365 @@
 </script>
 
 <style scoped>
-  .gatewrap {
+/* 基础容器样式 */
-    background-color: #fff;
+.gatewrap {
-    position: relative;
+  background-color: #fff;
-    height: 100vh
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 头部导航样式 */
+.gate-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+
+  @media (max-width: 767px) {
+    padding: 10px 15px;
+    flex-direction: column;
+    gap: 10px;
+    align-items: stretch;
+  }
+}
+
+.gate-left {
+  .today-visitors {
+    color: #004593;
+    font-size: 18px;
+    cursor: pointer;
+
+    @media (max-width: 767px) {
+      font-size: 16px;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.gate-right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+
+  @media (max-width: 767px) {
+    justify-content: space-between;
+    gap: 10px;
   }
+}
+
+.gate-info {
+  display: flex;
+  align-items: center;
+  gap: 5px;
 
-  .gatecode {
+  .gate-name {
-    font-size: 32px;
+    font-size: 16px;
-    position: absolute;
+    color: #333;
-    top: 50%;
+
-    left: 50%;
+    @media (max-width: 767px) {
-    transform: translate(-50%, -50%);
+      font-size: 14px;
-    text-align: left;
+    }
-    display: inline-block;
   }
 
-  .gatecode>div {
+  .switch-gate {
-    margin-bottom: 40px;
+    color: #004593;
+    text-decoration: underline;
+    cursor: pointer;
+    font-size: 14px;
+
+    @media (max-width: 767px) {
+      font-size: 12px;
+    }
   }
+}
+
+.fullscreen-btn {
+  color: #666;
+  cursor: pointer;
+  font-size: 14px;
 
-  .gatecode>div:last-child {
+  @media (max-width: 767px) {
-    margin-bottom: 0px;
+    font-size: 12px;
   }
 
-  .gateRight {
+  &:hover {
-    position: absolute;
+    color: #004593;
-    right: 20px;
-    top: 20px;
-    font-size: 20px;
   }
+}
+
+/* 主要内容区域 */
+.gate-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
 
-  .gateRight span {
+  @media (max-width: 767px) {
-    margin-right: 10px;
+    align-items: flex-start;
-    margin-left: 5px;
+    padding: 20px 15px;
   }
-  .gateRight span>span {
+}
-    text-decoration: underline;
+
-    color:#004593
+.form-container {
+  width: 100%;
+  max-width: 500px;
+
+  @media (min-width: 768px) {
+    max-width: 600px;
   }
-  .gateLeft{
+}
-    position: absolute;
+
-    left: 20px;
+.form-item {
-    top: 20px;
+  margin-bottom: 25px;
-    font-size: 20px;
+
-        color:#004593
+  @media (max-width: 767px) {
+    margin-bottom: 20px;
   }
-  /deep/ .el-input {
+
-    width: 400px !important;
+  &:last-child {
+    margin-bottom: 0;
   }
+}
+
+.form-label {
+  display: block;
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 8px;
+  font-weight: 500;
 
-  /deep/ .el-input__inner {
+  @media (max-width: 767px) {
-    font-size: 32px;
+    font-size: 14px;
-    height: 45px;
+    margin-bottom: 6px;
-    width: 400px;
   }
 
-  /deep/ .gatewrap .el-button {
+  @media (min-width: 768px) {
-    vertical-align: top;
-    height: 45px;
-    width: 145px;
     font-size: 20px;
+    margin-bottom: 10px;
   }
+}
 
-  /deep/ .el-range-editor .el-range-input {
+.form-input {
-    font-size: 20px;
+  width: 100%;
+}
+
+.date-picker {
+  width: 100%;
+}
+
+.id-input-group {
+  display: flex;
+  gap: 10px;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+    gap: 8px;
   }
+}
 
-  /deep/ .el-date-editor .el-range-separator {
+.id-input {
-    font-size: 20px;
+  flex: 1;
-    line-height: 36px;
+}
+
+.id-btn {
+  @media (max-width: 767px) {
+    width: 100%;
   }
 
-  /deep/ .el-date-editor .el-range__icon {
+  @media (min-width: 768px) {
-    font-size: 18px;
+    min-width: 120px;
-    line-height: 38px;
   }
+}
+
+.query-btn-container {
+  text-align: center;
+  margin-top: 30px;
 
-  /deep/ .el-date-editor .el-range__close-icon {
+  @media (max-width: 767px) {
+    margin-top: 25px;
+  }
+}
+
+.query-btn {
+  width: 100%;
+  height: 50px;
+  font-size: 18px;
+  font-weight: 600;
+
+  @media (max-width: 767px) {
+    height: 44px;
+    font-size: 16px;
+  }
+
+  @media (min-width: 768px) {
+    height: 60px;
+    font-size: 24px;
+  }
+}
+
+/* Element UI 组件样式覆盖 */
+::v-deep .el-input__inner {
+  height: 44px;
+  font-size: 16px;
+
+  @media (max-width: 767px) {
+    height: 40px;
+    font-size: 14px;
+  }
+
+  @media (min-width: 768px) {
+    height: 50px;
     font-size: 18px;
-    line-height: 38px;
   }
+}
+
+::v-deep .el-button {
+  height: 44px;
+  font-size: 14px;
+
+  @media (max-width: 767px) {
+    height: 40px;
+    font-size: 13px;
+  }
+
+  @media (min-width: 768px) {
+    height: 50px;
+    font-size: 16px;
+  }
+}
+
+::v-deep .el-date-editor {
+  width: 100%;
+}
+
+::v-deep .el-range-editor .el-range-input {
+  font-size: 14px;
+
+  @media (min-width: 768px) {
+    font-size: 16px;
+  }
+}
+
+::v-deep .el-date-editor .el-range-separator {
+  font-size: 14px;
+
+  @media (min-width: 768px) {
+    font-size: 16px;
+  }
+}
+
+::v-deep .el-date-editor .el-range__icon,
+::v-deep .el-date-editor .el-range__close-icon {
+  font-size: 14px;
+}
+
+/* 对话框样式优化 */
+::v-deep .el-dialog {
+  @media (max-width: 767px) {
+    width: 90% !important;
+    margin-top: 15vh !important;
+  }
+}
 
-  .gatecode .getButton.el-button {
+::v-deep .el-radio {
+  @media (max-width: 767px) {
     width: 100%;
-    font-size: 32px;
+    margin-bottom: 10px;
-    height: 70px
+  }
+}
+
+
+/* 日期选择器输入框在移动端的样式调整 */
+::v-deep .el-range-editor {
+  @media (max-width: 767px) {
+    .el-range-input {
+      width: 35% !important;
+      font-size: 13px !important;
+    }
+
+    .el-range-separator {
+      width: 15% !important;
+      font-size: 12px !important;
+      text-align: center;
+    }
+
+    .el-range__icon,
+    .el-range__close-icon {
+      font-size: 12px !important;
+    }
+  }
+}
+</style>
+
+<!-- 不带scoped的样式，专门处理日期选择器弹出层 -->
+<style>
+/* 移动端日期选择器弹出层优化 */
+@media (max-width: 767px) {
+  .mobile-date-picker.el-picker-panel {
+    position: fixed !important;
+    left: 10px !important;
+    right: 10px !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    width: auto !important;
+    max-width: none !important;
+    min-width: auto !important;
+    margin: 0 !important;
+    z-index: 9999 !important;
+  }
+
+  .mobile-date-picker.el-date-range-picker {
+    min-width: auto !important;
+    width: 100% !important;
+  }
+
+  .mobile-date-picker .el-picker-panel__body {
+    display: flex !important;
+    flex-direction: column !important;
+    min-width: auto !important;
+    width: 100% !important;
+  }
+
+  .mobile-date-picker .el-picker-panel__content {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+  }
+
+  .mobile-date-picker .el-picker-panel__content .el-date-table {
+    margin: 0 5px 10px 5px !important;
+    width: calc(100% - 10px) !important;
+  }
+
+  .mobile-date-picker .el-date-range-picker__time-header {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 5px !important;
+    padding: 5px !important;
+  }
+
+  .mobile-date-picker .el-picker-panel__sidebar {
+    width: 100% !important;
+    padding: 5px !important;
+  }
+
+  .mobile-date-picker .el-picker-panel__sidebar .el-picker-panel__shortcut {
+    display: inline-block !important;
+    margin: 2px !important;
+    padding: 3px 8px !important;
+    font-size: 12px !important;
+  }
+
+  .mobile-date-picker .el-picker-panel__footer {
+    text-align: center !important;
+    padding: 10px !important;
   }
-</style>
+}
+</style>

src/views/resource/bd.vue

@@ -1,7 +1,7 @@
 <template>
     <div style="padding: 0 20px">
       <div ref="lxHeader">
-        <lx-header icon="md-apps" text="BD详情管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <lx-header icon="md-apps" text="访客须知" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
           <slot>
             <div style="display: flex;align-items: center;">
 

src/views/visit/component/addCommon.vue

@@ -523,10 +523,10 @@
             required: true,
             message: '请输入CDA编号'
           }],
-          cars: [{
+          // cars: [{
-            required: true,
+          //   required: true,
-            message: '请输入车牌号'
+          //   message: '请输入车牌号'
-          }],
+          // }],
           accompany_id: [{
             required: true,
             message: '请选择陪同人'

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: '/admin/',
-  outputDir: '/Users/mac/Documents/朗业/2023/b-bd智能访客系统/bd-fangke/public/admin',
+  outputDir: '../visitor/public/admin',
   assetsDir: 'static',
   css: {
     loaderOptions: { // 向 CSS 相关的 loader 传递选项