修改测试bug

2024-10-22 10:50:47 +08:00
parent 29150a3c82
commit 7d2394f75d
6 changed files with 126 additions and 65 deletions
--- a/src/components/echarts/MyEchart.vue
+++ b/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 => {
--- a/src/components/table/header/index.vue
+++ b/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">
-            <el-form
-                style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap"
-                ref="headerForm"
-                @submit.prevent=""
-                @keyup.enter="onComSearch"
-                label-position="left"
-                :inline="true"
-            >
+        <div class="table-header ba-scroll-style" :key="num">
+
+            <el-form style="flex: 1; height: 34px; margin-right: 20px; display: flex; flex-wrap: wrap" ref="headerForm"
+                @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
-            :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
-            ref="headerFormSecond"
-            @submit.prevent=""
-            @keyup.enter="onComSearch"
-            label-position="left"
-            :inline="true"
-        ></el-form>
+        <el-form :style="showSelect && showUnfoldButton ? headerFormSecondStyleOpen : headerFormSecondStyleClose"
+            ref="headerFormSecond" @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;
    }
--- a/src/utils/echartMethod.ts
+++ b/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);
+}
--- a/src/views/govern/device/control/detail.vue
+++ b/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">
--- a/src/views/govern/device/control/tabs/trend.vue
+++ b/src/views/govern/device/control/tabs/trend.vue
@@ -2,41 +2,30 @@
    <div>
        <!-- 历史趋势数据 -->
        <div>
-            <TableHeader :showSearch="false" @selectChange="selectChange">
-                <template v-slot:select>
+            <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
+                <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
-                            multiple
-                            :multiple-limit="3"
-                            collapse-tags
-                            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 multiple :multiple-limit="3" collapse-tags 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,8 +251,7 @@ 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]}${
-                                            el.value[2]
+                                        str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value[1]}${el.value[2]
                                            }<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) {
+            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
                ) {
--- a/src/views/govern/device/planData/index.vue
+++ b/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')
 //值类型