|
|
@@ -5,26 +5,41 @@
|
|
|
<view class="ui-card px-13">
|
|
|
<!-- 选项框 -->
|
|
|
<view class="row-end mb">
|
|
|
- <picker class="picker mr">
|
|
|
+ <!-- <picker mode='date' fields='year' @chagne="changePestDate" class="picker mr">
|
|
|
<view class="picker-wrapper">
|
|
|
- 2022年
|
|
|
+ <view>{{pestDate}}</view>
|
|
|
<uni-icons type="bottom" :size="12" color="#DDDDDD"></uni-icons>
|
|
|
</view>
|
|
|
+ </picker> -->
|
|
|
+ <picker mode="date" fields="year" @change="changePestDate">
|
|
|
+ <view class="uni-input">{{pestDate}}</view>
|
|
|
</picker>
|
|
|
- <picker class="picker">
|
|
|
+ <picker class="picker" @change="changePestList" :range="pestList" >
|
|
|
<view class="picker-wrapper">
|
|
|
- 步甲
|
|
|
+ <view>{{pestItem}}</view>
|
|
|
<uni-icons type="bottom" :size="12" color="#DDDDDD"></uni-icons>
|
|
|
</view>
|
|
|
</picker>
|
|
|
</view>
|
|
|
<!-- 时期列表 -->
|
|
|
- <view class="period-navs">
|
|
|
- <view class="period-item" v-for="(period,index) in periodList" :key="index">
|
|
|
+ <view class="period-navs" v-if="pestInfo[pestItem]">
|
|
|
+ <view class="period-item start-time">
|
|
|
<view class="icon"></view>
|
|
|
- <view class="title">{{period.title}}</view>
|
|
|
- <view class="text">{{period.time}}</view>
|
|
|
- <view class="text">数量：{{period.num}}</view>
|
|
|
+ <view class="title">始见期</view>
|
|
|
+ <view class="text">{{pestInfo[pestItem].startTime}}</view>
|
|
|
+ <view class="text"></view>
|
|
|
+ </view>
|
|
|
+ <view class="period-item high-time">
|
|
|
+ <view class="icon"></view>
|
|
|
+ <view class="title">高峰期</view>
|
|
|
+ <view class="text">{{pestInfo[pestItem].highTime}}</view>
|
|
|
+ <view class="text">数量：{{pestInfo[pestItem].highNum}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="period-item end-ime">
|
|
|
+ <view class="icon"></view>
|
|
|
+ <view class="title">终见期</view>
|
|
|
+ <view class="text">{{pestInfo[pestItem].endTime}}</view>
|
|
|
+ <view class="text"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -48,14 +63,14 @@
|
|
|
</view>
|
|
|
<view class="percent">52%</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<!-- 虫害表格数据 -->
|
|
|
<view class="ui-card worm-table">
|
|
|
<ui-tabs :list="tabs" :active="1"></ui-tabs>
|
|
|
- <uni-table class="table-style mt-12" ref="table" :loading="loading" border emptyText="暂无更多数据">
|
|
|
+ <!-- <uni-table class="table-style mt-12" ref="table" :loading="loading" border emptyText="暂无更多数据">
|
|
|
<uni-tr>
|
|
|
<uni-th width="150" align="center">日期</uni-th>
|
|
|
<uni-th width="150" align="center">姓名</uni-th>
|
|
|
@@ -70,7 +85,7 @@
|
|
|
</uni-td>
|
|
|
<uni-td align="center">{{ item.address }}</uni-td>
|
|
|
</uni-tr>
|
|
|
- </uni-table>
|
|
|
+ </uni-table> -->
|
|
|
<!-- 页码 -->
|
|
|
<uni-pagination :total="50" title="标题文字" />
|
|
|
<!-- 页码end -->
|
|
|
@@ -80,13 +95,23 @@
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
- getWormLampList
|
|
|
+ getPestStatisticsChart,
|
|
|
+ getPestRaiseInfo,
|
|
|
+ getPestImageSource,
|
|
|
+ getPestBaseData
|
|
|
} from '@/api/worm.js'
|
|
|
import areaCharts from './components/w-area-charts.vue'
|
|
|
import pieCharts from './components/w-pie-charts.vue'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ dId: '',// 设备id
|
|
|
+ //始见期选项
|
|
|
+ pestList: [], //始见期选项
|
|
|
+ pestInfo: {},
|
|
|
+ pestDate: (new Date()).getUTCFullYear(),
|
|
|
+ pestItem: '',
|
|
|
+ //始见期选项 end
|
|
|
pieData: {
|
|
|
series: [{
|
|
|
data: [{
|
|
|
@@ -146,7 +171,30 @@
|
|
|
areaCharts,
|
|
|
pieCharts
|
|
|
},
|
|
|
+ onLoad(options) {
|
|
|
+ this.dId='15';//options.id
|
|
|
+ this.getPestRaiseInfo();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ // 获取始见期数据
|
|
|
+ async getPestRaiseInfo() {
|
|
|
+ const res = await getPestRaiseInfo({
|
|
|
+ year: this.pestDate,
|
|
|
+ d_ids: this.dId,
|
|
|
+ });
|
|
|
+ console.log(res);
|
|
|
+ this.pestList = res.pest_list; //始见期选项
|
|
|
+ this.pestInfo = res.pest_info;
|
|
|
+ this.pestItem = this.pestList[0];
|
|
|
+ },
|
|
|
+ changePestDate(e){
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ // 选择始见期类型
|
|
|
+ changePestList(e){
|
|
|
+ console.log(e);
|
|
|
+ this.pestItem = this.pestList[e.detail.value];
|
|
|
+ },
|
|
|
maskClick(e) {
|
|
|
console.log('----maskClick事件:', e);
|
|
|
}
|
|
|
@@ -162,19 +210,17 @@
|
|
|
}
|
|
|
|
|
|
.period-item {
|
|
|
- width: 206rpx;
|
|
|
+ width: 200rpx;
|
|
|
height: 264rpx;
|
|
|
- padding: 24rpx;
|
|
|
- background-color: #FCF8FF;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- margin-bottom: 18rpx;
|
|
|
- background-color: #95F9E7;
|
|
|
- border-radius: 100%;
|
|
|
+ padding:122rpx 24rpx 24rpx;
|
|
|
+ background: url('/static/img/startTime.png') center center no-repeat;
|
|
|
+ background-size:200rpx 264rpx;
|
|
|
+ &.high-time{
|
|
|
+ background-image: url('/static/img/highTime.png');
|
|
|
+ }
|
|
|
+ &.end-time{
|
|
|
+ background-image: url('/static/img/endTime.png');
|
|
|
}
|
|
|
-
|
|
|
.title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: normal;
|
|
|
@@ -222,8 +268,9 @@
|
|
|
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// 虫害表格数据
|
|
|
- .worm-table{
|
|
|
+ .worm-table {
|
|
|
padding: 10rpx 24rpx 30rpx;
|
|
|
margin-bottom: 100rpx;
|
|
|
border-radius: 0;
|
李程龙
