监控ui

heyujie

2021-10-11 ae2d855c89ca722ac7309fdf1aa6ceed370e3b95

 src/pages/search/index/Searching.vue

@@ -4,7 +4,7 @@
      <div class="searching-right-nav">
        <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>
@@ -27,12 +27,12 @@
            <el-select
              v-model="tagValues"
              multiple
              @change="searchingBtn"
              :disabled="isDisabled"
              collapse-tags
              size="mini"
              style="width:calc(100% - 40px);min-width: 120px;"
              placeholder="请选择"
              @change="tagChange"
            >
              <el-option
                v-for="item in VideoPhotoData.tabs"
@@ -137,6 +137,7 @@
                :outHeight="'162px'"
                :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
                :data="item"
                :searchTime="searchTimeFormated"
                :showType="showType"
                @detailsClick="getDetails($event, index)"
                @addToBase="toAdd"
@@ -155,17 +156,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">
@@ -236,14 +226,14 @@
<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
  },
  data() {
  data () {
    return {
      cardWidth: "",
      center: "",
@@ -255,7 +245,6 @@
      searchImgCardWidth: "",
      tagValues: [],
      alarmValues: [],
      dialogVisible: false,
      taskValues: [],
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
@@ -263,18 +252,21 @@
      ],
      searchText: "",
      currentPage: 1,

    };
  },

  created() {
  computed: {
    searchTimeFormated(){
      return this.format(this.searchTime)
    }
  },
  created () {
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
    this.TreeDataPool.multiple = true;
    this.TreeDataPool.clean();
    this.TreeDataPool.fetchTreeData();
  },
  mounted() {
  mounted () {
    this.$nextTick(() => {
      let scrollContain = this.$refs.scrollContain
      this.VideoPhotoData.scrollContainDom = scrollContain
@@ -293,20 +285,25 @@
    //     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.picUrl = getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadImg = getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadType = true
      this.VideoPhotoData.compTargetId = this.getUrlKey("targetId")
      this.VideoPhotoData.compTargetType = this.getUrlKey("compType")
      this.VideoPhotoData.compTargetId = getUrlKey("targetId")
      this.VideoPhotoData.compTargetType = getUrlKey("compType")
      this.VideoPhotoData.size = 30
      this.VideoPhotoData.compareTabs = ["esData"];
      this.VideoPhotoData.findPerson2(); // 查找此人
@@ -327,7 +324,7 @@
      });
    });
  },
  destroyed() {
  destroyed () {
    window.removeEventListener("resize", this.getHeight);
    this.CardList.details = [];
    // this.TreeDataPool.treeActiveName = "camera";
@@ -342,7 +339,13 @@
    this.VideoPhotoData.selectWhites = [];
  },
  watch: {
    "TreeDataPool.showTreeBox"(value) {
    'TreeDataPool.treeActiveName' (n, o) {
      if (n && n == 'camera') {
        this.VideoPhotoData.treeNodes = [];
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      }
    },
    "TreeDataPool.showTreeBox" (value) {
      this.getHeight();
      if (this.VideoPhotoData.realSmallPath.length > 0) {
        this.VideoPhotoData.findPersonByPage();
@@ -354,7 +357,6 @@
    // "TreeDataPool.selectedNodes": function(newValue,oldValue) {
    //   if (newValue !== oldValue) {
    //     this.VideoPhotoData.treeNodes = newValue;
    //     console.log("监听树节点中的刷新方法", newValue,oldValue);
    //     this.VideoPhotoData.querySearchList();
    //   }
    // },
@@ -365,16 +367,16 @@
          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) {
      handler (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) {
@@ -403,9 +405,9 @@
      }
    },
    "VideoPhotoData.uploadType": function (value) {
      console.log("页面模式：", value)
      if (value) {
        this.typeDisable = true;
        this.disabled = true;
      } else {
        this.typeDisable = false;
        this.VideoPhotoData.querySearchList();
@@ -417,24 +419,10 @@
    "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";
@@ -452,24 +440,47 @@
    }
  },
  methods: {
    resizeWidth(w) {
    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;
    },
    resizeHeight(h) {
    resizeHeight (h) {
      this.defaultHeight = h;
    },
    getHeight() {
    getHeight () {
      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() {
    uploadChange () {
      this.VideoPhotoData.uploadDiaplay = false;
      this.VideoPhotoData.clearStatus()
    },
    blackAngWhite() {
    blackAngWhite () {
      if (this.VideoPhotoData.selectBlacks.length > 0) {
        for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
          //this.VideoPhotoData.whiteList[i].disabled = true
@@ -495,7 +506,7 @@
        }
      }
    },
    saveAddBase(item, index) {
    saveAddBase (item, index) {
      if (this.VideoPhotoData.selectBlacks.length === 0 && this.VideoPhotoData.selectWhites.length === 0) {
        this.$notify({
          title: "注意",
@@ -506,7 +517,6 @@
      }
      let res = this.VideoPhotoData.addBase(item)
      res.then(data => {
        console.log("then", data)
        if (data.success) {
          this.$notify({
            title: "成功",
@@ -525,8 +535,7 @@
        this.VideoPhotoData.selectWhites = []
      })
    },
    getDetails(ev, index) {
      debugger
    getDetails (ev, index) {
      //let obj = this.CardList.datalist[index];
      this.CardList.datalist = this.VideoPhotoData.cards;
      let obj = this.CardList.datalist[index];
@@ -536,18 +545,17 @@
      // this.CardList.details.push(obj);
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
    toAdd(item) {
      debugger
    toAdd (item) {
      this.CardList.addBaseList.push(item)
    },
    handleClose(done) {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    showUpload() {
    showUpload () {
      this.VideoPhotoData.uploadDiaplay = !this.VideoPhotoData.uploadDiaplay;
      //初始化数据
      this.VideoPhotoData.clearStatus();
@@ -557,7 +565,7 @@
      // }
      //this.VideoPhotoData.uploadImg = require("C:/Users/mdesign/Desktop/cvasdv.jpg");
    },
    getDateInit() {
    getDateInit () {
      // 要求 默认一个月
      const end = new Date();
      const start = new Date();
@@ -573,20 +581,18 @@
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss")
      ];
    },
    format(array) {
    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() {
    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;
@@ -603,19 +609,17 @@
      //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() {
    stringToNum () {
      var arr = [];
      this.alarmValues.forEach(element => {
        if (element == "-1") {
@@ -637,13 +641,11 @@
          arr.push(5);
        }
      });
      // console.log("输出的数组：", arr);
      return arr;
    },
    changePages(page) {
    changePages (page) {
      this.VideoPhotoData.page = page;
      if (!this.VideoPhotoData.uploadType) {
        console.log("分页改变！")
        this.VideoPhotoData.uploadDiaplay = false;
        // this.VideoPhotoData.querySearchList();
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
@@ -652,10 +654,10 @@
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    closeWindow(index) {
    closeWindow (index) {
      this.CardList.addBaseList.splice(index, 1);
    },
    handleSizeChange(integer, integerSearchImg) {
    handleSizeChange (integer, integerSearchImg) {
      if (this.VideoPhotoData.uploadDiaplay) {
        this.VideoPhotoData.size = integerSearchImg * 10;
        //this.VideoPhotoData.findPersonByPage();
@@ -664,7 +666,7 @@
        //this.VideoPhotoData.querySearchList();
      }
    },
    sizeChange(size) {
    sizeChange (size) {
      if (this.VideoPhotoData.uploadType) {
        this.VideoPhotoData.size = size;
        this.VideoPhotoData.findPersonByPage();
@@ -675,7 +677,7 @@
        this.setLoadSearch(this.VideoPhotoData.querySearchList());
      }
    },
    clearSearch() {
    clearSearch () {
      this.tagValues = []
      this.taskValues = []
      this.alarmValues = []
@@ -693,23 +695,31 @@
        this.setLoadSearch(this.VideoPhotoData.findPersonByPage());
      }
    },
    disabled(data) {
    disabled (data) {
      this.isDisabled = data;
    },
    getCenter() {
    getCenter () {
      this.center = {
        x: document.documentElement.clientWidth / 2 - 250,
        y: document.documentElement.clientHeight / 2 - 200
      };
    },
    setLoadSearch(fn) {
    setLoadSearch (fn) {
      this.AuthData.setLoading("searchMid", this);
      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());
    }
  }
};
@@ -817,12 +827,12 @@
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titlebar{
  height: 10px!important;
  background: #fff!important;
  .button{
.titlebar {
  height: 10px !important;
  background: #fff !important;
  .button {
    position: absolute;
    font-size: 25px!important;
    font-size: 25px !important;
    right: 10px;
    top: 10px;
    z-index: 3;
@@ -911,7 +921,7 @@
      width: 100%;
      height: 100%;
      .el-loading-spinner-search {
        background: url("/images/search/searchLoading.gif") no-repeat;
        background: url('/images/search/searchLoading.gif') no-repeat;
      }
    }
  }