<script setup lang="ts">
import Wendu2 from "../components2/wendu2.vue";
import wendu3 from "../components2/wendu3.vue";
import Turang2 from "../components2/turang2.vue";
import Shidu2 from "../components2/shidu2.vue";
import Shidu3 from "../components2/shidu3.vue";
import Ph from "../components2/ph.vue";
import Ph3 from "../components2/ph3.vue";
import Guang2 from "../components2/guang2.vue";
import finding2 from "../components2/finding2.vue";
import Askai from "../components1/askai.vue";
import { ref, onMounted, nextTick } from 'vue';
import { ElMessageBox, ElNotification, ElDialog, ElMessage } from 'element-plus';
import axios from 'axios';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const drawerVisible = ref(false);
const drawerVisibleHumidity = ref(false);
const drawerVisiblePh = ref(false);
const progressValue = ref(85);
const isExporting = ref(false);

// PDF preview related
const pdfModalVisible = ref(false);
const pdfModalContent = ref<HTMLElement | null>(null);

// Report export related
const exportReportDialogVisible = ref(false);
const isReportLoading = ref(false);
const reportErrorMessage = ref('');
const isDownloadReady = ref(false);

// Data related
const currentTemperature = ref('27.5');
const isTemperatureLoading = ref(true);
const currentPh = ref('6.5');
const currentHumidity = ref('34%');
const currentLightIntensity = ref('0');
const maintenanceSuggestions = ref<{
  deviceName: string;
  warningType: string;
  warningValue?: number;
  urgent: boolean;
  faultDescription?: string;
  timestamp?: string;
}[]>([]);
const isMaintenanceLoading = ref(false);

// 添加标志跟踪关键温度警告是否已显示
const hasCriticalTemperatureWarning = ref(false);

// Simulated abnormal status
const isTemperatureAbnormal = ref(false);
const isHumidityAbnormal = ref(false);
const hasCriticalHumidityWarning = ref(false);

// Enhanced maintenance suggestions with faster response
const fetchMaintenanceSuggestions = () => {
  // 检查是否已经显示关键温度警告，如果是则跳过更新
  if (hasCriticalTemperatureWarning.value) {
    return;
  }

  isMaintenanceLoading.value = true;

  // Simulate faster response (500ms instead of 800ms)
  setTimeout(() => {
    const suggestions = [];

    // Default normal status
    if (!isTemperatureAbnormal.value && !isHumidityAbnormal.value) {
      suggestions.push({
        deviceName: '所有设备',
        warningType: 'normal',
        urgent: false,
        faultDescription: '设备运行正常',
        timestamp: new Date().toLocaleString()
      });
    }

    // Temperature alerts - 保持不变
    if (isTemperatureAbnormal.value) {
    }
    //
    maintenanceSuggestions.value = suggestions;
    isMaintenanceLoading.value = false;
  }, 500); // Reduced from 800ms to 500ms for faster response
};

const handleWarning = (value) => {
  if(maintenanceSuggestions.value.length >= 2) return
  if(value === 1) {
    maintenanceSuggestions.value = []
    maintenanceSuggestions.value.push({
      deviceName: '温度传感器',
      warningType: 'temperature_high',
      warningValue: 32,
      urgent: true,
      faultDescription: '6月8日检测到温度异常高(38°C)',
      timestamp: new Date().toLocaleString()
    });
  }
  if(value === 2) {
    maintenanceSuggestions.value.push({
      deviceName: '湿度传感器',
      warningType: 'temperature_high',
      warningValue: 38,
      urgent: true,
      faultDescription: '6月11日检测到湿度异常高(95°C)',
      timestamp: '2025-06-08 14:30'
    });
  }
  hasCriticalTemperatureWarning.value = true;
}

// 计算温州地区当前时间的光照强度（使用高斯曲线模拟）
const calculateWenzhouLightIntensity = () => {
  const now = new Date();
  const hour = now.getHours() + now.getMinutes() / 60; // 计算小时数（包含分钟）
  let intensity = 0;

  // 模拟温州晴天的真实光照强度（单位：lux）
  if (hour >= 5 && hour < 20) {
    // 日出到日落之间有光照
    const normalizedHour = (hour - 5) / 15; // 映射到 [0, 1]
    const peakTime = 0.5; // 正午12:30左右达到顶峰
    const curve = Math.exp(-Math.pow((normalizedHour - peakTime) * 3, 2)); // 高斯曲线
    intensity = 100000 * curve;
  }

  // 添加±5%随机波动
  return Math.max(0, Math.min(100000, intensity * (1 + 0.05 * (Math.random() * 2 - 1))));
};

// Simulate getting temperature data
const fetchDeviceATemperature = async () => {
  try {
    isTemperatureLoading.value = true;
    currentTemperature.value = isTemperatureAbnormal.value ? '32.5°C' : '27.5°C';
  } catch (error) {
    console.error('获取温度数据失败:', error);
    currentTemperature.value = '获取失败';
  } finally {
    isTemperatureLoading.value = false;
  }
};

// Simulate getting humidity data - 修改为66%-75%随机
const fetchHumidityData = async () => {
  try {
    // 生成66到75之间的随机湿度值
    const randomHumidity = Math.floor(66 + Math.random() * 9); // 66 + (0-8.999...) => 66-74.999... => 66-74
    currentHumidity.value = `${randomHumidity}%`;
  } catch (error) {
    console.error('获取湿度数据失败:', error);
    currentHumidity.value = '获取失败';
  }
};

// Simulate getting pH data - 修改为6.6-7.3随机
const fetchPhData = async () => {
  try {
    // 生成6.6到7.3之间的随机PH值
    const randomPh = (6.6 + Math.random() * 0.7).toFixed(1); // 6.6 + (0-0.699...) => 6.6-7.299... => 6.6-7.3
    currentPh.value = randomPh;
  } catch (error) {
    console.error('获取pH数据失败', error);
    currentPh.value = '获取失败';
  }
};

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要关闭此分析页面吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
      .then(() => done())
      .catch(() => {});
};

const exportToPDF = async () => {
  try {
    isExporting.value = true;
    ElNotification({
      title: '正在准备报表',
      message: '正在生成报表预览...',
      type: 'info',
      duration: 2000
    });

    await Promise.all([
      fetchDeviceATemperature(),
      fetchPhData(),
      fetchHumidityData()
    ]);

    pdfModalVisible.value = true;
    await nextTick();
  } catch (error) {
    console.error('生成预览失败:', error);
    ElNotification({
      title: '错误',
      message: '生成预览时出错: ' + (error as Error).message,
      type: 'error',
      duration: 5000
    });
  } finally {
    isExporting.value = false;
  }
};

const downloadPDF = async () => {
  try {
    isReportLoading.value = true;
    isDownloadReady.value = false;

    const element = pdfModalContent.value;
    if (!element) throw new Error('找不到要导出的内容');

    ElMessage({
      message: '正在生成PDF...',
      type: 'loading',
      duration: 0,
      center: true
    });

    const canvas = await html2canvas(element, {
      scale: 3,
      useCORS: true,
      allowTaint: true,
      backgroundColor: '#ffffff',
      logging: false
    });

    const pdf = new jsPDF({
      orientation: 'portrait',
      unit: 'mm'
    });

    const imgData = canvas.toDataURL('image/jpeg', 0.95);
    const imgWidth = pdf.internal.pageSize.getWidth() - 20;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;

    pdf.addImage(imgData, 'JPEG', 10, 10, imgWidth, imgHeight);

    const fileName = `农业环境分析报告_${new Date().toLocaleDateString().replace(/\//g, '-')}.pdf`;
    pdf.save(fileName);

    isReportLoading.value = false;
    isDownloadReady.value = true;

    ElMessage.closeAll();
    ElNotification({
      title: '导出成功',
      message: `报表已成功导出为 ${fileName}`,
      type: 'success',
      duration: 5000
    });

    pdfModalVisible.value = false;
  } catch (error) {
    isReportLoading.value = false;
    isDownloadReady.value = false;

    ElMessage.closeAll();
    console.error('导出PDF失败:', error);
    ElNotification({
      title: '导出失败',
      message: '生成PDF时出错: ' + (error as Error).message,
      type: 'error',
      duration: 5000
    });
  }
};

const suggestionText = (suggestion: {
  deviceName: string;
  warningType: string;
  urgent: boolean;
  faultDescription?: string;
}) => {
  if (suggestion.faultDescription) {
    const timeInfo = suggestion.timestamp ? `` : '';
    return `${suggestion.deviceName}检测到${suggestion.faultDescription}`;
  }

  switch (suggestion.warningType) {
    case 'temperature_high':
      return `${suggestion.deviceName}温度持续异常，请立即检查散热系统`;
    case 'humidity_high':
      return `${suggestion.deviceName}湿度持续异常，请检查灌溉系统`;
    case 'ph_abnormal':
      return `${suggestion.deviceName}pH值持续异常，请检查液体成分`;
    default:
      return `${suggestion.deviceName}运行正常`;
  }
};

const handleExportReport = async () => {
  try {
    isReportLoading.value = true;
    isDownloadReady.value = false;
    reportErrorMessage.value = '';

    await exportToPDF();
  } catch (error: any) {
    console.error('导出报表失败:', error);
    reportErrorMessage.value = error.message || '生成报表时出错';

    ElNotification({
      title: '导出失败',
      message: reportErrorMessage.value,
      type: 'error',
      duration: 5000
    });
  }
};

const handleDownloadReport = () => {
  exportToPDF();
};

const closeExportDialog = () => {
  exportReportDialogVisible.value = false;
};

const handlePdfClose = (done: () => void) => {
  ElMessageBox.confirm('确定要关闭报表预览吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(() => {
        done();
      })
      .catch(() => {});
};

// Simulate environment changes
const simulateEnvironmentChange = () => {
  isTemperatureAbnormal.value = Math.random() > 0.7;
  isHumidityAbnormal.value = Math.random() > 0.7;

  // 计算温州地区当前光照强度，取整数
  currentLightIntensity.value = calculateWenzhouLightIntensity().toFixed(0);

  fetchDeviceATemperature();
  fetchHumidityData();
  fetchPhData();
  fetchMaintenanceSuggestions();
};

onMounted(() => {
  fetchDeviceATemperature();
  fetchPhData();
  fetchHumidityData();
  // 初始化光照强度，取整数
  currentLightIntensity.value = calculateWenzhouLightIntensity().toFixed(0);

  // 每5秒更新一次环境数据
  setInterval(simulateEnvironmentChange, 5000);
});

</script>

<template>
  <!-- 模板部分保持不变 -->
  <div id="all">
    <!-- Fixed top data cards -->
    <div class="top-container">
      <div class="box">
        <div class="data-container">
          <div class="number">{{ currentTemperature }}</div>
          <svg t="1747892350883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6895" width="200" height="200"><path d="M752.65536 220.16c-59.38176 0-107.52 48.13824-107.52 107.52s48.13824 107.52 107.52 107.52 107.52-48.13824 107.52-107.52-48.13824-107.52-107.52-107.52z m0 61.44a46.08 46.08 0 1 1 0 92.16 46.08 46.08 0 0 1 0-92.16zM396.83584 51.22048C313.17504 52.57728 245.77536 120.81664 245.77536 204.8v365.85472l-1.65888 1.50016c-67.5072 61.5168-92.68736 157.81888-62.59712 245.22752 32.01024 92.98944 119.51104 155.40736 217.856 155.40736 98.33984 0 185.84064-62.41792 217.856-155.40736l0.93696-2.7904c28.60544-86.66112 3.2512-181.57568-63.5392-242.43712l-1.65376-1.49504V204.8c0-84.83328-68.77184-153.6-153.6-153.6l-2.53952 0.02048zM399.37536 112.64c50.8928 0 92.16 41.26208 92.16 92.16v380.2624l0.01536 1.15712c0.36864 10.73664 5.77024 19.14368 13.312 24.2176l0.1536 0.09216 1.97632 1.60768A168.96 168.96 0 1 1 239.616 797.38368l-0.7424-2.2016a168.96 168.96 0 0 1 52.85888-183.02976l1.9968-1.62304 0.1536-0.09728c7.81312-5.25312 13.33248-14.08 13.33248-25.37472V204.8c0-50.89792 41.26208-92.16 92.16-92.16z" fill="#2ECC71" p-id="6896"></path><path d="M399.37536 634.88c-59.38176 0-107.52 48.13824-107.52 107.52s48.13824 107.52 107.52 107.52 107.52-48.13824 107.52-107.52-48.13824-107.52-107.52-107.52z m0 61.44a46.08 46.08 0 1 1 0 92.16 46.08 46.08 0 0 1 0-92.16z" fill="#2ECC71" p-id="6897"></path><path d="M399.37536 327.68a30.72 30.72 0 0 1 30.69952 29.568l0.02048 1.152v307.2a30.72 30.72 0 0 1-61.41952 1.152l-0.02048-1.152V358.4a30.72 30.72 0 0 1 30.72-30.72z" fill="#2ECC71" p-id="6898"></path></svg>
          <div class="label1">平均温度</div>
        </div>
      </div>
      <div class="box">
        <div class="data-container">
          <div class="number">{{ currentHumidity }}</div>
          <svg t="1747892908314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37543" width="200" height="200"><path d="M424.3456 0h-0.068267a43.690667 43.690667 0 0 0-33.109333 15.223467C354.645333 58.026667 34.133333 439.159467 34.133333 638.293333 34.133333 851.012267 209.851733 1024 425.847467 1024c215.995733 0 391.7824-172.987733 391.7824-385.6384 0-199.338667-323.3792-580.471467-360.2432-623.274667A43.690667 43.690667 0 0 0 424.3456 0z m1.501867 938.666667c-168.209067 0-305.015467-134.690133-305.015467-300.305067 0-127.931733 195.857067-395.6736 303.650133-528.452267 108.7488 132.7104 306.449067 400.452267 306.449067 528.452267 0 165.614933-136.874667 300.305067-305.083733 300.305067zM873.198933 0s-115.575467 135.441067-115.575466 198.587733c0 63.146667 51.950933 114.2784 116.053333 114.2784 64.170667 0 116.189867-51.2 116.189867-114.2784C989.866667 135.441067 873.198933 0 873.198933 0z" fill="#f7c244" p-id="37544"></path><path d="M243.370667 434.312533C205.141333 494.045867 170.666667 520.055467 170.666667 600.405333c0 158.5152 127.044267 283.101867 259.003733 283.101867S684.714667 783.701333 684.714667 625.117867c0-25.463467 0-37.341867-12.0832-71.953067-1.2288-3.549867-17.681067-35.976533-18.8416-39.3216-6.826667-20.2752-52.155733-40.072533-68.130134-29.627733-16.315733 10.6496-35.498667 21.162667-57.344 25.531733-75.434667 15.086933-97.211733 2.048-150.869333-30.242133-50.312533-30.242133-109.704533-83.217067-134.075733-45.192534z" fill="#f7d37e" p-id="37545"></path></svg>
          <div class="label1">平均湿度</div>
        </div>
      </div>
      <div class="box">
        <div class="data-container">
          <div class="number">{{ currentPh }}</div>
          <svg t="1747893022949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40565" width="200" height="200"><path d="M597.930667 364.987733l-0.802134-2.542933-0.853333-3.6352a34.133333 34.133333 0 0 1-0.392533-3.003733l-0.136534-3.0208V154.1632a34.133333 34.133333 0 0 1 68.181334-2.56l0.085333 2.56v188.893867l277.8624 425.130666 1.501867 2.525867c35.9936 66.986667-10.632533 148.4288-85.572267 151.074133l-3.754667 0.068267H169.949867c-75.861333 0-124.330667-80.3328-91.0848-147.780267l1.723733-3.362133 1.501867-2.5088L359.9872 343.04V153.0368a34.133333 34.133333 0 0 1 31.573333-34.048l2.56-0.085333a34.133333 34.133333 0 0 1 34.048 31.573333l0.085334 2.56v199.8336a34.133333 34.133333 0 0 1-0.6656 6.690133l-0.7168 3.003734a34.133333 34.133333 0 0 1-2.6624 6.690133l-1.655467 2.816L140.288 803.959467l-0.648533 1.365333c-9.728 21.6064 4.898133 46.4896 27.8528 48.1792l2.491733 0.085333h684.066133c24.3712 0 40.3968-25.873067 30.344534-48.247466l-0.682667-1.3824-282.2144-431.8208a34.133333 34.133333 0 0 1-3.549867-7.150934z" fill="#444444" p-id="40566"></path><path d="M716.8 102.4a34.133333 34.133333 0 0 1 2.56 68.164267L716.8 170.666667H307.2a34.133333 34.133333 0 0 1-2.56-68.181334L307.2 102.4h409.6z" fill="#444444" p-id="40567"></path><path d="M699.733333 699.733333v34.133334a34.133333 34.133333 0 0 1-34.133333 34.133333H358.4a34.133333 34.133333 0 0 1-34.133333-34.133333v-34.133334h375.466666z" fill="#00B386" p-id="40568"></path></svg>
          <div class="label">平均PH值</div>
        </div>
      </div>
      <div class="box">
        <div class="data-container">
          <div class="number">{{ currentLightIntensity }}</div>
          <svg t="1747893107823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="41680" width="200" height="200"><path d="M512 256c141.385 0 256 114.615 256 256S653.385 768 512 768 256 653.385 256 512s114.615-256 256-256z m0 64c-106.039 0-192 85.961-192 192s85.961 192 192 192 192-85.961 192-192-85.961-192-192-192z" fill="#d81e06" p-id="41681"></path><path d="M480 64m32 0l0 0q32 0 32 32l0 64q0 32-32 32l0 0q-32 0-32-32l0-64q0-32 32-32Z" fill="#d81e06" p-id="41682"></path><path d="M883.979626 260.287187m16 27.712813l0 0q16 27.712813-11.712813 43.712813l-55.425626 32q-27.712813 16-43.712813-11.712813l0 0q-16-27.712813 11.712813-43.712813l55.425626-32q27.712813-16 43.712813 11.712813Z" fill="#d81e06" p-id="41683"></path><path d="M915.979626 708.287187m-16 27.712813l0 0q-16 27.712813-43.712813 11.712813l-55.425626-32q-27.712813-16-11.712813-43.712813l0 0q16-27.712813 43.712813-11.712813l55.425626 32q27.712813 16 11.712813 43.712813Z" fill="#d81e06" p-id="41684"></path><path d="M544 960m-32 0l0 0q-32 0-32-32l0-64q0-32 32-32l0 0q32 0 32 32l0 64q0 32-32 32Z" fill="#d81e06" p-id="41685"></path><path d="M140.020374 763.712813m-16-27.712813l0 0q-16-27.712813 11.712813-43.712813l55.425626-32q27.712813-16 43.712813 11.712813l0 0q16 27.712813-11.712813 43.712813l-55.425626 32q-27.712813 16-43.712813-11.712813Z" fill="#d81e06" p-id="41686"></path><path d="M108.020374 315.712813m16-27.712813l0 0q16-27.712813 43.712813-11.712813l55.425626 32q27.712813 16 11.712813 43.712813l0 0q-16 27.712813-43.712813 11.712813l-55.425626-32q-27.712813-16-11.712813-43.712813Z" fill="#d81e06" p-id="41687"></path></svg>
          <div class="label">光照强度</div>
        </div>
      </div>
    </div>

    <!-- Main content -->
    <div class="body">
      <div class="body-top-box">
        <!-- Temperature content -->
        <div class="body-top-temp">
          <h3 class="clickable-area" @click="drawerVisible = true">设备温度日志表柱形图</h3>
          <wendu2 @handleWarning="handleWarning(1)"/>
        </div>
        <!-- Humidity content -->
        <div class="body-top-shidu">
          <h3 class="clickable-area01" @click="drawerVisibleHumidity = true" >设备湿度日志图</h3>
          <shidu2 @handleWarning="handleWarning(2)" class="uu"/>
        </div>
      </div>
      <div class="body-middle-box">
        <!-- pH content -->
        <div class="body-mid-ph">
          <h3 class="clickable-area" @click="drawerVisiblePh = true">PH值的散点分布图</h3>
          <ph/>
        </div>
        <div class="body-mid-guang">
          <guang2 class="gg1"/>
        </div>
      </div>
      <div class="under-box">
        <div class="body-under">
          <turang2/>
        </div>
        <div class="body-under-right">
          <finding2/>
        </div>
      </div>

      <!-- Smart analysis section -->
      <div class="smart-analysis-container">
        <div class="analysis-header">
          <h2 class="analysis-title">智能分析</h2>
          <button class="baobiao-button" @click="handleExportReport">
            导出报表
          </button>
        </div>
        <div class="confidence-section">
          <h3 class="section-title">故障预测置信度</h3>
          <div class="custom-progress-bar">
            <div class="progress-background"></div>
            <div class="progress-fill" :style="{ width: progressValue + '%' }"></div>
          </div>
          <div class="confidence-value">85%</div>
        </div>
        <div class="maintenance-section">
          <h3 class="section-title">异常检测</h3>
          <ul class="maintenance-list" v-if="!isMaintenanceLoading && maintenanceSuggestions.length > 0">
            <li
                v-for="(suggestion, index) in maintenanceSuggestions"
                :key="index"
                :class="['maintenance-item', { 'urgent': suggestion.urgent }]"
            >
              <span class="item-icon" :class="suggestion.urgent ? 'urgent-icon' : 'normal-icon'">
                {{ suggestion.urgent ? '!' : '✓' }}
              </span>
              <span class="item-text">{{ suggestionText(suggestion) }}</span>
            </li>
          </ul>
          <div v-else-if="isMaintenanceLoading" class="loading-container">
            <span class="item-icon">⌛</span>
            <span class="item-text">正在加载维护建议...</span>
          </div>
        </div>



        <div>
          <askai />
        </div>
      </div>
    </div>
    <!-- Drawer components -->
    <el-drawer
        v-model="drawerVisible"
        direction="rtl"
        size="750px"
        :before-close="handleClose"
        :with-header="false"
    >
      <div class="drawer-content">
        <wendu3/>
      </div>
    </el-drawer>

    <el-drawer
        v-model="drawerVisibleHumidity"
        direction="rtl"
        size="750px"
        :before-close="handleClose"
        :with-header="false"
    >
      <div class="drawer-content">
        <shidu3/>
      </div>
    </el-drawer>

    <el-drawer
        v-model="drawerVisiblePh"
        size="750px"
        direction="rtl"
        :before-close="handleClose"
        :with-header="false"
    >
      <ph3/>
    </el-drawer>

    <!-- PDF preview modal -->
    <el-dialog
        v-model="pdfModalVisible"
        width="85%"
        center
        :before-close="(done) => { pdfModalVisible.value = false; done(); }"
    >
      <div ref="pdfModalContent" class="pdf-preview-content">
        <!-- PDF preview content will be generated by html2canvas -->
        <div class="preview-header">
          <h3 style="padding-top: 10px; letter-spacing: 6px;">数据报表</h3>
          <p>生成时间: {{ new Date().toLocaleString() }}</p>
        </div>
        <div class="preview-body">
          <div class="preview-section">
            <div class="data-cards">
              <div class="data-card">
                <div class="card-title">平均温度</div>
                <div class="card-value">{{ currentTemperature }}</div>
              </div>
              <div class="data-card">
                <div class="card-title">平均湿度</div>
                <div class="card-value">{{ currentHumidity }}</div>
              </div>
              <div class="data-card">
                <div class="card-title">平均PH值</div>
                <div class="card-value">{{ currentPh }}</div>
              </div>
              <div class="data-card">
                <div class="card-title">光照强度</div>
                <div class="card-value">{{ currentLightIntensity }}</div>
              </div>
            </div>
            <div class="shuju">
              <div class="header">
                <div class="sj-top1">
                  <div class="wendu">
                    <h1>设备温度日志表柱形图</h1>
                    <wendu2></wendu2>
                  </div>
                </div>
                <div class="sj-top2">
                  <div class="shidu">
                    <div>
                      <h1>设备湿度日志图</h1>
                    </div>


                    <shidu2 style="width: 650px"></shidu2>
                  </div>
                </div>
              </div>

              <div class="foot">
                <div class="sj-foot1">
                  <div class="ph">
                    <h1>PH散点分布图</h1>
                    <ph style="width: 600px;.device-select{position: relative;
                    top: 10px}"></ph>
                  </div>
                </div>
                <div class="sj-foot2">
                  <div class="guang">
                    <guang2></guang2>
                  </div>
                </div>
              </div>
              <div class="under">
                <div class="sj-un1">
                  <div class="turang">
                    <turang2></turang2>
                  </div>
                </div>
                <div class="sj-un2">
                  <div class="finding">
                    <finding2></finding2>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- PDF预览中的智能分析区域 -->
          <div class="smart-analysis-container1">
            <div class="analysis-header">
              <h2 class="analysis-title">智能分析</h2>
            </div>
            <div class="confidence-section">
              <h3 class="section-title" style="padding-top: 10px;">故障预测置信度</h3>
              <div class="custom-progress-bar">
                <div class="progress-background"></div>
                <div class="progress-fill" :style="{ width: progressValue + '%' }"></div>
              </div>
              <div class="confidence-value">85%</div>
            </div>
            <div class="maintenance-section" style="position: relative;top: -10px">
              <h3 class="section-title">建议维护措施</h3>
              <ul class="maintenance-list" v-if="!isMaintenanceLoading && maintenanceSuggestions.length > 0">
                <li
                    v-for="(suggestion, index) in maintenanceSuggestions"
                    :key="index"
                    :class="['maintenance-item', { 'urgent': suggestion.urgent }]"
                >
              <span class="item-icon" :class="suggestion.urgent ? 'urgent-icon' : 'normal-icon'">
                {{ suggestion.urgent ? '!' : '✓' }}
              </span>
                  <span class="item-text">{{ suggestionText(suggestion) }}</span>
                </li>
              </ul>
              <ul class="maintenance-list" v-else-if="!isMaintenanceLoading">
                <li class="maintenance-item">
                  <span class="item-icon normal-icon">✓</span>
                  <span class="item-text">当前没有需要维护的设备</span>
                </li>
              </ul>
              <div v-else class="loading-container">
                <span class="item-icon">⌛</span>
                <span class="item-text">正在加载维护建议...</span>
              </div>
              <div v-if="maintenanceError" class="error-container">
                <span class="item-icon error-icon">❌</span>
                <span class="item-text">{{ maintenanceError }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>



      <template #footer>
        <div class="dialog-footer">
          <el-button @click="pdfModalVisible = false">取消</el-button>
          <el-button type="primary" @click="downloadPDF">下载报表</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- Export report dialog -->
    <el-dialog
        v-model="exportReportDialogVisible"
        width="300px"
        :modal="false"
        :close-on-click-modal="false"
        :show-close="false"
        custom-class="export-report-dialog"
    >
      <div class="blank-dialog-content">
        <div v-if="isReportLoading" class="loading-spinner">
          <i class="el-icon-loading"></i>
          <span>报表生成中...</span>
        </div>
        <div v-else-if="!isDownloadReady" class="error-content" v-if="reportErrorMessage">
          <i class="el-icon-error error-icon"></i>
          <span>{{ reportErrorMessage }}</span>
        </div>
        <div v-else class="success-content">
          <div class="success-icon">
            <i class="el-icon-success"></i>
          </div>
          <p>报表已生成</p>
          <button @click="handleDownloadReport" class="download-btn">下载报表</button>
          <button @click="closeExportDialog" class="close-btn">取消</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 样式部分保持不变 */
.top-container {
  display: flex;
  padding-top: 10px;
  justify-content: center;
  gap: 40px;
  background: #F5F7FA;
  width: calc(100% - 80px);
  z-index: 1000;
  transition: all 0.3s ease;
  margin: 10px 0 -10px 40px;
}

/* 主内容区域调整 */
.body {
  padding: 20px 5px 20px 30px;
  overflow-y: auto;
  background: #f5f5f5;
  margin-top: 0;
  width: calc(100% - 0px);
  box-sizing: border-box;
}

.box {
  flex: 1;
  max-width: 310px;
  background-color: #FFFFFF;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  height: 120px;
}

.data-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gg1{

}
.icon{
  position: relative;
  left: 118px;
  width: 50px;
  height: 200px;
}

.number {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

.label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #626363;
  text-align: center;
  line-height: 25px;
}

.label1 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #626363;
  line-height: 25px;
  position: relative;
  right:5px;
}

/* 图表区域调整 */
.body-top-box{
  display: flex;
  width: calc(100% - 30px); /* 减去右边间距 */
  height: 420px;
  gap: 26px;
  margin-top: 20px;

}
.body-top-temp, .body-top-shidu,
.body-mid-ph, .body-mid-guang,
.body-under, .body-under-right {
  padding: 20px;
  border-radius: 8px;
  border: none;
  background: #FFFFFF;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* 确保padding不影响宽度 */
}

.body-top-temp, .body-top-shidu {
  flex: 1;
}

.body-top-temp h3{
  position: relative;
  top: -13px;
  right: 180px;
}
.body-top-shidu h3{
  position: relative;
  top: -13px;
  right: 190px;
}

.body-middle-box{
  display: flex;
  width: calc(100% - 30px); /* 减去右边间距 */
  height: 420px;
  gap: 26px;
  margin-top: 30px; /* 增加顶部间距使布局更规整 */
}

.body-mid-ph, .body-mid-guang {
  flex: 1;
}

.body-mid-ph h3 {
  margin-top: -13.2px;
  position: relative;
  z-index: 10;
  top: 20px;
  right:  202px;
}

.under-box {
  display: flex;
  width: calc(100% - 30px); /* 减去右边间距 */
  gap: 26px;
  margin-top: 30px; /* 增加顶部间距使布局更规整 */
}

/* 土壤营养分布图与关键发现的宽是4：2 */
.body-under {
  flex: 2; /* 4/(4+2) = 2/3 */
  height: 370px;
}

.body-under-right {
  flex: 1; /* 2/(4+2) = 1/3 */
  height: 370px;
}

/* Smart analysis */
.smart-analysis-container {
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  width: calc(100% - 30px); /* 减去右边间距 */
  padding: 20px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 30px; /* 增加顶部间距使布局更规整 */
  margin-bottom: 30px;
  box-sizing: border-box;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.analysis-title {
  color: #333;
  font-size: 25px;

}
.uu{
  margin-top: 20px;

}
.section-title {
  color: #555;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.custom-progress-bar {
  flex-grow: 1;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin-right: 20px;
}

.progress-fill {
  width: 85%;
  height: 100%;
  background-color: #4285f4;
  transition: width 0.3s ease;
}

.confidence-section {
  margin-top: -6px;
  margin-bottom: 10px;
}

.confidence-value {
  color: #5e99fa;
  font-size: 18px;
  font-weight: 800;
  min-width: 40px;
  text-align: right;
  position: relative;
  top: -35px;
  right: 15px;
}

/* 建议维护措施的样式保持不变 */
.maintenance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-right: 16px;
}

.maintenance-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.maintenance-item.urgent {
  border-left: 4px solid #ff6b6b;
}

.item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 12px;
  font-weight: bold;
}

.normal-icon {
  background-color: #4CAF50;
  color: white;
}

.urgent-icon {
  background-color: #ff6b6b;
  color: white;
}

.item-text {
  flex: 1;
  color: #333;
}

.loading-container {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.error-container {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #f56c6c;
}

.clickable-area {
  border-radius: 4px;
  cursor: pointer;
  margin: 20px;
  margin-left: -40px;
  text-align: center;
  transition: background-color 0.3s;
  z-index: 100;
}

.clickable-area:hover {
  color: #838282;
}

.clickable-area01 {
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  margin-top: 20px;
  transition: background-color 0.3s;
  position: relative;
  left: 17px;
}

.clickable-area01:hover {
  color: #838282;
}

.drawer-content {
  padding: 20px;
  position: relative;
  top: -20px;
}

.baobiao-button {
  background-color: #3498db;
  border-color: #3498db;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.3s ease;
  position: relative;
  top: -7px;
  border: none;
  color: white;
  letter-spacing: 2px;
}

.baobiao-button:hover {
  background-color: #2980b9;
  border-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
}

/* PDF preview styles */
.pdf-preview-content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

}

.preview-header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-top: 30px;
}

.preview-header h3 {
  font-size: 40px;
  margin-bottom: -20px;
  color: #333;
  position: relative;
  top: -30px;
}

.preview-header p {
  font-size: 15px;
  color: #666;
}

.preview-section {
  margin-bottom: 30px;
  background-color: #FFFFFF;
  border-radius: 6px;
}

.preview-section h4 {
  font-size: 18px;
  color: #555;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.data-cards {
  display: flex;              /* Enable flex layout */
  justify-content: space-evenly; /* Evenly distribute cards */
  align-items: stretch;       /* Stretch card heights */
  margin-bottom: 20px;
  gap: 15px;                  /* Card spacing */
  overflow-x: auto;           /* Show scrollbar when needed */
  padding-bottom: 5px;        /* Space for scrollbar */
}

.data-card {
  flex: 1;                    /* Equal space distribution */
  min-width: 0;               /* Allow shrinking */
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 6px;
  text-align: center;
}

/* Small screen optimization */
@media (max-width: 1200px) {
  .data-cards {
    gap: 10px;
  }
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.preview-suggestions {
  list-style: none;
  padding: 0;
}

.preview-suggestion {
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
}

.preview-suggestion:last-child {
  border-bottom: none;
}

.urgent-tag, .normal-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
  font-weight: bold;
}

.urgent-tag {
  background-color: #ff6b6b;
  color: white;
}

.normal-tag {
  background-color: #4CAF50;
  color: white;
}

.suggestion-text {
  font-size: 14px;
  color: #333;
}

.no-suggestions {
  padding: 15px 0;
  color: #666;
  font-size: 14px;
}

/* Export report dialog styles */
.export-report-dialog .blank-dialog-content {
  padding: 30px 20px;
  text-align: center;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-spinner i {
  font-size: 24px;
  color: #409EFF;
  margin-bottom: 10px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(360deg); }
  to { transform: rotate(360deg); }
}

.loading-spinner span {
  color: #666;
  font-size: 14px;
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-icon {
  font-size: 24px;
  color: #f56c6c;
  margin-bottom: 10px;
}

.success-content {
  padding: 20px 0;
}

.success-icon {
  font-size: 48px;
  color: #67c23a;
  margin-bottom: 20px;
}

.success-content p {
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}

.download-btn, .close-btn {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.download-btn {
  background-color: #409EFF;
  color: white;
}

.download-btn:hover {
  background-color: #3a8ee6;
}

.close-btn {
  background-color: #909399;
  color: white;
}

.close-btn:hover {
  background-color: #606266;
}

/* Dialog footer styles */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.header {
  display: flex;              /* Enable flex layout */
  gap: 20px;                  /* Element spacing */
  width: 100%;                /* Full parent width */
  height: 400px;
}

.sj-top1, .sj-top2 {
  flex: 1;                    /* Equal parent width */
  background-color: #fff;     /* Child background */
  padding: 15px;              /* Padding */
  border-radius: 6px;         /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 0;               /* Allow shrinking */
  box-sizing: border-box;     /* Include padding in width */
}

.sj-top1 h1 {
  position: relative;
  top: -20px;
  left: 10px;
  font-size:  19px;
}

.sj-top2 h1{
  position: relative;
  top: -10px;
  left: 10px;
  font-size:  19px;
}

/* Remove positioning that might affect layout */
.wendu, .shidu {
  position: static;           /* Remove absolute positioning */
  top: 0;                     /* Remove top offset */
  right: 0;                   /* Remove right offset */
}

/* Ensure chart containers fit parent */
.wendu > div, .shidu > div {
  width: 100%;                /* Full parent width */
  height: auto;               /* Maintain proper height */
}

.wendu{
  position: relative;
  top: 20px;
}

.shidu{
  position: relative;
  top: 10px;
}

.foot {
  display: flex; /* Enable flex layout */
  justify-content: space-between; /* Space between elements */
  gap: 20px; /* Element spacing */
  margin-top: 20px;
  height: 420px;
}
.shuju{

}
.sj-foot1, .sj-foot2 {
  flex: 1; /* Equal parent width */
  background-color: #fff; /* Child background */
  padding: 15px; /* Padding */
  border-radius: 6px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sj-foot1 h1{
  position: relative;
  top: 10px;
  left: 10px;
  font-size:  19px;
}

.ph{
  position: relative;
  top: -15px;
}

.guang{
  position: relative;
  top: 10px;
}
.under {
  display: flex; /* Enable flex layout */
  gap: 20px; /* Element spacing */
  margin-top: 20px;
  height: 320px;
  margin-bottom: 20px;
}

.sj-un1 {
  width: 925px;
  background-color: #fff; /* Child background */
  padding: 15px; /* Padding */
  border-radius: 6px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  height: 345px;

}
.sj-un2 {
  width:500px;
  background-color: #fff; /* Child background */
  padding: 15px; /* Padding */
  border-radius: 6px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  height: 346px;
}
.turang{
  position: relative;
  top: -10px;
  right:  5px;

}
.finding{
  margin-top: 15px;
  position: relative;
  top: -10px;
  right: 10px;
}
.preview-section-under{
  padding-left: 30px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.preview-section-under h4{
  font-size:  26px;
  padding-top:  20px;
}
::v-deep .el-dialog__header {
  display: none;
}
.smart-analysis-container1{
  margin-top: 48px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>