<template>
|
<div class="grid_index">
|
<div class="map">
|
<v-poi :map="map"></v-poi>
|
<div class="m" id="grid-map"></div>
|
<transition name="moveright">
|
<div class="f" v-if="childData.id">
|
<v-m :item="childData"></v-m>
|
</div>
|
</transition>
|
</div>
|
<v-search
|
:plac="plac"
|
@on-search="onSearch"
|
@on-reset="onSearchReset"
|
></v-search>
|
<div class="tool fl-sb">
|
<p>已选0条</p>
|
<button class="m_btn bgc_tran col_danger" @click="onChangeMax(false)">
|
【取消选择】
|
</button>
|
<div class="line"></div>
|
<button class="m_btn bgc_green" @click="appPath('jh_grid_add')">
|
添加
|
</button>
|
<button class="m_btn demo_btn cover" @click="onDelMax">
|
<i></i><i></i><i></i><i></i><b>删除</b>
|
</button>
|
</div>
|
<div class="demo_scrollbar sc_x s_x">
|
<v-tool-table :trs="tr" :tds="td" class="tab" first firstWidth="50px"
|
><template v-slot:first-th>
|
<div>
|
<el-checkbox v-model="maxall" @change="onChangeMax"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="{ scope }">
|
<div>
|
<el-checkbox v-model="scope.is_check"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:ids="{ scope }">
|
<div>
|
{{ scope.table_id + 1 }}
|
</div>
|
</template>
|
<template v-slot:area="{ scope }">
|
<b>{{ scope.area }}平方米</b>
|
</template>
|
<template v-slot:peo="{ scope }">
|
<b>{{ aN(scope.gridMembers) }}</b>
|
</template>
|
<template v-slot:time="{ scope }">
|
<b>{{ appTime(scope.createAt) }}</b>
|
</template>
|
<template v-slot:btn="{ scope }">
|
<div class="table_flex">
|
<span @click="onPath('/grid_edit/', scope)">修改</span>
|
<span @click="onPath('/grid_watch/', scope)">查看</span>
|
<span @click="onDel(scope.id)">删除</span>
|
</div>
|
</template>
|
</v-tool-table>
|
</div>
|
<!-- 分页 -->
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
</template>
|
|
<script>
|
import vM from "./_m2";
|
import vSearch from "com/private/search";
|
import vPoi from "com/map/poi";
|
export default {
|
props: {},
|
components: { vSearch, vM, vPoi },
|
inject: ["appPath", "appObject", "appTime"],
|
data() {
|
return {
|
plac: "请输入网格名称、网格员进行查找",
|
tr: [
|
{ text: "序号", val: "btn", slot: "ids", width: "50px" },
|
{ text: "ID", val: "id" },
|
{ text: "所属社区", val: "communityName" },
|
{ text: "网格名称", val: "gridName" },
|
{ text: "网格员", val: "btn", slot: "peo" },
|
{ text: "网格描述", val: "remarks" },
|
{ text: "网格面积", val: "btn", slot: "area" },
|
{ text: "居住人口", val: "populationTotal" },
|
{ text: "创建时间", val: "btn", slot: "time" },
|
{ text: "创建人", val: "createBy" },
|
{ text: "操作", val: "btn" }
|
],
|
td: [],
|
paged: { page: 1, limit: 10, total: 0 },
|
val: "",
|
mData: [],
|
map: null,
|
childData: {},
|
maxall: false,
|
changesId: []
|
};
|
},
|
watch: {
|
mData: {
|
handler() {
|
this.setMapPoly();
|
},
|
deep: true
|
},
|
td: {
|
handler(n) {
|
let len = n.filter(v => {
|
return v.is_check;
|
});
|
this.maxall = len.length === n.length;
|
this.changesId = len.map(r => {
|
return r.id;
|
});
|
},
|
deep: true
|
}
|
},
|
created() {
|
// this.getAllMap()
|
},
|
methods: {
|
// 全选/取消全选
|
onChangeMax(n) {
|
this.td = this.td.map(r => {
|
r.is_check = n;
|
return r;
|
});
|
},
|
onPath(path, v) {
|
// 储存基本数据
|
demo.$session.set("grid-list", { id: v.id, data: v });
|
this.$nextTick(() => {
|
this.appPath(path + v.id);
|
});
|
},
|
setMapPoly() {
|
let ts = this;
|
// 清除所有网格
|
ts.map.polygonDelAll();
|
ts.mData.forEach(v => {
|
ts.map.polygon(
|
v,
|
res => {
|
let dv = res.data;
|
dv.edit.close();
|
dv.event.on("click", () => {
|
ts.childData = dv.data.ext;
|
});
|
},
|
1
|
);
|
});
|
},
|
aN(v) {
|
console.log(v);
|
return (v || [])
|
.map(r => {
|
return r.nickName;
|
})
|
.filter(v => {
|
return !!v;
|
})
|
.join(",");
|
},
|
// 搜索组件 - 搜索
|
onSearch(e) {
|
this.val = e;
|
this.init();
|
},
|
// 搜索组件 - 重置
|
onSearchReset() {
|
this.val = "";
|
},
|
onDel(id) {
|
this.$model.model("6", "", e => {
|
if (e) {
|
this.$api.post("eventgridmember/event/delete", [id], e => {
|
demo.toast("删除成功");
|
this.init();
|
});
|
}
|
});
|
},
|
onPage(e) {
|
this.init(e.paged);
|
},
|
onDelMax() {
|
if (!this.changesId.length) return demo.toast("请至少选择一项");
|
let ts = this;
|
ts.$model.model("6", "", e => {
|
if (e) {
|
ts.$api.post("eventgridmember/event/delete", ts.changesId, () => {
|
demo.toast("删除成功");
|
setTimeout(() => {
|
ts.init();
|
}, 500);
|
});
|
}
|
});
|
},
|
init(page) {
|
page = page || { pageNum: this.paged.page, pageSize: this.paged.limit };
|
let data = this.appObject(page, {
|
keyWord: this.val
|
});
|
let ts = this;
|
ts.$api.post("eventgridmember/event/list", data, e => {
|
ts.paged = { page: e.current, total: e.total, limit: e.size };
|
ts.td = (e.records || []).map(r => {
|
r.is_check = !1;
|
return r;
|
});
|
// let m = e.records.map((r) => {
|
// let os = {
|
// path: [],
|
// poyConfig: {
|
// color: r.fillColor || "",
|
// lineWidth: r.lineBroadband || 1,
|
// line: r.lineColor,
|
// opacity: r.opacity || 0.5,
|
// },
|
// ext: r,
|
// };
|
// try {
|
// os.path = JSON.parse(r.data);
|
// } catch (e) {}
|
// return ts.appObject(os, {});
|
// });
|
// ts.mData = m.filter((r) => {
|
// return r.path.length >= 3;
|
// });
|
});
|
},
|
|
//展示全部网格
|
getAllMap() {
|
let data = {
|
keyWord: "",
|
pageNum: 1,
|
pageSize: 50
|
};
|
let ts = this;
|
ts.$api.post("eventgridmember/event/list", data, e => {
|
let m = e.records.map(r => {
|
let os = {
|
path: [],
|
poyConfig: {
|
color: r.fillColor || "",
|
lineWidth: r.lineBroadband || 1,
|
line: r.lineColor,
|
opacity: r.opacity || 0.5
|
},
|
ext: r
|
};
|
try {
|
os.path = JSON.parse(r.data);
|
} catch (e) {}
|
return ts.appObject(os, {});
|
});
|
ts.mData = m.filter(r => {
|
return r.path.length >= 3;
|
});
|
});
|
}
|
},
|
mounted() {
|
this.getAllMap();
|
this.map = new DemoAMap("#grid-map", { zoom: 17, layer: [2] });
|
this.map.style("blue");
|
this.map.center(101.640511, 26.601773);
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.grid_index {
|
padding: 10px;
|
.map {
|
height: 400px;
|
background-color: #eee;
|
margin-bottom: 10px;
|
position: relative;
|
.f {
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
height: calc(100% - 50px);
|
width: 250px;
|
background: rgba(34, 34, 34, 0.3);
|
color: #fff;
|
}
|
.m {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.tab {
|
min-width: 1400px;
|
}
|
.tool {
|
margin: 10px 0;
|
overflow: hidden;
|
height: 40px;
|
p {
|
line-height: 40px;
|
}
|
.m_btn {
|
margin-left: 10px;
|
}
|
.line {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
