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

更新1.浏览器不点击2.删除风压3.浏览器模型只能左右移动4.鼠标hover显示设备名称

Browse Source
This commit is contained in:
Hcat
2024-03-13 19:58:51 +08:00
parent 8b073bc98f
commit 9f29b78049
8 changed files with 210 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
<template>
<div id="main">
<div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
<tunnel-title v-if="showTunnelTitle"/>
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
<tunnel-title v-if="showTunnelTitle" />
<div class="top-length">
<!-- <span>隧道总长度: {{ tunnelLength }}米</span>-->
<span>当前施工长度: {{ constructionLength }}米</span>
@@ -15,15 +15,15 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
item.label
}}
item.label
}}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-icon size="50" color="#0BE9FA" style="margin-left: 50px;cursor: pointer"
@click="isVisited=true;getAlarmList()">
<Bell/>
@click="isVisited = true; getAlarmList()">
<Bell />
</el-icon>
</div>
<div class="current-user">
@@ -36,25 +36,26 @@
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
:largeScreen="largeScreen"></preview-scene>
:largeScreen="largeScreen"></preview-scene>
<!-- <el-process></el-process> -->
<div class="left">
<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">
: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"/>
<used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData"/>
:transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
<used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData" />
</el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div>
</div>
<div class="right">
<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">
:close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
:loading="showWindLoading"/>
:loading="showWindLoading" />
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
:loading="showBadLoading"/>
:loading="showBadLoading" />
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div>
@@ -62,7 +63,7 @@
<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">
@change="changeTunnel">
<div class="btn">
<el-carousel-item v-for="item in tunnelList" :key="item.value">
{{ item.label }}
@@ -73,8 +74,7 @@
</div>
</div>
<div class="alarm-dialog digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情"
width="1500px">
<el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情" width="1500px">
<div class="detail">
<div>报警时间：</div>
{{ alarmDetail.alarmTime }}
@@ -86,18 +86,16 @@
</el-dialog>
</div>
<div class="digital-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息"
width="2175px"
:modal="false">
<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'">
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"/>
:teleported="false" clearable filterable>
<el-option label="已读" :value="true" />
<el-option label="未读" :value="false" />
</el-select>
</el-form-item>
<el-form-item>
@@ -107,37 +105,39 @@
</el-form>
<div class="device-table">
<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">
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="equipmentId" label="设备名称" align="center" width="400px">-->
<!-- <template #default="scope">-->
<!-- {{ changeName(scope.row.equipmentId) }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column prop="alarmContent" label="告警信息" align="center"/>
<el-table-column prop="alarmTime" label="告警时间" align="center" width="480px"/>
<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'">
v-if="roleKey !== 'administrator'">
<template #default="scope">
<el-tag :type="scope.row.lookupStatus?'success':'warning'">{{ scope.row.lookupStatus ? '已读' : '未读' }}
<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 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'?'50px':''}">
<div class="pagination" :style="{ bottom: roleKey === 'administrator' ? '50px' : '' }">
<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"/>
: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>
@@ -155,9 +155,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,
@@ -167,10 +167,10 @@ import {
getAlarmDetail,
updateAlarmState
} from "@/api/largeScreen";
import {ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {initSceneData} from "@/api/tunnelScene";
import {getTunnelList} from "@/api/tunnelManage";
import { ElMessage, ElMessageBox } from "element-plus";
import { getUserInfo } from "@/api/login";
import { initSceneData } from "@/api/tunnelScene";
import { getTunnelList } from "@/api/tunnelManage";
const authStore = useAuthStore();
const router = useRouter();
@@ -336,10 +336,10 @@ const getAlarmList = () => {
}).then(res => {
if (res.code === 1000) {
loading.value = false
if(res.data.rows.length===0){
tableEmptyText.value='暂无数据~'
}else {
tableEmptyText.value=''
if (res.data.rows.length === 0) {
tableEmptyText.value = '暂无数据~'
} else {
tableEmptyText.value = ''
}
alarmList.value = res.data.rows
total.value = res.data.total
@@ -370,7 +370,7 @@ const getOtherInfo = () => {
routeList.value = routeArr
showMenu.value = true
siteList.value = res.data.siteOption
tunnelList.value = res.data.tunnelOption
tunnelList.value = res.data.tunnelOption
if (siteId) {
currentSiteId.value = siteId
@@ -416,13 +416,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 +672,7 @@ const initWebSocket = () => {
}
.alarm-dialog {
:deep(.el-dialog ) {
:deep(.el-dialog) {
height: auto !important;
margin: 820px auto 0 auto;
}
@@ -682,14 +682,17 @@ const initWebSocket = () => {
height: 90px;
}
:deep(.el-table--fit) {
width: auto;
//height: 600px;
background-color: transparent!important;
.el-loading-mask{
background-color: transparent !important;
.el-loading-mask {
background: rgba(6, 34, 71, 0.78);
.el-loading-spinner{
.circular{
.el-loading-spinner {
.circular {
width: 150px;
height: 150px;
}
@@ -698,9 +701,10 @@ const initWebSocket = () => {
}
:deep(.el-table__empty-block) {
height: 200px!important;
height: 200px !important;
//display: none;
.el-table__empty-text{
.el-table__empty-text {
font-size: 60px;
color: #08B7B8;
}
@@ -711,7 +715,7 @@ const initWebSocket = () => {
font-size: 50px;
color: #FFFFFF;
> div {
>div {
color: #f5f5f5;
margin-bottom: 10px;
}
@@ -719,7 +723,7 @@ const initWebSocket = () => {
}
.digital-tunnel {
:deep(.el-dialog ) {
:deep(.el-dialog) {
height: 1410px;
.el-tag {
@@ -747,7 +751,7 @@ const initWebSocket = () => {
}
}
:deep(.el-select-dropdown__item.is-hovering ) {
:deep(.el-select-dropdown__item.is-hovering) {
background-color: #064B66 !important;
}
@@ -788,12 +792,13 @@ const initWebSocket = () => {
height: 70px !important;
line-height: 70px !important;
> span {
>span {
color: #FFFFFF;
}
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: #064B66 !important;
}
}
@@ -861,7 +866,7 @@ const initWebSocket = () => {
line-height: 40px;
font-size: 36px;
& > div {
&>div {
flex: 1;
text-align: center;
cursor: pointer;
@@ -932,8 +937,10 @@ const initWebSocket = () => {
font-size: 38px;
font-weight: bold;
:deep(.el-pagination.is-background ) {
.btn-next,.btn-prev {
:deep(.el-pagination.is-background) {
.btn-next,
.btn-prev {
background-color: transparent;
}
@@ -948,11 +955,11 @@ const initWebSocket = () => {
}
}
> span:first-child {
>span:first-child {
margin-right: 60px;
}
> span:last-child {
>span:last-child {
margin-left: 71px;
}
@@ -973,7 +980,7 @@ const initWebSocket = () => {
margin-left: 30px;
}
:deep(.el-pager li.is-active ) {
:deep(.el-pager li.is-active) {
width: 70px;
height: 70px;
background: #60DDDE;
@@ -987,7 +994,7 @@ const initWebSocket = () => {
margin-left: 40px !important;
}
:deep(.el-pager li:not(.is-active) ) {
:deep(.el-pager li:not(.is-active)) {
width: 70px;
height: 70px;
border: 1px solid #60DDDE;