车辆库左端列表

heyujie

2021-12-13 32065e3edfba329fd68d082bcca6f734152d86db

车辆库左端列表

 src/pages/library/components/addBase.vue

@@ -33,7 +33,7 @@
            <el-select
              size="small"
              v-model="form.cameraBrand"
              disabled   
              disabled
              placeholder="请选择对接数据库"
              style="width: 100%"
            >
@@ -56,12 +56,12 @@
            <el-col :span="11" class>
              <el-date-picker
                size="small"
                type="datetime" 
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.startTime"
                :picker-options="pickerOptions"
                style="width: 100%; "
                style="width: 100%"
              ></el-date-picker>
              <!-- <el-checkbox
                v-model="foreverChecked"
@@ -110,7 +110,11 @@
            required
            prop="bwType"
          >
            <el-radio-group v-model="form.bwType" fill="#4e94ff" text-color="#4e94ff">
            <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>
@@ -138,7 +142,8 @@
          >
            <el-select
              size="small"
              v-model="form.tableType" :popper-append-to-body="false"
              v-model="form.tableType"
              :popper-append-to-body="false"
              placeholder="请选择"
              style="width: 100%"
            >
@@ -194,7 +199,6 @@
  name: "addBase",
  data() {
    const validatePass = (rule, value, callback) => {
      debugger
      if (this.form.startTime && this.form.startTime !== "") {
        if (this.dateCompare(this.form.startTime, value) !== 1) {
          callback(new Error("结束时间不能大于开始时间！"));
@@ -241,7 +245,6 @@
    baseObject: function (newVal, oldVal) {
      this.foreverChecked = false;
      this.form = newVal;
      console.log(this.form, "baseObject");
      if (
        !newVal.endTime ||
        newVal.endTime === undefined ||
@@ -262,8 +265,6 @@
        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"),
@@ -300,7 +301,6 @@
  },
  methods: {
    onSubmit(formName) {
      console.log(this.form.id, "submit");
      if (this.form.id) {
        // id不为空，修改底库
        this.$refs[formName].validate(async (valid) => {
@@ -388,7 +388,6 @@
      }
    },
    init() {
      console.log("添加底库表单收到的数据", this.baseObject, this.type);
      if (Object.keys(this.baseObject).length > 3) {
        this.form = this.baseObject;
        if (!this.form.endTime) {
@@ -466,7 +465,7 @@
    text-align: center;
    line-height: 52px;
    position: relative;
        background: #fff;
    background: #fff;
    border-radius: 24px 24px 0 0;
    span {
      font-size: 14px;
@@ -498,25 +497,25 @@
        width: 150px;
      }
      .el-button--primary {
        background: #4e94ff !important;
        background: var(--colorCard) !important;
        padding: 9px 37px;
        color: #fff;
        border: 1px solid #4e94ff !important;
        border: 1px solidvar(--colorCard) !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;
}
      border-color: var(--colorCard);
      background: var(--colorCard);
    }
    .el-radio__input.is-checked + .el-radio__label {
      color: var(--colorCard);
    }
    .el-select .el-input.is-focus .el-input__inner {
      border-color: var(--colorCard);
    }
    .end-time-pick.is-disabled .el-input__inner {
      background-color: #fff;
      // border-color: #dfe4ed;
@@ -525,13 +524,13 @@
    .el-form-item__content {
      line-height: 32px;
    }
    .el-form-item__label{
    .el-form-item__label {
      line-height: 32px;
    }
    .el-form-item {
    margin-bottom: 0;
    height: 65px;
}
      margin-bottom: 0;
      height: 65px;
    }
    .end-time-pick.is-disabled .el-input__inner::placeholder {
      color: #606266;
    }
@@ -539,24 +538,30 @@
    //   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;
}
      color: var(--colorCard);
    }
    .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: var(--colorCard);
      color: #fff;
    }
    .el-select-dropdown {
      border-radius: 8px;
      box-shadow: 0px 0px 8px rgb(0 0 0 / 16%);    left: 0px !important;

    }
    .el-popper[x-placement^="bottom"] .popper__arrow {
      top: -7px;
    }
    .el-select-dropdown__list {
      padding: 0;
    }
    .el-input--small .el-input__inner {
      height: 32px;
      line-height: 32px;
@@ -576,11 +581,11 @@
      padding-top: 3px;
      left: 15px;
    }
    .start-time-pick{
    .start-time-pick {
      .el-form-item__error {
          top: 36px;
    left: 105px;
    }
        top: 36px;
        left: 105px;
      }
    }
  }
}
@@ -600,18 +605,19 @@
//   background: #3d68e1;
// }
.save {
  background: #4e94ff;
  background: var(--colorCard);
  border-radius: 2px;
  outline: none;
}
.check-css {
  position: relative;
  height: 20px;
  left: -187px;    top: -4px;
  left: -187px;
  top: -4px;
  line-height: 20px;
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #4e94ff;
}
    color: var(--colorCard);
  }
  .el-checkbox__inner {
    display: inline-block;
    position: relative;
@@ -630,8 +636,8 @@
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #4e94ff;
    border-color: #4e94ff;
    background-color: var(--colorCard);
    border-color: var(--colorCard);
  }
}


 src/pages/library/components/baseList.vue

@@ -26,18 +26,7 @@
            @click.stop="add('sync')"
            v-if="isShow('library:set')"
          ></span>
          <!-- <i
            class="el-icon-circle-plus-outline ml10"
            style="font-size: 20px; color: #3d68e1"
           
          ></i> -->
          <!-- <span
            class="m5"
            style="font-size: 14px; color: #3d68e1"
            @click.stop="add('sync')"
            v-if="isShow('library:set')"
            >新增</span
          > -->
        
        </template>
        <div class="max-height">
          <el-row
@@ -70,45 +59,11 @@
              </p>
            </el-col>
            <el-col :span="10" :offset="1">
              <!-- <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="item.enable"
                size="small"
                style="margin-top: -7px"
                :disabled="isDisabled(item)"
                @change="setEnable(item)"
              >
              
              </el-switch> -->
              <!-- <div class="status-dot"></div> -->
            
              <div
                class="status-dot"
                :style="item.enable == 1 ? { background: '#4E94FF' } : {}"
              ></div>
              <!-- <el-tooltip
                content="编辑"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconbianji iconStyle1"
                  @click.stop="edit(item, 'sync')"
                  v-if="isShow('library:set')"
                ></span>
              </el-tooltip> -->
              <!-- <el-tooltip
                content="删除"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconshanchu iconStyle1"
                  style="color: #e74c3c"
                  v-if="isShow('library:set')"
                  @click.stop="deleteBase(item.id)"
                ></span>
              </el-tooltip> -->
            </el-col>
            <el-col
              :span="24"
@@ -143,19 +98,6 @@
            @click.stop="add('local')"
            v-if="isShow('library:set')"
          ></span>

          <!-- <i
            class="el-icon-circle-plus-outline ml10"
            style="font-size: 20px; color: #3d68e1"
          
          ></i> -->
          <!-- <span
            class="m5"
            style="font-size: 14px; color: #3d68e1"
            @click.stop="add('local')"
            v-if="isShow('library:set')"
            >新增</span
          > -->
        </template>
        <div class="max-height">
          <el-row
@@ -186,43 +128,11 @@
              </p>
            </el-col>
            <el-col :span="10" :offset="1">
              <!-- <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="item.enable"
                size="small"
                style="margin-top: -7px"
                :disabled="isDisabled(item)"
                @change="setEnable(item)"
              ></el-switch> -->
           
              <div
                class="status-dot"
                :style="item.enable == 1 ? { background: '#4E94FF' } : {}"
              ></div>

              <!-- <el-tooltip
                content="编辑"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconbianji iconStyle1"
                  @click.stop="edit(item, 'local')"
                  v-if="isShow('library:set')"
                ></span>
              </el-tooltip> -->
              <!-- <el-tooltip
                content="删除"
                placement="top"
                popper-class="atooltip"
              >
                <span
                  class="iconfont iconshanchu iconStyle1"
                  style="color: #e74c3c"
                  v-if="isShow('library:set')"
                  @click.stop="deleteBase(item.id)"
                ></span>
              </el-tooltip> -->
            </el-col>
            <el-col
              :span="24"
@@ -263,7 +173,6 @@
    };
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
@@ -296,9 +205,7 @@
      this.localTableList = this.BaseManageData.localTables;
      this.defaultShow();
    },
    handleChange(val) {
      console.log(val);
    },
    handleChange(val) {},
    async setEnable(item) {
      let res = await updateDbTableStatus({
        id: item.id,
@@ -334,10 +241,8 @@
      return flag;
    },
    clickCategory(index, type, item) {
      // 这里我们传入一个当前值
      this.categoryIndex = type + index;
      // 调用切换右侧面板的函数并且切换父组件中isSelected的值让另一个组件清除被选中状态
      // this.$emit('clearSelected')
      this.clickBase = item;
      this.$emit("getList", item, type);
    },
@@ -434,7 +339,7 @@
  },
  props: {
    listWidth: {
      default: "234px",
      default: "224px",
      type: String,
    },
    title: {
@@ -473,6 +378,7 @@
    display: flex;
    align-items: center;
    justify-content: right;
    width: auto;
    float: right;
    margin-right: 10px;
  }
@@ -495,7 +401,6 @@
  font-size: 14px;
}
.out-div {
  // overflow: hidden auto;
  max-height: 100%;
  .el-collapse-item__wrap {
    will-change: height;
@@ -509,8 +414,11 @@
    display: none;
  }
  .el-row {
    border-radius: 9px;    background: rgba(239, 241, 245, 0.35);

    border-radius: 9px;
    background: rgba(239, 241, 245, 0.35);
    margin-bottom: 4px;    min-height: 72px;
    box-sizing: border-box;
    padding: 10px 5px;
  }
  .time-start {
    display: inline-block;
@@ -519,7 +427,7 @@
    display: inline-block;
  }
  .activeRow {
    background: #4e94ff;
    background: var(--colorCard);
    color: #fff;
    .time-start {
      color: #e9e9e9;

 src/pages/library/components/carList.vue

@@ -730,19 +730,15 @@
  },
  methods: {
    handleRemoveCarPic(file, fileList) {
      console.log("删除文件", file, fileList);
      var index = fileList.findIndex((item) => {
        if (item.uid == file.uid) {
          return true;
        }
      });
      console.log("删除的索引", index);
      this.form.carUrls.splice(index, 1);
      console.log("删除后的fileList:", this.fileList);
    },
    handleRemoveFacePic(file, fileList) {
      this.form.faceUrl.splice(0, 1);
      console.log("删除后的faceUrl:", this.fileList);
    },
    beforeUoload() {},
    handlePictureCardPreview(file) {
@@ -751,19 +747,15 @@
    },
    async uploadCar(param) {
      const fd = new FormData();
      console.log("文件参数：", param);
      fd.append("file", param.file);
      fd.append("picType", "0");
      console.log("参数：", fd);
      let res = await request({
        method: "post",
        url: `/data/api-v/dbperson/fileupload`,
        data: fd,
      });
      console.log("图片上传结果：", res.success);
      if (res.success) {
        this.form.carUrls.push({ url: "/httpImage/" + res.data.picUrl });
        console.log("carUrl:", this.form.carUrls);
      }
    },
    async uploadPerson(param) {
@@ -778,7 +770,6 @@
      if (res.success) {
        this.form.faceUrl.push({ url: "/httpImage/" + res.data.picUrl });
        this.form.faceFeature = res.data.faceFeature;
        console.log("faceUrl:", this.form.faceUrl);
      }
    },
    addCar() {
@@ -844,7 +835,7 @@
      }
    },
    deleteThis(id) {
      debugger
      
      let token =
        sessionStorage.getItem("loginedInfo") &&
        JSON.parse(sessionStorage.getItem("loginedInfo")).access_token;
@@ -865,7 +856,6 @@
              return res.json();
            })
            .then((data) => {
              // console.log(data.data);
              if (data.success) {
                this.$notify({
                  type: "success",
@@ -875,26 +865,20 @@
              this.getCarList();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .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());
      }
    },
@@ -924,18 +908,14 @@
      this.form.carColor += "";
      this.form.carType += "";
      this.form.carBrand += "";
      console.log("this.form", this.form);
      this.addDrawer = 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",
@@ -1000,7 +980,6 @@
      }
    },
    async searchImgList(faceUrl, threshold) {
      // console.log("搜图参数", faceUrl, threshold);
      let json = {
        tableId: this.baseObject.id,
        page: this.current,
@@ -1011,7 +990,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;
@@ -1021,7 +999,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`,
@@ -1038,13 +1015,10 @@
      }
    },
    uploadSuccess() {
      console.log("换脸成功了");
    },
    uploadError() {
      console.log("换脸失败了");
    },
    deleteBatch() {
      // console.log('要删除的', this.selectedRowKeys.length)
      if (this.selectedRowKeys.length === 0) {
        this.$notify({
          type: "warning",
@@ -1060,9 +1034,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",
@@ -1082,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
@@ -1095,7 +1066,6 @@
      }
    },
    handleRowStyle({ row, rowIndex }) {
      // console.log(row, rowIndex, "handleRowStyle");
      if (rowIndex === 0) {
        return "background:#222222;";
      }
@@ -1127,7 +1097,6 @@
      }
    },
    tosearch(item) {
      // console.log("跳转地址", item)
      var curWwwPath = window.document.location.href;
      var pathname = window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathname);
@@ -1135,7 +1104,6 @@
      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 +
@@ -1176,7 +1144,6 @@
        carNos: temp,
      };
      let resp = await plateBatch(param);
      console.log("resp:", resp);
      if (resp && resp.success) {
        // 刷新car列表
        this.$notify({
@@ -1194,7 +1161,6 @@
    },
    async submitCar() {
      this.$refs["formForCar"].validate(async (valid) => {
        // console.log("通过验证", valid);
        if (valid) {
          let { ...json } = this.form;

@@ -1210,16 +1176,13 @@
          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;
          if (json.id == "") {
            res = await addBaseCar(json);
          } else {
            res = await updateBaseCar(json);
          }
          console.log("保存了", res);
          if (res.success) {
            this.$notify({
              type: "success",
@@ -1353,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(() => {
@@ -1370,7 +1332,6 @@
  watch: {
    baseObject: {
      handler(newVal, oldVal) {
        // console.log(newVal, "监听baseObject");
        this.BaseManageData.cleanData();
        this.getCarList();
      },

 src/pages/library/components/personList.vue

@@ -1294,11 +1294,9 @@
          this.getPersonList();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sayHello() {
      console.log("hello");
    },
    getUploadResult(result) {
      this.uploadResult = result.data;
@@ -1464,7 +1462,6 @@
      this.getPersonList();
    },
    handleDel() {
      debugger;
      if (this.delType == "single") {
        this.deleteThis();
      } else if (this.delType == "base") {
@@ -1519,10 +1516,8 @@
      }
    },
    uploadSuccess() {
      console.log("换脸成功了");
    },
    uploadError() {
      console.log("换脸失败了");
    },
    deleteBatch() {
      if (this.selectedRowKeys.length === 0) {
@@ -1560,7 +1555,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
@@ -1573,7 +1567,6 @@
      }
    },
    handleRowStyle({ row, rowIndex }) {
      // console.log(row, rowIndex, "handleRowStyle");
      if (rowIndex === 0) {
        return "background:#222222;";
      }
@@ -1605,7 +1598,6 @@
      }
    },
    // tosearch(item) {
    //   // console.log("跳转地址", item)
    //   var curWwwPath = window.document.location.href;
    //   var pathname = window.document.location.pathname;
    //   var pos = curWwwPath.indexOf(pathname);
@@ -1613,7 +1605,6 @@
    //   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)
    // },
@@ -1741,7 +1732,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(() => {
@@ -1758,7 +1748,6 @@
  watch: {
    baseObject: {
      handler(newVal, oldVal) {
        // console.log(newVal, "监听baseObject");
        this.BaseManageData.cleanData();
        this.getPersonList();
      },
@@ -1840,8 +1829,8 @@
      .el-button--mini {
        padding: 10px 34px;
        font-size: 14px;
        background: #4e94ff !important;
        border-color: #4e94ff !important;
        background:var(--colorCard) !important;
        border-color:var(--colorCard) !important;
        width: 150px;
        border-radius: 18px;
      }
@@ -1911,8 +1900,8 @@
        color: rgb(102, 102, 102);
      }
      .iconbianjiku-09:hover {
        border: 1px solid #4e94ff;
        background: #4e94ff;
        border: 1px solidvar(--colorCard);
        background:var(--colorCard);
        color: #fff;
      }
    }
@@ -1954,6 +1943,11 @@
        color: #bbbbbb;
        font-size: 14px;
      }
      .el-radio__input.is-checked .el-radio__inner {
        border-color:var(--colorCard);
        background:var(--colorCard);
      }

      .el-input--small {
        font-size: 14px;
        .el-input__inner {
@@ -1983,8 +1977,8 @@
          padding: 11px 65px;
          font-size: 14px;
          border-radius: 18px;
          border-color: #4e94ff !important;
          background: #4e94ff !important;
          border-color:var(--colorCard) !important;
          background:var(--colorCard) !important;
          color: #fff;
        }
        .cancel-btn {
@@ -2024,7 +2018,6 @@
  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 {
@@ -2053,9 +2046,9 @@
      .el-button--small {
        padding: 8px 45px;
        font-size: 14px;
        background: #4e94ff !important;
        background:var(--colorCard) !important;
        border-radius: 0px 18px 18px 0px;
        border-color: #4e94ff !important;
        border-color:var(--colorCard) !important;
        color: #fff;
      }
      .el-input__suffix {
@@ -2109,7 +2102,14 @@
      font-size: 15px;
    }
  }

  .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;
@@ -2203,59 +2203,6 @@
  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 {
//       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;
@@ -2276,9 +2223,9 @@
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 3px;
    background: #4e94ff !important;
    background:var(--colorCard) !important;
    border-radius: 16px;
    border-color: #4e94ff !important;
    border-color:var(--colorCard) !important;
    width: 128px;
  }
  .el-input--mini .el-input__inner {
@@ -2346,10 +2293,10 @@
      width: 150px;
    }
    .el-button--primary {
      background: #4e94ff !important;
      background:var(--colorCard) !important;
      padding: 9px 37px;
      color: #fff;
      border: 1px solid #4e94ff !important;
      border: 1px solidvar(--colorCard) !important;
      border-radius: 18px;
      font-size: 14px;
      width: 150px;
@@ -2393,7 +2340,7 @@
    color: #5f5f5f;
  }
  .dialog-footer {
    .el-button--info  {
    .el-button--info {
      color: #999999;
      background: #fff;
      padding: 9px 37px;
@@ -2403,10 +2350,10 @@
      width: 150px;
    }
    .el-button--primary {
      background: #4e94ff !important;
      background:var(--colorCard) !important;
      padding: 9px 37px;
      color: #fff;
      border: 1px solid #4e94ff !important;
      border: 1px solidvar(--colorCard) !important;
      border-radius: 18px;
      font-size: 14px;
      width: 150px;
@@ -2455,9 +2402,9 @@
          border-radius: 8px;
          margin: 0 5px;
          .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #4e94ff;
    border-color: #4e94ff;
}
            background-color:var(--colorCard);
            border-color:var(--colorCard);
          }
          .el-checkbox {
            width: 100%;
            display: block;
@@ -2516,10 +2463,10 @@
      width: 150px;
    }
    .el-button--primary {
      background: #4e94ff !important;
      background:var(--colorCard) !important;
      padding: 9px 37px;
      color: #fff;
      border: 1px solid #4e94ff !important;
      border: 1px solidvar(--colorCard) !important;
      border-radius: 18px;
      font-size: 14px;
      width: 150px;
@@ -2588,16 +2535,16 @@
  }
  .el-date-table td.start-date span,
  .el-date-table td.end-date span {
    background-color: #4e94ff;
    background-color:var(--colorCard);
  }
  .el-date-table td.in-range div {
    background-color: #4e94ff17;
    background-color:var(--colorCard)17;
  }
  .el-button--default {
    background: #4e94ff;
    background:var(--colorCard);
    padding: 9px 37px;
    color: #fff;
    border: 1px solid #4e94ff;
    border: 1px solidvar(--colorCard);
    border-radius: 18px;
    font-size: 14px;
  }
@@ -2626,7 +2573,7 @@
    }
  }
  & > span:hover {
    background: #4e94ff;
    background:var(--colorCard);
    color: #fff;
  }
  & > .del-wrap:hover {

 src/pages/library/components/upload.vue

@@ -213,7 +213,6 @@
    // 上传附件
    handleUpLoad(files) {
      // 判断是否选择底库
      // console.log(this.idJson, 'upload this.idJson')
      if (this.idJson.tableId === undefined || this.idJson.tableId === "") {
        this.$notify({
          type: "error",
@@ -261,7 +260,6 @@
      // fd.append('files', this.suFileList)
      /* 添加tableId  start */
      if (this.idJson && this.idJson.tableId) {
        console.log(this.idJson, "upload this.idJson");
        fd.append("tableId", this.idJson.tableId);
      }
      /* 添加orgId officeId  end */

 src/pages/library/index/App.vue

@@ -131,7 +131,20 @@
    carList,
  },
  mounted() {
    //this.TreeDataPool.showTreeBox = false
    window.addEventListener("message", (e) => {
      if (e.data.msg === "changeColor") {
        document.documentElement.style.setProperty(
          "--colorCard",
          `${e.data.color}`
        );
      }
    });
  },
  created() {
    const color = localStorage.getItem("--colorCard");
    if (color) {
      document.documentElement.style.setProperty("--colorCard", `${color}`);
    }
  },
};
</script>
@@ -177,7 +190,7 @@
    overflow-x: hidden;
  }
  .resize-bar {
    width: 254px;
    width: 244px;
    height: inherit;
    resize: horizontal;
    cursor: ew-resize;

 src/pages/vindicate/index/App.vue

@@ -1,6 +1,5 @@
<template>
  <div class="container vindicate" v-if="!showWelcome">

    <div class="container-left">
      <div
        class="left-card"
@@ -14,14 +13,35 @@
        <span class="card-text">{{ item.name }}</span>
      </div>
    </div>
    <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer" ref="view_1"></systemClean>
    <updateSettings v-if="activePage == 0" style="width: 100%" ref="view_0"></updateSettings>
    <systemClean
      v-if="activePage == 1"
      style="width: 100%"
      :free="free"
      :full="full"
      @refreshPercent="getLeftPer"
      ref="view_1"
    ></systemClean>
    <updateSettings
      v-if="activePage == 0"
      style="width: 100%"
      ref="view_0"
    ></updateSettings>
    <!-- <back-up v-if="activePage == 3" style="width: 100%"></back-up> -->
    <restartSettings v-if="activePage == 2" style="width: 100%" ref="view_2"></restartSettings>
    <restartSettings
      v-if="activePage == 2"
      style="width: 100%"
      ref="view_2"
    ></restartSettings>
    <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
  </div>

    <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''">
  <div
    class="welcome-page"
    v-else
    ref="curPage"
    @click="showRecomand = false"
    @mouseup="mouseDownIndex = ''"
  >
    <div
      class="search-box"
      :class="showRecomand ? 'border-change' : ''"
@@ -62,7 +82,7 @@
        v-for="(item, i) in menuArr"
        :key="i"
        @mousedown="mouseDownIndex = i"
        :class="mouseDownIndex === i? 'nav-child-active':''"
        :class="mouseDownIndex === i ? 'nav-child-active' : ''"
      >
        <div class="child-info">
          <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
@@ -75,9 +95,7 @@
</template>

<script>
import {
  freedisk
} from "@/api/system";
import { freedisk } from "@/api/system";
import { getUrlKey } from "@/api/utils";
import systemClean from "../views/systemClean";
import updateSettings from "../views/updateSettings";
@@ -89,16 +107,37 @@
  components: {
    systemClean,
    updateSettings,
 //   BackUp,
    restartSettings,sysInfo
    //   BackUp,
    restartSettings,
    sysInfo,
  },
  data() {
    return {
      menuArr: [
        { name: "更新设置" ,img_black:"/images/vindicate/更新设置-黑.png", img_white:"/images/vindicate/更新设置-白.png",img_welcome:"/images/vindicate/更新设置.png"},
        { name: "系统清理" ,img_black:"/images/vindicate/系统清理-黑.png", img_white:"/images/vindicate/系统清理-白.png",img_welcome:"/images/vindicate/系统清理.png"},
        { name: "重启设置" ,img_black:"/images/vindicate/重启设置-黑.png", img_white:"/images/vindicate/重启设置-白.png",img_welcome:"/images/vindicate/重启设置.png"},
        { name: "系统信息" ,img_black:"/images/vindicate/系统信息-黑.png", img_white:"/images/vindicate/系统信息-白.png",img_welcome:"/images/vindicate/系统信息.png"},
        {
          name: "更新设置",
          img_black: "/images/vindicate/更新设置-黑.png",
          img_white: "/images/vindicate/更新设置-白.png",
          img_welcome: "/images/vindicate/更新设置.png",
        },
        {
          name: "系统清理",
          img_black: "/images/vindicate/系统清理-黑.png",
          img_white: "/images/vindicate/系统清理-白.png",
          img_welcome: "/images/vindicate/系统清理.png",
        },
        {
          name: "重启设置",
          img_black: "/images/vindicate/重启设置-黑.png",
          img_white: "/images/vindicate/重启设置-白.png",
          img_welcome: "/images/vindicate/重启设置.png",
        },
        {
          name: "系统信息",
          img_black: "/images/vindicate/系统信息-黑.png",
          img_white: "/images/vindicate/系统信息-白.png",
          img_welcome: "/images/vindicate/系统信息.png",
        },
      ],
      searchArr: [
        { name: "系统设置", addr: [0] },
@@ -111,17 +150,17 @@
      activePage: 0,
      free: 0,
      full: 0,
      showWelcome:true,
      searchText:'',
      showRecomand:false,
      mouseDownIndex:''
      showWelcome: true,
      searchText: "",
      showRecomand: false,
      mouseDownIndex: "",
    };
  },
  created() {
    let color = localStorage.getItem('--colorCard')
    if(color) {
      document.documentElement.style.setProperty('--colorCard',`${color}`)
    } 
    let color = localStorage.getItem("--colorCard");
    if (color) {
      document.documentElement.style.setProperty("--colorCard", `${color}`);
    }
  },
  mounted() {
    const menu = getUrlKey("menu");
@@ -131,25 +170,28 @@
      //   this.$refs.netSettings.openRight(2);
      // });
    }
     this.getLeftPer()
     window.addEventListener("message",(e)=>{
     if(e.data.msg === 'changeColor') {
     document.documentElement.style.setProperty('--colorCard',`${e.data.color}`)
       } 
      if (e.data.msg === '返回系统维护') {
    this.showWelcome = true
      }     
     })
    this.getLeftPer();
    window.addEventListener("message", (e) => {
      if (e.data.msg === "changeColor") {
        document.documentElement.style.setProperty(
          "--colorCard",
          `${e.data.color}`
        );
      }
      if (e.data.msg === "返回系统维护") {
        this.showWelcome = true;
      }
    });
  },
  methods: {
    openMenu(item, i) {
      this.activePage = i;
    },
    getLeftPer(){
    getLeftPer() {
      freedisk().then((res) => {
        this.free = res.data.free
        this.full = res.data.all
      })
        this.free = res.data.free;
        this.full = res.data.all;
      });
    },
    pickQuick(addr) {
      if (addr.length == 1) {
@@ -169,11 +211,11 @@
    },
    openWelcome(i) {
      this.showWelcome = false;
      this.openMenu(1,i);
      this.openMenu(1, i);
    },
  },
  computed:{
     searchArrForShow() {
  computed: {
    searchArrForShow() {
      if (this.searchText == "") {
        return this.searchArr;
      } else {
@@ -182,7 +224,7 @@
        });
      }
    },
  }
  },
};
</script>
<style lang="scss">
@@ -238,28 +280,30 @@
        width: 100%;
        font-weight: bold;

        &::-webkit-input-placeholder { /* WebKit browsers */
        color: #828282;
        font-weight: normal;
        font-size: 14px;
        &::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #828282;
          font-weight: normal;
          font-size: 14px;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #828282;
        font-weight: normal;
        font-size: 14px;
        &:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #828282;
          font-weight: normal;
          font-size: 14px;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #828282;
        font-weight: normal;
        font-size: 14px;
        &::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #828282;
          font-weight: normal;
          font-size: 14px;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #828282;
        font-weight: normal;
        font-size: 14px;

      }

        &:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #828282;
          font-weight: normal;
          font-size: 14px;
        }
      }
      .el-input__suffix {
        display: flex;
@@ -329,14 +373,14 @@
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 2px solid #F2F2F7;
      border: 2px solid #f2f2f7;

      &:hover {
        background: #F2F2F7;
        background: #f2f2f7;
      }

      &-active {
        border: 2px solid #4E94FF;
        border: 2px solid #4e94ff;
      }

      // box-shadow: 2px 2px 4px rgb(226, 226, 226);
@@ -363,9 +407,9 @@
      }
    }
    // .nav-child:hover {
      // box-shadow: 4px 4px 12px rgb(218, 218, 218);
      // transform: translate3d(0, -1px, 0);
      // transition: all 0.3s;
    // box-shadow: 4px 4px 12px rgb(218, 218, 218);
    // transform: translate3d(0, -1px, 0);
    // transition: all 0.3s;
    // }
  }
}
@@ -402,7 +446,7 @@
      cursor: pointer;
      border-radius: 8px;
      margin-bottom: 4px;
      display: flex;    
      display: flex;
      background-color: #fff;
      align-items: center;
      .icon_white {
@@ -429,9 +473,9 @@
      color: #fff;
      background-color: var(--colorCard) !important;
      .icon_black {
      visibility: hidden;
        visibility: hidden;
      }
      .icon_white{
      .icon_white {
        visibility: visible;
      }
      .iconfont {
@@ -439,17 +483,15 @@
        background-color: #fff;
      }
    }
   

    .left-card:hover {
      background-color: #F2F2F7;
      
      background-color: #f2f2f7;
    }
  }

}

.vindicate {
  border-top:2px solid #E1E0E6 ;
  border-top: 2px solid #e1e0e6;
}
</style>


 vue.config.js

@@ -40,8 +40,8 @@
  // }
});

const serverUrl = "http://192.168.20.189:7009"; // 羊五
//  const serverUrl = "http://192.168.8.10:7009";
// const serverUrl = "http://192.168.20.189:7009"; // 羊五
 const serverUrl = "http://192.168.8.10:7009";
const serverUrl2 = "http://192.168.8.10:9000";
// const serverUrl = "http://192.168.20.10:7009";
// const serverUrl2 = "http://192.168.20.10:9000";