改

ZZJ

2021-12-13 d91c8da48ca76f43999220971bc540227790c1e4

 src/pages/library/components/carList.vue

@@ -1,6 +1,6 @@
<template>
  <div class="table-parent">
    <el-row class style="margin:20px">
    <el-row class style="margin: 20px">
      <!-- <el-col :span="4" class="tl">
          <b class="f14">{{this.baseObject.tableName}}</b>
      </el-col>
@@ -11,21 +11,22 @@
          <b class="f14">有效时间：{{this.baseObject.startTime}}--{{this.baseObject.endTime?this.baseObject.endTime:'永久有效'}}</b>
      </el-col>-->
      <div class="tl">
        <span
          class="f14"
          style="color:#000000;"
        >{{this.baseObject.tableName?this.baseObject.tableName + '/&nbsp;':''}}</span>
        <span
          class="f14"
          style="color:#000000;"
        >{{this.baseObject.bwType === '1'?'黑名单/&nbsp;':'白名单/&nbsp;&nbsp;&nbsp;'}}</span>
        <span
          class="f14"
          style="color:#000000;"
        >有效时间：{{this.baseObject.startTime}}--{{this.baseObject.endTime?this.baseObject.endTime:'永久有效'}}</span>
        <span class="f14" style="color: #000000">{{
          this.baseObject.tableName ? this.baseObject.tableName + "/&nbsp;" : ""
        }}</span>
        <span class="f14" style="color: #000000">{{
          this.baseObject.bwType === "1"
            ? "黑名单/&nbsp;"
            : "白名单/&nbsp;&nbsp;&nbsp;"
        }}</span>
        <span class="f14" style="color: #000000"
          >有效时间：{{ this.baseObject.startTime }}--{{
            this.baseObject.endTime ? this.baseObject.endTime : "永久有效"
          }}</span
        >
      </div>
    </el-row>
    <el-row class style="margin:40px 0 40px 20px">
    <el-row class style="margin: 40px 0 40px 20px">
      <el-col :span="6">
        <el-input
          placeholder="姓名/性别/身份证号/手机号"
@@ -37,22 +38,27 @@
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
        <el-button size="small" type="primary" @click="handleSearch"
          >搜索</el-button
        >
      </el-col>
      <el-col :offset="8" :span="3">
        <fTemplate authority="videoTable:edit">
        <fTemplate authority="library:set">
          <el-button
            size="small"
            class="ml10"
            type="danger"
            @click="deleteBatch"
            v-if="isShow('videoTable:edit')"
          >批量删除</el-button>
            v-if="isShow('library:set')"
            >批量删除</el-button
          >
        </fTemplate>
      </el-col>
      <el-col :span="2">
        <div class="text-left">
          <el-button size="small" class="ml10" type="primary" @click="addCar">添加车辆</el-button>
          <el-button size="small" class="ml10" type="primary" @click="addCar"
            >添加车辆</el-button
          >
          <el-drawer
            title="车辆信息"
            :modal="false"
@@ -73,7 +79,7 @@
                    :file-list="form.carUrls"
                    :before-remove="handleRemoveCarPic"
                  >
                    <i class="el-icon-plus" style="margin-top:25px"></i>
                    <i class="el-icon-plus" style="margin-top: 25px"></i>
                    <div>上传车辆照片</div>
                  </el-upload>
                </div>
@@ -87,7 +93,7 @@
                    :file-list="form.faceUrl"
                    :on-remove="handleRemoveFacePic"
                  >
                    <i class="el-icon-plus" style="margin-top:25px"></i>
                    <i class="el-icon-plus" style="margin-top: 25px"></i>
                    <div>上传车主照片</div>
                  </el-upload>
                </div>
@@ -96,14 +102,22 @@
                ref="formForCar"
                :model="form"
                label-width="100px"
                style="margin-top:20px;margin-bottom: 50px"
                style="margin-top: 20px; margin-bottom: 50px"
                :rule="rules"
              >
                <el-form-item label="*车牌号：">
                  <el-input placeholder="请输入车牌号" v-model="form.carNo" class="inputWidth"></el-input>
                  <el-input
                    placeholder="请输入车牌号"
                    v-model="form.carNo"
                    class="inputWidth"
                  ></el-input>
                </el-form-item>
                <el-form-item label="车辆类型：">
                  <el-select v-model="form.carType" placeholder="请选择车辆类型" class="inputWidth">
                  <el-select
                    v-model="form.carType"
                    placeholder="请选择车辆类型"
                    class="inputWidth"
                  >
                    <el-option
                      v-for="item in VideoPhotoData.dictionary.CARTYPE"
                      :key="item.value"
@@ -113,7 +127,11 @@
                  </el-select>
                </el-form-item>
                <el-form-item label="车辆品牌：">
                  <el-select v-model="form.carBrand" placeholder="请选择车辆品牌" class="inputWidth">
                  <el-select
                    v-model="form.carBrand"
                    placeholder="请选择车辆品牌"
                    class="inputWidth"
                  >
                    <el-option
                      v-for="item in VideoPhotoData.dictionary.BRAND"
                      :key="item.value"
@@ -123,7 +141,11 @@
                  </el-select>
                </el-form-item>
                <el-form-item label="车身颜色：">
                  <el-select v-model="form.carColor" placeholder="请选择车身颜色" class="inputWidth">
                  <el-select
                    v-model="form.carColor"
                    placeholder="请选择车身颜色"
                    class="inputWidth"
                  >
                    <el-option
                      v-for="item in VideoPhotoData.dictionary.nColor"
                      :key="item.value"
@@ -133,7 +155,10 @@
                  </el-select>
                </el-form-item>
                <el-form-item label="车主姓名：">
                  <el-input v-model="form.personName" class="inputWidth"></el-input>
                  <el-input
                    v-model="form.personName"
                    class="inputWidth"
                  ></el-input>
                </el-form-item>
                <el-form-item label="车主性别：">
                  <el-radio-group v-model="form.sex">
@@ -145,13 +170,24 @@
                  <el-input v-model="form.idCard" class="inputWidth"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                  <el-input v-model="form.phoneNum" class="inputWidth"></el-input>
                  <el-input
                    v-model="form.phoneNum"
                    class="inputWidth"
                  ></el-input>
                </el-form-item>
                <el-form-item label="其他：">
                  <el-input v-model="form.reserved" class="inputWidth"></el-input>
                  <el-input
                    v-model="form.reserved"
                    class="inputWidth"
                  ></el-input>
                </el-form-item>
                <el-form-item style="text-align:tight">
                  <el-button type="primary" @click="submitCar" style="margin-left:120px">保存</el-button>
                <el-form-item style="text-align: tight">
                  <el-button
                    type="primary"
                    @click="submitCar"
                    style="margin-left: 120px"
                    >保存</el-button
                  >
                  <el-button @click="resetForm">取消</el-button>
                </el-form-item>
              </el-form>
@@ -161,7 +197,9 @@
      </el-col>
      <el-col :span="3">
        <div class="text-left">
          <el-button size="small" class="ml10" type="primary" @click="addBatch">批量上传车牌</el-button>
          <el-button size="small" class="ml10" type="primary" @click="addBatch"
            >批量上传车牌</el-button
          >
          <el-drawer
            title="上传车牌"
            :modal="false"
@@ -176,11 +214,18 @@
                  type="textarea"
                  :rows="25"
                  v-model="plates"
                  style="width:90%"
                  style="width: 90%"
                  placeholder="请输入车牌号"
                ></el-input>
                <p>车牌号以逗号或回车键隔开，单次最多支持100条上传，例如：京YAB123,京F34Y87</p>
                <el-button type="primary" @click="platesBatch" style="margin-left:210px">保存</el-button>
                <p>
                  车牌号以逗号或回车键隔开，单次最多支持100条上传，例如：京YAB123,京F34Y87
                </p>
                <el-button
                  type="primary"
                  @click="platesBatch"
                  style="margin-left: 210px"
                  >保存</el-button
                >
                <el-button @click="resetForm('ruleForm')">取消</el-button>
              </div>
            </div>
@@ -188,24 +233,29 @@
        </div>
      </el-col>
    </el-row>
    <div style="display:flex;" class="border-tabl ml20">
    <div style="display: flex" class="border-tabl ml20">
      <el-table
        id="multipleTable"
        ref="multipleTable"
        :data="BaseManageData.personList"
        tooltip-effect="dark"
        style="width: 100%;"
        style="width: 100%"
        :fit="true"
      
        :default-sort="{prop: 'createTime', order: 'descending'}"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        @selection-change="handleSelectionChange"
        :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
        :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
      >
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column label="序号" width="70" sortable align="center">
          <template slot-scope="scope">{{scope.$index+1}}</template>
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="carNo" label="车牌号" sortable align="center" width="120"></el-table-column>
        <el-table-column
          prop="carNo"
          label="车牌号"
          sortable
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="carType"
          label="车辆类型"
@@ -214,7 +264,13 @@
          sortable
          align="center"
        ></el-table-column>
        <el-table-column prop="carBrand" label="车辆品牌" min-width="100" sortable align="center"></el-table-column>
        <el-table-column
          prop="carBrand"
          label="车辆品牌"
          min-width="100"
          sortable
          align="center"
        ></el-table-column>
        <el-table-column
          prop="carColor"
          label="车身颜色"
@@ -223,9 +279,9 @@
          sortable
          align="center"
        >
          <template
            slot-scope="scope"
          >{{getDataName(VideoPhotoData.dictionary.nColor,scope.row.carColor)}}</template>
          <template slot-scope="scope">{{
            getDataName(VideoPhotoData.dictionary.nColor, scope.row.carColor)
          }}</template>
        </el-table-column>
        <el-table-column
          prop="personName"
@@ -235,7 +291,12 @@
          sortable
          align="center"
        ></el-table-column>
        <el-table-column prop="sex" label="车主性别" align="center" width="80"></el-table-column>
        <el-table-column
          prop="sex"
          label="车主性别"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="carUrls"
          label="车辆照片"
@@ -247,13 +308,20 @@
        >
          <template slot-scope="scope">
            <el-carousel
              style="height:100px;"
              style="height: 100px"
              :autoplay="false"
              indicator-position="none"
              :arrow="scope.row.carUrls.length > 1 ? 'always' : 'never'"
            >
              <el-carousel-item v-for="(item, index) in scope.row.carUrls" :key="index">
                <img style="width:100px;height:100px;object-fit:contain;" :src="item.url" alt />
              <el-carousel-item
                v-for="(item, index) in scope.row.carUrls"
                :key="index"
              >
                <img
                  style="width: 100px; height: 100px; object-fit: contain"
                  :src="item.url"
                  alt
                />
              </el-carousel-item>
            </el-carousel>
          </template>
@@ -272,7 +340,7 @@
            <el-switch
              v-model="scope.row.enable"
              :active-value="1"
              :disabled="!isShow('videoTable:edit')"
              :disabled="!isShow('library:set')"
              :inactive-value="0"
              @change="enable(scope.row)"
            ></el-switch>
@@ -280,20 +348,35 @@
        </el-table-column>
        <el-table-column label="操作" min-width="200" align="center">
          <template slot-scope="scope">
            <fTemplate authority="videoTable:edit">
              <el-tooltip content="编辑" placement="top" popper-class="atooltip">
            <fTemplate authority="library:set">
              <el-tooltip
                content="编辑"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconbianji iconStyle1"
                  style="font-size:15px;"
                  style="font-size: 15px"
                  @click="handleClick(scope.row)"
                ></span>
              </el-tooltip>
            </fTemplate>
            <el-tooltip content="查找此人" placement="top" popper-class="atooltip">
              <span class="iconfont iconsousuoren iconStyle1" @click="tosearch(scope.row)"></span>
            <el-tooltip
              content="查找此人"
              placement="top"
              popper-class="atooltip"
            >
              <span
                class="iconfont iconsousuoren iconStyle1"
                @click="tosearch(scope.row)"
              ></span>
            </el-tooltip>
            <fTemplate authority="videoTable:edit">
              <el-tooltip content="复制" placement="top" popper-class="atooltip">
            <fTemplate authority="library:set">
              <el-tooltip
                content="复制"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconfuzhi iconStyle1"
                  title="复制"
@@ -301,21 +384,29 @@
                ></span>
              </el-tooltip>
            </fTemplate>
            <fTemplate authority="videoTable:edit">
              <el-tooltip content="移动" placement="top" popper-class="atooltip">
            <fTemplate authority="library:set">
              <el-tooltip
                content="移动"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconyidongzhi iconStyle1"
                  style="font-size:15px;"
                  style="font-size: 15px"
                  title="移动"
                  @click="moveClick(scope.row)"
                ></span>
              </el-tooltip>
            </fTemplate>
            <fTemplate authority="videoTable:edit">
              <el-tooltip content="删除" placement="top" popper-class="atooltip">
            <fTemplate authority="library:set">
              <el-tooltip
                content="删除"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconshanchu iconStyle1"
                  style="color:#E74C3C;"
                  style="color: #e74c3c"
                  @click="deleteThis(scope.row.id)"
                  title="删除"
                ></span>
@@ -325,12 +416,12 @@
        </el-table-column>
      </el-table>
    </div>
    <div class="pt5 pb20" style="height:40px;position:relative">
    <div class="pt5 pb20" style="height: 40px; position: relative">
      <el-pagination
        @current-change="refrash"
        :current-page="BaseManageData.page"
        :page-size="BaseManageData.size"
        style="position:absolute;right:10px;bottom:5px"
        style="position: absolute; right: 10px; bottom: 5px"
        :total="BaseManageData.total"
      ></el-pagination>
    </div>
@@ -343,19 +434,41 @@
    >
      <div>
        <div class="tl">
          <span>上传成功的数量：{{uploadResult.successList.length}}</span>
          <span>上传成功的数量：{{ uploadResult.successList.length }}</span>
        </div>
        <div class="flex-box mt10">
          <span>上传失败的数量：{{uploadResult.failList.length}}</span>
          <div class="ml20" v-for="(i,index) in uploadResult.failList" :key="index">{{i}}</div>
          <span>上传失败的数量：{{ uploadResult.failList.length }}</span>
          <div
            class="ml20"
            v-for="(i, index) in uploadResult.failList"
            :key="index"
          >
            {{ i }}
          </div>
        </div>
        <div class="flex-box mt10">
          <span>包含多张人脸的图片数量：{{uploadResult.multiFaceList.length}}</span>
          <div class="ml20" v-for="(i,index) in uploadResult.multiFaceList" :key="index">{{i}}</div>
          <span
            >包含多张人脸的图片数量：{{
              uploadResult.multiFaceList.length
            }}</span
          >
          <div
            class="ml20"
            v-for="(i, index) in uploadResult.multiFaceList"
            :key="index"
          >
            {{ i }}
          </div>
        </div>
        <div class="flex-box mt10">
          <span>不含人脸的图片数量：{{uploadResult.noFaceList.length}}</span>
          <div class="ml20" v-for="(i,index) in uploadResult.noFaceList" :key="index">{{i}}</div>
          <span>不含人脸的图片数量：{{ uploadResult.noFaceList.length }}</span>
          <div
            class="ml20"
            v-for="(i, index) in uploadResult.noFaceList"
            :key="index"
          >
            {{ i }}
          </div>
        </div>
      </div>
    </el-dialog>
@@ -375,13 +488,21 @@
            <p>黑名单 ></p>
          </div>
          <div class="baseList">
            <el-checkbox-group v-model="BaseManageData.selectBlacks" @change="blackAngWhite">
              <div class="base" v-for="(item, index) in BaseManageData.blackList" :key="index">
            <el-checkbox-group
              v-model="BaseManageData.selectBlacks"
              @change="blackAngWhite"
            >
              <div
                class="base"
                v-for="(item, index) in BaseManageData.blackList"
                :key="index"
              >
                <el-checkbox
                  :label="item.value"
                  :title="item.title"
                  :disabled="item.disabled"
                >{{item.title}}</el-checkbox>
                  >{{ item.title }}</el-checkbox
                >
              </div>
            </el-checkbox-group>
          </div>
@@ -391,13 +512,21 @@
            <p>白名单 ></p>
          </div>
          <div class="baseList">
            <el-checkbox-group v-model="BaseManageData.selectWhites" @change="blackAngWhite">
              <div class="base" v-for="(item, index) in BaseManageData.whiteList" :key="index">
            <el-checkbox-group
              v-model="BaseManageData.selectWhites"
              @change="blackAngWhite"
            >
              <div
                class="base"
                v-for="(item, index) in BaseManageData.whiteList"
                :key="index"
              >
                <el-checkbox
                  :label="item.value"
                  :title="item.title"
                  :disabled="item.disabled"
                >{{item.title}}</el-checkbox>
                  >{{ item.title }}</el-checkbox
                >
              </div>
            </el-checkbox-group>
          </div>
@@ -405,7 +534,9 @@
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="copyClose" type="info">取 消</el-button>
        <el-button size="small" type="primary" @click="copySubmit()">确 定</el-button>
        <el-button size="small" type="primary" @click="copySubmit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>

@@ -429,12 +560,17 @@
              @change="blackAngWhite"
              :max="1"
            >
              <div class="base" v-for="(item, index) in BaseManageData.blackList" :key="index">
              <div
                class="base"
                v-for="(item, index) in BaseManageData.blackList"
                :key="index"
              >
                <el-checkbox
                  :label="item.value"
                  :title="item.title"
                  :disabled="item.disabled"
                >{{item.title}}</el-checkbox>
                  >{{ item.title }}</el-checkbox
                >
              </div>
            </el-checkbox-group>
          </div>
@@ -449,12 +585,17 @@
              @change="blackAngWhite"
              :max="1"
            >
              <div class="base" v-for="(item, index) in BaseManageData.whiteList" :key="index">
              <div
                class="base"
                v-for="(item, index) in BaseManageData.whiteList"
                :key="index"
              >
                <el-checkbox
                  :label="item.value"
                  :title="item.title"
                  :disabled="item.disabled"
                >{{item.title}}</el-checkbox>
                  >{{ item.title }}</el-checkbox
                >
              </div>
            </el-checkbox-group>
          </div>
@@ -462,28 +603,35 @@
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="moveClose" type="info">取 消</el-button>
        <el-button size="small" type="primary" @click="moveSubmit()">确 定</el-button>
        <el-button size="small" type="primary" @click="moveSubmit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addBaseCar, updateBaseCar, deleteBasePersons, plateBatch } from "@/api/baseLibrary";
import {
  addBaseCar,
  updateBaseCar,
  deleteBasePersons,
  plateBatch,
} from "@/api/baseLibrary";
import axios from "axios";
// import { findByType } from '@/server/video.js'
import Upload from "./upload";
import fTemplate from "@/components/fTemplate";
import request from "@/scripts/httpRequest"
import request from "@/scripts/httpRequest";
export default {
  components: {
    // httpImg,
    fTemplate
    fTemplate,
  },
  props: {
    baseObject: {
      default: () => { },
      type: Object
    }
      default: () => {},
      type: Object,
    },
  },
  data() {
    return {
@@ -491,10 +639,23 @@
      addDrawer: false,
      plates: "",
      addBatchDrawer: false,
      direction: 'rtl',
      dialogImageUrl: '',
      fileList: [{ name: "fasjido.jpg", url: "group2/M00/0A/D7/wKgBnFyjH0-AUE5eAAC8hSMP2Yw110.jpg" }, { name: "fasjido.jpg", url: "group2/M00/0A/D7/wKgBnFyjH0-AUE5eAAC8hSMP2Yw110.jpg" }],
      provinces: [{ name: '京', value: 1 }, { name: '津', value: 2 }, { name: '冀', value: 3 }],
      direction: "rtl",
      dialogImageUrl: "",
      fileList: [
        {
          name: "fasjido.jpg",
          url: "group2/M00/0A/D7/wKgBnFyjH0-AUE5eAAC8hSMP2Yw110.jpg",
        },
        {
          name: "fasjido.jpg",
          url: "group2/M00/0A/D7/wKgBnFyjH0-AUE5eAAC8hSMP2Yw110.jpg",
        },
      ],
      provinces: [
        { name: "京", value: 1 },
        { name: "津", value: 2 },
        { name: "冀", value: 3 },
      ],
      copyVisiabled: false,
      moveVisiabled: false,
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
@@ -527,16 +688,16 @@
        carBrand: "0",
        carNo: "",
        enable: 0,
        reserved: ""
        reserved: "",
      },
      rules: {
        picDesc: [
          { required: true, message: "请输入照片标识", trigger: "change" }
          { required: true, message: "请输入照片标识", trigger: "change" },
        ],
        sex: [{ required: true, message: "请勾选性别", trigger: "change" }],
        monitorLevel: [
          { required: true, message: "请选择人员等级", trigger: "change" }
        ]
          { required: true, message: "请选择人员等级", trigger: "change" },
        ],
      },
      tableData: [],
      tableHeight: window.innerHeight - 320,
@@ -547,89 +708,79 @@
      // 上传后的弹框显示
      dialogVisible: false,
      // 批量上传后的返回结果
      uploadResult: { failList: [], successList: [], multiFaceList: [], noFaceList: [] }
      uploadResult: {
        failList: [],
        successList: [],
        multiFaceList: [],
        noFaceList: [],
      },
    };
  },
  computed: {
    isAdmin() {
      if (
        sessionStorage.getItem('userInfo') &&
        sessionStorage.getItem('userInfo') !== ''
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username
        return (
          loginName === 'superadmin' || loginName === 'basic'
        )
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      }
      return false;
    }
    },
  },
  methods: {
    handleRemoveCarPic(file, fileList) {
      console.log("删除文件", file, fileList);
      var index = fileList.findIndex(item => {
      var index = fileList.findIndex((item) => {
        if (item.uid == file.uid) {
          return true
          return true;
        }
      })
      console.log("删除的索引", index)
      this.form.carUrls.splice(index, 1)
      console.log("删除后的fileList:", this.fileList)
      });
      this.form.carUrls.splice(index, 1);
    },
    handleRemoveFacePic(file, fileList) {
      this.form.faceUrl.splice(0, 1)
      console.log("删除后的faceUrl:", this.fileList)
      this.form.faceUrl.splice(0, 1);
    },
    beforeUoload() {

    },
    beforeUoload() {},
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async uploadCar(param) {
      const fd = new FormData()
      console.log("文件参数：", param)
      fd.append('file', param.file)
      fd.append('picType', '0')
      console.log("参数：", fd)
      const fd = new FormData();
      fd.append("file", param.file);
      fd.append("picType", "0");
      let res = await request({
        method: 'post',
        method: "post",
        url: `/data/api-v/dbperson/fileupload`,
        data: fd
      })
      console.log("图片上传结果：", res.success)
        data: fd,
      });
      if (res.success) {
        this.form.carUrls.push({ url: "/httpImage/" + res.data.picUrl })
        console.log("carUrl:", this.form.carUrls)
        this.form.carUrls.push({ url: "/httpImage/" + res.data.picUrl });
      }
    },
    async uploadPerson(param) {
      const fd = new FormData()
      fd.append('file', param.file)
      fd.append('picType', '1')
      const fd = new FormData();
      fd.append("file", param.file);
      fd.append("picType", "1");
      let res = await request({
        method: 'post',
        method: "post",
        url: `/data/api-v/dbperson/fileupload`,
        data: fd
      })
        data: fd,
      });
      if (res.success) {
        this.form.faceUrl.push({ url: "/httpImage/" + res.data.picUrl })
        this.form.faceFeature = res.data.faceFeature
        console.log("faceUrl:", this.form.faceUrl)
        this.form.faceUrl.push({ url: "/httpImage/" + res.data.picUrl });
        this.form.faceFeature = res.data.faceFeature;
      }
    },
    addCar() {
      this.addDrawer = true
      this.addDrawer = true;
    },
    addBatch() {
      this.addBatchDrawer = true
      this.addBatchDrawer = true;
    },
    resetForm() {

    },
    resetForm() {},
    handleClose1(done) {
      this.form = {
      (this.form = {
        id: "",
        sex: "男",
        name: "",
@@ -648,9 +799,9 @@
        carBrand: "0",
        carNo: "",
        enable: 0,
        reserved: ""
      },
        done()
        reserved: "",
      }),
        done();
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
@@ -658,7 +809,7 @@
      //   .catch(_ => {});
    },
    handleClose2(done) {
      done()
      done();
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
@@ -667,18 +818,16 @@
    },
    isShow(authority) {
      if (this.isAdmin) {
        return true
      } else if (
        this.buttonAuthority.indexOf(',' + authority + ',') > -1
      ) {
        return true
        return true;
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
      } else {
        return false
        return false;
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
@@ -686,64 +835,58 @@
      }
    },
    deleteThis(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"
        confirmButtonClass: "comfirm-class-sure",
      })
        .then(_ => {
          fetch(`/data/api-v/dbperson/deleteDbPersonById/${id}`, {
            method: "POST",
        .then((_) => {
          fetch(`/data/api-v/dbperson/deleteDbPersonById?id=${id}`, {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              Authorization: token
            }
              Authorization: token,
            },
          })
            .then(res => {
            .then((res) => {
              return res.json();
            })
            .then(data => {
              // console.log(data.data);
            .then((data) => {
              if (data.success) {
                this.$notify({
                  type: "success",
                  message: "该人员删除成功！"
                  message: "该人员删除成功！",
                });
              }
              this.getCarList();
            })
            .catch(err => {
              console.log(err);
            .catch((err) => {
            });
        })
        .catch(_ => { });
        .catch((_) => {});
    },
    sayHello() {
      console.log("hello");
    },
    getUploadResult(result) {
      console.log(result, "上传的返回");
      this.uploadResult = result.data;
      this.dialogVisible = true;
      this.getCarList();
    },
    async getCarList() {
      // console.log("执行了刷新函数", this.BaseManageData.syncTables[0]);
      if (this.baseObject.id && this.baseObject.id !== undefined) {
        // console.log("底库id", this.baseObject.id);
        this.BaseManageData.tableId = this.baseObject.id;
        // this.BaseManageData.queryPersonList();
        this.setLoadSearch(this.BaseManageData.queryPersonList())
        this.setLoadSearch(this.BaseManageData.queryPersonList());
      }
    },
    changeDialog(data) {
      data.erFileList.map((item, index) => {
        this.$notify({
          type: "error",
          message: item.errorMsg.message
          message: item.errorMsg.message,
        });
      });
    },
@@ -762,31 +905,27 @@
    handleClick(row) {
      this.form = row;
      // 这块儿后台的字典value值有问题，需要前端来回转
      this.form.carColor += ""
      this.form.carType += ""
      this.form.carBrand += ""
      console.log("this.form", this.form)
      this.form.carColor += "";
      this.form.carType += "";
      this.form.carBrand += "";
      this.addDrawer = true;
    },
    async submit() {
      this.$refs["formForEdit"].validate(async valid => {
        // console.log("通过验证", valid);
      this.$refs["formForEdit"].validate(async (valid) => {
        if (valid) {
          let { ...json } = this.form;
          delete (json["compareScore"])
          // console.log("修改的参数：", json);
          delete json["compareScore"];
          let res = await updateBasePerson(json);
          // console.log("保存了", res);
          if (res.success) {
            this.$notify({
              type: "success",
              message: "人员修改成功！"
              message: "人员修改成功！",
            });
            this.dialogFormVisible = false;
          } else {
            this.$notify({
              type: "error",
              message: "人员修改失败，请重试！！"
              message: "人员修改失败，请重试！！",
            });
          }
        } else {
@@ -799,7 +938,7 @@
        title: "Confirm",
        content: "Bla bla ...",
        okText: "确认",
        cancelText: "取消"
        cancelText: "取消",
      });
    },
    async enable(item) {
@@ -813,17 +952,17 @@
        phoneNum: item.phoneNum,
        monitorLevel: item.monitorLevel,
        personPicUrl: item.personPicUrl,
        reserved: item.reserved
        reserved: item.reserved,
      });
      if (res.success === true) {
        this.$notify({
          type: "success",
          message: "底库人员成功变更生效状态！"
          message: "底库人员成功变更生效状态！",
        });
      } else {
        this.$notify({
          type: "error",
          message: "底库人员变更生效状态失败！"
          message: "底库人员变更生效状态失败！",
        });
      }
    },
@@ -835,13 +974,12 @@
    },
    haveScore(row) {
      if (row.compareScore && row.compareScore !== "") {
        return true
        return true;
      } else {
        return false
        return false;
      }
    },
    async searchImgList(faceUrl, threshold) {
      // console.log("搜图参数", faceUrl, threshold);
      let json = {
        tableId: this.baseObject.id,
        page: this.current,
@@ -849,27 +987,27 @@
        faceUrl: faceUrl,
        threshold: threshold,
        orderType: this.orderType,
        orderName: this.orderName
        orderName: this.orderName,
      };
      let res = await getPersonByPhoto(json);
      // console.log("列表查询", json);
      this.tableData = res.data.datalist;
      this.total = res.data.total;
      this.compare = true;
    },
    updateThreshold() { },
    updateThreshold() {},
    async updateFace(param) {
      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`,
        headers: {
          'Authorization': sessionStorage.getItem('loginedInfo') && JSON.parse(sessionStorage.getItem('loginedInfo')).access_token
          Authorization:
            sessionStorage.getItem("loginedInfo") &&
            JSON.parse(sessionStorage.getItem("loginedInfo")).access_token,
        },
        data: fd
        data: fd,
      });
      if (res.data.success) {
        this.form.personPicUrl = res.data.data.personPicUrl;
@@ -877,41 +1015,36 @@
      }
    },
    uploadSuccess() {
      console.log("换脸成功了");
    },
    uploadError() {
      console.log("换脸失败了");
    },
    deleteBatch() {
      // console.log('要删除的', this.selectedRowKeys.length)
      if (this.selectedRowKeys.length === 0) {
        this.$notify({
          type: "warning",
          message: "请选择要删除的人员"
          message: "请选择要删除的人员",
        });
      } else {
        this.$confirm("提示：确定删除该底库选中人员？", {
          center: true,
          cancelButtonClass: "comfirm-class-cancle",
          confirmButtonClass: "comfirm-class-sure"
        }).then(async _ => {
          confirmButtonClass: "comfirm-class-sure",
        }).then(async (_) => {
          let ids = [];
          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",
              message: "删除成功！"
              message: "删除成功！",
            });
            this.getCarList();
          } else {
            this.$notify({
              type: "error",
              message: "删除失败！"
              message: "删除失败！",
            });
          }
        });
@@ -921,7 +1054,6 @@
      await this.BaseManageData.querySyncTables();
      await this.BaseManageData.queryLocalTables();
      if (this.baseObject.id && this.baseObject.id !== undefined) {
        // console.log("one;", this.baseObject.id);
      } else if (
        this.BaseManageData.syncTables[0].id &&
        this.BaseManageData.syncTables[0].id !== undefined
@@ -934,7 +1066,6 @@
      }
    },
    handleRowStyle({ row, rowIndex }) {
      // console.log(row, rowIndex, "handleRowStyle");
      if (rowIndex === 0) {
        return "background:#222222;";
      }
@@ -943,126 +1074,126 @@
      if (this.BaseManageData.selectBlacks.length > 0) {
        for (let i = 0; i < this.BaseManageData.whiteList.length; i++) {
          //this.VideoPhotoData.whiteList[i].disabled = true
          this.$set(this.BaseManageData.whiteList[i], 'disabled', true)
          this.$set(this.BaseManageData.whiteList[i], "disabled", true);
        }
      }
      if (this.BaseManageData.selectBlacks.length == 0) {
        for (let i = 0; i < this.BaseManageData.whiteList.length; i++) {
          //this.VideoPhotoData.whiteList[i].disabled = false
          this.$set(this.BaseManageData.whiteList[i], 'disabled', false)
          this.$set(this.BaseManageData.whiteList[i], "disabled", false);
        }
      }
      if (this.BaseManageData.selectWhites.length > 0) {
        for (let i = 0; i < this.BaseManageData.blackList.length; i++) {
          // this.VideoPhotoData.blackList[i].disabled = true   
          this.$set(this.BaseManageData.blackList[i], 'disabled', true)
          // this.VideoPhotoData.blackList[i].disabled = true
          this.$set(this.BaseManageData.blackList[i], "disabled", true);
        }
      }
      if (this.BaseManageData.selectWhites.length == 0) {
        for (let i = 0; i < this.BaseManageData.blackList.length; i++) {
          //this.VideoPhotoData.blackList[i].disabled = false          
          this.$set(this.BaseManageData.blackList[i], 'disabled', false)
          //this.VideoPhotoData.blackList[i].disabled = false
          this.$set(this.BaseManageData.blackList[i], "disabled", false);
        }
      }
    },
    tosearch(item) {
      // console.log("跳转地址", item)
      var curWwwPath = window.document.location.href;
      var pathname = window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathname);
      var localhostPath = curWwwPath.substring(0, pos); //ip+port
      var href = localhostPath + "/Layout/Searching"
      let captureId = item.id == "" ? item.personId : item.id
      var url = item.personPicUrl ? item.personPicUrl : item.personPicUrl
      // console.log("跳转地址",href,"url",url)
      var compType = 0
      window.open(href + '?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + url + '&compType=' + compType)
      var href = localhostPath + "/Layout/Searching";
      let captureId = item.id == "" ? item.personId : item.id;
      var url = item.personPicUrl ? item.personPicUrl : item.personPicUrl;
      var compType = 0;
      window.open(
        href +
          "?showType=findByPic&targetId=" +
          captureId +
          "&picSmUrl=" +
          url +
          "&compType=" +
          compType
      );
    },
    async platesBatch() {
      var temp = this.plates.split(/[\n,]/g);
      var reg = /[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]{1}[A-Z]{1}[A-Z0-9]{5,6}/;
      for (let i = 0; i < temp.length; i++) {
        if (temp[i] == '') {
          temp.splice(i, 1)
          i--
        if (temp[i] == "") {
          temp.splice(i, 1);
          i--;
        } else {
          if (!reg.test(temp[i])) {
            this.$notify({
              type: "error",
              message: "车牌号:" + temp[i] + "不符合规则，请检查!"
            })
            return
              message: "车牌号:" + temp[i] + "不符合规则，请检查!",
            });
            return;
          }
        }
      }
      if (temp.length == 0) {
        this.$notify({
          type: 'error',
          message: '请输入车牌号',
        })
        return
          type: "error",
          message: "请输入车牌号",
        });
        return;
      }
      let param = {
        tableId: this.baseObject.id,
        carNos: temp
      }
      let resp = await plateBatch(param)
      console.log("resp:", resp)
        carNos: temp,
      };
      let resp = await plateBatch(param);
      if (resp && resp.success) {
        // 刷新car列表
        this.$notify({
          type: "success",
          message: resp.msg
          message: resp.msg,
        });
        this.getCarList();
        this.addBatchDrawer = false;
      } else {
        this.$notify({
          type: "error",
          message: resp.msg
          message: resp.msg,
        });
      }

    },
    async submitCar() {
      this.$refs["formForCar"].validate(async valid => {
        // console.log("通过验证", valid);
      this.$refs["formForCar"].validate(async (valid) => {
        if (valid) {
          let { ...json } = this.form;

          for (let index in json.carUrls) {
            if (index == 0) {
              json.carPicUrls += json.carUrls[index].url.substring(11)
              json.carPicUrls += json.carUrls[index].url.substring(11);
            } else {
              json.carPicUrls += ";" + json.carUrls[index].url.substring(11)
              json.carPicUrls += ";" + json.carUrls[index].url.substring(11);
            }
          }
          json.carColor = parseInt(json.carColor)
          json.carType = parseInt(json.carType)
          json.carBrand = parseInt(json.carBrand)
          json.personPicUrl = json.faceUrl[0].url.substring(11)
          json.tableId = this.baseObject.id
          console.log("表单的json化：", json)
          delete (json["compareScore"])
          // console.log("修改的参数：", json);
          let res
          json.carColor = parseInt(json.carColor);
          json.carType = parseInt(json.carType);
          json.carBrand = parseInt(json.carBrand);
          json.personPicUrl = json.faceUrl[0].url.substring(11);
          json.tableId = this.baseObject.id;
          delete json["compareScore"];
          let res;
          if (json.id == "") {
            res = await addBaseCar(json);
          } else {
            res = await updateBaseCar(json);
          }
          console.log("保存了", res);
          if (res.success) {
            this.$notify({
              type: "success",
              message: res.data.msg
              message: res.data.msg,
            });
            this.getCarList();
            this.addDrawer = false;
          } else {
            this.$notify({
              type: "error",
              message: res.data.msg
              message: res.data.msg,
            });
          }
        } else {
@@ -1071,103 +1202,109 @@
      });
    },
    copyClick(row) {
      this.BaseManageData.personId = row.id
      this.copyVisiabled = true
      this.BaseManageData.personId = row.id;
      this.copyVisiabled = true;
    },
    moveClick(row) {
      this.BaseManageData.personId = row.id
      this.moveVisiabled = true
      this.BaseManageData.personId = row.id;
      this.moveVisiabled = true;
    },
    copyClose() {
      this.copyVisiabled = false
      this.BaseManageData.personId = ""
      this.BaseManageData.selectBlacks = []
      this.BaseManageData.selectWhites = []
      this.copyVisiabled = false;
      this.BaseManageData.personId = "";
      this.BaseManageData.selectBlacks = [];
      this.BaseManageData.selectWhites = [];
    },
    moveClose() {
      this.moveVisiabled = false
      this.BaseManageData.personId = ""
      this.BaseManageData.selectBlacks = []
      this.BaseManageData.selectWhites = []
      this.moveVisiabled = false;
      this.BaseManageData.personId = "";
      this.BaseManageData.selectBlacks = [];
      this.BaseManageData.selectWhites = [];
    },
    copySubmit() {
      if (this.BaseManageData.selectBlacks.length === 0 && this.BaseManageData.selectWhites.length === 0) {
      if (
        this.BaseManageData.selectBlacks.length === 0 &&
        this.BaseManageData.selectWhites.length === 0
      ) {
        this.$notify({
          title: "注意",
          message: "请选择要复制到的库",
          type: "warning"
        })
        return
          type: "warning",
        });
        return;
      }
      var resp = this.BaseManageData.copyTo()
      resp.then(data => {
      var resp = this.BaseManageData.copyTo();
      resp.then((data) => {
        if (data.success) {
          this.$notify({
            title: "成功",
            message: data.data,
            type: "success"
          })
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: data.data,
            type: "error"
          })
            type: "error",
          });
        }
      })
      this.copyVisiabled = false
      this.BaseManageData.personId = ""
      this.BaseManageData.selectBlacks = []
      this.BaseManageData.selectWhites = []
      });
      this.copyVisiabled = false;
      this.BaseManageData.personId = "";
      this.BaseManageData.selectBlacks = [];
      this.BaseManageData.selectWhites = [];
    },
    getDataName: (dataList, key) => {
      let name = ""
      let name = "";
      if (Array.isArray(dataList) && dataList.length > 0) {
        for (let i = 0; i < dataList.length; i++) {
          if (dataList[i].value == key) {
            name = dataList[i].name
            name = dataList[i].name;
          }
        }
      }
      return name
      return name;
    },
    moveSubmit() {
      if (this.BaseManageData.selectBlacks.length === 0 && this.BaseManageData.selectWhites.length === 0) {
      if (
        this.BaseManageData.selectBlacks.length === 0 &&
        this.BaseManageData.selectWhites.length === 0
      ) {
        this.$notify({
          title: "注意",
          message: "请选择要移动到的库",
          type: "warning"
        })
        return
          type: "warning",
        });
        return;
      }
      var resp = this.BaseManageData.moveTo()
      resp.then(data => {
      var resp = this.BaseManageData.moveTo();
      resp.then((data) => {
        if (data.success) {
          this.$notify({
            title: "成功",
            message: data.data,
            type: "success"
          })
            type: "success",
          });
        } else {
          this.$notify({
            title: "失败",
            message: data.data,
            type: "error"
          })
            type: "error",
          });
        }
        this.moveVisiabled = false
        this.BaseManageData.personId = ""
        this.BaseManageData.selectBlacks = []
        this.BaseManageData.selectWhites = []
        this.BaseManageData.queryPersonList()
      })
        this.moveVisiabled = false;
        this.BaseManageData.personId = "";
        this.BaseManageData.selectBlacks = [];
        this.BaseManageData.selectWhites = [];
        this.BaseManageData.queryPersonList();
      });
    },
    setLoadSearch(fn) {
      this.AuthData.setLoading("multipleTable", this);
      fn.then(_ => {
      fn.then((_) => {
        this.AuthData.closeLoad();
      })
    }
      });
    },
  },
  mounted() {
    this.getCarList();
@@ -1179,7 +1316,6 @@
    window.onresize = () => {
      let width = document.body.clientWidth;
      let height = document.body.clientHeight;
      // console.log(width, height, "窗口变化对比", this.oldWidth, this.oldHeight);
      if (width !== this.oldWidth && width < 1750) {
      }
      this.$nextTick(() => {
@@ -1196,19 +1332,18 @@
  watch: {
    baseObject: {
      handler(newVal, oldVal) {
        // console.log(newVal, "监听baseObject");
        this.BaseManageData.cleanData();
        this.getCarList();
      },
      deep: true
      deep: true,
    },
    "BaseManageData.selectBlacks": function (value) {
      this.blackAngWhite()
      this.blackAngWhite();
    },
    "BaseManageData.selectWhites": function (value) {
      this.blackAngWhite()
      this.blackAngWhite();
    },
  }
  },
};
</script>
<style lang="scss">
@@ -1247,8 +1382,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;
@@ -1258,7 +1393,7 @@
}
.table-parent {
  // position: relative;
  height: 90%;
  height: 100%;
  overflow: visible !important;
  .picture {
    .el-carousel__item {
@@ -1294,8 +1429,8 @@
  .el-drawer.ltr,
  .el-drawer.rtl {
    width: 27% !important;
    height: 90%;
    top: 9%;
    //height: 90%;
    //top: 9%;
    .el-drawer__header {
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
@@ -1313,7 +1448,8 @@
.border-tabl {
  border: 1px solid #ebeef5;
  border-bottom: none;
  // border-bottom: none;
  height: calc(100% - 100px);
  overflow: auto;
}
.el-dialog__header {
  padding: 20px 0 10px;
@@ -1365,61 +1501,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 {
@@ -1428,9 +1562,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;
}

@@ -1445,9 +1579,9 @@
.el-drawer.rtl {
  min-width: 450px;
  width: 25% !important;
  height: 90%;
  min-height: 1100px;
  top: 9%;
  //height: 90%;
  //min-height: 1100px;
  //top: 9%;
  .el-drawer__header {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
@@ -1460,7 +1594,8 @@
}

.drawerSpace {
  height: 900px;
  height: calc(100% - 140px);
  box-sizing: border-box;
  margin-bottom: 30px;
  overflow-y: scroll;
  .uploadLine {
@@ -1515,8 +1650,8 @@
    }
  }
  .plateAttach {
    width: calc(100% -40px);
    height: calc(100% -40px);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px;
    p {
      margin-top: 20px;