添加检索应用

zhangzengfei

2020-07-30 9506094f2cd434cd4bc70f67dc858fad97294f9d

添加检索应用

 src/assets/gif/blue.gif

 src/assets/gif/loading.gif

 src/assets/gif/searchLoading.gif

 src/pages/search/index/App.vue

New file
@@ -0,0 +1,116 @@
<template>
  <div class="column">
    <div class="column-left" :style="`height:${screenHeight}px;`">
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        <left-nav :appName="'Video'" :height="screenHeight - 40"></left-nav>
      </div>
    </div>
    <div class="column-right" :style="`height:${screenHeight}px;`">
      <right-side />
    </div>
  </div>
</template>

<script>
import LeftNav from "@/components/LeftNav";
// import CameraVideo from "./components/Video.vue";
import RightSide from "./Searching"

export default {
  name: "SearchPage",
  components: {
    LeftNav,
    RightSide
  },
  data() {
    return {
      screenHeight: 0,
    }
  },
  mounted() {
    this.screenHeight = document.documentElement.clientHeight - 20;
    window.onresize = () => {
      return (() => {
        this.screenHeight = document.documentElement.clientHeight - 20;
      })();
    };
  },
};
</script>

<style lang="scss" scoped>
.column {
  overflow: hidden;
}
.column-left {
  height: inherit;
  background-color: #fff;
  position: relative;
  float: left;
}
.column-right {
  height: 100%;
  padding: 16px;
  background-color: #eee;
  box-sizing: border-box;
  overflow: hidden;
}
.resize-save {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  left: 0;
  padding: 16px;
  overflow-x: hidden;
}
.resize-bar {
  width: 310px;
  height: inherit;
  resize: horizontal;
  cursor: ew-resize;
  opacity: 0;
  overflow: scroll;
  max-width: 500px; //设定最大拉伸长度
  min-width: 310px; //设定最小宽度
}
/* 拖拽线 */
.resize-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px solid #eee;
  border-left: 1px solid #bbb;
  pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
  border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
  width: 200px;
  height: inherit;
}

/* Firefox只有下面一小块区域可以拉伸 */
@supports (-moz-user-select: none) {
  .resize-bar:hover ~ .resize-line,
  .resize-bar:active ~ .resize-line {
    border-left: 1px solid #bbb;
  }
  .resize-bar:hover ~ .resize-line::after,
  .resize-bar:active ~ .resize-line::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: -8px;
    // background: url(./resize.svg);
    background-size: 100% 100%;
  }
}
</style>

 src/pages/search/index/Searching.vue

New file
@@ -0,0 +1,905 @@
<template>
  <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-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>
      </div>
      <div class="searching-right-content">
        <div class="top">
          <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'"
            ></el-button>
          </el-tooltip>
          <p class="p-label" style="width:16%">
            <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="请选择"
            >
              <el-option
                v-for="item in VideoPhotoData.tabs"
                style="font-size:12px"
                :key="item.key"
                :label="item.title"
                :value="item.value"
                :title="item.title"
              ></el-option>
            </el-select>
          </p>
          <p class="p-task" style="width:16%">
            <b>场景：</b>
            <el-select
              v-model="taskValues"
              multiple
              @change="searchingBtn"
              :disabled="typeDisable"
              collapse-tags
              size="mini"
              style="width:calc(100% - 40px);min-width: 120px;"
              placeholder="请选择"
            >
              <!-- <el-option
                v-for="item in VideoPhotoData.tasks"
                style="font-size:12px"
                :key="item.taskid+'x'"
                :label="item.del_flag && item.taskname !=='人脸测温'? item.taskname+'（已删除）' : item.taskname"
                :value="item.taskid"
                :title="item.del_flag && item.taskname !=='人脸测温'? item.taskname+'（已删除）' : item.taskname"
              ></el-option>-->
              <el-option
                v-for="item in VideoPhotoData.tasks"
                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"
              ></el-option>
            </el-select>
          </p>
          <p class="p-level" style="width:18%">
            <b>事件等级：</b>
            <el-select
              v-model="alarmValues"
              multiple
              @change="searchingBtn"
              :disabled="isDisabled"
              collapse-tags
              size="mini"
              style="width:calc(100% - 64px);min-width: 120px;"
              placeholder="请选择"
            >
              <el-option
                v-for="item in VideoPhotoData.dictionary.ALARMLEVEL"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </p>
          <p class="p-date" style="width:19%">
            <el-date-picker
              size="mini"
              v-model="searchTime"
              @change="searchingBtn"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :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%">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              style="width: calc(100% - 75px);min-width:100px;margin-left:10px;margin-right: 10px;"
              v-model="VideoPhotoData.inputValue"
              size="mini"
            ></el-input>
            <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% - 72px)">
          <!-- <div id="searchMid" class="mid" ref="scrollContain" v-if="!VideoPhotoData.uploadDiaplay">
            <Card
              :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
              v-for="(item, index) in VideoPhotoData.cards"
              :key="index + 'a'"
              :outHeight="'155px'"
              :outWidth="cardWidth"
              :data="item"
              :showType="showType"
              @detailsClick="getDetails($event, index)"
              @addToBase="toAdd"
            ></Card>
          </div>-->
          <div id="searchMid" class="mid">
            <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay">
              <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img>
            </div>
            <div
              class="right-section"
              ref="scrollContain"
              :style="VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : 'width:100%'"
            >
              <Card
                v-for="(item, index) in VideoPhotoData.cards"
                :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
                :key="index + 'u'"
                :outHeight="'162px'"
                :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
                :data="item"
                :showType="showType"
                @detailsClick="getDetails($event, index)"
                @addToBase="toAdd"
              ></Card>
            </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">
      <hsc-window
        v-for="(item, index) in CardList.addBaseList"
        :closeButton="true"
        @closebuttonclick="closeWindow(index)"
        :key="index"
        @update:height="resizeHeight"
        @update:width="resizeWidth"
        style="background:white; height:475px"
        :left="center.x + index * 10"
        :top="center.y + index * 10"
        :resizable="true"
        positionHint="center"
        :isScrollable="true"
        :minWidth="662"
        :minHeight="479"
        :maxWidth="10000"
        :maxHeight="7000"
        :height="defaultHeight"
        :width="defaultWidth"
      >
        <div class="addToBase">
          <div class="topLabel">加入底库</div>
          <div class="items">
            <div class="lable">
              <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>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="items">
            <div class="lable">
              <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>
                </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>
          </div>
        </div>
      </hsc-window>
    </hsc-window-style-metal>
  </div>
</template>

<script>
import Card from "@/components/subComponents/Card";
import UploadImg from "@/components/searching/UploadImg";
import bus from "./main";
export default {
  components: {
    Card,
    UploadImg
  },
  data() {
    return {
      cardWidth: "",
      center: "",
      defaultHeight: 432,
      defaultWidth: 600,
      isDisabled: false,
      typeDisable: false,
      showType: "search",
      searchImgCardWidth: "",
      tagValues: [],
      alarmValues: [],
      dialogVisible: false,
      taskValues: [],
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      searchText: "",
      currentPage: 1,

    };
  },

  created() {
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = true;
    this.TreeDataPool.clean();
    this.TreeDataPool.fetchTreeData();
  },
  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
    })
    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
    //   ];
    // }

    this.searchTime = this.getDateInit();
    this.VideoPhotoData.searchTime = this.getDateInit();

    // 暂时关闭跳转 20200730
    // if (this.$route.query.showType === "findByPic") {
    if (0) {
      this.VideoPhotoData.uploadDiaplay = true;
      console.log("别处跳过来的以图搜图");
      this.VideoPhotoData.picUrl = this.$route.query.picSmUrl;
      this.VideoPhotoData.uploadImg = this.$route.query.picSmUrl;
      this.VideoPhotoData.uploadType = true
      this.VideoPhotoData.compTargetId = this.$route.query.targetId
      this.VideoPhotoData.compTargetType = this.$route.query.compType
      this.VideoPhotoData.size = 30
      this.VideoPhotoData.compareTabs = ["esData"];
      this.VideoPhotoData.findPerson2(); // 查找此人
      // this.$nextTick(() => {
      //   this.$refs.uploadImg.rightSectionDisplay = true;
      // });
    } else {
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
      // this.VideoPhotoData.querySearchList();
      this.setLoadSearch(this.VideoPhotoData.querySearchList());
    }

    this.VideoPhotoData.queryTagList();
    this.VideoPhotoData.queryTaskList();
    this.VideoPhotoData.queryDictionary();
    this.$nextTick(() => {
      bus.$on("changePage", page => {
        this.currentPage = page;
        this.VideoPhotoData.page = page;
      });
    });
  },
  destroyed() {
    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.CardList.addBaseList = [];
    this.VideoPhotoData.selectBlacks = [];
    this.VideoPhotoData.selectWhites = [];
  },
  watch: {
    "TreeDataPool.showTreeBox"(value) {
      this.getHeight();
      if (this.VideoPhotoData.realSmallPath.length > 0) {
        this.VideoPhotoData.findPersonByPage();
      } else {
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      }
    },
    // "TreeDataPool.selectedNodes": function(newValue,oldValue) {
    //   if (newValue !== oldValue) {
    //     this.VideoPhotoData.treeNodes = newValue;
    //     console.log("监听树节点中的刷新方法", newValue,oldValue);
    //     this.VideoPhotoData.querySearchList();
    //   }
    // },
    "TreeDataPool.selectedNodes": {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.VideoPhotoData.treeNodes = newVal;
          if (this.VideoPhotoData.uploadType) {
            this.VideoPhotoData.findPersonByPage()
          } else {
            // this.VideoPhotoData.querySearchList();
            this.setLoadSearch(this.VideoPhotoData.querySearchList());
          }
        }
      },
      deep: true    //深度监听
    },
    "DataStackPool.selectedDir": {
      handler(nodes, oldNodes) {
        if (nodes !== oldNodes) {
          // this.VideoPhotoData.treeNodes = nodes.map(i=>{return i.id});
          this.VideoPhotoData.treeNodes = [nodes.id];
          if (this.VideoPhotoData.uploadType) {
            this.VideoPhotoData.findPersonByPage()
          } else {
            // this.VideoPhotoData.querySearchList();
            this.setLoadSearch(this.VideoPhotoData.querySearchList());
          }
        }
      },
      deep: true
    },
    "VideoPhotoData.activeCard": function (value) {
      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;
        if (
          cardTop - cardHeight - scrollTop > divHeight ||
          cardTop - cardHeight - scrollTop < 0
        )
          this.$refs.scrollContain.scrollTo(0, cardTop - cardHeight);
      }
    },
    "VideoPhotoData.uploadType": function (value) {
      console.log("页面模式：", value)
      if (value) {
        this.typeDisable = true;
      } else {
        this.typeDisable = false;
        this.VideoPhotoData.querySearchList();
      }
    },
    "VideoPhotoData.selectBlacks": function (value) {
      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());
      }
    },
    "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
          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";
      }
    }
  },
  methods: {
    resizeWidth(w) {
      this.defaultWidth = w;
    },
    resizeHeight(h) {
      this.defaultHeight = h;
    },
    getHeight() {
      let w = this.$refs.mid.offsetWidth;
      let integer = parseInt(w / 330);
      let integerSearchImg = parseInt((w - 300) / 325);
      this.handleSizeChange(integer, integerSearchImg);
      this.cardWidth = `calc(${100 / integer}% - 20px)`;
      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
    },
    uploadChange() {
      this.VideoPhotoData.uploadDiaplay = false;
    },
    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)
        }
      }
      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)
        }
      }
      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)
        }
      }
      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)
        }
      }
    },
    saveAddBase(item, index) {
      if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
        this.$notify({
          title: "注意",
          message: "请选择要添加的底库",
          type: "warning"
        })
        return
      }
      let res = this.VideoPhotoData.addBase(item)
      res.then(data => {
        console.log("then", data)
        if (data.success) {
          this.$notify({
            title: "成功",
            message: data.data,
            type: "success"
          })
        } else {
          this.$notify({
            title: "失败",
            message: data.data,
            type: "error"
          })
        }
        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.details = Array.from(
        new Set([...this.CardList.details, ...[obj]])
      );
      // this.CardList.details.push(obj);
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
    toAdd(item) {
      this.CardList.addBaseList.push(item)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    showUpload() {
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay;
      //初始化数据
      this.VideoPhotoData.clearStatus();
      this.CardList.details = [];
      // if (this.VideoPhotoData.uploadDiaplay) {

      // }
      //this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg");
    },
    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")
      ];
    },
    format(array) {
      return [
        this.$moment(array[0]).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 tasks = [];
      tempArr.forEach(arr => {
        tasks = tasks.concat(arr)
      });
      this.VideoPhotoData.queryTasks = tasks;

      this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
      this.VideoPhotoData.searchTime = this.format(this.searchTime);
      //this.VideoPhotoData.inputValue = this.searchText;
      this.VideoPhotoData.showType = this.showType;
      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());
      }
    },
    stringToNum() {
      var arr = [];
      this.alarmValues.forEach(element => {
        if (element == "-1") {
          arr.push(-1);
        }
        if (element == "1") {
          arr.push(1);
        }
        if (element == "2") {
          arr.push(2);
        }
        if (element == "3") {
          arr.push(3);
        }
        if (element == "4") {
          arr.push(4);
        }
        if (element == "5") {
          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());
      } else {
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    closeWindow(index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    handleSizeChange(integer, integerSearchImg) {
      if (this.VideoPhotoData.uploadDiaplay) {
        this.VideoPhotoData.size = integerSearchImg * 10;
        //this.VideoPhotoData.findPersonByPage();
      } else {
        this.VideoPhotoData.size = integer * 10;
        //this.VideoPhotoData.querySearchList();
      }
    },
    sizeChange(size) {
      if (this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.size = size;
        this.VideoPhotoData.findPersonByPage();
      } else {
        this.VideoPhotoData.uploadDiaplay = false;
        this.VideoPhotoData.size = size;
        // 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.searchTime = this.getDateInit();
      if (!this.VideoPhotoData.uploadType) {
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      } else {
        // this.VideoPhotoData.findPersonByPage();
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    disabled(data) {
      this.isDisabled = data;
    },
    getCenter() {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200
      };
    },
    setLoadSearch(fn) {
      this.AuthData.setLoading("searchMid", this);
      fn.then(_ => {
        this.AuthData.closeLoad();
      })
    }
  }
};
</script>

<style lang="scss">
.searching-box {
  width: 100%;
  height: 100% !important;
  float: left;
  //position: relative;
  .searching-right {
    width: 100%;
    background-color: #e9ebf2;
    height: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
    .searching-right-nav {
      height: 50px;
      width: 100%;
      line-height: 58px;
      text-align: left;
      font-size: 14px !important;
      box-sizing: border-box;
      color: rgba(0, 0, 0, 0.78) !important;
    }
    .searching-right-content {
      height: calc(100% - 135px);
      width: 100%;
      box-sizing: border-box;
      .top {
        background-image: linear-gradient(-180deg, #ffffff 13%, #e9ebf2 100%);
        height: 76px;
        width: 100%;
        padding: 5px 22px;
        box-sizing: border-box;
        text-align: left;
        // line-height: 55px;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        .p-label,
        .p-task,
        .p-level,
        .p-date,
        .p-input,
        .p-clear {
          display: inline-block;
          padding-right: 10px;
          box-sizing: border-box;
          margin-top: 20px;
          b:hover {
            color: #2249b4;
          }
        }
        .clear-searching {
          cursor: pointer;
          text-decoration: underline;
          width: 40px;
          font-size: 13px;
          color: #3d68e1;
        }
      }
      .mid {
        width: 100%;
        height: 100%;
        padding: 10px;
        overflow: auto;
        position: relative;
        .my-card {
          float: left;
          margin: 0px 14px 10px 0px;
          cursor: pointer;
        }
      }
      .foot {
        overflow: hidden;
        width: 100%;
        height: 80px;
        line-height: 80px;
        padding-top: 24px;
        padding-right: 24px;
        box-sizing: border-box;
        text-align: right;
      }
    }
  }
  .el-select__tags {
    max-width: 250px !important;
  }
}
.el-select-dropdown {
  width: 200px !important;
}
.el-tag {
  max-width: 85% !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.addToBase {
  width: 98%;
  height: 450px;
  position: relative;
  .topLabel {
    margin-top: 20px;
    height: 40px;
    border-bottom: 1px solid #eee;
    font-family: PingFangSC-Medium;
    font-size: 20px;
    font-weight: 600;
    line-height: 1rem;
    color: #222222;
    text-align: left;
    margin-left: 15px;
  }
  .items {
    width: 100%;
    height: auto;
    max-height: 35%;
    overflow-y: auto;
    margin: 20px 0px;
    .lable {
      width: 15%;
      margin-top: 10px;
      float: left;
      //font-family: PingFangSC-Medium;
      font-size: 14px;
      font-weight: 600;
    }
    .baseList {
      width: 85%;
      height: 100%;
      float: left;

      // display: flex;
      // justify-content: flex-start;
      .base {
        //flex-wrap: wrap;
        width: calc(33% - 10px);
        padding: 0px 5px;
        line-height: 30px;
        float: left;
        text-align: left;
        font-size: 12px !important;
        .el-checkbox {
          width: 100%;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .el-checkbox__label {
            display: inline !important;
          }
        }
      }
    }
  }
  .buttons {
    position: absolute;
    right: 0px;
    bottom: 15px;
  }
}
.search {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
#searchMid {
  .el-loading-mask {
    .el-loading-spinner {
      width: 100%;
      height: 100%;
      .el-loading-spinner-search {
        background: url("../../../assets/gif/searchLoading.gif") no-repeat;
      }
    }
  }
  .left-selection {
    width: 300px;
    height: 100%;
    float: left;
    margin-right: 15px;
  }
  .right-section {
    //width: calc(100% - 315px);
    height: 100%;
    float: left;
    overflow: auto;
    position: relative;
  }
}
</style>

 src/pages/search/index/main.ts

New file
@@ -0,0 +1,34 @@
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
import "../../../assets/css/common.scss"
import "../../../assets/css/overried.scss"

import "../../../assets/icons/alibaba/iconfont.css";
import "../../../assets/icons/basic/iconfont.css";
import "../../../assets/icons/iconfont.css";
import "../../../assets/icons/symbol.js";

import App from './App.vue'
import moment from "moment";
Vue.prototype.$moment = moment;

import Mixin from "./mixins";
Vue.mixin(Mixin);

Vue.use(ElementUI)

import * as VueWindow from "@hscmap/vue-window";
Vue.use(VueWindow);

Vue.filter('moment', function (value, formatString) {
  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
  return moment(value).format(formatString);

});

export default Vue.prototype.bus = new Vue({
  el: '#app',
  render: h => h(App)
})

 src/pages/search/index/mixins.ts

New file
@@ -0,0 +1,28 @@
import VideoPhotoData from "@/Pool/VideoPhotoData";
import VideoTaskData from "@/Pool/VideoTaskData";
import TreeDataPool from "@/Pool/TreeData";
import CardList from "@/Pool/CardList";
import DataStackPool from "@/Pool/dataStack"
import AuthData from '@/Pool/AuthData';

/* eslint-disable */
const onlyVideoPhotoData = new VideoPhotoData
const onlyVideoTaskData = new VideoTaskData
const onlyTreeDataPool = new TreeDataPool
const onlyDataStack = new DataStackPool
const onlyCardList = new CardList
const onlyAuthData = new AuthData

const mixin = {
  data() {
    return {
      TreeDataPool: onlyTreeDataPool,
      VideoPhotoData: onlyVideoPhotoData,
      CardList: onlyCardList,
      DataStackPool: onlyDataStack,
      VideoTaskData: onlyVideoTaskData,
      AuthData: onlyAuthData,
    };
  },
};
export default mixin;