<template>
  <div class="container">
    <InsectDetectionCanvas 
      :imagePath="apiData.imagePath" 
      :resultList="apiData.resultList" 
    />
  </div>
</template>

<script>
import InsectDetectionCanvas from './InsectDetectionCanvas.vue';
import axios from "axios";
export default {
  components: {
    InsectDetectionCanvas
  },
  data() {
    return {
      apiData: {
        // 这里放你的API返回数据
        "imagePath": "",
        "resultList": [
          
        ]
      }
    }
  },
  created() {
     this.apiData.imagePath=this.$route.query.url ? this.$route.query.url : ''
    this.id = this.$route.query.id ? this.$route.query.id : 613;
    this.fetchData();
  },
  methods: {
    fetchData() {
         var data = {
        imageId: this.id,
      };
        this.api.getDeviceImagesDetailById(data).then((res) => {
          if (res.data.code == 200) {
           this.apiData.resultList=res.data.data.list[0]
          }
        });
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
</style>