From c4b0411f73a569b932808560104be7fcc650d613 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Tue, 31 Oct 2023 19:05:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=83=A8=E5=88=86=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/mapCommon.ts                  |  20 +
 src/components/layoutTop/index.vue            |   7 +-
 src/components/testMap/index.scss             | 278 ++++++++++++
 src/components/testMap/index.vue              | 145 ++++++
 src/views/goverment/largeScreen/index.vue     |  19 +-
 src/views/jxjview/configManagement/index.vue  |  28 +-
 .../components/operateDialog.vue              | 422 ++++--------------
 src/views/jxjview/layerManagement/index.vue   | 118 +++--
 8 files changed, 632 insertions(+), 405 deletions(-)
 create mode 100644 src/components/testMap/index.scss
 create mode 100644 src/components/testMap/index.vue

diff --git a/src/api/modules/mapCommon.ts b/src/api/modules/mapCommon.ts
index 76a18f5..372b268 100644
--- a/src/api/modules/mapCommon.ts
+++ b/src/api/modules/mapCommon.ts
@@ -18,3 +18,23 @@ export const getSystemConfig = (params: any) => {
 export const updateSystemConfig = (params: any) => {
 	return http.post(BASEURL + `/xmgl/systemConfig/edit`, params);
 };
+// 底图图层分页列表
+export const baseMapPage = (params: any) => {
+	return http.post(BASEURL + `/base/baseMap/page`, params);
+};
+// 底图图层新增
+export const baseMapAdd = (params: any) => {
+	return http.post(BASEURL + `/base/baseMap/add`, params);
+};
+// 底图图层详细信息
+export const baseMapDetails = (params: any) => {
+	return http.post(BASEURL + `/base/baseMap/queryById`, params);
+};
+// 底图图层编辑
+export const baseMapEdit = (params: any) => {
+	return http.post(BASEURL + `/base/baseMap/edit`, params);
+};
+// 底图图层删除
+export const baseMapDelete = (params: any) => {
+	return http.post(BASEURL + `/base/baseMap/delete`, params);
+};
diff --git a/src/components/layoutTop/index.vue b/src/components/layoutTop/index.vue
index c9838d1..26399e5 100644
--- a/src/components/layoutTop/index.vue
+++ b/src/components/layoutTop/index.vue
@@ -11,7 +11,7 @@
 				</div>
 			</div>
 			<div class="header-menu">
-				<div @click="router.push('/largeScreen')">
+				<div @click="backCenter">
 					<img src="@/assets/images/icon/fire.png" alt="" srcset="" />
 					<span>首页</span>
 				</div>
@@ -30,9 +30,14 @@ import { useRoute, useRouter } from "vue-router";
 import { GlobalStore } from "@/stores";
 import { HOME_URL } from "@/enums/Home";
 import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+const emits = defineEmits(["toCenter"]);
 const router = useRouter();
 const globalStore = GlobalStore();
 const moduleTitle = globalStore.moduleName;
+const backCenter = () => {
+	emits("toCenter");
+	router.push("/largeScreen");
+};
 const goHome = () => {
 	router.push(HOME_URL[globalStore.accountType - 1]);
 };
diff --git a/src/components/testMap/index.scss b/src/components/testMap/index.scss
new file mode 100644
index 0000000..d19e207
--- /dev/null
+++ b/src/components/testMap/index.scss
@@ -0,0 +1,278 @@
+@mixin flex {
+	display: flex;
+	align-items: center;
+}
+.map-content {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 100;
+	background-color: #ccc;
+	overflow: hidden;
+	.mars3d-container {
+		height: 100%;
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		border: none;
+		overflow: hidden;
+	}
+	.layer-config {
+		width: 360px;
+		height: auto;
+		min-width: 360px;
+		min-height: 420px;
+		border: 1px solid #fff;
+		position: absolute;
+		top: 10px;
+		left: 10px;
+		padding: 10px 30px 20px;
+		.property-column-item {
+			display: flex;
+			flex-direction: column;
+			> span {
+				color: #fff;
+				font-size: 14px;
+			}
+		}
+		.property-row-item {
+			display: flex;
+			align-items: center;
+			margin-bottom: 10px;
+			> span {
+				color: #fff;
+				font-size: 14px;
+				margin-right: 5px;
+			}
+		}
+		.operate-btn {
+			margin-top: 20px;
+		}
+	}
+	.close-btn {
+		position: absolute;
+		top: 0;
+		right: 0;
+		cursor: pointer;
+	}
+}
+:deep() {
+	// 全局基础样式
+	.cesium-viewer-toolbar {
+		top: auto;
+		bottom: 35px;
+		left: 12px;
+		right: auto;
+	}
+
+	.cesium-toolbar-button img {
+		height: 100%;
+		vertical-align: middle;
+	}
+
+	.cesium-viewer-toolbar > .cesium-toolbar-button,
+	.cesium-navigationHelpButton-wrapper,
+	.cesium-viewer-geocoderContainer {
+		margin-bottom: 5px;
+		float: left;
+		clear: both;
+		text-align: center;
+	}
+
+	.cesium-button {
+		background-color: rgba(23, 49, 71, 0.7);
+		border: none;
+		color: #ffffff;
+		fill: #e6e6e6;
+		line-height: 32px;
+	}
+
+	.cesium-button:hover {
+		background-color: rgba(0, 138, 255, 0.7);
+		box-shadow: none;
+		border: none;
+	}
+
+	/**cesium 底图切换面板*/
+	.cesium-baseLayerPicker-dropDown {
+		bottom: 0;
+		left: 40px;
+		max-height: 700px;
+		margin-bottom: 5px;
+		background-color: rgba(23, 49, 71, 0.7);
+	}
+
+	/**cesium 帮助面板*/
+	.cesium-navigation-help {
+		top: auto;
+		bottom: 0;
+		left: 40px;
+		transform-origin: left bottom;
+	}
+
+	.cesium-navigation-help-instructions,
+	.cesium-navigation-button {
+		background-color: rgba(23, 49, 71, 0.8);
+	}
+
+	.cesium-navigation-button-selected,
+	.cesium-navigation-button-unselected:hover {
+		background-color: rgba(23, 49, 71, 1);
+	}
+
+	/**cesium 二维三维切换*/
+	.cesium-sceneModePicker-wrapper {
+		width: auto;
+	}
+
+	.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
+		float: right;
+		margin: 0 3px;
+	}
+
+	/**cesium POI查询输入框*/
+	.cesium-viewer-geocoderContainer .search-results {
+		left: 0;
+		right: 40px;
+		width: auto;
+		z-index: 9999;
+	}
+
+	.cesium-geocoder-searchButton {
+		background-color: rgba(23, 49, 71, 0.8);
+	}
+
+	.cesium-viewer-geocoderContainer .cesium-geocoder-input {
+		background-color: rgba(63, 72, 84, 0.7);
+	}
+
+	.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
+		background-color: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
+	}
+
+	.cesium-viewer-geocoderContainer .search-results {
+		background-color: rgba(23, 49, 71, 0.8);
+	}
+
+	/**cesium info信息框*/
+	.cesium-infoBox {
+		top: 50px;
+		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
+	}
+
+	.cesium-infoBox-title {
+		background-color: rgba(23, 49, 71, 0.8);
+	}
+
+	/**cesium 任务栏的FPS信息*/
+	.cesium-performanceDisplay-defaultContainer {
+		top: auto;
+		bottom: 35px;
+		right: 50px;
+	}
+
+	.cesium-performanceDisplay-ms,
+	.cesium-performanceDisplay-fps {
+		color: #fff;
+	}
+
+	/**cesium tileset调试信息面板*/
+	.cesium-viewer-cesiumInspectorContainer {
+		top: 10px;
+		left: 10px;
+		right: auto;
+	}
+
+	.cesium-cesiumInspector {
+		background-color: rgba(23, 49, 71, 0.8);
+	}
+
+	/**覆盖mars3d内部控件的颜色等样式*/
+	.mars3d-compass .mars3d-compass-outer {
+		fill: rgba(23, 49, 71, 0.8);
+	}
+
+	.mars3d-contextmenu-ul,
+	.mars3d-sub-menu {
+		background-color: rgba(23, 49, 71, 0.8);
+	}
+
+	.mars3d-contextmenu-ul > li > a:hover,
+	.mars3d-sub-menu > li > a:hover,
+	.mars3d-contextmenu-ul > li > a:focus,
+	.mars3d-sub-menu > li > a:focus,
+	.mars3d-contextmenu-ul > li > .active,
+	.mars3d-sub-menu > li > .active {
+		background-color: var(--mars-hover-btn-bg, #3ea6ff);
+	}
+
+	.mars3d-contextmenu-ul > .active > a,
+	.mars3d-sub-menu > .active > a,
+	.mars3d-contextmenu-ul > .active > a:hover,
+	.mars3d-sub-menu > .active > a:hover,
+	.mars3d-contextmenu-ul > .active > a:focus,
+	.mars3d-sub-menu > .active > a:focus {
+		background-color: var(--mars-hover-btn-bg, #3ea6ff);
+	}
+
+	/* Popup样式*/
+	.mars3d-popup-color {
+		color: var(--mars-text-color, #ffffff);
+	}
+
+	.mars3d-popup-background {
+		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
+	}
+
+	.mars3d-tooltip {
+		color: var(--mars-text-color, #ffffff);
+		background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));
+		border: 1px solid var(--mars-bg-base, rgba(63, 72, 84, 0.9));
+	}
+
+	.mars3d-tooltip-top:before {
+		border-top-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
+	}
+
+	.mars3d-tooltip-bottom:before {
+		border-bottom-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
+	}
+
+	.mars3d-tooltip-left:before {
+		border-left-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
+	}
+
+	.mars3d-tooltip-right:before {
+		border-right-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
+	}
+
+	.mars3d-template-content label {
+		padding-right: 6px;
+	}
+
+	.mars3d-template-titile {
+		color: var(--mars-base-color, #ffffff);
+		border-bottom: 1px solid var(--mars-hover-btn-bg, #3ea6ff);
+	}
+
+	.mars3d-template-titile a {
+		font-size: 16px;
+		color: var(--mars-msg-title-color, #c7d3dd);
+	}
+
+	.mars3d-popup-btn-custom {
+		padding: 3px 10px;
+		border: 1px solid #209ffd;
+		background: #209ffd1c;
+	}
+
+	.mars3d-popup-content {
+		margin: 15px;
+	}
+
+	.mars3d-divGraphic:hover {
+		z-index: 999 !important;
+	}
+}
diff --git a/src/components/testMap/index.vue b/src/components/testMap/index.vue
new file mode 100644
index 0000000..6ae3798
--- /dev/null
+++ b/src/components/testMap/index.vue
@@ -0,0 +1,145 @@
+<template>
+	<div class="map-content" id="map-content">
+		<div id="mars3dContainer" class="mars3d-container"></div>
+		<div class="layer-config">
+			<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')" />
+			</div>
+			<div class="property-column-item">
+				<span>亮度：{{ formData.brightness ? formData.brightness : 0 }}</span>
+				<el-slider v-model="formData.brightness" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'brightness')" />
+			</div>
+			<div class="property-column-item">
+				<span>对比度：{{ formData.contrast ? formData.contrast : 0 }}</span>
+				<el-slider v-model="formData.contrast" :step="0.5" :max="10" :min="-10" @change="e => layerOperate(e, 'contrast')" />
+			</div>
+			<div class="property-column-item">
+				<span>色调：{{ formData.hue ? formData.hue : 0 }}</span>
+				<el-slider v-model="formData.hue" :step="0.5" :max="2" :min="-2" @change="e => layerOperate(e, 'hue')" />
+			</div>
+			<div class="property-column-item">
+				<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">
+				<span>是否反色：</span>
+				<el-switch v-model="formData.invertColor" @change="e => layerOperate(e, 'invertColor')" />
+			</div>
+			<div class="property-row-item">
+				<span>滤镜颜色：{{ formData.filterColor ? formData.filterColor : "" }}</span>
+				<el-color-picker v-model="formData.filterColor" @change="e => layerOperate(e, 'filterColor')" />
+			</div>
+			<div class="operate-btn">
+				<el-button>保存当前配置</el-button>
+			</div>
+		</div>
+		<div class="close-btn" @click="$emit('confirm')">
+			<el-icon color="#fff" size="18"><CircleClose /></el-icon>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch } from "vue";
+//引入cesium基础库
+import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
+import * as Cesium from "mars3d-cesium";
+//导入mars3d主库
+import "mars3d/dist/mars3d.css";
+import * as mars3d from "mars3d";
+import { baseMapDetails } from "@/api/modules/mapCommon";
+const props = defineProps({
+	testMapVisible: Boolean,
+	relativeId: String
+});
+const emits = defineEmits(["confirm"]);
+const formData: any = ref({});
+const configJson = ref<any>({
+	scene: {
+		center: { lat: 14.029537, lng: 105.94238, alt: 4879779, heading: 0, pitch: -66 }
+	},
+	control: {
+		baseLayerPicker: false, // basemaps底图切换按钮
+		homeButton: true, // 视角复位按钮
+		sceneModePicker: true, // 二三维切换按钮
+		navigationHelpButton: true, // 帮助按钮
+		fullscreenButton: true, // 全屏按钮
+		contextmenu: { hasDefault: true } // 右键菜单
+	},
+	basemaps: [
+		{
+			name: "天地图影像",
+			icon: "img/basemaps/tdt_img.png",
+			type: "tdt",
+			layer: "img_d",
+			show: true
+		}
+	]
+});
+let map: any;
+let graphicLayer: any;
+let thisLayer: any; // 选中的图层
+// 底图图层操作
+const layerOperate = (e: any, label: any) => {
+	thisLayer = map.getLayerById(formData.value.id);
+	console.log(thisLayer);
+	if (label == "filterColor") {
+		console.log(e, label);
+		thisLayer.layer[label] = Cesium.Color.fromCssColorString(e);
+	} else if (label == "invertColor") {
+		thisLayer.layer[label] = e;
+	} else {
+		thisLayer[label] = e;
+	}
+};
+// 获取数据详情
+const getInfo = async () => {
+	let requestData = {
+		id: props.relativeId
+	};
+	const { result }: { result: any } = await baseMapDetails(requestData);
+	if (result) {
+		formData.value = { ...result };
+		configJson.value.basemaps = [
+			{
+				id: result.id,
+				name: result.name,
+				icon:
+					result.layer == "gaode"
+						? "src/assets/images/Mars3DImg/basemaps/gaode_img.png"
+						: "src/assets/images/Mars3DImg/basemaps/bd-img.png",
+				type: result.layer,
+				layer: result.layer == "gaode" ? "img_d" : "img_z",
+				saturation: result.saturation ? result.saturation : 0,
+				brightness: result.brightness ? result.brightness : 0,
+				contrast: result.contrast ? result.contrast : 0,
+				hue: result.hue ? result.hue : 0,
+				gamma: result.gamma ? result.gamma : 0,
+				show: true
+			}
+		];
+		initMars3d(configJson.value);
+	}
+};
+const initMars3d = (option: any) => {
+	console.log(666);
+	map = new mars3d.Map("mars3dContainer", option);
+
+	// 创建矢量数据图层
+	graphicLayer = new mars3d.layer.GraphicLayer();
+	map.addLayer(graphicLayer);
+};
+onMounted(async () => {
+	await getInfo();
+});
+onUnmounted(() => {
+	map = null;
+	thisLayer = null;
+	graphicLayer = null;
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue
index 9369cc8..26dd1ac 100644
--- a/src/views/goverment/largeScreen/index.vue
+++ b/src/views/goverment/largeScreen/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<layoutTop></layoutTop>
+	<layoutTop @toCenter="toCenter"></layoutTop>
 	<div class="map-content" id="map-content">
 		<div id="mars3dContainer" class="mars3d-container"></div>
 		<!-- 搜索框 -->
@@ -243,6 +243,8 @@ import MapPrint from "./components/mapPrint.vue";
 import FlyRoam from "./components/flyRoam.vue";
 import MapMark from "./components/mapMark.vue";
 import RouteNavigation from "./components/routeNavigation.vue";
+import { getSystemConfig } from "@/api/modules/mapCommon";
+const configJson = ref<any>({});
 const screenComparisonShow = ref(false); // 分屏对比弹框
 const leftRollerList = ref<any>([]);
 const rightRollerList = ref<any>([]);
@@ -331,7 +333,16 @@ onMounted(async () => {
 		const img = await getCanvas(i + 1);
 		imgArr.push(img);
 	}
-	await initMars3d(ConfigJson.map3d);
+	let requestData = {
+		configKey: "mapConfig"
+	};
+	const { result } = await getSystemConfig(requestData);
+	if (result) {
+		configJson.value = JSON.parse(result.configValue);
+	} else {
+		configJson.value = ConfigJson.map3d;
+	}
+	await initMars3d(configJson.value);
 	await initTree();
 });
 const qingtianSkybox = new mars3d.GroundSkyBox({
@@ -390,6 +401,10 @@ const data = [
 		]
 	}
 ];
+// 再次点击首页到中心点
+const toCenter = () => {
+	map.flyHome();
+};
 // 清除分屏对比
 const clearScreenComparison = () => {
 	if (mapScreenSplit) {
diff --git a/src/views/jxjview/configManagement/index.vue b/src/views/jxjview/configManagement/index.vue
index 80ebaf1..8581e04 100644
--- a/src/views/jxjview/configManagement/index.vue
+++ b/src/views/jxjview/configManagement/index.vue
@@ -54,7 +54,9 @@
 					<el-table-column type="index" label="序号" width="120" align="center" />
 					<el-table-column prop="title" label="变量标题" align="left" width="150" />
 					<el-table-column prop="value" label="变量值" align="left">
-						<template #default="{ row }"><el-input v-model="row.value" placeholder="请输入" style="width: 70%" /></template>
+						<template #default="{ row }"
+							><el-input v-model="configJson.scene.center[row.key]" placeholder="请输入" style="width: 70%"
+						/></template>
 					</el-table-column>
 					<el-table-column prop="key" label="变量名" align="left" width="200">
 						<template #default="{ row }">
@@ -88,10 +90,12 @@ import { ElMessage } from "element-plus";
 import { useRouter } from "vue-router";
 import { getSystemConfig, updateSystemConfig } from "@/api/modules/mapCommon";
 import configData from "./config.json";
-import { config } from "process";
 const configId = ref("");
 const configJson = ref<any>({
-	control: {}
+	control: {},
+	scene: {
+		center: {}
+	}
 });
 const viewsTable = ref([
 	{ title: "初始化经度", value: "", key: "lng" }, // 180-180
@@ -121,15 +125,15 @@ const showPage = ref(false);
 // 保存修改配置
 const saveConfig = async (label: any) => {
 	console.log(controlsTable.value);
-	if (label == "control") {
-		controlsTable.value.map((item: any) => {
-			configJson.value.control[item.key] = item.value;
-		});
-	} else {
-		controlsTable.value.map((item: any) => {
-			configJson.value.center[item.key] = item.value;
-		});
-	}
+	// if (label == "control") {
+	// 	controlsTable.value.map((item: any) => {
+	// 		configJson.value.control[item.key] = item.value;
+	// 	});
+	// } else {
+	// 	controlsTable.value.map((item: any) => {
+	// 		configJson.value.scene.center[item.key] = item.value;
+	// 	});
+	// }
 	let requestData: any = { configKey: "mapConfig", configValue: JSON.stringify(configJson.value) };
 	if (configJson.value) {
 		requestData.configId = configId.value;
diff --git a/src/views/jxjview/layerManagement/components/operateDialog.vue b/src/views/jxjview/layerManagement/components/operateDialog.vue
index d8d8fdb..8707cc5 100644
--- a/src/views/jxjview/layerManagement/components/operateDialog.vue
+++ b/src/views/jxjview/layerManagement/components/operateDialog.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="overview">
-		<el-dialog :show-close="false" v-model="visible1" width="60%" @close="closeMain">
+		<el-dialog :show-close="false" v-model="visible1" width="60%" @close="closeMain" v-if="!testMapVisible">
 			<template #title>
 				<div class="title-detail">
 					<img src="@/assets/images/tableIcon/look.png" alt="" />
-					<span>新增地图层</span>
+					<span>{{ props.title }}</span>
 					<el-icon>
 						<close @click="closeMain" />
 					</el-icon>
@@ -14,18 +14,18 @@
 				<div class="basic-info">
 					<div class="form-content">
 						<div class="row">
-							<el-form-item label="底图名称:" prop="engineeringName">
-								<el-input v-model="formData.engineeringName" placeholder="请输入" disabled />
+							<el-form-item label="底图名称:" prop="name">
+								<el-input v-model="formData.name" placeholder="请输入" />
 							</el-form-item>
 						</div>
 						<div class="row">
-							<el-form-item label="图层类型:" prop="engineeringName">
-								<el-select v-model="formData.engineeringName" placeholder="请选择" style="width: 100%">
+							<el-form-item label="图层类型:" prop="layer">
+								<el-select v-model="formData.layer" placeholder="请选择" style="width: 100%">
 									<el-option v-for="item in layerTypeList" :key="item.value" :label="item.label" :value="item.value" />
 								</el-select>
 							</el-form-item>
 						</div>
-						<div class="row">
+						<!-- <div class="row">
 							<el-form-item label="实例化ImageryProvider类配置:" prop="engineeringName">
 								<div class="table-head">
 									<div class="head-key">键名</div>
@@ -86,258 +86,138 @@
 									>https://cesium.com/learn/cesiumjs/ref-doc/ImageryLayer.html</a
 								>
 							</el-form-item>
-						</div>
-						<div class="row">
+						</div> -->
+						<!-- <div class="row">
 							<el-form-item label="坐标偏移x,y:" prop="engineeringName">
-								<el-input v-model="formData.engineeringName" placeholder="请输入" disabled />
+								<el-input v-model="formData.engineeringName" placeholder="请输入" />
+							</el-form-item>
+						</div> -->
+						<div class="row">
+							<el-form-item label="是否开启反色:" prop="invertColor">
+								<el-switch v-model="formData.invertColor" style="--el-switch-on-color: #13ce66" />
 							</el-form-item>
 						</div>
 						<div class="row">
-							<el-form-item label="是否开启反色:" prop="engineeringName">
-								<el-switch v-model="formData.engineeringName" style="--el-switch-on-color: #13ce66" />
+							<el-form-item label="滤镜颜色:" prop="filterColor">
+								<el-color-picker v-model="formData.filterColor" />
 							</el-form-item>
 						</div>
 						<div class="row">
-							<el-form-item label="滤镜颜色:" prop="engineeringName">
-								<el-color-picker v-model="formData.engineeringName" />
+							<el-form-item label="是否显示:" prop="show">
+								<el-switch v-model="formData.show" style="--el-switch-on-color: #13ce66" />
 							</el-form-item>
 						</div>
-						<div class="row">
-							<el-form-item label="是否显示:" prop="engineeringName">
-								<el-switch v-model="formData.engineeringName" style="--el-switch-on-color: #13ce66" />
-							</el-form-item>
-						</div>
-						<div class="row">
+						<!-- <div class="row">
 							<el-form-item label="权重:" prop="engineeringName">
 								<el-input v-model="formData.engineeringName" placeholder="请输入" disabled />
 							</el-form-item>
-						</div>
-						<div class="row">
+						</div> -->
+						<div class="row" v-if="props.title == '编辑地图层'">
 							<el-form-item label="可视化设置预览:" prop="engineeringName">
-								<el-button type="primary" @click="visible1 = false">编辑</el-button>
+								<el-button type="primary" @click="openTestMap">编辑</el-button>
 							</el-form-item>
 						</div>
 					</div>
 				</div>
 			</el-form>
 			<template #footer>
-				<el-button type="primary" @click="visible1 = false">确定</el-button>
+				<el-button type="primary" @click="confirmSubmit">确定</el-button>
+				<el-button class="cancelButtonStyle" @click="visible1 = false">取消</el-button>
 			</template>
 		</el-dialog>
+		<!-- 图层效果编辑 -->
+		<testMap v-if="testMapVisible" :relativeId="props.relativeId" @confirm="requestDetails"></testMap>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref, watch } from "vue";
-import type { FormInstance } from "element-plus";
 import { ElMessage } from "element-plus";
-import { getDicList } from "@/api/modules/jxjview";
-import FilesUploadPlus from "@/components/FilesUploadPlus/FilesUpload.vue";
-import {
-	dangerousEngineerDetails,
-	constructionSchemeList,
-	constructionSchemeFile,
-	constructionProgressList,
-	localInspectList,
-	engineerAcceptList
-} from "@/api/modules/goverment";
-import DownLoad from "@/utils/annexDowload.ts";
+import type { FormInstance } from "element-plus";
+import { baseMapAdd, baseMapDetails, baseMapEdit } from "@/api/modules/mapCommon";
+import testMap from "@/components/testMap/index.vue";
+const testMapVisible = ref(false);
 const layerTypeList = ref([
-	{ label: "ArcGisMapServerImageryProvider", value: "ArcGisMapServerImageryProvider" },
-	{ label: "BingMapsImageryProvider", value: "BingMapsImageryProvider" },
-	{ label: "OpenStreetMapImageryProvider", value: "OpenStreetMapImageryProvider" },
-	{ label: "TileMapServiceImageryProvider", value: "TileMapServiceImageryProvider" },
-	{ label: "GoogleEarthEnterpriseImageryProvider", value: "GoogleEarthEnterpriseImageryProvider" },
-	{ label: "GoogleEarthEnterpriseMapsProvider", value: "GoogleEarthEnterpriseMapsProvider" },
-	{ label: "GridImageryProvider", value: "GridImageryProvider" },
-	{ label: "IonImageryProvider", value: "IonImageryProvider" },
-	{ label: "MapboxImageryProvider", value: "MapboxImageryProvider" },
-	{ label: "MapboxStyleImageryProvider", value: "MapboxStyleImageryProvider" },
-	{ label: "SingleTileImageryProvider", value: "SingleTileImageryProvider" },
-	{ label: "TileCoordinatesImageryProvider", value: "TileCoordinatesImageryProvider" },
-	{ label: "UrlTemplateImageryProvider", value: "UrlTemplateImageryProvider" },
-	{ label: "WebMapServiceImageryProvider", value: "WebMapServiceImageryProvider" },
-	{ label: "WebMapTileServiceImageryProvider", value: "WebMapTileServiceImageryProvider" }
+	{ label: "天地图", value: "tdt" },
+	{ label: "百度地图", value: "baidu" },
+	{ label: "高德地图", value: "gaode" },
+	{ label: "腾讯地图", value: "tencent" },
+	{ label: "OSM地图", value: "osm" },
+	{ label: "谷歌地图", value: "google" },
+	{ label: "微软Bing地图", value: "bing" },
+	{ label: "图层组", value: "group" },
+	{ label: "空白图层", value: "empty" }
 ]);
 const props = defineProps({
 	operateVisible: Boolean,
-	relativeId: String
+	relativeId: String,
+	title: String
 });
-const emits = defineEmits(["update:operateVisible"]);
-const arrOne = ref<any>([]);
-const arrFive = ref<any>([]);
-const arrSeven = ref<any>([]);
-const arrEight = ref<any>([]);
-const tabPosition = ref(0);
-const documentDataIndex = ref(0);
-const current = ref({
-	files: []
-});
-const typeList = ref([]);
-const acceptTypeList = ref([]);
+const emits = defineEmits(["update:operateVisible", "confirm"]);
 const rules = ref({
-	engineeringName: [
+	name: [
 		{
 			required: true,
 			message: "请输入",
 			trigger: "blur"
 		}
 	],
-	type: [
+	layer: [
 		{
 			required: true,
-			message: "请输入",
+			message: "请选择",
 			trigger: "change"
 		}
-	],
-	typeDescribe: [
-		{
-			required: true,
-			message: "请输入",
-			trigger: "blur"
-		}
 	]
 });
 const formRef = ref<FormInstance>();
-const formData = ref<any>({
-	technicalDisclosureFile: [],
-	securityConstructionSchemeFile: [],
-	specialConstructionSchemeFile: []
-});
+const formData = ref<any>({});
 const visible1 = ref(false);
-// 验收类型文本转换;
-const textTransform = (id: any) => {
-	let findItem: any = acceptTypeList.value.find(item => item.value == id);
-	return findItem?.label;
+// 打开测试地图
+const openTestMap = () => {
+	testMapVisible.value = true;
 };
-// 获取附件列表
-const getConstructionSchemeList = async () => {
-	const res = await constructionSchemeList({ dangerousEngineeringId: props.relativeId, type: tabPosition.value });
-	console.log(res);
-	if (res.result && res.result.length > 0) {
-		arrOne.value = res.result;
-	} else {
-		arrOne.value = [];
-	}
+// 刷新详情数据
+const requestDetails = async () => {
+	testMapVisible.value = false;
+	getInfo();
 };
-// 获取施工进度列表
-const getConstructionProgressList = async () => {
-	const res = await constructionProgressList({ dangerousEngineeringId: props.relativeId });
-	console.log(res);
-	if (res.result && res.result.length > 0) {
-		arrFive.value = res.result;
-	} else {
-		arrFive.value = [];
-	}
-};
-// 获取现场巡视列表
-const getLocalInspectList = async () => {
-	const res = await localInspectList({ dangerousEngineeringId: props.relativeId });
-	console.log(res);
-	if (res.result && res.result.length > 0) {
-		arrSeven.value = res.result;
-	} else {
-		arrSeven.value = [];
-	}
-};
-// 获取危大工程验收列表
-const getengineerAcceptList = async () => {
-	const res = await engineerAcceptList({ dangerousEngineeringId: props.relativeId });
-	console.log(res);
-	if (res.result && res.result.length > 0) {
-		arrEight.value = res.result;
-	} else {
-		arrEight.value = [];
-	}
-};
-// 获取危大工程详情
-const getDetailsData = async () => {
-	const res = await dangerousEngineerDetails({ id: props.relativeId });
-	console.log(res);
-	if (res && res.result) {
-		formData.value = { ...res.result };
-	}
-	if (formData.value.constructionPlanStartTime && formData.value.constructionPlanEndTime) {
-		formData.value.planRange = [formData.value.constructionPlanStartTime, formData.value.constructionPlanEndTime];
-	}
-	if (formData.value.constructionStartTime && formData.value.constructionEndTime) {
-		formData.value.constructionRange = [formData.value.constructionStartTime, formData.value.constructionEndTime];
-	}
-};
-// tabs项点击时
-const handleClick = (pane: any) => {
-	tabPosition.value = pane.props.name;
-	const listOperation = [getConstructionSchemeList, getConstructionProgressList, getLocalInspectList, getengineerAcceptList];
-	if (tabPosition.value < 5 || tabPosition.value == 8) {
-		listOperation[0]();
-	} else {
-		listOperation[tabPosition.value - 4]();
-	}
-};
-// 附件上传改变
-const handlechange = e => {
-	console.log(e);
-	current.value.files = e.map(item => {
-		item.label = current.value.dictLabel;
-		return item;
-	});
-	console.log(current.value.files);
-	arrOne.value[documentDataIndex.value].fileList = current.value.files;
-};
-// 危大工程资料
-const onDownLoad = (key: any) => {
-	console.log(key);
-	console.log(formData.value[key]);
-	let val = JSON.parse(formData.value[key]);
-	if (val && val.length > 0) {
-		DownLoad(val);
-	} else {
-		ElMessage.error("暂无可下载文件");
-	}
-};
-// 表格附件下载
-const onTableDownLoad = async (row: any) => {
-	console.log(row);
+// 获取数据详情
+const getInfo = async () => {
 	let requestData = {
-		id: row.id
+		id: props.relativeId
 	};
-	const { result } = await constructionSchemeFile(requestData);
-	console.log(result);
-	if (result && result.length > 0) {
-		DownLoad(result);
-	} else {
-		ElMessage.error("暂无可下载文件");
+	const { result } = await baseMapDetails(requestData);
+	if (result) {
+		formData.value = { ...result };
 	}
 };
-// 获取验收类型字典
-const getAcceptTypeList = async () => {
-	const { result } = await getDicList({ dictType: "check_accept_type" });
-	if (result.length > 0) {
-		let arr: any = [];
-		result.map(item => {
-			arr.push({
-				label: item.dictValue,
-				value: item.dictLabel
-			});
-		});
-		acceptTypeList.value.length = 0;
-		acceptTypeList.value.push(...arr);
-	}
-};
-const getTypeDicMainList = async () => {
-	// 获取起重机械设备类型字典
-	const { result } = await getDicList({ dictType: "dangerous_engineer_type" });
-	if (result.length > 0) {
-		let arr: any = [];
-		result.map(item => {
-			arr.push({
-				label: item.dictValue,
-				value: item.dictLabel
-			});
-		});
-		typeList.value.length = 0;
-		typeList.value.push(...arr);
-	}
+// 新增确认
+const confirmSubmit = () => {
+	const formEl = formRef.value;
+	if (!formEl) return;
+	formEl.validate(async (valid, fields) => {
+		if (valid) {
+			let requestData = {
+				...formData.value
+			};
+			if (props.title == "新增地图层") {
+				const res: any = await baseMapAdd(requestData);
+				if (res.code == 200) {
+					ElMessage.success("操作成功");
+				}
+			} else if (props.title == "编辑地图层") {
+				const res: any = await baseMapEdit(requestData);
+				if (res.code == 200) {
+					ElMessage.success("操作成功");
+				}
+			}
+			visible1.value = false;
+			emits("confirm");
+		} else {
+			console.log("error submit!", fields);
+		}
+	});
 };
 // 关闭两个对话框
 const closeMain = () => {
@@ -348,15 +228,15 @@ watch(
 	() => props.operateVisible,
 	n => {
 		if (n) {
-			getAcceptTypeList();
-			getTypeDicMainList();
-			getDetailsData();
-			getConstructionSchemeList();
+			if (props.title == "新增地图层") {
+				formData.value = {};
+			} else if (props.title == "编辑地图层") {
+				getInfo();
+			}
+			visible1.value = n;
 			setTimeout(function () {
 				formRef.value?.clearValidate();
-			}, 200);
-			visible1.value = n;
-			tabPosition.value = 0;
+			}, 20);
 		}
 	}
 );
@@ -374,14 +254,6 @@ onMounted(() => {});
 	display: flex;
 	align-items: center;
 }
-@mixin title {
-	font-size: 14px;
-	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-	font-weight: 400;
-	color: #333333;
-	border-left: 2px solid #008bff;
-	padding-left: 5px;
-}
 .overview {
 	:deep() {
 		.el-dialog__body {
@@ -451,115 +323,7 @@ onMounted(() => {});
 					}
 				}
 			}
-			.switch-box {
-				width: 380px;
-				display: flex;
-				align-items: center;
-				> span {
-					margin-right: auto;
-					margin-left: 9px;
-				}
-			}
-			.tabs-option {
-				width: 100%;
-				.table {
-					width: 100%;
-					// height: 310px;
-					margin-top: 15px;
-					:deep(.el-table) {
-						height: 100%;
-					}
-					.face-img {
-						width: 100%;
-						align-self: flex-start;
-						:deep(.face-uploader .el-upload) {
-							border: 1px dashed #d9d9d9 !important;
-							border-radius: 6px !important;
-							cursor: pointer !important;
-							position: relative !important;
-							overflow: hidden !important;
-						}
-						.face-uploader .el-upload:hover {
-							border-color: #409eff !important;
-						}
-						:deep(.el-icon) {
-							font-size: 24px;
-							color: #8c939d;
-							width: 35px;
-							height: 35px;
-							line-height: 35px;
-							text-align: center;
-						}
-						.face-avatar {
-							width: 35px;
-							height: 35px;
-							display: block;
-						}
-					}
-					.showImg {
-						width: 35px;
-						height: 35px;
-						border-radius: 6px;
-					}
-					.table-empty {
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						height: 150px;
-						flex: 1;
-						flex-direction: column;
-						color: #999;
-					}
-				}
-			}
 		}
 	}
 }
-:deep(.el-tabs--card > .el-tabs__header) {
-	border-bottom: none;
-}
-:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
-	width: 100%;
-	background: #f8f8f8;
-	border: 0;
-}
-:deep(.el-tabs__nav-scroll) {
-	display: flex;
-	.el-tabs__item {
-		width: 50%;
-		text-align: center;
-		// background: #f8f8f8;
-		color: #333;
-		// border: 1px solid #e5e5e5;
-		// border-radius: 8px;
-	}
-	.el-tabs__item.is-active {
-		background-color: #008bff;
-		color: #fff;
-	}
-}
-:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
-	border-bottom-color: #008bff !important;
-}
-:deep(#tab-0) {
-	border-radius: 4px 0 0 4px;
-	border: 1px solid #e5e5e5;
-	border-right: 0;
-}
-:deep() {
-	#tab-1,
-	#tab-2,
-	#tab-3,
-	#tab-4,
-	#tab-5,
-	#tab-6,
-	#tab-7 {
-		border: 1px solid #e5e5e5;
-		border-right: 0;
-	}
-}
-:deep(#tab-8) {
-	border: 1px solid #e5e5e5;
-	border-radius: 0 4px 4px 0;
-}
 </style>
diff --git a/src/views/jxjview/layerManagement/index.vue b/src/views/jxjview/layerManagement/index.vue
index 4066789..deab623 100644
--- a/src/views/jxjview/layerManagement/index.vue
+++ b/src/views/jxjview/layerManagement/index.vue
@@ -2,7 +2,7 @@
 	<div class="table-box">
 		<ProTable
 			ref="proTable"
-			title="用户列表"
+			title="地图层列表"
 			:columns="columns"
 			:requestApi="getTableList"
 			:initParam="initParam"
@@ -17,60 +17,65 @@
 			<template #formButton="scope">
 				<el-button class="addButtonStyle" @click="handleAddItem()">新增</el-button>
 			</template>
+			<!-- 是否显示 -->
+			<template #show="scope">
+				<el-switch v-model="scope.row.show" disabled style="--el-switch-on-color: #13ce66" />
+			</template>
+			<!-- 是否开启反色 -->
+			<template #invertColor="scope">
+				<el-switch v-model="scope.row.invertColor" disabled style="--el-switch-on-color: #13ce66" />
+			</template>
 			<!-- 表格操作 -->
 			<template #operation="scope">
-				<div class="operate-option"></div>
-			</template>
-			<template #state="{ row }">
-				<span :class="row.state === 1 ? '' : 'redText'">{{ row.state === 1 ? "启用" : "禁用" }}</span>
-			</template>
-			<template #authProject="{ row }">
-				{{ (row.installProject ? row.installProject : 0) + "/" + row.authProject }}
-			</template>
-			<template #diffDay="{ row }">
-				{{ row.expireTime === null ? "永久有效" : row.diffDay }}
+				<div class="operate-option">
+					<el-button type="primary" link @click="handleEditItem(scope.row)">
+						<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
+						<span>编辑</span>
+					</el-button>
+					<el-button type="danger" link :icon="Delete" @click="handleDeleteItem(scope.row)">删除</el-button>
+				</div>
 			</template>
 		</ProTable>
 		<!-- 图层新增/编辑 -->
-		<operateDialog v-model:operateVisible="operateVisible" :relativeId="relativeId"></operateDialog>
+		<operateDialog
+			v-model:operateVisible="operateVisible"
+			:title="title"
+			:relativeId="relativeId"
+			@confirm="requestTable"
+		></operateDialog>
 	</div>
 </template>
 
 <script setup lang="tsx" name="jxjGovernMent">
-import { ref, reactive, onMounted, watch, nextTick } from "vue";
-import { ElMessage, ElMessageBox, FormRules, FormInstance } from "element-plus";
-import { useRouter } from "vue-router";
-import { User } from "@/api/interface";
+import { ref, reactive, onMounted } from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
 import ProTable from "@/components/ProTable/index.vue";
-import { getGovermentTreeList } from "@/api/modules/jxjview";
 import operateDialog from "./components/operateDialog.vue";
+import { baseMapPage } from "@/api/modules/mapCommon";
+import { Delete } from "@element-plus/icons-vue";
+import { useHandleData } from "@/hooks/useHandleData";
+import { jxj_User } from "@/api/types";
+import { baseMapDelete } from "@/api/modules/mapCommon";
 const relativeId = ref("");
 const operateVisible = ref(false);
 const treeProps = ref({ children: "children", hasChildren: "hasChildren" });
-const router = useRouter();
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const proTable = ref();
 const title = ref("");
 
-const visible = ref(false);
-const formData = ref({});
-
 // 表格配置项
 const columns: ColumnProps[] = [
 	{
-		prop: "governmentName",
-		label: "ID",
-		search: { el: "input" }
+		prop: "id",
+		label: "ID"
 	},
 	// 多级 prop
-	{ prop: "createTime", label: "底图名称" },
-	{ prop: "governmentTel", label: "是否开启反色" },
-	{ prop: "state", label: "创建时间" },
-	{ prop: "diffDay", label: "更新时间" },
-	{ prop: "authProject", label: "是否显示" },
-	{ prop: "authProject", label: "权重" },
-	{ prop: "operation", label: "操作", fixed: "right", width: 260 }
+	{ prop: "name", label: "底图名称", search: { el: "input" } },
+	{ prop: "invertColor", label: "是否开启反色" },
+	{ prop: "createTime", label: "创建时间" },
+	{ prop: "updateTime", label: "更新时间" },
+	{ prop: "show", label: "是否显示" },
+	{ prop: "operation", label: "操作", fixed: "right", width: 160 }
 ];
 // const AuthIdData = ref([]);
 
@@ -78,11 +83,25 @@ const columns: ColumnProps[] = [
 const initParam = reactive({
 	// type: 1
 });
+// 刷新列表数据
+const requestTable = () => {
+	proTable.value.getTableList();
+};
+// 删除底图
+const handleDeleteItem = async (params: jxj_User.ResUserList) => {
+	await useHandleData(baseMapDelete, { id: params.id }, `删除【${params.name}】`);
+	proTable.value.getTableList();
+};
+// 编辑
+const handleEditItem = (row: any) => {
+	operateVisible.value = true;
+	title.value = "编辑地图层";
+	relativeId.value = row.id;
+};
 // 添加数据按钮
 const handleAddItem = () => {
 	operateVisible.value = true;
-	title.value = "新增市级政务";
-	formData.value = reactive({});
+	title.value = "新增地图层";
 };
 // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
 // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
@@ -100,48 +119,25 @@ const dataCallback = (data: any) => {
 // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
 const getTableList = (params: any) => {
 	let newParams = JSON.parse(JSON.stringify(params));
-	return getGovermentTreeList(newParams);
+	return baseMapPage(newParams);
 };
 onMounted(async () => {});
 </script>
 <style scoped lang="scss">
+.table-box {
+	position: relative;
+}
 .operate-option {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	:deep() {
 		.el-button + .el-button {
 			margin-left: 0px;
 		}
 	}
 }
-.littleTitle {
-	border-left: 3px solid #008bff;
-	padding-left: 6px;
-}
-.allModular {
-	width: 100%;
-	margin: 10px;
-	display: flex;
-	flex-wrap: wrap;
-	.modularItem {
-		padding-right: 50px;
-	}
-}
-.select-all {
-	display: flex;
-	flex-direction: column;
-	.radio-select {
-		display: flex;
-		align-items: center;
-	}
-}
 :deep(.el-dialog__footer) {
 	text-align: center;
 }
-:focus-visible {
-	outline: none;
-}
-// .redText {
-// 	color: red;
-// }
 </style>