|
|
@@ -1,211 +1,238 @@
|
|
|
<template>
|
|
|
- <view style="background-color: #f7f7f7;padding-top: 88rpx;height: calc(100vh - 88rpx);">
|
|
|
-
|
|
|
+ <view style="
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ padding-top: 88rpx;
|
|
|
+ height: calc(100vh - 88rpx);
|
|
|
+ ">
|
|
|
<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="识别结果" backgroundColor="#F7F7F7"></uni-nav-bar>
|
|
|
<u-calendar v-model="calendarShow" mode="range" @change="change" @maxDate="maxDate"></u-calendar>
|
|
|
<view class="img-result">
|
|
|
<view class="tile-item">
|
|
|
-
|
|
|
- <view @click="calendarShow = true" class="calendar">{{start_time}} <span style="margin: 0 40rpx;"> -</span> {{end_time}}</view>
|
|
|
-
|
|
|
+ <view @click="calendarShow = true" class="calendar">{{ start_time }} <span style="margin: 0 40rpx">
|
|
|
+ -</span>
|
|
|
+ {{ end_time }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="images_box">
|
|
|
-
|
|
|
- <view class="canvas-bg">
|
|
|
- <img v-if="photos.length>0" :src="photos[active].addr+'?x-oss-process=image/resize,w_130/quality,q_90'" alt="" @click="examine()"/>
|
|
|
- </view>
|
|
|
- <view class="image-flex" >
|
|
|
- <view v-for="(item,index) in photos" :key="index">
|
|
|
- <image class="my-img" :class="active==index?'active':''" :src="item.addr" @click="imgClick(item,index)" mode=""></image>
|
|
|
+ <view class="images_box">
|
|
|
+ <view class="canvas-bg">
|
|
|
+ <!-- <canvas-mark /> -->
|
|
|
+ <img v-if="photos.length>0"
|
|
|
+ :src="photos[active].addr+'?x-oss-process=image/resize,w_130/quality,q_90'" alt=""
|
|
|
+ @click="examine()" />
|
|
|
+ </view>
|
|
|
+ <view class="image-flex">
|
|
|
+ <view v-for="(item, index) in photos" :key="index">
|
|
|
+ <image class="my-img" :class="active == index ? 'active' : ''" :src="item.addr"
|
|
|
+ @click="imgClick(item, index)" mode=""></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="information">
|
|
|
- <view class="btn">
|
|
|
- <p class="title">当前图片识别结果</p>
|
|
|
- <u-button size="mini" :loading='respetLoading' class="btn_box" throttle-time="500" @click="resetPest" :customStyle="customStyle">重新识别</u-button>
|
|
|
- </view>
|
|
|
- <view class="notip" v-if="isObject(pestResult)">
|
|
|
- 暂无识别结果
|
|
|
- </view>
|
|
|
- <view v-else class="information_data" v-for="(value,key) in pestResult">
|
|
|
- <p> <span>{{key}}</span> <span>{{value}}头</span> </p>
|
|
|
+ <view class="information">
|
|
|
+ <view class="btn">
|
|
|
+ <p class="title">当前图片识别结果</p>
|
|
|
+ <u-button size="mini" :loading="respetLoading" class="btn_box" throttle-time="500"
|
|
|
+ @click="resetPest" :customStyle="customStyle">重新识别</u-button>
|
|
|
+ </view>
|
|
|
+ <view class="notip" v-if="isObject(pestResult)"> 暂无识别结果 </view>
|
|
|
+ <view v-else class="information_data" v-for="(value, key) in pestResult">
|
|
|
+ <p>
|
|
|
+ <span>{{ key }}</span> <span>{{ value }}头</span>
|
|
|
+ </p>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
|
|
|
- import insect_dict from "../../../../static/data/cbd_pest_library.js"
|
|
|
+ // import insect_dict from '../../../../static/data/cbd_pest_library.js';
|
|
|
+ import canvasMark from '@/components/Draw/index.vue';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- maxDate:'2050-12-31',
|
|
|
- device_type:'',
|
|
|
- device_id:'',
|
|
|
- d_id:'',
|
|
|
- calendarShow:false,
|
|
|
- start_time:'',
|
|
|
- end_time:'',
|
|
|
- photos:[],
|
|
|
-
|
|
|
- active:0,
|
|
|
- respetLoading:false
|
|
|
- }
|
|
|
+ maxDate: '2050-12-31',
|
|
|
+ device_type: '',
|
|
|
+ device_id: '',
|
|
|
+ d_id: '',
|
|
|
+ calendarShow: false,
|
|
|
+ start_time: '',
|
|
|
+ end_time: '',
|
|
|
+ photos: [],
|
|
|
+
|
|
|
+ active: 0,
|
|
|
+ respetLoading: false,
|
|
|
+ typeName: 1, // 1: 测报灯 2:病虫害可视监测 3:吸虫塔 4:孢子仪 5:毫米虫情测报 6:智慧虫情测报平台(定制)
|
|
|
+ insect_dict: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ canvasMark
|
|
|
},
|
|
|
- computed:{
|
|
|
- customStyle(){
|
|
|
+ computed: {
|
|
|
+ customStyle() {
|
|
|
return {
|
|
|
background: '#018B3F',
|
|
|
- fontSize:'12px',
|
|
|
- border:'none',
|
|
|
- color:'#fff'
|
|
|
- }
|
|
|
+ fontSize: '12px',
|
|
|
+ border: 'none',
|
|
|
+ color: '#fff',
|
|
|
+ };
|
|
|
},
|
|
|
- pestResult(){
|
|
|
- if(this.photos==0){
|
|
|
- return {}
|
|
|
+ pestResult() {
|
|
|
+ if (this.photos == 0) {
|
|
|
+ return {};
|
|
|
}
|
|
|
- let obj = {}
|
|
|
- let item = this.photos[this.active]
|
|
|
- console.log('选中',item)
|
|
|
- if(item.is_mark==0){
|
|
|
+ let obj = {};
|
|
|
+ let item = this.photos[this.active];
|
|
|
+
|
|
|
+ if (item.is_mark == 0) {
|
|
|
// 机器识别
|
|
|
- let aiLabel = []
|
|
|
+ let aiLabel = [];
|
|
|
if (item.label) {
|
|
|
- aiLabel = JSON.parse(item.label.replace(/'/g, '"'))
|
|
|
- aiLabel.forEach(label => {
|
|
|
- const text = Object.keys(label)[0]
|
|
|
- if (obj[insect_dict[text]]) {
|
|
|
- obj[insect_dict[text]]++
|
|
|
+ aiLabel = JSON.parse(item.label.replace(/'/g, '"'));
|
|
|
+ console.log(this.insect_dict,'---')
|
|
|
+ aiLabel.forEach((label) => {
|
|
|
+ const text = Object.keys(label)[0];
|
|
|
+ if (obj[this.insect_dict[text]]) {
|
|
|
+ obj[this.insect_dict[text]]++;
|
|
|
} else {
|
|
|
- obj[insect_dict[text]] = 1
|
|
|
- }
|
|
|
- })
|
|
|
+ obj[this.insect_dict[text]] = 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- }else{
|
|
|
- item.mark.forEach(item => {
|
|
|
- if (obj[item.text]) {
|
|
|
- obj[item.text]++
|
|
|
- } else {
|
|
|
- obj[item.text] = 1
|
|
|
- }
|
|
|
- })
|
|
|
+ } else {
|
|
|
+ item.mark.forEach((item) => {
|
|
|
+ if (obj[item.text]) {
|
|
|
+ obj[item.text]++;
|
|
|
+ } else {
|
|
|
+ obj[item.text] = 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- return obj
|
|
|
+ return obj;
|
|
|
},
|
|
|
- previewImages(){
|
|
|
- let list = []
|
|
|
- if(this.photos.length>0){
|
|
|
- this.photos.forEach(photo=>{
|
|
|
- list.push(photo.addr)
|
|
|
- })
|
|
|
- return list
|
|
|
- }else{
|
|
|
- return []
|
|
|
+ previewImages() {
|
|
|
+ let list = [];
|
|
|
+ if (this.photos.length > 0) {
|
|
|
+ this.photos.forEach((photo) => {
|
|
|
+ list.push(photo.addr);
|
|
|
+ });
|
|
|
+ return list;
|
|
|
+ } else {
|
|
|
+ return [];
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
clickLeft() {
|
|
|
- uni.navigateBack()
|
|
|
+ uni.navigateBack();
|
|
|
},
|
|
|
- isObject(obj){
|
|
|
- return Object.keys(obj).length==0
|
|
|
+ isObject(obj) {
|
|
|
+ return Object.keys(obj).length == 0;
|
|
|
},
|
|
|
- change(e){
|
|
|
- this.start_time = e.startDate
|
|
|
- this.end_time = e.endDate
|
|
|
- this.page = 1
|
|
|
- this.photos = []
|
|
|
- this.getImgData()
|
|
|
+ change(e) {
|
|
|
+ this.start_time = e.startDate;
|
|
|
+ this.end_time = e.endDate;
|
|
|
+ this.page = 1;
|
|
|
+ this.photos = [];
|
|
|
+ this.getImgData();
|
|
|
},
|
|
|
- async getImgData(){
|
|
|
+ async getImgData() {
|
|
|
const res = await this.$myRequest({
|
|
|
url: '/api/api_gateway?method=new_gateway.photo_info.photo_list',
|
|
|
data: {
|
|
|
id: this.d_id,
|
|
|
- device_type_id:this.device_type,
|
|
|
+ device_type_id: this.device_type,
|
|
|
page: 1,
|
|
|
page_number: 99999,
|
|
|
- start: +new Date(this.start_time+' 00:00:00') / 1000,
|
|
|
- end: +new Date(this.end_time+' 23:59:59') / 1000
|
|
|
- }
|
|
|
- })
|
|
|
- this.photos = this.photos.concat(res.data)
|
|
|
- console.log(this.photos,'---')
|
|
|
+ start: +new Date(this.start_time + ' 00:00:00') / 1000,
|
|
|
+ end: +new Date(this.end_time + ' 23:59:59') / 1000,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.photos = this.photos.concat(res.data);
|
|
|
+ console.log(this.photos, '---');
|
|
|
// this.photos = res.data
|
|
|
},
|
|
|
- async resetPest(){
|
|
|
- this.respetLoading = true
|
|
|
+ async resetPest() {
|
|
|
+ this.respetLoading = true;
|
|
|
const res = await this.$myRequest({
|
|
|
url: '/api/api_gateway?method=new_gateway.photo_info.identify_again',
|
|
|
data: {
|
|
|
id: this.photos[this.active].id,
|
|
|
- device_type_id:this.device_type
|
|
|
- }
|
|
|
- })
|
|
|
- this.respetLoading = false
|
|
|
- if(res.code==2000){
|
|
|
+ device_type_id: this.device_type,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.respetLoading = false;
|
|
|
+ if (res.code == 2000) {
|
|
|
uni.showToast({
|
|
|
title: '操作成功',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
- }else{
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
uni.showToast({
|
|
|
title: res.msg,
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
examine() {
|
|
|
uni.previewImage({
|
|
|
- urls: this.previewImages
|
|
|
+ urls: this.previewImages,
|
|
|
});
|
|
|
},
|
|
|
- imgClick(item,index){
|
|
|
- this.active = index
|
|
|
+ imgClick(item, index) {
|
|
|
+ this.active = index;
|
|
|
+ },
|
|
|
+ async getAllPestList() {
|
|
|
+ const res = await this.$myRequest({
|
|
|
+
|
|
|
+ url: '/api/api_gateway?method=forecast.pest_info.pest_dict',
|
|
|
+ data:{type_name: this.typeName}
|
|
|
+ })
|
|
|
+
|
|
|
+ this.insect_dict = res
|
|
|
+ this.getImgData();
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
- console.log('结果页面:',option)
|
|
|
- this.device_id = option.device_id
|
|
|
- this.d_id = option.d_id
|
|
|
- this.device_type = option.device_type
|
|
|
- let endTime = +new Date(option.time)/1000 + 60 * 60 * 24
|
|
|
- let startTime = +new Date(option.time)/1000
|
|
|
-
|
|
|
- this.end_time = this.formatTime(endTime*1000,'yyyy-MM-dd')
|
|
|
- this.start_time = this.formatTime(startTime*1000,'yyyy-MM-dd')
|
|
|
- this.getImgData()
|
|
|
- }
|
|
|
- }
|
|
|
+ console.log('结果页面:', option);
|
|
|
+ this.device_id = option.device_id;
|
|
|
+ this.d_id = option.d_id;
|
|
|
+ this.device_type = option.device_type;
|
|
|
+ let endTime = +new Date(option.time) / 1000 + 60 * 60 * 24;
|
|
|
+ let startTime = +new Date(option.time) / 1000;
|
|
|
+
|
|
|
+ this.end_time = this.formatTime(endTime * 1000, 'yyyy-MM-dd');
|
|
|
+ this.start_time = this.formatTime(startTime * 1000, 'yyyy-MM-dd');
|
|
|
+ this.getAllPestList()
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- /deep/.u-calendar__action {
|
|
|
+ ::v-deep .u-calendar__action {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
-
|
|
|
+
|
|
|
.u-calendar__action__text {
|
|
|
line-height: 25px;
|
|
|
}
|
|
|
}
|
|
|
- page{
|
|
|
- background: #F7F7F7;
|
|
|
+
|
|
|
+ page {
|
|
|
+ background: #f7f7f7;
|
|
|
}
|
|
|
- .img-result{
|
|
|
+
|
|
|
+ .img-result {
|
|
|
padding: 0rpx 48rpx;
|
|
|
- background-color: #F7F7F7;
|
|
|
+ background-color: #f7f7f7;
|
|
|
// height: calc(100vh - 120rpx);
|
|
|
}
|
|
|
- .tile-item{
|
|
|
+
|
|
|
+ .tile-item {
|
|
|
margin-top: 32rpx;
|
|
|
// padding: 0rpx 32rpx;
|
|
|
box-sizing: border-box;
|
|
|
@@ -213,19 +240,20 @@
|
|
|
line-height: 92rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- background: #F7F7F7;
|
|
|
- .calendar{
|
|
|
+ background: #f7f7f7;
|
|
|
+
|
|
|
+ .calendar {
|
|
|
width: 100%;
|
|
|
background-color: #fff;
|
|
|
border-radius: 24rpx;
|
|
|
padding: 0 18rpx;
|
|
|
- color: #5C5C5C;
|
|
|
+ color: #5c5c5c;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .camera{
|
|
|
-
|
|
|
- }
|
|
|
+
|
|
|
+ .camera {}
|
|
|
}
|
|
|
+
|
|
|
.images_box {
|
|
|
width: 100%;
|
|
|
height: 742rpx;
|
|
|
@@ -234,15 +262,18 @@
|
|
|
box-sizing: border-box;
|
|
|
background: #fff;
|
|
|
border-radius: 24rpx;
|
|
|
- .canvas-bg{
|
|
|
+
|
|
|
+ .canvas-bg {
|
|
|
height: 558rpx;
|
|
|
position: relative;
|
|
|
margin-bottom: 16rpx;
|
|
|
- img{
|
|
|
+
|
|
|
+ img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.image-flex {
|
|
|
width: 100%;
|
|
|
overflow-x: scroll;
|
|
|
@@ -251,13 +282,15 @@
|
|
|
gap: 20rpx;
|
|
|
padding: 10rpx 0;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
.my-img {
|
|
|
width: 96rpx;
|
|
|
height: 96rpx;
|
|
|
border-radius: 4rpx;
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
- .active{
|
|
|
+
|
|
|
+ .active {
|
|
|
border: 4px solid #ccc;
|
|
|
animation: borderAnimation 1s;
|
|
|
position: relative;
|
|
|
@@ -269,19 +302,23 @@
|
|
|
|
|
|
.information {
|
|
|
padding-bottom: 2rpx;
|
|
|
- .btn{
|
|
|
+
|
|
|
+ .btn {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.title {
|
|
|
float: left;
|
|
|
color: #999999;
|
|
|
}
|
|
|
- .notip{
|
|
|
+
|
|
|
+ .notip {
|
|
|
text-align: center;
|
|
|
color: #999999;
|
|
|
margin-top: 100rpx;
|
|
|
}
|
|
|
- .btn_box{
|
|
|
+
|
|
|
+ .btn_box {
|
|
|
float: right;
|
|
|
// border-radius: 8rpx;
|
|
|
// background: #018B3F;
|
|
|
@@ -289,6 +326,7 @@
|
|
|
// color: #fff;
|
|
|
// font-size: 24rpx;
|
|
|
}
|
|
|
+
|
|
|
.information_data {
|
|
|
margin: 32rpx 0;
|
|
|
display: flex;
|
|
|
@@ -298,21 +336,22 @@
|
|
|
line-height: 104rpx;
|
|
|
border-radius: 24rpx;
|
|
|
padding: 0 32rpx;
|
|
|
+
|
|
|
p {
|
|
|
// margin-right: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #666666;
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
@keyframes borderAnimation {
|
|
|
- 0% {
|
|
|
- opacity: 0.5;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ 0% {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|