+地图添加面 电子围栏

liuyg

2022-03-16 e4be7a095f31b76d4f3d60c06eefe774ffd264fc

 src/views/rail/rail.vue

@@ -3,11 +3,12 @@
    :class="[
      'securityUnit',
      $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : '',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
    ]"
  >
    <avue-crud
      class="tablesss"
      :before-open="beforeOpen"
      :option="option"
      :data="data"
      :page.sync="page"
@@ -35,31 +36,41 @@
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, row }" slot="menu">
      <template slot-scope="{ type, row, index }" slot="menu">
        <el-button
          :type="type"
          size="small"
          icon="el-icon-folder-checked"
          :disabled="row.applyStatus == 4"
          @click="handleAudit(row)"
          @click="handleAudit(row, index)"
          >查看围栏
        </el-button>
      </template>
      <!-- 地图插入 -->
      <template slot-scope="{ type, disabled }" slot="lineForm">
        <div class="mapClassMain" style="width: 1000px; height: 400px">
        <!-- <div class="mapClassMain" style="width: 1000px; height: 400px">
          <Map ref="modalForm" />
        </div>
        </div> -->
        <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
      </template>
    </avue-crud>

  </basic-container>
</template>

<script>
import { getList, add, update, remove, getRailTree } from "@/api/rail/rail";
import getMapDataInThere from "./getMapDataInThere.vue";

import { mapGetters } from "vuex";
export default {
  components: {
    // Map,
    getMapDataInThere
  },
  data() {
    return {
      loading: true,
@@ -68,7 +79,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
        ...this.$store.state.control.changePageSize
      },
      form: {},
      query: {},
@@ -101,10 +112,10 @@
              {
                required: true,
                message: "请输入围栏名称",
                trigger: "click",
              },
                trigger: "click"
              }
            ],
            overHidden: true,
            overHidden: true
          },
          {
            label: "类型",
@@ -117,39 +128,39 @@
            dicData: [
              {
                label: "本单位",
                value: 1,
                value: 1
              },
              {
                label: "分公司",
                value: 2,
                value: 2
              },
              {
                label: "服务单位",
                value: 3,
              },
                value: 3
              }
            ],
            rules: [
              {
                required: true,
                message: "请选择类型",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "企业名称",
            prop: "companyName",
            display:false,
            display: false,
            minWidth: 160,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入企业名称",
                trigger: "click",
              },
                trigger: "click"
              }
            ],
            overHidden: true,
            overHidden: true
          },
          {
            label: "企业名称",
@@ -157,21 +168,19 @@
            span: 12,
            labelWidth: 145,
            type: "tree",
            hide:true,
            hide: true,
            props: {
              label: "title",
              value: "id",
              value: "id"
            },
            rules: [
              {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
              },
                trigger: "blur"
              }
            ],
            dicData: [
              
            ]
            dicData: []
          },
          {
            label: "创建日期",
@@ -180,14 +189,14 @@
            type: "date",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            display:false,
            display: false,
            rules: [
              {
                required: true,
                message: "请选择创建日期",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "路线展示",
@@ -198,65 +207,125 @@
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true,
          },
            addDisplay: true
          }
        ],
        ...this.$store.state.control.clearOtherBut,
      },
        ...this.$store.state.control.clearOtherBut
      }
    };
  },
  created() {
    this.getRailLazyTree();
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    ...mapGetters(["userInfo", "permission", "polygons"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.rail_add, false),
        addBtn: this.vaildData(this.permission.rail_add, true),
        viewBtn: this.vaildData(this.permission.rail_view, false),
        delBtn: this.vaildData(this.permission.rail_delete, false),
        editBtn: this.vaildData(this.permission.rail_edit, false),
        editBtn: this.vaildData(this.permission.rail_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    }
  },
  watch: {
    "form.type": {
      handler(val) {
        var companyIdcolumn = this.findObject(this.option.column, "companyId");
        if(val==1){
            companyIdcolumn.dicData = this.dicData1;
        if (val == 1) {
          companyIdcolumn.dicData = this.dicData1;
        }
        if(val==2){
            companyIdcolumn.dicData = this.dicData2;
        if (val == 2) {
          companyIdcolumn.dicData = this.dicData2;
        }
        if(val==3){
            companyIdcolumn.dicData = this.dicData3;
        if (val == 3) {
          companyIdcolumn.dicData = this.dicData3;
        }
      },
      immediate: true,
    },
      immediate: true
    }
  },
  mounted() {
    this.$store.commit("setWindowSizeHeightAdd");
  },
  methods: {
    beforeOpen(done, type) {
      // console.log(type);
      if (type == "edit") {
        // this.$refs.getMapData.doThat(this.polygons);
        done();
      } else if (type == "add") {
        this.$store.commit("setpolygon", []); //用vuex传最终数据
        done();
      }
    },
    handleAudit(row, index) {
      // console.log(row);
      let usePolygons = row.coordinate
        .split("POLYGON((")[1]
        .split("))")[0]
        .split(",");
      for (let k in usePolygons) {
        usePolygons[k] = {
          lng: +usePolygons[k].split(" ")[0],
          lat: +usePolygons[k].split(" ")[1]
        };
      }
      // console.log(usePolygons);
      this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
      // return;
      this.$refs.crud.rowEdit(row, index);
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
    //dom获取、
    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();
    },
    //获取单位树数据
    getRailLazyTree() {
      let that = this;
      getRailTree(1,this.userInfo.dept_id).then((res) => {
      getRailTree(1, this.userInfo.dept_id).then(res => {
        that.dicData1 = res.data.data;
      });
      getRailTree(2,this.userInfo.dept_id).then((res) => {
      getRailTree(2, this.userInfo.dept_id).then(res => {
        that.dicData2 = res.data.data;
      });
      getRailTree(3,this.userInfo.dept_id).then((res) => {
      getRailTree(3, this.userInfo.dept_id).then(res => {
        that.dicData3 = res.data.data;
      });
    },
@@ -271,18 +340,42 @@
      this.onLoad(this.page, this.query);
    },
    rowSave(form, done, loading) {
      add(form).then((res) => {
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
        return;
      }
      let pol = this.polygons;
      // console.log(pol);
      let polLength = this.polygons.length - 1;
      let usePolygons = "";
      for (let k in pol) {
        usePolygons += pol[k].lng + "," + pol[k].lat;
        if (k != polLength) {
          usePolygons += ";";
        }
      }
      // console.log(form);
      let data = {
        name: form.name,
        type: form.type,
        companyId: form.companyId,
        coordinate: usePolygons
      };
      // return;
      add(data).then(res => {
        if (res.data.success) {
          this.$message({
            message: "操作成功",
            type: "success",
            type: "success"
          });
          this.refreshChange();
          done();
        } else {
          this.$message({
            message: "操作失败",
            type: "warning",
            type: "warning"
          });
          done();
        }
@@ -299,16 +392,36 @@
      this.onLoad(this.page);
    },
    rowUpdate(row, index, done, loading) {
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
        return;
      }
      let pol = this.polygons;
      // console.log(pol);
      let polLength = this.polygons.length - 1;
      let usePolygons = "";
      for (let k in pol) {
        usePolygons += pol[k].lng + "," + pol[k].lat;
        if (k != polLength) {
          usePolygons += ";";
        }
      }
      row.coordinate = usePolygons;
      // console.log(row);
      // loading();
      // return;
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -318,7 +431,7 @@
      this.$confirm("确定删除当前合同信息数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          console.log(row);
@@ -328,7 +441,7 @@
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
        });
    },
@@ -343,10 +456,10 @@
      this.$confirm("确定批量将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids).then((res) => {
          return remove(this.ids).then(res => {
            this.refreshChange();
          });
        })
@@ -354,11 +467,11 @@
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          this.$refs.crudrec.toggleSelection();
        })
        .catch((res) => {});
        .catch(res => {});
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
@@ -376,7 +489,7 @@
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
@@ -384,8 +497,8 @@
        this.$store.commit("setWindowSizeHeightAdd");
        this.loading = false;
      });
    },
  },
    }
  }
};
</script>

@@ -445,4 +558,11 @@
    cursor: pointer;
  }
}

#getMapData {
  width: calc(100% + 90px);
  position: relative;
  left: -90px;
  height: 400px;
}
</style>