This commit is contained in:
parent
3ba7b31681
commit
7956df0c85
|
|
@ -28,10 +28,96 @@
|
|||
<search id="header-search" class="right-menu-item" />
|
||||
|
||||
<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip> -->
|
||||
<!-- 代办 -->
|
||||
<div class="right-menu-item hover-effect bar-item" @click="goTodo">
|
||||
<span class="bar-text">待办</span>
|
||||
</div>
|
||||
|
||||
<!-- 预警 -->
|
||||
<el-popover
|
||||
ref="warningPopover"
|
||||
placement="bottom"
|
||||
width="360"
|
||||
trigger="hover"
|
||||
popper-class="warning-popover"
|
||||
>
|
||||
<!-- 弹框内容 -->
|
||||
<div class="warning-box">
|
||||
<div class="warning-title">预告警列表</div>
|
||||
|
||||
<div
|
||||
v-for="(item, index) in warningList"
|
||||
:key="index"
|
||||
class="warning-item"
|
||||
@click="goWarningDetail(item)"
|
||||
>
|
||||
<div class="warning-icon">🔔</div>
|
||||
<div class="warning-content">
|
||||
<div class="warning-main">{{ item.title }}</div>
|
||||
<div class="warning-sub">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="warning-footer" @click="goWarning">
|
||||
查看全部
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 触发元素 -->
|
||||
<div
|
||||
slot="reference"
|
||||
class="right-menu-item hover-effect bar-item"
|
||||
@click="goWarning"
|
||||
>
|
||||
<el-badge :value="warningCount" :max="99" class="badge" type="danger">
|
||||
<span class="bar-text">预警</span>
|
||||
</el-badge>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<!-- 消息 -->
|
||||
<el-popover
|
||||
ref="messagePopover"
|
||||
placement="bottom"
|
||||
width="360"
|
||||
trigger="hover"
|
||||
popper-class="warning-popover"
|
||||
>
|
||||
<!-- 弹框内容（复用预警所有样式类） -->
|
||||
<div class="warning-box">
|
||||
<div class="warning-title">消息列表</div>
|
||||
<div
|
||||
v-for="(item, index) in messageList"
|
||||
:key="index"
|
||||
class="warning-item"
|
||||
@click="goMessageDetail(item)"
|
||||
>
|
||||
<div class="warning-icon">💬</div>
|
||||
<div class="warning-content">
|
||||
<div class="warning-main">{{ item.title }}</div>
|
||||
<div class="warning-sub">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warning-footer" @click="goMessage">
|
||||
查看全部
|
||||
</div>
|
||||
</div>
|
||||
<!-- 触发元素（结构与预警一致） -->
|
||||
<div
|
||||
slot="reference"
|
||||
class="right-menu-item hover-effect bar-item"
|
||||
@click="goMessage"
|
||||
>
|
||||
<el-badge :value="messageCount" :max="99" class="badge" type="info">
|
||||
<span class="bar-text">消息</span>
|
||||
</el-badge>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
</template>
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
|
|
@ -154,6 +240,44 @@ export default {
|
|||
currentMenu: {},
|
||||
openLevel1: [],
|
||||
openLevel2: [],
|
||||
todoCount: 5,
|
||||
warningCount: 2,
|
||||
messageCount: 12,
|
||||
warningList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '达标投产复检预警',
|
||||
desc: '您所管理的今天明天后天工程已超期'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '达标投产复检预警',
|
||||
desc: '红红火火恍恍惚惚好工程已超期'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '达标投产复检预警',
|
||||
desc: '红红火火恍恍惚惚好新建工程'
|
||||
}
|
||||
],
|
||||
// 消息列表数据
|
||||
messageList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '系统通知',
|
||||
desc: '您的账号于2026-01-25 10:00完成登录，请注意账号安全'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '业务提醒',
|
||||
desc: '手塘-北三110kV工程已完成验收，可前往查看报告'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '待办提醒',
|
||||
desc: '您有5条待办事项未处理，预计截止时间2026-01-30'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -175,6 +299,27 @@ export default {
|
|||
this.menuList = this.sidebarRouters.filter((route) => !route.hidden)
|
||||
},
|
||||
methods: {
|
||||
goWarningDetail(item) {
|
||||
this.$refs.warningPopover.doClose(); // 关闭弹窗
|
||||
// this.$router.push({ path: '/warning/detail', query: { id: item.id } });
|
||||
},
|
||||
// 预警触发元素/查看全部点击-跳转到预警列表页
|
||||
goWarning() {
|
||||
this.$refs.warningPopover.doClose();
|
||||
// this.$router.push({ path: '/warning/list' });
|
||||
},
|
||||
// 待办点击-跳转到待办页面
|
||||
goTodo() {
|
||||
this.$router.push({ path: '/todo' }) // 替换为实际的待办页路由
|
||||
},
|
||||
goMessageDetail(item) {
|
||||
this.$refs.messagePopover.doClose(); // 关闭消息弹窗
|
||||
// this.$router.push({ path: '/message/detail', query: { id: item.id } }); // 跳消息详情
|
||||
},
|
||||
goMessage() {
|
||||
this.$refs.messagePopover.doClose(); // 关闭消息弹窗
|
||||
// this.$router.push({ path: '/message' }); // 跳消息列表
|
||||
},
|
||||
getUser() {
|
||||
getUserProfile().then((response) => {
|
||||
this.user = response.data
|
||||
|
|
@ -544,4 +689,89 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
.bar-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bar-text {
|
||||
margin-left: 3px;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.badge {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.warning-popover {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.warning-item {
|
||||
display: flex;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.warning-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.warning-main {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.warning-sub {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.warning-footer {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export const constantRoutes = [
|
|||
path: 'index1',
|
||||
component: () => import('@/views/index'),
|
||||
name: 'Index1',
|
||||
meta: { title: '快捷导航', icon: 'dashboard', affix: true }
|
||||
meta: { title: '导航', icon: 'dashboard', affix: true }
|
||||
},
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const dialogConfig = {
|
|||
{ t_props: 'bindStatus', t_label: '是否解绑' },
|
||||
{ t_props: 'address', t_label: '地址' },
|
||||
{ t_props: 'remark', t_label: '备注' },
|
||||
{ t_props: 'iotManager', t_label: 'IOT设备负责人' },
|
||||
{ t_props: 'iotManager', t_label: '定位设备负责人' },
|
||||
{ t_props: 'bindTime', t_label: '绑定时间' },
|
||||
{ t_props: 'unBindTime', t_label: '解绑时间' },
|
||||
{ t_props: 'bindDays', t_label: '绑定天数' },
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
:model="searchParams"
|
||||
class="search-form"
|
||||
>
|
||||
<el-form-item prop="keyWord" label="关键字">
|
||||
<el-form-item prop="keyWord" label="搜索：">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
|
|
@ -50,44 +50,71 @@
|
|||
<!--复选列-->
|
||||
<el-table-column type="selection" width="50" align="center"/>
|
||||
<!--序号列-->
|
||||
<el-table-column align="center" label="序号" type="index" width="50"/>
|
||||
<el-table-column align="center" label="序号" type="index" width="60"/>
|
||||
|
||||
<!-- 核心字段列 - 统一设置换行样式 -->
|
||||
<el-table-column align="center" prop="iotName" label="iot设备名称" min-width="120">
|
||||
<el-table-column align="center" prop="iotName" label="定位设备名称" width="180">
|
||||
<template slot-scope="scope">
|
||||
<div class="cell-text-ellipsis">{{ scope.row.iotName }}</div>
|
||||
<el-tooltip
|
||||
:content="scope.row.iotName"
|
||||
placement="top"
|
||||
:disabled="!isOverflow(scope.row.iotName, 2, 180)"
|
||||
>
|
||||
<div class="cell-text-ellipsis">
|
||||
{{ scope.row.iotName }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="iotCode" label="iot设备编码" min-width="120">
|
||||
|
||||
<el-table-column align="center" prop="iotCode" label="定位设备编码" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
:content="scope.row.iotCode"
|
||||
placement="top"
|
||||
:disabled="!isOverflow(scope.row.iotCode, 2, 180)"
|
||||
>
|
||||
<div class="cell-text-ellipsis">{{ scope.row.iotCode }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="typeName" label="装备名称" min-width="120">
|
||||
<el-table-column align="center" prop="typeName" label="装备名称" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
:content="scope.row.typeName"
|
||||
placement="top"
|
||||
:disabled="!isOverflow(scope.row.typeName, 2, 180)"
|
||||
>
|
||||
<div class="cell-text-ellipsis">{{ scope.row.typeName }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="maCode" label="装备编码" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
:content="scope.row.maCode"
|
||||
placement="top"
|
||||
:disabled="!isOverflow(scope.row.maCode, 2, 180)"
|
||||
>
|
||||
<div class="cell-text-ellipsis">{{ scope.row.maCode }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="设备状态">
|
||||
<el-table-column align="center" label="设备状态" width="80">
|
||||
<template slot-scope="{ row }">
|
||||
<el-tag size="mini" type="success" v-if="row.iotStatus === 0">在线</el-tag>
|
||||
<el-tag size="mini" type="warning" v-if="row.iotStatus === 1">离线</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="绑定状态">
|
||||
<el-table-column align="center" label="绑定状态" width="80">
|
||||
<template slot-scope="{ row }">
|
||||
<el-tag size="mini" type="success" v-if="row.bindStatus === 0">已绑定</el-tag>
|
||||
<el-tag size="mini" type="warning" v-if="row.bindStatus === 1">未绑定</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" prop="address" label="设备地图" min-width="120">
|
||||
<el-table-column align="center" prop="address" label="设备地图" width="80">
|
||||
|
||||
<template slot-scope="{ row }">
|
||||
<i
|
||||
|
|
@ -98,13 +125,25 @@
|
|||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="iotManager" label="设备负责人" width="100"/>
|
||||
<el-table-column align="center" prop="iotManager" label="设备负责人" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
:content="scope.row.iotManager"
|
||||
placement="top"
|
||||
:disabled="!isOverflow(scope.row.iotManager, 2, 180)"
|
||||
>
|
||||
<div class="cell-text-ellipsis">
|
||||
{{ scope.row.iotManager }}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" prop="bindTime" label="绑定时间" min-width="110"/>
|
||||
<el-table-column align="center" prop="unBindTime" label="解绑时间" min-width="110"/>
|
||||
|
||||
<!--操作列：仅修改绑定按钮的传参，其余完全保留-->
|
||||
<el-table-column align="center" label="操作">
|
||||
<el-table-column align="center" label="操作" width="250">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button
|
||||
type="text"
|
||||
|
|
@ -461,6 +500,28 @@ export default {
|
|||
//this.getDeviceTypeList()
|
||||
},
|
||||
methods: {
|
||||
isOverflow(text, line = 2, width = 180) {
|
||||
// 创建一个隐藏的测量节点
|
||||
const div = document.createElement('div')
|
||||
div.style.position = 'absolute'
|
||||
div.style.visibility = 'hidden'
|
||||
div.style.width = width + 'px'
|
||||
div.style.lineHeight = '1.5'
|
||||
div.style.fontSize = '14px'
|
||||
div.style.fontFamily = 'Arial'
|
||||
div.style.display = '-webkit-box'
|
||||
div.style.webkitBoxOrient = 'vertical'
|
||||
div.style.webkitLineClamp = line
|
||||
div.style.wordBreak = 'break-all'
|
||||
div.innerText = text
|
||||
|
||||
document.body.appendChild(div)
|
||||
|
||||
const isOverflow = div.scrollHeight > div.clientHeight
|
||||
|
||||
document.body.removeChild(div)
|
||||
return isOverflow
|
||||
},
|
||||
/** 获取设备列表 */
|
||||
async getDeviceList() {
|
||||
try {
|
||||
|
|
@ -514,7 +575,7 @@ export default {
|
|||
// 2. 先判断是新增还是编辑，设置标题和标识
|
||||
if (row) {
|
||||
this.isAdd = false
|
||||
this.dialogTitle = '编辑设备' // 用新的标题变量
|
||||
this.dialogTitle = '编辑定位设备' // 用新的标题变量
|
||||
// 编辑：赋值表单（深拷贝避免修改原数据）
|
||||
this.addOrEditForm = {
|
||||
...row,
|
||||
|
|
@ -820,15 +881,16 @@ export default {
|
|||
/* 单元格文字两行显示，超出省略 */
|
||||
.cell-text-ellipsis {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* 限制显示2行 */
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
max-height: 3em; /* 2行 * 1.5行高 = 3em */
|
||||
max-height: 3em;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
|
||||
/* 分页组件：固定右下 */
|
||||
.pagination-wrapper {
|
||||
margin-top: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue