feat(ems):重构 overview 视图与查询功能

- 区域绘制方式由多边形改为矩形拼接,提升渲染灵活性- 新增据位/设备关键词查询功能,支持高亮匹配点位
- 添加悬浮信息卡展示区域库存与点位指标详情- 优化点位与区域点击交互,支持事件定位与数据展示
- 完善指标值安全读取逻辑,增强数据容错处理
- 接入后端查询接口,支持动态更新区域与点位数据- 样式优化:增加信息高亮、文本阴影与响应式布局
- 移除冗余字段展示,精简表格列配置
This commit is contained in:
2025-10-14 09:40:21 +08:00
parent 50303d0301
commit d8175ef41d
2 changed files with 384 additions and 74 deletions

View File

@@ -1,58 +1,102 @@
<template>
<div class="app-container ems-overview">
<div class="toolbar">
<el-button-group>
<el-button size="mini" :type="viewLevel===1?'primary':'default'" @click="setView(1)">1</el-button>
<el-button size="mini" :type="viewLevel===2?'primary':'default'" @click="setView(2)">2</el-button>
<el-button size="mini" :type="viewLevel===3?'primary':'default'" @click="setView(3)">3</el-button>
</el-button-group>
<div class="toolbar-left">
<el-button-group>
<el-button size="mini" :type="viewLevel===1?'primary':'default'" @click="setView(1)">1</el-button>
<el-button size="mini" :type="viewLevel===2?'primary':'default'" @click="setView(2)">2</el-button>
<el-button size="mini" :type="viewLevel===3?'primary':'default'" @click="setView(3)">3</el-button>
</el-button-group>
<el-input
size="mini"
v-model="query.keyword"
placeholder="据位/设备关键词"
clearable
class="q-input"
@keyup.enter.native="handleQuery"
/>
<el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
<el-button size="mini" @click="resetQuery">重置查询</el-button>
</div>
<div class="toolbar-right">
<el-button size="mini" icon="el-icon-zoom-in" @click="zoom(1.1)"/>
<el-button size="mini" icon="el-icon-zoom-out" @click="zoom(0.9)"/>
<el-button size="mini" icon="el-icon-refresh" @click="resetView">重置</el-button>
<el-button size="mini" icon="el-icon-refresh" @click="resetView">重置视图</el-button>
</div>
</div>
<div class="canvas-wrapper">
<div class="canvas-wrapper" ref="wrapper">
<svg :viewBox="viewBox" class="overview-svg">
<!-- 区域多边形 -->
<g v-for="area in areas" :key="area.id" @click="selectArea(area)" style="cursor:pointer;">
<polygon
:points="area.points.map(p => p.x+','+p.y).join(' ')"
:fill="area.id===selectedAreaId ? area.fillActive : area.fill"
:stroke="area.stroke"
:stroke-width="2"
:opacity="viewLevel===3 ? 0.8 : 1"
/>
<!-- 区域标题 -->
<text :x="area.labelPos.x" :y="area.labelPos.y" class="area-label">{{ area.name }}</text>
<!-- 区域由矩形拼接组成 -->
<g
v-for="area in areas"
:key="area.id"
style="cursor:pointer;"
@click="selectArea(area, $event)"
>
<!-- 拼接矩形 -->
<g v-for="(shape, idx) in area.shapes" :key="area.id + '_s_' + idx">
<rect
:x="shape.x"
:y="shape.y"
:width="shape.w"
:height="shape.h"
:fill="area.id===selectedAreaId ? area.fillActive : area.fill"
:stroke="area.stroke"
:stroke-width="2"
:opacity="viewLevel===3 ? 0.8 : 1"
rx="4"
ry="4"
/>
</g>
<!-- 点位格子仅在选中或特定视图显示 -->
<!-- 区域标题 -->
<text :x="area.labelPos.x" :y="area.labelPos.y" class="area-label">
{{ area.name }}
</text>
<!-- 点位格子/长方形 -->
<g v-if="viewLevel!==1 || area.id===selectedAreaId">
<g v-for="pt in area.pointsInfo" :key="pt.id" @click.stop="openPoint(pt, area)" style="cursor:pointer;">
<g
v-for="pt in area.pointsInfo"
:key="pt.id"
@click.stop="openPoint(pt, area, $event)"
style="cursor:pointer;"
>
<rect
:x="pt.x-pt.w/2"
:y="pt.y-pt.h/2"
:width="pt.w"
:height="pt.h"
:rx="4"
:ry="4"
rx="4"
ry="4"
:fill="ptFill(pt)"
stroke="#444"
:stroke-width="pt.id===selectedPoint&&id ? 2 : 1"
:opacity="viewLevel===2 ? 0.9 : 0.75"
:stroke-width="selectedPoint && selectedPoint.id===pt.id ? 2 : 1"
:opacity="viewLevel===2 ? 0.9 : 0.8"
:class="{'pt-highlight': highlightedIds.has(pt.id)}"
/>
<text :x="pt.x" :y="pt.y-6" class="pt-title">{{ pt.name }}</text>
<text :x="pt.x" :y="pt.y+10" class="pt-sub">
{{ (pt.deviceData&&metric1&&label || '温度') + ': ' + (pt.deviceData&&metric1&&value || '--') }}
{{ safeMetric(pt, 'metric1', 'label', '指标1') + '' + safeMetric(pt, 'metric1', 'value', '--') }}
</text>
<text :x="pt.x" :y="pt.y+24" class="pt-sub">
{{ (pt.deviceData&&metric2&&label || '状态') + ': ' + (pt.deviceData&&metric2&&value || '--') }}
{{ safeMetric(pt, 'metric2', 'label', '指标2') + '' + safeMetric(pt, 'metric2', 'value', '--') }}
</text>
</g>
</g>
</g>
</svg>
<!-- 悬浮信息卡点击块/点位时显示 -->
<div
v-if="infoBox.show"
class="info-box"
:style="{ left: infoBox.x + 'px', top: infoBox.y + 'px' }"
>
<div class="info-title">{{ infoBox.title }}</div>
<div class="info-line" v-for="(line, i) in infoBox.lines" :key="i">{{ line }}</div>
</div>
</div>
<!-- 点位详情 -->
@@ -64,13 +108,19 @@
>
<div v-if="selectedPoint">
<p>点位名称{{ selectedPoint.name }}</p>
<p>所属区域{{ selectedArea&&name }}</p>
<p>所属区域{{ selectedArea ? selectedArea.name : '-' }}</p>
<p>坐标({{ selectedPoint.x }}, {{ selectedPoint.y }})</p>
<el-divider></el-divider>
<p>设备数据</p>
<ul class="point-ul">
<li>{{ selectedPoint.deviceData&&metric1&&label || '温度' }}{{ selectedPoint.deviceData&&metric1&&value || '--' }}</li>
<li>{{ selectedPoint.deviceData&&metric2&&label || '状态' }}{{ selectedPoint.deviceData&&metric2&&value || '--' }}</li>
<li>
{{ safeMetric(selectedPoint, 'metric1', 'label', '指标1') }}
{{ safeMetric(selectedPoint, 'metric1', 'value', '--') }}
</li>
<li>
{{ safeMetric(selectedPoint, 'metric2', 'label', '指标2') }}
{{ safeMetric(selectedPoint, 'metric2', 'value', '--') }}
</li>
</ul>
</div>
<span slot="footer" class="dialog-footer">
@@ -81,6 +131,7 @@
</template>
<script>
// @ts-nocheck
export default {
name: 'EmsOverview',
data() {
@@ -92,55 +143,110 @@ export default {
selectedPoint: null,
selectedArea: null,
pointDialogOpen: false,
// 示例数据:可替换为接口返回
// 查询
query: {
keyword: ''
},
highlightedIds: new Set(),
infoBox: {
show: false,
x: 0,
y: 0,
title: '',
lines: []
},
// 示例数据:使用由正方形/长方形拼接的区域形状
areas: [
{
id: 'A',
name: '冷藏区',
points: [{x:60,y:80},{x:1100,y:80},{x:1100,y:620},{x:60,y:620}], // 矩形(可改为不规则)
labelPos: {x:100, y:120},
// 用多个长方形拼接
shapes: [
{ x: 40, y: 60, w: 560, h: 560 }, // 大矩形
{ x: 40, y: 620, w: 560, h: 10 } // 底部细条,强调边界(可选)
],
labelPos: { x: 60, y: 110 },
fill: '#4c6ef5',
fillActive: '#3b5bdb',
stroke: '#2b2d42',
// 点位
pointsInfo: [
{ id:'A1', name:'点位-01', x:250, y:220, w:110, h:70,
deviceData: { metric1:{label:'温度', value:'4.2℃'}, metric2:{label:'状态', value:'正常'} } },
{ id:'A2', name:'点位-02', x:520, y:260, w:110, h:70,
deviceData: { metric1:{label:'温度', value:'5.1℃'}, metric2:{label:'状态', value:'正常'} } },
{ id:'A3', name:'点位-03', x:820, y:340, w:110, h:70,
deviceData: { metric1:{label:'温度', value:'7.8℃'}, metric2:{label:'状态', value:'告警'} } },
]
{
id: 'A1', name: '点位-01', x: 250, y: 220, w: 110, h: 70,
deviceData: { metric1: { label: '温度', value: '4.2℃' }, metric2: { label: '状态', value: '正常' } }
},
{
id: 'A2', name: '点位-02', x: 520, y: 260, w: 110, h: 70,
deviceData: { metric1: { label: '温度', value: '5.1℃' }, metric2: { label: '状态', value: '正常' } }
},
{
id: 'A3', name: '点位-03', x: 420, y: 420, w: 110, h: 70,
deviceData: { metric1: { label: '温度', value: '7.8℃' }, metric2: { label: '状态', value: '告警' } }
}
],
// 库存示例(点击区域显示)
inventory: { title: '库存', count: 31890 }
},
{
id: 'B',
name: '冷冻区',
points: [{x:640,y:80},{x:1140,y:80},{x:1140,y:620},{x:640,y:620}], // 与 A 有交叠边以示多区
labelPos: {x:680, y:120},
shapes: [
{ x: 620, y: 60, w: 520, h: 280 }, // 上部
{ x: 620, y: 350, w: 520, h: 270 } // 下部
],
labelPos: { x: 640, y: 110 },
fill: '#4ea8de',
fillActive: '#3a86ff',
stroke: '#1b263b',
pointsInfo: [
{ id:'B1', name:'点位-11', x:780, y:220, w:110, h:70,
deviceData: { metric1:{label:'温度', value:'-12.3℃'}, metric2:{label:'状态', value:'正常'} } },
{ id:'B2', name:'点位-12', x:980, y:460, w:110, h:70,
deviceData: { metric1:{label:'温度', value:'-10.0℃'}, metric2:{label:'状态', value:'维护'} } },
]
{
id: 'B1', name: '点位-11', x: 780, y: 220, w: 110, h: 70,
deviceData: { metric1: { label: '温度', value: '-12.3℃' }, metric2: { label: '状态', value: '正常' } }
},
{
id: 'B2', name: '点位-12', x: 980, y: 460, w: 110, h: 70,
deviceData: { metric1: { label: '温度', value: '-10.0℃' }, metric2: { label: '状态', value: '维护' } }
}
],
inventory: { title: '库存', count: 21890 }
},
// 不规则多边形区域示例
// 分拣区:原来是不规则多边形,现改为由多个矩形拼接成“侧边栏”效果
{
id: 'C',
name: '分拣区',
points: [{x:1040,y:90},{x:1170,y:180},{x:1170,y:560},{x:1040,y:650},{x:980,y:650},{x:980,y:90}],
labelPos: {x:1000, y:220},
shapes: [
{ x: 1160, y: 60, w: 20, h: 560 }, // 竖条边框
{ x: 1080, y: 60, w: 70, h: 130 },
{ x: 1080, y: 200, w: 70, h: 130 },
{ x: 1080, y: 340, w: 70, h: 130 },
{ x: 1080, y: 480, w: 70, h: 140 }
],
labelPos: { x: 1090, y: 90 },
fill: '#95d5b2',
fillActive: '#74c69d',
stroke: '#2d6a4f',
pointsInfo: [
{ id:'C1', name:'点位-21', x:1040, y:240, w:120, h:76,
deviceData: { metric1:{label:'能量', value:'1000g'}, metric2:{label:'状态', value:'良好'} } },
{ id:'C2', name:'点位-22', x:1040, y:440, w:120, h:76,
deviceData: { metric1:{label:'显卡', value:'4001'}, metric2:{label:'状态', value:'正常'} } },
]
{
id: 'C1', name: '能量', x: 1115, y: 130, w: 60, h: 60,
deviceData: { metric1: { label: '重量', value: '1000g' }, metric2: { label: '状态', value: '良好' } }
},
{
id: 'C2', name: '显卡', x: 1115, y: 270, w: 60, h: 60,
deviceData: { metric1: { label: '型号', value: '4001' }, metric2: { label: '状态', value: '正常' } }
},
{
id: 'C3', name: '特种钢', x: 1115, y: 410, w: 60, h: 60,
deviceData: { metric1: { label: '数量', value: '999个' }, metric2: { label: '状态', value: '正常' } }
},
{
id: 'C4', name: '能量棒', x: 1115, y: 560, w: 60, h: 60,
deviceData: { metric1: { label: '重量', value: '500g' }, metric2: { label: '状态', value: '正常' } }
}
],
inventory: { title: '库存', count: 4080 }
}
]
};
@@ -148,13 +254,10 @@ export default {
methods: {
setView(n) {
this.viewLevel = n;
// 可在不同视图级别下调整呈现元素
// 例如viewLevel===1 仅显示区域2 显示点位3 显示热力/状态覆盖
},
zoom(factor) {
this.scale = Math.max(0.5, Math.min(2.5, this.scale * factor));
// 通过调整 viewBox 或 transform 控制缩放,这里直接改 viewBox 以简化
const base = { w:1200, h:700 };
const base = { w: 1200, h: 700 };
const w = base.w / this.scale;
const h = base.h / this.scale;
this.viewBox = `0 0 ${w} ${h}`;
@@ -165,26 +268,197 @@ export default {
this.selectedAreaId = null;
this.selectedPoint = null;
this.selectedArea = null;
this.hideInfo();
this.highlightedIds = new Set();
},
selectArea(area) {
this.selectedAreaId = area.id;
this.selectedArea = area;
},
openPoint(pt, area) {
this.selectedPoint = pt;
this.selectedArea = area;
this.pointDialogOpen = true;
// 安全读取设备指标
safeMetric(obj, mKey, fKey, defVal) {
if (!obj || !obj.deviceData) return defVal;
const m = obj.deviceData[mKey];
return m && m[fKey] != null ? m[fKey] : defVal;
},
// 点位填充色
ptFill(pt) {
const val = (pt.deviceData&&metric2&&value || '').toString();
const val = (this.safeMetric(pt, 'metric2', 'value', '') || '').toString();
if (val.includes('告警') || val.includes('异常')) return '#ff6b6b';
if (val.includes('维护')) return '#ffd166';
return '#8ecae6';
},
// 预留点位查询(据位查询)接口
// 区域选择 + 信息卡显示(库存)
selectArea(area, evt) {
this.selectedAreaId = area.id;
this.selectedArea = area;
this.showInfo(evt, area.name, [
area.inventory?.title || '库存',
`库存数量:${this.formatNumber(area.inventory?.count ?? 0)}`
]);
},
// 打开点位(弹框 + 信息卡)
openPoint(pt, area, evt) {
this.selectedPoint = pt;
this.selectedArea = area;
this.pointDialogOpen = true;
const l1 = `${this.safeMetric(pt, 'metric1', 'label', '指标1')}${this.safeMetric(pt, 'metric1', 'value', '--')}`;
const l2 = `${this.safeMetric(pt, 'metric2', 'label', '指标2')}${this.safeMetric(pt, 'metric2', 'value', '--')}`;
this.showInfo(evt, pt.name, [l1, l2]);
},
// 悬浮信息卡
showInfo(evt, title, lines) {
const wrap = this.$refs.wrapper;
if (!wrap) return;
const rect = wrap.getBoundingClientRect();
const x = evt.clientX - rect.left + 12;
const y = evt.clientY - rect.top + 12;
this.infoBox = { show: true, x, y, title, lines };
},
hideInfo() {
this.infoBox.show = false;
},
// 查询(据位查询):优先走接口,失败回退本地过滤
async handleQuery() {
const kw = (this.query.keyword || '').trim();
this.highlightedIds = new Set();
if (!kw) {
this.hideInfo();
return;
}
let usedApi = false;
try {
// 存在封装的 API 则调用
if (this.$api && this.$api.ems && this.$api.ems.queryPoints) {
await this.queryPoints({ keyword: kw });
usedApi = true;
}
} catch (e) {
// 忽略接口错误,回退本地
usedApi = false;
}
// 高亮与信息卡(对当前 this.areas 数据集进行)
let firstHit = null;
this.areas.forEach(area => {
(area.pointsInfo || []).forEach(pt => {
const text = [
pt.name,
this.safeMetric(pt, 'metric1', 'label', ''),
this.safeMetric(pt, 'metric1', 'value', ''),
this.safeMetric(pt, 'metric2', 'label', ''),
this.safeMetric(pt, 'metric2', 'value', '')
].join(' ');
if (text.includes(kw)) {
this.highlightedIds.add(pt.id);
if (!firstHit) firstHit = { pt, area };
}
});
});
if (firstHit) {
this.selectedAreaId = firstHit.area.id;
this.selectedArea = firstHit.area;
this.selectedPoint = firstHit.pt;
const wrap = this.$refs.wrapper;
if (wrap) {
const rect = wrap.getBoundingClientRect();
const x = (firstHit.pt.x / (1200 / rect.width)) + 12;
const y = (firstHit.pt.y / (700 / rect.height)) + 12;
this.infoBox = {
show: true,
x: Math.min(rect.width - 220, Math.max(8, x)),
y: Math.min(rect.height - 140, Math.max(8, y)),
title: firstHit.pt.name,
lines: [
`${this.safeMetric(firstHit.pt, 'metric1', 'label', '指标1')}${this.safeMetric(firstHit.pt, 'metric1', 'value', '--')}`,
`${this.safeMetric(firstHit.pt, 'metric2', 'label', '指标2')}${this.safeMetric(firstHit.pt, 'metric2', 'value', '--')}`
]
};
}
} else {
this.$message.info(usedApi ? '接口无匹配结果' : '未查询到匹配点位/设备数据');
this.hideInfo();
}
},
resetQuery() {
this.query.keyword = '';
this.highlightedIds = new Set();
this.hideInfo();
},
// 对接接口:据位查询或区域点位拉取
queryPoints(params) {
// TODO: 调用后端接口,更新 areas[].pointsInfo
// this.$api.xxx(params).then(res => { ... })
if (!(this.$api && this.$api.ems && this.$api.ems.queryPoints)) {
return Promise.resolve();
}
return this.$api.ems.queryPoints(params).then(res => {
const data = (res && (res.data ?? res)) || {};
// 结构 A包含 areas
if (Array.isArray(data.areas)) {
// 将后端 areas 适配为前端结构,缺省字段从现有同 id 区域继承
const existMap = new Map(this.areas.map(a => [a.id, a]));
this.areas = data.areas.map(a => {
const old = existMap.get(a.id) || {};
return {
id: a.id,
name: a.name ?? old.name ?? '',
shapes: Array.isArray(a.shapes) ? a.shapes : (old.shapes || []),
labelPos: a.labelPos ?? old.labelPos ?? { x: 60, y: 110 },
fill: old.fill || '#4c6ef5',
fillActive: old.fillActive || '#3b5bdb',
stroke: old.stroke || '#2b2d42',
inventory: a.inventory ?? old.inventory ?? null,
pointsInfo: Array.isArray(a.points)
? a.points.map(p => ({
id: p.id, name: p.name,
x: p.x, y: p.y, w: p.w, h: p.h,
deviceData: p.deviceData || {}
}))
: (old.pointsInfo || [])
};
});
return;
}
// 结构 B仅返回 points需含 areaId
if (Array.isArray(data.points)) {
const byArea = {};
data.points.forEach(p => {
const aid = p.areaId;
if (!aid) return;
(byArea[aid] = byArea[aid] || []).push({
id: p.id, name: p.name,
x: p.x, y: p.y, w: p.w, h: p.h,
deviceData: p.deviceData || {}
});
});
this.areas = this.areas.map(a => ({
...a,
pointsInfo: byArea[a.id] ? byArea[a.id] : (a.pointsInfo || [])
}));
// 可选data.areasInfo 覆盖库存
if (Array.isArray(data.areasInfo)) {
const infoMap = new Map(data.areasInfo.map(i => [i.id || i.areaId, i]));
this.areas = this.areas.map(a => ({
...a,
inventory: infoMap.get(a.id)?.inventory ?? a.inventory
}));
}
return;
}
// 未识别结构,保持不变
}).catch(err => {
this.$message.error('查询接口失败');
// 继续走本地回退
});
},
formatNumber(n) {
const str = (n ?? 0).toString();
return str.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
}
};
@@ -202,11 +476,20 @@ export default {
align-items: center;
margin-bottom: 8px;
}
.toolbar-left {
display: flex;
align-items: center;
gap: 8px;
}
.q-input {
width: 220px;
}
.toolbar-right {
display: flex;
gap: 6px;
align-items: center;
}
.canvas-wrapper {
border: 1px solid #e5e7eb;
border-radius: 6px;
@@ -220,16 +503,44 @@ export default {
height: 100%;
}
.area-label {
fill: #fff;
fill: #ffffff;
font-size: 16px;
font-weight: 600;
font-weight: 700;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.pt-title, .pt-sub {
fill: #fff;
fill: #ffffff;
font-size: 12px;
text-anchor: middle;
user-select: none;
pointer-events: none;
}
.pt-highlight {
stroke: #ffb703 !important;
stroke-width: 3 !important;
}
.info-box {
position: absolute;
min-width: 180px;
max-width: 240px;
background: #fff;
color: #111827;
box-shadow: 0 6px 20px rgba(0,0,0,0.18);
border-radius: 8px;
padding: 10px 12px;
z-index: 10;
pointer-events: none;
}
.info-title {
font-weight: 600;
margin-bottom: 6px;
}
.info-line {
font-size: 12px;
line-height: 18px;
}
.point-ul {
margin: 0;
padding-left: 16px;

View File

@@ -105,7 +105,6 @@
<el-table v-loading="loading" :data="safetyEnvDocList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="文档ID" align="center" prop="docId" v-if="true"/>
<el-table-column label="文档编号" align="center" prop="docNo" />
<el-table-column label="文档名称" align="center" prop="docName" />
<el-table-column label="文档分类" align="center" prop="docCategory">