|
@@ -1,120 +1,120 @@
|
|
|
-<template>
|
|
|
|
|
- <!-- 虫情监测查看图片 -->
|
|
|
|
|
- <view class="ui-card px-13">
|
|
|
|
|
- <!-- 选择时间 -->
|
|
|
|
|
- <uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-" @change="changeSearchTime" />
|
|
|
|
|
- <!-- 选择时间end -->
|
|
|
|
|
- <!-- 图片列表 -->
|
|
|
|
|
- <view class="row wrap">
|
|
|
|
|
- <block v-for="(item,index) in imageList" :key="index">
|
|
|
|
|
- <view class="worm-img" @click="previewImage(index)">
|
|
|
|
|
- <image class="pic" mode="aspectFill" :src="item.indentify_photo"></image>
|
|
|
|
|
- <view class="time">{{item.addtime | timeFrom}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </block>
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- 图片列表end -->
|
|
|
|
|
- <ui-empty v-if="imageList.length==0"></ui-empty>
|
|
|
|
|
- </view>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
- import {
|
|
|
|
|
- getWormImageList
|
|
|
|
|
- } from '@/api/worm.js'
|
|
|
|
|
- import {
|
|
|
|
|
- timeFrame,
|
|
|
|
|
- timeFrameText,
|
|
|
|
|
- dateToUnix
|
|
|
|
|
- } from '@/utils/utils.js'
|
|
|
|
|
- // 虫情监测查看图片逻辑
|
|
|
|
|
- export default {
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- // 搜索条件
|
|
|
|
|
- params: {
|
|
|
|
|
- time_begin: timeFrame('start'), // 开始时间
|
|
|
|
|
- time_end: timeFrame('end'), // 结束时间
|
|
|
|
|
- device_id: '', //设备号
|
|
|
|
|
- page: 1,
|
|
|
|
|
- page_number: 20,
|
|
|
|
|
- },
|
|
|
|
|
- searchTime: [timeFrameText('start'), timeFrameText('end')],
|
|
|
|
|
- imageList: [], // 图片列表
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- onLoad(options) {
|
|
|
|
|
- this.params.device_id = options.id;
|
|
|
|
|
- this.getImageList();
|
|
|
|
|
- },
|
|
|
|
|
- // 触底请求
|
|
|
|
|
- onReachBottom(e) {
|
|
|
|
|
- if (this.imageList.length >= this.total) {
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
- this.params.page += 1;
|
|
|
|
|
- this.getImageList();
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- // 加载图片列表
|
|
|
|
|
- async getImageList() {
|
|
|
|
|
- const {
|
|
|
|
|
- data,
|
|
|
|
|
- num
|
|
|
|
|
- } = await getWormImageList(this.params);
|
|
|
|
|
-
|
|
|
|
|
- this.imageList = [...this.imageList, ...data];
|
|
|
|
|
- this.total = num ?? 0;
|
|
|
|
|
- },
|
|
|
|
|
- // 选择时间
|
|
|
|
|
- changeSearchTime(time) {
|
|
|
|
|
- this.params.time_begin = time[0] ? dateToUnix(time[0]) : timeFrame('start');
|
|
|
|
|
- this.params.time_end = time[0] ? dateToUnix(time[1]) : timeFrame('end');
|
|
|
|
|
- this.searchTime = time;
|
|
|
|
|
- this.params.page = 1;
|
|
|
|
|
- this.imageList=[];
|
|
|
|
|
- this.getImageList();
|
|
|
|
|
- },
|
|
|
|
|
- // 预览图片
|
|
|
|
|
- previewImage(index) {
|
|
|
|
|
- let imgList = this.imageList.map(item => item.indentify_photo);
|
|
|
|
|
- uni.previewImage({
|
|
|
|
|
- current: index,
|
|
|
|
|
- urls: imgList
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style lang="scss">
|
|
|
|
|
- .worm-img {
|
|
|
|
|
- width: 313rpx;
|
|
|
|
|
- height: 280rpx;
|
|
|
|
|
- margin-top: 24rpx;
|
|
|
|
|
- margin-right: 24rpx;
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- &:nth-child(2n) {
|
|
|
|
|
- margin-right: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .pic {
|
|
|
|
|
- display: block;
|
|
|
|
|
- width: 314rpx;
|
|
|
|
|
- height: 236rpx;
|
|
|
|
|
- background-color: #f3f5f9;
|
|
|
|
|
- border-radius: 4rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .time {
|
|
|
|
|
- height: 28rpx;
|
|
|
|
|
- margin-top: 18rpx;
|
|
|
|
|
- font-size: 20rpx;
|
|
|
|
|
- font-weight: normal;
|
|
|
|
|
- color: #999999;
|
|
|
|
|
- line-height: 28rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|
|
|
|
|
+<template>
|
|
|
|
|
+ <!-- 虫情监测查看图片 -->
|
|
|
|
|
+ <view class="ui-card px-13">
|
|
|
|
|
+ <!-- 选择时间 -->
|
|
|
|
|
+ <uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-" @change="changeSearchTime" />
|
|
|
|
|
+ <!-- 选择时间end -->
|
|
|
|
|
+ <!-- 图片列表 -->
|
|
|
|
|
+ <view class="row wrap">
|
|
|
|
|
+ <block v-for="(item,index) in imageList" :key="index">
|
|
|
|
|
+ <view class="worm-img" @click="previewImage(index)">
|
|
|
|
|
+ <image class="pic" mode="aspectFill" :src="item.indentify_photo || item.addr"></image>
|
|
|
|
|
+ <view class="time">{{item.addtime | timeFrom}}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </block>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 图片列表end -->
|
|
|
|
|
+ <ui-empty v-if="imageList.length==0"></ui-empty>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ import {
|
|
|
|
|
+ getWormImageList
|
|
|
|
|
+ } from '@/api/worm.js'
|
|
|
|
|
+ import {
|
|
|
|
|
+ timeFrame,
|
|
|
|
|
+ timeFrameText,
|
|
|
|
|
+ dateToUnix
|
|
|
|
|
+ } from '@/utils/utils.js'
|
|
|
|
|
+ // 虫情监测查看图片逻辑
|
|
|
|
|
+ export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ // 搜索条件
|
|
|
|
|
+ params: {
|
|
|
|
|
+ time_begin: timeFrame('start'), // 开始时间
|
|
|
|
|
+ time_end: timeFrame('end'), // 结束时间
|
|
|
|
|
+ device_id: '', //设备号
|
|
|
|
|
+ page: 1,
|
|
|
|
|
+ page_number: 20,
|
|
|
|
|
+ },
|
|
|
|
|
+ searchTime: [timeFrameText('start'), timeFrameText('end')],
|
|
|
|
|
+ imageList: [], // 图片列表
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(options) {
|
|
|
|
|
+ this.params.device_id = options.id;
|
|
|
|
|
+ this.getImageList();
|
|
|
|
|
+ },
|
|
|
|
|
+ // 触底请求
|
|
|
|
|
+ onReachBottom(e) {
|
|
|
|
|
+ if (this.imageList.length >= this.total) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.params.page += 1;
|
|
|
|
|
+ this.getImageList();
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ // 加载图片列表
|
|
|
|
|
+ async getImageList() {
|
|
|
|
|
+ const {
|
|
|
|
|
+ data,
|
|
|
|
|
+ num
|
|
|
|
|
+ } = await getWormImageList(this.params);
|
|
|
|
|
+
|
|
|
|
|
+ this.imageList = [...this.imageList, ...data];
|
|
|
|
|
+ this.total = num ?? 0;
|
|
|
|
|
+ },
|
|
|
|
|
+ // 选择时间
|
|
|
|
|
+ changeSearchTime(time) {
|
|
|
|
|
+ this.params.time_begin = time[0] ? dateToUnix(time[0]) : timeFrame('start');
|
|
|
|
|
+ this.params.time_end = time[0] ? dateToUnix(time[1]) : timeFrame('end');
|
|
|
|
|
+ this.searchTime = time;
|
|
|
|
|
+ this.params.page = 1;
|
|
|
|
|
+ this.imageList=[];
|
|
|
|
|
+ this.getImageList();
|
|
|
|
|
+ },
|
|
|
|
|
+ // 预览图片
|
|
|
|
|
+ previewImage(index) {
|
|
|
|
|
+ let imgList = this.imageList.map(item => item.indentify_photo || item.addr);
|
|
|
|
|
+ uni.previewImage({
|
|
|
|
|
+ current: index,
|
|
|
|
|
+ urls: imgList
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+ .worm-img {
|
|
|
|
|
+ width: 313rpx;
|
|
|
|
|
+ height: 280rpx;
|
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
|
+ margin-right: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ &:nth-child(2n) {
|
|
|
|
|
+ margin-right: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .pic {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ width: 314rpx;
|
|
|
|
|
+ height: 236rpx;
|
|
|
|
|
+ background-color: #f3f5f9;
|
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .time {
|
|
|
|
|
+ height: 28rpx;
|
|
|
|
|
+ margin-top: 18rpx;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ line-height: 28rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|