实时数据页面绘制

src/components/tree/device.vue

@@ -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) {

src/components/tree/govern/deviceInfoTree.vue

@@ -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,
+        data
-        checked,
-        indeterminate
     })
 }
 defineExpose({getTreeList})

src/components/tree/index.vue

@@ -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>

src/components/tree/point.vue

@@ -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

src/views/govern/device/control/index.vue

@@ -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
+                    "
                 >
-                    <!-- 卡片 -->
+                    <!-- 循环渲染的card 最新数据/历史数据显示 -->
-                    <div
+                    <div class="content">
-                        class="content"
-                        v-if="
-                            dataSet.indexOf('_trenddata') == -1 &&
-                            dataSet.indexOf('_realtimedata') == -1 &&
-                            dataSet.indexOf('_event') == -1
-                        "
-                    >
                         <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">

src/views/govern/device/control/tabs/components/tableInfo.vue

@@ -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>

src/views/govern/device/control/tabs/event.vue

@@ -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>

src/views/govern/device/control/tabs/trend.vue

@@ -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>