diff --git a/src/App.vue b/src/App.vue index bc3c1ba..a08f035 100644 --- a/src/App.vue +++ b/src/App.vue @@ -26,12 +26,12 @@ export default { methods: {}, created() {}, mounted() { - autofit.init({ - designHeight: window.innerHeight, - designWidth: 6656, - renderDom: "#app", - resize: true, - }); + // autofit.init({ + // designHeight: window.innerHeight, + // designWidth: 6656, + // renderDom: "#app", + // resize: true, + // }); }, }; diff --git a/src/assets/styles/ItemIndex.scss b/src/assets/styles/ItemIndex.scss index 1f2fdc8..3330a6b 100644 --- a/src/assets/styles/ItemIndex.scss +++ b/src/assets/styles/ItemIndex.scss @@ -85,6 +85,25 @@ } } +.albuginea { + cursor: pointer; + position: absolute; + + z-index: 110; + + text-align: center; + + background: #032b57; + border-radius: 2px; + border: 1px solid #0084ff; + font-weight: 400; + + color: #ffffff; +} +.albuginea:hover { + background: #0084ff; +} + @media screen and (max-width: 1920px) { .mars-four-color { top: -50px; @@ -131,6 +150,14 @@ margin-right: 10px; } } + .albuginea { + top: 103px; + left: 570px; + width: 80px; + height: 32px; + line-height: 32px; + font-size: 14px; + } } @media screen and (min-width: 2500px) { .mars-four-color { @@ -138,44 +165,85 @@ left: -75px; } .four-color_name { - width: 150px; + width: 160px; height: 155px; - font-size: 24px; + font-size: 28px; line-height: 55px; } .screen-list { - width: 330px; - right: -340px; + width: 400px; + right: -405px; .lable-value { - height: 65px; + height: 70px; width: 100%; margin-bottom: 10px; padding: 0 12px; .lable-data, span { - font-size: 24px; + display: inline-block; + font-size: 25px; } .value-data { - font-size: 44px; + font-size: 35px; } } } .multiple { width: 1800px; - height: 178px; + height: 170px; padding: 0 360px; .checkbox { width: 228px; height: 64.8px; line-height: 64.8px; - font-size: 23px; + font-size: 26px; border-radius: 32px; } .btn-icon { - width: 29.47px; - height: 31.2px; - margin-right: 22px; + width: 30px; + height: 30px; + margin-right: 10px; + } + } + .albuginea { + top: unset; + bottom: 70px; + left: 2120px; + width: 150px; + height: 60px; + line-height: 60px; + font-size: 24px; + } + .input-search { + top: 238px !important; + .search-box { + height: 60px !important; + } + .search-btn { + font-size: 20px !important; + line-height: 60px !important; + padding: 0 20px !important; + } + input { + width: 440px !important; + font-size: 23px !important; + padding-left: 12px !important; + } + .icon-close { + font-size: 20px !important; + left: 410px !important; + } + .search-list { + width: 440px !important; + min-height: 300px !important; + & > div { + font-size: 23px !important; + padding: 20px !important; + } + .no-data { + font-size: 20px !important; + } } } } diff --git a/src/assets/styles/map.scss b/src/assets/styles/map.scss index e66d215..935bc4f 100644 --- a/src/assets/styles/map.scss +++ b/src/assets/styles/map.scss @@ -53,8 +53,9 @@ .video-dialog { background-color: transparent; - width: 750px; - height: 482px; + // width: 750px; + width: 25%; + height: 50%; .el-dialog__header { padding: 0; } @@ -134,7 +135,7 @@ justify-content: center; } .diy-popup-container { - height: 80%; + height: 79%; width: 100%; overflow-y: auto; } @@ -170,6 +171,37 @@ } } } + @media (min-width: 2500px) { + .diy-popup { + width: 500px; + height: 800px; + } + .popup-title { + font-size: 28px !important; + } + .sub-title { + width: 160px; + height: 60px; + text-align: center; + line-height: 60px; + + margin: 10px auto; + font-size: 22px; + color: #fff; + } + .popup-item { + font-size: 25px !important; + } + .sub-title { + width: 240px !important; + height: 40px !important; + + line-height: 40px !important; + + margin: 20px auto !important; + font-size: 28px !important; + } + } } .mars3d-popup-content { overflow-y: visible; @@ -187,7 +219,6 @@ text-align: left; border-radius: 0; } - .carPlate { position: relative; background: #00162d; @@ -209,6 +240,18 @@ width: 25px; } } + @media screen and (min-width: 2500px) { + .carPlate { + font-size: 20px !important; + max-width: 300px !important; + padding: 6px 18px !important; + padding-left: 45px !important; + .carType { + height: 100% !important; + width: 35px !important; + } + } + } } .q-icon { position: relative; diff --git a/src/components/grids.vue b/src/components/grids.vue index a5a86ca..b97164c 100644 --- a/src/components/grids.vue +++ b/src/components/grids.vue @@ -349,7 +349,7 @@ export default { } .items-wrapper { - width: 800px; + min-width: 700px; display: flex; overflow: hidden; scroll-behavior: smooth; /* 可以平滑滚动 */ @@ -359,6 +359,7 @@ export default { position: relative; // flex: 0 0 calc(100% / 6); /* 每行显示5个格子 */ flex: 1; + width: 140px; height: 140px; margin-right: 10px; .video-src { @@ -467,4 +468,67 @@ export default { margin-left: 13px; } } + +@media (min-width: 2500px) { + .video-title { + margin-bottom: 8px; + } + .main-title, + .title-btn { + font-size: 28px !important; + } + .title-btn { + padding: 6px 12px !important; + border-radius: 30px !important; + img { + height: 40px !important; + width: 40px !important; + margin-right: 8px !important; + } + } + .items-wrapper { + // width: 1800px !important; + } + .item { + width: 280px; + height: 280px; + margin-right: 20px; + } + .video-bg { + font-size: 26px !important; + line-height: 216px !important; + } + .video-data { + height: 64px !important; + padding: 0 20px !important; + } + .video-name { + font-size: 28px !important; + } + .video-icon { + height: 28px !important; + width: 28px !important; + } + .video-dialog-top { + height: 80px; + padding: 0 20px; + .video-name-data { + font-size: 36px; + } + .dialog-close { + font-size: 36px; + + img { + margin-right: 12px; + + height: 28px; + width: 28px; + } + } + } + #videoBig, + .dialog-videoNodata { + height: calc(100% - 80px); + } +} diff --git a/src/views/car.vue b/src/views/car.vue index 59f5dad..8b961ef 100644 --- a/src/views/car.vue +++ b/src/views/car.vue @@ -47,8 +47,6 @@ {{ item }} - - @@ -56,7 +54,7 @@ import MarsMap from "@/components/mars-map"; import { getfindByPlateNums } from "@/api/yunkun/index.js"; import { getCarPoint, getCarByCarplate } from "@/api/yunkun/yunkun.js"; - +import mapOption from "./mapOption.js"; export default { data() { const basePathUrl = window.basePathUrl || ""; @@ -81,56 +79,7 @@ export default { carUrl: basePathUrl + "static/qiche.gltf", map: null, mapLayer: {}, - options: { - scene: { - center: { - lat: 31.019462, - lng: 120.635502, - alt: 13761.4, - heading: 357.9, - pitch: -31.5, - }, - fog: false, - fxaa: false, - removeDblClick: true, - requestRenderMode: false, - scene3DOnly: false, - sceneMode: 3, - shadows: false, - showMoon: false, - showSkyAtmosphere: false, - showSkyBox: false, - showSun: false, - }, - control: { - contextmenu: { preventDefault: false, hasDefault: false }, - }, - terrain: { - show: false, - }, - basemaps: [ - { - name: "影像地图", - type: "xyz", - url: process.env.VUE_APP_BASE_API2 + "/{z}/{y}/{x}.png", - minimumLevel: 1, - maximumLevel: 16, - show: true, - }, - // { - // name: "mapbox影像图", - // icon: "img/basemaps/mapboxSatellite.png", - // type: "mapbox", - // username: "sharealex", - // styleId: "cly5i21fn00e901prgq643t4r", - // token: - // "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw", - // tilesize: 256, - // scaleFactor: false, - // show: true, - // }, - ], - }, + options: mapOption, baimoUrl: process.env.VUE_APP_BASE_API3 + "/yunkun/tileset.json", show: false, showVideo: true, @@ -241,6 +190,15 @@ export default { /**地图渲染完毕 */ mapLoad(map) { this.map = map; + map.setSceneOptions({ + center: { + lat: 31.019462, + lng: 120.635502, + alt: 13761.4, + heading: 357.9, + pitch: -31.5, + }, + }); map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。 // 创建矢量图层 this.mapLayer.car = new mars3d.layer.GraphicLayer(); @@ -263,15 +221,11 @@ export default { //只显示有任务的车辆 const graphic = new mars3d.graphic.ModelEntity({ id: `car${item.carId}`, - // position: new mars3d.LngLatPoint( - // parseFloat(item.lng), - // parseFloat(item.lat), - // 30 - // ), + style: { url: this.carUrl, - scale: 0.5, - minimumPixelSize: 32, + scale: window.innerWidth > 2500 ? 1 : 0.5, + minimumPixelSize: window.innerWidth > 2500 ? 65 : 32, silhouette: true, silhouetteColor: "#008cff", pitch: 0, //俯仰角 @@ -579,26 +533,7 @@ export default { diff --git a/src/views/carInfo.vue b/src/views/carInfo.vue index ae9c684..3d2652e 100644 --- a/src/views/carInfo.vue +++ b/src/views/carInfo.vue @@ -28,6 +28,7 @@ import MarsMap from "@/components/mars-map"; import grids from "@/components/grids.vue"; import { getCarIdInfo } from "@/api/yunkun/index.js"; import { historyLine, getCarPoint, carMidle } from "@/api/yunkun/yunkun.js"; +import mapOption from "./mapOption.js"; export default { data() { const basePathUrl = window.basePathUrl || ""; @@ -44,43 +45,8 @@ export default { map: null, mapLayer: {}, show3D: false, - options: { - scene: { - center: { - lat: 31.184348, - lng: 120.625126, - alt: 6764.6, - heading: 357.9, - pitch: -31.5, - }, - }, - control: { - contextmenu: { preventDefault: false, hasDefault: false }, - }, - terrain: { show: false }, - basemaps: [ - { - name: "影像地图", - type: "xyz", - url: process.env.VUE_APP_BASE_API2 + "/{z}/{y}/{x}.png", - minimumLevel: 1, - maximumLevel: 16, - show: true, - }, - // { - // name: "mapbox影像图", - // icon: "img/basemaps/mapboxSatellite.png", - // type: "mapbox", - // username: "sharealex", - // styleId: "cly5i21fn00e901prgq643t4r", - // token: - // "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw", - // tilesize: 256, - // scaleFactor: false, - // show: false, - // }, - ], - }, + options: mapOption, + Line: [], carUrl: basePathUrl + "static/qiche.gltf", baimoUrl: process.env.VUE_APP_BASE_API3 + "/yunkun/tileset.json", @@ -120,7 +86,16 @@ export default { }, /**地图渲染完毕 */ mapLoad(map) { - map.set; + map.setSceneOptions({ + center: { + lat: 31.184348, + lng: 120.625126, + alt: 6764.6, + heading: 357.9, + pitch: -31.5, + }, + }); + this.map = map; map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。 // 创建矢量图层 @@ -172,7 +147,7 @@ export default { position: this.Line[0], style: { image: require("../assets/images/origin.png"), - scale: 1, + scale: window.innerWidth > 2500 ? 1.5 : 1, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, clampToGround: true, @@ -220,8 +195,8 @@ export default { model: { show: true, url: this.carUrl, - scale: 0.5, - minimumPixelSize: 32, + scale: window.innerWidth > 2500 ? 1 : 0.5, + minimumPixelSize: window.innerWidth > 2500 ? 65 : 32, silhouette: true, silhouetteColor: "#FFB200", pitch: 0, @@ -256,11 +231,11 @@ export default { const interval = 10; this.changePosition(interval); - // if (process.env.NODE_ENV === "production") { - this.timer = setInterval(() => { - this.changePosition(interval); - }, interval * 1000); - // } + if (process.env.NODE_ENV === "production") { + this.timer = setInterval(() => { + this.changePosition(interval); + }, interval * 1000); + } }, async changePosition(interval) { let list = await this.carPoint(); @@ -338,7 +313,7 @@ export default { fixedRoute.bindPopup(html, { className: "carPopup", - offsetX: 280, + offsetX: window.innerWidth > 2500 ? 400 : 280, offsetY: 200, // closeButton: false, }); @@ -436,7 +411,7 @@ export default { display: block; font-size: 40px; color: #ffffff; - line-height: 51px; + // line-height: 51px; letter-spacing: 1px; text-align: center; font-style: normal; @@ -455,6 +430,7 @@ export default { position: absolute; bottom: 40px; left: 50%; + // width: 880px; transform: translateX(-50%); z-index: 100; padding: 10px; @@ -465,7 +441,7 @@ export default { background: rgba(28, 31, 34, 0.6); } -@media (min-width: 2001px) { +@media (min-width: 2500px) { .albuginea { top: unset; bottom: 70px; @@ -482,6 +458,16 @@ export default { } .container-top { top: 238px; + + & > div { + width: 340px !important; + img { + height: 80px !important; + } + span { + font-size: 80px !important; + } + } } } diff --git a/src/views/index.vue b/src/views/index.vue index fbd66f3..bc5cd67 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -54,17 +54,17 @@ export default { const screenWidth = window.innerWidth; if (screenWidth > 3000) { this.options.scene.center = { - lat: 28.990656, - lng: 119.98416, - alt: 238186.6, + lat: 28.799947, + lng: 119.944022, + alt: 259997, heading: 9.5, pitch: -46.2, }; } else { this.options.scene.center = { - lat: 29.689932, - lng: 120.127589, - alt: 146960.4, + lat: 29.765558, + lng: 120.153263, + alt: 146984.6, heading: 9.5, pitch: -46.2, }; diff --git a/src/views/mapOption.js b/src/views/mapOption.js index 7d751e1..327c67f 100644 --- a/src/views/mapOption.js +++ b/src/views/mapOption.js @@ -3,6 +3,17 @@ const mapOption = { resolutionScale: 0.5, scene3DOnly: true, requestRenderMode: true, + fog: false, + fxaa: false, + removeDblClick: true, + requestRenderMode: false, + scene3DOnly: false, + sceneMode: 3, + shadows: false, + showMoon: false, + showSkyAtmosphere: false, + showSkyBox: false, + showSun: false, }, control: { // contextmenu: { preventDefault: false, hasDefault: false },