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