农场地图展示完善

Administrator

2022-05-11 bcb0b5f05984af58e329404ec8e7b3862878515f

 src/views/farm/getMapDataInThere.vue

@@ -2,7 +2,7 @@
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="notDatas" v-show="isCheck">
      <div style="color:red">*</div>
      <div style="color: red">*</div>
      未绘画区域
    </div>
    <div class="controlMapWindowTitle">
@@ -15,77 +15,6 @@
        >
      </el-button-group>
    </div>
    <!-- <div class="controlMapWindow">
      <div class="controlMapWindowTitle">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-finished"
            @click="openDrawLineMethod"
            :disabled="fromView"
            >新增路线</el-button
          >
          <el-button
            type="primary"
            @click="openDrawPointMethod"
            icon="el-icon-coordinate"
            :disabled="fromView"
            >新增标点</el-button
          >
        </el-button-group>
      </div>
      <div class="controlMapWindowmain">
        <transition-group
          :name="animateName"
          :enter-active-class="animateEnter"
          :leave-active-class="animateLeave"
        >
          <div
            class="getMapData__once"
            v-for="(item, index) in ourDatas"
            :key="index"
          >
            <div class="getMapData_once_label">
              <el-tag> {{ item.label }}</el-tag>
            </div>
            <el-input
              :class="[
                'getMapData_once_name',
                item.notPath == 2 ? 'notPath' : '',
              ]"
              @blur="myRules(index)"
              v-model="item.name"
              placeholder="请输入路径名称"
              :disabled="fromView"
            ></el-input>
            <transition
              :name="animateNames"
              :enter-active-class="animateEnters"
              :leave-active-class="animateLeaves"
            >
              <div class="notPathTitile" v-show="item.notPath == 2">
                请输入名称或选择路径
              </div>
            </transition>
            <el-button
              class="getMapData_once_get"
              :type="item.value ? 'success' : 'primary'"
              :title="item.value ? '重新选择' : '点击选择'"
              :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
              @click="openMap(item.label, index, item.value)"
              :disabled="MapDataShow || fromView"
            ></el-button>
            <el-button
              class="getMapData_once_endBut"
              icon="el-icon-delete"
              circle
              @click="deleteRowOurs(index)"
              :disabled="MapDataShow || fromView"
            ></el-button>
          </div>
        </transition-group>
      </div>
    </div> -->
  </div>
</template>

@@ -95,47 +24,29 @@
export default {
  name: "getMapData",
  components: {
    MapInThere
    MapInThere,
  },
  computed: {
    ...mapGetters(["rotesData", "pointData", "polygons"])
    ...mapGetters(["rotesData", "pointData", "polygons"]),
  },
  watch: {
    ourDatas: {
      handler(val) {
        // console.log("深度监听：", val);
        this.checkDom("getMapDataRefs", dom => {
        this.checkDom("getMapDataRefs", (dom) => {
          dom.onceOnlodad(val);
        });
      },
      deep: true
      deep: true,
    },
    polygons() {
      console.log(this.polygons);
      if (this.polygons.length > 0) {
        this.isCheck = false;
      }
    }
    },
  },
  data() {
    return {
      Refresh: false,
      // routers: [
      //   {
      //     label: "路径1",
      //     value: "",
      //     routerName: "",
      //     notPath: true,
      //   },
      // ],
      // potions: [
      //   {
      //     label: "标点1",
      //     value: "",
      //     potionName: "",
      //     notPath: true,
      //   },
      // ],
      //动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeIn",
@@ -147,68 +58,30 @@
      openTitle: "路径1",
      MapDataShow: false,
      fromView: false,
      ourDatas: [
        // {
        //   label: "路径2",
        //   value:
        //     "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
        //   name: "xxx2",
        //   notPath: false,
        //   isLine: true,
        //   id: 2,
        // },
        // {
        //   label: "路径3",
        //   value:
        //     "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
        //   name: "xxx3",
        //   notPath: false,
        //   isLine: true,
        //   id: 3,
        // },
        // {
        //   label: "标点4",
        //   value: [114.03887343706977, 27.63000553765213],
        //   name: "喜迎校庆选点1",
        //   notPath: false,
        //   isLine: false,
        //   id: 4,
        // },
      ],
      ourDatas: [],
      nowId: 0,
      isCheck: false
      isCheck: false,
    };
  },
  mounted() {
    // this.$emit("setMapData", [this.routers, this.potions]);
    // let that = this;
    // if (that.ourDatas.length != 0) {
    //   for (let k in that.ourDatas) {
    //     that.ourDatas[k].id = +k + 1;
    //   }
    // }
    // this.checkDom("getMapDataRefs", dom => {
    //   dom.addLines(that.polygons);
    // });
    // this.nowId = +this.ourDatas.length + 1;
    if (this.polygons.length > 0) {
      this.doThat(this.polygons);
    }
   
  },
  methods: {
    draw(usePolygons) {
      this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
      this.doThat(usePolygons)
    },
    doThat(val) {
      this.checkDom("getMapDataRefs", dom => {
        dom.addLines(val);
        // 移动位置
        dom.move(val);
      this.checkDom("getMapDataRefs", (dom) => {
          dom.addLines(val);
          // 移动位置
          dom.move(val);
      });
    },
    drawFace() {
      // console.log(this.$refs.getMapDataRefs);
      this.$refs.getMapDataRefs.drawStart();
    },
    giveUp() {
      // console.log(234);
      this.$refs.getMapDataRefs.closeDraw();
    },
    openDrawLineMethod() {
@@ -219,7 +92,7 @@
        name: "",
        notPath: false,
        isLine: true,
        id: +id
        id: +id,
      });
    },
    openDrawPointMethod() {
@@ -230,7 +103,7 @@
        name: "",
        notPath: false,
        isLine: false,
        id: +id
        id: +id,
      });
    },
    deleteRowOurs(index) {
@@ -282,7 +155,7 @@
          name: rname[k],
          notPath: false,
          isLine: true,
          id: this.ourDatas.length
          id: this.ourDatas.length,
        });
      }
      for (let k in p) {
@@ -293,7 +166,7 @@
          name: pname[k],
          notPath: false,
          isLine: false,
          id: this.ourDatas.length
          id: this.ourDatas.length,
        });
      }
      this.nowId = +this.ourDatas.length + 1;
@@ -321,7 +194,6 @@
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
      // console.log(line, point);
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
@@ -331,9 +203,7 @@
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
        }
        // console.log(errorId, "errorId");
        for (let x in this.ourDatas) {
          // console.log(this.ourDatas[x], "x");
          let flog = true;
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
@@ -348,7 +218,6 @@
        }
        return false;
      } else {
        // console.log("通过");
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
        }
@@ -361,7 +230,6 @@
        value = "",
        notData = [];
      let itemLength = item.length - 1;
      // console.log(item, names, 7777);
      for (let k in item) {
        let inItem = item[k];
        for (let kin in inItem) {
@@ -371,7 +239,6 @@
            kin != "isLine" &&
            kin != "id"
          ) {
            // console.log(kin);
            notData.push(inItem.id);
            break;
          }
@@ -418,8 +285,8 @@
      }
      //  首次执行
      checkDom();
    }
  }
    },
  },
};
</script>

@@ -438,71 +305,6 @@
    left: calc(50% - 42px);
    top: 0;
  }
  // .controlMapWindow {
  //   width: 320px;
  //   height: calc(100% - 20px);
  //   // border: 1px solid red;
  //   // box-shadow: 2px 0 15px 2px #acacac;
  //   position: absolute;
  //   left: 10px;
  //   top: 10px;
  //   background-color: #fff;
  //   border-radius: 0 15px 15px 0;
  //   padding: 10px 10px;
  //   overflow: hidden;
  //   // .controlMapWindowTitle {
  //   //   height: 40px;
  //   //   width: 100%;
  //   //   margin-bottom: 5px;
  //   //   @extend .flexCenter;
  //   // }
  //   .controlMapWindowmain {
  //     width: 100%;
  //     height: calc(100% - 45px);
  //     overflow-x: hidden;
  //     overflow-y: scroll;
  //     .getMapData_left {
  //       width: 50%;
  //       height: 40px;
  //       box-sizing: border-box;
  //     }
  //     .getMapData_right {
  //       width: 50%;
  //       height: 40px;
  //       box-sizing: border-box;
  //     }
  //     .getMapData__once {
  //       width: 100%;
  //       height: 40px;
  //       margin-bottom: 10px;
  //       position: relative;
  //       @extend .flexCenter;
  //       flex-direction: row;
  //       .getMapData_once_label {
  //         padding-left: 15px;
  //         width: 90px;
  //         height: 100%;
  //         @extend .flexCenter;
  //         justify-content: space-around;
  //       }
  //       .getMapData_once_name {
  //         width: calc(100% - 130px);
  //       }
  //       .getMapData_once_get {
  //         padding: 6px 16px;
  //         font-size: 20px;
  //       }
  //       .notPathTitile {
  //         position: absolute;
  //         left: 90px;
  //         bottom: -20px;
  //         color: red;
  //         font-size: 1px;
  //       }
  //     }
  //   }
  // }
  // 验证
  .notPath {
    // border-bottom: 0.5px solid red;
  }