Web端添加治理模块状态展示界面、模块事件展示、主动询问模块状态功能

src/api/cs-device-boot/EquipmentDelivery.ts

@@ -121,8 +121,24 @@ export function getById(data?: any) {
 //测试项日志修改
 export function updateRecordData(data?: any) {
     return createAxios({
-        url: 'cs-device-boot/wlRecord/updateRecordData',
+        url: '/cs-device-boot/wlRecord/updateRecordData',
         method: 'POST',
         data
     })
 }
+//模块数据
+export function allModelData(data?: any) {
+    return createAxios({
+        url: '/cs-harmonic-boot/data/allModelData',
+        method: 'POST',
+        data
+    })
+}
+//刷新状态
+export function getModuleState(data?: any) {
+    return createAxios({
+        url: '/cs-harmonic-boot/data/getModuleState',
+        method: 'POST',
+        params: data
+    })
+}

src/components/echarts/MyEchart.vue

@@ -51,13 +51,7 @@ const initChart = () => {
         },
         tooltip: {
             trigger: 'axis',
-            axisPointer: {
+
-                type: 'shadow',
-                label: {
-                    color: '#fff',
-                    fontSize: 16
-                }
-            },
             textStyle: {
                 color: '#fff',
                 fontStyle: 'normal',
@@ -66,7 +60,7 @@ const initChart = () => {
             },
             backgroundColor: 'rgba(0,0,0,0.55)',
             borderWidth: 0,
-            confine: true,
+            // confine: true,
             ...(props.options?.tooltip || null)
         },
         toolbox: {
@@ -109,6 +103,7 @@ const initChart = () => {
                 type: 'inside',
                 height: 13,
                 start: 0,
+                
                 bottom: '20px',
                 end: 100
             },
@@ -117,7 +112,7 @@ const initChart = () => {
                 height: 13,
                 bottom: '20px',
                 end: 100
-            },
+            }
             // {
             //     show: true,
             //     yAxisIndex: 0,

src/components/form/datePicker/index.vue

@@ -417,7 +417,7 @@ const setTime = (flag = 0, e = 0) => {
 
     let data = ''
 
-    if ((dd < 4 || dd == 0) && interval.value != 4 && !props.theCurrentTime) {
+    if ((dd < 2 || dd == 0) && interval.value != 4 && !props.theCurrentTime) {
         data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
     } else {
         data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')

src/components/tree/govern/pointTree.vue

@@ -12,11 +12,9 @@ import { useDictData } from '@/stores/dictData'
 // const props = defineProps(['template'])
 interface Props {
     template?: boolean
-
 }
 const props = withDefaults(defineProps<Props>(), {
-    template: false,
+    template: false
-
 })
 defineOptions({
     name: 'govern/deviceTree'
@@ -29,29 +27,25 @@ const dictData = useDictData()
 const treRef = ref()
 const width = ref('')
 
-
-
-
-
-
 const info = () => {
+    tree.value = []
+    let arr1: any[] = []
+    let arr2: any[] = []
     getLineTree().then(res => {
-        let arr1: any[] = []
-        let arr2: any[] = []
         //治理设备
         res.data.map((item: any) => {
             if (item.name == '治理设备') {
                 item.children.forEach((item: any) => {
                     item.icon = 'el-icon-HomeFilled'
-                    item.level=1
+                    item.level = 1
                     item.color = config.getColorVal('elementUiPrimary')
                     item.children.forEach((item2: any) => {
                         item2.icon = 'el-icon-List'
-                        item2.level=1
+                        item2.level = 1
                         item2.color = config.getColorVal('elementUiPrimary')
                         item2.children.forEach((item3: any) => {
                             item3.icon = 'el-icon-Platform'
-                            item3.level=1
+                            item3.level = 1
                             item3.color =
                                 item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                             item3.children.forEach((item4: any) => {
@@ -71,13 +65,15 @@ const info = () => {
                     item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                     item.children.forEach((item2: any) => {
                         item2.icon = 'el-icon-Platform'
-                        item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
+                        item2.color =
+                            item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
                         arr2.push(item2)
                     })
                 })
             }
         })
         tree.value = res.data
+
         nextTick(() => {
             if (arr1.length) {
                 //初始化选中
@@ -98,7 +94,6 @@ const info = () => {
             //     })
             // }
             else {
-
                 emit('init', arr2[0])
             }
         })
@@ -108,17 +103,16 @@ const changePointType = (val: any, obj: any) => {
     emit('pointTypeChange', val, obj)
 }
 if (props.template) {
-    getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
+    getTemplateByDept({ id: dictData.state.area[0].id })
-        emit('Policy', res.data)
+        .then((res: any) => {
-        info()
+            emit('Policy', res.data)
-
+            info()
-    }).catch(err => {
+        })
-        info()
+        .catch(err => {
-    })
+            info()
+        })
 } else {
     info()
 }
-onMounted(() => {
+onMounted(() => {})
-
-})
 </script>

src/components/tree/point.vue

@@ -1,9 +1,16 @@
 <!-- 设备监控使用折叠面板渲染多个tree -->
 <template>
-    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex;  overflow: hidden">
+    <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" style="cursor: pointer"
+            v-show="menuCollapse"
-            v-if="route.path != '/admin/govern/reportCore/statistics/index'" />
+            @click="onMenuCollapse"
+            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            :class="menuCollapse ? 'unfold' : ''"
+            size="18"
+            class="fold ml10 mt20 menu-collapse"
+            style="cursor: pointer"
+            v-if="route.path != '/admin/govern/reportCore/statistics/index'"
+        />
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
             <div style="display: flex; align-items: center" class="mb10">
                 <el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
@@ -11,22 +18,43 @@
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
-                <Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                <Icon
-                    :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
+                    @click="onMenuCollapse"
+                    :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 && route.path != '/admin/govern/reportCore/statistics/index'" />
+                    v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
+                />
             </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-tree
                         :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
-                        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="zlDeviceData"
+                        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>
@@ -35,13 +63,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>
@@ -97,12 +136,23 @@ watch(
                     item.children.map((vv: any) => {
                         zlDeviceData.value.push(vv)
                     })
+                    // console.log('🚀 ~ item.children.map ~  zlDeviceData.value:', zlDeviceData.value)
                 } else if (item.name == '便携式设备') {
                     item.children.map((vv: any) => {
                         bxsDeviceData.value.push(vv)
                     })
                 }
             })
+            if (zlDeviceData.value.length != 0) {
+                activeName.value = '0'
+            }
+            if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
+                activeName.value = '1'
+            }
+            if (!zlDeviceData.value && !bxsDeviceData.value) {
+                activeName.value = ''
+            }
+            changeDevice(activeName.value)
         }
     },
     {
@@ -162,14 +212,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
     }
@@ -200,18 +248,10 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
 const treeRef2 = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef1, treeRef2 })
 onMounted(() => {
-    setTimeout(() => {
+    // nextTick(() => {
-        if (zlDeviceData.value.length != 0) {
+    //     // setTimeout(() => {
-            activeName.value = '0'
+    //     // }, 500)
-        }
+    // })
-        if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
-            activeName.value = '1'
-        }
-        if (!zlDeviceData.value && !bxsDeviceData.value) {
-            activeName.value = ''
-        }
-        changeDevice(activeName.value)
-    }, 500)
 })
 </script>
 

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

@@ -0,0 +1,216 @@
+<template>
+    <!-- 运行 运行(中断) 运行(故障) 离线 -->
+    <div :style="height" style="overflow-y: auto">
+        <el-collapse v-model="activeNames" v-loading="loading">
+            <el-collapse-item v-for="(item, index) in list" :key="index" :name="index">
+                <template #title>
+                    <div class="header">
+                        {{ item.moduleName }}
+                        <el-tag
+                            class="ml10"
+                            :type="item.moduleState == '离线' ? 'danger' : 'success'"
+                            size="small"
+                            effect="dark"
+                        >
+                            {{ item.moduleState }}
+                        </el-tag>
+                    </div>
+                </template>
+                <div :style="echartHeight" style="min-height: 150px">
+                    <MyEchart :options="item.options" v-if="item.dataList != null" />
+                    <el-empty description="暂无数据" style="height: 130px" v-else></el-empty>
+                </div>
+            </el-collapse-item>
+        </el-collapse>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive } 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'
+const activeNames = ref([0, 1, 2, 3])
+const list: any = ref([])
+const loading = ref(false)
+const height = ref(mainHeight(290))
+const echartHeight = ref(mainHeight(292))
+const setData = (data: any) => {
+    echartHeight.value = mainHeight(292 + data.length * 49, data.length)
+    data.forEach((item: any) => {
+        // console.log('🚀 ~ setData ~ data:', data)
+        if (item.dataList == null) return
+        item.options = {
+            title: {
+                show: false
+            },
+            tooltip: {
+                formatter: function (params: any) {
+                    var tips = params[0].data[0] + '：' + params[0].data[2] + '<br/>'
+                    if (params[0].data[3] == 1) {
+                        tips += '事件：' + params[0].data[4]
+                    }
+
+                    return tips
+                }
+            },
+            xAxis: {
+                type: 'time',
+                name: '时间',
+                //
+                axisLabel: {
+                    formatter: {
+                        day: '{MM}-{dd}',
+                        month: '{MM}',
+                        year: '{yyyy}'
+                    }
+                }
+            },
+
+            // 添加自定义图例
+            legend: {
+                show: true,
+                type: 'plain',
+                top: 0,
+                itemWidth: 14, // 图例标记宽度
+                itemHeight: 14, // 图例标记高度
+                data: [
+                    {
+                        name: '事件',
+                        icon: 'path://M0,10 L10,10 L5,0 Z', // 自定义三角形路径
+                        textStyle: {
+                            color: '#333',
+                            fontSize: 12
+                        }
+                    }
+                ],
+                itemStyle: {
+                    color: '#FFB74D' // 图例标记颜色与数据标记一致
+                }
+            },
+            toolbox: {
+                show: false
+            },
+            grid: {
+                top: '30px'
+            },
+            yAxis: {
+                max: 1,
+                data: ['运行', '中断'],
+                interval: 1,
+
+                axisLabel: {
+                    formatter: value => {
+                        // if (value === 0) {
+                        //     return `  `
+                        // }
+                        if (value === 0) {
+                            return `{lx|离线}  `
+                        }
+                        if (value === 1) {
+                            return `{yx|运行}  `
+                        }
+                    },
+                    rich: {
+                        yx: {
+                            backgroundColor: '#67c23a',
+                            color: '#fff',
+                            borderRadius: 5,
+                            padding: [1, 3],
+                            fontWeight: 600,
+                            fontSize: 12,
+                            align: 'center',
+                            textAlign: 'center',
+                            width: 35,
+                            height: 20,
+                            borderColor: '#000'
+                        },
+                        lx: {
+                            backgroundColor: '#f56c6c',
+                            color: '#fff',
+                            borderRadius: 5,
+                            padding: [1, 3],
+                            fontWeight: 600,
+                            fontSize: 12,
+                            align: 'center',
+                            textAlign: 'center',
+                            width: 35,
+                            height: 20,
+                            borderColor: '#000'
+                        }
+                    }
+                }
+            },
+
+            options: {
+                series: [
+                    {
+                        name: '事件',
+                        type: 'line',
+                        data: item.dataList.map((k: any) => [
+                            k.time,
+                            k.stateDesc == '离线' ? 0 : 1,
+                            k.stateDesc,
+                            k.dataType,
+                            k.eventName
+                        ]),
+                        step: 'end',
+                        symbol: 'none',
+
+                        // 动态显示标记
+                        markPoint: {
+                            symbol: 'triangle', // 使用三角形标记
+                            symbolSize: 10, // 标记大小
+                            symbolOffset: [0, 6], // 向上偏移，放置在线条上方
+                            data: item.dataList
+                                .filter((k: any) => k.dataType === 1)
+                                .map((k: any) => ({
+                                    name: k.stateDesc,
+                                    coord: [k.time, k.stateDesc === '离线' ? 0 : 1],
+                                    itemStyle: {
+                                        color: '#FFB74D', // 亮黄色填充
+                                        borderColor: '#FFB74D', // 边框颜色
+                                        borderWidth: 1 // 边框宽度
+                                    }
+                                }))
+                        }
+                    }
+                ]
+            }
+        }
+    })
+    list.value = data
+}
+const getModule = async (id: string) => {
+    loading.value = true
+    await getModuleState({ id: id }).then(res => {
+        res.data.forEach((item: any) => {
+            list.value.forEach((k: any) => {
+                if (k.moduleName === item.moduleName) {
+                    k.moduleState = item.moduleState
+                }
+            })
+        })
+
+        ElMessage.success('刷新成功')
+    })
+    loading.value = false
+}
+
+defineExpose({ setData, getModule })
+</script>
+<style lang="scss" scoped>
+:deep(.header) {
+    font-size: 16px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    .header-icon {
+        font-size: 20px;
+    }
+}
+:deep(.el-empty__image) {
+    height: 120px;
+}
+</style>

src/views/govern/manage/factory.vue

@@ -3,11 +3,21 @@
         <TableHeader>
             <template v-slot:select>
                 <el-form-item label="关键字筛选">
-                    <el-input   v-model.trim="tableStore.table.params.searchValue" style="width: 200px" clearable placeholder="请输入设备名称/网络设备ID" />
+                    <el-input
-                    
+                        v-model.trim="tableStore.table.params.searchValue"
+                        style="width: 200px"
+                        clearable
+                        placeholder="请输入设备名称/网络设备ID"
+                    />
                 </el-form-item>
-                <el-form-item label="设备类型">
+                <el-form-item label="流程状态">
-                    <!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
+                    <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.devType"
                         clearable
@@ -46,7 +56,7 @@
                         <el-option label="MQTT" value="MQTT"></el-option>
                         <el-option label="CLD" value="CLD"></el-option>
                     </el-select>
-                </el-form-item>
+                </el-form-item>-->
                 <!-- <el-form-item label="状态">
                     <el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
                         <el-option label="未注册" :value="1"></el-option>
@@ -372,6 +382,7 @@ const tableStore = new TableStore({
                 已连接: '已连接'
             }
         },
+
         {
             title: '通讯状态',
             field: 'runStatus',
@@ -386,7 +397,33 @@ const tableStore = new TableStore({
                 2: '在线'
             }
         },
-
+        {
+            title: '流程状态',
+            field: 'process',
+            width: 100,
+            render: 'tag',
+            custom: {
+                2: 'warning',
+                3: 'warning',
+                4: 'success'
+            },
+            replaceValue: {
+                2: '功能调试',
+                3: '出厂调试',
+                4: '正式投运'
+            }
+            // formatter: row => {
+            //     return row.cellValue == '1'
+            //         ? '设备登记'
+            //         : row.cellValue == '2'
+            //         ? '功能调试'
+            //         : row.cellValue == '3'
+            //         ? '出厂调试'
+            //         : row.cellValue == '4'
+            //         ? '设备投运'
+            //         : row.cellValue
+            // }
+        },
         {
             title: '操作',
             align: 'center',
@@ -647,11 +684,12 @@ const tableStore = new TableStore({
 tableStore.table.params.orderBy = 'desc'
 tableStore.table.params.devType = ''
 tableStore.table.params.devModel = ''
+tableStore.table.params.process = ''
 tableStore.table.params.devAccessMethod = ''
 tableStore.table.params.status = ''
 tableStore.table.params.sortBy = ''
 tableStore.table.params.orderBy = ''
-tableStore.table.params.searchValue=''
+tableStore.table.params.searchValue = ''
 
 // 设备类型
 const devTypeChange = (e: any) => {

src/views/govern/mxgraph/graphList/index.vue

@@ -36,7 +36,7 @@
                             </div>
                         </div>
                         <img v-if="item.fileContent"  :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
-                        <el-empty v-else description="暂无设计" />
+                        <el-empty v-else description="暂无设计"  style="height: 220px;"/>
                     </el-card>
                 </el-col>
             </el-row>