修改电网一张图publicKey

src/api/admin/user.js

@@ -0,0 +1,26 @@
+import createAxios from '@/utils/request' 
+
+// 密码规则修改
+export function ruleUpdate(data) {
+    return createAxios({
+        url: '/user-boot/password/ruleUpdate',
+        method: 'post',
+        data
+    })
+}
+// 获取密码规则
+export function getRule(data) {
+    return createAxios({
+        url: '/user-boot/password/getRule',
+        method: 'post',
+        data
+    })
+}
+// 解锁超级管理员
+export function unlockRoot(data) {
+    return createAxios({
+        url: '/user-boot/password/unlockRoot',
+        method: 'post',
+        data
+    })
+}

src/api/advance-boot/division.ts

@@ -48,3 +48,19 @@ export function displayHistoryData(data: any) {
         params: data
     })
 }
+//生成谐波责任指标
+export function getResponsibilityData(data: any) {
+    return createAxios({
+        url: '/advance-boot/responsibility/getResponsibilityData',
+        method: 'post',
+         data
+    })
+}
+//生成动态谐波责任数据
+export function getDynamicData(data: any) {
+    return createAxios({
+        url: '/advance-boot/responsibility/getDynamicData',
+        method: 'post',
+         data
+    })
+}

src/api/auditManage/auditList.ts

@@ -0,0 +1,62 @@
+import createAxios from '@/utils/request' 
+
+//筛选下拉列表参数
+export function getAllUserList() {
+    return createAxios({
+        url: "/user-boot/user/getAllUserSimpleList",
+        method: "get",
+    });
+}
+//审计日志列表
+export function getAuditLog(data:any) {
+    return createAxios({
+        url: "/system-boot/audit/getAuditLog",
+        method: "post",
+        data,
+    });
+}
+//审计日志统计
+export function censusAuditLog(data:any) {
+    return createAxios({
+        url: "/system-boot/audit/censusAuditLog",
+        method: "post",
+        data,
+    });
+}
+//日志文件备份
+export function logFileWriter(data:any) {
+    return createAxios({
+        url: "/system-boot/audit/logFileWriter",
+        method: "post",
+        data,
+    });
+}
+//日志文件恢复
+export function recoverLogFile(data:any) {
+    return createAxios({
+        url: "/system-boot/audit/recoverLogFile",
+        method: "post",
+        data,
+    });
+}
+//获取在线用户
+export function getOnlineUsers(data:any) {
+    return createAxios({
+        url: "/system-boot/audit/getOnlineUsers",
+        method: "post",
+        data,
+    });
+}
+//获取表空间大小
+export function getMemoInfo() {
+    return createAxios({
+        url: "/system-boot/audit/getMemoInfo",
+        method: "post",
+    });
+}
+export function getSysConfig() {
+    return createAxios({
+        url: "/system-boot/config/getSysConfig",
+        method: "get",
+    });
+}

src/api/device-boot/transformerStrategy.ts

@@ -0,0 +1,99 @@
+import request from '@/utils/request'
+
+// 变压器台账分页查询
+export function transformerPage(data: any) {
+    return request({
+        url: '/device-boot/pqsTransformer/transformerPage',
+        method: 'post',
+        data: data
+    })
+}
+
+// 分页查询变压器策略
+export function flgployPage(data: any) {
+    return request({
+        url: '/device-boot/pqsTflgploy/flgployPage',
+        method: 'post',
+        data: data
+    })
+}
+
+//变压器台账新增
+export function insertTransformer(data: any) {
+    return request({
+        url: '/device-boot/pqsTransformer/insertTransformer',
+        method: 'post',
+        data
+    })
+}
+//新增变压器策略
+export function insertFlgPloy(data: any) {
+    return request({
+        url: '/device-boot/pqsTflgploy/insertFlgPloy',
+        method: 'post',
+        data
+    })
+}
+//变压器台账修改
+export function updateTransformer(data: any) {
+    return request({
+        url: '/device-boot/pqsTransformer/updateTransformer',
+        method: 'post',
+        data
+    })
+}
+//变压器策略详情
+export function getFlgPloyInfo(data: any) {
+    return request({
+        url: '/device-boot/pqsTflgploy/getFlgPloyInfo',
+        method: 'get',
+        params: data
+    })
+}
+//修改变压器策略
+export function updateFlgPloy(data: any) {
+    return request({
+        url: '/device-boot/pqsTflgploy/updateFlgPloy',
+        method: 'post',
+        data
+    })
+}
+//变压器台账删除
+export function delTransformer(data: any) {
+    return request({
+        url: '/device-boot/pqsTransformer/delTransformer',
+        method: 'post',
+        data
+    })
+}
+//删除变压器策略
+export function delFlgPloy(data: any) {
+    return request({
+        url: '/device-boot/pqsTflgploy/delFlgPloy',
+        method: 'get',
+        params: data
+    })
+}
+//获取变压器台账 树
+export function getTransformerTree() {
+    return request({
+        url: '/device-boot/pqsTransformer/getTransformerTree',
+        method: 'get'
+    })
+}
+//获取上下节点信息
+export function getGeneratrix(data: any) {
+    return request({
+        url: '/device-boot/pqsTransformer/getGeneratrix',
+        method: 'get',
+        params: data
+    })
+}
+//变电站节点维护
+export function nodeMaintenance(data: any) {
+    return request({
+        url: '/device-boot/pqsTransformer/nodeMaintenance',
+        method: 'post',
+        data
+    })
+}

src/api/system-boot/file.ts

@@ -1,71 +1,72 @@
-import createAxios from '@/utils/request'
-
-const SYSTEM_PREFIX = '/system-boot'
-
-/**
- * 上传文件
- * @param file
- */
-export const uploadFile = (file: any, path: string) => {
-    let form = new FormData()
-    form.append('file', file)
-    form.append('path', path)
-    return createAxios({
-        url: SYSTEM_PREFIX + '/file/upload',
-        method: 'POST',
-        headers: {
-            'Content-Type': 'multipart/form-data'
-        },
-        data: form
-    })
-}
-
-/**
- * 删除文件
- */
-export const deleteFile = (filePath: string) => {
-    let form = new FormData()
-    form.append('filePath', filePath)
-    return createAxios({
-        url: SYSTEM_PREFIX + '/file/delete',
-        method: 'POST',
-        data: form
-    })
-}
-
-/**
- * 下载文件
- */
-export const downloadFile = (filePath: any) => {
-    // let form = new FormData()
-    // form.append('filePath', filePath)
-    return createAxios({
-        url: SYSTEM_PREFIX + '/file/download',
-        method: 'GET',
-        params: filePath,
-        responseType: 'blob'
-    })
-}
-
-/**
- * 获取文件的短期url展示
- */
-export const getFileUrl = (filePath: string) => {
-    let form = new FormData()
-    form.append('filePath', filePath)
-    return createAxios({
-        url: SYSTEM_PREFIX + '/file/getFileUrl',
-        method: 'POST'
-    })
-}
-
-/**
- * 根据获取文件的一个短期url及文件名
- */
-export const getFileNameAndFilePath = (query: any) => {
-    return createAxios({
-        url: SYSTEM_PREFIX + '/file/getFileVO',
-        method: 'GET',
-        params: query
-    })
-}
+import createAxios from '@/utils/request'
+
+const SYSTEM_PREFIX = '/system-boot'
+
+/**
+ * 上传文件
+ * @param file
+ */
+export const uploadFile = (file: any, path: string) => {
+    let form = new FormData()
+    form.append('file', file)
+    form.append('path', path)
+    return createAxios({
+        url: SYSTEM_PREFIX + '/file/upload',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'multipart/form-data'
+        },
+        data: form
+    })
+}
+
+/**
+ * 删除文件
+ */
+export const deleteFile = (filePath: string) => {
+    let form = new FormData()
+    form.append('filePath', filePath)
+    return createAxios({
+        url: SYSTEM_PREFIX + '/file/delete',
+        method: 'POST',
+        data: form
+    })
+}
+
+/**
+ * 下载文件
+ */
+export const downloadFile = (filePath: any) => {
+    // let form = new FormData()
+    // form.append('filePath', filePath)
+    return createAxios({
+        url: SYSTEM_PREFIX + '/file/download',
+        method: 'GET',
+        params: filePath,
+        responseType: 'blob'
+    })
+}
+
+/**
+ * 获取文件的短期url展示
+ */
+export const getFileUrl = (params:any) => {
+    let form = new FormData()
+    // form.append('filePath', filePath)
+    return createAxios({
+        url: SYSTEM_PREFIX + '/file/getFileUrl',
+        method: 'get',
+        params
+    })
+}
+
+/**
+ * 根据获取文件的一个短期url及文件名
+ */
+export const getFileNameAndFilePath = (query: any) => {
+    return createAxios({
+        url: SYSTEM_PREFIX + '/file/getFileVO',
+        method: 'GET',
+        params: query
+    })
+}

src/components/echarts/MyEchart.vue

@@ -1,321 +1,322 @@
-<template>
-    <div class="chart">
-        <div ref="chartRef" class="my-chart" />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
-// import echarts from './echarts'
-import * as echarts from 'echarts' // 全引入
-import 'echarts-gl'
-import 'echarts-liquidfill'
-import 'echarts/lib/component/dataZoom'
-import { color, gradeColor3 } from './color'
-import { useConfig } from '@/stores/config'
-const config = useConfig()
-// import { nextTick } from 'process'
-const emit = defineEmits(['triggerPoint', 'group'])
-color[0] = config.layout.elementUiPrimary[0]
-const chartRef = ref<HTMLDivElement>()
-
-const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
-let chart: echarts.ECharts | any = null
-const resizeHandler = () => {
-    // 不在视野中的时候不进行resize
-    if (!chartRef.value) return
-    if (chartRef.value.offsetHeight == 0) return
-    chart.getZr().painter.getViewportRoot().style.display = 'none'
-    requestAnimationFrame(() => {
-        chart.resize()
-        chart.getZr().painter.getViewportRoot().style.display = ''
-    })
-}
-const initChart = () => {
-    if (!props.isInterVal && !props.pieInterVal) {
-        chart?.dispose()
-    }
-    // chart?.dispose()
-    chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
-    const options = {
-        title: {
-            left: 'center',
-            // textStyle: {
-            color: '#000',
-            fontSize: 18,
-            // },
-            ...(props.options?.title || null)
-        },
-        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)',
-            borderWidth: 0,
-            confine: true,
-            formatter: function (params: any) {
-                let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
-                params?.forEach((item: any) => {
-                    const value =
-                        item.value === 3.14159 || item.value === 0.14159
-                            ? '暂无数据'
-                            : Math.round(item.value * 100) / 100 // 处理特殊值
-                    tips += `<div style=" display: flex;justify-content: space-between;">
-                           <span>${item.marker}
-                            ${item.seriesName}:
-                           </span>　${value}
-                            </div>` // 统一格式
-                })
-                return tips
-            },
-            ...(props.options?.tooltip || null)
-        },
-        toolbox: {
-            right: 20,
-            top: 15,
-            feature: {
-                saveAsImage: {
-                    title: '', // 按钮标题
-                    icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
-                },
-
-                ...(props.options?.toolbox?.featureProps || null)
-            },
-            emphasis: {
-                iconStyle: {
-                    borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
-                    color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
-                }
-            },
-            // },
-            ...(props.options?.toolbox || null)
-        },
-        legend: {
-            right: 50,
-            top: 25,
-            itemGap: 10,
-            itemStyle: {},
-            // textStyle: {
-            fontSize: 12,
-            padding: [2, 0, 0, 0], //[上、右、下、左]
-            // },
-            itemWidth: 15,
-            itemHeight: 10,
-            ...(props.options?.legend || null)
-        },
-        grid: {
-            top: '50px',
-            left: '30px',
-            right: '70px',
-            bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
-            containLabel: true,
-            ...(props.options?.grid || null)
-        },
-        xAxis: props.options?.xAxis ? handlerXAxis() : null,
-        yAxis: props.options?.yAxis ? handlerYAxis() : null,
-        dataZoom: props.options?.dataZoom || [
-            {
-                type: 'inside',
-                height: 13,
-                start: 0,
-                bottom: '20px',
-                end: 100
-            },
-            {
-                start: 0,
-                height: 13,
-                bottom: '20px',
-                end: 100
-            }
-        ],
-        color: props.options?.color || color,
-        series: props.options?.series,
-        ...props.options?.options
-    }
-    // console.log(options.series,"获取x轴");
-    handlerBar(options)
-    // 处理柱状图
-    chart.setOption(options, true)
-    // chart.group = 'group'
-    emit('group',chart)
-    // 添加点击事件
-    chart.on('click', function (params) {
-        if (params.seriesName == '暂态触发点') {
-            emit('triggerPoint', params.data)
-        }
-    })
-    setTimeout(() => {
-        chart.resize()
-    }, 0)
-}
-const handlerBar = (options: any) => {
-    if (Array.isArray(options.series)) {
-        options.series.forEach((item: any) => {
-            if (item.type === 'bar') {
-                item.barMinHeight = 10
-                item.barMaxWidth = 20
-                item.itemStyle = Object.assign(
-                    {
-                        color: (params: any) => {
-                            if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
-                                return '#ccc'
-                            } else {
-                                return props.options?.color
-                                    ? props.options?.color[params.seriesIndex]
-                                    : color[params.seriesIndex]
-                            }
-                        }
-                    },
-                    item.itemStyle
-                )
-            }
-        })
-    }
-}
-const handlerYAxis = () => {
-    let temp = {
-        type: 'value',
-        nameGap: 15,
-        nameTextStyle: {
-            color: '#000'
-        },
-        splitNumber: 5,
-        minInterval: 1,
-        axisLine: {
-            show: true,
-            lineStyle: {
-                color: '#000'
-            }
-        },
-        axisLabel: {
-            color: '#000',
-            fontSize: 14,
-            formatter: function (value) {
-                return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
-            }
-        },
-        splitLine: {
-            lineStyle: {
-                // 使用深浅的间隔色
-                color: ['#ccc'],
-                type: 'dashed',
-                opacity: 0.5
-            }
-        }
-    }
-    // props.options?.xAxis 是数组还是对象
-    if (Array.isArray(props.options?.yAxis)) {
-        return props.options?.yAxis.map((item: any) => {
-            return {
-                ...temp,
-                ...item
-            }
-        })
-    } else {
-        return {
-            ...temp,
-            ...props.options?.yAxis
-        }
-    }
-}
-const handlerXAxis = () => {
-    let temp = {
-        type: 'category',
-        axisTick: { show: false },
-        nameTextStyle: {
-            color: '#000'
-        },
-        axisLine: {
-            // lineStyle: {
-            color: '#000'
-            // }
-        },
-        axisLabel: {
-            // textStyle: {
-            fontFamily: 'dinproRegular',
-            color: '#000',
-            fontSize: '12'
-            // }
-        }
-        // boundaryGap: false,
-    }
-    // props.options?.xAxis 是数组还是对象
-    if (Array.isArray(props.options?.xAxis)) {
-        return props.options?.xAxis.map((item: any) => {
-            return {
-                ...temp,
-                ...item
-            }
-        })
-    } else {
-        return {
-            ...temp,
-            ...props.options?.xAxis
-        }
-    }
-}
-
-let throttle: ReturnType<typeof setTimeout>
-// 动态计算table高度
-const resizeObserver = new ResizeObserver(entries => {
-    for (const entry of entries) {
-        if (throttle) {
-            clearTimeout(throttle)
-        }
-        throttle = setTimeout(() => {
-            resizeHandler()
-        }, 100)
-    }
-})
-const setOptions = (options: any) => {
-    chart.setOption(options)
-}
-const getChart = () => {
-    return chart
-}
-onMounted(() => {
-    initChart()
-    resizeObserver.observe(chartRef.value!)
-})
-defineExpose({ initChart, setOptions, getChart })
-onBeforeUnmount(() => {
-    resizeObserver.unobserve(chartRef.value!)
-    chart?.dispose()
-})
-watch(
-    () => props.options,
-    (newVal, oldVal) => {
-        initChart()
-    }
-)
-</script>
-
-<style lang="scss" scoped>
-.chart {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .el-button {
-        position: absolute;
-        right: 0px;
-        top: -60px;
-    }
-
-    .my-chart {
-        height: 100%;
-        width: 100%;
-    }
-}
-</style>
+<template>
+    <div class="chart">
+        <div ref="chartRef" class="my-chart" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
+// import echarts from './echarts'
+import * as echarts from 'echarts' // 全引入
+import 'echarts-gl'
+import 'echarts-liquidfill'
+import 'echarts/lib/component/dataZoom'
+import { color, gradeColor3 } from './color'
+import { useConfig } from '@/stores/config'
+const config = useConfig()
+// import { nextTick } from 'process'
+const emit = defineEmits(['triggerPoint', 'group'])
+color[0] = config.layout.elementUiPrimary[0]
+const chartRef = ref<HTMLDivElement>()
+
+const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
+let chart: echarts.ECharts | any = null
+const resizeHandler = () => {
+    // 不在视野中的时候不进行resize
+    if (!chartRef.value) return
+    if (chartRef.value.offsetHeight == 0) return
+    chart.getZr().painter.getViewportRoot().style.display = 'none'
+    requestAnimationFrame(() => {
+        chart.resize()
+        chart.getZr().painter.getViewportRoot().style.display = ''
+    })
+}
+const initChart = () => {
+    if (!props.isInterVal && !props.pieInterVal) {
+        chart?.dispose()
+    }
+    // chart?.dispose()
+    chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
+    const options = {
+        title: {
+            left: 'center',
+            // textStyle: {
+            color: '#000',
+            fontSize: 18,
+            // },
+            ...(props.options?.title || null)
+        },
+        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)',
+            borderWidth: 0,
+            confine: true,
+            formatter: function (params: any) {
+                let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
+                params?.forEach((item: any) => {
+                    const value =
+                        item.value === 3.14159 || item.value === 0.14159
+                            ? '暂无数据'
+                            : Math.round(item.value * 100) / 100 // 处理特殊值
+                    tips += `<div style=" display: flex;justify-content: space-between;">
+                           <span>${item.marker}
+                            ${item.seriesName}:
+                           </span>　${value}
+                            </div>` // 统一格式
+                })
+                return tips
+            },
+            ...(props.options?.tooltip || null)
+        },
+        toolbox: {
+            right: 20,
+            top: 15,
+            feature: {
+                saveAsImage: {
+                    title: '', // 按钮标题
+                    icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
+                },
+
+                ...(props.options?.toolbox?.featureProps || null)
+            },
+            emphasis: {
+                iconStyle: {
+                    borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
+                    color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
+                }
+            },
+            // },
+            ...(props.options?.toolbox || null)
+        },
+        legend: {
+            right: 50,
+            top: 25,
+            itemGap: 10,
+            itemStyle: {},
+            // textStyle: {
+            fontSize: 12,
+            padding: [2, 0, 0, 0], //[上、右、下、左]
+            // },
+            itemWidth: 15,
+            itemHeight: 10,
+            ...(props.options?.legend || null)
+        },
+        grid: {
+            top: '50px',
+            left: '30px',
+            right: '70px',
+            bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
+            containLabel: true,
+            ...(props.options?.grid || null)
+        },
+        xAxis: props.options?.xAxis ? handlerXAxis() : null,
+        yAxis: props.options?.yAxis ? handlerYAxis() : null,
+        dataZoom: props.options?.dataZoom || [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100
+            }
+        ],
+        color: props.options?.color || color,
+        series: props.options?.series,
+        ...props.options?.options
+    }
+    // console.log(options.series,"获取x轴");
+    handlerBar(options)
+    // 处理柱状图
+    chart.setOption(options, true)
+    // chart.group = 'group'
+    emit('group', chart, chartRef.value)
+    // 添加点击事件
+    chart.on('click', function (params) {
+        if (params.seriesName == '暂态触发点') {
+            emit('triggerPoint', params.data)
+        }
+    })
+
+    setTimeout(() => {
+        chart.resize()
+    }, 0)
+}
+const handlerBar = (options: any) => {
+    if (Array.isArray(options.series)) {
+        options.series.forEach((item: any) => {
+            if (item.type === 'bar') {
+                item.barMinHeight = 10
+                item.barMaxWidth = 20
+                item.itemStyle = Object.assign(
+                    {
+                        color: (params: any) => {
+                            if (params.value == 0 || params.value == 3.14159 || params.value == 0.14159) {
+                                return '#ccc'
+                            } else {
+                                return props.options?.color
+                                    ? props.options?.color[params.seriesIndex]
+                                    : color[params.seriesIndex]
+                            }
+                        }
+                    },
+                    item.itemStyle
+                )
+            }
+        })
+    }
+}
+const handlerYAxis = () => {
+    let temp = {
+        type: 'value',
+        nameGap: 15,
+        nameTextStyle: {
+            color: '#000'
+        },
+        splitNumber: 5,
+        minInterval: 1,
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#000'
+            }
+        },
+        axisLabel: {
+            color: '#000',
+            fontSize: 14,
+            formatter: function (value) {
+                return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                // 使用深浅的间隔色
+                color: ['#ccc'],
+                type: 'dashed',
+                opacity: 0.5
+            }
+        }
+    }
+    // props.options?.xAxis 是数组还是对象
+    if (Array.isArray(props.options?.yAxis)) {
+        return props.options?.yAxis.map((item: any) => {
+            return {
+                ...temp,
+                ...item
+            }
+        })
+    } else {
+        return {
+            ...temp,
+            ...props.options?.yAxis
+        }
+    }
+}
+const handlerXAxis = () => {
+    let temp = {
+        type: 'category',
+        axisTick: { show: false },
+        nameTextStyle: {
+            color: '#000'
+        },
+        axisLine: {
+            // lineStyle: {
+            color: '#000'
+            // }
+        },
+        axisLabel: {
+            // textStyle: {
+            fontFamily: 'dinproRegular',
+            color: '#000',
+            fontSize: '12'
+            // }
+        }
+        // boundaryGap: false,
+    }
+    // props.options?.xAxis 是数组还是对象
+    if (Array.isArray(props.options?.xAxis)) {
+        return props.options?.xAxis.map((item: any) => {
+            return {
+                ...temp,
+                ...item
+            }
+        })
+    } else {
+        return {
+            ...temp,
+            ...props.options?.xAxis
+        }
+    }
+}
+
+let throttle: ReturnType<typeof setTimeout>
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        if (throttle) {
+            clearTimeout(throttle)
+        }
+        throttle = setTimeout(() => {
+            resizeHandler()
+        }, 100)
+    }
+})
+const setOptions = (options: any) => {
+    chart.setOption(options)
+}
+const getChart = () => {
+    return chart
+}
+onMounted(() => {
+    initChart()
+    resizeObserver.observe(chartRef.value!)
+})
+defineExpose({ initChart, setOptions, getChart })
+onBeforeUnmount(() => {
+    resizeObserver.unobserve(chartRef.value!)
+    chart?.dispose()
+})
+watch(
+    () => props.options,
+    (newVal, oldVal) => {
+        initChart()
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+.chart {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .el-button {
+        position: absolute;
+        right: 0px;
+        top: -60px;
+    }
+
+    .my-chart {
+        height: 100%;
+        width: 100%;
+    }
+}
+</style>

src/components/table/fieldRender/index.vue

@@ -1,251 +1,259 @@
-<template>
-    <!-- text -->
-    <div v-if="field.render == 'renderFormatter'">
-        {{ fieldValue }}
-    </div>
-    <!-- Icon -->
-    <Icon class="ba-icon-dark" v-if="field.render == 'icon' && fieldValue" :name="fieldValue ? fieldValue : field.default ?? ''" />
-
-    <!-- switch -->
-    <el-switch v-if="field.render == 'switch'" @change="onChangeField(field, $event)"
-        :model-value="fieldValue.toString()" :loading="row.loading" inline-prompt :active-value="field.activeValue"
-        :active-text="field.activeText" :inactive-value="field.inactiveValue" :inactive-text="field.inactiveText" />
-
-    <!-- image -->
-    <div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
-        <el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fieldValue]"
-            :src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"></el-image>
-    </div>
-
-    <!-- tag -->
-    <div v-if="field.render == 'tag' && fieldValue !== ''">
-        <el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" :effect="field.effect ||'light'" size="small">
-            {{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
-        </el-tag>
-    </div>
-
-    <!-- datetime -->
-    <div v-if="field.render == 'datetime'">
-        {{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
-    </div>
-
-    <!-- color -->
-    <div v-if="field.render == 'color'">
-        <div :style="{ background: fieldValue }" class="ba-render-color"></div>
-    </div>
-
-    <!-- customTemplate 自定义模板 -->
-    <div v-if="field.render == 'customTemplate'"
-        v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></div>
-
-    <!-- 自定义组件/函数渲染 -->
-    <component v-if="field.render == 'customRender'" :is="field.customRender" :renderRow="row" :renderField="field"
-        :renderValue="fieldValue" :renderColumn="column" :renderIndex="index" />
-
-    <!-- 按钮组 -->
-    <div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
-        <template v-for="(btn, idx) in buttons" :key="idx">
-            <!-- 常规按钮 -->
-            <el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
-                class="table-operate" :type="btn.type" :disabled="btn.showDisabled && btn.showDisabled(row, field)"
-                :loading="props.row.loading || false" v-bind="btn.attr">
-                <div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
-            </el-button>
-
-            <!-- 带提示信息的按钮 -->
-            <el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
-                :content="btn.title" placement="top">
-                <el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
-                    v-bind="btn.attr">
-                    <div v-if="btn.text || btn.title" class="table-operate-text">
-                        {{ btn.text || btn.title }}
-                    </div>
-                </el-button>
-            </el-tooltip>
-
-            <!-- 带确认框的按钮 -->
-            <el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
-                v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
-                <template #reference>
-                    <div style="display: inline-block">
-                        <el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
-                            <div v-if="btn.text || btn.title" class="table-operate-text">
-                                {{ btn.text || btn.title }}
-                            </div>
-                        </el-button>
-                    </div>
-                </template>
-            </el-popconfirm>
-
-            <el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
-                <el-button link type="primary" class="table-operate">
-                    <div class="table-operate-text">更多</div>
-                </el-button>
-                <template #dropdown>
-                    <el-dropdown-menu>
-                        <el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item"
-                            :disabled="item.showDisabled && item.showDisabled(row, field)" :style="{
-                                color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger)'
-                            }">
-                            {{ item.text }}
-                        </el-dropdown-item>
-                    </el-dropdown-menu>
-                </template>
-            </el-dropdown>
-        </template>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, inject } from 'vue'
-import { ElMessageBox, type TagProps } from 'element-plus'
-import type TableStoreClass from '@/utils/tableStore'
-import { fullUrl, timeFormat } from '@/utils/common'
-import type { VxeColumnProps } from 'vxe-table'
-
-const TableStore = inject('tableStore') as TableStoreClass
-
-interface Props {
-    row: TableRow
-    field: TableColumn
-    column: VxeColumnProps
-    index: number
-}
-const props = defineProps<Props>()
-
-// 字段值（单元格值）
-const fieldName = ref(props.field.field)
-const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
-if (fieldName.value && fieldName.value.indexOf('.') > -1) {
-    let fieldNameArr = fieldName.value.split('.')
-    let val: any = ref(props.row[fieldNameArr[0]])
-    for (let index = 1; index < fieldNameArr.length; index++) {
-        val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
-    }
-    fieldValue.value = val.value
-}
-
-if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
-    fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
-}
-
-const onChangeField = (row: any, value: any) => {
-    row.onChangeField && row.onChangeField(props.row, value)
-
-    // TableStore.onTableAction('field-change', { value: value, ...props })
-}
-
-const onButtonClick = (btn: OptButton) => {
-    btn.click && btn.click(props.row, props.field)
-}
-
-const getTagType = (value: string, custom: any): TagProps['type'] => {
-    return custom && custom[value] ? custom[value] : ''
-}
-
-// 按钮组处理 最多显示三个按钮 多余的显示为下拉
-const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
-const buttons = ref<any[]>([])
-if (buttonsFilter.length > 3) {
-    buttonsFilter?.forEach((btn, index) => {
-        btn.text = btn.text || btn.title
-        if (index < 2) {
-            buttons.value.push(btn)
-        } else {
-            if (buttons.value.length > 2) {
-                buttons.value[buttons.value.length - 1].buttons.push(btn)
-            } else {
-                buttons.value.push({
-                    render: 'dropdown',
-                    buttons: [btn]
-                })
-            }
-        }
-    })
-} else {
-    buttons.value = buttonsFilter
-}
-const handlerCommand = (item: OptButton) => {
-    switch (item.render) {
-        case 'basicButton':
-            onButtonClick(item)
-            break
-        case 'confirmButton':
-            ElMessageBox.confirm(item.popconfirm?.title || '提示', {
-                confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
-                cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
-                type: 'warning'
-            }).then(() => {
-                onButtonClick(item)
-            })
-        default:
-            break
-    }
-}
-</script>
-
-<style scoped lang="scss">
-.m-10 {
-    margin: 4px;
-}
-
-.ba-render-image {
-    text-align: center;
-}
-
-.images-item {
-    width: 50px;
-    margin: 0 5px;
-}
-
-.el-image {
-    height: 36px;
-    // width: 36px;
-}
-
-.table-operate-text {
-    padding-left: 5px;
-    font-size: 12px;
-}
-
-.table-operate {
-    padding: 4px 5px;
-    height: auto;
-}
-
-.cn-render-buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .icon {
-        font-size: 12px !important;
-        // color: var(--ba-bg-color-overlay) !important;
-    }
-}
-
-.move-button {
-    cursor: move;
-}
-
-.ml-6 {
-    display: inline-flex;
-    vertical-align: middle;
-    margin-left: 6px;
-}
-
-.ml-6+.el-button {
-    margin-left: 6px;
-}
-
-.ba-render-color {
-    height: 25px;
-    width: 100%;
-}
-
-.cn-render-buttons {
-    :deep(.el-button) {
-        margin-left: 0;
-    }
-}
-</style>
+<template>
+    <!-- text -->
+    <div v-if="field.render == 'renderFormatter'">
+        {{ fieldValue }}
+    </div>
+    <!-- Icon -->
+    <Icon class="ba-icon-dark" v-if="field.render == 'icon' && fieldValue"
+        :name="fieldValue ? fieldValue : field.default ?? ''" />
+
+    <!-- switch -->
+    <el-switch v-if="field.render == 'switch'" @change="onChangeField(field, $event)"
+        :model-value="fieldValue.toString()" :loading="row.loading" inline-prompt :active-value="field.activeValue"
+        :active-text="field.activeText" :inactive-value="field.inactiveValue" :inactive-text="field.inactiveText" />
+
+    <!-- image -->
+    <div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
+        <el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fieldValue]"
+            :src="fieldValue.length > 100 ? fieldValue : getUrl(fieldValue)"></el-image>
+    </div>
+
+    <!-- tag -->
+    <div v-if="field.render == 'tag' && fieldValue !== ''">
+        <el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" :effect="field.effect || 'light'"
+            size="small">
+            {{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
+        </el-tag>
+    </div>
+
+    <!-- datetime -->
+    <div v-if="field.render == 'datetime'">
+        {{ !fieldValue ? '/' : timeFormat(fieldValue, field.timeFormat ?? undefined) }}
+    </div>
+
+    <!-- color -->
+    <div v-if="field.render == 'color'">
+        <div :style="{ background: fieldValue }" class="ba-render-color"></div>
+    </div>
+
+    <!-- customTemplate 自定义模板 -->
+    <div v-if="field.render == 'customTemplate'"
+        v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></div>
+
+    <!-- 自定义组件/函数渲染 -->
+    <component v-if="field.render == 'customRender'" :is="field.customRender" :renderRow="row" :renderField="field"
+        :renderValue="fieldValue" :renderColumn="column" :renderIndex="index" />
+
+    <!-- 按钮组 -->
+    <div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
+        <template v-for="(btn, idx) in buttons" :key="idx">
+            <!-- 常规按钮 -->
+            <el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
+                class="table-operate" :type="btn.type" :disabled="btn.showDisabled && btn.showDisabled(row, field)"
+                :loading="props.row.loading || false" v-bind="btn.attr">
+                <div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
+            </el-button>
+
+            <!-- 带提示信息的按钮 -->
+            <el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
+                :content="btn.title" placement="top">
+                <el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
+                    v-bind="btn.attr">
+                    <div v-if="btn.text || btn.title" class="table-operate-text">
+                        {{ btn.text || btn.title }}
+                    </div>
+                </el-button>
+            </el-tooltip>
+
+            <!-- 带确认框的按钮 -->
+            <el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
+                v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
+                <template #reference>
+                    <div style="display: inline-block">
+                        <el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
+                            <div v-if="btn.text || btn.title" class="table-operate-text">
+                                {{ btn.text || btn.title }}
+                            </div>
+                        </el-button>
+                    </div>
+                </template>
+            </el-popconfirm>
+
+            <el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
+                <el-button link type="primary" class="table-operate">
+                    <div class="table-operate-text">更多</div>
+                </el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item"
+                            :disabled="item.showDisabled && item.showDisabled(row, field)" :style="{
+                                color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger)'
+                            }">
+                            {{ item.text }}
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from 'vue'
+import { ElMessageBox, type TagProps } from 'element-plus'
+import type TableStoreClass from '@/utils/tableStore'
+import { fullUrl, timeFormat } from '@/utils/common'
+import { getFileUrl } from '@/api/system-boot/file'
+import type { VxeColumnProps } from 'vxe-table'
+
+const TableStore = inject('tableStore') as TableStoreClass
+
+interface Props {
+    row: TableRow
+    field: TableColumn
+    column: VxeColumnProps
+    index: number
+}
+const props = defineProps<Props>()
+
+// 字段值（单元格值）
+const fieldName = ref(props.field.field)
+const fieldValue = ref(fieldName.value ? props.row[fieldName.value] : '')
+if (fieldName.value && fieldName.value.indexOf('.') > -1) {
+    let fieldNameArr = fieldName.value.split('.')
+    let val: any = ref(props.row[fieldNameArr[0]])
+    for (let index = 1; index < fieldNameArr.length; index++) {
+        val.value = val.value ? val.value[fieldNameArr[index]] ?? '' : ''
+    }
+    fieldValue.value = val.value
+}
+
+if (props.field.renderFormatter && typeof props.field.renderFormatter == 'function') {
+    fieldValue.value = props.field.renderFormatter(props.row, props.field, fieldValue.value, props.column, props.index)
+}
+
+const onChangeField = (row: any, value: any) => {
+    row.onChangeField && row.onChangeField(props.row, value)
+
+    // TableStore.onTableAction('field-change', { value: value, ...props })
+}
+const getUrl = (url: string) => {
+    getFileUrl({ filePath: url }).then(res => {
+        return res.data
+    })
+}
+
+const onButtonClick = (btn: OptButton) => {
+    btn.click && btn.click(props.row, props.field)
+}
+
+const getTagType = (value: string, custom: any): TagProps['type'] => {
+    return custom && custom[value] ? custom[value] : ''
+}
+
+// 按钮组处理 最多显示三个按钮 多余的显示为下拉
+const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
+const buttons = ref<any[]>([])
+if (buttonsFilter.length > 3) {
+    buttonsFilter?.forEach((btn, index) => {
+        btn.text = btn.text || btn.title
+        if (index < 2) {
+            buttons.value.push(btn)
+        } else {
+            if (buttons.value.length > 2) {
+                buttons.value[buttons.value.length - 1].buttons.push(btn)
+            } else {
+                buttons.value.push({
+                    render: 'dropdown',
+                    buttons: [btn]
+                })
+            }
+        }
+    })
+} else {
+    buttons.value = buttonsFilter
+}
+const handlerCommand = (item: OptButton) => {
+    switch (item.render) {
+        case 'basicButton':
+            onButtonClick(item)
+            break
+        case 'confirmButton':
+            ElMessageBox.confirm(item.popconfirm?.title || '提示', {
+                confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
+                cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
+                type: 'warning'
+            }).then(() => {
+                onButtonClick(item)
+            })
+        default:
+            break
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.m-10 {
+    margin: 4px;
+}
+
+.ba-render-image {
+    text-align: center;
+}
+
+.images-item {
+    width: 50px;
+    margin: 0 5px;
+}
+
+.el-image {
+    height: 36px;
+    // width: 36px;
+}
+
+.table-operate-text {
+    padding-left: 5px;
+    font-size: 12px;
+}
+
+.table-operate {
+    padding: 4px 5px;
+    height: auto;
+}
+
+.cn-render-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+        font-size: 12px !important;
+        // color: var(--ba-bg-color-overlay) !important;
+    }
+}
+
+.move-button {
+    cursor: move;
+}
+
+.ml-6 {
+    display: inline-flex;
+    vertical-align: middle;
+    margin-left: 6px;
+}
+
+.ml-6+.el-button {
+    margin-left: 6px;
+}
+
+.ba-render-color {
+    height: 25px;
+    width: 100%;
+}
+
+.cn-render-buttons {
+    :deep(.el-button) {
+        margin-left: 0;
+    }
+}
+</style>

src/components/table/indexClick.vue

@@ -0,0 +1,234 @@
+<template>
+    <div :style="{ height: typeof props.height === 'string' ? props.height : tableStore.table.height }">
+        <vxe-table
+            ref="tableRef"
+            height="auto"
+            :key="key"
+            :data="tableStore.table.data"
+            v-loading="tableStore.table.loading"
+            v-bind="Object.assign({}, defaultAttribute, $attrs)"
+            @checkbox-all="selectChangeEvent"
+            @checkbox-change="selectChangeEvent"
+            :showOverflow="showOverflow"
+            @sort-change="handleSortChange"
+        >
+            <!-- Column 组件内部是 el-table-column -->
+            <template v-if="isGroup">
+                <GroupColumn :column="tableStore.table.column" />
+            </template>
+            <template v-else>
+                <Column
+                    :attr="item"
+                    :key="key + '-column'"
+                    v-for="(item, key) in tableStore.table.column"
+                    :tree-node="item.treeNode"
+                >
+                    <!-- tableStore 预设的列 render 方案 -->
+                    <template v-if="item.render" #default="scope">
+                        <FieldRender
+                            :field="item"
+                            :row="scope.row"
+                            :column="scope.column"
+                            :index="scope.rowIndex"
+                            :key="
+                                key +
+                                '-' +
+                                item.render +
+                                '-' +
+                                (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
+                            "
+                        />
+                    </template>
+
+                    <!-- 支持可点击和下划线的列 -->
+                    <template v-else-if="item.clickable" #default="scope">
+                        <span
+                            :class="{ 'clickable-underline':item.clickable }"
+                            @click="item.clickable ? handleCellClick(scope.row, scope.column) : undefined"
+                        >
+                            {{ item.field ? scope.row[item.field] : '' }}
+                        </span>
+                    </template>
+                </Column>
+            </template>
+            <slot name="columns"></slot>
+        </vxe-table>
+    </div>
+
+    <div v-if="tableStore.showPage" class="table-pagination">
+        <el-pagination
+            :currentPage="tableStore.table.params!.pageNum"
+            :page-size="tableStore.table.params!.pageSize"
+            :page-sizes="pageSizes"
+            background
+            :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
+            :total="tableStore.table.total"
+            @size-change="onTableSizeChange"
+            @current-change="onTableCurrentChange"
+        ></el-pagination>
+    </div>
+    <slot name="footer"></slot>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, inject, computed, onMounted, watch } from 'vue'
+import type { ElTable } from 'element-plus'
+import { VxeTableEvents, VxeTableInstance } from 'vxe-table'
+import FieldRender from '@/components/table/fieldRender/index.vue'
+import Column from '@/components/table/column/index.vue'
+import GroupColumn from '@/components/table/column/groupColumn.vue'
+import { useConfig } from '@/stores/config'
+import type TableStoreClass from '@/utils/tableStore'
+import { useRouter } from 'vue-router'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+
+const config = useConfig()
+const tableRef = ref<VxeTableInstance>()
+const tableStore = inject('tableStore') as TableStoreClass
+const router = useRouter()
+const key = ref(0)
+
+const clickedRow = ref<any>(null)
+const clickedColumn = ref<any>(null)
+
+const emit = defineEmits(['cell-click'])
+interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
+    isGroup?: boolean
+    showOverflow?: boolean
+    height?: string | boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    isGroup: false,
+    showOverflow: true,
+    height: false
+})
+onMounted(() => {
+    tableStore.table.ref = tableRef.value as VxeTableInstance
+})
+// console.log(props)
+const onTableSizeChange = (val: number) => {
+    tableStore.onTableAction('page-size-change', { size: val })
+}
+
+const onTableCurrentChange = (val: number) => {
+    tableStore.onTableAction('current-page-change', { page: val })
+}
+
+const pageSizes = computed(() => {
+    let defaultSizes = [10, 20, 50, 100, 200]
+    if (tableStore.table.params!.pageSize) {
+        if (!defaultSizes.includes(tableStore.table.params!.pageSize)) {
+            defaultSizes.push(tableStore.table.params!.pageSize)
+        }
+    }
+    return defaultSizes
+})
+
+/*
+ * 记录选择的项
+ */
+const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
+    const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
+    tableStore.onTableAction('selection-change', records)
+}
+
+const getRef = () => {
+    return tableRef.value
+}
+// 排序
+const handleSortChange = ({ column, order }: { column: TableColumn; order: 'asc' | 'desc' | null }) => {
+    // console.log('排序列:', column?.property);
+    // console.log('排序顺序:', order);
+    // tableStore.onTableAction('sortable', { column, order })
+    tableStore.table.params.sortBy = column?.property
+    tableStore.table.params.orderBy = order
+    tableStore.table.params.pageNum = 1
+
+    tableStore.index()
+    key.value += 1
+    // // 在这里可以根据 column 和 order 进行相应的数据排序操作
+    // if (order === 'asc') {
+    // } else if (order === 'desc') {
+    // }
+}
+
+// 单元格点击事件处理函数
+const handleCellClick = (row: any, column: any) => {
+    clickedRow.value = row
+    clickedColumn.value = column
+    // 触发自定义事件，通知父组件显示 dialog
+    emit('cell-click', row, column)
+    // 你也可以在这里触发一个自定义事件或调用 tableStore 的方法
+    // tableStore.onTableAction('cell-click', { row, column })
+}
+
+watch(
+    () => tableStore.table.allFlag,
+    newVal => {
+        if (tableStore.table.allFlag) {
+            tableRef.value?.exportData({
+                filename:
+                    tableStore.table.filename || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
+                sheetName: 'Sheet1',
+                type: 'xlsx', //导出文件类型 xlsx 和 csv
+                useStyle: true,
+                data: tableStore.table.allData, // 数据源 // 过滤那个字段导出
+                columnFilterMethod: function (column: any) {
+                    return !(
+                        column.column.title === undefined ||
+                        column.column.title === '序号' ||
+                        column.column.title === '操作'
+                    )
+                }
+            })
+            tableStore.table.allFlag = false
+        }
+    }
+)
+watch(
+    () => tableStore.table.data,
+    newVal => {
+        tableStore.onTableAction('selection-change', [])
+    }
+)
+
+defineExpose({
+    getRef
+})
+</script>
+
+<style scoped lang="scss">
+.ba-data-table :deep(.el-button + .el-button) {
+    margin-left: 6px;
+}
+
+.ba-data-table :deep(.table-header-cell) .cell {
+    color: var(--el-text-color-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.table-pagination {
+    height: 58px;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    padding: 13px 15px;
+    border-left: 1px solid #e4e7e9;
+    border-right: 1px solid #e4e7e9;
+    border-bottom: 1px solid #e4e7e9;
+}
+
+/* 添加可点击和下划线单元格样式 */
+.clickable-underline {
+  text-decoration: underline; /* 下划线 */
+  cursor: pointer; /* 鼠标指针 */
+}
+
+.clickable-underline:hover {
+  color: #66b1ff; /* 悬停时的颜色 */
+}
+</style>

src/components/tree/pqs/deviceTree.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="point-tree">
+        <div style="flex: 1; overflow: hidden">
+            <Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, ref, useAttrs } from 'vue'
+import Tree from '../index.vue'
+import { getTransformerTree } from '@/api/device-boot/transformerStrategy'
+
+defineOptions({
+    name: 'pms/deviceTree'
+})
+const emit = defineEmits(['init'])
+const attrs = useAttrs()
+
+const tree = ref()
+const treeRef = ref()
+
+const loadData = () => {
+    getTransformerTree().then(res => {
+        tree.value = res.data
+    })
+}
+loadData()
+
+defineExpose({
+    loadData
+})
+</script>
+<style lang="scss">
+.point-tree {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border: 1px solid var(--el-border-color);
+}
+</style>

src/layouts/admin/components/navMenus.vue

@@ -83,7 +83,6 @@ import { useAdminInfo } from '@/stores/adminInfo'
 import router from '@/router'
 import globalPopUp from './globalPopUp.vue'
 import { routePush } from '@/utils/router'
-import { fullUrl } from '@/utils/common'
 import html2canvas from 'html2canvas'
 import PopupPwd from './popup/password.vue'
 import AdminInfo from './popup/adminInfo.vue'

src/main.ts

@@ -1,79 +1,79 @@
-import { createApp, reactive } from 'vue'
-import App from './App.vue'
-import router from './router'
-import pinia from '@/stores/index'
-import { registerIcons } from '@/utils/common'
-import mitt from 'mitt'
-import VXETable from 'vxe-table'
-import XEUtils from 'xe-utils'
-import 'vxe-table/lib/style.css'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/display.css'
-import '@fortawesome/fontawesome-free/css/all.css'
-import '@/styles/index.scss'
-import '@/assets/font/iconfont.css'
-import { ElDialog } from 'element-plus'
-import BaiduMap from 'vue-baidu-map-3x'
-import BaiduMapOffline from 'vue-baidu-map-offline'
-import ExcelJS from 'exceljs'
-import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
-// 方式1：NPM 安装，注入 ExcelJS 对象
-VXETable.use(VXETablePluginExportXLSX, {
-    ExcelJS
-})
-window.XEUtils = XEUtils
-
-// 初始化多语言
-import { setupI18n } from '@/plugins/vueI18n'
-
-// 引入 form-create
-import { setupFormCreate } from '@/plugins/formCreate'
-
-// 创建实例
-const setupAll = async () => {
-    const app = createApp(App)
-
-    //开启离线地图
-    // app.use(BaiduMapOffline, {
-    //     offline: true,
-    //     offlineConfig: {
-    //         imgext: '.png',
-    //         customstyle: '',
-    //         tiles_dir: '',
-    //         tiles_hybrid: '',
-    //         tiles_self: '',
-    //         tiles_v_dir: '',
-    //         tiles_satellite_dir: '',
-    //         tiles_road_dir: '',
-    //         tiles_v_road_dir: '',
-    //         home: './plugin/offline/'
-    //     }
-    // })
-    app.use(BaiduMap, {
-        // ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
-        ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
-        v: '3.0'
-    })
-
-    await setupI18n(app)
-    app.use(router)
-    app.use(pinia)
-    app.use(ElementPlus)
-    app.use(VXETable)
-    ;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
-    registerIcons(app) // icons
-
-    app.config.globalProperties.eventBus = mitt()
-    // 配置全局变量
-    app.config.globalProperties.$allVariables = reactive({
-        butLoading: false
-    })
-    setupFormCreate(app)
-
-    await router.isReady()
-
-    app.mount('#app')
-}
-
-setupAll()
+import { createApp, reactive } from 'vue'
+import App from './App.vue'
+import router from './router'
+import pinia from '@/stores/index'
+import { registerIcons } from '@/utils/common'
+import mitt from 'mitt'
+import VXETable from 'vxe-table'
+import XEUtils from 'xe-utils'
+import 'vxe-table/lib/style.css'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/display.css'
+import '@fortawesome/fontawesome-free/css/all.css'
+import '@/styles/index.scss'
+import '@/assets/font/iconfont.css'
+import { ElDialog } from 'element-plus'
+import BaiduMap from 'vue-baidu-map-3x'
+import BaiduMapOffline from 'vue-baidu-map-offline'
+import ExcelJS from 'exceljs'
+import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
+// 方式1：NPM 安装，注入 ExcelJS 对象
+VXETable.use(VXETablePluginExportXLSX, {
+    ExcelJS
+})
+window.XEUtils = XEUtils
+
+// 初始化多语言
+import { setupI18n } from '@/plugins/vueI18n'
+
+// 引入 form-create
+import { setupFormCreate } from '@/plugins/formCreate'
+
+// 创建实例
+const setupAll = async () => {
+    const app = createApp(App)
+
+    //开启离线地图
+    app.use(BaiduMapOffline, {
+        offline: true,
+        offlineConfig: {
+            imgext: '.png',
+            customstyle: '',
+            tiles_dir: '',
+            tiles_hybrid: '',
+            tiles_self: '',
+            tiles_v_dir: '',
+            tiles_satellite_dir: '',
+            tiles_road_dir: '',
+            tiles_v_road_dir: '',
+            home: './plugin/offline/'
+        }
+    })
+    app.use(BaiduMap, {
+        // ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
+        ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
+        v: '3.0'
+    })
+
+    await setupI18n(app)
+    app.use(router)
+    app.use(pinia)
+    app.use(ElementPlus)
+    app.use(VXETable)
+    ;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
+    registerIcons(app) // icons
+
+    app.config.globalProperties.eventBus = mitt()
+    // 配置全局变量
+    app.config.globalProperties.$allVariables = reactive({
+        butLoading: false
+    })
+    setupFormCreate(app)
+
+    await router.isReady()
+
+    app.mount('#app')
+}
+
+setupAll()

src/router/static.ts

@@ -243,6 +243,26 @@ export const adminBaseRoute = {
                 }
             ]
         },
+        {
+            path: 'BusinessAdministrator/TerminalManagement',
+            name: '变压器策略',
+            meta: {
+                title: pageTitle('runManage'),
+                icon: 'ep:management',
+                alwaysShow: true
+            },
+            children: [
+                {
+                    path: 'addLedger',
+                    component: () =>
+                        import('@/views/pqs/business/terminal/transformerStrategy/components/addLedger.vue'),
+                    name: '变压器台账配置',
+                    meta: {
+                        title: pageTitle('router.addLedger')
+                    }
+                }
+            ]
+        },
         {
             path: '/boX',
             name: 'boX',
@@ -337,6 +357,7 @@ const staticRoutes: Array<RouteRecordRaw> = [
                     })
                 }
             }
+            
         }
     }
 ]

src/views/cockpit/teadyStatePowerQuality/limitViolationStatistics.vue

@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <my-echart class="tall" :options="echartList_1" :style="{ width: prop.width, height: halfHeight }" />
+        <vxe-table ref="tableRef" :data="tableData" height="auto" :style="{ width: prop.width, height: halfHeight }">
+            <vxe-column type="seq" title="序号"></vxe-column>
+            <vxe-column field="srbName" align="center" title="部门"></vxe-column>
+            <!-- <vxe-column width="200" title="操作">
+            <template #default="{ row }">
+                <el-button type="primary" size="small" link @click="tactics(row.id, 0)">自动</el-button>
+                <el-button type="primary" size="small" link @click="tactics(row.id, 1)">手动</el-button>
+                <el-button type="primary" size="small" link @click="tactics(row.id, 2)">排除</el-button>
+            </template>
+        </vxe-column> -->
+        </vxe-table>
+        <!-- <Table ref="tableRef" :style="{ width: prop.width, height: halfHeight }"></Table> -->
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, provide } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableStore from '@/utils/tableStore'
+const echartList_1 = ref({})
+import { useDictData } from '@/stores/dictData'
+const prop = defineProps({
+    width: { type: String },
+    height: { type: String },
+    timeKey: { type: String }
+})
+
+const halfHeight = computed(() => {
+    const h = parseFloat(prop.height || '400')
+    return `${h / 2}px`
+})
+
+const tableData = ref([])
+
+const dictData = useDictData()
+const distributionData: any = ref([])
+const tableStore: any = new TableStore({
+    url: '/event-boot/area/getAreaLineDetail',
+    method: 'POST',
+    column: [],
+    loadCallback: () => {
+        tabulation(tableStore.table.data)
+        histogram(tableStore.table.data)
+    }
+})
+provide('tableStore', tableStore)
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'event-boot'
+// 表格数据处理
+const tabulation = (res: any) => {
+    tableData.value = res.substationDetailVOList
+    distributionData.value = []
+    for (var i = 0; i < res.areaValue.length; i++) {
+        distributionData.value.push({
+            qy: res.areaValue[i][0],
+            jcd: res.areaValue[i][1],
+            zc: res.areaValue[i][2],
+            zd: res.areaValue[i][3]
+        })
+    }
+}
+// 柱状图数据处理
+const histogram = (res: any) => {
+    echartList_1.value = {
+        title: {
+            text: '区域'
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                // console.log(params);
+                var tips = ''
+                for (var i = 0; i < params.length; i++) {
+                    tips += params[i].name + '</br/>'
+                    tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
+                }
+                return tips
+            }
+        },
+
+        xAxis: {
+            name: '(区域)',
+            data: distributionData.value.map((item: any) => item.qy)
+        },
+        yAxis: {
+            name: '监测点数（个）' // 给X轴加单位
+        },
+        options: {
+            series: [
+                {
+                    //   name: '暂降次数',
+                    type: 'bar',
+                    data: distributionData.value.map((item: any) => item.jcd),
+                    barMaxWidth: 30,
+                    itemStyle: {
+                        normal: {
+                            color: '#07CCCA'
+                        }
+                    },
+                    label: {
+                        show: true,
+                        position: 'top',
+                        textStyle: {
+                            //数值样式
+                            color: '#000'
+                        },
+                        fontSize: 12
+                    }
+                }
+            ]
+        }
+    }
+}
+onMounted(() => {
+    tableStore.index()
+})
+
+// watch(
+//     () => prop.timeKey,
+//     val => {
+//         tableStore.index()
+//     }
+// )
+</script>
+<style lang="scss" scoped></style>

src/views/cockpit/teadyStatePowerQuality/pointList.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <!--主要监测点列表 -->
+        <TableHeader :showReset="false" ref="TableHeaderRef">
+            <template v-slot:select>
+                <el-form-item>
+                    <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入"></el-input>
+                </el-form-item>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" @cell-click="handleCellClick"></Table>
+        <!-- 弹框组件 -->
+        <el-dialog v-model="dialogVisible" title="详情信息" width="800px" append-to-body destroy-on-close>
+            <p>行数据: {{ selectedRow }}</p>
+            <p>列数据: {{ selectedColumn }}</p>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, watch } from 'vue'
+
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/indexClick.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+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 dialogVisible = ref(false)
+const selectedRow = ref(null)
+const selectedColumn = ref(null)
+
+const tableStore: any = 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: 'createBy', width: '200', clickable: true },
+        {
+            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: () => {
+        const timeKey = prop.timeKey ?? ''
+        tableStore.table.params.searchBeginTime = getTimeOfTheMonth(timeKey)[0]
+        tableStore.table.params.searchEndTime = getTimeOfTheMonth(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()
+})
+
+const handleCellClick = (row: any, column: any) => {
+    selectedRow.value = row
+    selectedColumn.value = column
+    dialogVisible.value = true
+}
+
+watch(
+    () => prop.timeKey,
+    val => {
+        tableStore.index()
+    }
+)
+</script>
+<style lang="scss" scoped></style>

src/views/pqs/auditManage/auditList/index.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="default-main">
+        <div v-show="flg">
+            <TableHeader datePicker showExport ref="TableHeaderRef">
+                <template v-slot:select>
+                    <el-form :inline="true" label-width="90px" class="">
+                        <el-form-item label="用户名:">
+                            <el-select
+                                v-model="tableStore.table.params.loginName"
+                                placeholder="用户名"
+                                clearable
+                                filterable
+                            >
+                                <el-option
+                                    v-for="item in userName"
+                                    :key="item.id"
+                                    :label="item.loginName"
+                                    :value="item.loginName"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="事件类型:">
+                            <el-select v-model="tableStore.table.params.type" placeholder="事件类型" clearable>
+                                <el-option
+                                    v-for="item in eventType"
+                                    :key="item.id"
+                                    :label="item.label"
+                                    :value="item.id"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="操作类型:">
+                            <el-select v-model="tableStore.table.params.operateType" placeholder="操作类型" clearable>
+                                <el-option
+                                    v-for="item in operationType"
+                                    :key="item.value"
+                                    :label="item.value"
+                                    :value="item.value"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="操作结果:">
+                            <el-select v-model="tableStore.table.params.result" placeholder="操作结果" clearable>
+                                <el-option
+                                    v-for="item in resultList"
+                                    :key="item.id"
+                                    :label="item.label"
+                                    :value="item.id"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                </template>
+                <template #operation>
+                    <el-button type="primary" @click="backups" :icon="DocumentCopy">文件备份</el-button>
+                    <el-button type="primary" @click="details" :icon="Tickets">统计</el-button>
+                </template>
+            </TableHeader>
+            <Table ref="tableRef" />
+        </div>
+        <div v-if="!flg">
+            <Statistics @back="onSubmit" ref="statistics" />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { getAllUserList, logFileWriter, recoverLogFile, getMemoInfo, getSysConfig } from '@/api/auditManage/auditList'
+import { ElMessage } from 'element-plus'
+import Statistics from './statistics.vue'
+import { DocumentCopy, Tickets } from '@element-plus/icons-vue'
+
+defineOptions({
+    name: 'BusinessAdministrator/Audit/Operations/Management'
+})
+
+interface UserInfo {
+    id: number | string
+    loginName: string
+}
+
+const userName = ref<UserInfo[]>([])
+const TableHeaderRef = ref()
+
+// 其他响应式数据
+const loading = ref(false)
+const statistics = ref()
+
+const flg = ref(true)
+const showMqtt = ref(false)
+const zoom = ref('') //图表焦点校验
+
+const resultList = ref([
+    { id: 1, label: '成功' },
+    { id: 0, label: '失败' }
+])
+
+const eventType = ref([
+    {
+        id: 0,
+        label: '业务事件类型'
+    },
+    {
+        id: 1,
+        label: '系统事件类型'
+    }
+]) //事件类型
+const operationType = ref([
+    { id: 1, value: '查询' },
+    { id: 2, value: '新增' },
+    { id: 3, value: '更新' },
+    { id: 4, value: '删除' },
+    { id: 5, value: '认证' },
+    { id: 6, value: '注销' },
+    { id: 7, value: '上传' },
+    { id: 8, value: '下载' },
+    { id: 9, value: '越权访问' }
+]) //操作类型
+
+const statisticsTotal = ref(undefined)
+
+const tableStore: any = new TableStore({
+    url: '/system-boot/audit/getAuditLog',
+    method: 'POST',
+    column: [
+        {
+            field: 'create_time',
+            title: '操作时间',
+            sortable: true,
+            formatter: (row: any) => {
+                return row.row.time
+            }
+        },
+        { field: 'userName', title: '操作人员' },
+        {
+            field: 'operate_type',
+            title: '操作类型',
+            sortable: true,
+            formatter: (row: any) => {
+                return row.row.operate
+            }
+        },
+        { field: 'describe', title: '事件描述' },
+        { field: 'type', title: '事件类型', sortable: true },
+        { field: 'result', title: '操作结果', sortable: true },
+        { field: 'ip', title: '操作IP' },
+        { field: 'level', title: '事件等级', sortable: true }
+    ],
+    loadCallback: () => {
+        getLogSize()
+    }
+})
+
+tableStore.table.params.loginName = ''
+tableStore.table.params.type = ''
+tableStore.table.params.operateType = ''
+tableStore.table.params.result = null
+tableStore.table.params.sortBy = ''
+tableStore.table.params.orderBy = ''
+tableStore.table.params.pageSize = 100
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    search()
+    onSubmit()
+})
+
+//下拉框查询
+const search = () => {
+    getAllUserList().then(res => {
+        userName.value = res.data
+    })
+}
+// 统计
+const details = () => {
+    flg.value = false
+    nextTick(() => {
+        statistics.value.tableStore.index()
+    })
+}
+
+// 查询
+const onSubmit = async () => {
+    flg.value = true
+    await tableStore.index()
+}
+
+// 查询日志大小
+const getLogSize = () => {
+    getMemoInfo().then(res => {
+        getSysConfig().then(re => {
+            if (res.data > re.data.logSize) {
+                ElMessage({
+                    showClose: true,
+                    duration: 0,
+                    message: '日志表存储空间已超过' + re.data.logSize + '(M)请及时备份清理!',
+                    type: 'warning'
+                })
+            }
+        })
+    })
+}
+
+// 备份
+const backups = async () => {
+    loading.value = true
+    await logFileWriter({}).then(res => {})
+    setTimeout(() => {
+        ElMessage({
+            type: 'success',
+            message: '文件备份成功'
+        })
+        loading.value = false
+    }, 0)
+}
+
+// 恢复
+const restore = () => {
+    loading.value = true
+    recoverLogFile({}).then(res => {})
+    setTimeout(() => {
+        ElMessage({
+            type: 'success',
+            message: '文件恢复成功'
+        })
+        loading.value = false
+    }, 50000)
+}
+</script>

src/views/pqs/auditManage/auditList/statistics.vue

@@ -0,0 +1,127 @@
+<template>
+    <TableHeader datePicker showExport :showReset="false" ref="TableHeaderRef">
+        <template v-slot:select>
+            <el-form :inline="true" label-width="90px" class="">
+                <el-form-item label="用户名:">
+                    <el-select v-model="tableStore.table.params.loginName" placeholder="用户名" clearable filterable>
+                        <el-option
+                            v-for="item in userName"
+                            :key="item.id"
+                            :label="item.loginName"
+                            :value="item.loginName"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="事件类型:">
+                    <el-select v-model="tableStore.table.params.type" placeholder="事件类型" clearable>
+                        <el-option
+                            v-for="item in eventType"
+                            :key="item.id"
+                            :label="item.label"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="操作类型:">
+                    <el-select v-model="tableStore.table.params.operateType" placeholder="操作类型" clearable>
+                        <el-option
+                            v-for="item in operationType"
+                            :key="item.value"
+                            :label="item.value"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </template>
+        <template #operation>
+            <el-button @click="back" :icon="Back">返回</el-button>
+        </template>
+    </TableHeader>
+    <Table ref="tableRef_1" />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { getAllUserList } from '@/api/auditManage/auditList'
+import { Back } from '@element-plus/icons-vue'
+
+// defineOptions({
+//     name: 'admin/BusinessAdministrator/Audit/Operations/Management'
+// })
+
+interface UserInfo {
+    id: number | string
+    loginName: string
+}
+
+const emit = defineEmits(['back'])
+
+const userName = ref<UserInfo[]>([])
+const TableHeaderRef = ref()
+
+const flg = ref(true)
+
+const eventType = ref([
+    {
+        id: 0,
+        label: '业务事件类型'
+    },
+    {
+        id: 1,
+        label: '系统事件类型'
+    }
+]) //事件类型
+const operationType = ref([
+    { id: 1, value: '查询' },
+    { id: 2, value: '新增' },
+    { id: 3, value: '更新' },
+    { id: 4, value: '删除' },
+    { id: 5, value: '认证' },
+    { id: 6, value: '注销' },
+    { id: 7, value: '上传' },
+    { id: 8, value: '下载' },
+    { id: 9, value: '越权访问' }
+]) //操作类型
+
+const tableStore: any = new TableStore({
+    url: '/system-boot/audit/censusAuditLog',
+    method: 'POST',
+    column: [
+        // 根据实际统计表格的列来定义
+        { field: 'loginName', title: '操作人员' },
+        { field: 'operateType', title: '事件类型' },
+        { field: 'count', title: '事件总数' }
+    ]
+})
+
+tableStore.table.params.loginName = ''
+tableStore.table.params.type = ''
+tableStore.table.params.operateType = ''
+tableStore.table.params.result = null
+tableStore.table.params.sortBy = ''
+tableStore.table.params.orderBy = ''
+tableStore.table.params.pageSize = 100
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    search()
+    tableStore.index()
+})
+
+//下拉框查询
+const search = () => {
+    getAllUserList().then(res => {
+        userName.value = res.data
+    })
+}
+//返回
+const back = () => {
+    flg.value = true
+    // 触发父组件的 onSubmit 方法
+    emit('back')
+}
+</script>

src/views/pqs/auditManage/onlineUsers/index.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="default-main">
+        <TableHeader select :showReset="false"  showExport ref="TableHeaderRef"></TableHeader>
+        <Table ref="tableRef" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+defineOptions({
+    name: 'BusinessAdministrator/Audit/Operations/onlineUsers'
+})
+
+const formTabRef = ref()
+const TableHeaderRef = ref()
+const show = ref(false)
+const tableStore: any = new TableStore({
+    url: '/system-boot/audit/getOnlineUsers',
+    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: 'name', title: '昵称' },
+        { field: 'loginName', title: '登录名' },
+        {
+            field: 'phone',
+            title: '手机号',
+            formatter(row: any) {
+                return row.phone ? row.phone : '/'
+            }
+        },
+        { field: 'time', title: '登录过期时间' },
+        {
+            field: 'status',
+            title: '状态',
+            formatter(row: any) {
+                return row.status ? row.status : '在线'
+            }
+        }
+    ]
+})
+
+provide('tableStore', tableStore)
+onMounted(() => {
+    tableStore.index()
+})
+</script>

src/views/pqs/auditManage/userInfo/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="default-main">
+        <TableHeader datePicker :showReset="false" showExport ref="TableHeaderRef">
+            <template v-slot:select>
+                <el-form-item label="筛选数据">
+                    <el-input v-model="tableStore.table.params.loginName" placeholder="请输入"></el-input>
+                </el-form-item>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+defineOptions({
+    name: 'BusinessAdministrator/Audit/Operations/userLoginInformation'
+})
+
+const formTabRef = ref()
+const TableHeaderRef = ref()
+const tableStore: any = new TableStore({
+    url: '/system-boot/audit/getAuditLog',
+    method: 'POST',
+    column: [
+        { field: 'userName', title: '登录用户' },
+        { field: 'ip', title: '登录ip' },
+        { field: 'time', title: '登录时间' }
+    ]
+})
+
+tableStore.table.params.loginName = ''
+tableStore.table.params.operateType = '认证'
+tableStore.table.params.searchBeginTime = ''
+tableStore.table.params.searchEndTime = ''
+
+provide('tableStore', tableStore)
+onMounted(() => {
+    tableStore.index()
+})
+</script>

src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue

@@ -347,12 +347,12 @@ const onSubmit = async () => {
         }))
 
         // 设置有功功率图表
-        setEChart(1, res1.data.data, '有功功率', 'kW')
+        setEChart(1, res1.data.data, '有功功率', 'W')
 
         // 获取无功功率数据并设置图表
         const res2 = await queryCarryCapacityQData(form)
         q_βminMap.value = res2.data.q_βminMap
-        setEChart(2, res2.data.data, '无功功率', 'kVar')
+        setEChart(2, res2.data.data, '无功功率', 'Var')
 
         // 获取谐波电流数据并设置图表
         const res3 = await queryCarryCapacityIData(form)

src/views/pqs/business/log/frontLog/index.vue

@@ -69,7 +69,7 @@ const tableStore = new TableStore({
         },
 
         {
-            title: '日志错误码',
+            title: '日志类型',
             field: 'codeName',
             minWidth: '180',
             formatter: (row: any) => {

src/views/pqs/business/terminal/transformerStrategy/components/addLedger.vue

@@ -0,0 +1,691 @@
+<template>
+    <div class="default-main">
+        <div class="title">
+            变压器台账配置
+            <back-component />
+        </div>
+        <!-- 主要内容 -->
+        <div>
+            <el-row>
+                <el-col :span="5">
+                    <div style="margin: 10px; border-right: 1px solid">
+                        <div style="overflow-y: auto" class="xiaoshou" :style="height1">
+                            <!-- <el-tree
+                                class="filter-tree xiaoshou"
+                                v-loading="loading"
+                                element-loading-text="数据加载中"
+                                :style="'height:' + vh2 + 'px'"
+                                :data="treeMenuData"
+                                :props="{ children: 'children', label: 'name' }"
+                                :expand-on-click-node="false"
+                                :highlight-current="true"
+                                default-expand-all
+                                :filter-node-method="filterNode"
+                                @node-click="handleNodeClick1"
+                                ref="menuTree"
+                                node-key="id"
+                            >
+                                <span class="span-ellipsis" slot-scope="{ node, data }">
+                                    <i :class="data.icon"></i>
+                                    <span class="title" :title="node.label">{{ node.label }}</span>
+                                </span>
+                            </el-tree> -->
+                            <DeviceTree
+                                :default-expand-all="true"
+                                @node-click="handleNodeClick"
+                                @init="handleNodeClick"
+                                ref="menuTree"
+                            ></DeviceTree>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :span="19">
+                    <div class="mt10">
+                        <TableHeader showExport :showSearch="false" ref="TableHeaderRef">
+                            <template v-slot:select>
+                                <span style="font-size: 14px; line-height: 40px; color: red;">
+                                    所选变电站:
+                                    <span style="color: black">{{ subName }}</span>
+                                </span>
+                            </template>
+                            <template #operation>
+                                <el-button type="primary" class="ml10" @click="transformerAdd" :icon="Plus">
+                                    新增变压器信息
+                                </el-button>
+                            </template>
+                        </TableHeader>
+                        <div>
+                            <!-- 为分页留出空间 -->
+                            <Table ref="tableRef" height="calc(100vh - 308px)" :row-config="{ isCurrent: true, isHover: true }"></Table>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- 变压器信息新增/修改 -->
+        <el-dialog
+            draggable
+            :title="transformerTitle"
+            v-model="transformerInformation"
+            :close-on-click-modal="false"
+            width="700px"
+            v-if="transformerInformation"
+            :before-close="resetForm"
+        >
+            <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px">
+                <el-form-item label="变压器名:" prop="tfName">
+                    <el-input v-model="ruleForm.tfName" placeholder="请输入" clearable></el-input>
+                </el-form-item>
+                <el-form-item label="接线方式:" prop="wiring" class="top">
+                    <el-select style="width: 100%" v-model="ruleForm.wiring" clearable placeholder="请选择接线方式">
+                        <el-option
+                            v-for="item in connectionType"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="描述:" class="top">
+                    <el-input
+                        v-model="ruleForm.tfDescribe"
+                        placeholder="请输入"
+                        clearable
+                        type="textarea"
+                        :rows="2"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item class="mt20 ml20">
+                    <el-button @click="transformerInformation = false">取消</el-button>
+                    <el-button type="primary" @click="onSubmit">确 定</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+        <!-- 节点维护 -->
+        <el-dialog
+            :close-on-click-modal="false"
+            :title="maintenanceTitle"
+            v-model="nodemaintenanceInformation"
+            width="65%"
+            v-if="nodemaintenanceInformation"
+        >
+            <el-row :gutter="20" v-loading="isLoading3" element-loading-text="数据加载中">
+                <el-col :span="8">
+                    <div style="border-right: 1px solid; height: 100%" class="xiaoshou">
+                        <div style="overflow-y: auto; height: 100%; overflow-x: auto;max-height: 350px;" class="tree mr10 xiaoshou">
+                            <el-input placeholder="输入关键字检索" v-model="filterText1" clearable></el-input>
+                            <el-tree
+                                style="cursor: pointer;display: inline-block;"
+                                :data="treeMenuLeftData"
+                                v-loading="loading"
+                                element-loading-text="数据加载中"
+                                show-checkbox
+                                node-key="id"
+                                ref="menuTreeLeft"
+                                highlight-current
+                                :check-strictly="true"
+                                :expand-on-click-node="true"
+                                default-expand-all
+                                :filter-node-method="filterNode"
+                                :props="{ children: 'children', label: 'name' }"
+                                @check="checkLeft"
+                                @node-click="handleNodeClick"
+                            >
+                                <template #default="{ node, data }">
+                                    <span class="span-ellipsis">
+                                        <i :class="data.icon"></i>
+                                        <span class="title_1" :title="node.label">{{ node.label }}</span>
+                                    </span>
+                                </template>
+                            </el-tree>
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :span="8">
+                    <el-form :model="messageInfo" label-width="90px">
+                        <el-form-item label="变压器名称:">
+                            <el-input disabled v-model="messageInfo.tfName" placeholder="变压器名称"></el-input>
+                        </el-form-item>
+                        <el-form-item label="变电站:" class="top">
+                            <el-input disabled v-model="messageInfo.subIndexName" placeholder="变电站"></el-input>
+                        </el-form-item>
+                        <el-form-item label="接线方式:" class="top">
+                            <el-input disabled v-model="messageInfo.wiring" placeholder="接线方式"></el-input>
+                        </el-form-item>
+                        <el-form-item label="更新人:" class="top">
+                            <el-input disabled v-model="messageInfo.updateBy" placeholder="更新人"></el-input>
+                        </el-form-item>
+                        <el-form-item label="更新时间:" class="top">
+                            <el-input disabled v-model="messageInfo.updateTime" placeholder="更新时间"></el-input>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+                <el-col :span="8">
+                    <div style="border-left: 1px solid; height: 100%" class="xiaoshou">
+                        <div style="overflow-y: auto; height: 100%;overflow-x: auto;max-height: 350px;" class="ml10 tree xiaoshou">
+                            <el-input placeholder="输入关键字检索" v-model="filterText2" clearable></el-input>
+                            <el-tree
+                                style="cursor: pointer"
+                                :data="treeMenuRightData"
+                                v-loading="loading"
+                                element-loading-text="数据加载中"
+                                show-checkbox
+                                node-key="id"
+                                ref="menuTreeRight"
+                                :check-strictly="true"
+                                highlight-current
+                                :expand-on-click-node="true"
+                                default-expand-all
+                                :filter-node-method="filterNode"
+                                :props="{ children: 'children', label: 'name' }"
+                                @check="checkRight"
+                                @node-click="handleNodeClick"
+                            >
+                                <template #default="{ node, data }">
+                                    <span class="span-ellipsis">
+                                        <i :class="data.icon"></i>
+                                        <span class="title_1" :title="node.label">{{ node.label }}</span>
+                                    </span>
+                                </template>
+                            </el-tree>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+            <div style="border-top: #dddfe5 solid 1px; margin-top: 10px; margin-bottom: 5px"></div>
+            <span slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end">
+                <el-button @click="nodemaintenanceInformation = false">取 消</el-button>
+                <el-button type="primary" @click="maintenanceOnsubmit">提交</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import BackComponent from '@/components/icon/back/index.vue'
+import { mainHeight } from '@/utils/layout'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import DeviceTree from '@/components/tree/pqs/deviceTree.vue'
+import { Plus, Setting } from '@element-plus/icons-vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import {
+    insertTransformer,
+    updateTransformer,
+    delTransformer,
+    nodeMaintenance,
+    getGeneratrix
+} from '@/api/device-boot/transformerStrategy'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { calc } from '@/api/advance-boot/sgGroven/sgScheme'
+
+defineOptions({
+    name: 'BusinessAdministrator/TerminalManagement/addLedger'
+})
+
+const tableRef = ref()
+const dictData = useDictData()
+
+const connectionType = dictData.getBasicData('Dev_Connect')
+
+// 新增、修改
+const transformerTitle = ref('新增变压器信息')
+
+const transformerInformation = ref(false)
+
+const ruleFormRef = ref()
+
+const menuTree = ref()
+
+const ruleForm = reactive({
+    tfName: '',
+    wiring: '',
+    subIndex: '',
+    tfDescribe: ''
+})
+// 树选择
+const subName = ref('')
+
+const parentId = ref('')
+
+const rules = reactive({
+    tfName: [{ required: true, message: '请输入变压器名', trigger: 'blur' }],
+    wiring: [{ required: true, message: '请选择接线方式', trigger: 'change' }]
+})
+
+// 变压器节点维护
+interface TreeNode {
+    id: string
+    name: string
+    icon?: string
+    level?: number
+    disabled?: boolean
+    children?: TreeNode[]
+}
+const maintenanceTitle = ref('变压器节点维护')
+const nodemaintenanceInformation = ref(false)
+const loading = ref(false)
+const isLoading3 = ref(false)
+const filterText1 = ref('')
+const filterText2 = ref('')
+const menuTreeLeft = ref()
+const menuTreeRight = ref()
+const treeMenuLeftData = ref<TreeNode[]>([])
+const treeMenuRightData = ref<TreeNode[]>([])
+const messageInfo = reactive({
+    tfName: '',
+    subIndexName: '',
+    wiring: '',
+    updateBy: '',
+    updateTime: ''
+})
+const bind = ref<any[]>([])
+const bindLevel = ref<number>(0)
+
+const tableStore = new TableStore({
+    url: '/device-boot/pqsTransformer/transformerPage',
+    method: 'POST',
+    column: [
+        { title: '变压器名称', field: 'tfName' },
+        { title: '变电站', field: 'subIndexName' },
+        {
+            title: '接线方式',
+            field: 'wiring',
+            formatter: (row: any) => {
+                if (row.column.property == 'wiring') {
+                    let title = ''
+                    connectionType.forEach(item => {
+                        if (item.id == row.row.wiring) {
+                            title = item.name
+                        }
+                    })
+                    return title
+                } else {
+                    return row.row[row.column.property]
+                }
+            }
+        },
+        { title: '更新人', field: 'updateBy' },
+        { title: '更新时间', field: 'updateTime' },
+        // {
+        //     title: '等级',
+        //     field: 'nodeGrade',
+        //     render: 'tag',
+        //     custom: {
+        //         0: 'success',
+        //         1: 'warning',
+        //         2: 'info'
+        //     },
+        //     replaceValue: {
+        //         0: '极重要',
+        //         1: '普通',
+        //         2: '备用'
+        //     }
+        // },
+        {
+            title: '描述',
+            field: 'tfDescribe'
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'maintenance',
+                    title: '节点维护',
+                    type: 'primary',
+                    icon: 'el-icon-Share',
+                    render: 'basicButton',
+                    click: async row => {
+                        nodemaintenanceInformation.value = true
+                        maintenance(JSON.parse(JSON.stringify(row)))
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        transformerInformation.value = true
+                        transformerTitle.value = '修改变压器信息'
+                        Object.assign(ruleForm, JSON.parse(JSON.stringify(row)))
+                    }
+                },
+
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        delTransformer([row.tfIndex]).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    // beforeSearchFun: () => {
+    //     for (let key in tableStore.table.params) {
+    //         if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
+    //             delete tableStore.table.params[key]
+    //         }
+    //     }
+    // },
+    loadCallback: () => {}
+})
+
+tableStore.table.params.searchValue = ''
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 100)
+})
+
+const height = mainHeight(20)
+const height1 = mainHeight(85)
+const height2 = mainHeight(300)
+
+//变压器新增
+const transformerAdd = () => {
+    ruleForm.tfName = ''
+    ruleForm.wiring = ''
+    ruleForm.tfDescribe = ''
+    if (subName.value == '') {
+        ElMessage({
+            type: 'warning',
+            message: '请选择变电站'
+        })
+    } else {
+        transformerTitle.value = '新增变压器信息'
+        transformerInformation.value = true
+        nextTick(() => {
+            ruleFormRef.value.clearValidate()
+        })
+    }
+}
+
+// 树选择
+const handleNodeClick = (data: any, node: any) => {
+    if (node.level == 4) {
+        subName.value =
+            node.parent.parent.parent.data.name +
+            `>` +
+            node.parent.parent.data.name +
+            `>` +
+            node.parent.data.name +
+            `>` +
+            node.data.name
+        ruleForm.subIndex = node.data.id
+        tableStore.table.params.searchValue = node.data.id
+        parentId.value = node.data.id
+    } else if (node.level == 5) {
+        subName.value =
+            node.parent.parent.parent.parent.data.name +
+            `>` +
+            node.parent.parent.parent.data.name +
+            `>` +
+            node.parent.parent.data.name +
+            `>` +
+            node.parent.data.name
+        ruleForm.subIndex = node.parent.data.id
+        tableStore.table.params.searchValue = node.data.id
+        parentId.value = node.parent.data.id
+    } else {
+        tableStore.table.params.searchValue = ''
+    }
+    tableStore.index()
+}
+
+const resetForm = () => {
+    transformerInformation.value = false
+    Object.assign(ruleForm, {
+        tfName: '',
+        wiring: '',
+        subIndex: '',
+        tfDescribe: ''
+    })
+}
+// 确认
+const onSubmit = () => {
+    ruleFormRef.value.validate((valid: any) => {
+        if (valid) {
+            if (transformerTitle.value == '新增变压器信息') {
+                insertTransformer(ruleForm).then(res => {
+                    ElMessage.success('新增变压器信息成功')
+                    resetForm()
+                    menuTree.value.loadData()
+                    tableStore.onTableAction('search', {})
+                })
+            } else {
+                ElMessageBox.confirm('是否确认修改?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    updateTransformer(ruleForm).then(res => {
+                        ElMessage.success('修改成功')
+                        resetForm()
+                        menuTree.value.loadData()
+                        tableStore.onTableAction('search', {})
+                    })
+                })
+            }
+        }
+    })
+}
+
+// 变压器维护
+const maintenance = (val: any) => {
+    maintenanceTitle.value = '变压器节点维护'
+    maintenanceData.upNode = ''
+    maintenanceData.downNode = ''
+    maintenanceData.tfIndex = val.tfIndex
+    isLoading3.value = true
+    getGeneratrix({
+        id: val.tfIndex,
+        subId: val.subIndex
+    }).then(res => {
+        bind.value = res.data.bind
+        treeMenuLeftData.value = res.data.upNode
+        treeMenuRightData.value = res.data.downNode
+        setDisabled(treeMenuRightData.value)
+        setDisabled(treeMenuLeftData.value)
+        isLoading3.value = false
+        if (treeMenuLeftData.value && treeMenuLeftData.value.length > 0) {
+            treeMenuLeftData.value[0].children?.forEach(item => {
+                item.children?.forEach(item1 => {
+                    item1.children?.forEach(item2 => {
+                        item2.children?.forEach(item3 => {
+                            if (item3.level != null) {
+                                menuTreeLeft.value?.setCheckedKeys([item3.id])
+                                maintenanceData.upNode = item3.id
+                                bindLevel.value = item3.level
+                            }
+                        })
+                    })
+                })
+            })
+        }
+        if (treeMenuRightData.value && treeMenuRightData.value.length > 0) {
+            treeMenuRightData.value[0].children?.forEach(item => {
+                item.children?.forEach(item1 => {
+                    item1.children?.forEach(item2 => {
+                        item2.children?.forEach(item3 => {
+                            if (item3.level != null) {
+                                menuTreeRight.value?.setCheckedKeys([item3.id])
+                                maintenanceData.downNode = item3.id
+                            }
+                        })
+                    })
+                })
+            })
+        }
+        nodemaintenanceInformation.value = true
+    })
+    Object.assign(messageInfo, JSON.parse(JSON.stringify(val)))
+    connectionType.forEach(item => {
+        if (messageInfo.wiring == item.id) {
+            messageInfo.wiring = item.name
+        }
+    })
+}
+
+//设置禁选
+const setDisabled = (treeData: any[]) => {
+   treeData.forEach((item) => {
+        item.disabled = true;
+        item.children.forEach((item1:any) => {
+          item1.disabled = true;
+          item1.children.forEach((item2:any) => {
+            item2.disabled = true;
+            item2.children.forEach((item3:any) => {
+              item3.disabled = true;
+            });
+          });
+        });
+      });
+}
+
+watch(
+    () => [filterText1.value, filterText2.value],
+    ([newVal1, newVal2]) => {
+        menuTreeLeft.value.filter(newVal1)
+        menuTreeRight.value.filter(newVal2)
+    }
+)
+
+/**筛选节点 */
+const filterNode = (value: any, data: any, node: any) => {
+    if (!value) {
+        return true
+    }
+    let _array: boolean[] = [] // 显式声明类型为 boolean[]
+    getReturnNode(node, _array, value)
+    let result = false
+    _array.forEach(item => {
+        result = result || item
+    })
+    return result
+}
+
+const getReturnNode = (node: any, _array: boolean[], value: string) => {
+    let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
+    isPass ? _array.push(isPass) : ''
+    if (!isPass && node.level !== 1 && node.parent) {
+        getReturnNode(node.parent, _array, value)
+    }
+}
+
+const maintenanceData = reactive({
+    upNode: '',
+    downNode: '',
+    tfIndex: ''
+})
+
+//上节点选择
+const checkLeft = (checkedNodes: any, checkedKeys: any) => {
+    maintenanceData.upNode = checkedNodes.id
+    if (maintenanceData.upNode === maintenanceData.downNode) {
+        menuTreeRight.value?.setCheckedKeys([])
+        maintenanceData.downNode = ''
+    }
+    if (checkedKeys.checkedKeys.length > 1) {
+        menuTreeLeft.value?.setCheckedKeys([checkedNodes.id])
+    }
+}
+
+//下节点选择
+const checkRight = (checkedNodes: any, checkedKeys: any) => {
+    maintenanceData.downNode = checkedNodes.id
+    if (maintenanceData.downNode === maintenanceData.upNode) {
+        menuTreeLeft.value?.setCheckedKeys([])
+        maintenanceData.upNode = ''
+    }
+    if (checkedKeys.checkedKeys.length > 1) {
+        menuTreeRight.value?.setCheckedKeys([checkedNodes.id])
+    }
+}
+
+//节点维护提交
+const maintenanceOnsubmit = () => {
+    for (let i = 0; i < bind.value.length; i++) {
+        if (bind.value[i][0] == maintenanceData.upNode) {
+            for (let j = 0; j < bind.value.length; j++) {
+                if (bind.value[j][1] == maintenanceData.downNode) {
+                    ElMessage({
+                        type: 'warning',
+                        message: '上下节点无法选择相同母线！！！'
+                    })
+                    return
+                }
+            }
+            return
+        }
+    }
+
+    if (bindLevel.value != 5) {
+        for (let i = 0; i < bind.value.length; i++) {
+            if (maintenanceData.upNode == bind.value[i][1] && maintenanceData.downNode == bind.value[i][0]) {
+                ElMessage({
+                    type: 'warning',
+                    message: '上下节点无法选择相同母线！！！'
+                })
+                return
+            }
+        }
+    }
+
+    nodeMaintenance(maintenanceData).then((res: any) => {
+        if (res.code == 'A0000') {
+            ElMessage({
+                type: 'success',
+                message: '维护成功'
+            })
+            nodemaintenanceInformation.value = false
+            tableStore.index()
+        }
+    })
+}
+</script>
+<style lang="scss" scoped>
+.title {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    font-size: 16px;
+    font-weight: 550;
+}
+
+.xiaoshou {
+    cursor: pointer !important;
+}
+
+.span-ellipsis {
+    display: block;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+::v-deep .el-tree {
+    font-size: 13px !important;
+    font-weight: 540 !important;
+}
+</style>

src/views/pqs/business/terminal/transformerStrategy/index.vue

@@ -0,0 +1,337 @@
+<!-- 变压器策略 -->
+<template>
+    <div class="default-main">
+        <TableHeader showExport :showSearch="false" ref="TableHeaderRef">
+            <template v-slot:select></template>
+            <template #operation>
+                <el-button
+                    type="primary"
+                    class="ml10"
+                    @click="push('/admin/BusinessAdministrator/TerminalManagement/addLedger')"
+                    :icon="Setting"
+                >
+                    变压器台账配置
+                </el-button>
+                <el-button type="primary" class="ml10" @click="add" :icon="Plus">新增策略</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }"></Table>
+        <el-dialog
+            draggable
+            :title="dialogTitle"
+            v-model="dialogFormVisible"
+            :close-on-click-modal="false"
+            width="700px"
+            :before-close="resetForm"
+            v-if="dialogFormVisible"
+        >
+            <el-row :gutter="20" v-loading="isLoading1" element-loading-text="数据加载中">
+                <el-col :span="10">
+                    <div style="margin: 10px; overflow-y: auto; border-right: 1px solid" class="xiaoshou">
+                        <el-tree
+                            style="cursor: pointer; height: 380px"
+                            :data="treeMenuData"
+                            v-loading="loading"
+                            element-loading-text="数据加载中"
+                            show-checkbox
+                            node-key="id"
+                            ref="menuTree"
+                            highlight-current
+                            :expand-on-click-node="true"
+                            default-expand-all
+                            :props="{ children: 'children', label: 'name' }"
+                            @check="check"
+                        >
+                            <template #default="{ node, data }">
+                                <span class="span-ellipsis">
+                                    <i :class="data.icon"></i>
+                                    <span class="title" :title="node.label">{{ node.label }}</span>
+                                </span>
+                            </template>
+                        </el-tree>
+                    </div>
+                </el-col>
+                <el-col :span="14">
+                    <div class="box">
+                        <el-form :model="form" label-width="100px" ref="ruleFormRef">
+                            <el-form-item label="名称:">
+                                <el-input v-model="form.tpName" placeholder="请输入"></el-input>
+                            </el-form-item>
+                            <el-form-item label="描述:" class="mt20">
+                                <el-input v-model="form.tfDescribe" placeholder="请输入"></el-input>
+                            </el-form-item>
+                            <el-form-item class="mt20 ml20">
+                                <el-button @click="dialogFormVisible = false">取消</el-button>
+                                <el-button type="primary" @click="onSubmit">确 定</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </el-col>
+            </el-row>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, nextTick } from 'vue'
+import { Plus, Setting } from '@element-plus/icons-vue'
+import {
+    getFlgPloyInfo,
+    insertFlgPloy,
+    updateFlgPloy,
+    delFlgPloy,
+    getTransformerTree
+} from '@/api/device-boot/transformerStrategy'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElButton } from 'element-plus'
+import { mainHeight } from '@/utils/layout'
+import { useRouter } from 'vue-router'
+defineOptions({
+    name: '/BusinessAdministrator/TerminalManagement/transformerStrategy'
+})
+const { push } = useRouter()
+const fontdveoption: any = ref([
+    { id: 0, name: '极重要' },
+    { id: 1, name: '普通' },
+    { id: 2, name: '备用' }
+])
+const statusoption: any = ref([
+    { id: 0, name: '未启用' },
+    { id: 1, name: '启用' }
+])
+const height = mainHeight(70)
+
+const loading = ref(false)
+
+const tableRef = ref()
+
+const ruleFormRef = ref()
+
+const form: any = ref({
+    tpName: '',
+    tfDescribe: '',
+    tpIndex: '',
+    tfIndexs: []
+})
+
+const isLoading1 = ref(false)
+const treeMenuData = ref([])
+const menuTree = ref()
+const TableHeaderRef = ref()
+
+const rules = reactive({
+    name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
+    ip: [{ required: true, message: 'ip不可为空', trigger: 'blur' }],
+    nodeGrade: [{ required: true, message: '等级不可为空', trigger: 'blur' }],
+    nodeDevNum: [{ required: true, message: '最大终端数不可为空', trigger: 'blur' }],
+    maxProcessNum: [{ required: true, message: '最大进程数不可为空', trigger: 'blur' }],
+    sort: [{ required: true, message: '排序不可为空', trigger: 'blur' }],
+    remark: [{ required: true, message: '描述不可为空', trigger: 'blur' }]
+})
+
+const dialogFormVisible = ref(false)
+
+const dialogTitle = ref('新增前置机')
+const processId = ref('')
+const tableStore = new TableStore({
+    url: '/device-boot/pqsTflgploy/flgployPage',
+    method: 'POST',
+    column: [
+        { title: '变压器策略名称', field: 'tpName' },
+        { title: '更新时间', field: 'updateTime' },
+        // {
+        //     title: '等级',
+        //     field: 'nodeGrade',
+        //     render: 'tag',
+        //     custom: {
+        //         0: 'success',
+        //         1: 'warning',
+        //         2: 'info'
+        //     },
+        //     replaceValue: {
+        //         0: '极重要',
+        //         1: '普通',
+        //         2: '备用'
+        //     }
+        // },
+        {
+            title: '变压器策略描述',
+            field: 'tfDescribe'
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+
+                    click: async row => {
+                        dialogFormVisible.value = true
+                        dialogTitle.value = '修改策略信息'
+                        form.value = JSON.parse(JSON.stringify(row))
+                        getFlgPloyInfo({ id: row.tpIndex }).then(res => {
+                            menuTree.value.setCheckedKeys(res.data.tfIndexs)
+                            form.value.tfIndexs = res.data.tfIndexs
+                        })
+                    }
+                },
+                // {
+                //     name: 'edit',
+                //     title: '重启',
+                //     type: 'warning',
+                //     icon: 'el-icon-Delete',
+                //     render: 'confirmButton',
+                //     popconfirm: {
+                //         confirmButtonText: '确认',
+                //         cancelButtonText: '取消',
+                //         confirmButtonType: 'warning',
+                //         title: '确定重启吗？'
+                //     },
+                //     click: row => {
+                //         askRestartProcess({
+                //             deviceRebootType: null,
+                //             nodeId: row.id,
+                //             processNo: 1
+                //         }).then(res => {
+                //             ElMessage.success('重启成功')
+                //             tableStore.index()
+                //         })
+                //     }
+                // },
+
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        delFlgPloy({ ids: row.tpIndex }).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    // beforeSearchFun: () => {
+    //     for (let key in tableStore.table.params) {
+    //         if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
+    //             delete tableStore.table.params[key]
+    //         }
+    //     }
+    // },
+    loadCallback: () => {}
+})
+const nodeId = ref('')
+
+const treeRef = ref()
+
+// tableStore.table.params.orderBy = 'desc'
+// tableStore.table.params.nodeGrade = ''
+// tableStore.table.params.searchState = ''
+provide('tableStore', tableStore)
+
+// 变压器台账配置
+const set = () => {
+    push({
+        path: 'addLedger',
+        query: {}
+    })
+}
+
+// 新增
+const add = () => {
+    dialogFormVisible.value = true
+    dialogTitle.value = '新增策略信息'
+    form.value = {}
+}
+
+const resetForm = () => {
+    dialogFormVisible.value = false
+    form.value = {}
+}
+
+const getTree = () => {
+    isLoading1.value = true
+    getTransformerTree().then(res => {
+        treeMenuData.value = res.data
+        isLoading1.value = false
+    })
+}
+
+// 确认
+const onSubmit = () => {
+    ruleFormRef.value.validate((valid: any) => {
+        if (valid) {
+            if (dialogTitle.value == '新增策略信息') {
+                insertFlgPloy(form.value).then(res => {
+                    ElMessage.success('新增策略信息成功')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            } else {
+                ElMessageBox.confirm('是否确认修改?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    updateFlgPloy(form.value).then(res => {
+                        ElMessage.success('修改成功')
+                        resetForm()
+                        tableStore.onTableAction('search', {})
+                    })
+                })
+            }
+        }
+    })
+}
+
+//树多选
+const check = (currentNode: any, checkedInfo: any) => {
+    form.value.tfIndexs = checkedInfo.checkedNodes
+        .filter((item: any) => !item.children || item.children.length === 0)
+        .map((item: any) => item.id)
+}
+
+onMounted(() => {
+    getTree()
+    setTimeout(() => {
+        tableStore.index()
+    }, 100)
+})
+</script>
+<style lang="scss" scoped>
+.box {
+    position: absolute;
+    top: 100px;
+    right: 60px;
+    bottom: 0;
+    left: 300px;
+    z-index: 1;
+}
+
+.xiaoshou {
+    cursor: pointer !important;
+}
+
+// ::-webkit-scrollbar {
+//     width: 8px !important;
+//     height: 14px;
+// }
+</style>

src/views/pqs/cockpit/setUp/components/popup.vue

@@ -1,464 +1,465 @@
-<template>
-    <div class="pd10">
-        <el-card>
-            <el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
-                <el-form-item label="页面名称:" prop="pageName">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit
-                        v-model.trim="form.pageName"
-                        placeholder="请输入页面名称"
-                    ></el-input>
-                </el-form-item>
-
-                <el-form-item label="页面排序:" prop="sort">
-                    <el-input
-                        maxlength="32"
-                        show-word-limit-number
-                        v-model.trim.number="form.sort"
-                        :min="0"
-                        :step="1"
-                        step-strictly
-                        style="width: 100%"
-                    />
-                </el-form-item>
-
-                <el-form-item label="备注:" class="top">
-                    <el-input
-                        maxlength="300"
-                        show-word-limit
-                        type="textarea"
-                        :rows="1"
-                        placeholder="请输入内容"
-                        v-model.trim="form.remark"
-                    ></el-input>
-                </el-form-item>
-                <el-form-item>
-                    <div style="width: 100%; display: flex; justify-content: end">
-                        <el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
-                        <back-component />
-                    </div>
-                </el-form-item>
-            </el-form>
-        </el-card>
-        <el-card class="mt10" :style="height">
-            <div style="display: flex">
-                <div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
-                    <el-collapse v-model="activeNames" :expand-icon-position="position">
-                        <el-collapse-item
-                            v-for="item in treeComponents"
-                            :key="item.id"
-                            :title="item.name"
-                            :name="item.id"
-                        >
-                            <el-collapse v-model="activeNames1" class="ml20">
-                                <el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
-                                    <div class="Box">
-                                        <div
-                                            v-for="(s, index) in k.children"
-                                            :key="index"
-                                            class="mr10 mb10 imgBox"
-                                            draggable="true"
-                                            unselectable="on"
-                                            @drag="drag(s)"
-                                            @dragend="dragEnd(s)"
-                                        >
-                                            <div class="textName">{{ s.name }}</div>
-                                            <img :src="s.image" style="width: 180px" />
-                                        </div>
-                                    </div>
-                                </el-collapse-item>
-                            </el-collapse>
-                        </el-collapse-item>
-                    </el-collapse>
-                </div>
-                <div style="flex: 1" ref="wrapper">
-                    <GridLayout
-                        class="GridLayout"
-                        ref="gridLayout"
-                        v-model:layout="layout"
-                        style="width: 100%"
-                        :style="{ height: GridHeight + 'px' }"
-                        :row-height="rowHeight"
-                        :col-num="12"
-                        :vertical-compact="false"
-                    >
-                        <template #item="{ item }">
-                            <div class="imgBox">
-                                <div class="textName">{{ item.name }}</div>
-                                <img
-                                    :src="getImg(item.path)"
-                                    :style="{
-                                        height:
-                                            item.h * rowHeight -
-                                            (item.h == 1
-                                                ? 30
-                                                : item.h == 2
-                                                ? 20
-                                                : item.h == 3
-                                                ? 10
-                                                : item.h == 4
-                                                ? -0
-                                                : item.h == 5
-                                                ? -10
-                                                : -20) +
-                                            'px'
-                                    }"
-                                />
-                                <CloseBold class="remove" @click="removeItem(item.i)" />
-                            </div>
-                            <!-- <span class="text">{{ `${item?.name}` }}</span>
-                            -->
-                        </template>
-                    </GridLayout>
-                </div>
-            </div>
-        </el-card>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import BackComponent from '@/components/icon/back/index.vue'
-import { mainHeight } from '@/utils/layout'
-import type { CollapseIconPositionType } from 'element-plus'
-import { componentTree } from '@/api/user-boot/user'
-import { GridLayout, GridItem } from 'grid-layout-plus'
-import { throttle } from 'lodash-es'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Tools, CloseBold } from '@element-plus/icons-vue'
-import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
-import html2canvas from 'html2canvas'
-const { go } = useRouter()
-const { query } = useRoute()
-const height = mainHeight(108)
-const indicatorHeight = mainHeight(128)
-const rowHeight = ref(0)
-const GridHeight = ref(0)
-const position = ref<CollapseIconPositionType>('left')
-const form: any = reactive({
-    pageName: '',
-    thumbnail: '',
-    containerConfig: [],
-    sort: '100',
-    id: '',
-    remark: ''
-})
-const activeNames = ref([])
-const activeNames1 = ref([])
-const rules = {
-    pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
-    projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
-    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
-}
-const formRef = ref()
-const layout: any = ref([
-    // { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
-    // { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
-    // { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
-    // { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
-    // { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
-    // { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
-    // { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
-    // { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
-    // { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
-])
-const treeComponents: any = ref([]) //组件树
-const treeComponentsCopy: any = ref([]) //组件树
-const info = () => {
-    activeNames.value = []
-    activeNames1.value = []
-    componentTree().then(res => {
-        treeComponents.value = res.data
-        activeNames.value = treeComponents.value.map(item => item.id)
-        res.data.forEach(item => {
-            item.children.forEach(k => {
-                activeNames1.value.push(k.id)
-            })
-        })
-        treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
-    })
-
-    if (query.id) {
-        queryById({ id: query.id }).then(res => {
-            layout.value = JSON.parse(res.data.containerConfig)
-            form.pageName = res.data.pageName
-            form.sort = res.data.sort
-            form.remark = res.data.remark
-            form.id = res.data.id
-        })
-    }
-}
-
-// 扁平化树
-const tree2List = (list: any, id: any) => {
-    //存储结果的数组
-    let arr: any = []
-    // 遍历 tree 数组
-    list.forEach((item: any) => {
-        item.uPid = id
-        item.uId = Math.random() * 1000
-        // 判断item是否存在children
-        if (!item.children) return arr.push(item)
-        // 函数递归，对children数组进行tree2List的转换
-        const children = tree2List(item.children, item.uId)
-        // 删除item的children属性
-        delete item.children
-        // 把item和children数组添加至结果数组
-        //..children: 意思是把children数组展开
-        arr.push(item, ...children)
-    })
-    // 返回结果数组
-    return arr
-}
-// 删除拖拽
-const removeItem = (id: string) => {
-    const index = layout.value.findIndex(item => item.i === id)
-
-    if (index > -1) {
-        layout.value.splice(index, 1)
-    }
-}
-const wrapper = ref<HTMLElement>()
-const gridLayout = ref<InstanceType<typeof GridLayout>>()
-
-const mouseAt = { x: -1, y: -1 }
-
-function syncMousePosition(event: MouseEvent) {
-    mouseAt.x = event.clientX
-    mouseAt.y = event.clientY
-}
-
-const dropId = 'drop'
-const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
-
-const drag = throttle(row => {
-    // console.log("🚀 ~ drag ~ row:", row)
-
-    const parentRect = wrapper.value?.getBoundingClientRect()
-
-    if (!parentRect || !gridLayout.value) return
-
-    const mouseInGrid =
-        mouseAt.x > parentRect.left &&
-        mouseAt.x < parentRect.right &&
-        mouseAt.y > parentRect.top &&
-        mouseAt.y < parentRect.bottom
-
-    if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
-        layout.value.push({
-            x: (layout.value.length * 2) % 6,
-            y: layout.value.length + 6, // puts it at the bottom
-            w: 4,
-            h: 2,
-            i: dropId
-        })
-    }
-
-    const index = layout.value.findIndex(item => item.i === dropId)
-
-    if (index !== -1) {
-        const item = gridLayout.value.getItem(dropId)
-
-        if (!item) return
-
-        try {
-            item.wrapper.style.display = 'none'
-        } catch (e) {}
-
-        Object.assign(item.state, {
-            top: mouseAt.y - parentRect.top,
-            left: mouseAt.x - parentRect.left
-        })
-        const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
-
-        if (mouseInGrid) {
-            gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
-            dragItem.i = String(index)
-            dragItem.x = layout.value[index].x
-            dragItem.y = layout.value[index].y
-        } else {
-            gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
-            layout.value = layout.value.filter(item => item.i !== dropId)
-        }
-    }
-})
-
-function dragEnd(row: any) {
-    console.log('🚀 ~ drag ~ row:', row)
-    const parentRect = wrapper.value?.getBoundingClientRect()
-
-    if (!parentRect || !gridLayout.value) return
-
-    const mouseInGrid =
-        mouseAt.x > parentRect.left &&
-        mouseAt.x < parentRect.right &&
-        mouseAt.y > parentRect.top &&
-        mouseAt.y < parentRect.bottom
-
-    if (mouseInGrid) {
-        gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
-        layout.value = layout.value.filter(item => item.i !== dropId)
-    } else {
-        return
-    }
-
-    layout.value.push({
-        x: dragItem.x,
-        y: dragItem.y,
-        w: dragItem.w,
-        h: dragItem.h,
-        i: dragItem.i,
-        name: row.name,
-        path: row.path,
-        icon: row.icon,
-        timeKey: row.timeKey
-    })
-    gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
-    const item = gridLayout.value.getItem(dropId)
-    if (!item) return
-    try {
-        item.wrapper.style.display = ''
-    } catch (e) {}
-}
-// 保存
-const onSubmit = () => {
-    if (layout.value.length == 0) {
-        return ElMessage.warning('页面设计不能为空!')
-    }
-    const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
-    if (maxValue > 6) {
-        return ElMessage.warning('组件不能超出当前容器!')
-    }
-
-    formRef.value.validate(async (valid: boolean) => {
-        let url = ''
-        await html2canvas(document.querySelector('.GridLayout'), {
-            useCORS: true
-        }).then(canvas => {
-            url = canvas.toDataURL('image/png')
-        })
-
-        if (valid) {
-            if (form.id == '') {
-                addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
-                    (res: any) => {
-                        ElMessage.success('新增页面成功!')
-                        go(-1)
-                    }
-                )
-            } else {
-                updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
-                    (res: any) => {
-                        ElMessage.success('修改页面成功!')
-                        go(-1)
-                    }
-                )
-            }
-        }
-    })
-}
-const getImg = throttle((path: string) => {
-    if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
-})
-onMounted(() => {
-    info()
-
-    GridHeight.value = wrapper.value?.offsetWidth / 1.77777
-    rowHeight.value = GridHeight.value / 6 - 11.5
-    document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
-    document.addEventListener('dragover', syncMousePosition)
-})
-
-onBeforeUnmount(() => {
-    document.removeEventListener('dragover', syncMousePosition)
-})
-// onMounted(() => {
-
-//     // document.addEventListener('dragover', syncMousePosition)
-// })
-</script>
-<style lang="scss" scoped>
-.form-four {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    .el-form-item {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        .el-form-item__content {
-            width: 100%;
-            flex: 1;
-            .el-select,
-            .el-cascader,
-            .el-input__inner,
-            .el-date-editor {
-                width: 100%;
-            }
-        }
-    }
-}
-:deep(.el-card__body) {
-    padding: 20px 20px 12px;
-}
-.Box {
-    display: flex;
-    flex-wrap: wrap;
-}
-.imgBox {
-    // padding: 10px;
-    display: flex;
-    flex-direction: column;
-
-    box-shadow: var(--el-box-shadow-light);
-    --el-card-border-color: var(--el-border-color-light);
-    --el-card-border-radius: 4px;
-    --el-card-padding: 20px;
-    --el-card-bg-color: var(--el-fill-color-blank);
-    background-color: var(--el-card-bg-color);
-    border: 1px solid var(--el-card-border-color);
-    border-radius: var(--el-card-border-radius);
-    color: var(--el-text-color-primary);
-    overflow: hidden;
-    transition: var(--el-transition-duration) 0.3s;
-    .textName {
-        padding: 2px 5px;
-        background-color: var(--el-color-primary);
-        color: #fff;
-    }
-    user-select: none; /* 标准属性 */
-    -webkit-user-select: none; /* Chrome/Safari */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* IE/Edge */
-}
-.vgl-layout {
-    background-color: #eee;
-}
-
-.remove {
-    position: absolute;
-    top: 5px;
-    right: 2px;
-    width: 16px;
-    color: #fff;
-    cursor: pointer;
-}
-
-.vgl-layout::before {
-    position: absolute;
-    width: calc(100% - 5px);
-    height: calc(100% - 5px);
-    margin: 5px;
-    content: '';
-    background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
-        linear-gradient(to bottom, lightgrey 1px, transparent 1px);
-    background-repeat: repeat;
-    background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
-}
-
-:deep(.vgl-item:not(.vgl-item--placeholder)) {
-    background-color: #fff;
-    border: 1px solid black;
-}
-</style>
+<template>
+    <div class="pd10">
+        <el-card>
+            <el-form ref="formRef" inline :rules="rules" :model="form" label-width="120px" class="form-four">
+                <el-form-item label="页面名称:" prop="pageName">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit
+                        v-model.trim="form.pageName"
+                        placeholder="请输入页面名称"
+                    ></el-input>
+                </el-form-item>
+
+                <el-form-item label="页面排序:" prop="sort">
+                    <el-input
+                        maxlength="32"
+                        show-word-limit-number
+                        v-model.trim.number="form.sort"
+                        :min="0"
+                        :step="1"
+                        step-strictly
+                        style="width: 100%"
+                    />
+                </el-form-item>
+
+                <el-form-item label="备注:" class="top">
+                    <el-input
+                        maxlength="300"
+                        show-word-limit
+                        type="textarea"
+                        :rows="1"
+                        placeholder="请输入内容"
+                        v-model.trim="form.remark"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <div style="width: 100%; display: flex; justify-content: end">
+                        <el-button type="primary" icon="el-icon-Check" @click="onSubmit">保存</el-button>
+                        <back-component />
+                    </div>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card class="mt10" :style="height">
+            <div style="display: flex">
+                <div style="width: 605px; overflow: auto" :style="indicatorHeight" class="mr10">
+                    <el-collapse v-model="activeNames" :expand-icon-position="position">
+                        <el-collapse-item
+                            v-for="item in treeComponents"
+                            :key="item.id"
+                            :title="item.name"
+                            :name="item.id"
+                        >
+                            <el-collapse v-model="activeNames1" class="ml20">
+                                <el-collapse-item v-for="k in item.children" :key="k.id" :title="k.name" :name="k.id">
+                                    <div class="Box">
+                                        <div
+                                            v-for="(s, index) in k.children"
+                                            :key="index"
+                                            class="mr10 mb10 imgBox"
+                                            draggable="true"
+                                            unselectable="on"
+                                            @drag="drag(s)"
+                                            @dragend="dragEnd(s)"
+                                        >
+                                            <div class="textName">{{ s.name }}</div>
+                                            <img :src="s.image" style="width: 180px" />
+                                        </div>
+                                    </div>
+                                </el-collapse-item>
+                            </el-collapse>
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
+                <div style="flex: 1" ref="wrapper">
+                    <GridLayout
+                        class="GridLayout"
+                        ref="gridLayout"
+                        v-model:layout="layout"
+                        style="width: 100%"
+                        :style="{ height: GridHeight + 'px' }"
+                        :row-height="rowHeight"
+                        :col-num="12"
+                        prevent-collision
+                        :vertical-compact="false"
+                    >
+                        <template #item="{ item }">
+                            <div class="imgBox">
+                                <div class="textName">{{ item.name }}</div>
+                                <img
+                                    :src="getImg(item.path)"
+                                    :style="{
+                                        height:
+                                            item.h * rowHeight -
+                                            (item.h == 1
+                                                ? 30
+                                                : item.h == 2
+                                                ? 20
+                                                : item.h == 3
+                                                ? 10
+                                                : item.h == 4
+                                                ? -0
+                                                : item.h == 5
+                                                ? -10
+                                                : -20) +
+                                            'px'
+                                    }"
+                                />
+                                <CloseBold class="remove" @click="removeItem(item.i)" />
+                            </div>
+                            <!-- <span class="text">{{ `${item?.name}` }}</span>
+                            -->
+                        </template>
+                    </GridLayout>
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import BackComponent from '@/components/icon/back/index.vue'
+import { mainHeight } from '@/utils/layout'
+import type { CollapseIconPositionType } from 'element-plus'
+import { componentTree } from '@/api/user-boot/user'
+import { GridLayout, GridItem } from 'grid-layout-plus'
+import { throttle } from 'lodash-es'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Tools, CloseBold } from '@element-plus/icons-vue'
+import { addDashboard, updateDashboard, queryById } from '@/api/system-boot/csstatisticalset'
+import html2canvas from 'html2canvas'
+const { go } = useRouter()
+const { query } = useRoute()
+const height = mainHeight(108)
+const indicatorHeight = mainHeight(128)
+const rowHeight = ref(0)
+const GridHeight = ref(0)
+const position = ref<CollapseIconPositionType>('left')
+const form: any = reactive({
+    pageName: '',
+    thumbnail: '',
+    containerConfig: [],
+    sort: '100',
+    id: '',
+    remark: ''
+})
+const activeNames = ref([])
+const activeNames1 = ref([])
+const rules = {
+    pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
+    projectIds: [{ required: true, message: '请选择工程页面', trigger: 'change' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+}
+const formRef = ref()
+const layout: any = ref([
+    // { x: 0, y: 0, w: 4, h: 2, i: '0', name: '', path: '' },
+    // { x: 4, y: 0, w: 4, h: 2, i: '1', name: '', path: '' },
+    // { x: 8, y: 0, w: 4, h: 2, i: '2', name: '', path: '' },
+    // { x: 0, y: 0, w: 4, h: 2, i: '3', name: '', path: '' },
+    // { x: 4, y: 0, w: 4, h: 2, i: '4', name: '', path: '' },
+    // { x: 8, y: 0, w: 4, h: 2, i: '5', name: '', path: '' },
+    // { x: 0, y: 0, w: 4, h: 2, i: '6', name: '', path: '' },
+    // { x: 4, y: 0, w: 4, h: 2, i: '7', name: '', path: '' },
+    // { x: 8, y: 0, w: 4, h: 2, i: '8', name: '', path: '' }
+])
+const treeComponents: any = ref([]) //组件树
+const treeComponentsCopy: any = ref([]) //组件树
+const info = () => {
+    activeNames.value = []
+    activeNames1.value = []
+    componentTree().then(res => {
+        treeComponents.value = res.data
+        activeNames.value = treeComponents.value.map(item => item.id)
+        res.data.forEach(item => {
+            item.children.forEach(k => {
+                activeNames1.value.push(k.id)
+            })
+        })
+        treeComponentsCopy.value = tree2List(JSON.parse(JSON.stringify(res.data)), 0)
+    })
+
+    if (query.id) {
+        queryById({ id: query.id }).then(res => {
+            layout.value = JSON.parse(res.data.containerConfig)
+            form.pageName = res.data.pageName
+            form.sort = res.data.sort
+            form.remark = res.data.remark
+            form.id = res.data.id
+        })
+    }
+}
+
+// 扁平化树
+const tree2List = (list: any, id: any) => {
+    //存储结果的数组
+    let arr: any = []
+    // 遍历 tree 数组
+    list.forEach((item: any) => {
+        item.uPid = id
+        item.uId = Math.random() * 1000
+        // 判断item是否存在children
+        if (!item.children) return arr.push(item)
+        // 函数递归，对children数组进行tree2List的转换
+        const children = tree2List(item.children, item.uId)
+        // 删除item的children属性
+        delete item.children
+        // 把item和children数组添加至结果数组
+        //..children: 意思是把children数组展开
+        arr.push(item, ...children)
+    })
+    // 返回结果数组
+    return arr
+}
+// 删除拖拽
+const removeItem = (id: string) => {
+    const index = layout.value.findIndex(item => item.i === id)
+
+    if (index > -1) {
+        layout.value.splice(index, 1)
+    }
+}
+const wrapper = ref<HTMLElement>()
+const gridLayout = ref<InstanceType<typeof GridLayout>>()
+
+const mouseAt = { x: -1, y: -1 }
+
+function syncMousePosition(event: MouseEvent) {
+    mouseAt.x = event.clientX
+    mouseAt.y = event.clientY
+}
+
+const dropId = 'drop'
+const dragItem = { x: -1, y: -1, w: 4, h: 2, i: '' }
+
+const drag = throttle(row => {
+    // console.log("🚀 ~ drag ~ row:", row)
+
+    const parentRect = wrapper.value?.getBoundingClientRect()
+
+    if (!parentRect || !gridLayout.value) return
+
+    const mouseInGrid =
+        mouseAt.x > parentRect.left &&
+        mouseAt.x < parentRect.right &&
+        mouseAt.y > parentRect.top &&
+        mouseAt.y < parentRect.bottom
+
+    if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
+        layout.value.push({
+            x: (layout.value.length * 2) % 6,
+            y: layout.value.length + 6, // puts it at the bottom
+            w: 4,
+            h: 2,
+            i: dropId
+        })
+    }
+
+    const index = layout.value.findIndex(item => item.i === dropId)
+
+    if (index !== -1) {
+        const item = gridLayout.value.getItem(dropId)
+
+        if (!item) return
+
+        try {
+            item.wrapper.style.display = 'none'
+        } catch (e) {}
+
+        Object.assign(item.state, {
+            top: mouseAt.y - parentRect.top,
+            left: mouseAt.x - parentRect.left
+        })
+        const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
+
+        if (mouseInGrid) {
+            gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
+            dragItem.i = String(index)
+            dragItem.x = layout.value[index].x
+            dragItem.y = layout.value[index].y
+        } else {
+            gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
+            layout.value = layout.value.filter(item => item.i !== dropId)
+        }
+    }
+})
+
+function dragEnd(row: any) {
+    console.log('🚀 ~ drag ~ row:', row)
+    const parentRect = wrapper.value?.getBoundingClientRect()
+
+    if (!parentRect || !gridLayout.value) return
+
+    const mouseInGrid =
+        mouseAt.x > parentRect.left &&
+        mouseAt.x < parentRect.right &&
+        mouseAt.y > parentRect.top &&
+        mouseAt.y < parentRect.bottom
+
+    if (mouseInGrid) {
+        gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
+        layout.value = layout.value.filter(item => item.i !== dropId)
+    } else {
+        return
+    }
+
+    layout.value.push({
+        x: dragItem.x,
+        y: dragItem.y,
+        w: dragItem.w,
+        h: dragItem.h,
+        i: dragItem.i,
+        name: row.name,
+        path: row.path,
+        icon: row.icon,
+        timeKey: row.timeKey
+    })
+    gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
+    const item = gridLayout.value.getItem(dropId)
+    if (!item) return
+    try {
+        item.wrapper.style.display = ''
+    } catch (e) {}
+}
+// 保存
+const onSubmit = () => {
+    if (layout.value.length == 0) {
+        return ElMessage.warning('页面设计不能为空!')
+    }
+    const maxValue = Math.max(...layout.value.map(item => item.y + item.h))
+    if (maxValue > 6) {
+        return ElMessage.warning('组件不能超出当前容器!')
+    }
+
+    formRef.value.validate(async (valid: boolean) => {
+        let url = ''
+        await html2canvas(document.querySelector('.GridLayout'), {
+            useCORS: true
+        }).then(canvas => {
+            url = canvas.toDataURL('image/png')
+        })
+
+        if (valid) {
+            if (form.id == '') {
+                addDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
+                    (res: any) => {
+                        ElMessage.success('新增页面成功!')
+                        go(-1)
+                    }
+                )
+            } else {
+                updateDashboard({ ...form, containerConfig: JSON.stringify(layout.value), thumbnail: url }).then(
+                    (res: any) => {
+                        ElMessage.success('修改页面成功!')
+                        go(-1)
+                    }
+                )
+            }
+        }
+    })
+}
+const getImg = throttle((path: string) => {
+    if (path != undefined) return treeComponentsCopy.value.filter(item => item.path == path)[0]?.image
+})
+onMounted(() => {
+    info()
+
+    GridHeight.value = wrapper.value?.offsetWidth / 1.77777
+    rowHeight.value = GridHeight.value / 6 - 11.5
+    document.documentElement.style.setProperty('--GridLayout-height', rowHeight.value + 10 + 'px')
+    document.addEventListener('dragover', syncMousePosition)
+})
+
+onBeforeUnmount(() => {
+    document.removeEventListener('dragover', syncMousePosition)
+})
+// onMounted(() => {
+
+//     // document.addEventListener('dragover', syncMousePosition)
+// })
+</script>
+<style lang="scss" scoped>
+.form-four {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .el-form-item {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        .el-form-item__content {
+            width: 100%;
+            flex: 1;
+            .el-select,
+            .el-cascader,
+            .el-input__inner,
+            .el-date-editor {
+                width: 100%;
+            }
+        }
+    }
+}
+:deep(.el-card__body) {
+    padding: 20px 20px 12px;
+}
+.Box {
+    display: flex;
+    flex-wrap: wrap;
+}
+.imgBox {
+    // padding: 10px;
+    display: flex;
+    flex-direction: column;
+
+    box-shadow: var(--el-box-shadow-light);
+    --el-card-border-color: var(--el-border-color-light);
+    --el-card-border-radius: 4px;
+    --el-card-padding: 20px;
+    --el-card-bg-color: var(--el-fill-color-blank);
+    background-color: var(--el-card-bg-color);
+    border: 1px solid var(--el-card-border-color);
+    border-radius: var(--el-card-border-radius);
+    color: var(--el-text-color-primary);
+    overflow: hidden;
+    transition: var(--el-transition-duration) 0.3s;
+    .textName {
+        padding: 2px 5px;
+        background-color: var(--el-color-primary);
+        color: #fff;
+    }
+    user-select: none; /* 标准属性 */
+    -webkit-user-select: none; /* Chrome/Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+}
+.vgl-layout {
+    background-color: #eee;
+}
+
+.remove {
+    position: absolute;
+    top: 5px;
+    right: 2px;
+    width: 16px;
+    color: #fff;
+    cursor: pointer;
+}
+
+.vgl-layout::before {
+    position: absolute;
+    width: calc(100% - 5px);
+    height: calc(100% - 5px);
+    margin: 5px;
+    content: '';
+    background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
+        linear-gradient(to bottom, lightgrey 1px, transparent 1px);
+    background-repeat: repeat;
+    background-size: calc(calc(100% - 5px) / 12) var(--GridLayout-height);
+}
+
+:deep(.vgl-item:not(.vgl-item--placeholder)) {
+    background-color: #fff;
+    border: 1px solid black;
+}
+</style>

src/views/pqs/database/model/components/harmonicImpedance.vue

@@ -0,0 +1,81 @@
+
+<template>
+    <div class="default-main">
+        <TableHeader ref="TableHeaderRef">
+            <template v-slot:select>
+               <el-form-item label="名称">
+                    <el-input v-model="tableStore.table.params.searchValue" clearable
+                        placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
+                </el-form-item>
+            </template>
+
+        </TableHeader>
+        
+        <Table ref="tableRef" isGroup/>
+    </div>
+</template>
+<script setup lang="tsx">
+import { ref, onMounted, provide, reactive } 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'
+
+const tableRef = ref()
+const tableStore = new TableStore({
+    url: '/supervision-boot/libModel/pageLibModelQuery',
+    method: 'POST',
+    showPage: true, // 确保启用分页
+    column: [
+        {
+            title: '典型设备',
+            children: [
+                {
+                    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: 200 },
+                { field: 'voltage', title: '电压等级',minWidth: 100  },
+                { field: 'capacity', title: '容量',minWidth: 100  }
+            ]
+        },
+        {
+            title: '各次谐波阻抗 (Ω)',
+            width: 1800,
+            children: Array.from({ length: 24 }, (_, i) => ({
+                field: `i${i + 2}`,
+                title: `${i + 2}次`,
+                minWidth: 100
+            }))
+        }
+    ],
+    // 在请求发送前处理参数
+    beforeSearchFun: () => {
+            tableStore.table.params.pageSize = 100
+    },
+    resetCallback: () => {
+        tableStore.table.params.searchValue = ''
+    },
+})
+
+tableStore.table.params.type = 0
+provide('tableStore', tableStore)
+
+
+// 暴露查询方法给父组件调用
+const queryData = () => {
+    tableStore.index()
+}
+
+defineExpose({
+    queryData
+})
+
+
+</script>
+
+

src/views/pqs/database/model/components/harmonicSources.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label="名称">
+                    <el-input v-model="tableStore.table.params.searchValue" clearable
+                        placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
+                </el-form-item>
+            </template>
+
+        </TableHeader>
+        <Table ref="tableRef" isGroup/>
+    </div>
+</template>
+<script setup lang="tsx">
+import { ref, onMounted, provide, reactive } 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'
+
+const tableRef = ref()
+const tableStore = new TableStore({
+    url: '/supervision-boot/libModel/pageLibModelQuery',
+    method: 'POST',
+        column: [
+        {
+            title: '谐波源',
+            children: [
+                {
+                    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: 200 },
+                { field: 'voltage', title: '电压等级',minWidth: 200  },
+                { field: 'capacity', title: '容量',minWidth: 200  }
+            ]
+        },
+        {
+            title: '各次谐波电流含量（%）',
+            width: 1800,
+            children: Array.from({ length: 24 }, (_, i) => ({
+                field: `i${i + 2}`,
+                title: `${i + 2}次`,
+                minWidth: 100
+            }))
+        }
+    ],
+     // 在请求发送前处理参数
+    beforeSearchFun: () => {
+            tableStore.table.params.pageSize = 100
+    },
+     resetCallback: () => {
+        tableStore.table.params.searchValue = ''
+    },
+})
+
+tableStore.table.params.type = 1
+provide('tableStore', tableStore)
+
+// 暴露查询方法给父组件调用
+const queryData = () => {
+    tableStore.index()
+}
+
+defineExpose({
+    queryData
+})
+
+</script>

src/views/pqs/database/model/index.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="default-main">
+        <el-tabs v-model="activeName" type="border-card" @tab-change="handleTabChange">
+            <el-tab-pane label="谐波阻抗模型库" name="1">
+                <HarmonicImpedanceTable ref="harmonicImpedanceRef" />
+            </el-tab-pane>
+            <el-tab-pane label="谐波源模型库" name="2">
+                <HarmonicSourcesTable ref="harmonicSourcesRef" />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, provide } from 'vue'
+
+import { mainHeight } from '@/utils/layout'
+import HarmonicSourcesTable from './components/harmonicSources.vue'
+import HarmonicImpedanceTable from './components/harmonicImpedance.vue'
+defineOptions({
+    name: 'database/model'
+})
+const activeName = ref('1')
+
+// 获取子组件引用
+const harmonicImpedanceRef = ref<InstanceType<typeof HarmonicImpedanceTable>>()
+const harmonicSourcesRef = ref<InstanceType<typeof HarmonicSourcesTable>>()
+
+const layout = mainHeight(63) as any
+
+// 添加 tab 切换处理函数
+const handleTabChange = (tabName: string) => {
+    if (tabName === '1') {
+        // 调用谐波阻抗数据库查询接口
+        harmonicImpedanceRef.value?.queryData()
+    } else if (tabName === '2') {
+        // 调用谐波源数据库查询接口
+        harmonicSourcesRef.value?.queryData()
+    }
+}
+
+// 组件挂载时初始化数据
+onMounted(() => {
+    // 默认加载第一个 tab 的数据
+    handleTabChange(activeName.value)
+})
+</script>

src/views/pqs/harmonicMonitoring/detailed/division/components/aListOfLoadData.vue

@@ -47,7 +47,7 @@ import Table from '@/components/table/index.vue'
 import BackComponent from '@/components/icon/back/index.vue'
 import completenessDetails from './completenessDetails.vue'
 import { genFileId, ElMessage } from 'element-plus'
-import { uploadUserData ,deleteUserDataByIds} from '@/api/advance-boot/division'
+import { uploadUserData, deleteUserDataByIds } from '@/api/advance-boot/division'
 import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
 defineOptions({
     name: 'division/aListOfLoadData'
@@ -78,6 +78,9 @@ const tableStore = new TableStore({
                     title: '完整性详情',
                     type: 'primary',
                     icon: 'el-icon-Plus',
+                    disabled: row => {
+                        return row.integrity == 1
+                    },
                     render: 'basicButton',
                     click: row => {
                         completenessDetailsRef.value.open(row.id)
@@ -129,7 +132,7 @@ const submitupload = () => {
         ElMessage.warning('请上传文件！')
         return
     }
-      ElMessage.info('上传中,请稍等...')
+    ElMessage.info('上传中,请稍等...')
     const formData = new FormData()
     formData.append('file', fileList.value[0].raw)
     loading.value = true

src/views/pqs/harmonicMonitoring/detailed/division/components/completenessDetails.vue

@@ -1,5 +1,4 @@
 <template>
-
     <el-dialog v-model="dialogVisible" draggable title="完整性不足详情" width="1000">
         <TableHeader :showReset="false" ref="TableHeaderRef">
             <template #select>
@@ -13,11 +12,9 @@
             </template>
         </TableHeader>
         <Table ref="tableRef"></Table>
-
     </el-dialog>
-
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import TableStore from '@/utils/tableStore'
 import TableHeader from '@/components/table/header/index.vue'
 import Table from '@/components/table/index.vue'
@@ -33,15 +30,20 @@ const tableStore = new TableStore({
         { title: '数据名', field: 'name' },
         { title: '用户名', field: 'userName' },
         { title: '测量点局号', field: 'lineNo' },
-        { title: '日期', field: 'upDataTime' },
-        { title: '完整性', field: 'integrity' },
+        { title: '日期', field: 'updateTime' },
+        {
+            title: '完整性(%)',
+            field: 'integrity',
+            formatter: (row: any) => {
+                return Math.floor(row.cellValue * 10000) / 100
+            }
+        }
     ],
     loadCallback: () => {
         setTimeout(() => {
-        tableStore.table.height = mainHeight(0,2).height as any
-        // console.log("🚀 ~ setTimeout ~  tableStore.table.height:", tableStore.table.height)
-
-    }, 0)
+            tableStore.table.height = mainHeight(0, 2).height as any
+            // console.log("🚀 ~ setTimeout ~  tableStore.table.height:", tableStore.table.height)
+        }, 0)
         //   setTimeout(() => {  tableStore.table.height = 'calc((100vh) / 2)'}, 1000)
     }
 })
@@ -49,17 +51,12 @@ const tableStore = new TableStore({
 provide('tableStore', tableStore)
 tableStore.table.params.searchValue = ''
 const open = (id: string) => {
-
     tableStore.table.params.userDataId = id
     dialogVisible.value = true
 
     tableStore.index()
-  
-
 }
 
 defineExpose({ open })
-
-
 </script>
 <style lang="scss" scoped></style>

src/views/pqs/harmonicMonitoring/detailed/division/components/compute.vue

@@ -4,7 +4,8 @@
         <div class="title">
             贡献度计算
             <div style="font-size: 14px; font-weight: 500">
-                {{ dotList.alias || '' }}
+                <!-- {{ dotList.alias || '' }} -->
+                <span class="monitoring-point">当前位置：{{ dotList.alias || '' }}</span>
                 <back-component />
             </div>
         </div>
@@ -45,7 +46,7 @@
                         </el-select>
                     </el-form-item>
                     <el-form-item label="负荷数据:">
-                        <el-select v-model="form.loadData" clearable filterable placeholder="请选择负荷数据">
+                        <el-select v-model="form.loadDataId" clearable filterable placeholder="请选择负荷数据">
                             <el-option
                                 v-for="item in loadDataOptions"
                                 :key="item.id"
@@ -61,7 +62,7 @@
                         <el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button>
                     </el-form-item>
                 </el-form>
-                <el-tabs v-model="activeName" type="card" class="demo-tabs" v-if="showTabs">
+                <el-tabs v-model="activeName" type="border-card" class="mr10" v-if="showTabs">
                     <el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index">
                         <div class="pd10">
                             <div>
@@ -75,31 +76,93 @@
                                     format="YYYY-MM-DD"
                                     date-format="YYYY-MM-DD"
                                     time-format="YYYY-MM-DD"
+                                    value-format="YYYY-MM-DD"
                                     :disabled-date="handleDisabledDate"
                                 />
                                 <el-button type="primary" icon="el-icon-CaretRight" @click="execute(item, index)">
                                     执行
                                 </el-button>
                             </div>
-                            <div v-if="item.showExecute">
-                                <el-form :inline="true" v-model="item.form" class="mt10">
-                                    <el-form-item label="限值:">
-                                        <el-input v-model="item.form.limit" placeholder="请输入限值" />
+                            <div v-if="item.showEcahr == 1" class="harmonicButton">
+                                <el-form :inline="true" v-model="item.form">
+                                    <el-form-item label="限值:" v-if="item.showDynamic">
+                                        <el-input v-model="item.form.limit" placeholder="请选择限值" disabled>
+                                            <template #append>
+                                                <el-button
+                                                    :icon="Edit"
+                                                    :class="[code == 0 ? 'frontBox' : '']"
+                                                    @click="setCode(0)"
+                                                />
+                                            </template>
+                                        </el-input>
                                     </el-form-item>
-                                    <el-form-item label="时间点一:">
-                                        <el-input v-model="item.form.time1" placeholder="请输入时间点一" />
+                                    <el-form-item label="时间点一:" v-if="item.showDynamic">
+                                        <el-input v-model="item.form.time1" placeholder="请选择时间点一" disabled>
+                                            <template #append>
+                                                <el-button
+                                                    :icon="Edit"
+                                                    :class="[code == 1 ? 'frontBox' : '']"
+                                                    @click="setCode(1)"
+                                                />
+                                            </template>
+                                        </el-input>
                                     </el-form-item>
-                                    <el-form-item label="时间点二:">
-                                        <el-input v-model="item.form.time2" placeholder="请输入时间点二" />
+                                    <el-form-item label="时间点二:" v-if="item.showDynamic">
+                                        <el-input v-model="item.form.time2" placeholder="请选择时间点二" disabled>
+                                            <template #append>
+                                                <el-button
+                                                    :icon="Edit"
+                                                    :class="[code == 2 ? 'frontBox' : '']"
+                                                    @click="setCode(2)"
+                                                />
+                                            </template>
+                                        </el-input>
                                     </el-form-item>
                                     <el-form-item>
-                                        <el-button type="primary" icon="el-icon-Document">
+                                        <el-button
+                                            type="primary"
+                                            icon="el-icon-Document"
+                                            @click="generateFn"
+                                            v-if="!item.showDynamic"
+                                        >
                                             生成动态谐波责任数据
                                         </el-button>
-                                        <el-button type="primary" icon="el-icon-Document">生成谐波责任指标</el-button>
+                                        <el-button
+                                            type="primary"
+                                            icon="el-icon-Document"
+                                            v-else
+                                            @click="generateMetrics"
+                                        >
+                                            生成谐波责任指标
+                                        </el-button>
                                     </el-form-item>
                                 </el-form>
                             </div>
+
+                            <div class="box" v-loading="loading">
+                                <MyEChart :options="item.options" v-if="item.showEcahr == 1" @group="group" />
+                                <el-empty description="时间范围内无谐波数据" v-if="item.showEcahr == 2" />
+                            </div>
+                            <!-- 生成动态谐波责任数据 -->
+                            <div class="box boxTab" v-loading="loading1">
+                                <MyEChart :options="item.dynamicOptions" style="flex: 1" v-if="item.showDynamic" />
+                                <div style="width: 500px">
+                                    <vxe-table
+                                        v-if="item.showDynamic"
+                                        ref="tableRef"
+                                        :data="item.dynamicData"
+                                        height="auto"
+                                        v-bind="defaultAttribute"
+                                    >
+                                        <vxe-column field="customerName" title="用户名(用户号)"></vxe-column>
+                                        <vxe-column field="responsibilityData" title="责任数据(%)" width="120">
+                                            <template v-slot="{ row }">
+                                                {{ Math.floor(row.responsibilityData * 10000) / 10000 }}
+                                            </template>
+                                        </vxe-column>
+                                    </vxe-table>
+                                </div>
+                            </div>
                         </div>
                     </el-tab-pane>
                 </el-tabs>
@@ -112,14 +175,17 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { mainHeight } from '@/utils/layout'
 import 'splitpanes/dist/splitpanes.css'
 import { Splitpanes, Pane } from 'splitpanes'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
 import PointTree from '@/components/tree/pqs/pointTree.vue'
 import BackComponent from '@/components/icon/back/index.vue'
 import { harmonicOptions } from '@/utils/dictionary'
-import { userDataList } from '@/api/advance-boot/division'
+import { userDataList, getHistoryHarmData, getDynamicData, getResponsibilityData } from '@/api/advance-boot/division'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { formatDate } from '@/utils/formatTime'
-import { getHistoryHarmData } from '@/api/advance-boot/division'
+import { Edit } from '@element-plus/icons-vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { timeFormat } from '@/utils/common'
+import { yMethod } from '@/utils/echartMethod'
 defineOptions({
     name: 'division/compute'
 })
@@ -132,23 +198,29 @@ const size = ref(0)
 const showTabs = ref(false)
 const loadDataOptions: any = ref([])
 const form: any = reactive({
-    type: '0',
+    type: '1',
     index: [],
-    loadData: ''
+    loadDataId: ''
 })
+const code = ref(3)
+const xAxisData = ref([])
+const loading = ref(false)
+const loading1 = ref(false)
 const tabList: any = ref([])
 const activeName = ref(0)
+const xValue = ref('')
 const handleNodeClick = (data: any, node: any) => {
     if (data.level == 6) {
         dotList.value = data
     }
 }
 // 设置时间
+const timeFrame = ref(['', ''])
 // 处理日期禁用逻辑
 const handleDisabledDate = date => {
     // 定义时间边界
-    const startLimit = new Date(tabList.value[0].time[0]).getTime()
-    const endLimit = new Date(tabList.value[0].time[1]).setHours(23, 59, 59, 999)
+    const startLimit = new Date(timeFrame.value[0]).getTime() - 86400000 //向前推1天
+    const endLimit = new Date(timeFrame.value[1]).setHours(23, 59, 59, 999)
 
     // 如果日期不存在（选择今天时可能出现），不禁用
     if (!date) return false
@@ -156,16 +228,26 @@ const handleDisabledDate = date => {
     // 禁用 2025-08-01 之前和 2025-08-31 之后的日期
     return date.getTime() < startLimit || date.getTime() > endLimit
 }
+// 这是按钮变色
+const setCode = (num: number) => {
+    if (code.value == num) {
+        return (code.value = 3)
+    }
+    code.value = num
+}
 // 确定
 const submit = () => {
-    if (form.loadData == '') {
+    if (form.loadDataId == '') {
         return ElMessage.warning('请选择负荷数据')
     }
+    if (form.index.length == 0) {
+        return ElMessage.warning('请选择谐波次数')
+    }
 
     if (form.index.length == 0) {
         showTabs.value = false
     } else {
-        let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadData)[0]
+        let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadDataId)[0]
         showTabs.value = true
         let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b)
         tabList.value = []
@@ -179,24 +261,311 @@ const submit = () => {
                     limit: '',
                     time1: '',
                     time2: ''
-                }
+                },
+                showEcahr: 3, //1显示echart 2显示无数据  3什么都没有
+                options: {},
+                dynamicOptions: {}, //动态echarts
+                dynamicList: {}, //动态echarts
+                showDynamic: false //动态执行展示
             })
+            timeFrame.value = [timeList.startTime, timeList.endTime]
         })
-        // tabList.value =
+        code.value = 3
         activeName.value = 0
     }
 }
 // 执行
-const execute = (item: any, index: number) => {
-    getHistoryHarmData({
+const execute = async (item: any, index: number) => {
+    tabList.value[activeName.value].showDynamic = false
+    loading.value = true
+    await getHistoryHarmData({
         searchBeginTime: item.time[0],
         searchEndTime: item.time[1],
         type: form.type,
         time: item.key,
-        // userDataId:form.loadData,
         lineId: dotList.value.id
-    }).then((res: any) => {})
-    tabList.value[index].showExecute = true
+    })
+        .then((res: any) => {
+            let [min, max] = yMethod(res.data.historyData.map((item: any) => item.value + 0.1))
+            xAxisData.value = res.data.historyData.map((item: any) => item.time)
+            tabList.value[index].options = {
+                title: {
+                    text: ''
+                },
+                xAxis: {
+                    type: 'time',
+                    name: '时间',
+                    axisLabel: {
+                        formatter: {
+                            day: '{MM}-{dd}',
+                            month: '{MM}',
+                            year: '{yyyy}'
+                        }
+                    }
+                },
+                tooltip: {
+                    formatter(params: any) {
+                        xValue.value = params[0].value[0]
+                        let str = params[0].value[0] + '<br/>'
+                        for (let i = 0; i < params.length; i++) {
+                            str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
+                        }
+
+                        return str
+                    }
+                },
+                grid: {
+                    top: 30
+                },
+                legend: {
+                    show: false
+                },
+                yAxis: {
+                    name: form.type == 1 ? '%' : 'A',
+                    min: min,
+                    max: max
+                },
+                toolbox: {
+                    show: false
+                },
+
+                series: [
+                    {
+                        name: item.key + (form.type == 1 ? '次谐波电压' : '次谐波电流'),
+                        data: res.data.historyData.map((item: any) => [
+                            item.time,
+                            Math.floor(item.value * 10000) / 10000
+                        ]),
+                        type: 'line',
+                        symbol: 'none',
+                        markLine: {
+                            symbol: 'none', // 去除箭头
+                            label: {
+                                show: false // 隐藏标签
+                            },
+                            data: [
+                                {
+                                    yAxis: ''
+                                },
+                                {
+                                    xAxis: ''
+                                },
+                                {
+                                    xAxis: ''
+                                }
+                            ],
+                            // 样式配置
+                            lineStyle: {
+                                color: 'red',
+                                type: 'dashed' // 虚线
+                            }
+                        }
+                    }
+                ]
+            }
+            tabList.value[index].showEcahr = 1
+            loading.value = false
+        })
+        .catch(() => {
+            tabList.value[index].showEcahr = 2
+            loading.value = false
+        })
+}
+const resDataId = ref('')
+// 生成动态谐波责任数据
+const generateFn = async () => {
+    loading1.value = true
+    await getDynamicData({
+        lineId: dotList.value.id,
+        searchBeginTime: tabList.value[activeName.value].time[0],
+        searchEndTime: tabList.value[activeName.value].time[1],
+        time: tabList.value[activeName.value].key,
+        type: form.type,
+        userDataId: form.loadDataId
+    })
+        .then((res: any) => {
+            resDataId.value = res.data.responsibilityDataIndex
+            tabList.value[activeName.value].dynamicData = res.data.responsibilities
+            let [min, max] = yMethod(res.data.datas.map((item: any) => item.valueDatas).flat())
+            let series: any[] = []
+            let time: any[] = res.data.timeDatas.map((item: any) => timeFormat(item))
+            res.data.datas.forEach((item: any) => {
+                series.push({
+                    name: item.customerName,
+                    data: item.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
+                    type: 'line',
+                    symbol: 'none'
+                })
+            })
+
+            tabList.value[activeName.value].dynamicOptions = {
+                title: {
+                    text: ''
+                },
+                xAxis: {
+                    type: 'time',
+                    name: '时间',
+                    axisLabel: {
+                        formatter: {
+                            day: '{MM}-{dd}',
+                            month: '{MM}',
+                            year: '{yyyy}'
+                        }
+                    }
+                },
+                tooltip: {
+                    formatter(params: any) {
+                        let str = params[0].value[0] + '<br/>'
+                        for (let i = 0; i < params.length; i++) {
+                            str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
+                        }
+
+                        return str
+                    }
+                },
+                grid: {
+                    top: 30
+                },
+                legend: {
+                    show: false
+                },
+                yAxis: {
+                    name: form.type == 1 ? '%' : 'A',
+                    min: min,
+                    max: max
+                },
+                toolbox: {
+                    show: false
+                },
+
+                options: {
+                    series: series
+                }
+            }
+
+            tabList.value[activeName.value].showDynamic = true
+        })
+        .catch(() => {
+            loading1.value = false
+        })
+    loading1.value = false
+}
+// 生成指标
+const generateMetrics = async () => {
+    if (tabList.value[activeName.value].form.limit == '') return ElMessage.warning('请选择限值!')
+    if (tabList.value[activeName.value].form.time1 == '') return ElMessage.warning('请选择时间一!')
+    if (tabList.value[activeName.value].form.time2 == '') return ElMessage.warning('请选择时间二!')
+    loading1.value = true
+    await getResponsibilityData({
+        limitEndTime: tabList.value[activeName.value].form.time2,
+        limitStartTime: tabList.value[activeName.value].form.time1,
+        limitValue: tabList.value[activeName.value].form.limit,
+        resDataId: resDataId.value,
+        time: tabList.value[activeName.value].key,
+        type: form.type
+    })
+        .then((res: any) => {
+            tabList.value[activeName.value].dynamicData = res.data.responsibilities
+            let [min, max] = yMethod(res.data.datas.map((item: any) => item.valueDatas).flat())
+            let series: any[] = []
+            let time: any[] = res.data.timeDatas.map((item: any) => timeFormat(item))
+            res.data.datas.forEach((item: any) => {
+                series.push({
+                    name: item.customerName,
+                    data: item.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
+                    type: 'line',
+                    symbol: 'none'
+                })
+            })
+
+            tabList.value[activeName.value].dynamicOptions = {
+                title: {
+                    text: ''
+                },
+                xAxis: {
+                    type: 'time',
+                    name: '时间',
+                    axisLabel: {
+                        formatter: {
+                            day: '{MM}-{dd}',
+                            month: '{MM}',
+                            year: '{yyyy}'
+                        }
+                    }
+                },
+                tooltip: {
+                    formatter(params: any) {
+                        let str = params[0].value[0] + '<br/>'
+                        for (let i = 0; i < params.length; i++) {
+                            str = str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
+                        }
+
+                        return str
+                    }
+                },
+                grid: {
+                    top: 30
+                },
+                legend: {
+                    show: false
+                },
+                yAxis: {
+                    name: form.type == 1 ? '%' : 'A',
+                    min: min,
+                    max: max
+                },
+                toolbox: {
+                    show: false
+                },
+
+                options: {
+                    series: series
+                }
+            }
+
+            tabList.value[activeName.value].showDynamic = true
+        })
+        .catch(() => {
+            loading1.value = false
+        })
+    loading1.value = false
+}
+// 监听echart点击
+const group = (chart: any, myChartDom: any) => {
+    myChartDom.addEventListener('click', function (event: any) {
+        // 获取点击位置相对于图表容器的坐标
+        const rect = myChartDom.getBoundingClientRect()
+        const x = event.clientX - rect.left
+        const y = event.clientY - rect.top
+        const pointInPixel = [x, y]
+        // 转换为逻辑坐标（相对于图表坐标系）
+        const pointInGrid = chart.convertFromPixel({ gridIndex: 0 }, pointInPixel)
+        // 计算X轴和Y轴的对应数据
+
+        // 处理X轴数据（分类轴）
+
+        // 处理Y轴数据（数值轴）
+        let yValue = pointInGrid[1].toFixed(4)
+        // xValue = timeFormat(pointInGrid[0].toFixed(0) - 0)
+        if (code.value == 0) {
+            tabList.value[activeName.value].form.limit = yValue
+            tabList.value[activeName.value].options.series[0].markLine.data[0].yAxis = yValue
+            chart.setOption(tabList.value[activeName.value].options)
+        } else if (code.value == 1) {
+            tabList.value[activeName.value].form.time1 = xValue.value
+            tabList.value[activeName.value].options.series[0].markLine.data[1].xAxis = xValue.value
+            chart.setOption(tabList.value[activeName.value].options)
+        } else if (code.value == 2) {
+            tabList.value[activeName.value].form.time2 = xValue.value
+            tabList.value[activeName.value].options.series[0].markLine.data[2].xAxis = xValue.value
+            chart.setOption(tabList.value[activeName.value].options)
+        }
+        // 控制台输出详细信息
+        // console.log('点击事件详情:', {
+        //     X轴数据: xValue,
+        //     Y轴数据: yValue
+        // })
+    })
 }
 
 onMounted(() => {
@@ -229,4 +598,32 @@ onMounted(() => {
         width: 300px;
     }
 }
+.monitoring-point {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--el-color-primary);
+}
+.box {
+    // height: 280px;
+    height: calc((100vh - 370px) / 2);
+}
+.boxTab {
+    display: flex;
+}
+.harmonicButton {
+    height: 42px;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+:deep(.el-tabs__content) {
+    height: calc(100vh - 265px);
+}
+:deep(.el-input-group__append, .el-input-group__prepend) {
+    background-color: #ffffff00;
+}
+:deep(.frontBox) {
+    background-color: var(--el-color-primary) !important;
+    color: #fff !important;
+}
 </style>

src/views/pqs/harmonicMonitoring/detailed/division/components/detail.vue

@@ -1,53 +1,175 @@
-<!-- 详情 -->
-<template>
-    <div class="default-main" :style="height">
-        <div class="title">
-            详情
-            <div style="font-size: 14px;font-weight: 500;">
-                {{ query.name || '' }}
-                <back-component />
-            </div>
-        </div>
-
-
-
-
-    </div>
-
-</template>
-<script setup lang='ts'>
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
-import { mainHeight } from '@/utils/layout'
-import { displayHistoryData } from '@/api/advance-boot/division';
-import BackComponent from '@/components/icon/back/index.vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { id } from 'element-plus/es/locale';
-const { query } = useRoute() // 查询参数
-const dotList: any = ref({})
-const height = mainHeight(20)
-
-const tabList: any = ref([])
-const init = () => {
-    displayHistoryData({
-            id: query.id,
-            time:query.time
-        })
-
-
-
-}
-
-onMounted(() => {
-    init()
-})
-</script>
-<style lang="scss" scoped>
-.title {
-    display: flex;
-    justify-content: space-between;
-    padding: 10px;
-    font-size: 16px;
-    font-weight: 550;
-}
-</style>
+<!-- 详情 -->
+<template>
+    <div class="default-main pd10">
+        <div class="title">
+            <!-- <div style="font-size: 14px; font-weight: 500">
+               
+            </div> -->
+            <span class="monitoring-point">{{ query.name || '' }}</span>
+            <back-component />
+        </div>
+
+        <el-tabs type="border-card" v-model="activeName" @tab-change="generateFn">
+            <el-tab-pane
+                v-for="(item, index) in tabList"
+                :key="index"
+                :label="item.name + '次谐波'"
+                :style="height"
+                :name="index"
+                v-loading="loading"
+            >
+                <div style="height: calc(100vh - 250px); overflow-y: auto">
+                    <div
+                        class="box boxTab mb10"
+                        :style="{
+                            height: `calc((100vh - 280px) / ${
+                                item.list.length == 0 ? 1 : item.list.length > 3 ? 3 : item.list.length
+                            })`
+                        }"
+                        v-for="(value, i) in item.dynamicOptions"
+                        :key="i"
+                    >
+                        <MyEChart :options="item.dynamicOptions[i]" style="flex: 1" />
+                        <div style="width: 500px">
+                            <vxe-table ref="tableRef" :data="item.list[i]" height="auto" v-bind="defaultAttribute">
+                                <vxe-column field="customerName" title="用户名(用户号)"></vxe-column>
+                                <vxe-column field="responsibilityData" title="责任数据(%)" width="120">
+                                    <template v-slot="{ row }">
+                                        {{ Math.floor(row.responsibilityData * 10000) / 10000 }}
+                                    </template>
+                                </vxe-column>
+                            </vxe-table>
+                        </div>
+                    </div>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import BackComponent from '@/components/icon/back/index.vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { timeFormat } from '@/utils/common'
+import { yMethod } from '@/utils/echartMethod'
+import { displayHistoryData } from '@/api/advance-boot/division'
+const { query } = useRoute() // 查询参数
+const height = mainHeight(155)
+const activeName = ref(0)
+const tabList: any = ref([])
+
+const loading: any = ref(false)
+const init = () => {
+    let data = (Array.isArray(query.time) ? query.time[0] : query.time)?.split(',') ?? []
+    tabList.value = []
+    data.forEach((item: any) => {
+        tabList.value.push({
+            name: item,
+            dynamicOptions: [],
+            list: []
+        })
+    })
+    activeName.value = 0
+    generateFn(0)
+}
+
+// 生成动态谐波责任数据
+const generateFn = async (e: any) => {
+    if (tabList.value[e].dynamicOptions.length != 0) return
+
+    loading.value = true
+    await displayHistoryData({
+        id: query.id,
+        time: tabList.value[e].name
+    })
+        .then((res: any) => {
+            res.data.forEach((item: any) => {
+                tabList.value[e].list.push(item.responsibilities)
+
+                let [min, max] = yMethod(item.datas.map((k: any) => k.valueDatas).flat())
+                let series: any[] = []
+                let time: any[] = item.timeDatas.map((k: any) => timeFormat(k))
+                item.datas.forEach((k: any) => {
+                    series.push({
+                        name: k.customerName,
+                        data: k.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
+                        type: 'line',
+                        symbol: 'none'
+                    })
+                })
+                tabList.value[e].dynamicOptions.push({
+                    title: {
+                        text: `时间：${item.limitSTime} 至${item.limitETime}　限值：${item.limitValue}`
+                    },
+                    xAxis: {
+                        type: 'time',
+                        name: '时间',
+                        axisLabel: {
+                            formatter: {
+                                day: '{MM}-{dd}',
+                                month: '{MM}',
+                                year: '{yyyy}'
+                            }
+                        }
+                    },
+                    tooltip: {
+                        formatter(params: any) {
+                            let str = params[0].value[0] + '<br/>'
+                            for (let i = 0; i < params.length; i++) {
+                                str =
+                                    str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
+                            }
+
+                            return str
+                        }
+                    },
+                    grid: {
+                        top: 30
+                    },
+                    legend: {
+                        show: false
+                    },
+                    yAxis: {
+                        min: min,
+                        max: max
+                    },
+                    toolbox: {
+                        show: false
+                    },
+
+                    options: {
+                        series: series
+                    }
+                })
+            })
+        })
+        .catch(() => {
+            loading.value = false
+        })
+    loading.value = false
+}
+
+onMounted(() => {
+    init()
+})
+</script>
+<style lang="scss" scoped>
+.title {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    padding: 10px;
+    font-size: 16px;
+    font-weight: 550;
+    color: var(--el-color-primary);
+}
+.monitoring-point {
+    font-size: 14px;
+    font-weight: 700;
+}
+.boxTab {
+    display: flex;
+}
+</style>

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

@@ -63,8 +63,6 @@ const tableStore = new TableStore({
 
                     click: row => {
                     console.log("🚀 ~ row:", row)
-
-                        // push('/admin/division/detail')
                         push({
                             path: "/admin/division/detail",
                             query: {

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

@@ -0,0 +1,493 @@
+<template>
+  <div class="default-main">
+    <TableHeader datePicker  ref="TableHeaderRef"  @selectChange="handleTableHeaderSelectChange">
+      <template #select>
+       
+        <el-form-item label="区域">
+           <el-cascader 
+            v-bind="$attrs" 
+            :options="areOptions" 
+            :props="cascaderProps" 
+            v-model="selectedArea"
+            @change="handleFilterChange"
+            />
+        </el-form-item>
+        <el-form-item label="统计类型">
+          <el-select
+            v-model="tableStore.table.params.statisticalType"
+            value-key="id"
+            placeholder="请选择统计类型"
+            @change="handleStatisticalTypeChange"
+          >
+            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电网标志">
+          <el-select 
+            v-model="tableStore.table.params.powerFlag" 
+            placeholder="请选择电网标志"
+            @change="handleFilterChange"
+          >
+            <el-option label="全部" value="0"></el-option>
+            <el-option label="电网侧" value="1"></el-option>
+            <el-option label="非电网侧" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="筛选">
+          <el-input 
+            v-model="searchKeyword" 
+            placeholder="请输入变电站/终端/监测点"
+            clearable
+            @input="handleFilterChange"
+            :show-word-limit=true
+            :maxlength="32"
+          />
+        </el-form-item>
+      </template>
+      <template #operation>
+        <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
+      </template>
+    </TableHeader>
+      
+        <div v-loading="tableStore.table.loading"  class="main-container">
+          <vxe-table
+            class="full-height-table"
+            ref="positioningtableRef"
+            auto-resize
+            :data="tableStore.table.data"
+            v-bind="defaultAttribute"
+            :height="tableHeight"
+            resizable
+            show-overflow
+          >
+            <vxe-column title="序号" width="80" type="seq" align="center"></vxe-column>
+            <vxe-column field="gdName" title="供电公司" align="center" min-width="120"></vxe-column>
+            <vxe-column field="subStationName" :show-overflow="true" title="变电站" align="center" min-width="150" ></vxe-column>
+            <vxe-column field="devName" title="终端名称" align="center" min-width="120"></vxe-column>
+            <vxe-column field="devType" title="终端型号" align="center" min-width="150" ></vxe-column>
+            <vxe-column field="loginTime" title="投运时间" align="center" min-width="120"></vxe-column>
+            <vxe-column field="lineName" title="监测点名称" align="center" min-width="150"></vxe-column>
+            <vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column>
+            <vxe-column field="lineVoltage" title="监测点电压等级" align="center" min-width="120"></vxe-column>
+            <vxe-column field="loadType" title="干扰源类型" align="center" min-width="120"></vxe-column>
+            <vxe-column field="objName" title="监测对象名称" align="center" min-width="150"></vxe-column>
+            <vxe-column field="interval" title="统计间隔" align="center" min-width="100"></vxe-column>
+            <vxe-column field="onlineRate" title="在线率(%)" align="center" min-width="100"></vxe-column>
+            <vxe-column field="integrity" title="完整率(%)" align="center" min-width="100"></vxe-column>
+            <vxe-column field="harmonicValue" :title="harmonicValueTitle"  align="center" min-width="120"></vxe-column>
+            <vxe-column field="upCounts" title="暂升次数(次)" align="center" min-width="100"></vxe-column>
+            <vxe-column field="downCounts" title="电压暂降(次)" align="center" min-width="100"></vxe-column>
+            <vxe-column field="breakCounts" title="短时中断(次)" align="center" min-width="100"></vxe-column>
+            <vxe-column field="monitorId" title="一类监测点" align="center" min-width="120" :formatter="formatMonitorId"></vxe-column>
+          </vxe-table>
+        </div>
+          <!-- 修改分页控件 -->
+            <div class="pagination-container">
+                <el-pagination
+                    :current-page="tableStore.table.params.pageNum"
+                    :page-size="tableStore.table.params.pageSize"
+                    :page-sizes="[10, 20, 50, 100]"
+                    background
+                    layout="sizes, total, prev, pager, next, jumper"
+                    :total="tableStore.table.total"
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                ></el-pagination>
+            </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, provide, onBeforeUnmount, computed, reactive, watch } from 'vue'
+import TableStore from '@/utils/tableStore'
+import TableHeader from '@/components/table/header/index.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { useDictData } from '@/stores/dictData'
+import { debounce } from 'lodash-es'
+
+defineOptions({
+    name: 'harmonic-boot/qydetailedAnalysis/pollutionReport'
+})
+
+const dictData = useDictData()
+const options = dictData.getBasicData('Pollution_Calc')
+const tableHeight = ref(500) // 默认高度
+const positioningtableRef = ref()
+// 添加区域选择的响应式变量
+const selectedArea = ref()
+const areOptions:any = dictData.state.area
+const allData = ref<PollutionItem[]>([])
+const TableHeaderRef = ref()
+// 添加响应式标题变量
+const harmonicValueTitle = ref('谐波电压污染值')
+const searchKeyword = ref('')
+
+const cascaderProps = {
+    label: 'name',
+    value: 'id',
+    checkStrictly: true,
+    emitPath: false
+}
+
+// 存储所有数据
+interface PollutionItem {
+  gdName?: string
+  subStationName?: string
+  devName?: string
+  lineName?: string
+  powerFlag?: string
+}
+
+// 格式化一类监测点字段
+const formatMonitorId = (row: any) => {
+  return row.row.monitorId || '/'
+}
+
+// 处理 TableHeader 展开/收起事件
+const handleTableHeaderSelectChange = (isExpanded: boolean) => {
+  if(isExpanded){
+    tableHeight.value = tableHeight.value - 55
+  }else{
+    tableHeight.value = tableHeight.value + 55
+  }
+  
+};
+
+const calculateTableHeight = () => {
+    const windowHeight = window.innerHeight
+    const headerHeight = 120
+    const paginationHeight = 80  // 增加分页控件高度预留
+    const padding = 30          // 增加padding避免被遮挡
+    const calculatedHeight = windowHeight - headerHeight - paginationHeight - padding
+    tableHeight.value = Math.max(calculatedHeight, 300)
+}
+
+// 防抖处理窗口大小变化
+const debouncedCalculateTableHeight = debounce(() => {
+    calculateTableHeight()
+}, 300)
+
+// 计算过滤后的数据
+const filteredData = computed(() => {
+  let result = [...allData.value]
+
+  // 区域过滤
+  if (selectedArea.value) {
+    // 查找匹配的区域名称
+    let areaName = ''
+    let areaLevel = -1
+    const findAreaName = (areas: any[]) => {
+      for (const area of areas) {
+        
+        if (area.id === selectedArea.value) {
+          areaName = area.name
+          areaLevel = area.level !== undefined ? area.level : -1
+          break
+        }
+        if (area.children && area.children.length > 0) {
+          findAreaName(area.children)
+        }
+      }
+    }
+    findAreaName(areOptions)
+    
+    // 根据区域名称过滤数据，但只有当层级大于1时才过滤
+     if (areaName && areaLevel > 1) {
+        result = result.filter(item => item.gdName && item.gdName.includes(areaName))
+    }
+  }
+
+    // 电网标志过滤
+  if (tableStore.table.params.powerFlag === '1') {
+    // 电网侧
+    result = result.filter(item => item.powerFlag && !item.powerFlag.includes('非'))
+  } else if (tableStore.table.params.powerFlag === '2') {
+    // 非电网侧
+    result = result.filter(item => item.powerFlag && item.powerFlag.includes('非'))
+  }
+  // '0' 表示全部，不过滤
+
+  // 统一搜索过滤
+  if (searchKeyword.value) {
+    const keyword = searchKeyword.value.toLowerCase()
+    result = result.filter(item => 
+      (item.subStationName && item.subStationName.toLowerCase().includes(keyword)) ||
+      (item.devName && item.devName.toLowerCase().includes(keyword)) ||
+      (item.lineName && item.lineName.toLowerCase().includes(keyword))
+    )
+  }
+  
+  return result
+})
+
+// 计算当前页数据
+const currentPageData = computed(() => {
+  const pageSize = tableStore.table.params.pageSize
+  const pageNum = tableStore.table.params.pageNum
+  const start = (pageNum - 1) * pageSize
+  const end = start + pageSize
+  return filteredData.value.slice(start, end)
+})
+
+// 更新总条数
+const updateTotal = computed(() => {
+  return filteredData.value.length
+})
+
+const tableStore = new TableStore({
+    url: '/harmonic-boot/PollutionSubstation/downPollutionLineCalc',
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {
+        //delete tableStore.table.params.statisticalType
+        delete tableStore.table.params.deptIndex
+        delete tableStore.table.params.interval
+        delete tableStore.table.params.searchEndTime
+        delete tableStore.table.params.searchBeginTime
+        delete tableStore.table.params.timeFlag
+    },
+    loadCallback: () => {
+        // 将所有数据存储到 allData 中
+        allData.value = tableStore.table.data || []
+        // 更新总条数
+        tableStore.table.total = updateTotal.value
+        // 更新当前页数据
+        tableStore.table.data = currentPageData.value
+    }
+})
+
+provide('tableStore', tableStore)
+
+// 监听区域选项变化，设置默认值
+watch(
+  () => areOptions,
+  (newOptions) => {
+    if (newOptions && newOptions.length > 0) {
+      // 设置默认选中第一项
+      selectedArea.value = newOptions[0].id
+      tableStore.table.params.id = newOptions[0].id
+    }
+  },
+  { immediate: true }
+)
+
+// 初始化统计类型
+watch(
+  () => options,
+  (newOptions) => {
+    if (newOptions && newOptions.length > 0) {
+      // 检查是否已经设置了统计类型
+      if (!tableStore.table.params.statisticalType) {
+        tableStore.table.params.statisticalType = newOptions[0]
+        tableStore.table.params.ids = [newOptions[0].id]
+      }
+    }
+  },
+  { immediate: true }
+)
+
+
+tableStore.table.params.powerFlag = "0"
+tableStore.table.params.isUpToGrid = 0
+tableStore.table.params.type = 1
+
+// 监听统计类型变化，同步更新ids
+const handleStatisticalTypeChange = (newVal: { id: any }) => {
+  console.log("统计类型变化", newVal)
+  if (newVal) {
+    tableStore.table.params.ids = [newVal.id]
+    // 根据统计类型动态更新标题
+    if (newVal.name) {
+      harmonicValueTitle.value = newVal.name + '污染值'
+    }
+  }
+  // 重新调用接口
+  tableStore.index()
+}
+
+// 处理过滤条件变化
+const handleFilterChange = () => {
+  // 重置分页到第一页
+  tableStore.table.params.pageNum = 1
+  // 更新数据和总条数
+  tableStore.table.data = currentPageData.value
+  tableStore.table.total = updateTotal.value
+}
+
+// 分页事件处理
+const handleSizeChange = (val: number) => {
+  tableStore.table.params.pageSize = val
+  tableStore.table.params.pageNum = 1
+  tableStore.table.data = currentPageData.value
+  tableStore.table.total = updateTotal.value
+}
+
+const handleCurrentChange = (val: number) => {
+  tableStore.table.params.pageNum = val
+  tableStore.table.data = currentPageData.value
+  tableStore.table.total = updateTotal.value
+}
+
+// 导出
+const exportEvent = () => {
+  // 获取当前过滤后的所有数据
+  const allFilteredData = filteredData.value;
+  
+  // 使用 vxe-table 的导出功能
+  positioningtableRef.value.exportData({
+    filename: '污染值报告',
+    sheetName: 'Sheet1',
+    type: 'xlsx',
+    useStyle: true,
+    data: allFilteredData,
+    columnFilterMethod: function (column, $columnIndex) {
+      return !(column.$columnIndex === 0)
+    }
+  })
+}
+
+onMounted(() => {
+  tableStore.index()
+
+
+  calculateTableHeight()
+  window.addEventListener('resize', debouncedCalculateTableHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', debouncedCalculateTableHeight)
+})
+</script>
+
+<style scoped lang="scss">
+.default-main {
+    height: calc(100vh - 20px); /* 减去一些边距避免被任务栏遮挡 */
+    display: flex;
+    flex-direction: column;
+}
+
+.table-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+.full-height-table {
+    flex: 1;
+    overflow: hidden;
+}
+
+:deep .vxe-table {
+    height: 100% !important;
+    overflow: hidden !important;
+}
+
+:deep .vxe-table--body-wrapper {
+    overflow: auto !important;
+}
+
+.pagination-container {
+    flex: 0 0 auto; /* 不伸缩，保持固定高度 */
+    display: flex;
+    justify-content: center; /* 居中对齐 */
+    align-items: center;
+    min-height: 60px;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-top: 1px solid #ebeef5;
+    z-index: 100; /* 提高层级确保可见 */
+    position: relative; /* 确保定位上下文 */
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+:deep .el-pagination {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: 100%;
+    
+    .el-pagination__sizes {
+        .el-select {
+            min-width: 100px;
+            margin-right: 10px;
+        }
+    }
+    
+    .el-pagination__total {
+        margin-right: auto; /* 关键：将总共条数推到左侧 */
+        white-space: nowrap;
+    }
+    
+    /* 将除了 sizes 和 total 之外的所有元素都推到最右边 */
+    .btn-prev, 
+    .btn-pager, 
+    .btn-next, 
+    .el-pagination__jump {
+        margin-left: auto;
+    }
+    
+    .btn-prev {
+        margin-right: 5px;
+    }
+    
+    .btn-next {
+        margin-left: 5px;
+    }
+    
+    .el-pagination__jump {
+        margin-left: 10px;
+    }
+    
+    .el-pagination__editor {
+        width: 50px;
+        margin: 0 5px;
+    }
+}
+
+/* 响应式处理 */
+@media screen and (max-width: 768px) {
+    .pagination-container {
+        padding: 8px 10px;
+        min-height: 50px;
+    }
+    
+    :deep .el-pagination {
+        .el-pagination__sizes {
+            .el-select {
+                min-width: 80px;
+            }
+        }
+        
+        .el-pagination__total {
+            font-size: 12px;
+        }
+        
+        .el-pagination__jump {
+            font-size: 12px;
+        }
+    }
+}
+
+@media screen and (max-width: 480px) {
+    :deep .el-pagination {
+        .el-pagination__sizes {
+            display: none;
+        }
+        
+        .el-pagination__total {
+            display: none;
+        }
+        
+        .btn-pager {
+            display: none;
+        }
+        
+        .el-pagination__jump {
+            display: none;
+        }
+    }
+}
+</style>

src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue

@@ -1,202 +1,211 @@
-<template>
-    <div style="display: flex; flex-direction: column; height: 100%">
-        <TableHeader ref="TableHeaderRef" :showSearch="false">
-            <template v-slot:select>
-                <el-form-item label="日期">
-                    <DatePicker ref="datePickerRef"></DatePicker>
-                </el-form-item>
-                <el-form-item label="对比">
-                    <el-select v-model="searchType" clearable placeholder="可选择同比、环比">
-                        <el-option
-                            v-for="item in searchTypeOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-            </template>
-            <template v-slot:operation>
-                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </template>
-        </TableHeader>
-
-        <div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
-            <div style="flex: 1">
-                <my-echart :options="options1" />
-            </div>
-            <div style="flex: 1">
-                <my-echart :options="options2" />
-            </div>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { nextTick, onMounted, reactive, ref } from 'vue'
-import DatePicker from '@/components/form/datePicker/index.vue'
-import MyEchart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/stores/monitoringPoint'
-import { getProbabilityDistribution } from '@/api/event-boot/monitor'
-import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
-import TableHeader from '@/components/table/header/index.vue'
-import TableStore from '@/utils/tableStore'
-const tableStore = new TableStore({
-    url: '',
-    method: 'POST',
-    column: []
-})
-const datePickerRef = ref()
-const monitoringPoint = useMonitoringPoint()
-const loading = ref(true)
-const formData = reactive({
-    id: monitoringPoint.state.lineId,
-    searchBeginTime: '',
-    searchEndTime: '',
-    periodBeginTime: '',
-    periodEndTime: ''
-})
-const searchType = ref('')
-const searchTypeOptions = [
-    {
-        label: '同比',
-        value: '1'
-    },
-    {
-        label: '环比',
-        value: '2'
-    }
-]
-const options1 = ref({})
-const options2 = ref({})
-onMounted(() => {
-    init()
-})
-const init = () => {
-    loading.value = true
-    formData.id = monitoringPoint.state.lineId
-    formData.searchBeginTime = datePickerRef.value.timeValue[0]
-    formData.searchEndTime = datePickerRef.value.timeValue[1]
-    if (searchType.value == '1') {
-        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
-            formData.searchBeginTime,
-            formData.searchEndTime
-        )
-    } else if (searchType.value == '2') {
-        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
-            formData.searchBeginTime,
-            formData.searchEndTime
-        )
-    } else {
-        formData.periodBeginTime = ''
-        formData.periodEndTime = ''
-    }
-    Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
-        .then((res: any) => {
-            handlerOptions1(res[0].data)
-            handlerOptions2(res[1].data)
-            loading.value = false
-        })
-        .catch(() => {
-            loading.value = false
-        })
-}
-const handlerOptions1 = (data: any) => {
-    options1.value = {
-        title: {
-            text: '运行状态'
-        },
-        legend: {
-            show: false
-        },
-        tooltip: {
-            formatter: function (params: any) {
-                var res = params[0].data[0] + '<br/>终端运行状态为：'
-                var texts = ''
-                if (params[0].data[1] === 2 || params[0].data[1] === '2') {
-                    texts = '退出'
-                } else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
-                    texts = '中断'
-                } else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
-                    texts = '正常'
-                }
-                res = res + texts
-                return res
-            }
-        },
-        xAxis: {
-            // type: 'category',
-            // data: data.updateTime
-            type: 'time',
-            name: '时间',
-            //
-            axisLabel: {
-                formatter: {
-                    day: '{MM}-{dd}',
-                    month: '{MM}',
-                    year: '{yyyy}'
-                }
-            }
-        },
-        yAxis: {
-            name: '状态',
-            type: 'value',
-            axisLabel: {
-                // 这里重新定义就可以
-                formatter: function (value: number) {
-                    var texts = []
-                    if (value === 2) {
-                        texts.push('退出')
-                    } else if (value === 0) {
-                        texts.push('中断')
-                    } else if (value === 1) {
-                        texts.push('正常')
-                    }
-                    return texts
-                }
-            }
-        },
-        series: [
-            {
-                name: '中断运行状态',
-                data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
-                type: 'line',
-                step: 'end'
-            }
-        ]
-    }
-}
-const handlerOptions2 = (data: any) => {
-    options2.value = {
-        title: {
-            text: '在线率和完整性'
-        },
-        xAxis: {
-            type: 'category',
-            data: formData.periodBeginTime
-                ? [
-                      `${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
-                      `${formData.periodBeginTime} 至 ${formData.periodEndTime}`
-                  ]
-                : [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
-        },
-        yAxis: {
-            name: '%',
-            type: 'value'
-        },
-        series: [
-            {
-                name: '在线率',
-                data: data.onlineRateData,
-                type: 'bar'
-            },
-            {
-                name: '完整性',
-                data: data.integrityData,
-                type: 'bar'
-            }
-        ]
-    }
-}
-provide('tableStore', tableStore)
-</script>
-<style></style>
+<template>
+    <div style="display: flex; flex-direction: column; height: 100%">
+        <TableHeader ref="TableHeaderRef" :showSearch="false">
+            <template v-slot:select>
+                <el-form-item label="日期">
+                    <DatePicker ref="datePickerRef"></DatePicker>
+                </el-form-item>
+                <el-form-item label="对比">
+                    <el-select v-model="searchType" clearable placeholder="可选择同比、环比">
+                        <el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
+                            :value="item.value" />
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
+            </template>
+        </TableHeader>
+
+        <div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
+            <div style="flex: 1">
+                <my-echart :options="options1" />
+            </div>
+            <div style="flex: 1">
+                <my-echart :options="options2" />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { getProbabilityDistribution } from '@/api/event-boot/monitor'
+import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import TableHeader from '@/components/table/header/index.vue'
+import TableStore from '@/utils/tableStore'
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    id: monitoringPoint.state.lineId,
+    searchBeginTime: '',
+    searchEndTime: '',
+    periodBeginTime: '',
+    periodEndTime: ''
+})
+const searchType = ref('')
+const searchTypeOptions = [
+    {
+        label: '同比',
+        value: '1'
+    },
+    {
+        label: '环比',
+        value: '2'
+    }
+]
+const options1 = ref({})
+const options2 = ref({})
+onMounted(() => {
+    init()
+})
+const init = () => {
+    loading.value = true
+    formData.id = monitoringPoint.state.lineId
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    if (searchType.value == '1') {
+        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
+            formData.searchBeginTime,
+            formData.searchEndTime
+        )
+    } else if (searchType.value == '2') {
+        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
+            formData.searchBeginTime,
+            formData.searchEndTime
+        )
+    } else {
+        formData.periodBeginTime = ''
+        formData.periodEndTime = ''
+    }
+    Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
+        .then((res: any) => {
+            handlerOptions1(res[0].data)
+            handlerOptions2(res[1].data)
+            loading.value = false
+        })
+        .catch(() => {
+            loading.value = false
+        })
+}
+const handlerOptions1 = (data: any) => {
+    options1.value = {
+        title: {
+            text: '运行状态'
+        },
+        legend: {
+            show: false
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                var res = params[0].data[0] + '<br/>终端运行状态为：'
+                var texts = ''
+                if (params[0].data[1] === 2 || params[0].data[1] === '2') {
+                    texts = '退出'
+                } else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
+                    texts = '中断'
+                } else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
+                    texts = '正常'
+                }
+                res = res + texts
+                return res
+            }
+        },
+        xAxis: {
+            // type: 'category',
+            // data: data.updateTime
+            type: 'time',
+            name: '时间',
+            //
+            axisLabel: {
+                formatter: {
+                    day: '{MM}-{dd}',
+                    month: '{MM}',
+                    year: '{yyyy}'
+                }
+            }
+        },
+        yAxis: {
+            name: '状态',
+            type: 'value',
+            axisLabel: {
+                // 这里重新定义就可以
+                formatter: function (value: number) {
+                    var texts = []
+                    if (value === 2) {
+                        texts.push('退出')
+                    } else if (value === 0) {
+                        texts.push('中断')
+                    } else if (value === 1) {
+                        texts.push('正常')
+                    }
+                    return texts
+                }
+            }
+        },
+        series: [
+            {
+                name: '中断运行状态',
+                data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
+                type: 'line',
+                step: 'end'
+            }
+        ]
+    }
+}
+const handlerOptions2 = (data: any) => {
+    let title = ''
+    if (data.integrityData.some((item: any) => item > 100)) {
+        title = '数据存在异常，已进行转换处理'
+        data.integrityData = data.integrityData.map(item => {
+            return item > 100 ? 100 : item;
+        });
+    }
+
+    options2.value = {
+        title: {
+            text: '在线率和完整性',
+            subtext: title,
+            subtextStyle: {
+                color: 'red'  // 设置副标题颜色为红色
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: formData.periodBeginTime
+                ? [
+                    `${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
+                    `${formData.periodBeginTime} 至 ${formData.periodEndTime}`
+                ]
+                : [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
+        },
+        yAxis: {
+            name: '%',
+            type: 'value'
+        },
+        series: [
+            {
+                name: '在线率',
+                data: data.onlineRateData,
+                type: 'bar'
+            },
+            {
+                name: '完整性',
+                data: data.integrityData,
+                type: 'bar'
+            }
+        ]
+    }
+}
+provide('tableStore', tableStore)
+</script>
+<style></style>

src/views/pqs/qualityInspeection/panorama/components/map.vue

@@ -126,8 +126,11 @@ const LngLat = [
     }
 ]
 import { getAssessOverview } from '@/api/device-boot/panorama'
-narimap.publicKey =
-    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCRYFEiMdZVgY8+jIjx4GR1QbN7qVgCE0istwPZN8xRqdSV+hePUPIW1k9eCVh9gxIIWHAw2TfNZLb8l0Tmk9OH3XnZ009TNBjzZ2zWLrbjFQzgutKKI2JRLK+CaJbOZ0LiD78QnTo5Zk+ZuQBKgtyFJdp4T5gQS+Mnbj/c4EnK0QIDAQAB'
+// narimap.publicKey =
+//     'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCRYFEiMdZVgY8+jIjx4GR1QbN7qVgCE0istwPZN8xRqdSV+hePUPIW1k9eCVh9gxIIWHAw2TfNZLb8l0Tmk9OH3XnZ009TNBjzZ2zWLrbjFQzgutKKI2JRLK+CaJbOZ0LiD78QnTo5Zk+ZuQBKgtyFJdp4T5gQS+Mnbj/c4EnK0QIDAQAB'
+ narimap.publicKey =
+    'JBb74325ae94dc49358b7d699660b692'
+
 narimap.Require(
     [
         'PSRMap',

src/views/pqs/runManage/assessment/components/uese/addform.vue

@@ -116,6 +116,7 @@
                     
                     <el-input-number
                         v-else-if="item.field == 'powerFactor'"
+                        style="width: 100%"
                         v-model="form[item.field]"
                         :min="0.1"
                         :max="0.9"
@@ -123,15 +124,22 @@
                         :precision="1"
                         placeholder="请输入功率因数"
                         />
-
+                    <el-input-number
+                    
+                        v-else-if="item.field == 'flickerCoeff' || item.field == 's'"
+                        style="width: 100%"
+                        v-model="form[item.field]"
+                        show-word-limit
+                        :min="0"
+                        :max="99"
+                        placeholder="请输入值"
+                        />
                     <el-input-number
                         v-else-if="
                             item.field == 'transNum' ||
                             item.field == 'capacitorNum' ||
                             item.field == 'capacitorCapacity' ||
                             item.field == 'capacitorReactance' ||
-                            item.field == 'flickerCoeff' ||
-                            item.field == 's'||
                             item.field == 'transhighCapacity'||
                             item.field == 'transImpedance'||
                             item.field == 'nonlinearloadPower' ||
@@ -142,6 +150,7 @@
                         v-model="form[item.field]"
                         show-word-limit
                         :min="1"
+                        :max="9999"
                         placeholder="请输入值"
                     ></el-input-number>
 

src/views/pqs/voltageSags/sagGovern/businessUser/event/sags3D.vue

@@ -1,267 +1,267 @@
-<template>
-    <SecondSheet>
-        <div style='height: 100%; overflow: hidden'>
-            <div class='switch-tab'>
-                <el-radio-group v-model='radio' size='small'>
-                    <el-radio-button value='三维图'>三维图</el-radio-button>
-                    <el-radio-button value='表格'>表格</el-radio-button>
-                </el-radio-group>
-            </div>
-            <Table ref='tableRef' height='auto' isGroup />
-            <SecondSheet v-if="radio === '三维图'">
-                <MyEchart :options='options' v-if='options'></MyEchart>
-            </SecondSheet>
-        </div>
-    </SecondSheet>
-</template>
-
-<script lang='ts' setup>
-import { ref, provide } from 'vue'
-import SecondSheet from '@/components/secondSheet/index.vue'
-import Table from '@/components/table/index.vue'
-import TableStore from '@/utils/tableStore'
-import MyEchart from '@/components/echarts/MyEchart.vue'
-
-const radio = ref('三维图')
-const options = ref()
-const apiData = ref()
-const tableStore3D = new TableStore({
-    showPage: false,
-    // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
-    url: '/advance-boot/sgEvent/3DList',
-    method: 'POST',
-    column: [
-        {
-            title: '电压暂降频次统计表',
-            children: [
-                { title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
-                {
-                    title: '持续时间(s)',
-                    field: 'loginName',
-                    children: []
-                }
-            ]
-        }
-    ],
-    loadCallback: () => {
-        const eventCount = tableStore3D.table.data.values
-        tableStore3D.table.data = {
-            amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
-            durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
-            values: [
-                ['0.8~0.9', '0.01~0.02', eventCount[0][2]],
-                ['0.8~0.9', '0.02~0.05', eventCount[1][2]],
-                ['0.8~0.9', '0.05~0.07', eventCount[2][2]],
-                ['0.8~0.9', '0.07~0.10', eventCount[3][2]],
-                ['0.8~0.9', '0.10~1.00', eventCount[4][2]],
-                ['0.7~0.8', '0.01~0.02', eventCount[5][2]],
-                ['0.7~0.8', '0.02~0.05', eventCount[6][2]],
-                ['0.7~0.8', '0.05~0.07', eventCount[7][2]],
-                ['0.7~0.8', '0.07~0.10', eventCount[8][2]],
-                ['0.7~0.8', '0.10~1.00', eventCount[9][2]],
-                ['0.6~0.7', '0.01~0.02', eventCount[10][2]],
-                ['0.6~0.7', '0.02~0.05', eventCount[11][2]],
-                ['0.6~0.7', '0.05~0.07', eventCount[12][2]],
-                ['0.6~0.7', '0.07~0.10', eventCount[13][2]],
-                ['0.6~0.7', '0.10~1.00', eventCount[14][2]],
-                ['0.5~0.6', '0.01~0.02', eventCount[15][2]],
-                ['0.5~0.6', '0.02~0.05', eventCount[16][2]],
-                ['0.5~0.6', '0.05~0.07', eventCount[17][2]],
-                ['0.5~0.6', '0.07~0.10', eventCount[18][2]],
-                ['0.5~0.6', '0.10~1.00', eventCount[19][2]],
-                ['0.4~0.5', '0.01~0.02', eventCount[20][2]],
-                ['0.4~0.5', '0.02~0.05', eventCount[21][2]],
-                ['0.4~0.5', '0.05~0.07', eventCount[22][2]],
-                ['0.4~0.5', '0.07~0.10', eventCount[23][2]],
-                ['0.4~0.5', '0.10~1.00', eventCount[24][2]],
-                ['0.1~0.4', '0.01~0.02', eventCount[25][2]],
-                ['0.1~0.4', '0.02~0.05', eventCount[26][2]],
-                ['0.1~0.4', '0.05~0.07', eventCount[27][2]],
-                ['0.1~0.4', '0.07~0.10', eventCount[28][2]],
-                ['0.1~0.4', '0.10~1.00', eventCount[29][2]]
-            ],
-            table: {
-                total: 6,
-                rows: [
-                    {
-                        amplitude: '0.8~0.9',
-                        d001_002s: eventCount[0][2],
-                        d002_005s: eventCount[1][2],
-                        d005_007s: eventCount[2][2],
-                        d007_010s: eventCount[3][2],
-                        d010_100s: eventCount[4][2]
-                    },
-                    {
-                        amplitude: '0.7~0.8',
-                        d001_002s: eventCount[5][2],
-                        d002_005s: eventCount[6][2],
-                        d005_007s: eventCount[7][2],
-                        d007_010s: eventCount[8][2],
-                        d010_100s: eventCount[9][2]
-                    },
-                    {
-                        amplitude: '0.6~0.7',
-                        d001_002s: eventCount[10][2],
-                        d002_005s: eventCount[11][2],
-                        d005_007s: eventCount[12][2],
-                        d007_010s: eventCount[13][2],
-                        d010_100s: eventCount[14][2]
-                    },
-                    {
-                        amplitude: '0.5~0.6',
-                        d001_002s: eventCount[15][2],
-                        d002_005s: eventCount[16][2],
-                        d005_007s: eventCount[17][2],
-                        d007_010s: eventCount[18][2],
-                        d010_100s: eventCount[19][2]
-                    },
-                    {
-                        amplitude: '0.4~0.5',
-                        d001_002s: eventCount[20][2],
-                        d002_005s: eventCount[21][2],
-                        d005_007s: eventCount[22][2],
-                        d007_010s: eventCount[23][2],
-                        d010_100s: eventCount[24][2]
-                    },
-                    {
-                        amplitude: '0.1~0.4',
-                        d001_002s: eventCount[25][2],
-                        d002_005s: eventCount[26][2],
-                        d005_007s: eventCount[27][2],
-                        d007_010s: eventCount[28][2],
-                        d010_100s: eventCount[29][2]
-                    }
-                ],
-                code: 200,
-                msg: '查询成功'
-            }
-        }
-        apiData.value = tableStore3D.table.data
-        tableStore3D.table.column![0].children![1].children = []
-        tableStore3D.table.column![0].children![1].children!.push(
-            ...(apiData.value.durations.map((item: string) => {
-                return {
-                    title: item,
-                    field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
-                }
-            }) as any[])
-        )
-        tableStore3D.table.data = apiData.value.table.rows
-        initEchart()
-    }
-})
-// 注入到子组件
-provide('tableStore3D', tableStore3D)
-
-const initEchart = () => {
-    options.value = {
-        options: {
-            xAxis: null,
-            yAxis: null,
-            dataZoom: null,
-            backgroundColor: '#fff',
-            tooltip: {
-                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)',
-                borderWidth: 0,
-                formatter: function (params: any) {
-                    let tips = ''
-                    tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
-                    tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
-                    tips += '<font>事件次数::' + params.value[2] + '</font>'
-                    return tips
-                }
-            },
-            title: {
-                text: '暂降密度图',
-                x: 'center'
-            },
-            xAxis3D: {
-                name: '暂降幅值(p.u.)',
-                type: 'category',
-                data: apiData.value.amplitudes
-            },
-            yAxis3D: {
-                name: '持续时间(s)',
-                type: 'category',
-                data: apiData.value.durations
-            },
-            zAxis3D: {
-                name: '次数',
-                type: 'value'
-            },
-            grid3D: {
-                boxWidth: 200,
-                boxDepth: 80,
-                viewControl: {
-                    projection: 'perspective',
-                    distance: 250
-                },
-                light: {
-                    main: {
-                        intensity: 1.2,
-                        shadow: true
-                    },
-                    ambient: {
-                        intensity: 0.3
-                    }
-                }
-            },
-            series: [
-                {
-                    type: 'bar3D',
-                    data: apiData.value.values.map((item: [string, string, string]) => {
-                        return [
-                            apiData.value.amplitudes.indexOf(item[0]),
-                            apiData.value.durations.indexOf(item[1]),
-                            item[2]
-                        ]
-                    }),
-                    shading: 'lambert',
-                    label: {
-                        fontSize: 16,
-                        borderWidth: 1
-                    },
-                    emphasis: {
-                        label: {
-                            fontSize: 20,
-                            color: '#900'
-                        },
-                        itemStyle: {
-                            color: '#900'
-                        }
-                    }
-                }
-            ]
-        }
-    }
-}
-const search = (id: string, beginTime: string, endTime: string) => {
-    // 从父组件tableStore3D获取参数
-    tableStore3D.table.params.searchBeginTime = beginTime
-    tableStore3D.table.params.searchEndTime = endTime
-    tableStore3D.table.params.userId = id
-    tableStore3D.index()
-}
-defineExpose({ search })
-</script>
-<style lang='scss'>
-.switch-tab {
-    position: absolute;
-    right: 16px;
-    top: 4px;
-    z-index: 11;
-}
-</style>
+<template>
+    <SecondSheet>
+        <div style='height: 100%; overflow: hidden' >
+            <div class='switch-tab'>
+                <el-radio-group v-model='radio' >
+                    <el-radio-button value='三维图'>三维图</el-radio-button>
+                    <el-radio-button value='表格'>表格</el-radio-button>
+                </el-radio-group>
+            </div>
+            <Table ref='tableRef'  isGroup />
+            <SecondSheet v-if="radio === '三维图'">
+                <MyEchart :options='options' v-if='options'></MyEchart>
+            </SecondSheet>
+        </div>
+    </SecondSheet>
+</template>
+
+<script lang='ts' setup>
+import { ref, provide } from 'vue'
+import SecondSheet from '@/components/secondSheet/index.vue'
+import Table from '@/components/table/index.vue'
+import TableStore from '@/utils/tableStore'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+
+const radio = ref('三维图')
+const options = ref()
+const apiData = ref()
+const tableStore3D = new TableStore({
+    showPage: false,
+    // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
+    url: '/advance-boot/sgEvent/3DList',
+    method: 'POST',
+    column: [
+        {
+            title: '电压暂降频次统计表',
+            children: [
+                { title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
+                {
+                    title: '持续时间(s)',
+                    field: 'loginName',
+                    children: []
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        const eventCount = tableStore3D.table.data.values
+        tableStore3D.table.data = {
+            amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
+            durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
+            values: [
+                ['0.8~0.9', '0.01~0.02', eventCount[0][2]],
+                ['0.8~0.9', '0.02~0.05', eventCount[1][2]],
+                ['0.8~0.9', '0.05~0.07', eventCount[2][2]],
+                ['0.8~0.9', '0.07~0.10', eventCount[3][2]],
+                ['0.8~0.9', '0.10~1.00', eventCount[4][2]],
+                ['0.7~0.8', '0.01~0.02', eventCount[5][2]],
+                ['0.7~0.8', '0.02~0.05', eventCount[6][2]],
+                ['0.7~0.8', '0.05~0.07', eventCount[7][2]],
+                ['0.7~0.8', '0.07~0.10', eventCount[8][2]],
+                ['0.7~0.8', '0.10~1.00', eventCount[9][2]],
+                ['0.6~0.7', '0.01~0.02', eventCount[10][2]],
+                ['0.6~0.7', '0.02~0.05', eventCount[11][2]],
+                ['0.6~0.7', '0.05~0.07', eventCount[12][2]],
+                ['0.6~0.7', '0.07~0.10', eventCount[13][2]],
+                ['0.6~0.7', '0.10~1.00', eventCount[14][2]],
+                ['0.5~0.6', '0.01~0.02', eventCount[15][2]],
+                ['0.5~0.6', '0.02~0.05', eventCount[16][2]],
+                ['0.5~0.6', '0.05~0.07', eventCount[17][2]],
+                ['0.5~0.6', '0.07~0.10', eventCount[18][2]],
+                ['0.5~0.6', '0.10~1.00', eventCount[19][2]],
+                ['0.4~0.5', '0.01~0.02', eventCount[20][2]],
+                ['0.4~0.5', '0.02~0.05', eventCount[21][2]],
+                ['0.4~0.5', '0.05~0.07', eventCount[22][2]],
+                ['0.4~0.5', '0.07~0.10', eventCount[23][2]],
+                ['0.4~0.5', '0.10~1.00', eventCount[24][2]],
+                ['0.1~0.4', '0.01~0.02', eventCount[25][2]],
+                ['0.1~0.4', '0.02~0.05', eventCount[26][2]],
+                ['0.1~0.4', '0.05~0.07', eventCount[27][2]],
+                ['0.1~0.4', '0.07~0.10', eventCount[28][2]],
+                ['0.1~0.4', '0.10~1.00', eventCount[29][2]]
+            ],
+            table: {
+                total: 6,
+                rows: [
+                    {
+                        amplitude: '0.8~0.9',
+                        d001_002s: eventCount[0][2],
+                        d002_005s: eventCount[1][2],
+                        d005_007s: eventCount[2][2],
+                        d007_010s: eventCount[3][2],
+                        d010_100s: eventCount[4][2]
+                    },
+                    {
+                        amplitude: '0.7~0.8',
+                        d001_002s: eventCount[5][2],
+                        d002_005s: eventCount[6][2],
+                        d005_007s: eventCount[7][2],
+                        d007_010s: eventCount[8][2],
+                        d010_100s: eventCount[9][2]
+                    },
+                    {
+                        amplitude: '0.6~0.7',
+                        d001_002s: eventCount[10][2],
+                        d002_005s: eventCount[11][2],
+                        d005_007s: eventCount[12][2],
+                        d007_010s: eventCount[13][2],
+                        d010_100s: eventCount[14][2]
+                    },
+                    {
+                        amplitude: '0.5~0.6',
+                        d001_002s: eventCount[15][2],
+                        d002_005s: eventCount[16][2],
+                        d005_007s: eventCount[17][2],
+                        d007_010s: eventCount[18][2],
+                        d010_100s: eventCount[19][2]
+                    },
+                    {
+                        amplitude: '0.4~0.5',
+                        d001_002s: eventCount[20][2],
+                        d002_005s: eventCount[21][2],
+                        d005_007s: eventCount[22][2],
+                        d007_010s: eventCount[23][2],
+                        d010_100s: eventCount[24][2]
+                    },
+                    {
+                        amplitude: '0.1~0.4',
+                        d001_002s: eventCount[25][2],
+                        d002_005s: eventCount[26][2],
+                        d005_007s: eventCount[27][2],
+                        d007_010s: eventCount[28][2],
+                        d010_100s: eventCount[29][2]
+                    }
+                ],
+                code: 200,
+                msg: '查询成功'
+            }
+        }
+        apiData.value = tableStore3D.table.data
+        tableStore3D.table.column![0].children![1].children = []
+        tableStore3D.table.column![0].children![1].children!.push(
+            ...(apiData.value.durations.map((item: string) => {
+                return {
+                    title: item,
+                    field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
+                }
+            }) as any[])
+        )
+        tableStore3D.table.data = apiData.value.table.rows
+        initEchart()
+    }
+})
+// 注入到子组件
+provide('tableStore3D', tableStore3D)
+
+const initEchart = () => {
+    options.value = {
+        options: {
+            xAxis: null,
+            yAxis: null,
+            dataZoom: null,
+            backgroundColor: '#fff',
+            tooltip: {
+                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)',
+                borderWidth: 0,
+                formatter: function (params: any) {
+                    let tips = ''
+                    tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
+                    tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
+                    tips += '<font>事件次数::' + params.value[2] + '</font>'
+                    return tips
+                }
+            },
+            title: {
+                text: '暂降密度图',
+                x: 'center'
+            },
+            xAxis3D: {
+                name: '暂降幅值(p.u.)',
+                type: 'category',
+                data: apiData.value.amplitudes
+            },
+            yAxis3D: {
+                name: '持续时间(s)',
+                type: 'category',
+                data: apiData.value.durations
+            },
+            zAxis3D: {
+                name: '次数',
+                type: 'value'
+            },
+            grid3D: {
+                boxWidth: 200,
+                boxDepth: 80,
+                viewControl: {
+                    projection: 'perspective',
+                    distance: 250
+                },
+                light: {
+                    main: {
+                        intensity: 1.2,
+                        shadow: true
+                    },
+                    ambient: {
+                        intensity: 0.3
+                    }
+                }
+            },
+            series: [
+                {
+                    type: 'bar3D',
+                    data: apiData.value.values.map((item: [string, string, string]) => {
+                        return [
+                            apiData.value.amplitudes.indexOf(item[0]),
+                            apiData.value.durations.indexOf(item[1]),
+                            item[2]
+                        ]
+                    }),
+                    shading: 'lambert',
+                    label: {
+                        fontSize: 16,
+                        borderWidth: 1
+                    },
+                    emphasis: {
+                        label: {
+                            fontSize: 20,
+                            color: '#900'
+                        },
+                        itemStyle: {
+                            color: '#900'
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}
+const search = (id: string, beginTime: string, endTime: string) => {
+    // 从父组件tableStore3D获取参数
+    tableStore3D.table.params.searchBeginTime = beginTime
+    tableStore3D.table.params.searchEndTime = endTime
+    tableStore3D.table.params.userId = id
+    tableStore3D.index()
+}
+defineExpose({ search })
+</script>
+<style lang='scss'>
+.switch-tab {
+    position: absolute;
+      right: 345px;
+    top: -37px;
+    z-index: 11;
+}
+</style>

src/views/pqs/voltageSags/sagGovern/businessUser/event/toleranceCurve.vue

@@ -1,343 +1,343 @@
-<template>
-    <SecondSheet>
-        <div class='tolerance-curve'>
-            <el-form label-width='auto' :inline='true'>
-                <el-form-item label='生产线'>
-                    <el-select v-model='form.productLineId'>
-                        <el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
-                            :value='item.id' />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label='终端'>
-                    <el-select v-model='form.machineId' placeholder='暂无终端'>
-                        <el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label='敏感元器件'>
-                    <el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
-                        <el-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
-                    </el-select>
-                </el-form-item>
-            </el-form>
-            <div style='display: flex; flex: 1'>
-                <el-form label-width='auto' label-position='top'>
-                    <!--                    <el-form-item label='耐受曲线'>-->
-                    <!--                        <el-select v-model='form.name' placeholder='Select'>-->
-                    <!--                            <el-option-->
-                    <!--                                v-for='item in selectOptions'-->
-                    <!--                                :key='item.value'-->
-                    <!--                                :label='item.label'-->
-                    <!--                                :value='item.value'-->
-                    <!--                            />-->
-                    <!--                        </el-select>-->
-                    <!--                    </el-form-item>-->
-                    <!--                    <el-form-item label='耐受能力（膝点坐标）'>-->
-                    <!--                        <el-select v-model='form.name' placeholder='Select'>-->
-                    <!--                            <el-option-->
-                    <!--                                v-for='item in selectOptions'-->
-                    <!--                                :key='item.value'-->
-                    <!--                                :label='item.label'-->
-                    <!--                                :value='item.value'-->
-                    <!--                            />-->
-                    <!--                        </el-select>-->
-                    <!--                    </el-form-item>-->
-                    <el-form-item label='上限曲线膝点'>
-                        <div>
-                            <div>
-                                <el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
-                                    @change='reDrawPic' />
-                                <span class='ml10' style='color: #333'>p.u.</span>
-                            </div>
-                            <div class='mt10'>
-                                <el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
-                                    @change='reDrawPic' />
-                                <span class='ml10' style='color: #333'>ms</span>
-                            </div>
-                        </div>
-                    </el-form-item>
-                    <el-form-item label='下限曲线膝点'>
-                        <div>
-                            <div>
-                                <el-input-number v-model='unit.vtcAmpLower' controls-position='right'
-                                    @change='reDrawPic' />
-                                <span class='ml10' style='color: #333'>p.u.</span>
-                            </div>
-                            <div class='mt10'>
-                                <el-input-number v-model='unit.vtcTimeLower' controls-position='right'
-                                    @change='reDrawPic' />
-                                <span class='ml10' style='color: #333'>ms</span>
-                            </div>
-                        </div>
-                    </el-form-item>
-                </el-form>
-                <div style='flex: 1' class='ml10'>
-                    <MyEchart :options='options' v-if='options'></MyEchart>
-                </div>
-            </div>
-        </div>
-    </SecondSheet>
-</template>
-
-<script lang='ts' setup>
-import SecondSheet from '@/components/secondSheet/index.vue'
-import MyEchart from '@/components/echarts/MyEchart.vue'
-import { reactive, ref } from 'vue'
-import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
-import { ElMessage } from 'element-plus'
-import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
-import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
-import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
-
-
-const searchBeginTime = ref()
-const searchEndTime = ref()
-const userId = ref()
-
-const form = reactive({
-    num: 1,
-    productLineId: '',
-    machineId: '',
-    unitId: ''
-})
-const productLineOptions = ref()
-const machineOptions = ref()
-const unitOptions = ref()
-const unit = ref({
-    'vtcTimeUpper': 0,
-    'vtcAmpUpper': 0,
-    'vtcTimeLower': 0,
-    'vtcAmpLower': 0
-})
-const overEvent = ref([])
-const unOverEvent = ref([])
-const unKnownEvent = ref([])
-const overEventColor = ref('#A52a2a')
-const unOverEventColor = ref('#61a0a8')
-const unKnownEventColor = ref('#d48265')
-const eventData = ref()
-const search = async (id: string, beginTime: string, endTime: string) => {
-    // 从父组件tableStore获取参数
-    searchBeginTime.value = beginTime
-    searchEndTime.value = endTime
-    userId.value = id
-    //根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉，再根据终端获取下拉的敏感元器件的下拉
-    await querySgProductLineByUserId(id).then((res: any) => {
-        productLineOptions.value = res.data
-        form.productLineId = productLineOptions.value[0].id
-    })
-
-    //根据生产线获取终端数据
-    await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
-        machineOptions.value = res.data
-        if (machineOptions.value.length > 0) {
-            form.machineId = machineOptions.value[0].id
-        }
-    })
-
-    //根据终端获取元器件数据
-    await queryUnitByMachineId(form.machineId).then((res: any) => {
-        unitOptions.value = res.data
-        if (unitOptions.value.length > 0) {
-            form.unitId = unitOptions.value[0].id
-            unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
-        }
-
-    })
-
-    const data = {
-        searchBeginTime: beginTime,
-        searchEndTime: endTime,
-        productId: form.productLineId
-    }
-
-    await getEventDataByProductLineId(data).then((res: any) => {
-        eventData.value = res.data
-        reDrawPic()
-    })
-
-}
-const changeUnit = (id: any) => {
-    if (id == undefined) return
-    let list = unitOptions.value.filter((item: any) => item.id == id)
-    unit.value = JSON.parse(JSON.stringify(list[0]))
-    reDrawPic()
-
-}
-
-const options = ref()
-const initOptions = () => {
-    options.value = {
-        legend: {
-            data: ['越限事件', '未越限事件', '不确定事件'],
-            left: '10px'
-        },
-        tooltip: {
-            formatter: function (a: any) {
-                if (a[0].value[3] == undefined) {
-                    return
-                }
-                let relVal = ''
-                relVal += '<font style=\'color:' + '\'>进线:' + '&nbsp' + '&nbsp' + a[0].value[3] + '</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(2) + 's</font><br/>'
-                relVal += '<font style=\'color:' + '\'>特征幅值:' + '&nbsp' + '&nbsp' + a[0].value[1] + 'p.u.</font>'
-                return relVal
-            }
-        },
-        xAxis: {
-            name: '持续时间/s',
-            type: 'log',
-            min: '0.001',
-            max: '1000',
-            splitLine: { show: false }
-        },
-        yAxis: {
-            name: '幅值/p.u.',
-            max: 1,
-            min: 0,
-            splitLine: { show: false }
-        },
-        grid: {
-            right: '78px',
-        },
-        series: [
-            {
-                type: 'line',
-                color: '#ff0000',
-                data: [
-                    [unit.value.vtcTimeUpper / 1000, 0],
-                    [unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
-                    [1000, unit.value.vtcAmpUpper]
-                ],
-                showSymbol: false,
-                tooltips: {
-                    show: false
-                }
-            },
-            {
-                type: 'line',
-                color: '#ff0000',
-                data: [
-                    [unit.value.vtcTimeLower / 1000, 0],
-                    [unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
-                    [1000, unit.value.vtcAmpLower]
-                ],
-                showSymbol: false,
-                tooltips: {
-                    show: false
-                }
-            },
-            {
-                name: '越限事件',
-                type: 'scatter',
-                symbol: 'circle',
-                data: overEvent.value
-            },
-            {
-                name: '未越限事件',
-                type: 'scatter',
-                symbol: 'circle',
-                data: unOverEvent.value
-            },
-            {
-                name: '不确定事件',
-                type: 'scatter',
-                symbol: 'circle',
-                data: unKnownEvent.value
-            }
-        ],
-        options: {
-            dataZoom: null
-        }
-    }
-}
-
-const reDrawPic = () => {
-    //清洗要显示的数据
-    if (eventData.value.length > 0) {
-        unOverEvent.value = []
-        overEvent.value = []
-        unKnownEvent.value = []
-        for (let event of eventData.value) {
-            //判断落在哪个区域内
-            let eventTime = Number(event.duration) / 1000
-            let eventAmplitude = Number(event.featureAmplitude)
-            if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
-                //未越限
-                const dataTemp = {
-                    value: [
-                        eventTime,
-                        eventAmplitude,
-                        event.startTime,
-                        event.incomingLineName
-                    ],
-                    itemStyle: {
-                        normal: {
-                            color: unOverEventColor.value
-                        }
-                    }
-                }
-                unOverEvent.value.push(dataTemp)
-            } else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
-                //故障阶段
-                const dataTemp = {
-                    value: [
-                        eventTime,
-                        eventAmplitude,
-                        event.startTime,
-                        event.incomingLineName
-                    ],
-                    itemStyle: {
-                        normal: {
-                            color: overEventColor.value
-                        }
-                    }
-                }
-                overEvent.value.push(dataTemp)
-            } else {
-                //不确定事件
-                const dataTemp = {
-                    value: [
-                        eventTime,
-                        eventAmplitude,
-                        event.startTime,
-                        event.incomingLineName
-                    ],
-                    itemStyle: {
-                        normal: {
-                            color: unKnownEventColor.value
-                        }
-                    }
-                }
-                unKnownEvent.value.push(dataTemp)
-            }
-
-
-        }
-    }
-    //初始化图表
-    initOptions()
-}
-
-defineExpose({ search })
-</script>
-
-<style lang='scss' scoped>
-.tolerance-curve {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    height: 100%;
-    overflow: hidden;
-    padding: 10px;
-    border: 1px solid var(--el-border-color);
-}
-
-.el-form-item__label-wrap {
-    margin-left: 0 !important;
-}
-
-.el-form-item__content {
-    width: 185px !important;
-}
-</style>
+<template>
+    <SecondSheet>
+        <div class='tolerance-curve'>
+            <el-form label-width='auto' :inline='true'>
+                <el-form-item label='生产线'>
+                    <el-select v-model='form.productLineId'>
+                        <el-option v-for='item in productLineOptions' :key='item.id' :label='item.name'
+                            :value='item.id' />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='终端'>
+                    <el-select v-model='form.machineId' placeholder='暂无终端'>
+                        <el-option v-for='item in machineOptions' :key='item.id' :label='item.name' :value='item.id' />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='敏感元器件'>
+                    <el-select v-model='form.unitId' placeholder='暂无元器件' @change="changeUnit" clearable>
+                        <el-option v-for='item in unitOptions' :key='item.id' :label='item.name' :value='item.id' />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div style='display: flex; flex: 1'>
+                <el-form label-width='auto' label-position='top'>
+                    <!--                    <el-form-item label='耐受曲线'>-->
+                    <!--                        <el-select v-model='form.name' placeholder='Select'>-->
+                    <!--                            <el-option-->
+                    <!--                                v-for='item in selectOptions'-->
+                    <!--                                :key='item.value'-->
+                    <!--                                :label='item.label'-->
+                    <!--                                :value='item.value'-->
+                    <!--                            />-->
+                    <!--                        </el-select>-->
+                    <!--                    </el-form-item>-->
+                    <!--                    <el-form-item label='耐受能力（膝点坐标）'>-->
+                    <!--                        <el-select v-model='form.name' placeholder='Select'>-->
+                    <!--                            <el-option-->
+                    <!--                                v-for='item in selectOptions'-->
+                    <!--                                :key='item.value'-->
+                    <!--                                :label='item.label'-->
+                    <!--                                :value='item.value'-->
+                    <!--                            />-->
+                    <!--                        </el-select>-->
+                    <!--                    </el-form-item>-->
+                    <el-form-item label='上限曲线膝点'>
+                        <div>
+                            <div>
+                                <el-input-number v-model='unit.vtcAmpUpper' controls-position='right'
+                                    @change='reDrawPic' />
+                                <span class='ml10' style='color: #333'>p.u.</span>
+                            </div>
+                            <div class='mt10'>
+                                <el-input-number v-model='unit.vtcTimeUpper' controls-position='right'
+                                    @change='reDrawPic' />
+                                <span class='ml10' style='color: #333'>ms</span>
+                            </div>
+                        </div>
+                    </el-form-item>
+                    <el-form-item label='下限曲线膝点'>
+                        <div>
+                            <div>
+                                <el-input-number v-model='unit.vtcAmpLower' controls-position='right'
+                                    @change='reDrawPic' />
+                                <span class='ml10' style='color: #333'>p.u.</span>
+                            </div>
+                            <div class='mt10'>
+                                <el-input-number v-model='unit.vtcTimeLower' controls-position='right'
+                                    @change='reDrawPic' />
+                                <span class='ml10' style='color: #333'>ms</span>
+                            </div>
+                        </div>
+                    </el-form-item>
+                </el-form>
+                <div style='flex: 1' class='ml10'>
+                    <MyEchart :options='options' v-if='options'></MyEchart>
+                </div>
+            </div>
+        </div>
+    </SecondSheet>
+</template>
+
+<script lang='ts' setup>
+import SecondSheet from '@/components/secondSheet/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { reactive, ref } from 'vue'
+import { querySgProductLineByUserId } from '@/api/advance-boot/sgGroven/sgProductLine'
+import { ElMessage } from 'element-plus'
+import { querySgMachineByProductLineId } from '@/api/advance-boot/sgGroven/sgMachine'
+import { queryUnitByMachineId } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'
+import { getEventDataByProductLineId } from '@/api/advance-boot/sgGroven/sgEvent'
+
+
+const searchBeginTime = ref()
+const searchEndTime = ref()
+const userId = ref()
+
+const form = reactive({
+    num: 1,
+    productLineId: '',
+    machineId: '',
+    unitId: ''
+})
+const productLineOptions = ref()
+const machineOptions = ref()
+const unitOptions = ref()
+const unit = ref({
+    'vtcTimeUpper': 0,
+    'vtcAmpUpper': 0,
+    'vtcTimeLower': 0,
+    'vtcAmpLower': 0
+})
+const overEvent = ref([])
+const unOverEvent = ref([])
+const unKnownEvent = ref([])
+const overEventColor = ref('#A52a2a')
+const unOverEventColor = ref('#61a0a8')
+const unKnownEventColor = ref('#d48265')
+const eventData = ref()
+const search = async (id: string, beginTime: string, endTime: string) => {
+    // 从父组件tableStore获取参数
+    searchBeginTime.value = beginTime
+    searchEndTime.value = endTime
+    userId.value = id
+    //根据用户id获取到生产线下拉框、再根据生产线下拉框获取生产线下的终端下拉，再根据终端获取下拉的敏感元器件的下拉
+    await querySgProductLineByUserId(id).then((res: any) => {
+        productLineOptions.value = res.data
+        form.productLineId = productLineOptions.value[0].id
+    })
+
+    //根据生产线获取终端数据
+    await querySgMachineByProductLineId(form.productLineId).then((res: any) => {
+        machineOptions.value = res.data
+        if (machineOptions.value.length > 0) {
+            form.machineId = machineOptions.value[0].id
+        }
+    })
+
+    //根据终端获取元器件数据
+    await queryUnitByMachineId(form.machineId).then((res: any) => {
+        unitOptions.value = res.data
+        if (unitOptions.value.length > 0) {
+            form.unitId = unitOptions.value[0].id
+            unit.value = JSON.parse(JSON.stringify(unitOptions.value[0]))
+        }
+
+    })
+
+    const data = {
+        searchBeginTime: beginTime,
+        searchEndTime: endTime,
+        productId: form.productLineId
+    }
+
+    await getEventDataByProductLineId(data).then((res: any) => {
+        eventData.value = res.data
+        reDrawPic()
+    })
+
+}
+const changeUnit = (id: any) => {
+    if (id == undefined) return
+    let list = unitOptions.value.filter((item: any) => item.id == id)
+    unit.value = JSON.parse(JSON.stringify(list[0]))
+    reDrawPic()
+
+}
+
+const options = ref()
+const initOptions = () => {
+    options.value = {
+        legend: {
+            data: ['越限事件', '未越限事件', '不确定事件'],
+
+        },
+        tooltip: {
+            formatter: function (a: any) {
+                if (a[0].value[3] == undefined) {
+                    return
+                }
+                let relVal = ''
+                relVal += '<font style=\'color:' + '\'>进线:' + '&nbsp' + '&nbsp' + a[0].value[3] + '</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(2) + 's</font><br/>'
+                relVal += '<font style=\'color:' + '\'>特征幅值:' + '&nbsp' + '&nbsp' + a[0].value[1] + 'p.u.</font>'
+                return relVal
+            }
+        },
+        xAxis: {
+            name: '持续时间/s',
+            type: 'log',
+            min: '0.001',
+            max: '1000',
+            splitLine: { show: false }
+        },
+        yAxis: {
+            name: '幅值/p.u.',
+            max: 1,
+            min: 0,
+            splitLine: { show: false }
+        },
+        grid: {
+            right: '78px',
+        },
+        series: [
+            {
+                type: 'line',
+                color: '#ff0000',
+                data: [
+                    [unit.value.vtcTimeUpper / 1000, 0],
+                    [unit.value.vtcTimeUpper / 1000, unit.value.vtcAmpUpper],
+                    [1000, unit.value.vtcAmpUpper]
+                ],
+                showSymbol: false,
+                tooltips: {
+                    show: false
+                }
+            },
+            {
+                type: 'line',
+                color: '#ff0000',
+                data: [
+                    [unit.value.vtcTimeLower / 1000, 0],
+                    [unit.value.vtcTimeLower / 1000, unit.value.vtcAmpLower],
+                    [1000, unit.value.vtcAmpLower]
+                ],
+                showSymbol: false,
+                tooltips: {
+                    show: false
+                }
+            },
+            {
+                name: '越限事件',
+                type: 'scatter',
+                symbol: 'circle',
+                data: overEvent.value
+            },
+            {
+                name: '未越限事件',
+                type: 'scatter',
+                symbol: 'circle',
+                data: unOverEvent.value
+            },
+            {
+                name: '不确定事件',
+                type: 'scatter',
+                symbol: 'circle',
+                data: unKnownEvent.value
+            }
+        ],
+        options: {
+            dataZoom: null
+        }
+    }
+}
+
+const reDrawPic = () => {
+    //清洗要显示的数据
+    if (eventData.value.length > 0) {
+        unOverEvent.value = []
+        overEvent.value = []
+        unKnownEvent.value = []
+        for (let event of eventData.value) {
+            //判断落在哪个区域内
+            let eventTime = Number(event.duration) / 1000
+            let eventAmplitude = Number(event.featureAmplitude)
+            if (eventTime < Number(unit.value.vtcTimeUpper / 1000) || eventAmplitude > Number(unit.value.vtcAmpUpper)) {
+                //未越限
+                const dataTemp = {
+                    value: [
+                        eventTime,
+                        eventAmplitude,
+                        event.startTime,
+                        event.incomingLineName
+                    ],
+                    itemStyle: {
+                        normal: {
+                            color: unOverEventColor.value
+                        }
+                    }
+                }
+                unOverEvent.value.push(dataTemp)
+            } else if (eventTime > Number(unit.value.vtcTimeLower / 1000) && eventAmplitude < Number(unit.value.vtcAmpLower)) {
+                //故障阶段
+                const dataTemp = {
+                    value: [
+                        eventTime,
+                        eventAmplitude,
+                        event.startTime,
+                        event.incomingLineName
+                    ],
+                    itemStyle: {
+                        normal: {
+                            color: overEventColor.value
+                        }
+                    }
+                }
+                overEvent.value.push(dataTemp)
+            } else {
+                //不确定事件
+                const dataTemp = {
+                    value: [
+                        eventTime,
+                        eventAmplitude,
+                        event.startTime,
+                        event.incomingLineName
+                    ],
+                    itemStyle: {
+                        normal: {
+                            color: unKnownEventColor.value
+                        }
+                    }
+                }
+                unKnownEvent.value.push(dataTemp)
+            }
+
+
+        }
+    }
+    //初始化图表
+    initOptions()
+}
+
+defineExpose({ search })
+</script>
+
+<style lang='scss' scoped>
+.tolerance-curve {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    overflow: hidden;
+    padding: 10px;
+    border: 1px solid var(--el-border-color);
+}
+
+.el-form-item__label-wrap {
+    margin-left: 0 !important;
+}
+
+.el-form-item__content {
+    width: 185px !important;
+}
+</style>

src/views/pqs/voltageSags/sagGovern/businessUser/userPopup.vue

@@ -1,250 +1,252 @@
-<template>
-    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
-        <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
-                <el-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
-                    <el-tab-pane label="基本信息" name="user">
-                        <el-form-item label="用户名" prop="userName" >
-                            <el-input v-model="form.userName" placeholder="请输入用户名" clearable />
-                        </el-form-item>
-                        <el-row>
-                            <el-col :span="12">
-                                <el-form-item label="重点用户">
-                                    <el-select v-model="form.keyUser">
-                                        <el-option label="重要" value="1" />
-                                        <el-option label="不重要" value="0" />
-                                    </el-select>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="所属行业" prop="industry">
-                                    <el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-form-item label="所在地区" prop="addr">
-                            <area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区"   clearable/>
-                        </el-form-item>
-                        <el-form-item label="详细地址">
-                            <el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
-                        </el-form-item>
-                        <el-form-item label="联系方式">
-                            <el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
-                        </el-form-item>
-                        <el-form-item label="用户描述">
-                            <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
-                        </el-form-item>
-                        <el-form-item label="企业照片">
-                            <div>
-                                <el-image
-                                    style="width: 200px; height: 200px"
-                                    :src="userLogo.url"
-                                    :preview-src-list="[userLogo.url]"
-                                    v-if="userLogo.url"
-                                ></el-image>
-                                <el-upload
-                                    action=""
-                                    :show-file-list="false"
-                                    :auto-upload="false"
-                                    accept=".png,.jpg"
-                                    :on-change="chooseImage"
-                                >
-                                    <el-button type="primary">上传图片</el-button>
-                                </el-upload>
-                            </div>
-                        </el-form-item>
-                    </el-tab-pane>
-
-                    <el-tab-pane label="进线" name="incomingLine">
-                        <IncomingTable ref="incomingTable"></IncomingTable>
-                    </el-tab-pane>
-                </el-tabs>
-            </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, reactive, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
-import type { UploadProps, UploadUserFile } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
-import AreaCascard from '@/components/form/areaCascard/index.vue'
-import { uploadFile, deleteFile } from '@/api/system-boot/file'
-import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
-import IncomingTable from './IncomingTable.vue'
-import { fullUrl } from '@/utils/common'
-
-const dialogVisible = ref(false)
-const title = ref('')
-const tableStore = inject('tableStore') as TableStore
-const areaRef = ref()
-const formRef = ref()
-const tab = ref('user')
-
-//进线表格子组件
-const incomingTable = ref()
-
-const userLogo = reactive({
-    url: '',
-    name: ''
-})
-
-const dialogVisibleLogo = ref(false)
-// 注意不要和表单ref的命名冲突
-const form = reactive<anyObj>({
-    id: '',
-    userName: '',
-    keyUser: '1',
-    industry: '',
-    addr: [],
-    addrStrOption: '',
-    addrDetail: '',
-    concact: '',
-    remark: '',
-    userLogo: ''
-})
-
-//form表单校验规则
-const rules = {
-    userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
-    industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
-    addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
-}
-const resetForm = () => {
-    if (formRef.value) {
-        formRef.value.resetFields()
-    }
-}
-
-const open = (text: string, data?: anyObj) => {
-    tab.value = 'user'
-    title.value = text
-    //默认选中第一个tab
-    dialogVisible.value = true
-    if (data) {
-        // 表单赋值
-        for (let key in form) {
-            form[key] = data[key]
-        }
-        form.addr = data.addr.split('/')
-        form.keyUser = String(data.keyUser)
-        if (form.userLogo) {
-            userLogo.url = fullUrl(form.userLogo)
-            // 图片的name我不知道
-        }
-        //待子组件渲染完毕
-        nextTick(() => {
-            incomingTable.value.getTableData(form.id)
-        })
-    } else {
-        resetForm()
-        // 在此处恢复默认表单
-        for (let key in form) {
-            form[key] = ''
-        }
-        userLogo.url = ''
-        form.keyUser = '1'
-    }
-}
-
-/**
- * 将联级选择的区域数组转为字符串
- */
-const reValueAddr = () => {
-    form.addrStrOption = form.addr.join('/')
-}
-
-/**
- * 选择图片上传
- * @param e
- */
-const chooseImage = (e: any) => {
-    uploadFile(e.raw, 'sgGovern/').then(res => {
-        userLogo.name = res.data.name
-        userLogo.url = res.data.url
-        form.userLogo = res.data.name
-        ElMessage.success('新增成功')
-    })
-}
-
-/**
- * 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
- */
-const handleRemove = (e: any, userLogo: any) => {
-    form.userLogo = ''
-    userLogo.value = []
-    deleteFile(e.name).then(res => {
-        ElMessage.success('删除成功')
-    })
-}
-
-/**
- * 预览图片
- */
-const handlePictureCardPreview = () => {
-    dialogVisibleLogo.value = true
-}
-
-/**
- * 提交用户表单数据
- */
-const submit = () => {
-    formRef.value.validate(async (valid: any) => {
-        if (valid) {
-            if (form.id) {
-                form.addrStrOption = form.addr.join('/')
-                await updateSgUser(form)
-                ElMessage.success('更新成功')
-                tableStore.index()
-                //切到进线处
-                dialogVisible.value = false
-            } else {
-                await addSgUser(form).then(res => {
-                    form.id = res.data
-                    //查询进线数据，避免一直处于loading状态
-                    incomingTable.value.getTableData(form.id)
-                    ElMessage.success('保存成功')
-                    tableStore.index()
-                    //切到进线处
-                    tab.value='incomingLine'
-                    dialogVisible.value = true
-                })
-            }
-
-        }
-    })
-}
-
-/************针对tab切换*************/
-const checkUserId = (tab: any, event: any) => {
-    if (tab == 'user') {
-        return true
-    }
-    if (form.id) {
-        return true
-    } else {
-        ElMessage.error('请先创建用户基础信息！')
-        return false
-    }
-}
-
-defineExpose({ open })
-</script>
-
-<style scoped>
-.el-upload-list__item {
-    transition: none !important;
-}
-
-.el-select {
-    min-width: 180px;
-}
-</style>
+<template>
+    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" style="max-width: 750px">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+                <el-tabs tab-position="left" style="height: 100%" :before-leave="checkUserId" v-model="tab">
+                    <el-tab-pane label="基本信息" name="user">
+                        <el-form-item label="用户名" prop="userName" >
+                            <el-input v-model="form.userName" placeholder="请输入用户名" clearable />
+                        </el-form-item>
+                        <el-row>
+                            <el-col :span="12">
+                                <el-form-item label="重点用户">
+                                    <el-select v-model="form.keyUser">
+                                        <el-option label="重要" value="1" />
+                                        <el-option label="不重要" value="0" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="所属行业" prop="industry">
+                                    <el-input v-model="form.industry" placeholder="请输入所属行业" clearable />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-form-item label="所在地区" prop="addr">
+                            <area-cascard v-model="form.addr" @change="reValueAddr" ref="areaRef" placeholder="请选择所在地区"   clearable/>
+                        </el-form-item>
+                        <el-form-item label="详细地址">
+                            <el-input v-model="form.addrDetail" placeholder="请输入详细地址" clearable/>
+                        </el-form-item>
+                        <el-form-item label="联系方式">
+                            <el-input v-model="form.concact" placeholder="请输入联系方式" clearable/>
+                        </el-form-item>
+                        <el-form-item label="用户描述">
+                            <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" clearable/>
+                        </el-form-item>
+                        <el-form-item label="企业照片">
+                            <div>
+                                <el-image
+                                    style="width: 200px; height: 200px"
+                                    :src="userLogo.url"
+                                    :preview-src-list="[userLogo.url]"
+                                    v-if="userLogo.url"
+                                ></el-image>
+                                <el-upload
+                                    action=""
+                                    :show-file-list="false"
+                                    :auto-upload="false"
+                                    accept=".png,.jpg"
+                                    :on-change="chooseImage"
+                                >
+                                    <el-button type="primary">上传图片</el-button>
+                                </el-upload>
+                            </div>
+                        </el-form-item>
+                    </el-tab-pane>
+
+                    <el-tab-pane label="进线" name="incomingLine">
+                        <IncomingTable ref="incomingTable"></IncomingTable>
+                    </el-tab-pane>
+                </el-tabs>
+            </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, reactive, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { UploadProps, UploadUserFile } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
+import AreaCascard from '@/components/form/areaCascard/index.vue'
+import { uploadFile, deleteFile } from '@/api/system-boot/file'
+import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
+import IncomingTable from './IncomingTable.vue'
+import { getFileUrl } from '@/api/system-boot/file'
+
+const dialogVisible = ref(false)
+const title = ref('')
+const tableStore = inject('tableStore') as TableStore
+const areaRef = ref()
+const formRef = ref()
+const tab = ref('user')
+
+//进线表格子组件
+const incomingTable = ref()
+
+const userLogo = reactive({
+    url: '',
+    name: ''
+})
+
+const dialogVisibleLogo = ref(false)
+// 注意不要和表单ref的命名冲突
+const form = reactive<anyObj>({
+    id: '',
+    userName: '',
+    keyUser: '1',
+    industry: '',
+    addr: [],
+    addrStrOption: '',
+    addrDetail: '',
+    concact: '',
+    remark: '',
+    userLogo: ''
+})
+
+//form表单校验规则
+const rules = {
+    userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+    industry: [{ required: true, message: '所属行业不能为空', trigger: 'blur' }],
+    addr: [{ required: true, message: '所在地区不能为空', trigger: 'change' }]
+}
+const resetForm = () => {
+    if (formRef.value) {
+        formRef.value.resetFields()
+    }
+}
+
+const open = (text: string, data?: anyObj) => {
+    tab.value = 'user'
+    title.value = text
+    //默认选中第一个tab
+    dialogVisible.value = true
+    if (data) {
+        // 表单赋值
+        for (let key in form) {
+            form[key] = data[key]
+        }
+        form.addr = data.addr.split('/')
+        form.keyUser = String(data.keyUser)
+        if (form.userLogo) {
+            getFileUrl({filePath:form.userLogo}).then(res=>{
+                 userLogo.url=res.data
+            })
+            // 图片的name我不知道
+        }
+        //待子组件渲染完毕
+        nextTick(() => {
+            incomingTable.value.getTableData(form.id)
+        })
+    } else {
+        resetForm()
+        // 在此处恢复默认表单
+        for (let key in form) {
+            form[key] = ''
+        }
+        userLogo.url = ''
+        form.keyUser = '1'
+    }
+}
+
+/**
+ * 将联级选择的区域数组转为字符串
+ */
+const reValueAddr = () => {
+    form.addrStrOption = form.addr.join('/')
+}
+
+/**
+ * 选择图片上传
+ * @param e
+ */
+const chooseImage = (e: any) => {
+    uploadFile(e.raw, 'sgGovern/').then(res => {
+        userLogo.name = res.data.name
+        userLogo.url = res.data.url
+        form.userLogo = res.data.name
+        ElMessage.success('新增成功')
+    })
+}
+
+/**
+ * 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
+ */
+const handleRemove = (e: any, userLogo: any) => {
+    form.userLogo = ''
+    userLogo.value = []
+    deleteFile(e.name).then(res => {
+        ElMessage.success('删除成功')
+    })
+}
+
+/**
+ * 预览图片
+ */
+const handlePictureCardPreview = () => {
+    dialogVisibleLogo.value = true
+}
+
+/**
+ * 提交用户表单数据
+ */
+const submit = () => {
+    formRef.value.validate(async (valid: any) => {
+        if (valid) {
+            if (form.id) {
+                form.addrStrOption = form.addr.join('/')
+                await updateSgUser(form)
+                ElMessage.success('更新成功')
+                tableStore.index()
+                //切到进线处
+                dialogVisible.value = false
+            } else {
+                await addSgUser(form).then(res => {
+                    form.id = res.data
+                    //查询进线数据，避免一直处于loading状态
+                    incomingTable.value.getTableData(form.id)
+                    ElMessage.success('保存成功')
+                    tableStore.index()
+                    //切到进线处
+                    tab.value='incomingLine'
+                    dialogVisible.value = true
+                })
+            }
+
+        }
+    })
+}
+
+/************针对tab切换*************/
+const checkUserId = (tab: any, event: any) => {
+    if (tab == 'user') {
+        return true
+    }
+    if (form.id) {
+        return true
+    } else {
+        ElMessage.error('请先创建用户基础信息！')
+        return false
+    }
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-upload-list__item {
+    transition: none !important;
+}
+
+.el-select {
+    min-width: 180px;
+}
+</style>

src/views/system/auth/menu/api.vue

@@ -1,115 +1,115 @@
-<template>
-    <div>
-        <div class="custom-table-header">
-            <div class="title">接口权限列表</div>
-            <el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入菜单名称"
-                class="ml10" clearable @input="search" />
-            <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
-        </div>
-        <Table ref="tableRef" />
-        <popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
-    </div>
-</template>
-<script setup lang="ts">
-import { Plus } from '@element-plus/icons-vue'
-import { ref, Ref, inject, provide, watch } from 'vue'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import popupApi from './popupApi.vue'
-import { deleteMenu } from '@/api/user-boot/function'
-
-
-defineOptions({
-    name: 'auth/menu/api'
-})
-const emits = defineEmits<{
-    (e: 'init'): void
-}>()
-const props = defineProps({
-    id: {
-        type: String,
-        default: ''
-    }
-})
-const tableRef = ref()
-const popupRef = ref()
-const apiList = ref([])
-const tableStore = new TableStore({
-    showPage: false,
-    url: '/user-boot/function/getButtonById',
-    publicHeight: 60,
-    column: [
-        { title: '普通接口/接口名称', field: 'name', },
-        {
-            title: '接口类型', field: 'type', formatter: row => {
-                return row.cellValue == 1 ? '普通接口' : '公用接口'
-            }
-        },
-        { title: 'URL接口路径', field: 'path' },
-        {
-            title: '操作',
-            align: 'center',
-            width: '180',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        popupRef.value.open('编辑接口权限', row)
-                    }
-                },
-                {
-                    name: 'del',
-                    title: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除该菜单吗？'
-                    },
-                    click: row => {
-                        deleteMenu(row.id).then(() => {
-                            tableStore.index()
-                        })
-                    }
-                }
-            ]
-        }
-    ],
-    loadCallback: () => {
-        apiList.value = tableStore.table.data
-        search()
-    }
-})
-tableStore.table.loading = false
-watch(
-    () => props.id,
-    () => {
-        tableStore.table.params.id = props.id
-        tableStore.index()
-    }
-)
-provide('tableStore', tableStore)
-
-const addMenu = () => {
-    console.log(popupRef)
-    popupRef.value.open('新增接口权限', {
-        pid: props.id
-    })
-}
-const search = () => {
-    tableStore.table.data = apiList.value.filter(
-        (item: any) =>
-            !tableStore.table.params.searchValue ||
-            item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
-            item.path.indexOf(tableStore.table.params.searchValue) !== -1
-    )
-}
+<template>
+    <div>
+        <div class="custom-table-header">
+            <div class="title">接口权限列表</div>
+            <el-input v-model="tableStore.table.params.searchValue" style="width: 240px" placeholder="请输入关键字"
+                class="ml10" clearable @input="search" />
+            <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
+        </div>
+        <Table ref="tableRef" />
+        <popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, Ref, inject, provide, watch } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import popupApi from './popupApi.vue'
+import { deleteMenu } from '@/api/user-boot/function'
+
+
+defineOptions({
+    name: 'auth/menu/api'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+}>()
+const props = defineProps({
+    id: {
+        type: String,
+        default: ''
+    }
+})
+const tableRef = ref()
+const popupRef = ref()
+const apiList = ref([])
+const tableStore = new TableStore({
+    showPage: false,
+    url: '/user-boot/function/getButtonById',
+    publicHeight: 60,
+    column: [
+        { title: '普通接口/接口名称', field: 'name', },
+        {
+            title: '接口类型', field: 'type', formatter: row => {
+                return row.cellValue == 1 ? '普通接口' : '公用接口'
+            }
+        },
+        { title: 'URL接口路径', field: 'path' },
+        {
+            title: '操作',
+            align: 'center',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        popupRef.value.open('编辑接口权限', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该菜单吗？'
+                    },
+                    click: row => {
+                        deleteMenu(row.id).then(() => {
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        apiList.value = tableStore.table.data
+        search()
+    }
+})
+tableStore.table.loading = false
+watch(
+    () => props.id,
+    () => {
+        tableStore.table.params.id = props.id
+        tableStore.index()
+    }
+)
+provide('tableStore', tableStore)
+
+const addMenu = () => {
+    console.log(popupRef)
+    popupRef.value.open('新增接口权限', {
+        pid: props.id
+    })
+}
+const search = () => {
+    tableStore.table.data = apiList.value.filter(
+        (item: any) =>
+            !tableStore.table.params.searchValue ||
+            item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
+            item.path.indexOf(tableStore.table.params.searchValue) !== -1
+    )
+}
 </script>

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

@@ -1,84 +1,84 @@
-<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="角色名称" prop="name">
-                    <el-input v-model="form.name" placeholder="请输入菜单名称"  maxlength="32" show-word-limit @input="handleInput"/>
-                </el-form-item>
-                <el-form-item label="角色编码" prop="code">
-                    <el-input v-model="form.code" placeholder="请输入菜单名称" />
-                </el-form-item>
-                <el-form-item label="角色描述">
-                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
-                </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 TableStore from '@/utils/tableStore'
-import { ElMessage } from 'element-plus'
-import { add, update } from '@/api/user-boot/role'
-import { useAdminInfo } from '@/stores/adminInfo'
-
-const adminInfo = useAdminInfo()
-const tableStore = inject('tableStore') as TableStore
-const formRef = ref()
-// do not use same name with ref
-const form = reactive({
-    code: '',
-    name: '',
-    remark: '',
-    id: '',
-    type: 0
-})
-const rules = {
-    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
-    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
-}
-const dialogVisible = ref(false)
-const title = ref('新增菜单')
-const open = (text: string, data?: anyObj) => {
-    title.value = text
-    dialogVisible.value = true
-    if (data) {
-        for (let key in form) {
-            form[key] = data[key]
-        }
-    } else {
-        for (let key in form) {
-            form[key] = ''
-        }
-    }
-}
-const submit = async () => {
-    formRef.value.validate(async (valid: boolean) => {
-        if (valid) {
-          if (form.id) {
-            await update(form)
-        } else {
-            form.type = adminInfo.$state.userType + 1
-            await add(form)
-        }
-        ElMessage.success('保存成功')
-        tableStore.index()
-        dialogVisible.value = false
-        }
-    })
-}
-
-const handleInput = (val: string) => {
-    form.name = val.replace(/\s+/g, '')
-}
-
-defineExpose({ open })
-</script>
+<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="角色名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入菜单名称"  maxlength="32" show-word-limit @input="handleInput"/>
+                </el-form-item>
+                <el-form-item label="角色编码" prop="code">
+                    <el-input v-model="form.code" placeholder="请输入角色编码" />
+                </el-form-item>
+                <el-form-item label="角色描述">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                </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 TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import { add, update } from '@/api/user-boot/role'
+import { useAdminInfo } from '@/stores/adminInfo'
+
+const adminInfo = useAdminInfo()
+const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
+// do not use same name with ref
+const form = reactive({
+    code: '',
+    name: '',
+    remark: '',
+    id: '',
+    type: 0
+})
+const rules = {
+    name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+    code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }]
+}
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        for (let key in form) {
+            form[key] = ''
+        }
+    }
+}
+const submit = async () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+          if (form.id) {
+            await update(form)
+        } else {
+            form.type = adminInfo.$state.userType + 1
+            await add(form)
+        }
+        ElMessage.success('保存成功')
+        tableStore.index()
+        dialogVisible.value = false
+        }
+    })
+}
+
+const handleInput = (val: string) => {
+    form.name = val.replace(/\s+/g, '')
+}
+
+defineExpose({ open })
+</script>

src/views/system/strategyManage/index.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="strategy-manage pd10" :style="height">
+        <el-form :inline="true" class="demo-form-inline">
+            <el-form-item>
+                <el-button @click="AddClick()" type="primary" :icon="Plus">保存</el-button>
+            </el-form-item>
+        </el-form>
+        <div style="width: 500px">
+            <el-form ref="formRef" :model="form" label-width="auto" :rules="rules">
+                <el-divider content-position="left">系统策略</el-divider>
+                <el-form-item label="最大并发数:" prop="maxUseUser">
+                    <el-input-number
+                        v-model.number="form.maxUseUser"
+                        :min="10"
+                        :max="99"
+                        style="width: 100%"
+                    ></el-input-number>
+                </el-form-item>
+                <el-divider content-position="left">账号锁定策略</el-divider>
+                <el-form-item label="密码输入错误次数:" prop="errorsCount">
+                    <el-input-number
+                        v-model.number="form.errorsCount"
+                        :min="3"
+                        :max="20"
+                        style="width: 100%"
+                    ></el-input-number>
+                </el-form-item>
+                <el-form-item label="自动解锁(分钟):" prop="releaseTime">
+                    <el-input-number
+                        v-model.number="form.releaseTime"
+                        :min="5"
+                        :max="60"
+                        style="width: 100%"
+                    ></el-input-number>
+                </el-form-item>
+                <el-form-item label="会话超时时间(秒):" prop="sessionTime">
+                    <el-input-number v-model.number="form.sessionTime" :min="10" style="width: 100%"></el-input-number>
+                </el-form-item>
+                <el-form-item label="token刷新时间(秒):" prop="sessionRefreshTime">
+                    <el-input-number
+                        v-model.number="form.sessionRefreshTime"
+                        :min="10"
+                        style="width: 100%"
+                    ></el-input-number>
+                </el-form-item>
+                <el-divider content-position="left">账号密码复杂度校验</el-divider>
+                <el-form-item label="密码有效期(月):" prop="passwordExpirationMonth">
+                    <el-input-number
+                        v-model.number="form.passwordExpirationMonth"
+                        :min="1"
+                        :max="6"
+                        style="width: 100%"
+                    ></el-input-number>
+                </el-form-item>
+                <el-form-item label="账号长时间未登录休眠期(天):" prop="sleepDay">
+                    <el-input-number
+                        v-model.number="form.sleepDay"
+                        :min="1"
+                        :max="180"
+                        style="width: 100%"
+                    ></el-input-number>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { ruleUpdate, getRule, unlockRoot } from '@/api/admin/user.js'
+import { Plus } from '@element-plus/icons-vue'
+import { mainHeight } from '@/utils/layout'
+
+// 页面缓存
+defineOptions({
+    name: 'system-boot/sysConfig/timer'
+})
+
+const height = mainHeight(20)
+
+// 定义表单引用
+const formRef = ref()
+
+// 定义表单数据
+const form = reactive({
+    maxUseUser: 50,
+    errorsCount: 0,
+    passwordExpirationMonth: 0,
+    sleepDay: 90,
+    releaseTime: 0,
+    sessionTime: 0,
+    sessionRefreshTime: 0
+})
+
+// 定义表单验证规则
+const rules = {
+    maxUseUser: [{ required: true, message: '请填写最大并发数', trigger: 'blur' }],
+    errorsCount: [{ required: true, message: '请填写密码输入错误次数', trigger: 'blur' }],
+    releaseTime: [{ required: true, message: '请填写自动解锁(分钟)', trigger: 'blur' }],
+    sessionTime: [{ required: true, message: '请填写会话超时时间', trigger: 'blur' }],
+    sessionRefreshTime: [{ required: true, message: '请填写会话刷新时间', trigger: 'blur' }],
+    passwordExpirationMonth: [{ required: true, message: '请填写密码有效期', trigger: 'blur' }],
+    sleepDay: [{ required: true, message: '请填写休眠期', trigger: 'blur' }]
+}
+
+// 获取策略信息
+const info = () => {
+    getRule().then(res => {
+        Object.assign(form, res.data)
+    })
+}
+
+// 保存策略
+const AddClick = () => {
+    formRef.value.validate(valid => {
+        if (valid) {
+            ruleUpdate(form).then(res => {
+                Object.assign(form, res.data)
+                ElMessage({
+                    message: '保存成功',
+                    type: 'success'
+                })
+                info()
+            })
+        }
+    })
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+    info()
+})
+</script>
+
+<style lang="less" scoped>
+.strategy-manage {
+    background-color: #fff;
+    margin: 10px;
+}
+
+:deep(.el-form-item__label ){
+    color: var(--el-color-primary);
+    font-weight: 600;
+}
+</style>

types/table.d.ts

@@ -83,6 +83,8 @@ declare global {
             index: number
         ) => string
         children?: TableColumn[]
+        property?: string
+        clickable?: boolean  // 是否可点击
     }
 
     /* 表格右侧操作按钮 */

vite.config.ts

@@ -1,54 +1,56 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import AutoImport from 'unplugin-auto-import/vite'
-import { svgBuilder } from '/@/components/icon/svg/index'
-
-import path from 'path'
-
-const nodeResolve = (dir: string): any => path.resolve(__dirname, '.', dir)
-// https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [
-        vue(),
-        svgBuilder('./src/assets/icons/'),
-        vueJsx(),
-        AutoImport({
-            //自动引入
-            imports: ['vue', 'vue-router', 'pinia']
-        })
-    ],
-    server: {
-        host: '0.0.0.0',
-        open: true,
-        proxy: {
-            '/api': {
-                // target: 'http://10.95.53.49:10215', //海南服务器ip
-                // target: 'http://10.118.135.128:10215', ///hsw
-                target: 'http://192.168.1.29:10215', ///hsw
-                //  target: 'http://10.119.65.152:10215', //数据中心
-                changeOrigin: true,
-                rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
-            },
-            '/api-docx': {
-                // 文件服务器地址
-                target: 'http://192.168.1.22:9009',
-                changeOrigin: true,
-                rewrite: path => path.replace(/^\/api-docx/, '')
-            },
-            '/map': {
-                // target: 'http://10.95.53.49:8088', //海南服务器ip
-                target: 'http://192.168.1.125:9009', //hsw
-                // target: 'http://192.168.1.125:8088', //数据中心
-                changeOrigin: true
-            }
-        }
-    },
-    resolve: {
-        alias: {
-            '/@': nodeResolve('.src'),
-            '@': nodeResolve('src'),
-            '~': nodeResolve('public')
-        }
-    }
-})
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import AutoImport from 'unplugin-auto-import/vite'
+import { svgBuilder } from '/@/components/icon/svg/index'
+
+import path from 'path'
+
+const nodeResolve = (dir: string): any => path.resolve(__dirname, '.', dir)
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        vue(),
+        svgBuilder('./src/assets/icons/'),
+        vueJsx(),
+        AutoImport({
+            //自动引入
+            imports: ['vue', 'vue-router', 'pinia']
+        })
+    ],
+    server: {
+        host: '0.0.0.0',
+        open: true,
+        proxy: {
+            '/api': {
+                // target: 'http://10.95.53.49:10215', //海南服务器ip
+                // target: 'http://10.118.135.128:10215', ///hsw
+                target: 'http://192.168.1.67:10215', ///hsw
+                // target: 'http://192.168.1.68:10215', ///hsw
+                //  target: 'http://10.119.65.152:10215', //数据中心
+                changeOrigin: true,
+                rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
+            },
+            '/api-docx': {
+                // 文件服务器地址
+                target: 'http://192.168.1.68:9009',
+                changeOrigin: true,
+                rewrite: path => path.replace(/^\/api-docx/, '')
+            },
+            '/map': {
+                // target: 'http://10.95.53.49:8088', //海南服务器ip
+                target: 'http://192.168.1.125:9009', //hsw
+                // target: 'http://192.168.1.125:8088', //数据中心
+                changeOrigin: true
+            }
+        }
+    },
+    resolve: {
+        alias: {
+            '/@': nodeResolve('.src'),
+            '@': nodeResolve('src'),
+            '~': nodeResolve('public')
+        }
+    }
+})
+