diff --git a/src/views/goverment/largeScreen/components/equipmentAdd.vue b/src/views/goverment/largeScreen/components/equipmentAdd.vue index 54ac5eb..4338196 100644 --- a/src/views/goverment/largeScreen/components/equipmentAdd.vue +++ b/src/views/goverment/largeScreen/components/equipmentAdd.vue @@ -100,10 +100,10 @@ {{ row.name }} - + @@ -248,6 +248,7 @@ const saveEdit = async (row: any) => { let requestData = { name: row.name, url: row.url, + code: row.code, monitorId: row.monitorId, category: props.equipTypeDictLabel }; @@ -313,7 +314,7 @@ const newPoint = () => { id: "point-tip", type: "point", style: { - visibleDepth: false // 是否被遮挡 + // visibleDepth: false // 是否被遮挡 } }); }; @@ -451,7 +452,7 @@ onMounted(async () => { console.log(map, "66666"); console.log(QueryPopup, "777888"); map.scene.globe.depthTestAgainstTerrain = false; // 不加无法投射到地形上 - map.onlyPickModelPosition = true; // 是否仅在模型上标绘 + // map.onlyPickModelPosition = true; // 是否仅在模型上标绘 graphicLayer = new mars3d.layer.GraphicLayer(); map.addLayer(graphicLayer); graphicLayer.on(mars3d.EventType.drawCreated, function (e) { diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue index e893997..4c04177 100644 --- a/src/views/goverment/largeScreen/index.vue +++ b/src/views/goverment/largeScreen/index.vue @@ -573,14 +573,20 @@ const getEquipmentList = async (id: any) => { if (res.result && res.result.length > 0) { let arr: any = res.result; arr.map(async (item: any) => { + const img = new URL("@/assets/images/Mars3DImg/icon/camera.svg", import.meta.url).href; const graphicImg = new mars3d.graphic.DivGraphic({ id: item.monitorId, position: [+item.lng, +item.lat, +item.alt], style: { - html: () => { - const dom = initVue3Popup(resPointStyle?.codeValue, { data: { name: item.name } }); - return dom; - }, + // html: () => { + // const dom = initVue3Popup(resPointStyle?.codeValue, { data: { name: item.name } }); + // return dom; + // }, + html: `
+ +
+
+
`, offsetX: +resPointStyle?.offsetX, offsetY: +resPointStyle?.offsetY, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000) @@ -588,11 +594,13 @@ const getEquipmentList = async (id: any) => { }); graphicLayer.addGraphic(graphicImg); let urlData: any = ""; - if (item.url) { + console.log(22222, item.url) + if (item.code) { urlData = await equipmentUrlGet({ monitorId: item.monitorId }); graphicImg.bindPopup( (event: any) => { const attr = event.graphic.attr || {}; + console.log(11111111111, urlData) if (!attr) { return; } @@ -2378,131 +2386,131 @@ onUnmounted(() => { // 视频监控点位样式 :deep() { - // .mars3d-camera-content { - // width: 100px; - // height: 30px; - // display: flex; - // align-items: center; - // justify-content: center; - // } - // .mars3d-camera-img { - // width: 30px; - // height: 30px; - // // animation: cameraMove 1s linear infinite alternate; - // // -webkit-animation: cameraMove 1s linear infinite alternate; - // } - // .mars3d-camera-text { - // color: white; - // font-size: 20px; - // } - // @keyframes cameraMove { - // from { - // margin-top: 20px; - // } - // to { - // margin-top: 0px; - // } - // } - // @-webkit-keyframes cameraMove { - // from { - // margin-top: 20px; - // } - // to { - // margin-top: 0px; - // } - // } - // .mars3d-camera-line { - // height: 120px; - // width: 5px; - // margin-top: 10px; - // // border-left: 3px dashed #5b8fee; - // margin-left: calc(50% - 1px); - // } - // .mars3d-camera-point { - // border-radius: 50%; - // width: 8px; - // height: 8px; - // margin-left: calc(50% - 3px); - // // background-color: #5b8fee; - // } - // .animation-spaceInDown { - // animation-duration: 1s; - // animation-fill-mode: both; - // animation-name: spaceInDown; - // } - // @keyframes spaceInDown { - // 0% { - // opacity: 0; - // transform-origin: 0% 100%; - // transform: scale(0.2) translate(0, 200%); - // } - // 100% { - // opacity: 1; - // transform-origin: 0% 100%; - // transform: scale(1) translate(0, 0); - // } - // } - // .marsBlackPanel { - // min-width: 90px; - // min-height: 35px; - // position: absolute; - // left: 16px; - // bottom: 31px; - // cursor: default; - // border-radius: 4px; - // opacity: 0.96; - // border: 1px solid #14171c; - // box-shadow: 0px 2px 21px 0px rgba(33, 34, 39, 0.55); - // border-radius: 4px; - // box-sizing: border-box; - // background: linear-gradient(0deg, #1e202a 0%, #0d1013 100%); - // } + .mars3d-camera-content { + width: 100px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + } + .mars3d-camera-img { + width: 30px; + height: 30px; + animation: cameraMove 1s linear infinite alternate; + -webkit-animation: cameraMove 1s linear infinite alternate; + } + .mars3d-camera-text { + color: white; + font-size: 20px; + } + @keyframes cameraMove { + from { + margin-top: 20px; + } + to { + margin-top: 0px; + } + } + @-webkit-keyframes cameraMove { + from { + margin-top: 20px; + } + to { + margin-top: 0px; + } + } + .mars3d-camera-line { + height: 120px; + width: 5px; + margin-top: 10px; + border-left: 3px dashed #5b8fee; + margin-left: calc(50% - 1px); + } + .mars3d-camera-point { + border-radius: 50%; + width: 8px; + height: 8px; + margin-left: calc(50% - 3px); + background-color: #5b8fee; + } + .animation-spaceInDown { + animation-duration: 1s; + animation-fill-mode: both; + animation-name: spaceInDown; + } + @keyframes spaceInDown { + 0% { + opacity: 0; + transform-origin: 0% 100%; + transform: scale(0.2) translate(0, 200%); + } + 100% { + opacity: 1; + transform-origin: 0% 100%; + transform: scale(1) translate(0, 0); + } + } + .marsBlackPanel { + min-width: 90px; + min-height: 35px; + position: absolute; + left: 16px; + bottom: 31px; + cursor: default; + border-radius: 4px; + opacity: 0.96; + border: 1px solid #14171c; + box-shadow: 0px 2px 21px 0px rgba(33, 34, 39, 0.55); + border-radius: 4px; + box-sizing: border-box; + background: linear-gradient(0deg, #1e202a 0%, #0d1013 100%); + } - // .marsBlackPanel::before { - // content: ""; - // width: calc(100% + 22px); - // height: 39px; - // position: absolute; - // bottom: -39px; - // left: -22px; - // background: url("@/assets/images/Mars3DImg/icon/popupLbl.png") 0px 0px no-repeat; - // background-position: 0px 0px; - // } + .marsBlackPanel::before { + content: ""; + width: calc(100% + 22px); + height: 39px; + position: absolute; + bottom: -39px; + left: -22px; + background: url("@/assets/images/Mars3DImg/icon/popupLbl.png") 0px 0px no-repeat; + background-position: 0px 0px; + } - // .marsBlackPanel-text { - // width: 100%; - // height: 100%; - // min-height: 33px; - // text-align: center; - // padding: 10px 5px 0 5px; - // margin: 0; - // font-size: 14px; - // font-weight: 400; - // color: #ffffff; - // border: 1px solid #ffffff4f; - // -webkit-box-sizing: border-box; - // box-sizing: border-box; - // white-space: nowrap; - // } + .marsBlackPanel-text { + width: 100%; + height: 100%; + min-height: 33px; + text-align: center; + padding: 10px 5px 0 5px; + margin: 0; + font-size: 14px; + font-weight: 400; + color: #ffffff; + border: 1px solid #ffffff4f; + -webkit-box-sizing: border-box; + box-sizing: border-box; + white-space: nowrap; + } - // .marsBlackPanel-highlight { - // border: 2px solid yellow; - // } - // .mars3d-popup-close-button { - // position: absolute; - // top: 0; - // right: 0; - // padding: 4px 4px 0 0; - // text-align: center; - // width: 20px; - // height: 20px; - // font: 16px/14px Tahoma, Verdana, sans-serif; - // text-decoration: none; - // font-weight: bold; - // background: transparent; - // z-index: 20170825; - // cursor: pointer; - // color: #fff; - // } + .marsBlackPanel-highlight { + border: 2px solid yellow; + } + .mars3d-popup-close-button { + position: absolute; + top: 0; + right: 0; + padding: 4px 4px 0 0; + text-align: center; + width: 20px; + height: 20px; + font: 16px/14px Tahoma, Verdana, sans-serif; + text-decoration: none; + font-weight: bold; + background: transparent; + z-index: 20170825; + cursor: pointer; + color: #fff; + } }