sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多机报表

Browse Source
This commit is contained in:
郁万成 2024-10-31 16:42:34 +08:00
parent a3c29f08b1
commit c858f66eb7
5 changed files with 1156 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

542
ui/dasadmin/src/views/backend/report/MulipleReport.vue Normal file
View File

@ -0,0 +1,542 @@
<template>
<div class="report">
<div class="topForm">
<div class="forms">
<el-space>
<div style="min-width: 30px">{{ t('statAnalysis.deviceId') }}</div>
<el-select
v-model="windBlowerValue"
@change="selectWindBlower"
:placeholder="'请选择' + t('statAnalysis.deviceId')"
class="windBlowerSelect commonSelect"
multiple
collapse-tags
:max-collapse-tags="2"
>
<el-option v-for="v in windBlowerList" :key="v.irn" :label="v.name" :value="v.irn"></el-option>
</el-select>
<div style="width: 20px"></div>
<div style="min-width: 30px">时间</div>
<el-date-picker
style="height: 40px"
v-model="timeRange"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
range-separator="-"
:start-placeholder="t('alarm.selectDate')"
:end-placeholder="t('alarm.selectDate')"
:shortcuts="shortcuts"
/>
<div style="width: 20px"></div>
<div style="min-width: 30px">{{ t('statAnalysis.interval') }}</div>
<el-select v-model="interval" :placeholder="'请选择' + t('statAnalysis.interval')" class="commonSelect">
<el-option v-for="v in intervals" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select>
<div style="width: 20px"></div>
</el-space>
<div>
<el-space style="margin-top: 10px">
<div style="min-width: 30px">模板</div>
<el-select v-model="template" placeholder="请选择模板" class="commonSelect">
<el-option v-for="v in templateList" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select>
</el-space>
</div>
</div>
<div class="buttons">
<el-button class="button" :icon="Search" @click="queryHistoryData" type="primary">查询</el-button>
<el-button class="button" :icon="Upload" type="primary" plain>导出</el-button>
<el-button class="button" :icon="Notebook" type="primary" plain>保存为模板</el-button>
</div>
</div>
<el-table
class="mainReport"
:columns="reportTableColumn"
:data="reportTableData"
:row-key="(row: any) => row.id"
:row-style="tableRowClassName"
v-loading="reportLoading"
>
<el-table-column prop="deviceId" label="风机" fixed width="80px" align="center">
<template #default="scope">
{{ windBlowerList.find((val) => val.irn == scope.row.deviceId)!.name }}
</template>
</el-table-column>
<el-table-column prop="time" label="时间" fixed width="180px" align="center"> </el-table-column>
<el-table-column
v-for="item in reportTableColumn.length ? reportTableColumn : [{ prop: '', label: '', unit: '' }]"
:key="item.prop"
:label="item.label"
:prop="item.prop"
align="center"
>
<template #header="scope">
<div class="header-cell">
<div style="margin-right: 2px">
{{ item.label }} <br />
{{ item.unit ? `(${item.unit})` : '' }}
</div>
<el-popconfirm v-if="item.label" title="确定删除？" @confirm="removeColumn(scope)">
<template #reference>
<el-button class="delete-icon" type="danger" size="small">-</el-button>
</template>
</el-popconfirm>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center" fixed="right">
<template #header="scope">
<el-button type="primary" size="small" :icon="Plus" @click="addColumn"> </el-button>
</template>
</el-table-column>
</el-table>
<!-- <el-button type="primary" @click="addRow" size="small" style="margin-top: 10px">+</el-button> -->
<el-dialog v-model="showMeasure" title="测点名称" :width="900" :destroy-on-close="true">
<template #header>
<div class="measureSlotHeader">
<span style="font-size: 20px">测点名称</span>
</div>
</template>
<div class="measureSlot">
<Measurement
ref="measureRef"
:show="showMeasure"
:iotModelId="iotModelId"
@handleSelections="handleSelections"
:reportTableColumn="reportTableColumn"
></Measurement>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showMeasure = false">取消</el-button>
<el-button type="primary" @click="selectMeasurePoint"> 确认 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElMessage, TableInstance, TreeInstance } from 'element-plus'
import { Search, Upload, Notebook, Plus } from '@element-plus/icons-vue'
import { WindBlowerList, RequestData, Devices } from './type'
import { queryWindTurbinesPages, historyReq } from '/@/api/backend/statAnalysis/request'
import Measurement from './measureList.vue'
import { useI18n } from 'vue-i18n'
import { shortUuid } from '/@/utils/random'
const { t } = useI18n()
import { useAdminInfo } from '/@/stores/adminInfo'
const adminInfo = useAdminInfo()
const shortcuts = [
{
text: '今天',
value: () => {
const start = getFormattedDate(0) + ' 00:00:00'
const end = new Date()
return [start, end]
},
},
{
text: '昨天',
value: () => {
const start = getFormattedDate(-1) + ' 00:00:00'
const end = getFormattedDate(-1) + ' 23:59:59'
return [start, end]
},
},
{
text: '前3天',
value: () => {
const start = getFormattedDate(-3) + ' 00:00:00'
const end = getFormattedDate(-1) + ' 23:59:59'
return [start, end]
},
},
{
text: '本周',
value: () => {
return getDateRange('week')
},
},
{
text: '本月',
value: () => {
return getDateRange('month')
},
},
]
const tableRowClassName = ({ rowIndex }: any) => {
if (rowIndex % 2 === 1) {
return { background: '#ebf3f9' }
}
return {}
}
const activeIndex = ref('2')
const handleClick = (val: any) => {
activeIndex.value = val.props.name
}
// 运行报表
const dateValue = ref('')
// 单机报表
// 风机
const windBlowerValue = ref([] as any)
const windBlowerList = ref<WindBlowerList[]>([])
// 时间
const timeRange = ref([])
// 间隔
const interval = ref('')
const intervals = [
{ label: '五分钟', value: '5m' },
{ label: '十五分钟', value: '15m' },
{ label: '一小时', value: '1h' },
{ label: '一天', value: '1d' },
{ label: '原始', value: 'NONE' },
]
// 模板
const template = ref('')
const templateList = [
{ label: '模板一', value: '1' },
{ label: '模板二', value: '2' },
]
// 测点名称
const showMeasure = ref(false)
const currentChooseRows = ref([])
const iotModelId = ref('')
const measureRef = ref()
const queryWindBlower = () => {
queryWindTurbinesPages().then((res) => {
if (res.code == 200) {
windBlowerList.value = res.data.map((item: WindBlowerList) => {
return {
irn: item.irn,
name: item.name ?? '-',
modelId: item.modelId,
}
})
windBlowerValue.value = windBlowerList.value.map((item) => item.irn)
reportTableData.value = windBlowerList.value.map((val) => {
return {
deviceId: val.irn,
id: shortUuid(),
}
})
}
})
}
const selectWindBlower = (val: any) => {
if (val.length) {
let rankWindBlowerValue = [] as any
windBlowerList.value.forEach((element: any) => {
if (val.includes(element.irn)) {
rankWindBlowerValue.push(element.irn)
}
})
windBlowerValue.value = rankWindBlowerValue
reportTableData.value = reportTableData.value.filter((item: any) => windBlowerValue.value.includes(item.deviceId))
} else {
reportTableData.value = []
}
}
const addColumn = () => {
if (!windBlowerValue.value.length) return ElMessage.warning('请先选择风机！')
iotModelId.value = windBlowerList.value[0].modelId
showMeasure.value = true
}
const addRow = () => {}
const removeColumn = (val: any) => {
const columnName = val.column.property
reportTableColumn.value = reportTableColumn.value.filter((val) => val.prop !== columnName)
}
const handleSelections = (value: any) => {
currentChooseRows.value = JSON.parse(JSON.stringify(value))
}
// 去重
const uniqueByProp = (arr: any) => {
const seen = new Set()
return arr.filter((item: any) => {
if (!seen.has(item.prop)) {
seen.add(item.prop)
return true
}
return false
})
}
const selectMeasurePoint = () => {
reportTableColumn.value = currentChooseRows.value.map((val: any) => {
return {
label: val.label || val.attributeName,
prop: val.prop || val.attributeCode,
unit: val.unit || '',
}
})
reportTableColumn.value = uniqueByProp(reportTableColumn.value)?.filter((item: any) => {
return item.prop != null && item.prop !== ''
})
if (!reportTableColumn.value.length) {
reportTableData.value = []
}
showMeasure.value = false
}
const reportLoading = ref(false)
const reportTableColumn = ref([
{
label: `风速`,
prop: 'iWindSpeed',
unit: 'm/s',
},
{
label: '有功功率',
prop: 'iGenPower',
unit: 'MW',
},
{
label: '日发电量',
prop: 'iKWhThisDay',
unit: 'kWh',
},
{
label: '总发电量',
prop: 'iKWhOverall',
unit: 'kWh',
},
{
label: '机舱角度',
prop: 'iVaneDirection',
unit: '',
},
{
label: '叶轮转速',
prop: 'iRotorSpeed',
unit: 'rmp',
},
{
label: '发电机转速',
prop: 'iReactivePower',
unit: 'rmp',
},
{
label: '机舱温度',
prop: 'iTempNacelle_1sec',
unit: '℃',
},
{
label: '主由路压力',
prop: 'iHydrPress',
unit: 'kpa',
},
])
const reportTableData = ref([] as any)
// const idCounter = ref(0)
const queryHistoryData = () => {
if (!windBlowerValue.value.length) return ElMessage.warning('请选择风机！')
if (!timeRange.value.length) return ElMessage.warning('请选择时间！')
if (!interval.value) return ElMessage.warning('请选择间隔！')
const attributeCodes = reportTableColumn.value.map((val) => val.prop).filter((item) => item != null && item !== '')
if (!attributeCodes.length) return ElMessage.warning('请添加测点！')
reportLoading.value = true
// idCounter.value = 0
const requestData = {
interval: interval.value,
startTime: new Date(timeRange.value[0]).getTime(),
endTime: new Date(timeRange.value[1]).getTime(),
devices: windBlowerValue.value.map((deviceId: any) => {
return {
deviceId,
attributes: [...attributeCodes],
}
}),
} as any
historyReq(requestData)
.then((res) => {
if (res.code == 200) {
const result = res.data
if (Object.keys(result)?.length) {
const transResults = [] as any
windBlowerValue.value.forEach((deviceId: any) => {
const realResult = result[deviceId]
if (realResult) {
let tableData = [] as any
attributeCodes.forEach((item) => {
if (Object.keys(realResult).includes(item)) {
tableData.push({
name: item,
times: realResult[item].times,
value: realResult[item].values,
deviceId,
})
}
})
const processedData = new Map()
if (tableData.length) {
tableData.forEach(({ name, times, value, deviceId }: any) => {
times.forEach((time: number, index: number) => {
if (!processedData.has(time)) {
processedData.set(time, { id: shortUuid(), time: timestampToTime(time), deviceId })
}
processedData.get(time)[name] = value[index]
})
})
}
return transResults.push(Array.from(processedData.values()))
} else {
return transResults.push([])
}
})
const lastResults = generateMissingData(transResults, windBlowerValue.value)
reportTableData.value = lastResults.flat()
if (!reportTableData.value.length) {
ElMessage.warning('查询数据为空！')
}
} else {
ElMessage.warning('查询数据为空！')
reportTableData.value = []
}
reportLoading.value = false
} else {
reportLoading.value = false
}
})
.catch((error) => {
reportLoading.value = false
ElMessage.warning('请求出错')
console.error(error)
})
// Promise.all(requests)
// .then((response: any) => {
// const lastResults = generateMissingData(response, windBlowerValue.value)
// reportTableData.value = lastResults.flat()
// if (!reportTableData.value.length) {
// ElMessage.warning('查询数据为空！')
// }
// reportLoading.value = false
// })
// .catch((error) => {
// reportLoading.value = false
// ElMessage.warning('请求出错')
// console.error(error)
// })
}
const generateMissingData = (data: any, deviceIds: any) => {
const firstNonEmptyArray = data.find((subArray: any) => subArray.length > 0)
if (!firstNonEmptyArray) return []
const result = [] as any
const allKeys = Object.keys(firstNonEmptyArray[0])
deviceIds.forEach((deviceId: any, index: number) => {
const deviceData = data[index]
if (!deviceData.length) {
const generatedData = firstNonEmptyArray.map((item: any) => {
const generatedItem = {
id: item.id + 1,
time: item.time,
deviceId: deviceId,
} as any
allKeys.forEach((key: any) => {
if (!['id', 'time', 'deviceId'].includes(key)) {
generatedItem[key] = '-'
}
})
return generatedItem
})
result.push(generatedData)
} else {
result.push(deviceData)
}
})
return result
}
// 时间转换
const getFormattedDate = (offset: number) => {
const date = new Date()
date.setDate(date.getDate() + offset)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
const getDateRange = (type: 'week' | 'month') => {
const today = new Date()
if (type === 'week') {
const dayOfWeek = today.getDay()
const startOfWeek = new Date(today)
startOfWeek.setDate(today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1))
startOfWeek.setHours(0, 0, 0, 0)
const endOfWeek = new Date(startOfWeek)
endOfWeek.setDate(startOfWeek.getDate() + 6)
endOfWeek.setHours(23, 59, 59, 999)
return [startOfWeek, endOfWeek]
}
if (type === 'month') {
const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
startOfMonth.setHours(0, 0, 0, 0)
const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0)
endOfMonth.setHours(23, 59, 59, 999)
return [startOfMonth, endOfMonth]
}
}
const timestampToTime = (timestamp: any) => {
let timestamps = timestamp ? timestamp : null
let date = new Date(timestamps)
let Y = date.getFullYear() + '-'
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return Y + M + D + h + m + s
}
onMounted(() => {
queryWindBlower()
})
</script>
<style lang="scss" scoped>
.topForm {
display: flex;
margin-bottom: 10px;
overflow-x: auto;
height: 110px;
.buttons {
margin-left: 10px;
display: flex;
justify-content: flex-end;
flex: 1;
}
}
.mainReport {
width: 100%;
height: calc(100% - 155px);
}
.commonSelect {
min-width: 250px;
:deep(.el-select__wrapper) {
height: 40px;
}
}
.button {
height: 40px;
}
.delete-icon {
cursor: pointer;
display: none;
}
.header-cell {
display: flex;
justify-content: center;
align-items: center;
&:hover .delete-icon {
display: block;
}
}
</style>

462
ui/dasadmin/src/views/backend/report/SingleReport.vue Normal file
View File

@ -0,0 +1,462 @@
<template>
<div class="report" style="width: 100%; height: 100%">
<div class="topForm">
<div class="forms">
<el-space>
<div style="min-width: 30px">{{ t('statAnalysis.deviceId') }}</div>
<el-select
v-model="windBlowerValue"
@change="selectWindBlower"
:placeholder="'请选择' + t('statAnalysis.deviceId')"
class="windBlowerSelect commonSelect"
>
<el-option v-for="v in windBlowerList" :key="v.irn" :label="v.name" :value="v.irn"></el-option>
</el-select>
<div style="width: 20px"></div>
<div style="min-width: 30px">时间</div>
<el-date-picker
style="height: 40px"
v-model="timeRange"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
range-separator="-"
:start-placeholder="t('alarm.selectDate')"
:end-placeholder="t('alarm.selectDate')"
:shortcuts="shortcuts"
/>
<div style="width: 20px"></div>
<div style="min-width: 30px">{{ t('statAnalysis.interval') }}</div>
<el-select v-model="interval" :placeholder="'请选择' + t('statAnalysis.interval')" class="commonSelect">
<el-option v-for="v in intervals" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select>
</el-space>
<div>
<el-space style="margin-top: 10px">
<div style="min-width: 30px">模板</div>
<el-select v-model="template" placeholder="请选择模板" class="commonSelect">
<el-option v-for="v in templateList" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select>
<div style="width: 20px"></div>
<!-- <div>{{ t('statAnalysis.attributes') }}</div>
<el-input
style="width: 200px; height: 40px"
v-model="currentChoose"
:placeholder="'请选择' + t('statAnalysis.attributes')"
></el-input>
<el-button type="primary" size="small" :icon="Plus" circle @click="chooseMeasurePoint"> </el-button> -->
</el-space>
</div>
</div>
<div class="buttons">
<el-button class="button" :icon="Search" @click="queryHistoryData" type="primary">查询</el-button>
<el-button class="button" :icon="Upload" type="primary" plain>导出</el-button>
<el-button class="button" :icon="Notebook" type="primary" plain>保存为模板</el-button>
</div>
</div>
<el-table
class="mainReport"
:columns="reportTableColumn"
:data="reportTableData"
:row-key="(row: any) => row.id"
:row-style="tableRowClassName"
v-loading="reportLoading"
>
<el-table-column prop="time" label="时间" fixed width="180px" align="center"> </el-table-column>
<el-table-column
v-for="item in reportTableColumn.length ? reportTableColumn : [{ prop: '', label: '', unit: '' }]"
:key="item.prop"
:label="item.label"
:prop="item.prop"
align="center"
>
<template #header="scope">
<div class="header-cell">
<div style="margin-right: 2px">
{{ item.label }} <br />
{{ item.unit ? `(${item.unit})` : '' }}
</div>
<el-popconfirm v-if="item.label" title="确定删除？" @confirm="removeColumn(scope)">
<template #reference>
<el-button class="delete-icon" type="danger" size="small">-</el-button>
</template>
</el-popconfirm>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center" fixed="right">
<template #header="scope">
<el-button type="primary" size="small" :icon="Plus" @click="chooseMeasurePoint"> </el-button>
</template>
</el-table-column>
</el-table>
<el-dialog v-model="showMeasure" title="测点名称" :width="900" :destroy-on-close="true">
<template #header>
<div class="measureSlotHeader">
<span style="font-size: 20px">测点名称</span>
</div>
</template>
<div class="measureSlot">
<Measurement
ref="measureRef"
:show="showMeasure"
:iotModelId="iotModelId"
@handleSelections="handleSelections"
:reportTableColumn="reportTableColumn"
></Measurement>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showMeasure = false">取消</el-button>
<el-button type="primary" @click="selectMeasurePoint"> 确认 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElMessage, TableInstance, TreeInstance } from 'element-plus'
import { Search, Upload, Notebook, Plus } from '@element-plus/icons-vue'
import { WindBlowerList, RequestData, Devices } from './type'
import { queryWindTurbinesPages, historyReq } from '/@/api/backend/statAnalysis/request'
import Measurement from './measureList.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useAdminInfo } from '/@/stores/adminInfo'
const adminInfo = useAdminInfo()
const shortcuts = [
{
text: '今天',
value: () => {
const start = getFormattedDate(0) + ' 00:00:00'
const end = new Date()
return [start, end]
},
},
{
text: '昨天',
value: () => {
const start = getFormattedDate(-1) + ' 00:00:00'
const end = getFormattedDate(-1) + ' 23:59:59'
return [start, end]
},
},
{
text: '前3天',
value: () => {
const start = getFormattedDate(-3) + ' 00:00:00'
const end = getFormattedDate(-1) + ' 23:59:59'
return [start, end]
},
},
{
text: '本周',
value: () => {
return getDateRange('week')
},
},
{
text: '本月',
value: () => {
return getDateRange('month')
},
},
]
const tableRowClassName = ({ rowIndex }: any) => {
if (rowIndex % 2 === 1) {
return { background: '#ebf3f9' }
}
return {}
}
const activeIndex = ref('2')
const handleClick = (val: any) => {
activeIndex.value = val.props.name
}
// 运行报表
const dateValue = ref('')
// 单机报表
// 风机
const windBlowerValue = ref('')
const windBlowerList = ref<WindBlowerList[]>([])
// 时间
const timeRange = ref([])
// 间隔
const interval = ref('')
const intervals = [
{ label: '五分钟', value: '5m' },
{ label: '十五分钟', value: '15m' },
{ label: '一小时', value: '1h' },
{ label: '一天', value: '1d' },
{ label: '原始', value: 'NONE' },
]
// 模板
const template = ref('')
const templateList = [
{ label: '模板一', value: '1' },
{ label: '模板二', value: '2' },
]
// 测点名称
const showMeasure = ref(false)
const currentChoose = ref('')
const currentChooseRows = ref([])
const iotModelId = ref('')
const measureRef = ref()
const queryWindBlower = () => {
queryWindTurbinesPages().then((res) => {
if (res.code == 200) {
windBlowerList.value = res.data.map((item: WindBlowerList) => {
return {
irn: item.irn,
name: item.name ?? '-',
modelId: item.modelId,
}
})
}
})
}
const selectWindBlower = (val: any) => {
console.log(val, 9999)
}
const chooseMeasurePoint = () => {
if (!windBlowerValue.value) return ElMessage.warning('请先选择风机！')
iotModelId.value = windBlowerList.value.find((val) => val.irn == windBlowerValue.value)!.modelId
showMeasure.value = true
}
const removeColumn = (val: any) => {
const columnName = val.column.property
reportTableColumn.value = reportTableColumn.value.filter((val) => val.prop !== columnName)
}
const handleSelections = (value: any) => {
currentChooseRows.value = JSON.parse(JSON.stringify(value))
}
// 去重
const uniqueByProp = (arr: any) => {
const seen = new Set()
return arr.filter((item: any) => {
if (!seen.has(item.prop)) {
seen.add(item.prop)
return true
}
return false
})
}
const selectMeasurePoint = () => {
reportTableColumn.value = currentChooseRows.value.map((val: any) => {
return {
label: val.label || val.attributeName,
prop: val.prop || val.attributeCode,
unit: val.unit || '',
}
})
reportTableColumn.value = uniqueByProp(reportTableColumn.value)?.filter((item: any) => {
return item.prop != null && item.prop !== ''
})
if (!reportTableColumn.value.length) {
reportTableData.value = []
}
showMeasure.value = false
}
const reportLoading = ref(false)
const reportTableColumn = ref([
{
label: `风速`,
prop: 'iWindSpeed',
unit: 'm/s',
},
{
label: '有功功率',
prop: 'iGenPower',
unit: 'MW',
},
{
label: '日发电量',
prop: 'iKWhThisDay',
unit: 'kWh',
},
{
label: '总发电量',
prop: 'iKWhOverall',
unit: 'kWh',
},
{
label: '机舱角度',
prop: 'iVaneDirection',
unit: '',
},
{
label: '叶轮转速',
prop: 'iRotorSpeed',
unit: 'rmp',
},
{
label: '发电机转速',
prop: 'iReactivePower',
unit: 'rmp',
},
{
label: '机舱温度',
prop: 'iTempNacelle_1sec',
unit: '℃',
},
{
label: '主由路压力',
prop: 'iHydrPress',
unit: 'kpa',
},
])
const reportTableData = ref([])
const idCounter = ref(0)
const queryHistoryData = () => {
if (!windBlowerValue.value) return ElMessage.warning('请选择风机！')
if (!timeRange.value.length) return ElMessage.warning('请选择时间！')
if (!interval.value) return ElMessage.warning('请选择间隔！')
const attributeCodes = reportTableColumn.value.map((val) => val.prop).filter((item) => item != null && item !== '')
if (!attributeCodes.length) return ElMessage.warning('请添加测点！')
reportLoading.value = true
const requestData = {
devices: [
{
deviceId: windBlowerValue.value,
attributes: [...attributeCodes],
},
],
interval: interval.value,
startTime: new Date(timeRange.value[0]).getTime(),
endTime: new Date(timeRange.value[1]).getTime(),
} as any
historyReq(requestData).then((res) => {
if (res.code == 200) {
const result = res.data
if (Object.keys(result)?.length) {
const realResult = result[windBlowerValue.value]
let tableData = [] as any
attributeCodes.forEach((item) => {
if (Object.keys(realResult).includes(item)) {
tableData.push({
name: item,
times: realResult[item].times,
value: realResult[item].values,
})
}
})
const processedData = new Map()
idCounter.value = 0
if (tableData.length) {
tableData.forEach(({ name, times, value }: any) => {
times.forEach((time: number, index: number) => {
if (!processedData.has(time)) {
processedData.set(time, { id: idCounter.value++, time: timestampToTime(time) })
}
processedData.get(time)[name] = value[index]
})
})
}
reportTableData.value = Array.from(processedData.values()) as any
reportLoading.value = false
} else {
ElMessage.warning('查询数据为空!')
reportLoading.value = false
}
} else {
reportLoading.value = false
ElMessage.warning('查询失败')
}
})
}
// 时间转换
const getFormattedDate = (offset: number) => {
const date = new Date()
date.setDate(date.getDate() + offset)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
const getDateRange = (type: 'week' | 'month') => {
const today = new Date()
if (type === 'week') {
const dayOfWeek = today.getDay()
const startOfWeek = new Date(today)
startOfWeek.setDate(today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1))
startOfWeek.setHours(0, 0, 0, 0)
const endOfWeek = new Date(startOfWeek)
endOfWeek.setDate(startOfWeek.getDate() + 6)
endOfWeek.setHours(23, 59, 59, 999)
return [startOfWeek, endOfWeek]
}
if (type === 'month') {
const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
startOfMonth.setHours(0, 0, 0, 0)
const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0)
endOfMonth.setHours(23, 59, 59, 999)
return [startOfMonth, endOfMonth]
}
}
const timestampToTime = (timestamp: any) => {
let timestamps = timestamp ? timestamp : null
let date = new Date(timestamps)
let Y = date.getFullYear() + '-'
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return Y + M + D + h + m + s
}
onMounted(() => {
queryWindBlower()
})
</script>
<style lang="scss" scoped>
.topForm {
display: flex;
margin-bottom: 10px;
overflow-x: auto;
height: 110px;
.buttons {
margin-left: 10px;
display: flex;
justify-content: flex-end;
flex: 1;
}
}
.mainReport {
width: 100%;
height: calc(100% - 155px);
}
.commonSelect {
min-width: 250px;
:deep(.el-select__wrapper) {
height: 40px;
}
}
.button {
height: 40px;
}
.delete-icon {
cursor: pointer;
display: none;
}
.header-cell {
display: flex;
justify-content: center;
align-items: center;
&:hover .delete-icon {
display: block;
transition: 0.2;
}
}
</style>

400
ui/dasadmin/src/views/backend/report/index.vue
View File

@ -2,382 +2,34 @@
<div class="report">
<el-container class="mainContainer">
<el-tabs v-model="activeIndex" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="运行报表" name="1" class="runningReport">
<!-- <div class="header">
<el-space>
<div>时间</div>
<el-date-picker style="height: 40px" v-model="dateValue" type="date" placeholder="选择日期时间" />
<el-button :icon="Search" type="primary">查询</el-button>
</el-space>
</div> -->
运行报表
</el-tab-pane>
<el-tab-pane label="运行报表" name="1" class="runningReport"> 运行报表 </el-tab-pane>
<el-tab-pane label="单机报表" name="2" class="singleReport">
<div class="topForm">
<div class="forms">
<el-space>
<div style="min-width: 30px">{{ t('statAnalysis.deviceId') }}</div>
<el-select
v-model="windBlowerValue"
@change="selectWindBlower"
:placeholder="'请选择' + t('statAnalysis.deviceId')"
class="windBlowerSelect commonSelect"
>
<el-option v-for="v in windBlowerList" :key="v.irn" :label="v.name" :value="v.irn"></el-option>
</el-select>
<div style="width: 20px"></div>
<div style="min-width: 30px">时间</div>
<el-date-picker
style="height: 40px"
v-model="timeRange"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
range-separator="-"
:start-placeholder="t('alarm.selectDate')"
:end-placeholder="t('alarm.selectDate')"
:shortcuts="shortcuts"
/>
<div style="width: 20px"></div>
<div style="min-width: 30px">{{ t('statAnalysis.interval') }}</div>
<el-select v-model="interval" :placeholder="'请选择' + t('statAnalysis.interval')" class="commonSelect">
<el-option v-for="v in intervals" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select>
</el-space>
<div>
<el-space style="margin-top: 10px">
<div>模板</div>
<el-select v-model="template" placeholder="请选择模板" class="commonSelect">
<el-option v-for="v in templateList" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select>
<div style="width: 20px"></div>
<!-- <div>{{ t('statAnalysis.attributes') }}</div>
<el-input
style="width: 200px; height: 40px"
v-model="currentChoose"
:placeholder="'请选择' + t('statAnalysis.attributes')"
></el-input>
<el-button type="primary" size="small" :icon="Plus" circle @click="chooseMeasurePoint"> </el-button> -->
</el-space>
</div>
</div>
<div class="buttons">
<el-button class="button" :icon="Search" @click="queryHistoryData" type="primary">查询</el-button>
<el-button class="button" :icon="Upload" type="primary" plain>导出</el-button>
<el-button class="button" :icon="Notebook" type="primary" plain>保存为模板</el-button>
</div>
</div>
<el-table
class="mainReport"
:columns="reportTableColumn"
:data="reportTableData"
:row-key="(row) => row.id"
:row-style="tableRowClassName"
v-loading="reportLoading"
>
<el-table-column prop="time" label="时间" fixed width="120px"> </el-table-column>
<el-table-column v-for="item in reportTableColumn" :key="item.prop" :label="item.label" :prop="item.prop">
<template #header="scope">
<el-space>
{{ item.label }}
<el-popconfirm v-if="item.label" title="确定删除？" @confirm="removeColumn(scope)">
<template #reference>
<el-button type="danger" size="small">-</el-button>
</template>
</el-popconfirm>
</el-space>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center" fixed="right">
<template #header="scope">
<el-button type="primary" size="small" :icon="Plus" @click="chooseMeasurePoint"> </el-button>
</template>
</el-table-column>
</el-table>
<SingleReport v-if="activeIndex == '2'"></SingleReport>
</el-tab-pane>
<el-tab-pane label="多机报表" name="3" class="mltipleReport">
<MulipleReport v-if="activeIndex == '3'"></MulipleReport>
</el-tab-pane>
<el-tab-pane label="多机报表" name="3">多机报表</el-tab-pane>
</el-tabs>
</el-container>
<el-dialog v-model="showMeasure" title="测点名称" :width="800" :destroy-on-close="true">
<template #header>
<div class="measureSlotHeader">
<span style="font-size: 20px">测点名称</span>
</div>
</template>
<div class="measureSlot">
<Measurement ref="measureRef" :show="showMeasure" :iotModelId="iotModelId" @handleSelections="handleSelections"></Measurement>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="showMeasure = false">取消</el-button>
<el-button type="primary" @click="selectMeasurePoint"> 确认 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElMessage, TableInstance, TreeInstance } from 'element-plus'
import { Search, Upload, Notebook, Plus } from '@element-plus/icons-vue'
import { WindBlowerList } from './type'
import { queryWindTurbinesPages, historyReq } from '/@/api/backend/statAnalysis/request'
import Measurement from './measureList.vue'
import { ref } from 'vue'
import SingleReport from './SingleReport.vue'
import MulipleReport from './MulipleReport.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useAdminInfo } from '/@/stores/adminInfo'
const adminInfo = useAdminInfo()
const shortcuts = [
{
text: '今天',
value: () => {
const start = getFormattedDate(0) + ' 00:00:00'
const end = new Date()
return [start, end]
},
},
{
text: '昨天',
value: () => {
const start = getFormattedDate(-1) + ' 00:00:00'
const end = getFormattedDate(-1) + ' 23:59:59'
return [start, end]
},
},
{
text: '前3天',
value: () => {
const start = getFormattedDate(-3) + ' 00:00:00'
const end = getFormattedDate(-1) + ' 23:59:59'
return [start, end]
},
},
{
text: '本周',
value: () => {
return getDateRange('week')
},
},
{
text: '本月',
value: () => {
return getDateRange('month')
},
},
]
const tableRowClassName = ({ rowIndex }) => {
if (rowIndex % 2 === 1) {
return { background: '#ebf3f9' }
}
return {}
}
const activeIndex = ref('2')
const handleClick = (val) => {
const handleClick = (val: any) => {
activeIndex.value = val.props.name
}
// 运行报表
const dateValue = ref('')
// 单机报表
// 风机
const windBlowerValue = ref('')
const windBlowerList = ref<WindBlowerList[]>([])
// 时间
const timeRange = ref([])
// 间隔
const interval = ref('')
const intervals = [
{ label: '五分钟', value: '5m' },
{ label: '十五分钟', value: '15m' },
{ label: '一小时', value: '1h' },
{ label: '一天', value: '1d' },
{ label: '原始', value: 'NONE' },
]
// 模板
const template = ref('')
const templateList = [
{ label: '模板一', value: '1' },
{ label: '模板二', value: '2' },
]
// 测点名称
const showMeasure = ref(false)
const currentChoose = ref('')
const currentChooseRows = ref()
const iotModelId = ref('')
const measureRef = ref()
const queryWindBlower = () => {
queryWindTurbinesPages().then((res) => {
if (res.code == 200) {
windBlowerList.value = res.data.map((item) => {
return {
irn: item.irn,
name: item.name ?? '-',
modelId: item.modelId,
}
})
}
})
}
const selectWindBlower = (val) => {
console.log(val, 9999)
}
const chooseMeasurePoint = () => {
if (!windBlowerValue.value) return ElMessage.warning('请先选择风机！')
iotModelId.value = windBlowerList.value.find((val) => val.irn == windBlowerValue.value)!.modelId
showMeasure.value = true
}
const removeColumn = (val) => {
const columnName = val.column.property
reportTableColumn.value = reportTableColumn.value.filter((val) => val.prop !== columnName)
}
const handleSelections = (value) => {
currentChooseRows.value = value
}
// 去重
const uniqueByProp = (arr) => {
const seen = new Set()
return arr.filter((item) => {
if (!seen.has(item.prop)) {
seen.add(item.prop)
return true
}
return false
})
}
const selectMeasurePoint = () => {
currentChooseRows.value?.forEach((val) => {
reportTableColumn.value.push({
label: val.attributeName,
prop: val.attributeCode,
})
})
reportTableColumn.value = uniqueByProp(reportTableColumn.value)?.filter((item) => item.prop != null && item.prop !== '')
showMeasure.value = false
}
const reportLoading = ref(false)
const reportTableColumn = ref([
{
label: '',
prop: '',
},
])
const reportTableData = ref([])
const idCounter = ref(0)
const queryHistoryData = () => {
if (!windBlowerValue.value) return ElMessage.warning('请选择风机！')
if (!timeRange.value.length) return ElMessage.warning('请选择时间！')
if (!interval.value) return ElMessage.warning('请选择间隔！')
const attributeCodes = reportTableColumn.value.map((val) => val.prop).filter((item) => item != null && item !== '')
if (!attributeCodes.length) return ElMessage.warning('请添加测点！')
reportLoading.value = true
const requestData = {
devices: [
{
deviceId: windBlowerValue.value,
attributes: [...attributeCodes],
},
],
interval: interval.value,
startTime: new Date(timeRange.value[0]).getTime(),
endTime: new Date(timeRange.value[1]).getTime(),
}
historyReq(requestData).then((res) => {
if (res.code == 200) {
const result = res.data
if (Object.keys(result)?.length) {
const realResult = result[windBlowerValue.value]
let tableData = []
attributeCodes.forEach((item) => {
if (Object.keys(realResult).includes(item)) {
tableData.push({
name: item,
times: realResult[item].times,
value: realResult[item].values,
})
}
})
const processedData = new Map()
idCounter.value = 0
if (tableData.length) {
tableData.forEach(({ name, times, value }) => {
times.forEach((time, index) => {
if (!processedData.has(time)) {
processedData.set(time, { id: idCounter.value++, time: timestampToTime(time) })
}
processedData.get(time)[name] = value[index]
})
})
}
reportTableData.value = Array.from(processedData.values())
reportLoading.value = false
} else {
ElMessage.warning('查询数据为空!')
reportLoading.value = false
}
} else {
reportLoading.value = false
ElMessage.warning('查询失败')
}
})
}
// 时间转换
const getFormattedDate = (offset) => {
const date = new Date()
date.setDate(date.getDate() + offset)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
const getDateRange = (type: 'week' | 'month') => {
const today = new Date()
if (type === 'week') {
const dayOfWeek = today.getDay()
const startOfWeek = new Date(today)
startOfWeek.setDate(today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1))
startOfWeek.setHours(0, 0, 0, 0)
const endOfWeek = new Date(startOfWeek)
endOfWeek.setDate(startOfWeek.getDate() + 6)
endOfWeek.setHours(23, 59, 59, 999)
return [startOfWeek, endOfWeek]
}
if (type === 'month') {
const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
startOfMonth.setHours(0, 0, 0, 0)
const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0)
endOfMonth.setHours(23, 59, 59, 999)
return [startOfMonth, endOfMonth]
}
}
const timestampToTime = (timestamp) => {
let timestamps = timestamp ? timestamp : null
let date = new Date(timestamps)
let Y = date.getFullYear() + '-'
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return Y + M + D + h + m + s
}
onMounted(() => {
queryWindBlower()
})
</script>
<style lang="scss" scoped>
$headerHeight: 60px;
$defaultBackgroundColor: #fff;
$defaultAsideWidth: 260px;
$paginationHeight: 32px;
.report {
position: relative;
width: 100%;
@ -399,38 +51,18 @@ $paginationHeight: 32px;
height: 60px;
}
}
.singleReport {
.singleReport,
.mltipleReport {
width: 100%;
height: 100%;
.topForm {
display: flex;
margin-bottom: 10px;
overflow-x: auto;
height: 110px;
.buttons {
margin-left: 10px;
display: flex;
justify-content: flex-end;
flex: 1;
}
}
.mainReport {
width: 100%;
height: calc(100% - 155px);
}
.commonSelect {
min-width: 200px;
:deep(.el-select__wrapper) {
height: 40px;
}
}
.button {
height: 40px;
}
.delete-icon {
cursor: pointer;
visibility: hidden;
}
.header-cell:hover .delete-icon {
visibility: visible;
}
}
</style>

133
ui/dasadmin/src/views/backend/report/measureList.vue
View File

@ -5,10 +5,13 @@
:data="tableData"
@sort-change="sortChange"
max-height="495"
:row-key="(row) => row.attributeCode"
@selectionChange="handleSelectionChange"
:row-key="(row: any) => row.attributeCode"
@select="handleSelect"
@select-all="selectAll"
@selection-change="handleSelectionChange"
ref="refTableData"
>
<el-table-column type="selection" width="55" :reserve-selection="true" />
<el-table-column type="selection" width="55" />
<el-table-column
v-for="item in tableColumn"
:key="item.prop"
@ -36,11 +39,14 @@
</template>
<script setup lang="ts">
import { reactive, ref, watch, defineEmits } from 'vue'
import { reactive, ref, watch, defineEmits, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import type { ModelAttributeFieldsEnums, GetModelAttributeType } from '/@/views/backend/auth/model/type'
import { getModelAttributeListReq, getRealValueListReq } from '/@/api/backend/deviceModel/request'
import { queryWindTurbinesPages, historyReq } from '/@/api/backend/statAnalysis/request'
import { WindBlowerList, RequestData, Devices } from './type'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
iotModelId: {
type: String,
@ -54,6 +60,14 @@ const props = defineProps({
type: Boolean,
default: false,
},
reportTableColumn: {
type: Array,
default: [],
},
isMultiple: {
type: Boolean,
default: false,
},
})
const tableColumn = [
@ -80,18 +94,51 @@ const tableColumn = [
]
const tableData = ref<any[]>([])
const emit = defineEmits(['handleSelections'])
const selectedRows = ref([])
const handleSelectionChange = (selection) => {
selectedRows.value = selection
const selectedRows = ref([] as any)
// const handleSelectionChange = (selection) => {
// selectedRows.value = selection
// emit('handleSelections', selectedRows.value)
// }
const windBlowerValue = ref('')
const windBlowerList = ref<WindBlowerList[]>([])
const selectWindBlower = (val: any) => {
getCompleteData()
}
const filterByAttributeCode = (a: any, b: any) => {
const bAttributeCodes = new Set(b.map((item: any) => item.attributeCode))
return a.filter((item: any) => !bAttributeCodes.has(item.attributeCode))
}
const selectAll = (selection: any) => {
const currentPageRows = tableData.value
if (selection.length) {
currentPageRows.forEach((row) => {
if (!selectedRows.value.some((selectedRow: any) => selectedRow.attributeCode === row.attributeCode)) {
selectedRows.value.push(row)
}
})
} else {
selectedRows.value = filterByAttributeCode(selectedRows.value, currentPageRows)
}
emit('handleSelections', selectedRows.value)
}
const handleSelect = (selection: any, row: any) => {
const bool = selectedRows.value.some((item: any) => item.attributeCode === row.attributeCode)
if (bool) {
selectedRows.value = selectedRows.value.filter((item: any) => item.attributeCode !== row.attributeCode)
} else {
selectedRows.value.push(row)
}
emit('handleSelections', selectedRows.value)
}
const handleSelectionChange = (val: any) => {}
const getAttributeList = () => {
const requestData: GetModelAttributeType = {
// iotModelId: props.isMultiple ? windBlowerList.value.find((val) => val.irn == windBlowerValue.value)!.modelId : props.iotModelId,
iotModelId: props.iotModelId,
pageNum: pageSetting.current,
pageSize: pageSetting.pageSize,
attributeType: '138',
// attributeType: '138',
orderColumn: sortData.orderColumn,
orderType: sortData.orderType,
}
@ -154,9 +201,19 @@ const getCompleteData = () => {
}
})
tableData.value = data
restoreSelection()
})
}
const restoreSelection = () => {
nextTick(() => {
tableData.value.forEach((row) => {
if (selectedRows.value.some((selectedRow: any) => selectedRow.attributeCode === row.attributeCode)) {
refTableData.value.toggleRowSelection(row, true)
}
})
})
}
const sortData = reactive<{ orderColumn?: keyof typeof ModelAttributeFieldsEnums; orderType?: 'asc' | 'desc' }>({
orderColumn: 'porder',
orderType: 'asc',
@ -189,25 +246,81 @@ const pageSetting = reactive({
const getcurrentPage = () => {
getCompleteData()
}
const queryWindBlower = () => {
return new Promise((resolve) => {
queryWindTurbinesPages().then((res) => {
if (res.code == 200) {
windBlowerList.value = res.data.map((item: WindBlowerList) => {
return {
irn: item.irn,
name: item.name ?? '-',
modelId: item.modelId,
}
})
if (windBlowerList.value.length) {
windBlowerValue.value = windBlowerList.value[0].irn
}
resolve(windBlowerList.value)
}
})
})
}
watch(
() => props.show,
(newVal) => {
if (newVal) {
if (props.isMultiple) {
queryWindBlower().then((res) => {
getCompleteData()
})
} else {
getCompleteData()
}
}
},
{
immediate: true,
}
)
const refTableData = ref()
watch(
() => props.reportTableColumn,
(newVal) => {
if (newVal) {
selectedRows.value = newVal.map((item: any) => {
return {
label: item.label,
attributeCode: item.prop,
unit: item.unit,
}
})
emit('handleSelections', selectedRows.value)
}
},
{
immediate: true,
deep: true,
}
)
onMounted(() => {
// queryWindBlower()
})
</script>
<style scoped>
<style lang="scss" scoped>
.mainFooter {
display: flex;
justify-content: right;
background-color: #fff;
margin-top: 10px;
}
.commonSelect {
min-width: 200px;
:deep(.el-select__wrapper) {
height: 40px;
}
}
</style>

10
ui/dasadmin/src/views/backend/report/type.ts
View File

@ -21,3 +21,13 @@ export type WindBlowerList = {
modelId: string
name: string
}
export type Devices = {
deviceId: string
attributes: string[]
}
export type RequestData = {
devices: Devices[]
interval: string
startTime: number
endTime: number
}