左侧抽屉页面布局

<template>
  <div class="app-container">
    <!-- 主体布局 -->
    <div class="main-layout">
      <!-- 左侧抽屉 -->
      <div class="left-drawer" :class="{ 'drawer-closed': !isDrawerOpen }">
        <div class="group-item">
          <h3>GIS</h3>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="checkedData"
            @change="handleCheckedChange"
          >
            <ul class="device-list">
              <li v-for="(item, index) in gisDevices" :key="item.code">
                <el-checkbox :label="item.code" :key="index">
                  <img :src="item.src" class="type-icon line-icon" />
                  {{ item.label }}</el-checkbox
                >
              </li>
            </ul>
          </el-checkbox-group>
        </div>
        <button class="toggle-btn" @click="toggleDrawer">
          <i
            :class="isDrawerOpen ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
          ></i>
        </button>
      </div>
      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 顶部工具栏（位于右侧内容顶部） -->
        <div class="top-toolbar">
          <div class="search-area">
            <input
              type="text"
              placeholder="搜索名称，结果展示"
              v-model="searchVal"
            />
            <el-button @click="handleSearch" plain type="primary"
              >搜索</el-button
            >
          </div>
        </div>

        <!-- 地图容器 -->
        <div class="map-container">
          <MainGis ref="mapContainer"></MainGis>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pointType } from "@/api/pc/pointtype";
import * as urls from '@/config/env'
export default {
  name: "DrawerLayout",
  dictTypes: ["pressure_range"],
  data() {
    return {
      isDrawerOpen: true, // 抽屉默认打开
      searchVal: "",
      onlineCount: 0,
      locationCount: 0,
      gisDevices: [],
      checkAll: false,
      isIndeterminate: false,
      checkedData: [],
      mapContainer: null,
      previousCheckedValues: [],
      // capabilitiesUrl:
      //   `${urls.geoserver.baseUrl}${urls.geoserver.wmsPath}?service=WMS&version=1.1.0&request=GetCapabilities`,
      capabilitiesUrl: `${urls.geoserver.wmsPath}?service=WMS&version=1.1.0&request=GetCapabilities`
    };
  },
  methods: {
    // 加载WMS图层
    async loadWmsLayer(item, type) {
      try {
        const mainGis = this.$refs.mapContainer;
        // 调用地图组件的加载WMS图层方法
        let wmsLayerConfig = {};
        if (type == "point") {
          wmsLayerConfig = {
            layers: "seos:gas_" + item.code + "_" + type,
            id: item.code,
          };
        } else if (type == "line") {
          wmsLayerConfig = {
            layers: "seos:gas_" + item.code + "_" + type,
            id: item.code,
          };
          let scopeConfig = {
            layers: "seos:" + item.code + "_gas_warn_scope_polygon",
            id: item.code + "_scope",
          };
          await mainGis.addCustomWmsLayer(scopeConfig);
          let controlConfig = {
            layers: "seos:" + item.code + "_gas_control_scope_polygon",
            id: item.code + "_control",
          };
          await mainGis.addCustomWmsLayer(controlConfig);
        }
        await mainGis.addCustomWmsLayer(wmsLayerConfig);
        console.log("WMS图层加载成功");
      } catch (error) {
        console.error("加载WMS图层失败:", error);
      }
    },
    getPointList() {
      pointType({ ObjectType: "POINT" }).then((res) => {
        let pressure_range = this.dict.type.pressure_range;
        pressure_range.forEach((item, index) => {
          item.src = require("@/styles/images/pc/" +
            item.raw.description.split(",")[0] +
            ".png"); // 基于value或索引
          item.type = "line";
          item.code = item["value"];
        });
        res.data.forEach((item, index) => {
          item.src = require("@/styles/images/pc/" + item.code + ".png"); // 基于value或索引
          item.type = "point";
        });
        this.gisDevices = [...pressure_range, ...res.data];
        this.checkAll = true;
        this.handleCheckAllChange(true);
        console.log(this.$refs.mapContainer.getAllLayers());
        this.previousCheckedValues = this.gisDevices.map((item) => item.code);
      });
    },
    handleCheckedChange(ivalue) {
      if (!this.previousCheckedValues) {
        this.previousCheckedValues = [];
      }
      const mainGis = this.$refs.mapContainer;
      const removedItems = this.previousCheckedValues.filter(
        (item) => !ivalue.includes(item)
      );
      const addedItems = ivalue.filter(
        (item) => !this.previousCheckedValues.includes(item)
      );
      console.log("被取消的选项: ", removedItems);
      console.log("新增的选项: ", addedItems);

      // 处理被取消的图层（隐藏对应的图层）
      if (removedItems.length > 0) {
        // 根据被取消的ID找到对应的设备项
        const removedDevices = this.gisDevices.filter((device) =>
          removedItems.includes(device.code)
        );
        // 隐藏对应的图层
        removedDevices.forEach((item) => {
          if (mainGis && mainGis.hideWmsLayer) {
            if (item.type == "line") {
              mainGis.toggleLayerVisibility(
                item.code + "_gas_control_scope_polygon",
                false
              );
              mainGis.toggleLayerVisibility(
                item.code + "_gas_warn_scope_polygon",
                false
              );
              mainGis.toggleLayerVisibility(
                "gas_" + item.code + "_line",
                false
              );
            } else {
              mainGis.toggleLayerVisibility(
                "gas_" + item.code + "_point",
                false
              );
            }
          }
        });
      }
      // 处理新增的图层（加载对应的图层）
      if (addedItems.length > 0) {
        const addedDevices = this.gisDevices.filter((device) =>
          addedItems.includes(device.code)
        );
        addedDevices.forEach((item) => {
          if (item.type == "line") {
            mainGis.toggleLayerVisibility(
              item.code + "_gas_control_scope_polygon",
              true
            );
            mainGis.toggleLayerVisibility(
              item.code + "_gas_warn_scope_polygon",
              true
            );
            mainGis.toggleLayerVisibility("gas_" + item.code + "_line", true);
          } else {
            mainGis.toggleLayerVisibility("gas_" + item.code + "_point", true);
          }
        });
      }
      let checkedCount = ivalue.length;
      this.checkAll = checkedCount === this.gisDevices.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.gisDevices.length;
      this.previousCheckedValues = [...ivalue];
    },
    handleCheckAllChange(val) {
      let that = this;
      that.$nextTick(() => {
        that.checkedData = val ? that.gisDevices.map((item) => item.code) : [];
        that.isIndeterminate = false;
        this.$refs.mapContainer.setAllLayersVisibility(val);
      });
    },
    toggleDrawer() {
      this.isDrawerOpen = !this.isDrawerOpen;
    },

    handleSearch() {
      console.log("搜索关键词：", this.searchVal);
    },
  },
  mounted() {
    this.getPointList();
    this.$nextTick(() => {
      console.log(' this.capabilitiesUrl: ',  this.capabilitiesUrl);
      this.$refs.mapContainer.loadWMSTLayersFromCapabilities(
        this.capabilitiesUrl
      );
    });
  },
};
</script>

<style scoped lang="scss">
/* 主体布局样式 */
.main-layout {
  display: flex;
  height: 100vh;
  position: relative;
}

/* 左侧抽屉样式 */
.left-drawer {
  width: 280px;
  background-color: #2c3e50;
  color: #fff;
  transition: width 0.3s ease;
  height: calc(100vh -180px);
  position: relative;
}

.drawer-closed {
  width: 30px;
}

.group-item {
  padding: 15px 0;
  padding-left: 30px;
  border-bottom: 1px solid #34495e;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.group-item h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: bold;
}

.device-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.device-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
  ::v-deep .el-checkbox {
    display: flex;
    align-items: center;
    width: 100%;
    .el-checkbox__label {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 16px;
      color: #fff;
      img {
        width: auto;
        max-width: 100px;
        height: 30px;
        margin-right: 8px;
      }
    }
  }
}

.device-list i {
  margin-right: 10px;
  font-size: 18px;
}

.device-list input[type="checkbox"] {
  margin-left: auto;
}

/* 右侧内容样式 */
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
  height: calc(100vh - 180px);
}

/* 顶部工具栏样式（位于右侧内容顶部） */
.top-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  color: #fff;
  box-sizing: border-box;
  background-color: #2c3e50;
}

.search-area {
  input {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    margin-right: 8px;
  }
}

// .search-area button {
//   padding: 6px 12px;
//   // background-color: #3498db;
//   color: #fff;
//   border: none;
//   border-radius: 4px;
//   cursor: pointer;
// }

.info-area span {
  margin-left: 15px;
  font-size: 14px;
}

/* 地图容器样式 */
.map-container {
  flex: 1;
  background-color: #f5f5f5;
  height: calc(100vh - 230px);
}

/* 右下角开关按钮样式 */
.toggle-btn {
  position: absolute;
  bottom: 140px;
  right: 0px;
  //   left: 40px; /* 抽屉闭合时与抽屉对齐 */gGIS
  width: 30px;
  height: 30px;
  background-color: unset;
  color: #fff;
  border: none;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 10;
  i {
    background: unset;
  }
}
</style>