设备监控二级页面

src/api/cs-device-boot/EquipmentDelivery.ts

@@ -38,8 +38,11 @@ export function getRealTimeTableList() {
 //离线数据导入
 export function uploadOffLineDataFile(data: any) {
     return createAxios({
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
         url: '/cs-device-boot/portableOfflLog/importEquipment',
         method: 'POST',
-        data
+        data,
     })
 }

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

@@ -0,0 +1,87 @@
+<!-- 解析列表 -->
+<template>
+    <el-dialog v-model="dialogVisible" title="解析列表" width="70%" draggable @closed="close">
+        <!-- <div class="header_btn">
+            <el-button type="primary" size="small" @click="handleBack" :icon="ArrowLeft">返回</el-button>
+        </div> -->
+        <Table ref="tableRef" />
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="close">取消</el-button>
+                <!-- <el-button type="primary" @click="close">提交</el-button> -->
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import { ArrowLeft } from '@element-plus/icons-vue'
+const emit = defineEmits(['back'])
+const dialogVisible = ref(false)
+const tableStore: any = new TableStore({
+    url: '/cs-device-boot/EquipmentDelivery/list',
+    publicHeight: 210,
+    method: 'POST',
+    column: [
+        // { width: '60', type: 'checkbox', fixed: 'left' },
+        { title: '序号', type: 'seq', width: 80 },
+        { field: 'name', title: '文件名称', minWidth: 170 },
+        { field: 'createTime', title: '导入时间', minWidth: 170 },
+        { field: 'devModel', title: '数据总数(条)', minWidth: 170 },
+        { field: 'devAccessMethod', title: '已入库总数(条)', minWidth: 170 },
+        {
+            title: '解析状态',
+            field: 'status',
+            width: 100,
+            render: 'tag',
+            custom: {
+                1: 'warning',
+                2: 'success',
+                3: 'primary',
+                4: 'primary',
+                5: 'warning',
+                null:''
+            },
+            replaceValue: {
+                1: '失败',
+                2: '成功',
+                3: '失败',
+                4: '失败',
+                5: '失败',
+                null:'/'
+            }
+            // formatter: row => {
+            //     return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
+            // },
+        },
+    ],
+
+    beforeSearchFun: () => {
+        // tableStore.table.params.devId = tableParams.value.devId
+        // tableStore.table.params.lineId = tableParams.value.lineId
+        // tableStore.table.params.list = tableParams.value.list
+        // tableStore.table.params.type = 3
+    },
+    loadCallback: () => {}
+})
+provide('tableStore', tableStore)
+//返回
+const handleBack = () => {
+    emit('back')
+}
+const open=()=>{
+    dialogVisible.value=true
+    tableStore.index()
+}
+const close=()=>{
+    dialogVisible.value=false
+}
+const initTable = () => {
+}
+onMounted(() => {
+})
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

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

@@ -13,7 +13,7 @@
                         v-if="dataSet.indexOf('_realtimedata') != -1"
                         size="small"
                         type="primary"
-                        @click="handleDownLoad"
+                        @click="handleDownLoadTemplate"
                     >
                         模版下载
                     </el-button>
@@ -37,7 +37,7 @@
                         v-if="dataSet.indexOf('_realtimedata') != -1"
                         size="small"
                         type="primary"
-                        @click="handleImport"
+                        @click="handleAnalysisList"
                     >
                         解析列表
                     </el-button>
@@ -62,7 +62,7 @@
                     {{ deviceData.time ? deviceData.time : '/' }}
                 </el-descriptions-item>
             </el-descriptions>
-            {{ dataSet }}
+            <!-- {{ dataSet }} -->
             <el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
                 <el-tab-pane
                     lazy
@@ -88,7 +88,7 @@
                             placeholder="请输入关键词"
                         ></el-input>
                     </el-form-item>
-                    <el-form-item label="日期" v-if="dataSet.indexOf('_history') != -1">
+                    <el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
                         <DatePicker ref="datePickerRef"></DatePicker>
                     </el-form-item>
                     <el-form-item>
@@ -102,7 +102,8 @@
                     v-if="
                         dataSet.indexOf('_trenddata') == -1 &&
                         dataSet.indexOf('_realtimedata') == -1 &&
-                        dataSet.indexOf('_event') == -1
+                        dataSet.indexOf('_event') == -1 &&
+                        tableData.length != 0
                     "
                 >
                     <!-- 循环渲染的card 最新数据/历史数据显示 -->
@@ -140,7 +141,9 @@
                                         MAX
                                     </el-tag>
                                     {{
-                                        item.children[0].maxValue === 3.1415956 ? '暂无数据' : item.children[0].maxValue
+                                        item.children[0].maxValue === 3.1415956 || !item.children[0].maxValue
+                                            ? '暂无数据'
+                                            : item.children[0].maxValue
                                     }}
                                 </div>
                                 <div style="display: flex; align-items: center" class="mt10">
@@ -153,7 +156,9 @@
                                         AVG
                                     </el-tag>
                                     {{
-                                        item.children[0].avgValue === 3.1415956 ? '暂无数据' : item.children[0].avgValue
+                                        item.children[0].avgValue === 3.1415956 || !item.children[0].avgValue
+                                            ? '暂无数据'
+                                            : item.children[0].avgValue
                                     }}
                                 </div>
                                 <div style="display: flex; align-items: center" class="mt10">
@@ -166,7 +171,9 @@
                                         MIN
                                     </el-tag>
                                     {{
-                                        item.children[0].minValue === 3.1415956 ? '暂无数据' : item.children[0].minValue
+                                        item.children[0].minValue === 3.1415956 || !item.children[0].minValue
+                                            ? '暂无数据'
+                                            : item.children[0].minValue
                                     }}
                                 </div>
                             </div>
@@ -194,9 +201,8 @@
                 ></el-pagination>
 
                 <!-- 趋势数据 -->
-                <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_trenddata') != -1">
+                <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_trenddata') != -1">
-                    趋势数据
+                    <Trend ref="trendRef"></Trend>
-                    <Trend></Trend>
                 </div>
                 <!-- 实时数据 -->
                 <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
@@ -221,12 +227,11 @@
                     <!-- 实时数据-实时趋势组件 -->
                     <realTrend v-if="!realTimeFlag && sonTab == 1"></realTrend>
                     <!-- 实时数据-谐波频谱组件 -->
-                    <harmonicSpectrum v-if="!realTimeFlag && sonTab == 2"></harmonicSpectrum>
+                    <harmonicSpectrum v-if="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef"></harmonicSpectrum>
                 </div>
                 <!-- 暂态事件 -->
-                <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_event') != -1">
+                <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1">
-                    暂态事件
+                    <Event ref="eventRef"></Event>
-                    <Event></Event>
                 </div>
                 <div v-if="!tableData" style="height: 42px"></div>
             </el-tabs>
@@ -235,6 +240,8 @@
         <Detail ref="detailRef" :detail="detail" @close="detail = null" v-if="detail"></Detail>
         <!-- 离线数据导入组件 -->
         <offLineDataImport ref="offLineDataImportRef"></offLineDataImport>
+        <!-- 解析列表 -->
+        <analysisList ref="analysisListRef"></analysisList>
     </div>
 </template>
 
@@ -259,6 +266,7 @@ import { useRouter } from 'vue-router'
 import { defineConfig, loadEnv } from 'vite'
 import type { UserConfig, ConfigEnv } from 'vite'
 import { Platform, TrendCharts, DataLine, ArrowLeft } from '@element-plus/icons-vue'
+import analysisList from './analysisList/index.vue'
 defineOptions({
     name: 'govern/device/control'
 })
@@ -337,9 +345,11 @@ const handleTrend = () => {
     sonTab.value = 1
 }
 //谐波频谱
+const harmonicSpectrumRef = ref()
 const handleHarmonicSpectrum = () => {
     realTimeFlag.value = false
     sonTab.value = 2
+    harmonicSpectrumRef.value && harmonicSpectrumRef.value.init()
 }
 //返回
 const handleReturn = () => {
@@ -419,11 +429,15 @@ const nodeClick = async (e: anyObj) => {
     }
 }
 const realTimeRef: any = ref()
-const intRealTime = (val: any) => {
+const intRealTime = async (val: any) => {
-    getTabsDataByType(val).then(res => {
+    await getTabsDataByType(val).then(res => {
         realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
     })
 }
+//趋势数据组件
+const trendRef: any = ref()
+//暂态事件组件
+const eventRef: any = ref()
 //tab点击事件
 const handleClick = async (tab?: any) => {
     tableLoading.value = true
@@ -437,20 +451,20 @@ const handleClick = async (tab?: any) => {
     }
     // setTimeout(async () => {
     //查询历史指标
-    if (dataSet.value.indexOf('_history') != -1) {
+    if (dataSet.value.includes('_history')) {
-        formInline.startTime = datePickerRef.value.timeValue[0]
+        console.log('执行次数55555')
-        formInline.endTime = datePickerRef.value.timeValue[1]
+        formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
+        formInline.endTime = datePickerRef.value && datePickerRef.value.timeValue[1]
         formInline.id = dataSet.value.replace('_history', '')
         await deviceHisData(formInline).then((res: any) => {
             tableData.value = res.data.records
             formInline.total = res.data.total
             tableLoading.value = false
         })
+        console.log(tableData.value, '++++++++++++')
     }
     //查询趋势数据
-    if (dataSet.value.indexOf('_trenddata') != -1) {
+    if (dataSet.value.includes('_trenddata')) {
-        console.log(deviceData.value.dataSetList, '8888888888838838838')
-        console.log('_trenddata')
         let obj = {
             devId: deviceId.value, //e.id
             lineId: lineId.value, //e.pid
@@ -462,12 +476,14 @@ const handleClick = async (tab?: any) => {
                 }
             ]
         }
-        await getTabsDataByType(obj).then(res => {
+        // await getTabsDataByType(obj).then(res => {
-            console.log(res, '0000000')
+        //     console.log(res, '趋势数据结果')
-        })
+        // })
+        console.log(trendRef.value, '++++++++++++++++++')
+        trendRef.value && trendRef.value.getTrendRequest(obj)
     }
     //查询实时数据
-    if (dataSet.value.indexOf('_realtimedata') != -1) {
+    if (dataSet.value.includes('_realtimedata')) {
         //查询实时数据显示实时录波、实时趋势、谐波频谱
         realTimeFlag.value = true
         let obj = {
@@ -481,7 +497,7 @@ const handleClick = async (tab?: any) => {
         }, 20000)
     }
     //查询暂态事件
-    if (dataSet.value.indexOf('_event') != -1) {
+    if (dataSet.value.includes('_event')) {
         console.log('_event')
         let obj = {
             devId: deviceId.value, //e.id
@@ -494,13 +510,15 @@ const handleClick = async (tab?: any) => {
                 }
             ]
         }
-        await getTabsDataByType(obj).then(res => {
+        //暂态事件表格请求参数
-            console.log(res, '0000000')
+        eventRef.value && eventRef.value.getTableParams(obj)
-        })
+        // await getTabsDataByType(obj).then(res => {
+        //     console.log(res, '0000000')
+        // })
     }
     //查询当前指标
     console.log(dataSet.value.indexOf('_'), '查询当前指标')
-    if (dataSet.value.indexOf('_') == -1) {
+    if (!dataSet.value.includes('_')) {
         formInline.id = dataSet.value
         await deviceRtData(formInline).then((res: any) => {
             tableData.value = res.data.records
@@ -510,12 +528,25 @@ const handleClick = async (tab?: any) => {
     }
     // }, 100)
 }
-
+//模版下载
+const handleDownLoadTemplate = () => {}
+//解析列表
+// const isAnalysisList = ref(false)
+const analysisListRef = ref()
+//打开解析列表
+const handleAnalysisList = () => {
+    // isAnalysisList.value = true
+    analysisListRef.value && analysisListRef.value.open()
+}
+//返回
+// const handleBackAnalysisList=()=>{
+//     isAnalysisList.value = false
+// }
 //离线数据导入
 const offLineDataImportRef = ref()
 const handleImport = () => {
     //设备devId&监测点lineId带入组件
-    offLineDataImportRef.value && offLineDataImportRef.value.open()
+    offLineDataImportRef.value && offLineDataImportRef.value.open(deviceId.value, lineId.value)
 }
 queryByCode('Device_Type').then(res => {
     queryCsDictTree(res.data.id).then(res => {

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

@@ -4,7 +4,7 @@
         <!-- 上传文件列表 -->
         <div class="offline_data">
             <div class="offline_data_btn">
-                <el-button type="primary" @click="handleUpload" ize="small" :disabled="offLineFileList.length == 0">
+                <el-button type="primary" @click="handleUpload" size="small" :disabled="offLineFileList.length == 0">
                     开始上传
                 </el-button>
                 <el-button type="primary" @click="removeAllFile" size="small" :disabled="offLineFileList.length == 0">
@@ -63,6 +63,7 @@ import JSZip from 'jszip'
 import { saveAs } from 'file-saver'
 import { ElMessageBox } from 'element-plus'
 import { uploadOffLineDataFile } from '@/api/cs-device-boot/EquipmentDelivery.ts'
+import { off } from 'process'
 const dialogVisible = ref(false)
 const selectedFile = ref(null)
 
@@ -148,32 +149,11 @@ const submitUpload = e => {
     input.multiple = true
     document.querySelector('body').appendChild(input)
     // todo 这里增加了input标签，可以给它删掉
-
     input.click()
-
+    input.onchange = function (e) {
-    // 覆盖原生的 alert 函数
-    // window.alert = function (message) {
-    //     console.log(message) // 可以在这里处理消息或者什么都不做
-    // }
-
-    // // 覆盖原生的 confirm 函数
-    // window.confirm = function (message) {
-    //     console.log(message) // 可以在这里处理消息或者返回 true 或 false
-    //     return false // 始终返回 false 来模拟用户点击“取消”
-    // }
-
-    // // 覆盖原生的 prompt 函数
-    // window.prompt = function (message, defaultValue) {
-    //     console.log(message, defaultValue) // 可以在这里处理消息和默认值
-    //     return null // 始终返回 null 来模拟用户点击“取消”
-    // }
-    input.onclick = function (e) {
-        console.log(e)
-        e.preventDefault()
-    }
-    input.onchange = async function (e) {
         const formData = new FormData()
-        e.preventDefault()
+
+        // e.preventDefault()
         const file = e.target['files']
         for (let i = 0; i < file.length; i++) {
             formData.append('files', file[i])
@@ -187,11 +167,6 @@ const submitUpload = e => {
         })
     }
 }
-
-const previewFile = (file: any) => {
-    // 这里可以实现文件预览逻辑，例如图片预览等
-    console.log('预览文件:', file.name)
-}
 //清空文件
 const removeAllFile = () => {
     offLineFileList.value = []
@@ -224,20 +199,41 @@ const removeFile = async (file: any) => {
     saveAs(newZipContent, '5555.zip')
 }
 //开始上传
-const handleUpload = () => {
+const handleUpload = async () => {
-    return
+    // return
-    const obj={
+    console.log(offLineFileList.value, '000000000')
-        devId:'',//设备id
+    const subForm = new FormData()
-        lineId:'',//监测点id
+    let obj = {
-        files:'',//上传文件集
+        devId: deviceId.value, //设备id
-        paths:''//上传文件路径集
+        lineId: lineId.value, //监测点id
+        files: offLineFileList.value, //上传文件集
+        paths: offLineFileList.value //上传文件路径集
     }
-    uploadOffLineDataFile(obj).then(res => {
+    subForm.append('devId', deviceId.value)
-        if (res.code == 'A0009') {
+    subForm.append('lineId', lineId.value)
+    // subForm.append('files', offLineFileList.value)
+    let webkitRelativePathList: any = []
+    offLineFileList.value.map((item: any, index: any) => {
+        console.log(item)
+        // obj.paths.push(item.webkitRelativePath)
+        subForm.append(`files[${index}]`, item)
+        // subForm.append(`paths[${index}]`, item.webkitRelativePath)
+        webkitRelativePathList.push(item.webkitRelativePath)
+    })
+    console.log(subForm.getAll('files'), subForm)
+    subForm.append('paths', webkitRelativePathList.join(','))
+    // return;
+    await uploadOffLineDataFile(subForm).then(res => {
+        if (res.code == 'A0000') {
+            console.log(res, '0999999999状态吗')
         }
     })
 }
-const open = () => {
+const deviceId: any = ref()
+const lineId: any = ref()
+const open = (devId: any, lineIds: any) => {
+    deviceId.value = devId
+    lineId.value = lineIds
     dialogVisible.value = true
 }
 const close = () => {
@@ -252,7 +248,6 @@ defineExpose({ open })
 .offline_data {
     width: 100%;
     height: 400px;
-    border: 2px solid red;
     .offline_data_btn {
         width: 100%;
         height: 40px;

src/views/govern/device/control/tabs/components/harmonicSpectrum.vue

@@ -1,18 +1,541 @@
+<!-- 谐波频谱 -->
 <template>
     <div class="harmonic">
-谐波频谱
+        <div class="harmonic_select">
+            <!-- {{ searchForm.index }} -->
+            <el-form :model="searchForm" class="history_select" id="history_select">
+                <el-form-item label="稳态指标">
+                    <el-select
+                        multiple
+                        :multiple-limit="3"
+                        collapse-tags
+                        collapse-tags-tooltip
+                        v-model="searchForm.index"
+                        placeholder="请选择统计指标"
+                    >
+                        <el-option
+                            v-for="item in indexOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <el-button type="primary" @click="init">查询</el-button>
+        </div>
+        <div class="harmonic_body">
+            <div class="harmonic_body_charts" v-if="searchForm.index[0]">
+                <MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
+            </div>
+            <div class="harmonic_body_charts" v-if="searchForm.index[1]">
+                <MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
+            </div>
+            <div class="harmonic_body_charts" v-if="searchForm.index[2]">
+                <MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
+            </div>
+        </div>
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { queryStatistical } from '@/api/system-boot/csstatisticalset'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+const searchForm = ref({})
+searchForm.value = {
+    index: []
+}
+//统计指标
+const indexOptions: any = ref([])
+const legendDictList: any = ref([])
+queryByCode('portable-harmonic').then(res => {
+    queryCsDictTree(res.data.id).then(item => {
+        indexOptions.value = item.data
+        searchForm.value.index[0] = indexOptions.value[0].id
+    })
+    queryStatistical(res.data.id).then(vv => {
+        legendDictList.value = vv.data
+    })
+})
+const tableList: any = ref([])
+for (let i = 0; i < 100; i++) {
+    tableList.value.push({
+        name: i + 1,
+        value: Math.floor(Math.random() * 101)
+    })
+}
+const echartsData1: any = ref([]),
+    echartsData2: any = ref([]),
+    echartsData3: any = ref([]),
+    barCharts1 = ref(),
+    barCharts2 = ref(),
+    barCharts3 = ref()
+//查询谐波频谱折线图
+const chartsTitle1 = ref('')
+const chartsTitle2 = ref('')
+const chartsTitle3 = ref('')
+const init = () => {
+    const xDataList: any = [],
+        yDataList1: any = [],
+        yDataList2: any = [],
+        yDataList3: any = []
+    tableList.value.map((item: any) => {
+        xDataList.push(item.name)
+        yDataList1.push(item.value)
+        yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
+        yDataList3.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
+    })
+
+                              indexOptions.value.map((item:any)=>{
+                                if(item.id==searchForm.value.index[0]){
+                                    chartsTitle1.value=item.name
+                                }
+                                if(item.id==searchForm.value.index[1]){
+                                    chartsTitle2.value=item.name
+                                }
+                                if(item.id==searchForm.value.index[2]){
+                                    chartsTitle3.value=item.name
+                                }
+                              })
+                              console.log(  chartsTitle1.value,  chartsTitle2.value,  chartsTitle3.value,"666677777");
+    if (searchForm.value.index[0]) {
+        echartsData1.value = {
+            options: {
+                // backgroundColor: '#0f375f',
+                title: [
+                    {
+                        left: '10%',
+                        top: 0,
+                        text:chartsTitle1.value
+                    }
+                ],
+                grid: {
+                    top: '8%',
+                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
+                    left: '3%',
+                    right: '5%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            show: false
+                        }
+                    }
+                },
+                legend: {
+                    data: ['A相', 'B相', 'C相'],
+                    top: '2%',
+                    right: '2%'
+                    // icon: 'icon'
+                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
+                    // itemWidth: 14,
+                    // itemHeight: 14,
+                    // textStyle: {
+                    //     inside: true,
+                    //     color: '#000',
+                    //     padding: [11, 0, 10, 0],
+                    //     align: 'left',
+                    //     verticalAlign: 'center',
+                    //     fontSize: 14,
+                    //     rich: {}
+                    // }
+                },
+                xAxis: {
+                    // name: '时间(ms)',
+                    data: xDataList,
+                    axisLine: {
+                        show: true, //隐藏X轴轴线
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisTick: {
+                        show: true //隐藏X轴刻度
+                    },
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#000' //X轴文字颜色
+                        }
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: 'kv',
+                        splitLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: true
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#000'
+                            }
+                        },
+                        smooth: true
+                    }
+                ],
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+                            color: '#00CC99'
+                            // }e
+                        },
+                        data: yDataList1,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+
+                            color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList2,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0]
+                            // color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList3,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    }
+                ]
+            }
+        }
+        barCharts1.value && barCharts1.value.initChart()
+    }
+    if (searchForm.value.index[1]) {
+        echartsData2.value = {
+            options: {
+                // backgroundColor: '#0f375f',
+                title: [
+                    {
+                        left: '10%',
+                        top: 0,
+                        text:chartsTitle2.value
+                    }
+                ],
+                grid: {
+                    top: '8%',
+                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
+                    left: '3%',
+                    right: '5%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            show: false
+                        }
+                    }
+                },
+                legend: {
+                    data: ['A相', 'B相', 'C相'],
+                    top: '2%',
+                    right: '2%'
+                    // icon: 'icon'
+                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
+                    // itemWidth: 14,
+                    // itemHeight: 14,
+                    // textStyle: {
+                    //     inside: true,
+                    //     color: '#000',
+                    //     padding: [11, 0, 10, 0],
+                    //     align: 'left',
+                    //     verticalAlign: 'center',
+                    //     fontSize: 14,
+                    //     rich: {}
+                    // }
+                },
+                xAxis: {
+                    // name: '时间(ms)',
+                    data: xDataList,
+                    axisLine: {
+                        show: true, //隐藏X轴轴线
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisTick: {
+                        show: true //隐藏X轴刻度
+                    },
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#000' //X轴文字颜色
+                        }
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: 'kv',
+                        splitLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: true
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#000'
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+                            color: '#00CC99'
+                            // }e
+                        },
+                        data: yDataList1,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+
+                            color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList2,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0]
+                            // color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList3,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    }
+                ]
+            }
+        }
+        barCharts2.value && barCharts2.value.initChart()
+    }
+    if (searchForm.value.index[2]) {
+        echartsData3.value = {
+            options: {
+                // backgroundColor: '#0f375f',
+                title: [
+                    {
+                        left: '10%',
+                        top: 0,
+                        text: chartsTitle3.value
+                    }
+                ],
+                grid: {
+                    top: '8%',
+                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
+                    left: '3%',
+                    right: '5%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            show: false
+                        }
+                    }
+                },
+                legend: {
+                    data: ['A相', 'B相', 'C相'],
+                    top: '2%',
+                    right: '2%'
+                    // icon: 'icon'
+                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
+                    // itemWidth: 14,
+                    // itemHeight: 14,
+                    // textStyle: {
+                    //     inside: true,
+                    //     color: '#000',
+                    //     padding: [11, 0, 10, 0],
+                    //     align: 'left',
+                    //     verticalAlign: 'center',
+                    //     fontSize: 14,
+                    //     rich: {}
+                    // }
+                },
+                xAxis: {
+                    // name: '时间(ms)',
+                    data: xDataList,
+                    axisLine: {
+                        show: true, //隐藏X轴轴线
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisTick: {
+                        show: true //隐藏X轴刻度
+                    },
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#000' //X轴文字颜色
+                        }
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: 'kv',
+                        splitLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: true
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#000'
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+                            color: '#00CC99'
+                            // }e
+                        },
+                        data: yDataList1,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+
+                            color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList2,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0]
+                            // color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList3,
+                        symbol: 'none' // 设置为 'none' 去掉折点小圆
+                    }
+                ]
+            }
+        }
+        barCharts3.value && barCharts3.value.initChart()
+    }
+}
+watch(
+    () => searchForm.value.index,
+    (val: any, oldval: any) => {
+        if (val && val.length != 0) {
+            init()
+        }
+    },
+    {
+        deep: true,
+        immediate: true
+    }
+)
 onMounted(() => {
     console.log()
+    // init()
 })
+defineExpose({ init })
 </script>
 <style lang="scss" scoped>
-.harmonic{
+.harmonic {
-    width:100%;
+    width: 100%;
-    height:100%;
+    height: 100%;
-    border: 2px solid green;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .harmonic_select {
+        width: 50%;
+        height: 30px;
+        display: flex;
+        position: absolute;
+        top: -30px;
+        left: 0;
+        justify-content: flex-start;
+        .el-button {
+            margin-left: 10px;
+        }
+    }
+    .harmonic_body {
+        flex: 1;
+        overflow-y: auto;
+        padding-bottom: 200px;
+        .harmonic_body_charts {
+            height: 200px;
+            margin: 15px 0;
+        }
+    }
 }
 </style>

src/views/govern/device/control/tabs/components/realtrend.vue

@@ -1,3 +1,4 @@
+<!-- 实时趋势 -->
 <template>
     <div class="realtrend">
         <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">

src/views/govern/device/control/tabs/components/recordwoves.vue

@@ -1,3 +1,4 @@
+<!-- 实时录波 -->
 <template>
     <div class="record">
 实时录波

src/views/govern/device/control/tabs/components/tableInfo.vue

@@ -1,122 +0,0 @@
-<template>
-    <div v-if="tableData.length != 0">
-        <!-- div设计table -->
-        <div class="table" v-for="(item, index) in columnsData" :key="index">
-            <!-- 单层表头 -->
-            <div class="thead">
-                <div class="thead_top">
-                    {{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
-                </div>
-                <div class="thead_bot">
-                    <div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
-                        {{ vv.phase + '相 ' }}
-                    </div>
-                </div>
-            </div>
-            <!-- 有合并表头的数据 -->
-            <div class="tbody">
-                <div class="tbody_cell" v-for="(vv, key) in item" :key="key">
-                    {{
-                        tableData.find(item => {
-                            return item.anotherName == vv.showName && item.phase == vv.phase
-                        })?.statisticalData
-                            ? tableData.find(item => {
-                                  return item.anotherName == vv.showName && item.phase == vv.phase
-                              })?.statisticalData
-                            : '/'
-                    }}
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-import { ref, nextTick, onMounted } from 'vue'
-import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
-const loading = ref(false)
-const tableData: any = ref([])
-loading.value = true
-const columnsData: any = ref([])
-const getColumns = () => {
-    getRealTimeTableList().then(res => {
-        columnsData.value = res.data
-    })
-}
-nextTick(() => {})
-onMounted(() => {
-    getColumns()
-    loading.value = false
-})
-const getTableData = (list: any) => {
-    tableData.value = list
-    loading.value = false
-    columnsData.value.map((item: any) => {
-        item.map((vv: any) => {
-            vv.statisticalData = list.find((kk: any) => {
-                return kk.anotherName == vv.showName && kk.phase == vv.phase
-            })?.statisticalData
-        })
-    })
-}
-defineExpose({ getTableData })
-</script>
-
-<style lang="scss" scoped>
-// ::v-deep .vxe-table--empty-content{
-// display: none !important;
-// }
-.table {
-    width: 100%;
-    height: 120px;
-    border: 1px solid #eee;
-    border-bottom: 2px solid #eee;
-    margin-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    .thead {
-        width: 100%;
-        height: auto;
-        background: #f4f6f9;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        .thead_top {
-            width: 100%;
-            height: 40px;
-            line-height: 40px;
-            border: 1px solid #eee;
-            color: #111;
-            font-size: 14px;
-            font-weight: 800;
-        }
-        .thead_bot {
-            width: 100%;
-            height: 40px;
-            line-height: 40px;
-            display: flex;
-            color: #111;
-            font-size: 14px;
-            font-weight: 800;
-            .thead_bot_cell {
-                flex: 1;
-                border: 1px solid #eee;
-            }
-        }
-    }
-    .tbody {
-        flex: 1;
-        display: flex;
-        text-align: center;
-        .tbody_cell {
-            flex: 1;
-            text-align: center;
-            line-height: 40px;
-            border: 1px solid #eee;
-            border-bottom: 0;
-        }
-    }
-    .tbody:hover {
-        background: #f4f6f9;
-    }
-}
-</style>

src/views/govern/device/control/tabs/components/waveFormAnalysis.vue

@@ -0,0 +1,576 @@
+<!-- 波形解析组件 -->
+<template>
+    <div class="waveFormAnalysis">
+        <div class="waveFormAnalysis_header">
+            <el-form-item label="值类型选择">
+                <el-select v-model="searchForm.type" style="width: 200px">
+                    <el-option label="一次值" :value="0"></el-option>
+                </el-select>
+            </el-form-item>
+        </div>
+        <el-tabs class="waveFormAnalysis_body" type="border-card" v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="瞬时波形" name="0">
+                <template #label>
+                    <span class="custom-tabs-label">
+                        <el-icon><TrendCharts /></el-icon>
+                        瞬时波形
+                    </span>
+                </template>
+                <div class="tab_info">
+                    <div class="charts">
+                        <MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
+                    </div>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="RMS波形" name="1">
+                <template #label>
+                    <span class="custom-tabs-label">
+                        <el-icon><TrendCharts /></el-icon>
+                        RMS波形
+                    </span>
+                </template>
+                <div class="tab_info">
+                    <div class="charts">
+                        <MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
+                    </div>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, reactive } from 'vue'
+import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
+const searchForm = ref({
+    type: 0
+})
+const activeName = ref('0')
+const tableList: any = ref([])
+for (let i = 0; i < 500; i++) {
+    tableList.value.push({
+        name: i + 1,
+        value: Math.floor(Math.random() * 101)
+    })
+}
+interface RowVO {
+    [key: string]: any
+}
+//谐波电压含有率
+const gridOptions = ref<VxeGridProps<RowVO>>({
+    border: true,
+    showOverflow: true,
+    showHeader: false,
+    columns: [],
+    data: [],
+    columnConfig: {
+        resizable: true
+    },
+    align: 'center'
+})
+gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
+
+const yAxisUnit: any = ref('')
+
+const echartsData1: any = ref([]),
+    echartsData2: any = ref([]),
+    echartsData3: any = ref([]),
+    barCharts1 = ref(),
+    barCharts2 = ref(),
+    barCharts3 = ref()
+//加载echarts
+const init = () => {
+    const xDataList: any = [],
+        yDataList1: any = [],
+        yDataList2: any = [],
+        yDataList3: any = []
+    tableList.value.map((item: any) => {
+        xDataList.push(item.name)
+        yDataList1.push(item.value)
+        yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
+        yDataList3.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
+    })
+    if (activeName.value == '0') {
+        echartsData1.value = {
+            options: {
+                // backgroundColor: '#0f375f',
+                grid: {
+                    top: '8%',
+                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
+                    left: '3%',
+                    right: '5%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            show: false
+                        }
+                    }
+                },
+                legend: {
+                    data: ['A相', 'B相', 'C相'],
+                    top: '2%',
+                    right: '2%'
+                    // icon: 'icon'
+                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
+                    // itemWidth: 14,
+                    // itemHeight: 14,
+                    // textStyle: {
+                    //     inside: true,
+                    //     color: '#000',
+                    //     padding: [11, 0, 10, 0],
+                    //     align: 'left',
+                    //     verticalAlign: 'center',
+                    //     fontSize: 14,
+                    //     rich: {}
+                    // }
+                },
+                xAxis: {
+                    name: '时间(ms)',
+                    data: xDataList,
+                    axisLine: {
+                        show: true, //隐藏X轴轴线
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisTick: {
+                        show: true //隐藏X轴刻度
+                    },
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#000' //X轴文字颜色
+                        }
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: 'kv',
+                        splitLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: true
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#000'
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+                            color: '#00CC99'
+                            // }e
+                        },
+                        data: yDataList1
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+
+                            color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList2
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0]
+                            // color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList3
+                    }
+                ]
+            }
+        }
+        barCharts1.value.initChart()
+    } else if (activeName.value == '1') {
+        echartsData2.value = {
+            options: {
+                // backgroundColor: '#0f375f',
+                grid: {
+                    top: '8%',
+                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
+                    left: '3%',
+                    right: '5%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            show: false
+                        }
+                    }
+                },
+                legend: {
+                    data: ['A相', 'B相', 'C相'],
+                    top: '2%',
+                    right: '2%'
+                    // icon: 'icon'
+                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
+                    // itemWidth: 14,
+                    // itemHeight: 14,
+                    // textStyle: {
+                    //     inside: true,
+                    //     color: '#000',
+                    //     padding: [11, 0, 10, 0],
+                    //     align: 'left',
+                    //     verticalAlign: 'center',
+                    //     fontSize: 14,
+                    //     rich: {}
+                    // }
+                },
+                xAxis: {
+                    name: '时间(ms)',
+                    data: xDataList,
+                    axisLine: {
+                        show: true, //隐藏X轴轴线
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisTick: {
+                        show: true //隐藏X轴刻度
+                    },
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#000' //X轴文字颜色
+                        }
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: 'kv',
+                        splitLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: true
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#000'
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+                            color: '#00CC99'
+                            // }e
+                        },
+                        data: yDataList1
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+
+                            color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList2
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0]
+                            // color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList3
+                    }
+                ]
+            }
+        }
+        barCharts2.value.initChart()
+    } else if (activeName.value == '2') {
+        echartsData3.value = {
+            options: {
+                // backgroundColor: '#0f375f',
+                grid: {
+                    top: '8%',
+                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
+                    left: '3%',
+                    right: '5%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            show: false
+                        }
+                    }
+                },
+                legend: {
+                    data: ['A相', 'B相', 'C相'],
+                    top: '2%',
+                    right: '2%'
+                    // icon: 'icon'
+                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
+                    // itemWidth: 14,
+                    // itemHeight: 14,
+                    // textStyle: {
+                    //     inside: true,
+                    //     color: '#000',
+                    //     padding: [11, 0, 10, 0],
+                    //     align: 'left',
+                    //     verticalAlign: 'center',
+                    //     fontSize: 14,
+                    //     rich: {}
+                    // }
+                },
+                xAxis: {
+                    name: '时间(ms)',
+                    data: xDataList,
+                    axisLine: {
+                        show: true, //隐藏X轴轴线
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    axisTick: {
+                        show: true //隐藏X轴刻度
+                    },
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#000' //X轴文字颜色
+                        }
+                    }
+                },
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: 'kv',
+                        splitLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: true
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#000'
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+                            color: '#00CC99'
+                            // }e
+                        },
+                        data: yDataList1
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0],
+
+                            color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList2
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        barMaxWidth: 24,
+                        itemStyle: {
+                            // normal: {
+                            barBorderRadius: [3, 3, 0, 0]
+                            // color: '#FF9900'
+                            // }
+                        },
+                        data: yDataList3
+                    }
+                ]
+            }
+        }
+        barCharts3.value.initChart()
+    }
+}
+
+const handleClick = (tab: any, event: any) => {
+    activeName.value = tab.index
+    init()
+}
+onMounted(() => {
+    init()
+})
+</script>
+<style lang="scss" scoped>
+.realtrend {
+    width: 100%;
+    height: 100%;
+    .table_info {
+        width: 100%;
+        height: auto;
+        overflow-x: auto;
+        .table {
+            width: auto;
+            height: auto;
+            border: 2px solid #eee;
+            display: flex;
+            flex-direction: column;
+            .thead {
+                width: 100%;
+                height: 40px;
+                display: flex;
+                border-bottom: 2px solid #eee;
+                .thead_left {
+                    width: 200px !important;
+                    height: 100%;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 14px;
+                    font-weight: 800;
+                }
+                .thead_right {
+                    flex: 1;
+                    display: flex;
+                    .thead_right_item {
+                        flex: none;
+                        width: 100px;
+                        text-align: center;
+                        line-height: 40px;
+                        border-left: 1px solid #eee;
+                    }
+                }
+            }
+            .tbody {
+                width: 100%;
+                height: 40px;
+                display: flex;
+                .tbody_left {
+                    width: 200px !important;
+                    height: 100%;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 14px;
+                    font-weight: 800;
+                }
+                .tbody_right {
+                    flex: 1;
+                    display: flex;
+                    .tbody_right_item {
+                        flex: none;
+                        width: 100px;
+                        text-align: center;
+                        line-height: 40px;
+                        border-left: 1px solid #eee;
+                    }
+                }
+            }
+        }
+    }
+}
+.reverse-table {
+    // max-height:120px !important;
+}
+.reverse-table .vxe-body--row .vxe-body--column:first-child {
+    background-color: #f8f8f9;
+}
+::v-deep .vxe-table--render-wrapper {
+    height: 90px !important;
+    max-height: 90px !important;
+    overflow-x: auto !important;
+    min-height: 0 !important;
+}
+::v-deep .body--wrapper {
+    height: 90px !important;
+    max-height: 90px !important;
+    min-height: 0 !important;
+}
+.tab_info {
+    width: 100%;
+    height: calc(100vh - 450px);
+    // overflow: auto;
+    // padding-bottom: 20px;
+    .charts {
+        width: 100%;
+        margin-top: 10px;
+        height: calc(100vh - 450px);
+    }
+}
+.custom-tabs-label {
+    display: flex;
+    align-items: center;
+}
+.waveFormAnalysis {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .waveFormAnalysis_header {
+        position: absolute;
+        top: -30px;
+        left:0;
+    }
+    .waveFormAnalysis_body{
+        margin-top: 15px;
+    }
+}
+</style>

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

@@ -1,19 +1,93 @@
 <template>
+    <div class="header_btn">
+        <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">波形解析</el-button>
+        <el-button type="primary" size="small" @click="handleBack" v-if="isWaveCharts" :icon="ArrowLeft">返回</el-button>
+    </div>
     <div class="view">
-        <div class="view_top">
+        <Table ref="tableRef" v-if="!isWaveCharts" />
-
+        <waveFormAnalysis ref="waveFormAnalysisRef" v-if="isWaveCharts" />
-        </div>
-        <div class="view_bot">
-
-        </div>
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, provide } from 'vue'
+import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import waveFormAnalysis from './components/waveFormAnalysis.vue'
+import {ArrowLeft} from '@element-plus/icons-vue'
+const tableParams: any = ref({})
+const tableStore: any = new TableStore({
+    url: '/cs-device-boot/csGroup/deviceDataByType',
+    publicHeight: 210,
+    method: 'POST',
+    column: [
+        // { width: '60', type: 'checkbox', fixed: 'left' },
+        { title: '序号', type: 'seq', width: 80 },
+        { field: 'devName', title: '发生时刻', minWidth: 170 },
+        { field: 'lineName', title: '工程名称', minWidth: 170 },
+        { field: 'startTime', title: '项目名称', minWidth: 170 },
+        { field: 'endTime', title: '测试项名称', minWidth: 170 },
+        { field: 'endTime', title: '事件描述', minWidth: 170 },
+        { field: 'endTime', title: '相别', minWidth: 170 },
+        { field: 'endTime', title: '持续时间(s)', minWidth: 170 },
+        { field: 'endTime', title: '暂降幅值(%)', minWidth: 170 },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '波形解析',
+                    type: 'primary',
+                    icon: 'el-icon-Check',
+                    render: 'basicButton',
+                    click: row => {
+                        handleWaveFormAnalysis(row)
+                    }
+                }
+            ]
+        }
+    ],
+
+    beforeSearchFun: () => {
+        tableStore.table.params.devId = tableParams.value.devId
+        tableStore.table.params.lineId = tableParams.value.lineId
+        tableStore.table.params.list = tableParams.value.list
+        tableStore.table.params.type = 3
+    },
+    loadCallback: () => {}
+})
+provide('tableStore', tableStore)
+const isWaveCharts = ref(false)
+//获取请求参数
+const getTableParams = (val: any) => {
+    tableParams.value = val
+    console.log(tableParams.value, '暂态时间表格请求参数')
+    isWaveCharts.value = false
+    tableStore.index()
+}
+//波形解析组件
+const handleWaveFormAnalysis = (val: any) => {
+    console.log(val, '波形解析')
+    isWaveCharts.value = true
+}
+//返回
+const handleBack=()=>{
+    isWaveCharts.value = false;
+    tableStore.index()
+}
+defineExpose({ getTableParams })
 onMounted(() => {
-    console.log()
+    tableStore.index()
 })
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
-
+.header_btn{
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
 </style>

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

@@ -14,7 +14,7 @@
             </div>
             <!-- 右侧仪表盘 -->
             <div class="view_top_right">
-                <div class="right_chartsitle">电流有效值</div>
+                <div class="right_charts_title">电流有效值</div>
                 <div class="right_charts"><MyEchart ref="pieChart4" :options="echartsDataA1"></MyEchart></div>
                 <div class="right_charts"><MyEchart ref="pieChart5" :options="echartsDataA2"></MyEchart></div>
                 <div class="right_charts"><MyEchart ref="pieChart6" :options="echartsDataA3"></MyEchart></div>
@@ -22,7 +22,6 @@
         </div>
         <div class="view_bot">
             <div class="view_bot_tables">
-                <!-- <tableInfo ref="tableInfoRef" /> -->
                 <!-- 表格数据 -->
                 <div v-if="tableData.length != 0">
                     <!-- div设计table -->
@@ -62,7 +61,6 @@
 import { ref, onMounted } from 'vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
-import tableInfo from './components/tableInfo.vue'
 import * as echarts from 'echarts'
 import { split } from 'lodash-es'
 const pieChartRef: any = ref()
@@ -159,642 +157,6 @@ const init = () => {
             },
             legend: [],
             series: [
-                // {
-                //     name: 'atitle +电压有效值',
-                //     type: 'gauge',
-                //     center: ['50%', '30%'], // 默认全局居中
-                //     radius: '50%',
-                //     min: 0,
-                //     max: 180,
-                //     startAngle: 180,
-                //     endAngle: 90,
-                //     splitNumber: 2,
-                //     axisLine: {
-                //         // 坐标轴线
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: [
-                //                 [0.25, '#DAA520'],
-                //                 [0.5, '#DAA520'],
-                //                 [0.75, '#DAA520'],
-                //                 [1, '#DAA520']
-                //             ],
-                //             width: 5
-                //         }
-                //     },
-                //     axisTick: {
-                //         // 坐标轴小标记
-                //         length: 12, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     splitLine: {
-                //         // 分隔线
-                //         length: 20, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle（详见lineStyle）控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     pointer: {
-                //         width: 5
-                //     },
-                //     title: {
-                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
-                //     },
-                //     detail: {
-                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                //         fontWeight: 'bolder',
-                //         offsetCenter: ['40%', '-35%'],
-                //         fontSize: '35px'
-                //     },
-                //     data: [
-                //         {
-                //             // value: [0],
-                //             // name:' atitle + (kV)'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: ' btitle + 电压有效值',
-                //     type: 'gauge',
-                //     center: ['20%', '60%'], // 默认全局居中
-                //     radius: '50%',
-                //     min: 0,
-                //     max: 180,
-                //     startAngle: 180,
-                //     endAngle: 90,
-                //     splitNumber: 2,
-                //     axisLine: {
-                //         // 坐标轴线
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: [
-                //                 [0.25, '#2E8B57'],
-                //                 [0.5, '#2E8B57'],
-                //                 [0.75, '#2E8B57'],
-                //                 [1, '#2E8B57']
-                //             ],
-                //             width: 5
-                //         }
-                //     },
-                //     axisTick: {
-                //         // 坐标轴小标记
-                //         length: 12, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     splitLine: {
-                //         // 分隔线
-                //         length: 20, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle（详见lineStyle）控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     pointer: {
-                //         width: 5
-                //     },
-                //     title: {
-                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
-                //     },
-                //     detail: {
-                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                //         fontWeight: 'bolder',
-                //         offsetCenter: ['40%', '-35%'],
-                //         fontSize: '35px'
-                //     },
-                //     data: [
-                //         {
-                //             // value: [0],
-                //             // name: ' btitle +(kV)'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: 'ctitle + 电压有效值',
-                //     type: 'gauge',
-                //     center: ['20%', '90%'], // 默认全局居中
-                //     radius: '50%',
-                //     min: 0,
-                //     max: 180,
-                //     startAngle: 180,
-                //     endAngle: 90,
-                //     splitNumber: 2,
-                //     axisLine: {
-                //         // 坐标轴线
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: [
-                //                 [0.25, '#A52a2a'],
-                //                 [0.5, '#A52a2a'],
-                //                 [0.75, '#A52a2a'],
-                //                 [1, '#A52a2a']
-                //             ],
-                //             width: 5
-                //         }
-                //     },
-                //     axisTick: {
-                //         // 坐标轴小标记
-                //         length: 12, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     splitLine: {
-                //         // 分隔线
-                //         length: 20, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle（详见lineStyle）控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     pointer: {
-                //         width: 5
-                //     },
-                //     title: {
-                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
-                //     },
-                //     detail: {
-                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                //         fontWeight: 'bolder',
-                //         offsetCenter: ['40%', '-35%'],
-                //         fontSize: '35px'
-                //     },
-                //     data: [
-                //         {
-                //             // value: [0],
-                //             // name: 'ctitle + (kV)'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: 'A相电流有效值',
-                //     type: 'gauge',
-                //     center: ['80%', '30%'], // 默认全局居中
-                //     radius: '50%',
-                //     min: 0,
-                //     max: 180,
-                //     startAngle: 90,
-                //     endAngle: 0,
-                //     splitNumber: 2,
-                //     axisLine: {
-                //         // 坐标轴线
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: [
-                //                 [0.25, '#DAA520'],
-                //                 [0.5, '#DAA520'],
-                //                 [0.75, '#DAA520'],
-                //                 [1, '#DAA520']
-                //             ],
-                //             width: 5
-                //         }
-                //     },
-                //     axisTick: {
-                //         // 坐标轴小标记
-                //         length: 12, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     splitLine: {
-                //         // 分隔线
-                //         length: 20, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle（详见lineStyle）控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     pointer: {
-                //         width: 5
-                //     },
-                //     title: {
-                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
-                //     },
-                //     detail: {
-                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                //         fontWeight: 'bolder',
-                //         offsetCenter: ['-45%', '-35%'],
-                //         fontSize: '35px'
-                //     },
-                //     data: [
-                //         {
-                //             // value: [0],
-                //             // name: 'A相(A)'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: 'B相电流有效值',
-                //     type: 'gauge',
-                //     center: ['80%', '60%'], // 默认全局居中
-                //     radius: '50%',
-                //     min: 0,
-                //     max: 180,
-                //     startAngle: 90,
-                //     endAngle: 0,
-                //     splitNumber: 2,
-                //     axisLine: {
-                //         // 坐标轴线
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: [
-                //                 [0.25, '#2E8B57'],
-                //                 [0.5, '#2E8B57'],
-                //                 [0.75, '#2E8B57'],
-                //                 [1, '#2E8B57']
-                //             ],
-                //             width: 5
-                //         }
-                //     },
-                //     axisTick: {
-                //         // 坐标轴小标记
-                //         length: 12, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     splitLine: {
-                //         // 分隔线
-                //         length: 20, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle（详见lineStyle）控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     pointer: {
-                //         width: 5
-                //     },
-                //     title: {
-                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
-                //     },
-                //     detail: {
-                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                //         fontWeight: 'bolder',
-                //         offsetCenter: ['-45%', '-35%'],
-                //         fontSize: '35px'
-                //     },
-                //     data: [
-                //         {
-                //             // value: [0],
-                //             // name: 'B相(A)'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: 'C相电流有效值',
-                //     type: 'gauge',
-                //     center: ['80%', '90%'], // 默认全局居中
-                //     radius: '50%',
-                //     min: 0,
-                //     max: 180,
-                //     startAngle: 90,
-                //     endAngle: 0,
-                //     splitNumber: 2,
-                //     axisLine: {
-                //         // 坐标轴线
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: [
-                //                 [0.25, '#A52a2a'],
-                //                 [0.5, '#A52a2a'],
-                //                 [0.75, '#A52a2a'],
-                //                 [1, '#A52a2a']
-                //             ],
-                //             width: 5
-                //         }
-                //     },
-                //     axisTick: {
-                //         // 坐标轴小标记
-                //         length: 12, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     splitLine: {
-                //         // 分隔线
-                //         length: 20, // 属性length控制线长
-                //         lineStyle: {
-                //             // 属性lineStyle（详见lineStyle）控制线条样式
-                //             color: 'auto'
-                //         }
-                //     },
-                //     pointer: {
-                //         width: 5
-                //     },
-                //     title: {
-                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
-                //     },
-                //     detail: {
-                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-                //         fontWeight: 'bolder',
-                //         offsetCenter: ['-45%', '-35%'],
-                //         fontSize: '35px'
-                //     },
-                //     data: [
-                //         {
-                //             // value: [0],
-                //             // name: 'C相(A)'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: '基波电流相位',
-                //     type: 'gauge',
-                //     // 表盘最小值
-                //     min: 180,
-                //     // 表盘最大值
-                //     max: -180,
-                //     // 表盘分割数
-                //     splitNumber: 12,
-                //     // 圆心位置
-                //     center: ['50%', '50%'],
-                //     // 半径
-                //     radius: '50%',
-                //     startAngle: 180,
-                //     endAngle: -179.99,
-                //     // 指针方向
-                //     clockWise: true,
-                //     title: false,
-                //     // 表盘外框
-                //     axisLine: {
-                //         show: true,
-                //         lineStyle: {
-                //             color: [
-                //                 [0.25, '#2E8B57'],
-                //                 [0.5, '#2E8B57'],
-                //                 [0.75, '#2E8B57'],
-                //                 [1, '#2E8B57']
-                //             ],
-                //             width: 2
-                //         }
-                //     },
-                //     // 表盘细分数
-                //     axisTick: {
-                //         show: true,
-                //         splitNumber: 5,
-                //         length: 6,
-                //         lineStyle: {
-                //             color: '#eee',
-                //             width: 1,
-                //             type: 'solid'
-                //         }
-                //     },
-                //     // 分割线
-                //     splitLine: {
-                //         show: true,
-                //         length: 10,
-                //         lineStyle: {
-                //             color: '#eee',
-                //             width: 2,
-                //             type: 'solid'
-                //         }
-                //     },
-                //     // 分割线标识
-                //     axisLabel: {
-                //         show: false
-                //     },
-
-                //     // 指针设置
-                //     pointer: {
-                //         length: '45%',
-                //         width: 2
-                //     },
-                //     detail: {
-                //         show: false
-                //     },
-                //     data: [
-                //         {
-                //             value: 0,
-                //             name: 'B相'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: '基波电流相位',
-                //     type: 'gauge',
-                //     // 表盘最小值
-                //     min: 180,
-                //     // 表盘最大值
-                //     max: -180,
-                //     // 表盘分割数
-                //     splitNumber: 12,
-                //     // 圆心位置
-                //     center: ['50%', '50%'],
-                //     // 半径
-                //     radius: '50%',
-                //     startAngle: 180,
-                //     endAngle: -179.99,
-                //     // 指针方向
-                //     clockWise: true,
-                //     title: false,
-                //     // 表盘外框
-                //     axisLine: {
-                //         show: true,
-                //         lineStyle: {
-                //             color: [
-                //                 [0.25, '#A52a2a'],
-                //                 [0.5, '#A52a2a'],
-                //                 [0.75, '#A52a2a'],
-                //                 [1, '#A52a2a']
-                //             ],
-                //             width: 2
-                //         }
-                //     },
-                //     // 表盘细分数
-                //     axisTick: {
-                //         show: true,
-                //         splitNumber: 5,
-                //         length: 6,
-                //         lineStyle: {
-                //             color: '#eee',
-                //             width: 1,
-                //             type: 'solid'
-                //         }
-                //     },
-                //     // 分割线
-                //     splitLine: {
-                //         show: true,
-                //         length: 10,
-                //         lineStyle: {
-                //             color: '#eee',
-                //             width: 2,
-                //             type: 'solid'
-                //         }
-                //     },
-                //     // 分割线标识
-                //     axisLabel: {
-                //         show: false
-                //     },
-
-                //     // 指针设置
-                //     pointer: {
-                //         length: '45%',
-                //         width: 2
-                //     },
-                //     detail: {
-                //         show: false
-                //     },
-                //     data: [
-                //         {
-                //             value: 0,
-                //             name: 'C相'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: '基波电压相位',
-                //     type: 'gauge',
-                //     // 表盘最小值
-                //     min: 180,
-                //     // 表盘最大值
-                //     max: -180,
-                //     // 表盘分割数
-                //     splitNumber: 12,
-                //     // 圆心位置
-                //     center: ['50%', '50%'],
-                //     // 半径
-                //     radius: '85%',
-                //     startAngle: 180,
-                //     endAngle: -179.99,
-                //     // 指针方向
-                //     clockWise: true,
-                //     title: false,
-                //     // 表盘外框
-                //     axisLine: {
-                //         show: true,
-                //         lineStyle: {
-                //             color: [
-                //                 [0.25, '#2E8B57'],
-                //                 [0.5, '#2E8B57'],
-                //                 [0.75, '#2E8B57'],
-                //                 [1, '#2E8B57']
-                //             ],
-                //             width: 1.5
-                //         }
-                //     },
-                //     // 表盘细分数
-                //     axisTick: {
-                //         show: true,
-                //         splitNumber: 5,
-                //         length: 6,
-                //         lineStyle: {
-                //             color: '#eee',
-                //             width: 1,
-                //             type: 'solid'
-                //         }
-                //     },
-                //     // 分割线
-                //     splitLine: {
-                //         show: true,
-                //         length: 10,
-                //         lineStyle: {
-                //             color: '#eee',
-                //             width: 2,
-                //             type: 'solid'
-                //         }
-                //     },
-                //     // 分割线标识
-                //     axisLabel: {
-                //         show: false
-                //     },
-
-                //     // 指针设置
-                //     pointer: {
-                //         length: '75%',
-                //         width: 4
-                //     },
-                //     detail: {
-                //         show: false
-                //     },
-                //     data: [
-                //         {
-                //             value: 0,
-                //             name: 'B相'
-                //         }
-                //     ]
-                // },
-                // {
-                //     name: '基波电压相位',
-                //     type: 'gauge',
-                //     // 表盘最小值
-                //     min: 180,
-                //     // 表盘最大值
-                //     max: -180,
-                //     // 表盘分割数
-                //     splitNumber: 12,
-                //     // 圆心位置
-                //     center: ['50%', '50%'],
-                //     // 半径
-                //     radius: '85%',
-                //     startAngle: 180,
-                //     endAngle: -179.99,
-                //     // 指针方向
-                //     clockWise: true,
-                //     title: false,
-                //     // 表盘外框
-                //     axisLine: {
-                //         show: true,
-                //         lineStyle: {
-                //             color: [
-                //                 [0.25, '#A52a2a'],
-                //                 [0.5, '#A52a2a'],
-                //                 [0.75, '#A52a2a'],
-                //                 [1, '#A52a2a']
-                //             ],
-                //             width: 1.5
-                //         }
-                //     },
-                //     // 表盘细分数
-                //     axisTick: {
-                //         show: true,
-                //         splitNumber: 5,
-                //         length: 6,
-                //         lineStyle: {
-                //             color: '#eee',
-                //             width: 1,
-                //             type: 'solid'
-                //         }
-                //     },
-                //     // 分割线
-                //     splitLine: {
-                //         show: true,
-                //         length: 10,
-                //         lineStyle: {
-                //             color: '#eee',
-                //             width: 2,
-                //             type: 'solid'
-                //         }
-                //     },
-                //     // 分割线标识
-                //     axisLabel: {
-                //         show: false
-                //     },
-
-                //     // 指针设置
-                //     pointer: {
-                //         length: '75%',
-                //         width: 4
-                //     },
-                //     detail: {
-                //         show: false
-                //     },
-                //     data: [
-                //         {
-                //             value: 0,
-                //             name: 'C相'
-                //         }
-                //     ]
-                // }
                 {
                     name: '基波电流相位',
                     type: 'gauge',
@@ -818,10 +180,10 @@ const init = () => {
                         show: true,
                         lineStyle: {
                             color: [
-                                [0.25, '#1E9FF4'],
+                                [0.25, '#9D322D'],
-                                [0.5, '#1E9FF4'],
+                                [0.5, '#9D322D'],
-                                [0.75, '#1E9FF4'],
+                                [0.75, '#9D322D'],
-                                [1, '#1E9FF4']
+                                [1, '#9D322D']
                             ],
                             width: 2
                         }
@@ -832,7 +194,7 @@ const init = () => {
                         splitNumber: 5,
                         length: 4,
                         lineStyle: {
-                            color: '#1E9FF4',
+                            color: '#9D322D',
                             width: 1,
                             type: 'solid'
                         }
@@ -842,7 +204,7 @@ const init = () => {
                         show: true,
                         length: 10,
                         lineStyle: {
-                            color: '#1E9FF4',
+                            color: '#9D322D',
                             width: 2,
                             type: 'solid'
                         }
@@ -1003,7 +365,6 @@ const init = () => {
     }
 }
 //接收父组件传递的table数据
-const tableInfoRef: any = ref(null)
 const dataList: any = ref([])
 const listV: any = ref([])
 const listA: any = ref([])

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

@@ -1,13 +1,700 @@
 <template>
-<div>
+    <div>
-    1111111
+        <div class="history_header">
-</div>
+            <el-form :model="searchForm" class="history_select" id="history_select">
+                <el-form-item label="统计指标" label-width="80px">
+                    <el-select
+                        multiple
+                        :multiple-limit="3"
+                        collapse-tags
+                        collapse-tags-tooltip
+                        v-model="searchForm.index"
+                        placeholder="请选择统计指标"
+                    >
+                        <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
+                        :label="item.name + '谐波次数'"
+                        v-if="item.countOptions.length != 0"
+                        label-width="180px"
+                    >
+                        <el-select
+                            v-model="item.count"
+                            multiple
+                            collapse-tags
+                            collapse-tags-tooltip
+                            placeholder="请选择谐波次数"
+                        >
+                            <el-option v-for="vv in item.countOptions" :key="vv" :label="vv" :value="vv"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </div>
+                <el-form-item label="值类型" label-width="80px">
+                    <el-select v-model="searchForm.type" placeholder="请选择值类型">
+                        <el-option
+                            v-for="item in typeOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div class="history_searchBtn">
+                <el-button type="primary" size="small" icon="el-icon-Search" @click="init()">查询</el-button>
+            </div>
+        </div>
+        <div class="history_chart" v-loading="loading">
+            <MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
+        </div>
+    </div>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
-import {ref,onMounted} from 'vue';
+import popup from './components/popup.vue'
-onMounted(()=>{
+import schemeTree from './components/schemeTree.vue'
-console.log()
+import { mainHeight } from '@/utils/layout'
+import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { ref, reactive, onMounted, provide, nextTick, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+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 { isNonNullChain } from 'typescript'
+import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
+import { read, writeFile, utils } from 'xlsx'
+import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
+const dictData = useDictData()
+defineOptions({
+    name: 'govern/device/manage'
 })
+//电压等级
+const voltageLevelList = dictData.getBasicData('Dev_Voltage')
+//接线方式
+const volConTypeList = dictData.getBasicData('Dev_Connect')
+//值类型
+const pageHeight = mainHeight(20)
+const loading = ref(true)
+const searchForm = ref({})
+const typeOptions = [
+    {
+        name: '平均值',
+        id: 'avg'
+    },
+    {
+        name: '最大值',
+        id: 'max'
+    },
+    {
+        name: '最小值',
+        id: 'min'
+    },
+    {
+        name: 'CP95值',
+        id: 'cp95'
+    }
+]
+searchForm.value = {
+    index: [],
+    type: typeOptions[0].id,
+    count: []
+}
+//统计指标
+const indexOptions: any = ref([])
+//谐波次数
+const countOptions: any = ref([])
+// Harmonic_Type
+// portable-harmonic
+const legendDictList: any = ref([])
+queryByCode('portable-harmonic').then(res => {
+    queryCsDictTree(res.data.id).then(item => {
+        indexOptions.value = item.data
+        searchForm.value.index[0] = indexOptions.value[0].id
+    })
+    queryStatistical(res.data.id).then(vv => {
+        legendDictList.value = vv.data
+    })
+})
+const activeName: any = ref()
+const deviceData: any = ref([])
+//历史趋势devId
+const historyDevId: any = ref('')
+const chartTitle: any = ref('')
+const echartsData = ref<any>(null)
+//加载echarts图表
+//历史趋势数据
+const historyDataList: any = ref([])
+const range = (start: any, end: any, step: any) => {
+    return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
+}
+//获取请求趋势数据参数
+const trendRequestData = ref()
+const getTrendRequest = async (val: any) => {
+    console.log(val, '拿到的请求参数')
+    trendRequestData.value = val
+    init()
+}
+//初始化趋势图
+const init = async () => {
+    // 选择指标的时候切换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)
+            }
+        })
+    })
+
+    //颜色数组
+    const colorList = [
+        '#DAA521',
+        '#A5292A',
+        'aqua',
+        '#d81e06',
+        '#2E8B58',
+        'coral',
+        '#012B6A',
+        'brown',
+        '#70B601',
+        'blueviolet',
+        '#1DD0CE',
+        'cadetblue'
+    ]
+    //选择的指标使用方法处理
+    initSearchFormIndexAndCount(searchForm.value.index)
+    //查询历史趋势
+    historyDataList.value = []
+    loading.value = true
+    chartTitle.value=''
+
+    searchForm.value.index.map((item: any, indexs: any) => {
+        indexOptions.value.map((vv: any) => {
+            if (vv.id == item) {
+                chartTitle.value += indexs == searchForm.value.index.length - 1 ? vv.name : vv.name + '/'
+            }
+        })
+    })
+    let lists: any = []
+    countData.value.map((item: any, index: any) => {
+        lists[index] = {
+            statisticalId: item.index,
+            frequencys: item.count
+        }
+    })
+    let obj = {
+        ...trendRequestData.value,
+        list: lists,
+        valueType: searchForm.value.type
+    }
+
+    if (obj.devId && obj.list.length != 0) {
+        try {
+            await getTabsDataByType(obj)
+                .then(res => {
+                    console.log(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 = [],
+                            timeList: any = []
+                        let unitList: any = []
+                        historyDataList.value.map((item: any) => {
+                            timeList.push(item.time)
+                            if (unitList.indexOf(item.unit) == -1) {
+                                unitList.push(item.unit)
+                            }
+                        })
+                        xAxis = timeList.sort((a: any, b: any) => {
+                            return (
+                                a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
+                                0 -
+                                (b
+                                    .replace('-', '')
+                                    .replace('-', '')
+                                    .replace(' ', '')
+                                    .replace(':', '')
+                                    .replace(':', '') -
+                                    0)
+                            )
+                        })
+                        echartsData.value = {
+                            options: {
+                                title: [
+                                    {
+                                        left: '10%',
+                                        top: 0,
+                                        text: chartTitle.value
+                                    }
+                                ],
+                                toolbox: {
+                                    feature: {
+                                        // saveAsImage: {
+                                        //     title: '保存'
+                                        // },
+                                        // dataView: { readOnly: false },
+                                        // }
+                                    }
+                                },
+                                tooltip: {
+                                    trigger: 'axis',
+                                    axisPointer: {
+                                        type: 'shadow'
+                                    },
+                                    formatter: function (params: any) {
+                                        var res = params[0].name + '<br/>'
+                                        for (var i = 0, l = params.length; i < l; i++) {
+                                            params[i].unit =
+                                                echartsData.value.options.yAxis[
+                                                    echartsData.value.options.series[params[i].seriesIndex].yAxisIndex
+                                                ]?.name
+                                            res +=
+                                                params[i].seriesName +
+                                                '   ' +
+                                                `<div style="width:16px;height:16px;float:left;background:${params[i].color};border-radius:50%;margin:0 5px;margin:0 15px"></div>` +
+                                                `<div style='float:right;min-width:120px;padding-left:20px;'>${params[i].value} ${params[i].unit}</div><br/>`
+                                        }
+                                        return res
+                                    }
+                                },
+                                legend: {
+                                    //legend使用iconfont图标
+                                    data: [],
+                                    itemWidth: 20,
+                                    itemHeight: 10,
+                                    itemGap: 15,
+                                    type: 'scroll', // 开启滚动分页
+                                    // orient: 'vertical', // 垂直排列
+                                    right: '13%', // 位置调整
+                                    top: 0,
+                                    bottom: 20,
+                                    width: 400,
+                                    height: 50
+                                },
+                                grid: {
+                                    left: '3%',
+                                    right: '3%',
+                                    bottom: '10%',
+                                    top: '5%',
+                                    containLabel: true
+                                },
+                                xAxis: [
+                                    {
+                                        type: 'category',
+                                        name: '\n\n\n\n\n时间',
+                                        axisLabel: {
+                                            color: '#A9AEB2',
+                                            fontSize: 12,
+                                            show: function (index: any, value: any) {
+                                                // 检查数据中是否存在这个时间点
+                                                // return data.some(item:any => item[0] === value)
+                                            }
+                                        },
+                                        nameTextStyle: {
+                                            right: 0
+                                        },
+                                        data: Array.from(new Set(xAxis)),
+                                        axisLine: {
+                                            lineStyle: {
+                                                color: '#43485E'
+                                            }
+                                        }
+                                    }
+                                ],
+                                yAxis: [
+                                    {
+                                        type: 'value',
+                                        name: unitList[0],
+                                        axisLabel: {
+                                            color: '#000',
+                                            fontSize: 14
+                                        },
+                                        axisTick: {
+                                            show: true
+                                        },
+                                        axisLine: {
+                                            show: true,
+                                            lineStyle: {
+                                                color: colorList[0]
+                                            }
+                                        },
+                                        nameTextStyle: {
+                                            color: '#000',
+                                            fontSize: '14'
+                                        },
+                                        splitLine: {
+                                            show: false,
+                                            lineStyle: {
+                                                color: ['#43485E'],
+                                                width: 1,
+                                                type: 'solid'
+                                            }
+                                        }
+                                    }
+                                ],
+                                series: []
+                            }
+                        }
+                        //处理多y轴
+                        if (unitList.length != 0 && unitList.length > 1) {
+                            // echartsData.value.options.yAxis[0].yAxisIndex = 0
+                            unitList.map((item: any, index: any) => {
+                                if (index != unitList.length - 1) {
+                                    echartsData.value.options.yAxis.push({
+                                        type: 'value',
+                                        position: 'right',
+                                        offset: index * 80, // y轴位置的偏移量
+                                        name: unitList[index + 1],
+                                        axisLabel: {
+                                            color: '#000',
+                                            fontSize: 14
+                                        },
+                                        axisTick: {
+                                            show: true
+                                        },
+                                        axisLine: {
+                                            show: true,
+                                            lineStyle: {
+                                                color: colorList[index + 1]
+                                            }
+                                        },
+                                        nameTextStyle: {
+                                            color: '#000',
+                                            fontSize: '14'
+                                        },
+                                        splitLine: {
+                                            show: false,
+                                            lineStyle: {
+                                                color: ['#43485E'],
+                                                width: 1,
+                                                type: 'solid'
+                                            }
+                                        }
+                                        // yAxisIndex: index + 1
+                                    })
+                                }
+                            })
+                        }
+
+                        list.map((item: any, index: any) => {
+                            item.map((vv: any, indexs: any) => {
+                                //处理legend
+                                if (historyDataList.value.length != 0) {
+                                    echartsData.value.options.legend.data.push({
+                                        name: vv.phase + '相' + vv.showName,
+                                        icon: iconThree
+                                    })
+                                }
+                                if (
+                                    unitList.findIndex((item: any) => {
+                                        return item == vv.unit
+                                    }) != -1
+                                ) {
+                                    vv.yAxisIndex = unitList.findIndex((item: any) => {
+                                        return item == vv.unit
+                                    })
+                                } else {
+                                    vv.yAxisIndex = 0
+                                }
+
+                                //series数据
+                                echartsData.value.options.series.push({
+                                    name: vv.phase + '相' + vv.showName,
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'none',
+                                    emphasis: {
+                                        focus: 'series'
+                                    },
+                                    itemStyle: {},
+                                    //数据
+                                    data: historyDataList.value
+                                        .map((kk: any) => {
+                                            if (kk.statisticalName == vv.name) {
+                                                return kk.statisticalData
+                                            } else {
+                                                return ''
+                                            }
+                                        })
+                                        .filter((kk: any) => kk !== ''),
+                                    //数据对应的y轴
+                                    // yAxisIndex:0,
+                                    yAxisIndex: vv.yAxisIndex
+                                })
+                            })
+                        })
+                        //设置数据项颜色
+                        echartsData.value.options.series.map((item: any, index: any) => {
+                            item.itemStyle = {
+                                normal: {
+                                    color: colorList[index],
+                                    lineStyle: {
+                                        color: colorList[index]
+                                    }
+                                }
+                            }
+                        })
+                        loading.value = false
+                    }
+                })
+                .catch(error => {
+                    loading.value = false
+                })
+        } catch (error) {
+            loading.value = false
+        }
+    }
+}
+//导出
+const historyChart = ref()
+// const chart: any = ref(null)
+// chart.value = echarts.init(historyChart.value)
+const handleExport = async () => {
+    const planCsv = ref('')
+    const chartsCsv = ref('')
+
+    if (deviceData.value.records && deviceData.value.records.length != 0) {
+        let csv = '',
+            obj = {}
+        obj = deviceData.value.records.find((item: any) => {
+            return item.id == activeName.value
+        })
+        if (obj) {
+            //测试是否与变量名长度有关系
+            let cell1 = deviceData.value.itemName,
+                cell2 = deviceData.value.describe,
+                cell3 = obj?.itemName,
+                cell4 = obj?.statisticalInterval,
+                cell5 = voltageLevelList.find(vv => {
+                    return vv.id == obj.voltageLevel
+                })?.name,
+                cell6 = volConTypeList.find(vv => {
+                    return vv.id == obj.volConType
+                })?.name,
+                cell7 = obj.capacitySscmin,
+                cell8 = obj.capacitySi,
+                cell9 = obj.capacitySscb,
+                cell10 = obj.capacitySt,
+                cell11 = obj.pt && obj.pt1 ? obj.pt / obj.pt1 + '\b' : '/',
+                cell12 = obj.ct && obj.ct1 ? obj.ct / obj.ct1 + '\b' : '/',
+                cell13 = obj.startTime ? obj.startTime : '/',
+                cell14 = obj.endTime ? obj.endTime : '/',
+                cell15 = obj.location
+            csv = `方案测试项信息,
+        方案名称,      ${cell1},
+        方案描述,      ${cell2},
+        测试项名称,      ${cell2},
+        测量间隔,      ${cell4 + '分钟'},
+        电压等级,      ${cell5},
+        接线方式,      ${cell6},
+        最小短路容量,      ${cell7 + 'MVA'},
+        用户协议容量,      ${cell8 + 'MVA'},
+        基准短路容量,      ${cell9 + 'MVA'},
+        供电设备容量,      ${cell10 + 'MVA'},
+        PT变比,       ${cell11},
+        CT变比,       ${cell12},
+        起始时间,      ${cell13},
+        结束时间,      ${cell14},
+        监测位置,      ${cell15}\n,
+        `
+            planCsv.value = csv
+        }
+    }
+
+    if (historyDataList.value.length != 0) {
+        let xAxis: any = []
+        let timeList: any = []
+        historyDataList.value.map((item: any) => {
+            timeList.push(item.time)
+        })
+        xAxis = timeList.sort((a: any, b: any) => {
+            return (
+                a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
+                0 -
+                (b.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') - 0)
+            )
+        })
+        xAxis = Array.from(new Set(xAxis))
+        // 使用这个函数转换数据为CSV格式
+        let csv: any = ''
+        const list = echartsData.value.options.series
+        csv = convertToCSV([], [])
+        chartsCsv.value = csv
+        // 如果你想提供下载链接
+        // const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+        // const link = document.createElement('a')
+        // link.href = URL.createObjectURL(blob)
+        // link.download = '历史趋势.csv'
+        // link.click()
+        function convertToCSV(data: any, key: any) {
+            // 添加列头
+            let title = '统计时间,'
+            list.map((item: any, index: any) => {
+                index == list.length - 1 ? (title += `${item.name}\n`) : (title += `${item.name},`)
+            })
+            let csv = ''
+            csv = title
+            // 遍历数据并添加到CSV字符串中
+            const listLength = list.length
+            list[0].data.map((vv: any, indexs: any) => {
+                let strs = '',
+                    count = null
+                list.map((item: any, index: any) => {
+                    if (index == 0) {
+                        count = index
+                    }
+                    index == list.length - 1
+                        ? (strs += list[index].data[indexs])
+                        : (strs += list[index].data[indexs] + ',')
+                })
+                if (count == 0 && xAxis[indexs]) {
+                    csv += `${xAxis[indexs]},` + strs + '\n'
+                }
+            })
+            return csv
+        }
+    }
+
+    let csvs = ''
+    if (chartsCsv.value) {
+        csvs = planCsv.value + '历史趋势数据,\n\n' + chartsCsv.value
+    } else {
+        csvs = planCsv.value
+    }
+
+    // 如果你想提供下载链接
+    const blob = new Blob([csvs], { type: 'text/csv;charset=utf-8;' })
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    let obj = deviceData.value.records.find((item: any) => {
+        return item.id == activeName.value
+    })
+    const date = window.XEUtils.toDateString(new Date(), 'yyyyMMdd HHmmss').replace(' ', '_')
+    link.download = `${deviceData.value.itemName}_${obj?.itemName}_${date}.csv`
+    link.click()
+    return
+}
+const countData: any = ref([])
+
+//根据选择的指标处理谐波次数
+const initSearchFormIndexAndCount = (list: any) => {
+    if (list.length != 0) {
+        list.map((item: any, index: any) => {
+            if (!countData.value[index]) {
+                countData.value[index] = {
+                    index: item,
+                    countOptions: [],
+                    count: [],
+                    name: indexOptions.value.find((vv: any) => {
+                        return vv.id == item
+                    })?.name
+                }
+            }
+            legendDictList.value?.selectedList?.map((vv: any, vvs: any) => {
+                //查找相等的指标
+                if (item == vv.dataType) {
+                    vv.eleEpdPqdVOS.map((kk: any, kks: any) => {
+                        if (kk.harmStart && kk.harmEnd) {
+                            range(0, 0, 0)
+                            countData.value[index].countOptions = range(kk.harmStart, kk.harmEnd, 2)
+                        }
+                    })
+                }
+            })
+        })
+    }
+}
+watch(
+    () => searchForm.value.index,
+    (val: any, oldval: any) => {
+        if (val) {
+            initSearchFormIndexAndCount(val)
+            if (val == 0) {
+                countData.value = []
+            }
+            countData.value.map((item: any, key: any) => {
+                if (
+                    val.findIndex((vv: any) => {
+                        return vv == item.index
+                    }) == -1
+                ) {
+                    countData.value.splice(key, 1)
+                }
+            })
+        }
+    },
+    {
+        deep: true,
+        immediate: true
+    }
+)
+// watch(
+//     () =>  trendRequestData.value,
+//     (val: any, oldval: any) => {
+//         if (val) {
+//             init()
+//         }
+//     },
+//     {
+//         deep: true,
+//         immediate: true
+//     }
+// )
+onMounted(() => {})
+defineExpose({ getTrendRequest })
 </script>
-<style lang='less' scoped>
+
+<style lang="scss" scoped>
+.history_header {
+    display: flex;
+    // flex-wrap: wrap;
+    #history_select {
+        width: 95%;
+        display: flex;
+        justify-content: flex-start;
+        overflow-x: auto;
+        height: 45px;
+        // flex-wrap: wrap;
+        .el-form-item {
+            flex: none;
+            max-width: 380px !important;
+        }
+        .el-select {
+            margin-right: 10px;
+        }
+    }
+
+    // #history_select::-webkit-scrollbar {
+    //     width: 0 !important;
+    //     display: none !important;
+    // }
+
+    .history_searchBtn {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 3px;
+    }
+}
+
+.history_chart {
+    width: 100%;
+    height: calc(100vh - 400px) !important;
+    // flex: 1;
+    margin-top: 10px;
+}
 </style>

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

@@ -853,6 +853,7 @@ onMounted(() => {})
         display: flex;
         justify-content: flex-start;
         overflow: auto;
+        height: 45px;
         // flex-wrap: wrap;
         .el-form-item {
             flex: none;
@@ -863,15 +864,16 @@ onMounted(() => {})
         }
     }
 
-    #history_select::-webkit-scrollbar {
+    // #history_select::-webkit-scrollbar {
-        width: 0 !important;
+    //     width: 0 !important;
-        display: none !important;
+    //     display: none !important;
-    }
+    // }
 
     .history_searchBtn {
         flex: 1;
         display: flex;
         justify-content: flex-end;
+        margin-top: 3px;
     }
 }