ISMS-Visualization-BJGD-TKT-JCDJ/src/views/recognize/index.vue

<template>
  <div class="recognize-main">
    <!-- <div>
      {{ this.infomation }}
    </div> -->
    <template>
      <!-- 人员人脸识别 step-0  同行人员人脸识别 step 9 -->
      <div
        class="infomation_content_video"
        v-if="processStep.num == 0 || processStep.num == 9"
      >
        <div>
          <div class="infomation_video">
            <div class="infomation_video_main">
              <!-- <video-image-window
                :cameraData="cameraInfo"
                :cameraId="cameraInfo.id"
              /> -->
              <video-local-window
                style="margin-top: 20px"
                :isUpload="uploadPic"
                @output="handleByfaceOut"
                @outputPath="handleByfaceUploadPath"
              />
            </div>
          </div>
          <div class="infomation_prompt_center" v-if="infomation.personEnable">
            初次登记请录入人脸，屏幕内只保留登记人员
          </div>
          <div class="infomation_prompt_center" v-else>
            初次登记请录入人脸，屏幕内只保留登记人员
          </div>
          <div>
            <el-button
              style="
                width: 160px;
                height: 80px;
                position: relative;
                bottom: 8vh;
                right: -38vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleByfaceUpload"
              >录入人脸</el-button
            >
            <el-button
              style="
                width: 160px;
                height: 80px;
                position: relative;
                bottom: 8vh;
                right: -38vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleClick(infomation, 7)"
              >跳过</el-button
            >
          </div>
          <!-- <div class="infomation_button" v-if="processStep.num !== 0">
            <el-button
              style="width: auto; height: 80px; font-size: xx-large"
              type="primary "
              size="medium "
              @click="handleClick(infomation, 3)"
              >确认</el-button
            >
          </div> -->
        </div>
      </div>
      <!-- 人员信息登记 step 1-4 进站目的 step 5 -->
      <div
        class="infomation_content"
        v-for="(item, index) in stepProcessInfomation"
        :key="item.step"
        v-if="processStep.num == item.step && processStep.num !== 5"
      >
        <div>
          <div class="infomation_prompt">{{ item.prompt }}</div>
          <div class="infomation_prop">
            <span>{{ item.propName }}</span>
            <span>
              <el-input
                ref="dealContent"
                v-model="infomation[item.prop]"
                rows="2"
                type="textarea"
                style="
                  font-size: 40px;
                  font-family: 'Microsoft YaHei';
                  width: auto;
                "
              />
            </span>
          </div>
          <div class="infomation_data" v-if="processStep.num == 1">
            <el-image
              :key="refreshKey"
              style="
                width: 300px;
                height: 400px;
                top: 340px;
                left: 260px;
                position: absolute;
              "
              :src="tempPhotoPath"
            >
            </el-image>
          </div>
          <div class="infomation_button">
            <el-button
              style="width: 160px; height: 80px; font-size: xx-large"
              type="primary "
              size="medium "
              @click="handleClick(infomation, 8)"
              >上一步</el-button
            >
            <el-button
              style="width: 160px; height: 80px; font-size: xx-large"
              type="primary "
              size="medium "
              @click="handleClick(infomation[item.prop], 1)"
              >下一步</el-button
            >
          </div>
        </div>
      </div>
      <!-- 进站目的 step-5 -->
      <div class="infomation_content" v-if="processStep.num == 5">
        <div>
          <div class="infomation_prompt">
            请点击选择或在输入框输入你的进站目的。
          </div>
          <div class="infomation_prompt_cause">
            <el-row>
              <el-col :span="10">
                <div class="infomation_prop_cause">
                  <span>进站目的：</span>
                </div>
              </el-col>
              <el-col :span="14">
                <el-radio-group v-model="infomation.cause">
                  <div class="infomation_prop_value">
                    <el-radio
                      v-for="(item, index) in causeList"
                      :key="index"
                      :label="item"
                    ></el-radio>
                  </div>
                </el-radio-group>
                <el-input
                  ref="dealContent"
                  v-model="infomation.cause"
                  rows="2"
                  type="textarea"
                  style="
                    margin-top: 6px;
                    font-size: 40px;
                    font-family: 'Microsoft YaHei';
                    width: auto;
                  "
                />
              </el-col>
            </el-row>
            <div class="infomation_button">
              <el-button
                style="width: 160px; height: 80px; font-size: xx-large"
                type="primary "
                size="medium "
                @click="handleClick(infomation, 8)"
                >上一步</el-button
              >
              <el-button
                style="width: 160px; height: 80px; font-size: xx-large"
                type="primary "
                size="medium "
                @click="handleClick(infomation[cause], 1)"
                >下一步</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 人脸识别存在/人员信息登记完成 step-6 -->
      <div class="infomation_content" v-if="processStep.num == 6">
        <div>
          <div class="infomation_prompt">人员信息：</div>
          <div class="infomation_data_line"></div>
          <div class="infomation_data">
            <div
              class="infomation_data_content"
              v-for="(item, index) in stepProcessInfomation"
              :key="item.step"
              v-if="
                item.prop == 'name' ||
                (personType == 2 && item.prop == 'company') ||
                item.prop == 'cause' ||
                item.prop == 'telephone' ||
                (personType == 2 && item.prop == 'idNumber')
              "
            >
              <span class="infomation_data_prop">{{ item.propName }}</span>
              <span>
                <el-input
                  ref="dealContent"
                  v-model="infomation[item.prop]"
                  rows="1"
                  type="textarea"
                  style="
                    font-size: 40px;
                    font-family: 'Microsoft YaHei';
                    width: 380px;
                    height: 68px;
                  "
                />
              </span>
            </div>
          </div>
          <div class="infomation_data">
            <el-image
              v-if="personType == 1"
              :key="refreshKey"
              style="
                width: 200px;
                height: 300px;
                top: 340px;
                position: absolute;
              "
              :src="tempPhotoPath"
            >
            </el-image>
            <el-image
              v-if="personType == 2"
              :key="refreshKey"
              style="
                width: 200px;
                height: 300px;
                top: 380px;
                position: absolute;
              "
              :src="tempPhotoPath"
            >
            </el-image>
          </div>
          <div class="infomation_button">
            <el-button
              style="
                width: auto;
                height: 80px;
                position: relative;
                bottom: 12vh;
                right: -8vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleClick(infomation, 8)"
              >上一步</el-button
            >
            <el-button
              style="
                width: auto;
                height: 80px;
                position: relative;
                bottom: 12vh;
                right: -8vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleClick(infomation, 2)"
              >请门卫通知值班人员申请进站。。。</el-button
            >
          </div>
        </div>
      </div>
      <!-- 入场相关信息登记 step 7 -->
      <div class="infomation_content" v-if="processStep.num == 7">
        <div>
          <div class="infomation_prompt">请点击勾选相关信息。</div>
          <div class="infomation_data_line"></div>
          <div class="infomation_data">
            <div class="infomation_data_content2">
              <span class="infomation_data_prop">是否携带危化品：</span>
              <span class="infomation_data_check">
                <el-radio-group v-model="infomation.dangerousEnable">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </span>
            </div>
            <div class="infomation_data_content2">
              <span class="infomation_data_prop">进站区域：</span>
              <span class="infomation_data_check">
                <el-checkbox-group v-model="infomation.areasEnable">
                  <el-checkbox :label="1">工艺区</el-checkbox>
                  <el-checkbox :label="2">办公区</el-checkbox>
                </el-checkbox-group>
              </span>
            </div>
            <div class="infomation_data_content2">
              <span class="infomation_data_prop">是否施工作业：</span>
              <span class="infomation_data_check">
                <el-radio-group v-model="infomation.workerEnable">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </span>
            </div>
            <div class="infomation_data_content2">
              <span class="infomation_data_prop">是否有同行人员：</span>
              <span class="infomation_data_check">
                <el-radio-group v-model="infomation.personEnable">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </span>
            </div>
          </div>
          <div class="infomation_button">
            <el-button
              style="
                width: 160px;
                height: 80px;
                position: relative;
                bottom: 2vh;
                right: -20vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleClick(infomation, 7)"
              >下一步</el-button
            >
          </div>
        </div>
      </div>
      <!-- 进出须知 step 8 -->
      <div class="infomation_content_read" v-if="processStep.num == 8">
        <div>
          <div class="infomation_prompt_left">
            请完整阅读并同意遵守《托克托压气站进站须知》。
          </div>
          <div class="infomation_data_line"></div>
          <div class="infomation_read">
            <div class="infomation_read_content">
              <p><strong>* 非生产装置区注意事项</strong></p>
              <ul>
                <li>
                  <strong>进站手续：</strong
                  >服从站内工作人员管理，按规定办理进、出站手续
                </li>
                <li>
                  <strong>HSE要求：</strong
                  >仔细阅读进站人员登记表中《HSE要求注意事项》的规定要求，并逐项进行确认和遵守
                </li>
                <li>
                  <strong>接待人员：</strong
                  >接待人员负责安排您在站内/阀室的活动，确保您的人身安全
                </li>
                <li>
                  <strong>车辆停放：</strong
                  >按照接待人员指定位置停车，车头指向疏散路线
                </li>
                <li>
                  <strong>能源环境：</strong
                  >节约用水，保持站内/阀室卫生，废弃物投放到分类垃圾箱内/带出阀室外处置
                </li>
              </ul>

              <p><strong>* 应急处置注意事项</strong></p>
              <ul>
                <li>
                  <strong>急救处置：</strong>出现意外伤害及时与接待人员联系
                </li>
                <li>
                  <strong>异常事件：</strong
                  >发现异常事件要及时通知接待人员或附近的站场/作业区员工
                </li>
                <li>
                  <strong>逃生通道：</strong
                  >熟知逃生通道，必要时可要求接待人员组织逃生演练
                </li>
                <li>
                  <strong>应急处置：</strong
                  >紧急情况下服从接待人员指挥，沿逃生通道撤离事故现场
                </li>
              </ul>
            </div>
          </div>
          <div class="infomation_button">
            <el-button
              style="
                width: auto;
                height: 80px;
                position: relative;
                bottom: 0vh;
                right: -25vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleClick(infomation, 3)"
              >我已阅读，并同意遵守</el-button
            >
          </div>
        </div>
      </div>
      <!-- 人员信息登记 step 10-13 -->
      <div
        class="infomation_content"
        v-for="(item, index) in stepProcessPerson"
        :key="item.step"
        v-if="processStep.num == item.step"
      >
        <div>
          <div class="infomation_prompt">{{ item.prompt }}</div>
          <div class="infomation_prop">
            <span>{{ item.propName }}</span>
            <span>
              <el-input
                ref="dealContent"
                v-model="person[item.prop]"
                rows="2"
                type="textarea"
                style="
                  font-size: 40px;
                  font-family: 'Microsoft YaHei';
                  width: auto;
                "
              />
            </span>
          </div>
          <div class="infomation_data">
            <el-image
              :key="refreshKey"
              style="
                width: 300px;
                height: 400px;
                top: 340px;
                left: 260px;
                position: absolute;
              "
              :src="tempPhotoPath"
            >
            </el-image>
          </div>
          <div class="infomation_button">
            <el-button
              style="width: 160px; height: 80px; font-size: xx-large"
              type="primary "
              size="medium "
              @click="handleClick(infomation, 8)"
              >上一步</el-button
            >
            <el-button
              style="width: 160px; height: 80px; font-size: xx-large"
              type="primary "
              size="medium "
              @click="handleClick(person[item.prop], 9)"
              >下一步</el-button
            >
          </div>
        </div>
      </div>
      <!-- 登记信息确认 step 14 -->
      <div
        class="infomation_content"
        v-if="processStep.num == 14"
        :key="refreshKey"
      >
        <div>
          <div class="infomation_prompt_final">
            登记信息（请确认登记信息，并按需添加同行人员后，确认信息进行绑卡）：
          </div>
          <div class="infomation_data_final">
            <el-descriptions class="margin-top" :column="2">
              <el-descriptions-item label="人员姓名">{{
                infomation.name
              }}</el-descriptions-item>
              <el-descriptions-item label="工作单位" v-if="personType === 2">{{
                infomation.company
              }}</el-descriptions-item>
              <el-descriptions-item label="身份证号" v-if="personType === 2">{{
                infomation.idNumber
              }}</el-descriptions-item>
              <el-descriptions-item label="联系电话"
                >{{ infomation.telephone }}
              </el-descriptions-item>
              <el-descriptions-item label="进站目的">{{
                infomation.cause
              }}</el-descriptions-item>
              <el-descriptions-item label="总计人数" :key="refreshKey">{{
                infomation.count
              }}</el-descriptions-item>
              <el-descriptions-item label="是否携带危化品">
                <el-radio-group v-model="infomation.dangerousEnable">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item label="进站区域"
                ><el-checkbox-group v-model="infomation.areasEnable">
                  <el-checkbox :label="1">工艺区</el-checkbox>
                  <el-checkbox :label="2">办公区</el-checkbox>
                </el-checkbox-group>
              </el-descriptions-item>
              <el-descriptions-item label="是否施工作业"
                ><el-radio-group v-model="infomation.workerEnable">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-descriptions-item>
              <el-descriptions-item label="是否有同行人员"
                ><el-radio-group v-model="infomation.personEnable">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-descriptions-item>
            </el-descriptions>
            <div
              class="info_list"
              v-if="infomation.personEnable"
              :key="refreshKey"
            >
              <base-table-list
                :tableConfig="tableConfig"
                @handleClick="handleTableClick"
              />
            </div>
          </div>
          <div class="infomation_button">
            <el-button
              style="
                width: auto;
                height: 80px;
                position: relative;
                bottom: 2vh;
                right: -12vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="addPerson"
              >增加同行人员</el-button
            >
            <el-button
              style="
                width: auto;
                height: 80px;
                position: relative;
                bottom: 2vh;
                right: -12vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleClick(infomation, 4)"
              >确认信息，开始绑卡</el-button
            >
          </div>
        </div>
      </div>
      <!-- 登记人员绑卡 step 15 -->
      <div class="infomation_content" v-if="processStep.num == 15">
        <div>
          <div class="infomation_prompt_final">
            人员{{
              infomation.count
            }}人，（请先点击绑卡，再刷卡，依次完成所有人员的绑卡操作）：
          </div>
          <div class="infomation_data_final">
            <div class="info_list" :key="refreshKey">
              <base-table-list
                :tableConfig="tableConfigInfo"
                @handleClick="handleTableClick"
              />
            </div>
          </div>
          <div class="infomation_button">
            <el-button
              style="
                width: auto;
                height: 80px;
                position: relative;
                bottom: -4vh;
                right: -20vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleClick(infomation, 8)"
              >上一步</el-button
            >
            <el-button
              style="
                width: auto;
                height: 80px;
                position: relative;
                bottom: -4vh;
                right: -20vw;
                font-size: xx-large;
              "
              type="primary "
              size="medium "
              @click="handleClick(infomation, 6)"
              >完成登记</el-button
            >
          </div>
        </div>
      </div>
      <scanner-or-reader :enable="cardEnable" @output="handleReaderOut" />
      <id-reader :enable="idEnable" @output="readIdCard" />
    </template>
  </div>
</template>

<script>
import BaseTableList from "@/views/components/base/BaseTableList";
import VideoImageWindow from "./components/VideoImageWindow.vue";
import VideoLocalWindow from "./components/VideoLocalWindow.vue";
import ScannerOrReader from "@/components/ScannerOrReader";
import IdReader from "@/components/IdReader";
import { mapGetters } from "vuex";
import { getDeepseekTaking } from "@/API/deepseek";
import {
  personComingTagUpdate,
  RefreshDriver,
  bindAndUnbindrecord,
  GetPersonList,
} from "@/API/custom";
import Dayjs from "dayjs";

export default {
  name: "recognize",
  components: {
    BaseTableList,
    VideoImageWindow,
    VideoLocalWindow,
    ScannerOrReader,
    IdReader,
  },
  data() {
    return {
      tempPhotoPath: "",
      refreshKey: 0, //页面刷新
      cardEnable: false, //rfid刷卡
      idEnable: false, //身份证刷卡
      uploadPic: false, //上传录入
      recognizeSuccess: false, //识别成功
      finallySet: false, //最终修改
      nameEnbale: false, //最终修改
      tempList: [],
      fullLoading: null,
      rfid: "",
      idCardData: {},
      //
      url: "",
      recognizeEnable: false,
      showIframe: true,
      personType: "2",
      processStep: {
        num: 0,
        content: {},
      },
      causeList: [
        "进站检查",
        "现场调研",
        "现场施工",
        "工作交流",
        "岗位应聘",
        "作业监督",
        "驻站跟班",
        "系统调试",
      ],
      stepProcessInfomation: [
        {
          step: 1,
          propName: "人员姓名：",
          prop: "name",
          prompt: "请点击输入框，按住键盘Caps键语音或拼音输入你的姓名。",
        },
        {
          step: 4,
          propName: "工作单位：",
          prop: "company",
          prompt: "请点击输入框，按住键盘Caps键语音或拼音输入你的工作单位。",
        },
        {
          step: 3,
          propName: "身份证号：",
          prop: "idNumber",
          prompt:
            "请点击输入框，按住键盘Caps键语音或拼音输入你的身份证号或将身份证贴近感应区。",
        },
        {
          step: 2,
          propName: "联系电话：",
          prop: "telephone",
          prompt: "请点击输入框，按住键盘Caps键语音或拼音输入你的联系电话。",
        },
        {
          step: 5,
          propName: "进站目的：",
          prop: "cause",
          prompt: "请点击输入框，按住键盘Caps键语音或拼音输入你的进站目的。",
        },
      ],
      stepProcessPerson: [
        {
          step: 10,
          propName: "人员姓名：",
          prop: "name",
          prompt: "请点击输入框，按住键盘Caps键语音或拼音输入你的姓名。",
        },
        {
          step: 11,
          propName: "工作单位：",
          prop: "company",
          prompt: "请点击输入框，按住键盘Caps键语音或拼音输入你的工作单位。",
        },
        {
          step: 12,
          propName: "身份证号：",
          prop: "idNumber",
          prompt:
            "请点击输入框，按住键盘Caps键语音或拼音输入你的身份证号或将身份证贴近感应区。",
        },
        {
          step: 13,
          propName: "联系电话：",
          prop: "telephone",
          prompt: "请点击输入框，按住键盘Caps键语音或拼音输入你的联系电话。",
        },
      ],
      infomation: {
        id: "",
        name: "",
        company: "",
        idNumber: "",
        telephone: "",
        cause: "",
        label: "",
        areasEnable: [2],
        dangerousEnable: 0,
        workerEnable: 0,
        personEnable: 0,
        persons: [],
        count: 1,
        read: "",
        check: false,
        photoPath: "",
        department: "",
        position: "",
        type: "",
        typeName: "",
        companyName: "",
      },
      names: "",
      areas: "",
      person: {
        id: "",
        name: "",
        company: "",
        idNumber: "",
        telephone: "",
        cardNo: "",
        photoPath: "",
        companyName: "",
      },
      cameraInfo: {
        areaId: null,
        areaName: null,
        baseCreateTime: "2024-12-10 11:11:51",
        baseModifyTime: "2024-12-24 19:02:45",
        brand: 1,
        buildId: "100001",
        buildName: "托克托",
        canHide: true,
        canHideStr: "是",
        canPlayBack: false,
        code: "TKTM02",
        controlChannel: 1,
        controlPort: 0,
        departmentId: "784131093203787776",
        departmentName: "托克托压气站",
        enable: true,
        enableStr: "启用",
        floorId: 0,
        floorNo: 1,
        height: 4,
        homeCarouselEnable: true,
        homeCarouselEnableStr: "启用",
        icon: "244450840335618105",
        iconName: "默认摄像头",
        iconPath: "/../static/images/camera.svg",
        id: "786550746739908608",
        ip: "192.168.70.61",
        location: { buildId: "100001", floorNo: 1, x: 63720, y: 187240 },
        name: "托克托门禁进站机",
        password: "",
        passwordKey: "",
        playChannel: 1,
        playPath: null,
        playPort: 0,
        protocolParam: null,
        ptzEnable: false,
        ptzEnableStr: "否",
        remark: null,
        sort: 0,
        streamIndex: 1,
        streamProtocol: 1,
        streamProtocolStr: "RTSP",
        type: 2,
        typeStr: "海康IPC",
        useType: "212006",
        useTypeStr: "门禁摄像头",
        userName: "admin",
      },
      tableConfigInfo: {
        needIndex: true,
        height: 530,
        header: [
          { title: "姓名", prop: "name", width: "" },
          { title: "工作单位", prop: "company", width: "" },
          // { title: "联系电话", prop: "telephone", width: "" },
          { title: "卡号", prop: "cardNo", width: "" },
          {
            title: "操作",
            prop: "operation",
            width: "",
            btns: [{ btnName: "绑卡", btnType: "bind" }],
          },
        ],
        tableData: [],
      },
      tableConfig: {
        needIndex: true,
        height: 280,
        header: [
          { title: "姓名", prop: "name", width: "" },
          { title: "工作单位", prop: "company", width: "" },
          // { title: "联系电话", prop: "telephone", width: "" },
          {
            title: "操作",
            prop: "operation",
            width: "",
            btns: [{ btnName: "删除", btnType: "del" }],
          },
        ],
        tableData: [],
      },
      pPath: "~@/assets/imgs/stationMap/default_0.png",
    };
  },
  watch: {
    "$route.query": {
      handler(newVal, oldVal) {
        console.log("Route:", newVal);
        if (newVal.type && newVal.type == 1) {
          this.personType = 1;
        } else {
          this.personType = 2;
        }
        this.infomation.department =
          this.personType === 1 ? "821025772184543232" : "821025720783347712";
        this.infomation.position =
          this.personType === 1 ? "821073061166981120" : "821073092108361728";
        this.infomation.type =
          this.personType === 1 ? "546093319541760000" : "403245878963347456";
        this.infomation.typeName = this.personType === 1 ? "访客" : "施工人员";
        this.person = {
          //初始化
          name: "",
          company: this.infomation.company,
          idNumber: "",
          telephone: "",
          label: "",
          photoPath: "",
          department:
            this.personType === 1 ? "821025772184543232" : "821025720783347712",
          position:
            this.personType === 1 ? "821073061166981120" : "821073092108361728",
          type:
            this.personType === 1 ? "546093319541760000" : "403245878963347456",
          typeName: this.personType === 1 ? "访客" : "施工人员",
          accessControlIds: [],
          companyName: this.infomation.company,
        };
      },
      deep: true,
      immediate: true,
    },
    "processStep.num": {
      handler(newVal, oldVal) {
        if (newVal == 14) {
          this.tableConfig.tableData = this.infomation.persons;
          this.infomation.count = 1 + this.infomation.persons.length;
        }
        if (newVal == 0 || newVal == 9) {
          //人脸识别
          this.recognizeEnable = true;
        } else {
          this.recognizeEnable = false;
        }
        if (newVal == 3 || newVal == 12) {
          //身份证识别
          this.idEnable = true;
        } else {
          this.idEnable = false;
        }
        console.log("步骤参数", newVal, this.recognizeEnable);
        setTimeout(() => {
          this.recognize();
        }, 500);
        this.refresh();
      },
      deep: true,
      immediate: true,
    },
    personInfo: {
      handler(newVal, oldVal) {
        console.log("personInfo:", newVal);
        if (newVal) {
          this.tableConfigInfo.tableData[newVal.dataIndex] = newVal.data;
          this.refresh();
        }
      },
      deep: true,
      immediate: true,
    },
    tempPhotoPath: {
      handler(newVal, oldVal) {
        console.log("照片路径：", newVal);
        this.refresh();
      },
      deep: true,
      immediate: true,
    },
    nameEnbale: {
      handler(newVal) {
        console.log("重名检测", newVal);
        if (newVal) {
          this.$alert("系统有同名人员，请加区分前缀、后缀修改名称", "提示", {
            confirmButtonText: "返回修改",
            callback: () => {
              if (this.processStep.num == 2 || this.processStep.num == 11) {
                this.processStep.num--;
              } else if (this.processStep.num == 14) {
                this.processStep.num = this.processStep.num - 4;
                this.infomation.persons.pop();
              }
            },
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters(["personInfo"]),
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API;
    },
  },
  methods: {
    init() {
      this.processStep.num = 0;
      this.infomation.personEnable = 0;
      // this.takingDeepseek();
    },
    async takingDeepseek() {
      try {
        const params = {
          output_format: "json",
          content: "先做自我介绍，再询问姓名",
          prompt_template:
            "请你扮演一个托克托压气站入场登记员，负责询问对方姓名，要求交流简洁",
        };
        // const params =
        //   "{'output_format':'json','content':'先做自我介绍，再询问姓名','prompt_template':'请你扮演一个托克托压气站入场登记员，负责询问对方姓名，要求交流简洁'}";
        const res = await getDeepseekTaking(params);
        const strs = res.response.toString().split("</think>\n\n");
        console.log("当前反馈信息：", res.response, strs);
        if (strs.length > 1) {
          this.speak(strs[1]);
        }
      } catch (err) {
        console.log(err);
      }
    },
    speak(data) {
      this.$store.dispatch("globalConfig/setAlarmAudio", {
        show: true,
        alarmMsg: data,
      });
    },
    recognize() {
      if (this.recognizeEnable) {
        // console.log("人脸识别", this.processStep);
        // setTimeout(() => {
        //   this.processStep.num++;
        // }, 3000);
      }
    },
    async bindInfoRecord(person) {
      try {
        console.log("记录基础信息：", person);
        this.names = "";
        for (let i = 0; i < person.persons.length; i++) {
          const p = person.persons[i];
          this.names = this.names.concat(" ", p.name);
        }
        console.log("记录基础信息1：", this.names);
        this.areas = "";
        let areaName = "";
        person.areasEnable.forEach((p) => {
          areaName = p > 1 ? "办公区" : "工艺区";
          this.areas = this.areas + " " + areaName;
        });
        console.log("记录基础信息2：", this.areas);
        const record = {
          field001: Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"), //登记时间
          field002: person.name, //领队姓名
          field003: person.companyName, //单位
          field004: person.idNumber, //身份证号
          field005: person.telephone, //联系电话
          field006: person.cause, //进站目的
          field007: person.count, //总计人数
          field008: this.names, //同行人员姓名
          field009: person.dangerousEnable ? "有" : "无", //危险品检查
          field010: person.workerEnable ? "是" : "否", //施工作业
          field011: this.areas, //进站区域
          field012: person.photoPath, //登记照片
          pageId: "842348058862690304", //入场登记
        };
        console.log("记录基础信息3：", record);
        const res = await bindAndUnbindrecord(record);
        console.log("登记记录反馈信息：", res);
      } catch (err) {
        console.log(err);
      }
    },
    async getPersonList(person) {
      try {
        const params = {
          // pageSize: 10000,
          // pageIndex: 1,
          name: person.name, //登记时间
        };
        this.nameEnbale = false;
        const res = await GetPersonList(params);
        this.tempList = res.data.content;
        console.log("名称信息", params);
        for (let i = 0; i < this.tempList.length; i++) {
          const p = this.tempList[i];
          if (p.name === params.name) {
            this.nameEnbale = true;
          }
        }
        // console.log("名称检索数据表", this.tempList);
      } catch (err) {
        console.log(err);
      }
    },
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: "领导审核中，请耐心等待",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
        this.processStep.num++;
      }, 1000);
    },
    handleAudio(key, element = document) {
      const options = {
        key: key,
        code: key === "CapsLock" ? "CapsLock" : "",
        keyCode: key === "CapsLock" ? 20 : 0,
        bubbles: true,
      };

      const keyDownEvent = new KeyboardEvent("keydown", options);
      // const keyUpEvent = new KeyboardEvent("keyup", options);

      element.dispatchEvent(keyDownEvent);
      // element.dispatchEvent(keyUpEvent);
    },
    handleClick(e, type) {
      if (type) {
        switch (type) {
          case 8:
            this.processStep.num--;
            // console.log("上一步");
            break;
          case 7:
            this.processStep.num++;
            // console.log("跳过人脸识别");
            break;
          case 1:
            // console.log("人员登记信息流程");
            if (this.processStep.num === 1 && this.infomation.id === "") {
              this.getPersonList({ name: this.infomation.name });
            }
            if (this.personType == 1 && this.processStep.num === 2) {
              this.processStep.num += 3;
            } else {
              this.processStep.num++;
            }
            break;
          case 2:
            this.openFullScreen();
            // this.processStep.num++;
            // console.log("入场登记通知领导");
            break;
          case 3:
            if (this.infomation.personEnable) {
              this.processStep.num++;
            } else {
              this.processStep.num += 6;
            }
            // console.log("人脸识别");
            break;
          case 4:
            this.processStep.num++;
            this.initTableInfo();
            // console.log("登记绑卡");
            break;
          case 6:
            this.checkPersonCardNo();
            this.bindInfoRecord(this.infomation);
            // console.log("完成登记");
            break;
          case 5:
            if (this.personType == 1 && this.processStep.num === 11) {
              this.processStep.num += 3;
              this.infomation.persons.push(this.person);
            } else {
              if (this.processStep.num === 13) {
                this.infomation.persons.push(this.person);
              }
              this.processStep.num++;
            }
            // console.log("同行人员信息");
            break;
          case 9:
            if (this.processStep.num === 10) {
              if (this.person.id === "") {
                this.getPersonList({ name: this.person.name }); //人员重名检测
              }
              this.person.department = this.infomation.department;
              this.processStep.num += 4;
              this.infomation.persons.push(this.person);
            }
            console.log("同行人员信息");
            break;
          default:
            break;
        }
      }
    },
    handleTableClick(data, index, btnType) {
      if (btnType === "bind") {
        console.log("绑卡", data, index);
        data.companyName = data.company;
        let dialogConfig = {
          dialogId: "risk_" + data.id,
          show: true, //是否显示
          title: "绑卡信息",
          width: 600, //px宽度
          height: 320, //px高度
          center: true, //是否居中定位
          zIndex: 10,
          type: 1,
          data,
          dataIndex: index,
        };
        this.$store.dispatch("dialog/addRiskDialog", dialogConfig);
      }
      if (btnType === "del") {
        this.infomation.persons = this.infomation.persons.filter((e) => {
          return e.name !== data.name;
        });
        this.person.id = "";
        this.tableConfig.tableData = this.infomation.persons;
        // console.log("删除", data, this.infomation.persons);
        this.refresh();
      }
      if (btnType === "close") {
        // console.log("解绑", data);
      }
      if (btnType === "input") {
        // console.log("录入人脸", data);
      }
    },
    addPerson() {
      this.infomation.personEnable = 1;
      this.person = {
        //初始化
        id: "",
        name: "",
        company: this.infomation.company,
        idNumber: "",
        telephone: "",
        label: "",
        photoPath: "",
        department: this.infomation.department,
        position:
          this.personType === 1 ? "821073061166981120" : "821073092108361728",
        type:
          this.personType === 1 ? "546093319541760000" : "403245878963347456",
        typeName: this.personType === 1 ? "访客" : "施工人员",
        accessControlIds: [],
        companyName: this.infomation.company,
      };
      this.processStep.num = 9; //步骤跳转

      this.refresh();
    },
    initTableInfo() {
      let list = [this.infomation];
      list.push(...this.infomation.persons);
      this.tableConfigInfo.tableData = list;
    },
    checkPersonCardNo() {
      let count = 0;
      let mes = "";
      this.tableConfigInfo.tableData.forEach((item) => {
        if (item.cardNo && item.cardNo.length > 0) {
          count++;
        } else {
          mes = mes + item.name + "，";
        }
      });
      if (this.tableConfigInfo.tableData.length > count) {
        this.$confirm("人员" + mes + "未绑定卡片，是否继续?", "提示", {
          confirmButtonText: "返回绑卡",
          cancelButtonText: "确认完成登记",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "返回绑卡!",
            });
          })
          .catch(() => {
            this.$router.push("basePage");
            this.$message({
              type: "warning",
              message: "完成登记",
            });
          });
      } else {
        this.$router.push("basePage");
      }
    },
    handleByfaceUpload() {
      this.uploadPic = true;
      // console.log("上传父级开关", this.uploadPic);
    },
    // 头像上传
    handleByfaceUploadPath(data) {
      console.log("人脸上传图片路径", data);
      if (data) {
        switch (this.processStep.num) {
          case 0:
            if (this.recognizeSuccess) {
              this.processStep.num += 5;
            } else {
              this.processStep.num++;
            }
            if (this.personType === 1) {
              if (this.infomation.workNo === null) {
                this.infomation["photoPath"] = data;
              } else {
                this.infomation["photoPath"] =
                  this.infomation["photoPath"] !== ""
                    ? this.infomation["photoPath"]
                    : data;
              }
            } else {
              this.infomation["photoPath"] = data;
            }
            this.tempPhotoPath = "https://10.0.0.201:8083" + "/yapi" + data;
            this.uploadPic = false;
            this.recognizeSuccess = false;
            break;
          case 9:
            if (this.recognizeSuccess) {
              this.processStep.num += 5;
            } else {
              this.processStep.num++;
            }
            if (this.personType === 1) {
              if (this.person.workNo === null) {
                this.person["photoPath"] = data;
              } else {
                this.person["photoPath"] =
                  this.person["photoPath"] !== ""
                    ? this.person["photoPath"]
                    : data;
              }
            } else {
              this.person["photoPath"] = data;
            }
            this.tempPhotoPath = "https://10.0.0.201:8083" + "/yapi" + data;
            this.uploadPic = false;
            this.recognizeSuccess = false;
            break;
          default:
            break;
        }
      }
    },
    // 人脸识别读取
    handleByfaceOut(data) {
      // console.log("人脸识别反馈", data);
      this.recognizeSuccess = true;
      if (data) {
        switch (this.processStep.num) {
          case 0:
            // this.processStep.num += 5;
            this.infomation["id"] = data.id;
            this.infomation["name"] = data.name;
            this.infomation["companyName"] = data.companyName;
            this.infomation["company"] = data.companyName
              ? data.companyName
              : data.departmentName;
            this.infomation["idNumber"] = data.idNumber;
            this.infomation["telephone"] = data.telephone;
            this.infomation["cardNo"] = data.cardNo;
            this.infomation["workNo"] = data.workNo;
            this.infomation["photoPath"] = data.photoPath;
            if (data.department) {
              this.infomation["department"] = data.department;
            } else {
              this.infomation["department"] =
                this.personType === 1
                  ? "821025772184543232"
                  : "821025720783347712";
            }
            this.infomation["position"] =
              this.personType === 1
                ? "821073061166981120"
                : "821073092108361728";
            this.infomation["type"] =
              this.personType === 1
                ? "546093319541760000"
                : "403245878963347456";
            this.infomation["accessControlIds"] = data.accessControlIds;
            break;
          case 9:
            // this.processStep.num += 5;
            this.person["id"] = data.id;
            this.person["name"] = data.name;
            this.person["companyName"] = data.companyName;
            this.person["company"] = data.companyName
              ? data.companyName
              : data.departmentName;
            this.person["idNumber"] = data.idNumber;
            this.person["telephone"] = data.telephone;
            this.person["cardNo"] = data.cardNo;
            this.person["workNo"] = data.workNo;
            this.person["photoPath"] = data.photoPath;
            if (data.department) {
              this.infomation["department"] = data.department;
            } else {
              this.infomation["department"] =
                this.personType === 1
                  ? "821025772184543232"
                  : "821025720783347712";
            }
            this.person["position"] =
              this.personType === 1
                ? "821073061166981120"
                : "821073092108361728";
            this.person["type"] =
              this.personType === 1
                ? "546093319541760000"
                : "403245878963347456";
            this.person["accessControlIds"] = data.typeBelong;
            if (!this.checkIn(data.id)) {
              this.infomation.persons.push(this.person);
              // console.log("添加", data.name);
            } else {
              // console.log("人员已添加");
            }
            break;
          default:
            break;
        }
      }
    },
    // 读取身份证
    readIdCard(data) {
      // console.log("身份证信息", data);
      if (data) {
        switch (this.processStep.num) {
          case 3:
            this.infomation["idNumber"] = data.cardno;
            this.processStep.num++;
            break;
          case 12:
            this.person["idNumber"] = data.cardno;
            this.processStep.num++;
            break;
          default:
            break;
        }
      }
      // this.fullLoading = this.$loading({
      //   text: "身份证读取中",
      //   lock: true,
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      // setTimeout(() => {
      //   if (data.code === "0") {
      //     this.idCardData = data;
      //     // this.GetPersonByIdCard();
      //   } else {
      //     this.$message.warning("读取身份证失败");
      //     this.fullLoading.close();
      //   }
      // }, 1000);
    },
    // 读取rfid卡
    handleReaderOut(code) {
      console.log("rfid", code);
      this.fullLoading = this.$loading({
        text: "读取中",
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        if (!!code) {
          this.rfid = code;
          this.fullLoading.close();
          // this.GetPersonByLabelRFID()
        }
      }, 1000);
    },
    checkIn(id) {
      if (this.infomation.id === id) {
        return true;
      } else {
        for (let i = 0; i < this.infomation.persons.length; i++) {
          const p = this.infomation.persons[i];
          if (p.id === id) {
            return true;
          }
        }
        return false;
      }
    },
    refresh() {
      this.refreshKey++;
    },
  },
};
</script>
<style>
.el-descriptions__body {
  font-size: 36px;
  color: #ffffff;
  background-color: transparent;
}
.el-input__inner {
  height: 120px;
}
.el-radio {
  padding-top: 2%;
  color: #fff;
}
.el-radio__label {
  font-size: 36px;
  vertical-align: middle;
}
.el-radio__inner {
  width: 40px;
  height: 40px;
  background: #f7f8fa;
  color: #333;
  border: 0 !important;
  border-radius: 0;
}
.el-radio__inner::after {
  width: 0px;
}

.el-checkbox {
  color: #fff;
}
.el-checkbox__label {
  font-size: 36px;
  vertical-align: middle;
}
.el-checkbox__inner {
  width: 40px;
  height: 40px;
  background: #f7f8fa;
}
.el-checkbox__inner::after {
  border: 0px solid #fff !important;
  width: 0px;
}
</style>
<style lang="less" scoped>
.recognize-main {
  width: 100%;
  height: 100%;
  padding: 100px 30px 40px;
  pointer-events: auto;
  color: #fff;
  .infomation_content {
    color: #fff;
    .infomation_prompt {
      font-size: 60px;
      margin-top: 2%;
      margin-left: 2%;
    }
    .infomation_prompt_cause {
      font-size: 60px;
      margin-top: 12%;
      margin-left: 2%;
      .infomation_prop_cause {
        width: 100%;
        height: 100px;
        display: flex;
        margin-top: 2%;
        margin-left: 60%;
      }
      .infomation_prop_value {
      }
    }
    .infomation_prop {
      margin-top: 14%;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 60px;
    }
    .infomation_data_line {
      margin-top: 5%;
    }
    .infomation_data {
      width: 100%;
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      font-size: 50px;
      text-align: center;
      .infomation_data_content {
        margin-top: 2%;
        margin-left: 12%;
        width: 35%;
        height: 100px;
        justify-content: center;
        align-items: flex-start;
      }
      .infomation_data_content2 {
        margin-top: 2%;
        margin-left: 8%;
        width: 41%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
      }
    }
    .infomation_prompt_final {
      font-size: 50px;
      margin-top: 2%;
      margin-left: 2%;
    }
    .infomation_data_final {
      padding-top: 2%;
      padding-left: 2%;
    }
    .infomation_button {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2%;
      margin-left: 20%;
    }
  }
  .infomation_content_video {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; //水平居中
    .infomation_prompt_center {
      margin-bottom: 10vh;
      font-size: 50px;
      margin: 10px auto;
    }
    .infomation_video {
      margin-top: 1%;
      width: 1280px;
      height: 800px;
      .infomation_video_main {
        width: 100%;
        height: 100%;
      }
    }
  }
  .infomation_content_read {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .infomation_prompt_left {
      font-size: 60px;
    }
    .infomation_data_line {
      margin-top: 1%;
    }
    .infomation_read {
      margin: 0 auto;
      width: 80%;
      border: 2px solid rgb(255, 255, 255);
      border-radius: 15px;
      .infomation_read_content {
        padding: 10px;
        font-size: 30px;
        max-height: 700px;
        overflow-y: scroll;
        text-align: left;
        line-height: 1.6;
        strong {
          color: #ffffff;
        }
        ul {
          padding-left: 20px;
        }
        li {
          margin-bottom: 8px;
        }
      }
    }
    .infomation_button {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2%;
      margin-left: 20%;
    }
  }
}
</style>