| | |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | |
|---|
| | | <noscript> |
|---|
| | | <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. |
|---|
| | | Please enable it to continue.</strong> |
|---|
| | |
|---|
| | | /* border: 1px solid #D6E4FF; |
|---|
| | | box-shadow:none; */ |
|---|
| | | box-shadow:0 0 0 1px #D6E4FF; |
|---|
| | | } |
|---|
| | | .el-input__inner{ |
|---|
| | | color: #D6E4FF; |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | this.Viewer = this.earthCtrl._Viewer; |
|---|
| | | this.Viewer.scene.skyAtmosphere.show = false; |
|---|
| | | this.Viewer.scene.globe.depthTestAgainstTerrain = true; |
|---|
| | | console.log(this.earthCtrl); |
|---|
| | | console.log(SmartEarth.EarthCtrl); |
|---|
| | | |
|---|
| | | window.earthCtrl = this.earthCtrl; |
|---|
| | | window.Viewer = this.earthCtrl._Viewer; |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | Viewer.scene.globe.showGroundAtmosphere = false; |
|---|
| | | |
|---|
| | | // let colorAll = { |
|---|
| | | // point: SmartEarth.Cesium.Color.fromCssColorString("#ff0000"), |
|---|
| | | // polyline: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"), |
|---|
| | | // polygon: SmartEarth.Cesium.Color.fromCssColorString("#ffff0050"), |
|---|
| | | // }; |
|---|
| | | // this.earthCtrl.Analysis.spaceDistance(colorAll, () => {}); |
|---|
| | | // var terrain = new SmartEarth.Cesium.CesiumTerrainProvider({ |
|---|
| | | // url: config.moonTerrain, |
|---|
| | | // tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({ |
|---|
| | |
|---|
| | | const menuData = { |
|---|
| | | topMenu: [ |
|---|
| | | topMenu: [ |
|---|
| | | { |
|---|
| | | id: "a1", |
|---|
| | | name: "漫游", |
|---|
| | | imgUrl: "å¾å± 8 æ·è´ 2.png", |
|---|
| | | level: 1, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | id: 'a1', |
|---|
| | | name: "漫游", |
|---|
| | | imgUrl: 'å¾å± 8 æ·è´ 2.png', |
|---|
| | | level: 1, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | id: 'a2', |
|---|
| | | name: "ç¹æ¼«æ¸¸", |
|---|
| | | imgUrl: 'æ¤å 6.png', |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'a3', |
|---|
| | | name: "线路漫游", |
|---|
| | | imgUrl: 'æ¤å 7 æ·è´ 2.png', |
|---|
| | | level: 2, |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | id: "a2", |
|---|
| | | name: "ç¹æ¼«æ¸¸", |
|---|
| | | imgUrl: "æ¤å 6.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'b1', |
|---|
| | | name: "éæµ", |
|---|
| | | imgUrl: 'å¾å± 5 æ·è´ 6.png', |
|---|
| | | level: 1, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | id: 'b2', |
|---|
| | | name: "表é¢è·ç¦»", |
|---|
| | | imgUrl: 'å¾å± 31.png', |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'b3', |
|---|
| | | name: "å¹³é¢é¢ç§¯", |
|---|
| | | imgUrl: 'ç©å½¢ 13 æ·è´.png', |
|---|
| | | level: 2, |
|---|
| | | }, { |
|---|
| | | id: 'b4', |
|---|
| | | name: "é«ç¨æµé", |
|---|
| | | imgUrl: 'é«ç¨æµé.png', |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'b5', |
|---|
| | | name: "åç´é«åº¦", |
|---|
| | | imgUrl: 'å¾å± 31 æ·è´.png', |
|---|
| | | level: 2, |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | id: "a3", |
|---|
| | | name: "线路漫游", |
|---|
| | | imgUrl: "æ¤å 7 æ·è´ 2.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "b1", |
|---|
| | | name: "éæµ", |
|---|
| | | imgUrl: "å¾å± 5 æ·è´ 6.png", |
|---|
| | | level: 1, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | id: "b2", |
|---|
| | | name: "表é¢è·ç¦»", |
|---|
| | | imgUrl: "å¾å± 31.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'c1', |
|---|
| | | name: "æ ç»", |
|---|
| | | imgUrl: 'ç©å½¢ 8 æ·è´ 11.png', |
|---|
| | | level: 1, |
|---|
| | | children: [{ |
|---|
| | | id: 'c2', |
|---|
| | | name: "ç¹", |
|---|
| | | imgUrl: 'æ¤å 5 æ·è´ 3.png', |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'c3', |
|---|
| | | name: "æå", |
|---|
| | | imgUrl: 'æåæ 注.png', |
|---|
| | | level: 2, |
|---|
| | | }, { |
|---|
| | | id: 'c4', |
|---|
| | | name: "线", |
|---|
| | | imgUrl: 'æ¤å 3 æ·è´ 16.png', |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'c5', |
|---|
| | | name: "ç©å½¢", |
|---|
| | | imgUrl: 'æ¤å 3 æ·è´ 20.png', |
|---|
| | | level: 2, |
|---|
| | | }, { |
|---|
| | | id: 'c6', |
|---|
| | | name: "å¤è¾¹å½¢", |
|---|
| | | imgUrl: 'æ¤å 3 æ·è´ 23.png', |
|---|
| | | level: 2, |
|---|
| | | }], |
|---|
| | | id: "b3", |
|---|
| | | name: "å¹³é¢é¢ç§¯", |
|---|
| | | imgUrl: "ç©å½¢ 13 æ·è´.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'd1', |
|---|
| | | name: "åæ", |
|---|
| | | imgUrl: 'ç¢éæºè½å¯¹è±¡ æ·è´ 3.png', |
|---|
| | | level: 1, |
|---|
| | | children: [{ |
|---|
| | | id: 'd2', |
|---|
| | | name: "çé«çº¿åæ", |
|---|
| | | imgUrl: 'æ¤å 8 æ·è´ 8.png', |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'd3', |
|---|
| | | name: "å¡åº¦åæ", |
|---|
| | | imgUrl: 'åè§ç©å½¢ 12 æ·è´ 5.png', |
|---|
| | | level: 2, |
|---|
| | | }, { |
|---|
| | | id: 'd4', |
|---|
| | | name: "åæ¹é计ç®", |
|---|
| | | imgUrl: 'å¾å± 14 æ·è´ 3.png', |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'd5', |
|---|
| | | name: "å½±å对æ¯", |
|---|
| | | imgUrl: 'åè§ç©å½¢ 12 æ·è´ 6.png', |
|---|
| | | id: "b4", |
|---|
| | | name: "é«ç¨æµé", |
|---|
| | | imgUrl: "é«ç¨æµé.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "b5", |
|---|
| | | name: "åç´é«åº¦", |
|---|
| | | imgUrl: "å¾å± 31 æ·è´.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "c1", |
|---|
| | | name: "æ ç»", |
|---|
| | | imgUrl: "ç©å½¢ 8 æ·è´ 11.png", |
|---|
| | | level: 1, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | id: "c2", |
|---|
| | | name: "ç¹", |
|---|
| | | imgUrl: "æ¤å 5 æ·è´ 3.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "c3", |
|---|
| | | name: "æå", |
|---|
| | | imgUrl: "æåæ 注.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "c4", |
|---|
| | | name: "线", |
|---|
| | | imgUrl: "æ¤å 3 æ·è´ 16.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "c5", |
|---|
| | | name: "ç©å½¢", |
|---|
| | | imgUrl: "æ¤å 3 æ·è´ 20.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "c6", |
|---|
| | | name: "å¤è¾¹å½¢", |
|---|
| | | imgUrl: "æ¤å 3 æ·è´ 23.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "d1", |
|---|
| | | name: "åæ", |
|---|
| | | imgUrl: "ç¢éæºè½å¯¹è±¡ æ·è´ 3.png", |
|---|
| | | level: 1, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | id: "d2", |
|---|
| | | name: "çé«çº¿åæ", |
|---|
| | | imgUrl: "æ¤å 8 æ·è´ 8.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "d3", |
|---|
| | | name: "å¡åº¦åæ", |
|---|
| | | imgUrl: "åè§ç©å½¢ 12 æ·è´ 5.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "d4", |
|---|
| | | name: "åæ¹é计ç®", |
|---|
| | | imgUrl: "å¾å± 14 æ·è´ 3.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "d5", |
|---|
| | | name: "å½±å对æ¯", |
|---|
| | | imgUrl: "åè§ç©å½¢ 12 æ·è´ 6.png", |
|---|
| | | |
|---|
| | | level: 2, |
|---|
| | | }, { |
|---|
| | | id: 'd6', |
|---|
| | | name: "é´å½±åæ", |
|---|
| | | imgUrl: 'å¾å± 8.png', |
|---|
| | | level: 2, |
|---|
| | | }], |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'e1', |
|---|
| | | imgUrl: 'å½¢ç¶ 5.png', |
|---|
| | | name: "å¿«ç
§", |
|---|
| | | level: 1, |
|---|
| | | id: "d6", |
|---|
| | | name: "é´å½±åæ", |
|---|
| | | imgUrl: "å¾å± 8.png", |
|---|
| | | level: 2, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'f1', |
|---|
| | | name: "空é´æ¥è¯¢", |
|---|
| | | imgUrl: 'å½¢ç¶ 3.png', |
|---|
| | | level: 1, |
|---|
| | | children: [], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'g1', |
|---|
| | | imgUrl: 'å¾å± 7 æ·è´ 5.png', |
|---|
| | | name: "åæ å®ä½", |
|---|
| | | level: 1, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'k1', |
|---|
| | | imgUrl: 'æ¸
é¤.png', |
|---|
| | | level: 1, |
|---|
| | | name: "æ¸
é¤", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | leftMenu: [ |
|---|
| | | { |
|---|
| | | id: 'l1', |
|---|
| | | name: 'å¾å±ç®¡ç', |
|---|
| | | imgUrl: 'å¾å±1 (1).png', |
|---|
| | | checkImgUrl: 'å¾å±1 (1) æ·è´.png' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: 'l2', |
|---|
| | | name: 'æ ç»æ¥è¯¢', |
|---|
| | | imgUrl: 'å½¢ç¶ 4.png', |
|---|
| | | checkImgUrl: 'å½¢ç¶ 4 æ·è´.png' |
|---|
| | | }, { |
|---|
| | | id: 'l3', |
|---|
| | | name: 'ä¸é¢å¾å¶ä½', |
|---|
| | | imgUrl: 'å½¢ç¶ 2.png', |
|---|
| | | checkImgUrl: 'å½¢ç¶ 2 æ·è´.png' |
|---|
| | | }, { |
|---|
| | | id: 'l4', |
|---|
| | | name: 'å·¥å
·ç®±', |
|---|
| | | imgUrl: 'å½¢ç¶ 1.png', |
|---|
| | | checkImgUrl: 'å½¢ç¶ 1 æ·è´.png' |
|---|
| | | }, { |
|---|
| | | id: 'l5', |
|---|
| | | name: 'å
¨å±', |
|---|
| | | imgUrl: 'å½¢ç¶ 8.png', |
|---|
| | | checkImgUrl: 'å½¢ç¶ 8 æ·è´.png' |
|---|
| | | }, { |
|---|
| | | id: 'l6', |
|---|
| | | name: 'åºå¾åæ¢', |
|---|
| | | imgUrl: 'å½¢ç¶ 3.png', |
|---|
| | | checkImgUrl: 'å½¢ç¶ 3 æ·è´.png' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | export default menuData; |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "e1", |
|---|
| | | imgUrl: "å½¢ç¶ 5.png", |
|---|
| | | name: "å¿«ç
§", |
|---|
| | | level: 1, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "f1", |
|---|
| | | name: "空é´æ¥è¯¢", |
|---|
| | | imgUrl: "å½¢ç¶ 3.png", |
|---|
| | | level: 1, |
|---|
| | | children: [], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "g1", |
|---|
| | | imgUrl: "å¾å± 7 æ·è´ 5.png", |
|---|
| | | name: "åæ å®ä½", |
|---|
| | | level: 1, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "k1", |
|---|
| | | imgUrl: "æ¸
é¤.png", |
|---|
| | | level: 1, |
|---|
| | | name: "æ¸
é¤", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | leftMenu: [ |
|---|
| | | { |
|---|
| | | id: "l1", |
|---|
| | | name: "å¾å±ç®¡ç", |
|---|
| | | imgUrl: "å¾å±1 (1).png", |
|---|
| | | checkImgUrl: "å¾å±1 (1) æ·è´.png", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "l2", |
|---|
| | | name: "æ ç»æ¥è¯¢", |
|---|
| | | imgUrl: "å½¢ç¶ 4.png", |
|---|
| | | checkImgUrl: "å½¢ç¶ 4 æ·è´.png", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "l3", |
|---|
| | | name: "ä¸é¢å¾å¶ä½", |
|---|
| | | imgUrl: "å½¢ç¶ 2.png", |
|---|
| | | checkImgUrl: "å½¢ç¶ 2 æ·è´.png", |
|---|
| | | }, |
|---|
| | | // { |
|---|
| | | // id: "l4", |
|---|
| | | // name: "å·¥å
·ç®±", |
|---|
| | | // imgUrl: "å½¢ç¶ 1.png", |
|---|
| | | // checkImgUrl: "å½¢ç¶ 1 æ·è´.png", |
|---|
| | | // }, |
|---|
| | | { |
|---|
| | | id: "l5", |
|---|
| | | name: "åºå¾åæ¢", |
|---|
| | | imgUrl: "å½¢ç¶ 8.png", |
|---|
| | | checkImgUrl: "å½¢ç¶ 8 æ·è´.png", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | id: "l6", |
|---|
| | | name: "å
¨å±", |
|---|
| | | imgUrl: "å½¢ç¶ 3.png", |
|---|
| | | checkImgUrl: "å½¢ç¶ 3 æ·è´.png", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | export default menuData; |
|---|
| | |
|---|
| | | const menuTool = { |
|---|
| | | toolMenu: null, |
|---|
| | | toolFlag: null, |
|---|
| | | colorAll: { |
|---|
| | | }, |
|---|
| | | topTools(res) { |
|---|
| | | this.clearTopTools(); |
|---|
| | | if (res.id == this.toolFlag) { |
|---|
| | | this.toolFlag = null; |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.toolFlag = res.id; |
|---|
| | | switch (res.id) { |
|---|
| | | case 'a2'://ç¹æ¼«æ¸¸ |
|---|
| | | this.pointRoam(); |
|---|
| | | break; |
|---|
| | | case 'a3'://线漫游 |
|---|
| | | this.lineRoam(); |
|---|
| | | break; |
|---|
| | | case 'b2'://表é¢è·ç¦» |
|---|
| | | this.surfaceDistance(); |
|---|
| | | break; |
|---|
| | | case 'b3'://å¹³é¢é¢ç§¯ |
|---|
| | | this.planeDistance(); |
|---|
| | | break; |
|---|
| | | case 'b4'://é«ç¨æµé |
|---|
| | | this.heightMeasure(); |
|---|
| | | break; |
|---|
| | | case 'b5'://åç´é«åº¦ |
|---|
| | | this.verticalHeight(); |
|---|
| | | break; |
|---|
| | | case 'd4'://åæ¹éè®¡ç® |
|---|
| | | this.Volumetric(); |
|---|
| | | break; |
|---|
| | | case 'd5'://å½±åå¯¹æ¯ |
|---|
| | | this.CurtainContrast(); |
|---|
| | | break; |
|---|
| | | case 'g1'://åæ å®ä½ |
|---|
| | | this.Coordposition(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | leftTools(res) { |
|---|
| | | this.clearLeftTools() |
|---|
| | | switch (res.id) { |
|---|
| | | case 'l1': |
|---|
| | | break; |
|---|
| | | case 'l2': |
|---|
| | | break; |
|---|
| | | case 'l3'://å¨çº¿å¶å¾ |
|---|
| | | this.setThematicMap(); |
|---|
| | | break; |
|---|
| | | case 'l4': |
|---|
| | | break; |
|---|
| | | case 'l5': |
|---|
| | | break; |
|---|
| | | case 'l6': |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | toolMenu: null, |
|---|
| | | toolFlag: null, |
|---|
| | | colorAll: {}, |
|---|
| | | topTools(res) { |
|---|
| | | this.clearTopTools(); |
|---|
| | | if (res.id == this.toolFlag) { |
|---|
| | | this.toolFlag = null; |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | this.toolFlag = res.id; |
|---|
| | | switch (res.id) { |
|---|
| | | case "a2": //ç¹æ¼«æ¸¸ |
|---|
| | | this.pointRoam(); |
|---|
| | | break; |
|---|
| | | case "a3": //线漫游 |
|---|
| | | this.lineRoam(); |
|---|
| | | break; |
|---|
| | | case "b2": //表é¢è·ç¦» |
|---|
| | | this.surfaceDistance(); |
|---|
| | | break; |
|---|
| | | case "b3": //å¹³é¢é¢ç§¯ |
|---|
| | | this.planeDistance(); |
|---|
| | | break; |
|---|
| | | case "b4": //é«ç¨æµé |
|---|
| | | this.heightMeasure(); |
|---|
| | | break; |
|---|
| | | case "b5": //åç´é«åº¦ |
|---|
| | | this.verticalHeight(); |
|---|
| | | break; |
|---|
| | | case "d4": //åæ¹éè®¡ç® |
|---|
| | | this.Volumetric(); |
|---|
| | | break; |
|---|
| | | case "d5": //å½±åå¯¹æ¯ |
|---|
| | | this.CurtainContrast(); |
|---|
| | | break; |
|---|
| | | case "g1": //åæ å®ä½ |
|---|
| | | this.Coordposition(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | leftTools(res) { |
|---|
| | | this.clearLeftTools(); |
|---|
| | | switch (res.id) { |
|---|
| | | case "l1": |
|---|
| | | break; |
|---|
| | | case "l2": |
|---|
| | | break; |
|---|
| | | case "l3": //å¨çº¿å¶å¾ |
|---|
| | | this.setThematicMap(); |
|---|
| | | break; |
|---|
| | | case "l4": |
|---|
| | | break; |
|---|
| | | case "l5": |
|---|
| | | break; |
|---|
| | | case "l6": |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //å¨çº¿å¶å¾ |
|---|
| | | setThematicMap() { |
|---|
| | | // earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE2D; |
|---|
| | | // var handle = new SmartEarth.Cesium.ScreenSpaceEventHandler(earthCtrl.viewer.scene.canvas); |
|---|
| | | //å¨çº¿å¶å¾ |
|---|
| | | setThematicMap() { |
|---|
| | | // earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE2D; |
|---|
| | | // var handle = new SmartEarth.Cesium.ScreenSpaceEventHandler(earthCtrl.viewer.scene.canvas); |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | //åæ å®ä½ |
|---|
| | | Coordposition() {}, |
|---|
| | | //å½±åå¯¹æ¯ |
|---|
| | | CurtainContrast() { |
|---|
| | | this.toolMenu = earthCtrl.analysis.createCurtainContrast({ |
|---|
| | | leftIndex: 0, |
|---|
| | | rightIndex: 1, |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | //åæ¹éè®¡ç® |
|---|
| | | Volumetric() { |
|---|
| | | const Volumetric = earthCtrl.analysis.createVolumetricMeasure({}); |
|---|
| | | Volumetric.startDrawing(); |
|---|
| | | }, |
|---|
| | | //åç´é«åº¦ |
|---|
| | | verticalHeight() { |
|---|
| | | earthCtrl.measure.measureHeight(function (e) {}); |
|---|
| | | }, |
|---|
| | | //é«ç¨æµé |
|---|
| | | heightMeasure() {}, |
|---|
| | | //å¹³é¢é¢ç§¯ |
|---|
| | | planeDistance() { |
|---|
| | | earthCtrl.analysis.getPlaneArea(function (e) {}); |
|---|
| | | }, |
|---|
| | | //表é¢è·ç¦» |
|---|
| | | surfaceDistance() { |
|---|
| | | earthCtrl.measure.lineLength(function (e) {}); |
|---|
| | | }, |
|---|
| | | //ç¹æ¼«æ¸¸ |
|---|
| | | pointRoam() {}, |
|---|
| | | //线漫游 |
|---|
| | | lineRoam() {}, |
|---|
| | | |
|---|
| | | //åæ å®ä½ |
|---|
| | | Coordposition() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | //å½±åå¯¹æ¯ |
|---|
| | | CurtainContrast() { |
|---|
| | | this.toolMenu = earthCtrl.analysis.createCurtainContrast({ leftIndex: 0, rightIndex: 1 }) |
|---|
| | | }, |
|---|
| | | //åæ¹éè®¡ç® |
|---|
| | | Volumetric() { |
|---|
| | | const Volumetric = earthCtrl.analysis.createVolumetricMeasure({}); |
|---|
| | | Volumetric.startDrawing(); |
|---|
| | | }, |
|---|
| | | //åç´é«åº¦ |
|---|
| | | verticalHeight() { |
|---|
| | | earthCtrl.measure.measureHeight(function (e) { |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //é«ç¨æµé |
|---|
| | | heightMeasure() { |
|---|
| | | }, |
|---|
| | | //å¹³é¢é¢ç§¯ |
|---|
| | | planeDistance() { |
|---|
| | | earthCtrl.analysis.getPlaneArea(function (e) { |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //表é¢è·ç¦» |
|---|
| | | surfaceDistance() { |
|---|
| | | earthCtrl.measure.lineLength(function (e) { |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //ç¹æ¼«æ¸¸ |
|---|
| | | pointRoam() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | //线漫游 |
|---|
| | | lineRoam() { |
|---|
| | | |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //æ¸
é¤æ¹æ³ |
|---|
| | | clearTopTools() { |
|---|
| | | if (this.toolFlag) { |
|---|
| | | switch (this.toolFlag) { |
|---|
| | | case 'a2': |
|---|
| | | |
|---|
| | | break; |
|---|
| | | case 'a3': |
|---|
| | | |
|---|
| | | break; |
|---|
| | | case 'b2': |
|---|
| | | case 'b3': |
|---|
| | | case 'b4': |
|---|
| | | case 'b5': |
|---|
| | | |
|---|
| | | break; |
|---|
| | | case 'd5': |
|---|
| | | debugger |
|---|
| | | this.toolMenu.removeFromMap() |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | // this.toolFlag = null; |
|---|
| | | this.toolMenu = null; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | clearLeftTools() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | } |
|---|
| | | export default menuTool; |
|---|
| | | //æ¸
é¤æ¹æ³ |
|---|
| | | clearTopTools() { |
|---|
| | | if (this.toolFlag) { |
|---|
| | | switch (this.toolFlag) { |
|---|
| | | case "a2": |
|---|
| | | break; |
|---|
| | | case "a3": |
|---|
| | | break; |
|---|
| | | case "b2": |
|---|
| | | earthCtrl.tools.browse(); |
|---|
| | | break; |
|---|
| | | case "b3": |
|---|
| | | case "b4": |
|---|
| | | case "b5": |
|---|
| | | earthCtrl.tools.browse(); |
|---|
| | | break; |
|---|
| | | case "d5": |
|---|
| | | debugger; |
|---|
| | | this.toolMenu.removeFromMap(); |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | // this.toolFlag = null; |
|---|
| | | this.toolMenu = null; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | clearLeftTools() {}, |
|---|
| | | }; |
|---|
| | | export default menuTool; |
|---|
| | |
|---|
| | | |
|---|
| | | <menus></menus> |
|---|
| | | <bottom-btn></bottom-btn> |
|---|
| | | <top-btn></top-btn> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | import menus from "@/views/menus.vue"; |
|---|
| | | //åºé¨èå |
|---|
| | | import bottomBtn from "@/components/bottomBtn.vue"; |
|---|
| | | //顶é¨èå |
|---|
| | | import topBtn from "@/components/topBtn.vue"; |
|---|
| | | |
|---|
| | | import InitMap from "@/assets/js/Map/index.js"; |
|---|
| | | |
|---|
| | | // import * as SmartEarth from "../../public/CIMSDK/index.js"; |
|---|
| | | // import * as SmartEarth from "../assets/js/CIMSDK/index.js"; |
|---|
| | | let map; |
|---|
| | | var viewer; |
|---|
| | | const init = () => { |
|---|
| | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | // console.log(SmartEarth); |
|---|
| | | InitMap.init3DMap(); |
|---|
| | | init(); |
|---|
| | | }); |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div v-drag class="baseMapSwitching"> |
|---|
| | | <div class="baseMapSwitchingTitle"> |
|---|
| | | <div class="tileLeft"> |
|---|
| | | <div class="titleImg"> |
|---|
| | | <ArrowLeft /> |
|---|
| | | </div> |
|---|
| | | <div class="titleLable"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="baseMapSwitching_content"> |
|---|
| | | <div class="baseMapSwitching_list"> |
|---|
| | | <div |
|---|
| | | class="baseMapSwitching_list_tr" |
|---|
| | | v-for="(item, i) in list" |
|---|
| | | :key="i" |
|---|
| | | > |
|---|
| | | <div class="baseMapSwitching_list_tr_name"> |
|---|
| | | <span>{{ item.name }}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script lang="ts" setup> |
|---|
| | | import { |
|---|
| | | ref, |
|---|
| | | onMounted, |
|---|
| | | onBeforeUnmount, |
|---|
| | | reactive, |
|---|
| | | defineProps, |
|---|
| | | defineEmits, |
|---|
| | | } from "vue"; |
|---|
| | | let list = ref([ |
|---|
| | | { |
|---|
| | | name: "çè·ç¦»æ±æå½± ( <75)", |
|---|
| | | type: "poi", |
|---|
| | | icon: "d.png", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "åæå¹³é¢æå½±", |
|---|
| | | type: "line", |
|---|
| | | icon: "x.png", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "åæå¹³é¢æå½±", |
|---|
| | | type: "cover", |
|---|
| | | icon: "m.png", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .baseMapSwitching { |
|---|
| | | width: 359px; |
|---|
| | | height: 680px; |
|---|
| | | background: rgba(7, 8, 14, 0.8); |
|---|
| | | .baseMapSwitchingTitle { |
|---|
| | | width: calc(100% - 27px); |
|---|
| | | height: 42px; |
|---|
| | | background: #0e151f; |
|---|
| | | box-shadow: 0px 0px 6px 0px #080c13, |
|---|
| | | 0px 14px 16px 0px rgba(38, 47, 71, 0.68); |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding-left: 7px; |
|---|
| | | padding-right: 20px; |
|---|
| | | color: white; |
|---|
| | | .tileLeft { |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | .titleLable { |
|---|
| | | font-size: 24px; |
|---|
| | | font-family: Source Han Sans CN; |
|---|
| | | font-weight: 400; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .titleImg { |
|---|
| | | width: 20px; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | color: rgba(104, 156, 255, 1); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .baseMapSwitching_content { |
|---|
| | | margin-top: 3px; |
|---|
| | | |
|---|
| | | .baseMapSwitching_content_title { |
|---|
| | | font-size: 20px; |
|---|
| | | font-weight: 300; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .baseMapSwitching_list_tr { |
|---|
| | | cursor: pointer; |
|---|
| | | height: 42px; |
|---|
| | | margin-top: 10px; |
|---|
| | | background: #0d131d; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 0 25px; |
|---|
| | | .baseMapSwitching_list_tr_name { |
|---|
| | | // display: flex; |
|---|
| | | // align-items: center; |
|---|
| | | // justify-content: space-between; |
|---|
| | | |
|---|
| | | span { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 300; |
|---|
| | | color: #ffffff; |
|---|
| | | margin-left: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div |
|---|
| | | v-drag |
|---|
| | | class="layerBox" |
|---|
| | | > |
|---|
| | | <div v-drag class="layerBox"> |
|---|
| | | <div class="layerTitle"> |
|---|
| | | <div class="tileLeft"> |
|---|
| | | <div class="titleImg"> |
|---|
| | | <ArrowLeft /> |
|---|
| | | </div> |
|---|
| | | <div class="titleLable"> |
|---|
| | | å¾å±ç®¡ç |
|---|
| | | </div> |
|---|
| | | <div class="titleLable">å¾å±ç®¡ç</div> |
|---|
| | | </div> |
|---|
| | | <div class="titleImg"> |
|---|
| | | <Setting /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div |
|---|
| | | class="contentBox" |
|---|
| | | v-for="(item,i) in menuOption" |
|---|
| | | > |
|---|
| | | <div class="layerContent"> |
|---|
| | | <div class="contentBox" v-for="(item, i) in menuOption" :key="i"> |
|---|
| | | <div class="contentTile"> |
|---|
| | | <div class="contentLeft"> |
|---|
| | | <div class="contentImg"></div> |
|---|
| | | <div class="contentLabel">{{ item.name }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="contentRight"> |
|---|
| | | <div class="contentCheck"><el-checkbox |
|---|
| | | <div class="contentCheck"> |
|---|
| | | <el-checkbox |
|---|
| | | @change="handlCheckAllChange(item)" |
|---|
| | | v-model="item.checkedAll" |
|---|
| | | >å
¨é¨éä¸</el-checkbox></div> |
|---|
| | | >å
¨é¨éä¸</el-checkbox |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <div |
|---|
| | | @click="handlIsShow(item,1)" |
|---|
| | | v-show="item.isShow" |
|---|
| | | @click="handlIsShow(item.name)" |
|---|
| | | class="contentUP" |
|---|
| | | :class="{ accordion: item.isShow }" |
|---|
| | | ></div> |
|---|
| | | <div |
|---|
| | | @click="handlIsShow(item,2)" |
|---|
| | | v-show="!item.isShow" |
|---|
| | | class="contentDown" |
|---|
| | | ></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="content" v-show="item.isShow"> |
|---|
| | | <div class="layer_box" v-for="(v, k) in item.children" :key="k"> |
|---|
| | | <div class="check_box"> |
|---|
| | | <el-checkbox |
|---|
| | | @change="handlCheckAllChange(item)" |
|---|
| | | v-model="v.layerState" |
|---|
| | | >{{ v.layerName }}</el-checkbox |
|---|
| | | > |
|---|
| | | <img src="../../assets/img/layer.png" alt="" /> |
|---|
| | | </div> |
|---|
| | | <div class="slider-demo-block"> |
|---|
| | | <div class="demonstration">éæ度</div> |
|---|
| | | <el-slider v-model="transparence" /> |
|---|
| | | <div class="demonstration">{{ transparence }}%</div> |
|---|
| | | </div> |
|---|
| | | <div class="selectBox"> |
|---|
| | | <div class="selectTile demonstration">æ伸æ¹å¼</div> |
|---|
| | | <el-select |
|---|
| | | v-model="stretchValue" |
|---|
| | | class="m-2" |
|---|
| | | placeholder="Select" |
|---|
| | | size="small" |
|---|
| | | > |
|---|
| | | <el-option |
|---|
| | | v-for="item in stretchOptions" |
|---|
| | | :key="item.value" |
|---|
| | | :label="item.label" |
|---|
| | | :value="item.value" |
|---|
| | | /> |
|---|
| | | </el-select> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | defineProps, |
|---|
| | | defineEmits, |
|---|
| | | } from "vue"; |
|---|
| | | const menuOption = [ |
|---|
| | | const stretchValue = ref(""); |
|---|
| | | |
|---|
| | | const stretchOptions = [ |
|---|
| | | { |
|---|
| | | value: "Option1", |
|---|
| | | label: "Option1", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option2", |
|---|
| | | label: "Option2", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option3", |
|---|
| | | label: "Option3", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option4", |
|---|
| | | label: "Option4", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: "Option5", |
|---|
| | | label: "Option5", |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | const transparence = ref(0); |
|---|
| | | let menuOption = reactive([ |
|---|
| | | { |
|---|
| | | name: "æµè¯", |
|---|
| | | isShow: true, |
|---|
| | | isShow: false, |
|---|
| | | checkedAll: false, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | layerState: false, |
|---|
| | | layerName: "å¾å±å称", |
|---|
| | | layerUrl: "", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "æµè¯1", |
|---|
| | | isShow: true, |
|---|
| | | isShow: false, |
|---|
| | | checkedAll: true, |
|---|
| | | layerState: false, |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | ]); |
|---|
| | | const activeNames = ref(false); |
|---|
| | | const handleChange = (val: string[]) => { |
|---|
| | | console.log(val); |
|---|
| | | }; |
|---|
| | | const handlCheckAllChange = (res) => {}; |
|---|
| | | const handlIsShow = (res, boolean) => {}; |
|---|
| | | const handlIsShow = (res: string) => { |
|---|
| | | menuOption.forEach((e) => { |
|---|
| | | if (e.name == res) { |
|---|
| | | e.isShow = !e.isShow; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .layerBox { |
|---|
| | | position: absolute; |
|---|
| | | top: 135px; |
|---|
| | | left: 100px; |
|---|
| | | width: 359px; |
|---|
| | | height: 680px; |
|---|
| | | background: rgba(7, 8, 14, 0.8); |
|---|
| | |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | color: rgba(104, 156, 255, 1); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .layerContent { |
|---|
| | | padding: 0 8px; |
|---|
| | | } |
|---|
| | | .contentBox { |
|---|
| | | margin-top: 3px; |
|---|
| | | .content { |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .contentTile { |
|---|
| | | width: 100%; |
|---|
| | |
|---|
| | | .contentUP { |
|---|
| | | width: 18px; |
|---|
| | | height: 11px; |
|---|
| | | background: url("../../assets/img/leftBtn/ç®å¤´-å·¦ æ·è´.png"); |
|---|
| | | background: url("../../assets/img/leftBtn/ç®å¤´-å·¦ æ·è´.png") no-repeat |
|---|
| | | center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .accordion { |
|---|
| | | transform: rotate(180deg); |
|---|
| | | } |
|---|
| | | .contentDown { |
|---|
| | | width: 18px; |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .content { |
|---|
| | | background: #1e2a3d; |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | .check_box { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding-right: 50px; |
|---|
| | | img { |
|---|
| | | width: 22px; |
|---|
| | | height: 19px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .check_box .el-checkbox { |
|---|
| | | font-size: 16px; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | .check_box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner { |
|---|
| | | background-color: rgba(13, 255, 0, 1); |
|---|
| | | border-color: rgba(41, 109, 255, 1); |
|---|
| | | } |
|---|
| | | .check_box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label { |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | .slider-demo-block { |
|---|
| | | margin-top: 22px; |
|---|
| | | } |
|---|
| | | .demonstration { |
|---|
| | | font-size: 12px; |
|---|
| | | font-weight: 300; |
|---|
| | | color: #d6e4ff; |
|---|
| | | } |
|---|
| | | /deep/ .el-slider__runway { |
|---|
| | | height: 2px; |
|---|
| | | |
|---|
| | | background: #73a1fa; |
|---|
| | | } |
|---|
| | | /deep/ .el-slider__bar { |
|---|
| | | height: 2px; |
|---|
| | | |
|---|
| | | background: #73a1fa; |
|---|
| | | } |
|---|
| | | /deep/ .el-slider__button { |
|---|
| | | width: 17px; |
|---|
| | | height: 18px; |
|---|
| | | border: 0; |
|---|
| | | background: url("../../assets/img/DBX.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | border-radius: 0; |
|---|
| | | } |
|---|
| | | .selectBox { |
|---|
| | | margin-top: 24px; |
|---|
| | | .selectTile { |
|---|
| | | padding-bottom: 6px; |
|---|
| | | } |
|---|
| | | .el-select { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </style> |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="menus"> |
|---|
| | | <div class="menus" v-show="fullScreen"> |
|---|
| | | <div class="logo_box"> |
|---|
| | | <img src="../assets/img/logo.png" alt="" class="logo" /> |
|---|
| | | <div class="logo_name"> |
|---|
| | |
|---|
| | | <div |
|---|
| | | class="imgBox" |
|---|
| | | v-for="(item, i) in menuOptions" |
|---|
| | | :key="i" |
|---|
| | | @click="setMenuClick(item)" |
|---|
| | | > |
|---|
| | | <img |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <layer-manage> </layer-manage> |
|---|
| | | <div class="content_box" v-show="fullScreen"> |
|---|
| | | <layer-manage v-show="checkMenuFlag == 'l1'"> </layer-manage> |
|---|
| | | <plotting v-show="checkMenuFlag == 'l2'"> </plotting> |
|---|
| | | <baseMapSwitching v-show="checkMenuFlag == 'l5'"> </baseMapSwitching> |
|---|
| | | <search> </search> |
|---|
| | | </div> |
|---|
| | | <top-btn v-show="fullScreen"></top-btn> |
|---|
| | | <div class="fullScreen_btn"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script lang="ts" setup> |
|---|
| | |
|---|
| | | } from "vue"; |
|---|
| | | import menuData from "@/assets/js/Map/menuData"; |
|---|
| | | import menuTool from "@/assets/js/Map/menuTool"; |
|---|
| | | //顶é¨èå |
|---|
| | | import topBtn from "@/components/topBtn.vue"; |
|---|
| | | //å¾å±ç®¡çé¡µé¢ |
|---|
| | | import layerManage from "@/views/layer/layerManage.vue"; |
|---|
| | | //å°çç¼ç æç´¢ |
|---|
| | | import search from "@/views/search/search.vue"; |
|---|
| | | //æ ç»æ¥è¯¢ |
|---|
| | | import plotting from "@/views/plotting/plotting.vue"; |
|---|
| | | //åºå¾åæ¢ |
|---|
| | | import baseMapSwitching from "@/views/baseMapSwitching/baseMapSwitching.vue"; |
|---|
| | | const menuOptions = ref([]); |
|---|
| | | const checkMenuFlag = ref(""); |
|---|
| | | let fullScreen = ref(true); |
|---|
| | | const setMenuClick = (res) => { |
|---|
| | | console.log(res); |
|---|
| | | if (res.id == "l6") { |
|---|
| | | fullScreen.value = !fullScreen.value; |
|---|
| | | } |
|---|
| | | if (checkMenuFlag.value && checkMenuFlag.value == res.id) { |
|---|
| | | checkMenuFlag.value = null; |
|---|
| | | } else { |
|---|
| | |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | margin-bottom: 52px; |
|---|
| | | cursor: pointer; |
|---|
| | | img { |
|---|
| | | width: 30px; |
|---|
| | | height: 30px; |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .content_box { |
|---|
| | | position: absolute; |
|---|
| | | top: 135px; |
|---|
| | | left: 100px; |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | .fullScreen_btn { |
|---|
| | | // background: url("../assets/img/å½¢ç¶ 3.png") no-repeat center; |
|---|
| | | // background-size: 100% 100%; |
|---|
| | | width: 30px; |
|---|
| | | height: 30px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div v-drag class="plottingBox"> |
|---|
| | | <div class="plottingTitle"> |
|---|
| | | <div class="tileLeft"> |
|---|
| | | <div class="titleImg"> |
|---|
| | | <ArrowLeft /> |
|---|
| | | </div> |
|---|
| | | <div class="titleLable">æ ç»æ¥è¯¢</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="plotting_content"> |
|---|
| | | <div class="plotting_content_btn"> |
|---|
| | | <span class="plotting_content_title">æ ç»å·¥å
·</span> |
|---|
| | | <div class="plotting_btn"> |
|---|
| | | <div class="btn_box_d btn_box"></div> |
|---|
| | | <div class="btn_box_x btn_box"></div> |
|---|
| | | <div class="btn_box_m btn_box"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="plotting_list"> |
|---|
| | | <div class="plotting_list_tr" v-for="(item, i) in list" :key="i"> |
|---|
| | | <div class="plotting_list_tr_name"> |
|---|
| | | <img |
|---|
| | | :src="require(`../../assets/img/${item.icon}`)" |
|---|
| | | class="ico" |
|---|
| | | alt="" |
|---|
| | | /><span>{{ item.name }}</span> |
|---|
| | | </div> |
|---|
| | | <div class="plotting_list_tr_btn"> |
|---|
| | | <div class="tr_btn dw"></div> |
|---|
| | | <div class="tr_btn sc"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script lang="ts" setup> |
|---|
| | | import { |
|---|
| | | ref, |
|---|
| | | onMounted, |
|---|
| | | onBeforeUnmount, |
|---|
| | | reactive, |
|---|
| | | defineProps, |
|---|
| | | defineEmits, |
|---|
| | | } from "vue"; |
|---|
| | | let list = ref([ |
|---|
| | | { |
|---|
| | | name: "Path #9", |
|---|
| | | type: "poi", |
|---|
| | | icon: "d.png", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "è·¯å¾ #1", |
|---|
| | | type: "line", |
|---|
| | | icon: "x.png", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "å¤è¾¹å½¢ #5", |
|---|
| | | type: "cover", |
|---|
| | | icon: "m.png", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .plottingBox { |
|---|
| | | width: 359px; |
|---|
| | | height: 680px; |
|---|
| | | background: rgba(7, 8, 14, 0.8); |
|---|
| | | .plottingTitle { |
|---|
| | | width: calc(100% - 27px); |
|---|
| | | height: 42px; |
|---|
| | | background: #0e151f; |
|---|
| | | box-shadow: 0px 0px 6px 0px #080c13, |
|---|
| | | 0px 14px 16px 0px rgba(38, 47, 71, 0.68); |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding-left: 7px; |
|---|
| | | padding-right: 20px; |
|---|
| | | color: white; |
|---|
| | | .tileLeft { |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | .titleLable { |
|---|
| | | font-size: 24px; |
|---|
| | | font-family: Source Han Sans CN; |
|---|
| | | font-weight: 400; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .titleImg { |
|---|
| | | width: 20px; |
|---|
| | | height: 100%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | color: rgba(104, 156, 255, 1); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .plotting_content { |
|---|
| | | margin-top: 3px; |
|---|
| | | |
|---|
| | | .plotting_content_title { |
|---|
| | | font-size: 20px; |
|---|
| | | font-weight: 300; |
|---|
| | | color: #ffffff; |
|---|
| | | } |
|---|
| | | .plotting_content_btn { |
|---|
| | | height: 42px; |
|---|
| | | background: #0d131d; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding: 0 25px; |
|---|
| | | .plotting_btn { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | .btn_box { |
|---|
| | | cursor: pointer; |
|---|
| | | margin-right: 18px; |
|---|
| | | } |
|---|
| | | .btn_box_d { |
|---|
| | | width: 17px; |
|---|
| | | height: 18px; |
|---|
| | | background: url("../../assets/img/d.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | .btn_box_d:hover { |
|---|
| | | background: url("../../assets/img/dl.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | .btn_box_x { |
|---|
| | | width: 26px; |
|---|
| | | height: 27px; |
|---|
| | | background: url("../../assets/img/x.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | .btn_box_x:hover { |
|---|
| | | background: url("../../assets/img/xl.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | .btn_box_m { |
|---|
| | | width: 22px; |
|---|
| | | height: 20px; |
|---|
| | | background: url("../../assets/img/m.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | margin-right: 0; |
|---|
| | | } |
|---|
| | | .btn_box_m:hover { |
|---|
| | | background: url("../../assets/img/ml.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .plotting_list_tr { |
|---|
| | | height: 42px; |
|---|
| | | margin-top: 10px; |
|---|
| | | background: #0d131d; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | padding: 0 25px; |
|---|
| | | .plotting_list_tr_name { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | .ico { |
|---|
| | | width: 26px; |
|---|
| | | height: 27px; |
|---|
| | | } |
|---|
| | | span { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 300; |
|---|
| | | color: #ffffff; |
|---|
| | | margin-left: 10px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .plotting_list_tr_btn { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | .tr_btn { |
|---|
| | | width: 16px; |
|---|
| | | height: 15px; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .dw { |
|---|
| | | background: url("../../assets/img/dw.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | margin-right: 18px; |
|---|
| | | } |
|---|
| | | .sc { |
|---|
| | | background: url("../../assets/img/sc.png") no-repeat center; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <template> |
|---|
| | | <div class="searchBox"> |
|---|
| | | <div> |
|---|
| | | <el-input |
|---|
| | | v-model="searchValue" |
|---|
| | | class="searchInput" |
|---|
| | | placeholder="请è¾å
¥å°å" |
|---|
| | | :prefix-icon="Search" |
|---|
| | | :clearable="true" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | <div class="search_content"> |
|---|
| | | <el-collapse v-model="activeNames" @change="handleChange"> |
|---|
| | | <el-collapse-item title="æ¥è¯¢ç»æ" name="1"> |
|---|
| | | <div class="search_content_text">æ»æ¥è¯¢ç»æ:448</div> |
|---|
| | | <div class="search_content_text paging"> |
|---|
| | | æ»é¡µæ°ï¼45 |
|---|
| | | <el-button size="small" text :icon="DArrowLeft" class="pagingBtn" /> |
|---|
| | | <el-button size="small" text :icon="ArrowLeft" class="pagingBtn1" /> |
|---|
| | | <el-input class="numInput" v-model="num" /> |
|---|
| | | <el-button |
|---|
| | | size="small" |
|---|
| | | text |
|---|
| | | :icon="ArrowRight" |
|---|
| | | class="pagingBtn1" |
|---|
| | | /> |
|---|
| | | <el-button |
|---|
| | | size="small" |
|---|
| | | text |
|---|
| | | :icon="DArrowRight" |
|---|
| | | class="pagingBtn" |
|---|
| | | /> |
|---|
| | | </div> |
|---|
| | | <div class="table_box"> |
|---|
| | | <div class="table_header"> |
|---|
| | | <div class="table_th_x">åºå·</div> |
|---|
| | | <div class="table_th">å°å</div> |
|---|
| | | </div> |
|---|
| | | <div class="table_childer"> |
|---|
| | | <div class="table_tr"> |
|---|
| | | <div class="table_th_x"></div> |
|---|
| | | <div class="table_th"></div> |
|---|
| | | </div> |
|---|
| | | <div class="table_tr"> |
|---|
| | | <div class="table_th_x"></div> |
|---|
| | | <div class="table_th"></div> |
|---|
| | | </div> |
|---|
| | | <div class="table_tr"> |
|---|
| | | <div class="table_th_x"></div> |
|---|
| | | <div class="table_th"></div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-collapse-item> |
|---|
| | | </el-collapse> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script lang="ts" setup> |
|---|
| | | import { |
|---|
| | | ref, |
|---|
| | | onMounted, |
|---|
| | | onBeforeUnmount, |
|---|
| | | reactive, |
|---|
| | | defineProps, |
|---|
| | | defineEmits, |
|---|
| | | } from "vue"; |
|---|
| | | import { |
|---|
| | | Search, |
|---|
| | | DArrowLeft, |
|---|
| | | ArrowLeft, |
|---|
| | | ArrowRight, |
|---|
| | | DArrowRight, |
|---|
| | | } from "@element-plus/icons-vue"; |
|---|
| | | |
|---|
| | | let searchValue = ref(""); |
|---|
| | | |
|---|
| | | const activeNames = ref(["1"]); |
|---|
| | | const num = ref(1); |
|---|
| | | const NumhandleChange = (value: number) => { |
|---|
| | | console.log(value); |
|---|
| | | }; |
|---|
| | | const handleChange = (val: string[]) => { |
|---|
| | | console.log(val); |
|---|
| | | }; |
|---|
| | | const tableData = reactive([ |
|---|
| | | { |
|---|
| | | date: "1", |
|---|
| | | name: "Tom", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | date: "2", |
|---|
| | | name: "Tom", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | date: "3", |
|---|
| | | name: "Tom", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | date: "4", |
|---|
| | | name: "Tom", |
|---|
| | | }, |
|---|
| | | ]); |
|---|
| | | onMounted(() => {}); |
|---|
| | | </script> |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .searchBox { |
|---|
| | | margin-left: 34px; |
|---|
| | | } |
|---|
| | | .searchInput { |
|---|
| | | width: 222px; |
|---|
| | | height: 35px; |
|---|
| | | } |
|---|
| | | .search_content { |
|---|
| | | margin-top: 8px; |
|---|
| | | width: 222px; |
|---|
| | | // background: rgba(7, 8, 14, 0.8); |
|---|
| | | border-radius: 4px; |
|---|
| | | .el-collapse, |
|---|
| | | /deep/ .el-collapse-item__wrap { |
|---|
| | | border: 0; |
|---|
| | | background-color: transparent; |
|---|
| | | } |
|---|
| | | /deep/ .el-collapse-item__header { |
|---|
| | | border-radius: 4px 4px 0px 0px; |
|---|
| | | height: 35px; |
|---|
| | | background: #0e151f; |
|---|
| | | box-shadow: 0px 0px 6px 0px #080c13, |
|---|
| | | 0px 14px 16px 0px rgba(38, 47, 71, 0.68); |
|---|
| | | padding: 10px 20px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | color: #d6e4ff; |
|---|
| | | border: 0; |
|---|
| | | } |
|---|
| | | /deep/ .el-collapse-item__content { |
|---|
| | | background: rgba(7, 8, 14, 0.8); |
|---|
| | | padding: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search_content_text { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #d6e4ff; |
|---|
| | | } |
|---|
| | | .numInput { |
|---|
| | | width: 49px; |
|---|
| | | height: 23px; |
|---|
| | | padding: 0 5px; |
|---|
| | | } |
|---|
| | | .paging { |
|---|
| | | margin-top: 14px; |
|---|
| | | } |
|---|
| | | .pagingBtn { |
|---|
| | | width: 15px; |
|---|
| | | height: 12px; |
|---|
| | | margin: 0; |
|---|
| | | font-size: 16px; |
|---|
| | | color: RGBA(186, 199, 223, 1); |
|---|
| | | } |
|---|
| | | .pagingBtn1 { |
|---|
| | | width: 8px; |
|---|
| | | height: 12px; |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | font-size: 16px; |
|---|
| | | color: RGBA(186, 199, 223, 1); |
|---|
| | | } |
|---|
| | | .pagingBtn:hover, |
|---|
| | | .pagingBtn1:hover { |
|---|
| | | background: transparent; |
|---|
| | | } |
|---|
| | | .pagingBtn1.is-text:not(.is-disabled):focus, |
|---|
| | | .pagingBtn1.is-text:not(.is-disabled):hover, |
|---|
| | | .pagingBtn.is-text:not(.is-disabled):focus, |
|---|
| | | .pagingBtn.is-text:not(.is-disabled):hover { |
|---|
| | | background: transparent; |
|---|
| | | } |
|---|
| | | .table_box { |
|---|
| | | margin-top: 17px; |
|---|
| | | border-radius: 4px; |
|---|
| | | border: 1px solid #d6e4ff; |
|---|
| | | .table_header { |
|---|
| | | height: 27px; |
|---|
| | | background: #0e151f; |
|---|
| | | box-shadow: 0px 0px 6px 0px #080c13, |
|---|
| | | 0px 14px 16px 0px rgba(38, 47, 71, 0.68); |
|---|
| | | display: flex; |
|---|
| | | } |
|---|
| | | .table_th_x { |
|---|
| | | width: 50px; |
|---|
| | | border-right: 1px solid rgba(214, 228, 255, 0.4); |
|---|
| | | font-size: 14px; |
|---|
| | | |
|---|
| | | color: #d6e4ff; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | padding-left: 10px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | .table_th { |
|---|
| | | font-size: 14px; |
|---|
| | | color: #d6e4ff; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | padding-left: 10px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .table_tr { |
|---|
| | | height: 27px; |
|---|
| | | display: flex; |
|---|
| | | background: #000000; |
|---|
| | | } |
|---|
| | | .table_tr:nth-child(2n) { |
|---|
| | | background: #0e151f; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
