From cdaf411ea11dcb49b54d8b7e8e80459ac33ca05c Mon Sep 17 00:00:00 2001
From: zhugongping <lanhui.zgp@raycloud.com>
Date: Sun, 12 Apr 2026 10:23:26 +0800
Subject: [PATCH] =?UTF-8?q?20260412:=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=E8=AE=BE=E5=A4=87=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yack-web/src/lang/en-US/device.json           |    1 +
 yack-web/src/lang/zh-CN/device.json           |    1 +
 .../components/DeviceHistoryTablePanel.vue    | 1167 +++++++++++++++++
 yack-web/src/views/iot/device/device-edit.vue |   10 +
 4 files changed, 1179 insertions(+)
 create mode 100644 yack-web/src/views/dataCenter/components/DeviceHistoryTablePanel.vue

diff --git a/yack-web/src/lang/en-US/device.json b/yack-web/src/lang/en-US/device.json
index b2fb6b2f..6c637ecb 100644
--- a/yack-web/src/lang/en-US/device.json
+++ b/yack-web/src/lang/en-US/device.json
@@ -111,6 +111,7 @@
     "device.device-edit.148398-81": "equipment alarm ",
     "device.device-edit.148398-82": "Voice intercom",
     "device.device-edit.148398-83": "Calculation Formula",
+    "device.device-edit.148398-84": "History Records",
     "device.device-functionlog.399522-0": "Please Select A Device Slave:",
     "device.device-functionlog.399522-1": "Please Select A Device Slave",
     "device.device-functionlog.399522-2": "Slave Address:$",
diff --git a/yack-web/src/lang/zh-CN/device.json b/yack-web/src/lang/zh-CN/device.json
index 18bfe6a0..eaebc667 100644
--- a/yack-web/src/lang/zh-CN/device.json
+++ b/yack-web/src/lang/zh-CN/device.json
@@ -111,6 +111,7 @@
     "device.device-edit.148398-81": "设备告警",
     "device.device-edit.148398-82": "语音对讲",
     "device.device-edit.148398-83": "计算公式",
+    "device.device-edit.148398-84": "历史记录",
     "device.device-functionlog.399522-0": "请选择设备从机:",
     "device.device-functionlog.399522-1": "请选择设备从机",
     "device.device-functionlog.399522-2": "从机地址:$",
diff --git a/yack-web/src/views/dataCenter/components/DeviceHistoryTablePanel.vue b/yack-web/src/views/dataCenter/components/DeviceHistoryTablePanel.vue
new file mode 100644
index 00000000..604b8a33
--- /dev/null
+++ b/yack-web/src/views/dataCenter/components/DeviceHistoryTablePanel.vue
@@ -0,0 +1,1167 @@
+<template>
+    <div class="device-history-table-panel">
+        <!-- 普通设备：与数据中心「设备」Tab 一致 -->
+        <el-form v-if="!isGatewayLike" @submit.native.prevent :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="68px">
+            <el-form-item :label="$t('dataCenter.history.384934-3')" prop="identifiers">
+                <el-select style="width: 260px" v-model="queryParams.identifiers" :placeholder="$t('dataCenter.history.384934-4')" filterable multiple collapse-tags @change="handleNormalIdentifierChange">
+                    <el-option label="全部勾选/反选" value="__selectAll__">
+                        <span style="font-weight: bold; color: #409eff">{{ isNormalAllSelected ? '全部反选' : '全部勾选' }}</span>
+                    </el-option>
+                    <el-option v-for="(item, index) in normalIdentifierList" :key="index" :label="item.modelName" :value="item.identifier"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('dataCenter.history.384934-5')" prop="dayDaterange">
+                <el-date-picker
+                    style="width: 315px"
+                    v-model="queryParams.dayDaterange"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    type="datetimerange"
+                    range-separator="-"
+                    :default-time="['00:00:00', '23:59:59']"
+                    :start-placeholder="$t('dataCenter.history.384934-6')"
+                    :end-placeholder="$t('dataCenter.history.384934-7')"
+                    :picker-options="pickerOptions"
+                ></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleNormalQuery">{{ $t('dataCenter.history.384934-8') }}</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="handleReset">{{ $t('dataCenter.history.384934-9') }}</el-button>
+                <el-button type="success" icon="el-icon-download" size="mini" :disabled="!canExportNormal" @click="handleExportNormal" v-loading="exportLoading">
+                    {{ $t('dataCenter.history.384934-24') }}
+                </el-button>
+            </el-form-item>
+        </el-form>
+
+        <!-- 网关：与数据中心「网关设备」Tab 一致（计算量 + 子设备变量） -->
+        <el-form v-else @submit.native.prevent :model="gwQueryParams" ref="gwQueryForm" size="mini" :inline="true" label-width="90px">
+            <el-form-item label="物模型" prop="identifiers">
+                <el-select style="width: 320px" v-model="gwQueryParams.identifiers" placeholder="请选择变量（可多选）" filterable multiple collapse-tags @change="handleGwIdentifierChange">
+                    <el-option label="全部勾选/反选" value="__selectAll__">
+                        <span style="font-weight: bold; color: #409eff">{{ gwGwIsAllSelected ? '全部反选' : '全部勾选' }}</span>
+                    </el-option>
+                    <el-option-group label="计算量（网关纯计算，无需选子设备）" v-if="gwVariableListCalcUnique.length">
+                        <el-option v-for="item in gwVariableListCalcUnique" :key="'calc-' + item.identifier" :label="item.modelName + ' (计算)'" :value="item.identifier"></el-option>
+                    </el-option-group>
+                    <el-option-group label="子设备变量" v-if="gwVariableListSubUnique.length">
+                        <el-option v-for="item in gwVariableListSubUnique" :key="'sub-' + item.identifier" :label="item.modelName" :value="item.identifier"></el-option>
+                    </el-option-group>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="子设备" prop="subDeviceIds" v-if="gwShowSubDeviceSelect">
+                <el-select
+                    style="width: 280px"
+                    v-model="gwSubDeviceSelectValue"
+                    placeholder="不选则全部子设备对比，可多选指定子设备"
+                    filterable
+                    multiple
+                    collapse-tags
+                    clearable
+                >
+                    <el-option label="全部子设备（多设备对比）" value="__all__"></el-option>
+                    <el-option v-for="item in gwSubDeviceList" :key="item.subDeviceId" :label="item.subDeviceName + ' (从机' + item.slaveId + ')'" :value="item.subDeviceId"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="时间范围" prop="dayDaterange">
+                <el-date-picker
+                    style="width: 315px"
+                    v-model="gwQueryParams.dayDaterange"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    type="datetimerange"
+                    range-separator="-"
+                    :default-time="['00:00:00', '23:59:59']"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    :picker-options="pickerOptions"
+                ></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleGwQuery">查询</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
+                <el-button type="success" icon="el-icon-download" size="mini" :disabled="!gwHasExportableData" @click="handleGwExport" v-loading="exportLoading">导出Excel</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-card v-loading="loading" shadow="never" class="chart-card">
+            <div slot="header" class="chart-card-header">
+                <span>{{ chartCardTitle }}</span>
+                <el-switch v-model="independentYAxis" active-text="独立Y轴" inactive-text="共享Y轴" @change="handleYAxisModeChange" />
+            </div>
+            <div class="chart-body">
+                <div v-show="hasChartData" ref="lineChart" class="line-chart" :style="{ height: chartHeight + 'px' }"></div>
+                <el-empty v-if="!loading && hasQueried && !hasChartData" :description="emptyDescription" />
+            </div>
+            <!-- 表格 -->
+            <el-table v-if="activeTableTotal > 0" :data="activeTablePageRows" :border="true" size="mini" stripe style="margin-top: 16px">
+                <template v-if="resultMode === 'compare'">
+                    <el-table-column v-for="col in subCompareTableColumns" :key="col.prop" :label="col.label" :prop="col.prop" :min-width="col.prop === 'time' ? 180 : 100" show-overflow-tooltip />
+                </template>
+                <template v-else>
+                    <el-table-column :label="$t('dataCenter.history.384934-13')" prop="time" width="180" fixed />
+                    <el-table-column v-for="item in activeTableHeader" :key="item.value || item.prop" :label="item.name || item.label" :prop="item.value || item.prop" min-width="100" show-overflow-tooltip />
+                </template>
+            </el-table>
+            <pagination
+                v-show="activeTableTotal > 0"
+                style="margin-top: 12px"
+                :autoScroll="false"
+                :total="activeTableTotal"
+                :page.sync="activePageNum"
+                :limit.sync="activePageSize"
+                @pagination="onActivePagination"
+            />
+        </el-card>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { listThingsModel } from '@/api/iot/device.js';
+import { listGateway } from '@/api/iot/gateway.js';
+import { listModel } from '@/api/iot/model';
+import {
+    getDataCenterDeviceHistory,
+    exportDeviceHistory,
+    getGatewayCalculatedModels,
+    getDeviceHistoryCalculated,
+    exportDeviceHistoryCalculated,
+    getSubDeviceComparativeHistory,
+    exportSubDeviceComparativeHistory,
+} from '@/api/data/center.js';
+import { saveAs } from 'file-saver';
+import { blobValidate } from '@/utils/ruoyi';
+
+export default {
+    name: 'DeviceHistoryTablePanel',
+    props: {
+        device: {
+            type: Object,
+            required: true,
+        },
+        defaultIdentifiers: {
+            type: Array,
+            default: () => [],
+        },
+        loadCalculatedHistoryDefaults: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        // 与 value-format一致须为字符串数组；用 Date 会导致范围选择器展示/选择异常
+        const dayRangeDefault = [
+            moment().subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss'),
+            moment().format('YYYY-MM-DD HH:mm:ss'),
+        ];
+        return {
+            /** normal */
+            normalIdentifierList: [],
+            normalDatas: [],
+            normalTableComTemp: [],
+            normalTableHeaderTemp: [],
+            normalPageNum: 1,
+            normalPageSize: 10,
+            normalTotal: 0,
+            /** gateway */
+            gwCalcIdentifierList: [],
+            subCompareIdentifierList: [],
+            gwSubDeviceList: [],
+            gwQueryParams: {
+                identifiers: [],
+                subDeviceIds: null,
+                dayDaterange: dayRangeDefault.slice(),
+            },
+            gwResultMode: '',
+            gwCalcDatas: [],
+            gwCalcTableComTemp: [],
+            gwCalcTableHeaderTemp: [],
+            gwCalcPageNum: 1,
+            gwCalcPageSize: 10,
+            gwCalcTotal: 0,
+            gwSingleDatas: [],
+            gwSingleTableComTemp: [],
+            gwSingleTableHeaderTemp: [],
+            gwSinglePageNum: 1,
+            gwSinglePageSize: 10,
+            gwSingleTotal: 0,
+            subCompareDatas: [],
+            subCompareTableColumns: [],
+            subCompareTableComTemp: [],
+            subComparePageNum: 1,
+            subComparePageSize: 10,
+            subCompareTotal: 0,
+            /** shared */
+            queryParams: {
+                identifiers: [],
+                dayDaterange: dayRangeDefault.slice(),
+            },
+            calculatedHistoryDefaultIds: [],
+            pickerOptions: {
+                shortcuts: [
+                    {
+                        text: this.$t('dataCenter.history.384934-19'),
+                        onClick(picker) {
+                            const end = moment();
+                            const start = moment().subtract(2, 'hours');
+                            picker.$emit('pick', [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]);
+                        },
+                    },
+                    {
+                        text: this.$t('dataCenter.history.384934-20'),
+                        onClick(picker) {
+                            const end = moment();
+                            const start = moment().subtract(1, 'days');
+                            picker.$emit('pick', [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]);
+                        },
+                    },
+                    {
+                        text: this.$t('dataCenter.analysis.384934-25'),
+                        onClick(picker) {
+                            const end = moment();
+                            const start = moment().subtract(2, 'days');
+                            picker.$emit('pick', [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]);
+                        },
+                    },
+                    {
+                        text: this.$t('dataCenter.history.384934-21'),
+                        onClick(picker) {
+                            const end = moment();
+                            const start = moment().subtract(7, 'days');
+                            picker.$emit('pick', [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]);
+                        },
+                    },
+                    {
+                        text: this.$t('dataCenter.history.384934-22'),
+                        onClick(picker) {
+                            const end = moment();
+                            const start = moment().subtract(30, 'days');
+                            picker.$emit('pick', [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]);
+                        },
+                    },
+                ],
+            },
+            loading: false,
+            exportLoading: false,
+            hasQueried: false,
+            resultMode: '',
+            independentYAxis: true,
+            chartHeight: 480,
+            chartInstance: null,
+        };
+    },
+    computed: {
+        isGatewayLike() {
+            const d = this.device;
+            return d && (d.deviceType === 2 || d.deviceType === 4);
+        },
+        isNormalAllSelected() {
+            if (this.normalIdentifierList.length === 0) return false;
+            const all = this.normalIdentifierList.map((i) => i.identifier);
+            return all.length > 0 && all.every((id) => this.queryParams.identifiers.includes(id));
+        },
+        gwVariableListCalcUnique() {
+            const list = this.gwCalcIdentifierList || [];
+            const seen = new Set();
+            return list.filter((i) => {
+                if (seen.has(i.identifier)) return false;
+                seen.add(i.identifier);
+                return true;
+            });
+        },
+        gwVariableListSubUnique() {
+            const list = this.subCompareIdentifierList || [];
+            const calcSet = new Set((this.gwCalcIdentifierList || []).map((i) => i.identifier));
+            const seen = new Set();
+            return list.filter((i) => {
+                if (seen.has(i.identifier) || calcSet.has(i.identifier)) return false;
+                seen.add(i.identifier);
+                return true;
+            });
+        },
+        gwSelectedIsCalculated() {
+            const ids = this.gwQueryParams.identifiers || [];
+            if (ids.length === 0) return false;
+            const calcSet = new Set((this.gwCalcIdentifierList || []).map((i) => i.identifier));
+            return ids.every((id) => calcSet.has(id));
+        },
+        gwSelectedCalcIdentifiers() {
+            const ids = this.gwQueryParams.identifiers || [];
+            const calcSet = new Set((this.gwCalcIdentifierList || []).map((i) => i.identifier));
+            return ids.filter((id) => calcSet.has(id));
+        },
+        gwSelectedSubIdentifiers() {
+            const ids = this.gwQueryParams.identifiers || [];
+            const subSet = new Set((this.subCompareIdentifierList || []).map((i) => i.identifier));
+            const calcSet = new Set((this.gwCalcIdentifierList || []).map((i) => i.identifier));
+            return ids.filter((id) => subSet.has(id) && !calcSet.has(id));
+        },
+        gwGwIsAllSelected() {
+            const ids = this.gwQueryParams.identifiers || [];
+            const allSub = this.gwVariableListSubUnique.map((i) => i.identifier);
+            return allSub.length > 0 && allSub.every((id) => ids.includes(id));
+        },
+        gwShowSubDeviceSelect() {
+            return (this.gwQueryParams.identifiers || []).length > 0 && !this.gwSelectedIsCalculated;
+        },
+        gwSubDeviceSelectValue: {
+            get() {
+                const ids = this.gwQueryParams.subDeviceIds;
+                return ids === null || (Array.isArray(ids) && ids.length === 0) ? ['__all__'] : ids;
+            },
+            set(val) {
+                const ids = (val || []).filter((v) => v !== '__all__');
+                this.gwQueryParams.subDeviceIds = ids.length === 0 ? null : ids;
+            },
+        },
+        chartCardTitle() {
+            if (!this.isGatewayLike) return this.$t('dataCenter.history.384934-10');
+            if (this.gwResultMode === 'calc') return '曲线趋势图（计算量）';
+            if (this.gwResultMode === 'compare') return '多设备同一变量对比（仅显示有数据的时间点）';
+            if (this.gwResultMode === 'single') return '单子设备历史';
+            return this.$t('dataCenter.history.384934-10');
+        },
+        hasChartData() {
+            if (this.resultMode === 'normal') return this.normalDatas.length > 0;
+            if (this.resultMode === 'calc') return this.gwCalcDatas.length > 0;
+            if (this.resultMode === 'compare') return this.subCompareDatas.length > 0;
+            if (this.resultMode === 'single') return this.gwSingleDatas.length > 0;
+            return false;
+        },
+        emptyDescription() {
+            return this.$t('dataCenter.history.384934-12');
+        },
+        activeTableTotal() {
+            if (this.resultMode === 'normal') return this.normalTotal;
+            if (this.resultMode === 'calc') return this.gwCalcTotal;
+            if (this.resultMode === 'single') return this.gwSingleTotal;
+            if (this.resultMode === 'compare') return this.subCompareTotal;
+            return 0;
+        },
+        activePageNum: {
+            get() {
+                if (this.resultMode === 'normal') return this.normalPageNum;
+                if (this.resultMode === 'calc') return this.gwCalcPageNum;
+                if (this.resultMode === 'single') return this.gwSinglePageNum;
+                if (this.resultMode === 'compare') return this.subComparePageNum;
+                return 1;
+            },
+            set(v) {
+                if (this.resultMode === 'normal') this.normalPageNum = v;
+                else if (this.resultMode === 'calc') this.gwCalcPageNum = v;
+                else if (this.resultMode === 'single') this.gwSinglePageNum = v;
+                else if (this.resultMode === 'compare') this.subComparePageNum = v;
+            },
+        },
+        activePageSize: {
+            get() {
+                if (this.resultMode === 'normal') return this.normalPageSize;
+                if (this.resultMode === 'calc') return this.gwCalcPageSize;
+                if (this.resultMode === 'single') return this.gwSinglePageSize;
+                if (this.resultMode === 'compare') return this.subComparePageSize;
+                return 10;
+            },
+            set(v) {
+                if (this.resultMode === 'normal') this.normalPageSize = v;
+                else if (this.resultMode === 'calc') this.gwCalcPageSize = v;
+                else if (this.resultMode === 'single') this.gwSinglePageSize = v;
+                else if (this.resultMode === 'compare') this.subComparePageSize = v;
+            },
+        },
+        activeTableHeader() {
+            if (this.resultMode === 'normal') return this.normalTableHeaderTemp;
+            if (this.resultMode === 'calc') return this.gwCalcTableHeaderTemp;
+            if (this.resultMode === 'single') return this.gwSingleTableHeaderTemp;
+            return [];
+        },
+        activeTablePageRows() {
+            const start = (this.activePageNum - 1) * this.activePageSize;
+            const end = start + this.activePageSize;
+            if (this.resultMode === 'normal') return this.normalTableComTemp.slice(start, end);
+            if (this.resultMode === 'calc') return this.gwCalcTableComTemp.slice(start, end);
+            if (this.resultMode === 'single') return this.gwSingleTableComTemp.slice(start, end);
+            if (this.resultMode === 'compare') return this.subCompareTableComTemp.slice(start, end);
+            return [];
+        },
+        canExportNormal() {
+            return this.resultMode === 'normal' && this.normalDatas.length > 0;
+        },
+        gwHasExportableData() {
+            if (this.gwResultMode === 'calc') return this.gwCalcDatas.length > 0;
+            if (this.gwResultMode === 'single') return this.gwSingleDatas.length > 0;
+            if (this.gwResultMode === 'compare') return this.subCompareDatas.length > 0;
+            return false;
+        },
+    },
+    watch: {
+        device: {
+            handler() {
+                this.bootstrap();
+            },
+            deep: true,
+            immediate: true,
+        },
+        defaultIdentifiers: {
+            handler() {
+                this.applyDefaultIdentifiers();
+            },
+            deep: true,
+        },
+    },
+    beforeDestroy() {
+        this.disposeChart();
+    },
+    methods: {
+        disposeChart() {
+            if (this.chartInstance) {
+                this.chartInstance.dispose();
+                this.chartInstance = null;
+            }
+        },
+        /** 与 el-date-picker value-format 一致 */
+        defaultDayDaterange() {
+            return [
+                moment().subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss'),
+                moment().format('YYYY-MM-DD HH:mm:ss'),
+            ];
+        },
+        /**
+         * 解析时间范围；支持字符串或 Date（兼容历史数据）
+         * @returns {{ beginTime: string, endTime: string } | null}
+         */
+        parseDayDaterange(range) {
+            if (!range || !Array.isArray(range) || range.length < 2) {
+                this.$message.warning('请选择完整的开始与结束时间');
+                return null;
+            }
+            const [a, b] = range;
+            if (a == null || a === '' || b == null || b === '') {
+                this.$message.warning('请选择完整的开始与结束时间');
+                return null;
+            }
+            const m0 = moment(a);
+            const m1 = moment(b);
+            if (!m0.isValid() || !m1.isValid()) {
+                this.$message.warning('时间范围无效，请重新选择');
+                return null;
+            }
+            if (m1.isBefore(m0)) {
+                this.$message.warning('结束时间不能早于开始时间');
+                return null;
+            }
+            return {
+                beginTime: m0.format('YYYY-MM-DD HH:mm:ss'),
+                endTime: m1.format('YYYY-MM-DD HH:mm:ss'),
+            };
+        },
+        bootstrap() {
+            const d = this.device;
+            if (!d || !d.deviceId) return;
+            this.disposeChart();
+            this.hasQueried = false;
+            this.resultMode = '';
+            this.gwResultMode = '';
+            this.calculatedHistoryDefaultIds = [];
+            this.clearAllResults();
+            if (this.isGatewayLike) {
+                this.gwQueryParams.identifiers = [];
+                this.gwQueryParams.subDeviceIds = null;
+                this.gwQueryParams.dayDaterange = this.defaultDayDaterange();
+                this.loadGatewayContext();
+            } else {
+                this.queryParams.identifiers = [];
+                this.queryParams.dayDaterange = this.defaultDayDaterange();
+                this.loadNormalIdentifiers();
+            }
+        },
+        clearAllResults() {
+            this.normalDatas = [];
+            this.normalTableComTemp = [];
+            this.normalTableHeaderTemp = [];
+            this.normalTotal = 0;
+            this.gwCalcDatas = [];
+            this.gwCalcTableComTemp = [];
+            this.gwCalcTableHeaderTemp = [];
+            this.gwCalcTotal = 0;
+            this.gwSingleDatas = [];
+            this.gwSingleTableComTemp = [];
+            this.gwSingleTableHeaderTemp = [];
+            this.gwSingleTotal = 0;
+            this.subCompareDatas = [];
+            this.subCompareTableColumns = [];
+            this.subCompareTableComTemp = [];
+            this.subCompareTotal = 0;
+        },
+        fetchCalculatedDefaultIds() {
+            if (!this.loadCalculatedHistoryDefaults || !this.device || !this.device.deviceId) {
+                return Promise.resolve();
+            }
+            return listModel({
+                deviceId: this.device.deviceId,
+                isCalculated: 1,
+                pageNum: 1,
+                pageSize: 9999,
+            }).then((res) => {
+                if (res.code === 200) {
+                    const rows = res.rows || [];
+                    this.calculatedHistoryDefaultIds = rows.filter((m) => Number(m.isHistory) === 1).map((m) => m.identifier);
+                }
+            });
+        },
+        loadNormalIdentifiers() {
+            const deviceId = this.device.deviceId;
+            return Promise.all([
+                listThingsModel({ deviceId, pageNum: 1, pageSize: 9999 }).then((res) => {
+                    if (res.code === 200) {
+                        this.normalIdentifierList = res.rows || [];
+                    }
+                }),
+                this.fetchCalculatedDefaultIds(),
+            ]).then(() => {
+                this.applyNormalDefaultIdentifiers();
+            });
+        },
+        applyNormalDefaultIdentifiers() {
+            const fromProp = this.defaultIdentifiers || [];
+            const fromCalc = this.calculatedHistoryDefaultIds || [];
+            const want = [...new Set([...fromProp, ...fromCalc])];
+            if (!want.length || !this.normalIdentifierList.length) return;
+            const set = new Set(want);
+            const picked = this.normalIdentifierList.map((i) => i.identifier).filter((id) => set.has(id));
+            if (picked.length) {
+                this.queryParams.identifiers = picked;
+            }
+        },
+        applyDefaultIdentifiers() {
+            if (this.isGatewayLike) {
+                this.applyGatewayDefaultIdentifiers();
+            } else {
+                this.applyNormalDefaultIdentifiers();
+            }
+        },
+        loadGatewayContext() {
+            const id = this.device.deviceId;
+            Promise.all([
+                getGatewayCalculatedModels(id).then((res) => (res.code === 200 ? res.data || [] : [])),
+                listThingsModel({ deviceId: id, pageNum: 1, pageSize: 9999 }).then((res) => {
+                    if (res.code === 200) {
+                        const rows = res.rows || [];
+                        return rows.filter((r) => r.type === 1);
+                    }
+                    return [];
+                }),
+                listGateway({ gwDeviceId: id, pageNum: 1, pageSize: 9999 }).then((res) => (res.code === 200 ? res.rows || [] : [])),
+            ]).then(([calcList, subList, subDevices]) => {
+                this.gwCalcIdentifierList = calcList;
+                this.subCompareIdentifierList = subList;
+                this.gwSubDeviceList = subDevices;
+                this.fetchCalculatedDefaultIds().then(() => this.applyGatewayDefaultIdentifiers());
+            });
+        },
+        applyGatewayDefaultIdentifiers() {
+            const fromProp = this.defaultIdentifiers || [];
+            const fromCalc = this.calculatedHistoryDefaultIds || [];
+            const want = [...new Set([...fromProp, ...fromCalc])];
+            if (!want.length) return;
+            const calcSet = new Set(this.gwCalcIdentifierList.map((i) => i.identifier));
+            const subSet = new Set(this.subCompareIdentifierList.map((i) => i.identifier));
+            const calcPick = want.filter((id) => calcSet.has(id));
+            const subPick = want.filter((id) => subSet.has(id) && !calcSet.has(id));
+            if (calcPick.length) {
+                this.gwQueryParams.identifiers = calcPick;
+                this.gwQueryParams.subDeviceIds = null;
+            } else if (subPick.length) {
+                this.gwQueryParams.identifiers = subPick;
+            }
+        },
+        handleNormalIdentifierChange(val) {
+            const idx = val.indexOf('__selectAll__');
+            if (idx > -1) {
+                const all = this.normalIdentifierList.map((i) => i.identifier);
+                const allOn = all.length > 0 && all.every((id) => this.queryParams.identifiers.includes(id));
+                this.$nextTick(() => {
+                    this.queryParams.identifiers = allOn ? [] : [...all];
+                });
+            }
+        },
+        handleGwIdentifierChange(val) {
+            const raw = (val || []).filter((v) => v !== '__selectAll__');
+            const index = (val || []).indexOf('__selectAll__');
+            if (index > -1) {
+                const allSub = this.gwVariableListSubUnique.map((i) => i.identifier);
+                this.$nextTick(() => {
+                    this.gwQueryParams.identifiers = this.gwGwIsAllSelected ? [] : [...allSub];
+                });
+                return;
+            }
+            this.gwQueryParams.identifiers = raw;
+            if (this.gwSelectedIsCalculated) this.gwQueryParams.subDeviceIds = null;
+        },
+        getNormalQueryDevice() {
+            const d = this.device;
+            return { deviceId: d.deviceId, serialNumber: d.serialNumber };
+        },
+        handleNormalQuery() {
+            if (!this.queryParams.identifiers.length) return;
+            const times = this.parseDayDaterange(this.queryParams.dayDaterange);
+            if (!times) return;
+            const identifierList = [];
+            for (const id of this.queryParams.identifiers) {
+                const row = this.normalIdentifierList.find((x) => x.identifier === id);
+                if (!row) {
+                    this.$message.warning('存在无效的变量选择，请重新选择物模型');
+                    return;
+                }
+                identifierList.push({ identifier: row.identifier, type: row.type });
+            }
+            const qd = this.getNormalQueryDevice();
+            this.loading = true;
+            this.hasQueried = true;
+            this.resultMode = 'normal';
+            this.gwResultMode = '';
+            getDataCenterDeviceHistory({
+                deviceId: qd.deviceId,
+                serialNumber: qd.serialNumber,
+                identifierList,
+                beginTime: times.beginTime,
+                endTime: times.endTime,
+            }).then((res) => {
+                if (res.code === 200) {
+                    this.normalDatas = res.data || [];
+                    this.formatNormalTable();
+                    this.$nextTick(() => {
+                        setTimeout(() => this.redrawChart(), 300);
+                    });
+                }
+                this.loading = false;
+            });
+        },
+        formatNormalTable() {
+            this.normalTableComTemp = this.normalDatas.map((item) => {
+                const time = Object.keys(item)[0];
+                const obj = { time };
+                Object.values(item)[0].forEach((chil) => {
+                    obj[Object.keys(chil)[0]] = Object.values(chil)[0];
+                });
+                return obj;
+            });
+            this.normalTotal = this.normalDatas.length;
+            this.normalPageNum = 1;
+            this.normalTableHeaderTemp = this.queryParams.identifiers.map((id) => {
+                const row = this.normalIdentifierList.find((x) => x.identifier === id);
+                return { name: (row && row.modelName) || id, value: id };
+            });
+        },
+        handleGwQuery() {
+            const { identifiers, subDeviceIds, dayDaterange } = this.gwQueryParams;
+            const gwDeviceId = this.device.deviceId;
+            if (!identifiers || identifiers.length === 0) {
+                this.$message.warning('请选择物模型和时间范围');
+                return;
+            }
+            const times = this.parseDayDaterange(dayDaterange);
+            if (!times) return;
+            const calcIds = this.gwSelectedCalcIdentifiers;
+            const subIds = this.gwSelectedSubIdentifiers;
+            if (calcIds.length > 0 && subIds.length > 0) {
+                this.$message.warning('不能混合选择计算量与子设备变量，请只选其中一类');
+                return;
+            }
+            if (!this.gwSelectedIsCalculated && subIds.length === 0) {
+                this.$message.warning('请至少选择一个子设备变量');
+                return;
+            }
+            const device = this.device;
+            const isCalc = this.gwSelectedIsCalculated;
+            const singleDeviceId = Array.isArray(subDeviceIds) && subDeviceIds.length === 1 ? subDeviceIds[0] : null;
+            this.hasQueried = true;
+            if (!isCalc && this.gwSubDeviceList.length > 0 && singleDeviceId) {
+                const sub = this.gwSubDeviceList.find((s) => s.subDeviceId === singleDeviceId);
+                if (!sub) {
+                    this.$message.warning('请选择子设备');
+                    return;
+                }
+                this.loading = true;
+                this.gwResultMode = 'single';
+                this.resultMode = 'single';
+                const identifierList = subIds.map((id) => {
+                    const item = this.subCompareIdentifierList.find((i) => i.identifier === id) || {};
+                    return { identifier: id, type: item.type || 1 };
+                });
+                getDataCenterDeviceHistory({
+                    deviceId: sub.subDeviceId,
+                    serialNumber: sub.subDeviceNo,
+                    identifierList,
+                    beginTime: times.beginTime,
+                    endTime: times.endTime,
+                }).then((res) => {
+                    if (res.code === 200) {
+                        this.gwSingleDatas = res.data || [];
+                        this.formatGwSingleTable();
+                        this.$nextTick(() => setTimeout(() => this.redrawChart(), 300));
+                    }
+                    this.loading = false;
+                });
+                return;
+            }
+            if (!isCalc) {
+                this.loading = true;
+                this.gwResultMode = 'compare';
+                this.resultMode = 'compare';
+                const params = {
+                    gwDeviceId,
+                    identifierList: subIds,
+                    type: 1,
+                    beginTime: times.beginTime,
+                    endTime: times.endTime,
+                };
+                if (Array.isArray(subDeviceIds) && subDeviceIds.length > 0) {
+                    params.subDeviceIds = subDeviceIds;
+                }
+                getSubDeviceComparativeHistory(params).then((res) => {
+                    if (res.code === 200) {
+                        this.subCompareDatas = res.data || [];
+                        this.formatSubCompareTable();
+                        this.$nextTick(() => setTimeout(() => this.redrawChart(), 300));
+                    }
+                    this.loading = false;
+                });
+                return;
+            }
+            this.loading = true;
+            this.gwResultMode = 'calc';
+            this.resultMode = 'calc';
+            const identifierList = calcIds.map((id) => {
+                const item = this.gwCalcIdentifierList.find((i) => i.identifier === id) || {};
+                return { identifier: id, type: item.type || 1 };
+            });
+            getDeviceHistoryCalculated({
+                deviceId: device.deviceId,
+                serialNumber: device.serialNumber,
+                identifierList,
+                beginTime: times.beginTime,
+                endTime: times.endTime,
+            }).then((res) => {
+                if (res.code === 200) {
+                    this.gwCalcDatas = res.data || [];
+                    this.gwCalcTableHeaderTemp = calcIds.map((id) => {
+                        const m = this.gwCalcIdentifierList.find((i) => i.identifier === id);
+                        return { name: (m && m.modelName) || id, value: id };
+                    });
+                    this.formatGwCalcTable();
+                    this.$nextTick(() => setTimeout(() => this.redrawChart(), 300));
+                }
+                this.loading = false;
+            });
+        },
+        formatGwCalcTable() {
+            this.gwCalcTableComTemp = (this.gwCalcDatas || []).map((item) => {
+                const time = Object.keys(item)[0];
+                const vals = Object.values(item)[0] || [];
+                const obj = { time };
+                vals.forEach((v) => {
+                    const k = Object.keys(v)[0];
+                    obj[k] = Object.values(v)[0];
+                });
+                return obj;
+            });
+            this.gwCalcTotal = this.gwCalcTableComTemp.length;
+            this.gwCalcPageNum = 1;
+        },
+        formatGwSingleTable() {
+            const ids = this.gwSelectedSubIdentifiers;
+            this.gwSingleTableComTemp = (this.gwSingleDatas || []).map((item) => {
+                const time = Object.keys(item)[0];
+                const vals = Object.values(item)[0] || [];
+                const obj = { time };
+                vals.forEach((v) => {
+                    const k = Object.keys(v)[0];
+                    obj[k] = Object.values(v)[0];
+                });
+                return obj;
+            });
+            this.gwSingleTotal = this.gwSingleTableComTemp.length;
+            this.gwSinglePageNum = 1;
+            this.gwSingleTableHeaderTemp = ids.map((id) => {
+                const m = this.subCompareIdentifierList.find((i) => i.identifier === id);
+                return { name: (m && m.modelName) || id, value: id };
+            });
+        },
+        subCompareColSep() {
+            return ':::';
+        },
+        getSubCompareColumnLabel(key) {
+            if (key === 'time') return '更新时间';
+            const sep = this.subCompareColSep();
+            if (key && key.includes(sep)) {
+                const idx = key.indexOf(sep);
+                const deviceLabel = key.substring(0, idx);
+                const identifier = key.substring(idx + sep.length);
+                const model = (this.subCompareIdentifierList || []).find((i) => i.identifier === identifier);
+                return `${deviceLabel} - ${(model && model.modelName) || identifier}`;
+            }
+            return key;
+        },
+        formatSubCompareTable() {
+            this.subCompareTableComTemp = this.subCompareDatas || [];
+            this.subCompareTotal = this.subCompareTableComTemp.length;
+            this.subComparePageNum = 1;
+            const cols = [];
+            if (this.subCompareDatas.length) {
+                Object.keys(this.subCompareDatas[0]).forEach((k) => {
+                    cols.push({ prop: k, label: this.getSubCompareColumnLabel(k) });
+                });
+            }
+            this.subCompareTableColumns = cols;
+        },
+        calcChartHeight(seriesCount) {
+            return Math.min(1200, Math.max(480, seriesCount * 14 + 360));
+        },
+        applyIndependentScale(series) {
+            series.forEach((s) => {
+                const nums = (s.data || []).filter((v) => v != null && v !== '').map(Number).filter((n) => !isNaN(n));
+                if (nums.length === 0) return;
+                const min = Math.min(...nums);
+                const max = Math.max(...nums);
+                const range = max - min;
+                s.data = s.data.map((v) => {
+                    if (v == null || v === '') return null;
+                    const num = Number(v);
+                    if (isNaN(num)) return null;
+                    return {
+                        value: range === 0 ? 0 : ((num - min) / range) * 200 - 100,
+                        _original: v,
+                    };
+                });
+            });
+            return {
+                type: 'value',
+                min: -100,
+                max: 100,
+                splitNumber: 4,
+                axisLine: { show: true },
+                axisTick: { show: true },
+                axisLabel: {
+                    formatter: (val) => val + '%',
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: { type: 'dashed', opacity: 0.5 },
+                },
+            };
+        },
+        independentScaleTooltip() {
+            return {
+                trigger: 'axis',
+                formatter: (params) => {
+                    if (!params || !params.length) return '';
+                    let html = '<div style="font-size:12px">' + params[0].axisValueLabel + '</div>';
+                    params.forEach((p) => {
+                        if (p.data == null) return;
+                        const val = typeof p.data === 'object' && p.data._original != null ? p.data._original : p.value;
+                        html += p.marker + ' ' + p.seriesName + ': <b>' + val + '</b><br/>';
+                    });
+                    return html;
+                },
+            };
+        },
+        handleYAxisModeChange() {
+            this.$nextTick(() => {
+                if (this.hasChartData) this.redrawChart();
+            });
+        },
+        buildNormalSeries() {
+            return this.queryParams.identifiers.map((item) => {
+                const meta = this.normalIdentifierList.find((chil) => chil.identifier === item);
+                return {
+                    name: (meta && meta.modelName) || item,
+                    type: 'line',
+                    smooth: true,
+                    data: this.normalDatas.map((d) => {
+                        const row = Object.values(d)[0] || [];
+                        const ide = row.find((f) => Object.keys(f)[0] === item);
+                        return ide ? Object.values(ide)[0] : null;
+                    }),
+                };
+            });
+        },
+        redrawChart() {
+            this.disposeChart();
+            if (!this.$refs.lineChart || !this.hasChartData) return;
+            let series = [];
+            let xData = [];
+            let gridBottom = '5%';
+            let xRotate = 0;
+            if (this.resultMode === 'normal') {
+                series = this.buildNormalSeries();
+                xData = this.normalDatas.map((item) => Object.keys(item)[0]);
+            } else if (this.resultMode === 'calc') {
+                const ids = this.gwSelectedCalcIdentifiers;
+                xData = this.gwCalcDatas.map((d) => Object.keys(d)[0]);
+                series = ids.map((id) => {
+                    const m = this.gwCalcIdentifierList.find((i) => i.identifier === id);
+                    return {
+                        name: (m && m.modelName) || id,
+                        type: 'line',
+                        smooth: true,
+                        data: this.gwCalcDatas.map((d) => {
+                            const arr = Object.values(d)[0] || [];
+                            const o = arr.find((x) => Object.keys(x)[0] === id);
+                            return o ? Object.values(o)[0] : null;
+                        }),
+                    };
+                });
+                gridBottom = '15%';
+                xRotate = 30;
+            } else if (this.resultMode === 'single') {
+                const ids = this.gwSelectedSubIdentifiers;
+                xData = this.gwSingleDatas.map((d) => Object.keys(d)[0]);
+                series = ids.map((id) => {
+                    const m = this.subCompareIdentifierList.find((i) => i.identifier === id);
+                    return {
+                        name: (m && m.modelName) || id,
+                        type: 'line',
+                        smooth: true,
+                        data: this.gwSingleDatas.map((d) => {
+                            const arr = Object.values(d)[0] || [];
+                            const o = arr.find((x) => Object.keys(x)[0] === id);
+                            return o ? Object.values(o)[0] : null;
+                        }),
+                    };
+                });
+                gridBottom = '15%';
+                xRotate = 30;
+            } else if (this.resultMode === 'compare') {
+                if (!this.subCompareDatas.length || !this.subCompareDatas[0]) return;
+                xData = this.subCompareDatas.map((d) => d.time);
+                const keys = Object.keys(this.subCompareDatas[0]).filter((k) => k !== 'time');
+                series = keys.map((k) => ({
+                    name: this.getSubCompareColumnLabel(k),
+                    type: 'line',
+                    smooth: true,
+                    data: this.subCompareDatas.map((d) => d[k]),
+                }));
+                gridBottom = '15%';
+                xRotate = 30;
+            }
+            if (!series.length) return;
+            this.chartHeight = this.calcChartHeight(series.length);
+            this.$nextTick(() => {
+                if (!this.$refs.lineChart) return;
+                const yAxis = this.independentYAxis ? this.applyIndependentScale(series) : { type: 'value', scale: true };
+                const tooltip = this.independentYAxis ? this.independentScaleTooltip() : { trigger: 'axis' };
+                const chart = this.$echarts.init(this.$refs.lineChart);
+                chart.setOption({
+                    tooltip,
+                    legend: { align: 'right', left: '3%', top: this.resultMode === 'normal' ? '15%' : '3%' },
+                    grid: {
+                        top: this.resultMode === 'normal' ? '30%' : '30%',
+                        left: '5%',
+                        right: '5%',
+                        bottom: gridBottom,
+                        containLabel: true,
+                    },
+                    toolbox: { feature: { dataView: {}, restore: {}, saveAsImage: {} } },
+                    dataZoom: [
+                        { type: 'inside', start: 0, end: 100 },
+                        { start: 0, end: 100 },
+                    ],
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: true,
+                        axisTick: { alignWithLabel: true },
+                        axisLabel: { rotate: xRotate },
+                        data: xData,
+                    },
+                    yAxis,
+                    series,
+                });
+                chart.resize();
+                this.chartInstance = chart;
+            });
+        },
+        onActivePagination(e) {
+            if (this.resultMode === 'normal') {
+                this.normalPageNum = e.page;
+                this.normalPageSize = e.limit;
+            } else if (this.resultMode === 'calc') {
+                this.gwCalcPageNum = e.page;
+                this.gwCalcPageSize = e.limit;
+            } else if (this.resultMode === 'single') {
+                this.gwSinglePageNum = e.page;
+                this.gwSinglePageSize = e.limit;
+            } else if (this.resultMode === 'compare') {
+                this.subComparePageNum = e.page;
+                this.subComparePageSize = e.limit;
+            }
+        },
+        handleReset() {
+            this.disposeChart();
+            this.hasQueried = false;
+            this.resultMode = '';
+            this.gwResultMode = '';
+            this.clearAllResults();
+            if (this.isGatewayLike) {
+                this.gwQueryParams.identifiers = [];
+                this.gwQueryParams.subDeviceIds = null;
+                this.gwQueryParams.dayDaterange = this.defaultDayDaterange();
+                this.loadGatewayContext();
+            } else {
+                this.queryParams.identifiers = [];
+                this.queryParams.dayDaterange = this.defaultDayDaterange();
+                this.loadNormalIdentifiers();
+            }
+        },
+        async handleExportNormal() {
+            if (!this.queryParams.identifiers.length) {
+                this.$message.warning('请先选择变量和时间范围');
+                return;
+            }
+            const times = this.parseDayDaterange(this.queryParams.dayDaterange);
+            if (!times) return;
+            if (this.normalDatas.length === 0) {
+                this.$message.warning('没有数据可导出');
+                return;
+            }
+            const qd = this.getNormalQueryDevice();
+            try {
+                this.exportLoading = true;
+                const identifierList = [];
+                for (const id of this.queryParams.identifiers) {
+                    const row = this.normalIdentifierList.find((x) => x.identifier === id);
+                    if (!row) {
+                        this.$message.warning('存在无效的变量选择');
+                        return;
+                    }
+                    identifierList.push({ identifier: row.identifier, type: row.type });
+                }
+                const params = {
+                    deviceId: qd.deviceId,
+                    serialNumber: qd.serialNumber,
+                    identifierList,
+                    beginTime: times.beginTime,
+                    endTime: times.endTime,
+                };
+                const res = await exportDeviceHistory(params);
+                if (res instanceof Blob) {
+                    const ok = await blobValidate(res.slice());
+                    if (!ok) {
+                        try {
+                            const err = JSON.parse(await res.text());
+                            this.$message.error(err.msg || '导出失败');
+                            return;
+                        } catch (e) {
+                            this.$message.error('导出失败');
+                            return;
+                        }
+                    }
+                    saveAs(res, `${qd.serialNumber || '设备'}_${moment().format('YYYYMMDDHHmmss')}.xlsx`);
+                    this.$message.success('导出成功');
+                }
+            } catch (e) {
+                this.$message.error(e.message || '导出失败');
+            } finally {
+                this.exportLoading = false;
+            }
+        },
+        async handleGwExport() {
+            const { identifiers, subDeviceIds, dayDaterange } = this.gwQueryParams;
+            const gwDeviceId = this.device.deviceId;
+            if (!identifiers?.length) {
+                this.$message.warning('请先选择物模型和时间范围');
+                return;
+            }
+            const times = this.parseDayDaterange(dayDaterange);
+            if (!times) return;
+            const device = this.device;
+            const calcIds = this.gwSelectedCalcIdentifiers;
+            const subIds = this.gwSelectedSubIdentifiers;
+            if (calcIds.length > 0 && subIds.length > 0) {
+                this.$message.warning('不能混合选择计算量与子设备变量');
+                return;
+            }
+            try {
+                this.exportLoading = true;
+                const beginTime = times.beginTime;
+                const endTime = times.endTime;
+                const singleId = Array.isArray(subDeviceIds) && subDeviceIds.length === 1 ? subDeviceIds[0] : null;
+                if (this.gwResultMode === 'single' && singleId) {
+                    const sub = this.gwSubDeviceList.find((s) => s.subDeviceId === singleId);
+                    if (!sub || this.gwSingleDatas.length === 0) {
+                        this.$message.warning('没有数据可导出');
+                        return;
+                    }
+                    const identifierList = subIds.map((id) => {
+                        const item = this.subCompareIdentifierList.find((i) => i.identifier === id) || {};
+                        return { identifier: id, type: item.type || 1 };
+                    });
+                    const res = await exportDeviceHistory({
+                        deviceId: sub.subDeviceId,
+                        serialNumber: sub.subDeviceNo,
+                        identifierList,
+                        beginTime,
+                        endTime,
+                    });
+                    if (res instanceof Blob && (await blobValidate(res.slice()))) {
+                        saveAs(res, `${sub.subDeviceNo}_${subIds.join('-')}_${moment().format('YYYYMMDDHHmmss')}.xlsx`);
+                        this.$message.success('导出成功');
+                    }
+                    return;
+                }
+                if (this.gwResultMode === 'compare' && this.subCompareDatas.length > 0) {
+                    const params = { gwDeviceId, identifierList: subIds, type: 1, beginTime, endTime };
+                    if (Array.isArray(subDeviceIds) && subDeviceIds.length > 0) params.subDeviceIds = subDeviceIds;
+                    const res = await exportSubDeviceComparativeHistory(params);
+                    if (res instanceof Blob && (await blobValidate(res.slice()))) {
+                        saveAs(res, `sub_compare_${subIds.length ? subIds.join('-') : 'compare'}_${moment().format('YYYYMMDDHHmmss')}.xlsx`);
+                        this.$message.success('导出成功');
+                    }
+                    return;
+                }
+                if (this.gwResultMode === 'calc' && this.gwCalcDatas.length > 0) {
+                    const identifierList = calcIds.map((id) => {
+                        const item = this.gwCalcIdentifierList.find((i) => i.identifier === id) || {};
+                        return { identifier: id, type: item.type || 1 };
+                    });
+                    const res = await exportDeviceHistoryCalculated({
+                        deviceId: device.deviceId,
+                        serialNumber: device.serialNumber,
+                        identifierList,
+                        beginTime,
+                        endTime,
+                    });
+                    if (res instanceof Blob && (await blobValidate(res.slice()))) {
+                        saveAs(res, `${device.serialNumber}_calculated_${moment().format('YYYYMMDDHHmmss')}.xlsx`);
+                        this.$message.success('导出成功');
+                    }
+                    return;
+                }
+                this.$message.warning('没有数据可导出');
+            } catch (e) {
+                this.$message.error(e.message || '导出失败');
+            } finally {
+                this.exportLoading = false;
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+.device-history-table-panel {
+    margin-top: 8px;
+}
+.chart-card {
+    margin-top: 12px;
+}
+.chart-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.chart-body {
+    min-height: 120px;
+}
+.line-chart {
+    width: 100%;
+    background: #fff;
+}
+</style>
diff --git a/yack-web/src/views/iot/device/device-edit.vue b/yack-web/src/views/iot/device/device-edit.vue
index 96abaf03..1d859b6d 100644
--- a/yack-web/src/views/iot/device/device-edit.vue
+++ b/yack-web/src/views/iot/device/device-edit.vue
@@ -165,6 +165,14 @@
         <device-things-model ref="deviceThingsModel" :device="form"/>
       </el-tab-pane>
 
+      <!--  历史记录（照搬数据中心-历史记录）      -->
+      <el-tab-pane name="deviceHistoryRecord" :disabled="form.deviceId == 0" v-if="form.deviceType !== 3" lazy>
+        <span slot="label">{{ $t('device.device-edit.148398-84') }}</span>
+        <div style="padding-left: 10px">
+          <device-history-table-panel :device="form" :load-calculated-history-defaults="true" />
+        </div>
+      </el-tab-pane>
+
       <el-tab-pane
         name="deviceSub"
         :disabled="form.deviceId == 0"
@@ -375,6 +383,7 @@ import deviceInlineVideo from './device-inline-video';
 import deviceFuncLog from './device-functionlog';
 import deviceSub from './device-sub';
 import deviceThingsModel from './device-things-model.vue';
+import DeviceHistoryTablePanel from '@/views/dataCenter/components/DeviceHistoryTablePanel.vue';
 import vueQr from 'vue-qr';
 import {loadMap} from '@/utils/map.js';
 import {
@@ -424,6 +433,7 @@ export default {
     deviceModbusTask,
     deviceInlineVideo,
     deviceThingsModel,
+    DeviceHistoryTablePanel,
   },
   watch: {
     activeName(val) {