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

package.json

@@ -1,88 +1,88 @@
 {
-    "name": "canneng-admin",
+  "name": "canneng-admin",
-    "private": true,
+  "private": true,
-    "version": "0.0.0",
+  "version": "0.0.0",
-    "type": "module",
+  "type": "module",
-    "scripts": {
+  "scripts": {
-        "dev": "vite --mode dev",
+    "dev": "vite --mode dev",
-        "dev:jibei": "vite --mode jibei",
+    "dev:jibei": "vite --mode jibei",
-        "build": "vite build --mode dev",
+    "build": "vite build --mode dev",
-        "build:jibei": "vite build --mode jibei",
+    "build:jibei": "vite build --mode jibei",
-        "preview": "vite preview"
+    "preview": "vite preview"
-    },
+  },
-    "dependencies": {
+  "dependencies": {
-        "@ant-design/colors": "^7.0.2",
+    "@ant-design/colors": "^7.0.2",
-        "@element-plus/icons-vue": "^2.3.1",
+    "@element-plus/icons-vue": "^2.3.1",
-        "@form-create/designer": "^3.1.3",
+    "@form-create/designer": "^3.1.3",
-        "@form-create/element-ui": "^3.1.24",
+    "@form-create/element-ui": "^3.1.24",
-        "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/fontawesome-free": "^6.5.1",
-        "@vue-office/docx": "^1.6.2",
+    "@vue-office/docx": "^1.6.2",
-        "@vue-office/excel": "^1.7.8",
+    "@vue-office/excel": "^1.7.8",
-        "@vue-office/pdf": "^2.0.2",
+    "@vue-office/pdf": "^2.0.2",
-        "@vueuse/core": "^10.7.0",
+    "@vueuse/core": "^10.7.0",
-        "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor": "^5.1.23",
-        "@wangeditor/editor-for-vue": "^5.1.12",
+    "@wangeditor/editor-for-vue": "^5.1.12",
-        "axios": "^1.6.2",
+    "axios": "^1.6.2",
-        "bpmn-js": "8.9.0",
+    "bpmn-js": "8.9.0",
-        "bpmn-js-properties-panel": "0.46.0",
+    "bpmn-js-properties-panel": "0.46.0",
-        "bpmn-js-token-simulation": "^0.10.0",
+    "bpmn-js-token-simulation": "^0.10.0",
-        "bpmn-moddle": "^6.0.0",
+    "bpmn-moddle": "^6.0.0",
-        "camunda-bpmn-moddle": "^7.0.1",
+    "camunda-bpmn-moddle": "^7.0.1",
-        "crypto-js": "^4.2.0",
+    "crypto-js": "^4.2.0",
-        "dayjs": "^1.11.10",
+    "dayjs": "^1.11.10",
-        "diagram-js": "^11.4.1",
+    "diagram-js": "^11.4.1",
-        "diagram-js-minimap": "^2.0.4",
+    "diagram-js-minimap": "^2.0.4",
-        "echarts": "^5.4.3",
+    "echarts": "^5.4.3",
-        "echarts-gl": "^2.0.9",
+    "echarts-gl": "^1.1.0",
-        "echarts-liquidfill": "^3.1.0",
+    "echarts-liquidfill": "^3.1.0",
-        "echarts4": "npm:echarts@^4.9.0",
+    "echarts4": "npm:echarts@^4.9.0",
-        "element-plus": "^2.7.2",
+    "element-plus": "^2.7.2",
-        "exceljs": "^4.4.0",
+    "exceljs": "^4.4.0",
-        "file-saver": "^2.0.5",
+    "file-saver": "^2.0.5",
-        "html2canvas": "^1.4.1",
+    "html2canvas": "^1.4.1",
-        "jquery": "^3.7.1",
+    "jquery": "^3.7.1",
-        "js-pinyin": "^0.2.5",
+    "js-pinyin": "^0.2.5",
-        "jsencrypt": "^3.3.2",
+    "jsencrypt": "^3.3.2",
-        "less": "^4.2.0",
+    "less": "^4.2.0",
-        "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.21",
-        "luckyexcel": "^1.0.1",
+    "luckyexcel": "^1.0.1",
-        "luckysheet": "^2.1.13",
+    "luckysheet": "^2.1.13",
-        "min-dash": "^4.2.1",
+    "min-dash": "^4.2.1",
-        "mitt": "^3.0.1",
+    "mitt": "^3.0.1",
-        "nprogress": "^0.2.0",
+    "nprogress": "^0.2.0",
-        "pinia": "^2.1.7",
+    "pinia": "^2.1.7",
-        "pinia-plugin-persistedstate": "^3.2.1",
+    "pinia-plugin-persistedstate": "^3.2.1",
-        "qs": "^6.12.0",
+    "qs": "^6.12.0",
-        "screenfull": "^6.0.2",
+    "screenfull": "^6.0.2",
-        "splitpanes": "^3.1.5",
+    "splitpanes": "^3.1.5",
-        "steady-xml": "0.1.0",
+    "steady-xml": "0.1.0",
-        "use-element-plus-theme": "^0.0.5",
+    "use-element-plus-theme": "^0.0.5",
-        "vue": "^3.3.11",
+    "vue": "^3.3.11",
-        "vue-baidu-map-3x": "^1.0.35",
+    "vue-baidu-map-3x": "^1.0.35",
-        "vue-baidu-map-offline": "^1.0.7",
+    "vue-baidu-map-offline": "^1.0.7",
-        "vue-demi": "^0.14.8",
+    "vue-demi": "^0.14.8",
-        "vue-draggable-resizable": "3.0.0-beta.2",
+    "vue-draggable-resizable": "3.0.0-beta.2",
-        "vue-i18n": "9.10.2",
+    "vue-i18n": "9.10.2",
-        "vue-router": "4",
+    "vue-router": "4",
-        "vue-types": "^5.1.1",
+    "vue-types": "^5.1.1",
-        "vxe-table": "^4.5.17",
+    "vxe-table": "^4.5.17",
-        "vxe-table-plugin-export-xlsx": "^4.0.1",
+    "vxe-table-plugin-export-xlsx": "^4.0.1",
-        "web-storage-cache": "^1.1.1",
+    "web-storage-cache": "^1.1.1",
-        "xe-utils": "^3.5.14",
+    "xe-utils": "^3.5.14",
-        "yarn": "^1.22.22"
+    "yarn": "^1.22.22"
-    },
+  },
-    "devDependencies": {
+  "devDependencies": {
-        "@purge-icons/generated": "^0.9.0",
+    "@purge-icons/generated": "^0.9.0",
-        "@types/lodash-es": "^4.17.12",
+    "@types/lodash-es": "^4.17.12",
-        "@types/node": "^20.10.5",
+    "@types/node": "^20.10.5",
-        "@types/splitpanes": "^2.2.6",
+    "@types/splitpanes": "^2.2.6",
-        "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue": "^4.5.2",
-        "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "sass": "^1.69.5",
+    "sass": "^1.69.5",
-        "typescript": "^5.2.2",
+    "typescript": "^5.2.2",
-        "unplugin-auto-import": "^0.16.7",
+    "unplugin-auto-import": "^0.16.7",
-        "vite": "^5.0.8",
+    "vite": "^5.0.8",
-        "vite-plugin-mkcert": "^1.17.3",
+    "vite-plugin-mkcert": "^1.17.3",
-        "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.25"
-    }
+  }
 }

src/components/echarts/MyEchartMap.vue

@@ -2,13 +2,16 @@
 <template>
     <div style="position: relative">
         <div class="bars_w" ref="chartMap" id="chartMap"></div>
-        <span @click="circle" v-show="showCircle" class="iconfont icon-back" ></span>
+        <span @click="circle" v-show="showCircle" class="iconfont icon-back"></span>
     </div>
 </template>
 
 <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,22 +150,34 @@ 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 (name == dictData.state.area?.[0].name  && e.componentIndex == 0) {
+        if (props.options.geo3D) {
-        if (name == '中国'  && e.componentIndex == 0) {
+            emit('clickMap', e)
-            MapReturn(e.name)
+        } 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))
+                // 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>

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}`

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;

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('crmName', tableStore.table.params.crmName||'')
-    form.append('reportNumber', tableStore.table.params.reportNumber)
+    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)

src/views/pqs/supervise/harmonicSurvey/components/planAdd.vue

@@ -78,6 +78,7 @@
                     clearable
                     filterable
                     collapse-tags
+                    collapse-tags-tooltip
                     placeholder="请选择关联电站"
                 />
                 <!-- <el-tree-select
@@ -247,13 +248,17 @@ 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
-        setTimeout(() => {
+        initDetpStataionTree({ orgId: 'a3069759b0b6072c99cf9a7af6c162e9' }).then(res => {
-            changeArea()
+            treeListCgy.value = res.data
-        }, 10)
+            setTimeout(() => {
+                changeArea()
+            }, 10)
+        })
     })
 }
 
@@ -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

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>

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>

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>

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>

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>

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)
     })