{include file="./header"}
<link rel="stylesheet" href="/{$template_catalog}/template/{$themes}/css/home.css">
<style>
  /* 全局样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", Arial, sans-serif;
  }

  .out-container {
    background-color: #f5f7fa;
    color: #333;
  }

  /* 面板容器 */
  .dml-dashboard-container {
    max-width: 4000px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  /* 头部样式 */
  .dml-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    color: black;
    border-bottom: 0px solid #e8eaec;
    margin-bottom: 1px;
  }

  .dml-logo {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  /* 选项卡 */
  .dml-tabs {
    display: flex;
    padding: 0 20px;
    border-bottom: 1px solid #e8eaec;
    background-color: #fff;
  }

  .dml-tab {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 15px;
    color: #666;
    border: 1px solid transparent;
    border-color: #e8e8e8;
    border-bottom: none;
    margin-right: 8px;
    border-radius: 4px 4px 0 0;
    position: relative;
    top: 1px;
    background-color: transparent;
  }

  .dml-tab-active {
    color: #1677ff;
    border-color: #e8e8e8;
    border-bottom-color: white;
    background-color: white;
    font-weight: 500;
    border-top: 2px solid #1677ff;
  }

  /* 筛选控制区域 */
  .dml-filters {
    padding: 15px 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e8eaec;
  }

  .dml-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
  }

  .dml-filter-group {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 4px;
    padding: 0;
    border: 1px solid #dcdee2;
    overflow: hidden;
  }

  .dml-filter-label {
    padding: 8px 12px;
    background: #f8f8f9;
    font-size: 13px;
    border-right: 1px solid #dcdee2;
  }

  .dml-filter-select {
    padding: 8px 12px;
    font-size: 13px;
    border: none;
    outline: none;
    background: white;
    cursor: pointer;
    min-width: 120px;
  }

  .dml-time-range {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin: 0 10px;
  }

  .dml-time-button {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    border-radius: 4px;
    margin-right: 5px;
    background-color: transparent;
    border: 1px solid #e8eaec;
    width: 70px;
  }

  .dml-time-button-active {
    color: #1677ff;
    border-color: #1677ff;
    background-color: #e6f4ff;
  }

  .dml-date-range {
    display: flex;
    align-items: center;
    font-size: 13px;
  }

  .dml-date-range input {
    padding: 6px 12px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    width: 160px;
  }

  .dml-date-range span {
    margin: 0 8px;
    color: #999;
  }

  .dml-filter-button {
    background: #2d8cf0;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 7px 15px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .dml-filter-button:hover {
    background: #57a3f3;
  }

  /* 数据卡片样式 */
  .dml-summary-section {
    padding: 20px;
    border-bottom: 1px solid #e8eaec;
  }

  .dml-section-title {
    position: relative;
    padding-left: 16px;
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: bold;
    color: #17233d;
  }

  .dml-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.2em;
    background-color: #007bff;
    border-radius: 2px;
  }

  .dml-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }

  .dml-summary-card {
    background: rgb(240, 240, 240);
    border: 1px solid #e8eaec;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
  }

  .dml-summary-card-active {
    background: white;
    border: 1px solid #e8eaec;
    border-top: 2px solid #1677ff;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .dml-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  }

  .dml-card-title {
    font-size: 13px;
    color: #808695;
    margin-bottom: 8px;
  }

  .dml-card-value {
    font-size: 22px;
    font-weight: bold;
    color: #17233d;
  }

  .dml-card-subtitle {
    font-size: 12px;
    color: #808695;
    margin-top: 5px;
  }

  /* 图表区域 */
  .dml-chart-section {
    padding: 20px;
    border-bottom: 1px solid #e8eaec;
    min-height: 300px;
  }

  .dml-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }

  .dml-chart-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  .dml-chart-grain {
    font-size: 13px;
    color: #666;
  }

  .dml-chart-container {
    background: white;
    border: 1px solid #e8eaec;
    border-radius: 6px;
    padding: 20px;
  }

  .dml-chart-placeholder {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5c8ce;
    font-size: 14px;
    background: #fafafa;
    border: 1px dashed #e8eaec;
    border-radius: 4px;
  }

  /* 提示信息 */
  .dml-info-text {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
    text-align: center;
  }
</style>
</head>

<body>
  <!-- mounted之前显示 -->
  <div id="mainLoading">
    <div class="ddr ddr1"></div>
    <div class="ddr ddr2"></div>
    <div class="ddr ddr3"></div>
    <div class="ddr ddr4"></div>
    <div class="ddr ddr5"></div>
  </div>
  <div class="product">
    <el-container>
      <aside-menu></aside-menu>
      <el-container>
        <top-menu></top-menu>
        <el-main>
          <!-- 自己的东西 -->

          <div class="out-container">
            <!-- 监控面板容器 -->
            <div class="dml-dashboard-container">
              <!-- 头部区域 -->
              <div class="dml-header">
                <div class="dml-logo">
                  <!--span>实时监控</span-->
                </div>
              </div>

              <!-- 选项卡区域 -->
              <div class="dml-tabs" style="margin-top:1px">
                <div id="dml-access-tab" class="dml-tab dml-tab-active" onclick="dmlSwitchTab(0)">访问统计</div>
                <div id="dml-origin-tab" class="dml-tab" onclick="dmlSwitchTab(1)">回源统计</div>
              </div>

              <!-- 筛选条件区域 -->
              <div class="dml-filters">
                <div class="dml-filter-row">
                  <!-- 时间快捷按钮 -->
                  <div class="dml-filter-group" style="border:0px;">
                    <button id="dml-today-btn" class="dml-time-button dml-time-button-active"
                      onclick="dmlSetTimeRange(0)">今天</button>
                    <button id="dml-yesterday-btn" class="dml-time-button" onclick="dmlSetTimeRange(1)">昨天</button>
                    <button id="dml-last7days-btn" class="dml-time-button" onclick="dmlSetTimeRange(2)">近7天</button>
                    <button id="dml-last30days-btn" class="dml-time-button" onclick="dmlSetTimeRange(3)">本月</button>
                    <button id="dml-month-btn" class="dml-time-button" onclick="dmlSetTimeRange(4)">上个月</button>
                    <button id="dml-custom-btn" class="dml-time-button" onclick="dmlSetTimeRange(5)">自定义</button>
                  </div>

                  <!-- 日期范围选择 -->
                  <div class="dml-date-range">
                    <input type="datetime-local" id="dml-date-start"
                      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" style="width:200px;">
                    <span>至</span>
                    <input type="datetime-local" id="dml-date-end"
                      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" style="width:200px;">
                  </div>

                  <!-- 数据对比 -->
                  <!--div class="dml-filter-group">
                    <span class="dml-filter-label">数据对比</span>
                    <select class="dml-filter-select">
                      <option>无对比</option>
                      <option>与昨天对比</option>
                      <option>与上周同期对比</option>
                    </select>
                  </div>
                </div-->

                  <div class="dml-filter-row">
                    <!-- 项目选择 -->
                    <div class="dml-filter-group">
                      <span class="dml-filter-label">项目</span>
                      <select class="dml-filter-select">
                        <option>全部项目</option>
                        <!--option>项目A</option>
                      <option>项目B</option-->
                      </select>
                    </div>

                    <!-- 类型选择 -->
                    <div class="dml-filter-group">
                      <span class="dml-filter-label">类型</span>
                      <select class="dml-filter-select">
                        <option>全部类型</option>
                        <!--option>类型A</option>
                      <option>类型B</option-->
                      </select>
                    </div>

                    <!-- 域名选择 -->
                    <!--div class="dml-filter-group">
                      <span class="dml-filter-label">全部域名</span>
                      <select class="dml-filter-select" >
                        <option>全部域名</option>
                        <option>domain1.com</option>
                        <option>domain2.com</option>
                      </select>
                    </div-->

                    <!-- 访问区域 -->
                    <div class="dml-filter-group">
                      <span class="dml-filter-label">访问区域</span>
                      <select class="dml-filter-select">
                        <option>全球/全部</option>
                        <option>中国大陆</option>
                      </select>
                    </div>

                    <!-- 高级筛选 -->
                    <!--div class="dml-filter-group">
                    <span class="dml-filter-label">高级筛选</span>
                    <select class="dml-filter-select">
                      <option>头</option>
                      <option>查看</option>
                    </select>
                  </div-->

                    <!-- 查询和重置按钮 -->
                  </div>
                  <button class="dml-filter-button" style="height:35px;" onclick="setsearchdata()">查询</button>
                  <button class="dml-filter-button" style="height:35px;background-color: #f4f4f5; color: #606266;"
                    onclick="resetbtn()">重置</button>
                </div>

                <!-- 指标卡片区域 -->
                <div id="accesssection" class="dml-summary-section">
                  <div class="dml-section-title">指标卡片</div>
                  <div class="dml-summary-cards">
                    <!-- 带宽卡片（默认选中） -->
                    <div id="dml-bandwidth-card" class="dml-summary-card dml-summary-card-active"
                      onclick="dmlChangeSummaryCard(0)">
                      <div class="dml-card-title">带宽</div>
                      <div id="bandwidthnum" class="dml-card-value">N/A <span
                          style="font-size: 16px; font-weight: normal;">bps</span>
                      </div>
                      <div class="dml-card-subtitle" id="timecards1">2025-06-25 12:55:00</div>
                    </div>

                    <!-- 流量卡片 -->
                    <div id="dml-traffic-card" class="dml-summary-card" onclick="dmlChangeSummaryCard(1)">
                      <div class="dml-card-title">流量</div>
                      <div id="flownum" class="dml-card-value">N/A <span
                          style="font-size: 16px; font-weight: normal;">KB</span></div>
                      <div class="dml-card-subtitle" id="timecards2">2025-06-25 12:55:00</div>
                    </div>

                    <!-- 请求数卡片 -->
                    <div id="dml-requests-card" class="dml-summary-card" onclick="dmlChangeSummaryCard(2)">
                      <div class="dml-card-title">请求数</div>
                      <div id="requestsnum" class="dml-card-value">N/A</div>
                      <div class="dml-card-subtitle" id="timecards3">2025-06-25 12:55:00</div>
                    </div>

                    <!-- QPS卡片 -->
                    <div id="dml-qps-card" class="dml-summary-card" onclick="dmlChangeSummaryCard(3)">
                      <div class="dml-card-title">QPS</div>
                      <div id="qpsnum" class="dml-card-value">N/A</div>
                      <div class="dml-card-subtitle" id="timecards4">2025-06-25 12:55:00</div>
                    </div>
                  </div>
                </div>

                <div id="originsection" class="dml-summary-section" style="display:none;">
                  <div class="dml-section-title">指标卡片</div>
                  <div class="dml-summary-cards">
                    <!-- 带宽卡片（默认选中） -->
                    <div id="dml-bandwidth-cardo" class="dml-summary-card dml-summary-card-active"
                      onclick="dmlChangeOriginSummaryCard(0)">
                      <div class="dml-card-title">回源带宽</div>
                      <div id="bandwidthnumo" class="dml-card-value">N/A <span
                          style="font-size: 16px; font-weight: normal;">bps</span>
                      </div>
                      <div class="dml-card-subtitle" id="timecards1">2025-06-25 12:55:00</div>
                    </div>

                    <!-- 流量卡片 -->
                    <div id="dml-traffic-cardo" class="dml-summary-card" onclick="dmlChangeOriginSummaryCard(1)">
                      <div class="dml-card-title">回源流量</div>
                      <div id="flownumo" class="dml-card-value">N/A <span
                          style="font-size: 16px; font-weight: normal;">KB</span></div>
                      <div class="dml-card-subtitle" id="timecards2">2025-06-25 12:55:00</div>
                    </div>

                    <!-- 请求数卡片 -->
                    <div id="dml-requests-cardo" class="dml-summary-card" onclick="dmlChangeOriginSummaryCard(2)">
                      <div class="dml-card-title">回源请求数</div>
                      <div id="requestsnumo" class="dml-card-value">N/A</div>
                      <div class="dml-card-subtitle" id="timecards3">2025-06-25 12:55:00</div>
                    </div>

                    <!-- QPS卡片 -->
                    <div id="dml-qps-cardo" class="dml-summary-card" onclick="dmlChangeOriginSummaryCard(3)">
                      <div class="dml-card-title">回源QPS</div>
                      <div id="qpsnumo" class="dml-card-value">N/A</div>
                      <div class="dml-card-subtitle" id="timecards4">2025-06-25 12:55:00</div>
                    </div>
                  </div>
                </div>

                <!-- 图表区域 -->
                <div class="dml-chart-section">
                  <div class="dml-chart-header">
                    <div id="chartname" class="dml-chart-title">带宽(bps)</div>
                    <!--div class="dml-chart-grain">5分钟粒度</div-->
                    <div class="dml-filter-group">
                      <span class="dml-filter-label">时间粒度</span>
                      <select id="timerange" class="dml-filter-select" onclick="settimerange()">
                        <option value="1min">1分钟粒度</option>
                        <option value="5min">5分钟粒度</option>
                        <option value="hour">1小时粒度</option>
                        <option value="day">1天粒度</option>
                      </select>
                    </div>
                  </div>
                  <div class="chart-container"></div>
                  <div class="dml-chart-container">
                    <div class="dml-chart-placeholder">
                      <div id="chart-loading">趋势数据图表数据加载中...</div>
                      <canvas id="dmlct-chart" style="display:none;"></canvas>
                    </div>

                  </div>
                </div>


                <!--div class="dml-info-text">
                  更多信息（如95峰值计费预估）得到用量查询中查看
                </div-->
              </div>
            </div>
          </div>
          <!-- 后端渲染出来的配置页面 -->
          <div class="config-box">
            <div class="content"></div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  {include file="footer"}
  <!-- =======页面独有======= -->
  <script src="/{$template_catalog}/template/{$themes}/js/common/jquery.mini.js"></script>
  <script src="/{$template_catalog}/template/{$themes}/components/pagination/pagination.js"></script>
  <script src="/{$template_catalog}/template/{$themes}/js/product.js"></script>
  <script src="/npm/chart.js"></script>
  <script src="/npm/chartjs-plugin-zoom@2"></script>
  <script src="/npm/hammerjs@2.0.8/hammer.min.js"></script>
  <script>
    // 当前激活的卡片和锁状态
    let dmlNowCard = 0;
    let dmlLockChart = false;
    dmlPageNum = 0;
    pagelock = false;
    searchdata = [];
    timerangeold = '1min';

    function settimerange() {
      if (timerangeold != document.getElementById('timerange').value) {
        console.log(document.getElementById('timerange').value);
        timerangeold = document.getElementById('timerange').value;
        if (dmlPageNum == 0) {
          console.log('chart1');

          fetchChartData(true);
        } else {
          console.log('chart2');

          fetchChartDatao(true);
        }
      } else {
        return;
      }

    }

    function dmlSwitchTab(Page) {
      if (dmlPageNum == Page) {
        return;
      }
      if (pagelock == true) {
        return;
      }
      pagelock = true;
      access = document.getElementById('dml-access-tab');
      origin = document.getElementById('dml-origin-tab');
      accesssection = document.getElementById('accesssection');
      originsection = document.getElementById('originsection');
      if (Page == 0) {
        access.classList.add('dml-tab-active');
        origin.classList.remove('dml-tab-active');
        accesssection.style.display = 'block';
        originsection.style.display = 'none';
      } else {
        access.classList.remove('dml-tab-active');
        origin.classList.add('dml-tab-active');
        accesssection.style.display = 'none';
        originsection.style.display = 'block';
      }
      dmlPageNum = Page;
      pagelock = false;
    }

    document.addEventListener('DOMContentLoaded', function () {
      function waitForElement(selector, callback, maxRetries = 10, interval = 200) {
        let retries = 0;

        const checkElement = () => {
          const element = document.querySelector(selector);
          if (element) {
            callback(element);
          } else if (retries < maxRetries) {
            retries++;
            setTimeout(checkElement, interval);
          } else {
            console.error(`元素 ${selector} 未在预期时间内加载`);
          }
        };

        checkElement();
      }
      // 初始化应用
      function init() {
        const midnightTimestamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000;
        const nowTimestamp = parseInt(new Date().getTime() / 1000);
        starttimestamp = midnightTimestamp;
        endtimestamp = nowTimestamp;
        document.getElementById('timerange').options[3].disabled = true;
        // 等待开始时间输入框加载
        waitForElement('#dml-date-start', (startInput) => {
          const startValue = convertToISOTime(midnightTimestamp);
          startInput.value = startValue;
          startInput.setAttribute('value', startValue);
          //document.getElementById('dml-date-start').value = convertToISOTime(midnightTimestamp);

          // 等待结束时间输入框加载
          waitForElement('#dml-date-end', (endInput) => {
            const endValue = convertToISOTime(nowTimestamp);
            endInput.value = endValue;
            endInput.setAttribute('value', endValue);
            //document.getElementById('dml-date-end').value = convertToISOTime(nowTimestamp);

            // 验证设置结果
            setTimeout(() => {
            }, 100);
          });
        });
        fetchSummaryData();
        fetchChartData();
        fetchChartDatao();
        fetchSummaryOriginData();
      }
      // 初始化应用
      setTimeout(init, 2000);
    });
    starttimestamp = 0;
    endtimestamp = 0;
    function setsearchdata() {
      starttime = document.getElementById('dml-date-start');
      endtime = document.getElementById('dml-date-end');
      if (starttime.value == '' || endtime.value == '') {
        showPageMessage('请输入开始时间和结束时间', 'error');
        return;
      }
      starttimestamp = convertTo10DigitTimestamp(starttime.value);
      endtimestamp = convertTo10DigitTimestamp(endtime.value);
      if (endtimestamp - starttimestamp < 0) {
        showPageMessage('结束时间不能小于开始时间', 'error');
        return;
      }
      if (endtimestamp - starttimestamp <= 86400) {
        document.getElementById('timerange').options[0].disabled = false;
        document.getElementById('timerange').options[1].disabled = false;
        document.getElementById('timerange').options[2].disabled = false;
        document.getElementById('timerange').options[3].disabled = true;
        if (document.getElementById('timerange').options.selectedIndex == 3) {
          document.getElementById('timerange').options.selectedIndex = 0;
          document.getElementById('timerange').value = '1min';
        }

      }
      if (endtimestamp - starttimestamp > 86400 && endtimestamp - starttimestamp <= 86400 * 3) {
        document.getElementById('timerange').options[0].disabled = true;
        document.getElementById('timerange').options[1].disabled = false;
        document.getElementById('timerange').options[2].disabled = false;
        document.getElementById('timerange').options[3].disabled = false;
        if (document.getElementById('timerange').options.selectedIndex == 0) {
          document.getElementById('timerange').options.selectedIndex = 1;
          document.getElementById('timerange').value = '5min';
        }

      }
      if (endtimestamp - starttimestamp > 86400 * 3 && endtimestamp - starttimestamp <= 86400 * 30) {
        document.getElementById('timerange').options[0].disabled = true;
        document.getElementById('timerange').options[1].disabled = true;
        document.getElementById('timerange').options[2].disabled = false;
        document.getElementById('timerange').options[3].disabled = false;
        if (document.getElementById('timerange').options.selectedIndex == 0 || document.getElementById('timerange').options.selectedIndex == 1) {
          document.getElementById('timerange').options.selectedIndex = 2;
          document.getElementById('timerange').value = 'hour';
        }
      }
      timerangeold = document.getElementById('timerange').value;
      document.getElementById('timerange').disabled = true;
      document.getElementById('timerange').style.color = '#ccc';
      document.getElementById('timerange').style.cursor = 'not-allowed';
      savedtag = [false, false, false, false];
      savedtago = [false, false, false, false];
      if (dmlPageNum == 0) {
        fetchSummaryData();
        fetchChartData();
      } else {
        fetchSummaryOriginData();
        fetchChartDatao();
        //showPageMessage('暂不支持此功能', 'error');
      }
      document.getElementById('timerange').disabled = false;
      document.getElementById('timerange').style.color = '#000';
      document.getElementById('timerange').style.cursor = 'pointer';
    }
    function resetbtn() {

    }
    function convertTo10DigitTimestamp(timeString, isUTC = false) {
      const dateString = isUTC ? timeString + "Z" : timeString;
      const date = new Date(dateString);

      if (isNaN(date.getTime())) {
        throw new Error("无效的时间格式");
      }

      return Math.floor(date.getTime() / 1000);
    }
    function convertToISOTime(timestamp10) {
      // 1. 将秒级时间戳转为毫秒级（Date对象需要）
      const date = new Date(timestamp10 * 1000);

      // 2. 提取时间组件（本地时区）
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补0
      const day = String(date.getDate()).padStart(2, '0');        // 日期补0
      const hours = String(date.getHours()).padStart(2, '0');      // 小时补0
      const minutes = String(date.getMinutes()).padStart(2, '0'); // 分钟补0

      // 3. 拼接为ISO格式（无秒和时区）
      return `${year}-${month}-${day}T${hours}:${minutes}`;
    }

    // 切换统计卡片
    function dmlChangeSummaryCard(cardId) {
      if (cardId === dmlNowCard) {
        console.log('==lock');

        return;
      }
      if (dmlLockChart) {
        console.log('chartlock');

        return;
      }
      const card0 = document.getElementById('dml-bandwidth-card');
      const card1 = document.getElementById('dml-traffic-card');
      const card2 = document.getElementById('dml-requests-card');
      const card3 = document.getElementById('dml-qps-card');
      const cardtitle = document.getElementById('chartname');
      if (cardId === 0) {
        card0.classList.add('dml-summary-card-active');
        card1.classList.remove('dml-summary-card-active');
        card2.classList.remove('dml-summary-card-active');
        card3.classList.remove('dml-summary-card-active');
        cardtitle.innerHTML = '带宽(bps)';
      } else if (cardId === 1) {
        card0.classList.remove('dml-summary-card-active');
        card1.classList.add('dml-summary-card-active');
        card2.classList.remove('dml-summary-card-active');
        card3.classList.remove('dml-summary-card-active');
        cardtitle.innerHTML = '流量(KB)';
      } else if (cardId === 2) {
        card0.classList.remove('dml-summary-card-active');
        card1.classList.remove('dml-summary-card-active');
        card2.classList.add('dml-summary-card-active');
        card3.classList.remove('dml-summary-card-active');
        cardtitle.innerHTML = '请求次数(bps)';
      } else {
        card0.classList.remove('dml-summary-card-active');
        card1.classList.remove('dml-summary-card-active');
        card2.classList.remove('dml-summary-card-active');
        card3.classList.add('dml-summary-card-active');
        cardtitle.innerHTML = 'QPS';
      }
      dmlNowCard = cardId;
      fetchChartData();
    }

    dmlNowCardo = 0;

    function dmlChangeOriginSummaryCard(cardId) {
      if (cardId === dmlNowCardo) {
        return;
      }
      if (dmlLockChart) {
        return;
      }
      const card0 = document.getElementById('dml-bandwidth-cardo');
      const card1 = document.getElementById('dml-traffic-cardo');
      const card2 = document.getElementById('dml-requests-cardo');
      const card3 = document.getElementById('dml-qps-cardo');
      console.log('cid', cardId);
      console.log('nowcardo', dmlNowCardo);

      if (cardId === 0) {
        card0.classList.add('dml-summary-card-active');
        card1.classList.remove('dml-summary-card-active');
        card2.classList.remove('dml-summary-card-active');
        card3.classList.remove('dml-summary-card-active');
      } else if (cardId === 1) {
        card0.classList.remove('dml-summary-card-active');
        card1.classList.add('dml-summary-card-active');
        card2.classList.remove('dml-summary-card-active');
        card3.classList.remove('dml-summary-card-active');
      } else if (cardId === 2) {
        card0.classList.remove('dml-summary-card-active');
        card1.classList.remove('dml-summary-card-active');
        card2.classList.add('dml-summary-card-active');
        card3.classList.remove('dml-summary-card-active');
      } else {
        card0.classList.remove('dml-summary-card-active');
        card1.classList.remove('dml-summary-card-active');
        card2.classList.remove('dml-summary-card-active');
        card3.classList.add('dml-summary-card-active');
      }
      dmlNowCardo = cardId;
      fetchChartDatao();
    }

    timerange = 0;
    // 切换统计卡片
    function dmlSetTimeRange(cardId) {
      /*if (cardId == timerange) {
        return;
      }*/
      if (dmlLockChart) {
        return;
      }
      const card0 = document.getElementById('dml-today-btn');
      const card1 = document.getElementById('dml-yesterday-btn');
      const card2 = document.getElementById('dml-last7days-btn');
      const card3 = document.getElementById('dml-last30days-btn');
      const card4 = document.getElementById('dml-month-btn');
      const card5 = document.getElementById('dml-custom-btn');
      if (cardId === 0) {
        card0.classList.add('dml-time-button-active');
        card1.classList.remove('dml-time-button-active');
        card2.classList.remove('dml-time-button-active');
        card3.classList.remove('dml-time-button-active');
        card4.classList.remove('dml-time-button-active');
        card5.classList.remove('dml-time-button-active');
        const midnightTimestamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000;
        const nowTimestamp = new Date().getTime() / 1000;
        document.getElementById('dml-date-start').value = convertToISOTime(midnightTimestamp);
        document.getElementById('dml-date-end').value = convertToISOTime(nowTimestamp);
      } else if (cardId === 1) {
        card0.classList.remove('dml-time-button-active');
        card1.classList.add('dml-time-button-active');
        card2.classList.remove('dml-time-button-active');
        card3.classList.remove('dml-time-button-active');
        card4.classList.remove('dml-time-button-active');
        card5.classList.remove('dml-time-button-active');
        const MillisecondsADay = 24 * 60 * 60 * 1;
        const nowTimestamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000 - 1;
        const midnightTimestamp = nowTimestamp - MillisecondsADay + 1;
        document.getElementById('dml-date-start').value = convertToISOTime(midnightTimestamp);
        document.getElementById('dml-date-end').value = convertToISOTime(nowTimestamp);
      } else if (cardId === 2) {
        card0.classList.remove('dml-time-button-active');
        card1.classList.remove('dml-time-button-active');
        card2.classList.add('dml-time-button-active');
        card3.classList.remove('dml-time-button-active');
        card4.classList.remove('dml-time-button-active');
        card5.classList.remove('dml-time-button-active');
        const MillisecondsADay = 24 * 60 * 60 * 1;
        const nowTimestamp1 = new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000 - 1;
        const nowTimestamp = new Date().getTime() / 1000;
        const midnightTimestamp = nowTimestamp1 - MillisecondsADay * 6 + 1;
        document.getElementById('dml-date-start').value = convertToISOTime(midnightTimestamp);
        document.getElementById('dml-date-end').value = convertToISOTime(nowTimestamp);
      } else if (cardId === 3) {
        card0.classList.remove('dml-time-button-active');
        card1.classList.remove('dml-time-button-active');
        card2.classList.remove('dml-time-button-active');
        card3.classList.add('dml-time-button-active');
        card4.classList.remove('dml-time-button-active');
        card5.classList.remove('dml-time-button-active');
        const date = new Date();
        date.setDate(1);
        date.setHours(0, 0, 0, 0);
        const timeStamp = date.getTime() / 1000;
        const nowTimestamp = new Date().getTime() / 1000;
        document.getElementById('dml-date-start').value = convertToISOTime(timeStamp);
        document.getElementById('dml-date-end').value = convertToISOTime(nowTimestamp);
      } else if (cardId === 4) {
        card0.classList.remove('dml-time-button-active');
        card1.classList.remove('dml-time-button-active');
        card2.classList.remove('dml-time-button-active');
        card3.classList.remove('dml-time-button-active');
        card4.classList.add('dml-time-button-active');
        card5.classList.remove('dml-time-button-active');
        const MillisecondsADay = 24 * 60 * 60;
        const date = new Date();
        date.setDate(1);
        date.setHours(0, 0, 0, 0);
        const timeStamp = date.getTime() / 1000;
        const days = lastMonthDats();
        const lastMonthStart = timeStamp - (MillisecondsADay * days);
        const lastMonthEnd = timeStamp - 1;
        document.getElementById('dml-date-start').value = convertToISOTime(lastMonthStart);
        document.getElementById('dml-date-end').value = convertToISOTime(lastMonthEnd);
      } else {
        card0.classList.remove('dml-time-button-active');
        card1.classList.remove('dml-time-button-active');
        card2.classList.remove('dml-time-button-active');
        card3.classList.remove('dml-time-button-active');
        card4.classList.remove('dml-time-button-active');
        card5.classList.add('dml-time-button-active');
      }
      timerange = cardId;
      //fetchChartData();
    }

    function lastMonthDats() {
      const date = new Date()
      const year = date.getFullYear()
      //  上个月月份
      let month = (date.getMonth() + 1) - 1 //  0-11 表示 1月-12月
      //  0 表示12月
      month = month || 12
      //  30天的月份
      const arr30 = [4, 6, 9, 11]
      //  31天的月份
      const arr31 = [1, 3, 5, 7, 8, 10, 12]
      if (arr30.indexOf(month) !== -1) {
        //  上个月是 30 天
        return 30
      } else if (arr31.indexOf(month) !== -1) {
        //  上个月是 31 天
        return 31
      } else {
        //  2月
        if (isRunYear(year)) {
          return 29
        } else {
          return 28
        }
      }
    }
    /**
     * 是否为闰年
     * @param year
     * @returns {boolean}
     */
    function isRunYear(year) {
      //  条件:能被4整除并且不能被100整除，或者被400整除的
      let flag = false
      if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
        flag = true
      }
      return flag
    }

    function formatTraffic(bytes, decimalPlaces = 2) {
      bytesint = parseInt(bytes);
      if (bytesint === 0) return '0 <span style="font-size: 16px; font-weight: normal;">B</span>';
      if (bytes === 0) return '0 <span style="font-size: 16px; font-weight: normal;">B</span>';

      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
      const index = Math.floor(Math.log(bytesint) / Math.log(1000)); // 计算单位索引
      const value = (bytesint / Math.pow(1000, index)).toFixed(decimalPlaces); // 计算对应单位的值

      return value.replace(/\.?0+$/, '') + ' <span style="font-size: 16px; font-weight: normal;">' + units[index] + '</span>';
    }

    function formatBandwidth(bps, decimalPlaces = 2) {
      const bpsInt = parseInt(bps);
      if (isNaN(bpsInt) || bpsInt === 0) return '0 <span style="font-size: 16px; font-weight: normal;">bps</span>';

      const units = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps'];
      const index = Math.floor(Math.log(bpsInt) / Math.log(1000));
      const value = (bpsInt / Math.pow(1000, index)).toFixed(decimalPlaces);

      return value.replace(/\.?0+$/, '') + ' <span style="font-size: 16px; font-weight: normal;">' + units[index] + '</span>';
    }

    async function fetchSummaryData() {
      /*if (saveddata['summary'][currentDateRange]) {
        document.getElementById("flowcardvalue").innerHTML = saveddata['summary'][currentDateRange]['traffic'] / 1024 + ' <span class="card-subtitle">KB</span>';
        document.getElementById("bandwithcardvalue").innerHTML = saveddata['summary'][currentDateRange]['bandwidth'] + ' <span class="card-subtitle">bps</span>';
        document.getElementById("requestcardvalue").innerHTML = saveddata['summary'][currentDateRange]['requests'] + ' <span class="card-subtitle">次</span>';
        lockday = false;
        return;
      }*/
      document.getElementById("flownum").innerHTML = 'loading';
      document.getElementById("bandwidthnum").innerHTML = 'loading';
      document.getElementById("requestsnum").innerHTML = 'loading';
      document.getElementById("qpsnum").innerHTML = 'loading';
      try {
        const response = await Axios.post('/combined_cdn/DistrictSummary', {
          StartTime: starttimestamp,
          EndTime: endtimestamp,
          qps: true
        }, {
          headers: {
            'Authorization': 'Bearer <token>'
          }
        });
        console.log(response.data);
        if (response.data) {
          document.getElementById("flownum").innerHTML = formatTraffic(response.data.data.traffic);
          document.getElementById("bandwidthnum").innerHTML = formatBandwidth(response.data.data.bandwidth);
          document.getElementById("requestsnum").innerHTML = response.data.data.requests + '';
          document.getElementById("qpsnum").innerHTML = response.data.data.qps + '';
          saveddata['summary'] = response.data.data;
          lockday = false;
          return response.data;
        } else {
          console.log(response.data);

          showPageMessage('返回的数据格式不正确');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        showPageMessage('获取数据失败，请检查网络连接或稍后再试');
      } finally {
        lockday = false;
      }
    }

    saveddatao = { 'summary': {} };

    async function fetchSummaryOriginData() {
      /*if (saveddata['summary'][currentDateRange]) {
        document.getElementById("flowcardvalue").innerHTML = saveddata['summary'][currentDateRange]['traffic'] / 1024 + ' <span class="card-subtitle">KB</span>';
        document.getElementById("bandwithcardvalue").innerHTML = saveddata['summary'][currentDateRange]['bandwidth'] + ' <span class="card-subtitle">bps</span>';
        document.getElementById("requestcardvalue").innerHTML = saveddata['summary'][currentDateRange]['requests'] + ' <span class="card-subtitle">次</span>';
        lockday = false;
        return;
      }*/
      document.getElementById("flownumo").innerHTML = 'loading';
      document.getElementById("bandwidthnumo").innerHTML = 'loading';
      document.getElementById("requestsnumo").innerHTML = 'loading';
      document.getElementById("qpsnumo").innerHTML = 'loading';
      try {
        const response = await Axios.post('/combined_cdn/OriginSummary', {
          StartTime: starttimestamp,
          EndTime: endtimestamp,
          qps: true
        }, {
          headers: {
            'Authorization': 'Bearer <token>'
          }
        });
        console.log(response.data);
        if (response.data) {
          document.getElementById("flownumo").innerHTML = formatTraffic(response.data.data.traffic);
          document.getElementById("bandwidthnumo").innerHTML = formatBandwidth(response.data.data.bandwidth);
          document.getElementById("requestsnumo").innerHTML = response.data.data.requests + '';
          document.getElementById("qpsnumo").innerHTML = response.data.data.qps + '';
          saveddatao['summary'] = response.data.data;
          lockday = false;
          return response.data;
        } else {
          console.log(response.data);
          showPageMessage('返回的数据格式不正确');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        showPageMessage('获取数据失败，请检查网络连接或稍后再试');
      } finally {
        lockday = false;
      }
    }

    savedtag = [false, false, false, false];
    saveddata = { 'chart': { 'bandwidth': '', 'traffic': '', 'requests': '', 'qps': '' } };
    async function fetchChartData(force = false) {
      Metrics = ['bandwidth', 'traffic', 'requests', 'qps'];
      if (savedtag[dmlNowCard] === true && !force) {
        console.log('true', savedtag[dmlNowCard]);

        //document.getElementById("flowcardvalue").innerHTML = saveddata['summary'][currentDateRange]['traffic'] + ' <span class="card-subtitle">B</span>';
        //document.getElementById("bandwithcardvalue").innerHTML = saveddata['summary'][currentDateRange]['bandwidth'] + ' <span class="card-subtitle">Mbps</span>';
        //document.getElementById("requestcardvalue").innerHTML = saveddata['summary'][currentDateRange]['requests'] + ' <span class="card-subtitle">次</span>';

        document.getElementById("dmlct-chart").style.display = 'none';
        document.getElementById("chart-loading").style.display = 'block';
        renderTrafficChart(saveddata['chart'][Metrics[dmlNowCard]]);
        updateChartForNowcard();
        document.getElementById("dmlct-chart").style.display = 'block';
        document.getElementById("chart-loading").style.display = 'none';
        lockchart = false;
        return;
      }
      console.log('false', savedtag[dmlNowCard]);

      //Metrics = ['traffic', 'bandwidth', 'requests'];
      /*document.getElementById("dmlct-chart").style.display = 'none';
      document.getElementById("chart-loading").style.display = 'block';*/
      try {
        const response = await Axios.post('/combined_cdn/LiveDistrictData', {
          StartTime: starttimestamp,
          EndTime: endtimestamp,
          Metric: Metrics[dmlNowCard],
          Interval: document.getElementById('timerange').value
        }, {
          headers: {
            'Authorization': 'Bearer <token>'
          }
        });

        if (response.data) {
          console.log('nowcard:', dmlNowCard);

          if (dmlNowCard == 1) {
            saveddata['chart'][Metrics[dmlNowCard]] = response.data.data.map(item => ({
              ...item,          // 保留原始对象的所有属性
              Value: item.Value / 1000  // 修改 value 值
            }));
          } else {
            saveddata['chart'][Metrics[dmlNowCard]] = response.data.data;
          }
          savedtag[dmlNowCard] = true;
          renderTrafficChart(saveddata['chart'][Metrics[dmlNowCard]]);
          document.getElementById("dmlct-chart").style.display = 'block';
          document.getElementById("chart-loading").style.display = 'none';
          updateChartForNowcard();
          lockchart = false;
          //return response.data;
        } else {
          showPageMessage('返回的数据格式不正确');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        showPageMessage('获取数据失败，请检查网络连接或稍后再试');
      } finally {
        lockchart = false;
      }
    }

    savedtago = [false, false, false, false];
    saveddatao = { 'chart': { 'bandwidth': '', 'traffic': '', 'requests': '', 'qps': '' } };

    async function fetchChartDatao(force = false) {
      Metrics = ['bandwidth', 'traffic', 'requests', 'qps'];
      if (savedtago[dmlNowCardo] === true && !force) {
        console.log('true', savedtago[dmlNowCardo]);

        //document.getElementById("flowcardvalue").innerHTML = saveddata['summary'][currentDateRange]['traffic'] + ' <span class="card-subtitle">B</span>';
        //document.getElementById("bandwithcardvalue").innerHTML = saveddata['summary'][currentDateRange]['bandwidth'] + ' <span class="card-subtitle">Mbps</span>';
        //document.getElementById("requestcardvalue").innerHTML = saveddata['summary'][currentDateRange]['requests'] + ' <span class="card-subtitle">次</span>';

        document.getElementById("dmlct-chart").style.display = 'none';
        document.getElementById("chart-loading").style.display = 'block';
        renderTrafficChart(saveddatao['chart'][Metrics[dmlNowCardo]]);
        updateChartForNowcard();
        document.getElementById("dmlct-chart").style.display = 'block';
        document.getElementById("chart-loading").style.display = 'none';
        lockchart = false;
        return;
      }

      //Metrics = ['traffic', 'bandwidth', 'requests'];
      /*document.getElementById("dmlct-chart").style.display = 'none';
      document.getElementById("chart-loading").style.display = 'block';*/
      try {
        const response = await Axios.post('/combined_cdn/LiveOriginData', {
          StartTime: starttimestamp,
          EndTime: endtimestamp,
          Metric: Metrics[dmlNowCardo],
          Interval: document.getElementById('timerange').value
        }, {
          headers: {
            'Authorization': 'Bearer <token>'
          }
        });

        if (response.data) {
          console.log('fetchnowcardo:', dmlNowCardo);
          console.log(response.data.data);


          if (dmlNowCardo == 1) {
            saveddatao['chart'][Metrics[dmlNowCardo]] = response.data.data.map(item => ({
              ...item,          // 保留原始对象的所有属性
              Value: item.Value / 1000  // 修改 value 值
            }));
          } else {
            saveddatao['chart'][Metrics[dmlNowCardo]] = response.data.data;
          }
          savedtago[dmlNowCardo] = true;
          renderTrafficChart(saveddatao['chart'][Metrics[dmlNowCardo]]);
          document.getElementById("dmlct-chart").style.display = 'block';
          document.getElementById("chart-loading").style.display = 'none';
          updateChartForNowcard();
          lockchart = false;
          //return response.data;
        } else {
          showPageMessage('返回的数据格式不正确');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        showPageMessage('获取数据失败，请检查网络连接或稍后再试');
      } finally {
        lockchart = false;
      }
    }

    function renderTrafficChart(data) {
      // 销毁现有实例避免重复渲染
      if (window.dmlctTrafficChartInstance) {
        window.dmlctTrafficChartInstance.destroy();
      }

      // 处理数据为Chart.js所需格式
      const labels = data.map(item => {
        const date = new Date(item.TimeStamp * 1000);
        return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      });
      const values = data.map(item => item.Value);
      console.log('value:', values);

      const maxValue = Math.max(...values);
      const dynamicMax = maxValue > 0 ? maxValue * 1.1 : 10; // 处理数据全为0的情况

      datanames = ['带宽峰值', '流量', '请求次数', 'QPS'];
      // 获取canvas元素
      const ctx = document.getElementById('dmlct-chart').getContext('2d');
      // 创建图表实例
      window.dmlctTrafficChartInstance = new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
            label: '总流量 (KB)',
            data: values,
            borderColor: '#1677ff',
            backgroundColor: 'rgba(75, 192, 192, 0.1)',
            borderWidth: 2,
            pointRadius: 3,
            pointBackgroundColor: '#1677ff',
            tension: 0.3,
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              max: dynamicMax,
              ticks: {
                callback: function (value) {
                  if (dmlPageNum == 0) {
                    if (dmlNowCard == 0) {
                      return value + 'KB';
                    } else if (dmlNowCard == 1) {
                      return value + 'bps';
                    } else {
                      return value + '次';
                    }
                    return value + ' ';
                  } else {
                    if (dmlNowCardo == 0) {
                      return value + 'KB';
                    } else if (dmlNowCardo == 1) {
                      return value + 'bps';
                    } else {
                      return value + '次';
                    }
                    return value + ' ';

                  }

                }
              },
              title: {
                display: true,
                text: '总流量'
              }
            },
            x: {
              title: {
                display: true,
                text: '时间'
              },
              ticks: {
                maxRotation: 30,
                minRotation: 30,
                autoSkip: true,
                callback: function (val, index) {
                  // 每3个数据点显示一个时间标签（防止重叠）
                  return index % 3 === 0 ? this.getLabelForValue(val) : '';
                }
              }
            }
          },
          plugins: {
            tooltip: {
              callbacks: {
                label: function (context) {
                  if (dmlPageNum == 0) {
                    if (dmlNowCard == 1) {
                      return `流量: ${context.parsed.y} KB`;
                    } else if (dmlNowCard == 0) {
                      return `带宽峰值: ${context.parsed.y} bps`;
                    } else if (dmlNowCard == 2) {
                      return `请求次数: ${context.parsed.y} 次`;
                    } else {
                      return `QPS: ${context.parsed.y}`;
                    }
                  } else {
                    if (dmlNowCardo == 1) {
                      return `回源流量: ${context.parsed.y} KB`;
                    } else if (dmlNowCardo == 0) {
                      return `回源带宽峰值: ${context.parsed.y} bps`;
                    } else if (dmlNowCardo == 2) {
                      return `回源请求次数: ${context.parsed.y} 次`;
                    } else {
                      return `回源QPS: ${context.parsed.y}`;
                    }
                  }
                }
              }
            },
            legend: {
              position: 'top'
            },
            zoom: {
              pan: {
                enabled: true,       // 启用拖动平移
                mode: 'x',           // 仅允许横向拖动（也支持 'xy' 双向）
              },
              zoom: {
                wheel: {
                  enabled: true,    // 启用鼠标滚轮缩放
                },
                pinch: {
                  enabled: true,     // 启用触摸屏捏合缩放
                },
                mode: 'x',           // 仅横向缩放（按需改为 'xy'）
              }
            }
          }
        }
      });
    }

    function updateChartForNowcard() {
      const chart = window.dmlctTrafficChartInstance;
      if (!chart) return;

      // 根据 dmlNowCard 设置动态文本
      const configMap = {
        1: {
          title: '流量统计',
          datasetLabel: '总流量 (KB)',
          yAxisTitle: '总流量'
        },
        0: {
          title: '带宽统计',
          datasetLabel: '带宽 (bps)',
          yAxisTitle: '带宽'
        },
        2: {
          title: '请求次数统计',
          datasetLabel: '请求次数',
          yAxisTitle: '请求次数'
        },
        3: {
          title: 'QPS',
          datasetLabel: 'QPS',
          yAxisTitle: 'QPS'
        }
      };

      const configMap1 = {
        1: {
          title: '回源流量统计',
          datasetLabel: '回源总流量 (KB)',
          yAxisTitle: '回源总流量'
        },
        0: {
          title: '回源带宽统计',
          datasetLabel: '回源带宽 (bps)',
          yAxisTitle: '回源带宽'
        },
        2: {
          title: '回源请求次数统计',
          datasetLabel: '回源请求次数',
          yAxisTitle: '回源请求次数'
        },
        3: {
          title: '回源QPS',
          datasetLabel: '回源QPS',
          yAxisTitle: '回源QPS'
        }
      };

      if (dmlPageNum == 0) {
        const { title, datasetLabel, yAxisTitle } = configMap[dmlNowCard] || configMap[0];
        // 更新图表配置
        chart.options.plugins.title.text = title; // 修改图表标题
        chart.data.datasets[0].label = datasetLabel; // 修改数据集标签
        chart.options.scales.y.title.text = yAxisTitle; // 修改Y轴标题
      } else {
        const { title, datasetLabel, yAxisTitle } = configMap1[dmlNowCardo] || configMap1[0];
        // 更新图表配置
        chart.options.plugins.title.text = title; // 修改图表标题
        chart.data.datasets[0].label = datasetLabel; // 修改数据集标签
        chart.options.scales.y.title.text = yAxisTitle; // 修改Y轴标题 
      }
      // 触发图表重绘
      chart.update();
    }

    function showPageMessage(message, type = 'success') {
      // 获取或创建提示容器
      let messageContainer = document.getElementById('page-message-container');
      if (!messageContainer) {
        messageContainer = document.createElement('div');
        messageContainer.id = 'page-message-container';

        // 容器样式：固定在顶部居中
        Object.assign(messageContainer.style, {
          position: 'fixed',
          top: '30px',         // 距离顶部30px
          left: '50%',         // 水平居中定位
          transform: 'translateX(-50%)', // 水平居中校正
          zIndex: '1000',
          display: 'flex',      // 使用flex布局
          flexDirection: 'column', // 垂直排列消息
          alignItems: 'center',   // 居中对齐
          pointerEvents: 'none'   // 防止遮挡下方元素点击
        });

        document.body.appendChild(messageContainer);
      }

      // 创建提示元素
      const messageElement = document.createElement('div');
      messageElement.textContent = message;

      // 消息元素样式 - 简洁紧凑设计
      Object.assign(messageElement.style, {
        padding: '8px 16px',       // 减少内边距
        borderRadius: '4px',
        marginBottom: '6px',       // 减小消息间距
        color: 'white',
        opacity: '0',
        transition: 'opacity 0.3s',
        backgroundColor: 'rgba(0, 0, 0, 0.8)', // 添加背景色
        fontSize: '14px',          // 适当减小字体
        fontWeight: '500',
        boxShadow: '0 2px 8px rgba(0,0,0,0.2)', // 添加阴影增强层次
        maxWidth: '90vw',          // 防止消息过长
        textAlign: 'center',       // 文字居中
        backdropFilter: 'blur(4px)' // 半透明毛玻璃效果（可选）
      });

      // 根据类型设置样式（成功绿色，错误红色）
      if (type === 'success') {
        messageElement.style.backgroundColor = '#4CAF50'; // 绿色
      } else {
        messageElement.style.backgroundColor = '#F44336'; // 红色
      }

      // 添加到容器并显示
      messageContainer.appendChild(messageElement);
      setTimeout(() => {
        messageElement.style.opacity = '1';
      }, 10); // 短暂延迟确保动画生效

      // 3秒后自动隐藏并移除
      setTimeout(() => {
        messageElement.style.opacity = '0';
        setTimeout(() => {
          messageElement.remove();
        }, 300); // 等待淡出动画完成
      }, 3000);
    }
  </script>
  <!--
  <script>
    Chart.register(ChartZoom);
    document.addEventListener('DOMContentLoaded', function () {
      // 初始化应用
      function init() {
        fetchSummaryData();
        fetchChartData();
        fetchPacketData();
        fetchDomainNum();
      }
      // 初始化应用
      init();
    });
    let saveddata = { 'summary': [], 'chart': [{}, {}, {}, {}, {}, {}, {}] };
    // 全局变量
    dmlNowCard = 0;
    // 全局变量，记录当前选择的日期范围
    let currentDateRange = 0;
    lockday = false;
    lockchart = false;

    async function fetchSummaryData() {
      if (saveddata['summary'][currentDateRange]) {
        document.getElementById("flowcardvalue").innerHTML = saveddata['summary'][currentDateRange]['traffic'] / 1000 + ' <span class="card-subtitle">KB</span>';
        document.getElementById("bandwithcardvalue").innerHTML = saveddata['summary'][currentDateRange]['bandwidth'] + ' <span class="card-subtitle">bps</span>';
        document.getElementById("requestcardvalue").innerHTML = saveddata['summary'][currentDateRange]['requests'] + ' <span class="card-subtitle">次</span>';
        lockday = false;
        return;
      }
      document.getElementById("flowcardvalue").innerHTML = 'loading <span class="card-subtitle"></span>';
      document.getElementById("bandwithcardvalue").innerHTML = 'loading <span class="card-subtitle"></span>';
      document.getElementById("requestcardvalue").innerHTML = 'loading <span class="card-subtitle"></span>';
      try {
        const response = await Axios.post('/combined_cdn/DistrictSummary', {
          timerange: currentDateRange,
        }, {
          headers: {
            'Authorization': 'Bearer <token>'
          }
        });

        if (response.data) {
          document.getElementById("flowcardvalue").innerHTML = response.data.data.traffic / 1000 + ' <span class="card-subtitle">KB</span>';
          document.getElementById("bandwithcardvalue").innerHTML = response.data.data.bandwidth + ' <span class="card-subtitle">bps</span>';
          document.getElementById("requestcardvalue").innerHTML = response.data.data.requests + ' <span class="card-subtitle">次</span>';
          saveddata['summary'][currentDateRange] = response.data.data;
          console.log(currentDateRange);
          lockday = false;
          return response.data;
        } else {
          showError('返回的数据格式不正确');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        showError('获取数据失败，请检查网络连接或稍后再试');
      } finally {
        lockday = false;
      }
    }

    async function fetchChartData() {
      Metrics = ['traffic', 'bandwidth', 'requests'];
      if (saveddata?.chart?.currentDateRange?.Metrics?.[dmlNowCard]) {
        //document.getElementById("flowcardvalue").innerHTML = saveddata['summary'][currentDateRange]['traffic'] + ' <span class="card-subtitle">B</span>';
        //document.getElementById("bandwithcardvalue").innerHTML = saveddata['summary'][currentDateRange]['bandwidth'] + ' <span class="card-subtitle">Mbps</span>';
        //document.getElementById("requestcardvalue").innerHTML = saveddata['summary'][currentDateRange]['requests'] + ' <span class="card-subtitle">次</span>';

        document.getElementById("dmlct-chart").style.display = 'none';
        document.getElementById("chart-placeholder").style.display = 'block';
        renderTrafficChart(saveddata['chart'][currentDateRange][Metrics[dmlNowCard]]);
        updateChartForNowcard();
        document.getElementById("dmlct-chart").style.display = 'block';
        document.getElementById("chart-placeholder").style.display = 'none';
        lockchart = false;
        return;
      }
      //Metrics = ['traffic', 'bandwidth', 'requests'];
      document.getElementById("dmlct-chart").style.display = 'none';
      document.getElementById("chart-placeholder").style.display = 'block';
      try {
        const response = await Axios.post('/combined_cdn/LiveDistrictData', {
          timerange: currentDateRange,
          Metric: Metrics[dmlNowCard],
        }, {
          headers: {
            'Authorization': 'Bearer <token>'
          }
        });

        if (response.data) {
          if (dmlNowCard == 0) {
            saveddata['chart'][currentDateRange][Metrics[dmlNowCard]] = response.data.data.map(item => ({
              ...item,          // 保留原始对象的所有属性
              Value: item.Value / 1000  // 修改 value 值
            }));
          } else {
            saveddata['chart'][currentDateRange][Metrics[dmlNowCard]] = response.data.data;
          }
          renderTrafficChart(saveddata['chart'][currentDateRange][Metrics[dmlNowCard]]);
          document.getElementById("dmlct-chart").style.display = 'block';
          document.getElementById("chart-placeholder").style.display = 'none';
          updateChartForNowcard();
          lockchart = false;
          //return response.data;
        } else {
          showError('返回的数据格式不正确');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        showError('获取数据失败，请检查网络连接或稍后再试');
      } finally {
        lockchart = false;
      }
    }

    async function fetchPacketData() {
      try {
        const response = await Axios.post('/combined_cdn/PacketSummary', {
        }, {
          headers: {
            'Authorization': 'Bearer <token>'
          }
        });

        if (response.data) {
          document.getElementById("packetnoticenum").innerText = response.data.data.noticenum;
          document.getElementById("packetnum").innerText = response.data.data.num;
          document.getElementById("packetflow").innerText = response.data.data.flow + "GB";
          //return response.data;
        } else {
          showError('返回的数据格式不正确');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        showError('获取数据失败，请检查网络连接或稍后再试');
      } finally {
        lockchart = false;
      }
    }

    async function fetchDomainNum() {
      try {
        const response = await Axios.post('/combined_cdn/DomainNum', {
        }, {
          headers: {
            'Authorization': 'Bearer <token>'
          }
        });

        if (response.data) {
          document.getElementById("enableddomain").innerText = response.data.data.enabled;
          document.getElementById("alldomain").innerText = response.data.data.num;
          //return response.data;
        } else {
          showError('返回的数据格式不正确');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        showError('获取数据失败，请检查网络连接或稍后再试');
      } finally {
        lockchart = false;
      }
    }

    function dataday(range) {
      if (range == currentDateRange) {
        return;
      }
      if (lockday) {
        return;
      }
      if (lockchart) {
        console.log('chartlocked');

        return;
      }
      lockday = true;
      lockchart = true;
      // 如果点击的是当前已选中的按钮，直接返回
      // 获取所有日期按钮元素
      const todayBtn = document.querySelector('button[onclick="dataday(0);"]');
      const yesterdayBtn = document.querySelector('button[onclick="dataday(1);"]');
      const last7DaysBtn = document.querySelector('button[onclick="dataday(2);"]');
      const last30DaysBtn = document.querySelector('button[onclick="dataday(3);"]');
      const lastMonthBtn = document.querySelector('button[onclick="dataday(4);"]');
      // 移除所有按钮的激活状态
      todayBtn.classList.remove('time-button-active');
      yesterdayBtn.classList.remove('time-button-active');
      last7DaysBtn.classList.remove('time-button-active');
      last30DaysBtn.classList.remove('time-button-active');
      lastMonthBtn.classList.remove('time-button-active');
      // 根据选择的range添加激活状态
      switch (range) {
        case 0:
          todayBtn.classList.add('time-button-active');
          break;
        case 1:
          yesterdayBtn.classList.add('time-button-active');
          break;
        case 2:
          last7DaysBtn.classList.add('time-button-active');
          break;
        case 3:
          last30DaysBtn.classList.add('time-button-active');
          break;
        case 4:
          lastMonthBtn.classList.add('time-button-active');
          break;
      }
      // 更新当前选择的日期范围
      currentDateRange = range;
      fetchSummaryData();
      fetchChartData();
      // 这里可以添加记录日期范围的逻辑
      // 例如: window.selectedDateRange = range;
    }

    function changesummarycard(cardid) {
      if (cardid == dmlNowCard) {
        return;
      }
      if (lockchart) {
        return;
      }
      card0 = document.getElementById('flowcard');
      card1 = document.getElementById('bandwithcard');
      card2 = document.getElementById('requestcard');

      if (cardid == 0) {
        card0.classList.add('summary-card-active');
        card1.classList.remove('summary-card-active');
        card2.classList.remove('summary-card-active');
      } else if (cardid == 1) {
        card0.classList.remove('summary-card-active');
        card1.classList.add('summary-card-active');
        card2.classList.remove('summary-card-active');
      } else {
        card0.classList.remove('summary-card-active');
        card1.classList.remove('summary-card-active');
        card2.classList.add('summary-card-active');
      }
      dmlNowCard = cardid;
      fetchChartData();
    }

    // 更新日期范围显示
    function updateDateRange() {
      const now = new Date(2025, 5, 23, 15, 56, 56);
      const rangeSelect = document.getElementById('timeRange');
      const selectedValue = rangeSelect.value;

      let startDate = new Date(now);
      let endDate = new Date(now);

      switch (selectedValue) {
        case 'today':
          startDate.setHours(0, 0, 0, 0);
          break;
        case 'yesterday':
          startDate.setDate(now.getDate() - 1);
          startDate.setHours(0, 0, 0, 0);
          endDate.setDate(now.getDate() - 1);
          endDate.setHours(23, 59, 59, 999);
          break;
        case 'last3days':
          startDate.setDate(now.getDate() - 3);
          break;
        case 'last7days':
          startDate.setDate(now.getDate() - 7);
          break;
        case 'custom':
        default:
          startDate.setDate(now.getDate() - 7);
      }

      document.getElementById('startDate').textContent = formatDate(startDate);
      document.getElementById('endDate').textContent = formatDate(endDate);
    }

    // 日期格式化函数
    function formatDate(date) {
      const pad = num => num.toString().padStart(2, '0');
      return `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
    }

    // 筛选按钮点击事件
    function filterData() {
      // 显示加载动画
      document.getElementById('loading').style.display = 'flex';

      // 预留API请求位置
      /*
      fetchData()
          .then(data => {
              document.getElementById('loading').style.display = 'none';
              renderDashboard(data);
          })
          .catch(error => {
              document.getElementById('loading').style.display = 'none';
              showError(error);
          });
      */

      // 模拟重新加载
      setTimeout(() => {
        document.getElementById('loading').style.display = 'none';
        alert('筛选条件已应用（模拟效果）');
      }, 800);
    }

    // 模拟演示数据
    function renderDemoData() {
      // 模拟添加一些域名行
      const domainList = document.getElementById('domainList');

      const sampleDomains = [
        { name: "cdn.example.com", traffic: "148.2", ratio: "18.37%", requests: "45,289" },
        { name: "assets.example.org", traffic: "89.7", ratio: "11.12%", requests: "21,456" },
        { name: "api.example.com", traffic: "67.5", ratio: "8.37%", requests: "78,122" },
        { name: "m.example.com", traffic: "52.8", ratio: "6.54%", requests: "32,890" },
      ];

      sampleDomains.forEach(domain => {
        const row = document.createElement('tr');
        row.innerHTML = `
                    <td class="domain-name">${domain.name}</td>
                    <td>${domain.traffic} GB</td>
                    <td>${domain.ratio}</td>
                    <td>${domain.requests}</td>
                    <td>运行中</td>
                    <td>
                        <div class="ranking-actions">
                            <button class="action-btn primary-action" onclick="viewDomain('${domain.name}')">查看</button>
                            <button class="action-btn secondary-action" onclick="configureDomain('${domain.name}')">配置</button>
                        </div>
                    </td>
                `;
        domainList.appendChild(row);
      });

      // 更新最后修改时间
      document.getElementById('lastUpdateTime').textContent = '2025-06-23 15:56:56';
    }

    // 查看域名详情
    function viewDomain(domain) {
      alert(`查看域名: ${domain}\n（在实际应用中会跳转到详情页面）`);
    }

    // 配置域名
    function configureDomain(domain) {
      alert(`配置域名: ${domain}\n（在实际应用中会打开配置面板）`);
    }

    // 显示错误信息
    function showError(error) {
      alert(`发生错误: ${error.message || '未知错误'}`);
    }

    function renderTrafficChart(data) {
      // 销毁现有实例避免重复渲染
      if (window.dmlctTrafficChartInstance) {
        window.dmlctTrafficChartInstance.destroy();
      }

      // 处理数据为Chart.js所需格式
      const labels = data.map(item => {
        const date = new Date(item.TimeStamp * 1000);
        return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      });
      const values = data.map(item => item.Value);
      console.log('value:', values);

      const maxValue = Math.max(...values);
      const dynamicMax = Math.round(maxValue > 0 ? maxValue * 1.1 : 10); // 处理数据全为0的情况

      datanames = ['流量', '带宽峰值', '请求次数'];
      // 获取canvas元素
      const ctx = document.getElementById('dmlct-chart').getContext('2d');
      // 创建图表实例
      window.dmlctTrafficChartInstance = new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
            label: '总流量 (KB)',
            data: values,
            borderColor: '#1677ff',
            backgroundColor: 'rgba(75, 192, 192, 0.1)',
            borderWidth: 2,
            pointRadius: 3,
            pointBackgroundColor: '#1677ff',
            tension: 0.3,
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              max: dynamicMax,
              ticks: {
                callback: function (value) {
                  if (dmlNowCard == 0) {
                    return value + 'KB';
                  } else if (dmlNowCard == 1) {
                    return value + 'bps';
                  } else {
                    return value + '次';
                  }
                  return value + ' KB';
                }
              },
              title: {
                display: true,
                text: '总流量'
              }
            },
            x: {
              title: {
                display: true,
                text: '时间'
              },
              ticks: {
                maxRotation: 30,
                minRotation: 30,
                autoSkip: true,
                callback: function (val, index) {
                  // 每3个数据点显示一个时间标签（防止重叠）
                  return index % 3 === 0 ? this.getLabelForValue(val) : '';
                }
              }
            }
          },
          plugins: {
            tooltip: {
              callbacks: {
                label: function (context) {
                  if (dmlNowCard == 0) {
                    return `流量: ${context.parsed.y} KB`;
                  } else if (dmlNowCard == 1) {
                    return `带宽峰值: ${context.parsed.y} bps`;
                  } else {
                    return `请求次数: ${context.parsed.y}`;
                  }
                }
              }
            },
            legend: {
              position: 'top'
            },
            zoom: {
              pan: {
                enabled: true,       // 启用拖动平移
                mode: 'x',           // 仅允许横向拖动（也支持 'xy' 双向）
              },
              zoom: {
                wheel: {
                  enabled: true,    // 启用鼠标滚轮缩放
                },
                pinch: {
                  enabled: true,     // 启用触摸屏捏合缩放
                },
                mode: 'x',           // 仅横向缩放（按需改为 'xy'）
              }
            }
          }
        }
      });
    }

    function updateChartForNowcard() {
      const chart = window.dmlctTrafficChartInstance;
      if (!chart) return;

      // 根据 dmlNowCard 设置动态文本
      const configMap = {
        0: {
          title: '流量统计',
          datasetLabel: '总流量 (KB)',
          yAxisTitle: '总流量'
        },
        1: {
          title: '带宽统计',
          datasetLabel: '带宽 (bps)',
          yAxisTitle: '带宽'
        },
        2: {
          title: '请求次数统计',
          datasetLabel: '请求次数',
          yAxisTitle: '请求次数'
        }
      };

      const { title, datasetLabel, yAxisTitle } = configMap[dmlNowCard] || configMap[0];

      // 更新图表配置
      chart.options.plugins.title.text = title; // 修改图表标题
      chart.data.datasets[0].label = datasetLabel; // 修改数据集标签
      chart.options.scales.y.title.text = yAxisTitle; // 修改Y轴标题

      // 触发图表重绘
      chart.update();
    }
  </script>
          -->