智慧农业后台管理页面
shuishen
2022-07-18 3d246e2571ca60eb71e5060a1eee2e95e7235ca7
src/views/land/getMapDataInThere.vue
@@ -2,25 +2,20 @@
  <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">
      <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 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";
import { mapGetters } from "vuex"
import MapInThere from "@/components/map/mainInThere.vue"
export default {
  name: "getMapData",
  components: {
@@ -33,14 +28,14 @@
    ourDatas: {
      handler(val) {
        this.checkDom("getMapDataRefs", (dom) => {
          dom.onceOnlodad(val);
        });
                    dom.onceOnlodad(val)
                })
      },
      deep: true,
    },
    polygons() {
      if (this.polygons.length > 0) {
        this.isCheck = false;
                this.isCheck = false
      }
    },
  },
@@ -61,31 +56,31 @@
      ourDatas: [],
      nowId: 0,
      isCheck: false,
    };
        }
  },
  mounted() {
   
  },
  methods: {
    draw(usePolygons) {
      this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
            this.$store.commit("setpolygon", usePolygons) //用vuex传最终数据
      this.doThat(usePolygons)
    },
    doThat(val) {
      this.checkDom("getMapDataRefs", (dom) => {
          dom.addLines(val);
                dom.addLines(val)
          // 移动位置
          dom.move(val);
      });
                dom.move(val)
            })
    },
    drawFace() {
      this.$refs.getMapDataRefs.drawStart();
            this.$refs.getMapDataRefs.drawStart()
    },
    giveUp() {
      this.$refs.getMapDataRefs.closeDraw();
            this.$refs.getMapDataRefs.closeDraw()
    },
    openDrawLineMethod() {
      let id = this.nowId++;
            let id = this.nowId++
      this.ourDatas.push({
        label: "路径" + +id,
        value: "",
@@ -93,10 +88,10 @@
        notPath: false,
        isLine: true,
        id: +id,
      });
            })
    },
    openDrawPointMethod() {
      let id = this.nowId++;
            let id = this.nowId++
      this.ourDatas.push({
        label: "标点" + +id,
        value: "",
@@ -104,50 +99,50 @@
        notPath: false,
        isLine: false,
        id: +id,
      });
            })
    },
    deleteRowOurs(index) {
      this.ourDatas.splice(index, 1);
            this.ourDatas.splice(index, 1)
    },
    backMapDataOurData(val, index) {
      if (val == "line") {
        this.ourDatas[index].value = this.rotesData;
                this.ourDatas[index].value = this.rotesData
      } else if (val == "point") {
        this.ourDatas[index].value = this.pointData;
                this.ourDatas[index].value = this.pointData
      } else if (val == "notData") {
        this.ourDatas[index].value = "";
                this.ourDatas[index].value = ""
      }
      //单个验证
      this.myRules(index);
            this.myRules(index)
    },
    //以上是添加数据集方法
    //选择map数据
    openMap(val, num, value) {
      this.MapDataShow = true;
      this.openTitle = val;
      this.$refs.getMapDataRefs.init(val, num, value);
            this.MapDataShow = true
            this.openTitle = val
            this.$refs.getMapDataRefs.init(val, num, value)
    },
    closeOpenedMap() {
      this.MapDataShow = false;
            this.MapDataShow = false
      // this.openTitle = "";
    },
    //下面是旧代码
    editInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
            this.reverseMapData(val)
    },
    viewInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
      this.fromView = true; //查看数据不可改
            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 = [];
                p = val[1][1].split(";")
            this.ourDatas = []
      for (let k in r) {
        this.ourDatas.push({
          label: "路径" + (+k + 1),
@@ -156,10 +151,10 @@
          notPath: false,
          isLine: true,
          id: this.ourDatas.length,
        });
                })
      }
      for (let k in p) {
        let potion = p[k].split(",");
                let potion = p[k].split(",")
        this.ourDatas.push({
          label: "标点" + (+k + 1),
          value: [+potion[0], +potion[1]],
@@ -167,71 +162,71 @@
          notPath: false,
          isLine: false,
          id: this.ourDatas.length,
        });
                })
      }
      this.nowId = +this.ourDatas.length + 1;
            this.nowId = +this.ourDatas.length + 1
    },
    myRules(index) {
      //单个验证
      if (this.ourDatas[index].name && this.ourDatas[index].value) {
        this.ourDatas[index].notPath = false;
                this.ourDatas[index].notPath = false
      } else {
        this.ourDatas[index].notPath = 2;
                this.ourDatas[index].notPath = 2
      }
    },
    //自定义验证
    myRulesUse() {
      //把一个数组拆开两个来对应之前的数据
      let ourData = this.ourDatas;
      let lineBefor = [];
      let pointBefor = [];
            let ourData = this.ourDatas
            let lineBefor = []
            let pointBefor = []
      for (let o in ourData) {
        if (ourData[o].isLine) {
          lineBefor.push(ourData[o]);
                    lineBefor.push(ourData[o])
        } else {
          pointBefor.push(ourData[o]);
                    pointBefor.push(ourData[o])
        }
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
            let line = this.changeMapData(lineBefor, "name")
            let point = this.changeMapData(pointBefor, "name")
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
                let errorId = []
        if (line[0] == "namenot") {
          errorId.push(...line[1]);
                    errorId.push(...line[1])
        }
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
                    errorId.push(...point[1])
        }
        for (let x in this.ourDatas) {
          let flog = true;
                    let flog = true
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
              flog = false;
                            flog = false
            }
          }
          if (flog) {
            this.ourDatas[x].notPath = false;
                        this.ourDatas[x].notPath = false
          } else {
            this.ourDatas[x].notPath = 2;
                        this.ourDatas[x].notPath = 2
          }
        }
        return false;
                return false
      } else {
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
                    this.ourDatas[i].notPath = false
        }
        return [line, point];
                return [line, point]
      }
    },
    //规则
    changeMapData(item, names) {
      let name = "",
        value = "",
        notData = [];
      let itemLength = item.length - 1;
                notData = []
            let itemLength = item.length - 1
      for (let k in item) {
        let inItem = item[k];
                let inItem = item[k]
        for (let kin in inItem) {
          if (
            inItem[kin] == "" &&
@@ -239,52 +234,52 @@
            kin != "isLine" &&
            kin != "id"
          ) {
            notData.push(inItem.id);
            break;
                        notData.push(inItem.id)
                        break
          }
          if (kin == names) {
            name += inItem[kin];
                        name += inItem[kin]
            if (k != itemLength) {
              name += ";";
                            name += ";"
            }
          }
          if (kin == "value") {
            value += inItem[kin];
                        value += inItem[kin]
            if (k != itemLength) {
              value += ";";
                            value += ";"
            }
          }
        }
      }
      return notData.length > 0 ? [names + "not", notData] : [name, value];
            return notData.length > 0 ? [names + "not", notData] : [name, value]
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
            let that = this
            var timer = null
      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
                let dom = that.$refs[name]
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
                        clearTimeout(timer)
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
                        fn(dom)
                        return
          } else {
            return dom;
                        return dom
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
                    timer = setTimeout(checkDom, 100)
        }
      }
      //  首次执行
      checkDom();
            checkDom()
    },
  },
};
@@ -302,7 +297,7 @@
  position: relative;
  .controlMapWindowTitle {
    position: absolute;
    left: calc(50% - 42px);
        left: calc(50% - 102.5px);
    top: 0;
  }
  .notPath {