首先遇到问题：echarts 地图 滚轮 缩放 错误。
https://www.cnblogs.com/hao-1234-1234/p/13140070.html
关闭tabs动画，缩放问题解决了。
但引发新的问题： 百度底图正常显示，但echarts散点图 缩成一团 或不显示。
原因是：如果不是动画，那么 tabs切换前，这个tab是没有高度和宽度的。
解决：给tabs 加点击事件，点击事件里 该echarts对象调用resize方法重置高度和宽度。
但又出现了问题： 百度地图数据加载总是有部分失败！！
解决： tabs点击事件中重新请求！！！每次请求结束后就调用resize。
问题一个接一个，iview tabs 这东西，真是日了狗！
源代码：
1 @{ 2 ViewBag.Title = "自然植物名录"; 3 Layout = "~/Views/Shared/_LayoutNotFooter.cshtml"; 4 } 5 @Html.Partial("ViewPhotoWithAttr") 6 @*<link href="~/Scripts/viewer/viewer.min.css?v=20190612" rel="stylesheet" /> 7 <script src="~/Scripts/viewer/viewer.min.js?v=20190612"></script>*@ 8 <script src="~/Scripts/common/common.map.js?v=202005281610"></script> 9 <script src="~/Scripts/common/construct.plants2.js?v=202008111600"></script> 10 <script src="//api.map.baidu.com/api?v=2.0&ak=购买百度ak"></script> 11 <script src="~/Scripts/bmap.min.js"></script> 12 13 @Html.Partial("MapPartial") 14 @Html.Partial("MapPartial") 15 <style> 16 .full-card { 17 position: absolute; 18 height: 100%; 19 100%; 20 } 21 .full-card .nav-tree { 22 position: absolute; 23 top: 10px; 24 left: 0px; 25 right: 0px; 26 bottom: 0px; 27 overflow: auto; 28 padding: 5px 10px; 29 } 30 31 .vertical-center-modal { 32 display: flex; 33 align-items: center; 34 justify-content: center; 35 } 36 37 .vertical-center-modal .ivu-modal { 38 top: 0; 39 } 40 41 .demo-carousel { 42 height: 400px; 43 line-height: 200px; 44 text-align: center; 45 font-size: 20px; 46 } 47 48 .ivu-tree li ul { 49 margin: 0; 50 padding: 0 0 0 10px; 51 } 52 53 .div2 { 54 margin: 0; 55 padding: 0 10px 0 10px; 56 } 57 58 .div3 { 59 margin: 0; 60 padding: 20px 0px 10px 0px; 61 } 62 63 /*.carousel-text { 64 position: absolute; 65 bottom: 25px; 66 height: 30px; 67 100%; 68 text-align: center; 69 color: white; 70 background-color: rgba(0,0,0,0.3); 71 }*/ 72 .carousel-text{ 73 position: relative; 74 bottom: 35px; 75 100%; 76 font-size:13px; 77 /* auto;*/ /*也可以*/ 78 text-align: center; 79 color: white; 80 background-color: rgba(0,0,0,0.3); 81 } 82 .mydiv { 83 padding: 20px 0px 0 10px; 84 line-height: 30px; 85 font-size: 14px; 86 } 87 88 .mydiv1 { 89 padding:5px 10px 0 30px; 90 line-height: 40px; 91 color: #000; 92 font-size: 16px; 93 } 94 95 .mydiv span { 96 color: #000; 97 } 98 .mydiv2{ 99 font-style:italic 100 } 101 </style> 102 103 <style type="text/css"> 104 .attr-form .ivu-form-item { 105 margin-bottom: 0px; 106 } 107 .map-left-card .ivu-card-body{ 108 overflow: auto; 109 position: absolute; 110 top: 50px; 111 bottom: 0px; 112 } 113 114 .full-content{ 115 position: relative; 116 height: 100%; 117 100%; 118 } 119 .full-content .ivu-tabs{ 120 position: relative; 121 height: 100%; 122 100%; 123 } 124 .full-content .ivu-tabs .ivu-tabs-content{ 125 height: calc(100% - 52px); 126 100%; 127 } 128 .full-content .ivu-tabs .ivu-tabs-content .ivu-tabs-tabpane{ 129 height: 100%; 130 100%; 131 } 132 </style> 133 134 <script type="text/x-template" id="viewTemplate"> 135 <div style="100%;height:100%"> 136 <div id="contentFirst" v-show="!showSecond" style="100%;height:100%"> 137 <Layout style="100%;height:100%"> 138 139 <Sider v-bind:width="270" style="background: #eee;margin:0px 0px 0px 0px;"> 140 <Card style="100%;height:100%" class="full-card"> 141 <div class="nav-tree" > 142 <Row > 143 <Col span="18"> 144 145 <i-input type="text" v-model="formFilter.DValue" placeholder="请输入关键字" style="100%"></i-input> 146 147 </Col> 148 <Col span="6"> 149 <div style="margin:0px 10px 0px 5px"> 150 <i-button type="primary" size="default" v-on:click="filterClick">查询</i-button> 151 </div> 152 </Col> 153 </Row> 154 <row style="margin:10px 5px 0px 0px"> 155 <Col span="24"> 156 <Select v-model="coastalZone" style="100%" multiple placeholder="所有海拔高度"> 157 158 <Option v-for="item in coastalZoneList" v-bind:value="item.value" v-bind:key="item.value">{{ item.label }}</Option> 159 </Select> 160 </Col> 161 </row> 162 <row> 163 <Col span="24"> 164 <Tree v-bind:data="data1" v-on:on-select-change="treeClick"></Tree> 165 </Col> 166 </row> 167 168 169 </div> 170 </Card> 171 </Sider> 172 <Layout > 173 <Content class="full-content"> 174 <Tabs v-bind:value="activeKey" v-on:on-click="tabsClick" ref="tabs" v-bind:animated="false"> 175 <Tab-pane label="植物列表" name="key1" v-bind:index="1"> 176 177 <datagrid border ref="gv" v-bind:height="tableHeight" v-bind:columns="columns1" v-bind:url="url" size="small" v-bind:page-small="false"></datagrid> 178 </Tab-pane> 179 @*<Tab-pane v-show="showEchartsMap" :lazy="true" label="物种分布" name="key2" v-bind:index="2"> 180 181 <div ref="plantsMapEchartsID" style="height:100%;100%"> </div> 182 183 </Tab-pane>*@ 184 <Tab-pane label="物种分布" name="key2" v-bind:index="2"> 185 186 <div ref="plantsMapEchartsID" style="height:100%;100%"> </div> 187 188 </Tab-pane> 189 190 </Tabs> 191 </Content> 192 </Layout> 193 </Layout> 194 </div> 195 196 197 <div id="contentSecond" v-show='showSecond' style="100%;height:100%"> 198 <Layout style="100%;height:100%"> 199 <Content> 200 201 <div style="position:absolute;top: 144px;right: 30px;"> 202 <div style="position: relative;z-index:99999"> 203 <a id="btn" href="javascript:;"> 204 <tooltip content="返回列表" placement="top-end"> 205 <img src="/Ecology/Images/icons8-return-30.png" /> 206 </tooltip> 207 </a> 208 </div> 209 </div> 210 211 <div v-if='showSecond' style="100%;height:100%"> 212 <Tabs v-bind:value="activeKeySecond" v-on:on-click="tabsClickSecond"> 213 <Tab-pane label="植物详情" name="key3" v-bind:index="1"> 214 <div v-bind:style="bindStyle_yd"> 215 <div class="container"> 216 <row> 217 <i-col span="5"> 218 219 </i-col> 220 <i-col span="14"> 221 <div class="mydiv1" style="text-align:center"> 222 <span> {{formModel.Species}} </span> 223 <span style="font-style:italic"> {{formModel.LatinSpecies}} </span> 224 </div> 225 </i-col> 226 <i-col span="5"> 227 </i-col> 228 </row> 229 <div id="dowebok"> 230 <Carousel v-bind:height="imgHeight+'px'" v-model="carouselValue" style="text-align:center;" dots="outside"> 231 <div v-for="item in imgData" v-on:click="handleView(item)"> 232 <Carousel-Item> 233 <img v-bind:src="item.src" style="height:inherit;auto;cursor:pointer;" /> 234 <div><span class="carousel-text"> {{item.picName}}</span></div> 235 </Carousel-Item> 236 </div> 237 </Carousel> 238 </div> 239 240 <ViewPhotoWithAttr ref="viewerYd" v-bind:image-list="imgData" /> 241 <row> 242 243 <i-col span="24"> 244 <div class="mydiv"> 245 <row> 246 <i-col span="9"> 247 科： <span> {{formModel.Family}} </span><span> {{formModel.LatinFamily}} </span> 248 </i-col> 249 <i-col span="9"> 250 属： <span> {{formModel.Genus}} </span><span> {{formModel.LatinGenus}} </span> 251 </i-col> 252 <i-col span="6"> 253 国家保护等级： <span> {{formModel.NationalConservationLevel}} </span> 254 </i-col> 255 </row> 256 <row> 257 <i-col span="9"> 258 中国生物多样性红色名录： <span> {{translateChineseSpeciesRedList(formModel.ChinaBiodiversityRedList)}} </span> 259 </i-col> 260 <i-col span="9"> 261 别名： <span> {{formModel.AnotherName}} </span> 262 </i-col> 263 <i-col span="6"> 264 CITES附录： <span> {{formModel.CITESAppendix}} </span> 265 </i-col> 266 267 </row> 268 <row> 269 <i-col span="9"> 270 海拔： <span> {{formModel.Altitude}}(米) </span> 271 </i-col> 272 <i-col span="9"> 273 外来与入侵种： <span> {{formModel.ExoticOrInvasiveSpeciesName}} </span> 274 </i-col> 275 <i-col span="6"> 276 IUCN濒危等级： <span> {{translateChineseSpeciesRedList(formModel.IUCNEndangeredGrade)}} </span> 277 </i-col> 278 </row> 279 <row> 280 <i-col span="24"> 281 分布： <span> {{formModel.Locations}} </span> 282 </i-col> 283 284 </row> 285 </div> 286 </i-col> 287 </row> 288 </div> 289 </div> 290 </Tab-pane> 291 292 <Tab-pane label="调查结果" name="key4" v-if="showMap" v-bind:index="2"> 293 294 <Layout style="height:100%"> 295 <i-Content style="height:100%"> 296 <Cesium-Map ref="cesiumMap" style="position: relative;height:100%; 100%;" @@data-click="handleMapDataClick"></Cesium-Map> 297 </i-Content> 298 <Sider style="background-color: rgb(245, 247, 249);" v-bind:width="250" v-show="selectPoint"> 299 <card style="height:100%" class="map-left-card"> 300 <p slot="title">植物详情</p> 301 <i-form v-bind:label-width="80" class="attr-form"> 302 <Form-Item label="物种名称"> 303 <span> {{selectInfo.Species}} </span> 304 </Form-Item> 305 <Form-Item label="物种数量"> 306 <span> {{selectInfo.Quantity }} </span> 307 </Form-Item> 308 <Form-Item label="样地编号"> 309 <span> {{selectInfo.PlotID }} </span> 310 </Form-Item> 311 <Form-Item label="样地地点"> 312 <span> {{selectInfo.SamplePlotAddress}} </span> 313 </Form-Item> 314 315 <Form-Item label="经纬度"> 316 <span> {{selectInfo.LonAndLat}} </span> 317 </Form-Item> 318 <Form-Item label="样地面积"> 319 <span v-if="selectInfo.SamplePlotArea"> {{selectInfo.SamplePlotArea}} (㎡)</span> 320 </Form-Item> 321 <Form-Item label="海拔"> 322 <span v-if="selectInfo.Altitude"> {{selectInfo.Altitude}} (米)</span> 323 </Form-Item> 324 <Form-Item label="坡度"> 325 <span v-if="selectInfo.Slope"> {{selectInfo.Slope}} (度)</span> 326 </Form-Item> 327 <Form-Item label="调查时间"> 328 <span> {{selectInfo.InvestigationTime}} </span> 329 </Form-Item> 330 <Form-Item label="调查人"> 331 <span> {{selectInfo.Investigator}} </span> 332 </Form-Item> 333 334 <div v-if="weatherData!=null&& weatherData.RecordDate"> 335 <div style="margin:10px 0px 0px 15px "><label>现场气象</label></div> 336 <Form-Item label="数据时间"> 337 <span v-if="weatherData.RecordDate">{{ weatherData.RecordDateString }}</span> 338 <span v-if="weatherData.RecordDate">{{ weatherData.DataHour +'时' }}</span> 339 </Form-Item> 340 341 <Form-Item label="温度"> 342 <span>{{ weatherData.Temperature }} (℃)</span> 343 </Form-Item> 344 345 <Form-Item label="降雨量"> 346 <span>{{ weatherData.Rainfall }} (mm/h)</span> 347 </Form-Item> 348 349 <Form-Item label="相对湿度"> 350 <span>{{ weatherData.RelativeHumidity }} (%)</span> 351 </Form-Item> 352 353 <Form-Item label="风速"> 354 <span>{{ weatherData.AvgWind }} (m/s)</span> 355 </Form-Item> 356 357 <Form-Item label="风向"> 358 <span>{{ weatherData.WindDir }}</span> 359 </Form-Item> 360 361 <Form-Item label="能见度"> 362 <span>{{ weatherData.Visibility }} (km)</span> 363 </Form-Item> 364 365 </div> 366 </i-form> 367 368 369 </card> 370 </Sider> 371 </Layout> 372 </Tab-pane> 373 374 </Tabs> 375 376 </div> 377 378 </Content> 379 </Layout> 380 </div> 381 382 </div> 383 </script> 384 <div id="app"> 385 </div> 386 387 <script> 388 var locationType = 1; 389 var coastalZone = []; 390 //是否珍惜植物 391 var isRare = true; 392 var coastalZoneList= [ 393 //{ value: 0, label: "全部" }, 394 { value: 1, label: "海岸带0-30m" }, 395 { value: 2, label: "0-200m" }, 396 { value: 3, label: "200-400m" }, 397 { value: 4, label: "400-600m" }, 398 { value: 5, label: "600-900m" } 399 ] 400 var vm = new Vue({ 401 template: "#viewTemplate", 402 el: '#app', 403 data: { 404 plantsMapEcharts:null, 405 query:'', 406 showEchartsMap:true, 407 tabsHeight_yd: 600, 408 activeKeySecond: 'key3', 409 showSecond: false, 410 coastalZone: coastalZone, 411 coastalZoneList: coastalZoneList, 412 data1: [], 413 //查询默认值 414 formFilter: { 415 DValue: '', 416 }, 417 tableHeight: 700, 418 imgHeight: 350, 419 showMap: false, 420 locationList: null, 421 selectedItem: null, 422 selectPoint: null, 423 selectInfo: {}, 424 weatherData: {}, 425 speciesIfreamHeight: 600, 426 show2: false, 427 activeKey: 'key1', 428 formModel: { 429 }, 430 imgData:[], 431 carouselValue: 0, 432 url: '@Url.Action("Plants2List", "Construct")' + '?locationType=' + locationType + '&coastalZone=' + coastalZone, 433 modal1: false, 434 detailIfreamSrc: '', 435 mapIfreamSrc: "", 436 tabname: "", 437 tableData1: [], 438 columns1: [ 439 { 440 title: '种', 441 key: 'Species', 442 sortable: 'custom', 443 minWidth: 80, 444 render: function (h, params) { 445 return h('div', [ 446 h('a', { 447 props: { 448 type: 'primary', 449 size: 'small' 450 }, 451 style: { 452 }, 453 on: { 454 click: function () { 455 vm.showDetails(params); 456 } 457 } 458 }, params.row.Species) 459 ]); 460 } 461 }, 462 { 463 title: '别名', 464 key: 'AnotherName', 465 sortable: 'custom', 466 //sortable: true, 467 minWidth: 80, 468 469 }, 470 { 471 title: '拉丁名', 472 key: 'LatinSpecies', 473 sortable: 'custom', 474 //sortable: true, 475 minWidth: 120, 476 render: function (h, params) { 477 return h('div', [ 478 h('span', { 479 props: { 480 type: 'primary', 481 size: 'small' 482 }, 483 style: { 484 fontStyle: 'italic' 485 } 486 }, params.row.LatinSpecies) 487 ]); 488 } 489 }, 490 { 491 title: '国家保护等级', 492 key: 'NationalConservationLevel', 493 minWidth: 80, 494 maxWidth: 135, 495 filters: filtersNationalConservationLevel, 496 filterRemote: filterRemote 497 }, 498 { 499 title: 'IUCN濒危等级', 500 key: 'IUCNEndangeredGrade', 501 minWidth: 100, 502 maxWidth: 150, 503 filters: filtersChineseSpeciesRedList, 504 filterRemote: filterRemote, 505 render: renderChineseSpeciesRedList 506 }, 507 { 508 title: '多样性名录', 509 key: 'ChinaBiodiversityRedList', 510 minWidth: 70, 511 maxWidth: 125, 512 filters: filtersChineseSpeciesRedList, 513 filterRemote: filterRemote, 514 render: renderChineseSpeciesRedList 515 }, 516 517 { 518 title: 'CITES附录', 519 key: 'CITESAppendix', 520 minWidth: 100, 521 maxWidth: 150, 522 filters: filtersCITESAppendix, 523 filterRemote: filterRemote, 524 525 }, { 526 title: '海拔', 527 key: 'Altitude', 528 minWidth: 50, 529 maxWidth: 90, 530 531 532 }, { 533 title: '分布', 534 key: 'Locations', 535 minWidth: 200, 536 //maxWidth: 300, 537 }, 538 539 540 ] 541 542 }, 543 created: function () { 544 //this.getPlants2AltitudeList(locationType); 545 this.initTree(); 546 547 }, 548 watch: { 549 selectInfo: function (info) { 550 if (info) { 551 this.getWeatherData() 552 } 553 }, 554 'coastalZone': function (newValue) { 555 coastalZone = newValue; 556 557 this.initTree() 558 559 this.$refs.gv.filters = []; 560 //this.$refs.gv.queryinfo = null; 561 this.columns1 = arrayDeepCopy(this.columns1);//去掉界面选中状态，深拷贝而不是引用。 562 this.$refs.gv.currentPage = 1; 563 this.url = '@Url.Action("Plants2List", "Construct")' + '?locationType=' + locationType + '&coastalZone=' + coastalZone + '&query=' + this.query; 564 565 //this.showEchartsMap = false; 566 if (this.showEchartsMap == true) { 567 var that = this; 568 569 setTimeout(() => { 570 that.plantsMap(); 571 }, 300) 572 } 573 } 574 }, 575 computed: { 576 bindStyle_yd: function () { 577 return { 578 'height': '' + this.tabsHeight_yd + 'px', 579 'overflowY': 'auto', 580 'loverflowX': 'hidden' 581 } 582 }, 583 584 }, 585 methods: { 586 tabsClickSecond: function (typeSelect) { 587 588 }, 589 590 handleView: function (info) { 591 //console.log('handleViewYd', info.id); 592 var index = 0 593 for (var i = 0; i < this.imgData.length; i++) { 594 if (this.imgData[i].id === info.id) { 595 index = i 596 break 597 } 598 } 599 //console.log('index', index); 600 this.$refs.viewerYd.view(index) 601 }, 602 getImageListByPlotID: function (dataID) { 603 let that = this; 604 that.imgData = []; 605 606 try { 607 608 let url = '@Url.Action("GetImageList", "Construct")'; 609 $.ajax({ 610 url: url, 611 type: 'POST', 612 data: { dataID: dataID.toString(), dataType: 'T_Plants2.Pic' }, 613 success: function (result) { 614 //console.log('getImageListByPlotID', result); 615 if (result.success && result.rows != null && result.rows.length > 0) { 616 let imageList = result.rows; 617 618 if (imageList.length > 0) { 619 var srcPart = '@Url.Action("Image", "Image")' + '/' 620 var part = "/640"; 621 for (var i = 0, len = imageList.length; i < len; i++) { 622 var fileName = imageList[i].FileName; 623 if (fileName != undefined && fileName != null) { 624 var fileNameArr = fileName.split("_"); 625 var pic = fileNameArr[fileNameArr.length - 1]; 626 var picName = pic.substring(0, pic.length - 4); 627 628 that.imgData.push({ id: imageList[i].ImageID, src: srcPart + imageList[i].ImageID + part, name: imageList[i].FileName, picName: picName, imageUrlSmall: srcPart + imageList[i].ImageID + part, imageUrl: srcPart + imageList[i].ImageID });//imageList[i].textName 629 630 } 631 632 633 } 634 //console.log('that.imgData', that.imgData); 635 636 } 637 } 638 639 } 640 }); 641 } catch (err) { 642 //console.log('GetImageIDListErr', err) 643 } 644 645 }, 646 initTree: function () { 647 var that = this; 648 that.data1 = []; 649 var coastalZoneTemp = coastalZone.toString(); 650 console.log("coastalZoneTemp", coastalZoneTemp); 651 var url = '@Url.Action("Plants2Tree", "Construct")'; 652 var data = { locationType: locationType, coastalZone: coastalZoneTemp, query: that.query }; 653 $.ajax({ 654 url:url, 655 data:data, 656 type:"get", 657 dataType:"json", 658 traditional: true, 659 success: function (result) { 660 //console.log('Plants2Tree', result) 661 if (result != null && result.length > 0) { 662 if (result[0] != null) { 663 result[0].expand = true; 664 result[0].selected = true; 665 666 that.data1 = result; 667 //console.log('that.$refs.gv.filters', that.$refs.gv.filters) 668 669 } 670 } 671 } 672 }) 673 674 }, 675 getWeatherData() { 676 var url = '@Url.Action("WeatherData", "Construct")'; 677 var that = this; 678 var info = this.selectInfo; 679 if (info.InvestigationTime && info.Latitude && info.Longitude) { 680 681 var data = { 682 datetime: info.InvestigationTime, 683 lat: info.Latitude, 684 lon: info.Longitude 685 } 686 $.ajax({ 687 url: url, 688 data: data, 689 success: function (result) { 690 console.log('WeatherData', result) 691 if (result.success) { 692 that.weatherData = result.data 693 } 694 } 695 }); 696 } 697 else { 698 that.weatherData = {} 699 } 700 701 }, 702 selectTreeById(id) { 703 var tree = this.data1; 704 for (var i in tree) { 705 var treeItem = findNode(tree[i], id); 706 if (treeItem) { 707 if (this.selectedItem) { 708 Vue.set(this.selectedItem, 'selected', false); 709 } 710 this.selectedItem = treeItem; 711 712 //item.selected = true; 713 if (treeItem != null) { 714 Vue.set(treeItem, 'selected', true); 715 } 716 717 var filterModel = { 718 Family: null, 719 Genus: null, 720 Species: null, 721 } 722 723 filterModel.Family = [treeItem.subjectName]; 724 filterModel.Genus = [treeItem.genus]; 725 filterModel.Species = [treeItem.title]; 726 this.getLocationList(filterModel) 727 728 break; 729 } 730 731 } 732 }, 733 734 tabsClick: function (key) { 735 // //console.log('tabsClick', key); 736 this.activeKey = key; 737 738 //this.resizePlantsMapEcharts(); 739 if (this.showEchartsMap == true) { 740 var that = this; 741 742 setTimeout(() => { 743 that.plantsMap(); 744 }, 300) 745 } 746 747 }, 748 getAnimalInfo: function (id) { 749 var url = '@Url.Action("Plants2Details", "Construct")'; 750 $.ajax({ 751 url: url, 752 data: { id: id }, 753 success: function (result) { 754 // //console.log('getInfo', result.rows); 755 if (result.success) { 756 vm.setAinmalInfo(result.rows); 757 } 758 } 759 }); 760 }, 761 setAinmalInfo(info) { 762 this.formModel = info; 763 }, 764 showDetails: function (params) { 765 // //console.log('showDetails', params.row); 766 this.showSecond = true; 767 //this.activeKey = 'key2'; 768 769 this.getAnimalInfo(params.row.PlantID); 770 this.selectTreeById(params.row.PlantID) 771 //vm.show2 = true; 772 this.getImageListByPlotID(params.row.PlantID); 773 774 }, 775 handleMapDataClick: function (data) { 776 777 //this.$emit('data-click', data.id.getValue()) 778 if (data) { 779 this.selectPoint = data.id.getValue() 780 this.getPlantQuadratsInfo() 781 } 782 else { 783 this.selectPoint = null 784 } 785 }, 786 787 treeClick: function (dataArray) { 788 console.log('dataArray', dataArray) 789 this.selectedItem = dataArray[0] 790 //console.log('dataArray', dataArray); 791 var filters = []; 792 //将datagrid中this.filters 对应字段设置为null,url就不会包含该项 793 var filterModel = { 794 //Class: null, 795 ChineseOrder: null, 796 Family: null, 797 Genus: null, 798 Species: null, 799 } 800 //this.showEchartsMap = true; 801 //vm.show2 = false; 802 //this.activeKey = 'key1'; 803 if (dataArray != null && dataArray.length > 0) { 804 if (dataArray[0].title != null && dataArray[0].title.length > 0) { 805 var title = (dataArray[0].title.split("("))[0]; 806 // //console.log('title', title); 807 if (title != null && title != "") { 808 //单项过滤 809 switch (dataArray[0].key) { 810 case '全部': 811 812 break; 813 //case '纲': 814 // filterModel.Class = [title]; 815 // break; 816 case '目': 817 //filterModel.Class = [dataArray[0].typeName]; 818 filterModel.ChineseOrder = [title]; 819 820 break; 821 case '科': 822 //filterModel.Class = [dataArray[0].typeName]; 823 filterModel.ChineseOrder = [dataArray[0].catalogueName]; 824 filterModel.Family = [title]; 825 826 break; 827 case '属': 828 //filterModel.Class = [dataArray[0].typeName]; 829 filterModel.ChineseOrder = [dataArray[0].catalogueName]; 830 filterModel.Family = [dataArray[0].subjectName]; 831 filterModel.Genus = [title]; 832 833 break; 834 case '种': 835 //filterModel.Class = [dataArray[0].typeName]; 836 837 filterModel.ChineseOrder = [dataArray[0].catalogueName]; 838 filterModel.Family = [dataArray[0].subjectName]; 839 filterModel.Genus = [dataArray[0].genus]; 840 filterModel.Species = [title]; 841 //vm.show2 = true; 842 //console.log('treeClick-showMap', this.showMap, this.activeKey) 843 //if (this.showMap == false && this.activeKey == 'key4') { 844 // this.activeKey == 'key1' 845 //} 846 var id = dataArray[0].id; 847 if (id != null && id > 0) { 848 this.getAnimalInfo(id); 849 this.getImageListByPlotID(id); 850 //this.$nextTick(function () { 851 // viewer = new Viewer(document.getElementById('dowebok')); 852 //}) 853 } 854 855 break; 856 default: 857 } 858 859 } 860 } 861 862 } 863 864 //filters.push({ 'row': 'Class', 'op': 'equal', 'value': filterModel.Class }); 865 filters.push({ 'row': 'ChineseOrder', 'op': 'equal', 'value': filterModel.ChineseOrder }); 866 filters.push({ 'row': 'Family', 'op': 'equal', 'value': filterModel.Family }); 867 filters.push({ 'row': 'Genus', 'op': 'equal', 'value': filterModel.Genus }); 868 filters.push({ 'row': 'Species', 'op': 'equal', 'value': filterModel.Species }); 869 ////console.log('filters', filters); 870 871 this.$refs.gv.queryinfo = trim(this.formFilter.DValue); 872 this.$refs.gv.setFilter(filters); 873 874 //this.getLocationList(filterModel) 875 876 if (this.showEchartsMap == true) { 877 var that = this; 878 879 setTimeout(() => { 880 that.plantsMap(); 881 }, 300) 882 } 883 884 }, 885 886 getLocationList: function (filterModel) { 887 var that = this 888 var filter = null 889 if (filterModel) { 890 filter = {} 891 if (filterModel.Class) { 892 filter.ClassName = filterModel.Class[0] 893 } 894 if (filterModel.OrderName) { 895 filter.OrderName = filterModel.OrderName[0] 896 } 897 if (filterModel.Family) { 898 filter.FamilyName = filterModel.Family[0] 899 } 900 if (filterModel.Genus) { 901 filter.GenusName = filterModel.Genus[0] 902 } 903 if (filterModel.Species) { 904 filter.SpeciesName = filterModel.Species[0] 905 } 906 filter.locationType = locationType; 907 //filter.coastalZone = coastalZone; 908 } 909 910 911 if (filter && filter.SpeciesName) { 912 var url = '@Url.Action("PlantQuadratsLocationList", "Construct")'; 913 $.ajax({ 914 url: url, 915 data: filter, 916 success: function (result) { 917 918 //console.log('PlantQuadratsLocationList', result); 919 if (result.success && result.rows != null && result.rows.length>0) { 920 var list = result.rows; 921 var pointList = []; 922 for(var item of list) { 923 var num = getNumByQuantity(locationType, item.Quantity) 924 var p = { 925 id: item.PlantQuadratID, 926 name: item.Species, 927 label: item.SamplePlotAddress, 928 lon: item.Longitude, 929 lat: item.Latitude, 930 num: num, 931 932 } 933 pointList.push(p) 934 } 935 that.showMap = true; 936 that.locationList = pointList; 937 that.selectInfo = {}; 938 that.selectPoint = null 939 that.$nextTick(function () { 940 if (that.$refs.cesiumMap) { 941 that.$refs.cesiumMap.initData(pointList); 942 } 943 }) 944 } else { 945 that.showMap = false; 946 947 if (that.showMap == false && that.activeKeySecond == 'key4') { 948 that.activeKeySecond = 'key3' 949 } 950 951 that.locationList = []; 952 that.selectInfo = {}; 953 that.selectPoint = null 954 that.$nextTick(function () { 955 if (that.$refs.cesiumMap) { 956 that.$refs.cesiumMap.initData([]); 957 } 958 }) 959 } 960 } 961 }); 962 } 963 else { 964 that.showMap = false; 965 that.locationList = []; 966 that.selectInfo = {}; 967 that.selectPoint = null 968 that.$nextTick(function () { 969 if (that.$refs.cesiumMap) { 970 that.$refs.cesiumMap.initData([]); 971 } 972 }) 973 } 974 }, 975 getPlantQuadratsInfo: function () { 976 977 var that = this 978 var url = '@Url.Action("PlantQuadratsInfo", "Construct")'; 979 $.ajax({ 980 url: url, 981 data: { id: that.selectPoint }, 982 success: function (result) { 983 //console.log('PlantQuadratsInfo', result); 984 if (result.success) { 985 var data = result.data; 986 that.selectInfo = data; 987 var strLonAndLat = getLonAndLat(data.Longitude, data.Latitude); 988 that.selectInfo.LonAndLat = strLonAndLat 989 990 } 991 } 992 }); 993 994 }, 995 //查询点击事件 996 filterClick: function (dataf) { 997 var queryData = ''; 998 if (this.formFilter.DValue != null && this.formFilter.DValue.length > 0) { 999 queryData = trim(this.formFilter.DValue); 1000 } 1001 this.query = queryData; 1002 //this.initTree(); 1003 // //console.log('queryData', queryData); 1004 //this.$refs.gv.setQuery(queryData); 1005 this.initTree(); 1006 this.$refs.gv.filters = []; 1007 //this.$refs.gv.queryinfo = null; 1008 this.columns1 = arrayDeepCopy(this.columns1);//去掉界面选中状态，深拷贝而不是引用。 1009 1010 this.$refs.gv.currentPage = 1; 1011 this.url = '@Url.Action("Plants2List", "Construct")' + '?locationType=' + locationType + '&coastalZone=' + coastalZone + '&query=' + this.query; 1012 this.showSecond = false; 1013 if ( this.showEchartsMap == true) { 1014 var that = this; 1015 setTimeout(() => { 1016 that.plantsMap(); 1017 }, 300) 1018 } 1019 //this.showEchartsMap = false; 1020 //this.activeKey = 'key1'; 1021 1022 1023 }, 1024 resizePlantsMapEcharts() { 1025 1026 var that = this; 1027 setTimeout(() => { 1028 var plantsMapEcharts = that.plantsMapEcharts; 1029 if (plantsMapEcharts) { 1030 plantsMapEcharts.resize() 1031 } 1032 }, 300) 1033 }, 1034 plantsMap: function () { 1035 var that = this; 1036 var filtersPms = that.$refs.gv.filters; 1037 var filters = []; 1038 var key = ""; 1039 if (filtersPms != null) { 1040 for (var i in filtersPms) { 1041 if (filtersPms[i].value && filtersPms[i].value.length > 0) { 1042 filters.push({ 'field': filtersPms[i].row, 'op': filtersPms[i].op, 'value': filtersPms[i].value }) 1043 if (filtersPms[i].row == "Species") { 1044 key = "种"; 1045 } 1046 } 1047 } 1048 if (filters.length > 0) { 1049 filters = JSON.stringify(filters); 1050 } 1051 } else { 1052 filters = null; 1053 } 1054 1055 //console.log('filters', filters) 1056 var query = vm.query; 1057 console.log('query', query); 1058 console.log('coastalZone1', coastalZone); 1059 var coastalZoneTemp = coastalZone.toString(); 1060 console.log("coastalZoneTemp", coastalZoneTemp); 1061 1062 var url = '@Url.Action("PlantsMap", "Construct")'; 1063 $.get(url, { locationType: locationType, coastalZone: coastalZoneTemp, filters: filters, query: query }, function (result) { 1064 console.log('PlantsMap', result); 1065 if (result.mapList != null && result.mapList != undefined) { 1066 var id = "plantsMapEchartsID"; 1067 that.plantsMapEchart(result.mapList,id) 1068 } 1069 }); 1070 1071 }, 1072 plantsMapEchart: function (list,id) { 1073 // console.log('filtersPms', filtersPms) 1074 if (list != undefined && list != null) { 1075 var convertDataTest = list; 1076 console.log('plantsMapEcharts', this.plantsMapEcharts) 1077 //if (this.plantsMapEcharts) { 1078 // this.plantsMapEcharts.dispose() 1079 //} else { 1080 // this.plantsMapEcharts = null; 1081 //} 1082 var element = this.$refs[id]; 1083 console.log('element', element) 1084 var chart = echarts.init(element); 1085 this.plantsMapEcharts = chart; 1086 1087 1088 var myseriesName = "物种数量"; 1089 var mytitle = "物种分布"; 1090 if (key == "种") { 1091 mytitle = "种群数量分布"; 1092 myseriesName = "种群量"; 1093 } 1094 1095 var option = { 1096 title: { 1097 text: mytitle, 1098 left: 'center', 1099 top: 15, 1100 }, 1101 1102 tooltip: { 1103 trigger: 'item', 1104 formatter: function (dataTemp) { 1105 //种群量 1106 //console.log(dataTemp); 1107 //console.log(dataTemp.seriesName); 1108 var numAdd = ""; 1109 if (dataTemp.seriesName == "种群量") { 1110 if (dataTemp != null && dataTemp.value[2] != null && dataTemp.value[2] != 0) { 1111 for (var j = 0; j < dataTemp.value[2]; j++) { 1112 numAdd += "+"; 1113 } 1114 } 1115 1116 } else { 1117 numAdd = dataTemp.value[2]; 1118 } 1119 1120 1121 var formateStrings = []; 1122 formateStrings.push(dataTemp.value[3] + dataTemp.seriesName + "<br/>" + dataTemp.marker + dataTemp.name + "：" + numAdd + "<br/>"); 1123 1124 return formateStrings; 1125 } 1126 }, 1127 bmap: { 1128 center: [114.214336, 22.628779],//地图中心点经纬度 1129 zoom: 11, //地图缩放程度 1130 roam: true, 1131 mapStyle: { 1132 styleJson: [{ 1133 'featureType': 'water', 1134 'elementType': 'all', 1135 'stylers': { 1136 'color': '#d1d1d1' 1137 } 1138 }, 1139 { 1140 'featureType': 'land', 1141 'elementType': 'all', 1142 'stylers': { 1143 'color': '#f3f3f3' 1144 } 1145 }, { 1146 'featureType': 'railway', 1147 'elementType': 'all', 1148 'stylers': { 1149 'visibility': 'off' 1150 } 1151 }, { 1152 'featureType': 'highway', 1153 'elementType': 'all', 1154 'stylers': { 1155 'color': '#fdfdfd' 1156 } 1157 }, { 1158 'featureType': 'highway', 1159 'elementType': 'labels', 1160 'stylers': { 1161 'visibility': 'off' 1162 } 1163 }, 1164 { 1165 'featureType': 'arterial', 1166 'elementType': 'geometry', 1167 'stylers': { 1168 'color': '#fefefe' 1169 } 1170 }, { 1171 'featureType': 'arterial', 1172 'elementType': 'geometry.fill', 1173 'stylers': { 1174 'color': '#fefefe' 1175 } 1176 }, { 1177 'featureType': 'poi', 1178 'elementType': 'all', 1179 'stylers': { 1180 'visibility': 'off' 1181 } 1182 }, { 1183 'featureType': 'green', 1184 'elementType': 'all', 1185 'stylers': { 1186 'visibility': 'off' 1187 } 1188 }, { 1189 'featureType': 'subway', 1190 'elementType': 'all', 1191 'stylers': { 1192 'visibility': 'off' 1193 } 1194 }, 1195 { 1196 'featureType': 'manmade', 1197 'elementType': 'all', 1198 'stylers': { 1199 'color': '#d1d1d1' 1200 } 1201 }, 1202 { 1203 'featureType': 'local', 1204 'elementType': 'all', 1205 'stylers': { 1206 'color': '#d1d1d1' 1207 } 1208 }, 1209 { 1210 'featureType': 'arterial', 1211 'elementType': 'labels', 1212 'stylers': { 1213 'visibility': 'off' 1214 } 1215 }, { 1216 'featureType': 'boundary', 1217 'elementType': 'all', 1218 'stylers': { 1219 'color': '#fefefe' 1220 } 1221 }, 1222 { 1223 'featureType': 'building', 1224 'elementType': 'all', 1225 'stylers': { 1226 'color': '#d1d1d1' 1227 } 1228 }, 1229 { 1230 'featureType': 'label', 1231 'elementType': 'labels.text.fill', 1232 'stylers': { 1233 'color': '#d1d1d1'//'#D8BFD8'// '#999999' 1234 } 1235 } 1236 ] 1237 } 1238 1239 }, 1240 series: [ 1241 { 1242 name: myseriesName, 1243 type: 'scatter', //散点图 1244 coordinateSystem: 'bmap', //坐标系 1245 data: convertDataTest, 1246 symbolSize: function (val, params) { 1247 var value = val[2] * 2 + 7; 1248 if (value > 40) { 1249 value = 40; 1250 } 1251 return value; 1252 }, 1253 label: { 1254 normal: { 1255 formatter: function (params) { 1256 1257 return params.value[3]; 1258 }, 1259 position: 'right', 1260 show: true 1261 }, 1262 emphasis: { 1263 show: false 1264 } 1265 }, 1266 itemStyle: { 1267 normal: { 1268 color: 'green' 1269 } 1270 } 1271 }, 1272 1273 ] 1274 } 1275 chart.setOption(option); 1276 console.log('chart',chart); 1277 element.style.width = 100 + '%'; 1278 element.style.height = 100 + '%'; 1279 this.resizePlantsMapEcharts(); 1280 1281 1282 } else { 1283 //var element = this.$refs[id]; 1284 ////console.log('element', element) 1285 //var myChart = echarts.init(element); 1286 //myChart.clear(); 1287 } 1288 1289 }, 1290 1291 1292 1293 1294 }, 1295 mounted: function () { 1296 var that = this; 1297 // 设置表格高度 1298 that.tableHeight = window.innerHeight - 60 - 40 - 39 - 37 - 10 - 10;//- 168 - 37; 1299 that.tabsHeight_yd = window.innerHeight -207;//- 168 - 37; 1300 that.imgHeight = window.innerHeight - 450; 1301 window.onresize = function temp() { 1302 that.tableHeight = window.innerHeight - 60 - 40 - 39 - 37 - 10-10; 1303 that.imgHeight = window.innerHeight - 450;// 1304 that.tabsHeight_yd = window.innerHeight - 207;//- 168 - 37; 1305 1306 that.resizePlantsMapEcharts(); 1307 } 1308 1309 1310 that.$nextTick(() => { 1311 if (this.showEchartsMap == true) { 1312 var that = this; 1313 1314 setTimeout(() => { 1315 that.plantsMap(); 1316 }, 300) 1317 } 1318 var btn = document.getElementById('btn'); 1319 btn.addEventListener('click', function () { 1320 that.showSecond = false; 1321 1322 }, false); 1323 1324 }); 1325 1326 1327 1328 1329 1330 }, 1331 1332 }); 1333 1334 1335 1336 1337 1338 1339 1340 1341 </script>