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

trp:合并分支

Browse Source
This commit is contained in:
trp
2025-01-03 11:15:23 +08:00
parent 3a2bd596a9 1f83ddfa8e
commit 4293418c35
8 changed files with 679 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/largeScreen.js
View File

@@ -160,20 +160,20 @@ export const getSimulationBadGasEchartsInfo = (id,time,type,startTime,endTime) =
export const startSimulation = (projectId) => {
return request({
url: `/tunnel/simulation/start/${projectId}`,
method: 'post'
method: 'get'
})
}
// 结束模拟
export const endSimulation = (projectId) => {
return request({
url: `/tunnel/simulation/stop/${projectId}`,
method: 'post'
method: 'get'
})
}
//模拟爆破
export const blastingSimulation = (projectId,level) => {
return request({
url: `/tunnel/simulation/blasting/${projectId}/${level}`,
method: 'post'
method: 'get'
})
}

8
src/api/tunnelManage.js
View File

@@ -108,6 +108,14 @@ export const addSimulateTunnel = (data) => {
})
}
export const editSimulateTunnel = (data) => {
return request({
url: '/tunnel/simulate/edit',
method: 'post',
data
})
}
export const editSimulateEquipment = (data) => {
return request({
url: '/tunnel/simulate',

477
src/components/content/tunnelScene/TunnelSceneSimulate-back.vue Normal file
View File

@@ -0,0 +1,477 @@
<template>
<div id="scene">
<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="-->
<!-- 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>
</template>
<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import EditDialog from "./editEquComp/editDialog.vue";
// 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from "three/examples/jsm/libs/tween.module";
import {
CSS3DRenderer,
CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import {
onMounted,
reactive,
ref,
toRaw,
watch,
defineProps,
defineExpose,
} from "vue";
import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { getScreenSimulateTunnel } from "@/api/tunnelManage";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
const edit = ref(null);
let modelList = ref(null);
let demo; //定义demo对象
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps([
"isedit",
"tunnelId",
"tunnelLength",
"form",
"deviceData",
"devRealtimeData",
"simulateData",
"tunnelAlias",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId);
watch(
() => params.tunnelLength,
(now) => {
params.tunnelLength = now;
// console.log(params.tunnelLength);
pointGap = now / 20;
// console.log(params.form.tunnelName);
},
{ 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中的初始化中进行)
// "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
demo.isedit =false;
const loaded = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf",
true,
);
demo.addOrbitControls(OrbitControls, true);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
demo.setDistance(10);
// lClickCallback(demo); //绑定左键回调
// rClickCallback(demo); //绑定右键回调
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
// 初始化设备模型
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);
// 初始化渲染设备
// modelList.value = await modelStore.initModelData(
// params.tunnelId,
// params.form
// );
modelList.value = [
{
typeKey: "frequency",
position: "point_001_tr",
threshold: "",
equipmentId: 3048,
equipmentName: "温度传感器",
equipmentType: "sensor",
data: 100, //实时数据
unit: "℃", //单位
},
{
typeKey: "temperature",
position: "point_020_tr",
threshold: "",
equipmentId: 10,
equipmentName: "1度传感器",
equipmentType: "sensor",
data: 10, //实时参数
unit: "%", //单位
},
];
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel(params.tunnelId);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
data:'10',
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
console.log('modeData',modeData)
demo.editTunnelInit(modeData);
// 初始化标牌信息
demo.SignsInf(params.tunnelAlias, String(params.tunnelLength));
} catch (err) {}
}
// 从新渲染数据
async function rerender() {
try {
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel(params.tunnelId);
console.log(data);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
demo.editTunnelInit(modeData);
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (error) {
ElMessage({
message: "获取仿真数据异常！",
type: "warning",
});
}
}
// 随机生成1-20的随机数
function randomNum(max = 20) {
const nums = new Set();
while (nums.size < max) {
nums.add(Math.floor(Math.random() * max + 1).toString());
}
return [...nums];
}
//随机定位
function randomPosition(simulateData) {
const mid = Math.floor(simulateData.length / 2);
const lrIndex = Math.floor(Math.random() * 2);
const lr_position = ["tl", "tr"];
const leftPosition = randomNum();
const rightPosition = randomNum();
const leftData = simulateData.slice(0, mid).map((item, index) => ({
...item,
position: `point_0${leftPosition[index].padStart(2, 0)}_${
lr_position[lrIndex]
}`,
}));
const rightData = simulateData
.slice(mid, simulateData.length)
.map((item, index) => ({
...item,
position: `point_0${rightPosition[index].padStart(2, 0)}_${
lr_position[1 - lrIndex]
}`,
}));
return [...leftData, ...rightData];
}
// 每个模型加载回调
function loadModel(path) {
return new Promise((resolve, reject) => {
loader.load(
path,
(obj) => {
resolve(obj);
},
(xhr) => {},
(err) => {
reject(err);
}
);
});
}
let hasDevice = ref(true);
let devInfo = reactive({
meshId: null,
name: "无",
state: "无",
position: "无",
});
// 对象建构赋值功能
function editDevInfo(
value = {
meshId: null,
name: "无",
state: "无",
position: "无",
}
) {
devInfo.meshId = value.meshId;
devInfo.name = value.name;
devInfo.state = value.state;
devInfo.position = value.position;
}
//左键/双击左键回调函数
function lClickCallback(demo) {
// console.log('左键点击查看信息');
//demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) {
editDevInfo();
return;
}
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;
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 streetSigns(){
// }
// 场景添加设备
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)
// }
// }
}
const centerDialogVisible = ref(false);
// 删除设备
function handleRemoveEqu() {
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;
handleCancel();
ElMessage({
message: "删除成功！",
type: "success",
});
})
.catch((res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
});
}
// 处理取消关闭编辑框事件
function handleCancel() {
if (!demo) return;
// 关闭标签
demo.isControlOrbit(true);
demo._resetState();
demo.clearTagsObj();
}
//现在首先有二种方案，是写在TunnelScene.vue中还是demo.js中呢？
//我认为可能看数据在哪获取？到时候看在哪里导入，首先我们放在TunnelScene里面吧
//因为没获取到接口，我们先写死！！！
//需要参考接口的数据结构！！！，主要是传入函数的参数应该是什么结构？？？
const ThreeConfig = {
code: 0,
data: {
tunnelThreeConfig: [
{
equipmentId: "fan_01", //传感器id
equipmentName: "01", //设备名称
pointName: "point_005_tl", //附着点名称(定位)
equipmentType: "fan", //设备类型(类型可根据后端
equipmentValue: 23, //设备存的值
},
{
equipmentId: "sensors_01", //传感器id
equipmentName: "01", //设备名称
pointName: "point_009_bl", //附着点名称(定位)
equipmentType: "sensors", //设备类型(类型可根据后端
equipmentValue: 67, //设备存的值
},
],
},
msg: "dda",
};
//=================实时更新数据
watch(params.devRealtimeData, () => {
// console.log("devRealtimeData：", params.devRealtimeData);
});
defineExpose({
rerender,
});
</script>
<style lang="scss" scoped>
#scene {
position: relative;
height: 100%;
width: 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;
}
.btn {
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(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>

3
src/components/content/tunnelScene/TunnelSceneSimulate.vue
View File

@@ -360,6 +360,7 @@ const ThreeConfig = {
* @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}]
*/
function TunnelSceneSimulateRender(data) {
console.log('TunnelSceneSimulateRender',data)
if (!demo) return;
const modeData = randomPosition([
...data.frequencyChangerList,
@@ -404,7 +405,7 @@ function renderRoadPlane(data) {
}
defineExpose({
rerender,
rerender,TunnelSceneSimulateRender
});
</script>

69
src/components/deviceManage/index.vue
View File

@@ -39,33 +39,33 @@
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<!-- <el-table-column prop="ratedPower" label="额定功率" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="额定功率" v-model="scope.row.ratedPower"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>-->
<!-- <el-table-column prop="acurrentValue" label="A电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="A电流" v-model="scope.row.acurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>-->
<!-- <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>-->
<!-- <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="ratedPower" label="额定功率" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="额定功率" v-model="scope.row.ratedPower"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>-->
<!-- <el-table-column prop="acurrentValue" label="A电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="A电流" v-model="scope.row.acurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>-->
<!-- <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>-->
<!-- <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope">
<div class="switch">
@@ -113,7 +113,7 @@
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<!-- <el-table-column prop="offset" label="偏移量" align="center"/>-->
<!-- <el-table-column prop="offset" label="偏移量" align="center"/>-->
<el-table-column prop="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="单位" v-model="scope.row.unit"></el-input>
@@ -184,7 +184,7 @@
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<!-- <el-table-column prop="offset" label="偏移量" align="center"/>-->
<!-- <el-table-column prop="offset" label="偏移量" align="center"/>-->
<el-table-column prop="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="单位" v-model="scope.row.unit"></el-input>
@@ -334,13 +334,16 @@ const editEquip = debounce(() => {
windPressureSensorList: newWind,
sensorList: newSensor,
}
console.info("🚀 ~ file:index method: line:478 -----",basicData)
editSimulateEquipment(basicData).then(async res => {
if (res.code === 1000) {
loading.close()
// ElMessage.success('开始模拟')
let res= await startSimulation(tunnelId)
console.log('res',res)
let res = await startSimulation(tunnelId)
// console.log('res', res)
if (res.code === 1000) {
ElMessage.success('开始模拟')
}else{
ElMessage.warning(res.msg)
}
emit('submit')
} else {
ElMessage.error(res.msg)

366
src/views/tunnel-simulate/index.vue
View File

@@ -1,13 +1,14 @@
<template>
<div id="main">
<tunnel-title v-if="showTunnelTitle"/>
<div class="box-top">
<!-- <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
<tunnel-title v-if="showTunnelTitle" />
<div class="back-tunnel" @click="router.push('/simulate/tunnel/list')">
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="top-length">
<span>隧道总长度: {{ tunnelLength }}米</span>
<span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
>开始模拟</span
>
<span class="all-btn" @click="startSimulate" v-if="isStartSimulate">开始模拟</span>
<div v-else>
<span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
<span class="all-btn" @click="endSimulate">结束模拟</span>
@@ -36,17 +37,20 @@
</div>
</div>
<device-manage
v-if="showDevice"
@cancel="cancelDeviceManage"
@submit="submitDevice"
v-if="showDevice"
@cancel="cancelDeviceManage"
@submit="submitDevice"
/>
<!-- 模拟隧道模式-->
<preview-scene-simulate
id="tunnel-box"
:isedit="false"
:device-data="largeScreenData"
:tunnelLength="100"
:tunnelId="tunnelId"
ref="previewRef"
id="tunnel-box"
:isedit="false"
:device-data="largeScreenData"
:tunnelLength="tunnelLength"
:tunnelId="tunnelId"
:tunnelAlias="tunnelAlias"
:devRealtimeData="socketData"
></preview-scene-simulate>
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<!-- <preview-scene-->
@@ -60,22 +64,22 @@
<!-- ></preview-scene>-->
<div class="left" v-if="isPreview">
<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"
v-model="drawerLeft"
direction="ltr"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<fan-info
v-if="showFan"
:list="socketData.leftData"
:isSimulate="true"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
v-if="showFan"
:list="socketData.leftData"
:isSimulate="true"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
/>
<!-- <used-ele-->
<!-- v-if="showFan"-->
@@ -89,183 +93,41 @@
</div>
<div class="right" v-if="isPreview">
<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"
v-model="drawerRight"
direction="rtl"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<wind-pressure-list
v-if="showFan"
:list="socketData.windPressure"
:isSimulate="true"
:win-data="largeScreenData"
:loading="showWindLoading"
v-if="showFan"
:list="socketData.windPressure"
:isSimulate="true"
:win-data="largeScreenData"
:loading="showWindLoading"
/>
<air-info
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:isSimulate="true"
:air-data="largeScreenData"
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:isSimulate="true"
:air-data="largeScreenData"
/>
<bad-gas-info
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:isSimulate="true"
:tunnelId="tunnelId"
:loading="showBadLoading"
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:isSimulate="true"
:tunnelId="tunnelId"
:loading="showBadLoading"
/>
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div>
</div>
</div>
<div class="alarm-dialog alarm-tunnel">
<el-dialog
:close-on-click-modal="false"
v-model="isDetailVisited"
title="报警信息详情"
width="1500px"
>
<div class="detail">
<div>报警时间：</div>
{{ alarmDetail.alarmTime }}
</div>
<div class="detail">
<div>报警内容：</div>
{{ alarmDetail.alarmContent }}
</div>
</el-dialog>
</div>
<div class="alarm-tunnel">
<el-dialog
:close-on-click-modal="false"
v-model="isVisited"
title="报警信息"
width="2175px"
:modal="false"
>
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<el-form
:model="queryParams"
inline
class="query-form"
ref="queryForm"
@submit.prevent="getAlarmList"
v-if="roleKey !== 'administrator'"
>
<el-form-item label="查阅状态" prop="lookupStatus">
<el-select
v-model="queryParams.lookupStatus"
placeholder="请选择查阅状态"
:fit-input-width="true"
:teleported="false"
clearable
filterable
>
<el-option label="已读" :value="true" />
<el-option label="未读" :value="false" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getAlarmList">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<div
class="device-table"
:style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
>
<el-table
stripe
v-loading="loading"
:empty-text="tableEmptyText"
style="background-color: #011c29; --el-table-border-color: none"
:header-cell-style="{
backgroundColor: '#064B66',
color: '#fff',
fontSize: '40px',
borderBottom: 'none',
}"
:data="alarmList"
>
<el-table-column
prop="tunnelName"
label="隧道名称"
align="center"
width="400px"
/>
<el-table-column
prop="alarmContent"
label="告警信息"
align="center"
/>
<el-table-column
prop="alarmTime"
label="告警时间"
align="center"
width="480px"
/>
<el-table-column
prop="lookupStatus"
label="查阅状态"
align="center"
width="200px"
v-if="roleKey !== 'administrator'"
>
<template #default="scope">
<el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
>{{ scope.row.lookupStatus ? "已读" : "未读" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="300px">
<template #default="scope">
<el-button
type="primary"
size="mini"
style="font-weight: bold"
@click="handleView(scope.row)"
link
>详情
</el-button>
<el-button
type="danger"
size="mini"
v-if="roleKey !== 'administrator'"
@click="handleDelete(scope.row)"
link
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<div
class="pagination"
:style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
>
<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"
/>
</div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
</div>
</template>
<script setup>
@@ -278,9 +140,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import { dateFormat } from "@/utils/date.js";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import {dateFormat} from "@/utils/date.js";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {
getLargeScreen,
getLargeScreenInfo,
@@ -292,15 +154,15 @@ import {
endSimulation,
blastingSimulation,
} from "@/api/largeScreen";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { getUserInfo } from "@/api/login";
import { initSceneData } from "@/api/tunnelScene";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {initSceneData} from "@/api/tunnelScene";
import {
getScreenSimulateTunnel,
getSimulateTunnelDetail,
getTunnelList,
} from "@/api/tunnelManage";
import { debounce } from "lodash";
import {debounce} from "lodash";
const authStore = useAuthStore();
const router = useRouter();
@@ -308,6 +170,7 @@ const previewId = reactive(router.currentRoute.value.params.tunnelId);
const siteId = reactive(router.currentRoute.value.params.siteId);
const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId);
const selectIndex = ref(-1);
const previewRef = ref();
const isVisited = ref(false);
const isDetailVisited = ref(false);
const showFan = ref(false);
@@ -338,6 +201,7 @@ const tunnelBtn = ref();
const tunnelList = ref([]);
const tunnelId = ref(0);
const tunnelLength = ref(0);
const tunnelAlias = ref('');
const constructionLength = ref(0);
const routeList = ref([]);
let socket = reactive("");
@@ -417,8 +281,9 @@ const cancelDeviceManage = () => {
const submitDevice = () => {
isStartSimulate.value = false;
showDevice.value = false;
getScreenInfo(previewId);
getScreenInfo(previewId,true);
// initWebSocket()
};
const simulatedBlasting = async () => {
await blastingSimulation(previewId, 10);
@@ -426,6 +291,7 @@ const simulatedBlasting = async () => {
const endSimulate = async () => {
isStartSimulate.value = true;
await endSimulation(previewId);
ElMessage.success("结束模拟成功");
};
const changeName = (id) => {
for (let item of equipmentOption.value) {
@@ -555,6 +421,7 @@ const getBasicData = (id) => {
getSimulateTunnelDetail(id).then((res) => {
if (res?.code === 1000) {
tunnelLength.value = res.data.totalLength;
tunnelAlias.value = res.data.tunnelAlias;
serialNumber.value = res.data.serialNumber;
constructionLength.value = res.data.constructionLength;
initWebSocket();
@@ -564,7 +431,7 @@ const getBasicData = (id) => {
});
};
const getScreenInfo = (id) => {
const getScreenInfo = (id,flag) => {
if (id) {
tunnelId.value = id;
// equipmentOption.value = []
@@ -581,22 +448,15 @@ const getScreenInfo = (id) => {
showWindLoading.value = 1;
}
if (res.data.sensorList.length !== 0) {
// res.data.sensorList.forEach((item) => {
// option = {
// value: item.equipmentId,
// label: item.equipmentName,
// }
// equipmentOption.value.push(option)
// })
res.data.sensorList.forEach((item) => {
if (
item.equipmentType === "dust" ||
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
item.equipmentType === "dust" ||
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
) {
showBadLoading.value = 0;
} else {
@@ -607,18 +467,17 @@ const getScreenInfo = (id) => {
showBadLoading.value = 1;
}
largeScreenData.value = res.data;
console.log("largeScreenData.value", largeScreenData.value);
if(flag) {
nextTick(() => {
previewRef.value.TunnelSceneSimulateRender(res.data)
})
}
// console.log("largeScreenData.value", largeScreenData.value);
} else {
ElMessage.warning(res.msg);
}
});
// initSceneData(id).then((res) => {
// tunnelLength.value = res.data.tunnelLength;
// constructionLength.value = res.data.constructionLength;
// // serialNumber.value = res.data.serialNumber.slice(0, -2)
// serialNumber.value = res.data.serialNumberPrefix;
// initWebSocket();
// });
}
};
@@ -667,8 +526,9 @@ const handleLogout = () => {
};
const initWebSocket = () => {
let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`;
// let wsUrl = `ws://tunnel.feashow.com/api/websocket/simulate/${token}/${serialNumber.value}`;
// let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`;
// let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`;
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`;
// let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
// let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
// let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
@@ -770,21 +630,55 @@ const initWebSocket = () => {
</style>
<style lang="scss" scoped>
.all-btn {
cursor: pointer;
padding: 10px 20px;
border-radius: 11px;
border: 2px solid #08b7b8;
color: #0be9fa;
text-align: center;
margin-left: 40px;
font-size: 38px;
&:hover {
color: #f7b500;
.box-top {
//display: flex;
//justify-content: space-between;
position: relative;
.all-btn {
cursor: pointer;
padding: 10px 20px;
border-radius: 11px;
border: 2px solid #08b7b8;
color: #0be9fa;
text-align: center;
margin-left: 40px;
font-size: 38px;
&:hover {
color: #f7b500;
}
}
.back-tunnel {
position: absolute;
top: 46px;
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;
z-index: 9999;
.back-icon {
margin-right: 20px;
margin-left: 23px;
width: 33px;
height: 33px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
}
#main {
height: 100%;
width: 100%;

115
src/views/tunnel-simulate/tunnel-list.vue
View File

@@ -1,13 +1,10 @@
<template>
<div class="tunnel-bgc">
<div class="box-top">
<div class="back-tunnel" @click="handleGoSiteOrIndex">
<div class="back-tunnel" @click="router.push('/')">
<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">
@@ -21,7 +18,7 @@
</div>
</div>
</div>
<div class="box-content" >
<div class="box-content">
<div class="site-box" v-for="item in tunnelList" :key="item.projectId">
<div class="top">
<span>{{ item.tunnelName }}</span>
@@ -33,10 +30,10 @@
<div>
<div class="left-img"></div>
<div style="display: flex;justify-content: space-around">
<!-- <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.projectId)">-->
<!-- <div class="edit-icon"></div>-->
<!-- <div>编辑</div>-->
<!-- </div>-->
<div class="edit-btn" @click.stop="handleGoToEditTunnel(item.projectId)">
<div class="edit-icon"></div>
<div>编辑</div>
</div>
<div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.projectId)">
<div class="edit-icon"></div>
<div>去模拟</div>
@@ -48,7 +45,6 @@
<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 }}：0</span>
<!-- {{ item.tunnelEquipmentAmountInfo[equItem.type] }}-->
</div>
</div>
</div>
@@ -79,18 +75,6 @@
<el-form-item label="序列号" prop="serialNumber">
<el-input v-model="form.serialNumber" 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>
@@ -117,24 +101,14 @@
<script setup>
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {
getTunnelList,
deleteSimulateTunnel,
addSimulateTunnel,
getSimulateTunnelList,
getTunnelDetail, getSimulateTunnelDetail
getSimulateTunnelDetail, editSimulateTunnel
} 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);
@@ -143,7 +117,6 @@ 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)
@@ -211,27 +184,15 @@ const iconsList = ref([
},
])
const title = ref('新增模拟隧道')
const showNull = ref(false);
const isVisited = ref(false);
const projectIds = 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
@@ -243,9 +204,6 @@ onMounted(() => {
const handleGoToSimulateTunnel = (projectId) => {
router.push('/simulate/' + projectId)
}
const handleGoSiteOrIndex = () => {
router.push('/')
}
const getList = () => {
const loading = ElLoading.service({
lock: true,
@@ -261,7 +219,6 @@ const getList = () => {
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)
}
@@ -283,26 +240,22 @@ const handleCurrentChange = (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 = {
...form.value,
// tunnelGatewayDtoList: serialNumberList.value
let res = null
if (title.value === '新增模拟隧道') {
res = await addSimulateTunnel(form.value)
} else {
res = await editSimulateTunnel(form.value)
}
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
isVisited.value = false
} else {
ElMessage.warning(res.msg)
}
console.info("🚀 ~method:data -----", data)
addSimulateTunnel(data).then(res => {
if (res.code === 1000) {
ElMessage.success('新增模拟隧道成功')
getList()
isVisited.value = false
} else {
ElMessage.warning(res.msg)
}
})
})
}, 100)
@@ -326,16 +279,10 @@ const restFrom = () => {
tunnelAlias: '',
serialNumber: '',
totalLength: '',
referenceFrequency: '',
upTime: 0,
upFrequency: '',
dropTime: 0,
dropFrequency: '',
remarks: '',
isDefault: false
}
}
const getTunnel = async (projectId) => {
const getTunnelDetail = async (projectId) => {
const loading = ElLoading.service({
lock: true,
text: '正在加载系统资源...',
@@ -352,14 +299,8 @@ const getTunnel = async (projectId) => {
const handleGoToEditTunnel = (projectId) => {
restFrom()
title.value = '编辑模拟隧道'
getTunnel(projectId)
getTunnelDetail(projectId)
isVisited.value = true
serialNumberList.value = [
// {
// serialNumber: '',
// serialNumberType:''
// }
]
nextTick(() => {
// 清空校验
formInstance.value.clearValidate()
@@ -369,12 +310,6 @@ const handleAdd = () => {
restFrom()
title.value = '新增模拟隧道'
isVisited.value = true
serialNumberList.value = [
// {
// serialNumber: '',
// serialNumberType:''
// }
]
nextTick(() => {
// 清空校验
formInstance.value.clearValidate()
@@ -386,18 +321,13 @@ const getImageUrl = (name) => {
const handleClickSite = (type) => {
if (type.checked) {
projectIds.value.push(type.projectId)
tunnelNameList.value.push(type.tunnelName)
} else {
projectIds.value.map((item, index) => {
if (item === type.projectId) {
projectIds.value.splice(index, 1)
}
})
tunnelNameList.value.map((item, index) => {
if (item === type.tunnelName) {
tunnelNameList.value.splice(index, 1)
}
})
}
}
const handleMoreDelete = debounce(() => {
@@ -415,7 +345,6 @@ const handleMoreDelete = debounce(() => {
ElMessage.success(res.msg)
getList()
projectIds.value = []
tunnelNameList.value = []
} else {
ElMessage.error(res.msg)
}

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

@@ -642,7 +642,7 @@ const manageSelect = (name) => {
}
} else if (name === "模拟仿真") {
if (tunnelId.value) {
router.push("/simulate/" + tunnelId.value);
router.push("/simulate/tunnel/list");
}
}
if(socket){