From e4be7a095f31b76d4f3d60c06eefe774ffd264fc Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Wed, 16 Mar 2022 16:20:18 +0800
Subject: [PATCH] +地图添加面 电子围栏
---
src/views/rail/rail.vue | 252 +++++++++++++++++++++++++++++++++++++-------------
1 files changed, 186 insertions(+), 66 deletions(-)
diff --git a/src/views/rail/rail.vue b/src/views/rail/rail.vue
index eec84b2..be25269 100644
--- a/src/views/rail/rail.vue
+++ b/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>
--
Gitblit v1.9.3