diff --git a/src/apps/AppGridManagement/Map.vue b/src/apps/AppGridManagement/Map.vue index 00285bed..64df7012 100644 --- a/src/apps/AppGridManagement/Map.vue +++ b/src/apps/AppGridManagement/Map.vue @@ -17,29 +17,27 @@ @@ -74,17 +72,31 @@ export default { getLeafNodes() { this.$http.post(`/app/appgirdinfo/queryGirdMemberGirdsById`).then((res) => { if (res?.data) { - let arr = [] this.treeList = res.data - res.data.forEach(e => { - if (e.points?.length > 0) { - arr.push(e.points.map(p => [p.lng, p.lat])) + + const arr = res.data.map(e => { + return { + id: e.id, + points: e.points.map(p => [p.lng, p.lat]) } }) arr.length > 0 && this.renderGridMap(arr) } }) }, + + getGridInfo (id) { + this.$http.post(`/app/appgirdinfo/queryDetailById?id=${id}`).then((res) => { + if (res?.data) { + this.form = res.data + + this.$nextTick(() => { + this.show = true + }) + } + }) + }, + renderGridMap(paths, count = 0) { let {map, lib: TMap, $refs: {AiTMap: {fitBounds}}} = this if (TMap) { @@ -96,21 +108,27 @@ export default { if (paths?.length > 0) { let bounds = [] paths.forEach((path, i) => { + console.log(path) let color = colors[i % colors.length] let polygon = new TMap.MultiPolygon({ map, styles: { default: new TMap.PolygonStyle({ showBorder: true, - borderColor: color, + borderColor: '#5088FF', borderWidth: 2, - color: this.$colorUtils.Hex2RGBA(color, 0.1), - borderDashArray: [10, 10] + color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1) }) }, - geometries: [{paths: path.map(e => new TMap.LatLng(e[1], e[0]))}] + id: path.id, + geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}] }) this.polygons.push(polygon) - bounds.push(fitBounds(path.map(e => new TMap.LatLng(e[1], e[0])))) + bounds.push(fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0])))) + + polygon.on('click', e => { + const id = e.target.id + this.getGridInfo(id) + }) }) bounds = bounds.reduce((a, b) => { return fitBounds([ @@ -160,7 +178,6 @@ ai-tree-picker { .detail { height: 100%; - .grid-select { width: 100%; padding: 34px 32px; @@ -199,7 +216,11 @@ ai-tree-picker { height: 10px; background: #CCC; border-radius: 6px; - margin: 32px 0 32px 344px; + margin: 32px auto 32px auto; + } + + .grid-info { + height: 800px; } .title { @@ -218,6 +239,10 @@ ai-tree-picker { line-height: 40px; font-size: 28px; + &:last-child { + border: none; + } + .label { display: inline-block; width: 160px;