智慧农业后台管理页面
guoshilong
2022-08-26 fec7909e8552e98c60f3e14efc7d208e109dc4f8
src/views/land/cs.vue
@@ -9,7 +9,7 @@
                        size="small"
                        @change="stypeChange"
                    >
                        <el-option label="全部分类" value></el-option>
                        <el-option label="全部分类" value=""></el-option>
                        <el-option label="大田" value="0"></el-option>
                        <el-option label="大棚" value="1"></el-option>
                        <el-option label="果园" value="2"></el-option>
@@ -39,31 +39,33 @@
                        clearable
                    ></el-input>
                </div>
                        <div class="el-page">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="page.currentPage"
                                :hide-on-single-page="value"
                                :page-size="page.pageSize"
                                background
                                layout="total, prev, pager, next"
                                :total="page.total"
                            ></el-pagination>
                        </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"
                    size="small"
                    @click="land"
                    style="margin-right: 50px;width: 80px;"
                  type="success"
                  size="small"
                  @click="land"
                  style="margin-right: 50px;width: 80px;"
                >圈地</el-button>
            </div>
        </div>
        <div class="el-page" style="text-align: center;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :hide-on-single-page="value"
              :page-size="page.pageSize"
              background
              layout="total, prev, pager, next"
              :total="page.total"
            ></el-pagination>
        </div>
        <div class="landhome">
            <div
                class="land"
@@ -72,28 +74,17 @@
                @click="landInfo(item)"
            >
                <div class="land-img">
                    <img :src="item.url" class="landimg" />
                    <img v-if="item.url" :src="item.url" class="landimg" />
                    <img v-else src="../../../public/img/bg/noimage.jpg" 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 class="box">{{ item.landArea}} {{ item.dica }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="el-page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :hide-on-single-page="value"
                :page-size="page.pageSize"
                background
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div> -->
        <landAdd v-if="landVisible" ref="land" @refreshOnLoad="onLoad"></landAdd>
    </div>
</template>
@@ -102,6 +93,7 @@
import { mapGetters } from "vuex"
import { getList } from "@/api/land/land"
import landAdd from "./landAdd"
import fixed from "@/util/mathHandler"
export default {
    components: {
        landAdd,
@@ -110,17 +102,18 @@
    data () {
        return {
            formInline: {
                stype: "0",
                stype: "",
                state: "0",
                keyword: "",
            },
            query: {},
            farm:{},
            value: true,
            farmingCount: 0,
            landVisible: false,
            farmPlanList: [],
            page: {
                pageSize: 8,
                pageSize: 12,
                currentPage: 1,
                total: 0,
            },
@@ -138,9 +131,19 @@
        }
    },
    computed: {
        ...mapGetters(["userInfo"]),
        ...mapGetters(["userInfo","$farmId"]),
    },
    watch: {
        '$farmId':{
        handler (newName, oldName) {
            this.farm.id = newName
            //地块页面
            this.onLoad()
        }
        }
    },
    created () {
        this.farm.id = this.$farmId
        this.onLoad(this.page)
    },
    methods: {
@@ -191,10 +194,17 @@
            })
        },
        onLoad (page, params = {}) {
            if(typeof(page) == "undefined" ){
                page = this.page
            }
            Object.assign(params,{farmId:this.farm.id})
            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)
                })
            })
        },
        //进入地图模式
@@ -219,6 +229,13 @@
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    // .el-page{
    //     text-align: right;
    // }
    // .el-pagination{
    //     text-align: right;
    // }
}
.wraaper-box {
@@ -232,8 +249,8 @@
.landhome {
    padding: 10px;
    wdith: 100%;
    height: 100%;
    width: 100%;
    height: 88%;
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
@@ -312,4 +329,7 @@
        text-align: center;
    }
}
.edit {
    padding-left: 13px;
}
</style>