From 0249ccac4853a85fde9d01e8872c74069f064e72 Mon Sep 17 00:00:00 2001
From: stt <email>
Date: Mon, 24 Nov 2025 14:43:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=A5=E8=A1=A8=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cockpit/governanceReport/index1.vue       | 238 ++++++++++++++++++
 1 file changed, 238 insertions(+)
 create mode 100644 src/components/cockpit/governanceReport/index1.vue

diff --git a/src/components/cockpit/governanceReport/index1.vue b/src/components/cockpit/governanceReport/index1.vue
new file mode 100644
index 0000000..712be7f
--- /dev/null
+++ b/src/components/cockpit/governanceReport/index1.vue
@@ -0,0 +1,238 @@
+<template>
+    <div>
+        <!--治理效果报表 -->
+        <TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
+            <template v-slot:select>
+                <el-form-item label="监测对象">
+                    <el-select
+                        v-model="tableStore.table.params.power"
+                        placeholder="请选择监测对象"
+                        clearable
+                        style="width: 130px"
+                    >
+                        <el-option
+                            v-for="item in powerList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
+            </template>
+        </TableHeader>
+
+        <!-- 左右布局展示治理前后报表 -->
+        <div class="report-container">
+            <!-- 治理前报表 -->
+            <div class="report-panel before">
+                <div class="panel-header">治理前报表</div>
+                <div
+                    id="luckysheet-before"
+                    :style="{
+                        width: '100%',
+                        height: `calc(${prop.height} - ${fullscreen ? '114px' : '57px'} + ${fullscreen ? 0 : 56}px)`
+                    }"
+                ></div>
+            </div>
+
+            <!-- 治理后报表 -->
+            <div class="report-panel after">
+                <div class="panel-header">治理后报表</div>
+                <div
+                    id="luckysheet-after"
+                    :style="{
+                        width: '100%',
+                        height: `calc(${prop.height} - ${fullscreen ? '114px' : '57px'} + ${fullscreen ? 0 : 56}px)`
+                    }"
+                ></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, provide, watch, computed } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { exportExcel } from '@/views/govern/reportForms/export.js'
+import TableHeader from '@/components/table/header/index.vue'
+import Json from './index.json'
+import JsonAfter from './index1.json'
+
+const prop = defineProps({
+    w: { type: [String, Number] },
+    h: { type: [String, Number] },
+    width: { type: [String, Number] },
+    height: { type: [String, Number] },
+    timeKey: { type: [String, Number] },
+    timeValue: { type: Object }
+})
+
+const powerList: any = ref([
+    {
+        label: '1#变压器',
+        value: '1'
+    },
+    {
+        label: '2#变压器',
+        value: '2'
+    }
+])
+
+const tableStore: any = new TableStore({
+    url: '/user-boot/role/selectRoleDetail?id=0',
+    method: 'POST',
+    showPage: false,
+    exportName: '治理效果报表',
+    column: [],
+    beforeSearchFun: () => {
+        tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
+        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+    },
+    loadCallback: () => {}
+})
+
+const tableRef = ref()
+provide('tableRef', tableRef)
+tableStore.table.params.power = '1'
+
+provide('tableStore', tableStore)
+
+// 下载表格
+const downloadExcel = () => {
+    // 可以选择导出治理前、治理后或两个报表
+    const beforeSheets = luckysheetBefore.getAllSheets()
+    const afterSheets = luckysheetAfter.getAllSheets()
+    exportExcel([...beforeSheets, ...afterSheets], '治理效果对比报表')
+}
+
+// 治理前和治理后的Luckysheet实例
+let luckysheetBefore: any
+let luckysheetAfter: any
+
+onMounted(() => {
+    // 创建治理前报表
+    luckysheetBefore = luckysheet.create({
+        container: 'luckysheet-before',
+        title: '治理前',
+        lang: 'zh',
+        showtoolbar: false,
+        showinfobar: false,
+        showsheetbar: true,
+        allowEdit: false,
+        data: Json
+    })
+
+    // 创建治理后报表
+    luckysheetAfter = luckysheet.create({
+        container: 'luckysheet-after',
+        title: '治理后',
+        lang: 'zh',
+        showtoolbar: false,
+        showinfobar: false,
+        showsheetbar: true,
+        allowEdit: false,
+        data: JsonAfter // 使用治理后的数据
+    })
+
+    tableStore.index()
+})
+
+const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
+    if (datePickerValue && datePickerValue.timeValue) {
+        // 更新时间参数
+        tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
+        tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
+
+        // 可以在这里更新报表数据
+        updateReportData()
+    }
+}
+
+// 更新报表数据的方法
+const updateReportData = () => {
+    // 这里可以根据时间参数更新治理前后的报表数据
+    // 示例：重新加载数据或更新现有数据
+    console.log('更新报表数据:', {
+        beginTime: tableStore.table.params.searchBeginTime,
+        endTime: tableStore.table.params.searchEndTime
+    })
+}
+
+// 计算是否全屏展示
+const fullscreen = computed(() => {
+    const w = Number(prop.w)
+    const h = Number(prop.h)
+    if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
+        return true
+    } else {
+        return false
+    }
+})
+
+watch(
+    () => prop.timeKey,
+    val => {
+        tableStore.index()
+        updateReportData()
+    }
+)
+
+watch(
+    () => prop.timeValue,
+    (newVal, oldVal) => {
+        // 当外部时间值变化时，更新表格的时间参数
+        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
+            tableStore.table.params.searchBeginTime = newVal[0]
+            tableStore.table.params.searchEndTime = newVal[1]
+            tableStore.index()
+            updateReportData()
+        }
+    },
+    {
+        deep: true
+    }
+)
+</script>
+
+<style lang="scss" scoped>
+.report-container {
+    display: flex;
+    height: calc(100% - 57px);
+
+    .report-panel {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--el-border-color);
+
+        &.before {
+            margin-right: 5px;
+        }
+
+        &.after {
+            margin-left: 5px;
+        }
+
+        .panel-header {
+            padding: 10px 15px;
+            background-color: var(--el-color-primary-light-9);
+            font-weight: bold;
+            border-bottom: 1px solid var(--el-border-color);
+            text-align: center;
+        }
+
+        // 确保Luckysheet容器占满剩余空间
+        :deep(#luckysheet-before),
+        :deep(#luckysheet-after) {
+            flex: 1;
+        }
+    }
+}
+
+:deep(.el-select) {
+    min-width: 80px;
+}
+</style>