From e0231a8dd254d9418eed6619161e6b957633fe11 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 10 十二月 2021 20:25:49 +0800
Subject: [PATCH] 对比库管理2

---
 src/components/searching/uploadForModel.vue |    3 
 src/pages/index/App.vue                     |    1 
 src/pages/library/components/carList.vue    |  119 +-
 src/pages/library/index/App.vue             |    2 
 src/pages/library/components/upload.vue     |   55 +
 src/pages/library/components/baseList.vue   |    1 
 src/pages/library/components/addBase.vue    |  571 +++++++++++-----
 src/pages/library/components/personList.vue | 1317 ++++++++++++++++++++++++++++--------
 8 files changed, 1,501 insertions(+), 568 deletions(-)

diff --git a/src/components/searching/uploadForModel.vue b/src/components/searching/uploadForModel.vue
index 9b481d3..01a54f8 100644
--- a/src/components/searching/uploadForModel.vue
+++ b/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;
diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
index 40f7ac2..2a3a431 100644
--- a/src/pages/index/App.vue
+++ b/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("鐧诲綍鎴愬姛锛�")
         // 鑾峰彇鏉冮檺
diff --git a/src/pages/library/components/addBase.vue b/src/pages/library/components/addBase.vue
index dae89ce..99baa48 100644
--- a/src/pages/library/components/addBase.vue
+++ b/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;
   }
 }
 
diff --git a/src/pages/library/components/baseList.vue b/src/pages/library/components/baseList.vue
index e2e91b9..b2d0e0b 100644
--- a/src/pages/library/components/baseList.vue
+++ b/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;
diff --git a/src/pages/library/components/carList.vue b/src/pages/library/components/carList.vue
index 245779d..ac6737f 100644
--- a/src/pages/library/components/carList.vue
+++ b/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;
 }
 
diff --git a/src/pages/library/components/personList.vue b/src/pages/library/components/personList.vue
index d2569b1..518ae0c 100644
--- a/src/pages/library/components/personList.vue
+++ b/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;
     }
   }
 }
diff --git a/src/pages/library/components/upload.vue b/src/pages/library/components/upload.vue
index 3c3c4aa..53c51b6 100644
--- a/src/pages/library/components/upload.vue
+++ b/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%;
diff --git a/src/pages/library/index/App.vue b/src/pages/library/index/App.vue
index e57302c..6237fb2 100644
--- a/src/pages/library/index/App.vue
+++ b/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;

--
Gitblit v1.8.0