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

无等级网格版合并

Browse Source
This commit is contained in:
aixianling
2022-06-13 09:39:19 +08:00
parent 0736ea98d0
commit 2a4d9b2b1c
67 changed files with 1490 additions and 16970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
packages/grid/AppBuildMap/AppBuildMap.vue
View File

@@ -35,7 +35,7 @@
<h2>房屋信息</h2>
<div class="community-info__item">
<label>所属社区</label>
<span>{{ info.areaName}}</span>
<span>{{ info.areaName }}</span>
</div>
<div class="community-info__item">
<label>所属小区</label>
@@ -43,7 +43,7 @@
</div>
<div class="community-info__item">
<label>房屋类型</label>
<span>{{ dict.getLabel("communityBuildingType",info.buildingType) }}</span>
<span>{{ dict.getLabel("communityBuildingType", info.buildingType) }}</span>
</div>
<div class="community-info__item">
<label>楼长姓名</label>
@@ -51,7 +51,7 @@
</div>
<div class="community-info__item">
<label>楼长电话</label>
<span>{{ info.managerPhone}}</span>
<span>{{ info.managerPhone }}</span>
</div>
</div>
@@ -59,7 +59,7 @@
<h2>人员信息</h2>
<div class="community-info__item">
<label>姓名</label>
<span style="color:#2266FF;">{{ resident.name}}</span>
<span style="color:#2266FF;">{{ resident.name }}</span>
</div>
<div class="community-info__item">
<label>所属单元</label>
@@ -67,7 +67,7 @@
</div>
<div class="community-info__item">
<label>房号</label>
<span>{{house.houseCode}}</span>
<span>{{ house.houseCode }}</span>
</div>
<div class="community-info__item">
<label>联系方式</label>
@@ -86,7 +86,8 @@
<!-- </div>-->
<div class="community-btn">
<el-button icon="iconfont iconloudongmoxing" size="small"
@click="$router.push({query: {communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}})">楼栋模型
@click="$router.push({query: {communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}})">
楼栋模型
</el-button>
</div>
</div>
@@ -153,19 +154,19 @@ export default {
list: [],
areaList: [],
info: {},
resident:null,
resident: null,
satellite: null,
zoom: 11,
chooseBuildId: '',
buildList: [],
searchList: [],
house:null,
center: []
house: null,
center: [],
mapLib: null
}
},
computed: {
...mapState(['user']),
hasCommunityId() {
return !!this.$route.query?.communityId
}
@@ -186,7 +187,7 @@ export default {
},
created() {
this.dict.load('householdRelation','communityBuildingType')
this.dict.load('householdRelation', 'communityBuildingType')
},
mounted() {
@@ -198,9 +199,9 @@ export default {
},
methods: {
getCorpLocation(){
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
if(res.code==0){
getCorpLocation() {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
if (res.code == 0) {
this.initMap(res.data);
}
})
@@ -239,9 +240,9 @@ export default {
},
getBuildInfo(id) {
this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`,null,{
params:{
buildId:id
this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`, null, {
params: {
buildId: id
}
}).then(res => {
if (res.code === 0) {
@@ -255,11 +256,11 @@ export default {
},
chooseCommunity(item) {
this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`,null,{
params:{
buildId:item.buildingId,
houseId:item.id,
residentId:item.residentId
this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`, null, {
params: {
buildId: item.buildingId,
houseId: item.id,
residentId: item.residentId
}
}).then(res => {
if (res.code === 0) {
@@ -293,7 +294,7 @@ export default {
<div class="polymeric-container">
<p>${context.count}</p>
</div>
</div>`
</div>`, {mapLib: AMap} = this
let offset = new AMap.Pixel(-9, -9)
context.marker.setContent(el)
@@ -308,12 +309,12 @@ export default {
renderMarker(context) {
const buildId = context.data[0].id
let el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId?'background-color:#2266FF':''}">
let el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId ? 'background-color:#2266FF' : ''}">
<div class="mark-contaienr">
<span>${context.data[0].communityName}</span>&nbsp;&nbsp;
<span>${context.data[0].buildingNumber}栋</span>
</div>
<div class="arrow" style="${buildId === this.chooseBuildId?'border-top-color: #2266FF':''}"></div>
<div class="arrow" style="${buildId === this.chooseBuildId ? 'border-top-color: #2266FF' : ''}"></div>
</div>`
context.marker.setContent(el);
@@ -336,6 +337,7 @@ export default {
},
addMakert(points) {
let {mapLib: AMap} = this
new AMap.MarkerClusterer(this.map, points, {
gridSize: 60,
maxZoom: 15,
@@ -352,29 +354,26 @@ export default {
size: 1000000
}
}).then(res => {
if (res.code === 0) {
if (res?.data) {
this.buildList = res.data.records
const points = res.data.records.map(item => {
return {
lnglat: [item.lng, item.lat],
id: item.id,
corpId: item.corpId,
areaName:item.areaName,
buildingNumber:item.buildingNumber,
communityName:item.communityName
areaName: item.areaName,
buildingNumber: item.buildingNumber,
communityName: item.communityName
}
})
this.addMakert(points)
}
})
},
hidePopup() {
this.isShowArea = false
this.isShowSearch = false
},
switchLayer(flag) {
if (flag) {
this.map.addLayer(this.satellite)
@@ -384,9 +383,8 @@ export default {
this.isImageMap = flag
},
initMap({lng,lat}) {
this.center = [lng,lat];
initMap({lng, lat}) {
this.center = [lng, lat];
AMapLoader.load({
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
version: '2.0',
@@ -396,6 +394,7 @@ export default {
plugins: []
}
}).then((AMap) => {
this.mapLib = AMap
this.map = new AMap.Map('map', {
resizeEnable: true,
zooms: [6, 20],
@@ -422,7 +421,7 @@ export default {
width: 100%;
}
::v-deep .ai-list__content--right-wrapper{
::v-deep .ai-list__content--right-wrapper {
height: 100%;
margin: 0px !important;
background-color: transparent !important;
@@ -804,7 +803,7 @@ export default {
white-space: nowrap;
}
p:first-child{
p:first-child {
font-size: 14px;
}
@@ -816,7 +815,7 @@ export default {
}
}
::v-deep .mark{
::v-deep .mark {
user-select: none;
cursor: pointer;
height: 32px;
@@ -829,7 +828,7 @@ export default {
box-sizing: border-box;
padding: 0 12px;
.mark-contaienr{
.mark-contaienr {
color: white;
font-size: 14px;
position: relative;
@@ -841,7 +840,7 @@ export default {
justify-content: center;
}
.arrow{
.arrow {
position: absolute;
left: 50%;
transform: translateX(-50%);

15
packages/grid/AppCommunityManage/components/Add.vue
View File

@@ -43,7 +43,12 @@
<el-tree :data="treeObj.treeList" :props="treeObj.defaultProps" node-key="id" ref="tree"
:check-strictly="true" show-checkbox
:default-checked-keys="treeObj.checkedKeys" default-expand-all
@check="onCheckChange">
@check="onCheckChange">
<template slot-scope="{node,data}">
<el-tooltip :content="node.label">
<div class="el-tree-node__label" v-text="node.label"/>
</el-tooltip>
</template>
</el-tree>
</div>
<div class="dialog-footer" slot="footer">
@@ -131,7 +136,7 @@ export default {
});
},
onCheckChange (e) {
onCheckChange(e) {
this.$nextTick(() => {
this.$refs.tree.getCheckedKeys().forEach(v => {
this.$refs.tree.setChecked(v, false)
@@ -140,12 +145,8 @@ export default {
})
},
format (list) {
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)
}

51
packages/grid/AppGridBlock/AppGridBlock.vue
View File

@@ -1,16 +1,6 @@
<template>
<div class="AppGridBlock">
<keep-alive include="List">
<component
ref="component"
:is="component"
@change="onChange"
:params="params"
:instance="instance"
:dict="dict"
:isEdit="isEdit"
></component>
</keep-alive>
<component :is="currentPage" :instance="instance" :dict="dict"/>
</div>
</template>
@@ -26,44 +16,17 @@ export default {
instance: Function,
dict: Object,
},
computed: {
currentPage() {
return this.$route.hash == "#add" ? Add : List
}
},
data() {
return {
component: "List",
params: {},
include: [],
isEdit: false
};
},
components: {
Add,
List,
},
mounted() {},
methods: {
onChange(data) {
if (data.type === "Add") {
this.component = "Add";
this.params = data.params;
this.isEdit = data.isEdit
}
if (data.type === "list") {
this.component = "List";
this.params = data.params;
this.$nextTick(() => {
if (data.isRefresh) {
this.$refs.component.getList()
this.$refs.component.getTreeList()
}
});
}
},
},
components: {Add, List},
};
</script>

490
packages/grid/AppGridBlock/components/add.vue
View File

@@ -3,151 +3,56 @@
<ai-detail>
<template #title>
<ai-title
:title="title"
:title="pageTitle"
:isShowBack="true"
:isShowBottomBorder="true"
@onBackClick="cancel(false)"
></ai-title>
/>
</template>
<template #content>
<ai-card title="层级信息">
<template slot="content">
<ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px">
<ai-info-item label="上级层级单位："><span>{{ forms.parentGirdName }}</span></ai-info-item>
</ai-wrapper>
</template>
</ai-card>
<el-form
ref="rules"
:model="forms"
:rules="formRules"
size="small"
label-suffix="："
label-width="120px"
>
<el-form ref="rules" :model="forms" :rules="formRules" size="small" label-suffix="：" label-width="120px">
<ai-card title="基础信息">
<template slot="content">
<div class="above">
<div class="left">
<el-form-item label="网格名称" prop="girdName">
<el-input
v-model="forms.girdName"
placeholder="请输入…"
:maxlength="50"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="网格类型" prop="girdType">
<el-select
v-model="forms.girdType"
placeholder="请选择"
clearable
style="width: 100%;"
>
<el-option
v-for="(item, i) in dict.getDict('girdType')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否最后一级" prop="isLastLevel">
<el-select
v-model="forms.isLastLevel"
placeholder="请选择"
clearable
style="width: 100%;"
>
<el-option
v-for="(item, i) in dict.getDict('isLastLevel')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</div>
<div class="right">
<el-form-item label="网格编码" prop="girdCode">
<el-input
v-model="forms.girdCode"
placeholder="请输入…"
maxlength="30"
show-word-limit
></el-input>
</el-form-item>
<el-form-item label="网格层级" prop="girdLevel">
<el-select
v-model="forms.girdLevel"
placeholder="请选择"
:disabled="isEdit"
clearable
style="width: 100%;"
>
<el-option
v-for="(item, i) in dict.getDict('girdLevel')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</div>
</div>
<el-form-item label="网格名称" prop="girdName">
<el-input v-model="forms.girdName" placeholder="请输入…" :maxlength="50" show-word-limit clearable/>
</el-form-item>
<el-form-item label="网格长" prop="girdMemberManageList">
<ai-user-picker :instance="instance" v-model="forms.girdMemberManageList" :props="{label:'name', id: 'id'}"/>
</el-form-item>
<el-form-item label="网格员" prop="girdMemberList">
<ai-user-picker :instance="instance" v-model="forms.girdMemberList" :props="{label:'name', id: 'id'}"/>
</el-form-item>
</template>
</ai-card>
<ai-card title="其他信息">
<template slot="content">
<div class="above">
<div class="left">
<!-- <el-form-item label="事件上报主体" prop="eventReportUnitId">
<el-cascader
style="width: 100%"
:options="unitOps"
ref="cascader"
v-model="forms.eventReportUnitId"
:props="unitProps"
:show-all-levels="false"
/>
</el-form-item> -->
<el-row type="flex">
<div class="fill">
<el-form-item label="初始日期" prop="startDate">
<el-date-picker
v-model="forms.startDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
style="width: 100%;"
>
</el-date-picker>
style="width: 100%;"/>
</el-form-item>
<el-form-item label="终止日期" prop="endDate">
<el-date-picker
v-model="forms.endDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
style="width: 100%;"
>
</el-date-picker>
<el-date-picker v-model="forms.endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"/>
</el-form-item>
</div>
<div class="right">
<div class="fill">
<el-form-item label="面积" prop="area">
<el-input
v-model="forms.area"
placeholder="面积㎡"
></el-input>
<el-input v-model="forms.area" placeholder="面积㎡" clearable/>
</el-form-item>
</div>
</div>
</el-row>
<el-form-item label="网格地址" prop="address">
<el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
</el-form-item>
<el-form-item label="网格范围" prop="enclosure" v-if="forms.girdLevel === '2' || isAddLastLevel">
<el-button size="small" @click="showMap = true">地图标绘</el-button>
<el-form-item label="网格范围" prop="enclosure">
<map-plotting v-model="forms.points">
<el-button size="small">地图标绘</el-button>
</map-plotting>
</el-form-item>
</template>
</ai-card>
@@ -162,110 +67,30 @@
</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"
></el-input>
</div>
<div id="panel"></div>
<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";
import AiUserPicker from "../../components/AiUserPicker";
export default {
name: "addBlock",
components: {AiUserPicker, MapPlotting},
props: {
instance: Function,
dict: Object,
params: Object,
isEdit: Boolean
},
data() {
return {
forms: {
address: "",
area: "",
points: [],
endDate: "",
eventReportUnit: "",
eventReportUnitId: "",
girdCode: "",
girdLevel: "",
girdList: [],
girdName: "",
girdType: "",
isLastLevel: "",
parentGirdId: "",
parentGirdName: "",
startDate: "",
plottingStatus: "0",
girdMemberManageList: [],
girdMemberList: []
},
showMap: false,
map: "",
mouseTool: "",
searchAddress: "",
placeSearch: "",
overlays: [],
options: [],
path: [],
location: {},
polyEditor: "",
title: "添加网格区块",
parentGirdInfo: {},
isAddLastLevel: false
};
},
computed: {
@@ -275,9 +100,6 @@ export default {
girdName: [
{required: true, message: "请输入网格名称", trigger: "change"},
],
girdLevel: [
{required: true, message: "请选择网格层级", trigger: "change"},
],
girdCode: [
{required: true, message: "请输入网格编号"},
{pattern: /^\d+$/g, message: "请输入数字"},
@@ -297,28 +119,26 @@ export default {
ops.map((e) => this.addChild(e, initData));
return ops;
},
pageTitle() {
return this.isEdit ? "编辑网格区块" : "添加网格区块"
},
isEdit() {
return !!this.$route.query.id;
}
},
created() {
this.getCorpLocation()
if (this.isEdit) {
this.title = "编辑网格区块";
this.searchDetail();
} else {
this.forms.parentGirdId = this.params.id;
this.forms.parentGirdName = this.params.girdName;
this.isAddLastLevel = this.params.girdLevel === '1'
// this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
// this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
this.title = "添加网格区块";
this.forms = {
...this.forms,
...this.$route.query
}
}
// this.getAllUnit(this.user.info.areaId);
},
methods: {
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
cancel() {
this.$router.push({})
},
// 获取所有单位
getAllUnit(data) {
@@ -335,159 +155,15 @@ 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.code == 0) {
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) {
this.instance
.post(
`/app/appgirdinfo/addOrUpdate`,
{
...this.forms,
},
null
)
.then((res) => {
let {girdMemberManageList, girdMemberList} = this.forms
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
...this.forms,
girdMemberManageList: girdMemberManageList?.map(v => ({wxUserId: v.id})) || [],
girdMemberList: girdMemberList?.map(v => ({wxUserId: v.id})) || []
}).then((res) => {
if (res.code == 0) {
this.cancel(true)
}
@@ -499,11 +175,26 @@ export default {
});
},
searchDetail() {
let {id} = this.$route.query
this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
params: {id: this.params.id},
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;
}
@@ -518,63 +209,8 @@ export default {
width: 100%;
height: 100%;
::v-deep .amap-copyright {
display: none !important;
}
::v-deep .amap-logo {
display: none !important;
}
.above {
overflow: hidden;
padding: 8px 0;
.left {
width: 380px;
float: left;
}
.right {
width: 380px;
float: right;
}
}
.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>

658
packages/grid/AppGridBlock/components/list.vue
View File

@@ -1,84 +1,86 @@
<template>
<div class="app-grid-block">
<section class="app-grid-block">
<ai-list>
<template slot="title">
<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"
@node-click="handleNodeClick"
node-key="id"
ref="tree"
:filter-node-method="filterNode"
default-expand-all
highlight-current
/>
:data="treeObj.treeList"
:props="treeObj.defaultProps"
@node-click="handleNodeClick"
node-key="id"
ref="tree"
:filter-node-method="filterNode"
default-expand-all
highlight-current>
<template slot-scope="{node,data}">
<div v-text="node.label"/>
</template>
</el-tree>
</ai-tree-menu>
</template>
<template slot="content">
<ai-search-bar>
<template slot="left">
<el-date-picker
v-model="searchObj.createTimeStr"
type="date"
@change="(page.current = 1), getList()"
value-format="yyyy-MM-dd"
size="small"
placeholder="创建时间"
v-model="searchObj.createTimeStr"
type="date"
@change="(page.current = 1), getList()"
value-format="yyyy-MM-dd"
size="small"
placeholder="创建时间"
>
</el-date-picker>
</template>
<template slot="right">
<el-input
v-model="searchObj.girdName"
size="small"
placeholder="输入网格名称"
@keyup.enter.native="(page.current = 1), getList()"
clearable
v-throttle="() => {page.current = 1, getList()}"
@clear="(searchObj.girdName = '', page.current = 1), getList()"
suffix-icon="iconfont iconSearch"
v-model="searchObj.girdName"
size="small"
placeholder="输入网格名称"
@keyup.enter.native="(page.current = 1), getList()"
clearable
@clear="(searchObj.girdName = '', page.current = 1), getList()"
suffix-icon="iconfont iconSearch"
/>
</template>
</ai-search-bar>
<ai-search-bar bottomBorder>
<template slot="left">
<el-button
type="primary"
icon="iconfont iconAdd"
:disabled="info.girdLevel === '3'"
@click="(isEdit = false), toAdd()"
>新增
type="primary"
icon="iconfont iconAdd"
@click="(isEdit = false), toAdd()"
>新增
</el-button>
<el-button
icon="iconfont iconDelete"
@click="deleteById(ids.join(','))"
:disabled="!Boolean(ids.length)"
icon="iconfont iconDelete"
@click="deleteById(ids.join(','))"
:disabled="!Boolean(ids.length)"
>
删除
</el-button>
<ai-download
:instance="instance"
url="/app/appgirdinfo/exportGirdInfo"
:params="{ ...searchObj, ids: ids.join(',') }"
fileName="网格区块"
:instance="instance"
url="/app/appgirdinfo/exportGirdInfo"
:params="{ ...searchObj, ids: ids.join(',') }"
fileName="网格区块"
>
<el-button icon="iconfont iconExported" size="small"
>导出全部</el-button
>导出全部
</el-button
>
</ai-download>
<ai-import
ref="import"
title="导入"
name="网格区块"
url="/app/appgirdinfo/downloadGirdInfo"
importUrl="/app/appgirdinfo/importGirdInfo"
suffixName="xlsx"
:customCliker="true"
:instance="instance"
ref="import"
title="导入"
name="网格区块"
url="/app/appgirdinfo/downloadGirdInfo"
importUrl="/app/appgirdinfo/importGirdInfo"
suffixName="xlsx"
:customCliker="true"
:instance="instance"
>
<template slot="tips">
<p>
@@ -86,104 +88,60 @@
</p>
</template>
<el-button size="small" icon="iconfont iconImport"
>导入</el-button
>导入
</el-button
>
</ai-import>
</template>
</ai-search-bar>
<ai-table
class="mt10"
:tableData="tableData"
:col-configs="colConfigs"
:total="page.total"
ref="aitableex"
:current.sync="page.current"
:size.sync="page.size"
@selection-change="(v) => (ids = v.map((e) => e.id))"
@getList="getList()"
>
<el-table-column
slot="selectId"
type="selection"
align="center"
width="40"
>
class="mt10"
:tableData="tableData"
:col-configs="colConfigs"
:total="page.total"
ref="aitableex"
:current.sync="page.current"
:size.sync="page.size"
@selection-change="v=>ids=v.map((e) => e.id)"
@getList="getList()"
:dict="dict">
<el-table-column label="网格成员" slot="user" align="center" width="160">
<template slot-scope="{ row }">
<el-button type="text" @click="showGridMembers(row)">{{ row.girdMemberNumber || 0 }}</el-button>
</template>
</el-table-column>
<el-table-column
label="操作"
slot="options"
align="center"
fixed="right"
width="160">
label="操作"
slot="options"
align="center"
fixed="right"
width="160">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="see(row)">编辑</el-button>
<el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</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 :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
width="700px">
<ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
:isShowPagination="false" :show-header="false"/>
<template #footer>
<el-button @click="dialog=false">关闭</el-button>
</template>
</ai-dialog>
</div>
</section>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import MapPlotting from "./mapPlotting";
export default {
name: "List",
components: {MapPlotting},
label: "网格区块",
props: {
instance: Function,
@@ -223,167 +181,95 @@ export default {
path: [],
overlays: [],
isEdit: false,
searchId: "",
fileList: [],
location: {}
dialog: false,
gridInfo: {},
gridMemberColConfigs: [
{prop: "name"},
{prop: "checkType", formart: v => v === '1' ? '网格员' : '网格长'}
]
};
},
created() {
this.getTreeList();
this.getList();
this.getCorpLocation()
this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
this.dict.load("girdType", "isLastLevel", "plottingStatus", "girdMemberType");
},
computed: {
colConfigs() {
let _ = this;
return [
{ type: 'selection'},
{
prop: "girdName",
align: "left",
label: "网格名称",
},
{
prop: "girdCode",
align: "center",
label: "网格编码",
},
{
prop: "girdType",
align: "center",
label: "网格类型",
render(h, { row }) {
return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-');
},
},
{
prop: "girdLevel",
align: "center",
label: "网格层级",
render(h, { row }) {
return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-');
},
},
{
prop: "plottingStatus",
align: "center",
label: "标绘状态",
render(h, { row }) {
return h(
"span",
{
style: {
color: _.dict.getColor("plottingStatus", row.plottingStatus),
},
},
_.dict.getLabel("plottingStatus", row.plottingStatus)
);
},
},
{
prop: "createTime",
align: "center",
label: "创建时间",
render(h, { row }) {
return h("span", {}, row.createTime.substring(0, 11));
},
},
{
prop: "girdMemberNames",
align: "center",
width: 200,
label: "网格员",
},
{type: 'selection'},
{prop: "girdName", align: "left", label: "网格名称",},
{slot: 'user'},
{prop: "plottingStatus", align: "center", label: "标绘状态", dict: "plottingStatus"},
{prop: "createTime", align: "center", label: "创建时间"},
{slot: "options"}
];
},
isTopGrid() {
return this.info.id == this.treeObj.treeList?.[0]?.id
}
},
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;
this.info = this.$copy(val);
this.getList();
},
getTreeList() {
this.instance
.post("/app/appgirdinfo/listByTop", null, null)
.then((res) => {
if (res.code == 0) {
this.treeObj.treeList = [...res.data];
this.info = { ...this.treeObj.treeList[0] };
this.$nextTick(() => {
this.treeObj.treeList.length && this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
})
}
});
this.instance.post("/app/appgirdinfo/listAllByTop").then(res => {
if (res?.data) {
this.treeObj.treeList = [res.data];
this.info = res.data
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.info.id)
})
}
});
},
filterNode(value, data) {
if (!value) return true;
return data.girdName.indexOf(value) !== -1;
},
deleteById(ids) {
ids &&
this.$confirm("是否要删除该网格区块？", {
type: "error",
})
.then(() => {
this.instance
.post("/app/appgirdinfo/delete", null, {
params: { ids },
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList();
}
});
})
.catch(() => {});
},
deleteTree(ids) {
ids &&
this.$confirm("是否要删除该网格区块？", {
type: "error",
})
.then(() => {
this.instance
.post("/app/appgirdinfo/delete", null, {
params: { ids },
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getTreeList();
}
});
})
.catch(() => {});
},
getList() {
this.instance
.post("/app/appgirdinfo/list", null, {
params: {
...this.searchObj,
...this.page,
parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
},
})
.then((res) => {
if (res?.data) {
this.tableData = res.data.records;
this.page.total = res.data.total;
ids && this.$confirm("删除网格后，会清除网格内网格员的责任家庭信息，如有下级网格，会同步删除下级网格所有数据!", {
type: "error",
}).then(() => {
this.instance.post("/app/appgirdinfo/delete", null, {params: {ids}}).then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList();
this.getTreeList();
}
});
}).catch(() => 0);
},
deleteTree(ids) {
ids && this.$confirm("是否要删除该网格区块？", {
type: "error",
}).then(() => {
this.instance.post("/app/appgirdinfo/delete", null, {
params: {ids}
}).then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getTreeList();
}
});
}).catch(() => 0);
},
getList() {
this.instance.post("/app/appgirdinfo/list", null, {
params: {
...this.searchObj,
...this.page,
parentGirdId: this.isTopGrid ? '' : this.info.id,
},
}).then((res) => {
if (res?.data) {
this.tableData = res.data.records;
this.page.total = res.data.total;
}
});
},
handleSelectionChange(val) {
this.ids = [];
@@ -393,14 +279,13 @@ export default {
},
//添加二级网格
addTwoLevel() {
this.info = { ...this.treeObj.treeList[0] };
this.info = {...this.treeObj.treeList[0]};
this.toAdd()
},
toAdd() {
this.$emit('change', {
type: 'Add',
params: this.info,
isEdit: this.isEdit
let {id: parentGirdId, girdName: parentGirdName} = this.info
this.$router.push({
hash: "#add", query: {parentGirdId, parentGirdName}
})
},
goBack() {
@@ -410,165 +295,16 @@ 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);
});
},
see(row) {
this.info = { ...row };
this.isEdit = true;
this.toAdd()
},
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;
}
}
showEdit(id) {
this.$router.push({hash: "#add", query: {id}})
},
//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;
this.instance
.post(
`/app/appgirdinfo/addOrUpdate`,
{
...this.editRow,
points: path,
},
null
)
.then((res) => {
if (res.code == 0) {
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) => {
this.path.push({ lat: e.getLat(), lng: e.getLng() });
});
this.overlays.push(obj);
confirm(row, points) {
this.instance.post(`/app/appgirdinfo/addOrUpdate`, {...row, points}).then((res) => {
if (res.code == 0) {
this.$message.success("提交成功!")
this.getList();
}
});
},
resetSearch() {
@@ -577,6 +313,19 @@ export default {
});
this.getList();
},
showGridMembers(row) {
if (row.girdMemberNumber > 0) {
this.gridInfo = this.$copy(row)
this.instance.post("/app/appgirdmemberinfo/listByGirdIdByThree", null, {
params: {girdId: row.id}
}).then(res => {
if (res?.data) {
this.gridInfo.tableData = res.data
this.dialog = true
}
})
} else this.$message.warning("当前网格无成员")
}
},
};
</script>
@@ -585,11 +334,12 @@ export default {
.app-grid-block {
width: 100%;
height: 100%;
::v-deep .el-tree {
background: transparent;
.el-tree-node__expand-icon.is-leaf {
color: transparent!important;
color: transparent !important;
}
.el-tree-node__content > .el-tree-node__expand-icon {
@@ -616,52 +366,60 @@ export default {
}
.is-current > .el-tree-node__content {
color: #fff !important;
&:hover {
background: #2266FF;
color: #fff;
}
background: #2266FF;
span {
.el-tooltip {
color: #fff;
}
}
}
.flex-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
& > div {
display: flex;
}
}
.mt10 {
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;
#panel {
position: absolute;
height: 400px;
right: 30px;
top: 20px;
width: 280px;
overflow: hidden;
z-index: 10000;
}
.ai-dialog__content {
max-height: unset !important;
padding-bottom: 0;
height: 100%;
.tipinput {
position: absolute;
width: 200px;
height: 38px;
left: 20px;
top: 20px;
z-index: 10000;
.ai-dialog__content--wrapper {
padding-right: 0 !important;
}
}
}
}
}

233
packages/grid/AppGridBlock/components/mapPlotting.vue Normal file
View File

@@ -0,0 +1,233 @@
<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() {
if (this.points?.length == 0) {
let {polyEditor} = this
polyEditor.close();
polyEditor.setTarget();
polyEditor.open();
} else this.$message.error("请先清除已标绘图形!")
},
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}) => {
if (target) {
this.overlays.push(target);
this.points = 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>

603
packages/grid/AppGridMap/components/list.vue
View File

@@ -13,15 +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>
: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 :content="node.label">
<div class="el-tree-node__label" v-text="node.label"/>
</el-tooltip>
</template>
</el-tree>
</div>
</div>
@@ -33,295 +38,289 @@
</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/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)
})
}
})
},
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)
})
}
})
},
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()
return false
}
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).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)
if (!arr.length) {
return this.$message.error('该网格还未标绘')
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)
}
})
},
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)
}
},
})
},
handleNodeClick(val) {
this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).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)
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 (!arr.length) {
return this.$message.error('该网格还未标绘')
}
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)
})
this.renderGridMap(arr)
}
})
},
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>
@@ -333,31 +332,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>

99
packages/grid/AppGridMember/AppGridMember.vue
View File

@@ -1,27 +1,7 @@
<template>
<ai-list class="AppGridMember" v-if="!isShowDetail">
<template slot="title">
<ai-title title="网格员管理" :isShowBottomBorder="false"></ai-title>
</template>
<template slot="tabs">
<el-tabs v-model="currIndex">
<el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
<component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance"
:dict="dict" :permissions="permissions"/>
</el-tab-pane>
</el-tabs>
</template>
</ai-list>
<Add v-else-if="component === 'Add'" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
@change="onChange"></Add>
<Family v-else-if="component === 'Family'" :params="params" :instance="instance" :dict="dict"
:permissions="permissions" @change="onChange"></Family>
<MonitorUser v-else-if="component === 'MonitorUser'" :params="params" :instance="instance" :dict="dict"
:permissions="permissions" @change="onChange"></MonitorUser>
<ApplyDetail v-else-if="component === 'ApplyDetail'" :params="params" :instance="instance" :dict="dict"
:permissions="permissions" @change="onChange"></ApplyDetail>
<ApplyAdd v-else-if="component === 'ApplyAdd'" :params="params" :instance="instance" :dict="dict"
:permissions="permissions" @change="onChange"></ApplyAdd>
<keep-alive include="GmList">
<component :is="currentPage" v-bind="$props" @change="onChange"/>
</keep-alive>
</template>
<script>
@@ -32,39 +12,29 @@ import ApplyDetail from './components/ApplyDetail'
import ApplyAdd from './components/ApplyAdd'
import Family from './components/Family'
import MonitorUser from './components/MonitorUser'
import GmList from "./components/gmList";
export default {
name: "AppGridMember",
label: "网格管理员",
props: {
instance: Function,
dict: Object,
permissions: Function
},
data() {
return {
component: "List",
params: {},
include: [],
currIndex: '0',
isShowDetail: false
};
},
computed: {
tabs() {
return [
{label: '网格员信息', name: 'List', comp: List, permission: ''},
{label: '申报信息', name: 'ApplyList', comp: ApplyList, permission: 'app_appgirdmemberapply_detail'}
].filter(item => {
return item.name !== 'ApplyList' || this.permissions(item.permission)
})
currentPage() {
let {hash} = this.$route
return hash == "#Family" ? Family :
hash == "#MonitorUser" ? MonitorUser :
hash == "#Add" ? Add :
hash == "#ApplyAdd" ? ApplyAdd :
hash == "#ApplyDetail" ? ApplyDetail :
GmList
}
},
components: {
GmList,
Add,
List,
Family,
@@ -76,46 +46,9 @@ export default {
methods: {
onChange(data) {
if (data.type === "Add") {
this.component = "Add"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "Family") {
this.component = "Family"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "MonitorUser") {
this.component = "MonitorUser"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "ApplyDetail") {
this.component = "ApplyDetail"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "ApplyAdd") {
this.component = "ApplyAdd"
this.isShowDetail = true
this.params = data.params
}
if (data.type === "list") {
this.component = "List"
this.isShowDetail = false
this.params = data.params
}
if (data.type === "ApplyList") {
this.component = "ApplyList"
this.isShowDetail = false
this.params = data.params
}
let {type, params: query} = data,
hash = ["ApplyList", "list"].includes(type) ? "" : "#" + type
this.$router.push({hash, query})
}
}
}

11
packages/grid/AppGridMember/components/ApplyAdd.vue
View File

@@ -1,7 +1,7 @@
<template>
<ai-detail class="content-add">
<template slot="title">
<ai-title :title="params.id ? '编辑' : '添加'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
<ai-title :title="$route.query.id ? '编辑' : '添加'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</ai-title>
</template>
<template slot="content">
@@ -35,7 +35,6 @@
props: {
instance: Function,
dict: Object,
params: Object
},
data () {
@@ -51,9 +50,9 @@
},
created () {
if (this.params && this.params.id) {
this.id = this.params.id
this.getInfo(this.params.id)
if ( this.$route.query.id) {
this.id = this.$route.query.id
this.getInfo(this.$route.query.id)
}
},
@@ -76,7 +75,7 @@
this.isLoading = true
this.instance.post(`/app/appgirdmemberapply/addOrUpdate`, {
...this.form,
id: this.params.id || ''
id: this.$route.query.id || ''
}).then(res => {
if (res.code == 0) {
this.$message.success('提交成功')

69
packages/grid/AppGridMember/components/ApplyDetail.vue
View File

@@ -19,46 +19,45 @@
</template>
<script>
export default {
name: 'ApplyDetail',
export default {
name: 'ApplyDetail',
props: {
instance: Function,
dict: Object,
params: Object
props: {
instance: Function,
dict: Object,
},
data() {
return {
info: {},
id: ''
}
},
created() {
if (this.$route.query.id) {
this.id = this.$route.query.id
this.getInfo(this.$route.query.id)
}
},
methods: {
getInfo(id) {
this.instance.post(`/app/appgirdmemberapply/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) {
this.info = res.data
}
})
},
data () {
return {
info: {},
id: ''
}
},
created () {
if (this.params && this.params.id) {
this.id = this.params.id
this.getInfo(this.params.id)
}
},
methods: {
getInfo (id) {
this.instance.post(`/app/appgirdmemberapply/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) {
this.info = res.data
}
})
},
cancel (isRefresh) {
this.$emit('change', {
type: 'ApplyList',
isRefresh: !!isRefresh
})
}
cancel(isRefresh) {
this.$emit('change', {
type: 'ApplyList',
isRefresh: !!isRefresh
})
}
}
}
</script>
<style scoped lang="scss">

10
packages/grid/AppGridMember/components/ApplyList.vue
View File

@@ -144,18 +144,14 @@
add (id) {
this.$emit('change', {
type: 'ApplyAdd',
params: {
id: id || ''
}
params: {id}
})
},
toDetail (id) {
this.$emit('change', {
type: 'ApplyDetail',
params: {
id
}
params: {id}
})
},
@@ -176,4 +172,4 @@
</script>
<style lang="scss" scoped>
</style>
</style>

58
packages/grid/AppGridMember/components/Family.vue
View File

@@ -64,8 +64,8 @@
</el-select>
</el-form-item>
<el-form-item>
<ai-table-select :instance="instance" :action="`/app/appresident/list?householdName=1&areaId=${areaId}&auditStatus=1`"
@select="v=>chooseUser=v" multiple/>
<ai-table-select :instance="instance" :action="`/app/appresident/list?householdName=1&areaId=${areaId||''}&auditStatus=1`"
@select="v=>chooseUser=v" multiple/>
</el-form-item>
</el-form>
</ai-dialog>
@@ -81,7 +81,6 @@ export default {
props: {
instance: Function,
dict: Object,
params: Object
},
data() {
@@ -94,8 +93,6 @@ export default {
},
isLoading: false,
form: {},
userList: [],
name: '',
chooseUser: [],
dialog: false,
total: 10,
@@ -120,20 +117,16 @@ export default {
computed: {
...mapState(['user'])
},
created() {
this.areaId = this.user.info.areaId
this.disabledLevel = this.user.info.areaList.length
this.dict.load('epidemicDangerousAreaLevel').then(() => {
this.getGirdList()
this.getList()
this.getUserList()
})
this.areaId = this.user.info.areaId || ""
this.disabledLevel = this.user.info.areaList?.length || 0
this.getGirdList()
this.getList()
this.dict.load('epidemicDangerousAreaLevel')
},
methods: {
getGirdList() {
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.$route.query.id}`).then(res => {
if (res.code == 0) {
this.girdList = res.data
}
@@ -147,7 +140,7 @@ export default {
this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
params: {
...this.search,
girdMemberId: this.params.id,
girdMemberId: this.$route.query.id,
areaId: this.areaId
}
}).then(res => {
@@ -167,11 +160,6 @@ export default {
handleSelectionChange(e) {
this.ids = e.map(v => v.gmrId)
},
clearAll() {
this.chooseUser = []
},
onConfirm() {
if (!this.girdId) {
return this.$message.error('请选择网格')
@@ -183,7 +171,7 @@ export default {
const residentList = this.chooseUser.map(v => {
return {
girdMemberId: this.params.id,
girdMemberId: this.$route.query.id,
name: v.name,
residentId: v.id,
girdId: this.girdId
@@ -196,42 +184,18 @@ export default {
this.current = 1
this.getList()
this.$message.success('添加成功')
this.closeDialog()
this.dialog = false
}
})
},
closeDialog() {
this.dialog = false
this.chooseUser = []
this.girdId = ''
this.name = ''
this.areaId = this.user.info.areaId
this.getUserList()
},
del(e) {
this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
},
getUserList() {
this.isLoading = true
this.instance.post(`/app/appresident/list`, null, {
params: {
current: 1,
size: 200,
con: this.name,
householdName: 1,
areaId: this.areaId,
}
}).then(res => {
if (res.code == 0) {
this.userList = res.data.records
}
this.isLoading = false
})
},
onBack() {
this.$emit('change', {
type: 'list'

41
packages/grid/AppGridMember/components/MonitorUser.vue
View File

@@ -83,7 +83,6 @@ export default {
props: {
instance: Function,
dict: Object,
params: Object
},
data() {
@@ -94,9 +93,7 @@ export default {
name: '',
girdId: ''
},
isLoading: false,
form: {},
userList: [],
name: '',
chooseUser: [],
isShow: false,
@@ -129,13 +126,12 @@ export default {
this.dict.load('epidemicDangerousAreaLevel').then(() => {
this.getGirdList()
this.getList()
this.getUserList()
})
},
methods: {
getGirdList() {
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.$route.query.id}`).then(res => {
if (res.code == 0) {
this.girdList = res.data
}
@@ -149,7 +145,7 @@ export default {
this.instance.post(`/app/appgirdmemberpoverty/listByGirdMemberByWeb`, null, {
params: {
...this.search,
girdMemberId: this.params.id,
girdMemberId: this.$route.query.id,
}
}).then(res => {
if (res.code == 0) {
@@ -168,11 +164,6 @@ export default {
handleSelectionChange(e) {
this.ids = e.map(v => v.gmpId)
},
clearAll() {
this.chooseUser = []
},
onConfirm() {
if (!this.girdId) {
return this.$message.error('请选择网格')
@@ -184,7 +175,7 @@ export default {
const povertyList = this.chooseUser.map(v => {
return {
girdMemberId: this.params.id,
girdMemberId: this.$route.query.id,
name: v.split('~')[0],
girdId: this.girdId,
povertyId: v.split('~')[1]
@@ -207,38 +198,12 @@ export default {
this.girdId = ''
this.name = ''
this.areaId = this.user.info.areaId
this.getUserList()
},
del(e) {
this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
},
getUserList() {
this.isLoading = true
this.instance.post(`/app/apppreventionreturntopoverty/list`, null, {
params: {
current: 1,
size: 200,
con: this.name,
isHousehold: 1,
areaId: this.areaId
}
}).then(res => {
if (res.code == 0) {
this.userList = res.data.records
}
this.isLoading = false
})
},
onBack() {
this.$emit('change', {
type: 'list'
})
},
remove(ids) {
this.$confirm('确定删除该数据？').then(() => {
this.instance.post(`/app/appgirdmemberpoverty/delete`, null, {

301
packages/grid/AppGridMember/components/add.vue
View File

@@ -6,22 +6,23 @@
</template>
<template #content>
<el-form
ref="rules"
:model="forms"
:rules="formRules"
size="small"
label-suffix="："
label-width="136px">
<ai-card title="基础信息" >
<template #right v-if="title=='网格员详情'">
ref="rules"
:model="forms"
:rules="formRules"
size="small"
label-suffix="："
label-width="136px">
<ai-card title="基础信息">
<template #right v-if="title=='网格员详情'">
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editOne==false" @click="editOne=true">修改</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="searchDetail(),editOne=false">取消</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true"
@click="searchDetail(),editOne=false">取消</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="save()">保存</span>
</template>
<template slot="content">
<div class="above" v-if="editOne==true">
<div class="left">
<el-form-item label="网格员姓名" prop="name" >
<el-form-item label="网格员姓名" prop="name">
<el-input v-model="forms.name" placeholder="请选择网格员" disabled>
<template #append>
<ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
@@ -30,30 +31,20 @@
</template>
</el-input>
</el-form-item>
<el-form-item label="选用日期" prop="selectionDate" >
<el-date-picker
v-model="forms.selectionDate"
type="date"
style="width: 100%"
value-format="yyyy-MM-dd"
size="medium"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="身份证号" prop="idNumber" >
<el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
<el-form-item label="身份证号" prop="idNumber">
<el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
</el-form-item>
</div>
<div class="right">
<el-form-item label="照片" prop="photo">
<!-- <ai-uploader :instance="instance" v-model="photoList" :limit="1" @change="photoChange"></ai-uploader> -->
<ai-avatar :instance="instance" v-model="forms.photo"/>
<ai-avatar :instance="instance" v-model="forms.photo"/>
</el-form-item>
</div>
</div>
<div class="above" v-if="editOne==true">
<div class="left">
<el-form-item label="出生日期" prop="birthday" >
<el-form-item label="出生日期" prop="birthday">
<el-date-picker
v-model="forms.birthday"
type="date"
@@ -63,70 +54,71 @@
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="联系电话" prop="phone" >
<el-form-item label="联系电话" prop="phone">
<el-input v-model.number="forms.phone" placeholder="请输入…" maxlength="11" show-word-limit></el-input>
</el-form-item>
</div>
<div class="right">
<el-form-item label="性别" prop="sex" >
<el-form-item label="性别" prop="sex">
<el-select size="medium" style="width: 100%" v-model="forms.sex" placeholder="请选择..." clearable>
<el-option
v-for="(item,i) in dict.getDict('sex')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
v-for="(item,i) in dict.getDict('sex')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电子邮箱" prop="mail" >
<el-input v-model="forms.mail" placeholder="请输入…"></el-input>
<el-form-item label="电子邮箱" prop="mail">
<el-input v-model="forms.mail" placeholder="请输入…"></el-input>
</el-form-item>
</div>
</div>
<template v-if="editOne==false">
<template v-if="editOne==false">
<div class="above">
<div class="left">
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
<ai-info-item label="网格员姓名："><span >{{forms.name}}</span></ai-info-item>
<ai-info-item label="选用日期："><span >{{forms.selectionDate}}</span></ai-info-item>
<ai-info-item label="身份证号："><span >{{forms.idNumber}}</span></ai-info-item>
<ai-info-item label="性别："><span >{{dict.getLabel('sex', forms.sex)}}</span></ai-info-item>
<ai-info-item label="出生日期："><span >{{forms.birthday}}</span></ai-info-item>
<ai-info-item label="电子邮箱："><span >{{forms.mail}}</span></ai-info-item>
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
<ai-info-item label="网格员姓名："><span>{{ forms.name }}</span></ai-info-item>
<ai-info-item label="身份证号："><span>{{ forms.idNumber }}</span></ai-info-item>
<ai-info-item label="性别："><span>{{ dict.getLabel('sex', forms.sex) }}</span></ai-info-item>
<ai-info-item label="出生日期："><span>{{ forms.birthday }}</span></ai-info-item>
<ai-info-item label="电子邮箱："><span>{{ forms.mail }}</span></ai-info-item>
</ai-wrapper>
</div>
<div class="right">
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
<ai-wrapper label-width="120px" :columnsNumber="1" style="margin-top: 16px;">
<ai-info-item label="照片：" v-if="forms.photo">
<span >
<span>
<ai-uploader :instance="instance" v-model="photoList" disabled :limit="1" @change="photoChange"></ai-uploader>
</span>
</ai-info-item>
<ai-info-item label="联系电话："><span >{{forms.phone}}</span></ai-info-item>
<ai-info-item label="联系电话："><span>{{ forms.phone }}</span></ai-info-item>
</ai-wrapper>
</div>
</div>
</template>
</template>
</ai-card>
<ai-card title="关联信息" >
<template #right v-if="title=='网格员详情'">
<ai-card title="关联信息">
<template #right v-if="title=='网格员详情'">
<span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editTwo==false" @click="editTwo=true">修改</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="searchDetail(),editTwo=false">取消</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true"
@click="searchDetail(),editTwo=false">取消</span>
<span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="save()">保存</span>
</template>
<template slot="content">
<template v-if="editTwo==true">
<el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
<el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList" :key="'选项' + (index + 1)">
<el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList"
:key="'选项' + (index + 1)">
<div class="form-flex">
<el-select v-model="item.checkType" placeholder="请选择网格角色">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请选择责任网格">
@@ -142,13 +134,13 @@
</el-form-item>
<div class="above">
<div class="left">
<el-form-item label="是否特殊网格员" prop="isGirdMember" >
<el-form-item label="是否特殊网格员" prop="isGirdMember">
<el-radio-group v-model="forms.isGirdMember">
<el-radio label="0">否</el-radio>
<el-radio label="1">是</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="政治面貌" prop="politicsStatus" >
<el-form-item label="政治面貌" prop="politicsStatus">
<el-select v-model="forms.politicsStatus" size="small" style="width: 100%" placeholder="请选择..." clearable>
<el-option v-for="(item,i) in dict.getDict('politicsStatus')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
</el-select>
@@ -160,31 +152,31 @@
<el-option v-for="(item,i) in dict.getDict('girdMemberType')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
<el-form-item label="学历" prop="education" >
<el-form-item label="学历" prop="education">
<el-select v-model="forms.education" style="width: 100%" size="small" placeholder="请选择..." clearable>
<el-option v-for="(item,i) in dict.getDict('education')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</div>
</div>
<el-form-item label="个人简介" prop="introduction" >
<el-form-item label="个人简介" prop="introduction">
<el-input
type="textarea"
maxlength="200"
show-word-limit
:rows="4"
placeholder="请输入内容"
v-model="forms.introduction">
type="textarea"
maxlength="200"
show-word-limit
:rows="4"
placeholder="请输入内容"
v-model="forms.introduction">
</el-input>
</el-form-item>
<el-form-item label="人生格言" prop="motto" >
<el-form-item label="人生格言" prop="motto">
<el-input
type="textarea"
maxlength="200"
show-word-limit
:rows="4"
placeholder="请输入内容"
v-model="forms.motto">
type="textarea"
maxlength="200"
show-word-limit
:rows="4"
placeholder="请输入内容"
v-model="forms.motto">
</el-input>
</el-form-item>
</template>
@@ -194,39 +186,40 @@
<ai-info-item label="是否特殊网格员：">
<span>{{ !forms.isGirdMember ? '-' : forms.isGirdMember === '0' ? '否' : '是' }}</span>
</ai-info-item>
<ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span >{{dict.getLabel('girdMemberType', forms.girdMemberType)}}</span></ai-info-item>
<ai-info-item label="政治面貌："><span >{{dict.getLabel('politicsStatus', forms.politicsStatus)}}</span></ai-info-item>
<ai-info-item label="学历："><span >{{dict.getLabel('education', forms.education)}}</span></ai-info-item>
<ai-info-item label="人生格言：" style="width: 100%;"><span >{{forms.motto}}</span></ai-info-item>
<ai-info-item label="个人简介：" style="width: 100%;"><span >{{forms.introduction}}</span></ai-info-item>
<ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span>{{ dict.getLabel('girdMemberType', forms.girdMemberType) }}</span>
</ai-info-item>
<ai-info-item label="政治面貌："><span>{{ dict.getLabel('politicsStatus', forms.politicsStatus) }}</span></ai-info-item>
<ai-info-item label="学历："><span>{{ dict.getLabel('education', forms.education) }}</span></ai-info-item>
<ai-info-item label="人生格言：" style="width: 100%;"><span>{{ forms.motto }}</span></ai-info-item>
<ai-info-item label="个人简介：" style="width: 100%;"><span>{{ forms.introduction }}</span></ai-info-item>
</ai-wrapper>
</template>
</template>
</ai-card>
</el-form>
<ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true" border width="720px">
<ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true" border width="720px">
<div class="grid">
<el-tree
:data="treeObj.treeList"
:props="treeObj.defaultProps"
node-key="id"
ref="tree"
:check-strictly="true"
show-checkbox
:default-checked-keys="currCheckedKeys"
default-expand-all
@check="onCheckChange">
:data="treeObj.treeList"
:props="treeObj.defaultProps"
node-key="id"
ref="tree"
:check-strictly="true"
show-checkbox
:default-checked-keys="currCheckedKeys"
default-expand-all
@check="onCheckChange">
</el-tree>
</div>
<div class="dialog-footer" slot="footer" >
<el-button size="medium" @click="showGrid=false">取消</el-button>
<el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
<div class="dialog-footer" slot="footer">
<el-button size="medium" @click="showGrid=false">取消</el-button>
<el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
</div>
</ai-dialog>
</template>
<template #footer v-if="title=='添加网格员'">
<el-button @click="cancel(false)" class="delete-btn footer-btn" >取 消</el-button>
<el-button type="primary" @click="save()" class="footer-btn">提 交</el-button>
<el-button @click="cancel(false)" class="delete-btn footer-btn">取 消</el-button>
<el-button type="primary" @click="save()" class="footer-btn">提 交</el-button>
</template>
</ai-detail>
</section>
@@ -239,7 +232,6 @@ export default {
instance: Function,
dict: Object,
permissions: Function,
params: Object,
},
data() {
return {
@@ -290,7 +282,7 @@ export default {
},
created() {
this.beforeSelectTree()
if (this.params.id) {
if (this.$route.query.id) {
this.searchDetail();
this.title = "网格员详情";
this.editOne = false;
@@ -302,7 +294,7 @@ export default {
}
},
computed: {
currCheckedKeys () {
currCheckedKeys() {
if (this.forms && this.forms.girdInfoList && this.forms.girdInfoList[this.currIndex] && this.forms.girdInfoList[this.currIndex].id) {
return [this.forms.girdInfoList[this.currIndex].id]
}
@@ -324,14 +316,11 @@ export default {
};
return {
name: [
{ required: true, message: "请输入网格员姓名", trigger: "change" },
{required: true, message: "请输入网格员姓名", trigger: "change"},
],
selectionDate: [
{ required: true, message: "请选择选用日期", trigger: "change" },
],
phone: [{ required: true, validator: phonePass, trigger: "blur" }],
phone: [{required: true, validator: phonePass, trigger: "blur"}],
girdInfoList: [
{ required: true, message: "请选择责任网络", trigger: "change" },
{required: true, message: "请选择责任网络", trigger: "change"},
],
mail: [
{
@@ -344,14 +333,14 @@ export default {
},
},
methods: {
cancel (isRefresh) {
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
},
onCheckChange (e) {
onCheckChange(e) {
this.$nextTick(() => {
this.$refs.tree.getCheckedKeys().forEach(v => {
this.$refs.tree.setChecked(v, false)
@@ -360,11 +349,11 @@ export default {
})
},
removeGrid (index) {
removeGrid(index) {
this.forms.girdInfoList.splice(index, 1)
},
addGrid () {
addGrid() {
this.forms.girdInfoList.push({
id: '',
girdName: '',
@@ -375,10 +364,13 @@ export default {
this.forms.photo = val[0].url;
},
getSelectPerson(val) {
this.forms.name = val[0].name;
this.forms.phone = val[0].phone;
this.forms.userId = val[0].sysUserId
this.forms.wxUserId = val[0].id
if (val.length) {
this.forms.name = val[0].name;
this.forms.phone = val[0].phone;
this.forms.userId = val[0].sysUserId
this.forms.wxUserId = val[0].id
this.$refs.rules.validateField('name')
}
},
getCheckedTree() {
if (!this.$refs.tree.getCheckedNodes().length) {
@@ -423,17 +415,9 @@ 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`,{
this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`, {
...this.forms,
girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
}).then((res) => {
@@ -453,31 +437,30 @@ export default {
});
},
searchDetail() {
this.instance
.post(`/app/appgirdmemberinfo/queryDetailById`, null, {
params: { id: this.params.id },
})
.then((res) => {
if (res.code == 0) {
this.forms = {
...res.data,
girdInfoList: res.data.girdInfoList || []
};
this.users = [{
name: res.data.name,
phone: res.data.phone,
userId: res.data.id,
id: res.data.wxUserId
}]
this.girdInfoStr = ''
this.photoList = [{ url: this.forms.photo }];
if (res.data.girdInfoList) {
res.data.girdInfoList.forEach((e) => {
this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName}&emsp;`
})
}
let {id} = this.$route.query
this.instance.post(`/app/appgirdmemberinfo/queryDetailById`, null, {
params: {id}
}).then((res) => {
if (res.code == 0) {
this.forms = {
...res.data,
girdInfoList: res.data.girdInfoList || []
};
this.users = [{
name: res.data.name,
phone: res.data.phone,
userId: res.data.id,
id: res.data.wxUserId
}]
this.girdInfoStr = ''
this.photoList = [{url: this.forms.photo}];
if (res.data.girdInfoList) {
res.data.girdInfoList.forEach((e) => {
this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName}&emsp;`
})
}
});
}
});
},
},
};
@@ -487,26 +470,28 @@ export default {
.add {
height: 100%;
.form-flex {
display: flex;
align-items: center;
.form-flex {
display: flex;
align-items: center;
& > .el-button {
margin-left: 20px;
}
.el-input {
width: 300px;
margin-left: 20px;
}
::v-deep .el-form-item__content {
margin-left: 0!important;
}
& > .el-button {
margin-left: 20px;
}
.el-input {
width: 300px;
margin-left: 20px;
}
::v-deep .el-form-item__content {
margin-left: 0 !important;
}
}
.ai-detail__title {
background-color: #fff;
}
.ai-detail__content {
.ai-detail__content--wrapper {
.el-form {
@@ -516,9 +501,11 @@ export default {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.el-form-item {
width: 48%;
}
.buildingTypes {
width: 100%;
}
@@ -526,16 +513,20 @@ export default {
}
}
}
::v-deep .el-tag {
margin-right: 8px;
color: #333333;
}
.footer-btn {
width: 92px;
}
.above{
.above {
display: flex;
.left, .right{
.left, .right {
flex: 1;
}
}

55
packages/grid/AppGridMember/components/gmList.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<section class="gmList">
<ai-list class="AppGridMember">
<template slot="title">
<ai-title title="网格员管理" :isShowBottomBorder="false"></ai-title>
</template>
<template slot="tabs">
<el-tabs v-model="currIndex">
<el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
<component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" lazy :instance="instance"
:dict="dict" :permissions="permissions" v-on="$listeners"/>
</el-tab-pane>
</el-tabs>
</template>
</ai-list>
</section>
</template>
<script>
import List from "./list";
import ApplyList from "./ApplyList";
export default {
name: "gmList",
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
tabs() {
return [
{label: '网格员信息', name: 'List', comp: List, permission: ''},
{label: '申报信息', name: 'ApplyList', comp: ApplyList, permission: 'app_appgirdmemberapply_detail'}
].filter(item => {
return item.name !== 'ApplyList' || this.permissions(item.permission)
})
}
},
data() {
return {
currIndex: '0',
}
},
methods: {},
created() {
}
}
</script>
<style lang="scss" scoped>
.gmList {
height: 100%;
}
</style>

155
packages/grid/AppGridMember/components/list.vue
View File

@@ -1,54 +1,43 @@
<template>
<ai-list class="list" isTabs>
<template slot="content">
<ai-search-bar bottomBorder>
<template slot="left">
<el-date-picker
v-model="searchObj.selectionDate"
type="date"
@change="(page.current = 1), getList()"
value-format="yyyy-MM-dd"
size="small"
placeholder="选用时间">
</el-date-picker>
</template>
<template slot="right">
<el-input
v-model="searchObj.name"
size="small"
placeholder="网格员/责任网格"
v-throttle="() => {page.current = 1, getList()}"
clearable
@clear="(searchObj.name = '', page.current = 1), getList()"
suffix-icon="iconfont iconSearch" />
</template>
</ai-search-bar>
<ai-search-bar style="padding: 16px 0 0">
<template slot="left">
<el-button
icon="iconfont iconAdd"
type="primary"
size="small"
@click="add('')"
>添加</el-button
icon="iconfont iconAdd"
type="primary"
size="small"
@click="add('')"
>添加
</el-button
>
<el-button
icon="iconfont iconDelete"
@click="deleteById(ids.join(','))"
:disabled="!Boolean(ids.length)"
>删除</el-button
icon="iconfont iconDelete"
@click="deleteById(ids.join(','))"
:disabled="!Boolean(ids.length)"
>删除
</el-button
>
</template>
<template slot="right">
<el-input
v-model="searchObj.name"
size="small"
placeholder="网格员/责任网格"
v-throttle="() => {page.current = 1, getList()}"
clearable
@clear="(searchObj.name = '', page.current = 1), getList()"
suffix-icon="iconfont iconSearch"/>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="page.total"
ref="aitableex"
:current.sync="page.current"
:size.sync="page.size"
@selection-change="(v) => (ids = v.map((e) => e.id))"
@getList="getList()">
:tableData="tableData"
:col-configs="colConfigs"
:total="page.total"
:current.sync="page.current"
:size.sync="page.size"
@selection-change="(v) => (ids = v.map((e) => e.id))"
@getList="getList()">
<el-table-column label="操作" slot="options" align="center" fixed="right" width="220">
<template slot-scope="{ row }">
<div class="table-options">
@@ -97,67 +86,42 @@ export default {
},
computed: {
colConfigs() {
let _ = this;
return [
{
type: "selection",
},
{
prop: "name",
label: "网格员姓名",
},
{
prop: "girdInfoListStr",
align: "center",
label: "责任网格",
},
{
prop: "phone",
align: "center",
label: "联系电话",
},
{
prop: "selectionDate",
align: "center",
label: "选用时间",
},
{type: "selection"},
{prop: "name", label: "网格员姓名"},
{prop: "girdInfoListStr", align: "center", label: "责任网格"},
{prop: "phone", align: "center", label: "联系电话"},
{prop: "createTime", align: "center", label: "创建时间"},
];
},
},
methods: {
getList() {
this.instance
.post("/app/appgirdmemberinfo/list", null, {
params: {
...this.searchObj,
...this.page,
},
})
.then((res) => {
if (res.code == 0) {
this.tableData = res.data.records;
this.page.total = res.data.total;
}
});
this.instance.post("/app/appgirdmemberinfo/list", null, {
params: {...this.searchObj, ...this.page}
}).then((res) => {
if (res?.data) {
this.tableData = res.data.records;
this.page.total = res.data.total;
}
})
},
deleteById(ids) {
ids &&
this.$confirm("是否要删除该网格员？", {
type: "error",
ids && this.$confirm("是否要删除该网格员？", {
type: "error",
}).then(() => {
this.instance
.post("/app/appgirdmemberinfo/delete", null, {
params: {ids},
})
.then(() => {
this.instance
.post("/app/appgirdmemberinfo/delete", null, {
params: { ids },
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList();
}
});
})
.catch(() => {});
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList();
}
});
})
.catch(() => 0);
},
add(id) {
this.$emit('change', {
@@ -167,8 +131,7 @@ export default {
}
})
},
toMonitorUser (id) {
toMonitorUser(id) {
this.$emit('change', {
type: 'MonitorUser',
params: {
@@ -176,8 +139,7 @@ export default {
}
})
},
toFamily (id) {
toFamily(id) {
this.$emit('change', {
type: 'Family',
params: {
@@ -185,7 +147,6 @@ export default {
}
})
},
handleSelectionChange(val) {
this.ids = [];
val.map((e) => {
@@ -197,7 +158,7 @@ export default {
this.searchObj[e] = "";
});
this.getList();
},
}
},
};
</script>

167
packages/grid/AppHouseMap/AppHouseMap.vue
View File

@@ -20,7 +20,7 @@
</div>
<div class="search-result" v-if="isShowSearch && searchList.length">
<div class="search-result__item" v-for="(item, index) in searchList" :key="index"
@click="chooseCommunity(item)">
@click="chooseCommunity(item)">
<i class="search-icon iconfont iconLocation"></i>
<h2 v-if="type != 1">{{ item.residentName }}</h2>
<span v-if="type != 1">{{ item.createAddress }}</span>
@@ -42,23 +42,23 @@
<h2>户主信息</h2>
<div class="community-info__item">
<label>所属村</label>
<span>{{info.areaName}}</span>
<span>{{ info.areaName }}</span>
</div>
<div class="community-info__item">
<label>姓名</label>
<span style="color:#2266FF;">{{info.name}}</span>
<span style="color:#2266FF;">{{ info.name }}</span>
</div>
<div class="community-info__item">
<label>联系电话</label>
<span style="color:#2266FF;">{{info.phone}}</span>
<span style="color:#2266FF;">{{ info.phone }}</span>
</div>
<div class="community-info__item">
<label>性别</label>
<span>{{info.sex == 1 ? '男' : '女'}}</span>
<span>{{ info.sex == 1 ? '男' : '女' }}</span>
</div>
<div class="community-info__item">
<label>年龄</label>
<span>{{info.age}}</span>
<span>{{ info.age }}</span>
</div>
<div class="community-info__item bg-fff"></div>
</div>
@@ -66,22 +66,22 @@
<h2>宅基地信息</h2>
<div class="community-info__item">
<label>住宅建筑面积</label>
<span>{{info.liveBuildingArea}}m²</span>
<span>{{ info.liveBuildingArea }}m²</span>
</div>
<div class="community-info__item">
<label>建筑层数</label>
<span>{{info.buildingFloorNumber}}层</span>
<span>{{ info.buildingFloorNumber }}层</span>
</div>
<div class="community-info__item">
<label>建筑高度</label>
<span>{{info.buildingHeight}}m</span>
<span>{{ info.buildingHeight }}m</span>
</div>
</div>
<div class="community-info__wrapper" v-if="!info.name">
<h2>房屋信息</h2>
<div class="community-info__item">
<label>所属社区</label>
<span>{{ info.areaName}}</span>
<span>{{ info.areaName }}</span>
</div>
<div class="community-info__item">
<label>所属小区</label>
@@ -89,7 +89,7 @@
</div>
<div class="community-info__item">
<label>房屋类型</label>
<span>{{ dict.getLabel("communityBuildingType",info.buildingType) }}</span>
<span>{{ dict.getLabel("communityBuildingType", info.buildingType) }}</span>
</div>
<div class="community-info__item">
<label>楼长姓名</label>
@@ -97,27 +97,28 @@
</div>
<div class="community-info__item">
<label>楼长电话</label>
<span>{{ info.managerPhone}}</span>
<span>{{ info.managerPhone }}</span>
</div>
</div>
<div class="community-btn" v-if="!info.name">
<el-button icon="iconfont iconloudongmoxing" size="small"
@click="showStatistics=true; $router.push({query: {communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}})">楼栋模型
@click="showStatistics=true; $router.push({query: {communityId: info.communityId, buildingId: info.id,unitNum:house ? house.unitNumber : 1,buildingNumber:info.buildingNumber}})">
楼栋模型
</el-button>
</div>
</div>
<div class="map-menu">
<div class="map-menu__item">
<div class="map-layers__wrapper">
<div class="map-layers">
<div class="map-layers__item" @click="switchLayer(false)"
:class="[!isImageMap ? 'map-layers__item-active' : '']">
:class="[!isImageMap ? 'map-layers__item-active' : '']">
<img src="https://cdn.cunwuyun.cn/AppCommunityMap/dz.png" alt="">
<div class="map-layers__item--tag" :class="[!isImageMap ? 'map-layers__item--tag-active' : '']">地图</div>
</div>
<div class="map-layers__item" @click="switchLayer(true)"
:class="[isImageMap ? 'map-layers__item-active' : '']">
:class="[isImageMap ? 'map-layers__item-active' : '']">
<img src="https://cdn.cunwuyun.cn/AppCommunityMap/yx.png" alt="">
<div class="map-layers__item--tag" :class="[isImageMap ? 'map-layers__item--tag-active' : '']">卫星</div>
</div>
@@ -158,6 +159,7 @@ export default {
data() {
return {
map: null,
mapLib: null,
community: '',
isShowLayer: false,
isShowSearch: false,
@@ -171,13 +173,13 @@ export default {
list: [],
areaList: [],
info: {},
resident:null,
resident: null,
satellite: null,
zoom: 11,
chooseBuildId: '',
buildList: [],
searchList: [],
house:null,
house: null,
center: [],
type: '',
typeList: [
@@ -222,7 +224,7 @@ export default {
},
created() {
this.dict.load('householdRelation','communityBuildingType')
this.dict.load('householdRelation', 'communityBuildingType')
},
mounted() {
@@ -232,12 +234,12 @@ export default {
},
methods: {
getCorpLocation(){
if(this.showStatistics) { //楼栋模型返回重新查询
getCorpLocation() {
if (this.showStatistics) { //楼栋模型返回重新查询
return
}
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
if(res.code==0){
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
if (res.code == 0) {
this.initMap(res.data);
}
})
@@ -255,14 +257,14 @@ export default {
},
search() {
if(this.type === '') {
if (this.type === '') {
this.searchList = []
this.$message.error('请先选择房屋类型')
return
}
this.isShowArea = false
var url = '/app/appcommunityhouseinfo/queryHouseByName'
if(this.type == 1) {
if (this.type == 1) {
url = '/app/apphomesteadinfo/list'
}
this.instance.post(url, null, {
@@ -275,9 +277,9 @@ export default {
}).then(res => {
if (res.code === 0) {
var data = []
if(this.type == 1) {
if (this.type == 1) {
data = res.data.records
}else {
} else {
data = res.data
}
@@ -293,14 +295,14 @@ export default {
getBuildInfo(id, type) {
var url = `/app/apphomesteadinfo/queryDetailById?id=${id}`
if(type == 0) {
url= `/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${id}`
if (type == 0) {
url = `/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${id}`
}
this.instance.post(url).then(res => {
if (res.code === 0) {
if(type == 1) {
if (type == 1) {
this.info = res.data
}else {
} else {
this.info = res.data.build
this.resident = null;
}
@@ -312,10 +314,10 @@ export default {
},
chooseCommunity(item) {
if(item.name) { //宅基地
if(!item.lng || !item.lat) {
if (item.name) { //宅基地
if (!item.lng || !item.lat) {
return this.$message.error('未获取到该房屋坐标信息')
}else {
} else {
this.map.setZoomAndCenter(18, [item.lng, item.lat], false, 600)
this.info = item
this.$nextTick(() => {
@@ -323,35 +325,35 @@ export default {
this.isShowInfo = true
})
}
}else { //楼栋
this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`,null,{
params:{
buildId:item.buildingId,
houseId:item.id,
residentId:item.residentId
}
}).then(res => {
if (res.code === 0) {
if (!res.data.build?.lng || !res.data.build?.lat) {
this.isShowInfo = true
this.isShowSearch = false
this.info = res.data.build;
return this.$message.error('未获取到该房屋坐标信息')
} else {
this.chooseBuildId = res.data.build.id
this.house = res.data.house
this.resident = res.data.resident;
}
this.map.setZoomAndCenter(18, [res.data.build?.lng, res.data.build?.lat], false, 600)
this.info = res.data.build
this.$nextTick(() => {
this.isShowSearch = false
this.isShowInfo = true
})
}
})
} else { //楼栋
this.instance.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding`, null, {
params: {
buildId: item.buildingId,
houseId: item.id,
residentId: item.residentId
}
}).then(res => {
if (res.code === 0) {
if (!res.data.build?.lng || !res.data.build?.lat) {
this.isShowInfo = true
this.isShowSearch = false
this.info = res.data.build;
return this.$message.error('未获取到该房屋坐标信息')
} else {
this.chooseBuildId = res.data.build.id
this.house = res.data.house
this.resident = res.data.resident;
}
this.map.setZoomAndCenter(18, [res.data.build?.lng, res.data.build?.lat], false, 600)
this.info = res.data.build
this.$nextTick(() => {
this.isShowSearch = false
this.isShowInfo = true
})
}
})
}
},
@@ -365,7 +367,7 @@ export default {
<p>${context.count}</p>
</div>
</div>`
let {mapLib: AMap} = this
let offset = new AMap.Pixel(-9, -9)
context.marker.setContent(el)
context.marker.setOffset(offset)
@@ -380,23 +382,23 @@ export default {
const buildId = context.data[0].id
let el = ''
var urlType = ''
if(context.data[0].communityName == context.data[0].buildingNumber) { //宅基地
if (context.data[0].communityName == context.data[0].buildingNumber) { //宅基地
urlType = 1
el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId?'background-color:#2266FF':'background-color:#FF701A'}">
el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId ? 'background-color:#2266FF' : 'background-color:#FF701A'}">
<div class="mark-contaienr">
<span>${context.data[0].areaName}</span>&nbsp;&nbsp;
<span>${context.data[0].communityName}</span>
</div>
<div class="arrow" style="${buildId === this.chooseBuildId?'border-top-color: #2266FF':'border-top-color:#FF701A'}"></div>
<div class="arrow" style="${buildId === this.chooseBuildId ? 'border-top-color: #2266FF' : 'border-top-color:#FF701A'}"></div>
</div>`
}else {
} else {
urlType = 0
el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId?'background-color:#2266FF':''}">
el = `<div class="mark" id="buildId-${buildId}" style="${buildId === this.chooseBuildId ? 'background-color:#2266FF' : ''}">
<div class="mark-contaienr">
<span>${context.data[0].communityName}</span>&nbsp;&nbsp;
<span>${context.data[0].buildingNumber}栋</span>
</div>
<div class="arrow" style="${buildId === this.chooseBuildId?'border-top-color: #2266FF':''}"></div>
<div class="arrow" style="${buildId === this.chooseBuildId ? 'border-top-color: #2266FF' : ''}"></div>
</div>`
}
@@ -421,6 +423,7 @@ export default {
},
addMakert(points) {
let {mapLib: AMap} = this
new AMap.MarkerClusterer(this.map, points, {
gridSize: 60,
maxZoom: 15,
@@ -444,9 +447,9 @@ export default {
lnglat: [item.lng, item.lat],
id: item.id,
corpId: item.corpId,
areaName:item.areaName,
areaName: item.areaName,
buildingNumber: item.name || item.buildingNumber,
communityName:item.name || item.communityName,
communityName: item.name || item.communityName,
}
})
@@ -470,8 +473,8 @@ export default {
this.isImageMap = flag
},
initMap({lng,lat}) {
this.center = [lng,lat];
initMap({lng, lat}) {
this.center = [lng, lat];
AMapLoader.load({
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
version: '2.0',
@@ -481,6 +484,7 @@ export default {
plugins: []
}
}).then((AMap) => {
this.mapLib = AMap
this.map = new AMap.Map('map', {
resizeEnable: true,
zooms: [6, 20],
@@ -507,7 +511,7 @@ export default {
width: 100%;
}
::v-deep .ai-list__content--right-wrapper{
::v-deep .ai-list__content--right-wrapper {
height: 100%;
margin: 0px !important;
background-color: transparent !important;
@@ -889,7 +893,7 @@ export default {
white-space: nowrap;
}
p:first-child{
p:first-child {
font-size: 14px;
}
@@ -901,7 +905,7 @@ export default {
}
}
::v-deep .mark{
::v-deep .mark {
user-select: none;
cursor: pointer;
height: 32px;
@@ -914,7 +918,7 @@ export default {
box-sizing: border-box;
padding: 0 12px;
.mark-contaienr{
.mark-contaienr {
color: white;
font-size: 14px;
position: relative;
@@ -926,7 +930,7 @@ export default {
justify-content: center;
}
.arrow{
.arrow {
position: absolute;
left: 50%;
transform: translateX(-50%);
@@ -1124,8 +1128,8 @@ export default {
}
}
.bg-fff{
background-color: #fff!important;
.bg-fff {
background-color: #fff !important;
}
}
}
@@ -1336,7 +1340,8 @@ export default {
color: #89B;
}
}
.map-area__right{
.map-area__right {
margin-left: 16px;
}
}

163
packages/grid/components/AiUserPicker.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<section class="AiUserPicker">
<div v-if="$slots.default " @click="handleSelect">
<slot/>
</div>
<div class="AiWechatSelecter-userlist" v-else>
<div class="user-item" v-for="(item, index) in value" :key="index">
<img :src="getAvatar(item)">
<div class="itemLabel" v-text="item.name"/>
<i class="iconfont iconwarning" @click="removeUser(index)"/>
</div>
<div class="user-add" @click="handleSelect">
<div class="userlist-add__icon">
<i class="el-icon-plus"/>
</div>
<span>选择</span>
</div>
</div>
<ai-dialog title="选择人员" :visible.sync="dialog" width="1100px" @onConfirm="submit" @close="selected=[]">
<ai-table-select :instance="instance" v-model="selected" multiple action="/app/wxcp/wxuser/list?status=1" valueObj extra="mobile"/>
</ai-dialog>
</section>
</template>
<script>
export default {
name: "AiUserPicker",
model: {
prop: 'value',
event: 'change',
},
props: {
value: {default: () => []},
instance: Function,
multiple: {default: true},
props: {
default: () => ({
label: 'name',
id: 'id'
})
},
},
data() {
return {
dialog: false,
selected: [],
}
},
methods: {
removeUser(i) {
let list = this.$copy(this.value)
list.splice(i, 1)
this.$emit("change", list)
},
submit() {
this.$emit("change", this.selected)
this.dialog = false
},
handleSelect() {
this.selected = this.$copy(this.value)
this.dialog = true
},
getAvatar(row){
return row.avatar||row.photo||'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'
}
}
}
</script>
<style lang="scss" scoped>
.AiUserPicker {
.AiWechatSelecter-userlist {
display: flex;
align-items: center;
flex-wrap: wrap;
.user-add {
margin-bottom: 6px;
.userlist-add__icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: 4px;
border-radius: 2px;
border: 1px solid #CCCCCC;
cursor: pointer;
&:hover {
opacity: 0.6;
}
i {
color: #CCCCCC;
font-size: 20px;
}
}
span {
display: block;
width: 100%;
line-height: 22px;
text-align: center;
color: #888888;
font-size: 14px;
}
}
.user-item {
position: relative;
margin-bottom: 6px;
margin-right: 16px;
width: 40px;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
img {
display: block;
width: 40px;
height: 40px;
margin-bottom: 4px;
border-radius: 2px;
border: 1px solid #CCCCCC;
}
i {
position: absolute;
top: 0;
right: 0;
padding: 2px;
font-size: 16px;
background: #fff;
border-radius: 50%;
cursor: pointer;
transform: translate(40%, -100%);
height: 16px;
&:hover {
opacity: 0.6;
}
}
.itemLabel {
display: block;
width: 60px;
line-height: 22px;
text-align: center;
color: #888888;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
}
}
}
</style>