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

src/components/echarts/MyEchart.vue

@@ -130,7 +130,7 @@ const initChart = () => {
     handlerBar(options)
     // 处理柱状图
     chart.setOption(options, true)
-
+    chart.group = 'group'
     setTimeout(() => {
         chart.resize()
     }, 0)

src/components/tree/device.vue

@@ -1,34 +1,73 @@
 <!-- 设备管理使用折叠面板渲染多个tree -->
 <template>
     <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
-        <Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+        <Icon
-            :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
+            v-show="menuCollapse"
-            style="cursor: pointer" />
+            @click="onMenuCollapse"
+            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            :class="menuCollapse ? 'unfold' : ''"
+            size="18"
+            class="fold ml10 mt20 menu-collapse"
+            style="cursor: pointer"
+        />
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
             <div style="display: flex; align-items: center" class="mb10">
                 <!-- <el-form-item> -->
-                <el-input maxlength="32" show-word-limit v-model.trim="filterText" autocomplete="off"
+                <el-input
-                    placeholder="请输入内容" clearable>
+                    maxlength="32"
+                    show-word-limit
+                    v-model.trim="filterText"
+                    autocomplete="off"
+                    placeholder="请输入内容"
+                    clearable
+                >
                     <template #prefix>
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
                 <!-- </el-form-item> -->
-                <Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                <Icon
-                    :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
+                    @click="onMenuCollapse"
-                    style="cursor: pointer" v-if="props.canExpand" />
+                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                    :class="menuCollapse ? 'unfold' : ''"
+                    size="18"
+                    class="fold ml10 menu-collapse"
+                    style="cursor: pointer"
+                    v-if="props.canExpand"
+                />
             </div>
-            <el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
+            <el-collapse
-                @change="changeDevice">
+                :accordion="true"
+                v-model.trim="activeName"
+                style="flex: 1; height: 100%"
+                @change="changeDevice"
+            >
                 <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
+                    <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
+                        <el-option label="功能调试" value="2"></el-option>
+                        <el-option label="出厂调试" value="3"></el-option>
+                        <el-option label="正式投运" value="4"></el-option>
+                    </el-select>
                     <el-tree
-                        :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
+                        :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }"
-                        ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
+                        ref="treeRef1"
-                        node-key="id" default-expand-all v-bind="$attrs" :data="zlDeviceData" style="overflow: auto">
+                        :props="defaultProps"
+                        highlight-current
+                        :filter-node-method="filterNode"
+                        node-key="id"
+                        default-expand-all
+                        v-bind="$attrs"
+                        :data="zlDevList"
+                        style="overflow: auto"
+                    >
                         <template #default="{ node, data }">
                             <span class="custom-tree-node">
-                                <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
+                                <Icon
-                                    v-if="data.icon" />
+                                    :name="data.icon"
+                                    style="font-size: 16px"
+                                    :style="{ color: data.color }"
+                                    v-if="data.icon"
+                                />
                                 <span style="margin-left: 4px">{{ node.label }}</span>
                             </span>
                         </template>
@@ -37,13 +76,24 @@
                 <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
                     <el-tree
                         :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
-                        ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
+                        ref="treeRef2"
-                        :filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
+                        :props="defaultProps"
-                        style="overflow: auto">
+                        highlight-current
+                        default-expand-all
+                        :filter-node-method="filterNode"
+                        node-key="id"
+                        :data="bxsDeviceData"
+                        v-bind="$attrs"
+                        style="overflow: auto"
+                    >
                         <template #default="{ node, data }">
                             <span class="custom-tree-node">
-                                <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
+                                <Icon
-                                    v-if="data.icon" />
+                                    :name="data.icon"
+                                    style="font-size: 16px"
+                                    :style="{ color: data.color }"
+                                    v-if="data.icon"
+                                />
                                 <span style="margin-left: 4px">{{ node.label }}</span>
                             </span>
                         </template>
@@ -84,8 +134,10 @@ const defaultProps = {
     label: 'name',
     value: 'id'
 }
+const process = ref('2')
 //治理设备数据
 const zlDeviceData = ref([])
+const zlDevList = ref<any>([])
 //便携式设备数据
 const bxsDeviceData = ref([])
 watch(
@@ -118,6 +170,35 @@ watch(filterText, val => {
         treeRef2.value!.filter(val)
     }
 })
+watch(process, val => {
+    if (val == '') {
+        zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
+    } else {
+        zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
+    }
+    setTimeout(() => {
+        changeDevice(activeName.value)
+    }, 0)
+})
+function filterProcess(nodes: any) {
+    return nodes
+        .map(node => {
+            // 递归处理子节点
+            const children = node.children ? filterProcess(node.children) : []
+
+            // 如果当前节点的process=4，或者有子节点满足条件，则保留当前节点
+            if (node.process == process.value || children.length > 0) {
+                return {
+                    ...node,
+                    children: node.children
+                }
+            }
+
+            // 否则过滤掉当前节点
+            return null
+        })
+        .filter(Boolean) // 移除null节点
+}
 const onMenuCollapse = () => {
     menuCollapse.value = !menuCollapse.value
     proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
@@ -126,14 +207,12 @@ const filterNode = (value: string, data: any, node: any) => {
     if (!value) return true
     // return data.name.includes(value)
     if (data.name) {
-
         return chooseNode(value, data, node)
     }
 }
 
 // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
 const chooseNode = (value: string, data: any, node: any) => {
-
     if (data.name.indexOf(value) !== -1) {
         return true
     }
@@ -161,7 +240,9 @@ const chooseNode = (value: string, data: any, node: any) => {
 
 const changeDevice = (val: any) => {
     let arr1: any = []
-    zlDeviceData.value.forEach((item: any) => {
+
+    //zlDeviceData
+    zlDevList.value.forEach((item: any) => {
         item.children.forEach((item2: any) => {
             item2.children.forEach((item3: any) => {
                 arr1.push(item3)
@@ -197,6 +278,7 @@ defineExpose({ treeRef1, treeRef2 })
 onMounted(() => {
     setTimeout(() => {
         if (zlDeviceData.value.length != 0) {
+            zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
             activeName.value = '0'
         }
         if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
@@ -205,7 +287,9 @@ onMounted(() => {
         if (!zlDeviceData.value && !bxsDeviceData.value) {
             activeName.value = ''
         }
+        nextTick(() => {
             changeDevice(activeName.value)
+        })
     }, 500)
 })
 </script>

src/components/tree/point.vue

@@ -35,8 +35,14 @@
                 @change="changeDevice"
             >
                 <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
+                    <el-select v-model.trim="process" clearable placeholder="请选择状态" class="mb10">
+                        <el-option label="功能调试" value="2"></el-option>
+                        <el-option label="出厂调试" value="3"></el-option>
+                        <el-option label="正式投运" value="4"></el-option>
+                    </el-select>
+
                     <el-tree
-                        :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
+                        :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 340px)' : 'calc(100vh - 278px)' }"
                         ref="treeRef1"
                         :props="defaultProps"
                         highlight-current
@@ -44,7 +50,7 @@
                         node-key="id"
                         default-expand-all
                         v-bind="$attrs"
-                        :data="zlDeviceData"
+                        :data="zlDevList"
                         style="overflow: auto"
                     >
                         <template #default="{ node, data }">
@@ -94,7 +100,7 @@
 <script lang="ts" setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
-import { ref, watch, defineEmits, onMounted, nextTick } from 'vue'
+import { ref, watch, defineEmits, onMounted, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 defineOptions({
     name: 'govern/tree'
@@ -113,7 +119,7 @@ const props = withDefaults(defineProps<Props>(), {
     type: '',
     data: []
 })
-
+const process = ref('2')
 const route = useRoute()
 const { proxy } = useCurrentInstance()
 const menuCollapse = ref(false)
@@ -125,6 +131,7 @@ const defaultProps = {
 }
 //治理设备数据
 const zlDeviceData = ref<any>([])
+const zlDevList = ref<any>([])
 //便携式设备数据
 const bxsDeviceData = ref<any>([])
 watch(
@@ -144,6 +151,7 @@ watch(
                 }
             })
             if (zlDeviceData.value.length != 0) {
+                zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
                 activeName.value = '0'
             }
             if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
@@ -152,7 +160,9 @@ watch(
             if (!zlDeviceData.value && !bxsDeviceData.value) {
                 activeName.value = ''
             }
+            nextTick(() => {
                 changeDevice(activeName.value)
+            })
         }
     },
     {
@@ -168,9 +178,21 @@ watch(filterText, val => {
         treeRef2.value!.filter(val)
     }
 })
+watch(process, val => {
+    if (val == '') {
+        zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
+    } else {
+        zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
+    }
+    setTimeout(() => {
+        changeDevice(activeName.value)
+    }, 0)
+})
+
 const changeDevice = (val: any) => {
     let arr1: any = []
-    zlDeviceData.value.forEach((item: any) => {
+    //zlDeviceData
+    zlDevList.value.forEach((item: any) => {
         item.children.forEach((item2: any) => {
             item2.children.forEach((item3: any) => {
                 item3.children.forEach((item4: any) => {
@@ -215,7 +237,25 @@ const filterNode = (value: string, data: any, node: any) => {
         return chooseNode(value, data, node)
     }
 }
+function filterProcess(nodes: any) {
+    return nodes
+        .map(node => {
+            // 递归处理子节点
+            const children = node.children ? filterProcess(node.children) : []
 
+            // 如果当前节点的process=4，或者有子节点满足条件，则保留当前节点
+            if (node.process == process.value || children.length > 0) {
+                return {
+                    ...node,
+                    children: node.children
+                }
+            }
+
+            // 否则过滤掉当前节点
+            return null
+        })
+        .filter(Boolean) // 移除null节点
+}
 // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
 const chooseNode = (value: string, data: any, node: any) => {
     if (data.name.indexOf(value) !== -1) {

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="请输入设备名称" /> -->

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="请输入设备名称" /> -->

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="请输入设备名称" /> -->

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

@@ -1267,12 +1267,8 @@ const handleClick = async (tab?: any) => {
     }
     //模块数据
     if (dataSet.value.includes('_moduleData')) {
-
+        setTimeout(async () => {
-        setTimeout(() => {
+            if (tab.props != undefined) await (datePickerRef.value && datePickerRef.value?.setInterval(5))
-            if ((tab && tab.props) != undefined) {
-                datePickerRef.value && datePickerRef.value?.setInterval(5)
-            }
-        }, 0)
 
             let obj = {
                 // devId: deviceId.value, //e.id
@@ -1300,6 +1296,7 @@ const handleClick = async (tab?: any) => {
                         }, 1500)
                     })
             }, 0)
+        }, 0)
     }
 
     //查询当前指标

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
+                        <el-tag class="ml10" :type="getType(item.moduleState)" size="small" effect="dark">
-                            class="ml10"
-                            :type="item.moduleState == '离线' ? 'danger' : 'success'"
-                            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">
+                    <el-tabs v-model="activeName" type="card" v-if="echartList?.dataList != null">
-                        <MyEchart :options="echartList.options" v-if="echartList.dataList != null" />
+                        <el-tab-pane label="状态" name="0">
-                        <el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
+                            <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,19 +139,20 @@ const setData = (data: any) => {
                 top: '30px'
             },
             yAxis: {
-                max: 1,
+                max: 1.03,
-                data: ['运行', '中断'],
+                data: ['运行', '停止', '中断'],
-                interval: 1,
+                interval: 0.01,
 
                 axisLabel: {
                     formatter: value => {
                         // if (value === 0) {
                         //     return `  `
                         // }
-                        if (value === 0) {
+                        if (value === 0.03) {
                             return `{lx|离线}`
-                        }
+                        } else if (value === 0.5) {
-                        if (value === 1) {
+                            return `{tz|停止}`
+                        } else if (value === 1) {
                             return `{yx|运行}`
                         }
                     },
@@ -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>

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) => {