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

feat : 新增echarts全屏模式及设备新增最大/小范围框

Browse Source
This commit is contained in:
odjbin
2024-03-11 23:47:49 +08:00
parent 8b073bc98f
commit ab678cb27f
8 changed files with 314 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -135,6 +135,18 @@
@change="changeWindData(scope.row)"></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"
@change="changeWindData(scope.row)"></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"
@change="changeWindData(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch wind-switch">
@@ -194,6 +206,18 @@
@change="changeOtherData(scope.row)"></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"
@change="changeOtherData(scope.row)"></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"
@change="changeOtherData(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center">
<template #default="scope">
<div class="switch wind-switch">
@@ -577,7 +601,7 @@ getList()
}
.wind-switch {
margin-left: 65px;
margin-left: 26px;
}
.switch {

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

@@ -4,8 +4,8 @@
<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>
<span>隧道总长度: {{ tunnelLength }}米</span>
<!-- <span>当前施工长度: {{ constructionLength }}米</span>-->
</div>
<div class="top-right">
<div class="current-site">
@@ -52,7 +52,7 @@
:close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
:loading="showWindLoading"/>
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
<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"/>
</el-drawer>
@@ -72,7 +72,7 @@
<div class="arrow right" @click="nextBtn"></div>
</div>
</div>
<div class="alarm-dialog digital-tunnel">
<div class="alarm-dialog alarm-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情"
width="1500px">
<div class="detail">
@@ -85,7 +85,7 @@
</div>
</el-dialog>
</div>
<div class="digital-tunnel">
<div class="alarm-tunnel">
<el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息"
width="2175px"
:modal="false">
@@ -105,16 +105,12 @@
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<div class="device-table">
<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="equipmentId" label="设备名称" align="center" width="400px">-->
<!-- <template #default="scope">-->
<!-- {{ changeName(scope.row.equipmentId) }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<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"
@@ -134,7 +130,7 @@
</template>
</el-table-column>
</el-table>
<div class="pagination" :style="{bottom: roleKey==='administrator'?'50px':''}">
<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"/>
@@ -336,10 +332,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 +366,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
@@ -682,14 +678,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,38 +697,14 @@ 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;
}
}
.digital-tunnel {
.detail {
font-size: 50px;
color: #FFFFFF;
> div {
color: #f5f5f5;
margin-bottom: 10px;
}
}
}
.digital-tunnel {
:deep(.el-dialog ) {
height: 1410px;
.el-tag {
font-size: 36px;
height: 60px;
padding: 0 20px;
border-radius: 10px;
}
}
}
.query-form {
:deep(.el-form-item__label) {
@@ -933,7 +908,7 @@ const initWebSocket = () => {
font-weight: bold;
:deep(.el-pagination.is-background ) {
.btn-next,.btn-prev {
.btn-next, .btn-prev {
background-color: transparent;
}