437 lines
17 KiB
Vue
437 lines
17 KiB
Vue
<template>
|
|
<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="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>
|
|
</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 { 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) => {
|
|
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%;
|
|
height: 100%;
|
|
.mainContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 20px;
|
|
.el-tabs {
|
|
width: 100%;
|
|
--el-tabs-header-height: 60px;
|
|
:deep(.el-tabs__content) {
|
|
height: calc(100% - 80px);
|
|
}
|
|
}
|
|
.runningReport {
|
|
.header {
|
|
width: 100%;
|
|
height: 60px;
|
|
}
|
|
}
|
|
.singleReport {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|