修改测试bug

src/components/echarts/MyEchart.vue

@@ -14,6 +14,7 @@ import 'echarts/lib/component/dataZoom'
 import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
 import { saveAs } from 'file-saver'
+import { t } from 'vxe-table'
 // import { nextTick } from 'process'
 
 const config = useConfig()
@@ -66,6 +67,19 @@ const initChart = () => {
             borderWidth: 0,
             ...(props.options?.tooltip || null)
         },
+        toolbox: {
+            right: 20,
+            top: 20,
+            feature: {
+                saveAsImage: {
+                    title: '保存图片',
+                },
+                ...(props.options?.toolbox?.featureProps || null),
+               
+            },
+            // },
+            ...(props.options?.toolbox || null)
+        },
         legend: {
             right: 20,
             top: 0,
@@ -80,7 +94,7 @@ const initChart = () => {
             ...(props.options?.legend || null)
         },
         grid: {
-            top: '50px',
+            top: '60px',
             left: '30px',
             right: '70px',
             bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
@@ -218,6 +232,10 @@ const handlerXAxis = () => {
         }
     }
 }
+
+
+
+
 let throttle: ReturnType<typeof setTimeout>
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {

src/components/table/header/index.vue

@@ -1,14 +1,9 @@
 <template>
     <div ref="tableHeader" class="cn-table-header">
-        <div class="table-header ba-scroll-style">
+        <div class="table-header ba-scroll-style" :key="num">
-            <el-form
+
-                style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap"
+            <el-form style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap" ref="headerForm"
-                ref="headerForm"
+                @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
-                @submit.prevent=""
-                @keyup.enter="onComSearch"
-                label-position="left"
-                :inline="true"
-            >
                 <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: 570px">
                     <DatePicker ref="datePickerRef" :nextFlag="nextFlag" :theCurrentTime="theCurrentTime"></DatePicker>
                 </el-form-item>
@@ -28,14 +23,9 @@
             </template>
             <slot name="operation"></slot>
         </div>
-        <el-form
+        <el-form :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
-            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
+            ref="headerFormSecond" @submit.prevent="" @keyup.enter="onComSearch" label-position="left"
-            ref="headerFormSecond"
+            :inline="true"></el-form>
-            @submit.prevent=""
-            @keyup.enter="onComSearch"
-            label-position="left"
-            :inline="true"
-        ></el-form>
     </div>
 </template>
 
@@ -57,7 +47,7 @@ const dictData = useDictData()
 const areaRef = ref()
 const headerForm = ref()
 const headerFormSecond = ref()
-
+const num = ref(0)
 interface Props {
     datePicker?: boolean
     area?: boolean
@@ -74,7 +64,7 @@ const props = withDefaults(defineProps<Props>(), {
     theCurrentTime: false
 })
 // 动态计算table高度
-const resizeObserver = new ResizeObserver(entries => {
+let resizeObserver = new ResizeObserver(entries => {
     for (const entry of entries) {
         handlerHeight()
         computedSearchRow()
@@ -118,9 +108,11 @@ const handlerHeight = () => {
         ).height as string
     }
 }
+// 刷新页面handler高度出下拉
 const computedSearchRow = () => {
     if (!headerForm.value.$el) return
 
+
     // 清空headerFormSecond.value.$el下的元素
     while (headerFormSecond.value.$el.firstChild) {
         headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
@@ -173,13 +165,15 @@ const setInterval = (val: any) => {
     datePickerRef.value.setInterval(val)
 }
 
-defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef, showSelectChange })
+
+defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef, showSelectChange, computedSearchRow })
 </script>
 
 <style scoped lang="scss">
 .cn-table-header {
     border: 1px solid var(--el-border-color);
 }
+
 .table-header {
     position: relative;
     overflow-x: auto;
@@ -221,7 +215,7 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef,
     margin-left: 12px;
 }
 
-.mlr-12 + .el-button {
+.mlr-12+.el-button {
     margin-left: 12px;
 }
 
@@ -256,7 +250,7 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef,
         border-radius: 0;
     }
 
-    .el-button + .el-button {
+    .el-button+.el-button {
         margin: 0;
     }
 
@@ -267,6 +261,7 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef,
 
 html.dark {
     .table-search-button-group {
+
         button:focus,
         button:active {
             background-color: var(--el-color-info-dark-2);
@@ -285,11 +280,13 @@ html.dark {
         }
     }
 }
+
 #header-form,
 #header-form-second {
     :deep(.el-select) {
         --el-select-width: 220px;
     }
+
     :deep(.el-input) {
         --el-input-width: 220px;
     }

src/utils/echartMethod.ts

@@ -1,3 +1,4 @@
+// 处理y轴最大最小值
 export const yMethod = (arr: any) => {
     let maxValue = 0
     let minValue = 0
@@ -24,3 +25,24 @@ export const yMethod = (arr: any) => {
     }
     return [min, max]
 }
+// 导出csv文件
+const convertToCSV = (title: object,data) => {
+    let csv = '';
+    // 添加列头  
+    csv += ' ,'+title.join(',') + '\n';
+    // 遍历数据并添加到CSV字符串中  
+    data.forEach(item => {
+        csv += `${item.x},${item.y}\n`;
+    });
+    return csv;
+}
+export const exportCSV = (title: object,data: any,filename:string) => {
+    const csv = convertToCSV(title,data);
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    link.click();
+    // 释放URL对象  
+    URL.revokeObjectURL(link.href);
+}

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

@@ -39,7 +39,8 @@ import { reactive } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { yMethod } from '@/utils/echartMethod'
+import { yMethod, exportCSV } from '@/utils/echartMethod'
+import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'
 
 interface Props {
     detail: anyObj
@@ -125,7 +126,7 @@ const init = () => {
                 options: {
 
                     grid: {
-                        top: '50px',
+                        top: '60px',
                         left: '10px',
                         right: '20px',
                         bottom: '40px',
@@ -187,9 +188,7 @@ const init = () => {
                 yAxis: {
                     name: `单位:(${arr[0].unit == null ? ' / ' : arr[0].unit})`,
                     type: 'value',
-                    axisLine: {
+
-                        show: true
-                    },
 
                     min: min,
                     max: max,
@@ -246,6 +245,21 @@ const init = () => {
                     //         return value.split(' ').join('\n')
                     //     }
                     // }
+                },
+                toolbox: {
+                    featureProps: {
+                        myTool1: {
+                            show: true,
+                            title: '下载csv',
+                            icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
+                            onclick: (e) => {
+                                echartsData.value
+                                console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.name))
+                                exportCSV(echartsData.value.options.series.map(item => item.name),dataList, 'aaa.csv')
+                                // downloadCSV(dataList, 'data.csv');
+                            }
+                        }
+                    }
                 }
             }
             if ((echartsData.value.legend = ['A相', 'B相', 'C相'])) {
@@ -257,6 +271,15 @@ const init = () => {
         loading.value = false
     })
 }
+const dataList = [
+    { x: 'A', y: 10 },
+    { x: 'B', y: 20 },
+    { x: 'C', y: 30 }
+    // ... 其他数据点  
+];
+
+
+
 defineExpose({ open })
 </script>
 <style lang="scss">

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

@@ -2,41 +2,30 @@
     <div>
         <!-- 历史趋势数据 -->
         <div>
-            <TableHeader :showSearch="false" @selectChange="selectChange">
+            <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
-                <template v-slot:select>
+                <template v-slot:select :key="num">
                     <!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
                     <el-form-item>
                         <DatePicker ref="datePickerRef"></DatePicker>
                     </el-form-item>
                     <el-form-item label="统计指标" label-width="80px">
-                        <el-select
+                        <el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
-                            multiple
+                            v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
-                            :multiple-limit="3"
+                            <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
-                            collapse-tags
+                                :value="item.id"></el-option>
-                            collapse-tags-tooltip
-                            v-model="searchForm.index"
-                            placeholder="请选择统计指标"
-                            @change="onIndexChange($event)"
-                        >
-                            <el-option
-                                v-for="item in indexOptions"
-                                :key="item.id"
-                                :label="item.name"
-                                :value="item.id"
-                            ></el-option>
                         </el-select>
                     </el-form-item>
-                    <div v-for="(item, index) in countData" :key="index">
+
+    
                         <el-form-item
+                        v-for="(item, index) in countData" :key="index"
                             :label="item.name + '谐波次数'"
-                            v-if="item.countOptions.length != 0"
+                         
                             label-width="180px"
                         >
+                     <!--    v-if="item.countOptions.length != 0" -->
                             <el-select
                                 v-model="item.count"
-                                multiple
-                                collapse-tags
-                                collapse-tags-tooltip
                                 @change="onCountChange($event, index)"
                                 placeholder="请选择谐波次数"
                             >
@@ -48,7 +37,7 @@
                                 ></el-option>
                             </el-select>
                         </el-form-item>
-                    </div>
+
                     <!-- </el-form> -->
                 </template>
                 <template #operation>
@@ -88,14 +77,16 @@ defineOptions({
     name: 'govern/device/control'
 })
 //电压等级
-const voltageLevelList = dictData.getBasicData('Dev_Voltage')
+const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
 //接线方式
 const volConTypeList = dictData.getBasicData('Dev_Connect')
+const num = ref(0)
 
 //值类型
 const pageHeight = ref(mainHeight(290))
 const loading = ref(true)
 const searchForm = ref({})
+const tableHeaderRef = ref()
 const typeOptions = [
     {
         name: '平均值',
@@ -117,7 +108,7 @@ const typeOptions = [
 searchForm.value = {
     index: [],
     type: typeOptions[0].id,
-    count: [],
+    count: '',
     searchBeginTime: '',
     searchEndTime: ''
 }
@@ -189,7 +180,7 @@ const init = async () => {
     countData.value.map((item: any, index: any) => {
         lists[index] = {
             statisticalId: item.index,
-            frequencys: item.count
+            frequencys: [item.count]
         }
     })
     let obj = {
@@ -260,9 +251,8 @@ const init = async () => {
                                     const xname = params[0].value[0]
                                     let str = `${xname}<br>`
                                     params.forEach((el, index) => {
-                                        str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${
+                                        str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${el.value[2]
-                                            el.value[2]
+                                            }<br>`
-                                        }<br>`
                                     })
                                     return str
                                 }
@@ -497,7 +487,7 @@ const initSearchFormIndexAndCount = (list: any) => {
                 countData.value[index] = {
                     index: item,
                     countOptions: [],
-                    count: [],
+                    count: '',
                     name: indexOptions.value.find((vv: any) => {
                         return vv.id == item
                     })?.name
@@ -512,37 +502,48 @@ const initSearchFormIndexAndCount = (list: any) => {
                             countData.value[index].countOptions = range(kk.harmStart, kk.harmEnd, 1)
                             //添加默认值
                             if (countData.value[index].count.length == 0) {
-                                countData.value[index].count = [countData.value[index].countOptions[0]]
+                                countData.value[index].count = countData.value[index].countOptions[0]
                             }
                         }
                     })
                 }
             })
+          
         })
+         countData.value =  countData.value.filter(item => item.countOptions.length > 0);
+
     }
 }
 // 判断下拉框是否存在
 const onCountChange = (val: any, index: any) => {
     if (val.length == 0) {
-        countData.value[index].count = [countData.value[index].countOptions[0]]
+        countData.value[index].count = countData.value[index].countOptions[0]
     }
 }
 const onIndexChange = (val: any) => {
+   
+    num.value +=1
     if (val.length == 0) {
         searchForm.value.index = [indexOptions.value[0].id]
     }
+    setTimeout(() => {
+        tableHeaderRef.value.computedSearchRow()
+    },500)
 }
 watch(
     () => searchForm.value.index,
     (val: any, oldval: any) => {
         if (val) {
-            initSearchFormIndexAndCount(val)
+            setTimeout(() => {
+                initSearchFormIndexAndCount(val)
+            }, 100)
             if (val == 0) {
                 countData.value = []
             }
             countData.value.map((item: any, key: any) => {
                 if (
                     val.findIndex((vv: any) => {
+
                         return vv == item.index
                     }) == -1
                 ) {

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

@@ -240,7 +240,7 @@ defineOptions({
 const config = useConfig()
 color[0] = config.layout.elementUiPrimary[0]
 //电压等级
-const voltageLevelList = dictData.getBasicData('Dev_Voltage')
+const voltageLevelList = dictData.getBasicData('Dev_Voltage_Stand')
 //接线方式
 const volConTypeList = dictData.getBasicData('Dev_Connect')
 //值类型