YF-yuan
3 years ago
5 changed files with 21 additions and 10 deletions
+ 1
- 1
public/index.html
View File
| @@ -5,7 +5,7 @@ | |||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||
| <title>水生态环境检测平台</title> | |||
| <title>水生态环境监测平台</title> | |||
| </head> | |||
| <body> | |||
| <noscript> | |||
BIN
src/assets/img/gisdemo/outletImg3.png
View File
| Before | After |
|---|---|
|
|
| Width: 260 | Height: 150 | Size: 78KB |
+ 8
- 3
src/views/Home.vue
View File
| @@ -60,7 +60,7 @@ | |||
| </div> | |||
| <div class="showPopupOutlet" ref="outletPopup"> | |||
| <outlet-components :dataList="popupOutlet" @closeOutlet='closeOutletPopup'></outlet-components> | |||
| <outlet-components :dataList="popupOutlet" :checked='checkedRiver' @closeOutlet='closeOutletPopup'></outlet-components> | |||
| </div> | |||
| @@ -526,16 +526,19 @@ export default { | |||
| .then((res) => { | |||
| let features = new WMSGetFeatureInfo().readFeatures(res.data); | |||
| features.forEach((feature) => { | |||
| vector.addFeatures(features); | |||
| let obj = feature.getProperties(); | |||
| console.log(obj.lc, obj.objectid); | |||
| obj.color = this.landColor.get(obj.lc); | |||
| if (landData[obj.objectid]) { | |||
| landData[obj.objectid].push(obj); | |||
| } else { | |||
| landData[obj.objectid] = []; | |||
| landData[obj.objectid] = [obj]; | |||
| } | |||
| }); // 土地占比数据 | |||
| this.allLanduseList = landData; | |||
| console.log(landData); | |||
| this.landuseList = this.allLanduseList[1]; // 设置土地占比初始值 | |||
| }); | |||
| @@ -844,9 +847,11 @@ export default { | |||
| if($event.target.checked) { | |||
| // 1-3-1 设置面积占比数据 | |||
| let arr = this.allLanduseList[index]; | |||
| let data=[]; | |||
| arr.forEach(item=>{ | |||
| for(var i=0;i<data.length;i++){ | |||
| if(item.lc==data[i].lc){ | |||
| data[i].area+=parseFloat(item.area) | |||
| data[i].ratio+=parseFloat(item.ratio) | |||
| @@ -1258,7 +1263,7 @@ body { | |||
| .placeTitle { | |||
| width: 100%; | |||
| text-align: start; | |||
| padding-left: 10px; | |||
| padding-left: 20px; | |||
| margin-bottom: 10px; | |||
| font-size: 14px; | |||
| font-weight: 600; | |||
+ 10
- 4
src/views/leftCompoents/outletComponents.vue
View File
| @@ -9,8 +9,9 @@ | |||
| <span>经度：{{dataList.lon=='0.0'?'118.808797':dataList.lon}}</span> | |||
| <span>纬度：{{dataList.lat=='0.0'?'31.996371':dataList.lat}}</span> | |||
| <span class="imgtitle">现场照片</span> | |||
| <img class="outletImg" src="../../assets/img/gisdemo/outletImg.png" alt=""> | |||
| <!-- <img src="" alt=""> --> | |||
| <img v-if="checked==0" class="outletImg" src="../../assets/img/gisdemo/outletImg.png" alt=""> | |||
| <img v-if="checked==1" class="outletImg" src="../../assets/img/gisdemo/outletImg2.png" alt=""> | |||
| <img v-if="checked==2" class="outletImg" src="../../assets/img/gisdemo/outletImg3.png" alt=""> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| @@ -28,6 +29,12 @@ export default { | |||
| return {}; | |||
| }, | |||
| }, | |||
| checked: { | |||
| type: Number, | |||
| default() { | |||
| return 0 | |||
| } | |||
| } | |||
| }, | |||
| mounted() { | |||
| }, | |||
| @@ -43,7 +50,6 @@ export default { | |||
| #outletComponents { | |||
| width: 100%; | |||
| height: 100%; | |||
| padding: 10px; | |||
| background-size: contain; | |||
| display: flex; | |||
| flex-direction: column; | |||
| @@ -96,7 +102,7 @@ export default { | |||
| cursor: pointer; | |||
| } | |||
| .outletImg { | |||
| width: 80%; | |||
| width: 100%; | |||
| height: auto; | |||
| } | |||
| </style> | |||
+ 2
- 2
src/views/leftCompoents/placeComponent.vue
View File
| @@ -42,7 +42,7 @@ export default { | |||
| #placeComponent { | |||
| width: 100%; | |||
| height: 100%; | |||
| padding: 10px; | |||
| /* padding: 10px; */ | |||
| background-size: contain; | |||
| display: flex; | |||
| flex-direction: column; | |||
| @@ -68,7 +68,7 @@ export default { | |||
| #placeComponent .paramsList { | |||
| width: 100%; | |||
| margin: 10 auto; | |||
| margin-left: 10px; | |||
| list-style: none; | |||
| display: flex; | |||
| flex-direction: column; | |||
Loading…