From 3529d7fa6ec24bfb66964d7ebe028f03300ac636 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Thu, 7 Dec 2023 18:04:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E=E4=BB=A5=E5=8F=8ABUG?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/index.html                               |   2 +-
 src/api/modules/jxjview.ts                    |   8 +-
 src/api/modules/mapCommon.ts                  |  51 +++-
 src/assets/json/dynamicRouter.json            |  14 ++
 .../goverment/frontLargeScreen/index.vue      |  72 +++---
 .../largeScreen/components/equipmentAdd.vue   |  82 +++---
 .../largeScreen/components/modelLineMark.vue  |  37 ++-
 src/views/goverment/largeScreen/index.vue     |  66 ++---
 src/views/jxjview/fileManagement/index.vue    | 237 ++++++++++++++++++
 9 files changed, 443 insertions(+), 126 deletions(-)
 create mode 100644 src/views/jxjview/fileManagement/index.vue
diff --git a/dist/index.html b/dist/index.html
index 4018c14..fe7411d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title></title><script type="module" crossorigin src="./assets/js/index-87fb5164.js"></script><link rel="stylesheet" href="./assets/css/index-3a232b61.css"></head><body><div id="app"><style>#app,body,html{width:100%;height:100%;padding:0;margin:0}.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.loading-box .loading-wrap{display:flex;align-items:center;justify-content:center;padding:98px}.dot{position:relative;box-sizing:border-box;display:inline-block;width:32px;height:32px;font-size:32px;transform:rotate(45deg);animation:ant-rotate 1.2s infinite linear}.dot i{position:absolute;display:block;width:14px;height:14px;background-color:#409eff;border-radius:100%;opacity:.3;transform:scale(.75);transform-origin:50% 50%;animation:ant-spin-move 1s infinite linear alternate}.dot i:first-child{top:0;left:0}.dot i:nth-child(2){top:0;right:0;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;animation-delay:1.2s}@keyframes ant-rotate{to{transform:rotate(405deg)}}@keyframes ant-spin-move{to{opacity:1}}</style><div class="loading-box"><div class="loading-wrap"><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div></div></div><script>const globalState = JSON.parse(window.localStorage.getItem("Global3DState"));
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title></title><script type="module" crossorigin src="./assets/js/index-d946b612.js"></script><link rel="stylesheet" href="./assets/css/index-3a232b61.css"></head><body><div id="app"><style>#app,body,html{width:100%;height:100%;padding:0;margin:0}.loading-box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.loading-box .loading-wrap{display:flex;align-items:center;justify-content:center;padding:98px}.dot{position:relative;box-sizing:border-box;display:inline-block;width:32px;height:32px;font-size:32px;transform:rotate(45deg);animation:ant-rotate 1.2s infinite linear}.dot i{position:absolute;display:block;width:14px;height:14px;background-color:#409eff;border-radius:100%;opacity:.3;transform:scale(.75);transform-origin:50% 50%;animation:ant-spin-move 1s infinite linear alternate}.dot i:first-child{top:0;left:0}.dot i:nth-child(2){top:0;right:0;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;animation-delay:1.2s}@keyframes ant-rotate{to{transform:rotate(405deg)}}@keyframes ant-spin-move{to{opacity:1}}</style><div class="loading-box"><div class="loading-wrap"><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div></div></div><script>const globalState = JSON.parse(window.localStorage.getItem("Global3DState"));
 			if (globalState) {
 				const color = globalState.themeConfig.primary;
 				const isDark = globalState.themeConfig.isDark;
diff --git a/src/api/modules/jxjview.ts b/src/api/modules/jxjview.ts
index 8f20d9f..523c08c 100644
--- a/src/api/modules/jxjview.ts
+++ b/src/api/modules/jxjview.ts
@@ -76,7 +76,13 @@ export const getGoverForm = (params: User.ReqUserParams) => {
 // 字典 ！！！！！！！！！！！！！！
 // 查询
 export const getDictionaryList = (params: User.ReqUserParams) => {
-	return http.post<ResPage<User.ResUserList>>(BASEURL + `/xmgl/systemDictType/page`, params);
+	let requestData: any = { ...params };
+	delete requestData.pageNo;
+	delete requestData.pageSize;
+	return http.post<ResPage<User.ResUserList>>(
+		BASEURL + `/xmgl/systemDictType/page?current=${params.pageNo}&size=${params.pageSize}`,
+		requestData
+	);
 };
 
 // 查询detail
diff --git a/src/api/modules/mapCommon.ts b/src/api/modules/mapCommon.ts
index bda5f3d..e3716b8 100644
--- a/src/api/modules/mapCommon.ts
+++ b/src/api/modules/mapCommon.ts
@@ -20,7 +20,10 @@ export const updateSystemConfig = (params: any) => {
 };
 // 底图图层分页列表
 export const baseMapPage = (params: any) => {
-	return http.post(BASEURL + `/base/baseMap/page`, params);
+	let requestData = { ...params };
+	delete requestData.pageNo;
+	delete requestData.pageSize;
+	return http.post(BASEURL + `/base/baseMap/page?current=${params.pageNo}&size=${params.pageSize}`, requestData);
 };
 // 底图图层列表
 export const baseMapList = (params: any) => {
@@ -45,7 +48,10 @@ export const baseMapDelete = (params: any) => {
 
 // 白膜图层分页列表
 export const albugineaMapPage = (params: any) => {
-	return http.post(BASEURL + `/base/tilesetLayer/page`, params);
+	let requestData = { ...params };
+	delete requestData.pageNo;
+	delete requestData.pageSize;
+	return http.post(BASEURL + `/base/tilesetLayer/page?current=${params.pageNo}&size=${params.pageSize}`, requestData);
 };
 // 白膜图层列表
 export const albugineaMapList = (params: any) => {
@@ -70,7 +76,10 @@ export const albugineaMapDelete = (params: any) => {
 
 // 点坐标效果分页列表
 export const diffuseWallPage = (params: any) => {
-	return http.post(BASEURL + `/base/diffuseWall/page`, params);
+	let requestData = { ...params };
+	delete requestData.pageNo;
+	delete requestData.pageSize;
+	return http.post(BASEURL + `/base/diffuseWall/page?current=${params.pageNo}&size=${params.pageSize}`, requestData);
 };
 // 点坐标效果列表
 export const diffuseWallList = (params: any) => {
@@ -95,7 +104,10 @@ export const diffuseWallDelete = (params: any) => {
 
 // 线效果分页列表
 export const polylineCombinePage = (params: any) => {
-	return http.post(BASEURL + `/base/polylineCombine/page`, params);
+	let requestData = { ...params };
+	delete requestData.pageNo;
+	delete requestData.pageSize;
+	return http.post(BASEURL + `/base/polylineCombine/page?current=${params.pageNo}&size=${params.pageSize}`, requestData);
 };
 // 线效果列表
 export const polylineCombineList = (params: any) => {
@@ -120,7 +132,10 @@ export const polylineCombineDelete = (params: any) => {
 
 // 模型gltr分页列表
 export const gltfModelPage = (params: any) => {
-	return http.post(BASEURL + `/base/gltfModel/page`, params);
+	let requestData = { ...params };
+	delete requestData.pageNo;
+	delete requestData.pageSize;
+	return http.post(BASEURL + `/base/gltfModel/page?current=${params.pageNo}&size=${params.pageSize}`, requestData);
 };
 // 模型gltr列表
 export const gltfModelList = (params: any) => {
@@ -172,3 +187,29 @@ export const equipmentEdit = (params: any) => {
 export const equipmentDelete = (params: any) => {
 	return http.post(BASEURL + `/base/monitorDev/delete`, params);
 };
+
+// 设备播放资源获取
+export const equipmentUrlGet = (params: any) => {
+	return http.post(BASEURL + `/base/monitorDev/queryInfo`, params);
+};
+
+// 文件管理
+// 文件管理列表
+export const fileDataList = (params: any) => {
+	let requestData = { ...params };
+	delete requestData.pageNo;
+	delete requestData.pageSize;
+	return http.post(BASEURL + `/xmgl/annexFile/page?current=${params.pageNo}&size=${params.pageSize}`, requestData);
+};
+// 文件管理新增
+export const fileDataAdd = (params: any) => {
+	return http.post(BASEURL + `/xmgl/annexFile/add`, params);
+};
+// 文件管理编辑
+export const fileDataEdit = (params: any) => {
+	return http.post(BASEURL + `/xmgl/annexFile/edit`, params);
+};
+// 文件管理新增
+export const fileDataDelete = (params: any) => {
+	return http.post(BASEURL + `/xmgl/annexFile/delete`, params);
+};
diff --git a/src/assets/json/dynamicRouter.json b/src/assets/json/dynamicRouter.json
index 16df0a9..44d9d6f 100644
--- a/src/assets/json/dynamicRouter.json
+++ b/src/assets/json/dynamicRouter.json
@@ -98,6 +98,20 @@
 				"isAffix": false,
 				"isKeepAlive": true
 			}
+		},
+		{
+			"path": "/fileManagement",
+			"name": "fileManagement",
+			"component": "/jxjview/fileManagement/index",
+			"meta": {
+				"icon": "系统字典",
+				"title": "文件管理",
+				"isLink": "",
+				"isHide": false,
+				"isFull": false,
+				"isAffix": false,
+				"isKeepAlive": true
+			}
 		}
 	],
 	"message": "成功"
diff --git a/src/views/goverment/frontLargeScreen/index.vue b/src/views/goverment/frontLargeScreen/index.vue
index 0822701..2561ea1 100644
--- a/src/views/goverment/frontLargeScreen/index.vue
+++ b/src/views/goverment/frontLargeScreen/index.vue
@@ -300,7 +300,8 @@ import {
 	gltfModelList,
 	updateSystemConfig,
 	equipmentList,
-	equipmentStyleGet
+	equipmentStyleGet,
+	equipmentUrlGet
 } from "@/api/modules/mapCommon";
 import { getDicList } from "@/api/modules/jxjview";
 import * as Vue from "vue";
@@ -575,13 +576,13 @@ const getEquipmentList = async (id: any) => {
 	const resStyle = await popupStyle(id);
 	if (res.result && res.result.length > 0) {
 		let arr: any = res.result;
-		arr.map(item => {
+		arr.map(async (item: any) => {
 			const graphicImg = new mars3d.graphic.DivGraphic({
 				id: item.monitorId,
 				position: [+item.lng, +item.lat, +item.alt],
 				style: {
 					html: () => {
-						const dom = initVue3Popup(resPointStyle?.codeValue, { name: item.name });
+						const dom = initVue3Popup(resPointStyle?.codeValue, { data: { name: item.name } });
 						return dom;
 					},
 					offsetX: +resPointStyle?.offsetX,
@@ -590,19 +591,23 @@ const getEquipmentList = async (id: any) => {
 				}
 			});
 			graphicLayer.addGraphic(graphicImg);
-			graphicImg.bindPopup(
-				(event: any) => {
-					const attr = event.graphic.attr || {};
-					if (!attr) {
-						return;
-					}
-					const dom = initVue3Popup(resStyle?.codeValue, { name: "你好啊" });
-					// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
-					console.log(dom);
-					return dom;
-				},
-				{ offsetY: +resStyle?.offsetY, offsetX: +resStyle?.offsetX }
-			);
+			let urlData: any = "";
+			if (item.url) {
+				urlData = await equipmentUrlGet({ monitorId: item.monitorId });
+				graphicImg.bindPopup(
+					(event: any) => {
+						const attr = event.graphic.attr || {};
+						if (!attr) {
+							return;
+						}
+						const dom = initVue3Popup(resStyle?.codeValue, { data: urlData ? urlData.result : {} });
+						// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
+						console.log(dom);
+						return dom;
+					},
+					{ offsetY: +resStyle?.offsetY, offsetX: +resStyle?.offsetX }
+				);
+			}
 		});
 	}
 	console.log(res);
@@ -629,6 +634,9 @@ const loadModel = async (obj: any) => {
 		popup: "all"
 	});
 	map.addLayer(tiles3dLayer);
+	// tiles3dLayer.on(mars3d.EventType.click, function (event) {
+	// 	console.log("矢量模型数据对象加载完成", event);
+	// });
 	setTimeout(function () {
 		// tiles3dLayer.bindPopup("all");
 		let dataArr: any = [];
@@ -1269,11 +1277,7 @@ const initMars3d = (option: any) => {
 	map.addControl(distanceLegend);
 	distanceLegend.on(mars3d.EventType.change, function (event) {
 		console.log("比例尺发生变化", event);
-		if (event.distance > 1000) {
-			showModelLine();
-		} else {
-			closeModelLine();
-		}
+		modelLineStatus(event.distance);
 	});
 	// 获取配置文件底图数据
 	getBasicMaps();
@@ -1284,23 +1288,17 @@ const initMars3d = (option: any) => {
 	// 查询模型线效果
 	getModelLine();
 };
-// 隐藏模型线效果并显示模型
-const closeModelLine = () => {
-	modelLineList.value.map(item => {
-		let graphic = graphicLayer.getGraphicById(item.id);
-		graphic.show = false;
+// 模型线效果设置的视距隐藏或显示模型
+const modelLineStatus = (distance: any) => {
+	modelLineList.value.map((item: any) => {
+		if (item.distance && distance >= +item.distance * 1000) {
+			let graphic = graphicLayer.getGraphicById(item.id);
+			graphic.show = true;
+		} else {
+			let graphic = graphicLayer.getGraphicById(item.id);
+			graphic.show = false;
+		}
 	});
-	let modelGraphic = map.getLayerById("bridge-model");
-	modelGraphic.show = true;
-};
-// 显示模型线效果并隐藏模型
-const showModelLine = () => {
-	modelLineList.value.map(item => {
-		let graphic = graphicLayer.getGraphicById(item.id);
-		graphic.show = true;
-	});
-	let modelGraphic = map.getLayerById("bridge-model");
-	modelGraphic.show = false;
 };
 // 获取模型线效果
 const getModelLine = async () => {
diff --git a/src/views/goverment/largeScreen/components/equipmentAdd.vue b/src/views/goverment/largeScreen/components/equipmentAdd.vue
index 80e0060..a7bde3f 100644
--- a/src/views/goverment/largeScreen/components/equipmentAdd.vue
+++ b/src/views/goverment/largeScreen/components/equipmentAdd.vue
@@ -100,6 +100,12 @@
 						<span v-else>{{ row.name }}</span>
 					</template>
 				</el-table-column>
+				<el-table-column prop="url" align="center" label="资源地址">
+					<template #default="{ row }">
+						<el-input v-model="row.url" v-if="row.isEdit" />
+						<span v-else>{{ row.url }}</span>
+					</template>
+				</el-table-column>
 				<el-table-column align="center" label="操作">
 					<template #default="scope">
 						<span class="primaryBtn" v-if="scope.row.isEdit" @click="saveEdit(scope.row)">保存</span>
@@ -138,7 +144,8 @@ import {
 	equipmentList,
 	equipmentAdd,
 	equipmentEdit,
-	equipmentDelete
+	equipmentDelete,
+	equipmentUrlGet
 } from "@/api/modules/mapCommon";
 const basicConfig = ref({
 	popupCode: "",
@@ -240,6 +247,7 @@ const getStyle = async () => {
 const saveEdit = async (row: any) => {
 	let requestData = {
 		name: row.name,
+		url: row.url,
 		monitorId: row.monitorId,
 		category: props.equipTypeDictLabel
 	};
@@ -254,7 +262,7 @@ const saveEdit = async (row: any) => {
 		graphic.setStyle({
 			html: () => {
 				const dom = initVue3Popup(pointPreviewComp.value, {
-					name: row.name
+					data: { name: row.name }
 				});
 				// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
 				return dom;
@@ -263,6 +271,23 @@ const saveEdit = async (row: any) => {
 			offsetY: +pointConfig.value.offsetY,
 			distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
 		});
+		console.log(row);
+		if (row.url) {
+			console.log(graphic);
+			onBlur();
+			const urlData = await equipmentUrlGet({ monitorId: row.monitorId });
+			graphic.bindPopup(
+				(event: any) => {
+					console.log(event);
+					const dom = initVue3Popup(previewComp.value, { data: urlData.result });
+					// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
+					return dom;
+				},
+				{ offsetY: +basicConfig.value.offsetY, offsetX: +basicConfig.value.offsetX }
+			);
+		} else {
+			graphic.unbindPopup();
+		}
 	}
 	row.isEdit = false;
 };
@@ -292,35 +317,12 @@ const newPoint = () => {
 		}
 	});
 };
-// 根据不同类型设置样式
-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 = async (point: any) => {
 	const graphicImg = new mars3d.graphic.DivGraphic({
 		position: [point.lng, point.lat, point.alt],
 		style: {
 			html: () => {
-				const dom = initVue3Popup(pointPreviewComp.value, { name: "你好啊" });
+				const dom = initVue3Popup(pointPreviewComp.value, { data: { name: "你好啊" } });
 				// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
 				return dom;
 			},
@@ -339,18 +341,18 @@ const addRandomGraphicByCount = async (point: any) => {
 		// 	verticalOrigin: Cesium.VerticalOrigin.CENTER
 		// }
 	});
-	graphicImg.bindPopup(
-		(event: any) => {
-			const attr = event.graphic.attr || {};
-			if (!attr) {
-				return;
-			}
-			const dom = initVue3Popup(previewComp.value, { name: "你好啊" });
-			// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
-			return dom;
-		},
-		{ offsetY: +basicConfig.value.offsetY, offsetX: +basicConfig.value.offsetX }
-	);
+	// graphicImg.bindPopup(
+	// 	(event: any) => {
+	// 		const attr = event.graphic.attr || {};
+	// 		if (!attr) {
+	// 			return;
+	// 		}
+	// 		const dom = initVue3Popup(previewComp.value, { data: { name: "你好啊" } });
+	// 		// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
+	// 		return dom;
+	// 	},
+	// 	{ offsetY: +basicConfig.value.offsetY, offsetX: +basicConfig.value.offsetX }
+	// );
 	graphicLayer.addGraphic(graphicImg);
 	console.log(graphicImg);
 	const obj = {
@@ -359,7 +361,8 @@ const addRandomGraphicByCount = async (point: any) => {
 		lng: point.lng,
 		lat: point.lat,
 		alt: point.alt,
-		isEdit: false
+		isEdit: false,
+		url: ""
 	};
 	let requestData = {
 		name: obj.name,
@@ -456,6 +459,7 @@ onMounted(async () => {
 		addRandomGraphicByCount(e.graphic.point);
 	});
 	await getPointStyle();
+	await getStyle();
 });
 onUnmounted(() => {
 	map = null;
diff --git a/src/views/goverment/largeScreen/components/modelLineMark.vue b/src/views/goverment/largeScreen/components/modelLineMark.vue
index 0b00415..b481ad1 100644
--- a/src/views/goverment/largeScreen/components/modelLineMark.vue
+++ b/src/views/goverment/largeScreen/components/modelLineMark.vue
@@ -24,6 +24,12 @@
 						<span v-else>{{ row.color }}</span>
 					</template>
 				</el-table-column>
+				<el-table-column prop="distance" align="center" label="视距(km)">
+					<template #default="{ row }">
+						<el-input v-model="row.distance" v-if="row.isEdit" />
+						<span v-else>{{ row.distance }}</span>
+					</template>
+				</el-table-column>
 				<el-table-column align="center" label="操作">
 					<template #default="scope">
 						<span class="primaryBtn" v-if="scope.row.isEdit" @click="saveEdit(scope.row)">保存</span>
@@ -71,7 +77,8 @@ const addMark = async (obj: any) => {
 	const item = {
 		color: formData.value.lineColor,
 		id: obj.id,
-		points: [] as any
+		points: [] as any,
+		distance: ""
 	};
 	obj.points.map((val: any) => {
 		item.points.push([val.lng, val.lat, val.alt]);
@@ -162,15 +169,25 @@ const delteMark = async (row: any, index: number) => {
 };
 // 保存编辑信息
 const saveEdit = async (row: any) => {
-	let graphic = graphicLayer.getGraphicById(row.id);
-	console.log(graphic, "子图像");
-	if (!graphic) {
-		graphic = parentGraphicLayer.getGraphicById(row.id);
-	}
-	graphic.setStyle({
-		color: row.color
-	});
+	// 记录到接口
+	console.log(tableData.value);
 	row.isEdit = false;
+	let requestData: any = { configKey: "modelLineConfig", configValue: JSON.stringify(tableData.value) };
+	await getConfig();
+	requestData.configId = bookMarkId.value;
+	const res = await updateSystemConfig(requestData);
+	console.log(res);
+	if (res.code == 200) {
+		ElMessage.success("操作成功");
+		let graphic = graphicLayer.getGraphicById(row.id);
+		console.log(graphic, "子图像");
+		if (!graphic) {
+			graphic = parentGraphicLayer.getGraphicById(row.id);
+		}
+		graphic.setStyle({
+			color: row.color
+		});
+	}
 };
 // 绘制曲线
 const drawCurve = (clampToGround: boolean) => {
@@ -223,7 +240,7 @@ onUnmounted(() => {
 	border: 1px solid #008aff70;
 	border-radius: 2px !important;
 	background-color: rgba(23, 49, 71, 0.8);
-	width: 300px;
+	width: 400px;
 	box-shadow: 0 4px 15px 1px #02213bb3;
 	animation: fadeIn 1s;
 	&-title {
diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue
index 11784b0..f01323b 100644
--- a/src/views/goverment/largeScreen/index.vue
+++ b/src/views/goverment/largeScreen/index.vue
@@ -316,11 +316,13 @@ import {
 	gltfModelList,
 	updateSystemConfig,
 	equipmentList,
-	equipmentStyleGet
+	equipmentStyleGet,
+	equipmentUrlGet
 } from "@/api/modules/mapCommon";
 import { getDicList } from "@/api/modules/jxjview";
 import * as Vue from "vue";
 import { loadModule } from "vue3-sfc-loader";
+import { url } from "inspector";
 const modelLineList = ref([]);
 const equipTypeDictLabel = ref();
 const equipTypeList = ref([]);
@@ -570,13 +572,13 @@ const getEquipmentList = async (id: any) => {
 	const resStyle = await popupStyle(id);
 	if (res.result && res.result.length > 0) {
 		let arr: any = res.result;
-		arr.map(item => {
+		arr.map(async (item: any) => {
 			const graphicImg = new mars3d.graphic.DivGraphic({
 				id: item.monitorId,
 				position: [+item.lng, +item.lat, +item.alt],
 				style: {
 					html: () => {
-						const dom = initVue3Popup(resPointStyle?.codeValue, { name: item.name });
+						const dom = initVue3Popup(resPointStyle?.codeValue, { data: { name: item.name } });
 						return dom;
 					},
 					offsetX: +resPointStyle?.offsetX,
@@ -585,19 +587,23 @@ const getEquipmentList = async (id: any) => {
 				}
 			});
 			graphicLayer.addGraphic(graphicImg);
-			graphicImg.bindPopup(
-				(event: any) => {
-					const attr = event.graphic.attr || {};
-					if (!attr) {
-						return;
-					}
-					const dom = initVue3Popup(resStyle?.codeValue, { name: "你好啊" });
-					// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
-					console.log(dom);
-					return dom;
-				},
-				{ offsetY: +resStyle?.offsetY, offsetX: +resStyle?.offsetX }
-			);
+			let urlData: any = "";
+			if (item.url) {
+				urlData = await equipmentUrlGet({ monitorId: item.monitorId });
+				graphicImg.bindPopup(
+					(event: any) => {
+						const attr = event.graphic.attr || {};
+						if (!attr) {
+							return;
+						}
+						const dom = initVue3Popup(resStyle?.codeValue, { data: urlData ? urlData.result : {} });
+						// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
+						console.log(dom);
+						return dom;
+					},
+					{ offsetY: +resStyle?.offsetY, offsetX: +resStyle?.offsetX }
+				);
+			}
 		});
 	}
 	console.log(res);
@@ -1188,11 +1194,7 @@ const initMars3d = (option: any) => {
 	map.addControl(distanceLegend);
 	distanceLegend.on(mars3d.EventType.change, function (event) {
 		console.log("比例尺发生变化", event);
-		if (event.distance > 1000) {
-			showModelLine();
-		} else {
-			closeModelLine();
-		}
+		modelLineStatus(event.distance);
 	});
 	// 获取配置文件底图数据
 	getBasicMaps();
@@ -1203,18 +1205,16 @@ const initMars3d = (option: any) => {
 	// 查询配置模型线效果
 	getModelLine();
 };
-// 隐藏模型线效果并显示模型
-const closeModelLine = () => {
-	modelLineList.value.map(item => {
-		let graphic = graphicLayer.getGraphicById(item.id);
-		graphic.show = false;
-	});
-};
-// 显示模型线效果并隐藏模型
-const showModelLine = () => {
-	modelLineList.value.map(item => {
-		let graphic = graphicLayer.getGraphicById(item.id);
-		graphic.show = true;
+// 模型线效果设置的视距隐藏或显示模型
+const modelLineStatus = (distance: any) => {
+	modelLineList.value.map((item: any) => {
+		if (item.distance && distance >= +item.distance * 1000) {
+			let graphic = graphicLayer.getGraphicById(item.id);
+			graphic.show = true;
+		} else {
+			let graphic = graphicLayer.getGraphicById(item.id);
+			graphic.show = false;
+		}
 	});
 };
 // 获取模型线效果
diff --git a/src/views/jxjview/fileManagement/index.vue b/src/views/jxjview/fileManagement/index.vue
new file mode 100644
index 0000000..0e46da2
--- /dev/null
+++ b/src/views/jxjview/fileManagement/index.vue
@@ -0,0 +1,237 @@
+<template>
+	<div class="table-box">
+		<ProTable
+			ref="proTable"
+			title="用户列表"
+			:columns="columns"
+			:requestApi="getTableList"
+			:initParam="initParam"
+			:dataCallback="dataCallback"
+			:tool-button="false"
+			:pagination="true"
+			background
+			onReset
+		>
+			<template #formButton="scope">
+				<el-button class="addButtonStyle" @click="handleAddItem()">新增</el-button>
+			</template>
+			<!-- 表格操作 -->
+			<template #operation="scope">
+				<el-button type="primary" link @click="handleEditItem('edit', scope.row)">
+					<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
+					<span>编辑</span>
+				</el-button>
+				<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
+			</template>
+		</ProTable>
+
+		<!-- 点击名字的弹窗 -->
+		<el-dialog width="40%" class="typeDailog" v-model="DiaVisible" :title="title">
+			<el-form :model="formData" ref="ruleFormRef" :rules="rules" label-width="200px">
+				<el-form-item label="类型名称：" prop="fileType">
+					<el-input style="width: 100%" v-model="formData.fileType" placeholder="请输入" />
+				</el-form-item>
+				<el-form-item label="文件上传：" prop="fileUrl">
+					<el-upload
+						ref="upload"
+						:headers="headers"
+						:file-list="annexFileList"
+						:action="`${baseUrl}` + '/xmgl/file/upload'"
+						:on-remove="onRemove"
+						multiple
+						:limit="1"
+						:on-success="uploadSuccess"
+						:on-exceed="handleExceed"
+						style="width: 100%"
+					>
+						<el-button type="primary">点击上传</el-button>
+					</el-upload>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button class="cancelButtonStyle" @click="DiaVisible = false">取消</el-button>
+					<el-button type="primary" @click="DiaSubmit(ruleFormRef, formData)">保存</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+<script setup lang="tsx" name="jxjDictionary">
+import { ref, reactive } from "vue";
+import { ElMessage, FormRules, FormInstance, UploadProps, genFileId, UploadRawFile } from "element-plus";
+import { jxj_User } from "@/api/types";
+import { ColumnProps } from "@/components/ProTable/interface";
+import { useHandleData } from "@/hooks/useHandleData";
+import ProTable from "@/components/ProTable/index.vue";
+import { Delete } from "@element-plus/icons-vue";
+import { fileDataList, fileDataDelete, fileDataAdd, fileDataEdit } from "@/api/modules/mapCommon";
+import { Global3DStore } from "@/stores";
+const upload = ref();
+const baseUrl = import.meta.env.VITE_API_URL;
+const annexFileList = ref([] as any);
+const store = Global3DStore();
+const headers = ref({ Authorization: "Bearer " + store.token });
+const ruleFormRef = ref<FormInstance>();
+const rules = reactive<FormRules>({
+	fileType: {
+		required: true,
+		message: "请输入",
+		trigger: "blur"
+	},
+	fileUrl: {
+		required: true,
+		message: "请选择",
+		trigger: "change"
+	}
+});
+// 页面新增
+const visible = ref(false);
+const DiaVisible = ref(false);
+const title = ref("");
+const formData: any = ref({});
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTable = ref();
+const handleExceed: UploadProps["onExceed"] = files => {
+	upload.value!.clearFiles();
+	const file = files[0] as UploadRawFile;
+	file.uid = genFileId();
+	upload.value!.handleStart(file);
+	upload.value?.submit();
+};
+
+const uploadSuccess = (response: any) => {
+	console.log(response);
+	ElMessage.success("上传成功");
+	formData.value = {
+		...formData.value,
+		extendName: response.result.ext,
+		fileName: response.result.originalFilename,
+		fileSize: response.result.size,
+		fileUrl: response.result.url
+	};
+};
+
+const onRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
+	formData.value = { fileType: formData.value.fileType };
+	annexFileList.value = reactive([]);
+};
+// 保存
+const DiaSubmit = async (formEl: FormInstance | undefined, form: any) => {
+	console.log(form);
+	// 标记表单校验
+	if (!formEl) return;
+	await formEl.validate(async (valid, fields) => {
+		if (valid) {
+			// console.log(valid);
+			if (title.value == "新增") {
+				const res = await fileDataAdd(form);
+				ElMessage.success("新增成功");
+			} else {
+				await fileDataEdit(form);
+				ElMessage.success("编辑成功");
+			}
+			DiaVisible.value = false;
+			proTable.value?.getTableList();
+		} else {
+			console.log("error submit!", fields);
+			ElMessage({
+				showClose: true,
+				message: "请完善表单信息！",
+				type: "error"
+			});
+		}
+	});
+};
+// 添加数据按钮
+const handleAddItem = () => {
+	ruleFormRef.value?.clearValidate();
+	title.value = "新增";
+	formData.value = reactive({});
+	annexFileList.value = reactive([]);
+	DiaVisible.value = true;
+};
+
+// 修改数据按钮
+const handleEditItem = (index: string, row: any) => {
+	title.value = "编辑";
+	formData.value = reactive({ ...row });
+	annexFileList.value = [{ name: row.fileName, url: row.fileUrl }];
+	DiaVisible.value = true;
+};
+
+// 表格配置项
+const columns: ColumnProps[] = [
+	{ type: "index", label: "序号", width: 80 },
+	{
+		prop: "fileType",
+		label: "类型名称",
+		search: { el: "input" }
+	},
+	{
+		prop: "fileName",
+		label: "文件名称"
+	},
+	// 多级 prop
+	{
+		prop: "fileUrl",
+		label: "文件地址"
+	},
+	{
+		prop: "createTime",
+		label: "创建时间"
+	},
+	{ prop: "operation", label: "操作", width: 160 }
+];
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({
+	// type: 1
+});
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const dataCallback = (data: any) => {
+	// console.log(data);
+	return {
+		list: data.records,
+		total: Number(data.total),
+		pageNo: Number(data.current),
+		pageSize: Number(data.size)
+	};
+};
+
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+const getTableList = (params: any) => {
+	let newParams = JSON.parse(JSON.stringify(params));
+	// console.log(newParams);
+	// newParams.endTime = newParams.createTime[1];
+	// newParams.createTime = newParams.createTime[0];
+	return fileDataList(newParams);
+};
+// 删除用户信息
+const deleteAccount = async (params: jxj_User.ResUserList) => {
+	await useHandleData(fileDataDelete, { fileId: params.fileId }, `删除【${params.fileName}】`);
+	proTable.value.getTableList();
+};
+</script>
+<style lang="scss" scoped>
+:deep(.el-input-number) {
+	width: 100%;
+}
+:deep(.el-dialog) {
+	min-height: 35%;
+}
+// 表格内容的滚动条的
+:deep(.el-scrollbar) {
+	min-height: 220px;
+}
+:deep(.el-table__inner-wrapper::before) {
+	height: 0;
+}
+.configureIcon {
+	vertical-align: middle;
+	margin: -1px 5px 0 0;
+}
+</style>
