From 082613d446e29e4ec1c16bfaa52345106a498b23 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Tue, 08 Nov 2022 09:03:49 +0800
Subject: [PATCH] 农事操作隐藏后四个,地图模式2d改为3d

---
 src/views/land/cs.vue |  199 +++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 165 insertions(+), 34 deletions(-)

diff --git a/src/views/land/cs.vue b/src/views/land/cs.vue
index 715c834..c3f0a5f 100644
--- a/src/views/land/cs.vue
+++ b/src/views/land/cs.vue
@@ -15,7 +15,7 @@
                         <el-option label="果园" value="2"></el-option>
                         <el-option label="鱼塘" value="3"></el-option>
                         <el-option label="山地" value="4"></el-option>
-                        <el-option label="养殖区" value="4"></el-option>
+                        <el-option label="养殖区" value="5"></el-option>
                     </el-select>
                 </div>
                 <!--        <div style="float: left; margin-left: 15px">-->
@@ -40,9 +40,9 @@
                     ></el-input>
                 </div>
             </div>
-            <div>
-                <el-button size="small">
-                    <span style="color: #5abf78" @click="goToMapModel(row)">进入地图模式</span>
+            <div class="edit">
+                <el-button size="small" @click="goToMapModel(row)">
+                    <span style="color: #5abf78">进入地图模式</span>
                 </el-button>
                 <el-button
                     type="success"
@@ -52,25 +52,7 @@
                 >圈地</el-button>
             </div>
         </div>
-        <div class="landhome">
-            <div
-                class="land"
-                v-for="(item, index) in farmPlanList"
-                :key="index"
-                @click="landInfo(item)"
-            >
-                <div class="land-img">
-                    <img :src="item.url" class="landimg" />
-                </div>
-                <div class="text">
-                    <div class="land-name">{{ item.landName }}</div>
-                    <div class="land-area">
-                        <div class="box">{{ item.landArea }} {{ item.dica }}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="el-page">
+        <div class="el-page" style="text-align: center;">
             <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
@@ -82,6 +64,52 @@
                 :total="page.total"
             ></el-pagination>
         </div>
+
+        <div class="landhome">
+            <div
+                class="land"
+                v-for="(item, index) in farmPlanList"
+                :key="index"
+                @click="landInfo(item)"
+            >
+                <div class="land-img">
+                    <img v-if="item.url" :src="item.url" class="landimg" />
+                    <img v-else src="../../../public/img/bg/noimage.jpg" class="landimg" />
+
+                    <!-- <div v-for="(url,index) in item.urls" :key="index" class="strainimg">
+                        <img  v-if="url" :src="url" width="30px" height="30px"  />
+                    </div>-->
+                    <div
+                        v-if="item.urls.length >0"
+                        class="strainimg"
+                        :class="{strainimg1:item.urls.length==1,strainimg2:item.urls.length==2,strainimg3:item.urls.length==3,strainimg4:item.urls.length==4,strainimg5:item.urls.length>=5}"
+                    >
+                        <img
+                            v-for="(url,index) in item.urls"
+                            :key="index"
+                            :src="url"
+                            width="30px"
+                            height="30px"
+                        />
+                    </div>
+
+                    <!-- <img
+                        src="../../../public/img/97ae6951541f46e1bb2468adb5d69403.png"
+                        class="pzIcon"
+                    />
+                    <img
+                        src="../../../public/img/97ae6951541f46e1bb2468adb5d69403.png"
+                        class="pzIcon"
+                    />-->
+                </div>
+                <div class="text">
+                    <div class="land-name">{{ item.landName }}</div>
+                    <div class="land-area">
+                        <div class="box">{{ item.landArea}} {{ item.dica }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <landAdd v-if="landVisible" ref="land" @refreshOnLoad="onLoad"></landAdd>
     </div>
 </template>
@@ -90,6 +118,7 @@
 import { mapGetters } from "vuex"
 import { getList } from "@/api/land/land"
 import landAdd from "./landAdd"
+import fixed from "@/util/mathHandler"
 export default {
     components: {
         landAdd,
@@ -98,17 +127,18 @@
     data () {
         return {
             formInline: {
-                stype: "0",
+                stype: "",
                 state: "0",
                 keyword: "",
             },
             query: {},
-            value: false,
+            farm: {},
+            value: true,
             farmingCount: 0,
             landVisible: false,
             farmPlanList: [],
             page: {
-                pageSize: 4,
+                pageSize: 12,
                 currentPage: 1,
                 total: 0,
             },
@@ -126,10 +156,31 @@
         }
     },
     computed: {
-        ...mapGetters(["userInfo"]),
+        ...mapGetters(["userInfo", "$farmId"]),
+    },
+    watch: {
+        '$farmId': {
+            handler (newName, oldName) {
+                // this.farm.id = newName
+                this.page.currentPage = 1
+                //地块页面
+                setTimeout(() => {
+                    this.onLoad()
+                }, 100)
+
+            }
+        }
     },
     created () {
-        this.onLoad()
+        this.$EventBus.$on('getFarmObj', (farmObj) => {
+            // this.$nextTick(() => {
+            //     this.$EventBus.$emit("setFarmId", farmObj.id);
+            // });
+            setTimeout(() => {
+                this.$EventBus.$emit("setFarmId", farmObj.id)
+            }, 100)
+        })
+        this.onLoad(this.page)
     },
     methods: {
         //圈地
@@ -143,6 +194,7 @@
         stypeChange (value) {
             this.query["landType"] = value
             this.onLoad(this.page, this.query)
+            this.page.currentPage = 1
         },
         //库存 select 改变事件
         stateChange (value) {
@@ -165,15 +217,36 @@
             this.onLoad(this.page)
         },
         landInfo (item) {
+            var arr = []
+            this.$store.state.tags.tagList.forEach((item) => {
+                if (item.label != "地块详情") {
+                    arr.push(item)
+                }
+            })
+            this.$store.state.tags.tagList = arr
             this.$router.push({
                 path: `/LandDetail`,
                 query: item,
             })
         },
         onLoad (page, params = {}) {
-            getList(1, 10, Object.assign(params, this.query)).then(res => {
+            if (typeof (page) == "undefined") {
+                page = this.page
+            }
+            Object.assign(params, { farmId: this.$farmId })
+            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                 const data = res.data.data
+                this.page.total = data.total
                 this.farmPlanList = data.records
+                this.farmPlanList.forEach((e) => {
+                    e.landArea = fixed.fixedNum(e.landArea)
+                    if (e.strainUrl == "") {
+                        e["urls"] = []
+                    } else {
+                        e["urls"] = e.strainUrl.split(",")
+                    }
+
+                })
             })
         },
         //进入地图模式
@@ -198,6 +271,13 @@
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
+
+    // .el-page{
+    //     text-align: right;
+    // }
+    // .el-pagination{
+    //     text-align: right;
+    // }
 }
 
 .wraaper-box {
@@ -211,8 +291,8 @@
 
 .landhome {
     padding: 10px;
-    wdith: 100%;
-    height: 100%;
+    width: 100%;
+    height: 88%;
     display: flex;
     box-sizing: border-box;
     flex-wrap: wrap;
@@ -227,17 +307,29 @@
 
         .land-img {
             width: 100%;
-            height: 280px;
+            // height: 280px;
+            height: 240px;
             margin: 0 auto;
             text-align: center;
+            position: relative;
 
             .landimg {
                 width: 100%;
-                height: 280px;
+                // height: 280px;
+                height: 240px;
                 //border-radius: 100px;
                 //margin-top: 25px;
                 //margin-left: -25px;
             }
+            // .pzIcon {
+            //     width: 40px;
+            //     height: 40px;
+            //     border-radius: 50%;
+            //     // position: absolute;
+            //     // left: calc(50% - 20px);
+            //     // top: 100px;
+            //     justify-content: center;
+            // }
         }
 
         .text {
@@ -265,7 +357,7 @@
                     left: 1;
                     bottom: 0;
                     margin: auto;
-                    width: 80px;
+                    width: 120px;
                     height: 24px;
                     line-height: 24px;
                     border: 1px solid #64c3a4;
@@ -289,4 +381,43 @@
         text-align: center;
     }
 }
+.edit {
+    padding-left: 13px;
+}
+.strainimg {
+    position: absolute;
+    // display:flex;
+    // align-content:center
+    // flex-direction: row;
+    // align-items: center;
+}
+.strainimg1 {
+    width: 31px;
+    top: 45%;
+    left: 45%;
+}
+.strainimg2 {
+    width: 60px;
+    top: 45%;
+    left: 40%;
+}
+.strainimg3 {
+    width: 60px;
+    top: 38%;
+    left: 36%;
+}
+.strainimg4 {
+    width: 60px;
+    top: 38%;
+    left: 36%;
+}
+.strainimg5 {
+    width: 90px;
+    top: 38%;
+    left: 30%;
+}
+
+.strainimg img {
+    border-radius: 50%;
+}
 </style>

--
Gitblit v1.9.3