修改 表头下拉

This commit is contained in:
GGJ
2025-04-16 09:43:27 +08:00
parent 8bca1bfd38
commit 0063c53ec6
9 changed files with 146 additions and 80 deletions

View File

@@ -131,7 +131,9 @@ onMounted(() => {
} }
nextTick(() => { nextTick(() => {
resizeObserver.observe(tableHeader.value) resizeObserver.observe(tableHeader.value)
setTimeout(() => {
computedSearchRow() computedSearchRow()
},500)
}) })
}) })
onUnmounted(() => { onUnmounted(() => {

View File

@@ -6,6 +6,7 @@ interface MonitoringPoint {
pid: string pid: string
lineIds: string[] lineIds: string[]
showCheckBox: boolean showCheckBox: boolean
comFlag: number
} }
export const useMonitoringPoint = defineStore( export const useMonitoringPoint = defineStore(
@@ -16,9 +17,13 @@ export const useMonitoringPoint = defineStore(
lineName: '', lineName: '',
pid: '', pid: '',
lineIds: [], lineIds: [],
showCheckBox: false showCheckBox: false,
comFlag: 0
}) })
const setValue = (key: keyof Pick<MonitoringPoint, 'lineId' | 'lineName' | 'lineIds' | 'pid'>, val: any) => { const setValue = (
key: keyof Pick<MonitoringPoint, 'lineId' | 'lineName' | 'lineIds' | 'pid' | 'comFlag'>,
val: any
) => {
state[key] = val state[key] = val
} }
const setShowCheckBox = (val: boolean) => { const setShowCheckBox = (val: boolean) => {

View File

@@ -47,7 +47,7 @@ export default class SocketService {
const response = await fetch('/') const response = await fetch('/')
const mqttUrl = response.headers.get('X-Mqtt-Url') const mqttUrl = response.headers.get('X-Mqtt-Url')
setTimeout(() => { setTimeout(() => {
const url = (mqttUrl || 'ws://192.168.1.67:10407/api/pushMessage/') + id const url = (mqttUrl || 'ws://192.168.1.31:10407/api/pushMessage/') + id
this.ws = new WebSocket(url) this.ws = new WebSocket(url)
this.ws.onopen = () => this.handleOpen() this.ws.onopen = () => this.handleOpen()

View File

@@ -130,7 +130,7 @@
<template #append>MVA</template> <template #append>MVA</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item for="-" label="装机容量:"> <el-form-item for="-" label="装机容量:" prop="ratePower">
<el-input <el-input
v-model.trim="form.ratePower" v-model.trim="form.ratePower"
oninput="value=value.replace(/[^\-?\d.]/g,'') oninput="value=value.replace(/[^\-?\d.]/g,'')
@@ -753,6 +753,7 @@ const rules = ref({
} }
], ],
devId: [{ required: true, message: '请选择关联终端', trigger: 'change' }], devId: [{ required: true, message: '请选择关联终端', trigger: 'change' }],
ratePower: [{ required: true, message: '请输入装机容量', trigger: 'blur' }],
lineId: [{ required: true, message: '请选择关联监测点', trigger: 'change' }], lineId: [{ required: true, message: '请选择关联监测点', trigger: 'change' }],
agreementCapacity: [{ required: true, message: '请选择用户协议容量', trigger: 'blur' }], agreementCapacity: [{ required: true, message: '请选择用户协议容量', trigger: 'blur' }],
nonlinearDeviceType: [{ required: true, message: '请选择非线性终端类型', trigger: 'change' }], nonlinearDeviceType: [{ required: true, message: '请选择非线性终端类型', trigger: 'change' }],

View File

@@ -101,7 +101,7 @@ const tableStore = new TableStore({
} }
}, },
{ field: 'responsibleDepartment', title: '归口管理部门', minWidth: 130 }, // { field: 'responsibleDepartment', title: '归口管理部门', minWidth: 130 },
{ field: 'ratePower', title: '装机容量(MW)', minWidth: 130 }, { field: 'ratePower', title: '装机容量(MW)', minWidth: 130 },
{ {
field: 'createBy', field: 'createBy',

View File

@@ -35,13 +35,13 @@
<el-tab-pane label="谐波频谱" name="4" lazy v-if="!isReload"> <el-tab-pane label="谐波频谱" name="4" lazy v-if="!isReload">
<Xiebopingpu v-if="activeName == '4'" /> <Xiebopingpu v-if="activeName == '4'" />
</el-tab-pane> </el-tab-pane>
<!-- <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload "> <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload && VITE_FLAG">
<Gaojingshujutongji v-if=" activeName == '5'"/> <Gaojingshujutongji v-if="activeName == '5'" />
</el-tab-pane> --> </el-tab-pane>
<el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload"> <el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload">
<Yunxingzhuangtai v-if="activeName == '6'" /> <Yunxingzhuangtai v-if="activeName == '6'" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="实时数据" name="7" lazy v-if="!isReload"> <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload && !VITE_FLAG">
<Shishishuju v-if="activeName == '7'" /> <Shishishuju v-if="activeName == '7'" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -70,10 +70,11 @@ import Xiebopingpu from './xiebopingpu/index.vue'
import Gaojingshujutongji from './gaojingshujutongji/index.vue' import Gaojingshujutongji from './gaojingshujutongji/index.vue'
import Yunxingzhuangtai from './yunxingzhuangtai/index.vue' import Yunxingzhuangtai from './yunxingzhuangtai/index.vue'
import Shishishuju from './shishishuju/index.vue' import Shishishuju from './shishishuju/index.vue'
const VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
import router from '@/router' import router from '@/router'
defineOptions({ defineOptions({
// name: 'harmonic-boot/monitor/online' name: 'harmonic-boot/monitor/online'
}) })
const monitoringPoint = useMonitoringPoint() const monitoringPoint = useMonitoringPoint()
@@ -94,6 +95,7 @@ const handleNodeClick = (data: any, node: any) => {
monitoringPoint.setValue('lineId', data.id) monitoringPoint.setValue('lineId', data.id)
monitoringPoint.setValue('pid', data.pids) monitoringPoint.setValue('pid', data.pids)
monitoringPoint.setValue('lineName', data.alias) monitoringPoint.setValue('lineName', data.alias)
monitoringPoint.setValue('comFlag', data.comFlag)
} }
} }
const handleCheckChange = (data: any, node: any) => { const handleCheckChange = (data: any, node: any) => {

View File

@@ -345,6 +345,7 @@ import spectrum from './spectrum.vue'
import trend from './trend.vue' import trend from './trend.vue'
import { getLineDetail } from '@/api/device-boot/communicate' import { getLineDetail } from '@/api/device-boot/communicate'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { ElMessage } from 'element-plus'
// import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery' // import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
const height = ref(mainHeight(580)) const height = ref(mainHeight(580))
const monitoringPoint = useMonitoringPoint() const monitoringPoint = useMonitoringPoint()
@@ -755,6 +756,12 @@ const init = () => {
console.error('WebSocket 客户端实例不存在') console.error('WebSocket 客户端实例不存在')
return return
} }
if (monitoringPoint.state.comFlag == 0) {
return ElMessage({
message: '所选监测点离线!',
type: 'warning'
})
}
let pids = monitoringPoint.state.pid.split(',') let pids = monitoringPoint.state.pid.split(',')
dataSocket.socketServe.connect(`${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`) dataSocket.socketServe.connect(`${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`)
dataSocket.socketServe.registerCallBack('message', (res: any) => { dataSocket.socketServe.registerCallBack('message', (res: any) => {

View File

@@ -121,7 +121,7 @@ const tableStore = new TableStore({
title: '通讯状态', title: '通讯状态',
render: 'tag', render: 'tag',
minWidth: 100, minWidth: 100,
effect: 'dark', // effect: 'dark',
custom: { custom: {
'正常': 'success', '正常': 'success',
'中断': 'danger', '中断': 'danger',

View File

@@ -1,6 +1,5 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<TableHeader area showExport> <TableHeader area showExport>
<template #select> <template #select>
<!-- <el-form-item label="统计类型:"> <!-- <el-form-item label="统计类型:">
@@ -11,55 +10,100 @@
</el-form-item> --> </el-form-item> -->
<el-form-item label="电压等级:"> <el-form-item label="电压等级:">
<el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable <el-select
placeholder="请选择电压等级" value-key="id"> v-model="tableStore.table.params.scale"
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item"> filterable
</el-option> multiple
collapse-tags
clearable
placeholder="请选择电压等级"
value-key="id"
>
<el-option
v-for="item in voltageleveloption"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="终端厂家:"> <el-form-item label="终端厂家:">
<el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags <el-select
clearable placeholder="请选择终端厂家" value-key="id"> v-model="tableStore.table.params.manufacturer"
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item"> filterable
</el-option> multiple
collapse-tags
clearable
placeholder="请选择终端厂家"
value-key="id"
>
<el-option
v-for="item in terminaloption"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="干扰源类型:"> <el-form-item label="干扰源类型:">
<el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable <el-select
placeholder="请选择干扰源类型" value-key="id"> v-model="tableStore.table.params.loadType"
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item"> filterable
</el-option> multiple
collapse-tags
clearable
placeholder="请选择干扰源类型"
value-key="id"
>
<el-option
v-for="item in interfereoption"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="通讯状态:"> <el-form-item label="通讯状态:">
<el-select v-model="tableStore.table.params.comFlag" filterable multiple collapse-tags clearable <el-select
placeholder="请选择通讯状态"> v-model="tableStore.table.params.comFlag"
<el-option v-for="item in communicationstatus" :key="item.value" :label="item.label" filterable
:value="item.value"> multiple
</el-option> collapse-tags
clearable
placeholder="请选择通讯状态"
>
<el-option
v-for="item in communicationstatus"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="终端状态:"> <el-form-item label="终端状态:">
<el-select v-model="tableStore.table.params.runFlag" filterable multiple collapse-tags clearable <el-select
placeholder="请选择终端状态"> v-model="tableStore.table.params.runFlag"
<el-option v-for="item in terminalstatus" :key="item.value" :label="item.label" filterable
:value="item.value"> multiple
</el-option> collapse-tags
clearable
placeholder="请选择终端状态"
>
<el-option
v-for="item in terminalstatus"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="评价筛选"> <el-form-item label="评价筛选">
<el-input v-model="tableStore.table.params.evaluate" clearable placeholder="输入关键字筛选" /> <el-input v-model="tableStore.table.params.evaluate" clearable placeholder="输入关键字筛选" />
</el-form-item> </el-form-item>
</template> </template>
</TableHeader> </TableHeader>
<Table ref="tableRef" /> <Table ref="tableRef" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -73,19 +117,19 @@ defineOptions({
name: 'harmonic-boot/run/terminalmessage' name: 'harmonic-boot/run/terminalmessage'
}) })
const view = ref(true) const view = ref(true)
const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type", "Voltage_Level", "Load_Type"]) const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand') const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
const terminaloption = dictData.getBasicData('Dev_Manufacturers') const terminaloption = dictData.getBasicData('Dev_Manufacturers')
const interfereoption = dictData.getBasicData('Interference_Source') const interfereoption = dictData.getBasicData('Interference_Source')
const communicationstatus = [ const communicationstatus = [
{ value: 0, label: "中断" }, { value: 0, label: '中断' },
{ value: 1, label: "正常" }, { value: 1, label: '正常' }
] ]
const terminalstatus = [ const terminalstatus = [
{ value: 0, label: "投运" }, { value: 0, label: '投运' },
{ value: 1, label: "热备用" }, { value: 1, label: '热备用' },
{ value: 2, label: "停运" }, { value: 2, label: '停运' }
] ]
const tableStore = new TableStore({ const tableStore = new TableStore({
url: '/device-boot/runManage/getRuntimeData', url: '/device-boot/runManage/getRuntimeData',
@@ -100,17 +144,17 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
} }
}, },
{ field: 'areaName', title: '区域', minWidth: 100}, { field: 'areaName', title: '区域', minWidth: 100 },
{ field: 'gdName', title: '地级区' ,minWidth: 100}, { field: 'gdName', title: '地级区', minWidth: 100 },
{ {
field: 'bdName', field: 'bdName',
title: '供电公司', title: '供电公司',
minWidth: 100 minWidth: 100
}, },
{ field: 'manufacturer', title: '厂家' , minWidth: 100}, { field: 'manufacturer', title: '厂家', minWidth: 100 },
{ field: 'devName', title: '终端名称', minWidth: 80 }, { field: 'devName', title: '终端名称', minWidth: 80 },
{ field: 'ip', title: '网络参数' , minWidth: 100}, { field: 'ip', title: '网络参数', minWidth: 100 },
{ field: 'loginTime', title: '投运时间', minWidth: 100 }, { field: 'loginTime', title: '投运时间', minWidth: 100 },
{ field: 'devType', title: '终端型号', minWidth: 100 }, { field: 'devType', title: '终端型号', minWidth: 100 },
{ field: 'port', title: '端口', minWidth: 100 }, { field: 'port', title: '端口', minWidth: 100 },
@@ -118,51 +162,61 @@ const tableStore = new TableStore({
{ {
field: 'runFlag', field: 'runFlag',
title: '终端状态', title: '终端状态',
effect: 'dark', // effect: 'dark',
render: 'tag',minWidth: 100, render: 'tag',
minWidth: 100,
custom: { custom: {
'投运': 'success', 投运: 'success',
'热备用': 'warning', 热备用: 'warning',
'停运': 'danger', 停运: 'danger'
}
},
}, },
{ {
field: 'comFlag', field: 'comFlag',
title: '通讯状态', title: '通讯状态',
render: 'tag', render: 'tag',
effect: 'dark',minWidth: 100, // effect: 'dark',
minWidth: 100,
custom: { custom: {
'正常': 'success', 正常: 'success',
'中断': 'danger', 中断: 'danger'
}
},
}, },
{ {
field: 'onlineEvaluate', field: 'onlineEvaluate',
title: '在线率评价', title: '在线率评价',
render: 'tag', render: 'tag',
effect: 'dark',minWidth: 100, // effect: 'dark',
minWidth: 100,
custom: { custom: {
'/': 'info', '/': 'info',
'优': 'success', : 'success',
'良': 'warning', : 'warning',
'差': 'danger', : 'danger'
}
}, }
},
], ],
loadCallback: () => { loadCallback: () => {
tableStore.table.data.map((item: any) => { tableStore.table.webPagingData.map((item1: any) => {
item.onlineEvaluate == 3.14159 ? item.onlineEvaluate = '/' : item.onlineEvaluate <= 0.6 ? item.onlineEvaluate = '差' : item.onlineEvaluate <= 0.9 ? item.onlineEvaluate = '良' : item.onlineEvaluate <= 1 ? item.onlineEvaluate = '优' : '/' item1.map((item: any) => {
item.onlineEvaluate == 3.14159
? (item.onlineEvaluate = '/')
: item.onlineEvaluate <= 0.6
? (item.onlineEvaluate = '差')
: item.onlineEvaluate <= 0.9
? (item.onlineEvaluate = '良')
: item.onlineEvaluate <= 1
? (item.onlineEvaluate = '优')
: '/'
}) })
})
} }
}) })
tableStore.table.params.statisticalType = classificationData[0] tableStore.table.params.statisticalType = classificationData[0]
tableStore.table.params.serverName = "harmonic-boot" tableStore.table.params.serverName = 'harmonic-boot'
tableStore.table.params.comFlag = [] tableStore.table.params.comFlag = []
tableStore.table.params.runFlag = [] tableStore.table.params.runFlag = []
tableStore.table.params.evaluate = '' tableStore.table.params.evaluate = ''
@@ -177,9 +231,4 @@ provide('tableStore', tableStore)
onMounted(() => { onMounted(() => {
tableStore.index() tableStore.index()
}) })
</script> </script>