对比库管理2

heyujie

2021-12-10 e0231a8dd254d9418eed6619161e6b957633fe11

对比库管理2

 src/components/searching/uploadForModel.vue

@@ -318,7 +318,8 @@
    }
  }
  .el-upload--picture-card {
    width: 260px !important;
    width: 260px !important;    background-color: #fff;

  }
  .el-upload-list--picture-card {
    width: 260px !important;

 src/pages/index/App.vue

@@ -180,7 +180,6 @@
    async getLoginUserData() {
      let res = await getLoginUserData()
      if (res.success) {
        debugger
        sessionStorage.setItem('userInfo', JSON.stringify(res.data))
        this.$notify.success("登录成功！")
        // 获取权限

 src/pages/library/components/addBase.vue

@@ -1,5 +1,9 @@
<template>
  <div>
  <div class="add-base-c">
    <div class="header">
      <span>底库信息</span>
      <i class="iconfont iconcha" @click="onCancle"></i>
    </div>
    <el-form
      ref="baseForm"
      :model="form"
@@ -10,18 +14,28 @@
    >
      <el-row>
        <el-col :span="10" :offset="1">
          <el-form-item label="名称" label-width="80px" style="width:100%" required prop="tableName">
            <el-input size="small" v-model="form.tableName" placeholder="请输入"></el-input>
          <el-form-item
            label="名称"
            label-width="80px"
            style="width: 100%"
            required
            prop="tableName"
          >
            <el-input
              size="small"
              v-model="form.tableName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="对接数据库" label-width="100px" :span="11">
          <el-form-item label="对接数据库" label-width="90px" :span="11">
            <el-select
              size="small"
              v-model="form.cameraBrand"
              disabled
              disabled   
              placeholder="请选择对接数据库"
              style="width:100%"
              style="width: 100%"
            >
              <el-option label="人员库" value="person"></el-option>
              <el-option label="在逃库" value="zaitao"></el-option>
@@ -31,16 +45,58 @@
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" :offset="1">
          <el-form-item label="类型" label-width="80px" style="width:100%" required prop="tableType">
            <el-select size="small" v-model="form.tableType" placeholder="请选择" style="width:100%">
              <el-option label="人员库" value="person"></el-option>
              <el-option label="车辆" value="car"></el-option>
            </el-select>
        <el-col :span="10" :offset="1" class="start-time-pick">
          <el-form-item
            label="有效时间"
            label-width="80px"
            style="width: 100%"
            required
            prop="startTime"
          >
            <el-col :span="11" class>
              <el-date-picker
                size="small"
                type="datetime" 
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.startTime"
                :picker-options="pickerOptions"
                style="width: 100%; "
              ></el-date-picker>
              <!-- <el-checkbox
                v-model="foreverChecked"
                @change="forever"
                class="check-css"
                >永久有效</el-checkbox
              > -->
              <!-- <el-radio v-model="foreverChecked" label="1">备选项</el-radio> -->
            </el-col>
            <el-col :span="2" class="text-center pick-time">
              <span>-</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker
                size="small"
                class="end-time-pick"
                type="datetime"
                :placeholder="foreverChecked ? '永久有效' : '选择日期'"
                :disabled="foreverChecked"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.endTime"
                :picker-options="pickerOptions"
                style="width: 100%; text-align: center"
              ></el-date-picker>
            </el-col>
            <el-checkbox
              v-model="foreverChecked"
              @change="forever"
              class="check-css"
              >永久有效</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="库地址" label-width="100px" :span="11">
          <el-form-item label="库地址" label-width="90px" :span="11">
            <el-input size="small" disabled placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
@@ -50,64 +106,55 @@
          <el-form-item
            label="黑白名单"
            label-width="80px"
            style="width:100%;text-align:left"
            style="width: 100%; text-align: left"
            required
            prop="bwType"
          >
            <el-radio-group v-model="form.bwType" class>
            <el-radio-group v-model="form.bwType" fill="#4e94ff" text-color="#4e94ff">
              <el-radio :label="`1`">黑名单</el-radio>
              <el-radio :label="`0`">白名单</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="用户名" label-width="100px" :span="11">
            <el-input size="small" v-model="form.userName" disabled placeholder="默认值"></el-input>
          <el-form-item label="用户名" label-width="90px" :span="11">
            <el-input
              size="small"
              v-model="form.userName"
              disabled
              placeholder="默认值"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" :offset="1" class="flex-box">
          <el-form-item
            label="有效时间"
            label="类型"
            label-width="80px"
            style="width:100%"
            style="width: 100%"
            required
            prop="startTime"
            prop="tableType"
          >
            <el-col :span="11" class>
              <el-date-picker
                size="small"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.startTime"
                :picker-options="pickerOptions"
                style="width: 100%;"
              ></el-date-picker>
              <el-checkbox v-model="foreverChecked" @change="forever" class="check-css">永久有效</el-checkbox>
              <!-- <el-radio v-model="foreverChecked" label="1">备选项</el-radio> -->
            </el-col>
            <el-col :span="2" class="text-center pick-time">
              <span>到</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker
                size="small"
                type="datetime"
                placeholder="选择日期"
                :disabled="foreverChecked"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.endTime"
                :picker-options="pickerOptions"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-select
              size="small"
              v-model="form.tableType" :popper-append-to-body="false"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="人员库" value="person"></el-option>
              <el-option label="车辆" value="car"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="密码" label-width="100px" :span="11">
            <el-input size="small" v-model="form.pwd" disabled placeholder="默认值"></el-input>
          <el-form-item label="密码" label-width="90px" :span="11">
            <el-input
              size="small"
              v-model="form.pwd"
              disabled
              placeholder="默认值"
            ></el-input>
            <input v-model="form.id" type="hidden" />
          </el-form-item>
        </el-col>
@@ -122,123 +169,138 @@
          </el-form-item>
        </el-col>
      </el-row>-->
      <el-row>
        <el-col :span="6" :offset="15">
          <el-form-item style="margin-top:50px;text-align:right;" label-width="0px">
            <el-button type="info" size="small" @click="onCancle" style="color:#222">取消</el-button>
            <el-button type="primary" size="small" @click="onSubmit('baseForm')" class="save">保存</el-button>
          </el-form-item>
        </el-col>
      <el-row class="footer">
        <el-button
          type="info"
          size="small"
          @click="onCancle"
          style="color: #222"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="onSubmit('baseForm')"
          class="save"
          >保存</el-button
        >
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { addBase, updateBase } from '@/api/baseLibrary'
import { addBase, updateBase } from "@/api/baseLibrary";
export default {
  name: 'addBase',
  name: "addBase",
  data() {
    const validatePass = (rule, value, callback) => {
      if (this.form.startTime && this.form.startTime !== '') {
      debugger
      if (this.form.startTime && this.form.startTime !== "") {
        if (this.dateCompare(this.form.startTime, value) !== 1) {
          callback(new Error('结束时间不能大于开始时间！'))
          callback(new Error("结束时间不能大于开始时间！"));
        } else {
          callback()
          callback();
        }
      }
    }
    };
    return {
      foreverChecked: false,
      form: {
        analyServerId: '',
        tableName: '',
        analyServerId: "",
        tableName: "",
        startTime: new Date(),
        tableType: '',
        isForever: '0',
        id: '',
        endTime: '',
        bwType: '1',
        tableType: "",
        isForever: "0",
        id: "",
        endTime: "",
        bwType: "1",
        enable: 0, // 1生效，0未生效
        isSync: '1', // 1为同步，0为本地
        tableDesc: '' // 底库描述 
        isSync: "1", // 1为同步，0为本地
        tableDesc: "", // 底库描述
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      rules: {
        tableName: [
          { required: true, message: '底库名称不能为空' }
        ],
        tableType: [
          { required: true, message: '底库类型不能为空' }
        ],
        bwType: [
          { required: true, message: '黑白名单必选' }
        ],
        tableName: [{ required: true, message: "底库名称不能为空" }],
        tableType: [{ required: true, message: "底库类型不能为空" }],
        bwType: [{ required: true, message: "黑白名单必选" }],
        startTime: [
          { required: !this.foreverChecked, message: '请选择起始时间' }
          { required: !this.foreverChecked, message: "请选择起始时间" },
        ],
        endTime: [
          { validator: validatePass, trigger: 'change' }
        ]
      }
    }
        endTime: [{ validator: validatePass, trigger: "change" }],
      },
    };
  },
  mounted() {
    this.init()
    this.init();
  },
  watch: {
    baseObject: function (newVal, oldVal) {
      this.foreverChecked = false
      this.form = newVal
      console.log(this.form, 'baseObject')
      if (!newVal.endTime || newVal.endTime === undefined || newVal.endTime === null) {
        this.form.isForever = '1'
        this.foreverChecked = true
      this.foreverChecked = false;
      this.form = newVal;
      console.log(this.form, "baseObject");
      if (
        !newVal.endTime ||
        newVal.endTime === undefined ||
        newVal.endTime === null
      ) {
        this.form.isForever = "1";
        this.foreverChecked = true;
      } else {
        this.form.isForever = '0'
        this.foreverChecked = false
        this.form.isForever = "0";
        this.foreverChecked = false;
      }
    },
    'form.endTime': function (newVal, oldVal) {
    "form.endTime": function (newVal, oldVal) {
      if (!newVal || newVal === null || newVal === undefined) {
        this.form.isForever = '1'
        this.foreverChecked = true
        this.form.isForever = "1";
        this.foreverChecked = true;
      } else {
        this.form.isForever = '0'
        this.foreverChecked = false
        if (this.form.startTime && this.form.startTime !== '') {
        this.form.isForever = "0";
        this.foreverChecked = false;
        if (this.form.startTime && this.form.startTime !== "") {
          // console.log(this.form.startTime, newVal)

          if (this.dateCompare(this.$moment(this.form.startTime).format('YYYY-MM-DD'), this.$moment(newVal).format('YYYY-MM-DD')) !== 1) {
          if (
            this.dateCompare(
              this.$moment(this.form.startTime).format("YYYY-MM-DD"),
              this.$moment(newVal).format("YYYY-MM-DD")
            ) !== 1
          ) {
            this.$toast({
              type: 'warning',
              message: '结束时间不能小于开始时间！'
            })
            this.form.endTime = ''
              type: "warning",
              message: "结束时间不能小于开始时间！",
            });
            this.form.endTime = "";
          }
        }
      }
    },
    'form.startTime': function (newVal, oldVal) {
    "form.startTime": function (newVal, oldVal) {
      if (newVal) {
        if (this.form.endTime && this.form.endTime !== '') {
          if (this.dateCompare(this.$moment(this.form.endTime).format('YYYY-MM-DD'), this.$moment(newVal).format('YYYY-MM-DD')) === 1) {
        if (this.form.endTime && this.form.endTime !== "") {
          if (
            this.dateCompare(
              this.$moment(this.form.endTime).format("YYYY-MM-DD"),
              this.$moment(newVal).format("YYYY-MM-DD")
            ) === 1
          ) {
            this.$toast({
              type: 'warning',
              message: '结束时间不能小于开始时间！'
            })
            this.form.endTime = ''
              type: "warning",
              message: "结束时间不能小于开始时间！",
            });
            this.form.endTime = "";
          }
        }
      }
    }
    },
  },
  methods: {
    onSubmit(formName) {
      console.log(this.form.id, 'submit')
      console.log(this.form.id, "submit");
      if (this.form.id) {
        // id不为空，修改底库
        this.$refs[formName].validate(async (valid) => {
@@ -247,146 +309,282 @@
            let res = await updateBase({
              analyServerId: this.form.analyServerId,
              tableName: this.form.tableName,
              startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD HH:mm:ss'),
              startTime: this.$moment(this.form.startTime).format(
                "YYYY-MM-DD HH:mm:ss"
              ),
              tableType: this.form.tableType,
              isForever: this.foreverChecked ? '1' : '0',
              isForever: this.foreverChecked ? "1" : "0",
              id: this.form.id,
              endTime: this.form.endTime ? this.$moment(this.form.endTime).format('YYYY-MM-DD HH:mm:ss') : '',
              endTime: this.form.endTime
                ? this.$moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss")
                : "",
              bwType: this.form.bwType,
              enable: this.form.enable,
              tableDesc: this.form.tableDesc,
              // isSync: this.form.isSync,
            })
            });
            if (res.success === true) {
              this.$notify({
                title: "成功",
                message: "底库信息保存成功！",
                type: "success"
                type: "success",
              });
              this.$emit('refresh')
              this.$emit("refresh");
            } else {
              this.$notify({
                title: "失败",
                message: "底库信息保存失败！",
                type: "error"
                type: "error",
              });
            }
          }
        })
        });
      } else {
        // id为空，新增底库
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            addBase({
              tableName: this.form.tableName,
              startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD 00:00:00'),
              startTime: this.$moment(this.form.startTime).format(
                "YYYY-MM-DD 00:00:00"
              ),
              tableType: this.form.tableType,
              isForever: this.foreverChecked ? '1' : '0',
              isForever: this.foreverChecked ? "1" : "0",
              id: this.form.id,
              endTime: this.form.endTime ? this.$moment(this.form.endTime).format('YYYY-MM-DD 23:59:59') : '',
              endTime: this.form.endTime
                ? this.$moment(this.form.endTime).format("YYYY-MM-DD 23:59:59")
                : "",
              bwType: this.form.bwType,
              enabled: this.form.enabled,
              tableDesc: this.form.tableDesc,
              analyServerId: this.type,
              // isSync: this.form.isSync,
            }).then((res) => {
              this.$notify({
                title: "成功",
                message: "底库信息保存成功！",
                type: "success"
              });
              this.$emit('refresh')
            }).catch((err) => {
              this.$notify({
                title: "失败",
                message: err.data,
                type: "error"
              });
            })
              .then((res) => {
                this.$notify({
                  title: "成功",
                  message: "底库信息保存成功！",
                  type: "success",
                });
                this.$emit("refresh");
              })
              .catch((err) => {
                this.$notify({
                  title: "失败",
                  message: err.data,
                  type: "error",
                });
              });
          }
        })
        });
      }
    },
    onCancle() {
      this.$emit('closeAdd')
      this.$emit("closeAdd");
    },
    forever(value) {
      if (value) {
        this.form.endTime = ''
        this.form.endTime = "";
      }
    },
    init() {
      console.log('添加底库表单收到的数据', this.baseObject, this.type)
      console.log("添加底库表单收到的数据", this.baseObject, this.type);
      if (Object.keys(this.baseObject).length > 3) {
        this.form = this.baseObject
        this.form = this.baseObject;
        if (!this.form.endTime) {
          this.foreverChecked = true
          this.foreverChecked = true;
        } else {
          this.foreverChecked = false
          this.foreverChecked = false;
        }
      } else {
        this.$refs.baseForm.resetFields()
        this.$refs.baseForm.resetFields();
      }
    },
    dateParse(dateString) {
      var SEPARATOR_BAR = '-'
      var SEPARATOR_SLASH = '/'
      var SEPARATOR_DOT = '.'
      var dateArray
      var SEPARATOR_BAR = "-";
      var SEPARATOR_SLASH = "/";
      var SEPARATOR_DOT = ".";
      var dateArray;
      if (dateString.indexOf(SEPARATOR_BAR) > -1) {
        dateArray = dateString.split(SEPARATOR_BAR)
        dateArray = dateString.split(SEPARATOR_BAR);
      } else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
        dateArray = dateString.split(SEPARATOR_SLASH)
        dateArray = dateString.split(SEPARATOR_SLASH);
      } else {
        dateArray = dateString.split(SEPARATOR_DOT)
        dateArray = dateString.split(SEPARATOR_DOT);
      }
      return new Date(dateArray[0], dateArray[1] - 1, dateArray[2])
      return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
    },
    isEmpty(str) {
      if (!str || str === undefined || str === null) {
        return true
        return true;
      } else {
        return false
        return false;
      }
    },
    dateCompare(dateString, compareDateString) {
      // dateString:当前时间
      // compareDateString:需要比较的时间
      if (this.isEmpty(dateString)) {
        // alert('dateString不能为空')  
        return
        // alert('dateString不能为空')
        return;
      }
      if (this.isEmpty(compareDateString)) {
        // alert('compareDateString不能为空')  
        return 1
        // alert('compareDateString不能为空')
        return 1;
      }
      var dateTime = this.dateParse(dateString).getTime()
      var compareDateTime = this.dateParse(compareDateString).getTime()
      var dateTime = this.dateParse(dateString).getTime();
      var compareDateTime = this.dateParse(compareDateString).getTime();
      if (compareDateTime > dateTime) {
        return 1
        return 1;
      } else if (compareDateTime === dateTime) {
        return 0
        return 0;
      } else {
        return -1
        return -1;
      }
    }
    },
  },
  props: {
    baseObject: {
      default: () => { },
      type: Object
      default: () => {},
      type: Object,
    },
    type: {
      default: 'sync',
      type: String
      default: "sync",
      type: String,
    },
  },
};
</script>
<style lang="scss">
.add-base-c {
  background: #ffffff;
  border-radius: 24px;
  height: 100%;
  .header {
    height: 52px;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 8%);
    text-align: center;
    line-height: 52px;
    position: relative;
        background: #fff;
    border-radius: 24px 24px 0 0;
    span {
      font-size: 14px;
      line-height: 20px;
      color: #5f5f5f;
    }
    i {
      color: #999999;
      position: absolute;
      right: 20px;
      cursor: pointer;
      font-size: 14px;
    }
  }
  .add-base-form {
    padding: 30px 20px;
    .el-form-item__label {
      color: #999999;
    }
    .footer {
      margin-top: 40px;
      .el-button--info {
        color: #999999;
        background: #fff;
        padding: 9px 37px;
        font-size: 14px;
        border: 1px solid #999999;
        border-radius: 18px;
        width: 150px;
      }
      .el-button--primary {
        background: #4e94ff !important;
        padding: 9px 37px;
        color: #fff;
        border: 1px solid #4e94ff !important;
        border-radius: 18px;
        font-size: 14px;
        width: 150px;
      }
    }
    .el-radio__input.is-checked .el-radio__inner {
    border-color: #4e94ff;
    background: #4e94ff;
}
.el-radio__input.is-checked + .el-radio__label {
    color: #4e94ff;
}
.el-select .el-input.is-focus .el-input__inner {
    border-color: #4e94ff;
}
    .end-time-pick.is-disabled .el-input__inner {
      background-color: #fff;
      // border-color: #dfe4ed;
      cursor: not-allowed;
    }
    .el-form-item__content {
      line-height: 32px;
    }
    .el-form-item__label{
      line-height: 32px;
    }
    .el-form-item {
    margin-bottom: 0;
    height: 65px;
}
    .end-time-pick.is-disabled .el-input__inner::placeholder {
      color: #606266;
    }
    // .el-date-editor .el-input__inner {
    //   text-align: center;
    // }
    .el-select-dropdown__item.selected {
    color: #4e94ff;
} .el-select-dropdown__item {
  border-radius: 8px;
}
.el-select-dropdown__item.selected.hover {
    color: #fff;
}
.el-select-dropdown__item:hover,.el-select-dropdown__item.selected:hover {
    background-color: #4e94ff;
    color: #fff;
}.el-select-dropdown {
    border-radius: 8px;
    box-shadow: 0px 0px 8px rgb(0 0 0 / 16%);
}.popper__arrow {
    top: -8px;
}.el-select-dropdown__list {
    padding: 0;
}
    .el-input--small .el-input__inner {
      height: 32px;
      line-height: 32px;
      border: 1px solid #d3d5d8;
      border-radius: 16px;
    }
    .el-col-9 {
      width: 46%;
      margin-left: 5%;
    }
    .el-col-10 {
      width: 46%;
      margin-left: 2%;
    }
    .el-form-item__error {
      color: #fe6d68;
      padding-top: 3px;
      left: 15px;
    }
    .start-time-pick{
      .el-form-item__error {
          top: 36px;
    left: 105px;
    }
    }
  }
}
</script>
<style lang="scss">
.add-base-form {
  margin-top: 50px;
}

.el-radio__inner {
  border: 1px solid #dcdfe6;
  border-radius: 100%;
@@ -402,18 +600,23 @@
//   background: #3d68e1;
// }
.save {
  background: #3d68e1;
  background: #4e94ff;
  border-radius: 2px;
  outline: none;
}
.check-css {
  position: relative;
  left: -42px;
  height: 20px;
  left: -187px;    top: -4px;
  line-height: 20px;
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #4e94ff;
}
  .el-checkbox__inner {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    // border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 14px;
@@ -427,8 +630,8 @@
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #3d68e1;
    border-color: #3d68e1;
    background-color: #4e94ff;
    border-color: #4e94ff;
  }
}


 src/pages/library/components/baseList.vue

@@ -345,7 +345,6 @@
      this.$emit("changeShow", item, type);
    },
    deleteBase(id) {
      debugger;
      let token =
        sessionStorage.getItem("loginedInfo") &&
        JSON.parse(sessionStorage.getItem("loginedInfo")).access_token;

 src/pages/library/components/carList.vue

@@ -844,6 +844,7 @@
      }
    },
    deleteThis(id) {
      debugger
      let token =
        sessionStorage.getItem("loginedInfo") &&
        JSON.parse(sessionStorage.getItem("loginedInfo")).access_token;
@@ -1420,8 +1421,8 @@
}
.mask1 {
  position: absolute;
  width: 150px;
  height: 150px;
  width: 100px;
  height: 100px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(1px) brightness(100%);
  text-align: center;
@@ -1539,61 +1540,59 @@
  padding-left: 8px !important;
  padding-right: 0px !important;
}
.addToBase1 {
  width: 98%;
  height: 350px;
  position: relative;
  .topLabel {
    margin-top: 20px;
    height: 40px;
    border-bottom: 1px solid #eee;
    font-family: PingFangSC-Medium;
    font-size: 20px;
    font-weight: 600;
    line-height: 1rem;
    color: #222222;
    text-align: left;
    margin-left: 15px;
  }
  .items {
    width: 100%;
    height: auto;
    max-height: 35%;
    overflow-y: auto;
    margin: 20px 0px;
    .lable {
      width: 15%;
      margin-top: 10px;
      float: left;
      //font-family: PingFangSC-Medium;
      font-size: 14px;
      font-weight: 600;
    }
    .baseList {
      width: 85%;
      height: 100%;
      float: left;
      .base {
        width: calc(33% - 10px);
        padding: 0px 5px;
        line-height: 30px;
        float: left;
        text-align: left;
        font-size: 12px !important;
        .el-checkbox {
          width: 100%;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .el-checkbox__label {
            display: inline !important;
          }
        }
      }
    }
  }
}
// .addToBase1 {
//   height: 350px;
//   position: relative;
//   .topLabel {
//     margin-top: 20px;
//     height: 40px;
//     border-bottom: 1px solid #eee;
//     font-family: PingFangSC-Medium;
//     font-size: 20px;
//     font-weight: 600;
//     line-height: 1rem;
//     color: #222222;
//     text-align: left;
//     margin-left: 15px;
//   }
//   .items {
//     width: 100%;
//     height: auto;
//     overflow-y: auto;
//       margin-bottom: 20px;
//     .lable {
//       // width: 15%;
//       margin-top: 10px;
//       // float: left;
//       //font-family: PingFangSC-Medium;
//       font-size: 14px;
//       font-weight: 600;
//     }
//     .baseList {
//       // width: 85%;
//       height: 100%;
//       // float: left;
//       .base {
//         width: calc(33% - 10px);
//         padding: 0px 5px;
//         line-height: 30px;
//         float: left;
//         text-align: left;
//         font-size: 12px !important;
//         .el-checkbox {
//           width: 100%;
//           display: block;
//           overflow: hidden;
//           text-overflow: ellipsis;
//           white-space: nowrap;
//           .el-checkbox__label {
//             display: inline !important;
//           }
//         }
//       }
//     }
//   }
// }
.copy,
.move {
  .el-dialog__body {
@@ -1602,9 +1601,9 @@
}

.avatar-uploader {
  max-width: 150px;
  min-width: 150px;
  min-height: 152px;
   max-width: 100px;
  min-width: 100px;
  min-height: 100px;
  border: 1px solid #eee;
}


 src/pages/library/components/personList.vue

@@ -36,7 +36,7 @@
            <span
              class="iconfont iconfont-wrap iconshanchuku-09"
              v-if="isShow('library:set')"
              @click.stop="deleteBase"
              @click.stop="askDelete('base')"
            ></span>
          </el-tooltip>

@@ -50,53 +50,7 @@
        </div>
      </div>
    </el-row>
    <!-- <el-row class style="margin: 40px 0 40px 0px">
      <el-col :span="6">
        <el-input
          placeholder="姓名/性别/身份证号/手机号"
          autocomplete="off"
          width="100%"
          size="small"
          v-model="BaseManageData.contentValue"
          @keyup.enter.native="handleSearch"
        >
          <upload-icon slot="suffix"></upload-icon>
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button size="small" type="primary" @click="handleSearch"
          >搜索</el-button
        >
      </el-col>
      <el-col :offset="11" :span="3">
        <fTemplate authority="library:set">
          <el-button
            size="small"
            class="ml10"
            type="danger"
            @click="deleteBatch"
            v-if="isShow('library:set')"
            >批量删除</el-button
          >
        </fTemplate>
      </el-col>
      <el-col :span="2">
        <div class="text-left">
          <UploadBtn
            limitTypes=".jpg,.png,.jpeg"
            limitSize
            uploadBtntext="上传照片"
            uploadBtnIcon
            v-if="isShow('library:set')"
            uploadBtnSize="small"
            :isDrag="true"
            @addFilesBaBackFN="changeDialog"
            @successFN="getUploadResult"
            :idJson="{ tableId: baseObject.id }"
          />
        </div>
      </el-col>
    </el-row> -->

    <div class="border-tabl">
      <div class="head-search">
        <div class="desc">
@@ -125,8 +79,7 @@
          >
            <span
              class="iconfont iconfont-wrap iconpiliangshanchu-09"
              title="删除"
              @click="deleteBatch"
              @click="askDelete('batch')"
              v-if="isShow('library:set')"
            ></span>
          </el-tooltip>
@@ -158,9 +111,15 @@
        tooltip-effect="dark"
        style="width: 100%; overflow: auto"
        :fit="true"
        cell-class-name="cell-classname"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
        :header-cell-style="{
          background: '#fff',
          color: '#222222',
          padding: '2px 1px',
          borderBottom: 'none',
        }"
      >
        <el-table-column type="selection" width="30"></el-table-column>
        <!-- <el-table-column label="序号" width="60" sortable align="center">
@@ -183,13 +142,15 @@
            </p>
          </template>
        </el-table-column>
        <el-table-column label="生效状态" align="center" width="80">
        <el-table-column label="生效状态" align="center" min-width="70">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              :active-value="1"
              :disabled="!isShow('library:set')"
              :inactive-value="0"
              active-color="#4E94FF"
              inactive-color="#C4C4C4"
              @change="enable(scope.row)"
            ></el-switch>
          </template>
@@ -197,7 +158,7 @@
        <el-table-column
          prop="personName"
          label="姓名"
          min-width="90"
          min-width="70"
          show-overflow-tooltip
          sortable
          align="center"
@@ -205,14 +166,14 @@
        <el-table-column
          prop="sex"
          label="性别"
          width="70"
          min-width="60"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证号"
          min-width="170"
          min-width="150"
          show-overflow-tooltip
          sortable
          align="center"
@@ -220,7 +181,7 @@
        <el-table-column
          prop="phoneNum"
          label="手机号"
          width="110"
          min-width="100"
          show-overflow-tooltip
          sortable
          align="center"
@@ -229,19 +190,19 @@
          prop="monitorLevel"
          label="等级"
          align="center"
          width="80"
          min-width="50"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="入库时间"
          width="140"
          min-width="140"
          show-overflow-tooltip
          sortable
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="reserved" label="其他" align="center"></el-table-column> -->

        <el-table-column label="操作" min-width="200" align="center">
        <el-table-column label="操作" min-width="130" align="center">
          <template slot-scope="scope">
            <fTemplate authority="library:set">
              <el-tooltip
@@ -250,73 +211,82 @@
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconfont-wrap iconbianji"
                  style="font-size: 15px"
                  class="iconfont iconbianjixinxi-09"
                  style="font-size: 24px; cursor: pointer"
                  @click="handleClick(scope.row)"
                ></span>
              </el-tooltip>
            </fTemplate>
            <el-tooltip
              content="查找此人"
              placement="top"
              popper-class="atooltip"
            <el-popover
              placement="left"
              trigger="click"
              popper-class="popper-caozuo"
            >
              <el-tooltip
                content="查找此人"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconchazhaociren-09"
                  @click="tosearch(scope.row)"
                ></span>
              </el-tooltip>
              <el-tooltip
                content="查看详情"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconchakanxiangqing-09"
                  @click="showDetail(scope.row)"
                ></span>
              </el-tooltip>
              <fTemplate authority="library:set">
                <el-tooltip
                  content="复制"
                  placement="top"
                  popper-class="atooltip"
                >
                  <span
                    class="iconfont iconfuzhi-09"
                    title="复制"
                    @click="copyClick(scope.row)"
                  ></span>
                </el-tooltip>
              </fTemplate>
              <fTemplate authority="library:set">
                <el-tooltip
                  content="移动"
                  placement="top"
                  popper-class="atooltip"
                >
                  <span
                    class="iconfont iconyidong-09"
                    title="移动"
                    @click="moveClick(scope.row)"
                  ></span>
                </el-tooltip>
              </fTemplate>
              <fTemplate authority="library:set" class="del-wrap">
                <el-tooltip
                  content="删除"
                  placement="top"
                  popper-class="atooltip"
                >
                  <span
                    class="iconfont iconshanchu-09"
                    @click="askDelete('single', scope.row.id)"
                  ></span>
                </el-tooltip>
              </fTemplate>
              <span
                class="iconfont iconsousuoren"
                @click="tosearch(scope.row)"
                slot="reference"
                class="iconfont icongengduocaozuo-09"
                style="font-size: 24px; cursor: pointer"
              ></span>
            </el-tooltip>
            <el-tooltip
              content="查看详情"
              placement="top"
              popper-class="atooltip"
            >
              <span
                class="iconfont iconsousuoren"
                @click="showDetail(scope.row)"
              ></span>
            </el-tooltip>
            <fTemplate authority="library:set">
              <el-tooltip
                content="复制"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconfuzhi"
                  title="复制"
                  @click="copyClick(scope.row)"
                ></span>
              </el-tooltip>
            </fTemplate>
            <fTemplate authority="library:set">
              <el-tooltip
                content="移动"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconyidongzhi"
                  style="font-size: 15px"
                  title="移动"
                  @click="moveClick(scope.row)"
                ></span>
              </el-tooltip>
            </fTemplate>
            <fTemplate authority="library:set">
              <el-tooltip
                content="删除"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconshanchuku-09"
                  style="color: #e74c3c"
                  @click="deleteThis(scope.row.id)"
                  title="删除"
                ></span>
              </el-tooltip>
            </fTemplate>
              <!-- @click="handleClick(scope.row)" -->
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
@@ -347,45 +317,23 @@
      title="抓拍详情"
      :visible.sync="cameraDetailVisible"
      okText="确定"
      custom-class="zhuapai-dialog"
    >
      <div class="top-bar">
        <el-date-picker
          size="mini"
          @change="timeChange"
          v-model="timeRange"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
        <div style="margin: 0 10px; display: flex">
          <span style="width: 68px">停留时长:</span>
          <el-input
            size="mini"
            style="width: 80px"
            v-model.number="reqCameraParams.thresholdTime"
          ></el-input
          >s
        </div>
        <el-button size="mini" type="primary" @click="postCameraData"
          >查询</el-button
        >
      </div>

      <div class="member-info">
        <label class>人员信息:</label>
        <label class>
          <i class="iconfont icongerenxinxi_v" style="font-size: 30px"></i>
        </label>
        <ul>
          <li>
            <span>姓名:</span>
            <!-- <span>姓名:</span> -->
            <span>{{ memberInfo.personName }}</span>
          </li>
          <li>
            <span>性别:</span>
            <!-- <span>性别:</span> -->
            <span>{{ memberInfo.sex }}</span>
          </li>
          <li>
            <span>身份证号:</span>
          <li style="margin-right: 80px">
            <!-- <span>身份证号:</span> -->
            <span>{{ memberInfo.idCard }}</span>
          </li>
          <li>
@@ -395,6 +343,39 @@
        </ul>
      </div>

      <div class="top-bar">
        <div style="display: flex">
          <span style="margin-right: 10px">停留时长</span>
          <el-input
            size="mini"
            style="width: 58px; margin-right: 4px"
            v-model.number="reqCameraParams.thresholdTime"
          ></el-input
          >s
        </div>
        <div style="display: flex">
          <span style="margin-right: 10px">时期</span>
          <el-date-picker
            size="mini"
            popper-class="popper-pick"
            @change="timeChange"
            v-model="timeRange"
            align="center"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-date-picker>
        </div>

        <el-button size="mini" type="primary" @click="postCameraData"
          >查询</el-button
        >
      </div>
      <p style="text-align: right; font-size: 14px; color: #5f5f5f">
        共{{ faceDataCount }}条数据
      </p>
      <el-table :data="cameraDetailData" border>
        <el-table-column
          prop="faceImg"
@@ -445,11 +426,17 @@
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align: right; font-size: 14px">
        共{{ faceDataCount }}条数据
      </p>

      <div class="bot-btn">
        <el-button
          size="mini"
          type="primary"
          @click="cameraDetailVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
    <!-- <el-dialog
      title="修改信息"
      :visible.sync="dialogFormVisible"
      okText="保存"
@@ -497,8 +484,8 @@
              v-if="`httpImage/` + form.personPicUrl"
              :src="`/httpImage/` + form.personPicUrl"
              style="
                max-height: 150px;
                width: 150px;
                max-height: 100px;
                width: 100px;
                object-fit: contain;
                background: rgba(0, 0, 0, 0.35);
              "
@@ -659,15 +646,232 @@
          >确 定</el-button
        >
      </div>
    </el-dialog>
    </el-dialog> -->
    <el-drawer title="修改信息" :modal="false" :visible.sync="showInfoDrawer">
      <!-- :before-close="handleClose" -->
      <el-form
        ref="formForEdit"
        :model="form"
        label-width="100px"
        :rules="rules"
      >
        <div class="flex-center mb10">
          <el-upload
            class="avatar-uploader"
            action
            :http-request="updateFace"
            accept="image/*"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
          >
            <div class="mask1">
              <div
                slot="trigger"
                class="flex-center"
                style="position: absolute; top: 70px"
              >
                <p
                  style="
                    background: rgba(0, 0, 0, 0.35);
                    width: 100px;
                    line-height: 30px;
                    color: #fff;
                    font-size: 13px;
                    opacity: 1;
                  "
                >
                  点击修改照片
                </p>
              </div>
            </div>
            <img
              v-if="`httpImage/` + form.personPicUrl"
              :src="`/httpImage/` + form.personPicUrl"
              style="
                max-height: 100px;
                width: 100px;
                object-fit: contain;
                background: rgba(0, 0, 0, 0.35);
              "
              class="avatar"
            />
          </el-upload>
        </div>
        <el-row>
          <el-col :span="20">
            <el-form-item label="ID" style="width: 100%; margin-bottom: 14px">
              <el-input
                size="small"
                v-model="form.id"
                disabled
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item
              label="照片标识"
              prop="picDesc"
              style="width: 100%; margin-bottom: 14px"
            >
              <el-input
                size="small"
                v-model="form.picDesc"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="姓名" style="width: 100%; margin-bottom: 14px">
              <el-input
                size="small"
                v-model="form.personName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item
              label="性别"
              prop="sex"
              style="width: 100%; margin-bottom: 14px; text-align: left"
            >
              <el-radio-group v-model="form.sex" class="mt10">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item
              label="身份证号"
              style="width: 100%; margin-bottom: 14px"
            >
              <el-input
                size="small"
                v-model="form.idCard"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item
              label="手机号"
              style="width: 100%; margin-bottom: 14px"
            >
              <el-input
                size="small"
                v-model="form.phoneNum"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item
              label="人员等级"
              prop="monitorLevel"
              style="width: 100%; margin-bottom: 14px"
            >
              <el-select
                size="small"
                v-model="form.monitorLevel"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in VideoPhotoData.dictionary.MONITORLEVEL"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item
              label="入库位置"
              style="width: 100%; margin-bottom: 14px"
            >
              <el-input
                size="small"
                v-model="form.fromServerId"
                disabled
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item
              label="入库时间"
              style="width: 100%; margin-bottom: 14px"
            >
              <el-input
                size="small"
                v-model="form.createTime"
                disabled
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="其他" style="width: 100%; margin-bottom: 14px">
              <el-input
                size="small"
                v-model="form.reserved"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button
          size="small"
          class="cancel-btn"
          @click="handleClose"
          type="info"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="sure-btn"
          type="primary"
          @click="submit()"
          >确 定</el-button
        >
      </div>
    </el-drawer>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :close="getPersonList"
      width="30%"
      :center="true"
      custom-class="suc-dialog"
    >
      <div>
        <div class="tl">
        <div class="suc-icon">
          <i class="iconfont iconduigou3"></i>
        </div>
        <div class="tt">上传成功</div>
        <div class="flex-box">
          <span>上传成功的数量：{{ uploadResult.successList.length }}</span>
        </div>
        <div class="flex-box mt10">
@@ -705,20 +909,43 @@
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="askDeleteShow"
      :center="true"
      custom-class="del-dialog"
    >
      <div>
        <div class="suc-icon">
          <i class="iconfont icongantanhao1"></i>
        </div>
        <div class="tt">{{ delText[0] }}</div>
        <div class="flex-box">
          <span>{{ delText[1] }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="askDeleteShow = false">取 消</el-button>
        <el-button type="primary" @click="handleDel">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="复制到"
      :visible.sync="copyVisiabled"
      okText="保存"
      width="35%"
      class="copy"
      custom-class="copy-dialog"
      cancelText="取消"
    >
      <div class="addToBase1">
        <div class="items" v-if="baseObject.bwType === '1'">
          <div class="lable">
            <p>黑名单 ></p>
            <p>黑名单</p>
          </div>
          <div class="baseList">
            <el-checkbox-group
@@ -742,7 +969,7 @@
        </div>
        <div class="items" v-else>
          <div class="lable">
            <p>白名单 ></p>
            <p>白名单</p>
          </div>
          <div class="baseList">
            <el-checkbox-group
@@ -751,6 +978,11 @@
            >
              <div
                class="base"
                :class="
                  BaseManageData.selectWhites.includes(item.value)
                    ? 'white-wrap'
                    : ''
                "
                v-for="(item, index) in BaseManageData.whiteList"
                :key="index"
              >
@@ -777,14 +1009,13 @@
      title="移动至"
      :visible.sync="moveVisiabled"
      okText="保存"
      class="move"
      width="35%"
      custom-class="copy-dialog"
      cancelText="取消"
    >
      <div class="addToBase1">
        <div class="items">
          <div class="lable">
            <p>黑名单 ></p>
            <p>黑名单</p>
          </div>
          <div class="baseList">
            <el-checkbox-group
@@ -809,7 +1040,7 @@
        </div>
        <div class="items">
          <div class="lable">
            <p>白名单 ></p>
            <p>白名单</p>
          </div>
          <div class="baseList">
            <el-checkbox-group
@@ -892,6 +1123,9 @@
        idCard: "",
        reserved: "",
      },
      showPop: true,
      askDeleteShow: false,
      toDeleteId: "",
      reqCameraParams: {
        startTime: new Date(2020, 7, 25, 8).Format("yyyy-MM-dd HH:mm:ss"),
        endTime: new Date().Format("yyyy-MM-dd HH:mm:ss"),
@@ -914,6 +1148,7 @@
      orderName: "createTime",
      contentValue: "",
      visible: false,
      showInfoDrawer: false,
      selectedRowKeys: [],
      form: {
        id: "",
@@ -938,11 +1173,12 @@
        ],
      },
      tableData: [],
      tableHeight: window.innerHeight - 320,
      multipleSelection: [],
      peoperLevel: [],
      // tableHeight: window.innerHeight - 320,
      // multipleSelection: [],
      // peoperLevel: [],
      oldWidth: "",
      oldHeight: "",
      delType: "",
      faceDataCount: 0,
      // 上传后的弹框显示
      dialogVisible: false,
@@ -965,6 +1201,18 @@
        return loginName === "superadmin" || loginName === "basic";
      }
      return false;
    },
    delText() {
      switch (this.delType) {
        case "base":
          return ["删除底库", "确定删除该底库？"];
        case "single":
          return ["删除人员", "确定删除该底库人员？"];
        case "batch":
          return ["批量删除", "确定删除该底库选中人员？"];
        default:
          return ["", ""];
      }
    },
  },
  methods: {
@@ -1007,40 +1255,47 @@
        this.$refs.multipleTable.clearSelection();
      }
    },
    deleteThis(id) {
    askDelete(typ, id) {
      if (typ == "batch") {
        if (this.selectedRowKeys.length === 0) {
          this.$notify({
            type: "warning",
            message: "请选择要删除的人员",
          });
          return;
        }
      }
      this.askDeleteShow = true;
      this.delType = typ;
      id && (this.toDeleteId = id);
    },
    deleteThis() {
      let token =
        sessionStorage.getItem("loginedInfo") &&
        JSON.parse(sessionStorage.getItem("loginedInfo")).access_token;
      this.$confirm("提示：确定删除该底库人员？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",

      fetch(`/data/api-v/dbperson/deleteDbPersonById?id=${this.toDeleteId}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: token,
        },
      })
        .then((_) => {
          fetch(`/data/api-v/dbperson/deleteDbPersonById?id=${id}`, {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              Authorization: token,
            },
          })
            .then((res) => {
              return res.json();
            })
            .then((data) => {
              if (data.success) {
                this.$notify({
                  type: "success",
                  message: "该人员删除成功！",
                });
              }
              this.getPersonList();
            })
            .catch((err) => {
              console.log(err);
            });
        .then((res) => {
          return res.json();
        })
        .catch((_) => {});
        .then((data) => {
          if (data.success) {
            this.$notify({
              type: "success",
              message: "该人员删除成功！",
            });
          }
          this.getPersonList();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sayHello() {
      console.log("hello");
@@ -1085,42 +1340,34 @@
      this.$emit("changeShow", this.baseObject, this.syncType);
    },
    deleteBase() {
      debugger;
      let id = this.baseObject.id;
      let token =
        sessionStorage.getItem("loginedInfo") &&
        JSON.parse(sessionStorage.getItem("loginedInfo")).access_token;
      this.$confirm("提示：确定删除底库？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure",
      }).then(() => {
        fetch(`/data/api-v/dbtable/deleteDBtablesById?id=${id}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: token,
          },
      fetch(`/data/api-v/dbtable/deleteDBtablesById?id=${this.baseObject.id}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: token,
        },
      })
        .then((res) => {
          return res.json();
        })
          .then((res) => {
            return res.json();
          })
          .then((res) => {
            if (res.success) {
              this.$notify({
                type: "success",
                message: "底库删除成功！",
              });
            }
            this.$emit("onDelete");
          })
          .catch((err) => {
        .then((res) => {
          if (res.success) {
            this.$notify({
              type: "error",
              message: err,
              type: "success",
              message: "底库删除成功！",
            });
          }
          this.$emit("onDelete");
        })
        .catch((err) => {
          this.$notify({
            type: "error",
            message: err,
          });
      });
        });
    },
    async getPersonList() {
      if (this.baseObject.id && this.baseObject.id !== undefined) {
@@ -1137,7 +1384,7 @@
      });
    },
    handleClose() {
      this.dialogFormVisible = false;
      this.showInfoDrawer = false;
    },
    handleSelectionChange(val) {
      this.selectedRowKeys = val;
@@ -1154,17 +1401,15 @@
    },
    handleClick(row) {
      this.form = row;
      this.dialogFormVisible = true;
      // this.dialogFormVisible = true;
      this.showInfoDrawer = true;
    },
    async submit() {
      this.$refs["formForEdit"].validate(async (valid) => {
        // console.log("通过验证", valid);
        if (valid) {
          let { ...json } = this.form;
          delete json["compareScore"];
          // console.log("修改的参数：", json);
          let res = await updateBasePerson(json);
          // console.log("保存了", res);
          if (res.success) {
            this.$notify({
              type: "success",
@@ -1218,6 +1463,16 @@
    handleSearch() {
      this.getPersonList();
    },
    handleDel() {
      debugger;
      if (this.delType == "single") {
        this.deleteThis();
      } else if (this.delType == "base") {
        this.deleteBase();
      } else if (this.delType == "batch") {
        this.deleteBatch();
      }
    },
    searchImg() {
      this.$refs.uploadDrag && this.$refs.uploadDrag.uploadStart();
    },
@@ -1229,7 +1484,6 @@
      }
    },
    async searchImgList(faceUrl, threshold) {
      // console.log("搜图参数", faceUrl, threshold);
      let json = {
        tableId: this.baseObject.id,
        page: this.current,
@@ -1240,7 +1494,6 @@
        orderName: this.orderName,
      };
      let res = await getPersonByPhoto(json);
      // console.log("列表查询", json);
      this.tableData = res.data.datalist;
      this.total = res.data.total;
      this.compare = true;
@@ -1250,7 +1503,6 @@
      const fd = new FormData();
      fd.append("file", param.file);
      fd.append("id", this.form.id);
      // console.log("换脸了吗", fd);
      let res = await axios({
        method: "post",
        url: `/data/api-v/dbperson/updateFace`,
@@ -1273,7 +1525,6 @@
      console.log("换脸失败了");
    },
    deleteBatch() {
      // console.log('要删除的', this.selectedRowKeys.length)
      if (this.selectedRowKeys.length === 0) {
        this.$notify({
          type: "warning",
@@ -1289,9 +1540,7 @@
          this.selectedRowKeys.map((item, index) => {
            ids.push(item.id);
          });
          // console.log('批量删除数组', ids)
          let res = await deleteBasePersons(ids);
          // console.log(res, '批量删除结果')
          if (res.success) {
            this.$notify({
              type: "success",
@@ -1580,7 +1829,39 @@
.table-parent {
  height: 100%;
  overflow: visible !important;

  .zhuapai-dialog {
    border-radius: 24px;
    top: 50%;
    min-height: 625px;
    .bot-btn {
      position: absolute;
      bottom: 20px;
      left: calc(50% - 75px);
      .el-button--mini {
        padding: 10px 34px;
        font-size: 14px;
        background: #4e94ff !important;
        border-color: #4e94ff !important;
        width: 150px;
        border-radius: 18px;
      }
    }
    .el-dialog__body {
      padding-top: 0;
    }
    .el-dialog__header {
      box-shadow: 0px 2px 4px rgb(0 0 0 / 8%);
      text-align: center;
      .el-dialog__title {
        line-height: 22px;
        font-size: 16px;
        color: #5f5f5f;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #999999;
      }
    }
  }
  .base-tip {
    text-align: left;
    font-size: 14px;
@@ -1660,6 +1941,71 @@
      color: #ff3d3b;
    }
  }
  .el-drawer {
    box-shadow: -4px 0px 8px rgb(0 0 0 / 16%);
    border-radius: 24px 0px 0px 24px;
    min-width: 380px;
    .el-drawer__body {
      padding: 20px;
      .el-input.is-disabled .el-input__inner {
        border: 1px solid #d4d6d9;
        border-radius: 16px;
        background: #edeff2;
        color: #bbbbbb;
        font-size: 14px;
      }
      .el-input--small {
        font-size: 14px;
        .el-input__inner {
          border: 1px solid #d4d6d9;
          box-sizing: border-box;
          border-radius: 16px;
        }
      }
      .el-form-item__label {
        color: #999999;
      }
      .el-form-item__error {
        color: #fe6d68;
        padding-top: 0px;
        left: 15px;
      }
      .el-form-item.is-required:not(.is-no-asterisk)
        > .el-form-item__label:before {
        color: #fe6d68;
      }
      .el-col-20 {
        width: 92.3333%;
      }
      .dialog-footer {
        margin-top: 10px;
        .sure-btn {
          padding: 11px 65px;
          font-size: 14px;
          border-radius: 18px;
          border-color: #4e94ff !important;
          background: #4e94ff !important;
          color: #fff;
        }
        .cancel-btn {
          padding: 11px 65px;
          font-size: 14px;
          border-radius: 18px;
          background: #ffffff;
          border-color: #999999;
          color: #999999;
        }
      }
    }
    // .move.el-drawer__header {
    //   padding-bottom: 16px;
    //   font-size: 16px;
    //   color: #5f5f5f;
    //   margin-bottom: 0px;
    //   box-shadow: 0px 2px 4px rgb(0 0 0 / 8%);
    //   border-radius: 24px 0px 0px 0px;
    // }
  }
}

.text-left {
@@ -1677,6 +2023,10 @@
  padding: 10px;
  margin-top: 8px;
  box-shadow: 0px 0px 6px 1px rgb(143 159 191 / 15%);
  .cell-classname {
    // background: #ff3d3b;
    border-bottom: 1px solid #eff1f5 !important;
  }
  .head-search {
    font-size: 14px;
    line-height: 20px;
@@ -1706,6 +2056,7 @@
        background: #4e94ff !important;
        border-radius: 0px 18px 18px 0px;
        border-color: #4e94ff !important;
        color: #fff;
      }
      .el-input__suffix {
        top: 6px;
@@ -1758,6 +2109,17 @@
      font-size: 15px;
    }
  }

  .el-table th.el-table__cell > .cell {
    background: #f7f8fa;
    height: 38px;
    line-height: 38px;
  }
  .el-table td.el-table__cell div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: inherit;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #dfdfdf;
@@ -1792,7 +2154,6 @@
.el-dialog__header {
  padding: 20px 0 10px;
  text-align: left;
  -webkit-box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.07);
}
.el-dialog__title {
@@ -1842,66 +2203,59 @@
  padding-left: 8px !important;
  padding-right: 0px !important;
}
.addToBase1 {
  width: 98%;
  height: 350px;
  position: relative;
  .topLabel {
    margin-top: 20px;
    height: 40px;
    border-bottom: 1px solid #eee;
    font-family: PingFangSC-Medium;
    font-size: 20px;
    font-weight: 600;
    line-height: 1rem;
    color: #222222;
    text-align: left;
    margin-left: 15px;
  }
  .items {
    width: 100%;
    height: auto;
    max-height: 35%;
    overflow-y: auto;
    margin: 20px 0px;
    .lable {
      width: 15%;
      margin-top: 10px;
      float: left;
      font-size: 14px;
      font-weight: 600;
    }
    .baseList {
      width: 85%;
      height: 100%;
      float: left;
      .base {
        width: calc(33% - 10px);
        padding: 0px 5px;
        line-height: 30px;
        float: left;
        text-align: left;
        font-size: 12px !important;
        .el-checkbox {
          width: 100%;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .el-checkbox__label {
            display: inline !important;
          }
        }
      }
    }
  }
}
.copy,
.move {
  .el-dialog__body {
    padding: 0px !important;
  }
}
// .addToBase1 {
//   width: 98%;
//   height: 350px;
//   position: relative;
//   .topLabel {
//     margin-top: 20px;
//     height: 40px;
//     border-bottom: 1px solid #eee;
//     font-family: PingFangSC-Medium;
//     font-size: 20px;
//     font-weight: 600;
//     line-height: 1rem;
//     color: #222222;
//     text-align: left;
//     margin-left: 15px;
//   }
//   .items {
//     width: 100%;
//     height: auto;
//     max-height: 35%;
//     overflow-y: auto;
//     margin: 20px 0px;
//     .lable {
//       margin-top: 10px;
//       font-size: 14px;
//       font-weight: 600;
//     }
//     .baseList {
//       height: 100%;
//       .base {
//         width: 152px;
//         padding: 5px 5px;
//         line-height: 30px;
//         float: left;
//         text-align: left;
//         font-size: 12px !important;
//         background: #eff1f5;
//         border-radius: 8px;
//         margin-right: 10px;
//         .el-checkbox {
//           width: 100%;
//           display: block;
//           overflow: hidden;
//           text-overflow: ellipsis;
//           white-space: nowrap;
//           .el-checkbox__label {
//             display: inline !important;
//           }
//         }
//       }
//     }
//   }
// }

.avatar-uploader {
  margin: auto;
@@ -1915,19 +2269,370 @@
  justify-content: space-between;
  align-items: center;
  line-height: 30px;
  margin: 20px 0 10px 0;

  color: #999;
  .el-button--mini {
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 3px;
    background: #4e94ff !important;
    border-radius: 16px;
    border-color: #4e94ff !important;
    width: 128px;
  }
  .el-input--mini .el-input__inner {
    height: 32px;
    line-height: 32px;
    border: 1px solid #d4d5d8;
    border-radius: 16px;
  }
  .el-range-editor--mini.el-input__inner {
    height: 32px;
    border-radius: 16px;
    border: 1px solid #d4d5d8;
    width: 370px;
  }
  .el-range-editor--mini .el-range__icon,
  .el-range-editor--mini .el-range__close-icon {
    line-height: 25px;
  }
  .el-date-range-picker__time-header > .el-icon-arrow-right {
    color: #d4d5d8;
  }
  .el-range-editor--mini .el-range-separator {
    line-height: 32px;
    font-size: 12px;
    height: 32px;
    color: #d4d5d8;
  }
  .el-range-editor--mini .el-range-input {
    font-size: 14px;
  }
}
.el-dialog.el-dialog--center.suc-dialog {
  border-radius: 24px;
  height: 290px;
  width: 360px;
  .el-dialog__header {
    box-shadow: none;
    padding: 10px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #999999;
    font-size: 20px;
  }
  .el-dialog__body {
    text-align: center;
    padding: 0 20px 10px 20px;
  }
  .suc-icon {
    margin-bottom: 20px;
    text-align: center;

    .iconfont {
      font-size: 40px;
      color: #13ce66;
    }
  }
  .dialog-footer {
    .el-button--default {
      color: #999999;
      background: #fff;
      padding: 9px 37px;
      font-size: 14px;
      border: 1px solid #999999;
      border-radius: 18px;
      width: 150px;
    }
    .el-button--primary {
      background: #4e94ff !important;
      padding: 9px 37px;
      color: #fff;
      border: 1px solid #4e94ff !important;
      border-radius: 18px;
      font-size: 14px;
      width: 150px;
    }
  }
  .tt {
    font-weight: bold;
    text-align: center;

    font-size: 16px;
    line-height: 22px;
    color: #5f5f5f;
    margin-bottom: 10px;
  }
  .flex-box {
    font-size: 14px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    color: #5f5f5f;
  }
}
.el-dialog.copy-dialog {
  // min-height: 372px;
  width: 516px;
  border-radius: 24px;
  .el-dialog__header {
    text-align: center;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #999999;
    font-size: 20px;
  }
  .el-dialog__title {
    line-height: 22px;
    font-size: 16px;
    color: #5f5f5f;
  }
  .el-dialog__body {
    padding: 20px;
    color: #5f5f5f;
  }
  .dialog-footer {
    .el-button--info  {
      color: #999999;
      background: #fff;
      padding: 9px 37px;
      font-size: 14px;
      border: 1px solid #999999;
      border-radius: 18px;
      width: 150px;
    }
    .el-button--primary {
      background: #4e94ff !important;
      padding: 9px 37px;
      color: #fff;
      border: 1px solid #4e94ff !important;
      border-radius: 18px;
      font-size: 14px;
      width: 150px;
    }
  }
  .addToBase1 {
    // height: 350px;
    position: relative;
    .topLabel {
      margin-top: 20px;
      height: 40px;
      border-bottom: 1px solid #eee;
      font-family: PingFangSC-Medium;
      font-size: 20px;
      font-weight: 600;
      line-height: 1rem;
      color: #222222;
      text-align: left;
      margin-left: 15px;
    }
    .items {
      width: 100%;
      min-height: 150px;
      // background: cadetblue;
      // overflow-y: auto;
      // margin: 20px 0px;
      margin-bottom: 20px;
      .lable {
        // margin-top: 10px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 10px;
      }
      .baseList {
        height: 100%;
        .base {
          width: 152px;
          padding: 5px 5px 5px 10px;
          line-height: 30px;
          box-sizing: border-box;
          float: left;
          text-align: left;
          // font-size: 12px !important;
          background: #eff1f5;
          border-radius: 8px;
          margin: 0 5px;
          .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #4e94ff;
    border-color: #4e94ff;
}
          .el-checkbox {
            width: 100%;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .el-checkbox__label {
              display: inline !important;
              padding-left: 6px;
              line-height: 20px;
              color: #5f5f5f;
            }
          }
        }
        .white-wrap {
          background: #ffffff;
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
        }
      }
    }
  }
}
.el-dialog.el-dialog--center.del-dialog {
  border-radius: 24px;
  height: 235px;
  width: 360px;
  .el-dialog__header {
    box-shadow: none;
    padding: 10px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #999999;
    font-size: 20px;
  }
  .el-dialog__body {
    text-align: center;
    padding: 0 20px 10px 20px;
  }
  .suc-icon {
    margin-bottom: 20px;
    text-align: center;

    .iconfont {
      font-size: 40px;
      color: #fe6d68;
    }
  }
  .dialog-footer {
    .el-button--default {
      color: #999999;
      background: #fff;
      padding: 9px 37px;
      font-size: 14px;
      border: 1px solid #999999;
      border-radius: 18px;
      width: 150px;
    }
    .el-button--primary {
      background: #4e94ff !important;
      padding: 9px 37px;
      color: #fff;
      border: 1px solid #4e94ff !important;
      border-radius: 18px;
      font-size: 14px;
      width: 150px;
    }
  }
  .tt {
    font-weight: bold;
    text-align: center;

    font-size: 16px;
    line-height: 22px;
    color: #5f5f5f;
    margin-bottom: 10px;
  }
  .flex-box {
    font-size: 14px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    color: #5f5f5f;
  }
}
.member-info {
  font-size: 13px;
  margin: 10px 0;
  padding: 20px 0;
  display: flex;
  border-bottom: 1px solid #eff1f5;
  label {
    color: #999;
    margin-right: 6px;
    margin-right: 20px;
  }
  ul {
    display: flex;
    align-items: center;
    li {
      margin-right: 8px;
      margin-right: 20px;
      font-weight: bold;
    }
  }
}
.el-picker-panel.el-date-range-picker.el-popper.popper-pick {
  border-radius: 8px;
  .el-input--small .el-input__inner {
    border: 1px solid #d4d5d8;
    border-radius: 16px;
  }
  .el-date-range-picker__time-header {
    border-bottom: none;
  }
  .el-picker-panel__footer {
    border-top: none;
    text-align: center;
    padding-bottom: 10px;
    border-radius: inherit;
  }
  .el-date-range-picker .el-picker-panel__content {
    margin: 0;
    padding: 5px 15px;
  }
  .el-button--text {
    color: #999999;
    background: #fff;
    padding: 9px 37px;
    font-size: 14px;
    border: 1px solid #999999;
    border-radius: 18px;
  }
  .el-date-table td.start-date span,
  .el-date-table td.end-date span {
    background-color: #4e94ff;
  }
  .el-date-table td.in-range div {
    background-color: #4e94ff17;
  }
  .el-button--default {
    background: #4e94ff;
    padding: 9px 37px;
    color: #fff;
    border: 1px solid #4e94ff;
    border-radius: 18px;
    font-size: 14px;
  }
}
.el-popover.el-popper.popper-caozuo {
  box-shadow: 0px 0px 10px rgb(0 0 0 / 12%);
  border-radius: 8px;
  padding: 0;
  padding-right: 1px;
  // background: olive;

  & > span {
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    border-radius: 8px;
    font-size: 24px;
    .iconfont {
      font-size: 24px;
    }
    .iconshanchu-09 {
      color: #fe6d68;
    }
  }
  & > span:hover {
    background: #4e94ff;
    color: #fff;
  }
  & > .del-wrap:hover {
    background: #fe6d68;
    .iconshanchu-09 {
      color: #fff;
    }
  }
}

 src/pages/library/components/upload.vue

@@ -35,28 +35,34 @@
        @dragenter="dragenter($event)"
        @dragleave="dragleave($event)"
      >
        <i
        <!-- <i
          class="el-icon-upload text-primary"
          style="color: rgb(61, 104, 225)"
        ></i>
        <div class="el-upload__text" style="color: #babbbc !important">
          将文件拖到此处，或
          <em class="text-primary cursor-pointer">点击上传</em>
        ></i> -->
        <div class="icon-wrap">
          <span class="iconfont iconshangchuantupian-11"></span>
        </div>
        <div
          class="el-upload__text"
          style="margin-top: 10px"
        >
          将文件拖到此处或<span class="text-primary cursor-pointer"
            >点击上传</span
          >
        </div>
        <div
          class="el-upload__tip text-light"
          style="color: #babbbc !important"
        >
          {{ limitTypes ? `只能上传${limitTypes}文件` : ""
          }}{{ limitSize ? ` 文件大小不超过${limitSize}` : "" }}
        </div>
      </div>
    </div>
    <div
    <!-- <div
      class="upload-model"
      v-show="isShowBox"
      @click="isShowBox = false"
    ></div>
    ></div> -->
  </span>
</template>
<script>
@@ -411,13 +417,34 @@
  position: absolute;
  z-index: 100 !important;
  width: 320px;
  height: 160px;
  padding: 20px;
  right: 0;
  top: 35px;
  height: 195px;
  z-index: 5;
  background: #f1f1f1;
  border-radius: 5px;
  background: #ffffff;
  padding: 20px 20px 20px 20px;
  right: 0;
  top: 45px;
  border-radius: 8px;    box-sizing: border-box;

  box-shadow: 0px 0px 10px rgb(0 0 0 / 12%);
  .text-center {
    .icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 72px;
      margin-top: 20px;
      .iconfont {
        font-size: 72px;
        color: #bbd2f9;
      }
    }
    .el-upload__tip,.el-upload__text {
      font-size: 12px;
      line-height: 17px;
      color: #999999;
      margin-top: 0;
    }
  }
  .files-area {
    width: 100%;
    height: 100%;

 src/pages/library/index/App.vue

@@ -139,7 +139,7 @@
.s-base-manage {
  box-sizing: border-box;
  background-color: #e9ebf2;
  min-width: 1315px;
  // min-width: 1315px;
  height: 100%;
  .el-collapse {
    border: none;