diff --git a/src/components/content/tunnelScene/TunnelScene.vue b/src/components/content/tunnelScene/TunnelScene.vue index b0add02..5387c3d 100644 --- a/src/components/content/tunnelScene/TunnelScene.vue +++ b/src/components/content/tunnelScene/TunnelScene.vue @@ -64,10 +64,10 @@ import { import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; -import { onMounted, reactive, ref, watch } from "vue"; +import { onMounted, reactive, ref, toRaw, watch } from "vue"; import { ElMessage } from "element-plus"; -import { deleteEquipment, initData } from "./request"; +import { useModelSceneStore } from "@/store/modelSceneStore"; // 获取html标签跟随组件dom const content = ref(null); const info = ref(null); @@ -77,7 +77,7 @@ let demo; //定义demo对象 const loader = new OBJLoader(); let hdrLoader = new RGBELoader(); let backColorSet = three.sRGBEncoding; - +const modelStore = useModelSceneStore(); const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式,如果是编辑模式,则需要做一些处理 let isedit = ref(params.isedit); @@ -123,13 +123,18 @@ async function handleMounted() { map.set("equ_fan", await loadModel("/devicesModel/model2.obj")); map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj")); demo.initDevicesModel(map); - // 初始化 - modelList.value = await initData(params.tunnelId, params.form); - console.log("init", params.tunnelId); - demo.editTunnelInit(modelList.value); + // 初始化渲染设备 + modelList.value = await modelStore.initModelData( + params.tunnelId, + params.form + ); + // modelList.value = await initData(params.tunnelId, params.form); + console.log("test", modelList.value); + demo.editTunnelInit(toRaw(modelList.value)); } catch (err) { + console.log(err); ElMessage({ - message: "场景初始化异常!", + message: "场景初始化异常---!", type: "warning", }); } @@ -229,7 +234,8 @@ function handleRemoveEqu() { // 对话框确认删除 function handleConfirmAddEqu() { console.log("target:", targetP.value.info); - deleteEquipment(targetP.value.info.equipmentId, pointGap) + modelStore + .deleteEquipment(targetP.value.info.equipmentId, pointGap) .then((res) => { demo.removeEquipment(targetP.value); centerDialogVisible.value = false; diff --git a/src/components/content/tunnelScene/editEquComp/editDialog.vue b/src/components/content/tunnelScene/editEquComp/editDialog.vue index 16434de..3602d52 100644 --- a/src/components/content/tunnelScene/editEquComp/editDialog.vue +++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue @@ -47,9 +47,18 @@ 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 { + reactive, + computed, + defineEmits, + defineProps, + watch, + ref, + toRaw, +} from "vue"; import { ElMessage } from "element-plus"; -import { saveEquipment, initData } from "../request"; +import { useModelSceneStore } from "@/store/modelSceneStore"; + const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]); const params = defineProps([ "pointNum", @@ -63,28 +72,17 @@ const params = defineProps([ let p = ref(57); const equipment = ref(null); const equipmentType = ref(null); - -let maxConstructionLength = ref(0); +const modelStore = useModelSceneStore(); //计算锚点之间距离 const pointDistance_str = computed( () => - `${params.pointGap}米*${params.pointNum}=${( - params.pointGap * params.pointNum - ).toFixed(2)}米` -); - -watch( - () => params.form, - () => { - initData(params.tunnelId, params.form); - }, - { - deep: true, - } + `${parseInt(params.pointGap)}米*${params.pointNum}=${ + parseInt(params.pointGap) * params.pointNum + }米` ); // 请求数据模型 -const equipmentSetting = reactive({ +const equipmentSetting = ref({ equipmentId: null, equipmentName: "", equipmentType: "", //设备类型 @@ -93,24 +91,24 @@ const equipmentSetting = reactive({ typeKey: null, //设备选择(设备名称) }); function resetEquipmentSetting() { - equipmentSetting.equipmentId = null; - equipmentSetting.equipmentName = ""; - equipmentSetting.equipmentType = ""; - equipmentSetting.position = ""; - equipmentSetting.threshold = ""; - equipmentSetting.typeKey = null; + equipmentSetting.value.equipmentId = null; + equipmentSetting.value.equipmentName = ""; + equipmentSetting.value.equipmentType = ""; + equipmentSetting.value.position = ""; + equipmentSetting.value.threshold = ""; + equipmentSetting.value.typeKey = null; equipment.value.reset(); equipmentType.value.reset(); } // 绑定选择的设备类型 function handleTypeChange(optionItem) { - equipmentSetting.equipmentType = optionItem.value; + equipmentSetting.value.equipmentType = optionItem.value; } function handleEquipmentChange(equipmentItem) { - equipmentSetting.equipmentName = equipmentItem.label; - equipmentSetting.equipmentId = equipmentItem.equipmentId; - equipmentSetting.typeKey = equipmentItem.value; + equipmentSetting.value.equipmentName = equipmentItem.label; + equipmentSetting.value.equipmentId = equipmentItem.equipmentId; + equipmentSetting.value.typeKey = equipmentItem.value; } // 设备类型选项参数 let options = reactive([{ label: "暂无数据", value: "" }]); @@ -120,7 +118,7 @@ let options2 = reactive([{ equipmentId: 0, label: "暂无数据", value: "" }]); // 模拟生成option2 watch( - () => equipmentSetting.equipmentType, + () => equipmentSetting.value.equipmentType, (newVal) => { console.log(params.tunnelId, newVal); equipment.value.reset(); @@ -172,18 +170,23 @@ function addEquipment() { }); return; } - if (!equipmentSetting.equipmentType || !equipmentSetting.equipmentId) { + if ( + !equipmentSetting.value.equipmentType || + !equipmentSetting.value.equipmentId + ) { ElMessage({ message: "选项不能为空!", type: "warning", }); return; } - equipmentSetting.position = params.position; + equipmentSetting.value.position = params.position; + console.log("add-", toRaw(equipmentSetting.value)); // 合法请求 - saveEquipment(equipmentSetting, params.pointGap) + modelStore + .addEquipment({ ...toRaw(equipmentSetting.value) }, params.pointGap) .then((res) => { - emit("addEquipment", equipmentSetting); + emit("addEquipment", equipmentSetting.value); ElMessage({ message: "添加成功!", type: "success", diff --git a/src/components/content/tunnelScene/request/index.js b/src/components/content/tunnelScene/request/index.js deleted file mode 100644 index babe138..0000000 --- a/src/components/content/tunnelScene/request/index.js +++ /dev/null @@ -1,145 +0,0 @@ -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) => { - console.log("equId", equipmentInfo.equipmentId); - hasEquipment(equipmentInfo.equipmentId) - ? reject(3000) - : 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(); - } - console.log("add", res); - reject(res); - }) - .catch((err) => { - reject(); - }); - }); -}; - -// 删除 -export const deleteEquipment = (equipmentId, pointGap) => { - let tempModelEquipmentList = [...modelEquipmentList]; //数组克隆 - tempModelEquipmentList = tempModelEquipmentList.filter( - (item) => item.equipmentId != equipmentId - ); - console.log( - "del", - modelEquipmentList, - tempModelEquipmentList, - "id", - 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; - } - }); - return maxLength; -} - -function hasEquipment(equipmentId) { - let result = false; - modelEquipmentList.forEach((item) => { - if (item.equipmentId === equipmentId) result = true; - }); - return result; -} diff --git a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js index 070fdfe..5d5b827 100644 --- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js +++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js @@ -12,7 +12,7 @@ function addEquipment(targetPoint, formInfo) { if (targetPoint.hasDevice) { return; } - console.log("info", formInfo); + switch (formInfo.equipmentType) { case "frequency": handleFanEqu.call(this, targetPoint, formInfo); @@ -36,7 +36,7 @@ function addEquipment(targetPoint, formInfo) { // function handleValveEqu(targetPoint, equipmentInfo) { // } -let allline = new Array +// let allline = new Array(); // 其他传感器 function handleOtherEqu(targetPoint, equipmentInfo) { const equMesh = this.equMap.get("equ_sensors").clone(); @@ -69,14 +69,14 @@ function handleOtherEqu(targetPoint, equipmentInfo) { targetPoint.visible = false; targetPoint.hasWall = true; //处理风压阀的代码片段 - let lineIndex = targetPoint.name.slice(7, 9) - if (allline.includes(Number(lineIndex))) { - allline.slice(array.indexOf(lineIndex), 1) - console.log('dadad'); - } else { - allline.push(Number(lineIndex)) - } - console.log(allline); + // let lineIndex = targetPoint.name.slice(7, 9); + // if (allline.includes(Number(lineIndex))) { + // allline.slice(array.indexOf(lineIndex), 1); + // console.log("dadad"); + // } else { + // allline.push(Number(lineIndex)); + // } + // console.log(allline); // console.log(allline); // allline.forEach((item, index, array) => { // if (array.includes(item)) { diff --git a/src/store/modelSceneStore.js b/src/store/modelSceneStore.js index 60178a4..98f3a94 100644 --- a/src/store/modelSceneStore.js +++ b/src/store/modelSceneStore.js @@ -1,53 +1,122 @@ import { defineStore } from "pinia"; -import { ref } from "vue"; -import { saveEquipment, initSceneData } from "../api/tunnelScene"; -import { ElMessage } from "element-plus"; +import { ref, toRaw } from "vue"; +import { apiSaveEquipment, initSceneData } from "../api/tunnelScene"; + export const useModelSceneStore = defineStore("modelSceneData", () => { let equipmentList = ref([]); - let allEditList = ref({}); - function initData(tunnelId = 1) { - initSceneData(tunnelId) - .then((res) => { - // equipmentList.value = res.data.tunnelThreeConfig; - console.log("初始化的数据"); - }) - .catch((Error) => { - ElMessage.error("场景初始化异常!"); - }); - } - //默认初始化1号隧道 - function saveSceneData(data) { - equipmentList.value.push(data); + let requestOtherConfig = ref({}); - return saveEquipment(constructionLength, tunnelId, equipmentList.value); - } - // 删除设备 - function deleteEquipment(constructionLength, tunnelId, EquipmentId) { - let temp = JSON.parse(equipmentList.value); - temp = temp.filter( - (item) => item.chooseEquipment.equipmentId != EquipmentId - ); - equipmentList.value = JSON.stringify(temp); - return saveEquipment(constructionLength, tunnelId, equipmentList.value); - } - function getEquipmentList(tunnelId = 1) { + function initModelData(tunnelId, otherConfig) { return new Promise((resolve, reject) => { + handleSettingOtherConfig(otherConfig, requestOtherConfig); initSceneData(tunnelId) .then((res) => { - equipmentList.value = res.data.tunnelThreeConfig; - resolve(JSON.parse(equipmentList.value)); + if (res.data.tunnelThreeConfig) { + equipmentList.value = JSON.parse(res.data.tunnelThreeConfig); + } else { + equipmentList.value = []; + } + + resolve(toRaw(equipmentList.value)); }) - .catch((Error) => { - // ElMessage.error("场景初始化异常!"); + .catch((error) => { reject(); }); }); } + + function addEquipment(equipmentInfo, pointGap) { + return new Promise((resolve, reject) => { + if (hasEquipment(equipmentList.value, equipmentInfo.equipmentId)) { + reject(3000); + return; + } + equipmentList.value.push(equipmentInfo); + apiSaveEquipment({ + constructionLength: autoComputeConstructionLength( + equipmentList.value, + pointGap + ), + modelEquipmentList: toRaw(equipmentList.value), + ...requestOtherConfig, + }) + .then((res) => { + console.log("res", res); + resolve(); + }) + .catch((err) => { + console.log("res", err); + equipmentList.value.pop(); + reject(); + }); + }); + } + // 删除设备 + function deleteEquipment(equipmentId, pointGap) { + let equipment = null; + equipmentList.value = equipmentList.value.filter((item) => { + if (item.equipmentId === equipmentId) { + equipment = item; + } + return item.equipmentId != equipmentId; + }); + + return new Promise((resolve, reject) => { + apiSaveEquipment({ + constructionLength: autoComputeConstructionLength( + equipmentList.value, + pointGap + ), + modelEquipmentList: toRaw(equipmentList.value), + ...requestOtherConfig, + }) + .then((res) => { + resolve(); + }) + .catch((err) => { + equipmentList.value.push(equipment); + reject(); + }); + }); + } + return { - equipmentList, - initData, - saveSceneData, + initModelData, + addEquipment, deleteEquipment, - getEquipmentList, }; }); + +function handleSettingOtherConfig(otherConfig, requestOtherConfig) { + requestOtherConfig.isDefault = otherConfig.isDefault; + requestOtherConfig.remarks = otherConfig.remarks; + requestOtherConfig.serialNumber = otherConfig.serialNumber; + requestOtherConfig.tunnelId = otherConfig.tunnelId; + requestOtherConfig.tunnelLength = otherConfig.totalLength; + requestOtherConfig.tunnelName = otherConfig.tunnelName; +} + +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; + } + }); + return maxLength; +} + +function hasEquipment(equipmentList, equipmentId) { + let result = false; + equipmentList.forEach((item) => { + if (item.equipmentId === equipmentId) result = true; + }); + return result; +} diff --git a/src/views/edit/edit.vue b/src/views/edit/edit.vue index 8b1c9f5..18b311c 100644 --- a/src/views/edit/edit.vue +++ b/src/views/edit/edit.vue @@ -60,7 +60,7 @@ const router = useRouter(); const tunnelId = reactive(router.currentRoute.value.params.tunnelId); const userId = reactive(router.currentRoute.value.params.userId); const type = reactive(router.currentRoute.value.params.type); -const store = useModelSceneStore(); +const modelStore = useModelSceneStore(); const form = ref({ tunnelName: "", serialNumber: "", @@ -70,7 +70,7 @@ const form = ref({ }); const equipmentList = ref([]); onMounted(async () => { - equipmentList.value = await store.getEquipmentList(); + // equipmentList.value = await store.getEquipmentList(); }); const getTunnel = () => { getTunnelDetail(tunnelId).then((res) => {