合并

package.json

@@ -18,6 +18,7 @@
     "echarts4": "npm:echarts@^4.9.0",
     "element-plus": "^2.4.4",
     "html2canvas": "^1.4.1",
+    "jquery": "^3.7.1",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",

src/api/common.ts

@@ -23,3 +23,10 @@ export function getDeviceTree() {
         method: 'POST'
     })
 }
+// 获取波形数据
+export function analyseWave(params:string) {
+    return createAxios({
+        url: '/cs-harmonic-boot/event/analyseWave?eventId=' + params,
+        method: 'get'
+    })
+}

src/components/table/index.vue

@@ -69,6 +69,7 @@
                     </template>
                 </Column>
             </template>
+            <slot name="columns"></slot>
         </vxe-table>
     </div>
 

src/styles/vxeTable.scss

@@ -1,16 +1,25 @@
-.vxe-table--body-wrapper::-webkit-scrollbar {
+.vxe-table--body-wrapper,
-    width: 10px;
+.boxbx {
-    height: 10px;
+    &::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+    &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        height: 3px;
+        background-color: var(--el-color-primary) !important;
+        border-radius: 30px !important;
+    }
 }
 
-.vxe-table--body-wrapper::-webkit-scrollbar-thumb {
+// .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
-    border-radius: 5px;
+//     border-radius: 5px;
-    height: 3px;
+//     height: 3px;
-    background-color: var(--el-color-primary) !important;
+//     background-color: var(--el-color-primary) !important;
-    border-radius: 30px !important;
+//     border-radius: 30px !important;
-}
+// }
 
 .vxe-header--row {
     background: var(--el-color-primary);
     color: var(--el-color-white);
-}
+}

src/utils/layout.ts

@@ -7,7 +7,7 @@ import { useConfig } from '@/stores/config'
  * @param extra main高度额外减去的px数,可以实现隐藏原有的滚动条
  * @returns CSSProperties
  */
-export function mainHeight(extra = 0): CSSProperties {
+export function mainHeight(extra = 0,divided =1): CSSProperties {
     let height = extra
     const adminLayoutMainExtraHeight: anyObj = {
         Default: 60,
@@ -21,7 +21,7 @@ export function mainHeight(extra = 0): CSSProperties {
     }
 
     return {
-        height: 'calc(100vh - ' + height.toString() + 'px)'
+        height: 'calc((100vh - ' + height.toString() + 'px) / '+ divided+')'
     }
 }
 

src/views/govern/alarm/Device.vue

@@ -103,7 +103,9 @@ const sourceChange = (e: any) => {
 onMounted(() => {
     tableStore.index()
 })
-
+setTimeout(() => {
+    tableStore.table.height = mainHeight(190).height as any
+}, 0)
 const addMenu = () => {}
 </script>
 <style></style>

src/views/govern/alarm/Steady.vue

@@ -102,7 +102,9 @@ const sourceChange = (e: any) => {
 onMounted(() => {
     tableStore.index()
 })
-
+setTimeout(() => {
+    tableStore.table.height = mainHeight(190).height as any
+}, 0)
 const addMenu = () => {}
 </script>
 <style></style>

src/views/govern/alarm/Transient.vue

@@ -1,56 +1,132 @@
 <template>
-    <TableHeader datePicker ref="refheader">
+    <div ref="refheader" v-show="view">
-        <template v-slot:select>
+        <TableHeader datePicker>
-            <el-form-item label="数据来源">
+            <template v-slot:select>
-                <el-cascader
+                <el-form-item label="数据来源">
-                    placeholder="请选择数据来源"
+                    <el-cascader
-                    @change="sourceChange"
+                        placeholder="请选择数据来源"
-                    :options="props.deviceTree"
+                        @change="sourceChange"
-                    :show-all-levels="false"
+                        :options="props.deviceTree"
-                    :props="{ checkStrictly: true }"
+                        :show-all-levels="false"
-                    clearable
+                        :props="{ checkStrictly: true }"
-                ></el-cascader>
+                        clearable
-                <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
+                    ></el-cascader>
-            </el-form-item>
+                    <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
-            <el-form-item label="级别">
+                </el-form-item>
-                <el-select v-model="tableStore.table.params.level" placeholder="请选择级别" clearable>
+                <el-form-item label="级别">
+                    <el-select v-model="tableStore.table.params.level" placeholder="请选择级别" clearable>
+                        <el-option
+                            v-for="item in rankOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </template>
+        </TableHeader>
+        <!-- <div style="height: 300px;"> -->
+        <Table :isGroup="true">
+            <template v-slot:columns>
+                <vxe-column title="操作" min-width="15px">
+                    <template v-slot:default="scoped">
+                        <!-- {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }} -->
+                        <el-button
+                            :icon="Tickets"
+                            size="small"
+                            type="primary"
+                            v-if="scoped.row.wavePath && scoped.row.evtParamTm < 20"
+                            @click="getboxin(scoped.row)"
+                        >
+                            波形分析
+                        </el-button>
+                        <el-button v-else size="small" :icon="Tickets" type="info" :disabled="true">暂无波形</el-button>
+                    </template>
+                </vxe-column>
+            </template>
+            >
+        </Table>
+    </div>
+    <div style="padding: 10px" v-if="!view">
+        <el-row>
+            <el-col :span="12">
+                <span v-if="view2" style="font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
+                <el-select v-if="view2" @change="changeView" v-model="value" placeholder="请选择值类型">
                     <el-option
-                        v-for="item in rankOptions"
+                        v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"
                     ></el-option>
                 </el-select>
-            </el-form-item>
+            </el-col>
-        </template>
+            <el-col :span="12">
-    </TableHeader>
+                <el-button
-    <!-- <div style="height: 300px;"> -->
+                    v-if="view2"
-    <Table ref="tableRef" :isGroup="true" />
+                    @click="backbxlb"
-    <!-- </div> -->
+                    type="primary"
+                    class="el-icon-refresh-right"
+                    style="float: right"
+                >
+                    返回
+                </el-button>
+            </el-col>
+        </el-row>
+        <el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
+            <el-tab-pane
+                label="瞬时波形"
+                name="ssbx"
+                class="boxbx"
+                :style="'height:' + bxecharts + ';overflow-y: scroll;'"
+            >
+                <shushiboxi
+                    v-if="bxactiveName == 'ssbx' && showBoxi"
+                    :value="value"
+                    :boxoList="boxoList"
+                    :wp="wp"
+                ></shushiboxi>
+            </el-tab-pane>
+            <el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
+                <rmsboxi
+                    v-if="bxactiveName == 'rmsbx' && showBoxi"
+                    :value="value"
+                    :boxoList="boxoList"
+                    :wp="wp"
+                ></rmsboxi>
+            </el-tab-pane>
+        </el-tabs>
+        <!-- <xiebofenxi  ref="child"  :bxshuju="bxshuju" @backfh="back"></xiebofenxi>  -->
+    </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, provide } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
+import { Tickets } from '@element-plus/icons-vue'
 import TableHeader from '@/components/table/header/index.vue'
+import shushiboxi from '@/components/echarts/shushiboxi.vue'
+import rmsboxi from '@/components/echarts/rmsboxi.vue'
+
 import { mainHeight } from '@/utils/layout'
 
 const props = defineProps(['deviceTree'])
 
 const refheader = ref()
-const deviceTree = ref([])
+const view = ref(true)
-const tabsList = ref([
+const view2 = ref(false)
+const showBoxi = ref(true)
+const bxactiveName = ref('ssbx')
+const boxoList = ref({})
+const wp = ref({})
+const value = ref(1)
+const options = ref([
     {
-        label: '设备告警',
+        value: 1,
-        name: 3
+        label: '一次值'
     },
     {
-        label: '稳态越限告警',
+        value: 2,
-        name: 1
+        label: '二次值'
-    },
-    {
-        label: '暂态事件',
-        name: 0
     }
 ])
 const rankOptions = ref([
@@ -75,14 +151,18 @@ const tableStore = new TableStore({
         { title: '工程名称', field: 'engineeringName', align: 'center' },
         { title: '项目名称', field: 'projectName', align: 'center' },
         { title: '设备名称', field: 'equipmentName', align: 'center' },
-        { title: '事件描述', field: 'code', align: 'center' },
+        { title: '事件描述', field: 'showName', align: 'center' },
-        { title: '事件发生位置', field: 'showName', align: 'center' },
+        { title: '事件发生位置', field: 'evtParamPosition', align: 'center' },
-        { title: '相别', field: 'startTime', align: 'center' },
+        { title: '相别', field: 'evtParamPhase', align: 'center' },
-        { title: '持续时间', field: 'startTime', align: 'center' },
+        { title: '持续时间(s)', field: 'evtParamTm', align: 'center' },
-        { title: '暂降深度', field: 'startTime', align: 'center' },
+        { title: '暂降深度', field: 'evtParamVVaDepth', align: 'center' },
-        { title: '发生时刻', field: 'startTime', align: 'center' },
+        { title: '发生时刻', field: 'startTime', align: 'center' }
-        { title: '操作', field: 'startTime', align: 'center' }
+    ],
-    ]
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.evtParamTm = item.evtParamTm.split('s')[0]
+        })
+    }
 })
 
 provide('tableStore', tableStore)
@@ -92,22 +172,56 @@ provide('tableStore', tableStore)
 tableStore.table.params.engineeringid = ''
 tableStore.table.params.projectId = ''
 tableStore.table.params.deviceId = ''
-tableStore.table.params.type = 1
+tableStore.table.params.type = 0
 tableStore.table.params.eventIds = []
 tableStore.table.params.status = ''
 tableStore.table.params.target = []
 tableStore.table.params.userId = ''
-
+import { analyseWave } from '@/api/common'
 const sourceChange = (e: any) => {
     tableStore.table.params.engineeringid = e[0] || ''
     tableStore.table.params.projectId = e[1] || ''
     tableStore.table.params.deviceId = e[2] || ''
 }
-
+const getboxin = async (row: any) => {
+    boxoList.value = row
+    await analyseWave(row.id).then(res => {
+        if (res != undefined) {
+            wp.value = res.data
+            view.value = false
+            view2.value = true
+        }
+    })
+}
+const changeView = () => {
+    showBoxi.value = false
+    setTimeout(() => {
+        showBoxi.value = true
+    }, 0)
+}
+const bxhandleClick = (tab: any) => {
+    if (tab.name == 'ssbx') {
+        bxactiveName.value = 'ssbx'
+    } else if (tab.name == 'rmsbx') {
+        bxactiveName.value = 'rmsbx'
+    }
+    //  console.log(tab, event);
+}
+const backbxlb = () => {
+    view.value = true
+    view2.value = false
+    setTimeout(() => {
+    tableStore.table.height = mainHeight(190).height as any
+}, 0)
+}
 onMounted(() => {
     tableStore.index()
 })
+const bxecharts = mainHeight(175).height as any
+setTimeout(() => {
+    tableStore.table.height = mainHeight(190).height as any
+}, 0)
 
 const addMenu = () => {}
 </script>
-<style></style>
+<style scoped lang="scss"></style>

src/views/govern/alarm/cope.vue

@@ -0,0 +1,135 @@
+<template>
+    <TableHeader datePicker ref="refheader">
+        <template v-slot:select>
+            <el-form-item label="数据来源">
+                <el-cascader
+                    placeholder="请选择数据来源"
+                    @change="sourceChange"
+                    :options="props.deviceTree"
+                    :show-all-levels="false"
+                    :props="{ checkStrictly: true }"
+                    clearable
+                ></el-cascader>
+                <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
+            </el-form-item>
+            <el-form-item label="级别">
+                <el-select v-model="tableStore.table.params.level" placeholder="请选择级别" clearable>
+                    <el-option
+                        v-for="item in rankOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </template>
+    </TableHeader>
+    <!-- <div style="height: 300px;"> -->
+    <!-- <Table ref="tableRef" :isGroup="true" /> -->
+    <div :style="{ height: tableHeight }" v-loading="tableLoading">
+        <vxe-table :data="tableStore.table.data" v-bind="defaultAttribute" height="auto" auto-resize>
+            <vxe-column
+                v-for="item in tableStore.table.column"
+                :field="item.field"
+                :title="item.title"
+                :min-width="item.width"
+                :sortable="item.sortable"
+            ></vxe-column>
+            <vxe-column title="操作" min-width="220px">
+                <template v-slot:default="scoped">
+                    <!-- {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }} -->
+                    <el-button  icon="el-icon-s-marketing" type="primary"  v-if="scoped.row.wavePath && scoped.row.evtParamTm<20" @click="getboxin(scoped.row)">波形分析</el-button>
+                            <el-button v-else  icon="el-icon-s-marketing" type="info"  :disabled="true">暂无波形</el-button>
+                            </template>
+
+            </vxe-column>
+        </vxe-table>
+        <el-pagination
+            :currentPage="tableStore.table.params!.pageNum"
+            :page-size="tableStore.table.params!.pageSize"
+            :page-sizes="pageSizes"
+            background
+            :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
+            :total="tableStore.table.total"
+            @size-change="onTableSizeChange"
+            @current-change="onTableCurrentChange"
+        ></el-pagination>
+    </div>
+    
+    <!-- </div> -->
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { mainHeight } from '@/utils/layout'
+
+const props = defineProps(['deviceTree'])
+
+const refheader = ref()
+const tableLoading = ref(false)
+
+const rankOptions = ref([
+    {
+        value: '1',
+        label: '1级'
+    },
+    {
+        value: '2',
+        label: '2级'
+    },
+    {
+        value: '3',
+        label: '3级'
+    }
+])
+
+const tableStore = new TableStore({
+    url: '/cs-harmonic-boot/eventUser/queryEventpage',
+    method: 'POST',
+    column: [
+        { title: '工程名称', field: 'engineeringName', align: 'center' },
+        { title: '项目名称', field: 'projectName', align: 'center' },
+        { title: '设备名称', field: 'equipmentName', align: 'center' },
+        { title: '事件描述', field: 'showName', align: 'center' },
+        { title: '事件发生位置', field: 'evtParamPosition', align: 'center' },
+        { title: '相别', field: 'evtParamPhase', align: 'center' },
+        { title: '持续时间', field: 'evtParamTm', align: 'center' },
+        { title: '暂降深度', field: 'evtParamVVaDepth', align: 'center' },
+        { title: '发生时刻', field: 'startTime', align: 'center' },
+        { title: '操作', field: '', align: 'center' }
+    ]
+})
+
+provide('tableStore', tableStore)
+//   "target": [],
+//   "type": "",
+//   "userId": ""
+tableStore.table.params.engineeringid = ''
+tableStore.table.params.projectId = ''
+tableStore.table.params.deviceId = ''
+tableStore.table.params.type = 1
+tableStore.table.params.eventIds = []
+tableStore.table.params.status = ''
+tableStore.table.params.target = []
+tableStore.table.params.userId = ''
+
+const sourceChange = (e: any) => {
+    tableStore.table.params.engineeringid = e[0] || ''
+    tableStore.table.params.projectId = e[1] || ''
+    tableStore.table.params.deviceId = e[2] || ''
+}
+// 波形分析
+const getboxin=()=>{
+
+}
+
+onMounted(() => {
+    tableStore.index()
+})
+const tableHeight = mainHeight(225).height
+const addMenu = () => {}
+</script>
+<style></style>

src/views/govern/alarm/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="default-main">
-        <el-tabs v-model="activeName" class="demo-tabs">
+        <el-tabs v-model="activeName" type="card" class="demo-tabs">
             <el-tab-pane label="设备告警" name="1">
                 <Device v-if="activeName == '1'" :deviceTree="deviceTree" />
             </el-tab-pane>