From a565fec416d7aaafd00ccb1817cc101a53f68bd9 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Thu, 20 Jun 2024 13:26:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E5=8F=8A?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=B6=8B=E5=8A=BF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../terminal/planData/components/device.vue   |  80 ++-
 .../terminal/planData/components/popup.vue    | 116 ++--
 src/views/govern/terminal/planData/index.vue  | 574 ++++++++++--------
 3 files changed, 403 insertions(+), 367 deletions(-)

diff --git a/src/views/govern/terminal/planData/components/device.vue b/src/views/govern/terminal/planData/components/device.vue
index 0e86e7f..56c5944 100644
--- a/src/views/govern/terminal/planData/components/device.vue
+++ b/src/views/govern/terminal/planData/components/device.vue
@@ -2,15 +2,17 @@
     <el-dialog
         class="cn-operate-dialog device-manage-popup"
         v-model="dialogVisible"
-        title="设备信息"
+        :title="!addFlag ? '设备信息' : '添加设备'"
         draggable
-        width="85%"
+        :append-to-body="true"
+        width="60%"
     >
         <el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button>
         <el-popconfirm
             confirm-button-text="是"
             cancel-button-text="否"
             icon-color="#626AEF"
+            width="200"
             title="是否确认删除所选数据？"
             @confirm="handleDelete('')"
             @cancel="cancelDelete"
@@ -20,7 +22,7 @@
             </template>
         </el-popconfirm>
 
-        <div class="default-main device-manage" v-show="addFlag" v-loading="loading">
+        <div class="device-manage" v-show="addFlag" v-loading="loading">
             <deviceInfoTree
                 :showCheckbox="true"
                 :default-checked-keys="defaultCheckedKeys"
@@ -32,19 +34,14 @@
                 <Table ref="tableRef" />
             </div>
         </div>
-        <div
-            class="default-main device-manage"
-            v-show="!addFlag"
-            :style="{ height: pageHeight.height }"
-            v-loading="loading"
-        >
-            <div class="device-manage-right" :style="{ height: pageHeight.height }">
+        <div class="device-manage" v-show="!addFlag" v-loading="loading">
+            <div class="device-manage-right">
                 <!-- <datePicker ref="datePickerRef"></datePicker>
                 <el-button type="primary" @click="handleSearch">查询</el-button> -->
                 <vxe-table
                     v-bind="defaultAttribute"
                     :data="tableData"
-                    height="auto"
+                    height="420"
                     style="width: 100%; margin-top: 10px"
                     ref="checkedTableRef"
                     @checkbox-all="selectChangeEvent"
@@ -60,15 +57,16 @@
                     <vxe-column title="操作" width="120" fixed="right">
                         <template #default="{ row }">
                             <el-popconfirm
+                                width="150"
                                 confirm-button-text="是"
                                 cancel-button-text="否"
                                 icon-color="#626AEF"
-                                title="是否确认删除当前数据？"
+                                title="是否确认删除？"
                                 @confirm="handleDelete(row)"
                                 @cancel="cancelDelete"
                             >
                                 <template #reference>
-                                    <el-button type="danger" size="small">删除</el-button>
+                                    <el-button type="danger" text size="small">删除</el-button>
                                 </template>
                             </el-popconfirm>
                         </template>
@@ -127,6 +125,7 @@ const addFlag = ref(false)
 const selectId: any = ref('')
 //查绑定测试项列表
 const getSelectedTable = (id: any) => {
+    //新增传0已绑定传1
     getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => {
         tableData.value = res.data.records
     })
@@ -134,10 +133,10 @@ const getSelectedTable = (id: any) => {
 //新增设备列表
 const tableStore = new TableStore({
     url: '/cs-device-boot/wlRecord/queryPage',
-    // publicHeight: 65,
+    publicHeight: 310,
     method: 'POST',
     column: [
-        { width: '60', type: 'checkbox' },
+        { width: '60', type: 'checkbox', fixed: 'left' },
         { title: '序号', type: 'seq', width: 80 },
         { field: 'devName', title: '设备名称', minWidth: 170 },
         { field: 'devMac', title: '设备MAC', minWidth: 170 },
@@ -149,6 +148,7 @@ const tableStore = new TableStore({
 
     beforeSearchFun: () => {
         tableStore.table.params.id = selectId.value
+        //新增传0已绑定传1
         tableStore.table.params.isTrueFlag = 0
         tableStore.table.params.treeIds = treeIds.value
     }
@@ -168,31 +168,45 @@ const open = (id: any) => {
     //查新增列表
     tableStore.index()
 }
-const close = () => {
-    addFlag.value = false
-    dialogVisible.value = false
-}
 const tableRef = ref()
 //添加设备
 const submit = () => {
     //选择的数据
     let deviceIds = []
     //新增的时候执行的逻辑
-    if (addFlag.value == true) {
-        tableStore.table.selection.map(item => {
-            deviceIds.push(item.id)
-        })
-        const addForm = {
-            id: selectId.value,
-            list: deviceIds
-        }
-        addDevice(addForm).then(res => {
-            if (res.code == 'A0000') {
-                ElMessage.success('添加成功')
-                getSelectedTable(selectId.value)
-                addFlag.value = false
+    if (addFlag.value) {
+        if (tableStore.table.selection.length != 0) {
+            tableStore.table.selection.map(item => {
+                deviceIds.push(item.id)
+            })
+            const addForm = {
+                id: selectId.value,
+                list: deviceIds
             }
-        })
+            addDevice(addForm).then(res => {
+                if (res.code == 'A0000') {
+                    ElMessage.success('添加成功')
+                    getSelectedTable(selectId.value)
+                    //清除树节点选择状态
+                    defaultCheckedKeys.value = []
+                    //刷新新增列表状态
+                    tableStore.index()
+                    addFlag.value = false
+                }
+            })
+        } else {
+            ElMessage.warning('请选择设备信息')
+        }
+    }
+}
+
+const close = () => {
+    if (addFlag.value) {
+        addFlag.value = false
+        checkedList.value = []
+        checkedTableRef.value.clearCheckboxRow()
+    } else {
+        dialogVisible.value = false
     }
 }
 //删除设备
diff --git a/src/views/govern/terminal/planData/components/popup.vue b/src/views/govern/terminal/planData/components/popup.vue
index 37fb7b0..0f3a33d 100644
--- a/src/views/govern/terminal/planData/components/popup.vue
+++ b/src/views/govern/terminal/planData/components/popup.vue
@@ -171,7 +171,7 @@
         </el-form>
         <!-- 设备信息列表 -->
         <div v-show="activeFormIndex == 6" style="height: 400px">
-            <deviceInfo ref="deviceRef" />
+            <!-- <deviceInfo ref="deviceRef" /> -->
         </div>
         <template #footer="">
             <el-button @click="close">取 消</el-button>
@@ -191,39 +191,43 @@ const voltageLevelList = dictData.getBasicData('Dev_Voltage')
 const volConTypeList = dictData.getBasicData('Dev_Connect')
 const emit = defineEmits(['onSubmit'])
 const form = ref({})
-form.value = {
-    index: '',
-    type: '',
-    itemName: '', //方案名称
-    describe: '', //方案描述
-    //测试项数据
-    records: [
-        {
-            itemName: '', //测试项名称
-            statisticalInterval: '', //测量间隔
-            voltageLevel: voltageLevelList[0].id, //电压等级
-            volConType: volConTypeList[0].id, //接线方式
-            capacitySscmin: null, //最小短路容量
-            capacitySi: null, //用户协议容量
-            capacitySscb: null, //基准短路容量
-            capacitySt: null, //供电设备容量
-            // pt1: 1, //pt变比1
-            // pt2: 1, //pt变比2
-            // ct1: 300, //ct变比1
-            // ct2: 5, //ct变比2
-            ct: 1,
-            pt: 1,
-            location: '' //监测位置
-        }
-    ]
+const initForm = () => {
+    form.value = {
+        itemName: '', //方案名称
+        describe: '', //方案描述
+        //测试项数据
+        records: [
+            {
+                itemName: '', //测试项名称
+                statisticalInterval: '', //测量间隔
+                voltageLevel: voltageLevelList[0].id, //电压等级
+                volConType: volConTypeList[0].id, //接线方式
+                capacitySscmin: null, //最小短路容量
+                capacitySi: null, //用户协议容量
+                capacitySscb: null, //基准短路容量
+                capacitySt: null, //供电设备容量
+                // pt1: 1, //pt变比1
+                // pt2: 1, //pt变比2
+                // ct1: 300, //ct变比1
+                // ct2: 5, //ct变比2
+                ct: 1,
+                pt: 1,
+                location: '' //监测位置
+            }
+        ]
+    }
 }
-
+initForm()
 const title: any = ref('')
 const activeFormIndex: any = ref(null)
 const planId: any = ref('')
 const deviceRef: any = ref(null)
 const details = (val: any) => {
-    form.value = val
+    if (activeFormIndex.value == 1 || activeFormIndex.value == 3) {
+        form.value = val
+    } else {
+        initForm()
+    }
 }
 // 0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 删除方案 5 删除测试项 6 设备信息
 const open = (val: any, id: any) => {
@@ -275,8 +279,7 @@ const open = (val: any, id: any) => {
     }
     if (val == 6) {
         //1 列表  0树
-        getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {
-        })
+        getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {})
     }
 }
 //添加测试项
@@ -309,32 +312,7 @@ const handleDelMointor = index => {
 //关闭
 const close = () => {
     dialogVisible.value = false
-    form.value = {
-        index: '',
-        type: '',
-        itemName: '', //方案名称
-        describe: '', //方案描述
-        //测试项数据
-        records: [
-            {
-                itemName: '', //测试项名称
-                statisticalInterval: '', //测量间隔
-                voltageLevel: voltageLevelList[0].id, //电压等级
-                volConType: volConTypeList[0].id, //接线方式
-                capacitySscmin: '', //最小短路容量
-                capacitySi: '', //用户协议容量
-                capacitySscb: '', //基准短路容量
-                capacitySt: '', //供电设备容量
-                pt: 1, //pt变比1
-                ct: 1, //pt变比2
-                // pt1: 1, //pt变比1
-                // pt2: 1, //pt变比2
-                // ct1: 300, //ct变比1
-                // ct2: 5, //ct变比2
-                location: '' //监测位置
-            }
-        ]
-    }
+    initForm()
 }
 //提交
 const submit = () => {
@@ -345,11 +323,9 @@ const submit = () => {
             describe: form.value.describe
         }
         addPlan(subForm).then(res => {
-            if (res.code == 'A0000') {
                 ElMessage.success('新增方案成功')
                 emit('onSubmit')
                 close()
-            }
         })
     }
     //修改方案
@@ -360,11 +336,9 @@ const submit = () => {
             describe: form.value.describe
         }
         addPlan(subForm).then(res => {
-            if (res.code == 'A0000') {
-                ElMessage.success('修改方案成功')
-                emit('onSubmit')
-                close()
-            }
+            ElMessage.success('修改方案成功')
+            emit('onSubmit')
+            close()
         })
     }
     //新增测试项
@@ -372,11 +346,9 @@ const submit = () => {
         const subForm = form.value
         subForm.id = planId.value
         addRecord(subForm).then(res => {
-            if (res.code == 'A0000') {
-                ElMessage.success('新增测试项成功')
-                emit('onSubmit')
-                close()
-            }
+            ElMessage.success('新增测试项成功')
+            emit('onSubmit')
+            close()
         })
     }
     //修改测试项
@@ -384,11 +356,9 @@ const submit = () => {
         const subForm = form.value.records[0]
         subForm.id = planId.value
         updateRecord(subForm).then(res => {
-            if (res.code == 'A0000') {
-                ElMessage.success('修改测试项成功')
-                emit('onSubmit')
-                close()
-            }
+            ElMessage.success('修改测试项成功')
+            emit('onSubmit')
+            close()
         })
     }
 }
diff --git a/src/views/govern/terminal/planData/index.vue b/src/views/govern/terminal/planData/index.vue
index 1f23249..e112e47 100644
--- a/src/views/govern/terminal/planData/index.vue
+++ b/src/views/govern/terminal/planData/index.vue
@@ -82,9 +82,9 @@
                 <p>历史趋势</p>
             </div>
             <div class="history_header">
-                <el-form :model="form" class="history_select">
+                <el-form :model="searchForm" class="history_select">
                     <el-form-item label="统计指标">
-                        <el-select @change="init" v-model="form.index" placeholder="请选择统计指标">
+                        <el-select @change="init" v-model="searchForm.index" placeholder="请选择统计指标">
                             <el-option
                                 v-for="item in indexOptions"
                                 :key="item.id"
@@ -94,7 +94,7 @@
                         </el-select>
                     </el-form-item>
                     <el-form-item label="值类型">
-                        <el-select v-model="form.type" placeholder="请选择值类型">
+                        <el-select @change="init" v-model="searchForm.type" placeholder="请选择值类型">
                             <el-option
                                 v-for="item in typeOptions"
                                 :key="item.id"
@@ -105,7 +105,7 @@
                     </el-form-item>
                 </el-form>
                 <div class="history_searchBtn">
-                    <el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button>
+                    <!-- <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> -->
@@ -149,17 +149,13 @@ import MangePopup from './components/popup.vue'
 import schemeTree from './components/schemeTree.vue'
 import { mainHeight } from '@/utils/layout'
 import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
-import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
-// import { getTargetById } from '@/api/cs-device-boot/csDatalistay'
-import { getGroup } from '@/api/cs-device-boot/csGroup'
 import { ref, reactive, onMounted, provide, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
-import { defaultAttribute } from '@/components/table/defaultAttribute'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
 import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
 import { useDictData } from '@/stores/dictData'
 import device from './components/device.vue'
+import { queryStatistical } from '@/api/system-boot/csstatisticalset'
 const dictData = useDictData()
 defineOptions({
     name: 'govern/device/manage'
@@ -173,7 +169,7 @@ const volConTypeList = dictData.getBasicData('Dev_Connect')
 
 const pageHeight = mainHeight(20)
 const loading = ref(true)
-const form = ref({})
+const searchForm = ref({})
 // const indexOptions = [
 //     {
 //         id: '1',
@@ -194,41 +190,50 @@ const form = ref({})
 // ]
 const typeOptions = [
     {
-        id: '1',
-        name: '最大值'
+        name: '平均值',
+        id: 'avg'
     },
     {
-        id: '2',
-        name: '最小值'
+        name: '最大值',
+        id: 'max'
     },
     {
-        id: '3',
-        name: '平均值'
+        name: '最小值',
+        id: 'min'
     },
     {
-        id: '4',
-        name: 'CP95'
+        name: 'CP95值',
+        id: 'cp95'
     }
 ]
-form.value = {
+searchForm.value = {
     index: '',
     type: typeOptions[0].id
 }
 //统计指标
 const indexOptions: any = ref([])
+// Harmonic_Type
+// portable-harmonic
+const legendDictList: any = ref([])
 queryByCode('portable-harmonic').then(res => {
-    queryByid(res.data.id).then(item => {
+    queryCsDictTree(res.data.id).then(item => {
         indexOptions.value = item.data
-        form.value.index=indexOptions.value[0].id
+        console.log(indexOptions.value, '88888888888')
+        searchForm.value.index = indexOptions.value[0].id
+    })
+    queryStatistical(res.data.id).then(vv => {
+        console.log(vv, res.data.id)
+        legendDictList.value = vv.data
     })
 })
 const activeName: any = ref()
 const deviceData: any = ref([])
-const schemeTreeRef = ref(null)
-const chartsDataList: any = ref([])
+const schemeTreeRef = ref()
+const nodeId: any = ref('')
 const nodeClick = async (e: anyObj) => {
     loading.value = true
     deviceData.value = []
+    nodeId.value = e.id
     //查询测试项信息
     try {
         await getTestRecordInfo(e.id).then(res => {
@@ -240,21 +245,7 @@ const nodeClick = async (e: anyObj) => {
     } catch (error) {
         loading.value = false
     }
-    try {
-        //查询历史趋势
-        const historyData = {
-            devId: e.id,
-            statisticalId: '11aaa206ba82c5b68b7339fe60e22945',
-            valueType: 'avg'
-        }
-        chartsDataList.value = []
-        await getHistoryTrend(historyData).then(res => {
-            chartsDataList.value = res.data
-            init()
-        })
-    } catch (error) {
-        loading.value = false
-    }
+    init()
 }
 const deviceRef = ref()
 const openDevice = () => {
@@ -267,246 +258,307 @@ const handleOpen = (val: any) => {
 
 const echartsData = ref<any>(null)
 //加载echarts图表
+//历史趋势数据
+const historyDataList: any = ref([])
 const init = () => {
-    echartsData.value = null
-    //icon图标替换legend图例
-    const iconThree =
-        'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
-    const iconDanger =
-        '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'
+    try {
+        //查询历史趋势
+        historyDataList.value = []
+        loading.value = true
 
-    let xAxis: any[] = []
-    chartsDataList.value.map(item => {
-        xAxis.push(item.time)
-    })
-    echartsData.value = {
-        options: {
-            title: [
-                {
-                    left: 'center',
-                    text:
-                        '10KV 母线_监测点 ' +
-                        indexOptions.value.find(item => {
-                            return item.id == form.value.index
-                        })?.name
-                }
-            ],
-            toolbox: {
-                feature: {
-                    saveAsImage: {
-                        title: '保存'
-                    }
-                }
-            },
-            // backgroundColor: '#1B232E',
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
-                // textStyle: {
-                //     color: 'rgba(255, 255, 255, 1)'
-                // },
-                // backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                // borderColor: 'rgba(219, 230, 255, 0.8)'
-            },
-            legend: {
-                //legend使用iconfont图标
-                data: [
-                    {
-                        name: 'A相',
-                        icon: iconThree
-                    },
-                    {
-                        name: 'B相',
-                        icon: iconThree
-                    },
-                    {
-                        name: 'C相',
-                        icon: iconThree
-                    },
-                    {
-                        name: '暂降',
-                        icon: iconDanger
-                    }
-                ],
-                x: 'right',
-                textStyle: {
-                    // color: 'white',
-                    fontSize: 14
-                },
-                top: 0,
-                left: 50,
-                itemWidth: 20,
-                itemHeight: 10,
-                itemGap: 15
-            },
-            grid: {
-                left: '1%',
-                right: '5%',
-                bottom: '5%',
-                top: '5%',
-                containLabel: true
-            },
-            xAxis: [
-                {
-                    type: 'category',
-                    name: '时间',
-                    axisLabel: {
-                        color: '#A9AEB2',
-                        fontSize: 12
-                    },
-                    data: xAxis,
-                    axisLine: {
-                        lineStyle: {
-                            color: '#43485E'
+        getHistoryTrend({
+            devId: nodeId.value,
+            statisticalId: searchForm.value.index,
+            valueType: searchForm.value.type
+        })
+            .then(res => {
+                if (res.code == 'A0000') {
+                    historyDataList.value = res.data
+                    echartsData.value = null
+                    //icon图标替换legend图例
+                    const iconThree =
+                        'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
+                    const iconDanger =
+                        '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 => {
+                        xAxis.push(item.time)
+                    })
+                    echartsData.value = {
+                        options: {
+                            title: [
+                                {
+                                    left: 'center',
+                                    text:
+                                        '10KV 母线_监测点 ' +
+                                        indexOptions.value.find(item => {
+                                            return item.id == searchForm.value.index
+                                        })?.name
+                                }
+                            ],
+                            toolbox: {
+                                feature: {
+                                    saveAsImage: {
+                                        title: '保存'
+                                    }
+                                }
+                            },
+                            tooltip: {
+                                trigger: 'axis',
+                                axisPointer: {
+                                    type: 'shadow'
+                                }
+                                // textStyle: {
+                                //     color: 'rgba(255, 255, 255, 1)'
+                                // },
+                                // backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                                // borderColor: 'rgba(219, 230, 255, 0.8)'
+                            },
+                            legend: {
+                                //legend使用iconfont图标
+                                // 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,
+                                itemHeight: 10,
+                                itemGap: 15
+                            },
+                            grid: {
+                                left: '1%',
+                                right: '5%',
+                                bottom: '5%',
+                                top: '10%',
+                                containLabel: true
+                            },
+                            xAxis: [
+                                {
+                                    type: 'category',
+                                    name: '时间',
+                                    axisLabel: {
+                                        color: '#A9AEB2',
+                                        fontSize: 12
+                                    },
+                                    data: xAxis,
+                                    axisLine: {
+                                        lineStyle: {
+                                            color: '#43485E'
+                                        }
+                                    }
+                                }
+                            ],
+                            yAxis: [
+                                {
+                                    type: 'value',
+                                    name: 'KV',
+                                    axisLabel: {
+                                        color: '#A9AEB2',
+                                        fontSize: 12
+                                    },
+                                    axisTick: {
+                                        show: true
+                                    },
+                                    axisLine: {
+                                        show: true,
+                                        lineStyle: {
+                                            // color: 'white'
+                                        }
+                                    },
+                                    nameTextStyle: {
+                                        color: '#A9AEB2',
+                                        fontSize: '12'
+                                    },
+                                    splitLine: {
+                                        show: false,
+                                        lineStyle: {
+                                            color: ['#43485E'],
+                                            width: 1,
+                                            type: 'solid'
+                                        }
+                                    }
+                                }
+                            ]
+                            // 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: []
+                            //     }
+                            // ]
                         }
                     }
-                }
-            ],
-            yAxis: [
-                {
-                    type: 'value',
-                    name: 'KV',
-                    axisLabel: {
-                        color: '#A9AEB2',
-                        fontSize: 12
-                    },
-                    axisTick: {
-                        show: true
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            // color: 'white'
+                    //选择指标的时候切换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)
                         }
-                    },
-                    nameTextStyle: {
-                        color: '#A9AEB2',
-                        fontSize: '12'
-                    },
-                    splitLine: {
-                        show: false,
-                        lineStyle: {
-                            color: ['#43485E'],
-                            width: 1,
-                            type: 'solid'
-                        }
-                    }
-                }
-            ],
-            series: [
-                {
-                    name: 'A相',
-                    type: 'line',
-                    smooth: true,
-                    emphasis: {
-                        focus: 'series'
-                    },
-                    itemStyle: {
-                        normal: {
-                            color: '#DAA521',
-                            lineStyle: {
-                                color: '#DAA521'
-                            }
-                        }
-                    },
-                    data: chartsDataList.value
-                        .map(item => {
-                            if (item.statisticalName === 'Apf_ThdA_Load') {
-                                return item.statisticalData
-                            } else {
-                                return ''
-                            }
+                    })
+                    list.map((item, index) => {
+                        echartsData.value.options.legend.data.push({
+                            name: item.showName,
+                            icon: iconThree
                         })
-                        .filter(item => item !== '')
-                },
-                {
-                    name: 'B相',
-                    type: 'line',
-                    smooth: true,
-                    emphasis: {
-                        focus: 'series'
-                    },
-                    itemStyle: {
-                        normal: {
-                            color: '#2E8B58',
-                            lineStyle: {
-                                color: '#2E8B58'
-                            }
-                        }
-                    },
-                    data: chartsDataList.value
-                        .map(item => {
-                            if (item.statisticalName === 'Apf_ThdA_Sys') {
-                                return item.statisticalData
-                            } else {
-                                return ''
-                            }
+                        echartsData.value.options.series.push({
+                            name: item.showName,
+                            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 !== '')
                         })
-                        .filter(item => item !== '')
-                },
-                {
-                    name: 'C相',
-                    type: 'line',
-                    smooth: true,
-                    emphasis: {
-                        focus: 'series'
-                    },
-                    itemStyle: {
-                        normal: {
-                            color: '#A5292A',
-                            lineStyle: {
-                                color: '#A5292A'
-                            }
-                        }
-                    },
-                    data: chartsDataList.value
-                        .map(item => {
-                            if (item.statisticalName === 'Apf_RmsI_TolOut') {
-                                return item.statisticalData
-                            } else {
-                                return ''
-                            }
-                        })
-                        .filter(item => item !== '')
-                },
-                {
-                    name: '暂降',
-                    type: 'line',
-                    smooth: true,
-                    emphasis: {
-                        focus: 'series'
-                    },
-                    itemStyle: {
-                        normal: {
-                            color: '#d81e06',
-                            lineStyle: {
-                                color: '#d81e06'
-                            }
-                        }
-                    },
-                    data: []
+                    })
+
+                    console.log('找到了=========》', list)
+                    loading.value = false
                 }
-            ]
-        }
-    }
-    setTimeout(() => {
+            })
+            .catch(error => {
+                loading.value = false
+            })
+    } catch (error) {
         loading.value = false
-    }, 1500)
+    }
 }
 //搜素
 const handleSearch = () => {
-    console.log(form.value, '搜索')
+    console.log(searchForm.value, '搜索')
+    init()
 }
 //导出
 const handleExport = () => {
-    console.log(form.value, '导出')
+    console.log(searchForm.value, '导出')
 }
 
-onMounted(() => {
-    init()
-})
+onMounted(() => {})
 </script>
 
 <style lang="scss" scoped>