zhangzengfei
2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09
src/pages/search/index/Searching.vue
@@ -2,41 +2,56 @@
  <div class="searching-box">
    <div class="searching-right">
      <div class="searching-right-nav">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="display: inline-block"
        >
          <el-breadcrumb-item>
            <span @click="uploadChange()">检索</span>
            <span @click="uploadChange">检索</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-if="!VideoPhotoData.uploadType">全部</el-breadcrumb-item>
          <el-breadcrumb-item v-if="VideoPhotoData.uploadType">以图搜图</el-breadcrumb-item>
          <el-breadcrumb-item v-if="!VideoPhotoData.uploadType"
            >全部</el-breadcrumb-item
          >
          <el-breadcrumb-item v-if="VideoPhotoData.uploadType"
            >以图搜图</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="searching-right-content">
        <div class="top">
          <el-tooltip content="以图搜图" placement="bottom" popper-class="atooltip">
          <el-tooltip
            content="以图搜图"
            placement="bottom"
            popper-class="atooltip"
          >
            <el-button
              @click="showUpload"
              type="primary"
              icon="el-icon-camera-solid"
              size="mini"
              circle
              :style="VideoPhotoData.uploadDiaplay ? 'margin-right: 20px;' : 'margin-right: 20px;background-color:#cccccc;border-color:#cccccc'"
              :style="
                VideoPhotoData.uploadDiaplay
                  ? 'margin-right: 20px;'
                  : 'margin-right: 20px;background-color:#cccccc;border-color:#cccccc'
              "
            ></el-button>
          </el-tooltip>
          <p class="p-label" style="width:16%">
            <b>标签:</b>
          <p class="p-label" style="width: 13%">
            <b>底库:</b>
            <el-select
              v-model="tagValues"
              multiple
              @change="searchingBtn"
              :disabled="isDisabled"
              collapse-tags
              size="mini"
              style="width:calc(100% - 40px);min-width: 120px;"
              placeholder="请选择"
              style="width: calc(100% - 40px); min-width: 70px"
              @change="tagChange"
              placeholder="选择"
            >
              <el-option
                v-for="item in VideoPhotoData.tabs"
                style="font-size:12px"
                style="font-size: 12px"
                :key="item.key"
                :label="item.title"
                :value="item.value"
@@ -44,7 +59,7 @@
              ></el-option>
            </el-select>
          </p>
          <p class="p-task" style="width:16%">
          <p class="p-task" style="width: 13%">
            <b>场景:</b>
            <el-select
              v-model="taskValues"
@@ -53,8 +68,8 @@
              :disabled="typeDisable"
              collapse-tags
              size="mini"
              style="width:calc(100% - 40px);min-width: 120px;"
              placeholder="请选择"
              style="width: calc(100% - 40px); min-width: 70px"
              placeholder="选择"
            >
              <!-- <el-option
                v-for="item in VideoPhotoData.tasks"
@@ -66,15 +81,31 @@
              ></el-option>-->
              <el-option
                v-for="item in VideoPhotoData.tasks"
                style="font-size:12px"
                :key="item.id+'x'"
                style="font-size: 12px"
                :key="item.id + 'x'"
                :value="item.id"
                :label="item.isDelete ? item.name+'(已删除)' : item.name"
                :title="item.isDelete ? item.name+'(已删除)' : item.name"
                :label="item.isDelete ? item.name + '(已删除)' : item.name"
                :title="item.isDelete ? item.name + '(已删除)' : item.name"
              ></el-option>
            </el-select>
          </p>
          <p class="p-level" style="width:18%">
          <p class="p-task" style="width: 12%">
            <b>关注:</b>
            <el-select
              v-model="collection"
              @change="searchingBtn"
              size="mini"
              style="width: calc(100% - 40px); min-width: 70px"
              placeholder="选择"
            >
              <el-option value="" label="全部"></el-option>
              <el-option value="1" label="已关注"></el-option>
              <el-option value="0" label="未关注"></el-option>
            </el-select>
          </p>
          <p class="p-level" style="width: 15%">
            <b>事件等级:</b>
            <el-select
              v-model="alarmValues"
@@ -83,8 +114,8 @@
              :disabled="isDisabled"
              collapse-tags
              size="mini"
              style="width:calc(100% - 64px);min-width: 120px;"
              placeholder="请选择"
              style="width: calc(100% - 64px); min-width: 120px"
              placeholder="选择"
            >
              <el-option
                v-for="item in VideoPhotoData.dictionary.ALARMLEVEL"
@@ -94,49 +125,67 @@
              ></el-option>
            </el-select>
          </p>
          <p class="p-date" style="width:19%;vertical-align: top;">
          <p class="p-date" style="width: 19%; vertical-align: top">
            <el-date-picker
              size="mini"
              v-model="searchTime"
              @change="searchingBtn"
              @change="changeTime"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00','23:59:59']"
              style="width:99%;min-width:200px"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 99%; min-width: 200px"
            ></el-date-picker>
          </p>
          <p class="p-input" style="width:19%">
          <p class="p-input" style="width: 16%">
            <el-input
              placeholder="请输入内容"
              placeholder="请输入"
              prefix-icon="el-icon-search"
              style="width: calc(100% - 75px);min-width:100px;margin-left:10px;margin-right: 10px;"
              style="
                width: calc(100% - 75px);
                min-width: 85px;
                margin-left: 10px;
                margin-right: 10px;
              "
              v-model="VideoPhotoData.inputValue"
              size="mini"
            ></el-input>
            <el-button type="primary" size="mini" @click="searchingBtn">搜索</el-button>
            <el-button type="primary" size="mini" @click="searchingBtn"
              >搜索</el-button
            >
          </p>
          <p class="p-clear">
            <b class="clear-searching" @click="clearSearch">重置</b>
          </p>
        </div>
        <div ref="mid" style="height:calc(100% - 50px);">
        <div ref="mid" style="height: calc(100% - 50px)">
          <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay">
            <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img>
          </div>
          <div
            id="searchMid"
            class="mid"
            :style="{width: VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : '100%'}"
            :style="{
              width: VideoPhotoData.uploadDiaplay
                ? 'calc(100% - 315px)'
                : '100%',
            }"
          >
            <div class="right-section" ref="scrollContain">
              <Card
                v-for="(item, index) in VideoPhotoData.cards"
                :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
                :class="
                  item.activeObject.id === VideoPhotoData.activeCard
                    ? 'my-active-card'
                    : ''
                "
                :key="index + 'u'"
                :outHeight="'162px'"
                :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
                :outWidth="
                  VideoPhotoData.uploadDiaplay ? searchImgCardWidth : cardWidth
                "
                :data="item"
                :searchTime="searchTimeFormated"
                :showType="showType"
                @detailsClick="getDetails($event, index)"
                @addToBase="toAdd"
@@ -155,17 +204,6 @@
            </div>
          </div>
        </div>
        <!-- <div class="foot">
          <el-pagination
            :current-page="VideoPhotoData.page"
            @current-change="changePages"
            @size-change="sizeChange"
            :page-sizes="VideoPhotoData.pageSizeOption"
            :page-size="VideoPhotoData.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="VideoPhotoData.total"
          ></el-pagination>
        </div>-->
      </div>
    </div>
    <hsc-window-style-metal class="windown-model">
@@ -176,7 +214,7 @@
        :key="index"
        @update:height="resizeHeight"
        @update:width="resizeWidth"
        style="background:white; height:475px"
        style="background: white; height: 475px"
        :left="center.x + index * 10"
        :top="center.y + index * 10"
        :resizable="true"
@@ -196,13 +234,21 @@
              <p>黑名单 ></p>
            </div>
            <div class="baseList">
              <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
                <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
              <el-checkbox-group
                v-model="VideoPhotoData.selectBlacks"
                @change="blackAngWhite"
              >
                <div
                  class="base"
                  v-for="(item, index) in VideoPhotoData.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>
@@ -212,20 +258,32 @@
              <p>白名单 ></p>
            </div>
            <div class="baseList">
              <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
                <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
              <el-checkbox-group
                v-model="VideoPhotoData.selectWhites"
                @change="blackAngWhite"
              >
                <div
                  class="base"
                  v-for="(item, index) in VideoPhotoData.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>
          </div>
          <div class="buttons">
            <el-button type="primary" @click="saveAddBase(item, index)">保存</el-button>
            <el-button type="default" @click="closeWindow(index)">取消</el-button>
            <el-button type="primary" @click="saveAddBase(item, index)"
              >保存</el-button
            >
            <el-button type="default" @click="closeWindow(index)"
              >取消</el-button
            >
          </div>
        </div>
      </hsc-window>
@@ -236,12 +294,12 @@
<script>
import Card from "@/components/subComponents/Card";
import UploadImg from "@/components/searching/UploadImg";
//import CardWindow from "../components/cardWindow";
import bus from "./main";
import { getUrlKey } from "@/api/utils";
export default {
  components: {
    Card,
    UploadImg
    UploadImg,
  },
  data() {
    return {
@@ -255,18 +313,21 @@
      searchImgCardWidth: "",
      tagValues: [],
      alarmValues: [],
      dialogVisible: false,
      taskValues: [],
      collection: "",
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss")
        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      ],
      searchText: "",
      currentPage: 1,
    };
  },
  computed: {
    searchTimeFormated() {
      return this.format(this.searchTime);
    },
  },
  created() {
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
@@ -276,13 +337,13 @@
  },
  mounted() {
    this.$nextTick(() => {
      let scrollContain = this.$refs.scrollContain
      this.VideoPhotoData.scrollContainDom = scrollContain
      let list = this.TreeDataPool.localVedioList.filter(i => {
        return i.progress == 100
      })
      this.TreeDataPool.localVedioList = list
    })
      let scrollContain = this.$refs.scrollContain;
      this.VideoPhotoData.scrollContainDom = scrollContain;
      // let list = this.TreeDataPool.localVedioList.filter((i) => {
      //   return i.progress == 100
      // })
      // this.TreeDataPool.localVedioList = list
    });
    window.addEventListener("resize", this.getHeight);
    this.getCenter();
    this.getHeight();
@@ -293,21 +354,26 @@
    //     this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
    //   ];
    // }
    this.searchTime = this.getDateInit();
    this.VideoPhotoData.searchTime = this.getDateInit();
    let start = getUrlKey("start");
    let end = getUrlKey("end");
    if (start && end) {
      this.searchTime = [start, end];
      this.VideoPhotoData.searchTime = [start, end];
    } else {
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
    }
    // 暂时关闭跳转 20200730
    // if (this.$route.query.showType === "findByPic") {
    if (this.getUrlKey("showType")) {
    if (getUrlKey("showType")) {
      this.VideoPhotoData.uploadDiaplay = true;
      // console.log("别处跳过来的以图搜图");
      this.VideoPhotoData.picUrl = this.getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadImg = this.getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadType = true
      this.VideoPhotoData.compTargetId = this.getUrlKey("targetId")
      this.VideoPhotoData.compTargetType = this.getUrlKey("compType")
      this.VideoPhotoData.size = 30
      this.VideoPhotoData.picUrl = getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadImg = getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadType = true;
      this.VideoPhotoData.compTargetId = getUrlKey("targetId");
      this.VideoPhotoData.compTargetType = getUrlKey("compType");
      this.VideoPhotoData.size = 30;
      this.VideoPhotoData.compareTabs = ["esData"];
      this.VideoPhotoData.findPerson2(); // 查找此人
    } else {
@@ -321,7 +387,7 @@
    this.VideoPhotoData.queryTaskList();
    this.VideoPhotoData.queryDictionary();
    this.$nextTick(() => {
      bus.$on("changePage", page => {
      bus.$on("changePage", (page) => {
        this.currentPage = page;
        this.VideoPhotoData.page = page;
      });
@@ -342,6 +408,15 @@
    this.VideoPhotoData.selectWhites = [];
  },
  watch: {
    "TreeDataPool.treeActiveName"(n, o) {
      if (n && n == "camera") {
        this.VideoPhotoData.dataSource = "camera";
        this.VideoPhotoData.treeNodes = [];
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      } else {
        this.VideoPhotoData.dataSource = "stack";
      }
    },
    "TreeDataPool.showTreeBox"(value) {
      this.getHeight();
      if (this.VideoPhotoData.realSmallPath.length > 0) {
@@ -354,7 +429,6 @@
    // "TreeDataPool.selectedNodes": function(newValue,oldValue) {
    //   if (newValue !== oldValue) {
    //     this.VideoPhotoData.treeNodes = newValue;
    //     console.log("监听树节点中的刷新方法", newValue,oldValue);
    //     this.VideoPhotoData.querySearchList();
    //   }
    // },
@@ -363,32 +437,32 @@
        if (newVal !== oldVal) {
          this.VideoPhotoData.treeNodes = newVal;
          if (this.VideoPhotoData.uploadType) {
            this.VideoPhotoData.findPersonByPage()
            this.VideoPhotoData.findPersonByPage();
          } else {
            // this.VideoPhotoData.querySearchList();
            this.setLoadSearch(this.VideoPhotoData.querySearchList());
          }
        }
      },
      deep: true    //深度监听
      deep: true, //深度监听
    },
    "DataStackPool.selectedDir": {
      handler(nodes, oldNodes) {
        if (nodes !== oldNodes) {
        if (nodes !== oldNodes && nodes.id != "") {
          // this.VideoPhotoData.treeNodes = nodes.map(i=>{return i.id});
          this.VideoPhotoData.treeNodes = [nodes.id];
          if (this.VideoPhotoData.uploadType) {
            this.VideoPhotoData.findPersonByPage()
            this.VideoPhotoData.findPersonByPage();
          } else {
            // this.VideoPhotoData.querySearchList();
            this.setLoadSearch(this.VideoPhotoData.querySearchList());
          }
        }
      },
      deep: true
      deep: true,
    },
    "VideoPhotoData.activeCard": function (value) {
      let card = this.$refs.scrollContain.getElementsByClassName("my-active-card");
      let card =
        this.$refs.scrollContain.getElementsByClassName("my-active-card");
      if (card.length > 0) {
        let cardHeight = card[0].clientHeight;
@@ -403,40 +477,26 @@
      }
    },
    "VideoPhotoData.uploadType": function (value) {
      console.log("页面模式:", value)
      if (value) {
        this.typeDisable = true;
        this.disabled = true;
      } else {
        this.typeDisable = false;
        this.VideoPhotoData.querySearchList();
      }
    },
    "VideoPhotoData.selectBlacks": function (value) {
      this.blackAngWhite()
      this.blackAngWhite();
    },
    "VideoPhotoData.selectWhites": function (value) {
      this.blackAngWhite()
    },
    tagValues: function (newValue, oldValue) {
      if (newValue.length > 0) {
        this.showType = "compare";
      } else {
        this.showType = "search";
      }
      if (newValue.length !== oldValue.length) {
        console.log("tagValue中的刷新方法");
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      }
      this.blackAngWhite();
    },
    "VideoPhotoData.uploadDiaplay": function (value) {
      this.getHeight();
      console.log("upload的值是:", value)
      if (value) {
        if (!this.VideoPhotoData.uploadType) {
          console.log("uploadDisplay中的刷新");
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          let scrollContain = this.$refs.scrollContain;
          this.VideoPhotoData.scrollContainDom = scrollContain;
          this.VideoPhotoData.showType = "search";
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
@@ -449,9 +509,28 @@
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
      }
    }
    },
  },
  methods: {
    isShowUpload() {
      this.getHeight();
      if (this.VideoPhotoData.uploadDiaplay) {
        if (!this.VideoPhotoData.uploadType) {
          let scrollContain = this.$refs.scrollContain;
          this.VideoPhotoData.scrollContainDom = scrollContain;
          this.VideoPhotoData.showType = "search";
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
          this.isDisabled = false;
        } else {
          //this.VideoPhotoData.scrollContainDom = '';
          this.VideoPhotoData.showType = "findByPic";
        }
      } else {
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
      }
    },
    resizeWidth(w) {
      this.defaultWidth = w;
    },
@@ -462,71 +541,76 @@
      let w = this.$refs.mid.offsetWidth;
      let integer = parseInt(w / 330);
      let integerSearchImg = parseInt((w - 300) / 325);
      this.handleSizeChange(integer, integerSearchImg);
      // 取消size修改
      // this.handleSizeChange(integer, integerSearchImg);
      this.cardWidth = `calc(${100 / integer}% - 20px)`;
      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
    },
    uploadChange() {
      this.VideoPhotoData.uploadDiaplay = false;
      this.VideoPhotoData.clearStatus();
    },
    blackAngWhite() {
      if (this.VideoPhotoData.selectBlacks.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          //this.VideoPhotoData.whiteList[i].disabled = true
          this.$set(this.VideoPhotoData.whiteList[i], 'disabled', true)
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", true);
        }
      }
      if (this.VideoPhotoData.selectBlacks.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          //this.VideoPhotoData.whiteList[i].disabled = false
          this.$set(this.VideoPhotoData.whiteList[i], 'disabled', false)
          this.$set(this.VideoPhotoData.whiteList[i], "disabled", false);
        }
      }
      if (this.VideoPhotoData.selectWhites.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          // this.VideoPhotoData.blackList[i].disabled = true
          this.$set(this.VideoPhotoData.blackList[i], 'disabled', true)
          // this.VideoPhotoData.blackList[i].disabled = true
          this.$set(this.VideoPhotoData.blackList[i], "disabled", true);
        }
      }
      if (this.VideoPhotoData.selectWhites.length == 0) {
        for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
          //this.VideoPhotoData.blackList[i].disabled = false
          this.$set(this.VideoPhotoData.blackList[i], 'disabled', false)
          //this.VideoPhotoData.blackList[i].disabled = false
          this.$set(this.VideoPhotoData.blackList[i], "disabled", false);
        }
      }
    },
    saveAddBase(item, index) {
      if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
      if (
        this.VideoPhotoData.selectBlacks.length === 0 &&
        this.VideoPhotoData.selectWhites.length === 0
      ) {
        this.$notify({
          title: "注意",
          message: "请选择要添加的底库",
          type: "warning"
        })
        return
          type: "warning",
        });
        return;
      }
      let res = this.VideoPhotoData.addBase(item)
      res.then(data => {
        console.log("then", data)
      let res = this.VideoPhotoData.addBase(item);
      res.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.CardList.addBaseList.splice(index, 1);
        this.VideoPhotoData.selectBlacks = []
        this.VideoPhotoData.selectWhites = []
      })
        this.VideoPhotoData.selectBlacks = [];
        this.VideoPhotoData.selectWhites = [];
      });
    },
    getDetails(ev, index) {
      debugger
      //let obj = this.CardList.datalist[index];
      this.CardList.datalist = this.VideoPhotoData.cards;
      let obj = this.CardList.datalist[index];
@@ -537,15 +621,14 @@
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
    toAdd(item) {
      debugger
      this.CardList.addBaseList.push(item)
      this.CardList.addBaseList.push(item);
    },
    handleClose(done) {
      this.$confirm('确认关闭?')
        .then(_ => {
      this.$confirm("确认关闭?")
        .then((_) => {
          done();
        })
        .catch(_ => { });
        .catch((_) => {});
    },
    showUpload() {
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay;
@@ -570,31 +653,26 @@
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
      return [
        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss")
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
      ];
    },
    format(array) {
      if (array.length === 0) {
        return [];
      }
      return [
        this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss"),
      ];
    },
    searchingBtn() {
      // let obj = document.getElementById('searchMid');
      // console.log(obj,'target',document)
      // let load = this.$loading({
      //   target:obj,
      // })
      // load.close();
      // console.log(load,'loading')
      // this.AuthData.loading = true
      this.VideoPhotoData.page = 1;
      this.VideoPhotoData.queryTabs = this.tagValues;
      //处理搜索类型
      var tempArr = this.taskValues.map(task => task.split(','));
      var tempArr = this.taskValues.map((task) => task.split(","));
      var tasks = [];
      tempArr.forEach(arr => {
        tasks = tasks.concat(arr)
      tempArr.forEach((arr) => {
        tasks = tasks.concat(arr);
      });
      this.VideoPhotoData.queryTasks = tasks;
@@ -602,14 +680,13 @@
      this.VideoPhotoData.searchTime = this.format(this.searchTime);
      //this.VideoPhotoData.inputValue = this.searchText;
      this.VideoPhotoData.showType = this.showType;
      this.VideoPhotoData.collection = this.collection;
      if (!this.VideoPhotoData.uploadType) {
        console.log("查询方法");
        this.VideoPhotoData.uploadDiaplay = false;
        //this.VideoPhotoData.page = this.currentPage;
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      } else {
        console.log("以图搜图");
        //this.VideoPhotoData.page = this.currentPage;
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
@@ -617,7 +694,7 @@
    },
    stringToNum() {
      var arr = [];
      this.alarmValues.forEach(element => {
      this.alarmValues.forEach((element) => {
        if (element == "-1") {
          arr.push(-1);
        }
@@ -637,13 +714,11 @@
          arr.push(5);
        }
      });
      // console.log("输出的数组:", arr);
      return arr;
    },
    changePages(page) {
      this.VideoPhotoData.page = page;
      if (!this.VideoPhotoData.uploadType) {
        console.log("分页改变!")
        this.VideoPhotoData.uploadDiaplay = false;
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
@@ -676,14 +751,16 @@
      }
    },
    clearSearch() {
      this.tagValues = []
      this.taskValues = []
      this.alarmValues = []
      this.tagValues = [];
      this.taskValues = [];
      this.collection = "";
      this.alarmValues = [];
      this.VideoPhotoData.queryTabs = [];
      this.VideoPhotoData.queryTasks = [];
      this.VideoPhotoData.queryAlarmlevel = [];
      this.VideoPhotoData.searchTime = this.getDateInit();
      this.VideoPhotoData.inputValue = "";
      this.VideoPhotoData.collection = "";
      this.searchTime = this.getDateInit();
      if (!this.VideoPhotoData.uploadType) {
        // this.VideoPhotoData.querySearchList();
@@ -699,19 +776,34 @@
    getCenter() {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200
        y: document.documentElement.clientHeight / 2 - 200,
      };
    },
    setLoadSearch(fn) {
      this.AuthData.setLoading("searchMid", this);
      fn.then(_ => {
      fn.then((_) => {
        this.AuthData.closeLoad();
      })
      });
    },
    getUrlKey(name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
  }
    tagChange(obj) {
      if (obj.length > 0) {
        this.showType = "compare";
      } else {
        this.showType = "search";
      }
      this.VideoPhotoData.queryTabs = obj;
      this.setLoadSearch(this.VideoPhotoData.querySearchList());
    },
    changeTime(val) {
      if (!val) {
        this.searchTime = [];
      }
      this.searchingBtn();
    },
  },
};
</script>
@@ -817,9 +909,20 @@
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titlebar {
  height: 10px !important;
  background: #fff !important;
  .button {
    position: absolute;
    font-size: 25px !important;
    right: 10px;
    top: 10px;
    z-index: 3;
  }
}
.addToBase {
  width: 98%;
  height: 450px;
  height: 430px;
  position: relative;
  .topLabel {
    margin-top: 20px;