card 查找此人添加检索页面跳转

zhangzengfei

2020-08-05 4c3e08670a6a98deea9984c7090994e8e47d3339

card 查找此人添加检索页面跳转

 src/components/subComponents/CardItem.vue

@@ -572,19 +572,18 @@
      this.$emit("addToBase", item);
    },
    tosearch(item) {
      var curWwwPath = window.document.location.href;
      var pathname = window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathname);
      var localhostPath = curWwwPath.substring(0, pos); //ip+port
      var href = localhostPath + "/Layout/Searching"
      let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id
      var url = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
      console.log("跳转地址", href, "url", url)
      var compType = 1 //  数据来自于es
      let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
      let compType = 1 //  数据来自于es
      if (!item.id || item.id == "") {
        compType = 0 // 数据来自于底库
      }
      window.open(href + '?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + url + '&compType=' + compType)
      // window.open(href + '?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + url + '&compType=' + compType)

      let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType;
      window.parent.postMessage({
        msg: message
      }, "*")
    }
  }
};

 src/pages/desktop/index/components/DFrame.vue

@@ -8,15 +8,15 @@
    <div class="d-frame-title" v-drag @click="frameClick()">
      <div class="d-frame-title-operation">
        <i class="icon-minus d-frame-operation-minus" @click="minFrame(data,$event)">
          <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt="">
          <img :src="`${publicPath}images/desktop/header-icon/min.png`" alt />
        </i>
        <i class="icon-screen-toggle d-frame-operation-full" @click="changeFullScreen($event)">
          <img :src="fullScreen?`${publicPath}images/desktop/header-icon/mini.png`:`${publicPath}images/desktop/header-icon/max.png`" alt="">
          <img
            :src="fullScreen?`${publicPath}images/desktop/header-icon/mini.png`:`${publicPath}images/desktop/header-icon/max.png`"
            alt
          />
        </i>
        <i class="icon-close d-frame-operation-close" @click="closeFrame($event)">
          
        </i>

        <i class="icon-close d-frame-operation-close" @click="closeFrame($event)"></i>
      </div>
      <slot name="d-frame-title-content">
        <div class="d-frame-title-content">
@@ -62,13 +62,6 @@
      }
    }
  },
  mounted() {
    window.addEventListener('message', e => {
      if (e.data && e.data.msg == "logout") {
        location.assign("/");
      }
    })
  },
  methods: {
    //resize
    mousedown(e) {
@@ -105,7 +98,7 @@
      debugger
      this.$store.commit('desktop/refreshFrame', this.data);
    },
    minFrame (data,e) {
    minFrame(data, e) {
      //找到当前的iframe
      let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.url) >= 0);
      //保存当前应用快照
@@ -156,16 +149,16 @@
          let toLeft = e.clientX - disx;
          let toTop = e.clientY - disy;
          //边界处理
          if(toLeft <= 0 ){
          if (toLeft <= 0) {
            toLeft = 0
          }else if(toLeft >= document.body.getBoundingClientRect().width-40){
            toLeft = document.body.getBoundingClientRect().width-40;
          } else if (toLeft >= document.body.getBoundingClientRect().width - 40) {
            toLeft = document.body.getBoundingClientRect().width - 40;
          }
          el.parentElement.style.left = toLeft + 'px';
          if(toTop <= 40 ){
          if (toTop <= 40) {
            toTop = 40
          }else if(toTop >= document.body.getBoundingClientRect().height-40){
            toTop = document.body.getBoundingClientRect().height-40;
          } else if (toTop >= document.body.getBoundingClientRect().height - 40) {
            toTop = document.body.getBoundingClientRect().height - 40;
          }
          el.parentElement.style.top = toTop + 'px';
        };
@@ -226,11 +219,10 @@
  border-top: 1px solid #d0d0d0;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;

}
.d-frame-title .icon-close{
.d-frame-title .icon-close {
  border-radius: 0 4px 0 0;
  background:url('/images/desktop/header-icon/close.png') no-repeat 50%;
  background: url("/images/desktop/header-icon/close.png") no-repeat 50%;
}
.d-frame-title-operation {
  position: absolute;
@@ -250,12 +242,12 @@
  cursor: pointer;
}

.d-frame-title-operation i:hover{
.d-frame-title-operation i:hover {
  background-color: #c7cacf;
}
.d-frame-title-operation .icon-close:hover{
.d-frame-title-operation .icon-close:hover {
  background-color: red;
  background-image: url('/images/desktop/header-icon/close-hover.png')
  background-image: url("/images/desktop/header-icon/close-hover.png");
}

/* .d-frame-title-operation:hover .d-frame-operation-close::before {

 src/pages/desktop/index/components/ToolsEntry.vue

@@ -12,7 +12,7 @@
            <div class="app-icon">

              <img :src="dock.src" :alt="dock.alt" />

            </div>

            <div class="app-name">{{dock.name}}</div>

            <div class="app-name">{{dock.title}}</div>

          </div>

        </div>

      </div>

@@ -28,16 +28,33 @@
      publicPath: process.env.BASE_URL,

    }

  },

  mounted() {

    window.addEventListener('message', e => {

      if (e.data && e.data.msg) {

        let msg = e.data.msg;

        // token 不合法, 退出

        if (msg === "logout") {

          location.assign("/");

          return;

        }



        // 打开检索, toSearch?showType=findByPic&targetId=108ba0bc-b0a1-433d-8e1e-d5d2e712b53b&picSmUrl=192.168.20.10:6700/47628,7cc869f3a9c714&compType=1

        if (msg.indexOf("toSearch") >= 0) {

          let params = msg.substring(7);

          this.addFrameByName("search", params)

        }

      }

    })

  },

  methods: {

    dockClick(dock) {

      debugger

      if (dock.type === '1') {

        window.open(dock.url);

      } else if (dock.type === '2' && !dock.isOpen) {

        this.$store.dispatch('desktop/addFrame', {

          id: dock.id,

          icon: dock.src,

          title: dock.name,

          title: dock.title,

          url: dock.url

        });

        debugger

@@ -63,6 +80,24 @@
      }

      dockMask.style.width = dockItems.length * 60 + 40 + 'px';

    },

    addFrameByName(name, params) {

      let dock = null;

      this.$store.state.desktop.docks.forEach(app => {

        if (app.name === name) {

          dock = app;

        }

      });



      if (dock.isOpen) {

        this.$store.dispatch('desktop/closeFrame', dock);

      }

      this.$store.dispatch('desktop/addFrame', {

        id: dock.id,

        icon: dock.src,

        title: dock.title,

        url: dock.url + "?" + params

      });

    }

  }

};

</script>


 src/pages/desktop/index/mock/userData.json

@@ -5,123 +5,131 @@
    "docks": [
      {
        "id": "5",
        "name": "gb28181",
        "src": "../../images/app-mid/GB-config.png",
        "alt": "GB28181配置",
        "type": "2",
        "url": "/view/gb28181",
        "name": "GB28181配置",
        "title": "GB28181配置",
        "width": 600,
        "height": 900
      },
      {
        "id": "12",
        "name": "cameraVideo",
        "src": "../../images/app-mid/monitor.png",
        "alt": "实时监控",
        "type": "2",
        "url": "/view/cameraVideo",
        "name": "实时监控",
        "title": "实时监控",
        "width": 1528,
        "height": 915
      },
      {
        "id": "9",
        "name": "algorithmManage",
        "src": "../../images/app-mid/algorithm-manage.png",
        "alt": "算法管理",
        "type": "2",
        "url": "/view/algorithmManage",
        "name": "算法管理",
        "title": "算法管理",
        "width": 1528,
        "height": 915
      },
      {
        "id": "1",
        "name": "cameraAccess",
        "src": "../../images/app-mid/camera-access.png",
        "alt": "camera-access",
        "type": "2",
        "url": "/view/cameraAccess",
        "name": "摄像机配置",
        "title": "摄像机配置",
        "width": 1876,
        "height": 900
      },
      {
        "id": "2",
        "name": "dataStack",
        "src": "../../images/app-mid/datastack-config.png",
        "alt": "datastack-config",
        "type": "2",
        "url": "/view/cameraAccess?dataStack=1",
        "name": "数据栈配置",
        "title": "数据栈配置",
        "width": 1876,
        "height": 750
      },
      
      {
        "id": "4",
        "name": "datapush",
        "src": "../../images/app-mid/data-push.png",
        "alt": "data-push",
        "type": "2",
        "url": "/view/datapush",
        "name": "数据推送"
        "title": "数据推送"
      },
      {
        "id": "7",
        "name": "library",
        "src": "../../images/app-mid/library.png",
        "alt": "比对库管理",
        "type": "2",
        "url": "/view/library",
        "name": "比对库管理",
        "title": "比对库管理",
        "width": 1542,
        "height": 800
      },
      
      {
        "id": "11",
        "name": "analysisPower",
        "src": "../../images/app-mid/hashrate-manage.png",
        "alt": "算力管理",
        "type": "2",
        "url": "/view/analysisPower",
        "name": "算力管理",
        "title": "算力管理",
        "width": 1720,
        "height": 800
      },
      {
        "id": "13",
        "name": "search",
        "src": "../../images/app-mid/search.png",
        "alt": "统计查询",
        "type": "2",
        "url": "/view/search",
        "name": "统计查询",
        "title": "统计查询",
        "width": 1663,
        "height": 890
      },
      
      {
        "id": "15",
        "name": "syslog",
        "src": "../../images/app-mid/log-manage.png",
        "alt": "日志管理",
        "type": "2",
        "url": "/view/syslog",
        "name": "日志管理",
        "title": "日志管理",
        "width": 1246,
        "height": 590
      },
      
      {
        "id": "17",
        "name": "settings",
        "src": "../../images/app-mid/settings.png",
        "alt": "系统设置",
        "type": "2",
        "url": "/view/settings",
        "name": "系统设置",
        "title": "系统设置",
        "width": 1450,
        "height": 808
      },
      {
        "id": "18",
        "name": "vindicate",
        "src": "../../images/app-mid/vindicate.png",
        "alt": "系统维护",
        "type": "2",
        "url": "/view/vindicate",
        "name": "系统维护"
        "title": "系统维护"
      }
    ]
  }

 src/pages/search/index/App.vue

@@ -39,7 +39,28 @@
        this.screenHeight = document.documentElement.clientHeight - 20;
      })();
    };

    this.parseUrl();
  },
  methods: {
    parseUrl() {
      if (this.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.compareTabs = ["esData"];
        this.VideoPhotoData.findPerson2(); // 查找此人
      }
    },
    getUrlKey(name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
  }
};
</script>


 src/pages/search/index/Searching.vue

@@ -301,17 +301,7 @@

    // 暂时关闭跳转 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(); // 查找此人
    if (this.VideoPhotoData.uploadDiaplay) {
      // this.$nextTick(() => {
      //   this.$refs.uploadImg.rightSectionDisplay = true;
      // });