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

Merge pull request 'LJ_dev' (#204) from LJ_dev into dev

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/204
This commit is contained in:
liaojie
2023-12-29 13:44:05 +00:00
parent ee07807e9d 3e14bf1ca5
commit 253a6ed387
11 changed files with 606 additions and 418 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,
});
};

105
src/components/content/tunnelScene/PreviewScene.vue
View File

@@ -47,15 +47,14 @@ import {
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"; 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 } from "vue"; import { onMounted, reactive, ref, toRaw, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore"; import { deleteEquipment, initData } from "./request";
import { toRaw } from "vue"
// 获取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();
const loader = new OBJLoader(); const loader = new OBJLoader();
@@ -69,6 +68,16 @@ const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是
let isedit = ref(params.isedit) let isedit = ref(params.isedit)
// watch(
// () => params.tunnelId,
// (now) => {
// params.tunnelId = now
// console.log(params.tunnelId);
// },
// { deep: true }
// )
onMounted(handleMounted); onMounted(handleMounted);
// 挂载后回调 // 挂载后回调
async function handleMounted() { async function handleMounted() {
@@ -89,7 +98,7 @@ async function handleMounted() {
watch( watch(
() => params.tunnelId, () => params.tunnelId,
async () => { async () => {
const text = await store.initData(params.tunnelId); const text = await initData(params.tunnelId);
} }
); );
// 初始化设备模型 // 初始化设备模型
@@ -100,14 +109,38 @@ 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(); // const equipmentList = await store.getEquipmentList();
demo.previewtunnelModeInit(equipmentList); modelList.value = await initData(params.tunnelId);
// previewEquInfProcess(equipmentList) // console.log("init", params.tunnelId);
demo.previewtunnelModeInit(modelList.value);
watch(
() => params.tunnelId,
(now) => {
params.tunnelId = now
// console.log(params.tunnelId);
checkTunnelInit(modelList.value)
demo.previewtunnelModeInit(modelList.value);
},
{ deep: true }
)
// demo.previewtunnelModeInit(equipmentList);
// previewEquInfProcess(modelList.value, targetP.value)
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} }
function checkTunnelInit(equipmentList) {
equipmentList.forEach((item) => {
let equipment = toRaw(item)
console.log("我要清理掉之前的设备！！！");
console.log(equipment);
console.log(demo.scene.getObjectByName(equipment.position));
demo.removeEquipment(demo.scene.getObjectByName(equipment.position));
});
}
// 每个模型加载回调 // 每个模型加载回调
function loadModel(path) { function loadModel(path) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@@ -163,46 +196,31 @@ function lClickCallback(demo) {
} }
let pointNum = ref(0); let pointNum = ref(0);
let targetP; let targetP = ref({});
// 右键点击附着点后调函数 // 右键点击附着点后调函数
function rClickCallback(demo) { function rClickCallback(demo) {
function editDev(targetPoint = null) { function editDev(targetPoint = null) {
hasDevice = targetPoint.hasDevice; hasDevice.value = targetPoint.hasDevice;
targetP = targetPoint; targetP.value = targetPoint;
//点击之后马上调用这个函数，变成回调，然后进行处理处理在传给preview表单 const equipmentList = initData(params.tunnelId)
const equipmentList = store.getEquipmentList().then((result) => { equipmentList.then((result) => {
previewEquInfProcess(result, targetP) previewEquInfProcess(result, targetP.value)
}); })
pointNum.value = Number( pointNum.value = Number(
targetPoint.name.substring( targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1, targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_") targetPoint.name.lastIndexOf("_")
) - 1 ) - 1
); );
if (!targetPoint.info) return; if (!targetPoint.info) return;
editDevInfo(targetPoint.info); editDevInfo(targetPoint.info);
} }
demo.addFunction("editDev", editDev); demo.addFunction("editDev", editDev);
} }
// 添加设备 // 添加设备
function handleAddEqu(formInfo) { function handleAddEqu(formInfo) {
if (!formInfo.equipmentType) { demo.addEquipment(targetP.value, formInfo);
ElMessage({
message: "请选择传感器！",
type: "warning",
});
return;
}
//表单信息
//这里利用处理请求
demo.addEquipment(targetP, formInfo);
ElMessage({
message: "添加成功！",
type: "success",
});
} }
const centerDialogVisible = ref(false); const centerDialogVisible = ref(false);
@@ -219,12 +237,22 @@ function handleRemoveEqu() {
} }
// 对话框确认删除 // 对话框确认删除
function handleConfirmAddEqu() { function handleConfirmAddEqu() {
demo.removeEquipment(targetP); console.log("target:", targetP.value.info);
centerDialogVisible.value = false; deleteEquipment(targetP.value.info.equipmentId, pointGap)
ElMessage({ .then((res) => {
message: "删除成功！", demo.removeEquipment(targetP.value);
type: "success", centerDialogVisible.value = false;
}); ElMessage({
message: "删除成功！",
type: "success",
});
})
.catch((res) => {
ElMessage({
message: "删除失败！",
type: "warning",
});
});
} }
// 处理取消关闭编辑框事件 // 处理取消关闭编辑框事件
function handleCancel() { function handleCancel() {
@@ -242,11 +270,10 @@ let equipmentValue = ref(0)
function previewEquInfProcess(equipmentList, targetP) { function previewEquInfProcess(equipmentList, targetP) {
for (const equipment of equipmentList) { for (const equipment of equipmentList) {
// console.log(equipment);
if (equipment.position == targetP.name) { if (equipment.position == targetP.name) {
equipmentType.value = equipment.equipmentType equipmentType.value = equipment.equipmentType
//需要将获取到的设备列表进行序列化 //需要将获取到的设备列表进行序列化
equipmentName.value = toRaw(equipment.chooseEquipment).label equipmentName.value = equipment.equipmentName
equipmentValue.value = equipment.threshold equipmentValue.value = equipment.threshold
if (equipmentType.value == 'frequency') { if (equipmentType.value == 'frequency') {
equipmentType.value = '风机' equipmentType.value = '风机'

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",
}); });
}); });

76
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,33 +57,60 @@ 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(
() => () =>
`${params.pointGap}米*${params.pointNum}=${ `${params.pointGap}米*${params.pointNum}=${(
params.pointGap * params.pointNum params.pointGap * params.pointNum
}米` ).toFixed(2)}米`
);
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 resetEquipmentSetting() {
equipmentSetting.equipmentId = null;
equipmentSetting.equipmentName = "";
equipmentSetting.equipmentType = "";
equipmentSetting.position = "";
equipmentSetting.threshold = "";
equipmentSetting.typeKey = null;
equipment.value.reset();
equipmentType.value.reset();
}
// 绑定选择的设备类型 // 绑定选择的设备类型
function handleTypeChange(optionItem) { function handleTypeChange(optionItem) {
equipmentSetting.equipmentType = optionItem.value; equipmentSetting.equipmentType = optionItem.value;
} }
function handleEquipmentChange(equipmentItem) { function handleEquipmentChange(equipmentItem) {
equipmentSetting.chooseEquipment = equipmentItem; equipmentSetting.equipmentName = equipmentItem.label;
equipmentSetting.equipmentId = equipmentItem.equipmentId;
equipmentSetting.typeKey = equipmentItem.value;
} }
// 设备类型选项参数 // 设备类型选项参数
let options = reactive([{ label: "暂无数据", value: "" }]); let options = reactive([{ label: "暂无数据", value: "" }]);
@@ -127,11 +153,7 @@ function handelInput(e) {
// 处理取消事件 // 处理取消事件
function handleCancel() { function handleCancel() {
equipmentSetting.equipmentType = ""; resetEquipmentSetting();
equipmentSetting.chooseEquipment = null;
equipmentSetting.threshold = "";
equipment.value.reset();
equipmentType.value.reset();
// 发射事件给tunnel父组件 // 发射事件给tunnel父组件
emit("cancel"); emit("cancel");
} }
@@ -150,35 +172,37 @@ 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",
}); });
resetEquipmentSetting();
}) })
.catch((err) => { .catch((err) => {
ElMessage({ if (err === 3000) {
message: "请求异常！", ElMessage({
type: "warning", message: "该设备已添加！",
}); type: "warning",
});
resetEquipmentSetting();
} else {
ElMessage({
message: "添加异常！",
type: "warning",
});
}
}); });
} }
</script> </script>

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

@@ -0,0 +1,145 @@
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;
}

139
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;
@@ -36,10 +36,7 @@ function addEquipment(targetPoint, formInfo) {
// function handleValveEqu(targetPoint, equipmentInfo) { // function handleValveEqu(targetPoint, equipmentInfo) {
// } // }
let allline = new Array
// 其他传感器 // 其他传感器
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,42 +67,24 @@ 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++) { if (allline.includes(Number(lineIndex))) {
if (line < 10) { allline.slice(array.indexOf(lineIndex), 1)
let wall = 'wall_' + '0' + line console.log('dadad');
this.scene.getObjectByName(wall).visible = true } else {
let point = 'point_' + '00' + line + '_tc' allline.push(Number(lineIndex))
console.log(this.scene.getObjectByName(point));
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
}
} 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)
if (this.scene.getObjectByName(point).hasDevice == true) {
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)
if (this.scene.getObjectByName(point).hasDevice == true) {
let EquID = this.scene.getObjectByName(point).info.id
this.scene.getObjectById(EquID).visible = false
}
} }
// this.scene.getObjectByName('wall_01').visible = true console.log(allline);
// console.log(allline);
// allline.forEach((item, index, array) => {
// if (array.includes(item)) {
// array.slice(array.indexOf(item), 1)
// array.slice(array.indexOf(item), 1)
// console.log(array);
// }
// })
// console.log(this.scene); // console.log(this.scene);
// 保存该设备模型id，后期直接从附附着点进行删除 // 保存该设备模型id，后期直接从附附着点进行删除
targetPoint.info = { targetPoint.info = {
@@ -117,7 +95,6 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
// 1.先取出当前点击添加设备锚点的行数 // 1.先取出当前点击添加设备锚点的行数
// 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取) // 2.再进行字符串拼接出墙的名字，使用scene.getObjectByName(墙名去获取)
// 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中 // 3.加上循环，固定到20结束就可以了，将点击的函数到20的函数的墙全部设为visable设为可见,还需要将中间的那行设备和附着点全部设为隐藏，且层级变低，无法选中
} }
// 风机 // 风机
@@ -153,7 +130,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);
} }
@@ -161,43 +137,44 @@ function handleFanEqu(
function removeEquipment(targetPoint) { 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;
} // }
} // }
} // }
console.log("测试是不是删除了");
const mesh = this.scene.getObjectById(targetPoint.info.id); const mesh = this.scene.getObjectById(targetPoint.info.id);
this.scene.remove(mesh); this.scene.remove(mesh);
targetPoint.visible = true; targetPoint.visible = true;

17
src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js
View File

@@ -1,21 +1,6 @@
export function editTunnelInit(equipmentList) { export function editTunnelInit(equipmentList) {
//初始化将墙壁隐藏起来 //初始化将墙壁隐藏起来
// for (let line = 1; line <= 20; line++) {
// if (line < 10) {
// let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).visible = false
// } else if (line >= 10) {
// let wall = 'wall_' + line
// this.scene.getObjectByName(wall).visible = false
// }
// }
equipmentList.forEach((item) => { equipmentList.forEach((item) => {
const formInfo = { this.addEquipment(this.scene.getObjectByName(item.position), item);
equipmentType: item.equipmentType, //设备类型
chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
threshold: item.threshold,
};
this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
}); });
} }

9
src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
View File

@@ -1,3 +1,4 @@
export default function previewtunnelModeInit(equipmentList) { export default function previewtunnelModeInit(equipmentList) {
//初始化将墙壁隐藏起来 //初始化将墙壁隐藏起来
// for (let line = 1; line <= 20; line++) { // for (let line = 1; line <= 20; line++) {
@@ -9,14 +10,8 @@ export default function previewtunnelModeInit(equipmentList) {
// this.scene.getObjectByName(wall).visible = false // this.scene.getObjectByName(wall).visible = false
// } // }
// } // }
equipmentList.forEach((item) => { equipmentList.forEach((item) => {
const formInfo = { this.addEquipment(this.scene.getObjectByName(item.position), item);
equipmentType: item.equipmentType, //设备类型
chooseEquipment: item.chooseEquipment, //设备选择(设备名称)
threshold: item.threshold,
};
this.addEquipment(this.scene.getObjectByName(item.position), formInfo);
}); });
//进行预览和编辑模式的一些操作 //进行预览和编辑模式的一些操作
if (this.isedit == false) { if (this.isedit == false) {

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,
}; };
}); });

116
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,17 +97,17 @@ const handleSave = async () => {
constructionLength: 500, constructionLength: 500,
tunnelLength: form.value.totalLength, tunnelLength: form.value.totalLength,
isDefault: form.value.isDefault, isDefault: form.value.isDefault,
modelEquipmentList:await store.getEquipmentList() modelEquipmentList: 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);
}else { } else {
ElMessage.error(res.msg) ElMessage.error(res.msg);
} }
}); });
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#main { #main {
@@ -127,16 +134,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");
} }
} }
@@ -160,12 +167,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 {
@@ -187,7 +193,7 @@ const handleSave = async () => {
} }
:deep(.el-radio__label) { :deep(.el-radio__label) {
color: #FFFFFF; color: #ffffff;
font-size: 38px; font-size: 38px;
} }
@@ -195,23 +201,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) {
@@ -220,7 +226,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;
} }
@@ -230,7 +236,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;

320
src/views/tunnel/index.vue
View File

@@ -1,12 +1,14 @@
<template> <template>
<div id="main"> <div id="main">
<div class="box-top"> <div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/> <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
<div class="tunnel-title"></div> <div class="tunnel-title"></div>
<!-- <manage-length class="tunnel-length"></manage-length>--> <!-- <manage-length class="tunnel-length"></manage-length>-->
<div class="top-length"> <div class="top-length">
<span>隧道总长度: {{ tunnelLength }}米</span> <span>隧道总长度: {{ tunnelLength }}米</span>
<span>当前施工长度: {{ constructionLength }}米</span> <span>当前施工长度: {{ constructionLength }}米</span>
<span>隧道总长度: {{ tunnelLength }}米</span>
<span>当前施工长度: {{ constructionLength }}米</span>
</div> </div>
<div class="top-right"> <div class="top-right">
<div class="current-site"> <div class="current-site">
@@ -16,8 +18,8 @@
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
item.label item.label
}} }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
@@ -31,25 +33,27 @@
</div> </div>
</div> </div>
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> --> <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件 --> <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId"></preview-scene> <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
<div class="left"> <div class="left">
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
:transducer-data="largeScreenData"/> :transducer-data="largeScreenData" />
<!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />--> <!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/> <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
</el-drawer> </el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div> <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div> <div v-else class="shrink-left" @click="closeLeft"></div>
</div> </div>
<div class="right"> <div class="right">
<el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/> <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/> <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/> <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
</el-drawer> </el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div> <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div> <div v-else class="shrink-right" @click="closeRight"></div>
@@ -76,14 +80,15 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
import AirInfo from "@/components/content/airInfo/AirInfo.vue"; import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue"; import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue"; import ManageBtn from "@/components/manageBtn/index.vue";
import {dateFormat} from "@/utils/date.js"; import { dateFormat } from "@/utils/date.js";
import {getToken} from "@/utils/auth"; import { getToken } from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js"; import { useAuthStore } from "@/store/userstore.js";
import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen"; import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
import {ElMessage, ElMessageBox} from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import {getUserInfo} from "@/api/login"; import { getUserInfo } from "@/api/login";
import {initSceneData} from "@/api/tunnelScene"; import { initSceneData } from "@/api/tunnelScene";
import {getSiteDetail} from "../../api/site"; import { getSiteDetail } from "../../api/site";
import { nextTick, reactive } from "vue";
const authStore = useAuthStore(); const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
@@ -129,146 +134,159 @@ const getUser = () => {
}) })
} }
const getDefaultSite = (siteId) => { const getDefaultSite = (siteId) => {
// console.log('siteList.value',siteList.value) const getDefaultSite = (siteId) => {
// getSiteDetail(siteId).then((res) => { // console.log('siteList.value',siteList.value)
// console.log('res',res) // getSiteDetail(siteId).then((res) => {
// }); // console.log('res',res)
} // });
const getOtherInfo = () => { }
getLargeScreenInfo().then((res) => { const getOtherInfo = () => {
if (res?.code === 1000) { getLargeScreenInfo().then((res) => {
routeList.value = res.data.routeList
siteList.value = res.data.siteOption
currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
}
});
};
const getScreenInfo = (id) => {
if (id) {
tunnelId.value = id
getLargeScreen(id).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
largeScreenData.value = res.data; routeList.value = res.data.routeList
} else { siteList.value = res.data.siteOption
ElMessage.warning(res.msg) currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
} }
}); });
initSceneData(id).then((res) => {
tunnelLength.value = res.data.tunnelLength
constructionLength.value = res.data.constructionLength
})
}
};
//根据站点id获取隧道信息
const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) {
tunnelList.value = res.data
getScreenInfo(res.data[0]?.value)
}
});
}
const changeTunnel = (e) => {
let newObj = {}
tunnelList.value.forEach((item, index) => {
if (index === e) {
newObj = item
}
})
getScreenInfo(newObj.value)
// nextTick(() => {
// showFan.value = true;
// });
}
const manageSelect = (index) => {
console.log("首页点击-", index);
if (index == '站点管理') {
if (currentUserId.value) {
router.push("/site" + '/' + currentUserId.value);
}
} else if (index == '隧道管理') {
if (currentSiteId.value && currentUserId.value) {
router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
}
} else if (index == '用户管理') {
if (currentSiteId.value) {
router.push("/user/" + currentSiteId.value);
}
}
};
const handleChangeSite = (item) => {
currentSite.value = item.label
currentSiteId.value = item.value
getTunnel(item.value)
}
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
};
const closeRight = () => {
drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
authStore.userLogout();
router.push("/login");
})
};
const previousBtn = () => {
tunnelBtn.value.prev();
};
const nextBtn = () => {
tunnelBtn.value.next();
};
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
console.log(wsUrl);
socket = new WebSocket(wsUrl);
//连接发生错误的回调方法
socket.onerror = function () {
console.log("ws连接发生错误");
}; };
//连接成功建立的回调方法 const getScreenInfo = (id) => {
socket.onopen = function () { if (id) {
console.log("ws连接成功"); tunnelId.value = id
}; getLargeScreen(id).then((res) => {
//接收到消息的回调方法 if (res?.code === 1000) {
socket.onmessage = function (event) { largeScreenData.value = res.data;
console.log("服务器返回的信息: ", JSON.parse(event.data)); } else {
const type = JSON.parse(event.data).type; ElMessage.warning(res.msg)
const data = JSON.parse(event.data).data;
if (type === "equipment") {
data.forEach((item) => {
if (item.typeKey === "frequency") {
socketData.leftData = data;
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {
socketData.sensor = data;
} }
}); });
initSceneData(id).then((res) => {
tunnelLength.value = res.data.tunnelLength
constructionLength.value = res.data.constructionLength
})
} }
}; };
//连接关闭的回调方法 //根据站点id获取隧道信息
socket.onclose = function () { const getTunnel = (id) => {
console.log("ws连接关闭"); getTunnelBySiteId(id).then((res) => {
// initWebSocket() if (res?.code === 1000) {
tunnelList.value = res.data
getScreenInfo(res.data[0]?.value)
}
});
}
const changeTunnel = (e) => {
let newObj = {}
tunnelList.value.forEach((item, index) => {
if (index === e) {
newObj = item
}
})
getScreenInfo(newObj.value)
// nextTick(() => {
// showFan.value = true;
// });
}
const manageSelect = (index) => {
console.log("首页点击-", index);
if (index == '站点管理') {
if (currentUserId.value) {
router.push("/site" + '/' + currentUserId.value);
}
} else if (index == '隧道管理') {
if (currentSiteId.value && currentUserId.value) {
router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
}
} else if (index == '用户管理') {
if (currentSiteId.value) {
router.push("/user/" + currentSiteId.value);
}
}
}; };
setInterval(() => { const handleChangeSite = (item) => {
socket.send(JSON.stringify(send)); currentSite.value = item.label
}, 30000); currentSiteId.value = item.value
}; getTunnel(item.value)
const closeSocket = () => { }
socket.close(); const closeLeft = () => {
}; drawerLeft.value = !drawerLeft.value;
initWebSocket(); };
const closeRight = () => {
drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
authStore.userLogout();
router.push("/login");
})
};
const previousBtn = () => {
tunnelBtn.value.prev();
};
const nextBtn = () => {
tunnelBtn.value.next();
};
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
console.log(wsUrl);
socket = new WebSocket(wsUrl);
//连接发生错误的回调方法
socket.onerror = function () {
console.log("ws连接发生错误");
};
//连接成功建立的回调方法
socket.onopen = function () {
console.log("ws连接成功");
};
//接收到消息的回调方法
socket.onmessage = function (event) {
console.log("服务器返回的信息: ", JSON.parse(event.data));
const type = JSON.parse(event.data).type;
const data = JSON.parse(event.data).data;
if (type === "equipment") {
data.forEach((item) => {
if (item.typeKey === "frequency") {
socketData.leftData = data;
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {
socketData.sensor = data;
}
});
}
};
//连接关闭的回调方法
socket.onclose = function () {
console.log("ws连接关闭");
// initWebSocket()
};
setInterval(() => {
socket.send(JSON.stringify(send));
}, 30000);
};
const closeSocket = () => {
socket.close();
};
initWebSocket();
watch(
() => tunnelId.value,
(now) => {
tunnelId.value = now
},
{ deep: true }
)
</script> </script>
<style lang="scss"> <style lang="scss">
.el-dropdown__popper.el-popper { .el-dropdown__popper.el-popper {