bufen

shuishen

2022-07-18 3d246e2571ca60eb71e5060a1eee2e95e7235ca7

 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>