|
|
@@ -30,6 +30,19 @@
|
|
|
<u-icon name="calendar" class="calendar"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="fileList-preview">
|
|
|
+ <view class="fileList-scroll">
|
|
|
+ <view
|
|
|
+ class="file-item"
|
|
|
+ v-for="(item, index) in fileList"
|
|
|
+ :key="index"
|
|
|
+ :class="{ fileActive: fileIndex == index }"
|
|
|
+ @click="selectFile(index)"
|
|
|
+ >
|
|
|
+ {{ item.event_id }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 主图片区域 -->
|
|
|
<view class="main-photo" v-if="currentImg.addr">
|
|
|
<movable-area class="movable-area" :style="{ height: containerHeight }">
|
|
|
@@ -43,11 +56,26 @@
|
|
|
<view class="image-container">
|
|
|
<!-- 原图 -->
|
|
|
<image
|
|
|
+ v-if="is_jpg == 1"
|
|
|
:src="currentImg.addr"
|
|
|
class="main-photo-image"
|
|
|
mode="widthFix"
|
|
|
@load="onImageLoad"
|
|
|
/>
|
|
|
+ <!-- 视频 -->
|
|
|
+ <video
|
|
|
+ v-if="is_jpg == 0"
|
|
|
+ :src="currentImg.addr"
|
|
|
+ class="main-photo-image"
|
|
|
+ mode="widthFix"
|
|
|
+ @load="onImageLoad"
|
|
|
+ controls
|
|
|
+ />
|
|
|
+
|
|
|
+ <view class="tags-swiper">
|
|
|
+ <image :src="is_jpg == 1 ? imageActiveIcon : imageIcon" class="tag-icon" @click="changeVideo(1)"/>
|
|
|
+ <image :src="is_jpg == 0 ? videoActiveIcon : videoIcon" class="tag-icon" @click="changeVideo(2)"/>
|
|
|
+ </view>
|
|
|
<!-- 虫子标记层 -->
|
|
|
<view class="bug-markers" v-if="bugMarkers.length > 0">
|
|
|
<view
|
|
|
@@ -80,13 +108,22 @@
|
|
|
class="thumbnail-item"
|
|
|
v-for="(item, index) in thumbnails"
|
|
|
:key="index"
|
|
|
- :class="{ active: img_id == item.ids }"
|
|
|
+ :class="{ active: img_id == item.id }"
|
|
|
@click="selectThumbnail(item)"
|
|
|
>
|
|
|
<image
|
|
|
+ v-if="is_jpg == 1"
|
|
|
:src="item.addr"
|
|
|
class="thumbnail-image"
|
|
|
/>
|
|
|
+ <!-- 视频 -->
|
|
|
+ <video
|
|
|
+ v-if="is_jpg == 0"
|
|
|
+ :src="item.addr"
|
|
|
+ class="thumbnail-image"
|
|
|
+ mode="widthFix"
|
|
|
+ controls
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -97,16 +134,16 @@
|
|
|
<!-- 一类害虫 -->
|
|
|
<view>
|
|
|
<view class="pest-category" v-for="(pest,index) in pestList" :key="index">
|
|
|
- <view class="category-header">
|
|
|
+ <!-- <view class="category-header">
|
|
|
<text class="category-title">{{ pest[0] }}</text>
|
|
|
<text class="category-count">数量</text>
|
|
|
- </view>
|
|
|
- <view class="pest-item" v-for="(p, i) in pest[1]" :key="i">
|
|
|
+ </view> -->
|
|
|
+ <view class="pest-item">
|
|
|
<view class="pest-info">
|
|
|
- <view class="pest-color" :style="{ backgroundColor: getPestColor(p.pest_name) }"></view>
|
|
|
- <text class="pest-name">{{ p.pest_name }}</text>
|
|
|
+ <view class="pest-color" :style="{ backgroundColor: getPestColor(pest.pest_name) }"></view>
|
|
|
+ <text class="pest-name">{{ pest.pest_name }}</text>
|
|
|
</view>
|
|
|
- <text class="pest-count">{{ p.pest_num }}</text>
|
|
|
+ <text class="pest-count">{{ pest.pest_num }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -150,7 +187,14 @@ export default {
|
|
|
selectorRange: [],
|
|
|
title: '查看图片',
|
|
|
currentThumbnail: 2,
|
|
|
+ videoActiveIcon: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/svg/videoIconActive.svg',
|
|
|
+ imageActiveIcon: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/svg/imageIconActive.svg',
|
|
|
+ imageIcon: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/svg/imageIcon.svg',
|
|
|
+ videoIcon: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/svg/videoIcon.svg',
|
|
|
pestYype:{},
|
|
|
+ fileList:[],
|
|
|
+ fileTotle:0,
|
|
|
+ fileIndex:0,
|
|
|
is_mark:0,
|
|
|
device_id: '',
|
|
|
time_begin: this.formatTime(new Date(new Date().getFullYear(), 0, 1)),
|
|
|
@@ -171,6 +215,9 @@ export default {
|
|
|
'#FA73F5'
|
|
|
],
|
|
|
currentYear:'',
|
|
|
+ event_id:'',
|
|
|
+ event_page:1,
|
|
|
+ event_page_size:100,
|
|
|
pest_list_arr:[],
|
|
|
thumbnails: [],
|
|
|
addtime:'',
|
|
|
@@ -178,6 +225,8 @@ export default {
|
|
|
bugMarkers: [],
|
|
|
imageWidth: 0,
|
|
|
imageHeight: 0,
|
|
|
+ camera_id:'',
|
|
|
+ is_jpg:1,
|
|
|
imgOld_id:'',
|
|
|
containerHeight: '300px',
|
|
|
pestDict: {}, // 虫子字典 {id: name}
|
|
|
@@ -193,6 +242,8 @@ export default {
|
|
|
this.time_begin = this.addtime;
|
|
|
this.defaultDate = this.addtime;
|
|
|
this.time_end = this.addtime;
|
|
|
+ this.camera_id = '';
|
|
|
+ this.is_jpg = 1;
|
|
|
this.selectorRange = [];
|
|
|
const nowYear = new Date().getFullYear();
|
|
|
for(let i = 0;i<50;i++){
|
|
|
@@ -203,12 +254,25 @@ export default {
|
|
|
this.selectorRange.push(item);
|
|
|
}
|
|
|
this.pestList = [];
|
|
|
+ await this.getEventList();
|
|
|
await this.getPestDict();
|
|
|
await this.getPestLevelMap();
|
|
|
await this.getPestList();
|
|
|
// this.getDevicePhotoDetails();
|
|
|
},
|
|
|
methods: {
|
|
|
+ selectFile(index){
|
|
|
+ this.fileIndex = index;
|
|
|
+ const file = this.fileList[index];
|
|
|
+ this.event_id = file.event_id;
|
|
|
+ this.camera_id = file.device_id;
|
|
|
+ this.thumbnails = [];
|
|
|
+ this.getPestList();
|
|
|
+ },
|
|
|
+ changeVideo(type){
|
|
|
+ this.is_jpg = type == 1 ? 1 : 0;
|
|
|
+ this.getPestList();
|
|
|
+ },
|
|
|
getPestName(id){
|
|
|
if(this.is_mark == 0){
|
|
|
return this.pestDict[id] || id;
|
|
|
@@ -276,35 +340,43 @@ export default {
|
|
|
};
|
|
|
return levelMap[String(level)] || `${level}`;
|
|
|
},
|
|
|
+ async getEventList(){
|
|
|
+ const res = await this.$myRequest({
|
|
|
+ url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_event_list',
|
|
|
+ method: 'POST',
|
|
|
+ data: {
|
|
|
+ page:this.event_page,
|
|
|
+ page_size:this.event_page_size,
|
|
|
+ device_id: this.device_id,
|
|
|
+ time_begin: new Date(this.time_begin + ' 00:00:00').getTime()/1000,//换成秒级时间戳
|
|
|
+ time_end: new Date(this.time_end + ' 23:59:59').getTime()/1000,//换成秒级时间戳
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const resList = res?.data || [];
|
|
|
+ this.fileList = resList;
|
|
|
+ this.fileTotle = res?.total || 0;
|
|
|
+ console.log(resList,'resresresres')
|
|
|
+ },
|
|
|
async getPestList() {
|
|
|
const res = await this.$myRequest({
|
|
|
- url: '/api/api_gateway?method=forecast.new_cbd.photo_list',
|
|
|
+ url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_photo_list',
|
|
|
method: 'POST',
|
|
|
data: {
|
|
|
- identify_model:'B',
|
|
|
- cmd:'cbd',
|
|
|
+ camera_id: this.camera_id,
|
|
|
+ is_jpg:this.is_jpg,
|
|
|
page:1,
|
|
|
+ event_id: this.event_id,
|
|
|
page_size:500,
|
|
|
- time_begin: this.time_begin + ' 00:00:00',
|
|
|
- time_end: this.time_end + ' 23:59:59',
|
|
|
- identify_model:'B',
|
|
|
+ time_begin: new Date(this.time_begin + ' 00:00:00').getTime()/1000,
|
|
|
+ time_end: new Date(this.time_end + ' 23:59:59').getTime()/1000,
|
|
|
device_id: this.device_id,
|
|
|
},
|
|
|
});
|
|
|
this.thumbnails = res?.data || [];
|
|
|
this.currentImg = {};
|
|
|
//如果和旧的id相同，就用旧的id不然就用第一个
|
|
|
- if(this.thumbnails.find(item => item.ids == this.imgOld_id)){
|
|
|
- this.img_id = this.imgOld_id
|
|
|
- }else{
|
|
|
- this.img_id = this.thumbnails[0].ids
|
|
|
- }
|
|
|
+ this.img_id = this.thumbnails[0]?.id
|
|
|
this.getDevicePhotoDetails();
|
|
|
- // if(this.img_id){
|
|
|
- // this.currentImg = this.thumbnails.find(item => item.ids == this.img_id) || this.thumbnails[0] || {}
|
|
|
- // }else{
|
|
|
- // this.currentImg = this.thumbnails[0] || {}
|
|
|
- // }
|
|
|
},
|
|
|
formatTime(dateString) {
|
|
|
const date = new Date(dateString);
|
|
|
@@ -352,51 +424,69 @@ export default {
|
|
|
},
|
|
|
async getDevicePhotoDetails() {
|
|
|
const res = await this.$myRequest({
|
|
|
- url: '/api/api_gateway?method=forecast.forecast_system.device_photo_details',
|
|
|
+ url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_photo_details',
|
|
|
method: 'POST',
|
|
|
data: {
|
|
|
- identify_model:'B',
|
|
|
- cmd:'cbd',
|
|
|
img_id: this.img_id,
|
|
|
},
|
|
|
});
|
|
|
- this.currentImg = res;
|
|
|
+ this.currentImg = res?.photo || {};
|
|
|
// 处理label参数生成bugMarkers
|
|
|
this.processBugMarkers();
|
|
|
- const pest_list = res.pest_list
|
|
|
+ // const pest_list = res.pest_list
|
|
|
const pestArr = new Map()
|
|
|
- const pesAlltList = []
|
|
|
- for(let key in this.pestYype){
|
|
|
- for(let j in this.pestYype[key]){
|
|
|
- const pestName = this.pestYype[key][j]
|
|
|
- pesAlltList.push(pestName)
|
|
|
- pest_list.forEach(item => {
|
|
|
- if(item.pest_name == pestName){
|
|
|
- if(pestArr.has(key)){
|
|
|
- pestArr.get(key).push(item)
|
|
|
- }else{
|
|
|
- pestArr.set(key, [item])
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- pest_list.forEach(item => {
|
|
|
- if(!pesAlltList.includes(item.pest_name)){
|
|
|
- if(pestArr.has('其他害虫')){
|
|
|
- pestArr.get('其他害虫').push(item)
|
|
|
- }else{
|
|
|
- pestArr.set('其他害虫', [item])
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ // const pesAlltList = []
|
|
|
+ // for(let key in this.pestYype){
|
|
|
+ // for(let j in this.pestYype[key]){
|
|
|
+ // const pestName = this.pestYype[key][j]
|
|
|
+ // pesAlltList?.push(pestName)
|
|
|
+ // pest_list?.forEach(item => {
|
|
|
+ // if(item.pest_name == pestName){
|
|
|
+ // if(pestArr.has(key)){
|
|
|
+ // pestArr.get(key).push(item)
|
|
|
+ // }else{
|
|
|
+ // pestArr.set(key, [item])
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // pest_list?.forEach(item => {
|
|
|
+ // if(!pesAlltList.includes(item.pest_name)){
|
|
|
+ // if(pestArr.has('其他害虫')){
|
|
|
+ // pestArr.get('其他害虫').push(item)
|
|
|
+ // }else{
|
|
|
+ // pestArr.set('其他害虫', [item])
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
const pestList = []
|
|
|
- for(let key of pestArr){
|
|
|
- pestList.push(key)
|
|
|
- }
|
|
|
+ // for(let key of pestArr){
|
|
|
+ // pestList.push(key)
|
|
|
+ // }
|
|
|
+ console.log(this.currentImg,'currentImgimgigmi')
|
|
|
if (this.currentImg.is_mark != 0) {
|
|
|
this.processBugMarkers();
|
|
|
+ for(let i = 0;i< this.currentImg.mark.length;i++){
|
|
|
+ console.log(this.currentImg.mark[i],'markmarkmarkmark')
|
|
|
+ const key = this.currentImg.mark[i].text
|
|
|
+ if(pestArr.has(key)){
|
|
|
+ pestArr.get(key).pest_num++
|
|
|
+ pestArr.set(key, pestArr.get(key))
|
|
|
+ }else{
|
|
|
+ pestArr.set(key, {
|
|
|
+ pest_num: 1,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for(let key of pestArr){
|
|
|
+ pestList.push({
|
|
|
+ pest_name: key[0],
|
|
|
+ pest_num: key[1].pest_num,
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
+ console.log(pestList,'pestListpestList')
|
|
|
this.pestList = pestList
|
|
|
},
|
|
|
onImageLoad(e) {
|
|
|
@@ -482,7 +572,7 @@ export default {
|
|
|
// this.pestList = [];
|
|
|
const markers = [];
|
|
|
// 根据原图宽度计算缩放比例
|
|
|
- let scaleRatio = 3.1;
|
|
|
+ let scaleRatio = 2.4;
|
|
|
// if (this.imageWidth >= 5000) {
|
|
|
// scaleRatio = 4;
|
|
|
// } else if (this.imageWidth >= 4000) {
|
|
|
@@ -491,7 +581,7 @@ export default {
|
|
|
// scaleRatio = 2.5;
|
|
|
// }
|
|
|
// const pestArr = new Map()
|
|
|
- this.currentImg.mark.map((item, index) => {
|
|
|
+ this.currentImg?.mark?.map((item, index) => {
|
|
|
// if(pestArr.has(item.text)){
|
|
|
// pestArr.set(item.text,{
|
|
|
// value: pestArr.get(item.text).value+=1,
|
|
|
@@ -541,7 +631,7 @@ export default {
|
|
|
uni.navigateBack();
|
|
|
},
|
|
|
selectThumbnail(item) {
|
|
|
- this.img_id = item.ids;
|
|
|
+ this.img_id = item.id;
|
|
|
this.getDevicePhotoDetails();
|
|
|
}
|
|
|
}
|
|
|
@@ -707,7 +797,20 @@ export default {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
}
|
|
|
-
|
|
|
+ .tags-swiper{
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index:10000;
|
|
|
+ top:10rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ .tag-icon{
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
.main-photo-image {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
@@ -783,6 +886,37 @@ export default {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
+ .fileList-preview{
|
|
|
+ margin: 0 24rpx 24rpx;
|
|
|
+ .fileList-scroll{
|
|
|
+ gap: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+ width: 100%;
|
|
|
+ // 隐藏滚动条
|
|
|
+ -ms-overflow-style: none;
|
|
|
+ scrollbar-width: none;
|
|
|
+ .file-item {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #042118;
|
|
|
+ font-weight: 500;
|
|
|
+ border: 2rpx solid transparent;
|
|
|
+ display: inline-block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ &.fileActive {
|
|
|
+ border-color: #0BBC58;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
/* 缩略图预览 */
|
|
|
.thumbnail-preview {
|
