From b09d2c5cd4eb6904146a3b39532ab171937538c8 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Mon, 23 May 2022 18:11:45 +0800
Subject: [PATCH] 首页页面样式调整，农事统计完善
---
public/img/wel/fang.png | 0
src/views/wel/index.vue | 443 +++++++++++++++++++++++++++++++++++++++----------------
public/img/map.jpg | 0
public/img/wel/tian.png | 0
public/img/wel/ye.png | 0
public/img/map.png | 0
src/api/farm/farmingrecord.js | 8 +
public/img/wel/tuo.png | 0
8 files changed, 321 insertions(+), 130 deletions(-)
diff --git a/public/img/map.jpg b/public/img/map.jpg
new file mode 100644
index 0000000..4222322
--- /dev/null
+++ b/public/img/map.jpg
Binary files differ
diff --git a/public/img/map.png b/public/img/map.png
new file mode 100644
index 0000000..84386b0
--- /dev/null
+++ b/public/img/map.png
Binary files differ
diff --git a/public/img/wel/fang.png b/public/img/wel/fang.png
new file mode 100644
index 0000000..afbb1cd
--- /dev/null
+++ b/public/img/wel/fang.png
Binary files differ
diff --git a/public/img/wel/tian.png b/public/img/wel/tian.png
new file mode 100644
index 0000000..f4e56d8
--- /dev/null
+++ b/public/img/wel/tian.png
Binary files differ
diff --git a/public/img/wel/tuo.png b/public/img/wel/tuo.png
new file mode 100644
index 0000000..34d91b5
--- /dev/null
+++ b/public/img/wel/tuo.png
Binary files differ
diff --git a/public/img/wel/ye.png b/public/img/wel/ye.png
new file mode 100644
index 0000000..e1d335e
--- /dev/null
+++ b/public/img/wel/ye.png
Binary files differ
diff --git a/src/api/farm/farmingrecord.js b/src/api/farm/farmingrecord.js
index 139ea53..27f0c2e 100644
--- a/src/api/farm/farmingrecord.js
+++ b/src/api/farm/farmingrecord.js
@@ -54,4 +54,12 @@
method: 'get',
params: {}
})
+}
+
+export const getFarmingStatis = () => {
+ return request({
+ url: '/api/farmingRecord/getFarmingStatis',
+ method: 'get',
+ params: {}
+ })
}
\ No newline at end of file
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index 1188e3a..541b41c 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -7,18 +7,49 @@
<div class="echarts-statis">
<el-progress
type="circle"
- :percentage="countStatis.rate"
+ :percentage="landInfo.rate"
:stroke-width="15"
:width="150"
+ :color="customColor"
:show-text="false"
></el-progress>
</div>
<div class="percentText">
<p>地块使用率</p>
- <p style="position: relative;top:-12px;"><span style="font-size:32px;font-weight: 550;margin-top:-10px">{{ countStatis.rate || 0 }}</span>%</p>
+ <p style="position: relative; top: -12px">
+ <span
+ style="font-size: 32px; font-weight: 550; margin-top: -10px"
+ >{{ landInfo.rate || 0 }}</span
+ >%
+ </p>
</div>
<div class="avue-statis">
- <avue-data-display :option="option"></avue-data-display>
+ <!-- <avue-data-display :option="option"></avue-data-display> -->
+ <div class="land-statis">
+ <div class="land-title">地块总面积</div>
+ <div class="land-num">
+ <span>{{ landInfo.zarea }}</span
+ > 亩
+ </div>
+ </div>
+ <div class="land-statis">
+ <div class="land-title">当前种养面积</div>
+ <div class="land-num">
+ <span>{{ landInfo.sarea }}</span
+ > 亩
+ </div>
+ </div>
+ <div class="land-statis">
+ <div class="land-title">当前种养品种</div>
+ <div class="land-num">
+ <span>{{ landInfo.num }}</span
+ > 种
+ </div>
+ </div>
+ </div>
+ <div class="map-view">
+ <img src="../../../public/img/map.png" />
+ <div class="title">农场地图→</div>
</div>
</div>
</div>
@@ -28,10 +59,10 @@
<div class="farm" v-for="(item, index) in farmPlanList" :key="index">
<div class="farm-img"><img :src="item.url" class="img" /></div>
<div class="cai">{{ item.strainName }}</div>
- <div class="area">种植面积：{{ item.area }}</div>
+ <div class="area">种植面积：{{ item.area }}亩</div>
<div class="btn">
<el-button plain size="small" @click="recovery(item)"
- >采收</el-button
+ ><span style="color: #5abf78">采收</span></el-button
>
<el-button plain size="small" @click="over(item.id)"
>结束</el-button
@@ -40,58 +71,40 @@
</div>
</div>
</div>
+ <div class="farm-bottom"></div>
</div>
<div class="right">
<div class="production">
<div class="title">生产管理</div>
<div class="btn">
- <div class="production-button">
- <div class="button" style="background-color: #f1fae6" @click="land">
- <div class="btn-img" style="background-color: #91cd4d">
- <img src="../../../public/img/wel/land.png" class="img" />
- </div>
- <div class="text">圈地</div>
+ <!-- <div class="production-button"> -->
+ <div class="button" @click="land" style="background-color: #6991f4">
+ <div class="btn-img">
+ <img src="../../../public/img/wel/tian.png" class="img" />
</div>
- <div
- class="button"
- style="background-color: #edf9fe"
- @click="plant"
- >
- <div class="btn-img" style="background-color: #40c4ff">
- <img src="../../../public/img/wel/plant.png" class="img" />
- </div>
- <div class="text">添加种养品种</div>
- </div>
+ <div class="text">圈地</div>
</div>
- <div class="production-button">
- <div
- class="button"
- style="background-color: #fbf0e9"
- @click="farming"
- >
- <div class="btn-img" style="background-color: #ffac92">
- <img src="../../../public/img/wel/farming.png" class="img" />
- </div>
- <div class="text">农事操作</div>
+ <div class="button" style="background-color: #f2a560" @click="plant">
+ <div class="btn-img">
+ <img src="../../../public/img/wel/ye.png" class="img" />
</div>
- <div
- class="button"
- style="background-color: #ebf1fd"
- @click="stock"
- >
- <div class="btn-img" style="background-color: #80a6fa">
- <img src="../../../public/img/wel/nongzi.png" class="img" />
- </div>
- <div class="text">农资入库</div>
- </div>
+ <div class="text">添加种养品种</div>
</div>
- <div class="production-button">
- <div class="button" style="background-color: #eefaf1">
- <div class="btn-img" style="background-color: #96dbaa">
- <img src="../../../public/img/wel/xiaosou.png" class="img" />
- </div>
- <div class="text">销售农产品</div>
+ <div
+ class="button"
+ style="background-color: #f37ba1"
+ @click="farming"
+ >
+ <div class="btn-img">
+ <img src="../../../public/img/wel/tuo.png" class="img" />
</div>
+ <div class="text">农事操作</div>
+ </div>
+ <div class="button" style="background-color: #9d82f6" @click="stock">
+ <div class="btn-img">
+ <img src="../../../public/img/wel/fang.png" class="img" />
+ </div>
+ <div class="text">农资入库</div>
</div>
</div>
</div>
@@ -111,13 +124,30 @@
>
</div>
</div>
- <div class="farming-divider">
+ <div class="farming-divider" v-if="isFarmingDetail">
<el-divider></el-divider>
</div>
-
+ <div class="farming-details" :v-if="isFarmingDetail" >
+ <div class="detail" v-for="(item, index) in farmingList" :key="index">
+ <div class="detail-title">{{item.name}}</div>
+ <div class="detail-number"><span>{{item.value}}</span>次</div>
+ </div>
+ </div>
</div>
<div class="repertory">
- <div class="title">农资库存</div>
+ <div class="title">
+ <div class="repertory-title">农资库存</div>
+ <div class="detail">
+ <el-link type="success" :underline="false">明细>></el-link
+ >
+ </div>
+ </div>
+ <div class="repertory-centont">
+ <div class="detail">
+ <div class="detail-title">肥料</div>
+ <div class="detail-number">剩余库存 <span>1</span>公斤</div>
+ </div>
+ </div>
</div>
</div>
<!-- 弹窗, 采收 -->
@@ -136,7 +166,7 @@
<script>
import { mapGetters } from "vuex";
import { getList, update } from "@/api/farmplant/farmplant";
-import { getFarmingCount } from "@/api/farm/farmingrecord";
+import { getFarmingCount,getFarmingStatis } from "@/api/farm/farmingrecord";
import { selectCount } from "@/api/land/land";
import recovery from "./recovery.vue";
import land from "./land.vue";
@@ -154,9 +184,12 @@
name: "wel",
data() {
return {
+ farmingList: [],
+ isFarmingDetail: false,
+ landInfo: {},
+ customColor: "#5ABF78",
total: 0,
- farmingCount:0,
- countStatis: {},
+ farmingCount: 0,
farmPlanList: [],
recoveryVisible: false,
landVisible: false,
@@ -179,37 +212,34 @@
this.onLoad();
//本年农事操作记录
this.getFarmingCount();
+ //本年农事操作记录,分组
+ this.getFarmingStatis();
},
methods: {
//本年农事操作记录
- getFarmingCount(){
+ getFarmingCount() {
var that = this;
- getFarmingCount().then((res)=>{
+ getFarmingCount().then((res) => {
that.total = res.data.data;
- })
+ // that.total = 0;
+ if(that.total>0){
+ that.isFarmingDetail = true;
+ }
+ });
+ },
+ //本年农事操作记录，分组统计
+ getFarmingStatis() {
+ var that = this;
+ getFarmingStatis().then((res) => {
+ that.farmingList = res.data.data;
+ });
},
//地块使用率统计
getCountStatis() {
var that = this;
selectCount().then((res) => {
var data = res.data.data;
- that.countStatis = data;
- that.option.data.push(
- {
- count: data.zarea + "亩",
- decimals: 2,
- title: "地块总面积",
- },
- {
- count: data.sarea + "亩",
- decimals: 2,
- title: "当前种养面积",
- },
- {
- count: data.num + "种",
- title: "当前种养品种",
- }
- );
+ that.landInfo = data;
});
},
handleChange(val) {
@@ -333,18 +363,18 @@
display: flex;
.echarts-statis {
- width: 25%;
+ width: 20%;
height: 170px;
line-height: 170px;
margin: 0 auto;
margin-left: 90px;
- text-align: center;
+ // text-align: center;
padding-top: 30px;
}
.percentText {
position: relative;
- left: -15.0%;
+ left: -16%;
top: 57px;
width: 90px;
font-size: 16px;
@@ -352,11 +382,49 @@
}
.avue-statis {
- width: 75%;
+ width: 60%;
height: 170px;
padding-top: 50px;
- text-align: center;
margin-left: -80px;
+ display: flex;
+ flex-direction: row;
+
+ .land-statis {
+ width: 33%;
+ margin: 3% 8%;
+
+ .land-num {
+ margin-top: 20px;
+
+ span {
+ font-size: 30px;
+ font-weight: 550;
+ color: #5abf78;
+ }
+ }
+ }
+ }
+
+ .map-view {
+ width: 20%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ img {
+ width: 90px;
+ height: 66px;
+ }
+
+ .title {
+ font-size: 13px;
+ color: #fff;
+ z-index: 999;
+ position: relative;
+ left: -70px;
+ top: 15px;
+ }
}
}
}
@@ -378,36 +446,39 @@
}
.content {
- width: 96%;
+ width: 99%;
+ height: 630px;
margin: 0 auto;
- margin-top: 20px;
- display: flex;
- flex-direction: row;
+
+ word-wrap: break-word;
+ word-break: break-all;
.farm {
- width: 150px;
- height: 180px;
+ width: 168px;
+ height: 277px;
background-color: #f7f9fb;
border-radius: 5px;
- margin-left: 20px;
+ margin-left: 30px;
+ margin-top: 30px;
+ float: left;
.farm-img {
- width: 100px;
- height: 86px;
- margin: 0 auto;
- text-align: center;
+ width: 168px;
+ height: 168px;
.img {
- width: 50px;
- height: 50px;
- border-radius: 100px;
- margin-top: 20px;
+ width: 168px;
+ height: 168px;
+ border-radius: 8px 8px 0px 0px;
}
}
.cai {
text-align: center;
- font-size: 16px;
+ font-size: 18px;
+ font-weight: 550;
+ margin-top: 8px;
+ color: #5abf78;
}
.area {
@@ -422,6 +493,10 @@
}
}
}
+ }
+
+ .farm-bottom {
+ min-height: 50px;
}
}
@@ -446,46 +521,49 @@
}
.btn {
+ width: 88%;
+ margin-left: 7%;
padding-top: 20px;
height: 200px;
+ word-wrap: break-word;
+ word-break: break-all;
- .production-button {
+ // .production-button {
+ // display: flex;
+ // padding-top: 12px;
+ // height: 100px;
+
+ .button {
+ margin-left: 10px;
+ margin-top: 10px;
display: flex;
- padding-top: 12px;
- height: 50px;
+ flex-direction: column;
+ float: left;
+ width: 140px;
+ height: 80px;
+ align-content: center;
+ justify-content: center;
+ border-radius: 3px;
+ cursor: pointer;
+ align-items: center;
- .button {
- margin-left: 20px;
- display: flex;
- flex-direction: row;
- width: 150px;
- height: 50px;
- line-height: 50px;
- align-content: center;
- justify-content: center;
+ .btn-img {
+ height: 32px;
+ line-height: 32px;
border-radius: 3px;
- cursor: pointer;
- .btn-img {
- height: 25px;
- line-height: 25px;
- margin-top: 12px;
- border-radius: 3px;
-
- .img {
- width: 25px;
- height: 25px;
- z-index: 999;
- }
- }
-
- .text {
- font-size: 14px;
- margin-left: 5px;
- letter-spacing: 1px;
+ .img {
+ width: 32px;
+ height: 32px;
}
}
+
+ .text {
+ font-size: 18px;
+ color: #fff;
+ }
}
+ // }
}
}
@@ -494,7 +572,8 @@
width: 100%;
background-color: #fff;
border-radius: 5px;
- min-height: 200px;
+ height: auto;
+ // white-space: nowrap;
.title {
padding-top: 20px;
@@ -526,8 +605,9 @@
margin-top: 10px;
span {
- font-size: 36px;
+ font-size: 38px;
font-weight: 550;
+ color: #5abf78;
}
}
}
@@ -539,16 +619,62 @@
}
}
- .farming-divider{
+ .farming-divider {
width: 94%;
margin: 0 auto;
+ }
+
+ .farming-details {
+ margin-top: -10px;
+ width: 100%;
+ height: auto;
+ word-wrap: break-word;
+ word-break: break-all;
+ //自适应高度
+ display: inline-block;
+
+ .detail {
+ background-color: #eff3f8;
+ cursor: pointer;
+ float: left;
+ width: 45%;
+ border-radius: 4px;
+ margin-left: 3%;
+ margin-top: 10px;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ height: 40px;
+ line-height: 40px;
+
+ .detail-title {
+ color: #707070;
+ font-size: 14px;
+ margin-left: 10px;
+ }
+
+ .detail-number {
+ color: #707070;
+ font-size: 14px;
+ margin-right: 15px;
+
+ span{
+ font-size: 18px;
+ font-weight: 550;
+ }
+ }
+ }
+
+ .detail:hover {
+ background: #e3f0ff;
+ }
}
}
.repertory {
margin-top: 15px;
width: 100%;
- min-height: 80;
+ height: auto;
background-color: #fff;
border-radius: 5px;
@@ -556,10 +682,67 @@
padding-top: 20px;
height: 30px;
line-height: 30px;
- font-size: 24px;
- font-weight: 550;
text-align: center;
+
+ .repertory-title{
+ font-size: 24px;
+ font-weight: 550;
+ float: left;
+ padding-left: 35%;
+ }
+
+ .detail{
+
+ }
}
+
+ .repertory-centont{
+ width:94%;
+ margin: 0 auto;
+ height: auto;
+ word-wrap: break-word;
+ word-break: break-all;
+ //自适应高度
+ display: inline-block;
+
+ .detail:hover {
+ background: #e3f0ff;
+ }
+
+ .detail {
+ background-color: #eff3f8;
+ cursor: pointer;
+ float: left;
+ border-radius: 4px;
+ margin-left: 3%;
+ margin-top: 10px;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ height: 50px;
+ line-height: 50px;
+ width: 100%;
+
+ .detail-title {
+ color: #707070;
+ font-size: 16px;
+ margin-left: 10px;
+ }
+
+ .detail-number {
+ color: #707070;
+ font-size: 14px;
+ margin-right: 15px;
+
+ span{
+ font-size: 18px;
+ font-weight: 550;
+ }
+ }
+ }
+ }
+
+
}
}
--
Gitblit v1.9.3