设备监控修改

src/App.vue

@@ -7,8 +7,13 @@
 <script lang="ts" setup>
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import useSetTheme from '@/utils/setTheme'
+import { provide, getCurrentInstance } from 'vue'
+//线上mqtt
+let buildUrl = 'wss://pqmcn.com:8087/mqtt'
+//本地mqtt
+let devUrl = 'ws://192.168.1.24:8085/mqtt'
+provide('MQTTURL', devUrl)
 useSetTheme()
-
 </script>
 
 <style lang="scss">

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

@@ -3,8 +3,8 @@
     <el-dialog v-model="dialogVisible" title="解析列表" width="70%" draggable @closed="close">
         <TableHeader date-picker></TableHeader>
         <Table ref="tableRef" />
-       
     </el-dialog>
+    <popup ref="detailRef"></popup>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, provide, watch, onBeforeUnmount } from 'vue'
@@ -12,25 +12,27 @@ import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { ArrowLeft } from '@element-plus/icons-vue'
+import popup from './popup.vue'
 const emit = defineEmits(['back'])
 const dialogVisible = ref(false)
 const height = ref(0)
 height.value = window.innerHeight < 1080 ? 230 : 450
-
+const detailRef:any=ref()
 const tableStore: any = new TableStore({
-    url: '/cs-device-boot/portableOfflLog/queryPage',
+    url: '/cs-device-boot/portableOfflLog/queryMainLogPage',
     publicHeight: height.value,
     method: 'POST',
     column: [
         // { width: '60', type: 'checkbox', fixed: 'left' },
         { title: '序号', type: 'seq', width: 80 },
-        { field: 'name', title: '文件名称', minWidth: 170 },
+        { field: 'projectName', title: '工程名称', minWidth: 170 },
-        { field: 'createTime', title: '导入时间', minWidth: 170 },
+        // { field: 'allCount', title: '数据总数(条)', minWidth: 170 },
-        { field: 'allCount', title: '数据总数(条)', minWidth: 170 },
+        { field: 'successCount', title: '已入库总数(条)', minWidth: 170 },
-        { field: 'realCount', title: '已入库总数(条)', minWidth: 170 },
+        { field: 'startTime', title: '起始时间', minWidth: 170 },
+        { field: 'endTime', title: '结束时间', minWidth: 170 },
         {
             title: '解析状态',
-            field: 'state',
+            field: 'status',
             width: 100,
             render: 'tag',
             custom: {
@@ -48,6 +50,24 @@ const tableStore: any = new TableStore({
             // formatter: row => {
             //     return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
             // },
+        },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '详情',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        console.log(row.portableOfflLogList)
+                        detailRef.value.open(row.portableOfflLogList)
+                    }
+                }
+            ]
         }
     ],
 
@@ -57,7 +77,10 @@ const tableStore: any = new TableStore({
         // tableStore.table.params.list = tableParams.value.list
         // tableStore.table.params.type = 3
     },
-    loadCallback: () => {}
+    loadCallback: () => {
+        // tableStore.table.data=[]
+        console.log(tableStore.table.data, 'tableStore.table.data')
+    }
 })
 provide('tableStore', tableStore)
 //返回
@@ -66,9 +89,9 @@ const handleBack = () => {
 }
 const open = () => {
     dialogVisible.value = true
-setTimeout(() => {
+    setTimeout(() => {
-    tableStore.index()
+        tableStore.index()
-},10)
+    }, 10)
 }
 const close = () => {
     dialogVisible.value = false

src/views/govern/device/control/analysisList/popup.vue

@@ -0,0 +1,112 @@
+<!-- 解析列表 -->
+<template>
+    <el-dialog v-model="dialogVisible" title="解析列表" width="70%" draggable @closed="close">
+        <TableHeader date-picker></TableHeader>
+        <Table ref="tableRef" />
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, provide, watch, onBeforeUnmount } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ArrowLeft } from '@element-plus/icons-vue'
+const emit = defineEmits(['back'])
+const dialogVisible = ref(false)
+const height = ref(0)
+height.value = window.innerHeight < 1080 ? 230 : 450
+
+const tableStore: any = new TableStore({
+    url: '',
+    publicHeight: height.value,
+    column: [
+        { width: '60', type: 'checkbox', fixed: 'left' },
+        { title: '序号', type: 'seq', width: 80 },
+        { field: 'projectName', title: '工程名称', minWidth: 170 },
+        { field: 'allCount', title: '数据总数(条)', minWidth: 170 },
+        { field: 'successCount', title: '已入库总数(条)', minWidth: 170 },
+        { field: 'startTime', title: '起始时间', minWidth: 170 },
+        { field: 'endTime', title: '结束时间', minWidth: 170 },
+        {
+            title: '解析状态',
+            field: 'status',
+            width: 100,
+            render: 'tag',
+            custom: {
+                0: 'warning',
+                1: 'success',
+                2: 'danger',
+                3: 'primary'
+            },
+            replaceValue: {
+                0: '未解析',
+                1: '解析成功',
+                2: '解析失败',
+                3: '文件不存在'
+            }
+            // formatter: row => {
+            //     return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
+            // },
+        },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '详情',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        console.log(row.portableOfflLogList)
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        tableStore.table.data = []
+    }
+})
+provide('tableStore', tableStore)
+//返回
+const handleBack = () => {
+    emit('back')
+}
+const open = (val: any) => {
+    dialogVisible.value = true
+    tableStore.table.data = val
+    setTimeout(() => {
+        tableStore.index()
+    }, 10)
+}
+const close = () => {
+    dialogVisible.value = false
+}
+const updateViewportHeight = async () => {
+    // height.value = window.innerHeight;
+    height.value = window.innerHeight < 1080 ? 230 : 450
+    tableStore.table.publicHeight = height.value
+    // await tableStore.index()
+}
+
+onMounted(() => {
+    updateViewportHeight() // 初始化视口高度
+    window.addEventListener('resize', updateViewportHeight) // 监听窗口大小变化
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', updateViewportHeight) // 移除监听
+})
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+::v-deep .el-dialog_body {
+    overflow-y: hidden !important;
+    .analysisTable {
+        height: 400px !important;
+    }
+}
+</style>

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

@@ -306,7 +306,7 @@ import {
     getOverLimitData
 } from '@/api/cs-device-boot/EquipmentDelivery'
 import { deviceHisData, deviceRtData, getGroup } from '@/api/cs-device-boot/csGroup'
-import { ref, reactive, nextTick, onMounted, watch, onUnmounted } from 'vue'
+import { ref, reactive, nextTick, onMounted, watch, onUnmounted, inject } from 'vue'
 import { ElMessage } from 'element-plus'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import Trend from './tabs/trend.vue' //趋势数据
@@ -346,7 +346,6 @@ const dataSet = ref('')
 const devTypeOptions = ref([])
 const devModelOptions = ref([])
 const tableData = ref<any[]>([])
-
 const tableHeight = mainHeight(330).height
 const mangePopup = ref()
 const datePickerRef = ref()
@@ -402,7 +401,7 @@ const handleTrend = async () => {
     })
     await getOverLimitData(lineId.value).then((res: any) => {
         console.log(res, '获取国标限制')
-        if(res.code=='A0000'){
+        if (res.code == 'A0000') {
             realTrendRef.value && realTrendRef.value.setOverLimitData(res.data)
         }
     })
@@ -519,15 +518,13 @@ const pointTypeChange = (val: any, obj: any) => {
     nodeClick(obj)
 }
 const realTimeRef: any = ref()
-
 //趋势数据组件
 const trendRef: any = ref()
 //暂态事件组件
 const eventRef: any = ref()
 const timer: any = ref()
-
 const mqttRef = ref()
-
+const url: any = inject('MQTTURL')
 const connectMqtt = () => {
     if (mqttRef.value) {
         if (mqttRef.value.connected) {
@@ -543,9 +540,6 @@ const connectMqtt = () => {
         username: 't_user',
         password: 'njcnpqs'
     }
-    // 线上
-    // const url = 'wss://pqmcn.com:8087/mqtt'
-    const url = 'ws://192.168.1.24:8085/mqtt'
     mqttRef.value = mqtt.connect(url, options)
 }
 //tab点击事件
@@ -762,7 +756,7 @@ const handleClick = async (tab?: any) => {
             //保留两位小数
             for (var i in obj) {
                 if (typeof obj[i] == 'number' && obj[i] != 0) {
-                    obj[i] = obj[i].toFixed(2)
+                    obj[i].toFixed(2)
                 }
             }
             mqttMessage.value = obj

src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue

@@ -40,7 +40,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, defineProps, defineExpose, onBeforeUnmount } from 'vue'
+import { ref, onMounted, defineProps, defineExpose, onBeforeUnmount, inject } from 'vue'
 import { getMakeUpData, getAskDirOrFile, offlineDataUploadMakeUp } from '@/api/cs-harmonic-boot/recruitment.ts'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -141,7 +141,7 @@ const handleIntoDir = (row: any) => {
 }
 
 const mqttRef = ref()
-
+const url: any = inject('MQTTURL')
 const connectMqtt = () => {
     if (mqttRef.value) {
         if (mqttRef.value.connected) {
@@ -157,9 +157,6 @@ const connectMqtt = () => {
         username: 't_user',
         password: 'njcnpqs'
     }
-    // 线上
-    // const url = 'wss://pqmcn.com:8087/mqtt'
-    const url = 'ws://192.168.1.24:8085/mqtt'
     mqttRef.value = mqtt.connect(url, options)
 }
 connectMqtt()

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

@@ -4,19 +4,31 @@
         <div class="harmonic_select">
             <el-form :model="searchForm" id="history_select">
                 <el-form-item label="稳态指标">
-                    <el-select multiple collapse-tags collapse-tags-tooltip v-model="searchForm.index"
+                    <el-select
-                        placeholder="请选择统计指标">
+                        multiple
-                        <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
+                        collapse-tags
-                            :value="item.id"></el-option>
+                        collapse-tags-tooltip
+                        v-model="searchForm.index"
+                        placeholder="请选择统计指标"
+                    >
+                        <el-option
+                            v-for="item in indexOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
                     </el-select>
                 </el-form-item>
                 <el-button type="primary" :loading="loading" @click="init">查询</el-button>
             </el-form>
-
         </div>
         <div class="harmonic_body" v-loading="loading">
-            <div class="harmonic_body_charts" :style="{ height: height }" v-for="(item, index) in chartsList"
+            <div
-                :key="index">
+                class="harmonic_body_charts"
+                :style="{ height: height }"
+                v-for="(item, index) in chartsList"
+                :key="index"
+            >
                 <p class="charts_title">
                     {{
                         indexOptions.find((item: any) => {
@@ -43,16 +55,55 @@ searchForm.value = {
 }
 //统计指标
 const indexOptions: any = ref([])
-const legendDictList: any = ref([])
+// const legendDictList: any = ref([])
-queryByCode('portable-harmonic').then(res => {
+// queryByCode('portable-harmonic').then(res => {
-    queryCsDictTree(res.data.id).then(item => {
+//     queryCsDictTree(res.data.id).then(item => {
-        indexOptions.value = item.data
+//         indexOptions.value = item.data
-        searchForm.value.index[0] = indexOptions.value[0].id
+//         searchForm.value.index[0] = indexOptions.value[0].id
-    })
+//     })
-    queryStatistical(res.data.id).then(vv => {
+//     queryStatistical(res.data.id).then(vv => {
-        legendDictList.value = vv.data
+//         legendDictList.value = vv.data
-    })
+//     })
-})
+// })
+indexOptions.value = [
+    {
+        id: 0,
+        name: '电压总有效值(kV)'
+    },
+    {
+        id: 1,
+        name: '电流总有效值(A)'
+    },
+    {
+        id: 2,
+        name: '有功功率(kW)'
+    },
+    {
+        id: 3,
+        name: '无功功率(kW)'
+    },
+    {
+        id: 4,
+        name: '基波电压总有效值(kV)'
+    },
+    {
+        id: 5,
+        name: '基波电流总有效值(A)'
+    },
+    {
+        id: 6,
+        name: '频率(Hz)'
+    },
+    {
+        id: 7,
+        name: '电压不平衡度(%)'
+    },
+    {
+        id: 8,
+        name: '电流不平衡度(%)'
+    }
+]
+searchForm.value.index[0] = indexOptions.value[0].id
 const heightTop = mainHeight(275)
 let height: any = mainHeight(275).height
 //谐波频谱参数
@@ -76,7 +127,7 @@ const init = () => {
     })
     //查询谐波频谱
     getDeviceHarmonicSpectrumData(params.value).then(res => {
-        res.data.length > 3 ? height = mainHeight(275, 3).height : height = mainHeight(275, res.data.length).height
+        res.data.length > 3 ? (height = mainHeight(275, 3).height) : (height = mainHeight(275, res.data.length).height)
         chartsList.value = res.data
         //数据根据相别组装成新数组
         chartsList.value.map((item: any) => {
@@ -96,8 +147,6 @@ const init = () => {
             return
         })
 
-
-
         //循环渲染图表
         chartsList.value &&
             chartsList.value.map((item: any, index: any) => {
@@ -155,8 +204,7 @@ const init = () => {
                             },
                             boundaryGap: false
                         },
-                        yAxis:
+                        yAxis: {
-                        {
                             type: 'value',
                             name:
                                 item.thdDataVOS.length != 0 &&
@@ -175,9 +223,8 @@ const init = () => {
                                 }
                             },
                             splitNumber: 5,
-                            minInterval: 1,
+                            minInterval: 1
-                        }
+                        },
-                        ,
                         series: []
                     }
                 }
@@ -214,7 +261,6 @@ const init = () => {
                 let [min, max] = yMethod(aar)
                 item.echartsData.options.yAxis.max = max
                 item.echartsData.options.yAxis.min = min
-
             })
         loading.value = false
     })
@@ -232,7 +278,7 @@ watch(
         immediate: true
     }
 )
-onMounted(() => { })
+onMounted(() => {})
 defineExpose({ getHarmonicSpectrumParams })
 </script>
 <style lang="scss" scoped>
@@ -263,7 +309,6 @@ defineExpose({ getHarmonicSpectrumParams })
 
         // padding-bottom: 200px;
         .harmonic_body_charts {
-
             // margin: 15px 0;
             border: 1px solid #eee;
             position: relative;

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

@@ -1,7 +1,7 @@
 <!-- 实时数据 - 实时趋势 -->
 <template>
     <div class="realtrend" v-loading="loading">
-        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
+        <el-tabs type="border-card" v-if="tabsList.length!=0" v-model="activeName" @tab-click="handleClick">
             <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
                 <div>
                     <div class="realtrend_top">
@@ -55,6 +55,7 @@
                 </div>
             </el-tab-pane>
         </el-tabs>
+        <el-empty v-else/>
     </div>
 </template>
 <script lang="ts" setup>
@@ -93,17 +94,16 @@ const myData = tableList
 const tabsList = ref([])
 //接收参数
 const params = ref({})
-const open = (val: any) => {
+const open = async (val: any) => {
     //获取指标tab
     loading.value = true
-    getDeviceTrendDataGroup().then(res => {
+   await getDeviceTrendDataGroup().then(res => {
         tabsList.value = res.data
         if (tabsList.value.length != 0) {
             // activeName.value = tabsList.value[0]?.id
             activeName.value = val.activeTrendName || 0
         }
         params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
-        loading.value = false
     })
     init()
     return
@@ -360,6 +360,7 @@ const init = () => {
     if (barCharts.value) {
         barCharts.value[activeName.value]?.initChart()
     }
+    loading.value = false
     return
 }
 

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

@@ -133,7 +133,7 @@
 <script setup lang="ts">
 import DeviceTree from '@/components/tree/govern/deviceTree.vue'
 import { mainHeight } from '@/utils/layout'
-import { ref, reactive, watch, onMounted, onBeforeUnmount, h } from 'vue'
+import { ref, reactive, watch, onMounted, onBeforeUnmount, h, inject } from 'vue'
 import { ElMessage, ElMessageBox, ElInput } from 'element-plus'
 import {
     getDeviceRootPath,
@@ -500,7 +500,7 @@ watch(
     }
 )
 const mqttRef = ref()
-
+const url: any = inject('MQTTURL')
 const connectMqtt = () => {
     if (mqttRef.value) {
         if (mqttRef.value.connected) {
@@ -516,9 +516,6 @@ const connectMqtt = () => {
         username: 't_user',
         password: 'njcnpqs'
     }
-    // 线上
-    // const url = 'wss://pqmcn.com:8087/mqtt'
-    const url = 'ws://192.168.1.24:8085/mqtt'
     mqttRef.value = mqtt.connect(url, options)
 }
 connectMqtt()