添加工程树

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

@@ -141,7 +141,8 @@
                             v-show="
                                 dataSet.includes('_items') ||
                                 dataSet.indexOf('_history') != -1 ||
-                                dataSet.indexOf('_moduleData') != -1
+                                dataSet.indexOf('_moduleData') != -1||
+                                dataSet.indexOf('_devRunTrend') != -1
                             "
                         >
                             <DatePicker ref="datePickerRef"></DatePicker>
@@ -165,7 +166,7 @@
                             </el-select> -->
                             <el-radio-group
                                 v-model.trim="formInline.dataLevel"
-                                v-if="!dataSet.includes('_moduleData') && TrendList?.lineType == 1"
+                                v-if="!dataSet.includes('_devRunTrend') &&!dataSet.includes('_moduleData') && TrendList?.lineType == 1"
                                 :disabled="TrendList?.lineType != 1"
                                 @change="handleClick"
                             >
@@ -525,6 +526,14 @@
                 >
                     <moduleData ref="moduleDataRef" @onSubmit="handleClick" />
                 </div>
+                <!-- 运行趋势 -->
+                <div
+                    style="height: calc(100vh - 395px)"
+                    v-if="dataSet.indexOf('_devRunTrend') != -1"
+                    v-loading="tableLoading"
+                >
+                    <operatingTrend ref="operatingTrendRef" @onSubmit="handleClick" />
+                </div>
                 <div v-if="!tableData" style="height: 42px"></div>
             </el-tabs>
         </div>
@@ -548,7 +557,8 @@ import {
     getOverLimitData,
     queryDictType,
     getById,
-    allModelData
+    allModelData,
+    getRawData
 } from '@/api/cs-device-boot/EquipmentDelivery'
 import { deviceHisData, deviceRtData, realTimeData, getTestData } from '@/api/cs-device-boot/csGroup'
 import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
@@ -557,6 +567,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
 import Trend from './tabs/trend.vue' //趋势数据
 import realTime from './tabs/realtime.vue' //实时数据-主界面
 import realTrend from './tabs/components/realtrend.vue' //实时数据-实时趋势
+import operatingTrend from './tabs/operatingTrend.vue' //运行趋势
 import harmonicSpectrum from './tabs/components/harmonicSpectrum.vue' //实时数据-谐波频谱子页面
 import recordWoves from './tabs/components/recordwoves.vue' //实时数据-实时录波子页面
 import offLineDataImport from './offLineDataImport/index.vue'
@@ -660,6 +671,7 @@ const volConTypeList = dictData.getBasicData('Dev_Connect')
 // }
 //谐波频谱
 const realTrendRef = ref()
+const operatingTrendRef = ref()
 const changeTrendType = (val: any) => {
     trendDataTime.value = ''
     activeTrendName.value = val * 1
@@ -920,6 +932,10 @@ const nodeClick = async (e: anyObj, node: any) => {
                         if (item.type === 'moduleData') {
                             item.id = item.id + '_moduleData'
                         }
+                        // 模块数据
+                        if (item.type === 'devRunTrend') {
+                            item.id = item.id + '_devRunTrend'
+                        }
                     })
                     res.data.dataSetList = res.data.dataSetList.filter((item: any) => item.name != '历史统计数据')
                     //便携式设备默认二次值
@@ -1316,6 +1332,39 @@ const handleClick = async (tab?: any) => {
             }, 0)
         }, 0)
     }
+    //运行趋势
+    if (dataSet.value.includes('_devRunTrend')) {
+        setTimeout(async () => {
+            if (tab.props != undefined) await (datePickerRef.value && datePickerRef.value?.setInterval(5))
+
+            let obj = {
+                // devId: deviceId.value, //e.id
+                lineId: [deviceId.value], //e.pid
+                startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
+                endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
+            }
+            await setTimeout(() => {
+                getRawData(obj)
+                    .then((res: any) => {
+                     
+                        tableLoading.value = false
+                        setTimeout(() => {
+                           
+                            
+                            operatingTrendRef.value?.setData(res.data)
+                        }, 500)
+                        setTimeout(() => {
+                            loading.value = false
+                        }, 1500)
+                    })
+                    .catch(e => {
+                        setTimeout(() => {
+                            tableLoading.value = false
+                        }, 1500)
+                    })
+            }, 0)
+        }, 0)
+    }
 
     //查询当前指标
     if (!dataSet.value.includes('_')) {

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

@@ -0,0 +1,165 @@
+<template>
+    <div :style="height">
+        <MyEchart v-if="list.length != 0" :options="options1" style="height: 100%; width: 100%" class="pt10" />
+        <el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
+    </div>
+</template>
+
+<script setup lang="ts">
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { ref, reactive } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { max } from 'lodash'
+const height = ref(mainHeight(290))
+const list = ref([])
+const options1 = ref({})
+const setData = (data: any) => {
+    // list.value = [...fillDataFromFirstTime(data),...data]
+    list.value = data
+    init()
+}
+/**
+ * 补全离散数据（严格从数组第一个time开始，最后一个time结束）
+ * @param {Array} data 原始离散数据数组
+ * @param {number} interval 补全时间间隔（秒，默认10秒）
+ * @returns {Array} 补全后的连续数据
+ */
+function fillDataFromFirstTime(data, interval = 10) {
+    // 1. 基础校验
+    if (!Array.isArray(data) || data.length === 0) {
+        console.error('原始数据必须是非空数组')
+        return []
+    }
+
+    // 2. 锁定起始时间：直接取数组第一个元素的time（不做任何偏移）
+    const firstItem = data[0]
+    const startTime = new Date(firstItem.time)
+    const startTimestamp = startTime.getTime()
+
+    // 3. 锁定结束时间：取数组最后一个元素的time
+    const lastItem = data[data.length - 1]
+    const endTime = new Date(lastItem.time)
+    const endTimestamp = endTime.getTime()
+
+    // 4. 预处理：按时间排序（防止原始数据乱序）
+    const sortedData = [...data].sort((a, b) => new Date(a.time) - new Date(b.time))
+
+    // 5. 初始化状态（继承第一个数据的type）
+    let currentType = firstItem.type
+    let currentDesc = firstItem.description
+    let nextStatusIndex = 1 // 指向待切换的下一个状态点
+
+    const filledData = []
+
+    // 6. 核心循环：从第一个time开始，按间隔补全到最后一个time
+    for (let ts = startTimestamp; ts <= endTimestamp; ts += interval * 1000) {
+        const currentDate = new Date(ts)
+        // 格式化时间为和原始数据一致的 "YYYY-MM-DD HH:mm:ss" 格式
+        const formattedTime = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(
+            2,
+            '0'
+        )}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(
+            2,
+            '0'
+        )}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`
+
+        // 7. 检查是否到达下一个状态切换点
+        if (nextStatusIndex < sortedData.length) {
+            const nextStatusTime = new Date(sortedData[nextStatusIndex].time).getTime()
+            if (ts >= nextStatusTime) {
+                currentType = sortedData[nextStatusIndex].type
+                currentDesc = sortedData[nextStatusIndex].description
+                nextStatusIndex++
+            }
+        }
+
+        // 8. 生成补全数据项（结构与原始数据完全一致）
+        filledData.push({
+            time: formattedTime,
+            devId: firstItem.devId,
+            description: currentDesc,
+            type: currentType
+        })
+    }
+
+    return filledData
+}
+
+const init = () => {
+    options1.value = {
+        title: {
+            text: '运行状态'
+        },
+        legend: {
+            show: false
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                var res = params[0].data[0] + '<br/>运行状态：'
+                var texts = ''
+                if (params[0].data[1] === 1 || params[0].data[1] === '1') {
+                    texts = '中断'
+                } else if (params[0].data[1] === 10 || params[0].data[1] === '10') {
+                    texts = '正常'
+                }
+                res = res + texts
+                return res
+            }
+        },
+        xAxis: {
+            // type: 'category',
+            // data: data.updateTime
+            type: 'time',
+            name: '时间',
+            //
+            axisLabel: {
+                formatter: {
+                    day: '{MM}-{dd}',
+                    month: '{MM}',
+                    year: '{yyyy}'
+                }
+            }
+        },
+        yAxis: {
+            name: '',
+            type: 'value',
+            max: 11,
+            interval: 1,
+            splitLine: {
+                lineStyle: {
+                    // 使用深浅的间隔色
+                    color: ['#ccc'],
+                    type: 'dashed',
+                    opacity: 0
+                }
+            },
+            axisLabel: {
+                // 这里重新定义就可以
+                formatter: function (value: number) {
+                    var texts = []
+                    if (value === 1) {
+                        texts.push('中断')
+                    } else if (value === 10) {
+                        texts.push('正常')
+                    }
+                    return texts
+                }
+            }
+        },
+        series: [
+            {
+                name: '运行状态',
+                data: list.value.map((item: any, index: number) => [item.time, item.type == 0 ? 1 : 10]),
+                type: 'line',
+                showSymbol: false,
+
+                step: 'end'
+            }
+        ]
+    }
+}
+defineExpose({
+    setData
+})
+</script>
+<style lang="scss" scoped></style>