<template>
  <div id="map" class="map" ref="map"></div>
</template>

<script>
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
import 'leaflet.fullscreen/Control.FullScreen'
import 'leaflet.fullscreen/Control.FullScreen.css'
import 'leaflet-measure-path/leaflet-measure-path.css'
import 'leaflet-measure-path/leaflet-measure-path.js'
import axios from 'axios'
import cun from './data/cun.geojson'
import suixianxiangzhen from './data/suixianxiangzhen.geojson'
import suixian from './data/suixian.geojson'
import zhuji from './data/zhuji.geojson'
import styles from './data/styles.json'

import {
  handMeasureDistance,
  handMeasureArea,
  handMeasureClear,
} from './measure.js'

export default {
  name: 'screenTown',
  data () {
    return {
      map: null,
      geojsonLayer: null,
      baseLayerZk: '',
      baseLayerTd: '',
      full: false,
      layerDK: null,
      layerXZQ: null,
      layerCUN: null,
      layerZHUJI: null,
      layerZHEN: null,
      layerXIAN: null,
      layerDIKUAI: null,
      highlightLayer: null,
      layerClass: null,
    }
  },
  created () { },
  mounted () {
    this.initMap()
    this.initRT()
  },
  methods: {
    initRT () {
      let Chart = this.$refs.trcharts
      let myChart = this.$echarts.init(Chart)
      let xData2 = ['水域', '人工用地', '裸地', '林地', '构筑物', '耕地']
      let data1 = [200, 100, 200, 200, 100, 123]
      let option = {
        title: {
          text: '分类面积柱状图统计',
          x: 'center',
          y: '4%',
          textStyle: {
            color: '#fff',
            fontSize: '18',
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '14',
          },
        },
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: 30,
          bottom: 30,
        },
        xAxis: {
          data: xData2,
          show: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: 'gray',
              opacity: 1,
            },
          },
          // lineStyle: {
          //     show: true,
          //     type: 'solid'
          // },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
            margin: 15, //刻度标签与轴线之间的距离。
          },
        },
        yAxis: {
          name: '数量',
          nameTextStyle: {
            color: 'white',
            fontSize: 14,
            align: 'right',
            lineHeight: 30,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              opacity: 0.5,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12,
            },
          },
        },
        series: [
          {
            //三个最低下的圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 10],
            symbolOffset: [0, 0],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                var a = params.name.slice(0, 2)
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#12B9DB', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#6F8EF2', // 100% 处的颜色
                    },
                  ],
                  false
                )
              },
            },
            data: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
          },
          //下半截柱状图
          {
            name: '2020',
            type: 'bar',
            barWidth: 16,
            barGap: '-20%',
            itemStyle: {
              //lenged文本
              opacity: 0.7,
              color: function (params) {
                var a = params.name.slice(0, 2)

                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#12B9DB', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#6F8EF2', // 100% 处的颜色
                    },
                  ],
                  false
                )
              },
            },

            data: data1,
          },

          {
            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
              color: 'transparent',
            },
            data: data1,
          },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                var a = params.name.slice(0, 2)

                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#12B9DB', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#6F8EF2', // 100% 处的颜色
                    },
                  ],
                  false
                )
              },
            },
            symbolPosition: 'end',
            data: data1,
          },
        ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      this.$on('hook:destroyed', () => {
        window.removeEventListener('resize', function () {
          myChart.resize()
        })
      })
    },
    initMap () {
      this.map = L.map(this.$refs.map, {
        center: [31.845, 113.21],
        zoom: 13,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG4326, // 默认3857
        fullscreenControl: false,
        maxZoom: 17,
      })
      //定义一个比例尺控件
      let scale = L.control.scale()
      scale.addTo(this.map)
      // 请确保：metric: true（默认）
      // scale._mScale.innerText = `${scale._mScale.innerText.slice(0, hou-2)} ${scale._mScale.innerText.slice(-2) === 'km' ? '公里' : '米'
      //   }`
      // 请确保：imperial: true（默认）
      // scale.getContainer().childNodes[1].innerText = `${scale.getContainer().childNodes[1].innerText.slice(0, -2)} ${scale.getContainer().childNodes[1].innerText.slice(-2) === 'mi' ? '英里' : '英尺'
      //   }`
      scale.getContainer().childNodes[0].style.cssText =
        'margin-bottom:-4px;color:#FFF;text-shadow:none;border:2px solid #FFF;background:none;border-top:0px;'
      scale.getContainer().childNodes[1].hidden = true

      // 经纬度投影
      const VEC_C =
        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886'
      const IMG_C =
        'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886'
      const CIA_C =
        'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886'
      const GG =
        'http://gac-geo.googlecnapps.cn/maps/vt?lyrs=m&x={x}&y={y}&z={z}'
      const GD =
        'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
      const ZKXT =
        'https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=C&token=cf0755d3f0716343328906ce5f3db031d6fe120323473ee48cbd3b5f6d81ff98'

      this.baseLayerZk = L.tileLayer(ZKXT, {
        maxZoom: 18,
        maxNativeZoom: 17,
        tileMatrixSet: 'EPSG:3857',
        zIndex: 10,
      })
      this.baseLayerTd = L.tileLayer(IMG_C, {
        zoomOffset: 1,
        maxZoom: 18,
        tileSize: 256,
        maxNativeZoom: 17,
        zIndex: 11,
      })

      this.map.addLayer(this.baseLayerZk)

      // const baseLayers = {
      //   "中科": this.baseLayerZk,
      //   "天地": this.baseLayerTd,
      // };
      // //底图切换控件
      // L.control.layers(baseLayers, null).addTo(this.map);

      this.layerCUN = L.geoJSON(cun, {
        style: { color: '#F5DEB3', weight: 3, fillOpacity: 0 },
      }).addTo(this.map)
      this.layerZHEN = L.geoJSON(suixianxiangzhen, {
        style: { color: '#1E90FF', weight: 3, fillOpacity: 0 },
      })
      this.layerXIAN = L.geoJSON(suixian, {
        style: { color: '#0000CD', weight: 3, fillOpacity: 0 },
      })
      this.layerZHUJI = L.geoJSON(zhuji, {
        pointToLayer: function (geoJsonPoint, latlng) {
          return L.marker(latlng, {
            icon: L.divIcon({
              html:
                '<p class="' +
                (geoJsonPoint.properties.type == '区县'
                  ? 'qx'
                  : geoJsonPoint.properties.type == '乡镇'
                    ? 'xz'
                    : '') +
                '">' +
                geoJsonPoint.properties.name +
                '</p>',
              className: 'my-div-icon',
              // iconSize: 50
            }),
          })
        },
        style: { opacity: 0 },
      }).addTo(this.map)
      this.layerDK = L.tileLayer
        .wms('http://175.6.146.33:88/geoserver/zhny/wms', {
          layers: 'zhny:dp-dikuai', //需要加载的图层
          format: 'image/png', //返回的数据格式
          transparent: true,
          zIndex: 200,
        })
        .addTo(this.map)

      this.clickFun()
      // this.position()
      // this.addPoint()
      // this.addPolygon()
      this.changeLayerDK()

      let _this = this
      setTimeout(function () {
        _this.map.invalidateSize(true)
      }, 10)
    },
    //切换图层
    changeType (type) {
      let that = this
      switch (type) {
        case 'zk':
          that.map.removeLayer(that.baseLayerTd)
          that.map.addLayer(that.baseLayerZk)
          break
        case 'td':
          that.map.removeLayer(that.baseLayerZk)
          that.map.addLayer(that.baseLayerTd)
          break
        default:
          break
      }
    },
    addGeojson (data, latLng) {
      if (this.geojsonLayer) {
        this.map.removeLayer(this.geojsonLayer)
      }
      if (data.totalFeatures == 0) {
        return
      }
      this.geojsonLayer = L.geoJSON(data, {
        style: { color: '#ffff18', weight: 5, fillOpacity: 0 },
      }).addTo(this.map)
      L.popup()
        .setLatLng(latLng)
        .setContent(
          '<div class="infoDivs"><div>地块编码：' +
          data.features[0].properties.id +
          '</div><div>地块名称：地块' +
          data.features[0].properties.id +
          '</div><div>地块面积：' +
          data.features[0].properties.area +
          '㎡</div><div>地块面积：' +
          (data.features[0].properties.area / 666.67).toFixed(2) +
          '(亩)</div></div></div>'
        )
        .openOn(this.map)
    },
    position () {
      var mousePositionControl = L.control({
        position: 'bottomright',
      })
      mousePositionControl.onAdd = function (map) {
        var div = L.DomUtil.create('div', 'mouse-position')
        return div
      }
      mousePositionControl.updatePosition = function (latlng) {
        var lat = latlng.lat.toFixed(5)
        var lng = latlng.lng.toFixed(5)
        this._container.innerHTML =
          '<div style="color:#FFF;margin-bottom:-0.10rem;margin-right:0.20rem;"><span>经度: ' +
          lng +
          '</span><span style="margin-left: 0.20rem;">纬度: ' +
          lat +
          '</span></div>'
      }
      mousePositionControl.addTo(this.map)
      this.map.on('mousemove', function (e) {
        mousePositionControl.updatePosition(e.latlng)
      })
    }, // 距离量测
    jl () {
      this.map.off('click', this.clickReback)
      handMeasureDistance(this.map)
    },
    // 面积量测
    mj () {
      this.map.off('click', this.clickReback)
      handMeasureArea(this.map)
    },
    // 清空量测内容
    ql () {
      this.clickFun()
      handMeasureClear(this.map)
    },
    fw () {
      this.map.flyTo([31.841309, 113.194816])
    },
    clickFun () {
      this.map.on('click', this.clickReback)
    },
    clickReback (e) {
      let that = this
      axios
        .get(
          'http://175.6.146.33:88/geoserver/zhny/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=zhny%3Adp-dikuai&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=DWITHIN(the_geom,POINT(' +
          e.latlng.lng +
          ' ' +
          e.latlng.lat +
          '),0.00001,meters)'
        )
        .then((res) => that.addGeojson(res.data, e.latlng))
    },
    addPoint () {
      let point = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.22, 31.84],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.22, 31.849],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.228, 31.831],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.223, 31.832],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.215, 31.839],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.216, 31.845],
            },
          },
        ],
      }
      L.geoJSON(point, {
        pointToLayer: function (geoJsonPoint, latlng) {
          return L.marker(latlng, {
            title: '',
            icon: new L.Icon({
              iconUrl: require('../../assets/map/info.png'),
              iconSize: [40, 40],
              iconAnchor: [20, 0],
            }),
          })
        },
      })
        .addTo(this.map)
        .bindPopup(
          '<div class="infoDiv"><div>编号：XJYM006</div><div>位置：姚庙村五组</div><div>说明：建设用地</div><div>发现时间：2023年10月28日</div></div>'
        )
    },
    addPolygon () {
      var states = [
        {
          type: 'Feature',
          properties: { party: 'Republican' },
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [113.05, 31.99],
                [113.05, 31.98],
                [113.05, 31.94],
                [113.03, 31.94],
                [113.05, 31.99],
              ],
            ],
          },
        },
        {
          type: 'Feature',
          properties: { party: 'Democrat' },
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [113.0585284790202, 31.994899279999424],
                [113.06038190179076, 31.995646744888636],
                [113.06108611047418, 31.99437557677152],
                [113.05905033714288, 31.9935564747821],
                [113.0585284790202, 31.994899279999424],
              ],
            ],
          },
        },
      ]
      L.geoJSON(states).addTo(this.map)
    },
    setCenter (lat, lng) {
      this.map.setView(L.latLng(lat, lng), 14)
    },
    FullScreenFun () {
      let elem
      if (!this.full) {
        elem = document.getElementById('MyMap')
        // this.full = true
        if (elem.webkitRequestFullScreen) {
          elem.webkitRequestFullScreen()
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen()
        } else if (elem.requestFullScreen) {
          elem.requestFullscreen()
        } else {
          console.log('浏览器不支持全屏')
        }
      } else {
        elem = document
        this.full = false
        if (elem.webkitCancelFullScreen) {
          elem.webkitCancelFullScreen()
        } else if (elem.mozCancelFullScreen) {
          elem.mozCancelFullScreen()
        } else if (elem.cancelFullScreen) {
          elem.cancelFullScreen()
        } else if (elem.exitFullscreen) {
          elem.exitFullscreen()
        } else {
          console.log('浏览器不支持全屏')
        }
      }
    },
    zoomOut () {
      this.map.zoomOut()
    },
    zoomIn () {
      this.map.zoomIn()
    },
    changeLayerDK (CategoryType, optionsType, cropsType) {
      console.log('地块服务切换：', CategoryType, optionsType, cropsType)

      if (this.layerClass) {
        this.map.removeLayer(this.layerClass)
      }

      let itemStyle = null
      if (CategoryType && optionsType && cropsType) {
        itemStyle = styles[CategoryType][optionsType][cropsType]
      } else {
        itemStyle = styles.yg.zwsb.xm
      }
      let style = `<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0" 
 xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
 xmlns="http://www.opengis.net/sld" 
 xmlns:ogc="http://www.opengis.net/ogc" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <NamedLayer>
    <Name>dp-dikuai</Name>
    <UserStyle>
      <Title>zhny:dp-dikuai</Title>
      <Abstract>A sample style that draws a polygon</Abstract>
      <FeatureTypeStyle>`
      if (itemStyle.color.length > 1) {
        for (var i = 0; i < itemStyle.color.length; i++) {
          style +=
            `
        <Rule>
          <Name>rule` +
            (i + 1) +
            `</Name>
          <ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>status</ogc:PropertyName>
              <ogc:Literal>` +
            (i + 1) +
            `</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">` +
            itemStyle.color[i] +
            `</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">0</CssParameter>
            </Stroke>
          </PolygonSymbolizer>
        </Rule>`
        }
      } else {
        style +=
          `
        <Rule>
          <Name>rule1</Name>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">` +
          itemStyle.color[0] +
          `</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">0</CssParameter>
            </Stroke>
          </PolygonSymbolizer>
        </Rule>`
      }
      style += `
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>`
      this.layerClass = L.tileLayer
        .wms(
          'http://175.6.146.33:88/geoserver/zhny/wms?sld_body=' +
          encodeURIComponent(style) +
          '&CQL_FILTER=class in (' +
          itemStyle.class +
          ') ',
          {
            layers: 'zhny:dp-dikuai', //需要加载的图层
            format: 'image/png', //返回的数据格式
            transparent: true,
            zIndex: 300,
            // sld_body: encodeURIComponent(style),
          }
        )
        .addTo(this.map)
    },
    // 高亮行政区
    highlightXZ (name) {
      if (this.highlightLayer) {
        this.map.removeLayer(highlightLayer)
      }
      bqxz.features.forEach((element) => {
        if (element.properties.NAME == name) {
          this.highlightLayer = L.geoJSON(element, {
            style: { color: '#41b349', weight: 5, fillOpacity: 0 },
          }).addTo(this.map)
        }
      })
      this.map.fitBounds(this.highlightLayer.getBounds())
    },
    // 图层树切换事件
    treeChange (value, visible) {
      if (value == '地块') {
        if (visible) {
          this.map.addLayer(this.layerDK)
        } else {
          this.map.removeLayer(this.layerDK)
        }
      } else if (value == '注记') {
        if (visible) {
          this.map.addLayer(this.layerZHUJI)
        } else {
          this.map.removeLayer(this.layerZHUJI)
        }
      } else if (value == '村边界') {
        if (visible) {
          this.map.addLayer(this.layerCUN)
        } else {
          this.map.removeLayer(this.layerCUN)
        }
      } else if (value == '乡镇边界') {
        if (visible) {
          this.map.addLayer(this.layerZHEN)
        } else {
          this.map.removeLayer(this.layerZHEN)
        }
      } else if (value == '县边界') {
        if (visible) {
          this.map.addLayer(this.layerXIAN)
        } else {
          this.map.removeLayer(this.layerXIAN)
        }
      }
    },
  },
  created () { },
}
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss">
.mapboxgl-popup {
  top: -20px;
}
.mapboxgl-ctrl {
  display: none !important;
}
.dialog-container {
  width: 600px !important;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: normal;
  color: #02f6d9;
  line-height: 24px;
  background: rgba(0, 13, 14, 0.8);
  padding: 32px 21px 21px;
  border: 1px solid #036a73;
  .dialogClose {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: -25px;
    right: -16px;
    cursor: pointer;
  }
  .dialogTitle {
    height: 52px;
    padding-left: 70px;
    line-height: 46px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: normal;
    color: #02f6d9;
    background-image: url("../../assets/bigScreenHome/ic_bg_xiaobiaoti.png");
    background-size: 100% 100%;
    margin-bottom: 18px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mapboxgl-popup-tip {
    background: rgba(0, 13, 14, 0.4);
    display: none;
  }
  .mapboxgl-popup-content {
    text-align: left;
    background-color: transparent !important;
    position: relative;
    padding: 0;
    .dialogList {
      display: inline-block;
      min-height: 34px;
      padding-left: 10px;
      text-align: left;
      align-items: center;
      line-height: 26px;
      font-size: 18px;
      color: #ffffff;
      &:nth-child(odd) {
        width: 52%;
      }
      &:nth-child(even) {
        width: 48%;
      }
      .dialogLabel {
        color: #02f6d9;
      }
      .dialogDesc {
        line-height: 26px;
      }
    }
    .dialogList-line {
      width: 100% !important;
      display: flex;
      align-items: flex-start;
      .dialogLabel {
        min-width: auto;
      }
      .dialogDesc {
        flex: 1;
      }
    }
  }
  .userList {
    display: inline-block;
    overflow-x: scroll;
    width: 100%;
    .table {
      margin-top: 10px;
      width: 1120px;
      padding: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      .thead,
      .tbody .tr {
        width: 100%;
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
          line-height: 20px;
          font-size: 18px;
        }
        .tableXh {
          width: 50px;
        }
        .tableBh {
          width: 120px;
        }
        .tableTm {
          width: 250px;
        }
        .tableMc {
          width: 80px;
        }
        .tableDz {
          // flex: 1;
          width: 600px;
        }
      }
      .tbody {
        height: 100px;
        overflow: auto;
        .tr {
          span {
            color: #ffffff;
            line-height: 32px;
            font-size: 18px;
          }
        }
      }
    }
  }

  .tpList {
    display: flex;
    align-items: center;
    .tpListLabel {
      display: inline-block;
      padding-right: 6px;
    }
    .tpListImg {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
}
.dialog-container::after {
  display: block;
  content: "";
  // background: rgba(0, 13, 14, 0.4);
  width: 0;
  height: 0;
  border-top: 14px solid rgba(0, 13, 14, 0.8);
  border-right: 14px solid transparent;
  border-left: 14px solid transparent;
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-28px);
}
// 详情=》表格
.table_wrap {
  max-width: 1258px; // 1300-42
  max-height: 500px;
  overflow: auto;
  padding: 0 10px;
  .table-item-box {
    width: 100%;
    overflow: auto;
    margin-top: 20px;
    &:last-child {
      margin-bottom: 20px;
    }
    .table-title {
      margin-bottom: 10px;
      font-size: 18px;
      font-weight: 600;
    }
    .table-con {
      .tr,
      .td {
        display: flex;
        div {
          border: 1px solid #02f6d9;
          flex-shrink: 0;
          width: 200px;
          line-height: 40px;
          font-size: 18px;
          padding: 4px 8px;
          box-sizing: border-box;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .td {
        div {
          color: #fff;
        }
      }
    }
  }
  .zskg-bar {
    width: 50%;
    float: left;
  }
  .pdzf-bar {
    width: 50%;
    display: inline-block;
  }
}
.dialog-container-auto {
  width: auto !important;
  .dialogTitle {
    padding-left: 150px;
  }
}
/* 滚动条宽度 */
.scroll-bar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #000e0f;
}
/* track滚动条未覆盖区域 */
.scroll-bar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
}
/* thumb滚动条覆盖区域 */
.scroll-bar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #03fcad 0%, #02f3f7 100%);
}
.my-div-icon {
  p {
    width: 80px;
    font-size: 20px;
    font-weight: bold;
    color: #303133;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
      1.4px 1.4px #fff, 1.4px -1.4px #fff, -1.4px 1.4px #fff, -1.4px -1.4px #fff;
  }
  .qx {
    font-size: 22px;
  }
  .xz {
    font-size: 20px;
  }
}

.infoDivs,
.infoDiv {
  border: 1px solid #c0c4cc;
  border-radius: 5px;
  background-color: rgba(241, 241, 241, 0);
  width: 200px;
  height: 140px;
  padding: 10px;
  resize: none;
  div {
    line-height: 30px;
    color: #ffffff;
  }
}
.infoDivs {
  height: 140px;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: RGBA(16, 53, 78, 0.7);
  color: #ffffff;
}
</style>
