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

Merge branch 'dev' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_webapp into dev

Browse Source
This commit is contained in:
yanran200730
2022-03-16 15:31:40 +08:00
parent 5f4b48eba7 92249196a4
commit 8099941802
1 changed files with 240 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

475
project/sass/apps/AppGridBlock/components/list.vue
View File

@@ -7,14 +7,14 @@
<template slot="left"> <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 <el-tree
:data="treeObj.treeList" :data="treeObj.treeList"
:props="treeObj.defaultProps" :props="treeObj.defaultProps"
@node-click="handleNodeClick" @node-click="handleNodeClick"
node-key="id" node-key="id"
ref="tree" ref="tree"
:filter-node-method="filterNode" :filter-node-method="filterNode"
default-expand-all default-expand-all
highlight-current highlight-current
/> />
</ai-tree-menu> </ai-tree-menu>
</template> </template>
@@ -22,62 +22,63 @@
<ai-search-bar> <ai-search-bar>
<template slot="left"> <template slot="left">
<el-date-picker <el-date-picker
v-model="searchObj.createTimeStr" v-model="searchObj.createTimeStr"
type="date" type="date"
@change="(page.current = 1), getList()" @change="(page.current = 1), getList()"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
size="small" size="small"
placeholder="创建时间" placeholder="创建时间"
> >
</el-date-picker> </el-date-picker>
</template> </template>
<template slot="right"> <template slot="right">
<el-input <el-input
v-model="searchObj.girdName" v-model="searchObj.girdName"
size="small" size="small"
placeholder="输入网格名称" placeholder="输入网格名称"
@keyup.enter.native="(page.current = 1), getList()" @keyup.enter.native="(page.current = 1), getList()"
clearable clearable
@clear="(searchObj.girdName = '', page.current = 1), getList()" @clear="(searchObj.girdName = '', page.current = 1), getList()"
suffix-icon="iconfont iconSearch" suffix-icon="iconfont iconSearch"
/> />
</template> </template>
</ai-search-bar> </ai-search-bar>
<ai-search-bar bottomBorder> <ai-search-bar bottomBorder>
<template slot="left"> <template slot="left">
<el-button <el-button
type="primary" type="primary"
icon="iconfont iconAdd" icon="iconfont iconAdd"
:disabled="info.girdLevel === '3'" :disabled="info.girdLevel === '3'"
@click="(isEdit = false), toAdd()" @click="(isEdit = false), toAdd()"
>新增 >新增
</el-button> </el-button>
<el-button <el-button
icon="iconfont iconDelete" icon="iconfont iconDelete"
@click="deleteById(ids.join(','))" @click="deleteById(ids.join(','))"
:disabled="!Boolean(ids.length)" :disabled="!Boolean(ids.length)"
> >
删除 删除
</el-button> </el-button>
<ai-download <ai-download
:instance="instance" :instance="instance"
url="/app/appgirdinfo/exportGirdInfo" url="/app/appgirdinfo/exportGirdInfo"
:params="{ ...searchObj, ids: ids.join(',') }" :params="{ ...searchObj, ids: ids.join(',') }"
fileName="网格区块" fileName="网格区块"
> >
<el-button icon="iconfont iconExported" size="small" <el-button icon="iconfont iconExported" size="small"
>导出全部</el-button >导出全部
</el-button
> >
</ai-download> </ai-download>
<ai-import <ai-import
ref="import" ref="import"
title="导入" title="导入"
name="网格区块" name="网格区块"
url="/app/appgirdinfo/downloadGirdInfo" url="/app/appgirdinfo/downloadGirdInfo"
importUrl="/app/appgirdinfo/importGirdInfo" importUrl="/app/appgirdinfo/importGirdInfo"
suffixName="xlsx" suffixName="xlsx"
:customCliker="true" :customCliker="true"
:instance="instance" :instance="instance"
> >
<template slot="tips"> <template slot="tips">
<p> <p>
@@ -85,49 +86,51 @@
</p> </p>
</template> </template>
<el-button size="small" icon="iconfont iconImport" <el-button size="small" icon="iconfont iconImport"
>导入</el-button >导入
</el-button
> >
</ai-import> </ai-import>
</template> </template>
</ai-search-bar> </ai-search-bar>
<ai-table <ai-table
class="mt10" class="mt10"
:tableData="tableData" :tableData="tableData"
:col-configs="colConfigs" :col-configs="colConfigs"
:total="page.total" :total="page.total"
ref="aitableex" ref="aitableex"
:current.sync="page.current" :current.sync="page.current"
:size.sync="page.size" :size.sync="page.size"
@selection-change="(v) => (ids = v.map((e) => e.id))" @selection-change="(v) => (ids = v.map((e) => e.id))"
@getList="getList()" @getList="getList()"
> >
<el-table-column <el-table-column
slot="selectId" slot="selectId"
type="selection" type="selection"
align="center" align="center"
width="40" width="40"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="网格员" label="网格员"
slot="user" slot="user"
align="center" align="center"
fixed="right" fixed="right"
width="160"> width="160">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<div class="flex-box"> <div class="flex-box">
<div v-for="(item, index) in row.girdMemberNames" v-show="index < 3" :key="index"> <div v-for="(item, index) in row.girdMemberNames" v-show="index < 3" :key="index">
<AiOpenData type="userName" :openid="item"></AiOpenData><span v-if="index < 2 && index < row.girdMemberNames.length - 1">、</span> <AiOpenData type="userName" :openid="item"></AiOpenData>
<span v-if="index < 2 && index < row.girdMemberNames.length - 1">、</span>
</div> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="操作" label="操作"
slot="options" slot="options"
align="center" align="center"
fixed="right" fixed="right"
width="160"> width="160">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<div class="table-options"> <div class="table-options">
<el-button type="text" @click="see(row)">编辑</el-button> <el-button type="text" @click="see(row)">编辑</el-button>
@@ -140,43 +143,45 @@
</template> </template>
</ai-list> </ai-list>
<ai-dialog <ai-dialog
title="网格范围" title="网格范围"
:visible.sync="showMap" :visible.sync="showMap"
:customFooter="true" :customFooter="true"
:destroyOnClose="true" :destroyOnClose="true"
border border
width="850px" width="850px"
> >
<div class="map"> <div class="map">
<div class="tipinput"> <div class="tipinput">
<el-input <el-input
v-if="editRow.plottingStatus == 0" v-if="editRow.plottingStatus == 0"
v-model="searchAddress" v-model="searchAddress"
@change="addressChange" @change="addressChange"
clearable clearable
placeholder="请输入关键字" placeholder="请输入关键字"
id="tipinput" id="tipinput"
size="medium" size="medium"
style="width: 200px" style="width: 200px"
></el-input> ></el-input>
</div> </div>
<div id="panel" v-if="editRow.plottingStatus == 0"></div> <div id="panel" v-if="editRow.plottingStatus == 0"></div>
<div class="container" id="container"></div> <div class="container" id="container"></div>
<el-button-group <el-button-group
style="margin-top: 8px" style="margin-top: 8px"
v-if="editRow.plottingStatus == 1" v-if="editRow.plottingStatus == 1"
> >
<el-button type="primary" size="mini" @click="beginPoltting()" <el-button type="primary" size="mini" @click="beginPoltting()"
>开始编辑</el-button >开始编辑
</el-button
> >
<el-button size="mini" @click="finishPoltting()">结束编辑</el-button> <el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
</el-button-group> </el-button-group>
<el-button-group <el-button-group
style="margin-top: 8px" style="margin-top: 8px"
v-if="editRow.plottingStatus == 0" v-if="editRow.plottingStatus == 0"
> >
<el-button size="mini" @click="draw('polygon')" <el-button size="mini" @click="draw('polygon')"
>开始绘制多边形</el-button >开始绘制多边形
</el-button
> >
<!-- <el-button size="mini" @click="close()">关闭绘制</el-button> --> <!-- <el-button size="mini" @click="close()">关闭绘制</el-button> -->
<el-button size="mini" @click="clear()">清除绘制</el-button> <el-button size="mini" @click="clear()">清除绘制</el-button>
@@ -185,7 +190,8 @@
<div class="dialog-footer" slot="footer"> <div class="dialog-footer" slot="footer">
<el-button size="medium" @click="showMap = false">取消</el-button> <el-button size="medium" @click="showMap = false">取消</el-button>
<el-button type="primary" size="medium" @click="confirm()" <el-button type="primary" size="medium" @click="confirm()"
>确认</el-button >确认
</el-button
> >
</div> </div>
</ai-dialog> </ai-dialog>
@@ -197,7 +203,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
import Template from '../../../../../packages/wechat/AppAskForm/components/Template.vue'; import Template from '../../../../../packages/wechat/AppAskForm/components/Template.vue';
export default { export default {
components: { Template }, components: {Template},
name: "List", name: "List",
label: "网格区块", label: "网格区块",
props: { props: {
@@ -253,7 +259,7 @@ export default {
colConfigs() { colConfigs() {
let _ = this; let _ = this;
return [ return [
{ type: 'selection'}, {type: 'selection'},
{ {
prop: "girdName", prop: "girdName",
align: "left", align: "left",
@@ -268,7 +274,7 @@ export default {
prop: "girdType", prop: "girdType",
align: "center", align: "center",
label: "网格类型", label: "网格类型",
render(h, { row }) { render(h, {row}) {
return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-'); return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-');
}, },
}, },
@@ -276,7 +282,7 @@ export default {
prop: "girdLevel", prop: "girdLevel",
align: "center", align: "center",
label: "网格层级", label: "网格层级",
render(h, { row }) { render(h, {row}) {
return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-'); return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-');
}, },
}, },
@@ -284,15 +290,15 @@ export default {
prop: "plottingStatus", prop: "plottingStatus",
align: "center", align: "center",
label: "标绘状态", label: "标绘状态",
render(h, { row }) { render(h, {row}) {
return h( return h(
"span", "span",
{ {
style: { style: {
color: _.dict.getColor("plottingStatus", row.plottingStatus), color: _.dict.getColor("plottingStatus", row.plottingStatus),
},
}, },
}, _.dict.getLabel("plottingStatus", row.plottingStatus)
_.dict.getLabel("plottingStatus", row.plottingStatus)
); );
}, },
}, },
@@ -300,7 +306,7 @@ export default {
prop: "createTime", prop: "createTime",
align: "center", align: "center",
label: "创建时间", label: "创建时间",
render(h, { row }) { render(h, {row}) {
return h("span", {}, row.createTime.substring(0, 11)); return h("span", {}, row.createTime.substring(0, 11));
}, },
}, },
@@ -309,41 +315,41 @@ export default {
align: "center", align: "center",
slot: 'user', slot: 'user',
width: 200, width: 200,
label: "网格员", label: "网格员",
}, },
]; ];
}, },
}, },
methods: { methods: {
getCorpLocation(){ getCorpLocation() {
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{ this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
if(res.code==0){ if (res.code == 0) {
this.location = res.data this.location = res.data
} }
}) })
}, },
handleNodeClick(val) { handleNodeClick(val) {
this.info = { ...val }; this.info = {...val};
this.searchId = val.id; this.searchId = val.id;
this.getList(); this.getList();
}, },
getTreeList() { getTreeList() {
this.instance this.instance
.post("/app/appgirdinfo/listByTop", null, null) .post("/app/appgirdinfo/listByTop", null, null)
.then((res) => { .then((res) => {
if (res.code == 0) { if (res.code == 0) {
this.treeObj.treeList = [...res.data]; this.treeObj.treeList = [...res.data];
this.$nextTick(() => { this.$nextTick(() => {
if (this.treeObj.treeList.length && !this.info.girdLevel) { if (this.treeObj.treeList.length && !this.info.girdLevel) {
this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id) this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
this.info = { ...this.treeObj.treeList[0] }; this.info = {...this.treeObj.treeList[0]};
} else { } else {
this.$refs.tree.setCurrentKey(this.info.id) this.$refs.tree.setCurrentKey(this.info.id)
} }
}) })
} }
}); });
}, },
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true;
@@ -351,64 +357,66 @@ export default {
}, },
deleteById(ids) { deleteById(ids) {
ids && ids &&
this.$confirm("是否要删除该网格区块？", { this.$confirm("是否要删除该网格区块？", {
type: "error", type: "error",
})
.then(() => {
this.instance
.post("/app/appgirdinfo/delete", null, {
params: {ids},
}) })
.then(() => { .then((res) => {
this.instance if (res?.code == 0) {
.post("/app/appgirdinfo/delete", null, { this.$message.success("删除成功!");
params: { ids },
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getList(); this.getList();
} }
}); });
}) })
.catch(() => {}); .catch(() => {
});
}, },
deleteTree(ids) { deleteTree(ids) {
ids && ids &&
this.$confirm("是否要删除该网格区块？", { this.$confirm("是否要删除该网格区块？", {
type: "error", type: "error",
})
.then(() => {
this.instance
.post("/app/appgirdinfo/delete", null, {
params: {ids},
}) })
.then(() => { .then((res) => {
this.instance if (res?.code == 0) {
.post("/app/appgirdinfo/delete", null, { this.$message.success("删除成功!");
params: { ids },
})
.then((res) => {
if (res?.code == 0) {
this.$message.success("删除成功!");
this.getTreeList(); this.getTreeList();
} }
}); });
}) })
.catch(() => {}); .catch(() => {
});
}, },
getList() { getList() {
this.instance this.instance
.post("/app/appgirdinfo/list", null, { .post("/app/appgirdinfo/list", null, {
params: { params: {
...this.searchObj, ...this.searchObj,
...this.page, ...this.page,
parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId, parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
}, },
}) })
.then((res) => { .then((res) => {
if (res?.data) { if (res?.data) {
this.tableData = res.data.records.map(v => { this.tableData = res.data.records.map(v => {
return { return {
...v, ...v,
girdMemberNames: v.girdMemberNames ? v.girdMemberNames.split(',') : [] girdMemberNames: v.girdMemberNames ? v.girdMemberNames.split(',') : []
} }
}); });
this.page.total = res.data.total; this.page.total = res.data.total;
} }
}); });
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.ids = []; this.ids = [];
@@ -418,7 +426,7 @@ export default {
}, },
//添加二级网格 //添加二级网格
addTwoLevel() { addTwoLevel() {
this.info = { ...this.treeObj.treeList[0] }; this.info = {...this.treeObj.treeList[0]};
this.toAdd() this.toAdd()
}, },
toAdd() { toAdd() {
@@ -437,7 +445,7 @@ export default {
}, },
poltting(row) { poltting(row) {
this.showMap = true; this.showMap = true;
this.editRow = { ...row }; this.editRow = {...row};
AMapLoader.load({ AMapLoader.load({
key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填 key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
@@ -448,52 +456,52 @@ export default {
plugins: [], // 需要加载的 AMapUI ui插件 plugins: [], // 需要加载的 AMapUI ui插件
}, },
}) })
.then((AMap) => { .then((AMap) => {
this.map = new AMap.Map("container", { this.map = new AMap.Map("container", {
resizeEnable: true, resizeEnable: true,
zoom: 14, 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);
}); });
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) { see(row) {
this.info = { ...row }; this.info = {...row};
this.isEdit = true; this.isEdit = true;
this.toAdd() this.toAdd()
}, },
draw(type) { draw(type) {
switch (type) { switch (type) {
@@ -560,39 +568,35 @@ export default {
let path = []; let path = [];
if (this.editRow.plottingStatus == 1) { if (this.editRow.plottingStatus == 1) {
this.polyEditor this.polyEditor
.getTarget() .getTarget()
.getPath() .getPath()
.map((e) => { .map((e) => {
path.push({ lng: e.lng, lat: e.lat }); path.push({lng: e.lng, lat: e.lat});
}); });
} else { } else {
path = [...this.path]; path = [...this.path];
} }
delete this.editRow.points; delete this.editRow.points;
this.instance let {girdMemberNames} = this.editRow
.post( this.instance.post(`/app/appgirdinfo/addOrUpdate`, {
`/app/appgirdinfo/addOrUpdate`, ...this.editRow,
{ points: path,
...this.editRow, girdMemberNames: girdMemberNames?.toString()
points: path, }).then((res) => {
}, if (res.code == 0) {
null this.getList();
) this.showMap = false;
.then((res) => { }
if (res.code == 0) { });
this.getList();
this.showMap = false;
}
});
}, },
eventOn() { eventOn() {
this.path = []; this.path = [];
this.overlays = []; this.overlays = [];
this.map.on("mousemove", this.showInfoMove, this); this.map.on("mousemove", this.showInfoMove, this);
this.mouseTool.on("draw", ({ type, obj }) => { this.mouseTool.on("draw", ({type, obj}) => {
obj.getPath().map((e) => { obj.getPath().map((e) => {
console.log(e) console.log(e)
this.path.push({ lat: e.getLat(), lng: e.getLng() }); this.path.push({lat: e.getLat(), lng: e.getLng()});
}); });
this.overlays.push(obj); this.overlays.push(obj);
}); });
@@ -611,11 +615,12 @@ export default {
.app-grid-block { .app-grid-block {
width: 100%; width: 100%;
height: 100%; height: 100%;
::v-deep .el-tree { ::v-deep .el-tree {
background: transparent; background: transparent;
.el-tree-node__expand-icon.is-leaf { .el-tree-node__expand-icon.is-leaf {
color: transparent!important; color: transparent !important;
} }
.el-tree-node__content > .el-tree-node__expand-icon { .el-tree-node__content > .el-tree-node__expand-icon {
@@ -648,7 +653,7 @@ export default {
} }
background: #2266FF; background: #2266FF;
span { span {
color: #fff; color: #fff;
} }