refactor(tunnel): 重构隧道页面
- 移除了图像热点区域和相关逻辑 -调整了页面布局和样式- 优化了部分组件的使用方式
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,24 +1,11 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
|
||||
<div class="img-box" id="imghot">
|
||||
<!-- @/assets/images/tunnel/img.png-->
|
||||
<!-- <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
|
||||
<!-- alt="" @click="clickHandler">-->
|
||||
<div style="display: flex;justify-content: center;align-items: center;" >
|
||||
<img src="/images/img.png" alt="" class="imgModel" id="imgModel" usemap="#image" @click="getInfo()"/>
|
||||
</div>
|
||||
<map name="image" id="image">
|
||||
<area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
|
||||
:title="item.title" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
|
||||
</map>
|
||||
</div>
|
||||
<div class="box-top">
|
||||
<manage-btn
|
||||
v-model="selectIndex"
|
||||
@select="manageSelect"
|
||||
:list="routeList"
|
||||
v-if="showMenu"
|
||||
v-model="selectIndex"
|
||||
@select="manageSelect"
|
||||
:list="routeList"
|
||||
v-if="showMenu"
|
||||
/>
|
||||
<tunnel-title v-if="showTunnelTitle" />
|
||||
<div class="top-length">
|
||||
@@ -29,27 +16,27 @@
|
||||
<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();
|
||||
"
|
||||
@@ -66,39 +53,39 @@
|
||||
</div>
|
||||
<!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
|
||||
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
|
||||
<!-- <preview-scene-->
|
||||
<!-- id="tunnel-box"-->
|
||||
<!-- :isedit="false"-->
|
||||
<!-- :tunnelId="tunnelId"-->
|
||||
<!-- :key="tunnelId"-->
|
||||
<!-- :tunnelLen="tunnelLen"-->
|
||||
<!-- :largeScreen="largeScreen"-->
|
||||
<!-- :fanList="socketData.leftData"-->
|
||||
<!-- :devRealtimeData="socketData"-->
|
||||
<!-- ></preview-scene>-->
|
||||
<preview-scene
|
||||
id="tunnel-box"
|
||||
:isedit="false"
|
||||
:tunnelId="tunnelId"
|
||||
:key="tunnelId"
|
||||
:tunnelLen="tunnelLen"
|
||||
:largeScreen="largeScreen"
|
||||
:fanList="socketData.leftData"
|
||||
:devRealtimeData="socketData"
|
||||
></preview-scene>
|
||||
<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"
|
||||
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>
|
||||
@@ -106,32 +93,32 @@
|
||||
</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"
|
||||
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>
|
||||
@@ -140,7 +127,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 }}
|
||||
@@ -152,10 +139,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>
|
||||
@@ -169,30 +156,30 @@
|
||||
</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" />
|
||||
@@ -205,55 +192,55 @@
|
||||
</el-form>
|
||||
<div class="device-table" :style="{ marginTop: roleKey === 'administrator' ? '10px' : '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">
|
||||
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'">
|
||||
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' ? '-7px' : '0' }"
|
||||
class="pagination"
|
||||
:style="{ bottom: roleKey === 'administrator' ? '-7px' : '0' }"
|
||||
>
|
||||
<el-pagination
|
||||
background
|
||||
v-model:current-page="pageInfo.pageNum"
|
||||
v-model:page-size="pageInfo.pageSize"
|
||||
:total="total" :pager-count="8"
|
||||
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" :pager-count="8"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
layout="prev, pager, next"
|
||||
@current-change="handleCurrentChange"
|
||||
:hide-on-single-page="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -327,24 +314,7 @@ const routeList = ref([]);
|
||||
let socket = reactive("");
|
||||
let pattern = reactive(new RegExp("[A-Za-z]+"));
|
||||
let isTunnel = reactive(false);
|
||||
const coordsList = ref([
|
||||
{
|
||||
//厂房
|
||||
tunnelId: 98,
|
||||
title: '厂房',
|
||||
coords: '163,487,153,483,217,480,170,644,111,640,145,483',
|
||||
}, {
|
||||
//2#尾水
|
||||
tunnelId: 1,
|
||||
title: '2#尾水隧洞',
|
||||
coords: '335,548,1029,183,1079,71,1098,78,1044,192,344,567,335,548'
|
||||
}, {
|
||||
//5#支洞
|
||||
tunnelId: 109,
|
||||
title: '5#支洞',
|
||||
coords: '1046,85,1029,76,1020,45,1004,45,1014,88,1045,103,1046,85'
|
||||
}
|
||||
])
|
||||
// const equipmentOption = ref([])
|
||||
const btnList = ref([
|
||||
{
|
||||
route: "/site",
|
||||
@@ -374,28 +344,6 @@ const btnList = ref([
|
||||
]);
|
||||
const serialNumber = ref("");
|
||||
const roleKey = ref("");
|
||||
function convertCoordsToArray(coordsArray) {
|
||||
return coordsArray.map(point => `${point.x},${point.y}`).join(',');
|
||||
}
|
||||
|
||||
// 示例使用：
|
||||
const coordsData = [
|
||||
{ x: 163, y: 487 },
|
||||
{ x: 153, y: 483 },
|
||||
{ x: 217, y: 480 },
|
||||
{ x: 170, y: 644 },
|
||||
{ x: 111, y: 640 },
|
||||
{ x: 145, y: 483 }
|
||||
];
|
||||
|
||||
const result = convertCoordsToArray(coordsData);
|
||||
console.log(result);
|
||||
// 输出: "163,487,153,483,217,480,170,644,111,640,145,483"
|
||||
const clickHot = (id) => {
|
||||
console.log('点击热区===============')
|
||||
router.push('/' + id + '/' + siteId)
|
||||
}
|
||||
|
||||
let token = getToken();
|
||||
let send = {
|
||||
type: "ping",
|
||||
@@ -576,13 +524,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 {
|
||||
@@ -682,7 +630,7 @@ const manageSelect = (name) => {
|
||||
} else if (name === "隧道管理") {
|
||||
if (currentSiteId.value && currentUserId.value) {
|
||||
router.push(
|
||||
"/tunnel/" +
|
||||
"/tunnel/" +
|
||||
localStorage.getItem("currentSiteId") +
|
||||
"/byHome/" +
|
||||
currentUserId.value
|
||||
@@ -875,26 +823,11 @@ const initWebSocket = () => {
|
||||
#main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
//background-color: #072348;
|
||||
background-image: url('/images/background/background.png');
|
||||
background-color: #072348;
|
||||
|
||||
#tunnel-box {
|
||||
height: 100%;
|
||||
}
|
||||
.img-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.imgModel{
|
||||
width: 1040px;
|
||||
height: 646px;
|
||||
}
|
||||
}
|
||||
|
||||
.alarm-dialog {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user