提交更改

src/components/echarts/MyEchart.vue

@@ -1,14 +1,11 @@
 <template>
     <div class="chart">
-        <el-button v-if="isExport" type="primary" size="small" icon="el-icon-Download" @click="handleExport">
-            导出
-        </el-button>
         <div ref="chartRef" class="my-chart" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
 import 'echarts-gl'
@@ -16,6 +13,8 @@ import 'echarts-liquidfill'
 import 'echarts/lib/component/dataZoom'
 import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
+import { saveAs } from 'file-saver'
+// import { nextTick } from 'process'
 
 const config = useConfig()
 color[0] = config.layout.elementUiPrimary[0]
@@ -227,20 +226,49 @@ const resizeObserver = new ResizeObserver(entries => {
     }
 })
 const ExportChart: any = ref(null)
-const handleExport = () => {
+const handleExport = (arr: any) => {
     // 使用ECharts的getOption方法获取当前图表的配置
     const option = ExportOptions.value
-    console.log(option, '00000000000')
+    const seriesData = option?.series
-    const seriesData = option?.series // 假设我们只导出第一个系列的数据
+    const xAxisList = option?.xAxis[0].data
     if (seriesData && seriesData.length != 0) {
         // 转换为CSV格式
-        let csvContent = 'data1,data2\n'
+        let csvContent = '时间,'
-        seriesData.forEach((item: any) => {
+        const legendData = ExportOptions.value.legend.data
-            item.data.map((vv: any) => {
+        legendData.map((item: any, index: any) => {
-                csvContent += `${vv.name},${vv.value}\n`
+            index != legendData.length - 1 ? (csvContent += item.name + ',') : (csvContent += item.name + '\n')
-            })
         })
+        let cellValue = ''
+        let list = []
+        legendData.map((item: any, index: any) => {
+            list.push('${seriesData[' + index + '].data[indexs]}')
+        })
+        console.log(seriesData[0].data.length)
+        
+        seriesData.forEach((item: any, index: any) => {
+            item.data.map((vv: any, indexs: any) => {
+                cellValue += `${xAxisList[indexs]},`
 
+                // csvContent += `${item.name},${xAxisList[index]},${vv}\n`
+                // legendData.map((kk: any, indexss: any) => {
+
+                // indexs == legendData.length - 1 ? (cellValue += `${vv}\n`) : (cellValue += `${vv},`)
+                cellValue += `${seriesData[0].data[indexs]},${seriesData[1].data[indexs]},${seriesData[2].data[indexs]}s\n`
+                // })
+                // cellValue +=list.join(',')+'\n'
+            })
+            // csvContent += cellValue + `${xAxisList[index]}` + '\n'
+        })
+        let arrs = []
+        arrs = JSON.parse(JSON.stringify(new Set(cellValue.split('s'))))
+        console.log(arrs, '0000000000')
+        Array.from(arrs).map((item:any)=>{
+            cellValue +=item+'\n'.replace('s','')
+        })
+        console.log(cellValue, '去重后的数据')
+        return
+        csvContent += cellValue
+        // return
         // 创建Blob对象，并使用a标签下载
         const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
         const link = document.createElement('a')
@@ -248,7 +276,7 @@ const handleExport = () => {
             // 支持下载属性
             const url = URL.createObjectURL(blob)
             link.setAttribute('href', url)
-            link.setAttribute('download', 'data.csv')
+            link.setAttribute('download', '历史趋势.csv')
             link.style.visibility = 'hidden'
             document.body.appendChild(link)
             link.click()
@@ -258,11 +286,10 @@ const handleExport = () => {
 }
 onMounted(() => {
     initChart()
-
     ExportChart.value = echarts.init(chartRef.value)
     resizeObserver.observe(chartRef.value!)
 })
-defineExpose({ initChart })
+defineExpose({ initChart, handleExport })
 onBeforeUnmount(() => {
     resizeObserver.unobserve(chartRef.value!)
     chart?.dispose()

src/components/tree/device.vue

@@ -0,0 +1,224 @@
+<!-- 设备管理使用折叠面板渲染多个tree -->
+<template>
+    <div
+        :style="{ width: menuCollapse ? '40px' : props.width }"
+        style="display: flex; transition: all 0.3s; overflow: hidden"
+    >
+        <Icon
+            v-show="menuCollapse"
+            @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-input v-model="filterText" placeholder="请输入内容" clearable>
+                    <template #prefix>
+                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                    </template>
+                </el-input>
+                <Icon
+                    @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"
+                />
+            </div>
+
+            <el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
+                <el-collapse-item title="治理设备" :name="0">
+                    <el-tree
+                        ref="treeRef1"
+                        style="height: calc(100vh - 340px)"
+                        :props="defaultProps"
+                        highlight-current
+                        :filter-node-method="filterNode"
+                        node-key="id"
+                        default-expand-all
+                        v-bind="$attrs"
+                        :data="zlDeviceData"
+                    >
+                        <template #default="{ node, data }">
+                            <span class="custom-tree-node">
+                                <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>
+                    </el-tree>
+                </el-collapse-item>
+                <el-collapse-item title="便携式设备" :name="1">
+                    <el-tree
+                        style="height: calc(100vh - 340px)"
+                        ref="treeRef2"
+                        :props="defaultProps"
+                        highlight-current
+                        default-expand-all
+                        :filter-node-method="filterNode"
+                        node-key="id"
+                        :data="bxsDeviceData"
+                        v-bind="$attrs"
+                    >
+                        <template #default="{ node, data }">
+                            <span class="custom-tree-node">
+                                <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>
+                    </el-tree>
+                </el-collapse-item>
+            </el-collapse>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import useCurrentInstance from '@/utils/useCurrentInstance'
+import { ElTree } from 'element-plus'
+import { ref, watch } from 'vue'
+
+defineOptions({
+    name: 'govern/tree'
+})
+
+interface Props {
+    width?: string
+    canExpand?: boolean
+    type?: string
+    data?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    width: '280px',
+    canExpand: true,
+    type: '',
+    data: []
+})
+const { proxy } = useCurrentInstance()
+const menuCollapse = ref(false)
+const activeName = ref(0)
+const filterText = ref('')
+const defaultProps = {
+    label: 'name',
+    value: 'id'
+}
+//治理设备数据
+const zlDeviceData = ref([])
+//便携式设备数据
+const bxsDeviceData = ref([])
+watch(
+    () => props.data,
+    (val, oldVal) => {
+        if (val && val.length != 0) {
+            val.map((item: any) => {
+                if (item.name == '治理设备') {
+                    item.children.map((vv: any) => {
+                        zlDeviceData.value.push(vv)
+                    })
+                } else if (item.name == '便携式设备') {
+                    item.children.map((vv: any) => {
+                        bxsDeviceData.value.push(vv)
+                    })
+                }
+            })
+        }
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+)
+
+watch(filterText, val => {
+    if (activeName.value == 0) {
+        treeRef1.value!.filter(val)
+    } else {
+        treeRef2.value!.filter(val)
+    }
+})
+const onMenuCollapse = () => {
+    menuCollapse.value = !menuCollapse.value
+    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
+}
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.name.includes(value)
+}
+
+const changeDevice = (val: any) => {
+    let arr1: any = []
+    zlDeviceData.value.forEach((item: any) => {
+        item.children.forEach((item2: any) => {
+            item2.children.forEach((item3: any) => {
+                arr1.push(item3)
+            })
+        })
+    })
+    let arr2: any = []
+    bxsDeviceData.value.forEach((item: any) => {
+        // item.children.forEach((item2: any) => {
+            arr2.push(item)
+        // })
+    })
+    if (val == 0) {
+        arr2.map(item => {
+            item.checked = false
+        })
+        treeRef1.value.setCurrentKey(arr1[0].id)
+    } else {
+        arr1.map(item => {
+            item.checked = false
+        })
+        treeRef2.value.setCurrentKey(arr2[0].id)
+    }
+}
+//治理
+const treeRef1 = ref<InstanceType<typeof ElTree>>()
+//便携式
+const treeRef2 = ref<InstanceType<typeof ElTree>>()
+defineExpose({ treeRef1, treeRef2 })
+</script>
+
+<style lang="scss" scoped>
+.cn-tree {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+
+    :deep(.el-tree) {
+        border: 1px solid var(--el-border-color);
+    }
+
+    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+        background-color: var(--el-color-primary-light-7);
+    }
+
+    .menu-collapse {
+        color: var(--el-color-primary);
+    }
+}
+
+.custom-tree-node {
+    // display: flex;
+    // align-items: center;
+}
+</style>

src/components/tree/govern/deviceTree.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { ref, nextTick } from 'vue'
-import Tree from '../index.vue'
+import Tree from '../device.vue'
 import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
 import { useConfig } from '@/stores/config'
 defineOptions({
@@ -32,27 +32,52 @@ const config = useConfig()
 const tree = ref()
 const treRef = ref()
 getDeviceTree().then(res => {
+    console.log(res, '000000')
     let arr: any[] = []
-    res.data.forEach((item: any) => {
+    //治理设备
-        item.icon = 'el-icon-HomeFilled'
+    res.data.map((item: any) => {
-        item.color = config.getColorVal('elementUiPrimary')
+        if (item.name == '治理设备') {
-        item.children.forEach((item2: any) => {
+            item.children.forEach((item: any) => {
-            item2.icon = 'el-icon-List'
+                item.icon = 'el-icon-HomeFilled'
-            item2.color = config.getColorVal('elementUiPrimary')
+                item.color = config.getColorVal('elementUiPrimary')
-            item2.children.forEach((item3: any) => {
+                item.children.forEach((item2: any) => {
-                item3.icon = 'el-icon-Platform'
+                    item2.icon = 'el-icon-List'
-                item3.color = config.getColorVal('elementUiPrimary')
+                    item2.color = config.getColorVal('elementUiPrimary')
-                if (item3.comFlag === 1) {
+                    item2.children.forEach((item3: any) => {
-                    item3.color = '#e26257 !important'
+                        item3.icon = 'el-icon-Platform'
-                }
+                        item3.color = config.getColorVal('elementUiPrimary')
-                arr.push(item3)
+                        if (item3.comFlag === 1) {
+                            item3.color = '#e26257 !important'
+                        }
+                        arr.push(item3)
+                    })
+                })
             })
-        })
+        } else if (item.name == '便携式设备') {
+            item.children.forEach((item: any) => {
+                item.icon = 'el-icon-Platform'
+                item.color = config.getColorVal('elementUiPrimary')
+                item.color = '#e26257 !important'
+                item.children.forEach((item2: any) => {
+                    item2.icon = 'el-icon-Platform'
+                    item2.color = config.getColorVal('elementUiPrimary')
+                    // item2.children.forEach((item3: any) => {
+                    //     item3.icon = 'el-icon-Platform'
+                    //     item3.color = config.getColorVal('elementUiPrimary')
+                    //     if (item3.comFlag === 1) {
+                    //         item3.color = '#e26257 !important'
+                    //     }
+                    //     arr.push(item3)
+                    // })
+                })
+            })
+        }
     })
     tree.value = res.data
     nextTick(() => {
         if (arr.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
+            console.log(treRef.value.treeRef1,"99999999");
+            treRef.value.treeRef1.setCurrentKey(arr[0].id)
             // 注册父组件事件
             emit('init', {
                 level: 2,

src/components/tree/govern/pointTree.vue

@@ -4,47 +4,75 @@
 
 <script lang="ts" setup>
 import { ref, nextTick } from 'vue'
-import Tree from '../index.vue'
+import Tree from '../point.vue'
 import { getLineTree } from '@/api/cs-device-boot/csLedger'
 import { useConfig } from '@/stores/config'
 defineOptions({
     name: 'govern/deviceTree'
 })
-const emit = defineEmits(['init'])
+const emit = defineEmits(['init', 'checkChange'])
 const config = useConfig()
 const tree = ref()
 const treRef = ref()
 getLineTree().then(res => {
-    let arr: any[] = []
+    console.log(res.data, '设备监控666')
-    res.data.forEach((item: any) => {
+    let arr1: any[] = []
-        item.icon = 'el-icon-HomeFilled'
+    let arr2: any[] = []
-        item.color = config.getColorVal('elementUiPrimary')
+    //治理设备
-        item.children.forEach((item2: any) => {
+    res.data.map((item: any) => {
-            item2.icon = 'el-icon-List'
+        if (item.name == '治理设备') {
-            item.color = config.getColorVal('elementUiPrimary')
+            item.children.forEach((item: any) => {
-            item2.children.forEach((item3: any) => {
+                item.icon = 'el-icon-HomeFilled'
-                item3.icon = 'el-icon-Platform'
+                item.color = config.getColorVal('elementUiPrimary')
-                item3.color = config.getColorVal('elementUiPrimary')
+                item.children.forEach((item2: any) => {
-                if (item3.comFlag === 1) {
+                    item2.icon = 'el-icon-List'
-                    item3.color = '#e26257 !important'
+                    item2.color = config.getColorVal('elementUiPrimary')
-                }
+                    item2.children.forEach((item3: any) => {
-                item3.children.forEach((item4: any) => {
+                        item3.icon = 'el-icon-Platform'
-                    item4.icon = 'el-icon-LocationFilled'
+                        item3.color = config.getColorVal('elementUiPrimary')
-                    arr.push(item4)
+                        item3.children.forEach((item4: any) => {
+                            item4.icon = 'el-icon-Platform'
+                            item4.color = config.getColorVal('elementUiPrimary')
+                            item4.color = '#e26257 !important'
+                            arr1.push(item4)
+                        })
+                    })
                 })
             })
-        })
+        } else if (item.name == '便携式设备') {
+            item.children.forEach((item: any) => {
+                item.icon = 'el-icon-Platform'
+                item.color = config.getColorVal('elementUiPrimary')
+                item.children.forEach((item2: any) => {
+                    item2.icon = 'el-icon-Platform'
+                    item2.color = config.getColorVal('elementUiPrimary')
+                    item2.color = '#e26257 !important'
+                    arr2.push(item2)
+                })
+            })
+        }
     })
     tree.value = res.data
     nextTick(() => {
-        if (arr.length) {
+        if (arr1.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
+            //初始化选中
+            treRef.value.treeRef1.setCurrentKey(arr1[0].id)
             // 注册父组件事件
             emit('init', {
                 level: 2,
-                ...arr[0]
+                ...arr1[0]
             })
-        } else {
+        }
+        // if (arr2.length) {
+        //     //初始化选中
+        //     treRef.value.treeRef2.setCurrentKey(arr2[0].id)
+        //     // 注册父组件事件
+        //     emit('init', {
+        //         level: 2,
+        //         ...arr2[0]
+        //     })
+        // } 
+        else {
             emit('init')
         }
     })

src/components/tree/point.vue

@@ -0,0 +1,225 @@
+<!-- 设备监控使用折叠面板渲染多个tree -->
+<template>
+    <div
+        :style="{ width: menuCollapse ? '40px' : props.width }"
+        style="display: flex; transition: all 0.3s; overflow: hidden"
+    >
+        <Icon
+            v-show="menuCollapse"
+            @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-input v-model="filterText" placeholder="请输入内容" clearable>
+                    <template #prefix>
+                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                    </template>
+                </el-input>
+                <Icon
+                    @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"
+                />
+            </div>
+
+            <el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
+                <el-collapse-item title="治理设备" :name="0">
+                    <el-tree
+                        ref="treeRef1"
+                        style="height: calc(100vh - 340px)"
+                        :props="defaultProps"
+                        highlight-current
+                        :filter-node-method="filterNode"
+                        node-key="id"
+                        default-expand-all
+                        v-bind="$attrs"
+                        :data="zlDeviceData"
+                    >
+                        <template #default="{ node, data }">
+                            <span class="custom-tree-node">
+                                <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>
+                    </el-tree>
+                </el-collapse-item>
+                <el-collapse-item title="便携式设备" :name="1">
+                    <el-tree
+                        style="height: calc(100vh - 340px)"
+                        ref="treeRef2"
+                        :props="defaultProps"
+                        highlight-current
+                        default-expand-all
+                        :filter-node-method="filterNode"
+                        node-key="id"
+                        :data="bxsDeviceData"
+                        v-bind="$attrs"
+                    >
+                        <template #default="{ node, data }">
+                            <span class="custom-tree-node">
+                                <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>
+                    </el-tree>
+                </el-collapse-item>
+            </el-collapse>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import useCurrentInstance from '@/utils/useCurrentInstance'
+import { ElTree } from 'element-plus'
+import { ref, watch } from 'vue'
+
+defineOptions({
+    name: 'govern/tree'
+})
+
+interface Props {
+    width?: string
+    canExpand?: boolean
+    type?: string
+    data?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    width: '280px',
+    canExpand: true,
+    type: '',
+    data: []
+})
+const { proxy } = useCurrentInstance()
+const menuCollapse = ref(false)
+const activeName = ref(0)
+const filterText = ref('')
+const defaultProps = {
+    label: 'name',
+    value: 'id'
+}
+//治理设备数据
+const zlDeviceData = ref([])
+//便携式设备数据
+const bxsDeviceData = ref([])
+watch(
+    () => props.data,
+    (val, oldVal) => {
+        if (val && val.length != 0) {
+            val.map((item: any) => {
+                if (item.name == '治理设备') {
+                    item.children.map((vv: any) => {
+                        zlDeviceData.value.push(vv)
+                    })
+                } else if (item.name == '便携式设备') {
+                    item.children.map((vv: any) => {
+                        bxsDeviceData.value.push(vv)
+                    })
+                }
+            })
+        }
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+)
+
+watch(filterText, val => {
+    if (activeName.value == 0) {
+        treeRef1.value!.filter(val)
+    } else {
+        treeRef2.value!.filter(val)
+    }
+})
+const changeDevice = (val: any) => {
+    let arr1: any = []
+    zlDeviceData.value.forEach((item: any) => {
+        item.children.forEach((item2: any) => {
+            item2.children.forEach((item3: any) => {
+                item3.children.forEach((item4: any) => {
+                    arr1.push(item4)
+                })
+            })
+        })
+    })
+    let arr2: any = []
+    bxsDeviceData.value.forEach((item: any) => {
+        item.children.forEach((item2: any) => {
+            arr2.push(item2)
+        })
+    })
+    if (val == 0) {
+        arr2.map(item => {
+            item.checked = false
+        })
+        treeRef1.value.setCurrentKey(arr1[0].id)
+    } else {
+        arr1.map(item => {
+            item.checked = false
+        })
+        treeRef2.value.setCurrentKey(arr2[0].id)
+    }
+}
+const onMenuCollapse = () => {
+    menuCollapse.value = !menuCollapse.value
+    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
+}
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.name.includes(value)
+}
+//治理
+const treeRef1 = ref<InstanceType<typeof ElTree>>()
+//便携式
+const treeRef2 = ref<InstanceType<typeof ElTree>>()
+defineExpose({ treeRef1, treeRef2 })
+</script>
+
+<style lang="scss" scoped>
+.cn-tree {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+
+    :deep(.el-tree) {
+        border: 1px solid var(--el-border-color);
+    }
+
+    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+        background-color: var(--el-color-primary-light-7);
+    }
+
+    .menu-collapse {
+        color: var(--el-color-primary);
+    }
+}
+
+.custom-tree-node {
+    // display: flex;
+    // align-items: center;
+}
+</style>

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

@@ -9,25 +9,26 @@
         <div class="device-control-right" v-if="deviceData">
             <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
                 <el-descriptions-item label="名称">
-                    {{ deviceData.name }}
+                    {{ deviceData.name ? deviceData.name : '/' }}
                 </el-descriptions-item>
                 <el-descriptions-item label="类型">
                     {{ echoName(deviceData.devType, devTypeOptions) }}
                 </el-descriptions-item>
 
                 <el-descriptions-item label="接入方式">
-                    {{ deviceData.devAccessMethod }}
+                    {{ deviceData.devAccessMethod ? deviceData.devAccessMethod : '/' }}
                 </el-descriptions-item>
                 <el-descriptions-item label="识别码">
-                    {{ deviceData.ndid }}
+                    {{ deviceData.ndid ? deviceData.ndid : '/' }}
                 </el-descriptions-item>
                 <el-descriptions-item label="型号">
                     {{ echoName(deviceData.devModel, devModelOptions) }}
                 </el-descriptions-item>
                 <el-descriptions-item label="接入时间">
-                    {{ deviceData.time }}
+                    {{ deviceData.time ? deviceData.time : '/' }}
                 </el-descriptions-item>
             </el-descriptions>
+            {{ dataSet }}
             <el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
                 <el-tab-pane
                     lazy
@@ -52,8 +53,21 @@
                         <el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
                     </el-form-item>
                 </el-form>
-                <div style="overflow: auto" :style="{ height: tableHeight }" v-loading="tableLoading">
+                <div
-                    <div class="content">
+                    style="overflow: auto"
+                    :style="{ height: tableHeight }"
+                    v-loading="tableLoading"
+                    v-if="dataSet.length > 1"
+                >
+                    <!-- 卡片 -->
+                    <div
+                        class="content"
+                        v-if="
+                            dataSet.indexOf('_trenddata') == -1 &&
+                            dataSet.indexOf('_realtimedata') == -1 &&
+                            dataSet.indexOf('_event') == -1
+                        "
+                    >
                         <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
                             <template #header>
                                 <div class="clearfix">
@@ -66,6 +80,7 @@
                                     ></Icon>
                                 </div>
                             </template>
+                            <!-- 模块数据 -->
                             <div class="box-card-content" v-if="dataSet.indexOf('_history') == -1">
                                 <div v-for="(child, childIndex) in item.children" :key="childIndex">
                                     {{ child.anotherName }}:
@@ -121,7 +136,12 @@
                     </div>
                 </div>
                 <el-pagination
-                    v-if="tableData.length"
+                    v-if="
+                        tableData.length &&
+                        dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_realtimedata') == -1 &&
+                        dataSet.indexOf('_event') == -1
+                    "
                     background
                     class="mr2 mt10"
                     style="float: right"
@@ -133,7 +153,16 @@
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="formInline.total"
                 ></el-pagination>
-                <div v-else style="height: 42px"></div>
+                <div v-if="!tableData" style="height: 42px"></div>
+                <!-- <el-tab-pane lazy label="趋势数据" name="0">
+                    <div  style="height:calc(100vh - 330px);overflow: auto;border:1px solid red;"></div>
+                </el-tab-pane>
+                <el-tab-pane lazy label="实时数据" name="1">
+                    <div  style="height:calc(100vh - 330px);overflow: auto;border:1px solid red;"></div>
+                </el-tab-pane>
+                <el-tab-pane lazy label="暂态事件" name="2">
+                    <div  style="height:calc(100vh - 330px);overflow: auto;border:1px solid red;"></div>
+                </el-tab-pane> -->
             </el-tabs>
         </div>
         <el-empty v-else description="请选择设备" class="device-control-right" />
@@ -194,58 +223,86 @@ const handleSizeChange = (val: number) => {
     formInline.pageSize = val
     handleClick()
 }
-const nodeClick = (e: anyObj) => {
+const nodeClick = async (e: anyObj) => {
     if (!e) {
         loading.value = false
         return
     }
+    console.log(e, '监测点请求的判断')
     if (e.level == 3) {
         loading.value = true
-        getDeviceData(e.pid, 'history', e.id).then((res: any) => {
+        formInline.lineId = e.id
-            res.data.dataSetList.forEach((item: any) => {
+        await getDeviceData(e.pid, 'history', e.id).then((res: any) => {
-                if (item.type === 'history') {
+            console.log(res.data, '-------------')
-                    item.id = item.id + '_history'
-                }
-            })
             deviceData.value = res.data
-            if (res.data.dataSetList.length === 0) {
+            if (!res.data.dataSetList) {
                 dataSet.value = ''
                 tableData.value = []
             } else {
+                res.data.dataSetList.forEach((item: any) => {
+                    console.log(item.type, '777777777')
+                    if (item.type === 'history') {
+                        item.id = item.id + '_history'
+                    }
+                    if (item.type === 'trenddata') {
+                        item.id = item.id + '_trenddata'
+                    }
+                    if (item.type === 'realtimedata') {
+                        item.id = item.id + '_realtimedata'
+                    }
+                    if (item.type === 'event') {
+                        item.id = item.id + '_event'
+                    }
+                })
                 dataSet.value = res.data.dataSetList[0].id
                 handleClick()
             }
             loading.value = false
         })
-        formInline.lineId = e.id
+    } else {
+        loading.value = false
     }
 }
-const handleClick = (tab?: any) => {
+const handleClick = async (tab?: any) => {
     tableLoading.value = true
     if (tab) {
         tableData.value = []
         formInline.pageNum = 1
     }
-    setTimeout(() => {
+    // setTimeout(() => {
-        if (dataSet.value.indexOf('_history') > -1) {
+    //查询历史模块数据
-            formInline.startTime = datePickerRef.value.timeValue[0]
+    if (dataSet.value.indexOf('_history') > -1) {
-            formInline.endTime = datePickerRef.value.timeValue[1]
+        console.log('_history')
-            formInline.id = dataSet.value.replace('_history', '')
+        formInline.startTime = datePickerRef.value.timeValue[0]
-            deviceHisData(formInline).then((res: any) => {
+        formInline.endTime = datePickerRef.value.timeValue[1]
-                console.log(res)
+        formInline.id = dataSet.value.replace('_history', '')
-                tableData.value = res.data.records
+        await deviceHisData(formInline).then((res: any) => {
-                formInline.total = res.data.total
+            console.log(res)
-                tableLoading.value = false
+            tableData.value = res.data.records
-            })
+            formInline.total = res.data.total
-        } else {
+            tableLoading.value = false
-            formInline.id = dataSet.value
+        })
-            deviceRtData(formInline).then((res: any) => {
+    }
-                tableData.value = res.data.records
+    //查询数据趋势数据
-                formInline.total = res.data.total
+    if (dataSet.value.indexOf('_trenddata') > -1) {
-                tableLoading.value = false
+        console.log('_trenddata')
-            })
+    }
-        }
+    //查询实时数据
-    }, 100)
+    if (dataSet.value.indexOf('_realtimedata') > -1) {
+        console.log('_realtimedata')
+    }
+    //查询暂事件
+    if (dataSet.value.indexOf('_event') > -1) {
+        console.log('_event')
+    } else {
+        formInline.id = dataSet.value
+        await deviceRtData(formInline).then((res: any) => {
+            tableData.value = res.data.records
+            formInline.total = res.data.total
+            tableLoading.value = false
+        })
+    }
+    // }, 100)
 }
 queryByCode('Device_Type').then(res => {
     queryCsDictTree(res.data.id).then(res => {
@@ -268,7 +325,7 @@ queryByCode('Device_Type').then(res => {
     })
 })
 const echoName = (value: any, arr: any[]) => {
-    return arr.find(item => item.value == value).label
+    return value ? arr.find(item => item.value == value).label : '/'
 }
 const openGroup = () => {
     if (!dataSet.value) {

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

@@ -85,6 +85,7 @@ const devModelOptions = ref([])
 const tableData = ref([])
 const tableHeight = mainHeight(235).height
 const mangePopup = ref()
+const activeName = ref(0)
 const nodeClick = (e: anyObj) => {
     if (!e) {
         loading.value = false
@@ -94,12 +95,18 @@ const nodeClick = (e: anyObj) => {
         loading.value = true
         getDeviceData(e.id, 'rt').then((res: any) => {
             deviceData.value = res.data
+            console.log(deviceData.value)
             loading.value = false
-            if (res.data.dataSetList.length === 0) {
+            if (res.data.dataSetList?.length === 0) {
                 dataSet.value = ''
                 tableData.value = []
             } else {
-                dataSet.value = res.data.dataSetList[0].id
+                if (res.data.dataSetList&&res.data.dataSetList[0]?.id) {
+                    dataSet.value = res.data.dataSetList[0]?.id
+                } 
+                else {
+                    tableData.value = []
+                }
                 handleClick()
             }
         })
@@ -168,7 +175,9 @@ const openGroup = () => {
 <style lang="scss">
 .device-manage {
     display: flex;
-
+    &-left {
+        width: 280px;
+    }
     &-right {
         overflow: hidden;
         flex: 1;

src/views/govern/device/planData/components/popup.vue

@@ -345,6 +345,7 @@
                         >
                             <vxe-column type="checkbox" width="60"></vxe-column>
                             <vxe-column type="seq" width="40"></vxe-column>
+                            <vxe-column field="itemName" title="名称"></vxe-column>
                             <vxe-column field="devName" title="设备名称"></vxe-column>
                             <vxe-column field="devMac" title="设备MAC"></vxe-column>
                             <vxe-column field="devNdId" title="网络识别码"></vxe-column>
@@ -472,7 +473,7 @@ const initForm = () => {
     //测试项数据
     form1.value = {
         itemName: '', //测试项名称
-        statisticalInterval: statisticalIntervalList[0].id, //测量间隔
+        statisticalInterval: statisticalIntervalList[1].id, //测量间隔
         voltageLevel: voltageLevelList[0].id, //电压等级
         volConType: volConTypeList[0].id, //接线方式
         capacitySscmin: 10, //最小短路容量
@@ -601,7 +602,6 @@ const details = (val: any) => {
     }
     //修改测试项回显
     if (activeFormIndex.value == 3) {
-        console.log(val, '66666666777777755555')
         form1.value = val.records[0]
     }
     if (activeFormIndex.value != 1 && activeFormIndex.value != 3) {
@@ -645,6 +645,9 @@ defineOptions({
 const treeIds: any = ref(['-1'])
 //树节点选择变化的时候处理树节点选中数据
 const checkChange = async (data: any) => {
+    if (defaultCheckedKeys.value.length == 0) {
+        treeIds.value[0] = '-1'
+    }
     if (data.checked) {
         defaultCheckedKeys.value.push(data.data.id)
         data.data.children?.map((item: any) => {
@@ -656,6 +659,8 @@ const checkChange = async (data: any) => {
             treeIds.value.splice(defaultCheckedKeys.value.indexOf(item.id), 1)
         })
     }
+    treeIds.value = [...new Set(treeIds.value)]
+    treeIds.value[0] = '-1'
     await tableStore.index()
 }
 const deviceInfoTreeRef = ref()
@@ -678,6 +683,7 @@ const tableStore = new TableStore({
     column: [
         { width: '40', type: 'checkbox', fixed: 'left' },
         { title: '序号', type: 'seq', width: 60 },
+        { field: 'itemName', title: '名称', minWidth: 170 },
         { field: 'devName', title: '设备名称', minWidth: 170 },
         { field: 'lineName', title: '线路号', minWidth: 170 },
         { field: 'startTime', title: '开始时间', minWidth: 170 },
@@ -890,6 +896,7 @@ defineExpose({ open, details })
     width: 100%;
     display: flex;
     justify-content: flex-end;
+    margin: 10px 0;
 }
 .add_device {
     // display: flex;

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

@@ -22,7 +22,7 @@
                     <el-tab-pane
                         v-for="(item, index) in deviceData.records"
                         :label="item.itemName"
-                        :name="item.itemName"
+                        :name="item.id"
                         :key="index"
                     >
                         <el-descriptions value="small" class="mb10" :column="4" border>
@@ -100,6 +100,22 @@
                             ></el-option>
                         </el-select>
                     </el-form-item>
+                    <el-form-item label="谐波次数" v-if="countOptions.length != 0">
+                        <el-select
+                            @change="init"
+                            v-model="searchForm.count"
+                            multiple
+                            :multiple-limit="3"
+                            placeholder="请选择谐波次数"
+                        >
+                            <el-option
+                                v-for="item in countOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
                     <el-form-item label="值类型">
                         <el-select @change="init" v-model="searchForm.type" placeholder="请选择值类型">
                             <el-option
@@ -113,9 +129,15 @@
                 </el-form>
                 <div class="history_searchBtn">
                     <!-- <el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button> -->
-                    <!-- <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
+                    <el-button
+                        v-if="historyDataList.length != 0"
+                        type="primary"
+                        size="small"
+                        icon="el-icon-Download"
+                        @click="handleExport"
+                    >
                         导出
-                    </el-button> -->
+                    </el-button>
                 </div>
             </div>
             <!-- <div class="title">
@@ -178,10 +200,13 @@ const typeOptions = [
 ]
 searchForm.value = {
     index: '',
-    type: typeOptions[0].id
+    type: typeOptions[0].id,
+    count: []
 }
 //统计指标
 const indexOptions: any = ref([])
+//谐波次数
+const countOptions: any = ref([])
 // Harmonic_Type
 // portable-harmonic
 const legendDictList: any = ref([])
@@ -197,23 +222,34 @@ queryByCode('portable-harmonic').then(res => {
 const activeName: any = ref()
 const deviceData: any = ref([])
 const schemeTreeRef = ref()
-const nodeId: any = ref('')
+//历史趋势devId
+const historyDevId: any = ref('')
 const chartTitle: any = ref('')
 const nodeClick = async (e: anyObj) => {
     loading.value = true
     deviceData.value = []
-    nodeId.value = e.id
+    historyDevId.value = e.children && e.children.length != 0 ? e.children[0].id : e.id
     let id = e.pid ? e.pid : e.id
+    console.log(id, e, '单个点击')
     //查询测试项信息
     try {
         await getTestRecordInfo(id).then(res => {
             deviceData.value = res.data
             loading.value = false
-            res.data.records.map(item => {
+            if (res.data.records.length == 1) {
-                if (item.id == e.id) {
+                activeName.value = res.data.records[0].id
-                    activeName.value = item.itemName
+            } else {
-                }
+                res.data.records.map((item: any) => {
-            })
+                    //多层
+                    console.log(item.id, e.id, '88888888888888888888')
+                    if (item.id == e.id) {
+                        activeName.value = item.id
+                        return
+                        console.log('着调了', activeName.value, item.id)
+                    }
+                })
+            }
+
             schemeTreeRef.value.getPlanData(deviceData.value)
         })
     } catch (error) {
@@ -237,28 +273,76 @@ const historyDataList: any = ref([])
 const refreshTree = () => {
     schemeTreeRef.value.getTreeList()
 }
-const isDel = ref(false)
+const range = (start: any, end: any, step: any) => {
+    return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
+}
 const init = async () => {
-    if (nodeId.value) {
+    //选择指标的时候切换legend内容和data数据
-        try {
+    let list: any = []
-            //查询历史趋势
+    legendDictList.value?.selectedList?.map((item: any) => {
-            historyDataList.value = []
+        if (item.dataType == searchForm.value.index) {
-            loading.value = true
+            list.push(item.eleEpdPqdVOS)
-            chartTitle.value =
+            countOptions.value = []
-                deviceData.value.itemName +
+            item.eleEpdPqdVOS.map((vv: any) => {
-                ' ' +
+                if (vv.harmStart && vv.harmEnd) {
-                deviceData.value.records[0]?.itemName +
+                    let list = []
-                ' ' +
+                    range(0, 0, 0)
-                indexOptions.value.find(item => {
+                    list = range(vv.harmStart, vv.harmEnd, 2)
-                    return item.id == searchForm.value.index
+                    list.map((item: any) => {
-                })?.name
+                        countOptions.value.push({
-            await getHistoryTrend({
+                            id: item,
-                devId: nodeId.value,
+                            name: item
-                statisticalId: searchForm.value.index,
+                        })
-                valueType: searchForm.value.type
+                    })
+                } else {
+                    countOptions.value = []
+                }
             })
+        }
+    })
+    if (historyDevId.value) {
+        //查询历史趋势
+        historyDataList.value = []
+        loading.value = true
+        let middleTitle = ''
+        if (
+            deviceData.value.records &&
+            deviceData.value.records.length != 0 &&
+            deviceData.value.records.find((item: any) => {
+                return item.id == activeName.value
+            })?.itemName
+        ) {
+            middleTitle = deviceData.value.records.find((item: any) => {
+                return item.id == activeName.value
+            })?.itemName
+        } else {
+            middleTitle = ''
+        }
+        chartTitle.value =
+            deviceData.value.itemName +
+            ' ' +
+            middleTitle +
+            ' ' +
+            indexOptions.value.find(item => {
+                return item.id == searchForm.value.index
+            })?.name
+        let obj = {
+            devId: historyDevId.value,
+            statisticalId: searchForm.value.index,
+            valueType: searchForm.value.type,
+            frequency: ''
+        }
+        if (countOptions.value.length != 0 && searchForm.value.count.length != 0) {
+            obj.frequency = JSON.parse(JSON.stringify(searchForm.value.count.join(',')))
+        } else {
+            searchForm.value.count = []
+            delete obj.frequency
+        }
+        try {
+            await getHistoryTrend(obj)
                 .then(res => {
                     if (res.code == 'A0000') {
+                        console.log(res, '趋势图')
                         historyDataList.value = res.data
                         echartsData.value = null
                         //icon图标替换legend图例
@@ -268,8 +352,10 @@ const init = async () => {
                             'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
 
                         let xAxis: any[] = []
-                        historyDataList.value.map(item => {
+                        let unit = ''
+                        historyDataList.value.map((item: any) => {
                             xAxis.push(item.time)
+                            unit = item.unit
                         })
                         echartsData.value = {
                             options: {
@@ -281,9 +367,67 @@ const init = async () => {
                                 ],
                                 toolbox: {
                                     feature: {
-                                        saveAsImage: {
+                                        // saveAsImage: {
-                                            title: '保存'
+                                        //     title: '保存'
-                                        }
+                                        // },
+                                        // dataView: { readOnly: false },
+                                        // myTool1: {
+                                        //     show: true,
+                                        //     title: '下载数据',
+                                        //     icon: 'path://M18 20.288L21.288 17l-.688-.688l-2.1 2.1v-4.887h-1v4.887l-2.1-2.1l-.688.688zM14.5 23.5v-1h7v1zm-10-4v-17H13L18.5 8v3.14h-1V8.5h-5v-5h-7v15h6.615v1zm1-1v-15z',
+                                        //     onclick: function () {
+                                        //         setTimeout(() => {
+                                        //             // 使用这个函数转换数据为CSV格式
+                                        //             let csv = ''
+                                        //             const list = echartsData.value.options.series
+                                        //             list.map((item: any, key: any) => {
+                                        //                 csv = convertToCSV(item.data, key)
+                                        //             })
+                                        //             // 如果你想提供下载链接
+                                        //             const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+                                        //             const link = document.createElement('a')
+                                        //             link.href = URL.createObjectURL(blob)
+                                        //             link.download = '历史趋势.csv'
+                                        //             link.click()
+                                        //             function convertToCSV(data: any, key: any) {
+                                        //                 console.log(data, key, '0000000')
+                                        //                 // 添加列头
+                                        //                 let title = '时间,'
+                                        //                 list.map((item: any, index: any) => {
+                                        //                     // title+=item.name+','
+                                        //                     index == list.length - 1
+                                        //                         ? (title += `${item.name}\n`)
+                                        //                         : (title += `${item.name},`)
+                                        //                 })
+                                        //                 console.log(title, '99999999999')
+                                        //                 let csv = ''
+                                        //                 // csv += 'x,y\n'
+                                        //                 csv = title
+                                        //                 // 遍历数据并添加到CSV字符串中
+                                        //                 let arr = []
+                                        //                 arr[key] = data
+                                        //                 console.log(list[0].data.length, '77777777777')
+                                        //                list[0].data.map((vv:any,indexs:any)=>{
+                                        //                     if (list.length==3) {
+                                        //                         csv += `${xAxis[indexs]},${list[0].data[indexs]},${list[1].data[indexs]},${list[2].data[indexs]}\n`
+                                        //                     }
+                                        //                 })
+                                        //                 // list[key].data.map((item: any, index: any) => {
+                                        //                 //     if (key == 0) {
+                                        //                 //         csv += `${xAxis[index]},${item},\n`
+                                        //                 //     }
+                                        //                 //     if (key == list.length - 1) {
+                                        //                 //         csv += `${item}\n`
+                                        //                 //     }
+                                        //                 //     if (key != 0 && key != list.length - 1) {
+                                        //                 //         csv += `${item},`
+                                        //                 //     }
+                                        //                 // })
+                                        //                 return csv
+                                        //             }
+                                        //         }, 10)
+                                        //     }
+                                        // }
                                     }
                                 },
                                 tooltip: {
@@ -294,29 +438,7 @@ const init = async () => {
                                 },
                                 legend: {
                                     //legend使用iconfont图标
-                                    // data: [
+                                    data: [],
-                                    //     {
-                                    //         name: list[0]?.name,
-                                    //         icon: iconThree
-                                    //     },
-                                    //     {
-                                    //         name: list[1]?.name,
-                                    //         icon: iconThree
-                                    //     },
-                                    //     {
-                                    //         name: list[2]?.name,
-                                    //         icon: iconThree
-                                    //     },
-                                    //     {
-                                    //         name: list[3]?.name,
-                                    //         icon: iconDanger
-                                    //     }
-                                    // ],
-                                    // x: 'right',
-                                    // textStyle: {
-                                    //     // color: 'white',
-                                    //     fontSize: 14
-                                    // },
                                     top: 5,
                                     right: 80,
                                     itemWidth: 20,
@@ -349,7 +471,7 @@ const init = async () => {
                                 yAxis: [
                                     {
                                         type: 'value',
-                                        name: 'KV',
+                                        name: unit,
                                         axisLabel: {
                                             color: '#A9AEB2',
                                             fontSize: 12
@@ -376,141 +498,48 @@ const init = async () => {
                                             }
                                         }
                                     }
-                                ]
+                                ],
-                                // series: [
+                                series: []
-                                //     {
-                                //         name: list[0]?.name,
-                                //         type: 'line',
-                                //         smooth: true,
-                                //         emphasis: {
-                                //             focus: 'series'
-                                //         },
-                                //         itemStyle: {
-                                //             normal: {
-                                //                 color: '#DAA521',
-                                //                 lineStyle: {
-                                //                     color: '#DAA521'
-                                //                 }
-                                //             }
-                                //         },
-                                //         data: historyDataList.value
-                                //             .map(item => {
-                                //                 if (item.statisticalName === 'Apf_ThdA_Load') {
-                                //                     return item.statisticalData
-                                //                 } else {
-                                //                     return ''
-                                //                 }
-                                //             })
-                                //             .filter(item => item !== '')
-                                //     },
-                                //     {
-                                //         name: list[1]?.name,
-                                //         type: 'line',
-                                //         smooth: true,
-                                //         emphasis: {
-                                //             focus: 'series'
-                                //         },
-                                //         itemStyle: {
-                                //             normal: {
-                                //                 color: '#2E8B58',
-                                //                 lineStyle: {
-                                //                     color: '#2E8B58'
-                                //                 }
-                                //             }
-                                //         },
-                                //         data: historyDataList.value
-                                //             .map(item => {
-                                //                 if (item.statisticalName === 'Apf_ThdA_Sys') {
-                                //                     return item.statisticalData
-                                //                 } else {
-                                //                     return ''
-                                //                 }
-                                //             })
-                                //             .filter(item => item !== '')
-                                //     },
-                                //     {
-                                //         name: list[2]?.name,
-                                //         type: 'line',
-                                //         smooth: true,
-                                //         emphasis: {
-                                //             focus: 'series'
-                                //         },
-                                //         itemStyle: {
-                                //             normal: {
-                                //                 color: '#A5292A',
-                                //                 lineStyle: {
-                                //                     color: '#A5292A'
-                                //                 }
-                                //             }
-                                //         },
-                                //         data: historyDataList.value
-                                //             .map(item => {
-                                //                 if (item.statisticalName === 'Apf_RmsI_TolOut') {
-                                //                     return item.statisticalData
-                                //                 } else {
-                                //                     return ''
-                                //                 }
-                                //             })
-                                //             .filter(item => item !== '')
-                                //     },
-                                //     {
-                                //         name: list[3]?.name,
-                                //         type: 'line',
-                                //         smooth: true,
-                                //         emphasis: {
-                                //             focus: 'series'
-                                //         },
-                                //         itemStyle: {
-                                //             normal: {
-                                //                 color: '#d81e06',
-                                //                 lineStyle: {
-                                //                     color: '#d81e06'
-                                //                 }
-                                //             }
-                                //         },
-                                //         data: []
-                                //     }
-                                // ]
                             }
                         }
-                        //选择指标的时候切换legend内容和data数据
-                        let list = []
                         //颜色数组
                         const colorList = ['#DAA521', '#2E8B58', '#A5292A', '#d81e06']
-                        legendDictList.value?.selectedList?.map(item => {
-                            if (item.dataType == searchForm.value.index) {
-                                list.push(item.eleEpdPqdVOS)
-                            }
-                        })
                         list.map((item, index) => {
-                            echartsData.value.options.legend.data.push({
+                            item.map((vv: any, indexs: any) => {
-                                name: item.showName,
+                                //处理legend
-                                icon: iconThree
+                                if (historyDataList.value.length != 0) {
-                            })
+                                    echartsData.value.options.legend.data.push({
-                            echartsData.value.options.series.push({
+                                        name: vv.showName,
-                                name: item.showName,
+                                        icon: iconThree
-                                type: 'line',
-                                smooth: true,
-                                emphasis: {
-                                    focus: 'series'
-                                },
-                                itemStyle: {
-                                    normal: {
-                                        color: colorList[index],
-                                        lineStyle: {
-                                            color: colorList[index]
-                                        }
-                                    }
-                                },
-                                data: historyDataList.value
-                                    .map(vv => {
-                                        if (vv.statisticalName === item.name) {
-                                            return vv.statisticalData
-                                        } else {
-                                            return ''
-                                        }
                                     })
-                                    .filter(vv => vv !== '')
+                                }
+                                //series数据
+                                echartsData.value.options.series.push({
+                                    name: vv.showName,
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    emphasis: {
+                                        focus: 'series'
+                                    },
+                                    itemStyle: {
+                                        normal: {
+                                            color: colorList[indexs],
+                                            lineStyle: {
+                                                color: colorList[indexs]
+                                            }
+                                        }
+                                    },
+                                    data: historyDataList.value
+                                        .map((kk: any) => {
+                                            if (kk.statisticalName === vv.name) {
+                                                return kk.statisticalData
+                                            } else {
+                                                return ''
+                                            }
+                                        })
+                                        .filter((kk: any) => kk !== '')
+                                })
                             })
                         })
                         loading.value = false
@@ -534,31 +563,66 @@ const historyChart = ref()
 // const chart: any = ref(null)
 // chart.value = echarts.init(historyChart.value)
 const handleExport = () => {
-    // 使用ECharts的getOption方法获取当前图表的配置
+    setTimeout(() => {
-    const option = chart.value.getOption()
+        let xAxis: any = []
-    console.log(option.series, '00000000000')
+        historyDataList.value.map((item: any) => {
-    return
+            xAxis.push(item.time)
-    const seriesData = option.series[0].data // 假设我们只导出第一个系列的数据
+        })
-
+        // 使用这个函数转换数据为CSV格式
-    // 转换为CSV格式
+        let csv = ''
-    let csvContent = 'data1,data2\n'
+        const list = echartsData.value.options.series
-    seriesData.forEach(item => {
+        list.map((item: any, key: any) => {
-        csvContent += `${item.name},${item.value}\n`
+            csv = convertToCSV(item.data, key)
-    })
+        })
-
+        // 如果你想提供下载链接
-    // 创建Blob对象，并使用a标签下载
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+        const link = document.createElement('a')
-    const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
-    if (link.download !== undefined) {
+        link.download = '历史趋势.csv'
-        // 支持下载属性
-        const url = URL.createObjectURL(blob)
-        link.setAttribute('href', url)
-        link.setAttribute('download', 'data.csv')
-        link.style.visibility = 'hidden'
-        document.body.appendChild(link)
         link.click()
-        document.body.removeChild(link)
+        function convertToCSV(data: any, key: any) {
-    }
+            console.log(data, key, '0000000')
+            // 添加列头
+            let title = '时间,'
+            list.map((item: any, index: any) => {
+                // title+=item.name+','
+                index == list.length - 1 ? (title += `${item.name}\n`) : (title += `${item.name},`)
+            })
+            let csv = ''
+            // csv += 'x,y\n'
+            csv = title
+            // 遍历数据并添加到CSV字符串中
+            let arr = []
+            arr[key] = data
+            let str = ''
+            list.map((item: any, index: any) => {
+                // str += '${list[' + index + '].data[indexs]},'
+                str += `${list[index].data['indexs']}`
+            })
+            console.log(str, 'strstrstrstrstrsr')
+            const listLength = list.length
+            list[0].data.map((vv: any, indexs: any) => {
+                switch (listLength) {
+                    case 1:
+                        csv += `${xAxis[indexs]},${list[0].data[indexs]}\n`
+                        break
+                    case 2:
+                        csv += `${xAxis[indexs]},${list[0].data[indexs]},${list[1].data[indexs]}\n`
+                        break
+                    case 3:
+                        csv += `${xAxis[indexs]},${list[0].data[indexs]},${list[1].data[indexs]},${list[2].data[indexs]}\n`
+                        break
+                }
+
+                // if (list.length == 3) {
+                //     // ${list[0].data[indexs]},${list[1].data[indexs]},${list[2].data[indexs]}
+                //     csv +=`${list[0].data[indexs]},${list[1].data[indexs]},${list[2].data[indexs]}`
+                // }
+            })
+            return csv
+        }
+    }, 10)
+    // historyChart.value.handleExport(historyDataList.value)
 }
 
 onMounted(() => {})