feat: 文件管理功能新增以及BUG修改
This commit is contained in:
kun
parent
7a79cf7c8d
commit
3529d7fa6e
2
dist/index.html
vendored
2
dist/index.html
vendored
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
};
|
||||
|
||||
@ -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": "成功"
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取模型线效果
|
||||
|
||||
237
src/views/jxjview/fileManagement/index.vue
Normal file
237
src/views/jxjview/fileManagement/index.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user