修改模块运行状态页面添加数据展示

2025-07-09 16:48:18 +08:00
parent e1851f7ebb
commit 7ab8e4ed9c
9 changed files with 404 additions and 96 deletions
--- a/src/views/govern/alarm/Device.vue
+++ b/src/views/govern/alarm/Device.vue
@@ -2,7 +2,7 @@
    <TableHeader datePicker ref="refheader" showExport>
        <template v-slot:select>
            <el-form-item label="数据来源">
-                <el-cascader v-model.trim="tableStore.table.params.cascader" placeholder="请选择数据来源"
+                <el-cascader v-model.trim="tableStore.table.params.cascader" filterable placeholder="请选择数据来源"
                    @change="sourceChange" :options="deviceTreeOptions" :show-all-levels="false"
                    :props="{ checkStrictly: true }" clearable></el-cascader>
                <!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
--- a/src/views/govern/alarm/Steady.vue
+++ b/src/views/govern/alarm/Steady.vue
@@ -2,7 +2,7 @@
    <TableHeader datePicker ref="refheader" showExport>
        <template v-slot:select>
            <el-form-item label="数据来源">
-                <el-cascader v-model.trim="tableStore.table.params.cascader" placeholder="请选择数据来源"
+                <el-cascader v-model.trim="tableStore.table.params.cascader" filterable placeholder="请选择数据来源"
                    @change="sourceChange" :options="deviceTreeOptions" :show-all-levels="false"
                    :props="{ checkStrictly: true }" clearable></el-cascader>
                <!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
--- a/src/views/govern/alarm/Transient.vue
+++ b/src/views/govern/alarm/Transient.vue
@@ -3,7 +3,7 @@
        <TableHeader datePicker showExport>
            <template v-slot:select>
                <el-form-item label="数据来源">
-                    <el-cascader placeholder="请选择数据来源" @change="sourceChange"
+                    <el-cascader placeholder="请选择数据来源" @change="sourceChange" filterable
                        v-model.trim="tableStore.table.params.cascader" :options="deviceTreeOptions"
                        :show-all-levels="false" :props="{ checkStrictly: true }" clearable></el-cascader>
                    <!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
--- a/src/views/govern/device/control/index.vue
+++ b/src/views/govern/device/control/index.vue
@@ -1267,38 +1267,35 @@ const handleClick = async (tab?: any) => {
    }
    //模块数据
    if (dataSet.value.includes('_moduleData')) {
+        setTimeout(async () => {
+            if (tab.props != undefined) await (datePickerRef.value && datePickerRef.value?.setInterval(5))

-        setTimeout(() => {
-            if ((tab && tab.props) != undefined) {
-                datePickerRef.value && datePickerRef.value?.setInterval(5)
+            let obj = {
+                // devId: deviceId.value, //e.id
+                lineId: lineId.value, //e.pid
+                startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
+                endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
            }
-        }, 0)
-
-        let obj = {
-            // devId: deviceId.value, //e.id
-            lineId: lineId.value, //e.pid
-            startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
-            endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
-        }
-        await setTimeout(() => {
-            allModelData(obj)
-                .then((res: any) => {
-                    tableData.value = res.data
-                    formInline.total = res.data.total
-                    tableLoading.value = false
-                    setTimeout(() => {
-                        //targetType
-                        moduleDataRef.value?.setData(res.data)
-                    }, 500)
-                    setTimeout(() => {
-                        loading.value = false
-                    }, 1500)
-                })
-                .catch(e => {
-                    setTimeout(() => {
+            await setTimeout(() => {
+                allModelData(obj)
+                    .then((res: any) => {
+                        tableData.value = res.data
+                        formInline.total = res.data.total
                        tableLoading.value = false
-                    }, 1500)
-                })
+                        setTimeout(() => {
+                            //targetType
+                            moduleDataRef.value?.setData(res.data)
+                        }, 500)
+                        setTimeout(() => {
+                            loading.value = false
+                        }, 1500)
+                    })
+                    .catch(e => {
+                        setTimeout(() => {
+                            tableLoading.value = false
+                        }, 1500)
+                    })
+            }, 0)
        }, 0)
    }

--- a/src/views/govern/device/control/moduleData.vue
+++ b/src/views/govern/device/control/moduleData.vue
@@ -4,7 +4,7 @@
        <div class="container">
            <div class="tabs-container">
                <!-- 左侧标签头 -->
-                <div class="tab-list" :style="echartHeight" style="overflow-y: auto">
+                <div class="tab-list" :style="titleHeight" style="overflow-y: auto">
                    <button
                        v-for="(item, index) in list"
                        :key="index"
@@ -12,12 +12,7 @@
                        @click="changeTab(index)"
                    >
                        <span>{{ item.moduleName }}</span>
-                        <el-tag
-                            class="ml10"
-                            :type="item.moduleState == '离线' ? 'danger' : 'success'"
-                            size="small"
-                            effect="dark"
-                        >
+                        <el-tag class="ml10" :type="getType(item.moduleState)" size="small" effect="dark">
                            {{ item.moduleState }}
                        </el-tag>
                    </button>
@@ -25,10 +20,20 @@

                <!-- 右侧内容区域 -->
                <div class="tab-content-container flex-1" :key="activeTab">
-                    <div :style="echartHeight">
-                        <MyEchart :options="echartList.options" v-if="echartList.dataList != null" />
-                        <el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
-                    </div>
+                    <el-tabs v-model="activeName" type="card" v-if="echartList?.dataList != null">
+                        <el-tab-pane label="状态" name="0">
+                            <div :style="echartHeight" class="pt10">
+                                <MyEchart :options="echartList.options" />
+                            </div>
+                        </el-tab-pane>
+                        <el-tab-pane label="数据" name="1">
+                            <div :style="echartHeight" class="pt10">
+                                <MyEchart style="height: 50%" :options="echartList.loadList" />
+                                <MyEchart style="height: 50%" :options="echartList.modOutList" />
+                            </div>
+                        </el-tab-pane>
+                    </el-tabs>
+                    <el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
                </div>
            </div>
        </div>
@@ -56,20 +61,23 @@
    </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive,onBeforeUnmount } from 'vue'
 import { mainHeight } from '@/utils/layout'
 import { WarnTriangleFilled } from '@element-plus/icons-vue'
 import { getModuleState } from '@/api/cs-device-boot/EquipmentDelivery'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { ElMessage } from 'element-plus'
-import { chain } from 'lodash'
+import { yMethod } from '@/utils/echartMethod'
+import { k } from 'vite/dist/node/types.d-aGj9QkWt'
 const list: any = ref([])
 const loading = ref(false)
 const height = ref(mainHeight(290))
-const echartHeight = ref(mainHeight(302))
+const titleHeight = ref(mainHeight(302))
+const echartHeight = ref(mainHeight(342))
 const activeTab = ref(0)
+const activeName = ref('0')
 const echartList: any = ref({})
-
+import * as echarts from 'echarts' // 全引入
 const setData = (data: any) => {
    activeTab.value = 0
    // echartHeight.value = mainHeight(292 + data.length * 49, data.length)
@@ -107,7 +115,7 @@ const setData = (data: any) => {
            legend: {
                show: true,
                type: 'plain',
-                top: 0,
+                top: 10,
                itemWidth: 14, // 图例标记宽度
                itemHeight: 14, // 图例标记高度
                data: [
@@ -131,20 +139,21 @@ const setData = (data: any) => {
                top: '30px'
            },
            yAxis: {
-                max: 1,
-                data: ['运行', '中断'],
-                interval: 1,
+                max: 1.03,
+                data: ['运行', '停止', '中断'],
+                interval: 0.01,

                axisLabel: {
                    formatter: value => {
                        // if (value === 0) {
                        //     return `  `
                        // }
-                        if (value === 0) {
-                            return `{lx|离线}  `
-                        }
-                        if (value === 1) {
-                            return `{yx|运行}  `
+                        if (value === 0.03) {
+                            return `{lx|离线}`
+                        } else if (value === 0.5) {
+                            return `{tz|停止}`
+                        } else if (value === 1) {
+                            return `{yx|运行}`
                        }
                    },
                    rich: {
@@ -173,8 +182,24 @@ const setData = (data: any) => {
                            width: 35,
                            height: 20,
                            borderColor: '#000'
+                        },
+                        tz: {
+                            backgroundColor: '#e6a23c',
+                            color: '#fff',
+                            borderRadius: 5,
+                            padding: [1, 3],
+                            fontWeight: 600,
+                            fontSize: 12,
+                            align: 'center',
+                            textAlign: 'center',
+                            width: 35,
+                            height: 20,
+                            borderColor: '#000'
                        }
                    }
+                },
+                splitLine: {
+                    show: false
                }
            },

@@ -185,7 +210,7 @@ const setData = (data: any) => {
                        type: 'line',
                        data: item.dataList.map((k: any) => [
                            k.time,
-                            k.stateDesc == '离线' ? 0 : 1,
+                            k.stateDesc == '离线' ? 0.03 : k.stateDesc == '运行' ? 1 : 0.5,
                            k.stateDesc,
                            k.dataType,
                            k.eventName
@@ -202,7 +227,7 @@ const setData = (data: any) => {
                                .filter((k: any) => k.dataType === 1)
                                .map((k: any) => ({
                                    name: k.stateDesc,
-                                    coord: [k.time, k.stateDesc === '离线' ? 0 : 1],
+                                    coord: [k.time, k.stateDesc == '离线' ? 0.03 : k.stateDesc == '运行' ? 1 : 0.5],
                                    itemStyle: {
                                        color: '#FFB74D', // 亮黄色填充
                                        borderColor: '#FFB74D', // 边框颜色
@@ -214,10 +239,138 @@ const setData = (data: any) => {
                ]
            }
        }
+        let [loadMin, loadMax] = yMethod(item.loadList.map(k => (k.data == 3.14159 ? 0 : k.data)))
+        item.loadList = {
+            title: {
+                text: '负载电流'
+            },
+
+            xAxis: {
+                type: 'time',
+                name: '时间',
+                //
+                axisLabel: {
+                    formatter: {
+                        day: '{MM}-{dd}',
+                        month: '{MM}',
+                        year: '{yyyy}'
+                    }
+                }
+            },
+
+            toolbox: {
+                show: false
+            },
+            grid: {
+                top: '30px'
+            },
+            yAxis: {
+                name: 'A',
+                min: loadMin,
+                max: loadMax
+            },
+            color: ['#FFCC00', '#009900', '#CC0000'],
+            options: {
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        data: item.loadList
+                            .filter((k: any) => k.phasicType == 'A')
+                            .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
+                        smooth: true, //让线变得平滑
+                        symbol: 'none'
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        data: item.loadList
+                            .filter((k: any) => k.phasicType == 'B')
+                            .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
+                        smooth: true, //让线变得平滑
+                        symbol: 'none'
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        data: item.loadList
+                            .filter((k: any) => k.phasicType == 'C')
+                            .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
+                        smooth: true, //让线变得平滑
+                        symbol: 'none'
+                    }
+                ]
+            }
+        }
+        let [modOuMin, modOuMax] = yMethod(item.modOutList.map(k => (k.data == 3.14159 ? 0 : k.data)))
+
+        item.modOutList = {
+            title: {
+                text: '输出电流'
+            },
+
+            xAxis: {
+                type: 'time',
+                name: '时间',
+                //
+                axisLabel: {
+                    formatter: {
+                        day: '{MM}-{dd}',
+                        month: '{MM}',
+                        year: '{yyyy}'
+                    }
+                }
+            },
+
+            toolbox: {
+                show: false
+            },
+            grid: {
+                top: '30px'
+            },
+            yAxis: {
+                name: 'A',
+                min: modOuMin,
+                max: modOuMax
+            },
+            color: ['#FFCC00', '#009900', '#CC0000'],
+            options: {
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        data: item.modOutList
+                            .filter((k: any) => k.phasicType == 'A')
+                            .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
+                        smooth: true, //让线变得平滑
+                        symbol: 'none'
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        data: item.modOutList
+                            .filter((k: any) => k.phasicType == 'B')
+                            .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
+                        smooth: true, //让线变得平滑
+                        symbol: 'none'
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        data: item.modOutList
+                            .filter((k: any) => k.phasicType == 'C')
+                            .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
+                        smooth: true, //让线变得平滑
+                        symbol: 'none'
+                    }
+                ]
+            }
+        }
    })

    list.value = data
    echartList.value = list.value[activeTab.value]
+    echarts.connect('group')
 }
 const getModule = async (id: string) => {
    loading.value = true
@@ -238,8 +391,21 @@ const changeTab = (e: any) => {
    echartList.value = list.value[e]
    activeTab.value = e
 }
+const getType = (type: string) => {
+    switch (type) {
+        case '运行':
+            return 'success'
+        case '离线':
+            return 'danger'
+        default:
+            return 'warning'
+    }
+}

 defineExpose({ setData, getModule })
+onBeforeUnmount(() => {
+    echarts.disconnect('group')
+})
 </script>

 <style lang="scss" scoped>
@@ -311,5 +477,6 @@ defineExpose({ setData, getModule })

 .tab-content-container {
    flex: 1;
+    padding: 0 10px;
 }
 </style>
--- a/src/views/govern/manage/factory.vue
+++ b/src/views/govern/manage/factory.vue
@@ -10,13 +10,30 @@
                        placeholder="请输入设备名称/网络设备ID"
                    />
                </el-form-item>
-                <el-form-item label="流程状态">
+                <el-form-item label="流程阶段">
                    <el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择状态">
                        <el-option label="功能调试" :value="2"></el-option>
                        <el-option label="出厂调试" :value="3"></el-option>
                        <el-option label="正式投运" :value="4"></el-option>
                    </el-select>
                </el-form-item>
+                <el-form-item label="物联状态">
+                    <el-select
+                        v-model.trim="tableStore.table.params.connectStatus"
+                        clearable
+                        placeholder="请选择物联状态"
+                    >
+                        <el-option label="已连接" :value="1"></el-option>
+                        <el-option label="未连接" :value="0"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="设备状态">
+                    <el-select v-model.trim="tableStore.table.params.runStatus" clearable placeholder="请选择状态">
+                        
+                        <el-option label="在线" :value="2"></el-option>
+                        <el-option label="离线" :value="1"></el-option>
+                    </el-select>
+                </el-form-item>
                <!-- <el-form-item label="设备类型">
                    <el-select
                        v-model.trim="tableStore.table.params.devType"
@@ -283,6 +300,7 @@ const formDevModelOptionsFilter = computed(() => {
 const tableStore = new TableStore({
    url: '/cs-device-boot/EquipmentDelivery/list',
    method: 'POST',
+
    column: [
        {
            width: '60',
@@ -369,7 +387,7 @@ const tableStore = new TableStore({
        },
        // { title: 'MQTT状态', field: 'connectStatus',   width: 100, },
        {
-            title: 'MQTT状态',
+            title: '物联状态',
            field: 'connectStatus',
            width: 100,
            render: 'tag',
@@ -384,7 +402,7 @@ const tableStore = new TableStore({
        },

        {
-            title: '通讯状态',
+            title: '设备状态',
            field: 'runStatus',
            width: 100,
            render: 'tag',
@@ -398,7 +416,7 @@ const tableStore = new TableStore({
            }
        },
        {
-            title: '流程状态',
+            title: '流程阶段',
            field: 'process',
            width: 100,
            render: 'tag',
@@ -684,12 +702,14 @@ const tableStore = new TableStore({
 tableStore.table.params.orderBy = 'desc'
 tableStore.table.params.devType = ''
 tableStore.table.params.devModel = ''
-tableStore.table.params.process = ''
+tableStore.table.params.process = 2
 tableStore.table.params.devAccessMethod = ''
 tableStore.table.params.status = ''
 tableStore.table.params.sortBy = ''
 tableStore.table.params.orderBy = ''
 tableStore.table.params.searchValue = ''
+tableStore.table.params.connectStatus = ''
+tableStore.table.params.runStatus = ''

 // 设备类型
 const devTypeChange = (e: any) => {