方案数据统计指标选择后谐波次数下拉框问题修改

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

@@ -455,21 +455,7 @@ const getData = (rightData: any) => {
     }
     checkedIdList.value = [...new Set(checkedIdList.value)]
 }
-const loading = ref(false)
-const defaultCheckedKeys: any = ref([])
-const tableData = ref([])
-defineOptions({
-    name: 'govern/tourist/index'
-})
-const treeIds: any = ref([])
-const pids: any = ref([])
 
-//绑定选择的数据
-const selectedBindList: any = ref([])
-//未绑定选择的数据
-const selectedUnBindList: any = ref([])
-const deviceInfoTreeRef1 = ref()
-const deviceInfoTreeRef2 = ref()
 //判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
 const addFlag = ref(false)
 const selectId: any = ref('')
@@ -511,11 +497,13 @@ const submit = () => {
                     itemName: form.value.itemName,
                     describe: form.value.describe
                 }
-                addPlan(subForm).then(res => {
+                addPlan(subForm).then((res: any) => {
+                    if (res.code == 'A0000') {
                         ElMessage.success('新增方案成功')
                         initForm()
                         emit('onSubmit')
                         close()
+                    }
                 })
             } else {
                 console.log('表单验证失败')
@@ -525,7 +513,7 @@ const submit = () => {
     }
     //修改方案
     if (activeFormIndex.value == 1) {
-        ruleFormRef1.value.validate(valid => {
+        ruleFormRef1.value.validate((valid: boolean) => {
             if (valid) {
                 const subForm = {
                     id: planId.value,
@@ -542,7 +530,7 @@ const submit = () => {
     }
     //新增测试项
     if (activeFormIndex.value == 2) {
-        ruleFormRef2.value.validate(valid => {
+        ruleFormRef2.value.validate((valid: boolean) => {
             if (valid) {
                 let subForm = {
                     id: planId.value,
@@ -574,11 +562,13 @@ const submit = () => {
                 //     return item.id
                 // })
                 subForm.list = checkedIdList.value
-                updateRecord(subForm).then(res => {
+                updateRecord(subForm).then((res:any) => {
+                    if (res.code == 'A0000') {
                         ElMessage.success('修改测试项成功')
                         initForm()
                         emit('onSubmit')
                         close()
+                    }
                 })
             } else {
                 console.log('校验不通过')

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

@@ -1,534 +0,0 @@
-<!-- eslint-disable vue/no-unused-vars -->
-<template>
-    <div class="treeTransfer">
-        <!-- 左边 -->
-        <div class="leftTree">
-            <p class="left_title">{{ props.title[0] }}</p>
-            <div class="list">
-                <div class="left_lowline">
-                    <!-- <el-checkbox
-                        v-model="checkedLeft"
-                        :disabled="leftTreeData.length < 1"
-                        label=""
-                        size="large"
-                        style="margin-right: 12px"
-                        @change="leftAllCheck"
-                    /> -->
-                </div>
-                <!-- 搜索 -->
-                <div class="left_input">
-                    <el-input
-                        v-model="leftSearchText"
-                        class="w-50"
-                        placeholder="请输入"
-                        clearable
-                        prefix-icon="el-icon-search"
-                        @clear="onSearchLeft"
-                        @keyup.enter="onSearchLeft"
-                        @change="onSearchLeft"
-                    />
-                </div>
-                <div style="overflow: auto; flex: 1; margin-top: 10px">
-                    <el-tree
-                        ref="leftTreeRef"
-                        :filter-node-method="filterNode"
-                        :data="leftTreeData"
-                        show-checkbox
-                        :node-key="props.nodeKey"
-                        :props="props.defaultProps"
-                        v-slot="{ node, data }"
-                        accordion
-                        @check="onCheckLeft"
-                        default-expand-all
-                    >
-                        <div>
-                            {{ data.name }}
-                        </div>
-                    </el-tree>
-                </div>
-            </div>
-        </div>
-        <!-- 中间按钮 -->
-        <div class="btnDiv">
-            <div class="mg10">
-                <el-button @click="toRight()" type="primary" :disabled="leftOperation.length < 1">
-                    绑定
-                    <el-icon><ArrowRight style="width: 20px !important; height: 20px !important" /></el-icon>
-                </el-button>
-            </div>
-            <div class="mg10">
-                <el-button @click="toLeft()" type="primary" :disabled="rightOperation.length < 1">
-                    <el-icon><ArrowLeft style="width: 20px !important; height: 20px !important" /></el-icon>
-                    解绑
-                </el-button>
-            </div>
-        </div>
-        <!-- 右边 -->
-        <div class="rightTree">
-            <div class="list">
-                <p class="left_title">{{ props.title[1] }}</p>
-                <div class="left_lowline">
-                    <!-- <el-checkbox
-                        v-model="checkedRight"
-                        :disabled="rightTreeData.length < 1"
-                        label=""
-                        size="large"
-                        style="margin-right: 12px"
-                        @change="rightAllCheck"
-                    /> -->
-                </div>
-                <!-- 搜索 -->
-                <div class="left_input">
-                    <el-input
-                        v-model="rightSearchText"
-                        class="w-50"
-                        placeholder="请输入"
-                        clearable
-                        prefix-icon="el-icon-search"
-                        @clear="onSearchRight"
-                        @keyup.enter="onSearchRight"
-                        @change="onSearchRight"
-                    />
-                </div>
-                <div style="overflow: auto; flex: 1; margin-top: 10px">
-                    <el-tree
-                        :filter-node-method="filterNode"
-                        ref="rightTreeRef"
-                        :data="rightTreeData"
-                        show-checkbox
-                        :node-key="props.nodeKey"
-                        :props="props.defaultProps"
-                        v-slot="{ node, data }"
-                        accordion
-                        @check="onCheckRight"
-                        default-expand-all
-                    >
-                        <div>
-                            {{ data.name }}
-                        </div>
-                    </el-tree>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-//@ts-nocheck    解决ts类型报红
-import { ref, onMounted, watch } from 'vue'
-import lodash from 'lodash'
-const props = defineProps(['nodeKey', 'fromData', 'toData', 'defaultProps', 'title'])
-import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
-const checkedLeft = ref(false)
-const checkedRight = ref(false)
-const leftSearchText = ref('')
-const rightSearchText = ref('')
-const leftOperation = ref<any[]>([])
-const rightOperation = ref<any[]>([])
-
-// 定义emit
-const emits = defineEmits(['change'])
-const leftTreeRef = ref()
-const rightTreeRef = ref()
-
-// 左侧数据
-const leftTreeData = ref([])
-// 右侧数据
-const rightTreeData = ref([])
-
-watch(
-    props,
-    newVal => {
-        leftTreeData.value = lodash.cloneDeep(newVal.fromData)
-        rightTreeData.value = lodash.cloneDeep(newVal.toData)
-    },
-    { immediate: true }
-)
-watch(
-    () => leftTreeData.value,
-    val => {
-        if (val) {
-            val.map((item: any, index: any) => {
-                if (item.pid) {
-                    val.splice(index, 1)
-                } else {
-                    if (!item.children || item.children.length == 0) {
-                        val.splice(index, 1)
-                    } else {
-                        item.children.map((vv: any, indexs: any) => {
-                            console.log(vv, '-------------')
-                            if (!vv.children || vv.children.length == 0) {
-                                item.children.splice(indexs, 1)
-                                item.children = [...new Set(item.children)]
-                            }
-                        })
-                    }
-                }
-            })
-        }
-    },
-    {
-        immediate: true,
-        deep: true
-    }
-)
-watch(
-    () => rightTreeData.value,
-    val => {
-        if (val) {
-            val.map((item: any, index: any) => {
-                if (item.pid) {
-                    val.splice(index, 1)
-                } else {
-                    if (!item.children || item.children.length == 0) {
-                        val.splice(index, 1)
-                    } else {
-                        item.children.map((vv: any, indexs: any) => {
-                            console.log(vv, '++++++++++')
-                            if (!vv.children || vv.children.length == 0) {
-                                item.children.splice(indexs, 1)
-                                item.children = [...new Set(item.children)]
-                            }
-                        })
-                    }
-                }
-            })
-        }
-    },
-    {
-        immediate: true,
-        deep: true
-    }
-)
-watch(leftSearchText, val => {
-    leftTreeRef.value?.filter(val)
-})
-watch(rightSearchText, val => {
-    rightTreeRef.value?.filter(val)
-})
-defineExpose({
-    leftTreeData,
-    rightTreeData
-})
-
-onMounted(() => {
-    leftSearchText.value = ''
-    rightSearchText.value = ''
-})
-
-const removeChecked = (rightList, allCheckedKeys) => {
-    rightList.forEach((e, index) => {
-        if (allCheckedKeys.indexOf(e.id) == -1) {
-            rightList.splice(index, 1)
-        }
-        if (e.children) {
-            removeChecked(e.children, allCheckedKeys)
-        }
-    })
-    return rightList
-}
-const recursionTree = (parents, allCheckedKeys) => {
-    parents.forEach(e => {
-        const list = lodash.filter(e.children, child => allCheckedKeys.indexOf(child.id) >= 0)
-        e.children = list
-        if (e.children.length !== 0) {
-            recursionTree(e.children, allCheckedKeys)
-        }
-    })
-    return parents
-}
-const handleData = (selectedNodes, leftTree, allCheckedKeys, type) => {
-    console.log(selectedNodes, '选择的数据')
-    //右移动，获取左边选择的数据，添加到右侧
-    selectedNodes.map((item: any) => {
-        //叶子结点
-        //去绑定
-        if (item.children && item.children.length != 0 && item.pid && type == 'left') {
-            rightTreeData.value.map((vv: any) => {
-                if (vv.id == item.pid) {
-                    vv.children.push(item)
-                }
-                vv.children = [...new Set(vv.children)]
-            })
-        }
-        //去解绑
-        if (item.children && item.children.length != 0 && item.pid && type == 'right') {
-            leftTreeData.value.map((vv: any) => {
-                if (vv.id == item.pid) {
-                    vv.children.push(item)
-                }
-                vv.children = [...new Set(vv.children)]
-            })
-        }
-    })
-}
-// 去右边
-const toRight = async () => {
-    const leftTree = leftTreeRef.value
-    checkedLeft.value = false
-    if (!leftTree) {
-        return
-    }
-    const leftNodes = leftTree.getCheckedNodes(false, true)
-    //查找到有数据的父节点
-    const parents = leftNodes.filter(el => el.children && el.children.length > 0)
-    console.log(parents, '找到的父节点')
-    // const checkedKeys = [...new Set(leftTree.getCheckedKeys(false))]
-    const checkedKeys = leftTree.getCheckedKeys(false)
-    const halfCheckedKeys = leftTree.getHalfCheckedKeys()
-    const allCheckedKeys = halfCheckedKeys.concat(checkedKeys)
-    const rightTree = rightTreeRef.value
-    if (!rightTree) {
-        let rightList = parents.map(parent => {
-            const obj = lodash.omit(parent, ['children'])
-            obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
-            console.log(obj, '找到的数据275')
-            return obj
-        })
-
-        let copyRightList = lodash.cloneDeep(rightList)
-        removeChecked(copyRightList, allCheckedKeys)
-        rightTreeData.value.push(...copyRightList)
-        rightTreeData.value = [...new Set(rightTreeData.value)]
-    } else {
-        let isExist = false
-        rightTree.data.forEach(e => {
-            if (parents.length != 0 && parents[0].id === (e as any).id) isExist = true
-        })
-        console.log(isExist, '88')
-        if (!isExist) {
-            const overall = lodash.cloneDeep(parents)
-            let rightList = await recursionTree(overall, allCheckedKeys)
-            let copyRightList = lodash.cloneDeep(rightList)
-            removeChecked(copyRightList, allCheckedKeys)
-            rightTreeData.value.push(...copyRightList)
-            rightTreeData.value = [...new Set(rightTreeData.value)]
-        } else {
-            handleData(leftNodes, rightTree, allCheckedKeys, 'left')
-        }
-    }
-    // 移过去之后要删除原本的值
-    leftNodes.forEach(node => {
-        leftTree.setChecked(node, false, false)
-        if (checkedKeys.indexOf(node.id) >= 0) {
-            leftTree.remove(node)
-        }
-    })
-
-    leftOperation.value = formatTree(leftTree.getCheckedNodes(false) || [], 'pid', 'id')
-    // emits('change', leftTreeData.value, rightTreeData.value)
-    emits('change', checkedKeys)
-    setTimeout(() => {
-        rightTree?.setCheckedNodes(leftNodes)
-        rightOperation.value = formatTree(rightTree.getCheckedNodes(false) || [], 'pid', 'id')
-        if (lodash.isEqual(rightOperation.value, rightTreeData.value)) {
-            checkedRight.value = true
-        } else {
-            checkedRight.value = false
-        }
-    }, 500)
-}
-// // 去左边
-const toLeft = async () => {
-    checkedRight.value = false
-    const rightTree = rightTreeRef.value
-    console.log(rightTreeData.value, '++++++++++', leftTreeData.value)
-    if (!rightTree) {
-        return
-    }
-    //获取右侧选中已绑定的节点
-    const rightNodes = rightTree.getCheckedNodes(false, true)
-    const checkedKeys = [...new Set(rightTree.getCheckedKeys(false))]
-    const halfCheckedKeys = rightTree.getHalfCheckedKeys()
-    const allCheckedKeys = halfCheckedKeys.concat(checkedKeys)
-    //获取有数据的节点
-    const parents = lodash.filter(rightNodes, item => item.children && item.children.length > 0)
-    const leftTree = leftTreeData.value.length ? leftTreeRef.value : null
-    //左侧树无数据
-    let leftList = parents.map(parent => {
-        const obj = lodash.omit(parent, ['children'])
-        obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
-        return obj
-    })
-    let copyLeftList = lodash.cloneDeep(leftList)
-    console.log(copyLeftList, 'copyLeftListcopyLeftListcopyLeftListcopyLeftListcopyLeftList')
-    copyLeftList.map((item)=>{
-        if(!item.pid){
-            leftTreeData.value.push(item)
-        }
-        // leftTreeData.value.map((vv)=>{
-        //     if(vv.id==item.pid){
-
-        //     }
-        // })
-    })
-    return
-    if (!leftTree) {
-        let leftList = parents.map(parent => {
-            const obj = lodash.omit(parent, ['children'])
-            obj.children = lodash.filter(parent.children, child => allCheckedKeys.indexOf(child.id) >= 0)
-            return obj
-        })
-        let copyLeftList = lodash.cloneDeep(leftList)
-        removeChecked(copyLeftList, allCheckedKeys)
-        leftTreeData.value.push(...copyLeftList)
-        leftTreeData.value = [...new Set(leftTreeData.value)]
-    }
-    //左侧树有数据
-    else {
-        let isExist = false
-        leftTree.data.forEach(e => {
-            if (parents.length != 0 && parents[0].id === (e as any).id) isExist = true
-        })
-        if (!isExist) {
-            const overall = lodash.cloneDeep(parents)
-            let leftList = await recursionTree(overall, allCheckedKeys)
-            let copyLeftList = lodash.cloneDeep(leftList)
-            console.log(copyLeftList, '5555555555555555555')
-            // removeChecked(copyLeftList, allCheckedKeys)
-            leftTreeData.value.push(...copyLeftList)
-            leftTreeData.value = [...new Set(leftTreeData.value)]
-        } else {
-            handleData(rightNodes, leftTree, allCheckedKeys, 'right')
-        }
-    }
-    console.log(rightTree, '11111111')
-
-    rightNodes.forEach(node => {
-        rightTree.setChecked(node, false, false)
-        if (checkedKeys.indexOf(node.id) >= 0) {
-            rightTree.remove(node)
-        }
-    })
-
-    console.log(rightTree, '2222222')
-
-    rightOperation.value = formatTree(rightTree.getCheckedNodes(false) || [], 'pid', 'id')
-    // emits('change', leftTreeData.value, rightTreeData.value)
-    emits('change', checkedKeys)
-    console.log(leftTreeData.value, '99999999')
-}
-
-//左侧选中（移除原本值用）
-const onCheckLeft = () => {
-    leftOperation.value = formatTree(leftTreeRef.value?.getCheckedNodes(false) || [], 'pid', 'id')
-    if (lodash.isEqual(leftOperation.value, leftTreeData.value)) {
-        checkedLeft.value = true
-    } else {
-        checkedLeft.value = false
-    }
-}
-// 右侧选中
-const onCheckRight = () => {
-    rightOperation.value = formatTree(rightTreeRef.value!.getCheckedNodes(false) || [], 'pid', 'id')
-    if (lodash.isEqual(rightOperation.value, rightTreeData.value)) {
-        checkedRight.value = true
-    } else {
-        checkedRight.value = false
-    }
-}
-
-const formatTree = (tree: any[], parentKey: string = 'pid', idKey: string = 'id') => {
-    // 格式化选择的树：清除全选下面的子节点
-    let swap,
-        parentIds: string[] = []
-    // 先找出有children的id集合，再把所有的数据做对比，只要pid和其中一个对上，就把该数据删除；
-    tree.forEach((item, index) => {
-        if (item.children) {
-            parentIds.push(item[idKey])
-        }
-    })
-    swap = tree.filter((item, index) => {
-        if (parentIds.indexOf(item[parentKey]) == -1) {
-            return item
-        }
-    })
-    return swap
-}
-
-const onSearchLeft = () => {
-    leftTreeRef.value?.filter(leftSearchText.value)
-}
-const leftAllCheck = () => {
-    const leftTree = leftTreeRef.value
-    if (checkedLeft.value) {
-        leftTree?.setCheckedNodes(leftTreeData.value)
-        checkedLeft.value = true
-    } else {
-        leftTree?.setCheckedNodes([])
-        checkedLeft.value = false
-    }
-    onCheckLeft()
-}
-const rightAllCheck = () => {
-    const rightTree = rightTreeRef.value
-    if (checkedRight.value) {
-        rightTree?.setCheckedNodes(rightTreeData.value)
-        checkedRight.value = true
-    } else {
-        rightTree?.setCheckedNodes([])
-        checkedRight.value = false
-    }
-    onCheckRight()
-}
-const onSearchRight = () => {
-    rightTreeRef.value?.filter(rightSearchText.value)
-}
-const filterNode = (value: string, data: any) => {
-    if (!value) return true
-    return data[props.defaultProps.label].includes(value)
-}
-</script>
-<style lang="scss" scoped>
-.treeTransfer {
-    display: flex;
-    height: 400px;
-    width: 100%;
-
-    .btnDiv {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        .mg10 {
-            padding: 5px;
-            :deep(svg),
-            :deep(.el-icon) {
-                height: 2em !important;
-                width: 2em !important;
-            }
-        }
-    }
-    .leftTree {
-        width: 45%;
-        border: 1px solid rgb(182, 182, 182);
-        box-sizing: border-box;
-        padding: 5px 10px;
-        .list {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-    }
-    .rightTree {
-        border: 1px solid rgb(182, 182, 182);
-        box-sizing: border-box;
-        padding: 5px 10px;
-        width: 45%;
-        .list {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-    }
-    .left_lowline {
-        display: flex;
-        align-items: center;
-    }
-    .right_lowline {
-        display: flex;
-        align-items: center;
-    }
-}
-</style>

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

@@ -3,9 +3,9 @@
         <!-- @node-change="nodeClick" -->
         <schemeTree @node-click="nodeClick" @init="nodeClick" ref="schemeTreeRef"></schemeTree>
         <div class="device-manage-right" v-if="deviceData">
-            <el-descriptions value="small" title="方案信息" class="mb10" :column="2" border>
+            <el-descriptions size="small" title="方案信息" class="mb10" :column="2" border>
                 <template #extra>
-                    <el-button type="primary" @click="handleOpen(0, '')">新增方案</el-button>
+                    <el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0, '')">新增方案</el-button>
                     <el-button type="primary" icon="el-icon-Download" @click="handleExport">数据导出</el-button>
                 </template>
                 <el-descriptions-item label="方案名称" width="60">
@@ -19,14 +19,20 @@
                 <div class="history_title">
                     <p>测试项信息</p>
                 </div>
-                <el-tabs v-model="activeName" type="border-card">
+                <el-tabs v-model="activeName" type="border-card" @click="init()">
                     <el-tab-pane
                         v-for="(item, index) in deviceData.records"
                         :label="item.itemName"
                         :name="item.id"
                         :key="index"
                     >
-                        <el-descriptions value="small" class="mb10" :column="6" border>
+                        <template #label>
+                            <span class="custom-tabs-label">
+                                <el-icon><TrendCharts /></el-icon>
+                                <span>{{ item.itemName }}</span>
+                            </span>
+                        </template>
+                        <el-descriptions size="small" class="mb10" width="180" :column="4" border>
                             <el-descriptions-item label="测试项名称" width="160">
                                 {{ item.itemName }}
                             </el-descriptions-item>
@@ -103,6 +109,7 @@
                             collapse-tags-tooltip
                             v-model="searchForm.index"
                             placeholder="请选择统计指标"
+                            @change="init()"
                         >
                             <el-option
                                 v-for="item in indexOptions"
@@ -112,18 +119,17 @@
                             ></el-option>
                         </el-select>
                     </el-form-item>
+                    <!-- {{ countData }} -->
                     <div v-for="(item, index) in countData" :key="index">
-                        <el-form-item
+                        <!-- :label="item.name + '谐波次数'"  label-width="180px"-->
-                            :label="item.name + '谐波次数'"
+                        <el-form-item label="谐波次数" v-if="item.countOptions.length != 0">
-                            v-if="item.countOptions.length != 0"
-                            label-width="180px"
-                        >
                             <!-- multiple -->
                             <el-select
                                 v-model="item.count"
                                 collapse-tags
                                 collapse-tags-tooltip
                                 placeholder="请选择谐波次数"
+                                style="width: 100px"
                             >
                                 <el-option
                                     v-for="vv in item.countOptions"
@@ -149,8 +155,8 @@
                     <el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
                 </div>
             </div>
-            <div class="history_chart" v-loading="loading" v-show="echartsData">
+            <div class="history_chart" v-loading="loading">
-                <MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
+                <MyEchart ref="historyChart" v-show="echartsData" :isExport="true" :options="echartsData" />
             </div>
         </div>
         <el-empty v-else description="请选择设备" class="device-manage-right" />
@@ -169,9 +175,7 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
 import { useDictData } from '@/stores/dictData'
 import { queryStatistical } from '@/api/system-boot/csstatisticalset'
-import * as echarts from 'echarts'
+import { TrendCharts, Plus } from '@element-plus/icons-vue'
-import { isNonNullChain } from 'typescript'
-import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
 const dictData = useDictData()
 defineOptions({
     name: 'govern/device/manage'
@@ -222,6 +226,7 @@ queryByCode('portable-harmonic').then(res => {
     })
     queryStatistical(res.data.id).then(vv => {
         legendDictList.value = vv.data
+        console.log(legendDictList.value, '2362636236636366263636', vv)
     })
 })
 const activeName: any = ref()
@@ -237,7 +242,7 @@ const nodeClick = async (e: anyObj) => {
     let id = e.pid ? e.pid : e.id
     //查询测试项信息
     try {
-        await getTestRecordInfo(id).then(res => {
+        getTestRecordInfo(id).then(res => {
             deviceData.value = res.data
             loading.value = false
             if (res.data.records.length == 1) {
@@ -256,7 +261,7 @@ const nodeClick = async (e: anyObj) => {
     } catch (error) {
         loading.value = false
     }
-    init()
+    await init()
 }
 const dialogRef = ref()
 const handleOpen = (val: any, id: any) => {
@@ -273,20 +278,8 @@ const refreshTree = () => {
 const range = (start: any, end: any, step: any) => {
     return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
 }
-const init = async () => {
+const init = () => {
-    // 选择指标的时候切换legend内容和data数据
     let list: any = []
-    legendDictList.value?.selectedList?.map((item: any) => {
-        // searchForm.value.index.map((vv: any) => {
-        // if (item.dataType == vv) {
-        //     list.push(item.eleEpdPqdVOS)
-        // }
-        // })
-        if (item.dataType == searchForm.value.index) {
-            list.push(item.eleEpdPqdVOS)
-        }
-    })
-
     //颜色数组
     const colorList = [
         '#DAA521',
@@ -302,7 +295,14 @@ const init = async () => {
         '#1DD0CE',
         'cadetblue'
     ]
-    if (historyDevId.value) {
+    if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
+        // 选择指标的时候切换legend内容和data数据
+        legendDictList.value?.selectedList?.map((item: any) => {
+            if (item.dataType == searchForm.value.index) {
+                list.push(item.eleEpdPqdVOS)
+            }
+        })
+        console.log(legendDictList.value, '2362636236636366263636')
         //选择的指标使用方法处理
         initSearchFormIndexAndCount([searchForm.value.index])
         //查询历史趋势
@@ -322,8 +322,8 @@ const init = async () => {
         } else {
             middleTitle = ''
         }
-        let indexList=[]
+        let indexList = []
-        indexList=[searchForm.value.index]
+        indexList = [searchForm.value.index]
         chartTitle.value = deviceData.value.itemName + '_' + middleTitle + '_'
         indexList.map((item: any, indexs: any) => {
             indexOptions.value.map((vv: any) => {
@@ -346,8 +346,8 @@ const init = async () => {
             valueType: searchForm.value.type
         }
         try {
-            await getHistoryTrend(obj)
+            getHistoryTrend(obj)
-                .then(res => {
+                .then((res: any) => {
                     if (res.code == 'A0000') {
                         historyDataList.value = res.data
                         echartsData.value = null
@@ -358,15 +358,14 @@ 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 = [],
-                            timeList: any = []
+                            timeList: any = [],
-                        let unitList: any = []
+                            unitList: any = []
                         historyDataList.value.map((item: any) => {
                             timeList.push(item.time)
                             if (unitList.indexOf(item.unit) == -1) {
                                 unitList.push(item.unit)
                             }
                         })
-                        console.log(timeList, '+++++++++++')
                         xAxis = timeList.sort((a: any, b: any) => {
                             return (
                                 a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
@@ -437,7 +436,7 @@ const init = async () => {
                                     left: '3%',
                                     right: '3%',
                                     bottom: '10%',
-                                    top: '5%',
+                                    top: '8%',
                                     containLabel: true
                                 },
                                 xAxis: [
@@ -758,30 +757,34 @@ const initSearchFormIndexAndCount = (list: any) => {
                         if (kk.harmStart && kk.harmEnd) {
                             range(0, 0, 0)
                             countData.value[index].countOptions = range(kk.harmStart, kk.harmEnd, 1)
+                            countData.value[index].count = countData.value[index].countOptions[0]
                         }
                     })
                 }
             })
         })
+        console.log(countData.value, '66666666', legendDictList.value)
     }
 }
 watch(
-    () => [searchForm.value.index],
+    () => searchForm.value.index,
     (val: any, oldval: any) => {
         if (val) {
-            initSearchFormIndexAndCount(val)
+            let list = [val]
-            if (val == 0) {
+            // initSearchFormIndexAndCount(list)
-                countData.value = []
+            // if (val == 0) {
-            }
+            //     countData.value = []
+            // }
             countData.value.map((item: any, key: any) => {
                 if (
-                    val.findIndex((vv: any) => {
+                    list.findIndex((vv: any) => {
                         return vv == item.index
                     }) == -1
                 ) {
                     countData.value.splice(key, 1)
                 }
             })
+            init()
         }
     },
     {
@@ -790,6 +793,13 @@ watch(
     }
 )
 onMounted(() => {
+    loading.value = true
+    setTimeout(() => {
+        init()
+        loading.value = false
+    }, 1500)
+
+    // initSearchFormIndexAndCount([searchForm.value.index])
 })
 </script>
 
@@ -829,15 +839,14 @@ onMounted(() => {
         }
     }
 }
-
 .history_title {
     width: 100%;
-
     p {
         height: 32px;
         line-height: 32px;
-        font-size: 16px;
+        font-size: 14px;
         font-weight: bold;
+        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
     }
 }
 
@@ -846,7 +855,7 @@ onMounted(() => {
 
     .el-tabs__content {
         padding: 0 !important;
-        max-height: 160px !important;
+        max-height: 130px !important;
     }
 }
 .history_header {
@@ -856,12 +865,15 @@ onMounted(() => {
         width: 95%;
         display: flex;
         justify-content: flex-start;
-        overflow: auto;
+        // overflow-x: auto;
-        height: 45px;
+        // height: 45px;
+        // padding-top: 18px;
         // flex-wrap: wrap;
         .el-form-item {
             flex: none;
             max-width: 380px !important;
+            display: flex;
+            align-items: center;
         }
         .el-select {
             margin-right: 10px;
@@ -884,6 +896,6 @@ onMounted(() => {
 }
 
 ::v-deep .el-select {
-    width: 200px !important;
+    width: 120px !important;
 }
 </style>