多机报表

ui/dasadmin/src/views/backend/report/MulipleReport.vue

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

ui/dasadmin/src/views/backend/report/SingleReport.vue

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

ui/dasadmin/src/views/backend/report/index.vue

@@ -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">
+                <el-tab-pane label="运行报表" name="1" class="runningReport"> 运行报表 </el-tab-pane>
-                    <!-- <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">
+                    <SingleReport v-if="activeIndex == '2'"></SingleReport>
-                        <div class="forms">
+                </el-tab-pane>
-                            <el-space>
+                <el-tab-pane label="多机报表" name="3" class="mltipleReport">
-                                <div style="min-width: 30px">{{ t('statAnalysis.deviceId') }}</div>
+                    <MulipleReport v-if="activeIndex == '3'"></MulipleReport>
-                                <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 { ref } from 'vue'
-import { ElMessage, TableInstance, TreeInstance } from 'element-plus'
+import SingleReport from './SingleReport.vue'
-import { Search, Upload, Notebook, Plus } from '@element-plus/icons-vue'
+import MulipleReport from './MulipleReport.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) => {
+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>

ui/dasadmin/src/views/backend/report/measureList.vue

@@ -5,10 +5,13 @@
             :data="tableData"
             @sort-change="sortChange"
             max-height="495"
-            :row-key="(row) => row.attributeCode"
+            :row-key="(row: any) => row.attributeCode"
-            @selectionChange="handleSelectionChange"
+            @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 selectedRows = ref([] as any)
-const handleSelectionChange = (selection) => {
+// const handleSelectionChange = (selection) => {
-    selectedRows.value = 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) {
-            getCompleteData()
+            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>

ui/dasadmin/src/views/backend/report/type.ts

@@ -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
+}