172 lines
4.5 KiB
Vue
172 lines
4.5 KiB
Vue
<template>
|
|
<view>
|
|
<u-sticky :h5NavHeight="h5NavHeightP">
|
|
<view class="bg-white">
|
|
<SearchForm
|
|
:schemas="searchFormSchema"
|
|
@submit="handleSubmit"
|
|
></SearchForm>
|
|
</view>
|
|
</u-sticky>
|
|
<mescroll-body
|
|
@init="mescrollInit"
|
|
@up="upCallback"
|
|
:up="upOption"
|
|
:down="downOption"
|
|
>
|
|
<view
|
|
class="mx-20rpx my-20rpx bg-white shadow shadow-lg"
|
|
v-for="(item, i) in dataList"
|
|
:key="i"
|
|
>
|
|
<view class="h-500rpx">
|
|
<u-image class="!h-full" :src="item.url"></u-image>
|
|
</view>
|
|
<view class="p-16rpx">时间: {{ item.time }}</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import SearchForm from '@/components/search-form'
|
|
import { http } from '@/api/index.js'
|
|
import { formatDataByObject } from '@/utils/index.js'
|
|
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
components: {
|
|
SearchForm,
|
|
},
|
|
data() {
|
|
return {
|
|
filterParmas: {},
|
|
dataList: [],
|
|
downOption: {
|
|
use: false,
|
|
},
|
|
upOption: {
|
|
auto: false,
|
|
page: {
|
|
size: 20,
|
|
},
|
|
},
|
|
searchFormSchema: [
|
|
{
|
|
field: 'base',
|
|
label: '基地',
|
|
component: 'ApiSelect',
|
|
componentProps: ({ formActionType }) => {
|
|
return {
|
|
api: async (e) => {
|
|
const { data } = await http.get(
|
|
'/api/agricultural-device-basic',
|
|
{
|
|
params: e,
|
|
}
|
|
)
|
|
return data.data
|
|
},
|
|
onOptionsChange: (options) => {
|
|
const { setFieldsValue } = formActionType
|
|
if (options.length) {
|
|
setFieldsValue({
|
|
base: options[0].value,
|
|
})
|
|
}
|
|
},
|
|
labelField: 'name',
|
|
valueField: 'id',
|
|
params: {
|
|
device_type: 6,
|
|
},
|
|
}
|
|
},
|
|
},
|
|
{
|
|
field: 'device_id',
|
|
component: 'ApiSelect',
|
|
label: '监控点',
|
|
componentProps: ({ formModel, formActionType }) => {
|
|
return {
|
|
placeholder: '监控点',
|
|
api: async (e) => {
|
|
if (e.agricultural_basic == null) return []
|
|
const { data } = await http.get(
|
|
`/api/agricultural-device-point/${e.agricultural_basic}`,
|
|
{
|
|
params: e,
|
|
}
|
|
)
|
|
return formatDataByObject(data.data)
|
|
},
|
|
onOptionsChange: (options) => {
|
|
const { setFieldsValue } = formActionType
|
|
|
|
if (options.length)
|
|
setFieldsValue({
|
|
device_id: options[0].value,
|
|
})
|
|
},
|
|
params: {
|
|
device_type: 6,
|
|
agricultural_basic: formModel.base,
|
|
},
|
|
labelField: 'label',
|
|
valueField: 'value',
|
|
}
|
|
},
|
|
},
|
|
{
|
|
field: '[start_time, end_time]',
|
|
label: '日期',
|
|
component: 'Calendar',
|
|
defaultValue: [
|
|
this.$u.timeFormat(
|
|
new Date().getTime() - 1000 * 60 * 60 * 24 * 7,
|
|
'yyyy-mm-dd'
|
|
),
|
|
this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd'),
|
|
],
|
|
componentProps: {
|
|
mode: 'range',
|
|
placeholder: ['开始时间', '结束时间'],
|
|
},
|
|
},
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
upCallback({ num, size }) {
|
|
this.getData({
|
|
...this.filterParmas,
|
|
page: num,
|
|
per_page: size,
|
|
})
|
|
},
|
|
handleSubmit(e) {
|
|
this.filterParmas = e
|
|
this.mescroll.resetUpScroll()
|
|
},
|
|
async getData(e) {
|
|
if (!e.device_id) {
|
|
return this.$u.toast('没有关联基地')
|
|
}
|
|
try {
|
|
const { data } = await http.get(
|
|
`/api/devices/${e.device_id}/worm-photos`,
|
|
{
|
|
params: e,
|
|
}
|
|
)
|
|
if (e.page == 1) this.dataList = []
|
|
const { data: list, meta } = data
|
|
this.dataList = this.dataList.concat(list)
|
|
this.mescroll.endByPage(list.length, meta.total)
|
|
} catch (error) {
|
|
this.mescroll.endErr()
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|