admin/Mars3D-screen_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 🚀 flx:修改样式

Browse Source
This commit is contained in:
Rain 2024-08-21 09:19:07 +08:00
parent 26f546397a
commit 9a069088f2
2 changed files with 142 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/goverment/largeScreen/components/equipmentAdd.vue
View File

@ -100,10 +100,10 @@
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="url" align="center" label="资源地址">
<el-table-column prop="code" align="center" label="设备编码">
<template #default="{ row }">
<el-input v-model="row.url" v-if="row.isEdit" />
<span v-else>{{ row.url }}</span>
<el-input v-model="row.code" v-if="row.isEdit" />
<span v-else>{{ row.code }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
@ -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) {

264
src/views/goverment/largeScreen/index.vue
View File

@ -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: `<div class="mars3d-camera-content">
<img class="mars3d-camera-img" src="${img}" >
</div>
<div class="mars3d-camera-line" ></div>
<div class="mars3d-camera-point"></div>`,
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;
}
}
</style>