设备监控二级页面

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

@@ -1,19 +1,93 @@
 <template>
+    <div class="header_btn">
+        <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">波形解析</el-button>
+        <el-button type="primary" size="small" @click="handleBack" v-if="isWaveCharts" :icon="ArrowLeft">返回</el-button>
+    </div>
     <div class="view">
-        <div class="view_top">
-
-        </div>
-        <div class="view_bot">
-
-        </div>
+        <Table ref="tableRef" v-if="!isWaveCharts" />
+        <waveFormAnalysis ref="waveFormAnalysisRef" v-if="isWaveCharts" />
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, provide } from 'vue'
+import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import waveFormAnalysis from './components/waveFormAnalysis.vue'
+import {ArrowLeft} from '@element-plus/icons-vue'
+const tableParams: any = ref({})
+const tableStore: any = new TableStore({
+    url: '/cs-device-boot/csGroup/deviceDataByType',
+    publicHeight: 210,
+    method: 'POST',
+    column: [
+        // { width: '60', type: 'checkbox', fixed: 'left' },
+        { title: '序号', type: 'seq', width: 80 },
+        { field: 'devName', title: '发生时刻', minWidth: 170 },
+        { field: 'lineName', title: '工程名称', minWidth: 170 },
+        { field: 'startTime', title: '项目名称', minWidth: 170 },
+        { field: 'endTime', title: '测试项名称', minWidth: 170 },
+        { field: 'endTime', title: '事件描述', minWidth: 170 },
+        { field: 'endTime', title: '相别', minWidth: 170 },
+        { field: 'endTime', title: '持续时间(s)', minWidth: 170 },
+        { field: 'endTime', title: '暂降幅值(%)', minWidth: 170 },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '波形解析',
+                    type: 'primary',
+                    icon: 'el-icon-Check',
+                    render: 'basicButton',
+                    click: row => {
+                        handleWaveFormAnalysis(row)
+                    }
+                }
+            ]
+        }
+    ],
+
+    beforeSearchFun: () => {
+        tableStore.table.params.devId = tableParams.value.devId
+        tableStore.table.params.lineId = tableParams.value.lineId
+        tableStore.table.params.list = tableParams.value.list
+        tableStore.table.params.type = 3
+    },
+    loadCallback: () => {}
+})
+provide('tableStore', tableStore)
+const isWaveCharts = ref(false)
+//获取请求参数
+const getTableParams = (val: any) => {
+    tableParams.value = val
+    console.log(tableParams.value, '暂态时间表格请求参数')
+    isWaveCharts.value = false
+    tableStore.index()
+}
+//波形解析组件
+const handleWaveFormAnalysis = (val: any) => {
+    console.log(val, '波形解析')
+    isWaveCharts.value = true
+}
+//返回
+const handleBack=()=>{
+    isWaveCharts.value = false;
+    tableStore.index()
+}
+defineExpose({ getTableParams })
 onMounted(() => {
-    console.log()
+    tableStore.index()
 })
 </script>
-<style lang="less" scoped>
-
+<style lang="scss" scoped>
+.header_btn{
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
 </style>