kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into vite

Browse Source 
# Conflicts:
#	package.json
#	packages/bigscreen/designer/AppDesigner.vue
#	packages/bigscreen/designer/components/Add.vue
#	packages/bigscreen/designer/components/Layout.vue
#	packages/bigscreen/designer/components/RenderElement.vue
#	packages/bigscreen/viewer/AppGigscreenViewer.vue
#	project/dvui/layout/AiDvPanel/AiDvPanel.vue
#	project/dvui/layout/AiDvWrapper/AiDvWrapper.vue
This commit is contained in:
aixianling
2022-05-09 14:36:16 +08:00
parent 8744f115cf c3d92c18d0
commit 2f79210970
41 changed files with 1299 additions and 3037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
project/sass/apps/AppCommunityManage/components/Add.vue
View File

@@ -137,9 +137,9 @@ export default {
format (list) {
return list.map(item => {
if (item.girdLevel !== '2') {
item.disabled = true
}
// if (item.girdLevel !== '2') {
// item.disabled = true
// }
if (item.girdList && item.girdList.length) {
item.girdList = this.format(item.girdList)

2
project/sass/apps/AppConference/addMeeting.vue
View File

@@ -176,7 +176,7 @@ export default {
this.saveData.fileList.map((item) => {
this.saveData.files.push(item.id)
})
this.instance.post(`/app/appmeetinginfo/add-update`, {
this.instance.post(`/app/appmeetinginfo/add-update-web`, {
...this.saveData,
status: status,
}).then(res => {

2
project/sass/apps/AppNotification/components/add.vue
View File

@@ -117,7 +117,7 @@
if(this.form.releaseTime && (new Date(this.form.releaseTime).getTime() <= Date.now())){
return this.$message.error("发送时间要大于当前时间")
}
this.instance.post("/app/appannouncement/addOrUpdate", {
this.instance.post("/app/appannouncement/addOrUpdateWeb", {
...this.form,
status: e
}).then(res => {

4
project/sass/apps/AppSpecialPrison/components/Add.vue
View File

@@ -347,10 +347,6 @@ export default {
format (list) {
return list.map(item => {
if (item.girdLevel !== '2') {
item.disabled = true
}
if (item.girdList && item.girdList.length) {
item.girdList = this.format(item.girdList)
}

275
project/sass/apps/grid/AppGridBlock/components/add.vue
View File

@@ -17,10 +17,10 @@
<el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/>
</el-form-item>
<el-form-item label="网格长" prop="girdMemberManageList">
<AiUserGet :instance="instance" v-model="forms.girdMemberManageList" isShowUser :props="{label:'wxUserId'}"/>
<AiUserGet :instance="instance" v-model="forms.girdMemberManageList" isShowUser :props="{label:'name', id: 'id'}"/>
</el-form-item>
<el-form-item label="网格员" prop="girdMemberList">
<AiUserGet :instance="instance" v-model="forms.girdMemberList" isShowUser :props="{label:'wxUserId'}"/>
<AiUserGet :instance="instance" v-model="forms.girdMemberList" isShowUser :props="{label:'name', id: 'id'}"/>
</el-form-item>
</template>
</ai-card>
@@ -50,7 +50,9 @@
<el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
</el-form-item>
<el-form-item label="网格范围" prop="enclosure">
<el-button size="small" @click="showMap = true">地图标绘</el-button>
<map-plotting v-model="forms.points">
<el-button size="small">地图标绘</el-button>
</map-plotting>
</el-form-item>
</template>
</ai-card>
@@ -65,56 +67,16 @@
</el-button>
</template>
</ai-detail>
<ai-dialog
title="网格范围"
:visible.sync="showMap"
:customFooter="true"
:destroyOnClose="true"
@opened="beforeSelectMap"
border
width="850px"
>
<div class="map">
<div class="tipinput">
<el-input
v-model="searchAddress"
@change="addressChange"
clearable
placeholder="请输入关键字"
id="tipinput"
size="medium"
style="width: 200px"
/>
</div>
<div id="panel"/>
<div class="container" id="container"></div>
<el-button-group style="margin-top: 8px" v-if="forms.plottingStatus==1">
<el-button type="primary" size="mini" @click="polyEditor.open()">开始编辑</el-button>
<el-button size="mini" @click="polyEditor.close()">结束编辑</el-button>
</el-button-group>
<el-button-group
style="margin-top: 8px"
v-if="forms.plottingStatus == 0"
>
<el-button size="mini" @click="draw('polygon')">开始绘制多边形</el-button>
<!-- <el-button size="mini" @click="close()">关闭绘制</el-button> -->
<el-button size="mini" @click="clear()">清除绘制</el-button>
</el-button-group>
</div>
<div class="dialog-footer" slot="footer">
<el-button size="medium" @click="showMap = false">取消</el-button>
<el-button type="primary" size="medium" @click="surePotting()">确认</el-button>
</div>
</ai-dialog>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {mapState} from "vuex";
import MapPlotting from "./mapPlotting";
export default {
name: "addBlock",
components: {MapPlotting},
props: {
instance: Function,
dict: Object,
@@ -126,17 +88,7 @@ export default {
girdMemberManageList: [],
girdMemberList: []
},
showMap: false,
map: "",
mouseTool: "",
searchAddress: "",
placeSearch: "",
overlays: [],
options: [],
path: [],
location: {},
polyEditor: "",
title: "添加网格区块",
parentGirdInfo: {},
};
},
@@ -177,11 +129,13 @@ export default {
}
},
created() {
this.getCorpLocation()
if (this.isEdit) {
this.searchDetail();
} else {
this.forms = this.$route.query
this.forms = {
...this.forms,
...this.$route.query
}
}
},
methods: {
@@ -203,147 +157,6 @@ export default {
}
});
},
beforeSelectMap() {
AMapLoader.load({
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.MouseTool", "AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: "1.1", // AMapUI 缺省 1.1
plugins: [], // 需要加载的 AMapUI ui插件
},
})
.then((AMap) => {
this.map = new AMap.Map("container", {
resizeEnable: true,
});
if (this.forms.plottingStatus == 1) {
let path = [];
this.forms.points.map((e, index) => {
path[index] = [e.lng, e.lat];
});
let polygon = new AMap.Polygon({
path: path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: "#1791fc",
zIndex: 50,
bubble: true,
});
this.map.add([polygon]);
this.map.setFitView();
this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
} else {
this.mouseTool = new AMap.MouseTool(this.map);
// this.map.add(new AMap.Marker({
// position:this.map.getCenter()
// }));
this.placeSearch = new AMap.PlaceSearch({
pageSize: 3, // 单页显示结果条数
pageIndex: 1, // 页码
city: "", // 兴趣点城市
citylimit: false, //是否强制限制在设置的城市内搜索
map: this.map, // 展现结果的地图实例
panel: "panel", // 结果列表将在此容器中进行展示。
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
// this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
this.eventOn();
}
})
},
getCorpLocation() {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
if (res?.data) {
this.location = res.data
}
})
},
//地图事件绑定
eventOn() {
this.path = [];
this.overlays = [];
this.map.on("mousemove", null, this);
this.mouseTool.on("draw", ({obj}) => {
obj.getPath().map((e) => {
this.path.push({lat: e.getLat(), lng: e.getLng()});
});
this.overlays.push(obj);
})
},
//map搜索
addressChange(val) {
this.placeSearch.search(val);
},
close() {
this.mouseTool.close(true);
},
clear() {
this.map.remove(this.overlays);
this.overlays = [];
this.path = [];
},
draw(type) {
switch (type) {
case "marker": {
this.mouseTool.marker({
//同Marker的Option设置
});
break;
}
case "polyline": {
this.mouseTool.polyline({
strokeColor: "#80d8ff",
//同Polyline的Option设置
});
break;
}
case "polygon": {
this.mouseTool.polygon({
fillColor: "#00b0ff",
strokeColor: "#80d8ff",
borderWeight: 2,
strokeWeight: 4,
//同Polygon的Option设置
});
break;
}
case "rectangle": {
this.mouseTool.rectangle({
fillColor: "#00b0ff",
strokeColor: "#80d8ff",
//同Polygon的Option设置
});
break;
}
case "circle": {
this.mouseTool.circle({
fillColor: "#00b0ff",
strokeColor: "#80d8ff",
//同Circle的Option设置
});
break;
}
}
},
surePotting() {
this.forms.points = [];
// this.forms.eventReportUnit = this.$refs.cascader.getCheckedNodes().label;
if (this.forms.plottingStatus == 1) {
this.polyEditor
.getTarget()
.getPath()
.map((e) => {
this.forms.points.push({lng: e.lng, lat: e.lat});
});
} else {
this.forms.points = [...this.path];
}
this.showMap = false;
},
save() {
this.$refs["rules"].validate((valid) => {
if (valid) {
@@ -352,6 +165,16 @@ export default {
`/app/appgirdinfo/addOrUpdate`,
{
...this.forms,
girdMemberManageList: this.forms.girdMemberManageList.length ? this.forms.girdMemberManageList.map(v => {
return {
wxUserId: v.wxOpenUserId || v.wxUserId
}
}) : [],
girdMemberList: this.forms.girdMemberList.length ? this.forms.girdMemberList.map(v => {
return {
wxUserId: v.wxOpenUserId || v.wxUserId
}
}) : []
},
null
)
@@ -372,7 +195,21 @@ export default {
params: {id},
}).then((res) => {
if (res?.data) {
this.forms = {...res.data};
this.forms = {
...res.data,
girdMemberManageList: res.data.girdMemberManageList ? res.data.girdMemberManageList.map(v => {
return {
...v,
id: v.wxUserId
}
}) : [],
girdMemberList: res.data.girdMemberList ? res.data.girdMemberList.map(v => {
return {
...v,
id: v.wxUserId
}
}) : []
};
this.parentGirdInfo = res.data.parentGirdInfo;
this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
}
@@ -387,48 +224,8 @@ export default {
width: 100%;
height: 100%;
::v-deep .amap-copyright {
display: none !important;
}
::v-deep .amap-logo {
display: none !important;
}
.footer-btn {
width: 92px;
}
.map {
width: 780px;
position: relative;
overflow: hidden;
.container {
width: 760px;
height: 420px;
border-radius: 2px;
border: 1px solid #d0d4dc;
}
#panel {
position: absolute;
height: 400px;
right: 30px;
top: 20px;
width: 280px;
overflow: hidden;
z-index: 10000;
}
.tipinput {
position: absolute;
width: 200px;
height: 38px;
left: 20px;
top: 20px;
z-index: 10000;
}
}
}
</style>

292
project/sass/apps/grid/AppGridBlock/components/list.vue
View File

@@ -5,7 +5,7 @@
<ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
</template>
<template slot="left">
<ai-tree-menu title="网格层级" @search="(v) => $refs.tree.filter(v)">
<ai-tree-menu title="网格层级" @search="v=> $refs.tree.filter(v)">
<el-tree
:data="treeObj.treeList"
:props="treeObj.defaultProps"
@@ -14,8 +14,11 @@
ref="tree"
:filter-node-method="filterNode"
default-expand-all
highlight-current
/>
highlight-current>
<template slot-scope="{node,data}">
<div v-text="node.label"/>
</template>
</el-tree>
</ai-tree-menu>
</template>
<template slot="content">
@@ -115,69 +118,14 @@
fixed="right"
width="160">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="showEdit(row.id)">编辑</el-button>
<el-button type="text" @click="poltting(row)">标绘</el-button>
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
</div>
<el-button type="text" @click="showEdit(row.id)">编辑</el-button>
<map-plotting :value="row.points" @change="v=>confirm(row,v)"/>
<el-button type="text" @click="deleteById(row.id)">删除</el-button>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
<ai-dialog
title="网格范围"
:visible.sync="showMap"
:customFooter="true"
:destroyOnClose="true"
border
width="850px"
>
<div class="map">
<div class="tipinput">
<el-input
v-if="editRow.plottingStatus == 0"
v-model="searchAddress"
@change="addressChange"
clearable
placeholder="请输入关键字"
id="tipinput"
size="medium"
style="width: 200px"
></el-input>
</div>
<div id="panel" v-if="editRow.plottingStatus == 0"></div>
<div class="container" id="container"></div>
<el-button-group
style="margin-top: 8px"
v-if="editRow.plottingStatus == 1"
>
<el-button type="primary" size="mini" @click="beginPoltting()"
>开始编辑
</el-button
>
<el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
</el-button-group>
<el-button-group
style="margin-top: 8px"
v-if="editRow.plottingStatus == 0"
>
<el-button size="mini" @click="draw('polygon')"
>开始绘制多边形
</el-button
>
<!-- <el-button size="mini" @click="close()">关闭绘制</el-button> -->
<el-button size="mini" @click="clear()">清除绘制</el-button>
</el-button-group>
</div>
<div class="dialog-footer" slot="footer">
<el-button size="medium" @click="showMap = false">取消</el-button>
<el-button type="primary" size="medium" @click="confirm()"
>确认
</el-button
>
</div>
</ai-dialog>
<ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
width="700px">
<ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
@@ -196,10 +144,11 @@
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import MapPlotting from "./mapPlotting";
export default {
name: "List",
components: {MapPlotting},
label: "网格区块",
props: {
instance: Function,
@@ -241,12 +190,11 @@ export default {
isEdit: false,
searchId: "",
fileList: [],
location: {},
dialog: false,
gridInfo: {},
gridMemberColConfigs: [
{prop: "wxUserId", openType: 'userName'},
{prop: "girdMemberType", dict: "girdMemberType"},
{prop: "checkType", formart: v => v === '1' ? '网格员' : '网格长'},
{slot: "tags"}
]
};
@@ -254,7 +202,6 @@ export default {
created() {
this.getTreeList();
this.getList();
this.getCorpLocation()
this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus", "girdMemberType");
},
computed: {
@@ -270,13 +217,6 @@ export default {
},
},
methods: {
getCorpLocation() {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
if (res.code == 0) {
this.location = res.data
}
})
},
handleNodeClick(val) {
this.info = {...val};
this.searchId = val.id;
@@ -303,7 +243,7 @@ export default {
},
deleteById(ids) {
ids &&
this.$confirm("是否要删除该网格区块？", {
this.$confirm("删除网格后，会清除网格内网格员和责任家庭信息，如有下级网格，会同步删除下级网格所有数据!", {
type: "error",
})
.then(() => {
@@ -316,6 +256,7 @@ export default {
this.$message.success("删除成功!");
this.getList();
this.getTreeList();
}
});
})
@@ -386,162 +327,18 @@ export default {
this.getTreeList();
});
},
poltting(row) {
this.showMap = true;
this.editRow = {...row};
AMapLoader.load({
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.PolygonEditor", "AMap.MouseTool", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: "1.1", // AMapUI 缺省 1.1
plugins: [], // 需要加载的 AMapUI ui插件
},
})
.then((AMap) => {
this.map = new AMap.Map("container", {
resizeEnable: true,
zoom: 14,
});
if (this.editRow.plottingStatus == 1) {
let path = [];
this.editRow.points.map((e, index) => {
path[index] = [e.lng, e.lat];
});
let polygon = new AMap.Polygon({
path: path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: "#1791fc",
zIndex: 50,
bubble: true,
});
this.map.add([polygon]);
this.map.setFitView();
this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
} else {
this.mouseTool = new AMap.MouseTool(this.map);
this.placeSearch = new AMap.PlaceSearch({
pageSize: 3, // 单页显示结果条数
pageIndex: 1, // 页码
city: "", // 兴趣点城市
citylimit: false, //是否强制限制在设置的城市内搜索
map: this.map, // 展现结果的地图实例
panel: "panel", // 结果列表将在此容器中进行展示。
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
// this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
this.eventOn();
}
})
.catch((e) => {
console.log(e);
});
},
showEdit(id) {
this.$router.push({hash: "#add", query: {id}})
},
draw(type) {
switch (type) {
case "marker": {
this.mouseTool.marker({
//同Marker的Option设置
});
break;
}
case "polyline": {
this.mouseTool.polyline({
strokeColor: "#80d8ff",
//同Polyline的Option设置
});
break;
}
case "polygon": {
this.mouseTool.polygon({
fillColor: "#00b0ff",
strokeColor: "#80d8ff",
borderWeight: 2,
strokeWeight: 4,
//同Polygon的Option设置
});
break;
}
case "rectangle": {
this.mouseTool.rectangle({
fillColor: "#00b0ff",
strokeColor: "#80d8ff",
//同Polygon的Option设置
});
break;
}
case "circle": {
this.mouseTool.circle({
fillColor: "#00b0ff",
strokeColor: "#80d8ff",
//同Circle的Option设置
});
break;
}
}
},
//map搜索
addressChange(val) {
this.placeSearch.search(val);
},
close() {
this.mouseTool.close(true);
},
clear() {
this.map.remove(this.overlays);
this.overlays = [];
this.path = [];
},
beginPoltting() {
this.polyEditor.open();
},
finishPoltting() {
this.polyEditor.close();
},
confirm() {
let path = [];
if (this.editRow.plottingStatus == 1) {
this.polyEditor
.getTarget()
.getPath()
.map((e) => {
path.push({lng: e.lng, lat: e.lat});
});
} else {
path = [...this.path];
}
delete this.editRow.points;
let {girdMemberNames} = this.editRow
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
...this.editRow,
points: path,
girdMemberNames: girdMemberNames?.toString()
}).then((res) => {
confirm(row, points) {
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
if (res.code == 0) {
this.$message.success("提交成功!")
this.getList();
this.showMap = false;
}
});
},
eventOn() {
this.path = [];
this.overlays = [];
this.map.on("mousemove", this.showInfoMove, this);
this.mouseTool.on("draw", ({type, obj}) => {
obj.getPath().map((e) => {
console.log(e)
this.path.push({lat: e.getLat(), lng: e.getLng()});
});
this.overlays.push(obj);
});
},
resetSearch() {
Object.keys(this.searchObj).map((e) => {
this.searchObj[e] = "";
@@ -601,6 +398,8 @@ export default {
}
.is-current > .el-tree-node__content {
color: #fff !important;
&:hover {
background: #2266FF;
color: #fff;
@@ -608,7 +407,7 @@ export default {
background: #2266FF;
span {
.el-tooltip {
color: #fff;
}
}
@@ -633,40 +432,27 @@ export default {
padding: 8px 0;
}
.map {
width: 780px;
position: relative;
overflow: hidden;
::v-deep.fullscreenMap {
.el-dialog {
display: flex;
flex-direction: column;
.container {
width: 760px;
height: 420px;
border-radius: 2px;
border: 1px solid #d0d4dc;
.el-dialog__body {
padding: 0;
flex: 1;
min-height: 0;
.ai-dialog__content {
max-height: unset !important;
padding-bottom: 0;
height: 100%;
.ai-dialog__content--wrapper {
padding-right: 0 !important;
}
}
}
}
#panel {
position: absolute;
height: 400px;
right: 30px;
top: 20px;
width: 280px;
overflow: hidden;
z-index: 10000;
}
.tipinput {
position: absolute;
width: 200px;
height: 38px;
left: 20px;
top: 20px;
z-index: 10000;
}
}
::v-deep.ai-list__content--right {
overflow: visible !important;
}
::v-deep .treePanel {

229
project/sass/apps/grid/AppGridBlock/components/mapPlotting.vue Normal file
View File

@@ -0,0 +1,229 @@
<template>
<section class="mapPlotting">
<div class="clicker" @click="dialog=true,$emit('open')">
<slot v-if="$slots.default"/>
<el-button v-else type="text">标绘</el-button>
</div>
<ai-dialog :title="title" class="fullscreenMap"
:visible.sync="dialog"
:destroyOnClose="true"
@close="points=[]"
border fullscreen
@open="initMap" :modal="false"
@onConfirm="$emit('change',points.flat()),dialog=false">
<div class="mapPanel">
<div class="tipinput">
<el-input
v-model="searchAddress"
@change="addressChange"
clearable
placeholder="请输入关键字"
id="tipinput"
size="medium"/>
</div>
<div id="panel"/>
<div class="container fill" id="container"/>
<div class="operationBtns" v-if="map">
<el-alert type="success" title="操作说明:" :closable="false">
<li>1.双击覆盖物即可编辑</li>
<li>2.编辑状态,对点双击可删除该点</li>
<li>3.绘制状态,右键结束绘制</li>
<li>4.结束编辑才能保存绘制的覆盖物信息</li>
</el-alert>
<el-button-group>
<el-button type="primary" @click="handleAdd">新建</el-button>
<el-button @click="polyEditor.close()">结束编辑</el-button>
<el-button @click="clear()">清除绘制</el-button>
</el-button-group>
</div>
</div>
</ai-dialog>
</section>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {mapState} from "vuex";
export default {
name: "mapPlotting",
model: {
prop: "value",
event: "change"
},
props: {
title: {default: "地图标绘"},
value: Array
},
computed: {
...mapState(['user']),
},
data() {
return {
map: null,
polyEditor: null,
placeSearch: null,
searchAddress: "",
overlays: [],
points: [],
dialog: false
}
},
methods: {
addressChange(val) {
this.placeSearch.search(val);
},
clear() {
this.map.remove(this.overlays);
this.overlays = [];
this.points = []
},
handleAdd() {
let {polyEditor} = this
polyEditor.close();
polyEditor.setTarget();
polyEditor.open();
},
initMap() {
setTimeout(() => AMapLoader.load({
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: "1.1", // AMapUI 缺省 1.1
plugins: [], // 需要加载的 AMapUI ui插件
},
}).then((AMap) => {
this.map = new AMap.Map("container", {
resizeEnable: true,
});
this.placeSearch = new AMap.PlaceSearch({
pageSize: 5, // 单页显示结果条数
pageIndex: 1, // 页码
city: this.user.info.areaId?.substring(0, 6), // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: this.map, // 展现结果的地图实例
panel: "panel", // 结果列表将在此容器中进行展示。
autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
this.polyEditor = new AMap.PolygonEditor(this.map).on('add', ({target}) => {
this.polyEditor.addAdsorbPolygons(target)
target.on("dblclick", () => {
this.polyEditor.setTarget(target);
this.polyEditor.open()
})
})
this.polyEditor.on('end', ({target}) => {
this.overlays.push(target);
this.points.push(target.getPath().map((e) => ({lat: e.getLat(), lng: e.getLng()})))
});
if (this.value?.length > 0) {
let path = this.value.map(e => [e.lng, e.lat]);
let polygon = new AMap.Polygon({
path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: "#1791fc",
})
this.map.add([polygon]);
this.map.setFitView();
this.polyEditor.addAdsorbPolygons(polygon)
polygon.on('dblclick', () => {
this.polyEditor.setTarget(polygon);
this.polyEditor.open()
});
this.polyEditor.setTarget(polygon);
this.polyEditor.open()
} else {
this.map.setCity(this.user.info.areaId?.substring(0, 6))
this.map.setZoom(14, false, 600)
}
}), 500)
}
}
}
</script>
<style lang="scss" scoped>
.mapPlotting {
display: inline-block;
text-align: left;
.clicker {
display: inline-block;
}
.mapPanel {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
.container {
width: inherit;
}
#panel {
position: absolute;
height: 400px;
right: 30px;
top: 20px;
width: 280px;
overflow: hidden;
z-index: 10000;
}
.tipinput {
position: absolute;
width: 300px;
height: 38px;
left: 20px;
top: 20px;
z-index: 10000;
}
.operationBtns {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 10000;
}
}
::v-deep.fullscreenMap {
.el-dialog {
display: flex;
flex-direction: column;
.el-dialog__body {
padding: 0;
flex: 1;
min-height: 0;
.ai-dialog__content {
max-height: unset !important;
padding-bottom: 0;
height: 100%;
.ai-dialog__content--wrapper {
padding-right: 0 !important;
}
}
}
}
}
::v-deep .amap-copyright {
display: none !important;
}
::v-deep .amap-logo {
display: none !important;
}
}
</style>

596
project/sass/apps/grid/AppGridMap/components/list.vue
View File

@@ -13,17 +13,20 @@
</header>
<div class="tree-div">
<el-tree
:data="treeObj.treeList"
:props="treeObj.defaultProps"
@node-click="handleNodeClick"
node-key="id"
ref="tree"
:expand-on-click-node="false"
:filter-node-method="filterNode"
default-expand-all
highlight-current>
<span class="custom-tree-node" :title="node.label" style="" slot-scope="{ node, data }">{{ node.label }}</span>
:data="treeObj.treeList"
:props="treeObj.defaultProps"
@node-click="handleNodeClick"
node-key="id"
ref="tree"
:expand-on-click-node="false"
:filter-node-method="filterNode"
default-expand-all
highlight-current>
<template slot-scope="{ node, data }">
<el-tooltip effect="light" :content="node.label" placement="right">
<div v-text="node.label"/>
</el-tooltip>
</template>
</el-tree>
</div>
</div>
@@ -35,112 +38,111 @@
</div>
</template>
<script>
import {mapState} from 'vuex'
import {mapState} from 'vuex'
export default {
name: 'AppGridMap',
label: "网格地图",
props: {
instance: Function,
dict: Object,
permissions: Function,
},
data() {
return {
map: null,
mapLib: null,
show: true,
retryMapCount: 0,
polygons: [],
export default {
name: 'AppGridMap',
label: "网格地图",
props: {
instance: Function,
dict: Object,
permissions: Function,
},
data() {
return {
map: null,
mapLib: null,
show: true,
retryMapCount: 0,
polygons: [],
drawer: false,
filterText: "",
treeObj: {
treeList: [],
defaultProps: {
children: "girdList",
label: "girdName",
},
defaultExpandedKeys: [],
drawer: false,
filterText: "",
treeObj: {
treeList: [],
defaultProps: {
children: "girdList",
label: "girdName",
},
ops: {},
defaultExpandedKeys: [],
},
ops: {},
path: [],
searchObj: {
onlineStatus: "",
girdMemberName: "",
},
member: {
memberList: [],
},
currInfo: {},
infoWindowHtml: "",
marker: {},
activeId: null,
labels: []
};
path: [],
searchObj: {
onlineStatus: "",
girdMemberName: "",
},
member: {
memberList: [],
},
currInfo: {},
infoWindowHtml: "",
marker: {},
activeId: null,
labels: []
};
},
computed: {
...mapState(['user']),
},
created() {
this.dict.load("onlineStatus")
this.getTreeList().then(() => {
this.getLeafNodes()
})
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
computed: {
...mapState(['user']),
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.girdName.indexOf(value) !== -1;
},
created() {
this.dict.load("onlineStatus")
this.getTreeList().then(() => {
this.getLeafNodes()
getTreeList() {
return this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = [res.data];
this.$nextTick(() => {
res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
})
}
})
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
onMapInit() {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
if (res.code === 0) {
this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
}
})
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.girdName.indexOf(value) !== -1;
},
getTreeList() {
return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
if (res.code == 0) {
this.treeObj.treeList = res.data;
this.$nextTick(() => {
res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
})
}
})
},
getLeafNodes() {
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
if (res?.data) {
const arr = res.data.map(v => {
return {
id: v.id,
girdName: v.girdName,
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
}
}).filter(v => v.points.length)
onMapInit () {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
if (res.code === 0) {
this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
}
})
},
getLeafNodes() {
this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
if (res?.data) {
const arr = res.data.map(v => {
return {
id: v.id,
girdName: v.girdName,
points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
}
}).filter(v => v.points.length)
this.renderGridMap(arr)
}
})
},
handleNodeClick (val) {
if (val.girdLevel === '0') {
this.getLeafNodes()
this.renderGridMap(arr)
}
})
},
handleNodeClick(val) {
if (val.girdLevel === '0') {
this.getLeafNodes()
return false
}
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
if (res?.data) {
const arr = res.data.map(v => {
@@ -151,179 +153,179 @@
}
}).filter(v => v.points.length)
if (!arr.length) {
return this.$message.error('该网格还未标绘')
}
if (!arr.length) {
return this.$message.error('该网格还未标绘')
}
this.renderGridMap(arr)
}
})
},
fitBounds(latLngList, count = 0) {
let {mapLib: TMap} = this
if (TMap) {
if (latLngList.length === 0) {
return null;
}
let boundsN = latLngList[0].getLat();
let boundsS = boundsN;
let boundsW = latLngList[0].getLng();
let boundsE = boundsW;
latLngList.forEach((point) => {
point.getLat() > boundsN && (boundsN = point.getLat());
point.getLat() < boundsS && (boundsS = point.getLat());
point.getLng() > boundsE && (boundsE = point.getLng());
point.getLng() < boundsW && (boundsW = point.getLng());
});
return new TMap.LatLngBounds(
new TMap.LatLng(boundsS, boundsW),
new TMap.LatLng(boundsN, boundsE)
);
} else {
if (count < 5) {
this.fitBounds(latLngList, ++count)
}
this.renderGridMap(arr)
}
},
})
},
renderGridMap(paths) {
let {map, mapLib: TMap } = this
if (TMap) {
if (this.polygons.length > 0) {
this.polygons.forEach(e => e.destroy())
this.labels.forEach(e => {
e.destroy(e.id)
})
this.polygons = []
this.labels = []
}
if (paths?.length > 0) {
let bounds = []
paths.forEach((path, i) => {
let polygon = new TMap.MultiPolygon({
map, styles: {
default: new TMap.PolygonStyle({
showBorder: true,
borderColor: '#5088FF',
borderWidth: 2,
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
})
},
id: path.id,
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
})
this.polygons.push(polygon)
bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
polygon.on('click', e => {
// const id = e.target.id
// this.getGridInfo(id)
})
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
var position = TMap.geometry.computeCentroid(points)
let label = new TMap.MultiLabel({
id: `label~${path.id}`,
data: path.id,
map: map,
styles: {
building: new TMap.LabelStyle({
color: '#3777FF',
size: 20,
alignment: 'center',
verticalAlignment: 'middle'
})
},
geometries: [
{
id: `label-class-${i}`,
styleId: 'building',
position: position,
content: path.girdName,
}
]
})
this.labels.push(label)
label.on('click', e => {
// this.getGridInfo(e.target.id.split('~')[1])
});
})
bounds = bounds.reduce((a, b) => {
return this.fitBounds([
a.getNorthEast(),
a.getSouthWest(),
b.getNorthEast(),
b.getSouthWest(),
]);
});
map.fitBounds(bounds, {padding: 100})
}
fitBounds(latLngList, count = 0) {
let {mapLib: TMap} = this
if (TMap) {
if (latLngList.length === 0) {
return null;
}
},
hasClass(ele, cls) {
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
},
addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
},
removeClass(ele, cls) {
if (this.hasClass(ele, cls)) {
const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
ele.className = ele.className.replace(reg, " ");
}
},
changClass(ele, className) {
if (!this.hasClass(ele, className)) {
this.addClass(ele, className);
} else {
this.removeClass(ele, className);
}
},
percentage() {
if (this.member.onlineNumber == 0) {
return 0;
} else {
return (
100 *
(this.member.onlineNumber / this.member.allMemberNumber)
).toFixed(2);
}
},
getMemberList() {
this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
if (res.code == 0) {
let markers = [];
this.member = res.data;
this.member.memberList.map((e) => {
if (e.onlineStatus == "1") {
markers.push({lng: e.lng, lat: e.lat, name: e.name});
}
});
this.initMap(null, null, markers);
}
let boundsN = latLngList[0].getLat();
let boundsS = boundsN;
let boundsW = latLngList[0].getLng();
let boundsE = boundsW;
latLngList.forEach((point) => {
point.getLat() > boundsN && (boundsN = point.getLat());
point.getLat() < boundsS && (boundsS = point.getLat());
point.getLng() > boundsE && (boundsE = point.getLng());
point.getLng() < boundsW && (boundsW = point.getLng());
});
},
clickMember(marker) {
if (marker.onlineStatus == 1) {
this.activeId = marker.id;
this.marker = marker;
this.infoWindowContent(marker);
return new TMap.LatLngBounds(
new TMap.LatLng(boundsS, boundsW),
new TMap.LatLng(boundsN, boundsE)
);
} else {
if (count < 5) {
this.fitBounds(latLngList, ++count)
}
},
infoWindowContent(marker) {
this.instance
.post(`/app/location/xyToAddress`, null, {
params: {
x: marker.lat,
y: marker.lng,
},
})
.then((res) => {
if (res.code == 0) {
this.infoWindowHtml = `<div class="info">
}
},
renderGridMap(paths) {
let {map, mapLib: TMap} = this
if (TMap) {
if (this.polygons.length > 0) {
this.polygons.forEach(e => e.destroy())
this.labels.forEach(e => {
e.destroy(e.id)
})
this.polygons = []
this.labels = []
}
if (paths?.length > 0) {
let bounds = []
paths.forEach((path, i) => {
let polygon = new TMap.MultiPolygon({
map, styles: {
default: new TMap.PolygonStyle({
showBorder: true,
borderColor: '#5088FF',
borderWidth: 2,
color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
})
},
id: path.id,
geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
})
this.polygons.push(polygon)
bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
polygon.on('click', e => {
// const id = e.target.id
// this.getGridInfo(id)
})
const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
var position = TMap.geometry.computeCentroid(points)
let label = new TMap.MultiLabel({
id: `label~${path.id}`,
data: path.id,
map: map,
styles: {
building: new TMap.LabelStyle({
color: '#3777FF',
size: 20,
alignment: 'center',
verticalAlignment: 'middle'
})
},
geometries: [
{
id: `label-class-${i}`,
styleId: 'building',
position: position,
content: path.girdName,
}
]
})
this.labels.push(label)
label.on('click', e => {
// this.getGridInfo(e.target.id.split('~')[1])
});
})
bounds = bounds.reduce((a, b) => {
return this.fitBounds([
a.getNorthEast(),
a.getSouthWest(),
b.getNorthEast(),
b.getSouthWest(),
]);
});
map.fitBounds(bounds, {padding: 100})
}
}
},
hasClass(ele, cls) {
return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
},
addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
},
removeClass(ele, cls) {
if (this.hasClass(ele, cls)) {
const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
ele.className = ele.className.replace(reg, " ");
}
},
changClass(ele, className) {
if (!this.hasClass(ele, className)) {
this.addClass(ele, className);
} else {
this.removeClass(ele, className);
}
},
percentage() {
if (this.member.onlineNumber == 0) {
return 0;
} else {
return (
100 *
(this.member.onlineNumber / this.member.allMemberNumber)
).toFixed(2);
}
},
getMemberList() {
this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
if (res.code == 0) {
let markers = [];
this.member = res.data;
this.member.memberList.map((e) => {
if (e.onlineStatus == "1") {
markers.push({lng: e.lng, lat: e.lat, name: e.name});
}
});
this.initMap(null, null, markers);
}
});
},
clickMember(marker) {
if (marker.onlineStatus == 1) {
this.activeId = marker.id;
this.marker = marker;
this.infoWindowContent(marker);
}
},
infoWindowContent(marker) {
this.instance
.post(`/app/location/xyToAddress`, null, {
params: {
x: marker.lat,
y: marker.lng,
},
})
.then((res) => {
if (res.code == 0) {
this.infoWindowHtml = `<div class="info">
<p>
<span class="name">${marker.name}</span>
<span class="lat">${marker.lng},${marker.lat}</span>
@@ -335,31 +337,31 @@
<span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
</p>
</div>`;
this.initMap(false, marker);
}
});
},
queryTrajectory() {
this.instance
.post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
params: {
userId: this.marker.userId,
},
})
.then((res) => {
if (res.code == 0) {
let path = [];
if (res.data) {
res.data.map((e, index) => {
path[index] = [e.lng, e.lat];
});
}
this.initMap(path, this.marker);
}
});
},
this.initMap(false, marker);
}
});
},
}
queryTrajectory() {
this.instance
.post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
params: {
userId: this.marker.userId,
},
})
.then((res) => {
if (res.code == 0) {
let path = [];
if (res.data) {
res.data.map((e, index) => {
path[index] = [e.lng, e.lat];
});
}
this.initMap(path, this.marker);
}
});
},
},
}
</script>
<style lang="scss" scoped>
@@ -374,7 +376,7 @@
}
::v-deep .is-current {
& > .el-tree-node__content > .custom-tree-node {
& > .el-tree-node__content > .el-tooltip {
color: #5088ff;
}
}
@@ -576,7 +578,7 @@
background: #333c53;
}
.el-tree-node__label {
.el-tooltip {
color: #fff;
}
@@ -585,7 +587,7 @@
}
.is-current > .el-tree-node__content {
.el-tree-node__label {
.el-tooltip {
color: #5088ff;
}
}

2
project/sass/apps/grid/AppGridMember/components/Family.vue
View File

@@ -267,7 +267,7 @@
size: 200,
con: this.name,
householdName: 1,
areaId: this.areaId,
searchAreaId: this.areaId,
}
}).then(res => {
if (res.code == 0) {

10
project/sass/apps/grid/AppGridMember/components/add.vue
View File

@@ -24,7 +24,7 @@
<el-form-item label="网格员姓名" prop="wxUserId" >
<div class="flex-box">
<ai-open-data :style="{marginRight: forms.wxUserId ? '20px' : 0}" type="userName" :openid="forms.wxUserId" />
<AiUserGet :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
<AiUserGet :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson" :props="{label:'name', id: 'id'}">
<el-button size="small" type="primary"><span style="color: #fff">选择网格员</span></el-button>
</AiUserGet>
</div>
@@ -425,14 +425,6 @@ export default {
if (!currInfo.id) {
return this.$message.error('请选择网格')
}
if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
return this.$message.error(`一级、二级网格不能添加网格员`)
}
if (sameInfo.length) {
return this.$message.error('不能选择同一网格重复绑定')
}
}
this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`,{