<template>
  <div class="screen-container">
    <!-- Cesium地图背景 -->
    <div id="cesiumContainer" class="cesium-background"></div>

    <!-- 新增：类型选择下拉框 -->
    <div class="type-selector">
      <label for="entityType">显示类型：</label>
      <select
        id="entityType"
        v-model="selectedEntityType"
        @change="onEntityTypeChange"
      >
        <option value="person">人员</option>
        <option value="vehicle">车辆</option>
      </select>
    </div>

    <!-- 顶部标题栏 -->
    <header class="top-title-bar" style="display: none">
      <h1 class="system-title">数据监测分析系统</h1>
      <div class="header-info">
        <div class="current-time">{{ currentTime }}</div>
        <div class="system-status">
          <span class="status-dot online"></span>
          <span>系统正常运行中</span>
        </div>
      </div>
    </header>

    <!-- 菜单栏 -->
    <!-- <nav class="menu-bar" style="display: none1">
      <ul class="menu-list">
        <li class="menu-item active">
          <span class="menu-icon home-icon"></span>
          <span>首页概览</span>
        </li>
        <li class="menu-item">
          <span class="menu-icon monitor-icon"></span>
          <span>实时监测</span>
        </li>
        <li class="menu-item">
          <span class="menu-icon alarm-icon"></span>
          <span>报警管理</span>
        </li>
        <li class="menu-item">
          <span class="menu-icon analysis-icon"></span>
          <span>数据分析</span>
        </li>
        <li class="menu-item">
          <span class="menu-icon system-icon"></span>
          <span>系统设置</span>
        </li>
      </ul>
    </nav> -->

    <!-- 主内容区 -->
    <main class="main-content" style="display: none">
      <!-- 左侧数据模块 -->
      <div class="left-modules">
        <!-- 模块1：数据总览 -->
        <div class="data-module">
          <div class="module-header">
            <h3>数据总览</h3>
            <span class="refresh-icon"></span>
          </div>
          <div class="module-body">
            <div class="data-stats">
              <div class="stat-item">
                <span class="stat-label">监测点位</span>
                <span class="stat-value">256</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">在线设备</span>
                <span class="stat-value online">245</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">数据采集量</span>
                <span class="stat-value">1.2万</span>
              </div>
            </div>
            <div class="progress-bars">
              <div class="progress-item">
                <span class="progress-label">设备在线率</span>
                <div class="progress-container">
                  <div class="progress-bar" style="width: 95%"></div>
                </div>
                <span class="progress-value">95.7%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 模块2：实时报警 -->
        <div class="data-module">
          <div class="module-header">
            <h3>实时报警</h3>
            <span class="alarm-count">5</span>
          </div>
          <div class="module-body">
            <div class="alarm-list">
              <div class="alarm-item level-1">
                <span class="alarm-level">紧急</span>
                <span class="alarm-content">温度异常</span>
                <span class="alarm-point">A-12区</span>
                <span class="alarm-time">10:23</span>
              </div>
              <div class="alarm-item level-2">
                <span class="alarm-level">重要</span>
                <span class="alarm-content">设备离线</span>
                <span class="alarm-point">B-05区</span>
                <span class="alarm-time">09:45</span>
              </div>
              <div class="alarm-item level-3">
                <span class="alarm-level">一般</span>
                <span class="alarm-content">数据异常</span>
                <span class="alarm-point">C-08区</span>
                <span class="alarm-time">08:30</span>
              </div>
              <div class="alarm-item level-3">
                <span class="alarm-level">一般</span>
                <span class="alarm-content">压力偏低</span>
                <span class="alarm-point">D-01区</span>
                <span class="alarm-time">07:55</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 模块3：环境监测 -->
        <div class="data-module">
          <div class="module-header">
            <h3>环境监测</h3>
            <span class="time-range">今日</span>
          </div>
          <div class="module-body">
            <div class="env-data-grid">
              <div class="env-item">
                <span class="env-icon temp"></span>
                <span class="env-label">平均温度</span>
                <span class="env-value">26.3°C</span>
              </div>
              <div class="env-item">
                <span class="env-icon humidity"></span>
                <span class="env-label">平均湿度</span>
                <span class="env-value">65.8%</span>
              </div>
              <div class="env-item">
                <span class="env-icon pressure"></span>
                <span class="env-label">平均气压</span>
                <span class="env-value">101.5kPa</span>
              </div>
              <div class="env-item">
                <span class="env-icon wind"></span>
                <span class="env-label">平均风速</span>
                <span class="env-value">3.2m/s</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧数据模块 -->
      <div class="right-modules">
        <!-- 模块4：趋势分析 -->
        <div class="data-module">
          <div class="module-header">
            <h3>数据趋势分析</h3>
            <span class="chart-type">24小时</span>
          </div>
          <div class="module-body">
            <div class="chart-container" id="trendChart"></div>
          </div>
        </div>

        <!-- 模块5：设备状态 -->
        <div class="data-module">
          <div class="module-header">
            <h3>设备运行状态</h3>
            <span class="view-more">查看全部</span>
          </div>
          <div class="module-body">
            <div class="device-status-list">
              <div class="device-item">
                <span class="device-name">传感器A-1</span>
                <span class="device-status normal">正常</span>
                <span class="device-value">125.6</span>
                <span class="device-time">3分钟前</span>
              </div>
              <div class="device-item">
                <span class="device-name">传感器B-3</span>
                <span class="device-status normal">正常</span>
                <span class="device-value">89.2</span>
                <span class="device-time">5分钟前</span>
              </div>
              <div class="device-item">
                <span class="device-name">传感器C-2</span>
                <span class="device-status warning">警告</span>
                <span class="device-value">185.3</span>
                <span class="device-time">1分钟前</span>
              </div>
              <div class="device-item">
                <span class="device-name">传感器D-5</span>
                <span class="device-status offline">离线</span>
                <span class="device-value">--</span>
                <span class="device-time">2小时前</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 模块6：系统负载 -->
        <div class="data-module">
          <div class="module-header">
            <h3>系统资源监控</h3>
            <span class="system-time">{{ currentTimeShort }}</span>
          </div>
          <div class="module-body">
            <div class="system-resources">
              <div class="resource-item">
                <span class="resource-label">CPU使用率</span>
                <div class="resource-bar-container">
                  <div class="resource-bar cpu-bar" style="width: 42%"></div>
                </div>
                <span class="resource-value">42%</span>
              </div>
              <div class="resource-item">
                <span class="resource-label">内存使用率</span>
                <div class="resource-bar-container">
                  <div class="resource-bar mem-bar" style="width: 68%"></div>
                </div>
                <span class="resource-value">68%</span>
              </div>
              <div class="resource-item">
                <span class="resource-label">磁盘使用率</span>
                <div class="resource-bar-container">
                  <div class="resource-bar disk-bar" style="width: 35%"></div>
                </div>
                <span class="resource-value">35%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: "",
      currentTimeShort: "",
      // 版本号
      version: "3.8.9",
      // Cesium查看器实例
      viewer: null,
      tileset: null,
      // 新增：实体类型选择
      selectedEntityType: "person", // 默认选择人员
      personnelList: [
        {
          longitude: 121.70710830038986,
          latitude: 36.853636402927986,
          height: 100,
          name: "张三",
          status: "online", // 在线
          avatar: "/static/images/avatars/zhangsan.png", // 头像
        },
        {
          longitude: 121.70810830038986,
          latitude: 36.854636402927986,
          height: 100,
          name: "李四",
          status: "offline", // 离线
          avatar: "/static/images/avatars/lisi.png", // 头像
        },
        // 其他人员数据...
      ],
      // 新增：车辆数据
      vehicleList: [],
      personModelInterval: null,
      bgEntities: {}, // 所有的key都对应一个实体对象。而人员的实体对应的key不是数字。

      // 轨迹追踪相关数据
      selectedPerson: "", // 选中的人员
      timePoints: [], // 时间点数组
      currentTimeIndex: 0, // 当前时间索引
      personTrajectories: {}, // 人员轨迹数据 { 人员名称: [{time, lng, lat, height}] }
      trailEntities: {}, // 轨迹实体
      isTracking: false, // 是否正在实时追踪
      currentTimeDisplay: "", // 当前显示时间
    };
  },
  mounted() {
    // 初始化Cesium地图
    this.initCesium();

    // 初始化图表
    this.$nextTick(() => {
      this.drawTrendChart();
    });

    // 监听窗口大小变化
    window.addEventListener("resize", this.handleResize);
  },
  // 在beforeDestroy方法中添加清理代码
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.viewer) {
      this.viewer.destroy();
    }
    // 清理点击事件处理器
    if (this.clickHandler) {
      this.clickHandler.destroy();
    }
    // 组件销毁前清理地图资源
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
    if (this.personModelInterval) {
      clearInterval(this.personModelInterval);
    }
    if (this.trackingInterval) {
      clearInterval(this.trackingInterval);
    }
  },
  methods: {
    // 新增：实体类型选择变化处理
    onEntityTypeChange() {
      console.log("选择的实体类型:", this.selectedEntityType);
      // 清除现有的实体
      this.clearEntities();
      // 根据选择的类型重新创建实体
      if (this.selectedEntityType === "person") {
        this.createPersonModel();
      } else {
        this.createVehicleModel();
      }
    },

    // 新增：清除实体
    clearEntities() {
      if (this.viewer && this.bgEntities) {
        for (let key in this.bgEntities) {
          this.viewer.entities.remove(this.bgEntities[key]);
          delete this.bgEntities[key];
        }
      }
    },

    /**
     * 初始化Cesium地图
     */
    async initCesium() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDAxZGFhYy02MjJlLTRiNzktODNhZi00N2VjZGY0NTk4YmIiLCJpZCI6Mjc0NDAxLCJpYXQiOjE3NjMzNDYwNTR9.ZQW2DZ4KaMGbHuwrtIbyI6EdSSvgMJUHmmD74eZW7PQ";
      try {
        // 创建Cesium Viewer实例
        this.viewer = new Cesium.Viewer("cesiumContainer", {
          // 设置地图提供者，这里使用默认的Bing Maps
          imageryProvider: new Cesium.BingMapsImageryProvider({
            url: "https://dev.virtualearth.net",
            key: "AgcbDCAOb9zMfquaT4Z-MdHfx--9wUNrLRiiS7rIElFx8f-4lLulxZ0QnhqX5Lm6",
            mapStyle: Cesium.BingMapsStyle.AERIAL,
          }),
          // 配置是否显示各种控件
          animation: false, // 动画控件
          baseLayerPicker: true, // 底图选择器
          fullscreenButton: false, // 全屏按钮
          geocoder: false, // 地址搜索
          homeButton: false, // 主页按钮
          infoBox: false, // 信息框
          sceneModePicker: false, // 场景模式选择器
          selectionIndicator: false, // 选择指示器
          timeline: false, // 时间线
          navigationHelpButton: false, // 导航帮助按钮
          navigationInstructionsInitiallyVisible: false,
          // 设置初始视图位置（中国区域）
          center: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 10000000),
        });

        this.viewer.scene.camera.setView({
          // 视角-环翠
          duration: 1,
          destination: {
            x: -2739843.563038797,
            y: 4357442.794747324,
            z: 3880768.3292693933,
          },
          orientation: {
            heading: 6.037000745578596,
            pitch: -1.2499586064720978,
            roll: 0.000005306352659495417,
          },
        });

        // 隐藏Cesium logo
        this.viewer._cesiumWidget._creditContainer.style.display = "none";

        const VUE_APP_GIS =
          "http://192.168.2.11:8080/Apps/assets/media/gaoquyingji";
        try {
          const tileset = await Cesium.Cesium3DTileset.fromUrl(
            VUE_APP_GIS + "/tiles/01_guanwei/tileset.json"
          );
          this.viewer.scene.primitives.add(tileset);

          console.log("倾斜摄影模型加载成功tileset", tileset);

          if (tileset) {
            this.tileset = tileset;
            this.locateToTileset();
            // 添加鼠标点击事件监听器，用于控制人员信息label显示
            this.addEntityClickHandler();
          }
        } catch (error) {
          console.error(`加载倾斜摄影模型失败: ${error}`);
        }

        console.log("Cesium地图初始化成功");
      } catch (error) {
        console.error("Cesium地图初始化失败:", error);
      }
    },

    addEntityClickHandler() {
      // 创建鼠标事件处理器
      this.clickHandler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.canvas
      );

      // 监听鼠标左键点击事件
      this.clickHandler.setInputAction((click) => {
        // 检测点击位置的实体
        const pickedObject = this.viewer.scene.pick(click.position);

        // 修复条件判断：检查是否是人员实体，通过判断是否有info属性或是否存在于bgEntities中
        if (
          Cesium.defined(pickedObject) &&
          pickedObject.id &&
          pickedObject.id.info // 直接检查实体是否有info属性
        ) {
          // 获取点击的实体
          const entity = pickedObject.id;
          const personInfo = entity.info;

          // 如果已有详细信息label，则移除它
          if (entity.detailLabel) {
            this.viewer.entities.remove(entity.detailLabel);
            delete entity.detailLabel;
            return;
          }

          console.log("点击实体了", personInfo);

          // 创建详细信息label
          const detailLabel = this.viewer.entities.add({
            position: entity.position.getValue(),
            label: {
              text: `${personInfo.perName}\n状态: ${
                personInfo.status === "online" ? "在线" : "离线"
              }\n高度: ${personInfo.height.toFixed(2)}m`,
              font: "14px 微软雅黑",
              backgroundColor: Cesium.Color.fromCssColorString("#173349"),
              showBackground: true,
              fillColor: Cesium.Color.WHITE,
              pixelOffset: new Cesium.Cartesian2(0, -60),
              eyeOffset: new Cesium.Cartesian3(0, 0, -10),
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.TOP,
              scaleByDistance: new Cesium.NearFarScalar(1000, 1, 500000, 0.5),
              disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保始终显示在最前面
            },
          });

          // 将详细信息label关联到实体，便于后续管理
          entity.detailLabel = detailLabel;
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    /**
     * 获取倾斜摄影模型的经纬度并将摄像机视角转向模型上方
     */
    locateToTileset() {
      if (!this.tileset || !this.viewer) {
        console.error("模型或视图未准备就绪");
        return;
      }

      try {
        // 获取模型的边界球
        const boundingSphere = this.tileset.boundingSphere;

        if (!boundingSphere) {
          console.error("无法获取模型边界");
          return;
        }

        // 获取模型中心点的笛卡尔坐标
        const center = boundingSphere.center;

        // 将笛卡尔坐标转换为经纬度坐标
        const cartographic = Cesium.Cartographic.fromCartesian(center);
        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
        const height = cartographic.height;

        console.log("倾斜摄影模型中心点经纬度:", {
          longitude: longitude,
          latitude: latitude,
          height: height,
        });

        // 计算合适的观察距离 - 基于模型半径的倍数
        const distance = boundingSphere.radius * 2.5; // 可以根据需要调整倍数

        // 设置相机位置在模型上方
        const cameraPosition = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          height + distance // 相机高度为模型最高点加上观察距离
        );

        // 计算相机看向模型中心的方向
        const heading = Cesium.Math.toRadians(0); // 方向角
        const pitch = Cesium.Math.toRadians(-90); // 俯仰角 - 负数表示向下看
        const roll = Cesium.Math.toRadians(0); // 翻滚角

        // 使用flyTo方法平滑过渡到目标位置
        this.viewer.camera.flyTo({
          destination: cameraPosition,
          orientation: {
            heading: heading,
            pitch: pitch,
            roll: roll,
          },
          duration: 2, // 过渡时间2秒
          complete: () => {
            console.log("相机已成功定位到模型上方");
            // this.createPersonModel(); // 定位后创建人员模型
            // 根据当前选择的类型创建相应的模型
            if (this.selectedEntityType === "person") {
              this.createPersonModel(); // 定位后创建人员模型
            } else {
              this.createVehicleModel(); // 定位后创建车辆模型
            }
          },
        });
      } catch (error) {
        console.error("定位到模型上方失败:", error);
      }
    },
    createPersonModel() {
      if (!this.personModelInterval) {
        this.personModelInterval = setInterval(() => {
          console.log("开始获取实时数据");
          // 只清除当前类型的实体
          this.clearEntities();
          // if (this.bgEntities) {
          //   for (let key in this.bgEntities) {
          //     if (isNaN(parseFloat(key))) {
          //       // 非数字键名的是人员实体
          //       this.viewer.entities.remove(this.bgEntities[key]);
          //       delete this.bgEntities[key];
          //     }
          //   }
          // }

          // 从API获取最新的人员定位数据
          this.personCardList((list) => {
            console.log("人员数据", this.personnelList);
            // 创建新实体
            for (let item of this.personnelList) {
              let lng = Number(item.lng);
              let lat = Number(item.lat);
              let height = Number(item.height);
              let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
              console.log(item.perName, position);
              // 创建人员标记
              let entity = this.viewer.entities.add({
                position: position,
                label: {
                  text: item.perName,
                  font: "16px",
                  backgroundColor: Cesium.Color.fromCssColorString("#173349"),
                  showBackground: true,
                  fillColor: Cesium.Color.YELLOW,
                  depthTestAgainstTerrain: false, // 禁用地形深度测试
                  pixelOffset: new Cesium.Cartesian2(0, -35),
                },
                billboard: {
                  image: "/poi-marker-default.png",
                  scale: 0.5,
                  heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
                },
                description: `<div><h4>${item.perName}${item.status}</h4></div>`,
                fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
              });
              entity.info = item; // 添加 info 属性
              entity.type = "person"; // 添加类型标记
              this.bgEntities[item.perName] = entity; // 存储新实体
            }
          });
        }, 1000); // 每10秒刷新一次
      }
    },

    personCardList(fn) {
      // 将笛卡尔坐标转换为经纬度坐标
      const cartographic = Cesium.Cartographic.fromCartesian({
        x: -2686273.730145489,
        y: 4293961.185794622,
        z: 3863430.5618300107,
      });
      const baseLongitude = Cesium.Math.toDegrees(cartographic.longitude);
      const baseLatitude = Cesium.Math.toDegrees(cartographic.latitude);
      const baseHeight = cartographic.height + 1;

      console.log("人员经纬度基准点:", {
        longitude: baseLongitude,
        latitude: baseLatitude,
        height: baseHeight,
      });

      // 清除现有的人员列表
      this.personnelList = [];

      // 生成10个不同的经纬度坐标
      const maxOffset = 0.00005;

      for (let index = 0; index < 10; index++) {
        // 生成随机偏移量
        const lngOffset = (Math.random() - 0.5) * 2 * maxOffset;
        const latOffset = (Math.random() - 0.5) * 2 * maxOffset;

        this.personnelList.push({
          lng: baseLongitude + lngOffset,
          lat: baseLatitude + latOffset,
          height: baseHeight,
          perName: "张三" + index,
          status: "online", // 在线
          avatar: "/static/images/avatars/zhangsan.png", // 头像
        });
      }

      fn(this.personnelList);
    },

    // 新增：车辆模型创建方法
    createVehicleModel() {
      // 清除定时器，避免重复执行
      if (this.personModelInterval) {
        clearInterval(this.personModelInterval);
        this.personModelInterval = null;
      }

      // 清除现有实体
      this.clearEntities();

      // 生成车辆数据（模拟数据，可以替换为实际API调用）
      this.generateVehicleData();

      // 创建车辆实体
      for (let item of this.vehicleList) {
        let lng = Number(item.lng);
        let lat = Number(item.lat);
        let height = Number(item.height);
        let position = Cesium.Cartesian3.fromDegrees(lng, lat, height);

        // 创建车辆标记
        let entity = this.viewer.entities.add({
          position: position,
          label: {
            text: item.vehicleName,
            font: "16px",
            backgroundColor: Cesium.Color.fromCssColorString("#173349"),
            showBackground: true,
            fillColor: Cesium.Color.CYAN, // 车辆标签使用青色
            depthTestAgainstTerrain: false,
            pixelOffset: new Cesium.Cartesian2(0, -35),
          },
          billboard: {
            image: "/poi-marker-vehicle.png", // 可以使用不同的图标表示车辆
            scale: 0.5,
            heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
          },
          description: `<div><h4>${item.vehicleName}${item.status}</h4></div>`,
          fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
        });
        entity.info = item; // 添加 info 属性
        entity.type = "vehicle"; // 添加类型标记
        this.bgEntities[item.vehicleName] = entity; // 存储新实体
      }

      // 设置定时刷新
      this.personModelInterval = setInterval(() => {
        console.log("开始获取实时车辆数据");
        this.generateVehicleData();

        // 更新车辆实体
        for (let item of this.vehicleList) {
          let entity = this.bgEntities[item.vehicleName];
          if (entity) {
            let position = Cesium.Cartesian3.fromDegrees(
              item.lng,
              item.lat,
              item.height
            );
            entity.position.setValue(position);
            entity.fixedFrame =
              Cesium.Transforms.eastNorthUpToFixedFrame(position);
          } else {
            // 如果实体不存在，则创建新的
            let position = Cesium.Cartesian3.fromDegrees(
              item.lng,
              item.lat,
              item.height
            );
            let newEntity = this.viewer.entities.add({
              position: position,
              label: {
                text: item.vehicleName,
                font: "16px",
                backgroundColor: Cesium.Color.fromCssColorString("#173349"),
                showBackground: true,
                fillColor: Cesium.Color.CYAN,
                depthTestAgainstTerrain: false,
                pixelOffset: new Cesium.Cartesian2(0, -35),
              },
              billboard: {
                image: "/poi-marker-vehicle.png",
                scale: 0.5,
                heightReference: Cesium.HeightReference.CLAMP_TO_3D_TILE,
              },
              description: `<div><h4>${item.vehicleName}${item.status}</h4></div>`,
              fixedFrame: Cesium.Transforms.eastNorthUpToFixedFrame(position),
            });
            newEntity.info = item;
            newEntity.type = "vehicle";
            this.bgEntities[item.vehicleName] = newEntity;
          }
        }
      }, 10000); // 每10秒刷新一次
    },

    // 新增：生成车辆数据
    generateVehicleData() {
      // 将笛卡尔坐标转换为经纬度坐标
      const cartographic = Cesium.Cartographic.fromCartesian({
        x: -2686273.730145489,
        y: 4293961.185794622,
        z: 3863430.5618300107,
      });
      const baseLongitude = Cesium.Math.toDegrees(cartographic.longitude);
      const baseLatitude = Cesium.Math.toDegrees(cartographic.latitude);
      const baseHeight = cartographic.height + 1;

      // 清除现有的车辆列表
      this.vehicleList = [];

      // 生成5辆不同的车辆数据
      const maxOffset = 0.00008; // 车辆分布范围稍大一些

      for (let index = 0; index < 5; index++) {
        // 生成随机偏移量
        const lngOffset = (Math.random() - 0.5) * 2 * maxOffset;
        const latOffset = (Math.random() - 0.5) * 2 * maxOffset;

        this.vehicleList.push({
          lng: baseLongitude + lngOffset,
          lat: baseLatitude + latOffset,
          height: baseHeight,
          vehicleName: "车辆" + (index + 1),
          status: Math.random() > 0.2 ? "online" : "offline", // 80%的概率在线
          vehicleType:
            index % 3 === 0 ? "卡车" : index % 3 === 1 ? "挖掘机" : "装载机",
        });
      }
    },

    // 修改：更新点击事件处理器，支持车辆显示
    addEntityClickHandler() {
      // 创建鼠标事件处理器
      this.clickHandler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.canvas
      );

      // 监听鼠标左键点击事件
      this.clickHandler.setInputAction((click) => {
        // 检测点击位置的实体
        const pickedObject = this.viewer.scene.pick(click.position);

        // 修复条件判断：检查是否有info属性
        if (
          Cesium.defined(pickedObject) &&
          pickedObject.id &&
          pickedObject.id.info
        ) {
          // 获取点击的实体
          const entity = pickedObject.id;
          const entityInfo = entity.info;

          // 如果已有详细信息label，则移除它
          if (entity.detailLabel) {
            this.viewer.entities.remove(entity.detailLabel);
            delete entity.detailLabel;
            return;
          }

          console.log("点击实体了", entityInfo);

          // 根据实体类型显示不同的信息
          let labelText = "";
          if (entity.type === "vehicle") {
            // 车辆信息
            labelText = `${entityInfo.vehicleName}\n类型: ${
              entityInfo.vehicleType
            }\n状态: ${
              entityInfo.status === "online" ? "在线" : "离线"
            }\n高度: ${entityInfo.height.toFixed(2)}m`;
          } else {
            // 人员信息
            labelText = `${entityInfo.perName}\n状态: ${
              entityInfo.status === "online" ? "在线" : "离线"
            }\n高度: ${entityInfo.height.toFixed(2)}m`;
          }

          // 创建详细信息label
          const detailLabel = this.viewer.entities.add({
            position: entity.position.getValue(),
            label: {
              text: labelText,
              font: "14px 微软雅黑",
              backgroundColor: Cesium.Color.fromCssColorString("#173349"),
              showBackground: true,
              fillColor: Cesium.Color.WHITE,
              pixelOffset: new Cesium.Cartesian2(0, -60),
              eyeOffset: new Cesium.Cartesian3(0, 0, -10),
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.TOP,
              scaleByDistance: new Cesium.NearFarScalar(1000, 1, 500000, 0.5),
              disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保始终显示在最前面
            },
          });

          // 将详细信息label关联到实体，便于后续管理
          entity.detailLabel = detailLabel;
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    // 绘制趋势图
    drawTrendChart() {},

    // 处理窗口大小变化
    handleResize() {
      // 重新调整Cesium视图大小
      if (this.viewer) {
        this.viewer.resize();
      }

      // 重新绘制图表
      const chartContainer = document.getElementById("trendChart");
      if (chartContainer && chartContainer.firstChild) {
        chartContainer.removeChild(chartContainer.firstChild);
        this.drawTrendChart();
      }
    },
  },
};
</script>

<style lang="scss" scope>
// 基础样式 - 1rem = 100px
html {
  font-size: 100px;
}

// 屏幕容器
.screen-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  overflow: hidden;
}

// Cesium地图背景
.cesium-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

// 顶部标题栏
.top-title-bar {
  position: relative;
  height: 0.6rem;
  background: linear-gradient(to right, #003366, #0066cc);
  border-bottom: 2px solid #00aaff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 170, 255, 0.3);

  .system-title {
    font-size: 0.22rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
    margin: 0;
  }

  .header-info {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .current-time {
    font-size: 0.14rem;
    color: #00ffcc;
    font-weight: 500;
  }

  .system-status {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    font-size: 0.14rem;
  }

  .status-dot {
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;

    &.online {
      background-color: #00ff00;
      box-shadow: 0 0 0.05rem #00ff00;
    }

    &.offline {
      background-color: #ff3333;
      box-shadow: 0 0 0.05rem #ff3333;
    }
  }
}

// 菜单栏
.menu-bar {
  position: relative;
  height: 0.4rem;
  background: rgba(0, 30, 60, 0.9);
  border-bottom: 1px solid #005080;
  z-index: 99;

  .menu-list {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 0.2rem;
    list-style: none;
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    padding: 0 0.2rem;
    height: 0.3rem;
    margin-right: 0.2rem;
    border-radius: 0.04rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.14rem;

    &:hover {
      background: rgba(0, 170, 255, 0.2);
    }

    &.active {
      background: linear-gradient(to right, #005080, #0078b0);
      box-shadow: 0 0 0.1rem rgba(0, 170, 255, 0.5);
    }
  }

  .menu-icon {
    width: 0.16rem;
    height: 0.16rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .home-icon {
    background-image: url("/static/images/home-icon.png");
  }

  .monitor-icon {
    background-image: url("/static/images/monitor-icon.png");
  }

  .alarm-icon {
    background-image: url("/static/images/alarm-icon.png");
  }

  .analysis-icon {
    background-image: url("/static/images/analysis-icon.png");
  }

  .system-icon {
    background-image: url("/static/images/system-icon.png");
  }
}

// 主内容区
.main-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem;
  height: calc(100vh - 1rem);
  z-index: 2;
}

// 左右模块容器
.left-modules,
.right-modules {
  width: 3.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: absolute;
  z-index: 5;
  top: 1rem;
}
.left-modules {
  left: 0;
}

.right-modules {
  right: 0;
}

// 数据模块通用样式
.data-module {
  background: rgba(0, 20, 40, 0.85);
  border: 1px solid #005080;
  border-radius: 0.04rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(0.05rem);
  box-shadow: 0 0 0.15rem rgba(0, 100, 200, 0.3);

  &:nth-child(1) {
    height: 2.2rem;
  }

  &:nth-child(2) {
    height: 2.5rem;
  }

  &:nth-child(3) {
    height: 2rem;
  }
}

// 模块头部
.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.12rem 0.16rem;
  background: linear-gradient(to right, #003060, #005090);
  border-bottom: 1px solid #0070b0;

  h3 {
    margin: 0;
    font-size: 0.16rem;
    font-weight: 500;
    color: #00ffcc;
  }

  .refresh-icon,
  .view-more {
    font-size: 0.12rem;
    color: #99ccff;
    cursor: pointer;
  }

  .alarm-count {
    background-color: #ff3333;
    color: #fff;
    padding: 0.02rem 0.08rem;
    border-radius: 0.1rem;
    font-size: 0.12rem;
    font-weight: bold;
  }

  .time-range,
  .chart-type,
  .system-time {
    font-size: 0.12rem;
    color: #66ccff;
  }
}

// 模块内容区
.module-body {
  flex: 1;
  padding: 0.16rem;
  overflow: hidden;
}

// 数据总览样式
.data-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.16rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0.8rem;
}

.stat-label {
  font-size: 0.12rem;
  color: #99ccff;
  margin-bottom: 0.05rem;
}

.stat-value {
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;

  &.online {
    color: #00ff00;
  }
}

.progress-bars {
  margin-top: 0.1rem;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-bottom: 0.08rem;
}

.progress-label {
  font-size: 0.12rem;
  color: #ffffff;
  width: 0.8rem;
}

.progress-container {
  flex: 1;
  height: 0.06rem;
  background: rgba(0, 40, 80, 0.6);
  border: 1px solid #005080;
  border-radius: 0.03rem;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, #00aaff, #00ffcc);
  box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
}

.progress-value {
  font-size: 0.12rem;
  color: #00ffcc;
  font-weight: bold;
  width: 0.4rem;
  text-align: right;
}

// 报警列表样式
.alarm-list {
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0.04rem;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 40, 80, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    background: #0070b0;
    border-radius: 0.02rem;
  }
}

.alarm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem;
  margin-bottom: 0.08rem;
  border-radius: 0.04rem;
  border-left: 3px solid;
  background: rgba(0, 30, 60, 0.7);
  font-size: 0.12rem;

  &.level-1 {
    border-color: #ff3333;
    background: rgba(255, 51, 51, 0.1);
  }

  &.level-2 {
    border-color: #ff9900;
    background: rgba(255, 153, 0, 0.1);
  }

  &.level-3 {
    border-color: #ffff00;
    background: rgba(255, 255, 0, 0.1);
  }
}

.alarm-level {
  font-weight: bold;
  width: 0.35rem;

  .alarm-item.level-1 & {
    color: #ff3333;
  }

  .alarm-item.level-2 & {
    color: #ff9900;
  }

  .alarm-item.level-3 & {
    color: #ffff00;
  }
}

.alarm-content {
  flex: 1;
  color: #ffffff;
}

.alarm-point {
  color: #99ccff;
  width: 0.5rem;
}

.alarm-time {
  color: #66ccff;
  font-size: 0.11rem;
}

// 环境数据样式
.env-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
  height: 100%;
}

.env-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 30, 60, 0.7);
  border-radius: 0.04rem;
  border: 1px solid #005080;
  padding: 0.1rem;
}

.env-icon {
  width: 0.3rem;
  height: 0.3rem;
  margin-bottom: 0.08rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.env-icon.temp {
  background-image: url("/static/images/temp-icon.png");
}

.env-icon.humidity {
  background-image: url("/static/images/humidity-icon.png");
}

.env-icon.pressure {
  background-image: url("/static/images/pressure-icon.png");
}

.env-icon.wind {
  background-image: url("/static/images/wind-icon.png");
}

.env-label {
  font-size: 0.12rem;
  color: #99ccff;
  margin-bottom: 0.05rem;
}

.env-value {
  font-size: 0.16rem;
  font-weight: bold;
  color: #00ffcc;
}

// 图表容器
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 1.5rem;
}

// 设备状态列表
.device-status-list {
  height: 100%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0.04rem;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 40, 80, 0.5);
  }

  &::-webkit-scrollbar-thumb {
    background: #0070b0;
    border-radius: 0.02rem;
  }
}

.device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0;
  border-bottom: 1px solid rgba(0, 100, 200, 0.2);
  font-size: 0.12rem;

  &:last-child {
    border-bottom: none;
  }
}

.device-name {
  color: #ffffff;
  width: 0.8rem;
}

.device-status {
  padding: 0.02rem 0.08rem;
  border-radius: 0.03rem;
  font-size: 0.11rem;
  font-weight: bold;

  &.normal {
    background: rgba(0, 255, 0, 0.2);
    color: #00ff00;
  }

  &.warning {
    background: rgba(255, 153, 0, 0.2);
    color: #ff9900;
  }

  &.offline {
    background: rgba(255, 51, 51, 0.2);
    color: #ff3333;
  }
}

.device-value {
  color: #00ffcc;
  font-weight: bold;
  width: 0.6rem;
  text-align: right;
}

.device-time {
  color: #66ccff;
  font-size: 0.11rem;
}

// 系统资源监控
.system-resources {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.resource-label {
  font-size: 0.12rem;
  color: #ffffff;
  width: 0.9rem;
}

.resource-bar-container {
  flex: 1;
  height: 0.08rem;
  background: rgba(0, 40, 80, 0.6);
  border: 1px solid #005080;
  border-radius: 0.04rem;
  overflow: hidden;
}

.resource-bar {
  height: 100%;
  box-shadow: 0 0 0.05rem;

  &.cpu-bar {
    background: linear-gradient(to right, #00aaff, #00ffcc);
    box-shadow: 0 0 0.05rem rgba(0, 255, 204, 0.7);
  }

  &.mem-bar {
    background: linear-gradient(to right, #ff9900, #ffcc00);
    box-shadow: 0 0 0.05rem rgba(255, 204, 0, 0.7);
  }

  &.disk-bar {
    background: linear-gradient(to right, #00cc66, #00ff99);
    box-shadow: 0 0 0.05rem rgba(0, 255, 153, 0.7);
  }
}

.resource-value {
  font-size: 0.12rem;
  font-weight: bold;
  width: 0.4rem;
  text-align: right;

  &.low {
    color: #00ff00;
  }

  &.medium {
    color: #ffcc00;
  }

  &.high {
    color: #ff3333;
  }
}

// 响应式设计 - 基于1920*1080分辨率的适配
@media (max-width: 1600px) {
  html {
    font-size: 83.3px; // 1600/1920 * 100
  }
}

@media (max-width: 1440px) {
  html {
    font-size: 75px; // 1440/1920 * 100
  }

  .left-modules,
  .right-modules {
    width: 3rem;
  }
}

@media (max-width: 1280px) {
  html {
    font-size: 66.7px; // 1280/1920 * 100
  }

  .left-modules,
  .right-modules {
    width: 2.6rem;
  }
}

// 修复滚动条样式
*::-webkit-scrollbar {
  width: 0.04rem;
  height: 0.04rem;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 40, 80, 0.3);
  border-radius: 0.02rem;
}

*::-webkit-scrollbar-thumb {
  background: #0070b0;
  border-radius: 0.02rem;
}

*::-webkit-scrollbar-thumb:hover {
  background: #0090d0;
}

// 新增：类型选择器样式
.type-selector {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  background: rgba(23, 51, 73, 0.9);
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid #005080;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;

  select {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid #0078b0;
    border-radius: 4px;
    padding: 5px 10px;
    outline: none;

    option {
      background: #173349;
      color: white;
    }

    &:focus {
      border-color: #00aaff;
      box-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
    }
  }
}
</style>