166 lines
4.5 KiB
Vue
166 lines
4.5 KiB
Vue
<template>
|
||
<div>
|
||
<!--敏感负荷列表 -->
|
||
<TableHeader
|
||
ref="TableHeaderRef"
|
||
:showReset="false"
|
||
@selectChange="selectChange"
|
||
datePicker
|
||
v-if="fullscreen" :timeKeyList="prop.timeKey"
|
||
></TableHeader>
|
||
<Table
|
||
ref="tableRef"
|
||
@cell-click="cellClickEvent"
|
||
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
|
||
isGroup
|
||
></Table>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||
import TableStore from '@/utils/tableStore'
|
||
import Table from '@/components/table/index.vue'
|
||
import TableHeader from '@/components/table/header/index.vue'
|
||
import { useDictData } from '@/stores/dictData'
|
||
import { getTime } from '@/utils/formatTime'
|
||
|
||
const prop = defineProps({
|
||
w: { type: [String, Number] },
|
||
h: { type: [String, Number] },
|
||
width: { type: [String, Number] },
|
||
height: { type: [String, Number] },
|
||
timeKey: { type: Array as () => string[] },
|
||
timeValue: { type: Object },
|
||
interval: { type: Number }
|
||
})
|
||
|
||
const headerHeight = ref(57)
|
||
|
||
const TableHeaderRef = ref()
|
||
|
||
const dictData = useDictData()
|
||
const sensitiveUserType = dictData.getBasicData('Sensitive_User_Type')
|
||
|
||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||
headerHeight.value = height
|
||
|
||
if (datePickerValue && datePickerValue.timeValue) {
|
||
// 更新时间参数
|
||
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
||
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
||
}
|
||
}
|
||
|
||
// 计算是否全屏展示
|
||
const fullscreen = computed(() => {
|
||
const w = Number(prop.w)
|
||
const h = Number(prop.h)
|
||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||
// 执行相应逻辑
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
|
||
const OverLimitDetailsRef = ref()
|
||
const tableStore: any = new TableStore({
|
||
url: '/cs-harmonic-boot/pqSensitiveUser/getList',
|
||
method: 'POST',
|
||
showPage: fullscreen.value ? true : false,
|
||
column: [
|
||
{
|
||
field: 'index',
|
||
title: '序号',
|
||
width: '80',
|
||
formatter: (row: any) => {
|
||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||
}
|
||
},
|
||
{
|
||
title: '敏感负荷名称',
|
||
field: 'name',
|
||
minWidth: '90'
|
||
},
|
||
|
||
{
|
||
title: '敏感负荷类型',
|
||
field: 'loadType',
|
||
minWidth: '70',
|
||
formatter: row => {
|
||
return sensitiveUserType.filter(item => item.id == row.cellValue)[0]?.name
|
||
}
|
||
},
|
||
{
|
||
title: '是否监测',
|
||
field: 'isMonitor',
|
||
minWidth: '80'
|
||
},
|
||
{
|
||
title: '是否治理',
|
||
field: 'isGovern',
|
||
minWidth: '80'
|
||
}
|
||
],
|
||
beforeSearchFun: () => {
|
||
setTime()
|
||
},
|
||
|
||
loadCallback: () => {}
|
||
})
|
||
|
||
const tableRef = ref()
|
||
provide('tableRef', tableRef)
|
||
|
||
provide('tableStore', tableStore)
|
||
|
||
// 点击行
|
||
const cellClickEvent = ({ row, column }: any) => {
|
||
if (column.field != 'name') {
|
||
console.log(row)
|
||
OverLimitDetailsRef.value.open(row)
|
||
}
|
||
}
|
||
|
||
const setTime = () => {
|
||
const time = getTime(
|
||
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
||
prop.timeKey,
|
||
fullscreen.value
|
||
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||
: prop.timeValue
|
||
)
|
||
|
||
if (Array.isArray(time)) {
|
||
tableStore.table.params.searchBeginTime = time[0]
|
||
tableStore.table.params.searchEndTime = time[1]
|
||
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||
} else {
|
||
console.warn('获取时间失败，time 不是一个有效数组')
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
tableStore.index()
|
||
}, 500)
|
||
})
|
||
watch(
|
||
() => prop.timeKey,
|
||
val => {
|
||
tableStore.index()
|
||
}
|
||
)
|
||
watch(
|
||
() => prop.timeValue,
|
||
(newVal, oldVal) => {
|
||
tableStore.index()
|
||
},
|
||
{
|
||
deep: true
|
||
}
|
||
)
|
||
</script>
|
||
<style lang="scss" scoped></style>
|