一个select下拉框,点击不同的选项向后端请求相应机位的图片。

1.首先在下拉框的@change=*********中添加向后端获取请求的接口

function getOtherImage(camera) {
  axios
    .get('/image/other-image', {
     //自带了机位信息、图片名称、数据集Id
      params: {
        camera: camera,
        imageName: view.imageInfo.name,
        datasetId: store.transmit.enterAnnotation.datasetId
      }
    })
    .then((res) => {
     //请求 id,url,camera,deviceId等
      view.imageInfo.id=res.data.id,
      view.imageInfo.url=res.data.url,
      view.imageInfo.camera=res.data.camera,
      view.imageInfo.deviceId=res.data.deviceId
    })
    .catch((err) => {
      console.log(err)
    })
}

想要向后端请求一个数据,需要写一个js后端接口向数据库请求数据,本次请求的图片信息与之前请求数量等不太一样,因为真实的图片数据在250服务器,但是我们是向245请求的资源,245相当于一个转存功能 它是将250请求的图片静态放到245本地的,所以本次增加了一个245服务器转存的接口。整个流程:    前端-->245-->250 然后250-->245-->前端

中转功能的245服务器:添加一个软连接

在****************image.js中******************

// 请求其他机位图片
router.get('/other-image', function (req, res, next) {
//这是向250服务器请求数据,真实的接口/dataset/other-image'在这里
  request(
    {
      url: 'http://192.168.2.250:4001/dataset/other-image',
      method: 'get',
      json: true,
      headers: {
        Accept: 'application/json, text/plain, */*',
        'content-type': 'application/json',
        token: req.headers.token,
        groupid: req.headers.groupid,
        userid: req.headers.userid
      },
      qs: req.query
    },
    function (error, response, body) {
//这些是从250服务器返回过来的数据,如果中转这里没问题,前端是可以接收到数据的
    console.log('body', body)//不确定哪里出了问题查看
      if (error === null) {
        execSync(
          'ln -fs "' + body.path + '/' + body.imageName + '" "' + cache.systemPath + '/public/linkImage/' + body.imageName + '"'
        )
        body['url'] = 'http://iseeserver:6508/linkImage/' + body.imageName

        res.send(body)
      } else {
        res.send({ error: error })
        log(error)
      }
    }
  )
})

真实的250服务器:添加了一个/other-image的一个请求其他机位图片的接口

***************dataset.js中***************

// 请求数据集中其他机位的图片
router.get('/other-image', async (req, res) => {
  console.log('可以响应到啦!', req.query)
  // let cameraIfo = await dbMysql.select(req.body.groupId, 'dataset_' + req.query.datasetId, { camera: req.query.camera }, null, null)
  if (req.query.imageName) {
    let imageCount = req.query.imageName.split('-')[3].split('.')[0]
    let cameraInfo = await dbMysql.sql(
      req.body.groupId,
      'select * from dataset_' +
        req.query.datasetId +
        ' where camera = "' +
        req.query.camera +
        '" and imageName like "%-' +
        imageCount +
        '.%"'
    )
    let maxImageObj = cameraInfo[0]; // 默认最大的对象为第一个
    for (let i = 1; i < cameraInfo.length; i++) {
      let imageName = cameraInfo[i].imageName;
      let currentImageCount = imageName.split('-')[1];
      if (parseInt(currentImageCount) > parseInt(maxImageObj.imageName.split('-')[1])) {
        maxImageObj = cameraInfo[i]; //保留最大的也就是最近的
      }
    }
    res.send(maxImageObj)
    console.log('maxImageObj', maxImageObj)
  }
})

验证250服务器上的接口有没有回应或者查看console.log打印的东西,可以连接到服务器

1.pm2 ls     //列出所有进程
2.pm2 restart 0  //重新启用相应的进程
3.pm2 log 0  //显示指定进程的日志信息

通过以上命令查看。我个人最大的毛病就是健忘+思路不清晰 要请求什么样的数据

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐