feat : 隧道模拟

This commit is contained in:
dj
2024-12-07 23:04:42 +08:00
parent 375d6719d8
commit f57023a509
8 changed files with 1016 additions and 175 deletions

View File

@@ -3,5 +3,5 @@
VITE_BASE_URL='/api'
# VITE_BASE_URL='http://192.168.101.7:8000'
#VITE_BASE_WSURL='ws://web-tunnel.feashow.com/api'
#VITE_BASE_WSURL='ws://tunnel.feashow.com/api'
VITE_BASE_WSURL='/websocket'

View File

@@ -4,5 +4,5 @@ VITE_TITLE='fateverse'
VITE_BASE_URL='/api'
#VITE_BASE_WSURL='ws://web-tunnel.feashow.com/api'
#VITE_BASE_WSURL='ws://tunnel.feashow.com/api'
VITE_BASE_WSURL='/websocket'

View File

@@ -0,0 +1,830 @@
<template>
<div class="device-content">
<div class="device-box">
<div class="box-left">
<el-menu
default-active="1"
@select="handleChangeMenu"
>
<el-menu-item index="1">
<span>风机</span>
</el-menu-item>
<el-menu-item index="2">
<span>风压</span>
</el-menu-item>
<el-menu-item index="3">
<span>其他传感器</span>
</el-menu-item>
<!-- <el-menu-item index="4">-->
<!-- <span>分流器</span>-->
<!-- </el-menu-item>-->
</el-menu>
</div>
<div class="box-right" v-if="changeIndex==1">
<div class="device-title">
<span>风机设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="fanFrequency">
<template #suffix>
<span>/</span>
</template>
</el-input>
</div>
</div>
<div class="device-table">
<el-table stripe
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
table-layout="auto"
: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="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"-->
<!-- clearable class="serialNumber">-->
<!-- <el-option-->
<!-- v-for="item in scope.row.serialNumberOption"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"-->
<!-- />-->
<!-- </el-select>-->
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope">
<div class="switch">
<div
:class="{ active: scope.row.state }"
@click="scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0; "
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="emit('cancel')">
取消
</div>
<div class="sure-btn" @click="editEquip">
开始模拟
</div>
</div>
</div>
<div class="box-right" v-if="changeIndex==2">
<div class="device-title">
<span>风压设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="windFrequency">
<template #suffix>
<span>/</span>
</template>
</el-input>
</div>
</div>
<div class="device-table">
<el-table stripe table-layout="auto"
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
: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="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="单位" v-model="scope.row.unit"></el-input>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
></el-input>
</template>
</el-table-column>
<el-table-column prop="miniRange" label="最小范围" align="center">
<template #default="scope">
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
></el-input>
</template>
</el-table-column>
<el-table-column prop="maxRange" label="最大范围" align="center">
<template #default="scope">
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
></el-input>
</template>
</el-table-column>
<el-table-column prop="serialNumber" label="序列号" align="center" width="500">
<template #default="scope">
<el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
clearable class="serialNumber" @clear="clearWinDataSelectedOption"
@change="changeWindDataSerialNumber($event,scope.row.serialNumberOption)">
<el-option
v-for="item in scope.row.serialNumberOption"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="serialNumberOptionDisabled(item)"
:title="serialNumberOptionDisabled(item)?'该序列号已选择!':''"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope">
<div class="switch wind-switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0; "
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="emit('cancel')">
取消
</div>
<div class="sure-btn" @click="editEquip">
开始模拟
</div>
</div>
</div>
<div class="box-right" v-if="changeIndex==3">
<div class="device-title">
<span>其他传感器设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="otherFrequency">
<template #suffix>
<span>/</span>
</template>
</el-input>
</div>
</div>
<div class="device-table">
<el-table stripe table-layout="auto"
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
: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="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="单位" v-model="scope.row.unit"></el-input>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
></el-input>
</template>
</el-table-column>
<el-table-column prop="miniRange" label="最小范围" align="center">
<template #default="scope">
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
></el-input>
</template>
</el-table-column>
<el-table-column prop="maxRange" label="最大范围" align="center">
<template #default="scope">
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
></el-input>
</template>
</el-table-column>
<el-table-column prop="serialNumber" label="序列号" align="center" width="500">
<template #default="scope">
<el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"
clearable class="serialNumber">
<el-option
v-for="item in otherSensorSerialNumberOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope">
<div class="switch wind-switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0; "
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="emit('cancel')">
取消
</div>
<div class="sure-btn" @click="editEquip">
开始模拟
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ElLoading, ElMessage} from "element-plus";
import {
getEquipmentList,
editEquipment,
getTunnelDetail,
getOtherSensorSerialNumberOptions,
getWindPressureSerialNumberOptions
} from "@/api/tunnelManage";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import {debounce} from 'lodash'
import {defineEmits} from "vue";
const router = useRouter()
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const userId = reactive(router.currentRoute.value.params.userId)
const type = reactive(router.currentRoute.value.params.type)
const fanFrequency = ref(0)
const windFrequency = ref(0)
const otherFrequency = ref(0)
const changeIndex = ref(1)
const fanData = ref([])
const winData = ref([])
const windPressureDataSerialNumberOptions = ref([])
const otherSensorSerialNumberOptions = ref([])
const otherData = ref([])
const winDataSelectedOption = ref([])
const fenLiuData = ref([])
const siteId = ref(0)
const emit = defineEmits([
"cancel"
]);
const getWindPressureOptions = async () => {
let {data, code, msg} = await getWindPressureSerialNumberOptions(tunnelId)
if (code === 1000) {
// windPressureDataSerialNumberOptions.value= data
return data
} else {
ElMessage.error(msg)
}
}
const getOtherSensorOptions = async () => {
let {data, code, msg} = await getOtherSensorSerialNumberOptions(tunnelId)
if (code === 1000) {
otherSensorSerialNumberOptions.value = data
} else {
ElMessage.error(msg)
}
}
getOtherSensorOptions()
const clearWinDataSelectedOption = () => {
winDataSelectedOption.value = []
}
const changeWindDataSerialNumber = (value, options) => {
// console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
options?.forEach(item => {
if (item.value == value) {
// console.info("🚀 ~method:item.label -----", item.label)
if (item.label.indexOf('PLC') >= 0) {
winDataSelectedOption.value = []
} else {
winDataSelectedOption.value.push(value)
}
}
})
}
const serialNumberOptionDisabled = (item) => {
return winDataSelectedOption.value.indexOf(item.value) >= 0;
}
const changeData = (item) => {
return {
equipmentId: item.equipmentId,
unit: item.unit,
alarmValue: item.alarmValue,
serialNumber: item.serialNumber,
miniRange: parseInt(item.miniRange),
maxRange: parseInt(item.maxRange),
state: item.state,
}
}
const editEquip = debounce(() => {
const loading = ElLoading.service({
lock: true,
text: '修改中...',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
let newFrequency = [{
acquisitionPeriod: fanFrequency.value * 1000,
tunnelId: parseInt(tunnelId),
typeKey: 'frequency'
}, {
acquisitionPeriod: windFrequency.value * 1000,
tunnelId: parseInt(tunnelId),
typeKey: 'windPressure'
}, {
acquisitionPeriod: otherFrequency.value * 1000,
tunnelId: parseInt(tunnelId),
typeKey: 'sensor'
}]
let newFan = []
let newWind = []
let newSensor = []
fanData.value.forEach(item => {
let obj = {
equipmentId: item.equipmentId,
ratedPower: parseInt(item.ratedPower),
acurrentValue: parseInt(item.acurrentValue),
bcurrentValue: parseInt(item.bcurrentValue),
ccurrentValue: parseInt(item.ccurrentValue),
serialNumber: item.serialNumber,
state: parseInt(item.state)
}
newFan.push(obj)
})
winData.value.forEach(item => {
newWind.push(changeData(item))
})
otherData.value.forEach(item => {
newSensor.push(changeData(item))
})
const basicData = {
tunnelId: tunnelId,
acquisitionList: newFrequency,
frequencyChangerList: newFan,
windPressureSensorList: newWind,
sensorList: newSensor,
// shuntList: editFenLiuData.value,
}
// console.info("🚀 ~ file:index method: line:478 -----",basicData)
editEquipment(basicData).then(res => {
if (res.code === 1000) {
loading.close()
ElMessage.success('修改成功')
router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
} else {
ElMessage.error(res.msg)
loading.close()
}
})
}, 100)
const handleChangeMenu = (e) => {
changeIndex.value = e
}
const getList = async () => {
const windPressureOption = await getWindPressureOptions()
const loading = ElLoading.service({
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
await getEquipmentList(tunnelId).then(res => {
if (res.code === 1000) {
fanData.value = res.data.frequencyChangerList
res.data.windPressureSensorList?.forEach(item => {
item.offset = item.offset + 4000
})
winData.value = res.data.windPressureSensorList
winData.value?.forEach(item => {
for (const equipmentId in windPressureOption) {
if (item.equipmentId == equipmentId) {
item.serialNumberOption = windPressureOption[equipmentId]
}
}
})
res.data.sensorList?.forEach(item => {
item.offset = item.offset + 4000
})
otherData.value = res.data.sensorList
res.data.acquisitionList.map(item => {
item.acquisitionPeriod = item.acquisitionPeriod / 1000
if (item.typeKey === 'frequency') {
fanFrequency.value = item.acquisitionPeriod
} else if (item.typeKey === 'windPressure') {
windFrequency.value = item.acquisitionPeriod
} else if (item.typeKey === 'sensor') {
otherFrequency.value = item.acquisitionPeriod
}
})
}
loading.close()
})
}
const getTunnel = () => {
getTunnelDetail(tunnelId).then((res) => {
if (res?.code === 1000) {
siteId.value = res.data.siteId
}
});
}
getTunnel()
getList()
</script>
<style lang="scss">
.serialNumber {
.el-input {
width: 570px !important;
}
.el-select__suffix {
.el-icon {
width: 3em !important;
height: 3em !important;
color: #fff !important;
svg {
width: 3em !important;
height: 3em !important;
}
}
}
.el-input__suffix-inner {
.el-icon {
width: 3em !important;
height: 3em !important;
color: #fff !important;
svg {
width: 3em !important;
height: 3em !important;
}
}
}
}
.el-select.serialNumber {
width: 580px !important;
border-radius: 6px !important;
border: 1px solid #05FEFF !important;
background-color: transparent !important;
.el-select__wrapper {
height: 54px !important;
color: #FFFFFF !important;
font-size: 40px !important;
//height: auto!important;
line-height: normal !important;
border-radius: 6px !important;
border: 1px solid #05FEFF !important;
background-color: transparent !important;
}
.el-select__placeholder {
height: 54px;
line-height: 54px;
color: #FFFFFF;
}
}
.serialNumber-select.el-popper {
background: #064B66 !important;
border: 2px solid #05FEFF !important;
.el-select-dropdown {
min-width: 130px !important;
}
.el-select-dropdown__item.is-hovering {
background-color: #064B66 !important;
}
.el-select-dropdown__item {
color: #FFFFFF;
border-bottom: 1px solid #05FEFF;
&:last-child {
border-bottom: none;
}
}
.el-select-dropdown__item.is-selected {
color: #F7B500 !important;
}
.el-select-dropdown__item.selected {
background-color: transparent !important;
color: #F7B500;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: transparent !important;
color: #F7B500;
}
.el-select-dropdown__item.is-disabled {
background-color: transparent !important;
color: #fff !important;
}
}
</style>
<style scoped lang="scss">
.box-top {
display: flex;
justify-content: flex-start;
.tunnel-name {
margin-left: 120px;
height: 61px;
font-size: 46px;
font-weight: bold;
color: #FFFFFF;
line-height: 61px;
}
.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');
}
}
}
.device-content {
display: flex;
justify-content: center;
padding-top: 300px;
.device-box {
z-index: 9999;
display: flex;
width: 3500px;
height: 1600px;
background: #064B66;
border-radius: 20px;
border: 2px solid #05FEFF;
box-sizing: border-box;
.box-left {
padding-left: 24px;
width: 300px;
height: 1596px;
background: #0D5A7A;
border-radius: 20px 0px 0px 20px;
:deep(.el-menu) {
border-right: none;
margin-top: 261px;
background-color: #0D5A7A;
.el-menu-item.is-active {
background-image: url(../../assets/images/device/sdgl_xz.png);
}
.el-menu-item {
color: #fff;
height: 90px;
font-size: 40px;
&:hover {
background-color: #0D5A7A;
}
&:first-child {
letter-spacing: 120px;
}
&:nth-child(2) {
letter-spacing: 120px;
}
//&:nth-child(4) {
// letter-spacing: 40px;
//}
}
}
}
.box-right {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
.device-title {
margin-top: 60px;
line-height: 61px;
color: #FFFFFF;
display: flex;
justify-content: center;
> span:first-child {
font-size: 46px;
font-weight: bold;
}
.collection-frequency {
height: 60px;
display: flex;
align-items: center;
position: absolute;
right: 102px;
> span:first-child {
font-size: 38px !important;
white-space: pre;
margin-right: 15px;
}
:deep(.el-input__wrapper) {
width: 166px;
height: 56px;
background-color: transparent;
box-shadow: none;
border-radius: 6px;
border: 1px solid #05FEFF;
transform: none;
transition: none;
.el-input__inner {
height: 54px;
font-size: 30px;
color: #FFFFFF;
}
.el-input__suffix-inner {
font-size: 30px;
color: #08B7B8;
line-height: 40px;
}
}
}
}
}
.btns {
width: 100%;
margin: 0 auto;
position: absolute;
bottom: 70px;
}
.device-table {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
.active {
color: #FFFFFF;
background: #0f7da9;
}
.wind-switch {
//margin-left: 26px;
}
.switch {
margin-top: 22px;
display: flex;
width: 200px;
height: 50px;
border-radius: 6px;
border: 1px solid #05FEFF;
overflow: hidden;
color: #51A2B3;
line-height: 40px;
font-size: 36px;
& > div {
flex: 1;
text-align: center;
cursor: pointer;
}
}
:deep(.el-table--fit) {
//width: 1780px !important;
width: auto;
}
:deep(.cell) {
height: 80px;
line-height: 80px;
color: #fff;
font-size: 38px;
}
:deep(.el-table tr) {
background-color: #1C5971;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
background-color: #1C5971;
}
:deep(.el-table__row--striped) {
background-color: #13849C !important;
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
background-color: #13849C !important;
}
:deep(.el-table__cell) {
.el-input {
width: 180px;
height: 53px;
}
.el-input__wrapper {
border-radius: 6px;
border: 1px solid #05FEFF;
background-color: transparent;
.el-input__inner {
color: #FFFFFF;
font-size: 40px;
height: auto;
line-height: normal;
}
}
}
:deep(.el-table__inner-wrapper::before) {
display: none;
}
}
}
}
</style>

View File

@@ -51,10 +51,11 @@ const btnList = ref([
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
{
route: '/simulate',
icon: 'sp_icon_mngl.png',
name: '模拟仿真'
},
])
const newList=ref([])
const selectButton = ref(props.modelValue);

View File

@@ -44,7 +44,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
return new Promise((resolve, reject) => {
initSceneData(tunnelId)
.then((res) => {
console.info("🚀 ~method:initSceneData -----", res)
// console.info("🚀 ~method:initSceneData -----", res)
serialNumber.value=res.data.serialNumber
serialNumberPrefix.value=res.data.serialNumberPrefix
tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList

View File

@@ -76,7 +76,7 @@ const handleSend = () => {
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/debug/${token}/${serialNumber.value}`
// let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
console.log(wsUrl)
socket = new WebSocket(wsUrl)
//连接发生错误的回调方法

View File

@@ -2,48 +2,44 @@
<div id="main">
<div class="box-top">
<!-- <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
<tunnel-title v-if="showTunnelTitle" />
<tunnel-title v-if="showTunnelTitle"/>
<div class="top-length">
<span>隧道总长度: {{ tunnelLength }}</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>
</div>
>开始模拟</span>
<span class="all-btn" @click="endSimulate" v-else>结束模拟</span>
<!-- <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
</div>
<div class="top-right" v-if="isPreview">
<div class="current-site">
当前站点<span>{{ currentSite }}</span>
<el-dropdown
trigger="click"
@command="handleChangeSite"
popper-class="dropdown-style"
trigger="click"
@command="handleChangeSite"
popper-class="dropdown-style"
>
<div class="toggle"></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="item in siteList"
:key="item.value"
:command="item"
>{{ item.label }}
v-for="item in siteList"
:key="item.value"
:command="item"
>{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-icon
size="50"
color="#0BE9FA"
style="margin-left: 50px; cursor: pointer"
@click="
size="50"
color="#0BE9FA"
style="margin-left: 50px; cursor: pointer"
@click="
isVisited = true;
getAlarmList();
"
>
<Bell />
<Bell/>
</el-icon>
</div>
<div class="current-user">
@@ -53,40 +49,40 @@
</div>
</div>
</div>
<device-manage v-if="showDevice" @cancel="cancelDeviceManage"/>
<!-- 一进去的话应该是预览模式所以引入这个组件1 -->
<preview-scene
id="tunnel-box"
:isedit="false"
:tunnelId="tunnelId"
:key="tunnelId"
:tunnelLen="tunnelLen"
:largeScreen="largeScreen"
:fanList="socketData.leftData"
id="tunnel-box"
:isedit="false"
:tunnelId="tunnelId"
:key="tunnelId"
:tunnelLen="tunnelLen"
:largeScreen="largeScreen"
:fanList="socketData.leftData"
></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"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
v-if="showFan"
:list="socketData.leftData"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
/>
<used-ele
v-if="showFan"
:list="socketData.leftData"
:loading="showUsedLoading"
:ele-data="largeScreenData"
v-if="showFan"
:list="socketData.leftData"
:loading="showUsedLoading"
:ele-data="largeScreenData"
/>
</el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
@@ -94,32 +90,32 @@
</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"
:win-data="largeScreenData"
:loading="showWindLoading"
v-if="showFan"
:list="socketData.windPressure"
:win-data="largeScreenData"
:loading="showWindLoading"
/>
<air-info
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:air-data="largeScreenData"
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:air-data="largeScreenData"
/>
<bad-gas-info
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:tunnelId="tunnelId"
:loading="showBadLoading"
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:tunnelId="tunnelId"
:loading="showBadLoading"
/>
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -128,12 +124,12 @@
<div class="switch-btn">
<div class="arrow" @click="previousBtn"></div>
<el-carousel
height="150px"
type="card"
ref="tunnelBtn"
:autoplay="false"
:initial-index="initialIndex"
@change="changeTunnel"
height="150px"
type="card"
ref="tunnelBtn"
:autoplay="false"
:initial-index="initialIndex"
@change="changeTunnel"
>
<div class="btn">
<el-carousel-item v-for="item in tunnelList" :key="item.value">
@@ -146,10 +142,10 @@
</div>
<div class="alarm-dialog alarm-tunnel">
<el-dialog
:close-on-click-modal="false"
v-model="isDetailVisited"
title="报警信息详情"
width="1500px"
:close-on-click-modal="false"
v-model="isDetailVisited"
title="报警信息详情"
width="1500px"
>
<div class="detail">
<div>报警时间</div>
@@ -163,33 +159,33 @@
</div>
<div class="alarm-tunnel">
<el-dialog
:close-on-click-modal="false"
v-model="isVisited"
title="报警信息"
width="2175px"
:modal="false"
: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'"
: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
v-model="queryParams.lookupStatus"
placeholder="请选择查阅状态"
:fit-input-width="true"
:teleported="false"
clearable
filterable
>
<el-option label="已读" :value="true" />
<el-option label="未读" :value="false" />
<el-option label="已读" :value="true"/>
<el-option label="未读" :value="false"/>
</el-select>
</el-form-item>
<el-form-item>
@@ -198,87 +194,87 @@
</el-form-item>
</el-form>
<div
class="device-table"
:style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
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="{
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"
:data="alarmList"
>
<el-table-column
prop="tunnelName"
label="隧道名称"
align="center"
width="400px"
prop="tunnelName"
label="隧道名称"
align="center"
width="400px"
/>
<el-table-column
prop="alarmContent"
label="告警信息"
align="center"
prop="alarmContent"
label="告警信息"
align="center"
/>
<el-table-column
prop="alarmTime"
label="告警时间"
align="center"
width="480px"
prop="alarmTime"
label="告警时间"
align="center"
width="480px"
/>
<el-table-column
prop="lookupStatus"
label="查阅状态"
align="center"
width="200px"
v-if="roleKey !== 'administrator'"
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 ? "已读" : "未读" }}
>{{ 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
>详情
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
>删除
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' }"
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"
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>
@@ -297,9 +293,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,
@@ -309,11 +305,11 @@ import {
getAlarmDetail,
updateAlarmState,
} from "@/api/largeScreen";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { getUserInfo } from "@/api/login";
import { initSceneData } from "@/api/tunnelScene";
import { getTunnelList } from "@/api/tunnelManage";
import { debounce } from "lodash";
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {initSceneData} from "@/api/tunnelScene";
import {getTunnelList} from "@/api/tunnelManage";
import {debounce} from "lodash";
const authStore = useAuthStore();
const router = useRouter();
@@ -324,6 +320,7 @@ const selectIndex = ref(-1);
const isVisited = ref(false);
const isDetailVisited = ref(false);
const showFan = ref(false);
const showDevice = ref(false);
const drawerLeft = ref(true);
const showTunnelTitle = ref(true);
const isPreview = ref(true);
@@ -378,6 +375,7 @@ const btnList = ref([
// name: '系统管理'
// },
// {
// route: '/simulate',
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
@@ -417,6 +415,11 @@ onMounted(() => {
});
const startSimulate = () => {
isStartSimulate.value = false;
showDevice.value = true;
};
const cancelDeviceManage = () => {
isStartSimulate.value = true;
showDevice.value = false;
};
const endSimulate = () => {
isStartSimulate.value = true;
@@ -570,13 +573,13 @@ const getScreenInfo = (id) => {
// })
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 {
@@ -672,7 +675,7 @@ const manageSelect = (index) => {
} else if (index === "隧道管理") {
if (currentSiteId.value && currentUserId.value) {
router.push(
"/tunnel/" +
"/tunnel/" +
localStorage.getItem("currentSiteId") +
"/byHome/" +
currentUserId.value
@@ -733,7 +736,7 @@ const nextBtn = () => {
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${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}`;
socket = new WebSocket(wsUrl);
@@ -843,6 +846,7 @@ const initWebSocket = () => {
text-align: center;
margin-left: 40px;
font-size: 38px;
&:hover {
color: #f7b500;
}

View File

@@ -336,10 +336,11 @@ const btnList = ref([
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
{
route: '/simulate',
icon: 'sp_icon_mngl.png',
name: '模拟仿真'
},
]);
const serialNumber = ref("");
const roleKey = ref("");
@@ -466,6 +467,7 @@ const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
let routeArr = [];
res.data.routeList.push('/simulate')
res.data.routeList.forEach((item) => {
for (let btn of btnList.value) {
if (item === btn.route) {
@@ -620,12 +622,12 @@ const changeTunnel = (e) => {
showFan.value = true;
});
};
const manageSelect = (index) => {
if (index === "站点管理") {
const manageSelect = (name) => {
if (name === "站点管理") {
if (currentUserId.value) {
router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
}
} else if (index === "隧道管理") {
} else if (name === "隧道管理") {
if (currentSiteId.value && currentUserId.value) {
router.push(
"/tunnel/" +
@@ -634,10 +636,14 @@ const manageSelect = (index) => {
currentUserId.value
);
}
} else if (index === "用户管理") {
} else if (name === "用户管理") {
if (currentSiteId.value) {
router.push("/user/" + localStorage.getItem("currentSiteId"));
}
} else if (name === "模拟仿真") {
if (tunnelId.value) {
router.push("/simulate/" + tunnelId.value);
}
}
if(socket){
socket.close()
@@ -689,7 +695,7 @@ const nextBtn = () => {
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${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}`;
socket = new WebSocket(wsUrl);