稳态电能质量分析页面组件
This commit is contained in:
stt
234
src/components/table/indexClick.vue
Normal file
234
src/components/table/indexClick.vue
Normal file
@@ -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>
|
||||||
@@ -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 += '监测点数' + ':' + ' ' + ' ' + 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>
|
||||||
106
src/views/cockpit/teadyStatePowerQuality/pointList.vue
Normal file
106
src/views/cockpit/teadyStatePowerQuality/pointList.vue
Normal file
@@ -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>
|
||||||
5
types/table.d.ts
vendored
5
types/table.d.ts
vendored
@@ -82,8 +82,9 @@ declare global {
|
|||||||
column: VxeColumnProps,
|
column: VxeColumnProps,
|
||||||
index: number
|
index: number
|
||||||
) => string
|
) => string
|
||||||
children?: TableColumn[],
|
children?: TableColumn[]
|
||||||
property?:string
|
property?: string
|
||||||
|
clickable?: boolean // 是否可点击
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表格右侧操作按钮 */
|
/* 表格右侧操作按钮 */
|
||||||
|
|||||||
Reference in New Issue
Block a user