456 lines
10 KiB
Vue
456 lines
10 KiB
Vue
<template>
|
|
<view class="home">
|
|
<!-- 头部 -->
|
|
<view class="base">
|
|
<view class="title" @click="show=true">
|
|
<text>{{currentBase.baseName}}</text>
|
|
</view>
|
|
<view class="baseInfo">
|
|
<view class="item">
|
|
<view class="num">
|
|
{{baseInfo.areaCount}}
|
|
</view>
|
|
<view class="unit">
|
|
基地面积(亩)
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="num">
|
|
{{baseInfo.diCount+baseInfo.pengCount}}
|
|
</view>
|
|
<view class="unit">
|
|
地块数量(块)
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image class="bg" src="https://sancangshop.oss-cn-beijing.aliyuncs.com/frog/bg.png" mode=""></image>
|
|
</view>
|
|
<view class="content">
|
|
<!-- 菜单 -->
|
|
<view class="tabs" >
|
|
<view class="tab" v-for="(item,index) in fixMenus" :key="index" @click="jump(item)">
|
|
<image class="img" :src="item.menuPicture" mode=""></image>
|
|
<view class="label">
|
|
{{item.menuName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-divider></u-divider>
|
|
<!-- 幻灯 -->
|
|
<view class="swiper">
|
|
<u-swiper :list="swiperList" showTitle keyName="imgUrl" height="100" :circular="true" @change="e => current = e.current" @click="jumpToNewDetail">
|
|
<view slot="indicator" class="indicator">
|
|
<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index"
|
|
:class="[index === current && 'indicator__dot--active']"></view>
|
|
</view>
|
|
</u-swiper>
|
|
</view>
|
|
<u-divider></u-divider>
|
|
|
|
<!-- 任务统计 -->
|
|
<view class="chart">
|
|
<view class="title">
|
|
<text class="font-weight-700 font-size-35">我的任务</text>
|
|
<view @click="jumpToTaskList" class="flex aic jcc font-color-2b7 font-size-26">
|
|
查看更多</view>
|
|
</view>
|
|
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData"
|
|
:canvas2d="true" canvasId="CvlrbaEbAdVUhFMpyxLGWSdKKCpHGkMf"/>
|
|
</view>
|
|
</view>
|
|
<!-- 基地选择弹窗 -->
|
|
<u-picker :show="show" :columns="baseList" keyName="baseName" @cancel="show=false" @confirm="confirm"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
//#ifdef APP-PLUS
|
|
import { round } from '../../uni_modules/uview-ui/libs/function/digit.js'
|
|
import { onLoad } from '../../uni_modules/uview-ui/libs/mixin/mixin.js';
|
|
import { appUpgrade} from '../../utils/upgrade.js'
|
|
//#endif
|
|
//#ifdef MP
|
|
import {mpUpgrade} from '../../utils/upgrade.js'
|
|
//#endif
|
|
import fixMenus from './menusConfig.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
//基地信息
|
|
baseInfo:{
|
|
areaCount:0,
|
|
diCount:0,
|
|
pengCount:0
|
|
},
|
|
fixMenus,
|
|
//当前选择的基地
|
|
currentBase:{baseName:''},
|
|
//基地选择控件
|
|
show:false,
|
|
//基地列表
|
|
baseList: [],
|
|
//菜单列表
|
|
list: [],
|
|
//农事任务图表值
|
|
chartData: {},
|
|
//图表配置项
|
|
opts: {
|
|
update:true,
|
|
rotate: false,
|
|
rotateLock: false,
|
|
color: [ "#dadada","#fc842d", "#ead900", "#2b7"],
|
|
padding: [5, 5, 5, 5],
|
|
dataLabel: true,
|
|
enableScroll: false,
|
|
legend: {
|
|
show: true,
|
|
position: "bottom",
|
|
lineHeight: 16
|
|
},
|
|
title: {
|
|
name: "0",
|
|
fontSize: 24,
|
|
color: "#666666"
|
|
},
|
|
subtitle: {
|
|
name: "完成进度",
|
|
fontSize: 10,
|
|
color: "#999999"
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 10,
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 15,
|
|
border: true,
|
|
borderWidth: 3,
|
|
borderColor: "#FFFFFF",
|
|
customRadius: "60"
|
|
}
|
|
}
|
|
},
|
|
//host
|
|
baseUrl:uni.$u.http.config.baseURL,
|
|
//幻灯列表
|
|
swiperList:[],
|
|
//幻灯当前值
|
|
current:0
|
|
}
|
|
},
|
|
onLoad() {
|
|
//监听登陆成功事件
|
|
uni.$on("login",(data)=>{
|
|
if(data.msg=="success"){
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '登录成功',
|
|
duration: 1500,
|
|
icon:"none",
|
|
position:"bottom"
|
|
});
|
|
}
|
|
})
|
|
},
|
|
destroyed() {
|
|
//取消事件监听
|
|
uni.$off("login")
|
|
},
|
|
watch:{
|
|
currentBase:{
|
|
handler:async function(n){
|
|
if(n.deptId){
|
|
//获取基地详情
|
|
this.getBaseInfo();
|
|
//获取轮播新闻列表
|
|
this.getSwiperList();
|
|
//农事
|
|
this.loadChart();
|
|
}
|
|
},
|
|
deep:true
|
|
}
|
|
},
|
|
async onLoad() {
|
|
//升级
|
|
this.upgrade();
|
|
//获取基地列表
|
|
this.getBaseList();
|
|
},
|
|
async onPullDownRefresh() {
|
|
//获取基地详情
|
|
await this.getBaseInfo();
|
|
//获取轮播新闻列表
|
|
await this.getSwiperList();
|
|
//农事
|
|
await this.loadChart();
|
|
uni.stopPullDownRefresh();
|
|
|
|
},
|
|
methods: {
|
|
//升级
|
|
async upgrade() {
|
|
//#ifdef APP-PLUS
|
|
const {rows} = await uni.$u.http.get('/system/upgrade/mobile/list', {params: {isCurrent: 1}})
|
|
appUpgrade(rows[0])
|
|
//#endif
|
|
//#ifdef MP
|
|
mpUpgrade();
|
|
//#endif
|
|
},
|
|
//获取基地列表
|
|
async getBaseList(){
|
|
const {data} = await uni.$u.http.get('/agriculture/baseinfo/selectBaseinfoListByRoles');
|
|
this.baseList = [data];
|
|
//默认选择第一个
|
|
if(data.length>0) {
|
|
this.currentBase = data[0]
|
|
uni.setStorageSync('baseId',this.currentBase.deptId)
|
|
}
|
|
|
|
},
|
|
//基地选择确定
|
|
confirm(e){
|
|
this.currentBase = e.value[0];
|
|
uni.setStorageSync('baseId',this.currentBase.deptId)
|
|
this.show = false;
|
|
},
|
|
//获取基地详情
|
|
async getBaseInfo(){
|
|
const { rows } = await uni.$u.http.get("/agriculture/statistics/selectBaseInfo/"+this.currentBase.deptId);
|
|
if(rows.length>0){
|
|
this.baseInfo=rows[0];
|
|
}
|
|
},
|
|
//获取新闻轮播类标
|
|
async getSwiperList(){
|
|
const { rows} = await uni.$u.http.get("/iot/news/list",{params:{
|
|
isBanner: 1,
|
|
status: 1,
|
|
baseId:this.currentBase.deptId
|
|
}});
|
|
|
|
this.swiperList=rows.map(item=>{
|
|
return {
|
|
//图片转换
|
|
imgUrl:uni.$u.http.config.baseURL+item.imgUrl,
|
|
//新闻标题截取
|
|
title:item.title.length>16?item.title.slice(0,16)+"...":item.title,
|
|
//新闻ID
|
|
newsId:item.newsId
|
|
}
|
|
})
|
|
},
|
|
//跳转带新闻详情
|
|
jumpToNewDetail(index){
|
|
uni.$u.route({
|
|
url: 'pages/service/newsDetail',
|
|
params: {
|
|
id: this.swiperList[index].newsId
|
|
}
|
|
})
|
|
},
|
|
//农事任务统计 TODO:图表组建数据改变了没有重新加载
|
|
async loadChart(){
|
|
const {rows} = await uni.$u.http.get("/agriculture/statistics/selectTaskInfoOfMine");
|
|
let data=rows.map(item=>({name:item.name,value:item.value,status:item.status}));
|
|
//总任务数
|
|
let total = data.reduce((total,item)=>{
|
|
return total+item.value;
|
|
},0);
|
|
//已经完成任务数
|
|
let finsh = data.filter(item=>item.status=='3').reduce((total,item)=>{
|
|
return total+item.value;
|
|
},0);
|
|
//完成比例
|
|
let finishPercent = total==0?0+'%' : (finsh/total*100).toFixed(0)+'%';
|
|
let res = {
|
|
series: [{
|
|
data: data
|
|
}]
|
|
};
|
|
this.opts.title.name=String(finishPercent)
|
|
this.$nextTick(()=>{
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
})
|
|
},
|
|
|
|
//菜单跳转
|
|
jump(data) {
|
|
//数据采集按钮，跳转到所有的设备
|
|
uni.$u.route({
|
|
type: data.type,
|
|
url: data.pageUrl,
|
|
params:data.params
|
|
})
|
|
},
|
|
//跳转到任务详情
|
|
jumpToTaskList(){
|
|
uni.$u.route({
|
|
url: 'pages/farm/index',
|
|
})
|
|
// uni.$u.route({
|
|
// url: 'pages/farm/taskList',
|
|
// params: {
|
|
// //任务的状态值为0
|
|
// status:0,
|
|
// //任务的计划开始时间为当天
|
|
// planStart:this.$date.getDate(),
|
|
// //页面标题
|
|
// title:'待处理任务',
|
|
// jumpFrom:2
|
|
// }
|
|
// })
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home {
|
|
.base {
|
|
background: #2b7;
|
|
height: 450rpx;
|
|
color: #fff;
|
|
padding: 80rpx 30rpx 80rpx 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-bottom: -40rpx;
|
|
position: relative;
|
|
z-index: 0;
|
|
.title{
|
|
font-weight: 600;
|
|
font-size: 45rpx;
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 130rpx;
|
|
left: 30rpx;
|
|
}
|
|
.baseInfo {
|
|
width: 100%;
|
|
display: flex;
|
|
.item{
|
|
font-size: 25rpx;
|
|
margin-right: 20rpx;
|
|
.num{
|
|
font-size: 45rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.unit{
|
|
font-size:28rpx;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
.bg{
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 20%;
|
|
width: 350rpx;
|
|
height: 252rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 0;
|
|
border-top-left-radius: 40rpx;
|
|
border-top-right-radius: 40rpx;
|
|
background: #fff;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
|
|
.tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.tab {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 10rpx;
|
|
position: relative;
|
|
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.iconfont {
|
|
color: #fff;
|
|
border-radius: 30rpx;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
font-size: 76rpx;
|
|
margin-bottom: 16rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.img{
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
border-radius: 30rpx;
|
|
overflow: hidden;
|
|
margin-bottom: -20rpx;
|
|
}
|
|
|
|
.label {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper{
|
|
overflow: hidden;
|
|
position: relative;
|
|
.indicator{
|
|
position: absolute;
|
|
z-index: 0;
|
|
display: flex;
|
|
right: -330rpx;
|
|
top: -10rpx;
|
|
&__dot {
|
|
height: 8rpx;
|
|
width: 16rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #fff;
|
|
margin: 0 4rpx;
|
|
transition: background-color 0.3s;
|
|
transition: width 0.3s;
|
|
&--active {
|
|
background-color: #69BB73;
|
|
width: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.chart {
|
|
height: 500rpx;
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |