+ "
+ >
是否确定删除该设备
@@ -49,45 +66,38 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
-import { useModelSceneStore } from "@/store/modelSceneStore";
+import { deleteEquipment, initData } from "./request";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
const edit = ref(null);
-const store = useModelSceneStore();
-
+let modelList = ref(null);
let demo; //定义demo对象
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
-const params = defineProps(["isedit", "tunnelId", "tunnelLength"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
-
+const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit);
-
let tunnelId = reactive(params.tunnelId);
-console.log(tunnelId);
-console.log(params.tunnelLength);
watch(
() => params.tunnelLength,
(now) => {
- params.tunnelLength = now
+ params.tunnelLength = now;
console.log(params.tunnelLength);
- pointGap = now / 20
+ pointGap = now / 20;
},
{ deep: true }
-)
+);
let pointGap = reactive(params.tunnelLength);
-
onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
-
const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
@@ -106,12 +116,7 @@ async function handleMounted() {
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
- watch(
- () => params.tunnelId,
- async () => {
- const text = await store.initData(params.tunnelId);
- }
- );
+
// 初始化设备模型
try {
const map = new Map();
@@ -119,16 +124,15 @@ async function handleMounted() {
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
demo.initDevicesModel(map);
// 初始化
- const equipmentList = await store.getEquipmentList();
- demo.editTunnelInit(equipmentList);
+ modelList.value = await initData(params.tunnelId, params.form);
+ console.log("init", params.tunnelId);
+ demo.editTunnelInit(modelList.value);
} catch (err) {
ElMessage({
- message: "场景加载异常！",
+ message: "场景初始化异常！",
type: "warning",
});
}
-
-
}
// 每个模型加载回调
@@ -139,7 +143,7 @@ function loadModel(path) {
(obj) => {
resolve(obj);
},
- (xhr) => { },
+ (xhr) => {},
(err) => {
reject(err);
}
@@ -225,8 +229,7 @@ function handleRemoveEqu() {
// 对话框确认删除
function handleConfirmAddEqu() {
console.log("target:", targetP.value.info);
- store
- .deleteEquipment(10000, params.tunnelId, targetP.value.info.equipmentId)
+ deleteEquipment(targetP.value.info.equipmentId, pointGap)
.then((res) => {
demo.removeEquipment(targetP.value);
centerDialogVisible.value = false;
@@ -235,9 +238,9 @@ function handleConfirmAddEqu() {
type: "success",
});
})
- .catch((err) => {
+ .catch((res) => {
ElMessage({
- message: "请求异常！",
+ message: "删除失败！",
type: "warning",
});
});
diff --git a/src/components/content/tunnelScene/editEquComp/editDialog.vue b/src/components/content/tunnelScene/editEquComp/editDialog.vue
index b188143..a9fc3cb 100644
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -48,9 +48,8 @@ import InputNum from "./childComps/InputNum.vue";
import SelectInput from "./childComps/SelectInput.vue";
import { getEquipmentType, getEquipment } from "@/api/tunnelScene";
import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
-import { useModelSceneStore } from "@/store/modelSceneStore";
import { ElMessage } from "element-plus";
-
+import { saveEquipment, initData } from "../request";
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
const params = defineProps([
"pointNum",
@@ -58,13 +57,14 @@ const params = defineProps([
"tunnelId",
"position",
"hasEquipment",
+ "form",
]);
-// 当前风压
let p = ref(57);
const equipment = ref(null);
const equipmentType = ref(null);
-const store = useModelSceneStore();
+
+let maxConstructionLength = ref(0);
//计算锚点之间距离
const pointDistance_str = computed(
() =>
@@ -73,18 +73,35 @@ const pointDistance_str = computed(
}米`
);
+watch(
+ () => params.form,
+ () => {
+ initData(params.tunnelId, params.form);
+ },
+ {
+ deep: true,
+ }
+);
+
// 请求数据模型
const equipmentSetting = reactive({
+ equipmentId: null,
+ equipmentName: "",
equipmentType: "", //设备类型
- chooseEquipment: null, //设备选择(设备名称)
+ position: "",
threshold: "", //阈值
+ typeKey: null, //设备选择(设备名称)
});
// 绑定选择的设备类型
function handleTypeChange(optionItem) {
equipmentSetting.equipmentType = optionItem.value;
+ console.log("option", equipmentSetting);
}
function handleEquipmentChange(equipmentItem) {
- equipmentSetting.chooseEquipment = equipmentItem;
+ equipmentSetting.equipmentName = equipmentItem.label;
+ equipmentSetting.equipmentId = equipmentItem.equipmentId;
+ equipmentSetting.typeKey = equipmentItem.value;
+ console.log("option", equipmentSetting);
}
// 设备类型选项参数
let options = reactive([{ label: "暂无数据", value: "" }]);
@@ -150,25 +167,18 @@ function addEquipment() {
});
return;
}
- if (!equipmentSetting.equipmentType || !equipmentSetting.chooseEquipment) {
+ if (!equipmentSetting.equipmentType || !equipmentSetting.equipmentId) {
ElMessage({
message: "选项不能为空！",
type: "warning",
});
return;
}
-
equipmentSetting.position = params.position;
// 合法请求
- store
- .saveSceneData(10000, 1, equipmentSetting)
+ saveEquipment(equipmentSetting, params.pointGap)
.then((res) => {
emit("addEquipment", equipmentSetting);
- equipmentSetting.chooseEquipment = null;
- equipmentSetting.equipmentType = "";
- equipmentSetting.threshold = "";
- equipment.value.reset();
- equipmentType.value.reset();
ElMessage({
message: "添加成功！",
type: "success",
@@ -176,7 +186,7 @@ function addEquipment() {
})
.catch((err) => {
ElMessage({
- message: "请求异常！",
+ message: "添加异常！",
type: "warning",
});
});
diff --git a/src/components/content/tunnelScene/request/index.js b/src/components/content/tunnelScene/request/index.js
new file mode 100644
index 0000000..601b910
--- /dev/null
+++ b/src/components/content/tunnelScene/request/index.js
@@ -0,0 +1,128 @@
+import { apiSaveEquipment, initSceneData } from "@/api/tunnelScene";
+import { toRaw } from "vue";
+let modelEquipmentList = [];
+let originData = null;
+// 初始化当前隧道数据并保存在本地
+export const initData = (tunnelId, otherInfo) => {
+ return new Promise((resolve, reject) => {
+ initSceneData(tunnelId)
+ .then((res) => {
+ originData = toRaw(otherInfo);
+ if (res.data.tunnelThreeConfig) {
+ console.log("data", res.data);
+ modelEquipmentList = JSON.parse(res.data.tunnelThreeConfig);
+ }
+ console.log("test", modelEquipmentList, originData);
+ resolve(modelEquipmentList);
+ })
+ .catch((Error) => {
+ ElMessage.error("场景初始化异常！");
+ reject();
+ });
+ });
+};
+
+//保存数据并提交
+export const saveEquipment = (equipmentInfo, pointGap) => {
+ const {
+ constructionLength,
+ isDefault,
+ remarks,
+ serialNumber,
+ siteId,
+ totalLength,
+ tunnelId,
+ tunnelName,
+ } = originData;
+ let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
+ tempModelEquipmentList.push(toRaw(equipmentInfo));
+
+ return new Promise((resolve, reject) => {
+ apiSaveEquipment({
+ constructionLength: autoComputeConstructionLength(
+ tempModelEquipmentList,
+ pointGap
+ ),
+ isDefault,
+ modelEquipmentList: tempModelEquipmentList,
+ remarks,
+ serialNumber,
+ tunnelId,
+ tunnelLength: totalLength,
+ tunnelName,
+ })
+ .then((res) => {
+ if (res?.code === 1000) {
+ modelEquipmentList.push(toRaw(equipmentInfo)); //存入本地
+ resolve();
+ }
+ reject(res);
+ })
+ .catch((err) => {
+ reject();
+ });
+ });
+};
+
+// 删除
+export const deleteEquipment = (equipmentId, pointGap) => {
+ let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆
+ tempModelEquipmentList = tempModelEquipmentList.filter(
+ (item) => item.equipmentId != equipmentId
+ );
+ const {
+ constructionLength,
+ isDefault,
+ remarks,
+ serialNumber,
+ siteId,
+ totalLength,
+ tunnelId,
+ tunnelName,
+ } = originData;
+ return new Promise((resolve, reject) => {
+ apiSaveEquipment({
+ constructionLength: autoComputeConstructionLength(
+ tempModelEquipmentList,
+ pointGap
+ ),
+ isDefault,
+ modelEquipmentList: tempModelEquipmentList,
+ remarks,
+ serialNumber,
+ tunnelId,
+ tunnelLength: totalLength,
+ tunnelName,
+ })
+ .then((res) => {
+ if (res?.code === 1000) {
+ modelEquipmentList = modelEquipmentList.filter(
+ (item) => item.equipmentId != equipmentId
+ );
+ resolve();
+ }
+ reject(res);
+ })
+ .catch((err) => {
+ reject();
+ });
+ });
+};
+
+function autoComputeConstructionLength(modelEquipmentList, pointGap) {
+ let maxLength = 0;
+ modelEquipmentList.forEach((item) => {
+ const length =
+ Number(
+ item.position.substring(
+ item.position.indexOf("_") + 1,
+ item.position.lastIndexOf("_")
+ ) - 1
+ ) * pointGap;
+ if (length > maxLength) {
+ maxLength = length;
+ }
+ });
+ console.log("max", maxLength);
+ return maxLength;
+}
diff --git a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
index b6d0156..766567a 100644
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
@@ -12,10 +12,10 @@ function addEquipment(targetPoint, formInfo) {
if (targetPoint.hasDevice) {
return;
}
-
+ console.log("info", formInfo);
switch (formInfo.equipmentType) {
case "frequency":
- handleFanEqu.call(this, targetPoint, formInfo.chooseEquipment);
+ handleFanEqu.call(this, targetPoint, formInfo);
break;
// 还没有风压阀的模型，所以先用其他设备传感器实现
// case "valve":
@@ -23,7 +23,7 @@ function addEquipment(targetPoint, formInfo) {
// break;
case "windPressure":
case "sensor":
- handleOtherEqu.call(this, targetPoint, formInfo.chooseEquipment);
+ handleOtherEqu.call(this, targetPoint, formInfo);
break;
default:
break;
@@ -37,9 +37,6 @@ function addEquipment(targetPoint, formInfo) {
// }
-
-
-
// 其他传感器
function handleOtherEqu(targetPoint, equipmentInfo) {
const equMesh = this.equMap.get("equ_sensors").clone();
@@ -47,8 +44,7 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
equMesh.position.copy(worldP);
//设备添加标签
- const tag = EquipmentTag(equipmentInfo.label);
- console.log(equipmentInfo);
+ const tag = EquipmentTag(equipmentInfo.equipmentName);
equMesh.getObjectByName("tag").material = tag;
if (/tr$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 2;
@@ -71,39 +67,38 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
targetPoint.scale.set(0.03, 0.06, 0.05);
this.scene.add(equMesh);
targetPoint.visible = false;
- targetPoint.hasWall = true
+ targetPoint.hasWall = true;
//处理风压阀的代码片段
- let lineIndex = targetPoint.name.slice(7, 9)
+ let lineIndex = targetPoint.name.slice(7, 9);
for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) {
- let wall = 'wall_' + '0' + line
- this.scene.getObjectByName(wall).visible = true
- let point = 'point_' + '00' + line + '_tc'
- console.log(this.scene.getObjectByName(point));
- this.scene.getObjectByName(point).visible = false
- this.scene.getObjectByName(point).layers.set(-2)
+ let wall = "wall_" + "0" + line;
+ this.scene.getObjectByName(wall).visible = true;
+ let point = "point_" + "00" + line + "_tc";
+ this.scene.getObjectByName(point).visible = false;
+ this.scene.getObjectByName(point).layers.set(-2);
if (this.scene.getObjectByName(point).hasDevice == true) {
- let EquID = this.scene.getObjectByName(point).info.id
- this.scene.getObjectById(EquID).visible = false
+ let EquID = this.scene.getObjectByName(point).info.id;
+ this.scene.getObjectById(EquID).visible = false;
}
} else if (line >= 10) {
- let wall = 'wall_' + line
- this.scene.getObjectByName(wall).visible = true
- let point = 'point_' + '0' + line + '_tc'
- this.scene.getObjectByName(point).visible = false
- this.scene.getObjectByName(point).layers.set(-2)
+ let wall = "wall_" + line;
+ this.scene.getObjectByName(wall).visible = true;
+ let point = "point_" + "0" + line + "_tc";
+ this.scene.getObjectByName(point).visible = false;
+ this.scene.getObjectByName(point).layers.set(-2);
if (this.scene.getObjectByName(point).hasDevice == true) {
- let EquID = this.scene.getObjectByName(point).info.id
- this.scene.getObjectById(EquID).visible = false
+ let EquID = this.scene.getObjectByName(point).info.id;
+ this.scene.getObjectById(EquID).visible = false;
}
}
//处理21行的设备和附着点
- let point = 'point_' + '0' + 21 + '_tc'
- this.scene.getObjectByName(point).visible = false
- this.scene.getObjectByName(point).layers.set(-2)
+ let point = "point_" + "0" + 21 + "_tc";
+ this.scene.getObjectByName(point).visible = false;
+ this.scene.getObjectByName(point).layers.set(-2);
if (this.scene.getObjectByName(point).hasDevice == true) {
- let EquID = this.scene.getObjectByName(point).info.id
- this.scene.getObjectById(EquID).visible = false
+ let EquID = this.scene.getObjectByName(point).info.id;
+ this.scene.getObjectById(EquID).visible = false;
}
}
// this.scene.getObjectByName('wall_01').visible = true
@@ -117,7 +112,6 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
// 1.先取出当前点击添加设备锚点的行数
// 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取)
// 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中
-
}
// 风机
@@ -153,7 +147,6 @@ function handleFanEqu(
fanSpin.onUpdate((obj) => {
fanLeaf.rotation.z = obj.rotation;
});
-
this.fanSpinArray.push(fanSpin);
}
@@ -162,39 +155,39 @@ function removeEquipment(targetPoint) {
//删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
if (!targetPoint.hasDevice) return;
if (targetPoint.hasWall == true) {
- let lineIndex = targetPoint.name.slice(7, 9)
+ let lineIndex = targetPoint.name.slice(7, 9);
for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) {
- let wall = 'wall_' + '0' + line
- this.scene.getObjectByName(wall).visible = false
- let point = 'point_' + '00' + line + '_tc'
+ let wall = "wall_" + "0" + line;
+ this.scene.getObjectByName(wall).visible = false;
+ let point = "point_" + "00" + line + "_tc";
console.log(this.scene.getObjectByName(point));
- this.scene.getObjectByName(point).visible = true
- this.scene.getObjectByName(point).layers.set(0)
+ this.scene.getObjectByName(point).visible = true;
+ this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) {
- this.scene.getObjectByName(point).visible = false
- let EquID = this.scene.getObjectByName(point).info.id
- this.scene.getObjectById(EquID).visible = true
+ this.scene.getObjectByName(point).visible = false;
+ let EquID = this.scene.getObjectByName(point).info.id;
+ this.scene.getObjectById(EquID).visible = true;
}
} else if (line >= 10) {
- let wall = 'wall_' + line
- this.scene.getObjectByName(wall).visible = false
- let point = 'point_' + '0' + line + '_tc'
- this.scene.getObjectByName(point).visible = true
- this.scene.getObjectByName(point).layers.set(0)
+ let wall = "wall_" + line;
+ this.scene.getObjectByName(wall).visible = false;
+ let point = "point_" + "0" + line + "_tc";
+ this.scene.getObjectByName(point).visible = true;
+ this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) {
- this.scene.getObjectByName(point).visible = false
- let EquID = this.scene.getObjectByName(point).info.id
- this.scene.getObjectById(EquID).visible = true
+ this.scene.getObjectByName(point).visible = false;
+ let EquID = this.scene.getObjectByName(point).info.id;
+ this.scene.getObjectById(EquID).visible = true;
}
}
//处理21行的设备和附着点
- let point = 'point_' + '0' + 21 + '_tc'
- this.scene.getObjectByName(point).visible = true
- this.scene.getObjectByName(point).layers.set(0)
+ let point = "point_" + "0" + 21 + "_tc";
+ this.scene.getObjectByName(point).visible = true;
+ this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) {
- let EquID = this.scene.getObjectByName(point).info.id
- this.scene.getObjectById(EquID).visible = true
+ let EquID = this.scene.getObjectByName(point).info.id;
+ this.scene.getObjectById(EquID).visible = true;
}
}
}
diff --git a/src/store/modelSceneStore.js b/src/store/modelSceneStore.js
index 9b101ef..60178a4 100644
--- a/src/store/modelSceneStore.js
+++ b/src/store/modelSceneStore.js
@@ -3,23 +3,22 @@ import { ref } from "vue";
import { saveEquipment, initSceneData } from "../api/tunnelScene";
import { ElMessage } from "element-plus";
export const useModelSceneStore = defineStore("modelSceneData", () => {
- let equipmentList = ref("[]");
+ let equipmentList = ref([]);
let allEditList = ref({});
function initData(tunnelId = 1) {
initSceneData(tunnelId)
.then((res) => {
- equipmentList.value = res.data.tunnelThreeConfig;
+ // equipmentList.value = res.data.tunnelThreeConfig;
+ console.log("初始化的数据");
})
.catch((Error) => {
ElMessage.error("场景初始化异常！");
});
}
//默认初始化1号隧道
- function saveSceneData(constructionLength, tunnelId, modelData) {
- const temp = JSON.parse(equipmentList.value);
- temp.push(modelData);
- equipmentList.value = JSON.stringify(temp);
- console.log("save:", equipmentList.value);
+ function saveSceneData(data) {
+ equipmentList.value.push(data);
+
return saveEquipment(constructionLength, tunnelId, equipmentList.value);
}
// 删除设备
@@ -39,7 +38,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
resolve(JSON.parse(equipmentList.value));
})
.catch((Error) => {
- ElMessage.error("场景初始化异常！");
+ // ElMessage.error("场景初始化异常！");
reject();
});
});
@@ -49,6 +48,6 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
initData,
saveSceneData,
deleteEquipment,
- getEquipmentList
+ getEquipmentList,
};
});
diff --git a/src/views/edit/edit.vue b/src/views/edit/edit.vue
index 75c3adc..7d3d92f 100644
--- a/src/views/edit/edit.vue
+++ b/src/views/edit/edit.vue
@@ -7,24 +7,24 @@
-
- 设备管理
-
-
- 保存
-
+
设备管理
+
保存
-
+
-
+
-
+
@@ -33,53 +33,60 @@
-
+
-
+