From 80743848ee038cebf3fcfb40cc6b2d68fe0fc90f Mon Sep 17 00:00:00 2001
From: zhongrj <123456>
Date: Tue, 19 Jul 2022 12:18:19 +0800
Subject: [PATCH] 地块地图模式页面新增，完善
---
public/img/out.png | 0
src/views/land/cs.vue | 9 +
src/api/land/land.js | 10 +
src/views/mapPattern/index.vue | 407 ++++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 422 insertions(+), 4 deletions(-)
diff --git a/public/img/out.png b/public/img/out.png
new file mode 100644
index 0000000..5bb2fe3
--- /dev/null
+++ b/public/img/out.png
Binary files differ
diff --git a/src/api/land/land.js b/src/api/land/land.js
index aba810d..95a6c16 100644
--- a/src/api/land/land.js
+++ b/src/api/land/land.js
@@ -69,3 +69,13 @@
}
})
}
+
+export const getLandIsAreaStatistic = (farmId) => {
+ return request({
+ url: '/api/land/land/getLandIsAreaStatistic',
+ method: 'get',
+ params: {
+ farmId
+ }
+ })
+}
diff --git a/src/views/land/cs.vue b/src/views/land/cs.vue
index 088b63e..88e80b8 100644
--- a/src/views/land/cs.vue
+++ b/src/views/land/cs.vue
@@ -42,7 +42,7 @@
</div>
<div>
<el-button size="small">
- <span style="color: #5abf78" @click="out(row)">进入地图模式</span>
+ <span style="color: #5abf78" @click="goToMapModel(row)">进入地图模式</span>
</el-button>
<el-button
type="success"
@@ -176,6 +176,13 @@
this.farmPlanList = data.records
})
+ },
+ //进入地图模式
+ goToMapModel(row){
+ this.$router.push({
+ path: `/mapPattern`,
+ query: row,
+ })
}
},
};
diff --git a/src/views/mapPattern/index.vue b/src/views/mapPattern/index.vue
index 74fa2b0..ddec951 100644
--- a/src/views/mapPattern/index.vue
+++ b/src/views/mapPattern/index.vue
@@ -1,12 +1,413 @@
<template>
- <div>12312</div>
+ <div style="width: 1920px;
+ height: 1080px;
+ background: #FFFFFF;
+ border-radius: 0px 0px 0px 0px;
+ opacity: 1;">
+ <div class="top">
+ <div class="logo">
+ <img src="../../../public/mg.png" />
+ </div>
+ <div class="farm-info">
+ <div class="farm-name">
+ <span>{{ farmInfo.farmName }}</span>
+ </div>
+ <div class="farm-area">
+ <span>地块总面积：</span>
+ <span style="font-size: 16px;font-weight: bold;"> {{landAreaInfo.zarea}}亩</span>
+
+ <span>在田面积：</span>
+ <span style="font-size: 16px;font-weight: bold;"> {{landAreaInfo.sarea}}亩</span>
+ </div>
+ </div>
+ <div class="out" @click="goToBack">
+ <img src="../../../public/img/out.png" />
+ <span> 退出</span>
+ </div>
+ </div>
+ <div class="down">
+ <div class="farm-plant">
+ <div class="title"><span>种养品种 · {{ this.page.total }}种</span></div>
+ <div class="content">
+ <div class="list-item" v-for="item in farmPlantList">
+ <div class="item-img">
+ <img :src="item.url" />
+ <span>{{ item.strainName }}</span>
+ </div>
+ <div class="item-num">{{ item.area }}亩</div>
+ </div>
+ </div>
+ </div>
+ <div class="land-info">
+ <div class="content">
+ <span>有轮廓的地块:</span><span style="font-size: 26px;font-weight: bold;color: #5ABF78;"> {{landIsAreaStatistic[0]}}</span>
+
+ <span>无轮廓的地块:</span><span style="font-size: 26px;font-weight: bold;color: #E3B745;"> {{landIsAreaStatistic[1]}}</span>
+ </div>
+ </div>
+ <div class="farm-land">
+ <div class="title"><span>地块 · {{ this.pageLand.total }}种</span></div>
+ <div class="content">
+ <div class="list-item" v-for="item in landList">
+ <div class="item-img">
+ <img :src="item.url" />
+ <span>{{ item.landName }}</span>
+ </div>
+ <div class="item-num">{{ item.landArea }}亩</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import { mapGetters } from "vuex"
+import { getList } from "@/api/farmplant/farmplant";
+import { getList as getLandList, selectCount,getLandIsAreaStatistic } from "@/api/land/land";
+import { getDetails } from "@/api/farm/farm";
export default {
+ components: {
+ },
+ data() {
+ return {
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
+ },
+ pageLand: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
+ },
+ farmPlantList: [],
+ landList: [],
+ farmInfo: {},
+ landAreaInfo:{},
+ landIsAreaStatistic:null,
+ }
+ },
+ computed: {
+ ...mapGetters(["userInfo"]),
+ },
+ created() {
+ //获取种样品列表
+ this.getFarmPlantList(this.page);
+ //获取地块列表
+ this.getLandList(this.pageLand);
+ //获取农场信息
+ this.getFarmInfo();
+ //获取统计面积信息
+ this.getLandCount();
+ //获取地块轮廓统计信息
+ this.getLandIsAreaStatistic();
+ },
+ methods: {
+ //获取种养品列表
+ getFarmPlantList(page, params = {}) {
+ params['farmId'] = this.userInfo.farmId;
+ this.loading = true;
+ getList(
+ page.currentPage,
+ page.pageSize,
+ Object.assign(params)
+ ).then((res) => {
+ const data = res.data.data;
+ this.page.total = data.total;
+ this.farmPlantList = data.records;
+ this.loading = false;
+ this.selectionClear();
+ });
+ },
+ //获取地块列表
+ getLandList(page, params = {}) {
+ params['farmId'] = this.userInfo.farmId;
+ params['tenantId'] = this.userInfo.tenant_id;
+ this.loading = true;
+ getLandList(
+ page.currentPage,
+ page.pageSize,
+ Object.assign(params)
+ ).then((res) => {
+ const data = res.data.data;
+ this.pageLand.total = data.total;
+ this.landList = data.records;
+ this.loading = false;
+ this.selectionClear();
+ });
+ },
+ //返回上一页
+ goToBack() {
+ this.$router.go(-1)
+ },
+ //获取农场信息
+ getFarmInfo() {
+ var that = this;
+ getDetails(this.userInfo.farmId).then(res => {
+ that.farmInfo = res.data.data;
+ })
+ },
+ //获取统计面积信息
+ getLandCount() {
+ selectCount(this.userInfo.farmId).then(res => {
+ this.landAreaInfo = res.data.data;
+ })
+ },
+ //获取地块轮廓统计信息
+ getLandIsAreaStatistic(){
+ getLandIsAreaStatistic(this.userInfo.farmId).then(res=>{
+ this.landIsAreaStatistic = res.data.data;
+ })
+ }
+ }
}
</script>
+<style lang="scss" scope>
+.top {
+ width: 100%;
+ height: 80px;
+ background: #000000;
+ border-radius: 0px 0px 0px 0px;
+ opacity: 0.5;
-<style>
-</style>
\ No newline at end of file
+ .logo {
+ position: absolute;
+ left: 36px;
+ top: 12px;
+
+ img {
+ height: 55px;
+ }
+ }
+
+ .farm-info {
+ height: 100%;
+ width: 100%;
+
+ .farm-name {
+ width: 100%;
+ height: 33px;
+ font-size: 25px;
+ font-weight: bold;
+ color: #5ABF78;
+ text-align: center;
+ padding-top: 13px;
+ }
+
+ .farm-area {
+ width: 100%;
+ height: 19px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #FFFFFF;
+ text-align: center;
+ padding-top: 6px;
+ }
+ }
+
+ .out {
+ width: 136px;
+ height: 33px;
+ line-height: 33px;
+ background: rgba(236, 95, 89, 0.8000);
+ border-radius: 4px 4px 4px 4px;
+ opacity: 1;
+ border: 1px solid #EC5F59;
+ position: absolute;
+ top: 24px;
+ right: 33px;
+ text-align: center;
+ cursor: pointer;
+
+ img {
+ width: 12px;
+ height: 18px;
+ position: relative;
+ top: 4px;
+ }
+
+ span {
+ font-size: 14px;
+ color: #FFFFFF;
+ font-weight: 400;
+ }
+ }
+
+
+}
+
+.down {
+ width: 100%;
+
+ .farm-plant {
+ width: 292px;
+ height: 550px;
+ position: absolute;
+ left: 30px;
+ top: 242px;
+
+ .title {
+ width: 292px;
+ height: 50px;
+ background: #5ABF78;
+ border-radius: 4px 4px 0px 0px;
+ opacity: 1;
+ line-height: 50px;
+ font-size: 17px;
+ font-weight: bold;
+ color: #FFFFFF;
+
+ span {
+ margin-left: 20px;
+ }
+ }
+
+ .content {
+ width: 292px;
+ // height: 500px;
+ background: #08551E;
+ border-radius: 4px 4px 0px 0px;
+ opacity: 0.9;
+ padding-bottom: 30px;
+
+ .list-item {
+ width: 252px;
+ margin: auto;
+ display: flex;
+ height: 64px;
+ line-height: 64px;
+ border-bottom: 1px solid #cccccc;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+
+ .item-img {
+ margin-left: 5px;
+ display: flex;
+
+ img {
+ margin-top: 12px;
+ width: 40px;
+ height: 40px;
+ background: #2389EF;
+ border-radius: 84px 84px 84px 84px;
+ opacity: 1;
+ }
+
+ span {
+ margin-left: 11px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #FFFFFF;
+ }
+ }
+
+ .item-num {
+ font-size: 14px;
+ font-weight: 400;
+ color: #FFFFFF;
+ }
+
+
+ }
+ }
+
+
+ }
+
+ .land-info{
+ width: 100%;
+ position: absolute;
+ top: 112px;
+
+ .content{
+ margin: auto;
+ width: 431px;
+ height: 56px;
+ background: #000000;
+ border-radius: 28px 28px 28px 28px;
+ opacity: 0.5;
+ display: flex;
+ justify-content: center;
+ align-items:center;
+ font-size: 16px;
+ font-weight: 400;
+ color: #FFFFFF;
+ }
+ }
+
+ .farm-land {
+ width: 292px;
+ height: 550px;
+ position: absolute;
+ right: 30px;
+ top: 242px;
+
+ .title {
+ width: 292px;
+ height: 50px;
+ background: #5ABF78;
+ border-radius: 4px 4px 0px 0px;
+ opacity: 1;
+ line-height: 50px;
+ font-size: 17px;
+ font-weight: bold;
+ color: #FFFFFF;
+
+ span {
+ margin-left: 20px;
+ }
+ }
+
+ .content {
+ width: 292px;
+ // height: 500px;
+ background: #08551E;
+ border-radius: 4px 4px 0px 0px;
+ opacity: 0.9;
+ padding-bottom: 30px;
+
+ .list-item {
+ width: 252px;
+ margin: auto;
+ display: flex;
+ height: 64px;
+ line-height: 64px;
+ border-bottom: 1px solid #cccccc;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+
+ .item-img {
+ margin-left: 5px;
+ display: flex;
+
+ img {
+ margin-top: 12px;
+ width: 40px;
+ height: 40px;
+ background: #2389EF;
+ border-radius: 84px 84px 84px 84px;
+ opacity: 1;
+ }
+
+ span {
+ margin-left: 11px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #FFFFFF;
+ }
+ }
+
+ .item-num {
+ font-size: 14px;
+ font-weight: 400;
+ color: #FFFFFF;
+ }
+
+
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3