添加门岗管理

src/views/doormanManage/cardManage/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="app-container">
+    <div style="margin-bottom:15px;">
+      <el-input v-model="searchKey" placeholder="输入卡号或人员ID搜索" style="width:220px;margin-right:10px;" />
+      <el-button type="primary" @click="search">搜索</el-button>
+      <el-button type="success" @click="openAddDialog">新增卡</el-button>
+    </div>
+
+    <el-table :data="filteredList">
+      <el-table-column prop="cardNo" label="卡号" min-width="150" />
+      <el-table-column prop="employeeNo" label="人员ID" min-width="120" />
+      <el-table-column prop="status" label="状态" min-width="100" />
+      <el-table-column label="操作" min-width="200">
+        <template #default="scope">
+          <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="deleteCard(scope.row.cardNo)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top:10px;">卡总数：{{ cardList.length }}</div>
+
+    <el-dialog :visible.sync="dialogVisible" :title="isEdit?'编辑卡':'新增卡'">
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="卡号"><el-input v-model="form.cardNo" /></el-form-item>
+        <el-form-item label="人员ID"><el-input v-model="form.employeeNo" /></el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="form.status">
+            <el-option label="启用" value="启用" />
+            <el-option label="禁用" value="禁用" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="dialogVisible=false">取消</el-button>
+        <el-button type="primary" @click="saveCard">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Card",
+  data() {
+    return {
+      searchKey:"",
+      dialogVisible:false,
+      isEdit:false,
+      form:{},
+      cardList:[
+        { cardNo:"C10001", employeeNo:"1001", status:"启用" },
+        { cardNo:"C10002", employeeNo:"1002", status:"禁用" }
+      ]
+    }
+  },
+  computed:{
+    filteredList(){
+      if(!this.searchKey) return this.cardList
+      return this.cardList.filter(c=>
+        c.cardNo.includes(this.searchKey) || c.employeeNo.includes(this.searchKey)
+      )
+    }
+  },
+  methods:{
+    search(){ this.$message.success("搜索完成（模拟）") },
+    openAddDialog(){ this.isEdit=false; this.form={}; this.dialogVisible=true },
+    openEditDialog(row){ this.isEdit=true; this.form={...row}; this.dialogVisible=true },
+    saveCard(){
+      if(this.isEdit){
+        let idx=this.cardList.findIndex(c=>c.cardNo===this.form.cardNo)
+        this.cardList.splice(idx,1,this.form)
+      } else {
+        this.cardList.push({...this.form})
+      }
+      this.dialogVisible=false
+      this.$message.success("保存成功（模拟）")
+    },
+    deleteCard(no){
+      this.cardList=this.cardList.filter(c=>c.cardNo!==no)
+      this.$message.error("已删除 卡号="+no)
+    }
+  }
+}
+</script>

src/views/doormanManage/doorRecord/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="app-container">
+    <div style="margin-bottom:15px;">
+      <el-date-picker
+        v-model="dateRange"
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        style="margin-right:10px;"
+      />
+      <el-input v-model="searchKey" placeholder="输入姓名或ID搜索" style="width:200px;margin-right:10px;" />
+      <el-button type="primary" @click="search">查询</el-button>
+    </div>
+
+    <el-table :data="filteredList">
+      <el-table-column prop="time" label="时间" min-width="180" />
+      <el-table-column prop="employeeNo" label="人员ID" min-width="120" />
+      <el-table-column prop="name" label="姓名" min-width="120" />
+      <el-table-column prop="method" label="验证方式" min-width="100" />
+      <el-table-column prop="result" label="结果" min-width="100" />
+    </el-table>
+    <div style="margin-top:10px;">记录总数：{{ recordList.length }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DoorRecord",
+  data(){
+    return{
+      dateRange:[],
+      searchKey:"",
+      recordList:[
+        { time:"2025-09-02 08:32:10", employeeNo:"1001", name:"张三", method:"刷卡", result:"通过" },
+        { time:"2025-09-02 08:33:45", employeeNo:"1002", name:"李四", method:"人脸", result:"通过" },
+        { time:"2025-09-02 08:40:12", employeeNo:"1003", name:"王五", method:"指纹", result:"拒绝" }
+      ]
+    }
+  },
+  computed:{
+    filteredList(){
+      let list=this.recordList
+      if(this.searchKey){
+        list=list.filter(r=>r.name.includes(this.searchKey) || r.employeeNo.includes(this.searchKey))
+      }
+      return list
+    }
+  },
+  methods:{
+    search(){
+      this.$message.success("查询完成（模拟）")
+    }
+  }
+}
+</script>

src/views/doormanManage/faceManage/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="app-container">
+    <div style="margin-bottom:15px;">
+      <el-input v-model="searchKey" placeholder="输入人脸ID或人员ID搜索" style="width:250px;margin-right:10px;" />
+      <el-button type="primary" @click="search">搜索</el-button>
+      <el-button type="success" @click="openAddDialog">新增人脸</el-button>
+      <el-button type="warning" @click="collect">采集人脸</el-button>
+    </div>
+
+    <el-table :data="filteredList">
+      <el-table-column prop="faceId" label="人脸ID" min-width="120" />
+      <el-table-column prop="employeeNo" label="人员ID" min-width="120" />
+      <el-table-column label="照片" min-width="150">
+        <template #default="scope">
+          <el-image :src="scope.row.img" style="width:60px;height:60px" fit="cover"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200">
+        <template #default="scope">
+          <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="deleteFace(scope.row.faceId)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top:10px;">人脸总数：{{ faceList.length }}</div>
+
+    <el-dialog :visible.sync="dialogVisible" :title="isEdit?'编辑人脸':'新增人脸'">
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="人脸ID"><el-input v-model="form.faceId" /></el-form-item>
+        <el-form-item label="人员ID"><el-input v-model="form.employeeNo" /></el-form-item>
+        <el-form-item label="照片">
+          <el-upload action="#" :auto-upload="false" :on-change="handleUpload">
+            <el-button size="small" type="primary">上传图片</el-button>
+          </el-upload>
+          <el-image v-if="form.img" :src="form.img" style="width:80px;height:80px;margin-top:5px"/>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="dialogVisible=false">取消</el-button>
+        <el-button type="primary" @click="saveFace">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Face",
+  data() {
+    return {
+      searchKey:"",
+      dialogVisible:false,
+      isEdit:false,
+      form:{},
+      faceList:[
+        { faceId:"IMG001", employeeNo:"1001", img:"https://via.placeholder.com/60" },
+        { faceId:"IMG002", employeeNo:"1002", img:"https://via.placeholder.com/60" }
+      ]
+    }
+  },
+  computed:{
+    filteredList(){
+      if(!this.searchKey) return this.faceList
+      return this.faceList.filter(f=>
+        f.faceId.includes(this.searchKey) || f.employeeNo.includes(this.searchKey)
+      )
+    }
+  },
+  methods:{
+    search(){ this.$message.success("搜索完成（模拟）") },
+    openAddDialog(){ this.isEdit=false; this.form={}; this.dialogVisible=true },
+    openEditDialog(row){ this.isEdit=true; this.form={...row}; this.dialogVisible=true },
+    saveFace(){
+      if(this.isEdit){
+        let idx=this.faceList.findIndex(f=>f.faceId===this.form.faceId)
+        this.faceList.splice(idx,1,this.form)
+      } else {
+        this.faceList.push({...this.form})
+      }
+      this.dialogVisible=false
+      this.$message.success("保存成功（模拟）")
+    },
+    deleteFace(id){
+      this.faceList=this.faceList.filter(f=>f.faceId!==id)
+      this.$message.error("已删除 人脸ID="+id)
+    },
+    collect(){
+      this.$message.success("人脸采集成功（模拟）")
+    },
+    handleUpload(file){
+      this.form.img=URL.createObjectURL(file.raw)
+    }
+  }
+}
+</script>

src/views/doormanManage/peopleManage/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="app-container">
+    <div style="margin-bottom:15px;">
+      <el-input v-model="searchKey" placeholder="输入姓名或ID搜索" style="width:200px;margin-right:10px;" />
+      <el-button type="primary" @click="search">搜索</el-button>
+      <el-button type="success" @click="openAddDialog">新增人员</el-button>
+    </div>
+
+    <el-table :data="filteredList">
+      <el-table-column prop="employeeNo" label="人员ID" min-width="120" />
+      <el-table-column prop="name" label="姓名" min-width="120" />
+      <el-table-column prop="dept" label="部门" min-width="150" />
+      <el-table-column prop="phone" label="电话" min-width="150" />
+      <el-table-column label="操作" min-width="200">
+        <template #default="scope">
+          <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="deletePerson(scope.row.employeeNo)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div style="margin-top:10px;">人员总数：{{ personList.length }}</div>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog :visible.sync="dialogVisible" :title="isEdit?'编辑人员':'新增人员'">
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="ID"><el-input v-model="form.employeeNo" /></el-form-item>
+        <el-form-item label="姓名"><el-input v-model="form.name" /></el-form-item>
+        <el-form-item label="部门"><el-input v-model="form.dept" /></el-form-item>
+        <el-form-item label="电话"><el-input v-model="form.phone" /></el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="dialogVisible=false">取消</el-button>
+        <el-button type="primary" @click="savePerson">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Person",
+  data() {
+    return {
+      searchKey: "",
+      dialogVisible: false,
+      isEdit: false,
+      form: {},
+      personList: [
+        { employeeNo: "1001", name: "张三", dept: "研发部", phone: "13800000001" },
+        { employeeNo: "1002", name: "李四", dept: "人事部", phone: "13800000002" }
+      ]
+    }
+  },
+  computed: {
+    filteredList() {
+      if (!this.searchKey) return this.personList
+      return this.personList.filter(p =>
+        p.name.includes(this.searchKey) || p.employeeNo.includes(this.searchKey)
+      )
+    }
+  },
+  methods: {
+    search() { this.$message.success("搜索完成（模拟）") },
+    openAddDialog() { this.isEdit=false; this.form={}; this.dialogVisible=true },
+    openEditDialog(row) { this.isEdit=true; this.form={...row}; this.dialogVisible=true },
+    savePerson() {
+      if(this.isEdit){
+        let idx=this.personList.findIndex(p=>p.employeeNo===this.form.employeeNo)
+        this.personList.splice(idx,1,this.form)
+      } else {
+        this.personList.push({...this.form})
+      }
+      this.dialogVisible=false
+      this.$message.success("保存成功（模拟）")
+    },
+    deletePerson(id) {
+      this.personList=this.personList.filter(p=>p.employeeNo!==id)
+      this.$message.error("已删除 ID="+id)
+    }
+  }
+}
+</script>

src/views/doormanManage/remoteControlDoor/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="app-container">
+    <div style="margin-bottom:15px;">
+      <el-button type="success" @click="openDoor">远程开门</el-button>
+      <el-button type="danger" @click="closeDoor">远程关门</el-button>
+      <el-button type="warning" @click="timedOpen">定时开关</el-button>
+    </div>
+    <el-table :data="logList">
+      <el-table-column prop="time" label="时间" min-width="120" />
+      <el-table-column prop="action" label="操作" min-width="120" />
+      <el-table-column prop="result" label="结果" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RemoteDoor",
+  data(){
+    return{
+      logList:[
+        { time:"2025-09-02 09:00:01", action:"开门", result:"成功" },
+        { time:"2025-09-02 09:05:01", action:"关门", result:"成功" }
+      ]
+    }
+  },
+  methods:{
+    openDoor(){
+      this.logList.unshift({time:new Date().toLocaleString(), action:"开门", result:"成功"})
+      this.$message.success("远程开门（模拟）")
+    },
+    closeDoor(){
+      this.logList.unshift({time:new Date().toLocaleString(), action:"关门", result:"成功"})
+      this.$message.error("远程关门（模拟）")
+    },
+    timedOpen(){
+      this.$message.info("定时开关设置成功（模拟）")
+    }
+  }
+}
+</script>