优化页面

src/components/table/index.vue

@@ -119,8 +119,7 @@ const handleSortChange = ({ field, order }: any) => {
                 return a[field] < b[field] ? 1 : -1
             }
         })
-        console.log(tableStore.isWebPaging)
+        
-
         if (tableStore.isWebPaging) {
             tableStore.table.data = JSON.parse(
                 JSON.stringify(

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

@@ -573,7 +573,7 @@ import {
 import analysisList from './analysisList/index.vue'
 import mqtt from 'mqtt'
 defineOptions({
-    // name: 'govern/device/control'
+    name: 'govern/device/control'
 })
 const adminInfo = useAdminInfo()
 const pageHeight = mainHeight(20)

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

@@ -20,19 +20,38 @@
 
                 <!-- 右侧内容区域 -->
                 <div class="tab-content-container flex-1" :key="activeTab">
-                    <el-tabs v-model="activeName" type="card" v-if="echartList?.dataList != null">
+                    <div v-if="echartList?.dataList != null" style="position: relative">
-                        <el-tab-pane label="状态" name="0">
+                        <el-tabs v-model="activeName" type="card" @tab-change="changeDataType">
-                            <div :style="echartHeight" class="pt10">
+                            <el-tab-pane label="状态" name="0">
-                                <MyEchart :options="echartList.options" />
+                                <div :style="echartHeight" class="pt10">
-                            </div>
+                                    <MyEchart :options="echartList.options" />
-                        </el-tab-pane>
+                                </div>
-                        <el-tab-pane label="数据" name="1">
+                            </el-tab-pane>
-                            <div :style="echartHeight" class="pt10">
+
-                                <MyEchart style="height: 50%" :options="echartList.loadList" />
+                            <el-tab-pane label="数据" name="1">
-                                <MyEchart style="height: 50%" :options="echartList.modOutList" />
+                                <div :style="echartHeight" class="pt10">
-                            </div>
+                                    <MyEchart style="height: 100%" :options="echartsData" :key="key" />
-                        </el-tab-pane>
+                                    <!-- <MyEchart style="height: 50%" :options="echartList.loadList" />
-                    </el-tabs>
+                                <MyEchart style="height: 50%" :options="echartList.modOutList" /> -->
+                                </div>
+                            </el-tab-pane>
+                        </el-tabs>
+                        <el-select
+                            v-if="activeName == '1'"
+                            v-model="dataType"
+                            class="select"
+                            placeholder="请选择"
+                            multiple
+                            collapse-tags
+                            style="width: 150px"
+                            @change="changeDataType"
+                        >
+                            <el-option label="负载电流" :value="0" />
+                            <el-option label="输入电流" :value="1" />
+                            <el-option label="温度" :value="2" />
+                        </el-select>
+                    </div>
+
                     <el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
                 </div>
             </div>
@@ -61,14 +80,13 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive,onBeforeUnmount } 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 { yMethod } from '@/utils/echartMethod'
-import { k } from 'vite/dist/node/types.d-aGj9QkWt'
 const list: any = ref([])
 const loading = ref(false)
 const loadingLeft = ref(false)
@@ -78,300 +96,469 @@ const echartHeight = ref(mainHeight(342))
 const activeTab = ref(0)
 const activeName = ref('0')
 const echartList: any = ref({})
+const dataType = ref([0])
+const key = ref(0)
 import * as echarts from 'echarts' // 全引入
+import { max } from 'lodash'
+const echartsData: any = ref({
+    title: {
+        show: false
+    },
+    xAxis: {
+        type: 'time',
+        name: '',
+        axisLabel: {
+            formatter: {
+                day: '{MM}-{dd}',
+                month: '{MM}',
+                year: '{yyyy}'
+            }
+        }
+    },
+    tooltip: {
+        axisPointer: {
+            type: 'cross',
+            label: {
+                color: '#fff',
+                fontSize: 16
+            }
+        },
+        textStyle: {
+            color: '#fff',
+            fontStyle: 'normal',
+            opacity: 0.35,
+            fontSize: 14
+        },
+        backgroundColor: 'rgba(0,0,0,0.55)',
+        borderWidth: 0,
+        formatter(params: any) {
+            const xname = params[0].value[0]
+            let str = `${xname}<br>`
+            params.forEach((el: any, index: any) => {
+                let marker = ''
+
+                if (el.value[3] == 'dashed') {
+                    for (let i = 0; i < 3; i++) {
+                        marker += `<span style="display:inline-block;border: 2px ${el.color} solid;margin-right:5px;width:10px;height:0px;background-color:#ffffff00;"></span>`
+                    }
+                } else {
+                    marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`
+                }
+
+                str += `${marker}${el.seriesName.split('(')[0]}：${
+                    el.value[1] != null ? el.value[1] + ' ' + (el.value[2] || '') : '-'
+                }<br>`
+            })
+            return str
+        }
+    },
+    legend: {
+        itemWidth: 20,
+        itemHeight: 20,
+        itemStyle: { opacity: 0 }, //去圆点
+        type: 'scroll', // 开启滚动分页
+        right: 70
+    },
+    grid: {
+        top: '80px',
+         right: '50px',
+    },
+    yAxis: [{}],
+
+    options: {
+        // yAxis: [{}],
+        series: []
+    }
+})
 const setData = (data: any) => {
-    activeTab.value = 0
+    // activeTab.value = 0
     // echartHeight.value = mainHeight(292 + data.length * 49, data.length)
     data.forEach((item: any) => {
         // console.log('🚀 ~ setData ~ data:', data)
         if (item.dataList == null) return
+        item.dataList.map((k: any, i: any) => {
+            k.endtime = item.dataList[i + 1]?.time
+        })
+
         item.options = {
-            title: {
+            // 鼠标提示
-                show: false
-            },
             tooltip: {
-                formatter: function (params: any) {
+                axisPointer: {
-                    var tips = params[0].data[0] + '：' + params[0].data[2] + '<br/>'
+                    type: 'cross',
-                    if (params[0].data[3] == 1) {
+                    label: {
-                        tips += '事件：' + params[0].data[4]
+                        color: '#fff',
+                        fontSize: 16
                     }
-
+                },
-                    return tips
+                formatter: function (params) {
-                }
+                    // console.log("🚀 ~ data.forEach ~ params:", params)
-            },
+                    let tip = ''
-            xAxis: {
+                    for (let i = 0; i < params.length; i++) {
-                type: 'time',
+                        if (params[i].seriesName != '事件标记') {
-                name: '时间',
+                            tip +=
-                //
+                                params[i].marker +
-                axisLabel: {
+                                params[i].name +
-                    formatter: {
+                                '<br/>' +
-                        day: '{MM}-{dd}',
+                                '开始时间：' +
-                        month: '{MM}',
+                                params[i].value[1] +
-                        year: '{yyyy}'
+                                '<br/>' +
+                                '结束时间：' +
+                                (params[i].value[2] || '-') +
+                                '<br/>'
+                            if (params[i].value[3] == 1) {
+                                tip += '事件：' + params[i].value[4] + '<br/>'
+                            }
+                        } else {
+                            // if (params[i].value[3] == 1) {
+                            //     tip += '事件：' + params[i].value[1] + '<br/>'
+                            // }
+                        }
                     }
+                    return tip
                 }
             },
 
-            // 添加自定义图例
             legend: {
-                show: true,
+                // data: ['运行', '停止', '离线','事件标记']
-                type: 'plain',
-                top: 10,
-                itemWidth: 14, // 图例标记宽度
-                itemHeight: 14, // 图例标记高度
                 data: [
+                    { name: '运行' },
+                    { name: '停止' },
+                    { name: '离线' },
                     {
-                        name: '事件',
+                        name: '事件标记',
                         icon: 'path://M0,10 L10,10 L5,0 Z', // 自定义三角形路径
                         textStyle: {
                             color: '#333',
-                            fontSize: 12
+                            fontSize: 14
                         }
                     }
-                ],
+                ]
-                itemStyle: {
+            },
-                    color: '#ccc' // 图例标记颜色与数据标记一致
+
+            xAxis: {
+                type: 'time',
+                name: '时间',
+                axisLabel: {
+                    formatter: {
+                        day: '{MM}-{dd}',
+                        month: '{MM}',
+                        year: '{yyyy}'
+                    }
                 }
             },
-            toolbox: {
-                show: false
-            },
-            grid: {
-                top: '30px'
-            },
             yAxis: {
-                max: 1.03,
+                show: false,
-                data: ['运行', '停止', '中断'],
+                axisPointer: {
-                interval: 0.01,
+                    show: false // 隐藏Y轴上的指示器
-
-                axisLabel: {
-                    formatter: value => {
-                        // if (value === 0) {
-                        //     return `  `
-                        // }
-                        if (value === 0.03) {
-                            return `{lx|离线}`
-                        } else if (value === 0.5) {
-                            return `{tz|停止}`
-                        } else 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'
-                        },
-                        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
                 }
             },
+            color: ['#67c23a', '#e6a23c', '#f56c6c', '#ccc'],
+            series: [
+                {
+                    name: '运行',
+                    type: 'custom',
+                    renderItem: renderItem,
 
-            options: {
+                    encode: {
-                series: [
+                        x: [1, 2],
-                    {
+                        y: 0
-                        name: '事件',
+                    },
-                        type: 'line',
+                    data: item.dataList
-                        data: item.dataList.map((k: any) => [
+                        .filter((k: any, i: number) => k.stateDesc == '运行')
-                            k.time,
+                        .map((p: any) => {
-                            k.stateDesc == '离线' ? 0.03 : k.stateDesc == '运行' ? 1 : 0.5,
+                            return {
-                            k.stateDesc,
+                                name: '运行',
-                            k.dataType,
+                                value: [0, p.time, p.endtime, p.dataType, p.eventName],
-                            k.eventName
+                                itemStyle: {
-                        ]),
+                                    normal: {
-                        step: 'end',
+                                        color: '#67c23a'
-                        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.03 : k.stateDesc == '运行' ? 1 : 0.5],
-                                    itemStyle: {
-                                        color:     k.stateDesc == '离线' ? "#f56c6c" : k.stateDesc == '运行' ? '#67c23a' : '#e6a23c', //'#FFB74D', // 亮黄色填充
-                                        borderColor:  k.stateDesc == '离线' ? "#f56c6c" : k.stateDesc == '运行' ? '#67c23a' : '#e6a23c',//'#FFB74D', // 边框颜色
-                                        borderWidth: 1 // 边框宽度
                                     }
-                                }))
+                                }
-                        }
+                            }
-                    }
+                        })
-                ]
+                },
-            }
+                {
-        }
+                    name: '停止',
-        let [loadMin, loadMax] = yMethod(item.loadList.map(k => (k.data == 3.14159 ? 0 : k.data)))
+                    type: 'custom',
-        item.loadList = {
+                    renderItem: renderItem,
-            title: {
-                text: '负载电流'
-            },
 
-            xAxis: {
+                    encode: {
-                type: 'time',
+                        x: [1, 2],
-                name: '时间',
+                        y: 0
-                //
+                    },
-                axisLabel: {
+                    data: item.dataList
-                    formatter: {
+                        .filter((k: any, i: number) => k.stateDesc != '离线' && k.stateDesc != '运行')
-                        day: '{MM}-{dd}',
+                        .map((p: any) => {
-                        month: '{MM}',
+                            return {
-                        year: '{yyyy}'
+                                name: '停止',
-                    }
+                                value: [0, p.time, p.endtime, p.dataType, p.eventName],
+                                itemStyle: {
+                                    normal: {
+                                        color: '#e6a23c'
+                                    }
+                                }
+                            }
+                        })
+                },
+                {
+                    name: '离线',
+                    type: 'custom',
+                    renderItem: renderItem,
+
+                    encode: {
+                        x: [1, 2],
+                        y: 0
+                    },
+                    data: item.dataList
+                        .filter((k: any, i: number) => k.stateDesc == '离线')
+                        .map((p: any) => {
+                            return {
+                                name: '离线',
+                                value: [0, p.time, p.endtime, p.dataType, p.eventName],
+                                itemStyle: {
+                                    normal: {
+                                        color: '#f56c6c'
+                                    }
+                                }
+                            }
+                        })
+
+                    // [
+                    //     {
+                    //         name: '离线',
+                    //         value: [0, '2025-07-16 01:03:00', '2025-07-16 01:06:00', 353249],
+                    //         itemStyle: {
+                    //             normal: {
+                    //                 color: '#f56c6c'
+                    //             }
+                    //         }
+                    //     }
+                    // ]
+                },
+                {
+                    name: '事件标记',
+                    type: 'custom',
+                    renderItem: renderMarker,
+                    encode: {
+                        x: 0,
+                        y: 1
+                    },
+
+                    data: item.dataList
+                        .filter((k: any) => k.dataType === 1)
+                        .map((k: any) => [
+                            k.time,
+                            k.eventName,
+                            k.stateDesc == '离线' ? '#f56c6c' : k.stateDesc == '运行' ? '#67c23a' : '#e6a23c',
+                            k.dataType
+                        ]),
+                    // data: [['2025-07-16 01:00:00','故障发生','#bd6d6c']],
+                    z: 10 // 确保标记显示在甘特图上方
                 }
-            },
+            ]
-
-            toolbox: {
-                show: false
-            },
-            grid: {
-                top: '30px'
-            },
-            yAxis: {
-                name: 'A',
-                min: loadMin,
-                max: loadMax
-            },
-            color: ['#DAA520', '#2E8B57', '#A52a2a'],
-            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: ['#DAA520', '#2E8B57', '#A52a2a'],
-            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')
+    changeDataType()
+    // echarts.connect('group')
+}
+const lineStyle = [{ type: 'solid' }, { type: 'dashed' }, { type: 'dotted' }]
+const changeDataType = () => {
+    // loadList 负载电流
+    // modOutList  输入电流
+    // console.log('🚀 ~ changeDataType ~ val:', list.value[activeTab.value])
+
+    echartsData.value.yAxis = [{}]
+    echartsData.value.options.series = []
+    let flag = dataType.value.includes(0) || dataType.value.includes(1)
+    if (flag) {
+        let data1 = dataType.value.includes(0)
+            ? list.value[activeTab.value].loadList.map(k => (k.data == 3.14159 ? 0 : k.data))
+            : [0]
+        let data2 = dataType.value.includes(1)
+            ? list.value[activeTab.value].modOutList.map(k => (k.data == 3.14159 ? 0 : k.data))
+            : [0]
+        let [modOuMin, modOuMax] = yMethod([...data1, ...data2])
+        console.log("🚀 ~ changeDataType ~ modOuMin:", modOuMin,modOuMax)
+
+        echartsData.value.yAxis[0] = {
+            name: 'A',
+            yAxisIndex: 0,
+            max: modOuMax,
+            min: modOuMin,
+            splitNumber: 5,
+            minInterval: 1
+        }
+        if (dataType.value.includes(0)) {
+            echartsData.value.options.series.push(
+                {
+                    name: 'A相负载电流',
+                    type: 'line',
+                    data: list.value[activeTab.value].loadList
+                        .filter((k: any) => k.phasicType == 'A')
+                        .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[0].type]),
+                    smooth: true, //让线变得平滑
+                    symbol: 'none',
+                    color: '#DAA520',
+                    lineStyle: lineStyle[0],
+                    yAxisIndex: 0
+                },
+                {
+                    name: 'B相负载电流',
+                    type: 'line',
+                    data: list.value[activeTab.value].loadList
+                        .filter((k: any) => k.phasicType == 'B')
+                        .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[0].type]),
+                    smooth: true, //让线变得平滑
+                    symbol: 'none',
+                    color: '#2E8B57',
+                    lineStyle: lineStyle[0],
+                    yAxisIndex: 0
+                },
+                {
+                    name: 'C相负载电流',
+                    type: 'line',
+                    data: list.value[activeTab.value].loadList
+                        .filter((k: any) => k.phasicType == 'C')
+                        .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[0].type]),
+                    smooth: true, //让线变得平滑
+                    symbol: 'none',
+                    color: '#A52a2a',
+                    lineStyle: lineStyle[0],
+                    yAxisIndex: 0
+                }
+            )
+        }
+        if (dataType.value.includes(1)) {
+            echartsData.value.options.series.push(
+                {
+                    name: 'A相输入电流',
+                    type: 'line',
+                    data: list.value[activeTab.value].modOutList
+                        .filter((k: any) => k.phasicType == 'A')
+                        .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[1].type]),
+                    smooth: true, //让线变得平滑
+                    symbol: 'none',
+                    color: '#DAA520',
+                    lineStyle: lineStyle[1],
+                    yAxisIndex: 0
+                },
+                {
+                    name: 'B相输入电流',
+                    type: 'line',
+                    data: list.value[activeTab.value].modOutList
+                        .filter((k: any) => k.phasicType == 'B')
+                        .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[1].type]),
+                    smooth: true, //让线变得平滑
+                    symbol: 'none',
+                    color: '#2E8B57',
+                    lineStyle: lineStyle[1],
+                    yAxisIndex: 0
+                },
+                {
+                    name: 'C相输入电流',
+                    type: 'line',
+                    data: list.value[activeTab.value].modOutList
+                        .filter((k: any) => k.phasicType == 'C')
+                        .map((k: any) => [k.time, k.data == 3.14159 ? null : k.data, 'A', lineStyle[1].type]),
+                    smooth: true, //让线变得平滑
+                    symbol: 'none',
+                    color: '#A52a2a',
+                    lineStyle: lineStyle[1],
+                    yAxisIndex: 0
+                }
+            )
+        }
+    }
+    if (dataType.value.includes(2)) {
+        let [temperatureMin, temperatureMax] = yMethod(
+            list.value[activeTab.value].temperatureList.map(k => (k.data == 3.14159 ? 0 : k.data))
+        )
+        echartsData.value.yAxis[flag ? 1 : 0] = {
+            name: '℃',
+            yAxisIndex: flag ? 1 : 0,
+            splitNumber: 5,
+            max: temperatureMax,
+            min: temperatureMin,
+            minInterval: 1
+        }
+        echartsData.value.options.series.push({
+            name: '温度',
+            type: 'line',
+            data: list.value[activeTab.value].temperatureList.map((k: any) => [
+                k.time,
+                k.data == 3.14159 ? null : k.data,
+                '℃',
+                lineStyle[2].type
+            ]),
+            smooth: true, //让线变得平滑
+            symbol: 'none',
+            color: '#DAA520',
+            lineStyle: lineStyle[2],
+            yAxisIndex: flag ? 1 : 0
+        })
+    }
+    key.value += 1
+}
+function renderItem(params, api) {
+    var categoryIndex = api.value(0)
+    var start = api.coord([api.value(1), categoryIndex])
+    var end = api.coord([api.value(2), categoryIndex])
+    var height = api.size([0, 1])[1] * 0.9
+
+    var rectShape = echarts.graphic.clipRectByRect(
+        {
+            x: start[0],
+            y: start[1] - height,
+            width: end[0] - start[0],
+            height: height
+        },
+        {
+            x: params.coordSys.x,
+            y: params.coordSys.y,
+            width: params.coordSys.width,
+            height: params.coordSys.height - 50
+        }
+    )
+
+    return (
+        rectShape && {
+            type: 'rect',
+            shape: rectShape,
+            style: api.style()
+        }
+    )
+}
+// 三角形标记渲染函数
+function renderMarker(params, api) {
+    var point = api.coord([api.value(0), 0])
+    var symbolSize = 8
+    var offsetY = 40
+    // 计算三角形的三个点坐标
+    var points = [
+        [point[0], point[1] - symbolSize - offsetY], // 上顶点
+        [point[0] - symbolSize, point[1] + symbolSize - offsetY], // 左下顶点
+        [point[0] + symbolSize, point[1] + symbolSize - offsetY] // 右下顶点
+    ]
+
+    return {
+        type: 'polygon',
+        shape: {
+            points: points
+        },
+        style: {
+            fill: api.value(2),
+            stroke: '#fff',
+            lineWidth: 1
+        },
+        label: {
+            position: [point[0] + symbolSize + 5, point[1]],
+            formatter: api.value(1),
+            fontSize: 12
+        }
+    }
 }
 const getModule = async (id: string) => {
     loadingLeft.value = true
@@ -391,6 +578,7 @@ const getModule = async (id: string) => {
 const changeTab = (e: any) => {
     echartList.value = list.value[e]
     activeTab.value = e
+    changeDataType()
 }
 const getType = (type: string) => {
     switch (type) {
@@ -480,4 +668,9 @@ onBeforeUnmount(() => {
     flex: 1;
     padding: 0 10px;
 }
+.select {
+    position: absolute;
+    top: 7px;
+    left: 150px;
+}
 </style>

src/views/govern/manage/engineering.vue

@@ -80,6 +80,7 @@ import { mainHeight } from '@/utils/layout'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { auditEngineering, updateProject } from '@/api/cs-device-boot/edData'
 import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
+import tree from '@/assets/map/area.json'
 defineOptions({
     name: 'govern/manage/engineering'
 })
@@ -105,10 +106,12 @@ const rules = ref({
     area: [{ required: true, message: '请输入区域', trigger: 'blur' }],
     description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
 })
-const areaTree: any = filterFirstTwoLevels(dictData.state.areaTree)
+console.log("🚀 ~ dictData.state.areaTree:", dictData.state)
+
+const areaTree: any = tree
 const props = {
-    label: 'name',
+    label: 'text',
-    value: 'id',
+    value: 'value',
     children: 'children',
     checkStrictly: true
 }
@@ -199,34 +202,7 @@ const save = () => {
         }
     })
 }
-/**
- * 过滤树结构，只保留前2层级
- */
-function filterFirstTwoLevels(tree) {
-    // 处理根节点为数组的情况（如多棵树）
-    if (Array.isArray(tree)) {
-        return tree.map(node => filterNode(node, 1)) // 根节点为第1层
-    } else {
-        // 处理单个根节点的情况
-        return filterNode(tree, 1)
-    }
 
-    function filterNode(node, level) {
-        // 复制当前节点的所有属性（避免修改原始对象）
-        const filteredNode = { ...node }
-
-        // 如果是第1层，需要保留其children（即第2层），但需过滤第2层的children
-        if (level === 1 && node.children && Array.isArray(node.children)) {
-            filteredNode.children = node.children.map(child => filterNode(child, 2))
-        }
-        // 如果是第2层或更深，直接删除children（截断层级）
-        else {
-            delete filteredNode.children
-        }
-
-        return filteredNode
-    }
-}
 </script>
 <style lang="scss">
 .customInput {

src/views/govern/manage/factory.vue

@@ -102,7 +102,7 @@
                     class="ml10"
                     icon="el-icon-Download"
                     @click="downLoadQrCode"
-                    v-if="showQrCode"
+                    :disabled="!showQrCode"
                 >
                     批量下载二维码
                 </el-button>
@@ -435,12 +435,11 @@ const tableStore = new TableStore({
                 4: '正式投运'
             },
             minWidth: 80
-           
         },
         {
             title: '操作',
             align: 'center',
-            width: '220',
+            width: 220,
             render: 'buttons',
             buttons: [
                 //直连装置注册

src/views/govern/manage/monthly.vue

@@ -1,15 +1,25 @@
 <template>
     <div class="default-main">
-        <TableHeader datePicker ref="refheader" showExport>
+        <TableHeader datePicker ref="refheader" >
             <template v-slot:select>
+                <el-form-item label="关键字筛选">
+                    <el-input
+                        v-model.trim="tableStore.table.params.name"
+                        placeholder="请输入关键字"
+                        clearable
+                    ></el-input>
+                </el-form-item>
                 <el-form-item label="流程阶段">
-                    <el-select v-model.trim="tableStore.table.params.process" clearable 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>
             </template>
+            <template v-slot:operation>
+                <el-button type="primary" icon="el-icon-Download" @click="exportTab">导出</el-button>
+            </template>
         </TableHeader>
         <Table ref="tableRef" />
     </div>
@@ -64,10 +74,10 @@ const tableStore = new TableStore({
             title: '数据更新时间',
             field: 'latestTime',
             width: 180,
-            sortable: true,
+            sortable: true
-            formatter: (row: any) => {
+            // formatter: (row: any) => {
-                return row.cellValue || '/'
+            //     return row.cellValue || '/'
-            }
+            // }
         },
 
         {
@@ -83,6 +93,7 @@ const tableStore = new TableStore({
             title: '流程阶段',
             field: 'process',
             width: 100,
+            fixed: 'right',
             render: 'tag',
             custom: {
                 2: 'warning',
@@ -100,6 +111,7 @@ const tableStore = new TableStore({
             title: '运行状态',
             field: 'operationalStatus',
             render: 'tag',
+            fixed: 'right',
             width: 100,
             custom: {
                 停运: 'danger',
@@ -114,6 +126,7 @@ const tableStore = new TableStore({
             title: '通讯状态',
             field: 'communicationStatus',
             width: 100,
+            fixed: 'right',
             render: 'tag',
             custom: {
                 离线: 'danger',
@@ -125,17 +138,60 @@ const tableStore = new TableStore({
             }
         },
 
-        { title: '在线率(%)', width: 100, field: 'onlineRate', sortable: true },
+        { title: '在线率(%)', fixed: 'right',width: 100, field: 'onlineRate', sortable: true },
-        { title: '完整性(%)', width: 100, field: 'integrity', sortable: true }
+        { title: '完整性(%)', fixed: 'right',width: 100, field: 'integrity', sortable: true }
     ],
-    beforeSearchFun: () => {}
+    beforeSearchFun: () => {},
+    loadCallback: () => {
+        let name = tableStore.table.params.name
+        let data = tableStore.table.copyData.filter(item => {
+            // 处理latestTime默认值
+            item.latestTime = item.latestTime || '/'
+            // 需要检查的字段列表
+            const fieldsToCheck = ['projectName', 'engineeringName', 'mac', 'devName', 'lineName']
+            console.log(
+                '🚀 ~ fieldsToCheck.some(field => item[field]?.includes(name)):',
+                fieldsToCheck.some(field => item[field]?.includes(name))
+            )
+
+            // 检查任何一个字段包含搜索名称
+            return fieldsToCheck.some(field => item[field]?.includes(name))
+        })
+
+        tableStore.table.copyData = JSON.parse(JSON.stringify(data))
+        tableStore.table.total = tableStore.table.copyData.length
+        if (data.length == 0) {
+            tableStore.table.data = []
+        } else {
+            tableStore.table.data = JSON.parse(
+                JSON.stringify(
+                    window.XEUtils.chunk(data, tableStore.table.params.pageSize)[tableStore.table.params.pageNum - 1]
+                )
+            )
+        }
+    }
 })
 
 provide('tableStore', tableStore)
 tableStore.table.params.process = 4
-//   "target": [],
+tableStore.table.params.name = ''
-//   "type": "",
+const tableRef = ref()
-//   "userId": ""
+const exportTab = () => {
+    tableRef.value.getRef()?.exportData({
+        filename: '半月报功能', // 文件名字
+        sheetName: 'Sheet1',
+        type: 'xlsx', //导出文件类型 xlsx 和 csv
+        useStyle: true,
+        data: tableStore.table.copyData, // 数据源 // 过滤那个字段导出
+        columnFilterMethod: function (column: any) {
+            return !(
+                column.column.title === undefined ||
+                column.column.title === '序号' ||
+                column.column.title === '操作'
+            )
+        }
+    })
+}
 
 onMounted(() => {})
 setTimeout(() => {