admin/Mars3D-screen_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 物联网设备配置功能新增以及BUG修改

Browse Source
This commit is contained in:
kun 2023-12-06 17:41:01 +08:00
parent 5346b750fc
commit e45757b816
5 changed files with 356 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/testMap/index.vue
View File

@ -329,7 +329,7 @@ const deleteSelected = (type: any, index: any) => {
}
};
// 处理构件着色的方法
const handleCheckChange = (e: any, obj: AnyColumn) => {
const handleCheckChange = (e: any, obj: any) => {
console.log(e);
console.log(obj);
if (selectedFormData.value.type == 1) {
@ -337,19 +337,30 @@ const handleCheckChange = (e: any, obj: AnyColumn) => {
console.log(selectedHideList.value.length);
} else {
if (obj.checkedKeys.length > 0) {
let selectedIndex = -1;
if (e.children) {
e.children.map(item => {
if (obj.checkedKeys.includes(item.eleid)) {
selectedIndex = selectedColorList.value.findIndex(item2 => item2.name == item.eleid);
if (obj.checkedKeys.includes(item.eleid) && selectedIndex == -1) {
selectedColorList.value.push({ name: item.eleid, color: selectedFormData.value.color });
} else if (!obj.checkedKeys.includes(e.eleid) && selectedIndex != -1) {
selectedColorList.value.splice(selectedIndex, 1);
}
});
} else {
if (obj.checkedKeys.includes(e.eleid)) {
selectedIndex = selectedColorList.value.findIndex(item2 => item2.name == e.eleid);
console.log(selectedIndex);
if (obj.checkedKeys.includes(e.eleid) && selectedIndex == -1) {
selectedColorList.value.push({ name: e.eleid, color: selectedFormData.value.color });
} else if (!obj.checkedKeys.includes(e.eleid) && selectedIndex != -1) {
selectedColorList.value.splice(selectedIndex, 1);
}
}
// obj.checkedKeys.map(item => {
// selectedColorList.value.push({ name: e.eleid, color: selectedFormData.value.color });
// selectedColorList.value = selectedColorList.value.filter((item: any, index: any, arr: any) => {
// let eleIndex = obj.checkedKeys.findIndex((item2: any) => {
// return item.name === item2;
// });
// return eleIndex != -1;
// });
} else {
selectedColorList.value = [];
@ -410,7 +421,9 @@ const operateComponentStatus = () => {
dataArr.unshift(["${id} ==='" + item + "'", "rgba(255, 255, 255,0)"]);
});
selectedColorList.value.map(item => {
if (item.color) {
dataArr.unshift(["${id} ==='" + item.name + "'", `${item.color}`]);
}
});
tiles3dLayer.style = {
color: {
@ -662,15 +675,15 @@ const getAlbugineaInfo = async () => {
map.addLayer(tiles3dLayer);
getAlbugineaTreeData(result.url);
operateComponentStatus();
if (selectedFormData.value.type == 1) {
modelComponentTree.value.setCheckedKeys(selectedHideList.value);
} else {
let checkArr: any = [];
selectedColorList.value.map(item => {
checkArr.push(item.name);
});
modelComponentTree.value.setCheckedKeys(checkArr);
}
// if (selectedFormData.value.type == 1) {
// modelComponentTree.value.setCheckedKeys(selectedHideList.value);
// } else {
// let checkArr: any = [];
// selectedColorList.value.map(item => {
// checkArr.push(item.name);
// });
// modelComponentTree.value.setCheckedKeys(checkArr);
// }
// configJson.value.layers = [
// {
// id: result.id,

181
src/views/goverment/frontLargeScreen/index.vue
View File

@ -276,8 +276,6 @@ import * as Cesium from "mars3d-cesium";
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import ConfigJson from "@/views/goverment/largeScreen/config.json";
import BridgeControlJson from "./bridge.json";
import BridgeJson from "./bridgeFace.json";
import layoutFrontTop from "@/components/layoutFrontTop/index.vue";
import { ElMessage } from "element-plus";
import { datas } from "@/enums/company/SetpsEnum";
@ -307,7 +305,6 @@ import {
import { getDicList } from "@/api/modules/jxjview";
import * as Vue from "vue";
import { loadModule } from "vue3-sfc-loader";
const controlJson = ref([] as any);
const modelLineList = ref([]);
const isViewStart = ref<boolean>(true);
interface FormState {
@ -421,22 +418,6 @@ onMounted(async () => {
// console.log(data);
// initMars3d(data.map3d);
// });
controlJson.value = BridgeJson.bridge;
BridgeControlJson.control.map(item => {
if (
item.name == "面层" ||
item.name == "路床" ||
item.name == "基层" ||
item.name == "底基层" ||
item.name == "盖梁" ||
item.name == "桩基" ||
item.name == "桩基系梁"
) {
item.children.map(item2 => {
controlJson.value.push(item2.id);
});
}
});
for (let i = 0; i < 6; i++) {
const img = await getCanvas(i + 1);
imgArr.push(img);
@ -526,34 +507,20 @@ onMounted(async () => {
// await initTree();
// await getConfig();
await getPlusConfig();
await loadModel();
await getEquipTypeList();
// 查询配置的白膜
const resAlbuginea: any = await albugineaMapList({});
if (resAlbuginea.result && resAlbuginea.result.length > 0) {
resAlbuginea.result.map((item: any) => {
if (item.name == "桥梁") {
loadModel(item);
}
});
// 根据不同类型设置样式
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 popupStyle = async (id: any) => {
const res = await equipmentStyleGet({ category: id }); // 获取设备样式
const pointStyle = async (id: any) => {
const res = await equipmentStyleGet({ category: id, type: 1 }); // 获取设备样式
if (!res.result) {
return;
}
@ -574,11 +541,37 @@ const popupStyle = async (id: any) => {
};
const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options));
console.log(comp, "返回的组件···········");
return comp;
return { codeValue: comp, offsetX: res.result.offsetX, offsetY: res.result.offsetY };
};
// 设备类型下的设备绑定的弹窗样式
const popupStyle = async (id: any) => {
const res = await equipmentStyleGet({ category: id, type: 1 }); // 获取设备样式
if (!res.result) {
return;
}
const options = {
moduleCache: {
vue: Vue
},
async getFile() {
return res.result.style;
},
addStyle(textContent: any) {
const style = Object.assign(document.createElement("style"), {
textContent
});
const ref = document.head.getElementsByTagName("style")[0] || null;
document.head.insertBefore(style, ref);
}
};
const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options));
console.log(comp, "返回的组件···········");
return { codeValue: comp, offsetX: res.result.offsetX, offsetY: res.result.offsetY };
};
// 获取设备类型下的设备列表
const getEquipmentList = async (id: any) => {
const res = await equipmentList({ category: id });
const resPointStyle = await pointStyle(id);
const resStyle = await popupStyle(id);
if (res.result && res.result.length > 0) {
let arr: any = res.result;
@ -587,14 +580,12 @@ const getEquipmentList = async (id: any) => {
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,
html: () => {
const dom = initVue3Popup(resPointStyle?.codeValue, { name: item.name });
return dom;
},
offsetX: +resPointStyle?.offsetX,
offsetY: +resPointStyle?.offsetY,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
}
});
@ -605,12 +596,12 @@ const getEquipmentList = async (id: any) => {
if (!attr) {
return;
}
const dom = initVue3Popup(resStyle, { name: "你好啊" });
const dom = initVue3Popup(resStyle?.codeValue, { name: "你好啊" });
// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
console.log(dom);
return dom;
},
{ offsetY: -170, offsetX: 50 }
{ offsetY: +resStyle?.offsetX, offsetX: +resStyle?.offsetY }
);
});
}
@ -626,82 +617,33 @@ const getEquipTypeList = async () => {
});
}
};
// 根据控件id隐藏控件
const checkModelId = (boolean: any) => {
let ids = BridgeJson.bridge;
new Cesium.Cesium3DTileStyle({
show: {
evaluate: function (feature: any) {
console.log(feature, "id集合-----------");
let ishow = boolean;
ids.includes(feature._batchId) ? (ishow = ishow) : (ishow = !ishow);
return ishow;
}
}
});
};
// 设置特定模型
const loadModel = async () => {
const loadModel = async (obj: any) => {
console.log(obj);
const tiles3dLayer = new mars3d.layer.TilesetLayer({
id: "bridge-model",
name: "桥梁",
url: "http://jxjzw.zhgdyun.com:6080/model/tileset.json",
position: { lat: 23.808356, lng: 106.858628, alt: -30 },
name: obj.name,
url: obj.url,
position: { lat: +obj.lat, lng: +obj.lng, alt: +obj.alt },
maximumScreenSpaceError: 1,
popup: "all"
});
map.addLayer(tiles3dLayer);
// let ids = BridgeJson.bridge;
let ids = controlJson.value;
console.log(controlJson.value);
console.log(controlJson.value.length);
// tiles3dLayer.style = new Cesium.Cesium3DTileStyle({
// ...tiles3dLayer.style,
// color: {
// evaluateColor: function (feature: any, result: any) {
// console.log(feature, result, "66666666666688888888888889999999999999");
// // return Cesium.Color.clone(Cesium.Color.WHITE, result);
// }
// },
// show: {
// evaluate: function (id: any) {
// console.log(id, "id集合-----------");
// // let ishow = false;
// // ids.includes(feature._batchId) ? (ishow = ishow) : (ishow = !ishow);
// // console.log(ishow);
// return false;
// }
// }
// });
// tiles3dLayer.style = {
// // color : ids.includes("${id}") ? "false" : "true"
// color: {
// conditions: [
// ["${id} ==='c6c924912dcb486982ebdec467c98808'", "rgb(255, 255, 255)"],
// ["true", "rgba(255, 200, 200,0)"]
// ]
// }
// // show: ids.includes("${id}")
// // show: {
// // conditions: [
// // [ids.includes("${id}"), "false"],
// // ["true", "true"]
// // ]
// // }
// // show: ids.includes("${id}") ? "false" : "true"
// // show: {
// // conditions: [
// // ["${id} == 'c6c924912dcb486982ebdec467c98808'", "false"],
// // ["true", "true"]
// // ]
// // }
// };
setTimeout(function () {
// tiles3dLayer.bindPopup("all");
let dataArr: any = [];
ids.map(item => {
if (JSON.parse(obj.hiddenComponentId)) {
JSON.parse(obj.hiddenComponentId).map(item => {
dataArr.unshift(["${id} ==='" + item + "'", "rgba(255, 255, 255,0)"]);
});
}
if (JSON.parse(obj.componentColorJson)) {
JSON.parse(obj.componentColorJson).map(item => {
if (item.color) {
dataArr.unshift(["${id} ==='" + item.name + "'", `${item.color}`]);
}
});
}
tiles3dLayer.style = {
color: {
conditions: dataArr
@ -714,6 +656,7 @@ const loadModel = async () => {
};
const { result } = await getSystemConfig(requestData);
console.log(result, "视点飞行6666666");
if (result) {
console.log(JSON.parse(result.configValue), "视点飞行6666666");
let responseArr = JSON.parse(result.configValue);
let viewPoints: any = [];
@ -725,7 +668,7 @@ const loadModel = async () => {
// 视角切换（分步执行）
viewerChange(viewPoints);
flyOperateShow.value = true;
// checkModelId(false);
}
};
// 视点飞行视角切换
const viewerChange = (points: any) => {

226
src/views/goverment/largeScreen/components/equipmentAdd.vue
View File

@ -5,20 +5,54 @@
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div>
<div class="operate-btn">
<div :class="operateIndex == 0 ? 'active-btn' : ''" @click="getRelativeData(0)">基础配置</div>
<div :class="operateIndex == 1 ? 'active-btn' : ''" @click="getRelativeData(1)">设备列表</div>
<div :class="operateIndex == 0 ? 'active-btn' : ''" @click="getRelativeData(0)">点位配置</div>
<div :class="operateIndex == 1 ? 'active-btn' : ''" @click="getRelativeData(1)">弹窗配置</div>
<div :class="operateIndex == 2 ? 'active-btn' : ''" @click="getRelativeData(2)">设备列表</div>
</div>
<div class="basic-config" v-show="operateIndex == 0">
<!-- <div class="switch-content">
<div class="switch-content">
<div>
<span>是否启用：</span>
<el-switch v-model="formData.enable" />
<span>横向偏移量：</span>
<el-input-number v-model.number="pointConfig.offsetX" style="width: 120px" controls-position="right" />
</div>
<div>
<span>竖向偏移量：</span>
<el-input-number v-model.number="pointConfig.offsetY" style="width: 120px" controls-position="right" />
</div>
</div>
<div class="popup-style">
<span>点位样式：</span>
<CodeMirror
v-model:code="pointConfig.pointCode"
dark
:codeStyle="{ width: '100%', height: '200px', fontSize: '16px' }"
:disabled="false"
:extensions="extensions"
@ready="onReady"
@change="onChange"
@focus="onFocus"
@blur="onBlur"
/>
</div>
<div class="btn-style">
<el-button type="primary" @click="savePointStyle">保存</el-button>
</div>
</div>
<div class="basic-config" v-show="operateIndex == 1">
<div class="switch-content">
<div>
<span>横向偏移量：</span>
<el-input-number v-model.number="basicConfig.offsetX" style="width: 120px" controls-position="right" />
</div>
<div>
<span>竖向偏移量：</span>
<el-input-number v-model.number="basicConfig.offsetY" style="width: 120px" controls-position="right" />
</div>
</div>
</div> -->
<div class="popup-style">
<span>弹窗样式：</span>
<CodeMirror
v-model:code="code"
v-model:code="basicConfig.popupCode"
dark
:codeStyle="{ width: '100%', height: '200px', fontSize: '16px' }"
:disabled="false"
@ -47,14 +81,14 @@
/>
<component :is="previewComp"></component> -->
</div>
<div class="equip-list" v-show="operateIndex == 1">
<div class="type-select">
<div class="equip-list" v-show="operateIndex == 2">
<!-- <div class="type-select">
<span>选择类型：</span>
<el-radio-group v-model="formData.showType">
<el-radio :label="1">类型1</el-radio>
<el-radio :label="2">类型2</el-radio>
</el-radio-group>
</div>
</div> -->
<el-table
:data="tableData"
rowKey="id"
@ -106,15 +140,23 @@ import {
equipmentEdit,
equipmentDelete
} from "@/api/modules/mapCommon";
const basicConfig = ref({} as any);
const basicConfig = ref({
popupCode: "",
offsetX: 0,
offsetY: 0
} as any);
const tableData = ref<any>([]);
const baseUrl = import.meta.env.VITE_API_URL;
const formData = ref({
enable: false,
showType: 1
enable: false
});
const operateIndex = ref(0);
const code = ref();
const pointConfig: any = ref({
pointCode: "",
offsetX: 0,
offsetY: 0
});
const pointPreviewComp = shallowRef();
const previewComp = shallowRef();
const extensions = [vue(), oneDark];
import CodeMirror from "@/components/CodeMirror/index.vue";
@ -127,8 +169,10 @@ let parentGraphicLayer = props.graphicInstance;
const getRelativeData = (index: any) => {
operateIndex.value = index;
if (index == 0) {
getStyle();
getPointStyle();
} else if (index == 1) {
getStyle();
} else if (index == 2) {
getEquipList();
}
};
@ -140,11 +184,31 @@ const getEquipList = async () => {
}
console.log(res);
};
// 保存点位样式
const savePointStyle = async () => {
let requestData: any = {
style: pointConfig.value.pointCode,
offsetX: pointConfig.value.offsetX,
offsetY: pointConfig.value.offsetY,
category: props.equipTypeDictLabel,
type: 1
};
if (pointConfig.value.id) {
requestData.id = pointConfig.value.id;
}
const res = await equipmentStyleEdit(requestData);
if (res) {
ElMessage.success("保存成功");
}
};
// 保存基础配置
const saveStyle = async () => {
let requestData: any = {
style: code.value,
category: props.equipTypeDictLabel
style: basicConfig.value.popupCode,
offsetX: basicConfig.value.offsetX,
offsetY: basicConfig.value.offsetY,
category: props.equipTypeDictLabel,
type: 2
};
if (basicConfig.value.id) {
requestData.id = basicConfig.value.id;
@ -154,12 +218,21 @@ const saveStyle = async () => {
ElMessage.success("保存成功");
}
};
// 获取点位配置
const getPointStyle = async () => {
const res = await equipmentStyleGet({ category: props.equipTypeDictLabel, type: 1 }); // 获取点位样式
if (res.result) {
pointConfig.value = { ...res.result };
pointConfig.value.pointCode = res.result.style;
onPointBlur();
}
};
// 获取基础配置
const getStyle = async () => {
const res = await equipmentStyleGet({ category: props.equipTypeDictLabel }); // 获取设备样式
const res = await equipmentStyleGet({ category: props.equipTypeDictLabel, type: 2 }); // 获取弹窗样式
if (res.result) {
basicConfig.value = { ...res.result };
code.value = res.result.style;
basicConfig.value.popupCode = res.result.style;
onBlur();
}
};
@ -179,12 +252,16 @@ const saveEdit = async (row: any) => {
}
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 ${getTypeStyle(2)}" ></div>
<div class="mars3d-camera-point ${getTypeStyle(3)}"></div>
`
html: () => {
const dom = initVue3Popup(pointPreviewComp.value, {
name: row.name
});
// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
return dom;
},
offsetX: +pointConfig.value.offsetX,
offsetY: +pointConfig.value.offsetY,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
});
}
row.isEdit = false;
@ -215,30 +292,20 @@ const newPoint = () => {
}
});
};
// 根据不同类型获取图片
const getTypeImage = () => {
let img: any;
if (formData.value.showType == 1) {
img = new URL("@/assets/images/Mars3DImg/icon/camera.svg", import.meta.url).href;
} else if (formData.value.showType == 2) {
img = new URL("@/assets/images/Mars3DImg/icon/fire.png", import.meta.url).href;
}
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 (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) {
@ -252,14 +319,13 @@ 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 ${getTypeStyle(1)}">
<span class="mars3d-camera-text"></span>
</div>
<div class="mars3d-camera-line ${getTypeStyle(2)}" ></div>
<div class="mars3d-camera-point ${getTypeStyle(3)}"></div>
`,
offsetX: -51,
offsetY: 4,
html: () => {
const dom = initVue3Popup(pointPreviewComp.value, { name: "你好啊" });
// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
return dom;
},
offsetX: +pointConfig.value.offsetX,
offsetY: +pointConfig.value.offsetY,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
}
// popup: `${code.value}`,
@ -273,9 +339,6 @@ const addRandomGraphicByCount = async (point: any) => {
// verticalOrigin: Cesium.VerticalOrigin.CENTER
// }
});
// const comp = () => import("http://jxjzw.zhgdyun.com:9001/wisdomsitezw/655c756d12b3a489008940c9.vue");
// console.log(comp);
// graphicImg.bindPopup("all");
graphicImg.bindPopup(
(event: any) => {
const attr = event.graphic.attr || {};
@ -286,14 +349,13 @@ const addRandomGraphicByCount = async (point: any) => {
// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
return dom;
},
{ offsetY: -170, offsetX: 50 }
{ offsetY: +basicConfig.value.offsetY, offsetX: +basicConfig.value.offsetX }
);
graphicLayer.addGraphic(graphicImg);
console.log(graphicImg);
const obj = {
monitorId: graphicImg.id,
name: graphicImg.name,
type: formData.value.showType,
lng: point.lng,
lat: point.lat,
alt: point.alt,
@ -303,7 +365,6 @@ const addRandomGraphicByCount = async (point: any) => {
name: obj.name,
monitorId: obj.monitorId,
category: props.equipTypeDictLabel,
type: formData.value.showType,
lng: point.lng,
lat: point.lat,
alt: point.alt
@ -335,15 +396,38 @@ const onChange = (value: string, viewUpdate: any) => {
const onFocus = (viewUpdate: any) => {
console.log("focus:", viewUpdate);
};
const onBlur = () => {
console.log(code.value, "6666666666777777777");
const onPointBlur = () => {
try {
const options = {
moduleCache: {
vue: Vue
},
async getFile() {
return code.value;
return pointConfig.value.pointCode;
},
addStyle(textContent) {
const style = Object.assign(document.createElement("style"), {
textContent
});
const ref = document.head.getElementsByTagName("style")[0] || null;
document.head.insertBefore(style, ref);
}
};
const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options));
console.log(comp);
pointPreviewComp.value = comp;
} catch (err) {
console.error(err);
}
};
const onBlur = () => {
try {
const options = {
moduleCache: {
vue: Vue
},
async getFile() {
return basicConfig.value.popupCode;
},
addStyle(textContent) {
const style = Object.assign(document.createElement("style"), {
@ -371,7 +455,7 @@ onMounted(async () => {
console.log("创建完成", e);
addRandomGraphicByCount(e.graphic.point);
});
await getStyle();
await getPointStyle();
});
onUnmounted(() => {
map = null;
@ -428,7 +512,7 @@ onUnmounted(() => {
}
.operate-btn {
@include flex;
justify-content: center;
justify-content: space-around;
margin: 0 15px;
margin-top: 10px;
border-bottom: 1px solid #50a4e4;
@ -439,9 +523,9 @@ onUnmounted(() => {
border-bottom: 2px solid transparent;
cursor: pointer;
}
div:nth-child(1) {
margin-right: 40px;
}
// div:nth-child(1) {
// margin-right: 40px;
// }
.active-btn {
color: #4f88e5;
border-color: #4f88e5;
@ -453,7 +537,7 @@ onUnmounted(() => {
padding: 15px 20px;
.switch-content {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 5px;
> div {
@include flex;
@ -461,9 +545,6 @@ onUnmounted(() => {
color: white;
font-size: 14px;
}
span:last-child {
margin-left: 5px;
}
}
}
.popup-style {
@ -617,5 +698,10 @@ onUnmounted(() => {
.el-popper__arrow::before {
display: none;
}
.el-input-number__increase,
.el-input-number__decrease {
background-color: transparent;
color: white;
}
}
</style>

62
src/views/goverment/largeScreen/components/equipmentAddTest.vue → src/views/goverment/largeScreen/components/equipmentAddTest1.vue
View File

@ -5,40 +5,10 @@
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
</div>
<div class="operate-btn">
<div :class="operateIndex == 0 ? 'active-btn' : ''" @click="getRelativeData(0)">点位配置</div>
<div :class="operateIndex == 1 ? 'active-btn' : ''" @click="getRelativeData(1)">弹窗配置</div>
<div :class="operateIndex == 2 ? 'active-btn' : ''" @click="getRelativeData(2)">设备列表</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">
<div>
<span>横向偏移量：</span>
<el-input-number v-model.number="pointConfig.offsetX" style="width: 120px" controls-position="right" />
</div>
<div>
<span>竖向偏移量：</span>
<el-input-number v-model.number="pointConfig.offsetY" style="width: 120px" controls-position="right" />
</div>
</div>
<div class="popup-style">
<span>点位样式：</span>
<CodeMirror
v-model:code="pointConfig.pointCode"
dark
:codeStyle="{ width: '100%', height: '200px', fontSize: '16px' }"
:disabled="false"
:extensions="extensions"
@ready="onReady"
@change="onChange"
@focus="onFocus"
@blur="onBlur"
/>
</div>
<div class="btn-style">
<el-button type="primary" @click="saveStyle">保存</el-button>
</div>
</div>
<div class="basic-config" v-show="operateIndex == 1">
<!-- <div class="switch-content">
<div>
<span>是否启用：</span>
@ -77,7 +47,7 @@
/>
<component :is="previewComp"></component> -->
</div>
<div class="equip-list" v-show="operateIndex == 2">
<div class="equip-list" v-show="operateIndex == 1">
<div class="type-select">
<span>选择类型：</span>
<el-radio-group v-model="formData.showType">
@ -144,11 +114,6 @@ const formData = ref({
showType: 1
});
const operateIndex = ref(0);
const pointConfig = ref({
pointCode: "",
offsetX: 0,
offsetY: 0
});
const code = ref();
const previewComp = shallowRef();
const extensions = [vue(), oneDark];
@ -162,9 +127,8 @@ let parentGraphicLayer = props.graphicInstance;
const getRelativeData = (index: any) => {
operateIndex.value = index;
if (index == 0) {
} else if (index == 1) {
getStyle();
} else if (index == 2) {
} else if (index == 1) {
getEquipList();
}
};
@ -464,7 +428,7 @@ onUnmounted(() => {
}
.operate-btn {
@include flex;
justify-content: space-around;
justify-content: center;
margin: 0 15px;
margin-top: 10px;
border-bottom: 1px solid #50a4e4;
@ -475,9 +439,9 @@ onUnmounted(() => {
border-bottom: 2px solid transparent;
cursor: pointer;
}
// div:nth-child(1) {
// margin-right: 40px;
// }
div:nth-child(1) {
margin-right: 40px;
}
.active-btn {
color: #4f88e5;
border-color: #4f88e5;
@ -489,7 +453,7 @@ onUnmounted(() => {
padding: 15px 20px;
.switch-content {
display: flex;
justify-content: space-between;
flex-direction: column;
margin: 0 5px;
> div {
@include flex;
@ -497,6 +461,9 @@ onUnmounted(() => {
color: white;
font-size: 14px;
}
span:last-child {
margin-left: 5px;
}
}
}
.popup-style {
@ -650,10 +617,5 @@ onUnmounted(() => {
.el-popper__arrow::before {
display: none;
}
.el-input-number__increase,
.el-input-number__decrease {
background-color: transparent;
color: white;
}
}
</style>

187
src/views/goverment/largeScreen/index.vue
View File

@ -430,8 +430,8 @@ onMounted(async () => {
configKey: "mapConfig"
};
const { result } = await getSystemConfig(requestData);
console.log(JSON.parse(result.configValue), "地图配置");
if (result) {
console.log(JSON.parse(result.configValue), "地图配置");
configJson.value = JSON.parse(result.configValue);
} else {
configJson.value = ConfigJson.map3d;
@ -513,31 +513,9 @@ 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 popupStyle = async (id: any) => {
const res = await equipmentStyleGet({ category: id }); // 获取设备样式
const pointStyle = async (id: any) => {
const res = await equipmentStyleGet({ category: id, type: 1 }); // 获取设备样式
if (!res.result) {
return;
}
@ -558,11 +536,37 @@ const popupStyle = async (id: any) => {
};
const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options));
console.log(comp, "返回的组件···········");
return comp;
return { codeValue: comp, offsetX: res.result.offsetX, offsetY: res.result.offsetY };
};
// 设备类型下的设备绑定的弹窗样式
const popupStyle = async (id: any) => {
const res = await equipmentStyleGet({ category: id, type: 1 }); // 获取设备样式
if (!res.result) {
return;
}
const options = {
moduleCache: {
vue: Vue
},
async getFile() {
return res.result.style;
},
addStyle(textContent: any) {
const style = Object.assign(document.createElement("style"), {
textContent
});
const ref = document.head.getElementsByTagName("style")[0] || null;
document.head.insertBefore(style, ref);
}
};
const comp = defineAsyncComponent(() => loadModule("textPopup.vue", options));
console.log(comp, "返回的组件···········");
return { codeValue: comp, offsetX: res.result.offsetX, offsetY: res.result.offsetY };
};
// 获取设备类型下的设备列表
const getEquipmentList = async (id: any) => {
const res = await equipmentList({ category: id });
const resPointStyle = await pointStyle(id);
const resStyle = await popupStyle(id);
if (res.result && res.result.length > 0) {
let arr: any = res.result;
@ -571,14 +575,12 @@ const getEquipmentList = async (id: any) => {
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,
html: () => {
const dom = initVue3Popup(resPointStyle?.codeValue, { name: item.name });
return dom;
},
offsetX: +resPointStyle?.offsetX,
offsetY: +resPointStyle?.offsetY,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
}
});
@ -589,12 +591,12 @@ const getEquipmentList = async (id: any) => {
if (!attr) {
return;
}
const dom = initVue3Popup(resStyle, { name: "你好啊" });
const dom = initVue3Popup(resStyle?.codeValue, { name: "你好啊" });
// return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: dom, attr: attr });
console.log(dom);
return dom;
},
{ offsetY: -170, offsetX: 50 }
{ offsetY: +resStyle?.offsetX, offsetX: +resStyle?.offsetY }
);
});
}
@ -2394,72 +2396,53 @@ 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;
height: 30px;
// animation: cameraMove 1s linear infinite alternate;
// -webkit-animation: cameraMove 1s linear infinite alternate;
}
.mars3d-camera-text {
color: white;
font-size: 20px;
}
@keyframes cameraMove {
from {
margin-top: 20px;
}
to {
margin-top: 0px;
}
}
@-webkit-keyframes cameraMove {
from {
margin-top: 20px;
}
to {
margin-top: 0px;
}
}
.mars3d-camera-line {
height: 120px;
width: 5px;
margin-top: 10px;
// border-left: 3px dashed #5b8fee;
margin-left: calc(50% - 1px);
}
.mars3d-camera-point {
border-radius: 50%;
width: 8px;
height: 8px;
margin-left: calc(50% - 3px);
// background-color: #5b8fee;
}
// .mars3d-camera-content {
// width: 100px;
// height: 30px;
// display: flex;
// align-items: center;
// justify-content: center;
// }
// .mars3d-camera-img {
// width: 30px;
// height: 30px;
// // animation: cameraMove 1s linear infinite alternate;
// // -webkit-animation: cameraMove 1s linear infinite alternate;
// }
// .mars3d-camera-text {
// color: white;
// font-size: 20px;
// }
// @keyframes cameraMove {
// from {
// margin-top: 20px;
// }
// to {
// margin-top: 0px;
// }
// }
// @-webkit-keyframes cameraMove {
// from {
// margin-top: 20px;
// }
// to {
// margin-top: 0px;
// }
// }
// .mars3d-camera-line {
// height: 120px;
// width: 5px;
// margin-top: 10px;
// // border-left: 3px dashed #5b8fee;
// margin-left: calc(50% - 1px);
// }
// .mars3d-camera-point {
// border-radius: 50%;
// width: 8px;
// height: 8px;
// margin-left: calc(50% - 3px);
// // background-color: #5b8fee;
// }
// .animation-spaceInDown {
// animation-duration: 1s;
// animation-fill-mode: both;