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

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

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

17
src/store/modelSceneStore.js
View File

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

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

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