ducha-qianduan/src/views/doormanManage/faceInfoManage/FaceSearchDialog.vue

<template>
  <el-dialog
    title="查询人脸图片数据"
    :visible.sync="visible"
    :before-close="handleClose"
    custom-class="custom-dialog"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="searchForm"
      label-width="180px"
      class="user-form"
    >
      <!-- 查询控制 -->
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="查询结果在结果列表中的起始位置">
            <el-input-number v-model="form.searchResultPosition" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本次查询(每页显示)最大记录数">
            <el-input-number v-model="form.maxResults" :min="1" :max="1000" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="人脸比对库唯一标示ID">
            <el-input v-model="form.FDID" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="人脸库人员出生开始时间">
            <el-input v-model="form.startTime" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人脸库人员出生结束时间">
            <el-input v-model="form.endTime" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择">
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="form.bornTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="省份代码">
            <el-input v-model="form.province" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="城市代码">
            <el-input v-model="form.city" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="证件类型">
            <el-input v-model="form.certificateType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号">
            <el-input v-model="form.certificateNumber" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电话号码">
            <el-input v-model="form.phoneNumber" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="建模状态 (旧)">
            <el-select v-model="form.modelStatus" placeholder="请选择">
              <el-option label="未建模" value="0" />
              <el-option label="建模中" value="1" />
              <el-option label="已建模" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建模状态 (新)">
            <el-input v-model="form.modelingStatus" placeholder="如: modeling/finished" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="人脸模式 (FaceModeList)">
            <el-input v-model="form.FaceModeList" placeholder="模式数据" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="相似度 (similarity)">
            <el-input-number v-model="form.similarity" :min="0" :max="100" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最小评分 (faceScore)">
            <el-input-number v-model="form.faceScore" :min="0" :max="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最大评分 (faceScoreMax)">
            <el-input-number v-model="form.faceScoreMax" :min="0" :max="100" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="排序字段 (sortord)">
            <el-select v-model="form.sortord" placeholder="请选择排序字段">
              <el-option label="importTime" value="importTime" />
              <el-option label="similarity" value="similarity" />
              <el-option label="faceScore" value="faceScore" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序方式 (order)">
            <el-select v-model="form.order">
              <el-option label="升序" value="ascend" />
              <el-option label="降序" value="descend" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="出现时间范围">
            <el-date-picker
              v-model="form.appearTimeRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库时间范围">
            <el-date-picker
              v-model="form.importTimeRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="频次是否返回">
            <el-switch v-model="form.OccurrencesInfo.enabled" active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出现频次 (occurrences)">
            <el-input-number v-model="form.OccurrencesInfo.occurrences" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="频次搜索类型 (occurrencesSearchType)">
            <el-select v-model="form.OccurrencesInfo.occurrencesSearchType" placeholder="选择类型">
              <el-option label="大于" value="greater" />
              <el-option label="小于" value="less" />
              <el-option label="等于" value="equal" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 底部操作 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm">查 询</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "FaceSearchDialog",
  props: {
    visible: Boolean
  },
  data() {
    return {
      form: {
        searchID: "",
        searchResultPosition: 0,
        maxResults: 100,
        name: "",
        sex: "",
        bornTime: "",
        province: "",
        city: "",
        certificateType: "",
        certificateNumber: "",
        phoneNumber: "",
        modelStatus: "",
        modelingStatus: "",
        FaceModeList: "",
        similarity: 0,
        faceScore: 0,
        faceScoreMax: 100,
        sortord: "importTime",
        order: "descend",
        appearTimeRange: [],
        importTimeRange: [],
        enabled: false,
        occurrences: 0,
        occurrencesSearchType: ""
      }
    };
  },
  methods: {
    handleClose() {
      this.$emit("search:visible", false);
    },
    submitForm() {
      const payload = {
        searchID: Date.now().toString(), // 搜索记录唯一标识
        searchResultPosition: this.form.searchResultPosition,
        maxResults: this.form.maxResults,
        FDID: this.form.FDID,
        condition: {
          name: this.form.name,
          sex: this.form.sex,
          bornTime: this.form.bornTime,
          province: this.form.province,
          city: this.form.city,
          certificateType: this.form.certificateType,
          certificateNumber: this.form.certificateNumber,
          phoneNumber: this.form.phoneNumber,
          modelStatus: this.form.modelStatus,
          modelingStatus: this.form.modelingStatus,
          FaceModeList: this.form.FaceModeList,
          similarity: this.form.similarity,
          faceScore: this.form.faceScore,
          faceScoreMax: this.form.faceScoreMax,
          sortord: this.form.sortord,
          order: this.form.order,
          appearTimeRange: this.form.appearTimeRange,
          importTimeRange: this.form.importTimeRange,
          enabled: this.form.enabled,
          occurrences: this.form.occurrences,
          occurrencesSearchType: this.form.occurrencesSearchType
        }
      };

      console.log("📡 查询请求体:", JSON.stringify(payload, null, 2));
    }
  }
};
</script>

<style>
.custom-dialog {
  background-color: #003c68;
  width: 1200px !important;
}
/* 设置对话框标题颜色为白色 */
.custom-dialog .el-dialog__title {
  color: white !important;
}

.user-form .el-form-item .el-input,
.user-form .el-form-item .el-input-number,
.user-form .el-form-item .el-select,
.user-form .el-form-item .el-date-picker {
  width: 250px; /* 统一右侧控件宽度 */
}
</style>