odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

唐润平：接口重写

Browse Source
This commit is contained in:
trp
2023-12-29 13:09:46 +08:00
parent abdbbbda31
commit 20bfc32d08
7 changed files with 314 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/tunnelScene.js
View File

@@ -42,3 +42,12 @@ export const saveEquipment = (
}, },
}); });
}; };
// 保存模型(新增)
export const apiSaveEquipment = (data) => {
return request({
url: "/tunnel/model/details",
method: "put",
data,
});
};

71
src/components/content/tunnelScene/TunnelScene.vue
View File

@@ -3,17 +3,34 @@
<div id="cvs" ref="content"></div> <div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" /> <dev-info ref="info" :devInfo="devInfo" />
<!-- 这里的预览模式需要做成不能修改的模式 --> <!-- 这里的预览模式需要做成不能修改的模式 -->
<edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel" <edit-dialog
:hasDev="hasDevice" :pointNum="pointNum" :tunnelId="tunnelId" :position="targetP?.name" :hasEquipment="hasDevice" ref="edit"
:pointGap="pointGap" /> @addEquipment="handleAddEqu"
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style=" @removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
:tunnelId="params.tunnelId"
:position="targetP?.name"
:hasEquipment="hasDevice"
:pointGap="pointGap"
:form="params.form"
/>
<el-dialog
v-model="centerDialogVisible"
width="30%"
destroy-on-close
center
:show-close="false"
style="
margin: 20% auto; margin: 20% auto;
width: 569px; width: 569px;
height: 330px; height: 330px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
"> "
>
<p id="remove-title">是否确定删除该设备</p> <p id="remove-title">是否确定删除该设备</p>
<div class="btn"> <div class="btn">
<button @click="centerDialogVisible = false">取消</button> <button @click="centerDialogVisible = false">取消</button>
@@ -49,45 +66,38 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { onMounted, reactive, ref, watch } from "vue"; import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore"; import { deleteEquipment, initData } from "./request";
// 获取html标签跟随组件dom // 获取html标签跟随组件dom
const content = ref(null); const content = ref(null);
const info = ref(null); const info = ref(null);
const edit = ref(null); const edit = ref(null);
const store = useModelSceneStore(); let modelList = ref(null);
let demo; //定义demo对象 let demo; //定义demo对象
const loader = new OBJLoader(); const loader = new OBJLoader();
let hdrLoader = new RGBELoader(); let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding; let backColorSet = three.sRGBEncoding;
const params = defineProps(["isedit", "tunnelId", "tunnelLength"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit); let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId); let tunnelId = reactive(params.tunnelId);
console.log(tunnelId);
console.log(params.tunnelLength);
watch( watch(
() => params.tunnelLength, () => params.tunnelLength,
(now) => { (now) => {
params.tunnelLength = now params.tunnelLength = now;
console.log(params.tunnelLength); console.log(params.tunnelLength);
pointGap = now / 20 pointGap = now / 20;
}, },
{ deep: true } { deep: true }
) );
let pointGap = reactive(params.tunnelLength); let pointGap = reactive(params.tunnelLength);
onMounted(handleMounted); onMounted(handleMounted);
// 挂载后回调 // 挂载后回调
async function handleMounted() { async function handleMounted() {
const doms = [info.value.$el, edit.value.$el]; const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value); demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行) //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
@@ -106,12 +116,7 @@ async function handleMounted() {
//加载HDR背景图片 //加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet); demo.loadBackground(hdrLoader, backColorSet);
watch(
() => params.tunnelId,
async () => {
const text = await store.initData(params.tunnelId);
}
);
// 初始化设备模型 // 初始化设备模型
try { try {
const map = new Map(); const map = new Map();
@@ -119,16 +124,15 @@ async function handleMounted() {
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj")); map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
demo.initDevicesModel(map); demo.initDevicesModel(map);
// 初始化 // 初始化
const equipmentList = await store.getEquipmentList(); modelList.value = await initData(params.tunnelId, params.form);
demo.editTunnelInit(equipmentList); console.log("init", params.tunnelId);
demo.editTunnelInit(modelList.value);
} catch (err) { } catch (err) {
ElMessage({ ElMessage({
message: "场景加载异常！", message: "场景初始化异常！",
type: "warning", type: "warning",
}); });
} }
} }
// 每个模型加载回调 // 每个模型加载回调
@@ -139,7 +143,7 @@ function loadModel(path) {
(obj) => { (obj) => {
resolve(obj); resolve(obj);
}, },
(xhr) => { }, (xhr) => {},
(err) => { (err) => {
reject(err); reject(err);
} }
@@ -225,8 +229,7 @@ function handleRemoveEqu() {
// 对话框确认删除 // 对话框确认删除
function handleConfirmAddEqu() { function handleConfirmAddEqu() {
console.log("target:", targetP.value.info); console.log("target:", targetP.value.info);
store deleteEquipment(targetP.value.info.equipmentId, pointGap)
.deleteEquipment(10000, params.tunnelId, targetP.value.info.equipmentId)
.then((res) => { .then((res) => {
demo.removeEquipment(targetP.value); demo.removeEquipment(targetP.value);
centerDialogVisible.value = false; centerDialogVisible.value = false;
@@ -235,9 +238,9 @@ function handleConfirmAddEqu() {
type: "success", type: "success",
}); });
}) })
.catch((err) => { .catch((res) => {
ElMessage({ ElMessage({
message: "请求异常！", message: "删除失败！",
type: "warning", type: "warning",
}); });
}); });

42
src/components/content/tunnelScene/editEquComp/editDialog.vue
View File

@@ -48,9 +48,8 @@ import InputNum from "./childComps/InputNum.vue";
import SelectInput from "./childComps/SelectInput.vue"; import SelectInput from "./childComps/SelectInput.vue";
import { getEquipmentType, getEquipment } from "@/api/tunnelScene"; import { getEquipmentType, getEquipment } from "@/api/tunnelScene";
import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue"; import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { saveEquipment, initData } from "../request";
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]); const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
const params = defineProps([ const params = defineProps([
"pointNum", "pointNum",
@@ -58,13 +57,14 @@ const params = defineProps([
"tunnelId", "tunnelId",
"position", "position",
"hasEquipment", "hasEquipment",
"form",
]); ]);
// 当前风压
let p = ref(57); let p = ref(57);
const equipment = ref(null); const equipment = ref(null);
const equipmentType = ref(null); const equipmentType = ref(null);
const store = useModelSceneStore();
let maxConstructionLength = ref(0);
//计算锚点之间距离 //计算锚点之间距离
const pointDistance_str = computed( 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({ const equipmentSetting = reactive({
equipmentId: null,
equipmentName: "",
equipmentType: "", //设备类型 equipmentType: "", //设备类型
chooseEquipment: null, //设备选择(设备名称) position: "",
threshold: "", //阈值 threshold: "", //阈值
typeKey: null, //设备选择(设备名称)
}); });
// 绑定选择的设备类型 // 绑定选择的设备类型
function handleTypeChange(optionItem) { function handleTypeChange(optionItem) {
equipmentSetting.equipmentType = optionItem.value; equipmentSetting.equipmentType = optionItem.value;
console.log("option", equipmentSetting);
} }
function handleEquipmentChange(equipmentItem) { 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: "" }]); let options = reactive([{ label: "暂无数据", value: "" }]);
@@ -150,25 +167,18 @@ function addEquipment() {
}); });
return; return;
} }
if (!equipmentSetting.equipmentType || !equipmentSetting.chooseEquipment) { if (!equipmentSetting.equipmentType || !equipmentSetting.equipmentId) {
ElMessage({ ElMessage({
message: "选项不能为空！", message: "选项不能为空！",
type: "warning", type: "warning",
}); });
return; return;
} }
equipmentSetting.position = params.position; equipmentSetting.position = params.position;
// 合法请求 // 合法请求
store saveEquipment(equipmentSetting, params.pointGap)
.saveSceneData(10000, 1, equipmentSetting)
.then((res) => { .then((res) => {
emit("addEquipment", equipmentSetting); emit("addEquipment", equipmentSetting);
equipmentSetting.chooseEquipment = null;
equipmentSetting.equipmentType = "";
equipmentSetting.threshold = "";
equipment.value.reset();
equipmentType.value.reset();
ElMessage({ ElMessage({
message: "添加成功！", message: "添加成功！",
type: "success", type: "success",
@@ -176,7 +186,7 @@ function addEquipment() {
}) })
.catch((err) => { .catch((err) => {
ElMessage({ ElMessage({
message: "请求异常！", message: "添加异常！",
type: "warning", type: "warning",
}); });
}); });

128
src/components/content/tunnelScene/request/index.js Normal file
View File

@@ -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;
}

101
src/components/content/tunnelScene/sceneClass/editEquipment/index.js
View File

@@ -12,10 +12,10 @@ function addEquipment(targetPoint, formInfo) {
if (targetPoint.hasDevice) { if (targetPoint.hasDevice) {
return; return;
} }
console.log("info", formInfo);
switch (formInfo.equipmentType) { switch (formInfo.equipmentType) {
case "frequency": case "frequency":
handleFanEqu.call(this, targetPoint, formInfo.chooseEquipment); handleFanEqu.call(this, targetPoint, formInfo);
break; break;
// 还没有风压阀的模型，所以先用其他设备传感器实现 // 还没有风压阀的模型，所以先用其他设备传感器实现
// case "valve": // case "valve":
@@ -23,7 +23,7 @@ function addEquipment(targetPoint, formInfo) {
// break; // break;
case "windPressure": case "windPressure":
case "sensor": case "sensor":
handleOtherEqu.call(this, targetPoint, formInfo.chooseEquipment); handleOtherEqu.call(this, targetPoint, formInfo);
break; break;
default: default:
break; break;
@@ -37,9 +37,6 @@ function addEquipment(targetPoint, formInfo) {
// } // }
// 其他传感器 // 其他传感器
function handleOtherEqu(targetPoint, equipmentInfo) { function handleOtherEqu(targetPoint, equipmentInfo) {
const equMesh = this.equMap.get("equ_sensors").clone(); const equMesh = this.equMap.get("equ_sensors").clone();
@@ -47,8 +44,7 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
equMesh.position.copy(worldP); equMesh.position.copy(worldP);
//设备添加标签 //设备添加标签
const tag = EquipmentTag(equipmentInfo.label); const tag = EquipmentTag(equipmentInfo.equipmentName);
console.log(equipmentInfo);
equMesh.getObjectByName("tag").material = tag; equMesh.getObjectByName("tag").material = tag;
if (/tr$/.test(targetPoint.name)) { if (/tr$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 2; equMesh.rotation.z = -Math.PI / 2;
@@ -71,39 +67,38 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
targetPoint.scale.set(0.03, 0.06, 0.05); targetPoint.scale.set(0.03, 0.06, 0.05);
this.scene.add(equMesh); this.scene.add(equMesh);
targetPoint.visible = false; 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++) { for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) { if (line < 10) {
let wall = 'wall_' + '0' + line let wall = "wall_" + "0" + line;
this.scene.getObjectByName(wall).visible = true this.scene.getObjectByName(wall).visible = true;
let point = 'point_' + '00' + line + '_tc' let point = "point_" + "00" + line + "_tc";
console.log(this.scene.getObjectByName(point)); this.scene.getObjectByName(point).visible = false;
this.scene.getObjectByName(point).visible = false this.scene.getObjectByName(point).layers.set(-2);
this.scene.getObjectByName(point).layers.set(-2)
if (this.scene.getObjectByName(point).hasDevice == true) { if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = false this.scene.getObjectById(EquID).visible = false;
} }
} else if (line >= 10) { } else if (line >= 10) {
let wall = 'wall_' + line let wall = "wall_" + line;
this.scene.getObjectByName(wall).visible = true this.scene.getObjectByName(wall).visible = true;
let point = 'point_' + '0' + line + '_tc' let point = "point_" + "0" + line + "_tc";
this.scene.getObjectByName(point).visible = false this.scene.getObjectByName(point).visible = false;
this.scene.getObjectByName(point).layers.set(-2) this.scene.getObjectByName(point).layers.set(-2);
if (this.scene.getObjectByName(point).hasDevice == true) { if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = false this.scene.getObjectById(EquID).visible = false;
} }
} }
//处理21行的设备和附着点 //处理21行的设备和附着点
let point = 'point_' + '0' + 21 + '_tc' let point = "point_" + "0" + 21 + "_tc";
this.scene.getObjectByName(point).visible = false this.scene.getObjectByName(point).visible = false;
this.scene.getObjectByName(point).layers.set(-2) this.scene.getObjectByName(point).layers.set(-2);
if (this.scene.getObjectByName(point).hasDevice == true) { if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = false this.scene.getObjectById(EquID).visible = false;
} }
} }
// this.scene.getObjectByName('wall_01').visible = true // this.scene.getObjectByName('wall_01').visible = true
@@ -117,7 +112,6 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
// 1.先取出当前点击添加设备锚点的行数 // 1.先取出当前点击添加设备锚点的行数
// 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取) // 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取)
// 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中 // 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中
} }
// 风机 // 风机
@@ -153,7 +147,6 @@ function handleFanEqu(
fanSpin.onUpdate((obj) => { fanSpin.onUpdate((obj) => {
fanLeaf.rotation.z = obj.rotation; fanLeaf.rotation.z = obj.rotation;
}); });
this.fanSpinArray.push(fanSpin); this.fanSpinArray.push(fanSpin);
} }
@@ -162,39 +155,39 @@ function removeEquipment(targetPoint) {
//删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏 //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
if (!targetPoint.hasDevice) return; if (!targetPoint.hasDevice) return;
if (targetPoint.hasWall == true) { 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++) { for (let line = Number(lineIndex); line <= 20; line++) {
if (line < 10) { if (line < 10) {
let wall = 'wall_' + '0' + line let wall = "wall_" + "0" + line;
this.scene.getObjectByName(wall).visible = false this.scene.getObjectByName(wall).visible = false;
let point = 'point_' + '00' + line + '_tc' let point = "point_" + "00" + line + "_tc";
console.log(this.scene.getObjectByName(point)); console.log(this.scene.getObjectByName(point));
this.scene.getObjectByName(point).visible = true this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0) this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) { if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false this.scene.getObjectByName(point).visible = false;
let EquID = this.scene.getObjectByName(point).info.id let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true this.scene.getObjectById(EquID).visible = true;
} }
} else if (line >= 10) { } else if (line >= 10) {
let wall = 'wall_' + line let wall = "wall_" + line;
this.scene.getObjectByName(wall).visible = false this.scene.getObjectByName(wall).visible = false;
let point = 'point_' + '0' + line + '_tc' let point = "point_" + "0" + line + "_tc";
this.scene.getObjectByName(point).visible = true this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0) this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) { if (this.scene.getObjectByName(point).hasDevice == true) {
this.scene.getObjectByName(point).visible = false this.scene.getObjectByName(point).visible = false;
let EquID = this.scene.getObjectByName(point).info.id let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true this.scene.getObjectById(EquID).visible = true;
} }
} }
//处理21行的设备和附着点 //处理21行的设备和附着点
let point = 'point_' + '0' + 21 + '_tc' let point = "point_" + "0" + 21 + "_tc";
this.scene.getObjectByName(point).visible = true this.scene.getObjectByName(point).visible = true;
this.scene.getObjectByName(point).layers.set(0) this.scene.getObjectByName(point).layers.set(0);
if (this.scene.getObjectByName(point).hasDevice == true) { if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id let EquID = this.scene.getObjectByName(point).info.id;
this.scene.getObjectById(EquID).visible = true this.scene.getObjectById(EquID).visible = true;
} }
} }
} }

17
src/store/modelSceneStore.js
View File

@@ -3,23 +3,22 @@ import { ref } from "vue";
import { saveEquipment, initSceneData } from "../api/tunnelScene"; import { saveEquipment, initSceneData } from "../api/tunnelScene";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
export const useModelSceneStore = defineStore("modelSceneData", () => { export const useModelSceneStore = defineStore("modelSceneData", () => {
let equipmentList = ref("[]"); let equipmentList = ref([]);
let allEditList = ref({}); let allEditList = ref({});
function initData(tunnelId = 1) { function initData(tunnelId = 1) {
initSceneData(tunnelId) initSceneData(tunnelId)
.then((res) => { .then((res) => {
equipmentList.value = res.data.tunnelThreeConfig; // equipmentList.value = res.data.tunnelThreeConfig;
console.log("初始化的数据");
}) })
.catch((Error) => { .catch((Error) => {
ElMessage.error("场景初始化异常！"); ElMessage.error("场景初始化异常！");
}); });
} }
//默认初始化1号隧道 //默认初始化1号隧道
function saveSceneData(constructionLength, tunnelId, modelData) { function saveSceneData(data) {
const temp = JSON.parse(equipmentList.value); equipmentList.value.push(data);
temp.push(modelData);
equipmentList.value = JSON.stringify(temp);
console.log("save:", equipmentList.value);
return saveEquipment(constructionLength, tunnelId, equipmentList.value); return saveEquipment(constructionLength, tunnelId, equipmentList.value);
} }
// 删除设备 // 删除设备
@@ -39,7 +38,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
resolve(JSON.parse(equipmentList.value)); resolve(JSON.parse(equipmentList.value));
}) })
.catch((Error) => { .catch((Error) => {
ElMessage.error("场景初始化异常！"); // ElMessage.error("场景初始化异常！");
reject(); reject();
}); });
}); });
@@ -49,6 +48,6 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
initData, initData,
saveSceneData, saveSceneData,
deleteEquipment, deleteEquipment,
getEquipmentList getEquipmentList,
}; };
}); });

112
src/views/edit/edit.vue
View File

@@ -7,24 +7,24 @@
</div> </div>
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<div class="btn-right"> <div class="btn-right">
<div class="del-btn" @click="handleGotoDevice"> <div class="del-btn" @click="handleGotoDevice">设备管理</div>
设备管理 <div class="del-btn" @click="handleSave">保存</div>
</div>
<div class="del-btn" @click="handleSave">
保存
</div>
</div> </div>
</div> </div>
<div class="edit-box"> <div class="edit-box">
<el-form :model="form" :label-position="right" label-width="188px"> <el-form :model="form" :label-position="right" label-width="188px">
<el-form-item label="隧道名称"> <el-form-item label="隧道名称">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/> <el-input v-model="form.tunnelName" placeholder="请输入隧道名称" />
</el-form-item> </el-form-item>
<el-form-item label="序列号"> <el-form-item label="序列号">
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/> <el-input v-model="form.serialNumber" placeholder="请输入序列号" />
</el-form-item> </el-form-item>
<el-form-item label="隧道长度"> <el-form-item label="隧道长度">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/> <el-input
type="number"
v-model="form.totalLength"
placeholder="请输入隧道长度"
/>
</el-form-item> </el-form-item>
<el-form-item label="是否默认"> <el-form-item label="是否默认">
<el-radio-group v-model="form.isDefault"> <el-radio-group v-model="form.isDefault">
@@ -33,53 +33,60 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="隧道备注"> <el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/> <el-input v-model="form.remarks" placeholder="请输入隧道备注" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 --> <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" ref="tunnelScene" :tunnelLength="tunnelLength"/> <tunnel-scene
id="tunnel-box"
:isedit="true"
:tunnelId="tunnelId"
:form="form"
ref="tunnelScene"
:tunnelLength="tunnelLength"
/>
</div> </div>
</template> </template>
<script setup> <script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue"; import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import {editTunnel, getTunnelDetail} from "@/api/tunnelManage"; import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
import {computed} from "vue"; import { computed, provide } from "vue";
import {useModelSceneStore} from "@/store/modelSceneStore"; import { useModelSceneStore } from "@/store/modelSceneStore";
import {ElMessage} from "element-plus"; import { ElMessage } from "element-plus";
const router = useRouter(); const router = useRouter();
const tunnelId = reactive(router.currentRoute.value.params.tunnelId) const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
const userId = reactive(router.currentRoute.value.params.userId) const userId = reactive(router.currentRoute.value.params.userId);
const type = reactive(router.currentRoute.value.params.type) const type = reactive(router.currentRoute.value.params.type);
const store = useModelSceneStore(); const store = useModelSceneStore();
const form = ref({ const form = ref({
tunnelName: '', tunnelName: "",
serialNumber: '', serialNumber: "",
totalLength: '', totalLength: "",
isDefault: false, isDefault: false,
remarks: '' remarks: "",
}); });
const equipmentList = ref([]) const equipmentList = ref([]);
onMounted(async () => { onMounted(async () => {
equipmentList.value = await store.getEquipmentList(); equipmentList.value = await store.getEquipmentList();
}) });
const getTunnel = () => { const getTunnel = () => {
getTunnelDetail(tunnelId).then((res) => { getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
form.value = res.data form.value = res.data;
} }
}); });
} };
getTunnel() getTunnel();
const tunnelLength = computed(() => form.value.totalLength); const tunnelLength = computed(() => form.value.totalLength);
const handleGotoDevice = () => { const handleGotoDevice = () => {
router.push('/device/' + tunnelId) router.push("/device/" + tunnelId);
} };
const handleGoTunnelMgr=()=>{ const handleGoTunnelMgr = () => {
router.push('/tunnel/' + form.value.siteId+'/'+type+'/'+userId) router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
} };
const handleSave = async () => { const handleSave = async () => {
const data = { const data = {
tunnelId: tunnelId, tunnelId: tunnelId,
@@ -90,15 +97,15 @@ const handleSave = async () => {
constructionLength: 500, constructionLength: 500,
tunnelLength: form.value.totalLength, tunnelLength: form.value.totalLength,
isDefault: form.value.isDefault, isDefault: form.value.isDefault,
tunnelThreeConfig: JSON.stringify(await store.getEquipmentList()) tunnelThreeConfig: JSON.stringify(await store.getEquipmentList()),
} };
editTunnel(data).then((res) => { editTunnel(data).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
ElMessage.success(res.msg) ElMessage.success(res.msg);
router.push('/tunnel/' + form.value.siteId+'/'+type+'/'+userId) router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
} }
}); });
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#main { #main {
@@ -125,16 +132,16 @@ const handleSave = async () => {
height: 80px; height: 80px;
line-height: 70px; line-height: 70px;
border-radius: 11px; border-radius: 11px;
border: 2px solid #08B7B8; border: 2px solid #08b7b8;
font-size: 42px; font-size: 42px;
color: #FFFFFF; color: #ffffff;
.back-icon { .back-icon {
margin-right: 20px; margin-right: 20px;
margin-left: 23px; margin-left: 23px;
width: 35px; width: 35px;
height: 35px; height: 35px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png'); background-image: url("@/assets/images/site/zdgl_icon_fh.png");
} }
} }
@@ -158,12 +165,11 @@ const handleSave = async () => {
width: 180px; width: 180px;
height: 80px; height: 80px;
border-radius: 11px; border-radius: 11px;
border: 2px solid #08B7B8; border: 2px solid #08b7b8;
color: #FFFFFF; color: #ffffff;
font-size: 42px; font-size: 42px;
} }
} }
} }
#tunnel-box { #tunnel-box {
@@ -185,7 +191,7 @@ const handleSave = async () => {
} }
:deep(.el-radio__label) { :deep(.el-radio__label) {
color: #FFFFFF; color: #ffffff;
font-size: 38px; font-size: 38px;
} }
@@ -193,23 +199,23 @@ const handleSave = async () => {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 25px; border-radius: 25px;
border: 4px solid #05FEFF; border: 4px solid #05feff;
background-color: transparent; background-color: transparent;
} }
:deep(.el-radio__input.is-checked+.el-radio__label) { :deep(.el-radio__input.is-checked + .el-radio__label) {
color: #FFFFFF; color: #ffffff;
} }
:deep(.el-radio__input.is-checked .el-radio__inner ) { :deep(.el-radio__input.is-checked .el-radio__inner) {
background: #064B66; background: #064b66;
border-color: #05FEFF !important; border-color: #05feff !important;
} }
:deep(.el-radio__inner::after) { :deep(.el-radio__inner::after) {
width: 18px; width: 18px;
height: 18px; height: 18px;
background: #05FEFF; background: #05feff;
} }
:deep(.el-form-item) { :deep(.el-form-item) {
@@ -218,7 +224,7 @@ const handleSave = async () => {
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
font-size: 38px; font-size: 38px;
color: #FFFFFF; color: #ffffff;
margin-right: 12px; margin-right: 12px;
line-height: 50px; line-height: 50px;
} }
@@ -228,7 +234,7 @@ const handleSave = async () => {
.el-input__wrapper { .el-input__wrapper {
background-color: transparent; background-color: transparent;
border: 1px solid #08B7B8; border: 1px solid #08b7b8;
.el-input__inner { .el-input__inner {
height: auto; height: auto;