fix: BUG修改

src/api/modules/mapCommon.ts

@@ -152,3 +152,23 @@ export const equipmentStyleGet = (params: any) => {
 export const equipmentStyleEdit = (params: any) => {
 	return http.post(BASEURL + `/base/deviceConfig/edit`, params);
 };
+
+// 设备列表
+export const equipmentList = (params: any) => {
+	return http.post(BASEURL + `/base/monitorDev/list`, params);
+};
+
+// 设备新增
+export const equipmentAdd = (params: any) => {
+	return http.post(BASEURL + `/base/monitorDev/add`, params);
+};
+
+// 设备编辑
+export const equipmentEdit = (params: any) => {
+	return http.post(BASEURL + `/base/monitorDev/edit`, params);
+};
+
+// 设备删除
+export const equipmentDelete = (params: any) => {
+	return http.post(BASEURL + `/base/monitorDev/delete`, params);
+};

src/views/goverment/frontLargeScreen/index.vue

@@ -298,8 +298,10 @@ import {
 	diffuseWallList,
 	polylineCombineList,
 	gltfModelList,
-	updateSystemConfig
+	updateSystemConfig,
+	equipmentList
 } from "@/api/modules/mapCommon";
+import { getDicList } from "@/api/modules/jxjview";
 const isViewStart = ref<boolean>(true);
 interface FormState {
 	isStart: boolean;
@@ -502,7 +504,66 @@ onMounted(async () => {
 	// await getConfig();
 	await getPlusConfig();
 	await loadModel();
+	await getEquipTypeList();
 });
+// 根据不同类型设置样式
+const getTypeStyle = (num: any, type: any) => {
+	let borderSty: any;
+	let borderLeftSty: any;
+	let bgSty: any;
+	if (type == 1) {
+		borderSty = "mars3d-camera-style1";
+		borderLeftSty = "mars3d-borderLeft1";
+		bgSty = "mars3d-bg1";
+	} else if (type == 2) {
+		borderSty = "mars3d-camera-style2";
+		borderLeftSty = "mars3d-borderLeft2";
+		bgSty = "mars3d-bg2";
+	}
+	if (num == 1) {
+		return borderSty;
+	} else if (num == 2) {
+		return borderLeftSty;
+	} else if (num == 3) {
+		return bgSty;
+	}
+};
+// 获取设备类型下的设备列表
+const getEquipmentList = async (id: any) => {
+	const res = await equipmentList({ category: id });
+	if (res.result && res.result.length > 0) {
+		let arr: any = res.result;
+		arr.map(item => {
+			const graphicImg = new mars3d.graphic.DivGraphic({
+				id: item.monitorId,
+				position: [+item.lng, +item.lat, +item.alt],
+				style: {
+					html: ` <div class="mars3d-camera-content ${getTypeStyle(1, item.type)}">
+                      <span class="mars3d-camera-text">${item.name}</span>
+                    </div>
+                    <div class="mars3d-camera-line ${getTypeStyle(2, item.type)}" ></div>
+                    <div class="mars3d-camera-point ${getTypeStyle(3, item.type)}"></div>
+                  `,
+					offsetX: -51,
+					offsetY: 4,
+					distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
+				}
+			});
+			graphicLayer.addGraphic(graphicImg);
+		});
+	}
+	console.log(res);
+};
+// 获取配置的设备类型数据
+const getEquipTypeList = async () => {
+	const { result } = await getDicList({ dictType: "device_style" });
+	console.log(result, "设备列表.......");
+	if (result.length > 0) {
+		result.map((item: any) => {
+			getEquipmentList(item.dictLabel);
+		});
+	}
+};
 // 设置特定模型
 const loadModel = async () => {
 	const tiles3dLayer = new mars3d.layer.TilesetLayer({
@@ -2032,11 +2093,34 @@ onUnmounted(() => {
 	.mars3d-camera-content {
 		height: 30px;
 	}
+	.mars3d-camera-style1 {
+		border: 3px solid #5b8fee;
+	}
+	.mars3d-camera-style2 {
+		border: 3px solid #ff6564;
+	}
+	.mars3d-borderLeft1 {
+		border-left: 3px dashed #5b8fee;
+	}
+
+	.mars3d-borderLeft2 {
+		border-left: 3px dashed #ff6564;
+	}
+	.mars3d-bg1 {
+		background-color: #5b8fee;
+	}
+	.mars3d-bg2 {
+		background-color: #ff6564;
+	}
 	.mars3d-camera-img {
 		width: 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 {
+		color: white;
+		font-size: 20px;
 	}
 	@keyframes cameraMove {
 		from {
@@ -2057,8 +2141,8 @@ onUnmounted(() => {
 	.mars3d-camera-line {
 		height: 120px;
 		width: 5px;
-		margin-top: 20px;
+		margin-top: 10px;
-		border-left: 3px dashed #5b8fee;
+		// border-left: 3px dashed #5b8fee;
 		margin-left: calc(50% - 1px);
 	}
 	.mars3d-camera-point {
@@ -2066,7 +2150,7 @@ onUnmounted(() => {
 		width: 8px;
 		height: 8px;
 		margin-left: calc(50% - 3px);
-		background-color: #5b8fee;
+		// background-color: #5b8fee;
 	}
 	.animation-spaceInDown {
 		animation-duration: 1s;

src/views/goverment/largeScreen/components/equipmentAdd.vue

@@ -5,8 +5,8 @@
 			<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
 		</div>
 		<div class="operate-btn">
-			<div :class="operateIndex == 0 ? 'active-btn' : ''" @click="operateIndex = 0">基础配置</div>
+			<div :class="operateIndex == 0 ? 'active-btn' : ''" @click="getRelativeData(0)">基础配置</div>
-			<div :class="operateIndex == 1 ? 'active-btn' : ''" @click="operateIndex = 1">设备列表</div>
+			<div :class="operateIndex == 1 ? 'active-btn' : ''" @click="getRelativeData(1)">设备列表</div>
 		</div>
 		<div class="basic-config" v-show="operateIndex == 0">
 			<!-- <div class="switch-content">
@@ -98,7 +98,14 @@ import { loadModule } from "vue3-sfc-loader";
 import { initVue3Popup } from "@/utils/file-util";
 import QueryPopup from "./query-popup.vue";
 import { ElMessage } from "element-plus";
-import { equipmentStyleGet, equipmentStyleEdit } from "@/api/modules/mapCommon";
+import {
+	equipmentStyleGet,
+	equipmentStyleEdit,
+	equipmentList,
+	equipmentAdd,
+	equipmentEdit,
+	equipmentDelete
+} from "@/api/modules/mapCommon";
 const basicConfig = ref({} as any);
 const tableData = ref<any>([]);
 const baseUrl = import.meta.env.VITE_API_URL;
@@ -111,10 +118,28 @@ const code = ref();
 const previewComp = shallowRef();
 const extensions = [vue(), oneDark];
 import CodeMirror from "@/components/CodeMirror/index.vue";
-const props = defineProps(["mapInstance", "equipTypeDictLabel"]);
+const props = defineProps(["mapInstance", "graphicInstance", "equipTypeDictLabel"]);
 const emits = defineEmits(["hiddenConfim"]);
 let map: any = props.mapInstance;
 let graphicLayer: any;
+let parentGraphicLayer = props.graphicInstance;
+// 获取相关tab数据
+const getRelativeData = (index: any) => {
+	operateIndex.value = index;
+	if (index == 0) {
+		getStyle();
+	} else if (index == 1) {
+		getEquipList();
+	}
+};
+// 获取设备列表
+const getEquipList = async () => {
+	const res = await equipmentList({ category: props.equipTypeDictLabel });
+	if (res.result && res.result.length > 0) {
+		tableData.value = res.result;
+	}
+	console.log(res);
+};
 // 保存基础配置
 const saveStyle = async () => {
 	let requestData: any = {
@@ -138,24 +163,46 @@ const getStyle = async () => {
 	}
 };
 // 保存编辑信息
-const saveEdit = (row: any) => {
+const saveEdit = async (row: any) => {
-	const graphic = graphicLayer.getGraphicById(row.id);
+	let requestData = {
+		name: row.name,
+		monitorId: row.monitorId,
+		category: props.equipTypeDictLabel
+	};
+	const res = await equipmentEdit(requestData);
+	if (res && res.code == 200) {
+		let graphic = graphicLayer.getGraphicById(row.monitorId);
+		console.log(graphic, "子图像");
+		if (!graphic) {
+			graphic = parentGraphicLayer.getGraphicById(row.monitorId);
+		}
+		console.log(graphic, "父图像");
 		graphic.setStyle({
-		html: ` <div class="mars3d-camera-content">
+			html: ` <div class="mars3d-camera-content ${getTypeStyle(1)}">
                       <span class="mars3d-camera-text">${row.name}</span>
                     </div>
-                    <div class="mars3d-camera-line" ></div>
+                    <div class="mars3d-camera-line ${getTypeStyle(2)}" ></div>
-                    <div class="mars3d-camera-point"></div>
+                    <div class="mars3d-camera-point ${getTypeStyle(3)}"></div>
                   `
 		});
+	}
 	row.isEdit = false;
 };
 // 删除用户信息
 const handleDeleteItem = async (row: any, index: any) => {
-	const graphic = graphicLayer.getGraphicById(row.id);
+	let requestData = {
+		monitorId: row.monitorId
+	};
+	const res = await equipmentDelete(requestData);
+	if (res && res.code == 200) {
+		let graphic = graphicLayer.getGraphicById(row.monitorId);
+		if (!graphic) {
+			graphic = parentGraphicLayer.getGraphicById(row.monitorId);
+		}
 		graphic && graphic.remove(true);
 		// await useHandleData(deleteBigItem, { id: params.id }, `删除【${params.name}】`);
 		tableData.value.splice(index, 1);
+	}
 };
 // 图上新增点
 const newPoint = () => {
@@ -177,18 +224,40 @@ const getTypeImage = () => {
 	}
 	return img;
 };
+// 根据不同类型设置样式
+const getTypeStyle = (num: any) => {
+	let borderSty: any;
+	let borderLeftSty: any;
+	let bgSty: any;
+	if (formData.value.showType == 1) {
+		borderSty = "mars3d-camera-style1";
+		borderLeftSty = "mars3d-borderLeft1";
+		bgSty = "mars3d-bg1";
+	} else if (formData.value.showType == 2) {
+		borderSty = "mars3d-camera-style2";
+		borderLeftSty = "mars3d-borderLeft2";
+		bgSty = "mars3d-bg2";
+	}
+	if (num == 1) {
+		return borderSty;
+	} else if (num == 2) {
+		return borderLeftSty;
+	} else if (num == 3) {
+		return bgSty;
+	}
+};
 //   <img class="mars3d-camera-img" src="${getTypeImage()}" >
-const addRandomGraphicByCount = (point: any) => {
+const addRandomGraphicByCount = async (point: any) => {
 	const graphicImg = new mars3d.graphic.DivGraphic({
 		position: [point.lng, point.lat, point.alt],
 		style: {
-			html: ` <div class="mars3d-camera-content">
+			html: ` <div class="mars3d-camera-content ${getTypeStyle(1)}">
                       <span class="mars3d-camera-text"></span>
                     </div>
-                    <div class="mars3d-camera-line" ></div>
+                    <div class="mars3d-camera-line ${getTypeStyle(2)}" ></div>
-                    <div class="mars3d-camera-point"></div>
+                    <div class="mars3d-camera-point ${getTypeStyle(3)}"></div>
                   `,
-			offsetX: -49,
+			offsetX: -51,
 			offsetY: 4,
 			distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
 		}
@@ -216,14 +285,36 @@ const addRandomGraphicByCount = (point: any) => {
 	graphicLayer.addGraphic(graphicImg);
 	console.log(graphicImg);
 	const obj = {
-		id: graphicImg.id,
+		monitorId: graphicImg.id,
 		name: graphicImg.name,
+		type: formData.value.showType,
+		lng: point.lng,
+		lat: point.lat,
+		alt: point.alt,
 		isEdit: false
 	};
+	let requestData = {
+		name: obj.name,
+		monitorId: obj.monitorId,
+		category: props.equipTypeDictLabel,
+		type: formData.value.showType,
+		lng: point.lng,
+		lat: point.lat,
+		alt: point.alt
+	};
+	const res = await equipmentAdd(requestData);
+	if (res && res.code == 200) {
 		tableData.value.unshift(obj);
+	} else {
+		let htmlGraphic = graphicLayer.getGraphicById(graphicImg.id);
+		if (!htmlGraphic) {
+			htmlGraphic = parentGraphicLayer.getGraphicById(graphicImg.id);
+		}
+		htmlGraphic && htmlGraphic.remove(true);
+	}
 	console.log(graphicLayer);
-	// const pointGraphic = graphicLayer.getGraphicById("point-tip");
+	const pointGraphic = graphicLayer.getGraphicById("point-tip");
-	// pointGraphic && pointGraphic.remove(true);
+	pointGraphic && pointGraphic.remove(true);
 };
 const closeDiv = () => {
 	emits("hiddenConfim");

src/views/goverment/largeScreen/index.vue

@@ -134,7 +134,14 @@
 			</div>
 		</div>
 		<!-- 设备添加弹框 -->
-		<EquipmentAdd :mapInstance="map" :equipTypeDictLabel="equipTypeDictLabel" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" v-draggable />
+		<EquipmentAdd
+			:mapInstance="map"
+			:graphicInstance="graphicLayer"
+			:equipTypeDictLabel="equipTypeDictLabel"
+			v-if="equipmentShow"
+			@hiddenConfim="equipmentShow = false"
+			v-draggable
+		/>
 		<!-- 图上量算弹框 -->
 		<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" v-draggable />
 		<!-- 空间分析弹框 -->
@@ -311,7 +318,8 @@ import {
 	diffuseWallList,
 	polylineCombineList,
 	gltfModelList,
-	updateSystemConfig
+	updateSystemConfig,
+	equipmentList
 } from "@/api/modules/mapCommon";
 import { getDicList } from "@/api/modules/jxjview";
 const equipTypeDictLabel = ref();
@@ -504,6 +512,54 @@ onMounted(async () => {
 	await getConfig();
 	await getEquipTypeList();
 });
+// 根据不同类型设置样式
+const getTypeStyle = (num: any, type: any) => {
+	let borderSty: any;
+	let borderLeftSty: any;
+	let bgSty: any;
+	if (type == 1) {
+		borderSty = "mars3d-camera-style1";
+		borderLeftSty = "mars3d-borderLeft1";
+		bgSty = "mars3d-bg1";
+	} else if (type == 2) {
+		borderSty = "mars3d-camera-style2";
+		borderLeftSty = "mars3d-borderLeft2";
+		bgSty = "mars3d-bg2";
+	}
+	if (num == 1) {
+		return borderSty;
+	} else if (num == 2) {
+		return borderLeftSty;
+	} else if (num == 3) {
+		return bgSty;
+	}
+};
+// 获取设备类型下的设备列表
+const getEquipmentList = async (id: any) => {
+	const res = await equipmentList({ category: id });
+	if (res.result && res.result.length > 0) {
+		let arr: any = res.result;
+		arr.map(item => {
+			const graphicImg = new mars3d.graphic.DivGraphic({
+				id: item.monitorId,
+				position: [+item.lng, +item.lat, +item.alt],
+				style: {
+					html: ` <div class="mars3d-camera-content ${getTypeStyle(1, item.type)}">
+                      <span class="mars3d-camera-text">${item.name}</span>
+                    </div>
+                    <div class="mars3d-camera-line ${getTypeStyle(2, item.type)}" ></div>
+                    <div class="mars3d-camera-point ${getTypeStyle(3, item.type)}"></div>
+                  `,
+					offsetX: -51,
+					offsetY: 4,
+					distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
+				}
+			});
+			graphicLayer.addGraphic(graphicImg);
+		});
+	}
+	console.log(res);
+};
 // 获取配置的设备类型数据
 const getEquipTypeList = async () => {
 	const { result } = await getDicList({ dictType: "device_style" });
@@ -511,6 +567,9 @@ const getEquipTypeList = async () => {
 	if (result.length > 0) {
 		equipTypeList.value.length = 0;
 		equipTypeList.value.push(...result);
+		equipTypeList.value.map((item: any) => {
+			getEquipmentList(item.dictLabel);
+		});
 	}
 };
 // 展示保存的地图标绘配置
@@ -830,7 +889,7 @@ const showWidget = (name: string) => {
 // 点击物联网设备菜单
 const clickEquipMenu = async (obj: any) => {
 	console.log(obj, "111222333");
-	equipTypeDictLabel.value = obj.dictLabel
+	equipTypeDictLabel.value = obj.dictLabel;
 	equipmentShow.value = true;
 	equipListShow.value = false;
 };
@@ -1064,14 +1123,14 @@ const initMars3d = (option: any) => {
 	map.on(mars3d.EventType.cameraChanged, cameraChanged);
 	// 创建覆盖物数据图层
 	graphicLayer = new mars3d.layer.GraphicLayer();
-	graphicLayer.bindPopup((event: any) => {
+	// graphicLayer.bindPopup((event: any) => {
-		const attr = event.graphic.attr || {};
+	// 	const attr = event.graphic.attr || {};
-		if (!attr) {
+	// 	if (!attr) {
-			return;
+	// 		return;
-		}
+	// 	}
-		const dom = initVue3Popup(QueryPopup, attr);
+	// 	const dom = initVue3Popup(QueryPopup, attr);
-		return dom;
+	// 	return dom;
-	});
+	// });
 	map.addLayer(graphicLayer);
 	// 获取配置文件底图数据
 	getBasicMaps();
@@ -2220,7 +2279,30 @@ onUnmounted(() => {
 // 视频监控点位样式
 :deep() {
 	.mars3d-camera-content {
+		width: 100px;
 		height: 30px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.mars3d-camera-style1 {
+		border: 3px solid #5b8fee;
+	}
+	.mars3d-camera-style2 {
+		border: 3px solid #ff6564;
+	}
+	.mars3d-borderLeft1 {
+		border-left: 3px dashed #5b8fee;
+	}
+
+	.mars3d-borderLeft2 {
+		border-left: 3px dashed #ff6564;
+	}
+	.mars3d-bg1 {
+		background-color: #5b8fee;
+	}
+	.mars3d-bg2 {
+		background-color: #ff6564;
 	}
 	.mars3d-camera-img {
 		width: 30px;
@@ -2229,11 +2311,8 @@ onUnmounted(() => {
 		// -webkit-animation: cameraMove 1s linear infinite alternate;
 	}
 	.mars3d-camera-text {
-		display: inline-block;
-		width: 30px;
-		height: 30px;
 		color: white;
-		font-size: 24px;
+		font-size: 20px;
 	}
 	@keyframes cameraMove {
 		from {
@@ -2254,8 +2333,8 @@ onUnmounted(() => {
 	.mars3d-camera-line {
 		height: 120px;
 		width: 5px;
-		margin-top: 20px;
+		margin-top: 10px;
-		border-left: 3px dashed #5b8fee;
+		// border-left: 3px dashed #5b8fee;
 		margin-left: calc(50% - 1px);
 	}
 	.mars3d-camera-point {
@@ -2263,7 +2342,7 @@ onUnmounted(() => {
 		width: 8px;
 		height: 8px;
 		margin-left: calc(50% - 3px);
-		background-color: #5b8fee;
+		// background-color: #5b8fee;
 	}
 	// .animation-spaceInDown {
 	// 	animation-duration: 1s;