稳态电能质量分析页面组件

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/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>

types/table.d.ts

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