管理中心添加分析

zhangzengfei

2022-08-05 1e4a3f702623a46bcd53dbc96e235d51e0edb155

 src/views/search/Searching.vue

@@ -2,28 +2,17 @@
  <div class="searching-box" @click="showDownBox = false">
    <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>
          </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"
@@ -134,27 +123,13 @@
              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>

          <div class="btnArea">
            <div class="button light" @click.stop="showDownBox = !showDownBox">
              <span class="iconfont">&#xe643;</span>
              导出数据
            </div>

            <div class="downBox" v-if="showDownBox">
              <div class="downItem">导出全部数据</div>
              <div class="downItem">导出筛选数据</div>
            </div>
          </div>

          <p class="p-clear">
            <b class="clear-searching" @click="clearSearch">重置</b>
          </p>
          <el-tooltip
          <!-- <el-tooltip
            class="item"
            effect="dark"
            content="配置存储路径"
@@ -163,7 +138,25 @@
            <span @click="showSetBox = true" class="iconfont setIcon"
              >&#xe652;</span
            >
          </el-tooltip>
          </el-tooltip> -->
          <p class="p-clear">
            <download-excel
              class="export-excel-wrapper"
              :data="VideoPhotoData.cards"
              :fields="json_fields"
              :name="'视频分析报警统计' + searchTimeFormated + '.xls'"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
              <!-- <div class="btnArea">
                <div class="button light">
                  <span class="iconfont">&#xe643;</span>
                  导出数据
                </div>
              </div> -->
              <b class="clear-searching"> <span class="iconfont">&#xe643;</span> 导出数据</b>
            </download-excel>
          </p>
        </div>
        <div ref="mid" style="height: calc(100% - 50px)">
          <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay">
@@ -173,24 +166,16 @@
            id="searchMid"
            class="mid"
            :style="{
              width: VideoPhotoData.uploadDiaplay
                ? 'calc(100% - 315px)'
                : '100%',
              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"
@@ -241,21 +226,11 @@
              <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
                    :label="item.value"
                    :title="item.title"
                    :disabled="item.disabled"
                    >{{ item.title }}</el-checkbox
                  >
              <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>
                </div>
              </el-checkbox-group>
            </div>
@@ -265,21 +240,11 @@
              <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
                    :label="item.value"
                    :title="item.title"
                    :disabled="item.disabled"
                    >{{ item.title }}</el-checkbox
                  >
              <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>
                </div>
              </el-checkbox-group>
            </div>
@@ -296,17 +261,17 @@
</template>

<script>
import Card from "./components/Card";
import UploadImg from "./components/UploadImg";
import bus from "@/main";
import { getUrlKey } from "@/api/utils.ts";
import SetBox from "@/views/search/components/SetBox";
import Card from "./components/Card"
import UploadImg from "./components/UploadImg"
import bus from "@/main"
import { getUrlKey } from "@/api/utils.ts"
import SetBox from "@/views/search/components/SetBox"
export default {
  name: "RightSide",
  components: {
    Card,
    UploadImg,
    SetBox,
    SetBox
  },
  data() {
    return {
@@ -322,115 +287,150 @@
      alarmValues: [],
      taskValues: [],
      showDownBox: false,
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      ],
      searchTime: [this.$moment().format("YYYY-MM-DD 00:00:00"), this.$moment().format("YYYY-MM-DD HH:mm:ss")],
      searchText: "",
      currentPage: 1,
      showSetBox: false,
    };
      json_fields: {
        // 部门: "",
        // 告警标记: "",
        // 整改描述: "",
        摄像机ID: "activeObject.cameraId",
        摄像机名称: "activeObject.cameraName",
        摄像机地址: "activeObject.cameraAddr",
        场景ID: "activeObject.taskId",
        场景名称: "activeObject.taskName",
        事件等级: {
          field: "activeObject.alarmRules",
          //自定义回调函数
          callback: (value) => {
            return value.length ? value[0].alarmLevel : ""
          }
        },
        设备ID: "activeObject.analyServerId",
        设备IP: "activeObject.analyServerIp",
        设备名称: "activeObject.analyServerName",
        抓拍时间: "activeObject.picDate",
        更新时间: "activeObject.likeDate",
        抓拍全景图地址: "activeObject.picMaxUrl",
        录像地址: "activeObject.videoUrl",
        检测区域id: {
          field: "activeObject.targetInfo",
          //自定义回调函数
          callback: (value) => {
            return value.length ? value[0].areaId : ""
          }
        },
        检测区域名称: {
          field: "activeObject.targetInfo",
          //自定义回调函数
          callback: (value) => {
            return value.length ? value[0].areaName : ""
          }
        }
      }
    }
  },
  computed: {
    searchTimeFormated() {
      return this.format(this.searchTime);
    },
      return this.format(this.searchTime)
    }
  },
  created() {
    this.VideoPhotoData.activeCard = "";
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = true;
    this.TreeDataPool.clean();
    this.VideoPhotoData.activeCard = ""
    this.TreeDataPool.readonly = true
    this.TreeDataPool.gbReadonly = true
    this.TreeDataPool.multiple = true
    this.TreeDataPool.clean()
  },
  mounted() {
    this.$nextTick(() => {
      let scrollContain = this.$refs.scrollContain;
      this.VideoPhotoData.scrollContainDom = scrollContain;
      let scrollContain = this.$refs.scrollContain
      this.VideoPhotoData.scrollContainDom = scrollContain
      let list =
        this.TreeDataPool.localVedioList &&
        this.TreeDataPool.localVedioList.filter((i) => {
          return i.progress == 100;
        });
      this.TreeDataPool.localVedioList = list;
    });
    window.addEventListener("resize", this.getHeight);
    this.getCenter();
    this.getHeight();
    this.blackAngWhite();
          return i.progress == 100
        })
      this.TreeDataPool.localVedioList = list
    })
    window.addEventListener("resize", this.getHeight)
    this.getCenter()
    this.getHeight()
    this.blackAngWhite()
    // 视频监控任务跳转 屏蔽 20200730
    // if (this.$route.query.from === "video") {
    //   this.VideoPhotoData.queryTasks = this.taskValues = [
    //     this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
    //   ];
    // }
    let start = getUrlKey("start");
    let end = getUrlKey("end");
    let start = getUrlKey("start")
    let end = getUrlKey("end")
    if (start && end) {
      this.searchTime = [start, end];
      this.VideoPhotoData.searchTime = [start, end];
      this.searchTime = [start, end]
      this.VideoPhotoData.searchTime = [start, end]
    } else {
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
      this.searchTime = this.getDateInit()
      this.VideoPhotoData.searchTime = this.getDateInit()
    }

    // 暂时关闭跳转 20200730
    // if (this.$route.query.showType === "findByPic") {
    if (getUrlKey("showType")) {
      this.VideoPhotoData.uploadDiaplay = true;
      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(); // 查找此人
      this.VideoPhotoData.uploadDiaplay = true
      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 {
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
      this.searchTime = this.getDateInit()
      this.VideoPhotoData.searchTime = this.getDateInit()
      // this.VideoPhotoData.querySearchList();
      this.setLoadSearch(this.VideoPhotoData.querySearchList());
      this.setLoadSearch(this.VideoPhotoData.querySearchList())
    }

    this.VideoPhotoData.queryTagList();
    this.VideoPhotoData.queryTaskList();
    this.VideoPhotoData.queryDictionary();
    this.VideoPhotoData.queryTagList()
    this.VideoPhotoData.queryTaskList()
    this.VideoPhotoData.queryDictionary()
    this.$nextTick(() => {
      bus.$on("changePage", (page) => {
        this.currentPage = page;
        this.VideoPhotoData.page = page;
      });
    });
        this.currentPage = page
        this.VideoPhotoData.page = page
      })
    })
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
    this.CardList.details = [];
    window.removeEventListener("resize", this.getHeight)
    this.CardList.details = []
    // this.TreeDataPool.treeActiveName = "camera";
    this.VideoPhotoData.queryAlarmlevel = [];
    this.VideoPhotoData.inputValue = "";
    this.VideoPhotoData.queryTabs = [];
    this.VideoPhotoData.queryTasks = [];
    this.VideoPhotoData.treeNodes = [];
    this.VideoPhotoData.queryAlarmlevel = []
    this.VideoPhotoData.inputValue = ""
    this.VideoPhotoData.queryTabs = []
    this.VideoPhotoData.queryTasks = []
    this.VideoPhotoData.treeNodes = []

    this.CardList.addBaseList = [];
    this.VideoPhotoData.selectBlacks = [];
    this.VideoPhotoData.selectWhites = [];
    this.CardList.addBaseList = []
    this.VideoPhotoData.selectBlacks = []
    this.VideoPhotoData.selectWhites = []
  },
  watch: {
    "TreeDataPool.treeActiveName"(n) {
      if (n && n == "camera") {
        this.VideoPhotoData.treeNodes = [];
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
        this.VideoPhotoData.treeNodes = []
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
      }
    },
    "TreeDataPool.showTreeBox"() {
      this.getHeight();
      this.getHeight()
      if (this.VideoPhotoData.realSmallPath.length > 0) {
        this.VideoPhotoData.findPersonByPage();
        this.VideoPhotoData.findPersonByPage()
      } else {
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
      }
    },
    // "TreeDataPool.selectedNodes": function(newValue,oldValue) {
@@ -440,206 +440,181 @@
    //   }
    // },
    "TreeDataPool.selectedNodes": {
      handler: function (newVal, oldVal) {
      handler: function(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.VideoPhotoData.treeNodes = newVal;
          this.VideoPhotoData.treeNodes = newVal
          if (this.VideoPhotoData.uploadType) {
            this.VideoPhotoData.findPersonByPage();
            this.VideoPhotoData.findPersonByPage()
          } else {
            this.setLoadSearch(this.VideoPhotoData.querySearchList());
            this.setLoadSearch(this.VideoPhotoData.querySearchList())
          }
        }
      },
      deep: true, //深度监听
      deep: true //深度监听
    },
    "DataStackPool.selectedDir": {
      handler(nodes, oldNodes) {
        if (nodes !== oldNodes && nodes.id != "") {
          // this.VideoPhotoData.treeNodes = nodes.map(i=>{return i.id});
          this.VideoPhotoData.treeNodes = [nodes.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());
            this.setLoadSearch(this.VideoPhotoData.querySearchList())
          }
        }
      },
      deep: true,
      deep: true
    },
    "VideoPhotoData.activeCard": function () {
      let card =
        this.$refs.scrollContain.getElementsByClassName("my-active-card");
      console.log("------");
      console.log(card);
    "VideoPhotoData.activeCard": function() {
      let card = this.$refs.scrollContain.getElementsByClassName("my-active-card")

      if (card.length > 0) {
        let cardHeight = card[0].clientHeight;
        let cardTop = card[0].offsetTop;
        let scrollTop = this.$refs.scrollContain.scrollTop;
        let divHeight = this.$refs.scrollContain.clientHeight;
        console.log(2);
        console.log(cardHeight);
        console.log(cardTop);
        console.log(scrollTop);
        console.log(divHeight);
        if (
          cardTop - cardHeight - scrollTop > divHeight ||
          cardTop - cardHeight - scrollTop < 0
        )
          this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight);
        let cardHeight = card[0].clientHeight
        let cardTop = card[0].offsetTop
        let scrollTop = this.$refs.scrollContain.scrollTop
        let divHeight = this.$refs.scrollContain.clientHeight

        if (cardTop - cardHeight - scrollTop > divHeight || cardTop - cardHeight - scrollTop < 0)
          this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight)
      }
    },
    "VideoPhotoData.uploadType": function (value) {
    "VideoPhotoData.uploadType": function(value) {
      if (value) {
        this.typeDisable = true;
        this.disabled = true;
        this.typeDisable = true
        this.disabled = true
      } else {
        this.typeDisable = false;
        this.VideoPhotoData.querySearchList();
        this.typeDisable = false
        this.VideoPhotoData.querySearchList()
      }
    },
    "VideoPhotoData.selectBlacks": function () {
      this.blackAngWhite();
    "VideoPhotoData.selectBlacks": function() {
      this.blackAngWhite()
    },
    "VideoPhotoData.selectWhites": function () {
      this.blackAngWhite();
    "VideoPhotoData.selectWhites": function() {
      this.blackAngWhite()
    },
    "VideoPhotoData.uploadDiaplay": function (value) {
      this.getHeight();
    "VideoPhotoData.uploadDiaplay": function(value) {
      this.getHeight()
      if (value) {
        if (!this.VideoPhotoData.uploadType) {
          let scrollContain = this.$refs.scrollContain;
          this.VideoPhotoData.scrollContainDom = scrollContain;
          this.VideoPhotoData.showType = "search";
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          this.VideoPhotoData.showType = "search"
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
          this.isDisabled = false;
          this.isDisabled = false
        } else {
          //this.VideoPhotoData.scrollContainDom = '';
          this.VideoPhotoData.showType = "findByPic";
          this.VideoPhotoData.showType = "findByPic"
        }
      } else {
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
        this.VideoPhotoData.uploadType = false
        this.VideoPhotoData.showType = "search"
      }
    },
    }
  },
  methods: {
    isShowUpload() {
      this.getHeight();
      this.getHeight()
      if (this.VideoPhotoData.uploadDiaplay) {
        if (!this.VideoPhotoData.uploadType) {
          let scrollContain = this.$refs.scrollContain;
          this.VideoPhotoData.scrollContainDom = scrollContain;
          this.VideoPhotoData.showType = "search";
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          this.VideoPhotoData.showType = "search"
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
          this.isDisabled = false;
          this.isDisabled = false
        } else {
          //this.VideoPhotoData.scrollContainDom = '';
          this.VideoPhotoData.showType = "findByPic";
          this.VideoPhotoData.showType = "findByPic"
        }
      } else {
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
        this.VideoPhotoData.uploadType = false
        this.VideoPhotoData.showType = "search"
      }
    },
    resizeWidth(w) {
      this.defaultWidth = w;
      this.defaultWidth = w
    },
    resizeHeight(h) {
      this.defaultHeight = h;
      this.defaultHeight = h
    },
    getHeight() {
      let w = this.$refs.mid.offsetWidth;
      let integer = parseInt(w / 330);
      let integerSearchImg = parseInt((w - 300) / 325);
      let w = this.$refs.mid.offsetWidth
      let integer = parseInt(w / 330)
      let integerSearchImg = parseInt((w - 300) / 325)

      // 取消size修改
      // this.handleSizeChange(integer, integerSearchImg);

      this.cardWidth = `calc(${100 / integer}% - 20px)`;
      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
      this.cardWidth = `calc(${100 / integer}% - 20px)`
      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`
    },
    uploadChange() {
      this.VideoPhotoData.uploadDiaplay = false;
      this.VideoPhotoData.clearStatus();
      this.VideoPhotoData.uploadDiaplay = false
      this.VideoPhotoData.clearStatus()
    },
    blackAngWhite() {
      if (
        this.VideoPhotoData.selectBlacks &&
        this.VideoPhotoData.selectBlacks.length > 0
      ) {
      if (this.VideoPhotoData.selectBlacks && 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 &&
        this.VideoPhotoData.selectBlacks.length == 0
      ) {
      if (this.VideoPhotoData.selectBlacks && 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 &&
        this.VideoPhotoData.selectWhites.length > 0
      ) {
      if (this.VideoPhotoData.selectWhites && 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.$set(this.VideoPhotoData.blackList[i], "disabled", true)
        }
      }
      if (
        this.VideoPhotoData.selectWhites &&
        this.VideoPhotoData.selectWhites.length == 0
      ) {
      if (this.VideoPhotoData.selectWhites && 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.$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);
      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.CardList.addBaseList.splice(index, 1)
        this.VideoPhotoData.selectBlacks = []
        this.VideoPhotoData.selectWhites = []
      })
    },
    getDetails(ev, index) {
      //let obj = this.CardList.datalist[index];
      this.CardList.datalist = this.VideoPhotoData.cards;
      let obj = this.CardList.datalist[index];
      this.CardList.datalist = this.VideoPhotoData.cards
      let obj = this.CardList.datalist[index]
      /*  try {
        this.CardList.details = Array.from(
          new Set([...this.CardList.details, ...[obj]])
@@ -647,27 +622,26 @@
      } catch (error) {
        console.log(error);
      } */
      this.CardList.details = [];
      this.CardList.details.push(obj);
      this.CardList.details = []
      this.CardList.details.push(obj)
      // this.CardList.details.push(obj);
      this.VideoPhotoData.activeCard = obj.activeObject.id;
      console.log(this.VideoPhotoData.activeCard);
      this.VideoPhotoData.activeCard = obj.activeObject.id
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item);
      this.CardList.addBaseList.push(item)
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          done()
        })
        .catch(() => {});
        .catch(() => {})
    },
    showUpload() {
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay;
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay
      //初始化数据
      this.VideoPhotoData.clearStatus();
      this.CardList.details = [];
      this.VideoPhotoData.clearStatus()
      this.CardList.details = []
      // if (this.VideoPhotoData.uploadDiaplay) {

      // }
@@ -675,186 +649,164 @@
    },
    getDateInit() {
      // 要求 默认一个月
      const end = new Date();
      const start = new Date();
      const nowDate = new Date();
      nowDate.setHours(0);
      nowDate.setMinutes(0);
      nowDate.setSeconds(0);
      nowDate.setMilliseconds(0);
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
      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"),
      ];
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      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")]
    },
    format(array) {
      if (!array || array.length === 0) {
        return [];
        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() {
      if (!this.searchTime) {
        this.searchTime = [];
        this.searchTime = []
      }
      // let obj = document.getElementById('searchMid');
      // let load = this.$loading({
      //   target:obj,
      // })
      // load.close();
      // this.AuthData.loading = true
      this.VideoPhotoData.page = 1;
      this.VideoPhotoData.queryTabs = this.tagValues;
      this.VideoPhotoData.page = 1
      this.VideoPhotoData.queryTabs = this.tagValues
      //处理搜索类型
      var tempArr = this.taskValues.map((task) => task.split(","));
      var tasks = [];
      console.log("1");
      var tempArr = this.taskValues.map((task) => task.split(","))
      var tasks = []

      tempArr.forEach((arr) => {
        tasks = tasks.concat(arr);
      });
      this.VideoPhotoData.queryTasks = tasks;
      console.log("2");
        tasks = tasks.concat(arr)
      })
      this.VideoPhotoData.queryTasks = tasks

      this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
      console.log("3");
      console.log(this.searchTime);
      this.VideoPhotoData.queryAlarmlevel = this.stringToNum()

      this.VideoPhotoData.searchTime = this.format(this.searchTime);
      console.log(this.VideoPhotoData.searchTime);
      this.VideoPhotoData.searchTime = this.format(this.searchTime)

      //this.VideoPhotoData.inputValue = this.searchText;
      this.VideoPhotoData.showType = this.showType;
      this.VideoPhotoData.showType = this.showType
      if (!this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.uploadDiaplay = false;
        //this.VideoPhotoData.page = this.currentPage;
        // this.VideoPhotoData.querySearchList();
        console.log("4");
        this.VideoPhotoData.uploadDiaplay = false

        this.setLoadSearch(this.VideoPhotoData.querySearchList());
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
      } else {
        //this.VideoPhotoData.page = this.currentPage;
        // this.VideoPhotoData.findPersonByPage();
        console.log("5");

        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
      }
      console.log("cards", this.VideoPhotoData.cards)
    },
    stringToNum() {
      var arr = [];
      var arr = []
      this.alarmValues.forEach((element) => {
        if (element == "-1") {
          arr.push(-1);
          arr.push(-1)
        }
        if (element == "1") {
          arr.push(1);
          arr.push(1)
        }
        if (element == "2") {
          arr.push(2);
          arr.push(2)
        }
        if (element == "3") {
          arr.push(3);
          arr.push(3)
        }
        if (element == "4") {
          arr.push(4);
          arr.push(4)
        }
        if (element == "5") {
          arr.push(5);
          arr.push(5)
        }
      });
      return arr;
      })
      return arr
    },
    changePages(page) {
      this.VideoPhotoData.page = page;
      this.VideoPhotoData.page = page
      if (!this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.uploadDiaplay = false;
        this.VideoPhotoData.uploadDiaplay = false
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
      } else {
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
      }
    },
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
      this.CardList.addBaseList.splice(index, 1)
    },
    handleSizeChange(integer, integerSearchImg) {
      if (this.VideoPhotoData.uploadDiaplay) {
        this.VideoPhotoData.size = integerSearchImg * 10;
        this.VideoPhotoData.size = integerSearchImg * 10
        //this.VideoPhotoData.findPersonByPage();
      } else {
        this.VideoPhotoData.size = integer * 10;
        this.VideoPhotoData.size = integer * 10
        //this.VideoPhotoData.querySearchList();
      }
    },
    sizeChange(size) {
      if (this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.size = size;
        this.VideoPhotoData.findPersonByPage();
        this.VideoPhotoData.size = size
        this.VideoPhotoData.findPersonByPage()
      } else {
        this.VideoPhotoData.uploadDiaplay = false;
        this.VideoPhotoData.size = size;
        this.VideoPhotoData.uploadDiaplay = false
        this.VideoPhotoData.size = size
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
      }
    },
    clearSearch() {
      this.tagValues = [];
      this.taskValues = [];
      this.alarmValues = [];
      this.VideoPhotoData.queryTabs = [];
      this.VideoPhotoData.queryTasks = [];
      this.VideoPhotoData.queryAlarmlevel = [];
      this.VideoPhotoData.searchTime = this.getDateInit();
      this.VideoPhotoData.inputValue = "";
      this.tagValues = []
      this.taskValues = []
      this.alarmValues = []
      this.VideoPhotoData.queryTabs = []
      this.VideoPhotoData.queryTasks = []
      this.VideoPhotoData.queryAlarmlevel = []
      this.VideoPhotoData.searchTime = this.getDateInit()
      this.VideoPhotoData.inputValue = ""

      console.log(this.searchTime);

      this.searchTime = this.getDateInit();
      this.searchTime = this.getDateInit()
      if (!this.VideoPhotoData.uploadType) {
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
        this.setLoadSearch(this.VideoPhotoData.querySearchList())
      } else {
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage())
      }
    },
    disabled(data) {
      this.isDisabled = data;
      this.isDisabled = data
    },
    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);
      this.AuthData.setLoading("searchMid", this)
      fn.then(() => {
        this.AuthData.closeLoad();
      });
        this.AuthData.closeLoad()
      })
    },
    tagChange(obj) {
      if (obj.length > 0) {
        this.showType = "compare";
        this.showType = "compare"
      } else {
        this.showType = "search";
        this.showType = "search"
      }

      this.VideoPhotoData.queryTabs = obj;
      this.VideoPhotoData.queryTabs = obj

      this.setLoadSearch(this.VideoPhotoData.querySearchList());
    },
  },
};
      this.setLoadSearch(this.VideoPhotoData.querySearchList())
    }
  }
}
</script>

<style lang="scss" >
<style lang="scss">
.searching-box {
  width: 100%;
  height: 100% !important;
@@ -1100,8 +1052,8 @@
    width: 100px;
    z-index: 10;
    padding: 10px;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05),
      0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08),
      0px 2px 4px -1px rgba(0, 0, 0, 0.12);

    .downItem {
      text-align: center;