App/app-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

绘制电脑治理信息页面

Browse Source
This commit is contained in:
guanj
2026-05-27 10:10:19 +08:00
parent 17e47c1f07
commit 7bcc68a9df
35 changed files with 2910 additions and 1492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pages/index/comp/device.vue
View File

@@ -142,6 +142,7 @@ export default {
},
computed: {
deviceListFilter() {
let arr = this.store.data.filter((item) => {
if (this.select.projectName && this.select.projectType) {
return item.project === this.select.projectName && item.type === this.select.projectType

4
pages/index/comp/engineering.vue
View File

@@ -151,8 +151,8 @@ export default {
// 存储参数
uni.setStorageSync('messageParams', {
engineeringName: this.device.engineeringName,
engineeringId: this.device.engineeringId, //工程ID
engineeringName: item.engineeringName,
engineeringId: item.engineeringId, //工程ID
projectName: '',
projectId: '', //項目ID
deviceName: '',

349
pages/index/comp/monitoringPoint.vue Normal file
View File

@@ -0,0 +1,349 @@
<template>
<view class="dashboard-container">
<!-- 页面头部 -->
<view class="page-header">
<Cn-filterInformation @select="select" />
<view class="legend-row">
<view class="legend-item">
<view class="legend-color" style="background:#DAA520"></view>
<text class="legend-text">A相</text>
</view>
<view class="legend-item">
<view class="legend-color" style="background:#2E8B57"></view>
<text class="legend-text">B相</text>
</view>
<view class="legend-item">
<view class="legend-color" style="background:#A52A2A"></view>
<text class="legend-text">C相</text>
</view>
</view>
</view>
<!-- 监测点列表 - 竖向滚动 -->
<scroll-view class="monitors-scroll" scroll-y :show-scrollbar="true">
<view class="monitors-list">
<view v-for="(point, idx) in monitoringPoints" :key="idx" class="monitor-card">
<!-- 卡片头部 -->
<view class="card-header">
<view class="event-icon">
<Cn-icon-transient :name="`监测点`" />
</view>
<view class="card-header-info">
<view class="point-name">
<text class="point-text ellipsis">{{ point.pointName }}</text>
</view>
<view class="meta-row">
<text class="meta-item ellipsis">工程: {{ point.projectName }}</text>
<text class="meta-item ellipsis">项目: {{ point.siteName }}</text>
<text class="meta-item ellipsis meta-item-full">设备: {{ point.deviceName }}</text>
</view>
</view>
</view>
<!-- 参数区域：使用 children 数据循环，每两个指标放一行 -->
<view class="params-section">
<view v-for="(rowItems, rowIdx) in chunkedChildren(point.children)" :key="rowIdx"
class="double-row">
<view v-for="(child, childIdx) in rowItems" :key="childIdx" class="param-group">
<view class="param-title">
<text>{{ child.name }}</text>
</view>
<!-- 三相数据：颜色区分，无文字 -->
<view class="phase-vertical">
<view class="phase-item-vertical">
<text class="phase-value-vertical" style="color:#DAA520">{{ child.A }}</text>
</view>
<view class="phase-divider"></view>
<view class="phase-item-vertical">
<text class="phase-value-vertical" style="color:#2E8B57">{{ child.B }}</text>
</view>
<view class="phase-divider"></view>
<view class="phase-item-vertical">
<text class="phase-value-vertical" style="color:#A52A2A">{{ child.C }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
// 监测点基础信息 + children 指标数据
monitoringPoints: [
{
pointName: "升压站#1主变测点",
projectName: "华光100MW工程11111",
siteName: "绿色智慧能源11111",
deviceName: "PMC-800终端",
children: [
{ name: '电压有效值(kV)', A: '10.52', B: '10.45', C: '10.39' },
{ name: '电流有效值(A)', A: '408.0', B: '395.0', C: '403.0' },
{ name: '基波电压幅值(kV)', A: '10.48', B: '10.42', C: '10.35' },
{ name: '基波电流幅值(A)', A: '405.5', B: '392.8', C: '400.2' }
]
},
{
pointName: "光伏区#3汇流箱",
projectName: "华光100MW工程",
siteName: "绿色智慧能源示范",
deviceName: "汇流监测单元",
children: [
{ name: '电压有效值(kV)', A: '10.72', B: '10.65', C: '10.59' },
{ name: '电流有效值(A)', A: '426.0', B: '413.0', C: '421.0' },
{ name: '基波电压幅值(kV)', A: '10.68', B: '10.62', C: '10.55' },
{ name: '基波电流幅值(A)', A: '423.5', B: '410.8', C: '418.2' }
]
},
],
// 三相颜色配置
phaseColors: [
{ name: 'A相', color: '#DAA520' },
{ name: 'B相', color: '#2E8B57' },
{ name: 'C相', color: '#A52A2A' }
]
}
},
methods: {
// 将 children 数组每两个一组进行分组，用于一行显示两个指标
chunkedChildren(children) {
const result = []
for (let i = 0; i < children.length; i += 2) {
result.push(children.slice(i, i + 2))
}
return result
},
select(value) {
console.log("🚀 ~ value:", value)
},
}
}
</script>
<style>
* {
box-sizing: border-box;
}
.dashboard-container {
min-height: 100vh;
background: #f5f7fb;
padding: 20rpx 20rpx 0rpx 20rpx;
display: flex;
flex-direction: column;
}
/* 头部样式 */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-shrink: 0;
}
.title-section {
display: flex;
align-items: baseline;
gap: 12rpx;
}
.title-icon {
font-size: 40rpx;
}
.title {
font-size: 34rpx;
font-weight: 700;
color: #2c3e50;
}
/* 图例 */
.legend-row {
display: flex;
gap: 20rpx;
align-items: center;
}
.legend-item {
display: flex;
align-items: center;
gap: 6rpx;
}
.legend-color {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
}
.legend-text {
font-size: 24rpx;
color: #333;
font-weight: 500;
}
/* 竖向滚动区域 */
.monitors-scroll {
flex: 1;
max-height: calc(100vh - 100rpx);
}
.monitors-list {
display: flex;
flex-direction: column;
gap: 20rpx;
padding-bottom: 20rpx;
}
/* 卡片样式 */
.monitor-card {
background: #ffffff;
border-radius: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1rpx solid #e8ecf0;
}
.card-header {
padding: 20rpx 20rpx 10rpx 20rpx;
border-bottom: 1rpx solid #eef2f6;
display: flex;
align-items: center;
}
.card-header-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.point-name {
margin-bottom: 4rpx;
}
.point-text {
display: block;
font-size: 30rpx;
font-weight: 700;
color: #333333;
}
/* 工程、项目、设备：两列布局，超出显示省略号 */
.meta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rpx 8rpx;
width: 100%;
}
.meta-item {
display: block;
min-width: 0;
font-size: 24rpx;
color: #666666;
line-height: 1.3;
}
.meta-item-full {
grid-column: 1 / -1;
}
/* 参数区域 */
.params-section {
padding: 20rpx 16rpx 24rpx 16rpx;
flex: 1;
}
.double-row {
display: flex;
gap: 16rpx;
margin-bottom: 16rpx;
flex-wrap: wrap;
}
.double-row:last-child {
margin-bottom: 0;
}
.param-group {
flex: 1;
min-width: 200rpx;
background: transparent;
border-radius: 20rpx;
padding: 12rpx 8rpx 8rpx;
border: 1rpx solid #e8ecf0;
}
.param-title {
font-size: 24rpx;
color: #666666;
font-weight: 650;
margin-bottom: 4rpx;
display: flex;
align-items: center;
gap: 8rpx;
padding-left: 4rpx;
}
/* 三相数据垂直布局 */
.phase-vertical {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 0;
}
.phase-item-vertical {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rpx 4rpx;
}
.phase-value-vertical {
font-size: 28rpx;
font-weight: 700;
display: block;
letter-spacing: -0.5rpx;
}
/* 竖线分割 */
.phase-divider {
width: 1rpx;
background-color: #e0e4e8;
margin: 8rpx 0;
}
/* 文字溢出显示省略号 */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.event-icon {
position: relative;
width: 110rpx;
height: 110rpx;
border-radius: 12rpx;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
background-color: #376cf320;
}
</style>

66
pages/index/index.vue
View File

@@ -1,33 +1,20 @@
<template>
<Cn-page :loading="loading" noPadding>
<view slot="body" class="canneng-index">
<uni-nav-bar
rightWidth="300rpx"
leftWidth="300rpx"
dark
:fixed="true"
status-bar
background-color="#fff"
color="#111"
@clickRight="selectEngineering"
>
<uni-nav-bar rightWidth="300rpx" leftWidth="300rpx" dark :fixed="true" status-bar background-color="#fff"
color="#111" @clickRight="selectEngineering">
<template slot="left">
<text style="font-size: 32rpx; font-weight: 500">灿能物联</text>
</template>
<template slot="right">
<text class="hide-txt mr5" style="font-size: 28rpx"
>{{
userInfo.authorities === 'engineering_user'
? '创建工程'
: select.engineeringName || emptyEngineeringName
}}
<text class="hide-txt mr5" style="font-size: 28rpx">{{
userInfo.authorities === 'engineering_user'
? '创建工程'
: select.engineeringName || emptyEngineeringName
}}
</text>
<uni-icons
type="bottom"
size="16"
color="#111"
v-if="select.engineeringName && userInfo.authorities != 'engineering_user'"
></uni-icons>
<uni-icons type="bottom" size="16" color="#111"
v-if="select.engineeringName && userInfo.authorities != 'engineering_user'"></uni-icons>
</template>
</uni-nav-bar>
<view class="index">
@@ -48,7 +35,10 @@
</template>
<!-- 设备列表 -->
<template v-else v-show="engineeringList.length">
<view class="canneng-index-title mt20">设备列表</view>
<view class="canneng-index-title mt20">
<view>设备列表</view>
<view class="nav-menu nav-menu-btn boxClick" @click="jump">电能质量信息 </view>
</view>
<Device ref="device" :store="store" />
</template>
</view>
@@ -227,6 +217,11 @@ export default {
})
},
// 动态配置导航栏按钮
jump() {
uni.navigateTo({
url: `/pages/index/comp/monitoringPoint`,
})
}
},
onLoad() {
// 页面加载时，动态配置导航栏按钮
@@ -308,6 +303,7 @@ export default {
.canneng-index-title {
padding: 0 20rpx;
font-weight: 500;
display: flex;
}
/deep/ .uni-card {
@@ -317,4 +313,28 @@ export default {
/deep/ .uni-drawer__content {
width: 100vw !important;
}
.nav-menu {
height: 40rpx;
padding: 4rpx 20rpx;
// margin-left: 20rpx;
// margin-bottom: 20rpx;
line-height: 38rpx;
font-size: 24rpx;
border-radius: 8rpx;
background: #ebeaec;
color: #666;
&-active {
background: #dfe5f7;
color: $uni-theme-color;
}
&-btn {
background: $uni-theme-color;
color: #fff;
}
margin-left: auto;
}
</style>

126
pages/index/message1.vue
View File

@@ -2,13 +2,8 @@
<Cn-page :loading="loading" class="messageBox" style="padding-top: 10px">
<view slot="body" class="message">
<view class="tabsBox">
<uni-segmented-control
:current="current"
:values="items"
style-type="text"
active-color="#376cf3"
@clickItem="onClickItem"
/>
<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#376cf3"
@clickItem="onClickItem" />
<!-- 角标 -->
<view class="badge-container">
<span v-for="(item, index) in items" :key="index" class="badge">
@@ -17,59 +12,28 @@
</span>
</view>
<!-- 筛选条件 -->
<Cn-filterCriteria
ref="cnFilterCriteria"
:level="current === 0 ? 3 : current === 1 ? 3 : 2"
@select="select"
>
<picker
v-if="current === 0"
@change="bindPickerChange"
:value="sortIndex"
:range="sortOptions"
style="margin-left: auto"
>
<view class="sort-picker">
{{ sortOptions[sortIndex] }}排序
<uni-icons
custom-prefix="iconfont"
type="icon-paixu1"
size="10"
color="#2563EB"
></uni-icons>
<Cn-filterCriteria ref="cnFilterCriteria" :level="current === 0 ? 3 : current === 1 ? 3 : 2"
@select="select">
<picker v-if="current === 0" @change="bindPickerChange" :value="sortIndex" :range="sortOptions">
<view class="nav-menu nav-menu1">
<view class="nav-text">
{{ sortOptions[sortIndex] }}排序
</view>
<uni-icons type="bottom" size="14"></uni-icons>
</view>
</picker>
</Cn-filterCriteria>
</view>
<view class="content">
<Transient
ref="TransientRef"
v-if="current === 0"
:navHeight="navHeight"
:selectValue="selectValue"
@getDevCount="getDevCount"
/>
<SteadyState
ref="SteadyStateRef"
v-if="current === 1"
:navHeight="navHeight"
:selectValue="selectValue"
@getDevCount="getDevCount"
/>
<Alarm
ref="AlarmRef"
v-if="current === 2"
:navHeight="navHeight"
:selectValue="selectValue"
@getDevCount="getDevCount"
/>
<Run
ref="RunRef"
v-if="current === 3"
:navHeight="navHeight"
:selectValue="selectValue"
@getDevCount="getDevCount"
/>
<Transient ref="TransientRef" v-if="current === 0" :navHeight="navHeight" :selectValue="selectValue"
:sortIndex="sortIndex" @getDevCount="getDevCount" />
<SteadyState ref="SteadyStateRef" v-if="current === 1" :navHeight="navHeight" :selectValue="selectValue"
@getDevCount="getDevCount" />
<Alarm ref="AlarmRef" v-if="current === 2" :navHeight="navHeight" :selectValue="selectValue"
@getDevCount="getDevCount" />
<Run ref="RunRef" v-if="current === 3" :navHeight="navHeight" :selectValue="selectValue"
@getDevCount="getDevCount" />
</view>
</view>
</Cn-page>
@@ -100,7 +64,7 @@ export default {
sortOptions: ['发生时间', '暂降深度', '持续时间'],
}
},
onLoad() {},
onLoad() { },
mounted() {
this.setHeight()
},
@@ -204,9 +168,11 @@ export default {
},
bindPickerChange(e) {
this.sortIndex = e.detail.value
if (this.$refs.TransientRef) {
this.$refs.TransientRef.setSort(this.sortIndex)
}
setTimeout(() => {
if (this.$refs.TransientRef) {
this.$refs.TransientRef.init()
}
}, 0)
},
// 设置角标
getDevCount() {
@@ -275,13 +241,16 @@ export default {
<style lang="scss">
.messageBox {
overflow: hidden;
/deep/.tabsBox {
position: relative;
background-color: #fff;
.segmented-control {
// height: 40px;
background-color: #fff;
border-bottom: 1px solid #cccccc70;
.segmented-control__item {
align-items: baseline;
margin-top: 5px;
@@ -292,10 +261,12 @@ export default {
font-size: 30rpx !important;
color: rgb(96, 98, 102);
}
.segmented-control__item--text {
font-weight: bold;
padding: 0 0 5rpx;
}
.choose {
// padding: 20rpx;
// display: flex;
@@ -309,16 +280,20 @@ export default {
width: 90%;
margin: 20rpx auto;
}
.badge-container {
position: absolute;
top: -10rpx; /* 徽章向上偏移，与控件重叠 */
top: -10rpx;
/* 徽章向上偏移，与控件重叠 */
display: flex;
justify-content: space-around;
right: 0;
width: 100%;
height: 0;
pointer-events: none; /* 确保徽章不干扰点击事件 */
pointer-events: none;
/* 确保徽章不干扰点击事件 */
}
/deep/ .uni-badge--error {
background-color: #ff3b30;
}
@@ -326,6 +301,7 @@ export default {
.badge {
flex: 1;
text-align: center;
.uni-badge--x {
left: 70rpx;
}
@@ -339,4 +315,32 @@ export default {
white-space: nowrap;
}
}
.nav-menu {
display: flex;
align-items: center;
}
.nav-menu1 {
display: flex;
align-items: center;
max-width: calc(100vw - 150px);
}
/* 文字容器：单行溢出省略 */
.nav-text {
flex: 1;
overflow: hidden;
white-space: nowrap;
/* 强制不换行 */
text-overflow: ellipsis;
// -webkit-line-clamp: 1;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// text-overflow: ellipsis;
// word-break: break-all;
// white-space: nowrap;
line-height: 1;
}
</style>

6
pages/index/mine.vue
View File

@@ -52,6 +52,7 @@
<view class="mine-nav-label">项目管理</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('feedback')" v-if="userInfo.authorities !== 'tourist'">
<image mode="aspectFill" class="mine-nav-icon" src="/static/feedback.png" />
<view class="mine-nav-label">反馈列表</view>
@@ -81,12 +82,11 @@
<view class="mine-nav-label">关注工程配置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('transientSetting')" v-if="userInfo.authorities !== 'tourist'">
<!-- 调试内容配置 serverSetting-->
<!-- <view class="mine-nav" @click="jump('transientSetting')" v-if="userInfo.authorities !== 'tourist'">
<image mode="aspectFill" class="mine-nav-icon" src="/static/tongji.png" />
<view class="mine-nav-label">暂态统计配置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
</view> -->
<view class="mine-nav" @click="jump('setup')" style="border-bottom: none">
<image mode="aspectFill" class="mine-nav-icon" src="/static/setup.png" />
<view class="mine-nav-label">设置</view>