operation_wx/pages/index/index.js

const api = require('../../api/index.js');

Page({
  data: {
    // 地图基础配置
    longitude: 0,
    latitude: 0,
    scale: 10,
    polyline: [],
    markers: [],
    // 选项卡默认选中车
    activeType: 'car',
    // 四类点位数据（车+电站+用户+司机）
    pointData: {
      car: [],
      station: [],
      user: [],
      driver: [] // 新增司机数据字段
    },
    currentList: [],
    // 四类点位自定义图标（新增司机图标）
    markerIcons: {
      car: 'https://esos-iot.com/myminio/project/e9c0fba9b61448e59458054d335b162b.png',      // 储能车图标
      station: 'https://esos-iot.com/myminio/project/62a7a9c509f948558436bc56ee9bfe2e.png', // 电站图标
      user: 'https://esos-iot.com/myminio/project/42dd004817dd4f268d97dcd1145ca113.png',     // 用户用电图标
      driver: 'https://esos-iot.com/myminio/project/6dc37b15321b462f9ab59c47263dd224.png' // 司机图标（替换为实际路径）
    },
    selectcardata: [],
    powerindex: 0,
    objectArray: []
  },

  onLoad(options) {
    wx.$on('wsMessage', this.handleWsMessage);

    if (wx.getStorageSync('projectId') == '') {
      wx.setStorage({
        key: 'projectId',
        data: ''
      });
      this.getaddredisredis()
    }
    this.getproject()
    
    // 初始化地图（延迟执行确保数据加载完成）
    setTimeout(() => {
      this.initAllMarkers();
    }, 2000);
  },

  onHide() {
    // 取消WebSocket订阅，防止内存泄漏
    wx.$off('wsMessage', this.handleWsMessage);
  },

  /**
   * 处理WebSocket消息
   */
  handleWsMessage(message) {
    console.log('收到WebSocket消息:', message);
    switch (message.api) {
      case '/syscar/selectcar':
        this.getproject();
        break;
    }
  },

  /**
   * 获取电站列表
   */
  getproject() {
    api.request(`/sysproject/selectproject`, 'post', {}, { isPublic: false })
      .then((res) => {
        console.log('电站列表:', res.data);
        if (res.code === 200) {
          // 新增"全部电站"选项
          const projectList = [{
            createTime: "",
            electric: "",
            partnership: "",
            projectId: "",
            projectType: "",
            projectName: "全部电站"
          }, ...res.data];

          this.setData({
            objectArray: projectList
          });

          // 设置默认选中项
          for (let i = 0; i < projectList.length; i++) {
            if (projectList[i].projectId === wx.getStorageSync('projectId')) {
              this.setData({ powerindex: i });
              break;
            }
          }

          // 重新加载所有数据
          this.getaddredisredis();
          this.oncar();
          this.onstation();
          this.onuser();
          this.ondriver(); // 新增加载司机数据
        }
      })
      .catch((err) => {
        console.error('获取电站列表失败:', err);
      });
  },

  /**
   * 缓存项目ID到redis
   */
  getaddredisredis() {
    const data = {
      projectId: wx.getStorageSync('projectId')
    };
    api.request(`/sysproject/insertredis`, 'POST', data)
      .then((res) => {
        console.log('Redis缓存结果:', res);
      })
      .catch((err) => {
        console.error('Redis缓存失败:', err);
      });
  },

  /**
   * 选择电站下拉框事件
   */
  bindPickerChange(e) {
    console.log('选择电站:', e.detail.value);
    const selectedIndex = e.detail.value;
    const selectedProject = this.data.objectArray[selectedIndex];
    
    // 缓存选中的项目ID
    wx.setStorage({
      key: 'projectId',
      data: selectedProject.projectId
    });

    // 更新redis缓存
    api.request(`/sysproject/insertredis`, 'POST', {
      projectId: selectedProject.projectId
    }).then((res) => {
      console.log('切换电站缓存结果:', res);
      this.getproject(); // 重新加载数据
    }).catch((err) => {
      console.error('切换电站缓存失败:', err);
    });
  },

  /**
   * 获取车辆数据
   */
  oncar() {
    api.request(`/syscar/selectcar`, 'post', {}, { isPublic: false })
      .then((res) => {
        console.log('车辆数据:', res.data);
        if (res.code === 200) {
          // 处理车辆数据，拆分经纬度
          const processedData = res.data.map(item => {
            // 拆分并清洗经纬度
            const posArr = item.carPosition?.split(',')
              .map(pos => pos.trim())
              .filter(pos => pos);

            const latitude = parseFloat(posArr?.[0]) || 0;
            const longitude = parseFloat(posArr?.[1]) || 0;

            return {
              ...item,
              latitude,
              longitude,
              type: 'car'
            };
          });

          this.setData({
            "pointData.car": processedData
          });

          // 如果当前选中的是车辆标签，更新列表
          if (this.data.activeType === 'car') {
            this.switchType({ currentTarget: { dataset: { type: 'car' } } });
          }
        }
      })
      .catch((err) => {
        console.error('获取车辆数据失败:', err);
      });
  },

  /**
   * 获取购电电站数据
   */
  onstation() {
    api.request(`/sysaddress/selectaddress`, 'post', { addressType: 1 }, { isPublic: false })
      .then((res) => {
        console.log('购电电站数据:', res.data);
        if (res.code === 200) {
          // 处理电站数据，补充经纬度和类型
          const processedData = res.data.map(item => {
            // 解析经纬度（根据实际字段调整）
            const latitude = parseFloat(item.latitude || item.addressLat) || 0;
            const longitude = parseFloat(item.longitude || item.addressLng) || 0;

            return {
              ...item,
              latitude,
              longitude,
              type: 'station'
            };
          });

          this.setData({
            "pointData.station": processedData
          });

          // 如果当前选中的是购电标签，更新列表
          if (this.data.activeType === 'station') {
            this.switchType({ currentTarget: { dataset: { type: 'station' } } });
          }
        }
      })
      .catch((err) => {
        console.error('获取购电电站数据失败:', err);
      });
  },

  /**
   * 获取售电用户数据
   */
  onuser() {
    api.request(`/sysaddress/selectaddress`, 'post', { addressType: 2 }, { isPublic: false })
      .then((res) => {
        console.log('售电用户数据:', res.data);
        if (res.code === 200) {
          // 处理用户数据，补充经纬度和类型
          const processedData = res.data.map(item => {
            // 解析经纬度（根据实际字段调整）
            const latitude = parseFloat(item.latitude || item.addressLat) || 0;
            const longitude = parseFloat(item.longitude || item.addressLng) || 0;

            return {
              ...item,
              latitude,
              longitude,
              type: 'user'
            };
          });

          this.setData({
            "pointData.user": processedData
          });

          // 如果当前选中的是售电标签，更新列表
          if (this.data.activeType === 'user') {
            this.switchType({ currentTarget: { dataset: { type: 'user' } } });
          }
        }
      })
      .catch((err) => {
        console.error('获取售电用户数据失败:', err);
      });
  },

  /**
   * 新增：获取司机数据
   */
  ondriver() {
    // 请替换为实际的司机接口地址和参数
    api.request(`/sysoperation/selectoperation`, 'post', {}, { isPublic: false })
      .then((res) => {
        console.log('司机数据:', res.data);
        if (res.code === 200) {
          // 处理司机数据，补充经纬度和类型
          const processedData = res.data.map(item => {
            // 解析经纬度（根据实际字段调整）
            const posArr = item.driverPosition?.split(',')
              .map(pos => pos.trim())
              .filter(pos => pos);

            const latitude = parseFloat(posArr?.[0] || item.latitude || 0);
            const longitude = parseFloat(posArr?.[1] || item.longitude || 0);

            return {
              ...item,
              latitude,
              longitude,
              type: 'driver',
              id: item.driverId || item.id, // 统一ID字段
              driverName: item.driverName || item.name || '未知司机' // 统一名称字段
            };
          });

          this.setData({
            "pointData.driver": processedData
          });

          // 如果当前选中的是司机标签，更新列表
          if (this.data.activeType === 'driver') {
            this.switchType({ currentTarget: { dataset: { type: 'driver' } } });
          }
        }
      })
      .catch((err) => {
        console.error('获取司机数据失败:', err);
      });
  },

  /**
   * 初始化所有点位标记
   */
  initAllMarkers() {
    // 合并所有四类点位数据
    const allPoints = [
      ...this.data.pointData.car,
      ...this.data.pointData.station,
      ...this.data.pointData.user,
      ...this.data.pointData.driver // 新增司机点位
    ];

    console.log('所有点位数据:', allPoints);
    
    // 适配地图视野并生成标记
    this.autoFitMap(allPoints);
    this.generateAllMarkers(allPoints);
  },

  /**
   * 自动适配地图视野，确保所有点位都可见
   */
  autoFitMap(pointList) {
    if (!pointList || pointList.length === 0) {
      // 无数据时默认定位上海
      this.setData({ longitude: 121.473701, latitude: 31.230416, scale: 14 });
      return;
    }

    // 提取有效经纬度
    const longitudes = pointList.map(item => Number(item.longitude)).filter(v => !isNaN(v) && v !== 0);
    const latitudes = pointList.map(item => Number(item.latitude)).filter(v => !isNaN(v) && v !== 0);

    if (longitudes.length === 0 || latitudes.length === 0) {
      this.setData({ longitude: 121.473701, latitude: 31.230416, scale: 14 });
      return;
    }

    // 计算极值和中心点
    const maxLng = Math.max(...longitudes);
    const minLng = Math.min(...longitudes);
    const maxLat = Math.max(...latitudes);
    const minLat = Math.min(...latitudes);

    const centerLng = (maxLng + minLng) / 2;
    const centerLat = (maxLat + minLat) / 2;

    // 计算跨度并添加缓冲
    const lngDiff = (maxLng - minLng) + 0.01;
    const latDiff = (maxLat - minLat) + 0.01;

    // 计算缩放级别
    const systemInfo = wx.getSystemInfoSync();
    const screenWidth = systemInfo.windowWidth;
    let scale = 1;

    if (lngDiff > 0) {
      scale = Math.log2((360 * screenWidth) / (lngDiff * 256 * Math.cos(centerLat * Math.PI / 180)));
    }
    
    const latScale = Math.log2((180 * screenWidth) / (latDiff * 256));
    scale = Math.min(scale, latScale);

    // 限制缩放范围（1-20）
    scale = Math.max(1, Math.min(20, Math.floor(scale)));

    // 更新地图配置
    this.setData({
      longitude: centerLng,
      latitude: centerLat,
      scale: scale
    });
  },

  /**
   * 生成所有点位的标记
   */
  generateAllMarkers(pointList) {
    if (!pointList || pointList.length === 0) {
      this.setData({ markers: [] });
      return;
    }

    // 生成标记数组
    const markers = pointList.map((item, index) => {
      // 构建标记弹窗内容
      let calloutContent = '';
      if (item.type === 'car') {
        calloutContent = `${item.carName || '储能车'}\n编号: ${item.controllerId || item.carId}\n状态: ${item.lineType === 1 ? '在线' : '离线'}`;
      } else if (item.type === 'station') {
        calloutContent = `${item.poiName || '购电站'}\n地址: ${item.addressName || '未知'}\n状态: ${item.addressDeletetype === 0 ? '在线' : '离线'}`;
      } else if (item.type === 'user') {
        calloutContent = `${item.poiName || '用电用户'}\n地址: ${item.addressName || '未知'}\n状态: ${item.addressDeletetype === 0 ? '在线' : '离线'}`;
      } else if (item.type === 'driver') {
        calloutContent = `${item.driverName || '司机'}\nID: ${item.driverId || item.id}\n状态: ${item.status === 0 ? '在线' : '离线'}`;
      }

      return {
        id: index + 1, // 唯一ID
        longitude: Number(item.longitude),
        latitude: Number(item.latitude),
        iconPath: this.data.markerIcons[item.type] || this.data.markerIcons.station, // 兜底图标
        width: 40,
        height: 40,
        anchor: { x: 0.5, y: 0.5 }, // 图标中心点对齐
        callout: {
          content: calloutContent,
          fontSize: 12,
          borderRadius: 8,
          bgColor: '#fff',
          padding: 8,
          display: 'BYCLICK',
          textAlign: 'left'
        },
        customData: item // 携带原始数据
      };
    });

    this.setData({ markers });
  },

  /**
   * 切换选项卡
   */
  switchType(e) {
    const type = e.currentTarget.dataset.type;
    this.setData({
      activeType: type,
      currentList: this.data.pointData[type] || []
    });
  },

  /**
   * 定位到指定点位
   */
  toPosition(e) {
    const item = e.currentTarget.dataset.item;
    if (!item || !item.longitude || !item.latitude || item.longitude === 0 || item.latitude === 0) {
      wx.showToast({
        title: '该点位无坐标信息',
        icon: 'none'
      });
      return;
    }

    // 定位到指定点位并放大
    this.setData({
      longitude: Number(item.longitude),
      latitude: Number(item.latitude),
      scale: 17
    });

    // 显示提示
    let title = '';
    if (item.type === 'car') title = `已定位到${item.carName || '储能车'}`;
    else if (item.type === 'station') title = `已定位到${item.poiName || '购电站'}`;
    else if (item.type === 'user') title = `已定位到${item.poiName || '用电用户'}`;
    else if (item.type === 'driver') title = `已定位到${item.driverName || '司机'}`;

    wx.showToast({
      title: title,
      icon: 'success',
      duration: 1200
    });
  },

  /**
   * 点击地图标记点
   */
  onMarkerTap(e) {
    const marker = this.data.markers.find(item => item.id === e.detail.markerId);
    if (marker) {
      this.setData({
        longitude: marker.longitude,
        latitude: marker.latitude,
        scale: 18
      });
    }
  },

  /**
   * 地图视野变化监听
   */
  onRegionChange(e) {
    if (e.type === 'end' && e.causedBy === 'drag') {
      this.setData({
        longitude: e.detail.centerLongitude,
        latitude: e.detail.centerLatitude,
        scale: e.detail.scale
      });
    }
  },

  /**
   * 查看详情
   */
  ondetails(e) {
    const item = e.currentTarget.dataset.item;
    console.log('查看详情:', item);

    // 根据类型跳转到不同详情页
    let url = '';
    if (item.type === 'car') {
      url = `/pages/car/index?id=${item.carId || item.id}&type=${item.type}`;
    } else if (item.type === 'station' || item.type === 'user') {
      url = `/pages/stationdetail/index?id=${item.addressId || item.id}&type=${item.type}`;
    } else if (item.type === 'driver') {
      url = `/pages/driverdetail/index?id=${item.operationId || item.id}&type=${item.type}`; // 新增司机详情页
    }

    if (url) {
      wx.navigateTo({ url });
    } else {
      wx.showToast({
        title: '暂无详情页面',
        icon: 'none'
      });
    }
  },

  onUnload() {
    // 页面卸载时清理WebSocket监听
    wx.$off('wsMessage', this.handleWsMessage);
  }
});