| | |
| | | <div class="echarts-statis"> |
| | | <el-progress |
| | | type="circle" |
| | | :percentage="100" |
| | | :percentage="countStatis.rate" |
| | | :stroke-width="15" |
| | | :width="150" |
| | | :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> |
| | | </div> |
| | | <div class="avue-statis"> |
| | | <avue-data-display :option="option"></avue-data-display> |
| | |
| | | <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 |
| | |
| | | <div class="btn"> |
| | | <div class="production-button"> |
| | | <div class="button" style="background-color: #f1fae6" @click="land"> |
| | | <div class="btn-img" style="background-color: #91CD4D"> |
| | | <div class="btn-img" style="background-color: #91cd4d"> |
| | | <img src="../../../public/img/wel/land.png" class="img" /> |
| | | </div> |
| | | <div class="text">圈地</div> |
| | | </div> |
| | | <div class="button" style="background-color: #edf9fe" @click="plant"> |
| | | <div class="btn-img" style="background-color: #40C4FF"> |
| | | <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> |
| | | <div class="production-button"> |
| | | <div class="button" style="background-color: #fbf0e9" @click="farming"> |
| | | <div class="btn-img" style="background-color: #FFAC92"> |
| | | <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> |
| | | <div class="button" style="background-color: #ebf1fd" @click="stock"> |
| | | <div class="btn-img" style="background-color: #80A6FA"> |
| | | <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="production-button"> |
| | | <div class="button" style="background-color: #eefaf1"> |
| | | <div class="btn-img" style="background-color: #96DBAA"> |
| | | <div class="btn-img" style="background-color: #96dbaa"> |
| | | <img src="../../../public/img/wel/xiaosou.png" class="img" /> |
| | | </div> |
| | | <div class="text">销售农产品</div> |
| | |
| | | <div class="farming-statis"> |
| | | <div class="left"> |
| | | <div class="farm-text">本年农事操作</div> |
| | | <div class="num"><span>{{total}}</span> 次</div> |
| | | <div class="num"> |
| | | <span>{{ total }}</span |
| | | > 次 |
| | | </div> |
| | | </div> |
| | | <div class="right"> |
| | | <el-link type="success" :underline="false" @click="farmPlantDetail">明细>></el-link> |
| | | <el-link type="success" :underline="false" @click="farmPlantDetail" |
| | | >明细>></el-link |
| | | > |
| | | </div> |
| | | </div> |
| | | <div class="farming-divider"> |
| | | <el-divider></el-divider> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="repertory"> |
| | | <div class="title">农资库存</div> |
| | |
| | | <script> |
| | | import { mapGetters } from "vuex"; |
| | | import { getList, update } from "@/api/farmplant/farmplant"; |
| | | import { getFarmingCount } from "@/api/farm/farmingrecord"; |
| | | import { selectCount } from "@/api/land/land"; |
| | | import recovery from "./recovery.vue"; |
| | | import land from "./land.vue"; |
| | | import plant from "./plant.vue"; |
| | |
| | | land, |
| | | plant, |
| | | farming, |
| | | stock |
| | | stock, |
| | | }, |
| | | name: "wel", |
| | | data() { |
| | | return { |
| | | total:0, |
| | | total: 0, |
| | | farmingCount:0, |
| | | countStatis: {}, |
| | | farmPlanList: [], |
| | | recoveryVisible: false, |
| | | landVisible: false, |
| | |
| | | stockVisible: false, |
| | | option: { |
| | | span: 8, |
| | | data: [ |
| | | { |
| | | click: function (item) { |
| | | alert(JSON.stringify(item)); |
| | | }, |
| | | count: 100, |
| | | decimals: 2, |
| | | title: "地块总面积", |
| | | }, |
| | | { |
| | | click: function (item) { |
| | | alert(JSON.stringify(item)); |
| | | }, |
| | | count: "3,000", |
| | | decimals: 2, |
| | | title: "当前种养面积", |
| | | }, |
| | | { |
| | | click: function (item) { |
| | | alert(JSON.stringify(item)); |
| | | }, |
| | | count: "40,000", |
| | | title: "当前种养品种", |
| | | }, |
| | | ], |
| | | data: [], |
| | | }, |
| | | }; |
| | | }, |
| | |
| | | }, |
| | | created() { |
| | | //地块使用率统计 |
| | | this.getCountStatis(); |
| | | //采收列表 |
| | | this.onLoad(); |
| | | //本年农事操作记录 |
| | | this.getFarmingCount(); |
| | | }, |
| | | methods: { |
| | | //本年农事操作记录 |
| | | getFarmingCount(){ |
| | | var that = this; |
| | | getFarmingCount().then((res)=>{ |
| | | that.total = res.data.data; |
| | | }) |
| | | }, |
| | | //地块使用率统计 |
| | | getCountStatis() { |
| | | var that = this; |
| | | selectCount().then((res) => { |
| | | var data = res.data.data; |
| | | that.countStatis = data; |
| | | that.option.data.push( |
| | | { |
| | | click: function (item) { |
| | | alert(JSON.stringify(item)); |
| | | }, |
| | | count: data.zarea + "亩", |
| | | decimals: 2, |
| | | title: "地块总面积", |
| | | }, |
| | | { |
| | | click: function (item) { |
| | | alert(JSON.stringify(item)); |
| | | }, |
| | | count: data.sarea + "亩", |
| | | decimals: 2, |
| | | title: "当前种养面积", |
| | | }, |
| | | { |
| | | click: function (item) { |
| | | alert(JSON.stringify(item)); |
| | | }, |
| | | count: data.num + "种", |
| | | title: "当前种养品种", |
| | | } |
| | | ); |
| | | }); |
| | | }, |
| | | handleChange(val) { |
| | | window.console.log(val); |
| | | }, |
| | |
| | | }, |
| | | //本年农事操作明细 |
| | | farmPlantDetail() { |
| | | const data ={ |
| | | activeName:"tab2" |
| | | } |
| | | const data = { |
| | | activeName: "tab2", |
| | | }; |
| | | this.$router.push({ |
| | | path: `/farmDetail`, |
| | | query: data |
| | | query: data, |
| | | }); |
| | | }, |
| | | }, |
| | |
| | | height: 170px; |
| | | line-height: 170px; |
| | | margin: 0 auto; |
| | | margin-left: 50px; |
| | | margin-left: 90px; |
| | | text-align: center; |
| | | padding-top: 30px; |
| | | } |
| | | |
| | | .percentText { |
| | | position: relative; |
| | | left: -15.0%; |
| | | top: 57px; |
| | | width: 90px; |
| | | font-size: 16px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .avue-statis { |
| | |
| | | height: 170px; |
| | | padding-top: 50px; |
| | | text-align: center; |
| | | margin-left: -80px; |
| | | } |
| | | } |
| | | } |
| | |
| | | .farm { |
| | | width: 150px; |
| | | height: 180px; |
| | | background-color: #F7F9FB; |
| | | background-color: #f7f9fb; |
| | | border-radius: 5px; |
| | | margin-left: 20px; |
| | | |
| | |
| | | border-radius: 3px; |
| | | cursor: pointer; |
| | | |
| | | .btn-img{ |
| | | .btn-img { |
| | | height: 25px; |
| | | line-height: 25px; |
| | | margin-top: 12px; |
| | | border-radius: 3px; |
| | | |
| | | |
| | | .img { |
| | | width: 25px; |
| | |
| | | z-index: 999; |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | .text { |
| | | font-size: 14px; |
| | |
| | | width: 100%; |
| | | background-color: #fff; |
| | | border-radius: 5px; |
| | | min-height: 250px; |
| | | min-height: 200px; |
| | | |
| | | .title { |
| | | padding-top: 20px; |
| | |
| | | text-align: center; |
| | | } |
| | | |
| | | .farming-statis{ |
| | | .farming-statis { |
| | | width: 94%; |
| | | margin: 0 auto; |
| | | height: 100px; |
| | |
| | | flex-direction: row; |
| | | // background-color: aqua; |
| | | |
| | | .left{ |
| | | width: 60%; |
| | | .left { |
| | | width: 60%; |
| | | height: 100px; |
| | | |
| | | .farm-text{ |
| | | |
| | | .farm-text { |
| | | font-size: 20px; |
| | | margin-top: 20px; |
| | | } |
| | | .num{ |
| | | .num { |
| | | font-size: 16px; |
| | | margin-top: 10px; |
| | | |
| | | |
| | | span{ |
| | | span { |
| | | font-size: 36px; |
| | | font-weight: 550; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .right{ |
| | | margin-left:60px; |
| | | line-height: 100px; |
| | | height: 100px; |
| | | .right { |
| | | margin-left: 60px; |
| | | line-height: 100px; |
| | | height: 100px; |
| | | } |
| | | } |
| | | |
| | | .farming-divider{ |
| | | width: 94%; |
| | | margin: 0 auto; |
| | | } |
| | | } |
| | | |
| | | .repertory { |