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

fix : 优化隧道模拟首页

Browse Source
This commit is contained in:
dj
2024-12-30 22:31:37 +08:00
parent 890c8028ab
commit 8af7a35c69
6 changed files with 129 additions and 306 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',

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)

235
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>
@@ -46,9 +47,10 @@
id="tunnel-box"
:isedit="false"
:device-data="largeScreenData"
:tunnelLength="tunnelLen"
:tunnelLength="tunnelLength"
:tunnelId="tunnelId"
:tunnelAlias="tunnelAlias"
:devRealtimeData="socketData"
></preview-scene-simulate>
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<!-- <preview-scene-->
@@ -126,148 +128,6 @@
<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>
@@ -433,6 +293,7 @@ const simulatedBlasting = async () => {
const endSimulate = async () => {
isStartSimulate.value = true;
await endSimulation(previewId);
ElMessage.success("结束模拟成功");
};
const changeName = (id) => {
for (let item of equipmentOption.value) {
@@ -589,13 +450,6 @@ 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" ||
@@ -615,18 +469,12 @@ const getScreenInfo = (id) => {
showBadLoading.value = 1;
}
largeScreenData.value = res.data;
console.log("largeScreenData.value", largeScreenData.value);
// 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();
// });
}
};
@@ -675,8 +523,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}`;
@@ -778,21 +627,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){