From ecf388a7953a10fe1ae8ee1a332c74ce40d782eb Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期三, 22 十二月 2021 09:52:19 +0800 Subject: [PATCH] 对比库管理ui修正 --- src/pages/library/components/personList.vue | 471 +++++++++++++++++++++------------------------------------- 1 files changed, 169 insertions(+), 302 deletions(-) diff --git a/src/pages/library/components/personList.vue b/src/pages/library/components/personList.vue index 1ccb6e4..b47e9ca 100644 --- a/src/pages/library/components/personList.vue +++ b/src/pages/library/components/personList.vue @@ -12,7 +12,8 @@ >{{ this.baseObject.bwType === "1" ? "榛戝悕鍗�" : "鐧藉悕鍗�" }}</span > <span class="ok-time" - >鏈夋晥鏃堕棿锛歿{ this.baseObject.startTime }}--{{ + >鏈夋晥鏃堕棿锛歿{ this.baseObject.startTime }} -- + {{ this.baseObject.endTime ? this.baseObject.endTime : "姘镐箙鏈夋晥" }}</span > @@ -31,7 +32,8 @@ @change="setEnable(baseObject)" > </el-switch> - + <div class="shutiao" v-if="baseObject.enable"></div> + <div class="shutiao1" v-else></div> <el-tooltip content="鍒犻櫎" placement="top" popper-class="atooltip"> <span class="iconfont iconfont-wrap iconshanchuku-09" @@ -110,7 +112,9 @@ tooltip-effect="dark" style="width: 100%; overflow: auto" :fit="true" + row-class-name="hover-row" cell-class-name="cell-classname" + @row-click="pickRow" :default-sort="{ prop: 'createTime', order: 'descending' }" @selection-change="handleSelectionChange" :header-cell-style="{ @@ -120,16 +124,8 @@ borderBottom: 'none', }" > - <el-table-column type="selection" width="30"></el-table-column> - <!-- <el-table-column label="搴忓彿" width="60" sortable align="center"> - <template slot-scope="scope">{{ scope.$index + 1 }}</template> - </el-table-column> --> - <el-table-column - prop="personPicUrl" - label="鐓х墖" - align="center" - width="120" - > + <el-table-column type="selection" width="40"></el-table-column> + <el-table-column prop="personPicUrl" label="鐓х墖" width="120"> <template slot-scope="scope"> <img :src="'/httpImage/' + scope.row.personPicUrl" @@ -141,7 +137,7 @@ </p> </template> </el-table-column> - <el-table-column label="鐢熸晥鐘舵��" align="center" min-width="70"> + <el-table-column label="鐢熸晥鐘舵��" min-width="70"> <template slot-scope="scope"> <el-switch v-model="scope.row.enable" @@ -160,14 +156,12 @@ min-width="70" show-overflow-tooltip sortable - align="center" ></el-table-column> <el-table-column prop="sex" label="鎬у埆" min-width="60" sortable - align="center" ></el-table-column> <el-table-column prop="idCard" @@ -175,7 +169,6 @@ min-width="150" show-overflow-tooltip sortable - align="center" ></el-table-column> <el-table-column prop="phoneNum" @@ -183,12 +176,10 @@ min-width="100" show-overflow-tooltip sortable - align="center" ></el-table-column> <el-table-column prop="monitorLevel" label="绛夌骇" - align="center" min-width="50" ></el-table-column> <el-table-column @@ -197,11 +188,8 @@ 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="130" align="center"> + <el-table-column label="鎿嶄綔" min-width="130"> <template slot-scope="scope"> <fTemplate authority="library:set"> <el-tooltip @@ -217,7 +205,7 @@ </el-tooltip> </fTemplate> <el-popover - placement="left" + placement="top" trigger="click" popper-class="popper-caozuo" > @@ -284,7 +272,6 @@ class="iconfont icongengduocaozuo-09" style="font-size: 24px; cursor: pointer" ></span> - <!-- @click="handleClick(scope.row)" --> </el-popover> </template> </el-table-column> @@ -308,19 +295,16 @@ > <div class="member-info"> <label class> - <i class="iconfont icongerenxinxi_v" style="font-size: 30px"></i> + <img src="/images/library/涓汉淇℃伅.png" alt="" srcset="" /> </label> <ul> <li> - <!-- <span>濮撳悕:</span> --> <span>{{ memberInfo.personName }}</span> </li> <li> - <!-- <span>鎬у埆:</span> --> <span>{{ memberInfo.sex }}</span> </li> <li style="margin-right: 80px"> - <!-- <span>韬唤璇佸彿:</span> --> <span>{{ memberInfo.idCard }}</span> </li> <li> @@ -363,7 +347,19 @@ <p style="text-align: right; font-size: 14px; color: #5f5f5f"> 鍏眥{ faceDataCount }}鏉℃暟鎹� </p> - <el-table :data="cameraDetailData" border> + + <el-table + :data="cameraDetailData" + tooltip-effect="dark" + :fit="true" + style="width: 100%; overflow: auto" + :header-cell-style="{ + background: '#fff', + color: '#222222', + padding: '2px 1px', + borderBottom: 'none', + }" + > <el-table-column prop="faceImg" label="鎶撴媿瀹炴櫙" @@ -423,219 +419,7 @@ > </div> </el-dialog> - <!-- <el-dialog - title="淇敼淇℃伅" - :visible.sync="dialogFormVisible" - okText="淇濆瓨" - width="30%" - :before-close="handleClose" - cancelText="鍙栨秷" - > - <el-form - ref="formForEdit" - :model="form" - label-width="120px" - :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: 120px" - > - <p - style=" - background: rgba(0, 0, 0, 0.35); - width: 150px; - 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: 10px"> - <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: 10px" - > - <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: 10px"> - <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: 8px; 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: 10px" - > - <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: 10px" - > - <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: 10px" - > - <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: 10px" - > - <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: 10px" - > - <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: 10px"> - <el-input - size="small" - v-model="form.reserved" - placeholder="璇疯緭鍏�" - ></el-input> - </el-form-item> - </el-col> - </el-row> - </el-form> - <div slot="footer" class="dialog-footer"> - <el-button size="small" @click="handleClose" type="info" - >鍙� 娑�</el-button - > - <el-button size="small" type="primary" @click="submit()" - >纭� 瀹�</el-button - > - </div> - </el-dialog> --> <el-drawer title="淇敼淇℃伅" :modal="false" :visible.sync="showInfoDrawer"> - <!-- :before-close="handleClose" --> <el-form ref="formForEdit" :model="form" @@ -687,7 +471,7 @@ </div> <el-row> <el-col :span="20"> - <el-form-item label="ID" style="width: 100%; margin-bottom: 14px"> + <el-form-item label="ID" style="width: 100%; margin-bottom: 20px"> <el-input size="small" v-model="form.id" @@ -702,7 +486,7 @@ <el-form-item label="鐓х墖鏍囪瘑" prop="picDesc" - style="width: 100%; margin-bottom: 14px" + style="width: 100%; margin-bottom: 20px" > <el-input size="small" @@ -714,7 +498,7 @@ </el-row> <el-row> <el-col :span="20"> - <el-form-item label="濮撳悕" style="width: 100%; margin-bottom: 14px"> + <el-form-item label="濮撳悕" style="width: 100%; margin-bottom: 20px"> <el-input size="small" v-model="form.personName" @@ -728,7 +512,7 @@ <el-form-item label="鎬у埆" prop="sex" - style="width: 100%; margin-bottom: 14px; text-align: left" + style="width: 100%; margin-bottom: 20px; text-align: left" > <el-radio-group v-model="form.sex" class="mt10"> <el-radio label="鐢�"></el-radio> @@ -741,7 +525,7 @@ <el-col :span="20"> <el-form-item label="韬唤璇佸彿" - style="width: 100%; margin-bottom: 14px" + style="width: 100%; margin-bottom: 20px" > <el-input size="small" @@ -755,7 +539,7 @@ <el-col :span="20"> <el-form-item label="鎵嬫満鍙�" - style="width: 100%; margin-bottom: 14px" + style="width: 100%; margin-bottom: 20px" > <el-input size="small" @@ -770,7 +554,7 @@ <el-form-item label="浜哄憳绛夌骇" prop="monitorLevel" - style="width: 100%; margin-bottom: 14px" + style="width: 100%; margin-bottom: 20px" > <el-select size="small" @@ -792,7 +576,7 @@ <el-col :span="20"> <el-form-item label="鍏ュ簱浣嶇疆" - style="width: 100%; margin-bottom: 14px" + style="width: 100%; margin-bottom: 20px" > <el-input size="small" @@ -807,7 +591,7 @@ <el-col :span="20"> <el-form-item label="鍏ュ簱鏃堕棿" - style="width: 100%; margin-bottom: 14px" + style="width: 100%; margin-bottom: 20px" > <el-input size="small" @@ -820,7 +604,7 @@ </el-row> <el-row> <el-col :span="20"> - <el-form-item label="鍏朵粬" style="width: 100%; margin-bottom: 14px"> + <el-form-item label="鍏朵粬" style="width: 100%; margin-bottom: 20px"> <el-input size="small" v-model="form.reserved" @@ -943,6 +727,11 @@ class="base" v-for="(item, index) in BaseManageData.blackList" :key="index" + :class=" + BaseManageData.selectBlacks.includes(item.value) + ? 'white-wrap' + : '' + " > <el-checkbox :label="item.value" @@ -1014,6 +803,11 @@ class="base" v-for="(item, index) in BaseManageData.blackList" :key="index" + :class=" + BaseManageData.selectBlacks.includes(item.value) + ? 'white-wrap' + : '' + " > <el-checkbox :label="item.value" @@ -1039,6 +833,11 @@ class="base" v-for="(item, index) in BaseManageData.whiteList" :key="index" + :class=" + BaseManageData.selectWhites.includes(item.value) + ? 'white-wrap' + : '' + " > <el-checkbox :label="item.value" @@ -1068,7 +867,6 @@ } from "@/api/baseLibrary"; import { getCameraFaceData } from "@/api/es"; import axios from "axios"; -// import { findByType } from '@/server/video.js' import UploadBtn from "./upload"; import fTemplate from "@/components/fTemplate"; import UploadIcon from "@/components/searching/UploadIcon.vue"; @@ -1120,7 +918,6 @@ }, cameraDetailData: [], cameraDetailVisible: false, - dialogFormVisible: false, copyVisiabled: false, moveVisiabled: false, @@ -1151,11 +948,11 @@ }, rules: { picDesc: [ - { required: true, message: "璇疯緭鍏ョ収鐗囨爣璇�", trigger: "submit" }, + { required: true, message: "璇疯緭鍏ョ収鐗囨爣璇�", trigger: "change" }, ], - sex: [{ required: true, message: "璇峰嬀閫夋�у埆", trigger: "submit" }], + sex: [{ required: true, message: "璇峰嬀閫夋�у埆", trigger: "change" }], monitorLevel: [ - { required: true, message: "璇烽�夋嫨浜哄憳绛夌骇", trigger: "submit" }, + { required: true, message: "璇烽�夋嫨浜哄憳绛夌骇", trigger: "change" }, ], }, tableData: [], @@ -1221,13 +1018,12 @@ this.cameraDetailVisible = true; }, isShow(authority) { - if (this.isAdmin) { - return true; - } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) { - return true; - } else { - return false; - } + return ( + this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1 + ); + }, + pickRow(row, column, event) { + this.$refs.multipleTable.toggleRowSelection(row); }, toggleSelection(rows) { if (rows) { @@ -1244,6 +1040,7 @@ this.$notify({ type: "warning", message: "璇烽�夋嫨瑕佸垹闄ょ殑浜哄憳", + duration:1000000, }); return; } @@ -1273,6 +1070,7 @@ type: "success", message: "璇ヤ汉鍛樺垹闄ゆ垚鍔燂紒", }); + this.askDeleteShow = false; } this.getPersonList(); }) @@ -1374,13 +1172,11 @@ this.getPersonList(); }, handleSizeChange(val) { - //this.pageSize = val; this.BaseManageData.size = val; this.getPersonList(); }, handleClick(row) { this.form = row; - // this.dialogFormVisible = true; this.showInfoDrawer = true; }, async submit() { @@ -1394,7 +1190,7 @@ type: "success", message: "浜哄憳淇敼鎴愬姛锛�", }); - this.dialogFormVisible = false; + this.showInfoDrawer = false; } else { this.$notify({ type: "error", @@ -1532,11 +1328,6 @@ this.BaseManageData.queryPersonList(); } }, - // handleRowStyle({ row, rowIndex }) { - // if (rowIndex === 0) { - // return "background:#222222;"; - // } - // }, blackAngWhite() { if (this.BaseManageData.selectBlacks.length > 0) { for (let i = 0; i < this.BaseManageData.whiteList.length; i++) { @@ -1750,9 +1541,6 @@ max-width: none; font-size: 14px; color: #606266; - thead { - background: green !important; - } } .avatar-uploader:hover { .mask1 { @@ -1792,6 +1580,25 @@ } .el-dialog__body { padding-top: 0; + .el-table::before { + visibility: hidden; + } + .el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: var(--colorCard); + border-color: var(--colorCard); + } + .el-checkbox__input.is-checked .el-checkbox__inner { + background-color: var(--colorCard); + border-color: var(--colorCard); + } + .el-table th.el-table__cell > .cell { + background: #f7f8fa; + height: 38px; + line-height: 38px; + } + .el-table__body tr.hover-row > td.el-table__cell { + background-color: #ffffff !important; + } } .el-dialog__header { box-shadow: 0px 2px 4px rgb(0 0 0 / 8%); @@ -1831,20 +1638,40 @@ display: flex; align-items: center; cursor: pointer; + .shutiao { + width: 1.73px; + height: 8.67px; + background: var(--colorCard); + border-radius: 1px; + position: absolute; + right: 125px; + transition: 0.5s; + } + + .shutiao1 { + width: 1.73px; + height: 8.67px; + background: #bbbbbb; + border-radius: 1px; + position: absolute; + right: 153px; + transform: rotate(90deg); + transition: 0.5s; + } .el-switch__core { height: 26px; border-radius: 18px; } .el-switch__core:after { - width: 22px; - height: 22px; + width: 20px; + height: 20px; + top: 2px; } .el-switch.is-checked .el-switch__core::after { margin-left: -22px; } .iconshanchuku-09 { color: #fe6d68; - // margin-right: 10px; } .iconshanchuku-09:hover { background: #fe6d68; @@ -1855,7 +1682,7 @@ color: rgb(102, 102, 102); } .iconbianjiku-09:hover { - border: 1px solidvar(--colorCard); + border: 1px solid var(--colorCard); background: var(--colorCard); color: #fff; } @@ -1889,6 +1716,14 @@ box-shadow: -4px 0px 8px rgb(0 0 0 / 16%); border-radius: 24px 0px 0px 24px; min-width: 380px; + .el-drawer__header > :first-child { + font-size: 16px; + } + .el-drawer__header { + padding: 15px 20px; + box-shadow: 0px 2px 4px rgb(0 0 0 / 8%); + margin-bottom: 0; + } .el-drawer__body { padding: 20px; .el-input.is-disabled .el-input__inner { @@ -1898,11 +1733,24 @@ color: #bbbbbb; font-size: 14px; } + .el-form-item.is-error .el-input__inner, + .el-form-item.is-error .el-input__inner:focus, + .el-form-item.is-error .el-textarea__inner, + .el-form-item.is-error .el-textarea__inner:focus, + .el-message-box__input input.invalid, + .el-message-box__input input.invalid:focus { + border-color: #f56c6c; + } .el-radio__input.is-checked .el-radio__inner { border-color: var(--colorCard); background: var(--colorCard); } - +.el-form-item__label { + line-height: 32px; +} +.el-form-item__content { + line-height: 32px; +} .el-input--small { font-size: 14px; .el-input__inner { @@ -1946,22 +1794,14 @@ } } } - // .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 { .el-upload-list { display: none; } } + .border-tabl { border: 1px solid #ebeef5; border-bottom: none; @@ -1973,7 +1813,7 @@ margin-top: 8px; box-shadow: 0px 0px 6px 1px rgb(143 159 191 / 15%); .cell-classname { - border-bottom: 1px solid #eff1f5 !important; + background-color: #ffffff; } .head-search { font-size: 14px; @@ -1990,8 +1830,6 @@ } .iconpiliangshanchu-09 { color: #fe6d68; - // margin-right: 10px; - // margin-left: 20px; } .iconpiliangshanchu-09:hover { background: #fe6d68; @@ -2000,12 +1838,18 @@ } .el-button--small { padding: 8px 45px; + position: relative; font-size: 14px; background: var(--colorCard) !important; border-radius: 0px 18px 18px 0px; border-color: var(--colorCard) !important; color: #fff; margin-right: 10px; + } + + .el-button--small:hover { + // background: "rgba(#{var(--colorCard-rgb)},10%) !important" ; + filter: brightness(92%); } .el-input__suffix { top: 6px; @@ -2023,6 +1867,9 @@ line-height: 20px; color: #bbbbbb; } + } + .el-input--small .el-input__inner:focus { + border: 1px solid var(--colorCard); } // .compearValue .compearValue { @@ -2073,6 +1920,33 @@ background: #f7f8fa; height: 38px; line-height: 38px; + } + .el-table__body tr.hover-row > td.el-table__cell { + background-color: #ffffff !important; + } + .hover-row { + cursor: pointer; + } + .hover-row:hover { + td { + background-color: #fff; + border-top: 1px solid var(--colorCard); + border-bottom: 1px solid var(--colorCard); + + &:first-child { + background-color: #fff; + border-radius: 20px 0 0 20px; + border-left: 1px solid var(--colorCard); + border-bottom: 1px solid var(--colorCard); + } + + &:last-child { + border-radius: 0 20px 20px 0; + background-color: #fff; + border-right: 1px solid var(--colorCard); + border-bottom: 1px solid var(--colorCard); + } + } } .el-table td.el-table__cell div { -webkit-box-sizing: border-box; @@ -2280,7 +2154,6 @@ } } .el-dialog.copy-dialog { - // min-height: 372px; width: 516px; border-radius: 24px; .el-dialog__header { @@ -2296,7 +2169,7 @@ color: #5f5f5f; } .el-dialog__body { - padding: 20px; + padding: 20px 15px; color: #5f5f5f; } .dialog-footer { @@ -2320,7 +2193,6 @@ } } .addToBase1 { - // height: 350px; position: relative; .topLabel { margin-top: 20px; @@ -2337,12 +2209,8 @@ .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; @@ -2357,10 +2225,10 @@ box-sizing: border-box; float: left; text-align: left; - // font-size: 12px !important; background: #eff1f5; border-radius: 8px; - margin: 0 5px; + margin: 0 10px; + margin-bottom: 10px; .el-checkbox__input.is-checked .el-checkbox__inner { background-color: var(--colorCard); border-color: var(--colorCard); @@ -2466,6 +2334,7 @@ } } } + .el-picker-panel.el-date-range-picker.el-popper.popper-pick { border-radius: 8px; .el-input--small .el-input__inner { @@ -2514,8 +2383,6 @@ border-radius: 8px; padding: 0; padding-right: 1px; - // background: olive; - & > span { width: 32px; height: 32px; -- Gitblit v1.8.0