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

实时数据页面绘制

Browse Source
This commit is contained in:
zhujiyan
2024-07-03 19:31:43 +08:00
parent 8f1290111e
commit fbe6d6fae1
9 changed files with 1556 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/tree/device.vue
View File

@@ -34,6 +34,7 @@
<el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
<el-collapse-item title="治理设备" :name="0">
<el-tree
style="min-height: calc(100vh - 250px)"
ref="treeRef1"
:props="defaultProps"
highlight-current
@@ -58,6 +59,7 @@
</el-collapse-item>
<el-collapse-item title="便携式设备" :name="1">
<el-tree
style="min-height: calc(100vh - 250px)"
ref="treeRef2"
:props="defaultProps"
highlight-current
@@ -170,7 +172,7 @@ const changeDevice = (val: any) => {
let arr2: any = []
bxsDeviceData.value.forEach((item: any) => {
// item.children.forEach((item2: any) => {
arr2.push(item)
arr2.push(item)
// })
})
if (val == 0) {

9
src/components/tree/govern/deviceInfoTree.vue
View File

@@ -1,7 +1,7 @@
<template>
<Tree
ref="treRef"
@check-change="handleCheckChange"
@checkTreeNodeChange="handleCheckChange"
:default-checked-keys="defaultCheckedKeys"
:show-checkbox="props.showCheckbox"
:data="tree"
@@ -96,11 +96,10 @@ const getTreeList = (list:any) => {
}
})
}
const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
//接收tree选择的数据后传递给父级组件
const handleCheckChange = (data: any) => {
emit('checkChange', {
data,
checked,
indeterminate
data
})
}
defineExpose({getTreeList})

8
src/components/tree/index.vue
View File

@@ -31,7 +31,7 @@
ref='treeRef'
:props='defaultProps'
highlight-current
@check-change="checkTreeNodeChange"
:filter-node-method='filterNode'
node-key='id'
v-bind='$attrs'
@@ -55,6 +55,7 @@
<script lang='ts' setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { emit } from 'process';
import { ref, watch } from 'vue'
defineOptions({
@@ -77,6 +78,7 @@ const defaultProps = {
label: 'name',
value: 'id'
}
const emit = defineEmits(['checkTreeNodeChange'])
watch(filterText, val => {
treeRef.value!.filter(val)
})
@@ -88,6 +90,10 @@ const filterNode = (value: string, data: any) => {
if (!value) return true
return data.name.includes(value)
}
const checkTreeNodeChange=()=>{
console.log( treeRef.value?.getCheckedNodes(),"ikkkkkiisiiisis");
emit('checkTreeNodeChange',treeRef.value?.getCheckedNodes())
}
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef })
</script>

2
src/components/tree/point.vue
View File

@@ -34,6 +34,7 @@
<el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
<el-collapse-item title="治理设备" :name="0">
<el-tree
style="min-height: calc(100vh - 250px)"
ref="treeRef1"
:props="defaultProps"
highlight-current
@@ -58,6 +59,7 @@
</el-collapse-item>
<el-collapse-item title="便携式设备" :name="1">
<el-tree
style="min-height: calc(100vh - 250px)"
ref="treeRef2"
:props="defaultProps"
highlight-current

110
src/views/govern/device/control/index.vue
View File

@@ -37,7 +37,15 @@
v-for="(item, index) in deviceData.dataSetList"
:key="index"
></el-tab-pane>
<el-form :inline="true" style="white-space: nowrap; margin-top: 10px">
<el-form
:inline="true"
style="white-space: nowrap; margin-top: 10px"
v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1
"
>
<el-form-item label="指标">
<el-input
v-model="formInline.searchValue"
@@ -46,7 +54,7 @@
placeholder="请输入关键词"
></el-input>
</el-form-item>
<el-form-item label="日期" v-if="dataSet.indexOf('_history') > -1">
<el-form-item label="日期" v-if="dataSet.indexOf('_history') != -1">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item>
@@ -57,17 +65,14 @@
style="overflow: auto"
:style="{ height: tableHeight }"
v-loading="tableLoading"
v-if="dataSet.length > 1"
v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1
"
>
<!-- 卡片 -->
<div
class="content"
v-if="
dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
dataSet.indexOf('_event') == -1
"
>
<!-- 循环渲染的card 最新数据/历史数据显示 -->
<div class="content">
<el-card class="box-card" v-for="(item, index) in tableData" :key="index">
<template #header>
<div class="clearfix">
@@ -153,6 +158,22 @@
layout="total, sizes, prev, pager, next, jumper"
:total="formInline.total"
></el-pagination>
<!-- 趋势数据 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_trenddata') != -1">
趋势数据
<Trend></Trend>
</div>
<!-- 实时数据 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
实时数据
<RealTime></RealTime>
</div>
<!-- 暂态事件 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_event') != -1">
暂态事件
<Event></Event>
</div>
<div v-if="!tableData" style="height: 42px"></div>
<!-- <el-tab-pane lazy label="趋势数据" name="0">
<div style="height:calc(100vh - 330px);overflow: auto;border:1px solid red;"></div>
@@ -178,10 +199,14 @@ import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictT
import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
import { getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, nextTick } from 'vue'
import { ref, reactive, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import DatePicker from '@/components/form/datePicker/index.vue'
import Trend from './tabs/trend.vue'
import RealTime from './tabs/realtime.vue'
import Event from './tabs/event.vue'
import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
defineOptions({
name: 'govern/device/control'
})
@@ -208,6 +233,43 @@ const formInline = reactive({
lineId: ''
})
const detail = ref<any>(null)
// WebSocket
const socket: any = ref(null)
const url = 'wss://your-websocket-url'
//连接websocket
const connectWebSocket = () => {
socket.value = new WebSocket(url)
socket.value.onopen = () => {
console.log('WebSocket connected')
socket.value.isConnected = true
}
socket.value.onerror = (error: any) => {
console.error('WebSocket error:', error)
}
socket.value.onmessage = (message: any) => {
console.log('Received message:', message.data)
}
socket.value.onclose = () => {
console.log('WebSocket disconnected')
socket.value.isConnected = false
}
}
//建立连接发送消息
const sendMessage = () => {
if (socket.value.isConnected) {
socket.value.send('Your message here')
}
}
//关闭websocket
const disconnectWebSocket = () => {
if (socket.value.isConnected) {
socket.value.close()
}
}
const getDeviceDataTrend = (e: any) => {
detail.value = {
lineId: formInline.lineId,
@@ -223,6 +285,7 @@ const handleSizeChange = (val: number) => {
formInline.pageSize = val
handleClick()
}
//树节点点击事件
const nodeClick = async (e: anyObj) => {
if (!e) {
loading.value = false
@@ -241,15 +304,19 @@ const nodeClick = async (e: anyObj) => {
} else {
res.data.dataSetList.forEach((item: any) => {
console.log(item.type, '777777777')
//历史
if (item.type === 'history') {
item.id = item.id + '_history'
}
//趋势数据
if (item.type === 'trenddata') {
item.id = item.id + '_trenddata'
}
//实时数据
if (item.type === 'realtimedata') {
item.id = item.id + '_realtimedata'
}
//暂态事件
if (item.type === 'event') {
item.id = item.id + '_event'
}
@@ -263,6 +330,7 @@ const nodeClick = async (e: anyObj) => {
loading.value = false
}
}
//tab点击事件
const handleClick = async (tab?: any) => {
tableLoading.value = true
if (tab) {
@@ -271,7 +339,7 @@ const handleClick = async (tab?: any) => {
}
// setTimeout(() => {
//查询历史模块数据
if (dataSet.value.indexOf('_history') > -1) {
if (dataSet.value.indexOf('_history') != -1) {
console.log('_history')
formInline.startTime = datePickerRef.value.timeValue[0]
formInline.endTime = datePickerRef.value.timeValue[1]
@@ -284,15 +352,16 @@ const handleClick = async (tab?: any) => {
})
}
//查询数据趋势数据
if (dataSet.value.indexOf('_trenddata') > -1) {
console.log(dataSet.value.indexOf('_trenddata'), '-------')
if (dataSet.value.indexOf('_trenddata') != -1) {
console.log('_trenddata')
}
//查询实时数据
if (dataSet.value.indexOf('_realtimedata') > -1) {
if (dataSet.value.indexOf('_realtimedata') != -1) {
console.log('_realtimedata')
}
//查询暂事件
if (dataSet.value.indexOf('_event') > -1) {
//查询暂态事件
if (dataSet.value.indexOf('_event') != -1) {
console.log('_event')
} else {
formInline.id = dataSet.value
@@ -352,6 +421,9 @@ const openGroup = () => {
})
})
}
onMounted(() => {
connectWebSocket()
})
</script>
<style lang="scss">

146
src/views/govern/device/control/tabs/components/tableInfo.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<div>
<vxe-table
border
show-footer
ref="tableRef"
v-bind="defaultAttribute"
height="70"
align="center"
stripe
:loading="loading"
:print-config="{}"
:column-config="{ resizable: false, width: 90 }"
:data="tableData"
style="width: 100%; margin-top: 10px"
>
<div v-if="tableIndex == 0">
<vxe-colgroup title="电压有效值(kV)">
<vxe-column field="a" title="AB相"></vxe-column>
<vxe-column field="b" title="BC相"></vxe-column>
<vxe-column field="c" title="CA相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="电流有效值(A)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="基波电压幅值(kV)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="基波电压相位(°)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="基波电流幅值(A)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="基波电流相位(°)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
</vxe-colgroup>
</div>
<div v-if="tableIndex == 1">
<vxe-colgroup title="电压偏差(%)">
<vxe-column field="a" title="AB相"></vxe-column>
<vxe-column field="b" title="BC相"></vxe-column>
<vxe-column field="c" title="CA相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="电压总谐波畸变率(%)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="BC相"></vxe-column>
<vxe-column field="c" title="CA相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="电流总谐波畸变率(%)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="BC相"></vxe-column>
<vxe-column field="c" title="CA相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="电压不平衡度(%)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="BC相"></vxe-column>
<vxe-column field="c" title="CA相"></vxe-column>
</vxe-colgroup>
<vxe-column field="a" width="170" title="电流不平衡度(%)"></vxe-column>
<vxe-column field="b" width="170" title="频率(Hz)"></vxe-column>
<vxe-column field="c" width="170" title="基波电流相位(°)"></vxe-column>
</div>
<div v-if="tableIndex == 2">
<vxe-colgroup title="有功功率(kV)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
<vxe-column field="c" title="总有功功率"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="无功功率(kV)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
<vxe-column field="c" title="总无功功率"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="视在功率(kV)">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
<vxe-column field="c" title="总视在功率"></vxe-column>
</vxe-colgroup>
<vxe-colgroup title="功率因数">
<vxe-column field="a" title="A相"></vxe-column>
<vxe-column field="b" title="B相"></vxe-column>
<vxe-column field="c" title="C相"></vxe-column>
<vxe-column field="c" title="总功率因数"></vxe-column>
</vxe-colgroup>
</div>
</vxe-table>
</div>
</template>
<script lang="ts" setup>
import { ref, nextTick, onMounted } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { VxeTablePropTypes, VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
interface RowVO {
a: string
b: string
c: string
}
const loading = ref(false)
const tableData = ref<RowVO[]>([])
const tableRef = ref<VxeTableInstance<RowVO>>()
const toolbarRef = ref<VxeToolbarInstance>()
loading.value = true
nextTick(() => {
// 将表格和工具栏进行关联
const $table = tableRef.value
const $toolbar = toolbarRef.value
if ($table && $toolbar) {
$table.connect($toolbar)
}
})
onMounted(() => {
loading.value = false
})
const tableIndex: any = ref(null)
const getTableData = (val: any, list: any) => {
tableIndex.value = val
tableData.value = list
loading.value = false
}
defineExpose({ getTableData })
</script>
<style lang="scss" scoped>
// ::v-deep .vxe-table--empty-content{
// display: none !important;
// }
</style>

19
src/views/govern/device/control/tabs/event.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="view">
<div class="view_top">
</div>
<div class="view_bot">
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
onMounted(() => {
console.log()
})
</script>
<style lang="less" scoped>
</style>

1271
src/views/govern/device/control/tabs/realtime.vue Normal file
View File

File diff suppressed because it is too large Load Diff

13
src/views/govern/device/control/tabs/trend.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div>
1111111
</div>
</template>
<script lang='ts' setup>
import {ref,onMounted} from 'vue';
onMounted(()=>{
console.log()
})
</script>
<style lang='less' scoped>
</style>