bufen

shuishen

2022-07-18 3d246e2571ca60eb71e5060a1eee2e95e7235ca7

 src/views/land/getMapDataInThere.vue

@@ -1,345 +1,340 @@
<template>
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="notDatas" v-show="isCheck">
      <div style="color: red">*</div>
      未绘画区域
    <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>
    <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";
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,
    name: "getMapData",
    components: {
        MapInThere,
    },
    polygons() {
      if (this.polygons.length > 0) {
        this.isCheck = false;
      }
    computed: {
        ...mapGetters(["rotesData", "pointData", "polygons"]),
    },
  },
  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;
    watch: {
        ourDatas: {
            handler (val) {
                this.checkDom("getMapDataRefs", (dom) => {
                    dom.onceOnlodad(val)
                })
            },
            deep: true,
        },
        polygons () {
            if (this.polygons.length > 0) {
                this.isCheck = 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 += ";";
    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 = ""
            }
          }
          if (kin == "value") {
            value += inItem[kin];
            if (k != itemLength) {
              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,
                })
            }
          }
        }
      }
      return notData.length > 0 ? [names + "not", notData] : [name, value];
            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()
        },
    },
    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;
    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;
  }
    width: 100%;
    height: 100%;
    position: relative;
    .controlMapWindowTitle {
        position: absolute;
        left: calc(50% - 102.5px);
        top: 0;
    }
    .notPath {
        // border-bottom: 0.5px solid red;
    }
}

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

.list-enter-to,
.list-leave {
  opacity: 1;
    opacity: 1;
}
​ .list-enter-active,
.list-leave-active {
  transition: all 0.3s;
    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;
  }
    width: auto;
    height: auto;
    position: absolute;
    top: 5px;
    left: 100px;
    background-color: #fff;
    border-radius: 5px;
    padding: 2px 8px;
    div {
        display: inline;
    }
}
</style>