设计辽宁页面修改冀北技术监督问题

2024-08-14 11:34:13 +08:00
parent 13432b351d
commit fd5458105e
17 changed files with 4300 additions and 36479 deletions
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
    "diagram-js": "^11.4.1",
    "diagram-js-minimap": "^2.0.4",
    "echarts": "^5.4.3",
-        "echarts-gl": "^2.0.9",
+    "echarts-gl": "^1.1.0",
    "echarts-liquidfill": "^3.1.0",
    "echarts4": "npm:echarts@^4.9.0",
    "element-plus": "^2.7.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/assets/img/YX.png
+++ b/src/assets/img/YX.png
--- a/src/assets/img/YX1.png
+++ b/src/assets/img/YX1.png
--- a/src/assets/map/中国.json
+++ b/src/assets/map/中国.json
--- a/src/assets/map/浙江.json
+++ b/src/assets/map/浙江.json
--- a/src/components/echarts/MyEchartMap.vue
+++ b/src/components/echarts/MyEchartMap.vue
@@ -8,7 +8,10 @@

 <script setup lang="ts">
 import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
-import * as echarts from 'echarts4'
+import * as echarts from 'echarts'
+import 'echarts-gl'
+import 'echarts-liquidfill'
+import 'echarts/lib/component/dataZoom'
 import { useDictData } from '@/stores/dictData'
 const dictData = useDictData()
 const props = defineProps(['options'])
@@ -22,7 +25,7 @@ const fetchConfig = async (name: string) => {
 }
 // fetchConfig()

-const emit = defineEmits(['getRegionByRegion', 'eliminate'])
+const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
 onMounted(() => {})

 const GetEchar = async (name: string) => {
@@ -131,6 +134,7 @@ const GetEchar = async (name: string) => {
                    borderWidth: 0
                }
            }
+
            // regions: [
            //     {
            //         name: '南海诸岛',
@@ -146,23 +150,35 @@ const GetEchar = async (name: string) => {
            //     }
            // ]
        },
+
        ...props.options.options
    }
    if (props.options.visualMap) {
        option.visualMap = props.options.visualMap
    }
+    if (props.options.geo3D) {
+        option.geo = null
+        option.geo3D = {
+            map: name,
+            ...(props.options.geo3D || null)
+        }
+    }
    myCharts.value.setOption(option)
    window.addEventListener('resize', resizeHandler)

    // 点击事件
    myCharts.value.off('click')
    myCharts.value.on('click', (e: any) => {
+        if (props.options.geo3D) {
+            emit('clickMap', e)
+        } else {
            // if (name == dictData.state.area?.[0].name  && e.componentIndex == 0) {
            if (name == '中国' && e.componentIndex == 0) {
                MapReturn(e.name)

                // console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~  MapReturn(e.name):', MapReturn(e.name))
            }
+        }
    })
 }

@@ -215,6 +231,6 @@ watch(
    left: 10px;
    z-index: 2;
    font-size: 20px;
-    color: var(--el-color-primary) !important;;
+    color: var(--el-color-primary) !important;
 }
 </style>
--- a/src/components/tree/pqs/pointTree.vue
+++ b/src/components/tree/pqs/pointTree.vue
@@ -68,16 +68,16 @@ const loadData = () => {
            ]
        }
        res.data.forEach((item: any) => {
-            item.icon = 'fa-solid fa-synagogue'
+            item.icon = 'el-icon-HomeFilled'
            item.color = config.getColorVal('elementUiPrimary')
            item.children.forEach((item2: any) => {
-                item2.icon = 'fa-solid fa-city'
+                item2.icon = 'el-icon-CollectionTag'
                item.color = config.getColorVal('elementUiPrimary')
                item2.children.forEach((item3: any) => {
-                    item3.icon = 'fa-solid fa-building'
+                    item3.icon = 'el-icon-Flag'
                    item3.color = config.getColorVal('elementUiPrimary')
                    item3.children.forEach((item4: any) => {
-                        item4.icon = 'fa-solid fa-tower-observation'
+                        item4.icon = 'el-icon-OfficeBuilding'
                        item4.color = config.getColorVal('elementUiPrimary')
                        item4.children.forEach((item5: anyObj) => {
                            item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -381,7 +381,7 @@ body,
    height: 100%;
    width: 100%;
    background: #fff;
-    // z-index: 2;
+    z-index: 10;
 }
 .bjs-powered-by {
    display: none;
--- a/src/views/pqs/harmonicMonitoring/reportForms/word/index.vue
+++ b/src/views/pqs/harmonicMonitoring/reportForms/word/index.vue
@@ -103,8 +103,8 @@ const exportEvent = () => {
    let form = new FormData()
    form.append('lineIndex', dotList.value.id)
    form.append('name', dotList.value.name)
-    form.append('crmName', tableStore.table.params.crmName)
-    form.append('reportNumber', tableStore.table.params.reportNumber)
+    form.append('crmName', tableStore.table.params.crmName||'')
+    form.append('reportNumber', tableStore.table.params.reportNumber||'')
    form.append('type', '0')
    form.append('startTime', tableStore.table.params.startTime)
    form.append('endTime', tableStore.table.params.endTime)
--- a/src/views/pqs/supervise/harmonicSurvey/components/planAdd.vue
+++ b/src/views/pqs/supervise/harmonicSurvey/components/planAdd.vue
@@ -78,6 +78,7 @@
                    clearable
                    filterable
                    collapse-tags
+                    collapse-tags-tooltip
                    placeholder="请选择关联电站"
                />
                <!-- <el-tree-select
@@ -247,14 +248,18 @@ const cancelFn = () => {
    planAddition.value = false
 }
 const treeList = ref()
+const treeListCgy = ref()
 const treeData = ref()
 const loadData = () => {
    initDetpStataionTree({ orgId: dictData.state.area[0].id }).then(res => {
        treeList.value = res.data
+        initDetpStataionTree({ orgId: 'a3069759b0b6072c99cf9a7af6c162e9' }).then(res => {
+            treeListCgy.value = res.data
            setTimeout(() => {
                changeArea()
            }, 10)
        })
+    })
 }

 const detailById = (id: any) => {
@@ -310,11 +315,18 @@ const submitFn = (flag: boolean) => {
 // 修改关联电站
 const changeArea = () => {
    let list: any = []
+
    treeList.value.forEach((item: any) => {
        if (item.id == form.value.deptId) {
            list.push(item)
+            if (item.id != treeListCgy.value[0].id && item.name != '冀北电力有限公司' && item.name != '超高压') {
+                list.push(...treeListCgy.value)
+            }
        } else {
            list.push(item.children.filter((v: any) => v.id == form.value.deptId)[0])
+            if (form.value.deptId != treeListCgy.value[0].id) {
+                list.push(...treeListCgy.value)
+            }
        }
    })
    treeData.value = list
--- a/src/views/pqs/supervise/highAndLowPressure/components/waveform.vue
+++ b/src/views/pqs/supervise/highAndLowPressure/components/waveform.vue
@@ -0,0 +1,25 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="越限详情" width="50%" draggable>
+        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
+            <vxe-column field="num2" title="指标" />
+            <vxe-column field="num2" title="时间" />
+            <vxe-column field="num3" title="最小值" />
+            <vxe-column field="num3" title="最大值" />
+            <vxe-column field="num3" title="平均值" />
+            <vxe-column field="num3" title="cp95值" />
+            <vxe-column field="num3" title="国际限值" />
+        </vxe-table>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+const dialogVisible = ref(false)
+const tableData = ref([])
+const open = () => {
+    dialogVisible.value = true
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
--- a/src/views/pqs/supervise/highAndLowPressure/index.vue
+++ b/src/views/pqs/supervise/highAndLowPressure/index.vue
@@ -0,0 +1,320 @@
+<template>
+    <div class="default-main">
+        <TableHeader datePicker area ref="header">
+            <!-- <template v-slot:select>
+               
+            </template> -->
+        </TableHeader>
+        <div v-loading="tableStore.table.loading">
+            <el-row :gutter="10" class="pd10">
+                <el-col :span="11" style="position: relative">
+                    <el-card>
+                        <el-radio-group v-model="tableStore.table.params.radio" class="group">
+                            <el-radio-button label="风电场" value="1" />
+                            <el-radio-button label="光伏电站" value="2" />
+                        </el-radio-group>
+                        <MyEchartMap
+                            ref="EchartMap"
+                            :options="echartMapList"
+                            class="map"
+                            @eliminate="eliminate"
+                            @getRegionByRegion="getRegionByRegion"
+                            @clickMap="clickMap"
+                        />
+                    </el-card>
+                </el-col>
+                <el-col :span="13">
+                    <el-card>
+                        <div class="tall">
+                            <h3 class="mb10">暂降列表</h3>
+                            <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
+                                <vxe-column field="qy" title="风电场 " show-overflow-tooltip></vxe-column>
+                                <vxe-column field="jcd" title="暂降发生时刻"></vxe-column>
+                                <vxe-column field="zc" title="暂降(骤升)幅值(%)" sortable></vxe-column>
+                                <vxe-column field="zc" title="暂降原因" sortable></vxe-column>
+                                <vxe-column field="zc" title="严重度" sortable></vxe-column>
+                                <vxe-column  title="操作" >
+                                    <template #default="{ row }">
+                                        <el-button type="text" size="small" link>查看波形</el-button>
+                                    </template>
+                                </vxe-column>
+                            </vxe-table>
+                        </div>
+                    </el-card>
+                    <el-card class="mt10">
+                        <div class="tall">
+                            <h3 class="mb10">暂降波形</h3>
+                        </div>
+                    </el-card>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import TableHeader from '@/components/table/header/index.vue'
+
+import { useDictData } from '@/stores/dictData'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
+import TableStore from '@/utils/tableStore'
+import { ref, onMounted, provide } from 'vue'
+import { mainHeight } from '@/utils/layout'
+defineOptions({
+    name: 'highAndLowPressure'
+})
+const EchartMap = ref()
+const dictData = useDictData()
+const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+const echartMapList: any = ref({})
+const titleA = ref('')
+const header = ref()
+const distributionData: any = ref([])
+
+const tableStore = new TableStore({
+    url: '/event-boot/area/getAreaLineDetail',
+    method: 'POST',
+    column: [],
+    loadCallback: () => {
+        titleA.value = tableStore.table.params.statisticalType.name
+        header.value.areaRef.change()
+        // 处理地图数据
+        map(tableStore.table.data)
+        tabulation(tableStore.table.data)
+        EchartMap.value.GetEchar(header.value.areaRef.areaName)
+    }
+})
+provide('tableStore', tableStore)
+tableStore.table.params.radio = '1'
+// tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'event-boot'
+
+// 地图点击事件
+const getRegionByRegion = (list: any) => {
+    tableStore.table.params.deptIndex = list.id
+    tableStore.onTableAction('search', {})
+}
+// 消除点
+const eliminate = (name: string) => {
+    echartMapList.value.options.series = []
+    EchartMap.value.GetEchar(name)
+}
+
+// 地图数处理
+const map = (res: any) => {
+    echartMapList.value = {
+        title: {
+            text: '高/低电压穿越'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: function (params) {
+                if (params.seriesType == 'bar3D') {
+                    return [params.seriesName, params.name + '：' + params.value[2] + (params.value[3] || '')].join(
+                        '<br />'
+                    )
+                }
+            }
+        },
+
+        legend: {
+            selectedMode: false
+        },
+        geo3D: {
+            show: true,
+            name: '浙江',
+            itemStyle: {
+                color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-3'),
+                borderWidth: 1,
+                borderColor: '#fff'
+            },
+            emphasis: {
+                label: { show: true, fontSize: 16 },
+                itemStyle: {
+                    color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-7')
+                }
+            },
+            viewControl: {
+                alpha: 60,
+                distance: 120
+            },
+            label: {
+                show: true,
+                color: '#fff',
+                fontSize: 16,
+                textStyle: {
+                    color: '#fff',
+
+                    backgroundColor: '#fff'
+                }
+            },
+
+            data: [
+                { name: '目标数', field: 'mbs', unit: '万人' },
+                { name: '完成数', field: 'wcs', unit: '万人' }
+            ]
+        },
+        options: {
+            series: [
+                {
+                    name: '低压',
+                    type: 'bar3D',
+                    coordinateSystem: 'geo3D',
+                    shading: 'lambert',
+                    label: {
+                        show: true,
+                        position: 'top',
+                        formatter: params => {
+                            return params.value[2] || ''
+                        }
+                    },
+                    data: [
+                        {
+                            adcode: 330100,
+                            name: '沈阳',
+                            wcs: 10,
+                            mbs: 50,
+                            wcl: 100,
+                            value: [123.364125, 41.722823, 50, '']
+                        },
+                        {
+                            adcode: 330200,
+                            name: '葫芦岛',
+                            wcs: 10,
+                            mbs: 20,
+                            wcl: 80,
+                            value: [120.80488, 40.816372, 20, '']
+                        },
+                        {
+                            adcode: 330300,
+                            name: '本溪',
+                            wcs: 10,
+                            mbs: 30,
+                            wcl: 100,
+                            value: [124.024811, 41.428257, 30, '']
+                        },
+                        {
+                            adcode: 330400,
+                            name: '大连',
+                            lng: '120.750865',
+                            lat: '30.662653',
+                            wcs: 10,
+                            mbs: 40,
+                            wcl: 100,
+                            value: [121.57391, 38.947468, 40, '']
+                        }
+                    ],
+                    barSize: 1,
+                    minHeight: 1,
+                    itemStyle: {
+                        color: '#77DA63'
+                    },
+                    emphasis: {
+                        label: { show: true }
+                    },
+                    zlevel: 1
+                },
+                {
+                    name: '高压',
+                    type: 'bar3D',
+                    coordinateSystem: 'geo3D',
+                    shading: 'lambert',
+                    label: {
+                        show: true,
+                        position: 'top',
+                        formatter: params => {
+                            return params.value[2] || ''
+                        }
+                    },
+                    data: [
+                        {
+                            adcode: 330100,
+                            name: '沈阳',
+                            wcs: 10,
+                            mbs: 50,
+                            wcl: 100,
+                            value: [123.464125, 41.722823, 50, '']
+                        },
+                        {
+                            adcode: 330200,
+                            name: '葫芦岛',
+                            wcs: 10,
+                            mbs: 20,
+                            wcl: 80,
+                            value: [120.90488, 40.816372, 20, '']
+                        },
+                        {
+                            adcode: 330300,
+                            name: '本溪',
+                            wcs: 10,
+                            mbs: 30,
+                            wcl: 100,
+                            value: [124.124811, 41.428257, 30, '']
+                        },
+                        {
+                            adcode: 330400,
+                            name: '大连',
+
+                            wcs: 10,
+                            mbs: 40,
+                            wcl: 100,
+                            value: [121.67391, 38.947468, 40, '']
+                        }
+                    ],
+                    barSize: 1,
+                    minHeight: 1,
+                    itemStyle: {
+                        color: '#FFBF00'
+                    },
+                    emphasis: {
+                        label: { show: true }
+                    }
+                }
+            ]
+        }
+    }
+}
+
+// 表格数据处理
+const tabulation = (res: any) => {
+    distributionData.value = []
+    for (var i = 0; i < res.areaValue.length; i++) {
+        distributionData.value.push({
+            qy: res.areaValue[i][0],
+            jcd: res.areaValue[i][1],
+            zc: res.areaValue[i][2],
+            zd: res.areaValue[i][3]
+        })
+    }
+}
+// 点击地图
+const clickMap = (e: any) => {
+    console.log('🚀 ~ clickMap ~ e:', e)
+}
+onMounted(() => {
+    tableStore.index()
+})
+const layout = mainHeight(83) as any
+const layout1 = mainHeight(93) as any
+</script>
+<style lang="scss" scoped>
+.map {
+    height: calc(v-bind('layout1.height') - 30px);
+}
+.tall {
+    height: calc((v-bind('layout1.height') - 60px) / 2);
+}
+.group {
+    position: absolute;
+    top: 15px;
+    right: 20px;
+    z-index: 10;
+}
+
+:deep(.el-card__body) {
+    padding: 10px;
+}
+</style>
--- a/src/views/pqs/supervise/newEnergyAnalysis/components/detail.vue
+++ b/src/views/pqs/supervise/newEnergyAnalysis/components/detail.vue
@@ -0,0 +1,26 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="越限详情" width="50%" draggable>
+        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
+            <vxe-column field="num2" title="指标" />
+            <vxe-column field="num2" title="时间" />
+            <vxe-column field="num3" title="最小值" />
+            <vxe-column field="num3" title="最大值" />
+            <vxe-column field="num3" title="平均值" />
+            <vxe-column field="num3" title="cp95值" />
+            <vxe-column field="num3" title="国际限值" />
+   
+        </vxe-table>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+const dialogVisible = ref(false)
+const tableData = ref([])
+const open = () => {
+    dialogVisible.value = true
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
--- a/src/views/pqs/supervise/newEnergyAnalysis/components/timePopUpBox.vue
+++ b/src/views/pqs/supervise/newEnergyAnalysis/components/timePopUpBox.vue
@@ -0,0 +1,106 @@
+<template>
+    <div class="dictiontary-list-detail child-router">
+        <TableHeader :showSearch="false">
+            <template #select>
+                <el-form-item label="">
+                    <span class="text-large font-600 mr-3">{{ props.timePopUpBox.num }}</span>
+                </el-form-item>
+                <el-form-item>
+                    <el-radio-group v-model="radio2">
+                        <el-radio-button label="基础数据" value="1" />
+                        <el-radio-button label="谐波电压" value="2" />
+                        <el-radio-button label="谐波电流" value="3" />
+                        <el-radio-button label="间谐波电压含有率" value="4" />
+                    </el-radio-group>
+                </el-form-item>
+            </template>
+            <template #operation>
+                <el-button icon="el-icon-Back" @click="$emit('close')">返回</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" isGroup />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage } from 'element-plus'
+import { dictDataDelete } from '@/api/system-boot/dicData'
+
+defineOptions({
+    name: 'setting/dictionary/list/detail'
+})
+const radio2 = ref('1')
+interface Props {
+    timePopUpBox: anyObj
+}
+const props = withDefaults(defineProps<Props>(), {
+    timePopUpBox: () => {
+        return {}
+    }
+})
+const popupEditRef = ref()
+const tableStore = new TableStore({
+    url: '/user-boot/function/getRouteMenu',
+    method: 'GET',
+    column: [
+        { title: '指标', field: 'name' },
+        {
+            title: '最小值',
+            field: 'code',
+            children: [
+                { title: 'A', field: 'num' },
+                { title: 'B', field: 'num' },
+                { title: 'C', field: 'num' }
+            ]
+        },
+        {
+            title: '最大值',
+            field: 'sort',
+            children: [
+                { title: 'A', field: 'num' },
+                { title: 'B', field: 'num' },
+                { title: 'C', field: 'num' }
+            ]
+        },
+        {
+            title: '平均值',
+            field: 'value',
+            children: [
+                { title: 'A', field: 'num' },
+                { title: 'B', field: 'num' },
+                { title: 'C', field: 'num' }
+            ]
+        },
+        {
+            title: 'cp95值',
+            field: 'levelName',
+            children: [
+                { title: 'A', field: 'num' },
+                { title: 'B', field: 'num' },
+                { title: 'C', field: 'num' }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        tableStore.table.data = [
+            { name: '电压偏差(%)', num: 0.0 },
+            { name: '谐波电压(%)', num: 0.0 },
+            { name: '谐波电流(%)', num: 0.0 },
+            { name: '三相电压不平衡度(%)', num: 0.0 },
+            { name: '电压波动(%)', num: 0.0 },
+            { name: '闪变(%)', num: 0.0 },
+            { name: '间谐波电压含有率(%)', num: 0.0 },
+            { name: '电流不平衡度', num: 0.0 }
+        ]
+    }
+})
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+</script>
--- a/src/views/pqs/supervise/newEnergyAnalysis/index.vue
+++ b/src/views/pqs/supervise/newEnergyAnalysis/index.vue
@@ -0,0 +1,420 @@
+<template>
+    <div class="default-main" :style="height">
+        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
+            <pane :size="size">
+                <PointTree
+                    :default-expand-all="false"
+                    @node-click="handleNodeClick"
+                    @init="handleNodeClick"
+                ></PointTree>
+            </pane>
+            <pane :style="height" style="background: #fff">
+                <TableHeader ref="TableHeaderRef" datePicker>
+                    <template v-slot:select>
+                        <!-- <el-form-item label="有功功率区间">
+                            <el-select
+                                v-model="power"
+                                multiple
+                                collapse-tags
+                                collapse-tags-tooltip
+                                filterable
+                                placeholder="请选择有功功率区间"
+                            >
+                                <el-option
+                                    v-for="item in powerList"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="各指标越限">
+                            <el-select
+                                v-model="index"
+                                multiple
+                                collapse-tags
+                                collapse-tags-tooltip
+                                filterable
+                                placeholder="请选择各指标越限"
+                            >
+                                <el-option
+                                    v-for="item in indexList"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                />
+                            </el-select>
+                        </el-form-item> -->
+                    </template>
+                    <template #operation>
+                        <el-button icon="el-icon-Download" type="primary">生成报表</el-button>
+                    </template>
+                </TableHeader>
+
+                <div class="container pd10">
+                    <div>
+                        <el-card class="cardBox">
+                            <div class="mb5" style="display: flex; justify-content: space-between">
+                                <h3>有功功率趋势分析</h3>
+                                <div>
+                                    <span>图例:　</span>
+                                    <span style="color: red">稳态越限　</span>
+                                    <span style="color: green">合格</span>
+                                </div>
+                            </div>
+                            <el-card class="card-top">
+                                <div
+                                    v-for="item in powerList1"
+                                    class="pd10"
+                                    style="cursor: pointer"
+                                    :class="flag == item.label ? 'hoverBox' : ''"
+                                    @click="handleClick(item.label)"
+                                >
+                                    <div style="font-size: 24px; font-weight: 700">
+                                        <span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
+                                            {{ item.quantity }}
+                                        </span>
+                                        <span style="font-size: 14px; font-weight: 500">个</span>
+                                    </div>
+                                    <div>
+                                        {{ item.label }}
+                                    </div>
+                                </div>
+                            </el-card>
+
+                            <el-card class="card-top mt15">
+                                <div
+                                    v-for="item in powerList2"
+                                    class="pd10"
+                                    style="cursor: pointer"
+                                    :class="flag == item.label ? 'hoverBox' : ''"
+                                    @click="handleClick(item.label)"
+                                >
+                                    <div style="font-size: 24px; font-weight: 700">
+                                        <span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
+                                            {{ item.quantity }}
+                                        </span>
+                                        <span style="font-size: 14px; font-weight: 500">个</span>
+                                    </div>
+                                    <div>
+                                        {{ item.label }}
+                                    </div>
+                                </div>
+                            </el-card>
+                        </el-card>
+                    </div>
+                    <el-card class="echart">
+                        <my-echart :options="options" style="height: 198px" />
+                    </el-card>
+                </div>
+                <div class="container mt10 ml10">
+                    <el-card class="box">
+                        <div :style="heightB" style="overflow-y: auto">
+                            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="tableData">
+                                <vxe-column field="num" title="时间" min-width="100px">
+                                    <template #default="{ row }">
+                                        <el-link type="primary" @click="timeClick(row)">{{ row.num }}</el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="num1" title="电压偏差(%)" />
+                                <vxe-column field="num2" title="谐波电压(%)" />
+                                <vxe-column field="num3" title="谐波电流(%)" />
+                                <vxe-column field="num4" title="三相电压不平衡度(%)" />
+                                <vxe-column field="num5" title="电压波动(%)" />
+                                <vxe-column field="num6" title="闪变(%)" />
+                                <vxe-column field="num7" title="间谐波电压含有率(%)" />
+                                <vxe-column field="num8" title="流不平衡度" />
+                                <vxe-column field="crossTheLine" title="越限情况">
+                                    <template #default="{ row }">
+                                        <el-link :type="row.crossTheLine === '越限' ? 'danger' : 'success'">
+                                            <span @click="detailClick(row)">{{ row.crossTheLine }}</span>
+                                        </el-link>
+                                    </template>
+                                </vxe-column>
+                                <vxe-column field="num3" title="操作">
+                                    <el-button type="primary" link>添加</el-button>
+                                </vxe-column>
+                            </vxe-table>
+                        </div>
+                    </el-card>
+
+                    <el-card class="box mr10">
+                        <div :style="heightB" style="overflow-y: auto">
+                            <div style="display: flex; justify-content: space-between">
+                                <span style="font-size: 16px; font-weight: 700">报告参数</span>
+                                <el-radio-group v-model="radio2" size="small">
+                                    <el-radio-button label="统计结果" value="1" />
+                                    <el-radio-button label="原始数据" value="2" />
+                                </el-radio-group>
+                            </div>
+                        </div>
+                    </el-card>
+                </div>
+            </pane>
+        </splitpanes>
+        <!-- 时间弹框 -->
+        <timePopUpBox
+            ref="timePopUpBoxRef"
+            :timePopUpBox="timePopUpBox"
+            @close="timePopUpBox = null"
+            v-if="timePopUpBox"
+        />
+        <!-- 越限详情 -->
+        <detail ref="detailRef" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, provide } from 'vue'
+import 'splitpanes/dist/splitpanes.css'
+import { Splitpanes, Pane } from 'splitpanes'
+import TableStore from '@/utils/tableStore'
+import PointTree from '@/components/tree/pqs/pointTree.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TimePopUpBox from './components/timePopUpBox.vue'
+import detail from './components/detail.vue'
+defineOptions({
+    name: 'newEnergyAnalysis'
+})
+const timePopUpBox = ref<anyObj | null>(null)
+const flag = ref('0%~10%')
+const radio2 = ref('1')
+const height = mainHeight(20)
+const heightB = mainHeight(395)
+const size = ref(0)
+const TableHeaderRef = ref()
+const detailRef = ref()
+const dotList: any = ref({})
+const power = ref([])
+const timePopUpBoxRef = ref()
+const index = ref([])
+
+const powerList1: any = ref([
+    {
+        label: '0%~10%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '越限',
+        value: '0%~10%'
+    },
+    {
+        label: '10%~20%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '10%~10%'
+    },
+    {
+        label: '20%~30%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '10%~30%'
+    },
+    {
+        label: '30%~40%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '30%~40%'
+    },
+    {
+        label: '40%~50%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '40%~50%'
+    }
+])
+const powerList2: any = ref([
+    {
+        label: '50%~60%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '50%~60%'
+    },
+    {
+        label: '60%~70%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '60%~70%'
+    },
+    {
+        label: '70%~80%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '合格',
+        value: '70%~80%'
+    },
+    {
+        label: '80%~90%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '越限',
+        value: '80%~90%'
+    },
+    {
+        label: '90%~100%',
+        quantity: '20',
+        percentage: '10%',
+        crossTheLine: '越限',
+        value: '90%~100%'
+    }
+])
+
+const tableData: any = ref([
+    {
+        num: '2023-08-08 09:00:00',
+        num1: '0',
+        num2: '1',
+        num3: '3',
+        num4: '2',
+        num5: '1',
+        num6: '1',
+        num7: '1',
+        num8: '0',
+        crossTheLine: '越限'
+    }
+])
+const options = ref({})
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {},
+    loadCallback: () => {}
+})
+// 卡片点击变色
+const handleClick = (e: string) => {
+    flag.value = e
+}
+// 点击时间
+const timeClick = (row: any) => {
+    timePopUpBox.value = row
+}
+// 点击越限
+const detailClick = () => {
+    detailRef.value.open()
+}
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    const dom = document.getElementById('navigation-splitpanes')
+    if (dom) {
+        size.value = Math.round((180 / dom.offsetHeight) * 100)
+    }
+    options.value = {
+        title: {
+            text: '占比',
+            left: '10px'
+        },
+        legend: {
+            show: false
+        },
+        tooltip: {},
+        xAxis: {
+            show: false
+        },
+        yAxis: {
+            show: false
+        },
+        dataZoom: { show: false },
+
+        options: {
+            series: [
+                {
+                    type: 'pie',
+                    center: ['50%', '50%'],
+                    selectedOffset: 30,
+                    label: {
+                        show: true,
+                        color: '#96A2B5',
+                        lineHeight: 8,
+                        minMargin: 10,
+                        formatter: function (e) {
+                            return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
+                        },
+                        rich: {
+                            name: {
+                                fontSize: 12
+                            },
+
+                            percent: {
+                                fontSize: 14,
+                                color: '#000',
+                                padding: [0, 0, 0, 5]
+                            }
+                        }
+                    },
+                    data: [
+                        ...powerList1.value.map(item => {
+                            return { value: item.quantity, name: item.label, percentage: item.percentage }
+                        }),
+                        ...powerList2.value.map(item => {
+                            return { value: item.quantity, name: item.label, percentage: item.percentage }
+                        })
+                    ]
+                }
+            ]
+        }
+    }
+})
+
+const handleNodeClick = (data: any, node: any) => {
+    dotList.value = data
+}
+</script>
+<style lang="scss">
+.splitpanes.default-theme .splitpanes__pane {
+    background: #eaeef1;
+}
+.cardBox {
+    .el-card__body {
+        padding: 5px 10px 10px;
+    }
+}
+.box {
+    .el-card__body {
+        padding: 10px;
+    }
+}
+.container {
+    display: grid;
+    grid-template-columns: 5fr 2.5fr;
+    gap: 20px;
+    .card-top {
+        background-color: var(--el-color-primary-light-9);
+        // color: #fff;
+        .el-card__body {
+            display: grid; /* 使用 Grid 布局 */
+            grid-template-columns: repeat(5, 1fr); /* 每行5列，每列占1份空间 */
+            text-align: center;
+            gap: 20px;
+            padding: 10px;
+            .img {
+                vertical-align: middle;
+                height: 16px;
+            }
+        }
+    }
+    .echart {
+        .el-card__body {
+            padding: 5px;
+        }
+    }
+}
+.el-card {
+    border-radius: 10px;
+}
+
+.hoverBox {
+    background-color: var(--el-color-primary-light-5);
+    border-radius: 10px;
+}
+</style>
--- a/src/views/system/reportForms/luckysheet.vue
+++ b/src/views/system/reportForms/luckysheet.vue
@@ -85,7 +85,7 @@ const beforeUpload = (file: any) => {
        }
        luckysheet.destroy()
        options.value.title = exportJson.info.name
-        console.log('🚀 ~ exportJson.sheets:', exportJson.sheets)
+     
        exportJson.sheets.forEach((item: any) => {
            // item.celldata = []
            // item.data = []
@@ -94,6 +94,7 @@ const beforeUpload = (file: any) => {
                k.v.ct.s ? (k.v.m = k.v.ct.s[0].v) : ''
            })
        })
+        
        options.value.data = exportJson.sheets
        luckysheet.create(options.value)
    })