解数据

shuishen

2022-07-18 0ddaebe0030d7fa7545f20ce894861856a35bf4c

解数据

 src/views/land/LandDetail.vue

@@ -1,323 +1,317 @@
<template>
  <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>
    <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>

        <div class="edit">
          <el-button @click="btnGrounpShow = !btnGrounpShow" icon="el-icon-menu"></el-button>
                <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 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>
      </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>

        <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>

    <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"
import { remove, update } from "@/api/land/land"

export default {
  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)
    components: {
        farmplant,
        farming,
        recovery,
        getMapDataInThere
    },
    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 += ";";
          }
    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
        }
        //设置坐标点
        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: {},
    },
    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(",")
    },
    methods: {
        mod (usePolygons) {
            this.gradeBoxVisible1 = true
            this.$refs.getMapData.draw(usePolygons)
        },
        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 += ";"
                    }
                }
                //设置坐标点
                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>

 src/views/land/getMapDataInThere.vue

@@ -63,8 +63,20 @@
    },
    methods: {
        draw (usePolygons) {
            this.$store.commit("setpolygon", usePolygons) //用vuex传最终数据
            this.doThat(usePolygons)

            let arr = []

            usePolygons.forEach(item => {
                arr.push({
                    lng: item.split(' ')[0],
                    lat: item.split(' ')[1]
                })
            })

            console.log(arr, 23)

            this.$store.commit("setpolygon", arr) //用vuex传最终数据
            this.doThat(arr)
        },
        doThat (val) {
            this.checkDom("getMapDataRefs", (dom) => {