系统内容调整

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+  <link rel="icon" href="<static/setting/favicon.ico" />
   <script src="js/config.js?"></script>
   <script src="js/station.js"></script>
 </head>

public/js/config.js

@@ -30,7 +30,7 @@ const STATION_LIST = [
 /**
  * 页面内标题 已生效
  */
-const SYSTEM_TITLE = '托克托压气站人员进出站登记终端'
+const SYSTEM_TITLE = '托克托作业区人员登记终端'
 /**
  * 设置浏览器标题 已生效
  */
@@ -137,7 +137,8 @@ const MQTT_CONFIG = {
 }
 //后台管理根路径
 const ISMSAdminWeb = {
-  path: `https://${window.location.hostname}:8080/#/`,
+  path: `https://10.0.0.201:8080/#/`,
+  // path: `https://${window.location.hostname}:8080/#/`,
 }
 
 const CURRENT_STATION = {

src/API/custom.js

@@ -102,3 +102,37 @@ export const savePerson = data =>
     data,
     notShowLoading: true,
   })
+//人员绑定标签信息
+export const bindingCard = data =>
+  $http({
+    method: 'post',
+    url: '/System/Person/BindingCard',
+    data,
+    notShowLoading: true,
+  })
+//人员进出站绑卡/还卡记录信息写入
+export const bindAndUnbindrecord = data =>
+  $http({
+    method: 'post',
+    url: '/CustomPage/Page/Insert',
+    data,
+    notShowLoading: true,
+  })
+
+//人员进出站变量设置
+export const personComingTagUpdate = data =>
+  $http({
+    method: 'post',
+    url: '/DataCommunicationManage/Internal/Tag/Update',
+    data,
+    notShowLoading: true,
+  })
+
+//人员进出站变量驱动刷新
+export const RefreshDriver = data =>
+  $http({
+    method: 'post',
+    url: '/DataCommunicationManage/Internal/Conn/RefreshDriver',
+    data,
+    notShowLoading: true,
+  })

src/views/basePage/index.vue

@@ -10,7 +10,7 @@
               type="primary "
               size="medium "
               @click="handleClick(1)"
-              >内部人员登记</el-button
+              >访客人员登记</el-button
             >
           </div>
           <div class="infomation_button">
@@ -19,7 +19,7 @@
               type="primary "
               size="medium "
               @click="handleClick(2)"
-              >外来人员登记</el-button
+              >施工人员登记</el-button
             >
           </div>
           <div class="infomation_button">

src/views/components/baseHeader/left.vue

@@ -111,14 +111,25 @@ export default {
           name: "首页",
           path: "/basePage",
         },
+        {
+          id: "1",
+          name: "退出登记",
+          path: "/basePage",
+        },
+        // {
+        //   id: "2",
+        //   name: "关闭弹窗",
+        //   path: "/basePage",
+        //   script:"this.$store.dispatch('globalConfig/setAlarmAudio', {show: false,alarmType: 'all',});"
+        // },
         // {
         //   id: "2",
-        //   name: "人员登记",
-        //   path: "/recognize",
+        //   name: "绑卡记录",
+        //   path: "/Page1?path=custompage%2Fpage?pageId=839895523707068416",
         // },
         // {
         //   id: "3",
-        //   name: "离场还卡",
+        //   name: "还卡记录",
         //   path: "/leave",
         // },
       ],
@@ -156,7 +167,7 @@ export default {
     },
   },
   created() {
-    this.getMenuList();
+    // this.getMenuList();
   },
   mounted() {
     this.title = SYSTEM_TITLE;

src/views/components/dialog/RiskTipDialog copy.vue

@@ -0,0 +1,599 @@
+<template>
+  <vue-drag-resize
+    id="drag"
+    class="drag-container"
+    :isActive="true"
+    w="auto"
+    h="auto"
+    :x="left"
+    :y="top"
+    :z="zIndex"
+    :isResizable="false"
+    :parent-limitation="true"
+    v-if="dialogConfig.show"
+    @clicked="setZIndex(dialogConfig.dialogId)"
+  >
+    <div
+      class="slot-container"
+      :style="{ width: width + 'rem', height: height + 'rem' }"
+    >
+      <div class="bg-container">
+        <!-- 拼接背景图案 -->
+        <img
+          class="leftTop"
+          :src="require('@/assets/imgs/dialog/base/pop_bg1@2x.png')"
+          alt=""
+        />
+        <img
+          class="rightTop"
+          :src="require('@/assets/imgs/dialog/base/pop_bg2@2x.png')"
+          alt=""
+        />
+        <img
+          class="leftBottom"
+          :src="require('@/assets/imgs/dialog/base/pop_bg4@2x.png')"
+          alt=""
+        />
+        <img
+          class="rightBottom"
+          :src="require('@/assets/imgs/dialog/base/pop_bg3@2x.png')"
+          alt=""
+        />
+        <img
+          class="bottomCenter"
+          :src="require('@/assets/imgs/dialog/base/img_guang@2x.png')"
+          alt=""
+        />
+        <div
+          class="topBorder"
+          :style="{
+            width:
+              width - (2.182292 - 0.041667) - (0.317708 - 0.041667) + 'rem',
+            right: 0.317708 - 0.041667 + 'rem',
+          }"
+        ></div>
+        <div
+          class="rightBorder"
+          :style="{
+            height:
+              height - (0.4375 - 0.239583) - (0.390625 - 0.177083) + 'rem',
+            top: 0.4375 - 0.239583 + 'rem',
+          }"
+        ></div>
+        <div
+          class="bottomBorder"
+          :style="{
+            width:
+              width - (0.317708 - 0.041667) - (0.317708 - 0.041667) + 'rem',
+            right: 0.317708 - 0.041667 + 'rem',
+          }"
+        ></div>
+        <div
+          class="leftBorder"
+          :style="{
+            height:
+              height - (0.4375 - 0.239583) - (0.390625 - 0.177083) + 'rem',
+            top: 0.4375 - 0.239583 + 'rem',
+          }"
+        ></div>
+        <div
+          class="center-bg"
+          :style="{
+            width:
+              width - (0.260417 - 0.041667) - (0.260417 - 0.041667) + 'rem',
+            height:
+              height - (0.4375 - 0.239583) - (0.390625 - 0.177083) + 'rem',
+            top: 0.4375 - 0.239583 + 'rem',
+            right: 0.260417 - 0.041667 + 'rem',
+          }"
+        ></div>
+      </div>
+      <div class="dialog-content">
+        <!-- 弹窗标题 -->
+        <div class="title-box">
+          <div class="dialog-title">{{ dialogConfig.title }}</div>
+          <div class="dialog-close" @click="handleClose">
+            <img
+              :src="require('@/assets/imgs/dialog/icon_guanbi2@2x.png')"
+              alt=""
+            />
+          </div>
+        </div>
+        <!-- 绑卡 -->
+        <div
+          class="main-content"
+          style="height: calc(100% - 55px)"
+          v-if="dialogConfig.type == 1"
+        >
+          <div class="content_info" v-if="enable">{{ info }}</div>
+          <div class="content_info" v-else>
+            <div>
+              将卡号为“{{ recognizedNumber }}”卡片,同{{
+                dialogConfig.data.name
+              }}人员进行绑定!
+            </div>
+          </div>
+          <div class="btn-box" v-if="!enable">
+            <el-button
+              class="btn-cancel"
+              style="width: 100px; height: 60px; font-size: x-large"
+              type="primary "
+              size="medium "
+              @click="handleClose"
+              >取消</el-button
+            >
+            <el-button
+              class="btn-handle"
+              style="width: 100px; height: 60px; font-size: x-large"
+              type="primary "
+              size="medium "
+              @click="handleDeal"
+              >确认</el-button
+            >
+          </div>
+        </div>
+        <!-- 退卡 -->
+        <div
+          class="main-content"
+          style="height: calc(100% - 55px)"
+          v-if="dialogConfig.type == 2"
+        >
+          <div class="content_info" v-if="enable">{{ info }}</div>
+          <div class="content_info" v-else>
+            <div>
+              将卡号为“{{ person.cardNo }}”卡片,同{{
+                person.name ? person.name : ""
+              }}人员解除绑定!
+            </div>
+          </div>
+          <div class="btn-box" v-if="!enable">
+            <el-button
+              class="btn-cancel"
+              style="width: 100px; height: 60px; font-size: x-large"
+              type="primary "
+              size="medium "
+              @click="handleClose"
+              >关闭</el-button
+            >
+            <el-button
+              class="btn-handle"
+              style="width: 100px; height: 60px; font-size: x-large"
+              type="primary "
+              size="medium "
+              @click="handleDeal"
+              >确认</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </vue-drag-resize>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getPersonByCardNo, savePerson } from "@/API/custom";
+import Dayjs from "dayjs";
+export default {
+  name: "RiskTipDialog",
+  props: {
+    dialogConfig: {
+      type: Object,
+      default: () => {
+        return {
+          dialogId: "",
+          show: false, //是否显示
+          title: "新窗口-请指定URL",
+          width: 960, //px宽度
+          height: 540, //px高度
+          left: 0, //
+          top: 0, //
+          bottom: 0, //
+          right: 0, //
+          center: true, //是否居中定位
+          type: 1,
+          data: {},
+          zIndex: 5,
+          dataIndex: 0,
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0,
+      enable: true,
+      recognizedNumber: "",
+      person: { name: "" },
+      info: "刷卡识别。。。请刷卡",
+    };
+  },
+  watch: {
+    "dialogConfig.show": {
+      handler(newVal) {
+        // 弹窗打开关闭时，更新全局变量
+        if (newVal) {
+          console.log("将要打开" + this.dialogConfig.dialogId);
+          setTimeout(() => {
+            this.recognizedNumber = "2652310818"; //2652310818
+          }, 1000);
+        } else {
+          this.$store.dispatch("dialog/removeRiskDialog", this.dialogConfig);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    "dialogConfig.data": {
+      handler(newVal) {
+        // 弹窗打开关闭时，更新全局变量
+        console.log("将要绑定相关信息：", this.dialogConfig);
+      },
+      deep: true,
+      immediate: true,
+    },
+    recognizedNumber: {
+      //深度监听，可监听到对象、数组的变化
+      handler(newVal) {
+        console.log("获取人员信息");
+        if (newVal.length > 2) {
+          setTimeout(() => {
+            this.getPersonByRFID();
+          }, 2000);
+        }
+      },
+      deep: true,
+    },
+    person: {
+      //深度监听，可监听到对象、数组的变化
+      handler(newVal) {
+        console.log("人员信息自检");
+        this.checkrecognizedNumberBind();
+      },
+      deep: true,
+    },
+  },
+  created() {
+    this.pxToRem();
+  },
+  mounted() {
+    window.addEventListener("resize", this.pxToRem);
+  },
+  computed: {
+    ...mapGetters(["riskDialogs", "alarmAudio"]),
+    zIndex() {
+      const config = this.riskDialogs.find(
+        (e) => e.dialogId === this.dialogConfig?.dialogId
+      );
+      return config?.zIndex || 1;
+    },
+    eventTime() {
+      return Dayjs(this.dialogConfig.data?.eventTime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+    },
+  },
+  methods: {
+    // 将传入的px值转换为rem值
+    pxToRem() {
+      // 当前窗口大小px值
+      let width = document.documentElement.clientWidth;
+      let height = document.documentElement.clientHeight;
+      // console.log("client", width, height);
+      // 当前1rem的值
+      let rem = width / 10;
+      // console.log(rem);
+      // 通过默认 1rem=192 计算得出当前窗口大小rem值
+      this.width = this.dialogConfig.width / 192;
+      this.height = this.dialogConfig.height / 192;
+      // console.log("dialog", this.width, this.height);
+      // 通过当前的1rem值计算出窗口初始的定位px值
+      if (this.dialogConfig.center) {
+        this.left = (width - this.width * rem) / 2;
+        this.top = (height - this.height * rem) / 2;
+      } else {
+        if (this.dialogConfig.bottom) {
+          this.top =
+            height -
+            ((this.dialogConfig.bottom + this.dialogConfig.height) / 192) * rem;
+        } else {
+          this.top = (this.dialogConfig.top / 192) * rem;
+        }
+        if (this.dialogConfig.right) {
+          this.left =
+            width -
+            ((this.dialogConfig.right + this.dialogConfig.width) / 192) * rem;
+        } else {
+          this.left = (this.dialogConfig.left / 192) * rem;
+        }
+      }
+      // console.log('pos', this.left, this.top)
+      // console.log(this.top);
+    },
+    async getPersonByRFID() {
+      try {
+        const res = await getPersonByCardNo({
+          cardNo: this.recognizedNumber,
+        });
+        if (res.code === 20000) {
+          this.enable = false; //切换内容
+          this.person = res.data.content ? res.data.content[0] : {};
+          console.log("当前人员：", res, this.person);
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    async savePersonInfo(person) {
+      try {
+        const res = await savePerson(person);
+        if (res.code === 20000) {
+          console.log("当前人员信息保存：", person);
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    checkrecognizedNumberBind() {
+      if (this.dialogConfig.type == 1) {
+        if (this.person.cardNo && this.person.cardNo.length > 0) {
+          console.log("已绑定到人员！");
+          this.enable = true;
+          this.info = "卡片已绑定人员，请换刷卡片";
+          setTimeout(() => {
+            this.recognizedNumber = "123333333";
+          }, 2000);
+        } else {
+          console.log("即将绑定");
+          //绑卡逻辑
+        }
+      }
+      if (this.dialogConfig.type == 2) {
+        if (this.person) {
+          if (this.person.cardNo && this.person.cardNo.length > 0) {
+            console.log("即将解绑");
+            //退卡逻辑
+          } else {
+            console.log("未绑定人员！");
+            this.enable = true;
+          }
+        } else {
+          this.enable = true;
+          this.info = "卡片未绑定人员，请换刷卡片";
+        }
+      }
+    },
+    handleClose() {
+      this.dialogConfig.show = false;
+      this.enable = true;
+      //this.$store.dispatch('home/setNavActive', this.dialogConfig.title)
+      this.$store.dispatch("globalConfig/setAlarmAudio", {
+        show: false,
+        alarmType: "all",
+      });
+    },
+    handleDeal() {
+      try {
+        if (this.dialogConfig.type == 1) {
+          //绑卡
+          this.dialogConfig.data.cardNo = this.recognizedNumber;
+          setTimeout(() => {
+            // this.savePersonInfo(this.dialogConfig.data);
+            console.log("绑定", this.dialogConfig.data);
+          }, 200);
+          //回传信息
+          this.$store.dispatch("dialog/setPersonInfo", {
+            index: this.dialogConfig.dataIndex,
+            data: this.dialogConfig.data,
+            type: this.dialogConfig.type,
+          });
+          //参数回调
+          this.enable = true;
+          this.info = "刷卡识别中。。。请刷卡";
+          this.handleClose();
+        }
+        if (this.dialogConfig.type == 2) {
+          //解绑
+          this.person.cardNo = "";
+          setTimeout(() => {
+            // this.savePersonInfo(this.person);
+            console.log("解绑", this.person);
+          }, 200);
+          this.enable = true;
+          this.info = "刷卡识别中。。。请刷卡";
+          // setTimeout(() => {
+          //   this.recognizedNumber = "1231231233";
+          // }, 2000);
+          // setTimeout(() => {
+          //   this.recognizedNumber = "1423885022";
+          // }, 2000);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    setZIndex(val) {
+      // 点击时根据id,动态改变zindex值
+      this.$store.dispatch("dialog/setDialogZIndex", val);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.drag-container {
+  box-shadow: 0 0 0px rgba(255, 255, 255, 0), 0 0 0px rgba(255, 255, 255, 0);
+  animation: glow 2s infinite;
+  pointer-events: auto;
+  .slot-container {
+    position: relative;
+    .bg-container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      // (0.317708-0.041667)
+      img {
+        position: absolute;
+        &.leftTop {
+          width: 2.182292rem /* 419/192 */;
+          height: 0.4375rem /* 84/192 */;
+          top: -0.239583rem /* 46/192 */;
+          left: -0.041667rem /* 8/192 */;
+        }
+        &.rightTop {
+          width: 0.317708rem /* 61/192 */;
+          height: 0.4375rem /* 84/192 */;
+          top: -0.239583rem /* 46/192 */;
+          right: -0.041667rem /* 8/192 */;
+        }
+        &.leftBottom {
+          width: 0.317708rem /* 61/192 */;
+          height: 0.390625rem /* 75/192 */;
+          bottom: -0.177083rem /* 34/192 */;
+          left: -0.041667rem /* 8/192 */;
+        }
+        &.rightBottom {
+          width: 0.317708rem /* 61/192 */;
+          height: 0.390625rem /* 75/192 */;
+          bottom: -0.177083rem /* 34/192 */;
+          right: -0.041667rem /* 8/192 */;
+        }
+        &.bottomCenter {
+          width: 1.442708rem /* 277/192 */;
+          height: 0.359375rem /* 69/192 */;
+          bottom: -0.177083rem /* 34/192 */;
+          left: 50%;
+          transform: translate(-50%, 0);
+        }
+      }
+      .topBorder {
+        // width: 100%;
+        height: 0.4375rem /* 84/192 */;
+        position: absolute;
+        top: -0.239583rem /* 46/192 */;
+        background-image: url(~@/assets/imgs/dialog/base/pop_bg5@2x.png);
+        background-repeat: repeat-x;
+        background-size: contain;
+      }
+      .bottomBorder {
+        // width: 100%;
+        height: 0.390625rem /* 75/192 */;
+        position: absolute;
+        bottom: -0.177083rem /* 34/192 */;
+        background-image: url(~@/assets/imgs/dialog/base/pop_bg6@2x.png);
+        background-repeat: repeat-x;
+        background-size: contain;
+      }
+      .leftBorder {
+        width: 0.260417rem /* 50/192 */;
+        // height: 0.390625rem /* 75/192 */;
+        position: absolute;
+        left: -0.041667rem /* 8/192 */;
+        background-image: url(~@/assets/imgs/dialog/base/pop_bg7@2x.png);
+        background-repeat: repeat-y;
+        background-size: contain;
+      }
+      .rightBorder {
+        width: 0.260417rem /* 50/192 */;
+        // height: 0.390625rem /* 75/192 */;
+        position: absolute;
+        right: -0.041667rem /* 8/192 */;
+        background-image: url(~@/assets/imgs/dialog/base/pop_bg8@2x.png);
+        background-repeat: repeat-y;
+        background-size: contain;
+      }
+      .center-bg {
+        position: absolute;
+        // top: 50%;
+        // left: 50%;
+        // transform: translate(-50%, -50%);
+        background-image: url(~@/assets/imgs/dialog/base/pop_bg9@2x.png);
+        background-repeat: repeat;
+        background-size: contain;
+      }
+    }
+    .dialog-content {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      padding: 0 0.104167rem /* 20/192 */;
+      .title-box {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 0.166667rem /* 32/192 */;
+        line-height: 0.166667rem /* 32/192 */;
+        color: #fff;
+        .dialog-title {
+          font-size: 0.15rem /* 18/192 */;
+          margin-top: -0.053333rem /* 16/192 */;
+        }
+        .dialog-close {
+          width: 0.09375rem /* 18/192 */;
+          height: 0.09375rem /* 18/192 */;
+          position: absolute;
+          top: 0.020833rem /* 4/192 */;
+          right: 0.052083rem /* 10/192 */;
+          cursor: pointer;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .main-content {
+        padding-top: 10px;
+        .content_info {
+          text-align: center;
+          font-size: 0.15rem;
+          margin-top: 60px;
+          color: #fff;
+        }
+        ::v-deep .el-form-item__label {
+          color: #fff;
+        }
+        .btn-box {
+          width: 100%;
+          height: 60px;
+          text-align: center;
+          position: absolute;
+          bottom: 40px;
+          left: 50%;
+          transform: translate(-50%, 0);
+          .el-button {
+            width: 100px;
+            height: 32px;
+            box-sizing: border-box;
+            margin-top: 0.015625rem /* 3/192 */;
+            color: #fff;
+            padding: 0;
+            border-color: #5bd6ff;
+            // border-radius: 0;
+            &:hover {
+              border-color: #ccc;
+            }
+          }
+          .btn-handle.el-button {
+            background: rgba(0, 159, 221, 0.8);
+          }
+          .btn-cancel.el-button {
+            background: rgba(7, 51, 121, 0.1);
+          }
+        }
+      }
+    }
+    .contentiframe {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      border: 0;
+    }
+  }
+}
+.vdr.active:before {
+  outline: 0;
+}
+</style>

src/views/components/dialog/RiskTipDialog.vue

@@ -2,13 +2,14 @@
   <vue-drag-resize
     id="drag"
     class="drag-container"
-    :isActive="true"
     w="auto"
     h="auto"
     :x="left"
     :y="top"
     :z="zIndex"
+    :isActive="false"
     :isResizable="false"
+    :isDraggable="false"
     :parent-limitation="true"
     v-if="dialogConfig.show"
     @clicked="setZIndex(dialogConfig.dialogId)"
@@ -105,15 +106,26 @@
           style="height: calc(100% - 55px)"
           v-if="dialogConfig.type == 1"
         >
-          <div class="content_info" v-if="enable">{{ info }}</div>
-          <div class="content_info" v-else>
-            <div>
-              将卡号为“{{ recognizedNumber }}”卡片,同{{
-                dialogConfig.data.name
-              }}人员进行绑定!
+          <div class="content_info">
+            <el-input
+              ref="myInput"
+              v-model="recognizedNumber"
+              rows="1"
+              type="textarea"
+              style="
+                font-size: 30px;
+                font-family: 'Microsoft YaHei';
+                width: auto;
+              "
+            />
+            <div style="margin-top: 10px" v-if="enable">{{ info }}</div>
+            <div style="margin-top: 10px" v-else>
+              将卡号为“{{
+                recognizedNumber ? recognizedNumber : "--"
+              }}”卡片,同{{ dialogConfig.data.name }}人员进行绑定!
             </div>
           </div>
-          <div class="btn-box" v-if="!enable">
+          <div class="btn-box">
             <el-button
               class="btn-cancel"
               style="width: 100px; height: 60px; font-size: x-large"
@@ -138,15 +150,21 @@
           style="height: calc(100% - 55px)"
           v-if="dialogConfig.type == 2"
         >
-          <div class="content_info" v-if="enable">{{ info }}</div>
-          <div class="content_info" v-else>
-            <div>
-              将卡号为“{{ person.cardNo }}”卡片,同{{
-                person.name ? person.name : ""
-              }}人员解除绑定!
-            </div>
+          <div class="content_info">
+            <el-input
+              ref="myInput"
+              v-model="recognizedNumber"
+              rows="1"
+              type="textarea"
+              style="
+                font-size: 30px;
+                font-family: 'Microsoft YaHei';
+                width: auto;
+              "
+            />
+            <div style="margin-top: 10px">{{ info }}</div>
           </div>
-          <div class="btn-box" v-if="!enable">
+          <div class="btn-box">
             <el-button
               class="btn-cancel"
               style="width: 100px; height: 60px; font-size: x-large"
@@ -172,7 +190,11 @@
 
 <script>
 import { mapGetters } from "vuex";
-import { getPersonByCardNo, savePerson } from "@/API/custom";
+import {
+  getPersonByCardNo,
+  savePerson,
+  bindAndUnbindrecord,
+} from "@/API/custom";
 import Dayjs from "dayjs";
 export default {
   name: "RiskTipDialog",
@@ -181,7 +203,7 @@ export default {
       type: Object,
       default: () => {
         return {
-          dialogId: "",
+          dialogId: "10000",
           show: false, //是否显示
           title: "新窗口-请指定URL",
           width: 960, //px宽度
@@ -193,7 +215,7 @@ export default {
           center: true, //是否居中定位
           type: 1,
           data: {},
-          zIndex: 5,
+          zIndex: 10000,
           dataIndex: 0,
         };
       },
@@ -207,8 +229,10 @@ export default {
       left: 0,
       enable: true,
       recognizedNumber: "",
+      unbindNumber: "",
       person: { name: "" },
-      info: "刷卡识别。。。请刷卡",
+      info: "刷卡识别中。。。请刷卡",
+      response: {},
     };
   },
   watch: {
@@ -217,9 +241,12 @@ export default {
         // 弹窗打开关闭时，更新全局变量
         if (newVal) {
           console.log("将要打开" + this.dialogConfig.dialogId);
-          setTimeout(() => {
-            this.recognizedNumber = "2652310818"; //2652310818
-          }, 1000);
+          // 强制将焦点返回到el-input
+          this.$nextTick(() => {
+            if (this.$refs.myInput) {
+              this.$refs.myInput.focus();
+            }
+          });
         } else {
           this.$store.dispatch("dialog/removeRiskDialog", this.dialogConfig);
         }
@@ -238,11 +265,12 @@ export default {
     recognizedNumber: {
       //深度监听，可监听到对象、数组的变化
       handler(newVal) {
+        this.recognizedNumber = newVal.replace(/(\r\n|\n|\r)/gm, "");
         console.log("获取人员信息");
         if (newVal.length > 2) {
           setTimeout(() => {
             this.getPersonByRFID();
-          }, 2000);
+          }, 500);
         }
       },
       deep: true,
@@ -261,6 +289,31 @@ export default {
   },
   mounted() {
     window.addEventListener("resize", this.pxToRem);
+    // 添加触摸事件监听
+    this.$el.addEventListener("touchstart", this.handleTouchStart, {
+      passive: false,
+    });
+    document.addEventListener("touchmove", this.handleTouchMove, {
+      passive: false,
+    });
+    document.addEventListener("touchend", this.handleTouchEnd, {
+      passive: false,
+    });
+    // 为按钮添加额外的触摸事件支持
+    this.$nextTick(() => {
+      const buttons = this.$el.querySelectorAll(".el-button, .dialog-close");
+      buttons.forEach((btn) => {
+        btn.addEventListener(
+          "touchstart",
+          (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            btn.click();
+          },
+          { passive: false }
+        );
+      });
+    });
   },
   computed: {
     ...mapGetters(["riskDialogs", "alarmAudio"]),
@@ -320,19 +373,71 @@ export default {
         });
         if (res.code === 20000) {
           this.enable = false; //切换内容
-          this.person = res.data.content ? res.data.content[0] : {};
+          this.person = res.data.content ? res.data.content[0] : { cardNo: 0 };
           console.log("当前人员：", res, this.person);
+        } else {
+          this.person = { cardNo: 0 };
         }
       } catch (err) {
-        console.log(err);
+        console.log(err, 123);
       }
     },
     async savePersonInfo(person) {
       try {
         const res = await savePerson(person);
-        if (res.code === 20000) {
-          console.log("当前人员信息保存：", person);
+        this.response = res;
+        if (this.dialogConfig.type == 1) {
+          console.log("绑定成功");
+          this.bindRecord(person);
+        }
+        if (this.dialogConfig.type == 2) {
+          console.log("解绑成功");
+          this.unbindRecord(person);
         }
+      } catch (err) {
+        console.log(err);
+        console.log("绑定失败");
+        this.enable = true;
+        this.info = err.msg;
+        setTimeout(() => {
+          this.recognizedNumber = "";
+        }, 2000);
+      }
+    },
+    async bindRecord(person) {
+      try {
+        console.log("绑定记录基础信息：", person);
+        const record = {
+          field001: person.name, //姓名
+          field002: person.typeName, //人员类型
+          field003: person.telephone, //联系方式
+          field004: person.cardNo, //卡号
+          field005: Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), //绑卡时间
+          field006: person.cause, //进站目的
+          pageId: "839895523707068416", //绑卡
+        };
+        const res = await bindAndUnbindrecord(record);
+        console.log("绑定记录反馈信息：", res);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    async unbindRecord(person) {
+      try {
+        console.log("解绑记录基础信息：", person);
+        const record = {
+          field001: person.name, //姓名
+          field002: person.typeName, //人员类型
+          field003: person.telephone, //联系方式
+          field004: this.unbindNumber, //卡号
+          field005: Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), //还卡时间
+          pageId: "839895640526823424", //还卡
+        };
+        const res = await bindAndUnbindrecord(record);
+        console.log("解绑记录反馈信息：", res);
+        setTimeout(() => {
+          this.unbindNumber = "";
+        }, 500);
       } catch (err) {
         console.log(err);
       }
@@ -344,18 +449,31 @@ export default {
           this.enable = true;
           this.info = "卡片已绑定人员，请换刷卡片";
           setTimeout(() => {
-            this.recognizedNumber = "123333333";
-          }, 2000);
+            this.recognizedNumber = "";
+          }, 500);
         } else {
           console.log("即将绑定");
           //绑卡逻辑
+          setTimeout(() => {
+            this.handleDeal();
+          }, 1000);
         }
       }
       if (this.dialogConfig.type == 2) {
         if (this.person) {
           if (this.person.cardNo && this.person.cardNo.length > 0) {
             console.log("即将解绑");
+            this.enable = false;
+            this.info =
+              "将卡号为" +
+              this.recognizedNumber +
+              "卡片,同" +
+              this.person.name +
+              "人员解除绑定!";
             //退卡逻辑
+            // setTimeout(() => {
+            //   this.handleDeal();
+            // }, 1000);
           } else {
             console.log("未绑定人员！");
             this.enable = true;
@@ -363,10 +481,14 @@ export default {
         } else {
           this.enable = true;
           this.info = "卡片未绑定人员，请换刷卡片";
+          setTimeout(() => {
+            this.recognizedNumber = "";
+          }, 500);
         }
       }
     },
     handleClose() {
+      this.recognizedNumber = "";
       this.dialogConfig.show = false;
       this.enable = true;
       //this.$store.dispatch('home/setNavActive', this.dialogConfig.title)
@@ -380,9 +502,16 @@ export default {
         if (this.dialogConfig.type == 1) {
           //绑卡
           this.dialogConfig.data.cardNo = this.recognizedNumber;
+          this.dialogConfig.data.accessControlIds = [
+            "789185403352522752", // 进站识别
+            "789185626355277824", // 出站识别
+            "833420345783361536",
+            "830088938663190528",
+            "833426645288230912",
+          ];
+          console.log("绑定", this.dialogConfig.data);
           setTimeout(() => {
-            // this.savePersonInfo(this.dialogConfig.data);
-            console.log("绑定", this.dialogConfig.data);
+            this.savePersonInfo(this.dialogConfig.data);
           }, 200);
           //回传信息
           this.$store.dispatch("dialog/setPersonInfo", {
@@ -398,18 +527,17 @@ export default {
         if (this.dialogConfig.type == 2) {
           //解绑
           this.person.cardNo = "";
+          this.unbindNumber = this.recognizedNumber;
+          this.person.accessControlIds = [];
           setTimeout(() => {
-            // this.savePersonInfo(this.person);
-            console.log("解绑", this.person);
+            this.savePersonInfo(this.person);
+            // console.log("解绑", this.person);
           }, 200);
-          this.enable = true;
-          this.info = "刷卡识别中。。。请刷卡";
-          // setTimeout(() => {
-          //   this.recognizedNumber = "1231231233";
-          // }, 2000);
-          // setTimeout(() => {
-          //   this.recognizedNumber = "1423885022";
-          // }, 2000);
+          setTimeout(() => {
+            this.recognizedNumber = "";
+            this.enable = true;
+            this.info = "刷卡识别中。。。请刷卡";
+          }, 1000);
         }
       } catch (error) {
         console.log(error);
@@ -419,12 +547,66 @@ export default {
       // 点击时根据id,动态改变zindex值
       this.$store.dispatch("dialog/setDialogZIndex", val);
     },
+    // 添加触摸事件处理方法
+    handleTouchStart(e) {
+      if (e.touches.length === 1) {
+        this.handleDown({
+          clientX: e.touches[0].clientX,
+          clientY: e.touches[0].clientY,
+          target: e.target,
+        });
+        e.preventDefault();
+      }
+    },
+    handleTouchMove(e) {
+      if (e.touches.length === 1) {
+        this.handleMove({
+          clientX: e.touches[0].clientX,
+          clientY: e.touches[0].clientY,
+        });
+        e.preventDefault();
+      }
+    },
+    handleTouchEnd() {
+      this.handleUp();
+    },
+    // 修改触摸事件处理方法
+    handleTouchStart(e) {
+      const target = e.target;
+      // 如果是按钮元素，直接触发点击事件
+      if (
+        target.classList.contains("el-button") ||
+        target.closest(".el-button") ||
+        target.classList.contains("dialog-close")
+      ) {
+        target.click();
+        e.preventDefault();
+        return;
+      }
+
+      if (e.touches.length === 1) {
+        this.handleDown({
+          clientX: e.touches[0].clientX,
+          clientY: e.touches[0].clientY,
+          target: e.target,
+        });
+        e.preventDefault();
+      }
+    },
+  },
+  beforeDestroy() {
+    // 添加触摸事件移除
+    this.$el.removeEventListener("touchstart", this.handleTouchStart);
+    document.removeEventListener("touchmove", this.handleTouchMove);
+    document.removeEventListener("touchend", this.handleTouchEnd);
+    // 原有鼠标事件移除...
   },
 };
 </script>
 
 <style lang="less" scoped>
 .drag-container {
+  touch-action: manipulation; /* 优化触摸响应 */
   box-shadow: 0 0 0px rgba(255, 255, 255, 0), 0 0 0px rgba(255, 255, 255, 0);
   animation: glow 2s infinite;
   pointer-events: auto;
@@ -549,7 +731,7 @@ export default {
         .content_info {
           text-align: center;
           font-size: 0.15rem;
-          margin-top: 60px;
+          margin-top: 20px;
           color: #fff;
         }
         ::v-deep .el-form-item__label {
@@ -584,6 +766,24 @@ export default {
           }
         }
       }
+      .btn-box {
+        .el-button {
+          /* 增加按钮触摸区域 */
+          min-width: 100px;
+          min-height: 60px;
+          padding: 15px 25px;
+          /* 防止触摸时样式变化 */
+          &:active {
+            transform: scale(0.98);
+          }
+        }
+      }
+      .dialog-close {
+        /* 增加关闭按钮触摸区域 */
+        width: 44px;
+        height: 44px;
+        padding: 10px;
+      }
     }
     .contentiframe {
       width: 100%;

src/views/recognize/components/VideoLocalWindow.vue

@@ -17,6 +17,10 @@ export default {
       type: String,
       require: true,
     },
+    isUpload: {
+      type: String,
+      require: false,
+    },
     cameraData: {
       type: Object,
       default: () => ({}),
@@ -34,6 +38,18 @@ export default {
       deep: true,
       immediate: true,
     },
+    isUpload: {
+      handler(val) {
+        console.log("上传子级开关", val);
+        if (val) {
+          this.uploadImage();
+        } else {
+          this.isUpload = false;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   data() {
     return {
@@ -56,10 +72,16 @@ export default {
         this.isCameraActive = true;
         this.$refs.video.srcObject = stream;
 
-        // 新增定时截图功能
-        this.captureInterval = setInterval(() => {
-          this.captureImage();
-        }, 3000);
+        if (this.isUpload) {
+          setTimeout(() => {
+            this.uploadImage();
+          }, 1000);
+        } else {
+          // 新增定时截图功能
+          this.captureInterval = setInterval(() => {
+            this.captureImage();
+          }, 3000);
+        }
       } catch (err) {
         console.error("摄像头访问错误:", err);
         alert(`摄像头访问失败: ${err.message}`);
@@ -140,17 +162,54 @@ export default {
             },
             body: JSON.stringify({
               data: base64Data,
-              fileModule: 1,
+              fileModule: 2,
             }),
           }
         );
         const result = await response.json();
-        // console.log("上传反馈", response);
+        // console.log("上传反馈", response, result);
         if (result.code === 20000) {
           console.log("服务器返回数据:", result);
           this.$emit("output", result.data);
-          this.stopCamera();
+          setTimeout(() => {
+            this.stopCamera();
+          }, 200);
+        }
+      } catch (err) {
+        console.error("上传过程中出错:", err);
+      }
+    },
+    async uploadImage() {
+      const video = this.$refs.video;
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      canvas.getContext("2d").drawImage(video, 0, 0);
+      try {
+        const base64Data = canvas.toDataURL("image/png");
+        // console.log("上传数据：Base64", base64Data);
+        // 替换YOUR_SERVER_URL为你的实际服务器地址
+        const response = await fetch("/yapi/File/UploadBase64", {
+          method: "POST",
+          headers: {
+            token: localStorage.getItem("token"),
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            data: base64Data,
+            fileModule: 1,
+          }),
+        });
+        const result = await response.json();
+        console.log("上传反馈", response, result);
+        if (result.code === 20000) {
+          console.log("服务器上传返回数据:", result);
+          this.$emit("outputPath", result.data);
+          setTimeout(() => {
+            this.stopCamera();
+          }, 200);
         }
+        this.isUpload = false;
       } catch (err) {
         console.error("上传过程中出错:", err);
       }
@@ -167,8 +226,8 @@ export default {
 
 <style scoped>
 video {
-  height: 100%;
-  width: 100%;
+  height: 800px;
+  width: 1280px;
   /* width: 100%;
   max-width: 500px; */
   background: #000;