huangxy
/
pv-system-monorepo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

<feat>:内容微调

master
黄潇军 3 months ago
parent
01a42a1e62
commit
5bc6b4100f
2 changed files with 93 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue
  2. 108
      packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue

65
packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue
Unescape View File

@ -1,8 +1,5 @@
<template> <template>
<div style="position: relative; height: 100%; width: 100%; overflow: hidden"> <div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
<div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
<div v-if="darkMask" class="dark-mask"></div>
</div>
</template> </template>
<script> <script>
@ -78,14 +75,13 @@ export default {
}) })
.then((AMap) => { .then((AMap) => {
this.AMapIns = AMap; this.AMapIns = AMap;
// 使用卫星图层（不叠加道路线） this.map = new AMap.Map('map', {
const satellite = new AMap.TileLayer.Satellite(); viewMode: '2D',
this.map = new AMap.Map('map', { zoom: 12,
viewMode: '2D', center: defaultCenterPoint,
zoom: 12, mapStyle: 'amap://styles/dark', // 使用暗色样式，提供纯黑背景
center: defaultCenterPoint, layers: []
layers: [satellite] });
});
if (this.rectangles?.length) { if (this.rectangles?.length) {
this.formatData(this.rectangles); this.formatData(this.rectangles);
} }
@ -132,27 +128,28 @@ export default {
createPolygon(item) { createPolygon(item) {
const { path, status, name } = item; const { path, status, name } = item;
const style = STATUS_STYLE[status] || STATUS_STYLE['未施工']; const style = STATUS_STYLE[status] || STATUS_STYLE['未施工'];
const polygon = new this.AMapIns.Polygon({ const polygon = new this.AMapIns.Polygon({
path, path,
strokeColor: style.stroke, strokeColor: style.stroke,
strokeWeight: 2, strokeWeight: 2,
strokeOpacity: 1, strokeOpacity: 1,
strokeStyle: 'solid', strokeStyle: 'solid',
fillColor: style.fill, fillColor: style.fill,
fillOpacity: 0.45, fillOpacity: 0.45,
cursor: 'pointer', cursor: 'pointer',
zIndex: 50 zIndex: 100 // 确保多边形在黑色蒙层之上
}); });
console.log(polygon, 'polygon'); console.log(polygon, 'polygon');
this.map.add(polygon); this.map.add(polygon);
this.polygons.push(polygon); this.polygons.push(polygon);
// 居中名称标签 // 居中名称标签
const text = new this.AMapIns.Text({ const text = new this.AMapIns.Text({
text: name || '', text: name || '',
anchor: 'center', anchor: 'center',
style: { 'background-color': 'transparent', border: 'none', color: '#ffffff', 'font-size': '12px' } style: { 'background-color': 'transparent', border: 'none', color: '#ffffff', 'font-size': '12px' },
}); zIndex: 101 // 文字在多边形之上
});
// 计算简单中心点 // 计算简单中心点
const mid = path[Math.floor(path.length / 2)] || path[0]; const mid = path[Math.floor(path.length / 2)] || path[0];
if (mid) text.setPosition(mid); if (mid) text.setPosition(mid);
@ -176,13 +173,5 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.dark-mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 10, 26, 0.25);
pointer-events: none;
}
</style> </style>

108
packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="task-screen"> <div class="task-screen">
<!-- <div class="map-wrap"> <div class="map-wrap">
<MapComponent :rectangles="rectangles" /> <MapComponent :rectangles="rectangles" />
<div class="legend"> <div class="legend">
<div class="legend-item" v-for="(item, i) in legends" :key="i"> <div class="legend-item" v-for="(item, i) in legends" :key="i">
@ -8,7 +8,7 @@
<span class="text">{{ item.label }}</span> <span class="text">{{ item.label }}</span>
</div> </div>
</div> </div>
</div> --> </div>
<div class="side left"> <div class="side left">
<div class="panel"> <div class="panel">
@ -61,44 +61,47 @@
<span>更多</span> <span>更多</span>
</template> </template>
</BlockTitle> </BlockTitle>
<div class="kpibox"> <div class="kpi-box">
<div class="kpi"> <div class="kpi-item-title">当前设备在线数量</div>
<div class="kpi-label">当前设备在线数量</div> <div class="kpi-item-group">
<div class="kpi-value">{{ deviceStats.online }}</div> <div class="kpi-item">
</div> <div class="kpi-label">檩条设备</div>
<div class="kpi"> <div class="kpi-value">{{ deviceStats.online }}</div>
<div class="kpi-label">组件设备</div> </div>
<div class="kpi-value">{{ deviceStats.component }}</div> <div class="kpi-item">
</div> <div class="kpi-label">组件设备</div>
<div class="kpi"> <div class="kpi-value">{{ deviceStats.component }}</div>
<div class="kpi-label">当前设备安装数量</div> </div>
<div class="kpi-value">{{ deviceStats.installing }}</div>
</div> </div>
<div class="kpi">
<div class="kpi-label">组件安装数</div> <div class="kpi-item-title">今日设备安装数量</div>
<div class="kpi-value">{{ deviceStats.moduleInstalled }}</div> <div class="kpi-item-group">
<div class="kpi-item">
<div class="kpi-label">檩条安装数</div>
<div class="kpi-value">{{ deviceStats.installing }}</div>
</div>
<div class="kpi-item">
<div class="kpi-label">组件安装数</div>
<div class="kpi-value">{{ deviceStats.moduleInstalled }}</div>
</div>
</div> </div>
</div> </div>
<div class="kpi-item-title">今日设备信息</div>
<fks-table :data="deviceTable" border height="280"> <fks-table :data="deviceTable" border height="208">
<fks-table-column prop="id" label="设备ID" width="80" /> <fks-table-column prop="id" label="设备ID" />
<fks-table-column prop="area" label="所属工区" width="90" /> <fks-table-column prop="area" label="所属工区" />
<fks-table-column prop="team" label="工作小组" width="100" /> <fks-table-column prop="team" label="工作小组" />
<fks-table-column prop="dayWork" label="当日工作量" width="110" /> <fks-table-column prop="dayWork" label="当日工作量" width="80" />
<fks-table-column prop="runtime" label="运行时长(h)" width="110" /> <fks-table-column prop="runtime" label="运行时长(h)" width="85" />
</fks-table> </fks-table>
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-title"> <BlockTitle title="安全预警"> </BlockTitle>
<img class="titleIcon" :src="titleIcon" /> <fks-table :data="alarmTable" border height="208">
<span>报警信息</span> <fks-table-column prop="code" label="预警类别" />
<span class="more">更多</span> <fks-table-column prop="device" label="设备编码" />
</div> <fks-table-column prop="desc" label="报警内容" />
<fks-table :data="alarmTable" border height="300">
<fks-table-column prop="code" label="报警编号" width="100" />
<fks-table-column prop="device" label="设备编号" width="100" />
<fks-table-column prop="desc" label="报警内容" min-width="140" />
<fks-table-column prop="time" label="报警时间" width="160" /> <fks-table-column prop="time" label="报警时间" width="160" />
</fks-table> </fks-table>
</div> </div>
@ -198,6 +201,9 @@ export default {
padding: 4px 0 !important; padding: 4px 0 !important;
color: #999 !important; color: #999 !important;
background: #f9f9f9 !important; background: #f9f9f9 !important;
.cell {
padding: 0 !important;
}
} }
} }
} }
@ -246,6 +252,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
background: #fff;
.panel + .panel { .panel + .panel {
margin-top: 20px; margin-top: 20px;
} }
@ -336,16 +343,33 @@ export default {
} }
} }
.kpibox { .kpi-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8px;
margin-bottom: 12px; margin-bottom: 12px;
.kpi { display: flex;
background: rgba(8, 26, 58, 0.7); flex-direction: column;
border: 1px solid rgba(91, 166, 255, 0.25); .kpi-item-title {
border-radius: 6px; font-family: PingFang SC, PingFang SC;
padding: 10px 8px; font-weight: 400;
font-size: 14px;
color: #000000;
margin-bottom: 8px;
}
.kpi-item-group {
display: flex;
gap: 0 16px;
}
.kpi-item {
flex: 1;
height: 50px;
margin-bottom: 18px;
background: linear-gradient(180deg, #f2f9ff 0%, rgba(242, 249, 255, 0.5) 100%);
border-radius: 8px 8px 8px 8px;
border: 1px solid #dcedff;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: space-between;
.kpi-label { .kpi-label {
font-size: 12px; font-size: 12px;
margin-bottom: 4px; margin-bottom: 4px;

Write Preview
Loading…
Cancel
Save