新增阿克苏 echart地图json

src/components/echarts/MyEchartMap.vue

@@ -1,251 +1,255 @@
-<!-- 地图组件 -->
-<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> -->
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
-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'])
-const myCharts = ref()
-const showCircle = ref(false)
-
-const fetchConfig = async (name: string) => {
-    const res = await import(`../../assets/map/${name.replace(/市$/, "")}.json`)
-    return res.default
-    // GetEchar(res.default)
-}
-// fetchConfig()
-
-const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
-onMounted(() => {})
-
-const GetEchar = async (name: string) => {
-    let chartDom = document.getElementById('chartMap')
-    myCharts.value?.dispose()
-    myCharts.value = echarts.init(chartDom)
-
-    name == dictData.state.area?.[0].name ? (showCircle.value = false) : (showCircle.value = true)
-
-    echarts.registerMap(name, await fetchConfig(name)) //注册可用的地图
-    let option = {
-        title: {
-            left: 'center',
-            top: '3%',
-            ...props.options.title
-        },
-        tooltip: {
-            trigger: 'item',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    color: '#fff',
-                    fontSize: 16
-                }
-            },
-            textStyle: {
-                color: '#fff',
-                fontStyle: 'normal',
-                opacity: 0.35,
-                fontSize: 14
-            },
-            backgroundColor: 'rgba(0,0,0,0.55)',
-            ...(props.options.tooltip || null)
-        },
-
-        legend: {
-            orient: 'vertical',
-            left: 25,
-            bottom: 40,
-            itemWidth: 16,
-            itemHeight: 16,
-
-            ...(props.options.legend || null)
-        },
-
-        color: [
-            ...(props.options.color || ''),
-            '#07CCCA ',
-            '#00BFF5',
-            '#FFBF00',
-            '#77DA63',
-            '#D5FF6B',
-            '#Ff6600',
-            '#FF9100',
-            '#5B6E96',
-            '#66FFCC',
-            '#B3B3B3'
-        ],
-
-        geo: {
-            map: name,
-            zoom: 1.1,
-            // top: 10,
-            //    bottom: 0,
-            roam: true,
-            label: {
-                normal: {
-                    show: true,
-                    fontSize: '14',
-                    color: 'rgba(0,0,0,0.7)'
-                }
-            },
-
-            itemStyle: {
-                normal: {
-                    color: 'rgba(51, 69, 129, .8)', //地图背景色
-                    borderColor: '#999999',
-                    borderWidth: 1,
-                    areaColor: {
-                        type: 'radial',
-                        x: 0.5,
-                        y: 0.5,
-                        r: 0.8,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(147, 135, 148, .2)' // 100% 处的颜色
-                            }
-                        ],
-                        globalCoord: false // 缺省为 false
-                    },
-                    shadowColor: 'rgba(128, 217, 248, 1)',
-                    // shadowColor: 'rgba(255, 255, 255, 1)',
-                    shadowOffsetX: -2,
-                    shadowOffsetY: 2,
-                    shadowBlur: 10
-                },
-                emphasis: {
-                    areaColor: '#ccc',
-                    shadowOffsetX: 0,
-                    shadowOffsetY: 0,
-                    borderWidth: 0
-                }
-            }
-
-            // regions: [
-            //     {
-            //         name: '南海诸岛',
-            //         itemStyle: {
-            //             // 隐藏地图
-            //             normal: {
-            //                 opacity: 0 // 为 0 时不绘制该图形
-            //             }
-            //         },
-            //         label: {
-            //             show: false // 隐藏文字
-            //         }
-            //     }
-            // ]
-        },
-
-        ...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)
-    const flag1 = ref(true)
-    // 点击事件
-    myCharts.value.off('click')
-    myCharts.value.on('click', (e: any) => {
-        if (props.options.geo3D) {
-            // emit('clickMap', e)
-            if (flag1.value) {
-                flag1.value = false
-                setTimeout(() => {
-                    emit('clickMap', e)
-                    flag1.value = true
-                }, 100)
-            }
-        } 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))
-            }
-        }
-    })
-    myCharts.value.on('datarangeselected', function (params: any) {
-        // 手动调用restore方法恢复地图的默认颜色映射
-        myCharts.value.dispatchAction({
-            type: 'restore'
-        })
-    })
-}
-
-const MapReturn = (name: string) => {
-    let area = dictData.state.area?.[0]?.children ?? []
-    let list = {}
-    let flag = true
-    for (let i = 0; i < area.length; i++) {
-        if (area[i].name == name) {
-            list = area[i]
-            flag = false
-            emit('getRegionByRegion', list)
-            break
-        }
-    }
-    if (flag) {
-        emit('eliminate', name)
-    }
-}
-// 返回
-const circle = () => {
-    emit('getRegionByRegion', dictData.state.area[0])
-    showCircle.value = false
-}
-const resizeHandler = () => {
-    myCharts.value?.resize()
-    myCharts.value?.setOption(myCharts.value.getOption()) // 强制更新配置
-}
-onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeHandler)
-    myCharts.value?.dispose()
-})
-defineExpose({ GetEchar })
-watch(
-    () => props.options,
-    (newVal, oldVal) => {
-        // GetEchar('中国')
-    }
-)
-</script>
-
-<style lang="scss" scoped>
-.bars_w {
-    width: 100%;
-    height: 100%;
-}
-
-.iconfont {
-    cursor: pointer;
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    z-index: 2;
-    font-size: 20px;
-    color: var(--el-color-primary) !important;
-}
-</style>
+<!-- 地图组件 -->
+<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> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
+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'])
+const myCharts = ref()
+const showCircle = ref(false)
+
+const fetchConfig = async (name: string) => {
+    const res = await import(`../../assets/map/${name.replace(/市$/, "")}.json`)
+    return res.default
+    // GetEchar(res.default)
+}
+// fetchConfig()
+
+const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
+onMounted(() => { })
+
+const GetEchar = async (name: string) => {
+    let chartDom = document.getElementById('chartMap')
+    myCharts.value?.dispose()
+    myCharts.value = echarts.init(chartDom)
+
+    name == dictData.state.area?.[0].name ? (showCircle.value = false) : (showCircle.value = true)
+
+    echarts.registerMap(name, await fetchConfig(name)) //注册可用的地图
+    let option = {
+        title: {
+            left: 'center',
+            top: '3%',
+            ...props.options.title
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.55)',
+            ...(props.options.tooltip || null)
+        },
+
+        legend: {
+            orient: 'vertical',
+            left: 25,
+            bottom: 40,
+            itemWidth: 16,
+            itemHeight: 16,
+
+            ...(props.options.legend || null)
+        },
+
+        color: [
+            ...(props.options.color || ''),
+            '#07CCCA ',
+            '#00BFF5',
+            '#FFBF00',
+            '#77DA63',
+            '#D5FF6B',
+            '#Ff6600',
+            '#FF9100',
+            '#5B6E96',
+            '#66FFCC',
+            '#B3B3B3'
+        ],
+
+        geo: {
+            map: name,
+            zoom: 1.1,
+            // top: 10,
+            //    bottom: 0,
+            roam: true,
+            label: {
+                normal: {
+                    show: true,
+                    fontSize: '14',
+                    color: 'rgba(0,0,0,0.7)'
+                }
+            },
+
+            itemStyle: {
+                normal: {
+                    color: 'rgba(51, 69, 129, .8)', //地图背景色
+                    borderColor: '#999999',
+                    borderWidth: 1,
+                    areaColor: {
+                        type: 'radial',
+                        x: 0.5,
+                        y: 0.5,
+                        r: 0.8,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(147, 135, 148, .2)' // 100% 处的颜色
+                            }
+                        ],
+                        globalCoord: false // 缺省为 false
+                    },
+                    shadowColor: 'rgba(128, 217, 248, 1)',
+                    // shadowColor: 'rgba(255, 255, 255, 1)',
+                    shadowOffsetX: -2,
+                    shadowOffsetY: 2,
+                    shadowBlur: 10
+                },
+                emphasis: {
+                    areaColor: '#ccc',
+                    shadowOffsetX: 0,
+                    shadowOffsetY: 0,
+                    borderWidth: 0
+                }
+            }
+
+            // regions: [
+            //     {
+            //         name: '南海诸岛',
+            //         itemStyle: {
+            //             // 隐藏地图
+            //             normal: {
+            //                 opacity: 0 // 为 0 时不绘制该图形
+            //             }
+            //         },
+            //         label: {
+            //             show: false // 隐藏文字
+            //         }
+            //     }
+            // ]
+        },
+
+        ...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)
+    setTimeout(() => {
+        // 刷新地图
+        myCharts.value.setOption(option)
+    }, 0)
+    window.addEventListener('resize', resizeHandler)
+    const flag1 = ref(true)
+    // 点击事件
+    myCharts.value.off('click')
+    myCharts.value.on('click', (e: any) => {
+        if (props.options.geo3D) {
+            // emit('clickMap', e)
+            if (flag1.value) {
+                flag1.value = false
+                setTimeout(() => {
+                    emit('clickMap', e)
+                    flag1.value = true
+                }, 100)
+            }
+        } 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))
+            }
+        }
+    })
+    myCharts.value.on('datarangeselected', function (params: any) {
+        // 手动调用restore方法恢复地图的默认颜色映射
+        myCharts.value.dispatchAction({
+            type: 'restore'
+        })
+    })
+}
+
+const MapReturn = (name: string) => {
+    let area = dictData.state.area?.[0]?.children ?? []
+    let list = {}
+    let flag = true
+    for (let i = 0; i < area.length; i++) {
+        if (area[i].name == name) {
+            list = area[i]
+            flag = false
+            emit('getRegionByRegion', list)
+            break
+        }
+    }
+    if (flag) {
+        emit('eliminate', name)
+    }
+}
+// 返回
+const circle = () => {
+    emit('getRegionByRegion', dictData.state.area[0])
+    showCircle.value = false
+}
+const resizeHandler = () => {
+    myCharts.value?.resize()
+    myCharts.value?.setOption(myCharts.value.getOption()) // 强制更新配置
+}
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeHandler)
+    myCharts.value?.dispose()
+})
+defineExpose({ GetEchar })
+watch(
+    () => props.options,
+    (newVal, oldVal) => {
+        // GetEchar('中国')
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+.bars_w {
+    width: 100%;
+    height: 100%;
+}
+
+.iconfont {
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 2;
+    font-size: 20px;
+    color: var(--el-color-primary) !important;
+}
+</style>

src/styles/app.css

@@ -33,6 +33,7 @@ body,
 ::-webkit-scrollbar-thumb {
   background-color: var(--el-color-primary);
   border-radius: 5px;
+  cursor: pointer !important;
 }
 
 /* 修改横向滚动条轨道 */
@@ -43,6 +44,7 @@ body,
 /* 修改横向滚动条拇指（thumb） */
 ::-webkit-scrollbar-thumb:horizontal {
   background-color: var(--el-color-primary);
+  cursor: pointer !important;
   border-radius: 5px;
 }
 

src/styles/app.scss

@@ -1,431 +1,433 @@
-/* 基本样式 */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    outline: none !important;
-}
-
-html,
-body,
-#app {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-    -webkit-tap-highlight-color: transparent;
-    background-color: var(--ba-bg-color);
-    font-size: 14px;
-    overflow: hidden;
-    position: relative;
-}
-
-/* 修改纵向滚动条轨道 */
-::-webkit-scrollbar {
-    width: 8px;
-}
-/* 修改纵向滚动条拇指（thumb） */
-::-webkit-scrollbar-thumb {
-    background-color: var(--el-color-primary);
-    border-radius: 5px;
-}
-/* 修改横向滚动条轨道 */
-::-webkit-scrollbar:horizontal {
-    height: 8px;
-}
-/* 修改横向滚动条拇指（thumb） */
-::-webkit-scrollbar-thumb:horizontal {
-    background-color: var(--el-color-primary);
-    border-radius: 5px;
-}
-// 阿里 iconfont Symbol引用css
-.iconfont-icon {
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
-}
-
-.w100 {
-    width: 100% !important;
-}
-
-.h100 {
-    height: 100% !important;
-}
-
-.ba-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.default-main {
-    position: relative;
-    background: #fff;
-    margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
-}
-
-.form-one {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    .el-form-item {
-        display: flex;
-        width: 98%;
-        margin-bottom: 15px !important;
-        .el-form-item__content {
-            flex: 1;
-            .el-select,
-            .el-cascader,
-            .el-input__inner,
-            .el-date-editor {
-                width: 100%;
-            }
-        }
-    }
-}
-.form-two {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    .el-form-item {
-        display: flex;
-        width: 48%;
-        .el-form-item__content {
-            flex: 1;
-            .el-select,
-            .el-cascader,
-            .el-input__inner,
-            .el-date-editor {
-                width: 100%;
-            }
-        }
-    }
-}
-//修改上传文件filelist位置
-.uploadFile {
-    .el-form-item__content {
-        line-height: 20px !important;
-        div {
-            display: flex !important;
-            align-items: center !important;
-        }
-        .el-upload-list__item-name {
-            width: 150px !important;
-        }
-        .el-upload-list--text {
-            margin: 0px 20px 0 !important;
-        }
-    }
-}
-.zoom-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    bottom: -10px;
-    right: -10px;
-    cursor: se-resize;
-}
-
-.block-help {
-    display: block;
-    width: 100%;
-    color: #909399;
-    font-size: 13px;
-    line-height: 16px;
-    padding-top: 5px;
-}
-
-/* 表格顶部菜单-s */
-.table-header {
-    .table-header-operate .icon {
-        font-size: 14px !important;
-        color: var(--el-color-white) !important;
-    }
-
-    .el-button.is-disabled .icon {
-        color: var(--el-button-disabled-text-color) !important;
-    }
-}
-
-/* 表格顶部菜单-e */
-
-/* 鼠标置入浮动效果-s */
-.suspension {
-    transition: all 0.3s ease;
-}
-
-.suspension:hover {
-    -webkit-transform: translateY(-4px) scale(1.02);
-    -moz-transform: translateY(-4px) scale(1.02);
-    -ms-transform: translateY(-4px) scale(1.02);
-    -o-transform: translateY(-4px) scale(1.02);
-    transform: translateY(-4px) scale(1.02);
-    -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
-    z-index: 999;
-    border-radius: 6px;
-}
-
-/* 鼠标置入浮动效果-e */
-
-/* 表格-s */
-.ba-table-box {
-    border-radius: var(--el-border-radius-round);
-}
-
-.ba-table-alert {
-    background-color: var(--el-fill-color-darker) !important;
-    border: 1px solid var(--ba-boder-color);
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-.fx-jcsb {
-    display: flex;
-    justify-content: space-between;
-}
-/* 表格-e */
-
-/* 表格顶部菜单-s */
-.ba-table-menu {
-    background-color: var(--el-fill-color-darker) !important;
-    border: 1px solid var(--ba-boder-color);
-    border-bottom: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-/* 表格-e */
-
-// /* 新增/编辑表单-s */
-// .cn-operate-dialog {
-//     overflow: hidden;
-//     border-radius: var(--el-border-radius-base);
-// }
-
-// .cn-operate-dialog .el-dialog__header {
-//     padding-bottom: 16px;
-//     border-bottom: 1px solid var(--ba-bg-color);
-// }
-
-// .cn-operate-dialog .el-dialog__body {
-//     max-height: 60vh;
-//     padding-top: 20px;
-//     padding-bottom: 52px;
-// }
-
-// .cn-operate-dialog .el-dialog__body .el-scrollbar {
-//     // padding-right: 60px;
-// }
-
-// .cn-operate-dialog .el-dialog__footer {
-//     padding: 15px;
-//     box-shadow: var(--el-box-shadow);
-//     position: absolute;
-//     width: 100%;
-//     bottom: 0;
-// }
-
-// .cn-operate-dialog .el-form {
-//     width: calc(100% - 60px);
-// }
-
-// .cn-operate-dialog .el-form--inline {
-//     display: grid;
-//     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-//     grid-gap: 20px 10px;
-
-//     .el-form-item {
-//         margin-right: 0;
-//         margin-bottom: 0;
-//     }
-// }
-
-// .cn-operate-dialog .el-form--inline .el-select {
-//     width: 100%;
-// }
-
-.ba-operate-form {
-    padding-top: 20px;
-}
-
-/* 新增/编辑表单-e */
-
-/* 全局遮罩-s */
-.ba-layout-shade {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9999990;
-}
-
-/* 全局遮罩-e */
-
-/* 图片上传预览-s */
-.img-preview-dialog .el-dialog__body {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img {
-        max-width: 100%;
-    }
-}
-
-/* 图片上传预览-e */
-
-/* 页面切换动画-s */
-.slide-right-enter-active,
-.slide-right-leave-active,
-.slide-left-enter-active,
-.slide-left-leave-active {
-    will-change: transform;
-    transition: all 0.3s ease;
-}
-
-// slide-right
-.slide-right-enter-from {
-    opacity: 0;
-    transform: translateX(-20px);
-}
-
-.slide-right-leave-to {
-    opacity: 0;
-    transform: translateX(20px);
-}
-
-// slide-left
-.slide-left-enter-from {
-    @extend .slide-right-leave-to;
-}
-
-.slide-left-leave-to {
-    @extend .slide-right-enter-from;
-}
-
-/* 页面切换动画-e */
-
-/* 布局相关-s */
-.frontend-footer-brother {
-    min-height: calc(100vh - 120px);
-}
-
-.user-views {
-    padding-left: 15px;
-
-    .user-views-card {
-        margin-bottom: 15px;
-    }
-}
-
-.ba-aside-drawer {
-    .el-drawer__body {
-        padding: 0;
-    }
-}
-
-/* 布局相关-e */
-
-/* 暗黑模式公共样式-s */
-.ba-icon-dark {
-    color: var(--el-text-color-primary) !important;
-}
-
-/* 暗黑模式公共样式-e */
-
-/* NProgress-s */
-#nprogress {
-    .bar,
-    .spinner {
-        z-index: 999999;
-    }
-}
-
-/* NProgress-e */
-
-/* 自适应-s */
-@media screen and (max-width: 768px) {
-    .xs-hidden {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .cn-operate-dialog {
-        width: 96%;
-    }
-}
-
-@media screen and (max-width: 991px) {
-    .user-views {
-        padding: 0;
-    }
-}
-
-/* 自适应-e */
-
-.custom-table-header {
-    box-sizing: border-box;
-    display: flex;
-    padding: 13px 15px;
-    align-items: center;
-    border: 1px solid var(--el-border-color);
-    .title {
-        flex: 1;
-        font-weight: 700;
-    }
-    .el-form-item {
-        margin-bottom: 0 !important;
-    }
-}
-
-.child-router {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background: #fff;
-    z-index: 10;
-}
-.bjs-powered-by {
-    display: none;
-}
-.el-select__wrapper{
-    height: 32px !important;
-}
-@font-face {
-    font-family: 'AlimamaFangYuanTiVF';
-    src: url('../assets/font/ali/AlimamaFangYuanTiVF-Thin.woff') format('woff'),
-        url('../assets/font/ali/AlimamaFangYuanTiVF-Thin.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-
-//阿里变形字体
-@font-face {
-    font-family: 'nablaRegular';
-    src: url('../assets/font/ali/Nabla_Regular.woff') format('woff'),
-        url('../assets/font/ali/Nabla_Regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'AlimamaDongFangDaKai';
-    src: url('../assets/font/ali/AlimamaDongFangDaKai-Regular.woff') format('woff'),
-        url('../assets/font/ali/AlimamaDongFangDaKai-Regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-.w-e-scroll{
-    min-height: 200px !important;
-}
+/* 基本样式 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    outline: none !important;
+}
+
+html,
+body,
+#app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: transparent;
+    background-color: var(--ba-bg-color);
+    font-size: 14px;
+    overflow: hidden;
+    position: relative;
+}
+
+/* 修改纵向滚动条轨道 */
+::-webkit-scrollbar {
+    width: 8px;
+}
+/* 修改纵向滚动条拇指（thumb） */
+::-webkit-scrollbar-thumb {
+    background-color: var(--el-color-primary);
+    border-radius: 5px;
+    cursor: pointer !important;
+}
+/* 修改横向滚动条轨道 */
+::-webkit-scrollbar:horizontal {
+    height: 8px;
+}
+/* 修改横向滚动条拇指（thumb） */
+::-webkit-scrollbar-thumb:horizontal {
+    background-color: var(--el-color-primary);
+    cursor: pointer !important;
+    border-radius: 5px;
+}
+// 阿里 iconfont Symbol引用css
+.iconfont-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
+
+.w100 {
+    width: 100% !important;
+}
+
+.h100 {
+    height: 100% !important;
+}
+
+.ba-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.default-main {
+    position: relative;
+    background: #fff;
+    margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
+}
+
+.form-one {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .el-form-item {
+        display: flex;
+        width: 98%;
+        margin-bottom: 15px !important;
+        .el-form-item__content {
+            flex: 1;
+            .el-select,
+            .el-cascader,
+            .el-input__inner,
+            .el-date-editor {
+                width: 100%;
+            }
+        }
+    }
+}
+.form-two {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .el-form-item {
+        display: flex;
+        width: 48%;
+        .el-form-item__content {
+            flex: 1;
+            .el-select,
+            .el-cascader,
+            .el-input__inner,
+            .el-date-editor {
+                width: 100%;
+            }
+        }
+    }
+}
+//修改上传文件filelist位置
+.uploadFile {
+    .el-form-item__content {
+        line-height: 20px !important;
+        div {
+            display: flex !important;
+            align-items: center !important;
+        }
+        .el-upload-list__item-name {
+            width: 150px !important;
+        }
+        .el-upload-list--text {
+            margin: 0px 20px 0 !important;
+        }
+    }
+}
+.zoom-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    bottom: -10px;
+    right: -10px;
+    cursor: se-resize;
+}
+
+.block-help {
+    display: block;
+    width: 100%;
+    color: #909399;
+    font-size: 13px;
+    line-height: 16px;
+    padding-top: 5px;
+}
+
+/* 表格顶部菜单-s */
+.table-header {
+    .table-header-operate .icon {
+        font-size: 14px !important;
+        color: var(--el-color-white) !important;
+    }
+
+    .el-button.is-disabled .icon {
+        color: var(--el-button-disabled-text-color) !important;
+    }
+}
+
+/* 表格顶部菜单-e */
+
+/* 鼠标置入浮动效果-s */
+.suspension {
+    transition: all 0.3s ease;
+}
+
+.suspension:hover {
+    -webkit-transform: translateY(-4px) scale(1.02);
+    -moz-transform: translateY(-4px) scale(1.02);
+    -ms-transform: translateY(-4px) scale(1.02);
+    -o-transform: translateY(-4px) scale(1.02);
+    transform: translateY(-4px) scale(1.02);
+    -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
+    z-index: 999;
+    border-radius: 6px;
+}
+
+/* 鼠标置入浮动效果-e */
+
+/* 表格-s */
+.ba-table-box {
+    border-radius: var(--el-border-radius-round);
+}
+
+.ba-table-alert {
+    background-color: var(--el-fill-color-darker) !important;
+    border: 1px solid var(--ba-boder-color);
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.fx-jcsb {
+    display: flex;
+    justify-content: space-between;
+}
+/* 表格-e */
+
+/* 表格顶部菜单-s */
+.ba-table-menu {
+    background-color: var(--el-fill-color-darker) !important;
+    border: 1px solid var(--ba-boder-color);
+    border-bottom: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+/* 表格-e */
+
+// /* 新增/编辑表单-s */
+// .cn-operate-dialog {
+//     overflow: hidden;
+//     border-radius: var(--el-border-radius-base);
+// }
+
+// .cn-operate-dialog .el-dialog__header {
+//     padding-bottom: 16px;
+//     border-bottom: 1px solid var(--ba-bg-color);
+// }
+
+// .cn-operate-dialog .el-dialog__body {
+//     max-height: 60vh;
+//     padding-top: 20px;
+//     padding-bottom: 52px;
+// }
+
+// .cn-operate-dialog .el-dialog__body .el-scrollbar {
+//     // padding-right: 60px;
+// }
+
+// .cn-operate-dialog .el-dialog__footer {
+//     padding: 15px;
+//     box-shadow: var(--el-box-shadow);
+//     position: absolute;
+//     width: 100%;
+//     bottom: 0;
+// }
+
+// .cn-operate-dialog .el-form {
+//     width: calc(100% - 60px);
+// }
+
+// .cn-operate-dialog .el-form--inline {
+//     display: grid;
+//     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+//     grid-gap: 20px 10px;
+
+//     .el-form-item {
+//         margin-right: 0;
+//         margin-bottom: 0;
+//     }
+// }
+
+// .cn-operate-dialog .el-form--inline .el-select {
+//     width: 100%;
+// }
+
+.ba-operate-form {
+    padding-top: 20px;
+}
+
+/* 新增/编辑表单-e */
+
+/* 全局遮罩-s */
+.ba-layout-shade {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999990;
+}
+
+/* 全局遮罩-e */
+
+/* 图片上传预览-s */
+.img-preview-dialog .el-dialog__body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+        max-width: 100%;
+    }
+}
+
+/* 图片上传预览-e */
+
+/* 页面切换动画-s */
+.slide-right-enter-active,
+.slide-right-leave-active,
+.slide-left-enter-active,
+.slide-left-leave-active {
+    will-change: transform;
+    transition: all 0.3s ease;
+}
+
+// slide-right
+.slide-right-enter-from {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+
+.slide-right-leave-to {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+// slide-left
+.slide-left-enter-from {
+    @extend .slide-right-leave-to;
+}
+
+.slide-left-leave-to {
+    @extend .slide-right-enter-from;
+}
+
+/* 页面切换动画-e */
+
+/* 布局相关-s */
+.frontend-footer-brother {
+    min-height: calc(100vh - 120px);
+}
+
+.user-views {
+    padding-left: 15px;
+
+    .user-views-card {
+        margin-bottom: 15px;
+    }
+}
+
+.ba-aside-drawer {
+    .el-drawer__body {
+        padding: 0;
+    }
+}
+
+/* 布局相关-e */
+
+/* 暗黑模式公共样式-s */
+.ba-icon-dark {
+    color: var(--el-text-color-primary) !important;
+}
+
+/* 暗黑模式公共样式-e */
+
+/* NProgress-s */
+#nprogress {
+    .bar,
+    .spinner {
+        z-index: 999999;
+    }
+}
+
+/* NProgress-e */
+
+/* 自适应-s */
+@media screen and (max-width: 768px) {
+    .xs-hidden {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .cn-operate-dialog {
+        width: 96%;
+    }
+}
+
+@media screen and (max-width: 991px) {
+    .user-views {
+        padding: 0;
+    }
+}
+
+/* 自适应-e */
+
+.custom-table-header {
+    box-sizing: border-box;
+    display: flex;
+    padding: 13px 15px;
+    align-items: center;
+    border: 1px solid var(--el-border-color);
+    .title {
+        flex: 1;
+        font-weight: 700;
+    }
+    .el-form-item {
+        margin-bottom: 0 !important;
+    }
+}
+
+.child-router {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: #fff;
+    z-index: 10;
+}
+.bjs-powered-by {
+    display: none;
+}
+.el-select__wrapper {
+    height: 32px !important;
+}
+@font-face {
+    font-family: 'AlimamaFangYuanTiVF';
+    src: url('../assets/font/ali/AlimamaFangYuanTiVF-Thin.woff') format('woff'),
+        url('../assets/font/ali/AlimamaFangYuanTiVF-Thin.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+//阿里变形字体
+@font-face {
+    font-family: 'nablaRegular';
+    src: url('../assets/font/ali/Nabla_Regular.woff') format('woff'),
+        url('../assets/font/ali/Nabla_Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'AlimamaDongFangDaKai';
+    src: url('../assets/font/ali/AlimamaDongFangDaKai-Regular.woff') format('woff'),
+        url('../assets/font/ali/AlimamaDongFangDaKai-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+.w-e-scroll {
+    min-height: 200px !important;
+}

src/styles/element.css

@@ -121,12 +121,14 @@
   border-radius: var(--el-border-radius-base);
   box-shadow: none;
   -webkit-box-shadow: none;
+  cursor: pointer !important;
 }
 
 .el-overlay-dialog:hover::-webkit-scrollbar-thumb:hover,
 .el-tabs__content:hover::-webkit-scrollbar-thumb:hover,
 .ba-scroll-style:hover::-webkit-scrollbar-thumb:hover {
   background: #c8c9cc;
+  cursor: pointer !important;
 }
 
 /* dialog滚动条-e */

src/styles/element.min.css

@@ -1 +1 @@
-*{--el-card-padding:10px}.el-input .el-input__inner{height:30px;line-height:calc(var(--el-input-height, 40px) - 4px)}.datetime-picker{height:32px;padding-top:0;padding-bottom:0}.el-divider__text.is-center{transform:translateX(-50%) translateY(-62%)}.el-divider__text{font-size:16px;font-weight:600}.el-menu{user-select:none}.el-menu .el-menu-item:hover,.el-menu .el-sub-menu__title:hover{background-color:var(--el-menu-hover-color) !important;color:var(--el-menu-active-color) !important}.el-menu .el-menu-item:hover .icon,.el-menu .el-sub-menu__title:hover .icon{color:var(--el-menu-active-color) !important}.atooltip{margin-top:0px !important;padding:0 !important}.el-dialog{padding:0px !important}.el-dialog .el-dialog__footer{padding:15px;box-shadow:var(--el-box-shadow);width:100%;bottom:0}.el-dialog__body{max-height:60vh;overflow-y:auto;padding:10px}.el-dialog__header{background:var(--el-color-primary);padding:15px;margin-right:0px}.el-dialog__header .el-dialog__headerbtn{top:5px}.el-dialog__header .el-dialog__headerbtn .el-icon{color:var(--el-color-white)}.el-dialog__header .el-dialog__headerbtn:hover .el-icon{color:#ccc}.el-dialog__header .el-dialog__title{color:var(--el-color-white)}.el-table{--el-table-border-color:var(--ba-border-color)}.el-card{border:none}.el-card__header{border-bottom:1px solid var(--el-border-color-extra-light)}.el-textarea__inner{padding:5px 11px}.el-overlay-dialog,.el-tabs__content,.ba-scroll-style{scrollbar-width:none}.el-overlay-dialog::-webkit-scrollbar,.el-tabs__content::-webkit-scrollbar,.ba-scroll-style::-webkit-scrollbar{width:5px;height:5px}.el-overlay-dialog::-webkit-scrollbar-thumb,.el-tabs__content::-webkit-scrollbar-thumb,.ba-scroll-style::-webkit-scrollbar-thumb{background:#eaeaea;border-radius:var(--el-border-radius-base);box-shadow:none;-webkit-box-shadow:none}.el-overlay-dialog:hover::-webkit-scrollbar-thumb:hover,.el-tabs__content:hover::-webkit-scrollbar-thumb:hover,.ba-scroll-style:hover::-webkit-scrollbar-thumb:hover{background:#c8c9cc}.ba-input-item-radio{margin-bottom:10px}.ba-input-item-radio .el-radio-group .el-radio{margin-bottom:8px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{background:var(--el-color-primary);color:var(--el-color-white)}.el-tabs__header{margin-bottom:0}.el-form--inline .el-form-item{margin-bottom:10px}.el-tabs--border-card>.el-tabs__content{padding:10px}.el-page-header__header{line-height:32px}.el-page-header__header .el-page-header__content{font-size:14px;font-weight:700}.el-select{min-width:200px}.el-tabs__content{height:calc(100% - 40px)}.el-tabs__content .el-tab-pane{height:100%}.el-button--primary:focus{color:var(--el-color-white);outline:0}.el-button--primary:hover{color:var(--el-color-white);border-color:var(--el-color-primary-light-3);background-color:var(--el-color-primary-light-3);outline:0}.el-button.is-plain:focus{color:var(--el-button-text-color);border-color:var(--el-button-border-color)}.el-button.is-plain:hover{color:var(--el-color-primary);border-color:var(--el-color-primary)}.el-button.is-link:focus{color:var(--el-button-text-color)}.el-button.is-link:hover{color:var(--el-button-hover-link-text-color)}.el-button--primary.is-link:hover,.el-button--primary.is-plain:hover,.el-button--primary.is-text:hover{color:var(--el-color-primary-light-5);background-color:var(--el-color-primary-light-9) !important}.el-divider--horizontal{margin:15px 0}.el-step__title{cursor:pointer}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:var(--el-color-primary);opacity:0.6}.sgmap-ctrl-bottom-left{display:none !important}.el-drawer__header{margin-bottom:0 !important}.el-pagination__sizes .el-select{min-width:128px}.el-card__header{padding:10px}.el-card__header span{font-size:16px;font-weight:600}.el-select__input-wrapper{width:11px}.el-drawer__header{background:var(--el-color-primary);padding:18px;margin-right:0px}.el-drawer__header .el-drawer__close-btn{top:5px}.el-drawer__header .el-drawer__close-btn .el-icon{color:var(--el-color-white)}.el-drawer__header .el-drawer__close-btn:hover .el-icon{color:#ccc}.el-drawer__header .el-drawer__title{color:var(--el-color-white);font-size:18px}.el-drawer__body{padding:10px}
+*{--el-card-padding:10px}.el-input .el-input__inner{height:30px;line-height:calc(var(--el-input-height, 40px) - 4px)}.datetime-picker{height:32px;padding-top:0;padding-bottom:0}.el-divider__text.is-center{transform:translateX(-50%) translateY(-62%)}.el-divider__text{font-size:16px;font-weight:600}.el-menu{user-select:none}.el-menu .el-menu-item:hover,.el-menu .el-sub-menu__title:hover{background-color:var(--el-menu-hover-color) !important;color:var(--el-menu-active-color) !important}.el-menu .el-menu-item:hover .icon,.el-menu .el-sub-menu__title:hover .icon{color:var(--el-menu-active-color) !important}.atooltip{margin-top:0px !important;padding:0 !important}.el-dialog{padding:0px !important}.el-dialog .el-dialog__footer{padding:15px;box-shadow:var(--el-box-shadow);width:100%;bottom:0}.el-dialog__body{max-height:60vh;overflow-y:auto;padding:10px}.el-dialog__header{background:var(--el-color-primary);padding:15px;margin-right:0px}.el-dialog__header .el-dialog__headerbtn{top:5px}.el-dialog__header .el-dialog__headerbtn .el-icon{color:var(--el-color-white)}.el-dialog__header .el-dialog__headerbtn:hover .el-icon{color:#ccc}.el-dialog__header .el-dialog__title{color:var(--el-color-white)}.el-table{--el-table-border-color:var(--ba-border-color)}.el-card{border:none}.el-card__header{border-bottom:1px solid var(--el-border-color-extra-light)}.el-textarea__inner{padding:5px 11px}.el-overlay-dialog,.el-tabs__content,.ba-scroll-style{scrollbar-width:none}.el-overlay-dialog::-webkit-scrollbar,.el-tabs__content::-webkit-scrollbar,.ba-scroll-style::-webkit-scrollbar{width:5px;height:5px}.el-overlay-dialog::-webkit-scrollbar-thumb,.el-tabs__content::-webkit-scrollbar-thumb,.ba-scroll-style::-webkit-scrollbar-thumb{background:#eaeaea;border-radius:var(--el-border-radius-base);box-shadow:none;-webkit-box-shadow:none;cursor:pointer !important}.el-overlay-dialog:hover::-webkit-scrollbar-thumb:hover,.el-tabs__content:hover::-webkit-scrollbar-thumb:hover,.ba-scroll-style:hover::-webkit-scrollbar-thumb:hover{background:#c8c9cc;cursor:pointer !important}.ba-input-item-radio{margin-bottom:10px}.ba-input-item-radio .el-radio-group .el-radio{margin-bottom:8px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{background:var(--el-color-primary);color:var(--el-color-white)}.el-tabs__header{margin-bottom:0}.el-form--inline .el-form-item{margin-bottom:10px}.el-tabs--border-card>.el-tabs__content{padding:10px}.el-page-header__header{line-height:32px}.el-page-header__header .el-page-header__content{font-size:14px;font-weight:700}.el-select{min-width:200px}.el-tabs__content{height:calc(100% - 40px)}.el-tabs__content .el-tab-pane{height:100%}.el-button--primary:focus{color:var(--el-color-white);outline:0}.el-button--primary:hover{color:var(--el-color-white);border-color:var(--el-color-primary-light-3);background-color:var(--el-color-primary-light-3);outline:0}.el-button.is-plain:focus{color:var(--el-button-text-color);border-color:var(--el-button-border-color)}.el-button.is-plain:hover{color:var(--el-color-primary);border-color:var(--el-color-primary)}.el-button.is-link:focus{color:var(--el-button-text-color)}.el-button.is-link:hover{color:var(--el-button-hover-link-text-color)}.el-button--primary.is-link:hover,.el-button--primary.is-plain:hover,.el-button--primary.is-text:hover{color:var(--el-color-primary-light-5);background-color:var(--el-color-primary-light-9) !important}.el-divider--horizontal{margin:15px 0}.el-step__title{cursor:pointer}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:var(--el-color-primary);opacity:0.6}.sgmap-ctrl-bottom-left{display:none !important}.el-drawer__header{margin-bottom:0 !important}.el-pagination__sizes .el-select{min-width:128px}.el-card__header{padding:10px}.el-card__header span{font-size:16px;font-weight:600}.el-select__input-wrapper{width:11px}.el-drawer__header{background:var(--el-color-primary);padding:18px;margin-right:0px}.el-drawer__header .el-drawer__close-btn{top:5px}.el-drawer__header .el-drawer__close-btn .el-icon{color:var(--el-color-white)}.el-drawer__header .el-drawer__close-btn:hover .el-icon{color:#ccc}.el-drawer__header .el-drawer__title{color:var(--el-color-white);font-size:18px}.el-drawer__body{padding:10px}

src/styles/element.scss

@@ -1,268 +1,270 @@
-*{
-      --el-card-padding: 10px;
-}
-/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-s */
-.el-input .el-input__inner {
-    height: 30px;
-    line-height: calc(var(--el-input-height, 40px) - 4px);
-}
-
-/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-e */
-
-.datetime-picker {
-    height: 32px;
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-.el-divider__text.is-center {
-    transform: translateX(-50%) translateY(-62%);
-}
-.el-divider__text {
-        font-size: 16px;
-    font-weight: 600;
-}
-.el-menu {
-    user-select: none;
-
-    .el-menu-item:hover,
-    .el-sub-menu__title:hover {
-        background-color: var(--el-menu-hover-color) !important;
-        color: var(--el-menu-active-color) !important;
-
-        .icon {
-            color: var(--el-menu-active-color) !important;
-        }
-    }
-}
-
-.atooltip {
-    margin-top: 0px !important;
-    padding: 0 !important;
-}
-.el-dialog {
-    padding: 0px !important;
-
-    .el-dialog__footer {
-        padding: 15px;
-        box-shadow: var(--el-box-shadow);
-
-        width: 100%;
-        bottom: 0;
-    }
-}
-.el-dialog__body {
-    max-height: 60vh;
-    overflow-y: auto;
-    padding: 10px;
-}
-.el-dialog__header {
-    background: var(--el-color-primary);
-    padding: 15px;
-    margin-right: 0px;
-
-    .el-dialog__headerbtn {
-        top: 5px;
-        .el-icon {
-            color: var(--el-color-white);
-        }
-    }
-    .el-dialog__headerbtn:hover {
-        .el-icon {
-            color: #ccc;
-        }
-    }
-
-    .el-dialog__title {
-        color: var(--el-color-white);
-    }
-}
-
-.el-table {
-    --el-table-border-color: var(--ba-border-color);
-}
-
-.el-card {
-    border: none;
-}
-
-.el-card__header {
-    border-bottom: 1px solid var(--el-border-color-extra-light);
-}
-
-.el-textarea__inner {
-    padding: 5px 11px;
-}
-
-/* dialog滚动条-s */
-.el-overlay-dialog,
-.el-tabs__content,
-.ba-scroll-style {
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        width: 5px;
-        height: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #eaeaea;
-        border-radius: var(--el-border-radius-base);
-        box-shadow: none;
-        -webkit-box-shadow: none;
-    }
-
-    &:hover {
-        &::-webkit-scrollbar-thumb:hover {
-            background: #c8c9cc;
-        }
-    }
-}
-
-/* dialog滚动条-e */
-
-/* 小屏终端 el-radio-group 样式优化-s */
-.ba-input-item-radio {
-    margin-bottom: 10px;
-
-    .el-radio-group {
-        .el-radio {
-            margin-bottom: 8px;
-        }
-    }
-}
-
-/* 小屏终端 el-radio-group 样式调整-e */
-
-.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
-    background: var(--el-color-primary);
-    color: var(--el-color-white);
-}
-
-.el-tabs__header {
-    margin-bottom: 0;
-}
-
-.el-form--inline .el-form-item {
-    margin-bottom: 10px;
-}
-
-.el-tabs--border-card > .el-tabs__content {
-    padding: 10px;
-}
-
-.el-page-header__header {
-    line-height: 32px;
-    .el-page-header__content {
-        font-size: 14px;
-        font-weight: 700;
-    }
-}
-
-.el-select {
-    min-width: 200px;
-}
-
-.el-tabs__content {
-    height: calc(100% - 40px);
-    .el-tab-pane {
-        height: 100%;
-    }
-}
-
-.el-button--primary:focus {
-    color: var(--el-color-white);
-    // border-color: var(--el-color-primary);
-    // background-color: var(--el-color-primary);
-    outline: 0;
-}
-.el-button--primary:hover {
-    color: var(--el-color-white);
-    border-color: var(--el-color-primary-light-3);
-    background-color: var(--el-color-primary-light-3);
-    outline: 0;
-}
-.el-button.is-plain:focus {
-    color: var(--el-button-text-color);
-    border-color: var(--el-button-border-color);
-}
-.el-button.is-plain:hover {
-    color: var(--el-color-primary);
-    border-color: var(--el-color-primary);
-}
-.el-button.is-link:focus {
-    color: var(--el-button-text-color);
-}
-.el-button.is-link:hover {
-    color: var(--el-button-hover-link-text-color);
-}
-.el-button--primary.is-link:hover,
-.el-button--primary.is-plain:hover,
-.el-button--primary.is-text:hover {
-    color: var(--el-color-primary-light-5);
-    background-color: var(--el-color-primary-light-9) !important;
-}
-
-.el-divider--horizontal {
-    margin: 15px 0;
-}
-.el-step__title {
-    cursor: pointer;
-}
-
-.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,
-.el-radio__input.is-disabled.is-checked .el-radio__inner {
-    background-color: var(--el-color-primary);
-    opacity: 0.6;
-}
-
-.sgmap-ctrl-bottom-left {
-    display: none !important;
-}
-
-.el-drawer__header {
-    margin-bottom: 0 !important;
-}
-.el-pagination__sizes {
-    .el-select {
-        min-width: 128px;
-    }
-}
-.el-card__header {
-    padding: 10px;
-    span {
-        font-size: 16px;
-        font-weight: 600;
-    }
-}
-// .el-card__body {
-//     padding: var();
-// }
-.el-select__input-wrapper {
-    width: 11px;
-}
-.el-drawer__header {
-    background: var(--el-color-primary);
-    padding: 18px;
-    margin-right: 0px;
-
-    .el-drawer__close-btn {
-        top: 5px;
-        .el-icon {
-            color: var(--el-color-white);
-        }
-    }
-    .el-drawer__close-btn:hover {
-        .el-icon {
-            color: #ccc;
-        }
-    }
-
-    .el-drawer__title {
-        color: var(--el-color-white);
-        font-size: 18px;
-    }
-}
-.el-drawer__body {
-    padding: 10px;
-}
+* {
+    --el-card-padding: 10px;
+}
+/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-s */
+.el-input .el-input__inner {
+    height: 30px;
+    line-height: calc(var(--el-input-height, 40px) - 4px);
+}
+
+/* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-e */
+
+.datetime-picker {
+    height: 32px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.el-divider__text.is-center {
+    transform: translateX(-50%) translateY(-62%);
+}
+.el-divider__text {
+    font-size: 16px;
+    font-weight: 600;
+}
+.el-menu {
+    user-select: none;
+
+    .el-menu-item:hover,
+    .el-sub-menu__title:hover {
+        background-color: var(--el-menu-hover-color) !important;
+        color: var(--el-menu-active-color) !important;
+
+        .icon {
+            color: var(--el-menu-active-color) !important;
+        }
+    }
+}
+
+.atooltip {
+    margin-top: 0px !important;
+    padding: 0 !important;
+}
+.el-dialog {
+    padding: 0px !important;
+
+    .el-dialog__footer {
+        padding: 15px;
+        box-shadow: var(--el-box-shadow);
+
+        width: 100%;
+        bottom: 0;
+    }
+}
+.el-dialog__body {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 10px;
+}
+.el-dialog__header {
+    background: var(--el-color-primary);
+    padding: 15px;
+    margin-right: 0px;
+
+    .el-dialog__headerbtn {
+        top: 5px;
+        .el-icon {
+            color: var(--el-color-white);
+        }
+    }
+    .el-dialog__headerbtn:hover {
+        .el-icon {
+            color: #ccc;
+        }
+    }
+
+    .el-dialog__title {
+        color: var(--el-color-white);
+    }
+}
+
+.el-table {
+    --el-table-border-color: var(--ba-border-color);
+}
+
+.el-card {
+    border: none;
+}
+
+.el-card__header {
+    border-bottom: 1px solid var(--el-border-color-extra-light);
+}
+
+.el-textarea__inner {
+    padding: 5px 11px;
+}
+
+/* dialog滚动条-s */
+.el-overlay-dialog,
+.el-tabs__content,
+.ba-scroll-style {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #eaeaea;
+        border-radius: var(--el-border-radius-base);
+        box-shadow: none;
+        -webkit-box-shadow: none;
+        cursor: pointer !important;
+    }
+
+    &:hover {
+        &::-webkit-scrollbar-thumb:hover {
+            background: #c8c9cc;
+            cursor: pointer !important;
+        }
+    }
+}
+
+/* dialog滚动条-e */
+
+/* 小屏终端 el-radio-group 样式优化-s */
+.ba-input-item-radio {
+    margin-bottom: 10px;
+
+    .el-radio-group {
+        .el-radio {
+            margin-bottom: 8px;
+        }
+    }
+}
+
+/* 小屏终端 el-radio-group 样式调整-e */
+
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
+}
+
+.el-tabs__header {
+    margin-bottom: 0;
+}
+
+.el-form--inline .el-form-item {
+    margin-bottom: 10px;
+}
+
+.el-tabs--border-card > .el-tabs__content {
+    padding: 10px;
+}
+
+.el-page-header__header {
+    line-height: 32px;
+    .el-page-header__content {
+        font-size: 14px;
+        font-weight: 700;
+    }
+}
+
+.el-select {
+    min-width: 200px;
+}
+
+.el-tabs__content {
+    height: calc(100% - 40px);
+    .el-tab-pane {
+        height: 100%;
+    }
+}
+
+.el-button--primary:focus {
+    color: var(--el-color-white);
+    // border-color: var(--el-color-primary);
+    // background-color: var(--el-color-primary);
+    outline: 0;
+}
+.el-button--primary:hover {
+    color: var(--el-color-white);
+    border-color: var(--el-color-primary-light-3);
+    background-color: var(--el-color-primary-light-3);
+    outline: 0;
+}
+.el-button.is-plain:focus {
+    color: var(--el-button-text-color);
+    border-color: var(--el-button-border-color);
+}
+.el-button.is-plain:hover {
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+}
+.el-button.is-link:focus {
+    color: var(--el-button-text-color);
+}
+.el-button.is-link:hover {
+    color: var(--el-button-hover-link-text-color);
+}
+.el-button--primary.is-link:hover,
+.el-button--primary.is-plain:hover,
+.el-button--primary.is-text:hover {
+    color: var(--el-color-primary-light-5);
+    background-color: var(--el-color-primary-light-9) !important;
+}
+
+.el-divider--horizontal {
+    margin: 15px 0;
+}
+.el-step__title {
+    cursor: pointer;
+}
+
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,
+.el-radio__input.is-disabled.is-checked .el-radio__inner {
+    background-color: var(--el-color-primary);
+    opacity: 0.6;
+}
+
+.sgmap-ctrl-bottom-left {
+    display: none !important;
+}
+
+.el-drawer__header {
+    margin-bottom: 0 !important;
+}
+.el-pagination__sizes {
+    .el-select {
+        min-width: 128px;
+    }
+}
+.el-card__header {
+    padding: 10px;
+    span {
+        font-size: 16px;
+        font-weight: 600;
+    }
+}
+// .el-card__body {
+//     padding: var();
+// }
+.el-select__input-wrapper {
+    width: 11px;
+}
+.el-drawer__header {
+    background: var(--el-color-primary);
+    padding: 18px;
+    margin-right: 0px;
+
+    .el-drawer__close-btn {
+        top: 5px;
+        .el-icon {
+            color: var(--el-color-white);
+        }
+    }
+    .el-drawer__close-btn:hover {
+        .el-icon {
+            color: #ccc;
+        }
+    }
+
+    .el-drawer__title {
+        color: var(--el-color-white);
+        font-size: 18px;
+    }
+}
+.el-drawer__body {
+    padding: 10px;
+}

src/views/cockpit/TerminalLog.vue

@@ -1,88 +1,88 @@
-<template>
-    <div>
-        <!--终端运维日志 -->
-
-        <Table ref="tableRef"></Table>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, provide, reactive, watch } from 'vue'
-
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import { useDictData } from '@/stores/dictData'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { ledgerChangePush } from '@/api/device-boot/terminalTree'
-import { getTimeOfTheMonth } from '@/utils/formatTime'
-const prop = defineProps({
-    width: { type: String },
-    height: { type: String },
-    timeKey: { type: String }
-})
-const dictData = useDictData()
-const fontdveoption = dictData.getBasicData('Dev_Ops')
-
-const tableStore = new TableStore({
-    url: '/device-boot/pqsTerminalLogs/getList',
-    method: 'POST',
-    column: [
-        {
-            field: 'index',
-            title: '序号',
-            width: '60',
-            formatter: (row: any) => {
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        // { title: '名称', field: 'name', width: '200' },
-        {
-            title: '日志类型',
-            field: 'logsType',
-            width: '100',
-            formatter: (row: any) => {
-                return fontdveoption.find((item: any) => item.id == row.cellValue)?.name
-            }
-        },
-
-        {
-            title: '更改人员',
-            field: 'createBy',
-            width: '100'
-        },
-        {
-            title: '更改时间',
-            field: 'updateTime',
-            width: '140'
-        },
-
-        { title: '描述', field: 'terminalDescribe' }
-    ],
-    beforeSearchFun: () => {
-        tableStore.table.params.searchBeginTime = getTimeOfTheMonth(prop.timeKey)[0]
-        tableStore.table.params.searchEndTime = getTimeOfTheMonth(prop.timeKey)[1]
-    },
-    loadCallback: () => {
-        tableStore.table.height = `calc(${prop.height} - 80px)`
-    }
-})
-
-const tableRef = ref()
-provide('tableRef', tableRef)
-tableStore.table.params.type = ''
-tableStore.table.params.searchValue = ''
-provide('tableStore', tableStore)
-
-onMounted(() => {
-    tableStore.index()
-})
-watch(
-    () => prop.timeKey,
-    val => {
-        tableStore.index()
-    }
-)
-
-const addMenu = () => {}
-</script>
-<style lang="scss" scoped></style>
+<template>
+    <div>
+        <!--终端运维日志 -->
+
+        <Table ref="tableRef"></Table>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, watch } from 'vue'
+
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ledgerChangePush } from '@/api/device-boot/terminalTree'
+import { getTimeOfTheMonth } from '@/utils/formatTime'
+const prop = defineProps({
+    width: { type: String },
+    height: { type: String },
+    timeKey: { type: String }
+})
+const dictData = useDictData()
+const fontdveoption = dictData.getBasicData('Dev_Ops')
+
+const tableStore = new TableStore({
+    url: '/device-boot/pqsTerminalLogs/getList',
+    method: 'POST',
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '60',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        // { title: '名称', field: 'name', width: '200' },
+        {
+            title: '日志类型',
+            field: 'logsType',
+            width: '100',
+            formatter: (row: any) => {
+                return fontdveoption.find((item: any) => item.id == row.cellValue)?.name
+            }
+        },
+
+        {
+            title: '更改人员',
+            field: 'createBy',
+            width: '100'
+        },
+        {
+            title: '更改时间',
+            field: 'updateTime',
+            width: '140'
+        },
+
+        { title: '描述', field: 'terminalDescribe' }
+    ],
+    beforeSearchFun: () => {
+        tableStore.table.params.searchBeginTime = getTimeOfTheMonth(prop.timeKey)[0]
+        tableStore.table.params.searchEndTime = getTimeOfTheMonth(prop.timeKey)[1]
+    },
+    loadCallback: () => {
+        tableStore.table.height = `calc(${prop.height} - 80px)`
+    }
+})
+
+const tableRef = ref()
+provide('tableRef', tableRef)
+tableStore.table.params.type = ''
+tableStore.table.params.searchValue = ''
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+watch(
+    () => prop.timeKey,
+    val => {
+        tableStore.index()
+    }
+)
+
+const addMenu = () => {}
+</script>
+<style lang="scss" scoped></style>

src/views/pqs/harmonicMonitoring/detailed/alarmStatistics/index.vue

@@ -1,124 +1,124 @@
-<template>
-    <div class="default-main">
-
-        <TableHeader date-picker area showExport>
-            <template #select>
-                <!-- <el-form-item label="统计类型:">
-                    <el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
-                        <el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
-                        </el-option>
-                    </el-select>
-                </el-form-item> -->
-                <el-form-item label="电压等级:">
-                    <el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
-                        placeholder="请选择电压等级" value-key="id">
-                        <el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="终端厂家:">
-                    <el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
-                        clearable placeholder="请选择终端厂家" value-key="id">
-                        <el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="干扰源类型:">
-                    <el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
-                        placeholder="请选择干扰源类型" value-key="id">
-                        <el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-
-
-            </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 { useDictData } from '@/stores/dictData'
-import TableHeader from '@/components/table/header/index.vue'
-const dictData = useDictData()
-defineOptions({
-    name: 'harmonic-boot/detailedAnalysis/station'
-})
-const view = ref(true)
-const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
-const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
-const terminaloption = dictData.getBasicData('Dev_Manufacturers')
-const interfereoption = dictData.getBasicData('Interference_Source')
-
-
-const tableStore = new TableStore({
-    url: '/harmonic-boot/detailAnalysis/warnSubstationDetail',
-    method: 'POST',
-    column: [
-        {
-            field: 'index',
-            title: '序号',
-            width: '80',
-            formatter: (row: any) => {
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        { field: 'provinceCompany', title: '地级区', minWidth: "100px", },
-        { field: 'cityCompany', title: '地区公司', minWidth: "100px", },
-        { field: 'plantName', title: '变电站名称', minWidth: "180px", },
-        { field: 'plantVoltageLevel', title: '电压等级', minWidth: "100px", },
-        { field: 'onlineMonitorCounts', title: '在线监测点数量(个)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "150px", },
-        { field: 'alertMonitorCounts', title: '告警监测点数量(个)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "150px", },
-        { field: 'alertCounts', title: '告警次数', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-        { field: 'alertAlarmFrequency', title: '告警频次(次/点)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "150px", },
-        {
-            title: '各项稳态指标告警频次(次/点)', children: [
-                { field: 'frequencyDeviation', title: '频率偏差', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-                { field: 'voltageDeviation', title: '电压偏差', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-                { field: 'harmonicVoltage', title: '谐波电压', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-                { field: 'harmonicCurrent', title: '谐波电流', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-                { field: 'threePhaseVoltageUnbalance', title: '三相电压不平衡度', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "180px", },
-                { field: 'flicker', title: '闪变', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-                { field: 'negative', title: '负序电流', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-                { field: 'interHarmonic', title: '间谐波电压', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-            ]
-        }, {
-            title: '各项暂态指标告警频次(次/点)', children: [
-                { field: 'shortInterruption', title: '短时中断', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-                { field: 'voltageDip', title: '电压暂降', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-                { field: 'voltageSwell', title: '电压暂升', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
-            ]
-        },
-
-
-    ],
-
-    loadCallback: () => {
-
-    }
-})
-tableStore.table.params.statisticalType = classificationData[0]
-tableStore.table.params.powerFlag = 2
-tableStore.table.params.monitorFlag = 2
-tableStore.table.params.scale = []
-tableStore.table.params.manufacturer = []
-tableStore.table.params.loadType = []
-const wp = ref({})
-
-provide('tableStore', tableStore)
-onMounted(() => {
-    tableStore.index()
-})
-
-
-
-
-
-</script>
+<template>
+    <div class="default-main">
+
+        <TableHeader date-picker area showExport>
+            <template #select>
+                <!-- <el-form-item label="统计类型:">
+                    <el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
+                        <el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item> -->
+                <el-form-item label="电压等级:">
+                    <el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
+                        placeholder="请选择电压等级" value-key="id">
+                        <el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="终端厂家:">
+                    <el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
+                        clearable placeholder="请选择终端厂家" value-key="id">
+                        <el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="干扰源类型:">
+                    <el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
+                        placeholder="请选择干扰源类型" value-key="id">
+                        <el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+
+
+            </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 { useDictData } from '@/stores/dictData'
+import TableHeader from '@/components/table/header/index.vue'
+const dictData = useDictData()
+defineOptions({
+    name: 'harmonic-boot/detailedAnalysis/station'
+})
+const view = ref(true)
+const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+const interfereoption = dictData.getBasicData('Interference_Source')
+
+
+const tableStore = new TableStore({
+    url: '/harmonic-boot/detailAnalysis/warnSubstationDetail',
+    method: 'POST',
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'provinceCompany', title: '地级区', minWidth: "100px", },
+        { field: 'cityCompany', title: '地区公司', minWidth: "100px", },
+        { field: 'plantName', title: '变电站名称', minWidth: "180px", },
+        { field: 'plantVoltageLevel', title: '电压等级', minWidth: "100px", },
+        { field: 'onlineMonitorCounts', title: '在线监测点数量(个)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "90px", },
+        { field: 'alertMonitorCounts', title: '告警监测点数量(个)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "90px", },
+        { field: 'alertCounts', title: '告警次数', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+        { field: 'alertAlarmFrequency', title: '告警频次(次/点)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "90px", },
+        {
+            title: '各项稳态指标告警频次(次/点)', children: [
+                { field: 'frequencyDeviation', title: '频率偏差', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+                { field: 'voltageDeviation', title: '电压偏差', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+                { field: 'harmonicVoltage', title: '谐波电压', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+                { field: 'harmonicCurrent', title: '谐波电流', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+                { field: 'threePhaseVoltageUnbalance', title: '三相电压不平衡度', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "130px", },
+                { field: 'flicker', title: '闪变', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+                { field: 'negative', title: '负序电流', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+                { field: 'interHarmonic', title: '间谐波电压', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+            ]
+        }, {
+            title: '各项暂态指标告警频次(次/点)', children: [
+                { field: 'shortInterruption', title: '短时中断', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+                { field: 'voltageDip', title: '电压暂降', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+                { field: 'voltageSwell', title: '电压暂升', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
+            ]
+        },
+
+
+    ],
+
+    loadCallback: () => {
+
+    }
+})
+tableStore.table.params.statisticalType = classificationData[0]
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.scale = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.loadType = []
+const wp = ref({})
+
+provide('tableStore', tableStore)
+onMounted(() => {
+    tableStore.index()
+})
+
+
+
+
+
+</script>

src/views/pqs/harmonicMonitoring/detailed/overLabelDetails/index.vue

@@ -1,139 +1,139 @@
-<template>
-    <div class="default-main">
-
-        <TableHeader datePicker area showExport>
-            <template #select>
-                <!-- <el-form-item label="统计类型:">
-                    <el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
-                        <el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
-                        </el-option>
-                    </el-select>
-                </el-form-item> -->
-                <el-form-item label="电压等级:">
-                    <el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
-                        placeholder="请选择电压等级" value-key="id">
-                        <el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="终端厂家:">
-                    <el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
-                        clearable placeholder="请选择终端厂家" value-key="id">
-                        <el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="干扰源类型:">
-                    <el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
-                        placeholder="请选择干扰源类型" value-key="id">
-                        <el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-            </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 { useDictData } from '@/stores/dictData'
-import TableHeader from '@/components/table/header/index.vue'
-const dictData = useDictData()
-defineOptions({
-    name: 'harmonic-boot/detailedAnalysis/details'
-})
-const view = ref(true)
-const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
-const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
-const terminaloption = dictData.getBasicData('Dev_Manufacturers')
-const interfereoption = dictData.getBasicData('Interference_Source')
-
-
-const tableStore = new TableStore({
-    url: '/harmonic-boot/detailAnalysis/lineOverLimit',
-    method: 'POST',
-
-    column: [
-        { field: 'index', title: '序号', width: '80', formatter: (row: any) => { return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 } },
-        { field: 'provinceCompany', title: '地级区', minWidth: "150px", },
-        { field: 'cityCompany', title: '供电公司', minWidth: "150px", },
-        { field: 'subName', title: '变电站', minWidth: "150px", },
-        { field: 'lineScale', title: '电压等级', minWidth: "150px", },
-        { field: 'lineName', title: '监测点名称', minWidth: "150px", },
-        { field: 'loadType', title: '干扰源类型', minWidth: "150px", },
-        { field: 'lineObjectName', title: '监测点对象名称', minWidth: "150px", formatter: (row: any) => { return row.cellValue == null ? '/' : row.cellValue } },
-        { field: 'overDay', title: '超标天数', minWidth: "150px", },
-        { field: 'freqOverDay', title: '频率偏差超标天数', minWidth: "150px", },
-        { field: 'volDevOverDay', title: '电压偏差超标天数', minWidth: "180px", },
-        { field: 'volDisOverDay', title: '电压总畸变率超标天数', minWidth: "180px", },
-        { field: 'volContainOverDay', title: '谐波电压含有率超标天数', minWidth: "180px", },
-        { field: 'harmVolOverDay', title: '谐波电压超标天数', minWidth: "180px", },
-        { field: 'harmCurOverDay', title: '谐波电流超标天数', minWidth: "180px", },
-        {
-            title: '各次谐波电压含有率超标天数',
-            children: [
-                { field: 'overVolThreeTimes', title: '3次', minWidth: "80px", },
-                { field: 'overVolFiveTimes', title: '5次', minWidth: "80px", },
-                { field: 'overVolSevenTimes', title: '7次', minWidth: "80px", },
-                { field: 'overVolElevenTimes', title: '11次', minWidth: "80px", },
-                { field: 'overVolThirteenTimes', title: '13次', minWidth: "80px", },
-                { field: 'overVolTwentyThreeTimes', title: '23次', minWidth: "80px", },
-                { field: 'overVolTwentyFiveTimes', title: '25次', minWidth: "80px", },
-                { field: 'overVolOtherTimes', title: '其他次', minWidth: "80px", },
-
-            ],
-        },
-        {
-            title: '各次谐波电流幅值超标天数',
-            children: [
-                { field: 'overCurThreeTimes', title: '3次', minWidth: "80px", },
-                { field: 'overCurFiveTimes', title: '5次', minWidth: "80px", },
-                { field: 'overCurSevenTimes', title: '7次', minWidth: "80px", },
-                { field: 'overCurElevenTimes', title: '11次', minWidth: "80px", },
-                { field: 'overCurThirteenTimes', title: '13次', minWidth: "80px", },
-                { field: 'overCurTwentyThreeTimes', title: '23次', minWidth: "80px", },
-                { field: 'overCurTwentyFiveTimes', title: '25次', minWidth: "80px", },
-                { field: 'overCurOtherTimes', title: '其他次', minWidth: "80px", },
-
-            ],
-        },
-        { field: 'threeUnbalance', title: '三相电压不平衡度超标天数', minWidth: "180px", },
-        { field: 'negativeOverDay', title: '负序电流超标天数', minWidth: "180px", },
-        { field: 'flickerOverDay', title: '闪变超标天数', minWidth: "180px", },
-        { field: 'monitorNumber', title: '监测点编号', minWidth: "180px", formatter: (row: any) => { return row.cellValue == null ? '/' : row.cellValue }  },
-
-
-
-
-
-    ],
-    beforeSearchFun: () => {
-    },
-
-})
-tableStore.table.params.statisticalType = classificationData[0]
-tableStore.table.params.serverName = "harmonic-boot"
-tableStore.table.params.powerFlag = 2
-tableStore.table.params.monitorFlag = 2
-tableStore.table.params.scale = []
-tableStore.table.params.manufacturer = []
-tableStore.table.params.loadType = []
-const wp = ref({})
-
-provide('tableStore', tableStore)
-onMounted(() => {
-    tableStore.index()
-})
-
-
-
-
-
-</script>
+<template>
+    <div class="default-main">
+
+        <TableHeader datePicker area showExport>
+            <template #select>
+                <!-- <el-form-item label="统计类型:">
+                    <el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
+                        <el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item> -->
+                <el-form-item label="电压等级:">
+                    <el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
+                        placeholder="请选择电压等级" value-key="id">
+                        <el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="终端厂家:">
+                    <el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
+                        clearable placeholder="请选择终端厂家" value-key="id">
+                        <el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="干扰源类型:">
+                    <el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
+                        placeholder="请选择干扰源类型" value-key="id">
+                        <el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+            </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 { useDictData } from '@/stores/dictData'
+import TableHeader from '@/components/table/header/index.vue'
+const dictData = useDictData()
+defineOptions({
+    name: 'harmonic-boot/detailedAnalysis/details'
+})
+const view = ref(true)
+const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+const interfereoption = dictData.getBasicData('Interference_Source')
+
+
+const tableStore = new TableStore({
+    url: '/harmonic-boot/detailAnalysis/lineOverLimit',
+    method: 'POST',
+
+    column: [
+        { field: 'index', title: '序号', width: '80', formatter: (row: any) => { return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 } },
+        { field: 'provinceCompany', title: '地级区', minWidth: "150px", },
+        { field: 'cityCompany', title: '供电公司', minWidth: "150px", },
+        { field: 'subName', title: '变电站', minWidth: "150px", },
+        { field: 'lineScale', title: '电压等级', minWidth: "120px", },
+        { field: 'lineName', title: '监测点名称', minWidth: "150px", },
+        { field: 'loadType', title: '干扰源类型', minWidth: "150px", },
+        { field: 'lineObjectName', title: '监测点对象名称', minWidth: "150px", formatter: (row: any) => { return row.cellValue == null ? '/' : row.cellValue } },
+        { field: 'overDay', title: '超标天数', minWidth: "80px", },
+        { field: 'freqOverDay', title: '频率偏差超标天数', minWidth: "100px", },
+        { field: 'volDevOverDay', title: '电压偏差超标天数', minWidth: "100px", },
+        { field: 'volDisOverDay', title: '电压总畸变率超标天数', minWidth: "100px", },
+        { field: 'volContainOverDay', title: '谐波电压含有率超标天数', minWidth: "110px", },
+        { field: 'harmVolOverDay', title: '谐波电压超标天数', minWidth: "100px", },
+        { field: 'harmCurOverDay', title: '谐波电流超标天数', minWidth: "100px", },
+        {
+            title: '各次谐波电压含有率超标天数',
+            children: [
+                { field: 'overVolThreeTimes', title: '3次', minWidth: "70px", },
+                { field: 'overVolFiveTimes', title: '5次', minWidth: "70px", },
+                { field: 'overVolSevenTimes', title: '7次', minWidth: "70px", },
+                { field: 'overVolElevenTimes', title: '11次', minWidth: "70px", },
+                { field: 'overVolThirteenTimes', title: '13次', minWidth: "70px", },
+                { field: 'overVolTwentyThreeTimes', title: '23次', minWidth: "70px", },
+                { field: 'overVolTwentyFiveTimes', title: '25次', minWidth: "70px", },
+                { field: 'overVolOtherTimes', title: '其他次', minWidth: "70px", },
+
+            ],
+        },
+        {
+            title: '各次谐波电流幅值超标天数',
+            children: [
+                { field: 'overCurThreeTimes', title: '3次', minWidth: "70px", },
+                { field: 'overCurFiveTimes', title: '5次', minWidth: "70px", },
+                { field: 'overCurSevenTimes', title: '7次', minWidth: "70px", },
+                { field: 'overCurElevenTimes', title: '11次', minWidth: "70px", },
+                { field: 'overCurThirteenTimes', title: '13次', minWidth: "70px", },
+                { field: 'overCurTwentyThreeTimes', title: '23次', minWidth: "70px", },
+                { field: 'overCurTwentyFiveTimes', title: '25次', minWidth: "70px", },
+                { field: 'overCurOtherTimes', title: '其他次', minWidth: "70px", },
+
+            ],
+        },
+        { field: 'threeUnbalance', title: '三相电压不平衡度超标天数', minWidth: "110px", },
+        { field: 'negativeOverDay', title: '负序电流超标天数', minWidth: "100px", },
+        { field: 'flickerOverDay', title: '闪变超标天数', minWidth: "100px", },
+        { field: 'monitorNumber', title: '监测点编号', minWidth: "180px", formatter: (row: any) => { return row.cellValue == null ? '/' : row.cellValue }  },
+
+
+
+
+
+    ],
+    beforeSearchFun: () => {
+    },
+
+})
+tableStore.table.params.statisticalType = classificationData[0]
+tableStore.table.params.serverName = "harmonic-boot"
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.scale = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.loadType = []
+const wp = ref({})
+
+provide('tableStore', tableStore)
+onMounted(() => {
+    tableStore.index()
+})
+
+
+
+
+
+</script>

src/views/pqs/harmonicMonitoring/detailed/regionalStatistics/index.vue

@@ -1,385 +1,385 @@
-<template>
-    <div class="default-main">
-        <TableHeader datePicker area showExport>
-            <template #select>
-                <el-form-item label="统计类型:">
-                    <el-select
-                        v-model="tableStore.table.params.statisticalType"
-                        placeholder="请选择统计类型"
-                        value-key="id"
-                    >
-                        <el-option
-                            v-for="item in classificationData"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="电压等级:">
-                    <el-select
-                        v-model="tableStore.table.params.scale"
-                        filterable
-                        multiple
-                        collapse-tags
-                        clearable
-                        placeholder="请选择电压等级"
-                        value-key="id"
-                    >
-                        <el-option
-                            v-for="item in voltageleveloption"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="终端厂家:">
-                    <el-select
-                        v-model="tableStore.table.params.manufacturer"
-                        filterable
-                        multiple
-                        collapse-tags
-                        clearable
-                        placeholder="请选择终端厂家"
-                        value-key="id"
-                    >
-                        <el-option
-                            v-for="item in terminaloption"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="干扰源类型:">
-                    <el-select
-                        v-model="tableStore.table.params.loadType"
-                        filterable
-                        multiple
-                        collapse-tags
-                        clearable
-                        placeholder="请选择干扰源类型"
-                        value-key="id"
-                    >
-                        <el-option
-                            v-for="item in interfereoption"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef" isGroup :key="num" />
-    </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 { useDictData } from '@/stores/dictData'
-import TableHeader from '@/components/table/header/index.vue'
-const dictData = useDictData()
-defineOptions({
-    name: 'harmonic-boot/detailedAnalysis/contrast'
-})
-const view = ref(true)
-const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
-const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
-const terminaloption = dictData.getBasicData('Dev_Manufacturers')
-const interfereoption = dictData.getBasicData('Interference_Source')
-
-const num = ref(0)
-
-const tableStore = new TableStore({
-    url: '/harmonic-boot/detailAnalysis/overAreaStatistics',
-    method: 'POST',
-    isWebPaging: true,
-    column: [
-        {
-            field: 'index',
-            title: '序号',
-            width: '80',
-            formatter: (row: any) => {
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        { field: 'name', title: '电网拓扑', minWidth: '150' },
-        {
-            field: 'onlineMonitorNumber',
-            title: '在线监测点数量(个)',
-            minWidth: '200px',
-            formatter: (row: any) => {
-                return row.cellValue == -1 ? '/' : row.cellValue
-            }
-        },
-        {
-            field: 'overLimitMonitorNumber',
-            title: '超标监测点数量(个)',
-            minWidth: '200px',
-            formatter: (row: any) => {
-                return row.cellValue == -1 ? '/' : row.cellValue
-            }
-        },
-        {
-            field: 'overBiLi',
-            title: '超标监测点占比(%)',
-            minWidth: '200px',
-            formatter: (row: any) => {
-                return row.cellValue == -1 ? '/' : row.cellValue
-            }
-        },
-        {
-            title: '频率偏差超标情况',
-            children: [
-                {
-                    field: 'frequencyMonitorNumber',
-                    title: '超标点数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'frequencyBiLi',
-                    title: '超标占比(%)',
-                    minWidth: '120px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'frequencyOverDayBiLi',
-                    title: '平均超标天数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                }
-            ]
-        },
-        {
-            title: '电压偏差超标情况',
-            children: [
-                {
-                    field: 'voltageMonitorNumber',
-                    title: '超标点数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'voltageBiLi',
-                    title: '超标占比(%)',
-                    minWidth: '120px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'voltageOverDayBiLi',
-                    title: '平均超标天数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                }
-            ]
-        },
-        {
-            title: '谐波电压超标情况',
-            children: [
-                {
-                    field: 'harmonicVoltageMonitorNumber',
-                    title: '超标点数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'harmonicVoltageBiLi',
-                    title: '超标占比(%)',
-                    minWidth: '120px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'harmonicVoltageOverDayBiLi',
-                    title: '平均超标天数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                }
-            ]
-        },
-        {
-            title: '谐波电流超标情况',
-            children: [
-                {
-                    field: 'harmonicCurrentMonitorNumber',
-                    title: '超标点数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'harmonicCurrentBiLi',
-                    title: '超标占比(%)',
-                    minWidth: '120px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'harmonicCurrentOverDayBiLi',
-                    title: '平均超标天数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                }
-            ]
-        },
-        {
-            title: '三相电压不平衡度超标情况',
-            children: [
-                {
-                    field: 'threePhaseVoltageMonitorNumber',
-                    title: '超标点数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'threePhaseVoltageBiLi',
-                    title: '超标占比(%)',
-                    minWidth: '120px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'threePhaseVoltageOverDayBiLi',
-                    title: '平均超标天数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                }
-            ]
-        },
-        {
-            title: '闪变超标情况',
-            children: [
-                {
-                    field: 'flickerMonitorNumber',
-                    title: '超标点数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'flickerBiLi',
-                    title: '超标占比(%)',
-                    minWidth: '120px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'flickerOverDayBiLi',
-                    title: '平均超标天数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                }
-            ]
-        },
-        {
-            title: '负序电流超标情况',
-            children: [
-                {
-                    field: 'negativeMonitorNumber',
-                    title: '超标点数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'negativeBiLi',
-                    title: '超标占比(%)',
-                    minWidth: '120px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'negativeOverDayBiLi',
-                    title: '平均超标天数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                }
-            ]
-        },
-        {
-            title: '间谐波电压超标情况',
-            children: [
-                {
-                    field: 'interHarmonicMonitorNumber',
-                    title: '超标点数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'interHarmonicBiLi',
-                    title: '超标占比(%)',
-                    minWidth: '120px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                },
-                {
-                    field: 'interHarmonicOverDayBiLi',
-                    title: '平均超标天数(天/点)',
-                    minWidth: '200px',
-                    formatter: (row: any) => {
-                        return row.cellValue == -1 ? '/' : row.cellValue
-                    }
-                }
-            ]
-        }
-    ],
-    beforeSearchFun: () => {
-        tableStore.options.column[1].title = tableStore.table.params.statisticalType.name
-        num.value += 1
-    }
-})
-tableStore.table.params.statisticalType = classificationData[0]
-tableStore.table.params.serverName = 'harmonic-boot'
-tableStore.table.params.powerFlag = 2
-tableStore.table.params.monitorFlag = 2
-tableStore.table.params.scale = []
-tableStore.table.params.manufacturer = []
-tableStore.table.params.loadType = []
-const wp = ref({})
-
-provide('tableStore', tableStore)
-onMounted(() => {
-    tableStore.index()
-})
-</script>
+<template>
+    <div class="default-main">
+        <TableHeader datePicker area showExport>
+            <template #select>
+                <el-form-item label="统计类型:">
+                    <el-select
+                        v-model="tableStore.table.params.statisticalType"
+                        placeholder="请选择统计类型"
+                        value-key="id"
+                    >
+                        <el-option
+                            v-for="item in classificationData"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="电压等级:">
+                    <el-select
+                        v-model="tableStore.table.params.scale"
+                        filterable
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择电压等级"
+                        value-key="id"
+                    >
+                        <el-option
+                            v-for="item in voltageleveloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="终端厂家:">
+                    <el-select
+                        v-model="tableStore.table.params.manufacturer"
+                        filterable
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择终端厂家"
+                        value-key="id"
+                    >
+                        <el-option
+                            v-for="item in terminaloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="干扰源类型:">
+                    <el-select
+                        v-model="tableStore.table.params.loadType"
+                        filterable
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择干扰源类型"
+                        value-key="id"
+                    >
+                        <el-option
+                            v-for="item in interfereoption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" isGroup :key="num" />
+    </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 { useDictData } from '@/stores/dictData'
+import TableHeader from '@/components/table/header/index.vue'
+const dictData = useDictData()
+defineOptions({
+    name: 'harmonic-boot/detailedAnalysis/contrast'
+})
+const view = ref(true)
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+const interfereoption = dictData.getBasicData('Interference_Source')
+
+const num = ref(0)
+
+const tableStore = new TableStore({
+    url: '/harmonic-boot/detailAnalysis/overAreaStatistics',
+    method: 'POST',
+    isWebPaging: true,
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'name', title: '电网拓扑', minWidth: '150' },
+        {
+            field: 'onlineMonitorNumber',
+            title: '在线监测点数量(个)',
+            minWidth: '100px',
+            formatter: (row: any) => {
+                return row.cellValue == -1 ? '/' : row.cellValue
+            }
+        },
+        {
+            field: 'overLimitMonitorNumber',
+            title: '超标监测点数量(个)',
+            minWidth: '100px',
+            formatter: (row: any) => {
+                return row.cellValue == -1 ? '/' : row.cellValue
+            }
+        },
+        {
+            field: 'overBiLi',
+            title: '超标监测点占比(%)',
+            minWidth: '100px',
+            formatter: (row: any) => {
+                return row.cellValue == -1 ? '/' : row.cellValue
+            }
+        },
+        {
+            title: '频率偏差超标情况',
+            children: [
+                {
+                    field: 'frequencyMonitorNumber',
+                    title: '超标点数(天/点)',
+                    minWidth: '140px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'frequencyBiLi',
+                    title: '超标占比(%)',
+                    minWidth: '100px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'frequencyOverDayBiLi',
+                    title: '平均超标天数(天/点)',
+                    minWidth: '150px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                }
+            ]
+        },
+        {
+            title: '电压偏差超标情况',
+            children: [
+                {
+                    field: 'voltageMonitorNumber',
+                    title: '超标点数(天/点)',
+                    minWidth: '140px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'voltageBiLi',
+                    title: '超标占比(%)',
+                    minWidth: '100px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'voltageOverDayBiLi',
+                    title: '平均超标天数(天/点)',
+                    minWidth: '150px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                }
+            ]
+        },
+        {
+            title: '谐波电压超标情况',
+            children: [
+                {
+                    field: 'harmonicVoltageMonitorNumber',
+                    title: '超标点数(天/点)',
+                    minWidth: '140px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'harmonicVoltageBiLi',
+                    title: '超标占比(%)',
+                    minWidth: '100px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'harmonicVoltageOverDayBiLi',
+                    title: '平均超标天数(天/点)',
+                    minWidth: '150px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                }
+            ]
+        },
+        {
+            title: '谐波电流超标情况',
+            children: [
+                {
+                    field: 'harmonicCurrentMonitorNumber',
+                    title: '超标点数(天/点)',
+                    minWidth: '140px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'harmonicCurrentBiLi',
+                    title: '超标占比(%)',
+                    minWidth: '100px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'harmonicCurrentOverDayBiLi',
+                    title: '平均超标天数(天/点)',
+                    minWidth: '150px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                }
+            ]
+        },
+        {
+            title: '三相电压不平衡度超标情况',
+            children: [
+                {
+                    field: 'threePhaseVoltageMonitorNumber',
+                    title: '超标点数(天/点)',
+                    minWidth: '140px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'threePhaseVoltageBiLi',
+                    title: '超标占比(%)',
+                    minWidth: '100px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'threePhaseVoltageOverDayBiLi',
+                    title: '平均超标天数(天/点)',
+                    minWidth: '150px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                }
+            ]
+        },
+        {
+            title: '闪变超标情况',
+            children: [
+                {
+                    field: 'flickerMonitorNumber',
+                    title: '超标点数(天/点)',
+                    minWidth: '140px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'flickerBiLi',
+                    title: '超标占比(%)',
+                    minWidth: '100px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'flickerOverDayBiLi',
+                    title: '平均超标天数(天/点)',
+                    minWidth: '150px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                }
+            ]
+        },
+        {
+            title: '负序电流超标情况',
+            children: [
+                {
+                    field: 'negativeMonitorNumber',
+                    title: '超标点数(天/点)',
+                    minWidth: '140px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'negativeBiLi',
+                    title: '超标占比(%)',
+                    minWidth: '100px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'negativeOverDayBiLi',
+                    title: '平均超标天数(天/点)',
+                    minWidth: '150px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                }
+            ]
+        },
+        {
+            title: '间谐波电压超标情况',
+            children: [
+                {
+                    field: 'interHarmonicMonitorNumber',
+                    title: '超标点数(天/点)',
+                    minWidth: '140px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'interHarmonicBiLi',
+                    title: '超标占比(%)',
+                    minWidth: '100px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                },
+                {
+                    field: 'interHarmonicOverDayBiLi',
+                    title: '平均超标天数(天/点)',
+                    minWidth: '150px',
+                    formatter: (row: any) => {
+                        return row.cellValue == -1 ? '/' : row.cellValue
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        tableStore.options.column[1].title = tableStore.table.params.statisticalType.name
+        num.value += 1
+    }
+})
+tableStore.table.params.statisticalType = classificationData[0]
+tableStore.table.params.serverName = 'harmonic-boot'
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.scale = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.loadType = []
+const wp = ref({})
+
+provide('tableStore', tableStore)
+onMounted(() => {
+    tableStore.index()
+})
+</script>

src/views/pqs/voltageSags/Region/components/Compatibility.vue

@@ -1,496 +1,494 @@
-<template>
-    <div class="flex" style="margin: 15px 0">
-        <span style="width: 100px; margin-top: 3px">电压等级:</span>
-        <el-checkbox
-            :indeterminate="isIndeterminate"
-            v-model="checkAll"
-            @change="handleCheckAllChange"
-            style="margin-right: 28px"
-        >
-            全选
-        </el-checkbox>
-        <el-checkbox-group
-            v-model="checkedVoltage"
-            @change="handleCheckedVoltageChange"
-            style="height: 72px; overflow-y: auto; flex: 1"
-        >
-            <el-checkbox v-for="(item, index) in grade" :label="item" :key="index">{{ item.name }}</el-checkbox>
-        </el-checkbox-group>
-    </div>
-    <div class="flex" style="margin: 15px 0">
-        <span style="width: 100px; margin-top: 3px">干扰源类型:</span>
-        <el-checkbox
-            :indeterminate="isIndeterminate1"
-            v-model="checkAll1"
-            @change="handleCheckAllChange1"
-            style="margin-right: 28px"
-        >
-            全选
-        </el-checkbox>
-        <el-checkbox-group
-            v-model="checkedSource"
-            @change="handleCheckedSourceChange"
-            style="height: 72px; overflow-y: auto; flex: 1"
-        >
-            <el-checkbox v-for="(item, index) in type" :label="item" :key="index">{{ item.name }}</el-checkbox>
-        </el-checkbox-group>
-    </div>
-    <div class="flex" style="margin: 15px 0">
-        <span style="width: 100px; line-height: 32px">兼容曲线:</span>
-        <el-radio-group v-model="radio" @change="radioChange">
-            <el-radio label="ITIC">ITIC</el-radio>
-            <el-radio label="F47">F47</el-radio>
-        </el-radio-group>
-    </div>
-    <my-echart class="bars_w" :options="echartList" />
-
-    <vxe-table class="dw" :data="TableData" height="50px" v-bind="defaultAttribute">
-        <vxe-column field="name" title="名称" width="100px"></vxe-column>
-        <vxe-column field="totalEvents" title="事件总数" width="100px"></vxe-column>
-        <vxe-column field="tolerable" title="可容忍" width="100px"></vxe-column>
-        <vxe-column field="Intolerable" title="不可容忍" width="100px"></vxe-column>
-    </vxe-table>
-</template>
-<script setup lang="ts">
-import { useDictData } from '@/stores/dictData'
-import MyEchart from '@/components/echarts/MyEchart.vue'
-import { mainHeight } from '@/utils/layout'
-import { defaultAttribute } from '@/components/table/defaultAttribute'
-import { ref, reactive } from 'vue'
-const dictData = useDictData()
-const isIndeterminate = ref(false)
-const isIndeterminate1 = ref(false)
-const checkAll = ref(true)
-const checkAll1 = ref(true)
-const radio = ref('ITIC')
-const echartList = ref({})
-const ITIC = ref({})
-const F47 = ref({})
-const pointI: any = ref([])
-const pointIun: any = ref([])
-const pointF: any = ref([])
-const pointFun: any = ref([])
-const datalist: any = ref([])
-const TableData = ref([
-    {
-        name: '事件个数',
-        totalEvents: '',
-        tolerable: '',
-        Intolerable: ''
-    }
-])
-const checkedVoltage: any = ref(ref(dictData.getBasicData('Dev_Voltage_Stand')))
-const checkedSource: any = ref(dictData.getBasicData('Interference_Source'))
-const grade = ref(dictData.getBasicData('Dev_Voltage_Stand'))
-const type = ref(dictData.getBasicData('Interference_Source'))
-// 电压等级多选
-const handleCheckedVoltageChange = (val: any) => {
-    const checkedCount = val.length
-    checkAll.value = checkedCount === grade.value.length
-    isIndeterminate.value = checkedCount > 0 && checkedCount < grade.value.length
-}
-const handleCheckAllChange = (val: any) => {
-    checkedVoltage.value = val ? grade.value : []
-    isIndeterminate.value = false
-}
-// 干扰源类型多选
-const handleCheckAllChange1 = (val: any) => {
-    checkedSource.value = val ? type.value : []
-    isIndeterminate.value = false
-}
-const handleCheckedSourceChange = (val: any) => {
-    const checkedCount = val.length
-    checkAll1.value = checkedCount === type.value.length
-    isIndeterminate1.value = checkedCount > 0 && checkedCount < type.value.length
-}
-
-const info = async (list: any) => {
-    datalist.value = []
-    list.forEach((item: any) => {
-        // if (item.eventValue < 2 && item.eventValue > 0) {
-        datalist.value.push(item)
-        // }
-    })
-    await gongfunction()
-
-    ITIC.value = {
-        title: {
-            text: 'ITIC曲线'
-        },
-        tooltip: {
-            formatter: function (a: any) {
-                if (a[0].value[4] == undefined) {
-                    return
-                }
-
-                let relVal = ''
-                relVal = "<font style='color:" + "'>监测点名称:" + '&nbsp' + '&nbsp' + a[0].value[7] + '</font><br/>'
-                relVal += "<font style='color:" + "'>供电公司:" + '&nbsp' + '&nbsp' + a[0].value[3] + '</font><br/>'
-                relVal += "<font style='color:" + "'>变电站:" + '&nbsp' + '&nbsp' + a[0].value[4] + '</font><br/>'
-                relVal += "<font style='color:" + "'>发生时刻:" + '&nbsp' + '&nbsp' + a[0].value[2] + '</font><br/>'
-                relVal +=
-                    "<font style='color:" +
-                    "'>持续时间:" +
-                    '&nbsp' +
-                    '&nbsp' +
-                    a[0].value[0].toFixed(3) +
-                    's</font><br/>'
-                relVal +=
-                    "<font style='color:" + "'>特征幅值:" + '&nbsp' + '&nbsp' + a[0].value[1].toFixed(3) + '%</font>'
-                return relVal
-            }
-        },
-        legend: {
-            data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
-            // selectedMode: false,
-            left: '80px',
-            top: '18px'
-        },
-        color: ['#FF8C00', '#00BFFF', 'green', 'red'],
-        xAxis: {
-            type: 'log',
-            min: '0.001',
-            max: '1000',
-            name: 's',
-            splitLine: { show: false }
-        },
-        yAxis: {
-            type: 'value',
-            splitNumber: 10,
-            minInterval: 3,
-            name: '%'
-        },
-        dataZoom: {
-            type: null,
-            show: false
-        },
-        options: {
-            series: [
-                {
-                    name: '上限',
-                    type: 'line',
-                    data: [
-                        [0.001, 200],
-                        [0.003, 140],
-                        [0.003, 120],
-                        [0.5, 120],
-                        [0.5, 110],
-                        [10, 110],
-                        [1000, 110]
-                    ],
-                    showSymbol: false,
-                    tooltips: {
-                        show: false
-                    }
-                },
-                {
-                    name: '下限',
-                    type: 'line',
-                    data: [
-                        [0.02, 0],
-                        [0.02, 70],
-                        [0.5, 70],
-                        [0.5, 80],
-                        [10, 80],
-                        [10, 90],
-                        [1000, 90]
-                    ],
-                    showSymbol: false,
-                    tooltips: {
-                        show: false
-                    }
-                },
-                {
-                    name: '可容忍事件',
-                    type: 'scatter',
-                    symbol: 'circle',
-                    data: pointI.value
-                },
-                {
-                    name: '不可容忍事件',
-                    type: 'scatter',
-                    symbol: 'circle',
-                    data: pointIun.value
-                }
-            ]
-        }
-    }
-    F47.value = {
-        title: {
-            text: 'F47曲线'
-        },
-        tooltip: {
-            formatter: function (a: any) {
-                if (a[0].value[4] == undefined) {
-                    return
-                }
-
-                let relVal = ''
-                relVal = "<font style='color:" + "'>监测点名称:" + '&nbsp' + '&nbsp' + a[0].value[7] + '</font><br/>'
-                relVal += "<font style='color:" + "'>供电公司:" + '&nbsp' + '&nbsp' + a[0].value[3] + '</font><br/>'
-                relVal += "<font style='color:" + "'>变电站:" + '&nbsp' + '&nbsp' + a[0].value[4] + '</font><br/>'
-                relVal += "<font style='color:" + "'>发生时刻:" + '&nbsp' + '&nbsp' + a[0].value[2] + '</font><br/>'
-                relVal +=
-                    "<font style='color:" +
-                    "'>持续时间:" +
-                    '&nbsp' +
-                    '&nbsp' +
-                    Math.floor(a[0].value[0] * 1000) / 1000 +
-                    's</font><br/>'
-                relVal +=
-                    "<font style='color:" +
-                    "'>特征幅值:" +
-                    '&nbsp' +
-                    '&nbsp' +
-                    Math.floor(a[0].value[1] * 1000) / 1000 +
-                    '%</font>'
-                return relVal
-            }
-        },
-        legend: {
-            data: ['分割线', '可容忍事件', '不可容忍事件'],
-            // selectedMode: false,
-            left: '80px',
-            top: '18px'
-        },
-        color: ['#DAA520', 'green', 'red'],
-        xAxis: {
-            type: 'log',
-            min: '0.001',
-            max: '1000',
-            name: 's',
-            splitLine: { show: false }
-        },
-        yAxis: {
-            type: 'value',
-            splitNumber: 10,
-            minInterval: 3,
-            name: '%'
-        },
-        dataZoom: {
-            type: null,
-            show: false
-        },
-        options: {
-            series: [
-                {
-                    name: '分割线',
-                    type: 'line',
-                    data: [
-                        [0.05, 0],
-                        [0.05, 50],
-                        [0.2, 50],
-                        [0.2, 70],
-                        [0.5, 70],
-                        [0.5, 80],
-                        [10, 80],
-                        [1000, 80]
-                    ],
-                    showSymbol: false,
-                    tooltips: {
-                        show: false
-                    }
-                },
-                {
-                    name: '可容忍事件',
-                    type: 'scatter',
-                    symbol: 'circle',
-                    data: pointF.value
-                },
-                {
-                    name: '不可容忍事件',
-                    type: 'scatter',
-                    symbol: 'circle',
-                    data: pointFun.value
-                }
-            ]
-        }
-    }
-    radioChange(radio.value)
-}
-const radioChange = (e: any) => {
-    if (e == 'ITIC') {
-        echartList.value = ITIC.value
-        TableData.value[0].totalEvents = pointI.value.length + pointIun.value.length
-        TableData.value[0].tolerable = pointI.value.length
-        TableData.value[0].Intolerable = pointIun.value.length
-    } else if (e == 'F47') {
-        echartList.value = F47.value
-        TableData.value[0].totalEvents = pointF.value.length + pointFun.value.length
-        TableData.value[0].tolerable = pointF.value.length
-        TableData.value[0].Intolerable = pointFun.value.length
-    }
-}
-
-const gongfunction = () => {
-    var standI = 0
-    var unstandI = 0
-    var standF = 0
-    var unstandF = 0
-    pointI.value = []
-    pointIun.value = []
-    pointF.value = []
-    pointFun.value = []
-    var total = 0
-    total = datalist.value.length
-    if (total == 0) {
-    } else {
-        for (var i = 0; i < datalist.value.length; i++) {
-            var point = []
-            var xx = datalist.value[i].persistTime
-            var yy = datalist.value[i].eventValue * 100
-            var time = datalist.value[i].time.replace('T', ' ')
-            var company = datalist.value[i].gdName
-            var substation = datalist.value[i].subName
-            var index = datalist.value[i].lineId
-            var eventId = datalist.value[i].eventId
-            var lineName = datalist.value[i].lineName 
-            point = [xx, yy, time, company, substation, index, eventId, lineName]
-
-            if (xx <= 0.003) {
-                var line = 0
-                line = 230 - 30000 * xx
-                if (yy > line) {
-                    unstandI++
-                    pointIun.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'red' } }
-                    })
-                } else {
-                    standI++
-                    pointI.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'green' } }
-                    })
-                }
-            } else if (xx <= 0.02) {
-                if (yy > 120) {
-                    unstandI++
-                    pointIun.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'red' } }
-                    })
-                } else {
-                    standI++
-                    pointI.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'green' } }
-                    })
-                }
-            } else if (xx <= 0.5) {
-                if (yy > 120 || yy < 70) {
-                    unstandI++
-                    pointIun.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'red' } }
-                    })
-                } else {
-                    standI++
-                    pointI.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'green' } }
-                    })
-                }
-            } else if (xx <= 10) {
-                if (yy > 110 || yy < 80) {
-                    unstandI++
-                    pointIun.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'red' } }
-                    })
-                } else {
-                    standI++
-                    pointI.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'green' } }
-                    })
-                }
-            } else {
-                if (yy > 110 || yy < 90) {
-                    unstandI++
-                    pointIun.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'red' } }
-                    })
-                } else {
-                    standI++
-                    pointI.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'green' } }
-                    })
-                }
-            }
-
-            if (xx < 0.05) {
-                standF++
-                pointF.value.push({
-                    value: point,
-                    itemStyle: { normal: { color: 'green' } }
-                })
-            } else if (xx < 0.2) {
-                if (yy > 50) {
-                    standF++
-                    pointF.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'green' } }
-                    })
-                } else {
-                    unstandF++
-                    pointFun.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'red' } }
-                    })
-                }
-            } else if (xx < 0.5) {
-                if (yy > 70) {
-                    standF++
-                    pointF.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'green' } }
-                    })
-                } else {
-                    unstandF++
-                    pointFun.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'red' } }
-                    })
-                }
-            } else {
-                if (yy > 80) {
-                    standF++
-                    pointF.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'green' } }
-                    })
-                } else {
-                    unstandF++
-                    pointFun.value.push({
-                        value: point,
-                        itemStyle: { normal: { color: 'red' } }
-                    })
-                }
-            }
-        }
-    }
-}
-
-defineExpose({ checkedVoltage, checkedSource, info })
-const layout = mainHeight(390) as any
-</script>
-<style lang="scss" scoped>
-.flex {
-    display: flex;
-}
-.bars_w {
-    height: calc(v-bind('layout.height'));
-}
-.dw {
-    position: absolute;
-    top: 210px;
-    right: 70px;
-}
-:deep(.vxe-table--body-wrapper) {
-    min-height: 30px !important;
-    height: 40px !important;
-}
-</style>
+<template>
+    <div class="flex">
+        <span style="width: 100px; margin-top: 3px">电压等级:</span>
+        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
+            style="margin-right: 28px">
+            全选
+        </el-checkbox>
+        <el-checkbox-group v-model="checkedVoltage" @change="handleCheckedVoltageChange"
+            style="height: 72px; overflow-y: auto; flex: 1">
+            <el-checkbox v-for="(item, index) in grade" :label="item" :key="index">{{ item.name }}</el-checkbox>
+        </el-checkbox-group>
+    </div>
+    <div class="flex">
+        <span style="width: 100px; margin-top: 3px">干扰源类型:</span>
+        <el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1"
+            style="margin-right: 28px">
+            全选
+        </el-checkbox>
+        <el-checkbox-group v-model="checkedSource" @change="handleCheckedSourceChange"
+            style="height: 72px; overflow-y: auto; flex: 1">
+            <el-checkbox v-for="(item, index) in type" :label="item" :key="index">{{ item.name }}</el-checkbox>
+        </el-checkbox-group>
+    </div>
+    <div class="flex">
+        <span style="width: 100px; line-height: 32px">兼容曲线:</span>
+        <el-radio-group v-model="radio" @change="radioChange">
+            <el-radio label="ITIC">ITIC</el-radio>
+            <el-radio label="F47">F47</el-radio>
+        </el-radio-group>
+    </div>
+    <my-echart class="bars_w" :options="echartList" />
+
+    <vxe-table class="dw" :data="TableData" height="50px" v-bind="defaultAttribute">
+        <vxe-column field="name" title="名称" width="100px"></vxe-column>
+        <vxe-column field="totalEvents" title="事件总数" width="100px"></vxe-column>
+        <vxe-column field="tolerable" title="可容忍" width="100px"></vxe-column>
+        <vxe-column field="Intolerable" title="不可容忍" width="100px"></vxe-column>
+    </vxe-table>
+</template>
+<script setup lang="ts">
+import { useDictData } from '@/stores/dictData'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { ref, reactive } from 'vue'
+import { Bottom } from '@element-plus/icons-vue/dist/types'
+const dictData = useDictData()
+const isIndeterminate = ref(false)
+const isIndeterminate1 = ref(false)
+const checkAll = ref(true)
+const checkAll1 = ref(true)
+const radio = ref('ITIC')
+const echartList = ref({})
+const ITIC = ref({})
+const F47 = ref({})
+const pointI: any = ref([])
+const pointIun: any = ref([])
+const pointF: any = ref([])
+const pointFun: any = ref([])
+const datalist: any = ref([])
+const TableData = ref([
+    {
+        name: '事件个数',
+        totalEvents: '',
+        tolerable: '',
+        Intolerable: ''
+    }
+])
+const checkedVoltage: any = ref(ref(dictData.getBasicData('Dev_Voltage_Stand')))
+const checkedSource: any = ref(dictData.getBasicData('Interference_Source'))
+const grade = ref(dictData.getBasicData('Dev_Voltage_Stand'))
+const type = ref(dictData.getBasicData('Interference_Source'))
+// 电压等级多选
+const handleCheckedVoltageChange = (val: any) => {
+    const checkedCount = val.length
+    checkAll.value = checkedCount === grade.value.length
+    isIndeterminate.value = checkedCount > 0 && checkedCount < grade.value.length
+}
+const handleCheckAllChange = (val: any) => {
+    checkedVoltage.value = val ? grade.value : []
+    isIndeterminate.value = false
+}
+// 干扰源类型多选
+const handleCheckAllChange1 = (val: any) => {
+    checkedSource.value = val ? type.value : []
+    isIndeterminate.value = false
+}
+const handleCheckedSourceChange = (val: any) => {
+    const checkedCount = val.length
+    checkAll1.value = checkedCount === type.value.length
+    isIndeterminate1.value = checkedCount > 0 && checkedCount < type.value.length
+}
+
+const info = async (list: any) => {
+    datalist.value = []
+    list.forEach((item: any) => {
+        // if (item.eventValue < 2 && item.eventValue > 0) {
+        datalist.value.push(item)
+        // }
+    })
+    await gongfunction()
+
+    ITIC.value = {
+        title: {
+            text: 'ITIC曲线'
+        },
+        tooltip: {
+            formatter: function (a: any) {
+                if (a[0].value[4] == undefined) {
+                    return
+                }
+
+                let relVal = ''
+                relVal = "<font style='color:" + "'>监测点名称:" + '&nbsp' + '&nbsp' + a[0].value[7] + '</font><br/>'
+                relVal += "<font style='color:" + "'>供电公司:" + '&nbsp' + '&nbsp' + a[0].value[3] + '</font><br/>'
+                relVal += "<font style='color:" + "'>变电站:" + '&nbsp' + '&nbsp' + a[0].value[4] + '</font><br/>'
+                relVal += "<font style='color:" + "'>发生时刻:" + '&nbsp' + '&nbsp' + a[0].value[2] + '</font><br/>'
+                relVal +=
+                    "<font style='color:" +
+                    "'>持续时间:" +
+                    '&nbsp' +
+                    '&nbsp' +
+                    a[0].value[0].toFixed(3) +
+                    's</font><br/>'
+                relVal +=
+                    "<font style='color:" + "'>特征幅值:" + '&nbsp' + '&nbsp' + a[0].value[1].toFixed(3) + '%</font>'
+                return relVal
+            }
+        },
+        legend: {
+            data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
+            // selectedMode: false,
+            left: '80px',
+            top: '18px'
+        },
+        grid: {
+            top: '60px',
+            bottom: '10px'
+        },
+        color: ['#FF8C00', '#00BFFF', 'green', 'red'],
+        xAxis: {
+            type: 'log',
+            min: '0.001',
+            max: '1000',
+            name: 's',
+            splitLine: { show: false }
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 10,
+            minInterval: 3,
+            name: '%'
+        },
+        dataZoom: {
+            type: null,
+            show: false
+        },
+        options: {
+            series: [
+                {
+                    name: '上限',
+                    type: 'line',
+                    data: [
+                        [0.001, 200],
+                        [0.003, 140],
+                        [0.003, 120],
+                        [0.5, 120],
+                        [0.5, 110],
+                        [10, 110],
+                        [1000, 110]
+                    ],
+                    showSymbol: false,
+                    tooltips: {
+                        show: false
+                    }
+                },
+                {
+                    name: '下限',
+                    type: 'line',
+                    data: [
+                        [0.02, 0],
+                        [0.02, 70],
+                        [0.5, 70],
+                        [0.5, 80],
+                        [10, 80],
+                        [10, 90],
+                        [1000, 90]
+                    ],
+                    showSymbol: false,
+                    tooltips: {
+                        show: false
+                    }
+                },
+                {
+                    name: '可容忍事件',
+                    type: 'scatter',
+                    symbol: 'circle',
+                    data: pointI.value
+                },
+                {
+                    name: '不可容忍事件',
+                    type: 'scatter',
+                    symbol: 'circle',
+                    data: pointIun.value
+                }
+            ]
+        }
+    }
+    F47.value = {
+        title: {
+            text: 'F47曲线'
+        },
+        tooltip: {
+            formatter: function (a: any) {
+                if (a[0].value[4] == undefined) {
+                    return
+                }
+
+                let relVal = ''
+                relVal = "<font style='color:" + "'>监测点名称:" + '&nbsp' + '&nbsp' + a[0].value[7] + '</font><br/>'
+                relVal += "<font style='color:" + "'>供电公司:" + '&nbsp' + '&nbsp' + a[0].value[3] + '</font><br/>'
+                relVal += "<font style='color:" + "'>变电站:" + '&nbsp' + '&nbsp' + a[0].value[4] + '</font><br/>'
+                relVal += "<font style='color:" + "'>发生时刻:" + '&nbsp' + '&nbsp' + a[0].value[2] + '</font><br/>'
+                relVal +=
+                    "<font style='color:" +
+                    "'>持续时间:" +
+                    '&nbsp' +
+                    '&nbsp' +
+                    Math.floor(a[0].value[0] * 1000) / 1000 +
+                    's</font><br/>'
+                relVal +=
+                    "<font style='color:" +
+                    "'>特征幅值:" +
+                    '&nbsp' +
+                    '&nbsp' +
+                    Math.floor(a[0].value[1] * 1000) / 1000 +
+                    '%</font>'
+                return relVal
+            }
+        },
+        legend: {
+            data: ['分割线', '可容忍事件', '不可容忍事件'],
+            // selectedMode: false,
+            left: '80px',
+            top: '18px'
+        },
+        grid: {
+            top: '60px',
+            bottom: '10px'
+        },
+        color: ['#DAA520', 'green', 'red'],
+        xAxis: {
+            type: 'log',
+            min: '0.001',
+            max: '1000',
+            name: 's',
+            splitLine: { show: false }
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 10,
+            minInterval: 3,
+            name: '%'
+        },
+        dataZoom: {
+            type: null,
+            show: false
+        },
+        options: {
+            series: [
+                {
+                    name: '分割线',
+                    type: 'line',
+                    data: [
+                        [0.05, 0],
+                        [0.05, 50],
+                        [0.2, 50],
+                        [0.2, 70],
+                        [0.5, 70],
+                        [0.5, 80],
+                        [10, 80],
+                        [1000, 80]
+                    ],
+                    showSymbol: false,
+                    tooltips: {
+                        show: false
+                    }
+                },
+                {
+                    name: '可容忍事件',
+                    type: 'scatter',
+                    symbol: 'circle',
+                    data: pointF.value
+                },
+                {
+                    name: '不可容忍事件',
+                    type: 'scatter',
+                    symbol: 'circle',
+                    data: pointFun.value
+                }
+            ]
+        }
+    }
+    radioChange(radio.value)
+}
+const radioChange = (e: any) => {
+    if (e == 'ITIC') {
+        echartList.value = ITIC.value
+        TableData.value[0].totalEvents = pointI.value.length + pointIun.value.length
+        TableData.value[0].tolerable = pointI.value.length
+        TableData.value[0].Intolerable = pointIun.value.length
+    } else if (e == 'F47') {
+        echartList.value = F47.value
+        TableData.value[0].totalEvents = pointF.value.length + pointFun.value.length
+        TableData.value[0].tolerable = pointF.value.length
+        TableData.value[0].Intolerable = pointFun.value.length
+    }
+}
+
+const gongfunction = () => {
+    var standI = 0
+    var unstandI = 0
+    var standF = 0
+    var unstandF = 0
+    pointI.value = []
+    pointIun.value = []
+    pointF.value = []
+    pointFun.value = []
+    var total = 0
+    total = datalist.value.length
+    if (total == 0) {
+    } else {
+        for (var i = 0; i < datalist.value.length; i++) {
+            var point = []
+            var xx = datalist.value[i].persistTime
+            var yy = datalist.value[i].eventValue * 100
+            var time = datalist.value[i].time.replace('T', ' ')
+            var company = datalist.value[i].gdName
+            var substation = datalist.value[i].subName
+            var index = datalist.value[i].lineId
+            var eventId = datalist.value[i].eventId
+            var lineName = datalist.value[i].lineName
+            point = [xx, yy, time, company, substation, index, eventId, lineName]
+
+            if (xx <= 0.003) {
+                var line = 0
+                line = 230 - 30000 * xx
+                if (yy > line) {
+                    unstandI++
+                    pointIun.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.02) {
+                if (yy > 120) {
+                    unstandI++
+                    pointIun.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.5) {
+                if (yy > 120 || yy < 70) {
+                    unstandI++
+                    pointIun.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 10) {
+                if (yy > 110 || yy < 80) {
+                    unstandI++
+                    pointIun.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else {
+                if (yy > 110 || yy < 90) {
+                    unstandI++
+                    pointIun.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            }
+
+            if (xx < 0.05) {
+                standF++
+                pointF.value.push({
+                    value: point,
+                    itemStyle: { normal: { color: 'green' } }
+                })
+            } else if (xx < 0.2) {
+                if (yy > 50) {
+                    standF++
+                    pointF.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else if (xx < 0.5) {
+                if (yy > 70) {
+                    standF++
+                    pointF.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else {
+                if (yy > 80) {
+                    standF++
+                    pointF.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.value.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            }
+        }
+    }
+}
+
+defineExpose({ checkedVoltage, checkedSource, info })
+const layout = mainHeight(320) as any
+</script>
+<style lang="scss" scoped>
+.flex {
+    display: flex;
+}
+
+.bars_w {
+    height: calc(v-bind('layout.height'));
+}
+
+.dw {
+    position: absolute;
+    top: 160px;
+    right: 70px;
+}
+
+:deep(.vxe-table--body-wrapper) {
+    min-height: 30px !important;
+    height: 40px !important;
+}
+</style>

src/views/pqs/voltageSags/Region/transientList/index.vue

@@ -1,356 +1,356 @@
-<template>
-    <div class="default-main">
-        <div v-show="view">
-            <TableHeader datePicker showExport>
-                <template #select>
-                    <el-form-item label="统计类型:">
-                        <el-radio-group v-model="tableStore.table.params.isType">
-                            <el-radio-button :label="0">在线</el-radio-button>
-                            <el-radio-button :label="1">离线</el-radio-button>
-                        </el-radio-group>
-                    </el-form-item>
-                    <el-form-item label="筛选">
-                        <el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
-                    </el-form-item>
-                    <el-form-item label="触发类型:">
-                        <el-select v-model="tableStore.table.params.waveType" placeholder="请选择触发类型" clearable multiple
-                            collapse-tags style="width: 100%">
-                            <el-option v-for="item in triggeroptions" :key="item.id" :label="item.name"
-                                :value="item.id"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="是否有波形:">
-                        <el-select v-model="tableStore.table.params.fileFlag" placeholder="请选择是否存在波形" clearable
-                            style="width: 100%">
-                            <el-option v-for="item in wareaoptions" :key="item.id" :label="item.label"
-                                :value="item.id"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="暂态持续时间(s):">
-                        <el-input v-model="tableStore.table.params.persistMin" placeholder="请输入X秒"
-                            onkeyup="value=value.replace(/[^\d.]/g,'')" clearable style="width: 94px"></el-input>
-                        <el-tag style="margin-left: 5px">&lt; 时间数 &lt;</el-tag>
-                        <el-input v-model="tableStore.table.params.persistMax" placeholder="请输入X秒"
-                            onkeyup="value=value.replace(/[^\d.]/g,'')" clearable
-                            style="margin-left: 5px; width: 94px"></el-input>
-                    </el-form-item>
-
-                    <el-form-item label="事件严重度:">
-                        <el-input v-model="tableStore.table.params.severityMin" placeholder="请输入正负数"
-                            onkeyup="value=value.replace(/[^\d\.-]/g,'')" clearable style="width: 94px"></el-input>
-                        <el-tag style="margin-left: 5px">&lt; 严重度 &lt;</el-tag>
-                        <el-input v-model="tableStore.table.params.severityMax" placeholder="请输入正负数"
-                            onkeyup="value=value.replace(/[^\d\.-]/g,'')" clearable
-                            style="margin-left: 5px; width: 94px"></el-input>
-                    </el-form-item>
-
-                    <!-- <el-form-item label="暂降类型:">
-                        <el-select v-model="tableStore.table.params.eventType" placeholder="请选择暂降类型" clearable multiple
-                            collapse-tags style="width: 100%">
-                            <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-item label="暂降原因:">
-                        <el-select v-model="tableStore.table.params.eventReason" placeholder="请选择暂降原因" clearable
-                            multiple collapse-tags style="width: 100%">
-                            <el-option v-for="item in reasonoptions" :key="item.id" :label="item.name"
-                                :value="item.id"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="暂降核实原因:">
-                        <el-select v-model="tableStore.table.params.verifyReason" placeholder="请选择暂降核实原因" clearable
-                            multiple collapse-tags collapse-tags-tooltip>
-                            <el-option v-for="item in verifyReasonList" :key="item.id" :label="item.name"
-                                :value="item.id"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="变电站(监测点):">
-                        <el-cascader v-model="tableStore.table.params.lineIds" :options="options" :props="defaultProps"
-                            collapse-tags-tooltip style="width: 257px;" filterable clearable collapse-tags
-                            placeholder="请选择变电站(监测点)" :show-all-levels="false" />
-                    </el-form-item>
-                </template>
-                <template #operation>
-                    <el-button icon="el-icon-Download" type="primary" @click="download">下载波形</el-button>
-                    <!-- <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button> -->
-                </template>
-            </TableHeader>
-            <Table ref="tableRef" />
-        </div>
-        <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
-            <waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
-        </div>
-        <addForm ref="addFormRef" @onSubmit="tableStore.index()" />
-    </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 { mainHeight } from '@/utils/layout'
-import { useDictData } from '@/stores/dictData'
-import { ElMessageBox, ElMessage } from 'element-plus'
-import addForm from './addForm.vue'
-import { getTransientValue } from '@/api/event-boot/report'
-import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
-import { useAdminInfo } from '@/stores/adminInfo'
-import waveForm from '@/components/echarts/waveForm.vue'
-import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
-defineOptions({
-    name: 'Region/transientlist'
-})
-const dictData = useDictData()
-const adminInfo = useAdminInfo()
-const waveFormRef=ref()
-const pageHeight = mainHeight(20)
-const view = ref(true)
-const addFormRef = ref()
-const typeoptions = dictData.getBasicData('Event_Type')
-const tableRef = ref()
-const reasonoptions = dictData.getBasicData('Event_Reason')
-const triggeroptions = dictData.getBasicData('Event_Statis')
-const verifyReasonList: any = dictData.getBasicData('verifyReason')
-const wareaoptions = ref([
-    {
-        id: 1,
-        label: '是'
-    },
-    {
-        id: 0,
-        label: '否'
-    }
-])
-const formData = ({
-    deptIndex: adminInfo.$state.deptIndex,
-    monitorFlag: 2,
-    powerFlag: 2,
-    loadType: null,
-    manufacturer: null,
-    serverName: 'event-boot',
-    statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
-    scale: null
-})
-const tableStore = new TableStore({
-    url: '/event-boot/transient/getTransientValue',
-    method: 'POST',
-    column: [
-        { width: '60', type: 'checkbox' },
-        {
-            field: 'index',
-            title: '序号',
-            width: '80',
-            formatter: (row: any) => {
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        { field: 'startTime', title: '暂降发生时刻', minWidth: '200' },
-        { field: 'gdName', title: '供电公司', minWidth: '100' },
-        { field: 'subName', title: '变电站', minWidth: '200' },
-        { field: 'ip', title: '网络参数', minWidth: '200' },
-        { field: 'lineName', title: '监测点', minWidth: '100' },
-        { field: 'scale', title: '电压等级(kV)', minWidth: '120', },
-        // {
-        //     field: 'verifyReason', title: '暂降核实原因', minWidth: '120', formatter: function (row) {
-        //         return verifyReasonList.filter(item => item.id == row.cellValue)[0]?.name || '/'  //row.cellValue ? row.cellValue : '/'
-        //     }
-        // },
-        // {
-        //     field: 'verifyReasonDetail', title: '暂降核实原因详情', minWidth: '200', formatter: function (row) {
-        //         return row.cellValue ? row.cellValue : '/'
-        //     }
-        // },
-        {
-            field: 'featureAmplitude',
-            title: '暂降(骤升)幅值(%)',
-            minWidth: '130',
-            formatter: ({ row }: any) => (row.featureAmplitude * 100).toFixed(2)
-        },
-        {
-            field: 'eventType',
-            title: '触发类型',
-            minWidth: '100',
-
-            formatter: ({ row }: any) => {
-                return triggeroptions.filter(item => item.id == row.eventType)[0]?.name
-            }
-        },
-        // { field: 'advanceType', title: '暂降类型', minWidth: '100', },
-        { field: 'advanceReason', title: '暂降原因', minWidth: '100' },
-        {
-            field: 'depth',
-            title: '暂降深度(%)',
-            minWidth: '100',
-            formatter: ({ row }: any) =>
-                row.featureAmplitude < 1 ? 100 - (row.featureAmplitude * 100).toFixed(0) : '/'
-        },
-
-        { field: 'duration', title: '持续时间(s)', minWidth: '100' },
-        // { field: 'severity', title: '严重度', minWidth: '100', formatter: ({ row }: any) => (row.severity < 0 ? '/' : row.severity) },
-
-        {
-            title: '操作',
-            width: '150',
-            render: 'buttons',
-            fixed: 'right',
-            buttons: [
-                // {
-                //     name: 'edit',
-                //     title: '人工维护',
-                //     type: 'primary',
-                //     icon: 'el-icon-Plus',
-                //     render: 'basicButton',
-                //     click: async row => {
-                //         addFormRef.value.open(row)
-                //     }
-                // },
-                {
-                    name: 'edit',
-                    title: '波形分析',
-                    type: 'primary',
-                    disabled: row => {
-                        return row.fileFlag == 0
-                    },
-                    icon: 'el-icon-Plus',
-                    render: 'basicButton',
-                    click: async row => {
-                        // row.loading = true
-                        view.value = false
-                      setTimeout(() => {
-                        waveFormRef.value.open(row)
-                      },100)
-                        // boxoList.value = row
-                        // await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
-                        //     .then(res => {
-                        //         row.loading = false
-                        //         if (res != undefined) {
-                        //             wp.value = res.data
-                        //             view.value = false
-                        //         }
-                        //     })
-                        //     .catch(() => {
-                        //         row.loading = false
-                        //     })
-                    }
-                },
-                {
-                    name: 'edit',
-                    title: '暂无波形',
-                    type: '',
-                    disabled: row => {
-                        return row.fileFlag == 1
-                    },
-                    icon: 'el-icon-Plus',
-                    render: 'basicButton'
-                }
-            ]
-        }
-    ],
-
-    loadCallback: () => { }
-})
-const options = ref([
-
-
-])
-const defaultProps = {
-    multiple: true,
-    // checkStrictly: true,
-    label: 'name',
-    value: 'id',
-    children: 'children',
-    emitPath: false
-}
-const boxoList = ref({})
-const wp = ref({})
-
-provide('tableStore', tableStore)
-
-tableStore.table.params.deptIndex = dictData.state.area[0].id
-tableStore.table.params.isType = 0
-tableStore.table.params.searchValue = ''
-tableStore.table.params.monitorFlag = 2
-tableStore.table.params.powerFlag = 2
-tableStore.table.params.serverName = 'event-boot'
-tableStore.table.params.statisticalType = {}
-tableStore.table.params.eventValueMin = ''
-tableStore.table.params.eventValueMax = ''
-tableStore.table.params.persistMin = ''
-tableStore.table.params.persistMax = ''
-tableStore.table.params.severityMin = ''
-tableStore.table.params.severityMax = ''
-tableStore.table.params.eventType = []
-tableStore.table.params.eventReason = []
-tableStore.table.params.verifyReason = []
-tableStore.table.params.lineIds = []
-tableStore.table.params.waveType = []
-tableStore.table.params.fileFlag = ''
-onMounted(() => {
-    tableStore.index()
-    getTerminalTreeForFive(formData).then(res => {
-        options.value = []
-        let list = (res.data.map((item: any) => {
-            return item.children.map((vv: any) => {
-                vv.children.map((kk: any) => {
-                    kk.name = kk.name.replace(/\（.*?\）/, '')
-                })
-                return vv.children
-            })
-        }))[0]
-        list.forEach((item: any) => {
-            options.value.push(...item)
-        })
-
-    })
-})
-const backbxlb = () => {
-    view.value = true
-}
-// 导出列表
-const exportEvent = () => {
-    let form = JSON.parse(JSON.stringify(tableStore.table.params))
-    form.pageNum = 1
-    form.pageSize = tableStore.table.total
-    getTransientValue(form).then(res => {
-        tableRef.value.getRef().exportData({
-            filename: '暂态列表', // 文件名字
-            sheetName: 'Sheet1',
-            type: 'xlsx', //导出文件类型 xlsx 和 csv
-            useStyle: true,
-            data: res.data.records, // 数据源 // 过滤那个字段导出
-            columnFilterMethod: function (column, $columnIndex) {
-                return !(column.$columnIndex === 0)
-            }
-        })
-    })
-}
-const download = () => {
-    if (!tableStore.table.selection.length) {
-        ElMessage.warning('请选择数据')
-        return
-    }
-    downloadWaveFile({
-        lineId: tableStore.table.selection.map((item: any) => item.eventId)
-    }).then((res: any) => {
-        if (res.type == 'application/json') {
-            ElMessage.warning('暂无可下载的波形文件!')
-            return
-        }
-          ElMessage.info('下载中......')
-        let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
-        const url = window.URL.createObjectURL(blob)
-        const link = document.createElement('a') // 创建a标签
-        link.href = url
-        link.download = '波形分析下载' // 设置下载的文件名
-        document.body.appendChild(link)
-        link.click() //执行下载
-        document.body.removeChild(link) //释放标签
-    })
-}
-</script>
-<style scoped lang="scss">
-:deep(.el-tag.is-closable) {
-    width: 100px;
-}
-</style>
+<template>
+    <div class="default-main">
+        <div v-show="view">
+            <TableHeader datePicker showExport>
+                <template #select>
+                    <el-form-item label="统计类型:">
+                        <el-radio-group v-model="tableStore.table.params.isType">
+                            <el-radio-button :label="0">在线</el-radio-button>
+                            <el-radio-button :label="1">离线</el-radio-button>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="筛选">
+                        <el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
+                    </el-form-item>
+                    <el-form-item label="触发类型:">
+                        <el-select v-model="tableStore.table.params.waveType" placeholder="请选择触发类型" clearable multiple
+                            collapse-tags style="width: 100%">
+                            <el-option v-for="item in triggeroptions" :key="item.id" :label="item.name"
+                                :value="item.id"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="是否有波形:">
+                        <el-select v-model="tableStore.table.params.fileFlag" placeholder="请选择是否存在波形" clearable
+                            style="width: 100%">
+                            <el-option v-for="item in wareaoptions" :key="item.id" :label="item.label"
+                                :value="item.id"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="暂态持续时间(s):">
+                        <el-input v-model="tableStore.table.params.persistMin" placeholder="请输入X秒"
+                            onkeyup="value=value.replace(/[^\d.]/g,'')" clearable style="width: 94px"></el-input>
+                        <el-tag style="margin-left: 5px">&lt; 时间数 &lt;</el-tag>
+                        <el-input v-model="tableStore.table.params.persistMax" placeholder="请输入X秒"
+                            onkeyup="value=value.replace(/[^\d.]/g,'')" clearable
+                            style="margin-left: 5px; width: 94px"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="事件严重度:">
+                        <el-input v-model="tableStore.table.params.severityMin" placeholder="请输入正负数"
+                            onkeyup="value=value.replace(/[^\d\.-]/g,'')" clearable style="width: 94px"></el-input>
+                        <el-tag style="margin-left: 5px">&lt; 严重度 &lt;</el-tag>
+                        <el-input v-model="tableStore.table.params.severityMax" placeholder="请输入正负数"
+                            onkeyup="value=value.replace(/[^\d\.-]/g,'')" clearable
+                            style="margin-left: 5px; width: 94px"></el-input>
+                    </el-form-item>
+
+                    <!-- <el-form-item label="暂降类型:">
+                        <el-select v-model="tableStore.table.params.eventType" placeholder="请选择暂降类型" clearable multiple
+                            collapse-tags style="width: 100%">
+                            <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-item label="暂降原因:">
+                        <el-select v-model="tableStore.table.params.eventReason" placeholder="请选择暂降原因" clearable
+                            multiple collapse-tags style="width: 100%">
+                            <el-option v-for="item in reasonoptions" :key="item.id" :label="item.name"
+                                :value="item.id"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="暂降核实原因:">
+                        <el-select v-model="tableStore.table.params.verifyReason" placeholder="请选择暂降核实原因" clearable
+                            multiple collapse-tags collapse-tags-tooltip>
+                            <el-option v-for="item in verifyReasonList" :key="item.id" :label="item.name"
+                                :value="item.id"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="变电站(监测点):">
+                        <el-cascader v-model="tableStore.table.params.lineIds" :options="options" :props="defaultProps"
+                            collapse-tags-tooltip style="width: 257px;" filterable clearable collapse-tags
+                            placeholder="请选择变电站(监测点)" :show-all-levels="false" />
+                    </el-form-item>
+                </template>
+                <template #operation>
+                    <el-button icon="el-icon-Download" type="primary" @click="download">下载波形</el-button>
+                    <!-- <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button> -->
+                </template>
+            </TableHeader>
+            <Table ref="tableRef" />
+        </div>
+        <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
+            <waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
+        </div>
+        <addForm ref="addFormRef" @onSubmit="tableStore.index()" />
+    </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 { mainHeight } from '@/utils/layout'
+import { useDictData } from '@/stores/dictData'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import addForm from './addForm.vue'
+import { getTransientValue } from '@/api/event-boot/report'
+import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
+import { useAdminInfo } from '@/stores/adminInfo'
+import waveForm from '@/components/echarts/waveForm.vue'
+import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
+defineOptions({
+    name: 'Region/transientlist'
+})
+const dictData = useDictData()
+const adminInfo = useAdminInfo()
+const waveFormRef=ref()
+const pageHeight = mainHeight(20)
+const view = ref(true)
+const addFormRef = ref()
+const typeoptions = dictData.getBasicData('Event_Type')
+const tableRef = ref()
+const reasonoptions = dictData.getBasicData('Event_Reason')
+const triggeroptions = dictData.getBasicData('Event_Statis')
+const verifyReasonList: any = dictData.getBasicData('verifyReason')
+const wareaoptions = ref([
+    {
+        id: 1,
+        label: '是'
+    },
+    {
+        id: 0,
+        label: '否'
+    }
+])
+const formData = ({
+    deptIndex: adminInfo.$state.deptIndex,
+    monitorFlag: 2,
+    powerFlag: 2,
+    loadType: null,
+    manufacturer: null,
+    serverName: 'event-boot',
+    statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
+    scale: null
+})
+const tableStore = new TableStore({
+    url: '/event-boot/transient/getTransientValue',
+    method: 'POST',
+    column: [
+        { width: '60', type: 'checkbox' },
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'startTime', title: '暂降发生时刻', minWidth: '200' },
+        { field: 'gdName', title: '供电公司', minWidth: '100' },
+        { field: 'subName', title: '变电站', minWidth: '200' },
+        { field: 'ip', title: '网络参数', minWidth: '200' },
+        { field: 'lineName', title: '监测点', minWidth: '100' },
+        { field: 'scale', title: '电压等级(kV)', minWidth: '120', },
+        // {
+        //     field: 'verifyReason', title: '暂降核实原因', minWidth: '120', formatter: function (row) {
+        //         return verifyReasonList.filter(item => item.id == row.cellValue)[0]?.name || '/'  //row.cellValue ? row.cellValue : '/'
+        //     }
+        // },
+        // {
+        //     field: 'verifyReasonDetail', title: '暂降核实原因详情', minWidth: '200', formatter: function (row) {
+        //         return row.cellValue ? row.cellValue : '/'
+        //     }
+        // },
+        {
+            field: 'featureAmplitude',
+            title: '暂降(骤升)幅值(%)',
+            minWidth: '130',
+            formatter: ({ row }: any) => (row.featureAmplitude * 100).toFixed(2)
+        },
+        {
+            field: 'eventType',
+            title: '触发类型',
+            minWidth: '100',
+
+            formatter: ({ row }: any) => {
+                return triggeroptions.filter(item => item.id == row.eventType)[0]?.name
+            }
+        },
+        // { field: 'advanceType', title: '暂降类型', minWidth: '100', },
+        { field: 'advanceReason', title: '暂降原因', minWidth: '100' },
+        {
+            field: 'depth',
+            title: '暂降深度(%)',
+            minWidth: '100',
+            formatter: ({ row }: any) =>
+                row.featureAmplitude < 1 ? 100 - (row.featureAmplitude * 100).toFixed(0) : '/'
+        },
+
+        { field: 'duration', title: '持续时间(s)', minWidth: '100' },
+        // { field: 'severity', title: '严重度', minWidth: '100', formatter: ({ row }: any) => (row.severity < 0 ? '/' : row.severity) },
+
+        {
+            title: '操作',
+            width: '150',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                // {
+                //     name: 'edit',
+                //     title: '人工维护',
+                //     type: 'primary',
+                //     icon: 'el-icon-Plus',
+                //     render: 'basicButton',
+                //     click: async row => {
+                //         addFormRef.value.open(row)
+                //     }
+                // },
+                {
+                    name: 'edit',
+                    title: '波形分析',
+                    type: 'primary',
+                    disabled: row => {
+                        return row.fileFlag == 0
+                    },
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: async row => {
+                        // row.loading = true
+                        view.value = false
+                      setTimeout(() => {
+                        waveFormRef.value.open(row)
+                      },100)
+                        // boxoList.value = row
+                        // await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
+                        //     .then(res => {
+                        //         row.loading = false
+                        //         if (res != undefined) {
+                        //             wp.value = res.data
+                        //             view.value = false
+                        //         }
+                        //     })
+                        //     .catch(() => {
+                        //         row.loading = false
+                        //     })
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '暂无波形',
+                    type: '',
+                    disabled: row => {
+                        return row.fileFlag == 1
+                    },
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton'
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => { }
+})
+const options = ref([
+
+
+])
+const defaultProps = {
+    multiple: true,
+    // checkStrictly: true,
+    label: 'name',
+    value: 'id',
+    children: 'children',
+    emitPath: false
+}
+const boxoList = ref({})
+const wp = ref({})
+
+provide('tableStore', tableStore)
+
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.isType = 0
+tableStore.table.params.searchValue = ''
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'event-boot'
+tableStore.table.params.statisticalType = {}
+tableStore.table.params.eventValueMin = ''
+tableStore.table.params.eventValueMax = ''
+tableStore.table.params.persistMin = ''
+tableStore.table.params.persistMax = ''
+tableStore.table.params.severityMin = ''
+tableStore.table.params.severityMax = ''
+tableStore.table.params.eventType = []
+tableStore.table.params.eventReason = []
+tableStore.table.params.verifyReason = []
+tableStore.table.params.lineIds = []
+tableStore.table.params.waveType = []
+tableStore.table.params.fileFlag = ''
+onMounted(() => {
+    tableStore.index()
+    getTerminalTreeForFive(formData).then(res => {
+        options.value = []
+        let list = (res.data.map((item: any) => {
+            return item.children.map((vv: any) => {
+                vv.children.map((kk: any) => {
+                    kk.name = kk.name.replace(/\（.*?\）/, '')
+                })
+                return vv.children
+            })
+        }))[0]
+        list.forEach((item: any) => {
+            options.value.push(...item)
+        })
+
+    })
+})
+const backbxlb = () => {
+    view.value = true
+}
+// 导出列表
+const exportEvent = () => {
+    let form = JSON.parse(JSON.stringify(tableStore.table.params))
+    form.pageNum = 1
+    form.pageSize = tableStore.table.total
+    getTransientValue(form).then(res => {
+        tableRef.value.getRef().exportData({
+            filename: '暂态列表', // 文件名字
+            sheetName: 'Sheet1',
+            type: 'xlsx', //导出文件类型 xlsx 和 csv
+            useStyle: true,
+            data: res.data.records, // 数据源 // 过滤那个字段导出
+            columnFilterMethod: function (column, $columnIndex) {
+                return !(column.$columnIndex === 0)
+            }
+        })
+    })
+}
+const download = () => {
+    if (!tableStore.table.selection.length) {
+        ElMessage.warning('请选择数据')
+        return
+    }
+    downloadWaveFile({
+        lineId: tableStore.table.selection.map((item: any) => item.eventId)
+    }).then((res: any) => {
+        if (res.type == 'application/json') {
+            ElMessage.warning('暂无可下载的波形文件!')
+            return
+        }
+          ElMessage.info('下载中......')
+        let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a') // 创建a标签
+        link.href = url
+        link.download = '波形分析下载' // 设置下载的文件名
+        document.body.appendChild(link)
+        link.click() //执行下载
+        document.body.removeChild(link) //释放标签
+    })
+}
+</script>
+<style scoped lang="scss">
+:deep(.el-tag.is-closable) {
+    width: 100px;
+}
+</style>

src/views/pqs/voltageSags/Region/transientassessment/index.vue

@@ -1,411 +1,411 @@
-<template>
-    <div class="default-main">
-        <TableHeader area date-picker ref="header" />
-        <div v-loading="tableStore.table.loading" class="pr10">
-            <el-row>
-                <el-col :span="12">
-                    <MyEchartMap
-                        ref="EchartMap"
-                        :options="echartMapList"
-                        class="map"
-                        @eliminate="eliminate"
-                        @getRegionByRegion="getRegionByRegion"
-                    />
-                </el-col>
-                <el-col :span="12">
-                    <my-echart class="tall" :options="echartList" />
-                    <div class="tall">
-                        <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
-                            >
-                            <vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
-                            <vxe-column field="ci" title="区域暂降评估">
-                                <template #default="{ row }">
-                                    {{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
-                                </template>
-                            </vxe-column>
-                            <vxe-column sortable field="isCount" title="等级">
-                                <template #default="{ row }">
-                                    <span v-if="row.ci == 0.05">暂无等级</span>
-                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
-                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
-                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
-                                    <span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
-                                </template>
-                            </vxe-column>
-                        </vxe-table>
-                    </div>
-                </el-col>
-            </el-row>
-        </div>
-        <div class="dw">
-            <el-popover placement="left" :width="600" trigger="hover">
-                <template #reference>
-                    <span class="level">详细区域暂降评估等级</span>
-                </template>
-                <vxe-table :data="areaData1" v-bind="defaultAttribute">
-                    <vxe-column title="等级" field="level" min-width="90"></vxe-column>
-                    <vxe-column title="1级" field="one" min-width="80"></vxe-column>
-                    <vxe-column title="2级" field="two" min-width="90"></vxe-column>
-                    <vxe-column title="3级" field="three" min-width="90"></vxe-column>
-                    <vxe-column title="4级" field="four" min-width="90"></vxe-column>
-                </vxe-table>
-            </el-popover>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import TableHeader from '@/components/table/header/index.vue'
-import { useDictData } from '@/stores/dictData'
-import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
-import MyEchart from '@/components/echarts/MyEchart.vue'
-import TableStore from '@/utils/tableStore'
-import { ref, onMounted, provide } from 'vue'
-import { mainHeight } from '@/utils/layout'
-import { defaultAttribute } from '@/components/table/defaultAttribute'
-defineOptions({
-    name: 'Region/transientassessment'
-})
-const EchartMap = ref()
-const dictData = useDictData()
-const echartMapList: any = ref({})
-const echartList = ref({})
-const header = ref()
-const distributionData: any = ref([])
-const areaData1: any = ref([
-    {
-        level: '相对得分',
-        one: '[0,0.4]',
-        two: '(0.4,0.8)',
-        three: '(0.8,1.2)',
-        four: '(1.2,+∞)'
-    }
-])
-
-const tableStore = new TableStore({
-    url: '/advance-boot/balance/getBalanceInfo',
-    method: 'POST',
-    column: [],
-    beforeSearchFun: () => {
-        tableStore.table.params.deptId = tableStore.table.params.deptIndex
-    },
-    loadCallback: () => {
-        header.value.areaRef.change()
-        // 处理地图数据
-        map(tableStore.table.data)
-        tabulation(tableStore.table.data)
-        histogram(tableStore.table.data)
-        EchartMap.value.GetEchar(header.value.areaRef.areaName)
-    }
-})
-provide('tableStore', tableStore)
-
-tableStore.table.params.loadType = null
-tableStore.table.params.deptId = dictData.state.area[0].id
-
-// 地图点击事件
-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) => {
-    let list: any = []
-    res.forEach((item: any) => {
-        list.push({
-            name: item.areaName,
-            value: item.ci
-        })
-    })
-
-    echartMapList.value = {
-        name: '',
-        title: {
-            text: '区域暂降评估'
-        },
-        tooltip: {
-            formatter: function (params: any) {
-                var tips = ''
-                console.log('🚀 ~ map ~ params:', params)
-
-                if (Number.isNaN(params.value) == true) {
-                    tips += params.name + '</br>'
-                    tips += '评估值:暂无数据'
-                } else {
-                    tips += params.name + '</br>'
-                    tips += '评估值:' + params.value
-                }
-                return tips
-            }
-        },
-        visualMap: {
-            min: 0,
-            max: 2,
-            left: 26,
-            bottom: 20,
-            showLabel: !0,
-
-            pieces: [
-                {
-                    gt: -2,
-                    lte: -1,
-                    label: '无数据'
-                },
-                {
-                    gte: 0,
-                    lte: 0.4,
-                    label: '1级--相对得分 [0,0.4]'
-                },
-                {
-                    gt: 0.4,
-                    lte: 0.9,
-                    label: '2级--得分 (0.4,0.8]'
-                },
-                {
-                    gt: 0.9,
-                    lte: 1.2,
-                    label: '3级--相对得分 (0.8,1.2]'
-                },
-                {
-                    gt: 1.2,
-                    label: '4级--相对得分 (1.2,+∞]'
-                }
-            ],
-            inRange: {
-                color: ['#ccc', '#A52a2a', '#FF9900', '#3399CC', '#339966']
-            }
-        },
-
-        options: {
-            series: [
-                {
-                    // type: "scatter",
-                    type: 'map',
-                    mapName: name,
-                    coordinateSystem: 'geo',
-                    geoIndex: 0,
-                    animation: false, //坐标点是否显示动画
-                    roam: true,
-                    selectedMode: 'false', //是否允许选中多个区域
-                    symbol: 'pin',
-                    rippleEffect: {
-                        brushType: 'fill' // stroke|fill
-                    },
-
-                    label: {
-                        normal: {
-                            show: false
-                        },
-                        emphasis: {
-                            label: {
-                                show: true
-                            }
-                        }
-                    },
-                    data: list
-                }
-            ]
-        }
-    }
-}
-
-// 表格数据处理
-const tabulation = (res: any) => {
-    distributionData.value = res
-    distributionData.value.forEach((item: any) => {
-        if (item.ci == 0) {
-            item.ci = 0.05
-        }
-    })
-}
-// 柱状图数据处理
-const histogram = (res: any) => {
-    echartList.value = {
-        title: {
-            text: header.value.areaRef.areaName
-        },
-        tooltip: {
-            formatter: function (params: any) {
-                var tips = ''
-                for (var i = 0; i < params.length; i++) {
-                    if (params[i].value == 0.05) {
-                        tips += params[i].name + '</br>'
-                        tips += '评估值:0'
-                    } else {
-                        tips += params[i].name + '</br>'
-                        tips += '评估值:' + params[i].value
-                    }
-                }
-                return tips
-            }
-        },
-
-        xAxis: {
-            name: '(区域)',
-
-            data: res.map((item: any) => item.areaName)
-        },
-        yAxis: {
-            name: ' 等级',
-            min: 0,
-            max: 2,
-            // minInterval: 0.2,
-            axisLabel: {
-                fontSize: 14,
-                // interval: 4,
-                formatter: function (value: any) {
-                    var texts = ''
-                    if (value === 0.4) {
-                        texts = '1级'
-                    } else if (value === 0.8) {
-                        texts = '2级'
-                    } else if (value === 1.2) {
-                        texts = '3级'
-                    } else if (value === 2) {
-                        texts = '4级'
-                    }
-                    return texts
-                }
-            }
-        },
-        options: {
-            series: [
-                //
-                {
-                    name: '',
-                    data: res.map((item: any) => {
-                        if (item.ci == 0) {
-                            return (item.ci = 0.05)
-                        }
-                        return item.ci.toFixed(2)
-                    }),
-
-                    barMaxWidth: 30,
-                    barMinHeight: 1,
-                    type: 'bar',
-                    itemStyle: {
-                        normal: {
-                            color: function (params: any) {
-                                if (params.value > 2 && params.value !== 0.05) {
-                                    return '#339966'
-                                } else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
-                                    return '#3399FF'
-                                } else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
-                                    return '#FF9900'
-                                } else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
-                                    return '#A52a2a'
-                                } else if (params.value == 0.05) {
-                                    return '#A52a2a'
-                                }
-                            }
-                        }
-                    },
-                    markLine: {
-                        silent: false,
-                        symbol: 'circle',
-                        lineStyle: {
-                            color: 'red',
-                            width: 1
-                        },
-                        emphasis: {
-                            lineStyle: {
-                                width: 1
-                            }
-                        },
-                        data: [
-                            {
-                                name: '',
-                                yAxis: 0.4,
-                                lineStyle: {
-                                    color: '#A52a2a'
-                                },
-                                label: {
-                                    // position: "middle",
-                                    formatter: '{b}',
-                                    textStyle: {
-                                        color: '#A52a2a'
-                                    }
-                                }
-                            },
-                            {
-                                name: '',
-                                yAxis: 0.8,
-                                lineStyle: {
-                                    color: '#FF9900'
-                                },
-                                label: {
-                                    // position: "middle",
-                                    formatter: '{b}',
-                                    textStyle: {
-                                        color: '#FF9900'
-                                    }
-                                }
-                            },
-                            {
-                                name: '',
-                                yAxis: 1.2,
-                                lineStyle: {
-                                    color: '#3399FF'
-                                },
-                                label: {
-                                    // position: "middle",
-                                    formatter: '{b}',
-                                    textStyle: {
-                                        color: '#3399FF'
-                                    }
-                                }
-                            },
-                            {
-                                name: '',
-                                yAxis: 2,
-                                lineStyle: {
-                                    color: '#339966'
-                                },
-                                label: {
-                                    // position: "middle",
-                                    formatter: '{b}',
-                                    textStyle: {
-                                        color: '#339966'
-                                    }
-                                }
-                            }
-                        ]
-                    }
-                }
-            ]
-        }
-    }
-}
-
-onMounted(() => {
-    setTimeout(() => {
-        tableStore.index()
-    }, 10)
-})
-const layout = mainHeight(83) as any
-const layout1 = mainHeight(93) as any
-</script>
-<style lang="scss" scoped>
-.map {
-    height: v-bind('layout.height');
-}
-.tall {
-    height: calc(v-bind('layout1.height') / 2);
-}
-.dw {
-    position: absolute;
-    top: 50px;
-    right: 50px;
-    width: 200px;
-    z-index: 2;
-    .level {
-        color: red;
-        cursor: pointer;
-    }
-}
-</style>
+<template>
+    <div class="default-main">
+        <TableHeader area date-picker ref="header" />
+        <div v-loading="tableStore.table.loading" class="pr10">
+            <el-row>
+                <el-col :span="12">
+                    <MyEchartMap
+                        ref="EchartMap"
+                        :options="echartMapList"
+                        class="map"
+                        @eliminate="eliminate"
+                        @getRegionByRegion="getRegionByRegion"
+                    />
+                </el-col>
+                <el-col :span="12">
+                    <my-echart class="tall" :options="echartList" />
+                    <div class="tall">
+                        <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
+                            >
+                            <vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
+                            <vxe-column field="ci" title="区域暂降评估">
+                                <template #default="{ row }">
+                                    {{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
+                                </template>
+                            </vxe-column>
+                            <vxe-column sortable field="isCount" title="等级">
+                                <template #default="{ row }">
+                                    <span v-if="row.ci == 0.05">暂无等级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
+                                </template>
+                            </vxe-column>
+                        </vxe-table>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="dw">
+            <el-popover placement="left" :width="600" trigger="hover">
+                <template #reference>
+                    <span class="level">详细区域暂降评估等级</span>
+                </template>
+                <vxe-table :data="areaData1" v-bind="defaultAttribute">
+                    <vxe-column title="等级" field="level" min-width="90"></vxe-column>
+                    <vxe-column title="1级" field="one" min-width="80"></vxe-column>
+                    <vxe-column title="2级" field="two" min-width="90"></vxe-column>
+                    <vxe-column title="3级" field="three" min-width="90"></vxe-column>
+                    <vxe-column title="4级" field="four" min-width="90"></vxe-column>
+                </vxe-table>
+            </el-popover>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableStore from '@/utils/tableStore'
+import { ref, onMounted, provide } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+defineOptions({
+    name: 'Region/transientassessment'
+})
+const EchartMap = ref()
+const dictData = useDictData()
+const echartMapList: any = ref({})
+const echartList = ref({})
+const header = ref()
+const distributionData: any = ref([])
+const areaData1: any = ref([
+    {
+        level: '相对得分',
+        one: '[0,0.4]',
+        two: '(0.4,0.8)',
+        three: '(0.8,1.2)',
+        four: '(1.2,+∞)'
+    }
+])
+
+const tableStore = new TableStore({
+    url: '/advance-boot/balance/getBalanceInfo',
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {
+        tableStore.table.params.deptId = tableStore.table.params.deptIndex
+    },
+    loadCallback: () => {
+        header.value.areaRef.change()
+        // 处理地图数据
+        map(tableStore.table.data)
+        tabulation(tableStore.table.data)
+        histogram(tableStore.table.data)
+        EchartMap.value.GetEchar(header.value.areaRef.areaName)
+    }
+})
+provide('tableStore', tableStore)
+
+tableStore.table.params.loadType = null
+tableStore.table.params.deptId = dictData.state.area[0].id
+
+// 地图点击事件
+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) => {
+    let list: any = []
+    res.forEach((item: any) => {
+        list.push({
+            name: item.areaName,
+            value: item.ci
+        })
+    })
+
+    echartMapList.value = {
+        name: '',
+        title: {
+            text: '区域暂降评估'
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                var tips = ''
+                
+
+                if (Number.isNaN(params.value) == true) {
+                    tips += params.name + '</br>'
+                    tips += '评估值:暂无数据'
+                } else {
+                    tips += params.name + '</br>'
+                    tips += '评估值:' + params.value
+                }
+                return tips
+            }
+        },
+        visualMap: {
+            min: 0,
+            max: 2,
+            left: 26,
+            bottom: 20,
+            showLabel: !0,
+
+            pieces: [
+                {
+                    gt: -2,
+                    lte: -1,
+                    label: '无数据'
+                },
+                {
+                    gte: 0,
+                    lte: 0.4,
+                    label: '1级--相对得分 [0,0.4]'
+                },
+                {
+                    gt: 0.4,
+                    lte: 0.9,
+                    label: '2级--得分 (0.4,0.8]'
+                },
+                {
+                    gt: 0.9,
+                    lte: 1.2,
+                    label: '3级--相对得分 (0.8,1.2]'
+                },
+                {
+                    gt: 1.2,
+                    label: '4级--相对得分 (1.2,+∞]'
+                }
+            ],
+            inRange: {
+                color: ['#ccc', '#A52a2a', '#FF9900', '#3399CC', '#339966']
+            }
+        },
+
+        options: {
+            series: [
+                {
+                    // type: "scatter",
+                    type: 'map',
+                    mapName: name,
+                    coordinateSystem: 'geo',
+                    geoIndex: 0,
+                    animation: false, //坐标点是否显示动画
+                    roam: true,
+                    selectedMode: 'false', //是否允许选中多个区域
+                    symbol: 'pin',
+                    rippleEffect: {
+                        brushType: 'fill' // stroke|fill
+                    },
+
+                    label: {
+                        normal: {
+                            show: false
+                        },
+                        emphasis: {
+                            label: {
+                                show: true
+                            }
+                        }
+                    },
+                    data: list
+                }
+            ]
+        }
+    }
+}
+
+// 表格数据处理
+const tabulation = (res: any) => {
+    distributionData.value = res
+    distributionData.value.forEach((item: any) => {
+        if (item.ci == 0) {
+            item.ci = 0.05
+        }
+    })
+}
+// 柱状图数据处理
+const histogram = (res: any) => {
+    echartList.value = {
+        title: {
+            text: header.value.areaRef.areaName
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                var tips = ''
+                for (var i = 0; i < params.length; i++) {
+                    if (params[i].value == 0.05) {
+                        tips += params[i].name + '</br>'
+                        tips += '评估值:0'
+                    } else {
+                        tips += params[i].name + '</br>'
+                        tips += '评估值:' + params[i].value
+                    }
+                }
+                return tips
+            }
+        },
+
+        xAxis: {
+            name: '(区域)',
+
+            data: res.map((item: any) => item.areaName)
+        },
+        yAxis: {
+            name: ' 等级',
+            min: 0,
+            max: 2,
+            // minInterval: 0.2,
+            axisLabel: {
+                fontSize: 14,
+                // interval: 4,
+                formatter: function (value: any) {
+                    var texts = ''
+                    if (value === 0.4) {
+                        texts = '1级'
+                    } else if (value === 0.8) {
+                        texts = '2级'
+                    } else if (value === 1.2) {
+                        texts = '3级'
+                    } else if (value === 2) {
+                        texts = '4级'
+                    }
+                    return texts
+                }
+            }
+        },
+        options: {
+            series: [
+                //
+                {
+                    name: '',
+                    data: res.map((item: any) => {
+                        if (item.ci == 0) {
+                            return (item.ci = 0.05)
+                        }
+                        return item.ci.toFixed(2)
+                    }),
+
+                    barMaxWidth: 30,
+                    barMinHeight: 1,
+                    type: 'bar',
+                    itemStyle: {
+                        normal: {
+                            color: function (params: any) {
+                                if (params.value > 2 && params.value !== 0.05) {
+                                    return '#339966'
+                                } else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
+                                    return '#3399FF'
+                                } else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
+                                    return '#FF9900'
+                                } else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
+                                    return '#A52a2a'
+                                } else if (params.value == 0.05) {
+                                    return '#A52a2a'
+                                }
+                            }
+                        }
+                    },
+                    markLine: {
+                        silent: false,
+                        symbol: 'circle',
+                        lineStyle: {
+                            color: 'red',
+                            width: 1
+                        },
+                        emphasis: {
+                            lineStyle: {
+                                width: 1
+                            }
+                        },
+                        data: [
+                            {
+                                name: '',
+                                yAxis: 0.4,
+                                lineStyle: {
+                                    color: '#A52a2a'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#A52a2a'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 0.8,
+                                lineStyle: {
+                                    color: '#FF9900'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#FF9900'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 1.2,
+                                lineStyle: {
+                                    color: '#3399FF'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#3399FF'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 2,
+                                lineStyle: {
+                                    color: '#339966'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#339966'
+                                    }
+                                }
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+    }
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 10)
+})
+const layout = mainHeight(83) as any
+const layout1 = mainHeight(93) as any
+</script>
+<style lang="scss" scoped>
+.map {
+    height: v-bind('layout.height');
+}
+.tall {
+    height: calc(v-bind('layout1.height') / 2);
+}
+.dw {
+    position: absolute;
+    top: 50px;
+    right: 50px;
+    width: 200px;
+    z-index: 2;
+    .level {
+        color: red;
+        cursor: pointer;
+    }
+}
+</style>

src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue

@@ -1,311 +1,313 @@
-<template>
-    <div v-loading="loading" class="running-condition">
-        <el-form :inline="true" class="fx-jcsb">
-            <el-form-item label="日期">
-                <DatePicker ref="datePickerRef"></DatePicker>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
-        </el-form>
-        <div style="flex: 1" class="mt10 zanjiangfenbutongji">
-            <div
-                style="
-                    position: absolute;
-                    right: 55px;
-                    top: 25px;
-                    z-index: 2;
-                    display: flex;
-                    align-items: center;
-                    font-size: 12px;
-                "
-            >
-                <el-tag style="width: 20px; height: 12px" :style="{ background: gradeColor3[2] }"></el-tag>
-                <span class="ml2" :style="{ color: gradeColor3[2] }">{{ 'X<60%' }}</span>
-                <el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[1] }"></el-tag>
-                <span class="ml2" :style="{ color: gradeColor3[1] }">{{ '60%≤X<90%' }}</span>
-                <el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[0] }"></el-tag>
-                <span class="ml2" :style="{ color: gradeColor3[0] }">{{ 'X≥90 %' }}</span>
-            </div>
-            <my-echart :options="secondOptions" style="flex: 1; height: 100%" />
-            <my-echart :options="firstOptions" style="flex: 1; height: 100%" />
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { nextTick, onMounted, reactive, ref, watch } from 'vue'
-import DatePicker from '@/components/form/datePicker/index.vue'
-import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/stores/monitoringPoint'
-import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
-import { gradeColor3 } from '@/components/echarts/color'
-
-const datePickerRef = ref()
-const loading = ref(true)
-const monitoringPoint = useMonitoringPoint()
-const formData = reactive({
-    id: '',
-    searchBeginTime: '',
-    searchEndTime: '',
-    timeFlag: 1
-})
-const firstOptions = ref<any>({})
-const secondOptions = ref<any>({})
-const firstData = ref<any>([])
-const secondData = ref<any>([])
-
-const init = () => {
-    loading.value = true
-    formData.id = monitoringPoint.state.lineId
-    formData.searchBeginTime = datePickerRef.value.timeValue[0]
-    formData.searchEndTime = datePickerRef.value.timeValue[1]
-    formData.timeFlag = datePickerRef.value.interval
-    Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
-        firstData.value = res[0].data
-        secondData.value = res[1].data
-        initFirst()
-        initSecond()
-        loading.value = false
-    })
-}
-const initFirst = () => {
-    let months = new Array()
-    let handle = new Array()
-    let year = firstData.value[0].dateView
-
-    for (let i = 0; i < firstData.value.length; i++) {
-        months[i] = firstData.value[i].dateView
-        handle.push(firstData.value[i].onlineRate)
-    }
-    firstOptions.value = {
-        title: {
-            text: '在线率统计',
-            x: 'center',
-            textStyle: {
-                fontWeight: 'normal'
-            }
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    color: '#fff',
-                    fontSize: 16
-                }
-            },
-            textStyle: {
-                color: '#fff',
-                fontStyle: 'normal',
-                opacity: 0.35,
-                fontSize: 14
-            },
-            backgroundColor: 'rgba(0,0,0,0.55)',
-            formatter: function(params: any) {
-                let tips = ''
-                tips += '时间:' + year + '</br/>'
-                for (let i = 0; i < params.length; i++) {
-                    if (params[i].value == 3.14159) {
-                        tips += '在线率' + ':暂无数据<br/>'
-                    } else {
-                        tips += '在线率' + ':' + params[i].value + '%<br/>'
-                    }
-                }
-                return tips
-            }
-        },
-        xAxis: [
-            {
-                type: 'category',
-                data: months,
-                name: '时间',
-                nameTextStyle: {
-                    verticalAlign: 'top', //标题位置
-                    padding: [-5, 0, 0, -10]
-                },
-
-                splitLine: {
-                    show: false
-                },
-                axisLine: {
-                    show: true
-                }
-            }
-        ],
-        yAxis: [
-            {
-                min: 0,
-                max: 100,
-                type: 'value',
-                name: '%',
-                axisLine: {
-                    show: true
-                },
-                splitLine: {
-                    show: false,
-                    lineStyle: {
-                        // 使用深浅的间隔色
-                        type: 'dashed',
-                        opacity: 0.5
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                type: 'bar',
-                data: handle,
-                itemStyle: {
-                    color: (params: any) => {
-                        if (params.value == 3.14159) {
-                            return '#ccc'
-                        } else {
-                            if (params.value < 60) {
-                                return gradeColor3[2]
-                            } else if (params.value < 90) {
-                                return gradeColor3[1]
-                            } else {
-                                return gradeColor3[0]
-                            }
-                        }
-                    }
-                },
-                markLine: {
-                    silent: false,
-                    symbol: 'circle',
-                    data: [
-                        {
-                            yAxis: 100,
-                            lineStyle: {
-                                color: gradeColor3[0]
-                            },
-                            label: {
-                                position: 'end',
-                                formatter: '100%'
-                            }
-                        },
-                        {
-                            yAxis: 90,
-                            lineStyle: {
-                                color: gradeColor3[1]
-                            },
-                            label: {
-                                position: 'end',
-                                formatter: '90%'
-                            }
-                        },
-                        {
-                            yAxis: 60,
-                            lineStyle: {
-                                color: gradeColor3[2]
-                            },
-                            label: {
-                                position: 'end',
-                                formatter: '60%'
-                            }
-                        }
-                    ]
-                }
-            }
-        ]
-    }
-}
-const initSecond = () => {
-    let list = secondData.value.type.map((item, i) => [secondData.value.updateTime[i], item])
-
-    secondOptions.value = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    color: '#fff',
-                    fontSize: 16
-                }
-            },
-            textStyle: {
-                color: '#fff',
-                fontStyle: 'normal',
-                opacity: 0.35,
-                fontSize: 14
-            },
-            backgroundColor: 'rgba(0,0,0,0.55)',
-            formatter: function(params: any) {
-                let res = ''
-                res += `${params[0].value[0]}：${params[0].value[1] == '0' ? '中断' : '正常'}` //params[0].value[0] + '：' //+ params[0].value[1] == '0' ? '中断' : '正常'
-
-                return res
-            }
-        },
-
-        xAxis: {
-            // name: '时间',
-            // type: 'category',
-            // data: items,
-            // boundaryGap: false
-            type: 'time',
-            name: '时间',
-            //
-            axisLabel: {
-                formatter: {
-                    day: '{MM}-{dd}',
-                    month: '{MM}',
-                    year: '{yyyy}'
-                }
-            }
-        },
-        yAxis: {
-            name: '状态',
-            type: 'value',
-            axisLine: {
-                show: true
-            },
-            axisLabel: {
-                show: true,
-                textStyle: {
-                    color: 'blue'
-                },
-                // 这里重新定义就可以
-                formatter: function(value: number) {
-                    let texts = []
-                    if (value === 2) {
-                        texts.push('退出')
-                    } else if (value === 0) {
-                        texts.push('中断')
-                    } else if (value === 1) {
-                        texts.push('正常')
-                    }
-                    return texts
-                }
-            }
-        },
-        series: [
-            {
-                name: '运行状态',
-                type: 'line',
-                step: 'end',
-                data: list
-            }
-        ]
-    }
-}
-onMounted(() => {
-    init()
-})
-</script>
-<style lang="scss">
-.running-condition {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    box-sizing: border-box;
-    padding: 14px;
-    border: 1px solid var(--el-border-color);
-
-    .zanjiangfenbutongji {
-        position: relative;
-        display: flex;
-        overflow: hidden;
-    }
-}
-</style>
+<template>
+    <div v-loading="loading" class="running-condition">
+        <el-form :inline="true" class="fx-jcsb">
+            <el-form-item label="日期">
+                <DatePicker ref="datePickerRef"></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style="flex: 1" class="mt10 zanjiangfenbutongji">
+            <div
+                style="
+                    position: absolute;
+                    right: 55px;
+                    top: 25px;
+                    z-index: 2;
+                    display: flex;
+                    align-items: center;
+                    font-size: 12px;
+                "
+            >
+                <el-tag style="width: 20px; height: 12px" :style="{ background: gradeColor3[2] }"></el-tag>
+                <span class="ml2" :style="{ color: gradeColor3[2] }">{{ 'X<60%' }}</span>
+                <el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[1] }"></el-tag>
+                <span class="ml2" :style="{ color: gradeColor3[1] }">{{ '60%≤X<90%' }}</span>
+                <el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[0] }"></el-tag>
+                <span class="ml2" :style="{ color: gradeColor3[0] }">{{ 'X≥90 %' }}</span>
+            </div>
+            <my-echart :options="secondOptions" style="flex: 1; height: 100%" />
+            <my-echart :options="firstOptions" style="flex: 1; height: 100%" />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { nextTick, onMounted, reactive, ref, watch } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
+import { gradeColor3 } from '@/components/echarts/color'
+
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    id: '',
+    searchBeginTime: '',
+    searchEndTime: '',
+    timeFlag: 1
+})
+const firstOptions = ref<any>({})
+const secondOptions = ref<any>({})
+const firstData = ref<any>([])
+const secondData = ref<any>([])
+
+const init = () => {
+    loading.value = true
+    formData.id = monitoringPoint.state.lineId
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    formData.timeFlag = datePickerRef.value.interval
+    Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data
+        initFirst()
+        initSecond()
+        loading.value = false
+    })
+}
+const initFirst = () => {
+    let months = new Array()
+    let handle = new Array()
+    let year = firstData.value[0].dateView
+
+    for (let i = 0; i < firstData.value.length; i++) {
+        months[i] = firstData.value[i].dateView
+        handle.push(firstData.value[i].onlineRate)
+    }
+    firstOptions.value = {
+        title: {
+            text: '在线率统计',
+            x: 'center',
+            textStyle: {
+                fontWeight: 'normal'
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.55)',
+            formatter: function(params: any) {
+            
+                let tips = ''
+                tips += '时间:' + params[0].name + '</br/>'
+                for (let i = 0; i < params.length; i++) {
+                    if (params[i].value == 3.14159) {
+                        tips += '在线率' + ':暂无数据<br/>'
+                    } else {
+                        tips += '在线率' + ':' + params[i].value + '%<br/>'
+                    }
+                }
+                return tips
+            }
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: months,
+                name: '时间',
+                nameTextStyle: {
+                    verticalAlign: 'top', //标题位置
+                    padding: [-5, 0, 0, -10]
+                },
+
+                splitLine: {
+                    show: false
+                },
+                axisLine: {
+                    show: true
+                }
+            }
+        ],
+        yAxis: [
+            {
+                min: 0,
+                max: 100,
+                type: 'value',
+                name: '%',
+                axisLine: {
+                    show: true
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        // 使用深浅的间隔色
+                        type: 'dashed',
+                        opacity: 0.5
+                    }
+                }
+            }
+        ],
+        series: [
+            {
+                type: 'bar',
+                data: handle,
+                itemStyle: {
+                    color: (params: any) => {
+                        if (params.value == 3.14159) {
+                            return '#ccc'
+                        } else {
+                            if (params.value < 60) {
+                                return gradeColor3[2]
+                            } else if (params.value < 90) {
+                                return gradeColor3[1]
+                            } else {
+                                return gradeColor3[0]
+                            }
+                        }
+                    }
+                },
+                markLine: {
+                    silent: false,
+                    symbol: 'circle',
+                    data: [
+                        {
+                            yAxis: 100,
+                            lineStyle: {
+                                color: gradeColor3[0]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '100%'
+                            }
+                        },
+                        {
+                            yAxis: 90,
+                            lineStyle: {
+                                color: gradeColor3[1]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '90%'
+                            }
+                        },
+                        {
+                            yAxis: 60,
+                            lineStyle: {
+                                color: gradeColor3[2]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '60%'
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}
+const initSecond = () => {
+    let list = secondData.value.type.map((item, i) => [secondData.value.updateTime[i], item])
+
+    secondOptions.value = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.55)',
+            formatter: function(params: any) {
+                let res = ''
+                res += `${params[0].value[0]}：${params[0].value[1] == '0' ? '中断' : '正常'}` //params[0].value[0] + '：' //+ params[0].value[1] == '0' ? '中断' : '正常'
+
+                return res
+            }
+        },
+
+        xAxis: {
+            // name: '时间',
+            // type: 'category',
+            // data: items,
+            // boundaryGap: false
+            type: 'time',
+            name: '时间',
+            //
+            axisLabel: {
+                formatter: {
+                    day: '{MM}-{dd}',
+                    month: '{MM}',
+                    year: '{yyyy}'
+                }
+            }
+        },
+        yAxis: {
+            name: '状态',
+            type: 'value',
+            axisLine: {
+                show: true
+            },
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: 'blue'
+                },
+                // 这里重新定义就可以
+                formatter: function(value: number) {
+                    let texts = []
+                    if (value === 2) {
+                        texts.push('退出')
+                    } else if (value === 0) {
+                        texts.push('中断')
+                    } else if (value === 1) {
+                        texts.push('正常')
+                    }
+                    return texts
+                }
+            }
+        },
+        series: [
+            {
+                name: '运行状态',
+                type: 'line',
+                step: 'end',
+                data: list
+            }
+        ]
+    }
+}
+onMounted(() => {
+    init()
+})
+</script>
+<style lang="scss">
+.running-condition {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 14px;
+    border: 1px solid var(--el-border-color);
+    overflow: hidden;
+
+    .zanjiangfenbutongji {
+        position: relative;
+        display: flex;
+        overflow: hidden;
+    }
+}
+</style>

src/views/system/auth/department/popupForm.vue

@@ -1,157 +1,157 @@
-<template>
-    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
-        <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
-                <el-form-item label="部门编号:">
-                    <el-input v-model="form.code" placeholder="请输入部门编号"></el-input>
-                </el-form-item>
-                <el-form-item class="top" label="部门名称:" prop="name">
-                    <el-input v-model="form.name" placeholder="请输入部门名称" maxlength="32" show-word-limit clearable @input="handleInput"/>
-                </el-form-item>
-                <el-form-item class="top" label="部门类型:" prop="type">
-                    <el-select v-model="form.type" placeholder="选择部门类型" style="width: 100%">
-                        <el-option
-                            v-for="item in customDeptOption"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item class="top" label="子类型:" >
-                    <el-select v-model="form.specialType" placeholder="选择子类型" style="width: 100%">
-                        <el-option
-                            v-for="item in ziDeptOption"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item class="top" label="部门区域:" prop="area">
-                    <el-select v-model="form.area" placeholder="选择子类型" style="width: 100%">
-                        <el-option
-                            v-for="item in areaOption"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item class="top" label="部门排序:" prop="sort">
-                    <el-input v-model="form.sort" placeholder="请输入部门排序"></el-input>
-                </el-form-item>
-                <el-form-item class="top" label="部门描述:">
-                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入部门描述"></el-input>
-                </el-form-item>
-            </el-form>
-        </el-scrollbar>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="submit">确认</el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref, inject } from 'vue'
-import { reactive } from 'vue'
-import { ElMessage } from 'element-plus'
-import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
-import { getAreaTree, getPidAreaByAreaId, addDept, updateDept } from '@/api/user-boot/dept'
-
-const dialogVisible = ref(false)
-const title = ref('')
-const tableStore = inject('tableStore') as TableStore
-const formRef = ref()
-// 注意不要和表单ref的命名冲突
-const form = reactive<anyObj>({
-    area: '',
-    name: '',
-    pid: -1,
-    remark: '',
-    sort: 100,
-    type: 0,
-    code: '',
-    specialType: 0,
-    id: ''
-})
-const originForm = { ...form }
-const rules = {
-    parentName: [{ required: true, message: '请选择父节点', trigger: 'blur' }],
-    code: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
-    name: [{ required: true, message: '请输选择部门名称', trigger: 'blur' }],
-    type: [{ required: true, message: '请输选择部门类型', trigger: 'blur' }],
-    specialType: [{ required: true, message: '请输选择部门子类型', trigger: 'blur' }],
-    sort: [{ required: true, message: '请输入部门排序', trigger: 'blur' }],
-    area: [{ required: true, message: '请选择部门区域', trigger: 'blur' }]
-}
-const customDeptOption = [
-    { value: 0, label: '非自定义' },
-    { value: 1, label: 'web自定义' },
-    { value: 2, label: 'App自定义' },
-    { value: 3, label: 'web测试' }
-]
-const ziDeptOption = [
-    { label: '非本部', value: 0 },
-    { label: '本部', value: 1 }
-]
-const areaOption = ref<any>([])
-const open = (text: string, data: anyObj) => {
-    console.log(data)
-    title.value = text
-    dialogVisible.value = true
-    if (data.id) {
-        // 表单赋值
-        for (let key in form) {
-            form[key] = data[key]
-        }
-        getPidAreaByAreaId({
-            id: data.area,
-            type: 0
-        }).then((res: any) => {
-            areaOption.value = res.data
-        })
-    } else {
-        // 在此处恢复默认表单
-        for (let key in form) {
-            form[key] = originForm[key]
-            if (data[key]) {
-                form[key] = data[key]
-            }
-        }
-        getAreaTree({
-            id: data.pArea,
-            type: 0
-        }).then((res: any) => {
-            areaOption.value = res.data
-        })
-    }
-}
-const submit = () => {
-    formRef.value.validate(async (valid: boolean) => {
-        if (valid) {
-            if (form.id) {
-                await updateDept(form)
-            } else {
-                await addDept(form)
-            }
-            ElMessage.success('保存成功')
-            tableStore.index()
-            dialogVisible.value = false
-        }
-    })
-}
-
-
-const handleInput = ( value: string) => {
-    // 过滤空格
-    const filteredValue = value.replace(/\s/g, '')
-    if (filteredValue !== value) {
-       form.name = filteredValue
-    }
-}
-
-defineExpose({ open })
-</script>
+<template>
+    <el-dialog draggable width="700px" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+                <el-form-item label="部门编号:">
+                    <el-input v-model="form.code" placeholder="请输入部门编号"></el-input>
+                </el-form-item>
+                <el-form-item class="top" label="部门名称:" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入部门名称" maxlength="32" show-word-limit clearable @input="handleInput"/>
+                </el-form-item>
+                <el-form-item class="top" label="部门类型:" prop="type">
+                    <el-select v-model="form.type" placeholder="选择部门类型" style="width: 100%">
+                        <el-option
+                            v-for="item in customDeptOption"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item class="top" label="子类型:" >
+                    <el-select v-model="form.specialType" placeholder="选择子类型" style="width: 100%">
+                        <el-option
+                            v-for="item in ziDeptOption"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item class="top" label="部门区域:" prop="area">
+                    <el-select v-model="form.area" placeholder="选择子类型" style="width: 100%">
+                        <el-option
+                            v-for="item in areaOption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item class="top" label="部门排序:" prop="sort">
+                    <el-input v-model="form.sort" placeholder="请输入部门排序"></el-input>
+                </el-form-item>
+                <el-form-item class="top" label="部门描述:">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入部门描述"></el-input>
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
+import { getAreaTree, getPidAreaByAreaId, addDept, updateDept } from '@/api/user-boot/dept'
+
+const dialogVisible = ref(false)
+const title = ref('')
+const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
+// 注意不要和表单ref的命名冲突
+const form = reactive<anyObj>({
+    area: '',
+    name: '',
+    pid: -1,
+    remark: '',
+    sort: 100,
+    type: 0,
+    code: '',
+    specialType: 0,
+    id: ''
+})
+const originForm = { ...form }
+const rules = {
+    parentName: [{ required: true, message: '请选择父节点', trigger: 'blur' }],
+    code: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
+    name: [{ required: true, message: '请输选择部门名称', trigger: 'blur' }],
+    type: [{ required: true, message: '请输选择部门类型', trigger: 'blur' }],
+    specialType: [{ required: true, message: '请输选择部门子类型', trigger: 'blur' }],
+    sort: [{ required: true, message: '请输入部门排序', trigger: 'blur' }],
+    area: [{ required: true, message: '请选择部门区域', trigger: 'blur' }]
+}
+const customDeptOption = [
+    { value: 0, label: '非自定义' },
+    { value: 1, label: 'web自定义' },
+    { value: 2, label: 'App自定义' },
+    { value: 3, label: 'web测试' }
+]
+const ziDeptOption = [
+    { label: '非本部', value: 0 },
+    { label: '本部', value: 1 }
+]
+const areaOption = ref<any>([])
+const open = (text: string, data: anyObj) => {
+    console.log(data)
+    title.value = text
+    dialogVisible.value = true
+    if (data.id) {
+        // 表单赋值
+        for (let key in form) {
+            form[key] = data[key]
+        }
+        getPidAreaByAreaId({
+            id: data.area,
+            type: 0
+        }).then((res: any) => {
+            areaOption.value = res.data
+        })
+    } else {
+        // 在此处恢复默认表单
+        for (let key in form) {
+            form[key] = originForm[key]
+            if (data[key]) {
+                form[key] = data[key]
+            }
+        }
+        getAreaTree({
+            id: data.pArea,
+            type: 0
+        }).then((res: any) => {
+            areaOption.value = res.data
+        })
+    }
+}
+const submit = () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            if (form.id) {
+                await updateDept(form)
+            } else {
+                await addDept(form)
+            }
+            ElMessage.success('保存成功')
+            tableStore.index()
+            dialogVisible.value = false
+        }
+    })
+}
+
+
+const handleInput = ( value: string) => {
+    // 过滤空格
+    const filteredValue = value.replace(/\s/g, '')
+    if (filteredValue !== value) {
+       form.name = filteredValue
+    }
+}
+
+defineExpose({ open })
+</script>