<!--
 * @Author: ysh
 * @Date: 2024-06-21 18:51:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-01 17:05:09
-->
<template>
  <div class="warpper-container">
    <!-- 地图 -->
    <div class="map-container" id="maps" tabindex="0"></div>
    <!-- 鼠标移动坐标 -->
    <div id="mouse-position"></div>
    <!-- 工具栏列表 -->
    <div class="tool-box">
      <div class="item">
        <el-tooltip effect="dark" content="视角复位" placement="right">
          <div class="view" @click="resetView()"></div>
        </el-tooltip>
      </div>
      <div class="item">
        <el-tooltip effect="dark" content="图层" placement="right">
          <div class="layers" @click="layersOpen = !layersOpen"></div>
        </el-tooltip>
      </div>
      <div class="item">
        <el-tooltip effect="dark" content="矩形框选" placement="right">
          <div class="select" @click="rectSelect()"></div>
        </el-tooltip>
      </div>
      <div class="item">
        <el-tooltip effect="dark" content="多边形框选" placement="right">
          <div class="selectM" @click="polygonSelect()"></div>
        </el-tooltip>
      </div>
    </div>
    <!-- 项目信息弹出框 -->
    <div id="popup" class="ol-popup">
      <span id="popup-closer" class="ol-popup-closer" @click="closePopup"></span>
      <div id="popup-content">
        <el-descriptions :column="1" border v-if="clickFeacture.type == 'projectPoint'">
          <el-descriptions-item label="项目编号" width="130px">
            {{ clickFeacture.projectNumber }}
          </el-descriptions-item>
          <el-descriptions-item label="项目名称" width="130px">
            {{ clickFeacture.projectName }}
          </el-descriptions-item>
          <el-descriptions-item label="项目负责人" width="130px">
            {{ getUserName(clickFeacture.projectLeader) }}
          </el-descriptions-item>
          <el-descriptions-item label="存放地址" width="130px">
            {{ clickFeacture.storageAddress == '' || clickFeacture.storageAddress == null ? '暂无' :
            clickFeacture.storageAddress }}
          </el-descriptions-item>
        </el-descriptions>

        <div v-if="clickFeacture.type == 'featurePoint'">
          <div class="title">项目编号:{{ clickFeacture.projectNumber }}</div>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="名称" width="130px">
              <!-- {{ clickFeacture.selectFeatures.values_.name }} -->
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="look-achi" @click="" v-if="clickFeacture.type == 'projectPoint'">成果目录>></div>
    </div>
    <!-- 项目目录 -->
    <div class="right-project" :class="{ closeProBox: isOpenPro }">
      <div class="result-click" @click="isOpenPro = !isOpenPro">
        <i class="el-icon-d-arrow-left" v-if="isOpenPro"></i>
        <i class="el-icon-d-arrow-right" v-if="!isOpenPro"></i>
      </div>
      <div class="right-content">
        <div class="header">项目列表</div>
        <!-- 搜索栏 -->
        <div class="search-box">
          <el-input v-model="searchVal" placeholder="请输入......" @keyup.enter="queryProject">
            <template #prepend>
              <el-select v-model="searchType" placeholder="请选择" style="width: 125px">
                <el-option label="按项目编号" value="1" />
                <el-option label="按项目名称" value="2" />
                <el-option label="按项目类别" value="3" />
              </el-select>
            </template>
            <template #append>
              <el-button icon="el-icon-search" @click="queryProject" />
            </template>
          </el-input>
        </div>
        <el-divider />
        <!-- 项目数据 -->
        <div class="pro-catalogue" v-loading="loading">
          <el-table ref="myTable" :data="projectList" :height="tableHeight" border style="width: 100%;"
            :row-class-name="tableRowClassName" @row-click="handleRowClick">
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="expand-info">
                  <el-descriptions :column="2">
                    <el-descriptions-item label="存放地址：" class="desLabel" :span="2">
                      {{ props.row.storageAddress == '' || props.row.storageAddress == undefined ? '暂无' :
            props.row.storageAddress
                      }}
                    </el-descriptions-item>
                    <el-descriptions-item label="甲方单位：" class="desLabel" :span="2">{{ props.row.partyA.partyAName == ''
            ? '暂无' :
            props.row.partyA.partyAName
                      }}</el-descriptions-item>
                    <el-descriptions-item label="联系人：" class="desLabel">{{ props.row.contactPerson == '' ? '暂无' :
            props.row.contactPerson
                      }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话：" class="desLabel">{{ props.row.telephone == '' ? '暂无' :
            props.row.telephone
                      }}</el-descriptions-item>
                    <el-descriptions-item label="项目类型：" class="desLabel">{{ props.row.projectType == '' ? '暂无' :
            props.row.projectType
                      }}</el-descriptions-item>
                    <el-descriptions-item label="技术负责人：" class="desLabel">{{ props.row.technicalDirector == '' ? '暂无'
            :
            getUserName(props.row.technicalDirector)
                      }}</el-descriptions-item>
                    <el-descriptions-item label="技术设计人：" class="desLabel">{{ props.row.techinicalDesigner == '' ? '暂无'
            :
            getUserName(props.row.techinicalDesigner)
                      }}</el-descriptions-item>
                    <el-descriptions-item label="承担部门：" class="desLabel">{{ props.row.undertakingSector == '' ? '暂无' :
            props.row.undertakingSector
                      }}</el-descriptions-item>
                    <el-descriptions-item label="质量检察员：" class="desLabel">{{ props.row.qualityInspector == '' ? '暂无' :
            getUserNames(props.row.qualityInspector)
                      }}</el-descriptions-item>
                    <el-descriptions-item label="项目登记时间：" class="desLabel" :span="2">{{ props.row.registrationDate ==
            '' ? '暂无' :
            props.row.registrationDate
                      }}</el-descriptions-item>
                    <el-descriptions-item label="项目登记人：" class="desLabel">{{ props.row.projectRegistrant == '' ? '暂无'
            :
            getUserName(props.row.projectRegistrant)
                      }}</el-descriptions-item>
                    <el-descriptions-item label="进场时间：" class="desLabel">{{ props.row.approachTime == '' ? '暂无' :
            props.row.approachTime
                      }}</el-descriptions-item>
                    <el-descriptions-item label="撤场时间：" class="desLabel">{{ props.row.withdrawalTime == '' ? '暂无' :
            props.row.withdrawalTime
                      }}</el-descriptions-item>
                    <el-descriptions-item label="项目要求完成时间：" class="desLabel">{{ props.row.requiredCompletionDate == ''
            ? '暂无' :
            props.row.requiredCompletionDate
                      }}</el-descriptions-item>
                  </el-descriptions>
                  <div class="look-achi" @click="lookThisAchi(props.row)">
                    查看成果>>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="kml范围" width="95" align="center" :formatter="formatterKmlurl" />
            <el-table-column prop="projectNumber" label="项目编号" width="95" align="center" />
            <el-table-column prop="projectName" label="项目名称" width="180" align="center" />
            <el-table-column prop="projectLeader" label="负责人" align="center">
              <template slot-scope="scope">
                {{ getUserName(scope.row.projectLeader) }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @current-change="handleCurrentChange" :current-page.sync="queryParams.pageNum"
            :page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="total">
          </el-pagination>
          <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getProjectList" /> -->
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import { Tianditu, ZhongKe, ArcGISBlue, Autonavi, google, terrain, vect } from '@/utils/maps'
import { listProject, getProject } from '@/api/oa/project/project'
import infoBox from './index/infoBox.vue';
import sjxActive from '@/assets/images/gis/sjd.png';
// ---------------------------------ol引用------------------------------------------------
import 'ol/ol.css'
import { Map, View } from 'ol';
// import XYZ from 'ol/source/XYZ';
// import VectorSource from 'ol/source/Vector';
import KML from 'ol/format/KML';
import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature';
import { toLonLat } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
// import Draw from 'ol/interaction/Draw';
import { createBox } from 'ol/interaction/Draw';
import { Select, DragBox, Draw } from "ol/interaction";
import { platformModifierKeyOnly, never } from 'ol/events/condition';
import VectorLayer from 'ol/layer/Vector';
import { boundingExtent } from 'ol/extent';
import { Cluster, Vector as VectorSource, XYZ } from 'ol/source';
import { Point, Polygon, MultiPolygon, MultiLineString } from 'ol/geom';
import { toStringXY, createStringXY, toStringHDMS } from 'ol/coordinate';
import { Circle, Fill, Stroke, Style, RegularShape, Icon, Text } from 'ol/style';
import { MousePosition, ScaleLine, defaults as defaultControls } from 'ol/control';
export default {
  components: { infoBox },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      map: {},
      control: null,
      view: null,
      select: null,
      popup: null,
      clusters: null,
      drawBox: null,

      isDrawing: false,
      viewCenter: [105.55, 34.18],
      layersOpen: false,
      isOpenPro: false, //项目列表是否展开
      searchVal: '',
      searchType: '',
      projectList: [],
      allproTableData: [],
      total: 0,
      loading: true,
      tableHeight: 0,
      clickFeacture: {},
      clickDatas: {
        selectFeatures: null,
        selectProjectNumber: "",
        type: '',
      },
      seletctedCluters: []
    }
  },
  mounted() {
    this.setTableDomHeight();
    this.initMap();
    this.observer();
    this.getProjectList();
  },
  methods: {
    // 设置侧边项目目录的高度
    setTableDomHeight() {
      let dom = document.querySelector('.right-project');
      dom.style.height = window.innerHeight - 110 + 'px'; //减去110为页头的高度
      let height = dom.offsetHeight - 28 + 25 - 179 //表格的高度，减去表头179，边距25，以及页码28
      this.resetHeight().then(() => {
        this.tableHeight = height
      })
    },
    resetHeight() {
      return new Promise((resolve, rehect) => {
        this.tableHeight = 0;
        resolve()
      })
    },
    // 初始化地图
    initMap() {
      this.view = new View({
        projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
        center: this.viewCenter, // 中心点
        zoom: 5, // // 地图缩放级别(打开页面时默认级别)
        maxZoom: 20,
        minZoom: 1,  // 地图缩放最小级别
      })
      this.popup = new Overlay({
        element: document.getElementById('popup'),
        autoPan: {
          animation: {
            duration: 250,
          },
        },
      })
      this.control = new MousePosition({
        coordinateFormat: this.formatCoordinate(4),
        projection: 'EPSG:4326',
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
      });
      this.map = new Map({
        target: 'maps',
        controls: defaultControls().extend([this.control]),
        layers: [
          Autonavi, Tianditu, ZhongKe,
          new TileLayer({//标注
            source: new XYZ({
              url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
            }),
            properties: {
              name: '标注'
            },
          }),
        ],
        view: this.view,
      })
      this.map.addOverlay(this.popup);
      this.mapClick(this.map, this.popup);
      // this.clickFeacturePopInfo();
      this.addKeyDownFun()
    },
    observer() {
      let that = this;
      // 选择需要观察变动的节点
      const targetNode = document.querySelector('.sidebar-container');
      // 观察器的配置（需要观察什么变动）
      const config = { attributes: true, childList: true, subtree: true }
      // 当观察到变动时执行的回调函数
      const callback = function (mutationsList, observer) {
        for (let mutation of mutationsList) {
          if (mutation.type === 'childList') {
          } else if (mutation.type === 'attributes') {
            that.map.updateSize();
          }
        }
      }
      // 创建一个观察器实例并传入回调函数
      const observer = new MutationObserver(callback);
      // 以上述配置开始观察目标节点
      observer.observe(targetNode, config);
    },
    addKeyDownFun() {
      // 添加键盘事件监听器  
      window.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') { // 检查是否按下了 ESC 键  
          // 停止当前的绘制（或清除框选）  
          if (this.drawBox && this.drawBox.getActive()) {
            this.drawBox.finishDrawing(); // 如果有正在进行的绘制，结束它  
            // 如果需要清除之前的绘制结果，可以在这里添加逻辑  
            this.map.removeInteraction(this.drawBox);
          }
        }
      });
    },
    // 地图点击事件
    mapClick(map, popup) {
      let that = this;
      map.on('singleclick', function (evt) {
        if (!that.isDrawing) {
          const coordinate = evt.coordinate;
          let features = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
            // 如果只需要知道有特征，而不关心具体是哪个，这里可以返回 true  
            // OpenLayers 会继续查找更多特征，但我们不需要  
            return true;
          });

          // features 现在是一个数组，包含了在点击像素位置找到的所有特征  
          if (features && features.length > 0) {
            // 如果只有一个特征  
            if (features.length === 1) {
              let feature = features[0]; // 直接从数组中取第一个特征  
              let num = feature.get('name'); // 使用 get 方法来获取属性  
              let projectId = feature.get('projectId');

              // 假设 getProject 是一个返回 Promise 的函数  
              getProject(projectId).then(res => {
                if (res.data) {
                  // 假设 this 在这里指向 Vue 组件实例或其他上下文  
                  that.clickFeature = res.data;
                  that.clickFeature.type = 'projectPoint';
                  popup.setPosition(coordinate);
                }
              })
            } else {
              // 如果有多个特征，这里可以根据需要处理  
              popup.setPosition(undefined);
            }
          } else {
            popup.setPosition(undefined);
          }


          that.clusters.getFeatures(evt.pixel).then((clickedFeatures) => {
            if (clickedFeatures.length) {
              // Get clustered Coordinates
              const features = clickedFeatures[0].get('features');
              if (features.length > 1) {
                const extent = boundingExtent(
                  features.map((r) => r.getGeometry().getCoordinates())
                );
                that.map.getView().fit(extent, { duration: 1000, padding: [100, 100, 100, 100] });
              }
            }
          });
        }
      })
    },
    clickFeacturePopInfo() {
      let that = this;
      if (that.select !== null) {
        that.map.removeInteraction(that.select);
      }
      that.select = new Select({
        style: this.selectedStyle
      })
      if (that.select !== null) {
        that.map.addInteraction(that.select);
        that.select.on('select', function (e) {
          if (e.target.getFeatures().getArray().length == 1) {
            that.clickFeacture = e.target.getFeatures().getArray()[0];
            let properties = that.clickFeacture.getProperties();
            if (!properties.features) {
              let fatherLayers = e.target.featureLayerAssociation_;
              // for (let layers in fatherLayers) {
              //   datas.selectProjectNumber = fatherLayers[layers].values_.title;
              // }
              let coordinate = e.mapBrowserEvent.coordinate;
              that.popup.setPosition(coordinate);
              that.clickFeacture.type = 'featurePoint';
            }
          }
        })
      }
    },
    /* 关闭信息框 */
    closePopup() {
      this.popup.setPosition(undefined);
    },
    openAchiList() {

    },
    formatCoordinate(fractionDigits) {
      return (
        /**
         * @param {Coordinate} coordinate Coordinate.
         * @return {string} String XY.
         */
        function (coordinate) {
          return '经纬度：' + toStringXY(coordinate, fractionDigits);
        }
      );
    },
    resetView() {
      this.map.getView().setCenter(this.viewCenter);
      this.map.getView().setZoom(5)
    },
    rectSelect() {
      let that = this;
      that.select = new Select({
        condition: never,
        style: that.selectedStyle
      });
      // 创建框选图层
      let drawLayer = new VectorLayer({
        source: new VectorSource(),
      });
      // 创建绘制工具
      that.drawBox = new Draw({
        source: drawLayer.getSource(),
        type: 'Circle',
        geometryFunction: createBox()
      });
      that.drawBox.on('drawstart', function () {
        that.seletctedCluters = [];
        that.select.getFeatures().clear();
        that.isDrawing = true;
        // drawLayer.getSource().clear();
      });
      // 结束绘制
      that.drawBox.on('drawend', function (e) {
        if (e.feature) {
          // 获取框选范围
          let geometry = e.feature.getGeometry();
          let extent = geometry.getExtent();
          // 查询框选范围内的所有点
          that.getLayerByName('clusters').getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
            that.select.getFeatures().push(feature);
          });
          // 遍历被选中的要素
          let selected = [];
          let selectedFeatures = that.select.getFeatures();
          for (let i = 0; i < selectedFeatures.getLength(); i++) {
            let feature = selectedFeatures.item(i);
            feature = feature.values_.features;
            if (feature.length == 1) {
              let name = feature[0].name;
              selected.push(name);
            } else {
              for (let f of feature) {
                let name = f.name;
                selected.push(name);
              }
            }
            that.seletctedCluters = selected;
          }
        }
        that.isDrawing = false;
      })
      that.map.addInteraction(that.select);
      that.map.addInteraction(that.drawBox);
    },
    polygonSelect() {

    },
    /* 通过图层名称获取图层 */
    getLayerByName(name) {
      let allLayers = this.map.getLayers().getArray();
      let layer = undefined;
      if (allLayers.length) {
        for (let i = 0; i < allLayers.length; i++) {
          if (allLayers[i].get('name') === name) {
            layer = allLayers[i];
            break;
          }
        }
      }
      return layer;
    },
    getProjectList() {
      this.loading = true
      listProject(this.queryParams).then(res => {
        let data = res.rows;
        this.total = res.total;
        this.projectList = data;
        this.allproTableData = data;
        this.loading = false
        this.addProjectCluster(data);
      })
    },
    /* 格式化表格显示 */
    formatterKmlurl(row, cloumn) {
      if (row.projectKml == "" || row.projectKml == null) {
        return "无";
      } else {
        return "有";
      }
    },
    // 添加项目点在地图上
    addProjectCluster(data) {
      let features = [], projectPoints = []
      for (let d of data) {
        if (d.kmlLat && d.kmlLng) {
          let f = new Feature(new Point([Number(d.kmlLng), Number(d.kmlLat)]));
          f.name = d.projectNumber;
          f.projectId = d.projectId;
          features.push(f);
          projectPoints.push(d);
        }
      }
      let source = new VectorSource({
        features: features,
      });
      let clusterSource = new Cluster({
        distance: 100,     //群集之间的最小距离（以像素为单位）。
        source: source,	   //数据源
      });
      this.clusters = new VectorLayer({
        name: 'clusters',
        source: clusterSource,
        style: this.clusterStyle,
        zIndex: 99
      })
      this.map.addLayer(this.clusters);
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getProjectList()
    },
    /* 得到项目的点位绘制到地图上 */
    clusterStyle(feature, resolution) {
      let styleCache = {};
      const size = feature.get('features').length;
      let style = styleCache[size];
      if (!style) {
        style = [
          new Style({
            image: new Circle({
              radius: 20,
              fill: new Fill({
                color: 'rgba(107,72,255,0.4)',
              }),
            }),
            text: new Text({
              text: this.getText(feature, resolution),
              backgroundFill: new Fill({
                color: '#000',
              }),
              fill: new Fill({
                color: '#fff',
              }),
              backgroundStroke: new Stroke({
                color: '#EFDC05',
                width: 2,
              }),
              padding: [0, 5, 0, 5],
              // stroke: new Stroke({
              //   color: 'rgba(0, 0, 0, 0.6)',
              //   width: 3,
              // }),
              font: '18px Calibri,sans-serif',
              offsetY: -30
            })
          }),
          new Style({
            image: new Circle({
              radius: 14,
              fill: new Fill({
                color: 'rgba(107,72,255,0.9)',
              }),
            }),
            text: new Text({
              text: size.toString(),
              fill: new Fill({
                color: '#fff',
              }),
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.6)',
                width: 3,
              }),
            })
          })
        ];
        styleCache[size] = style;
      }
      return style;
    },
    /* 被选中的样式 */
    selectedStyle(feature, resolution) {
      let styleCache = {};
      let f = feature.get('features');
      if (f) {
        const size = feature.get('features').length;
        let style = styleCache[size];
        if (!style) {
          style = [
            new Style({
              image: new Circle({
                radius: 20,
                fill: new Fill({
                  color: 'rgba(255,0,0,0.4)',
                }),
              }),
              text: new Text({
                text: this.getText(feature, resolution),
                fill: new Fill({
                  color: '#fff',
                }),
                stroke: new Stroke({
                  color: 'rgba(0, 0, 0, 0.6)',
                  width: 3,
                }),
                font: '18px Calibri,sans-serif',
                offsetY: -30
              })
            }),
            new Style({
              image: new Circle({
                radius: 14,
                fill: new Fill({
                  color: 'rgba(255,0,0,0.9)',
                }),
              }),
              text: new Text({
                text: size.toString(),
                fill: new Fill({
                  color: '#fff',
                }),
                stroke: new Stroke({
                  color: 'rgba(0, 0, 0, 0.6)',
                  width: 3,
                }),
              })
            })
          ];
          styleCache[size] = style;
        }
        return style;
      } else {
        let style = new Style({
          // fill: new Fill({
          //   color: [75, 126, 255, 0.6]
          // }),
          stroke: new Stroke({
            width: 2,
            color: '#FFFFFF',
            lineDash: [8, 4],
            lineCap: 'butt'
          }),
          image: new Icon({
            src: sjxActive,
            crossOrigin: 'anonymous',
          })
        })
        return style
      }
    },
    getText(feature, resolution) {
      let features = feature.values_.features;
      let reo = resolution * 100;
      let text;
      if (reo > 2) {
        text = '';
      } else {
        if (features.length == 1) {
          text = features[0].name;
        }
      }
      return text;
    },
    queryProject() {
      let type = this.searchType;
      let param;
      if (type == "1") {
        param = {
          pageNum: 1,
          pageSize: 9999999,
          projectNumber: this.searchVal
        }
      } else if (type == "2") {
        param = {
          pageNum: 1,
          pageSize: 9999999,
          projectName: this.searchVal
        }
      } else if (type == "3") {
        param = {
          pageNum: 1,
          pageSize: 9999999,
          projectType: this.searchVal
        }
      }
      listProject(param).then(res => {
        let data = res.rows;
        let datas = [];
        for (let d of data) {
          if (d.kmlLat && d.kmlLng) {
            datas.push(d);
          }
        }
        this.projectList = data;
      })
    },
    tableRowClassName() {

    },
    handleRowClick() {

    }
  },
}
</script>

<style lang="scss" scoped>
.warpper-container {
  position: relative;
}

.map-container {
  width: 100%;
  height: calc(100vh - 84px);
}

/* 鼠标移动，坐标样式 */
#mouse-position {
  width: 220px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
  padding-left: 15px;
  color: #fff;
}

.tool-box {
  position: absolute;
  top: 60px;
  left: 8px;
  width: 50px;
  border-radius: 5px;
  // background-color: #fff;

  .item {
    margin-top: 10px;
    width: 40px;
    height: 40px;
    padding: 6px;
    background-color: rgba($color: #000000, $alpha: 0.5);
    border-radius: 50%;
    cursor: pointer;
  }

  .view {
    width: 100%;
    height: 100%;
    background: url('~@/assets/images/gis/home.png') no-repeat;
    background-size: contain;
  }

  .layers {
    width: 100%;
    height: 100%;
    background: url('~@/assets/images/gis/layers.png') no-repeat;
    background-size: contain;
  }

  .select {
    width: 100%;
    height: 100%;
    background: url('~@/assets/images/gis/select.png') no-repeat;
    background-size: contain;
  }

  .selectM {
    width: 100%;
    height: 100%;
    background: url('~@/assets/images/gis/selectM.png') no-repeat;
    background-size: contain;
  }
}

.right-project {
  width: 500px;
  // min-height: 600px;
  max-height: calc(100vh - 110px);
  padding: 10px;
  position: absolute;
  top: 10px;
  right: 0;
  background-color: #fff;
  box-shadow: v-bind(--el - box - shadow - dark);
  transition: all 0.6s ease-in-out;

  .header {
    width: 100%;
    text-align: center;
    line-height: 50px;
    font-size: 22px;
    font-weight: 700;
  }

  .expand-info {
    .desLabel {
      font-weight: bold;
    }

    .look-achi {
      text-align: right;
      color: #409EFF;
      cursor: pointer;
    }

    .look-achi:hover {
      color: #1165b8;
    }
  }

  .result-click {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 0;
    left: -36px;
    font-size: 16px;
    transform: translate(0, 0);
    background-color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
  }

  .search-box {
    padding: 0px 15px;
  }
}

.closeProBox {
  right: -500px;
}

// 弹出框
.ol-popup {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 25px;
  border-radius: 10px;
  // border: 1px solid #cccccc;
  bottom: 17px;
  left: -168px;
  min-width: 361px;

  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }

  .ol-popup-closer:after {
    content: "✖";
    cursor: pointer;
  }

  .ol-popup-closer:hover:after {
    color: #409EFF;
  }


  .look-achi {
    text-align: right;
    color: #409EFF;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    font-family: '微软雅黑';
  }

  .title {
    font-size: 14px;
    font-family: 'Times New Roman', '黑体', Times, serif, ;
  }
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: #fff;
  border-width: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #fff;
  border-width: 11px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: -11px;
}
</style>