xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

单站监控-设备监控-动态三级菜单,点位清单排序

Browse Source
This commit is contained in:
白菜
2025-10-15 14:26:06 +08:00
parent fef1704cbd
commit fb0eda4565
6 changed files with 91 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/ems/dzjk.js
View File

@ -14,7 +14,13 @@ export function getSevenChargeData({siteId,startDate,endDate}) {
method: 'get' method: 'get'
}) })
} }
// 获取站点包含的设备种类 用来判断单站监控设备监控的菜单栏展示
export function getSiteAllDeviceCategory(siteId) {
return request({
url: `/ems/siteConfig/getSiteAllDeviceCategory?siteId=${siteId}`,
method: 'get'
})
}
//获取pcs、实时运行头部的设备信息 //获取pcs、实时运行头部的设备信息
export function getRunningHeadInfo(siteId) { export function getRunningHeadInfo(siteId) {
return request({ return request({

4
src/api/ems/site.js
View File

@ -64,9 +64,9 @@ export function getDeviceList(siteId) {
} }
//获取设备点位table //获取设备点位table
export function getDevicePointList({siteId,deviceId,deviceCategory,pageNum,pageSize,dataPointName='',sortMethod,dataPoint,lower,upper}) { export function getDevicePointList({siteId,deviceId,deviceCategory,pageNum,pageSize,dataPointName='',sortMethod,sortData,dataPoint,lower,upper}) {
return request({ return request({
url: `/ems/siteConfig/getDevicePointList?siteId=${siteId}&deviceId=${deviceId}&pageNum=${pageNum}&pageSize=${pageSize}&deviceCategory=${deviceCategory}&dataPointName=${dataPointName}&dataPoint=${dataPoint}&lower=${lower}&upper=${upper}&pageNum=${pageNum}&sortMethod=${sortMethod}`, url: `/ems/siteConfig/getDevicePointList?siteId=${siteId}&deviceId=${deviceId}&pageNum=${pageNum}&pageSize=${pageSize}&deviceCategory=${deviceCategory}&dataPointName=${dataPointName}&dataPoint=${dataPoint}&lower=${lower}&upper=${upper}&pageNum=${pageNum}&sortMethod=${sortMethod}&sortData=${sortData}`,
method: 'get', method: 'get',
}) })
} }

14
src/router/ems.js
View File

@ -42,43 +42,43 @@ export const dzjk=[
path: 'ssyx', path: 'ssyx',
component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
name: 'DzjkSbjkSsyx', name: 'DzjkSbjkSsyx',
meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'}, meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',categoryName:'SSYX'},
}, },
{ {
path: 'pcs', path: 'pcs',
component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
name: 'DzjkSbjkPcs', name: 'DzjkSbjkPcs',
meta: { title: 'PCS',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'}, meta: { title: 'PCS',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',categoryName:'PCS'},
}, },
{ {
path: 'bmszl', path: 'bmszl',
component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
name: 'DzjkSbjkBmszl', name: 'DzjkSbjkBmszl',
meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'}, meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk', categoryName:'STACK'},
}, },
{ {
path: 'bmsdcc', path: 'bmsdcc',
component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
name: 'DzjkSbjkBmsdcc', name: 'DzjkSbjkBmsdcc',
meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'}, meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',categoryName:'CLUSTER'},
}, },
{ {
path: 'dtdc', path: 'dtdc',
component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
name: 'DzjkSbjkDtdc', name: 'DzjkSbjkDtdc',
meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'}, meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',categoryName:'BATTERY'},
}, },
{ {
path: 'db', path: 'db',
component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
name: 'DzjkSbjkDb', name: 'DzjkSbjkDb',
meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'}, meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',categoryName:'AMMETER'},
}, },
{ {
path: 'yl', path: 'yl',
component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'), component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
name: 'DzjkSbjkYl', name: 'DzjkSbjkYl',
meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'}, meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',categoryName:'COOLING'},
} }
] ]
}, },

15
src/store/modules/ems.js
View File

@ -1,8 +1,9 @@
import {getAlarmDetailList} from'@/api/ems/dzjk' import {getAlarmDetailList,getSiteAllDeviceCategory} from'@/api/ems/dzjk'
const ems = { const ems = {
state: { state: {
dzjkAlarmLighting:false,//单站监控 告警统计红点标志 dzjkAlarmLighting:false,//单站监控 告警统计红点标志
zdList:[], zdList:[],
zdDeviceCategoryOptions:{},//站点各个站点包含的设备种类 {021_DDS_01:["BATTERY","CLUSTER","STACK", "DH", "AMMETER", "PCS", "XF"],021_DDS_02:[]...}
workStatusOptions:{'0':'正常','1':'异常','2':'停止'},//工作状态 workStatusOptions:{'0':'正常','1':'异常','2':'停止'},//工作状态
deviceStatusOptions:{'0':'在线','1':'离线','2':'维修中'},//设备状态 deviceStatusOptions:{'0':'在线','1':'离线','2':'维修中'},//设备状态
gridStatusOptions:{'0':'并网','1':'未并网'},//并网状态 gridStatusOptions:{'0':'并网','1':'未并网'},//并网状态
@ -25,15 +26,25 @@ const ems = {
SET_DZJK_ALARM_LIGHTING(state, status) { SET_DZJK_ALARM_LIGHTING(state, status) {
state.dzjkAlarmLighting = status state.dzjkAlarmLighting = status
}, },
SET_ZD_DEVICE_CATEGORY_OPTIONS(state,{siteId,data}){
state.zdDeviceCategoryOptions = Object.assign({}, state.zdDeviceCategoryOptions, {[siteId]:data})
}
}, },
actions: { actions: {
//查询站点的所有待处理0的告警 存在展示红点标志 //查询站点的所有待处理0的告警 存在展示红点标志
getSiteAlarmNum({state,commit},siteId){ getSiteAlarmNum({state,commit},siteId){
console.log('页面进入单站监控或切换站点ID或在告警统计页面调用了告警list接口',siteId)
getAlarmDetailList({status:0,siteId,pageSize:10,pageNum:1,deviceId:'',alarmLevel:'',alarmStartTime:'',alarmEndTime:''}).then(response=>{ getAlarmDetailList({status:0,siteId,pageSize:10,pageNum:1,deviceId:'',alarmLevel:'',alarmStartTime:'',alarmEndTime:''}).then(response=>{
commit('SET_DZJK_ALARM_LIGHTING',!!response?.total || false) commit('SET_DZJK_ALARM_LIGHTING',!!response?.total || false)
}) })
},
getSiteDeviceCategory({state,commit},siteId){
getSiteAllDeviceCategory(siteId).then(response=>{
let data = response?.data || [];
data.unshift('SSYX');
commit('SET_ZD_DEVICE_CATEGORY_OPTIONS',{siteId,data})
})
} }
} }
} }

68
src/views/ems/dzjk/sbjk/index.vue
View File

@ -1,38 +1,66 @@
<template> <template>
<div class="ems-dashboard-editor-container ems-third-menu-container"> <div class="ems-dashboard-editor-container ems-third-menu-container" v-loading="loading">
<el-menu <el-menu
class="ems-third-menu" class="ems-third-menu"
:default-active="$route.name" :default-active="$route.name"
background-color="#ffffff" background-color="#ffffff"
text-color="#666666" text-color="#666666"
active-text-color="#ffffff" active-text-color="#ffffff"
> >
<el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'"> <el-menu-item :index="item.name" v-for="(item,index) in categoryRouter" :key="index+'dzjkChildrenRoute'">
<router-link style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}"> <router-link style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
{{item.meta.title}} {{item.meta.title}}
</router-link> </router-link>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
<div class="ems-content-container ems-content-container-padding sbjk-ems-content-container"> <div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
<keep-alive> <keep-alive>
<router-view></router-view> <router-view></router-view>
</keep-alive> </keep-alive>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { dzjk } from '@/router/ems' import { dzjk } from '@/router/ems'
import {mapState} from "vuex";
const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由 const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由
export default { export default {
name:'DzjkSbjk', name:'DzjkSbjk',
mixins:[getQuerySiteId],
computed:{
...mapState({
zdDeviceCategoryOptions: state => state.ems.zdDeviceCategoryOptions,
}),
locationSiteCategory(){
return this.zdDeviceCategoryOptions[this.siteId] || []
},
categoryRouter(){
const routeData =this.childrenRoute.filter(item=>this.locationSiteCategory.includes(item.meta.categoryName))
if(this.siteId && routeData.length > 0 && this.locationSiteCategory && this.locationSiteCategory.length >1){
const locationPageCategoryName = this.$route.meta?.categoryName || ''
if(!routeData.some(item=> item.meta.categoryName===locationPageCategoryName)){
this.$router.replace({path:'/dzjk/sbjk/ssyx',query:this.$route.query})
}
}
return routeData
}
},
data(){ data(){
return { return {
childrenRoute, childrenRoute,
activeMenu:'' activeMenu:'',
loading:false,
} }
}, },
methods:{
init(){
this.loading=true
this.$store.dispatch('getSiteDeviceCategory',this.siteId).finally(()=>this.loading=false)
}
}
} }
</script> </script>

30
src/views/ems/site/sblb/PointTable.vue
View File

@ -58,8 +58,8 @@
max-height="400px" max-height="400px"
stripe stripe
style="width: 100%" style="width: 100%"
:default-sort="{ order: 'descending' }" :default-sort="defaultSort"
@sort-change="changeSort" @sort-change="handleSortChange"
> >
<el-table-column label="数据点位" prop="dataPoint"> </el-table-column> <el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
<el-table-column label="数据点位名称" prop="pointName"> <el-table-column label="数据点位名称" prop="pointName">
@ -84,7 +84,7 @@
> >
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="单位" prop="unit"></el-table-column> <el-table-column label="单位" prop="dataUnit"></el-table-column>
<el-table-column label="更新时间" prop="updateTime" sortable="custom"> <el-table-column label="更新时间" prop="updateTime" sortable="custom">
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -124,8 +124,8 @@ export default {
this.pageNum = 1; this.pageNum = 1;
this.totalSize = 0; this.totalSize = 0;
this.form = { this.form = {
valueSortMethod: "desc", //升序不传或者asc、降序desc）
sortMethod: "desc", //升序不传或者asc、降序desc） sortMethod: "desc", //升序不传或者asc、降序desc）
sortData:this.defaultSort.prop,
dataPointName: "", //点位名称 dataPointName: "", //点位名称
dataPoint: "", //点位名称 dataPoint: "", //点位名称
lower: "", // lower: "", //
@ -137,10 +137,12 @@ export default {
}, },
data() { data() {
return { return {
// 默认排序
defaultSort: { prop: "updateTime", order: "descending" },
show: false, show: false,
loading: false, loading: false,
form: { form: {
valueSortMethod: "desc", //最新值升序不传或者asc、降序desc） sortData: "updateTime", //最新值升序不传或者asc、降序desc）
sortMethod: "desc", //升序不传或者asc、降序desc） sortMethod: "desc", //升序不传或者asc、降序desc）
dataPointName: "", //点位名称 dataPointName: "", //点位名称
dataPoint: "", //点位名称 dataPoint: "", //点位名称
@ -163,15 +165,11 @@ export default {
pointName && pointName &&
this.$refs.pointChart.showChart({ pointName, deviceName, deviceId }); this.$refs.pointChart.showChart({ pointName, deviceName, deviceId });
}, },
changeSort(c) { handleSortChange(column) {
console.log("切换排序方式", c); this.form.sortData = column.prop
if (c.prop === "updateTime" && c.order) { this.form.sortMethod = column.order === "descending" ? "desc" : "asc";
this.form.sortMethod = c.order === "descending" ? "desc" : "asc"; console.log("切换排序方式", column, this.form);
this.getData(); this.getData();
} else if (c.prop === "pointValue" && c.order) {
this.form.valueSortMethod = c.order === "descending" ? "desc" : "asc";
this.getData();
}
}, },
search() { search() {
this.pageNum = 1; this.pageNum = 1;
@ -194,7 +192,7 @@ export default {
pageNum, pageNum,
pageSize, pageSize,
form: { form: {
valueSortMethod, sortData,
sortMethod, sortMethod,
dataPointName, dataPointName,
dataPoint, dataPoint,
@ -208,7 +206,7 @@ export default {
deviceCategory, deviceCategory,
pageNum, pageNum,
pageSize, pageSize,
valueSortMethod, sortData,
sortMethod, sortMethod,
dataPointName, dataPointName,
dataPoint, dataPoint,