农事操作隐藏后四个，地图模式2d改为3d

guoshilong

2022-11-08 082613d446e29e4ec1c16bfaa52345106a498b23

 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>