地块

tangzy

2022-07-18 ce0d1b5ed54ef4f08ce4d3dad60a9659e5bb57c2

地块

 src/api/land/land.js

@@ -1,69 +1,71 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
    return request({
        url: '/api/land/land/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
  return request({
    url: '/api/land/land/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
    return request({
        url: '/api/land/land/details',
        method: 'get',
        params: {
            id
        }
    })
  return request({
    url: '/api/land/land/details',
    method: 'get',
    params: {
      id
    }
  })
}

export const remove = (ids) => {
    return request({
        url: '/api/land/land/remove',
        method: 'post',
        params: {
            ids,
        }
    })
  return request({
    url: '/api/land/land/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
    return request({
        url: '/api/land/land/save',
        method: 'post',
        data: row
    })
  return request({
    url: '/api/land/land/save',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
    return request({
        url: '/api/land/land/submit',
        method: 'post',
        data: row
    })
export const update = (params) => {
  return request({
    url: '/api/land/land/updateLandAr',
    method: 'post',
    params: {
      ...params,
    }
  })
}

export const getLandList = (userid) => {
    return request({
        url: '/api/land/land/selectLandList',
        method: 'get',
        params: {
            userid
        }
    })
  return request({
    url: '/api/land/land/selectLandList',
    method: 'get',
    params: {
      userid
    }
  })
}

export const selectCount = (farmId) => {
    return request({
        url: '/api/land/land/selectCount',
        method: 'get',
        params: {
          farmId
        }
    })
  return request({
    url: '/api/land/land/selectCount',
    method: 'get',
    params: {
      farmId
    }
  })
}

 src/views/land/LandDetail.vue

@@ -1,255 +1,323 @@
<template>
    <div class="wraaper-box farming-detail-box">
        <div class="dd">
            <div class="da">
                <div class="land-img" @click="mod()">
                    <img :src="url" class="landimg" />
                </div>
                <div class="cent">
                    <div class="l">{{ landName }}</div>
                    <div class="ln">{{ dic }}</div>
                </div>
                <div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
                <div class="dck">所属农场:{{ deptname }}</div>

                <div class="edit">
                    <el-button @click="btnGrounpShow = !btnGrounpShow" icon="el-icon-menu"></el-button>

                    <div v-show="btnGrounpShow" class="btn-grounp">
                        <el-button>删除地块</el-button>
                    </div>
                </div>
            </div>
            <div class="dv">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!-- 种植记录 -->
                    <el-tab-pane label="种养品种" name="tab1">
                        <farmplant></farmplant>
                    </el-tab-pane>
                    <!-- 农事记录 -->
                    <el-tab-pane label="农事记录" name="tab2">
                        <farming></farming>
                    </el-tab-pane>
                    <!-- 采收记录 -->
                    <el-tab-pane label="采收记录" name="tab3">
                        <recovery></recovery>
                    </el-tab-pane>
                </el-tabs>
            </div>
  <div class="wraaper-box farming-detail-box">
    <div class="dd">
      <div class="da">
        <div class="land-img" @click="mod(usePolygons)">
          <img :src="url" class="landimg"/>
        </div>
        <div class="cent">
          <div class="l">{{ landName }}</div>
          <div class="ln">{{ dic }}</div>
        </div>
        <div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
        <div class="dck">所属农场:{{ deptname }}</div>

        <el-dialog
            title="地块位置"
            class="current-map-box"
            :visible.sync="gradeBoxVisible1"
            :modal="true"
            :modal-append-to-body="true"
            :append-to-body="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="dialogBeforeClose"
        >
            <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            <el-button class="save" type="success">保存</el-button>
        </el-dialog>
        <div class="edit">
          <el-button @click="btnGrounpShow = !btnGrounpShow" icon="el-icon-menu"></el-button>

          <div v-show="btnGrounpShow" class="btn-grounp" @click="DelLand(delId)">
            <el-button>删除地块</el-button>
          </div>
        </div>
      </div>
      <div class="dv">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 种植记录 -->
          <el-tab-pane label="种养品种" name="tab1">
            <farmplant></farmplant>
          </el-tab-pane>
          <!-- 农事记录 -->
          <el-tab-pane label="农事记录" name="tab2">
            <farming></farming>
          </el-tab-pane>
          <!-- 采收记录 -->
          <el-tab-pane label="采收记录" name="tab3">
            <recovery></recovery>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-dialog
      title="地块位置"
      class="current-map-box"
      :visible.sync="gradeBoxVisible1"
      :modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="dialogBeforeClose"
    >
      <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
      <el-button class="save" type="success" @click="upLand()">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import {mapGetters} from "vuex"
import farmplant from "@/views/farmplant/farmplant.vue"
import farming from "@/views/farm/farmingrecord.vue"
import recovery from "@/views/recovery/recovery.vue"
import getMapDataInThere from "./getMapDataInThere.vue"
import {remove, update} from "@/api/land/land"

export default {
    components: {
        farmplant,
        farming,
        recovery,
        getMapDataInThere
  components: {
    farmplant,
    farming,
    recovery,
    getMapDataInThere
  },
  data() {
    return {
      farmId: "",
      activeName: "tab1",
      url: "",
      dica: "",
      deptname: "",
      landUnit: "",
      delId: "",
      landArea: "",
      usePolygons: "",
      dic: "",
      formC: {},
      gradeBoxVisible1: false,
      option2: {
        index: true,
        tip: false,
        searchMenuSpan: 6,
        height: 583,
        menuWidth: 300,
        border: true,
        align: "center",
        selection: true,
        column: [
          {
            label: "路线展示",
            labelWidth: "0",
            prop: "line",
            className: "mapClass",
            hide: true,
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true
          }
        ],
      },
      btnGrounpShow: false
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons"]),
  },
  created() {
    this.url = this.$route.query.url
    this.landName = this.$route.query.landName
    this.dic = this.$route.query.dic
    this.landArea = this.$route.query.landArea
    this.dica = this.$route.query.dica
    this.deptname = this.$route.query.deptname
    this.delId = this.$route.query.id
    this.landUnit = this.$route.query.landUnit
    // this.form = res.data.data;
    this.usePolygons = this.$route.query.landRange
      .split("POLYGON((")[1]
      .split("))")[0]
      .split(",")
    for (let k in usePolygons) {
      usePolygons[k] = {
        lng: +usePolygons[k].split(" ")[0],
        lat: +usePolygons[k].split(" ")[1],
      }
    }
  },
  methods: {
    mod(usePolygons) {
      this.gradeBoxVisible1 = true
      this.$refs.getMapData.draw(usePolygons)
    },
    data () {
        return {
            farmId: "",
            activeName: "tab1",
            url: "",
            dica: "",
            deptname: "",
            landArea: "",
            dic: "",
            formC: {},
            gradeBoxVisible1: false,
            option2: {
                index: true,
                tip: false,
                searchMenuSpan: 6,
                height: 583,
                menuWidth: 300,
                border: true,
                align: "center",
                selection: true,
                column: [
                    {
                        label: "路线展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        hide: true,
                        display: true,
                        span: 24,
                        formslot: true,
                        addDisplay: true
                    }
                ],
            },
            btnGrounpShow: false
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
    //删除地块
    DelLand(delId) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(delId);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$router.push({
            path: `/land/cs`,
          });
        });
    },
    //修改地块
    upLand() {
      var params = {}
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygons;
        let polLength = this.polygons.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
    },
    created () {
        this.url = this.$route.query.url
        this.landName = this.$route.query.landName
        this.dic = this.$route.query.dic
        this.landArea = this.$route.query.landArea
        this.dica = this.$route.query.dica
        this.deptname = this.$route.query.deptname
        // this.form = res.data.data;
        let usePolygons = this.$route.query.landRange
            .split("POLYGON((")[1]
            .split("))")[0]
            .split(",")
        for (let k in usePolygons) {
            usePolygons[k] = {
                lng: +usePolygons[k].split(" ")[0],
                lat: +usePolygons[k].split(" ")[1],
            }
        }
        this.$refs.getMapData.draw(usePolygons)
    },
    methods: {
        mod () {
            this.formC = {}
            this.gradeBoxVisible1 = true
        },
    },
    watch: {},
        //设置坐标点
        params.userId = this.userInfo.user_id;
        params.landRange = usePolygons;
        params.id = this.delId,
          params.landUnit = this.landUnit
      }
      // update(params).then(() => {
      //   that.$refs.form.resetFields();
      //   that.visible = false;
      //   this.$message({
      //     type: "success",
      //     message: "操作成功!"
      //   });
      //   done();
      // }, error => {
      //   loading();
      //   window.console.log(error);
      // });
    }
  },
  watch: {},
}
</script>

<style scoped lang="scss">
#getMapData {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.wraaper-box {
    padding: 0 !important;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
  padding: 0 !important;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
}

.land-img {
    width: 200px;
    height: 200px;
    margin-top: 25px;
    margin-left: 60px;
    float: left;
  width: 200px;
  height: 200px;
  margin-top: 25px;
  margin-left: 60px;
  float: left;
}

.cent {
    width: 250px;
    height: 40px;
    margin-top: 25px;
    margin-left: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
  width: 250px;
  height: 40px;
  margin-top: 25px;
  margin-left: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
}

.l {
    width: 120px;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
  width: 120px;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
}

.ln {
    width: 120px;
    height: 40px;
    margin-left: 2px;
    float: left;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    vertical-align: 1px;
    border-radius: 3px;
  width: 120px;
  height: 40px;
  margin-left: 2px;
  float: left;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  vertical-align: 1px;
  border-radius: 3px;
}

.dc {
    width: 151px;
    margin-top: 20px;
    margin-left: 340px;
    width: 175px;
  width: 151px;
  margin-top: 20px;
  margin-left: 340px;
  width: 175px;
}

.dck {
    width: 151px;
    margin-left: 340px;
    width: 175px;
  width: 151px;
  margin-left: 340px;
  width: 175px;
}

.landimg {
    width: 200px;
    height: 200px;
  width: 200px;
  height: 200px;
}

.dd {
    padding: 10px;
    wdith: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  padding: 10px;
  wdith: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.da {
    position: relative;
    width: 100%;
    line-height: 60px;
    background: #fff;
  position: relative;
  width: 100%;
  line-height: 60px;
  background: #fff;

    .edit {
        position: absolute;
        top: 25px;
        right: 60px;
  .edit {
    position: absolute;
    top: 25px;
    right: 60px;

        .btn-grounp {
            padding: 0 10px;
            position: absolute;
            top: 40px;
            right: 60px;
            background: #fff;
            box-shadow: 0 0 10px 1px #ccc;
        }
    .btn-grounp {
      padding: 0 10px;
      position: absolute;
      top: 40px;
      right: 60px;
      background: #fff;
      box-shadow: 0 0 10px 1px #ccc;
    }
  }
}

.dv {
    flex: 1;
    line-height: 60px;
    background: #fff;
    width: 100%;
    overflow: hidden;
  flex: 1;
  line-height: 60px;
  background: #fff;
  width: 100%;
  overflow: hidden;
}
</style>