From 5eb552b86e53f1ae7a04600bcfeb593e39273445 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Wed, 29 Nov 2023 18:42:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/mapCommon.ts                  | 10 ++++
 src/components/CodeMirror/index.vue           | 10 +++-
 src/components/testMap/index.vue              | 24 +++++++--
 .../largeScreen/components/equipmentAdd.vue   | 49 +++++++++++++------
 src/views/goverment/largeScreen/index.vue     | 10 ++--
 5 files changed, 76 insertions(+), 27 deletions(-)

diff --git a/src/api/modules/mapCommon.ts b/src/api/modules/mapCommon.ts
index 83b600a..c053d99 100644
--- a/src/api/modules/mapCommon.ts
+++ b/src/api/modules/mapCommon.ts
@@ -142,3 +142,13 @@ export const gltfModelEdit = (params: any) => {
 export const gltfModelDelete = (params: any) => {
 	return http.post(BASEURL + `/base/gltfModel/delete`, params);
 };
+
+// 设备样式
+// 样式查询
+export const equipmentStyleGet = (params: any) => {
+	return http.post(BASEURL + `/base/deviceConfig/queryById`, params);
+};
+// 样式编辑
+export const equipmentStyleEdit = (params: any) => {
+	return http.post(BASEURL + `/base/deviceConfig/edit`, params);
+};
diff --git a/src/components/CodeMirror/index.vue b/src/components/CodeMirror/index.vue
index 4b81828..ab55948 100644
--- a/src/components/CodeMirror/index.vue
+++ b/src/components/CodeMirror/index.vue
@@ -14,7 +14,7 @@
 </template>
 <script setup lang="ts">
 import type { CSSProperties } from "vue";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { Codemirror } from "vue-codemirror";
 import { vue } from "@codemirror/lang-vue";
 import { oneDark } from "@codemirror/theme-one-dark";
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
 	// tabSize: 2
 });
 const extensions = props.dark ? [vue(), oneDark] : [vue()];
-const codeValue = ref(props.code);
+const codeValue = ref();
 const emits = defineEmits(["update:code", "ready", "change", "focus", "blur"]);
 function handleReady(payload: any) {
 	// console.log('ready')
@@ -58,6 +58,12 @@ function onFocus(viewUpdate: any) {
 function onBlur(viewUpdate: any) {
 	emits("blur", viewUpdate);
 }
+watch(
+	() => props.code,
+	n => {
+		codeValue.value = n;
+	}
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/testMap/index.vue b/src/components/testMap/index.vue
index d371b8e..d71c4b4 100644
--- a/src/components/testMap/index.vue
+++ b/src/components/testMap/index.vue
@@ -2,6 +2,10 @@
 	<div class="map-content" id="map-content">
 		<div id="mars3dContainer" class="mars3d-container"></div>
 		<div class="layer-config" v-if="props.type == '底图'">
+			<div class="property-column-item">
+				<span>透明度：{{ formData.opacity ? formData.opacity : 1 }}</span>
+				<el-slider v-model="formData.opacity" :step="0.1" :max="1" :min="0" @change="e => layerOperate(e, 'opacity')" />
+			</div>
 			<div class="property-column-item">
 				<span>饱和度：{{ formData.saturation ? formData.saturation : 0 }}</span>
 				<el-slider v-model="formData.saturation" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'saturation')" />
@@ -22,10 +26,10 @@
 				<span>伽马校正：{{ formData.gamma ? formData.gamma : 0 }}</span>
 				<el-slider v-model="formData.gamma" :step="0.5" :max="5" :min="-5" @change="e => layerOperate(e, 'gamma')" />
 			</div>
-			<div class="property-row-item">
+			<!-- <div class="property-row-item">
 				<span>是否反色：</span>
 				<el-switch v-model="formData.invertColor" @change="e => layerOperate(e, 'invertColor')" />
-			</div>
+			</div> -->
 			<div class="property-row-item">
 				<span>滤镜颜色：{{ formData.filterColor ? formData.filterColor : "" }}</span>
 				<el-color-picker v-model="formData.filterColor" @change="e => layerOperate(e, 'filterColor')" />
@@ -411,8 +415,6 @@ const layerOperate = (e: any, label: any) => {
 				thisLayer.layer[label] = Cesium.Color.fromCssColorString("#FBFBFB");
 				// thisLayer.layer[label] = "#FBFBFB";
 			}
-		} else if (label == "invertColor") {
-			thisLayer.layer[label] = e;
 		} else {
 			thisLayer[label] = e;
 		}
@@ -513,16 +515,28 @@ const getBaseMapsInfo = async () => {
 		id: props.relativeId
 	};
 	const { result }: { result: any } = await baseMapDetails(requestData);
+	console.log(result);
 	if (result) {
-		formData.value = { ...result };
+		formData.value = { ...result, opacity: result.opacity && result.opacity == 0 ? result.opacity : 1 };
 		configJson.value.basemaps = [
 			{
 				id: result.id,
 				name: result.name,
 				...JSON.parse(result.layer),
+				brightness: result.brightness,
+				contrast: result.brightness,
+				filterColor: result.filterColor
+					? Cesium.Color.fromCssColorString(result.filterColor)
+					: Cesium.Color.fromCssColorString("#FBFBFB"),
+				briggammahtness: result.gamma,
+				hue: result.hue,
+				// invertColor: result.invertColor,
+				saturation: result.saturation,
+				opacity: result.opacity && result.opacity == 0 ? result.opacity : 1,
 				show: true
 			}
 		];
+		configJson.value.scene.center = { lat: 26.502888, lng: 106.174716, alt: 17036414, heading: 0, pitch: -90 };
 		initMars3d(configJson.value);
 	}
 };
diff --git a/src/views/goverment/largeScreen/components/equipmentAdd.vue b/src/views/goverment/largeScreen/components/equipmentAdd.vue
index 061d673..28d9022 100644
--- a/src/views/goverment/largeScreen/components/equipmentAdd.vue
+++ b/src/views/goverment/largeScreen/components/equipmentAdd.vue
@@ -8,7 +8,7 @@
 			<div :class="operateIndex == 0 ? 'active-btn' : ''" @click="operateIndex = 0">基础配置</div>
 			<div :class="operateIndex == 1 ? 'active-btn' : ''" @click="operateIndex = 1">设备列表</div>
 		</div>
-		<div class="basic-config" v-if="operateIndex == 0">
+		<div class="basic-config" v-show="operateIndex == 0">
 			<!-- <div class="switch-content">
 				<div>
 					<span>是否启用：</span>
@@ -30,7 +30,7 @@
 				/>
 			</div>
 			<div class="btn-style">
-				<el-button type="primary">保存</el-button>
+				<el-button type="primary" @click="saveStyle">保存</el-button>
 			</div>
 			<!-- <codemirror
 				v-model="code"
@@ -47,7 +47,7 @@
 			/>
 			<component :is="previewComp"></component> -->
 		</div>
-		<div class="equip-list" v-if="operateIndex == 1">
+		<div class="equip-list" v-show="operateIndex == 1">
 			<div class="type-select">
 				<span>选择类型：</span>
 				<el-radio-group v-model="formData.showType">
@@ -98,22 +98,45 @@ 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";
+const basicConfig = ref({} as any);
 const tableData = ref<any>([]);
 const baseUrl = import.meta.env.VITE_API_URL;
 const formData = ref({
 	enable: false,
-	showType: 1,
-	listData: []
+	showType: 1
 });
 const operateIndex = ref(0);
-const code = ref("");
+const code = ref();
 const previewComp = shallowRef();
 const extensions = [vue(), oneDark];
 import CodeMirror from "@/components/CodeMirror/index.vue";
-const props = defineProps(["mapInstance", "graphicInstance"]);
+const props = defineProps(["mapInstance", "equipTypeDictLabel"]);
 const emits = defineEmits(["hiddenConfim"]);
 let map: any = props.mapInstance;
 let graphicLayer: any;
+// 保存基础配置
+const saveStyle = async () => {
+	let requestData: any = {
+		style: code.value,
+		category: props.equipTypeDictLabel
+	};
+	if (basicConfig.value.id) {
+		requestData.id = basicConfig.value.id;
+	}
+	const res = await equipmentStyleEdit(requestData);
+	if (res) {
+		ElMessage.success("保存成功");
+	}
+};
+// 获取基础配置
+const getStyle = async () => {
+	const res = await equipmentStyleGet({ category: props.equipTypeDictLabel }); // 获取设备样式
+	if (res.result) {
+		basicConfig.value = { ...res.result };
+		code.value = res.result.style;
+	}
+};
 // 保存编辑信息
 const saveEdit = (row: any) => {
 	const graphic = graphicLayer.getGraphicById(row.id);
@@ -241,24 +264,18 @@ const onBlur = (viewUpdate: any) => {
 		console.error(err);
 	}
 };
-onMounted(() => {
+onMounted(async () => {
 	console.log(map, "66666");
 	console.log(QueryPopup, "777888");
 	map.scene.globe.depthTestAgainstTerrain = false; // 不加无法投射到地形上
 	map.onlyPickModelPosition = true; // 是否仅在模型上标绘
-	graphicLayer = new mars3d.layer.GraphicLayer({
-		// isRestorePositions: true,
-		// hasEdit: true,
-		// isAutoEditing: true // 绘制完成后是否自动激活编辑
-		// drawAddEventType: false,
-		// drawEndEventType: mars3d.EventType.rightClick,
-		// drawDelEventType: mars3d.EventType.middleClick
-	});
+	graphicLayer = new mars3d.layer.GraphicLayer();
 	map.addLayer(graphicLayer);
 	graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
 		console.log("创建完成", e);
 		addRandomGraphicByCount(e.graphic.point);
 	});
+	await getStyle();
 });
 onUnmounted(() => {
 	map = null;
diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue
index e77857d..049d582 100644
--- a/src/views/goverment/largeScreen/index.vue
+++ b/src/views/goverment/largeScreen/index.vue
@@ -48,7 +48,7 @@
 		</div>
 		<!-- 物联网设备操作 -->
 		<div class="equip-menu-operate" v-if="equipListShow">
-			<div class="tool-item" v-for="(item, index) in equipTypeList" :key="index" @click="clickEquipMenu(item.dictValue)">
+			<div class="tool-item" v-for="(item, index) in equipTypeList" :key="index" @click="clickEquipMenu(item)">
 				<!-- <img :src="item.icon" alt="" srcset="" style="width: 14px; height: 14px" /> -->
 				<span>{{ item.dictValue }}</span>
 			</div>
@@ -134,7 +134,7 @@
 			</div>
 		</div>
 		<!-- 设备添加弹框 -->
-		<EquipmentAdd :mapInstance="map" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" v-draggable />
+		<EquipmentAdd :mapInstance="map" :equipTypeDictLabel="equipTypeDictLabel" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" v-draggable />
 		<!-- 图上量算弹框 -->
 		<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" v-draggable />
 		<!-- 空间分析弹框 -->
@@ -314,6 +314,7 @@ import {
 	updateSystemConfig
 } from "@/api/modules/mapCommon";
 import { getDicList } from "@/api/modules/jxjview";
+const equipTypeDictLabel = ref();
 const equipTypeList = ref([]);
 const equipListShow = ref(false);
 const toolListShow = ref(false);
@@ -827,8 +828,9 @@ const showWidget = (name: string) => {
 	console.log(666);
 };
 // 点击物联网设备菜单
-const clickEquipMenu = (name: any) => {
-	console.log(name);
+const clickEquipMenu = async (obj: any) => {
+	console.log(obj, "111222333");
+	equipTypeDictLabel.value = obj.dictLabel
 	equipmentShow.value = true;
 	equipListShow.value = false;
 };