castgroup_bigscreen/src/components/amapPow.vue

<!--
 * @Description: 
 * @Author: wangcc
 * @Date: 2022-10-19 09:32:46
 * @LastEditors: wangcc
 * @LastEditTime: 2023-06-21 17:41:51
 * @FilePath: \castgroup_bigscreen\src\components\amapPow.vue
 * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
-->
<template>
  <div class="map-wrap">
    <div id="container" tabindex="0"></div>

    <div id="mask"></div>
    <div class="yun-wrap">
      <img class="yun yun1" src="../assets/img/云1.png" alt />
    </div>
    <div class="yun-wrap">
      <img class="yun yun2" src="../assets/img/云2.png" alt />
    </div>
    <div class="yun-wrap">
      <img class="yun yun3" src="../assets/img/云3.png" alt />
    </div>
    <el-dialog title="查看图片" :modal="false" :visible.sync="imgDialogVisible" width="40%">
      <img width="100%" style="height:580px" :src="dialogImageUrl" alt />
    </el-dialog>
    <div id="dialog-mask" v-if="guanHuVisionLog" class="guanHu-back">
      <div class="close-item" @click="closeLog"></div>
      <div class="item-box" v-if="maintRecordData">
        <div class="item-box-list">
          <div class="item-box-list-title">
            <i class="icon-item"></i>
            <span>管护内容</span>
          </div>
          <div class="item-content">
            <div
              class="content-label"
              v-for="(guanHu,index) in maintRecordData.manageList"
              :key="index"
            >
              <p>
                管护类型：
                <span v-if="guanHu.manageType == 1">施肥</span>
                <span v-if="guanHu.manageType == 2">除草</span>
                <span v-if="guanHu.manageType == 3">采摘果实</span>
                <span v-if="guanHu.manageType == 4">采摘叶子</span>
              </p>
              <p v-if="guanHu.manageType == 1">施肥面积：{{guanHu.num}}{{guanHu.unitName}}</p>
              <p v-if="guanHu.manageType == 2">除草面积：{{guanHu.num}}{{guanHu.unitName}}</p>
              <p
                v-if="guanHu.manageType == 3 || guanHu.manageType == 4"
              >采摘面积：{{guanHu.num}}{{guanHu.unitName}}</p>
            </div>
            <div class="content-label">
              <label for>管护图片：</label>
              <div class="imgs-list" v-viewer>
                <img
                  :src="imgs"
                  alt
                  v-for="(imgs,index) in maintRecordData.imagesList"
                  :key="index"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="item-box-list" style="margin-top:24px">
          <div class="item-box-list-title">
            <i class="icon-item"></i>
            <span>物资使用情况</span>
          </div>
          <div class="item-content">
            <div v-for="(agri,index) in maintRecordData.agriList" :key="index">
              <div class="content-label">
                <p>物资名称：{{agri.materialName}}/{{agri.materialBrandName}}/{{agri.specs}}</p>
              </div>
              <div class="content-label">
                <p>使用数量：{{agri.num}}{{agri.unitName}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box-list" style="margin-top:24px">
          <div class="item-box-list-title">
            <i class="icon-item"></i>
            <span>其他信息</span>
          </div>
          <div class="item-content">
            <div class="content-label">
              <p>管护人次：{{maintRecordData.peopleNum}}人/次</p>
              <p>登记时间:{{maintRecordData.createTime}}</p>
            </div>
            <div class="content-label">
              <label for>站队图片：</label>
              <div class="imgs-list" v-viewer>
                <img
                  :src="people"
                  v-for="(people,index) in maintRecordData.peopleImagesList"
                  :key="index"
                  alt
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>暂无信息</div>
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { mapMutations, mapState, mapGetters } from 'vuex';
import {
  smallClassMap,
  smallClassMapFile,
  rightScrollData,
  forestSample,
  alarmDataApi,
  financeBasePlant,
  basePlantList,
  financeBaseDetail,
  farmInfo,
  smallClassDetail,
  treePlant,
  projectList,
  getProjectIcon,
  maintRecordLatest
} from '@/service/index.js';
import axios from 'axios';
export default {
  name: 'Mapview',
  data() {
    return {
      imgDialogVisible: false,
      guanHuVisionLog: false,
      dialogImageUrl: null,
      AMap: null,
      map: null,
      lngLat: [106.628201, 26.646694],
      adName: '贵州省',
      mapLevel: 'province',
      adcode: '贵州省',
      parentId: '520000',
      province: '',
      zoom: 8,
      districtExplorer: null,
      tipMarker: null,
      $tipMarkerContent: null,
      currentAreaNode: null,
      cityMarkerArr: [],
      eventMarker: null,
      baseMarker: null,
      streetMarkerArr: [],
      leftPage: 'forest',
      putPolygonData: [],
      //乡镇边界
      townPolygons: [],
      // 基地详情
      baseMarkers: [],
      // 小班详情
      smallMarkers: [],
      // 时间详情
      eventMarkers: [],
      // 林场
      treesMarkerArr: [],
      // 小班边界
      smallClassMapArr: [],
      // 作物
      economicsArr: [],
      // 基地定位
      baseMarkerArr: [],
      // 时间信息
      eventMarkersArr: [],
      // 样地、小班
      forestMarkerArr: [],
      // 样地号
      smallClassNArr: [],
      // 森林资源小班边界
      smallClassPolygonArr: [],
      // 林木结构小班边界
      treesPolygonArr: [],
      // 项目列表
      projectMarkerArr: [],
      treeCompMarkers: [],
      townPolygonArr: [],
      economicsArr: [],
      selectData: {},
      districtData: {},
      streetData: {},
      // 项目小班数
      projectSmallClassArr: [],
      // 项目小班边界
      smallClassProject: [],
      // 项目小班红点转边界图
      projectPolygonArr: [],
      projectIcon:
        'http://miniores.hw.hongweisoft.com/mintou/1667460231789_a06fed1519c5e3d206e4ab9148d658e5.png',
      smallId: '',
      maintRecordData: {}
      // projectIcon: ''
    };
  },
  watch: {
    '$store.state.addr.parentId': {
      handler(val) {
        // 加载小班边界
        // this.getSmallClass();
        this.parentId = val;
        if (this.$store.state.addr.mapLevel == 'street') {
          this.parentId = val.substring(0, 6);
          if (this.map) {
            this.switch2AreaNode(
              this.parentId,
              this.$store.state.addr.mapLevel,
              this.$store.state.addr.selectCity,
              this.leftPage
            );
          }
        }
        if (this.$store.state.addr.mapLevel == 'province') {
          if (this.projectSmallClassArr) {
            this.map.remove(this.projectSmallClassArr);
          }
        }
        if (this.$store.state.addr.mapLevel != 'street') {
          this.selectData = this.$store.state.addr.selectCity;
          this.districtData = this.$store.state.addr.selectDistrict;
          this.streetData = this.$store.state.addr.selectStreet;
          if (this.map) {
            this.switch2AreaNode(
              this.parentId,
              this.$store.state.addr.mapLevel,
              this.$store.state.addr.selectCity,
              this.leftPage
            );
          }
          if (this.townPolygonArr) {
            this.map.remove(this.townPolygonArr);
          }
          if (
            this.polygon ||
            this.streetMarkerArr ||
            this.townPolygons ||
            this.forestMarkerArr ||
            this.smallClassNArr ||
            this.forestMarkerArr ||
            this.townPolygonArr ||
            this.smallClassPolygonArr
          ) {
            this.map.remove(this.polygon);
            this.map.remove(this.streetMarkerArr);
            this.map.remove(this.townPolygons);
            this.map.remove(this.forestMarkerArr);
            this.map.remove(this.smallClassNArr);
            this.map.remove(this.forestMarkerArr);
            this.map.remove(this.townPolygonArr);
            this.map.remove(this.smallClassPolygonArr);
            this.townPolygons = [];
          }
        }
      }
    },
    '$store.state.addr.selectStreet'(val) {
      if (val.label && val.value && val.areaId) {
        let _this = this;
        let labelTown = val.label;
        if (labelTown == '水尾乡') {
          labelTown = '水尾水族乡';
        }
        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
          var placeSearch = new AMap.PlaceSearch({
            // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
            city: '贵州省'
          });
          placeSearch.search(labelTown, function (status, result) {
            // 查询成功时，result即对应匹配的POI信息
            if (status === 'complete') {
              let center = [
                result.poiList.pois[0].location.lng,
                result.poiList.pois[0].location.lat
              ];
              _this.map.setZoomAndCenter(12, center, false, 12);
            }
          });
        });
      }
    },
    '$store.state.addr.page': {
      handler(val) {
        this.leftPage = val;
        if (!this.parentId) {
          this.parentId = '520000';
          this.$store.state.addr.parentName = '贵州省';
        }
        if (this.parentId) {
          if (this.$store.state.addr.mapLevel == 'street') {
            // this.getSmallClass(val);
          }
        }
        this.mapPolygon();
        if (val == 'forest' || val == 'treeSpecies') {
          this.getProjectList();
        } else {
          this.map.remove(this.projectSmallClassArr);
        }

        if (val != 'forest') {
          this.map.remove(this.forestMarkerArr);
          this.map.remove(this.smallClassNArr);
          this.map.remove(this.smallClassPolygonArr);
          this.map.remove(this.projectMarkerArr);
          if (this.projectPolygonArr) {
            this.map.remove(this.projectPolygonArr);
          }
          if (this.smallMarkers) {
            this.map.remove(this.smallMarkers);
          }
        }
        if (val != 'treeSpecies') {
          this.map.remove(this.forestMarkerArr);
          this.map.remove(this.treesPolygonArr);
          this.map.remove(this.projectMarkerArr);
          if (this.treeCompMarkers) {
            this.map.remove(this.treeCompMarkers);
          }
          if (this.treesPolygonArr) {
            this.map.remove(this.treesPolygonArr);
          }
        }
        if (val != 'economics') {
          this.map.remove(this.economicsArr);
          this.map.remove(this.baseMarkerArr);
        }
        if (val != 'event') {
          this.map.remove(this.eventMarkersArr);
          if (this.eventMarkers) {
            this.map.remove(this.eventMarkers);
          }
        }
      }
    },
    '$store.state.addr.mapLevel': {
      handler(val) {
        if (val === 'street') {
          // this.getSmallClass();
        }
      }
    },
    '$store.state.addr.smallClassSearch': {
      deep: true,
      immediate: true,
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          console.log(val);
          this.smallId = val.id;
          if (val.longitude && val.latitude && !val.name) {
            this.map.remove(this.polygon);
            if (_this.smallMarkers) {
              _this.map.remove(_this.smallMarkers);
            }
            if (this.smallClassProject) {
              this.map.remove(this.smallClassProject);
            }
            this.setMapLabel(val);
            if (
              this.$store.state.addr.mapLevel == 'province' ||
              this.$store.state.addr.mapLevel == 'city' ||
              (this.$store.state.addr.mapLevel == 'district' &&
                this.$store.state.addr.selectCity.prop == '1')
            ) {
              if (val.countyCode) {
                // this.switch2AreaNode(val.countyCode.substring(0, 6));
                let selectCity = '';
                switch (val.cityName) {
                  case '黔西南州':
                    selectCity = '黔西南布依族苗族自治州';
                    break;
                  case '黔东南州':
                    selectCity = '黔东南苗族侗族自治州';
                    break;
                  case '黔南州':
                    selectCity = '黔南布依族苗族自治州';
                    break;
                }
                this.$store.dispatch('searchArea', {
                  parentId: val.cityCode.substring(0, 6),
                  name: selectCity,
                  mapLevel: 'city'
                });

                if (val.cityCode) {
                  this.changeSelectCity({
                    value: val.cityCode,
                    label: selectCity,
                    areaId: val.cityId,
                    prop: '2'
                  });
                }
                if (val.countyCode) {
                  this.changeSelectDistrict({
                    value: val.countyCode,
                    label: val.countyName,
                    areaId: val.countyId,
                    prop: '2'
                  });
                }
              }
            } else {
              this.switch2AreaNode(val.countyCode.substring(0, 6));
            }
          }
          if (val.mapInfo) {
            let polyData = JSON.parse(val.mapInfo);
            let smallClassPolygon = new AMap.Polygon({
              map: _this.map,
              path: polyData.features[0].geometry.coordinates,
              strokeOpacity: 1,
              fillOpacity: 0.5,
              strokeColor: 'red',
              strokeWeight: 2,
              zIndex: 999,
              cursor: 'pointer',
              fillColor: 'red'
            });
            this.smallClassProject.push(smallClassPolygon);
          }
        }
      }
    },
    '$store.state.addr.eventData': {
      deep: true,
      immediate: true,
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          if (val.longitude && val.latitude && !val.name) {
            if (_this.eventMarkers) {
              _this.map.remove(_this.eventMarkers);
            }
            let lanLatArr = [val.longitude, val.latitude];
            let baseIcon = '';
            let fireIcon = require('@/assets/img/fire.png');
            let cutTreeIcon = require('@/assets/img/cutTree.png');
            let insectpestIcon = require('@/assets/img/insectpest.png');
            let stealIcon = require('@/assets/img/steal.png');

            if (val.eventType == 1) {
              val.eventContLabel = '火灾';
              baseIcon = fireIcon;
            } else if (val.eventType == 2) {
              val.eventContLabel = '砍伐';
              baseIcon = cutTreeIcon;
            } else if (val.eventType == 3) {
              val.eventContLabel = '病虫害';
              baseIcon = insectpestIcon;
            } else if (val.eventType == 4) {
              val.eventContLabel = '偷盗林木';
              baseIcon = stealIcon;
            }
            let baseIconData = new AMap.Icon({
              size: new AMap.Size(35, 35), // 图标尺寸
              image: baseIcon,
              imageSize: new AMap.Size(35, 35) // 根据所设置的大小拉伸或压缩图片
            });
            let treeSmallLabel =
              "<div class='info-small'>" +
              "<h5 class='marker-title'>历史事件" +
              '</h5>' +
              "<div class='marker-content'>" +
              '<p>事件类型：' +
              val.eventContLabel +
              '</p>' +
              '<p>上报时间：' +
              val.createTime +
              '</p>' +
              '<p>上报人：' +
              val.createBy +
              '</p>' +
              '<p>位置：' +
              val.cityName +
              val.countyName +
              val.townName +
              val.villageName +
              '</p>' +
              '</div>' +
              '</div>';
            this.eventMarker = new AMap.Marker({
              map: this.map,
              position: lanLatArr,
              icon: baseIconData,
              anchor: 'bottom-center',
              offset: new AMap.Pixel(0, 0),
              zIndex: 9999
            });
            this.eventMarker.setLabel({
              direction: 'top',
              offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
              content: treeSmallLabel //设置文本标注内容
            });
            this.eventMarkers.push(this.eventMarker);
            // this.map.add(this.eventMarker);
            _this.eventMarker.on('click', (e) => {
              if (_this.eventMarkers) {
                _this.map.remove(_this.eventMarkers);
              }
            });
          } else if (val.name == false && this.eventMarker) {
            this.map.on('rightclick', function (e) {
              _this.map.remove(_this.eventMarkers);
            });
          }
        }
      }
    },
    '$store.state.addr.baseDetail': {
      deep: true,
      immediate: true,
      handler: function (val, oldVal) {
        let _this = this;
        if (val) {
          if (val.baseLongitude && val.baseLatitude && !val.name) {
            if (_this.baseMarkers) {
              _this.map.remove(_this.baseMarkers);
            }
            let lanLatArr = [val.baseLongitude, val.baseLatitude];
            let treeSmallLabel =
              "<div class='info-small'>" +
              "<h5 class='marker-title'>" +
              val.baseName +
              '</h5>' +
              "<div class='marker-content'>" +
              '<p>基地名称：' +
              val.baseName +
              '</p>' +
              '<p>种植/养殖/加工作物：' +
              val.cropName +
              '</p>' +
              '<p>占地面积：' +
              val.baseArea +
              '亩' +
              '</p>' +
              '<p>位置：' +
              val.cityName +
              val.countyName +
              val.townName +
              '</p>' +
              '</div>' +
              '</div>';

            this.baseMarker = new AMap.Marker({
              map: this.map,
              position: lanLatArr,
              icon: require('@/assets/img/small-marker.png'),
              anchor: 'bottom-center',
              offset: new AMap.Pixel(0, 0),
              zIndex: 9999
            });
            this.baseMarker.setLabel({
              direction: 'top',
              offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
              content: treeSmallLabel //设置文本标注内容
            });
            this.baseMarkers.push(_this.baseMarker);
            this.baseMarker.on('click', (e) => {
              _this.map.remove(_this.baseMarkers);
            });
          } else if (val.name == false && _this.baseMarker) {
            this.map.on('rightclick', function (e) {
              _this.map.remove(_this.baseMarkers);
            });
          }
        }
      }
    },
    '$store.state.addr.smallClassMap': {
      handler(val) {
        if (val) {
          let _this = this;
          if (this.projectSmallClassArr) {
            this.map.remove(this.projectSmallClassArr);
          }
          let capitals = { animations: 'scaless' };
          let lngLagArr = [];
          val.forEach((element) => {
            let lnglat = new AMap.LngLat(element.longitude, element.latitude);
            var projectSmallClass = new AMap.Text({
              map: this.map,
              text: ' ',
              textAlign: 'center',
              verticalAlign: 'middle', //middle 、bottom
              draggable: false,
              cursor: 'pointer',
              angle: 2,
              style: {
                width: '2px',
                height: '2px',
                'border-radius': '50%',
                'border-width': 0,
                'text-align': 'center',
                'font-size': '12px',
                color: 'blue',
                'background-color': 'red',
                // '-moz-box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                // 'box-shadow': '0px 0px 20px 2px '+capitals[i].color,
                animation:
                  capitals.animations +
                  '1s infinite cubic-bezier(0, 0, 0.49, 1.02)'
                // 'animation': 'myfirst 1s infinite'
              },
              position: lnglat
            });
            this.projectSmallClassArr.push(projectSmallClass);
            if (this.$store.state.addr.mapLevel == 'district') {
              this.map.setFitView(projectSmallClass, false, false, 12);
            }
            projectSmallClass.on('click', (e) => {
              if (_this.projectPolygonArr) {
                _this.map.remove(_this.projectPolygonArr);
              }
              if (_this.smallMarkers) {
                _this.map.remove(_this.smallMarkers);
              }
              if (_this.treeCompMarkers) {
                _this.map.remove(_this.treeCompMarkers);
              }
              if (_this.treesPolygonArr) {
                _this.map.remove(_this.treesPolygonArr);
              }
              if (_this.smallClassProject) {
                _this.map.remove(_this.smallClassProject);
              }
              // _this.map.remove(projectSmallClass);
              smallClassDetail({ id: element.id }).then((res) => {
                if (res.code == 200) {
                  let detail = res.data;
                  if (this.leftPage == 'forest') {
                    if (detail.mapInfo) {
                      let polyData = JSON.parse(detail.mapInfo);
                      let projectPolygon = new AMap.Polygon({
                        map: _this.map,
                        path: polyData.features[0].geometry.coordinates,
                        strokeOpacity: 1,
                        fillOpacity: 0.5,
                        strokeColor: 'red',
                        strokeWeight: 2,
                        zIndex: 999,
                        cursor: 'pointer',
                        fillColor: 'red'
                      });
                      this.projectPolygonArr.push(projectPolygon);
                    }
                    this.map.on('rightclick', (e) => {
                      if (_this.projectPolygonArr) {
                        _this.map.remove(_this.projectPolygonArr);
                      }
                      if (_this.smallMarkers) {
                        _this.map.remove(_this.smallMarkers);
                      }
                    });
                    _this.setMapLabel(detail);
                  } else if (this.leftPage == 'treeSpecies') {
                    this.addTreeSpeciesPolygon(detail);
                  }
                }
              });
            });
          });
        }
      }
    }
  },
  computed: {
    ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList']),
    ...mapState(['selectCity', 'selectDistrict', 'selectStreet'])
  },
  created() {
    this.getTreePlant();
    // this.getIcon();
  },
  mounted() {
    this.initAMap();
    const _this = this;
    window.clickClose = function (channelNum) {
      _this.nvrPreview();
    };
    window.guanHuClick = function () {
      _this.guanHuVision();
    };
    // 加载小班边界
    // this.getSmallClass();
  },
  methods: {
    ...mapMutations([
      'changeSelectCity',
      'changeSelectDistrict',
      'changeSelectStreet',
      'changeSelectAddr'
    ]),
    getIcon() {
      getProjectIcon('project_icon').then((res) => {
        if (res.code == 200) {
          this.projectIcon = res.data[0].dictValue;
        }
      });
    },
    setMapLabel(val) {
      let _this = this;
      let lanLatArr = [val.longitude, val.latitude];
      let imgList = [];
      if (val.imageList.length > 0) {
        val.imageList.forEach((element) => {
          imgList.push(`<img id="markerLabel" src="${element.image}"/>`);
        });
      } else {
        imgList.push('暂无图片');
      }
      let closeIcon = require('@/assets/img/close.png');
      this.imgClick();
      let inHtml = `<div class='info-details'>
        <h5 class='marker-title'>
        ${val.countyName}
        -
        ${val.smallNumber}
        </h5>
        <div class='marker-content'>
        <div>
        <p>小班号：
        ${val.smallNumber}
        </p>
        <p>样地数：
        ${val.sampleCount}
        </p>
        <p>小班蓄积量：
        ${val.smallClassStock}
        (立方米)
        </p>
        <p>小班占地面积：
        ${val.landArea}
        (亩)
        </p>
        <p>小班树种组成：
        ${val.treeComp}
        </p>
        <p>地类：
        ${val.landType}
        </p>
        <p>林地权属：
        ${val.landOwner}
        </p>
        <p>林木权属：
        ${val.forestOwner}
        </p>
        <p>林种：
        ${val.forestClass}
        </p>
        <p>树种结构：
        ${val.treeStruct}
        </p>
        </div>
        <div>
        <p>起源：
        ${val.origin}
        </p>
        <p>优势树种：
        ${val.superTree}
        </p>
        <p>主要灌木名称：
        ${val.shrubName}
        </p>
        <p>地貌：
        ${val.landForm}
        </p>
        <p>海拔：
        ${val.altitude}
        </p>
        <p>坡位：
        ${val.slopePosit}
        </p>
        <p>坡向：
        ${val.slopeDirect}
        </p>
        <p>坡形：
        ${val.slopeForm}
        </p>
        <p>坡度：
        ${val.slope}
        </p>
        <p>森林健康度：
        ${val.forestHealth}
        </p>
        </p>
        </div>
        </div>
        <div class="imgList">
        <span class='marker-span'>图片：</span>
        <div class="marker-imgs">
        ${imgList}
        </div>
        </div>
        <a class="link-log" id="linkGuanHu" onclick="guanHuClick()">最新管护情况
        </a>
        <a class="link-close" id="linkClose" onclick="clickClose()">
        <img  src="${closeIcon}" />
      </a></div>`;
      let infoIcon = new AMap.Icon({
        size: new AMap.Size(40, 25), // 图标尺寸
        image: require('@/assets/img/small-marker.png'),
        imageSize: new AMap.Size(40, 25) // 根据所设置的大小拉伸或压缩图片
      });
      this.smallMarker = new AMap.Marker({
        map: this.map,
        position: lanLatArr,
        icon: infoIcon,
        anchor: 'bottom-center',
        offset: new AMap.Pixel(0, -6),
        zIndex: 9999
      });
      this.smallMarker.setLabel({
        direction: 'right',
        offset: new AMap.Pixel(-230, -150), //设置文本标注偏移量
        content: inHtml //设置文本标注内容
      });
      if (this.$store.state.addr.mapLevel == 'street') {
        this.map.setFitView(this.smallMarker, false, false, 14);
      }
      this.smallMarkers.push(_this.smallMarker);
      // this.smallMarker.on('click', (e) => {
      //   if (_this.smallMarkers) {
      //     _this.map.remove(_this.smallMarkers);
      //   }
      //   if (_this.projectPolygonArr) {
      //     _this.map.remove(_this.projectPolygonArr);
      //   }
      //   if (_this.smallClassProject) {
      //     _this.map.remove(_this.smallClassProject);
      //   }
      // });
    },

    nvrPreview() {
      let _this = this;
      if (_this.smallMarkers) {
        _this.map.remove(_this.smallMarkers);
      }
      if (_this.projectPolygonArr) {
        _this.map.remove(_this.projectPolygonArr);
      }
      if (_this.smallClassProject) {
        _this.map.remove(_this.smallClassProject);
      }
    },
    guanHuVision() {
      this.guanHuVisionLog = true;
      this.maintRecordData = {};
      this.getMaintRecordLatest();
    },
    closeLog() {
      this.guanHuVisionLog = false;
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: 'e6666dfe93e7d3c6f3a5dc35cad6befb' // 密钥
      };
      let _this = this;
      AMapLoader.load({
        key: 'f79d862df9288710e3dce6591af9dff1', //设置您的key
        version: '2.0',
        plugins: [
          'AMap.ToolBar',
          'AMap.Driving',
          'AMap.DistrictSearch',
          'AMap.MapboxVectorTileLayer',
          'AMap.Autocomplete'
        ],
        Loca: {
          version: '2.0'
        },
        AMapUI: {
          version: '1.1',
          plugins: ['overlay/SimpleMarker']
        },
        features: ['road', 'bg', 'building']
      }).then((AMap) => {
        _this.AMap = AMap;
        _this.map = new AMap.Map('container', {
          viewMode: '3D',
          zoom: _this.zoom,
          center: _this.lngLat,
          pitch: 45,
          terrain: true,
          features: ['road', 'bg', 'building'],
          layers: [new AMap.TileLayer.Satellite()]
        });
        AMapUI.load(
          ['ui/geo/DistrictExplorer', 'ui/geo/DistrictCluster', 'lib/$'],
          function (DistrictExplorer, DistrictCluster, $) {
            window.DistrictCluster = DistrictCluster;
            _this.loadMapData(DistrictExplorer, $);
          }
        );
        _this.map.on('rightclick', function (e) {
          if (_this.smallMarkers.length > 0) {
            _this.map.remove(_this.smallMarkers);
          }
          if (_this.smallClassProject) {
            _this.map.remove(_this.smallClassProject);
          }
          if (_this.projectPolygonArr) {
            _this.map.remove(_this.projectPolygonArr);
          }
          // if (_this.treeCompMarkers.length > 0) {
          //   _this.map.remove(_this.treeCompMarkers);
          // }
        });
        let wms = new AMap.TileLayer.WMTS({
          url: 'http://t0.tianditu.gov.cn/img_w/wmts',
          blend: false,
          tileSize: 256,
          params: {
            Layer: 'img',
            Version: '1.0.0',
            Format: 'tiles',
            TileMatrixSet: 'w',
            STYLE: 'default',
            tk: 'f394ed68a202b245aa2473991d138179'
          }
        });
        wms.setMap(_this.map);

        this.map.on('mousewheel', (e) => {
          var zoom = this.map.getZoom(); //获取当前地图级别
          if (
            zoom > '10.5' &&
            zoom < '11' &&
            this.$store.state.addr.mapLevel == 'street'
          ) {
            if (this.districtData.value) {
              let districtCode = this.districtData.value.substring(0, 6);
              this.$store.dispatch('searchArea', {
                parentId: districtCode,
                name: this.districtData.label,
                mapLevel: 'district'
              });
            }
          }
          // if (
          //   zoom > '9' &&
          //   zoom < '9.5' &&
          //   this.$store.state.addr.mapLevel == 'district'
          // ) {
          //   if (this.selectData.value) {
          //     let districtCode = this.selectData.value.substring(0, 6);
          //     this.$store.dispatch('searchArea', {
          //       parentId: districtCode,
          //       name: this.selectData.label,
          //       mapLevel: 'city'
          //     });
          //   }
          // }
          // if (
          //   zoom > '7.6' &&
          //   zoom < '7.9' &&
          //   this.$store.state.addr.mapLevel == 'city'
          // ) {
          //   this.$store.dispatch('searchArea', {
          //     parentId: '520000',
          //     name: '贵州省',
          //     mapLevel: 'province'
          //   });
          // }
        });
      });
    },
    loadMapData(DistrictExplorer, $) {
      let that = this;
      //创建一个实例
      that.districtExplorer = window.districtExplorer = new DistrictExplorer({
        eventSupport: true, //打开事件支持
        bubble: true,
        map: that.map
      });
      //当前聚焦的区域
      // this.$tipMarkerContent = $('<div class="tipMarker top"></div>');
      this.$tipMarkerContent = $('<div class="tipMarker top"></div>');
      this.tipMarker = new AMap.Marker({
        content: this.$tipMarkerContent.get(0),
        offset: new AMap.Pixel(0, 0),
        bubble: true
      });
      //监听feature的hover事件
      this.districtExplorer.on(
        'featureMouseout featureMouseover',
        (e, feature) => {
          this.toggleHoverFeature(
            feature,
            e.type === 'featureMouseover',
            e.originalEvent ? e.originalEvent.lnglat : null
          );
        }
      );
      //监听鼠标在feature上滑动
      this.districtExplorer.on('featureMousemove', (e) => {
        //更新提示位置
        this.tipMarker.setPosition(e.originalEvent.lnglat);
      });
      let adName = that.adName; //贵州省
      let mapLevel = that.mapLevel;
      let adcode = '520000';
      //feature被点击
      this.districtExplorer.on('featureClick', (e, feature) => {
        const props = feature.properties;
        if (props.subFeatureIndex != null) {
          adName = props.name;
          adcode = props.adcode;
          mapLevel = props.level;
          // for (let item of this.forestFarmData) {
          //   if (props.name == item.cityName || props.name == item.countyName) {
          mapLevel = props.level;
          adName = props.name;
          this.$store.dispatch('searchArea', {
            parentId: props.adcode,
            name: props.name,
            mapLevel: props.level
          });
          let valCode = props.adcode + '000000';
          let areaId = '';
          this.vuexCityList.forEach((item) => {
            if (valCode == item.areaCode) {
              areaId = item.areaId;
            }
          });
          this.vuexDistrictList.forEach((item) => {
            if (valCode == item.areaCode) {
              areaId = item.areaId;
            }
          });
          if (props.level == 'city') {
            this.changeSelectCity({
              value: valCode,
              label: props.name,
              areaId: areaId,
              prop: '1'
            });
          } else if (props.level == 'district') {
            this.changeSelectDistrict({
              value: valCode,
              label: props.name,
              areaId: areaId,
              prop: '1'
            });
          }
          if (this.projectMarkerArr) {
            this.map.remove(this.projectMarkerArr);
          }
          if (this.economicsArr) {
            this.map.remove(this.economicsArr);
          }
          if (this.baseMarkerArr) {
            this.map.remove(this.baseMarkerArr);
          }
          if (this.eventMarkersArr) {
            this.map.remove(this.eventMarkersArr);
          }
          if (this.treesMarkerArr) {
            this.map.remove(this.treesMarkerArr);
          }
        }
        //   }
        // }
      });
      this.switch2AreaNode(adcode);
      // this.getProjectList();
    },
    //根据Hover状态设置相关样式
    toggleHoverFeature(feature, isHover, position) {
      if (feature.properties.subFeatureIndex != null) {
        // this.tipMarker.setMap(isHover ? this.map : null);
        // this.tipMarker.setMap(isHover ? this.map : null);
        if (!feature) {
          return;
        }
        const props = feature.properties;
        // if (isHover) {
        //   //更新提示内容
        //   this.$tipMarkerContent.html(props.name);
        //   //更新位置
        //   this.tipMarker.setPosition(position || props.center);
        // }
        //更新相关多边形的样式
        const polys = this.districtExplorer.findFeaturePolygonsByAdcode(
          props.adcode
        );
        polys.forEach((elemnt) => {
          elemnt.setOptions({
            fillColor: '#0dbc79',
            fillOpacity: isHover ? 0.5 : 0
          });
        });
      }
    },
    //绘制某个区域的边界
    renderAreaPolygons(areaNode) {
      // 加载小班边界
      // this.getSmallClass();
      let _this = this;
      //更新地图视野
      if (
        (this.$store.state.addr.selectCity.prop == '1' &&
          this.$store.state.addr.mapLevel != 'street') ||
        this.$store.state.addr.mapLevel == 'province'
      ) {
        this.map.setBounds(areaNode.getBounds(), null, null, false);
      } else if (
        this.$store.state.addr.selectCity.prop == '2' &&
        this.$store.state.addr.mapLevel != 'province'
      ) {
        this.map.setFitView(this.smallMarker, false, false, 14);
      }
      // 加载相关标识
      this.mapPolygon();
      //清除已有的绘制内容
      this.districtExplorer.clearFeaturePolygons();
      // 清除已绘制的省市县名称
      this.map.remove(this.cityMarkerArr);

      //绘制子区域
      this.districtExplorer.renderSubFeatures(areaNode, () => {
        return {
          cursor: 'default',
          bubble: true,
          strokeColor: 'yellow', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 2, //线宽
          fillOpacity: 0 //填充透明度
        };
      });
      //绘制父区域
      this.districtExplorer.renderParentFeature(areaNode, {
        cursor: 'default',
        bubble: true,
        strokeColor: '#00eeff', //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 2, //线宽
        fillOpacity: 0 //填充透明度
      });
      let areaPolygon = areaNode.getParentFeature();
      // 绘制父级蒙版
      // if (this.$store.state.addr.mapLevel == 'province' || this.$store.state.addr.mapLevel == 'city') {
      let outer = [
        new AMap.LngLat(-360, 90, true),
        new AMap.LngLat(-360, -90, true),
        new AMap.LngLat(360, -90, true),
        new AMap.LngLat(360, 90, true)
      ];
      let areaPolygonArr = [];
      areaPolygon.geometry.coordinates.forEach((element) => {
        areaPolygonArr.push(element[0]);
      });
      let holes = areaPolygonArr;
      let pathArray = [outer];
      pathArray.push.apply(pathArray, holes);
      this.polygon = new AMap.Polygon({
        pathL: pathArray,
        map: this.map,
        strokeColor: '#00eeff',
        strokeWeight: 1,
        fillColor: '#0c1b05', // 遮罩背景色
        fillOpacity: 0.8,
        height: 10000
      });
      this.polygon.setPath(pathArray);
      // }

      if (this.leftPage == 'forest' || this.leftPage == 'treeSpecies') {
        if (this.map) {
          this.getProjectList();
        }
      }
      if (areaPolygon.properties.level != 'district') {
        // this.setMarker();
      } else {
        this.map.remove(this.treesMarkerArr);
      }
      //查询乡镇 标识
      if (areaPolygon.properties.level == 'district') {
        if (
          this.$store.state.addr.mapLevel != 'street' &&
          this.townPolygons.length == 0
        ) {
          this.getrjx(areaPolygon.properties.name);
        }
        AMap.plugin(['AMap.DistrictSearch'], function () {
          let district = new AMap.DistrictSearch({
            // 返回行政区边界坐标等具体信息
            extensions: 'all',
            // 设置查询行政区级别为 区 （district）
            level: areaPolygon.properties.level,
            //  显示下级行政区级数，1表示返回下一级行政区
            subdistrict: 1
          });
          let areaCode = areaPolygon.properties.name;
          district.search(areaCode, function (status, result) {
            let streetArr = result.districtList[0].districtList;
            _this.zoom = result.districtList[0];
            for (let elementLs in streetArr) {
              _this.streetMarker = new AMap.Text({
                //c城市指示标
                text: streetArr[elementLs].name,
                zIndex: 1,
                map: _this.map,
                anchor: 'center', // 设置文本标记锚点
                style: {
                  padding: '0px 6px',
                  color: '#fff',
                  border: 'none',
                  fontSize: '12px',
                  'background-color': '#E6810C'
                },
                position: [
                  streetArr[elementLs].center.lng,
                  streetArr[elementLs].center.lat
                ]
              });
              _this.streetMarkerArr.push(_this.streetMarker);
            }
          });
        });
      }

      // 添加城市标识
      let cityArr = areaNode.getSubFeatures();
      if (cityArr) {
        for (let i = 0; i < cityArr.length; i++) {
          this.cityMarker = new AMap.Text({
            //c城市指示标
            text: cityArr[i].properties.name,
            zIndex: 1,
            map: this.map,
            anchor: 'center', // 设置文本标记锚点
            style: {
              padding: '0px 6px',
              color: '#fff',
              border: 'none',
              fontSize: '12px',
              'background-color': '#E6810C'
            },
            position: cityArr[i].properties.centroid
          });
          this.cityMarkerArr.push(this.cityMarker);
        }
      }
    },

    //切换区域后刷新显示内容
    refreshAreaNode(areaNode) {
      this.districtExplorer.setHoverFeature(null);
      this.renderAreaPolygons(areaNode);
    },
    //切换区域
    switch2AreaNode(adcode, mapLevel, selectStreet, page, callback) {
      // if (
      //   this.currentAreaNode &&
      //   '' + this.currentAreaNode.getAdcode() === '' + adcode
      // ) {
      //   return;
      // }
      this.loadAreaNode(adcode, (error, areaNode) => {
        if (error) {
          if (callback) {
            callback(error);
          }
          return;
        }
        this.currentAreaNode = areaNode;
        //设置当前使用的定位用节点
        this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
        this.refreshAreaNode(areaNode);
        if (callback) {
          callback(null, areaNode);
        }
      });
    },
    // 加载区域
    loadAreaNode(adcode, callback) {
      this.districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
        if (error) {
          if (callback) {
            callback(error);
          }
          window.console.error(error);
          return;
        }
        if (callback) {
          callback(null, areaNode);
        }
      });
    },
    // 加载林场
    // setMarker() {
    //   this.forestFarmData = [];
    //   if (this.treesMarkerArr.length > 0) {
    //     this.map.remove(this.treesMarkerArr);
    //   }
    //   farmInfo().then((res) => {
    //     this.forestFarmData = res.rows;
    //     let parentMarker = require('@/assets/img/pre-marker.png');
    //     this.forestFarmData.forEach((item) => {
    //       let selectCity = this.$store.state.addr.selectCity.label;
    //       switch (this.$store.state.addr.selectCity.label) {
    //         case '黔西南州':
    //           selectCity = '黔西南布依族苗族自治州';
    //           break;
    //         case '黔东南州':
    //           selectCity = '黔东南苗族侗族自治州';
    //           break;
    //         case '黔南州':
    //           selectCity = '黔南布依族苗族自治州';
    //           break;
    //       }
    //       if (this.$store.state.addr.selectCity.label) {
    //         if (selectCity == item.cityName) {
    //           let lngLat = [item.longitude, item.latitude];
    //           this.treesMarker = new AMap.Marker({
    //             map: this.map,
    //             position: lngLat,
    //             icon: parentMarker,
    //             anchor: 'bottom-center',
    //             offset: new AMap.Pixel(0, 0)
    //           });
    //           this.treesMarker.setLabel({
    //             direction: 'bottom',
    //             offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
    //             content: `<div>${item.forestName}</div>` //设置文本标注内容
    //           });
    //           this.treesMarkerArr.push(this.treesMarker);
    //         }
    //       } else {
    //         let lngLat = [item.longitude, item.latitude];
    //         this.treesMarker = new AMap.Marker({
    //           map: this.map,
    //           position: lngLat,
    //           icon: parentMarker,
    //           anchor: 'bottom-center',
    //           offset: new AMap.Pixel(0, 0)
    //         });
    //         this.treesMarker.setLabel({
    //           direction: 'bottom',
    //           offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
    //           content: `<div>${item.forestName}</div>` //设置文本标注内容
    //         });
    //         this.treesMarkerArr.push(this.treesMarker);
    //       }
    //     });
    //   });
    // },
    // 查询项目列表
    getProjectList() {
      let params = {
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      };
      // image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      projectList(params).then((res) => {
        if (res.code == 200) {
          let infoIcon = new AMap.Icon({
            size: new AMap.Size(20, 25), // 图标尺寸

            image: this.projectIcon,
            imageSize: new AMap.Size(20, 25) // 根据所设置的大小拉伸或压缩图片
          });
          res.rows.forEach((element) => {
            if (element.courseLongitude && element.courseLatitude) {
              let lnglat = new AMap.LngLat(
                element.courseLongitude,
                element.courseLatitude
              );
              var projectMarker = new AMap.Marker({
                map: this.map,
                position: lnglat,
                offset: new AMap.Pixel(0, -30),
                icon: infoIcon,
                zIndex: 999,
                topWhenClick: true
              });
              this.projectMarkerArr.push(projectMarker);
            }
          });
        }
      });
    },
    // 加载乡镇边界
    getrjx(cityName) {
      if (cityName == '榕江县') {
        axios.get('/static/rongjangintown.json').then((res) => {
          this.putPolygonData = res.data.features;
          this.putPolygon();
        });
      } else if (cityName == '清镇市') {
        axios.get('/static/qingzhenzhen.json').then((res) => {
          this.putPolygonData = res.data.features;
          this.putPolygon();
        });
      }
    },
    putPolygon() {
      let that = this;
      this.putPolygonData.forEach((element) => {
        this.boundaryPolygon = new AMap.Polygon({
          map: that.map,
          path: element.geometry.coordinates,
          strokeOpacity: 1,
          fillOpacity: 0,
          strokeColor: 'yellow',
          strokeWeight: 1,
          zIndex: 999,
          cursor: 'pointer'
        });
        that.townPolygons.push(this.boundaryPolygon);

        this.boundaryPolygon.on('click', (e) => {
          let centerLanLatArr = [e.lnglat.lng, e.lnglat.lat];
          that.map.remove(that.townPolygons);
          this.map.remove(this.polygon);
          // that.districtExplorer.clearFeaturePolygons();
          let valCode = element.properties.XIANG;
          let areaId = '';
          let label = element.properties.XIANG_NAME;
          this.vuexStreetList.forEach((item) => {
            if (valCode == item.areaCode) {
              areaId = item.areaId;
            }
          });
          this.changeSelectStreet({
            value: valCode,
            label: label,
            areaId: areaId,
            prop: '1'
          });
          this.changeSelectAddr('street');
          this.$store.dispatch('searchArea', {
            parentId: valCode,
            name: label,
            mapLevel: 'street'
          });
          let townPolygon = new AMap.Polygon({
            map: that.map,
            path: element.geometry.coordinates,
            strokeColor: 'yellow',
            strokeWeight: 3,
            fillOpacity: 0
          });
          this.townPolygonArr.push(townPolygon);
          that.map.setZoomAndCenter(14, centerLanLatArr, false, 13);
        });
        that.boundaryPolygon.on('rightclick', function (e) {
          if (
            that.smallMarkers ||
            that.baseMarkers ||
            that.eventMarkers ||
            that.smallClassProject ||
            that.projectPolygonArr
          ) {
            that.map.remove(that.smallMarkers);
            that.map.remove(that.baseMarkers);
            that.map.remove(that.eventMarkers);
            that.map.remove(that.smallClassProject);
            that.map.remove(that.projectPolygonArr);
          }
        });
      });
    },
    async getSmallClass() {
      let that = this;
      that.smallClassMapArr = [];
      let params = {
        // cityId: that.$store.state.addr.selectCity.areaId,
        // countyId: that.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      };
      if (that.smallClassPolygonArr.length > 0) {
        that.map.remove(that.smallClassPolygonArr);
      }
      if (that.treesPolygonArr.length > 0) {
        that.map.remove(that.treesPolygonArr);
      }
      // let pageData = {
      //   pageNum: 0,
      //   pageSize: 25
      // };
      let mapLevel = that.$store.state.addr.mapLevel;
      let res = await smallClassMap({ ...params });
      if (res.code == 200) {
        res.rows.forEach((item) => {
          // if (item.smallId != null) {
          // }
          // this.smallClassMapArr.push(item);
          if (that.leftPage === 'forest') {
            this.addForestPolygon(item);
          } else if (this.leftPage === 'treeSpecies') {
            this.addTreeSpeciesPolygon(item);
          }
        });
      }
      // if (res.code == 200 && res.total > 25) {
      //   const total = res.total;
      //   const totalPage = Math.ceil(total / pageData.pageSize);
      //   const render = (page, mapLevel) => {
      //     if (page >= totalPage) return;
      //     requestAnimationFrame(() => {
      //       render(page + 1, mapLevel);
      //       pageData.pageNum = page;
      //       smallClassMap({ ...params, ...pageData }).then((response) => {
      //         if (response.code == 200) {
      //           response.rows.forEach((item) => {
      //             // if (item.smallId != null) {
      //             // }
      //             // this.smallClassMapArr.push(item);
      //             if (that.leftPage === 'forest') {
      //               this.addForestPolygon(item);
      //             } else if (this.leftPage === 'treeSpecies') {
      //               this.addTreeSpeciesPolygon(item);
      //             }
      //           });
      //         }
      //       });
      //     });
      //   };
      //   render(pageData.pageNum, mapLevel);
      // } else {
      //   res.rows.forEach((item) => {
      //     if (that.leftPage === 'forest') {
      //       this.addForestPolygon(item);
      //     } else if (this.leftPage === 'treeSpecies') {
      //       this.addTreeSpeciesPolygon(item);
      //     }
      //   });
      // }
    },
    mapPolygon() {
      // if (this.smallClassMapArr) {
      // if (this.leftPage === 'forest') {
      //   // this.addForestPolygon(this.smallClassMapArr);
      //   if (
      //     // this.$store.state.addr.mapLevel == 'district' ||
      //     this.$store.state.addr.mapLevel == 'street'
      //   ) {
      //     this.getForestSample(this.leftPage);
      //   }
      // } else if (this.leftPage === 'treeSpecies') {
      //   // this.addTreeSpeciesPolygon();
      //   if (
      //     // this.$store.state.addr.mapLevel == 'district' ||
      //     this.$store.state.addr.mapLevel == 'street'
      //   ) {
      //     this.getRightScrollData(this.leftPage);
      //   }
      // } else
      if (this.leftPage === 'economics') {
        this.getEconomics();
      } else if (this.leftPage === 'event') {
        this.getEven();
      }
      // }
    },
    addForestPolygon(item) {
      let that = this;
      if (item) {
        // console.log(item);
        // smallClassMapArr.forEach((item) => {
        let polyData = JSON.parse(item.mapInfo);
        for (let elementLs in polyData.features) {
          let smallClassPolygon = new AMap.Polygon({
            map: that.map,
            path: polyData.features[elementLs].geometry.coordinates,
            strokeOpacity: 1,
            fillOpacity: 0,
            strokeColor: 'red',
            strokeWeight: 2,
            zIndex: 999,
            cursor: 'pointer',
            fillColor: ''
          });
          this.smallClassPolygonArr.push(smallClassPolygon);
          smallClassPolygon.on('click', (e) => {
            let imgList = [];
            if (item.imageList.length > 0) {
              item.imageList.forEach((element) => {
                imgList.push(`<img id="markerLabel" src="${element.image}"/>`);
              });
            } else {
              imgList.push('暂无图片');
            }
            this.imgClick();
            let smallLabel =
              "<div class='info-details'>" +
              "<h5 class='marker-title'>" +
              item.countyName +
              '-' +
              item.smallNumber +
              '</h5>' +
              "<div class='marker-content'>" +
              '<div>' +
              '<p>小班号：' +
              item.smallNumber +
              '</p>' +
              '<p>样地数：' +
              item.sampleCount +
              '</p>' +
              '<p>小班蓄积量：' +
              item.smallClassStock +
              '(立方米)' +
              '</p>' +
              '<p>小班占地面积：' +
              item.landArea +
              '(亩)' +
              '</p>' +
              '<p>小班树种组成：' +
              item.treeComp +
              '</p>' +
              '<p>地类：' +
              item.landType +
              '</p>' +
              '<p>林地权属：' +
              item.landOwner +
              '</p>' +
              '<p>林木权属：' +
              item.forestOwner +
              '</p>' +
              '<p>林种：' +
              item.forestClass +
              '</p>' +
              '<p>树种结构：' +
              item.treeStruct +
              '</p>' +
              '</div>' +
              '<div>' +
              '<p>起源：' +
              item.origin +
              '</p>' +
              '<p>优势树种：' +
              item.superTree +
              '</p>' +
              '<p>主要灌木名称：' +
              item.shrubName +
              '</p>' +
              '<p>地貌：' +
              item.landForm +
              '</p>' +
              '<p>海拔：' +
              item.altitude +
              '</p>' +
              '<p>坡位：' +
              item.slopePosit +
              '</p>' +
              '<p>坡向：' +
              item.slopeDirect +
              '</p>' +
              '<p>坡形：' +
              item.slopeForm +
              '</p>' +
              '<p>坡度：' +
              item.slope +
              '</p>' +
              '<p>森林健康度：' +
              item.forestHealth +
              '</p>' +
              '<p>森林健康度11：' +
              item.forestHealth +
              '</p>' +
              '</div>' +
              '</div>' +
              '<div class="imgList">' +
              "<span class='marker-span'>图片：</span>" +
              '<div class="marker-imgs">' +
              imgList +
              '</div>' +
              '</div>' +
              '</div>';
            that.smallMarker = new AMap.Marker({
              map: that.map,
              position: lanLatArr,
              icon: require('@/assets/img/small-marker.png'),
              anchor: 'bottom-center',
              offset: new AMap.Pixel(-5, -6)
            });
            that.smallMarker.setLabel({
              direction: 'right',
              offset: new AMap.Pixel(-230, -160), //设置文本标注偏移量
              content: smallLabel //设置文本标注内容
            });
            // that.smallMarker.setMap(that.map);
            that.smallMarkers.push(that.smallMarker);
            smallClassPolygon.setOptions({
              fillOpacity: 0.7,
              fillColor: 'yellow'
            });
          });

          smallClassPolygon.on('mouseout', () => {
            smallClassPolygon.setOptions({
              fillOpacity: 0,
              fillColor: '#ccebc5'
            });
          });
        }
        if (item.longitude && item.latitude) {
          var lanLatArr = [];
          lanLatArr = [item.longitude, item.latitude];
          if (
            this.$store.state.addr.mapLevel == 'district' ||
            this.$store.state.addr.mapLevel == 'street'
          ) {
            this.smallClassN = new AMap.Text({
              map: this.map,
              position: lanLatArr,
              text: item.smallNumber,
              anchor: 'bottom-center',
              offset: new AMap.Pixel(0, 8),
              style: {
                'background-color': 'transparent',
                border: 'none',
                color: '#05dfff',
                fontSize: '12px'
              }
            });
            this.smallClassNArr.push(this.smallClassN);
          }
        }
        // this.map.add(that.smallClassPolygon);

        // });
      }
    },
    imgClick() {
      document.getElementsByTagName('div')[0].addEventListener('click', (e) => {
        if (e.target.id === 'markerLabel') {
          this.imgDialogVisible = true;
          this.dialogImageUrl = e.target.currentSrc;
        }
      });
    },

    // 获取样地数据
    getForestSample(page) {
      forestSample({
        // cityId: this.$store.state.addr.selectCity.areaId,
        // countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      }).then((res) => {
        let sampleMarker = require('@/assets/img/sample-marker.png');
        let iconMeta = [28, 28];
        this.setMarkers(res, sampleMarker, iconMeta, page);
      });
    },
    // 添加地图标注（样地、树种）
    setMarkers(res, sampleMarker, iconMeta, page) {
      let _this = this;
      if (this.forestMarker) {
        this.forestMarker.setMap(null);
        this.forestMarker = null;
      }
      this.markerData = res;
      let iconMarker = sampleMarker;
      let iconMetaSet = iconMeta;
      let sampleIcon = new AMap.Icon({
        size: new AMap.Size(iconMetaSet[0], iconMetaSet[1]), // 图标尺寸
        image: iconMarker,
        imageSize: new AMap.Size(iconMetaSet[0], iconMetaSet[1]) // 根据所设置的大小拉伸或压缩图片
      });
      this.markerData.rows.forEach((item) => {
        let lngLat = [item.longitude, item.latitude];
        if (item.longitude && item.latitude) {
          this.forestMarker = new AMap.Marker({
            map: _this.map,
            position: lngLat,
            icon: sampleIcon,
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, -18)
          });
          if (page === 'forest') {
            this.forestMarker.setLabel({
              direction: 'right',
              offset: new AMap.Pixel(-8, 0), //设置文本标注偏移量
              content: `<div style="color:#05dfff">${item.smallNumber}-${item.sampleNumber}</div>` //设置文本标注内容
            });
            let clickLabel =
              "<div class='info-small'>" +
              "<h5 class='marker-title'>" +
              item.smallNumber +
              '-' +
              item.sampleNumber +
              '</h5>' +
              "<div class='marker-content'>" +
              '<p>样地号：' +
              item.sampleNumber +
              '</p>' +
              '<p>所属小班：' +
              item.smallNumber +
              '</p>' +
              '<p>样地蓄积：' +
              item.landStock +
              '</p>' +
              '<p>样地株数：' +
              item.landNumber +
              '</p>' +
              '</div>' +
              '</div>';
            let lastMarker = new AMap.Marker({
              position: lngLat,
              icon: sampleIcon,
              anchor: 'bottom-center',
              offset: new AMap.Pixel(0, -18)
            });
            lastMarker.setLabel({
              zIndex: 120,
              direction: 'top',
              offset: new AMap.Pixel(-4, 0), //设置文本标注偏移量
              content: clickLabel //设置文本标注内容
            });
            this.forestMarker.on('click', function (e) {
              _this.map.add(lastMarker);
            });
            this.forestMarker.on('mouseout', function (e) {
              _this.map.remove(lastMarker);
            });
          } else if (page === 'treeSpecies') {
            this.forestMarker.setLabel({
              direction: 'top',
              offset: new AMap.Pixel(0, 8), //设置文本标注偏移量
              content: `<div class="label-treecomp">${item.treeComp}<span class="smallH">${item.smallNumber}</span></div>` //设置文本标注内容
            });
          }
          // this.map.add(this.forestMarker);
          // forestMarker
          this.forestMarkerArr.push(this.forestMarker);
        }
      });
    },
    addTreeSpeciesPolygon(item) {
      let that = this;
      // that.smallClassMapArr.forEach((item) => {
      let polyData = JSON.parse(item.mapInfo);
      for (let elementLs in polyData.features) {
        let polygonColor = '';
        this.treePlant.forEach((tree) => {
          if (tree.plantName == item.superTree && item.superTree == '硬阔') {
            polygonColor = '#00da85';
          } else if (
            tree.plantName == item.superTree &&
            item.superTree == '软阔'
          ) {
            polygonColor = '#009bfd';
          } else if (
            tree.plantName == item.superTree &&
            item.superTree == '杉木'
          ) {
            polygonColor = '#eca62d';
          } else if (
            tree.plantName == item.superTree &&
            item.superTree == '马尾松'
          ) {
            polygonColor = '#b82dec';
          }
        });
        let polygon = new AMap.Polygon({
          map: that.map,
          path: polyData.features[elementLs].geometry.coordinates,
          strokeOpacity: 1,
          fillOpacity: 0.6,
          strokeColor: 'red',
          strokeWeight: 2,
          zIndex: 999,
          cursor: 'pointer',
          fillColor: polygonColor
        });
        this.treesPolygonArr.push(polygon);
        if (item.longitude && item.latitude) {
          var lanLatArr = [];
          // polygon.on('click', (e) => {
          lanLatArr = [item.longitude, item.latitude];
          let treeSmallLabel =
            "<div class='info-small'>" +
            "<h5 class='marker-title'>小班" +
            item.smallNumber +
            '</h5>' +
            "<div class='marker-content'>" +
            '<p>树种组成：' +
            item.treeComp +
            '</p>' +
            '<p>树种结构：' +
            item.treeStruct +
            '</p>' +
            '<p>优势树种：' +
            item.superTree +
            '</p>' +
            '<p>优势树种平均胸径：' +
            item.superTreeDbh +
            '厘米' +
            '</p>' +
            '<p>优势树种平均高：' +
            item.superTreeHigh +
            '米' +
            '</p>' +
            '<p>位置：' +
            item.countyName +
            item.townName +
            item.villageName +
            '</p>' +
            '</div>' +
            '</div>';
          that.smallMarker = new AMap.Marker({
            map: that.map,
            position: lanLatArr,
            icon: require('@/assets/img/small-marker.png'),
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0)
          });
          that.smallMarker.setLabel({
            direction: 'top',
            offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
            content: treeSmallLabel //设置文本标注内容
          });
          that.treeCompMarkers.push(that.smallMarker);
          if (
            this.$store.state.addr.mapLevel == 'street' ||
            this.$store.state.addr.mapLevel == 'district'
          ) {
            this.map.setFitView(this.smallMarker, false, false, 14);
          }
          // });
          that.smallMarker.on('click', (e) => {
            if (that.treesPolygonArr) {
              that.map.remove(that.treesPolygonArr);
            }
            if (that.treeCompMarkers) {
              that.map.remove(that.treeCompMarkers);
            }
          });
          that.map.on('rightclick', function (e) {
            if (that.treeCompMarkers) {
              that.map.remove(that.treeCompMarkers);
            }
            if (that.treesPolygonArr) {
              that.map.remove(that.treesPolygonArr);
            }
          });
        }
      }
      // });
    },
    // 获取小班列表
    getRightScrollData(page) {
      rightScrollData({
        // cityId: this.$store.state.addr.selectCity.areaId,
        // countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      }).then((res) => {
        let sampleMarker = require('@/assets/img/sanjiaod.png');
        let iconMeta = [16, 10];
        this.setMarkers(res, sampleMarker, iconMeta, page);
      });
    },
    // 获取最新管护记录
    getMaintRecordLatest() {
      maintRecordLatest({ smallId: this.smallId }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          if (res.data) {
            res.data.imagesList = res.data.images.split(';');
            res.data.peopleImagesList = res.data.peopleImages.split(';');
            this.maintRecordData = res.data;
          }else {
            this.maintRecordData = null;
          }
        }
      });
    },
    // 事件信息
    getEven() {
      let _this = this;
      alarmDataApi({
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      }).then((res) => {
        res.data.forEach((item) => {
          let lanLatArr = [item.longitude, item.latitude];
          let baseIcon = '';
          let fireIcon = require('@/assets/img/fire.png');
          let cutTreeIcon = require('@/assets/img/cutTree.png');
          let insectpestIcon = require('@/assets/img/insectpest.png');
          let stealIcon = require('@/assets/img/steal.png');
          if (item.eventType == 1) {
            item.eventContLabel = '火灾';
            baseIcon = fireIcon;
          } else if (item.eventType == 2) {
            item.eventContLabel = '砍伐';
            baseIcon = cutTreeIcon;
          } else if (item.eventType == 3) {
            item.eventContLabel = '病虫害';
            baseIcon = insectpestIcon;
          } else if (item.eventType == 4) {
            item.eventContLabel = '偷盗林木';
            baseIcon = stealIcon;
          }
          let baseIconData = new AMap.Icon({
            size: new AMap.Size(35, 35), // 图标尺寸
            image: baseIcon,
            imageSize: new AMap.Size(35, 35) // 根据所设置的大小拉伸或压缩图片
          });
          let treeSmallLabel =
            "<div class='info-small'>" +
            "<h5 class='marker-title'>最新事件" +
            '</h5>' +
            "<div class='marker-content'>" +
            '<p>事件类型：' +
            item.eventContLabel +
            '</p>' +
            '<p>上报时间：' +
            item.createTime +
            '</p>' +
            '<p>上报人：' +
            item.createBy +
            '</p>' +
            '<p>位置：' +
            item.cityName +
            item.countyName +
            item.townName +
            item.villageName +
            '</p>' +
            '</div>' +
            '</div>';
          _this.smallMarker = new AMap.Marker({
            map: _this.map,
            position: lanLatArr,
            icon: baseIconData,
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0),
            zIndex: 999
          });

          _this.eventMarkersArr.push(_this.smallMarker);

          _this.smallMarker.on('click', function (e) {
            let infoWindow = new AMap.InfoWindow({
              isCustom: true,
              offset: new AMap.Pixel(0, -20),
              content: treeSmallLabel,
              position: lanLatArr
            });
            infoWindow.open(_this.map, lanLatArr);
          });
          _this.smallMarker.on('mouseout', function (e) {
            _this.map.clearInfoWindow();
          });
        });
      });
    },
    // 林业经济
    getEconomics() {
      let _this = this;
      basePlantList({
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId
        // townId: this.$store.state.addr.selectStreet.areaId
      }).then((res) => {
        let economicsList = [];
        let baseList = [];
        res.rows.forEach((element) => {
          // if (element.cateLongitude && element.cateLatitude) {
          //   economicsList.push({
          //     longitude: element.cateLongitude,
          //     latitude: element.cateLatitude,
          //     icon: element.image
          //   });
          // }
          if (element.baseLongitude && element.baseLatitude) {
            baseList.push({
              baseId: element.baseId,
              baseName: element.baseName,
              longitude: element.baseLongitude,
              latitude: element.baseLatitude,
              cateInfoList: element.cateInfoList
            });
          }
        });
        // economicsList.forEach((item) => {
        //   let lanLatArr = [item.longitude, item.latitude];
        //   let beeIcon = item.icon;
        //   let iconMeta = [35, 26];
        //   let sampleIcon = new AMap.Icon({
        //     size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
        //     image: beeIcon,
        //     imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
        //   });
        //   // this.smallMarker = new AMap.Marker({
        //   //   map: _this.map,
        //   //   position: lanLatArr,
        //   //   icon: sampleIcon,
        //   //   anchor: 'bottom-center',
        //   //   offset: new AMap.Pixel(0, 0)
        //   // });
        //   // this.economicsArr.push(this.smallMarker);
        //   // this.smallMarker.setMap(this.map);
        // });
        // console.log(baseList);
        baseList.forEach((element) => {
          let lanLatArr = [element.longitude, element.latitude];
          let baseIcon = require('@/assets/img/postion.png');
          let iconMeta = [20, 29];
          let sampleIcon = new AMap.Icon({
            size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
            image: baseIcon,
            imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
          });
          let imgList = [];
          if (element.cateInfoList.length > 0) {
            element.cateInfoList.forEach((item) => {
              imgList.push(`<img src="${item.image}"/>`);
            });
          }
          console.log(imgList.join(' '));
          this.baseMarker = new AMap.Text({
            map: this.map,
            position: lanLatArr,
            text: element.baseName,
            anchor: 'bottom-center',
            offset: new AMap.Pixel(0, 0),
            style: {
              'background-color': 'transparent',
              border: 'none',
              'font-size': '12px'
            }
          });
          this.baseMarker.setLabel({
            direction: 'left',
            offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
            content:
              '<div class="base-marker-imgs">' + imgList.join(' ') + '</div>' //设置文本标注内容
          });
          this.baseMarkerArr.push(this.baseMarker);
          this.baseMarker.on('click', function (e) {
            financeBaseDetail({ baseId: element.baseId }).then((res) => {
              if (res.code == 200) {
                let treeSmallLabel =
                  "<div class='info-small'>" +
                  "<h5 class='marker-title'>" +
                  res.data.baseName +
                  '</h5>' +
                  "<div class='marker-content'>" +
                  '<p>基地名称：' +
                  res.data.baseName +
                  '</p>' +
                  '<p>种植/养殖/加工作物：' +
                  res.data.cropName +
                  '</p>' +
                  '<p>占地面积：' +
                  res.data.baseArea +
                  '亩' +
                  '</p>' +
                  '<p>位置：' +
                  res.data.cityName +
                  res.data.countyName +
                  res.data.townName +
                  '</p>' +
                  '</div>' +
                  '</div>';
                let infoWindow = new AMap.InfoWindow({
                  isCustom: true,
                  offset: new AMap.Pixel(0, -20),
                  content: treeSmallLabel,
                  position: lanLatArr
                });
                infoWindow.open(_this.map, lanLatArr);
              }
            });
          });
          this.baseMarker.on('mouseout', function (e) {
            _this.map.clearInfoWindow();
          });
        });
      });
    },
    getTreePlant() {
      treePlant().then((res) => {
        this.treePlant = res.rows;
      });
    }
  }
};
</script>
<style lang='scss' scoped>
#container {
  width: 100%;
  height: 100vh;

  /deep/ .tdt-pane {
    z-index: auto;
  }
}

/deep/ .amap-marker-content {
  .tipMarker {
    color: #555;
    background-color: rgba(255, 254, 239, 0.8);
    border: 1px solid #7e7e7e;
    padding: 2px 6px;
    font-size: 12px;
    white-space: nowrap;
    display: inline-block;

    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      margin: auto;
      width: 0;
      height: 0;
      border: solid transparent;
      border-width: 5px 5px;
    }

    &.top {
      transform: translate(-50%, -110%);

      &:before,
      &:after {
        bottom: -9px;
        left: 0;
        right: 0;
        border-top-color: rgba(255, 254, 239, 0.8);
      }

      &:before {
        bottom: -10px;
        border-top-color: #7e7e7e;
      }
    }
  }
}

/deep/ .amap-logo,
.amap-copyright {
  display: block !important;
  visibility: inherit !important;
}

/deep/ .amap-icon {
  overflow: unset !important;
}

/deep/ .info-small {
  background-image: url('../assets/img/small-label.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 18rem;
  // height: 10rem;
  color: #fff;

  .marker-title {
    margin: 0 auto;
    line-height: 30px;
  }

  .marker-content {
    padding: 0 20px 10px 20px;

    p {
      text-align: left;
      font-size: 12px;
      margin: 0;
      line-height: 28px;
    }
  }
}

/deep/ .info-details {
  background-image: url('../assets/img/small-label.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 26rem;
  padding-bottom: 13px;
  // height: 10rem;
  color: #fff;
  overflow: hidden;
  .marker-title {
    margin: 0 auto;
    line-height: 50px;
  }

  .marker-content {
    display: flex;
    justify-content: space-between;
    padding: 0 20px 0 20px;

    .marker-span {
      display: block;
    }

    p {
      text-align: left;
      font-size: 12px;
      margin: 0;
      line-height: 18px;
    }
  }
  .link-log {
    cursor: pointer;
    color: #00f5ff;
    font-size: 14px;
    position: absolute;
    right: 28px;
    bottom: 31px;
    z-index: 999;
    &:hover {
      text-decoration: underline;
    }
  }
  .link-close {
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 18px;
    right: 12px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .imgList {
    display: block;
    text-align: left;
    padding: 0 20px;
    width: 56%;
    display: flex;
    flex-wrap: wrap;
    float: left;
    .marker-span {
      display: block;
    }

    .marker-imgs {
      display: block;
      line-height: 18px !important;
      width: 376px;
      overflow: auto;

      img {
        width: 40px;
        height: 40px;
        margin: 0 4px;
        cursor: pointer;
      }
    }

    .marker-imgs::-webkit-scrollbar {
      background: transparent;
      opacity: 0.6px;
      width: 10px;
      height: 8px;
    }

    .marker-imgs::-webkit-scrollbar-thumb {
      background: rgba($color: #07a2eb8e, $alpha: 0.6);
      border-radius: 20px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    }

    .marker-imgs::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: transparent;
    }
  }
}

/deep/ .amap-marker-label {
  border: 0;
  background-color: transparent;
  position: relative;
}

#mask {
  width: 100%;
  height: 100vh;
  box-shadow: inset 0px 0px 10vw 8vw rgba(0, 10, 34, 0.54);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  pointer-events: none;
}

@keyframes imageAnimation_32630606 {
  0% {
    // opacity: 0;
    transform: none;
  }

  34% {
    // opacity: 1;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
      translate3d(34vw, 0px, 0px);
  }

  67% {
    // opacity: 1;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
      translate3d(67vw, 0px, 0px);
  }

  100% {
    // opacity: 0;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
      translate3d(160vw, 0px, 0px);
  }
}

.yun-wrap {
  position: fixed;
  left: 0;
  top: 350px;
  width: 100vw;
  pointer-events: none;
}

.yun {
  position: fixed;
  left: -500px;
  animation-name: imageAnimation_32630606;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 110s;
  animation-delay: 0s;
  -webkit-user-drag: none;
  filter: none;
  pointer-events: none;
}

.yun2 {
  bottom: 20px;
  animation-duration: 90s;
  animation-delay: 10s;
}

.yun3 {
  top: 100px;
  animation-duration: 120s;
  animation-delay: 15s;
}

/deep/ .label-treecomp {
  position: relative;
  background-color: #05dfff;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;

  &::before {
    position: absolute;
    top: 26px;
    left: 42%;
    content: '';
    width: 0px;
    height: 0px;
    border: 6px solid transparent;
    border-top-color: #05dfff;
  }

  .smallH {
    position: absolute;
    top: 34px;
    z-index: 99;
    display: block;
    color: #05dfff;
    text-align: center;
    font-size: 14px;
    // left: 38%;
    left: 0;
    width: 100%;
  }
}
/deep/ .base-marker-imgs {
  img {
    width: 30px;
    height: 30px;
    margin: 0 4px;
    cursor: pointer;
  }
}
.guanHu-back {
  background-image: url('../assets/img/guanhu.png');
  width: 550px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // height: 497px;
  position: fixed;
  z-index: 999;
  top: 25%;
  left: 35%;
  padding: 31px 29px;
  .close-item {
    background-image: url('../assets/img/close.png');
    background-repeat: no-repeat;
    width: 34px;
    height: 33px;
    position: absolute;
    top: -14px;
    right: 0;
    cursor: pointer;
  }
  .item-box {
    width: 100%;
    &-list {
      &-title {
        text-align: left;
        height: 22px;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        .icon-item {
          background-image: url('../assets/img/tips.png');
          width: 18px;
          height: 17px;
          background-repeat: no-repeat;
          display: inline-block;
        }
        span {
          color: #00f5ff;
          margin-left: 10px;
          font-size: 16px;
        }
      }
    }
    .item-content {
      overflow: hidden;
      .content-label {
        font-size: 14px;
        display: flex;
        margin-bottom: 10px;
        p {
          margin: 0;
          text-align: left;
          width: 50%;
        }
        .imgs-list {
          display: flex;
          flex-wrap: wrap;
          img {
            width: 64px;
            height: 64px;
            cursor: pointer;
            margin-right: 6px;
            margin-bottom: 6px;
          }
        }
      }
    }
  }
}
</style>