From fd2819390afbff0792115c90c4eb3228215c9bb2 Mon Sep 17 00:00:00 2001
From: tangzy <tangzy123456>
Date: Wed, 11 May 2022 15:06:23 +0800
Subject: [PATCH] 地块管理添加地图
---
src/views/land/getMapDataInThere.vue | 345 +++++++++++++++++++++++
src/views/land/land.vue | 498 +++++++++++++++++---------------
2 files changed, 611 insertions(+), 232 deletions(-)
diff --git a/src/views/land/getMapDataInThere.vue b/src/views/land/getMapDataInThere.vue
new file mode 100644
index 0000000..d1a0abf
--- /dev/null
+++ b/src/views/land/getMapDataInThere.vue
@@ -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>
diff --git a/src/views/land/land.vue b/src/views/land/land.vue
index ddc17af..aa1011c 100644
--- a/src/views/land/land.vue
+++ b/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>
--
Gitblit v1.9.3