From 3d246e2571ca60eb71e5060a1eee2e95e7235ca7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 18 Jul 2022 11:55:42 +0800
Subject: [PATCH] bufen
---
src/views/land/cs.vue | 511 ++++++++++++++++++++++++++++----------------------------
1 files changed, 258 insertions(+), 253 deletions(-)
diff --git a/src/views/land/cs.vue b/src/views/land/cs.vue
index 629e934..088b63e 100644
--- a/src/views/land/cs.vue
+++ b/src/views/land/cs.vue
@@ -1,281 +1,286 @@
<template>
- <div class="wraaper-box">
- <div class="search">
- <div style="float: left">
- <div style="float: left">
- <el-select
- v-model="formInline.stype"
- placeholder="全部分类"
- size="small"
- @change="stypeChange"
- >
- <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>
- <el-option label="鱼塘" value="3"></el-option>
- <el-option label="山地" value="4"></el-option>
- <el-option label="养殖区" value="4"></el-option>
- </el-select>
- </div>
-<!-- <div style="float: left; margin-left: 15px">-->
-<!-- <el-select-->
-<!-- v-model="formInline.state"-->
-<!-- size="small"-->
-<!-- placeholder="有库存"-->
-<!-- @change="stateChange"-->
-<!-- >-->
-<!-- <el-option label="全部" value=""></el-option>-->
-<!-- <el-option label="有库存" value="0"></el-option>-->
-<!-- <el-option label="无库存" value="1"></el-option>-->
-<!-- </el-select>-->
-<!-- </div>-->
- <div style="float: left; margin-left: 15px">
- <el-input
- v-model="formInline.keyword"
- size="small"
- placeholder="请输入名称"
- @input="keywordChange"
- clearable
- ></el-input>
- </div>
- </div>
- <div>
- <el-button size="small"
- ><span style="color: #5abf78" @click="out(row)">进入地图模式</span></el-button
- >
- <el-button type="success" size="small" @click="land" style="margin-right: 50px;width: 80px;">圈地</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 class="wraaper-box">
+ <div class="search">
+ <div style="float: left">
+ <div style="float: left">
+ <el-select
+ v-model="formInline.stype"
+ placeholder="全部分类"
+ size="small"
+ @change="stypeChange"
+ >
+ <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>
+ <el-option label="鱼塘" value="3"></el-option>
+ <el-option label="山地" value="4"></el-option>
+ <el-option label="养殖区" value="4"></el-option>
+ </el-select>
+ </div>
+ <!-- <div style="float: left; margin-left: 15px">-->
+ <!-- <el-select-->
+ <!-- v-model="formInline.state"-->
+ <!-- size="small"-->
+ <!-- placeholder="有库存"-->
+ <!-- @change="stateChange"-->
+ <!-- >-->
+ <!-- <el-option label="全部" value=""></el-option>-->
+ <!-- <el-option label="有库存" value="0"></el-option>-->
+ <!-- <el-option label="无库存" value="1"></el-option>-->
+ <!-- </el-select>-->
+ <!-- </div>-->
+ <div style="float: left; margin-left: 15px">
+ <el-input
+ v-model="formInline.keyword"
+ size="small"
+ placeholder="请输入名称"
+ @input="keywordChange"
+ clearable
+ ></el-input>
+ </div>
</div>
- </div>
+ <div>
+ <el-button size="small">
+ <span style="color: #5abf78" @click="out(row)">进入地图模式</span>
+ </el-button>
+ <el-button
+ type="success"
+ size="small"
+ @click="land"
+ style="margin-right: 50px;width: 80px;"
+ >圈地</el-button>
+ </div>
</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">
+ <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>
- <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>
<script>
-import { mapGetters } from "vuex";
-import {getList} from "@/api/land/land";
-import landAdd from "./landAdd";
+import { mapGetters } from "vuex"
+import { getList } from "@/api/land/land"
+import landAdd from "./landAdd"
export default {
- components: {
- landAdd,
- },
- name: "wel",
- data() {
- return {
- formInline: {
- stype: "0",
- state: "0",
- keyword: "",
- },
- query: {},
- value:false,
- farmingCount:0,
- landVisible: false,
- farmPlanList: [],
- page: {
- pageSize: 4,
- currentPage: 1,
- total: 0,
- },
- option: {
- labelWidth: 80,
- span:6,
- column: [
- {
- label: '地块类型',
- prop: 'search',
- search: true,
- }
- ]
- },
- };
- },
- computed: {
- ...mapGetters(["userInfo"]),
- },
- created() {
- this.onLoad();
- },
- methods: {
- //圈地
- land() {
- this.landVisible = true;
- this.$nextTick(() => {
- this.$refs.land.init();
- });
+ components: {
+ landAdd,
},
- //农资类型select 改变事件
- stypeChange(value) {
- this.query["landType"] = value;
- this.onLoad(this.page, this.query);
+ name: "wel",
+ data () {
+ return {
+ formInline: {
+ stype: "0",
+ state: "0",
+ keyword: "",
+ },
+ query: {},
+ value: false,
+ farmingCount: 0,
+ landVisible: false,
+ farmPlanList: [],
+ page: {
+ pageSize: 4,
+ currentPage: 1,
+ total: 0,
+ },
+ option: {
+ labelWidth: 80,
+ span: 6,
+ column: [
+ {
+ label: '地块类型',
+ prop: 'search',
+ search: true,
+ }
+ ]
+ },
+ }
},
- //库存 select 改变事件
- stateChange(value) {
- this.query["state"] = value;
- this.onLoad(this.page, this.query);
+ computed: {
+ ...mapGetters(["userInfo"]),
},
- //keywordChange 输入事件
- keywordChange(value) {
- this.query["landName"] = value;
- this.onLoad(this.page, this.query);
+ created () {
+ this.onLoad()
},
- //分页
- handleSizeChange(val) {
- this.page.pageSize = val;
- this.onLoad(this.page);
- },
- //改变页码
- handleCurrentChange(val) {
- this.page.currentPage = val;
- this.onLoad(this.page);
- },
- landInfo(item){
- this.$router.push({
- path: `/LandDetail`,
- query: item,
- });
- },
- onLoad(page, params = {}) {
- getList(1, 10, Object.assign(params, this.query)).then(res => {
- const data = res.data.data;
+ methods: {
+ //圈地
+ land () {
+ this.landVisible = true
+ this.$nextTick(() => {
+ this.$refs.land.init()
+ })
+ },
+ //农资类型select 改变事件
+ stypeChange (value) {
+ this.query["landType"] = value
+ this.onLoad(this.page, this.query)
+ },
+ //库存 select 改变事件
+ stateChange (value) {
+ this.query["state"] = value
+ this.onLoad(this.page, this.query)
+ },
+ //keywordChange 输入事件
+ keywordChange (value) {
+ this.query["landName"] = value
+ this.onLoad(this.page, this.query)
+ },
+ //分页
+ handleSizeChange (val) {
+ this.page.pageSize = val
+ this.onLoad(this.page)
+ },
+ //改变页码
+ handleCurrentChange (val) {
+ this.page.currentPage = val
+ this.onLoad(this.page)
+ },
+ landInfo (item) {
+ this.$router.push({
+ path: `/LandDetail`,
+ query: item,
+ })
+ },
+ onLoad (page, params = {}) {
+ getList(1, 10, Object.assign(params, this.query)).then(res => {
+ const data = res.data.data
- this.farmPlanList = data.records;
- });
- }
- },
+ this.farmPlanList = data.records
+ })
+ }
+ },
};
</script>
<style lang="scss" scope>
.el-font-size {
- font-size: 14px;
+ font-size: 14px;
}
.search {
- padding-top: 40px;
- width: 98%;
- margin: 0 auto;
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
-}
-
-.wraaper-box {
- padding: 0 !important;
- position: absolute;
- top: 40px;
- left: 0;
- width: 100%;
- height: calc(100% - 40px);
-}
-
-.landhome {
- padding: 10px;
- wdith: 100%;
- height: 100%;
- display: flex;
- box-sizing: border-box;
- flex-wrap: wrap;
- overflow-y: auto;
-
- .land {
- margin: 10px;
- width: 236px;
- height: 340px;
- border-radius: 2px 2px 0px 0px;
- cursor: pointer;
-
- .land-img {
- width: 100%;
- height: 280px;
- margin: 0 auto;
- text-align: center;
-
- .landimg {
- width: 100%;
- height:280px;
- //border-radius: 100px;
- //margin-top: 25px;
- //margin-left: -25px;
- }
- }
-
- .text {
- padding: 0 10px;
- display: flex;
- height: 60px;
- line-height: 60px;
- background: #fff;
-
- .land-name {
- flex: 1;
- text-align: left;
- font-size: 14px;
- }
- .land-area {
- width: 60px;
- position: relative;
- text-align: center;
- font-size: 14px;
-
- .box {
- position: absolute;
- top: 0;
- right: 0;
- left: 1;
- bottom: 0;
- margin: auto;
- width: 80px;
- height: 24px;
- line-height: 24px;
- border: 1px solid #64c3a4;
- color: #64c3a4;
- border-radius: 30px;
- }
- }
- }
-
-
-
- }
- .search {
padding-top: 40px;
width: 98%;
margin: 0 auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
- margin-top: -25px;
- }
- .el-page {
- padding-top: 30px;
- text-align: center;
- }
+}
+
+.wraaper-box {
+ padding: 0 !important;
+ position: absolute;
+ top: 40px;
+ left: 0;
+ width: 100%;
+ height: calc(100% - 40px);
+}
+
+.landhome {
+ padding: 10px;
+ wdith: 100%;
+ height: 100%;
+ display: flex;
+ box-sizing: border-box;
+ flex-wrap: wrap;
+ overflow-y: auto;
+
+ .land {
+ margin: 10px;
+ width: 236px;
+ height: 340px;
+ border-radius: 2px 2px 0px 0px;
+ cursor: pointer;
+
+ .land-img {
+ width: 100%;
+ height: 280px;
+ margin: 0 auto;
+ text-align: center;
+
+ .landimg {
+ width: 100%;
+ height: 280px;
+ //border-radius: 100px;
+ //margin-top: 25px;
+ //margin-left: -25px;
+ }
+ }
+
+ .text {
+ padding: 0 10px;
+ display: flex;
+ height: 60px;
+ line-height: 60px;
+ background: #fff;
+
+ .land-name {
+ flex: 1;
+ text-align: left;
+ font-size: 14px;
+ }
+ .land-area {
+ width: 60px;
+ position: relative;
+ text-align: center;
+ font-size: 14px;
+
+ .box {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 1;
+ bottom: 0;
+ margin: auto;
+ width: 80px;
+ height: 24px;
+ line-height: 24px;
+ border: 1px solid #64c3a4;
+ color: #64c3a4;
+ border-radius: 30px;
+ }
+ }
+ }
+ }
+ .search {
+ padding-top: 40px;
+ width: 98%;
+ margin: 0 auto;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ margin-top: -25px;
+ }
+ .el-page {
+ padding-top: 30px;
+ text-align: center;
+ }
}
</style>
--
Gitblit v1.9.3