修改测试用例

2025-07-29 08:33:04 +08:00
parent d53b9df52f
commit 24c590478e
26 changed files with 880 additions and 235 deletions
--- a/src/layouts/admin/components/globalPopUp.vue
+++ b/src/layouts/admin/components/globalPopUp.vue
@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <!-- 全局暂降事件 -->
+        <el-drawer v-model="drawer" title="暂降事件" size="1000px" :before-close="handleClose">
+            <div :style="height">
+                <vxe-table
+                    v-bind="defaultAttribute"
+                    v-loading="isLoading"
+                    height="100%"
+                    ref="xTable1Ref"
+                    :data="eventList"
+                >
+                    <vxe-column type="seq" width="70px" title="序号"></vxe-column>
+                    <vxe-column field="time" width="180px" sortable title="发生时刻"></vxe-column>
+                    <vxe-column field="lineName" title="监测点"></vxe-column>
+                    <vxe-column field="powerCompany" title="变电站"></vxe-column>
+                    <vxe-column field="powerCompany" title="供电公司"></vxe-column>
+                    <vxe-column field="persistTime" width="120px" sortable title="持续时间(s)"></vxe-column>
+                    <vxe-column field="eventValue" width="160px" sortable title="暂降(骤升)幅值(%)">
+                        <template #default="{ row }">
+                            {{ Math.floor(row.eventValue * 10000) / 100 }}
+                        </template>
+                    </vxe-column>
+                    <vxe-column field="eventReason" width="110px" title="暂降类型">
+                        <template #default="{ row }">
+                            {{ eventType.filter(item => item.id == row.eventReason)[0]?.name || '/' }}
+                        </template>
+                    </vxe-column>
+                </vxe-table>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { mainHeight } from '@/utils/layout'
+import { useDictData } from '@/stores/dictData'
+import MQTT from '@/utils/mqtt'
+const dictData = useDictData()
+const eventType = dictData.getBasicData('Event_Type')
+import { useAdminInfo } from '@/stores/adminInfo'
+const adminInfo = useAdminInfo()
+const height = mainHeight(-20)
+const drawer = ref(false)
+const isLoading = ref(false)
+const eventList = ref([])
+const open = () => {
+    drawer.value = true
+}
+const handleClose = (done: any) => {
+    drawer.value = false
+    done()
+}
+const init = async () => {
+    const mqttClient = new MQTT('/sendEvent')
+    // 设置消息接收回调
+    try {
+        await mqttClient.init()
+
+        // 订阅主题
+        await mqttClient.subscribe()
+        // 设置消息接收回调
+        mqttClient.onMessage((topic, message) => {
+            const msg = JSON.parse(message.toString())
+            if (msg.deptList.includes(adminInfo.$state.deptId)) {
+                drawer.value = true
+                isLoading.value = true
+                eventList.value.unshift(msg)
+                setTimeout(() => {
+                    isLoading.value = false
+                }, 500)
+            }
+        })
+    } catch (error) {
+        console.error('MQTT 初始化失败:', error)
+    }
+}
+onMounted(() => {
+    // startMqtt('/sendEvent', (topic, message) => {
+    //     const msg = JSON.parse(message.toString())
+    //     console.log(msg)
+    // })
+    init()
+})
+defineExpose({
+    open,
+    eventList
+})
+</script>
+<style lang="scss" scoped></style>
--- a/src/layouts/admin/components/navMenus.vue
+++ b/src/layouts/admin/components/navMenus.vue
@@ -1,29 +1,46 @@
 <template>
    <div class="nav-menus" :class="configStore.layout.layoutMode">
-        <div @click="savePng" class="nav-menu-item">
-            <Icon
-                :color="configStore.getColorVal('headerBarTabColor')"
-                class="nav-menu-icon"
-                name="el-icon-Camera"
-                size="18"
-            />
-        </div>
-        <div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
-            <Icon
-                :color="configStore.getColorVal('headerBarTabColor')"
-                class="nav-menu-icon"
-                v-if="state.isFullScreen"
-                name="fa-solid fa-compress"
-                size="18"
-            />
-            <Icon
-                :color="configStore.getColorVal('headerBarTabColor')"
-                class="nav-menu-icon"
-                v-else
-                name="fa-solid fa-expand"
-                size="18"
-            />
-        </div>
+        <el-tooltip effect="dark" content="暂降事件" placement="bottom">
+            <div @click="temporaryLandingEvent" class="nav-menu-item">
+                <Icon
+                    :color="configStore.getColorVal('headerBarTabColor')"
+                    class="nav-menu-icon"
+                    name="el-icon-BellFilled"
+                    size="18"
+                />
+                <span class="nav-menu-text" v-if="globalPopUpRef?.eventList.length != 0">
+                    {{ globalPopUpRef?.eventList.length || 0 }}
+                </span>
+            </div>
+        </el-tooltip>
+        <el-tooltip effect="dark" content="截图" placement="bottom">
+            <div @click="savePng" class="nav-menu-item">
+                <Icon
+                    :color="configStore.getColorVal('headerBarTabColor')"
+                    class="nav-menu-icon"
+                    name="el-icon-Camera"
+                    size="18"
+                />
+            </div>
+        </el-tooltip>
+        <el-tooltip effect="dark" :content="state.isFullScreen ? '缩小' : '放大'" placement="bottom">
+            <div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
+                <Icon
+                    :color="configStore.getColorVal('headerBarTabColor')"
+                    class="nav-menu-icon"
+                    v-if="state.isFullScreen"
+                    name="fa-solid fa-compress"
+                    size="18"
+                />
+                <Icon
+                    :color="configStore.getColorVal('headerBarTabColor')"
+                    class="nav-menu-icon"
+                    v-else
+                    name="fa-solid fa-expand"
+                    size="18"
+                />
+            </div>
+        </el-tooltip>
        <el-dropdown style="height: 100%" @command="handleCommand">
            <div class="admin-info" :class="state.currentNavMenu == 'adminInfo' ? 'hover' : ''">
                <el-avatar :size="25" fit="fill">
@@ -51,6 +68,8 @@
        <PopupPwd ref="popupPwd" />
        <AdminInfo ref="popupAdminInfo" />
        <!-- <TerminalVue /> -->
+        <!-- 全局暂降事件 -->
+        <globalPopUp ref="globalPopUpRef" />
    </div>
 </template>

@@ -62,6 +81,7 @@ import { ElMessage } from 'element-plus'
 import Config from './config.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 import router from '@/router'
+import globalPopUp from './globalPopUp.vue'
 import { routePush } from '@/utils/router'
 import { fullUrl } from '@/utils/common'
 import html2canvas from 'html2canvas'
@@ -80,7 +100,7 @@ const state = reactive({
    showLayoutDrawer: false,
    showAdminInfoPopover: false
 })
-
+const globalPopUpRef = ref()
 const savePng = () => {
    html2canvas(document.body, {
        scale: 1,
@@ -122,6 +142,9 @@ const handleCommand = (key: string) => {
            break
    }
 }
+const temporaryLandingEvent = () => {
+    globalPopUpRef.value.open()
+}
 </script>

 <style scoped lang="scss">
@@ -139,6 +162,7 @@ const handleCommand = (key: string) => {
    background-color: v-bind('configStore.getColorVal("headerBarBackground")');

    .nav-menu-item {
+        position: relative;
        height: 100%;
        width: 40px;
        display: flex;
@@ -233,4 +257,15 @@ const handleCommand = (key: string) => {
        transform: scale(1);
    }
 }
+.nav-menu-text {
+    position: absolute;
+    top: 13px;
+    right: 7px;
+    font-size: 12px;
+    display: inline-block;
+    background-color: #ff0000;
+    color: #fff;
+    border-radius: 5px;
+    padding: 0 3px;
+}
 </style>