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

Merge pull request 'dev' (#394) from dev into master

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/394
This commit is contained in:
odjbin
2024-09-19 08:23:36 +00:00
parent eb5f2eabd7 0722b29bca
commit 645f4d241b
15 changed files with 3146 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.drone.yml
View File

@@ -1,6 +1,9 @@
kind: pipeline
type: docker
name: tunnel-cloud-web
platform:
os: linux
arch: amd64
steps:
- name: build-package
image: registry.cn-chengdu.aliyuncs.com/claywang/node:16.20.0

17
src/api/tunnel.js
View File

@@ -1,8 +1,17 @@
import request from '@/utils/request.js'
import request from "@/utils/request.js";
export const getTunnelOption = (siteId) => {
return request({
url: `/tunnel/tunnel/option/${siteId}`,
method: 'get'
})
}
method: "get",
});
};
// 数据3d隧道模拟接口渲染数据源
export const getTunnelSimulateData = (siteId) => {
return request({
url: `/tunnel/tunnel/data/${siteId}`,
method: "get",
params,
});
};

1
src/assets/styles/index.scss
View File

@@ -119,6 +119,7 @@ body,
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
//font-weight: bold;
color: #0BE9FA;

26
src/components/content/fanInfo/FanInfo.vue
View File

@@ -71,20 +71,20 @@
<div class="current" @click="handleOpenChart(item)">
<fan-info-item :wp="transducerData[index]"/>
</div>
<div class="line"></div>
</div>
<div class="shunt-box">
<div class="shuntThreshold" v-for="(item,index) in shuntList">
<div class="fenliu-icon"></div>
{{ index + 1 }}号分流阀值
<span class="units"
><input
type="number"
min="0"
v-model="item.shuntThreshold"
/></span>
</div>
<div class="line" v-if="index!=socketData.length-1"></div>
</div>
<!-- <div class="shunt-box">-->
<!-- <div class="shuntThreshold" v-for="(item,index) in shuntList">-->
<!-- <div class="fenliu-icon"></div>-->
<!-- {{ index + 1 }}号分流阀值-->
<!-- <span class="units"-->
<!-- ><input-->
<!-- type="number"-->
<!-- min="0"-->
<!-- v-model="item.shuntThreshold"-->
<!-- /></span>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="digital-tunnel">

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

@@ -1,35 +1,49 @@
<template>
<div id="scene">
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
:hasDev="hasDevice" :pointNum="pointNum" :pointGap="pointGap" :equipmentType="equipmentType"
:equipmentName="equipmentName" :equipmentValue="equipmentValue" />
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
<div id="scene">
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<pre-dialog
ref="edit"
@addEquipment="handleAddEqu"
@removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
:pointGap="pointGap"
:equipmentType="equipmentType"
:equipmentName="equipmentName"
:equipmentValue="equipmentValue"
:devRealtimeDetail="crtDevDetail"
/>
<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>
<button @click="handleConfirmAddEqu">确定</button>
</div>
</el-dialog>
</div>
"
>
<p id="remove-title">是否确定删除该设备</p>
<div class="btn">
<button @click="centerDialogVisible = false">取消</button>
<button @click="handleConfirmAddEqu">确定</button>
</div>
</el-dialog>
</div>
</template>
<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import PreDialog from "./preEquComp/preDialog.vue"
import PreDialog from "./preEquComp/preDialog.vue";
// 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -37,14 +51,14 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from "three/examples/jsm/libs/tween.module";
import {
CSS3DRenderer,
CSS3DObject,
CSS3DSprite,
CSS3DRenderer,
CSS3DObject,
CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
CSS2DRenderer,
CSS2DObject,
CSS2DRenderer,
CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
@@ -54,6 +68,9 @@ import { ElMessage } from "element-plus";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { getLargeScreen } from "@/api/largeScreen";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
@@ -62,105 +79,142 @@ let modelList = ref(null);
let demo; //定义demo全局变量
// const loader = new OBJLoader();
const form = ref({
tunnelName: "",
serialNumber: "",
totalLength: "",
referenceFrequency: '',
upTime: '',
upFrequency: '',
dropTime: '',
dropFrequency: '',
isDefault: false,
remarks: "",
tunnelName: "",
serialNumber: "",
totalLength: "",
referenceFrequency: "",
upTime: "",
upFrequency: "",
dropTime: "",
dropFrequency: "",
isDefault: false,
remarks: "",
});
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
const params = defineProps([
"isedit",
"tunnelId",
"tunnelLen",
"largeScreen",
"devRealtimeData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
// 根据设备ID获取当前设备实时数据
const crtDevDetail = ref({
equipmentName: "--",
unit: "-",
value: "-",
});
const getDevDetail = async (devId) => {
crtDevDetail.value = {
equipmentName: "--",
unit: "-",
value: "-",
};
const res = await getLargeScreen(params.tunnelId);
const devList = [
...res.data.frequencyChangerList,
...res.data.sensorList,
...res.data.windPressureSensorList,
];
crtDevDetail.value =
devList.find((sensor) => sensor.equipmentId == devId) || crtDevDetail.value;
};
// console.log(load);
let isedit = ref(params.isedit)
let isedit = ref(params.isedit);
let fanData;
let tunnelAlias = reactive('')
let tunnelAlias = reactive("");
watch(
() => params.largeScreen,
(now) => {
() => params.largeScreen,
(now) => {
// console.log(params.largeScreen);
params.largeScreen = now;
// console.log(toRaw(params.largeScreen.value).frequencyChangerList);
// console.log(params.fanList);
fanData = toRaw(params.largeScreen.value).frequencyChangerList;
// console.log(fanData);
// 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
watch(
() => params.fanList,
(now) => {
// console.log(params.largeScreen);
params.largeScreen = now;
// console.log(toRaw(params.largeScreen.value).frequencyChangerList);
// console.log(params.fanList);
fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
// console.log(fanData);
// 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
watch(
() => params.fanList,
(now) => {
// console.log(params.largeScreen);
params.fanList = now;
let fanList = toRaw(params.fanList);
//首先判断是不是存在autoMode属性
if (fanList[0].autoMode !== undefined) {
// console.log(fanData);
// console.log(fanList);
fanList.map(item => {
if (item.equipmentId == fanData[0].equipmentId) {
// console.log(item.equipmentId);
//第一个符合条件
fanData[0].breakdown = item.breakdown
fanData[0].running = item.running
// console.log(demo.scene);
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) {
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
// console.log('111');
}
else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
}
// console.log(item);
// console.log(fanData[0]);
} else {
// 第二个符合条件
// console.log(item.equipmentId);
fanData[1].breakdown = item.breakdown
fanData[1].running = item.running
// console.log(demo.scene);
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) {
// console.log('111');
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
} else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
}
// console.log(item);
// console.log(fanData[1]);
}
})
}
params.fanList = now;
let fanList = toRaw(params.fanList);
//首先判断是不是存在autoMode属性
if (fanList[0].autoMode !== undefined) {
// console.log(fanData);
// console.log(fanList);
fanList.map((item) => {
if (item.equipmentId == fanData[0].equipmentId) {
// console.log(item.equipmentId);
//第一个符合条件
fanData[0].breakdown = item.breakdown;
fanData[0].running = item.running;
// console.log(demo.scene);
if (
demo.scene.Fan1targetPoint.info.equipmentId ==
fanData[0].equipmentId
) {
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
// console.log('111');
} else if (
demo.scene.Fan2targetPoint.info.equipmentId ==
fanData[0].equipmentId
) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
}
// console.log(item);
// console.log(fanData[0]);
} else {
// 第二个符合条件
// console.log(item.equipmentId);
fanData[1].breakdown = item.breakdown;
fanData[1].running = item.running;
// console.log(demo.scene);
if (
demo.scene.Fan1targetPoint.info.equipmentId ==
fanData[1].equipmentId
) {
// console.log('111');
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
} else if (
demo.scene.Fan2targetPoint.info.equipmentId ==
fanData[1].equipmentId
) {
// console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
}
// console.log(item);
// console.log(fanData[1]);
}
});
}
// console.log(fanData);
},
{ deep: true }
);
},
{ deep: true }
// console.log(fanData);
},
{ deep: true }
);
},
{ deep: true }
);
const getTunnel = () => {
if (params.tunnelId !== 0) {
getTunnelDetail(params.tunnelId).then((res) => {
if (res?.code === 1000) {
form.value = res.data;
// console.log(form.value.tunnelAlias);
tunnelAlias = form.value.tunnelAlias
}
});
}
if (params.tunnelId !== 0) {
getTunnelDetail(params.tunnelId).then((res) => {
if (res?.code === 1000) {
form.value = res.data;
// console.log(form.value.tunnelAlias);
tunnelAlias = form.value.tunnelAlias;
}
});
}
};
getTunnel();
// const form = ref({
@@ -181,134 +235,132 @@ getTunnel();
let pointGap = reactive(params.tunnelLen.value);
watch(
() => params.tunnelLen,
(now) => {
params.tunnelLen = now;
// console.log(params.tunnelLen);
pointGap = params.tunnelLen.value / 20;
},
{ deep: true }
() => params.tunnelLen,
(now) => {
params.tunnelLen = now;
// console.log(params.tunnelLen);
pointGap = params.tunnelLen.value / 20;
},
{ deep: true }
);
watch(
() => params.tunnelId,
(now) => {
params.tunnelId = now
console.log(params.tunnelId);
// getTunnelPreview();
// console.log(form.value);
},
{ deep: true }
)
() => params.tunnelId,
(now) => {
params.tunnelId = now;
console.log(params.tunnelId);
// getTunnelPreview();
// console.log(form.value);
},
{ deep: true }
);
//这里是改变风机颜色的代码
function changeFanColor(fanData, targetPoint, scene) {
if (fanData !== undefined) {
//保证是预览模式才进行这里的操作（！=1）
if (fanData.length > 0) {
//if保证存在风机（即有长度再进行遍历）
for (let i = 0; i < fanData.length; i++) {
//先做匹配操作
let fanType = fanData[i].equipmentType
//有符合条件的风机进来了
if (targetPoint.info.typeKey == fanType) {
//下面进行变色需要的逻辑判断了
if (fanData[i].breakdown == true) {
//故障状态，变红色
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0xFF0000)
}
})
}
});
} else {
// 这里再判断是否运行
if (fanData[i].running == true) {
//运行状态,绿色 0x008000
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0x008000)
}
})
}
});
} else {
//停止状态，不变色
break;
}
if (fanData !== undefined) {
//保证是预览模式才进行这里的操作（！=1）
if (fanData.length > 0) {
//if保证存在风机（即有长度再进行遍历）
for (let i = 0; i < fanData.length; i++) {
//先做匹配操作
let fanType = fanData[i].equipmentType;
//有符合条件的风机进来了
if (targetPoint.info.typeKey == fanType) {
//下面进行变色需要的逻辑判断了
if (fanData[i].breakdown == true) {
//故障状态，变红色
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0xff0000);
}
});
}
});
} else {
// 这里再判断是否运行
if (fanData[i].running == true) {
//运行状态,绿色 0x008000
scene.traverse(function (child) {
if (child.id === targetPoint.info.id) {
child.traverse(function (obj) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0x008000);
}
});
}
});
} else {
//停止状态，不变色
break;
}
}
}
}
}
}
}
onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
demo.isedit = params.isedit;
let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf");
demo.addOrbitControls(OrbitControls);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
demo.setDistance(10);
lClickCallback(demo); //绑定左键回调
rClickCallback(demo); //绑定右键回调
const doms = [info.value.$el, edit.value.$el];
demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
demo.isedit = params.isedit;
let tunnelasync = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf"
);
demo.addOrbitControls(OrbitControls);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
demo.setDistance(10);
lClickCallback(demo); //绑定左键回调
rClickCallback(demo); //绑定右键回调
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
//先不加试试？？？
// watch(
// () => params.tunnelId,
// async () => {
// const text = await initData(params.tunnelId);
// }
// );
// 初始化设备模型
try {
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
//先不加试试？？？
// watch(
// () => params.tunnelId,
// async () => {
// const text = await initData(params.tunnelId);
// }
// );
// 初始化设备模型
try {
//在这加载隧道
const map = new Map();
map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
// 给对象初加载设备模型
demo.initDevicesModel(map);
// const equipmentList = await store.getEquipmentList();
modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
// console.log(modelList.value);
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
// setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
//在这加载隧道
const map = new Map();
map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
// 给对象初加载设备模型
demo.initDevicesModel(map);
// const equipmentList = await store.getEquipmentList();
modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
// console.log(modelList.value);
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
// setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
} catch (err) {
if (err == undefined) {
return
} else {
console.log(err);
ElMessage({
message: "场景初始化异常---！",
type: "warning",
});
}
demo.SignsInf(tunnelAlias, String(params.tunnelLen.value));
} catch (err) {
if (err == undefined) {
return;
} else {
ElMessage({
message: "场景初始化异常！",
type: "warning",
});
}
}
}
// function checkTunnelInit(equipmentList) {
// equipmentList.forEach((item) => {
// let equipment = toRaw(item)
@@ -321,242 +373,238 @@ async function handleMounted() {
// 每个模型加载回调
function loadModel(path) {
return new Promise((resolve, reject) => {
loader.load(
path,
(obj) => {
resolve(obj);
},
(xhr) => {
//这里可以拿到加载的进度条！！！
// console.log(xhr);
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(err) => {
reject(err);
}
);
});
return new Promise((resolve, reject) => {
loader.load(
path,
(obj) => {
resolve(obj);
},
(xhr) => {
//这里可以拿到加载的进度条！！！
// console.log(xhr);
// console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
(err) => {
reject(err);
}
);
});
}
let hasDevice = ref(true);
let devInfo = reactive({
meshId: null,
name: "无",
state: "无",
position: "无",
meshId: null,
name: "无",
state: "无",
position: "无",
});
// 对象建构赋值功能
function editDevInfo(
value = {
meshId: null,
name: "无",
state: "无",
position: "无",
}
value = {
meshId: null,
name: "无",
state: "无",
position: "无",
}
) {
devInfo.meshId = value.meshId;
devInfo.name = value.name;
devInfo.state = value.state;
devInfo.position = value.position;
devInfo.meshId = value.meshId;
devInfo.name = value.name;
devInfo.state = value.state;
devInfo.position = value.position;
}
//左键/双击左键回调函数
function lClickCallback(demo) {
//demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) {
editDevInfo();
return;
}
editDevInfo(targetPoint.info);
//demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) {
editDevInfo();
return;
}
// 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo);
editDevInfo(targetPoint.info);
}
// 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo);
}
let pointNum = ref(0);
let targetP = ref({});
// 右键点击附着点后调函数
function rClickCallback(demo) {
function editDev(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint;
//这里是初始化必经之路！！！
const equipmentList = modelStore.initModelDataPreview(params.tunnelId)
equipmentList.then((result) => {
previewEquInfProcess(result, targetP.value)
})
pointNum.value = Number(
targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_")
) - 1
);
if (!targetPoint.info) return;
editDevInfo(targetPoint.info);
}
demo.addFunction("editDev", editDev);
function editDev(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint;
//这里是初始化必经之路！！！
const equipmentList = modelStore.initModelDataPreview(params.tunnelId);
equipmentList.then((result) => {
previewEquInfProcess(result, targetP.value);
});
pointNum.value = Number(
targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_")
) - 1
);
if (!targetPoint.info) return;
editDevInfo(targetPoint.info);
}
demo.addFunction("editDev", editDev);
}
function throttle(fn, delay) {
var timer;
return function () {
var _this = this;
var args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay)
var timer;
return function () {
var _this = this;
var args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay);
};
}
// 添加设备
function handleAddEqu(formInfo) {
demo.addEquipment(targetP.value, formInfo);
// //将墙壁设置为可以穿透点击
// for (let line = 1; line <= 20; line++) {
// if (line < 10) {
// let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).layers.set(0)
// } else if (line >= 10) {
// let wall = 'wall_' + line
// this.scene.getObjectByName(wall).layers.set(0)
// }
// }
demo.addEquipment(targetP.value, formInfo);
// //将墙壁设置为可以穿透点击
// for (let line = 1; line <= 20; line++) {
// if (line < 10) {
// let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).layers.set(0)
// } else if (line >= 10) {
// let wall = 'wall_' + line
// this.scene.getObjectByName(wall).layers.set(0)
// }
// }
}
const centerDialogVisible = ref(false);
// 删除设备
function handleRemoveEqu() {
if (!targetP.hasDevice) {
ElMessage({
message: "该点位不存在设备！",
type: "warning",
});
return;
}
centerDialogVisible.value = true;
if (!targetP.value.hasDevice) {
ElMessage({
message: "该点位不存在设备！",
type: "warning",
});
return;
}
centerDialogVisible.value = true;
}
// 对话框确认删除
function handleConfirmAddEqu() {
console.log("target:", targetP.value.info);
modelStore
.deleteEquipment(targetP.value.info.equipmentId, pointGap)
.then((res) => {
demo.removeEquipment(targetP.value);
centerDialogVisible.value = false;
ElMessage({
message: "删除成功！",
type: "success",
});
})
.catch((res) => {
ElMessage({
message: "删除失败！",
type: "warning",
});
});
console.log("target:", targetP.value.info);
modelStore
.deleteEquipment(targetP.value.info.equipmentId, pointGap)
.then((res) => {
demo.removeEquipment(targetP.value);
centerDialogVisible.value = false;
ElMessage({
message: "删除成功！",
type: "success",
});
})
.catch((res) => {
ElMessage({
message: "删除失败！",
type: "warning",
});
});
}
// 处理取消关闭编辑框事件
function handleCancel() {
if (!demo) return;
// 关闭标签
demo.isControlOrbit(true);
demo._resetState();
demo.clearTagsObj();
if (!demo) return;
// 关闭标签
demo.isControlOrbit(true);
demo._resetState();
demo.clearTagsObj();
}
let equipmentType = ref(0)
let equipmentName = ref(0)
let equipmentValue = ref(0)
let equipmentType = ref(0);
let equipmentName = ref(0);
let equipmentValue = ref(0);
function previewEquInfProcess(equipmentList, targetP) {
for (const equipment of equipmentList) {
if (equipment.position == targetP.name) {
equipmentType.value = equipment.equipmentType
//需要将获取到的设备列表进行序列化
equipmentName.value = equipment.equipmentName
equipmentValue.value = equipment.threshold
if (equipmentType.value == 'frequency') {
equipmentType.value = '风机'
}
if (equipmentType.value == 'windPressure') {
equipmentType.value = '风压传感器'
}
if (equipmentType.value == 'sensor') {
equipmentType.value = '其他传感器'
}
// console.log(equipmentType.value);
// console.log(equipmentName.value);
// console.log(equipmentValue.value);
}
async function previewEquInfProcess(equipmentList, targetP) {
for (const equipment of equipmentList) {
if (equipment.position == targetP.name) {
equipmentType.value = equipment.equipmentType;
//需要将获取到的设备列表进行序列化
equipmentName.value = equipment.equipmentName;
equipmentValue.value = equipment.threshold;
if (equipmentType.value == "frequency") {
equipmentType.value = "风机";
}
if (equipmentType.value == "windPressure") {
equipmentType.value = "风压传感器";
}
if (equipmentType.value == "sensor") {
equipmentType.value = "其他传感器";
}
const { equipmentId } = targetP.info;
getDevDetail(equipmentId);
}
}
}
watch(params.devRealtimeData, () => {
// console.log("devRealtimeData：", params.devRealtimeData);
});
</script>
<style lang="scss" scoped>
#scene {
position: relative;
height: 100%;
width: 100%;
position: relative;
height: 100%;
width: 100%;
#cvs {
height: 100%;
}
#cvs {
height: 100%;
}
}
#remove-title {
height: 42px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #08b7b8;
line-height: 42px;
letter-spacing: 3px;
text-align: center;
margin: 65px 0px 70px 0px;
height: 42px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #08b7b8;
line-height: 42px;
letter-spacing: 3px;
text-align: center;
margin: 65px 0px 70px 0px;
}
.btn {
display: flex;
justify-content: center;
gap: 80px;
display: flex;
justify-content: center;
gap: 80px;
:nth-child(1) {
width: 190px;
height: 60px;
border-radius: 11px;
border: 2px solid #0f82af;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 37px;
background: transparent;
}
:nth-child(1) {
width: 190px;
height: 60px;
border-radius: 11px;
border: 2px solid #0f82af;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 37px;
background: transparent;
}
:nth-child(2) {
width: 190px;
height: 60px;
background: #08b7b8;
border-radius: 11px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 37px;
}
:nth-child(2) {
width: 190px;
height: 60px;
background: #08b7b8;
border-radius: 11px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 37px;
}
}
</style>

62
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="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="
<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>
@@ -61,7 +78,13 @@ const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
const params = defineProps([
"isedit",
"tunnelId",
"tunnelLength",
"form",
"devRealtimeData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId);
@@ -114,13 +137,12 @@ async function handleMounted() {
params.form
);
// modelList.value = await initData(params.tunnelId, params.form);
console.log("test", modelList.value);
// console.log("test", modelList.value);
demo.editTunnelInit(toRaw(modelList.value));
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength))
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (err) {
console.log(err);
ElMessage({
message: "场景初始化异常---！",
message: "场景初始化异常！",
type: "warning",
});
}
@@ -134,7 +156,7 @@ function loadModel(path) {
(obj) => {
resolve(obj);
},
(xhr) => { },
(xhr) => {},
(err) => {
reject(err);
}
@@ -247,14 +269,13 @@ function handleConfirmAddEqu() {
type: "success",
});
})
.catch(
(res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
.catch((res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
});
}
// 处理取消关闭编辑框事件
function handleCancel() {
@@ -291,6 +312,11 @@ const ThreeConfig = {
},
msg: "dda",
};
//=================实时更新数据
watch(params.devRealtimeData, () => {
// console.log("devRealtimeData：", params.devRealtimeData);
});
</script>
<style lang="scss" scoped>

109
src/components/content/tunnelScene/preEquComp/preDialog.vue
View File

@@ -29,32 +29,29 @@
<p>{{ params.equipmentName }}</p>
</div>
<div class="setting-item">
<p>参数:</p>
<p>31.3%</p>
<p>{{ getDevParam + ":" }}</p>
<p>
{{
params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
"--"
}}
</p>
</div>
<!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
:disabled="isDisabledInputNum" />
<p>{{ params.equipmentValue }}</p> -->
</div>
<div class="btn">
<!-- <button @click="removeEquipment" disabled>删除</button> -->
<!-- <button @click="addEquipment" disabled>添加</button> -->
</div>
<!-- <div class="btn">
<button @click="removeEquipment">删除</button>
<button @click="addEquipment" disabled>添加</button>
</div> -->
</div>
</template>
<script setup>
import InputNum from "./childComps/InputNum.vue";
import {
reactive,
computed,
defineEmits,
defineProps,
watch,
nextTick,
ref,
} from "vue";
import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
// 定义事件发射器，父组件监听
const emit = defineEmits([
@@ -69,11 +66,30 @@ const params = defineProps([
"equipmentType",
"equipmentName",
"equipmentValue",
"devRealtimeDetail",
]); //隧道第几个锚点
// 当前风压
let p = ref(57);
const getDevParam = computed(() => {
if (/^windPressure+/.test(params.devRealtimeDetail.equipmentType)) {
return "风压";
} else if (/^frequency+/.test(params.devRealtimeDetail.equipmentType)) {
return "频率";
}
switch (params.devRealtimeDetail.equipmentType) {
case "windDirection":
return "风向";
case "temperature":
return "温度";
case "windSpeed":
return "风速";
case "humidness":
return "湿度";
default:
return "浓度";
}
});
// function EquInf() {
// // 发射事件给tunnel父组件
// emit("EquInf");
@@ -171,22 +187,21 @@ function addEquipment() {
equipmentSetting.equipmentType = "";
equipmentSetting.threshold = "";
}
const equipmentType = {
label: String, //传感器类型
typeId: String, //传感器类型ID(方便查找该类型的所有设备)
};
// 通过以上选项请求以下具体哪个设备
const equipment = {
label: String, //传感器编号加名称
equId: String, // 传感器Id
};
// const equipmentType = {
// label: String, //传感器类型
// typeId: String, //传感器类型ID(方便查找该类型的所有设备)
// };
// // 通过以上选项请求以下具体哪个设备
// const equipment = {
// label: String, //传感器编号加名称
// equId: String, // 传感器Id
// };
</script>
<style lang="scss" scoped>
#edit-dialog {
// width: 540px;
width: 230px;
height: 120px;
width: 240px;
// height: 120px;
// min-height: 683px;
background: rgba(7, 35, 72, 0.79);
border-radius: 20px;
@@ -203,7 +218,7 @@ const equipment = {
margin: 20px 20px 0px 30px;
p {
width: 388px;
width: 400px;
height: 35px;
font-size: 24px;
font-family: MicrosoftYaHei;
@@ -243,19 +258,21 @@ const equipment = {
padding: 15px 15px 5px 15px;
display: flex;
gap: 10px;
p {
width: 190px;
line-height: 35px;
font-size: 18px;
font-family: MicrosoftYaHei;
p:nth-child(1) {
width: 80px;
height: 35px;
line-height: 35px;
font-size: 18px;
font-family: MicrosoftYaHei;
color: #ffffff;
text-align: right;
}
p:nth-child(2) {
color: #f7b500;
height: 35px;
text-align: left;
flex: 2;
}
}
@@ -295,7 +312,25 @@ const equipment = {
}
.btn {
margin: 100px 40px 40px 40px;
display: flex;
justify-content: flex-end;
button {
cursor: pointer;
transition: transform 0.1s linear 0s;
}
& :nth-child(1) {
width: 95px;
height: 39px;
border-radius: 11px;
border: 2px solid #0f82af;
background: transparent;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 39px;
margin: 15px;
}
/* margin: 100px 40px 40px 40px;
display: flex;
justify-content: space-between;
@@ -331,10 +366,10 @@ const equipment = {
font-weight: bold;
color: #ffffff;
line-height: 60px;
}
}*/
button:active {
transform: scale(0.9);
transform: scale(0.98);
}
}
}

18
src/router/index.js
View File

@@ -41,6 +41,24 @@ const routes = [
breadcrumb: true
},
},
{
path: '/simulate/:tunnelId',
name: 'simulateTunnel',
component: () => import('@/views/tunnel-simulate/index.vue'),
meta: {
title: '隧道模拟',
breadcrumb: true
},
},
{
path: '/simulate/tunnel/list',
name: 'tunnelList',
component: () => import('@/views/tunnel-simulate/tunnel-list.vue'),
meta: {
title: '隧道列表',
breadcrumb: true
},
},
{
path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
name: 'tunneledit',

22
src/store/modelSceneStore.js
View File

@@ -4,13 +4,23 @@ import { apiSaveEquipment, initSceneData } from "../api/tunnelScene";
export const useModelSceneStore = defineStore("modelSceneData", () => {
let equipmentList = ref([]);
let tunnelGatewayDtoList = ref([]);
let serialNumber = ref("");
let tunnelAlias = ref("");
let serialNumberPrefix = ref("");
let requestOtherConfig = ref({});
function initModelData(tunnelId, otherConfig) {
return new Promise((resolve, reject) => {
console.info("🚀 ~method:otherConfig -----", otherConfig)
tunnelAlias.value=otherConfig.tunnelAlias
handleSettingOtherConfig(otherConfig, requestOtherConfig);
initSceneData(tunnelId)
.then((res) => {
console.info("🚀 ~method:res -----", res)
serialNumber.value=res.data.serialNumber
serialNumberPrefix.value=res.data.serialNumberPrefix
tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList
if (res.data.tunnelThreeConfig) {
equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
} else {
@@ -34,6 +44,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
return new Promise((resolve, reject) => {
initSceneData(tunnelId)
.then((res) => {
console.info("🚀 ~method:initSceneData -----", res)
serialNumber.value=res.data.serialNumber
serialNumberPrefix.value=res.data.serialNumberPrefix
tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList
if (res.data.tunnelThreeConfig) {
equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
} else {
@@ -61,6 +75,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
pointGap
),
modelEquipmentList: toRaw(equipmentList.value),
serialNumber:serialNumber.value,
tunnelAlias:tunnelAlias.value,
serialNumberPrefix:serialNumberPrefix.value,
tunnelGatewayDtoList:tunnelGatewayDtoList.value,
...requestOtherConfig,
})
.then((res) => {
@@ -91,6 +109,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
pointGap
),
modelEquipmentList: toRaw(equipmentList.value),
serialNumber:serialNumber.value,
tunnelAlias:tunnelAlias.value,
serialNumberPrefix:serialNumberPrefix.value,
tunnelGatewayDtoList:tunnelGatewayDtoList.value,
...requestOtherConfig,
})
.then((res) => {

4
src/views/debug/index.vue
View File

@@ -85,12 +85,12 @@ const initWebSocket = () => {
};
//连接成功建立的回调方法
socket.onopen = function () {
console.log("ws连接成功");
// console.log("ws连接成功");
}
//接收到消息的回调方法
socket.onmessage = function (event) {
dataList.value.push(JSON.parse(event.data))
console.log("服务器返回的信息: ", JSON.parse(event.data));
// console.log("服务器返回的信息: ", JSON.parse(event.data));
}
//连接关闭的回调方法
socket.onclose = function () {

11
src/views/device-manage/index.vue
View File

@@ -76,7 +76,7 @@
></el-input>
</template>
</el-table-column>
<el-table-column prop="serialNumber" label="序列号" align="center" width="500">
<el-table-column prop="serialNumber" label="序列号" align="center" >
<template #default="scope">
<!-- {{scope.row.serialNumberOption.filter(item => item.value == scope.row.serialNumber).map(item => item.label)[0]}}?-->
<!-- <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
@@ -394,10 +394,10 @@ const clearWinDataSelectedOption=()=>{
winDataSelectedOption.value=[]
}
const changeWindDataSerialNumber = (value,options) => {
console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
// console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
options?.forEach(item=>{
if(item.value==value){
console.info("🚀 ~method:item.label -----", item.label)
// console.info("🚀 ~method:item.label -----", item.label)
if(item.label.indexOf('PLC')>=0){
winDataSelectedOption.value=[]
}else{
@@ -469,7 +469,7 @@ const editEquip = debounce(() => {
sensorList: newSensor,
// shuntList: editFenLiuData.value,
}
console.info("🚀 ~ file:index method: line:478 -----",basicData)
// console.info("🚀 ~ file:index method: line:478 -----",basicData)
editEquipment(basicData).then(res => {
if (res.code === 1000) {
loading.close()
@@ -541,7 +541,7 @@ getList()
<style lang="scss">
.serialNumber{
.el-input{
width: 580px!important;
width: 570px!important;
}
.el-input__suffix-inner{
.el-icon{
@@ -556,6 +556,7 @@ getList()
}
}
.el-select.serialNumber {
width: 580px!important;
border-radius: 6px!important;
border: 1px solid #05FEFF!important;
background-color: transparent!important;

2
src/views/tunnel-manage/index.vue
View File

@@ -476,7 +476,7 @@ const handleSubmit = debounce((instance) => {
...form.value,
tunnelGatewayDtoList: serialNumberList.value
}
console.info("🚀 ~method:data -----", data)
// console.info("🚀 ~method:data -----", data)
addTunnel(data).then(res => {
if (res.code === 1000) {
ElMessage.success('新增成功')

1174
src/views/tunnel-simulate/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

968
src/views/tunnel-simulate/tunnel-list.vue Normal file
View File

@@ -0,0 +1,968 @@
<template>
<div class="tunnel-bgc">
<div class="box-top">
<div class="back-tunnel" @click="handleGoSiteOrIndex">
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="site-name">
{{ siteName }}
</div>
<tunnel-title/>
<div class="all-del-btn" v-if="showOperation">
<div class="all-btn" style=" margin-right: 40px;" v-if="showAddIcon" @click="handleAdd">
添加
</div>
<div class="all-btn" @click="handleChooseAll">
全选
</div>
<div class="all-btn del-btn" @click="handleMoreDelete">
删除
</div>
</div>
</div>
<div class="box-content" >
<div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
<div class="top">
<span>{{ item.tunnelName }}</span>
<span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
<el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
<span v-else>默认</span>
</div>
<div class="box-center">
<div>
<!-- @click="handlePreview(item.tunnelId)"-->
<div class="left-img"></div>
<div style="display: flex;justify-content: center">
<div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.tunnelId)">
<div class="edit-icon"></div>
<div>去模拟</div>
</div>
</div>
</div>
<div class="tunnel-right">
<div class="icons-block">
<div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
<div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
<span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="site-box add-box" @click="handleAdd" v-if="showOperation">
<div class="add-icon"></div>
<div style="cursor: pointer">添加隧道</div>
</div>
</div>
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
<div class="siteId">
<span>{{ title }}</span>
</div>
<el-form :model="form" :label-position="right" label-width="230px" :rules="formRules" ref="formInstance">
<el-form-item label="隧道名称" prop="tunnelName">
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
</el-form-item>
<el-form-item label="隧道简称" prop="tunnelAlias">
<el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
</el-form-item>
<el-form-item label="隧道长度" prop="totalLength">
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
</el-form-item>
<el-form-item label="施工长度" prop="constructionLength">
<el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
</el-form-item>
<el-form-item label="风机初始频率" prop="fanInitialFrequency">
<el-input type="number" v-model="form.fanInitialFrequency" placeholder="请输入风机初始频率"/>
</el-form-item>
<el-form-item label="爆破量级" prop="burstLevel">
<el-input type="number" v-model="form.burstLevel" placeholder="请输入爆破量级"/>
</el-form-item>
<el-form-item label="是否默认">
<el-radio-group v-model="form.isDefault">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
</el-form-item>
</el-form>
<div class="btns">
<div class="cancel-btn" @click="isVisited=false">
取消
</div>
<div class="sure-btn" @click="handleSubmit(formInstance)">
确定
</div>
</div>
</el-dialog>
<div class="pagination">
<span @click="firstPage" v-if="showFirst">首页</span>
<el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
:total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
@current-change="handleCurrentChange" :hide-on-single-page="true"/>
<span @click="lastPage" v-if="showFirst">尾页</span>
</div>
</div>
</template>
<script setup>
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
import {getSiteDrawing, getSiteDetail} from "@/api/site";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import {getTunnelBySiteId} from "@/api/largeScreen";
import {debounce} from 'lodash'
const serialNumberList = ref([
{
serialNumber: '',
serialNumberType: ''
}
])
const validateNumber = (rule, value) => {
const reg = /^[A-Za-z0-9]+$/;
return reg.test(value);
}
const validateSerialNumberPrefix = (rule, value) => {
return value.length > 13 && value.slice(0, -2) == form.value.serialNumberPrefix;
}
const router = useRouter()
const siteImage = ref()
const showAddIcon = ref(false)
const params = router.currentRoute.value.params;
const siteId = reactive(params.siteId)
const userId = reactive(params.userId)
const type = reactive(params.type)
const formRules = ref({
tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
})
const showFirst = ref(false)
const showOperation = ref(true)
const formInstance = ref()
const tunnelList = ref([])
const iconsList = ref([
{
icon: 'sd_icon_fj.png',
name: '风机',
type: 'frequency',
num: 0
},
{
icon: 'sd_icon_sd.png',
name: '湿度',
type: 'humidness',
num: 0
},
{
icon: 'sd_icon_fy.png',
name: '风压',
type: 'windPressure',
num: 0
},
{
icon: 'sd_icon_yq.png',
name: '氧气',
type: 'oxygen',
num: 0
},
{
icon: 'sd_icon_fs.png',
name: '风速',
type: 'windSpeed',
num: 0
},
{
icon: 'sd_icon_fc.png',
name: '粉尘',
type: 'dust',
num: 1
},
{
icon: 'sd_icon_wd.png',
name: '温度',
type: 'temperature',
num: 0
},
{
icon: 'sd_icon_qt.png',
name: '有害气体',
type: 'harmfulGas',
num: 0
},
])
const title = ref('新增隧道')
const showNull = ref(false);
const isVisited = ref(false);
const tunnelIds = ref([])
const tunnelNameList = ref([])
const siteName = ref(localStorage.getItem('site'))
const form = ref({
tunnelName: '',
tunnelAlias: '',
serialNumberPrefix: '',
serialNumber: '',
// serialNumberOne: '',
totalLength: '',
referenceFrequency: '',
upTime: 0,
upFrequency: '',
dropTime: 0,
dropFrequency: 0,
remarks: '',
isDefault: false
});
const isEdit = ref(false)
const pageInfo = reactive({
pageNum: 1,
pageSize: 12
});
const total = ref(0);
onMounted(() => {
showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
})
const handleGoToSimulateTunnel = (tunnelId) => {
router.push('/simulate/' + tunnelId)
}
const addSerialNumber = () => {
serialNumberList.value.push({
serialNumber: '',
serialNumberType: '',
})
}
const delSerialNumber = (index) => {
serialNumberList.value.splice(index, 1)
}
const getSiteImg = () => {
showNull.value = false
getSiteDrawing(siteId).then((res) => {
if (res.code === 1000) {
if (res.data.drawingData === null) {
// ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
// }).catch(()=>{
showNull.value = true
// })
} else {
showNull.value = false
siteImage.value = res.data.drawingData
}
}
});
}
const clickHot = (id) => {
console.log('点击热区===============')
router.push('/' + id + '/' + siteId)
}
// const testArr=[]
const clickHandler = (id) => {
// let obj=e.offsetX+','+e.offsetY
// testArr.push(obj)
// console.log('正确数值',testArr.map(item=>item).join())
// console.log('点击',e.offsetX+','+e.offsetY+',')
// console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
}
const handleGoSiteOrIndex = () => {
if (type === 'bySite') {
router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
} else if (type === 'byHome') {
router.push('/' + 'siteToHome/' + siteId)
}
}
//根据站点id获取隧道信息
const getTunnel = (id) => {
getSiteDetail(id).then((res) => {
if (res?.code === 1000) {
siteName.value = res.data.siteName
}
});
}
getTunnel(1)
const getList = () => {
const loading = ElLoading.service({
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
getTunnelList({
siteId: 1,
...pageInfo
}).then(res => {
if (res.code === 1000) {
total.value = res.data.total
tunnelList.value = res.data.rows
showFirst.value = (total.value / pageInfo.pageSize) > 1;
showAddIcon.value = (total.value / pageInfo.pageSize) == 1;
// siteName.value = res.data.siteName
} else {
ElMessage.warning(res.msg)
}
loading.close()
})
}
getList()
const firstPage = () => {
pageInfo.pageNum = 1
getList()
}
const lastPage = () => {
pageInfo.pageNum = total.value / pageInfo.pageSize
getList()
}
//点击页码进行分页功能
const handleCurrentChange = (val) => {
pageInfo.pageNum = val
getList()
}
const handleSubmit = debounce((instance) => {
if (serialNumberList.value?.length > 0 && !serialNumberList.value[0].serialNumber && !serialNumberList.value[0].serialNumberType) {
serialNumberList.value = []
}
if (!instance) return
instance.validate(async (valid) => {
if (!valid) return
const data = {
siteId: siteId,
...form.value,
tunnelGatewayDtoList: serialNumberList.value
}
// console.info("🚀 ~method:data -----", data)
addTunnel(data).then(res => {
if (res.code === 1000) {
ElMessage.success('新增成功')
getList()
isVisited.value = false
} else {
ElMessage.warning(res.msg)
}
})
})
}, 100)
//预览隧道
const handlePreview = (id) => {
if (id) {
getTunnelBySiteId(siteId).then((res) => {
if (res?.code === 1000) {
if (res.data.filter((item) => item.value == id).length === 0) {
ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
} else {
router.push('/' + id + '/' + siteId)
}
}
});
}
}
const handleGoToEditTunnel = (tunnelId) => {
isEdit.value = true
if (type === 'bySite') {
router.push('/edit/' + tunnelId + '/bySite/' + userId)
} else if (type === 'byHome') {
router.push('/edit/' + tunnelId + '/byHome/' + userId)
}
}
const handleChooseAll = debounce(() => {
tunnelList.value.map(item => {
item.checked = !item.checked
if (item.checked && !item.isDefault) {
tunnelIds.value.push(item.tunnelId)
} else if (!item.checked && !item.isDefault) {
tunnelIds.value.map((newItem, index) => {
if (newItem === item.tunnelId) {
tunnelIds.value.splice(index, 1)
}
})
}
})
}, 100)
const handleEditDevice = (tunnelId) => {
if (type === 'bySite') {
router.push('/device/' + tunnelId + '/bySite/' + userId)
} else if (type === 'byHome') {
router.push('/device/' + tunnelId + '/byHome/' + userId)
}
}
const restFrom = () => {
form.value = {
tunnelName: '',
tunnelAlias: '',
serialNumber: '',
totalLength: '',
referenceFrequency: '',
upTime: 0,
upFrequency: '',
dropTime: 0,
dropFrequency: '',
remarks: '',
isDefault: false
}
}
const handleAdd = () => {
restFrom()
title.value = '新增隧道'
isVisited.value = true
serialNumberList.value = [
// {
// serialNumber: '',
// serialNumberType:''
// }
]
nextTick(() => {
// 清空校验
formInstance.value.clearValidate()
})
}
const getImageUrl = (name) => {
return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
}
const handleClickSite = (type) => {
if (type.checked) {
tunnelIds.value.push(type.tunnelId)
tunnelNameList.value.push(type.tunnelName)
} else {
tunnelIds.value.map((item, index) => {
if (item === type.tunnelId) {
tunnelIds.value.splice(index, 1)
}
})
tunnelNameList.value.map((item, index) => {
if (item === type.tunnelName) {
tunnelNameList.value.splice(index, 1)
}
})
}
}
const handleMoreDelete = debounce(() => {
if (tunnelIds.value.length === 0) {
ElMessage.warning('请先选择隧道进行删除')
} else {
ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'delBox'
}).then(() => {
deleteTunnel(tunnelIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
tunnelIds.value = []
tunnelNameList.value = []
} else {
ElMessage.error(res.msg)
}
})
})
}
}, 100)
</script>
<style scoped lang="scss">
.serialNumber-name-overflow-hidden {
}
.showNull {
margin-top: 150px;
font-size: 60px;
color: #05FEFF;
}
:deep(.el-form-item__error) {
font-size: 35px;
}
:deep(.el-form-item__content) {
.el-input-number {
width: 237px;
.el-input-number__decrease, .el-input-number__increase {
background-color: #08B7B8;
width: 50px;
.el-icon {
font-size: 40px;
color: #FFFFFF;
font-weight: bold;
}
}
}
}
.site-name {
position: absolute;
left: 250px;
z-index: 2;
margin-left: 120px;
height: 61px;
font-size: 46px;
font-weight: bold;
color: #FFFFFF;
line-height: 61px;
}
.model-change {
z-index: 55;
position: absolute;
left: 700px;
font-size: 46px;
color: #05FEFF;
display: flex;
//flex-direction: column;
.model {
display: flex;
align-items: center;
cursor: pointer;
&:last-child {
margin-left: 30px
}
> span:hover {
text-decoration: underline;
}
}
.card-bg {
width: 42px;
height: 44px;
background-image: url('@/assets/images/tunnel/sd_icon_tzdh.png');
margin-right: 16px;
}
.img-bg {
width: 42px;
height: 44px;
background-image: url('@/assets/images/tunnel/sd_icon_dtdh.png');
margin-right: 16px;
}
}
:deep(.el-radio-group) {
margin-top: 10px;
}
:deep(.el-radio__label) {
color: #FFFFFF;
font-size: 38px;
}
:deep(.el-radio__inner) {
width: 40px;
height: 40px;
border-radius: 25px;
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__inner ) {
background: #064B66;
border-color: #05FEFF !important;
}
:deep(.el-radio__inner::after) {
width: 18px;
height: 18px;
background: #05FEFF;
}
:deep(.el-dialog) {
border: 2px solid #05FEFF;
background: #0D6578;
border-radius: 20px;
padding: 30px 40px;
box-sizing: border-box;
//margin: 458px auto 0 auto;
.el-dialog__header {
padding: 0;
display: none;
}
}
:deep(.el-form-item) {
margin-top: 40px;
}
:deep(.el-form-item__label) {
font-size: 38px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
margin-right: 12px;
line-height: 50px;
}
:deep(.el-input) {
height: 75px;
.el-input__wrapper {
background-color: transparent;
border: 1px solid #08B7B8;
.el-input__inner {
height: auto;
color: #fff;
font-size: 38px;
}
.el-input__suffix-inner {
font-size: 30px;
color: #08B7B8;
line-height: 40px;
font-weight: bold;
}
}
}
.siteId {
display: flex;
justify-content: center;
margin: 0 0 60px 0;
font-size: 50px;
color: #FFFFFF;
}
.tunnel-bgc {
background-color: #072348;
padding: 85px 0 0 0;
width: 100%;
height: 100%;
background-image: url('@/assets/images/tunnel/sd_bj.png');
.box-top {
display: flex;
justify-content: space-between;
.back-tunnel {
cursor: pointer;
margin: 0 0 0 70px;
display: flex;
align-items: center;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
font-size: 38px;
color: #FFFFFF;
.back-icon {
margin-right: 20px;
margin-left: 23px;
width: 33px;
height: 33px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
.all-del-btn {
display: flex;
.del-btn {
width: 168px;
height: 60px;
background: #08B7B8;
border-radius: 11px;
}
.all-btn {
cursor: pointer;
padding-left: 53px;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
color: #FFFFFF;
font-size: 38px;
&:last-child {
margin-left: 40px;
margin-right: 70px;
}
}
}
}
.img-box {
margin: 100px;
}
.box-content::after {
content: '';
flex: 0.65;
justify-content: flex-end;
}
.box-content {
height: 1850px;
display: flex;
flex-wrap: wrap;
padding-left: 67px;
//padding-right: 70px;
align-content: flex-start;
justify-content: space-between;
box-sizing: border-box;
overflow: hidden;
.add-box {
cursor: pointer;
font-weight: bold;
color: #60DDDE;
font-size: 38px;
display: flex;
flex-direction: column;
align-items: center;
.add-icon {
margin-top: 110px;
margin-bottom: 87px;
width: 220px;
height: 220px;
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
}
}
.site-box {
//cursor: pointer;
margin-top: 50px;
margin-right: 1.5%;
padding: 40px 30px;
width: 925px;
height: 550px;
background-image: url('@/assets/images/tunnel/zdgl_bj.png');
//box-sizing: border-box;
position: relative;
//&:hover {
// background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
//}
//
//&:nth-child(4n) {
// margin-right: 0;
//}
.top {
display: flex;
justify-content: space-between;
font-size: 45px;
font-weight: bold;
color: #FFFFFF;
line-height: 50px;
> span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
> span:nth-child(2) {
font-size: 38px;
color: #5CE4F2;
}
> span:last-child {
margin-left: 5px;
width: 95px;
padding: 1px 8px;
font-size: 32px;
border: 2px solid #05FEFF;
border-radius: 10px;
position: relative;
}
}
.box-center {
display: flex;
//flex-direction: column;
> div:first-child {
> div:nth-child(2) {
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 30px;
}
}
.left-img {
//cursor: pointer;
margin-top: 110px;
margin-right: 50px;
width: 340px;
height: 148px;
background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
}
.edit-btn {
cursor: pointer;
margin-top: 100px;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 30px;
color: #60DDDE;
//margin-left: 175px;
.edit-icon {
width: 32px;
height: 34px;
background-image: url('@/assets/images/tunnel/device.png');
margin-right: 10px;
}
.edit-icon-two {
width: 32px;
height: 34px;
background-image: url('@/assets/images/tunnel/device.png');
margin-right: 10px;
}
}
.tunnel-right {
padding-top: 40px;
> div:first-child {
display: flex;
align-items: center;
font-size: 36px;
color: #FB3838;
.fan-icon {
margin-right: 10px;
width: 32px;
height: 32px;
background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
}
}
.icons-block {
margin-top: 50px;
display: flex;
flex-wrap: wrap;
.icon-text {
display: flex;
justify-content: space-between;
align-items: center;
color: #FFFFFF;
font-size: 34px;
margin-right: 17px;
margin-bottom: 30px;
&:first-child {
margin-right: 37px;
}
&:nth-child(2n) {
margin-right: 0;
}
.icon {
width: 32px;
height: 32px;
margin-right: 10px;
}
}
}
}
}
}
}
.pagination {
display: flex;
align-items: center;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
bottom: 50px;
color: #60DDDE;
font-size: 38px;
font-weight: bold;
:deep(.el-pagination.is-background ) {
.btn-next, .btn-prev {
background-color: transparent;
}
.el-pager {
li {
margin: 0 0 0 40px;
}
li.is-active {
background-color: #60DDDE;
}
}
}
> span:first-child {
margin-right: 60px;
}
> span:last-child {
margin-left: 71px;
}
:deep(.btn-prev) {
background-color: transparent;
font-size: 38px;
font-weight: bold;
color: #60DDDE;
margin-right: 20px;
}
:deep(.btn-next) {
background-color: transparent;
font-size: 38px;
font-weight: bold;
color: #60DDDE;
margin-left: 30px;
}
:deep(.el-pager li.is-active ) {
width: 70px;
height: 70px;
background: #60DDDE;
border-radius: 50%;
color: #071F40;
font-size: 38px;
font-weight: bold;
}
:deep(.el-pager li) {
margin-left: 40px;
}
:deep(.el-pager li:not(.is-active) ) {
width: 70px;
height: 70px;
border: 1px solid #60DDDE;
border-radius: 50%;
background-color: transparent;
font-size: 38px;
font-weight: bold;
color: #60DDDE;
}
}
}
</style>

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

File diff suppressed because it is too large Load Diff