From 5aaead0786612b84562fbe92078832dde181abd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=81=E4=B8=87=E6=88=90?= <wcyuh@isoftstone.com>
Date: Wed, 30 Oct 2024 17:26:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E6=9C=BA=E6=8A=A5=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/backend/report/index.vue        | 432 ++++++++++++++++++
 .../src/views/backend/report/measureList.vue  | 213 +++++++++
 ui/dasadmin/src/views/backend/report/type.ts  |  23 +
 3 files changed, 668 insertions(+)
 create mode 100644 ui/dasadmin/src/views/backend/report/index.vue
 create mode 100644 ui/dasadmin/src/views/backend/report/measureList.vue
 create mode 100644 ui/dasadmin/src/views/backend/report/type.ts

diff --git a/ui/dasadmin/src/views/backend/report/index.vue b/ui/dasadmin/src/views/backend/report/index.vue
new file mode 100644
index 00000000..338a368b
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/report/index.vue
@@ -0,0 +1,432 @@
+<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[windBlowerValue.value]
+            if (Object.keys(result).length) {
+                let tableData = []
+                attributeCodes.forEach((item) => {
+                    if (Object.keys(result).includes(item)) {
+                        tableData.push({
+                            name: item,
+                            times: result[item].times,
+                            value: result[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 {
+            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>
diff --git a/ui/dasadmin/src/views/backend/report/measureList.vue b/ui/dasadmin/src/views/backend/report/measureList.vue
new file mode 100644
index 00000000..5b5652be
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/report/measureList.vue
@@ -0,0 +1,213 @@
+<template>
+    <div class="measurement">
+        <el-table
+            :columns="tableColumn"
+            :data="tableData"
+            @sort-change="sortChange"
+            max-height="495"
+            :row-key="(row) => row.attributeCode"
+            @selectionChange="handleSelectionChange"
+        >
+            <el-table-column type="selection" width="55" :reserve-selection="true" />
+            <el-table-column
+                v-for="item in tableColumn"
+                :key="item.prop"
+                :label="item.label"
+                :prop="item.prop"
+                :width="item.width ?? ''"
+                :align="item.align"
+                :sortable="item.sortable"
+            >
+            </el-table-column>
+        </el-table>
+        <div class="mainFooter">
+            <el-pagination
+                v-model:current-page="pageSetting.current"
+                v-model:page-size="pageSetting.pageSize"
+                :total="pageSetting.total"
+                :page-sizes="pageSetting.pageSizes"
+                background
+                :pager-count="7"
+                layout="prev, pager, next, jumper,sizes,total"
+                @change="getcurrentPage"
+            ></el-pagination>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch, defineEmits } 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'
+
+const props = defineProps({
+    iotModelId: {
+        type: String,
+        default: '',
+    },
+    deviceId: {
+        type: String,
+        default: '',
+    },
+    show: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const tableColumn = [
+    {
+        label: '序号',
+        prop: 'porder',
+        width: 76,
+        align: 'center',
+        sortable: 'custom',
+    },
+    {
+        label: '属性名称',
+        prop: 'attributeName',
+        align: 'left',
+        sortable: 'custom',
+    },
+    {
+        label: '属性编码',
+        prop: 'attributeCode',
+        align: 'left',
+        width: 200,
+        sortable: 'custom',
+    },
+]
+const tableData = ref<any[]>([])
+const emit = defineEmits(['handleSelections'])
+const selectedRows = ref([])
+const handleSelectionChange = (selection) => {
+    selectedRows.value = selection
+    emit('handleSelections', selectedRows.value)
+}
+
+const getAttributeList = () => {
+    const requestData: GetModelAttributeType = {
+        iotModelId: props.iotModelId,
+        pageNum: pageSetting.current,
+        pageSize: pageSetting.pageSize,
+        attributeType: '138',
+        orderColumn: sortData.orderColumn,
+        orderType: sortData.orderType,
+    }
+    return new Promise((resolve) => {
+        getModelAttributeListReq(requestData)
+            .then((res) => {
+                if (res.rows && res.rows.length > 0) {
+                    const codeList: any = []
+                    const data = res.rows!.map((item) => {
+                        codeList.push(item.attributeCode)
+                        return {
+                            ...item,
+                            attributeTypeName:
+                                item.attributeType === 138
+                                    ? '模拟量'
+                                    : item.attributeType === 139
+                                      ? '累积量'
+                                      : item.attributeType === 140
+                                        ? '离散量'
+                                        : item.attributeType!,
+                        }
+                    })
+                    pageSetting.total = res.total
+                    resolve({ data, codeList })
+                } else {
+                    if (res.rows && res.rows.length === 0) {
+                        tableData.value = []
+                    } else {
+                        ElMessage.error(res.msg)
+                    }
+                }
+            })
+            .catch((err) => {
+                ElMessage.error(err?.response?.data?.msg ?? '查询失败')
+            })
+    })
+}
+
+const getRealValueList = (data: { deviceId: string; attributes: string[] }, list?: any) => {
+    return new Promise((resolve) => {
+        getRealValueListReq([data]).then((res) => {
+            if (res.success && res.data) {
+                resolve({ realVal: res.data, list })
+            }
+        })
+    })
+}
+
+const getCompleteData = () => {
+    getAttributeList()
+        .then(({ data, codeList }: any) => {
+            return getRealValueList({ deviceId: props.deviceId, attributes: codeList }, data)
+        })
+        .then((realData: any) => {
+            const data = realData.list.map((item: any) => {
+                const realValItem = realData.realVal[props.deviceId]?.[item.attributeCode?.toLowerCase()]
+                return {
+                    ...item,
+                    realTimeValue: realValItem ? (realValItem % 1 === 0 ? realValItem : realValItem.toFixed(3)) : '-',
+                }
+            })
+            tableData.value = data
+        })
+}
+
+const sortData = reactive<{ orderColumn?: keyof typeof ModelAttributeFieldsEnums; orderType?: 'asc' | 'desc' }>({
+    orderColumn: 'porder',
+    orderType: 'asc',
+})
+
+const sortChange = ({ prop, order }: { prop: keyof typeof ModelAttributeFieldsEnums; order: 'ascending' | 'descending' | null }) => {
+    const propEnums = {
+        attributeCode: 'attribute_code',
+        attributeName: 'attribute_name',
+        attributeTypeName: 'attribute_type',
+        porder: 'porder',
+        serviceCode: 'service_code',
+        serviceName: 'service_name',
+        serviceTypeName: 'service_type',
+    }
+    const orderType = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : undefined
+    const filed = propEnums[prop as keyof typeof propEnums] as keyof typeof ModelAttributeFieldsEnums
+    sortData.orderColumn = orderType ? filed : undefined
+    sortData.orderType = orderType
+    getCompleteData()
+}
+
+const pageSetting = reactive({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+    pageSizes: [10, 20, 30],
+})
+
+const getcurrentPage = () => {
+    getCompleteData()
+}
+
+watch(
+    () => props.show,
+    (newVal) => {
+        if (newVal) {
+            getCompleteData()
+        }
+    },
+    {
+        immediate: true,
+    }
+)
+</script>
+
+<style scoped>
+.mainFooter {
+    display: flex;
+    justify-content: right;
+    background-color: #fff;
+    margin-top: 10px;
+}
+</style>
diff --git a/ui/dasadmin/src/views/backend/report/type.ts b/ui/dasadmin/src/views/backend/report/type.ts
new file mode 100644
index 00000000..e0617b04
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/report/type.ts
@@ -0,0 +1,23 @@
+export type RequestReturnType<T = never> = Promise<{
+    code: number
+    msg: string
+    success: boolean
+    data?: T
+}>
+
+export type RequestReturnRowType<T = never> = Promise<{
+    code: number
+    msg: string
+    rows: T
+    total: number
+}>
+
+// 风机列表
+export type WindBlowerList = {
+    attributeMap: any
+    belongLine: string
+    irn: string
+    model: string
+    modelId: string
+    name: string
+}