fix: BUG修改
This commit is contained in:
kun
parent
5eb552b86e
commit
3473c294ca
@ -152,3 +152,23 @@ export const equipmentStyleGet = (params: any) => {
|
||||
export const equipmentStyleEdit = (params: any) => {
|
||||
return http.post(BASEURL + `/base/deviceConfig/edit`, params);
|
||||
};
|
||||
|
||||
// 设备列表
|
||||
export const equipmentList = (params: any) => {
|
||||
return http.post(BASEURL + `/base/monitorDev/list`, params);
|
||||
};
|
||||
|
||||
// 设备新增
|
||||
export const equipmentAdd = (params: any) => {
|
||||
return http.post(BASEURL + `/base/monitorDev/add`, params);
|
||||
};
|
||||
|
||||
// 设备编辑
|
||||
export const equipmentEdit = (params: any) => {
|
||||
return http.post(BASEURL + `/base/monitorDev/edit`, params);
|
||||
};
|
||||
|
||||
// 设备删除
|
||||
export const equipmentDelete = (params: any) => {
|
||||
return http.post(BASEURL + `/base/monitorDev/delete`, params);
|
||||
};
|
||||
|
||||
@ -298,8 +298,10 @@ import {
|
||||
diffuseWallList,
|
||||
polylineCombineList,
|
||||
gltfModelList,
|
||||
updateSystemConfig
|
||||
updateSystemConfig,
|
||||
equipmentList
|
||||
} from "@/api/modules/mapCommon";
|
||||
import { getDicList } from "@/api/modules/jxjview";
|
||||
const isViewStart = ref<boolean>(true);
|
||||
interface FormState {
|
||||
isStart: boolean;
|
||||
@ -502,7 +504,66 @@ onMounted(async () => {
|
||||
// await getConfig();
|
||||
await getPlusConfig();
|
||||
await loadModel();
|
||||
await getEquipTypeList();
|
||||
});
|
||||
// 根据不同类型设置样式
|
||||
const getTypeStyle = (num: any, type: any) => {
|
||||
let borderSty: any;
|
||||
let borderLeftSty: any;
|
||||
let bgSty: any;
|
||||
if (type == 1) {
|
||||
borderSty = "mars3d-camera-style1";
|
||||
borderLeftSty = "mars3d-borderLeft1";
|
||||
bgSty = "mars3d-bg1";
|
||||
} else if (type == 2) {
|
||||
borderSty = "mars3d-camera-style2";
|
||||
borderLeftSty = "mars3d-borderLeft2";
|
||||
bgSty = "mars3d-bg2";
|
||||
}
|
||||
if (num == 1) {
|
||||
return borderSty;
|
||||
} else if (num == 2) {
|
||||
return borderLeftSty;
|
||||
} else if (num == 3) {
|
||||
return bgSty;
|
||||
}
|
||||
};
|
||||
// 获取设备类型下的设备列表
|
||||
const getEquipmentList = async (id: any) => {
|
||||
const res = await equipmentList({ category: id });
|
||||
if (res.result && res.result.length > 0) {
|
||||
let arr: any = res.result;
|
||||
arr.map(item => {
|
||||
const graphicImg = new mars3d.graphic.DivGraphic({
|
||||
id: item.monitorId,
|
||||
position: [+item.lng, +item.lat, +item.alt],
|
||||
style: {
|
||||
html: ` <div class="mars3d-camera-content ${getTypeStyle(1, item.type)}">
|
||||
<span class="mars3d-camera-text">${item.name}</span>
|
||||
</div>
|
||||
<div class="mars3d-camera-line ${getTypeStyle(2, item.type)}" ></div>
|
||||
<div class="mars3d-camera-point ${getTypeStyle(3, item.type)}"></div>
|
||||
`,
|
||||
offsetX: -51,
|
||||
offsetY: 4,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
|
||||
}
|
||||
});
|
||||
graphicLayer.addGraphic(graphicImg);
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
};
|
||||
// 获取配置的设备类型数据
|
||||
const getEquipTypeList = async () => {
|
||||
const { result } = await getDicList({ dictType: "device_style" });
|
||||
console.log(result, "设备列表.......");
|
||||
if (result.length > 0) {
|
||||
result.map((item: any) => {
|
||||
getEquipmentList(item.dictLabel);
|
||||
});
|
||||
}
|
||||
};
|
||||
// 设置特定模型
|
||||
const loadModel = async () => {
|
||||
const tiles3dLayer = new mars3d.layer.TilesetLayer({
|
||||
@ -2032,11 +2093,34 @@ onUnmounted(() => {
|
||||
.mars3d-camera-content {
|
||||
height: 30px;
|
||||
}
|
||||
.mars3d-camera-style1 {
|
||||
border: 3px solid #5b8fee;
|
||||
}
|
||||
.mars3d-camera-style2 {
|
||||
border: 3px solid #ff6564;
|
||||
}
|
||||
.mars3d-borderLeft1 {
|
||||
border-left: 3px dashed #5b8fee;
|
||||
}
|
||||
|
||||
.mars3d-borderLeft2 {
|
||||
border-left: 3px dashed #ff6564;
|
||||
}
|
||||
.mars3d-bg1 {
|
||||
background-color: #5b8fee;
|
||||
}
|
||||
.mars3d-bg2 {
|
||||
background-color: #ff6564;
|
||||
}
|
||||
.mars3d-camera-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
animation: cameraMove 1s linear infinite alternate;
|
||||
-webkit-animation: cameraMove 1s linear infinite alternate;
|
||||
// animation: cameraMove 1s linear infinite alternate;
|
||||
// -webkit-animation: cameraMove 1s linear infinite alternate;
|
||||
}
|
||||
.mars3d-camera-text {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
@keyframes cameraMove {
|
||||
from {
|
||||
@ -2057,8 +2141,8 @@ onUnmounted(() => {
|
||||
.mars3d-camera-line {
|
||||
height: 120px;
|
||||
width: 5px;
|
||||
margin-top: 20px;
|
||||
border-left: 3px dashed #5b8fee;
|
||||
margin-top: 10px;
|
||||
// border-left: 3px dashed #5b8fee;
|
||||
margin-left: calc(50% - 1px);
|
||||
}
|
||||
.mars3d-camera-point {
|
||||
@ -2066,7 +2150,7 @@ onUnmounted(() => {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-left: calc(50% - 3px);
|
||||
background-color: #5b8fee;
|
||||
// background-color: #5b8fee;
|
||||
}
|
||||
.animation-spaceInDown {
|
||||
animation-duration: 1s;
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
|
||||
</div>
|
||||
<div class="operate-btn">
|
||||
<div :class="operateIndex == 0 ? 'active-btn' : ''" @click="operateIndex = 0">基础配置</div>
|
||||
<div :class="operateIndex == 1 ? 'active-btn' : ''" @click="operateIndex = 1">设备列表</div>
|
||||
<div :class="operateIndex == 0 ? 'active-btn' : ''" @click="getRelativeData(0)">基础配置</div>
|
||||
<div :class="operateIndex == 1 ? 'active-btn' : ''" @click="getRelativeData(1)">设备列表</div>
|
||||
</div>
|
||||
<div class="basic-config" v-show="operateIndex == 0">
|
||||
<!-- <div class="switch-content">
|
||||
@ -98,7 +98,14 @@ import { loadModule } from "vue3-sfc-loader";
|
||||
import { initVue3Popup } from "@/utils/file-util";
|
||||
import QueryPopup from "./query-popup.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { equipmentStyleGet, equipmentStyleEdit } from "@/api/modules/mapCommon";
|
||||
import {
|
||||
equipmentStyleGet,
|
||||
equipmentStyleEdit,
|
||||
equipmentList,
|
||||
equipmentAdd,
|
||||
equipmentEdit,
|
||||
equipmentDelete
|
||||
} from "@/api/modules/mapCommon";
|
||||
const basicConfig = ref({} as any);
|
||||
const tableData = ref<any>([]);
|
||||
const baseUrl = import.meta.env.VITE_API_URL;
|
||||
@ -111,10 +118,28 @@ const code = ref();
|
||||
const previewComp = shallowRef();
|
||||
const extensions = [vue(), oneDark];
|
||||
import CodeMirror from "@/components/CodeMirror/index.vue";
|
||||
const props = defineProps(["mapInstance", "equipTypeDictLabel"]);
|
||||
const props = defineProps(["mapInstance", "graphicInstance", "equipTypeDictLabel"]);
|
||||
const emits = defineEmits(["hiddenConfim"]);
|
||||
let map: any = props.mapInstance;
|
||||
let graphicLayer: any;
|
||||
let parentGraphicLayer = props.graphicInstance;
|
||||
// 获取相关tab数据
|
||||
const getRelativeData = (index: any) => {
|
||||
operateIndex.value = index;
|
||||
if (index == 0) {
|
||||
getStyle();
|
||||
} else if (index == 1) {
|
||||
getEquipList();
|
||||
}
|
||||
};
|
||||
// 获取设备列表
|
||||
const getEquipList = async () => {
|
||||
const res = await equipmentList({ category: props.equipTypeDictLabel });
|
||||
if (res.result && res.result.length > 0) {
|
||||
tableData.value = res.result;
|
||||
}
|
||||
console.log(res);
|
||||
};
|
||||
// 保存基础配置
|
||||
const saveStyle = async () => {
|
||||
let requestData: any = {
|
||||
@ -138,24 +163,46 @@ const getStyle = async () => {
|
||||
}
|
||||
};
|
||||
// 保存编辑信息
|
||||
const saveEdit = (row: any) => {
|
||||
const graphic = graphicLayer.getGraphicById(row.id);
|
||||
graphic.setStyle({
|
||||
html: ` <div class="mars3d-camera-content">
|
||||
const saveEdit = async (row: any) => {
|
||||
let requestData = {
|
||||
name: row.name,
|
||||
monitorId: row.monitorId,
|
||||
category: props.equipTypeDictLabel
|
||||
};
|
||||
const res = await equipmentEdit(requestData);
|
||||
if (res && res.code == 200) {
|
||||
let graphic = graphicLayer.getGraphicById(row.monitorId);
|
||||
console.log(graphic, "子图像");
|
||||
if (!graphic) {
|
||||
graphic = parentGraphicLayer.getGraphicById(row.monitorId);
|
||||
}
|
||||
console.log(graphic, "父图像");
|
||||
graphic.setStyle({
|
||||
html: ` <div class="mars3d-camera-content ${getTypeStyle(1)}">
|
||||
<span class="mars3d-camera-text">${row.name}</span>
|
||||
</div>
|
||||
<div class="mars3d-camera-line" ></div>
|
||||
<div class="mars3d-camera-point"></div>
|
||||
<div class="mars3d-camera-line ${getTypeStyle(2)}" ></div>
|
||||
<div class="mars3d-camera-point ${getTypeStyle(3)}"></div>
|
||||
`
|
||||
});
|
||||
});
|
||||
}
|
||||
row.isEdit = false;
|
||||
};
|
||||
// 删除用户信息
|
||||
const handleDeleteItem = async (row: any, index: any) => {
|
||||
const graphic = graphicLayer.getGraphicById(row.id);
|
||||
graphic && graphic.remove(true);
|
||||
// await useHandleData(deleteBigItem, { id: params.id }, `删除【${params.name}】`);
|
||||
tableData.value.splice(index, 1);
|
||||
let requestData = {
|
||||
monitorId: row.monitorId
|
||||
};
|
||||
const res = await equipmentDelete(requestData);
|
||||
if (res && res.code == 200) {
|
||||
let graphic = graphicLayer.getGraphicById(row.monitorId);
|
||||
if (!graphic) {
|
||||
graphic = parentGraphicLayer.getGraphicById(row.monitorId);
|
||||
}
|
||||
graphic && graphic.remove(true);
|
||||
// await useHandleData(deleteBigItem, { id: params.id }, `删除【${params.name}】`);
|
||||
tableData.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
// 图上新增点
|
||||
const newPoint = () => {
|
||||
@ -177,18 +224,40 @@ const getTypeImage = () => {
|
||||
}
|
||||
return img;
|
||||
};
|
||||
// 根据不同类型设置样式
|
||||
const getTypeStyle = (num: any) => {
|
||||
let borderSty: any;
|
||||
let borderLeftSty: any;
|
||||
let bgSty: any;
|
||||
if (formData.value.showType == 1) {
|
||||
borderSty = "mars3d-camera-style1";
|
||||
borderLeftSty = "mars3d-borderLeft1";
|
||||
bgSty = "mars3d-bg1";
|
||||
} else if (formData.value.showType == 2) {
|
||||
borderSty = "mars3d-camera-style2";
|
||||
borderLeftSty = "mars3d-borderLeft2";
|
||||
bgSty = "mars3d-bg2";
|
||||
}
|
||||
if (num == 1) {
|
||||
return borderSty;
|
||||
} else if (num == 2) {
|
||||
return borderLeftSty;
|
||||
} else if (num == 3) {
|
||||
return bgSty;
|
||||
}
|
||||
};
|
||||
// <img class="mars3d-camera-img" src="${getTypeImage()}" >
|
||||
const addRandomGraphicByCount = (point: any) => {
|
||||
const addRandomGraphicByCount = async (point: any) => {
|
||||
const graphicImg = new mars3d.graphic.DivGraphic({
|
||||
position: [point.lng, point.lat, point.alt],
|
||||
style: {
|
||||
html: ` <div class="mars3d-camera-content">
|
||||
html: ` <div class="mars3d-camera-content ${getTypeStyle(1)}">
|
||||
<span class="mars3d-camera-text"></span>
|
||||
</div>
|
||||
<div class="mars3d-camera-line" ></div>
|
||||
<div class="mars3d-camera-point"></div>
|
||||
<div class="mars3d-camera-line ${getTypeStyle(2)}" ></div>
|
||||
<div class="mars3d-camera-point ${getTypeStyle(3)}"></div>
|
||||
`,
|
||||
offsetX: -49,
|
||||
offsetX: -51,
|
||||
offsetY: 4,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
|
||||
}
|
||||
@ -216,14 +285,36 @@ const addRandomGraphicByCount = (point: any) => {
|
||||
graphicLayer.addGraphic(graphicImg);
|
||||
console.log(graphicImg);
|
||||
const obj = {
|
||||
id: graphicImg.id,
|
||||
monitorId: graphicImg.id,
|
||||
name: graphicImg.name,
|
||||
type: formData.value.showType,
|
||||
lng: point.lng,
|
||||
lat: point.lat,
|
||||
alt: point.alt,
|
||||
isEdit: false
|
||||
};
|
||||
tableData.value.unshift(obj);
|
||||
let requestData = {
|
||||
name: obj.name,
|
||||
monitorId: obj.monitorId,
|
||||
category: props.equipTypeDictLabel,
|
||||
type: formData.value.showType,
|
||||
lng: point.lng,
|
||||
lat: point.lat,
|
||||
alt: point.alt
|
||||
};
|
||||
const res = await equipmentAdd(requestData);
|
||||
if (res && res.code == 200) {
|
||||
tableData.value.unshift(obj);
|
||||
} else {
|
||||
let htmlGraphic = graphicLayer.getGraphicById(graphicImg.id);
|
||||
if (!htmlGraphic) {
|
||||
htmlGraphic = parentGraphicLayer.getGraphicById(graphicImg.id);
|
||||
}
|
||||
htmlGraphic && htmlGraphic.remove(true);
|
||||
}
|
||||
console.log(graphicLayer);
|
||||
// const pointGraphic = graphicLayer.getGraphicById("point-tip");
|
||||
// pointGraphic && pointGraphic.remove(true);
|
||||
const pointGraphic = graphicLayer.getGraphicById("point-tip");
|
||||
pointGraphic && pointGraphic.remove(true);
|
||||
};
|
||||
const closeDiv = () => {
|
||||
emits("hiddenConfim");
|
||||
|
||||
@ -134,7 +134,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 设备添加弹框 -->
|
||||
<EquipmentAdd :mapInstance="map" :equipTypeDictLabel="equipTypeDictLabel" v-if="equipmentShow" @hiddenConfim="equipmentShow = false" v-draggable />
|
||||
<EquipmentAdd
|
||||
:mapInstance="map"
|
||||
:graphicInstance="graphicLayer"
|
||||
:equipTypeDictLabel="equipTypeDictLabel"
|
||||
v-if="equipmentShow"
|
||||
@hiddenConfim="equipmentShow = false"
|
||||
v-draggable
|
||||
/>
|
||||
<!-- 图上量算弹框 -->
|
||||
<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" v-draggable />
|
||||
<!-- 空间分析弹框 -->
|
||||
@ -311,7 +318,8 @@ import {
|
||||
diffuseWallList,
|
||||
polylineCombineList,
|
||||
gltfModelList,
|
||||
updateSystemConfig
|
||||
updateSystemConfig,
|
||||
equipmentList
|
||||
} from "@/api/modules/mapCommon";
|
||||
import { getDicList } from "@/api/modules/jxjview";
|
||||
const equipTypeDictLabel = ref();
|
||||
@ -504,6 +512,54 @@ onMounted(async () => {
|
||||
await getConfig();
|
||||
await getEquipTypeList();
|
||||
});
|
||||
// 根据不同类型设置样式
|
||||
const getTypeStyle = (num: any, type: any) => {
|
||||
let borderSty: any;
|
||||
let borderLeftSty: any;
|
||||
let bgSty: any;
|
||||
if (type == 1) {
|
||||
borderSty = "mars3d-camera-style1";
|
||||
borderLeftSty = "mars3d-borderLeft1";
|
||||
bgSty = "mars3d-bg1";
|
||||
} else if (type == 2) {
|
||||
borderSty = "mars3d-camera-style2";
|
||||
borderLeftSty = "mars3d-borderLeft2";
|
||||
bgSty = "mars3d-bg2";
|
||||
}
|
||||
if (num == 1) {
|
||||
return borderSty;
|
||||
} else if (num == 2) {
|
||||
return borderLeftSty;
|
||||
} else if (num == 3) {
|
||||
return bgSty;
|
||||
}
|
||||
};
|
||||
// 获取设备类型下的设备列表
|
||||
const getEquipmentList = async (id: any) => {
|
||||
const res = await equipmentList({ category: id });
|
||||
if (res.result && res.result.length > 0) {
|
||||
let arr: any = res.result;
|
||||
arr.map(item => {
|
||||
const graphicImg = new mars3d.graphic.DivGraphic({
|
||||
id: item.monitorId,
|
||||
position: [+item.lng, +item.lat, +item.alt],
|
||||
style: {
|
||||
html: ` <div class="mars3d-camera-content ${getTypeStyle(1, item.type)}">
|
||||
<span class="mars3d-camera-text">${item.name}</span>
|
||||
</div>
|
||||
<div class="mars3d-camera-line ${getTypeStyle(2, item.type)}" ></div>
|
||||
<div class="mars3d-camera-point ${getTypeStyle(3, item.type)}"></div>
|
||||
`,
|
||||
offsetX: -51,
|
||||
offsetY: 4,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
|
||||
}
|
||||
});
|
||||
graphicLayer.addGraphic(graphicImg);
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
};
|
||||
// 获取配置的设备类型数据
|
||||
const getEquipTypeList = async () => {
|
||||
const { result } = await getDicList({ dictType: "device_style" });
|
||||
@ -511,6 +567,9 @@ const getEquipTypeList = async () => {
|
||||
if (result.length > 0) {
|
||||
equipTypeList.value.length = 0;
|
||||
equipTypeList.value.push(...result);
|
||||
equipTypeList.value.map((item: any) => {
|
||||
getEquipmentList(item.dictLabel);
|
||||
});
|
||||
}
|
||||
};
|
||||
// 展示保存的地图标绘配置
|
||||
@ -830,7 +889,7 @@ const showWidget = (name: string) => {
|
||||
// 点击物联网设备菜单
|
||||
const clickEquipMenu = async (obj: any) => {
|
||||
console.log(obj, "111222333");
|
||||
equipTypeDictLabel.value = obj.dictLabel
|
||||
equipTypeDictLabel.value = obj.dictLabel;
|
||||
equipmentShow.value = true;
|
||||
equipListShow.value = false;
|
||||
};
|
||||
@ -1064,14 +1123,14 @@ const initMars3d = (option: any) => {
|
||||
map.on(mars3d.EventType.cameraChanged, cameraChanged);
|
||||
// 创建覆盖物数据图层
|
||||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
graphicLayer.bindPopup((event: any) => {
|
||||
const attr = event.graphic.attr || {};
|
||||
if (!attr) {
|
||||
return;
|
||||
}
|
||||
const dom = initVue3Popup(QueryPopup, attr);
|
||||
return dom;
|
||||
});
|
||||
// graphicLayer.bindPopup((event: any) => {
|
||||
// const attr = event.graphic.attr || {};
|
||||
// if (!attr) {
|
||||
// return;
|
||||
// }
|
||||
// const dom = initVue3Popup(QueryPopup, attr);
|
||||
// return dom;
|
||||
// });
|
||||
map.addLayer(graphicLayer);
|
||||
// 获取配置文件底图数据
|
||||
getBasicMaps();
|
||||
@ -2220,7 +2279,30 @@ onUnmounted(() => {
|
||||
// 视频监控点位样式
|
||||
:deep() {
|
||||
.mars3d-camera-content {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.mars3d-camera-style1 {
|
||||
border: 3px solid #5b8fee;
|
||||
}
|
||||
.mars3d-camera-style2 {
|
||||
border: 3px solid #ff6564;
|
||||
}
|
||||
.mars3d-borderLeft1 {
|
||||
border-left: 3px dashed #5b8fee;
|
||||
}
|
||||
|
||||
.mars3d-borderLeft2 {
|
||||
border-left: 3px dashed #ff6564;
|
||||
}
|
||||
.mars3d-bg1 {
|
||||
background-color: #5b8fee;
|
||||
}
|
||||
.mars3d-bg2 {
|
||||
background-color: #ff6564;
|
||||
}
|
||||
.mars3d-camera-img {
|
||||
width: 30px;
|
||||
@ -2229,11 +2311,8 @@ onUnmounted(() => {
|
||||
// -webkit-animation: cameraMove 1s linear infinite alternate;
|
||||
}
|
||||
.mars3d-camera-text {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
@keyframes cameraMove {
|
||||
from {
|
||||
@ -2254,8 +2333,8 @@ onUnmounted(() => {
|
||||
.mars3d-camera-line {
|
||||
height: 120px;
|
||||
width: 5px;
|
||||
margin-top: 20px;
|
||||
border-left: 3px dashed #5b8fee;
|
||||
margin-top: 10px;
|
||||
// border-left: 3px dashed #5b8fee;
|
||||
margin-left: calc(50% - 1px);
|
||||
}
|
||||
.mars3d-camera-point {
|
||||
@ -2263,7 +2342,7 @@ onUnmounted(() => {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-left: calc(50% - 3px);
|
||||
background-color: #5b8fee;
|
||||
// background-color: #5b8fee;
|
||||
}
|
||||
// .animation-spaceInDown {
|
||||
// animation-duration: 1s;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user