地块管理添加地图

tangzy

2022-05-11 fd2819390afbff0792115c90c4eb3228215c9bb2

地块管理添加地图

 src/views/land/getMapDataInThere.vue

New file
@@ -0,0 +1,345 @@
<template>
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="notDatas" v-show="isCheck">
      <div style="color: red">*</div>
      未绘画区域
    </div>
    <div class="controlMapWindowTitle">
      <el-button-group>
        <el-button type="primary" icon="el-icon-finished" @click="drawFace"
          >绘画区域</el-button
        >
        <el-button type="danger" @click="giveUp" icon="el-icon-close"
          >取消</el-button
        >
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MapInThere from "@/components/map/mainInThere.vue";
export default {
  name: "getMapData",
  components: {
    MapInThere,
  },
  computed: {
    ...mapGetters(["rotesData", "pointData", "polygons"]),
  },
  watch: {
    ourDatas: {
      handler(val) {
        this.checkDom("getMapDataRefs", (dom) => {
          dom.onceOnlodad(val);
        });
      },
      deep: true,
    },
    polygons() {
      if (this.polygons.length > 0) {
        this.isCheck = false;
      }
    },
  },
  data() {
    return {
      Refresh: false,
      //动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeIn",
      animateLeave: "animated fadeOut",
      //未输入动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeInDown",
      animateLeave: "animated fadeOut",
      openTitle: "路径1",
      MapDataShow: false,
      fromView: false,
      ourDatas: [],
      nowId: 0,
      isCheck: false,
    };
  },
  mounted() {
   
  },
  methods: {
    draw(usePolygons) {
      this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
      this.doThat(usePolygons)
    },
    doThat(val) {
      this.checkDom("getMapDataRefs", (dom) => {
          dom.addLines(val);
          // 移动位置
          dom.move(val);
      });
    },
    drawFace() {
      this.$refs.getMapDataRefs.drawStart();
    },
    giveUp() {
      this.$refs.getMapDataRefs.closeDraw();
    },
    openDrawLineMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "路径" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: true,
        id: +id,
      });
    },
    openDrawPointMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "标点" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: false,
        id: +id,
      });
    },
    deleteRowOurs(index) {
      this.ourDatas.splice(index, 1);
    },
    backMapDataOurData(val, index) {
      if (val == "line") {
        this.ourDatas[index].value = this.rotesData;
      } else if (val == "point") {
        this.ourDatas[index].value = this.pointData;
      } else if (val == "notData") {
        this.ourDatas[index].value = "";
      }
      //单个验证
      this.myRules(index);
    },
    //以上是添加数据集方法
    //选择map数据
    openMap(val, num, value) {
      this.MapDataShow = true;
      this.openTitle = val;
      this.$refs.getMapDataRefs.init(val, num, value);
    },
    closeOpenedMap() {
      this.MapDataShow = false;
      // this.openTitle = "";
    },
    //下面是旧代码
    editInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
    },
    viewInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
      this.fromView = true; //查看数据不可改
    },
    reverseMapData(val, label) {
      //解释数据
      let rname = val[0][0].split(";"),
        r = val[0][1].split(";"),
        pname = val[1][0].split(";"),
        p = val[1][1].split(";");
      this.ourDatas = [];
      for (let k in r) {
        this.ourDatas.push({
          label: "路径" + (+k + 1),
          value: r[k],
          name: rname[k],
          notPath: false,
          isLine: true,
          id: this.ourDatas.length,
        });
      }
      for (let k in p) {
        let potion = p[k].split(",");
        this.ourDatas.push({
          label: "标点" + (+k + 1),
          value: [+potion[0], +potion[1]],
          name: pname[k],
          notPath: false,
          isLine: false,
          id: this.ourDatas.length,
        });
      }
      this.nowId = +this.ourDatas.length + 1;
    },
    myRules(index) {
      //单个验证
      if (this.ourDatas[index].name && this.ourDatas[index].value) {
        this.ourDatas[index].notPath = false;
      } else {
        this.ourDatas[index].notPath = 2;
      }
    },
    //自定义验证
    myRulesUse() {
      //把一个数组拆开两个来对应之前的数据
      let ourData = this.ourDatas;
      let lineBefor = [];
      let pointBefor = [];
      for (let o in ourData) {
        if (ourData[o].isLine) {
          lineBefor.push(ourData[o]);
        } else {
          pointBefor.push(ourData[o]);
        }
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
        if (line[0] == "namenot") {
          errorId.push(...line[1]);
        }
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
        }
        for (let x in this.ourDatas) {
          let flog = true;
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
              flog = false;
            }
          }
          if (flog) {
            this.ourDatas[x].notPath = false;
          } else {
            this.ourDatas[x].notPath = 2;
          }
        }
        return false;
      } else {
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
        }
        return [line, point];
      }
    },
    //规则
    changeMapData(item, names) {
      let name = "",
        value = "",
        notData = [];
      let itemLength = item.length - 1;
      for (let k in item) {
        let inItem = item[k];
        for (let kin in inItem) {
          if (
            inItem[kin] == "" &&
            kin != "notPath" &&
            kin != "isLine" &&
            kin != "id"
          ) {
            notData.push(inItem.id);
            break;
          }
          if (kin == names) {
            name += inItem[kin];
            if (k != itemLength) {
              name += ";";
            }
          }
          if (kin == "value") {
            value += inItem[kin];
            if (k != itemLength) {
              value += ";";
            }
          }
        }
      }
      return notData.length > 0 ? [names + "not", notData] : [name, value];
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
      //  首次执行
      checkDom();
    },
  },
};
</script>

<style lang="scss">
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.getMapData {
  width: 100%;
  height: 100%;
  position: relative;
  .controlMapWindowTitle {
    position: absolute;
    left: calc(50% - 42px);
    top: 0;
  }
  .notPath {
    // border-bottom: 0.5px solid red;
  }
}

//过度动画
.list-enter {
  opacity: 0;
  transform: translateY(10px);
}
.list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.list-enter-to,
.list-leave {
  opacity: 1;
}
​ .list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}

.notDatas {
  width: auto;
  height: auto;
  position: absolute;
  top: 5px;
  left: 100px;
  background-color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  div {
    display: inline;
  }
}
</style>

 src/views/land/land.vue

@@ -27,249 +27,283 @@
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{ type, disabled }" slot="lineForm">
        <div class="mapClassMain" style="width: 860px; height: 400px">
          <Map ref="modalForm" />
        </div>
      <template slot-scope="{}" slot="position">
        <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/land/land";
  import {mapGetters} from "vuex";
import {getList, getDetail, add, update, remove} from "@/api/land/land";
import {mapGetters} from "vuex";
import getMapDataInThere from "./getMapDataInThere.vue";

  export default {
    data() {
export default {
  components: {
    getMapDataInThere,
  },
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        align: "center",
        addBtn: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          // {
          //   label: "用户id",
          //   prop: "userId",
          //   rules: [{
          //     required: true,
          //     message: "请输入用户id",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "地块名称",
            search: true,
            prop: "landName",
            rules: [{
              required: true,
              message: "请输入地块名称",
              trigger: "blur"
            }]
          },
          {
            label: "地块类型",
            type: "select",
            prop: "landType",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            search: true,
            rules: [{
              required: true,
              message: "请选择地块类型",
              trigger: "blur"
            }]
          },
          {
            label: "地块面积",
            span: 6,
            disabled: true,
            gutter: 20,
            tip: '绘制轮廓后自动计算',
            prop: "landArea",
          },
          // {
          //   label: "地块范围",
          //   prop: "landRange",
          // },
          // {
          //   label: "状态 （0：已耕种 1：未耕种）",
          //   prop: "type",
          //   rules: [{
          //     required: true,
          //     message: "请输入状态 （0：已耕种 1：未耕种）",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "单位",
            prop: "landUnit",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            span: 5,
          },
          {
            label: "农场位置",
            prop: "position",
            className: "mapClass",
            span: 24,
            formslot: true,
            labelWidth: 145,
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons"]),
    permissionList() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          align: "center",
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
            // {
            //   label: "用户id",
            //   prop: "userId",
            //   rules: [{
            //     required: true,
            //     message: "请输入用户id",
            //     trigger: "blur"
            //   }]
            // },
            {
              label: "地块名称",
              search: true,
              prop: "landName",
              rules: [{
                required: true,
                message: "请输入地块名称",
                trigger: "blur"
              }]
            },
            {
              label: "地块类型",
              type: "select",
              prop: "landType",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              search: true,
              rules: [{
                required: true,
                message: "请选择地块类型",
                trigger: "blur"
              }]
            },
            {
              label: "地块面积",
              span:6,
              disabled:true,
              gutter:20,
              tip:'绘制轮廓后自动计算',
              prop: "landArea",
            },
            // {
            //   label: "地块范围",
            //   prop: "landRange",
            // },
            // {
            //   label: "状态 （0：已耕种 1：未耕种）",
            //   prop: "type",
            //   rules: [{
            //     required: true,
            //     message: "请输入状态 （0：已耕种 1：未耕种）",
            //     trigger: "blur"
            //   }]
            // },
            {
              label: "单位",
              prop: "landUnit",
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              span:5,
            },
          ]
        },
        data: []
        addBtn: this.vaildData(this.permission.land_add, false),
        viewBtn: this.vaildData(this.permission.land_view, false),
        delBtn: this.vaildData(this.permission.land_delete, false),
        editBtn: this.vaildData(this.permission.land_edit, false)
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.land_add, false),
          viewBtn: this.vaildData(this.permission.land_view, false),
          delBtn: this.vaildData(this.permission.land_delete, false),
          editBtn: this.vaildData(this.permission.land_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  };
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      if (type == "add") {
        this.$store.commit("setpolygon", []); //用vuex传最终数据
        done();
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },

  }
};
</script>

<style>
<style lang="scss" scoped>
.mapClass div label {
  display: none;
}

#getMapData {
  width: 80%;
  position: relative;
  height: 500px;
  top: 10px;
}
</style>