diff --git a/public/bigScreen/go_left.png b/public/bigScreen/go_left.png new file mode 100644 index 0000000..8df5c35 Binary files /dev/null and b/public/bigScreen/go_left.png differ diff --git a/public/bigScreen/go_left_button.png b/public/bigScreen/go_left_button.png new file mode 100644 index 0000000..29920fc Binary files /dev/null and b/public/bigScreen/go_left_button.png differ diff --git a/public/bigScreen/go_right.png b/public/bigScreen/go_right.png new file mode 100644 index 0000000..1dac4b2 Binary files /dev/null and b/public/bigScreen/go_right.png differ diff --git a/public/bigScreen/go_right_button.png b/public/bigScreen/go_right_button.png new file mode 100644 index 0000000..3d3e2a1 Binary files /dev/null and b/public/bigScreen/go_right_button.png differ diff --git a/src/views/bigScreen/SearchComponent/index.vue b/src/views/bigScreen/SearchComponent/index.vue index 52b9983..73db8de 100644 --- a/src/views/bigScreen/SearchComponent/index.vue +++ b/src/views/bigScreen/SearchComponent/index.vue @@ -1,22 +1,80 @@ @@ -29,6 +87,7 @@ export default { height: 36px; display: flex; z-index: 1; + transition: 0.5s; .search-input-div{ width: 309px; height: 36px; @@ -41,7 +100,7 @@ export default { background: none; border: 0px; height: 36px; - line-height: 36px; + line-height: 13px; font-family: Microsoft YaHei; font-weight: 400; font-size: 13px; @@ -65,5 +124,52 @@ export default { transform: translate(-3px); } } + .result-div{ + position: absolute; + top: 40px; + width: 283px; + // height: 200px; + background-color: #014B4D; + border: 1px solid #038E90; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + .result-item { + width: 100%; + height: 38px; + color: #e1ecf8; + display: flex; + line-height: 38px; + padding: 0px 12px; + font-size: 14px; + .search-icon { + width: 28px; + height: 36px; + } + .level-0 { + max-width: 160px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .level-1 { + margin: 0px 6px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .level-2 { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + &:hover { + cursor: pointer; + background: #038E90; + } + } + } +} +.hidden-search-div{ + left: 136px; } diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue index 124c054..d050eb2 100644 --- a/src/views/bigScreen/index.vue +++ b/src/views/bigScreen/index.vue @@ -11,18 +11,24 @@
-
+
+
+
+
-
+
+
+
+
- +
@@ -58,7 +64,9 @@ export default { picture:'', detailed_address: '', start_time: '', - } + }, + leftHidden: false, + rightHidden: false, }; }, methods: { @@ -75,7 +83,16 @@ export default { this.forewarningInfo.detailed_address = item.detailed_address this.forewarningInfo.start_time = item.start_time this.showForewarningModal = true + this.cameraFly(item.longitude,item.latitude) }, + cameraFly(lng,lat){ + window.globalmap.flyToPoint({ + lat: lat, + lng: lng, + alt: 1000, + duration: 3, + }) + } }, mounted() { @@ -176,6 +193,42 @@ export default { left: 30px; width: 425px; z-index: 1; + opacity: 1; + transition: 0.5s; + .show-hidden-div{ + position: absolute; + height: 822px; + width: 25px; + background-size: 100% 100%; + right: -25px; + .show-hidden-button{ + width: 35px; + height: 54px; + background-size: 100% 100%; + position: absolute; + top: 405px; + cursor: pointer; + } + .show-button{ + background-image: url('/bigScreen/go_left_button.png'); + left: 9px; + } + .hidden-button{ + background-image: url('/bigScreen/go_right_button.png'); + right: 9px; + } + } + .show-div{ + background-image: url('/bigScreen/go_left.png'); + } + .hidden-div{ + background-image: url('/bigScreen/go_right.png'); + right: -65px; + } + } + .hidden-left{ + left: -428px; + opacity: 1; } .right-content{ width: 425px; @@ -186,6 +239,42 @@ export default { background-image: url('/bigScreen/right_backgorund.png'); background-size: 100% 100%; z-index: 1; + opacity: 1; + transition: 0.5s; + .show-hidden-div{ + position: absolute; + height: 853px; + width: 25px; + background-size: 100% 100%; + left: -25px; + .show-hidden-button{ + width: 35px; + height: 54px; + background-size: 100% 100%; + position: absolute; + top: 421px; + cursor: pointer; + } + .show-button{ + background-image: url('/bigScreen/go_right_button.png'); + right: 9px; + } + .hidden-button{ + background-image: url('/bigScreen/go_left_button.png'); + left: 9px; + } + } + .show-div{ + background-image: url('/bigScreen/go_right.png'); + } + .hidden-div{ + background-image: url('/bigScreen/go_left.png'); + left: -65px; + } + } + .hidden-right{ + right: -429px; + opacity: 1; } } diff --git a/src/views/bigScreen/util.ts b/src/views/bigScreen/util.ts new file mode 100644 index 0000000..ffd9b24 --- /dev/null +++ b/src/views/bigScreen/util.ts @@ -0,0 +1,40 @@ +// 火星坐标系GCJ02转地球坐标系WGS84 +var PI = 3.14159265358979324; +export function transformGCJ2WGS(gcjLat, gcjLon) { + let d = delta(gcjLat, gcjLon) + return { + 'lat': gcjLat - d.lat, + 'lon': gcjLon - d.lon + } +} + +function delta(lat, lon) { + let a = 6378245.0 // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。 + let ee = 0.00669342162296594323 // ee: 椭球的偏心率。 + let dLat = transformLat(lon - 105.0, lat - 35.0) + let dLon = transformLon(lon - 105.0, lat - 35.0) + let radLat = lat / 180.0 * PI + let magic = Math.sin(radLat) + magic = 1 - ee * magic * magic + let sqrtMagic = Math.sqrt(magic) + dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI) + dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI) + return { + 'lat': dLat, + 'lon': dLon + } +} +function transformLat(x, y) { + let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x)) + ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0 + ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0 + ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0 + return ret +} +function transformLon(x, y) { + let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)) + ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0 + ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0 + ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0 + return ret +} \ No newline at end of file